/* [ORKYVA-ONLINE-WITHDRAWAL-01B] Rétractation en ligne — L221-21 / D221-5.
 * [RETRACTATION-UX-THEME-HEADER-AND-FLOW-FIX-01 2026-07-31] Refonte DA + thème sombre.
 *
 * Aucune ressource externe. Contrastes AA vérifiés dans LES DEUX thèmes.
 * Aucun repère uniquement coloré (états doublés par forme, icône ou libellé).
 *
 * ⚠️ PORTÉE : ce fichier n'est chargé que par /retractation et
 *    /withdrawal-submit.php. Tous les sélecteurs sont préfixés `.tu-wd-` :
 *    aucune règle ne peut atteindre une autre page.
 * ⚠️ THÈME : les jetons sombres sont déclarés sur `body.dark-mode` (convention
 *    canonique du site, cf. js/csp/tu-body-theme-sync.js) ET sur `html.dark`
 *    en filet de sécurité — si la synchro body échouait, la page resterait
 *    lisible au lieu de rendre du texte sombre sur fond sombre.
 */

/* ------------------------------------------------------------------ jetons */

.tu-wd-main {
  --wd-canvas:        #F3EFE7;   /* canevas beige tropical canonique du site */
  --wd-surface:       #FFFFFF;
  --wd-surface-2:     #F8F5EF;   /* sable : encadrés secondaires */
  --wd-surface-3:     #EDF4F1;   /* lagon très clair : citation, étape active */

  --wd-ink:           #10201D;   /* titres */
  --wd-ink-soft:      #33443F;   /* corps */
  --wd-muted:         #55655F;   /* aides, légendes — 6.0:1 sur sable */

  --wd-line:          #E3DCCF;
  --wd-line-strong:   #C6BCA9;
  --wd-field-line:    #A9B8B2;

  --wd-green:         #1F4A42;   /* vert profond Orkyva — couleur fonctionnelle */
  --wd-green-hover:   #143630;
  --wd-green-ink:     #1A5E4E;   /* vert texte, AA sur surfaces claires */
  --wd-lagon:         #78A097;   /* accent lagon canonique (footer) */
  --wd-lagon-ink:     #3F6F63;
  --wd-on-green:      #FFFFFF;

  --wd-danger:        #96271A;
  --wd-danger-ink:    #7E2115;
  --wd-danger-surface:#FDF2F0;
  --wd-ok:            #1A6B45;

  --wd-focus:         #0F3B34;
  --wd-focus-halo:    rgba(120, 160, 151, 0.45);

  --wd-radius:        18px;
  --wd-radius-sm:     12px;
  --wd-shadow:        0 1px 2px rgba(16, 32, 29, .05), 0 18px 40px -24px rgba(16, 32, 29, .35);
  --wd-shadow-sm:     0 1px 2px rgba(16, 32, 29, .06);
}

