/* ============================================================
   PurePeptide — complément WooCommerce

   Le catalogue, la fiche produit et le panier ne sont PLUS habillés ici :
   les gabarits de `woocommerce/` produisent l'anatomie du site statique
   (.products-grid, .product, .pd, .cart-grid) et `styles.css` s'y applique
   directement. Cette feuille ne couvre plus que :
     · les écrans encore rendus par WooCommerce (commande, compte) ;
     · les quelques éléments propres à la boutique qui n'existent pas sur le
       site statique (recherche du catalogue, code promo, méthodes de livraison).
   ============================================================ */

:root {
  --pp-grad: linear-gradient(115deg, #123a78 0%, #2a9ac2 52%, #16a48f 100%);
  --pp-ink: #16233f;
  --pp-ink-soft: #48597a;
  --pp-line: rgba(22, 35, 63, 0.12);
}

/* ---- Notices — AVIS v2 (2026-08-20) ----
   Le bandeau bleu pâle à gros bord supérieur et dashicon de WooCommerce
   faisait « HTML » (retour utilisateur). Registre des références : carte
   BLANCHE, bord fin, filet d'accent à gauche (teal = succès, bleu = info,
   rouge = erreur), sans icône. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border: 1px solid var(--pp-line, #e3e8f0);
  border-top-width: 1px;
  border-left: 3px solid var(--brand-teal);
  background: #fff;
  color: var(--pp-ink);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 6px 18px rgba(18, 42, 84, .05);
  font-size: 14.5px;
  line-height: 1.55;
  list-style: none;
}
.woocommerce-info { border-left-color: var(--brand-blue, #2a9ac2); }
.woocommerce-error { border-left-color: #b3452f; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-error li::before { display: none; content: none; }
.woocommerce-error li { margin: 0 0 6px; }
.woocommerce-error li:last-child { margin-bottom: 0; }

/* ============================================================
   Catalogue — compléments aux classes du design system
   ============================================================ */

/* La recherche est un vrai formulaire (Entrée = recherche WooCommerce),
   pas seulement un champ filtrant la page courante. */
.catalog-search { margin: 0; }
.catalog-search .search-input { width: 260px; max-width: 100%; }

/* Les pastilles de filtre sont des liens vers les archives de catégorie :
   elles fonctionnent avec la pagination et restent partageables. */
.chips a.chip { text-decoration: none; display: inline-block; }

/* La vignette produit est un formulaire d'ajout : il ne doit pas rétrécir
   sur son contenu, sinon le pied de carte se désaligne. */
form.product__foot { width: 100%; margin: 0; }
.pd__buy { width: 100%; }

.catalog-empty { text-align: center; color: var(--pp-ink-soft); padding: 40px 0; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 32px; }
.woocommerce nav.woocommerce-pagination ul { border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0 3px; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 999px;
  min-width: 38px;
  height: 38px;
  line-height: 38px;
  padding: 0;
  color: var(--pp-ink-soft);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pp-ink);
  color: #fff;
}

/* ============================================================
   Fiche produit — « Related research peptides »
   ============================================================ */

/* Le bloc réutilise .section__head et .products-grid du design system : seul
   l'espacement au-dessus lui est propre. Il suit .pd__sections (qui n'a pas de
   marge basse) et n'existe que sur WordPress, d'où cette feuille et pas
   styles.css. */
.pd__related { margin-top: 72px; }
@media (max-width: 680px) {
  .pd__related { margin-top: 48px; }
}

/* ---------- Fiche produit : rangée « Quantity » (2026-08-17) ----------
   Stepper − / valeur / + entre le sélecteur de format et « Bundle & save »
   (position de la référence aminoclub). Même registre que le pas-à-pas du
   panier (.ci__qty, styles.css l. 619) : boutons au bord --line, hover
   violet — mais RONDS ici, et la valeur est un input number rattaché au
   formulaire d'achat par form= (il vit hors du <form>). Compact, aligné
   sur la rangée Format ; en mobile la rangée garde sa largeur naturelle.
   Marge haute 18 → 22px : respiration de la colonne d'achat en carte (v70.32). */
.pd__label--qty { margin-top: 22px; }
.pd__qty { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.pd__qty button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease;
}
.pd__qty button:hover { border-color: var(--violet); color: var(--violet); }
.pd__qty input {
  width: 54px;
  height: 34px;
  text-align: center;
  font-weight: 700;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pd__qty input::-webkit-outer-spin-button,
.pd__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd__qty input:focus { outline: none; border-color: #2a9ac2; box-shadow: 0 0 0 3px rgba(42, 154, 194, 0.15); }

/* ---------- Fiche produit : tuiles « Bundle & save » (2026-08-17) ----------
   Sélecteur de quantité en cartes radio (single-product.php), entre le
   sélecteur de format et la rangée prix + Add to cart. Itération sur le
   modèle aminoclub : tuiles compactes HORIZONTALES — miniatures de flacons
   au trait à gauche, libellé sur deux lignes à droite (« 2 vials » puis
   « −5% » en petit) — et AUCUN prix dans les tuiles : total, ancien total
   barré et « / vial » vivent dans la zone de prix, pilotée par js/shop.js.
   Registre du design system : bord --line, tuile active en teal de marque,
   badge « Best value » en petites capitales espacées (comme .eyebrow) à
   cheval sur le bord haut. Les flacons sont AU TRAIT (SVG stroke), jamais
   la photo produit.
   Marge haute 18 → 22px : respiration de la colonne d'achat en carte (v70.32). */
.pd__label--bundle { margin-top: 22px; }
.bundle-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  /* 6px en haut : le badge « Best value » déborde du bord haut de sa tuile
     (~9px), il lui faut cette respiration sous le label. */
  margin: 6px 0 4px;
  max-width: 520px;
}
.bundle-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  font: inherit;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.bundle-opt:hover { border-color: #b8c6d8; transform: translateY(-1px); }
/* Active : bord teal + fond très légèrement teinté, double trait en inset
   (même famille que .size-opt.is-active, accent teal au lieu du bleu). */
.bundle-opt.is-active {
  border-color: var(--brand-teal);
  background: #f2faf8;
  box-shadow: inset 0 0 0 1px var(--brand-teal);
}
.bundle-opt__vials {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}
/* Fiole générique détourée (photo, arbitrage utilisateur), empilée avec un
   léger chevauchement comme la référence. Hauteur fixée ici : les attributs
   width/height de la balise ne servent que de ratio. */
.bundle-opt__vials img { height: 40px; width: auto; }
.bundle-opt__vials img + img { margin-left: -13px; }
/* Libellé sur deux lignes : « 2 vials », puis « −5% » en petit dessous. */
.bundle-opt__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.bundle-opt__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.bundle-opt__save {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-teal);
  white-space: nowrap;
}
/* Badge à cheval sur le bord haut — petites capitales espacées, comme .eyebrow. */
.bundle-opt__flag {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
}
.bundle-opt__flag--value { background: var(--brand-teal); }
/* « Most popular » (tuile 2) — rétabli à la demande de l'utilisateur, navy. */
.bundle-opt__flag--popular { background: var(--brand-navy); }
/* ---------- Zone de prix pilotée par les tuiles (js/shop.js) ----------
   Dès 2 fioles : le TOTAL en gros, l'ancien total NON REMISÉ barré à côté en
   grisé (comparatif arithmétique réel — unitaire plein × quantité, jamais un
   faux prix barré), puis « $xx.xx / vial » en petit dessous — le <small> est
   déjà en display:block dans styles.css (l. 459). À 1 fiole, le prix « nu »
   imprimé par PHP revient tel quel. */
.pd__buy .product__price .pp-price__was {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-soft);
  text-decoration: line-through;
  margin-left: 8px;
}
@media (max-width: 680px) {
  /* En colonne : les tuiles gardent leur rangée horizontale, en pleine
     largeur ; le badge glisse sur le bord haut droit. */
  .bundle-opts { grid-template-columns: 1fr; max-width: none; gap: 12px; }
  .bundle-opt { padding: 11px 14px; }
  .bundle-opt__flag { left: auto; right: 12px; transform: translateY(-50%); }
}

/* ============================================================
   Panier
   ============================================================ */

/* Le compteur de quantité est un champ (WooCommerce recalcule à la
   soumission) alors qu'il n'était qu'un `<span>` sur le site statique. */
.ci__qty-input {
  width: 44px;
  height: 30px;
  text-align: center;
  font-weight: 600;
  font-family: inherit;
  font-size: 14px;
  color: var(--pp-ink);
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  background: #fff;
  -moz-appearance: textfield;
}
.ci__qty-input::-webkit-outer-spin-button,
.ci__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ci__qty-input:focus { outline: none; border-color: #2a9ac2; box-shadow: 0 0 0 3px rgba(42, 154, 194, 0.15); }

.ci__remove { text-decoration: none; display: inline-block; }

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.cart-actions .coupon { display: flex; gap: 8px; flex: 1; min-width: 240px; }

/* Le champ hérite de `.search-input{min-width:240px}`, pensé pour la recherche du
   catalogue. Un élément flex ne se comprime jamais sous son `min-width` : dans un
   conteneur de 289px, le champ gardait ses 240px et il ne restait que 41px au
   bouton — dont 40px de padding, ce qui écrasait le mot « Apply » à 2px de large.
   On autorise le champ à se comprimer, et on met le bouton hors d'atteinte du
   calcul de compression. */
.cart-actions .coupon .search-input { flex: 1 1 auto; min-width: 0; }
.cart-actions .coupon .btn { flex: 0 0 auto; white-space: nowrap; }

/* Méthodes de livraison dans le récapitulatif : WooCommerce sort un
   `<tr>`/`<ul>`, on l'aligne sur la ligne .sum-row. */
.cart-totals .woocommerce-shipping-totals,
.cart-totals tr {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--pp-ink-soft);
  padding: 9px 0;
  border-bottom: 1px solid var(--pp-line);
}
.cart-totals th { font-weight: 500; text-align: left; }
.cart-totals td { text-align: right; color: var(--pp-ink); font-weight: 700; }
.cart-totals ul#shipping_method {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}
.cart-totals ul#shipping_method li { margin-bottom: 4px; }
.cart-totals ul#shipping_method label { font-weight: 600; color: var(--pp-ink); }
.cart-totals .woocommerce-shipping-destination { font-size: 13px; color: var(--pp-ink-soft); }

