/* =============================================
   RÉSERVATION D'ATELIER — page /reserver/{slug}/ et checkout
   =============================================
   Chargée uniquement sur le parcours de réservation
   (inc/reservation/storefront.php), après style.css et en dépendant.

   ⚠️ AUCUN token n'est redéclaré ici : tout vient du :root de style.css, source
   unique. ⚠️ Aucune règle .nav ni .rds-footer — voir CLAUDE.md, elles
   casseraient la navigation et le pied de page.
   ============================================= */

/* ── Écran 1 : la page de réservation ───────────────────────── */

.rds-resa__back {
  display: inline-block;
  font-family: var(--rds-font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--rds-accent);
  margin-bottom: 2rem;
}
.rds-resa__back:hover { text-decoration: underline; }

.rds-resa__recap {
  background: var(--rds-surface);
  border: 1px solid color-mix(in srgb, var(--rds-or) 45%, transparent);
  border-radius: 10px;
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
}
.rds-resa__recap-titre {
  font-family: var(--rds-font-title);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--rds-encre);
  margin: 0 0 1.1rem;
  line-height: 1.2;
}
.rds-resa__liste { margin: 0; }
.rds-resa__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rds-encre) 10%, transparent);
}
.rds-resa__ligne:last-child { border-bottom: none; }
.rds-resa__ligne dt {
  flex: 0 0 11rem;
  font-family: var(--rds-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rds-taupe);
  padding-top: 0.25rem;
}
.rds-resa__ligne dd {
  flex: 1 1 12rem;
  margin: 0;
  font-family: var(--rds-font-title);
  font-size: 1.15rem;
  color: var(--rds-encre);
}
.rds-resa__desc {
  margin: 1.2rem 0 0;
  font-size: 0.95rem;
  color: var(--rds-taupe);
}

/* ── Formulaire ─────────────────────────────────────────────── */

.rds-resa__form-titre {
  font-family: var(--rds-font-title);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--rds-encre);
  margin: 0 0 1.2rem;
  line-height: 1.2;
}
.rds-resa__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
}
.rds-resa__champ { margin: 0; }
.rds-resa__champ--places { grid-column: 1 / -1; max-width: 16rem; }
.rds-resa__champ label {
  display: block;
  font-family: var(--rds-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rds-taupe);
  margin-bottom: 0.4rem;
}
/* Même habillage que les champs Contact Form 7 du site (`style.css`, § Contact
   Form 7) et que ceux de la page de commande, plus bas : les deux écrans du
   parcours ne doivent pas se distinguer l'un de l'autre. */
.rds-resa__champ input[type="text"],
.rds-resa__champ input[type="email"],
.rds-resa__champ input[type="tel"],
.rds-resa__champ input[type="number"] {
  width: 100%;
  font-family: var(--rds-font-body);
  font-size: 1rem;
  color: var(--rds-brun);
  background: var(--rds-blanc);
  border: 1px solid var(--rds-bordure);
  border-radius: var(--rds-radius);
  padding: 0.9rem 1.2rem;
  transition: border-color var(--rds-transition), box-shadow var(--rds-transition);
}
.rds-resa__champ input:focus { border-color: var(--rds-focus); }
.rds-resa__champ input:focus-visible {
  outline: 2px solid var(--rds-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--rds-focus-halo);
}
.rds-resa__aide {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--rds-font-body);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rds-taupe);
}

.rds-resa__total {
  margin: 1.8rem 0 1.2rem;
  font-family: var(--rds-font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rds-taupe);
}
.rds-resa__total strong {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--rds-font-title);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rds-accent);
  vertical-align: -0.15em;
}

/* ── Code promotionnel ──────────────────────────────────────────
   Aucun token n'est redéclaré ici : prune, taupe, bordure et surfaces viennent
   toutes de `style.css`, comme le reste de cette feuille. */

.rds-resa__promo { margin: 1.6rem 0 0; }

