/* ABC Canada 2027 — la billetterie côté écran : page d'un pass, panier.
   Charge en dernier, après site.css, page.css et form.css : tout ici s'appuie
   sur les tokens de Modernist (--color-*, --space-*, --radius-*), sur les
   primitives de site.css (.wrap, .section, .eyebrow, .btn, --rule, --hair) et
   sur le chrome de page.css (.page-hero, .breadcrumb, .page-facts) sans les
   redéfinir.

   Deux règles tenues d'un bout à l'autre :

   1. WooCommerce reste le maître du possible. Les prix, le stock, la validation
      et le bouton d'ajout viennent de lui ; cette feuille et `shop.js` ne font
      que présenter ce qu'il expose. Aucun prix n'est écrit ici.
   2. Rien n'est masqué qui ne soit remplacé. Le `<select>` natif des variantes
      n'est retiré de l'écran que si `shop.js` a posé `.is-enhanced` sur le
      formulaire — sans JS, c'est lui qui reste, et il fonctionne. */

/* ── Deux couleurs d'état que Modernist n'avait pas ───────────────────────
   La palette porte l'encre et le rouge, pas le « disponible » ni le « il en
   reste peu » — une billetterie en a besoin. Chaque valeur est prise au plus
   proche du ton qui tient encore 4.5:1 sur son fond, mesuré, parce que ces
   deux couleurs portent du texte d'étiquette et pas de l'ornement. */
:root {
  --ok-text: #276b41;        /* 5.75:1 sur --color-bg  */
  --ok-inverse: #79c98f;     /* 8.35:1 sur --color-text */
  --warn-text: #9a4b0b;      /* 5.55:1 sur --color-bg  */
  --warn-inverse: #ffb066;   /* 9.21:1 sur --color-text */
}

/* ═══════════════════════════════════════════════════════════════════════
   1. LA PAGE D'UN PASS
   ═══════════════════════════════════════════════════════════════════════ */

/* Deux colonnes : ce que le pass contient à gauche, ce qu'on achète à droite.
   La colonne d'achat est collante sous l'en-tête — le prix et le bouton
   restent à portée pendant qu'on lit le détail. `--header-h` est mesuré par
   site.js ; le repli à 82px vaut pour le premier rendu. */
.pass-detail {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(40px, 5vw, 72px); align-items: start;
}
.pass-detail-main { min-width: 0; }

/* ── Ce que comprend le pass ─────────────────────────────────────────────
   Une liste de valeur, pas une liste à puces : chaque ligne prend sa règle et
   sa coche, du même geste que .privacy-list de stay.css mais à l'endroit. */
.pass-includes ul {
  margin: 0; padding: 0; list-style: none;
  border-top: var(--rule);
}
.pass-includes li {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: baseline;
  padding: 16px 0; border-bottom: var(--hair);
  font-size: 16px;
}
.pass-includes li::before {
  content: "✓"; font-size: 14px; line-height: 1.5;
  font-weight: var(--font-heading-weight); color: var(--accent-text);
}

/* ── Comment ça marche ───────────────────────────────────────────────────
   Trois étapes, factuelles, reprises du fonctionnement réel de la billetterie.
   Même patron que .chain de stay.css, redit ici pour ne pas coupler deux
   modules qui n'ont rien à voir. */
.pass-steps { margin-top: clamp(44px, 5vw, 68px); }
.pass-steps-list { display: flex; flex-direction: column; }
.pass-step {
  display: grid; grid-template-columns: 40px 1fr; gap: 18px;
  padding: 20px 0; border-bottom: var(--hair);
}
.pass-step:first-child { border-top: var(--rule); }
.pass-step-n {
  margin: 0; font-size: 13px; font-weight: var(--font-heading-weight);
  letter-spacing: .04em; color: var(--accent-text);
}
.pass-step h3 { margin: 0 0 4px; font-size: 18px; }
.pass-step p { margin: 0; font-size: 14px; color: var(--ink-60); }

/* ── Le panneau d'achat ─────────────────────────────────────────────────
   Sur l'encre, comme la section Billets de l'accueil : le geste d'achat garde
   la même couleur d'un bout à l'autre du site. */
