/* ============================================================
   Classe de M. Carl — système visuel partagé
   Importé par toutes les pages de la plateforme.
   ============================================================ */
:root{
  --fond:#F4F6F9;
  --carte:#FFFFFF;
  --encre:#1C2733;
  --secondaire:#5C6B7C;
  --ligne:#E3E8EF;
  --primaire:#2563EB;
  --primaire-fonce:#1D4FC4;
  --primaire-pale:#EBF1FE;
  --succes:#1E9E63;
  --succes-fonce:#188253;
  --succes-pale:#E6F6EF;
  --attente:#B9770E;
  --attente-pale:#FCF3E2;
  --danger:#C43D3D;
  --danger-pale:#FAECEC;
  --rayon:12px;
  --ombre:0 1px 3px rgba(28,39,51,.06), 0 4px 14px rgba(28,39,51,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--fond);color:var(--encre);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
h1,h2,h3{font-family:'Sora',sans-serif;letter-spacing:-.01em}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:1rem}
.cache{display:none !important}

/* ---------- coquille : dense, plein écran ---------- */
.app{max-width:1320px;margin:0 auto;padding:14px 20px 48px}
@media(max-width:640px){.app{padding:10px 12px 40px}}
.entete{display:flex;align-items:center;gap:12px;padding:4px 2px 16px}
.entete .logo{
  width:38px;height:38px;border-radius:10px;background:var(--encre);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Sora';font-weight:700;font-size:1rem;flex-shrink:0;
}
/* logo de classe personnalisé (image configurée dans Réglages de la Console) */
.entete .logo.logo-classe{background:transparent;border-radius:0;padding:0}
.entete .logo.logo-classe img{width:100%;height:100%;object-fit:contain;display:block}
.entete h1{font-size:1.15rem;font-weight:700}
.entete .sous{font-size:.78rem;color:var(--secondaire);margin-top:1px}
.entete .droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--ligne)}
.pied{text-align:center;color:var(--secondaire);font-size:.75rem;padding-top:22px}