.rds-resa__promo-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: stretch;
}
.rds-resa__champ--promo { max-width: 26rem; }
/* ⚠️ `text-transform` ne change QUE le dessin : il a longtemps donné à ce champ
   l'air de fonctionner alors qu'il postait « rds-a7k3 » en affichant
   « RDS-A7K3 ». C'est `reservation.js` qui met la VALEUR en majuscules ; la
   règle ci-dessous ne fait plus que couvrir l'instant d'avant le script et le
   cas où JavaScript est absent — où le serveur, lui, accepte les minuscules.
   ❌ Ne pas la prendre pour le mécanisme, et surtout ne pas retirer le JS en
   la croyant suffisante. */
.rds-resa__champ--promo input[type="text"] {
  flex: 1 1 11rem;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rds-resa__promo-appliquer,
.rds-resa__promo-retirer {
  font-family: var(--rds-font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rds-accent);
  background: transparent;
  border: 1px solid var(--rds-accent);
  border-radius: 4px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
}
.rds-resa__promo-appliquer:hover,
.rds-resa__promo-retirer:hover {
  background: var(--rds-accent);
  color: var(--rds-cta-texte);
}
.rds-resa__promo-appliquer:focus-visible,
.rds-resa__promo-retirer:focus-visible {
  outline: 2px solid var(--rds-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--rds-focus-halo);
}

.rds-resa__promo-applique {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--rds-surface);
  border-left: 3px solid var(--rds-vert);
}
.rds-resa__promo-etat {
  font-family: var(--rds-font-body);
  font-size: 0.9rem;
  color: var(--rds-encre);
}
.rds-resa__promo-retirer {
  padding: 0.4rem 0.8rem;
  font-size: 0.7rem;
}

/* ── Montants détaillés (sous-total / remise / total) ───────────
   Une ligne par montant, libellé à gauche et valeur à droite : c'est la seule
   disposition où l'œil vérifie la soustraction sans effort. */

.rds-resa__montants {
  margin: 1.8rem 0 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--rds-surface);
  border-radius: 4px;
}
.rds-resa__montant {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.5rem;
  font-family: var(--rds-font-body);
  font-size: 0.95rem;
  color: var(--rds-taupe);
}
.rds-resa__montant strong {
  font-weight: 400;
  color: var(--rds-encre);
  white-space: nowrap;
}
.rds-resa__montant--remise strong { color: var(--rds-vert-deep); }
.rds-resa__montant--total {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rds-bordure);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rds-resa__montant--total strong {
  font-family: var(--rds-font-title);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rds-accent);
}
.rds-resa__montants .rds-resa__aide { margin-top: 0.6rem; }
.rds-resa__recalcul {
  margin: 0.5rem 0 0;
  font-family: var(--rds-font-body);
  font-size: 0.82rem;
  color: var(--rds-accent);
}
.rds-resa__recalcul[hidden] { display: none; }

/* ── Formulaire de code de la page de commande ──────────────────
   WooCommerce le rend masqué, révélé par son propre lien « showcoupon ». On
   l'habille sans toucher à ce mécanisme. */

.woocommerce-checkout .checkout_coupon {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--rds-surface);
  border-radius: 4px;
}
.woocommerce-checkout .checkout_coupon .form-row { margin: 0 0 0.6rem; }
/* L'habillage du champ vient de la règle commune (§ Écran 2) ; il ne reste ici
   que ce qui est PROPRE à un code promotionnel : il se lit en capitales.
   ⚠️ Même avertissement que pour `.rds-resa__champ--promo` : c'est une
   apparence, pas une valeur — `reservation.js` couvre `#coupon_code` aussi. */
.woocommerce-checkout .woocommerce form.checkout_coupon .form-row .input-text {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] {
  font-family: var(--rds-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rds-accent);
  background: transparent;
  border: 1px solid var(--rds-accent);
  border-radius: 4px;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
}
.woocommerce-checkout .checkout_coupon button[name="apply_coupon"]:hover {
  background: var(--rds-accent);
  color: var(--rds-cta-texte);
}
.woocommerce-checkout .cart-discount td { color: var(--rds-vert-deep); }
.woocommerce-checkout .woocommerce-remove-coupon {
  font-size: 0.8rem;
  color: var(--rds-lien);
}

.rds-resa__champ--rgpd { grid-column: 1 / -1; margin: 0 0 1.5rem; }
.rds-resa__champ--rgpd label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-family: var(--rds-font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rds-taupe);
  cursor: pointer;
}
.rds-resa__champ--rgpd input { margin-top: 0.25rem; flex: 0 0 auto; }

