/* ==========================================================================
   OOPRINT — Tunnel de commande WooCommerce
   Panier, checkout et page « Commande reçue » : zones à fond neutre,
   formulaire Payplug intégré, points relais.

   Écrit par Louis dans le CSS additionnel d'orion (1er octobre 2026), validé
   sur captures (ordinateur), rangé ici le 6 octobre 2026 sans changement de
   règle. Chargé par ooprint-tunnel-commande.php sur le panier et le tunnel de
   commande seulement, à la place qu'occupait le CSS additionnel dans la page.
   Une retouche faite en ligne dans le CSS additionnel passe après ce fichier.

   SOMMAIRE
   1. Jetons
   2. Tableaux de totaux (checkout et panier)
   3. Checkout — zone Paiement
   4. Checkout — formulaire Payplug intégré
   5. Checkout — colonne « Détails de facturation »
   6. Panier — liste des produits
   7. Panier — zone « Code promo »
   8. Livraison — cartes transporteurs et points relais
   9. Commande reçue

   DÉPENDANCES (noms de classes et d'id fournis par des tiers)
   - Thème Flatsome : tableau de livraison imbriqué (.shipping__table),
     <li> des modes de livraison en flex, #customer_details sans .col2-set,
     encadré .is-well de la page « Commande reçue ».
   - Payplug pour WooCommerce 3.1.x, paiement intégré (.payplug.IntegratedPayment…).
   - Colissimo officiel (#lpc_layer_pickup_selection_button, #lpc_pick_up_widget_show_map).
   - Chronopost (.pickup-relay-link).
   - Développement maison (.apd-cart-*, .apd-order-reorder, .aop-cart-*).
   À re-tester après chaque mise à jour de ces extensions.

   POINTS DE VIGILANCE
   1. Non testé sur mobile ni hors Chrome ordinateur. Les règles mobiles de la
      section 9.5 n'ont jamais été vues à l'écran.
   2. Les espaces entre zones d'un même tableau sont des bordures de <tr>
      (border-collapse: collapse) de la couleur du fond de page (--oo-page).
      Si le fond de page change, ajuster ce jeton.
   3. :has() est utilisé à cinq endroits : carte de paiement sélectionnée (3),
      logos du choix de réseau (4), cartes de livraison non sélectionnées (8),
      ligne Total de la commande reçue (9.2), ordre des colonnes sur mobile
      (9.5). Sans support, ces effets sont simplement absents.
   4. Trois !important, chacun justifié en commentaire à l'endroit concerné.
   5. Les couleurs ont été relevées sur captures d'écran. À rapprocher des
      jetons existants du site (--op-blue, couleur primaire Flatsome).
   6. La section 9 est limitée à la page « Commande reçue »
      (body.woocommerce-order-received). Le même tableau existe dans
      Mon compte > commande : à étendre si souhaité, après vérification.

   À FAIRE CÔTÉ DEV (hors CSS)
   - Titre « Paiement » : aujourd'hui généré en CSS (section 3). Le remplacer
     par un vrai titre via le hook woocommerce_review_order_before_payment
     (traduisible, lisible par les lecteurs d'écran), puis supprimer le ::before.
   - Vignette panier : le style en ligne background:#fafafa vient du
     développement maison. Le corriger à la source et supprimer le !important.
   - Commande reçue, lignes de montants : le <tfoot> n'a aucune classe par
     ligne. Surcharger order-details.php dans le thème enfant pour ajouter la
     clé de chaque ligne en classe (order_total, payment_method…), puis
     remplacer les sélecteurs :has() de la section 9.2.
   - Commande reçue, moyen de paiement : l'encadré affiche « Payplug » et le
     tableau « Carte de paiement ». Afficher le même libellé aux deux endroits
     (« Carte bancaire »).
   - Checkout sans moyen de paiement présélectionné : demande en attente côté
     client, à traiter en PHP/JS (set_current_gateway + init_payment_methods).
   - Choix du réseau de carte (CB / Visa / Mastercard) : à faire confirmer par
     le support Payplug. Le clic sur un logo est-il censé être pris en compte,
     et cette rangée doit-elle rester visible pour les cartes co-badgées ?
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
  --oo-page: #fff;      /* fond de page, sert aux espaces entre zones */
  --oo-champ: #fff;     /* champs, cartes et boutons posés sur une zone */
  --oo-zone: #f4f6f8;   /* fond des zones */
  --oo-total: #e9edf1;  /* ligne Total */
  --oo-trait: #e1e6ea;  /* filets */
  --oo-titre: #22324d;  /* titres de zone */
  --oo-accent: #4a5f81; /* bordure et survol des boutons point relais */
  --oo-choix: #eaf1f6;      /* fond d'une carte sélectionnée (repris des cartes de livraison) */
  --oo-choix-bord: #215284; /* bordure d'une carte sélectionnée */
}