.carte{
  background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:20px;margin-bottom:14px;
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:10px;padding:11px 18px;font-weight:600;font-size:.93rem;
  white-space:nowrap;flex-shrink:0;
  transition:background .12s, transform .1s;
}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--primaire);outline-offset:2px}
.btn-primaire{background:var(--primaire);color:#fff}
.btn-primaire:hover{background:var(--primaire-fonce)}
.btn-succes{background:var(--succes);color:#fff}
.btn-succes:hover{background:var(--succes-fonce)}
.btn-contour{background:#fff;border:1px solid var(--ligne);color:var(--encre)}
.btn-contour:hover{border-color:var(--secondaire)}
.btn-danger-doux{background:var(--danger-pale);color:var(--danger)}
.btn-lien{color:var(--secondaire);font-size:.85rem;font-weight:500;padding:7px 11px;border-radius:8px}
.btn-lien:hover{background:var(--ligne);color:var(--encre)}
.btn-bloc{width:100%;flex-shrink:1}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-mini{
  min-width:30px;height:30px;padding:0 9px;border-radius:8px;font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  flex:0 0 auto;transition:background .12s;
}
.btn-mini.ok{background:var(--succes-pale);color:var(--succes)}
.btn-mini.ok:hover{background:var(--succes);color:#fff}
.btn-mini.non{background:var(--danger-pale);color:var(--danger)}
.btn-mini.non:hover{background:var(--danger);color:#fff}
.btn-mini.neutre{background:var(--fond);color:var(--secondaire)}
.btn-mini.neutre:hover{background:var(--ligne);color:var(--encre)}
/* bouton texte compact (ex. « Retirer » dans une liste) : plus petit que .btn
   standard, mais garde la largeur de son texte — ne jamais utiliser .btn-mini
   pour du texte, il est prévu pour un seul caractère (✓ ✕ ↑). */
.btn-compact{padding:7px 13px;font-size:.85rem}

/* ---------- formulaires ---------- */
.champ{margin-bottom:14px}
.champ label{display:block;font-size:.82rem;font-weight:600;color:var(--secondaire);margin-bottom:6px}
.champ input,.champ textarea,.champ select{
  width:100%;padding:11px 13px;border:1px solid var(--ligne);border-radius:10px;
  background:#FAFBFC;color:var(--encre);transition:border-color .12s, box-shadow .12s;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;border-color:var(--primaire);
  box-shadow:0 0 0 3px var(--primaire-pale);background:#fff;
}
.erreur{
  background:var(--danger-pale);color:var(--danger);border-radius:10px;
  padding:10px 14px;font-size:.87rem;font-weight:500;margin-bottom:13px;
}
.astuce{
  background:var(--primaire-pale);color:var(--primaire-fonce);border-radius:10px;
  padding:11px 14px;font-size:.85rem;margin-bottom:14px;line-height:1.5;
}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em}

/* ---------- onglets ---------- */
.onglets{display:flex;gap:4px;margin-bottom:16px;background:#E8EDF3;border-radius:12px;padding:4px}
.onglet{
  flex:1;padding:9px 8px;border-radius:9px;font-weight:600;font-size:.88rem;color:var(--secondaire);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.onglet.actif{background:var(--carte);color:var(--encre);box-shadow:0 1px 4px rgba(28,39,51,.1)}
.pastille{
  background:var(--fond);color:var(--secondaire);border-radius:999px;
  font-size:.72rem;font-weight:700;padding:2px 8px;min-width:22px;text-align:center;
}

/* ---------- tuiles (tableau de bord + console) ---------- */
.categorie-titre{
  display:flex;align-items:baseline;gap:10px;
  margin:22px 2px 10px;
}
.categorie-titre h2{
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--secondaire);
}
.categorie-titre .nb{font-size:.75rem;color:var(--secondaire)}
.grille-tuiles{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
}
@media(max-width:480px){.grille-tuiles{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr))}}
.tuile{
  background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:16px;text-align:left;
  display:flex;flex-direction:column;gap:9px;position:relative;
  transition:transform .12s ease, border-color .12s, box-shadow .12s;
  color:inherit;text-decoration:none;cursor:pointer;
}
.tuile:hover{transform:translateY(-2px);border-color:var(--primaire);box-shadow:0 6px 18px rgba(37,99,235,.12)}
.tuile:focus-visible{outline:2px solid var(--primaire);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.tuile{transition:none}.tuile:hover{transform:none}}
.tuile .icone{
  width:42px;height:42px;border-radius:11px;background:var(--primaire-pale);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.tuile .titre{font-family:'Sora';font-weight:600;font-size:.98rem;line-height:1.25}
.tuile .desc{font-size:.8rem;color:var(--secondaire);line-height:1.4}
.tuile .externe{
  position:absolute;top:12px;right:12px;font-size:.75rem;color:var(--secondaire);
}

/* ---------- tableaux ---------- */
.tableau{width:100%;border-collapse:collapse;font-size:.9rem}
.tableau th{
  text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--secondaire);padding:8px 8px;border-bottom:2px solid var(--ligne);white-space:nowrap;
}
.tableau td{padding:5px 5px;border-bottom:1px solid var(--ligne);vertical-align:middle}
.tableau .cell{
  width:100%;padding:8px 9px;border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--encre);font-size:.88rem;
}
.tableau .cell:hover{border-color:var(--ligne);background:#FAFBFC}
.tableau .cell:focus{outline:none;border-color:var(--primaire);background:#fff;box-shadow:0 0 0 3px var(--primaire-pale)}
.cell-actions{white-space:nowrap;width:1%}

/* ---------- puces d'état ---------- */
.puce{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  font-size:.74rem;font-weight:600;padding:3px 10px;
}
.puce.verte{background:var(--succes-pale);color:var(--succes)}
.puce.ambre{background:var(--attente-pale);color:var(--attente)}
.puce.grise{background:var(--fond);color:var(--secondaire)}
.puce.cliquable{cursor:pointer;border:1px solid transparent}
.puce.cliquable:hover{border-color:currentColor}

/* ---------- glisser-déposer (console) ---------- */
.tuile[draggable="true"]{cursor:grab}
.tuile.trainee{opacity:.4}
.zone-depot{
  min-height:64px;border-radius:var(--rayon);
  transition:background .12s, outline .12s;
}
.zone-depot.survol{background:var(--primaire-pale);outline:2px dashed var(--primaire);outline-offset:-2px}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--encre);color:#fff;padding:12px 20px;border-radius:10px;
  font-weight:600;font-size:.9rem;box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:99;max-width:90vw;
}
.toast.visible{opacity:1}

/* ---------- divers ---------- */
.ligne-outils{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.espaceur{flex:1}
.note{font-size:.8rem;color:var(--secondaire);line-height:1.5}
.separateur{border:none;border-top:1px solid var(--ligne);margin:14px 0}

/* ---------- image d'outil (16:9, pleine largeur de la tuile) ---------- */
.tuile .visuel{
  display:block;width:calc(100% + 32px);margin:-16px -16px 2px;
  aspect-ratio:16/9;object-fit:cover;background:var(--fond);
  border-radius:calc(var(--rayon) - 1px) calc(var(--rayon) - 1px) 0 0;
}

/* ============================================================
   REFONTE VISUELLE 2026-09 — ÉTAPE 1 (AJOUTS SEULEMENT)
   Aucune règle ci-dessus n'est modifiée. Tout ce qui suit est :
   - soit de nouvelles classes (inertes tant qu'une page ne les
     emploie pas);
   - soit des thèmes sous html[data-affichage="adhere"], posés
     seulement par appliquerAffichage() (coeur.js / affichage.js) :
     un outil qui ne l'appelle pas reste exactement comme avant.
   CONVENTIONS.md §5 (thèmes à adhésion) et §5 octies (tuiles vivantes).
   ============================================================ */
:root{
  --rayon-l:16px;
  --rayon-xl:18px;
  --ombre-survol:0 8px 22px rgba(28,39,51,.10);
  --encre-2:#3F4C5C;               /* texte secondaire foncé (sous-titres lisibles) */
  --attente-texte:#8A5A08;         /* ambre lisible sur --attente-pale (≥ 4,5:1) */
  --succes-texte:#17714A;          /* vert lisible sur --succes-pale */
  --danger-texte:#B23636;
  --vif:#22C55E;                   /* point « en direct » */
  --bande:#1C2733;                 /* bande « Maintenant » de la Console */
  --bande-texte:#FFFFFF;
  --bande-sous:#A9B8C9;
  --champ-fond:#FAFBFC;
  --onglets-fond:#E8EDF3;
  /* teintes de catégories : fond / encre */
  --teinte-bleu:#EBF1FE;      --teinte-bleu-encre:#1D4FC4;
  --teinte-sarcelle:#E3F5F2;  --teinte-sarcelle-encre:#0F766E;
  --teinte-orange:#FDEEDF;    --teinte-orange-encre:#B45309;
  --teinte-violet:#F0EBFD;    --teinte-violet-encre:#6D28D9;
  --teinte-rose:#FCE9EF;      --teinte-rose-encre:#B4234F;
  --teinte-ardoise:#EEF1F5;   --teinte-ardoise-encre:#3F4C5C;
}

/* ---------- thème SOMBRE (pages qui adhèrent seulement) ---------- */
html[data-affichage="adhere"][data-theme="sombre"]{
  color-scheme:dark;
  --fond:#0F1720;
  --carte:#17212C;
  --encre:#E6EDF5;
  --secondaire:#9FB0C3;
  --ligne:#253241;
  --primaire:#6EA0FF;
  --primaire-fonce:#8FB5FF;
  --primaire-pale:#1B2A44;
  --succes:#34C77F;
  --succes-fonce:#5BD798;
  --succes-pale:#12301F;
  --attente:#F2B84B;
  --attente-pale:#33260C;
  --danger:#F07A7A;
  --danger-pale:#3A1A1A;
  --ombre:0 1px 3px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.25);
  --ombre-survol:0 8px 22px rgba(0,0,0,.4);
  --encre-2:#C6D2DF;
  --attente-texte:#F5C46B;
  --succes-texte:#6EE7A0;
  --danger-texte:#F59A9A;
  --bande:#1B2835;
  --bande-sous:#9FB0C3;
  --champ-fond:#111B25;
  --onglets-fond:#1B2633;
  --teinte-bleu:#1B2A44;      --teinte-bleu-encre:#8FB5FF;
  --teinte-sarcelle:#123330;  --teinte-sarcelle-encre:#6FD6C5;
  --teinte-orange:#3A2614;    --teinte-orange-encre:#F5B97A;
  --teinte-violet:#2A1F4A;    --teinte-violet-encre:#C4B0FA;
  --teinte-rose:#3A1D29;      --teinte-rose-encre:#F59DB8;
  --teinte-ardoise:#1F2A36;   --teinte-ardoise-encre:#C6D2DF;
}
/* couleurs écrites en dur plus haut : corrigées pour le thème sombre seulement */
html[data-affichage="adhere"][data-theme="sombre"] .btn-contour{background:var(--carte)}
html[data-affichage="adhere"][data-theme="sombre"] .champ input,
html[data-affichage="adhere"][data-theme="sombre"] .champ textarea,
html[data-affichage="adhere"][data-theme="sombre"] .champ select{background:var(--champ-fond)}
html[data-affichage="adhere"][data-theme="sombre"] .champ input:focus,
html[data-affichage="adhere"][data-theme="sombre"] .champ textarea:focus,
html[data-affichage="adhere"][data-theme="sombre"] .champ select:focus{background:var(--carte)}
html[data-affichage="adhere"][data-theme="sombre"] .onglets{background:var(--onglets-fond)}
html[data-affichage="adhere"][data-theme="sombre"] .tableau .cell:hover{background:var(--champ-fond)}
html[data-affichage="adhere"][data-theme="sombre"] .tableau .cell:focus{background:var(--carte)}
html[data-affichage="adhere"][data-theme="sombre"] .entete .logo{background:var(--encre);color:var(--fond)}
html[data-affichage="adhere"][data-theme="sombre"] .toast{background:#E6EDF5;color:#0F1720}

/* ---------- mode TNI (projeté en classe) ---------- */
html[data-affichage="adhere"][data-tni]{
  font-size:118%;
  --secondaire:#3F4C5C;
  --ligne:#C9D3DF;
}
html[data-affichage="adhere"][data-theme="sombre"][data-tni]{
  --secondaire:#C6D2DF;
  --ligne:#3A4B5E;
}
/* éléments réservés à la gestion : masqués en mode TNI */
html[data-affichage="adhere"][data-tni] .gestion-seulement{display:none !important}

/* ---------- petits éléments ---------- */
.kbd{
  display:inline-flex;align-items:center;font-size:.7rem;font-weight:600;line-height:1;
  color:var(--encre-2);background:var(--fond);border:1px solid var(--ligne);
  border-radius:5px;padding:3px 6px;font-family:inherit;
}
.vif{
  display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--vif);animation:vif-pulse 1.6s ease-in-out infinite;
}
@keyframes vif-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
}
.squelette{
  display:inline-block;border-radius:6px;min-height:10px;
  background:linear-gradient(90deg, var(--ligne) 0%, var(--fond) 50%, var(--ligne) 100%);
  background-size:200% 100%;animation:squelette 1.2s ease-in-out infinite;
}
@keyframes squelette{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.vif,.squelette{animation:none}}

/* icône teintée selon la catégorie (sur .tuile .icone ou .icone-teinte) */
.icone-teinte{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.teinte-bleu{background:var(--teinte-bleu);color:var(--teinte-bleu-encre)}
.teinte-sarcelle{background:var(--teinte-sarcelle);color:var(--teinte-sarcelle-encre)}
.teinte-orange{background:var(--teinte-orange);color:var(--teinte-orange-encre)}
.teinte-violet{background:var(--teinte-violet);color:var(--teinte-violet-encre)}
.teinte-rose{background:var(--teinte-rose);color:var(--teinte-rose-encre)}
.teinte-ardoise{background:var(--teinte-ardoise);color:var(--teinte-ardoise-encre)}

/* contrôle segmenté (ex. Utilisation / Gestion) */
.segment{display:inline-flex;gap:3px;background:var(--onglets-fond);border-radius:10px;padding:3px}
.segment button{padding:6px 12px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--secondaire)}
.segment button.actif{background:var(--carte);color:var(--encre);box-shadow:0 1px 3px rgba(28,39,51,.12)}

/* ---------- tuiles vivantes (§5 octies) ---------- */
.tuile .signal{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:.76rem;font-weight:700;border-radius:999px;padding:3px 10px;
}
.signal.action{background:var(--attente-pale);color:var(--attente-texte)}
.signal.direct{background:var(--succes-pale);color:var(--succes-texte)}
.signal.resume{background:var(--fond);color:var(--encre-2)}
.signal.restreint{background:var(--danger-pale);color:var(--danger-texte)}
.tuile .compte{
  position:absolute;top:12px;right:12px;min-width:24px;height:24px;padding:0 7px;
  border-radius:999px;background:var(--attente);color:#fff;font-size:.75rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.tuile .valeur{font-family:'Sora';font-weight:700;font-size:1.6rem;line-height:1}
.tuile .serie{display:flex;align-items:flex-end;gap:3px;height:34px}
.tuile .serie span{flex:1;border-radius:3px;background:var(--primaire);opacity:.75;min-height:3px}
.tuile.etat-action{border-color:#F1D9A8}
.tuile.etat-direct{border-color:#A7E3BE;box-shadow:0 0 0 3px var(--succes-pale), var(--ombre)}
.tuile.etat-restreint{background:var(--fond);border-style:dashed;box-shadow:none}
.tuile.etat-restreint .titre{color:var(--encre-2)}
html[data-affichage="adhere"][data-theme="sombre"] .tuile.etat-action{border-color:#6B4E14}
html[data-affichage="adhere"][data-theme="sombre"] .tuile.etat-direct{border-color:#1F6B45}

/* ---------- grilles de la Console : épinglés (bento) et compactes ---------- */
.grille-bento{
  display:grid;grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-auto-rows:minmax(146px, auto);gap:14px;
}
.grille-bento > .large{grid-column:span 2}
.grille-bento > .grande{grid-column:span 2;grid-row:span 2}
@media(max-width:1100px){.grille-bento{grid-template-columns:repeat(4, minmax(0, 1fr))}}
@media(max-width:700px){
  .grille-bento{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .grille-bento > .grande{grid-row:span 1}
}
.grille-compacte{display:grid;grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));gap:10px}
.tuile-compacte{
  display:flex;align-items:center;gap:10px;padding:10px 12px;min-width:0;
  background:var(--carte);border:1px solid var(--ligne);border-radius:12px;
  color:inherit;text-decoration:none;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s, border-color .12s;
}
.tuile-compacte:hover{transform:translateY(-2px);box-shadow:var(--ombre-survol);border-color:var(--secondaire)}
.tuile-compacte:focus-visible{outline:2px solid var(--primaire);outline-offset:2px}
.tuile-compacte .titre{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tuile-compacte .sous{font-size:.72rem;color:var(--secondaire);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tuile-compacte.etat-restreint{background:var(--fond);border-style:dashed;color:var(--secondaire)}
@media (prefers-reduced-motion: reduce){.tuile-compacte{transition:none}.tuile-compacte:hover{transform:none}}

/* ---------- bande « Maintenant » (Console) ---------- */
.bande-maintenant{
  background:var(--bande);color:var(--bande-texte);border-radius:var(--rayon-xl);
  padding:22px 26px;display:grid;grid-template-columns:1.25fr 1.5fr 1fr;gap:30px;
}
@media(max-width:1000px){.bande-maintenant{grid-template-columns:1fr}}
.bande-maintenant .etiquette{
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bande-sous);
}
.bande-maintenant .sous{color:var(--bande-sous);font-size:.85rem}
.bande-maintenant .progres{height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.bande-maintenant .progres > span{display:block;height:100%;border-radius:999px;background:#93B4FF}
.bande-maintenant .lancer{
  display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;text-align:left;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.06);color:inherit;
}
.bande-maintenant .lancer:hover{background:rgba(255,255,255,.11)}

/* ---------- palette de commandes (Ctrl K) ---------- */
.palette-fond{
  position:fixed;inset:0;z-index:1000;background:rgba(15,23,32,.42);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;
  font-family:'Inter',system-ui,sans-serif;
}
.palette{
  width:100%;max-width:640px;max-height:76vh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--carte);color:var(--encre);border-radius:var(--rayon-xl);
  box-shadow:0 24px 64px rgba(15,23,32,.35);
}
.palette-champ{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--ligne)}
.palette-champ svg{fill:none;stroke:var(--secondaire);stroke-width:2;stroke-linecap:round;flex-shrink:0}
.palette-champ input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-size:1.05rem;color:var(--encre);
}
.palette-liste{overflow-y:auto;padding:6px 8px 8px}
.palette-groupe{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--secondaire);padding:10px 10px 4px;
}
.palette-item{
  display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer;
}
.palette-item:hover{background:var(--fond)}
.palette-item.actif{background:var(--primaire-pale)}
.palette-icone{
  width:30px;height:30px;border-radius:8px;background:var(--fond);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.palette-texte{display:flex;flex-direction:column;min-width:0;flex:1}
.palette-titre{font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-sous{font-size:.74rem;color:var(--secondaire);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-indice{display:flex;align-items:center;gap:5px;font-size:.74rem;color:var(--secondaire);flex-shrink:0}
.palette-vide{padding:26px 12px;text-align:center;color:var(--secondaire);font-size:.88rem}
.palette-pied{
  display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 18px;border-top:1px solid var(--ligne);
  background:var(--fond);font-size:.74rem;color:var(--secondaire);
}
.palette-pied > span{display:inline-flex;align-items:center;gap:4px}
html.palette-ouverte, html.palette-ouverte body{overflow:hidden}
@media(max-width:640px){.palette-fond{padding-top:6vh}.palette-pied{display:none}}

/* ============================================================
   REFONTE VISUELLE 2026-09 — ÉTAPE 3 (ajout)
   Thème sombre : boutons pleins en texte foncé (le blanc sur le
   bleu et le vert éclaircis du thème sombre manquait de contraste).
   ============================================================ */
html[data-affichage="adhere"][data-theme="sombre"] .btn-primaire,
html[data-affichage="adhere"][data-theme="sombre"] .btn-succes{color:#0F1720}
html[data-affichage="adhere"][data-theme="sombre"] .btn-mini.ok:hover,
html[data-affichage="adhere"][data-theme="sombre"] .btn-mini.non:hover{color:#0F1720}

/* ============================================================
   REFONTE VISUELLE 2026-09 — ÉCRAN DE CONNEXION (ajout)
   Tableau de bord (élève / parent) et Console (enseignant) :
   panneau d'accueil foncé à gauche + formulaire à droite.
   Classes .cx-* seulement; la page pose body.en-connexion tant
   qu'un écran de connexion est affiché (en-tête et pied masqués).
   ============================================================ */
body.en-connexion .app{max-width:none;padding:0}
body.en-connexion .app > .entete,
body.en-connexion .app > .pied{display:none}
.cx{display:flex;gap:24px;min-height:100vh;box-sizing:border-box;padding:24px}
.cx-panneau{
  width:min(640px, 44vw);flex-shrink:0;box-sizing:border-box;border-radius:24px;
  background:var(--bande);color:var(--bande-texte);padding:40px 44px;
  display:flex;flex-direction:column;gap:26px;overflow:hidden;
}
.cx-marque{display:flex;align-items:center;gap:14px}
.cx-logo{
  width:48px;height:48px;border-radius:12px;background:#FFFFFF;color:#1C2733;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Sora',sans-serif;font-weight:700;font-size:1.2rem;
}
.cx-logo.logo-classe{background:transparent;border-radius:0}
.cx-logo.logo-classe img{width:100%;height:100%;object-fit:contain;display:block}
.cx-nom{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:1.1rem}
.cx-sous{display:block;font-size:.85rem;color:var(--bande-sous);margin-top:2px}
.cx-accueil{display:flex;flex-direction:column;gap:14px;margin-top:5vh}
.cx-date{font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--bande-sous)}
.cx-titre{font-family:'Sora',sans-serif;font-size:clamp(2rem, 3.2vw, 2.9rem);line-height:1.12;font-weight:700;color:var(--bande-texte)}
.cx-texte{font-size:1.05rem;line-height:1.55;color:#C6D2DF;max-width:460px}
.cx-pastilles{display:flex;gap:8px;flex-wrap:wrap}
.cx-pastille{
  display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.10);color:#FFFFFF;
}
.cx-pastille svg,.cx-bouton svg,.cx-saisie svg,.cx-atout svg,.cx-mosaique svg,.cx-cadenas svg,.cx-lien svg{
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
}
.cx-mosaique{margin-top:auto;display:grid;grid-template-columns:repeat(4, minmax(0, 104px));gap:14px;padding-top:18px}
.cx-mosaique span{aspect-ratio:1;border-radius:20px;display:flex;align-items:center;justify-content:center}
.cx-mosaique span:nth-child(even){transform:translateY(-18px)}
.cx-mosaique svg{width:38%;height:38%}
.cx-mosaique .m1{background:#EBF1FE;color:#1D4FC4}
.cx-mosaique .m2{background:#FDEEDF;color:#B45309}
.cx-mosaique .m3{background:#E3F5F2;color:#0F766E}
.cx-mosaique .m4{background:#F0EBFD;color:#6D28D9}
.cx-atouts{display:flex;flex-direction:column;gap:12px}
.cx-atout{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
}
.cx-atout .ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cx-atout b{display:block;font-size:.95rem;font-weight:600}
.cx-atout small{display:block;font-size:.82rem;color:var(--bande-sous);margin-top:2px}
.cx-pied{font-size:.8rem;color:var(--bande-sous)}
.cx-droite{flex:1;min-width:0;display:flex;flex-direction:column}
.cx-outils{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.cx-bouton{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;
  border:1px solid var(--ligne);background:var(--carte);color:var(--encre);font-size:.88rem;font-weight:600;
}
.cx-bouton:hover{border-color:var(--secondaire)}
.cx-bouton:focus-visible{outline:2px solid var(--primaire);outline-offset:2px}
.cx-bouton[aria-pressed="true"]{background:var(--primaire-pale);color:var(--primaire-fonce);border-color:var(--primaire)}
.cx-aa{font-family:Georgia,serif;font-size:1.05rem;font-weight:700}
.cx-formulaire{margin:auto;width:100%;max-width:440px;box-sizing:border-box;padding:28px 0}
.cx-tete{margin-bottom:22px}
.cx-tete h2{font-size:2rem;font-weight:700}
.cx-tete p{color:var(--secondaire);font-size:1rem;line-height:1.5;margin-top:6px}
.cx-cadenas{
  width:56px;height:56px;border-radius:16px;background:var(--primaire-pale);color:var(--primaire);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.cx-formulaire .onglets{padding:4px;border-radius:14px;margin-bottom:20px}
.cx-formulaire .onglet{min-height:48px;border-radius:11px;font-size:.95rem;gap:9px}
html[data-affichage="adhere"][data-theme="sombre"] .cx-formulaire .onglet.actif{background:#2A3A4E;color:#FFFFFF}
.cx-formulaire .onglet svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-formulaire .champ label{font-size:.88rem;color:var(--encre-2)}
.cx-saisie{position:relative;display:flex;align-items:center}
.cx-saisie > svg{position:absolute;left:14px;pointer-events:none;color:var(--secondaire)}
.cx-formulaire .cx-saisie input{min-height:50px;border-radius:12px;padding-left:44px;font-size:1rem}
.cx-saisie.avec-oeil input{padding-right:50px}
.cx-oeil{
  position:absolute;right:6px;width:38px;height:38px;border-radius:9px;color:var(--secondaire);
  display:flex;align-items:center;justify-content:center;
}
.cx-oeil:hover{background:var(--fond);color:var(--encre)}
.cx-oeil svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cx-formulaire .btn-bloc{min-height:52px;border-radius:12px;font-size:1rem}
.cx-formulaire .btn-google{min-height:50px;border-radius:12px;background:#FFFFFF;color:#1C2733;border:1px solid var(--ligne)}
.cx-aide{text-align:center;font-size:.88rem;line-height:1.5;color:var(--secondaire);margin-top:16px}
.cx-note{
  margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--primaire-pale);
  color:var(--primaire-fonce);font-size:.88rem;line-height:1.5;
}
.cx-lien{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;margin-top:18px;
  border:1px solid var(--ligne);background:var(--carte);color:var(--encre);text-decoration:none;
}
.cx-lien:hover{border-color:var(--secondaire)}
.cx-lien .ic{width:36px;height:36px;border-radius:10px;background:var(--onglets-fond);color:var(--encre-2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cx-lien b{display:block;font-size:.95rem;font-weight:600}
.cx-lien small{display:block;font-size:.82rem;color:var(--secondaire);margin-top:2px}
.cx-separ{height:1px;background:var(--ligne);margin:22px 0 0}
@media(max-width:900px){
  .cx{flex-direction:column;padding:12px;gap:12px;min-height:0}
  .cx-panneau{width:auto;padding:20px 22px;gap:12px;border-radius:18px}
  .cx-accueil{margin-top:0;gap:8px}
  .cx-titre{font-size:1.6rem}
  .cx-texte,.cx-mosaique,.cx-atouts,.cx-pied{display:none}
  .cx-formulaire{padding:10px 4px 28px}
  .cx-tete h2{font-size:1.6rem}
}