/* ==========================================================================
   Chaqar Academia — composants partagés (lot 3 de la refonte)

   Chargé après style.css et les feuilles d'espace. Toutes les valeurs viennent
   de tokens.css. Préfixe « c- » pour ne jamais entrer en collision avec les
   classes historiques (adm-, tc-, te-, rs-…), qui disparaîtront au fil des
   lots de migration 5 à 8. Catalogue : /suivi/admin/charte/.
   ========================================================================== */

/* ---------- Fil d'Ariane ---------- */
.c-fil{margin:0 0 var(--espace-3)}
.c-fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--espace-1) var(--espace-2);font-size:var(--taille-sm);color:var(--muted)}
.c-fil li{display:inline-flex;align-items:center;gap:var(--espace-2)}
.c-fil a{color:var(--muted);text-decoration:none;border-radius:4px}
.c-fil a:hover{color:var(--accent)}
.c-fil svg{width:14px;height:14px;color:var(--muted-2);flex:none}
.c-fil [aria-current="page"]{color:var(--ink);font-weight:var(--graisse-forte)}

/* ---------- En-tête de page ---------- */
.c-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--espace-4);flex-wrap:wrap;margin:0 0 var(--espace-6)}
.c-entete-texte{min-width:0;flex:1 1 320px}
.c-entete h1{margin:0}
.c-entete p{margin:var(--espace-1) 0 0;color:var(--muted);font-size:var(--taille-base);max-width:68ch}
.c-entete-actions{display:flex;align-items:center;gap:var(--espace-2);flex-wrap:wrap}

/* ---------- Boutons ---------- */
.c-bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--espace-2);
  min-height:40px;padding:0 var(--espace-4);border:1px solid transparent;border-radius:var(--rayon-champ);
  font:inherit;font-size:var(--taille-base);font-weight:var(--graisse-forte);line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;width:auto;margin:0;
  transition:background-color var(--duree-rapide) var(--courbe),border-color var(--duree-rapide) var(--courbe),color var(--duree-rapide) var(--courbe);
}
.c-bouton svg{width:16px;height:16px;flex:none}
.c-bouton--primaire{background:var(--accent-plein);color:var(--on-accent)}
.c-bouton--primaire:hover{background:var(--accent-plein-survol);color:var(--on-accent)}
.c-bouton--secondaire{background:var(--surface);color:var(--ink);border-color:var(--border)}
.c-bouton--secondaire:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--ink) 18%,var(--border))}
.c-bouton--discret{background:transparent;color:var(--ink-2)}
.c-bouton--discret:hover{background:var(--surface-2);color:var(--ink)}
.c-bouton--danger{background:var(--surface);color:var(--red);border-color:var(--red-soft-border)}
.c-bouton--danger:hover{background:var(--red-soft)}
.c-bouton--sm{min-height:34px;padding:0 var(--espace-3);font-size:var(--taille-sm)}
.c-bouton--sm svg{width:15px;height:15px}
.c-bouton--icone{padding:0;width:40px}
.c-bouton--icone.c-bouton--sm{width:34px}
.c-bouton:disabled,.c-bouton[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

/* ---------- Carte / panneau ---------- */
.c-carte{background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);box-shadow:var(--ombre-1);padding:var(--espace-5);min-width:0}
.c-carte + .c-carte{margin-top:var(--espace-4)}
.c-carte-entete{display:flex;align-items:center;justify-content:space-between;gap:var(--espace-3);margin:0 0 var(--espace-4)}
.c-carte-entete h2{display:flex;align-items:center;gap:var(--espace-2);margin:0;font-size:var(--taille-md);font-weight:var(--graisse-forte)}
.c-carte-icone{display:inline-flex;color:var(--accent)}
.c-carte-icone svg{width:18px;height:18px}
.c-carte-lien{font-size:var(--taille-sm);font-weight:var(--graisse-forte);color:var(--accent);text-decoration:none;white-space:nowrap}
.c-carte-lien:hover{text-decoration:underline}
.c-carte-corps{color:var(--ink-2);font-size:var(--taille-base);line-height:var(--interligne)}
.c-carte-corps > :first-child{margin-top:0}
.c-carte-corps > :last-child{margin-bottom:0}

/* ---------- Grilles de mise en page ---------- */
.c-grille-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--espace-4);margin:0 0 var(--espace-6)}
.c-grille-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--espace-4);align-items:start}
.c-grille-2 > .c-carte + .c-carte{margin-top:0}

/* ---------- Carte statistique ---------- */
.c-stat{display:flex;align-items:center;gap:var(--espace-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);box-shadow:var(--ombre-1);padding:var(--espace-4) var(--espace-5);color:inherit;text-decoration:none;min-width:0}
a.c-stat:hover{border-color:var(--accent-soft-border);box-shadow:var(--ombre-2)}
.c-stat-icone{flex:none;width:40px;height:40px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;background:var(--c-ton-fond);color:var(--c-ton)}
.c-stat-icone svg{width:19px;height:19px}
.c-stat-texte{display:flex;flex-direction:column;min-width:0}
.c-stat-libelle{font-size:var(--taille-sm);color:var(--muted);line-height:var(--interligne-serre)}
.c-stat-valeur{font-size:var(--taille-xl);font-weight:var(--graisse-titre);color:var(--ink);line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums}
.c-stat-detail{font-size:var(--taille-xs);color:var(--muted);margin-top:2px}

/* Tons partagés (stat, pastilles…) */
.c-ton-accent{--c-ton:var(--accent);--c-ton-fond:var(--accent-soft)}
.c-ton-vert{--c-ton:var(--green);--c-ton-fond:var(--green-soft)}
.c-ton-ambre{--c-ton:var(--amber);--c-ton-fond:var(--amber-soft)}
.c-ton-rouge{--c-ton:var(--red);--c-ton-fond:var(--red-soft)}
.c-ton-bleu{--c-ton:var(--blue);--c-ton-fond:var(--blue-soft)}
.c-ton-violet{--c-ton:var(--purple);--c-ton-fond:var(--purple-soft)}
.c-ton-neutre{--c-ton:var(--muted);--c-ton-fond:var(--border-soft)}

/* ---------- Barre de filtres ---------- */
.c-filtres{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:var(--espace-3);max-width:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);padding:var(--espace-4);margin:0 0 var(--espace-4)}
.c-champ{display:flex;flex-direction:column;gap:6px;font-weight:var(--graisse-normale);flex:1 1 180px;min-width:0;margin:0}
.c-champ--recherche{flex:2 1 240px}
.c-champ-libelle{font-size:var(--taille-xs);font-weight:var(--graisse-forte);color:var(--ink-2)}
.c-champ :is(input,select){font-weight:var(--graisse-normale);color:var(--ink);width:100%;box-sizing:border-box;min-height:40px;padding:0 var(--espace-3);font-size:var(--taille-base);border-radius:var(--rayon-champ)}
.c-champ-saisie{position:relative;display:block}
.c-champ-saisie svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.c-champ.c-champ .c-champ-saisie input{padding-left:36px}
.c-filtres-reinit{flex:none}