/* --------------------------------------------------------------------------
   2. Tableaux de totaux — checkout (#order_review) et panier (.cart_totals)
      Trois zones : produits/sous-total, expédition, taxes/total.
   -------------------------------------------------------------------------- */
#order_review table.shop_table,
.woocommerce-cart .cart_totals table.shop_table {
  border-collapse: collapse;
  border: 0;
}
#order_review table.shop_table { margin-bottom: 0; }
.woocommerce-cart .cart_totals table.shop_table { margin-bottom: 16px; }

/* Le fond est porté par les lignes, les cellules sont rendues transparentes */
#order_review table.shop_table tr,
.woocommerce-cart .cart_totals table.shop_table tr {
  background: var(--oo-zone);
}
#order_review table.shop_table th,
#order_review table.shop_table td,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  background: transparent;
}

/* Marges latérales : cellules du tableau principal uniquement,
   pas celles du tableau de livraison imbriqué par Flatsome */
#order_review table.shop_table > * > tr > th,
#order_review table.shop_table > * > tr > td,
.woocommerce-cart .cart_totals table.shop_table > * > tr > th,
.woocommerce-cart .cart_totals table.shop_table > * > tr > td {
  padding-left: 14px;
  padding-right: 14px;
}
#order_review table.shop_table thead th { padding-top: 14px; }

/* Espaces entre zones : avant l'expédition et avant la ligne qui la suit */
#order_review tr.woocommerce-shipping-totals,
#order_review tr.woocommerce-shipping-totals + tr,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals + tr {
  border-top: 16px solid var(--oo-page);
}

/* Zone expédition */
#order_review tr.woocommerce-shipping-totals th,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals th {
  padding-top: 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--oo-titre);
}
#order_review tr.woocommerce-shipping-totals td,
.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals td {
  padding-bottom: 14px;
}
/* Checkout : titres de zone numérotés (1. facturation, 2. expédition, 3. paiement) */
#order_review tr.woocommerce-shipping-totals th::before { content: "2. "; }

/* Ligne Total */
#order_review table.shop_table tr.order-total,
.woocommerce-cart .cart_totals table.shop_table tr.order-total {
  background: var(--oo-total);
}
#order_review tr.order-total th,
#order_review tr.order-total td,
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--oo-titre);
}


/* --------------------------------------------------------------------------
   3. Checkout — zone Paiement
   -------------------------------------------------------------------------- */
#order_review #payment { background: transparent; }

#order_review #payment ul.payment_methods {
  list-style: none;
  margin: 16px 0;
  padding: 14px;
  background: var(--oo-zone);
  border: 0;
  border-radius: 0;
}

/* Titre généré en CSS, à remplacer par un vrai titre (voir en-tête).
   Écrase le clearfix ::before de WooCommerce, sans effet constaté. */
#order_review #payment ul.payment_methods::before {
  content: "3. Paiement";
  display: block;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--oo-trait);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--oo-titre);
}

