/* ==========================================================================
   06 — PANIER, COMMANDE, COMPTE, MESSAGES

   Relevé du tunnel réel le 21 août 2026, panier rempli :
     · le panier a six colonnes, dont une vide pour la suppression
     · le sélecteur de quantité d'OceanWP produit `.minus` / `.plus`
     · « Expédier à une adresse différente » est coché par défaut : 719 px
       de formulaire dépliés sans que personne ne l'ait demandé
     · deux cases d'inscription à la lettre d'information cohabitent,
       dont une en anglais
     · la colonne de gauche fait 2073 px, celle de droite 852 px : 1221 px
       de vide à droite pendant qu'on remplit le formulaire
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. JAUGE DE LIVRAISON GRATUITE — DEMENAGEE DANS 05-entete.css

   Elle a vecu ici jusqu'au 5 septembre 2026, et c'etait une erreur de rangement
   au consequences reelles : la jauge s'affiche aussi dans le PANNEAU DU
   MINI-PANIER de l'en-tete, present sur TOUTES les pages du site, alors que
   cette feuille-ci n'est chargee que sur le panier, la commande et le compte.

   Le defaut est reste invisible pendant deux semaines parce que le chargement
   conditionnel ne fonctionnait pas : `cp-blocs` dependait de `cp-tunnel`, donc
   WordPress reenfilait celle-ci a l'impression, meme apres un `wp_dequeue_style`.
   Le jour ou le chargement conditionnel a ete repare (functions.php, meme date),
   la jauge du panneau deroulant aurait perdu tous ses styles sur l'accueil.

   Regle a retenir : une regle qui sert dans l'en-tete ou le pied appartient a la
   feuille de l'en-tete ou du pied, jamais a celle d'une page.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. PANIER

   MESURES DU 4 SEPTEMBRE 2026, sur la préprod, fenêtre de 1440 px :
     · la zone de contenu faisait 813 px et la barre latérale 387 px — vide,
       aucun widget n'y est déclaré. Corrigé côté PHP
       (`cp_tunnel_pleine_largeur()`), le tunnel passe en pleine largeur ;
     · le bloc des totaux flottait à 48 % sous le tableau, au milieu de la
       page, sans rapport visuel avec lui ;
     · « Mettre à jour le panier » et « Valider la commande » avaient la même
       forme et la même couleur — deux actions de poids très différents ;
     · les noms de produits sortaient en `text-transform: capitalize`
       (« Coffret Découverte »), un réglage d'OceanWP.
   -------------------------------------------------------------------------- */

/* 2.1 — LA MISE EN PAGE
   Le tableau et les totaux se répondent, côte à côte. Les totaux suivent le
   défilement : sur un panier long, le montant et le bouton de commande
   restent à l'écran.

   La grille est posée sur le conteneur `.woocommerce` du shortcode, seul
   parent commun du formulaire et des totaux. Tout ce qui n'est ni l'un ni
   l'autre — étapes, messages, jauge — reprend la pleine largeur. */
@media (min-width: 981px) {
  body.cp.woocommerce-cart .entry .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--cp-e-4) var(--cp-e-6);
  }
  body.cp.woocommerce-cart .entry .woocommerce > *:not(.woocommerce-cart-form):not(.cart-collaterals) {
    grid-column: 1 / -1;
  }
  body.cp.woocommerce-cart .cart-collaterals {
    position: sticky;
    top: var(--cp-collant);
  }
}
/* WooCommerce fait flotter ces deux blocs à 48 % : la grille ne peut pas
   faire son travail tant que le flottement subsiste. */
body.cp.woocommerce-cart .cart-collaterals,
body.cp.woocommerce-cart .cart-collaterals .cart_totals,
body.cp.woocommerce-cart .cart-collaterals .cross-sells {
  width: 100%;
  float: none;
  margin: 0;
}
body.cp .woocommerce-cart-form { margin-bottom: var(--cp-e-5); }

/* 2.2 — LE TABLEAU
   -------------------------------------------------------------------------- */

