/* Plateforme Monteur Nomade — direction artistique d'octobre 2026 (02-charte/DESIGN.md du dossier Monteur Nomade) :
   fond blanc, un seul bleu électrique #004BFE à plat, Mona Sans partout, titres un peu gras.
   Boutons et pastilles en pilule, cartes et blocs à coins de 20 px, bordures de 1 px. Pas de dégradé.
   Même direction que la page produit (produit.css) et les pages de téléchargement (ressources.css).
   Le thème clair est celui par défaut ; le sombre reste au choix dans Compte. */

:root {
  /* Un seul bleu : le bleu électrique, le Cobalt du logo. Voir Compte → Charte graphique. */
  --blue: #004bfe;          /* Bleu électrique : progression, sélection, focus, chiffres clés */
  --blue-strong: #004bfe;   /* Fond des boutons principaux, texte blanc dessus (6,1:1) */
  --blue-press: #0036c2;    /* Bleu appuyé : survol et appui, texte d'une pastille */
  --blue-soft: #e7eeff;     /* Bleu pâle : fond d'une pastille, d'un élément sélectionné */
  --blue-mid: #b9cdff;      /* Bleu moyen : barres secondaires, contours discrets */
  --blue-text: #004bfe;     /* Liens et texte bleu sur fond clair (6,1:1 sur blanc, 5,2:1 sur bleu pâle) */

  --bg: #fdfdfe;            /* Papier : fond de page */
  --surface: #ffffff;       /* Cartes */
  --sunken: #f3f6fd;        /* Fond bleuté : encadrés, survols */
  --line: #e1e6f0;          /* Trait : bordures et séparateurs */
  --line-strong: #cbd3e2;   /* Contour des champs et des boutons secondaires */
  --text: #0b1020;          /* Encre : titres et texte principal */
  --dim: #3b4457;           /* Texte doux : paragraphes */
  --faint: #5f6980;         /* Gris : mentions, dates (5:1 sur le fond bleuté) */

  --ok: #15803d;   --ok-soft: #dcfce7;
  --wait: #b45309; --wait-soft: #fef3c7;
  --bad: #b91c1c;  --bad-soft: #fee2e2;

  /* Les ombres sont rares, teintées de bleu nuit : seulement sous ce qui flotte (menus, fenêtres). */
  --shadow: none;
  --pop: 0 24px 48px -20px rgba(0, 40, 140, .28), 0 8px 20px -10px rgba(11, 16, 32, .16);

  --r: 20px;                /* Cartes, blocs, médias */
  --r-sm: 12px;             /* Champs, petits encadrés dans une carte */
  --pill: 999px;            /* Boutons, pastilles, onglets */

  --font: "Mona Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --title: var(--font);
  --body: var(--font);
  --mono: var(--font);      /* Plus de chasse fixe, ni de chiffres alignés : ceux de Mona Sans ont un zéro pointé de timecode. */
  color-scheme: light;
}

/* Le thème sombre (Compte → Apparence) : depuis le 20/10/2026, celui de la page de vente en sombre (/sombre,
   public/da-sombre.css), à la demande de Camille. Un noir chaud au lieu du bleu nuit, des cartes à peine plus claires,
   des gris chauds ; le bleu s'éclaircit un peu pour se lire sur le fond, et les boutons gardent du texte blanc à plus de
   5:1. Avant : fond #0b1020, cartes #121a2e, gris bleutés. */
[data-theme="dark"] {
  --blue: #5a82ff;          /* Le bleu électrique, éclairci : progression, sélection, focus, chiffres clés (5:1 sur les cartes) */
  --blue-strong: #2f5fff;   /* Fond des boutons principaux, texte blanc dessus (5,1:1) */
  --blue-press: #4a74ff;
  --blue-soft: #172249;
  --blue-mid: #2c4088;
  --blue-text: #8fa9ff;     /* Liens et texte bleu (7:1 sur les cartes) */

  --bg: #12110f;            /* Noir chaud : fond des pages */
  --surface: #1a1815;       /* Cartes, menu */
  --sunken: #161513;        /* Encadrés, survols */
  --line: #2d2a26;
  --line-strong: #3c3833;
  --text: #f2eee7;
  --dim: #c3bcb1;
  --faint: #968f84;

  --ok: #4ade80;   --ok-soft: rgba(34, 197, 94, .14);
  --wait: #fbbf24; --wait-soft: rgba(245, 158, 11, .14);
  --bad: #f87171;  --bad-soft: rgba(239, 68, 68, .14);

  --shadow: none;
  --pop: 0 24px 48px -16px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: 450 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: 248px minmax(0, 1fr);
}
a { color: inherit; text-decoration: none; }
h1, h2, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
.ic { flex: none; display: block; }
/* Icônes Lucide : trait de 1,85 (le trait écrit dans le SVG est remplacé ici). */
svg.ic[stroke] { stroke-width: 1.85; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--blue-soft); color: var(--text); }
input, textarea { caret-color: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  a, button, .card, .row, input, textarea { transition: background-color .15s, border-color .15s, color .15s; }
}

/* --- Menu latéral */

.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 24px;
  padding: 20px 12px 12px;
  background: var(--surface); border-right: 1px solid var(--line);
}
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 750 15.5px/1.2 var(--title); letter-spacing: -.015em; white-space: nowrap; }
.brand img { border-radius: 26%; }
.brand img { display: block; }
.role { flex: none; font-size: 12px; font-weight: 650; color: var(--blue-press); background: var(--blue-soft); border-radius: var(--pill); padding: 2px 9px; }
.nav { display: grid; gap: 2px; }
.nav-sep { height: 1px; margin: 8px 10px; background: var(--line); }
.nav a, .nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--pill); background: none; cursor: pointer;
  font-size: 14.5px; font-weight: 500; color: var(--dim); text-align: left;
}
.nav a:hover, .nav button:hover { background: var(--sunken); color: var(--text); }
.nav a.on { background: var(--blue-soft); color: var(--blue-press); font-weight: 650; }
[data-theme="dark"] .nav a.on { color: var(--blue-text); }
.nav span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: 12px; font-weight: 700; color: #fff; background: var(--blue-strong); border-radius: var(--pill); min-width: 22px; padding: 1px 7px; text-align: center; }
.menu-toggle { display: none; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--text); font: 600 14px var(--body); cursor: pointer; }
.side-foot { margin-top: auto; display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-menu { display: contents; }
.menu-dot, .burger { display: none; }
/* Choix du thème, dans la page Compte. */
.theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 4px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--pill); }
.theme button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-radius: var(--pill); background: none; color: var(--dim); font: 550 14px var(--body); cursor: pointer; }
.theme button:hover { color: var(--text); }
.theme button.on { background: var(--surface); color: var(--text); font-weight: 650; box-shadow: 0 0 0 1px var(--line); }

/* --- Zone principale */

.main { padding: 40px clamp(20px, 4vw, 48px) 96px; min-width: 0; }
.wrap { max-width: 920px; margin: 0 auto; }
.wrap.wide { max-width: 1320px; }

h1 { font: 800 30px/1.1 var(--title); letter-spacing: -.035em; text-wrap: balance; }
h2 { font: 750 17px/1.3 var(--title); letter-spacing: -.02em; }
h3 { letter-spacing: -.015em; }
.section { font-size: 21px; font-weight: 800; letter-spacing: -.03em; margin: 40px 0 16px; }
.lede { color: var(--dim); margin-top: 6px; font-size: 16px; }
.lede a { color: var(--blue-text); }
.lede a:hover { text-decoration: underline; }
.label { font-size: 13px; font-weight: 550; color: var(--faint); }
.label a:hover { color: var(--blue-text); }
.sub { font-size: 14px; color: var(--dim); }

.head { margin-bottom: 28px; }
.head-tight { margin-bottom: 20px; }
.head-split { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.head-split > .tag { margin-top: 8px; }
/* Fil d'Ariane : le dernier lien est la page d'où l'on vient, affiché en bouton « retour ». */
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--blue-text); }
.crumbs a:last-of-type {
  order: -1; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 10px; margin-right: 4px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--pill); color: var(--text); font-weight: 550;
}
.crumbs a:last-of-type::before { content: "←"; font-size: 15px; line-height: 1; }
.crumbs a:last-of-type:hover { background: var(--sunken); color: var(--text); }
.crumbs a:last-of-type + span { display: none; }
.crumbs a:not(:last-of-type), .crumbs a:not(:last-of-type) + span { display: none; }
.empty { color: var(--faint); padding: 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); font-size: 14px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }

/* --- Boutons, liens, formulaires */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: var(--pill); border: 1px solid transparent;
  background: var(--blue-strong); color: #fff; font-size: 14.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--blue-press); }
.btn.ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); font-weight: 600; }
.btn.ghost:hover { background: var(--sunken); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn:disabled { opacity: .4; cursor: default; }
.link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--dim); font-size: 14px; font-weight: 500; }
.link:hover { color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; }
.link-danger:hover { color: var(--bad); }

.form { display: grid; gap: 16px; }
.form-narrow, .form-edit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.form-narrow { max-width: 440px; }
.form-edit { max-width: 680px; }
.form-sep { margin-top: 24px; }
/* Deux champs côte à côte restent alignés en haut, même si un seul a une ligne d'aide. */
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.form-actions { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.form > .btn { justify-self: start; }
.field { display: grid; gap: 6px; align-content: start; }
.field-label { font-size: 14px; font-weight: 600; }
.field-label em { font-style: normal; font-weight: 400; color: var(--faint); margin-left: 6px; }
.field small { font-size: 13px; color: var(--faint); }
input:not([type=checkbox]):not([type=file]):not([type=hidden]), textarea, select {
  width: 100%; min-height: 44px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 14px;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: .8; }
input[type=checkbox] { accent-color: var(--blue-strong); width: 18px; height: 18px; margin: 0; flex: none; }
.danger { margin-top: 20px; max-width: 680px; padding: 0 4px; }

.notice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; margin-bottom: 20px; color: var(--dim); font-size: 14px; }
.notice a { color: var(--blue-text); font-weight: 600; }
a.notice { display: block; }
.notice-link, a.notice-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); border-color: var(--blue); background: var(--blue-soft); }
.notice-link:hover { border-color: var(--blue-strong); }
/* « … est supprimé · Annuler » (src/montages.js) et la question posée dans la page (data-confirmer, public/app.js) */
.mz-annuler { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); }
.confirmer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; padding: 14px 16px; border-radius: var(--r); background: rgba(255, 69, 58, .1); }
.confirmer p { flex: 1 1 100%; margin: 0; font-weight: 600; }
.btn.btn-danger { background: #d70015; color: #fff; }
.notice-link .ic { flex: none; color: var(--blue-text); }
.notice-ok { background: var(--ok-soft); border-color: transparent; color: var(--text); }
.notice-error { background: var(--bad-soft); border-color: transparent; color: var(--text); }
.access dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin-top: 12px; }
.access dt { color: var(--dim); }
code { font: 500 14px var(--mono); background: var(--sunken); border: 1px solid var(--line); padding: 2px 8px; border-radius: 8px; user-select: all; overflow-wrap: anywhere; }

/* --- États */

.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tag-todo { background: var(--sunken); color: var(--dim); }
.tag-wait { background: var(--wait-soft); color: var(--wait); }
.tag-fix { background: var(--bad-soft); color: var(--bad); }
.tag-ok { background: var(--ok-soft); color: var(--ok); }

.meter { display: block; flex: 1; min-width: 80px; height: 6px; background: var(--blue-soft); border-radius: var(--pill); overflow: hidden; }
[data-theme="dark"] .meter { background: var(--line); }
.meter i { display: block; height: 100%; background: var(--blue); border-radius: var(--pill); }
.count { font-size: 13px; font-weight: 600; color: var(--dim); white-space: nowrap; }
.progress { display: flex; align-items: center; gap: 10px; }

/* --- Accueil élève */

.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dash .resume { grid-column: span 2; }
.dash .mid { font: 700 18px/1.3 var(--title); letter-spacing: -.02em; }
.dash .stat .sub { display: inline-flex; align-items: center; gap: 6px; }
.dash + .section { margin-top: 36px; }
.dash .card { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.resume strong { font: 800 22px/1.2 var(--title); letter-spacing: -.03em; }
.resume .btn { align-self: flex-start; margin-top: auto; }
.resume strong + .btn { margin-top: 16px; }
a.card:hover { border-color: var(--line-strong); }
a.resume:hover .btn:not(.ghost) { background: var(--blue-press); }
a.resume:hover .btn.ghost { background: var(--sunken); }
.big { font: 800 30px/1.1 var(--title); letter-spacing: -.035em; }
.stat .meter { flex: none; margin: 6px 0 2px; }
.counts { display: grid; gap: 2px; margin-top: 2px; }
.counts div { display: flex; justify-content: space-between; align-items: center; min-height: 28px; font-size: 14px; color: var(--dim); }
.counts dd { font-weight: 700; color: var(--text); }
.counts .hot dt, .counts .hot dd { color: var(--bad); }

.mod { margin-top: 12px; overflow: hidden; }
.mod > summary { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 20px; cursor: pointer; list-style: none; }
.mod > summary::-webkit-details-marker { display: none; }
.mod > summary:hover { background: var(--sunken); }
.chip { font: 700 12.5px var(--body); color: var(--blue-press); background: var(--blue-soft); border-radius: var(--pill); padding: 3px 9px; }
[data-theme="dark"] .chip { color: var(--blue-text); }
.mod-title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mod-title strong { font: 700 16px/1.3 var(--title); letter-spacing: -.015em; }
.mod-title small { font-size: 14px; color: var(--dim); }
.mod .progress { width: 170px; flex: none; }
.caret { color: var(--faint); transition: transform .15s; }
.mod[open] .caret { transform: rotate(180deg); }
.mod[open] > summary { border-bottom: 1px solid var(--line); }

/* --- Cours : modules en cartes */

.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mcard { display: flex; flex-direction: column; overflow: hidden; }
a.mcard:hover { border-color: var(--blue); }
a.mcard:hover .mod-icon { transform: translateY(-3px); }
.mcard-cover {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: var(--sunken); border-bottom: 1px solid var(--line);
}
.mod-icon { display: block; border-radius: 23%; box-shadow: 0 14px 28px -12px rgba(0, 40, 140, .4); transition: transform .2s; }
.mod-icon-none { display: grid; place-items: center; background: var(--blue-strong); color: #fff; font: 800 22px var(--title); }
.mcard-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.mcard-body h2 { font-size: 18px; }
.mcard-intro { font-size: 14px; color: var(--dim); line-height: 1.5; min-height: 3em; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mbar { position: relative; height: 24px; margin-top: auto; border-radius: var(--pill); background: var(--blue-soft); overflow: hidden; }
[data-theme="dark"] .mbar { background: var(--line); }
.mbar i { position: absolute; inset: 0 auto 0 0; background: var(--blue-strong); border-radius: var(--pill); min-width: 58px; }
.mbar.is-full i { background: var(--ok); }
.mbar span { position: relative; display: block; padding: 0 12px; font-size: 12px; font-weight: 700; line-height: 24px; color: var(--blue-press); }
.mbar i + span { color: #fff; }
[data-theme="dark"] .mbar span { color: var(--dim); }
[data-theme="dark"] .mbar i + span { color: #fff; }
.mbar-empty span { color: var(--faint); }
.mcard.is-locked .mod-icon { filter: grayscale(1); opacity: .45; box-shadow: none; }
.mcard.is-locked h2 { color: var(--dim); }
.mcard-lock { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); font-size: 12px; font-weight: 650; color: var(--dim); }
/* Parcours en 7 étapes (13/11/2026) : la preuve de fin d'étape, sur la carte et en tête de la page d'une étape. */
.mcard-proof { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--dim); }
.mcard-proof b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.proof { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; padding: 16px 20px; border-left: 3px solid var(--blue); }
.proof p { margin: 0; }
.proof p:nth-child(2) { font-size: 16px; font-weight: 600; line-height: 1.4; }
.mhead .tag { vertical-align: 1px; }
.mhead { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.mhead h1 { margin-top: 2px; }
.mhead-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.mhead-bar .progress { flex: 1; max-width: 360px; }

/* --- Listes */

.list > li + li, .rows > li + li { border-top: 1px solid var(--line); }
.rows:not(:has(li)) { display: none; }
.rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px 10px 20px; }
a.row:hover { background: var(--sunken); }
.row .t { flex: 1; min-width: 0; font-weight: 500; }
.row .t small { display: block; font-size: 13px; font-weight: 400; color: var(--faint); margin-top: 1px; }
.row .n { font: 500 13px var(--mono); color: var(--faint); min-width: 38px; }
.row .t + .n { min-width: 0; text-align: right; }
.row .glyph { color: var(--line-strong); display: inline-flex; }
.row.is-done .glyph { color: var(--ok); }
.row.is-done .t { color: var(--dim); font-weight: 400; }
.row-devoir .glyph { color: var(--blue); }
.row.is-draft .t { color: var(--faint); }
.row .meta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--faint); white-space: nowrap; }
.row-res:hover .meta { color: var(--blue-text); }
.row.is-current { background: var(--blue-soft); }
.row.is-current .t { color: var(--blue-press); font-weight: 650; }
[data-theme="dark"] .row.is-current .t { color: var(--blue-text); }
.row.is-current .glyph { color: var(--blue); }

.module { margin-top: 32px; }
.head + .module, .notice + .module, .adder + .module { margin-top: 0; }
.module-head { margin-bottom: 12px; }
.module-head h2 a:hover { color: var(--blue-text); }
.module-head-edit { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.module-add { display: flex; gap: 20px; margin-top: 12px; padding-left: 4px; }

.res, .editable { display: flex; align-items: center; gap: 4px; padding-right: 12px; }
.res > a, .editable > a.row { flex: 1; min-width: 0; }
.peek { font-size: 13px; font-weight: 550; color: var(--dim); padding: 6px 10px; border-radius: var(--pill); }
.peek:hover { color: var(--blue-text); background: var(--blue-soft); }
.mover { display: inline-flex; gap: 2px; }
.mover button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--pill); background: none; color: var(--faint); cursor: pointer; }
.mover button:hover { background: var(--sunken); color: var(--text); }

