/* PISTE — direction artistique (reprise de la landing) : éditorial suisse,
   fond papier chaud, accent rouge vermillon, angles droits, Archivo + Fragment
   Mono AUTO-HÉBERGÉES (aucun CDN — brief v1.0 §8.3). Mobile 360 px d'abord. */

/* ============ POLICES AUTO-HÉBERGÉES (OFL) ============ */
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/Archivo.woff2") format("woff2");
  font-weight: 100 900;          /* axe wght */
  font-stretch: 62% 125%;        /* axe wdth — la DA joue sur la chasse */
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/static/fonts/FragmentMono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ============ TOKENS ============ */
:root {
  --paper:#F7F6F3;
  --panel:#FFFFFF;
  --panel-2:#EFEDE8;
  --ink:#171512;
  --smoke:#6E6A63;
  --line:rgba(23,21,18,.16);
  --line-soft:rgba(23,21,18,.08);
  --red:#E02D12;
  --red-texte:#B5230E;  /* rouge TEXTE : 6.05:1 sur papier (WCAG AA) */
  --red-ink:#FFFFFF;
  --green:#1B7A47;
  --green-soft:rgba(27,122,71,.12);
  --red-soft:rgba(224,45,18,.09);
  --shadow:0 24px 60px rgba(23,21,18,.10);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#151517; --panel:#1D1D20; --panel-2:#242427;
    --ink:#F0EEE9; --smoke:#9B978F;
    --line:rgba(240,238,233,.18); --line-soft:rgba(240,238,233,.09);
    --red:#FF503C; --red-texte:#FF6B57; --red-ink:#151517;
    --green:#46C98B; --green-soft:rgba(70,201,139,.14); --red-soft:rgba(255,80,60,.12);
    --shadow:0 24px 60px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#151517; --panel:#1D1D20; --panel-2:#242427;
  --ink:#F0EEE9; --smoke:#9B978F;
  --line:rgba(240,238,233,.18); --line-soft:rgba(240,238,233,.09);
  --red:#FF503C; --red-texte:#FF6B57; --red-ink:#151517;
  --green:#46C98B; --green-soft:rgba(70,201,139,.14); --red-soft:rgba(255,80,60,.12);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* ============ BASE ============ */
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-stretch:100%;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
::selection { background:var(--red); color:var(--red-ink); }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.mono {
  font-family:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ============ EN-TÊTE (barre marque) ============ */
.topbar {
  border-bottom:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--paper) 88%,transparent);
}
.topbar-in {
  max-width:34rem; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo {
  position:relative; display:inline-flex; align-items:baseline; gap:5px;
  font-stretch:122%; font-weight:820; font-size:1.24rem; letter-spacing:.02em;
  text-decoration:none; color:var(--ink);
}
.logo i { width:10px; height:10px; background:var(--red); display:inline-block; }
/* Carte suisse en carrés (asset CANONIQUE, brief §2-3) : filigrane discret
   derrière le mot PISTE, ancre rouge de Lucerne. Aucune croix suisse. */
.logo-mark {
  position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  height:1.5rem; width:auto; opacity:.14; pointer-events:none; z-index:0;
}
.logo-mark .chmap { height:100%; width:auto; display:block; }
.logo-mark .ch-cell { fill:var(--ink); }
.logo-mark .ch-core { fill:var(--red); }
.logo-mot { position:relative; z-index:1; }
.topbar-actions { display:flex; align-items:center; gap:14px; }

/* sélecteur de thème — petit bouton monospace, dans l'esprit des étiquettes */
.theme-toggle {
  font-family:"Fragment Mono",ui-monospace,monospace;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke); background:none;
  border:1px solid var(--line); border-radius:0; padding:6px 10px;
  min-width:5.4em;
  transition:color .2s, border-color .2s;
}
.theme-toggle:hover { color:var(--ink); border-color:var(--red); transform:none; filter:none; }

/* ============ CONTENU ============ */
.wrap {
  width:100%; max-width:34rem; margin:0 auto;
  padding:2.5rem 1.25rem 1.5rem; flex:1;
}

/* eyebrow monospace + carré rouge (signature de la DA) */
.eyebrow {
  display:flex; align-items:center; gap:10px;
  font-family:"Fragment Mono",ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:1.25rem;
}
.eyebrow::before { content:""; width:9px; height:9px; background:var(--red); flex:none; }

h1 {
  font-stretch:112%; font-weight:760; letter-spacing:-.025em; line-height:1.05;
  font-size:clamp(2rem,7vw,2.7rem); text-wrap:balance; margin-bottom:1rem;
}
h2 { font-stretch:110%; font-weight:720; font-size:1.4rem; margin-bottom:.75rem; }
p { margin-bottom:1rem; }
.muted { color:var(--smoke); font-size:.95rem; }