body.dark-mode .tu-wd-main,
html.dark .tu-wd-main,
html[data-tu-theme="dark"] .tu-wd-main {
  --wd-canvas:        #0A0A0A;
  --wd-surface:       #161A19;   /* carte sombre légèrement verdie */
  --wd-surface-2:     #12211D;
  --wd-surface-3:     #16302A;

  --wd-ink:           #F2F6F5;
  --wd-ink-soft:      #C9D6D2;   /* 11.4:1 sur #161A19 */
  --wd-muted:         #A3B2AE;   /* 7.4:1 sur #161A19 */

  --wd-line:          #2B3634;
  --wd-line-strong:   #45544F;
  --wd-field-line:    #566762;

  --wd-green:         #1E8449;   /* --primary-dark canonique du site en sombre */
  --wd-green-hover:   #23A05A;
  --wd-green-ink:     #4ADE80;   /* --tu-accent-text sombre canonique */
  --wd-lagon:         #8FB8AE;
  --wd-lagon-ink:     #9DC7BC;
  --wd-on-green:      #FFFFFF;

  --wd-danger:        #FF9C8C;
  --wd-danger-ink:    #FFB4A6;
  --wd-danger-surface:#2A1512;
  --wd-ok:            #6EE7A8;

  --wd-focus:         #8FE3B4;
  --wd-focus-halo:    rgba(74, 222, 128, 0.35);

  --wd-shadow:        0 1px 2px rgba(0, 0, 0, .5), 0 18px 44px -24px rgba(0, 0, 0, .9);
  --wd-shadow-sm:     0 1px 2px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------- structure */

/* ⚠️ `[hidden]` ne vaut que `display:none` par la feuille de l'agent : TOUTE
   règle `display:` de ce fichier le neutralise. Mesuré : `.tu-wd-err` en
   `display:flex` affichait son pictogramme « ⚠ » sous CHAQUE champ, même sans
   erreur. On réaffirme la sémantique de `hidden` pour toute la page. */
.tu-wd-main [hidden] { display: none !important; }

.tu-wd-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 20px 72px;
  box-sizing: border-box;
  color: var(--wd-ink-soft);
  font-family: var(--font-main, 'Poppins', 'Segoe UI', system-ui, sans-serif);
}

.tu-wd-breadcrumb {
  font-size: .82rem;
  letter-spacing: .01em;
  margin: 6px 0 20px;
  color: var(--wd-muted);
}
.tu-wd-breadcrumb a {
  color: var(--wd-green-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tu-wd-breadcrumb a:hover { color: var(--wd-lagon-ink); }

/* En-tête : bandeau identitaire, pas un simple titre nu. */
.tu-wd-hero {
  position: relative;
  background: var(--wd-surface);
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  padding: 30px 30px 28px;
  margin: 0 0 26px;
  box-shadow: var(--wd-shadow);
  overflow: hidden;
}
/* Filet lagon supérieur : accent visuel Orkyva, purement décoratif. */
.tu-wd-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wd-green) 0%, var(--wd-lagon) 55%, var(--wd-green) 100%);
}
.tu-wd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wd-lagon-ink);
  background: var(--wd-surface-3);
  border: 1px solid var(--wd-line);
  border-radius: 999px;
  padding: 6px 13px;
  margin: 0 0 16px;
}
.tu-wd-eyebrow i { font-size: .8em; }

.tu-wd-title {
  font-family: var(--font-heading, 'Inter', 'Poppins', system-ui, sans-serif);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.45rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--wd-ink);
}

.tu-wd-intro {
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 12px;
  color: var(--wd-ink-soft);
  max-width: 62ch;
}
.tu-wd-intro:last-child { margin-bottom: 0; }
.tu-wd-intro strong { color: var(--wd-ink); font-weight: 700; }

/* ------------------------------------------------------------ progression */

.tu-wd-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  counter-reset: none;
}
.tu-wd-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 4px 6px 0;
  text-align: center;
  font-size: .86rem;
  line-height: 1.3;
  color: var(--wd-muted);
}
/* Connecteur : trait entre les pastilles, jamais porteur d'information seule. */
.tu-wd-step::before,
.tu-wd-step::after {
  content: "";
  position: absolute;
  top: 21px;
  height: 2px;
  background: var(--wd-line-strong);
  z-index: 0;
}
.tu-wd-step::before { left: 0; right: 50%; margin-right: 24px; }
.tu-wd-step::after  { left: 50%; right: 0; margin-left: 24px; }
.tu-wd-step:first-child::before,
.tu-wd-step:last-child::after { display: none; }

.tu-wd-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--wd-surface);
  border: 2px solid var(--wd-line-strong);
  color: var(--wd-muted);
  font-weight: 700;
  font-size: .98rem;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.tu-wd-step__label { display: block; font-weight: 500; }

/* État : à venir — valeur par défaut ci-dessus. */

