/* =====================================================================
   etudiant.css — Identité propre de l'espace étudiant.

   REMPLACE l'emprunt à css/admin.css et css/admin-theme.css. L'espace
   portait jusqu'ici les vêtements du back-office : un vert unique pour
   tous les onglets, un fond gris-vert, la police du système. C'est le
   langage d'un outil de gestion, adressé à un formateur qui gère des
   salles — pas à quelqu'un qui révise à 23 h.

   LE SYSTÈME TIENT EN UNE RÈGLE : huit outils, huit teintes, jamais
   réattribuées. La couleur n'est pas décorative, elle dit où l'on est —
   dans la barre, sur les tuiles, en tête de page. L'émeraude n'est pas
   abandonnée : elle reste le fil de la marque et devient la couleur de
   la révision, l'outil central.

   COMPATIBILITÉ VOULUE : les neuf variables d'admin.css que les pages
   citent dans leurs styles en ligne (--color-muted, --c-primary…) sont
   redéfinies ici comme ALIAS des nouveaux jetons. Les dix pages
   existantes deviennent donc correctes dans les deux thèmes sans qu'une
   seule d'entre elles soit modifiée.
   ===================================================================== */

/* ---------- Polices AUTO-HÉBERGÉES ----------------------------------
   Aucune requête vers Google : l'adresse IP de l'étudiant ne part chez
   personne. Même règle que le reste du site (css/fonts.css), fichiers
   récupérés par tools/fetch_fonts.php.
   `font-display: swap` : le texte s'affiche tout de suite dans la fonte
   de repli, il ne disparaît jamais le temps du chargement.
   -------------------------------------------------------------------- */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../fonts/bricolage-grotesque-600.woff2') format('woff2'); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700; font-display: swap;
             src: url('../fonts/bricolage-grotesque-700.woff2') format('woff2'); }
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
             src: url('../fonts/bricolage-grotesque-800.woff2') format('woff2'); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap;
             src: url('../fonts/instrument-sans-400.woff2') format('woff2'); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap;
             src: url('../fonts/instrument-sans-500.woff2') format('woff2'); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap;
             src: url('../fonts/instrument-sans-600.woff2') format('woff2'); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 700; font-display: swap;
             src: url('../fonts/instrument-sans-700.woff2') format('woff2'); }

/* ---------- Jetons : le thème clair est la définition complète ------- */
:root {
    --paper:      #F4F8F6;
    --surface:    #FFFFFF;
    --surface-2:  #EDF3F0;
    --line:       #DDE8E2;
    --line-soft:  #E9F0EC;
    --ink:        #0B1512;
    --ink-2:      #33453D;
    --muted:      #63776D;

    --shadow:     0 1px 2px rgba(11,21,18,.05), 0 12px 28px -18px rgba(11,21,18,.22);
    --shadow-lg:  0 2px 6px rgba(11,21,18,.06), 0 30px 60px -30px rgba(11,21,18,.30);

    /* Les huit teintes d'outil. */
    --t-cours:     #2E6FE0;
    --t-groupes:   #C97A12;
    --t-direct:    #D6437C;
    --t-arcade:    #E2542F;
    --t-quiz:      #7C4DE8;
    --t-tableaux:  #4A57CE;
    --t-cartes:    #0C9494;
    --t-revision:  #0E9A60;

    /* Leurs fonds : même teinte, portée jusqu'au fond de la tuile. */
    --w-cours:     #E8EFFC;
    --w-groupes:   #FAEFDC;
    --w-direct:    #FBE6EE;
    --w-arcade:    #FCE9E3;
    --w-quiz:      #F0EAFD;
    --w-tableaux:  #E9EBFA;
    --w-cartes:    #DFF2F2;
    --w-revision:  #DFF3E9;

    --signal:      #C97A12;   /* « à faire aujourd'hui » */
    --signal-bg:   #FAEFDC;
    --danger:      #C0392B;
    --danger-bg:   #FCEBE9;
    --ok:          #0E9A60;
    --ok-bg:       #DFF3E9;

    /* Le bouton a ses PROPRES jetons. Les huit teintes sont calibrees
       pour se lire SUR un fond, pas pour porter du texte : l'emeraude
       claire #0E9A60 avec du texte sombre ne donnait que 4,29:1, sous le
       seuil de 4,5 exige par WCAG AA. Mesure, pas appreciation. */
    --btn-bg: #0B7E4E;   /* blanc dessus : 5,11:1 */
    --btn-fg: #FFFFFF;

    --r-tile: 20px;
    --r-card: 14px;
    --r-chip: 9px;

    /* --- Alias de compatibilité : cités dans les styles en ligne --- */
    --color-muted:      var(--muted);
    --color-border:     var(--line);
    --c-primary:        var(--t-revision);
    --c-primary-dark:   #0B7E4E;
    --c-primary-soft:   var(--w-revision);
    --c-success-soft:   var(--ok-bg);
    --wp-text-main:     var(--ink);
    --wp-gray-bg:       var(--paper);
    --wp-sidebar-hover: var(--surface-2);
}