/* ============ FORMULAIRES ============ */
.stack { display:flex; flex-direction:column; gap:1rem; }
label { font-weight:640; font-stretch:104%; }
label.check {
  font-weight:400; display:flex; align-items:center; gap:.6rem;
  color:var(--smoke); font-size:.95rem; cursor:pointer;
}
label.check input { width:1.1rem; height:1.1rem; accent-color:var(--red); }
input[type="email"], input[type="text"], input[type="url"] {
  width:100%; padding:.85rem .9rem; font:inherit; font-size:1rem;
  color:var(--ink); background:var(--panel);
  border:1px solid var(--line); border-radius:0;   /* angles droits */
}
input::placeholder { color:var(--smoke); opacity:.7; }
input:focus { outline:2px solid var(--red); outline-offset:0; border-color:transparent; }

/* ============ BOUTONS (carrés, 1px, hover -1px) ============ */
button, .button {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:.85rem 1.4rem; font:inherit; font-size:.98rem; font-weight:640; font-stretch:106%;
  color:var(--red-ink); background:var(--red);
  border:1px solid var(--red); border-radius:0; cursor:pointer;
  transition:transform .15s ease, filter .2s ease;
}
button:hover, .button:hover { transform:translateY(-1px); filter:brightness(1.06); }
button:active, .button:active { transform:none; }
.button.ghost, button.ghost {
  background:transparent; color:var(--ink); border-color:var(--ink);
}
button.link, .link {
  background:none; color:var(--red-texte); border:0; padding:.4rem 0; font-weight:640;
  border-bottom:2px solid transparent; width:max-content;
}
button.link:hover, .link:hover { border-color:var(--red); transform:none; filter:none; }

/* ============ CARTE (état « vérifiez votre e-mail », etc.) ============ */
.card {
  background:var(--panel); border:1px solid var(--line);
  padding:1.6rem; box-shadow:var(--shadow); margin-top:.5rem;
}
.big {
  font-stretch:118%; font-weight:780; font-size:1.9rem; color:var(--red);
  line-height:1.05; margin-bottom:.6rem;
}

/* ============ PIED ============ */
.foot {
  border-top:1px solid var(--line-soft);
  max-width:34rem; margin:3rem auto 0; padding:1.4rem 1.25rem 2rem;
}
/* La chasse fixe + l'interlettrage faisaient « sortie de console » sur les
   PHRASES du pied. On la garde pour ce qui est étiquette, jamais pour ce
   qui se lit. */
.foot p { color:var(--smoke); font-size:.78rem; line-height:1.5; margin:0; }

/* ============ PARCOURS (É4) ============ */
.pblock { margin:2rem 0; }
.pblock > .eyebrow.small { margin-bottom:.9rem; }
.eyebrow.small { font-size:.66rem; }
.muted.small { font-size:.85rem; margin-top:-.5rem; }
.cards { display:flex; flex-direction:column; gap:1rem; }
.row { display:flex; gap:.6rem; align-items:center; }
.row > input, .row > textarea { flex:1; min-width:0; }
.wrap-row { flex-wrap:wrap; }
textarea {
  width:100%; padding:.7rem .8rem; font:inherit; font-size:.95rem; resize:vertical;
  color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:0;
}
textarea:focus { outline:2px solid var(--red); outline-offset:0; border-color:transparent; }
select {
  font:inherit; padding:.45rem .5rem; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:0;
}
input[type="number"], input[type="date"] {
  width:100%; padding:.6rem .7rem; font:inherit; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:0;
}
input[type="file"] { font-size:.85rem; color:var(--smoke); max-width:100%; }
.field { display:flex; flex-direction:column; gap:.25rem; flex:1; }
.lbl { font-size:.6rem; color:var(--smoke); letter-spacing:.14em; text-transform:uppercase; }
label.inline {
  display:inline-flex; align-items:center; gap:.4rem; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--smoke);
}
.exp-card .row + input, .exp-card input + .row { margin-top:.6rem; }
.exp-card form { display:flex; flex-direction:column; gap:.6rem; }
.reussites {
  margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:1rem;
}
.sub-label {
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke);
}
.reussite, .skill { display:flex; flex-direction:column; gap:.5rem; }
.reussite { padding:.8rem; background:var(--panel-2); border:1px solid var(--line-soft); }
.skill { flex-direction:row; align-items:center; }
.add { margin-top:.8rem; }
.add-block { margin-top:1rem; }
.icon {
  flex:none; width:2.2rem; height:2.2rem; padding:0; font-size:1rem;
  background:none; color:var(--smoke); border:1px solid var(--line);
}
.icon:hover { color:var(--red); border-color:var(--red); transform:none; filter:none; }
.saved { min-height:1rem; font-size:.7rem; }
.saved-flash {
  color:var(--green); font-size:.66rem; letter-spacing:.08em;
  animation:savedfade 2.6s forwards;
}
@keyframes savedfade { 0%,55%{opacity:1} 100%{opacity:0} }