body.cp .woocommerce table.shop_table.cart {
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--cp-blanc);
  margin: 0;
}
body.cp .woocommerce table.shop_table.cart thead th {
  background: var(--cp-gris-voile);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-xs);
  font-weight: 600;
  letter-spacing: var(--cp-ls-surtitre);
  text-transform: uppercase;
  color: var(--cp-texte-doux);
  border: 0;
  padding: var(--cp-e-3) var(--cp-e-4);
  text-align: left;
}
body.cp .woocommerce table.shop_table.cart thead th.product-price,
body.cp .woocommerce table.shop_table.cart thead th.product-subtotal { text-align: right; }
body.cp .woocommerce table.shop_table.cart td {
  border: 0;
  border-top: 1px solid var(--cp-trait);
  padding: var(--cp-e-4);
  vertical-align: middle;
}
body.cp .woocommerce table.shop_table.cart tr.cart_item:first-child td { border-top: 0; }
body.cp .woocommerce table.shop_table.cart td.product-thumbnail { width: 88px; padding-right: 0; }
body.cp .woocommerce table.shop_table.cart td.product-thumbnail img {
  width: 72px;
  height: 72px;
  max-width: none;              /* OceanWP borne les vignettes du panier à 60 px */
  object-fit: cover;
  border-radius: var(--cp-r-sm);
  border: 1px solid var(--cp-trait);
  display: block;
}
body.cp .woocommerce table.shop_table.cart td.product-name a {
  font-family: var(--cp-font-titre);
  /* 1.05rem, la valeur du composant `.cp-tab .nom` de la maquette. En
     `--cp-t-l` (24px), « Coffret découverte » passait à la ligne dans une
     colonne que les colonnes de chiffres, insécables, laissent à 200 px. */
  font-size: 1.05rem;
  line-height: var(--cp-lh-titre);
  color: var(--cp-encre);
  text-decoration: none;
  text-transform: none;         /* « Coffret Découverte » redevient « Coffret découverte » */
}
body.cp .woocommerce table.shop_table.cart td.product-name a:hover { color: var(--cp-bordeaux); }
body.cp .woocommerce table.shop_table.cart .variation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35em;
  font-size: var(--cp-t-xs);
  color: var(--cp-texte-doux);
  margin-top: 0.25em;
}
body.cp .woocommerce table.shop_table.cart .variation dt,
body.cp .woocommerce table.shop_table.cart .variation dd { margin: 0; float: none; font-weight: 400; }
body.cp .woocommerce table.shop_table.cart .variation dd p { margin: 0; }

body.cp .woocommerce table.shop_table.cart td.product-price,
body.cp .woocommerce table.shop_table.cart td.product-subtotal {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cp-encre);
  text-align: right;
  white-space: nowrap;
}
body.cp .woocommerce table.shop_table.cart td.product-price { font-weight: 400; color: var(--cp-texte-doux); }
body.cp .woocommerce table.shop_table.cart td.product-quantity { width: 1%; }
/* La colonne du nom absorbe la largeur restante : sans cela le tableau
   répartit à parts égales et « Coffret découverte » passe à la ligne. */
body.cp .woocommerce table.shop_table.cart td.product-name { width: 100%; }
body.cp .woocommerce table.shop_table.cart thead th { white-space: nowrap; }

/* Retirer un article : une croix discrète qui rougit au survol, pas un
   bouton plein qui rivalise avec « Valider la commande ». */
body.cp .woocommerce table.shop_table.cart td.product-remove { width: 56px; padding-right: 0; }
body.cp .woocommerce table.shop_table.cart td.product-remove a.remove {
  width: 32px; height: 32px;
  aspect-ratio: 1;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--cp-texte-doux);
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--cp-vite) var(--cp-courbe),
              color var(--cp-vite) var(--cp-courbe);
}
body.cp .woocommerce table.shop_table.cart td.product-remove a.remove::before,
body.cp .woocommerce table.shop_table.cart td.product-remove a.remove::after { content: none; }
body.cp .woocommerce table.shop_table.cart td.product-remove a.remove:hover,
body.cp .woocommerce table.shop_table.cart td.product-remove a.remove:focus-visible {
  background: var(--cp-f-flamboyant-voile);
  color: var(--cp-f-flamboyant-texte);
}

/*
 * LA CROIX ELLE-MEME
 *
 * Le caractere « × » n'est pas centre sur la hauteur de sa ligne : il est
 * cale sur l'axe mathematique de la police, sensiblement au-dessus du milieu
 * optique, et sa position dependait donc de la fonte chargee. Un trace SVG
 * de dimensions fixes, centre par le conteneur, ne depend de rien.
 *
 * Il est pose par le filtre `woocommerce_cart_item_remove_link` dans
 * mu-plugins/cocopassion-boutique.php, et sert aux deux paniers : celui de
 * la page et celui du panneau deroulant. Les traits heritent de `color`,
 * la transition de teinte au survol continue donc de fonctionner.
 */
body.cp .cp-croix {
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
  overflow: visible;
}
body.cp .cp-mini__retirer .cp-croix { width: 13px; height: 13px; }

/* Sélecteur de quantité. OceanWP produit `<a class="minus">` et
   `<a class="plus">` autour d'un `input[type=number]`. On en fait un groupe
   compact, avec des cibles de 40 px conformes à WCAG 2.5.8. */
body.cp .quantity {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--cp-trait-fort);
  border-radius: var(--cp-r-sm);
  overflow: hidden;
  background: var(--cp-blanc);
}
body.cp .quantity a.minus,
body.cp .quantity a.plus {
  width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  color: var(--cp-encre);
  background: var(--cp-blanc);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  user-select: none;
  transition: background-color var(--cp-vite) var(--cp-courbe), color var(--cp-vite) var(--cp-courbe);
}
body.cp .quantity a.minus:hover,
body.cp .quantity a.plus:hover { background: var(--cp-bordeaux); color: var(--cp-blanc); }
body.cp .quantity input.qty {
  width: 48px;
  min-height: 40px;
  border: 0;
  border-inline: 1px solid var(--cp-trait);
  border-radius: 0;
  background: var(--cp-blanc);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cp-encre);
  padding-inline: 0;
  -moz-appearance: textfield;
}
body.cp .quantity input.qty::-webkit-outer-spin-button,
body.cp .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 2.3 — LA LIGNE D'ACTIONS
   Elle porte deux choses de poids inégal : le code promo, replié, et la mise
   à jour du panier — une action de correction, pas une action de vente. Elle
   reste donc en bouton secondaire, à droite, et n'entre pas en concurrence
   avec « Valider la commande ».
   -------------------------------------------------------------------------- */