/* État : active — pastille pleine vert profond + libellé renforcé + halo lagon. */
.tu-wd-step.is-current { color: var(--wd-ink); }
.tu-wd-step.is-current .tu-wd-step__num {
  background: var(--wd-green);
  border-color: var(--wd-green);
  color: var(--wd-on-green);
  box-shadow: 0 0 0 5px var(--wd-focus-halo);
  transform: scale(1.04);
}
.tu-wd-step.is-current .tu-wd-step__label { font-weight: 700; }

/* État : terminée — pastille lagon + coche (repère non chromatique). */
.tu-wd-step.is-done { color: var(--wd-ink-soft); }
.tu-wd-step.is-done .tu-wd-step__num {
  background: var(--wd-lagon);
  border-color: var(--wd-lagon);
  color: #0B2620;
}
.tu-wd-step.is-done .tu-wd-step__num::after {
  content: "\2713";              /* ✓ — état terminé lisible sans couleur */
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
.tu-wd-step.is-done .tu-wd-step__num .tu-wd-step__digit { display: none; }
.tu-wd-step.is-done::before,
.tu-wd-step.is-current::before { background: var(--wd-lagon); }

/* ------------------------------------------------------------------ cartes */

.tu-wd-panel {
  background: var(--wd-surface);
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  box-shadow: var(--wd-shadow);
  padding: 28px 30px 30px;
  margin: 0 0 22px;
}
.tu-wd-panel h2 {
  font-family: var(--font-heading, 'Inter', 'Poppins', system-ui, sans-serif);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  padding: 0 0 14px;
  color: var(--wd-ink);
  border-bottom: 1px solid var(--wd-line);
}
.tu-wd-panel h2 + .tu-wd-intro { margin-top: 16px; }
.tu-wd-panel > .tu-wd-field:first-of-type { margin-top: 20px; }

/* ------------------------------------------------------------------ champs */

.tu-wd-field { margin: 0 0 18px; }
.tu-wd-field label {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--wd-ink);
}
.tu-wd-field input[type=text],
.tu-wd-field input[type=email],
.tu-wd-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--wd-ink);
  background: var(--wd-surface);
  border: 1.5px solid var(--wd-field-line);
  border-radius: var(--wd-radius-sm);
  box-shadow: var(--wd-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.dark-mode .tu-wd-field input[type=text],
body.dark-mode .tu-wd-field input[type=email],
body.dark-mode .tu-wd-field textarea,
html.dark .tu-wd-field input[type=text],
html.dark .tu-wd-field input[type=email],
html.dark .tu-wd-field textarea {
  /* Champ SOMBRE natif : jamais une zone blanche collée depuis le mode clair. */
  background: #0E1413;
  color: var(--wd-ink);
}
.tu-wd-field input::placeholder,
.tu-wd-field textarea::placeholder { color: var(--wd-muted); opacity: 1; }

.tu-wd-field input:hover:not(:disabled),
.tu-wd-field textarea:hover:not(:disabled) { border-color: var(--wd-lagon); }

.tu-wd-field input:focus,
.tu-wd-field textarea:focus {
  outline: 2px solid var(--wd-focus);
  outline-offset: 1px;
  border-color: var(--wd-focus);
  box-shadow: 0 0 0 4px var(--wd-focus-halo);
}
.tu-wd-field textarea { resize: vertical; min-height: 92px; max-height: 60vh; }

.tu-wd-field--check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--wd-surface-2);
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius-sm);
  padding: 13px 15px;
}
.tu-wd-field--check input {
  margin: 1px 0 0;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  accent-color: var(--wd-green);
  cursor: pointer;
}
.tu-wd-field--check input:focus-visible {
  outline: 2px solid var(--wd-focus);
  outline-offset: 2px;
}
.tu-wd-field--check label {
  font-weight: 500;
  margin: 0;
  color: var(--wd-ink-soft);
  cursor: pointer;
}

.tu-wd-req { color: var(--wd-danger); font-weight: 700; margin-left: 2px; }
.tu-wd-optional { font-weight: 400; color: var(--wd-muted); }
.tu-wd-help { font-size: .84rem; line-height: 1.5; color: var(--wd-muted); margin: 6px 0 0; }

