/* Trame — styles propres à l'application.
 *
 * Chargé après studyos-tokens.css et studyos-components.css.
 * Règle : aucune couleur, taille, espacement, rayon, ombre ou durée en dur.
 * Toute valeur vient d'une variable de studyos-tokens.css.
 */

/* ==========================================================
   0. Socle
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }
button { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
h1[tabindex="-1"]:focus { outline: none; }
.cache-visuel, .sr-only {
  position: absolute !important; width: var(--size-filet); height: var(--size-filet);
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: calc(-1 * var(--size-filet));
}
html.calque-ouvert { overflow: hidden; }
.sans-js { padding: var(--s-6); font: var(--t-body); }
[hidden] { display: none !important; }

/* La marque : le signe et le mot. Le mot change de teinte avec le thème. */
.marque { display: inline-flex; align-items: center; gap: var(--s-2); }
.marque__signe { width: var(--size-signe); height: auto; }
.marque__mot { width: var(--size-mot); height: auto; }
.marque__mot--sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marque__mot--clair { display: none; }
  :root:not([data-theme="light"]) .marque__mot--sombre { display: inline; }
}
:root[data-theme="dark"] .marque__mot--clair { display: none; }
:root[data-theme="dark"] .marque__mot--sombre { display: inline; }

.mascotte { --mx-taille: var(--size-max-visage-grand); margin: 0 auto; }
.mascotte--vide { --mx-taille: var(--size-max-visage-vide); }

/* ==========================================================
   1. La coquille
   ========================================================== */
.sty-app { background: var(--c-page); }
.coquille-centre { min-height: 100vh; min-height: 100dvh; }
.coquille-defilement { flex: 1 1 auto; min-width: 0; }
.coquille-vue { min-height: 100%; }
.vue-nue { min-height: 100vh; min-height: 100dvh; width: 100%; }

/* barre latérale */
.coquille-laterale {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto;
  padding-top: var(--s-4);
}
.coquille-marque { display: flex; align-items: center; padding: 0 var(--s-2) var(--s-4); }
.coquille-marque .marque__signe { width: var(--size-avatar); }
.coquille-marque .marque__mot { width: var(--size-rail); }
.coquille-recherche {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--size-touch); padding: 0 var(--s-3); margin-bottom: var(--s-3);
  border: var(--size-filet) solid var(--c-line-strong); border-radius: var(--r-xl);
  background: var(--c-card); color: var(--c-ink-3); font: var(--t-ui); letter-spacing: var(--tr-ui);
}
.coquille-recherche span { flex: 1; }
.coquille-raccourci { font: var(--t-micro); letter-spacing: var(--tr-micro); color: var(--c-ink-3); }
.coquille-liste { display: flex; flex-direction: column; gap: var(--s-1); }
.coquille-separation { margin: var(--s-3) var(--s-2); }
.coquille-section { display: block; padding: var(--s-2) var(--s-3) var(--s-2); }
.coquille-ressort { flex: 1 1 auto; min-height: var(--s-4); }
.nav-mot { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-compteur:empty { display: none; }
.coquille-pied {
  display: flex; align-items: center; gap: var(--s-2);
  border-top: var(--size-filet) solid var(--c-line); padding: var(--s-3) var(--s-2) 0;
}
.coquille-profil {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3);
  height: var(--size-touch); padding: 0 var(--s-2); border-radius: var(--r-lg);
  font: var(--t-ui); font-weight: 500; color: var(--c-ink);
}
.coquille-profil[aria-current="page"] { background: var(--c-accent-soft); }
.coquille-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coquille-pied .sty-icon-btn { color: var(--c-ink-2); }
.coquille-pied .sty-icon-btn[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-accent-text); }
/* sous-navigation d'un cours (chapitres) */
.sous-nav-chapitre {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--s-10); padding: var(--s-2) var(--s-3); border-radius: var(--r-lg);
  font: var(--t-ui); color: var(--c-ink-2);
}
.sous-nav-chapitre__n { font: var(--t-small); font-weight: 600; color: var(--c-ink-3); min-width: var(--s-3); }
.sous-nav-chapitre[aria-current="page"] { background: var(--c-tile); color: var(--c-ink); font-weight: 600; }
.sous-nav-chapitre[aria-current="page"] .sous-nav-chapitre__n { color: var(--c-ink); }
@media (hover: hover) and (pointer: fine) { .sous-nav-chapitre:hover:not([aria-current="page"]) { background: var(--c-tile); } }

/* rail */
.coquille-rail { position: sticky; top: 0; height: 100vh; height: 100dvh; }
.coquille-rail__signe { display: flex; justify-content: center; padding-bottom: var(--s-3); }
.coquille-rail__signe img { width: var(--size-avatar); height: auto; }
.coquille-rail .sty-nav-item { position: relative; }
.rail-point {
  position: absolute; top: var(--s-1); right: var(--s-1);
  min-width: var(--size-icone-sm); height: var(--size-icone-sm); padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: var(--c-bouton); color: var(--c-on-accent);
  font: var(--t-micro); display: inline-flex; align-items: center; justify-content: center;
}
.coquille-rail__profil { display: inline-flex; padding: var(--s-2); border-radius: var(--r-pill); }

/* barre inférieure (mobile) */
@media (max-width: 767px) {
  .coquille-centre { min-height: 100vh; min-height: 100dvh; }
  .coquille-defilement { padding-bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom, var(--s-5))); }
  .coquille-onglets {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--size-tabbar) + env(safe-area-inset-bottom, var(--s-5)));
    padding-bottom: env(safe-area-inset-bottom, var(--s-5));
  }
  .coquille--plein .coquille-onglets { display: none; }
  .coquille--plein .coquille-defilement { padding-bottom: 0; }
}
.coquille-onglets .sty-tabbar__item { min-height: var(--size-touch); justify-content: center; }
.coquille-onglets .sty-fab { margin-top: calc(-1 * var(--s-5)); }

/* panneau contextuel */
.coquille-panneau { overflow-y: auto; }
@media (min-width: 1280px) { .coquille-panneau { position: sticky; top: 0; height: 100vh; height: 100dvh; } }
.coquille-tiroir {
  display: none;
  position: fixed; top: var(--s-4); right: var(--s-3); z-index: 25;
  width: var(--size-touch); height: var(--size-touch);
  align-items: center; justify-content: center;
  border: var(--size-filet) solid var(--c-line); border-radius: var(--r-lg);
  background: var(--c-card); color: var(--c-ink-2); box-shadow: var(--shadow-default); cursor: pointer;
}
@media (max-width: 1279px) {
  .coquille-panneau {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 20;
    transform: translateX(100%); transition: transform var(--d-sheet) var(--ease-drawer), visibility 0s linear var(--d-sheet);
    visibility: hidden;
  }
  .coquille--tiroir-ouvert .coquille-panneau { transition: transform var(--d-sheet) var(--ease-drawer); }
  .coquille--tiroir-ouvert .coquille-panneau { transform: none; visibility: visible; }
  .coquille--panneau .coquille-tiroir { display: inline-flex; }
}
/* Tablette et téléphone : la poignée du panneau est une languette collée au bord droit, à mi-hauteur,
   dans une gouttière réservée : elle ne recouvre plus les boutons des en-têtes. */
@media (max-width: 1279px) {
  .coquille-tiroir { top: 50%; bottom: auto; right: 0; width: var(--size-touch); height: calc(var(--size-touch) * 1.6); margin-top: calc(var(--size-touch) * -0.8);
    border: 0; background: transparent; box-shadow: none; justify-content: flex-end; padding: 0; border-radius: 0; }
  .coquille-tiroir::before { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--size-languette); border-radius: var(--r-lg) 0 0 var(--r-lg);
    background: var(--c-card); border: var(--size-filet) solid var(--c-line); border-right: 0; box-shadow: var(--shadow-default); transition: width var(--d-rapide) var(--ease-sortie); }
  .coquille-tiroir .sty-icon { position: relative; width: var(--size-icone-sm); height: var(--size-icone-sm); margin-right: calc((var(--size-languette) - var(--size-icone-sm)) / 2); }
  .coquille-tiroir:hover::before, .coquille-tiroir:focus-visible::before { width: calc(var(--size-languette) + var(--s-1)); }
  .coquille-tiroir:focus-visible { outline: none; }
  .coquille-tiroir:focus-visible::before { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: 2px; }
  .coquille--tiroir-ouvert .coquille-tiroir { right: var(--size-panel); }
  .coquille--panneau .coquille-defilement { padding-right: var(--size-languette); }
}
/* Téléphone : la languette est plus fine et tient dans la marge du contenu ; quand le panneau
   (feuille du bas) est ouvert, elle se pose sur son bord haut, à droite. */
@media (max-width: 767px) {
  .coquille-tiroir { --size-languette: var(--size-languette-mobile); }
  .coquille--panneau .coquille-defilement { padding-right: 0; }
  .coquille--tiroir-ouvert .coquille-tiroir { right: 0; top: auto; bottom: calc(80vh - var(--size-touch) * 0.8); margin-top: 0; }
}
@media (max-width: 767px) {
  .coquille-panneau { top: auto; height: auto; max-height: 80vh; border-radius: var(--r-2xl) var(--r-2xl) 0 0; transform: translateY(100%); }
  .coquille--tiroir-ouvert .coquille-panneau { transform: none; }
}
.panneau-corps { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); }
.panneau-section + .panneau-section { border-top: var(--size-filet) solid var(--c-line); padding-top: var(--s-5); }
.panneau-section > .sty-section-label { display: block; margin-bottom: var(--s-3); }
.panneau-ligne {
  display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2) 0;
  font: var(--t-ui); color: var(--c-ink);
}
.panneau-ligne .sty-icon { margin-top: var(--s-1); color: var(--c-ink-2); }
.panneau-ligne__meta { display: block; font: var(--t-small); color: var(--c-ink-3); }
.panneau-onglets { padding: 0 var(--s-5); position: sticky; top: 0; background: var(--c-card); z-index: 1; }
.panneau-pied { position: sticky; bottom: 0; padding: var(--s-4) var(--s-5) var(--s-5); background: var(--c-card); border-top: var(--size-filet) solid var(--c-line); }
.panneau-pied .sty-help { display: block; text-align: center; margin-top: var(--s-2); }

/* bandeau hors ligne */
.bandeau-hors-ligne {
  position: sticky; top: 0; z-index: 70;
  padding: var(--s-3) var(--s-4);
  background: var(--c-warn-soft); border-bottom: var(--size-filet) solid var(--c-line);
  color: var(--c-ink); font: var(--t-ui); letter-spacing: var(--tr-ui); text-align: center;
}
.bandeau-hors-ligne strong { color: var(--c-warn-strong); font-weight: 600; }

/* ==========================================================
   2. Gabarits de page
   ========================================================== */
.vue-page { width: 100%; max-width: calc(var(--size-read) + 2 * var(--s-12)); margin: 0 auto; padding: var(--s-8) var(--s-12) var(--s-12); }
.vue-page--large { max-width: none; }
.vue-page--lecture { max-width: calc(var(--size-read) + 2 * var(--s-10)); }
@media (max-width: 1279px) { .vue-page { padding: var(--s-6); } }
@media (max-width: 767px)  { .vue-page { padding: var(--s-4) var(--s-4) var(--s-12); } }

.entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-8); }
.entete__textes { min-width: 0; }
.entete__actions { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.vue-titre { font: var(--t-screen); letter-spacing: var(--tr-screen); color: var(--c-ink); margin: 0; overflow-wrap: anywhere; }
.vue-sous { font: var(--t-lead); letter-spacing: var(--tr-lead); color: var(--c-ink-2); margin: var(--s-2) 0 0; }
.fil { display: flex; flex-wrap: wrap; gap: var(--s-1); font: var(--t-small); color: var(--c-ink-3); margin-bottom: var(--s-2); }
.fil a { color: var(--c-ink-3); }
@media (max-width: 767px) {
  .entete { margin-bottom: var(--s-5); align-items: center; }
  .entete--pile { flex-direction: column; align-items: stretch; }
}

/* barre du haut sur mobile : retour, titre court, actions */
.barre-haut {
  display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--size-control); margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) var(--s-2);
}
.barre-haut__titre { flex: 1; min-width: 0; text-align: center; font: var(--t-ui); color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-haut__ressort { flex: 1; }
.barre-haut .sty-icon-btn { color: var(--c-ink); }

.section { margin-bottom: var(--s-8); }
.section__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.section__tete .sty-btn--ghost { height: auto; min-height: var(--s-8); padding: 0 var(--s-2); margin: calc(-1 * var(--s-1)) calc(-1 * var(--s-2)) calc(-1 * var(--s-1)) 0; }
@media (max-width: 767px) { .section { margin-bottom: var(--s-6); } }

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-panel); gap: var(--s-8); align-items: start; }
@media (max-width: 1279px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.liste { background: var(--c-card); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-default); overflow: hidden; }
.liste--plate { box-shadow: none; }
.sty-row { width: 100%; text-align: left; background: transparent; border-left: 0; border-right: 0; border-top: 0; font: inherit; color: inherit; }
button.sty-row { cursor: pointer; }
.liste > .sty-row:last-child { border-bottom: none; }
.sty-row__actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.sty-row__action { font: var(--t-ui); font-weight: 600; color: var(--c-accent-text); white-space: nowrap; }
.sty-row__fleche { color: var(--c-ink-3); flex-shrink: 0; }
.sty-row__tile--accent { background: var(--c-accent-soft); color: var(--c-accent-text); }
.sty-row__tile--warn { background: var(--c-warn-soft); color: var(--c-warn-strong); }
.sty-row__tile--ok { background: var(--c-ok-soft); color: var(--c-ok-strong); }
.sty-row__tile--err { background: var(--c-err-soft); color: var(--c-err-strong); }
.sty-row__tile--neutre { background: var(--c-tile); color: var(--c-ink-2); }
.sty-row__meta--warn { color: var(--c-warn-strong); }
.sty-row__meta--accent { color: var(--c-accent-text); }
.sty-row__title { overflow-wrap: anywhere; }

.puces { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.puces--defile { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); }
.puces--defile::-webkit-scrollbar { display: none; }
.sty-chip { flex-shrink: 0; min-height: var(--size-touch); height: auto; }
@media (min-width: 768px) { .sty-chip { min-height: 36px; } }

.progression { display: flex; align-items: center; gap: var(--s-3); }
.progression .sty-progress { flex: 1; }
.progression__valeur { font: var(--t-small); font-weight: 600; color: var(--c-ink-2); white-space: nowrap; }

.meta { font: var(--t-small); letter-spacing: var(--tr-small); color: var(--c-ink-3); }
.meta-points > * + *::before { content: " · "; }
.texte-2 { color: var(--c-ink-2); }
.accent { color: var(--c-accent-text); }
.gras { font-weight: 600; }

/* ==========================================================
   3. États, calques, signaux
   ========================================================== */
.squelette-titre { height: var(--size-tuile-sm); width: 46%; margin-bottom: var(--s-4); }
.squelette-lignes { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); }
.squelette-liste { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4) 0; }
.squelette-liste__ligne { display: flex; align-items: center; gap: var(--s-4); }
.squelette-liste__tuile { width: var(--size-tile); height: var(--size-tile); border-radius: var(--r-lg); flex-shrink: 0; }
.squelette-liste__textes { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }

.etat-erreur { margin: var(--s-4) 0; }
.etat-erreur__bouton { margin-top: var(--s-3); }
.vide-coche, .vide-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-tile-lg); height: var(--size-tile-lg); border-radius: var(--r-xl);
  background: var(--c-ok-soft); color: var(--c-ok-strong); margin-bottom: var(--s-1);
}
.vide-icone { background: var(--c-tile); color: var(--c-ink-2); }
.sty-empty .sty-btn { margin-top: var(--s-2); }
.carte-vide { border: var(--size-filet) dashed var(--c-line-strong); border-radius: var(--r-xl); background: var(--c-card); }

.calque-voile { z-index: 80; }
.calque { z-index: 81; max-height: 92vh; overflow-y: auto; }
.sty-modal.calque { max-height: 86vh; padding: var(--s-8); width: min(var(--size-modal), calc(100vw - 2 * var(--s-4))); }
.sty-modal.calque--large { width: min(var(--size-modal-large), calc(100vw - 2 * var(--s-4))); }
.sty-sheet.calque { padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
.calque__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.calque__titre { font: var(--t-title); letter-spacing: var(--tr-title); }
.calque__texte { font: var(--t-body); letter-spacing: var(--tr-body); color: var(--c-ink); margin-bottom: var(--s-2); }
.calque__detail { font: var(--t-ui); color: var(--c-ink-2); margin-bottom: var(--s-2); }
.calque__actions { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-6); flex-wrap: wrap; }
.calque__formulaire { display: flex; flex-direction: column; gap: var(--s-4); }
.calque__formulaire .calque__actions { margin-top: var(--s-2); }
.calque__aide { display: block; margin-top: var(--s-1); }
@media (max-width: 767px) {
  .calque__actions { flex-direction: column-reverse; }
  .calque__actions .sty-btn { width: 100%; }
}

.menu-flottant { position: fixed; z-index: 90; min-width: var(--size-menu); padding: var(--s-1); display: flex; flex-direction: column; }
.menu-flottant__item {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--size-touch); padding: 0 var(--s-3);
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-ink); font: var(--t-ui); text-align: left; cursor: pointer;
}
.menu-flottant__item .sty-icon { color: var(--c-ink-2); }
.menu-flottant__item--danger, .menu-flottant__item--danger .sty-icon { color: var(--c-err); }
@media (hover: hover) and (pointer: fine) { .menu-flottant__item:hover { background: var(--c-tile); } }

.sty-signal {
  position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-4);
  width: max-content; max-width: min(var(--size-signal), calc(100vw - 2 * var(--s-4)));
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  background: var(--c-material); -webkit-backdrop-filter: blur(var(--s-6)) saturate(180%); backdrop-filter: blur(var(--s-6)) saturate(180%);
  color: var(--c-sur-sombre); font: var(--t-ui); letter-spacing: var(--tr-ui);
  box-shadow: var(--shadow-floating); z-index: 95;
  animation: sty-signal-entre var(--d-popover) var(--ease-out) both;
}
@media (max-width: 767px) { .sty-signal { bottom: calc(var(--size-tabbar) + var(--s-8)); } }
.sty-signal[data-sortie] { animation: sty-signal-sort var(--d-popover) var(--ease-out) both; }
.sty-signal__action { border: 0; background: var(--c-sur-sombre-bouton); color: var(--c-sur-sombre); border-radius: var(--r-md); padding: var(--s-1) var(--s-3); min-height: var(--size-tuile-sm); font: var(--t-ui); font-weight: 600; cursor: pointer; white-space: nowrap; }
@keyframes sty-signal-entre { from { opacity: 0; transform: translate(-50%, var(--s-3)); } }
@keyframes sty-signal-sort { to { opacity: 0; transform: translate(-50%, var(--s-2)); } }

/* ==========================================================
   4. Ouverture, compte, onboarding
   ========================================================== */
.ouverture {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s-8) var(--s-6); text-align: center; position: relative;
}
.ouverture__hibou { width: var(--size-hibou); height: auto; margin-bottom: var(--s-8); }
.ouverture__mot { width: var(--size-mot-ouverture); height: auto; }
.ouverture__mot.marque__mot--sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ouverture__mot.marque__mot--clair { display: none; }
  :root:not([data-theme="light"]) .ouverture__mot.marque__mot--sombre { display: inline; }
}
:root[data-theme="dark"] .ouverture__mot.marque__mot--clair { display: none; }
:root[data-theme="dark"] .ouverture__mot.marque__mot--sombre { display: inline; }
.ouverture__devise { font: var(--t-lead); color: var(--c-ink-2); margin-top: var(--s-4); }
.ouverture__pied { position: absolute; left: 0; right: 0; bottom: var(--s-12); display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.ouverture__barre { width: var(--size-case-jour); height: var(--s-1); }
.ouverture__rempli { width: 30%; animation: ouverture-avance 1.2s var(--ease-in-out) both; }
@keyframes ouverture-avance { from { width: 8%; } to { width: 100%; } }
.ouverture__etat { font: var(--t-ui); color: var(--c-ink-3); }

.auth {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--s-6) var(--s-4);
}
.auth__carte { width: 100%; max-width: var(--size-auth); padding: var(--s-12) var(--s-10); }
.auth__marque .marque__signe { width: var(--s-10); }
.auth__marque .marque__mot { width: var(--size-case-jour); }
.auth__titre { font: var(--t-title); letter-spacing: var(--tr-title); margin-top: var(--s-8); }
.auth__texte { font: var(--t-body); color: var(--c-ink-2); margin: var(--s-3) 0 var(--s-8); }
.auth__boutons { display: flex; flex-direction: column; gap: var(--s-3); }
.auth__ou { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0; font: var(--t-small); color: var(--c-ink-3); }
.auth__ou::before, .auth__ou::after { content: ""; flex: 1; height: var(--size-filet); background: var(--c-line); }
.auth__bascule { text-align: center; font: var(--t-ui); color: var(--c-ink-2); }
.auth__bascule button { border: 0; background: none; color: var(--c-ink); font-weight: 600; cursor: pointer; padding: var(--s-2); min-height: var(--size-touch); }
.auth__legal { text-align: center; font: var(--t-small); color: var(--c-ink-3); margin-top: var(--s-6); }
.auth__legal a { text-decoration: underline; }
.auth__formulaire { display: flex; flex-direction: column; gap: var(--s-4); }
.auth__retour { margin-bottom: var(--s-2); }
@media (max-width: 767px) {
  .auth { align-items: stretch; padding: 0; }
  .auth__carte { border: 0; box-shadow: none; border-radius: 0; background: transparent; padding: var(--s-12) var(--s-5) var(--s-8); }
}