.pass-buy {
  position: sticky; top: calc(var(--header-h, 82px) + 20px);
  padding: 32px 30px 28px;
  background: var(--color-text); color: var(--color-bg);
}
.pass-buy-kicker {
  margin: 0 0 18px; font-size: 11px; letter-spacing: .16em;
  font-weight: 600; color: var(--ground-55);
}

/* Le prix affiché. Deux états, tenus par shop.js : la fourchette tant qu'aucun
   tarif n'est choisi, le prix exact ensuite. Les deux sortent des mêmes données
   que WooCommerce utilise (`get_available_variations()`), jamais d'une saisie. */
.pass-live { margin-bottom: 26px; }
.pass-live-note {
  margin: 0 0 4px; font-size: 11px; letter-spacing: .14em;
  font-weight: 600; color: var(--ground-55);
}
.pass-live-amount {
  margin: 0; font-size: clamp(40px, 4.4vw, 58px); line-height: 1;
  font-weight: var(--font-heading-weight); letter-spacing: -.03em;
}
.pass-live-stock {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 0 0; font-size: 13px; color: var(--ground-70);
}
.pass-live-stock::before {
  content: ""; width: 8px; height: 8px; flex: none;
  background: var(--ok-inverse);
}
/* Le prix d'un produit simple. WooCommerce y met <del> et <ins> quand une
   promotion court : le barre passe en retrait, le tarif reel garde la taille. */