/* ============ SÉCURITÉ MOUVEMENT ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* clôture du parcours */
.pblock.done { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); }

/* ============ ANNONCES (É5) ============ */
.cta-row { display:flex; gap:.8rem; flex-wrap:wrap; }
.err-msg { color:var(--red-texte); font-size:.9rem; }
.card.warn { border-color:var(--red); border-left-width:4px; }
.big.small { font-size:1.15rem; }
.card.annonce { padding:1rem 1.2rem; box-shadow:none; }
.ad-title { font-stretch:108%; font-weight:680; margin-bottom:.2rem; }

/* puces de compétences détectées (reprise DA landing) */
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.chip {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.72rem;
  padding:.25rem .5rem; background:var(--red-soft); color:var(--red-texte);
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent);
}

/* ============ CV PREVIEW (É7) ============ */
.cv-sheet { font-size:.92rem; }
.cv-head { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.cv-nom { font-stretch:116%; font-weight:780; font-size:1.3rem; line-height:1.1; }
.cv-titre { color:var(--smoke); }
.cv-coord { text-align:right; line-height:1.5; }
.cv-section {
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--smoke);
  border-bottom:1px solid var(--line-soft); padding-bottom:.2rem; margin:1rem 0 .5rem;
}
.cv-exp { margin-bottom:.7rem; }
.row.spread { justify-content:space-between; }
.cv-lignes { margin:.2rem 0 0 1.1rem; }
.cv-lignes li { margin-bottom:.15rem; }
.cv-pied { margin-top:1.2rem; border-top:1px solid var(--line-soft); padding-top:.5rem; font-size:.68rem; }
.why-row { display:flex; gap:.7rem; align-items:flex-start; padding:.55rem 0; border-bottom:1px solid var(--line-soft); }
.why-txt { margin-bottom:.1rem; }
.badge { flex:none; font-size:.62rem; letter-spacing:.08em; padding:.2rem .5rem; }
.badge.yes { background:var(--green-soft); color:var(--green); }
.badge.no { background:var(--panel-2); color:var(--smoke); }
label.check.attest { align-items:flex-start; color:var(--ink); font-size:.92rem; }
label.check.attest input { margin-top:.2rem; flex:none; }

/* ============ LETTRE (É9) ============ */
.registre-row { margin-bottom:1rem; gap:.5rem; }
a.chip { cursor:pointer; }
.chip-on { background:var(--red); color:var(--red-ink); border-color:var(--red); }
.gate-list { margin:.3rem 0 0 1.1rem; }
.card.gabarit { padding:.9rem 1.1rem; box-shadow:none; margin-bottom:.7rem; }
.card.gabarit p { margin-bottom:.2rem; }
/* ============ SUIVI (É10) ============ */
.card.dash { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.dash-num { font-stretch:120%; font-weight:800; font-size:2.2rem; font-variant-numeric:tabular-nums; display:block; line-height:1; }
.dash-five { font-size:1.6rem; color:var(--red-texte); display:block; }
.dash-count, .dash-due { display:flex; flex-direction:column; gap:.2rem; }
.badge.warn { background:var(--red-soft); color:var(--red-texte); }
.badge.conf { text-transform:uppercase; letter-spacing:.06em; }
.conf-motif { display:block; margin-top:.2rem; }
.card.cand form { margin:.4rem 0; }

/* tags manquants (É10+) */
.tagrow { margin-bottom:.5rem; }
.small-btn { padding:.4rem .8rem; font-size:.85rem; }

/* report eService */
.card.eserv { padding:.7rem 1rem; box-shadow:none; }
.card.eserv .lbl { margin-bottom:.15rem; }
.eserv-val { font-weight:640; word-break:break-all; margin:0; }
.eclair-row { margin:.3rem 0 .1rem; gap:.4rem; }
.eclair-row .chip { border:1px solid var(--line); background:var(--panel); color:var(--smoke); cursor:pointer; padding:.35rem .7rem; }
.eclair-row .chip.chip-on { background:var(--red); color:var(--red-ink); border-color:var(--red); }
/* ---- É11 : dossier + envoi ---- */
.dossier-etat { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.dossier-etat li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.dossier-etat li.ok::before { content: "✓ "; color: var(--green); font-weight: 700; }
.dossier-etat li.ko::before { content: "✗ "; color: var(--red); font-weight: 700; }
.piece-ligne .inline-form { display: inline; margin-left: .6rem; }
.upload-row { align-items: center; gap: .5rem; }
.gate-list li.bloquant { color: var(--red-texte); }
.gate-list li.avert { color: var(--smoke); }
.ok-line { color: var(--green); font-weight: 600; }
.corps-mail { white-space: pre-wrap; font-family: 'Fragment Mono', monospace; font-size: .82rem; margin: 0; flex: 1; }
[hidden] { display: none !important; }  /* .button etc. ne doivent jamais écraser hidden */
.check-line { display: flex; gap: .5rem; align-items: baseline; font-size: .9rem; }
.danger-btn { background: transparent; color: var(--red-texte); border: 1px solid var(--red); }
.photo-cv { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.photo-apercu { width: 4.2rem; height: 5.2rem; object-fit: cover; border: 1px solid var(--line); }
.photo-row { align-items: center; gap: .8rem; }

/* ---------- e-learning (offre libre, HUB §5.6) ---------- */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; }
.elearn-objectif { border-left:3px solid var(--green); }
.elearn-exemple { background:var(--green-soft); }
.elearn-attention { border-left:3px solid var(--red); background:var(--red-soft); }
.elearn-repere { border-left:3px solid var(--line); }
.elearn-exercice { border:1px dashed var(--line); }
.elearn-liste li { margin:.3rem 0; }
.elearn-tableau-scroll { overflow-x:auto; margin:.9rem 0; }
.elearn-tableau { border-collapse:collapse; width:100%; font-size:.92rem; }
.elearn-tableau th { text-align:left; border-bottom:2px solid var(--ink);
  padding:.45rem .6rem; }
.elearn-tableau td { border-bottom:1px solid var(--line-soft); padding:.45rem .6rem;
  vertical-align:top; }
/* --- catalogue : tuiles de modules --- */
.mod-card { display:block; padding:1.35rem 1.45rem;
  transition:border-color .15s, transform .15s; }
.mod-card:hover { border-color:var(--red); transform:translateY(-1px); }
.mod-cat {
  display:flex; align-items:center; gap:8px;
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--smoke);
  margin-bottom:.6rem;
}
.mod-cat::before { content:""; width:8px; height:8px; background:var(--red); flex:none; }
.mod-title { font-stretch:112%; font-weight:740; font-size:1.3rem;
  line-height:1.25; margin-bottom:.45rem; }
.mod-desc { color:var(--smoke); font-size:.92rem; margin-bottom:1rem; }
.mod-meta { display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; align-items:baseline;
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.72rem;
  color:var(--smoke); }
.mod-meta b { color:var(--ink); font-weight:400; }
.mod-arrow { margin-left:auto; color:var(--red); font-weight:700; }
.mod-prog { height:3px; background:var(--panel-2); margin-top:1rem; }
.mod-prog span { display:block; height:100%; background:var(--green); }
.tag-draft {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--smoke);
  border:1px dashed var(--line); padding:.16rem .45rem; white-space:nowrap;
}