.onb { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.onb__texte { display: flex; flex-direction: column; justify-content: center; padding: var(--s-12) 7vw; gap: var(--s-6); }
.onb__titre { font: var(--t-display); letter-spacing: var(--tr-display); }
.onb__para { font: var(--t-lead); color: var(--c-ink-2); max-width: 54ch; }
.onb__dit { display: flex; align-items: flex-start; gap: var(--s-4); }
.mx-visage.onb__max { --mx-taille: var(--size-max-visage-dit); }
.onb__actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.onb__pagination { display: flex; align-items: center; gap: var(--s-4); font: var(--t-small); color: var(--c-ink-3); }
.onb__points { display: flex; gap: var(--s-2); align-items: center; }
.onb__point { width: var(--size-point); height: var(--size-point); border-radius: var(--r-pill); background: var(--c-line-strong); transition: width var(--d-dropdown) var(--ease-out); }
.onb__point[aria-current="step"] { width: var(--size-point-actif); background: var(--c-accent); }
.onb__visuel { background: var(--c-accent-soft); display: flex; align-items: center; justify-content: center; padding: var(--s-10); }
.onb__visuel .sty-card { width: 100%; max-width: var(--size-visuel); }
.onb__passer { position: absolute; top: var(--s-6); right: var(--s-6); z-index: 2; }
.onb__champ { max-width: var(--size-champ); }
.onb__mascotte { --mx-taille: var(--size-max-visage-grand); }
@media (max-width: 1023px) {
  .onb { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .onb__visuel { order: -1; background: transparent; padding: var(--s-16, var(--s-12)) var(--s-5) 0; min-height: 40vh; min-width: 0; }
  .onb__texte { padding: var(--s-6) var(--s-5) var(--s-8); text-align: center; align-items: center; }
  .onb__titre { font: var(--t-screen); letter-spacing: var(--tr-screen); }
  .onb__actions { flex-direction: column-reverse; width: 100%; }
  .onb__dit { flex-direction: column; align-items: center; gap: var(--s-3); }
  .mx-visage.onb__max { --mx-taille: var(--size-max-visage-bulle); }
  .onb__actions .sty-btn--primary { width: 100%; }
  .onb__pagination { order: -1; }
}
.demo-carte { position: relative; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.demo-carte .tableau-objet { table-layout: fixed; width: 100%; }
.demo-carte .tableau-objet :is(th, td) { overflow-wrap: break-word; hyphens: auto; }
/* Sur téléphone, l'illustration reste compacte : l'étape entière tient à l'écran. */
@media (max-width: 767px) {
  .onb__visuel { min-height: 0; padding: var(--s-16) var(--s-4) 0; }
  .demo-carte { padding: var(--s-4); gap: var(--s-2); }
  .demo-carte :is(.texte-2, .demo-carte__ligne, .demo-bulle, .demo-evt) { font: var(--t-small); }
  .demo-carte .objet__tete { font: var(--t-small); padding: var(--s-2) var(--s-3); }
  .demo-carte .tableau-objet { font: var(--t-small); }
  .demo-carte .tableau-objet :is(th, td) { padding: var(--s-1) var(--s-2); }
  .onb__mascotte { --mx-taille: calc(var(--size-max-visage-grand) * 0.7); }
}
.demo-exemple { position: absolute; top: var(--s-3); right: var(--s-3); padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent); font: var(--t-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.demo-carte__tete, .demo-exemple + :is(p, div) { padding-right: var(--s-16); }
.demo-carte__tete { display: flex; align-items: center; gap: var(--s-4); }
.demo-carte__ligne { display: flex; align-items: center; gap: var(--s-3); font: var(--t-ui); color: var(--c-ink-2); }
.demo-carte__ligne .sty-icon { color: var(--c-ink-2); }
.demo-num { display: inline-flex; align-items: center; justify-content: center; width: var(--s-8); height: var(--s-8); border-radius: var(--r-md); background: var(--c-tile); font: var(--t-small); font-weight: 600; color: var(--c-ink-2); flex-shrink: 0; }
.demo-onde { display: flex; align-items: center; gap: var(--s-1); flex: 1; }
.demo-onde i { display: block; width: var(--s-1); height: calc(var(--s-1) * var(--h, 4)); border-radius: var(--r-pill); background: var(--c-accent); }
.demo-onde i.eteint { background: var(--c-line-strong); }
.demo-rec { width: var(--size-touch); height: var(--size-touch); border-radius: var(--r-pill); background: var(--c-rec); display: inline-flex; align-items: center; justify-content: center; color: var(--c-on-accent); flex-shrink: 0; }
.demo-jours { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: var(--s-1); font: var(--t-small); color: var(--c-ink-3); }
.demo-jours b { display: inline-flex; align-items: center; justify-content: center; width: var(--s-8); height: var(--s-8); margin: var(--s-1) auto 0; border-radius: var(--r-pill); font-weight: 500; color: var(--c-ink); }
.demo-jours b.actif { background: var(--c-bouton); color: var(--c-on-accent); font-weight: 700; }
.demo-evt { display: flex; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--c-accent-soft); font: var(--t-ui); }
.demo-evt--warn { background: var(--c-warn-soft); }
.demo-evt b { color: var(--c-accent-text); min-width: var(--size-touch); }
.demo-evt--warn b { color: var(--c-warn-strong); }
.demo-bulle { background: var(--c-tile); border-radius: var(--r-xl); padding: var(--s-3) var(--s-4); font: var(--t-ui); }
.demo-avatars { display: flex; }
.demo-avatars .sty-avatar { width: var(--size-tuile-sm); height: var(--size-tuile-sm); margin-right: calc(-1 * var(--s-2)); border: var(--size-filet-epais) solid var(--c-card); }

/* ==========================================================
   5. Accueil
   ========================================================== */
.accueil { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-panel); gap: var(--s-8); align-items: start; }
@media (max-width: 1279px) { .accueil { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.reprendre { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6); }
.reprendre__tuile { width: var(--size-fab); height: var(--size-fab); border-radius: var(--r-xl); background: var(--c-tile); color: var(--c-accent-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reprendre__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.reprendre__titre { font: var(--t-card-title); letter-spacing: var(--tr-card-title); overflow-wrap: anywhere; }
.reprendre__meta { font: var(--t-ui); color: var(--c-ink-2); }
.reprendre .progression { max-width: var(--size-jauge-large); margin-top: var(--s-1); }
@media (max-width: 767px) {
  .reprendre { flex-wrap: wrap; padding: var(--s-5); }
  .reprendre .sty-btn { display: none; }
  .reprendre .progression { max-width: none; flex-basis: 100%; }
}
.proposition { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.proposition__titre { font: var(--t-body); font-weight: 600; }
.proposition__texte { font: var(--t-ui); color: var(--c-ink-2); }
.proposition__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.proposition__actions .sty-btn { flex: 1 1 auto; }
.notion-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: var(--size-filet) solid var(--c-line); color: inherit; }
.notion-ligne:last-child { border-bottom: 0; }
.notion-ligne__nom { font: var(--t-ui); color: var(--c-ink); }
.activite { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-2) 0; font: var(--t-body); color: var(--c-ink-2); }
.activite b { color: var(--c-ink); font-weight: 500; }
.bouton-cloche { position: relative; }
.bouton-cloche .sty-badge { position: absolute; top: var(--s-1); right: var(--s-1); }
.bouton-carre { width: var(--size-control); height: var(--size-control); border: var(--size-filet) solid var(--c-line-strong); border-radius: var(--r-xl); background: var(--c-card); box-shadow: var(--shadow-default); color: var(--c-ink); }

/* ==========================================================
   6. Cours
   ========================================================== */
.grille-cours { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size-carte-min), 1fr)); gap: var(--s-5); }
@media (max-width: 1279px) { .grille-cours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .grille-cours { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
.carte-cours { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); color: inherit; min-height: 100%; }
.carte-cours__haut { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.carte-cours__titre { font: var(--t-card-title); letter-spacing: var(--tr-card-title); overflow-wrap: anywhere; }
.carte-cours__meta { font: var(--t-ui); color: var(--c-ink-2); }
.carte-cours__bas { margin-top: auto; padding-top: var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.carte-cours__pied { display: flex; justify-content: space-between; font: var(--t-small); color: var(--c-ink-3); }
.tuile-cours { width: var(--size-tile-lg); height: var(--size-tile-lg); border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tuile-cours--accent { background: var(--c-accent-soft); color: var(--c-accent-text); }
.tuile-cours--neutre { background: var(--c-tile); color: var(--c-ink-2); }
.tuile-cours--ok { background: var(--c-ok-soft); color: var(--c-ok-strong); }
@media (hover: hover) and (pointer: fine) { a.carte-cours:hover { box-shadow: var(--shadow-floating); color: inherit; } }
.carte-nouveau { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); padding: var(--s-6); text-align: left; color: var(--c-ink); cursor: pointer; font: inherit; }
.carte-nouveau .tuile-cours { background: var(--c-tile); color: var(--c-ink-2); }
.carte-nouveau__titre { font: var(--t-body); font-weight: 600; }
.carte-nouveau__texte { font: var(--t-ui); color: var(--c-ink-2); }
@media (max-width: 767px) {
  .carte-cours { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--s-5); gap: var(--s-4); }
  .carte-cours__haut { display: contents; }
  .carte-cours__haut .sty-tag { order: 2; }
  .carte-cours__textes { order: 1; flex: 1 1 0; min-width: 0; }
  .carte-cours .tuile-cours { order: 0; }
  .carte-cours__bas { order: 3; flex-basis: 100%; padding-top: 0; }
  .carte-cours__pied--date { display: none; }
}
.outils-liste { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); flex-wrap: wrap; }
.tri { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-ui); color: var(--c-ink-2); }
.tri select { border: 0; background: transparent; font: var(--t-ui); color: var(--c-ink-2); min-height: var(--size-touch); cursor: pointer; }
.champ-entete { width: var(--size-champ-entete); }
@media (max-width: 1279px) { .champ-entete { width: 270px; } }
@media (max-width: 767px) { .champ-entete { width: 100%; } }

/* détail d'un cours */
.cours-tete { display: flex; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-6); }
.cours-tete__chiffres { display: flex; align-items: center; gap: var(--s-6); margin-top: var(--s-4); }
.cours-tete__chiffres .sty-progress { width: var(--size-jauge); }
.cours-tete__maitrise { font: var(--t-small); font-weight: 600; color: var(--c-ink-2); }
@media (max-width: 767px) {
  .cours-tete { flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
  .cours-tete__chiffres .sty-progress { width: auto; flex: 1; }
}
.onglets-cours { margin-bottom: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.onglets-cours::-webkit-scrollbar { display: none; }
.onglets-cours .sty-tab { white-space: nowrap; min-height: var(--size-touch); }
.num-chapitre { width: var(--size-tuile-sm); height: var(--size-tuile-sm); border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font: var(--t-ui); font-weight: 600; }
.num-chapitre--maitrise { background: var(--c-ok-soft); color: var(--c-ok-strong); }
.num-chapitre--a_revoir { background: var(--c-warn-soft); color: var(--c-warn-strong); }
.num-chapitre--jamais, .num-chapitre--neutre { background: var(--c-tile); color: var(--c-ink-2); }
.num-chapitre--en_cours { background: var(--c-accent-soft); color: var(--c-accent-text); }
.alerte-echeance { margin-top: var(--s-5); align-items: center; }
.alerte-echeance .sty-callout__text strong { font-weight: 600; }
.alerte-echeance__action { margin-left: auto; font: var(--t-ui); font-weight: 600; color: var(--c-accent-text); white-space: nowrap; border: 0; background: none; cursor: pointer; min-height: var(--size-touch); }
.lien-ia { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); margin-top: var(--s-4); border-radius: var(--r-xl); background: var(--c-accent-soft); color: var(--c-ink); font: var(--t-body); width: 100%; border: 0; text-align: left; cursor: pointer; }
.lien-ia > .sty-icon:first-child { color: var(--c-accent-text); }
.lien-ia span { flex: 1; }
.poignee { cursor: grab; color: var(--c-ink-3); touch-action: none; }
.sty-row--glisse { background: var(--c-accent-soft); }

/* ==========================================================
   7. Chapitre : lecture
   ========================================================== */
.lecture-barre {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-10); min-height: var(--size-barre-haute); border-bottom: var(--size-filet) solid var(--c-line);
  background: var(--c-page);
}
.lecture-barre__fil { flex: 1; min-width: 0; font: var(--t-small); color: var(--c-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecture-barre__fil a { color: var(--c-ink-3); }
.lecture-barre .sty-btn { height: var(--s-10); }
@media (max-width: 767px) { .lecture-barre { padding: var(--s-2) var(--s-3); } .lecture-barre__fil { text-align: center; } }
.lecture { width: 100%; max-width: calc(var(--size-read) + 2 * var(--s-12)); margin: 0 auto; padding: var(--s-10) var(--s-12) var(--s-16, var(--s-12)); }
@media (max-width: 1279px) { .lecture { max-width: calc(var(--size-editeur) + 2 * var(--s-6)); padding: var(--s-6); } }
@media (max-width: 767px) { .lecture { padding: var(--s-5) var(--s-4) calc(var(--s-12) + 72px); } }
.lecture__titre { font: var(--t-screen); letter-spacing: var(--tr-screen); overflow-wrap: anywhere; }
.lecture__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-6); font: var(--t-small); color: var(--c-ink-3); }
.texte-cours { font: var(--t-read); letter-spacing: var(--tr-read); color: var(--c-ink); }
.texte-cours > * + * { margin-top: var(--s-5); }
.texte-cours h2 { font: var(--t-heading); letter-spacing: var(--tr-heading); margin-top: var(--s-8); }
.texte-cours h3, .texte-cours h4 { font: var(--t-body); font-weight: 600; margin-top: var(--s-6); }
.texte-cours ul, .texte-cours ol { padding-left: 1.3em; }
.texte-cours li + li { margin-top: var(--s-2); }
.texte-cours blockquote { margin-left: 0; padding: var(--s-3) var(--s-4); border-left: var(--size-filet-epais) solid var(--c-line-strong); color: var(--c-ink-2); }
.texte-cours a { color: var(--c-accent-text); text-decoration: underline; }
.texte-cours img { border-radius: var(--r-lg); border: var(--size-filet) solid var(--c-line); }
.texte-cours table { width: 100%; border-collapse: collapse; font: var(--t-body); }
.texte-cours th, .texte-cours td { border: var(--size-filet) solid var(--c-line); padding: var(--s-2) var(--s-3); text-align: left; vertical-align: top; }
.texte-cours th { background: var(--c-tile); font-weight: 600; }
.texte-cours .surligne { font: var(--t-small); color: var(--c-ink-3); }
.texte-cours ::selection { background: var(--c-surligne); }
.texte-cours mark { background: var(--c-surligne); color: inherit; border-radius: var(--r-xs); }
.lecture-pied {
  display: none;
}
@media (max-width: 767px) {
  .lecture-pied {
    display: flex; align-items: center; gap: var(--s-4); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
    background: var(--c-card); border-top: var(--size-filet) solid var(--c-line);
  }
  .lecture-pied__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); font: var(--t-small); color: var(--c-ink-3); }
}

/* la barre d'action contextuelle, posée sous la sélection */
.barre-contexte { position: absolute; z-index: 40; max-width: calc(100vw - 2 * var(--s-4)); flex-wrap: wrap; animation: barre-entre var(--d-popover) var(--ease-out) both; }
@keyframes barre-entre { from { opacity: 0; transform: translateY(var(--s-1)); } }
.barre-contexte button { min-height: var(--s-10); }
.barre-contexte button[data-primary] .sty-icon { width: var(--s-4); height: var(--s-4); }

/* objet généré, affiché dans le chapitre */
.objet { border: var(--size-filet) solid var(--c-line); border-radius: var(--r-xl); background: var(--c-card); box-shadow: var(--shadow-default); overflow: hidden; font: var(--t-ui); letter-spacing: var(--tr-ui); margin: var(--s-6) 0; }
.objet__tete { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--c-accent-soft); color: var(--c-accent-text); font: var(--t-small); font-weight: 600; }
.objet__tete .sty-icon { width: var(--s-4); height: var(--s-4); }
.objet__tete .objet__source { color: var(--c-ink-3); font-weight: 400; }
.objet__tete-ressort { flex: 1; }
.objet__tete a, .objet__tete button { color: var(--c-accent-text); font-weight: 600; background: none; border: 0; cursor: pointer; font: inherit; }
.objet__corps { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); color: var(--c-ink); }
.objet__corps p { font: var(--t-body); }
.objet__corps ul { margin: 0; padding-left: 1.2em; font: var(--t-body); }
.objet__corps .sty-callout { margin: 0; }
.fiches { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-3); }
.fiches--liste { grid-template-columns: 1fr; }
.fiche { border: var(--size-filet) solid var(--c-line); border-radius: var(--r-lg); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); background: var(--c-card); }
.fiche__face { font: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--c-ink-3); }
.fiche__texte { font: var(--t-body); color: var(--c-ink); }
.fiche__texte--verso { color: var(--c-ink-2); }
.fiche-paire { display: contents; }
@media (max-width: 767px) { .fiches { grid-template-columns: 1fr; } }
.tableau-objet { width: 100%; border-collapse: collapse; font: var(--t-body); }
.tableau-objet th, .tableau-objet td { padding: var(--s-3) var(--s-4); border-bottom: var(--size-filet) solid var(--c-line); text-align: left; vertical-align: top; }
.tableau-objet th { font: var(--t-ui); font-weight: 600; color: var(--c-ink-2); background: var(--c-tile); }
.tableau-objet td + td, .tableau-objet th + th { border-left: var(--size-filet) solid var(--c-line); }
.tableau-objet td { color: var(--c-ink-2); }
.tableau-objet td:first-child { color: var(--c-ink); }
.defile-x { overflow-x: auto; margin: 0 calc(-1 * var(--s-5)); }
.chrono { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.chrono li { display: grid; grid-template-columns: var(--size-case-jour) minmax(0, 1fr); gap: var(--s-4); }
.chrono__date { font: var(--t-ui); font-weight: 600; color: var(--c-accent-text); }
.chrono__titre { font: var(--t-body); font-weight: 500; }
.chrono__detail { font: var(--t-ui); color: var(--c-ink-2); }
.termes { display: flex; flex-direction: column; gap: var(--s-2); }
.termes dt { font-weight: 600; }
.termes dd { margin: 0 0 var(--s-2); color: var(--c-ink-2); }

/* questions dans le panneau */
.carte-question { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-xl); background: var(--c-card); font: var(--t-ui); color: var(--c-ink); }
.carte-question + .carte-question { margin-top: var(--s-3); }
.carte-question .sty-tag { align-self: flex-start; }
.notion-puce { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--c-tile); font: var(--t-small); font-weight: 600; color: var(--c-accent-text); }

/* ==========================================================
   8. Utilitaires de palier et ajustements communs
   ========================================================== */
@media (min-width: 768px) { .sty-only-mobile { display: none !important; } }
@media (max-width: 767px) { .sty-hide-mobile { display: none !important; } }
.bloc { display: block; }
.liste-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.liste-actions .sty-btn--ghost { padding: 0 var(--s-3); }
.fiche .notion-puce { align-self: flex-start; }
.carte-question + .carte-question { margin-top: 0; }
.panneau-racine { display: flex; flex-direction: column; min-height: 100%; }
.panneau-racine > .panneau-pied { margin-top: auto; }
.alerte-echeance__action { display: inline-flex; align-items: center; }
.cours-tete .entete__textes { flex: 1 1 auto; }
.accueil__cote .proposition { margin-bottom: var(--s-6); }
.accueil__cote .section__tete { margin-bottom: var(--s-3); }
.accueil__fragiles .section { margin-bottom: 0; }
@media (max-width: 767px) {
  .accueil__fragiles { display: none; }
  .accueil-nouveau { display: none; }
}
.lecture-suite { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-10); padding-top: var(--s-6); border-top: var(--size-filet) solid var(--c-line); }
.aide-selection { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-8); }
.section-mobile-reviser { margin-top: var(--s-6); }
.icone-haut { transform: rotate(-90deg); }
.liste-questions { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-3); font: var(--t-body); }
.liste-questions li { display: flex; flex-direction: column; gap: var(--s-1); }
.liste-questions .notion-puce { align-self: flex-start; }
.plan-liste { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--s-3); font: var(--t-body); }

/* état de traitement IA, posé sous le passage */
.traitement { padding: var(--s-5); margin: var(--s-5) 0; display: flex; flex-direction: column; gap: var(--s-4); font: var(--t-ui); }
.traitement__etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.traitement__etape { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink); }
.traitement__etape[data-etat="attente"] { color: var(--c-ink-3); }
.traitement__marque { width: var(--s-5); height: var(--s-5); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: var(--size-filet-epais) solid var(--c-line-strong); flex-shrink: 0; }
.traitement__etape[data-etat="fait"] .traitement__marque { border: 0; color: var(--c-ink-2); }
.traitement__etape[data-etat="cours"] .traitement__marque { border: 0; color: var(--c-accent); }
.traitement__marque .sty-icon { width: var(--size-icone-sm); height: var(--size-icone-sm); }
.traitement > .sty-btn { align-self: flex-start; }
.traitement__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ==========================================================
   9. Éditeur
   ========================================================== */