.tu-wd-err {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .86rem;
  color: var(--wd-danger-ink);
  margin: 7px 0 0;
  font-weight: 600;
}
/* Repère NON chromatique de l'erreur (exigence : pas uniquement la couleur). */
.tu-wd-err::before { content: "\26A0"; font-weight: 700; line-height: 1.35; }
.tu-wd-field.has-error input,
.tu-wd-field.has-error textarea {
  border-color: var(--wd-danger);
  border-width: 2px;
  background: var(--wd-danger-surface);
}
.tu-wd-field.has-error label { color: var(--wd-danger-ink); }
/* État valide : liseré lagon discret, jamais bloquant. */
.tu-wd-field.is-valid input,
.tu-wd-field.is-valid textarea { border-color: var(--wd-lagon); }

.tu-wd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------- bloc d'erreurs */

.tu-wd-errors {
  border: 1.5px solid var(--wd-danger);
  border-left-width: 5px;
  background: var(--wd-danger-surface);
  border-radius: var(--wd-radius-sm);
  padding: 15px 18px;
  margin: 0 0 22px;
  color: var(--wd-danger-ink);
  box-shadow: var(--wd-shadow-sm);
}
.tu-wd-errors__title { margin: 0 0 9px; font-weight: 700; }
.tu-wd-errors ul { margin: 0; padding-left: 20px; }
.tu-wd-errors li { margin: 4px 0; }
.tu-wd-errors a { color: var(--wd-danger-ink); text-decoration: underline; text-underline-offset: 2px; }
.tu-wd-errors a:hover { color: var(--wd-danger); }
.tu-wd-errors:focus-visible { outline: 2px solid var(--wd-danger); outline-offset: 3px; }

/* -------------------------------------------------------------- récapitulatif */

.tu-wd-recap {
  margin: 20px 0 22px;
  padding: 6px 20px 18px;
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius-sm);
  background: var(--wd-surface-2);
}
.tu-wd-recap dt {
  font-weight: 600;
  color: var(--wd-muted);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 16px 0 3px;
}
.tu-wd-recap dd {
  margin: 0;
  padding: 0 0 12px;
  color: var(--wd-ink);
  font-size: 1rem;
  font-weight: 500;
  word-break: break-word;
  border-bottom: 1px dashed var(--wd-line);
}
.tu-wd-recap dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

.tu-wd-statement {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--wd-line);
  border-left: 5px solid var(--wd-green);
  background: var(--wd-surface-3);
  color: var(--wd-ink);
  font-size: 1.02rem;
  line-height: 1.55;
  font-style: normal;
  border-radius: 0 var(--wd-radius-sm) var(--wd-radius-sm) 0;
}

/* Avertissement de transmission : hiérarchisé, jamais confondu avec une erreur. */
.tu-wd-notice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--wd-lagon);
  border-radius: var(--wd-radius-sm);
  background: var(--wd-surface-3);
  color: var(--wd-ink);
  font-size: .95rem;
  line-height: 1.55;
}
.tu-wd-notice i { color: var(--wd-green-ink); margin-top: 2px; flex: 0 0 auto; }

/* ----------------------------------------------------------------- boutons */

.tu-wd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--wd-line);
}
.tu-wd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  min-height: 48px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .005em;
  border-radius: var(--wd-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .18s ease, box-shadow .18s ease;
}
.tu-wd-btn:focus-visible {
  outline: 3px solid var(--wd-focus);
  outline-offset: 3px;
}
.tu-wd-btn--primary {
  background: var(--wd-green);
  color: var(--wd-on-green);
  border-color: var(--wd-green);
  box-shadow: 0 10px 22px -14px rgba(31, 74, 66, .9);
}
.tu-wd-btn--primary:hover:not(:disabled) {
  background: var(--wd-green-hover);
  border-color: var(--wd-green-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -14px rgba(31, 74, 66, .95);
}
.tu-wd-btn--primary:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}
.tu-wd-btn--ghost {
  background: transparent;
  color: var(--wd-green-ink);
  border-color: var(--wd-line-strong);
}
.tu-wd-btn--ghost:hover:not(:disabled) {
  background: var(--wd-surface-3);
  border-color: var(--wd-lagon);
  color: var(--wd-green-ink);
}
.tu-wd-btn--ghost:active:not(:disabled) { transform: translateY(1px); }

