/* =====================================================================
   La Bonne Moyenne — Feuille de style
   Palette joyeuse : rose #FE99D9, orange #FF6502, vert #1F9540,
   bleu #4788ED, jaune #F6C945 sur fond crème.
   ===================================================================== */

:root {
    --creme: #FFF7EC;
    --encre: #26232E;
    --encre-douce: #5b5766;
    --blanc: #ffffff;

    --rose: #FE99D9;
    --orange: #FF6502;
    --vert: #1F9540;
    --bleu: #4788ED;
    --jaune: #F6C945;
    --violet: #8B5CF6;
    --rouge: #E5484D;
    --turquoise: #12B5A5;

    --font-titre: 'Baloo 2', 'Trebuchet MS', sans-serif;
    --font-corps: 'Nunito', 'Segoe UI', sans-serif;

    --rayon-s: 12px;
    --rayon-m: 20px;
    --rayon-l: 28px;
    --pille: 999px;

    --ombre-carte: 0 6px 0 rgba(38, 35, 46, .10);
    --ombre-btn: 0 4px 0 rgba(38, 35, 46, .22);

    --entete-h: 76px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-corps);
    font-size: 17px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--creme);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-titre); line-height: 1.15; margin: 0 0 .5em; }

img { max-width: 100%; }

a { color: var(--bleu); }

:focus-visible {
    outline: 3px solid var(--bleu);
    outline-offset: 2px;
    border-radius: 6px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Décor de fond                                                       */
/* ------------------------------------------------------------------ */

.deco-fond { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.deco { position: absolute; opacity: .5; }
.deco--rond { width: 130px; height: 130px; border-radius: 50%; }
.deco--croix { width: 46px; height: 46px; }
.deco--croix::before, .deco--croix::after {
    content: ''; position: absolute; inset: 0; margin: auto; background: currentColor; border-radius: 6px;
}
.deco--croix::before { width: 100%; height: 22%; }
.deco--croix::after { width: 22%; height: 100%; }
.deco--etoile {
    width: 54px; height: 54px;
    clip-path: polygon(50% 0, 62% 35%, 98% 35%, 69% 57%, 79% 91%, 50% 70%, 21% 91%, 31% 57%, 2% 35%, 38% 35%);
}
.deco--zigzag {
    width: 120px; height: 24px;
    clip-path: polygon(0 100%, 12% 0, 25% 100%, 37% 0, 50% 100%, 62% 0, 75% 100%, 87% 0, 100% 100%);
}
.deco--rose { background: var(--rose); top: 12%; left: -50px; }
.deco--vert { background: var(--vert); color: var(--vert); top: 65%; left: 3%; transform: rotate(12deg); }
.deco--bleu { background: var(--bleu); top: 30%; right: -40px; }
.deco--jaune { background: var(--jaune); top: 8%; right: 12%; transform: rotate(-8deg); }
.deco--orange { background: var(--orange); bottom: 6%; right: 6%; }
.deco--violet { background: var(--violet); bottom: 22%; left: 40%; transform: rotate(-6deg); }

/* ------------------------------------------------------------------ */
/* En-tête                                                             */
/* ------------------------------------------------------------------ */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: var(--entete-h);
    padding: .5rem clamp(.75rem, 3vw, 2rem);
    background: rgba(255, 247, 236, .92);
    backdrop-filter: blur(8px);
    border-bottom: 3px solid var(--encre);
}

.entete__logo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-titre);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--encre);
    text-decoration: none;
    white-space: nowrap;
}
.entete__logo img { display: block; }

