/* ═══════════════════════════════════════════════════════════════════════════
   CONSULTATION-2.0 — Tunnel de réservation d'une consultation.

   ══ POURQUOI UNE FEUILLE AUTONOME ══
   Le tunnel est le seul endroit du site public où l'on demande de l'argent. Il
   ne doit pas dépendre d'un CDN pour rester utilisable : la structure, les
   cartes, la frise et les boutons sont servis depuis notre domaine. Les
   utilitaires Tailwind du layout continuent d'habiller le reste de la page.

   ══ UNE ÉTAPE À LA FOIS ══
   L'ancien tunnel empilait cinq formulaires sur un écran et laissait le
   visiteur deviner lequel remplir, avec un bouton « Enregistrer » sous chacun.
   Une seule étape est désormais visible, et une seule action principale la
   valide. Cette feuille est écrite pour cette contrainte.

   Palette : celle du site public (cs-green / cs-gold), pas une seconde identité.
   ═════════════════════════════════════════════════════════════════════════ */

.cw {
  --cw-green-900: #0b3d2e;
  --cw-green-700: #14624a;
  --cw-green-600: #1a7a5c;
  --cw-green-50:  #eef7f3;
  --cw-gold:      #e9b949;
  --cw-gold-dark: #8a6410;
  --cw-sand:      #f7f4ec;

  --cw-ink:     #0f231c;
  --cw-body:    #3a4a44;
  --cw-muted:   #6d7f78;
  --cw-faint:   #97a6a0;
  --cw-line:    #e0e8e4;
  --cw-line-2:  #eff3f1;
  --cw-surface: #ffffff;

  --cw-danger:  #b42318;
  --cw-danger-bg: #fef3f2;
  --cw-ok:      #067647;
  --cw-ok-bg:   #ecfdf3;
  --cw-info:    #175cd3;
  --cw-info-bg: #eff8ff;

  --cw-radius:    16px;
  --cw-radius-sm: 11px;
  --cw-shadow:    0 1px 2px rgba(15, 35, 28, .05), 0 10px 30px -22px rgba(15, 35, 28, .5);

  color: var(--cw-body);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

.cw *, .cw *::before, .cw *::after { box-sizing: border-box; }
.cw img, .cw audio { max-width: 100%; }

.cw a:focus-visible, .cw button:focus-visible,
.cw input:focus-visible, .cw select:focus-visible, .cw textarea:focus-visible,
.cw [tabindex]:focus-visible {
  outline: 3px solid var(--cw-green-600);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .cw *, .cw *::before, .cw *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* Le contenu réservé aux lecteurs d'écran ne doit jamais s'afficher, même si
   le CDN d'utilitaires ne répond pas. */
.cw .cw-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══ `hidden` DOIT VOULOIR DIRE CACHÉ (§29/§30) ══
   Mesuré au navigateur sur cette page : un `<button class="cw-btn" hidden>`
   rendait `display: inline-flex` — donc VISIBLE. La raison tient à la cascade :
   la règle de l'agent utilisateur, `[hidden]{display:none}`, est de priorité
   INFÉRIEURE à n'importe quelle règle d'auteur ; `.cw-btn{display:inline-flex}`
   la couvre. En production, ce qui masquait le défaut n'était pas cette
   feuille mais la préflight de Tailwind, chargée depuis cdn.tailwindcss.com.
   Autrement dit, la capacité du tunnel à cacher un bouton dépendait d'un CDN
   tiers et de l'ordre d'insertion des feuilles.

   Conséquence concrète, constatée : à l'étape « Votre situation », le bouton
   « Supprimer » du message vocal s'affichait alors qu'aucun message n'était
   enregistré.

   La règle ci-dessous rend au mot `hidden` le sens que le code lui prête déjà
   partout. Le `!important` est ici à sa place : rien, dans une feuille
   d'apparence, ne doit pouvoir ré-afficher ce que le document déclare caché.
   Elle est restreinte au tunnel et ne change rien au reste du site. */
.cw [hidden] { display: none !important; }

/* ── Frise de progression ─────────────────────────────────────────────── */
.cw-steps { margin: 6px 0 22px; }
.cw-steps-bar {
  display: flex; gap: 6px; margin-bottom: 10px;
}
.cw-steps-bar span {
  flex: 1 1 0; height: 4px; border-radius: 999px; background: var(--cw-line);
}
.cw-steps-bar span.is-done { background: var(--cw-green-600); }
.cw-steps-bar span.is-current { background: var(--cw-gold); }
.cw-steps-now {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--cw-muted);
}
.cw-steps-now b { color: var(--cw-ink); font-size: 15px; font-weight: 800; }
.cw-steps-count { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Bureau : la frise nommée, sans surcharge. */
.cw-steps-list { display: none; }
@media (min-width: 720px) {
  .cw-steps-bar { display: none; }
  .cw-steps-list {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    padding: 0; margin: 0 0 6px; list-style: none;
  }
  .cw-steps-list li { display: flex; align-items: center; gap: 8px; }
  .cw-steps-list li + li::before {
    content: ""; width: 18px; height: 1px; background: var(--cw-line); flex: 0 0 18px;
  }
  .cw-step-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px 6px 7px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--cw-muted);
    background: transparent; border: 1px solid transparent; text-decoration: none;
  }
  .cw-step-chip i {
    width: 21px; height: 21px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--cw-line-2); color: var(--cw-muted);
    font-size: 11px; font-weight: 800; font-style: normal;
  }
  a.cw-step-chip:hover { background: var(--cw-green-50); color: var(--cw-green-700); }
  .cw-step-chip.is-done i { background: var(--cw-green-600); color: #fff; }
  .cw-step-chip.is-done { color: var(--cw-green-700); }
  .cw-step-chip.is-current {
    background: var(--cw-green-900); color: #fff; border-color: var(--cw-green-900);
  }
  .cw-step-chip.is-current i { background: var(--cw-gold); color: var(--cw-green-900); }
}

