/* =========================================================================
   SOG — glue spécifique à l'app. NE REDÉFINIT AUCUN composant du DS :
   la navbar (.snav), l'en-tête (.page-title), les boutons (.cta), les cartes
   (.pick-card), les tags (.tag), les blocs terminal (.code-block) viennent de
   /ds.css. Ici uniquement : le chip « Padawan » du masthead, l'extension de la
   rampe de bleus pour >4 sections, et les widgets SANS brique existante
   (options de QCM, barres, calendrier, champs), bâtis sur les TOKENS et la
   grammaire de cartes documentée dans la charte. Aucun hex en dur.
   ========================================================================= */

/* --- Masthead : statut de connexion (coin droit du SiteHeader) --- */
.sh-right { display: flex; align-items: stretch; }
.sog-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 100%;
  background: transparent; color: var(--cream-mute);
  font-family: var(--mono); font-size: 11.5px;
  transition: color .18s ease;
}
.sog-status:hover { color: var(--cream); }
.sog-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.sog-status.on .sog-status-dot { background: var(--dot-green); }
/* Déconnecté : « Se connecter » est un APPEL À L'ACTION, pas un statut —
   texte crème plein + point brique pour être vu au premier coup d'œil. */
.sog-status.login { color: var(--cream); }
.sog-status.login .sog-status-dot { background: var(--brique); }
@media (max-width: 560px) { .sog-status-label { display: none; } .sog-status.login .sog-status-label { display: inline; } }

/* --- Indicateur de synchro (vérité serveur) : variante non cliquable du
       bloc .sog-status existant. Le point porte l'état (vert = enregistré,
       jaune = en cours / hors-ligne, rouge = erreur). --- */
.sog-sync { cursor: default; padding: 0 10px; }
.sog-sync:hover { color: var(--cream-mute); }
.sog-sync.is-ok .sog-status-dot { background: var(--dot-green); }
.sog-sync.is-saving .sog-status-dot { background: var(--dot-yellow); animation: sog-sync-pulse 1s ease-in-out infinite; }
.sog-sync.is-off .sog-status-dot { background: var(--dot-yellow); }
.sog-sync.is-err .sog-status-dot { background: var(--dot-red); }
.sog-sync.is-err { color: var(--dot-red); }
@keyframes sog-sync-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sog-sync.is-saving .sog-status-dot { animation: none; } }

/* --- Sous-menu .csub : volet du MILIEU (le DS ne gère que left/right) --- */
.csub-mid {
  clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
  margin-left: -20px; padding-left: 58px; padding-right: 58px;
}

/* --- Bascule « Général / par zone » : mécanisme des pastilles FR/EN (.sh-lang) --- */
.sog-ztoggle { display: inline-flex; height: 34px; }
.sog-zpill {
  display: flex; align-items: center; cursor: pointer;
  font-family: var(--display); font-size: 13px; letter-spacing: -0.01em;
  color: var(--cream-mute); background: var(--marine-dim);
}
.sog-zpill.l { clip-path: polygon(13px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); padding: 0 15px 0 20px; }
.sog-zpill.r { clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); padding: 0 20px 0 16px; margin-left: -7px; }
.sog-zpill.is-active { background: var(--brique); color: var(--marine); }

/* --- Navbar : 4 sections (Ma progression · S'entraîner · Le concours ·
       Profil) = le schéma DS d'origine. La rampe de bleus « de plus en plus
       clair » (marine → marine-4) vient de ds.css, plus aucune surcharge ici
       (l'extension à 5 sections a disparu avec la fusion Accueil+Progression). --- */

/* --- Wrapper de module (fondu d'entrée) --- */
.site-main { padding-top: 44px; }
.sog-screen { animation: sog-fade .22s ease; }
@keyframes sog-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Widgets app-spécifiques (aucune brique DS équivalente) — sur tokens.
   ========================================================================= */

/* Surface générique = grammaire de carte du DS (surface + filet 1px). */
.sog-surface {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 18px 20px;
}
.sog-surface + .sog-surface { margin-top: 12px; }
.sog-surface.accent { border-left: 3px solid var(--brique); }

/* --- Cadre marine (titre + points) — compo ; étapes en rail — concours.
       Les figs du cadre ont disparu avec la refonte « Le concours » (les
       chiffres vivent au hero .cq-figs de la page). --- */
.sog-cadre { background: var(--marine); color: var(--cream); }
.sog-cadre-h { font-family: var(--display); color: var(--brique); text-transform: uppercase; font-size: 13px; letter-spacing: -.01em; padding: 16px 20px 0; }
.sog-cadre-txt { border-top: 1px solid var(--cream-faint); padding: 14px 20px; display: flex; flex-direction: column; gap: 9px; }
.sog-cadre-txt p { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--cream); margin: 0; }
.sog-cadre-txt p::before { content: ""; flex: 0 0 6px; height: 6px; background: var(--brique); margin-top: 7px; }
.sog-steps { position: relative; margin-top: 4px; }
.sog-steps::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 14px; width: 2px; background: var(--line); }
.sog-step { position: relative; display: flex; gap: 18px; padding-bottom: 24px; }
.sog-step:last-child { padding-bottom: 0; }
.sog-mk { position: relative; z-index: 1; flex: 0 0 32px; height: 32px; background: var(--marine); color: var(--brique); font-family: var(--display); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.sog-st { font-family: var(--display); font-size: 15px; color: var(--marine); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.1; padding-top: 6px; }
.sog-sd { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin-top: 7px; max-width: 66ch; }
.sog-stack { display: flex; flex-direction: column; gap: 12px; }
.sog-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* =========================================================================
   SYSTÈME ÉDITORIAL (direction retenue) — clair, typographique, peu de boîtes.
   Chiffres géants, listes en rangées à filets, CTA souligné, accent brique.
   ========================================================================= */
/* Filet d'accent court (sous un hero / une intro) */
.sog-rule { height: 2px; width: 64px; background: var(--brique); margin: 22px 0; }

/* Boutons-filtres cliquables (remplacent les selects « carrousel ») */
.sog-flbl { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 9px; }
.sog-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sog-chip { font-family: var(--mono); font-size: 12.5px; padding: 8px 14px; border: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease; }
.sog-chip:hover { border-color: var(--brique); color: var(--marine); }
.sog-chip.on { background: var(--marine); color: var(--cream); border-color: var(--marine); }

/* Rangée de chiffres géants (remplace les cartes/summary-bar) */
.sog-statrow { display: flex; flex-wrap: wrap; margin: 6px 0 8px; }
.sog-statc { flex: 1 1 120px; padding-right: 24px; border-right: 1px solid var(--line); }
.sog-statc:last-child { border-right: 0; }
.sog-statc + .sog-statc { padding-left: 24px; }
.sog-statc .v { font-family: var(--display); font-size: clamp(28px, 5vw, 46px); color: var(--marine); line-height: 1; letter-spacing: -.03em; }
.sog-statc .v small { font-size: .42em; color: var(--ink-2); letter-spacing: 0; }
.sog-statc .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-top: 11px; }

/* Liste éditoriale : rangées séparées par des filets (plus de cartes) */
.sog-list { border-top: 1px solid var(--line); }
.sog-rowi { display: flex; align-items: baseline; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); cursor: pointer; transition: padding-left .15s ease; text-decoration: none; }
.sog-rowi:hover { padding-left: 12px; }
.sog-rowi .n { font-family: var(--mono); font-size: 12px; color: var(--brique); flex: 0 0 auto; }
.sog-rowi .nm { font-family: var(--display); font-size: clamp(16px, 2.4vw, 21px); color: var(--marine); text-transform: uppercase; letter-spacing: -.02em; line-height: 1.15; }
.sog-rowi .m { margin-left: auto; font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.sog-rowi .ar { color: var(--brique); font-size: 16px; flex: 0 0 auto; align-self: center; }
/* Rangée de consultation (non cliquable) : pas de curseur main ni de
   glissement au survol — réservés aux vraies navigations. */
.sog-rowi.static { cursor: default; }
.sog-rowi.static:hover { padding-left: 4px; }
/* Rangée avec action destructive (liens tuteur) : bouton .cta-danger.sm
   centré dans la rangée (plus haut que le texte → fini le baseline qui le
   fait déborder), rangée resserrée pour rester dense mais aérée. */
.sog-rowi .cta-danger { flex: 0 0 auto; align-self: center; }
.sog-rowi:has(.cta-danger) { padding-top: 10px; padding-bottom: 10px; }
/* variante « sujet » : titre long sentence-case + méta alignée sous le titre */
.sog-rowi.suj { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n nm ar" "x sm ar"; column-gap: 14px; row-gap: 9px; align-items: baseline; }
.sog-rowi.suj .n { grid-area: n; }
.sog-rowi.suj .nm { grid-area: nm; text-transform: none; font-size: clamp(15px, 2vw, 18px); line-height: 1.25; }
.sog-rowi.suj .ar { grid-area: ar; align-self: center; }
.sog-rowi.suj .sm { grid-area: sm; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* (le CTA texte souligné .sog-ctalink a disparu avec la refonte QCM 2026-07 :
   le QCM officiel vit désormais dans le bandeau .tr-callout, plus bas.) */

/* Barre d'XP segmentée (reprise de la direction « terminal ») */
.sog-xp { }
.sog-xp .xpl { font-size: 11px; color: var(--ink-3); margin-bottom: 9px; }
.sog-xp .xpl b { color: var(--marine); }
.sog-xp .xpb { display: flex; gap: 3px; }
.sog-xp .xpb i { flex: 1; height: 10px; background: var(--cream-3); border: 1px solid var(--line); }
.sog-xp .xpb i.f { background: var(--brique); border-color: var(--brique); }
/* Utilitaires de mise en page (pas des composants : juste des grilles). */
.sog-grid { display: grid; gap: 12px; }
.sog-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sog-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .sog-grid.cols-2, .sog-grid.cols-3 { grid-template-columns: 1fr; } }

/* Bloc terminal — le .code-block du DS est scopé aux articles ; on reprend le
   PATTERN terminal documenté (term-bg + bordure + prompt $) sur tokens. */
.sog-term {
  background: var(--term-bg); color: var(--cream); border: 1px solid var(--term-border);
  padding: 16px 18px; font-family: var(--mono); font-size: 13.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.sog-term .dollar { color: var(--brique-light); margin-right: 8px; }
.sog-term-head { display: flex; gap: 6px; margin-bottom: 12px; }
.sog-term-head i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.sog-term-head .r { background: var(--dot-red); } .sog-term-head .y { background: var(--dot-yellow); } .sog-term-head .g { background: var(--dot-green); }

/* Contrôle segmenté (mode) — pas de brique DS pour ça. */
.sog-tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); background: var(--surface); }
.sog-tab {
  font-family: var(--mono); font-size: 12.5px; padding: 8px 14px;
  color: var(--ink-2); background: transparent; border-right: 1px solid var(--line);
  transition: background .14s ease, color .14s ease;
}
.sog-tab:last-child { border-right: 0; }
.sog-tab.is-active { background: var(--marine); color: var(--cream); }
.sog-tab:not(.is-active):hover { background: var(--cream-2); }

/* Champs de formulaire (le DS n'a pas de champ générique). */
.sog-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sog-field > label { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
/* Champs ÉDITORIAUX : soulignés (pas de boîte « carrousel »). */
.sog-input, .sog-select {
  font-family: var(--mono); font-size: 14px; color: var(--marine);
  background: transparent; border: 0; border-bottom: 2px solid var(--line);
  border-radius: 0; padding: 9px 4px; width: 100%; box-sizing: border-box;
  transition: border-color .15s ease;
}
.sog-select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23e8b327' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px;
}
.sog-input::placeholder { color: var(--ink-3); }
.sog-input:focus, .sog-select:focus { outline: none; border-bottom-color: var(--brique); }
/* Autofill : WebKit/Blink peignent le champ en jaune pâle qui jure avec la
   charte crème → hack standard : on repeint par box-shadow inset (crème du
   fond, les champs sont transparents), encre marine forcée, et transition
   quasi infinie pour geler le repeint du navigateur. Idem au focus/hover. */
.sog-input:-webkit-autofill,
.sog-input:-webkit-autofill:hover,
.sog-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cream) inset;
  box-shadow: 0 0 0 1000px var(--cream) inset;
  -webkit-text-fill-color: var(--marine);
  caret-color: var(--marine);
  transition: background-color 9999999s ease-out 0s;
}
/* Pendant Firefox (règle séparée : un sélecteur inconnu invaliderait la liste). */
.sog-input:autofill {
  box-shadow: 0 0 0 1000px var(--cream) inset;
  -webkit-text-fill-color: var(--marine);
}

