/* Cahier des charges — assistant pas à pas (/cahier-des-charges). */

/* ==========================================================================
   Polices d'aperçu du wizard, auto-hébergées (lot H2, écart RGPD L2)
   --------------------------------------------------------------------------
   L'étape « Style » montre 5 paires typographiques en vrai. Ces familles
   venaient de fonts.googleapis.com : l'IP du visiteur partait chez Google.
   Elles sont désormais servies par le site (static/fonts/).

   Choix de poids assumé, parce que ces fichiers ne servent QUE la
   décoration de 5 tuiles d'aperçu :
   - **une seule graisse par famille**, exactement celle que la tuile rend
     (`.cdc-font b` pour les titres, `.cdc-font i` pour les textes) : ni
     italique, ni graisse de secours ;
   - **sous-ensemble « latin » uniquement** (pas de latin-ext) : les deux
     phrases d'aperçu sont figées dans static/cdc.js (« Votre titre », « Le
     texte de votre site ressemblera à ceci. ») et tiennent dans le latin.
   Total : 7 fichiers, 150 ko, chargés sur cette page seulement. C'est ce que
   Google servait déjà, à l'octet près, mais sans la requête tierce.

   Space Grotesk et Inter Tight (paire « Caractère & audace ») ne sont pas
   redéclarés ici : style.css les sert déjà pour tout le site.

   Rafraîchir les binaires : même procédure qu'en tête de style.css, avec
     https://fonts.googleapis.com/css2?family=Poppins:wght@600
       &family=Playfair+Display:wght@600&family=Nunito:wght@700
       &family=Merriweather:wght@700&family=Lato&family=Source+Sans+3
       &family=Open+Sans&display=swap
   en ne gardant que les blocs « latin ». Ajouter une paire dans cdc.js sans
   ajouter sa police ici fait échouer tests/test_fonts.py.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/playfair-display-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-sans-3-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/nunito-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/open-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/merriweather-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cdc-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 120px 20px 90px;
}
.cdc-head { margin-bottom: 26px; }
.cdc-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 650;
  /* Sans cette ligne le titre héritait le 1.55 du corps de texte, soit
     l'interligne d'un paragraphe : les huit autres titres de page du site
     déclarent le leur, entre 0.95 et 1.06 selon leur taille. */
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 10px 0 14px;
}
.cdc-lead { color: var(--muted); max-width: 640px; line-height: 1.65; }

/* Étapes */
.cdc-steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 26px 0 8px; }
.cdc-step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); padding: 6px 13px 6px 6px; cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.cdc-step span {
  width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--paper); color: var(--muted);
}
.cdc-step:hover { color: var(--fg); border-color: var(--line-strong); }
/* L'encre posée sur un aplat var(--fg) est var(--on-accent) : --fg s'inverse
   avec le thème, un #fff en dur devenait du blanc sur du blanc en sombre. */
.cdc-step.is-active { color: var(--on-accent); background: var(--fg); border-color: var(--fg); }
.cdc-step.is-active span { background: color-mix(in oklab, var(--on-accent) 18%, transparent); color: var(--on-accent); }
.cdc-step.is-done span { background: var(--fg); color: var(--on-accent); }
.cdc-progress {
  height: 4px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-bottom: 30px;
}
.cdc-progress span {
  display: block; height: 100%; width: 16%;
  background: var(--fg); border-radius: 999px;
  transition: width 320ms ease;
}

/* Panneaux & champs */
.cdc-pane h2 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 650; letter-spacing: -0.02em;
  margin: 26px 0 16px;
}
.cdc-pane h2:first-child { margin-top: 0; }
.cdc-q { font-weight: 600; margin: 22px 0 10px; }
.cdc-q em, .cdc-field span em { font-style: normal; font-weight: 400; color: var(--muted-3); font-size: 0.9em; }
.cdc-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin-top: 6px;
}
@media (max-width: 640px) { .cdc-grid { grid-template-columns: 1fr; } }
.cdc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cdc-field--wide { grid-column: 1 / -1; margin-top: 10px; }
.cdc-field > span { font-size: 13.5px; font-weight: 600; }
.cdc-field input, .cdc-field textarea, .cdc-field select {
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; font-family: inherit;
  background: var(--card); color: var(--fg);
  width: 100%; box-sizing: border-box; resize: vertical;
}
.cdc-field input:focus, .cdc-field textarea:focus, .cdc-field select:focus {
  outline: none; border-color: var(--fg);
}
/* La charte a tranché (audit L14) qu'une bordure de 1 px ne suffit pas comme
   indicateur de focus clavier : les champs de /contact et de /login portent un
   anneau. Ceux du wizard supprimaient l'outline sans rien mettre à la place.
   :focus-visible n'apparaît pas au clic souris, seulement au clavier. */