.pass-live-amount--simple { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pass-live-amount--simple del {
  /* Le panneau est sombre : l'encre a 65 % y disparaissait, et le tarif
     plein — la moitie de l'argument d'une prevente — n'etait jamais visible. */
  font-size: .42em; color: var(--ground-55); text-decoration-thickness: .08em;
}
.pass-live-amount--simple ins { text-decoration: none; }

.pass-live-stock[data-level="low"] { color: var(--warn-inverse); font-weight: 600; }
.pass-live-stock[data-level="low"]::before { background: var(--warn-inverse); }

/* ── Le choix du tarif ───────────────────────────────────────────────────
   Trois tarifs à trois prix : un <select> les cache derrière un clic et n'en
   montre jamais qu'un. Ce sont de vrais boutons radio dans un <fieldset> —
   nom, prix et stock lisibles d'un coup, état porté par la case et pas par la
   seule couleur. */
.pass-tarifs { margin: 0 0 22px; padding: 0; border: 0; }
.pass-tarifs legend {
  padding: 0; margin-bottom: 12px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
/* Le <select> de WooCommerce reste en place et reste le champ posté ; il ne
   quitte l'écran que quand shop.js a confirmé que les cartes le remplacent. */
.pass-form.is-enhanced .pass-tarifs-native { display: none; }
.pass-form:not(.is-enhanced) .pass-tarif-cards { display: none; }
.pass-tarifs-native select { width: 100%; }

.pass-tarif-cards { display: flex; flex-direction: column; gap: 8px; }
.pass-tarif {
  position: relative; display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px 16px; cursor: pointer;
  border: 1px solid rgba(243, 242, 242, .28);
  transition: border-color .15s ease, background-color .15s ease;
}
.pass-tarif input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
/* La pastille : l'état ne tient pas qu'à la couleur du cadre. */
.pass-tarif-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(243, 242, 242, .55);
}
.pass-tarif:hover { background: rgba(243, 242, 242, .07); border-color: rgba(243, 242, 242, .55); }
.pass-tarif:has(input:checked) { border-color: var(--color-bg); background: rgba(243, 242, 242, .1); }
.pass-tarif:has(input:checked) .pass-tarif-dot {
  border-color: var(--color-bg); background: var(--color-bg);
  box-shadow: inset 0 0 0 4px var(--color-text);
}
.pass-tarif:has(input:focus-visible) { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }
.pass-tarif-name {
  display: block; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); font-size: 16px; line-height: 1.2;
}
.pass-tarif-stock {
  display: block; margin-top: 3px; font-size: 12px; color: var(--ground-55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pass-tarif-stock[data-level="low"] { color: var(--warn-inverse); }
.pass-tarif-price {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -.01em; white-space: nowrap;
}
/* Épuisé : la carte reste lisible et annoncée, elle cesse d'être cliquable. */
.pass-tarif[data-state="out"] { cursor: not-allowed; opacity: .5; }
.pass-tarif[data-state="out"]:hover { background: none; border-color: rgba(243, 242, 242, .28); }

/* ── Quantité et bouton ─────────────────────────────────────────────────
   WooCommerce compose ce bloc ; on ne fait que le poser en pleine largeur et
   lui donner la hauteur de frappe du site (56px, comme .page-hero-actions). */
.pass-buy .woocommerce-variation-add-to-cart {
  display: grid; grid-template-columns: 104px 1fr; gap: 10px; align-items: stretch;
}
.pass-buy .quantity { display: flex; }
.woocommerce .pass-buy .quantity .qty {
  width: 100%; min-height: 56px; text-align: center;
  background: transparent; color: var(--color-bg);
  border: 1px solid rgba(243, 242, 242, .45);
}
.woocommerce .pass-buy .quantity .qty:focus-visible {
  outline: 2px solid var(--color-accent-400); outline-offset: 2px;
}
.woocommerce .pass-buy .single_add_to_cart_button { width: 100%; min-height: 56px; }
/* Tant qu'aucun tarif n'est choisi WooCommerce désactive le bouton. Sur
   l'encre, le gris de `tickets.php` disparaît : il lui faut son propre ton. */
.woocommerce .pass-buy .single_add_to_cart_button.disabled,
.woocommerce .pass-buy .single_add_to_cart_button:disabled {
  background: rgba(243, 242, 242, .18); color: var(--ground-70);
}

/* Le prix et la disponibilité que WooCommerce écrit lui-même font double
   emploi avec .pass-live, qui dit la même chose plus haut et plus grand.
   La description de variante, elle, reste : c'est du contenu. */
.pass-buy .woocommerce-variation-price,
.pass-buy .woocommerce-variation-availability { display: none; }
.pass-buy .woocommerce-variation-description { font-size: 14px; color: var(--ground-70); }
.pass-buy .reset_variations { display: none; }

/* ── Réassurance ────────────────────────────────────────────────────────
   Ce que le visiteur veut savoir juste avant de cliquer. Rien d'inventé :
   chaque ligne décrit une mécanique que la billetterie applique vraiment. */
.pass-buy-trust {
  margin: 22px 0 0; padding: 18px 0 0; list-style: none;
  border-top: var(--rule-inverse);
  display: flex; flex-direction: column; gap: 10px;
}
.pass-buy-trust li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 13px; color: var(--ground-70);
}
.pass-buy-trust li::before { content: "→"; color: var(--color-accent-400); }
.pass-buy .tickets-note { margin: 14px 0 0; }

/* ── Pass complet ───────────────────────────────────────────────────────── */
.pass-buy--out .pass-live-amount { color: var(--ground-70); }
.pass-buy--out p { color: var(--ground-70); font-size: 14px; }
.pass-buy--out .btn { width: 100%; height: 56px; margin-top: 8px; }
/* Suspendu : le prix garde sa taille — c'est l'information —, la raison est
   en clair sous lui, et les deux boutons s'empilent : l'eteint, qui tient la
   place de l'action, puis la sortie vers les billets a l'unite. */
.pass-buy--pause .pass-pause { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--color-bg); }
.pass-buy--pause .btn { width: 100%; height: 56px; margin-top: 8px; }
/* Sur le panneau sombre : contour et lettrage clairs, pleine opacite — il
   doit se lire aussi bien que le prix au-dessus. */
.pass-buy--pause .btn[aria-disabled="true"] {
  margin-top: 18px; opacity: 1; pointer-events: none;
  color: var(--color-bg); border: 1px solid rgba(243, 242, 242, .8);
}

/* ── Barre d'achat mobile ────────────────────────────────────────────────
   Sous 1000px la colonne d'achat n'est plus collante : elle défile avec le
   reste. Cette barre la rappelle une fois qu'elle est sortie de l'écran. Elle
   ne duplique pas le bouton d'envoi — c'est un lien d'ancre vers le formulaire,
   donc aucun risque de double soumission, et le focus clavier ne peut pas se
   retrouver derrière (WCAG 2.2 « Focus Not Obscured »), ce dont le
   scroll-padding-bottom posé par shop.js finit de répondre. */