.people .row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(150px, 1fr) minmax(110px, auto) minmax(150px, auto); gap: 24px; }
.people .seen { font-size: 13px; color: var(--faint); text-align: right; }
.people .due { text-align: right; }

.adder { margin-bottom: 24px; }
.adder > summary { list-style: none; display: inline-flex; }
.adder > summary::-webkit-details-marker { display: none; }
.adder[open] > summary { margin-bottom: 16px; }
.adder .form { max-width: 560px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.adder-right { margin-bottom: 0; position: relative; }
.adder-right > summary { margin-bottom: 0 !important; }
.adder-right[open] .form { position: absolute; right: 0; top: 48px; width: 340px; z-index: 5; box-shadow: var(--pop); }

/* --- Leçon */

.lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.lesson-main { display: grid; gap: 20px; }
.player { aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); overflow: hidden; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-empty { display: grid; place-items: center; background: var(--sunken); border: 1px dashed var(--line-strong); color: var(--faint); text-align: center; padding: 24px; font-size: 14px; }
.lesson-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lesson-head h1 { font-size: 26px; margin-top: 4px; }
.lesson-actions { display: flex; align-items: center; gap: 14px; }
.done-mark { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-size: 14px; font-weight: 600; }
.prose { max-width: 68ch; font-size: 16px; line-height: 1.65; color: var(--dim); }
.prose strong { color: var(--text); }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--blue-text); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.block { padding: 20px; }
.checks { margin-top: 8px; }
.checks label { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; cursor: pointer; line-height: 1.45; }
.checks input { margin-top: 2px; }
.checks input:checked + span { color: var(--faint); text-decoration: line-through; }
.exercise { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.exercise h2 { margin: 2px 0 4px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

.parcours { position: sticky; top: 24px; overflow: hidden; }
.parcours-head { display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.parcours-head strong { font: 750 16px/1.3 var(--title); letter-spacing: -.015em; }
.parcours-head .progress { margin-top: 8px; }
.parcours-head strong a:hover { color: var(--blue-text); }
/* Les outils du module (Démarchage, Factures…), à un clic depuis chaque leçon. */
.parcours-tools { display: grid; gap: 8px; padding: 14px 16px 16px 20px; border-bottom: 1px solid var(--line); }
.parcours-tools nav { display: flex; flex-wrap: wrap; gap: 8px; }
.parcours .row { padding: 10px 16px 10px 18px; min-height: 48px; font-size: 14px; }

/* --- Dépôt de fichier */

.drop {
  background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: var(--r);
  padding: 36px 24px; text-align: center; margin-bottom: 16px;
}
.drop.over { border-color: var(--blue); background: var(--blue-soft); }
.drop.drop-off { opacity: .5; }
.drop.drop-off .drop-icon { background: var(--line); color: var(--dim); }
input.is-missing { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.drop-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--pill); background: var(--blue-soft); color: var(--blue-text); margin-bottom: 12px; }
.drop-title { font: 750 17px/1.3 var(--title); letter-spacing: -.02em; }
.drop-sub { color: var(--dim); margin-top: 4px; font-size: 14px; }
.drop-sub .link { color: var(--blue-text); }
.drop-busy { text-align: left; max-width: 560px; margin: 0 auto; }
.drop-file { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 6px; background: var(--blue-soft); border-radius: var(--pill); overflow: hidden; margin: 12px 0 8px; }
[data-theme="dark"] .bar { background: var(--line); }
.bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: var(--pill); transition: width .2s linear; }
.drop-stat { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }
.drop-stat span + span { color: var(--dim); font-weight: 400; }
.drop-hint { font-size: 13px; color: var(--faint); margin-top: 12px; }
.drop-ready { color: var(--ok); font-weight: 500; }
.drop-error { color: var(--bad); }
.adder .drop { padding: 22px 16px; margin-bottom: 0; }
.adder .drop-icon { display: none; }
.adder .drop-title { font-size: 15px; }

/* --- Devoir : poste de correction (lecteur + retours dans la hauteur de l'écran) */

.main.tight { padding: 20px 24px 20px; }
.main.tight .wrap { max-width: none; }

.rv-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rv-title { min-width: 0; }
.rv-title .crumbs { margin-bottom: 8px; }
.rv-title h1 { font-size: 22px; }
.rv-title .sub a { color: var(--blue-text); font-weight: 600; }
.rv-title .sub a:hover { text-decoration: underline; }
.rv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rv-actions form { display: flex; gap: 8px; }

.brief, .again { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 20px; }
.brief > summary, .again > summary { cursor: pointer; padding: 14px 20px; font-size: 14px; font-weight: 600; }
.brief > summary:hover, .again > summary:hover { color: var(--blue-text); }
.brief .prose { padding: 0 20px 20px; font-size: 15px; }
.again { margin: 20px 0 0; max-width: 760px; scroll-margin-top: 20px; }
.again[open] { padding-bottom: 20px; }
.again > .drop, .again > .field { margin-left: 20px; margin-right: 20px; }

.vbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; position: relative; }
.versions, .seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--pill); }
[data-theme="dark"] .versions, [data-theme="dark"] .seg { background: var(--bg); }
.versions a, .seg button { padding: 5px 14px; border: 0; border-radius: var(--pill); background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dim); }
.versions a:hover, .seg button:hover { color: var(--text); }
.versions a.on, .seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
[data-theme="dark"] .versions a.on, [data-theme="dark"] .seg button.on { background: var(--blue-soft); color: var(--blue-text); box-shadow: none; }
.seg span { font-weight: 500; color: var(--faint); margin-left: 2px; }
.vmeta { font-size: 13px; color: var(--faint); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; min-width: 0; }
.dl { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; font-weight: 550; cursor: pointer; }
.dl:hover { color: var(--blue-text); }
.vbar-end { margin-left: auto; }
.brief-pop > summary { list-style: none; }
.brief-pop > summary::-webkit-details-marker { display: none; }
.brief-pop .prose { position: absolute; left: 0; top: 100%; z-index: 6; margin-top: 8px; width: min(620px, 90vw); padding: 16px 20px; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--pop); }

.review { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; min-height: 460px; }
.review.no-video { grid-template-columns: minmax(0, 760px); height: auto !important; }


.keys { font-size: 12.5px; color: var(--faint); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
kbd { font: 600 11.5px var(--mono); color: var(--dim); background: var(--surface); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; margin-left: 10px; }
kbd:first-child, kbd + kbd { margin-left: 0; }

.notes { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.student-note { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--blue-soft); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.student-note .label { display: block; margin-bottom: 2px; color: var(--blue-text); }
.comments { overflow-y: auto; flex: 1; min-height: 80px; }
.comments-empty { padding: 20px 16px; color: var(--faint); font-size: 14px; }
.comment { padding: 12px 16px 10px; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 transparent; cursor: pointer; }
.comment:hover { background: var(--sunken); }
.comment.is-current, .comment.is-current:hover { background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); }
.comment-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tc-jump { font: 700 12px var(--mono); color: var(--blue-press); background: var(--blue-soft); border-radius: var(--pill); padding: 3px 9px; }
[data-theme="dark"] .tc-jump { color: var(--blue-text); }
.comment.is-current .tc-jump { background: var(--surface); }
.tc-general { font-size: 12px; font-weight: 650; color: var(--dim); background: var(--sunken); border-radius: var(--pill); padding: 2px 9px; }
.has-ink { font-size: 11.5px; font-weight: 650; color: var(--bad); background: var(--bad-soft); border-radius: var(--pill); padding: 2px 8px; }
.who { font-weight: 650; }
.date { color: var(--faint); margin-left: auto; white-space: nowrap; font-size: 12px; }
.comment-main { margin-top: 6px; }
.comment-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-tools { display: none; gap: 12px; margin-top: 4px; }
.comment:hover > .comment-main .comment-tools, .reply:hover .comment-tools, .comment-tools:focus-within { display: flex; }
.comment-tools .link, .comment-foot .link { font-size: 12.5px; font-weight: 400; color: var(--faint); }
.comment-main textarea { font-size: 14px; min-height: 0; }
.edit-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.replies { margin: 10px 0 0 4px; padding-left: 12px; border-left: 2px solid var(--line-strong); display: grid; gap: 10px; cursor: default; }
.reply .comment-head { font-size: 12.5px; }
.reply .comment-main { margin-top: 3px; }
/* Les retours proposés par Hugo (src/hugo-retours.js) : en pointillés tant que Camille ne les a pas gardés */
.hugo-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--sunken); font-size: 13px; line-height: 1.45; color: var(--dim); }
.hugo-head p { flex: 1; margin: 0; }
.hugo-head .btn { flex: none; }
.comment.is-hugo { box-shadow: inset 3px 0 0 transparent; border-left: 3px dashed var(--blue); padding-left: 13px; }
.comment.is-hugo .comment-body { color: var(--dim); }
.hugo-tag { font-size: 11.5px; font-weight: 650; color: var(--blue-text); background: var(--blue-soft); border: 1px dashed var(--blue); border-radius: var(--pill); padding: 1px 8px; }
.comment.is-hugo .comment-foot { gap: 14px; }
.comment-foot { display: flex; align-items: center; gap: 16px; margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.comment-foot label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.comment-foot input { width: 15px; height: 15px; }
.reply-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; cursor: default; }
.reply-form textarea { font-size: 14px; min-height: 36px !important; padding: 7px 10px !important; }
.comment.is-done > .comment-main .comment-body { color: var(--faint); }
.comment.is-done .tc-jump { color: var(--dim); background: var(--sunken); }

.compose { padding: 12px; border-top: 1px solid var(--line); background: var(--sunken); }
.compose textarea { font-size: 14px; min-height: 0 !important; }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.compose-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.at, .tool { font: 650 12px var(--mono); color: var(--blue-text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 6px 11px; cursor: pointer; }
.tool { color: var(--dim); }
.at:hover, .tool:hover { border-color: var(--blue); }
.at.off { color: var(--faint); }
.tool.on { color: #fff; background: #ff3b30; border-color: #ff3b30; }
.compose-tools .link { font-size: 12.5px; }

/* --- Retours filmés (écran + micro) */

.tool { display: inline-flex; align-items: center; gap: 6px; }
/* Le trombone (« Joindre une capture ou une vidéo », Besoin d'aide et fil d'une question) : l'étiquette ouvre le choix du fichier. */
[data-joindre] { cursor: pointer; }
[data-joindre].is-busy { pointer-events: none; opacity: .6; }
.rec { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compose-tools .rec { flex-basis: 100%; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff3b30; animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }
.rec-time { font: 600 13px var(--mono); }
.has-video { font-size: 11.5px; font-weight: 650; color: var(--blue-press); background: var(--blue-soft); border-radius: var(--pill); padding: 2px 8px; }
[data-theme="dark"] .has-video { color: var(--blue-text); }
.comment-video { display: block; width: 100%; margin-top: 8px; border-radius: var(--r-sm); background: #000; aspect-ratio: 16 / 10; }
.comment-wait { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); font-size: 13px; color: var(--faint); }
.video-form { display: grid; gap: 14px; }
.rec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.video-page video { display: block; width: 100%; max-height: calc(100vh - 220px); border-radius: var(--r); background: #000; }
.glyph-play { color: var(--blue) !important; }

/* --- Calculatrice de tarifs */

.tool-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 28px; }
.tool-card:hover { border-color: var(--blue); }
.tool-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--pill); background: var(--blue-soft); color: var(--blue-text); flex: none; }
.tool-card .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tool-card .t strong { font: 700 16px/1.3 var(--title); letter-spacing: -.015em; }
.tool-card .t small { font-size: 14px; color: var(--dim); }
.lede a { color: var(--blue-text); }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.calc-form { display: grid; gap: 28px; }
.calc-step h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.opts { display: grid; gap: 12px; }
.opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-body { display: grid; gap: 4px; height: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); }
.opt-body strong { font: 700 15px/1.3 var(--title); letter-spacing: -.01em; }
.opt-body small { font-size: 13px; line-height: 1.45; color: var(--dim); }
.opt:hover .opt-body { border-color: var(--blue); }
form[data-contract-form] .opt:has(input:checked) .opt-body, .opt.on .opt-body { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue); }
form[data-contract-form] .opt:has(input:checked) .opt-body strong, .opt.on .opt-body strong { color: var(--blue-text); }
.opt input:focus-visible + .opt-body { outline: 2px solid var(--blue); outline-offset: 2px; }
.calc-dur { padding: 16px 20px; display: grid; gap: 10px; }
.calc-dur p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-dur strong { font: 750 18px/1.2 var(--title); }
.calc-dur input[type=range] { width: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; accent-color: var(--blue-strong); }
.calc-ticks { font-size: 12px; color: var(--faint); }
.calc-pack { margin-top: 12px; padding: 16px 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--pill); overflow: hidden; }
.qty button { width: 44px; border: 0; background: var(--surface); cursor: pointer; font-size: 20px; color: var(--blue-text); }
.qty button:hover { background: var(--sunken); }
.qty span { display: grid; place-items: center; min-width: 84px; padding: 6px 0; background: var(--sunken); }
.qty strong { font: 800 18px/1.1 var(--title); }
.qty small { font-size: 11px; color: var(--faint); }
.tiers { flex: 1; min-width: 220px; display: grid; gap: 6px; }
.tiers li { display: flex; justify-content: space-between; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 13.5px; color: var(--dim); }
.tiers li.on { border-color: var(--ok); color: var(--text); background: var(--ok-soft); }
.calc-result { position: sticky; top: 24px; padding: 24px; display: grid; gap: 6px; text-align: center; }
.calc-price { font: 820 56px/1.05 var(--title); letter-spacing: -.04em; color: var(--blue-text); }
.calc-discount { justify-self: center; margin-top: 6px; padding: 4px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 700; background: var(--sunken); color: var(--dim); }
.calc-discount.on { background: var(--ok-soft); color: var(--ok); }
.calc-note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }

/* --- Charte graphique */

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.swatch { display: flex; flex-direction: column; padding: 0; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.swatch:hover { border-color: var(--blue); }
.swatch-color { display: flex; align-items: flex-end; height: 84px; padding: 10px 14px; font: 700 15px var(--title); border-bottom: 1px solid var(--line); }
.swatch-body { display: grid; gap: 6px; padding: 12px 14px 14px; }
.swatch-body code { justify-self: start; border: 0; padding: 0; background: none; font-weight: 650; }
.swatch-body small { font-size: 13px; line-height: 1.45; color: var(--dim); }
.swatch.copied code::after { content: "  copié"; color: var(--ok); }
.charte-logo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.charte-logo-dark { padding: 16px; border-radius: var(--r); background: #0b1020; }
.charte-logo img { display: block; }
.charte-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.charte-type, .charte-kit { display: grid; gap: 24px; }
.type-title { font: 820 34px/1.05 var(--title); letter-spacing: -.04em; margin: 6px 0; }
.type-title mark { color: var(--blue); background: linear-gradient(var(--blue-soft), var(--blue-soft)) 0 88% / 100% 42% no-repeat; padding-inline: .06em; margin-inline: -.06em; }
.type-body { font-size: 17px; line-height: 1.6; color: var(--dim); margin: 6px 0; max-width: 60ch; }
.type-figure { font: 820 40px/1 var(--title); letter-spacing: -.04em; color: var(--blue); margin: 6px 0; }
.kit-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.kit-icons { color: var(--dim); gap: 16px; }
.kit-block { padding: 22px 24px; border-radius: var(--r); background: var(--blue-strong); color: #fff; font-weight: 600; }
.kit-dark { padding: 18px 22px; border-radius: var(--r); background: #0b1020; color: #fff; }
.kit-dark b { display: block; margin-bottom: 4px; font-weight: 750; }

/* --- Démarchage */

.dash-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 32px; }
.status-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.status-row .btn.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-press); font-weight: 650; }
[data-theme="dark"] .status-row .btn.on { color: var(--blue-text); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.msg form { justify-self: start; }
.msg form .link { font-size: 13px; color: var(--faint); }
.module-head-edit .seg a { padding: 5px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--dim); }
.module-head-edit .seg a.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
[data-theme="dark"] .module-head-edit .seg a.on { background: var(--blue-soft); color: var(--blue-text); box-shadow: none; }
.field small .link { font-size: 13px; }

/* --- Devis et factures */

.head-link { margin-top: 14px; }
.demarchage-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.demarchage-top .seg { max-width: 100%; overflow-x: auto; }
.legal { margin-top: 28px; max-width: 70ch; }
.items { display: grid; gap: 8px; }
.doc-form [data-add-item] { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) 80px 130px 28px; gap: 8px; align-items: center; }
.doc-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; font-size: 14px; color: var(--dim); }
.doc-total strong { font: 800 24px var(--title); letter-spacing: -.03em; color: var(--text); }
.sheet-wrap { overflow-x: auto; padding: 4px 0 32px; }
/* Le document reste blanc dans les deux thèmes : c'est ce que verra le client. */
.sheet { display: flex; flex-direction: column; width: 100%; max-width: 794px; min-width: 560px; aspect-ratio: 210 / 297; margin: 0 auto; padding: 7.5%; background: #fff; color: #0b1020; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 30px 60px -36px rgba(0, 40, 140, .3), 0 8px 20px -12px rgba(11, 16, 32, .12); font-size: 14px; line-height: 1.5; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 28px; border-bottom: 2px solid #0b1020; }
.sheet-kind { font: 820 40px/1 var(--title); letter-spacing: -.04em; color: #0b1020; }
.sheet-number { margin-top: 10px; font: 650 13px var(--mono); color: #004bfe; }
.sheet-dates { display: grid; gap: 10px; text-align: right; }
.sheet-dates dt, .sheet-label { font-size: 11.5px; font-weight: 550; color: #5f6980; }
.sheet-dates dd { font-weight: 650; color: #0b1020; }
.sheet-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; }
.sheet-label { margin-bottom: 6px; }
.sheet-biz { font: 750 16px var(--title); letter-spacing: -.015em; }
.sheet-lines { white-space: pre-line; color: #3b4457; margin-top: 4px; font-size: 13px; }
.sheet-subject { margin-top: 32px; font: 700 15px var(--title); }
.sheet-subject .sheet-label { display: block; font: 550 11.5px var(--body); }
.sheet-table { width: 100%; margin-top: 24px; border-collapse: collapse; }
.sheet-table th { text-align: left; font-size: 11.5px; font-weight: 600; color: #5f6980; padding: 9px 12px; background: #f3f6fd; }
.sheet-table th:first-child { border-radius: 8px 0 0 8px; }
.sheet-table th:last-child { border-radius: 0 8px 8px 0; }
.sheet-table td { padding: 14px 12px; border-bottom: 1px solid #e1e6f0; vertical-align: top; }
.sheet-table td:first-child { font-weight: 500; }
.sheet-table th:not(:first-child), .sheet-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.sheet-table td:last-child { font-weight: 650; }
.sheet-totals { margin: 20px 0 40px auto; width: min(320px, 100%); }
.sheet-totals p { display: flex; justify-content: space-between; gap: 16px; padding: 5px 12px; color: #3b4457; }
.sheet-totals .sheet-total { align-items: baseline; margin-top: 8px; padding: 14px 14px; border-radius: 12px; background: #e7eeff; color: #0b1020; font: 700 14px var(--title); }
.sheet-totals .sheet-total span:last-child { font-size: 22px; font-weight: 820; letter-spacing: -.03em; color: #004bfe; }
.sheet-totals .sheet-note { display: block; padding-top: 8px; font-size: 11.5px; text-align: right; color: #5f6980; }
.sheet-notes { margin-top: 4px; margin-bottom: 32px; }
.sheet-foot { margin-top: auto; display: grid; gap: 16px; font-size: 13px; color: #3b4457; }
.sheet-pay { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; padding: 20px; border: 1px solid #e1e6f0; border-radius: 12px; }
.sheet-bank { display: grid; gap: 5px; align-content: start; }
.sheet-bank div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: baseline; }
.sheet-bank dt { font-size: 11.5px; color: #5f6980; }
.sheet-bank dd { font: 550 12.5px var(--mono); color: #0b1020; overflow-wrap: anywhere; }
.sheet-sign { min-height: 96px; }
.sheet-small { font-size: 10.5px; line-height: 1.45; color: #5f6980; }
.sheet-thanks { font-size: 12px; color: #5f6980; }
.client-top { display: flex; align-items: center; gap: 40px; padding: 24px; flex-wrap: wrap; }
.client-top .big { font: 800 32px var(--title); letter-spacing: -.035em; }
.client-top .mid { font: 700 20px var(--title); letter-spacing: -.02em; }
.client-actions { display: flex; gap: 8px; margin-left: auto; }
.form-title { font: 750 16px var(--title); letter-spacing: -.015em; margin-top: 12px; }
.input-short { max-width: 180px; }
.print-page { display: block; background: #f3f6fd; padding: 24px; }
.print-page .sheet { margin: 0 auto; }
.print-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; max-width: 820px; margin: 0 auto 16px; }
/* Sur téléphone (« C'est signé », audit V1 C1) : les deux boutons l'un sous l'autre, pleine largeur, la suite de l'arrivée en premier. */
@media (max-width: 600px) { .print-bar { flex-direction: column-reverse; align-items: stretch; } .print-bar .btn { justify-content: center; } }
@page { size: A4; margin: 16mm; }
@page contrat {
  margin: 16mm 16mm 20mm;
  @bottom-center { content: "Paraphes : ________"; font: 9px "Mona Sans", sans-serif; color: #5f6980; }
  @bottom-right { content: "Page " counter(page) " / " counter(pages); font: 9px "Mona Sans", sans-serif; color: #5f6980; }
  @bottom-left { font: 9px "Mona Sans", sans-serif; color: #5f6980; }
}
@media print {
  .print-bar, .sign-intro, .sign-box { display: none; }
  .print-page { background: #fff; padding: 0; }
  .sheet { border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: none; min-width: 0; aspect-ratio: auto; min-height: 264mm; }
  .sheet.contract { min-height: 0; }
  .contract-art { break-inside: avoid; }
  .contract-sign { break-inside: avoid; }
}

.module-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }

/* --- Devoirs personnalisés */

.devoir-extras { display: grid; gap: 12px; margin: 16px 0; }
.rush-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.rush-card:hover { border-color: var(--blue); }
.rush-card .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rush-card .t small { color: var(--dim); font-size: 13px; }
.criteria ul { display: grid; gap: 4px; margin-top: 8px; padding-left: 18px; list-style: disc; }
.devoir-extras .due { font-weight: 500; }

/* --- Contrats */

.arrival { max-width: 720px; }
.arrival-lead { max-width: 720px; margin-bottom: 20px; }
.arrival-lead .follow-row { margin: 6px 0; }
.arrival-lead select { flex: 1 1 240px; min-width: 0; }
.arrival-steps { display: grid; gap: 10px; padding: 20px 20px 20px 40px; list-style: decimal; margin: 16px 0; }
.arrival-steps li { padding-left: 4px; }
.arrival-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.arrival-track li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-weight: 600; font-size: 14px; }
.arrival-track li small { display: block; font-weight: 400; color: var(--faint); font-size: 12.5px; }
.arrival-track li i { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.arrival-track li .ic { flex: none; margin-top: 2px; color: var(--ok); }
.arrival-track li.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
@media (max-width: 760px) { .arrival-track { grid-template-columns: 1fr 1fr; } }

.plan-card { padding: 16px 18px; display: grid; gap: 8px; }
.plan { display: grid; gap: 6px; }
.plan li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.plan li span { color: var(--dim); }
.plan li:last-child { padding-top: 6px; border-top: 1px solid var(--line); }
.contract-options { display: grid; gap: 16px; }
.contract-options[open] > summary { margin-bottom: 4px; }

.sigpad { position: relative; height: 180px; border: 1px dashed #8a93a8; border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.sigpad canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.sigpad-hint { position: absolute; left: 16px; right: 16px; bottom: 36px; padding-top: 6px; border-top: 1px solid #e1e6f0; font-size: 12px; color: #8a93a8; pointer-events: none; }
.sigpad.signed .sigpad-hint { visibility: hidden; }
.sigpad-clear { position: absolute; top: 8px; right: 12px; font-size: 13px; }
.sign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sign-card { display: grid; gap: 12px; align-content: start; padding: 20px; }
.sign-card .fold > summary { margin-bottom: 8px; }
.sign-card .paper { margin-top: 4px; }
.sign-saved { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sign-preview { max-height: 72px; max-width: 220px; padding: 6px 10px; background: #fff; border-radius: var(--r-sm); border: 1px solid var(--line); }
.ct-sign-date span { float: right; color: #0b1020; font-size: 12px; }
.ct-sign-img { margin-top: 10px; height: 84px; border-bottom: 1px dotted #8a93a8; }
.ct-sign-img img { height: 100%; max-width: 100%; object-fit: contain; object-position: left bottom; }
.ct-mention { font-style: italic; color: #0b1020; }
.ct-proof { font-size: 10px; line-height: 1.5; color: #5f6980; }
.ct-proof span { overflow-wrap: anywhere; }
.sign-page .sheet { margin-bottom: 24px; }
.sign-intro { display: flex; align-items: center; gap: 14px; max-width: 794px; margin: 8px auto 20px; }
.sign-intro img { border-radius: 26%; }
.sign-intro h1 { font: 800 22px var(--title); letter-spacing: -.03em; }
.sign-box { max-width: 794px; margin: 0 auto 48px; padding: 24px; display: grid; gap: 16px; }
.sign-box h2 { font: 750 18px var(--title); }
@media (max-width: 760px) { .sign-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sign-page { padding: 12px; } .sign-page .sheet { padding: 20px; } }

.contract-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.contract-preview { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--r-sm); }
.contract-preview .sheet { font-size: 12.5px; }
.contract-edit .form-title:first-child { margin-top: 0; }
.contract-result { display: grid; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.contract-result legend { padding: 0 6px; margin-top: 0; }
.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.echeances { display: grid; gap: 8px; }
.echeance { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(0, 1fr) 100px 28px; gap: 8px; align-items: center; }
.echeance input[type=date][hidden] { display: block; visibility: hidden; }
[data-add-echeance] { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 4px; }
[data-reste].is-due { color: var(--wait); }
.sheet.contract { aspect-ratio: auto; min-width: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; page: contrat; container: contrat / inline-size; }
.ct-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid #004bfe; }
.ct-brand { display: flex; align-items: center; gap: 12px; }
.ct-brand img { border-radius: 26%; }
.ct-brand-name { font: 800 18px/1.1 var(--title); letter-spacing: -.03em; color: #0b1020; }
.ct-brand-sub { font-size: 11.5px; color: #5f6980; margin-top: 2px; }
.ct-number { white-space: nowrap; font: 700 12px var(--mono); color: #0036c2; padding: 5px 12px; border-radius: 999px; background: #e7eeff; }
.ct-title { margin-top: 34px; }
.ct-eyebrow { font: 650 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #004bfe; }
.ct-title h2 { margin-top: 8px; font: 820 30px/1.1 var(--title); letter-spacing: -.04em; color: #0b1020; }
.ct-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 24px; border: 1px solid #e1e6f0; border-radius: 12px; background: #f3f6fd; }
.ct-keys div { padding: 12px 16px; }
.ct-keys div + div { border-left: 1px solid #e1e6f0; }
.ct-keys dt { font-size: 11px; color: #5f6980; }
.ct-keys dd { margin-top: 3px; text-wrap: balance; font: 700 14px var(--title); color: #0b1020; }
.ct-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ct-party { padding: 18px; border: 1px solid #e1e6f0; border-radius: 12px; }
.ct-party-role { font: 650 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #5f6980; }
.ct-party-name { margin-top: 6px; font: 750 16px var(--title); letter-spacing: -.015em; color: #0b1020; }
.ct-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin-top: 12px; font-size: 12px; }
.ct-rows div { display: contents; }
.ct-rows dt { color: #5f6980; }
.ct-rows dd { color: #0b1020; white-space: pre-line; overflow-wrap: break-word; }
.contract-body { display: grid; margin-top: 32px; }
.contract-art { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 16px 0; border-top: 1px solid #e1e6f0; }
.contract-art h3 { display: contents; }
.contract-art .ct-n { grid-row: 1 / 3; font: 750 12px/1.9 var(--mono); color: #004bfe; }
.contract-art h3 { font: 750 14.5px/1.5 var(--title); color: #0b1020; }
.ct-text { grid-column: 2; margin-top: 6px; color: #3b4457; }
.ct-text p + p, .ct-text p + table, .ct-text table + p, .ct-text ul + p, .ct-text p + ul { margin-top: 8px; }
.contract-art ul { margin: 6px 0 0 18px; list-style: disc; display: grid; gap: 3px; }
.contract-art .pre { white-space: pre-line; }
.contract-art .sheet-table { margin-top: 10px; }
.contract-art .sheet-table td { padding: 9px 12px; }
.sheet-note-inline { font-size: 11.5px; color: #5f6980; }
.contract-sign { margin-top: 28px; padding-top: 24px; border-top: 2px solid #0b1020; display: grid; gap: 18px; break-inside: avoid; }
.contract-sign-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contract-sign-boxes > div { display: flex; flex-direction: column; padding: 18px; border: 1px solid #e1e6f0; border-radius: 12px; }
.ct-sign-line.ct-sign-date { margin-top: auto; padding-top: 22px; }
.ct-sign-who { margin-top: 2px; font-size: 11.5px; color: #5f6980; }
.ct-sign-line { margin-top: 22px; padding-bottom: 4px; border-bottom: 1px dotted #8a93a8; font-size: 11px; color: #5f6980; }
.ct-sign-big { margin-top: 18px; padding-bottom: 64px; }
@container contrat (max-width: 640px) {
  .ct-parties { grid-template-columns: minmax(0, 1fr); }
  .ct-keys { grid-template-columns: 1fr 1fr; }
  .ct-keys div:nth-child(3) { border-left: 0; }
  .ct-keys div:nth-child(n + 3) { border-top: 1px solid #e1e6f0; }
}
@media (max-width: 1100px) {
  .contract-edit { grid-template-columns: minmax(0, 1fr); }
  .contract-preview { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .echeance { grid-template-columns: minmax(0, 1fr) 100px 28px; }
  .echeance input[type=date] { grid-column: 1 / -1; grid-row: 2; }
  .echeance input[type=date][hidden] { display: none; }
  .contract-sign-boxes { grid-template-columns: 1fr; }
}

/* --- Personal branding */

.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.doc-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.doc-n { font: 750 13px var(--mono); color: var(--blue-text); }
.doc-card h3 { font: 750 17px var(--title); letter-spacing: -.02em; }
.doc-state { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 600; }
.doc-card .meter { flex: none; margin-top: 2px; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } }
.fold > summary { list-style: none; display: inline-flex; margin-bottom: 12px; }
.fold > summary::-webkit-details-marker { display: none; }
.prompts { display: grid; gap: 16px; }
.prompts ul { display: grid; }
.prompts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.prompts li .t { font-weight: 500; }
.step-title { font: 700 14px var(--title); color: var(--dim); margin: 24px 0 8px; display: flex; align-items: center; gap: 8px; }
.step-title .count { background: var(--sunken); border-radius: var(--pill); padding: 1px 9px; }
.idea { align-items: flex-start; }
.idea-body { flex: 1; min-width: 0; }
.idea-body > summary { list-style: none; cursor: pointer; }
.idea-body > summary::-webkit-details-marker { display: none; }
.idea-body > summary:hover { background: var(--sunken); }
.idea-form { padding: 4px 20px 20px; max-width: 640px; }
.idea > form:not(.idea-form) { padding: 9px 0; }

/* --- Portfolio : choix de l'extrait, catégories */

.trim { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px; background: var(--sunken); border-radius: var(--r); }
.trim video { display: block; height: 260px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-sm); background: #000; }
.trim video.wide { height: auto; width: 300px; max-width: 100%; aspect-ratio: 16 / 9; }
.trim-side { display: grid; gap: 10px; }
.trim input[type=range] { width: 100%; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; accent-color: var(--blue-strong); }
.trim-label { font: 700 15px var(--title); }
.row-clip { width: 34px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; background: #000; flex: none; }
.row-clip.wide { width: 60px; aspect-ratio: 16 / 9; }
.cat { padding: 8px 12px 8px 20px; gap: 12px; }
.cat-name { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; }
.cat-name input { max-width: 320px; min-height: 36px !important; padding: 6px 10px !important; }

/* --- Portfolio public */

.folio-page { background: var(--surface); }
.folio { max-width: 1480px; margin: 0 auto; padding: 48px clamp(24px, 6vw, 120px) 64px; display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: 24px clamp(40px, 7vw, 140px); align-items: start; }
.folio-draft { grid-column: 1 / -1; }
.folio-side { position: sticky; top: 48px; display: grid; gap: 28px; }
.folio-id { display: grid; gap: 14px; justify-items: start; }
.folio-photo { width: 176px; height: 176px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; border: 1px solid var(--line); }
.folio-initials { display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-text); font: 800 60px var(--title); letter-spacing: -.04em; }
.folio-id h1 { font: 820 42px/1.04 var(--title); letter-spacing: -.04em; }
.folio-headline { margin-top: 10px; font-size: 18px; font-weight: 700; color: var(--blue-text); }
.folio-bio { font-size: 17px; color: var(--dim); line-height: 1.7; white-space: pre-line; }
.folio-place { font-size: 14px; color: var(--faint); }
.folio-links { display: flex; flex-wrap: wrap; gap: 10px; }
.folio-links .btn { min-height: 48px; padding: 0 22px; border-radius: var(--pill); font-size: 15px; gap: 8px; }
.folio-foot { font-size: 13px; }
.folio-foot-end { display: none; }
.folio-foot a, .folio-foot span { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); }
.folio-foot a:hover { color: var(--blue-text); }
.folio-main { display: grid; gap: 56px; min-width: 0; padding-top: 12px; }
.folio-works { display: grid; gap: 22px; }
.folio-works h2 { padding-left: 4px; font: 800 26px var(--title); letter-spacing: -.035em; }
.folio-empty { color: var(--dim); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tiles-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { position: relative; display: block; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: #0b1020; aspect-ratio: 9 / 16; cursor: pointer; color: #fff; text-align: left; box-shadow: 0 0 0 1px var(--line); transition: transform .18s ease; }
.tiles-wide .tile { aspect-ratio: 16 / 9; }
.tiles-wide .tile:only-child { grid-column: 1 / -1; }
.tile:hover { transform: translateY(-3px); }
.tile video, .tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-blank { display: grid; place-items: center; width: 100%; height: 100%; background: var(--blue-strong); }
.tile::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); pointer-events: none; }
.tile-title { position: absolute; left: 20px; right: 20px; bottom: 70px; z-index: 1; font: 700 14px/1.3 var(--title); text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.tile-label { position: absolute; left: 18px; bottom: 18px; z-index: 1; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--pill); background: #fff; color: #0b1020; font-size: 13px; font-weight: 700; }
.tile:hover .tile-label { background: var(--blue-strong); color: #fff; }
.tile:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (max-width: 1180px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles-wide { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  .folio-page { background: var(--bg); }
  .folio { grid-template-columns: 1fr; gap: 36px; margin: 16px; padding: 28px 18px 32px; background: var(--surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); }
  .folio-side { position: static; padding: 0 8px; }
  .folio-photo { width: 104px; height: 104px; }
  .folio-id h1 { font-size: 30px; }
  .folio-headline { font-size: 16px; }
  .folio-bio { font-size: 16px; }
  .folio-main { gap: 40px; padding-top: 0; }
  .tiles { gap: 12px; }
  .tile { border-radius: var(--r); }
  .tile-title { left: 14px; right: 14px; bottom: 58px; font-size: 13px; }
  .tile-label { left: 12px; bottom: 12px; min-height: 30px; padding: 0 11px; font-size: 12px; }
  .folio-side .folio-foot { display: none; }
  .folio-foot-end { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }
.folio-view { padding: 0; border: 0; border-radius: var(--r); background: #000; max-width: min(92vw, 1100px); max-height: 92vh; overflow: hidden; }
.folio-view::backdrop { background: rgba(11, 16, 32, .85); }
.folio-view video { display: block; max-width: min(92vw, 1100px); max-height: 92vh; background: #000; }
.folio-view [data-close] { position: absolute; top: 10px; right: 10px; }

/* --- Aide */

.aide-form { display: grid; gap: 16px; max-width: 760px; }
.aide-form > .btn { justify-self: start; }
.attached { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ok); }
.attached .link { font-weight: 400; }
.howto { background: var(--sunken); border-radius: var(--r-sm); padding: 0 16px; }
.howto > summary { cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 600; }
.howto ol { list-style: decimal; padding: 0 0 4px 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.howto .sub { padding: 8px 0 14px; font-size: 13px; }
.thread { display: grid; gap: 12px; margin-bottom: 20px; max-width: 760px; }
.msg { padding: 16px 20px; display: grid; gap: 10px; }
.msg.by-prof { border-color: var(--blue); background: color-mix(in srgb, var(--blue-soft) 45%, var(--surface)); }
.msg .prose { font-size: 15px; }
.msg video { display: block; width: 100%; border-radius: var(--r-sm); background: #000; max-height: 70vh; }
.aide-form + .module { margin-top: 32px; }

/* --- Déblocage, réseaux, retours enregistrés */

.mod-summary { display: flex; align-items: center; gap: 14px; padding: 16px 16px 16px 20px; }
.mod-locked { background: var(--sunken); box-shadow: none; }
.mod-locked .chip { background: var(--line); color: var(--faint); }
.mod-locked .mod-title strong { color: var(--dim); }
.lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 550; color: var(--faint); white-space: nowrap; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.check input { margin-top: 2px; }
.check span { font-size: 14px; font-weight: 550; }
.check small { display: block; font-weight: 400; color: var(--faint); margin-top: 2px; }
.socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.social-edit { margin: 0; position: relative; }
.social-edit[open] .form { position: absolute; left: 0; top: 30px; width: 380px; max-width: 86vw; z-index: 5; box-shadow: var(--pop); }
.social-edit > summary { margin: 0 !important; }
.saved { margin-top: 10px; font-size: 13px; }
.saved > summary { cursor: pointer; color: var(--dim); font-weight: 600; }
.saved > summary:hover { color: var(--blue-text); }
.saved ul { margin: 8px 0; display: grid; gap: 4px; max-height: 180px; overflow-y: auto; }
.saved li { display: flex; gap: 4px; }
.saved-use { flex: 1; min-width: 0; text-align: left; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: 13px; line-height: 1.4; }
.saved-use:hover { border-color: var(--blue); }
.saved-del { width: 28px; border: 0; border-radius: var(--pill); background: none; color: var(--faint); cursor: pointer; font-size: 16px; }
.saved-del:hover { color: var(--bad); background: var(--bad-soft); }
.saved .link { font-size: 13px; }

.module-head .sub { margin-top: 4px; }
.free-form { max-width: none !important; }
.adder + .rows { margin-top: 0; }

/* --- Clients */

.earn { overflow: hidden; }
.earn-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 24px 24px 8px; flex-wrap: wrap; }
.earn-total { font: 820 clamp(40px, 6vw, 56px)/1.05 var(--title); letter-spacing: -.04em; margin-top: 4px; color: var(--blue-text); }
.earn-side { display: flex; gap: 12px 32px; flex-wrap: wrap; }
.earn-side dt { font-size: 13px; font-weight: 550; color: var(--faint); }
.earn-side dd { font: 750 20px/1.3 var(--title); letter-spacing: -.02em; }
.curve { display: block; width: 100%; height: 150px; }
.curve-line { fill: none; stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.curve-area { fill: var(--blue); opacity: .1; }
.earn-palier { display: grid; gap: 10px; padding: 18px 24px 22px; border-top: 1px solid var(--line); }
.earn-palier p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.earn-palier p span { font-size: 14px; color: var(--dim); }
.earn-palier .meter { height: 8px; }
.paliers { justify-content: flex-start !important; gap: 6px !important; }
.amount { font-weight: 650; white-space: nowrap; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 6px; } /* « Externe » + le statut d'une facture externe */
.meme-argent > * + * { margin-top: 14px; } /* « C'est le même argent ? » : la liste, la phrase et les deux boutons respirent */
/* Factures et devis sur téléphone : le numéro, le montant et l'étiquette laissaient au client à peine un mot par ligne.
   Le numéro passe au-dessus, l'étiquette en dessous (20/10/2026). */
@media (max-width: 600px) {
  .bills .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n n" "t amount" "tag tag"; gap: 4px 12px; padding: 12px 16px; }
  .bills .row .n { grid-area: n; min-width: 0; }
  .bills .row .t { grid-area: t; }
  .bills .row .amount { grid-area: amount; align-self: start; }
  .bills .row .tag { grid-area: tag; justify-self: start; margin-top: 4px; }
  .bills .row .tags { grid-area: tag; justify-self: start; margin-top: 4px; }
  .bills .row .tags .tag { grid-area: auto; margin-top: 0; }
}
/* Coût de délégation (23/10/2026) : le formulaire s'ouvre sous le paiement, sur toute la largeur. */
.res-deleg { flex-wrap: wrap; }
.deleg-edit > summary { list-style: none; cursor: pointer; padding: 6px 10px; }
.deleg-edit > summary::-webkit-details-marker { display: none; }
.deleg-edit[open] { order: 3; flex-basis: 100%; padding: 0 0 14px 20px; }
.deleg-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.deleg-form label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 550; color: var(--dim); }
.deleg-form input { width: 160px; }
.earn-mini { display: flex; align-items: center; gap: 40px; padding: 18px 20px; flex-wrap: wrap; }
.earn-mini .big { font-size: 26px; }
.mid { font: 700 18px/1.3 var(--title); letter-spacing: -.02em; }
.earn-mini .link { margin-left: auto; }
a.earn-mini:hover .link { color: var(--blue-text); }
.module > .earn, .head + .earn, .notice + .earn { margin-bottom: 32px; }

/* --- Accueil prof et paiements */

.big.is-hot { color: var(--blue-text); }
.dash-prof .stat .sub { display: block; }
.pay { padding: 20px; display: grid; gap: 16px; }
.pay-figures { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-end; }
.pay-figures .mid small { font: 500 14px var(--body); letter-spacing: 0; color: var(--faint); }
.pay-figures .tag { margin-left: auto; align-self: center; }
/* Les paiements notés, dans la carte, puis les réglages (prix, « déjà tout réglé ») en bas */
.pay .pay-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pay .pay-rows li + li { border-top: 1px solid var(--line); }
.pay .pay-rows .res { padding-right: 0; }
.pay .pay-rows .row { padding-left: 0; padding-right: 12px; min-height: 48px; }
.pay-empty { padding-top: 16px; border-top: 1px solid var(--line); }
.pay-settings { display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-start; padding-top: 16px; border-top: 1px solid var(--line); }
.pay-settings .check { padding-top: 26px; max-width: 320px; } /* aligné sur le champ du prix, sous son libellé */
.pay-price { display: grid; gap: 6px; }
.pay-price div { display: flex; gap: 8px; }
.pay-price input { width: 130px !important; min-height: 34px !important; padding: 5px 10px !important; }
.pay-price small { font-size: 12.5px; max-width: 260px; }
/* Palier de l'accompagnement : 1re partie, 2e partie au résultat (prix de l'élève atteint en chiffre d'affaires) */
.pay-palier { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.pay-palier p { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.pay-palier p > span:not(.tag) { font-size: 14px; color: var(--dim); }
.pay-palier-goal strong { font-weight: 750; color: var(--blue-text); }
.pay-palier .meter { height: 8px; }
.mid.is-due { color: var(--wait); }
.pay-rows { margin-top: 12px; }
.pay .meter { height: 8px; }

/* --- Appels */

.row-actions { display: flex; align-items: center; gap: 10px; }
.res > .row { flex: 1; min-width: 0; }
.row .t small a:hover { color: var(--blue-text); }
.booking { overflow: hidden; }
.booking-pick { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; padding: 20px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head p { font: 750 15px var(--title); }
.cal-nav { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 12px; color: var(--faint); padding-bottom: 4px; }
.cal-d { aspect-ratio: 1; border: 0; border-radius: var(--pill); background: none; color: var(--faint); font-size: 14px; }
.cal-d.free { background: var(--blue-soft); color: var(--blue-press); font-weight: 700; cursor: pointer; }
[data-theme="dark"] .cal-d.free { color: var(--blue-text); }
.cal-d.free:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.cal-d.on, [data-theme="dark"] .cal-d.on { background: var(--blue-strong); color: #fff; }
.cal-day { font: 750 15px var(--title); margin: 6px 0 12px; }
.cal-slots { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
@media (max-width: 640px) { .booking-pick { grid-template-columns: 1fr; gap: 20px; } }
.slot { min-width: 72px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface); cursor: pointer; font-size: 14px; font-weight: 600; }
.slot:hover { border-color: var(--blue); color: var(--blue-text); }
.slot.on, [data-theme="dark"] .slot.on { background: var(--blue-strong); border-color: var(--blue-strong); color: #fff; }
.booking-foot { display: grid; gap: 16px; padding: 20px; border-top: 1px solid var(--line); background: var(--sunken); }
.avail { display: grid; gap: 8px; }
.avail label { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.avail span { font-size: 14px; font-weight: 600; }
.block p + p { margin-top: 10px; }
.feed code { display: block; overflow-x: auto; white-space: nowrap; padding: 8px 10px; }

/* --- Connexion et erreurs */

body.bare { display: block; }
.solo { max-width: 420px; margin: 0 auto; padding: 12vh 20px 60px; }
.solo .brand { display: flex; justify-content: center; font-size: 18px; margin-bottom: 28px; }
.solo-wide { max-width: 640px; }
.step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.step-q { display: block; font: 750 20px/1.25 var(--title); letter-spacing: -.025em; }
.step > .step-q + .sub { margin-top: -12px; }
.step .field { gap: 10px; }
.step .form-2 .field, .step > .field + .form-2 .field { gap: 6px; }
[data-steps] { gap: 24px; }
[data-steps] .form-actions { margin-top: 0; }
.head-actions { display: flex; align-items: flex-start; gap: 10px; }
.answers > div { padding: 16px 20px; }
.answers > div + div { border-top: 1px solid var(--line); }
.answers dt { font-size: 13px; font-weight: 550; color: var(--faint); margin-bottom: 4px; }
.answers dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.answers-foot { margin-top: 10px; padding-left: 4px; }
.answers-title { margin: 20px 0 10px 4px; font: 750 15px var(--title); }
.row-empty { color: var(--faint); font-size: 14px; }
.solo-card { padding: 32px; }
.solo h1 { font-size: 26px; margin-bottom: 24px; }
.solo .label { margin-bottom: 6px; }
.solo .label + h1 { margin-bottom: 24px; }
.solo .form .btn { justify-self: stretch; min-height: 52px; font-size: 15.5px; }
.solo-foot { margin-top: 24px; font-size: 13px; color: var(--faint); }

/* --- Tablette et mobile */

@media (max-width: 1199px) {
  .review, .lesson-grid { grid-template-columns: minmax(0, 1fr); }
  .parcours { position: static; max-height: none; }
  .review { height: auto !important; }
  .comments { max-height: 60vh; }
  .main.tight { padding: 20px 16px 48px; }
  .dash { grid-template-columns: 1fr 1fr; }
  .dash-4 { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc-result { position: sticky; top: auto; bottom: 12px; z-index: 4; box-shadow: var(--pop); order: 2; }
  .mods { grid-template-columns: 1fr 1fr; }
  .dash .resume { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  body { display: block; }
  /* Sur téléphone : une barre fine (logo + bouton Menu) qui reste en haut. Le menu s'ouvre en panneau par-dessus la page,
     avec tous les onglets, puis notifications, aide, compte et déconnexion. */
  .side { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-top { padding: 0 4px; flex: 1; justify-content: flex-start; }
  .menu-toggle { display: inline-flex; position: relative; gap: 10px; max-width: 60%; min-width: 0; } /* rétrécit : un nom de page long finit en « … » */
  .menu-toggle > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
  .menu-dot { display: block; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-strong); box-shadow: 0 0 0 2px var(--surface); }
  .side.open .menu-dot { display: none; }
  .burger { display: grid; gap: 3px; width: 16px; }
  .burger i { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s, opacity .2s; }
  .side.open .burger i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .side.open .burger i:nth-child(2) { opacity: 0; }
  .side.open .burger i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .side-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 12px 12px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--pop);
  }
  .side.open .side-menu { display: block; }
  .side-menu .nav { display: flex; flex-direction: column; gap: 2px; }
  .side-foot { margin-top: 8px; padding-top: 8px; gap: 2px; }
  .nav-sep { width: 100%; height: 1px; margin: 4px 0; }
  body:has(.side.open)::after { content: ''; position: fixed; inset: 0; z-index: 10; background: rgba(11, 16, 32, .4); }
  .res { flex-wrap: wrap; padding-right: 12px; }
  .res > .row, .res > a.row { flex-basis: 100%; }
  .res > form, .res > .peek, .res > .row-actions { margin: 0 0 10px 20px; }
  .editable { flex-wrap: wrap; padding-right: 8px; }
  .editable > a.row { flex-basis: 100%; padding-bottom: 4px; }
  .editable .row .meta { display: none; }
  .editable .peek { margin-left: 12px; }
  .editable .mover { margin-left: auto; }
  .editable > .peek, .editable > .mover { margin-bottom: 6px; }
  .brand { font-size: 14.5px; }
  .main { padding: 24px 16px 72px; }
  .solo { padding: 6vh 16px 48px; }
  .solo-card { padding: 24px 20px; }
  h1 { font-size: 26px; }
  .head-split, .lesson-head { flex-wrap: wrap; }
  .module-head-edit:has(> .seg) { flex-wrap: wrap; }
  .module-head-edit > .seg { max-width: 100%; overflow-x: auto; }
  .dash { grid-template-columns: 1fr; }
  .dash.dash-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-4 .card { padding: 14px 16px; }
  .opts-2, .opts-3 { grid-template-columns: 1fr; }
  .calc-price { font-size: 44px; }
  .calc-note { display: none; }
  .tool-card { flex-wrap: wrap; }
  .mods { grid-template-columns: 1fr; }
  .mhead { align-items: flex-start; }
  .mod > summary { flex-wrap: wrap; padding: 14px 16px; }
  .mod .progress { width: 100%; order: 4; }
  .people .row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .people .seen { text-align: left; grid-column: 1 / -1; }
  .people .progress { grid-column: 1 / -1; }
  .form-2 { grid-template-columns: 1fr; }
  .trim { grid-template-columns: 1fr; justify-items: center; }
  .trim-side { width: 100%; }
  .item { grid-template-columns: 1fr 64px 96px 28px; }
  .head-actions { flex-wrap: wrap; }
  .keys, [data-full] { display: none; }
  .adder-right[open] .form { position: static; width: auto; margin-top: 12px; }
  .lesson-nav { flex-direction: column; }
  .slot-day { grid-template-columns: 1fr; gap: 8px; }
  .avail label { grid-template-columns: 1fr; gap: 4px; }
  .res { flex-wrap: wrap; }
}

.clip-current { width: 96px; height: auto; border-radius: var(--r-sm); margin-bottom: 8px; }
.clip-current.wide { width: 200px; }
.photo-current { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.debriefs { display: grid; gap: 12px; }
.debrief { display: grid; gap: 12px; }
.debrief-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
details.debrief > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
details.debrief > summary::-webkit-details-marker { display: none; }
details.debrief[open] > summary { margin-bottom: 14px; }
details.debrief .t, .debrief header .t { font-weight: 700; }

/* --- Fréquentation des pages publiques */

.visits { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 20px 24px; flex-wrap: wrap; }
.visits dl { display: flex; gap: 36px; flex-wrap: wrap; }
.visits dt { font-size: 13px; color: var(--faint); margin-bottom: 2px; }
.visits dd { font: 800 26px var(--title); letter-spacing: -.035em; }
.visits dd small { font: 550 13px var(--body); color: var(--dim); letter-spacing: 0; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 48px; }
.bars span { display: flex; align-items: flex-end; width: 10px; height: 100%; border-radius: 4px; background: var(--blue-soft); }
.bars i { display: block; width: 100%; min-height: 2px; border-radius: 4px; background: var(--blue); }
.visits-note { margin: 8px 4px 24px; }

/* --- Mes vues : format court et format long (envoyés par le Mac le dimanche) */

.vstats { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.vstats dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.vstats dt { font-size: 13px; color: var(--faint); margin-bottom: 2px; }
.vstats dd { font: 800 32px var(--title); letter-spacing: -.035em; }
.vstats dd.vstats-none { color: var(--faint); }
.vstats-split { display: block; margin-top: 2px; font-size: 12.5px; color: var(--faint); }
.vstats-reco { border-top: 1px solid var(--line); padding-top: 14px; font-size: 14.5px; line-height: 1.5; }
.vstats-reco > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--blue-text); }
.vstats-reco[open] > summary { margin-bottom: 10px; }
.vstats-reco h3 { font-size: 13px; font-weight: 600; color: var(--faint); margin: 12px 0 4px; }
.vstats-reco h3:first-of-type { margin-top: 0; }
.vstats-reco ul { margin: 0; padding-left: 18px; list-style: disc; }
.vstats-reco li::marker { color: var(--blue); }
.vstats-reco li + li { margin-top: 4px; }
.vstats-reco p { margin: 4px 0; }
.vstats-seg a { padding: 5px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--dim); }
.vstats-seg a.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
.vstats-foot { margin: 8px 4px 0; font-size: 12.5px; color: var(--faint); }
.vstats-views { margin-left: auto; }

/* --- Destination de rêve : le monument de l'élève, en filigrane sur son accueil */

.head-dest { position: relative; overflow: hidden; min-height: 168px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; justify-content: center; }
.head-dest > :not(.dest-art) { position: relative; z-index: 1; }
.dest-art { position: absolute; right: 28px; bottom: -1px; height: 92%; width: auto; color: var(--blue); }
.dest-art .soft { opacity: .38; stroke-width: 1.1; }
.dest-art .trail { opacity: .55; stroke-dasharray: 2 7; }
@media (max-width: 700px) {
  .head-dest { min-height: 0; padding: 22px 20px; }
  .dest-art { right: -24px; height: 100%; opacity: .32; }
}

/* --- Parcours d'arrivée : une question par écran */

.flow.solo-wide { max-width: 720px; padding-top: 6vh; }
.flow .solo-card { padding: clamp(24px, 5vw, 44px); }
.flow-form, .flow-welcome { display: grid; gap: 20px; }
.flow-welcome { justify-items: start; }
.flow-welcome h1, .flow h1.flow-q { margin: 0; font: 800 clamp(26px, 4vw, 34px)/1.1 var(--title); letter-spacing: -.035em; text-wrap: balance; }
.flow-welcome .player { width: 100%; }
.flow-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.flow-head .label { margin: 0; }
.flow-input { width: 100%; font-size: 17px; }
textarea.flow-input { line-height: 1.55; }
.flow-why { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-sm); background: var(--blue-soft); font-size: 14.5px; line-height: 1.5; color: var(--text); }
.flow-why .ic { flex: none; margin-top: 1px; color: var(--blue-text); }
.flow-why span { min-width: 0; text-wrap: pretty; }
.flow .form-actions { margin-top: 4px; flex-wrap: wrap; }
.flow .form-actions .link { margin-left: auto; }
.flow-done { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.flow-done .ic { width: 26px; height: 26px; }
.choices { display: grid; gap: 8px; }
.choices label, .dest-pick label { position: relative; cursor: pointer; }
.choices input, .dest-pick input, .scale-pick input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: block; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 16px; transition: border-color .12s, background .12s; }
.choices label:hover span { border-color: var(--blue); }
.choices input:checked + span { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); font-weight: 600; }
.choices input:focus-visible + span, .dest-pick input:focus-visible + span, .scale-pick input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.scale-pick { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.scale-pick label { position: relative; cursor: pointer; }
.scale-pick span { display: grid; place-items: center; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--pill); font: 700 15px var(--title); }
.scale-pick input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.scales { display: grid; gap: 22px; }
.levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.levels label { position: relative; cursor: pointer; }
.levels input { position: absolute; opacity: 0; pointer-events: none; }
.levels label > span { display: grid; place-items: center; min-height: 44px; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: center; }
.levels label:hover > span { border-color: var(--blue); }
.levels input:checked + span { border-color: var(--blue); background: var(--blue); color: #fff; }
.levels input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.notes-ends { display: flex; justify-content: space-between; margin-top: -10px; font-size: 13px; color: var(--faint); }
.scales > div { display: grid; gap: 8px; }
.scales > div > span:first-child { font: 700 16px var(--title); }
.dest-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dest-pick span { display: grid; gap: 2px; padding: 10px 12px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); transition: border-color .12s, background .12s; }
.dest-pick .dest-art { position: static; display: block; width: 100%; height: auto; margin-bottom: 6px; color: var(--blue); }
.dest-pick b { font: 700 15px var(--title); }
.dest-pick small { font-size: 12.5px; color: var(--faint); min-height: 1.2em; }
.dest-pick label:hover span { border-color: var(--blue); }
.dest-pick input:checked + span { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue); }

/* --- Sur l'accueil : les questions qu'il reste à remplir */

.mission { margin-bottom: 20px; padding: 22px 24px; border-color: var(--blue); display: grid; gap: 16px; }
.mission h2 { font: 800 20px var(--title); letter-spacing: -.03em; }
.mission ol { display: grid; }
.mission li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.mission li:last-child { padding-bottom: 0; }
.mission .t { font-weight: 650; }
.mission .meter { margin-top: 8px; max-width: 320px; }
.module-head-split { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.module-tight { margin-top: -8px; }
.notifs .glyph { color: var(--faint); }
.notifs .glyph.is-new { color: var(--blue); }
.notifs .is-unread .t { font-weight: 700; }
.notifs .is-unread::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--blue); }
.notifs .res > .row { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .dest-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scale-pick { gap: 4px; }
  .scale-pick span { height: 38px; font-size: 13px; }
  .mission li { grid-template-columns: minmax(0, 1fr) auto; }
  .mission li .count { display: none; }
}

/* --- Chapitres d'un module */
.rows > .chapter, .list > .chapter { padding: 18px 16px 8px; font: 700 13px var(--title); color: var(--dim); background: none; border: 0; list-style: none; }
.list > .chapter { padding: 14px 16px 6px; font-size: 12.5px; }
.rows > .chapter:first-child, .list > .chapter:first-child { padding-top: 10px; }

/* --- Ressources d'une leçon */
.lesson-res { margin-top: 28px; display: grid; gap: 12px; }
.lesson-res h2 { font: 750 16px var(--title); }

/* --- Écrans tactiles : chaque commande offre au moins 44 px au doigt, sans rien changer à la souris. */
@media (pointer: coarse) {
  .btn, .btn.small, .nav a, .nav button, .crumbs a:last-of-type, .brand { min-height: 44px; }
  .menu-toggle, .theme button { min-height: 44px; }
  .mover button, .saved-del { width: 44px; height: 44px; }
  .versions a, .seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 38px; }
  .peek, .tbtn, .tool { display: inline-flex; align-items: center; min-height: 44px; }
  .tbtn.play { min-width: 44px; justify-content: center; }
  /* Liens d'action dans le texte : la zone sensible déborde autour du mot, l'alignement ne bouge pas. */
  .link, .dl, .home-part-head a, .legal-links a, .legal-nav a, .solo-foot a, .c-done { position: relative; }
  .link::after, .dl::after, .home-part-head a::after, .legal-links a::after, .legal-nav a::after, .solo-foot a::after, .c-done::after { content: ""; position: absolute; inset: -12px -6px; }
  /* Lot 4 de l'audit V1 : appels (créneaux, jours, flèches) et repères des retours sur la ligne de temps. */
  .slot, .cal-nav { min-height: 44px; }
  .cal-nav { min-width: 44px; }
  .cal-d { min-height: 44px; }
  .mark::after { content: ""; position: absolute; inset: -15px; }
  /* Sous 16 px, Safari sur iPhone zoome la page dès qu'on touche un champ. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]), textarea, select { font-size: 16px; min-height: 44px; }
}

/* --- Mentions légales et « Tes données » */

.legal { display: grid; gap: 14px; line-height: 1.6; }
.legal h1 { margin-bottom: 0; }
.legal h2 { margin-top: 18px; font-size: 18px; font-weight: 750; }
.legal ul { display: grid; gap: 8px; padding-left: 20px; }
.legal a { color: var(--blue-text); }
.legal code { font-size: .92em; }
.legal-nav, .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--faint); }
.legal-nav span { color: var(--text); font-weight: 650; }
.legal-nav a, .legal-links a { color: var(--faint); }
.legal-nav a:hover, .legal-links a:hover { color: var(--blue-text); }
.legal-links { margin-top: 32px; }
.legal-date { margin-top: 12px; font-size: 13px; color: var(--faint); }

/* Documents gratuits : l'adresse courte, précédée du nom de domaine */
.d-slug { display: flex; align-items: center; gap: 2px; }
.d-slug span { font: 500 14px var(--mono); color: var(--faint); white-space: nowrap; }
.d-slug input { flex: 1; min-width: 0; }

/* --- CRM du prof : prospects et contacts */

.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.board.board-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }   /* Leads « En cours » : les quatre étapes de la vente, puis « Acompte versé » (07/11/2026) */
.board-head { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px 4px; font-size: 14px; font-weight: 700; }
.board-head span { font: 600 13px var(--mono); color: var(--faint); }
.board-empty { padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r); font-size: 14px; color: var(--faint); }
/* Les colonnes « En cours » sont étroites : les pastilles passent sous le texte, comme sur téléphone, au lieu de l'écraser mot par mot. */
.board .lead-rows a.row:has(> .tag) { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 12px; }
.board .lead-rows a.row:has(> .tag) > .t { flex: 1 0 100%; }
.board .lead-rows a.row > .tag + .tag { margin-left: -6px; }
/* Un @pseudo ou un e-mail sans espace ne déborde pas de la ligne. */
.lead-rows .t { overflow-wrap: anywhere; }
/* Le conseil du topo : ce qu'il faut lui écrire, sur sa propre ligne, plus lisible que le reste. */
.row .t small.lead-todo { margin-top: 3px; font-weight: 550; color: var(--text); }
/* Relances : « Écrire » et « C'est fait » à droite de la ligne, sous elle sur téléphone. */
.lead-rows li.lead-act { display: flex; align-items: center; padding-right: 14px; }
.lead-rows li.lead-act > a.row { flex: 1; min-width: 0; }
.lead-do { display: flex; flex: none; align-items: center; gap: 8px; }
.lead-do .btn svg { width: 15px; height: 15px; }
/* Colonne étroite de l'accueil, ou téléphone : les deux boutons passent sous la ligne. */
.dash-cols .lead-rows li.lead-act { flex-wrap: wrap; padding-right: 0; }
.dash-cols .lead-rows li.lead-act > a.row { flex-basis: 100%; }
.dash-cols .lead-do { padding: 0 16px 12px 20px; margin-top: -4px; }
@media (max-width: 767px) {
  .lead-rows li.lead-act { flex-wrap: wrap; padding-right: 0; }
  .lead-rows li.lead-act > a.row { flex-basis: 100%; }
  .lead-do { padding: 0 16px 12px 20px; margin-top: -4px; }
}
/* Le brouillon de relance du topo : sous la ligne, toute la largeur, comme le DM préparé d'un commentaire. */
.lead-rows li.lead-act:has(> .lead-draft) { flex-wrap: wrap; }
.lead-draft { flex: 1 0 100%; min-width: 0; padding: 0 16px 14px 20px; }
.lead-topo .lead-draft { padding: 12px 0 0; }
.lead-draft .label { margin: 0 0 6px; }
.lead-draft-text { margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: var(--blue-soft); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lead-draft .row-actions { flex-wrap: wrap; align-items: flex-start; }
.lead-draft .btn svg { width: 15px; height: 15px; }
.lead-draft .btn.copied::after { content: " · copié"; }
.lead-draft-edit > summary { list-style: none; }
.lead-draft-edit > summary::-webkit-details-marker { display: none; }
/* « Qui je relance aujourd'hui » de l'Agence (tâche 118, src/agence-relances.js) : une carte par relance, le message, puis les boutons qui passent à la ligne sur iPhone. */
.agence-relances { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.agence-relance .row-head { margin: 0 0 10px; overflow-wrap: anywhere; }
.agence-relance .lead-draft { padding: 0; }
.agence-relance > .row-actions { flex-wrap: wrap; align-items: flex-start; }
.agence-relance > .row-actions > form { margin: 0; }
.agence-relance .lead-draft-edit { flex: 1 0 auto; }
.agence-relance .lead-draft-edit[open] { flex-basis: 100%; }
.agence-relance .lead-draft-edit textarea { width: 100%; }
.lead-draft-edit[open] { flex: 1 0 100%; }
.lead-draft-edit[open] > summary { display: none; }
.lead-draft-edit textarea { width: 100%; }
.crm-filter { margin: -4px 0 12px 4px; }
/* Fiche : « Perdu » demande pourquoi, en un clic. */
.lost-pick > summary { list-style: none; }
.lost-pick > summary::-webkit-details-marker { display: none; }
.lost-pick[open] > summary { background: var(--sunken); }
.lost-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.lost-menu .sub { margin: 0 4px 0 0; }
/* Fiche d'un lead : à gauche ce qui se passe (appel, Instagram, questionnaire, historique), à droite où il en est
   (étape, relance, notes, coordonnées). Sur téléphone, tout s'empile dans cet ordre. */
.lead-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto 1fr; grid-template-areas: "now side" "history side" "danger side"; column-gap: 24px; align-items: start; }
.lead-now { grid-area: now; }
.lead-now > .card { margin: 0 0 12px; }
.lead-side { grid-area: side; display: grid; gap: 12px; }
.lead-side .card { margin: 0; }
.lead-side .status-row .btn { padding-inline: 12px; }
.lead-history { grid-area: history; margin-top: 12px; }
.lead-danger { grid-area: danger; margin-top: 0; }
@media (max-width: 1099px) {
  .lead-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "now" "side" "history" "danger"; }
}
.hot-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--dim); cursor: pointer; }
.hot-toggle:hover { color: var(--text); }
.hot-toggle:not(.on) .tag { opacity: .6; }
.lead-notes textarea { display: block; width: 100%; margin: 10px 0; }
.lead-infos > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.lead-infos > summary::-webkit-details-marker { display: none; }
.lead-infos > summary .link { font-size: 13px; }
.lead-infos[open] > summary .link { visibility: hidden; }
.lead-infos .form { margin-top: 14px; }
.history-form textarea { display: block; width: 100%; }
.history-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.history-row select { flex: 1 1 150px; width: auto; }
/* Ce que la plateforme note seule (étapes, visites, questionnaire) : une ligne discrète entre les échanges. */
.msg-quiet { display: grid; gap: 2px; padding: 2px 20px; font-size: 13px; color: var(--faint); }
.msg-quiet .comment-head { font-size: 12.5px; }
.msg-quiet .msg-text { font-size: 13px; color: var(--dim); }
.notice-error p { margin: 0; }
.merge-form { margin-top: 10px; }
/* Tous les contacts : le titre garde sa ligne, les filtres d'étape passent dessous quand ils ne tiennent pas à côté. */
.module-head-edit:has(> .seg-wrap) { flex-wrap: wrap; align-items: center; }
.search-bar { display: flex; gap: 8px; max-width: 560px; margin-bottom: 24px; }
.search-bar input { flex: 1; min-width: 0; }
/* Filtres sur plusieurs lignes : des pastilles séparées plutôt qu'une pilule géante. */
.seg.seg-wrap { flex-wrap: wrap; gap: 6px; padding: 0; background: none; border: 0; }
.seg-wrap a { border: 1px solid var(--line); background: var(--surface); }
.module-head-edit .seg-wrap a.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-press); box-shadow: none; }
[data-theme="dark"] .module-head-edit .seg-wrap a.on { color: var(--blue-text); }
.lead-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 20px; font-size: 14px; }
.lead-links a { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); overflow-wrap: anywhere; }
.lead-links a:hover { color: var(--blue-text); }
.steps-form + .follow-form { margin-top: 12px; }
.follow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 8px; }
.follow-form .follow-row input[type=date] { width: auto; flex: 0 1 200px; min-width: 0; }
/* Le suivi d'un lead (28/10/2026) : l'étape, « Chaud » et la prochaine relance dans une seule carte. Les étapes en grille de deux,
   l'appel sur toute la largeur, puis les deux issues (Client, Perdu). */
.status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.status-grid > .btn, .status-grid .lost-pick > summary { width: 100%; justify-content: center; text-align: center; }
.status-grid > .span-2, .status-grid .lost-pick[open] { grid-column: 1 / -1; }
.lead-suivi .hot-toggle { margin-top: 16px; }
.lead-suivi .follow-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.lead-suivi .follow-row input[type=date] { flex: 1 1 140px; }
.lead-suivi .follow-form .sub { margin-bottom: 0; }
.more-link { margin-top: 8px; padding-left: 4px; }
.more-link a { color: var(--blue-text); }
.spreads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.spread ol { display: grid; gap: 10px; margin-top: 12px; }
.spread li { display: grid; grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "label n" "track track"; gap: 4px 8px; font-size: 14px; }
.spread-label { grid-area: label; color: var(--dim); }
.spread-n { grid-area: n; text-align: right; font: 650 13px var(--mono); color: var(--text); }
.spread-track { grid-area: track; display: block; height: 8px; border-radius: var(--pill); background: var(--blue-soft); }
.spread-track i { display: block; height: 100%; min-width: 0; border-radius: var(--pill); background: var(--blue); }
@media (max-width: 1199px) { .spreads { grid-template-columns: minmax(0, 1fr); } }
.visits + .funnel { margin-top: 12px; }
.tag-hot { background: var(--blue-soft); color: var(--blue-press); }
/* Une étiquette d'information (d'où il écrit), pas un état : un simple contour, pour ne pas se confondre avec les étapes. */
.tag-place { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--dim); }
.lede .tag-place { vertical-align: 2px; }
[data-theme="dark"] .tag-hot { color: var(--blue-text); }
.lead-call { margin-bottom: 12px; }
.lead-call-when { margin-top: 6px; font-size: 18px; font-weight: 600; }
.lead-call-when small { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--dim); overflow-wrap: anywhere; }
.lead-call .row-actions { flex-wrap: wrap; margin-top: 14px; }
.lead-call .adder-right[open] .form { left: 0; right: auto; }
/* --- Commentaires intéressants : le commentaire, pourquoi il compte, et le DM prêt à partir. */
.comments { display: grid; gap: 12px; }
.comment-card .label a { color: inherit; font-weight: 650; }
.comment-text { margin-top: 8px; font-size: 15px; overflow-wrap: anywhere; }
.comment-card > .sub { margin-top: 4px; }
.comment-draft { margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--blue-soft); font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-card .row-actions, .comment-card .form { flex-wrap: wrap; margin-top: 12px; }
.comment-card .voice-rec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* --- Réponses Instagram : le circuit d'un mot-clé en 4 étapes, avec un enregistreur de vocal dans la page. */
.replies-state .row-actions, .replies-head .row-actions { flex-wrap: wrap; }
.replies-state .row-actions .sub { flex: 1 1 260px; margin: 0; }
.replies-media { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 14px; }
.replies-media .field { flex: 1 1 280px; margin: 0; }
.replies-file { margin-top: 14px; }
.replies-file > summary { cursor: pointer; font-size: 14px; font-weight: 550; color: var(--dim); }
.replies-file[open] > summary { margin-bottom: 12px; }
.replies-rules { margin: 0 0 0 18px; display: grid; gap: 6px; font-size: 14px; color: var(--dim); list-style: disc; }
.replies-tabs { margin-bottom: 12px; }
.replies-head h2 { margin: 0; font-size: 22px; }
.replies-head .sub { margin: 0; }
.replies-steps { display: grid; gap: 12px; margin-top: 12px; counter-reset: none; }
.replies-steps > li { position: relative; padding-left: 64px; }
.replies-steps h3 { margin: 0; font-size: 17px; }
.replies-steps h3 + .sub { margin-top: 4px; }
.replies-step-n { position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border-radius: 50%; background: var(--blue-soft); color: var(--blue-text); font: 700 15px var(--title); }
.replies-steps .form { margin-top: 14px; }
.replies-voice { margin-top: 14px; }
.replies-voice-now { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.replies-voice audio { width: 100%; max-width: 380px; }
.voice-rec-live { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--mono); color: var(--bad); }
.voice-rec-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .voice-rec-live i { animation: none; } }
.voice-rec-review { display: grid; gap: 10px; margin-top: 12px; }
.voice-rec [data-vr-status]:empty { display: none; }
.voice-rec [data-vr-status] { margin-top: 8px; }
.replies-new { margin-top: 12px; }
@media (max-width: 640px) {
  .replies-steps > li { padding-left: 20px; padding-top: 60px; }
  .replies-step-n { top: 18px; }
}
.lead-topo { margin-bottom: 12px; }
.lead-topo .label + * { margin-top: 8px; }
.lead-topo-suggest { margin-top: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--sunken); }
.lead-topo-suggest .row-actions { flex-wrap: wrap; margin-top: 10px; }
.lead-dm { margin-top: 14px; }
.lead-dm > summary { cursor: pointer; font-size: 14px; font-weight: 550; color: var(--dim); }
.lead-dm ol { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: 12px; max-height: 420px; overflow-y: auto; }
.lead-dm li { max-width: 80%; align-self: flex-start; padding: 8px 12px; border-radius: 14px; background: var(--sunken); }
.lead-dm li.me { align-self: flex-end; background: var(--blue-soft); }
.lead-dm li p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.lead-dm li time { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
.lead-answers { margin-bottom: 12px; }
.lead-answers dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; margin-top: 10px; }
.lead-answers dt { font-size: 13px; color: var(--faint); }
.lead-answers dd { font-size: 15px; font-weight: 600; }
@media (max-width: 1199px) { .board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .module-head-edit:has(.seg-wrap) { flex-direction: column; align-items: flex-start; }
  .module-head-edit > .seg-wrap { overflow: visible; }
  .search-bar { flex-wrap: wrap; }
  .search-bar input { flex-basis: 100%; }
}

/* Accueil du prof : deux blocs, Élèves puis Business. */
.home-part { display: grid; gap: 12px; margin-top: 36px; }
.home-part-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.home-part-head h2 { font-size: 20px; }
.home-part-head a { font-size: 14px; color: var(--blue-text); }
.home-part-head a:hover { text-decoration: underline; }
.home-figures dt a:hover { color: var(--blue-text); }
.home-part .more-link { margin-top: -4px; }

/* Prospects : trois onglets (À relancer, En cours, Tous). */
.crm-tabs { margin-bottom: 20px; flex-wrap: wrap; }
.crm-tabs a { padding: 6px 14px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--dim); }
.crm-tabs a:hover { color: var(--text); }
.crm-tabs a.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
[data-theme="dark"] .crm-tabs a.on { background: var(--blue-soft); color: var(--blue-text); box-shadow: none; }
.crm-foot { margin-top: 20px; }

/* Élèves : l'argent de l'accompagnement en haut, les réglages rares en bas. */
.students-money { margin-bottom: 20px; }
.students-more { display: grid; gap: 10px; margin-top: 24px; }
.students-more a { color: var(--blue-text); }
.students-more .adder > summary { font-size: 14px; }
.home-figures dd small, .students-money dd small { font: 550 13px/1 var(--body); color: var(--dim); letter-spacing: 0; }

/* Page de vente : le parcours du visiteur jusqu'au contact, avec le pourcentage à côté du nombre. */
.sales-stats { display: grid; gap: 16px; }
.sales-stats .module-head-edit { margin-bottom: 0; }
.sales-stats .module-head { margin: 8px 0 -4px; }
.spread-pct li { grid-template-columns: minmax(0, 1fr) auto; }
.spread-pct .spread-n { white-space: nowrap; }
.spread-pct .spread-n small { margin-left: 4px; font-size: 12px; font-weight: 550; color: var(--faint); }
.spread-note { margin-top: 14px; font-size: 13px; line-height: 1.45; }
.spreads-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1199px) { .spreads-two { grid-template-columns: minmax(0, 1fr); } }

/* --- Espace prof lisible d'un coup d'œil (19/10/2026)
   Accueil = poste de pilotage : le bloc bleu de la page (ce qui attend une action), une règle de chiffres clés en bleu,
   puis Élèves et Business côte à côte. Mêmes règles réutilisées sur Élèves, la fiche élève, Prospects et Page de vente. */

.dash-head { margin-bottom: 20px; }

/* Le bloc bleu : quatre cases cliquables. Les filets entre les cases sont le fond du bloc qui passe entre elles. */
.todo-band {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: #3d78ff; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--pop);
}
.todo-tile { display: grid; align-content: start; gap: 2px; padding: 20px 22px 20px; background: var(--blue-strong); color: #fff; min-width: 0; }
.todo-tile:hover { background: var(--blue-press); }
.todo-tile:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: var(--r); }
.todo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.todo-top .ic { width: 20px; height: 20px; margin-top: 4px; opacity: .72; }
.todo-n { font: 820 46px/1 var(--title); letter-spacing: -.04em; }
.todo-label { margin-top: 8px; font: 700 15.5px/1.25 var(--title); letter-spacing: -.01em; }
.todo-detail { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.todo-tile.is-zero .todo-n { color: rgba(255, 255, 255, .55); }
.todo-tile.is-zero .todo-label { color: rgba(255, 255, 255, .86); }

/* Le premier jour d'un élève (lot 4 de l'audit V1) : une seule carte bleue à la place des cases à 0. */
.first-step { display: grid; gap: 6px; padding: 26px 28px 28px; background: var(--blue-strong); color: #fff; border-radius: var(--r); box-shadow: var(--pop); }
.first-step .label { color: rgba(255, 255, 255, .82); }
.first-step strong { font: 820 30px/1.12 var(--title); letter-spacing: -.035em; text-wrap: balance; }
.first-step p { max-width: 62ch; color: rgba(255, 255, 255, .9); }
.first-step .btn { justify-self: start; margin-top: 10px; background: #fff; color: #0034b8; }
.first-step .btn:hover { background: #eef3ff; }
@media (max-width: 600px) { .first-step { padding: 22px 20px 22px; } .first-step strong { font-size: 24px; } .first-step .btn { justify-self: stretch; justify-content: center; } }

/* Les chiffres clés : une seule règle à quatre cases, valeurs en bleu électrique. */
.kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 12px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.kpi { display: grid; align-content: start; gap: 2px; padding: 16px 20px 18px; background: var(--surface); min-width: 0; }
a.kpi:hover { background: var(--sunken); }
.kpi-label { font-size: 13px; font-weight: 550; color: var(--faint); }
.kpi-value { font: 820 30px/1.15 var(--title); letter-spacing: -.035em; color: var(--blue-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-detail { font-size: 13px; line-height: 1.4; color: var(--dim); }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dash-cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.dash-cols .home-part { margin-top: 36px; }
.home-sub { display: flex; align-items: baseline; gap: 6px; margin: 8px 0 -2px 4px; font: 700 14px/1.3 var(--title); color: var(--text); letter-spacing: -.01em; }
.home-sub span { font-size: 13px; font-weight: 600; color: var(--faint); }
.home-part-head + .home-sub { margin-top: -2px; }
.rows-quiet .row { min-height: 48px; }
.rows-quiet .row .t { font-weight: 500; color: var(--dim); }

/* Bouton Menu sur téléphone (prof) : le nombre de choses à traiter plutôt qu'un simple point. */
.menu-count { display: none; }

@media (max-width: 1199px) {
  .dash-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 900px) {
  .todo-band, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .dash-head .head-actions { width: 100%; }
  .todo-tile { padding: 16px 16px 16px; }
  .todo-n { font-size: 38px; }
  .todo-label { margin-top: 6px; font-size: 14.5px; }
  .todo-detail { font-size: 12.5px; }
  .kpi { padding: 14px 16px 16px; }
  .kpi-value { font-size: 24px; }
  .kpi-label, .kpi-detail { font-size: 12.5px; }
  .kpis-3 { grid-template-columns: minmax(0, 1fr); }
  .menu-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
    border-radius: var(--pill); background: var(--blue-strong); color: #fff; font: 700 12px/1 var(--body);
  }
}

/* « À surveiller » : une ligne par raison, les élèves en pastilles cliquables. */
.watch { display: grid; }
.watch-line { display: grid; gap: 8px; padding: 14px 18px 16px; }
.watch-line + .watch-line { border-top: 1px solid var(--line); }
.watch-label { font-size: 13px; font-weight: 600; color: var(--faint); }
.watch-names { display: flex; flex-wrap: wrap; gap: 6px; }
.watch-chip {
  display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 5px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--pill); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.watch-chip small { font-size: 12.5px; font-weight: 500; color: var(--faint); }
.watch-chip:hover { border-color: var(--blue); color: var(--blue-press); }
[data-theme="dark"] .watch-chip:hover { color: var(--blue-text); }

/* Téléphone : dans les listes du prof (accueil, prospects), les pastilles passent sous le texte au lieu de l'écraser. */
@media (max-width: 767px) {
  .home-part .rows a.row:has(> .tag), .lead-rows a.row:has(> .tag) { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 12px; }
  .home-part .rows a.row:has(> .tag) > .t, .lead-rows a.row:has(> .tag) > .t { flex: 1 0 100%; }
  .home-part .rows a.row:has(> .glyph):has(> .tag) > .t { flex-basis: calc(100% - 30px); }
  .home-part .rows a.row:has(> .glyph) > .tag { margin-left: 30px; }
  .lead-rows a.row > .tag + .tag { margin-left: -6px; }
}
@media (pointer: coarse) { .watch-chip { min-height: 40px; align-items: center; } }

/* Chiffres clés en tête des pages prof (Élèves, fiche élève, Prospects, Page de vente). */
.kpi-value small { font: 650 14px var(--body); letter-spacing: 0; color: var(--dim); }
.students-money.kpis { margin: 0 0 20px; }
.student-status { margin: 0 0 4px; }
/* Leads : l'entonnoir des 30 derniers jours, quatre étapes (deux par ligne sur téléphone). */
.crm-kpis { margin: 0 0 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sales-kpis { margin: 0; }
@media (max-width: 767px) {
  .crm-kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpi-value small { font-size: 13px; }
}
.sales-settings { margin-top: 40px; }
.student-status { margin-bottom: 24px; }
.people .row { grid-template-columns: minmax(0, 1.4fr) minmax(150px, 1fr) 150px minmax(140px, auto); }
@media (max-width: 767px) { .people .row { grid-template-columns: 1fr auto; } }
@media (max-width: 767px) {
  .people .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t due" "p p" "s s"; }
  .people .row > .t { grid-area: t; }
  .people .due { grid-area: due; align-self: start; }
  .people .progress { grid-area: p; }
  .people .seen { grid-area: s; }
}

/* --- Espace élève lisible d'un coup d'œil (19/10/2026)
   Accueil élève = ce que Camille attend de lui : le bloc bleu de la page (devoirs à modifier et à rendre, relances, nouveautés),
   la règle de chiffres clés (programme, prochain appel, gains, démarchage), puis À faire et Ton programme côte à côte.
   Mêmes composants que l'espace prof (.todo-band, .kpis, .home-part), quelques variantes en plus. */

.todo-band-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis-3.eleve-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-value-text { font-size: 26px; }
.home-resume { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.home-resume strong { font: 800 22px/1.2 var(--title); letter-spacing: -.03em; color: var(--text); }
.home-resume .btn { align-self: flex-start; margin-top: 8px; }
.home-part .mission { margin-top: 16px; }
.demarchage-kpis { margin: 0 0 4px; }

/* Cours : le module où l'élève en est. */
.mcard.is-current { border-color: var(--blue-mid); }
.mcard-label { display: flex; align-items: center; gap: 8px; }

@media (max-width: 900px) {
  .todo-band-3, .kpis-3.eleve-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* Trois cases sur téléphone, sur deux colonnes : les devoirs côte à côte, les nouveautés dessous ;
     pour les chiffres clés, le programme en entier puis les deux autres. */
  .todo-band-3, .kpis-3.eleve-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .todo-band-3 > :last-child, .kpis-3.eleve-kpis > :first-child { grid-column: 1 / -1; }
  .kpi-value-text { font-size: 21px; }
  .home-resume { padding: 18px 18px 20px; }
  .home-resume strong { font-size: 20px; }

  /* Cours : une ligne par module (illustration à gauche) au lieu d'une grande carte, pour voir tout le programme. */
  .mods { gap: 12px; }
  .mcard { display: grid; grid-template-columns: 80px minmax(0, 1fr); }
  .mcard-cover { aspect-ratio: auto; place-items: start center; padding: 18px 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .mcard-cover .mod-icon { width: 52px; height: 52px; box-shadow: 0 8px 16px -8px rgba(0, 40, 140, .4); }
  .mcard-cover .mod-icon-none { font-size: 16px; }
  .mcard-lock { left: 50%; top: auto; bottom: 12px; transform: translateX(-50%); gap: 0; padding: 5px; font-size: 0; }
  .mcard-body { gap: 4px; padding: 14px 16px 16px; }
  .mcard-body h2 { font-size: 17px; }
  .mcard-intro { min-height: 0; font-size: 13.5px; }
  .mbar { margin-top: 8px; }

  /* Portfolio : le nom de la catégorie garde toute la largeur, Monter et Supprimer passent dessous. */
  .res.cat { flex-wrap: wrap; row-gap: 4px; padding: 12px 12px 10px 16px; }
  .res.cat > form { margin: 0; }
  .cat-name { flex: 1 0 100%; }
  .cat-name input { flex: 1; min-width: 0; max-width: none; }
}

/* Onglets d'une entrée du menu prof (Contenu, Vente, Setup…) : une entrée, plusieurs pages. Même pastille que l'entrée active
   du menu. Sur téléphone, la rangée défile au doigt au lieu de passer à la ligne. Une seconde rangée, plus discrète, pour les
   sous-onglets (Top, Cours). */
.section-tabs { display: flex; gap: 4px; margin: -4px 0 22px; overflow-x: auto; scrollbar-width: none; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--pill); font-size: 14px; font-weight: 600; color: var(--dim); text-decoration: none; white-space: nowrap; }
.section-tabs a:hover { background: var(--sunken); color: var(--text); }
.section-tabs a.on { background: var(--blue-soft); color: var(--blue-press); }
[data-theme="dark"] .section-tabs a.on { color: var(--blue-text); }
.section-tabs a .tab-count { margin-left: 8px; min-width: 20px; padding: 1px 6px; border-radius: var(--pill); background: var(--blue-strong); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; }
.section-tabs:has(+ .section-subtabs) { margin-bottom: 8px; }
.section-subtabs a { min-height: 32px; padding: 0 12px; font-size: 13.5px; font-weight: 550; }
.section-subtabs a.on { background: none; box-shadow: inset 0 0 0 1px var(--blue-mid); }
@media (max-width: 640px) {
  .section-tabs { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}

/* Fiche élève (prof) : qui il est et les trois gestes du quotidien en tête, ses chiffres, puis quatre onglets
   (Suivi, Profil, Son business, Contrat et paiements) au lieu d'une longue page. */
.student-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 18px; margin-bottom: 22px; }
.student-head .avatar { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-press); font: 800 19px var(--title); letter-spacing: -.02em; }
[data-theme="dark"] .student-head .avatar { color: var(--blue-text); }
.student-id h1 { margin: 2px 0 2px; }
.student-id .lede { margin: 0; font-size: 15px; }
.student-id .lede a { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.student-id .socials { margin-top: 10px; }
.student-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.student-actions form, .student-actions .adder { margin: 0; }
.student-actions .adder { position: relative; }
.student-actions .adder[open] > summary { margin-bottom: 0; }
.student-actions .adder[open] .form { position: absolute; right: 0; top: 44px; width: 360px; max-width: 86vw; z-index: 6; box-shadow: var(--pop); text-align: left; }
.student-status { margin-bottom: 0; }
.student-tabs { margin: 26px 0 0; }
.student-tabs a { gap: 7px; }
.tab-count { min-width: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.tab-panel[hidden] { display: none; }
.tab-panel > .module:first-child, .tab-panel > :first-child { margin-top: 20px; }
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; background: var(--line); }
.brief > div { padding: 14px 20px 16px; background: var(--surface); }
.brief dt { font-size: 13px; font-weight: 550; color: var(--faint); margin-bottom: 3px; }
.brief dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.brief > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.account-card { display: grid; gap: 12px; justify-items: start; padding: 18px 20px; }
.account-card p { margin: 0; display: grid; gap: 2px; }
.account-card .link { font-size: 14px; }
@media (max-width: 767px) {
  .student-head { grid-template-columns: auto minmax(0, 1fr); }
  .student-head .avatar { width: 48px; height: 48px; font-size: 17px; }
  .student-actions { grid-column: 1 / -1; justify-content: flex-start; padding-top: 8px; }
  .student-actions .adder[open] .form { position: static; width: auto; max-width: none; margin-top: 10px; }
  .student-actions .adder[open] { flex-basis: 100%; }
  .brief { grid-template-columns: minmax(0, 1fr); }
  /* Quatre onglets ne tiennent pas sur une ligne : ils passent à la ligne plutôt que de cacher le dernier et son point. */
  .student-tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .student-tabs a { padding: 0 12px; }
}

/* Encaissements (prof) : quatre chiffres, les 12 derniers mois en barres, puis qui doit quoi et les derniers paiements. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.money-kpis { margin: 0 0 4px; }
.money-chart { margin: 0; padding: 22px 20px 14px; }
.money-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; margin: 0; padding: 0; list-style: none; }
.money-bars li { display: grid; grid-template-rows: 20px 1fr 22px; height: 100%; min-width: 0; text-align: center; }
.money-bar-value { align-self: end; font-size: 12px; font-weight: 750; color: var(--blue-text); white-space: nowrap; }
.money-bar { display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--line); }
.money-bar i { display: block; width: min(100%, 34px); border-radius: 6px 6px 2px 2px; background: var(--blue-mid); }
.money-bars li.is-now .money-bar i { background: var(--blue); }
.money-bar-month { align-self: end; font-size: 12px; font-weight: 600; color: var(--faint); }
.money-bars li.is-now .money-bar-month { color: var(--text); }
.owing .row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 90px 92px; }
.owing .row .amount { text-align: right; }
.owing .row .tag { justify-self: end; }
@media (max-width: 767px) {
  .money-chart { padding: 18px 12px 10px; }
  .money-bars { gap: 4px; height: 160px; }
  .money-bar-value { font-size: 11px; }
  .money-bar-month { font-size: 11px; }
  /* Sur téléphone, les six derniers mois suffisent : douze barres n'y tiendraient qu'à peine. */
  .money-bars { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .money-bars li:nth-child(-n+6) { display: none; }
  .owing .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t amount" "meter tag"; row-gap: 8px; }
  .owing .row .t { grid-area: t; }
  .owing .row .meter { grid-area: meter; align-self: center; }
  .owing .row .amount { grid-area: amount; }
  .owing .row .tag { grid-area: tag; }
}

/* Recherche du prof : un champ en haut du menu (la touche « / » y place le curseur), une page de résultats par type. */
.side-search { position: relative; display: flex; align-items: center; margin: -10px 0 -12px; }
.side-search .ic { position: absolute; left: 13px; color: var(--faint); pointer-events: none; }
.side .side-search input[type="search"][data-search] { width: 100%; height: 40px; padding: 0 34px 0 36px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--sunken); font: 500 14px var(--body); color: var(--text); box-shadow: none; }
.side .side-search input[type="search"][data-search]::placeholder { color: var(--faint); }
.side .side-search input[type="search"][data-search]:focus { outline: none; border-color: var(--blue); background: var(--surface); box-shadow: 0 0 0 3px var(--blue-soft); }
.side-search kbd { position: absolute; right: 9px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: 600 11px var(--body); color: var(--faint); pointer-events: none; }
.side-search input:focus ~ kbd, .side-search input:not(:placeholder-shown) ~ kbd { display: none; }
@media (hover: none), (max-width: 767px) { .side-search kbd { display: none; } }
@media (max-width: 767px) { .side-search { margin: 4px 0 10px; } }
/* Sur un écran d'ordinateur peu haut, le menu défile au lieu de cacher son bas (ton nom, Quitter). */
@media (min-width: 768px) { .side { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
/* Le style général des champs impose 44 px et 16 px (pour qu'iOS ne zoome pas) : sur ordinateur, le champ du menu reste à la taille des liens. */
@media (min-width: 768px) { .side .side-search input[type="search"][data-search] { min-height: 40px !important; font-size: 14px !important; } }
.search-page input[type="search"] { height: 48px; font-size: 16px; }
.count-soft { margin-left: 4px; font-size: 15px; font-weight: 600; color: var(--faint); }

/* Fiche élève, onglet Profil : sa vie de lead avant l'inscription. */
.origin-card { padding: 16px 20px; }
.origin-line { margin: 0; color: var(--dim); }
.origin-line b { font-weight: 700; color: var(--text); }
.origin-notes { margin: 10px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
#origine .lead-answers { margin-top: 12px; }
#origine .fold { margin-top: 12px; }

/* --- Ventes par vidéo : une ligne par vidéo, ses chiffres à droite (sous le titre sur téléphone). */
.vsales-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 16px 14px 20px; }
.vsales-main { flex: 1 1 240px; min-width: 0; }
.vsales-title { margin: 0; font-weight: 650; color: var(--text); overflow-wrap: anywhere; }
.vsales-sub { margin: 2px 0 0; font-size: 13px; color: var(--faint); overflow-wrap: anywhere; }
.vsales-url { color: var(--dim); font-weight: 550; }
.vsales-figs { display: flex; gap: 20px; margin: 0; }
.vsales-figs div { display: grid; justify-items: end; min-width: 44px; }
.vsales-figs dt { font-size: 12px; font-weight: 550; color: var(--faint); }
.vsales-figs dd { margin: 0; font: 750 17px var(--title); color: var(--text); white-space: nowrap; }
.vsales-figs .is-money { min-width: 72px; }
.vsales-figs .has-money dd { color: var(--blue-text); }
.vsales-row.is-none { background: var(--sunken); }
.vsales-row.is-none .vsales-title { color: var(--dim); }
.vsales-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.vsales-actions:has(.vsales-edit[open]) { flex-basis: 100%; }
.vsales-copy span + span, .vsales-copy.copied span:first-child { display: none; }
.vsales-copy.copied span + span { display: inline; color: var(--ok); }
.vsales-edit > summary { list-style: none; }
.vsales-edit > summary::-webkit-details-marker { display: none; }
.vsales-edit[open] { flex-basis: 100%; }
.vsales-edit .form { margin-top: 12px; max-width: 480px; }
.vsales-edit form + form { margin-top: 12px; }
.vsales-slug { display: flex; align-items: center; gap: 6px; }
.vsales-slug > span { flex: none; font-size: 14px; color: var(--faint); }
.vsales-slug input { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .vsales-figs { flex: 1 1 100%; justify-content: space-between; }
  .vsales-figs div { justify-items: start; }
}

/* --- Séquence d'emails d'un document (sequences.js) */
.seq-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.seq-state { margin: 0; color: var(--dim); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seq-kpis { margin: 16px 0 20px; }
.seq-waiting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.seq-day { flex: none; min-width: 48px; padding: 3px 10px; border-radius: var(--pill); background: var(--blue-soft); color: var(--blue-press); font-size: 13px; font-weight: 700; text-align: center; }
.seq-active { align-self: end; padding-bottom: 10px; }
.seq-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.seq-photo { position: relative; display: grid; gap: 4px; cursor: pointer; text-align: center; }
.seq-photo input { position: absolute; opacity: 0; pointer-events: none; }
.seq-photo img, .seq-none { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); border: 2px solid transparent; }
.seq-none { display: grid; place-items: center; background: var(--sunken); color: var(--faint); font-size: 13px; }
.seq-photo small { font-size: 12px; color: var(--faint); }
.seq-photo input:checked + img, .seq-photo input:checked + .seq-none { border-color: var(--blue); }
.seq-photo input:focus-visible + img, .seq-photo input:focus-visible + .seq-none { outline: 2px solid var(--blue); outline-offset: 2px; }
.seq-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; max-width: 760px; }

/* --- Photos et témoignages des élèves (temoignages.js) */
img.avatar { object-fit: cover; padding: 0; }
.temoin-photo { display: block; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 4px 0 12px; }
.temoin-line { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.temoin-line .temoin-photo { width: 64px; height: 64px; margin: 0; flex: none; }
.temoin-line .sub { margin: 0; }
.temoin-empty { display: grid; place-items: center; background: var(--blue-soft); color: var(--blue-press); font-weight: 800; }
.temoin-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.temoin-card { display: grid; justify-items: start; gap: 6px; padding: 20px; }
.temoin-big { display: block; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.temoin-name { margin: 6px 0 0; font-weight: 750; font-size: 17px; }
.temoin-name a { color: var(--text); }
.temoin-money { margin: 0; font-weight: 700; color: var(--blue-text); }
.temoin-money small { display: block; font-weight: 450; color: var(--faint); font-size: 13px; }
.temoin-quote { margin: 4px 0; color: var(--dim); font-style: normal; line-height: 1.5; }

/* Formulaires : une seule colonne qui suit la largeur de la carte. Sans minmax(0, 1fr), un enfant qui ne peut pas
   rétrécir (une rangée de boutons) élargissait toute la colonne, et tout le formulaire débordait à droite sur téléphone. */
.form { grid-template-columns: minmax(0, 1fr); }
.form-actions { flex-wrap: wrap; row-gap: 12px; }

/* iPhone : Safari centre le texte d'un champ date et lui donne sa propre largeur. On l'aligne sur les autres champs. */
@supports (-webkit-touch-callout: none) {
  input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; text-align: left; }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}


/* iPhone : Safari donne à une liste déroulante la largeur de sa plus longue option (les modèles de messages du démarchage,
   par exemple) et ne la laisse pas rétrécir. Elle débordait du formulaire, et la page glissait vers la gauche dès qu'on
   touchait un champ. Les champs suivent désormais la largeur du formulaire, et la page ne peut plus glisser de côté. */
.field { min-width: 0; grid-template-columns: minmax(0, 1fr); }
input, select, textarea { min-width: 0; max-width: 100%; }
select { text-overflow: ellipsis; }
html { overflow-x: clip; }

/* Cartes de chiffres (dernière vidéo YouTube, clients et démarchage d'un élève…) : les étiquettes alignées sur une même ligne
   en haut, même quand le premier chiffre est plus gros que les autres ; le lien reste centré à droite. */
.earn-mini { align-items: flex-start; }
.earn-mini .link { align-self: center; }

/* --- Ventes par vidéo : la vignette du reel ou de la story, à gauche du titre (vignettes.js). Les lignes sans vignette gardent
   sa place quand la liste en a, pour aligner les titres. */
.vsales-thumb { flex: none; display: block; width: 54px; aspect-ratio: 9 / 16; margin-right: -8px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--sunken); }
.vsales-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .15s; }
a.vsales-thumb:hover img { opacity: .85; }
.vsales-thumb.is-empty { display: none; }
.has-thumbs .vsales-thumb.is-empty { display: block; height: 0; aspect-ratio: auto; border: 0; background: none; }
.vsales-thumb + .vsales-main { flex-basis: 180px; } /* le titre reste à côté de la vignette sur téléphone */

/* --- Factures : le statut de l'élève et le type de client, en choix radio (factures.js) */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; gap: 10px; }
fieldset.field > legend { padding: 0; margin-bottom: 4px; }
/* Les champs de saisie prennent toute la largeur : un bouton radio garde sa taille de case. */
fieldset.field .check input[type=radio][name] { appearance: auto; accent-color: var(--blue-strong); width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; border: 0; box-shadow: none; background: none; }
.doc-cancel { margin-top: 20px; }
.doc-cancel .form-actions { flex-wrap: wrap; }

/* --- Veille : un débrief en Markdown, lu dans l'espace prof (src/veille.js) */
.veille { padding: 26px 30px 30px; font-size: 15.5px; line-height: 1.6; color: var(--dim); overflow-wrap: anywhere; }
.veille > :first-child { margin-top: 0; }
.veille h2 { font: 780 21px/1.25 var(--title); letter-spacing: -.025em; color: var(--text); margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.veille h2:first-child { padding-top: 0; border-top: 0; }
.veille h3 { font: 750 17px/1.3 var(--title); letter-spacing: -.02em; color: var(--text); margin: 24px 0 8px; }
.veille h4 { font: 650 14px/1.3 var(--title); color: var(--faint); margin: 18px 0 6px; }
.veille p { margin: 10px 0; }
.veille strong { color: var(--text); font-weight: 650; }
.veille a { color: var(--blue-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.veille ul, .veille ol { margin: 8px 0; padding-left: 22px; }
.veille ul { list-style: disc; }
.veille ol { list-style: decimal; }
.veille li { padding-left: 4px; }
.veille li + li { margin-top: 6px; }
.veille li::marker { color: var(--blue); font-weight: 650; }
.veille li > ul, .veille li > ol { margin: 6px 0 4px; }
.veille li > ul { list-style: circle; }
.veille hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.veille blockquote { margin: 12px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--blue-mid); color: var(--text); }
@media (max-width: 640px) {
  .veille { padding: 20px 18px 24px; font-size: 15px; }
  .veille h2 { font-size: 19px; }
  .veille ul, .veille ol { padding-left: 18px; }
}

/* --- Leads chauds, stories gardées, entonnoir (leads-chauds.js, stories.js, entonnoir.js) */
.seg-links a { white-space: nowrap; padding: 5px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--dim); }
.seg-links a:hover { color: var(--text); }
.seg-links a.on { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--line); }
[data-theme="dark"] .seg-links a.on { background: var(--blue-soft); color: var(--blue-text); box-shadow: none; }
.seg-links.seg-wrap a.on { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-press); box-shadow: none; }
[data-theme="dark"] .seg-links.seg-wrap a.on { color: var(--blue-text); }
.hot-stages { margin: 0 0 14px; }
.hot-search { margin: 20px 0 8px; }
.hot-li .hot-row { display: grid; grid-template-columns: 36px minmax(140px, 1.3fr) minmax(90px, auto) minmax(90px, .7fr) 46px 64px minmax(110px, .8fr) auto; align-items: center; gap: 10px 14px; }
.hot-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-press); font: 800 14px var(--title); }
[data-theme="dark"] .hot-avatar { color: var(--blue-text); }
.hot-ges { display: flex; flex-wrap: wrap; gap: 6px; color: var(--dim); }
.hot-g { display: inline-flex; align-items: flex-start; gap: 1px; }
.hot-g sup { font-size: 11px; font-weight: 700; color: var(--faint); }
.hot-src { font-size: 13px; color: var(--dim); }
.hot-score { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 8px; border-radius: var(--pill); background: var(--blue-soft); color: var(--blue-press); font: 800 15px var(--title); }
[data-theme="dark"] .hot-score { color: var(--blue-text); }
.hot-conf { display: block; height: 6px; border-radius: var(--pill); background: var(--line); overflow: hidden; min-width: 48px; }
.hot-conf i { display: block; height: 100%; border-radius: var(--pill); background: var(--ok); }
.hot-when { font-size: 13px; color: var(--dim); }
.hot-when small { display: block; color: var(--faint); font-size: 12px; margin-top: 1px; }
.hot-how { margin-top: 28px; }
.hot-how .prose ul { margin: 8px 0 8px 1.2em; list-style: disc; }
.hot-how code { font-size: .92em; }
.hot-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.hot-cols .module { margin-top: 28px; }
.hot-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hot-table th { text-align: left; font-size: 12px; font-weight: 650; color: var(--faint); padding: 0 0 6px; }
.hot-table td { padding: 8px 0; border-top: 1px solid var(--line); color: var(--dim); }
.hot-table td:first-child { color: var(--text); font-weight: 550; }
.hot-table td:first-child .ic { display: inline-block; vertical-align: -3px; margin-right: 6px; color: var(--dim); }
.hot-table th:nth-child(n+2), .hot-table td:nth-child(n+2) { text-align: right; width: 70px; }
.hot-timeline { margin-top: 16px; display: grid; gap: 0; }
.hot-tl { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.hot-tl-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sunken); color: var(--dim); }
.hot-tl-t { margin: 0; font-size: 14px; color: var(--dim); }
.hot-tl-t strong { color: var(--text); font-weight: 650; }
.hot-tl-t a { color: var(--blue-text); }
.hot-tl-x { margin: 4px 0 2px; font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.hot-facts { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; }
.hot-facts div { display: flex; gap: 12px; justify-content: space-between; }
.hot-facts dt { color: var(--faint); }
.hot-facts dd { margin: 0; text-align: right; color: var(--text); overflow-wrap: anywhere; }
.hot-erase { margin-top: 14px; }
.kpi .hot-conf { margin-top: 6px; max-width: 160px; }
.kpi-value small { font-size: 14px; }

.story-top { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.story-thumb { display: block; width: 180px; aspect-ratio: 9 / 16; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--sunken); }
.story-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-thumb.is-empty { display: grid; place-items: center; font-size: 13px; color: var(--faint); }
.story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.story-card { display: grid; align-content: start; gap: 2px; padding: 14px 16px 16px; }
.story-card .kpi-value { font-size: 26px; }
.story-card .kpi-value-text { font-size: 17px; line-height: 1.3; white-space: normal; }
.stories .vsales-row { padding-right: 20px; }

.funnel-steps { display: grid; gap: 10px; }
.funnel-step { padding: 16px 20px 14px; }
.funnel-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.funnel-label { font: 700 15px var(--title); color: var(--text); }
.funnel-n { font: 820 28px/1.1 var(--title); letter-spacing: -.035em; color: var(--blue-text); }
.funnel-bar { height: 8px; margin: 10px 0 8px; border-radius: var(--pill); background: var(--blue-soft); overflow: hidden; }
[data-theme="dark"] .funnel-bar { background: var(--line); }
.funnel-bar i { display: block; height: 100%; border-radius: var(--pill); background: var(--blue); }
.funnel-detail { margin: 0; font-size: 13px; color: var(--dim); }
.funnel-detail strong { color: var(--text); font-weight: 650; }
.funnel-cash { background: var(--sunken); }

@media (max-width: 1100px) {
  .hot-li .hot-row { grid-template-columns: 36px minmax(0, 1fr) 46px auto; }
  .hot-li .hot-row .hot-ges, .hot-li .hot-row .hot-src, .hot-li .hot-row .hot-conf { display: none; }
  .hot-li .hot-row .hot-when { grid-column: 2 / -1; }
}
@media (max-width: 860px) {
  .hot-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .story-top { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .story-thumb { width: 120px; }
  .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .story-top { grid-template-columns: minmax(0, 1fr); }
  .story-thumb { width: 140px; }
  .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funnel-n { font-size: 24px; }
}

/* --- La page de correction d'un devoir, sur téléphone (28/10/2026, Camille : « l'onglet où je dois corriger les devoirs de mes élèves […] il est complètement buggé et la mise en page, elle n'est pas facile »).
   Une colonne, dans l'ordre : le titre et la décision, la vidéo (sa forme respectée) et ses contrôles, les retours, puis le retour à écrire, le vocal et UN bouton principal « Envoyer ».
   Avant : trois lignes de boutons avant de voir la vidéo, une liste de retours qui défilait dans la page (deux défilements l'un dans l'autre), un champ de texte à 14 px (l'iPhone zoomait dessus à chaque touche),
   un bouton « Filmer » que le téléphone ne sait pas faire. Sur ordinateur, rien ne change. */
.rv-actions .sm { display: none; }
.vocal { display: contents; }
.vocal-review { flex: 1 1 100%; display: grid; gap: 6px; }
.vocal-review audio { display: block; width: 100%; height: 40px; }
.vocal-actions { display: flex; gap: 16px; }
.vocal-status { flex: 1 1 100%; font-size: 12.5px; }
.vocal-status:empty { display: none; }
.comment-audio { display: block; width: 100%; height: 40px; margin-top: 8px; }
@media (max-width: 700px) {
  .rv-title .crumbs { display: none; }
  .rv-bar { gap: 10px; margin-bottom: 8px; align-items: stretch; }
  .rv-title h1 { font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
  .rv-title .sub { margin: 2px 0 0; }
  .rv-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .rv-actions form { flex: 1 1 0; min-width: 0; }
  .rv-actions { gap: 6px; }
  .rv-actions form { gap: 6px; }
  .rv-actions form .btn { flex: 1 1 auto; min-width: 0; padding-inline: 10px; font-size: 13px; white-space: nowrap; }
  .rv-actions .lg { display: none; }
  .rv-actions .sm { display: inline; }
  .rv-actions > .btn { flex: none; min-width: 44px; justify-content: center; }
  .rv-actions > .btn .lg { display: none; }
  .vbar { gap: 8px 12px; margin-bottom: 10px; }
  .vmeta { flex: 1 1 0; gap: 2px 12px; font-size: 12.5px; }
  .vmeta .vfile { display: none; }
  .vbar-end { margin-left: 0; }
  .brief-pop { position: static; }
  .brief-pop .prose { left: 0; right: 0; width: auto; }
  .review { gap: 12px; }
  .comments { max-height: none; overflow: visible; }
  .notes { overflow: visible; }
  .notes-head { padding: 10px 12px; }
  .compose { padding: 12px; border-radius: 0 0 var(--r) var(--r); }
  .compose textarea, html[data-da="baze"] body .compose textarea { font-size: 16px; min-height: 84px !important; }
  .compose-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .compose-tools { gap: 8px; }
  .compose .compose-foot > .btn.small, html[data-da="baze"] body .compose .compose-foot > .btn.small { width: 100%; min-height: 48px; padding: 0 18px; border-radius: 24px; font-size: 16px; background: var(--blue-strong, var(--blue)); border-color: transparent; color: #fff; }
  .compose .tool, .compose .at { min-height: 40px; }
  .compose-tools .rec .btn { min-height: 40px; }
  .comment-video, .comment-audio { max-width: 100%; }
}

/* --- Le poste de correction d'un devoir sur ordinateur (28/10/2026, Camille : « il faut vraiment corriger l'espace devoir ou les retours ici. C'est important. »).
   Avant : une colonne de 840 px, une vidéo de 360 px, la barre de lecture tout en bas d'une grande zone vide, le temps et la durée qui se chevauchent (police à chasse fixe trop large pour sa case), « Plein écran » coupé,
   un en-tête qui change d'un devoir à l'autre, des outils sur deux lignes avec « Envoyer » en bouton gris, un panneau de retours étiré, des raccourcis sur deux lignes. Le téléphone a ses règles plus haut (max-width: 700px). */
.compose .compose-foot > .btn.small, html[data-da="baze"] body .compose .compose-foot > .btn.small { width: 100%; min-height: 44px; padding: 0 18px; border-radius: 22px; font-size: 15px; background: var(--blue-strong, var(--blue)); border-color: transparent; color: #fff; }
.compose-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.compose-tools { flex-wrap: wrap; }
@media (min-width: 700px) {
  /* Un seul en-tête, toujours pareil : le titre à gauche (une ligne), l'état et les décisions à droite. Les décisions sont secondaires : le seul bouton bleu de la page est « Envoyer ». */
  .rv-bar { flex-wrap: nowrap; align-items: center; gap: 16px; }
  .rv-title { flex: 1 1 0; min-width: 0; }
  .rv-title h1, html[data-da="baze"] .rv-title h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-wrap: nowrap; }   /* text-wrap: balance de h1 annule white-space: nowrap */
  .rv-actions { flex: none; flex-wrap: nowrap; justify-content: flex-end; }
  .rv-actions .btn, .rv-actions .btn.decide { white-space: nowrap; }
  .keys { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; gap: 4px 6px; font-size: 12px; opacity: .85; }
  .keys kbd { margin-left: 8px; }
}
@media (min-width: 1200px) {
  .review { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; min-height: 0; }
  .review.no-video { grid-template-columns: minmax(0, 760px); }
  .notes { align-self: start; }
  .comments { flex: 0 1 auto; max-height: none; }
}
/* Téléphone : les décisions gardent leur bouton bleu (Valider, Marquer comme traité), comme avant */
@media (max-width: 699.98px) {
  html body .rv-actions form .btn.decide, html[data-da="baze"] body .rv-actions form .btn.decide:not(:disabled) { background: var(--blue-strong, var(--blue)); color: #fff; }
  html body .rv-actions form .btn.decide[value="a_revoir"], html[data-da="baze"] body .rv-actions form .btn.decide[value="a_revoir"]:not(:disabled) { background: rgba(255, 255, 255, .09); color: var(--text); }
}

/* --- Poste de correction : états de la lecture, chronomètre stable (29/10/2026) */
/* Le chronomètre du retour changeait de largeur à chaque image (chiffres de largeurs différentes) : « Dessiner », « Filmer » et « Vocal » tremblaient à 25 images par seconde. */
.at { font-variant-numeric: tabular-nums; min-width: 6.4em; text-align: center; }
.at.off { min-width: 0; }
@media (min-width: 1200px) {
  /* Le bas de la page d'un devoir n'a plus la place du dock (il n'existe pas sur ordinateur) : la fenêtre n'est plus plus petite que la page. */
  body.is-poste .bp-main, .main.tight { padding-bottom: 12px; }
  html[data-da="baze"] body.mzs.is-poste .bp-wrap { padding-bottom: 12px; }
}

.tc-jump.is-range { white-space: nowrap; }

/* --- L'intervenant (31/10/2026, src/intervenant.js) : le choix de la personne à qui l'élève écrit, le filtre de Camille, le compteur */
.aide-choix { margin: 0 0 18px; padding: 0; border: 0; display: grid; gap: 8px; }
.aide-choix legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 650; color: var(--text); }
.aide-pour { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.aide-pour:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.aide-choix .aide-pour input[type=radio][name] { appearance: auto; accent-color: var(--blue-strong); width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; border: 0; box-shadow: none; background: none; }
.aide-pour > span { flex: 1; min-width: 0; }
.aide-pour strong { display: block; font-size: 15px; font-weight: 650; color: var(--text); }
.aide-pour small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--dim); }
.aide-filtre { margin: 0 0 8px; }
.interv-titre { margin: 22px 0 8px; font-size: 14px; font-weight: 650; color: var(--text); }
.interv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.interv-table th { text-align: left; font-size: 12px; font-weight: 650; color: var(--faint); padding: 0 12px 6px 0; }
.interv-table td { padding: 8px 12px 8px 0; border-top: 1px solid var(--line); color: var(--dim); }
.interv-table td:first-child { color: var(--text); font-weight: 550; text-transform: capitalize; }
.interv-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.interv-actions form { margin: 0; }
@media (max-width: 640px) { .interv-table { display: block; overflow-x: auto; } }

/* Écrire à Camille (11/11/2026) : l'assistant d'abord, puis le formulaire, et « filme ton écran » bien visible. */
.aide-etape { margin: 8px 0 12px; font-size: 15px; color: var(--dim); }
.aide-etape + .card, .aide-etape + .bot-carte { margin-top: 0; }
.aide-form .aide-filme { margin: 0 0 16px; }

/* Mac et Windows (13/11/2026) : le petit mot sur une ressource qui n'est que pour un système, et la fiche « Sur Windows » d'une leçon. */
.os-tag { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: var(--pill); background: var(--blue-soft); color: var(--blue-text); font: 600 12px var(--body); font-style: normal; vertical-align: 1px; }
.fiche-windows { margin-top: 20px; }
.fiche-windows .label { margin-bottom: 8px; }
.versions-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.versions-3 .drop { min-width: 0; }
.versions-3 .field-label { font-weight: 650; margin-bottom: 6px; }
@media (max-width: 760px) { .versions-3 { grid-template-columns: 1fr; } }

/* La carte « Pré-correction » du poste de correction (src/precorrection.js, 13/11/2026) : au-dessus du poste, une ligne (verdict, compte, gestes) et la grille dépliable. */
.precorr { margin: 0 0 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 8px; }
.precorr-barre { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.precorr-barre h3 { margin: 0; font-size: 15px; font-weight: 650; }
.precorr-puce { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--wait-soft); color: var(--wait); }
.precorr-puce.is-valide { background: var(--ok-soft); color: var(--ok); }
.precorr-puce.is-a_revoir { background: var(--bad-soft); color: var(--bad); }
.precorr-compte { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--dim); }
.precorr-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.precorr-dit, .precorr-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--dim); }
.precorr-detail > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dim); }
.precorr-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px 24px; margin: 12px 0 0; padding: 0; list-style: none; }
.precorr-grille li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.35; }
.precorr-grille li.is-lien { cursor: pointer; }
.precorr-grille li.is-lien:hover .precorr-texte > span { text-decoration: underline; }
.precorr-marque { flex: none; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; background: var(--sunken); color: var(--faint); box-shadow: inset 0 0 0 1px var(--line-strong); }
.is-tenu > .precorr-marque { background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.is-pas_tenu > .precorr-marque { background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.precorr-texte { flex: 1; min-width: 0; display: grid; gap: 1px; }
.precorr-texte small { color: var(--faint); font-size: 12.5px; line-height: 1.4; }
.is-pas_tenu .precorr-texte small { color: var(--bad); }
.precorr-bloquant { flex: none; font-size: 11px; font-weight: 700; color: var(--faint); border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 0 7px; margin-top: 1px; }
.precorr-message { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--dim); }
.precorr-message textarea { width: 100%; font: inherit; font-size: 14px; font-weight: 400; line-height: 1.45; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm, 10px); background: var(--surface); color: var(--text); resize: vertical; }
.precorr-squelette { display: grid; gap: 8px; }
.precorr-squelette i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--line) 25%, var(--sunken) 50%, var(--line) 75%); background-size: 200% 100%; animation: precorr-pulse 1.4s linear infinite; }
.precorr-squelette i:nth-child(2) { width: 82%; } .precorr-squelette i:nth-child(3) { width: 64%; }
@keyframes precorr-pulse { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .precorr-squelette i { animation: none; } }
@media (max-width: 699.98px) { .precorr { padding: 12px; } .precorr-gestes { margin-left: 0; width: 100%; } .precorr-grille { grid-template-columns: 1fr; } }

/* Ce que voit l'élève une fois que Camille a validé : sa grille, tenu ou à reprendre, puis la synthèse (src/precorrection.js, grilleEleve) */
.ta-grille { display: grid; gap: 12px; margin: 0 0 16px; }
.grille-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.grille-liste li { display: flex; align-items: flex-start; gap: 12px; }
.g-marque { flex: none; min-width: 92px; display: inline-flex; justify-content: center; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); font-size: 12px; font-weight: 700; background: var(--sunken); color: var(--dim); }
.g-ok .g-marque { background: var(--ok-soft); color: var(--ok); }
.g-ko .g-marque { background: var(--bad-soft); color: var(--bad); }
.g-texte { display: grid; gap: 2px; font-size: 15px; line-height: 1.4; min-width: 0; }
.g-texte small { color: var(--faint); font-size: 13px; }
.g-ko .g-texte small { color: var(--bad); }
.g-texte .g-reprendre { color: var(--dim); }
.ta-grille .synthese { margin: 0; font-size: 15px; line-height: 1.55; padding-top: 10px; border-top: 1px solid var(--line); }

/* Un rendu en texte ou en PDF, lu dans le poste de correction */
.rendu-texte { white-space: pre-wrap; overflow-wrap: anywhere; padding: 20px 22px; font-size: 15.5px; line-height: 1.65; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.rendu-pdf { display: grid; gap: 12px; max-height: 80vh; overflow-y: auto; }
.rendu-pdf img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--r-sm, 10px); background: #fff; }
.rendu-texte-form textarea[name="texte"] { min-height: 280px; font-size: 15.5px; line-height: 1.6; }

/* La grille d'un devoir et ses extras (la page du devoir, l'éditeur des modèles) */
.devoir-extras .rend { margin: 0; }
.criteria .coches { display: grid; gap: 8px; margin-top: 10px; padding: 0; list-style: none; }
.coches label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.4; }
.coches input { margin-top: 3px; flex: none; }
.criteria .exemples { margin-top: 12px; font-size: 14px; }
.criteria .exemples summary { cursor: pointer; color: var(--dim); font-weight: 550; }
.criteria .exemples ul { display: grid; gap: 8px; margin-top: 8px; padding: 0; list-style: none; }
.criteria .exemples li { display: grid; gap: 1px; }
.criteria .exemples .bon { color: var(--ok); }
.criteria .exemples .reprendre { color: var(--wait); }
.grille-edit .grille-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.grille-edit .g-ex { grid-column: 1 / -1; }
.grille-edit .g-ex summary { cursor: pointer; font-size: 13px; color: var(--faint); }
.grille-edit .g-ex input { width: 100%; margin-top: 6px; }
.grille-edit .g-bloquant { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); white-space: nowrap; }
@media (max-width: 699.98px) { .grille-edit .grille-row { grid-template-columns: minmax(0, 1fr); } }