/* ---------- État vide ---------- */
.c-vide{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--espace-2);padding:var(--espace-10) var(--espace-6)}
.c-vide-icone{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted);margin-bottom:var(--espace-1)}
.c-vide-icone svg{width:20px;height:20px}
.c-vide-titre{margin:0;font-size:var(--taille-md);font-weight:var(--graisse-forte);color:var(--ink)}
.c-vide-texte{margin:0;font-size:var(--taille-base);color:var(--muted);max-width:52ch}
.c-vide .c-bouton{margin-top:var(--espace-2)}

/* ---------- Tableau ---------- */
.c-tableau{background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);overflow-x:auto;-webkit-overflow-scrolling:touch}
.c-carte .c-tableau{border:0;border-radius:0;margin:0 calc(-1 * var(--espace-5)) calc(-1 * var(--espace-5))}
.c-tableau table{width:100%;border-collapse:collapse;font-size:var(--taille-sm);color:var(--ink-2)}
.c-tableau th{text-align:left;text-transform:none;letter-spacing:0;font-size:var(--taille-xs);font-weight:var(--graisse-forte);color:var(--muted);background:var(--surface-2);padding:var(--espace-3) var(--espace-4);border-bottom:1px solid var(--border);white-space:nowrap}
.c-tableau td{padding:var(--espace-3) var(--espace-4);border-bottom:1px solid var(--border-soft);vertical-align:middle}
.c-tableau tbody tr:last-child td{border-bottom:0}
.c-tableau tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.c-tableau .c-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-tableau .c-actions{text-align:right;white-space:nowrap}
.c-tableau td strong{color:var(--ink);font-weight:var(--graisse-forte)}
@media (max-width:700px){
  .c-tableau--cartes table,.c-tableau--cartes tbody,.c-tableau--cartes tr,.c-tableau--cartes td{display:block;width:100%}
  .c-tableau--cartes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .c-tableau--cartes tr{padding:var(--espace-3) var(--espace-4);border-bottom:1px solid var(--border-soft)}
  .c-tableau--cartes tr:last-child{border-bottom:0}
  .c-tableau--cartes td{display:flex;justify-content:space-between;gap:var(--espace-4);padding:6px 0;border:0;text-align:right}
  .c-tableau--cartes td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:var(--taille-xs);font-weight:var(--graisse-forte);text-align:left}
  .c-tableau--cartes td.c-actions{justify-content:flex-end}
}

/* ---------- Pastilles de statut (badges) ---------- */
.c-pastille{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--rayon-pilule);font-size:var(--taille-xs);font-weight:var(--graisse-forte);background:var(--c-ton-fond);white-space:nowrap}

/* ==========================================================================
   Corrections globales liées aux composants
   ========================================================================== */

/* Champs avec icône (barres de filtres historiques) : certaines règles de page
   (ex. .pc-filtre-champ input{padding:8px 10px}) écrasaient le retrait gauche,
   et l'icône recouvrait le début du texte (« …chercher un cours »). */
.champ-avec-icone.champ-avec-icone :is(input,select){padding-left:38px}

/* Texte réservé aux lecteurs d'écran */
.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Recherche rapide (lot 4) ---------- */
.palette{width:min(640px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 120px));margin:12vh auto auto;padding:0;border:1px solid var(--border);border-radius:var(--rayon-carte);background:var(--surface);color:var(--ink);box-shadow:var(--ombre-3);overflow:hidden}
.palette[open]{display:flex;flex-direction:column;animation:palette-entree var(--duree) var(--courbe)}
.palette::backdrop{background:rgba(15,17,23,.38);backdrop-filter:blur(2px)}
@keyframes palette-entree{from{opacity:0;transform:translateY(-6px) scale(.99)}to{opacity:1;transform:none}}
.palette-saisie{display:flex;align-items:center;gap:var(--espace-3);padding:0 var(--espace-4);border-bottom:1px solid var(--border);flex:none}
.palette-saisie > svg{width:18px;height:18px;color:var(--muted);flex:none}
.palette-saisie input{flex:1;border:0;background:transparent;box-shadow:none;height:54px;padding:0;font-size:var(--taille-md);color:var(--ink);min-width:0}
.palette-saisie input:focus{outline:none;box-shadow:none;border:0}
.palette kbd{font:inherit;font-size:var(--taille-2xs);font-weight:var(--graisse-forte);color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 6px;white-space:nowrap}
.palette-liste{overflow-y:auto;padding:var(--espace-2);flex:1}
.palette-groupe{font-size:var(--taille-xs);font-weight:var(--graisse-forte);color:var(--muted);padding:var(--espace-3) var(--espace-3) var(--espace-1)}
.palette-element{display:flex;align-items:baseline;justify-content:space-between;gap:var(--espace-3);padding:10px var(--espace-3);border-radius:var(--rayon-champ);color:var(--ink);text-decoration:none;font-size:var(--taille-base)}
.palette-element small{color:var(--muted);font-size:var(--taille-xs);white-space:nowrap}
.palette-element[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.palette-element[aria-selected="true"] small{color:var(--accent)}
.palette-message{margin:0;padding:var(--espace-4) var(--espace-3);color:var(--muted);font-size:var(--taille-sm)}
.palette-pied{display:flex;align-items:center;gap:var(--espace-4);padding:10px var(--espace-4);border-top:1px solid var(--border);font-size:var(--taille-xs);color:var(--muted);flex:none}
.palette-pied span{display:inline-flex;align-items:center;gap:4px}
.palette-pied a{margin-left:auto;color:var(--accent);font-weight:var(--graisse-forte);text-decoration:none}
@media (max-width:700px){.palette{margin-top:8px;max-height:calc(100vh - 16px)}.palette-pied span{display:none}}
/* Raccourci affiché dans la barre de recherche du haut */
.app-topbar-recherche kbd{font:inherit;font-size:var(--taille-2xs);font-weight:var(--graisse-forte);color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 6px;margin-left:auto;white-space:nowrap}
@media (max-width:900px){.app-topbar-recherche kbd{display:none}}

/* ---------- Onglets de sous-pages (lot 4) ---------- */
.c-onglets{display:flex;gap:var(--espace-1);border-bottom:1px solid var(--border);margin:0 0 var(--espace-5);overflow-x:auto;scrollbar-width:none}
.c-onglets::-webkit-scrollbar{display:none}
.c-onglets a{position:relative;padding:10px var(--espace-3);font-size:var(--taille-sm);font-weight:var(--graisse-forte);color:var(--muted);text-decoration:none;white-space:nowrap;border-radius:var(--rayon-champ) var(--rayon-champ) 0 0}
.c-onglets a:hover{color:var(--ink);background:var(--surface-2)}
.c-onglets a[aria-current="page"]{color:var(--accent)}
.c-onglets a[aria-current="page"]::after{content:"";position:absolute;left:var(--espace-3);right:var(--espace-3);bottom:-1px;height:2px;border-radius:2px;background:var(--accent-plein)}

/* ---------- Cellules de tableau (lot 5) ---------- */
.c-cellule-titre{display:flex;align-items:center;gap:var(--espace-3);min-width:220px}
.c-vignette{flex:none;width:36px;height:36px;border-radius:var(--rayon-champ);display:flex;align-items:center;justify-content:center;background:var(--c-ton-fond);color:var(--c-ton)}
.c-vignette svg{width:17px;height:17px}
.c-cellule-titre strong{display:block;color:var(--ink);font-weight:var(--graisse-forte);font-size:var(--taille-sm)}
.c-cellule-titre small{display:block;color:var(--muted);font-size:var(--taille-xs);margin-top:2px}
.c-sous-ligne{display:block;color:var(--muted);font-size:var(--taille-xs)}
.c-tableau .c-actions{display:table-cell}
.c-actions-groupe{display:inline-flex;align-items:center;gap:var(--espace-1);justify-content:flex-end}
.c-actions-groupe form{display:inline-flex;margin:0;max-width:none;flex-direction:row}
.c-bouton .c-pastille{padding:1px 7px;margin-left:2px}
@media (max-width:700px){.c-tableau--cartes .c-cellule-titre{min-width:0}.c-tableau--cartes td:first-child{display:block;text-align:left;padding-bottom:var(--espace-2)}.c-tableau--cartes td:first-child::before{display:none}}

/* ---------- Étapes « Comment ça fonctionne » (lot 5) ---------- */
.c-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--espace-4);margin:0;padding:0;list-style:none}
.c-etapes li{display:flex;gap:var(--espace-3);align-items:flex-start}
.c-etapes .c-vignette{--c-ton:var(--accent);--c-ton-fond:var(--accent-soft)}
.c-etapes strong{display:block;color:var(--ink);font-size:var(--taille-sm);font-weight:var(--graisse-forte)}
.c-etapes p{margin:2px 0 0;color:var(--muted);font-size:var(--taille-sm)}
.c-bloc{margin-top:var(--espace-6)}
.c-texte-danger{color:var(--red)}.c-texte-danger:hover{background:var(--red-soft);color:var(--red)}