.editeur { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.editeur--plan { grid-template-columns: var(--size-sous-nav) minmax(0, 1fr); }
@media (max-width: 1279px) { .editeur--plan { grid-template-columns: minmax(0, 1fr); } .editeur-plan { display: none; } }
.editeur-plan { border-right: var(--size-filet) solid var(--c-line); padding: var(--s-5) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; background: var(--c-page); }
.editeur-plan > .sty-section-label { padding: 0 var(--s-3); }
.editeur-plan__liste { display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.editeur-plan .sous-nav-chapitre[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-accent-text); }
.editeur-plan__sections { display: flex; flex-direction: column; padding-left: var(--s-8); }
.editeur-plan__section { text-align: left; border: 0; background: none; padding: var(--s-2) 0; min-height: var(--size-tuile-sm); font: var(--t-small); color: var(--c-ink-2); cursor: pointer; }
.editeur-plan__section:hover { color: var(--c-accent-text); }
.editeur-centre { min-width: 0; display: flex; flex-direction: column; }
.editeur-barre {
  position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--s-16); padding: var(--s-2) var(--s-6); background: var(--c-page); border-bottom: var(--size-filet) solid var(--c-line);
}
.editeur-barre__fil { font: var(--t-small); color: var(--c-ink-3); max-width: var(--size-fil); overflow: hidden; text-overflow: ellipsis; }
.editeur-barre__ressort { flex: 1; }
.editeur-barre__statut { display: inline-flex; align-items: center; gap: var(--s-1); }
.editeur-statut .sty-icon { width: var(--size-icone-xs); height: var(--size-icone-xs); }
.editeur-puce { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); background: var(--c-tile); color: var(--c-accent-text); font: var(--t-small); font-weight: 600; }
.editeur-puce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editeur-outils { display: flex; align-items: center; gap: var(--s-1); }
.editeur-outil { width: var(--s-10); height: var(--s-10); display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-md); background: transparent; color: var(--c-ink); cursor: pointer; }
.editeur-outil .sty-icon--lg { width: var(--size-icone-md); height: var(--size-icone-md); }
.editeur-outil__lettre { font: var(--t-body); font-weight: 700; }
.editeur-outil__lettre--i { font-style: italic; font-family: Georgia, serif; }
.editeur-outil--ia { background: var(--c-accent-soft); color: var(--c-accent-text); }
.editeur-outils__sep { width: var(--size-filet); height: var(--s-6); background: var(--c-line); margin: 0 var(--s-1); }
@media (hover: hover) and (pointer: fine) { .editeur-outil:hover { background: var(--c-tile); } .editeur-outil--ia:hover { background: var(--c-accent-wash); } }
.editeur-page { position: relative; width: 100%; max-width: calc(var(--size-editeur) + 2 * var(--s-6)); margin: 0 auto; padding: var(--s-10) var(--s-6) var(--s-16, var(--s-12)); display: flex; flex-direction: column; gap: var(--s-4); }
.editeur-titre {
  width: 100%; border: 0; background: transparent; resize: none; overflow: hidden; padding: 0;
  font: var(--t-screen); letter-spacing: var(--tr-screen); color: var(--c-ink);
}
.editeur-titre:focus { outline: none; }
.editeur-titre::placeholder { color: var(--c-ink-3); }
.editeur-corps { min-height: 50vh; outline: none; caret-color: var(--c-accent); }
.editeur-corps:focus-visible { outline: none; }
.editeur-corps--vide::before { content: attr(data-vide); position: absolute; color: var(--c-ink-3); pointer-events: none; max-width: var(--size-editeur); }
.editeur-corps table td, .editeur-corps table th { min-width: var(--size-cellule); }
.editeur-outils--bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: space-between;
  padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); background: var(--c-card); border-top: var(--size-filet) solid var(--c-line);
}
.editeur-outils--bas .editeur-outil { width: var(--size-touch); height: var(--size-touch); }
.editeur-outils--bas .editeur-outils__sep { flex: 1; background: transparent; }
@media (max-width: 767px) {
  .editeur-barre { padding: var(--s-2) var(--s-3); min-height: var(--size-barre-haute); }
  .editeur-barre__statut .sty-tag { display: none; }
  .editeur-barre__statut .sty-tag.sty-tag--err, .editeur-barre__statut .sty-tag.sty-tag--warn { display: inline-flex; }
  .editeur-page { padding: var(--s-5) var(--s-4) calc(var(--size-control) + var(--s-16, var(--s-12))); }
}
.instruction-suggestion { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin: 0; font: var(--t-ui); user-select: none; }
.instruction-suggestion__icone { color: var(--c-accent-text); display: inline-flex; }
.instruction-suggestion__texte { flex: 1; color: var(--c-ink-2); }
.instruction-suggestion kbd { font: var(--t-small); font-weight: 600; }
.proposition-editeur { user-select: text; }
.proposition-editeur .objet { margin: var(--s-2) 0; }
.objet__tete .sty-btn--sm { height: var(--size-avatar); padding: 0 var(--s-3); }
.objet--proposition .objet__tete { flex-wrap: wrap; }
.citation-selection { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--c-accent-soft); font: var(--t-ui); color: var(--c-ink); }
.panneau-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.panneau-actions .sty-btn { justify-content: flex-start; }
.carte-source { padding: var(--s-3); border-radius: var(--r-lg); background: var(--c-tile); }

/* ==========================================================
   10. Objet généré
   ========================================================== */
.genere { padding-bottom: calc(var(--size-control) + var(--s-16, var(--s-12))); }
.genere__titre { font: var(--t-heading); letter-spacing: var(--tr-heading); }
.genere-origine { margin-bottom: var(--s-5); }
.genere-liste { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-4); }
.genere .sty-callout--check { margin-bottom: var(--s-2); }
.genere-corps { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); font: var(--t-body); }
.genere-corps .defile-x { margin: 0; }
.genere-source { padding-top: var(--s-2); }
.genere-explication { margin-top: var(--s-5); }
.fiche-grande { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.fiche-grande__recto { font: var(--t-heading); letter-spacing: var(--tr-heading); }
.fiche-grande__verso { font: var(--t-read); letter-spacing: var(--tr-read); color: var(--c-ink-2); }
.fiche-grande__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.fiche-grande [contenteditable="true"] { border-radius: var(--r-md); outline: var(--size-filet) dashed var(--c-line-strong); outline-offset: var(--s-1); }
.barre-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: var(--s-3); justify-content: center;
  padding: var(--s-4) var(--s-6) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); background: var(--c-page); border-top: var(--size-filet) solid var(--c-line);
}
@media (min-width: 768px) { .barre-bas { left: var(--size-rail); } }
@media (min-width: 1280px) { .barre-bas { left: var(--size-sidebar); } .coquille--panneau .barre-bas { right: var(--size-panel); } }
.barre-bas__principal { min-width: var(--size-bouton-large); }
@media (max-width: 767px) { .barre-bas { padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); } .barre-bas__principal { flex: 1; min-width: 0; } .barre-bas .sty-btn--ghost { display: none; } }

/* ==========================================================
   11. Révision
   ========================================================== */