.entete__centre { flex: 1; text-align: center; font-family: var(--font-titre); font-weight: 700; }
.entete__droite { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

.entete-profil { display: flex; align-items: center; gap: .6rem; text-align: right; }
.entete-profil__txt { display: flex; flex-direction: column; line-height: 1.2; }
.entete-profil__txt strong { font-family: var(--font-titre); font-size: 1rem; }
.entete-profil__txt span { font-size: .82rem; color: var(--encre-douce); }

/* ------------------------------------------------------------------ */
/* Avatars                                                             */
/* ------------------------------------------------------------------ */

.avatar { border-radius: 50%; object-fit: cover; background: var(--blanc); }
.avatar--sm { width: 44px; height: 44px; border: 2.5px solid var(--encre); }
.avatar--md { width: 64px; height: 64px; border: 3px solid var(--encre); }
.avatar--lg { width: 108px; height: 108px; border: 4px solid var(--encre); }
.avatar--xl { width: 128px; height: 128px; border: 5px solid var(--orange); }

/* ------------------------------------------------------------------ */
/* Boutons                                                             */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 46px;
    padding: .55rem 1.3rem;
    border: 3px solid var(--encre);
    border-radius: var(--pille);
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    background: var(--blanc);
    color: var(--encre);
    box-shadow: var(--ombre-btn);
    transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(38, 35, 46, .22); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(38, 35, 46, .22); }

.btn--sm { min-height: 38px; padding: .3rem .9rem; font-size: .88rem; border-width: 2.5px; }
.btn--plein { width: 100%; }

.btn--primaire { background: var(--orange); color: #fff; }
.btn--secondaire { background: var(--bleu); color: #fff; }
.btn--danger { background: var(--rouge); color: #fff; }
.btn--fantome { background: transparent; }
.btn--blanc { background: #fff; color: var(--encre); border-color: #fff; box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Contenu / pied de page                                              */
/* ------------------------------------------------------------------ */

.contenu {
    position: relative;
    z-index: 1;
    width: min(1120px, 100% - 2rem);
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2.2rem) 0 3rem;
    flex: 1;
}

.pied {
    position: relative;
    z-index: 1;
    background: var(--encre);
    color: var(--creme);
    text-align: center;
    padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
    border-radius: var(--rayon-l) var(--rayon-l) 0 0;
}
.pied__titre { font-family: var(--font-titre); font-weight: 800; font-size: 1.3rem; margin: 0; }
.pied__slogan { margin: .3rem 0 1rem; opacity: .85; }
.pied__liens { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.pied__liens a { color: var(--jaune); font-weight: 700; text-decoration: none; }
.pied__liens a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* Accueil — héros                                                     */
/* ------------------------------------------------------------------ */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--jaune);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-carte);
    padding: clamp(1.4rem, 4vw, 3rem);
    margin-bottom: 2.2rem;
}
.hero__titre {
    font-size: clamp(2.3rem, 6.5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -.5px;
    margin: 0;
    text-shadow: 3px 3px 0 rgba(255, 255, 255, .55);
}
.hero__sous-titre {
    font-size: clamp(1.05rem, 2.5vw, 1.4rem);
    font-weight: 700;
    margin: .6rem 0 0;
}
.hero__illus { flex: none; max-width: 34%; }

.choix__titre {
    text-align: center;
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
}
.choix__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.4rem;
}

.carte-enfant {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.6rem 1rem 1.2rem;
    background: var(--blanc);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-carte);
    cursor: pointer;
    font-family: var(--font-corps);
    color: var(--encre);
    transition: transform .18s ease-out, box-shadow .18s ease-out;
}
.carte-enfant:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 10px 0 rgba(38, 35, 46, .10); }
.carte-enfant:active { transform: translateY(1px); }
.carte-enfant__halo {
    position: absolute;
    inset: .9rem .9rem auto;
    height: 8px;
    border-radius: var(--pille);
    background: var(--orange);
}
.carte-enfant:nth-child(2n) .carte-enfant__halo { background: var(--bleu); }
.carte-enfant:nth-child(3n) .carte-enfant__halo { background: var(--vert); }
.carte-enfant__nom { font-family: var(--font-titre); font-weight: 800; font-size: 1.3rem; margin-top: .5rem; }
.carte-enfant__classe {
    background: var(--creme);
    border: 2px solid var(--encre);
    border-radius: var(--pille);
    padding: .1rem .8rem;
    font-weight: 700;
    font-size: .92rem;
}
.carte-enfant__invit { margin-top: .5rem; font-size: .85rem; font-weight: 700; color: var(--orange); }