/* ── Titres ───────────────────────────────────────────────────────────── */
.cw-title {
  font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em;
  color: var(--cw-ink); margin: 0 0 6px; text-wrap: balance;
}
.cw-lede { font-size: 15px; color: var(--cw-muted); margin: 0 0 20px; max-width: 60ch; }
@media (min-width: 720px) { .cw-title { font-size: 28px; } }

/* ── Panneau ──────────────────────────────────────────────────────────── */
.cw-card {
  background: var(--cw-surface); border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius); box-shadow: var(--cw-shadow);
  padding: 18px; margin-bottom: 16px;
}
.cw-card h2 { font-size: 15px; font-weight: 800; color: var(--cw-ink); margin: 0 0 4px; }
.cw-card p.cw-hint { font-size: 13.5px; color: var(--cw-muted); margin: 0 0 14px; }

/* ── Choix en cartes (sujet, formule) ─────────────────────────────────── */
.cw-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .cw-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cw-choices > * { min-width: 0; }

.cw-choice { position: relative; display: block; }
.cw-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cw-choice-body {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 14px; border: 1.5px solid var(--cw-line); border-radius: var(--cw-radius-sm);
  background: var(--cw-surface); transition: border-color .15s ease, background .15s ease;
  min-height: 64px;
}
.cw-choice-body:hover { border-color: var(--cw-green-600); background: var(--cw-green-50); }
.cw-choice input:checked + .cw-choice-body {
  border-color: var(--cw-green-700); background: var(--cw-green-50);
  box-shadow: inset 0 0 0 1px var(--cw-green-700);
}
.cw-choice input:focus-visible + .cw-choice-body {
  outline: 3px solid var(--cw-green-600); outline-offset: 2px;
}
.cw-choice-mark {
  flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  border: 2px solid var(--cw-line); background: #fff; position: relative;
}
.cw-choice input:checked + .cw-choice-body .cw-choice-mark {
  border-color: var(--cw-green-700);
}
.cw-choice input:checked + .cw-choice-body .cw-choice-mark::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--cw-green-700);
}
.cw-choice-main { min-width: 0; flex: 1 1 auto; }
.cw-choice-title { font-size: 14.5px; font-weight: 700; color: var(--cw-ink); line-height: 1.35;
  overflow-wrap: anywhere; }
.cw-choice-sub { font-size: 12.5px; color: var(--cw-muted); margin-top: 2px; overflow-wrap: anywhere; }
.cw-choice-price {
  font-size: 17px; font-weight: 800; color: var(--cw-green-700);
  font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: 4px;
}
.cw-badge-pop {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--cw-gold); color: var(--cw-gold-dark);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  vertical-align: middle;
}