.rds-resa__actions { margin: 0 0 1.5rem; }

/* ⚠️ **Piège n° 2, deuxième occurrence — `.btn-primary` porte
   `white-space: nowrap`** (`style.css`, § Boutons globaux). C'est le défaut
   déjà traité en `1.21.4` pour le CTA de la page de confirmation
   (`.rds-resa-retour`, plus bas dans cette feuille) : il était resté ouvert sur
   le bouton d'envoi du formulaire de réservation.
   **Mesuré** à 320 px : « Continuer vers le paiement » réclame 316 px dans un
   conteneur qui en offre 272 — le bouton sortait de son parent et la PAGE
   défilait horizontalement (`scrollWidth` 340 pour 320).
   ⚠️ **Portée volontairement étroite** : `.rds-resa__actions` n'existe que dans
   ce formulaire (vérifié — une seule occurrence dans le thème). Corriger
   `.btn-primary` lui-même toucherait tous les CTA du site, dont ceux dont la
   composition sur une ligne est délibérée.
   ⚠️ **Sans point de rupture, comme le précédent** : appliquées sans condition,
   ces trois déclarations ne changent RIEN tant que le libellé tient sur une
   ligne — un `inline-block` y reste. Le desktop est donc inchangé, et aucune
   largeur n'a besoin d'être devinée. La cible tactile n'est pas réduite.      */
.rds-resa__actions .btn-primary {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

.rds-resa__mentions {
  font-family: var(--rds-font-body);
  font-size: 0.82rem;
  color: var(--rds-taupe);
  margin: 0;
}

/* ── Notices WooCommerce, habillées ───────────────────────────
   ⚠️ **Deux ornements de WooCommerce doivent être ÉTEINTS ici, pas seulement
   recouverts** — mesuré le 2026-08-21 sur la production comme en local :

   1. `woocommerce.css` pose `border-top: 3px solid #720eec` sur les trois
      notices, puis `#1e85be` pour `.woocommerce-info`. Habiller le seul
      `border-left` laissait donc un FILET BLEU en haut du composant, étranger
      à la palette. Le `border-top: 0` ci-dessous l'éteint — la déclaration
      appartient au même bloc que l'accent prune, pour qu'on ne puisse pas
      rétablir l'un en oubliant l'autre.
   2. `.woocommerce-info::before` écrit le glyphe `\e028` dans la police
      `WooCommerce`, en `position:absolute; top:1em; left:1.5em`. Ce pseudo-
      élément suppose la gouttière de `padding: 1em 2em 1em 3.5em` que cette
      feuille remplace par `1rem 1.2rem` : l'icône retombait donc SUR les
      premières lettres du message, et s'y affichait en carré de substitution.
      `content: none` supprime le pseudo-élément entier.

   ⚠️ `::after` n'est PAS touché : il porte le `clear: both` qui referme le
   flottant du bouton d'une notice d'erreur.                                   */

.rds-resa .woocommerce-error,
.woocommerce-checkout .woocommerce-error,
.rds-resa .woocommerce-message,
.woocommerce-checkout .woocommerce-message,
.rds-resa .woocommerce-info,
.woocommerce-checkout .woocommerce-info {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 1rem 1.2rem;
  border-radius: 6px;
  font-family: var(--rds-font-body);
  font-size: 0.92rem;
  background: var(--rds-surface);
  border-top: 0;
  border-left: 3px solid var(--rds-accent);
  color: var(--rds-encre);
}
.rds-resa .woocommerce-error::before,
.woocommerce-checkout .woocommerce-error::before,
.rds-resa .woocommerce-message::before,
.woocommerce-checkout .woocommerce-message::before,
.rds-resa .woocommerce-info::before,
.woocommerce-checkout .woocommerce-info::before {
  content: none;
}
.rds-resa .woocommerce-error,
.woocommerce-checkout .woocommerce-error { border-left-color: #B32D2E; }
.rds-resa .woocommerce-error li,
.woocommerce-checkout .woocommerce-error li { margin: 0 0 0.35rem; }
.rds-resa .woocommerce-error li:last-child,
.woocommerce-checkout .woocommerce-error li:last-child { margin-bottom: 0; }

/* ── Écran 2 : le checkout WooCommerce, aux couleurs du site ── */

.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--rds-font-title);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--rds-encre);
  margin: 0 0 1.2rem;
}

