/*
 * Tunnel d'achat — excel-exercice.com
 * Fichier : woocommerce-tunnel.css   ·   v1.0.0 (branché sur la charte)
 * Habille d'un coup : PANIER (/panier/) · COMMANDE (checkout) · MES COMMANDES (compte).
 * Thème enfant : infinite-child
 *
 * À CHARGER via functions.php UNIQUEMENT sur le tunnel :
 *   function excel_tunnel_assets() {
 *     if ( is_cart() || is_checkout() || ( function_exists('is_account_page') && is_account_page() ) ) {
 *       wp_enqueue_style( 'woocommerce-tunnel',
 *         get_stylesheet_directory_uri().'/css/woocommerce-tunnel.css', array(), '1.0.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).
 */

: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-alt:     var(--c-bg-alt,     #f3ead9);

  --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);
}

/* ── POLICE Inter sur tout le tunnel (remplace Arial/Poppins du thème) ──────── */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
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),
body.woocommerce-account :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),
body.woocommerce-account :is(h1,h2,h3,h4) {
  color: var(--tn-ink);
}

/* ════════════════════════════════════════════════════════
   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-account .woocommerce-button.button,
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-account .woocommerce-button.button: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,
body.woocommerce-account .woocommerce-MyAccount-content a.button:not(.alt) {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--tn-accent-ink) !important;
  border: 1px solid var(--tn-border) !important;
  border-radius: var(--tn-radius-sm) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: border-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,
body.woocommerce-account .woocommerce-MyAccount-content a.button:not(.alt):hover {
  border-color: var(--tn-accent) !important;
  color: var(--tn-accent) !important;
}

/* ════════════════════════════════════════════════════════
   2. TABLEAUX (panier, récap commande, mes commandes) → propre, charte
   ════════════════════════════════════════════════════════ */
body.woocommerce-cart table.shop_table,
body.woocommerce-checkout table.shop_table,
body.woocommerce-account table.shop_table,
body.woocommerce-account table.woocommerce-orders-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,
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.woocommerce-orders-table th {
  background: var(--tn-bg-alt) !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-account table.shop_table td,
body.woocommerce-account table.woocommerce-orders-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
   ════════════════════════════════════════════════════════ */
body.woocommerce-cart .cart_totals,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
  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);
}

/* ════════════════════════════════════════════════════════
   4. CHAMPS DE FORMULAIRE (coordonnées, paiement) — focus charte
   ════════════════════════════════════════════════════════ */
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-account .woocommerce form .form-row input.input-text,
body.woocommerce-cart .woocommerce form .coupon input.input-text {
  border: 1px solid var(--tn-border);
  border-radius: var(--tn-radius-sm);
  color: var(--tn-text);
  background: var(--tn-surface);
}
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-account .woocommerce form .form-row input.input-text:focus,
body.woocommerce-cart .woocommerce form .coupon input.input-text:focus {
  outline: none;
  border-color: var(--tn-accent);
  box-shadow: 0 0 0 3px rgba(168,116,26,.15);
}

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

/* Bandeaux d'info / succès WooCommerce : liseré charte au lieu du violet par défaut. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-account .woocommerce-message {
  border-top-color: var(--tn-brand) !important;
}
body.woocommerce-cart .woocommerce-info,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-account .woocommerce-info {
  border-top-color: var(--tn-accent) !important;
}

/* Onglets « Mon compte » : item actif en ambre charte. */
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: var(--tn-accent-ink);
  font-weight: 600;
}

/* 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);
  font-weight: 700;
}