/* ============================================================
   Écrans encore rendus par WooCommerce : commande et compte
   ============================================================ */

/* Boutons alignés sur .btn--primary du thème */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order,
.wc-block-components-button {
  background: var(--pp-grad);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 24px;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover {
  background: var(--pp-grad);
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.woocommerce table.shop_table {
  border: 1px solid var(--pp-line);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
}
.woocommerce table.shop_table th { color: var(--pp-ink); }
.woocommerce table.shop_table td { border-top-color: rgba(22, 35, 63, 0.07); }
.woocommerce-checkout h3 { color: var(--pp-ink); font-weight: 700; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--pp-line);
  border-radius: 10px;
  padding: 11px 14px;
  background: #fff;
  color: var(--pp-ink);
  font-family: inherit;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  outline: none;
  border-color: #2a9ac2;
  box-shadow: 0 0 0 3px rgba(42, 154, 194, 0.15);
}

.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li {
  /* Plus de bord ni de rayon ici : la nav compte est rendue en pilules .acc-nav,
     dont le bouton <a> porte lui-même le contour. L'ancien bord « carte » du <li>
     (radius 10px) se superposait à la pilule (radius 999px) et créait un second
     contour décalé. L'espacement est géré par la grille (.acc-nav ul, gap:8px). */
  margin-bottom: 8px;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 11px 16px;
  color: var(--pp-ink-soft);
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { color: #1f4f93; }

/* ---- Étoiles ---- */
.woocommerce .star-rating span::before { color: #2a9ac2; }

/* ---------- Indicatif téléphonique ----------
   Le sélecteur d'indicatif et le téléphone forment une seule ligne : l'indicatif
   tient la moitié gauche, le numéro la droite. Les drapeaux sont des emojis, donc
   on force une pile de polices qui les rend en couleur sur les trois systèmes. */
.pp-phone-cc select,
#billing_country, #shipping_country, #calc_shipping_country {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", inherit;
}
.pp-phone-cc select { line-height: 1.5; }
.pp-phone input[type="tel"] { font-variant-numeric: tabular-nums; }

/* Indicatif et numéro sur une seule ligne. WooCommerce réapplique
   `form-row-wide` au téléphone après le filtre `woocommerce_billing_fields`,
   ce qui le remettait sur sa propre ligne avec `clear:both`. On le place ici,
   avec une spécificité (0,3,2) qui passe devant `.woocommerce form .form-row-wide`
   (0,3,1) — plus robuste que de se battre avec le pipeline de classes. */
.woocommerce form .form-row.pp-phone-cc,
.woocommerce-page form .form-row.pp-phone-cc {
  float: left; width: 47%; clear: none;
}
.woocommerce form .form-row.pp-phone,
.woocommerce-page form .form-row.pp-phone {
  float: right; width: 47%; clear: none;
}

/* Le téléphone est le DERNIER enfant de son conteneur : aucun frère ne vient
   dégager la paire flottante, la hauteur du conteneur s'effondre et le flottant
   s'échappe — la case newsletter, qui vit hors du conteneur, s'enroulait autour
   des deux champs et son libellé se glissait entre eux. On contient les
   flottants dans leur propre conteneur. */
.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::after {
  content: ""; display: table; clear: both;
}

@media (max-width: 600px) {
  .woocommerce form .form-row.pp-phone-cc,
  .woocommerce-page form .form-row.pp-phone-cc,
  .woocommerce form .form-row.pp-phone,
  .woocommerce-page form .form-row.pp-phone {
    float: none; width: 100%; clear: both;
  }
}

/* ============================================================
   TUNNEL DE COMMANDE — deux étapes, `.co`
   ------------------------------------------------------------
   Tout est préfixé `.co` : le formulaire d'adresse du compte client utilise
   les MÊMES classes WooCommerce (`.form-row-first`, `.pp-phone`…) mais reste
   en flottants, réglés plus haut. Retirer ce préfixe casserait « Addresses »
   dans l'espace client.

   Anatomie produite par `woocommerce/checkout/form-checkout.php` :
     .co
       .co-express          paiement express (Apple Pay / Google Pay / Link)
       .co-rail             fil d'Ariane numéroté
       .co-grid
         .co-panes > .co-pane[data-co-pane="info"|"pay"]
         .co-aside > .co-sum
   ============================================================ */

.co { max-width: 1080px; margin: 0 auto; }

/* ---------- Paiement express ----------
   Le bloc reste masqué tant que Stripe n'a pas réellement dessiné un bouton :
   les portefeuilles ne sont pas disponibles partout, et un séparateur « OR »
   flottant au-dessus du vide annonce un choix qui n'existe pas.

   ⚠️ MAIS SURTOUT PAS `display:none`. C'était le cas, et ça créait un blocage
   circulaire : Stripe monte ses boutons dans des iframes dimensionnées sur leur
   conteneur. Dans un parent en `display:none`, ces iframes naissent à 0 px et
   n'en reviennent jamais ; le garde-fou de `js/shop.js`, qui attend une hauteur
   mesurable, ne se déclenchait donc JAMAIS. Apple Pay et Google Pay étaient
   bien rendus — trois iframes présentes, vérifié dans le navigateur — mais
   enfermés dans une boîte invisible pour toujours.

   On masque donc HORS FLUX, avec une largeur pleine : la boîte existe, Stripe
   peut mesurer et peindre, rien n'apparaît à l'écran. Même principe que pour
   l'étape inactive du tunnel. */
.co-express {
  /* ⚠️ TROISIÈME version de ce masquage, et les deux premières étaient fausses
     pour la même raison de fond : une iframe Stripe ne prend sa hauteur QUE si
     son conteneur lui en laisse.
       v1  display:none          -> iframes à 0 px pour toujours.
       v2  height:0;overflow:hidden -> même effet, l'iframe ne peut pas s'étendre,
           la mesure lit 0 et le bloc ne se révèle jamais.
     La seule façon de laisser Stripe se dimensionner tout en restant invisible
     est de garder une hauteur AUTO et de jouer sur l'opacité, hors flux pour ne
     pas pousser le contenu. */
  position: absolute;
  left: 0; right: 0; top: 0;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  text-align: center;
}
.co-express.is-live {
  position: static;
  opacity: 1;
  pointer-events: auto;
  margin: 0 0 34px;
}
/* Le volet ancre le positionnement absolu du bloc masqué. */
.co-pane { position: relative; }
.co-express .eyebrow { margin-bottom: 14px; }

/* Le séparateur du plugin porte des styles en ligne posés par son JS :
   seul `!important` le neutralise. On rend le nôtre à la place. */
#wc-stripe-express-checkout-button-separator { display: none !important; }

/* Pleine largeur du volet : Stripe dimensionne ses boutons sur ce conteneur.
   À 460 px, Apple Pay et Google Pay se retrouvaient à l'étroit et le libellé
   pouvait être tronqué. On leur laisse toute la colonne, avec une hauteur
   minimale confortable au doigt. */
#wc-stripe-express-checkout-element { width: 100%; max-width: none; margin: 0; }
/* ⚠️ Ne JAMAIS poser de `min-height` ici. On l'a fait pour donner de l'air aux
   boutons : ça donne au conteneur une hauteur factice, et le garde-fou de
   `js/shop.js` — qui cherche justement une hauteur — révèle alors un bloc vide.
   La hauteur doit venir de Stripe, et d'elle seule. */

.co-express__or {
  display: flex; align-items: center; gap: 16px;
  margin: 26px 0 0; color: var(--ink-soft);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.co-express__or::before,
.co-express__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* ---------- Fil d'Ariane ---------- */
.co-rail {
  display: flex; align-items: center; list-style: none;
  margin: 0 0 36px; padding: 0; flex-wrap: wrap; gap: 4px 0;
}
.co-rail__step { display: flex; align-items: center; }
.co-rail__step + .co-rail__step::before {
  content: ""; width: 34px; height: 1px; background: var(--line); margin: 0 12px;
}
.co-rail__step > a,
.co-rail__step > button {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  transition: color .2s ease;
}
.co-rail__step > a:hover,
.co-rail__step > button:hover { color: var(--brand-navy); }
.co-rail__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff;
  font-size: 11px; letter-spacing: 0; font-weight: 600; color: var(--ink-soft);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.co-rail__step.is-done > a,
.co-rail__step.is-done > button { color: var(--ink); }
.co-rail__step.is-done .co-rail__n { border-color: var(--brand-teal); color: var(--brand-teal); }
.co-rail__step.is-current > a,
.co-rail__step.is-current > button { color: var(--ink); }
.co-rail__step.is-current .co-rail__n {
  background: var(--brand-navy); border-color: var(--brand-navy); color: #fff;
}
/* Une étape pas encore atteinte n'est pas cliquable : y aller sauterait la
   validation de l'étape 1 et le client atterrirait sur un paiement sans
   adresse. Le JS retire l'attribut dès que l'étape 1 est valide. */
.co-rail__step > button[disabled] { cursor: default; opacity: .55; }
.co-rail__step > button[disabled]:hover { color: var(--ink-soft); }

/* ---------- Grille ---------- */
.co-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 46px;
  align-items: start;
}
.co-aside { position: sticky; top: 96px; }

/* ⚠️ L'étape inactive N'EST PAS masquée par `display:none`, et c'est le point
   le plus fragile de tout ce tunnel.

   Le Payment Element de Stripe se monte dans un iframe dimensionné sur son
   conteneur. Monté dans un volet en `display:none`, il naît à zéro pixel — et
   il n'en revient JAMAIS : ni un `update_checkout`, ni un `resize`, ni un clic
   ne le font remesurer. Symptôme : la carte « Payment » n'affiche que le
   bandeau « Test mode », avec une bande vide de 4px à la place du champ carte.
   Vérifié : le même tunnel rendu par le gabarit WooCommerce d'origine (donc
   sans volet masqué) affiche l'élément à 214px.

   On masque donc SANS retirer la boîte : sorti du flux, largeur pleine,
   `visibility:hidden`. L'élément conserve des dimensions réelles au montage,
   les descendants ne sont ni peints ni focalisables, et les lecteurs d'écran
   les ignorent. `overflow:clip` sur le conteneur empêche le volet hors flux
   d'allonger la page ; la marge de rognage laisse passer les anneaux de focus
   du volet actif.

   Si un jour ce bloc repasse à `display:none`, le champ carte disparaîtra.

   Sans JavaScript, rien n'est masqué : le tunnel redevient une page unique,
   longue mais complète. C'est `js/checkout.js` qui pose `.co--stepped`. */
.co-panes { position: relative; overflow: clip; overflow-clip-margin: 8px; }

.co--stepped .co-pane {
  position: absolute; top: 0; left: 0; width: 100%;
  visibility: hidden;
  pointer-events: none;
}
.co--stepped .co-pane.is-active {
  position: static; width: auto;
  visibility: visible;
  pointer-events: auto;
}
/* `visibility` s'hérite, mais un descendant peut le reprendre — et WooCommerce
   le fait : `.woocommerce form .form-row .required` porte `visibility:visible`.
   Les astérisques des champs obligatoires de l'étape masquée réapparaissaient
   donc par-dessus l'étape affichée, en petits caractères flottants. */
.co--stepped .co-pane:not(.is-active) .required,
.co--stepped .co-pane:not(.is-active) abbr { visibility: hidden; }

/* ---------- Cartes ---------- */
.co-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
}
.co-card + .co-card { margin-top: 18px; }

.co-h {
  font-size: 19px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ink); margin: 0 0 4px;
}
.co-h::after { content: "."; color: var(--brand-teal); }
.co-h__sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; line-height: 1.6; }