/* ⚠️ **Le bloc « coordonnées » occupe TOUTE la largeur.** `woocommerce-layout.css`
   dispose la page de commande en deux colonnes flottantes de 48 %
   (`.col2-set .col-1` / `.col-2`) : la seconde accueille normalement l'adresse
   de livraison et les notes de commande. Ce site n'expédie rien et n'a pas de
   notes (checkout.php les retire) : la colonne de droite ne portait plus qu'un
   titre vide, et le formulaire se contentait de la moitié gauche. Mesuré le
   2026-08-21 : 367 px sur les 764 px disponibles. Le titre lui-même est éteint
   côté PHP (`woocommerce_enable_order_notes_field`) — CSS et PHP se répondent,
   aucun des deux ne suffit seul.                                              */
.woocommerce-checkout #customer_details.col2-set .col-1,
.woocommerce-checkout #customer_details.col2-set .col-2 {
  float: none;
  width: 100%;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}

/* ⚠️ **Chaque champ occupe sa piste de grille, entière.** WooCommerce marque
   prénom et nom `form-row-first` / `form-row-last`, et leur impose
   `width: 47%` + `float` — une disposition en flottants, pensée pour son
   propre gabarit. Posée sur des ÉLÉMENTS DE GRILLE, elle ne partage plus rien
   du tout : elle rétrécit chaque champ à 47 % de sa piste, pendant que
   téléphone et e-mail (`form-row-wide`, sans largeur) en occupent 100 %. C'est
   l'asymétrie visible sur la capture `bug2` : 81 px contre 171 px, mesurés.
   ⚠️ Le sélecteur doit porter TROIS classes : celui de WooCommerce en compte
   deux plus un élément (0-2-1), et une règle à 0-2-0 perdrait en silence.     */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
}
.woocommerce-checkout .form-row { margin: 0; padding: 0; }
.woocommerce-checkout .form-row label {
  display: block;
  font-family: var(--rds-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rds-taupe);
  margin-bottom: 0.4rem;
}

/* ⚠️ **Les champs reprennent le style validé du site** — celui des formulaires
   Contact Form 7 (`style.css`, § Contact Form 7) : même gouttière intérieure,
   même bordure, même rayon, même transition, même double anneau de focus.
   Rien n'est inventé ici, et surtout aucune valeur n'est recopiée à la main :
   tout passe par les tokens.
   ⚠️ Le sélecteur compte QUATRE classes, et ce n'est pas de la surenchère :
   `.woocommerce form .form-row .input-text` (0-3-1) l'emportait sur la règle
   précédente (0-3-0), qui n'a donc jamais rien fait — mesuré, les champs
   portaient la gouttière de WooCommerce (`.5em`) et sa bordure sombre.
   ⚠️ `font-size: 1rem` plutôt que les `0.9rem` de Contact Form 7 : sous
   16 px, iOS zoome à la mise au focus, et un formulaire de paiement ne doit
   pas sauter sous le doigt.                                                   */
.woocommerce-checkout .woocommerce form .form-row .input-text,
.woocommerce-checkout .woocommerce form .form-row select {
  width: 100%;
  font-family: var(--rds-font-body);
  font-size: 1rem;
  color: var(--rds-brun);
  background: var(--rds-blanc);
  border: 1px solid var(--rds-bordure);
  border-radius: var(--rds-radius);
  padding: 0.9rem 1.2rem;
  transition: border-color var(--rds-transition), box-shadow var(--rds-transition);
}
.woocommerce-checkout .woocommerce form .form-row .input-text:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus {
  border-color: var(--rds-focus);
}
.woocommerce-checkout .woocommerce form .form-row .input-text:focus-visible,
.woocommerce-checkout .woocommerce form .form-row select:focus-visible {
  outline: 2px solid var(--rds-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--rds-focus-halo);
}
.woocommerce-checkout .required { color: var(--rds-accent); text-decoration: none; }

