/* ==========================================================================
   Jolihuit, refonte 2026 : le tunnel d'achat
   --------------------------------------------------------------------------
   Pages tunnel-achat/ et validation-commande/, chargée APRÈS refonte.css
   et sur ces deux pages seulement.

   Une feuille à part plutôt qu'une section 28 de refonte.css : celle-ci
   dépasse déjà 3 300 lignes pour une règle maison de 800, et son découpage
   est prévu (DESIGN.md, section 12). Aucune couleur, aucun rayon, aucune
   ombre nouvelle : uniquement les jetons de refonte.css.

   Contrastes, mesurés sur blanc :
   - bord des champs --r-ink-mute (#7A746E), environ 4,6:1, au-dessus du
     3:1 exigé d'un composant d'interface. Le --r-rule du champ de
     l'infolettre (1,4:1) ne le passe pas, il n'est donc pas repris ;
   - erreurs en --vif-corail (#D63A22), 4,53:1. Une erreur est un état :
     elle prend un rôle fonctionnel, jamais une couleur de la suite ;
   - confirmation en --vif-vert (#0A7A5D), 5,14:1, le rôle « achat vérifié ».
   ========================================================================== */

.r-tunnel { padding-block: clamp(2rem, 5vw, 3.5rem) var(--sp-section); }

/* Filet de sécurité : dans le tunnel, une classe de mise en page ne doit
   jamais annuler l'attribut hidden posé par le script. */
.r-tunnel [hidden] { display: none !important; }

.r-tunnel__tete { margin-bottom: 2rem; }
.r-tunnel__tete h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.r-tunnel__tete p { margin-top: 1rem; }

.r-tunnel h2 {
  font-size: var(--fs-h3);
  margin-bottom: 1.25rem;
  /* Le titre d'étape reçoit le focus : il ne doit pas passer sous
     l'en-tête collant. */
  scroll-margin-top: calc(var(--h-header) + 1.5rem);
}
.r-tunnel h2:focus { outline: none; }
.r-tunnel h3 { font-size: var(--fs-lg); margin: 2rem 0 .75rem; }

/* --------------------------------------------------------------------------
   La progression en quatre étapes
   Une barre par étape : noire quand elle est faite, violette pour l'étape
   en cours (le violet du focus, un rôle fonctionnel), claire à venir.
   Sous 40 rem, seul le nom de l'étape en cours reste lisible, les autres
   restent annoncés aux lecteurs d'écran.
   Nommée .r-progression et non .r-etapes : .r-etapes est déjà le suivi
   de commande de suivi-commande/ (refonte.css, section 29), dont les
   filets se doublaient avec ceux-ci.
   -------------------------------------------------------------------------- */
.r-progression { margin-bottom: 2.5rem; }
.r-progression ol { display: flex; gap: .5rem; }
.r-progression li { flex: 1 1 0; min-width: 0; }
.r-progression li[aria-current] { flex-grow: 4; }

.r-progression button {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: .6rem 0 0;
  border-top: 3px solid var(--r-rule);
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--r-ink-soft);
}
.r-progression button:disabled { cursor: default; }
.r-progression .is-faite button { border-top-color: var(--r-ink); color: var(--r-ink); }
.r-progression .is-faite button:not(:disabled):hover .r-progression__nom {
  text-decoration: underline;
  text-underline-offset: .2em;
}
.r-progression li[aria-current] button { border-top-color: var(--vif-violet); color: var(--r-ink); }
.r-progression li[aria-current] .r-progression__nom { font-weight: 600; }

.r-progression__num {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--r-ink-soft);
}

