*{box-sizing:border-box}
/* Point 9 (audit navigation) — police Inter auto-hébergée (fichiers dans
   /static/suivi/fonts/, licence SIL Open Font License 1.1, voir LICENSE-inter.txt
   dans ce dossier). Remplace le chargement depuis fonts.googleapis.com/fonts.gstatic.com
   : évite une dépendance réseau externe à chaque page (latence, confidentialité), et
   corrige au passage une incohérence — les pages vitrine et Chaqar AI ne chargeaient
   jusqu'ici la police nulle part et retombaient silencieusement sur la police système.
   Seul le sous-ensemble "latin" est inclus (couvre tous les caractères accentués du
   français, y compris œ/Œ) — les autres écritures (cyrillique, vietnamien...) ne sont
   pas nécessaires ici. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/static/suivi/fonts/inter-latin-400-normal.da03732a27e1.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/static/suivi/fonts/inter-latin-500-normal.51205681a1ba.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/static/suivi/fonts/inter-latin-600-normal.2ede57db1a3a.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/static/suivi/fonts/inter-latin-700-normal.8ca0a5155296.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("/static/suivi/fonts/inter-latin-800-normal.900ae45e40b8.woff2") format("woff2")}
/* Filet de sécurité : toute icône SVG sans règle de taille spécifique reste
   raisonnable au lieu de remplir son conteneur (bug récurrent observé). Les
   règles plus spécifiques (ex. .mon-bouton svg{width:...}) restent prioritaires. */
svg{width:1em;height:1em}
/* Les jetons de design (couleurs, tailles, espaces, rayons, ombres, mouvement)
   sont définis dans tokens.css, chargé avant ce fichier. */
/* Transitions douces et discrètes sur les éléments interactifs (couleurs
   uniquement : pas de mouvement). Spécificité nulle via :where() pour que
   toute règle existante reste prioritaire. */
:where(a,button,.btn,.btn-sm-outline,input,select,textarea,.icon-btn){
  transition:color var(--duree-rapide) var(--courbe),background-color var(--duree-rapide) var(--courbe),
             border-color var(--duree-rapide) var(--courbe),box-shadow var(--duree-rapide) var(--courbe);
}
html{color-scheme:light;overflow-x:clip}
html[data-theme="sombre"]{color-scheme:dark}
/* Chantier 4.5 — densité d'affichage compacte : réduit les principaux espacements et
   tailles de police sans dupliquer chaque règle du site (variables + quelques overrides
   ciblés sur les conteneurs les plus fréquents). */
[data-densite="compacte"]{ font-size:var(--taille-base) }
[data-densite="compacte"] .contenu{ padding:16px 20px }
[data-densite="compacte"] .adm-stat,[data-densite="compacte"] .msg-carte,[data-densite="compacte"] .adm-carte,[data-densite="compacte"] .panel{ padding:12px }
[data-densite="compacte"] .adm-ligne,[data-densite="compacte"] .adm-ligne-entete,[data-densite="compacte"] .row{ padding-top:7px; padding-bottom:7px }
[data-densite="compacte"] .sidebar-nav a{ padding:8px 14px; font-size:var(--taille-sm) }
[data-densite="compacte"] h1{ font-size:var(--taille-xl) }
[data-densite="compacte"] h2{ font-size:var(--taille-md) }
body{
  font-family:var(--font-body);
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  -webkit-font-smoothing:antialiased;
  max-width:100vw;
}
h1,h2,h3{color:var(--ink);font-family:var(--font-display);font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--taille-2xl);line-height:var(--interligne-serre);margin:0 0 6px}
h2{font-size:var(--taille-lg);line-height:var(--interligne-serre);margin:0 0 14px}
a{color:var(--accent)}
p{line-height:1.55}
/* ===================== LAYOUT SHELL ===================== */
.app-topbar{
  height:var(--topbar-h,64px);display:flex;align-items:center;gap:16px;padding:0 22px;
  background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;
}
.app-topbar-menu{display:none;background:none;border:0;color:var(--ink-2);padding:6px;cursor:pointer}
.app-topbar-menu svg{width:22px;height:22px}
.app-topbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.app-topbar-brand img{width:38px;height:38px;object-fit:contain;border-radius:var(--rayon-champ)}
.app-topbar-brand-texte{display:flex;flex-direction:column;line-height:1.2}
.app-topbar-brand-texte strong{font-family:var(--font-display);font-size:var(--taille-base);font-weight:800;letter-spacing:.02em}
.app-topbar-brand-texte span{font-size:var(--taille-2xs);color:var(--muted)}
.app-topbar-recherche{
  flex:1;max-width:420px;display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:0 16px;height:38px;box-sizing:border-box;color:var(--muted);font-size:var(--taille-base);
}
.app-topbar-recherche svg{width:16px;height:16px;flex:none;opacity:.6}
.app-topbar-recherche input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;outline:none;-webkit-appearance:none;appearance:none;height:20px;line-height:20px;padding:0;margin:0}
.app-topbar-recherche input::-webkit-search-cancel-button,
.app-topbar-recherche input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.app-topbar-recherche input::placeholder{color:var(--muted)}
.app-topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.app-topbar-recherche-mobile{display:none}
.compte-chip-texte{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.compte-chip-texte span{font-size:var(--taille-xs);color:var(--muted);font-weight:600}
.compte-chip svg{width:14px;height:14px;color:var(--muted);margin-left:2px}
@media (max-width:900px){
.app-topbar{padding:0 12px;gap:8px}
.app-topbar-menu{display:block}
.app-topbar .app-topbar-recherche{display:none}
.app-topbar-recherche-mobile{display:flex}
.app-topbar-brand-texte{display:none}
.app-topbar-langue{display:none}
.app-topbar-actions{gap:6px}
.compte-chip-texte{display:none}
.compte-chip{padding-right:2px}
.compte-chip svg{flex:none}
.app-topbar-brand{flex:1;justify-content:center}
}
.shell{display:flex;min-height:calc(100vh - var(--topbar-h,64px))}
.main-col{flex:1;min-width:0;display:flex;flex-direction:column}
/* ---- Sidebar (espaces connectés) ---- */
.sidebar{
  width:var(--sidebar-w);flex:none;background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:22px 16px;
}
@media (min-width:901px){
.sidebar{position:sticky;top:var(--topbar-h,64px);height:calc(100vh - var(--topbar-h,64px));overflow-y:auto}
}
.sidebar-fond{display:none}
@media (max-width:900px){
.sidebar{position:fixed;left:-300px;top:var(--topbar-h,64px);height:calc(100vh - var(--topbar-h,64px));overflow-y:auto;z-index:40;transition:left .2s;box-shadow:var(--shadow-lg)}
.sidebar.ouvert{left:0}
.sidebar-fond.ouvert{display:block;position:fixed;inset:var(--topbar-h,64px) 0 0 0;background:rgba(0,0,0,.35);z-index:39}
}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);
  color:var(--ink-2);text-decoration:none;font-weight:600;font-size:var(--taille-base);
}
.sidebar-nav a svg{width:19px;height:19px;flex:none;opacity:.75}
.sidebar-nav .nav-groupe{margin:14px 12px 4px;font-size:var(--taille-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-2)}
.sidebar-nav a:hover{background:var(--surface-2)}
.sidebar-nav a.active{background:var(--accent-soft);color:var(--accent)}
.sidebar-nav a.active svg{opacity:1}
.sidebar-nav .nav-plus-toggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;padding:10px 14px;border-radius:var(--radius-sm);color:var(--ink-2);font-weight:600;font-size:var(--taille-base)}
.sidebar-nav .nav-plus-toggle:hover{background:var(--surface-2)}
.sidebar-nav .nav-plus-toggle svg:first-child{width:19px;height:19px;flex:none;opacity:.75}
.sidebar-nav .nav-plus-chevron{margin-left:auto;display:flex;transition:transform .15s}
.sidebar-nav .nav-plus-chevron svg{width:15px;height:15px}
.sidebar-nav .nav-plus-toggle.ouvert .nav-plus-chevron{transform:rotate(180deg)}
.sidebar-nav .nav-plus-groupe{display:flex;flex-direction:column}
.sidebar-nav .nav-plus-groupe[hidden]{display:none}
/* ---- Rail d'icônes du menu Suivi, affiché à gauche du menu Bibliothèque (desktop/
   tablette uniquement) — voir _sidebar_icones.html. Sur téléphone, il disparaît pour
   ne pas saturer l'écran : seul le menu Bibliothèque (plein, off-canvas) reste. ---- */