.pass-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--pad-x) calc(12px + env(safe-area-inset-bottom));
  background: var(--color-text); color: var(--color-bg);
  border-top: var(--rule-inverse);
  /* `visibility` autant que `transform` : une barre poussée hors de l'écran
     reste tabulable, et le clavier tomberait sur un lien invisible. La
     transition la retient jusqu'à la fin du glissement, puis la retire de
     l'ordre de tabulation. */
  visibility: hidden; transform: translateY(100%);
  transition: transform .22s ease, visibility 0s .22s;
}
.pass-bar.is-visible {
  visibility: visible; transform: none;
  transition: transform .22s ease, visibility 0s;
}
.pass-bar-amount {
  margin: 0; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; letter-spacing: -.02em; line-height: 1.1;
}
/* Le tarif barre ne suit pas dans la barre : avec le code de la devise, les
   deux montants ne tiennent plus sur la ligne d'un 412px et la barre doublait
   de hauteur. Le rappel du prix plein est deja dans le panneau ; ici il n'y a
   que le prix qu'on paie, a cote de l'action. Et sans le soulignement que le
   navigateur donne a <ins> : le panneau l'enlevait deja, la copie non. */
.pass-bar-amount del { display: none; }
.pass-bar-amount ins { text-decoration: none; }
.pass-bar-note { margin: 0; font-size: 11px; letter-spacing: .12em; color: var(--ground-55); }
.pass-bar .btn { height: 48px; padding: 0 22px; white-space: nowrap; }

/* ── Les autres pass ─────────────────────────────────────────────────────
   Reprend .passes / .pass de site.css tel quel ; il ne manque que le titre de
   section, qui doit passer en clair sur l'encre comme .tickets le fait. */
.pass-others { background: var(--color-text); color: var(--color-bg); }
.pass-others .h-section { color: var(--color-bg); margin-bottom: 40px; }

/* ═══════════════════════════════════════════════════════════════════════
   2. LE TUNNEL — panier
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Où j'en suis ────────────────────────────────────────────────────────
   Quatre étapes jusqu'au billet. Un tunnel de billetterie sans repère laisse
   croire que « Procéder au paiement » débite ; le repère dit qu'il en reste. */
.funnel {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: clamp(28px, 4vw, 44px); padding: 0; list-style: none;
  border-top: var(--rule-inverse);
}
.funnel-step {
  flex: 1 1 160px; padding: 18px 20px;
  border-right: var(--rule-inverse);
  font-size: 13px; color: var(--ground-55);
}
.funnel-step:first-child { padding-left: 0; }
.funnel-step:last-child { border-right: 0; padding-right: 0; }
.funnel-n {
  display: block; margin-bottom: 5px; font-size: 11px; letter-spacing: .14em; font-weight: 600;
}
.funnel-step[aria-current="step"] { color: var(--color-bg); }
.funnel-step[aria-current="step"] .funnel-label {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
}
.funnel-step[aria-current="step"] .funnel-n { color: var(--color-accent-400); }

/* ── La grille du panier ─────────────────────────────────────────────────
   Les lignes à gauche, le total à droite et collant : le montant et le bouton
   ne quittent jamais l'écran, même avec dix billets dans le panier. */
.cart-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: clamp(36px, 4vw, 64px); align-items: start;
}
.cart-main { min-width: 0; }

/* Le tableau reste un tableau — un panier est bien une donnée tabulaire, et
   les lecteurs d'écran en tirent l'association ligne/colonne. Ce qui change,
   c'est qu'il ressemble enfin au reste du site : des filets, pas des cases. */
.woocommerce table.shop_table.cart {
  width: 100%; margin: 0; border: 0; border-collapse: collapse;
}
.woocommerce table.shop_table.cart thead th {
  padding: 0 0 12px; border: 0; border-bottom: var(--rule);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted); background: none;
}
.woocommerce table.shop_table.cart td {
  padding: 22px 0; border: 0; border-bottom: var(--hair); vertical-align: top;
}
.woocommerce table.shop_table.cart th.product-price,
.woocommerce table.shop_table.cart th.product-quantity,
.woocommerce table.shop_table.cart th.product-subtotal,
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-quantity,
.woocommerce table.shop_table.cart td.product-subtotal { text-align: right; }
/* Trois colonnes alignees a droite se touchent : « QUANTITÉ » et « SOUS-TOTAL »
   se lisaient comme un seul intitule. */