/* Formulaires CONTENUS (Profil, auth) : un formulaire ne s'étale JAMAIS sur
   les 960px du corps — champs soulignés ≤ 520px, rythme vertical unifié
   (remplace les marginTop inline au cas par cas), bouton rattaché au champ. */
.sog-form { max-width: 520px; }
.sog-form .sog-flbl { margin-top: 16px; }
.sog-form > .sog-flbl:first-child { margin-top: 0; }
.sog-form .cta-row { justify-content: flex-start; margin-top: 18px; gap: 12px; }
/* Paire de champs côte à côte sur desktop (nouveau mdp / confirmation). */
.sog-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.sog-form-pair .sog-input::placeholder { font-size: 12px; }
@media (max-width: 639px) { .sog-form-pair { grid-template-columns: 1fr; } }
.sog-textarea {
  font-family: var(--mono); font-size: 13.5px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 0; padding: 12px; width: 100%; box-sizing: border-box;
  min-height: 220px; resize: vertical; line-height: 1.55;
}
.sog-textarea:focus { outline: none; border-color: var(--brique); }

/* Option de QCM (bouton réponse). */
.sog-opt {
  display: block; width: 100%; text-align: left;
  font-family: var(--mono); font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  padding: 13px 16px; margin-bottom: 10px;
  transition: border-color .14s ease, background .14s ease;
}
.sog-opt:hover:not(:disabled) { border-left-color: var(--brique); background: var(--cream-2); }
.sog-opt .sog-opt-key { font-family: var(--display); color: var(--brique); margin-right: 10px; }
.sog-opt.is-correct { border-color: var(--dot-green); border-left-color: var(--dot-green); background: var(--surface); }
.sog-opt.is-wrong   { border-color: var(--dot-red);   border-left-color: var(--dot-red); }
.sog-opt:disabled { cursor: default; }

/* Barre de progression / XP. */
.sog-bar { height: 10px; background: var(--cream-3); border: 1px solid var(--line); overflow: hidden; }
.sog-bar > i { display: block; height: 100%; background: var(--brique); transition: width .5s ease; }

/* Calendrier d'activité (12 semaines) — façon GitHub : compact, attaché. */
.sog-cal { display: grid; width: max-content; grid-template-rows: repeat(7, 13px); grid-auto-flow: column; grid-auto-columns: 13px; gap: 3px; }
.sog-cal-cell { width: 13px; height: 13px; border-radius: 2px; background: var(--cream-3); }
.sog-cal-cell.on { background: var(--brique); }
.sog-cal-cell.pad { background: transparent; }
/* Variante .lg : cases élargies (section assiduité à nu). Les cellules
   suivent la taille des pistes de la grille. */
.sog-cal.lg { grid-template-rows: repeat(7, 17px); grid-auto-columns: 17px; gap: 4px; }
.sog-cal.lg .sog-cal-cell { width: 17px; height: 17px; border-radius: 3px; }

/* Grille générique de blocs de niveau (annales : Toutes + 4 zones). */
.sog-lvl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 639px) { .sog-lvl-grid { grid-template-columns: 1fr 1fr; } }

/* Stepper d'année (annales) : ‹ 2026 › typographique + bascule « toutes les
   années » — remplace la nappe de chips de sessions. */
.sog-yearstep { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* .yb = carré de navigation partagé (stepper d'année, pagineur de sujets). */
.sog-yearstep .yb, .sog-pgr .yb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-family: var(--mono); font-size: 19px;
  color: var(--marine); background: transparent; border: 1px solid var(--line);
  cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
.sog-yearstep .yb:hover:not(:disabled), .sog-pgr .yb:hover:not(:disabled) { border-color: var(--marine); background: var(--cream-2); }
.sog-yearstep .yb:disabled, .sog-pgr .yb:disabled { opacity: .35; cursor: default; }
/* Pagineur vertical de la liste des sujets (↑ compteur … liste … ↓). */
.sog-pgr { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.sog-yearstep .yv { font-family: var(--display); font-size: 30px; letter-spacing: -.02em; color: var(--marine); min-width: 112px; text-align: center; }
.sog-yearstep .sog-chip { margin-left: 8px; }

/* Assiduité « à nu » (plus de .sog-surface) : chiffre géant + calendrier
   côte à côte sur desktop, empilés sur mobile. */
.sog-assid { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 18px 44px; margin: 6px 0 8px; }
.sog-assid .sog-statc { flex: 0 0 auto; border-right: 1px solid var(--line); padding-right: 44px; }
.sog-assid .grp { flex: 1 1 300px; min-width: 0; }
@media (max-width: 639px) {
  .sog-assid { gap: 14px; }
  .sog-assid .sog-statc { border-right: 0; padding-right: 0; }
  .sog-cal.lg { grid-template-rows: repeat(7, 13px); grid-auto-columns: 13px; gap: 3px; }
  .sog-cal.lg .sog-cal-cell { width: 13px; height: 13px; border-radius: 2px; }
}

/* Badges = mini-tuiles. Débloqué : icône + liseré brique. Verrouillé :
   assombri + grosses rayures diagonales + cadenas. */
.sog-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.sog-badge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; min-height: 106px; padding: 14px 10px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.sog-badge .ico { line-height: 0; color: var(--brique); }
.sog-badge .ico svg { width: 30px; height: 30px; display: block; }
.sog-badge .lab { font-family: var(--mono); font-size: 10.5px; line-height: 1.25; color: var(--marine); }
.sog-badge.on { border-color: var(--brique); border-top: 3px solid var(--brique); }
.sog-badge.off { background: var(--cream-2); }
.sog-badge.off .ico { color: var(--ink-3); opacity: .4; }
.sog-badge.off .lab { color: var(--ink-3); opacity: .7; }
/* Verrouillé : grosses rayures diagonales (pas de cadenas). */
.sog-badge.off::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(18, 36, 64, .13) 11px 22px); }

/* ===== Trophées (écussons SVG de la planche finale, onglet Progression) =====
   JetBrains Mono auto-hébergée : police des textes internes des écussons
   (arcs « PREPADAWAN » etc.) — rien d'externe ne doit être chargé (CSP). */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2');
}

/* Trophées « à nu » (demande Liam 2026-07-04) : PAS de boîte visible — le
   grand écusson SVG posé sur le fond, le titre en ÉTIQUETTE jaune (brique),
   la méta discrète dessous. Verrouillé = ÉTEINT : écusson désaturé/assombri
   et étiquette grisée (ni rayures, ni cadenas — la boîte a disparu). */
.sog-trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 30px 14px; margin-bottom: 6px; }
.sog-trophy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; }
/* svg-badge fixe sa taille en style inline (px) : on le laisse respirer mais
   jamais déborder de sa colonne (mobile) — carré préservé. */
.sog-trophy svg-badge { max-width: 100%; height: auto !important; aspect-ratio: 1 / 1; }
.sog-trophy .etq {
  display: inline-block; font-family: var(--display); font-size: 12.5px;
  letter-spacing: -.01em; text-transform: uppercase;
  background: var(--brique); color: var(--marine); padding: 5px 11px;
}
.sog-trophy .date { font-family: var(--mono); font-size: 10px; line-height: 1.45; color: var(--ink-2); max-width: 210px; }
.sog-trophy.off svg-badge { filter: grayscale(1) brightness(.94) contrast(.82) opacity(.35); }
.sog-trophy.off .etq { background: var(--cream-2); color: var(--ink-2); }
.sog-trophy.off .date { color: var(--ink-3); }
@media (max-width: 639px) {
  .sog-trophies { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 10px; }
}

/* Grade de poitrine (galon SVG) + intitulé, en tête de la section Grade & XP. */
.sog-grade { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.sog-grade .gi { flex: none; width: 76px; }
.sog-grade .gi svg { width: 76px; height: auto; display: block; }
.sog-grade .gt .lab { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sog-grade .gt .nm { font-family: var(--display); font-size: clamp(22px, 4vw, 30px); color: var(--marine); line-height: 1.05; margin: 2px 0 4px; }
.sog-grade .gt .nx { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }

/* ===== Landing (écran public, non connecté) — v7 (2026-07-04) =====
   CLONE FIDÈLE de la maquette validée par Liam : canevas ~652px transposé
   ×1,47 dans les 960px UTILES du site (.lp-inner 1008px border-box, la
   mesure .container du DS). Bloc RÉÉCRIT d'un seul tenant — les scories
   des révisions v4→v6.1 (pvbox 300/340px, .flip, kickers de description,
   légendes visibles, .lp-sub/.lp-val/.lp-foot, échelles de secours) sont
   PURGÉES : une seule vérité.
   Table d'échelle (maquette → réel, ×1,47) : titre hero 30→44 · lead
   11→16 · kickers 8,5→12 · corps 10→15 · petits 9→13 · note compo 22→32 ·
   « 7 j » 26→38 · guillemet 40→60 · maxime 15→22 · CTA final 18→26 ·
   écusson 84→130 · min-height des visuels 96→140 · padding de bande
   26→40 · chiffres hero 20→30. La page validée est DENSE — on ne regonfle
   rien.
   Invariants : tokens only (zéro hex) ; aperçus décoratifs (aria-hidden
   côté JS + pointer-events coupés ici), légendes .lp-pvcap conservées en
   SR-ONLY ; lightbox = briques réelles à l'échelle naturelle de l'app
   (.lp-zoombody), INCHANGÉES — seul le compact se cale sur la maquette. */
body.sog-landing .site-main { padding: 0; }
body.sog-landing .container { max-width: none; }

.lp-band { width: 100%; }
/* 1008px = 960px utiles (la mesure .container du site) + 2×24 de gouttières. */
.lp-inner { max-width: 1008px; margin: 0 auto; padding: 0 24px; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; margin: 0; }

/* — HERO marine, contenu à GAUCHE : titre display (point final brique en
   .dot), lead mono court (~400px maquette → 590px), CTA .cta-gold (brique
   plein — c'est sur marine qu'il ressort le mieux) + .cta-dark (fantôme
   des fonds sombres), ligne de gratuité ENTIÈRE en brique clair. — */
.lp-hero { background: var(--marine); }
.lp-hero .lp-inner { padding: clamp(40px, 6vw, 56px) 24px 40px; }
.lp-title { font-family: var(--display); font-size: clamp(30px, 4.5vw, 46px); line-height: 1.1; letter-spacing: -.01em; color: var(--cream); margin: 0 0 16px; }
.lp-title .dot { color: var(--brique); }
.lp-lead { font-family: var(--mono); font-size: 16px; line-height: 1.55; color: var(--cream-mute); max-width: 590px; margin: 0 0 24px; }
.lp-free { font-family: var(--mono); font-size: 14px; color: var(--brique-light); margin: 14px 0 0; }

/* Pied de bande : chiffres publics SOUDÉS au hero — border-top crème
   translucide pleine bande, quatre colonnes à filets verticaux BORNÉES au
   conteneur (padding latéral max(24px, 50% − 480px) = les bords du texte
   de .lp-inner) ; « admis » ressort en brique (.hl) ; libellés mono
   uppercase espacés. 2×2 pleine largeur sous 640px. */
.lp-scoregrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cream-faint); padding: 0 max(24px, calc(50% - 480px)); }
.lp-scorecell { padding: 22px 14px; text-align: center; border-left: 1px solid var(--cream-faint); }
.lp-scorecell:first-child { border-left: none; }
.lp-scorecell .v { font-family: var(--display); font-size: clamp(24px, 3vw, 30px); line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums; }
.lp-scorecell.hl .v { color: var(--brique); }
.lp-scorecell .k { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cream-mute); margin-top: 8px; }
@media (max-width: 639px) {
  .lp-scoregrid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .lp-scorecell { padding: 18px 12px; }
  .lp-scorecell:nth-child(odd) { border-left: none; }
  .lp-scorecell:nth-child(n+3) { border-top: 1px solid var(--cream-faint); }
}

