/* ==========================================================================
   Gafas Raysol — pages/withdrawal.css
   Page /desistimiento/ (función de desistimiento en línea), chargé via {% block head_extra %}
   de withdrawal.html. S'appuie sur site.css (jetons, .doc-hero, .doc-summary, .field, .form-alert,
   .btn, .prose, .help-box) : ce fichier n'ajoute que ce qui est propre à la page.
   --------------------------------------------------------------------------
   01  Mise en page (hero, colonne du formulaire, colonne d'aide)
   02  Étapes
   03  Formulaire (étape 1)
   04  Récapitulatif (étape 2)
   05  Accusé de réception
   06  Impression
   ========================================================================== */


/* 01 — Mise en page
   ========================================================================== */
.wd-hero__lead { margin-top: 20px; max-width: 60ch; }
.wd-hero__lead .lead { color: var(--ink-2); }

.wd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding-top: clamp(32px, 4.5vw, 72px);
}
@media (min-width: 1024px) {
  .wd-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
  .wd-aside { position: sticky; top: calc(var(--header-h-compact) + 32px); }
}

.wd-card {
  min-width: 0;
  padding: clamp(24px, 4vw, 56px);
  border-radius: var(--radius);
  background: var(--sand);
  scroll-margin-top: calc(var(--header-h-compact) + 24px);
}
@media (max-width: 639.98px) {
  .wd-card { margin-inline: calc(var(--gutter) * -1); padding: 28px var(--gutter) 36px; border-radius: 0; }
}

.wd-panel__title { font-size: var(--fs-3); scroll-margin-top: calc(var(--header-h-compact) + 24px); }
.wd-panel__title:focus:not(:focus-visible) { outline: none; }
.wd-panel__intro { margin-top: 12px; max-width: 60ch; font-size: var(--fs-sm); color: var(--ink-2); }
.wd-card .form-alert { margin-top: 24px; }
.wd-nowrap { white-space: nowrap; }

/* Colonne d'aide */
.wd-aside { min-width: 0; }
.wd-aside__title { font-size: var(--fs-4); }
.wd-aside__list { margin-top: 18px; border-top: 1px solid var(--line); }
.wd-aside__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-2);
}
.wd-aside__list .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--carey); stroke-width: 1.4; }
.wd-aside__list strong { font-weight: 600; color: var(--ink); }
.wd-aside__more { margin-top: 18px; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.wd-aside__more a, .wd-done__text a {
  color: var(--carey);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.wd-aside__more a:hover, .wd-done__text a:hover { color: var(--carey-dark); }


/* 02 — Étapes
   ========================================================================== */
.wd-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0 0 28px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--sand-2);
  list-style: none;
}
.wd-steps__item { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); line-height: 1.3; color: var(--muted); }
.wd-steps__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.wd-steps__item[aria-current="step"] { font-weight: 500; color: var(--ink); }
.wd-steps__item[aria-current="step"] .wd-steps__num { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* étape 1 franchie */
[data-wd-state="review"] .wd-steps__item[data-wd-stepnum="1"] { color: var(--ink-2); }
[data-wd-state="review"] .wd-steps__item[data-wd-stepnum="1"] .wd-steps__num { border-color: var(--ink-2); color: var(--ink-2); }
[data-wd-state="done"] .wd-steps { display: none; }


/* 03 — Formulaire (étape 1)
   ========================================================================== */
.wd-fieldset { display: grid; gap: 22px; min-width: 0; margin: 32px 0 0; padding: 0; border: 0; }
.wd-fieldset + .wd-fieldset { padding-top: 28px; border-top: 1px solid var(--sand-2); }
.wd-legend { float: left; width: 100%; padding: 0; margin: 0; font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.2; color: var(--ink); }
.wd-legend + * { clear: both; }
.wd-legend .field__opt { font-family: var(--font-sans); font-size: var(--fs-sm); }
.wd-fieldset__note { max-width: 60ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); }

.wd-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 640px) {
  .wd-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
}
.wd-form textarea.field__input { min-height: 104px; }

/* Choix « todo el pedido / algunos productos » */
.wd-choice { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wd-choice > legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
.wd-choice > legend + * { clear: both; }
.wd-choice__options { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.wd-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 1px solid var(--muted);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wd-radio:hover { border-color: var(--ink-2); }
.wd-radio:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wd-radio input {
  appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid var(--ink-2);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}
.wd-radio input::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); opacity: 0; }
.wd-radio input:checked { border-color: var(--ink); background: var(--ink); }
.wd-radio input:checked::after { opacity: 1; }
.wd-radio input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wd-radio input[aria-invalid="true"] { border-color: var(--carey-dark); box-shadow: 0 0 0 1px var(--carey-dark); }

/* Pot de miel : hors écran, jamais rempli par une personne */
.wd-hp { position: absolute !important; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.wd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.wd-actions__note { max-width: 42ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }
.wd-actions__main .icon { transition: transform .3s var(--ease); }
.wd-actions__main:hover .icon { transform: translateX(4px); }
[aria-busy="true"] .wd-actions__main { cursor: progress; }


/* 04 — Récapitulatif (étape 2)
   ========================================================================== */
.wd-declaration {
  margin-top: 28px;
  padding: clamp(20px, 3vw, 32px);
  border-left: 2px solid var(--carey);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
}
.wd-declaration__text { margin-top: 10px; max-width: 46ch; font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.wd-summary { display: grid; margin-top: 22px; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.wd-summary > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) {
  .wd-summary > div { grid-template-columns: 13rem minmax(0, 1fr); }
}
.wd-summary dt { font-weight: 500; color: var(--ink); }
.wd-summary dd { margin: 0; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.wd-confirm .wd-actions { margin-top: 28px; }
.wd-review__note { margin-top: 18px; max-width: 60ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); }


/* 05 — Accusé de réception
   ========================================================================== */
.wd-done { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; }
.wd-done__icon .icon { width: 32px; height: 32px; color: var(--carey); stroke-width: 1.3; }
.wd-done__body { min-width: 0; }
.wd-receipt { display: grid; margin-top: 22px; border-top: 1px solid var(--sand-2); }
.wd-receipt > div { padding: 12px 0; border-bottom: 1px solid var(--sand-2); }
.wd-receipt dt { font-size: var(--fs-micro); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wd-receipt dd { margin: 4px 0 0; font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.wd-done__text { margin-top: 18px; max-width: 62ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.wd-done__text strong { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.wd-done__text--warn { padding: 14px 18px; border-left: 2px solid var(--carey-dark); background: var(--paper); color: var(--ink); }
.wd-done__subtitle { margin-top: 28px; font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.wd-next { display: grid; gap: 8px; margin: 12px 0 16px; padding-left: 1.35em; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-2); }
.wd-next li::marker { font-weight: 600; color: var(--carey); }
.wd-next strong { font-weight: 600; color: var(--ink); }


/* 06 — Impression (l'accusé affiché à l'écran peut être imprimé)
   ========================================================================== */
@media print {
  .wd-card { padding: 0; background: none; }
  .wd-aside, .wd-actions, .wd-steps { display: none !important; }
}