/*
 * Cette cellule porte `colspan="6"`. Lui donner `display: flex` — ou `block`,
 * ou `grid` — la sort de l'algorithme du tableau : mesuré, elle retombait à
 * 140 px, la largeur de la première colonne, et empilait ses trois enfants
 * en une colonne de 108 px. Elle reste donc une cellule, et ce sont ses
 * enfants qui sont placés, par flottement.
 */
body.cp .woocommerce table.shop_table.cart td.actions {
  display: table-cell;
  padding: var(--cp-e-4);
  background: var(--cp-fond);
  border-top: 1px solid var(--cp-trait);
}
body.cp .woocommerce table.shop_table.cart td.actions::after {
  content: "";
  display: table;
  clear: both;
}
/*
 * Le code promo s'ouvre vers la droite, pas vers le bas.
 *
 * Deplie sous le titre, il poussait « Continuer mes achats » et tout le bas
 * de page vers le bas a chaque clic. A droite, il se deroule dans un espace
 * deja vide : rien ne bouge sous lui, et le champ arrive a hauteur du regard
 * qui vient de cliquer.
 *
 * `<details>` en `display: flex` : le resume est le premier element, le corps
 * le second — et le corps n'existe dans le rendu que lorsque le bloc est
 * ouvert, donc rien a masquer ni a annuler a l'etat ferme. La largeur n'est
 * plus fixee : la pastille epouse son titre, puis s'allonge.
 */
body.cp .woocommerce table.shop_table.cart td.actions > details.cp-repli {
  float: left;
  width: auto;
  max-width: 100%;
  margin: 0 var(--cp-e-4) 0 0;
  display: flex;
  align-items: center;
}
body.cp .woocommerce table.shop_table.cart td.actions > details.cp-repli > summary {
  flex: none;
}
body.cp .woocommerce table.shop_table.cart td.actions > details.cp-repli > div {
  padding: var(--cp-e-2) var(--cp-e-4) var(--cp-e-2) 0;
}
/*
 * Le champ et son bouton tiennent sur une ligne, ou l'ouverture vers la
 * droite n'aurait servi a rien : le bloc reprendrait en hauteur ce qu'il a
 * gagne en largeur. Mesure : le bouton « Appliquer le code promo » fait
 * 242px ; 180px de champ, 8px d'ecart et 195px de titre laissent encore
 * 100px de marge dans la cellule.
 */
body.cp .woocommerce table.shop_table.cart td.actions .coupon { flex-wrap: nowrap; }
body.cp .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
  flex: 0 0 180px;
  width: 180px;
  min-width: 0;
}
body.cp .woocommerce table.shop_table.cart td.actions .coupon button { flex: none; white-space: nowrap; }
/* Toujours sur sa propre ligne, à gauche : à trois flottants, l'ordre de
   retour à la ligne dépend de quelques pixels de largeur de police. */
body.cp .woocommerce table.shop_table.cart td.actions > .cp-continuer { float: left; clear: left; margin-top: var(--cp-e-3); }
body.cp .woocommerce table.shop_table.cart td.actions > button[name="update_cart"] { float: right; }

body.cp .woocommerce .cart .coupon {
  display: flex;
  gap: var(--cp-e-2);
  align-items: center;
  flex-wrap: wrap;
  float: none;
  width: auto;
}
body.cp .woocommerce .cart .coupon input#coupon_code {
  width: auto;
  min-width: 180px;
  min-height: 44px;
  margin: 0;
}

/* Le bouton de mise à jour, en secondaire. */
body.cp .woocommerce button[name="update_cart"] {
  background: transparent;
  border-color: var(--cp-trait-fort);
  color: var(--cp-encre);
  font-size: var(--cp-t-s);
  padding: 0.8em 1.4em;
  min-height: 44px;
  text-transform: none;
  letter-spacing: 0.02em;
}
body.cp .woocommerce button[name="update_cart"]:hover:not(:disabled) {
  background: var(--cp-encre);
  border-color: var(--cp-encre);
  color: var(--cp-blanc);
}
body.cp .woocommerce button[name="update_cart"]:disabled {
  background: transparent;
  border-color: var(--cp-trait);
  color: var(--cp-texte-doux);
}