/* — Bandes claires : alternance STRICTE crème / crème-2 (.alt) — marine
   (hero) → crème (00) → crème-2 (01) → crème (02) → crème-2 (03) → crème
   (04) → crème-2 (05) → marine (CTA). Padding vertical 40 (26 maquette). — */
.lp-sec { background: var(--cream); }
.lp-sec.alt { background: var(--cream-2); }
.lp-sec .lp-inner { padding: 40px 24px; }
.lp-band .sog-eye { margin: 0 0 22px; }
.lp-band .sog-eye b { background: var(--brique); color: var(--marine); padding: 3px 9px; }
.lp-band .sog-eye::before { display: none; }

/* Kicker d'aperçu/tuile — la grammaire UNIQUE de la maquette (8,5→12px,
   mono uppercase espacé, brique). Partagé par la carte compo (.lp-rap),
   la console (.lp-qcm) et les tuiles bento (.lp-tile). */
.lp-kick { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brique); margin: 0 0 12px; }

/* — 00 le mot du créateur : écusson animé rond (84→130px, SVG injecté
   INLINE par landing.js, emprise réservée par aspect-ratio) à gauche,
   titre + gabarit à trous à droite. — */
.lp-createur { display: flex; align-items: center; gap: clamp(24px, 3vw, 36px); }
.lp-ecusson { flex: 0 0 auto; width: 130px; aspect-ratio: 1 / 1; }
/* height: 100 % (pas auto) — Firefox rend un SVG inline à viewBox seul avec
   une hauteur nulle en flex ; le conteneur ci-dessus fixe la taille. */
.lp-ecusson svg { display: block; width: 100%; height: 100%; }
.lp-createur-txt { flex: 1; min-width: 0; }
.lp-cr-t { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--marine); margin: 0 0 8px; }
.lp-createur-txt p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 66ch; margin: 0; }
@media (max-width: 639px) {
  .lp-createur { flex-direction: column; align-items: flex-start; gap: 18px; }
  .lp-ecusson { margin: 0 auto; }
}

/* — 01 & 04 : lignes zigzag desc 32 % / visuel 68 %. Alternance CSS pure
   (nth-child even = row-reverse) : compo droite, QCM gauche, dictée
   droite ; la ligne communauté (seule dans son .lp-zig) retombe à droite.
   Le numéro de ligne — brique — OUVRE le titre (h3 b). Empilement
   description d'abord sous 640px. — */
.lp-zig { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 44px); }
.lp-row { display: flex; align-items: center; gap: 40px; }
.lp-zig .lp-row:nth-child(even) { flex-direction: row-reverse; }
.lp-row-desc { flex: 0 0 32%; min-width: 0; }
.lp-row-viz { flex: 1 1 0; min-width: 0; }
.lp-row-desc h3 { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--marine); margin: 0 0 8px; }
.lp-row-desc h3 b { font-weight: 400; color: var(--brique); }
.lp-row-desc p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }
@media (max-width: 639px) {
  .lp-zig .lp-row,
  .lp-zig .lp-row:nth-child(even) { flex-direction: column; align-items: stretch; gap: 14px; }
  .lp-row-desc { flex: 0 0 auto; }
}

/* — Visualisations : boîte centrée à hauteur minimale COMMUNE (96→140px —
   pas 300 : la maquette est dense), contenu décoratif, légende sr-only,
   bouton « i ». — */
.lp-pvcap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lp-preview { pointer-events: none; user-select: none; }
.lp-pvbox { display: flex; flex-direction: column; justify-content: center; }
.lp-pvin { position: relative; }
@media (min-width: 640px) {
  .lp-row .lp-pvbox { min-height: 140px; }
}
/* Bouton « i » d'agrandissement — la géométrie de .sog-lvl-i en brique
   plein (rond 20→30px, « i » marine) ; cible tactile 44px via ::after
   (30 + 2×7), sans grossir le rond. */
.lp-zoom {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 14px; font-style: italic; line-height: 1;
  border: 1px solid var(--brique); background: var(--brique); color: var(--marine);
  cursor: pointer; transition: background .14s ease, border-color .14s ease;
}
.lp-zoom::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.lp-zoom:hover { background: var(--brique-light); border-color: var(--brique-light); }

/* Vignette compo — carte marine ~78 % du slot, centrée : kicker « RAPPORT
   DE CORRECTION », note display 32px, « fond 6,5 · forme 6 ». Le « i »
   suit le bord de la carte (offset = la demi-marge de 11 %). */
.lp-rap { width: 78%; margin: 0 auto; background: var(--marine); border-top: 3px solid var(--brique); padding: 16px 18px; }
.lp-pv.rap .lp-zoom { right: calc(11% + 8px); }
.lp-rap-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.lp-rap-note { font-family: var(--display); font-size: 32px; line-height: 1; color: var(--cream); }
.lp-rap-note b { font-weight: 400; }
.lp-rap-note small { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); margin-left: 2px; }
.lp-rap-ff { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); }

/* Vignette QCM — console sombre (--marine-dim) : kicker « QUESTION 7/20 »,
   question, une bonne réponse (vert) / une mauvaise (rouge doux). */
.lp-qcm { background: var(--marine-dim); padding: 16px 18px; }
.lp-qcm-q { font-family: var(--mono); font-size: 15px; color: var(--cream); margin: 0 0 10px; }
.lp-qcm-a { font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.lp-qcm-a + .lp-qcm-a { margin-top: 4px; }
.lp-qcm-a.ok { color: var(--dot-green); }
.lp-qcm-a.ko { color: var(--dot-red); }

/* Vignette dictée — quatre touches marine centrées + la phrase dessous,
   « formés » souligné brique. Touches décoratives (aucune cible à
   garantir). */
.lp-dt { text-align: center; }
.lp-dt-keys { display: flex; justify-content: center; gap: 8px; }
.lp-dt-keys .k { font-family: var(--mono); font-size: 13px; line-height: 1; background: var(--marine); color: var(--cream); padding: 9px 13px; }
.lp-dt-line { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }
.lp-dt-line .u { text-decoration: underline; text-decoration-color: var(--brique); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* — Lightbox (pattern .sog-help-ov/.sog-help-panel existant) : centrage
   vertical SÛR par margin:auto, panneau 720px, contenu re-rendu à
   l'échelle NATURELLE de l'app — toujours décoratif. — */
.lp-zoom-ov .sog-help-panel { margin: auto 0; }
.lp-zoom-panel { max-width: 720px; }
.lp-zoombody { pointer-events: none; user-select: none; }
.lp-zoombody .copie { margin-top: 0; }
.lp-zoombody .lp-dt-bar { margin-bottom: 16px; }
/* Barre de lecture de la dictée EN GRAND — ◀ ↺ ▶ ■ en .cta-dark (le
   fantôme des fonds sombres), échelle compacte. */
.lp-dt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lp-dt-bar .cta-dark { min-height: 0; padding: 8px 12px; font-size: 12px; }
.lp-dt-ph { font-family: var(--mono); font-size: 11px; color: var(--cream-mute); margin-left: auto; }
/* Échelle des grades (lightbox XP) : le VRAI galon (svg.js RANKS) remplace
   le numéro positionnel. */
.lp-galrow { flex: 0 0 52px; display: flex; align-items: center; justify-content: center; line-height: 0; }
.lp-galrow svg { max-height: 30px; max-width: 48px; width: auto; height: auto; display: block; }
/* Planche de trophées (lightbox) : six écussons, étiquettes + conditions
   resserrées pour tenir à trois de front. */
.lp-troph-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px 28px; }
.lp-troph-row .sog-trophy .date { max-width: 150px; }

/* — 02 BENTO : rangée 1 = XP & GRADE (marine, 2 fr — span 4/6) + SÉRIE EN
   COURS (brique plein, 1 fr — span 2/6, SANS « i ») ; rangée 2 = ASSIDUITÉ
   + TROPHÉES (marine, span 3/6 chacune). Les briques réelles (.sog-xp,
   .sog-cal, .sog-trophy) sont RELUES sur marine : éteint = crème
   translucide (--cream-faint), allumé = brique (or) — tokens only. Le
   bouton « i » (déjà absolute) se pose sur la tuile (position:relative)
   et rouvre la MÊME lightbox build*(true), sur crème. Empilement 640px. — */
.lp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lp-tile { position: relative; min-width: 0; background: var(--marine); padding: 18px 20px 20px; }
.lp-tile.xp { grid-column: span 4; }
.lp-tile.serie { grid-column: span 2; background: var(--brique); }
.lp-tile.cal, .lp-tile.troph { grid-column: span 3; }
.lp-tile .lp-kick { margin-right: 44px; }
.lp-tile.serie .lp-kick { color: var(--marine-dim); margin-right: 0; }
/* XP : barre or (9 segments dont 6 pleins, côté JS), ligne d'XP dessous. */
.lp-tile .sog-xp .xpl { margin: 12px 0 0; font-size: 13px; color: var(--cream-mute); }
.lp-tile .sog-xp .xpl b { color: var(--cream); }
.lp-tile .xpb i { background: var(--cream-faint); border-color: transparent; }
/* Série en cours (tuile brique) : « 7 j » display marine (26→38px). */
.lp-tile-big { font-family: var(--display); font-size: 38px; line-height: .95; letter-spacing: -.02em; color: var(--marine); }
.lp-tile-sub { font-family: var(--mono); font-size: 13px; color: var(--marine); margin: 10px 0 0; }
/* Assiduité : la grille de petites cases de la maquette (gap 2px). */
.lp-tile .sog-cal { grid-template-rows: repeat(7, 11px); grid-auto-columns: 11px; gap: 2px; }
.lp-tile .sog-cal-cell { width: 11px; height: 11px; background: var(--cream-faint); }
.lp-tile .sog-cal-cell.on { background: var(--brique); }
/* Trophées : 2 pleins + 2 estompés (.sog-trophy.off — le filtre de la
   planche, indépendant du fond) + « +21 ». */
.lp-troph-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lp-troph-mini .more { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); }
@media (max-width: 639px) {
  .lp-bento { grid-template-columns: 1fr; gap: 10px; }
  .lp-tile.xp, .lp-tile.serie, .lp-tile.cal, .lp-tile.troph { grid-column: auto; }
}

/* — 03 : guillemet « display brique (40→60px, décoratif) à GAUCHE ; à
   droite la maxime (15→22px, ~420px maquette → 620px), le paragraphe,
   puis les trois étapes sur UNE ligne mono discrète (numéros brique). — */
.lp-quote { display: flex; align-items: flex-start; gap: 18px; }
.lp-quote-mark { font-family: var(--display); font-size: 60px; line-height: .85; color: var(--brique); }
.lp-quote-body { flex: 1; min-width: 0; }
.lp-quote-txt { font-family: var(--display); font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: var(--marine); max-width: 620px; margin: 0 0 12px; }
.lp-quote-p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 66ch; margin: 0 0 14px; }
.lp-tut-steps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin: 0; }
.lp-tut-steps b { font-family: var(--display); font-size: 14px; font-weight: 400; color: var(--brique); }
.lp-tut-steps .sp { color: var(--ink-3); }

/* — 04 faux Discord (l'esprit, pas la charte pixel par pixel — tokens
   marine/marine-dim) : colonne de salons 30 % (# sport ACTIF = crème
   gras), fil marine centré — trois messages d'une ligne, noms colorés sur
   tokens. Décoratif de bout en bout, pas de bouton « i ». — */