@media (max-width: 39.99rem) {
  .r-progression li:not([aria-current]) span {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 40rem) {
  .r-progression li[aria-current] { flex-grow: 1; }
}

/* --------------------------------------------------------------------------
   Les champs
   -------------------------------------------------------------------------- */
.r-tunnel fieldset { min-width: 0; margin: 0 0 2rem; padding: 0; border: 0; }
.r-tunnel legend {
  padding: 0;
  margin-bottom: 1rem;
  font-family: var(--rf-display);
  font-variation-settings: var(--rf-settings);
  letter-spacing: var(--rf-track);
  font-size: var(--fs-lg);
}

.r-champs { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) {
  .r-champs--2 { grid-template-columns: 1fr 1fr; }
  .r-champ--plein { grid-column: 1 / -1; }
}

.r-champ { min-width: 0; }
.r-champ label {
  display: block;
  margin-bottom: .4rem;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.r-champ__facultatif { font-weight: 400; color: var(--r-ink-soft); }

.r-champ input,
.r-champ select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--r-ink-mute);
  border-radius: var(--r-radius);
  background: var(--r-bg-pure);
  color: var(--r-ink);
  font: inherit;
  font-size: var(--fs-base);   /* 16 px : iOS ne zoome pas sur le champ */
}
.r-champ input::placeholder { color: var(--r-ink-mute); }
.r-champ input:focus-visible,
.r-champ select:focus-visible { outline: 2px solid var(--vif-violet); outline-offset: 2px; }
.r-champ [aria-invalid="true"] {
  border-color: var(--vif-corail);
  box-shadow: inset 0 0 0 1px var(--vif-corail);
}
.r-champ input:disabled {
  background: var(--r-bg);
  border-style: dashed;
  color: var(--r-ink-soft);
  cursor: not-allowed;
}

.r-champ__aide { margin: .4rem 0 0; font-size: var(--fs-sm); color: var(--r-ink-soft); }
.r-champ__erreur { margin: .4rem 0 0; font-size: var(--fs-sm); font-weight: 500; color: var(--vif-corail); }

/* Case à cocher : la case reste native, le libellé entier est cliquable. */
.r-case { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 2rem; }
.r-case input {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  margin: .2rem 0 0;
  accent-color: var(--arc-1);
}
.r-case label { font-size: var(--fs-sm); cursor: pointer; }

/* --------------------------------------------------------------------------
   Les choix en pavés : transporteur, moyen de paiement
   Même geste que les tailles de la fiche produit (.r-sizes) : filet
   violet et lavis quand le pavé est choisi.
   -------------------------------------------------------------------------- */
.r-choix { display: grid; gap: .75rem; }
.r-choix label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2rem .85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--r-ink-mute);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.r-choix label > span { grid-column: 2; }
.r-choix input {
  grid-row: 1;
  width: 1.2rem; height: 1.2rem;
  margin: .3rem 0 0;
  accent-color: var(--arc-1);
}
.r-choix input:focus-visible { outline: none; }
.r-choix label:hover { border-color: var(--r-ink); }
.r-choix label:has(input:focus-visible) { outline: 2px solid var(--vif-violet); outline-offset: 2px; }
.r-choix label:has(input:checked) {
  border-color: var(--arc-1);
  box-shadow: inset 0 0 0 1px var(--arc-1);
  background: var(--lavis-1);
}
.r-choix label:has(input[aria-invalid="true"]) { border-color: var(--vif-corail); }
.r-choix label:has(input:disabled) { border-style: dashed; cursor: not-allowed; }
.r-choix label:has(input:disabled):hover { border-color: var(--r-ink-mute); }

.r-choix__titre { font-weight: 500; }
.r-choix__prix { font-size: var(--fs-sm); font-weight: 600; }
.r-choix__detail { font-size: var(--fs-sm); color: var(--r-ink-soft); }

/* --------------------------------------------------------------------------
   Résumé des erreurs, en tête d'étape. Il reçoit le focus : chaque ligne
   est un lien vers le champ à corriger.
   -------------------------------------------------------------------------- */