/*
 * LE BOUTON QUE L'ON NE VOIT PLUS
 *
 * La quantite se met a jour toute seule des qu'on la change : le bouton
 * « Mettre a jour le panier » n'a plus rien a demander. Il reste pourtant
 * dans la page, et c'est volontaire — c'est lui que le script actionne, et
 * c'est lui qui reapparait si le script ne se charge pas, puisque la classe
 * `cp-panier-auto` n'est posee sur <body> que par le script lui-meme.
 *
 * Il est masque au motif de `.screen-reader-text` et non par
 * `display: none` : la mise a jour automatique passe par un clic sur ce
 * bouton, et un element retire du rendu ne recoit pas de clic partout de la
 * meme facon. Le masquage par decoupe le laisse aussi atteignable au
 * clavier et annonce par une synthese vocale — qui y gagne un moyen
 * explicite de valider, la ou la souris n'a plus rien a faire.
 */
body.cp.cp-panier-auto .woocommerce table.shop_table.cart td.actions > button[name="update_cart"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;       /* la regle de base impose 44px de cible tactile */
  border: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Retour à la boutique, posé par `cp_lien_continuer_les_achats()`. Un lien,
   pas un bouton : quitter le panier n'est pas l'action que l'on encourage. */
body.cp .cp-continuer {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  text-transform: none;      /* sinon « Continuer Mes Achats » */
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  color: var(--cp-texte-doux);
  text-decoration: none;
}
body.cp .cp-continuer:hover { color: var(--cp-bordeaux); }
body.cp .cp-continuer svg { width: 15px; height: 15px; flex: none; }

/* Code promo : replié par défaut. Une ligne dépliée invite à quitter la page
   pour aller chercher un code qu'on n'a pas. */
body.cp details.cp-repli {
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  background: var(--cp-blanc);
  padding: 0;
  margin-bottom: var(--cp-e-4);
  overflow: hidden;
}
body.cp details.cp-repli > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--cp-e-3) var(--cp-e-4);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 500;
  color: var(--cp-texte);
  text-transform: none;      /* sinon « J'ai Un Code Promo » */
  display: flex;
  align-items: center;
  gap: var(--cp-e-2);
  min-height: 44px;
}
body.cp details.cp-repli > summary::-webkit-details-marker { display: none; }
/*
 * Le « + » etait un caractere, et un caractere ne se centre pas : mesure a
 * 13,6px de fonte pour une hauteur de ligne de 22,44px dans un rond de 20px,
 * il debordait sa boite et se calait sur l'axe mathematique de la police,
 * sensiblement au-dessus du milieu optique. Le meme defaut que la croix de
 * suppression, pour la meme raison.
 *
 * Il est desormais trace : deux degrades pleins, l'un horizontal, l'autre
 * vertical, poses au centre exact de la boite. Le centrage ne depend plus
 * d'aucune metrique, et l'ouverture escamote la barre verticale — un « + »
 * qui devient un « − » sans changer de contenu, donc sans saut.
 */
body.cp details.cp-repli > summary::before {
  content: "";
  width: 20px; height: 20px;
  box-sizing: border-box;
  border: 1px solid var(--cp-trait-fort);
  border-radius: 50%;
  color: var(--cp-bordeaux);
  flex: none;
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: 9px 1.5px, 1.5px 9px;
  transition: background-size var(--cp-vite) var(--cp-courbe);
}
body.cp details.cp-repli[open] > summary::before {
  background-size: 9px 1.5px, 1.5px 0;
}
body.cp details.cp-repli > div { padding: 0 var(--cp-e-4) var(--cp-e-4); }

/* 2.4 — LES TOTAUX
   -------------------------------------------------------------------------- */

/*
 * MESURE : le rembourrage calcule valait `0px 20px 20px` — zero en haut. Le
 * titre « Total panier » touchait le filet bordeaux pendant que « Valider la
 * commande » gardait ses 20px en bas ; le bloc paraissait glisser vers le
 * haut.
 *
 * La regle du theme etait pourtant ecrite. Elle perdait :
 * `.woocommerce .cart-collaterals .cart_totals` de WooCommerce pese trois
 * classes, `body.cp .cart_totals` deux — et `woocommerce.min.css` est en
 * plus charge apres nos feuilles. Le second selecteur ci-dessous lui passe
 * devant ; le premier reste pour les cas hors `.cart-collaterals`.
 */
body.cp .cart_totals,
body.cp .woocommerce .cart-collaterals .cart_totals {
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait);
  border-top: 3px solid var(--cp-bordeaux);
  border-radius: var(--cp-r-md);
  padding: var(--cp-e-5);
}
body.cp .woocommerce .cart-collaterals .cart_totals h2 {
  font-family: var(--cp-font-titre);
  font-size: var(--cp-t-l);
  line-height: var(--cp-lh-titre);
  color: var(--cp-encre);
  background: none;
  border: 0;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
  margin: 0 0 var(--cp-e-4);
}
body.cp .cart_totals table.shop_table {
  border: 0;
  background: transparent;
  margin: 0;
  width: 100%;
}
body.cp .cart_totals table.shop_table th,
body.cp .cart_totals table.shop_table td {
  border: 0;
  border-bottom: 1px solid var(--cp-trait);
  padding: var(--cp-e-3) 0;
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}
body.cp .cart_totals table.shop_table th {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cp-texte-doux);
  text-align: left;
}
body.cp .cart_totals table.shop_table td { text-align: right; font-weight: 600; color: var(--cp-encre); }
body.cp .cart_totals tr.order-total th,
body.cp .cart_totals tr.order-total td {
  border-bottom: 0;
  padding-top: var(--cp-e-4);
  font-size: var(--cp-t-l);
  color: var(--cp-encre);
}
body.cp .cart_totals tr.order-total th { font-weight: 600; }
body.cp .cart_totals .woocommerce-shipping-destination,
body.cp .cart_totals .shipping-calculator-button {
  font-size: var(--cp-t-xs);
  color: var(--cp-texte-doux);
}