/* Les titres que WooCommerce écrit lui-même (« Billing details »,
   « Ship to a different address? ») reprennent la même signature. */
.co .woocommerce-billing-fields > h3,
.co .woocommerce-shipping-fields > h3,
.co .woocommerce-additional-fields > h3 {
  font-size: 19px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ink); margin: 0 0 20px;
}
.co .woocommerce-billing-fields > h3::after,
.co .woocommerce-additional-fields > h3::after { content: "."; color: var(--brand-teal); }

/* « Ship to a different address? » est un h3 contenant une case à cocher :
   on le remet au rang d'une ligne de formulaire, pas d'un titre de section. */
.co #ship-to-different-address {
  font-size: 14px; font-weight: 600; margin: 0;
}
.co #ship-to-different-address label {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink);
}
.co .shipping_address { margin-top: 22px; }

/* ---------- Champs ----------
   WooCommerce dispose ses lignes en flottants (`form-row-first` /
   `form-row-last` / `form-row-wide`). On repasse en grille : les flottants
   sont ignorés sur un enfant de grille, donc les règles plus haut deviennent
   inertes d'elles-mêmes — sauf le clearfix, qui deviendrait une cellule
   fantôme et qu'il faut donc annuler explicitement. */
.co .woocommerce-billing-fields__field-wrapper,
.co .woocommerce-shipping-fields__field-wrapper,
.co .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}
.co .woocommerce-billing-fields__field-wrapper::after,
.co .woocommerce-shipping-fields__field-wrapper::after { content: none; }

/* Les deux paliers ci-dessous doivent garder la MÊME base de sélecteur.
   `.woocommerce .co form .form-row` pèse (0,3,1) : écrit avec une base plus
   courte, la règle « demi-largeur » se retrouvait moins spécifique que la règle
   « pleine largeur » et tous les champs s'empilaient sur une colonne, prénom et
   nom compris. On ajoute donc la classe de variante à la même base, jamais à
   une base plus faible. */
.co .form-row,
.woocommerce .co form .form-row,
.woocommerce-page .co form .form-row {
  float: none; width: auto; clear: none;
  grid-column: span 2;
  margin: 0; padding: 0;
}
.co .form-row.form-row-first,
.co .form-row.form-row-last,
.co .form-row.pp-phone-cc,
.co .form-row.pp-phone,
.woocommerce .co form .form-row.form-row-first,
.woocommerce .co form .form-row.form-row-last,
.woocommerce .co form .form-row.pp-phone-cc,
.woocommerce .co form .form-row.pp-phone,
.woocommerce-page .co form .form-row.form-row-first,
.woocommerce-page .co form .form-row.form-row-last,
.woocommerce-page .co form .form-row.pp-phone-cc,
.woocommerce-page .co form .form-row.pp-phone { grid-column: span 1; width: auto; float: none; }

.co .form-row label {
  display: block; margin-bottom: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.co .form-row label .required { color: var(--brand-blue); border: 0; text-decoration: none; }
.co .form-row .optional { text-transform: none; letter-spacing: .04em; font-weight: 400; }

.co .form-row input.input-text,
.co .form-row textarea,
.co .form-row select,
.co .select2-container .select2-selection--single {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.co .form-row textarea { min-height: 96px; resize: vertical; }
.co .form-row input.input-text:focus,
.co .form-row textarea:focus,
.co .form-row select:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(42, 154, 194, .14);
}

/* État d'erreur — posé par WooCommerce ET par notre validation d'étape. */
.co .form-row.woocommerce-invalid input.input-text,
.co .form-row.woocommerce-invalid select,
.co .form-row.woocommerce-invalid textarea {
  border-color: #b3452f;
  box-shadow: 0 0 0 3px rgba(179, 69, 47, .1);
}
.co-err {
  display: block; margin-top: 6px;
  font-size: 12px; color: #b3452f; letter-spacing: .01em;
}

/* La case « créer un compte » / newsletter vit hors du conteneur en grille. */
.co .woocommerce-account-fields,
.co .woocommerce-additional-fields { margin-top: 22px; }
.co .woocommerce-form__label-for-checkbox {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--ink); text-transform: none; letter-spacing: 0;
}

/* ---------- Actions de bas d'étape ---------- */
.co-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: 24px; flex-wrap: wrap;
}
.co-back {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  transition: color .2s ease;
}
.co-back:hover { color: var(--brand-navy); }
.co-actions .co-next { margin-left: auto; }
/* Le bouton d'étape hérite de .btn--primary (styles.css) une ombre DOUBLE dont la
   première couche `0 1px 2px rgba(18,42,84,.18)` est un contact serré et dur qui,
   sous la grande pilule pleine largeur, se lit comme un liseré sombre — « mal
   fait ». On repasse à une ombre unique, douce et tintée marque, cohérente avec
   les CTA. `.co-actions .co-next` (0,2,0) passe devant `.btn--primary` (0,1,0),
   et woocommerce.css est chargée après styles.css : la surcharge gagne. */
.co-actions .co-next { box-shadow: 0 8px 20px rgba(18, 58, 120, .16); }
.co-actions .co-next:hover { box-shadow: 0 12px 28px rgba(18, 58, 120, .22); }

/* ---------- Rappel des coordonnées, étape 2 ---------- */
.co-recap {
  display: flex; align-items: flex-start; gap: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper-2, #f7f8f8);
  padding: 18px 22px; margin-bottom: 18px;
}
.co-recap dl { flex: 1 1 auto; margin: 0; display: grid; gap: 8px; }
.co-recap__row { display: flex; gap: 14px; align-items: baseline; }
.co-recap dt {
  flex: 0 0 78px; margin: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.co-recap dd { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.5; }
.co-recap__edit {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-blue);
}
.co-recap__edit:hover { color: var(--brand-navy); }

/* ---------- Moyens de paiement ----------
   ⚠️ Spécificité : WooCommerce habille ce bloc par ID
   (`.woocommerce #payment div.payment_box` pèse 1,2,2). Aucune règle de classe
   ne passe devant, quel que soit l'ordre des feuilles — un `#payment` en tête
   de sélecteur est donc obligatoire ici, et c'est la seule raison de sa
   présence. Sans lui : fond gris `#ebe9eb`, encadré `#dfdcde` avec sa flèche
   en triangle, et bouton de commande flottant à droite avec la mention de
   sécurité enroulée autour. */

.woocommerce .co #payment,
.co #payment { background: none; border-radius: 0; padding: 0; }

.woocommerce .co #payment ul.payment_methods,
.co-pm {
  list-style: none; margin: 0; padding: 0;
  border: 0; display: grid; gap: 10px;
}
/* ⚠️ Ne PAS imposer de `display` à ces `li`.
   jQuery (`slideUp`/`slideDown`, côté WooCommerce comme côté Stripe) écrit
   `style="display:block"` — puis `display:none` — directement sur l'élément.
   Un style en ligne bat n'importe quelle feuille : une grille déclarée ici
   n'aurait tenu que sur la passerelle affichée par défaut, et les autres
   seraient restées en bloc, bouton radio au-dessus du libellé. Et la forcer en
   `!important` empêcherait le masquage.
   La mise en page ne dépend donc d'aucun `display` : le bouton radio est
   positionné en absolu, le libellé lui réserve sa gouttière en padding. */
.woocommerce .co #payment ul.payment_methods li.wc_payment_method,
.co-pm > li.wc_payment_method {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.woocommerce .co #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
  position: absolute; left: 18px; top: 21px;
  width: 16px; height: 16px; margin: 0;
  accent-color: var(--brand-navy);
}
.woocommerce .co #payment ul.payment_methods li.wc_payment_method > label {
  display: flex; align-items: center; gap: 11px;
  margin: 0; padding: 16px 18px 16px 46px; cursor: pointer;
  font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