/* Le sombre ne redéfinit QUE des jetons — jamais un composant. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:      #0A1310;
        --surface:    #111C18;
        --surface-2:  #17251F;
        --line:       #223229;
        --line-soft:  #1A2822;
        --ink:        #E9F2EC;
        --ink-2:      #B7C9C0;
        --muted:      #869A90;

        --shadow:     0 1px 2px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.7);
        --shadow-lg:  0 2px 6px rgba(0,0,0,.45), 0 30px 60px -30px rgba(0,0,0,.8);

        --t-cours:     #6FA0FF;
        --t-groupes:   #E8AE4E;
        --t-direct:    #F27BAB;
        --t-arcade:    #FF8A66;
        --t-quiz:      #AE8CFF;
        --t-tableaux:  #8A94F0;
        --t-cartes:    #3FCACA;
        --t-revision:  #3FD394;

        --w-cours:     #16243A;
        --w-groupes:   #2C2415;
        --w-direct:    #331B26;
        --w-arcade:    #331E17;
        --w-quiz:      #241C3A;
        --w-tableaux:  #1D2140;
        --w-cartes:    #0F2B2B;
        --w-revision:  #0F2B20;

        --signal:      #E8AE4E;
        --signal-bg:   #2C2415;
        --danger:      #FF8B7D;
        --danger-bg:   #33201D;
        --ok:          #3FD394;
        --ok-bg:       #0F2B20;

        --c-primary-dark: #6FE0B0;

        --btn-bg: #3FD394;   /* texte tres fonce dessus : 8,09:1 */
        --btn-fg: #062A1B;
    }
}

:root[data-theme="dark"] {
    --paper:      #0A1310;
    --surface:    #111C18;
    --surface-2:  #17251F;
    --line:       #223229;
    --line-soft:  #1A2822;
    --ink:        #E9F2EC;
    --ink-2:      #B7C9C0;
    --muted:      #869A90;

    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.7);
    --shadow-lg:  0 2px 6px rgba(0,0,0,.45), 0 30px 60px -30px rgba(0,0,0,.8);

    --t-cours:     #6FA0FF;
    --t-groupes:   #E8AE4E;
    --t-direct:    #F27BAB;
    --t-arcade:    #FF8A66;
    --t-quiz:      #AE8CFF;
    --t-tableaux:  #8A94F0;
    --t-cartes:    #3FCACA;
    --t-revision:  #3FD394;

    --w-cours:     #16243A;
    --w-groupes:   #2C2415;
    --w-direct:    #331B26;
    --w-arcade:    #331E17;
    --w-quiz:      #241C3A;
    --w-tableaux:  #1D2140;
    --w-cartes:    #0F2B2B;
    --w-revision:  #0F2B20;

    --signal:      #E8AE4E;
    --signal-bg:   #2C2415;
    --danger:      #FF8B7D;
    --danger-bg:   #33201D;
    --ok:          #3FD394;
    --ok-bg:       #0F2B20;

    --c-primary-dark: #6FE0B0;

    --btn-bg: #3FD394;   /* texte tres fonce dessus : 8,09:1 */
    --btn-fg: #062A1B;
}

/* ---------- Socle ---------------------------------------------------- */
* { box-sizing: border-box; }

html { color-scheme: light dark; }

