/*
 * Tunnel d'achat — excel-tutorial.com (porté du FR le 28/07/2026 — pages converties en shortcodes classiques)
 * Fichier : woocommerce-tunnel.css   ·   v1.1.0
 * Habille d'un coup : PANIER (/panier/) · COMMANDE (checkout).
 * ⚠️ /mon-compte/ N'EST PLUS couvert ici (Option B 05/07/2026) :
 *    tout /mon-compte/ vit dans woocommerce-mon-compte.css. NE RIEN remettre.
 * Thème enfant : infinite-child
 *
 * À CHARGER via functions.php UNIQUEMENT sur le tunnel :
 *   function excel_tunnel_assets() {
 *     if ( is_cart() || is_checkout() ) {
 *       wp_enqueue_style( 'woocommerce-tunnel',
 *         get_stylesheet_directory_uri().'/css/woocommerce-tunnel.css', array(), '1.1.0' );
 *     }
 *   }
 *   add_action( 'wp_enqueue_scripts', 'excel_tunnel_assets' );
 *
 * MÉTHODE (vérifiée 06/06/2026) : le tunnel est en WooCommerce CLASSIQUE
 * (classes standard .shop_table / .cart_totals / .checkout-button / #place_order),
 * pas en blocs Gutenberg. On ne touche QUE couleurs + polices + boutons + cadres.
 * AUCUN changement de mise en page (grille, colonnes, sidebar) → zéro risque visuel.
 *
 * SOURCE UNIQUE = la charte. Chaque variable pointe sur un token charte avec une
 * valeur de SECOURS (le tunnel reste correct même si la charte n'est pas chargée).
 *
 * v1.1.0 (20/07/2026) — Harmonisation charte panier :
 *   - Fond de page crème (override le vert pâle global)
 *   - H1 en encre (bat le vert Themify Custom CSS)
 *   - En-tête tableau en crème chaud (override --c-bg-alt vert pâle)
 *   - Champ coupon stylé charte
 *   - Bouton « Poursuivre les achats » dans le bandeau de succès
 *   - Contrôles quantité (+/-)
 *   - Bouton supprimer (×)
 *   - Bandeau succès / info complet
 */

