/* Feuille de style unique de l'interface web (aucune chaîne de build). */
:root {
    --fond: #f6f4f1; --carte: #fff; --texte: #241a14; --discret: #6f625a; --ligne: #e4ddd5;
    --cacao: #3b2416; --accent: #a4552b; --accent-fonce: #86441f; --accent-pale: #f6e7dc;
    --ok: #1f7a4d; --ok-pale: #e2f3ea; --warn: #9a6a05; --warn-pale: #fbf0d6; --ko: #b3261e; --ko-pale: #fbe6e4;
    --code: #1f1713; --code-texte: #f3ece5;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fond); color: var(--texte); }
a { color: var(--accent-fonce); }
code, pre, textarea { font-family: ui-monospace, Consolas, Menlo, monospace; font-size: 13px; }
code { background: #efe9e2; padding: 1px 5px; border-radius: 4px; }
pre { background: var(--code); color: var(--code-texte); padding: .8rem 1rem; border-radius: 8px; overflow: auto; margin: .5rem 0; }
pre code { background: none; padding: 0; }

/* En-tête commun */
.entete { background: var(--cacao); color: #fff; }
.entete .barre { max-width: 1120px; margin: 0 auto; padding: .7rem 1rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.marque { font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.marque small { font-weight: 400; opacity: .7; font-size: .8rem; }
.entete nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.entete nav a { color: #e9dccf; text-decoration: none; padding: .3rem .7rem; border-radius: 6px; }
.entete nav a:hover { background: rgba(255, 255, 255, .1); }
.entete nav a.actif { background: rgba(255, 255, 255, .18); color: #fff; }
.entete .droite { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.entete .droite form { margin: 0; }
.badge { background: rgba(255, 255, 255, .15); padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; }

main { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 .6rem; }
.sous-titre { color: var(--discret); margin: 0 0 1.25rem; }
.muted { color: var(--discret); }

/* Onglets (identiques côté enseignant et côté équipe) */
.onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--ligne); margin: 0 0 1.25rem; overflow-x: auto; }
.onglets a { padding: .55rem .95rem; text-decoration: none; color: var(--discret); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets a:hover { color: var(--texte); }
.onglets a.actif { color: var(--accent-fonce); border-bottom-color: var(--accent); font-weight: 600; }

/* Cartes, tableaux, formulaires */
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; padding: 1rem 1.15rem; }
.carte h2:first-child { margin-top: 0; }
.carte-etroite { max-width: 420px; margin: 2rem auto; }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpi .n { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.kpi .l { color: var(--discret); font-size: .85rem; }
.tableau { overflow-x: auto; border: 1px solid var(--ligne); border-radius: 10px; background: var(--carte); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .5rem .8rem; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
th { background: #faf7f4; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--discret); }
tr:last-child td { border-bottom: 0; }
button, .bouton { font: inherit; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 7px; padding: .4rem .9rem; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .bouton:hover { background: var(--accent-fonce); }
.bouton.second, button.second { background: #fff; color: var(--texte); border-color: var(--ligne); }
.bouton.second:hover, button.second:hover { background: #f1ece6; }
.entete .bouton.second, .entete button.second { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); padding: .2rem .7rem; }
.entete .bouton.second:hover, .entete button.second:hover { background: rgba(255, 255, 255, .12); }
button.danger { background: #fff; color: var(--ko); border-color: #e6b4b0; }
button.danger:hover { background: var(--ko-pale); }
input, select, textarea { font: inherit; padding: .4rem .6rem; border: 1px solid #cfc6bc; border-radius: 7px; background: #fff; color: var(--texte); }
textarea { width: 100%; }
label { font-size: .8rem; color: var(--discret); display: grid; gap: 3px; }
.filtres { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.en-ligne { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
details summary { cursor: pointer; }

/* Messages et pastilles */
.alerte { border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem; border: 1px solid; }
.alerte.ok { background: var(--ok-pale); border-color: #a9d8bd; color: #14502f; }
.alerte.ko { background: var(--ko-pale); border-color: #e6b4b0; color: #7d1a14; }
.erreur { color: var(--ko); }
.pastille { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.pastille.s2 { background: var(--ok-pale); color: var(--ok); }
.pastille.s3, .pastille.s4 { background: var(--warn-pale); color: var(--warn); }
.pastille.s5 { background: var(--ko-pale); color: var(--ko); }
.pastille.neutre { background: #ece6df; color: var(--discret); }
.cle-affichee { font-size: 1rem; word-break: break-all; }

/* Documentation de l'API (rendue depuis openapi.yaml) */
.doc { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
.doc aside { position: sticky; top: 1rem; font-size: .88rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.doc aside a { display: flex; gap: .5rem; padding: .22rem .5rem; text-decoration: none; color: var(--texte); border-radius: 6px; align-items: center; }
.doc aside a:hover { background: #ebe5de; }
.doc aside .groupe { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); margin: .9rem .5rem .2rem; }
.verbe { font: 700 .68rem ui-monospace, Consolas, monospace; padding: 2px 6px; border-radius: 4px; color: #fff; min-width: 48px; text-align: center; display: inline-block; }
.verbe.GET { background: #2a6fb0; } .verbe.POST { background: var(--ok); } .verbe.PUT, .verbe.PATCH { background: var(--warn); } .verbe.DELETE { background: var(--ko); }
.doc section { margin-bottom: 2rem; scroll-margin-top: 1rem; }
.doc .op { margin-bottom: 1rem; scroll-margin-top: 1rem; }
.doc .op header { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .3rem; }
.doc .op header code { font-size: .95rem; background: none; padding: 0; font-weight: 600; }
.doc .op h4 { margin: 1rem 0 .3rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--discret); }
.doc .texte p { margin: .4rem 0; } .doc .texte ul { margin: .4rem 0; padding-left: 1.2rem; }
.doc td.nom { white-space: nowrap; }
.doc .requis { color: var(--ko); font-size: .75rem; margin-left: .3rem; }
.doc .type { color: var(--discret); font-size: .8rem; }
.doc .reponse { display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px solid var(--ligne); }
.doc .reponse:last-child { border-bottom: 0; }
.doc .reponse .pastille { min-width: 44px; text-align: center; }
@media (max-width: 800px) { .doc { grid-template-columns: 1fr; } .doc aside { position: static; max-height: none; } }