/* --- fiche module : bandeau de specs + syllabus --- */
.spec-strip { display:flex; flex-wrap:wrap; border:1px solid var(--line);
  background:var(--panel); margin:1.3rem 0; }
.spec { flex:1 1 auto; min-width:7.5rem; padding:.85rem 1rem;
  border-right:1px solid var(--line-soft); border-top:1px solid var(--line-soft);
  margin-top:-1px; }
.spec:last-child { border-right:0; }
.spec b { display:block; font-stretch:114%; font-weight:770; font-size:1.2rem;
  font-variant-numeric:tabular-nums; margin-top:.15rem; }
.prog-band { margin:1.3rem 0; }
.prog-lbl { display:flex; justify-content:space-between; align-items:baseline;
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--smoke);
  margin-bottom:.45rem; }
.prog-bar { height:5px; background:var(--panel-2); }
.prog-bar span { display:block; height:100%; background:var(--green); }
.syllabus { display:flex; flex-direction:column; gap:.55rem; margin:1rem 0 1.8rem; }
.syl-row { display:flex; align-items:center; gap:1rem; padding:.95rem 1.1rem;
  background:var(--panel); border:1px solid var(--line);
  transition:border-color .15s, transform .15s; }
.syl-row:hover { border-color:var(--red); transform:translateY(-1px); }
.syl-num { font-family:"Fragment Mono",ui-monospace,monospace; font-size:.78rem;
  color:var(--red); min-width:2.4ch; flex:none; font-variant-numeric:tabular-nums; }
.syl-main { flex:1; min-width:0; }
.syl-titre { display:block; font-weight:660; font-stretch:104%; line-height:1.35; }
.syl-meta { display:block; font-family:"Fragment Mono",ui-monospace,monospace;
  font-size:.66rem; letter-spacing:.08em; color:var(--smoke); margin-top:.2rem; }
.syl-row.done { border-color:var(--line-soft); }
.syl-row.done .syl-titre { color:var(--smoke); }
.syl-row.done .syl-num { color:var(--smoke); }
.syl-done { color:var(--green); font-weight:700; flex:none; }
.syl-next {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; background:var(--red);
  color:var(--red-ink); padding:.2rem .5rem; flex:none;
}
.syl-arrow { color:var(--red); font-weight:700; flex:none; }

/* --- leçon : en-tête, lanceur de présentation, corps --- */
.lecon-meta { display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline;
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--smoke);
  margin-bottom:1.3rem; }