/* ---------- Mise en page contenu + colonne latérale (lot 5) ---------- */
.c-mise-en-page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--espace-5);align-items:start}
.c-mise-en-page > aside{display:flex;flex-direction:column;gap:var(--espace-4)}
.c-mise-en-page > aside > .c-carte + .c-carte{margin-top:0}
@media (max-width:1440px){.c-mise-en-page{grid-template-columns:minmax(0,1fr)}.c-mise-en-page > aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}

/* ---------- Barre de progression ---------- */
.c-progres{display:flex;flex-direction:column;gap:4px;min-width:120px}
.c-progres-barre{height:6px;border-radius:var(--rayon-pilule);background:var(--border-soft);overflow:hidden}
.c-progres-barre > span{display:block;height:100%;width:var(--pct,0%);background:var(--accent-plein);border-radius:inherit}
.c-progres small{font-size:var(--taille-xs);color:var(--muted)}

/* ---------- Anneau de répartition ---------- */
.c-anneau-bloc{display:flex;align-items:center;gap:var(--espace-5)}
.c-anneau{flex:none;width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--green) 0 var(--a,0%),var(--amber) var(--a,0%) var(--b,0%),var(--border-soft) var(--b,0%) 100%)}
.c-anneau-centre{width:70px;height:70px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center}
.c-anneau-centre strong{font-size:var(--taille-lg);color:var(--ink);line-height:1.1}
.c-anneau-centre span{font-size:var(--taille-2xs);color:var(--muted)}
.c-legende{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--taille-sm);color:var(--ink-2)}
.c-legende li{display:flex;align-items:center;gap:var(--espace-2)}
.c-puce{width:9px;height:9px;border-radius:50%;background:var(--c-ton);flex:none}

/* ---------- Listes simples dans une carte ---------- */
.c-liste{list-style:none;margin:0;padding:0}
.c-liste > li{display:flex;gap:var(--espace-3);align-items:flex-start;padding:var(--espace-3) 0;border-bottom:1px solid var(--border-soft)}
.c-liste > li:first-child{padding-top:0}
.c-liste > li:last-child{border-bottom:0;padding-bottom:0}
.c-liste strong{display:block;color:var(--ink);font-size:var(--taille-sm);font-weight:var(--graisse-forte)}
.c-liste p{margin:2px 0 0;color:var(--ink-2);font-size:var(--taille-sm)}
.c-liste time,.c-liste small{display:block;color:var(--muted);font-size:var(--taille-xs);margin-top:2px}
.c-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:var(--taille-sm);font-weight:var(--graisse-forte)}
.c-liens{display:flex;flex-direction:column;gap:2px;margin:0 calc(-1 * var(--espace-2))}
.c-liens a{display:flex;align-items:center;gap:var(--espace-3);padding:9px var(--espace-2);border-radius:var(--rayon-champ);color:var(--ink-2);text-decoration:none;font-size:var(--taille-sm);font-weight:var(--graisse-moyenne)}
.c-liens a:hover{background:var(--surface-2);color:var(--ink)}
.c-liens svg{width:17px;height:17px;color:var(--muted)}
.c-grand-chiffre{font-size:var(--taille-2xl);font-weight:var(--graisse-titre);color:var(--ink);line-height:1.1}
.c-libelle-discret{font-size:var(--taille-sm);color:var(--muted)}
.c-nowrap{white-space:nowrap}
img.c-avatar{object-fit:cover;background:var(--surface-2)}
.c-avatar--md{width:38px;height:38px}
/* Liste de métriques libellé / valeur */
.c-metriques{list-style:none;margin:0;padding:0}
.c-metriques li{display:flex;align-items:center;justify-content:space-between;gap:var(--espace-3);padding:10px 0;border-bottom:1px solid var(--border-soft);font-size:var(--taille-sm);color:var(--ink-2)}
.c-metriques li:first-child{padding-top:0}
.c-metriques li:last-child{border-bottom:0;padding-bottom:0}
.c-metriques span{display:inline-flex;align-items:center;gap:var(--espace-2)}
.c-metriques svg{width:16px;height:16px;color:var(--muted)}
.c-metriques strong{color:var(--ink);font-weight:var(--graisse-forte);font-variant-numeric:tabular-nums}
.c-resume{display:flex;align-items:baseline;gap:var(--espace-2);margin:0 0 var(--espace-4)}
.c-resume strong{font-size:var(--taille-2xl);font-weight:var(--graisse-titre);color:var(--c-ton,var(--ink));line-height:1}
.c-resume span{font-size:var(--taille-sm);color:var(--muted)}
.c-champ :is(input[type="date"]){min-width:170px}
.c-flex-1{flex:1;min-width:0}.c-champ.c-champ--etroit{flex:0 1 220px}