.lp-disc { display: flex; align-items: stretch; background: var(--marine); border: 1px solid var(--line); }
.lp-disc-side { flex: 0 0 30%; min-width: 0; background: var(--marine-dim); padding: 12px 0; }
.lp-disc-ch { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); padding: 4px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-disc-ch .h { opacity: .6; }
.lp-disc-ch.on { color: var(--cream); font-weight: 700; }
.lp-disc-main { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.lp-disc-m { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--cream); margin: 0; }
.lp-disc-m b { font-weight: 700; }
.lp-disc-m .n1 { color: var(--brique-light); } /* Théo — jaune clair */
.lp-disc-m .n2 { color: var(--dot-green); }    /* Manon — vert doux */
.lp-disc-m .n3 { color: var(--brique); }       /* MDL Rico — brique */
@media (max-width: 560px) {
  /* La colonne de salons devient un bandeau horizontal au-dessus du fil. */
  .lp-disc { flex-direction: column; }
  .lp-disc-side { flex: none; display: flex; flex-wrap: wrap; padding: 10px 8px; }
  .lp-disc-ch { padding: 4px 8px; }
}

/* — 05 avis : trois cartes SOBRES sur une ligne (fond surface, filet fin) —
   étoiles brique, citation, signature « — Prénom, mention ». Parodie
   assumée, toujours SANS schema.org/Review : on ne ment pas aux moteurs.
   Carrousel scroll-snap sous 640px (CSS pur). — */
.lp-avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lp-avis figure { background: var(--surface); border: 1px solid var(--line); padding: 18px 18px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-avis .stars { font-size: 13px; letter-spacing: 4px; color: var(--brique); }
.lp-avis blockquote { margin: 0; flex: 1; }
.lp-avis blockquote p { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0; }
.lp-avis figcaption { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.lp-avis figcaption b { font-family: var(--display); font-weight: 400; font-size: 13px; color: var(--marine); }
@media (max-width: 639px) {
  .lp-avis { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 12px; padding-bottom: 10px; }
  .lp-avis figure { flex: 0 0 82%; scroll-snap-align: center; }
}

/* — CTA final marine, CENTRÉ : « Prêt quand tu l'es. » (18→26px, point
   final brique) + bouton + sous-ligne crème-mute. — */
.lp-ctaband { background: var(--marine); text-align: center; }
.lp-ctaband .lp-inner { padding: 48px 24px; }
.lp-ctaband .lp-cta { justify-content: center; }
.lp-big { font-family: var(--display); font-size: 26px; color: var(--cream); margin: 0 0 18px; }
.lp-big .dot { color: var(--brique); }
.lp-ctasub { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); margin: 14px 0 0; }

/* Bouton retour des écrans d'auth (app.js — hors landing elle-même). */
.lp-back { background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); padding: 14px 0; margin-bottom: 4px; min-height: 44px; }
.lp-back:hover { color: var(--marine); }

/* ===== Rapport de correction — « feuille de copie » bleu sombre ===== */
.copie { background: var(--marine); color: var(--cream); padding: 26px 24px 22px; border-top: 3px solid var(--brique); margin-top: 8px; }
.copie-grade { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--cream-faint); }
.cg-note { font-family: var(--display); line-height: 1; }
.cg-note b { font-weight: 400; font-size: clamp(42px, 9vw, 58px); color: var(--brique-light); }
.cg-note small { font-family: var(--mono); font-size: 18px; color: var(--cream-mute); margin-left: 3px; }
.cg-meta { flex: 1; min-width: 150px; }
.cg-mention { display: inline-block; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--marine); background: var(--brique); padding: 3px 10px; }
.cg-mention.elim { background: var(--dot-red); color: var(--cream); }
.cg-ff { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); margin-top: 11px; }
.copie-prod { margin-top: 16px; border: 1px solid var(--cream-faint); }
.copie-prod summary { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--brique-light); padding: 10px 12px; cursor: pointer; }
.copie-prod .cp-text { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--cream); white-space: pre-wrap; padding: 2px 12px 12px; max-height: 320px; overflow: auto; }
.copie-alert { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--cream); margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--dot-red); }
.copie-warn { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--cream-mute); margin: 12px 0 0; }
.copie-sec { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--brique-light); margin: 22px 0 12px; padding-top: 14px; border-top: 1px solid var(--cream-faint); }
.copie-crit { padding: 12px 0; border-bottom: 1px solid var(--cream-faint); }
.cc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cc-nom { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; color: var(--cream); }
.cc-tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border: 1px solid var(--cream-faint); color: var(--cream-mute); }
.cc-tag.fond { background: var(--cream-faint); color: var(--cream); }
.cc-note { font-family: var(--display); font-size: 15px; color: var(--brique-light); white-space: nowrap; }
.cc-just { font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--cream-mute); margin: 0; }
.copie-pts { list-style: none; margin: 0; padding: 0; }
.copie-pts li { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--cream); padding: 7px 0 7px 22px; position: relative; border-bottom: 1px solid var(--cream-faint); }
.copie-pts li:last-child { border-bottom: none; }
.copie-pts.pos li::before { content: "✓"; position: absolute; left: 0; color: var(--brique-light); }
.copie-pts.axes li::before { content: "→"; position: absolute; left: 0; color: var(--cream-mute); }
.copie-conseil { margin-top: 22px; padding: 16px 18px; background: var(--cream-faint); border-left: 3px solid var(--brique); }
.copie-conseil .cc-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--brique-light); margin-bottom: 6px; }
.copie-conseil p { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--cream); margin: 0; }
.copie-foot { font-family: var(--mono); font-size: 11px; font-style: italic; color: var(--cream-mute); margin: 20px 0 0; }
/* Corrigé type */
.cm-block { margin-bottom: 14px; }
.cm-lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--brique-light); margin-bottom: 6px; }
.cm-block > p { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--cream); margin: 0; }
.cm-part { margin-bottom: 8px; }
.cm-part-t { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--cream); }
.cm-sub { list-style: none; margin: 4px 0 0; padding: 0 0 0 16px; }
.cm-sub li { font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--cream-mute); padding: 2px 0; }
/* Dictée : mention sans-faute + deux textes (rouge = fautes, vert = correct) */
.cg-mention.ok { background: var(--dot-green); color: var(--marine); }
.copie-diff { font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--cream); word-break: break-word; }
.d-ok { color: var(--cream); }
.d-red { color: var(--dot-red); text-decoration: underline; text-decoration-color: var(--dot-red); text-underline-offset: 2px; }
.d-green { color: var(--dot-green); font-weight: 500; }
.d-gap { color: var(--dot-red); opacity: .85; }

/* Libellé de section numéroté (eyebrow + filet) — émis en <h2> par les
   modules (hiérarchie h1 → h2 réelle) : on neutralise le gras/les marges. */
.sog-eye { display: flex; align-items: center; gap: 11px; margin: 54px 0 18px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.sog-eye b { font-family: var(--display); font-size: 14px; color: var(--brique); letter-spacing: -0.01em; }
.sog-eye::before { content: ""; width: 22px; height: 2px; background: var(--brique); }
.sog-eye::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* =========================================================================
   Console terminal (section « S'entraîner ») — surface sombre immersive,
   « terminal d'examen ». Tout est scopé sous .sog-console. Tokens only.
   ========================================================================= */
.sog-console { background: var(--term-bg); border: 1px solid var(--term-border); }
.sog-console .bar { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid var(--cream-faint); }
.sog-console .bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.sog-console .bar .r { background: var(--dot-red); } .sog-console .bar .y { background: var(--dot-yellow); } .sog-console .bar .g { background: var(--dot-green); }
.sog-console .bar .tt { font-family: var(--mono); font-size: 11px; color: var(--cream-mute); margin-left: 6px; }
/* Chrono de session dans la barre de titre (maquette QCM) — or clair. */
.sog-console .bar .chr { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--brique-light); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sog-console .body { padding: 20px 22px; color: var(--cream); font-family: var(--mono); }
.sog-console .cfgline { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; flex-wrap: wrap; }
.sog-console .cfgk { font-size: 12px; color: var(--brique-light); min-width: 92px; }
.sog-console .cfgk::before { content: "› "; }
.sog-console .topt { display: flex; flex-wrap: wrap; gap: 8px; }
/* .tg = chip des surfaces SOMBRES (console ET magnétophone dictée .dz-mag :
   même élément, un seul jeu de règles — principe « chaque élément une fois »). */
.sog-console .tg, .dz-mag .tg { font-family: var(--mono); font-size: 12px; padding: 7px 13px; border: 1px solid var(--cream-faint); color: var(--cream-mute); cursor: pointer; background: transparent; }
.sog-console .tg:hover, .dz-mag .tg:hover { color: var(--cream); border-color: var(--cream-mute); }
.sog-console .tg.on, .dz-mag .tg.on { background: var(--brique); color: var(--marine); border-color: var(--brique); }
.sog-console .tsep { height: 1px; background: var(--cream-faint); margin: 6px 0 14px; }
.sog-console .tout { font-size: 12.5px; color: var(--cream); margin-bottom: 18px; line-height: 1.5; }
.sog-console .tout .ar { color: var(--brique); }
.sog-console .tout b { color: var(--brique-light); font-weight: 600; }
.sog-console .trun { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sog-console .run { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: -.01em; color: var(--marine); background: var(--brique); border: 0; padding: 11px 20px; cursor: pointer; }
.sog-console .run:hover { background: var(--brique-light); }
.sog-console .glink { font-family: var(--mono); font-size: 11.5px; color: var(--cream-mute); background: none; border: 0; cursor: pointer; }
.sog-console .glink:hover { color: var(--cream); }
/* Variante OR du lien console (« rejouer mes erreurs (N) » — maquette QCM). */
.sog-console .glink.gold { color: var(--brique-light); }
.sog-console .glink.gold:hover { color: var(--brique); }
/* Kicker de question (maquette QCM état 02) : « CULTURE WEB · OFFICIEL ». */
.sog-console .qkick { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-mute); margin-bottom: 9px; }
.sog-console .qtop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--cream-mute); margin-bottom: 10px; }
.sog-console .qbar { display: flex; gap: 3px; flex-wrap: wrap; }
.sog-console .qbar i { width: 13px; height: 6px; background: var(--cream-faint); }
.sog-console .qbar i.f { background: var(--brique); }
.sog-console .qx { font-family: var(--display); font-size: clamp(16px, 2.4vw, 20px); line-height: 1.25; color: var(--cream); letter-spacing: -.01em; margin: 6px 0 18px; }
.sog-console .copt { display: flex; align-items: stretch; width: 100%; text-align: left; background: transparent; border: 1px solid var(--cream-faint); color: var(--cream); margin-bottom: 9px; cursor: pointer; overflow: hidden; }
.sog-console .copt .ky { font-family: var(--display); font-size: 14px; color: var(--marine); background: var(--cream-mute); padding: 12px 14px; display: flex; align-items: center; }
.sog-console .copt .tx { padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.sog-console .copt:hover:not(:disabled) { border-color: var(--brique); }
.sog-console .copt:hover:not(:disabled) .ky { background: var(--brique); }
/* Maquette QCM (2026-07-04) : bonne réponse = bordure + FOND vert console
   + coche ; options non choisies estompées (.is-dim, opacité .55). */
.sog-console .copt.is-correct { border-color: var(--dot-green); background: color-mix(in srgb, var(--dot-green) 10%, transparent); }
.sog-console .copt.is-correct .ky { background: var(--dot-green); color: var(--marine-dim); }
.sog-console .copt .ck { margin-left: auto; padding: 12px 14px; display: flex; align-items: center; color: var(--dot-green); font-weight: 700; }
.sog-console .copt.is-wrong { border-color: var(--dot-red); opacity: .6; }
.sog-console .copt.is-dim { opacity: .55; }
.sog-console .copt:disabled { cursor: default; }
.sog-console .expl { border-left: 3px solid var(--brique); background: var(--brique-faint); padding: 12px 15px; margin: 14px 0 4px; font-size: 12.5px; line-height: 1.55; color: var(--cream); }
.sog-console .expl b { color: var(--brique-light); font-weight: 600; }
.sog-console .cnext { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.sog-console .clabel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brique-light); margin: 22px 0 12px; }
.sog-console .rscore { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
/* Maquette QCM état 03 : le score display vit en CRÈME (30→44px). */
.sog-console .rscore .big { font-family: var(--display); font-size: clamp(32px, 5vw, 44px); color: var(--cream); line-height: 1; letter-spacing: -.02em; }
.sog-console .rscore .sub { font-size: 12px; color: var(--cream-mute); }
.sog-console .rscore .gold { color: var(--brique-light); }
.sog-console .rscore .right { margin-left: auto; font-size: 12px; color: var(--cream-mute); }
.sog-console .rrow { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--cream); padding: 8px 0; border-top: 1px solid var(--cream-faint); }
.sog-console .rrow .mk { font-family: var(--display); }
.sog-console .rrow .mk.ok { color: var(--dot-green); } .sog-console .rrow .mk.no { color: var(--dot-red); }