.revision { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--c-page); }
.revision__tete { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-8); }
.revision__avance { display: flex; align-items: center; gap: var(--s-4); flex: 0 1 var(--size-avance); }
.revision__avance .sty-progress { flex: 1; }
.revision__compte { font: var(--t-small); font-weight: 600; color: var(--c-ink-2); white-space: nowrap; }
.revision__meta { margin-left: auto; font: var(--t-small); color: var(--c-ink-2); }
.revision__scene { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s-6); gap: var(--s-4); }
.revision__carte { width: 100%; max-width: var(--size-carte-revision); padding: var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); box-shadow: var(--shadow-floating); }
.revision__entete { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.revision__question { font: var(--t-card-title); letter-spacing: var(--tr-card-title); font: var(--t-question); letter-spacing: var(--tr-card-title); }
.revision__reponse { font: var(--t-read); letter-spacing: var(--tr-read); color: var(--c-ink); }
.revision__source { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--c-tile); font: var(--t-ui); }
.revision__source > .sty-icon { color: var(--c-accent-text); }
.revision__source span { flex: 1; }
.revision__lien { font: var(--t-small); font-weight: 600; color: var(--c-accent-text); white-space: nowrap; }
.revision__astuce { display: flex; align-items: center; gap: var(--s-2); }
.revision__pied { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-8) calc(var(--s-10) + env(safe-area-inset-bottom, 0px)); }
.revision__reveler { min-width: var(--size-bouton-reveler); }
.revision__jugements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); width: 100%; max-width: var(--size-jugements); }
.jugement { display: flex; flex-direction: column; gap: var(--s-2); }
.jugement .sty-btn { width: 100%; height: var(--size-fab); }
.jugement:nth-child(2) .jugement__aide { text-align: center; }
.jugement:nth-child(3) .jugement__aide { text-align: right; }
.jugement__aide { font: var(--t-small); color: var(--c-ink-3); }
.jugement--revoir { background: var(--c-card); border-color: var(--c-err); color: var(--c-err-strong); }
.jugement--difficile { background: var(--c-card); border-color: var(--c-line-strong); color: var(--c-ink); }
.jugement--su { background: var(--c-ok); color: var(--c-on-accent); }
@media (hover: hover) and (pointer: fine) {
  .jugement--revoir:hover { background: var(--c-err-soft); }
  .jugement--difficile:hover { background: var(--c-tile); }
  .jugement--su:hover { background: var(--c-ok-strong); }
}
.revision__bilan { align-items: flex-start; }
.bilan { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; }
.bilan__ligne { display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) 0; border-bottom: var(--size-filet) solid var(--c-line); }
.bilan__n { font: var(--t-heading); }
@media (max-width: 767px) {
  .revision__tete { padding: var(--s-3) var(--s-4); flex-wrap: wrap; }
  .revision__avance { flex: 1 1 auto; order: 3; flex-basis: 100%; }
  .revision__scene { justify-content: flex-start; padding: var(--s-4); }
  .revision__carte { padding: var(--s-6); box-shadow: var(--shadow-default); }
  .revision__question { font: var(--t-card-title); }
  .revision__pied { padding: var(--s-4) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
  .revision__reveler { width: 100%; }
  .revision__source { flex-wrap: wrap; }
}
.barre-bas .sty-btn--ghost { display: inline-flex; }
@media (max-width: 767px) { .barre-bas .sty-btn--ghost { width: var(--size-control); padding: 0; } }
@media (min-width: 1280px) { .editeur--plan { grid-template-columns: var(--size-sidebar) minmax(0, 1fr); } }
@media (min-width: 1280px) {
  .coquille--panneau .editeur-barre__fil--plan { display: none; }
  .coquille--panneau .editeur-barre { gap: var(--s-2); padding: var(--s-2) var(--s-4); }
  .coquille--panneau .editeur-outil { width: var(--size-icone-lg); height: var(--size-icone-lg); }
  .coquille--panneau .editeur-outil .sty-icon--lg { width: var(--s-5); height: var(--s-5); }
}

/* ==========================================================
   12. Enregistrement
   ========================================================== */
.scene-rec { min-height: 100vh; min-height: 100dvh; background: var(--c-scene); color: var(--c-sur-sombre); display: flex; flex-direction: column; }
.scene-rec__haut { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-8) var(--s-10) 0; flex-wrap: wrap; }
.scene-rec__retour { color: var(--c-sur-sombre); }
.scene-rec__cours { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-touch); padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--c-scene-2); color: var(--c-sur-sombre); font: var(--t-ui); font-weight: 600; }
.scene-rec__cours select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding-right: var(--s-2); cursor: pointer; max-width: 60vw; }
.scene-rec__cours select option { color: var(--c-ink); background: var(--c-card); }
.scene-rec__etat { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-small); font-weight: 600; letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--c-scene-rec); }
.scene-rec__etat::before { content: ""; width: var(--size-point); height: var(--size-point); border-radius: var(--r-pill); background: currentColor; }
.scene-rec__centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-8); padding: var(--s-8) var(--s-6); text-align: center; }
.scene-rec__titre { font: var(--t-screen); letter-spacing: var(--tr-screen); }
.scene-rec__texte { font: var(--t-body); color: var(--c-sur-sombre-2); max-width: 52ch; }
.scene-rec__champ { width: 100%; max-width: var(--size-champ); text-align: left; }
.scene-rec__champ .sty-label { color: var(--c-sur-sombre-2); }
.scene-rec__champ .sty-input { background: var(--c-scene-2); border-color: var(--c-scene-ligne); color: var(--c-sur-sombre); }
.scene-rec__accord { max-width: var(--size-champ); text-align: left; font: var(--t-ui); color: var(--c-sur-sombre-2); }
.scene-rec__chrono { font: var(--t-timer); letter-spacing: var(--tr-timer); font-variant-numeric: tabular-nums; font-size: var(--size-chrono); line-height: 1; }
@media (max-width: 767px) { .scene-rec__chrono { font-size: 64px; } }
.scene-rec__onde { display: flex; align-items: center; gap: var(--s-2); height: var(--size-scene-onde); }
.scene-rec__onde i { display: block; width: var(--s-1); height: calc(var(--s-1) * var(--h, 1)); border-radius: var(--r-pill); background: var(--c-scene-eteint); transition: height var(--d-press) var(--ease-out); }
.scene-rec__onde i.actif { background: var(--c-scene-onde); }
/* Trois colonnes égales : le bouton d'arrêt reste au centre exact de l'écran, quelle que soit la largeur de « Annuler ». */
.scene-rec__commandes { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-8); width: 100%; max-width: var(--size-texte-etroit); }
.scene-rec__commandes > :first-child { justify-self: end; }
.scene-rec__commandes > :last-child { justify-self: start; }
.scene-rec__annuler { color: var(--c-sur-sombre); }
.scene-rec__bouton { width: var(--size-bouton-rec); height: var(--size-bouton-rec); border: 0; border-radius: var(--r-pill); background: var(--c-rec); color: var(--c-on-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.scene-rec__bouton .sty-icon--lg { width: var(--size-icone-lg); height: var(--size-icone-lg); fill: currentColor; }
.scene-rec__bouton--demarrer .sty-icon--lg { fill: none; }
.scene-rec__pause { width: var(--size-barre-haute); height: var(--size-barre-haute); border: var(--size-filet) solid var(--c-scene-ligne); border-radius: var(--r-pill); background: transparent; color: var(--c-sur-sombre); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.scene-rec__pause .sty-icon--lg { fill: currentColor; }
.scene-rec__marquer { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--size-control); padding: 0 var(--s-6); border: var(--size-filet) solid var(--c-scene-ligne); border-radius: var(--r-lg); background: transparent; color: var(--c-sur-sombre); font: var(--t-body); font-weight: 600; cursor: pointer; }
.scene-rec__moments { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; }
.scene-rec__moments span { padding: var(--s-1) var(--s-4); border-radius: var(--r-pill); background: var(--c-scene-2); font: var(--t-small); font-weight: 600; color: var(--c-sur-sombre-2); }
.scene-rec__pied { font: var(--t-small); color: var(--c-sur-sombre-2); max-width: 46ch; }
.scene-rec__aide { font: var(--t-ui); color: var(--c-sur-sombre-2); margin-top: calc(-1 * var(--s-5)); }
.scene-rec__orphelin, .scene-rec__erreur { max-width: var(--size-texte-etroit); text-align: left; }
.scene-rec__orphelin .sty-callout__text, .scene-rec__erreur .sty-callout__text { color: var(--c-ink); }
.scene-rec__barre { width: var(--size-mot-ouverture); }
.scene-rec :focus-visible { outline-color: var(--c-sur-sombre); }
@media (hover: hover) and (pointer: fine) { .scene-rec__marquer:hover, .scene-rec__pause:hover { background: var(--c-scene-2); } }
@media (max-width: 767px) {
  .scene-rec__haut { padding: var(--s-4) var(--s-4) 0; justify-content: center; }
  .scene-rec__retour { position: absolute; left: var(--s-3); top: var(--s-4); }
  .scene-rec__centre { gap: var(--s-6); }
  .scene-rec__commandes { gap: var(--s-6); }
}
.moment { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: var(--size-filet) solid var(--c-line); font: var(--t-ui); }
.moment:last-child { border-bottom: 0; }
.moment__t { font: var(--t-small); font-weight: 600; color: var(--c-accent-text); min-width: var(--size-touch); font-variant-numeric: tabular-nums; }
.moment__label { flex: 1; border: 0; background: transparent; font: var(--t-ui); color: var(--c-ink); min-height: var(--size-tuile-sm); border-radius: var(--r-sm); }
.moment__label:focus-visible { background: var(--c-tile); }
.moment--bouton { width: 100%; border: 0; border-bottom: var(--size-filet) solid var(--c-line); background: none; text-align: left; cursor: pointer; padding: var(--s-3) var(--s-4); min-height: var(--size-touch); }
.note-rapide { min-height: var(--size-note); }

/* ==========================================================
   13. Transcription
   ========================================================== */
.transcription { display: grid; grid-template-columns: var(--size-colonne) minmax(0, 1fr) var(--size-colonne); min-height: 100vh; min-height: 100dvh; }
.transcription__gauche { padding: var(--s-6) var(--s-5); border-right: var(--size-filet) solid var(--c-line); display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.transcription__gauche .barre-haut { margin: 0; }
.transcription__titre { flex: 1; min-width: 0; font: var(--t-heading); letter-spacing: var(--tr-heading); }
.transcription__meta { margin-top: calc(-1 * var(--s-3)); }
.transcription__centre { min-width: 0; padding: 0 var(--s-8) var(--s-12); }
.transcription__tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s-3); min-height: var(--s-16); margin: 0 calc(-1 * var(--s-8)) var(--s-6); padding: 0 var(--s-8); background: var(--c-page); border-bottom: var(--size-filet) solid var(--c-line); font: var(--t-ui); }
.transcription__droite { border-left: var(--size-filet) solid var(--c-line); background: var(--c-card); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.transcription__droite .transcription__tete { margin: 0; padding: 0 var(--s-5); background: var(--c-card); color: var(--c-accent-text); }
.transcription__droite .transcription__tete .gras { color: var(--c-ink); }
.transcription__cours { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.transcription__aide { margin-top: var(--s-4); }
@media (max-width: 1279px) {
  .transcription { grid-template-columns: var(--size-colonne-sm) minmax(0, 1fr); }
  .transcription__droite { grid-column: 1 / -1; position: static; height: auto; border-left: 0; border-top: var(--size-filet) solid var(--c-line); }
  /* Sur tablette, la colonne de gauche ne reste plus collée en haut : collée, elle débordait
     sur « Cours structuré » (trait vertical) et captait les clics du plan annoncé. */
  .transcription__gauche { position: static; height: auto; align-self: start; }
  .transcription__centre { border-bottom: 0; }
}
@media (max-width: 767px) {
  .transcription { display: block; padding-bottom: calc(var(--size-control) + var(--s-12)); }
  .transcription__gauche { position: static; height: auto; border-right: 0; padding: var(--s-4); }
  .transcription__centre { padding: 0 var(--s-4) var(--s-6); }
  .transcription__tete { margin: 0 calc(-1 * var(--s-4)) var(--s-4); padding: 0 var(--s-4); }
  .transcription__droite { display: none; }
}
.lecteur { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.lecteur__haut { display: flex; align-items: center; gap: var(--s-4); }
.lecteur__jouer { width: var(--size-fab); height: var(--size-fab); border: 0; border-radius: var(--r-pill); background: var(--c-bouton); color: var(--c-on-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.lecteur__jouer .sty-icon--lg { fill: currentColor; }
.lecteur__onde { flex: 1; display: flex; align-items: center; gap: var(--s-1); height: var(--s-10); overflow: hidden; }
.lecteur__onde i { display: block; width: var(--size-filet-epais); height: calc(var(--s-1) * var(--h, 2)); border-radius: var(--r-pill); background: var(--c-line-strong); flex-shrink: 0; }
.lecteur__onde i:nth-child(-n+8) { background: var(--c-accent); }
.lecteur__temps { font: var(--t-ui); font-weight: 600; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.lecteur__piste { width: 100%; accent-color: var(--c-accent); min-height: var(--size-touch); }
.lecteur__bas { display: flex; justify-content: space-between; font: var(--t-small); color: var(--c-ink-3); }
.lecteur__commandes { display: flex; align-items: center; justify-content: center; gap: var(--s-4); }
.lecteur__vitesse select { border: 0; background: var(--c-tile); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); min-height: var(--size-tuile-sm); font: var(--t-small); font-weight: 600; color: var(--c-ink-2); cursor: pointer; }
.segments { display: flex; flex-direction: column; gap: var(--s-2); }
.segment { display: grid; grid-template-columns: var(--size-barre-haute) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.segment__t { border: 0; background: none; padding: var(--s-2) 0; font: var(--t-small); font-weight: 600; color: var(--c-ink-3); cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; min-height: var(--size-touch); display: inline-flex; align-items: flex-start; gap: var(--s-1); }
.segment__texte { font: var(--t-read); letter-spacing: var(--tr-read); color: var(--c-ink-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-lg); }
.segment--actif .segment__t { color: var(--c-accent-text); }
.segment--actif .segment__texte { background: var(--c-accent-wash); color: var(--c-ink); }
.segment--trou .segment__texte { color: var(--c-warn-strong); font-style: italic; }
.segments:not(.segments--correction) .segment__texte { cursor: pointer; }
.segments--correction .segment__texte { outline: var(--size-filet) dashed var(--c-line-strong); background: var(--c-card); color: var(--c-ink); }
.transcrire { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.transcrire .sty-progress { width: 100%; }
.transcrire__direct { font: var(--t-body); color: var(--c-ink-2); min-height: 1.6em; }
.plan-cartes { display: flex; flex-direction: column; gap: var(--s-3); }
.plan-carte { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); text-align: left; cursor: pointer; font: var(--t-ui); color: var(--c-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .plan-carte:hover { border-color: var(--c-accent); background: var(--c-accent-soft); } }

/* ==========================================================
   14 · Listes avec panneau : inbox, questions, recherche
   ========================================================== */
.vue-page--moyenne { max-width: calc(var(--size-read) + var(--size-sous-nav) + 2 * var(--s-12)); }
.vue-page--etroite { max-width: calc(var(--size-editeur) + 2 * var(--s-12) + var(--s-16)); }
.titre-avec-compte { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.titre-avec-compte .vue-sous { margin: 0; }
.vue-titre--sous { font: var(--t-card-title); letter-spacing: var(--tr-card-title); }
.texte-danger, .sty-btn.texte-danger { color: var(--c-err-strong); }
.sty-btn--secondary.texte-danger { border-color: var(--c-err-soft); }
.note-bas { display: flex; align-items: flex-start; gap: var(--s-2); margin-top: var(--s-5); font: var(--t-small); color: var(--c-ink-3); }
.note-bas .sty-icon { flex-shrink: 0; width: var(--s-5); height: var(--s-5); }
.lien-bouton { display: block; width: 100%; text-align: left; background: none; border: 0; padding: var(--s-2) 0; font: var(--t-ui); color: var(--c-ink); cursor: pointer; min-height: var(--size-touch); }
.lien-bouton:hover { color: var(--c-accent-text); }

.panneau-tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5); border-bottom: var(--size-filet) solid var(--c-line);
  position: sticky; top: 0; background: var(--c-card); z-index: 1; font: var(--t-ui);
}
.panneau-tete .gras { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panneau-pied--deux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.panneau-pied--pile { display: flex; flex-direction: column; gap: var(--s-2); }
.panneau-pied--pile:empty { display: none; }
.panneau-ligne--bouton { width: 100%; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-md); }
.panneau-ligne--bouton:hover { background: var(--c-sunken); }
.notion-detail__titre { font: var(--t-card-title); letter-spacing: var(--tr-card-title); margin: 0; overflow-wrap: anywhere; }
.bloc { display: block; }

.inbox-ligne--choisie, .liste > .inbox-ligne--choisie { background: var(--c-accent-wash); }
/* Sur le surlignage, le gris tertiaire tombe sous 4,5:1 : on remonte d'un cran. */
.inbox-ligne--choisie .meta, .inbox-ligne--choisie .sty-row__meta, .notif--non-lue .notif__quand, .notif--non-lue .meta { color: var(--c-ink-2); }
.inbox-ligne .sty-row__tile { background: var(--c-card); }
.inbox-note { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.question-ligne .sty-row__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.question-detail__titre { font: var(--t-body); font-weight: 600; margin: 0; }
.question-detail__reponse { font: var(--t-body); color: var(--c-ink-2); white-space: pre-wrap; }

.recherche__champ { position: relative; display: flex; align-items: center; margin-bottom: var(--s-4); }
.recherche__champ > .sty-icon { position: absolute; left: var(--s-4); color: var(--c-ink-2); pointer-events: none; }
.recherche__champ .sty-input { height: var(--size-recherche); padding-left: calc(var(--s-4) + var(--s-8)); padding-right: calc(var(--s-16) + var(--s-12)); font: var(--t-body); border-color: var(--c-accent); box-shadow: 0 0 0 var(--size-filet) var(--c-accent-soft); }
.recherche__compte { position: absolute; right: var(--s-4); pointer-events: none; }
.recherche-liste .resultat { align-items: flex-start; text-decoration: none; }
.resultat__extrait { display: block; font: var(--t-ui); color: var(--c-ink-2); margin: var(--s-1) 0; }
.resultat mark, .panneau-corps mark { background: var(--c-surligne); color: inherit; border-radius: var(--r-xs); padding: 0 var(--size-filet); }
.recherche-aide, .recherche-vide { padding: var(--s-8) 0; max-width: var(--size-read); }
.recherche-vide__titre { font: var(--t-title); letter-spacing: var(--tr-title); margin: 0 0 var(--s-2); }
.recherche-vide .sty-btn { margin-top: var(--s-4); }
@media (max-width: 767px) {
  .recherche__champ .sty-input { padding-right: var(--s-4); }
  .recherche__compte { display: none; }
}

/* ==========================================================
   15 · Planning
   ========================================================== */
.planning .entete { align-items: center; }
/* Sur un écran moyen avec le panneau ouvert, les boutons passent à la ligne au lieu de glisser sous le panneau. */
.planning .entete__actions { flex-shrink: 1; min-width: 0; }
.planning-nav { display: flex; align-items: center; gap: var(--s-1); }
.planning-vues { display: flex; width: 100%; margin-bottom: var(--s-4); }
.planning-vues button { flex: 1; }
.semaine { --h-heure: var(--size-heure-planning); padding: 0; overflow: hidden; }
.semaine__tete, .semaine__corps { display: grid; grid-template-columns: var(--size-heure) repeat(7, minmax(0, 1fr)); }
.semaine__tete { border-bottom: var(--size-filet) solid var(--c-line); position: sticky; top: 0; background: var(--c-card); z-index: 2; }
.semaine__jour { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); padding: var(--s-3) var(--s-1) var(--s-2); border-left: var(--size-filet) solid var(--c-line); min-width: 0; }
.semaine__lettre { font: var(--t-micro); letter-spacing: var(--tr-micro); color: var(--c-ink-2); }
.semaine__num { display: grid; place-items: center; width: var(--size-point-actif); height: var(--size-point-actif); min-width: calc(var(--size-point-actif) + var(--s-1)); min-height: calc(var(--size-point-actif) + var(--s-1)); border-radius: var(--r-pill); font: var(--t-ui); }
.semaine__jour--auj .semaine__lettre { color: var(--c-accent-text); }
.semaine__jour--auj .semaine__num { background: var(--c-bouton); color: var(--c-on-accent); font-weight: 600; }
.semaine__corps { position: relative; height: calc(var(--heures) * var(--h-heure) + var(--s-4)); }
.semaine__heures { position: relative; }
.semaine__heures span { position: absolute; right: var(--s-2); top: calc(var(--h) * var(--h-heure) - var(--s-2)); font: var(--t-micro); color: var(--c-ink-3); }
.semaine__heures span:first-child { top: var(--s-1); }
.semaine__col { position: relative; border-left: var(--size-filet) solid var(--c-line);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2 * var(--h-heure) - var(--size-filet)), var(--c-line) calc(2 * var(--h-heure) - var(--size-filet)), var(--c-line) calc(2 * var(--h-heure))); }
.evt {
  position: absolute; left: var(--s-1); right: var(--s-1);
  top: calc(var(--debut) * var(--h-heure) + var(--size-filet)); height: calc(var(--duree) * var(--h-heure) - var(--size-filet-epais));
  min-height: calc(var(--h-heure) * 0.6);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden;
  padding: var(--s-1) var(--s-2); text-align: left; cursor: pointer;
  border-radius: var(--r-sm); border: var(--size-filet) solid var(--c-line-strong); background: var(--c-sunken); color: var(--c-ink);
  font: inherit;
}
.evt:hover { box-shadow: var(--shadow-default); z-index: 1; }
.evt__titre { font: var(--t-micro); font-weight: 700; letter-spacing: 0; text-transform: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.evt--court .evt__titre { display: block; white-space: nowrap; text-overflow: ellipsis; }
.evt--court .evt__meta { display: none; }
.evt__meta { font: var(--t-micro); font-weight: 400; color: var(--c-ink-2); text-transform: none; letter-spacing: 0; }
.evt--perso { background: var(--c-accent-wash); border-color: var(--c-accent); color: var(--c-accent-text); }
.evt--perso .evt__meta { color: var(--c-accent-text); }
.evt--groupe { background: var(--c-accent-wash); border-color: var(--c-accent); color: var(--c-accent-text); }
.evt--fait { background: var(--c-ok-soft); border-color: var(--c-ok); color: var(--c-ok-strong); }
.evt--propose { background: var(--c-card); border: var(--size-filet-epais) dashed var(--c-accent); color: var(--c-accent-text); }
.evt-examen { display: block; width: 100%; margin-top: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--c-warn-soft); color: var(--c-warn-strong); font: var(--t-micro); font-weight: 700; letter-spacing: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bande-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-1); margin-bottom: var(--s-5); }
.bande-jours__j { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; min-height: var(--size-touch); border: 0; background: none; cursor: pointer; font: var(--t-small); font-weight: 600; color: var(--c-ink-2); border-radius: var(--r-lg); }
.bande-jours__j b { display: grid; place-items: center; width: var(--size-control); height: var(--size-control); border-radius: var(--r-pill); font: var(--t-body); font-weight: 400; color: var(--c-ink); }
.bande-jours__j--auj span { color: var(--c-accent-text); }
.bande-jours__j--choisi b { background: var(--c-bouton); color: var(--c-on-accent); font-weight: 700; }

.ligne-evt { align-items: stretch; gap: var(--s-4); }
.ligne-evt__heure { display: flex; flex-direction: column; align-items: center; width: var(--size-heure); flex-shrink: 0; font: var(--t-small); color: var(--c-ink-2); }
.ligne-evt__heure b { font: var(--t-ui); font-weight: 700; color: var(--c-ink); }
.ligne-evt__barre { width: var(--size-filet-epais); border-radius: var(--r-pill); background: var(--c-line-strong); flex-shrink: 0; align-self: stretch; }
.ligne-evt--perso .ligne-evt__barre, .ligne-evt--groupe .ligne-evt__barre { width: calc(2 * var(--size-filet-epais)); background: var(--c-accent); }
.ligne-evt--fait .ligne-evt__barre { background: var(--c-ok); }
.ligne-evt--propose .ligne-evt__barre { background: none; border-left: var(--size-filet-epais) dashed var(--c-accent); }

.mois { padding: 0; overflow: hidden; }
.mois__tete, .mois__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mois__tete span { padding: var(--s-2); text-align: center; font: var(--t-micro); letter-spacing: var(--tr-micro); color: var(--c-ink-2); border-bottom: var(--size-filet) solid var(--c-line); }
.mois__case { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-1); min-height: var(--size-case-jour); padding: var(--s-2); border: 0; border-right: var(--size-filet) solid var(--c-line); border-bottom: var(--size-filet) solid var(--c-line); background: var(--c-card); cursor: pointer; text-align: left; font: inherit; min-width: 0; }
.mois__case:nth-child(7n) { border-right: 0; }
.mois__case:hover { background: var(--c-sunken); }
.mois__case--hors { background: var(--c-page); color: var(--c-ink-3); }
.mois__num { font: var(--t-small); font-weight: 600; }
.mois__case--auj .mois__num { display: inline-grid; place-items: center; align-self: flex-start; width: var(--size-point-actif); height: var(--size-point-actif); border-radius: var(--r-pill); background: var(--c-bouton); color: var(--c-on-accent); }
.mois__evt { font: var(--t-micro); letter-spacing: 0; padding: var(--size-filet-epais) var(--s-1); border-radius: var(--r-xs); background: var(--c-accent-wash); color: var(--c-accent-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mois__evt--fait { background: var(--c-ok-soft); color: var(--c-ok-strong); }
.mois__evt--propose { background: none; border: var(--size-filet) dashed var(--c-accent); }
.mois__evt--groupe { background: var(--c-sunken); color: var(--c-ink); }
@media (max-width: 767px) {
  .mois__case { min-height: calc(var(--size-case-jour) * 0.6); padding: var(--s-1); }
  .mois__evt { font-size: 0; height: var(--s-1); padding: 0; }
  .mois__case .evt-examen { font-size: 0; height: var(--s-1); padding: 0; }
}

.planning-prop { margin-bottom: var(--s-3); }
.ligne-retard { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; font: var(--t-ui); color: var(--c-ink); text-decoration: none; }
.ligne-retard b { font-weight: 700; }
.accent-warn { color: var(--c-warn-strong); }
.planning-note { margin-top: auto; }
.planning-props-mobile .panneau-corps { padding: 0; margin-top: var(--s-5); }

/* ==========================================================
   16 · Progression
   ========================================================== */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-bottom: var(--s-5); }
.chiffre { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6); }
.chiffre__valeur { font: var(--t-display); letter-spacing: var(--tr-display); color: var(--c-ink); }
.grille-stats { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.stat-colonne { display: flex; flex-direction: column; gap: var(--s-5); }
.stat-bloc { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.stat-bloc > .sty-section-label { margin: 0; }
.stat-bloc__tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.stat-bloc__tete .sty-section-label { margin: 0; }
.barres-matieres { display: flex; flex-direction: column; gap: var(--s-5); }
.barre-matiere { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); color: var(--c-ink); text-decoration: none; }
.barre-matiere__nom { font: var(--t-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-matiere .meta b { color: var(--c-ink); }
.barre-matiere__barre { grid-column: 1 / -1; }
.barre-matiere:hover .barre-matiere__nom { color: var(--c-accent-text); }
.histo { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-3); height: calc(var(--size-case-jour) * 1.6); align-items: end; border-bottom: var(--size-filet) solid var(--c-line); }
.histo__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-1); height: 100%; }
.histo__barre { width: 100%; max-width: var(--s-8); height: calc(var(--v) * (100% - var(--s-6))); min-height: var(--size-filet-epais); background: var(--c-accent); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.histo__barre--vide { background: var(--c-line); }
.histo__jour { font: var(--t-micro); color: var(--c-ink-2); padding-bottom: var(--s-1); }
.histo__col--auj .histo__jour { color: var(--c-ink); }
.empile { display: flex; gap: var(--size-filet-epais); height: var(--s-3); border-radius: var(--r-xs); overflow: hidden; }
.empile__seg--maitrise { background: var(--c-ok); }
.empile__seg--a_revoir { background: var(--c-warn); }
.empile__seg--jamais { background: var(--c-err); }
.carte-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); font: var(--t-small); color: var(--c-ink-2); }
.legende { display: inline-flex; align-items: center; gap: var(--s-2); }
.legende::before { content: ""; width: var(--s-3); height: var(--s-3); border-radius: var(--r-xs); background: var(--c-ok); }
.legende--a_revoir::before { background: var(--c-warn); }
.legende--jamais::before { background: var(--c-err); }
.carte-legende__note { margin-left: auto; }
@media (max-width: 1279px) { .grille-stats { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .chiffres { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .chiffre, .stat-bloc { padding: var(--s-5); }
  .carte-legende__note { margin-left: 0; }
}

/* ==========================================================
   17 · Carte des savoirs
   ========================================================== */
.carte-zone { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); overflow: hidden; }
.carte-zone > .carte-legende { border-top: var(--size-filet) solid var(--c-line); padding-top: var(--s-4); }
.carte-zone .legende::before { border-radius: 50%; width: var(--s-3); height: var(--s-3); }
.carte-zone .legende--maitrise::before { background: linear-gradient(140deg, var(--c-degrade-debut), var(--c-degrade-fin)); }
.carte-zone .legende--a_revoir::before { background: color-mix(in oklab, var(--c-degrade-fin) 35%, var(--c-card)); box-shadow: inset 0 0 0 var(--size-filet-epais) color-mix(in oklab, var(--c-degrade-fin) 60%, var(--c-card)); }
.carte-zone .legende--jamais::before { background: var(--c-card); box-shadow: none; border: var(--size-filet-epais) dashed color-mix(in oklab, var(--c-degrade-debut) 55%, var(--c-card)); box-sizing: border-box; }

/* La carte en bulles. Chaque bulle est placée par js/ecrans/carte.js (transform),
   la couleur porte le statut ET le mot est écrit dedans. */
.savoirs { position: relative; width: 100%; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse at 50% 45%, var(--c-accent-soft), transparent 70%); border-radius: var(--r-xl); }
.savoirs__liens { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.savoirs__liens path { fill: none; stroke: color-mix(in oklab, var(--c-degrade-fin) 34%, transparent); stroke-width: 1.8; stroke-linecap: round; transition: stroke var(--d-moyen) var(--ease-sortie), stroke-width var(--d-moyen) var(--ease-sortie), opacity var(--d-moyen) var(--ease-sortie); }
.savoirs--focus .savoirs__liens path { opacity: 0.35; }
.savoirs--focus .savoirs__liens path.actif { opacity: 1; stroke: var(--c-degrade-fin); stroke-width: 2.6; }

/* « Signature qui se remplit » : la bulle se remplit du dégradé de la marque à mesure que la notion est maîtrisée.
   Maîtrisé = pleine ; à revoir = à moitié teintée ; jamais révisé = vide, contour en pointillés.
   Le statut reste écrit (étiquette avec pastille de couleur) : la couleur n'est jamais seule. */
.savoir { --pastille: var(--c-ok);
  position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; border-radius: 50%; cursor: grab; color: var(--c-ink); font: inherit; z-index: 1; will-change: transform; }
.savoir--a_revoir { --pastille: var(--c-warn); }
.savoir--jamais { --pastille: var(--c-err); }
.savoir__flotte { display: block; width: 100%; height: 100%; }
.savoir__corps { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); width: 100%; height: 100%; border-radius: 50%; padding: 13%; text-align: center;
  transition: transform 420ms var(--ease-ressort), box-shadow var(--d-moyen) var(--ease-sortie), opacity var(--d-moyen) var(--ease-sortie), filter var(--d-moyen) var(--ease-sortie); }
.savoir--maitrise .savoir__corps { --ombre: 0 10px 24px color-mix(in oklab, var(--c-degrade-fin) 38%, transparent);
  background: radial-gradient(circle at 30% 22%, var(--c-reflet-bulle) 0, transparent 32%), linear-gradient(140deg, var(--c-degrade-debut), var(--c-degrade-fin));
  color: var(--c-sur-sombre); box-shadow: inset 0 -8px 18px var(--c-creux-bulle), var(--ombre); }
.savoir--a_revoir .savoir__corps { --ombre: 0 8px 20px color-mix(in oklab, var(--c-degrade-fin) 20%, transparent);
  background: radial-gradient(circle at 30% 22%, var(--c-reflet-bulle) 0, transparent 34%),
    linear-gradient(140deg, color-mix(in oklab, var(--c-degrade-debut) 30%, var(--c-card)), color-mix(in oklab, var(--c-degrade-fin) 40%, var(--c-card)));
  border: var(--size-filet-epais) solid color-mix(in oklab, var(--c-degrade-fin) 55%, var(--c-card)); box-shadow: var(--ombre); }
.savoir--jamais .savoir__corps { --ombre: 0 6px 16px rgba(9, 9, 11, 0.06);
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--c-reflet-bulle) 45%, transparent) 0, transparent 36%), var(--c-card);
  border: var(--size-filet-epais) dashed color-mix(in oklab, var(--c-degrade-debut) 45%, var(--c-card)); box-shadow: var(--ombre); }