#order_review #payment .payment_box {
  background: transparent;
  padding: 0;
  margin: 8px 0 0;
}
#order_review #payment .payment_box::before { display: none; }

/* Chaque moyen de paiement est une carte cliquable, sur le modèle des cartes
   de livraison. Le formulaire du moyen choisi se déplie dans sa carte.
   Repose sur le gabarit standard : li > input + label + .payment_box */
#order_review #payment ul.payment_methods > li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 8px;
  padding: 12px 14px;
  background: var(--oo-champ);
  border: 1px solid var(--oo-trait);
  border-radius: 6px;
}
#order_review #payment ul.payment_methods > li.wc_payment_method:last-child {
  margin-bottom: 0;
}
/* box-shadow double la bordure sans décaler le contenu */
#order_review #payment ul.payment_methods > li.wc_payment_method:has(> input:checked) {
  background: var(--oo-choix);
  border-color: var(--oo-choix-bord);
  box-shadow: 0 0 0 1px var(--oo-choix-bord);
}
#order_review #payment ul.payment_methods > li > input[name="payment_method"] {
  flex: 0 0 auto;
  margin: 0 10px 0 0;
}
/* flex-basis auto, pas 0 : WooCommerce masque le bouton radio quand un seul moyen de paiement est proposé ; avec une base de 0
   le libellé tenait sur la même ligne que le cadre de description (0 + 100 %) et se réduisait à rien, son texte débordant sur la
   description (constaté le 7 octobre 2026, passerelle « Validation par votre administrateur » des clients pro). */
#order_review #payment ul.payment_methods > li > label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  cursor: pointer;
}
/* Logos poussés à droite de la carte */
#order_review #payment ul.payment_methods > li > label img:first-of-type {
  margin-left: auto;
}
#order_review #payment ul.payment_methods > li > .payment_box {
  flex: 0 0 100%;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--oo-trait);
}

#order_review #place_order { margin-top: 4px; }


/* --------------------------------------------------------------------------
   4. Checkout — formulaire Payplug intégré
      L'intérieur des champs de carte est dans des iframes Payplug :
      seuls les conteneurs sont stylables.
   -------------------------------------------------------------------------- */

/* Le module masque ces radios (les logos font office de boutons) mais
   Flatsome les réaffiche. !important nécessaire pour reprendre la main. */
.payplug.IntegratedPayment .IntegratedPayment_scheme input[type="radio"] {
  display: none !important;
}

/* Ligne « Votre carte » + choix du réseau (CB / Visa / Mastercard).
   Le libellé est en capitales dans la traduction du module, pas en CSS. */
.payplug.IntegratedPayment .IntegratedPayment_container.-scheme {
  height: auto;
  margin: 18px 0 8px;
  font-size: 15px;
  font-weight: 600;
}
.payplug.IntegratedPayment .IntegratedPayment_schemes {
  width: auto;
  flex-wrap: nowrap;
  gap: 8px;
}
.payplug.IntegratedPayment .IntegratedPayment_scheme {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}
/* Logos en couleur par défaut : grisés, ils passaient pour des options
   désactivées. Si le client en choisit un, les autres repassent en gris.
   Dans le module 3.1.0 ce choix n'est pas transmis (paiement toujours envoyé
   en Payplug.Scheme.AUTO) : voir « À faire côté dev ». */
.payplug.IntegratedPayment .IntegratedPayment_scheme span::before {
  opacity: 1;
}
.payplug.IntegratedPayment .IntegratedPayment_schemes:has(input:checked) .IntegratedPayment_scheme input:not(:checked) + span::before {
  opacity: 0;
}