/* ------------------------------------------------------------------ */
/* Modale (code enfant / confirmations)                                */
/* ------------------------------------------------------------------ */

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__fond { position: absolute; inset: 0; background: rgba(38, 35, 46, .55); backdrop-filter: blur(3px); }
.modal__boite {
    position: relative;
    width: min(420px, 100%);
    background: var(--blanc);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-l);
    box-shadow: 0 12px 0 rgba(38, 35, 46, .25);
    padding: 1.8rem 1.5rem 1.5rem;
    text-align: center;
    animation: pop .22s ease-out;
}
@keyframes pop { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal__boite h3 { font-size: 1.4rem; margin-bottom: .2rem; }
.modal__nom { font-weight: 800; color: var(--orange); margin: 0 0 1rem; }
.modal__fermer {
    position: absolute;
    top: .6rem; right: .8rem;
    border: 0; background: none;
    font-size: 1.8rem; line-height: 1;
    cursor: pointer; color: var(--encre-douce);
}
.modal__fermer:hover { color: var(--rouge); }

.code-direct { text-align: center; letter-spacing: .6em; font-size: 1.6rem; font-weight: 800; }
.code-pastilles { display: flex; justify-content: center; gap: .7rem; margin: .9rem 0 1.1rem; }
.pastille {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2.5px solid var(--encre);
    background: var(--creme);
    transition: background .12s ease-out;
}
.pastille.is-pleine { background: var(--vert); }

.pave {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    width: min(260px, 100%);
    margin-inline: auto;
}
.pave__touche {
    min-height: 54px;
    border: 3px solid var(--encre);
    border-radius: 16px;
    background: var(--creme);
    font-family: var(--font-titre);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--encre);
    cursor: pointer;
    box-shadow: var(--ombre-btn);
    transition: transform .1s ease-out, background .1s ease-out;
}
.pave__touche:hover { background: var(--jaune); }
.pave__touche:active { transform: translateY(2px); box-shadow: none; }
.pave__touche--valider { background: var(--vert); color: #fff; }
.pave__touche--valider:hover { background: var(--vert); filter: brightness(1.1); }
.pave__touche--effacer { background: var(--rose); }

/* ------------------------------------------------------------------ */
/* Page enfant                                                         */
/* ------------------------------------------------------------------ */

.bienvenue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.bienvenue__titre { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0; }
.bienvenue__classe { margin: .2rem 0 0; font-weight: 700; color: var(--encre-douce); }

/* Boutons matières — 5 cm × 3 cm, coins arrondis */
.matieres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 189px));
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.matiere-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    height: 113px;              /* ≈ 3 cm */
    max-width: 189px;           /* ≈ 5 cm */
    width: 100%;
    background: var(--mat-fond, var(--bleu));
    color: var(--mat-encre, #fff);
    border: 3px solid var(--encre);
    border-radius: 22px;
    box-shadow: var(--ombre-btn);
    text-decoration: none;
    font-family: var(--font-titre);
    font-weight: 700;
    text-align: center;
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.matiere-btn:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 7px 0 rgba(38, 35, 46, .22); }
.matiere-btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(38, 35, 46, .22); }
.matiere-btn__icone { width: 34px; height: 34px; display: block; }
.matiere-btn__icone svg { width: 100%; height: 100%; }
.matiere-btn__nom { font-size: .98rem; line-height: 1.15; padding-inline: .4rem; }
.matiere-btn__compteur {
    position: absolute;
    top: -10px; right: -8px;
    min-width: 28px; height: 28px;
    display: grid; place-items: center;
    padding-inline: .35rem;
    background: var(--blanc);
    color: var(--encre);
    border: 2.5px solid var(--encre);
    border-radius: var(--pille);
    font-size: .8rem;
}