body {
    margin: 0;
    /* PAS de height:100vh ni d'overflow:hidden : c'est exactement ce que
       faisait admin.css, qui rendait le defilement impossible des qu'une
       page depassait l'ecran. Le document defile normalement. */
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .et-display {
    font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -.022em;
    text-wrap: balance;
}

a { color: var(--t-revision); }

:focus-visible { outline: 2px solid var(--t-revision); outline-offset: 2px; border-radius: 4px; }

/* ---------- Barre d'outils ------------------------------------------- */
.et-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 11px 24px;
    position: sticky;
    top: 0;
    z-index: 40;
}

.et-brand {
    font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--ink);
    margin-right: 12px;
}
.et-brand span { color: var(--t-revision); }

.et-nav { display: flex; gap: 3px; flex-wrap: wrap; }
.et-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 10px;
    text-decoration: none;
    font-size: .87rem;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid transparent;
    white-space: nowrap;
}
.et-nav a:hover { background: var(--surface-2); color: var(--ink); }

/* La pastille de couleur : c'est elle qui apprend l'espace. */
.et-nav a::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 3px;
    background: var(--hue, var(--muted));
    flex: none;
}
.et-nav a.is-on {
    background: var(--wash, var(--surface-2));
    color: var(--hue, var(--ink));
    border-color: var(--hue, var(--line));
}

.et-me {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .86rem;
    color: var(--muted);
}
.et-me a { color: inherit; text-decoration: none; }
.et-me a:hover { color: var(--ink); }
.et-me__avatar {
    width: 30px; height: 30px;
    border-radius: 10px;
    background: var(--w-revision);
    color: var(--t-revision);
    display: grid; place-items: center;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800; font-size: .8rem;
    text-decoration: none;
}

.et-theme {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    border-radius: 9px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    cursor: pointer;
    padding: 0;
}
.et-theme:hover { color: var(--ink); border-color: var(--muted); }
.et-theme svg { width: 15px; height: 15px; }
.et-theme .moon { display: none; }
:root[data-theme="dark"] .et-theme .sun,
:root:not([data-theme="light"]) .et-theme .sun { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .et-theme .sun  { display: none; }
    :root:not([data-theme="light"]) .et-theme .moon { display: block; }
}
:root[data-theme="dark"] .et-theme .sun  { display: none; }
:root[data-theme="dark"] .et-theme .moon { display: block; }
:root[data-theme="light"] .et-theme .sun  { display: block; }
:root[data-theme="light"] .et-theme .moon { display: none; }

/* ---------- Colonne -------------------------------------------------- */
.et-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 22px 64px; }
.et-auth { max-width: 430px; margin: 52px auto; }

/* ---------- Composants repris tels quels par les 10 pages ------------ */
.et-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 20px 22px;
}

.et-btn {
    border: 0;
    border-radius: 11px;
    padding: 11px 19px;
    font: inherit;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    background: var(--btn-bg);
    color: var(--btn-fg);
    text-decoration: none;
    display: inline-block;
}
.et-btn:hover { filter: brightness(1.08); }

/* Le bouton destructeur porte SA couleur de texte : sans cela il herite
   celle du bouton emeraude, qui est tres sombre en theme sombre — soit
   3,21:1 sur le rouge, illisible. Blanc sur ce rouge : 6,78:1. */