.woocommerce table.shop_table.cart th.product-price,
.woocommerce table.shop_table.cart th.product-quantity,
.woocommerce table.shop_table.cart th.product-subtotal,
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-quantity,
.woocommerce table.shop_table.cart td.product-subtotal { padding-left: 24px; }
.woocommerce table.shop_table.cart td.product-price,
.woocommerce table.shop_table.cart td.product-subtotal { font-size: 15px; white-space: nowrap; }
.woocommerce table.shop_table.cart td.product-subtotal {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px;
}
.cart-line-name {
  display: block; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); font-size: 18px; line-height: 1.2;
  color: var(--color-text); text-decoration: none;
}
.cart-line-name:hover { color: var(--accent-text); }
.cart-line-meta { margin: 6px 0 0; font-size: 13px; color: var(--ink-60); }
.cart-line-meta p { margin: 0; }

/* Retirer : un lien nu marqué « × » ne dit pas ce qu'il retire, et 14px de
   cible échoue à la règle des 44px. Il redevient un bouton étiqueté. */
.woocommerce table.shop_table.cart td.product-remove { width: 44px; padding-right: 12px; }
.woocommerce table.shop_table.cart td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -10px 0 0 -10px;
  font-size: 20px; line-height: 1; color: var(--ink-muted);
  background: none; border-radius: 0; text-decoration: none;
}
.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
  color: var(--color-bg); background: var(--canada-red);
}

/* Quantité : 48px de haut comme tous les champs du site, et une largeur qui
   n'écrase pas la colonne. */
.woocommerce table.shop_table.cart td.product-quantity .quantity { display: inline-flex; }
.woocommerce table.shop_table.cart td.product-quantity .qty { width: 84px; text-align: center; }

/* Le nom des participants — champ du thème parent, jamais habillé jusqu'ici. */
.se-participants { margin-top: 14px; padding-top: 14px; border-top: var(--hair); }
.se-participants__label {
  margin: 0 0 8px; font-family: var(--font-heading);
  font-weight: var(--font-heading-weight); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.se-participants__hint {
  display: block; margin-top: 3px; font-family: var(--font-body);
  font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--ink-60);
}
.woocommerce .se-participants__input { display: block; width: min(320px, 100%); margin-bottom: 8px; }
.woocommerce .se-participants__input:last-child { margin-bottom: 0; }

/* ── Actions sous les lignes ─────────────────────────────────────────────
   Le code promo est replié : il ne concerne qu'une minorité et, ouvert par
   défaut, il invite tout le monde à partir chercher un code ailleurs. */
.woocommerce table.shop_table.cart td.actions { padding: 24px 0 0; border-bottom: 0; }
.cart-actions {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 20px;
}
.cart-coupon > summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; padding: 6px 0; min-height: 44px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; color: var(--accent-text);
}
.cart-coupon > summary::-webkit-details-marker { display: none; }
.cart-coupon > summary::before { content: "+"; font-size: 18px; line-height: 1; }
.cart-coupon[open] > summary::before { content: "–"; }
.cart-coupon-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.woocommerce .cart-coupon-row .input-text { width: min(220px, 100%); }
.woocommerce .cart-coupon-row .button { min-height: 48px; padding: 0 20px; font-size: 13px; }
/* « Mettre à jour » est une action de correction, pas la sortie du panier :
   elle ne doit pas porter le même rouge que « Procéder au paiement ». */
/* Avec JavaScript, le panier se met à jour seul (shop.js) : le bouton n'a
   plus de raison d'être à l'écran. Il reste dans le DOM — c'est lui que le
   script « clique » — et visible sans JavaScript. Cinq classes : la feuille
   « smallscreen » de WooCommerce le remet en `block` avec quatre. */
.js .woocommerce .cart-actions button.button[name="update_cart"] { display: none; }
.woocommerce .cart-actions button[name="update_cart"] {
  min-height: 48px; padding: 0 20px; font-size: 13px;
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-divider);
}
.woocommerce .cart-actions button[name="update_cart"]:hover {
  background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text);
}
.woocommerce .cart-actions button[name="update_cart"]:disabled { opacity: .4; }