.tu-wd-btn:disabled,
.tu-wd-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .78; transform: none; box-shadow: none; }

/* État de chargement : texte remplacé + roue, jamais un bouton muet. */
.tu-wd-btn__spinner { display: none; width: 17px; height: 17px; flex: 0 0 auto; }
.tu-wd-btn.is-loading .tu-wd-btn__spinner { display: inline-block; }
.tu-wd-btn.is-loading { pointer-events: none; }
.tu-wd-btn__spinner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: currentColor;
  animation: tu-wd-spin .7s linear infinite;
  box-sizing: border-box;
}
@keyframes tu-wd-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ reçu */

.tu-wd-receipt {
  background: var(--wd-surface);
  border: 1px solid var(--wd-line);
  border-top: 4px solid var(--wd-green);
  border-radius: var(--wd-radius);
  box-shadow: var(--wd-shadow);
  padding: 26px 30px 22px;
  margin: 0 0 22px;
}
.tu-wd-receipt__lead {
  margin: 0 0 18px;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--wd-ink-soft);
}
.tu-wd-receipt h2 {
  font-family: var(--font-heading, 'Inter', 'Poppins', system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 22px 0 12px;
  color: var(--wd-ink);
}
.tu-wd-ack-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--wd-ink-soft);
  border-top: 1px solid var(--wd-line);
  padding: 16px 0 4px;
  margin: 16px 0 0;
}
.tu-wd-ack-status::before {
  content: "\2709";              /* enveloppe : repère non chromatique */
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--wd-green-ink);
  flex: 0 0 auto;
}
.tu-wd-ack-status[data-status="failed"],
.tu-wd-ack-status[data-status="pending"],
.tu-wd-ack-status[data-status="attempted"] { color: var(--wd-danger-ink); }
.tu-wd-ack-status[data-status="failed"]::before,
.tu-wd-ack-status[data-status="pending"]::before,
.tu-wd-ack-status[data-status="attempted"]::before {
  content: "\26A0";
  color: var(--wd-danger);
}
.tu-wd-ack-status strong { color: var(--wd-ink); }

/* ----------------------------------------------------------- encadré légal */