/* Le titre du récapitulatif ouvre une nouvelle étape : il porte lui-même la
   respiration qui le sépare des coordonnées, sinon il se collait au dernier
   champ. Le bloc qui le suit n'en ajoute donc plus. */
.woocommerce-checkout #order_review_heading { margin: 2.5rem 0 1.2rem; }
.woocommerce-checkout .woocommerce-checkout-review-order {
  margin-top: 0;
  background: var(--rds-surface);
  border: 1px solid color-mix(in srgb, var(--rds-or) 45%, transparent);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
}
.woocommerce-checkout .shop_table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rds-font-body);
  font-size: 0.95rem;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rds-encre) 10%, transparent);
  vertical-align: top;
}
.woocommerce-checkout .shop_table tfoot .order-total th,
.woocommerce-checkout .shop_table tfoot .order-total td {
  border-bottom: none;
  font-size: 1.1rem;
  color: var(--rds-accent);
}
.rds-resa-item-meta {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--rds-taupe);
}
.rds-resa-item-meta li { margin: 0 0 0.15rem; }

/* ── Netteté du texte — le faux gras, et rien d'autre ────────────
   ⚠️ **La cause du flou est mesurée, pas supposée.** Le thème n'installe que
   DEUX fontes Lato : `lato-300.woff2` et `lato-regular.woff2` (400). Aucune
   graisse supérieure n'existe. Or WooCommerce demande 600 et 700 sur ses
   en-têtes de tableau, ses montants, ses `strong`, ses astérisques
   d'obligation et ses boutons : le navigateur fabrique alors un gras
   SYNTHÉTIQUE en épaississant la fonte 400 — des contours doublés, sans
   hinting, exactement l'aspect « pâteux » signalé sur ce parcours et sur lui
   seul. Relevé sur la page de commande : quatorze éléments à 600 ou 700.

   La correction ramène ces textes à 400, la graisse la plus forte réellement
   disponible. La hiérarchie ne repose donc plus sur l'épaisseur mais sur les
   moyens que ce site emploie déjà partout ailleurs : les capitales espacées
   pour les en-têtes, la taille et la couleur prune pour le total.

   ❌ Aucun `-webkit-font-smoothing` : il ne fait rien sous Windows, où le
   défaut a été constaté, et il ne traiterait pas la cause.
   ⚠️ Le seuil de synthèse est 600 — une graisse 500 retombe sur la fonte 400
   sans être épaissie. Les `<strong>` du pied de page (500) ne sont donc pas
   concernés, et ne sont pas touchés ici.                                      */

.woocommerce-checkout .woocommerce th,
.woocommerce-checkout .woocommerce strong,
.woocommerce-checkout .woocommerce bdi,
.woocommerce-checkout .woocommerce .amount,
.woocommerce-checkout .woocommerce .button,
.woocommerce-checkout .woocommerce-order th,
.woocommerce-checkout .woocommerce-order strong,
.woocommerce-checkout .woocommerce-order bdi,
.woocommerce-checkout .woocommerce-order .amount {
  font-weight: 400;
}

/* ⚠️ Trois sélecteurs de WooCommerce montent plus haut que le bloc ci-dessus
   et exigent d'être nommés un par un — mesuré après une première passe qui les
   avait manqués : `.woocommerce table.shop_table th` (0-2-2),
   ses variantes `tbody th` / `tfoot th` / `tfoot td` (0-2-3) et
   `.woocommerce form .form-row .required` (0-3-1). */
.woocommerce-checkout .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table tbody th,
.woocommerce-checkout .woocommerce table.shop_table tfoot th,
.woocommerce-checkout .woocommerce table.shop_table tfoot td,
.woocommerce-checkout .woocommerce form .form-row .required {
  font-weight: 400;
}

/* En-têtes du récapitulatif : mêmes capitales espacées que les libellés du
   parcours (`.rds-resa__ligne dt`, `.rds-resa__champ label`). */
.woocommerce-checkout .woocommerce table.shop_table thead th {
  font-family: var(--rds-font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rds-taupe);
}

