@font-face { font-family:"Instrument Sans"; font-weight:400; font-display:swap; src:url(/app/fonts/instrument-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:500; font-display:swap; src:url(/app/fonts/instrument-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Instrument Sans"; font-weight:600 700; font-display:swap; src:url(/app/fonts/instrument-sans-latin-600-normal.woff2) format("woff2"); }
:root { --nuit:#182131; --papier:#F2F3EF; --laiton:#A6802A; --texte:#182131; --gris:#4A5364; --bord:#DADDD5; --accent:#2B4C7E;
        --ok:#136e2d; --erreur:#b3261e; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:"Instrument Sans", -apple-system, system-ui, "Segoe UI", sans-serif; color:var(--texte); background:var(--papier);
       font-size:17px; line-height:1.5; }
a { color:var(--accent); }
.page { max-width:520px; margin:0 auto; padding:10vh 1.5rem 3rem; text-align:center; }
.page.large { max-width:1100px; text-align:left; padding-top:1.5rem; }
.logotype { margin:0; white-space:nowrap; font-weight:500; font-size:72px; line-height:1.15; letter-spacing:-1px; color:var(--nuit); }
.logotype svg { display:inline-block; vertical-align:-16px; width:34px; height:52px; margin:0 2px 0 3px; }
.devise { margin:.1rem 0 2rem; color:var(--gris); }
h1.titre, h2 { font-weight:600; }
h2 { font-size:1.2rem; margin:2rem 0 .8rem; }
p.aide { color:var(--gris); }
button, .bouton { font:inherit; font-size:1rem; padding:.7rem 1.4rem; border-radius:24px; border:1px solid var(--bord); background:#fff;
                  color:var(--texte); cursor:pointer; min-height:44px; }
.principal { background:var(--nuit); border-color:var(--nuit); color:var(--papier); }
button:disabled { opacity:.55; cursor:default; }
a.bouton { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.petit { padding:.35rem .8rem !important; min-height:36px !important; font-size:.9rem !important; }
input, select { font:inherit; font-size:1rem; padding:.6rem .8rem; border:1px solid #b9beb4; border-radius:10px; background:#fff; color:var(--texte);
                min-height:44px; }
label { display:flex; flex-direction:column; gap:.3rem; font-weight:500; text-align:left; }
.pile { display:flex; flex-direction:column; gap:1rem; align-items:stretch; }
.ligne { display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end; }
.ligne label { flex:1 1 180px; }
details { margin-top:1.6rem; text-align:left; }
summary { cursor:pointer; color:var(--accent); }
.message { min-height:1.5rem; margin-top:1rem; font-weight:600; }
.message.ok { color:var(--ok); } .message.erreur { color:var(--erreur); }
.cache { display:none !important; }
.entete { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--bord); }
.entete .logotype { font-size:40px; } .entete .logotype svg { width:19px; height:29px; vertical-align:-9px; }
.carte { background:#fff; border:1px solid var(--bord); border-radius:14px; padding:1.2rem; }
.lien { display:flex; gap:.6rem; align-items:center; margin-top:.8rem; flex-wrap:wrap; }
.lien code { flex:1 1 300px; word-break:break-all; background:var(--papier); padding:.5rem .7rem; border-radius:8px; font-size:.85rem; }
.defile { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:.95rem; }
th, td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--bord); vertical-align:middle; }
th { color:var(--gris); font-weight:500; white-space:nowrap; }
td.actions { white-space:nowrap; display:flex; gap:.4rem; flex-wrap:wrap; }
.etat { display:inline-block; padding:.1rem .6rem; border-radius:10px; font-size:.85rem; font-weight:600; }
.etat.actif { background:#d7efdf; color:#0f5c25; } .etat.invite { background:#f3e8cc; color:#6b5213; } .etat.suspendu { background:#f6d9d6; color:#8c1d16; }
.page.moyenne { max-width:760px; text-align:left; padding-top:1.5rem; }
.entete a.logotype { text-decoration:none; }
.etiquette { font-weight:500; margin:0 0 .4rem; }
.pile.serre { gap:.5rem; }
.cases { display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
label.case { flex-direction:row; align-items:center; gap:.4rem; font-weight:400; }
label.case input { min-height:auto; width:1.1rem; height:1.1rem; }
textarea { font:inherit; font-size:1rem; padding:.6rem .8rem; border:1px solid #b9beb4; border-radius:10px; resize:vertical; }
.rangee { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.rangee select { flex:1 1 180px; }
.prof { border:1px solid var(--bord); border-radius:12px; padding:.8rem 1rem; display:flex; gap:1rem; justify-content:space-between; align-items:flex-start; }
.prof .nom { font-weight:600; } .prof .details { color:var(--gris); font-size:.9rem; } .prof .texte { margin-top:.3rem; font-size:.95rem; white-space:pre-line; }
.choix { display:flex; flex-direction:column; gap:.5rem; }
.separateur { color:var(--gris); margin:.2rem 0; text-align:center; }
.lien code { white-space:pre-wrap; }

/* ===================== Charte Lynos 2.7.0 : bleu nuit, or, ivoire ===================== */
@font-face { font-family:"Cormorant Garamond"; font-weight:500; font-display:swap; src:url(/app/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:500; font-style:italic; font-display:swap; src:url(/app/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2"); }
@font-face { font-family:"Cormorant Garamond"; font-weight:600 700; font-display:swap; src:url(/app/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2"); }
:root { --nuit:#0B1426; --marine:#16223B; --or:#C9A45C; --or2:#8E6F2E; --ivoire:#F6F1E6; --encre:#1B1F2A; --texte:var(--encre);
        --papier:var(--ivoire); --gris:#5A6072; --bord:#E4DCC8; --accent:var(--marine); }
body { background:var(--ivoire); }
h1.titre, h2, .serif { font-family:"Cormorant Garamond", Georgia, serif; font-weight:500; }
h1.titre { font-size:2.6rem; margin:.4rem 0; } h2 { font-size:1.7rem; }
.principal { background:var(--marine) !important; color:var(--or) !important; border:1px solid var(--or) !important; letter-spacing:.05em; }
button, .bouton, input, select, textarea { border-radius:2px !important; }
input, select, textarea { border-color:#C9BFA8; }
.carte { background:#FFFDF8; border:1px solid var(--bord); border-top:3px solid var(--or); border-radius:2px; }
/* pages sombres : connexion, inscription */
body.sombre { background:var(--nuit); color:#C8CCD6; }
body.sombre::before { content:""; position:fixed; inset:24px; border:1px solid rgba(201,164,92,.35); pointer-events:none; }
body.sombre .logotype { color:var(--ivoire); }
body.sombre .devise { font-family:"Cormorant Garamond", Georgia, serif; font-style:italic; font-size:1.5rem; color:var(--or); }
body.sombre #formulaire, body.sombre #etape, body.sombre #fini, body.sombre #deja { background:var(--ivoire); color:var(--encre); border-top:3px solid var(--or);
       padding:1.8rem 2rem; text-align:left; }
body.sombre #formulaire button:not(.principal) { width:100%; }
body.sombre .separateur { color:var(--gris); }
body.sombre .aide { color:#9BA3B5; } body.sombre #formulaire .aide, body.sombre #etape .aide { color:var(--gris); }
body.sombre .message.erreur { color:#FF9C92; } body.sombre .message.ok { color:#8FD9A8; }
body.sombre select { background:var(--marine); color:#C8CCD6; border-color:rgba(201,164,92,.4); }
body.sombre summary { color:var(--marine); }
/* pages claires : profil, administration */
.bandeau-haut { background:var(--nuit); border-bottom:2px solid var(--or); }
.bandeau-haut .interieur { max-width:1100px; margin:0 auto; padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.bandeau-haut .logotype { color:var(--ivoire); font-size:40px; text-decoration:none; }
.bandeau-haut .logotype svg { width:19px; height:29px; vertical-align:-9px; }
.bandeau-haut span, .bandeau-haut b { color:#C8CCD6; } .bandeau-haut b { color:var(--ivoire); }
.bandeau-haut .bouton, .bandeau-haut button { background:none; color:#C8CCD6; border:1px solid rgba(201,164,92,.45); }
.bandeau-haut select { background:var(--marine); color:#C8CCD6; border-color:rgba(201,164,92,.4); }
body.clair .page { padding-top:1.2rem; }
th { font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gris); border-bottom:1px solid var(--or) !important; }
.prof { background:#FFFDF8; border-radius:2px; }
.prof .nom { font-family:"Cormorant Garamond", Georgia, serif; font-size:1.3rem; font-weight:500; }

.sommaire { display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; margin:.4rem 0 1rem; font-size:.92rem; }
.sommaire a { color:var(--or2); text-decoration:none; border-bottom:1px solid transparent; } .sommaire a:hover { border-bottom-color:var(--or); }
h2[id] { scroll-margin-top:1rem; }
.danger { border-top-color:#8C1D16 !important; }
button.supprimer { background:#8C1D16 !important; color:#fff !important; border-color:#8C1D16 !important; }
.contacts { display:flex; flex-wrap:wrap; gap:.3rem .9rem; margin-top:.35rem; font-size:.92rem; }
.contacts a { color:var(--marine); text-decoration:none; border-bottom:1px solid var(--or); }

/* photos de profil : toujours rondes */
.avatar { width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden; background:var(--marine); color:var(--or);
          display:inline-flex; align-items:center; justify-content:center; font-family:"Cormorant Garamond", Georgia, serif; font-weight:600;
          font-size:1.1rem; border:1px solid var(--or); }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar.grand { width:112px; height:112px; font-size:2.6rem; border-width:2px; }
.avatar.mini { width:30px; height:30px; font-size:.85rem; vertical-align:middle; margin-right:.5rem; }
.photo-bloc { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.photo-bloc .aide { margin:0; font-size:.88rem; max-width:480px; }
label.fichier { cursor:pointer; } label.fichier input { display:none; }
.prof { align-items:center; } .prof > .avatar { margin-right:.2rem; }
#mesEleves .avatar, #mesLiens .avatar { width:64px; height:64px; font-size:1.5rem; }
/* navigation des pages de compte */
.nav-compte { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; align-items:center; font-size:.95rem; }
.nav-compte a { color:#C8CCD6; text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
.nav-compte a:hover, .nav-compte a.actif { color:var(--or); border-bottom-color:var(--or); }
.nav-compte .moi { display:inline-flex; align-items:center; color:var(--ivoire); gap:.1rem; }
/* présence : vert en ligne, rouge inactif, gris hors ligne */
.avatar-bloc { position:relative; display:inline-flex; flex:none; }
.presence { position:absolute; right:1px; bottom:1px; width:12px; height:12px; border-radius:50%; border:2px solid #FFFDF8; }
.presence.en_ligne { background:#2FA35A; } .presence.inactif { background:#C0392B; } .presence.absent { background:#9AA3AE; }
.avatar-bloc .avatar.grand + .presence { width:20px; height:20px; right:4px; bottom:4px; }
/* annuaire, élèves, agenda */
.filtres { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.7rem 1rem; align-items:end; }
.fiche { display:flex; gap:1.1rem; align-items:flex-start; background:#FFFDF8; border:1px solid var(--bord); border-top:3px solid var(--or); padding:1.1rem 1.2rem; }
.fiche .avatar { width:84px; height:84px; font-size:2rem; }
.fiche .presence { width:16px; height:16px; right:3px; bottom:3px; }
.fiche .corps { flex:1; min-width:0; }
.fiche .nom { font-family:"Cormorant Garamond", Georgia, serif; font-size:1.6rem; font-weight:500; line-height:1.1; }
.fiche .details { color:var(--gris); font-size:.92rem; margin-top:.25rem; }
.fiche .texte { margin-top:.5rem; white-space:pre-line; }
.etiquettes { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }
.etiquettes span { font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--or); color:var(--or2); padding:.1rem .45rem; }
.liste-fiches { display:flex; flex-direction:column; gap:1rem; margin-top:1rem; }
.dialogue { position:fixed; inset:0; background:rgba(11,20,38,.6); display:flex; align-items:center; justify-content:center; z-index:50; padding:1rem; }
.boite-dialogue { width:min(560px, 100%); max-height:90vh; overflow:auto; }
.boite-dialogue h2 { margin:0; }
.cours { display:flex; gap:1rem; align-items:center; background:#FFFDF8; border:1px solid var(--bord); border-left:3px solid var(--or); padding:.8rem 1rem; }
.cours .quand { min-width:9.5rem; font-family:"Cormorant Garamond", Georgia, serif; font-size:1.25rem; font-weight:500; }
.cours .corps { flex:1; min-width:0; } .cours .details { color:var(--gris); font-size:.9rem; }
.cours.annule { opacity:.55; } .cours.annule .quand { text-decoration:line-through; }
.cours .lieu a { color:var(--marine); }
.tableau-metriques { width:100%; border-collapse:collapse; font-size:.92rem; }
.tableau-metriques td, .tableau-metriques th { padding:.45rem .5rem; border-bottom:1px solid var(--bord); text-align:left; white-space:nowrap; }
.tableau-metriques td.nombre, .tableau-metriques th.nombre { text-align:right; font-variant-numeric:tabular-nums; }
.chiffres-cles { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:1rem; }
.chiffre { background:#FFFDF8; border:1px solid var(--bord); border-top:3px solid var(--or); padding:.9rem 1rem; }
.chiffre b { display:block; font-family:"Cormorant Garamond", Georgia, serif; font-size:2.1rem; font-weight:500; line-height:1.1; }
.chiffre span { color:var(--gris); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.barre-h { height:8px; background:var(--or); display:inline-block; vertical-align:middle; margin-right:.4rem; }