.lecon-meta .ok { color:var(--green); }
.launcher { display:flex; align-items:center; gap:1rem; padding:1rem 1.15rem;
  background:var(--panel); border:1px solid var(--line); margin:1.5rem 0;
  transition:border-color .15s, transform .15s; }
.launcher:hover { border-color:var(--red); transform:translateY(-1px); }
.launcher-icon { flex:none; width:2.7rem; height:2.7rem; background:var(--red);
  color:var(--red-ink); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; }
.launcher-main { flex:1; min-width:0; }
.launcher-t { display:block; font-weight:680; font-stretch:104%; }
.launcher-s { display:block; font-family:"Fragment Mono",ui-monospace,monospace;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke); margin-top:.15rem; }
.launcher-arrow { color:var(--red); font-weight:700; flex:none; }
.lecon-body h2 { display:flex; gap:10px; align-items:baseline; margin-top:2.4rem; }
.lecon-body h2::before { content:""; width:9px; height:9px; background:var(--red);
  flex:none; }
.quiz-rule { border:0; border-top:1px solid var(--line); margin:2.6rem 0 1.6rem; }

/* --- attestation : document --- */
.attest-doc { background:var(--panel); border:1px solid var(--ink);
  padding:2.6rem 1.8rem 2.2rem; position:relative; text-align:center;
  margin-top:1rem; }
.attest-doc::before { content:""; position:absolute; inset:7px;
  border:1px solid var(--line-soft); pointer-events:none; }
.attest-logo { display:inline-flex; align-items:baseline; gap:5px;
  font-stretch:122%; font-weight:820; font-size:1.05rem; letter-spacing:.02em;
  margin-bottom:1.6rem; }
.attest-logo i { width:8px; height:8px; background:var(--red); display:inline-block; }
.attest-kicker { font-family:"Fragment Mono",ui-monospace,monospace;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--smoke); margin-bottom:1.4rem; }
.attest-nom { font-stretch:116%; font-weight:800; font-size:1.75rem;
  line-height:1.15; margin-bottom:.3rem; }
.attest-verbe { color:var(--smoke); font-size:.92rem; margin-bottom:.4rem; }
.attest-module { font-weight:680; font-stretch:106%; font-size:1.12rem;
  max-width:26rem; margin:0 auto 1.4rem; }
.attest-metas { display:flex; flex-wrap:wrap; justify-content:center;
  gap:.4rem 1.4rem; font-family:"Fragment Mono",ui-monospace,monospace;
  font-size:.72rem; color:var(--smoke); margin-bottom:1.5rem; }
.attest-metas b { color:var(--ink); font-weight:400; }
.attest-disc { font-size:.76rem; color:var(--smoke); max-width:26rem;
  margin:0 auto; line-height:1.55; }

/* --- quiz : questions en cartes, options-boutons pleine largeur --- */
.quiz-meta {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--smoke);
  margin-bottom:1rem;
}
.q-card { padding:1.15rem 1.25rem; box-shadow:none; margin-top:0; }
.q-head { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:.9rem; }
.q-num {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.72rem;
  color:var(--red); padding-top:.3rem; min-width:2.4ch; flex:none;
}
.q-text { font-weight:680; font-stretch:106%; line-height:1.45; }
.q-options { display:flex; flex-direction:column; gap:.55rem; }
.q-opt {
  display:flex; gap:.75rem; align-items:flex-start; padding:.75rem .85rem;
  border:1px solid var(--line); background:var(--panel); cursor:pointer;
  font-size:.95rem; line-height:1.45; font-weight:400;
  transition:border-color .15s, background .15s;
}
.q-opt:hover { border-color:var(--ink); }
.q-opt input { width:1.05rem; height:1.05rem; accent-color:var(--red);
  margin-top:.2rem; flex:none; }
.q-opt:has(input:checked) { border-color:var(--red); background:var(--red-soft); }
.q-letter {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.72rem;
  color:var(--smoke); min-width:1.6ch; padding-top:.25rem; flex:none;
}
.q-opt:has(input:checked) .q-letter { color:var(--red); }
.quiz-submit { width:100%; margin-top:.4rem; }

/* --- figures des items visuels (SVG inline) ---------------------------
   Sans contrainte, un SVG à viewBox prend sa largeur naturelle et DÉBORDE
   de l'écran : sur 360 px, le patron de cube et le plan étaient coupés
   (constat de passation réelle sur mobile). Le stimulus se met à la
   largeur disponible, les options gardent une taille lisible et fixe. */
.fig-stimulus { margin:.6rem 0 .9rem; }
.fig-stimulus svg { display:block; width:100%; max-width:22rem;
  height:auto; margin:0 auto; }
.q-opt svg { width:5.5rem; height:auto; flex:none; }
.q-card > svg { display:block; width:100%; max-width:22rem; height:auto; }