/* ── Coordonnées de la page de remerciement ──────────────────────
   ⚠️ WooCommerce écrit le téléphone et l'e-mail en `<p>` à l'intérieur de
   l'`<address>`. Le premier héritait de la marge de paragraphe du site
   (24 px), le second — dernier enfant — n'en avait aucune : il s'ouvrait donc
   un trou entre deux lignes qui appartiennent au même bloc d'informations.
   Mesuré : 53 px entre le téléphone et l'e-mail, contre 30 px entre le nom et
   le téléphone. La hauteur de ligne de l'`<address>` suffit à les aérer.      */
.woocommerce-checkout .woocommerce-customer-details address p,
.woocommerce-order .woocommerce-customer-details address p {
  margin: 0;
}

/* ⚠️ Le bloc de paiement porte un voile violet de WooCommerce
   (`rgba(129,110,153,.14)`) qui grisait le bas du récapitulatif crème et or. Le
   sélecteur d'origine porte un identifiant : il faut en porter un aussi. */
.woocommerce-checkout .woocommerce #payment {
  background: transparent;
  border-radius: 0;
}
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
  margin: 0 0 0.6rem;
  font-family: var(--rds-font-body);
  font-size: 0.95rem;
}

/* ⚠️ **Le descriptif d'un moyen de paiement porte les gris de WooCommerce**
   (`#dcd7e2` sur `#515151`), qui n'appartiennent à aucune palette de ce site :
   un bandeau mauve-gris s'ouvrait au milieu du récapitulatif crème et or dès
   qu'un moyen de paiement était sélectionné. Le sélecteur d'origine porte un
   identifiant (`#payment div.payment_box`) : il faut donc en porter un aussi. */
.woocommerce-checkout .woocommerce #payment div.payment_box {
  background: var(--rds-fond);
  color: var(--rds-taupe);
  border-radius: var(--rds-radius);
  border-left: 3px solid color-mix(in srgb, var(--rds-or) 60%, transparent);
  font-family: var(--rds-font-body);
}
.woocommerce-checkout .woocommerce #payment div.payment_box::before { content: none; }

.woocommerce-checkout #payment .form-row.place-order { margin-top: 1.5rem; }

/* ⚠️ **Le bouton de paiement est le CTA principal du site, pas celui de
   WooCommerce.** Il était servi en violet `#720eec` — la couleur de marque de
   l'extension — sur le seul écran où le visiteur engage un paiement. Les
   déclarations reprennent `.btn-primary` (`style.css`, § Boutons globaux) sans
   en recopier une seule valeur : tout passe par les tokens.
   ⚠️ Un identifiant est nécessaire : la règle de WooCommerce vaut 0-3-1 une
   fois son `:where()` réduit à zéro, et `#place_order` seul (1-0-0) suffirait,
   mais la restreindre au contexte de commande évite d'habiller par ricochet un
   bouton d'un autre écran. */
.woocommerce-checkout .woocommerce #payment #place_order {
  width: 100%;
  background: var(--rds-cta);
  color: var(--rds-cta-texte);
  font-family: var(--rds-font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  border: 2px solid var(--rds-cta);
  border-radius: var(--rds-radius);
  cursor: pointer;
  transition: filter var(--rds-transition), transform var(--rds-transition);
}
.woocommerce-checkout .woocommerce #payment #place_order:hover {
  background: var(--rds-cta);
  color: var(--rds-cta-texte);
  filter: brightness(0.88);
  transform: translateY(-2px);
}
.woocommerce-checkout .woocommerce #payment #place_order:focus-visible {
  outline: 2px solid var(--rds-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--rds-focus-halo);
}

/* Le bouton « Appliquer » du code promotionnel reste secondaire : contour
   prune, comme son jumeau de l'écran de réservation. */
.woocommerce-checkout .woocommerce form.checkout_coupon button.button {
  background: transparent;
  color: var(--rds-accent);
  border: 1px solid var(--rds-accent);
  border-radius: var(--rds-radius);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 1.2rem;
}
.woocommerce-checkout .woocommerce form.checkout_coupon button.button:hover {
  background: var(--rds-accent);
  color: var(--rds-cta-texte);
}

/* ── Retour au calendrier des ateliers (page de confirmation) ─ */