.tu-wd-aside {
  position: relative;
  margin: 30px 0 0;
  padding: 20px 22px 20px 24px;
  border: 1px solid var(--wd-line);
  border-left: 5px solid var(--wd-lagon);
  border-radius: var(--wd-radius-sm);
  background: var(--wd-surface-2);
  box-shadow: var(--wd-shadow-sm);
}
.tu-wd-aside h2 {
  font-family: var(--font-heading, 'Inter', 'Poppins', system-ui, sans-serif);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--wd-ink);
  display: flex;
  align-items: center;
  gap: 9px;
}
.tu-wd-aside h2 i { color: var(--wd-green-ink); font-size: .92em; }
.tu-wd-aside p { margin: 0; font-size: .93rem; line-height: 1.68; color: var(--wd-ink-soft); }
.tu-wd-aside a {
  color: var(--wd-green-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.tu-wd-aside a:hover { color: var(--wd-lagon-ink); }

/* ======================================================================
   RÉAFFIRMATION SOMBRE — spécificité, pas cosmétique
   ----------------------------------------------------------------------
   ⚠️⚠️ css/style.css applique EN MODE SOMBRE trois règles globales très
   larges qui écrasent la couleur de tous les p / span / a de la page :
       body.dark-mode p,
       body.dark-mode span:not(.cart-badge):not(.product-badge) { color: var(--text-secondary) }   (0,3,1)
       body.dark-mode a { color: #ffffff }                                                          (0,1,1)
   Mesuré : sans ce bloc, le LIBELLÉ du bouton principal (un <span>) rendait
   en #B8B8B8 sur le vert (2.38:1), la coche d'étape terminée en #B8B8B8 sur
   lagon (1.10:1), et le message d'erreur perdait sa couleur d'alerte.
   Ces règles de style.css sont partagées par TOUT le site : on ne les modifie
   pas. On rétablit ici nos jetons avec une spécificité suffisante, et
   uniquement sous .tu-wd-main — aucune autre page ne peut être atteinte.
   ====================================================================== */

body.dark-mode .tu-wd-main .tu-wd-intro,
body.dark-mode .tu-wd-main .tu-wd-receipt__lead,
body.dark-mode .tu-wd-main .tu-wd-aside p { color: var(--wd-ink-soft); }

body.dark-mode .tu-wd-main .tu-wd-intro strong,
body.dark-mode .tu-wd-main .tu-wd-notice,
body.dark-mode .tu-wd-main .tu-wd-notice span { color: var(--wd-ink); }

body.dark-mode .tu-wd-main .tu-wd-eyebrow { color: var(--wd-lagon-ink); }
body.dark-mode .tu-wd-main .tu-wd-help,
body.dark-mode .tu-wd-main .tu-wd-optional { color: var(--wd-muted); }
body.dark-mode .tu-wd-main .tu-wd-req { color: var(--wd-danger); }

body.dark-mode .tu-wd-main .tu-wd-err,
body.dark-mode .tu-wd-main .tu-wd-errors,
body.dark-mode .tu-wd-main .tu-wd-errors__title,
body.dark-mode .tu-wd-main .tu-wd-errors a,
body.dark-mode .tu-wd-main .tu-wd-field.has-error label { color: var(--wd-danger-ink); }

body.dark-mode .tu-wd-main .tu-wd-breadcrumb a,
body.dark-mode .tu-wd-main .tu-wd-aside a { color: var(--wd-green-ink); }
body.dark-mode .tu-wd-main .tu-wd-breadcrumb a:hover,
body.dark-mode .tu-wd-main .tu-wd-aside a:hover { color: var(--wd-lagon-ink); }
body.dark-mode .tu-wd-main .tu-wd-aside h2 i { color: var(--wd-green-ink); }
body.dark-mode .tu-wd-main .tu-wd-notice i { color: var(--wd-green-ink); }

/* Libellés de boutons : le texte visible est un <span> enfant. */
body.dark-mode .tu-wd-main .tu-wd-btn--primary,
body.dark-mode .tu-wd-main .tu-wd-btn--primary .tu-wd-btn__text { color: var(--wd-on-green); }
body.dark-mode .tu-wd-main .tu-wd-btn--ghost,
body.dark-mode .tu-wd-main .tu-wd-btn--ghost .tu-wd-btn__text { color: var(--wd-green-ink); }

/* Progression : les trois états doivent rester distincts en sombre. */
body.dark-mode .tu-wd-main .tu-wd-step .tu-wd-step__label { color: var(--wd-muted); }
body.dark-mode .tu-wd-main .tu-wd-step .tu-wd-step__num { color: var(--wd-muted); }
body.dark-mode .tu-wd-main .tu-wd-step.is-current .tu-wd-step__label { color: var(--wd-ink); }
body.dark-mode .tu-wd-main .tu-wd-step.is-current .tu-wd-step__num { color: var(--wd-on-green); }
body.dark-mode .tu-wd-main .tu-wd-step.is-done .tu-wd-step__label { color: var(--wd-ink-soft); }
body.dark-mode .tu-wd-main .tu-wd-step.is-done .tu-wd-step__num { color: #06211A; }
/* Le chiffre est un <span> IMBRIQUÉ : `color:inherit` seul (0,1,0) perd contre
   la règle globale (0,3,1). On force l'héritage depuis la pastille. */
body.dark-mode .tu-wd-main .tu-wd-step .tu-wd-step__digit { color: inherit; }

body.dark-mode .tu-wd-main .tu-wd-ack-status { color: var(--wd-ink-soft); }
body.dark-mode .tu-wd-main .tu-wd-ack-status strong { color: var(--wd-ink); }
body.dark-mode .tu-wd-main .tu-wd-ack-status[data-status="failed"],
body.dark-mode .tu-wd-main .tu-wd-ack-status[data-status="pending"],
body.dark-mode .tu-wd-main .tu-wd-ack-status[data-status="attempted"] { color: var(--wd-danger-ink); }

/* Le libellé du bouton hérite du bouton dans les deux thèmes : en clair,
   aucune règle globale n'interfère, mais on le rend explicite. */
.tu-wd-btn .tu-wd-btn__text { color: inherit; }
.tu-wd-step__label,
.tu-wd-step__digit { color: inherit; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .tu-wd-main { padding: 16px 16px 60px; }
  .tu-wd-hero { padding: 26px 22px 24px; }
  .tu-wd-panel { padding: 24px 20px 26px; }
  .tu-wd-receipt { padding: 22px 20px 20px; }
}

@media (max-width: 560px) {
  .tu-wd-main { padding: 12px 13px 52px; }
  .tu-wd-hero { padding: 22px 17px 20px; border-radius: 15px; }
  .tu-wd-panel,
  .tu-wd-receipt { padding: 20px 16px 22px; border-radius: 15px; }
  .tu-wd-aside { padding: 17px 15px 17px 17px; }

  /* Progression compacte : pastilles alignées, libellés SOUS la pastille et
     jamais tronqués (pas de nowrap, pas d'ellipse). */
  .tu-wd-steps { gap: 0; margin-bottom: 22px; }
  .tu-wd-step { font-size: .74rem; padding: 2px 2px 0; gap: 7px; }
  .tu-wd-step__num { width: 36px; height: 36px; font-size: .9rem; border-width: 2px; }
  .tu-wd-step::before, .tu-wd-step::after { top: 18px; }
  .tu-wd-step::before { margin-right: 20px; }
  .tu-wd-step::after { margin-left: 20px; }
  .tu-wd-step.is-current .tu-wd-step__num { box-shadow: 0 0 0 4px var(--wd-focus-halo); }

  .tu-wd-actions { flex-direction: column-reverse; }
  .tu-wd-btn { width: 100%; box-sizing: border-box; }
  .tu-wd-recap { padding: 4px 15px 15px; }
  .tu-wd-eyebrow { font-size: .68rem; padding: 5px 11px; }
}

@media (max-width: 360px) {
  .tu-wd-step { font-size: .69rem; }
  .tu-wd-step__num { width: 32px; height: 32px; font-size: .84rem; }
  .tu-wd-step::before, .tu-wd-step::after { top: 16px; }
  .tu-wd-step::before { margin-right: 17px; }
  .tu-wd-step::after { margin-left: 17px; }
}

/* ------------------------------------------------------- mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  .tu-wd-main *,
  .tu-wd-main *::before,
  .tu-wd-main *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tu-wd-btn--primary:hover:not(:disabled),
  .tu-wd-btn--primary:active:not(:disabled),
  .tu-wd-btn--ghost:active:not(:disabled) { transform: none; }
  .tu-wd-step.is-current .tu-wd-step__num { transform: none; }
}

/* -------------------------------------------------------- contraste forcé */

@media (forced-colors: active) {
  .tu-wd-hero, .tu-wd-panel, .tu-wd-receipt, .tu-wd-aside,
  .tu-wd-recap, .tu-wd-errors, .tu-wd-notice { border: 1px solid CanvasText; }
  .tu-wd-step__num { border: 2px solid CanvasText; }
  .tu-wd-step.is-current .tu-wd-step__num { background: Highlight; color: HighlightText; }
}