.woocommerce .co #payment ul.payment_methods li.wc_payment_method > label img {
  max-height: 22px; width: auto; margin: 0 0 0 auto; padding: 0; box-shadow: none;
}
.co-pm > li.wc_payment_method:has(input[type="radio"]:checked),
.co-pm > li.wc_payment_method.is-selected {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(42, 154, 194, .12);
}
.woocommerce .co #payment div.payment_box {
  width: auto; margin: 0; padding: 2px 18px 20px;
  background: none; border: 0; border-radius: 0;
  font-size: 14px; color: var(--ink-soft);
}
.woocommerce .co #payment div.payment_box::before { display: none; content: none; }
.woocommerce .co #payment ul.payment_methods li.co-pm__empty { display: block; padding: 0; border: 0; }
.co-pm__empty .woocommerce-info { margin: 0; }

/* ---------- Bouton de commande ---------- */
.woocommerce .co #payment div.form-row.place-order,
.co-place { margin: 22px 0 0; padding: 0; }

/* `#place_order` est en `float:right` chez WooCommerce : la mention de sécurité
   s'enroulait autour du bouton, réduite à une colonne de quatre mots. */
.woocommerce .co #payment #place_order,
.co-place__btn {
  float: none; width: 100%; display: block; text-align: center;
}
.co-place__note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 14px 0 0; font-size: 12px; color: var(--ink-soft);
}
/* Badge « Powered by Stripe » (réassurance, sous le bouton de commande). */
.co-stripe {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 8px 0 0; font-size: 12px; color: var(--ink-soft);
}
.co-stripe .co-stripe__logo { width: 20px; height: auto; }
.co-stripe strong { color: #6772e5; font-weight: 700; }
/* GROS logo Stripe (violet), centré juste au-dessus de la saisie de carte. */
.co-pm-stripe {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin: 6px 0 18px; font-size: 16px; color: var(--ink-soft);
}
.co-pm-stripe .co-pm-stripe__logo { width: 46px; height: auto; }
.co-pm-stripe strong { color: #6772e5; font-weight: 700; font-size: 18px; }

/* Acquittements obligatoires juste avant le bouton « Place order »
   (rendu par inc/checkout.php sur woocommerce_review_order_before_submit).
   L'encart vit dans `.form-row.place-order` : ses <label> héritaient donc de
   `.co .form-row label` (majuscules, interlettrage, 11px/600) — illisible pour du
   texte légal. On remet une casse normale avec une spécificité supérieure
   (`.co .form-row .co-ack__item`, 0,3,0 > 0,2,1). */
/* Plus de mention « (optional) » dans le tunnel : le champ « Order notes » est
   retiré (inc/checkout.php) ; le seul restant est le complément d'adresse
   (« Apartment, suite… »), champ légitimement facultatif que l'on garde mais
   dont on masque juste l'étiquette « (optional) ». */
.co .optional { display: none; }

.co-ack { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.co .form-row .co-ack__item,
.co-ack__item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); cursor: pointer;
  font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--ink-soft);
  text-transform: none; letter-spacing: normal;
  transition: border-color .15s ease;
}
.co-ack__item span { text-transform: none; letter-spacing: normal; font-weight: 400; }
.co-ack__item:hover { border-color: #cfd8e3; }
.co-ack__item input {
  margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto;
  accent-color: var(--brand-navy); cursor: pointer;
}
.co-place .woocommerce-terms-and-conditions-wrapper { margin-bottom: 18px; }
.co-place .woocommerce-privacy-policy-text p {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 12px;
}
.co-place .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink);
}
.co-place .form-row.validate-required { padding: 0; }
.co-place .woocommerce-form__label-for-checkbox { align-items: flex-start; gap: 10px; }
.co-place .woocommerce-form__label-for-checkbox input { margin-top: 3px; }

/* ---------- Récapitulatif ---------- */
.co-sum { padding: 26px 28px; }
.co-sum .co-h { margin-bottom: 18px; }

/* La feuille du thème habille `table.shop_table` en carte bordée : dans
   l'aside, c'est une carte dans une carte. On la remet à plat. */
/* `woocommerce-general.css` pose `.woocommerce table.shop_table th|td` en
   (0,2,2) — au-dessus d'un simple `.co-sum__table th` (0,2,0), qui laissait
   des filets de 1px sous chaque cellule EN PLUS de ceux des lignes : d'où les
   traits courts qui dépassaient à gauche des totaux. On repasse devant en
   (0,3,2), sans `!important` et sans dépendre de l'ordre de chargement. */
.woocommerce .co-sum table.shop_table,
.co-sum__table {
  width: 100%; margin: 0;
  border: none; border-radius: 0; border-collapse: collapse;
}
.woocommerce .co-sum table.shop_table th,
.woocommerce .co-sum table.shop_table td,
.co-sum__table th,
.co-sum__table td { border: none; padding: 0; }

.co-sum__table tbody tr {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.co-sum__table tbody tr:first-child { padding-top: 0; }
.co-sum__table td.product-name { flex: 1 1 auto; min-width: 0; }
.co-sum__table td.product-total {
  flex: 0 0 auto; text-align: right;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}

.co-line { display: flex; align-items: center; gap: 12px; }
.co-line__thumb {
  position: relative; flex: 0 0 auto;
  width: 50px; height: 58px; border-radius: 8px;
  background: radial-gradient(120% 100% at 50% 0, #eaf1ff, #f4f7fc 70%);
  display: flex; align-items: center; justify-content: center;
}
/* `woocommerce-layout.css` force `.woocommerce img{height:auto}` en (0,1,1) :
   on repasse devant en `img.classe` (0,2,1), comme pour les autres images à
   hauteur fixe recensées dans `wp-compat.css`. */
.co-line__thumb img.co-line__img,
.co-line__thumb img { height: 50px; width: auto; max-width: 100%; display: block; }
.co-line__qty {
  position: absolute; top: -7px; right: -7px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--brand-navy); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 20px; text-align: center;
}
.co-line__body { min-width: 0; }
.co-line__name {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  line-height: 1.35;
}
.co-line__size { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

.co-sum__table tfoot tr {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft);
}
.co-sum__table tfoot tr:first-child { padding-top: 16px; }
.co-sum__table tfoot th { font-weight: 500; text-align: left; }
.co-sum__table tfoot td { text-align: right; color: var(--ink); font-weight: 600; }
.co-sum__table tfoot tr.order-total {
  border-bottom: none; padding-top: 16px; margin-top: 4px;
  border-top: 1px solid var(--line);
}
.co-sum__table tfoot tr.order-total th { font-size: 15px; color: var(--ink); font-weight: 600; }
.co-sum__table tfoot tr.order-total td { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }

.co-sum__table ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: right; }
.co-sum__table ul#shipping_method li { margin-bottom: 4px; }
.co-sum__table ul#shipping_method li:last-child { margin-bottom: 0; }
.co-sum__table ul#shipping_method label { font-weight: 600; color: var(--ink); font-size: 13px; }
.co-sum__table .woocommerce-shipping-destination { font-size: 12px; color: var(--ink-soft); }
/* Livraison offerte : le seul montant vert de la page, il doit se voir. */
.co-sum__table tr.woocommerce-shipping-totals td { color: var(--brand-teal); }

.co-trust {
  list-style: none; margin: 22px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 11px;
}
.co-trust li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.co-trust .co-i { flex: 0 0 auto; margin-top: 2px; color: var(--brand-blue); }

.co-note {
  margin: 18px 0 0; font-size: 11.5px; line-height: 1.55;
  color: var(--ink-soft); letter-spacing: .01em;
}

/* ---------- Notices, coupon et connexion en tête de tunnel ---------- */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle { max-width: 1080px; margin: 0 auto 14px; }
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login {
  max-width: 1080px; margin: 0 auto 24px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 28px;
}
.woocommerce-checkout .woocommerce-NoticeGroup { max-width: 1080px; margin: 0 auto 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .co-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Le récapitulatif passe en tête : sur mobile, le total doit être connu
     avant de remplir vingt champs, pas après le bouton de paiement. */
  .co-aside { position: static; order: -1; }
}
@media (max-width: 620px) {
  .co-card { padding: 22px 20px; }
  .co-sum { padding: 22px 20px; }
  .co .woocommerce-billing-fields__field-wrapper,
  .co .woocommerce-shipping-fields__field-wrapper,
  .co .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr; }
  .co .form-row.form-row-first,
  .co .form-row.form-row-last,
  .co .form-row.pp-phone-cc,
  .co .form-row.pp-phone,
  .woocommerce .co form .form-row.pp-phone-cc,
  .woocommerce .co form .form-row.pp-phone { grid-column: span 1; }
  .co-rail__step + .co-rail__step::before { width: 16px; margin: 0 8px; }
  .co-rail__step > a,
  .co-rail__step > button { font-size: 11px; letter-spacing: .1em; }
  .co-actions { flex-direction: column-reverse; align-items: stretch; }
  .co-actions .co-next { margin-left: 0; width: 100%; }
  .co-back { justify-content: center; }
  .co-recap { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-pane, .co-rail__n, .co-pm > li.wc_payment_method { transition: none; }
}

/* ============================================================
   MARQUES D'ACCEPTATION DE PAIEMENT — bandeau de l'accueil
   ------------------------------------------------------------
   Ce ne sont PAS des boutons : rien n'est cliquable, rien ne dépend de Stripe,
   et le bandeau s'affiche donc en HTTP comme en HTTPS. Les vrais boutons
   Apple Pay / Google Pay vivent sur la fiche produit, le panier et la commande
   (`.pp-express` plus bas), et n'apparaissent qu'en HTTPS.

   Les SVG viennent du jeu livré par WooCommerce, recopiés dans
   `assets/pay/` : chacun est une tuile de carte, mais avec des fonds
   hétéroclites — Visa bleu, Mastercard gris clair, Discover anthracite,
   Apple Pay et Google Pay blancs. Les mettre côte à côte en couleur donne un
   patchwork qui jure avec une DA clinique. On les désature donc, ce qui les
   ramène à une seule famille visuelle sans les déformer.
   ============================================================ */