/* --- correction : panneau de score + verdict par question --- */
.score-panel { padding:1.5rem 1.6rem; margin-bottom:.4rem; }
.score-row { display:flex; align-items:baseline; gap:.9rem; }
.score-big {
  font-stretch:120%; font-weight:800; font-size:2.8rem; line-height:1;
  font-variant-numeric:tabular-nums;
}
.score-big.c-ok { color:var(--green); }
.score-big.c-ko { color:var(--red); }
.score-pct { color:var(--smoke); font-size:1.05rem; }
.score-bar { height:6px; background:var(--panel-2); margin-top:1rem; position:relative; }
.score-fill { display:block; height:100%; background:var(--red); }
.score-fill.c-ok { background:var(--green); }
.score-mark { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--ink); }
.score-seuil {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--smoke); margin-top:.5rem;
}
.q-card.c-ok { border-left:3px solid var(--green); }
.q-card.c-ko { border-left:3px solid var(--red); }
.corr-line { display:flex; gap:.6rem; align-items:baseline; margin:.3rem 0; font-size:.93rem; }
.corr-tag {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; padding:.18rem .45rem; flex:none;
}
.corr-tag.good { background:var(--green-soft); color:var(--green); }
.corr-tag.bad { background:var(--red-soft); color:var(--red); }
.corr-why { margin-top:.8rem; padding:.75rem .95rem; background:var(--panel-2);
  border:1px solid var(--line-soft); font-size:.9rem; }
.corr-why .lbl { display:block; margin-bottom:.25rem; }

/* --- présentation : scène pleine largeur, hors colonne --- */
.diapo-scene { position:relative; left:50%; transform:translateX(-50%);
  width:min(94vw, 56rem); }