/* Texte méta (mono, discret) — encre 2 : discret MAIS lisible (7,6:1 ;
   l'ancien --ink-3 tombait à 2,97:1 sur crème, sous le seuil AA). */
.sog-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.sog-empty { font-family: var(--mono); font-size: 13px; color: var(--ink-2); padding: 26px; text-align: center; border: 1px dashed var(--line); }

/* Toasts (feedback XP). */
.sog-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.sog-toast {
  font-family: var(--mono); font-size: 13px; color: var(--cream); background: var(--marine);
  border: 1px solid var(--brique); padding: 10px 14px;
  opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
.sog-toast.show { opacity: 1; transform: none; }

/* =========================================================================
   Compo — sélecteur de NIVEAU en gros blocs mis en avant + bouton info « i »
   ========================================================================= */
.sog-lvl-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sog-lvl-wrap { position: relative; flex: 1 1 200px; min-width: 180px; }
.sog-lvl {
  width: 100%; text-align: left; cursor: pointer; display: block;
  background: var(--surface); border: 1px solid var(--line);
  padding: 17px 46px 16px 18px; box-sizing: border-box;
  transition: border-color .14s ease, background .14s ease;
}
.sog-lvl:hover { border-color: var(--brique); }
.sog-lvl.on { background: var(--marine); border-color: var(--marine); }
.sog-lvl-n { font-family: var(--display); font-size: 19px; letter-spacing: -.02em; color: var(--marine); line-height: 1.05; }
.sog-lvl.on .sog-lvl-n { color: var(--cream); }
.sog-lvl-d { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); margin-top: 6px; }
.sog-lvl.on .sog-lvl-d { color: var(--brique-light); }
.sog-lvl-i {
  position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 13px; font-style: italic; line-height: 1;
  border: 1px solid var(--line); background: var(--cream); color: var(--marine);
  cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.sog-lvl-i:hover { background: var(--brique); border-color: var(--brique); color: var(--marine); }

/* Sélecteur de zone de concours (Profil) : grille RÉGULIÈRE 2×2 de blocs
   .sog-lvl (le standard des choix de niveau) — mêmes largeurs, mêmes
   hauteurs (stretch de grille), une colonne en mobile. Pas de bouton info
   ici → on rend le padding droit réservé au « i ». */
.sog-zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sog-zone-grid .sog-lvl { padding-right: 18px; }
@media (max-width: 639px) { .sog-zone-grid { grid-template-columns: 1fr; } }

/* --- Overlay d'aide : exemple d'attendu par niveau --- */
.sog-help-ov {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 18px; overflow-y: auto; background: rgba(15, 27, 46, .55); animation: sog-fade .18s ease;
}
.sog-help-panel {
  background: var(--cream); border-top: 4px solid var(--brique); max-width: 640px; width: 100%;
  box-shadow: 0 20px 60px rgba(15, 27, 46, .35);
}
.sog-help-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 20px 24px 14px; border-bottom: 1px solid var(--line);
}
.sog-help-t { font-family: var(--display); font-size: 20px; letter-spacing: -.02em; color: var(--marine); }
.sog-help-t b { color: var(--brique); }
.sog-help-close {
  flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line); background: transparent;
  color: var(--marine); cursor: pointer; font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.sog-help-close:hover { border-color: var(--brique); color: var(--brique); }
.sog-help-body { padding: 20px 24px 26px; }
.sog-help-lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 18px 0 8px;
}
.sog-help-body > .sog-help-lbl:first-child { margin-top: 0; }
.sog-help-body p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; }
.sog-help-ex { background: var(--surface); border-left: 3px solid var(--brique); padding: 12px 14px; margin: 4px 0 8px; }
.sog-help-ex .h { font-family: var(--display); font-size: 14px; color: var(--marine); margin-bottom: 6px; letter-spacing: -.01em; }
.sog-help-ex ul { margin: 4px 0 0; padding-left: 18px; }
.sog-help-ex li { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin-bottom: 4px; }

/* =========================================================================
   PAGE « MON COMPTE » — CLONE des deux maquettes validées (2026-07-04).
   Canevas ~652px transposé ×1,47 dans les 960px du conteneur : rail 148→220,
   display 15→22, pseudo 16→24, gras 11→16, méta 9→13, labels 8,5→12,
   corps 10→15, paragraphe modale 10,5→15, gras 12→17, médaillons 52→76 et
   56→82. Tokens only — le carmin (--carmin) est le rouge destructif charte.
   ========================================================================= */

/* — Layout : RAIL gauche sticky 220px + CONTENU — */
.sog-acc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 44px; align-items: start; }
.sog-acc-body { min-width: 0; }
.sog-acc-bloc { scroll-margin-top: 24px; }
.sog-acc-rail { position: sticky; top: 24px; }
.sog-acc-title { font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; color: var(--marine); margin: 0 0 18px; }
.sog-acc-title .dot { color: var(--brique); }
/* Ancres verticales : filet gauche continu 2px ; active = segment brique +
   fond crème-2 + gras. L'ancre « Zone rouge » vit en carmin. */
.sog-acc-anchors { display: flex; flex-direction: column; align-items: stretch; border-left: 2px solid var(--line); }
.sog-acc-anchor {
  display: block; text-align: left; font-family: var(--mono); font-size: 13px;
  color: var(--ink-2); background: transparent; border: 0;
  border-left: 2px solid transparent; margin-left: -2px;
  padding: 9px 14px; cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.sog-acc-anchor:hover { color: var(--marine); }
.sog-acc-anchor.on { border-left-color: var(--brique); background: var(--cream-2); font-weight: 700; color: var(--marine); }
.sog-acc-anchor.red { color: var(--carmin); }
.sog-acc-anchor.red:hover, .sog-acc-anchor.red.on { color: var(--carmin); border-left-color: transparent; }
.sog-acc-anchor.red.on { border-left-color: var(--carmin); }
/* Déconnexion : fantôme DISCRET sous les ancres. */
.sog-acc-rail .sog-acc-logout { margin-top: 18px; font-size: 12px; color: var(--ink-2); }

/* Labels de champ à l'échelle de la maquette (8,5→12px) sur la page compte
   et dans la modale carmin. */
.sog-acc .sog-flbl, .sog-danger-panel .sog-flbl { font-size: 12px; }

/* — BANDEAU IDENTITÉ (marine, pleine largeur du contenu) — */
.sog-acc-id { background: var(--marine); color: var(--cream); padding: 22px 24px; display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.sog-acc-id-medal {
  flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%;
  background: var(--brique); color: var(--marine);
  font-family: var(--display); font-size: 26px; letter-spacing: -.01em;
  display: flex; align-items: center; justify-content: center;
}
.sog-acc-id-main { flex: 1 1 260px; min-width: 0; }
.sog-acc-id-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sog-acc-id-pseudo { font-family: var(--display); font-size: 24px; letter-spacing: -.01em; line-height: 1.1; color: var(--cream); overflow-wrap: anywhere; }
.sog-acc-id-badge { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; background: var(--dot-green); color: var(--marine); padding: 3px 9px; white-space: nowrap; }
.sog-acc-id-badge.off { background: var(--cream-faint); color: var(--cream-mute); }
.sog-acc-id-meta { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sog-acc-id-meta span { overflow-wrap: anywhere; }
.sog-acc-id > .cta-dark { flex: 0 0 auto; margin-left: auto; }
/* Édition inline du pseudo : volet pleine largeur SOUS la rangée, champs
   soulignés relus pour le fond marine. */
.sog-acc-id-editwrap { flex-basis: 100%; }
.sog-acc-id-editwrap:empty { display: none; }
.sog-acc-id-edit { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--cream-faint); max-width: 420px; }
.sog-acc-id-edit .sog-flbl { color: var(--cream-mute); }
.sog-acc-id-edit .sog-input { color: var(--cream); border-bottom-color: var(--cream-mute); caret-color: var(--cream); }
.sog-acc-id-edit .sog-input::placeholder { color: var(--cream-mute); }
.sog-acc-id-edit .sog-input:focus { border-bottom-color: var(--brique); }
.sog-acc-id-edit .sog-hint { color: var(--cream-mute); }
.sog-acc-id-edit .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* — 01 SÉCURITÉ : UNE ligne — trois champs côte à côte + bouton aligné en
   bas (empilés en mobile). — */
.sog-acc-sec3, .sog-acc-sec2 { display: grid; gap: 16px 18px; align-items: end; }
.sog-acc-sec3 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.sog-acc-sec2 { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.sog-acc-sec3 .sog-flbl, .sog-acc-sec2 .sog-flbl { margin-bottom: 7px; }
.sog-acc-sec3 .sog-input::placeholder, .sog-acc-sec2 .sog-input::placeholder { font-size: 12px; }
/* Sous-bloc « changer d'adresse e-mail » : séparé du bloc mot de passe. */
.sog-acc-email { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--cream-3, rgba(29,53,87,.12)); }
.sog-acc-email > .sog-flbl { margin-bottom: 12px; }

/* — 02 SUIVI TUTEUR : carte crème-2 à FILET GAUCHE brique 3px — */
.sog-acc-tut { background: var(--cream-2); border-left: 3px solid var(--brique); padding: 18px 20px; }
.sog-acc-tut-top { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.sog-acc-tut-id { flex: 1 1 240px; min-width: 0; }
.sog-acc-tut-name { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--marine); overflow-wrap: anywhere; }
.sog-acc-tut-meta { font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-top: 5px; }
.sog-acc-tut-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
/* rangée 2 (envoi) : séparée d'un filet, champ + bouton alignés en bas. */
.sog-acc-tut-send { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; }
.sog-acc-tut-send .fld { flex: 1 1 260px; min-width: 0; }
.sog-acc-tut-send .cta-gold { flex: 0 0 auto; }

/* — 03 MON CONCOURS : grille 4 zones + carte marine « écrit réussi » — */
.sog-zone-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .sog-zone-grid.cols-4 { grid-template-columns: 1fr 1fr; } }
.sog-acc-conc { background: var(--marine); color: var(--cream); padding: 22px 24px; margin-top: 16px; display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.sog-acc-conc-medal {
  flex: 0 0 82px; width: 82px; height: 82px; border-radius: 50%;
  background: var(--cream-faint); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sog-acc-conc-medal svg-badge { flex: 0 0 auto; }
/* Verrouillé : l'écusson ÉTEINT (le filtre de la planche de trophées) ;
   débloqué : en couleurs. */
.sog-acc-conc.locked .sog-acc-conc-medal svg-badge { filter: grayscale(1) brightness(.94) contrast(.82) opacity(.5); }
.sog-acc-conc-txt { flex: 1 1 280px; min-width: 0; }
.sog-acc-conc-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--cream); margin: 0 0 6px; }
.sog-acc-conc-d { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--cream-mute); margin: 0; max-width: 62ch; }
.sog-acc-conc > .cta-gold { flex: 0 0 auto; }
/* Badge or « ADMIS · {date} ». */
.sog-acc-admis { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; background: var(--brique); color: var(--marine); padding: 3px 9px; white-space: nowrap; }