.paybar { padding: 72px 0; border-top: 1px solid var(--line); }
.paybar__inner { text-align: center; }
.paybar .eyebrow { margin-bottom: 22px; }

.paybar__marks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px;
}
.paybar__mark {
  display: flex; align-items: center; justify-content: center;
  width: 68px; height: 46px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
/* `img.classe` (0,2,1) passe devant `.woocommerce img{height:auto}` (0,1,1)
   de `woocommerce-layout.css` — même règle que les autres images à hauteur
   fixe recensées dans `wp-compat.css`. */
/* ⚠️ Marques EN COULEUR — arbitrage de l'utilisateur (2026-08-02).
   Elles étaient désaturées pour former une famille visuelle homogène avec une
   DA clinique ; l'utilisateur les veut en couleur. Ne pas « rétablir » un
   grayscale en croyant corriger une incohérence. */
.paybar__mark img.paybar__img,
.paybar__mark img {
  height: 26px; width: auto; max-width: 100%; display: block;
}

.paybar__note {
  max-width: 46ch; margin: 22px auto 0;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
}

@media (max-width: 620px) {
  .paybar { padding: 52px 0; }
  .paybar__mark { width: 60px; height: 42px; }
  .paybar__mark img.paybar__img,
  .paybar__mark img { height: 22px; }
}

/* ============================================================
   PAIEMENT EXPRESS — fiche produit et panier
   ------------------------------------------------------------
   Même garde-fou que sur la commande : masqué tant que Stripe n'a pas
   réellement dessiné un bouton. `js/shop.js` mesure le conteneur et pose
   `.is-live`. Sans ça, le séparateur « OR » du plugin flotte au-dessus du
   vide et annonce un choix qui n'existe pas — c'est toujours le cas en HTTP,
   Apple Pay et Google Pay exigeant tous deux TLS.
   ============================================================ */

/* ⚠️ SURTOUT PAS `display:none` — c'est le piège corrigé sur `.co-express` et
   qui subsistait ici, sur le panier ET la fiche produit qui partagent cette
   classe. Une iframe Stripe ne prend sa hauteur que si son conteneur lui en
   laisse : dans un parent en `display:none` elle naît à zéro pixel et n'en
   revient jamais, si bien que le garde-fou de `js/shop.js` — qui cherche un
   bouton réellement dessiné — ne se déclenche jamais. Les boutons existaient,
   enfermés dans une boîte qui les empêchait d'exister.
   On masque donc hors flux, hauteur AUTO, par l'opacité. */
.pp-express {
  position: absolute;
  left: 0; right: 0;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}
.pp-express.is-live {
  position: static;
  opacity: 1;
  pointer-events: auto;
  margin-top: 20px;
}
/* Ancrages du positionnement absolu tant que le bloc est masqué. */
.cart-totals, .pd__buy { position: relative; }

.pp-express__or {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 16px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.pp-express__or::before,
.pp-express__or::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }

/* Sur le panier, le bloc suit le bouton « Proceed to checkout » de l'aside. */
.cart-totals .pp-express { margin-top: 16px; }

/* ============================================================
   ESPACE COMPTE — connexion, inscription, tableau de bord
   ============================================================
   Tout `/my-account/` tournait sur les gabarits par défaut de WooCommerce :
   deux colonnes nues (`u-columns col2-set`), des libellés bruts et des boutons
   gris au milieu du design system. Les gabarits sont désormais surchargés
   (woocommerce/myaccount/), il leur fallait leur habillage.

   Le style des champs du tunnel est cantonné à `.co` : on ne peut pas le
   réutiliser tel quel ici, d'où cette section autonome. Elle reprend les mêmes
   valeurs — hairline, rayon, hauteur de frappe — pour que les deux surfaces se
   ressemblent sans se partager de sélecteur.
   ============================================================ */

/* ---------- Carte d'authentification ---------- */
.auth { max-width: 560px; margin: 0 auto; }
.auth-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 30px 26px;
  box-shadow: 0 10px 30px rgba(18, 42, 84, .06);
}

/* Onglets. Sans JavaScript la classe `has-tabs` n'est jamais posée : les deux
   volets restent visibles l'un sous l'autre et le formulaire fonctionne. */
.auth-tabs { display: flex; gap: 6px; margin: 0 0 24px; }
.auth-tab {
  flex: 1 1 0; padding: 11px 14px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); background: var(--bg-soft);
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; transition: .18s ease;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active { background: var(--brand-navy); color: #fff; }
.auth-card.has-tabs .auth-view { display: none; }
.auth-card.has-tabs .auth-view.is-active { display: block; }
.auth-card:not(.has-tabs) .auth-view + .auth-view { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line); }

.auth-title { font-size: 22px; letter-spacing: -.015em; margin: 0 0 6px; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink); }
.auth-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 22px;
  background: none; -webkit-text-fill-color: var(--ink-soft); }