/* Champs */
.payplug.IntegratedPayment .IntegratedPayment_container.-cardHolder,
.payplug.IntegratedPayment .IntegratedPayment_container.-pan,
.payplug.IntegratedPayment .IntegratedPayment_container.-exp,
.payplug.IntegratedPayment .IntegratedPayment_container.-cvv {
  border-radius: 6px;
}
#order_review .payplug.IntegratedPayment .IntegratedPayment_container.-cardHolder,
#order_review .payplug.IntegratedPayment .IntegratedPayment_container.-pan,
#order_review .payplug.IntegratedPayment .IntegratedPayment_container.-exp,
#order_review .payplug.IntegratedPayment .IntegratedPayment_container.-cvv {
  background: var(--oo-champ);
}
.payplug.IntegratedPayment .IntegratedPayment_container.-exp,
.payplug.IntegratedPayment .IntegratedPayment_container.-cvv {
  max-width: calc(50% - 6px);
}

/* Case « Enregistrer ma carte bancaire » */
.payplug.IntegratedPayment .IntegratedPayment_container.-saveCard label {
  font-size: 14px;
  color: #4a4a4a;
}

/* Ligne « Transaction sécurisée par Payplug » */
.payplug.IntegratedPayment .IntegratedPayment_container.-transaction {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
}
/* Le module impose float: left !important sur ce cadenas. */
.payplug.IntegratedPayment .IntegratedPayment_container.-transaction .lock-icon {
  float: none !important;
  width: 16px;
  margin: 0;
}
.payplug.IntegratedPayment .IntegratedPayment_container.-transaction .transaction-label {
  display: inline;
  margin: 0;
  font-size: 12px;
}
.payplug.IntegratedPayment .IntegratedPayment_container.-transaction .payplug-logo {
  width: 70px;
  margin: 0;
}

/* Lien « Politique de confidentialité » */
.payplug.IntegratedPayment .IntegratedPayment_container.-privacy-policy {
  display: block;
  text-align: left;
  margin: 6px 0 0;
}
.payplug.IntegratedPayment .IntegratedPayment_container.-privacy-policy a {
  font-size: 12px;
}


/* --------------------------------------------------------------------------
   5. Checkout — colonne « Détails de facturation »
      Trois zones : facturation, autre adresse de livraison, notes.
   -------------------------------------------------------------------------- */
#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields,
#customer_details .woocommerce-additional-fields {
  display: flow-root; /* contient les champs flottants */
  background: var(--oo-zone);
  padding: 14px;
  margin: 0 0 16px;
  border: 0;          /* retire la bordure haute de Flatsome */
}

#customer_details .woocommerce-billing-fields > h3 {
  margin: 0 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--oo-trait);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--oo-titre);
}
#customer_details .woocommerce-billing-fields > h3::before { content: "1. "; }

#customer_details #ship-to-different-address,
#customer_details #ship-to-different-address label {
  margin: 0;
}
#customer_details .shipping_address {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--oo-trait);
}

#customer_details input.input-text,
#customer_details textarea.input-text,
#customer_details .select2-container .select2-selection {
  background-color: var(--oo-champ);
}

#customer_details .woocommerce-billing-fields__field-wrapper > .form-row:last-child,
#customer_details .woocommerce-shipping-fields__field-wrapper > .form-row:last-child,
#customer_details #order_comments_field {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   6. Panier — liste des produits (une zone par produit)
   -------------------------------------------------------------------------- */
.woocommerce-cart table.woocommerce-cart-form__contents {
  border-collapse: collapse;
}

.woocommerce-cart-form__contents tr.cart_item {
  background: var(--oo-zone);
}
.woocommerce-cart-form__contents tr.cart_item ~ tr.cart_item {
  border-top: 12px solid var(--oo-page);
}
.woocommerce-cart-form__contents tr.cart_item > td {
  background: transparent;
  border-bottom: 0;
  padding-top: 14px;
  padding-bottom: 14px;
}
.woocommerce-cart-form__contents tr.cart_item > td.product-remove {
  padding-left: 14px;
}
.woocommerce-cart-form__contents tr.cart_item > td.product-subtotal,
.woocommerce-cart-form__contents thead th.product-subtotal {
  padding-right: 14px;
}