body.cp .wc-proceed-to-checkout { padding: 0; margin-top: var(--cp-e-4); }
body.cp .wc-proceed-to-checkout .checkout-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  font-size: var(--cp-t-m);
  text-transform: none;
  letter-spacing: 0.01em;
  background-color: var(--cp-bordeaux);
  border-color: var(--cp-bordeaux);
  color: var(--cp-blanc);
}
body.cp .wc-proceed-to-checkout .checkout-button:hover {
  background-color: var(--cp-bordeaux-fonce);
  border-color: var(--cp-bordeaux-fonce);
  color: var(--cp-blanc);
}

/* La réassurance de la fiche produit, reprise sous les totaux : les trois
   questions qu'on se pose avant de payer (port, retrait, fabrication) sont
   les mêmes qu'avant d'ajouter au panier. Le composant est celui de
   07-blocs.css, sans une ligne de style en plus. */
body.cp .cart-collaterals .cp-reassurance { margin-top: var(--cp-e-4); }

/* 2.5 — PANIER VIDE
   -------------------------------------------------------------------------- */

body.cp .cart-empty.woocommerce-info {
  display: grid;
  justify-items: center;
  gap: var(--cp-e-2);
  background: var(--cp-blanc);
  border: 1px dashed var(--cp-trait-fort);
  border-radius: var(--cp-r-md);
  text-align: center;
  padding: var(--cp-e-8) var(--cp-e-5);
  font-family: var(--cp-font-titre);
  font-size: var(--cp-t-xl);
  color: var(--cp-encre);
}
body.cp .cart-empty.woocommerce-info::before { display: none; }
body.cp .return-to-shop { text-align: center; margin-top: var(--cp-e-4); }

/* --------------------------------------------------------------------------
   3. ÉTAPES DU TUNNEL
   Le tunnel n'indique aujourd'hui aucune progression. Trois repères
   suffisent : ils disent où l'on en est et combien il reste.
   -------------------------------------------------------------------------- */

body.cp .cp-etapes {
  display: flex;
  align-items: center;
  gap: var(--cp-e-2);
  list-style: none;
  margin: 0 0 var(--cp-e-6);
  padding: 0;
  flex-wrap: wrap;
}
body.cp .cp-etapes li {
  display: flex;
  align-items: center;
  gap: var(--cp-e-2);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  color: var(--cp-texte-doux);
}
body.cp .cp-etapes li::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--cp-trait-fort);
  margin-inline: var(--cp-e-2);
}
body.cp .cp-etapes li:last-child::after { display: none; }
body.cp .cp-etapes .cp-etapes__n {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cp-trait-fort);
  font-size: var(--cp-t-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.cp .cp-etapes li.est-faite { color: var(--cp-f-canne-texte); }
body.cp .cp-etapes li.est-faite .cp-etapes__n {
  background: var(--cp-f-canne-voile);
  border-color: var(--cp-f-canne);
  color: var(--cp-f-canne-texte);
}
body.cp .cp-etapes li.est-active { color: var(--cp-encre); font-weight: 600; }
body.cp .cp-etapes li.est-active .cp-etapes__n {
  background: var(--cp-bordeaux);
  border-color: var(--cp-bordeaux);
  color: var(--cp-blanc);
}

/* --------------------------------------------------------------------------
   4. COMMANDE
   -------------------------------------------------------------------------- */

body.cp .woocommerce-checkout h3 {
  font-family: var(--cp-font-titre);
  font-size: var(--cp-t-l);
  color: var(--cp-encre);
  text-transform: none;
  letter-spacing: -0.01em;
  padding-bottom: var(--cp-e-3);
  border-bottom: 1px solid var(--cp-trait);
  margin-bottom: var(--cp-e-5);
}

body.cp .woocommerce-checkout .form-row { margin-bottom: var(--cp-e-4); padding: 0; }
body.cp .woocommerce-checkout .form-row label {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  font-weight: 500;
  color: var(--cp-texte);
  margin-bottom: var(--cp-e-2);
}
body.cp .woocommerce-checkout .required {
  color: var(--cp-f-flamboyant-texte);
  text-decoration: none;
  border: 0;
}
body.cp .woocommerce-checkout .form-row.woocommerce-invalid input,
body.cp .woocommerce-checkout .form-row.woocommerce-invalid select {
  border-color: var(--cp-f-flamboyant-texte);
  background: var(--cp-f-flamboyant-voile);
}
body.cp .woocommerce-checkout .form-row.woocommerce-validated input { border-color: var(--cp-f-canne); }

/* La case « expédier à une adresse différente » est décochée par défaut par
   le PHP. Le bloc adresse se replie donc, et on lui donne une transition
   pour que l'ouverture ne soit pas un saut de 719 px. */
body.cp .woocommerce-shipping-fields { margin-top: var(--cp-e-5); }
body.cp .woocommerce-shipping-fields h3#ship-to-different-address {
  display: flex;
  align-items: center;
  gap: var(--cp-e-3);
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-md);
  background: var(--cp-blanc);
  padding: var(--cp-e-4);
  margin-bottom: 0;
  font-size: var(--cp-t-m);
  font-family: var(--cp-font-texte);
  font-weight: 500;
  cursor: pointer;
}
body.cp .woocommerce-shipping-fields .shipping_address { padding-top: var(--cp-e-5); }