/* ---------- Fil de notifications (lot 5) ---------- */
.c-jour{margin:var(--espace-5) 0 var(--espace-2);font-size:var(--taille-xs);font-weight:var(--graisse-forte);color:var(--muted)}
.c-jour:first-of-type{margin-top:0}
.c-fil-notifs{background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);overflow:hidden}
.c-notif{display:flex;gap:var(--espace-3);align-items:flex-start;padding:var(--espace-4);border-bottom:1px solid var(--border-soft);color:inherit;text-decoration:none}
.c-notif:last-child{border-bottom:0}
a.c-notif:hover{background:var(--surface-2)}
.c-notif--non-lue{background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}
.c-notif-corps{flex:1;min-width:0}
.c-notif-corps strong{display:block;font-size:var(--taille-sm);color:var(--ink);font-weight:var(--graisse-forte)}
.c-notif-corps p{margin:2px 0 0;font-size:var(--taille-sm);color:var(--ink-2)}
.c-notif-heure{display:inline-flex;align-items:center;gap:6px;font-size:var(--taille-xs);color:var(--muted);white-space:nowrap}
.c-point{width:8px;height:8px;border-radius:50%;background:var(--accent-plein)}

/* ---------- Actions rapides, séances, citation (lot 5) ---------- */
.c-actions-rapides{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--espace-3)}
.c-action{display:flex;align-items:center;gap:var(--espace-3);padding:var(--espace-4);border:1px solid var(--border);border-radius:var(--rayon-carte);background:var(--surface);color:inherit;text-decoration:none}
.c-action:hover{border-color:var(--accent-soft-border);box-shadow:var(--ombre-2)}
.c-action strong{display:block;font-size:var(--taille-sm);color:var(--ink);font-weight:var(--graisse-forte)}
.c-action small{display:block;font-size:var(--taille-xs);color:var(--muted);margin-top:2px}
.c-date-bloc{flex:none;width:46px;border-radius:var(--rayon-champ);background:var(--accent-soft);color:var(--accent);text-align:center;padding:6px 0;line-height:1.1}
.c-date-bloc small{display:block;font-size:var(--taille-2xs);font-weight:var(--graisse-forte);text-transform:uppercase;letter-spacing:.04em;margin:0;color:inherit}
.c-date-bloc strong{display:block;font-size:var(--taille-lg);color:inherit}
.c-citation{margin:0;line-height:var(--interligne-lecture);color:var(--ink-2)}
.c-citation cite{display:block;margin-top:var(--espace-3);font-style:normal;font-size:var(--taille-sm);color:var(--muted)}
.c-grille-2 + .c-grille-2,.c-grille-2 + .c-carte,.c-carte + .c-grille-2{margin-top:var(--espace-4)}
.c-carte .c-cellule-titre{min-width:0}.c-carte .c-tableau th,.c-carte .c-tableau td{padding-left:var(--espace-3);padding-right:var(--espace-3)}.c-carte .c-tableau th:first-child,.c-carte .c-tableau td:first-child{padding-left:var(--espace-5)}
.c-tableau th.c-num{text-align:right}

/* ---------- Utilitaires (lot 5) : remplacent les styles en ligne ---------- */
.u-vide-texte.u-vide-texte.u-vide-texte{padding:var(--espace-6);text-align:center;color:var(--muted);font-size:var(--taille-sm)}
.u-taille-36.u-taille-36.u-taille-36{width:36px;height:36px;font-size:var(--taille-sm)}
.u-taille-48.u-taille-48.u-taille-48{width:48px;height:48px}
.u-taille-56.u-taille-56.u-taille-56{width:56px;height:56px}
.u-titre-panneau.u-titre-panneau.u-titre-panneau{font-size:var(--taille-md);font-weight:var(--graisse-forte);margin:0 0 var(--espace-3)}
.u-aide.u-aide.u-aide{color:var(--muted);font-size:var(--taille-sm);margin:var(--espace-1) 0 var(--espace-3)}
.u-bloc.u-bloc.u-bloc{display:block}
.u-image-couvrante.u-image-couvrante.u-image-couvrante{width:100%;height:100%;object-fit:cover}
.u-apercu-media.u-apercu-media.u-apercu-media{width:100%;aspect-ratio:16/9;border-radius:var(--rayon-champ);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:var(--espace-3)}
.u-mt-2.u-mt-2.u-mt-2{margin-top:var(--espace-2)}.u-mt-5.u-mt-5.u-mt-5{margin-top:var(--espace-5)}.u-mt-6.u-mt-6.u-mt-6{margin-top:var(--espace-6)}
.u-largeur-lecture.u-largeur-lecture.u-largeur-lecture{max-width:720px}
.u-largeur-etroite.u-largeur-etroite.u-largeur-etroite{max-width:320px;margin-bottom:var(--espace-3)}
.u-auto.u-auto.u-auto{width:auto}
.u-case.u-case.u-case{display:flex;flex-direction:row;align-items:center;gap:var(--espace-2);cursor:pointer;font-weight:var(--graisse-moyenne)}
.u-pleine-largeur.u-pleine-largeur.u-pleine-largeur{width:100%}
.u-ligne.u-ligne.u-ligne{display:flex;flex-direction:row;gap:6px;margin:0;max-width:none}
.u-centre-large.u-centre-large.u-centre-large{text-align:center;padding:var(--espace-12) var(--espace-5)}
.u-libelle.u-libelle.u-libelle{display:block;font-weight:var(--graisse-forte);font-size:var(--taille-sm);color:var(--ink-2);margin-bottom:var(--espace-2)}
.u-intro.u-intro.u-intro{color:var(--muted);margin:6px 0 var(--espace-5)}
.u-meta.u-meta.u-meta{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--taille-base);margin-bottom:4px}
.u-texte.u-texte.u-texte{color:var(--ink-2);font-size:var(--taille-base);margin:0;line-height:var(--interligne)}
.u-titre-profil.u-titre-profil.u-titre-profil{font-size:var(--taille-lg);margin:0 0 6px;display:flex;align-items:center;gap:9px}
.pa-panneau .theme-switch-btns{padding:2px}
.pa-panneau .theme-switch-btns button{padding:5px 11px}
.c-stat-valeur{overflow-wrap:anywhere}