/* !important : écrase le style en ligne background:#fafafa (voir en-tête). */
.woocommerce-cart-form__contents tr.cart_item td.product-thumbnail img {
  background: var(--oo-champ) !important;
}

/* Boutons d'action du produit (développement maison) : côte à côte, fond blanc.
   :not(:hover) conserve l'effet de survol d'origine. */
.woocommerce-cart-form__contents tr.cart_item .apd-cart-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 6px 0 8px;
}
.woocommerce-cart-form__contents tr.cart_item .apd-cart-actions > * {
  margin: 0;
}
.woocommerce-cart-form__contents tr.cart_item .apd-cart-action:not(:hover),
.woocommerce-cart-form__contents tr.cart_item .apd-cart-action-info:not(:hover) {
  background-color: var(--oo-champ);
}

.woocommerce-cart-form__contents tr.cart_item select.aop-cart-qty-select {
  background-color: var(--oo-champ);
}

.woocommerce-cart-form__contents td.actions {
  padding-top: 16px;
  border: 0;
}


/* --------------------------------------------------------------------------
   7. Panier — zone « Code promo »
   -------------------------------------------------------------------------- */
.woocommerce-cart .cart-sidebar .coupon {
  background: var(--oo-zone);
  padding: 14px;
  margin-top: 16px;
}
.woocommerce-cart .cart-sidebar .coupon input.input-text {
  background-color: var(--oo-champ);
}


/* --------------------------------------------------------------------------
   8. Livraison — cartes transporteurs et points relais (panier et checkout)
   -------------------------------------------------------------------------- */

/* Cartes non sélectionnées en blanc ; la carte sélectionnée garde le style du thème */
#order_review #shipping_method li:not(:has(input:checked)),
.woocommerce-cart .cart_totals #shipping_method li:not(:has(input:checked)) {
  background: var(--oo-champ);
}

/* Tout ce qu'une extension ajoute dans une carte (bouton, adresse du relais)
   passe sous le libellé, sur toute la largeur. 24px = retrait du libellé. */
#shipping_method li { flex-wrap: wrap; }

#shipping_method li > :not(input):not(label) {
  flex: 0 0 100%;
  width: 100%;
  margin: 8px 0 0;
  padding-left: 24px;
  text-align: left;
  font-size: 13px;
}

/* Mêmes valeurs pour les conteneurs Colissimo et Chronopost, au cas où ils
   ne seraient pas enfants directs du <li>. À simplifier après vérification du DOM. */
#shipping_method #lpc_layer_pickup_selection_button,
#shipping_method .pickup-relay-link {
  flex: 0 0 100%;
  width: 100%;
  clear: both;
  margin: 8px 0 0;
  padding-left: 24px;
  text-align: left;
}

/* Boutons « Choisir le point de retrait » (Colissimo) et
   « Sélectionner un point relais » / « Modifier » (Chronopost) */
#shipping_method #lpc_pick_up_widget_show_map,
#shipping_method .pickup-relay-link a {
  padding: 6px 12px;
  min-height: 0;
  line-height: 1.3;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  color: var(--oo-titre);
  background: var(--oo-champ);
  border: 1px solid var(--oo-accent);
  border-radius: 4px;
  box-shadow: none;
}
#shipping_method #lpc_pick_up_widget_show_map:hover,
#shipping_method .pickup-relay-link a:hover {
  color: var(--oo-champ);
  background: var(--oo-accent);
}
#shipping_method #lpc_pick_up_widget_show_map {
  display: inline-block;
  margin: 0;
  float: none;
}
/* Chronopost : le lien suit l'adresse dans le même conteneur, on le met dessous */
#shipping_method .pickup-relay-link a {
  display: block;
  width: fit-content;
  margin: 6px 0 0;
}


/* --------------------------------------------------------------------------
   9. Commande reçue (page de confirmation après paiement)
      Rendu validé sur capture ordinateur. Le bloc des adresses (9.3) repose
      sur les classes WooCommerce standard, sans que son code ait été relu.
   -------------------------------------------------------------------------- */

