/* ==========================================================================
   KISSEO — Tunnel de commande WooCommerce
   Panier, page de commande et page « Commande reçue » : zones à fond neutre,
   cartes de livraison et de paiement, points relais.

   Reprise pour Kisseo (6 octobre 2026) de la feuille écrite par Louis pour
   orion : mu-plugins/ooprint/ooprint-tunnel-commande.css. Les sections gardent
   leurs numéros et les jetons leurs noms (--oo-*) pour que les deux fichiers
   se comparent ligne à ligne. Chargé par kisseo-tunnel-commande.php sur le
   panier et le tunnel de commande seulement.

   CE QUI DIFFÈRE D'ORION
   - Jetons (section 1) : le code couleur de Kisseo.
   - Section 4 (formulaire Payplug) absente : Kisseo encaisse par WooPayments
     et PayPal, dont les champs de carte sont dans des iframes.
   - Section 5 : la page de commande de Kisseo saisit la livraison d'abord
     (inc/checkout-shipping-first.php du thème) : trois zones « Coordonnées »,
     « Adresse de livraison », « Facturer à une adresse différente ? ».

   SOMMAIRE
   1. Jetons
   2. Tableaux de totaux (checkout et panier)
   3. Checkout — zone Paiement
   5. Checkout — colonne des coordonnées et des adresses
   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 ».
   - Thème enfant de Kisseo : .woocommerce-customer-details-fields,
     .woocommerce-shipping-fields, .woocommerce-billing-fields > .billing_address.
   - 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 : ceux de la feuille d'orion (espaces entre zones =
   bordures de <tr> de la couleur --oo-page, :has() pour les cartes
   sélectionnées, un !important sur la vignette du panier).
   ========================================================================== */


/* --------------------------------------------------------------------------
   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: #f6f4f1;   /* fond des zones (gris chaud) */
  --oo-total: #ece7e1;  /* ligne Total */
  --oo-trait: #e4ded7;  /* filets */
  --oo-titre: #2d2d2d;  /* titres de zone (noir du site) */
  --oo-accent: #446084; /* bordure et survol des boutons point relais (bleu des boutons secondaires du site) */
  /* Carte sélectionnée : les couleurs des cartes de livraison d'aventers-livraisons, pour que livraison et paiement se répondent */
  --oo-choix: var(--avl-bleu-clair, #e8f1f7);
  --oo-choix-bord: var(--avl-bleu, #005388);
}


/* --------------------------------------------------------------------------
   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. coordonnées, 2. adresse de livraison, 3. expédition, 4. paiement) */
#order_review tr.woocommerce-shipping-totals th::before { content: "3. "; }

/* 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);
}
/* Kisseo affiche ses prix TTC : « (dont … TVA) » reste une mention, sous le montant */
#order_review tr.order-total .includes_tax,
.woocommerce-cart .cart_totals tr.order-total .includes_tax {
  display: block;
  font-size: 12px;
  font-weight: 400;
}


/* --------------------------------------------------------------------------
   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: "4. 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;
}
/* inline-flex et largeur : PayPal Payments affiche et masque ses <li> en JavaScript (style en ligne display),
   la carte n'est alors plus en flex et le libellé doit tenir seul à côté du bouton radio. */
/* flex-basis auto (la largeur ci-dessous sert alors de base), 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é sur orion le 7 octobre 2026). */
#order_review #payment ul.payment_methods > li > label {
  flex: 1 1 auto;
  min-width: 0;
  width: calc(100% - 28px);
  vertical-align: middle;
  display: inline-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; }


/* --------------------------------------------------------------------------
   5. Checkout — colonne des coordonnées et des adresses
      Trois zones : coordonnées, adresse de livraison, adresse de facturation
      (repliée derrière sa case).
   -------------------------------------------------------------------------- */
#customer_details .woocommerce-customer-details-fields,
#customer_details .woocommerce-shipping-fields,
#customer_details .woocommerce-billing-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-customer-details-fields > h3,
#customer_details .woocommerce-shipping-fields > h3,
#customer_details .woocommerce-billing-fields .billing_address > 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-customer-details-fields > h3::before { content: "1. "; }
#customer_details .woocommerce-shipping-fields > h3::before { content: "2. "; }

/* Case « Facturer à une adresse différente ? » : seule dans sa zone tant qu'elle n'est pas cochée */
#customer_details .woocommerce-billing-fields > .form-row,
#customer_details .woocommerce-billing-fields > .form-row label {
  margin: 0;
}
#customer_details .woocommerce-billing-fields .billing_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,
#customer_details select {
  background-color: var(--oo-champ);
}

#customer_details .woocommerce-customer-details-fields > .form-row:last-child,
#customer_details .shipping_address > .form-row:last-of-type {
  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;
}
/* Le panier de Kisseo est plus étroit que celui d'orion : les en-têtes restent sur une ligne */
.woocommerce-cart-form__contents thead th {
  white-space: nowrap;
}

/* !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;
  }
}