/* ---------- Champs ---------- */
.auth-form .field { margin: 0 0 16px; }
.auth-form label {
  display: block; margin: 0 0 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink);
}
.auth-form .required { color: var(--brand-teal); text-decoration: none; }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-form input:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(42, 154, 194, .14);
}
.field__hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 4px 0 20px;
}
.auth-remember { display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--brand-blue); }
.auth-lost { font-size: 13.5px; color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
.auth-form .btn { width: 100%; }
.auth-note, .auth-legal { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.auth-legal { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.auth-legal a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Navigation du compte ---------- */
.acc-nav { margin: 0 0 26px; }
.acc-nav ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acc-nav li { margin: 0; }
.acc-nav li::before { content: none; }
.acc-nav a {
  display: inline-block; padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  color: var(--ink-soft); background: var(--bg-soft);
  border: 1px solid transparent; border-radius: 999px;
  transition: .18s ease;
}
.acc-nav a:hover { color: var(--ink); border-color: var(--line); }
.acc-nav .is-active > a { background: var(--brand-navy); color: #fff; }

/* ---------- Tableau de bord ---------- */
.dash__head { display: flex; align-items: center; gap: 16px; margin: 0 0 26px; }
.dash__avatar {
  width: 54px; height: 54px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 700; letter-spacing: .02em; color: #fff;
  /* Navy PLEIN depuis la purge des accents dégradés (v70.53, 2026-08-20) :
     plus aucun petit cercle en dégradé nulle part. */
  background: var(--brand-navy);
  border-radius: 50%;
}
.dash__head h2 { margin: 0; font-size: 21px; letter-spacing: -.015em; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink); }
.dash__email { margin: 2px 0 0; font-size: 14px; color: var(--ink-soft);
  background: none; -webkit-text-fill-color: var(--ink-soft); }

.dash__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dash-tile {
  display: block; padding: 18px 18px 16px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: #fff; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dash-tile:hover { border-color: #c9d6e6; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dash-tile h3 { margin: 0 0 5px; font-size: 15.5px; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink); }
.dash-tile p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
  background: none; -webkit-text-fill-color: var(--ink-soft); }

.dash__foot { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 0; }

/* ---------- Tableaux de commandes ---------- */
.woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-MyAccount-content table.shop_table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.woocommerce-MyAccount-content table th {
  text-align: left; padding: 12px 14px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-content table td {
  padding: 13px 14px; font-size: 14.5px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-content table tr:last-child td { border-bottom: none; }

@media (max-width: 720px) {
  .auth-card { padding: 24px 20px 22px; }
  .dash__grid { grid-template-columns: 1fr; }
  .dash__foot .btn { flex: 1 1 100%; }
}

/* ============================================================
   PANIER · COMMANDE · COMPTE — resserrer le haut de page
   ============================================================
   Mesuré en production sur /checkout/ : 284 px de `.page-hero`
   (96 px de padding haut) + 120 px de padding de `.section` + la notice
   WooCommerce = près de 600 px avant le premier champ. Sur une page
   éditoriale cette respiration est juste ; sur une page où le client vient
   ACCOMPLIR quelque chose, elle l'oblige à faire défiler avant de commencer,
   et c'est exactement là qu'on perd des commandes.

   On garde le titre et le kicker — ils situent l'étape — mais on divise
   l'espace par deux. Le reste du site n'est pas touché : ces règles sont
   portées par les classes de body de WooCommerce.
   ============================================================ */
.woocommerce-checkout .page-hero,
.woocommerce-cart .page-hero,
.woocommerce-account .page-hero {
  padding-top: 44px;
  padding-bottom: 22px;
}
.woocommerce-checkout .page-hero h1,
.woocommerce-cart .page-hero h1,
.woocommerce-account .page-hero h1 {
  font-size: clamp(30px, 4vw, 42px);
}
/* Le trait d'accent sous le titre n'a plus besoin d'autant d'air. */
.woocommerce-checkout .page-hero::after,
.woocommerce-cart .page-hero::after,
.woocommerce-account .page-hero::after { margin-top: 14px; }

.woocommerce-checkout .section,
.woocommerce-cart .section,
.woocommerce-account .section {
  padding-top: 30px;
  padding-bottom: 72px;
}

/* La notice « ajouté au panier » et la barre de coupon s'empilaient en pleine
   largeur avec leurs marges par défaut, ce qui repoussait encore le tunnel. */
.woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-message { margin-bottom: 14px; }
.woocommerce-checkout .checkout_coupon { margin-top: 14px; }

@media (max-width: 780px) {
  .woocommerce-checkout .page-hero,
  .woocommerce-cart .page-hero,
  .woocommerce-account .page-hero { padding-top: 30px; padding-bottom: 16px; }
  .woocommerce-checkout .section,
  .woocommerce-cart .section,
  .woocommerce-account .section { padding-top: 20px; padding-bottom: 48px; }
}

/* ---------- Tunnel : donner de l'air à la zone de paiement ----------
   Le tunnel tenait dans 1080 px avec un volet de saisie d'environ 570 px. Le
   Payment Element de Stripe s'y retrouvait à l'étroit : ses onglets de moyens
   de paiement se serraient, et les boutons de portefeuille (Apple Pay, Google
   Pay) — qui se dimensionnent sur leur conteneur — sortaient trop petits pour
   la cible tactile recommandée.

   On élargit l'ensemble et on donne la place au volet plutôt qu'au
   récapitulatif, qui n'a que trois lignes à afficher. */
.co { max-width: 1220px; }
.co-grid { grid-template-columns: minmax(0, 1fr) 348px; gap: 52px; }

/* Les cartes de saisie respirent un peu plus, la frappe est plus confortable. */
.co-card { padding: 30px 32px; }
.co-card--pay { padding-bottom: 34px; }

/* Le bloc de paiement lui-même occupe toute la largeur disponible : c'est ce
   conteneur que Stripe mesure pour dimensionner son iframe. */
.co-pane[data-co-pane="pay"] .woocommerce-checkout-payment,
#payment .payment_box { width: 100%; }

@media (max-width: 1120px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
}
@media (max-width: 900px) {
  .co-grid { grid-template-columns: 1fr; gap: 28px; }
  .co-aside { position: static; }
  .co-card { padding: 24px 20px; }
}

/* Le `.container` du design system plafonne à 1140 px. Élargir `.co` seul ne
   servait à rien : le parent le rognait. On relève le conteneur UNIQUEMENT sur
   les pages de tunnel et de compte — les pages éditoriales gardent leur largeur
   de lecture, qui est un choix typographique, pas une contrainte technique. */
.woocommerce-checkout .container,
.woocommerce-cart .container { max-width: 1280px; }

/* ---------- Bloc de paiement Stripe : les cadres en relief ----------
   Constat fait à l'inspection du DOM en production, pas au jugé :

     fieldset#wc-stripe-upe-form   border: 2px groove rgb(239,239,239)  radius 0
     fieldset (ligne « save payment information »)  idem
     input#wc-stripe-hidden-style-input            border: 2px inset

   `2px groove` n'est ni du WooCommerce ni du Stripe : c'est la bordure PAR
   DÉFAUT DU NAVIGATEUR pour <fieldset>. L'extension enveloppe ses champs dans
   des fieldsets et personne ne réinitialise le style natif ; `groove` dessine un
   biseau en relief sombre, d'où l'impression de cadres noirs à angles droits.
   Chercher la règle dans le CSS de WooCommerce était donc voué à l'échec —
   elle n'existe pas, c'est l'absence de reset qui parle.

   On ne touche QUE ces conteneurs. L'iframe de Stripe, qui porte les vrais
   champs de carte, n'est pas concernée : la styliser est impossible depuis ici,
   et c'est le transient d'apparence qui s'en charge. */
.woocommerce-checkout #wc-stripe-upe-form,
.woocommerce-checkout .wc-upe-form,
.woocommerce-checkout .wc-payment-form,
.woocommerce-checkout .payment_method_stripe fieldset,
.woocommerce-checkout #payment fieldset {
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-inline-size: 0;          /* les fieldsets refusent sinon de se comprimer */
}

/* La ligne « save payment information » redevient une simple case à cocher,
   alignée sur les autres champs du tunnel. */
.woocommerce-checkout .woocommerce-SavedPaymentMethods,
.woocommerce-checkout .wc-stripe-save-payment-method,
.woocommerce-checkout .payment_method_stripe .form-row {
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Champ témoin que l'extension utilise pour MESURER les styles de la page et en
   déduire l'apparence du Payment Element. Il doit rester dans le flux pour que
   getComputedStyle fonctionne — on le sort de l'écran, on ne le met SURTOUT pas
   en display:none, ce qui fausserait la mesure. */
#wc-stripe-hidden-style-input {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* La flèche en triangle que WooCommerce dessine au-dessus du bloc de paiement. */
.woocommerce-checkout #payment .payment_box::before { display: none !important; }

/* ---------- Paiement express, version en ligne dans le volet ----------
   Le bloc vit désormais DANS le volet de saisie, au-dessus de « Billing
   details » (voir le commentaire de form-checkout.php). Il lui faut donc la
   même carte que les champs qu'il précède, sans quoi il flotte sur le fond de
   page et se lit comme un élément étranger. */
.co-express--inline.is-live {
  background: #fff;
  border: 1px solid var(--pp-line);
  border-radius: var(--radius-lg, 14px);
  padding: 26px 30px 22px;
  margin: 0 0 18px;
}
.co-express--inline .eyebrow { display: block; margin-bottom: 16px; }

/* Le séparateur ne sépare plus deux blocs distants mais deux moitiés de la même
   colonne : on le resserre, et on le descend sous les boutons. */
.co-express--inline .co-express__or { margin: 22px 0 0; }

@media (max-width: 780px) {
  .co-express--inline.is-live { padding: 20px 18px 16px; }
}

/* Le bloc express vit maintenant DANS la carte de paiement, qui a déjà son fond
   et sa bordure : lui en redonner ferait une carte dans une carte. On le remet
   à plat et on ne garde que l'espacement. */
.co-card--pay .co-express--inline.is-live {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 18px 0 0;
}
.co-card--pay .co-express--inline .eyebrow { margin-bottom: 12px; }
.co-card--pay .co-express--inline .co-express__or { margin: 20px 0 4px; }

/* ---------- Confort mobile (2026-08-13) ----------
   Ajusté après inspection à 320px via l'aperçu mobile du Customizer.
   Media queries uniquement : le desktop n'est pas touché. */
@media (max-width: 900px) {
  /* Champs de saisie à 16px. Sous 16px, iOS ZOOME automatiquement dès qu'on
     tape dans un champ (compte, adresse de livraison, checkout) — désorientant
     et ça décale la mise en page. 16px supprime ce zoom. */
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .woocommerce-account input.input-text,
  .co input.input-text, .co input[type="text"], .co input[type="email"],
  .co input[type="tel"], .co input[type="password"], .co select, .co textarea,
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 16px !important;
  }
  /* Boutique : moins de vide au-dessus du titre « Shop ». */
  .woocommerce .page-hero,
  body.woocommerce-page .page-hero { padding-top: 44px; }
}

/* ---------- Menu du compte : boutons alignés (2026-08-13) ----------
   Les onglets (Dashboard, Orders, Downloads, Addresses, Payment methods,
   Account details, Log out) étaient des pastilles de largeurs libres qui
   s'empilaient en désordre. On les met en grille 2 colonnes de largeur égale :
   propre et aligné, sur PC comme sur mobile. */
.acc-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acc-nav li { margin: 0; }
.acc-nav a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box; text-align: center;
  padding: 11px 12px; line-height: 1.2;
}

/* ---------- Checkout mobile : alignement (2026-08-13) ----------
   Inspection à 320px. Deux corrections, en media query mobile uniquement. */
@media (max-width: 600px) {
  /* Fil des étapes (1 Cart · 2 Information · 3 Payment) : tenait sur 2 lignes
     (« 3 Payment » tombait seul). On resserre séparateurs, espacement et
     police pour qu'il tienne sur une seule ligne. */
  .co-rail { flex-wrap: nowrap; justify-content: center; }
  .co-rail__step + .co-rail__step::before { width: 10px; margin: 0 5px; }
  .co-rail__step > a,
  .co-rail__step > button { font-size: 10.5px; letter-spacing: .03em; gap: 5px; }
  /* UN CHAMP PAR LIGNE sur mobile (demande utilisateur). Le formulaire est une
     GRILLE 2 colonnes : la régler à 1 colonne ne suffisait pas (la règle de base
     du thème, plus spécifique, l'emportait). On force donc la grille à 1 colonne
     ET chaque champ à occuper toute la largeur (grid-column: 1/-1), avec assez de
     spécificité — y compris l'indicatif et le numéro de téléphone, qui passent
     chacun sur leur propre ligne. */
  .woocommerce .co form .woocommerce-billing-fields__field-wrapper,
  .woocommerce-page .co form .woocommerce-billing-fields__field-wrapper,
  .woocommerce .co form .woocommerce-shipping-fields__field-wrapper,
  .woocommerce .co form .woocommerce-additional-fields__field-wrapper { grid-template-columns: 1fr !important; }
  .woocommerce .co form .form-row.form-row-first,
  .woocommerce .co form .form-row.form-row-last,
  .woocommerce .co form .form-row.pp-phone-cc,
  .woocommerce .co form .form-row.pp-phone,
  .woocommerce-page .co form .form-row.form-row-first,
  .woocommerce-page .co form .form-row.form-row-last,
  .woocommerce-page .co form .form-row.pp-phone-cc,
  .woocommerce-page .co form .form-row.pp-phone { grid-column: 1 / -1 !important; }
}

/* ---------- Tableau de bord du compte : finitions (2026-08-13) ----------
   PC + mobile. Corrige trois défauts visibles. */
/* 1. Bouton actif du menu : texte BLANC. Une règle plus spécifique (ligne ~210)
      le passait en bleu (#1f4f93) sur fond navy = illisible. On repasse au blanc
      avec au moins autant de spécificité, plus bas dans le fichier. */
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .acc-nav li.is-active > a { color: #fff; }
/* 2. « Log out » (dernier onglet) occupait une demi-rangée, seul et déséquilibré :
      il prend toute la largeur du menu. */
.acc-nav ul > li:last-child { grid-column: 1 / -1; }
/* 3. Salut : l'avatar et « Hello, … » étaient écartés (~276px). On les regroupe
      et on les centre proprement. */
.dash__head { justify-content: center; gap: 14px; }
.dash__head > * { margin-left: 0; margin-right: 0; }

/* ---------- Menu compte : boutons à la DA du site (2026-08-13) ----------
   Ils étaient des pastilles grises génériques (fond bg-soft, texte gris délavé,
   bord transparent) — hors charte. On reprend EXACTEMENT le système de boutons
   du site (styles.css, couche finale) :
     · inactif  → .btn--ghost   : blanc, bord #cfd8e3, texte bleu de marque #1f6aa6
     · actif    → .btn--primary : dégradé de marque navy→bleu→teal, texte blanc
   Petites capitales espacées comme les CTAs du site. .woocommerce-account porte
   la règle (0,2,0) pour battre les .acc-nav a de base sans !important. */
.woocommerce-account .acc-nav a {
  background: #fff;
  color: #1f6aa6;
  border: 1px solid #cfd8e3;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  font-size: 12px;
}
.woocommerce-account .acc-nav a:hover {
  background: var(--bg-soft);
  border-color: #b8c6d8;
  color: #123a78;
}
/* Actif = navy PLEIN (purge des dégradés v70.53 — le dégradé de marque ne
   survit que dans le logo et l'accent du hero). */
.woocommerce-account .acc-nav li.is-active > a {
  background: var(--brand-navy);
  border-color: transparent;
  color: #fff;
}
.woocommerce-account .acc-nav li.is-active > a:hover {
  color: #fff;
  filter: saturate(1.08);
}

/* ---------- Fiche produit : bande « Pairs with BAC Water » (2026-08-17) ----------
   Suggestion du solvant de reconstitution, collée sous le formulaire d'achat
   (pp_product_bac_water_pairing, inc/woocommerce.php). Une seule rangée
   compacte — goutte au trait, texte, format + prix, bouton « Add » ghost —
   marges réduites : elle se lit comme un complément du bouton d'achat, pas
   comme un bloc de plus. La marge haute négative la rapproche de .pd__buy
   (marge basse 24px). */
.pd__pairs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 18px;
  padding: 8px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.pd__pairs-icon { flex: 0 0 auto; color: #2a9ac2; }
.pd__pairs-text { flex: 1 1 auto; font-size: 13px; line-height: 1.35; color: var(--ink); }
.pd__pairs-price { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--brand-navy); white-space: nowrap; }
.pd__pairs-btn { flex: 0 0 auto; white-space: nowrap; padding: 6px 14px; font-size: 13px; }
@media (max-width: 640px) {
  .pd__pairs { flex-wrap: wrap; }
  .pd__pairs-text { flex: 1 1 140px; }
  .pd__pairs-price { margin-left: 26px; }
  .pd__pairs-btn { flex: 1 1 auto; justify-content: center; }
}

/* Lien « Full guide » en fin de section Reconstitution (single-product.php).
   Le lien global du site est `color:inherit` sans soulignement : ici on reprend
   le registre des liens éditoriaux (.pp-content a) pour qu'il se voie. */
.pd__section-more { margin-top: 10px; }
.pd__section-more a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }
.pd__section-more a:hover { color: var(--brand-navy); }

/* ── Description de catégorie sous la grille (SEO) ─────────────────────────
   L'accroche (1 phrase) vit dans le hero ; le texte complet est rendu ici,
   bridé comme la typographie éditoriale des fiches. */
.catalog-desc{max-width:880px;margin:56px auto 0;padding-top:32px;border-top:1px solid var(--line)}
.catalog-desc p{font-size:15px;line-height:1.75;color:var(--ink-soft);max-width:70ch}
.catalog-desc p+p{margin-top:14px}
/* Étiquette de remise quantité dans la ligne du panier */
.ci__discount{color:#16A48F;font-weight:600;white-space:nowrap}

/* ============================================================
   COMPTE v3 + boutons Woo au langage v70.35+ (2026-08-20)
   ============================================================
   L'espace compte avait été habillé le 2026-08-13 avec l'ANCIEN langage du
   site (pilules en petites capitales espacées, actif en dégradé) — resté tel
   quel quand v70.35/v70.37 ont basculé tout le site en casse de phrase et
   fonds pleins navy. Remise au niveau des références :
   · sidebar VERTICALE en carte (icônes au trait posées par navigation.php),
     actif navy plein — les règles du 13/08 (grille 2 colonnes, uppercase,
     dégradé) sont battues par position (même fichier, plus bas, spécificité
     égale ou supérieure) ;
   · contenu du compte en carte ;
   · TOUS les boutons Woo natifs (a.button, place_order, blocs) passent du
     dégradé --pp-grad au navy plein : même geste que la couche v70.37 de
     styles.css pour .btn — le tunnel, le panier et le compte parlent enfin
     le même langage que le reste du site.
   ============================================================ */

/* ---- Boutons Woo natifs : navy plein, casse de phrase ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #payment #place_order,
.wc-block-components-button {
  background: var(--brand-navy);
  color: #fff;
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(18,42,84,.14), 0 6px 16px rgba(18,58,120,.14);
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover {
  background: #0d2c5c;
  filter: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(18,42,84,.16), 0 10px 22px rgba(18,58,120,.2);
}

/* ---- Disposition : grille explicite sidebar + contenu ----
   Remplace les floats 30/68 % de woocommerce-layout.css. Scopé logged-in :
   la page de connexion (même body class woocommerce-account) garde sa carte
   centrée. */
body.woocommerce-account.logged-in div.woocommerce {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
body.woocommerce-account.logged-in .woocommerce-MyAccount-content {
  float: none;
  width: auto;
}
/* ⚠️ Piège vérifié au style calculé : WooCommerce pose un CLEARFIX
   `.woocommerce::before/::after { content:" "; display:table }`. Sur un
   conteneur passé en grid, un pseudo-élément à contenu devient le PREMIER
   item de la grille : il occupait la cellule (1,1), poussait la nav en
   colonne 2 pleine largeur et étranglait le contenu en rangée 2 colonne 1.
   Un clearfix n'a aucun rôle dans une grille : on le retire. Si des notices
   apparaissent (div.woocommerce-notices-wrapper), elles prennent la rangée 1
   entière. */
body.woocommerce-account.logged-in div.woocommerce::before,
body.woocommerce-account.logged-in div.woocommerce::after { content: none; }
body.woocommerce-account.logged-in div.woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.woocommerce-account.logged-in div.woocommerce > .woocommerce-notices-wrapper:empty { display: none; }

/* ---- Sidebar en carte, rangées icône + libellé ---- */
.woocommerce-account .acc-nav {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 10px;
}
.woocommerce-account .acc-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.woocommerce-account .acc-nav li { margin: 0; }
.woocommerce-account .acc-nav a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
.woocommerce-account .acc-nav a:hover {
  background: var(--bg-soft);
  border-color: transparent;
  color: var(--brand-navy);
}
.woocommerce-account .acc-nav li.is-active > a {
  background: var(--brand-navy);
  border-color: transparent;
  color: #fff;
}
.woocommerce-account .acc-nav li.is-active > a:hover {
  background: #0d2c5c;
  color: #fff;
  filter: none;
}
.woocommerce-account .acc-nav .acc-nav__ico { flex: 0 0 auto; opacity: .8; }
/* Log out : détaché du bloc par un hairline. (La règle grid-column du 13/08
   ne s'applique plus : le conteneur est repassé en flex.) */
.woocommerce-account .acc-nav li:last-child {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* ---- Contenu du compte en carte ---- */
.woocommerce-account .woocommerce-MyAccount-content {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 30px 32px;
  min-width: 0;
}

/* ---- Tableau de bord dans la carte ---- */
.woocommerce-account .dash__head { justify-content: flex-start; }
.dash-tile { background: var(--bg-soft); }
.dash-tile:hover { background: #fff; }
.dash-tile h3 { text-transform: none; letter-spacing: 0; }

/* ---- Mobile ---- */
@media (max-width: 860px) {
  body.woocommerce-account.logged-in div.woocommerce { grid-template-columns: 1fr; gap: 18px; }
  .woocommerce-account .acc-nav { padding: 8px; }
  .woocommerce-account .acc-nav ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .woocommerce-account .acc-nav a { width: auto; padding: 9px 13px; border-radius: 999px; background: var(--bg-soft); font-size: 13.5px; }
  .woocommerce-account .acc-nav li:last-child { margin: 0; padding: 0; border: 0; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 22px 18px; }
}

/* ---- COMPTE v3.1 · organisation PC + mobile (2026-08-20) ---- */
/* PC : la sidebar suit le défilement (registre SaaS des références) et les
   deux cartes partent du même haut. */
@media (min-width: 861px) {
  .woocommerce-account .acc-nav { position: sticky; top: 96px; }
}
/* Mobile : fini les pilules qui s'enroulent en désordre — grille propre de
   2 colonnes de tuiles icône + libellé, Log out en pleine largeur. */
@media (max-width: 860px) {
  .woocommerce-account .acc-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .woocommerce-account .acc-nav a {
    width: 100%; justify-content: flex-start;
    padding: 11px 12px; border-radius: 12px;
    background: var(--bg-soft); font-size: 13.5px;
  }
  .woocommerce-account .acc-nav li:last-child { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; }
  .woocommerce-account .dash__head { flex-wrap: wrap; }
  .woocommerce-account .dash__foot .btn { width: 100%; justify-content: center; }
}

/* ================================================================
   TUNNEL v2 (2026-08-20) — alignement sur les références
   Fichier synchronisé À LA MAIN avec le thème (cp + diff).
   ================================================================ */

/* Bandeau « Have a coupon? » de WooCommerce : retiré. Le code promo vit déjà
   dans le tiroir de panier et sur la page panier — les références n'ont pas
   de bandeau coupon en tête de tunnel. */
.woocommerce-form-coupon-toggle { display: none; }
form.checkout_coupon { display: none !important; }

/* Fil d'Ariane sans cercles numérotés : texte en casse de phrase + chevrons,
   étape courante en navy — le registre Shopify des deux références. */
.co-rail__n { display: none; }
.co-rail__step + .co-rail__step::before {
  content: "\203A"; width: auto; height: auto; background: none;
  color: #9aa7bd; margin: 0 14px; font-size: 16px; line-height: 1;
}
.co-rail__step > a,
.co-rail__step > button {
  letter-spacing: 0; text-transform: none; font-size: 14.5px; font-weight: 600;
}
.co-rail__step.is-current > a,
.co-rail__step.is-current > button { color: var(--brand-navy); }


/* ================================================================
   MEMBERSHIP — Mon compte → « Membership & points » (M4b, 2026-09-02)
   Rendu par le plugin purepeptide-memberships (templates/account-
   membership.php) dans .woocommerce-MyAccount-content. Cartes blanches
   à hairline, badges de plan en APLATS (gris Free / bleu VIP / navy
   Founder), KPI en DM Sans, alertes de grâce ambrées / rouges, jamais
   de dégradé (v70.53). Fichier synchronisé À LA MAIN avec le thème.
   ================================================================ */
.msa { display: grid; gap: 18px; }
.msa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.msa-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 24px; min-width: 0;
}
.msa-card h3 { margin: 0 0 12px; font-size: 15px; letter-spacing: -.005em; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink); }
.msa-badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--brand-navy);
}
.msa-badge--free { background: #5c697f; }
.msa-badge--vip { background: var(--brand-blue); }
.msa-badge--founder { background: var(--brand-navy); }
.msa-plan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.msa-plan__cadence { font-size: 13.5px; color: var(--ink-soft); }
.msa-line { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink); }
.msa-line strong { color: var(--brand-navy); }
.msa-muted { color: var(--ink-soft); font-size: 13.5px; }
.msa-note { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft);
  background: none; -webkit-text-fill-color: var(--ink-soft); }
.msa-alert {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 12px;
  border: 1px solid #f1d9a6; background: #fff8e8; color: #7a5a12;
  font-size: 14px; line-height: 1.5;
}
.msa-alert strong { color: inherit; }
.msa-alert--danger { border-color: #f0c2c2; background: #fff3f3; color: #8a2f2f; }
.msa-alert--info { border-color: #d7ede8; background: #f1faf8; color: #0E7D6C; }
.msa-kpi {
  margin: 0; font-family: var(--font-display, 'DM Sans', Inter, system-ui, sans-serif);
  font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink);
}
.msa-kpi small { display: block; margin-top: 6px; font-family: inherit; font-size: 14px;
  font-weight: 500; letter-spacing: 0; color: var(--ink-soft); -webkit-text-fill-color: var(--ink-soft); }
.msa-list { list-style: none; margin: 8px 0 0; padding: 0; }
.msa-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--line); font-size: 14px; margin: 0; }
.msa-list li::before { content: none; }
.msa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.msa-actions form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.msa-actions select {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff;
}
.msa-actions .btn { white-space: nowrap; }
.msa-cancel__btn { color: #8a2f2f; border-color: #e6cfcf; }
.msa-cancel__btn:hover { background: #fff3f3; color: #8a2f2f; }
.msa-sim { display: grid; gap: 10px; margin-top: 12px; }
.msa-sim__row {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
  font-size: 14px; line-height: 1.55; color: var(--ink);
}
.msa-sim__plan { font-weight: 700; color: var(--brand-navy); }
.msa-table__wrap { overflow-x: auto; }
.msa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.msa-table th {
  text-align: left; padding: 10px 12px; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--bg-soft);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.msa-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.msa-table td.is-pos { color: #0E7D6C; font-weight: 700; white-space: nowrap; }
.msa-table td.is-neg { color: #8a2f2f; font-weight: 700; white-space: nowrap; }
.msa-pager { display: flex; gap: 10px; justify-content: space-between; margin-top: 12px; }
@media (max-width: 780px) {
  .msa-grid { grid-template-columns: 1fr; }
  .msa-kpi { font-size: 32px; }
  .msa-card { padding: 18px 16px; }
  .msa-sim__row { grid-template-columns: 1fr; gap: 4px; }
  .msa-actions form, .msa-actions .btn { width: 100%; }
  .msa-actions select { flex: 1 1 auto; }
}


/* ================================================================
   MEMBERSHIP — panneau « Use my points » (panier + tunnel) et
   confirmation « Your points on this order » (M4e, 2026-09-02).
   Rendus par le plugin (PP_MS_Redeem::render_panel, PP_MS_Checkout_UI)
   dans le formulaire du panier et dans la carte récapitulatif du
   tunnel. Aplats, hairline, teal pour ce qui est acquis. Fichier
   synchronisé À LA MAIN avec le thème.
   ================================================================ */
.pp-ms-points {
  margin: 14px 0 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
  display: grid; gap: 10px;
}
.pp-ms-points__balance { margin: 0; font-size: 14px; color: var(--ink); background: none; -webkit-text-fill-color: var(--ink); }
.pp-ms-points__balance::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-teal); margin-right: 8px; vertical-align: 1px;
}
.pp-ms-points p { margin: 0; font-size: 13.5px; color: var(--ink); background: none; -webkit-text-fill-color: var(--ink); }
.pp-ms-points .search-input {
  width: 140px; max-width: 100%; padding: 9px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pp-ms-points .btn { margin-left: 8px; vertical-align: middle; }
.pp-ms-points__note { font-size: 12.5px !important; color: var(--ink-soft) !important; -webkit-text-fill-color: var(--ink-soft) !important; }
/* Dans la carte récapitulatif du tunnel : fond blanc, filet seul. */
.co-sum .pp-ms-points { background: #fff; margin: 0 0 14px; }
/* Le form porteur des champs (hors du <form> checkout) n'occupe aucune place. */
form.pp-ms-carrier { display: none; }

.pp-ms-thanks {
  margin: 0 0 24px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand-teal);
  border-radius: 12px; background: #f1faf8;
}
.pp-ms-thanks h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink); background: none; -webkit-text-fill-color: var(--ink); }
.pp-ms-thanks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pp-ms-thanks li { margin: 0; font-size: 14px; color: var(--ink); padding-left: 18px; position: relative; }
.pp-ms-thanks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--brand-teal); font-weight: 700; background: none; width: auto; height: auto; }
.pp-ms-thanks p { margin: 10px 0 0; font-size: 13.5px; }
.pp-ms-thanks a { color: var(--brand-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pp-ms-thanks--guest { border-left-color: #b9c2d0; background: var(--bg-soft); }
.pp-ms-thanks--guest p { margin: 0; color: var(--ink-soft); }

/* ============================================================
   MOBILE v70.95c (2026-09-03) — panier, tunnel, compte en 402 px.
   Récapitulatif replié derrière un bouton « Order summary · total »
   (checkout.js, setupMobileSummary), en-têtes de page compacts, champs
   pleine largeur, libellés du bloc de paiement en casse de phrase, boutons
   d'étape et « Place order » à 52 px, lignes de livraison du panier empilées.
   ============================================================ */
.co-sum__toggle { display: none; }
@media (max-width: 900px) {
  .co-sum.has-toggle > .co-h { display: none; }
  .co-sum__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; }
  .co-sum__toggle-l { display: inline-flex; align-items: center; gap: 6px; }
  .co-sum__toggle svg { transition: rotate .25s ease; }
  .co-sum__toggle[aria-expanded="true"] svg { rotate: 180deg; }
  .co-sum__toggle-total { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; font-family: 'DM Sans', 'Inter', system-ui, sans-serif; }
  .co-sum.is-collapsed > :not(.co-sum__toggle) { display: none; }
  .co-sum.has-toggle { padding: 16px 18px; }
  .co-sum.has-toggle:not(.is-collapsed) > .co-sum__toggle { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(18, 42, 84, .08); }
}
@media (max-width: 680px) {
  .woocommerce-checkout .page-hero, .woocommerce-cart .page-hero, .woocommerce-account .page-hero { padding-top: 16px; padding-bottom: 10px; }
  .woocommerce-checkout .page-hero .eyebrow, .woocommerce-cart .page-hero .eyebrow, .woocommerce-account .page-hero .eyebrow { display: none; }
  .woocommerce-checkout .page-hero h1, .woocommerce-cart .page-hero h1, .woocommerce-account .page-hero h1 { font-size: 26px; }
  .woocommerce-checkout .page-hero::after, .woocommerce-cart .page-hero::after, .woocommerce-account .page-hero::after { margin-top: 8px; }
  .woocommerce-checkout .co form .form-row, .woocommerce-checkout .co form .form-row-first, .woocommerce-checkout .co form .form-row-last,
  .woocommerce-checkout .co form .form-row-wide { width: 100%; float: none; clear: both; }
  .woocommerce-checkout .co .form-row input.input-text, .woocommerce-checkout .co .form-row select,
  .woocommerce-checkout .co .form-row .select2-container { width: 100%; }
  .co-card { padding: 18px 16px; }
  .co-rail { font-size: 14px; }
  #payment .payment_box label, #payment .wc-stripe-save-source label,
  #payment .woocommerce-SavedPaymentMethods-saveNew label { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; }
  #payment .payment_box { padding: 14px; }
  .co-actions .btn, .co-next, #place_order { width: 100%; min-height: 52px; }
  .cart-totals .shipping th, .cart-totals .shipping td, .cart_totals .shipping th, .cart_totals .shipping td { display: block; width: 100%; text-align: left; padding-left: 0; padding-right: 0; }
  .cart-totals .shipping td, .cart_totals .shipping td { padding-top: 4px; }
  .cart-totals .woocommerce-shipping-destination, .cart_totals .woocommerce-shipping-destination { display: block; margin-top: 6px; }
  .shipping-calculator-button { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--brand-navy); }
  .ci { padding: 14px; }
}