/* ── Le récapitulatif ────────────────────────────────────────────────────
   Sur l'encre, comme le panneau d'achat de la page produit : c'est le même
   geste, à deux écrans d'intervalle. */
/* `woocommerce-layout.css` fait flotter ce bloc a droite sur 48 % de sa
   colonne, via `.woocommerce .cart-collaterals .cart_totals` — trois classes.
   La grille lui donne deja sa colonne : il lui faut donc toute sa largeur, et
   le selecteur qui l'annule doit peser autant que celui qui le pose. */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  position: sticky; top: calc(var(--header-h, 82px) + 20px);
  width: 100%; float: none; padding: 30px 28px;
  background: var(--color-text); color: var(--color-bg);
}
/* Meme raison : WooCommerce fige la colonne des intitules a 35 %, ce qui
   coupe « Sous-total » des que le panneau se resserre. */
.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table th { width: auto; }
.woocommerce .cart_totals h2 {
  margin: 0 0 20px; font-size: 11px; letter-spacing: .16em;
  font-weight: 600; font-family: var(--font-body); color: var(--ground-55);
  text-transform: uppercase;
}
.woocommerce .cart_totals table.shop_table {
  width: 100%; margin: 0; border: 0; border-collapse: collapse;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: 12px 0; border: 0; border-bottom: var(--rule-inverse);
  background: none; font-size: 14px;
}
.woocommerce .cart_totals table.shop_table th {
  font-family: var(--font-body); font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--ground-70); text-align: left;
}
.woocommerce .cart_totals table.shop_table td { text-align: right; }
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
  border-bottom: 0; padding-top: 18px;
}
.woocommerce .cart_totals table.shop_table tr.order-total th {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-bg);
}
.woocommerce .cart_totals table.shop_table tr.order-total td {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -.03em; line-height: 1;
}
.woocommerce .cart_totals tr.cart-discount th,
.woocommerce .cart_totals tr.cart-discount td { color: var(--ok-inverse); }
.woocommerce .cart_totals .wc-proceed-to-checkout { padding: 20px 0 0; }
.woocommerce .cart_totals .wc-proceed-to-checkout .button { width: 100%; }
.cart-totals-trust {
  margin: 18px 0 0; padding: 16px 0 0; list-style: none;
  border-top: var(--rule-inverse);
  display: flex; flex-direction: column; gap: 9px;
}
.cart-totals-trust li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 13px; color: var(--ground-70);
}
.cart-totals-trust li::before { content: "→"; color: var(--color-accent-400); }

/* ── Panier vide ─────────────────────────────────────────────────────────
   Un panier vide n'est pas une erreur : c'est le début du parcours. Il porte
   donc une sortie, pas seulement un constat. */
.cart-empty-state { max-width: 52ch; }
.cart-empty-state h2 {
  margin: 0 0 14px; font-weight: 400; letter-spacing: -.025em; line-height: 1.04;
  font-size: clamp(30px, 3.6vw, 46px);
}
.cart-empty-state h2 strong { font-weight: var(--font-heading-weight); }
.cart-empty-state p { margin: 0 0 28px; font-size: 17px; color: var(--ink-muted); }
.woocommerce .cart-empty-state .btn { height: 56px; padding: 0 28px; }

/* ── Les messages de WooCommerce ─────────────────────────────────────────
   « Pass ajouté au panier », « code promo appliqué », les erreurs : c'est le
   seul retour que reçoit le visiteur après un clic. Il arrivait au mauve. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  margin: 0 0 28px; padding: 16px 20px; list-style: none;
  background: var(--color-surface); color: var(--color-text);
  border: 0; border-left: 4px solid var(--accent-text);
  font-size: 15px;
}
.woocommerce .woocommerce-message { border-left-color: var(--ok-text); }
.woocommerce .woocommerce-error { border-left-color: var(--canada-red); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { display: none; }
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
  margin-left: auto; min-height: 44px; padding: 0 18px; font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .pass-detail { grid-template-columns: 1fr; }
  .pass-buy { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
  .woocommerce .cart-collaterals .cart_totals,
  .woocommerce-page .cart-collaterals .cart_totals { position: static; }
}

/* La barre d'achat ne sert que là où la colonne collante a disparu. */
@media (max-width: 1080px) {
  .pass-bar { display: flex; }
}