/* — 04 ZONE ROUGE : en-tête .sog-eye ENTIÈREMENT carmin + rangée à nu — */
.sog-eye.red { color: var(--carmin); }
.sog-eye.red b { color: var(--carmin); }
.sog-eye.red::before { background: var(--carmin); }
.sog-eye.red::after { background: var(--carmin); }
.sog-acc-red { border-left: 3px solid var(--carmin); padding: 12px 18px; display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
.sog-acc-red-txt { flex: 1 1 300px; min-width: 0; }
.sog-acc-red-t { font-size: 17px; font-weight: 700; color: var(--marine); }
.sog-acc-red-d { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 3px 0 0; }
.sog-acc-red > .cta-danger { flex: 0 0 auto; margin-left: auto; }

/* — MODALE « Rompre l'engagement. » : pattern .sog-help-ov, variante
   carmin — bandeau plein carmin, titre display crème (point brique),
   champ souligné carmin, boutons à droite. — */
.sog-danger-panel { border-top-color: var(--carmin); }
.sog-danger-panel .sog-help-head { background: var(--carmin); border-bottom: 0; padding: 18px 24px 16px; }
.sog-danger-panel .sog-help-t { color: var(--cream); }
.sog-danger-panel .sog-help-t .dot { color: var(--brique); }
.sog-danger-panel .sog-help-close { border-color: var(--cream-mute); color: var(--cream); }
.sog-danger-panel .sog-help-close:hover { border-color: var(--cream); color: var(--cream); }
.sog-danger-panel .sog-help-body p { font-size: 15px; }
.sog-input.carmin { border-bottom-color: var(--carmin); }
.sog-input.carmin:focus { border-bottom-color: var(--carmin); }

/* — Responsive compte : rail → rangée d'ancres horizontale scrollable en
   haut, bandeau empilé, sécurité empilée. — */
@media (max-width: 900px) {
  .sog-acc { grid-template-columns: 1fr; gap: 0; }
  .sog-acc-rail { position: static; margin-bottom: 26px; }
  .sog-acc-anchors { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; border-left: 0; border-bottom: 1px solid var(--line); }
  .sog-acc-anchor { flex: 0 0 auto; white-space: nowrap; border-left: 0; margin-left: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 11px 12px; }
  .sog-acc-anchor.on { border-left: 0; border-bottom-color: var(--brique); }
  .sog-acc-anchor.red.on { border-bottom-color: var(--carmin); }
  .sog-acc-rail .sog-acc-logout { margin-top: 14px; }
  .sog-acc-sec3, .sog-acc-sec2 { grid-template-columns: 1fr; align-items: stretch; }
}
@media (max-width: 639px) {
  .sog-zone-grid.cols-4 { grid-template-columns: 1fr; }
  .sog-acc-id > .cta-dark, .sog-acc-red > .cta-danger { margin-left: 0; }
}

/* =========================================================================
   SYSTÈME DE BOUTONS UNIFIÉ (3 niveaux, mêmes classes PARTOUT dans l'app) :
     1. .cta       — action primaire (marine plein, DS) ;
     2. .cta-gold  — action secondaire colorée (brique plein, même géométrie) ;
     3. .cta-ghost — action discrète sur fond CLAIR (filet + marine) ;
        .cta-dark  — pendant de .cta-ghost sur fond SOMBRE (marine/terminal) ;
     4. .cta-danger — action DESTRUCTIVE : même géométrie pleine que
        .cta/.cta-gold, CARMIN plein (--carmin, token charte) + texte CRÈME
        (carmin foncé = crème lisible ~8:1) ; toujours doublée d'une
        confirmation. Variante .ghost = filet carmin / texte carmin
        (« Supprimer… » de la zone rouge).
     + modificateur .sm (échelle CONTENUE, cible ≥ 44px) sur la famille
        pleine — actions de rangée et de section peu fréquentes.
   Le .cta-ghost du DS n'est qu'un lien gris 13px (contraste 2,97:1 sur crème,
   aucune zone cliquable) : ici — feuille chargée UNIQUEMENT par cette app —
   on le promeut en vrai bouton visible, cible ≥ 44px.
   ========================================================================= */
.cta-gold {
  font-family: var(--display); background: var(--brique); color: var(--marine);
  padding: 14px 22px; font-size: 17px; letter-spacing: -0.015em; text-transform: uppercase;
  border: 0; cursor: pointer; transition: background 0.18s ease;
}
.cta-gold:hover:not(:disabled) { background: var(--brique-light); }

.cta-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--marine);
  background: transparent; border: 1px solid var(--line);
  padding: 11px 16px; min-height: 44px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.cta-ghost:hover:not(:disabled) { border-color: var(--marine); background: var(--cream-2); color: var(--marine); }

.cta-danger {
  font-family: var(--display); background: var(--carmin); color: var(--cream);
  padding: 14px 22px; font-size: 17px; letter-spacing: -0.015em; text-transform: uppercase;
  border: 0; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cta-danger:hover:not(:disabled) { background: var(--marine); color: var(--cream); }
/* Variante FILET (« Supprimer… ») : fond transparent, filet + texte carmin. */
.cta-danger.ghost { background: transparent; border: 1px solid var(--carmin); color: var(--carmin); }
.cta-danger.ghost:hover:not(:disabled) { background: var(--carmin); border-color: var(--carmin); color: var(--cream); }

.cta-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--cream);
  background: transparent; border: 1px solid var(--cream-mute);
  padding: 11px 16px; min-height: 44px; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.cta-dark:hover:not(:disabled) { border-color: var(--cream); background: var(--cream-faint); }

/* Variante de TAILLE .sm — définie UNE SEULE fois pour la famille pleine
   (.cta / .cta-gold / .cta-danger ; les ghost/dark sont déjà à cette échelle).
   Règle : dans une même rangée/section les boutons partagent une échelle —
   les actions de RANGÉE (Révoquer) et les actions de section peu fréquentes
   (remise à zéro, suppression de compte) passent en .sm ; l'action PRINCIPALE
   d'un formulaire reste pleine taille. Cible tactile ≥ 44px conservée. */
.cta.sm, .cta-gold.sm, .cta-danger.sm {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; letter-spacing: -0.01em;
  padding: 8px 14px; min-height: 44px;
}

/* État désactivé — IDENTIQUE pour tout le système. */
.cta:disabled, .cta-gold:disabled, .cta-ghost:disabled, .cta-dark:disabled, .cta-danger:disabled {
  opacity: .45; cursor: not-allowed;
}
/* Les rangées de boutons doivent pouvoir replier sur petit écran. */
.cta-row { flex-wrap: wrap; }

/* Rangée de boutons alignée à DROITE (pied de modale). */
.cta-row.right { justify-content: flex-end; }

/* Messages de retour (erreur / succès) : le texte reste en encre LISIBLE
   (ink), l'état est porté par le filet coloré — fini le texte rouge/vert nu
   (2,6:1 et 1,9:1 sur crème, illisibles). */
.sog-msg {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
  padding: 10px 12px; margin: 10px 0 0;
}
.sog-msg.err { border-left-color: var(--dot-red); }
.sog-msg.ok  { border-left-color: var(--dot-green); }
/* Indication courte sous un champ (dispo pseudo…) : glyphe coloré + texte encre. */
.sog-hint { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin: 6px 0 0; min-height: 15px; }
.sog-hint.err:not(:empty)::before { content: "✗ "; color: var(--dot-red); font-weight: 700; }
.sog-hint.ok:not(:empty)::before  { content: "✓ "; color: var(--dot-green); font-weight: 700; }

/* (la bande de chiffres claire .sog-figs a disparu avec la refonte
   S'entraîner 2026-07 : les chiffres d'épreuve vivent au pied des heros
   marine .cq-figs, comme sur « Le concours ».) */

/* Bandeau d'erreur (rouge) — service de correction indisponible, sans prompt.
   Titre en marine (le rouge nu plafonne à 2,99:1 sur blanc) : l'état d'erreur
   est porté par le double filet rouge. */
.sog-errbox { background: var(--surface); border: 1px solid var(--dot-red); border-left: 4px solid var(--dot-red); padding: 16px 18px; margin-top: 6px; }
.sog-errbox .h { font-family: var(--display); font-size: 16px; letter-spacing: -.01em; color: var(--marine); margin-bottom: 6px; }
.sog-errbox p { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* =========================================================================
   PAGE « LE CONCOURS » — CLONE de la maquette validée (2026-07-04).
   Canevas ~652px transposé ×1,47 : titre hero 26→38 · lead 10→15 · chiffres
   de bande 18→26 · libellés 8→12 · ronds du parcours 26→38 (l'écrit 34→50) ·
   textes 9→13 · barres de thème 10→15 · kickers d'encart 8,5→12 · pas-à-pas
   = rail .sog-steps existant (carrés 22→32 = .sog-mk) · CTA = .cta-gold.
   Le module rend DANS .container → les « bandes » couvrent la largeur du
   CONTENEUR (même emprise que les cadres marine), pas l'écran : adaptation
   actée. Alternance : marine (hero) → crème (01) → crème-2 (02) → crème
   (03) → crème-2 (04). Tokens only — le « brique foncé sur crème » de la
   maquette n'a pas de token : var(--brique), l'accent charte sur crème ;
   la ligne de timeline « marine 20 % » = color-mix sur var(--marine).
   ========================================================================= */

/* — HERO marine : titre display (point brique) + lead mono, pied de bande
     à 4 chiffres (filets verticaux crème translucide, éliminatoire en
     brique .hl) — même grammaire que le pied de bande de la landing. — */
.cq-hero { background: var(--marine); }
.cq-hero-in { padding: 40px 28px 30px; }
.cq-hero-t { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4.5vw, 38px); line-height: 1.1; letter-spacing: -.01em; color: var(--cream); margin: 0 0 12px; }
.cq-hero-t .dot { color: var(--brique); }
.cq-hero-lead { font-family: var(--mono); font-size: 15px; line-height: 1.55; color: var(--cream-mute); max-width: 620px; margin: 0; }
.cq-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--cream-faint); }
.cq-fig { padding: 20px 14px; text-align: center; border-left: 1px solid var(--cream-faint); }
.cq-fig:first-child { border-left: none; }
.cq-fig .v { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: -.01em; color: var(--cream); font-variant-numeric: tabular-nums; }
.cq-fig.hl .v { color: var(--brique); }
.cq-fig .k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream-mute); margin-top: 8px; }

/* — Bandes de section : alternance crème / crème-2, .sog-eye recalé
     (le margin-top 54px des pages « à nu » n'a pas cours dans une bande) — */
.cq-band { background: var(--cream); padding: 40px 28px; }
.cq-band.alt { background: var(--cream-2); }
.cq-band .sog-eye { margin: 0 0 26px; }

/* — 01 Parcours : timeline horizontale 5 étapes reliées par une ligne
     marine translucide ; ronds filet marine (fond = crème de la bande,
     ils masquent la ligne), l'écrit en médaillon BRIQUE plus gros, la
     dernière étape en rond PLEIN marine. — */
.cq-path { position: relative; display: flex; }
.cq-path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 24px; height: 2px; background: color-mix(in srgb, var(--marine) 20%, transparent); }
.cq-pstep { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.cq-pdotw { height: 50px; display: flex; align-items: center; }
.cq-pdot {
  width: 38px; height: 38px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--marine); background: var(--cream); color: var(--marine);
  font-family: var(--display); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cq-pdot.big { width: 50px; height: 50px; border-color: var(--brique); background: var(--brique); font-size: 18px; }
.cq-pdot.fill { background: var(--marine); color: var(--cream); }
.cq-ptxt { min-width: 0; }
.cq-pt { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--marine); line-height: 1.3; margin-top: 10px; }
.cq-pd { font-family: var(--mono); font-size: 12px; color: var(--ink-2); line-height: 1.35; margin-top: 3px; }
.cq-phint { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--brique); line-height: 1.35; margin-top: 6px; }
.cq-plegend { font-family: var(--mono); font-size: 13px; color: var(--ink-2); text-align: center; margin: 26px 0 0; }