/* Le CTA de sortie de `order-received.php` (§ 7). Le BOUTON n'est pas défini
   ici : c'est `.btn-primary` de `style.css`, inchangé. Ce bloc ne fait que le
   poser dans la page — et fermer deux pièges qui l'y attendaient.             */
.rds-resa-retour {
  margin: 2.5rem 0 0;
  text-align: center;
}

/* ⚠️ **Piège n° 1 — `.page-body a` rendrait ce bouton illisible.** La page de
   commande est une page WordPress ordinaire : son contenu (le shortcode
   `[woocommerce_checkout]`) est rendu par `page.php` à l'intérieur de
   `.page-body`. Or `style.css` y déclare `.page-body a { color:
   var(--rds-vieux-rose); text-decoration: underline }` — spécificité 0-1-1,
   contre 0-1-0 pour `.btn-primary`. Sans la règle ci-dessous, le texte du CTA
   devient PRUNE SUR FOND PRUNE, souligné : invisible, et pas seulement laid.
   Mesuré sur le HTML réel de `/checkout/order-received/…`, pas déduit.
   ⚠️ Les DEUX propriétés sont neutralisées. Le précédent de
   `workshop-calendar.css` (§ fiche atelier) ne reprenait que `color` ; le
   soulignement passe par la même règle et gagne de la même façon.
   Spécificité 0-3-1, sans `!important`, comme ce précédent.                   */
.page-body .rds-resa-retour a.btn-primary {
  color: var(--rds-cta-texte);
  text-decoration: none;
}

/* ⚠️ **Piège n° 2 — `.btn-primary` porte `white-space: nowrap`.** Le libellé
   « Retour au calendrier des ateliers » fait 33 caractères ; en capitales à
   0,75 rem avec `letter-spacing: 0.18em` et 2,4 rem de rembourrage de chaque
   côté, il ne rentre pas. **Mesuré** à 320 px de fenêtre, règle neutralisée :
   le bouton réclame 374 px dans un conteneur qui en offre 272 — il en sortait
   de 102 px, et la page défilait horizontalement, sur l’écran d’un visiteur
   qui vient de payer.
   ⚠️ **Sans point de rupture, et c'est délibéré.** Le précédent de
   `workshop-calendar.css` traite le même défaut à `max-width: 400px`, pour un
   libellé de 21 caractères ; celui-ci est bien plus long et ce seuil ne lui
   conviendrait pas — en choisir un autre reviendrait à deviner un nombre.
   Appliquées sans condition, ces trois déclarations ne changent RIEN au rendu
   large (un `inline-block` reste sur une ligne tant qu'il y tient) et ne
   débordent à aucune largeur. La cible tactile n'est pas réduite.             */
.rds-resa-retour a.btn-primary {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

/* ── Bandeau supérieur du parcours — habillé AILLEURS ────────
   ⚠️ **Ces règles ne sont plus ici, et ce n'est pas un rangement.** Le vert du
   bandeau (`--rds-vert-deep`, le libellé en `--rds-rose-embleme`, le titre en
   `--rds-fond`) vit dans **`style.css`**, § « PAGES INTÉRIEURES — Bannière »,
   juste sous la définition de `.page-banner` elle-même — avec le commentaire
   complet qui en porte les mesures de contraste.

   La raison : depuis `1.21.6`, la **fiche individuelle d'un atelier**
   (`single-rds_event.php`) porte le même bandeau, pour ouvrir la chaîne
   calendrier → fiche → réservation → commande → paiement → confirmation. Or
   cette fiche existe **sans WooCommerce** : la présente feuille n'est mise en
   file que dans le parcours (`rds_reservation_contexte_commerce()`,
   `inc/reservation/storefront.php`), donc jamais sur elle. Garder les
   déclarations ici aurait fait dépendre l'habillage d'un atelier d'une
   extension absente de la production ; les dupliquer les aurait fait diverger
   au premier ajustement.

   ❌ Ne pas les réintroduire ici : les cinq écrans partagent une seule liste
   de sélecteurs, et deux scénarios comparent leurs couleurs calculées.       */

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .rds-resa__grille,
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }
  .rds-resa__ligne dt { flex: 1 1 100%; }
  .rds-resa__recap { padding: 1.4rem 1.2rem; }
}