.exercices { display: grid; gap: 1.4rem; }

.bloc-matiere {
    background: var(--blanc);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-carte);
    padding: 1.2rem clamp(1rem, 3vw, 1.6rem) 1.3rem;
    scroll-margin-top: calc(var(--entete-h) + 12px);
}
.bloc-matiere__titre {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.35rem;
    margin-bottom: .8rem;
}
.bloc-matiere__icone {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    background: var(--mat-fond);
    color: var(--mat-encre);
    border: 2.5px solid var(--encre);
    border-radius: 12px;
    flex: none;
}
.bloc-matiere__icone svg { width: 26px; height: 26px; }
.bloc-matiere__pastille {
    margin-left: auto;
    background: var(--mat-fond);
    color: var(--mat-encre);
    border: 2.5px solid var(--encre);
    border-radius: var(--pille);
    min-width: 32px; height: 32px;
    display: grid; place-items: center;
    font-size: .95rem;
}
.bloc-matiere__vide { margin: .2rem 0 .3rem; color: var(--encre-douce); font-style: italic; }

.liste-exos { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.exo {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    padding: .55rem .7rem;
    border: 2.5px solid var(--encre);
    border-radius: var(--rayon-m);
    background: var(--creme);
    transition: background .15s ease-out, opacity .15s ease-out;
}
.exo--fait { background: #e7f6ea; }
.exo--fait .exo__titre { text-decoration: line-through; text-decoration-thickness: 2px; }

.exo__lien {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1;
    min-width: 220px;
    min-height: 44px;
    color: var(--encre);
    text-decoration: none;
    font-weight: 700;
}
.exo__lien:hover .exo__titre { color: var(--orange); text-decoration: underline; }
.exo__date {
    flex: none;
    background: var(--blanc);
    border: 2px solid var(--encre);
    border-radius: var(--pille);
    padding: .1rem .65rem;
    font-size: .82rem;
    font-weight: 800;
}
.exo__actions { display: flex; gap: .5rem; }

.case {
    min-height: 44px;
    padding: .3rem .9rem;
    border: 2.5px solid var(--encre);
    border-radius: var(--pille);
    background: var(--blanc);
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: .88rem;
    color: var(--encre);
    cursor: pointer;
    transition: transform .12s ease-out, background .12s ease-out, color .12s ease-out;
}
.case:hover { transform: translateY(-1px); }
.case--fait.is-on { background: var(--vert); color: #fff; }
.case--arefaire.is-on { background: var(--orange); color: #fff; }

.badge {
    display: inline-block;
    padding: .12rem .6rem;
    border: 2px solid var(--encre);
    border-radius: var(--pille);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.badge--nouveau { background: var(--rose); color: #3d1030; }
.badge--alerte { background: var(--rouge); color: #fff; }

/* ------------------------------------------------------------------ */
/* États vides + flash                                                 */
/* ------------------------------------------------------------------ */

.vide {
    background: var(--blanc);
    border: 3px dashed var(--encre-douce);
    border-radius: var(--rayon-l);
    padding: 2rem;
    text-align: center;
    color: var(--encre-douce);
}
.vide p { margin: .3rem 0; }

.flash {
    margin: 0 0 1.2rem;
    padding: .8rem 1.1rem;
    border: 3px solid var(--encre);
    border-radius: var(--rayon-m);
    font-weight: 700;
    box-shadow: var(--ombre-carte);
}
.flash--ok { background: #e7f6ea; }
.flash--erreur { background: #fde3e4; }

/* ------------------------------------------------------------------ */
/* Administration                                                      */
/* ------------------------------------------------------------------ */

.admin .contenu--admin { width: min(1080px, 100% - 2rem); }

.entete--admin { border-bottom-color: var(--vert); }

.nav-admin { display: flex; gap: .4rem; flex-wrap: wrap; }
.nav-admin__lien {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: .3rem .95rem;
    border: 2.5px solid var(--encre);
    border-radius: var(--pille);
    background: var(--blanc);
    color: var(--encre);
    text-decoration: none;
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: .92rem;
    transition: background .14s ease-out, transform .14s ease-out;
}
.nav-admin__lien:hover { transform: translateY(-1px); }
.nav-admin__lien.is-actif { background: var(--vert); color: #fff; }

.titre-page { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.sous-titre { font-size: 1.4rem; margin-top: 2rem; }

.corps-centre { display: grid; place-items: center; padding: 1rem; }

.carte-login {
    width: min(400px, 100%);
    background: var(--blanc);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-l);
    box-shadow: 0 10px 0 rgba(38, 35, 46, .18);
    padding: 2rem 1.7rem;
    text-align: center;
    display: grid;
    gap: .55rem;
}
.carte-login h1 { font-size: 1.7rem; margin: 0; }
.carte-login__sous-titre { margin: 0 0 .8rem; color: var(--encre-douce); font-weight: 700; }
.carte-login label { text-align: left; font-weight: 800; font-size: .9rem; margin-top: .3rem; }
.carte-login__retour { font-size: .9rem; font-weight: 700; }

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.8rem;
}
.stat {
    background: var(--stat-fond, var(--bleu));
    color: var(--stat-encre, #fff);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-carte);
    padding: 1.1rem 1rem;
    text-align: center;
}
.stat__chiffre { display: block; font-family: var(--font-titre); font-weight: 800; font-size: 2.1rem; line-height: 1; }
.stat__label { font-weight: 700; font-size: .92rem; }

.grille-enfants { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.carte-enfant-admin {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--blanc);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-carte);
    padding: 1.1rem;
}
.carte-enfant-admin__infos { flex: 1; min-width: 150px; }
.carte-enfant-admin__infos h3 { margin: 0; font-size: 1.25rem; }
.carte-enfant-admin__infos p { margin: .2rem 0; font-size: .92rem; }
.carte-enfant-admin__detail { color: var(--encre-douce); }
.carte-enfant-admin__actions { display: flex; gap: .5rem; }

.progression {
    height: 14px;
    background: var(--creme);
    border: 2.5px solid var(--encre);
    border-radius: var(--pille);
    overflow: hidden;
    margin-top: .4rem;
    max-width: 220px;
}
.progression__barre { height: 100%; background: var(--vert); transition: width .3s ease-out; }

/* ----- Formulaires admin ----- */

.carte-form {
    background: var(--blanc);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-carte);
    padding: clamp(1.1rem, 3vw, 1.8rem);
    margin-bottom: 1.8rem;
}
.carte-form h2 { font-size: 1.35rem; }

.form-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.2rem;
}
.form-grille__pleine { grid-column: 1 / -1; }

.carte-form label, .carte-form legend { font-weight: 800; font-size: .92rem; }
.carte-form small { color: var(--encre-douce); }
.carte-form code { background: var(--creme); padding: .1rem .4rem; border-radius: 6px; }

input[type="text"], input[type="password"], input[type="date"], input[type="file"],
select, .code-direct {
    width: 100%;
    min-height: 48px;
    margin-top: .3rem;
    padding: .5rem .8rem;
    border: 3px solid var(--encre);
    border-radius: var(--rayon-s);
    background: var(--creme);
    font-family: var(--font-corps);
    font-size: 1rem;
    color: var(--encre);
}
input:focus, select:focus { outline: 3px solid var(--bleu); outline-offset: 1px; }

.form-note { margin: 1rem 0 0; color: var(--encre-douce); font-size: .92rem; }
.actions-ligne { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.actions-ligne--centre { justify-content: center; }

/* Choix icône / couleur */
.choix-icone, .choix-couleur { border: none; padding: 0; margin: 1.2rem 0 0; }
.choix-icone__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: .6rem;
    margin-top: .5rem;
}
.choix-icone__opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .6rem .3rem .5rem;
    border: 2.5px solid var(--encre);
    border-radius: var(--rayon-s);
    background: var(--creme);
    cursor: pointer;
    transition: background .12s ease-out, transform .12s ease-out;
}
.choix-icone__opt:hover { transform: translateY(-2px); }
.choix-icone__opt input { position: absolute; opacity: 0; pointer-events: none; }
.choix-icone__opt:has(input:checked), .choix-icone__opt.is-choisi { background: var(--jaune); }
.choix-icone__svg { width: 34px; height: 34px; }
.choix-icone__svg svg { width: 100%; height: 100%; }
.choix-icone__nom { font-size: .72rem; font-weight: 800; color: var(--encre-douce); }

.choix-couleur__grille { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .5rem; }
.choix-couleur__opt {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .8rem;
    border: 2.5px solid var(--encre);
    border-radius: var(--pille);
    background: var(--creme);
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
    transition: background .12s ease-out;
}
.choix-couleur__opt input { position: absolute; opacity: 0; pointer-events: none; }
.choix-couleur__opt:has(input:checked), .choix-couleur__opt.is-choisi { background: var(--jaune); }
.pastille-couleur {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid var(--encre);
}

/* Tables */
.table-wrap {
    overflow-x: auto;
    border: 3px solid var(--encre);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-carte);
    background: var(--blanc);
}
.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table th, .table td { padding: .75rem .9rem; text-align: left; vertical-align: middle; }
.table thead th {
    font-family: var(--font-titre);
    background: var(--encre);
    color: var(--creme);
    font-size: .95rem;
}
.table tbody tr:nth-child(even) { background: #fff3e0; }
.table__actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.table code { background: var(--creme); padding: .1rem .4rem; border-radius: 6px; font-size: .85rem; }

.apercu-matiere, .tag-matiere {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--mat-fond);
    color: var(--mat-encre);
    border: 2.5px solid var(--encre);
    border-radius: var(--rayon-s);
    padding: .35rem .6rem;
    font-weight: 800;
    font-size: .85rem;
}
.apercu-matiere svg { width: 24px; height: 24px; }

.filtre {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
    font-weight: 800;
}
.filtre select { width: auto; margin-top: 0; min-height: 44px; }

.details-edit { position: relative; }
.details-edit summary { list-style: none; }
.details-edit summary::-webkit-details-marker { display: none; }
.edit-inline {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: flex;
    gap: .4rem;
    align-items: center;
    background: var(--blanc);
    border: 3px solid var(--encre);
    border-radius: var(--rayon-s);
    box-shadow: 0 8px 0 rgba(38, 35, 46, .18);
    padding: .6rem;
}
.edit-inline input[type="text"] { width: 200px; margin-top: 0; }
.edit-inline input[type="date"] { width: 150px; margin-top: 0; }
.form-suppr { display: inline; }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 760px) {
    body { font-size: 16px; }

    .entete { flex-wrap: wrap; gap: .4rem; padding-block: .5rem; }
    .entete__logo span { font-size: 1rem; }
    .entete-profil__txt span { display: none; }

    .hero { flex-direction: column; text-align: center; }
    .hero__illus { max-width: 70%; order: -1; }

    .bienvenue { flex-direction: row; }
    .bienvenue__titre { font-size: 1.7rem; }

    .matieres { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem; }
    .matiere-btn { height: 100px; }

    .exo__lien { min-width: 0; width: 100%; }
    .exo__actions { width: 100%; }
    .exo__actions .case { flex: 1; }

    .edit-inline { position: fixed; left: .5rem; right: .5rem; top: auto; bottom: .5rem; flex-wrap: wrap; }
    .edit-inline input[type="text"] { flex: 1 1 100%; width: auto; }
    .edit-inline input[type="date"] { flex: 1; width: auto; }

    .nav-admin { order: 3; width: 100%; justify-content: center; }
    .entete__droite { margin-left: 0; }
}

@media (max-width: 400px) {
    .matieres { grid-template-columns: repeat(2, 1fr); }
    .pave__touche { min-height: 50px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}