/* — 02 Thèmes : barres or classées (libellé gras au-dessus, compte à
     droite ; largeur ∝ max et opacité dégressive côté JS) + encart marine
     30 %. — */
.cq-themes { display: flex; align-items: flex-start; gap: 28px; }
.cq-thbars { flex: 1 1 auto; min-width: 0; }
.cq-trow { margin-bottom: 16px; }
.cq-trow:last-child { margin-bottom: 0; }
.cq-trow .lbl { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--marine); margin-bottom: 6px; }
.cq-trow .brow { display: flex; align-items: center; gap: 12px; }
.cq-tbar { flex: 1 1 auto; min-width: 0; height: 15px; }
.cq-tbar i { display: block; height: 100%; background: var(--brique); }
.cq-trow .val { flex: 0 0 auto; font-family: var(--display); font-size: 15px; letter-spacing: -.02em; color: var(--marine); min-width: 22px; text-align: right; }

/* Encart marine générique de la page (kicker brique-light + corps crème
   translucide) : « la lecture » (02) et « les écueils » (04). */
.cq-panel { background: var(--marine); padding: 20px 22px; }
.cq-panel .kick { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brique-light); margin: 0 0 10px; }
.cq-panel p { font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--cream-mute); margin: 0; }
.cq-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cq-panel li { display: flex; gap: 9px; font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--cream-mute); }
.cq-panel li::before { content: "›"; color: var(--brique); font-weight: 700; flex: 0 0 auto; }
.cq-themes .cq-panel { flex: 0 0 30%; box-sizing: border-box; }

/* — 04 Méthode : pas-à-pas (rail existant) 1.2fr + encart écueils 1fr,
     CTA or dessous. — */
.cq-meth { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; align-items: start; }
.cq-meth-cta { margin-top: 30px; }

/* — Responsive concours : chiffres du hero 2×2, timeline VERTICALE (ligne
     à gauche, étapes empilées), thèmes empilés, méthode empilée. — */
@media (max-width: 639px) {
  .cq-hero-in { padding: 32px 20px 26px; }
  .cq-band { padding: 32px 20px; }
  .cq-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cq-fig { padding: 16px 12px; }
  .cq-fig:nth-child(odd) { border-left: none; }
  .cq-fig:nth-child(n+3) { border-top: 1px solid var(--cream-faint); }
  .cq-path { flex-direction: column; gap: 20px; }
  .cq-path::before { left: 24px; right: auto; top: 25px; bottom: 25px; width: 2px; height: auto; }
  .cq-pstep { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; padding: 0; }
  .cq-pdotw { flex: 0 0 50px; height: 50px; justify-content: center; }
  .cq-ptxt { padding-top: 8px; }
  .cq-pt { margin-top: 0; }
  .cq-themes { flex-direction: column; }
  .cq-themes .cq-panel { flex: 1 1 auto; width: 100%; }
  .cq-meth { grid-template-columns: 1fr; }
}

/* =========================================================================
   RESPONSIVE — même point de bascule que le DS (639px) + affinage 560px.
   Objectif : aucun débordement horizontal à 375px, cibles tactiles ≥ 44px.
   ========================================================================= */
@media (max-width: 639px) {
  /* Le volet du MILIEU du sous-menu (défini plus haut pour le desktop) doit
     suivre l'empilement mobile du DS — sinon il reste biseauté et décalé. */
  .csub-mid { clip-path: none; margin-left: 0; padding-left: 20px; padding-right: 20px; }

  /* Cibles tactiles ≥ 44px sur tout l'interactif compact. */
  .sog-chip { padding: 12px 16px; }
  .sog-tab { padding: 12px 16px; }
  .sog-ztoggle { height: 44px; }
  .sog-lvl-i { width: 32px; height: 32px; }
  .sog-help-close { width: 38px; height: 38px; }
  .sog-console .tg { padding: 11px 15px; }
  .sog-console .body { padding: 16px 14px; }
  .sog-console .glink { padding: 12px 0; }

  /* Rangée de chiffres géants : grille 2 colonnes propre (les filets de
     séparation vivent mal le passage à la ligne du flex). */
  .sog-statrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
  .sog-statc, .sog-statc + .sog-statc { border-right: 0; padding: 0; }

  /* Rangées éditoriales : la méta passe sous le titre au lieu de compresser. */
  .sog-rowi { flex-wrap: wrap; row-gap: 6px; }
  .sog-rowi .m { flex-basis: 100%; order: 4; margin-left: 0; white-space: normal; }
  /* … et l'action de rangée (Révoquer) ferme la rangée, sous la méta. */
  .sog-rowi .cta-danger { order: 5; }

  /* Toasts : jamais plus larges que l'écran. */
  .sog-toasts { left: 18px; right: 18px; align-items: flex-end; }
  .sog-toast { max-width: 100%; }
}

/* =========================================================================
   S'ENTRAÎNER (QCM · Dictée · Composition) — CLONE des trois maquettes
   validées (2026-07-04). Canevas ~600px transposé ×1,47 : méta 9→13 ·
   kickers 7,5-8→11-12 · corps 10-11→15-16 · étiquettes 9→13 · displays de
   verdict 30→44 (clamp) · chrono compo 28→41. Les heros = .cq-hero/.cq-figs
   EXISTANTS (général.js) — ici seulement la variante 3 colonnes. Préfixes :
   .tr- = commun aux trois onglets ; .dz-mag = magnétophone dictée. Chaque
   composant UNE fois (barres/segments partagés, modificateurs .dark/.lt).
   Tokens only.
   ========================================================================= */

/* — Pied de hero à 3 chiffres (les épreuves portent 3 figs, pas 4). — */
.cq-figs.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* — Barre segmentée générique : progression du QCM (or = répondu, crème =
     courante, translucide = à venir), phrases du magnétophone (or = lues),
     temps restant compo (.done = restant, .red sous 15 min). .lt = fond
     CLAIR (piste crème-3 visible sur crème). — */
.tr-segbar { display: flex; gap: 3px; }
.tr-segbar i { flex: 1 1 auto; min-width: 3px; height: 7px; background: var(--cream-faint); }
/* .lt AVANT les états : à spécificité égale, .done/.cur/.red doivent gagner. */
.tr-segbar.lt i { background: var(--cream-3); }
.tr-segbar i.done { background: var(--brique); }
.tr-segbar i.cur { background: var(--cream); }
.tr-segbar i.red { background: var(--dot-red); }

/* — Barres à étiquette : « où tu pèches » (QCM), fautes par type (dictée),
     grille IA (compo) — UN composant. Rangée = tête (label + valeur) +
     piste + remplissage proportionnel. Défaut = fond clair ; .dark =
     console/marine. Couleur (remplissage + valeur) : .g vert, .y jaune
     console, .o or, .r rouge doux ; .dim = zéro (éteint, sans remplissage).
     Côte à côte par défaut (maquette QCM), .stack = empilées. — */
.tr-bars { display: flex; gap: 16px; }
.tr-bars.stack { flex-direction: column; gap: 12px; }
.tr-bar { flex: 1 1 0; min-width: 0; }
.tr-bar .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 13px; margin-bottom: 6px; }
.tr-bar .lb { color: var(--ink); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-bars.dark .tr-bar .lb { color: var(--cream); font-weight: 400; }
.tr-bar .vl { font-weight: 700; white-space: nowrap; }
.tr-bar .tk { height: 7px; background: var(--cream-3); }
.tr-bars.dark .tr-bar .tk { background: var(--cream-faint); }
.tr-bar .tk i { display: block; height: 100%; background: var(--brique); }
.tr-bar.g .tk i { background: var(--dot-green); }  .tr-bar.g .vl { color: var(--dot-green); }
.tr-bar.y .tk i { background: var(--dot-yellow); } .tr-bar.y .vl { color: var(--dot-yellow); }
.tr-bar.o .tk i { background: var(--brique); }     .tr-bar.o .vl { color: var(--brique); }
.tr-bar.r .tk i { background: var(--dot-red); }    .tr-bar.r .vl { color: var(--dot-red); }
.tr-bar.dim { opacity: .4; }
.tr-bar.dim .tk i { display: none; }

/* — Petit libellé espacé des fonds CLAIRS (« › TES FAUTES PAR TYPE »,
     « › LA GRILLE ») — pendant clair du .clabel console. — */
.tr-lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 8px; }

/* — Encart conseil à filet gauche OR (point faible dictée, conseil de la
     copie claire) : carte blanche, filet 2px brique. — */
.tr-conseil { border-left: 2px solid var(--brique); background: var(--surface); padding: 12px 15px; font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.tr-conseil b { color: var(--marine); }

/* — Bandeau d'appel (« Le QCM officiel ») : marine, texte + CTA or. — */
.tr-callout { display: flex; align-items: center; gap: 14px 18px; background: var(--marine); color: var(--cream); padding: 18px 21px; margin-top: 21px; flex-wrap: wrap; }
.tr-callout .tx { flex: 1 1 260px; min-width: 0; }
.tr-callout .tx b { font-family: var(--mono); font-size: 15px; }
.tr-callout .tx .sub { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--cream-mute); margin-top: 3px; }
.tr-callout > .cta-gold { flex: 0 0 auto; }

/* — Étiquette OR display (mention des verdicts dictée/compo). .ok = vert
     (sans-faute), .elim = rouge doux (copie éliminatoire). — */
.tr-etq { display: inline-block; font-family: var(--display); font-size: 13px; letter-spacing: -.01em; text-transform: uppercase; background: var(--brique); color: var(--marine); padding: 6px 14px; }
.tr-etq.ok { background: var(--dot-green); }
.tr-etq.elim { background: var(--dot-red); color: var(--cream); }

/* — En-tête de verdict CLAIR (dictée & compo) : note display + étiquette +
     méta sur une ligne. — */
.tr-verdict { display: flex; align-items: center; gap: 14px 21px; flex-wrap: wrap; margin: 4px 0 18px; }
.tr-verdict .note { font-family: var(--display); font-size: clamp(32px, 5vw, 44px); line-height: 1; letter-spacing: -.02em; color: var(--marine); }
.tr-verdict .note small { font-family: var(--mono); font-size: 19px; letter-spacing: 0; color: var(--ink-3); margin-left: 2px; }

/* — Deux colonnes de verdict (stack mobile) + carte blanche. Les colonnes
     sont des piles (label éventuel + carte) : la carte s'étire (flex 1)
     pour que les deux restent à la même hauteur. — */
.tr-cols { display: flex; gap: 18px; align-items: stretch; margin-top: 18px; }
.tr-cols > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.tr-card { background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; box-sizing: border-box; }
.tr-cols .tr-card { flex: 1 1 auto; }
.tr-cols .tr-lbl { margin-top: 0; }
.tr-card .hd { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px; }
.tr-card .hd.g { color: var(--dot-green); }
.tr-card .hd.r { color: var(--dot-red); }

/* Texte de copie sur carte blanche : la grammaire .copie-diff relue pour le
   clair — encre de base, fautes rouges SOULIGNÉES ONDULÉ (maquette). */
.tr-copy { font-family: var(--mono); font-size: 13.5px; line-height: 1.9; color: var(--ink); word-break: break-word; }
.tr-copy .d-ok { color: var(--ink); }
.tr-copy .d-red { text-decoration-style: wavy; }