.cdc-field input:focus-visible,
.cdc-field textarea:focus-visible,
.cdc-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cdc-note { color: var(--muted-3); font-size: 13px; margin: 10px 0 0; }

/* Cartes (choix unique) */
.cdc-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; margin: 4px 0 18px;
}
.cdc-cards--row { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cdc-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); color: var(--fg);
  padding: 14px 15px; cursor: pointer; font-family: inherit;
  transition: border-color 140ms ease, box-shadow 180ms ease, background 140ms ease;
}
.cdc-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.3); }
.cdc-card b { font-size: 14.5px; }
.cdc-card i { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.cdc-card.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
/* Même réservation de place que pour les puces (pas de saut de mise en page).
   Coche = SVG masqué (var --icon-check de style.css), teintée currentColor. */
.cdc-card b::after {
  content: ""; display: inline-block; width: 0.75em; height: 0.75em;
  margin-left: 7px; visibility: hidden;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.cdc-card.is-on b::after { visibility: visible; }

/* Chips (choix multiples) */
.cdc-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.cdc-chip {
  font-size: 13.5px; font-weight: 550; font-family: inherit;
  color: var(--muted); background: var(--card);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.cdc-chip:hover { color: var(--fg); border-color: var(--line-strong); }
.cdc-chip.is-on { color: var(--on-accent); background: var(--fg); border-color: var(--fg); }
/* La place de la coche est TOUJOURS réservée : sinon cocher une puce
   l'élargit, la ligne se re-wrappe et le clic suivant atterrit sur une
   autre puce. */
.cdc-chip::before {
  content: ""; display: inline-block; width: 0.75em; height: 0.75em;
  margin-right: 6px; vertical-align: -0.05em; visibility: hidden;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.cdc-chip.is-on::before { visibility: visible; }

/* Palettes */
.cdc-palettes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin: 4px 0 12px;
}
.cdc-palette {
  display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); padding: 12px; cursor: pointer; font-family: inherit;
  transition: border-color 140ms ease, box-shadow 180ms ease;
}
.cdc-palette:hover { border-color: var(--line-strong); }
.cdc-palette.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.cdc-swatch {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.cdc-swatch--rainbow {
  background: conic-gradient(#ef4444, #f59e0b, #84cc16, #06b6d4, #6366f1, #ec4899, #ef4444);
}
.cdc-palette b { font-size: 12.5px; margin-left: 6px; color: var(--fg); font-weight: 600; }
.cdc-custom-colors[hidden] { display: none; }
.cdc-custom-colors {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 14px;
  padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 12px;
}
.cdc-custom-colors label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600;
}
.cdc-custom-colors input[type="color"] {
  width: 44px; height: 32px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); cursor: pointer; padding: 2px;
}

/* Polices */
.cdc-fonts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin: 4px 0 14px;
}
.cdc-font {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); color: var(--fg);
  padding: 15px 16px; cursor: pointer; font-family: inherit;
  transition: border-color 140ms ease, box-shadow 180ms ease;
}
.cdc-font:hover { border-color: var(--line-strong); }
.cdc-font.is-on { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.cdc-font b { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }
.cdc-font i { font-style: normal; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cdc-font span {
  margin-top: 8px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-3);
}
.cdc-font.is-on span::before {
  content: ""; display: inline-block; width: 0.9em; height: 0.9em;
  margin-right: 5px; vertical-align: -0.1em;
  background-color: currentColor;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* Résultat */
.cdc-result {
  margin-top: 22px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); padding: 20px 22px;
}
.cdc-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cdc-result-head h3 { margin: 0 0 10px; font-size: 16px; }
.cdc-preview {
  max-height: 380px; overflow: auto;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px;
  font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.cdc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* Navigation bas de page */
.cdc-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
}
.cdc-nav-hint { flex: 1; text-align: center; }
@media (max-width: 640px) {
  .cdc-wrap { padding-top: 96px; }
  .cdc-nav { flex-wrap: wrap; }
  .cdc-nav-hint { order: 3; width: 100%; }
}


/* ── Bouton « Recommencer » (en-tête de l'assistant) ───────────────────────
   Le brouillon persiste en localStorage : il faut un moyen explicite de
   repartir de zéro (avec confirmation, cf. cdc.js). */
.cdc-reset {
  /* Cible tactile : 15 px de haut en texte nu, on remonte à 44. */
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 13px;
  color: var(--muted-3);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.cdc-reset:hover { color: var(--fg); }

/* ── Document mis en forme (aperçu + impression) ───────────────────────────
   Remplace l'aperçu en Markdown brut : c'est ce que le prospect lit avant de
   télécharger, sur une page qui promet « aucune connaissance technique ». */
.cdc-doc { font-size: 14px; line-height: 1.6; }
.cdc-preview.cdc-doc { white-space: normal; padding: 22px 24px; }
.cdc-doc h1 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 650; letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.cdc-doc .cdc-doc-meta { margin: 0 0 18px; font-size: 12px; color: var(--muted-3); }
.cdc-doc section { margin-bottom: 20px; }
.cdc-doc section:last-child { margin-bottom: 0; }
.cdc-doc h2 {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.cdc-doc dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 4px 16px; }
.cdc-doc dt { color: var(--muted-3); }
.cdc-doc dd { margin: 0; }
.cdc-doc ul { margin: 8px 0 0; padding-left: 20px; }
.cdc-doc li { margin-bottom: 3px; }
.cdc-doc .cdc-doc-sub { margin: 10px 0 0; color: var(--muted-3); }
.cdc-doc p { margin: 8px 0 0; }
.cdc-doc-brief { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: var(--card); }
.cdc-doc-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #666; margin-bottom: 18px;
}
@media (max-width: 560px) {
  .cdc-doc dl { grid-template-columns: 1fr; gap: 0 0; }
  .cdc-doc dt { margin-top: 6px; font-size: 12.5px; }
}

/* ── Impression → PDF ──────────────────────────────────────────────────────
   « Télécharger le PDF » remplit #cdcPrintRoot puis appelle window.print().
   On masque tout le reste par `visibility` (pas `display`) pour ne pas casser
   la mise en page des ancêtres. */
#cdcPrintRoot { display: none; }
@media print {
  html.is-printing body * { visibility: hidden !important; }
  html.is-printing #cdcPrintRoot,
  html.is-printing #cdcPrintRoot * { visibility: visible !important; }
  html.is-printing #cdcPrintRoot {
    display: block;
    position: absolute; left: 0; top: 0; width: 100%;
    padding: 0; color: #000; background: #fff;
  }
  html.is-printing #cdcPrintRoot section { break-inside: avoid; }
  html.is-printing #cdcPrintRoot .cdc-doc-brief { background: #f7f7f5; border-color: #ddd; }
  /* Le papier est blanc quel que soit le thème de l'écran : peindre la seule
     racine ne suffit pas, tout descendant qui lit un jeton garde la valeur du
     thème courant. Composé en sombre, le filet des titres devenait du blanc à
     7 % sur du blanc, et les libellés tombaient à 3,54:1. On neutralise les
     trois jetons lus par le document, comme le fait déjà .cdc-doc-brief. */
  html.is-printing #cdcPrintRoot h2 { border-bottom-color: #ddd; }
  html.is-printing #cdcPrintRoot dt,
  html.is-printing #cdcPrintRoot .cdc-doc-sub { color: #555; }
  html.is-printing #cdcPrintRoot .cdc-doc-meta { color: #666; }
  @page { margin: 16mm 14mm; }
}