/* ---------- Cartes de contenu en grille (lot 6) ---------- */
.c-grille-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--espace-4)}
.c-carte-contenu{display:flex;flex-direction:column;gap:var(--espace-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);box-shadow:var(--ombre-1);padding:var(--espace-5);min-width:0}
.c-carte-contenu-tete{display:flex;align-items:flex-start;gap:var(--espace-3)}
.c-carte-contenu h3{margin:0;font-size:var(--taille-md);font-weight:var(--graisse-forte);color:var(--ink);line-height:var(--interligne-serre)}
.c-carte-contenu .c-sous-ligne a{color:inherit;text-decoration:underline;text-decoration-color:var(--border)}
.c-carte-contenu p.c-resume-texte{margin:0;color:var(--ink-2);font-size:var(--taille-sm);line-height:var(--interligne);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c-carte-contenu-pied{margin-top:auto;display:flex;gap:var(--espace-2);flex-wrap:wrap;padding-top:var(--espace-2)}
/* Ligne cliquable (liste de devoirs) */
.c-lignes{background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);overflow:hidden}
.c-ligne{display:flex;align-items:center;gap:var(--espace-3);padding:var(--espace-4);border-bottom:1px solid var(--border-soft);color:inherit;text-decoration:none}
.c-ligne:last-child{border-bottom:0}
a.c-ligne:hover{background:var(--surface-2)}
.c-ligne strong{display:block;font-size:var(--taille-sm);color:var(--ink);font-weight:var(--graisse-forte)}
.c-ligne small{display:block;font-size:var(--taille-xs);color:var(--muted);margin-top:2px}
.c-ligne > svg:last-child{width:16px;height:16px;color:var(--muted-2);flex:none}
/* Accordéon (leçons) */
.c-accordeon{background:var(--surface);border:1px solid var(--border);border-radius:var(--rayon-carte);overflow:hidden}
.c-accordeon details{border-bottom:1px solid var(--border-soft)}
.c-accordeon details:last-child{border-bottom:0}
.c-accordeon summary{display:flex;align-items:center;gap:var(--espace-3);padding:var(--espace-4) var(--espace-5);cursor:pointer;list-style:none;font-weight:var(--graisse-forte);color:var(--ink);font-size:var(--taille-base)}
.c-accordeon summary::-webkit-details-marker{display:none}
.c-accordeon summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform var(--duree) var(--courbe)}
.c-accordeon details[open] summary::after{transform:rotate(-135deg)}
.c-accordeon summary:hover{background:var(--surface-2)}
.c-accordeon summary small{font-weight:var(--graisse-normale);color:var(--muted);font-size:var(--taille-sm)}
.c-accordeon-corps{padding:0 var(--espace-5) var(--espace-5);color:var(--ink-2);line-height:var(--interligne-lecture);font-size:var(--taille-base)}
/* Réglages on/off dans une carte */
.c-form-reglages{display:flex;flex-direction:column;max-width:none;gap:0;margin:0}
.c-reglage{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--espace-3);padding:10px 0;border-bottom:1px solid var(--border-soft);font-weight:var(--graisse-moyenne);font-size:var(--taille-sm);color:var(--ink-2);cursor:pointer}
.c-reglage:last-child{border-bottom:0}
.c-reglage span{display:inline-flex;align-items:center;gap:var(--espace-2)}
.c-reglage svg{width:16px;height:16px;color:var(--muted)}
.c-reglage input{width:auto;margin:0;accent-color:var(--accent)}

/* ---------- Action prioritaire (tableau de bord étudiant, lot 6) ---------- */
.c-priorite{display:flex;align-items:center;gap:var(--espace-4);padding:var(--espace-5);margin:0 0 var(--espace-6);border-radius:var(--rayon-carte);background:var(--accent-soft);border:1px solid var(--accent-soft-border);color:inherit;text-decoration:none}
.c-priorite:hover{border-color:var(--accent)}
.c-priorite .c-vignette{width:48px;height:48px;background:var(--surface);color:var(--accent)}
.c-priorite .c-vignette svg{width:22px;height:22px}
.c-priorite-surtitre{display:block;font-size:var(--taille-xs);font-weight:var(--graisse-forte);color:var(--accent)}
.c-priorite strong{display:block;font-size:var(--taille-lg);color:var(--ink);margin-top:2px;font-weight:var(--graisse-forte)}
.c-priorite p{margin:2px 0 0;color:var(--ink-2);font-size:var(--taille-sm)}
.c-priorite .c-bouton{margin-left:auto;flex:none}
@media (max-width:640px){.c-priorite{flex-wrap:wrap}.c-priorite .c-bouton{margin-left:0;width:100%}}
.c-parcours{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espace-2);font-size:var(--taille-sm);color:var(--ink-2);margin:0 0 var(--espace-3)}
.c-parcours svg{width:15px;height:15px;color:var(--muted)}
.c-parcours a{color:var(--accent);font-weight:var(--graisse-forte);text-decoration:none}
.c-titre-section{font-size:var(--taille-lg);margin:var(--espace-8) 0 var(--espace-4)}.u-lien-discret.u-lien-discret.u-lien-discret{color:inherit;text-decoration:none}.u-lien-discret:hover{color:var(--accent)}
/* Onglets côté client (boutons) */
.c-onglets button{position:relative;padding:10px var(--espace-3);font:inherit;font-size:var(--taille-sm);font-weight:var(--graisse-forte);color:var(--muted);background:transparent;border:0;border-radius:var(--rayon-champ) var(--rayon-champ) 0 0;cursor:pointer;min-height:0;width:auto;margin:0}
.c-onglets button:hover{color:var(--ink);background:var(--surface-2)}
.c-onglets button[aria-selected="true"]{color:var(--accent)}
.c-onglets button[aria-selected="true"]::after{content:"";position:absolute;left:var(--espace-3);right:var(--espace-3);bottom:-1px;height:2px;border-radius:2px;background:var(--accent-plein)}
/* Histogramme simple */
.c-histo{display:flex;align-items:flex-end;gap:var(--espace-3);height:140px;padding-top:var(--espace-2)}
.c-histo-barre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.c-histo-barre > span{display:block;width:100%;max-width:44px;height:var(--h,0%);min-height:2px;background:var(--accent-soft-border);border-radius:6px 6px 2px 2px}
.c-histo-barre:last-child > span{background:var(--accent-plein)}
.c-histo-barre small{font-size:var(--taille-2xs);color:var(--muted)}
/* Utilitaires complémentaires (lot 6) */
.u-ml-1.u-ml-1.u-ml-1{margin-left:6px;vertical-align:middle}
.u-actions-droite.u-actions-droite.u-actions-droite{display:flex;flex-direction:row;justify-content:flex-end;margin-top:10px;max-width:none}
.u-mb-1.u-mb-1.u-mb-1{margin-bottom:4px}.u-mb-3.u-mb-3.u-mb-3{margin-bottom:var(--espace-3)}.u-mb-6.u-mb-6.u-mb-6{margin-bottom:var(--espace-6)}
.u-muet.u-muet.u-muet{color:var(--muted);margin:0}
.u-taille-90.u-taille-90.u-taille-90{width:90px;height:90px}
.u-l-130.u-l-130.u-l-130{width:130px}
.u-plat.u-plat.u-plat{box-shadow:none;border-color:var(--border)}
.u-lecture.u-lecture.u-lecture{line-height:var(--interligne-lecture);color:var(--ink-2)}
.u-taille-md.u-taille-md.u-taille-md{font-size:var(--taille-md)}
.u-titre-lg.u-titre-lg.u-titre-lg{font-size:var(--taille-lg);margin:0 0 var(--espace-3)}
.u-titre-base.u-titre-base.u-titre-base{font-size:var(--taille-base);margin:0 0 var(--espace-2)}
.u-gap-4.u-gap-4.u-gap-4{gap:var(--espace-4)}
.u-cliquable.u-cliquable.u-cliquable{cursor:pointer;color:var(--ink-2)}
.u-accent.u-accent.u-accent{color:var(--accent)}.u-rouge.u-rouge.u-rouge{color:var(--red)}
.u-gras.u-gras.u-gras{font-weight:var(--graisse-forte)}
.u-encadre-accent.u-encadre-accent.u-encadre-accent{border:1px solid var(--accent-soft-border);background:var(--accent-soft)}
.u-inerte.u-inerte.u-inerte{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);cursor:default}
.u-lien-bouton.u-lien-bouton.u-lien-bouton{background:none;border:0;cursor:pointer;padding:4px 0;width:auto;min-height:0;font-weight:var(--graisse-forte)}
.u-lien-bouton:hover{background:none;text-decoration:underline}
.u-lien-bouton.u-rouge:hover{color:var(--red)}.u-lien-bouton.u-accent:hover{color:var(--accent)}
.c-stat-valeur--texte{font-size:var(--taille-md);font-weight:var(--graisse-forte);line-height:var(--interligne-serre);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c-nuance-choix{width:22px;height:22px;min-height:0;border-radius:6px;background:var(--c);border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.c-nuance-choix:hover{background:var(--c)}.c-nuance-choix[aria-pressed="true"]{border-color:var(--ink)}
@media (max-width:640px){.c-grille-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--espace-3)}.c-stat{flex-direction:column;align-items:flex-start;gap:var(--espace-2);padding:var(--espace-3) var(--espace-4)}.c-stat-icone{width:34px;height:34px}.c-stat-valeur{font-size:var(--taille-lg)}}