/* Listes de verdict sur fond clair (pendant clair de .copie-pts). */
.tr-pts { list-style: none; margin: 0; padding: 0; }
.tr-pts li { font-family: var(--mono); font-size: 13px; line-height: 1.55; color: var(--ink-2); padding: 6px 0 6px 22px; position: relative; border-bottom: 1px solid var(--line); }
.tr-pts li:last-child { border-bottom: 0; }
.tr-pts li::before { content: "→"; position: absolute; left: 0; color: var(--brique); }
.tr-pts.pos li::before { content: "✓"; color: var(--dot-green); }
.tr-pts.neg li::before { content: "✗"; color: var(--dot-red); }

/* — Pied de verdict : liens discrets à gauche, CTA or à droite. — */
.tr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.tr-foot .lks { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.tr-foot .lk { font-family: var(--mono); font-size: 13px; color: var(--ink-2); background: none; border: 0; cursor: pointer; padding: 12px 0; min-height: 44px; }
.tr-foot .lk:hover { color: var(--marine); }

/* — Rangée CTA d'un briefing : bouton(s) + méta d'historique à droite. — */
.tr-ctarow { display: flex; align-items: center; gap: 12px 15px; flex-wrap: wrap; margin-top: 21px; }
.tr-ctarow .sog-meta { margin-left: auto; }

/* — Magnétophone dictée : panneau marine UNIFIÉ (lecture). — */
.dz-mag { background: var(--marine); color: var(--cream); padding: 18px 21px; }
.dz-mag .row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.dz-mag .row + .row, .dz-mag .tr-segbar { margin-top: 15px; }
.dz-mag .play { font-family: var(--mono); font-size: 16px; font-weight: 700; background: var(--brique); color: var(--marine); border: 0; padding: 10px 21px; cursor: pointer; transition: background .14s ease; }
.dz-mag .play:hover { background: var(--brique-light); }
.dz-mag .ph { font-family: var(--mono); font-size: 13px; color: var(--cream-mute); margin-left: auto; white-space: nowrap; }
.dz-mag .rate { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--cream-mute); margin-left: 10px; }
.dz-mag .rate input { accent-color: var(--brique); width: 110px; }
.dz-mag .opts { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* — Sujet retenu (compo) : cadre marine COMPACT (kicker + sujet gras). — */
.tr-suj { background: var(--marine); color: var(--cream); padding: 15px 18px; margin-top: 15px; }
.tr-suj .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-mute); margin-bottom: 6px; }
.tr-suj .t { font-family: var(--mono); font-size: 15px; font-weight: 700; line-height: 1.5; }

/* — Bandeau chronomètre compo : kicker + display à gauche, .cta-dark à
     droite ; barre de temps restant SOUS le bandeau. — */
.tr-chrono { background: var(--marine); color: var(--cream); padding: 18px 21px; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 21px; }
.tr-chrono .k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-mute); }
.tr-chrono .tm { font-family: var(--display); font-size: clamp(30px, 5vw, 41px); letter-spacing: .04em; line-height: 1; color: var(--cream); margin-top: 6px; font-variant-numeric: tabular-nums; }
.tr-chrono .btns { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.tr-chrono + .tr-segbar { margin-top: 8px; }

/* — Ligne pills + méta (« ta zone : … ») du briefing compo. — */
.tr-pillrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-pillrow .sog-meta { margin-left: auto; }

/* — Responsive S'entraîner : colonnes → pile, ancrages à droite relâchés. — */
@media (max-width: 639px) {
  .tr-cols { flex-direction: column; }
  .tr-bars { flex-direction: column; gap: 12px; }
  .tr-ctarow .sog-meta, .tr-pillrow .sog-meta { margin-left: 0; flex-basis: 100%; }
  .tr-chrono .btns { margin-left: 0; }
  .dz-mag .ph { margin-left: 0; flex-basis: 100%; }
  .dz-mag .rate { margin-left: 0; }
  .dz-mag .opts { margin-left: 0; }
}

/* =========================================================================
   MA PROGRESSION v2 — CLONE des deux maquettes validées (2026-07-04) :
   (A) hero personnalisé + encart « Mes copies », (B) trophées vitrine +
   tiroir. Canevas ~600px transposé ×1,47 : rangées 9→13 · petits 8,5→12-13 ·
   chips 8,5→12 · note dépliée 20→30 · display du hero = clamp existant du
   .cq-hero. Réutilise .cq-hero/.cq-figs (hero, 4 figs = défaut), .tr-conseil
   (callout filet or), .tr-etq (étiquette jaune), .tr-verdict-like en .mp-,
   .tr-bars (fond crème = défaut), .tr-cols/.tr-card (inversion crème sur
   carte blanche), .tr-pts, .cta-ghost/.cta-gold.sm, .sog-trophy (vitrine).
   Ici UNIQUEMENT les éléments sans brique existante, préfixe .mp-. Les
   filets « marine translucide » de la maquette = color-mix sur var(--marine)
   (précédent .cq-path). Tokens only — aucun hex.
   ========================================================================= */

/* — Compteur discret dans l'en-tête de section (« 3 / 25 débloqués ») — */
.sog-eye .mp-eyec { color: var(--ink-3); }

/* — 04 Mes copies : chips-filtres à compteurs + méta à droite — */
.mp-fchrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-fchrow .sog-meta { margin-left: auto; }
.mp-fch {
  font-family: var(--mono); font-size: 12px; padding: 7px 12px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  cursor: pointer; transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.mp-fch:hover { border-color: var(--brique); color: var(--marine); }
.mp-fch.on { background: var(--marine); color: var(--cream); border-color: var(--marine); }

/* — Lignes de copies : <details> (la mécanique de /suivi/ details.ex) sur
     les composants de l'app. Fermée = carte blanche à filet marine 15 % ;
     ouverte = filet GAUCHE 3px or ; « + / − » or à droite ; les lignes
     anciennes (au-delà des 5 premières) sont estompées. — */
.mp-list { display: flex; flex-direction: column; gap: 9px; margin-top: 9px; }
.mp-row { background: var(--surface); border: 1px solid color-mix(in srgb, var(--marine) 15%, transparent); }
.mp-row[open] { border-left: 3px solid var(--brique); }
.mp-row.old:not([open]) { opacity: .75; }
.mp-row summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 15px;
  padding: 13px 18px; font-family: var(--mono); font-size: 13px; color: var(--ink);
}
.mp-row summary::-webkit-details-marker { display: none; }
.mp-row summary::after { content: "+"; margin-left: 6px; font-family: var(--display); font-size: 14px; color: var(--brique); }
.mp-row[open] summary::after { content: "−"; }
.mp-row summary .tr-etq { font-size: 11px; padding: 3px 9px; }
.mp-row summary .mut { color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row summary .sc { margin-left: auto; font-weight: 700; white-space: nowrap; }
.mp-body { border-top: 1px solid color-mix(in srgb, var(--marine) 10%, transparent); padding: 15px 18px 18px; }

/* — En-tête de ligne dépliée : note display (20→30) + étiquette + méta — */
.mp-vhead { display: flex; align-items: center; gap: 10px 15px; flex-wrap: wrap; margin: 0; }
.mp-note { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: -.02em; color: var(--marine); }
.mp-note small { font-family: var(--mono); font-size: 15px; letter-spacing: 0; color: var(--ink-3); margin-left: 2px; }

/* Inversion : on est sur CARTE BLANCHE → les cartes de verdict passent en
   crème (maquette), les barres gardent leur piste crème (défaut .tr-bars). */
.mp-body .tr-card { background: var(--cream); border: 0; }

/* Texte intégral (« Relire ma copie » / « Relire ma saisie ») — repliable. */
.mp-prod {
  background: var(--cream); padding: 12px 15px; margin-top: 15px;
  font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: break-word; max-height: 320px; overflow: auto;
}
.mp-body .cta-row { margin-top: 15px; }

/* — « Afficher plus (N restantes) » : centré sous la liste — */
.mp-more { display: flex; justify-content: center; margin-top: 15px; }

/* — 06 Trophées : VITRINE — seuls les obtenus, format à nu existant
     (.sog-trophy), + tuile MYSTÈRE pointillée aux proportions d'un écusson. — */
.mp-vitrine { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; margin-bottom: 26px; }
.mp-vitrine .sog-trophy { flex: 0 0 auto; max-width: 210px; }
.mp-myst { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; opacity: .85; }
.mp-myst .bx {
  width: 168px; height: 194px; box-sizing: border-box;
  border: 1.5px dashed color-mix(in srgb, var(--marine) 35%, transparent);
  display: flex; align-items: center; justify-content: center;
}
.mp-myst .n { font-family: var(--display); font-size: 40px; color: color-mix(in srgb, var(--marine) 40%, transparent); }
.mp-myst .lbl { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }

/* — TIROIR (replié par défaut) : filet au-dessus, rangées compactes —
     silhouette CSS (bloc marine 18 %, pas de nouveau SVG), nom gras,
     condition en clair, famille à droite ; la rangée « rompez_les_rangs »
     porte le filet gauche or, la silhouette teintée or et la famille
     « le graal » en or (le +/− et l'or sur blanc = var(--brique), le
     précédent de details.ex — adaptation actée du jaune foncé maquette). — */
.mp-tro-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--marine) 12%, transparent);
  padding: 12px 0; font-family: var(--mono); font-size: 12px; color: var(--ink-2); cursor: pointer;
  transition: color .14s ease;
}
.mp-tro-toggle:hover { color: var(--marine); }
.mp-tro-toggle .pm { font-family: var(--display); font-size: 14px; color: var(--brique); }
.mp-tro-toggle.ft { border-top: 0; padding-bottom: 0; }
.mp-tro-list { display: flex; flex-direction: column; gap: 7px; margin-top: 7px; }
.mp-tro-row {
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--marine) 12%, transparent);
  padding: 10px 15px; display: flex; align-items: center; gap: 6px 15px;
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
}
.mp-tro-row .sil { flex: 0 0 32px; width: 32px; height: 38px; background: color-mix(in srgb, var(--marine) 18%, transparent); }
.mp-tro-row b { color: var(--marine); white-space: nowrap; }
.mp-tro-row .cnd { min-width: 0; }
.mp-tro-row .fam { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.mp-tro-row.graal { border-left: 2px solid var(--brique); }
.mp-tro-row.graal .sil { background: color-mix(in srgb, var(--brique) 50%, transparent); }
.mp-tro-row.graal .fam { color: var(--brique); font-weight: 700; }

/* — Responsive Ma progression : rangées → colonnes (patterns du site). — */
@media (max-width: 639px) {
  .mp-fchrow .sog-meta { margin-left: 0; flex-basis: 100%; }
  .mp-row summary { row-gap: 4px; }
  .mp-row summary .mut { flex-basis: 100%; order: 4; white-space: normal; }
  .mp-row summary .sc { order: 5; margin-left: 0; }
  .mp-vitrine { gap: 22px 18px; }
  .mp-myst .bx { width: 120px; height: 139px; }
  .mp-myst .n { font-size: 28px; }
  .mp-tro-row { flex-wrap: wrap; }
  .mp-tro-row .fam { margin-left: 0; flex-basis: 100%; }
}

/* =========================================================================
   SAFE-AREA (iPhone à encoche / barre d'accueil)
   -------------------------------------------------------------------------
   Prepadawan pose `viewport-fit=cover` dans son <head> : sans ces marges, les
   éléments FIXES passent SOUS la barre d'accueil (bas) ou l'encoche (paysage).
   Le design system PARTAGÉ (ds.css) ne gère pas l'encoche ; on scope ICI
   (sog.css ne charge que sur Prepadawan), sans toucher la coque commune.
   `max(valeur, env())` = AUCUN effet hors appareils à encoche (env() = 0),
   donc zéro régression sur desktop et Android sans découpe.
   ========================================================================= */
@supports (padding: max(0px, env(safe-area-inset-bottom))) {
  /* Toasts (fixés en bas à droite) : ne pas chevaucher la barre d'accueil. */
  .sog-toasts {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
  }
  /* Overlays plein écran (aide par niveau) : le contenu défilant garde ses
     marges même sous l'encoche et la barre d'accueil. */
  .sog-help-ov {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
}