.diapo-top { display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-bottom:.7rem; }
.diapo-retour {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--smoke);
  display:inline-flex; align-items:center; gap:8px; border:0; padding:0;
}
.diapo-retour::before { content:""; width:9px; height:9px; background:var(--red); flex:none; }
.diapo-retour:hover { color:var(--ink); border:0; }
.diapo-retour { flex:1; min-width:0; }
.diapo-retour-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.diapo-count {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.14em; color:var(--smoke); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.diapo-progress { height:3px; background:var(--line-soft); margin-bottom:1.1rem; }
.diapo-progress span { display:block; height:100%; background:var(--red); }
.diapo-stage {
  background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:clamp(1.5rem, 5vw, 3.4rem);
  min-height:min(56vh, 26rem);
  display:flex; flex-direction:column; justify-content:center;
}
.diapo-stage h1 {
  font-size:clamp(1.55rem, 4.5vw, 2.5rem); margin-bottom:clamp(1.1rem, 3vw, 1.8rem);
}
.diapo-points { list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:clamp(.7rem, 2vw, 1.05rem); }
.diapo-points li { display:flex; gap:.9rem; align-items:flex-start;
  font-size:clamp(.98rem, 2.2vw, 1.22rem); line-height:1.5; }
.diapo-points li::before { content:""; width:9px; height:9px; background:var(--red);
  margin-top:.55em; flex:none; }
.diapo-nav { display:flex; gap:.8rem; margin-top:1rem; }
.diapo-nav .button { flex:1; }
.diapo-nav .spacer { flex:1; }
.diapo-dots { display:flex; gap:.5rem; justify-content:center; margin-top:1.1rem;
  flex-wrap:wrap; }
.diapo-dot { width:10px; height:10px; background:var(--panel-2);
  border:1px solid var(--line); padding:0; display:block; }
.diapo-dot:hover { border-color:var(--red); }
.diapo-dot.on { background:var(--red); border-color:var(--red); }
.diapo-note { margin-top:1.2rem; background:var(--panel-2);
  border:1px solid var(--line-soft); padding:.95rem 1.1rem; font-size:.92rem; }
.diapo-note .lbl { display:block; margin-bottom:.3rem; }
.diapo-hint {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--smoke);
  text-align:center; margin-top:.9rem;
}
@media (hover:none) { .diapo-hint { display:none; } }
.attestation { text-align:center; padding:2rem 1.4rem; }
.attestation-nom { font-size:1.3rem; font-weight:700; margin:.6rem 0; }
.attestation .chips { justify-content:center; }
@media print {
  .topbar, .foot, .cta-row, .link, .attest-hint { display:none !important; }
  body { background:#fff; color:#000; }
  .attest-doc { box-shadow:none; border-color:#000; background:#fff; color:#000; }
  .attest-nom, .attest-module, .attest-metas b { color:#000; }
}
/* ---- É13 : wizard ---- */
.wiz-choix { max-width: 32rem; width: 100%; }
.wiz-carte { display: flex; flex-direction: column; gap: .25rem; text-align: left;
  align-items: flex-start; width: 100%; min-width: 0;
  padding: .95rem 1.1rem; border: 1px solid var(--line); background: var(--panel);
  color: var(--ink); cursor: pointer; }
/* É15 : les libellés longs (allemand) doivent PLIER, jamais déborder */
.wiz-carte strong, .wiz-carte span { text-align: left; width: 100%;
  overflow-wrap: anywhere; white-space: normal; }
.check-line { overflow-wrap: anywhere; }
.wiz-carte:hover { border-color: var(--red); }
.wiz-reco { border-left: 3px solid var(--red); }
.wiz-carte-cv input[type="text"] { width: 100%; }
.wiz-carte-cv .check-line { min-height: 48px; align-items: center; font-size: 1rem; }
.wiz-carte-cv .check-line input[type="checkbox"] { width: 1.4rem; height: 1.4rem; }
.wiz-carte-cv input[type="text"] { min-height: 44px; }
.suggestions .chip { min-height: 40px; cursor: pointer; }
/* ---- KPI d'élan + saisie manuelle ---- */
.kpis { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.kpi { flex: 1 1 8rem; padding: .7rem .9rem; border: 1px solid var(--line); background: var(--panel); }
.kpi-num { display: block; font-size: 1.7rem; font-weight: 700; font-family: 'Fragment Mono', monospace; }
.kpi-lbl { font-size: .78rem; color: var(--smoke); }
.kpi-win { border-color: var(--green); }
.kpi-win .kpi-num { color: var(--green); }
.kpi-mot { font-style: italic; margin: .2rem 0 .6rem; }
.repetes summary { cursor: pointer; }
.ajout-manuel { margin-bottom: 1rem; }
.ajout-manuel summary { display: inline-block; cursor: pointer; list-style: none; }
.ajout-manuel summary::-webkit-details-marker { display: none; }
.ajout-manuel[open] summary { margin-bottom: .8rem; }
.tag-manuel { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line); padding: .1rem .4rem; color: var(--smoke); margin-left: .4rem; }
.tag-capture { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--green); padding: .1rem .4rem; color: var(--green); margin-left: .4rem; }
/* ---- feedback QR (Apprentice) ---- */
.feedback-qr { width: 7rem; height: 7rem; border: 1px solid var(--line); background: #fff; padding: .3rem; }
.feedback-partage { align-items: flex-start; gap: 1rem; }
.feedback-item { margin: .5rem 0; }
.feedback-label { display: block; margin-bottom: .3rem; }
.feedback-echelle .chip, .feedback-item .chip { cursor: pointer; }
.feedback-carte { margin-bottom: 1rem; }
.pool-texte { color: var(--green); }
.pilotage-table { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.pilotage-table th, .pilotage-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.pilotage-table td.mono { font-family: 'Fragment Mono', monospace; }
.apercu-btn { margin: .3rem 0 .8rem; display: inline-block; }

/* Signature du feedback de stage (anti-fraude) */
.sig-canvas { width: 100%; max-width: 32rem; height: auto; aspect-ratio: 10/3;
  border: 1.5px dashed var(--trait, #cabfae); border-radius: 6px;
  background: var(--paper, #fff); touch-action: none; display: block; }
.sig-onglets { margin-bottom: .6rem; }

/* Utilitaires — remplacent les styles inline (bloqués par la CSP
   default-src 'self', banc navigateur réel). Les messages/bordures d'erreur
   ne s'affichaient PAS en rouge tant qu'ils étaient inline. */
.txt-erreur { color: var(--red-texte); }
.champ-erreur { border-color: var(--red-texte); }
.w-6 { max-width: 6rem; }
.w-7 { max-width: 7rem; }
.w-9 { max-width: 9rem; }
.w-11 { max-width: 11rem; }
.mt-1 { margin-top: 1rem; }
.mt-12 { margin-top: 1.2rem; }
.mt-08 { margin-top: .8rem; }
.mt-06 { margin-top: .6rem; }
.flex-2 { flex: 2; }
.fs-lead { font-size: 1.2rem; }


/* Indicateur de requête htmx — fourni ici car l'injection auto d'htmx
   (<style> inline) est bloquée par la CSP stricte (banc navigateur réel). */
.htmx-indicator { opacity: 0; transition: opacity .2s ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Pied de page cohérent : accroche, rangée de liens alignés, mention légale
   à part (plus de « À propos » qui pendait après la phrase). */
/* ============ PIED : trois zones, trois voix ============
   Refonte (retour Gaël, deux fois) : les six liens s'enroulaient sur deux
   lignes en laissant un orphelin, tout était au même poids, et la promesse
   commerciale se lisait comme une note de bas de page. Ici : la PROMESSE à
   gauche, les liens en bloc RANGÉ à droite (grille : jamais d'orphelin),
   la mention légale en dessous, séparée par un filet. */
.foot-inner { display:grid; gap:1.4rem 2.5rem; }
@media (min-width:34rem) {
  .foot-inner { grid-template-columns:1fr auto; align-items:start; }
}

/* la promesse : c'est ce qu'on vend, elle se lit en premier */
.foot-accroche {
  margin:0; color:var(--ink); font-size:.95rem; line-height:1.5;
  font-weight:520; max-width:28ch;
}

/* les liens : un bloc de deux colonnes, aligné, sans soulignement par
   défaut (six traits d'affilée faisaient du bruit) */
.foot-liens {
  display:grid; grid-template-columns:repeat(2, max-content);
  gap:.55rem 1.8rem; margin:0;
}
.foot-liens .link {
  color:var(--smoke); font-weight:400; font-size:.8rem;
  padding:0; border-bottom:0; width:auto; text-decoration:none;
}
.foot-liens .link:hover {
  color:var(--ink); text-decoration:underline;
  text-underline-offset:.22em; border-color:transparent;
}
.foot-liens .link:focus-visible { outline:2px solid var(--red); outline-offset:3px; }

/* la mention légale : la plus petite voix, séparée par un filet, et
   TOUJOURS lisible (l'opacity cassait le contraste AA) */
.foot-mention {
  grid-column:1 / -1; margin:0; padding-top:1.1rem;
  border-top:1px solid var(--line-soft);
  font-size:.72rem; line-height:1.55; max-width:60ch;
}

/* Certificats : la liste déroulante des postes et « retirer » sur UNE ligne
   (sans ce regroupement, les deux formulaires retombaient l'un sous l'autre). */
.cert-actions { gap:.6rem; align-items:center; margin-top:.35rem; }

/* 
===== BARRES DE PROGRESSION (natives) ============
   <progress> et non un <div><span style="width:…"> : la CSP `default-src
   'self'` BLOQUE l'attribut style, ces barres ne s'affichaient donc pas du
   tout. L'élément natif porte sa valeur hors CSS, et un lecteur d'écran
   l'annonce (fusion des deux piles, 29.08). */
progress.prog-bar, progress.mod-prog, progress.diapo-progress,
progress.score-bar {
  display:block; width:100%; border:0; background:var(--line-soft);
  -webkit-appearance:none; appearance:none;
}
progress.prog-bar, progress.mod-prog { height:6px; }
progress.diapo-progress { height:3px; margin-bottom:1.1rem; }
progress.score-bar { height:10px; margin:.4rem 0; }
progress.prog-bar::-webkit-progress-bar,
progress.mod-prog::-webkit-progress-bar,
progress.diapo-progress::-webkit-progress-bar,
progress.score-bar::-webkit-progress-bar { background:var(--line-soft); }
progress.prog-bar::-webkit-progress-value,
progress.mod-prog::-webkit-progress-value,
progress.diapo-progress::-webkit-progress-value,
progress.score-bar::-webkit-progress-value { background:var(--red); }
progress.prog-bar::-moz-progress-bar,
progress.mod-prog::-moz-progress-bar,
progress.diapo-progress::-moz-progress-bar,
progress.score-bar::-moz-progress-bar { background:var(--red); }
progress.score-bar.c-ok::-webkit-progress-value { background:var(--green); }
progress.score-bar.c-ok::-moz-progress-bar { background:var(--green); }
=======
/* ======================================================================
   MARQUES DES ÉVALUATIONS
   Deux instruments, deux publics, deux identités : on ne doit jamais les
   confondre. Le thème « piste » est l'identité canonique (rouge PISTE,
   registre adulte) ; le thème « apprentice » est la déclinaison JEUNE —
   même papier, même encre, même carré, mais un accent vert franc et une
   bande large. Aucune identité redessinée : une variante d'accent.
   ====================================================================== */
.marque { border-left:4px solid var(--red); }
.marque-nom {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--smoke);
  margin-bottom:.35rem;
}
.marque h2 { margin-top:0; }
.marque-prix {
  font-family:"Fragment Mono",ui-monospace,monospace; font-weight:700;
  font-size:1.05rem; margin:.5rem 0 .9rem;
}
/* jeune : accent vert, bande épaisse, titres plus affirmés */
.marque-apprentice { border-left-width:8px; border-left-color:var(--green); }
.marque-apprentice .marque-nom { color:var(--green); }
.marque-apprentice .marque-prix { color:var(--green); }
/* adulte : l'identité PISTE telle quelle */
.marque-piste { border-left-color:var(--red); }
.marque-piste .marque-nom { color:var(--red-texte); }

/* bandeau de marque en tête d'une évaluation ouverte */
.bandeau-marque {
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  border-left:8px solid var(--green); padding:.55rem .9rem;
  background:var(--panel); margin-bottom:1.1rem;
}
.bandeau-marque.piste { border-left-color:var(--red); }
.bandeau-marque .nom {
  font-family:"Fragment Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green);
}
.bandeau-marque.piste .nom { color:var(--red-texte); }
.bandeau-marque .base { font-size:.9rem; color:var(--smoke); }