.et-btn--danger { background: #B02318; color: #FFFFFF; }
.et-btn--danger:hover { background: #8F1C13; }

/* Notation d'une carte : trois nuances, contrastes mesures avec du blanc
   (6,78:1 / 5,11:1 / 7,3:1). Elles ne dependent PAS des jetons de theme :
   « oublie » doit rester rouge et « facile » vert dans les deux modes. */
.et-btn--g0 { background: #B02318; color: #FFFFFF; }
.et-btn--g3 { background: #0B7E4E; color: #FFFFFF; }
.et-btn--g5 { background: #076343; color: #FFFFFF; }
.et-btn--g0:hover { background: #8F1C13; }
.et-btn--g3:hover { background: #096B42; }
.et-btn--g5:hover { background: #055334; }

.et-btn--ghost {
    background: transparent;
    color: var(--muted);
    text-decoration: underline;
    padding: 11px 8px;
    font-weight: 600;
}
.et-btn--ghost:hover { color: var(--ink); filter: none; }

.et-msg {
    padding: 12px 16px;
    border-radius: 11px;
    margin-bottom: 18px;
    font-size: .93rem;
    border: 1px solid transparent;
}
.et-msg--ok { background: var(--ok-bg);     color: var(--ok);     border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.et-msg--ko { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

.et-field { display: block; margin-bottom: 14px; }
.et-field span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-2); }
.et-field input, .et-field select, .et-field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    background: var(--surface);
    color: var(--ink);
    box-sizing: border-box;
}
.et-field input:focus, .et-field select:focus, .et-field textarea:focus {
    border-color: var(--t-revision);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-revision) 18%, transparent);
}

/* ---------- Pied légal ----------------------------------------------- */
.et-foot {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 22px 38px;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    font-size: .82rem;
    color: var(--muted);
}
.et-foot a { color: inherit; text-decoration: none; }
.et-foot a:hover { text-decoration: underline; }

/* =====================================================================
   TABLEAU DE BORD « AUJOURD'HUI »
   ===================================================================== */
.dash { display: grid; gap: 26px; }

.today { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end; }
@media (max-width: 760px) { .today { grid-template-columns: 1fr; align-items: start; } }

.today__label {
    color: var(--muted);
    font-size: .78rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
}
.today__line {
    font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .98;
    font-size: clamp(1.9rem, 5vw, 3.1rem);
    margin: 7px 0 10px;
}
.today__line b { color: var(--t-revision); font-weight: 800; }
.today__sub { color: var(--ink-2); font-size: .96rem; margin: 0; max-width: 46ch; }

.week { display: flex; gap: 7px; align-items: flex-end; }
.week__day { display: grid; gap: 6px; justify-items: center; }
.week__bar { width: 24px; height: 46px; border-radius: 6px 6px 3px 3px; background: var(--w-revision); position: relative; }
.week__bar b { position: absolute; inset: auto 0 0 0; border-radius: 6px 6px 3px 3px; background: var(--t-revision); display: block; }
.week__d { font-size: .68rem; color: var(--muted); font-weight: 600; }
.week__day.is-today .week__d { color: var(--t-revision); }

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr; } }

.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 15px 17px;
    display: grid; gap: 2px;
}
.stat__k { font-size: .74rem; color: var(--muted); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.stat__v {
    font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif;
    font-weight: 800; font-size: 1.85rem; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.stat__n { font-size: .83rem; color: var(--muted); }
.stat--due .stat__v { color: var(--signal); }

/* ---------- Grille d'outils ------------------------------------------ */
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
@media (max-width: 900px) { .tools { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tools { grid-template-columns: 1fr; } }

.tool {
    background: var(--wash);
    border: 1px solid color-mix(in srgb, var(--hue) 18%, transparent);
    border-radius: var(--r-tile);
    padding: 16px 16px 14px;
    display: grid; gap: 4px;
    text-decoration: none;
    color: var(--ink);
    transition: transform .16s ease, box-shadow .16s ease;
}
.tool:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tool__ico {
    width: 34px; height: 34px; border-radius: 11px;
    background: var(--hue); color: var(--surface);
    display: grid; place-items: center; margin-bottom: 8px;
}
.tool__ico svg { width: 18px; height: 18px; }
.tool__t { font-family: "Bricolage Grotesque", ui-sans-serif, sans-serif; font-weight: 700; font-size: .98rem; }
.tool__d { font-size: .81rem; color: var(--ink-2); line-height: 1.45; }
.tool__c { margin-top: 6px; font-size: .74rem; font-weight: 700; color: var(--hue); font-variant-numeric: tabular-nums; }

/* ---------- En-tête de page teinté par l'outil ------------------------ */
.et-head { display: grid; gap: 4px; margin-bottom: 22px; }
.et-head h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.et-head p { margin: 0; color: var(--muted); font-size: .94rem; }
.et-head__tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--hue, var(--muted));
    margin-bottom: 2px;
}
.et-head__tag::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--hue, var(--muted)); }

/* ---------- Liste de fichiers récents --------------------------------- */
.recent { display: grid; gap: 9px; }
.recent__row {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 13px 16px;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.recent__n { flex: 1 1 240px; min-width: 0; }
.recent__t { font-weight: 600; word-break: break-word; }
.recent__m { color: var(--muted); font-size: .84rem; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
    .tool { transition: none; }
    .tool:hover { transform: none; }
}