/* Récapitulatif : il suit le défilement au lieu de laisser 1221 px de vide
   à droite pendant qu'on remplit le formulaire. */
body.cp .woocommerce-checkout #order_review_heading,
body.cp .woocommerce-checkout #order_review { position: sticky; top: var(--cp-collant); }
@media (max-width: 860px) {
  body.cp .woocommerce-checkout #order_review_heading,
  body.cp .woocommerce-checkout #order_review { position: static; }
}
body.cp .woocommerce-checkout #order_review {
  background: var(--cp-blanc);
  border: 1px solid var(--cp-trait);
  border-top: 3px solid var(--cp-bordeaux);
  border-radius: var(--cp-r-md);
  padding: var(--cp-e-5);
}
body.cp .woocommerce-checkout-review-order-table { border: 0; background: transparent; }
body.cp .woocommerce-checkout-review-order-table th,
body.cp .woocommerce-checkout-review-order-table td {
  border: 0;
  border-bottom: 1px solid var(--cp-trait);
  padding: var(--cp-e-3) 0;
  font-variant-numeric: tabular-nums;
}
body.cp .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.cp .woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-bottom: 0;
  font-size: var(--cp-t-l);
  color: var(--cp-encre);
  padding-top: var(--cp-e-4);
}
/* Le pied de ce tableau porte le même gris #f7f7f7 et la même casse
   automatique que le bloc des totaux du panier (voir 04-woocommerce.css,
   section 1.4) : un bandeau gris froid au milieu du récapitulatif, et
   « Sous-Total » au lieu de « Sous-total ». */
body.cp .woocommerce-checkout-review-order-table tfoot th,
body.cp .woocommerce-checkout-review-order-table tfoot td {
  background: none;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cp-texte);
}
body.cp .woocommerce-checkout-review-order-table tfoot th { font-weight: 400; color: var(--cp-texte-doux); }
body.cp .woocommerce-checkout-review-order-table tfoot tr.order-total th { font-weight: 600; color: var(--cp-encre); }
body.cp .woocommerce-checkout-review-order-table .product-name { text-transform: none; }

/* Moyens de paiement */
body.cp .woocommerce-checkout #payment { background: transparent; border-radius: 0; }
body.cp .woocommerce-checkout #payment ul.payment_methods {
  border: 0;
  padding: 0;
  display: grid;
  gap: var(--cp-e-2);
}
body.cp .woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-sm);
  background: var(--cp-blanc);
  padding: var(--cp-e-3) var(--cp-e-4);
  transition: border-color var(--cp-vite) var(--cp-courbe), background-color var(--cp-vite) var(--cp-courbe);
}
body.cp .woocommerce-checkout #payment ul.payment_methods li:hover { border-color: var(--cp-trait-fort); }
body.cp .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--cp-bordeaux);
  background: var(--cp-bordeaux-voile);
}
body.cp .woocommerce-checkout #payment ul.payment_methods li label {
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-m);
  font-weight: 500;
  color: var(--cp-encre);
  display: inline-flex;
  align-items: center;
  gap: var(--cp-e-2);
  margin: 0;
}
body.cp .woocommerce-checkout #payment div.payment_box {
  background: var(--cp-gris-voile);
  border-radius: var(--cp-r-sm);
  color: var(--cp-texte);
  font-size: var(--cp-t-s);
  margin-top: var(--cp-e-3);
}
body.cp .woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Les conditions générales représentent 4 215 mots injectés dans la page.
   Elles restent accessibles, mais dans une zone à défilement bornée plutôt
   qu'en pleine hauteur au milieu du tunnel. */
body.cp .woocommerce-terms-and-conditions {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-sm);
  background: var(--cp-fond);
  padding: var(--cp-e-4);
  font-size: var(--cp-t-s);
  margin-bottom: var(--cp-e-4);
}
body.cp .woocommerce-terms-and-conditions h3 {
  font-size: var(--cp-t-m);
  border: 0;
  padding: 0;
  margin: var(--cp-e-4) 0 var(--cp-e-2);
}