.savoir__nom { font-family: var(--font); font-size: var(--nom, 14px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.18;
  overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.savoir--serre .savoir__nom { font-size: calc(var(--nom, 14px) * 0.88); }
.savoir__statut { display: inline-flex; align-items: center; gap: var(--s-1); padding: 1px var(--s-2); border-radius: var(--r-pill); white-space: nowrap;
  font: var(--t-micro); letter-spacing: 0.04em; text-transform: uppercase; background: var(--c-card); color: var(--c-ink-2); box-shadow: 0 0 0 var(--size-filet) var(--c-line); }
.savoir__statut::before { content: ""; width: var(--size-point-saisie); height: var(--size-point-saisie); border-radius: 50%; background: var(--pastille); }
.savoir--maitrise .savoir__statut { background: var(--c-etiquette-pleine); color: var(--c-sur-sombre); box-shadow: none; }
.savoir--maitrise { --pastille: var(--c-pastille-pleine); }

/* Survol : la bulle gonfle, ses voisines aussi un peu ; les autres s'effacent. */
.savoir--survol { z-index: 3; }
.savoir--survol .savoir__corps { transform: scale(1.12); }
.savoir--survol.savoir--maitrise .savoir__corps { box-shadow: inset 0 -8px 18px var(--c-creux-bulle), 0 16px 34px color-mix(in oklab, var(--c-degrade-fin) 50%, transparent); }
.savoir--survol:not(.savoir--maitrise) .savoir__corps { box-shadow: var(--shadow-floating); }
.savoir--voisine { z-index: 2; }
.savoir--voisine .savoir__corps { transform: scale(1.04); }
.savoirs--focus .savoir:not(.savoir--survol):not(.savoir--voisine):not(.savoir--choisie) .savoir__corps { opacity: 0.5; filter: saturate(0.6); }
.savoir:active .savoir__corps { transform: scale(0.96); }
.savoir--tenue { cursor: grabbing; z-index: 4; }
.savoir--tenue .savoir__corps { transform: scale(1.14); box-shadow: var(--shadow-modal); }
.savoirs--prise .savoir:not(.savoir--tenue) .savoir__corps { transition-duration: var(--d-lent); }
.savoir--choisie .savoir__corps { box-shadow: 0 0 0 3px var(--c-card), 0 0 0 5px var(--c-accent), var(--shadow-floating); }
.savoir:focus-visible { outline: none; }
.savoir:focus-visible .savoir__corps { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: 4px; }

/* Entrée : les bulles éclosent l'une après l'autre, puis les liens se dessinent ; ensuite elles flottent. */
.savoir__flotte { animation: bulle-eclot 560ms var(--ease-ressort) both; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
.savoir__corps { animation: bulle-flotte 6s ease-in-out var(--f, 0s) infinite; }
.savoirs__liens path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bulle-lien 700ms var(--ease-sortie) 380ms forwards; }
@keyframes bulle-eclot { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes bulle-lien { to { stroke-dashoffset: 0; } }
@keyframes bulle-flotte { 0%, 100% { translate: 0 0; } 33% { translate: 1.5px -3px; } 66% { translate: -1.5px 2px; } }
.savoirs--prise .savoir__corps, .savoir--survol .savoir__corps, .savoir--tenue .savoir__corps { animation-play-state: paused; }

@media (max-width: 767px) {
  .carte-zone { padding: var(--s-3); gap: var(--s-4); }
  .savoir__statut { padding: 0 var(--s-1); letter-spacing: 0; text-transform: none; font-size: 0.82em; }
  .savoir__statut::before { width: calc(var(--size-point-saisie) - 1px); height: calc(var(--size-point-saisie) - 1px); }
  .savoir__corps { padding: 12%; }
}

/* ==========================================================
   18 · Ressources et capture
   ========================================================== */
.grille-ressources { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--size-carte-min) * 0.62), 1fr)); gap: var(--s-4); }
.carte-ressource { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); text-align: left; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.carte-ressource:hover { box-shadow: var(--shadow-floating); }
.carte-ressource--choisie { border-color: var(--c-accent); box-shadow: 0 0 0 var(--size-filet) var(--c-accent); }
.carte-ressource__apercu { display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 3; border: var(--size-filet) solid var(--c-line); border-radius: var(--r-md); background: var(--c-sunken); color: var(--c-ink-3); margin-bottom: var(--s-2); }
.carte-ressource__titre { font: var(--t-ui); color: var(--c-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-ressource .sty-tag { margin-top: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot-ressources { padding: var(--s-8); }
.capture-depot--survol, .depot--survol, .depot-ressources.capture-depot--survol { border-color: var(--c-accent); background: var(--c-accent-wash); }
.apercu { display: block; width: 100%; min-height: calc(var(--size-case-jour) * 1.8); padding: var(--s-4); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-lg); background: var(--c-sunken); overflow: hidden; text-align: left; font: inherit; color: inherit; }
.apercu img { display: block; max-width: 100%; max-height: calc(var(--size-case-jour) * 3); margin: 0 auto; border-radius: var(--r-sm); }
.apercu--bouton { cursor: pointer; }
.apercu--bouton:hover { border-color: var(--c-line-strong); }
.apercu__texte { font: var(--t-small); color: var(--c-ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.apercu__icone { display: grid; place-items: center; min-height: inherit; color: var(--c-ink-3); }
.apercu__squelette { height: calc(var(--size-case-jour) * 1.5); }
.fiche-infos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; font: var(--t-small); }
.fiche-infos dt { color: var(--c-ink-3); }
.fiche-infos dd { margin: 0; text-align: right; color: var(--c-ink); overflow-wrap: anywhere; }

.capture-sous { margin: calc(-1 * var(--s-3)) 0 var(--s-5); font: var(--t-small); color: var(--c-ink-2); }
.capture-depot { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); border: var(--size-filet) dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-page); text-align: center; }
.capture-depot > .sty-icon { color: var(--c-ink-2); }
.capture-depot__titre { font: var(--t-body); font-weight: 600; margin: 0; }
.capture-depot__texte { font: var(--t-small); color: var(--c-ink-2); margin: 0 0 var(--s-2); }
.capture-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.capture-tuile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-lg); background: var(--c-card); text-align: left; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.capture-tuile:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-default); }
.capture-tuile .sty-row__tile { color: var(--c-accent-text); margin-bottom: var(--s-1); }
.capture-tuile__titre { font: var(--t-ui); font-weight: 600; }
.capture-tuile__texte { font: var(--t-small); color: var(--c-ink-2); }
.capture-destination { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-5); border-top: var(--size-filet) solid var(--c-line); }
.capture-destination .sty-label { margin: 0; flex-shrink: 0; color: var(--c-ink-2); }
.capture-destination .sty-select { flex: 1; min-width: 0; }
.capture-destination--mobile { flex-direction: column; align-items: stretch; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-4); }
.capture-liste { display: flex; flex-direction: column; }
.capture-option { display: flex; align-items: center; gap: var(--s-4); width: 100%; padding: var(--s-3) 0; min-height: calc(var(--size-control) + var(--s-4)); border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.capture-option .sty-row__tile { width: var(--size-tile-lg); height: var(--size-tile-lg); color: var(--c-accent-text); flex-shrink: 0; }
.capture-option__textes { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.capture-option__titre { font: var(--t-body); color: var(--c-ink); }
.capture-option__texte { font: var(--t-small); color: var(--c-ink-2); }
.capture-option__fleche { color: var(--c-ink-3); flex-shrink: 0; }
.calque-choix { display: flex; flex-direction: column; }
.capture-note { display: flex; align-items: flex-start; gap: var(--s-3); margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: var(--size-filet) solid var(--c-line); font: var(--t-small); color: var(--c-ink-2); }
.capture-note .sty-icon { flex-shrink: 0; }
.capture-suivi:empty { display: none; }
.capture-suivi { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.capture-ligne { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--c-sunken); flex-wrap: wrap; }
.capture-ligne__titre { flex: 1; min-width: 0; font: var(--t-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.capture-ligne__etat { font: var(--t-small); color: var(--c-ink-2); }
.capture-ligne__etat[data-ton="ok"] { color: var(--c-ok-strong); }
.capture-ligne__etat[data-ton="err"] { color: var(--c-err-strong); }
@media (max-width: 1023px) { .capture-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================
   19 · Groupes
   ========================================================== */
.sty-avatar--reste { background: var(--c-tile); color: var(--c-ink-2); }
.sty-avatar--grand { width: var(--size-avatar-lg); height: var(--size-avatar-lg); font: var(--t-title); }
.liste-groupes { display: flex; flex-direction: column; gap: var(--s-4); }
.carte-groupe { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); color: inherit; text-decoration: none; }
.carte-groupe:hover { box-shadow: var(--shadow-floating); }
.carte-groupe__haut { display: flex; align-items: center; gap: var(--s-4); }
.carte-groupe__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.carte-groupe__nom { font: var(--t-title); letter-spacing: var(--tr-title); margin: 0; overflow-wrap: anywhere; }
.carte-groupe__dernier { display: flex; align-items: baseline; gap: var(--s-2); font: var(--t-ui); color: var(--c-ink-2); min-width: 0; }
.carte-groupe__dernier b { color: var(--c-ink); font-weight: 600; flex-shrink: 0; }
.carte-groupe__dernier span:not(.meta) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groupes-rejoindre { width: 100%; margin-top: var(--s-4); }

/* la page d'un groupe occupe la hauteur : le fil défile, le compositeur reste */
.groupe { display: flex; height: 100vh; height: 100dvh; min-height: 0; }
.groupe--page { height: auto; min-height: 100vh; min-height: 100dvh; }
.groupes-colonne { width: var(--size-sous-nav); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-3); border-right: var(--size-filet) solid var(--c-line); background: var(--c-card); overflow-y: auto; }
.groupes-colonne__tete { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-2) var(--s-2); }
.groupes-colonne__g { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-lg); color: var(--c-ink); text-decoration: none; min-height: var(--size-touch); }
.groupes-colonne__g:hover { background: var(--c-sunken); }
.groupes-colonne__g[aria-current="page"] { background: var(--c-accent-soft); }
.groupes-colonne__g[aria-current="page"] .groupes-colonne__nom { color: var(--c-accent-text); font-weight: 600; }
.groupes-colonne__nom { font: var(--t-ui); }
.groupes-colonne__g .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groupe__centre { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.groupe-tete { display: flex; align-items: center; gap: var(--s-5); padding: 0 var(--s-6); min-height: calc(var(--size-control) + var(--s-4)); border-bottom: var(--size-filet) solid var(--c-line); background: var(--c-card); flex-shrink: 0; position: sticky; top: 0; z-index: 3; }
.groupe-tete__nom { font: var(--t-body); font-weight: 700; margin: 0; min-width: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groupe-tete__onglets { border-bottom: 0; align-self: stretch; }
.groupe-tete__onglets .sty-tab { display: inline-flex; align-items: center; height: 100%; }
.groupe-tete__actions { margin-left: auto; display: flex; gap: var(--s-2); }
.groupe__page { flex: 1; padding: var(--s-8) var(--s-6) var(--s-12); max-width: calc(var(--size-read) + var(--size-sous-nav)); width: 100%; }
.groupe__page .entete { margin-bottom: var(--s-6); }

.fil-discussion { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6); overscroll-behavior: contain; }
.fil-jour, .message-systeme { display: flex; justify-content: center; }
.fil-jour span { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--c-tile); font: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--c-ink-2); }
.message-systeme span { font: var(--t-small); color: var(--c-ink-3); text-align: center; }
.message { display: flex; align-items: flex-end; gap: var(--s-3); max-width: min(80%, calc(var(--size-read) * 0.9)); }
.message--mien { align-self: flex-end; flex-direction: row-reverse; }
.message__avatar { margin-bottom: calc(var(--s-5) + var(--s-1)); }
.message__corps { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.message--mien .message__corps { align-items: flex-end; }
.bulle { padding: var(--s-3) var(--s-4); border-radius: var(--r-xl); border: var(--size-filet) solid var(--c-line); background: var(--c-card); color: var(--c-ink); overflow-wrap: anywhere; }
.message--mien .bulle { background: var(--c-bouton); border-color: var(--c-bouton); color: var(--c-on-accent); }
.message--mien .bulle--doc, .message--mien .bulle--vocal { background: var(--c-card); border-color: var(--c-line); color: var(--c-ink); }
.message--echec .bulle { opacity: 0.7; }
.bulle__texte { margin: 0; font: var(--t-body); white-space: pre-wrap; }
.bulle--doc .bulle__texte { margin-top: var(--s-2); }
.message__meta { display: flex; align-items: center; gap: var(--s-2); font: var(--t-micro); letter-spacing: 0; text-transform: none; color: var(--c-ink-3); padding: 0 var(--s-1); }
.message__suppr { display: inline-grid; place-items: center; width: var(--size-touch); height: calc(var(--size-touch) * 0.6); border: 0; background: none; color: var(--c-ink-3); cursor: pointer; border-radius: var(--r-sm); opacity: 0; }
.message:hover .message__suppr, .message__suppr:focus-visible { opacity: 1; }
@media (hover: none) { .message__suppr { opacity: 1; } }
.doc-cite { display: flex; align-items: center; gap: var(--s-3); border: 0; background: none; padding: var(--s-1) 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.doc-cite .sty-row__tile { width: var(--size-tile-lg); height: var(--size-tile-lg); color: var(--c-accent-text); }
.vocal { display: flex; align-items: center; gap: var(--s-3); min-width: calc(var(--size-carte-min) * 0.75); }
.vocal__jouer { display: grid; place-items: center; width: var(--size-touch); height: var(--size-touch); border-radius: var(--r-pill); border: 0; background: var(--c-bouton); color: var(--c-on-accent); cursor: pointer; flex-shrink: 0; }
.vocal__piste { flex: 1; height: var(--s-1); border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.vocal__rempli { display: block; height: 100%; width: 0; background: var(--c-accent); }
.vocal__duree { font: var(--t-small); font-weight: 600; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.doc-lecture { max-height: 60vh; overflow-y: auto; margin: var(--s-4) 0; }

.composer { display: flex; align-items: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-top: var(--size-filet) solid var(--c-line); background: var(--c-card); flex-shrink: 0; }
.composer .sty-icon-btn { width: var(--size-control); height: var(--size-control); border: var(--size-filet) solid var(--c-line-strong); border-radius: var(--r-lg); flex-shrink: 0; }
.composer__texte { flex: 1; min-height: var(--size-control); max-height: calc(var(--size-control) * 3); resize: none; padding-top: var(--s-3); }
.composer__envoyer { background: var(--c-bouton); color: var(--c-on-accent); border-color: var(--c-accent) !important; }
.composer--vocal { align-items: center; background: var(--c-err-soft); }
.composer__rec { flex: 1; display: flex; align-items: center; gap: var(--s-2); font: var(--t-ui); font-weight: 600; color: var(--c-err-strong); font-variant-numeric: tabular-nums; }
.composer__point { width: var(--size-point); height: var(--size-point); border-radius: var(--r-pill); background: var(--c-rec); animation: clignote 1.2s var(--ease-in-out) infinite; }
.composer__ecoute { flex: 1; min-width: 0; height: var(--size-control); }
@keyframes clignote { 50% { opacity: 0.3; } }

.membre-mini { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.membre-mini__nom { flex: 1; min-width: 0; font: var(--t-ui); }
.membre-tete { display: flex; align-items: center; gap: var(--s-4); }

.tableau-docs__tete, .tableau-docs__ligne { display: grid; grid-template-columns: var(--size-tile-lg) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); }
.tableau-membres__tete, .tableau-membres__ligne { display: grid; grid-template-columns: var(--size-tile-lg) minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); }
.tableau-docs__tete, .tableau-membres__tete { font: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--c-ink-2); border-bottom: var(--size-filet) solid var(--c-line); }
.tableau-docs__ligne, .tableau-membres__ligne { width: 100%; min-height: calc(var(--size-control) + var(--s-6)); border: 0; border-bottom: var(--size-filet) solid var(--c-line); background: none; text-align: left; font: var(--t-ui); color: var(--c-ink); cursor: pointer; }
.tableau-docs__ligne:last-child, .tableau-membres__ligne:last-child { border-bottom: 0; }
.tableau-docs__ligne:hover, .tableau-membres__ligne:hover { background: var(--c-sunken); }
.tableau-membres__ligne .sty-avatar { width: var(--size-tile-lg); height: var(--size-tile-lg); }
.invitation { align-items: center; margin-bottom: var(--s-5); }
.invitation__textes { flex: 1; min-width: 0; }
.invitation-code { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5); margin: var(--s-4) 0; border-radius: var(--r-lg); background: var(--c-sunken); }
.invitation-code__valeur { font: var(--t-display); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.choix-liste { display: flex; flex-direction: column; gap: var(--s-2); }
.choix-visibilite { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-lg); cursor: pointer; font: var(--t-ui); }
.choix-visibilite input { width: var(--s-5); height: var(--s-5); margin: var(--size-filet-epais) 0 0; accent-color: var(--c-accent); flex-shrink: 0; }
.choix-visibilite--actif { border-color: var(--c-accent); background: var(--c-accent-wash); }
.choix-visibilite--actif .gras, .choix-visibilite--actif > span > span:first-child { color: var(--c-accent-text); }
.choix-membres { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3) var(--s-4); margin-top: var(--s-2); border-radius: var(--r-md); background: var(--c-sunken); }
.sessions-liste { display: flex; flex-direction: column; gap: var(--s-3); }
.sessions-liste--passees { opacity: 0.75; }
.sessions-passees { margin-top: var(--s-8); }
.session-groupe { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-4) var(--s-5); }
.session-groupe__date { display: flex; flex-direction: column; align-items: center; width: var(--size-tile-lg); flex-shrink: 0; padding-right: var(--s-5); border-right: calc(2 * var(--size-filet-epais)) solid var(--c-accent); }
.session-groupe__date b { font: var(--t-title); }
.session-groupe__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.session-groupe__membres { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-1); }
.session-groupe__actions { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 1279px) {
  .groupe-tete { flex-wrap: wrap; gap: 0 var(--s-4); padding: var(--s-2) var(--s-5) 0; }
  .groupe-tete__nom { max-width: none; flex: 1; }
  .groupe-tete__onglets { order: 3; width: 100%; }
}
@media (max-width: 767px) {
  .groupe--page { height: auto; }
  .groupe-tete { padding: var(--s-2) var(--s-3) 0; }
  .groupe-tete__nom { font: var(--t-title); }
  .groupe-tete__onglets { overflow-x: auto; scrollbar-width: none; }
  .groupe__page { padding: var(--s-5) var(--s-4) var(--s-12); }
  .fil-discussion { padding: var(--s-4); }
  .message { max-width: 90%; }
  .composer { padding: var(--s-3) var(--s-4); }
  .tableau-docs__ligne, .tableau-membres__ligne { grid-template-columns: var(--size-tile-lg) minmax(0, 1fr) auto; padding: var(--s-3) var(--s-4); }
  .session-groupe { flex-wrap: wrap; gap: var(--s-3); }
  .session-groupe__actions { width: 100%; justify-content: flex-start; }
  .invitation { flex-wrap: wrap; }
}

/* ==========================================================
   20 · Réglages, profil, notifications, aide
   ========================================================== */
.reglages--colonne { display: grid; grid-template-columns: var(--size-sous-nav) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.reglages__nav { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-8) var(--s-3); border-right: var(--size-filet) solid var(--c-line); background: var(--c-card); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.reglages__nav-titre { font: var(--t-title); letter-spacing: var(--tr-title); margin: 0 var(--s-3) var(--s-4); }
.reglages__page { width: 100%; max-width: calc(var(--size-read) + 2 * var(--s-12)); margin: 0 auto; padding: var(--s-8) var(--s-12) var(--s-16); display: flex; flex-direction: column; gap: var(--s-6); }
.reglages__page > .sty-callout { margin: 0; }
.reglages__tete .vue-sous { max-width: var(--size-read); }
.reglages__page--plus { gap: var(--s-5); }
.reglages__page--plus .entete { margin-bottom: 0; }
.reglages-carte { padding: var(--s-5) var(--s-6) var(--s-2); scroll-margin-top: var(--s-6); transition: box-shadow var(--d-popover) var(--ease-out); }
.reglages-carte--vise { box-shadow: 0 0 0 var(--size-filet-epais) var(--c-accent); }
.reglages-carte__label { display: block; margin: 0 0 var(--s-2); }
.reglages-carte__note { padding: 0 0 var(--s-4); margin: 0; }
.reglage { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: var(--size-filet) solid var(--c-line); min-height: calc(var(--size-control) + var(--s-4)); }
.reglages-carte > .reglage:last-child, .reglages-carte > div:last-child > .reglage { border-bottom: 0; }
.reglage[hidden] { display: none; }
.reglage__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.reglage__titre { font: var(--t-body); color: var(--c-ink); cursor: default; }
label.reglage__titre { cursor: pointer; }
.reglage__texte { font: var(--t-small); color: var(--c-ink-2); }
.reglage__valeur { font: var(--t-ui); color: var(--c-ink-2); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.reglage .sty-btn, .reglage .sty-tag { flex-shrink: 0; }
.reglage__select { width: auto; min-width: calc(var(--size-control) * 2.2); flex-shrink: 0; }
.reglage--sous { padding-top: 0; }
.reglage__plage { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.reglage__plage .sty-label { margin: 0; }
.reglage-segments { display: flex; width: 100%; margin: var(--s-2) 0 var(--s-3); }
.reglage-segments button { flex: 1; min-height: var(--size-touch); }
.puces-choix { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) 0 var(--s-4); }
.puces-choix .sty-chip { min-height: var(--size-touch); }
.reglages-ligne { gap: var(--s-4); min-height: calc(var(--size-control) + var(--s-5)); text-decoration: none; color: var(--c-ink); }
.reglages-ligne > .sty-icon:first-child { color: var(--c-ink-2); }
.reglages-ligne__fleche { color: var(--c-ink-3); }
.reglages-version { text-align: center; margin: 0; }

.carte-profil { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); color: inherit; text-decoration: none; }
.carte-profil:hover { box-shadow: var(--shadow-floating); }
.carte-profil__textes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.carte-profil__nom { font: var(--t-card-title); letter-spacing: var(--tr-card-title); overflow-wrap: anywhere; }
.carte-profil .sty-avatar--grand { background: var(--c-tile); }
.tuiles-plus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.tuile-plus { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-5) var(--s-2); min-height: calc(var(--size-case-jour) * 0.8); text-align: center; color: var(--c-ink); text-decoration: none; font: var(--t-ui); box-shadow: none; }
.tuile-plus .sty-icon { color: var(--c-accent-text); width: var(--s-6); height: var(--s-6); }
.tuile-plus:hover { border-color: var(--c-line-strong); }

.choix-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding: var(--s-2) 0 var(--s-4); }
.choix-theme { display: flex; flex-direction: column; gap: var(--s-3); cursor: pointer; }
.choix-theme__apercu { display: flex; flex-direction: column; gap: var(--s-3); aspect-ratio: 8 / 5; padding: var(--s-3); border: var(--size-filet) solid var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-apercu-clair); }
.choix-theme__apercu span:first-child { height: var(--s-2); width: 50%; border-radius: var(--r-pill); background: var(--c-apercu-clair-2); }
.choix-theme__apercu span:last-child { flex: 1; border-radius: var(--r-md); background: var(--c-apercu-clair-3); }
.choix-theme__apercu--sombre { background: var(--c-apercu-sombre); border-color: var(--c-apercu-sombre); }
.choix-theme__apercu--sombre span:first-child { background: var(--c-apercu-sombre-2); }
.choix-theme__apercu--sombre span:last-child { background: var(--c-apercu-sombre-3); }
.choix-theme__apercu--systeme { background: linear-gradient(90deg, var(--c-apercu-clair) 50%, var(--c-apercu-sombre) 50%); }
.choix-theme__apercu--systeme span { opacity: 0.35; }
.choix-theme__apercu--systeme span:first-child { background: var(--c-apercu-clair-2); }
.choix-theme__apercu--systeme span:last-child { background: var(--c-apercu-sombre-2); }
.choix-theme:has(input:checked) .choix-theme__apercu { border-color: var(--c-accent); box-shadow: 0 0 0 var(--size-filet) var(--c-accent); }
.choix-theme .sty-choice { align-items: center; font: var(--t-ui); }
.curseur-texte { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; }
.curseur-texte__petit { font: var(--t-small); font-weight: 700; color: var(--c-ink-2); }
.curseur-texte__grand { font: var(--t-title); color: var(--c-ink); }
.curseur-texte input[type="range"] { flex: 1; accent-color: var(--c-accent); height: var(--size-touch); }
.apercu-texte { margin: 0 0 var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--c-sunken); font: var(--t-read); color: var(--c-ink); }

