#search {
    display: block;
    box-sizing: border-box;
    width: min(640px, calc(100% - 40px));
    margin: 26px auto 30px;
    padding: 16px 22px 16px 54px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002664' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M21 21l-6-6'/%3E%3C/svg%3E") no-repeat 20px center / 22px 22px;
    box-shadow: 0 6px 20px rgba(0, 38, 100, 0.12);
    color: #1f2633;
    font-family: inherit;
    font-size: 17px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#search::placeholder {
    color: #8a93a6;
}

#search:hover {
    box-shadow: 0 8px 24px rgba(0, 38, 100, 0.18);
}

#search:focus {
    outline: none;
    border-color: #002664;
    box-shadow: 0 0 0 4px rgba(254, 203, 0, 0.5), 0 6px 20px rgba(0, 38, 100, 0.15);
}

.course-list {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 22px;
}

.course {
    --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19a9 9 0 0 1 9 0 9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6a9 9 0 0 1 9 0 9 9 0 0 1 9 0'/%3E%3Cpath d='M3 6v13M12 6v13M21 6v13'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 160px;
    padding: 24px 16px;
    box-sizing: border-box;
    border-radius: 16px;
    border-bottom: 4px solid transparent;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.course:hover {
    transform: translateY(-4px);
    border-bottom-color: #FECB00;
}

.course:active {
    transform: scale(0.97);
}

.course::before {
    content: "";
    flex: none;
    width: 48px;
    height: 48px;
    background: #002664;
    -webkit-mask: var(--icone) center / contain no-repeat;
    mask: var(--icone) center / contain no-repeat;
}

.course h2,
.course h3 {
    margin: 0;
    color: #1f2633;
    font-size: 20px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.course > p {
    display: none;
}

.course.ic-toque { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 9 12 5 2 9l10 4 10-4v6'/%3E%3Cpath d='M6 10.6V16a6 3 0 0 0 12 0v-5.4'/%3E%3C/svg%3E"); }
.course.ic-cahier { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M9 4v16'/%3E%3Cpath d='M13 8h2M13 12h2'/%3E%3C/svg%3E"); }
.course.ic-crayon { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.83 2.83 0 1 0-4-4L4 16v4'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); }
.course.ic-medecine { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 13.57 12 21l-2.9-2.87'/%3E%3Cpath d='M2.99 10.9A5 5 0 0 1 12 7.88a5 5 0 1 1 7.5 6.57'/%3E%3Cpath d='M3 13h2l2 3 2-6 1 3h3'/%3E%3C/svg%3E"); }
.course.ic-maths { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M12 3v18'/%3E%3Cpath d='M16.5 4.5l3 3M19.5 4.5l-3 3'/%3E%3Cpath d='M6 4v4M4 6h4'/%3E%3Cpath d='M4 18h4'/%3E%3Cpath d='M18 16v.01M18 20v.01'/%3E%3C/svg%3E"); }
.course.ic-physique { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M19.07 4.93c-1.56-1.56-6 .34-9.9 4.24-3.9 3.9-5.8 8.34-4.24 9.9 1.56 1.56 6-.34 9.9-4.24 3.9-3.9 5.8-8.34 4.24-9.9'/%3E%3Cpath d='M4.93 4.93c-1.56 1.56.34 6 4.24 9.9 3.9 3.9 8.34 5.8 9.9 4.24 1.56-1.56-.34-6-4.24-9.9-3.9-3.9-8.34-5.8-9.9-4.24'/%3E%3C/svg%3E"); }
.course.ic-chimie { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 9h4'/%3E%3Cpath d='M10 3v6L6 20a.7.7 0 0 0 .5 1h11a.7.7 0 0 0 .5-1L14 9V3'/%3E%3C/svg%3E"); }
.course.ic-biologie { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21c.5-4.5 2.5-8 7-10'/%3E%3Cpath d='M9 18c6.22 0 10.5-3.29 11-12V4h-4.01C7 4 4.01 8 4 13c0 1 0 3 2 5h3z'/%3E%3C/svg%3E"); }
.course.ic-histoire { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M3 10h18M5 6l7-3 7 3'/%3E%3Cpath d='M4 10v11M20 10v11M8 14v3M12 14v3M16 14v3'/%3E%3C/svg%3E"); }
.course.ic-geo { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0'/%3E%3Cpath d='M3.6 9h16.8M3.6 15h16.8'/%3E%3Cpath d='M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E"); }
.course.ic-langue { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h7'/%3E%3Cpath d='M9 3v2c0 4.42-2.24 8-5 8'/%3E%3Cpath d='M5 9c0 2.14 2.95 3.91 6.7 4'/%3E%3Cpath d='M12 20l4-9 4 9M19.1 18h-6.2'/%3E%3C/svg%3E"); }
.course.ic-philo { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h1M12 3v1M20 12h1M5.6 5.6l.7.7M18.4 5.6l-.7.7'/%3E%3Cpath d='M9 16a5 5 0 1 1 6 0 3.5 3.5 0 0 0-1 3 2 2 0 0 1-4 0 3.5 3.5 0 0 0-1-3'/%3E%3Cpath d='M9.7 17h4.6'/%3E%3C/svg%3E"); }
.course.ic-francais { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 17V5c0-1.12-.88-2-2-2s-2 .88-2 2v12l2 2 2-2z'/%3E%3Cpath d='M16 7h4'/%3E%3Cpath d='M18 19H5a2 2 0 1 1 0-4h4a2 2 0 1 0 0-4H6'/%3E%3C/svg%3E"); }
.course.ic-civisme { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M6 6l6-1 6 1'/%3E%3Cpath d='M12 3v17'/%3E%3Cpath d='M9 12 6 6l-3 6a3 3 0 0 0 6 0'/%3E%3Cpath d='M21 12l-3-6-3 6a3 3 0 0 0 6 0'/%3E%3C/svg%3E"); }
.course.ic-diplome { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 15m-3 0a3 3 0 1 0 6 0 3 3 0 1 0-6 0'/%3E%3Cpath d='M13 17.5V22l2-1.5 2 1.5v-4.5'/%3E%3Cpath d='M10 19H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-1 1.73'/%3E%3Cpath d='M6 9h12M6 12h3M6 15h2'/%3E%3C/svg%3E"); }
.course.ic-livres { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z'/%3E%3Cpath d='M9 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z'/%3E%3Cpath d='M5 8h4M9 16h4'/%3E%3Cpath d='M13.8 4.56l2.18-.53c.56-.13 1.13.19 1.28.73l3.7 13.42a1.02 1.02 0 0 1-.77 1.26l-2.18.53c-.56.13-1.13-.19-1.28-.73L13.03 5.82a1.02 1.02 0 0 1 .77-1.26z'/%3E%3Cpath d='M14 9l4-1M16 16l3.92-.98'/%3E%3C/svg%3E"); }

@media (max-width: 600px) {
    #search {
        width: calc(100% - 24px);
        margin: 16px auto 20px;
        padding: 14px 18px 14px 48px;
        background-position: 16px center;
        background-size: 20px 20px;
        font-size: 16px;
    }

    .course-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: auto;
        padding: 0 12px;
        box-sizing: border-box;
    }

    .course {
        gap: 8px;
        min-height: 110px;
        padding: 14px 10px;
        border-radius: 14px;
    }

    .course:hover {
        transform: none;
    }

    .course::before {
        width: 32px;
        height: 32px;
    }

    .course h2,
    .course h3 {
        font-size: 17px;
        line-height: 1.25;
    }
}