body.cp #place_order {
  width: 100%;
  min-height: 54px;
  font-size: var(--cp-t-m);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   5. MESSAGES
   Le liseré vert par défaut de WooCommerce n'appartient à aucune palette
   du site. Chaque type de message prend une des teintes du spectre.
   -------------------------------------------------------------------------- */

body.cp .woocommerce-message,
body.cp .woocommerce-info,
body.cp .woocommerce-error {
  display: flex;
  align-items: flex-start;
  gap: var(--cp-e-3);
  border: 1px solid var(--cp-trait);
  border-left-width: 3px;
  border-top: 1px solid var(--cp-trait);
  border-radius: var(--cp-r-sm);
  background: var(--cp-blanc);
  color: var(--cp-texte);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  padding: var(--cp-e-4);
  list-style: none;
}
body.cp .woocommerce-message::before,
body.cp .woocommerce-info::before,
body.cp .woocommerce-error::before { position: static; margin: 0; font-size: 1rem; }

/*
 * OceanWP transforme tout lien contenu dans un message d'erreur en pavé bleu
 * flottant à droite : `.woocommerce-error a { float:right; padding:6px 18px;
 * text-transform:uppercase; background-color:#13aff0 }`. Or ce lien est le
 * plus souvent le nom du produit au milieu d'une phrase — « Veuillez choisir
 * les options de produit en navigant sur <lien> ». Il redevient un lien.
 */