/* 9.1 Tableau « Détails de la commande » — zone produits */
.woocommerce-order-received table.woocommerce-table--order-details {
  border-collapse: collapse;
  border: 0;
  margin-bottom: 16px;
}
.woocommerce-order-received table.woocommerce-table--order-details tr {
  background: var(--oo-zone);
}
.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
  background: transparent;
  padding-left: 14px;
  padding-right: 14px;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th {
  padding-top: 14px;
}
.woocommerce-order-received table.woocommerce-table--order-details tbody td {
  vertical-align: top; /* le prix s'aligne sur le nom du produit */
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Options du produit : « Papier: 300g mat » sur une seule ligne */
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: .9em;
}
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta li {
  margin: 0;
  padding: 0;
}
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta .wc-item-meta-label {
  float: none;
  margin: 0;
}
.woocommerce-order-received table.woocommerce-table--order-details .wc-item-meta li p {
  display: inline;
  margin: 0;
}

/* Bouton « Modifier et/ou commander » (développement maison) */
.woocommerce-order-received .apd-order-reorder .apd-cart-action:not(:hover) {
  background-color: var(--oo-champ);
}

/* 9.2 Tableau « Détails de la commande » — zone montants
   Les lignes du <tfoot> n'ont aucune classe. La ligne Total est repérée comme
   « dernière ligne contenant un montant ». Plus sûr à terme : ajouter une classe
   par ligne en surchargeant le gabarit order-details.php dans le thème enfant. */
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:first-child {
  border-top: 16px solid var(--oo-page);
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):not(:has(~ tr .woocommerce-Price-amount)) {
  background: var(--oo-total);
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):not(:has(~ tr .woocommerce-Price-amount)) > th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):not(:has(~ tr .woocommerce-Price-amount)) > td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--oo-titre);
}
/* Les lignes après le Total (moyen de paiement, actions) forment une zone à part */
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:has(.woocommerce-Price-amount):not(:has(~ tr .woocommerce-Price-amount)) + tr {
  border-top: 16px solid var(--oo-page);
}
/* Bouton « Reçu » : retire les marges Flatsome qui le décalent du bord droit */
.woocommerce-order-received table.woocommerce-table--order-details .order-actions-button {
  margin: 0;
}

/* 9.3 Adresses de facturation et de livraison — une zone chacune */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0;
}
/* Le clearfix de .col2-set deviendrait une cellule de grille */
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses::after {
  display: none;
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 14px;
  background: var(--oo-zone);
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title {
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--oo-trait);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--oo-titre);
}
.woocommerce-order-received .woocommerce-customer-details address {
  font-style: normal;
  font-size: .9em;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Retire le vide sous la dernière ligne (téléphone ou e-mail) */
.woocommerce-order-received .woocommerce-customer-details address p:last-child {
  margin-bottom: 0;
}

/* 9.4 Encadré « Merci. Votre commande a été reçue. » */
.woocommerce-order-received .is-well {
  background: var(--oo-zone);
  box-shadow: none;
  padding: 20px;
}
.woocommerce-order-received .woocommerce-thankyou-order-received {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--oo-trait);
  font-size: 1.15em;
}
.woocommerce-order-received ul.woocommerce-order-overview {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Une ligne par information : libellé à gauche, valeur à droite */
.woocommerce-order-received ul.woocommerce-order-overview li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--oo-trait);
}
.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong {
  text-align: right;
  overflow-wrap: anywhere; /* adresse e-mail longue */
}

/* 9.5 Mobile */
@media (max-width: 849px) {
  /* Le message « Merci » passe avant le détail de la commande */
  .woocommerce-order-received .col:has(> .is-well .woocommerce-thankyou-order-received) {
    order: -1;
  }
}
@media (max-width: 549px) {
  .woocommerce-order-received .woocommerce-customer-details .woocommerce-columns--addresses {
    grid-template-columns: 1fr;
  }
}