.sidebar-icones{
  width:56px;flex:none;background:var(--surface-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;
}
@media (min-width:901px){
.sidebar-icones{position:sticky;top:var(--topbar-h,64px);height:calc(100vh - var(--topbar-h,64px));overflow-y:auto}
}
.sidebar-icones a{
  width:38px;height:38px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  color:var(--muted);text-decoration:none;flex:none;position:relative;
}
.sidebar-icones a svg{width:18px;height:18px}
.sidebar-icones a:hover{background:var(--surface);color:var(--ink-2)}
.sidebar-icones a.active{background:var(--accent-soft);color:var(--accent)}
.sidebar-icones-separateur{width:26px;height:1px;background:var(--border);margin:6px 0}
.sidebar-icones-point{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--red)}
@media (max-width:900px){
.sidebar-icones{display:none}
}
.sidebar-bottom{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:10px}
.verset-card{
  background:linear-gradient(160deg,var(--accent) 0%,var(--purple) 100%);
  color:#fff;border-radius:var(--radius);padding:16px;position:relative;overflow:hidden;
}
.verset-card strong{display:block;font-size:var(--taille-sm);font-weight:800;letter-spacing:.02em;opacity:.9;margin-bottom:8px}
.verset-card p{font-family:var(--font-display);font-style:italic;font-size:var(--taille-base);line-height:1.5;margin:0 0 8px;color:#fff}
.verset-card cite{font-size:var(--taille-xs);font-style:normal;opacity:.85}
.verset-card-photo{background-size:cover;background-position:center;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end}
.theme-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);font-size:var(--taille-sm);font-weight:600;color:var(--ink-2)}
.theme-switch-btns{display:flex;gap:4px;background:var(--border-soft);padding:3px;border-radius:var(--radius-pill)}
.theme-switch-btns button{border:0;background:transparent;color:var(--ink-2);padding:5px 9px;border-radius:var(--radius-pill);cursor:pointer;font-size:var(--taille-sm);line-height:1}
.theme-switch-btns button.actif{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}
.sidebar-deconnexion{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);color:var(--muted);text-decoration:none;font-weight:600;font-size:var(--taille-base)}
.sidebar-deconnexion:hover{background:var(--surface-2);color:var(--red)}
/* ---- Topbar (au-dessus du contenu, espaces connectés) ---- */
.icon-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);text-decoration:none;position:relative;
}
.app-topbar-langue{height:36px;padding:0 8px;border-radius:var(--rayon-champ);border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);font-weight:700;font-size:var(--taille-xs)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .ping{position:absolute;top:-3px;right:-3px;background:var(--red);color:#fff;font-size:var(--taille-2xs);font-weight:800;border-radius:var(--radius-pill);padding:1px 5px;min-width:16px;text-align:center;border:2px solid var(--surface)}
.compte-chip{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;font-size:var(--taille-base)}
.compte-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--border)}
.compte-avatar-lettre{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--taille-base);flex:none}
/* ---- Barre publique (visiteur non connecté) ---- */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:70}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;gap:28px;padding:16px 24px;position:relative}
.logo-badge{width:40px;height:40px;border-radius:var(--rayon-champ);object-fit:contain;flex:none}
.nav-links{display:flex;gap:22px;margin-left:12px}
.nav-links a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:var(--taille-base)}
.nav-links a.active{color:var(--accent)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-actions a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:var(--taille-base)}
.page{max-width:1080px;width:100%;box-sizing:border-box;margin:0 auto;padding:34px 28px 60px;overflow-x:hidden}
.main-col .page{max-width:1080px;padding:28px 28px 60px}
@media (max-width:480px){
.main-col .page{padding:18px 14px 40px}
}
/* Pastille "eyebrow" */
.eyebrow{display:inline-flex;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft-border);padding:7px 14px;border-radius:var(--radius-pill);font-size:var(--taille-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.card{flex:1;padding:26px 22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;text-decoration:none;color:var(--ink);font-weight:700;box-shadow:var(--shadow-sm);transition:box-shadow .15s,border-color .15s,transform .15s}
.card:hover{border-color:var(--accent-soft-border);box-shadow:var(--shadow-sm)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;margin-top:16px;box-shadow:var(--shadow-sm)}
.panel h2{margin-top:0;font-size:var(--taille-lg)}
.stats{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.stat{flex:1;min-width:140px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.stat span{display:block;color:var(--muted);font-size:var(--taille-sm);font-weight:600}
.stat strong{font-size:var(--taille-2xl);color:var(--ink);font-family:var(--font-display)}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border-soft)}
.row:last-child{border-bottom:0}
.conv-link{display:flex;justify-content:space-between;align-items:center;padding:14px 12px;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit;border-radius:var(--radius-sm)}
.conv-link:hover{background:var(--surface-2)}
.conv-link.non-lu{background:var(--accent-soft)}
.conv-link .badge.warn{background:var(--red-soft);color:var(--red)}
.msg-item{max-width:75%;padding:12px 16px;border-radius:var(--radius);margin-bottom:10px;background:var(--surface-2)}
.msg-item.mine{margin-left:auto;background:var(--accent-soft)}
.btn{background:var(--accent-plein);color:#fff;padding:11px 18px;border-radius:var(--radius-sm);text-decoration:none;font-weight:700;border:0;display:inline-block;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent-plein-survol)}
.btn.btn-danger{background:var(--red)}
.btn.btn-danger:hover{background:#B91C1C}
/* Point 4 (audit navigation) — modale de confirmation, remplace window.confirm(). */
.confirmation-fond{display:none;position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:500;align-items:center;justify-content:center;padding:20px}
.confirmation-fond.ouvert{display:flex}
.confirmation-boite{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:26px;max-width:400px;width:100%}
.confirmation-boite h3{margin:0 0 10px;font-size:var(--taille-lg)}
.confirmation-boite p{margin:0 0 20px;color:var(--ink-2);font-size:var(--taille-base);line-height:1.5}
.confirmation-actions{display:flex;justify-content:flex-end;gap:10px}
/* Point 5 (audit navigation) — état de chargement des boutons de soumission. Le SVG
   utilise stroke="currentColor" : il prend automatiquement la bonne couleur (blanc sur
   un bouton plein, couleur d'accent sur un bouton outline...) sans réglage par variante. */
.spinner-inline{display:inline-flex;vertical-align:-3px;animation:chaqar-rotation .7s linear infinite;flex:none}
@keyframes chaqar-rotation{to{transform:rotate(360deg)}}
button.en-chargement,input.en-chargement{opacity:.75;cursor:progress}
.badge{background:var(--border-soft);color:var(--ink-2);padding:5px 12px;border-radius:var(--radius-pill);font-size:var(--taille-xs);font-weight:800;text-decoration:none;display:inline-block}
.badge.ok{background:var(--green-soft);color:var(--green)}
.badge.warn{background:var(--red-soft);color:var(--red)}
.badge.alerte{background:var(--amber-soft);color:var(--amber)}
.badge.danger{background:var(--red-soft);color:var(--red)}
:where(form){display:flex;flex-direction:column;gap:14px;max-width:420px}
:where(label){display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:var(--taille-base);color:var(--ink-2)}
:where(input,textarea,select){padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;background:var(--surface);color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-anneau)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
.champ-mdp{position:relative}
.champ-mdp input{width:100%;padding-right:42px;box-sizing:border-box}
.toggle-mdp{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;cursor:pointer;font-size:var(--taille-md);padding:2px;color:var(--muted)}
:where(button){padding:13px;border:0;border-radius:var(--radius-sm);background:var(--accent-plein);color:#fff;font-weight:700;cursor:pointer;font-size:var(--taille-base)}
/* Lot 2 : survol limité aux appareils qui survolent vraiment (sur écran tactile,
   l'état :hover restait « collé » après un toucher) et spécificité ramenée à celle
   de « button » via :where() — les boutons stylés par une classe (onglets,
   Clair/Sombre, boutons fantômes…) ne virent plus au violet plein au survol. */
@media (hover:hover){button:where(:hover){background:var(--accent-plein-survol)}}
.btn-sm-outline{background:var(--surface);border:1px solid var(--border);color:var(--accent);padding:9px 14px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--taille-base);cursor:pointer}
.btn-sm-outline.teacher{border-color:var(--accent-soft-border);color:var(--accent);background:var(--accent-soft)}
.flash{padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:16px;background:var(--red-soft);color:var(--red);font-weight:700;font-size:var(--taille-base);border:1px solid var(--red-soft);display:flex;align-items:center;gap:10px}
.flash::before{content:"⚠️";font-size:var(--taille-md)}
.flash.success{background:var(--green-soft);color:var(--green);border-color:var(--green-soft)}
.flash.success::before{content:"✅"}
/* Hero (page d'accueil publique /suivi) */
/* Messagerie flottante */
.fab-messagerie{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;background:var(--accent-plein);color:#fff;border:0;font-size:var(--taille-xl);box-shadow:var(--shadow-lg);cursor:pointer;z-index:1000}
@media (max-width:720px){
.fab-messagerie{bottom:76px}
}
.fab-messagerie:hover{background:var(--accent-plein-survol)}
.fab-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;border-radius:var(--radius-pill);font-size:var(--taille-2xs);font-weight:800;padding:2px 6px;min-width:18px}
.panneau-flottant{position:fixed;right:22px;bottom:90px;width:340px;height:460px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1000;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border)}
.panneau-flottant-entete{background:var(--accent-plein);color:#fff;padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.panneau-flottant-entete button{background:none;border:0;color:#fff;font-size:var(--taille-md);cursor:pointer}
@media (max-width:480px){
.panneau-flottant{right:10px;left:10px;width:auto;bottom:80px;height:min(460px,calc(100vh - 140px));max-height:calc(100vh - 140px)}
}
/* Tableaux larges */
table th{color:var(--muted);font-size:var(--taille-sm);text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:10px 8px;text-align:left;border-bottom:2px solid var(--border)}
table td{padding:10px 8px;border-bottom:1px solid var(--border-soft)}
/* Éditeur riche (Quill) */
.editeur-riche-conteneur{position:relative;margin-bottom:8px;width:100%}
.editeur-riche-zone{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);min-height:100px;font-size:var(--taille-base);width:100%;color:var(--ink)}
.editeur-riche-zone .ql-container{border:0!important;font-family:inherit;width:100%}
.editeur-riche-zone .ql-editor{min-height:100px}
/* Variante messagerie (Phase 7) : un message se tape en 1 ligne la plupart du temps —
   démarre bas et grandit avec le contenu (comportement natif de Quill dès que la
   hauteur minimale n'impose plus 100px), au lieu de forcer d'emblée l'encombrement
   d'un éditeur de devoir/article. */
.msg-fil-saisie .editeur-riche-zone,
.msg-fil-saisie .editeur-riche-zone .ql-editor{min-height:20px}
.msg-fil-saisie .ql-editor{padding:9px 13px;max-height:160px;overflow-y:auto}
/* Recadrage photo */
.recadrage-fond{position:fixed;inset:0;background:rgba(15,17,23,.65);z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px}
.recadrage-boite{background:var(--surface);border-radius:var(--radius-lg);padding:20px;max-width:480px;width:100%;box-shadow:var(--shadow-lg)}
.recadrage-boite h3{margin:0 0 12px}
.recadrage-zone-image{max-height:340px;overflow:hidden;background:#111;border-radius:var(--radius-sm)}
.recadrage-zone-image img{display:block}
.recadrage-controles{display:flex;gap:8px;justify-content:center;margin-top:14px}
.recadrage-controles button{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);border-radius:var(--rayon-champ);padding:8px 12px;cursor:pointer;font-size:var(--taille-md)}
.recadrage-controles button:hover{background:var(--accent-soft)}
.recadrage-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.recadrage-annuler{background:none;color:var(--ink-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:8px 18px;cursor:pointer}
.recadrage-valider{background:var(--accent-plein);color:#fff;border:0;border-radius:var(--radius-pill);padding:8px 22px;font-weight:700;cursor:pointer}
/* Avatar générique (tableaux de bord) */
.avatar-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.avatar-lettre{width:56px;height:56px;border-radius:50%;background:var(--accent-plein);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--taille-xl)}
/* ===================== AUTHENTIFICATION (split-screen) ===================== */
.auth-shell{min-height:100vh;display:flex;background:var(--surface)}
.auth-col{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 64px}
.auth-col-interieur{max-width:560px;width:100%;margin:0 auto}
.auth-logo{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;margin-bottom:6px}
.auth-logo img{width:92px;height:92px;object-fit:contain;margin-bottom:6px}
.auth-logo-titre{font-family:var(--font-display);font-size:var(--taille-3xl);font-weight:700;color:var(--ink);margin:0;line-height:1.2}
.auth-logo-sous{font-size:var(--taille-base);color:var(--muted)}
.auth-col h1{font-size:var(--taille-3xl);margin-top:22px;text-align:center}
.auth-col > p.auth-sub{color:var(--muted);margin:0 0 26px;font-size:var(--taille-md);text-align:center}
.auth-col form{max-width:none}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:var(--taille-sm);margin:2px 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.auth-foot{margin-top:18px;font-size:var(--taille-base);color:var(--muted);text-align:center}
.auth-visuel{
  flex:1;position:relative;display:flex;align-items:flex-end;padding:56px;
  background:linear-gradient(180deg,rgba(15,17,30,.05),rgba(15,17,30,.72)),
    url("/static/suivi/img/auth-visuel.419f5b0afcb9.jpg") center/cover;
  color:#fff;
}
.auth-visuel blockquote{margin:0;max-width:420px}
.auth-visuel blockquote .guillemet{font-family:var(--font-display);font-size:44px;color:#C7D2FE;line-height:.4;display:block;margin-bottom:10px}
.auth-visuel blockquote p{font-family:var(--font-display);font-style:italic;font-size:var(--taille-lg);line-height:1.4;margin:0 0 10px}
.auth-visuel blockquote cite{font-style:normal;font-size:var(--taille-base);color:#C7D2FE}
.auth-visuel-icones{display:flex;gap:34px;margin-top:26px}
.auth-visuel-icones div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:#fff}
.auth-visuel-icones span{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.auth-visuel-icones svg{width:22px;height:22px}
.auth-visuel-icones strong{font-size:var(--taille-sm);font-weight:700}
.auth-visuel-icones small{font-size:var(--taille-2xs);color:#C7D2FE}
.auth-verset-bas{margin:14px 0 0;text-align:center}
.auth-verset-bas p{font-family:var(--font-display);font-style:italic;font-size:var(--taille-base);color:var(--ink-2);margin:0 0 4px;line-height:1.5}
.auth-verset-bas cite{font-style:normal;font-size:var(--taille-xs);color:var(--muted)}
.auth-visuel-echo{display:none}
@media (max-width:900px){
.auth-shell{flex-direction:column}
.auth-visuel-admin{display:none}
.auth-col{padding:36px 24px}
.auth-visuel{
    flex:none;min-height:0;align-items:flex-end;padding:32px;
    border-radius:24px;margin:0 24px 24px;
  }
}
@media (max-width:480px){
.auth-col{padding:24px 16px}
.auth-col-interieur{max-width:100%;padding:26px 20px}
.auth-col h1{font-size:var(--taille-xl);margin-top:16px}
.auth-col > p.auth-sub{font-size:var(--taille-base);margin-bottom:20px}
.auth-logo img{width:32px;height:32px}
.auth-visuel{min-height:170px;padding:22px;margin:0 16px 20px}
.auth-visuel blockquote p{font-size:var(--taille-md)}
}
/* Connexion enseignant ET étudiant (.auth-shell-enseignant, réutilisée par les deux
   pages pour qu'elles se ressemblent) : sur tablette/mobile, l'image devient un
   bandeau réduit en haut aux coins bas arrondis, et la carte du formulaire la
   chevauche par-dessus (effet « carte flottante »). Citation + icônes sont
   masquées dans la bande et reprises sous le formulaire à la place. */
@media (max-width:900px){
.auth-shell-enseignant .auth-visuel{
    min-height:260px;align-items:flex-start;padding:0;order:-1;
    border-radius:0 0 40px 40px;margin:0;overflow:hidden;
  }
.auth-shell-enseignant .auth-visuel blockquote,
  .auth-shell-enseignant .auth-visuel-icones{display:none}
.auth-shell-enseignant .auth-col{margin-top:-40px;position:relative;z-index:2}
.auth-shell-enseignant .auth-col-interieur{background:var(--surface);border-radius:28px;padding:32px 28px;box-shadow:0 -10px 30px rgba(15,17,30,.08)}
.auth-shell-enseignant .auth-visuel-echo{display:block;text-align:center;margin-top:22px}
.auth-shell-enseignant .auth-visuel-echo blockquote p{font-family:var(--font-display);font-style:italic;font-size:var(--taille-base);color:var(--ink-2);margin:0 0 4px}
.auth-shell-enseignant .auth-visuel-echo blockquote cite{font-size:var(--taille-xs);color:var(--muted)}
}
@media (max-width:480px){
.auth-shell-enseignant .auth-visuel{min-height:200px}
.auth-shell-enseignant .auth-col-interieur{padding:26px 20px}
}
/* ---- Champs avec icône (formulaires d'authentification) ---- */
.champ-avec-icone{position:relative;display:block}
.champ-avec-icone .champ-icone{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:var(--rayon-champ);background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1;
}
.champ-avec-icone .champ-icone svg{width:14px;height:14px}
.champ-avec-icone input,.champ-avec-icone select{padding-left:38px;width:100%}
.champ-avec-icone input:disabled,.champ-avec-icone select:disabled{background:var(--surface-2);color:var(--muted-2);cursor:not-allowed}
.champ-avec-icone:has(input:disabled) .champ-icone,.champ-avec-icone:has(select:disabled) .champ-icone{background:var(--border-soft);color:var(--muted-2)}
/* ---- Bouton avec icône (style commun "Se connecter" / secondaire) ---- */
.btn-avec-icone{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;box-sizing:border-box}
.btn-avec-icone svg{width:16px;height:16px;flex:none}
.auth-options{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--taille-base);margin-top:-6px;flex-wrap:wrap}
.lien-desactive{color:var(--muted-2);font-weight:600;cursor:not-allowed}
/* ===================== INSCRIPTION (flux multi-etapes) ===================== */
.inscription-shell{min-height:100vh;background:linear-gradient(180deg,#F6F5FC 0%,#F3F1FA 100%);display:flex;flex-direction:column}
[data-theme="sombre"] .inscription-shell{background:linear-gradient(180deg,var(--bg) 0%,var(--surface-2) 100%)}
.inscription-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:var(--surface);border-bottom:1px solid var(--border)}
.inscription-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.inscription-brand img{width:38px;height:38px;object-fit:contain;border-radius:var(--rayon-champ)}
.inscription-brand span{font-weight:800;font-size:var(--taille-base);letter-spacing:.03em}
.inscription-cta{display:flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft-border);padding:10px 18px;border-radius:var(--radius-pill);font-weight:700;font-size:var(--taille-base);text-decoration:none}
.inscription-cta svg{width:15px;height:15px}
.inscription-cta:hover{background:var(--accent-soft-border)}
.inscription-fond{position:relative;flex:1;display:flex;align-items:stretch;justify-content:center;padding:44px 24px;gap:0;max-width:1180px;margin:0 auto;width:100%}
.inscription-photo{
  flex:1;max-width:480px;align-self:stretch;border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:url("/static/suivi/img/inscription-visuel.18806488de36.jpg") center/cover;
  min-height:520px;box-shadow:var(--shadow-lg);
}
.inscription-carte{
  flex:1;max-width:500px;background:var(--surface);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow:var(--shadow-lg);padding:40px 44px;
}
.inscription-icone{width:56px;height:56px;border-radius:var(--rayon-carte);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.inscription-icone svg{width:26px;height:26px}
.inscription-carte h1{font-size:var(--taille-2xl);text-align:center;margin-bottom:8px}
.inscription-carte > p.auth-sub{text-align:center;margin-bottom:26px}
.inscription-etapes{display:flex;align-items:flex-start;justify-content:center;gap:0;margin-bottom:28px}
.inscription-etape{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:1;max-width:110px}
.inscription-etape-cercle{width:32px;height:32px;border-radius:50%;background:var(--border-soft);color:var(--muted-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--taille-base)}
.inscription-etape.actif .inscription-etape-cercle{background:var(--accent-plein);color:#fff}
.inscription-etape-label{font-size:var(--taille-xs);font-weight:700;color:var(--muted-2)}
.inscription-etape.actif .inscription-etape-label{color:var(--accent)}
.inscription-etape-trait{position:absolute;top:16px;left:calc(50% + 20px);right:calc(-50% + 20px);height:1px;background:var(--border)}
.inscription-etape:last-child .inscription-etape-trait{display:none}
.inscription-carte form{max-width:none;gap:14px}
.inscription-carte .champ-avec-icone select{appearance:none;padding-right:36px}
.inscription-carte .champ-avec-icone .champ-chevron{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none}
.inscription-carte .champ-avec-icone .champ-chevron svg{width:15px;height:15px}
.inscription-continuer{margin-top:6px}
.inscription-securite{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:var(--taille-sm);padding:0 0 30px}
.inscription-securite svg{width:14px;height:14px}
@media (max-width:860px){
.inscription-fond{flex-direction:column}
.inscription-photo{display:none}
.inscription-carte{max-width:520px;width:100%}
}
.inscription-identifiants{display:flex;flex-direction:column;gap:10px;margin:6px 0 16px}
.inscription-identifiant{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px}
.inscription-identifiant span{color:var(--muted);font-size:var(--taille-sm);font-weight:600}
.inscription-identifiant strong{font-family:var(--font-display);font-size:var(--taille-lg);color:var(--accent);letter-spacing:.02em}
.inscription-note{color:var(--muted);font-size:var(--taille-sm);text-align:center;margin-bottom:22px}
/* ===================== TABLEAU DE BORD ÉTUDIANT ===================== */
.dash-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.dash-entete h1{font-size:var(--taille-2xl)}
.dash-entete p{color:var(--muted);margin:0}
.dash-anneau-mini{--pct:0;width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--border-soft) 0);display:flex;align-items:center;justify-content:center;flex:none}
.dash-anneau-mini.vert{background:var(--green)}
.dash-anneau-mini.rouge{background:var(--red)}
.dash-anneau-mini.accent{background:var(--accent-plein)}
.dash-anneau-mini.vert .dash-anneau-mini-centre strong,.dash-anneau-mini.rouge .dash-anneau-mini-centre strong,.dash-anneau-mini.accent .dash-anneau-mini-centre strong{color:inherit}
.dash-anneau-mini-centre{width:42px;height:42px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.dash-anneau-mini-centre strong{font-size:var(--taille-xs);color:var(--ink)}
.dash-anneau-mini-centre span{font-size:var(--taille-2xs);color:var(--muted)}
.dash-anneau{--pct:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--border-soft) 0);display:flex;align-items:center;justify-content:center;flex:none}
.dash-anneau-centre{width:112px;height:112px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dash-anneau-centre strong{font-family:var(--font-display);font-size:var(--taille-3xl);color:var(--ink)}
.dash-anneau-centre span{font-size:var(--taille-xs);color:var(--muted);margin-top:2px}
.dash-section-entete{display:flex;justify-content:space-between;align-items:center;margin:26px 0 14px;gap:10px;flex-wrap:wrap}
.dash-section-entete h2{white-space:nowrap}
.dash-section-entete h2{margin:0;font-size:var(--taille-lg)}
.dash-cours-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:800px){
.dash-cours-grille{grid-template-columns:1fr}
}
.dash-devoirs{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.dash-devoirs-pied{display:block;text-align:center;padding:14px;background:var(--surface-2);color:var(--ink-2);font-weight:700;font-size:var(--taille-base);text-decoration:none;border-top:1px solid var(--border-soft)}
/* ===================== LISTE DES COURS (ÉTUDIANT) ===================== */
.cl-vignette{width:96px;height:96px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;flex:none}
.cl-vignette svg{width:42px;height:42px}
.cl-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:26px}
.cl-page-btn{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--ink-2);display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;font-size:var(--taille-base)}
.cl-page-btn svg{width:15px;height:15px}
.cl-page-btn.actif{background:var(--accent-plein);border-color:var(--accent);color:#fff}
.cl-page-btn.desactive{color:var(--muted-2);cursor:not-allowed;pointer-events:none}
.cl-page-ellipsis{color:var(--muted-2);padding:0 4px}
/* ===================== DÉTAIL D'UN DEVOIR ===================== */
.dd-retour{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:var(--taille-base);text-decoration:none;margin-bottom:14px}
.dd-retour svg{width:15px;height:15px}
.dd-grille{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
@media (max-width:1050px){
.dd-grille{grid-template-columns:1fr}
}
.dd-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.dd-titre-ligne{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dd-titre-ligne h1{font-size:var(--taille-2xl);margin:0}
.dd-entete p{color:var(--muted);margin:8px 0 0}
.dd-date-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm)}
.dd-date-carte-icone{width:36px;height:36px;border-radius:var(--rayon-champ);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.dd-date-carte-icone svg{width:16px;height:16px}
.dd-date-carte span{display:block;color:var(--muted);font-size:var(--taille-xs)}
.dd-date-carte strong{color:var(--accent);font-size:var(--taille-base)}
.dd-consignes{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--radius-lg);padding:18px 22px;margin-top:20px;flex-wrap:wrap}
.dd-consignes-gauche{display:flex;gap:14px}
.dd-consignes-icone{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.dd-consignes-icone svg{width:18px;height:18px}
.dd-consignes h3{margin:0 0 4px;font-size:var(--taille-base)}
.dd-consignes p{margin:0;color:var(--ink-2);font-size:var(--taille-base);max-width:600px}
.dd-consignes-bouton,.pa-bouton-outline{background:var(--surface);border:1px solid var(--accent-soft-border);color:var(--accent);padding:10px 18px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--taille-base);text-decoration:none;display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer}
.dd-consignes-bouton svg{width:15px;height:15px;flex:none}
.dd-panneau{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px;margin-bottom:20px}
.dd-panneau h2{margin:0 0 14px;font-size:var(--taille-md)}
.dd-soumettre-icone{width:100%;display:flex;justify-content:center;margin-bottom:16px}
.dd-soumettre-icone-cercle{width:88px;height:88px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;position:relative}
.dd-soumettre-icone-cercle svg{width:38px;height:38px;color:var(--accent)}
.dd-soumettre-icone-check{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;border:3px solid var(--surface)}
.dd-soumettre-icone-check svg{width:13px;height:13px}
.dd-panneau p{color:var(--muted);font-size:var(--taille-base);text-align:center;margin:0 0 18px}
.dd-panneau .btn{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.dd-panneau .btn svg{width:16px;height:16px}
.dd-stat-ligne{display:flex;align-items:center;gap:16px}
.dd-stat-liste{flex:1;display:flex;flex-direction:column;gap:10px}
.dd-stat-liste div{font-size:var(--taille-sm);color:var(--muted)}
.dd-stat-liste strong{display:block;color:var(--ink);font-size:var(--taille-base);font-weight:700}
.dd-ressource{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit}
.dd-ressource:last-child{border-bottom:0}
.dd-ressource-icone{width:34px;height:34px;border-radius:var(--rayon-champ);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.dd-ressource-icone svg{width:16px;height:16px}
.dd-ressource.desactive{opacity:.55;cursor:not-allowed}
.dd-ressource.desactive .dd-ressource-icone{background:var(--border-soft);color:var(--muted-2)}
.dd-ressource strong{display:block;font-size:var(--taille-base);color:var(--ink)}
.dd-ressource span{font-size:var(--taille-xs);color:var(--muted)}
.dd-ressource-chevron{margin-left:auto;color:var(--muted-2)}
.dd-ressource-chevron svg{width:15px;height:15px}
.dd-aide{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.dd-aide-icone{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.dd-aide-icone svg{width:18px;height:18px}
.dd-aide strong{display:block;font-size:var(--taille-base);color:var(--ink)}
.dd-aide span{font-size:var(--taille-sm);color:var(--accent);font-weight:600}
.dd-colonne-gauche{position:relative;min-height:340px}
.dd-fond-decor{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:20px;pointer-events:none;opacity:1}
.dd-fond-decor-livre{width:min(60%,320px);height:auto;color:var(--accent);opacity:.28}
.dd-fond-decor-verset{margin:0}
.dd-fond-decor-verset p{font-family:var(--font-display);font-style:italic;font-size:var(--taille-md);color:var(--muted);opacity:.85;margin:0 0 6px;line-height:1.5}
.dd-fond-decor-verset cite{font-style:normal;font-size:var(--taille-sm);color:var(--muted-2)}
@media (max-width:1050px){
.dd-colonne-gauche{min-height:260px}
.dd-fond-decor-livre{width:min(50%,220px)}
}
@media (max-width:600px){
.dd-colonne-gauche{min-height:200px}
.dd-fond-decor-livre{width:150px}
.dd-fond-decor-verset p{font-size:var(--taille-base)}
.dd-fond-decor{display:none}
}
/* ===================== DÉPÔT D'UN DEVOIR ===================== */
.df-grille{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media (max-width:960px){
.df-grille{grid-template-columns:1fr}
}
.df-aside-panneau{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:24px;margin-bottom:20px}
.df-aside-illustration{text-align:center}
.df-illustration-svg{width:110px;height:auto;color:var(--accent);margin:0 auto 16px}
.df-aside-illustration h3{margin:0 0 8px;font-size:var(--taille-md)}
.df-aside-illustration p{color:var(--muted);font-size:var(--taille-sm);line-height:1.6;margin:0}
.df-aside-separateur{height:1px;background:var(--border);margin:18px 0}
.df-aside-illustration blockquote{margin:0}
.df-aside-illustration blockquote p{font-family:var(--font-display);font-style:italic;color:var(--ink-2);font-size:var(--taille-sm);margin:0 0 6px}
.df-aside-illustration blockquote cite{font-size:var(--taille-xs);color:var(--muted);font-style:normal}
.df-aside-aide{display:flex;gap:14px;align-items:flex-start;margin-bottom:0}
.df-aside-aide-icone{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.df-aside-aide-icone svg{width:18px;height:18px}
.df-aside-aide h3{margin:0 0 4px;font-size:var(--taille-base)}
.df-aside-aide p{margin:0 0 12px;color:var(--muted);font-size:var(--taille-sm)}
.df-aside-aide .btn-sm-outline{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.df-carte-devoir{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px 24px;margin-bottom:20px}
.df-carte-vignette{width:72px;height:72px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.df-carte-vignette svg{width:30px;height:30px}
.df-carte-devoir h2{margin:0 0 3px;font-size:var(--taille-md)}
.df-carte-devoir > div > p{margin:0 0 8px;color:var(--muted);font-size:var(--taille-base)}
.df-carte-meta{display:flex;gap:18px;flex-wrap:wrap}
.df-carte-meta span{display:flex;align-items:center;gap:6px;font-size:var(--taille-sm);color:var(--muted)}
.df-carte-meta svg{width:14px;height:14px}
.df-consignes{display:flex;gap:14px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--radius-lg);padding:18px 22px;margin-bottom:22px}
.df-consignes-icone{width:30px;height:30px;border-radius:var(--rayon-champ);background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.df-consignes-icone svg{width:15px;height:15px}
.df-consignes h3{margin:0 0 4px;font-size:var(--taille-base)}
.df-consignes p{margin:0;color:var(--ink-2);font-size:var(--taille-base);line-height:1.5}
.df-panneau{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px}
.df-panneau h2{margin:0 0 18px;font-size:var(--taille-md)}
.df-champ{margin-bottom:20px}
.df-champ label{display:block;font-weight:700;font-size:var(--taille-base);color:var(--ink-2);margin-bottom:8px}
.df-champ label .req{color:var(--red)}
.df-zone-depot{
  border:2px dashed var(--accent-soft-border);border-radius:var(--radius-lg);background:var(--accent-soft);
  padding:36px 20px;text-align:center;cursor:pointer;transition:background .15s,border-color .15s;
}
.df-zone-depot.survol{background:var(--accent-soft-border);border-color:var(--accent)}
.df-zone-depot svg{width:34px;height:34px;color:var(--accent);margin-bottom:10px}
.df-zone-depot p{margin:0 0 10px;font-weight:700;color:var(--ink)}
.df-zone-depot-ou{color:var(--muted);font-size:var(--taille-sm);margin:8px 0}
.df-zone-depot .btn-sm-outline{margin-top:4px}
.df-fichiers-choisis{margin-top:12px;text-align:left;display:flex;flex-direction:column;gap:6px}
.df-fichier-choisi{font-size:var(--taille-sm);color:var(--ink-2)}
.df-fichier-choisi svg{width:14px;height:14px;color:var(--accent);flex:none}
.df-champ input[type=text],.df-champ textarea{width:100%;box-sizing:border-box}
.df-compteur{text-align:right;font-size:var(--taille-xs);color:var(--muted-2);margin-top:4px}
.df-pied{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;padding-top:20px;border-top:1px solid var(--border-soft)}
.df-pied .btn{display:flex;align-items:center;gap:8px}
.df-pied .btn svg{width:15px;height:15px}
/* Barre de navigation mobile (bas d'écran) */
.df-fichier-choisi{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin-top:10px}
.df-fichier-icone{width:32px;height:32px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--taille-2xs);flex:none}
.df-fichier-nom{flex:1;min-width:0;display:flex;flex-direction:column}
.df-fichier-nom strong{font-size:var(--taille-base);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-fichier-nom span{font-size:var(--taille-xs);color:var(--muted)}
.df-fichier-suppr{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;flex:none;display:flex}
.df-fichier-suppr:hover{color:var(--red)}
.df-fichier-suppr svg{width:16px;height:16px}
.df-info-bandeau{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);color:var(--accent);border-radius:var(--radius-sm);padding:12px 16px;font-size:var(--taille-sm);font-weight:600;margin:18px 0}
.df-info-bandeau svg{width:16px;height:16px;flex:none}
.df-pied{justify-content:flex-end}
.df-pied .btn-sm-outline{text-decoration:none;display:inline-flex;align-items:center}
/* ===================== CONFIRMATION AVANT DÉPÔT ===================== */
/* ===================== MODALE DE CONFIRMATION (dépôt de devoir) ===================== */
.dcm-fond.ouvert{display:flex}
/* ===================== MISE À JOUR DE LA LECTURE ===================== */
.lc-progres-anneau .dash-anneau-mini{width:64px;height:64px}
.lc-progres-anneau .dash-anneau-mini-centre{width:48px;height:48px}
.lc-progres-anneau .dash-anneau-mini-centre strong{font-size:var(--taille-base)}
/* ===================== LECTURE D'UN CHAPITRE ===================== */
.lch-barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.lch-rond{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);display:flex;align-items:center;justify-content:center;text-decoration:none}
.lch-rond svg{width:16px;height:16px}
.lch-rond.desactive{color:var(--muted-2);cursor:not-allowed;pointer-events:none}
.lch-outil-icone{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lch-outil-icone svg{width:16px;height:16px}
.lch-outil-icone.actif-son{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.lch-outil-icone[disabled], .lch-outil-icone.desactive{color:var(--muted-2);cursor:not-allowed}
.lch-grille{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
@media (max-width:1050px){
.lch-grille{grid-template-columns:1fr}
}
.lch-texte-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px 30px}
.lch-texte-panel h2{font-size:var(--taille-lg);margin:0 0 18px}
.lch-verset{display:flex;gap:16px;margin-bottom:16px;font-size:var(--taille-md);line-height:1.75;color:var(--ink-2)}
.lch-verset-num{color:var(--accent);font-weight:700;flex:none;width:22px;text-align:right;font-size:var(--taille-base)}
.lch-verset mark.jaune{background:#FDE68A;color:inherit;padding:1px 2px;border-radius:3px}
.lch-verset mark.violet{background:var(--accent-soft-border);color:inherit;padding:1px 2px;border-radius:3px}
.lch-indispo{text-align:center;padding:50px 20px;color:var(--muted)}
.lch-indispo svg{width:40px;height:40px;color:var(--muted-2);margin-bottom:14px}
.lch-indispo p{margin:0 0 4px;font-weight:700;color:var(--ink-2)}
.lch-indispo span{font-size:var(--taille-sm)}
.lch-actions{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid var(--border-soft)}
.lch-action{display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--ink-2);font-weight:700;font-size:var(--taille-sm);cursor:pointer;padding:0}
.lch-action svg{width:16px;height:16px;color:var(--accent)}
.lch-action.desactive{color:var(--muted-2);cursor:not-allowed}
.lch-action.desactive svg{color:var(--muted-2)}
.lch-notes-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:20px}
.lch-notes-entete{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lch-notes-entete h2{margin:0;font-size:var(--taille-md)}
.lch-notes-entete span{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.lch-notes-panel form .editeur-riche-conteneur{margin-bottom:12px}
/* ===================== LECTURE — VARIANTE AVEC PANNEAU LATÉRAL ===================== */
.lch-select-livre{padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-weight:700;font-size:var(--taille-base)}
.lch-note-preview{background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--radius);padding:16px}
.lch-note-preview .guillemet{font-family:var(--font-display);font-size:var(--taille-2xl);color:var(--accent);line-height:.5;display:block;margin-bottom:6px}
.lch-note-preview p{margin:0 0 12px;color:var(--ink-2);font-size:var(--taille-base);line-height:1.55}
.lch-note-preview-pied{display:flex;justify-content:space-between;align-items:center;font-size:var(--taille-xs);color:var(--muted)}
.lch-note-preview-pied strong{color:var(--accent);font-weight:700}
.lch-nouvelle-note{color:var(--accent);font-weight:700;font-size:var(--taille-sm);text-decoration:none;background:none;border:0;cursor:pointer}
.lch-verset-jour{display:flex;gap:12px;align-items:flex-start}
.lch-verset-jour-icone{width:42px;height:42px;border-radius:50%;background:var(--amber-soft);color:var(--amber);display:flex;align-items:center;justify-content:center;flex:none}
.lch-verset-jour-icone svg{width:20px;height:20px}
.lch-verset-jour p{margin:0 0 6px;color:var(--ink-2);font-size:var(--taille-base);line-height:1.5}
.lch-verset-jour a{color:var(--accent);font-weight:700;font-size:var(--taille-sm);text-decoration:none}
.lch-note-form{display:none;margin-top:14px}
.lch-note-form.ouvert{display:block}
/* ===================== LECTURE — DÉTAIL D'UN VERSET ===================== */
.lv-actions-mini .desactive{color:var(--muted-2);cursor:not-allowed}
.lv-actions-mini .desactive svg{color:var(--muted-2)}
.lv-nav-chapitres .desactive{color:var(--muted-2);cursor:not-allowed}
.lch-verset.selectionne{background:var(--accent-soft);border-radius:var(--radius);padding:12px 14px;margin:0 -14px 16px}
.lch-verset.selectionne .lch-verset-num{color:var(--accent)}
/* ===================== BLOC-NOTES (LISTE) ===================== */
.bn-recherche{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;flex:1;min-width:0;max-width:280px}
.bn-recherche svg{width:15px;height:15px;color:var(--muted);flex:none}
.bn-recherche input{border:0;outline:0;background:none;font:inherit;flex:1;color:var(--ink)}
.bn-nouvelle-note{display:flex;align-items:center;gap:7px;background:var(--accent-plein);color:#fff;border:0;border-radius:var(--radius-sm);padding:10px 18px;font-weight:700;font-size:var(--taille-base);text-decoration:none}
.bn-nouvelle-note svg{width:15px;height:15px}
.bn-grille{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start}
@media (max-width:1050px){
.bn-grille{grid-template-columns:1fr}
}
.bn-onglets{display:flex;gap:22px;border-bottom:1px solid var(--border);margin-bottom:6px;flex-wrap:wrap}
.bn-onglet{padding:12px 2px;color:var(--muted);font-weight:700;font-size:var(--taille-base);text-decoration:none;border-bottom:2px solid transparent}
.bn-onglet.actif{color:var(--accent);border-bottom-color:var(--accent)}
.bn-onglet.desactive{color:var(--muted-2);cursor:not-allowed}
.bn-tableau{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.bn-ligne-entete{display:grid;grid-template-columns:26px minmax(220px,1fr) 160px 100px 100px 76px;gap:14px;align-items:center;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:var(--taille-xs);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.bn-ligne{display:grid;grid-template-columns:26px minmax(220px,1fr) 160px 100px 100px 76px;gap:14px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border-soft)}
.bn-ligne:last-child{border-bottom:0}
.bn-case{width:16px;height:16px;border:1.5px solid var(--border);border-radius:5px;cursor:not-allowed}
.bn-note-titre{display:flex;align-items:center;gap:12px;min-width:0}
.bn-note-icone{width:34px;height:34px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;flex:none}
.bn-note-icone svg{width:15px;height:15px}
.bn-note-etoile{color:var(--muted-2);flex:none;cursor:not-allowed}
.bn-note-etoile svg{width:14px;height:14px}
.bn-note-texte{min-width:0}
.bn-note-texte strong{display:block;font-size:var(--taille-base);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-note-texte span{display:block;font-size:var(--taille-xs);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-ref{font-size:var(--taille-sm)}
.bn-ref strong{display:block;color:var(--accent);font-weight:700}
.bn-ref span{display:block;color:var(--muted);font-size:var(--taille-xs)}
.bn-date{font-size:var(--taille-xs);color:var(--muted)}
.bn-actions-ligne{display:flex;gap:6px;justify-content:flex-end}
.bn-actions-ligne button, .bn-actions-ligne a{width:30px;height:30px;border-radius:var(--rayon-champ);border:1px solid var(--border);background:var(--surface);color:var(--muted-2);display:flex;align-items:center;justify-content:center;padding:0}
.bn-actions-ligne svg{width:14px;height:14px}
.bn-menu-actions{position:relative;display:inline-block}
.bn-menu-declencheur{cursor:pointer}
.bn-menu-panneau{display:none;position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-champ);padding:8px;z-index:300;min-width:220px;max-width:calc(100vw - 24px);box-shadow:var(--shadow-lg);box-sizing:border-box}
.bn-menu-panneau.ouvert{display:block}
.bn-menu-panneau form{max-width:none}
.bn-menu-panneau button{width:100%;text-align:left;white-space:normal}
@media (max-width:800px){
.bn-ligne-entete{display:none}
.bn-recherche{display:none}
.bn-ligne{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 12px;padding:14px 16px;row-gap:6px}
.bn-case{order:1}
.bn-note-titre{order:2;flex:1;min-width:0}
.bn-note-texte{flex:1;min-width:0}
.bn-note-texte strong{white-space:normal;overflow:visible;text-overflow:clip}
.bn-note-texte span{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bn-ref{order:3;flex-basis:100%;font-size:var(--taille-xs)}
.bn-date{display:none}
.bn-actions-ligne{order:4;margin-left:auto;justify-content:flex-end}
}
.bn-pied{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.bn-pied-texte{color:var(--muted);font-size:var(--taille-sm)}
.bn-recent-item{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border-soft)}
.bn-recent-item:last-child{border-bottom:0}
.bn-recent-icone{width:28px;height:28px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.bn-recent-icone svg{width:13px;height:13px}
.bn-recent-item strong{display:block;font-size:var(--taille-sm);color:var(--ink)}
.bn-recent-item span{font-size:var(--taille-2xs);color:var(--muted)}
.bn-form-note{display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px;margin-bottom:20px;max-width:none}
.bn-form-note.ouvert{display:block}
/* ===================== LISTE DES ENSEIGNANTS (ÉTUDIANT) ===================== */
/* ===================== PRÉSENTATION D'UN ENSEIGNANT ===================== */
.pe-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:28px 30px;display:flex;gap:24px;margin-bottom:22px}
.pe-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--border)}
.pe-photo-lettre{width:96px;height:96px;border-radius:50%;background:var(--accent-plein);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--taille-3xl);font-weight:700;flex:none}
.pe-corps{flex:1;min-width:0}
.pe-corps h1{font-size:var(--taille-xl);margin:0 0 8px}
.pe-badge{display:inline-block;background:var(--accent-soft);color:var(--accent);padding:5px 12px;border-radius:var(--radius-pill);font-size:var(--taille-xs);font-weight:800;margin-bottom:10px}
.pe-corps > p{margin:0 0 16px;color:var(--ink-2);font-size:var(--taille-base);max-width:640px}
.pe-metas{display:flex;gap:26px;flex-wrap:wrap}
.pe-meta{display:flex;align-items:center;gap:9px}
.pe-meta-icone{width:34px;height:34px;border-radius:var(--rayon-champ);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.pe-meta-icone svg{width:16px;height:16px}
.pe-meta.desactive .pe-meta-icone{background:var(--border-soft);color:var(--muted-2)}
.pe-meta span{display:block;color:var(--muted);font-size:var(--taille-xs)}
.pe-meta strong{font-size:var(--taille-sm);color:var(--ink)}
.pe-meta.desactive strong{color:var(--muted-2)}
.pe-onglets{display:flex;gap:26px;border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap}
.pe-onglet{display:flex;align-items:center;gap:7px;padding:10px 2px 12px;color:var(--muted);font-weight:700;font-size:var(--taille-base);text-decoration:none;border-bottom:2px solid transparent}
.pe-onglet svg{width:15px;height:15px}
.pe-onglet.actif{color:var(--accent);border-bottom-color:var(--accent)}
.pe-onglet.desactive{color:var(--muted-2);cursor:not-allowed}
.pe-grille{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-bottom:22px}
@media (max-width:900px){
.pe-grille{grid-template-columns:1fr}
}
@media (max-width:640px){
.pe-carte{flex-direction:column;text-align:center;padding:22px}
.pe-metas{justify-content:center}
.pe-corps > p{max-width:none}
}
.pe-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px}
.pe-panel h2{font-size:var(--taille-md);margin:0 0 14px}
.pe-panel p{color:var(--ink-2);font-size:var(--taille-base);line-height:1.65;margin:0 0 14px}
.pe-verset{background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--radius);padding:16px 18px;display:flex;gap:12px}
.pe-verset-icone{width:32px;height:32px;border-radius:var(--rayon-champ);background:var(--surface);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.pe-verset-icone svg{width:15px;height:15px}
.pe-verset h3{margin:0 0 6px;font-size:var(--taille-base)}
.pe-verset p{margin:0 0 6px;font-style:italic;font-size:var(--taille-base);color:var(--ink-2)}
.pe-verset strong{color:var(--accent);font-size:var(--taille-sm);font-weight:700}
.pe-domaine{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-soft);opacity:.6}
.pe-domaine:last-child{border-bottom:0}
.pe-domaine-icone{width:30px;height:30px;border-radius:var(--rayon-champ);background:var(--border-soft);color:var(--muted-2);display:flex;align-items:center;justify-content:center;flex:none}
.pe-domaine-icone svg{width:14px;height:14px}
.pe-domaine span{font-size:var(--taille-base);color:var(--ink-2)}
.pe-cours-carte{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px 22px}
.pe-cours-vignette{width:64px;height:64px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.pe-cours-vignette svg{width:26px;height:26px}
.pe-cours-corps{flex:1;min-width:0}
.pe-cours-corps h3{margin:0 0 4px;font-size:var(--taille-md)}
.pe-cours-corps p{margin:0 0 8px;color:var(--muted);font-size:var(--taille-base)}
.pe-cours-meta{display:flex;gap:16px;flex-wrap:wrap}
.pe-cours-meta span{display:flex;align-items:center;gap:6px;font-size:var(--taille-sm);color:var(--muted)}
.pe-cours-meta svg{width:14px;height:14px}
.pe-cours-continuer{background:var(--surface);border:1px solid var(--accent-soft-border);color:var(--accent);padding:10px 18px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--taille-base);text-decoration:none;display:flex;align-items:center;gap:7px;white-space:nowrap}
.pe-cours-continuer svg{width:14px;height:14px;flex:none}
@media (max-width:560px){
.pe-cours-carte{flex-direction:column;align-items:stretch;text-align:center}
.pe-cours-vignette{width:100%;height:80px;margin:0 auto}
.pe-cours-meta{justify-content:center}
.pe-cours-continuer{justify-content:center}
}
/* ===================== SAISIE DE PRÉSENCE ===================== */
/* ===================== PRÉSENCE — CONFIRMATION ===================== */
.pc-titre{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.pc-titre h1{font-size:var(--taille-2xl);margin:0}
.pc-titre svg{width:28px;height:28px}
.pc-carte{border-radius:var(--radius-lg);padding:36px 40px;text-align:center}
.pc-carte.succes{background:var(--green-soft);border:1px solid var(--green-soft-border)}
.pc-carte.echec{background:var(--red-soft);border:1px solid var(--red-soft-border)}
.pc-cercle{width:96px;height:96px;border-radius:50%;border:4px solid var(--green);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.pc-carte.echec .pc-cercle{border-color:var(--red)}
.pc-cercle svg{width:42px;height:42px;color:var(--green)}
.pc-carte.echec .pc-cercle svg{color:var(--red)}
.pc-carte h2{font-size:var(--taille-2xl);margin:0 0 14px;color:var(--green)}
.pc-carte.echec h2{color:var(--red)}
.pc-carte p{font-size:var(--taille-md);color:var(--ink);margin:0 0 6px;max-width:520px;margin-left:auto;margin-right:auto}
.pc-details{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px;display:flex;justify-content:space-around;margin:28px 0;flex-wrap:wrap;gap:20px}
.pc-detail{text-align:center}
.pc-detail span{display:block;color:var(--muted);font-size:var(--taille-base);font-weight:600;margin-bottom:8px}
.pc-detail strong{font-size:var(--taille-2xl);font-family:var(--font-display);color:var(--ink)}
.pc-detail strong.vert{color:var(--green)}
.pc-detail strong.rouge{color:var(--red)}
.pc-bandeau{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--radius);padding:14px 18px;font-weight:600;color:var(--ink-2);font-size:var(--taille-base)}
.pc-bandeau svg{width:18px;height:18px;color:var(--green);flex:none}
.pc-carte.echec .pc-bandeau svg{color:var(--red)}
.pc-retour{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;background:var(--accent-plein);color:#fff;padding:15px;border-radius:var(--radius-sm);font-weight:700;font-size:var(--taille-md);text-decoration:none;margin-top:22px}
.pc-retour svg{width:16px;height:16px;flex:none}
.pc-carte.retard{background:var(--amber-soft);border:1px solid var(--amber-soft-border)}
.pc-carte.retard .pc-cercle{border-color:var(--amber)}
.pc-carte.retard .pc-cercle svg{color:var(--amber)}
.pc-carte.retard h2{color:var(--amber)}
.pc-carte.retard .pc-bandeau svg{color:var(--amber)}
/* ===================== RÉSULTATS & NOTES ===================== */
/* ===================== RESSOURCES ===================== */
.rs-tableau{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
/* ===================== PARAMÈTRES ===================== */
.pa-grille{display:grid;grid-template-columns:240px 1fr;gap:20px;align-items:start;margin-bottom:20px}
@media (max-width:900px){
.pa-grille{grid-template-columns:1fr}
}
.pa-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:10px}
.pa-menu-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--radius-sm);color:var(--ink-2);text-decoration:none;cursor:pointer}
.pa-menu-item svg{width:17px;height:17px;flex:none;color:var(--muted)}
.pa-menu-item.actif{background:var(--accent-soft)}
.pa-menu-item.actif svg{color:var(--accent)}
.pa-menu-item strong{display:block;font-size:var(--taille-base)}
.pa-menu-item.actif strong{color:var(--accent)}
.pa-menu-item span{display:block;font-size:var(--taille-xs);color:var(--muted)}
.pa-menu-item.desactive{opacity:.55;cursor:not-allowed}
.pa-panneau{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px}
.pa-panneau h2{font-size:var(--taille-md);margin:0 0 20px}
.pa-photo-ligne{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.pa-photo-cadre{position:relative}
.pa-photo-cadre img, .pa-photo-cadre .avatar-lettre{width:76px;height:76px}
.pa-photo-cadre label{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent-plein);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border:3px solid var(--surface)}
.pa-photo-cadre label svg{width:12px;height:12px}
.pa-photo-note{color:var(--muted);font-size:var(--taille-sm)}
.pa-champs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){
.pa-champs{grid-template-columns:1fr}
}
.pa-champ label{display:block;font-weight:700;font-size:var(--taille-sm);color:var(--ink-2);margin-bottom:7px}
.pa-champ input, .pa-champ select, .pa-champ textarea{width:100%;box-sizing:border-box}
.pa-champ.pleine{grid-column:1/-1}
.pa-champ.desactive input, .pa-champ.desactive select, .pa-champ.desactive textarea{background:var(--surface-2);color:var(--muted-2);cursor:not-allowed}
.pa-sous-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
@media (max-width:1000px){
.pa-sous-grille{grid-template-columns:1fr}
}
.pa-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px}
.pa-carte h3{font-size:var(--taille-base);margin:0 0 14px}
.pa-ligne-reglage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.pa-ligne-reglage:last-child{border-bottom:0}
.pa-ligne-gauche{display:flex;align-items:center;gap:10px;min-width:0}
.pa-ligne-gauche svg{width:16px;height:16px;color:var(--muted);flex:none}
.pa-ligne-gauche strong{display:block;font-size:var(--taille-sm);color:var(--ink)}
.pa-ligne-gauche span{display:block;font-size:var(--taille-xs);color:var(--muted)}
.pa-ligne-reglage select{padding:7px 10px;border:1px solid var(--border);border-radius:var(--rayon-champ);font-size:var(--taille-sm);color:var(--muted-2);cursor:not-allowed}
/* Fusionnée avec .dd-consignes-bouton (voir plus haut) — Phase 3, point 13 : même
   bouton « outline accent », deux noms différents selon la page d'origine. */
.pa-bouton-outline.desactive{color:var(--muted-2);border-color:var(--border);cursor:not-allowed}
.pa-lien-carte{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:inherit;cursor:not-allowed}
.pa-lien-carte > svg{width:15px;height:15px;color:var(--muted-2);flex:none}
.pa-lien-carte.danger .pa-ligne-gauche svg{color:var(--red)}
.pa-lien-carte.danger strong{color:var(--red)}
/* ===================== NOTIFICATIONS ===================== */
/* ===================== PROFIL ===================== */
.pr-carte-tete{display:flex;gap:30px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px 30px;margin-bottom:20px}
.pr-photo-bloc{display:flex;flex-direction:column;gap:12px}
.pr-photo-cadre{position:relative;width:88px;height:88px}
.pr-photo-cadre img, .pr-photo-cadre .avatar-lettre{width:88px;height:88px;font-size:var(--taille-3xl)}
.pr-photo-cadre label{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;background:var(--accent-plein);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border:3px solid var(--surface)}
.pr-photo-cadre label svg{width:12px;height:12px}
.pr-nom-bloc h1{font-size:var(--taille-lg);margin:0 0 6px;display:flex;align-items:center;gap:9px}
.pr-nom-bloc p{margin:0 0 4px;color:var(--muted);font-size:var(--taille-base);display:flex;align-items:center;gap:7px}
.pr-nom-bloc svg{width:14px;height:14px;color:var(--muted-2);flex:none}
.pr-bouton-photo{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft-border);border-radius:var(--radius-sm);padding:9px 16px;font-weight:700;font-size:var(--taille-sm);cursor:pointer}
.pr-bouton-photo svg{width:14px;height:14px}
.pr-meta-colonne{flex:1;min-width:220px;display:flex;flex-direction:column;gap:14px}
.pr-meta-ligne{display:flex;align-items:center;gap:12px}
.pr-meta-ligne svg{width:16px;height:16px;color:var(--muted);flex:none}
.pr-meta-ligne span{display:block;font-size:var(--taille-xs);color:var(--muted)}
.pr-meta-ligne strong{display:block;font-size:var(--taille-sm);color:var(--ink)}
.pr-grille{display:grid;grid-template-columns:1fr 1fr 320px;gap:20px;align-items:start}
@media (max-width:1150px){
.pr-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:800px){
.pr-grille{grid-template-columns:1fr}
}
.pr-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px}
.pr-carte h2{font-size:var(--taille-md);margin:0 0 16px}
.pr-info-ligne{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:var(--taille-base)}
.pr-info-ligne:last-child{border-bottom:0}
.pr-info-ligne span{color:var(--muted)}
.pr-info-ligne strong{color:var(--ink);text-align:right;font-weight:600}
.pr-info-ligne.desactive span, .pr-info-ligne.desactive strong{color:var(--muted-2)}
.pr-verset-bloc{background:var(--accent-soft);border-radius:var(--radius);padding:12px 14px;font-size:var(--taille-sm);font-style:italic;color:var(--ink-2);margin-top:6px}
.pr-modifier{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft-border);border-radius:var(--radius-sm);padding:11px;font-weight:700;font-size:var(--taille-sm);text-decoration:none;margin-top:16px;width:100%;box-sizing:border-box}
.pr-modifier svg{width:14px;height:14px;flex:none}
.pr-securite-ligne{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.pr-securite-ligne:last-child{border-bottom:0}
.pr-securite-ligne span.libelle{display:block;font-size:var(--taille-xs);color:var(--muted)}
.pr-securite-ligne strong{display:block;font-size:var(--taille-sm);color:var(--ink)}
.pr-securite-ligne.desactive strong, .pr-securite-ligne.desactive span.libelle{color:var(--muted-2)}
.pr-progres-liste{display:flex;flex-direction:column;gap:12px}
.pr-progres-item{display:flex;align-items:center;gap:12px}
.pr-progres-icone{width:32px;height:32px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;flex:none}
.pr-progres-icone svg{width:15px;height:15px}
.pr-progres-item strong{display:block;font-size:var(--taille-base);color:var(--ink)}
.pr-progres-item span{font-size:var(--taille-xs);color:var(--muted)}
.pr-progres-item.desactive strong, .pr-progres-item.desactive span{color:var(--muted-2)}
.pr-progres-item.desactive .pr-progres-icone{background:var(--border-soft) !important;color:var(--muted-2) !important}
.pr-actions-liste{display:flex;flex-direction:column;gap:6px}
.pr-action-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none;color:inherit}
.pr-action-item:hover{background:var(--surface-2)}
.pr-action-item.desactive{opacity:.5;cursor:not-allowed}
.pr-action-icone{width:32px;height:32px;border-radius:var(--rayon-champ);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none}
.pr-action-icone svg{width:15px;height:15px}
.pr-action-item strong{flex:1;font-size:var(--taille-base);color:var(--ink);font-weight:600}
.pr-action-item > svg{width:14px;height:14px;color:var(--muted-2);flex:none}
/* ===================== RÉINITIALISER LE MOT DE PASSE (connecté) ===================== */
.rp-carte{display:flex;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);background:var(--surface);max-width:920px}
.rp-illustration{flex:1;background:url("/static/suivi/img/illustration-reset-mdp.1d3b85c6f3ae.jpg") center/cover;min-height:420px}
.rp-formulaire{flex:1;padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.rp-icone{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.rp-icone svg{width:24px;height:24px}
.rp-formulaire h1{font-size:var(--taille-xl);margin:0 0 12px}
.rp-trait{width:44px;height:3px;background:var(--accent-plein);border-radius:2px;margin-bottom:16px}
.rp-formulaire p{color:var(--muted);font-size:var(--taille-base);line-height:1.6;margin:0 0 22px;max-width:340px}
.rp-formulaire form{max-width:340px}
.rp-formulaire .champ-avec-icone{margin-bottom:16px}
.rp-formulaire button{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px}
.rp-formulaire button svg{width:16px;height:16px}
.rp-retour{display:block;text-align:center;color:var(--accent);font-weight:600;font-size:var(--taille-base);text-decoration:none;margin-top:16px}
@media (max-width:760px){
.rp-carte{flex-direction:column;max-width:none}
.rp-illustration{min-height:220px}
}
/* ===================== TOPBAR PUBLIQUE (SIMPLIFIÉE) ===================== */
.brand-simple{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-simple-texte strong{font-family:var(--font-display);font-size:var(--taille-md);font-weight:800;letter-spacing:.03em;color:var(--ink)}
.nav-link-actif{color:var(--accent);font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:3px}
/* ===================== ACCUEIL PUBLIC ===================== */
.ac-hero{position:relative;padding:100px 24px 96px;text-align:center;overflow:hidden;background-image:linear-gradient(180deg,rgba(10,16,28,.35),rgba(10,16,28,.78)),url("/static/suivi/img/accueil-croix.16d308c15e37.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--accent)}
.ac-hero-contenu{position:relative;max-width:760px;margin:0 auto}
.ac-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);padding:9px 20px;border-radius:var(--radius-pill);font-weight:700;font-size:var(--taille-base);margin-bottom:26px;backdrop-filter:blur(4px)}
.ac-badge svg{width:16px;height:16px}
.ac-hero h1{font-size:var(--taille-3xl);line-height:1.3;margin:0 0 22px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.ac-hero h1 .accent{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5)}
.ac-separateur{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px}
.ac-separateur span{width:60px;height:1px;background:rgba(255,255,255,.35)}
.ac-hero .ac-separateur svg{color:rgba(255,255,255,.7)}
.ac-hero .btn-sm-outline{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.ac-separateur svg{width:16px;height:16px;color:var(--accent)}
.ac-hero p.ac-sous-titre{color:rgba(255,255,255,.86);font-size:var(--taille-md);line-height:1.6;max-width:560px;margin:0 auto}
@media (max-width:860px){
.ac-hero{padding:48px 20px 52px}
.ac-hero h1{font-size:var(--taille-2xl)}
.ac-badge{font-size:var(--taille-sm);padding:8px 16px;text-align:left}
}
@media (max-width:480px){
.ac-hero{padding:36px 16px 40px}
.ac-hero h1{font-size:var(--taille-xl);margin-bottom:16px}
.ac-hero p.ac-sous-titre{font-size:var(--taille-base)}
.ac-badge{font-size:var(--taille-xs);padding:7px 12px;gap:6px;margin-bottom:18px}
.ac-separateur{margin-bottom:16px}
.ac-separateur span{width:32px}
}
.ac-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1040px;margin:0 auto;padding:0 24px 60px;position:relative}
@media (max-width:900px){
.ac-cartes{grid-template-columns:1fr;max-width:420px}
}
.ac-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:32px 26px;text-align:center}
.ac-carte-icone{width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.ac-carte-icone svg{width:28px;height:28px}
.ac-carte h2{font-size:var(--taille-lg);margin:0 0 10px}
.ac-carte p{color:var(--muted);font-size:var(--taille-base);line-height:1.55;margin:0 0 20px;min-height:42px}
.ac-carte .btn-sm-outline{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:8px}
.ac-carte .btn-sm-outline svg{width:14px;height:14px}
@media (max-width:480px){
.ac-cartes{padding:0 16px 40px;gap:14px}
.ac-carte{padding:24px 20px}
.ac-carte-icone{width:52px;height:52px;margin-bottom:14px}
.ac-carte-icone svg{width:22px;height:22px}
.ac-carte h2{font-size:var(--taille-md)}
}
.ac-pied{border-top:1px solid var(--border);padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:var(--taille-sm)}
.ac-pied-verset{display:flex;align-items:center;gap:8px;font-style:italic}
.ac-pied-verset svg{width:15px;height:15px;color:var(--accent)}
.ac-pied-verset strong{font-style:normal;color:var(--accent);font-weight:700}
@media (max-width:600px){
.ac-pied{flex-direction:column;text-align:center;padding:20px 18px;gap:10px}
.ac-pied-verset{text-align:center}
}
/* ===================== CONNEXION ADMINISTRATION ===================== */
.auth-visuel-admin{
  flex:1;position:relative;border-radius:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:16px;padding:56px;
  background:linear-gradient(180deg,rgba(15,17,30,.05),rgba(15,17,30,.72)),
    url("/static/suivi/img/admin-auth-visuel.3fdde23bf18a.jpg") top center/cover;
  color:#fff;
}
.auth-visuel-admin blockquote{margin:0;max-width:420px}
.auth-visuel-admin blockquote .guillemet{font-family:var(--font-display);font-size:44px;color:#C7D2FE;line-height:.4;display:block;margin-bottom:10px}
.auth-visuel-admin blockquote p{font-family:var(--font-display);font-style:italic;font-size:var(--taille-lg);line-height:1.4;margin:0 0 10px}
.auth-visuel-admin blockquote cite{font-style:normal;font-size:var(--taille-base);color:#C7D2FE;text-transform:uppercase;letter-spacing:.04em}
.auth-visuel-signature{font-family:var(--font-display);font-style:italic;font-size:var(--taille-md);color:#fff;opacity:.9;border-top:1px solid rgba(255,255,255,.35);padding-top:12px;width:100%}
.auth-icone-ronde{width:88px;height:88px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.auth-icone-ronde svg{width:38px;height:38px}
@media (max-width:480px){
.auth-icone-ronde{width:64px;height:64px;margin-bottom:14px}
.auth-icone-ronde svg{width:28px;height:28px}
}
.auth-col-centre{text-align:center}
.auth-col-centre h1{text-align:center}
.auth-col-centre .auth-sub{text-align:center;max-width:400px;margin-left:auto;margin-right:auto}
.auth-col-centre form{text-align:left}
/* ===================== MENU DÉROULANT DU COMPTE (topbar) ===================== */
.compte-menu{position:relative}
.compte-menu .compte-chip{cursor:pointer;font:inherit;border:0;background:none}
.compte-menu-panneau{
  display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:220px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:8px;z-index:200;
}
.compte-menu-panneau.ouvert{display:block}
.compte-menu-panneau a, .compte-menu-panneau span{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rayon-champ);
  color:var(--ink-2);text-decoration:none;font-weight:600;font-size:var(--taille-base);
}
.compte-menu-panneau a:hover{background:var(--surface-2)}
.compte-menu-panneau svg{width:16px;height:16px;color:var(--muted);flex:none}
.compte-menu-panneau .desactive{color:var(--muted-2);cursor:not-allowed}
.compte-menu-separateur{height:1px;background:var(--border-soft);margin:6px 4px}
.compte-menu-deconnexion{color:var(--red) !important}
.compte-menu-deconnexion svg{color:var(--red) !important}
/* ===================== TABLEAU DE BORD ENSEIGNANT ===================== */
/* Amélioration (doc du 28/08, point 16) — polish mobile général : évite les coupures
   sur les cartes/panneaux les plus denses (tableau de bord et Mes cours enseignant). */
@media (max-width:480px){
.tc-side-panel, .adm-carte, .msg-carte{padding:14px}
.nc-colonne-droite{width:100%}
.tc-grille{gap:14px}
}
/* Mise en page à deux colonnes (formulaire + panneau latéral), utilisée par Publier un
   cours, Activer un devoir, Ajouter une ressource, Nouvelle conversation — déplacée ici
   (global) car elle était auparavant définie localement dans un seul template. */
.nc-mise-en-page{display:flex;gap:16px;align-items:flex-start}
.nc-colonne-principale{flex:1;min-width:0}
.nc-colonne-droite{width:290px;flex:none;display:flex;flex-direction:column;gap:16px}
/* Grilles de champs de formulaire à 2/3 colonnes (Publier un cours, Créer un devoir,
   Ajouter une ressource, Inscription enseignant…) : remplace les `style="display:grid;
   grid-template-columns:..."` inline, qui n'avaient aucun repli mobile et coupaient les
   champs sur téléphone faute de media query possible sur un style inline. */
.form-grille-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grille-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media (max-width:600px){
.form-grille-2,.form-grille-3{grid-template-columns:1fr}
}
/* Les formulaires principaux (Publier un cours, Ajouter une ressource, Correction de
   devoirs…) doivent remplir toute leur colonne, pas se limiter aux 420px par défaut du
   sélecteur `form` générique — sinon la carte se retrouve inutilement étroite (et sur
   certains gabarits, coupe des éléments en grille interne). */
.nc-colonne-principale form, .cd-detail-panel form{max-width:none}
.nc-conseils{margin:0;padding-left:18px;font-size:var(--taille-sm);color:var(--ink-2);line-height:1.7}
.msg-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:16px}
.msg-carte h3{margin:0 0 12px;font-size:var(--taille-base);display:flex;align-items:center;gap:7px}
@media (max-width:900px){
.nc-mise-en-page{flex-direction:column}
.nc-colonne-droite{width:100%}
}
/* ===================== ENSEIGNANT — Publier un cours (en-tête photo + badges d'étape) ===================== */
.pc-badge-etape{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:var(--taille-sm);font-weight:800;margin-right:6px;vertical-align:middle}
.pc-badge-1{background:var(--accent-plein)}
.pc-badge-2{background:var(--purple)}
.pc-badge-3{background:var(--blue)}
.pc-apercu-zone{width:100%;aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:10px;overflow:hidden}
.pc-apercu-vide{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px}
.pc-apercu-vide svg{width:26px;height:26px}
.pc-apercu-vide span{font-size:var(--taille-sm);font-weight:700;color:var(--accent)}
.pc-apercu-vide small{font-size:var(--taille-2xs);color:var(--muted)}
.pc-badge-4{background:var(--green)}
.pc-conseils-coches{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pc-conseils-coches li{display:flex;align-items:flex-start;gap:8px;font-size:var(--taille-sm);color:var(--ink-2);line-height:1.5}
.pc-conseils-coches svg{width:16px;height:16px;color:var(--blue);flex:none;margin-top:1px}
.pc-checklist{display:flex;flex-direction:column;gap:10px}
.pc-checklist-item{display:flex;align-items:center;gap:9px;font-size:var(--taille-sm);color:var(--muted)}
.pc-checklist-puce{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex:none}
.pc-checklist-item.coche{color:var(--ink)}
.pc-checklist-item.coche .pc-checklist-puce{border-color:var(--green);background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat}
.pc-citation-carte{position:relative;text-align:center}
.pc-citation-guillemet{display:block;color:var(--accent-soft-border);margin-bottom:6px}
.pc-citation-guillemet svg{width:26px;height:26px}
.pc-citation-carte blockquote{margin:0}
.pc-citation-carte blockquote p{font-family:var(--font-display);font-style:italic;font-size:var(--taille-base);color:var(--ink-2);margin:0 0 8px;line-height:1.5}
.pc-citation-carte blockquote cite{font-size:var(--taille-xs);color:var(--muted);font-style:normal;font-weight:700}
/* ===================== MES COURS (ENSEIGNANT) ===================== */
/* Variantes à 3/4 colonnes (pages avec moins de statistiques) : classes dédiées plutôt
   que style inline, pour que les media queries ci-dessus s'appliquent toujours — un
   style inline a une priorité plus forte qu'une media query et bloquait le responsive
   sur mobile (Annonces, Devoirs, Publication de cours). */
/* ===================== PUBLICATION DES COURS (ENSEIGNANT) ===================== */
/* Variante 5 colonnes (Liste des étudiants : niveau/cours/statut/recherche + 2 boutons) —
   classe dédiée au lieu d'un style inline, qui bloquait le responsive ci-dessus. */
.pc-niveau-badge{padding:4px 10px;border-radius:var(--radius-pill);font-size:var(--taille-xs);font-weight:700;background:var(--accent-soft);color:var(--accent)}
/* ===================== LISTE DES ÉTUDIANTS (ENSEIGNANT) ===================== */
/* ===================== SAISIE DE PRÉSENCE (ENSEIGNANT) ===================== */
/* ===================== SAISIE DE PRÉSENCE (ENSEIGNANT) ===================== */
.pe-ens-filtres{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:14px 16px;margin-bottom:20px;max-width:none;width:100%}
@media (max-width:900px){
.pe-ens-filtres{grid-template-columns:1fr 1fr}
}
.pe-ens-champ label{display:flex;align-items:center;gap:6px;font-size:var(--taille-xs);font-weight:700;color:var(--ink-2);margin-bottom:6px}
.pe-ens-champ label svg{width:14px;height:14px;color:var(--green)}
.pe-ens-champ select, .pe-ens-champ input{width:100%;box-sizing:border-box;padding:8px 10px;font-size:var(--taille-sm)}
.pe-ens-champ select.desactive{color:var(--muted-2);cursor:not-allowed}
.pe-ens-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media (max-width:700px){
.pe-ens-stats{grid-template-columns:1fr 1fr}
}
.pe-ens-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px}
.pe-ens-stat-icone{width:42px;height:42px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;flex:none}
.pe-ens-stat-icone svg{width:19px;height:19px}
.pe-ens-stat span{display:block;color:var(--muted);font-size:var(--taille-sm)}
.pe-ens-stat strong{display:block;font-family:var(--font-display);font-size:var(--taille-xl);color:var(--ink)}
/* Correctif (sept. 2026) : la grille est enveloppée par le formulaire de saisie, que la
   règle globale des formulaires limitait à 420 px — sur ordinateur, la liste des
   étudiants était écrasée dans une colonne de 100 px et coupée. */
#form-presence{max-width:none}
.pe-ens-grille{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media (max-width:1050px){
.pe-ens-grille{grid-template-columns:1fr}
}
.pe-ens-tableau{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.pe-ens-ligne-entete{display:grid;grid-template-columns:36px 120px 1fr 110px 260px;gap:12px;align-items:center;padding:12px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:var(--taille-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.pe-ens-ligne{display:grid;grid-template-columns:36px 120px 1fr 110px 260px;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid var(--border-soft)}
.pe-ens-ligne:last-child{border-bottom:0}
.pe-ens-num{color:var(--muted);font-size:var(--taille-sm)}
.pe-ens-matricule{color:var(--muted);font-size:var(--taille-sm);font-family:monospace}
.pe-ens-nom{font-weight:600;color:var(--ink);font-size:var(--taille-base)}
.pe-ens-heure input{width:100%;box-sizing:border-box;padding:7px 8px;border:1px solid var(--border);border-radius:var(--rayon-champ);font-size:var(--taille-sm)}
.pe-ens-statuts{display:flex;gap:6px}
.pe-ens-statut-btn{flex:1;padding:8px 4px;border-radius:var(--rayon-champ);border:1px solid var(--border);background:var(--surface);color:var(--muted);font-weight:700;font-size:var(--taille-xs);cursor:pointer;text-align:center}
.pe-ens-statut-btn[data-statut="PRESENT"].actif{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.pe-ens-statut-btn[data-statut="RETARD"].actif{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.pe-ens-statut-btn[data-statut="ABSENT"].actif{background:var(--red-soft);border-color:var(--red);color:var(--red)}
@media (max-width:900px) and (min-width:601px){
.pe-ens-tableau{display:block;overflow-x:auto}
.pe-ens-ligne-entete,.pe-ens-ligne{width:max-content;min-width:100%}
}
@media (max-width:600px){
.pe-ens-ligne-entete{display:none}
.pe-ens-ligne{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.pe-ens-num{display:none}
.pe-ens-nom{font-weight:700}
.pe-ens-heure{display:flex;align-items:center;justify-content:space-between}
.pe-ens-heure::before{content:"Heure d'arrivée";color:var(--muted);font-weight:700;font-size:var(--taille-2xs);text-transform:uppercase}
.pe-ens-statuts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
}
.pe-ens-side-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px;margin-bottom:18px}
.pe-ens-side-panel h2{margin:0 0 14px;font-size:var(--taille-md);display:flex;align-items:center;gap:8px}
.pe-ens-side-panel h2 svg{width:16px;height:16px;color:var(--amber)}
.pe-ens-action-rapide{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-weight:700;font-size:var(--taille-sm);color:var(--ink-2);cursor:pointer;margin-bottom:10px}
.pe-ens-action-rapide svg{width:16px;height:16px}
.pe-ens-action-rapide.vert{color:var(--green)}
.pe-ens-action-rapide.ambre{color:var(--amber)}
.pe-ens-action-rapide.rouge{color:var(--red)}
.pe-ens-enregistrer{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;background:var(--accent-plein);color:#fff;border:0;border-radius:var(--radius-sm);padding:13px;font-weight:700;font-size:var(--taille-base);cursor:pointer;margin-top:8px}
.pe-ens-enregistrer svg{width:16px;height:16px}
.pe-ens-rappel{display:flex;gap:10px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--radius-lg);padding:16px}
.pe-ens-rappel svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:1px}
.pe-ens-rappel h3{margin:0 0 6px;font-size:var(--taille-base)}
.pe-ens-rappel p{margin:0;font-size:var(--taille-sm);color:var(--ink-2);line-height:1.5}
/* ===================== ÉTUDIANTS EN RETARD (ENSEIGNANT) ===================== */
/* ===================== ACTIVATION DES DEVOIRS (ENSEIGNANT) ===================== */
@media (max-width:700px){
.pc-niveau-badge{}
.pc-niveau-badge::before{}
}
/* ===================== CORRECTION ET NOTATION DES DEVOIRS ===================== */
.cd-etudiant-item.actif{background:var(--accent-soft)}
.cd-feedback-btn.excellent{background:var(--green-soft);color:var(--green)}
.cd-feedback-btn.bien{background:var(--blue-soft);color:var(--blue)}
.cd-feedback-btn.ameliorer{background:var(--amber-soft);color:var(--amber)}
/* ===================== RÉSULTATS & NOTES PAR NIVEAU (ENSEIGNANT) ===================== */
/* ===================== ENSEIGNANT — Synthèse des devoirs et notes ===================== */
.rs-tableau-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.rs-tableau-scroll{overflow-x:auto}
.rs-tableau{width:100%;border-collapse:collapse}
.rs-tableau th{text-align:left;font-size:var(--taille-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:16px 18px;border-bottom:1px solid var(--border);white-space:nowrap}
.rs-tableau td{padding:14px 18px;border-bottom:1px solid var(--border-soft);font-size:var(--taille-base);color:var(--ink-2);white-space:nowrap}
.rs-tableau tbody tr:last-child td{border-bottom:0}
.rs-tableau a{color:var(--accent);font-weight:700;text-decoration:none}
.rs-pays{display:flex;align-items:center;gap:8px}
.rs-drapeau{font-size:var(--taille-md)}
.rs-note-input{width:56px;text-align:center;padding:8px 6px;border:1px solid var(--accent-soft-border);border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--ink);font-weight:700}
.rs-note-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.rs-synthese-pill{display:inline-block;padding:5px 14px;border-radius:var(--radius-pill);font-weight:800;font-size:var(--taille-sm)}
.rs-synthese-pill.ok{background:var(--green-soft);color:var(--green)}
.rs-synthese-pill.neutre{background:var(--blue-soft);color:var(--blue)}
.rs-synthese-vide{color:var(--muted-2)}
.rs-pied{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-top:1px solid var(--border)}
.rs-retour{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:var(--taille-base);text-decoration:none}
.rs-retour svg{width:15px;height:15px}
.rs-astuce{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:var(--taille-sm)}
.rs-astuce svg{width:15px;height:15px;color:var(--amber);flex:none}
@media (max-width:640px){
.rs-tableau th,.rs-tableau td{padding:11px 12px;font-size:var(--taille-sm)}
.rs-pied{flex-direction:column;align-items:flex-start}
}
/* ===================== RÉSULTATS & NOTES PAR NIVEAU (ENSEIGNANT) ===================== */
.rn-entete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.rn-entete h1{font-size:var(--taille-2xl);margin-bottom:4px}
.rn-entete p{color:var(--muted);margin:0}
.rn-graphiques{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px;margin-bottom:20px;align-items:stretch}
@media (max-width:1150px){
.rn-graphiques{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
.rn-graphiques{grid-template-columns:1fr}
}
.rn-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px}
.rn-panel h2{margin:0 0 16px;font-size:var(--taille-md)}
.rn-barres{display:flex;align-items:flex-end;justify-content:space-around;gap:14px;height:180px;padding-top:20px;border-bottom:1px solid var(--border-soft)}
.rn-barre-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;height:100%;justify-content:flex-end}
.rn-barre-valeur{font-size:var(--taille-xs);font-weight:700;color:var(--ink-2)}
.rn-barre{width:34px;border-radius:8px 8px 0 0}
.rn-barre-label{font-size:var(--taille-xs);color:var(--muted);margin-top:8px;text-align:center}
.rn-donut-centre-wrap{display:flex;justify-content:center;margin-bottom:16px}
.rn-donut{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.rn-donut-centre{width:96px;height:96px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.rn-donut-centre strong{font-family:var(--font-display);font-size:var(--taille-xl);color:var(--ink)}
.rn-donut-centre span{font-size:var(--taille-2xs);color:var(--muted)}
.rn-legende-item{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:var(--taille-sm);color:var(--ink-2)}
.rn-legende-puce{width:9px;height:9px;border-radius:50%;flex:none}
.rn-legende-item strong{margin-left:auto}
.rn-resume-ligne{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border-soft);font-size:var(--taille-sm);color:var(--ink-2)}
.rn-resume-ligne:last-child{border-bottom:0}
.rn-resume-ligne.total{font-weight:700;color:var(--ink);padding-top:14px}
.rn-tableau-detail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:20px}
.rn-ligne-entete{display:grid;grid-template-columns:1fr 90px 90px 90px 100px 100px 90px;gap:10px;align-items:center;padding:12px 20px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:var(--taille-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.rn-ligne{display:grid;grid-template-columns:1fr 90px 90px 90px 100px 100px 90px;gap:10px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--border-soft);font-size:var(--taille-sm)}
.rn-ligne.total{background:var(--surface-2);font-weight:700}
.rn-ligne:last-child{border-bottom:0}
@media (max-width:1200px) and (min-width:701px){
.rn-tableau-detail{overflow-x:auto}
.rn-ligne-entete,.rn-ligne{width:max-content;min-width:100%}
}
@media (max-width:700px){
.rn-ligne-entete{display:none}
.rn-ligne{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:14px 16px}
.rn-ligne > span:nth-child(1){grid-column:1/-1;font-weight:700;font-size:var(--taille-base);margin-bottom:2px}
.rn-ligne > span:nth-child(2)::before{content:"Étudiants : "}
.rn-ligne > span:nth-child(3)::before{content:"Moyenne : "}
.rn-ligne > span:nth-child(4)::before{content:"Médiane : "}
.rn-ligne > span:nth-child(5)::before{content:"≥70% : "}
.rn-ligne > span:nth-child(6)::before{content:"50-69% : "}
.rn-ligne > span:nth-child(7)::before{content:"<50% : "}
.rn-ligne > span:nth-child(8){display:none}
.rn-ligne-entete + .rn-ligne, .rn-ligne + .rn-ligne{border-top:1px solid var(--border-soft)}
}
.rn-bandeau{display:flex;gap:10px;background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:20px}
.rn-bandeau svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:1px}
.rn-surveiller-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border-soft)}
.rn-surveiller-item:last-child{border-bottom:0}
.rn-surveiller-icone{width:34px;height:34px;border-radius:var(--rayon-champ);background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;flex:none}
.rn-surveiller-icone svg{width:16px;height:16px}
.rn-surveiller-item strong{display:block;font-size:var(--taille-sm);color:var(--ink)}
.rn-surveiller-item span{display:block;font-size:var(--taille-xs);color:var(--muted)}
.rn-voir-details{display:inline-block;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-champ);padding:5px 12px;font-size:var(--taille-xs);font-weight:700;color:var(--ink-2);text-decoration:none}
.rn-aide-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:20px}
.rn-aide-panel h2{margin:0 0 8px;font-size:var(--taille-base)}
.rn-aide-panel p{margin:0 0 14px;color:var(--muted);font-size:var(--taille-sm);line-height:1.5}
.rn-aide-bouton{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;background:var(--accent-plein);color:#fff;border:0;border-radius:var(--radius-sm);padding:12px;font-weight:700;font-size:var(--taille-sm);text-decoration:none}
.rn-aide-bouton svg{width:15px;height:15px}
/* ===================== SAISIE DE LECTURE (ENSEIGNANT) ===================== */
.ls-champ label .req{color:var(--red)}
.ls-champ.desactive select, .ls-champ.desactive input{color:var(--muted-2);cursor:not-allowed;background:var(--surface-2)}
.ls-etape-num.actif{background:var(--accent-plein);color:#fff}
/* ===================== RESSOURCES (ENSEIGNANT) — variante avec colonne Niveau ===================== */
/* ===================== ANNONCES (ENSEIGNANT) ===================== */
@media (max-width:700px){
.pc-niveau-badge{display:flex;align-items:center;justify-content:space-between}
.pc-niveau-badge::before{content:"Audience";color:var(--muted);font-weight:700;font-size:var(--taille-2xs);text-transform:uppercase}
}
/* ===================== PARAMÈTRES ENSEIGNANT — sessions actives ===================== */
.pae-session{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-soft)}
.pae-session:last-child{border-bottom:0}
.pae-session-icone{width:34px;height:34px;border-radius:var(--rayon-champ);background:var(--border-soft);color:var(--muted-2);display:flex;align-items:center;justify-content:center;flex:none}
.pae-session-icone svg{width:16px;height:16px}
.pae-session strong{display:block;font-size:var(--taille-sm);color:var(--ink)}
.pae-session span{display:block;font-size:var(--taille-xs);color:var(--muted)}
.pae-session .badge{margin-left:auto}
/* ===================== VITRINE — filtres (repris de l'admin pour les pages publiques) ===================== */
.adm-filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.adm-recherche{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px}
.adm-recherche svg{width:15px;height:15px;color:var(--muted);flex:none}
.adm-recherche input{flex:1;background:transparent;border:0;outline:none;color:var(--ink);font-size:var(--taille-base)}
.adm-filtres select{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-2);font-weight:600;font-size:var(--taille-sm)}
/* ===================== VITRINE — rangée horizontale (gauche→droite sur ordinateur) ===================== */
/* ===================== VITRINE — icônes liker / commenter / partager ===================== */
.vt-icones{display:flex;gap:10px;margin:18px 0}
.vt-icone-bouton{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font-size:var(--taille-sm);font-weight:600;cursor:pointer}
.vt-icone-bouton:hover{border-color:var(--accent-soft-border);color:var(--accent)}
.vt-icone-bouton.actif{background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--accent)}
.vt-icone-bouton svg{width:16px;height:16px}
/* ===================== VITRINE — page article avec colonne latérale ===================== */
.vt-article-mise-en-page{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start}
.vt-article-aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:22px}
.vt-article-image{width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:26px}
.vt-auteur-ligne{display:flex;align-items:center;gap:10px}
.vt-auteur-photo{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.vt-auteur-photo-vide{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--taille-sm);flex:none}
@media (max-width:900px){
.vt-article-mise-en-page{grid-template-columns:1fr}
.vt-article-aside{position:static}
}
/* ===================== VITRINE — méta articles (auteur/date/vues/commentaires) ===================== */
.vt-meta-article{display:flex;flex-wrap:wrap;gap:10px;font-size:var(--taille-xs);color:var(--muted);margin-top:8px}
.vt-meta-article span{display:flex;align-items:center;gap:4px}
.vt-meta-article svg{width:13px;height:13px}
/* ===================== VITRINE — sous-titre de page à côté du logo ===================== */
.vt-page-tag{font-size:var(--taille-xs);font-weight:800;letter-spacing:.06em;color:var(--accent);text-transform:uppercase;display:block;margin-top:-2px}
/* ===================== VITRINE — footer réduit (pages hors accueil) ===================== */
.vt-footer-reduit .vt-footer-grille{grid-template-columns:1fr auto;align-items:center}
.vt-footer-reduit .vt-footer-grille > div:not(:first-child):not(:last-child){display:none}
/* ===================== VITRINE — menu mobile (hamburger) ===================== */
.vt-nav{display:flex;align-items:center;gap:22px}
.vt-burger{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--ink)}
.vt-burger svg{width:22px;height:22px}
@media (max-width:900px){
.vt-burger{display:flex}
.vt-nav{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;gap:2px;padding:10px 20px;z-index:50}
.vt-nav.ouvert{display:flex}
.vt-nav a{padding:10px 0;border-bottom:1px solid var(--border-soft)}
.vt-topbar{flex-wrap:nowrap;gap:8px;padding:12px 12px}
.vt-burger{}
.vt-brand{order:0;flex:1;min-width:0;justify-content:center}
.vt-brand span{display:none}
.vt-brand img{height:32px}
.vt-nav-actions{order:1;flex:none;gap:6px}
.vt-nav-actions .btn-sm-outline,.vt-nav-actions .btn{padding:8px 10px;font-size:var(--taille-sm);white-space:nowrap}
.vt-nav-actions .vt-recherche{display:none}
.vt-nav-actions .icon-btn[title="Apparence"]{display:none}
.vt-compte-texte{display:none}
}
/* ===================== VITRINE — grille accueil (extraction + articles à venir) ===================== */
/* ===================== VITRINE — liste extraction : images plus visibles ===================== */
/* ===================== SUIVI — barre publique (non connecté) : menu mobile ===================== */
@media (max-width:900px){
.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;gap:2px;padding:10px 20px;z-index:50;margin-left:0}
.nav-links.ouvert{display:flex}
.nav-links a{padding:10px 0;border-bottom:1px solid var(--border-soft)}
.nav{flex-wrap:nowrap;gap:8px;padding:12px 12px}
.vt-burger{order:-1;flex:none}
.brand-simple{order:0;flex:1;min-width:0;justify-content:center}
.brand-simple-texte{display:none}
.brand-simple .logo-badge{width:32px;height:32px}
.nav-actions{order:1;margin-left:0;flex:none;gap:6px}
.nav-actions .btn-sm-outline,.nav-actions .btn{padding:8px 10px;font-size:var(--taille-xs);white-space:nowrap}
}
/* ===================== VITRINE — page accueil : grille 3 colonnes (Extraction, Responsables) ===================== */
.ac-grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){
.ac-grille-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.ac-grille-3{grid-template-columns:1fr}
}
/* ===================== VITRINE — page d'accueil allégée (Phase 5, point 26) ===================== */
.ac-hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.ac-titre-centre{text-align:center;font-size:var(--taille-2xl);margin-bottom:20px}
.ac-texte-vision{color:var(--ink-2);line-height:1.8;font-size:var(--taille-base);margin:0}
.ac-section-entete{display:flex;justify-content:space-between;align-items:center}
.ac-separateur-gauche{justify-content:flex-start;margin:10px 0 14px}
.ac-sous-titre{font-size:var(--taille-sm);color:var(--muted);margin-bottom:12px}
.ac-pleine-largeur{color:var(--muted);grid-column:1/-1}
.ac-formation-section{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.ac-formation-section .ac-mini-icone{width:52px;height:52px;border-radius:var(--rayon-carte)}
.ac-formation-section .ac-mini-icone svg{width:24px;height:24px}
.ac-formation-section h2{margin:0 0 8px;font-size:var(--taille-lg)}
.ac-formation-section p{color:var(--muted);font-size:var(--taille-base);line-height:1.7;margin:0 0 14px}
@media (max-width:640px){
.ac-formation-section{flex-direction:column}
}
.ac-temoignage,.ac-responsable{display:flex;gap:12px;align-items:flex-start}
.ac-temoignage p{font-style:normal}  /* sept. 2026 : texte droit, plus lisible */
.ac-avatar-temoignage,.ac-avatar-responsable{width:64px;height:64px;border-radius:var(--rayon-champ);object-fit:cover;flex:none}
.ac-nom-responsable{margin:0 0 4px}
.ac-cta-final{text-align:center;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:var(--radius-lg);padding:40px 24px;color:#fff;margin-bottom:20px}
.ac-cta-final h2{color:#fff;margin:0 0 8px;font-size:var(--taille-xl)}
.ac-cta-final p{color:rgba(255,255,255,.85);margin:0 0 18px;font-size:var(--taille-base)}
.ac-cta-final .btn-sm-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.ac-mini-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;text-decoration:none;color:inherit;display:block}
.ac-mini-carte:hover{border-color:var(--accent-soft-border)}
.ac-mini-carte-tete{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ac-mini-icone{width:36px;height:36px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;flex:none}
.ac-mini-icone svg{width:17px;height:17px}
.ac-mini-carte h4{margin:0;font-size:var(--taille-base);line-height:1.35}
.ac-mini-carte p{margin:0;color:var(--muted);font-size:var(--taille-sm);line-height:1.6}
.ac-mini-carte .vt-meta-article{margin-top:10px}
.ac-mini-meta{display:block;margin-top:8px;font-size:var(--taille-xs);color:var(--muted)}
/* ===================== VITRINE — topbar connecté : recherche, cloche/messages avec badge, menu compte ===================== */
.vt-recherche{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;height:36px;box-sizing:border-box;min-width:0;width:180px}
.vt-recherche svg{width:15px;height:15px;color:var(--muted);flex:none}
.vt-recherche input{border:0;background:transparent;outline:none;font-size:var(--taille-sm);color:var(--ink);width:100%;-webkit-appearance:none;appearance:none;height:18px;line-height:18px;padding:0;margin:0}
.vt-recherche input::-webkit-search-cancel-button,
.vt-recherche input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.vt-icone-badge{position:relative}
.vt-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:var(--taille-2xs);font-weight:800;min-width:16px;height:16px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;padding:0 3px}
.vt-compte-menu{position:relative}
.vt-compte-lien{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;text-decoration:none;color:inherit;font:inherit;padding:4px 6px 4px 4px;border-radius:var(--radius-pill)}
.vt-compte-lien:hover{background:var(--surface-2)}
.vt-compte-texte{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.vt-compte-texte strong{font-size:var(--taille-sm)}
.vt-compte-texte span{font-size:var(--taille-2xs);color:var(--muted)}
.vt-compte-lien > svg{width:14px;height:14px;color:var(--muted)}
.vt-compte-panneau{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:190px;padding:8px;z-index:60}
.vt-compte-panneau.ouvert{display:block}
.vt-compte-panneau a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--rayon-champ);color:var(--ink-2);text-decoration:none;font-size:var(--taille-base);font-weight:600}
.vt-compte-panneau a:hover{background:var(--surface-2)}
.vt-compte-panneau a svg{width:15px;height:15px}
.vt-compte-separateur{height:1px;background:var(--border-soft);margin:6px 4px}
.vt-compte-deconnexion{color:var(--red) !important}
@media (max-width:1000px){
.vt-recherche{display:none}
}
/* ===================== VITRINE — page Extraction : bandeau + colonnes Séries/Articles ===================== */
.ex-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:var(--radius-lg);overflow:hidden;padding:36px 40px;margin-bottom:30px;min-height:200px;background:var(--surface-2)}
.ex-hero-fond{position:absolute;inset:0;background:url("/static/suivi/img/extraction-hero.f96ccf4d80db.jpg") center/cover;opacity:1;z-index:0}
.ex-hero-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.5),rgba(255,255,255,.18))}
.ex-hero-gauche{position:relative;z-index:1;max-width:640px;min-width:0;flex:1}
.ex-wordmark{display:block;height:38px;width:auto;flex:none;margin:0 0 14px}
.ex-hero-gauche p{color:var(--ink-2);font-size:var(--taille-base);line-height:1.7;margin:0}
.ex-hero-citation{position:relative;z-index:1;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px 24px;max-width:260px;flex:none}
.ex-hero-guillemet{color:var(--accent);display:block;margin-bottom:8px}
.ex-hero-guillemet svg{width:22px;height:22px}
.ex-hero-citation p{font-weight:700;font-size:var(--taille-base);line-height:1.5;margin:0 0 8px;color:var(--ink)}
.ex-hero-citation cite{font-size:var(--taille-xs);color:var(--muted);font-style:normal}
@media (max-width:760px){
.ex-hero{flex-direction:column}
.ex-hero-citation{max-width:none}
}
.ex-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:960px){
.ex-colonnes{grid-template-columns:1fr}
}
.ex-colonne{padding:22px}
.ex-colonne-entete{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.ex-colonne-icone{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.ex-colonne-icone svg{width:18px;height:18px}
.ex-colonne-entete h2{margin:0 0 2px;font-size:var(--taille-lg)}
.ex-colonne-entete p{margin:0;font-size:var(--taille-sm);color:var(--muted)}
.ex-voir-tout{margin-left:auto;color:var(--accent);font-weight:700;font-size:var(--taille-sm);text-decoration:none;white-space:nowrap}
.ex-filtres{display:flex;gap:10px;margin-bottom:16px}
.ex-filtres .adm-recherche{flex:1;max-width:none}
.ex-filtres select{padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--taille-sm);font-weight:600;color:var(--ink-2)}
.ex-liste{display:flex;flex-direction:column;gap:12px}
.ex-item{display:flex;align-items:center;gap:14px;background:var(--surface-2);border-radius:var(--radius);padding:12px;flex-wrap:wrap}
.ex-item-image{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;flex:none}
.ex-item-image-vide{display:flex;align-items:center;justify-content:center;background:var(--border-soft);color:var(--muted)}
.ex-item-corps{flex:1;min-width:160px}
.ex-item-corps h3{margin:0 0 3px;font-size:var(--taille-base)}
.ex-item-corps p{margin:0;font-size:var(--taille-sm);color:var(--muted);line-height:1.5}
.ex-item-compte{display:flex;align-items:center;gap:5px;font-size:var(--taille-xs);color:var(--muted);margin-top:6px}
.ex-item-compte svg{width:12px;height:12px}
.ex-item-bouton{flex:none;white-space:nowrap}
@media (max-width:520px){
.ex-item{flex-direction:column;align-items:stretch}
.ex-item-bouton{width:100%;text-align:center}
}
/* ===================== VITRINE — commentaires imbriqués (article + extraction) ===================== */
.cm-liste{display:flex;flex-direction:column;gap:16px}
.cm-item{display:flex;gap:12px}
.cm-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--taille-base);flex:none}
img.cm-avatar{object-fit:cover}
.cm-avatar-sm{width:28px;height:28px;font-size:var(--taille-xs)}
.cm-corps{flex:1;min-width:0}
.cm-entete{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cm-entete strong{font-size:var(--taille-base)}
.cm-date{font-size:var(--taille-xs);color:var(--muted)}
.cm-texte{margin:4px 0 6px;font-size:var(--taille-base);color:var(--ink-2);line-height:1.6}
.cm-actions{display:flex;align-items:center;gap:16px}
.cm-like-form{margin:0}
.cm-like{background:none;border:0;padding:0;display:flex;align-items:center;gap:5px;color:var(--muted);font-weight:700;font-size:var(--taille-sm);cursor:pointer}
.cm-like svg{width:14px;height:14px}
.cm-like.actif{color:var(--accent)}
.cm-repondre-btn{background:none;border:0;padding:0;color:var(--accent);font-weight:700;font-size:var(--taille-sm);cursor:pointer}
.cm-reponse-form{display:none;gap:8px;margin-top:10px}
.cm-reponse-form.ouvert{display:flex}
.cm-reponse-form input[type=text]{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--taille-sm)}
.cm-reponses{margin-top:14px;padding-left:16px;border-left:2px solid var(--border-soft);display:flex;flex-direction:column;gap:14px}
/* ===================== VITRINE — panneau "Partager" avec icônes de marque ===================== */
.vt-partage-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0}
.vt-partage-panel > strong{display:flex;align-items:center;gap:9px;font-size:var(--taille-base)}
.vt-partage-panel > strong svg{width:18px;height:18px;color:var(--accent)}
.vt-partage-icones{display:flex;gap:10px}
.vt-partage-icone{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;border:0;cursor:pointer}
.vt-partage-icone svg{width:17px;height:17px}
.vt-partage-icone.whatsapp{background:#25D366}
.vt-partage-icone.facebook{background:#1877F2}
.vt-partage-icone.telegram{background:#29A9EA}
.vt-partage-icone.email{background:#7C3AED}
.vt-partage-icone.lien{background:var(--surface-2);color:var(--ink-2)}
/* ===================== VITRINE — page extraction structurée (verset/résumé/points clés) ===================== */
.ext-mise-en-page{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
@media (max-width:900px){
.ext-mise-en-page{grid-template-columns:1fr}
}
.ext-banniere{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:200px;display:flex;align-items:flex-end;background:linear-gradient(135deg,#334155,#0f172a)}
.ext-banniere-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ext-banniere-voile{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.05))}
.ext-banniere-contenu{position:relative;padding:24px 26px;color:#fff}
.ext-banniere-contenu h1{color:#fff;margin:10px 0 8px;font-size:var(--taille-2xl)}
.ext-banniere-contenu p{margin:0 0 6px;font-size:var(--taille-base);opacity:.92;max-width:560px}
.ext-verset-ref{font-size:var(--taille-sm);opacity:.8}
.ext-banniere-actions{position:absolute;top:16px;right:16px;display:flex;gap:8px}
.ext-rond-btn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2)}
.ext-rond-btn svg{width:16px;height:16px}
.ext-rond-btn:hover{background:#fff;color:var(--accent)}
.ext-rond-btn.actif{background:var(--accent-plein);color:#fff}
.ext-onglets{border-bottom:1px solid var(--border);margin-bottom:4px}
.ext-onglet{display:inline-flex;align-items:center;gap:7px;padding:0 0 12px;font-weight:700;font-size:var(--taille-base);color:var(--accent);border-bottom:2px solid var(--accent)}
.ext-onglet svg{width:15px;height:15px}
.ext-citation{background:var(--accent-soft);border-radius:var(--radius);padding:18px 20px;position:relative}
.ext-citation-guillemet{color:var(--accent);display:block;margin-bottom:6px}
.ext-citation-guillemet svg{width:20px;height:20px}
.ext-citation p{margin:0 0 8px;font-weight:700;font-size:var(--taille-md);color:var(--ink);font-style:italic}
.ext-citation cite{font-size:var(--taille-sm);color:var(--accent);font-weight:700;font-style:normal}
.ext-points-cles{margin-top:22px}
.ext-point{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:var(--taille-base);color:var(--ink-2)}
.ext-point:last-child{border-bottom:0}
.ext-point-icone{color:var(--green);flex:none}
.ext-point-icone svg{width:17px;height:17px}
.ext-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--accent-soft);border-radius:var(--radius-lg);padding:20px 24px;margin:20px 0;flex-wrap:wrap}
.ext-cta-gauche{display:flex;align-items:center;gap:14px}
.ext-cta-icone{width:42px;height:42px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;flex:none}
.ext-cta-icone svg{width:19px;height:19px;color:var(--accent)}
.ext-cta-gauche strong{display:block;font-size:var(--taille-base);margin-bottom:3px}
.ext-cta-gauche p{margin:0;font-size:var(--taille-sm);color:var(--ink-2);max-width:400px}
.ext-info-ligne{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft)}
.ext-info-ligne:last-child{border-bottom:0}
.ext-info-icone{color:var(--accent);flex:none;margin-top:1px}
.ext-info-icone svg{width:15px;height:15px}
.ext-info-ligne span{display:block;font-size:var(--taille-2xs);color:var(--muted)}
.ext-info-ligne strong{font-size:var(--taille-sm)}
.ext-mini-extraction{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit}
.ext-mini-extraction:last-of-type{border-bottom:0}
.ext-mini-extraction.actif strong{color:var(--accent)}
.ext-mini-num{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:var(--taille-xs);flex:none}
.ext-mini-extraction strong{display:block;font-size:var(--taille-sm)}
.ext-mini-extraction span{display:block;font-size:var(--taille-2xs);color:var(--muted);margin-top:2px}
.ext-nav-lien{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;color:inherit;margin-bottom:8px}
.ext-nav-lien:last-child{margin-bottom:0}
.ext-nav-lien.ext-nav-suivant{justify-content:space-between}
.ext-nav-lien svg{width:15px;height:15px;color:var(--muted)}
.ext-nav-lien span{display:block;font-size:var(--taille-2xs);color:var(--muted)}
.ext-nav-lien strong{display:block;font-size:var(--taille-sm);margin-top:2px}
/* ===================== VITRINE — page Formation : hero + stats + témoignages ===================== */
.fo-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:36px;margin-bottom:26px;min-height:260px;display:flex;align-items:flex-start;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--surface-2)}
.fo-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0}
.fo-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.75) 42%,rgba(255,255,255,.25) 75%);z-index:0}
.fo-hero-label{font-size:var(--taille-sm);font-weight:700;color:var(--accent);display:block;margin-bottom:6px;position:relative;z-index:1}
.fo-hero-contenu{position:relative;z-index:1;max-width:520px}
.fo-hero-contenu h1{font-size:var(--taille-2xl);margin:0 0 10px;line-height:1.3}
.fo-hero-contenu p{color:var(--ink-2);font-size:var(--taille-base);line-height:1.7;margin:0 0 16px;max-width:480px}
.fo-hero-citation{position:relative;z-index:1;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 18px;max-width:190px;text-align:right;flex:none}
.fo-hero-citation p{font-size:var(--taille-sm);font-style:italic;color:var(--ink-2);margin:0 0 6px}
.fo-hero-citation cite{font-size:var(--taille-2xs);color:var(--muted);font-style:normal;display:block;margin-bottom:12px}
.fo-hero-devise{font-size:var(--taille-2xs);font-weight:800;letter-spacing:.04em;color:var(--accent);line-height:1.5}
@media (max-width:900px){
.fo-hero{flex-direction:column}
.fo-hero-citation{text-align:left;max-width:none}
.fo-hero::after{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.85) 55%,rgba(255,255,255,.5) 100%)}
}
.fo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:640px){
.fo-stats{grid-template-columns:1fr}
}
.fo-stat-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:26px;text-align:center}
.fo-stat-icone{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.fo-stat-icone svg{width:19px;height:19px}
.fo-stat-carte strong{display:block;font-size:var(--taille-3xl);color:var(--ink);font-family:var(--font-display)}
.fo-stat-carte span{color:var(--muted);font-size:var(--taille-sm);font-weight:600}
@media (max-width:480px){
.fo-stats{gap:10px}
.fo-stat-carte{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 16px}
.fo-stat-icone{margin:0;flex:none}
.fo-stat-carte strong{font-size:var(--taille-xl);display:inline}
.fo-stat-carte span{font-size:var(--taille-sm)}
}
/* ===================== VITRINE — en-tête du panneau commentaires (vignette + titre + compte) ===================== */
.cm-entete-panel{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}
.cm-entete-vignette{width:52px;height:52px;border-radius:var(--rayon-champ);object-fit:cover;flex:none}
.cm-entete-vignette-vide{display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.cm-entete-panel h2{margin:0 0 2px;font-size:var(--taille-md)}
.cm-entete-panel span{font-size:var(--taille-sm);color:var(--muted)}
/* ===================== VITRINE — "Numéros de la série" : grille de petites cartes ===================== */
.ext-numeros-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){
.ext-numeros-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
.ext-numeros-grille{grid-template-columns:1fr}
}
.ext-numero-carte{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;text-decoration:none;color:inherit;display:block}
.ext-numero-carte:hover{border-color:var(--accent-soft-border)}
.ext-numero-badge{position:absolute;top:12px;left:12px;background:var(--surface-2);color:var(--ink-2);font-size:var(--taille-2xs);font-weight:800;padding:4px 9px;border-radius:var(--radius-pill);z-index:1}
.ext-numero-image{display:block;width:100%;height:110px;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:10px}
.ext-numero-image-vide{display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent)}
.ext-numero-carte h3{margin:0 0 5px;font-size:var(--taille-base)}
.ext-numero-carte p{margin:0;font-size:var(--taille-xs);color:var(--muted);line-height:1.55}
@media (max-width:560px){
.ext-numero-image{width:72px;height:72px;margin:0 auto 10px;border-radius:var(--rayon-champ)}
.ext-numero-carte{text-align:center;padding-top:38px}
}
.vt-partage-compte{color:var(--accent);font-weight:700}
/* ===================== MESSAGERIE — zoom de la photo de profil au-dessus de la conversation ===================== */
.photo-agrandie-fond{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:2000;display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.photo-agrandie-image{max-width:min(90vw,420px);max-height:80vh;border-radius:var(--rayon-champ);box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain}
/* ===================== UTILITAIRES (Phase 2, point 9) =====================
   Classes remplaçant les attributs style="" identiques répétés des dizaines de fois
   dans les templates (repérés par fréquence exacte, voir feuille de route). Ne
   remplace que les motifs strictement statiques (valeur figée, jamais dynamique) —
   les styles calculés à partir de données (ex. background-image en url d'une
   photo) restent inline, une classe ne pouvant pas porter une valeur dynamique. */
.mt-0{margin-top:0}
.mt-8{margin-top:8px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.m-0{margin:0}
.mb-0{margin-bottom:0}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.m-6-0{margin:6px 0}
.m-0-0-10{margin:0 0 10px}
.m-0-0-14{margin:0 0 14px}
.fs-11{font-size:var(--taille-2xs)}
.fs-12{font-size:var(--taille-xs)}
.fs-13{font-size:var(--taille-sm)}
.fs-13-5{font-size:var(--taille-base)}
.fs-22{font-size:var(--taille-xl)}
.fs-26{font-size:var(--taille-2xl)}
.fs-12-muted{font-size:var(--taille-xs);color:var(--muted)}
.fs-12-5-ink2{font-size:var(--taille-sm);color:var(--ink-2)}
.fs-11-mt-16{font-size:var(--taille-2xs);margin-top:16px}
.text-muted-13{color:var(--muted);font-size:var(--taille-sm)}
.text-muted{color:var(--muted)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}
.tile-accent{background:var(--accent-soft);color:var(--accent)}
.tile-green{background:var(--green-soft);color:var(--green)}
.tile-blue{background:var(--blue-soft);color:var(--blue)}
.tile-amber{background:var(--amber-soft);color:var(--amber)}
.tile-purple{background:var(--purple-soft);color:var(--purple)}
.skip-link{position:absolute;top:-48px;left:10px;background:var(--accent-plein);color:#fff;padding:10px 18px;border-radius:var(--radius-sm);z-index:1000;text-decoration:none;font-weight:700;transition:top .15s}
.skip-link:focus{top:10px}
.tile-red{background:var(--red-soft);color:var(--red)}
.link-plain{text-decoration:none;color:inherit}
.no-underline{text-decoration:none}
.d-none{display:none}
.d-inline{display:inline}
.flex-gap-8{display:flex;gap:8px}
.flex-gap-10{display:flex;gap:10px}
.flex-between{display:flex;justify-content:space-between}
.flex-1{flex:1}
.justify-center{justify-content:center}
.text-center{text-align:center}
.text-right{text-align:right}
.overflow-x-auto{overflow-x:auto}
.empty-state{padding:30px;text-align:center;color:var(--muted)}
/* Point 7 (audit navigation) — complète le système d'utilitaires ci-dessus avec les
   motifs style="..." en ligne les plus répétés du code (4 occurrences ou plus) trouvés
   lors de l'audit, pour réduire les petites incohérences de marges/tailles qui
   dérivent quand la même intention est retapée à la main à chaque endroit. Les styles
   qui dépendent de données dynamiques (ex. background-image d'une photo) restent
   inline, une classe ne pouvant pas porter une valeur calculée à l'affichage. */
.mt-6{margin-top:6px}
.mt-10{margin-top:10px}
.mt-18{margin-top:18px}
.mb-6{margin-bottom:6px}
.mb-10{margin-bottom:10px}
.mb-14{margin-bottom:14px}
.mb-18{margin-bottom:18px}
.m-0-0-4{margin:0 0 4px}
.m-0-0-6{margin:0 0 6px}
.m-0-0-8{margin:0 0 8px}
.m-16-0{margin:16px 0}
.ml-auto{margin-left:auto}
.fs-12-5{font-size:var(--taille-sm)}
.fs-15{font-size:var(--taille-md)}
.fs-11-mt-10{font-size:var(--taille-2xs);margin-top:10px}
.w-100{width:100%}
.max-w-600{max-width:600px}
.max-w-640{max-width:640px}
.border-0{border:0}
.text-muted-2{color:var(--muted-2)}
.text-amber{color:var(--amber)}
.bg-accent{background:var(--accent-plein)}
.bg-accent-soft{background:var(--accent-soft)}
/* ===================== CHAQAR AI (Phase 5, point 25) ===================== */
.pai-layout{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
.pai-sidebar{margin-top:0;position:sticky;top:90px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:18px}
.pai-nouvelle-form{margin-bottom:18px}
.pai-btn-gradient{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--accent),#8b7cf6);color:#fff;border:0;border-radius:var(--radius-sm);padding:12px 16px;font-weight:800;font-size:var(--taille-base);cursor:pointer;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.pai-btn-gradient:hover{filter:brightness(1.05)}
.pai-historique-titre{display:flex;align-items:center;gap:6px;font-size:var(--taille-xs);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px}
.pai-historique-titre svg{width:14px;height:14px}
.pai-historique{display:flex;flex-direction:column;gap:3px}
.pai-historique-item{position:relative;display:flex;align-items:center;gap:8px;padding:8px 6px 8px 8px;border-radius:var(--rayon-champ)}
.pai-historique-item:hover{background:var(--surface-2)}
.pai-historique-item.actif{background:var(--accent-soft)}
.pai-historique-icone{flex:none;width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center}
.pai-historique-item.actif .pai-historique-icone{background:#fff;color:var(--accent)}
.pai-historique-icone svg{width:15px;height:15px}
.pai-historique-lien{flex:1;min-width:0;text-decoration:none;color:inherit;display:block}
.pai-historique-titre-item{display:block;font-size:var(--taille-base);font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pai-historique-item.actif .pai-historique-titre-item{color:var(--accent)}
.pai-historique-date{display:block;font-size:var(--taille-2xs);color:var(--muted);margin-top:1px}
.pai-historique-vide{font-size:var(--taille-xs);color:var(--muted);padding:6px 10px}
.pai-item-menu{position:relative;flex:none}
.pai-item-menu-bouton{background:none;border:0;padding:5px;border-radius:6px;cursor:pointer;color:var(--muted);display:flex}
.pai-item-menu-bouton:hover{background:var(--border-soft)}
.pai-item-menu-bouton svg{width:15px;height:15px}
.pai-item-menu-panneau{position:absolute;top:calc(100% + 4px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-champ);box-shadow:var(--shadow);padding:5px;min-width:150px;z-index:60;flex-direction:column;gap:1px}
.pai-item-menu-panneau:not(.d-none){display:flex}
.pai-item-menu-panneau button{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--rayon-champ);font-size:var(--taille-sm);font-weight:600;text-align:left;background:none;border:0;cursor:pointer;color:var(--ink);width:100%}
.pai-item-menu-panneau button:hover{background:var(--surface-2)}
.pai-item-menu-panneau button svg{width:14px;height:14px;flex:none;color:var(--muted)}
.pai-item-menu-panneau .pai-danger{color:#b91c1c}
.pai-item-menu-panneau .pai-danger svg{color:#b91c1c}
.pai-main{min-width:0}
.pai-entete{margin-bottom:16px}
.pai-entete h1{margin:0;font-size:var(--taille-2xl)}
.pai-conversation{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px;display:flex;flex-direction:column;gap:18px;min-height:420px}
.pai-msg-user{align-self:flex-end;max-width:80%}
.pai-msg-user-label{font-size:var(--taille-2xs);color:var(--muted);text-align:right;margin-bottom:3px}
.pai-msg-user-bulle{background:linear-gradient(135deg,var(--accent),#8b7cf6);color:#fff;padding:10px 14px;border-radius:14px 14px 4px 14px;font-size:var(--taille-base);line-height:1.55}
.pai-msg-assistant{align-self:flex-start;max-width:88%;width:100%}
.pai-msg-assistant-entete{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.pai-avatar{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#8b7cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--taille-2xs);font-weight:800}
.pai-msg-assistant-label{font-size:var(--taille-2xs);font-weight:800;color:var(--muted);text-transform:uppercase}
.pai-msg-assistant-corps{background:var(--surface-2);border:1px solid var(--border);padding:12px 14px;border-radius:4px 14px 14px 14px;font-size:var(--taille-base);line-height:1.7}
.pai-en-reflexion{color:var(--muted);font-style:italic;display:flex;align-items:center;gap:2px}
.pai-points-reflexion{display:inline-flex;gap:3px;margin-left:2px}
.pai-points-reflexion span{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:pai-rebond 1.1s infinite ease-in-out both}
.pai-points-reflexion span:nth-child(2){animation-delay:.15s}
.pai-points-reflexion span:nth-child(3){animation-delay:.3s}
@keyframes pai-rebond{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.pai-section{margin-top:10px}
.pai-section-titre{font-size:var(--taille-xs);font-weight:700;color:var(--accent);cursor:pointer;display:flex;align-items:center;gap:5px}
.pai-refs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pai-ref{display:inline-flex;padding:5px 10px;border:1px solid var(--accent-soft-border);background:var(--accent-soft);color:var(--accent);border-radius:var(--radius-pill);text-decoration:none;font-size:var(--taille-xs);font-weight:600}
.pai-msg-actions{margin-top:8px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;overflow-x:auto}
.pai-msg-feedback-form{display:contents}
.pai-msg-actions-label{font-size:var(--taille-2xs);color:var(--muted);white-space:nowrap}
.pai-msg-copier{background:none;border:0;cursor:pointer;font-size:var(--taille-2xs);color:var(--muted);font-weight:700;display:flex;align-items:center;gap:4px;padding:4px 8px}
.pai-msg-copier svg{width:13px;height:13px}
/* État vide / accueil — illustration livre + croix + rayons + montagnes */
.pai-empty{text-align:center;padding:6px 10px 10px;flex:1;display:flex;flex-direction:column;justify-content:center}
.pai-hero{position:relative;height:220px;border-radius:var(--rayon-carte);margin:0 auto 22px;max-width:640px;width:100%;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--accent) 14%,white),var(--surface-2) 72%)}
.pai-hero svg{position:absolute;inset:0;width:100%;height:100%}
.pai-empty h2{font-size:var(--taille-xl);font-weight:800;margin:0 0 6px}
.pai-empty p{color:var(--muted);font-size:var(--taille-base);max-width:380px;margin:0 auto 18px}
.pai-suggestions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pai-suggestion{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);color:var(--ink-2);border-radius:var(--radius-pill);padding:9px 16px;font-size:var(--taille-sm);font-weight:600;cursor:pointer}
.pai-suggestion:hover{background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--accent)}
.pai-suggestion svg{width:14px;height:14px;color:var(--accent);flex:none}
/* Barre de saisie en pilule, pièce jointe + champ + bouton d'envoi sur une ligne */
.pai-saisie-fixe{position:sticky;bottom:18px;margin-top:16px;z-index:20}
.pai-formulaire{width:100%;max-width:none;box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow-lg);padding:6px 6px 6px 18px;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px}
.pai-textarea{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:var(--taille-base);font-family:inherit;padding:10px 0;resize:none;max-height:120px;color:var(--ink)}
.pai-envoyer{flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),#8b7cf6);color:#fff;border:0;border-radius:50%;width:38px;height:38px;cursor:pointer}
.pai-envoyer svg{width:16px;height:16px}
.pai-envoyer:hover{filter:brightness(1.05)}
.pai-disclaimer{font-size:var(--taille-xs);color:var(--muted);margin:8px 0 0;text-align:center;background:var(--surface-2);border-radius:var(--radius-pill);padding:4px 10px;display:inline-block}
.pai-sidebar-bouton-mobile{display:none}
.pai-sidebar-fond{display:none}
@media (max-width:900px){
.pai-layout{display:block}
.pai-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;background:var(--surface);z-index:200;padding:20px;overflow-y:auto;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow-lg)}
.pai-sidebar.ouvert{transform:translateX(0)}
.pai-sidebar-fond{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199}
.pai-sidebar-fond.ouvert{display:block}
.pai-sidebar-bouton-mobile{display:flex;align-items:center;gap:6px}
}
/* ==========================================================================
   Lot 1 — messages de l'application (toasts), liens d'en-tête de panneau
   ========================================================================== */
.toasts{position:fixed;top:76px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:14px 12px 14px 16px;animation:toast-entree .22s ease-out}
.toast-icone{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.toast-icone svg{width:16px;height:16px}
.toast-texte{flex:1;margin:5px 0 0;font-size:var(--taille-base);line-height:1.5;font-weight:500}
.toast-fermer{flex:none;width:30px;height:30px;padding:0;border:0;background:transparent;color:var(--muted);border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;cursor:pointer}
.toast-fermer svg{width:15px;height:15px}
.toast-fermer:hover{background:var(--surface-2);color:var(--ink)}
.toast--succes .toast-icone{background:var(--green-soft);color:var(--green)}
.toast--erreur .toast-icone{background:var(--red-soft);color:var(--red)}
.toast--alerte .toast-icone{background:var(--amber-soft);color:var(--amber)}
.toast--info .toast-icone{background:var(--accent-soft);color:var(--accent)}
.toast--sortie{animation:toast-sortie .18s ease-in forwards}
@keyframes toast-entree{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes toast-sortie{to{opacity:0;transform:translateX(12px)}}
/* Variante dans le flux (connexion, inscription) : même composant, sans ombre ni position fixe */
.messages-inline{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.messages-inline .toast{box-shadow:none;animation:none}
.messages-inline .toast--erreur{border-color:var(--red-soft-border)}
.messages-inline .toast--succes{border-color:var(--green-soft-border)}
@media (max-width:700px){
.toasts{top:calc(var(--topbar-h,56px) + 10px);right:12px;left:12px;width:auto}
}
@media (prefers-reduced-motion:reduce){
.toast,.toast--sortie{animation:none}
}
.lch-lien-entete{color:var(--accent);font-size:var(--taille-sm);font-weight:600;text-decoration:none}
.lch-lien-entete:hover{text-decoration:underline}
.lch-verset-jour-ref{color:var(--accent);font-weight:700;font-size:var(--taille-sm)}
.lch-outil-icone:has(span){width:auto;padding:0 12px;gap:6px;white-space:nowrap}
/* Lot 2 — la barre de recherche du haut signale le focus sur tout son contour */
.app-topbar-recherche:focus-within{border-color:var(--accent);box-shadow:var(--focus-anneau)}
.app-topbar-recherche input:focus{box-shadow:none}

/* Inscription étudiant — précision du ministère de consécration (sept. 2026) */
.inscription-ministere{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--accent-soft-border,var(--border));border-radius:var(--rayon-champ,10px);background:var(--accent-soft)}
.inscription-ministere[hidden]{display:none}
.inscription-ministere-libelle{font-weight:700;font-size:var(--taille-sm);color:var(--ink)}
.inscription-ministere-aide{margin:0;font-size:var(--taille-xs);color:var(--muted-2)}
.pa-champ[hidden]{display:none!important}

/* Images agrandissables (vitrine, sept. 2026) — voir agrandir-image.js */
.photo-agrandissable{display:inline-flex;padding:0;border:0;background:none;border-radius:var(--rayon-champ);cursor:zoom-in;flex:none;position:relative}
.photo-agrandissable:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.photo-agrandissable img{display:block}
.photo-agrandissable--bloc{display:block;width:100%}
.agrandi{padding:0;border:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;margin:0}
.agrandi::backdrop{background:rgba(8,10,20,.92)}
.agrandi-figure{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 16px 24px;box-sizing:border-box;cursor:zoom-out}
.agrandi-figure img{max-width:min(100%,1100px);max-height:calc(100dvh - 130px);object-fit:contain;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.45);cursor:default;background:#fff}
.agrandi-figure figcaption{color:#fff;font-weight:600;font-size:var(--taille-sm);text-align:center;max-width:680px}
.agrandi-fermer{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.agrandi-fermer:hover{background:rgba(255,255,255,.26)}
.agrandi-fermer:focus-visible{outline:2px solid #fff;outline-offset:2px}
.agrandi-fermer svg{width:22px;height:22px}
html.agrandi-ouvert{overflow:hidden}
/* Photos des témoignages et des responsables : 44 → 64 px (règle d'origine modifiée plus haut) */
.vt-serie-image-bouton{margin-bottom:20px}
.vt-serie-image{width:100%;max-height:340px;object-fit:cover;border-radius:var(--radius-lg)}
.photo-agrandissable--bloc{border-radius:var(--radius-lg)}
.ac-temoignage-texte{min-width:0}
.ac-temoignage-texte p{margin:0}
.ac-temoignage .ac-mini-meta{font-weight:700;color:var(--ink);font-size:var(--taille-sm)}  /* nom en gras */
.ac-mini-icone.ac-avatar-temoignage{display:flex;align-items:center;justify-content:center}

/* Chaqar AI — réponse écrite progressivement (sept. 2026) */
.pai-en-ecriture{white-space:pre-wrap}
.pai-en-ecriture::after{content:"";display:inline-block;width:.5em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--accent);border-radius:2px;animation:pai-curseur 1s steps(2,start) infinite}
@keyframes pai-curseur{to{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.pai-en-ecriture::after{animation:none}}
.pai-erreur{margin:0;color:var(--red);font-weight:600}
.pai-envoyer[disabled]{opacity:.55;cursor:progress}
/* Texte enrichi des témoignages (sept. 2026) : paragraphes rapprochés, gras conservé */
.ac-temoignage-contenu{min-width:0;overflow-wrap:anywhere}
.ac-temoignage-contenu p{margin:0 0 .6em}
.ac-temoignage-contenu p:last-child{margin-bottom:0}
.vt-texte-riche p{margin:0 0 .7em}