.profil { display: flex; flex-direction: column; gap: var(--s-6); }
.profil__tete { display: flex; align-items: center; gap: var(--s-6); }
.profil__avatar { width: calc(var(--size-avatar-lg) * 1.5); height: calc(var(--size-avatar-lg) * 1.5); font: var(--t-screen); background: var(--c-tile); }
.profil__textes { flex: 1; min-width: 0; }
.profil__nom { font: var(--t-card-title); letter-spacing: var(--tr-card-title); }
.profil__textes .vue-sous { margin-top: var(--s-1); }
.chiffres-profil { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.chiffre-profil { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5); }
.chiffre-profil__n { font: var(--t-card-title); letter-spacing: var(--tr-card-title); }
.fiche-profil { padding: var(--s-2) var(--s-6); }
.fiche-infos--profil { grid-template-columns: auto minmax(0, 1fr); gap: 0; font: var(--t-ui); }
.fiche-infos--profil dt, .fiche-infos--profil dd { padding: var(--s-4) 0; border-bottom: var(--size-filet) solid var(--c-line); }
.fiche-infos--profil dt:last-of-type, .fiche-infos--profil dd:last-of-type { border-bottom: 0; }
.fiche-infos--profil dt { color: var(--c-ink-2); }
.fiche-infos--profil dd { font: var(--t-body); }
.profil__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.notifs { display: flex; flex-direction: column; background: var(--c-card); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-default); }
.notifs__label { display: block; padding: var(--s-3) var(--s-5); background: var(--c-page); border-bottom: var(--size-filet) solid var(--c-line); }
.notifs__groupe + .notifs__groupe .notifs__label { border-top: var(--size-filet) solid var(--c-line); }
.notif { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5); color: var(--c-ink); text-decoration: none; border-bottom: var(--size-filet) solid var(--c-line); }
.notifs__lignes > .notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--c-sunken); }
.notif--non-lue { background: var(--c-accent-wash); }
.notif__icone { display: grid; place-items: center; width: var(--size-tile); height: var(--size-tile); border-radius: var(--r-md); background: var(--c-tile); color: var(--c-accent-text); flex-shrink: 0; }
.notif--non-lue .notif__icone { background: var(--c-card); }
.notif--echeance .notif__icone { background: var(--c-warn-soft); color: var(--c-warn-strong); }
.notif--partage .notif__icone, .notif--groupe .notif__icone { color: var(--c-ink-2); }
.notif__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.notif__titre { font: var(--t-body); }
.notif--non-lue .notif__titre { font-weight: 600; }
.notif__texte { font: var(--t-ui); color: var(--c-ink-2); }
.notif__quand { font: var(--t-small); color: var(--c-ink-3); white-space: nowrap; }

.aide { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--size-panel) - var(--s-4)); gap: var(--s-8); align-items: start; }
.aide__formulaire { display: flex; flex-direction: column; gap: var(--s-5); }
.aide__sujets { border: 0; padding: 0; margin: 0; min-width: 0; }
.aide__sujets .puces-choix { padding-bottom: 0; }
.aide__message { min-height: calc(var(--size-case-jour) * 2.4); }
.depot { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: var(--size-filet) dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-card); }
.depot > .sty-icon { color: var(--c-ink-2); flex-shrink: 0; }
.depot__texte { flex: 1; min-width: 0; font: var(--t-ui); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aide__envoi { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.aide__cote { display: flex; flex-direction: column; gap: var(--s-4); }
.aide__carte { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.aide__carte > .sty-section-label { margin: 0 0 var(--s-1); }
.aide__carte > a { font: var(--t-ui); padding: var(--s-1) 0; }
.aide__faq { display: flex; flex-direction: column; }
.etat-service { display: flex; align-items: center; gap: var(--s-2); margin: 0; font: var(--t-ui); color: var(--c-ink); }
.etat-service .sty-icon { color: var(--c-ok); flex-shrink: 0; }
.etat-service--ko .sty-icon { color: var(--c-err); }
.texte-legal { padding: var(--s-6); }
.texte-legal h2 { font: var(--t-title); letter-spacing: var(--tr-title); margin: var(--s-6) 0 var(--s-2); }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p { font: var(--t-body); color: var(--c-ink-2); margin: 0; }

@media (max-width: 1279px) {
  .aide { grid-template-columns: minmax(0, 1fr); }
  .reglages__page { padding: var(--s-6); }
}
@media (max-width: 767px) {
  .reglages__page { padding: var(--s-4) var(--s-4) var(--s-12); gap: var(--s-5); }
  .reglages-carte { padding: var(--s-4) var(--s-5) var(--s-1); }
  .reglage { flex-wrap: wrap; }
  .reglage:has(.sty-switch) { flex-wrap: nowrap; }
  .reglage__valeur { text-align: left; }
  .choix-themes { gap: var(--s-2); }
  .profil__tete { flex-direction: column; text-align: center; gap: var(--s-4); }
  .profil__avatar { width: calc(var(--size-avatar-lg) * 2); height: calc(var(--size-avatar-lg) * 2); }
  .profil__nom { font: var(--t-screen); letter-spacing: var(--tr-screen); }
  .chiffres-profil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
  .chiffre-profil { align-items: center; text-align: center; padding: var(--s-4) var(--s-2); }
  .fiche-profil { padding: var(--s-1) var(--s-5); }
  .profil__actions { flex-direction: column; }
  .profil__actions .sty-btn { width: 100%; }
  .notifs { background: none; border: 0; box-shadow: none; overflow: visible; gap: var(--s-5); }
  .notifs__label { background: none; border: 0 !important; padding: 0 0 var(--s-3); }
  .notifs__lignes { display: flex; flex-direction: column; gap: var(--s-3); }
  .notif { border: var(--size-filet) solid var(--c-line); border-radius: var(--r-xl); background: var(--c-card); }
  .notif--non-lue { background: var(--c-accent-wash); border-color: var(--c-accent-soft); }
  .notif__icone { width: var(--size-tile-lg); height: var(--size-tile-lg); }
  .aide__envoi .sty-btn { width: 100%; }
}
.reglages__page > .section__tete { margin: 0 0 calc(-1 * var(--s-3)); }
.panneau-section .reglage { padding: var(--s-3) 0; min-height: var(--size-control); }
.panneau-section .reglage:last-of-type { border-bottom: 0; }
.reglages__page:has(.aide) { max-width: calc(var(--size-read) + var(--size-panel) + 2 * var(--s-12)); }
@media (max-width: 767px) {
  .reglage:not(:has(.sty-switch)):has(.sty-btn) .reglage__textes { flex: 1 1 100%; }
}
.evt > span { flex-shrink: 0; max-width: 100%; }
.barre-matiere__barre, .barre-matiere__barre .sty-progress__fill { display: block; }
@media (max-width: 767px) {
  .planning .entete { flex-wrap: wrap; row-gap: var(--s-3); }
  .planning .entete__actions { display: contents; }
  .planning-nav { order: 3; flex-basis: 100%; justify-content: space-between; }
}
@media (max-width: 767px) {
  .groupe-tete__nom { font: var(--t-body); font-weight: 700; }
  .groupe-tete { min-height: 0; }
}
@media (max-width: 1279px) {
  .liste > .inbox-ligne--choisie, .inbox-ligne--choisie, .carte-ressource--choisie { background: var(--c-card); }
  .carte-ressource--choisie { border-color: var(--c-line); box-shadow: var(--shadow-default); }
}

/* Les contrôles natifs (cases, heures, listes) suivent le thème. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
button { color: inherit; }
.mois__case { color: var(--c-ink); }
@media (max-width: 767px) {
  .scene-rec__haut { padding-left: calc(var(--size-touch) + var(--s-4)); padding-right: calc(var(--size-touch) + var(--s-4)); }
  .scene-rec__cours select { max-width: calc(100vw - 2 * var(--size-touch) - var(--s-16) - var(--s-8)); text-overflow: ellipsis; }
}

/* Barre de recherche : un seul cadre, le champ, le compteur et la croix côte à côte :
   rien ne se superpose, quelle que soit la longueur du texte. */
.recherche__champ { display: flex; align-items: center; gap: var(--s-3); height: var(--size-recherche); padding: 0 var(--s-2) 0 var(--s-4);
  border: var(--size-filet) solid var(--c-accent); border-radius: var(--r-xl); background: var(--c-card); box-shadow: 0 0 0 var(--size-filet) var(--c-accent-soft); }
.recherche__champ > .sty-icon { position: static; flex-shrink: 0; }
.recherche__champ .sty-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; }
.recherche__champ .sty-input:focus { outline: none; }
.recherche__champ:focus-within { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: var(--size-filet-epais); }
.recherche__champ .sty-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.recherche__compte { position: static; flex-shrink: 0; white-space: nowrap; }
.recherche__effacer { flex-shrink: 0; color: var(--c-ink-2); }
.recherche__effacer[hidden] { display: none; }

/* ==========================================================
   21 · Graphiques générés
   ========================================================== */
.graphique { display: flex; flex-direction: column; gap: var(--s-3); }
.graphique__titre { font: var(--t-ui); font-weight: 600; margin: 0; }
.graphique svg { display: block; width: 100%; max-width: var(--size-graphique); height: auto; }
.graphique__legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: var(--t-small); color: var(--c-ink-2); }
.graphique__serie { display: inline-flex; align-items: center; gap: var(--s-2); }
.graphique__pastille { width: var(--s-3); height: var(--s-3); border-radius: var(--r-xs); background: var(--c-serie-1); }
.graphique__pastille--2 { background: var(--c-serie-2); }
.graphique__pastille--3 { background: var(--c-serie-3); }
.graphique__pastille--4 { background: var(--c-serie-4); }
.graphique__donnees summary { cursor: pointer; font: var(--t-small); color: var(--c-accent-text); min-height: var(--size-touch); display: flex; align-items: center; }
.graphique__donnees table { width: 100%; border-collapse: collapse; font: var(--t-small); }
.graphique__donnees th, .graphique__donnees td { padding: var(--s-1) var(--s-2); border-bottom: var(--size-filet) solid var(--c-line); text-align: left; }
.graphique__donnees td { text-align: right; font-variant-numeric: tabular-nums; }

/* Correction automatique dans l'éditeur */
.bascule-correction { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--size-touch); padding: 0 var(--s-3); flex-shrink: 0;
  border: var(--size-filet) solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-card); color: var(--c-ink-2); font: var(--t-small); font-weight: 600; cursor: pointer; white-space: nowrap; }
.bascule-correction:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
.bascule-correction[aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-text); }
.bascule-correction--pause[aria-pressed="true"] { background: var(--c-warn-soft); border-color: var(--c-warn); color: var(--c-warn-strong); }
.bloc-corrige { background: var(--c-accent-wash); border-radius: var(--r-xs); transition: background var(--d-sheet) var(--ease-out); }
.instruction-suggestion--refus { background: var(--c-sunken); }
@media (max-width: 767px) {
  .bascule-correction { padding: 0; width: var(--size-touch); justify-content: center; }
  .bascule-correction [data-mot-correction] { position: absolute; width: var(--size-filet); height: var(--size-filet); overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .coquille--panneau .bascule-correction [data-mot-correction] { display: none; }
}

/* ==========================================================
   22 · Emploi du temps importé
   ========================================================== */
.evt--cours { background: var(--c-sunken); border-color: var(--c-line-strong); color: var(--c-ink); }
.ligne-evt--cours .ligne-evt__barre { width: calc(2 * var(--size-filet-epais)); background: var(--c-ink-3); }
.mois__evt--cours { background: var(--c-tile); color: var(--c-ink); }
.edt { display: flex; flex-direction: column; gap: var(--s-4); }
.edt .calque__texte { margin: 0; }
.edt-periode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.edt-periode .sty-field { margin: 0; }
.edt-liste { display: flex; flex-direction: column; border: var(--size-filet) solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; max-height: 55vh; overflow-y: auto; }
.edt-ligne { display: grid; grid-template-columns: var(--size-touch) calc(var(--size-case-jour) + var(--s-4)) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-2); border-bottom: var(--size-filet) solid var(--c-line); }
.edt-ligne:last-child { border-bottom: 0; }
.edt-ligne--ko { background: var(--c-warn-soft); }
.edt-ligne__coche { display: grid; place-items: center; width: var(--size-touch); height: var(--size-touch); cursor: pointer; }
.edt-ligne__coche input { width: var(--s-5); height: var(--s-5); accent-color: var(--c-accent); }
.edt-ligne__quand { display: flex; flex-direction: column; font: var(--t-ui); }
.edt-ligne__quoi { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.edt-ligne__titre { height: var(--size-touch); }
.edt-ligne__reglages { display: flex; flex-direction: column; gap: var(--s-2); }
.edt-ligne__select { height: var(--size-touch); min-width: calc(var(--size-case-jour) * 1.7); max-width: calc(var(--size-case-jour) * 2.2); }
.edt-import { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; font: var(--t-ui); }
.panneau-section > .sty-btn--full { margin-top: var(--s-3); }
@media (max-width: 767px) {
  .edt-ligne { grid-template-columns: var(--size-touch) minmax(0, 1fr); padding-right: var(--s-3); }
  .edt-ligne__quand { grid-column: 2; }
  .edt-ligne__quoi, .edt-ligne__reglages { grid-column: 1 / -1; }
  .edt-ligne__select { max-width: none; }
  .edt-periode { grid-template-columns: minmax(0, 1fr); }
  .planning-importer { width: var(--size-control); padding: 0; justify-content: center; }
}
/* Un en-tête chargé d'actions passe à la ligne plutôt que d'écraser le titre. */
.entete { flex-wrap: wrap; }
.entete__textes { flex: 1 1 var(--size-colonne-sm); }
@media (max-width: 767px) { .entete__textes { flex-basis: auto; } }

/* La barre de l'éditeur reste sur une ligne : la bascule de correction se réduit à son icône quand la place manque. */
.bascule-correction { position: relative; }
@media (max-width: 1279px) {
  .bascule-correction { padding: 0; width: var(--size-touch); justify-content: center; }
  .bascule-correction [data-mot-correction] { position: absolute; width: var(--size-filet); height: var(--size-filet); overflow: hidden; clip: rect(0 0 0 0); }
}
.coquille--panneau .editeur--plan .bascule-correction { padding: 0; width: var(--size-touch); justify-content: center; }
.coquille--panneau .editeur--plan .bascule-correction [data-mot-correction] { position: absolute; width: var(--size-filet); height: var(--size-filet); overflow: hidden; clip: rect(0 0 0 0); }
@media (min-width: 768px) and (max-width: 1279px) { .editeur-barre__fil { display: none; } }
@media (max-width: 767px) {
  .editeur-barre { flex-wrap: nowrap; gap: var(--s-2); }
  .editeur-barre .editeur-puce { flex: 0 1 auto; min-width: 0; }
  .editeur-barre__ressort { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 1279px) { .editeur-plan { display: none; } }

/* ==========================================================
   23 · Boutons principaux, bascules, assistant (maquette Figma)
   ========================================================== */
/* Bouton principal : violet plein au repos, dégradé au survol. Le dégradé est un
   calque qui apparaît en fondu (un dégradé ne se transitionne pas directement). */
.sty-btn--primary, .sty-fab {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-bouton); color: var(--c-on-accent);
  transition: box-shadow var(--d-popover) var(--ease-out), transform var(--d-press) var(--ease-out);
}
.sty-btn--primary:not(.sty-btn--sm) { border-radius: var(--r-bouton); }
.sty-btn--primary::before, .sty-fab::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--degrade-bouton); opacity: 0; transition: opacity var(--d-popover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .sty-btn--primary:hover:not(:disabled), .sty-fab:hover { background: var(--c-bouton); box-shadow: var(--shadow-bouton); }
  .sty-btn--primary:hover:not(:disabled)::before, .sty-fab:hover::before { opacity: 1; }
}
.sty-btn--primary:focus-visible::before, .sty-fab:focus-visible::before { opacity: 1; }
.sty-btn--primary:active:not(:disabled), .sty-fab:active { transform: translateY(1px); box-shadow: none; }
.sty-btn--primary:disabled { background: var(--c-bouton); opacity: 0.45; }

/* Bascule : grise éteinte, en dégradé allumée, rond blanc ombré. */
.sty-switch { width: var(--size-bascule-l); height: var(--size-bascule-h); }
.sty-switch__track { background: var(--c-bascule-eteinte); box-shadow: var(--shadow-bascule-eteinte); overflow: hidden; isolation: isolate; }
.sty-switch__track::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--degrade-bascule); box-shadow: var(--shadow-bascule-active); opacity: 0; transition: opacity var(--d-press) ease; }
.sty-switch__track::after {
  top: calc((var(--size-bascule-h) - var(--size-bascule-rond)) / 2); left: calc((var(--size-bascule-h) - var(--size-bascule-rond)) / 2);
  width: var(--size-bascule-rond); height: var(--size-bascule-rond);
  background: var(--c-apercu-clair-3); box-shadow: var(--shadow-bouton);
}
.sty-switch input:checked + .sty-switch__track { background: var(--c-bascule-eteinte); }
.sty-switch input:checked + .sty-switch__track::before { opacity: 1; }
.sty-switch input:checked + .sty-switch__track::after { transform: translateX(calc(var(--size-bascule-l) - var(--size-bascule-h))); }
.sty-switch input:disabled + .sty-switch__track { opacity: 0.5; }
.sty-switch { min-height: var(--size-bascule-h); }
.sty-switch input { min-height: var(--size-touch); top: 50%; transform: translateY(-50%); height: var(--size-touch); }

/* Assistant IA : rond, logo noir et blanc éteint, en couleur et auréolé allumé. */
.bascule-correction {
  position: relative; flex-shrink: 0;
  width: var(--size-assistant); height: var(--size-assistant); min-height: 0; padding: 0; gap: 0;
  display: inline-grid; place-items: center;
  border: var(--size-filet) solid var(--c-ink); border-radius: var(--r-pill);
  background: var(--c-assistant-eteint); color: var(--c-ink); cursor: pointer;
}
.bascule-correction [data-mot-correction] { position: absolute; width: var(--size-filet); height: var(--size-filet); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bascule-correction::before {
  content: ""; position: absolute; inset: calc(-1 * var(--s-1)); z-index: -1; border-radius: var(--r-pill);
  background: var(--degrade-halo); filter: blur(var(--s-1)); opacity: 0; transition: opacity var(--d-popover) var(--ease-out);
}
.bascule-correction[aria-pressed="true"] { background: var(--c-assistant-fond); border-color: var(--c-assistant-bord); color: var(--c-accent-text); }
.bascule-correction[aria-pressed="true"]::before { opacity: 1; }
.bascule-correction--pause[aria-pressed="true"] { background: var(--c-assistant-fond); border-color: var(--c-warn); border-width: var(--size-filet-epais); }
.bascule-correction--pause[aria-pressed="true"]::before { opacity: 0.35; }
.bascule-correction:hover { border-color: var(--c-accent); }
.assistant-logo { display: block; width: var(--size-assistant-icone); height: auto; }
.assistant-logo--actif { display: none; }
[aria-pressed="true"] > .assistant-logo--actif { display: block; }
[aria-pressed="true"] > .assistant-logo--inactif { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bascule-correction:not([aria-pressed="true"]) { border-color: var(--c-ink-2); } }
:root[data-theme="dark"] .bascule-correction:not([aria-pressed="true"]) { border-color: var(--c-ink-2); }
.assistant-secours { display: none; }
.bascule-correction--sans-logo .assistant-logo { display: none !important; }
.bascule-correction--sans-logo .assistant-secours { display: block; }

/* Correctifs (retours du 24/09) :
   - un bouton principal qui est un lien garde son texte blanc au survol ;
   - l'assistant se dessine en couches : halo, puis pastille, puis logo détouré,
     pour que le halo ne passe jamais devant la pastille, quel que soit le navigateur. */
a.sty-btn--primary, a.sty-btn--primary:hover, a.sty-btn--primary:visited, a.sty-btn--primary:focus,
.sty-btn--primary:hover, .sty-fab:hover { color: var(--c-on-accent); text-decoration: none; }

.bascule-correction, .bascule-correction[aria-pressed="true"], .bascule-correction:hover {
  isolation: isolate; background: transparent; border: 0;
}
.bascule-correction::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--r-pill);
  background: var(--c-assistant-eteint); border: var(--size-filet) solid var(--c-ink);
  transition: background var(--d-popover) var(--ease-out), border-color var(--d-popover) var(--ease-out);
}
.bascule-correction::before { z-index: -2; }
.bascule-correction[aria-pressed="true"]::after { background: var(--c-assistant-fond); border-color: var(--c-assistant-bord); }
.bascule-correction--pause[aria-pressed="true"]::after { border: var(--size-filet-epais) solid var(--c-warn); }
.bascule-correction:hover::after { border-color: var(--c-accent); }
.bascule-correction:focus-visible { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: var(--size-filet-epais); }
.assistant-logo { position: relative; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bascule-correction:not([aria-pressed="true"])::after { background: var(--c-card); border-color: var(--c-ink-2); }
  :root:not([data-theme="light"]) .assistant-logo--inactif { filter: invert(1); }
}
:root[data-theme="dark"] .bascule-correction:not([aria-pressed="true"])::after { background: var(--c-card); border-color: var(--c-ink-2); }
:root[data-theme="dark"] .assistant-logo--inactif { filter: invert(1); }

/* ---------------------------------------------------------------
   24. Cibles minimales (audit clavier du jalon 12)
   Les liens d'action et de fil d'Ariane atteignent au moins 24 px
   de haut (WCAG 2.5.8) ; les actions de ligne, la cible tactile.
   --------------------------------------------------------------- */
.sty-row__action { display: inline-flex; align-items: center; min-height: var(--size-touch); padding-inline: var(--s-2); margin-inline-end: calc(-1 * var(--s-2)); border-radius: var(--r-sm); }
a.sty-row__title { display: inline-block; padding-block: var(--s-1); }
.fil a, .lecture-barre__fil a, a.lecture-barre__fil { display: inline-block; padding-block: var(--s-1); }