/* ---------- Boutons historiques alignés sur c-bouton (lot 7) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--espace-2);min-height:40px;padding:0 var(--espace-4);border-radius:var(--rayon-champ);font-weight:var(--graisse-forte);font-size:var(--taille-base);line-height:1;color:var(--on-accent)}
.btn svg,.btn-sm-outline svg{width:16px;height:16px;flex:none}
.btn-sm-outline{display:inline-flex;align-items:center;justify-content:center;gap:var(--espace-2);min-height:36px;padding:0 var(--espace-3);border-radius:var(--rayon-champ);color:var(--ink);font-weight:var(--graisse-forte);font-size:var(--taille-sm);text-decoration:none;line-height:1}
.btn-sm-outline:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--ink) 18%,var(--border))}
.btn-sm-outline.teacher{color:var(--accent)}

/* ---------- Grilles complémentaires et section (lot 7) ---------- */
.c-grille-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--espace-4);align-items:start}
.c-grille-3 > .c-carte + .c-carte{margin-top:0}
.c-grille-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--espace-3)}
.c-section{margin-top:var(--espace-8)}
.c-section > h2.c-section-titre{display:flex;align-items:center;justify-content:space-between;gap:var(--espace-3);flex-wrap:wrap;font-size:var(--taille-lg);margin:0 0 var(--espace-4)}
.c-valeur-cle{display:flex;flex-direction:column;gap:2px;padding:var(--espace-3) var(--espace-4);border:1px solid var(--border-soft);border-radius:var(--rayon-champ);background:var(--surface-2)}
.c-valeur-cle span{font-size:var(--taille-xs);color:var(--muted)}
.c-valeur-cle strong{font-size:var(--taille-base);color:var(--ink)}
.c-carte--alerte{border-color:var(--amber-soft-border)}
.c-carte--danger{border-color:var(--red-soft-border)}
.c-note{font-size:var(--taille-xs);color:var(--muted);margin:var(--espace-3) 0 0}
.u-mb-4.u-mb-4.u-mb-4{margin-bottom:var(--espace-4)}
.u-grille-2.u-grille-2.u-grille-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--espace-3)}
@media (max-width:640px){.u-grille-2.u-grille-2.u-grille-2{grid-template-columns:1fr}}
.u-cellule.u-cellule.u-cellule{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-soft)}
.u-cellule-entete.u-cellule-entete.u-cellule-entete{font-size:var(--taille-xs);font-weight:var(--graisse-forte);color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.u-ligne-liste.u-ligne-liste.u-ligne-liste{padding:10px 0;border-bottom:1px solid var(--border-soft)}
.u-petit.u-petit.u-petit{font-size:var(--taille-xs);color:var(--ink-2)}
.u-py-2.u-py-2.u-py-2{padding:var(--espace-2) 0}.u-mr-1.u-mr-1.u-mr-1{margin-right:var(--espace-1)}.u-p-0.u-p-0.u-p-0{padding:0}
.u-table.u-table.u-table{width:100%;border-collapse:collapse}

/* ---------- Police de lecture (lot 8) : texte biblique et citations ---------- */
.lch-verset > span,.lch-verset-jour p,.verset-card p,.c-citation{font-family:var(--font-lecture)}
.lch-verset > span{font-size:1.0625em;line-height:1.8;color:var(--ink)}
.verset-card p{font-style:normal}
.c-citation{font-size:var(--taille-lg)}

/* ---------- Utilitaires générés (lot 8) : remplacent les déclarations en ligne,
   espacements alignés sur la grille de 4 px. Sélecteur triplé : ils doivent
   primer sur les règles de page, comme le faisaient les styles en ligne. ---------- */
.u-centre-v.u-centre-v.u-centre-v{align-items:center}
.u-champ.u-champ.u-champ{width:100%;min-height:40px;border:1px solid var(--border);border-radius:var(--rayon-champ);padding:0 var(--espace-3);background:var(--surface);color:var(--ink);box-sizing:border-box}
.u-colonne.u-colonne.u-colonne{flex-direction:column}
.u-cols-2.u-cols-2.u-cols-2{grid-template-columns:1fr 1fr}
.u-demi-gras.u-demi-gras.u-demi-gras{font-weight:var(--graisse-forte)}
.u-encre.u-encre.u-encre{color:var(--ink)}
.u-encre-2.u-encre-2.u-encre-2{color:var(--ink-2)}
.u-entre.u-entre.u-entre{justify-content:space-between}
.u-flex.u-flex.u-flex{display:flex}
.u-flex-inline.u-flex-inline.u-flex-inline{display:inline-flex}
.u-fs-2xl.u-fs-2xl.u-fs-2xl{font-size:var(--taille-2xl)}
.u-fs-2xs.u-fs-2xs.u-fs-2xs{font-size:var(--taille-2xs)}
.u-fs-3xl.u-fs-3xl.u-fs-3xl{font-size:var(--taille-3xl)}
.u-fs-base.u-fs-base.u-fs-base{font-size:var(--taille-base)}
.u-fs-lg.u-fs-lg.u-fs-lg{font-size:var(--taille-lg)}
.u-fs-md.u-fs-md.u-fs-md{font-size:var(--taille-md)}
.u-fs-sm.u-fs-sm.u-fs-sm{font-size:var(--taille-sm)}
.u-fs-xl.u-fs-xl.u-fs-xl{font-size:var(--taille-xl)}
.u-fs-xs.u-fs-xs.u-fs-xs{font-size:var(--taille-xs)}
.u-gap-1.u-gap-1.u-gap-1{gap:var(--espace-1)}
.u-gap-2.u-gap-2.u-gap-2{gap:var(--espace-2)}
.u-gap-3.u-gap-3.u-gap-3{gap:var(--espace-3)}
.u-grille.u-grille.u-grille{display:grid}
.u-haut.u-haut.u-haut{align-items:flex-start}
.u-hmin-100.u-hmin-100.u-hmin-100{min-height:100px}
.u-hmin-110.u-hmin-110.u-hmin-110{min-height:110px}
.u-hmin-120.u-hmin-120.u-hmin-120{min-height:120px}
.u-hmin-130.u-hmin-130.u-hmin-130{min-height:130px}
.u-hmin-140.u-hmin-140.u-hmin-140{min-height:140px}
.u-hmin-150.u-hmin-150.u-hmin-150{min-height:150px}
.u-hmin-170.u-hmin-170.u-hmin-170{min-height:170px}
.u-hmin-40.u-hmin-40.u-hmin-40{min-height:40px}
.u-hmin-42.u-hmin-42.u-hmin-42{min-height:42px}
.u-hmin-44.u-hmin-44.u-hmin-44{min-height:44px}
.u-italique.u-italique.u-italique{font-style:italic}
.u-lh-lecture.u-lh-lecture.u-lh-lecture{line-height:var(--interligne-lecture)}
.u-libelle-champ.u-libelle-champ.u-libelle-champ{display:block;font-size:var(--taille-xs);font-weight:var(--graisse-forte);color:var(--muted);margin-bottom:6px}
.u-m-0.u-m-0.u-m-0{margin:0}
.u-mb-0.u-mb-0.u-mb-0{margin-bottom:0}
.u-mb-2.u-mb-2.u-mb-2{margin-bottom:var(--espace-2)}
.u-mb-5.u-mb-5.u-mb-5{margin-bottom:var(--espace-5)}
.u-min-0.u-min-0.u-min-0{min-width:0}
.u-ml-0.u-ml-0.u-ml-0{margin-left:0}
.u-ml-2.u-ml-2.u-ml-2{margin-left:var(--espace-2)}
.u-ml-3.u-ml-3.u-ml-3{margin-left:var(--espace-3)}
.u-mt-0.u-mt-0.u-mt-0{margin-top:0}
.u-mt-1.u-mt-1.u-mt-1{margin-top:var(--espace-1)}
.u-mt-3.u-mt-3.u-mt-3{margin-top:var(--espace-3)}
.u-mt-4.u-mt-4.u-mt-4{margin-top:var(--espace-4)}
.u-muted.u-muted.u-muted{color:var(--muted)}
.u-mx-0.u-mx-0.u-mx-0{margin-left:0;margin-right:0}
.u-my-3.u-my-3.u-my-3{margin-top:var(--espace-3);margin-bottom:var(--espace-3)}
.u-my-4.u-my-4.u-my-4{margin-top:var(--espace-4);margin-bottom:var(--espace-4)}
.u-pad-0.u-pad-0.u-pad-0{padding:0}
.u-pad-1.u-pad-1.u-pad-1{padding:var(--espace-1)}
.u-pad-2.u-pad-2.u-pad-2{padding:var(--espace-2)}
.u-pad-3.u-pad-3.u-pad-3{padding:var(--espace-3)}
.u-pad-4.u-pad-4.u-pad-4{padding:var(--espace-4)}
.u-pointeur.u-pointeur.u-pointeur{cursor:pointer}
.u-px-0.u-px-0.u-px-0{padding-left:0;padding-right:0}
.u-px-1.u-px-1.u-px-1{padding-left:var(--espace-1);padding-right:var(--espace-1)}
.u-px-2.u-px-2.u-px-2{padding-left:var(--espace-2);padding-right:var(--espace-2)}
.u-px-3.u-px-3.u-px-3{padding-left:var(--espace-3);padding-right:var(--espace-3)}
.u-px-4.u-px-4.u-px-4{padding-left:var(--espace-4);padding-right:var(--espace-4)}
.u-px-5.u-px-5.u-px-5{padding-left:var(--espace-5);padding-right:var(--espace-5)}
.u-py-0.u-py-0.u-py-0{padding-top:0;padding-bottom:0}
.u-py-1.u-py-1.u-py-1{padding-top:var(--espace-1);padding-bottom:var(--espace-1)}
.u-py-3.u-py-3.u-py-3{padding-top:var(--espace-3);padding-bottom:var(--espace-3)}
.u-py-4.u-py-4.u-py-4{padding-top:var(--espace-4);padding-bottom:var(--espace-4)}
.u-py-8.u-py-8.u-py-8{padding-top:var(--espace-8);padding-bottom:var(--espace-8)}
.u-sans-souligne.u-sans-souligne.u-sans-souligne{text-decoration:none}
.u-texte-centre.u-texte-centre.u-texte-centre{text-align:center}
.u-wrap.u-wrap.u-wrap{flex-wrap:wrap}
.u-flex-1.u-flex-1.u-flex-1{flex:1;min-width:0}
/* Utilitaires complémentaires (lot 8 — vitrine) */
.u-texte-centre{text-align:center}.u-couvrir{object-fit:cover}.u-min-0{min-width:0}
.u-max-420{max-width:420px}.u-max-460{max-width:460px}.u-max-520{max-width:520px}.u-max-1080{max-width:1080px}.u-max-aucune{max-width:none}
.u-centre-bloc{margin-left:auto;margin-right:auto}.u-pb-0{padding-bottom:0}.u-petit-fort{font-size:var(--taille-sm);font-weight:var(--graisse-forte)}
.u-texte-lecture{line-height:var(--interligne-lecture);font-size:var(--taille-md);color:var(--ink)}
.ac-carte-lien{display:block;margin-top:var(--espace-3);font-size:var(--taille-sm);font-weight:var(--graisse-forte);color:var(--accent);text-decoration:none}.ac-carte-lien:hover{text-decoration:underline}

/* Lot 9 — contrastes (audit WCAG 2 AA) */
a.btn,a.btn:hover,a.btn:visited{color:var(--on-accent)}
.c-pastille{color:color-mix(in srgb,var(--c-ton) 80%,var(--ink))}
/* Badges et actions teintées : même règle que les pastilles (texte assombri en
   thème clair, éclairci en thème sombre) pour atteindre 4,5:1 (audit lot 9). */
.badge.ok{color:color-mix(in srgb,var(--green) 80%,var(--ink))}
.badge.warn,.badge.danger{color:color-mix(in srgb,var(--red) 80%,var(--ink))}
.badge.alerte{color:color-mix(in srgb,var(--amber) 72%,var(--ink))}
.pe-ens-action-rapide.vert{color:color-mix(in srgb,var(--green) 80%,var(--ink))}
.pe-ens-action-rapide.ambre{color:color-mix(in srgb,var(--amber) 62%,var(--ink))}

/* ==========================================================================
   c-depot — zone de dépôt de fichiers (lot 3, sept. 2026)
   Construite par depot-fichiers.js autour de chaque <input type="file">.
   ========================================================================== */
.c-depot{position:relative;display:flex;flex-direction:column;gap:10px;font-weight:400;min-width:0}
.c-depot-input.c-depot-input{position:absolute;inset:auto auto 0 0;width:1px;height:1px;min-width:0;padding:0;border:0;margin:0;opacity:0;pointer-events:none}
.c-depot-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  padding:22px 16px;border:1.5px dashed var(--border);border-radius:var(--rayon-carte,14px);background:var(--surface-2);
  color:var(--ink-2);cursor:pointer;transition:border-color .15s,background .15s}