.r-erreurs {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--r-bg-pure);
  border-left: 3px solid var(--vif-corail);
}
.r-erreurs:focus { outline: 2px solid var(--vif-violet); outline-offset: 3px; }
.r-erreurs__titre { margin: 0 0 .5rem; font-weight: 600; color: var(--vif-corail); }
.r-erreurs ul { padding-left: 1.25rem; list-style: disc; }
.r-erreurs li { margin-bottom: .25rem; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Boutons d'étape
   -------------------------------------------------------------------------- */
.r-tunnel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.r-tunnel__actions .r-btn { flex: 1 1 16rem; }
/* Le libellé légal du dernier bouton est long : il doit pouvoir passer
   sur deux lignes à 320 px sans déborder. */
.r-tunnel .r-btn { text-align: center; line-height: 1.4; padding-block: .75rem; }
.r-tunnel button.link { min-height: 44px; font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Le récapitulatif
   Les lignes reprennent .cart-line du tiroir panier, avec une troisième
   colonne pour le montant de la ligne.
   -------------------------------------------------------------------------- */
.r-recap { margin: 0 0 1rem; }
.r-recap .cart-line { grid-template-columns: 68px minmax(0, 1fr) auto; align-items: start; }
.r-recap .cart-line__variant { margin-bottom: .3rem; }
.r-recap .link { font-size: var(--fs-sm); }
.r-recap__vignette { width: 68px; aspect-ratio: 4 / 5; background: var(--r-rule-soft); }
.r-recap__prix { margin: 0; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
/* Sous 40 rem, le montant passe sous le nom : sur trois colonnes, le nom
   d'un article à imprimé et taille tombait à un mot par ligne. */
@media (max-width: 39.99rem) {
  .r-recap .cart-line { grid-template-columns: 68px minmax(0, 1fr); }
  .r-recap__prix { grid-column: 2; }
}

.r-totaux { display: grid; gap: .45rem; margin: 0; }
.r-totaux > div { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-sm); }
.r-totaux dt, .r-totaux dd { margin: 0; }
.r-totaux dd { text-align: right; }
.r-totaux > .r-totaux__total {
  margin-top: .4rem;
  padding-top: .75rem;
  border-top: 1px solid var(--r-rule);
  font-size: var(--fs-base);
  font-weight: 600;
}
.r-totaux > .r-totaux__tva { color: var(--r-ink-soft); }

.r-resume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.r-resume h3 { margin: 0 0 .5rem; font-size: var(--fs-base); }
.r-resume p { margin: 0 0 .25rem; font-size: var(--fs-sm); white-space: pre-line; }

/* L'encart de vérification juste avant de payer : c'est .r-legal__encadre
   (section 26 de refonte.css), le même lavis et le même filet. */
.r-tunnel__verif { margin: 0 0 2rem; }
.r-tunnel__verif h3 { margin-top: 0; }
.r-tunnel__verif .r-recap .cart-line { padding-bottom: .9rem; margin-bottom: .9rem; }

/* La maquette du formulaire de carte, désactivée tant que Payplug n'est
   pas branché : bord pointillé, comme tout ce qui n'est pas encore réel. */
.r-paiement-demo {
  margin: 1.5rem 0 2rem;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px dashed var(--r-ink-mute);
}
.r-paiement-demo > p { margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   La confirmation
   -------------------------------------------------------------------------- */
/* Les titres de la confirmation se suivent sans étape : ils portent leur
   propre respiration, sinon « Et maintenant ? » colle à l'adresse. */
.r-tunnel [data-confirmation] h2 { margin-top: 2.5rem; }

.r-commande-num {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--r-bg-pure);
  border-left: 3px solid var(--vif-vert);
}
.r-commande-num dt {
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--r-ink-soft);
}
.r-commande-num dd { margin: .2rem 0 0; font-size: var(--fs-lg); font-weight: 600; }

/* --- Point relais Mondial Relay ------------------------------------------
   Le widget (iframe + liste + carte) apporte son propre style. On encadre
   juste sa zone et on met en forme le point relais retenu. */
.r-relais__widget {
  margin: 1rem 0;
  min-height: 3rem;
  border: 1px solid var(--r-ink-mute);
  border-radius: var(--r-radius);
  overflow: hidden;
}
.r-relais__widget:empty { border-style: dashed; }
.r-relais__choisi {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--r-bg-pure);
  border-left: 3px solid var(--vif-vert);
  border-radius: var(--r-radius);
}
.r-relais__titre { margin: 0 0 .25rem; font-weight: 600; }
.r-relais__adresse { margin: 0; white-space: pre-line; color: var(--r-ink-soft); }