/* ---------------------------------------------------------------
   25. Couleurs des cours dans le planning
   Chaque cours garde sa couleur (réglages : prefs.planning_couleurs).
   Fond teinté, barre latérale pleine, texte à l'encre : le contraste
   ne dépend jamais de la teinte.
   --------------------------------------------------------------- */
.evt[data-couleur], .mois__evt[data-couleur] {
  background: color-mix(in oklab, var(--teinte) var(--mix-cours), var(--c-card));
  border-color: color-mix(in oklab, var(--teinte) 45%, var(--c-card));
  box-shadow: inset calc(2 * var(--size-filet-epais)) 0 0 var(--teinte);
  color: var(--c-ink);
}
.evt[data-couleur] { padding-left: calc(var(--s-2) + var(--size-filet-epais)); }
.evt[data-couleur] .evt__meta { color: var(--c-ink-2); }
.evt[data-couleur]:hover { box-shadow: inset calc(2 * var(--size-filet-epais)) 0 0 var(--teinte), var(--shadow-default); }
.ligne-evt[data-couleur] .ligne-evt__barre { width: calc(2 * var(--size-filet-epais)); background: var(--teinte); }
[data-couleur="1"] { --teinte: var(--c-cours-1); } [data-couleur="2"] { --teinte: var(--c-cours-2); } [data-couleur="3"] { --teinte: var(--c-cours-3); }
[data-couleur="4"] { --teinte: var(--c-cours-4); } [data-couleur="5"] { --teinte: var(--c-cours-5); }
[data-couleur="6"] { --teinte: var(--c-cours-6); } [data-couleur="7"] { --teinte: var(--c-cours-7); }
[data-couleur="8"] { --teinte: var(--c-cours-8); }

.nuancier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.nuancier__choix { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-height: var(--size-touch); padding: var(--s-3) var(--s-2);
  border: var(--size-filet) solid var(--c-line); border-radius: var(--r-md); background: var(--c-card); color: var(--c-ink); font: var(--t-small); cursor: pointer; }
.nuancier__choix:hover { border-color: var(--c-line-strong); }
.nuancier__choix[aria-pressed="true"] { border-color: var(--c-ink); box-shadow: inset 0 0 0 var(--size-filet) var(--c-ink); font-weight: 600; }
.nuancier__pastille { width: var(--s-8); height: var(--s-8); border-radius: var(--r-pill); background: var(--teinte); }
.planning-legende { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; }
.planning-legende li { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-small); color: var(--c-ink-2); max-width: 100%; }
.planning-legende__pastille { flex-shrink: 0; width: var(--s-3); height: var(--s-3); border-radius: var(--r-pill); background: var(--teinte); }
.planning-legende__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-legende { flex-direction: column; gap: 0; } .planning-legende .sty-btn { padding-inline: 0; justify-content: flex-start; min-width: 0; max-width: 100%; }
.evt__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.planning-legende .sty-btn { color: var(--c-ink); font-weight: 500; }

/* ---------------------------------------------------------------
   26. Plan annoncé (enregistrement et transcription)
   --------------------------------------------------------------- */
.scene-rec__plan { width: 100%; max-width: var(--size-champ); text-align: left; margin-top: calc(-1 * var(--s-4)); }
.scene-rec__plan summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--size-touch); cursor: pointer; font: var(--t-ui); font-weight: 600; color: var(--c-sur-sombre); }
.scene-rec__plan summary .meta { color: var(--c-sur-sombre-2); font-weight: 400; }
.scene-rec__plan .sty-label { color: var(--c-sur-sombre-2); margin-top: var(--s-2); }
.scene-rec__plan .sty-textarea { background: var(--c-scene-2); border-color: var(--c-scene-ligne); color: var(--c-sur-sombre); width: 100%; }
.scene-rec__plan .meta { color: var(--c-sur-sombre-2); margin-top: var(--s-2); }
.plan-annonce { margin-bottom: var(--s-4); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-md); padding: 0 var(--s-3); background: var(--c-card); }
.plan-annonce summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--size-touch); cursor: pointer; }
.plan-annonce[open] { padding-bottom: var(--s-3); }
.plan-annonce .sty-textarea { width: 100%; }
.plan-annonce .meta { margin-top: var(--s-2); }

/* ---------------------------------------------------------------
   27. Cartes de cours personnalisées
   La carte reste un lien ; le bouton ⋮ est posé par-dessus, à côté
   (un bouton ne peut pas vivre dans un lien).
   --------------------------------------------------------------- */
.carte-cours-bloc { position: relative; min-width: 0; }
.carte-cours-bloc > .carte-cours { height: 100%; overflow: hidden; }
.carte-cours__haut { padding-right: calc(var(--size-touch) - var(--s-2)); }
.carte-cours--habillee .carte-cours__haut { padding-right: 0; }

.banniere-cours {
  height: var(--size-banniere-cours); border-radius: var(--r-md);
  background-color: var(--teinte, var(--c-cours-1));
  background-image: linear-gradient(135deg, var(--teinte, var(--c-cours-1)) 0%, color-mix(in oklab, var(--teinte, var(--c-cours-1)) 62%, var(--c-card)) 100%);
  background-size: cover; background-position: center;
}
.banniere-cours--image { background-color: var(--c-sunken); background-image: none; transition: opacity var(--d-popover) var(--ease-out); opacity: 0.4; }
.banniere-cours--image.banniere-cours--prete { opacity: 1; }
.banniere-cours--neutre { background: var(--c-sunken); }
.carte-cours__banniere { margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) 0; border-radius: 0; }
.carte-cours--habillee .tuile-cours { margin-top: calc(-1 * var(--s-8)); box-shadow: 0 0 0 var(--size-anneau-tuile) var(--c-card); position: relative; }
.tuile-cours[data-couleur] { background: color-mix(in oklab, var(--teinte) 16%, var(--c-card)); color: color-mix(in oklab, var(--teinte) 70%, var(--c-ink)); }

.carte-cours__menu {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 1;
  width: var(--size-touch); height: var(--size-touch); display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-2); cursor: pointer;
  transition: background-color var(--d-press) ease, color var(--d-press) ease, transform var(--d-press) var(--ease-out), box-shadow var(--d-press) ease;
}
.carte-cours__menu:hover { background: var(--c-sunken); color: var(--c-ink); }
.carte-cours__menu:active { transform: scale(0.94); }
.carte-cours__menu--sur-banniere { background: color-mix(in oklab, var(--c-card) 88%, transparent); color: var(--c-ink); box-shadow: var(--shadow-default); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.carte-cours__menu--sur-banniere:hover { background: var(--c-card); }

/* Les trois points : chacun fait un tour complet autour du centre, l'un après l'autre,
   dépasse un peu puis se repose à sa place. */
.points-anime { width: var(--size-icone-md); height: var(--size-icone-md); fill: currentColor; overflow: visible; }
.points-anime__p { transform-box: view-box; transform-origin: 12px 12px; }
@keyframes points-tour {
  0%   { transform: rotate(0deg) scale(1); }
  55%  { transform: rotate(380deg) scale(1.18); }
  78%  { transform: rotate(352deg) scale(0.96); }
  100% { transform: rotate(360deg) scale(1); }
}
@media (hover: hover) and (pointer: fine) {
  .carte-cours__menu:hover .points-anime__p { animation: points-tour 820ms var(--ease-in-out) both; }
  .carte-cours__menu:hover .points-anime__p:nth-child(2) { animation-delay: 70ms; }
  .carte-cours__menu:hover .points-anime__p:nth-child(3) { animation-delay: 140ms; }
}
.carte-cours__menu:focus-visible .points-anime__p { animation: points-tour 820ms var(--ease-in-out) both; }
.carte-cours__menu:focus-visible .points-anime__p:nth-child(2) { animation-delay: 70ms; }
.carte-cours__menu:focus-visible .points-anime__p:nth-child(3) { animation-delay: 140ms; }
@media (prefers-reduced-motion: reduce) { .points-anime__p { animation: none !important; } }
:root[data-mouvement-reduit] .points-anime__p { animation: none !important; }

@media (max-width: 767px) {
  .carte-cours__banniere { order: -1; flex-basis: calc(100% + 2 * var(--s-5)); margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) 0; height: var(--size-banniere-cours-mobile); }
  .carte-cours--habillee .tuile-cours { margin-top: calc(-1 * var(--s-6)); align-self: flex-start; }
  /* L'étiquette passe sous le titre : le nom du cours garde toute la largeur. */
  .carte-cours__haut .sty-tag { order: 2; margin-left: calc(var(--size-tile-lg) + var(--s-4)); margin-top: calc(-1 * var(--s-2)); }
  .carte-cours__textes { flex: 1 1 calc(100% - var(--size-tile-lg) - var(--s-4)); }
  .carte-cours:not(.carte-cours--habillee) { padding-right: calc(var(--size-touch) + var(--s-2)); }
  .carte-cours__menu { top: var(--s-2); right: var(--s-2); }
}

/* La fenêtre « Personnaliser la carte » */
.apparence { display: flex; flex-direction: column; gap: var(--s-5); }
.apparence__apercu { position: relative; border-radius: var(--r-lg); overflow: hidden; border: var(--size-filet) solid var(--c-line); }
.apparence__apercu .banniere-cours { border-radius: 0; height: var(--size-banniere-cours); }
.apparence__nom { display: block; padding: var(--s-3) var(--s-4); font: var(--t-card-title); letter-spacing: var(--tr-card-title); background: var(--c-card); }
.apparence__groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.apparence__groupe legend { margin-bottom: var(--s-2); padding: 0; }
.nuancier--cours { grid-template-columns: repeat(auto-fill, minmax(var(--size-nuance), 1fr)); }
.nuancier__pastille--aucune { background: var(--c-card); border: var(--size-filet-epais) dashed var(--c-line-strong); }
.apparence__image { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.apparence__fichier { position: relative; }
.apparence__fichier:focus-within { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: var(--size-filet-epais); }

/* Bannière en tête de la page du cours */
.cours-banniere { height: var(--size-banniere-page); border-radius: var(--r-lg); margin-bottom: var(--s-5); }
@media (max-width: 767px) { .cours-banniere { height: var(--size-banniere-cours-mobile); border-radius: var(--r-md); margin-bottom: var(--s-4); } }
.apparence__groupe .meta { margin-top: var(--s-2); }

/* ---------------------------------------------------------------
   28. Fond des groupes
   La trame du logo, fixe sous les messages (une par groupe). Le jour, les
   messages système et l'état vide gardent une pastille opaque ; noms et
   heures sont posés à même le fond, contraste mesuré à 4,5:1.
   --------------------------------------------------------------- */
/* Le fond (kit « trame-fond-discussion ») : posé sur le cadre qui ne défile pas ; la liste
   des messages défile dedans, le motif reste immobile comme un papier sous les messages.
   Le SVG ne porte que des points blancs (masque) ; la couleur vient de --c-fond-point. */
.fil-cadre { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fil-cadre > .fil-discussion { flex: 1; background: transparent; }
.sty-fond-trame { position: relative; isolation: isolate; background-color: var(--c-page); }
.sty-fond-trame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--c-fond-point);
  -webkit-mask-image: url("../img/fond-trame.svg"); mask-image: url("../img/fond-trame.svg");
  -webkit-mask-size: var(--fond-trame-taille) var(--fond-trame-taille); mask-size: var(--fond-trame-taille) var(--fond-trame-taille);
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.sty-fond-trame[style*="--fond-trame"]::before { -webkit-mask-image: var(--fond-trame); mask-image: var(--fond-trame); }
@media (prefers-contrast: more) { .sty-fond-trame::before { display: none; } }
@media print { .sty-fond-trame::before { display: none; } }
.fil-jour span { background: var(--c-card); box-shadow: var(--shadow-default); color: var(--c-ink-2); }
.message-systeme span { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--c-card); color: var(--c-ink-2); box-shadow: var(--shadow-default); }
.fil-discussion .message__meta { align-self: flex-start; }
.fil-discussion .message--mien .message__meta { align-self: flex-end; }
.fil-discussion .bulle { box-shadow: var(--shadow-default); }
.fil-discussion > .sty-empty { margin: auto; max-width: var(--size-champ); background: var(--c-card); border-radius: var(--r-xl); box-shadow: var(--shadow-default); padding: var(--s-6); }
.fil-discussion .sty-avatar { background: color-mix(in oklab, var(--c-accent) 14%, var(--c-card)); box-shadow: 0 0 0 var(--size-filet-epais) var(--c-card); }

/* ---------------------------------------------------------------
   29. Abonnement
   --------------------------------------------------------------- */
.formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 767px) { .formules { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
.formule { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); position: relative; }
.formule--max { border: var(--size-filet-epais) solid transparent; background: linear-gradient(var(--c-card), var(--c-card)) padding-box, var(--degrade-bouton) border-box; }
.formule__tete { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--s-8); }
.formule__nom { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-card-title); letter-spacing: var(--tr-card-title); margin: 0; }
.formule--max .formule__nom .sty-icon { color: var(--c-accent-text); }
.formule__accroche { margin: 0; font: var(--t-ui); color: var(--c-ink-2); }
.formule__prix { margin: 0; }
.formule__montant { font: var(--t-heading); letter-spacing: var(--tr-heading); }
.formule__liste { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.formule__liste li { display: flex; gap: var(--s-2); align-items: flex-start; font: var(--t-ui); }
.formule__liste .sty-icon { flex-shrink: 0; width: var(--size-icone-sm); height: var(--size-icone-sm); margin-top: calc(var(--s-1) / 2); color: var(--c-ok-strong); }
.formule--max .formule__liste .sty-icon { color: var(--c-accent-text); }
.formule__action { margin-top: auto; padding-top: var(--s-3); }

/* ==========================================================
   Lecteur flottant de l'enregistrement (js/lecteur-flottant.js)
   Une pastille sombre, façon îlot : chrono, son qui arrive, 3 commandes.
   ========================================================== */
.ilot { --ilot-marge: var(--s-4);
  position: fixed; z-index: 60; display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1); border-radius: var(--r-pill); background: var(--c-scene); color: var(--c-sur-sombre);
  box-shadow: 0 0 0 var(--size-filet) var(--c-scene-ligne), var(--shadow-modal);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform 460ms var(--ease-ressort), box-shadow var(--d-moyen) var(--ease-sortie); }
.ilot[data-ancre^="haut"] { top: calc(env(safe-area-inset-top, 0px) + var(--ilot-marge)); }
.ilot[data-ancre^="bas"] { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--ilot-marge)); }
.ilot[data-ancre$="gauche"] { left: var(--ilot-marge); }
.ilot[data-ancre$="droite"] { right: var(--ilot-marge); }
.ilot[data-ancre$="centre"] { left: 0; right: 0; margin-inline: auto; width: max-content; }
@media (max-width: 1279px) { .ilot[data-ancre^="bas"] { bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom, var(--s-5)) + var(--s-3)); } }
@media (min-width: 1280px) { .ilot[data-ancre$="gauche"] { left: calc(var(--size-sidebar) + var(--ilot-marge)); } }
.ilot--tenu { cursor: grabbing; transition: box-shadow var(--d-moyen) var(--ease-sortie); box-shadow: 0 0 0 var(--size-filet) var(--c-scene-ligne), 0 18px 48px rgba(9, 9, 11, 0.32); }

.ilot__ouvrir { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--size-touch); padding: 0 var(--s-3) 0 var(--s-4);
  border: 0; border-radius: var(--r-pill); background: transparent; color: inherit; font: inherit; cursor: inherit; text-align: left; }
.ilot__point { width: 10px; height: 10px; border-radius: 50%; background: var(--c-rec); flex-shrink: 0; box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-rec) 60%, transparent); animation: ilot-battement 1.6s ease-out infinite; }
.ilot__textes { display: flex; flex-direction: column; line-height: 1.1; }
.ilot__chrono { font: var(--t-ui); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.ilot__etat { font: var(--t-micro); letter-spacing: var(--tr-micro); color: var(--c-sur-sombre-2); }
.ilot__onde { display: inline-flex; align-items: center; gap: 3px; height: 20px; }
.ilot__onde i { display: block; width: 3px; height: 20px; border-radius: 2px; background: var(--c-scene-onde); transform: scaleY(var(--h, 0.2)); transition: transform 140ms linear; }
.ilot__actions { display: inline-flex; gap: 2px; }
.ilot__btn { width: var(--size-touch); height: var(--size-touch); border: 0; border-radius: 50%; background: var(--c-sur-sombre-bouton); color: var(--c-sur-sombre);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--d-rapide) var(--ease-sortie), transform var(--d-rapide) var(--ease-sortie); }
.ilot__btn .sty-icon { width: var(--size-icone-sm); height: var(--size-icone-sm); }
@media (hover: hover) { .ilot__btn:hover { background: color-mix(in srgb, var(--c-sur-sombre) 24%, transparent); } }
.ilot__btn:active { transform: scale(0.92); }
.ilot :focus-visible { outline: var(--size-filet-epais) solid var(--c-scene-onde); outline-offset: 2px; }
.ilot--pause .ilot__point { background: var(--c-scene-eteint); animation: none; }
.ilot--pause .ilot__chrono { color: var(--c-sur-sombre-2); }
.ilot--pause .ilot__onde i { transform: scaleY(0.15); }
@media (max-width: 420px) { .ilot__etat { display: none; } .ilot__ouvrir { padding-left: var(--s-3); gap: var(--s-2); } }

/* Le bouton « Réduire » de l'écran d'enregistrement */
@media (max-width: 767px) {
  .scene-rec__haut { position: relative; }
  .scene-rec__reduire { position: absolute; top: var(--s-4); right: var(--s-4); width: var(--size-touch); height: var(--size-touch); padding: 0; justify-content: center; border-radius: 50%; }
  .scene-rec__reduire-mot { display: none; }
}
.scene-rec__reduire { margin-left: auto; color: var(--c-sur-sombre); background: var(--c-sur-sombre-bouton); border-color: transparent; }
@media (hover: hover) { .scene-rec__reduire:hover { background: color-mix(in srgb, var(--c-sur-sombre) 24%, transparent); color: var(--c-sur-sombre); } }

/* « En train d'écrire » dans un groupe : une bulle posée au-dessus du champ de saisie. */
.saisie { position: relative; height: 0; z-index: 2; flex-shrink: 0; }
.saisie__interieur { position: absolute; left: var(--s-6); bottom: var(--s-3); display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border-radius: var(--r-pill); background: var(--c-card); border: var(--size-filet) solid var(--c-line);
  box-shadow: var(--shadow-floating); font: var(--t-small); color: var(--c-ink-2); pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(0.85); transform-origin: 0 100%; transition: opacity 220ms var(--ease-sortie), transform 220ms var(--ease-sortie); }
.saisie--active .saisie__interieur { opacity: 1; transform: none; transition: opacity 260ms var(--ease-sortie), transform 480ms var(--ease-ressort); }
.saisie__avatars { display: inline-flex; }
.saisie__avatars .sty-avatar { width: var(--size-avatar-xs); height: var(--size-avatar-xs); font: var(--t-micro); box-shadow: 0 0 0 2px var(--c-card); }
.saisie__avatars .sty-avatar + .sty-avatar { margin-left: -8px; }
.saisie__bulle { display: inline-flex; align-items: center; gap: 4px; padding: var(--s-2) var(--s-3); border-radius: var(--r-xl); border-bottom-left-radius: var(--r-xs); background: var(--c-tile); }
.saisie__bulle i { width: var(--size-point-saisie); height: var(--size-point-saisie); border-radius: 50%; background: var(--c-ink-3); animation: saisie-vague 1.2s ease-in-out infinite; }
.saisie__bulle i:nth-child(2) { animation-delay: 160ms; }
.saisie__bulle i:nth-child(3) { animation-delay: 320ms; }
@keyframes saisie-vague { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 767px) { .saisie__interieur { left: var(--s-4); } }
@media (prefers-reduced-motion: reduce) { .saisie__bulle i { animation: none; opacity: 0.8; } }
:root[data-mouvement-reduit] .saisie__bulle i { animation: none; opacity: 0.8; }

/* Champ de message des groupes : il grandit avec le texte (jusqu'à 160 px) ; au-delà il défile
   au doigt ou à la molette, sans barre de défilement visible. */
.composer__texte { resize: none; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.composer__texte::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Photo de profil posée sur le rond aux initiales (js/avatars.js). */
.sty-avatar { position: relative; overflow: hidden; }
.sty-avatar > img.avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; transition: opacity 240ms var(--ease-sortie); }
.sty-avatar--photo > img.avatar-photo { opacity: 1; }