@media (max-width: 760px) {
  .pass-buy { margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x); }

  /* `page.css` empile les repères en une colonne : sur la page d'un pass, quatre
     repères empilés font mille pixels de bandeau avant la première ligne de
     contenu. Ils tiennent sur deux colonnes sans rien perdre. */
  .pass-page .page-facts { grid-template-columns: 1fr 1fr; }
  .pass-page .page-fact { padding: 16px 0; }
  .pass-page .page-fact:nth-child(odd) { padding-right: 18px; border-right: var(--rule-inverse); }

  /* Le repère du tunnel passe sur deux colonnes : le filet ne separe alors que
     les paires, et la derniere etape n'en porte aucun — sinon il se retrouve
     contre le bord droit de la page, a separer d'un vide. */
  .funnel-step { flex-basis: 50%; padding: 14px 16px 14px 0; border-right: 0; }
  .funnel-step:nth-child(odd) { border-right: var(--rule-inverse); padding-right: 16px; }
  .funnel-step:last-child { border-right: 0; }

  .cart-actions { flex-direction: column; align-items: stretch; }
  .woocommerce .cart-actions button[name="update_cart"] { width: 100%; }
  .woocommerce .cart-coupon-row .input-text { width: 100%; }
  .woocommerce .cart-coupon-row .button { width: 100%; }
}

/* ── Le panier replie ────────────────────────────────────────────────────
   `woocommerce-smallscreen.css` empile le tableau sous 768px et pose ses
   propres regles en `!important` : tout aligne a droite, un zebra gris une
   ligne sur deux, l'intitule flotte a gauche suivi de deux points. Trois
   choix qui ne sont pas ceux du site — et qui envoyaient le nom du pass, les
   champs participants et le code promo se coller au bord droit.

   Ce bloc reprend exactement le point de rupture de WooCommerce, 768px, et
   pas les 760px du theme : entre les deux, c'est sa mise en forme qui
   s'appliquerait, seule. Le `!important` n'est ici que la reponse au sien. */
@media (max-width: 768px) {
  .woocommerce table.shop_table.cart tr.cart_item {
    display: block; padding: 20px 0; border-bottom: var(--hair);
  }
  /* Le zebra de WooCommerce n'existe pas dans Modernist : ce sont des filets
     qui separent les lignes, pas des aplats. */
  .woocommerce table.shop_table_responsive.cart tr:nth-child(2n) td,
  .woocommerce-page table.shop_table_responsive.cart tr:nth-child(2n) td { background-color: transparent; }

  /* Une ligne de valeur : l'intitule a gauche, le montant a droite. */
  .woocommerce table.shop_table.cart tr.cart_item td {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 6px 0; border: 0; text-align: right !important;
  }
  .woocommerce table.shop_table.cart tr.cart_item td::before {
    content: attr(data-title); float: none;
    font-family: var(--font-body); font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; font-weight: 600; color: var(--ink-muted);
  }

  /* Le nom du pass et ses champs sont du texte : ils restent a gauche. */
  .woocommerce table.shop_table.cart tr.cart_item td.product-name {
    display: block; padding-top: 0; text-align: left !important;
  }
  .woocommerce table.shop_table.cart tr.cart_item td.product-remove {
    display: flex; width: auto; justify-content: flex-end; padding: 0;
  }
  .woocommerce table.shop_table.cart tr.cart_item td.product-name::before,
  .woocommerce table.shop_table.cart tr.cart_item td.product-remove::before { content: none; }
  .woocommerce table.shop_table.cart td.actions { display: block; text-align: left !important; }
  .woocommerce table.shop_table.cart td.actions::before { content: none; }
  .woocommerce table.shop_table.cart td.product-remove a.remove { margin: 0; }
}

/* ── Mouvement ───────────────────────────────────────────────────────────
   motion.css coupe déjà ses animations sous prefers-reduced-motion ; les deux
   transitions ajoutées ici doivent en faire autant. */
@media (prefers-reduced-motion: reduce) {
  .pass-bar, .pass-tarif { transition: none; }
  .pass-bar { transition: visibility 0s; }
}