:root {
  --tn-ink:        var(--c-ink,        #0e1814);
  --tn-text:       var(--c-text,       #36443e);
  --tn-muted:      var(--c-muted,      #677571);
  --tn-border:     var(--c-border,     #d4dcd7);
  --tn-surface:    var(--c-surface,    #ffffff);
  --tn-bg-cream:   #fbf7ef;   /* fond de page du tunnel — crème charte (VALIDATED.md) */
  --tn-bg-warm:    #f3ead9;   /* en-têtes de tableau — crème chaud */

  --tn-btn:        var(--c-btn,        #8F6316);   /* action d'achat = ambre */
  --tn-btn-hover:  var(--c-btn-hover,  #7B5513);
  --tn-accent:     var(--c-accent,     #a8741a);
  --tn-accent-ink: var(--c-accent-ink, #4d370a);
  --tn-brand:      var(--c-brand,      #107C41);   /* vert de marque (succès, liens) */
  --tn-brand-dark: var(--c-brand-dark, #0b5a2f);
  --tn-brand-soft: var(--c-brand-soft, #dceee3);

  --tn-radius:     var(--radius,    14px);
  --tn-radius-sm:  var(--radius-sm, 8px);
}

/* ════════════════════════════════════════════════════════
   0. FOND DE PAGE + TITRES — crème charte, encre charte
      Le fond global (--c-bg) est vert pâle (#F0F4F0) ; le tunnel
      doit être crème (#fbf7ef) comme le dit VALIDATED.md.
      Le H1 est forcé en vert par Themify Custom CSS → !important.
   ════════════════════════════════════════════════════════ */
body.woocommerce-cart,
body.woocommerce-checkout {
  background-color: var(--tn-bg-cream) !important;
}

/* ── POLICE Inter sur tout le tunnel (remplace Arial/Poppins du thème) ──────── */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-cart :is(h1,h2,h3,h4,p,li,td,th,label,input,select,a,button),
body.woocommerce-checkout :is(h1,h2,h3,h4,p,li,td,th,label,input,select,a,button) {
  font-family: var(--font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
}
body.woocommerce-cart :is(h1,h2,h3,h4),
body.woocommerce-checkout :is(h1,h2,h3,h4) {
  color: var(--tn-ink) !important;
}

/* ════════════════════════════════════════════════════════
   1. BOUTONS — l'action d'achat passe en AMBRE (le cœur de la conversion)
      On bat le bouton noir/vert du thème par spécificité + !important.
   ════════════════════════════════════════════════════════ */
/* Bouton PRINCIPAL : « Valider la commande », « Commander », « Payer »… */
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-checkout #place_order,
body.woocommerce a.button.alt,
body.woocommerce button.button.alt,
body.woocommerce input.button.alt {
  background-color: var(--tn-btn) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--tn-radius-sm) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  box-shadow: 0 8px 22px -6px rgba(143,99,22,.45) !important;
  transition: box-shadow .15s, transform .15s; /* jamais sur background (bug Chrome) */
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button.alt:hover,
body.woocommerce input.button.alt:hover {
  background-color: var(--tn-btn-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -6px rgba(143,99,22,.55) !important;
}

/* Boutons SECONDAIRES : « Mettre à jour le panier », « Appliquer le code »,
   « Continuer mes achats » → style fantôme ambre (action non finale). */
body.woocommerce-cart button[name="update_cart"],
body.woocommerce-cart button[name="apply_coupon"],
body.woocommerce a.button.wc-backward {
  background-color: var(--tn-accent-soft, #f5ecd6) !important;
  background-image: none !important;
  color: var(--tn-accent-ink) !important;
  border: 1px solid var(--tn-accent, #a8741a) !important;
  border-radius: var(--tn-radius-sm) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color .15s, color .15s;
}
body.woocommerce-cart button[name="update_cart"]:hover,
body.woocommerce-cart button[name="apply_coupon"]:hover,
body.woocommerce a.button.wc-backward:hover {
  background-color: var(--tn-btn) !important;
  color: #fff !important;
}

/* Bouton « Poursuivre les achats » dans le bandeau de succès */
body.woocommerce-cart .woocommerce-message .button,
body.woocommerce-checkout .woocommerce-message .button {
  background-color: var(--tn-accent-soft, #f5ecd6) !important;
  background-image: none !important;
  color: var(--tn-accent-ink) !important;
  border: 1px solid var(--tn-accent, #a8741a) !important;
  border-radius: var(--tn-radius-sm) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  padding: 8px 18px !important;
  float: right;
  transition: background-color .15s, color .15s;
}
body.woocommerce-cart .woocommerce-message .button:hover,
body.woocommerce-checkout .woocommerce-message .button:hover {
  background-color: var(--tn-btn) !important;
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════
   2. TABLEAUX (panier, récap commande) → propre, charte
   ════════════════════════════════════════════════════════ */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table {
  border: 1px solid var(--tn-border) !important;
  border-radius: var(--tn-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  background: var(--tn-surface) !important;
}
body.woocommerce-cart table.shop_table th,
body.woocommerce-checkout table.shop_table th {
  background: var(--tn-bg-warm) !important;
  color: var(--tn-ink) !important;
  font-weight: 600 !important;
}
body.woocommerce-cart table.shop_table td,
body.woocommerce-checkout table.shop_table td,
body.woocommerce-cart table.shop_table th,
body.woocommerce-checkout table.shop_table th {
  border-top: 1px solid var(--tn-border) !important;
  color: var(--tn-text) !important;
}

/* ════════════════════════════════════════════════════════
   3. ENCADRÉS TOTAUX / RÉCAP — cartes blanches charte
   ════════════════════════════════════════════════════════ */
/* Élargir le bloc « Total Panier » — la colonne Themify Builder qui le contient
   est en col4-2 (50%). On force la subrow en colonne unique pour que le Total
   prenne toute la largeur sous le tableau. */
body.woocommerce-cart .module-cart-totals {
  width: 100% !important;
}
body.woocommerce-cart .module_subrow:has(.module-cart-totals) {
  grid-template-columns: 1fr !important;
}
body.woocommerce-cart .module_subrow:has(.module-cart-totals) > .module_column {
  grid-column: 1 / -1 !important;
}
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #customer_details .col-1 {
  background: var(--tn-surface);
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius);
  padding: 22px 24px;
}
body.woocommerce-cart .cart_totals h2,
body.woocommerce-checkout #order_review_heading {
  color: var(--tn-ink) !important;
}
/* Respiration au-dessus du titre "Your Order" — retour Fred, 29/07/2026 :
   trop collé au bord de la carte une fois le cadre .col-2 masqué au-dessus. */
body.woocommerce-checkout #order_review_heading {
  padding-top: 30px;
}
/* .col-2 (adresse de livraison) et le bloc "Additional information" (notes de
   commande, désactivé côté PHP) : le site ne vend que du virtuel → ces 2 blocs
   restaient dans le DOM, VIDES, mais habillés en carte blanche par erreur
   (cadre fantôme signalé par Fred, 29/07/2026). On les masque complètement. */
body.woocommerce-checkout #customer_details .col-2,
body.woocommerce-checkout .woocommerce-additional-fields {
  display: none !important;
}

/* ════════════════════════════════════════════════════════
   4. CHAMPS DE FORMULAIRE (coordonnées, paiement, coupon)
   ════════════════════════════════════════════════════════ */
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-cart .coupon #coupon_code {
  border: 1px solid var(--tn-border) !important;
  border-radius: var(--tn-radius-sm) !important;
  color: var(--tn-text) !important;
  background: var(--tn-surface) !important;
  padding: 8px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* ⚠️ CAUSE RÉELLE du chevauchement (trouvée 29/07/2026, après un 1er correctif
   inefficace sur <select>) : WooCommerce remplace le champ Pays par le widget
   JS **SelectWoo** (selectWoo.full.min.js) — le <select> natif est MASQUÉ, nos
   règles dessus n'ont donc AUCUN effet visible. Il faut cibler les classes
   .select2-* que SelectWoo génère, pas le <select> caché. */
body.woocommerce-checkout .select2-container {
  width: 100% !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--tn-border) !important;
  border-radius: var(--tn-radius-sm) !important;
  background: var(--tn-surface) !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding-left: 12px !important;
  padding-right: 30px !important;
  color: var(--tn-text) !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  top: 0 !important;
  right: 8px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--tn-muted) transparent transparent transparent !important;
}
body.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--tn-muted) transparent !important;
}
body.woocommerce-checkout .select2-dropdown {
  border-color: var(--tn-border) !important;
  border-radius: var(--tn-radius-sm) !important;
}
body.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--tn-accent-soft, #f5ecd6) !important;
  color: var(--tn-accent-ink, #4d370a) !important;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus,
body.woocommerce-checkout .woocommerce form .form-row select:focus,
body.woocommerce-cart .coupon #coupon_code:focus {
  outline: none !important;
  border-color: var(--tn-accent) !important;
  box-shadow: 0 0 0 3px rgba(168,116,26,.15) !important;
}

/* ════════════════════════════════════════════════════════
   5. QUANTITÉ (+/−) — contrôles propres
   ════════════════════════════════════════════════════════ */
body.woocommerce-cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-sm);
  overflow: hidden;
  background: var(--tn-surface);
}
body.woocommerce-cart .quantity .qty {
  border: none !important;
  text-align: center;
  width: 44px;
  font-weight: 600;
  color: var(--tn-ink);
  background: transparent;
  -moz-appearance: textfield;
}
body.woocommerce-cart .quantity .qty::-webkit-inner-spin-button,
body.woocommerce-cart .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.woocommerce-cart .quantity .minus,
body.woocommerce-cart .quantity .plus {
  background: transparent !important;
  border: none !important;
  color: var(--tn-muted) !important;
  font-size: 18px;
  padding: 6px 10px;
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
body.woocommerce-cart .quantity .minus:hover,
body.woocommerce-cart .quantity .plus:hover {
  color: var(--tn-accent) !important;
}

/* ════════════════════════════════════════════════════════
   6. BOUTON SUPPRIMER (×) — discret, accent au survol
   ════════════════════════════════════════════════════════ */
body.woocommerce-cart a.remove {
  color: var(--tn-muted) !important;
  font-size: 20px !important;
  text-decoration: none !important;
  transition: color .15s;
}
body.woocommerce-cart a.remove:hover {
  color: #c0392b !important;
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════
   7. LIENS, MESSAGES, DIVERS — couleurs charte
   ════════════════════════════════════════════════════════ */
/* Liens du tunnel : vert de marque (lisible) — sauf les boutons déjà traités. */
body.woocommerce-cart a:not(.button):not(.checkout-button):not(.remove),
body.woocommerce-checkout a:not(.button):not(#place_order) {
  color: var(--tn-brand-dark) !important;
}

/* Bandeaux d'info / succès WooCommerce */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message {
  border-top-color: var(--tn-brand) !important;
  background: var(--tn-brand-soft) !important;
  color: var(--tn-text) !important;
  border-radius: var(--tn-radius-sm) !important;
  padding: 14px 20px !important;
}
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info {
  border-top-color: var(--tn-accent) !important;
  border-radius: var(--tn-radius-sm) !important;
}

/* Prix / totaux en évidence : encre charte. */
body.woocommerce-cart .cart_totals .order-total .amount,
body.woocommerce-checkout #order_review .order-total .amount {
  color: var(--tn-ink) !important;
  font-weight: 700;
}

/* Liens produits dans le tableau */
body.woocommerce-cart table.shop_table .product-name a {
  color: var(--tn-brand-dark) !important;
  text-decoration: none;
  font-weight: 500;
}
body.woocommerce-cart table.shop_table .product-name a:hover {
  color: var(--tn-accent) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   AJOUTS EN v1.0.1 (28/07/2026) — retours de Fred sur captures live
   ══════════════════════════════════════════════════════════════════════════ */
/* SIDEBAR THEMIFY : masquée sur panier + commande (articles non concernés — Mediavine). */
body.woocommerce-cart #sidebar,
body.woocommerce-checkout #sidebar { display: none !important; }
body.woocommerce-cart #contentwrap,
body.woocommerce-checkout #contentwrap,
body.woocommerce-cart #content,
body.woocommerce-checkout #content {
  width: 100% !important;
  float: none !important;
}

/* « Return to shop » (panier vide) : était noir — le sélecteur FR
   `body.woocommerce` ne matche pas ici. Fantôme ambre, comme le FR. */
body.woocommerce-cart .return-to-shop a.button,
body.woocommerce-cart a.button.wc-backward {
  background-color: var(--tn-accent-soft, #f5ecd6) !important;
  background-image: none !important;
  color: var(--tn-accent-ink, #4d370a) !important;
  border: 1px solid var(--tn-accent, #a8741a) !important;
  border-radius: var(--tn-radius-sm, 8px) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background-color .15s, color .15s;
}
body.woocommerce-cart .return-to-shop a.button:hover,
body.woocommerce-cart a.button.wc-backward:hover {
  background-color: var(--tn-btn, #8F6316) !important;
  color: #fff !important;
}