/* ── `hidden` vs `display` d'auteur ────────────────────────────────────────
   Les boutons de navigation portent .btn-primary / .btn-secondary, dont le
   `display: inline-flex` bat la règle `[hidden] { display: none }` du
   navigateur : « Suivant → » restait donc affiché (et inerte) sur l'étape
   « Résultat », et « ← Précédent » sur la première. Même correctif que
   `.tile[hidden]` / `.kv-grid[hidden]` dans style.css. */
.cdc-nav [hidden],
.cdc-actions [hidden] { display: none !important; }

/* Même piège pour les blocs du parcours conditionnel (site ou application) :
   `.cdc-chips`, `.cdc-cards` et consorts posent un `display`, qui bat le
   `[hidden]` du navigateur. Sans cette règle, les questions du type non
   retenu resteraient à l'écran. */
#cdcForm [data-ptype][hidden] { display: none !important; }


/* ── Cibles tactiles de l'assistant (≥ 44 px sur téléphone) ────────────────
   Mesuré à 390 px : étapes 35 px, puces 34 px, boutons de navigation 35 px —
   tout juste trop petit pour un pouce, sur le parcours le plus long du site. */
@media (max-width: 760px) {
  .cdc-step { min-height: 44px; }
  .cdc-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .cdc-nav .btn-primary,
  .cdc-nav .btn-secondary { min-height: 44px; }
  /* Les trois sorties du parcours (envoyer, PDF, copier) étaient à 36 px,
     alors que ce sont les boutons pour lesquels on a rempli six étapes. */
  .cdc-actions .btn-primary,
  .cdc-actions .btn-secondary,
  .cdc-actions .btn-ghost { min-height: 44px; }
  /* « Voir mon document » : c'est la sortie du parcours pour qui ne veut pas
     tout remplir, elle ne peut pas être plus petite que « Suivant ». */
  .cdc-nav .btn-ghost { min-height: 44px; }
  /* Aucun champ sous 16 px : sinon iOS zoome au premier tap et le wizard
     reste agrandi pour les cinq étapes suivantes. */
  .cdc-field input, .cdc-field textarea, .cdc-field select { font-size: 16px; }

  /* ── La navigation colle en bas ────────────────────────────────────────
     Les étapes font 1300 à 2600 px de haut sur téléphone : « Suivant » vivait
     tout en bas, donc chaque étape se terminait par un long défilement à
     l'aveugle pour retrouver le bouton. Collé en bas de l'écran, il est
     toujours à portée de pouce et l'avancement reste évident. */
  .cdc-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 24px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    background: var(--bg);
    box-shadow: 0 -10px 20px -18px rgba(0, 0, 0, 0.5);
  }
  /* L'accroche sort de la barre collante : elle dirait sur deux lignes, en
     permanence, ce que le chapô de la page dit déjà à chaque étape (« toutes
     les questions sont facultatives ») — la barre doit rester une barre. */
  .cdc-nav-hint { display: none; }
  /* Sauf quand elle porte le compteur de réponses : une ligne courte, qui dit
     que ce qu'on vient de cocher a été retenu. C'est la seule récompense
     visible avant la dernière étape. */
  .cdc-nav-more { display: none; }
  /* `width: 100%` ne suffit pas sur un item flex : `flex-shrink` le laisse
     partager sa ligne avec le bouton voisin, et le compteur se retrouvait
     écrasé dans une centaine de pixels (mesuré). C'est la BASE qui doit
     valoir 100 %, sans rétrécissement. */
  .cdc-nav-hint.is-tally {
    display: block;
    order: 4;
    flex: 0 0 100%;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.4;
  }
  /* Trois rangées valent trois écarts : à 14 px chacun, la barre collante
     mangeait un quart d'un écran de 700 px. 8 px suffisent à séparer, et la
     bordure supérieure fait le reste du travail. */
  .cdc-nav { flex-wrap: wrap; gap: 8px; padding-top: 0; margin-top: 20px; }
  /* Trois boutons extensibles sur une barre de 320 px passaient à deux
     niveaux et mélangeaient le parcours (Précédent / Suivant) avec la sortie
     anticipée. Une ligne pour le parcours, une ligne pour la sortie. */
  .cdc-nav .btn-primary,
  .cdc-nav .btn-secondary { flex: 1 1 auto; justify-content: center; }
  #cdcPrev { order: 1; }
  #cdcNext { order: 2; }
  /* `order` seulement : le `flex: 0 0 100%` qu'on avait écrit ici était inerte
     (`.cdc-nav .btn-secondary` juste au-dessus est plus spécifique), et c'est
     tant mieux. Le retour à la ligne suffit : au-dessus de 400 px les trois
     boutons tiennent sur une ligne et la barre fait 83 px, en dessous la
     sortie prend la sienne et la barre fait 135 px. Forcer trois rangées
     partout aurait coûté 50 px de plus sur les écrans qui n'en avaient pas
     besoin. L'ordre, lui, compte : le parcours d'abord, la sortie ensuite. */
  .cdc-finish { order: 3; justify-content: center; }
}

/* ── Contexte tactile : le survol ne colle pas ────────────────────────────
   En fin de fichier, l'ordre tranche à spécificité égale. Chaque
   neutralisation exclut la classe d'état : sans le :not(), une puce qu'on
   vient de cocher garderait le survol et repasserait en gris sur son aplat
   sombre, c'est-à-dire illisible. */
@media (hover: none) {
  .cdc-step:not(.is-active):hover { color: var(--muted); border-color: var(--line); }
  .cdc-chip:not(.is-on):hover { color: var(--muted); border-color: var(--line); }
  .cdc-card:not(.is-on):hover { border-color: var(--line); box-shadow: none; }
  .cdc-palette:not(.is-on):hover { border-color: var(--line); }
  .cdc-font:not(.is-on):hover { border-color: var(--line); }
  .cdc-reset:hover { color: var(--muted-3); }
}