/* Modifier le profil : photo, « tu es », champs. */
.profil-edition { display: flex; flex-direction: column; gap: var(--s-5); }
.profil-photo { display: flex; align-items: center; gap: var(--s-4); }
.profil-photo__rond { width: var(--size-avatar-profil); height: var(--size-avatar-profil); font: var(--t-heading); flex-shrink: 0; }
.profil-photo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.profil-photo__actions .sty-help { flex-basis: 100%; margin: 0; }
.profil-photo__actions label.sty-btn { cursor: pointer; }
.profil-photo__actions label.sty-btn:focus-within { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: 2px; }
.profil-genre { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.profil-genre__choix { display: flex; width: 100%; }
.profil-genre__choix button { flex: 1 1 0; min-height: var(--size-touch); white-space: normal; line-height: 1.2; padding: var(--s-2); }
.profil-genre .sty-help { margin: 0; }

/* ------------------------------------------------------------
   Max : capsule, conversation, visite guidée
   Le visage est dessiné par js/max-visage.js (css/max-visage.css) ;
   ici, seulement sa taille selon l'endroit.
   ------------------------------------------------------------ */
.max-visage-place { display: inline-block; flex: none; }
.max-visage-place.mx-visage { display: grid; }

/* Le visage entier est une trame : des petits points couvrent tout le disque, alignés sur la
   grille du kit (23 colonnes en « grand », 11 en « capsule », 84 % de la largeur, centrée).
   Les points éteints de la grille s'effacent pour ne pas doubler ceux du fond. */
.mx-visage { --mx-pas: calc(var(--mx-taille) * 0.84 / 23); }
.mx-visage.capsule { --mx-pas: calc(var(--mx-taille) * 0.84 / 11); }
.mx-visage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--mx-point) var(--mx-fond, 24%), transparent) max(0.55px, calc(var(--mx-pas) * 0.09)), transparent calc(max(0.55px, calc(var(--mx-pas) * 0.09)) + 0.6px));
  background-size: var(--mx-pas) var(--mx-pas);
  background-position: calc(var(--mx-taille) / 2 - var(--mx-pas) / 2) calc(var(--mx-taille) / 2 - var(--mx-pas) / 2);
}
.mx-visage .mx-grille i:not(.on) { opacity: 0; }

/* En sphère (js/max-sphere.js) : le canevas dessine la sphère de points et le visage ;
   la grille du kit reste calculée mais invisible. Par-dessus, un modelé : un reflet en
   haut à gauche et un bord qui s'assombrit, pour le relief. */
.mx-sphere .mx-grille { visibility: hidden; }
.mx-sphere .mx-grille i { animation: none !important; transition: none !important; }
.mx-sphere__toile { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 0 calc(var(--mx-taille) * 0.02) var(--mx-lueur)); }
.mx-visage.mx-sphere::after {
  z-index: 2;
  background-image:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 22%, transparent 46%),
    radial-gradient(circle at 46% 42%, transparent 52%, rgba(0, 0, 0, 0.34) 80%, rgba(0, 0, 0, 0.62) 100%);
  background-size: 100% 100%; background-position: 0 0;
}
.mx-sphere:hover .mx-sphere__toile { filter: drop-shadow(0 0 calc(var(--mx-taille) * 0.035) var(--mx-lueur)); }
/* En petit, la trame de fond se fait plus discrète pour ne pas griser l'écran. */
.mx-visage:is(.capsule, .max-bulle__visage, .max-panneau__visage, .onb__max) { --mx-fond: 15%; }

/* Au repos, il vit dans son expression sans bouger de place : les points allumés
   s'éclairent et s'atténuent en vague, colonne après colonne. Rythme et éclat
   changent selon ce qu'il exprime. */
.mx-visage { --mx-lum: 0.72; --mx-cycle: 3.6s; }
.mx-visage[data-expression="content"]         { --mx-lum: 0.7;  --mx-cycle: 1.6s; }
.mx-visage[data-expression="clin"]            { --mx-lum: 0.7;  --mx-cycle: 2.2s; }
.mx-visage[data-expression="ecoute"]          { --mx-lum: 0.65; --mx-cycle: 2.4s; }
.mx-visage[data-expression="reflexion"]       { --mx-lum: 0.5;  --mx-cycle: 4.2s; }
.mx-visage[data-expression="etonnement"]      { --mx-lum: 0.75; --mx-cycle: 1.1s; }
.mx-visage[data-expression="incomprehension"] { --mx-lum: 0.6;  --mx-cycle: 3.2s; }
.mx-visage[data-expression="desole"]          { --mx-lum: 0.5;  --mx-cycle: 4.6s; }
.mx-visage[data-expression="refus"]           { --mx-lum: 0.7;  --mx-cycle: 2s; }
.mx-visage[data-expression="erreur"]          { --mx-lum: 0.4;  --mx-cycle: 0.9s; }
.mx-visage:not(.mx-onde):not(.mx-souffle) .mx-grille i.on {
  animation: mx-vit var(--mx-cycle) ease-in-out infinite;
  animation-delay: calc(var(--mx-i) * 45ms);
}
@keyframes mx-vit {
  0%, 100% { opacity: 1; }
  50% { opacity: var(--mx-lum); }
}
/* Au survol, l'écran s'éclaire un peu plus. */
/* Il se détache du fond : un fin anneau, une ombre portée et un halo (jetons --c-max-*),
   proportionnés à sa taille. Le reflet intérieur du kit est conservé. */
.mx-visage {
  box-shadow:
    inset 0 0 0 1px rgba(165, 161, 255, 0.16), inset 0 calc(var(--mx-taille) * -0.075) calc(var(--mx-taille) * 0.19) rgba(0, 0, 0, 0.45),
    0 0 0 max(1px, calc(var(--mx-taille) * 0.012)) var(--c-max-anneau),
    0 calc(var(--mx-taille) * 0.09) calc(var(--mx-taille) * 0.22) var(--c-max-ombre),
    0 calc(var(--mx-taille) * 0.03) calc(var(--mx-taille) * 0.06) var(--c-max-ombre),
    0 0 calc(var(--mx-taille) * 0.22) var(--c-max-halo);
  transition: box-shadow var(--d-moyen) var(--ease-sortie);
}
.mx-visage:hover {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--mx-lueur) 70%, transparent), inset 0 calc(var(--mx-taille) * -0.075) calc(var(--mx-taille) * 0.19) rgba(0, 0, 0, 0.45),
    0 0 0 max(1px, calc(var(--mx-taille) * 0.016)) color-mix(in srgb, var(--mx-lueur) 80%, transparent),
    0 calc(var(--mx-taille) * 0.07) calc(var(--mx-taille) * 0.2) var(--c-max-ombre),
    0 0 calc(var(--mx-taille) * 0.3) color-mix(in srgb, var(--mx-lueur) 55%, transparent);
}
.mx-visage:hover .mx-grille { filter: drop-shadow(0 0 calc(var(--mx-taille) * 0.035) var(--mx-lueur)); }
:root[data-mouvement-reduit] .mx-visage .mx-grille i.on { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .mx-visage .mx-grille i.on { animation: none !important; } }
.mx-visage.max-capsule__visage { --mx-taille: var(--size-max-visage-capsule); }
.mx-visage.max-bulle__visage { --mx-taille: var(--size-max-visage-bulle); }
.mx-visage.max-panneau__visage { --mx-taille: var(--size-max-visage-tete); }

.max-capsule { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--size-touch); min-width: var(--size-touch); padding: 0 var(--s-4) 0 var(--s-2); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-pill); background: var(--c-card); color: var(--c-ink); font: var(--t-ui); font-weight: 600; cursor: pointer; box-shadow: var(--shadow-bouton); transition: border-color var(--d-moyen) var(--ease-sortie), box-shadow var(--d-moyen) var(--ease-sortie), transform var(--d-moyen) var(--ease-ressort); }
.max-capsule:hover, .max-capsule.appui { border-color: var(--c-accent); transform: translateY(-1px); }
.max-capsule[aria-expanded="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-text); }
.max-capsule:focus-visible { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: var(--size-filet-epais); }
@keyframes max-monte { from { opacity: 0; transform: translateY(6px); } }
@keyframes max-hoche { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } }

/* La conversation : fenêtre flottante au bureau, feuille basse sur téléphone. Elle ne bloque pas l'appli. */
.max-panneau { position: fixed; z-index: 85; right: var(--s-6); top: calc(var(--s-16) + var(--s-4)); width: min(var(--size-max-panneau), calc(100vw - 2 * var(--s-4))); height: min(var(--size-max-hauteur), calc(100dvh - var(--s-16) - var(--s-10))); display: flex; flex-direction: column; background: var(--c-card); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-xl); box-shadow: var(--shadow-modal); overflow: hidden; }
.max-panneau--entre { animation: max-panneau-entre 320ms var(--ease-ressort) both; transform-origin: top right; }
.max-panneau--sortie { animation: max-panneau-sortie 180ms var(--ease-sortie) both; transform-origin: top right; }
@keyframes max-panneau-entre { from { opacity: 0; transform: translateY(-8px) scale(0.94); } }
@keyframes max-panneau-sortie { to { opacity: 0; transform: translateY(-6px) scale(0.96); } }
/* L'en-tête, comme sur la maquette : le visage au centre, le nom et la promesse dessous. */
.max-panneau__tete { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-12) var(--s-4); border-bottom: var(--size-filet) solid var(--c-line); text-align: center; }
.max-panneau__textes { min-width: 0; }
.max-panneau__fermer { position: absolute; top: var(--s-2); right: var(--s-2); }
.max-panneau__titre { margin: 0; font: var(--t-card-title); }
.max-panneau__sous { margin: 0; font: var(--t-small); color: var(--c-ink-2); }
.max-fil { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.max-message { max-width: 88%; display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }
.max-message p { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-lg); font: var(--t-body); }
.max-message--max p { background: var(--c-sunken); color: var(--c-ink); border-top-left-radius: var(--r-xs); }
.max-message--moi { align-self: flex-end; align-items: flex-end; }
.max-message--moi p { background: var(--c-accent); color: var(--c-on-accent); border-top-right-radius: var(--r-xs); }
.max-message { animation: max-monte 260ms var(--ease-sortie) both; }
.max-points { display: inline-flex; gap: var(--s-1); padding: var(--s-1) 0; }
.max-points i { width: var(--s-1); height: var(--s-1); border-radius: 50%; background: var(--c-ink-3); animation: max-point 1s ease-in-out infinite; }
.max-points i:nth-child(2) { animation-delay: 150ms; } .max-points i:nth-child(3) { animation-delay: 300ms; }
@keyframes max-point { 0%, 100% { opacity: 0.3; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }
.max-raccourcis { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); overflow-x: auto; scrollbar-width: none; }
.max-raccourcis::-webkit-scrollbar { display: none; }
.max-raccourci { flex: none; min-height: var(--size-touch); padding: 0 var(--s-3); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-pill); background: var(--c-card); color: var(--c-ink); font: var(--t-small); font-weight: 600; cursor: pointer; }
.max-raccourci:hover, .max-raccourci.appui { border-color: var(--c-accent); color: var(--c-accent-text); }
.max-raccourci:focus-visible { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: var(--size-filet); }
.max-saisie { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); border-top: var(--size-filet) solid var(--c-line); }
.max-saisie__champ { flex: 1; min-width: 0; }
.max-saisie__envoyer { width: var(--size-control); padding: 0; flex: none; }

@media (max-width: 767px) {
  .max-panneau { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(78dvh, var(--size-max-hauteur)); border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .max-panneau--entre { animation-name: max-feuille-entre; }
  .max-panneau--sortie { animation-name: max-feuille-sortie; }
  @keyframes max-feuille-entre { from { transform: translateY(100%); } }
  @keyframes max-feuille-sortie { to { transform: translateY(100%); } }
  .max-capsule { padding: 0 var(--s-3) 0 var(--s-2); }
}

/* La visite : un voile qui laisse une fenêtre sur l'élément dont Max parle. Il ne bloque rien. */
.max-voile { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.max-trou { position: absolute; left: 0; top: 0; border-radius: var(--r-lg); box-shadow: 0 0 0 200vmax var(--c-scrim); outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: 0; transition: transform 380ms var(--ease-sortie), width 380ms var(--ease-sortie), height 380ms var(--ease-sortie), opacity 200ms ease; }
.max-trou::after { content: ""; position: absolute; inset: calc(-1 * var(--s-1)); border-radius: inherit; border: var(--size-filet-epais) solid var(--c-accent); animation: max-pouls 1.6s var(--ease-sortie) infinite; }
.max-trou--absent { width: 0 !important; height: 0 !important; left: 50%; top: 50%; outline-color: transparent; transform: none !important; }
.max-trou--absent::after { display: none; }
@keyframes max-pouls { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.max-voile--entre { animation: max-fondu 260ms ease both; }
.max-voile--sortie { animation: max-fondu 200ms ease reverse both; }
@keyframes max-fondu { from { opacity: 0; } }

.max-bulle { position: fixed; left: 0; top: 0; z-index: 151; width: min(var(--size-max-bulle), calc(100vw - 2 * var(--s-4))); padding: var(--s-4); background: var(--c-card); color: var(--c-ink); border-radius: var(--r-xl); box-shadow: var(--shadow-modal); transition: transform 380ms var(--ease-sortie); }
.max-bulle--attente { opacity: 0.001; }
.max-bulle--entre .max-bulle__tete, .max-bulle--entre .max-bulle__pied { animation: max-monte 280ms var(--ease-sortie) both; }
.max-bulle--sortie { opacity: 0; transition: opacity 180ms ease; }
.max-bulle__tete { display: flex; gap: var(--s-3); align-items: flex-start; }
.max-bulle__textes { min-width: 0; }
.max-bulle__titre { margin: 0 0 var(--s-1); font: var(--t-card-title); }
.max-bulle__texte { margin: 0; font: var(--t-body); color: var(--c-ink-2); }
.max-bulle__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); flex-wrap: wrap; }
.max-bulle__compte { font: var(--t-small); color: var(--c-ink-3); }
.max-bulle__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

:root[data-mouvement-reduit] :is(.max-trou, .max-bulle) { transition: none; }
:root[data-mouvement-reduit] :is(.max-trou::after, .max-points i, .max-message) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.max-trou, .max-bulle) { transition: none; }
  .max-trou::after, .max-points i, .max-message { animation: none !important; }
}

/* ------------------------------------------------------------
   Éditeur : corrections surlignées, mode de l'assistant, zoom
   ------------------------------------------------------------ */
/* Surlignage (outil « Surligner ») et soulignement. Couleurs : jetons --c-sl-*. */
.texte-cours mark[class^="sl-"], .sl-jaune, .sl-vert, .sl-bleu, .sl-rose, .sl-orange { color: inherit; border-radius: var(--r-xs); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.texte-cours mark.sl-jaune, span.sl-jaune { background: var(--c-sl-jaune); } .texte-cours mark.sl-vert, span.sl-vert { background: var(--c-sl-vert); } .texte-cours mark.sl-bleu, span.sl-bleu { background: var(--c-sl-bleu); }
.texte-cours mark.sl-rose, span.sl-rose { background: var(--c-sl-rose); } .texte-cours mark.sl-orange, span.sl-orange { background: var(--c-sl-orange); }
.editeur-outil__lettre--s { text-decoration: underline; text-underline-offset: 0.18em; }
.surligneur { display: inline-flex; align-items: center; }
.surligneur__poser { flex-direction: column; gap: var(--size-filet-epais); }
.surligneur__lettres { font: var(--t-small); font-weight: 700; line-height: 1; }
.surligneur__barre { width: var(--s-5); height: var(--s-1); border-radius: var(--r-xs); }
.surligneur__choisir { width: var(--s-6); margin-left: calc(-1 * var(--s-1)); color: var(--c-ink-2); }
.editeur-outils--bas .surligneur__choisir { width: var(--s-8); }
.palette-surlignage { padding: var(--s-2); }
.palette-surlignage__pastilles { display: flex; gap: var(--s-1); padding-bottom: var(--s-2); margin-bottom: var(--s-1); border-bottom: var(--size-filet) solid var(--c-line); }
.palette-surlignage__pastille { width: var(--size-touch); height: var(--size-touch); display: inline-grid; place-items: center; border: var(--size-filet-epais) solid transparent; border-radius: var(--r-md); background: transparent; cursor: pointer; }
.palette-surlignage__pastille span { width: var(--s-6); height: var(--s-6); border-radius: 50%; box-shadow: inset 0 0 0 var(--size-filet) var(--c-line-strong); }
.palette-surlignage__pastille[aria-checked="true"] { border-color: var(--c-accent); }
.palette-surlignage__pastille:hover { background: var(--c-tile); }
.palette-surlignage__pastille:focus-visible { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: var(--size-filet); }

.bascule-groupe { display: inline-flex; align-items: center; flex-shrink: 0; }
.bascule-mode { margin-left: calc(-1 * var(--s-1)); color: var(--c-ink-2); }

.editeur-page { --zoom: 1; }
@media (min-width: 768px) {
  .editeur-page { max-width: min(100%, calc((var(--size-editeur) + 2 * var(--s-6)) * var(--zoom))); }
}
.editeur-page > * { zoom: var(--zoom); }
.editeur-zoom { position: sticky; bottom: var(--s-4); align-self: flex-end; margin: calc(-1 * var(--size-control)) var(--s-4) var(--s-4) 0; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1); background: var(--c-card); border: var(--size-filet) solid var(--c-line); border-radius: var(--r-pill); box-shadow: var(--shadow-floating); z-index: 5; }
.editeur-zoom__btn, .editeur-zoom__valeur { min-width: var(--size-touch); height: var(--size-touch); padding: 0 var(--s-2); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink); font: var(--t-ui); font-variant-numeric: tabular-nums; cursor: pointer; }
.editeur-zoom__btn { font: var(--t-lead); }
.editeur-zoom__valeur { font: var(--t-small); font-weight: 600; color: var(--c-ink-2); min-width: calc(var(--size-touch) + var(--s-4)); }
:is(.editeur-zoom__btn, .editeur-zoom__valeur):hover:not(:disabled) { background: var(--c-sunken); }
:is(.editeur-zoom__btn, .editeur-zoom__valeur):focus-visible { outline: var(--size-filet-epais) solid var(--c-accent); outline-offset: calc(-1 * var(--size-filet-epais)); }
.editeur-zoom__btn:disabled { color: var(--c-ink-3); cursor: default; }
.editeur-centre { min-height: 100dvh; }
.editeur-centre > .editeur-page { flex: 1 0 auto; }

/* Transcription : Express (serveur) ou sur l'appareil */
.choix-modele button { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap: 0; min-height: var(--size-tile-lg); line-height: 1.2; }
.choix-modele__mot { font-weight: 600; }
.choix-modele__sous { font: var(--t-micro); color: var(--c-ink-2); }

/* ------------------------------------------------------------
   Trame vivante (js/trame-vivante.js) : derrière le contenu des zones libres
   ------------------------------------------------------------ */
[data-trame-vivante] { position: relative; isolation: isolate; }
canvas.trame-vivante { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: block; }
.onb__visuel canvas.trame-vivante { -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 95%); mask-image: radial-gradient(ellipse at center, #000 40%, transparent 95%); }
@media (max-width: 1023px) { .onb__visuel > canvas.trame-vivante { display: none; } }

/* Tour d'horizon sur ordinateur : chaque étape tient dans l'écran, sans défiler. */
@media (min-width: 1024px) {
  .onb { height: 100vh; height: 100dvh; min-height: 0; }
  .onb__texte { padding: clamp(var(--s-6), 7vh, var(--s-12)) 7vw; gap: clamp(var(--s-3), 2.6vh, var(--s-6)); overflow-y: auto; }
  .onb__visuel { overflow: hidden; }
}
@media (min-width: 1024px) and (max-height: 880px) {
  .onb__titre { font: var(--t-screen); letter-spacing: var(--tr-screen); }
  .onb__para { font: var(--t-body); }
  .onb__texte .marque__signe { width: var(--s-8); }
  .onb__mascotte { --mx-taille: calc(var(--size-max-visage-grand) * 0.72); }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .onb__titre { font: var(--t-title); letter-spacing: var(--tr-title); }
  .onb__texte .sty-hint, .onb__texte .meta { font: var(--t-small); }
}

/* Le signe du logo en points : au survol (ou au toucher), une vague traverse le T. */
.signe-t { display: block; overflow: visible; }
.signe-t circle { transform-box: fill-box; transform-origin: center; }
:is(a, button, .marque):is(:hover, .appui) .signe-t circle, .signe-t--vague circle { animation: signe-vague 900ms var(--ease-sortie) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes signe-vague { 0% { transform: scale(1); } 35% { transform: scale(0.35); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
:root[data-mouvement-reduit] .signe-t circle { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .signe-t circle { animation: none !important; } }

/* La trame vivante partout dans l'appli : une couche collée à l'écran, derrière les blocs
   (cartes, champs, boutons ont leur propre fond ; elle ne se voit que dans les espaces libres). */
.coquille-centre { position: relative; isolation: isolate; }
.coquille-trame { position: sticky; top: 0; height: 100vh; height: 100dvh; margin-bottom: -100vh; margin-bottom: -100dvh; z-index: -1; pointer-events: none; overflow: hidden; --trame-force: 0.38; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .coquille-trame { --trame-force: 0.6; } }
:root[data-theme="dark"] .coquille-trame { --trame-force: 0.6; }
/* Les blocs en pointillés (nouveau cours, états vides) cachent aussi la trame. */
.coquille-vue .carte-vide { background-color: var(--c-page); }
[data-trame-vivante].coquille-trame { position: sticky; }
/* Dans l'éditeur (écran plein), rien ne bouge derrière le texte qu'on écrit. */
.coquille--plein .coquille-trame { display: none; }

/* Tour d'horizon : l'explication et l'illustration changent de côté à chaque étape. */
@media (min-width: 1024px) {
  .onb--inverse .onb__visuel { order: -1; }
  .onb__visuel { animation: onb-cote 620ms var(--ease-sortie) both; --depart: var(--s-10); }
  .onb--inverse .onb__visuel { --depart: calc(-1 * var(--s-10)); }
  .onb__texte { animation: onb-cote-texte 560ms var(--ease-sortie) 60ms both; --depart: calc(-1 * var(--s-6)); }
  .onb--inverse .onb__texte { --depart: var(--s-6); }
}
@keyframes onb-cote { from { opacity: 0; transform: translateX(var(--depart)); } }
@keyframes onb-cote-texte { from { opacity: 0; transform: translateX(var(--depart)); } }
:root[data-mouvement-reduit] :is(.onb__visuel, .onb__texte) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { :is(.onb__visuel, .onb__texte) { animation: none !important; } }