body.cp .woocommerce-message a,
body.cp .woocommerce-info a,
body.cp .woocommerce-error a {
  float: none;
  display: inline;
  padding: 0;
  min-height: 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
body.cp .woocommerce-message a:hover,
body.cp .woocommerce-info a:hover,
body.cp .woocommerce-error a:hover { background: none; color: var(--cp-bordeaux); }
/* Sauf s'il est explicitement un bouton (« Voir le panier » après un ajout). */
body.cp .woocommerce-message a.button,
body.cp .woocommerce-info a.button,
body.cp .woocommerce-error a.button { display: inline-flex; text-decoration: none; }

body.cp .woocommerce-message {
  border-left-color: var(--cp-f-canne);
  background: var(--cp-f-canne-voile);
}
body.cp .woocommerce-message::before { color: var(--cp-f-canne-texte); }
body.cp .woocommerce-info {
  border-left-color: var(--cp-f-lagon);
  background: var(--cp-f-lagon-voile);
}
body.cp .woocommerce-info::before { color: var(--cp-f-lagon-texte); }
body.cp .woocommerce-error {
  border-left-color: var(--cp-f-flamboyant);
  background: var(--cp-f-flamboyant-voile);
}
body.cp .woocommerce-error::before { color: var(--cp-f-flamboyant-texte); }

/* Le bouton d'un message (« Voir le panier » après un ajout) accompagne une
   information : il reste secondaire, sinon deux boutons pleins se disputent
   l'écran juste au-dessus de « Valider la commande ». */
/*
 * Une erreur peut en contenir plusieurs — un panier avec deux produits à
 * variations en produit deux. En `display: flex`, les `<li>` se rangeaient
 * côte à côte et deux phrases se lisaient en deux colonnes.
 */
body.cp ul.woocommerce-error { display: block; }
body.cp ul.woocommerce-error li {
  display: flex;
  align-items: baseline;
  gap: var(--cp-e-2);
}
body.cp ul.woocommerce-error li + li { margin-top: var(--cp-e-2); }

body.cp .woocommerce-message .button,
body.cp .woocommerce-info .button,
body.cp .woocommerce-error .button {
  margin-left: auto;
  min-height: 38px;
  padding: 0.5em 1.1em;
  font-size: var(--cp-t-s);
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
body.cp .woocommerce-message .button:hover,
body.cp .woocommerce-info .button:hover,
body.cp .woocommerce-error .button:hover {
  background: var(--cp-blanc);
  border-color: currentColor;
  color: inherit;
}

/* --------------------------------------------------------------------------
   6. COMPTE CLIENT
   -------------------------------------------------------------------------- */

body.cp .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cp-e-1); }
body.cp .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--cp-e-3) var(--cp-e-4);
  border-radius: var(--cp-r-sm);
  font-family: var(--cp-font-texte);
  font-size: var(--cp-t-s);
  color: var(--cp-texte);
  text-decoration: none;
  transition: background-color var(--cp-vite) var(--cp-courbe), color var(--cp-vite) var(--cp-courbe);
}
body.cp .woocommerce-MyAccount-navigation li a:hover { background: var(--cp-gris-voile); }
body.cp .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--cp-bordeaux-voile);
  color: var(--cp-bordeaux);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. LE PANIER EN CARTES SOUS 767 px

   Un tableau à six colonnes ne tient pas sur un téléphone. Plutôt que de le
   faire défiler latéralement, on le repasse en cartes : chaque cellule
   reprend l'intitulé de sa colonne via l'attribut `data-title` que
   WooCommerce écrit déjà.

   LA BORNE EST CELLE D'OCEANWP, PAS UN ARRONDI. Le thème parent bascule le
   panier en cartes à 767 px, avec ses propres règles
   (`.woocommerce-cart .woocommerce table.shop_table tr td { display:
   inline-block; text-align: right }` et un `::before` sur *toutes* les
   cellules). Une borne à 760 px laissait sept pixels de largeur où seules
   les règles d'OceanWP s'appliquaient — le nom du produit s'affichait alors
   « Produit : » à droite, la quantité débordait, et la ligne d'actions se
   tassait en trois colonnes. Les règles ci-dessous reprennent la main sur
   les siennes, à la même borne.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  body.cp .woocommerce table.shop_table.cart,
  body.cp .woocommerce table.shop_table.cart tbody,
  body.cp .woocommerce table.shop_table.cart tr { display: block; width: 100%; }
  body.cp .woocommerce table.shop_table.cart thead { display: none; }
  body.cp .woocommerce table.shop_table.cart { border: 0; background: none; }

  /* La carte d'un article. */
  body.cp .woocommerce table.shop_table.cart tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--cp-e-2) var(--cp-e-4);
    align-items: center;
    background: var(--cp-blanc);
    border: 1px solid var(--cp-trait);
    border-radius: var(--cp-r-md);
    margin-bottom: var(--cp-e-3);
    padding: var(--cp-e-4);
  }
  body.cp .woocommerce table.shop_table.cart tr.cart_item td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
    text-align: left;         /* OceanWP aligne tout à droite */
    clear: none;
  }
  /* L'intitulé de colonne n'a de sens que là où le chiffre seul serait
     ambigu. Sur le nom du produit, « Produit : » n'apprend rien. */
  body.cp .woocommerce table.shop_table.cart tr.cart_item td::before { content: none; }

  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail {
    grid-row: 1 / span 2;
    width: 72px;
    text-align: left;
  }
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-thumbnail img {
    width: 72px;
    height: 72px;
  }
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-name {
    padding-right: 32px;      /* la croix de suppression vit dans ce coin */
  }
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-name a { font-size: var(--cp-t-m); }

  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-price {
    align-self: start;
    font-size: var(--cp-t-s);
  }
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-price::before,
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-subtotal::before {
    content: attr(data-title) " : ";
    float: none;
    font-family: var(--cp-font-texte);
    font-size: var(--cp-t-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cp-texte-doux);
    font-weight: 500;
  }

  /* Quantité et sous-total sur une même ligne, sous la vignette. */
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-quantity {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-e-3);
    padding-top: var(--cp-e-3);
    border-top: 1px solid var(--cp-trait);
  }
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-quantity .quantity { float: none; }
  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-subtotal {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cp-e-3);
    font-size: var(--cp-t-m);
  }

  body.cp .woocommerce table.shop_table.cart tr.cart_item td.product-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    padding: 0;
  }

  /* La ligne d'actions : les flottements du grand écran n'ont plus lieu
     d'être, et la cellule peut redevenir un bloc — la table n'en est plus
     une à cette largeur, le `colspan` ne gouverne plus rien. */
  body.cp .woocommerce table.shop_table.cart td.actions {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border-top: 0;
    text-align: left;
  }
  body.cp .woocommerce table.shop_table.cart td.actions::before { content: none; }
  /* Sous 767px, le champ n'a plus la place de se poser a droite du titre :
     il repasse dessous, ou il a toute la largeur. */
  body.cp .woocommerce table.shop_table.cart td.actions > details.cp-repli {
    float: none;
    width: 100%;
    margin: 0 0 var(--cp-e-3);
    display: block;
  }
  body.cp .woocommerce table.shop_table.cart td.actions > details.cp-repli > div {
    padding: 0 var(--cp-e-4) var(--cp-e-4);
  }
  body.cp .woocommerce table.shop_table.cart td.actions .coupon { flex-wrap: wrap; }
  body.cp .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code {
    flex: 1 1 140px;
    width: auto;
  }
  body.cp .woocommerce table.shop_table.cart td.actions > button[name="update_cart"] {
    float: none;
    width: 100%;
    margin-bottom: var(--cp-e-3);
  }
  body.cp .woocommerce table.shop_table.cart td.actions > .cp-continuer {
    float: none;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  body.cp .woocommerce table.shop_table.cart td.actions .coupon input#coupon_code { max-width: none; flex: 1 1 140px; }

  /* Les totaux ne collent plus : sur un téléphone, un bloc collant mange la
     moitié de la hauteur utile. */
  body.cp.woocommerce-cart .cart-collaterals { position: static; }
  body.cp.woocommerce-cart .cart-collaterals .cart_totals table td { text-align: right; }
  /* OceanWP masque le `<th>` et réaffiche l'intitulé par `content:
     attr(data-title)` sur la cellule — que `text-transform: capitalize`
     transformait en « Sous-Total ». */
  body.cp.woocommerce-cart .cart_totals table.shop_table td::before {
    text-transform: none;
    font-weight: 400;
    color: var(--cp-texte-doux);
    letter-spacing: 0;
  }
}