.c-depot-zone:hover,.c-depot--survol .c-depot-zone{border-color:var(--accent);background:var(--accent-soft)}
.c-depot-icone{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-soft);color:var(--accent);margin-bottom:4px}
.c-depot-icone svg{width:22px;height:22px}
.c-depot-titre{margin:0;font-weight:700;color:var(--ink);font-size:var(--taille-sm)}
.c-depot-ou{margin:0;font-size:var(--taille-xs);color:var(--muted-2)}
.c-depot-bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 16px;margin-top:2px;
  border:1px solid var(--border);border-radius:var(--rayon-champ,10px);background:var(--surface);color:var(--ink);
  font-weight:700;font-size:var(--taille-sm);cursor:pointer}
.c-depot-bouton:hover{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.c-depot-bouton:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.c-depot-bouton svg{width:18px;height:18px}
.c-depot-aide{margin:6px 0 0;font-size:var(--taille-xs);color:var(--muted-2)}
.c-depot--survol .c-depot-titre{color:var(--accent)}
.c-depot-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.c-depot-liste:empty{display:none}
.c-depot-fichier{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:1px solid var(--border);border-radius:var(--rayon-champ,10px);background:var(--surface);cursor:default}
.c-depot-vignette{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--accent-soft);color:var(--accent);overflow:hidden}
.c-depot-vignette svg{width:18px;height:18px}
.c-depot-vignette img{width:100%;height:100%;object-fit:cover}
.c-depot-fichier-texte{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.c-depot-fichier-nom{font-weight:600;color:var(--ink);font-size:var(--taille-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-depot-fichier-taille{font-size:var(--taille-xs);color:var(--muted-2)}
.c-depot-retirer{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted-2);cursor:pointer}
.c-depot-retirer:hover{background:var(--red-soft);color:var(--red)}
.c-depot-retirer:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.c-depot-retirer svg{width:18px;height:18px}
.c-depot-erreur{margin:0;padding:8px 10px;border-radius:8px;background:var(--red-soft);color:var(--red);font-size:var(--taille-xs);font-weight:600}
/* Variante compacte (cellule de tableau) : bouton + nom, sans grande zone. */
.c-depot--compact{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
.c-depot--compact .c-depot-zone{padding:0;border:0;background:none;cursor:default}
.c-depot--compact .c-depot-zone:hover{background:none}
.c-depot--compact .c-depot-bouton{min-height:34px;padding:6px 10px;margin:0;font-size:var(--taille-xs)}
.c-depot--compact.c-depot--rempli .c-depot-bouton{display:none}
.c-depot--compact .c-depot-fichier{padding:4px 4px 4px 8px;max-width:220px}
.c-depot--compact .c-depot-vignette{display:none}
.c-depot--invalide .c-depot-zone{border-color:var(--red);background:var(--red-soft)}

/* Bloc « Sur cet appareil » (Paramètres › Notifications) — lot 3 */
.pa-push-appareil{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;margin-top:10px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--rayon-champ,10px);background:var(--surface-2)}
.pa-push-appareil-texte{display:flex;align-items:flex-start;gap:10px;min-width:0;flex:1 1 220px}
.pa-push-appareil-texte>svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--muted-2)}
.pa-push-appareil-texte strong{display:block;font-size:var(--taille-sm);color:var(--ink)}
.pa-push-appareil-texte span{display:block;font-size:var(--taille-xs);color:var(--muted-2);line-height:1.45}
.pa-push-appareil[data-etat="desactiver"] .pa-push-appareil-texte>svg{color:var(--green)}
.pa-push-appareil .c-bouton{flex:none}

/* Anneau de progression — centrage du pourcentage (sept. 2026). « du programme »
   passait sur deux lignes alignées à gauche et débordait du disque intérieur,
   décentrant l'ensemble. Texte centré, sur une ligne, taille ajustée au disque. */
.c-anneau-centre{text-align:center;padding:0 4px;box-sizing:border-box;gap:1px}
.c-anneau-centre strong{white-space:nowrap;letter-spacing:-.01em}
.c-anneau.c-anneau{width:108px;height:108px}
.c-anneau-centre.c-anneau-centre{width:82px;height:82px}
.c-anneau-centre.c-anneau-centre span{display:block;max-width:100%;font-size:10.5px;line-height:1.15;white-space:nowrap}