/* Groupes de sujets */
.cw-group { margin-bottom: 18px; }
.cw-group > h3 {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cw-faint); margin: 0 0 8px;
}

/* ── Champs ───────────────────────────────────────────────────────────── */
.cw-field { margin-bottom: 14px; }
.cw-field > label {
  display: block; font-size: 13px; font-weight: 700; color: var(--cw-ink); margin-bottom: 5px;
}
.cw-field .cw-help { font-size: 12.5px; color: var(--cw-muted); margin: 4px 0 0; }
.cw-input, .cw-select, .cw-textarea {
  width: 100%; min-height: 48px; padding: 12px 13px;
  border: 1.5px solid var(--cw-line); border-radius: var(--cw-radius-sm);
  background: #fff; color: var(--cw-ink); font-size: 15px; font-family: inherit;
  line-height: 1.5;
}
.cw-textarea { min-height: 132px; resize: vertical; }
.cw-input:focus, .cw-select:focus, .cw-textarea:focus { border-color: var(--cw-green-600); }
.cw-input::placeholder, .cw-textarea::placeholder { color: var(--cw-faint); }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.cw-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 20px;
}
.cw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 22px; border-radius: var(--cw-radius-sm);
  font-size: 15.5px; font-weight: 700; font-family: inherit; line-height: 1.2;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
}
.cw-btn--primary { background: var(--cw-green-700); color: #fff; flex: 1 1 auto; }
.cw-btn--primary:hover:not(:disabled) { background: var(--cw-green-900); }
.cw-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
.cw-btn--pay { background: var(--cw-gold); color: var(--cw-green-900); border-color: var(--cw-gold); }
.cw-btn--pay:hover:not(:disabled) { filter: brightness(.95); }
.cw-btn--ghost { background: #fff; color: var(--cw-green-700); border-color: var(--cw-line); }
.cw-btn--ghost:hover { background: var(--cw-green-50); border-color: var(--cw-green-600); }
.cw-btn--quiet {
  background: transparent; border-color: transparent; color: var(--cw-muted);
  font-weight: 600; min-height: 44px; padding: 10px 12px;
}
.cw-btn--quiet:hover { color: var(--cw-ink); }
.cw-btn--sm { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }
@media (min-width: 560px) { .cw-btn--primary { flex: 0 0 auto; min-width: 220px; } }

/* ── Bandeaux ─────────────────────────────────────────────────────────── */
.cw-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; border-radius: var(--cw-radius-sm);
  font-size: 14px; margin-bottom: 16px; border: 1px solid transparent;
  overflow-wrap: anywhere;
}
/* `display:flex` ci-dessus est une règle d'AUTEUR : elle l'emporte sur la règle
   `[hidden]{display:none}` de la feuille du navigateur, qui n'est pas
   spécifique. Un bandeau marqué `hidden` restait donc visible — piège déjà
   rencontré sur ce dépôt. On rétablit l'attribut ici, explicitement. */
.cw-note[hidden] { display: none !important; }
.cw-note b { font-weight: 700; }
.cw-note--err  { background: var(--cw-danger-bg); color: var(--cw-danger); border-color: #fecdca; }
.cw-note--ok   { background: var(--cw-ok-bg);     color: var(--cw-ok);     border-color: #abefc6; }
.cw-note--info { background: var(--cw-info-bg);   color: var(--cw-info);   border-color: #b2ddff; }
.cw-note--sand { background: var(--cw-sand);      color: var(--cw-body);   border-color: #e7dfc9; }
.cw-note-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Message vocal ────────────────────────────────────────────────────── */
.cw-voice {
  border: 1.5px dashed var(--cw-line); border-radius: var(--cw-radius-sm);
  padding: 16px; background: var(--cw-sand);
}
.cw-voice-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cw-rec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 12px 18px; border-radius: 999px;
  background: var(--cw-green-700); color: #fff; border: 0; cursor: pointer;
  font-size: 14.5px; font-weight: 700; font-family: inherit;
}
.cw-rec-btn:hover { background: var(--cw-green-900); }
.cw-rec-btn.is-recording { background: var(--cw-danger); }
.cw-rec-dot {
  width: 11px; height: 11px; border-radius: 50%; background: #fff; flex: 0 0 11px;
}
.cw-rec-btn.is-recording .cw-rec-dot { animation: cw-pulse 1.2s ease-in-out infinite; }
@keyframes cw-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.cw-rec-timer {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 17px;
  color: var(--cw-ink);
}
.cw-voice audio { width: 100%; margin-top: 12px; }
.cw-voice .cw-help { margin-top: 10px; }

/* ── Documents ────────────────────────────────────────────────────────── */
.cw-drop {
  border: 1.5px dashed var(--cw-line); border-radius: var(--cw-radius-sm);
  padding: 18px; text-align: center; background: var(--cw-sand);
}
.cw-drop.is-over { border-color: var(--cw-green-600); background: var(--cw-green-50); }
.cw-files { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cw-file {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border: 1px solid var(--cw-line); border-radius: var(--cw-radius-sm);
  background: #fff; font-size: 13.5px;
}
.cw-file-name { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; color: var(--cw-ink); font-weight: 600; }
.cw-file-size { color: var(--cw-muted); font-size: 12.5px; white-space: nowrap; }
.cw-file-del {
  border: 0; background: transparent; color: var(--cw-muted); cursor: pointer;
  min-width: 44px; min-height: 44px; font-size: 17px; line-height: 1; font-family: inherit;
}
.cw-file-del:hover { color: var(--cw-danger); }

/* PLATFORM-DOCUMENT-PREVIEW-01 — « Voir » : relire une pièce avant de valider. */
.cw-file-see {
  border: 1px solid var(--cw-line); border-radius: 8px; background: #fff;
  color: var(--cw-green-600); font: inherit; font-size: 13px; font-weight: 600;
  min-height: 34px; padding: 0 12px; cursor: pointer;
}
.cw-file-see:hover { background: #f0fdf4; }
.cw-file-see[hidden] { display: none; }
.cw-file.is-uploading { opacity: .65; }
.cw-progress { height: 3px; border-radius: 999px; background: var(--cw-line); overflow: hidden; flex: 0 0 60px; }
.cw-progress i { display: block; height: 100%; width: 0; background: var(--cw-green-600); transition: width .2s ease; }

/* ── Créneaux ─────────────────────────────────────────────────────────── */
.cw-days {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.cw-day {
  flex: 0 0 auto; scroll-snap-align: start;
  min-width: 66px; padding: 9px 10px; border-radius: var(--cw-radius-sm);
  border: 1.5px solid var(--cw-line); background: #fff; cursor: pointer;
  text-align: center; font-family: inherit; color: var(--cw-body);
  display: flex; flex-direction: column; gap: 1px; min-height: 62px;
  justify-content: center;
}
.cw-day small { font-size: 11px; color: var(--cw-muted); text-transform: capitalize; }
.cw-day b { font-size: 17px; font-weight: 800; color: var(--cw-ink); line-height: 1.1; }
.cw-day em { font-size: 10.5px; font-style: normal; color: var(--cw-faint); }
.cw-day:hover:not(:disabled) { border-color: var(--cw-green-600); }
.cw-day.is-active { background: var(--cw-green-900); border-color: var(--cw-green-900); }
.cw-day.is-active small, .cw-day.is-active em { color: #b9d8cc; }
.cw-day.is-active b { color: #fff; }
.cw-day:disabled { opacity: .4; cursor: not-allowed; }
.cw-day.has-slots small::after { content: " ●"; color: var(--cw-green-600); font-size: 8px; }

.cw-period { margin-top: 16px; }
.cw-period > h3 {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--cw-faint); margin: 0 0 8px;
}
.cw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cw-slot {
  min-height: 46px; padding: 11px 8px; border-radius: var(--cw-radius-sm);
  border: 1.5px solid var(--cw-line); background: #fff; cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--cw-ink); font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.cw-slot:hover { border-color: var(--cw-green-600); background: var(--cw-green-50); }
.cw-slot.is-active { background: var(--cw-green-700); border-color: var(--cw-green-700); color: #fff; }
.cw-slot small { display: block; font-size: 10.5px; font-weight: 500; color: var(--cw-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-slot.is-active small { color: #cbe6d9; }

.cw-tz {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--cw-muted); margin-top: 14px;
  padding: 11px 13px; border-radius: var(--cw-radius-sm); background: var(--cw-sand);
}
.cw-tz select { min-height: 40px; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--cw-line); border-radius: 8px; background: #fff; font-family: inherit; }

/* ── Récapitulatif ────────────────────────────────────────────────────── */
.cw-recap { display: grid; gap: 2px; }
.cw-recap-row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--cw-line-2);
}
.cw-recap-row:last-child { border-bottom: 0; }
.cw-recap-row dt { flex: 0 0 auto; font-size: 13.5px; color: var(--cw-muted); min-width: 108px; }
.cw-recap-row dd { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14.5px;
  font-weight: 600; color: var(--cw-ink); text-align: right; overflow-wrap: anywhere; }
.cw-total {
  display: flex; align-items: baseline; gap: 12px; margin-top: 6px;
  padding: 15px 0 4px; border-top: 2px solid var(--cw-line);
}
.cw-total dt { font-size: 15px; font-weight: 700; color: var(--cw-ink); }
.cw-total dd { margin: 0 0 0 auto; font-size: 23px; font-weight: 800; color: var(--cw-green-700);
  font-variant-numeric: tabular-nums; }

/* ── Confirmation ─────────────────────────────────────────────────────── */
.cw-done { text-align: center; padding: 8px 0 4px; }
.cw-done-icon {
  width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cw-ok-bg); color: var(--cw-ok); font-size: 30px;
}
.cw-done h1 { font-size: 25px; font-weight: 800; color: var(--cw-ink); margin: 0 0 8px; }
.cw-done > p { color: var(--cw-muted); margin: 0 auto 22px; max-width: 46ch; }
.cw-done-actions { display: grid; gap: 10px; max-width: 380px; margin: 22px auto 0; }
@media (min-width: 640px) {
  /* minmax(0, 1fr) et non 1fr : « 1fr » vaut minmax(auto, 1fr), et une piste
     « auto » refuse de descendre sous la largeur de son contenu — un libellé
     long ferait alors déborder la page au lieu de passer à la ligne. */
  .cw-done-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; }
  .cw-done-actions .cw-span2 { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BARRE D'ACTIONS COLLANTE — le raccord entre le cadre partagé et ce tunnel
   ══════════════════════════════════════════════════════════════════════════
   La mécanique du cadre (`.wz-head`, `.wz-foot`, `.wz-sum`, la réserve
   d'encoche, le décalage de la bulle d'assistance) vit dans
   `/assets/css/public_wizard.css`, partagée avec /demande. Ne restent ici que
   les quelques règles qui font se rencontrer ce cadre et les boutons `.cw-*`.

   Le fond de la barre reprend celui du tunnel : sur cette page le contenu
   passe sous elle, et un fond translucide laisserait lire deux textes
   superposés au moment précis où l'on demande de confirmer un paiement. */
.cw .wz-head,
.cw .wz-foot { background: var(--cw-bg, #fff); }
.cw .wz-head { border-bottom-color: var(--cw-line); margin-bottom: 18px; }
.cw .wz-foot { border-top-color: var(--cw-line); }
.cw .wz-head .cw-steps { margin: 0; }

/* Le bouton principal ne s'étire pas ici : la barre le place à droite, en
   face du résumé. `.cw-btn--primary` porte `flex: 1 1 auto` pour l'ancien
   bloc d'actions pleine largeur ; dans la barre, il reprend sa taille. */
.cw .wz-foot__act .cw-btn { flex: 0 0 auto; min-height: 46px; padding: 11px 20px; }

/* Le bouton dit s'il est utilisable — sans rougir avant toute tentative. */
.cw .cw-btn[disabled],
.cw .cw-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: saturate(.45); }

/* État de traitement (§23) : le libellé change, la largeur ne saute pas. */
.cw .cw-btn.is-busy { pointer-events: none; opacity: .75; }

@media (max-width: 640px) {
  /* §18 — La commande occupe la ligne ; « Retour » reste présent mais discret,
     réduit à sa flèche pour ne pas voler la place au geste principal (§17). */
  .cw .wz-foot__act .cw-btn { min-height: 44px; }
  .cw .wz-foot__act #cw-next { flex: 1 1 auto; justify-content: center; }
  .cw .wz-foot__act .cw-foot-back { flex: 0 0 auto; padding: 11px 14px; }
  .cw .wz-foot__act .cw-back-word { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* La frise compacte suffit sur téléphone ; inutile de figer 90 px d'en-tête. */
  .cw .wz-head { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .cw .cw-choice-body, .cw .cw-btn, .cw .cw-progress i { transition: none; }
}