/* ============================================================
   Ellocan : le tunnel WooCommerce aux couleurs du site v2.
   Chargee uniquement sur panier, paiement et compte client.
   Les valeurs reprennent les tokens de la v2.
   ============================================================ */

.ellocan-tunnel {
  --anthracite: #1C1E22;
  --aluminium: #B4B8BD;
  --alu-light: #DCDEE1;
  --white: #F6F3EC;
  --signal: #E8451E;
  --signal-600: #C9370F;
  --eco: #2F6B4F;
  --ink-60: #4B4E55;
  --line: #E4E1D8;
  --fd: "Bricolage Grotesque", system-ui, sans-serif;
  --fb: "Inter", system-ui, sans-serif;

  background: var(--white);
  font-family: var(--fb);
  color: var(--anthracite);
}

/* ---------- on epure : chaque lien du tunnel est une fuite ---------- */
.ellocan-tunnel .nv-nav-wrap,
.ellocan-tunnel .header-menu-sidebar,
.ellocan-tunnel .nv-nav-search,
.ellocan-tunnel .menu-item-nav-cart,
.ellocan-tunnel .nv-page-title,
.ellocan-tunnel .nv-bc-count,
.ellocan-tunnel .woocommerce-breadcrumb,
.ellocan-tunnel .nv-single-page-title { display: none !important; }

/* Le logo du site est blanc : le bandeau reste donc sombre, ce qui donne au
   passage un tunnel plus sobre que le beige du theme. */
.ellocan-tunnel .site-header,
.ellocan-tunnel .header--row,
.ellocan-tunnel .header--row-inner,
.ellocan-tunnel .hfg_header .header--row-inner {
  background-color: var(--anthracite) !important;
  border-bottom: 0 !important;
}
.ellocan-tunnel .site-logo img { max-height: 44px; width: auto; }
.ellocan-tunnel .site-header .nv-icon,
.ellocan-tunnel .site-header svg { fill: #fff; }

.ellocan-tunnel .site-footer,
.ellocan-tunnel .footer--row,
.ellocan-tunnel .footer--row-inner {
  background-color: var(--anthracite) !important;
  color: #cfd0d3;
}

/* Mondial Relay impose son bordeaux (#961543) via #modaal_link */
.ellocan-tunnel #modaal_link,
.ellocan-tunnel a.modaal_link,
.ellocan-tunnel .mrwp-button,
.ellocan-tunnel #mrwp-open-modal {
  background: var(--signal) !important;
  background-color: var(--signal) !important;
  border-color: var(--signal) !important;
  color: #fff !important;
  font-family: var(--fd) !important;
  border-radius: 10px !important;
}

/* Le code promo ne doit pas dominer l'ecran : c'est une option, pas l'action */
.ellocan-tunnel .woocommerce-form-coupon-toggle .woocommerce-info {
  border-left: 0;
  background: transparent;
  padding: 0 0 4px;
  font-size: 14px;
  color: var(--ink-60);
}
.ellocan-tunnel .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
/* Le lien du code promo herite du style de bouton du theme : bordure epaisse
   et pave noir, alors que c'est une option secondaire. */
.ellocan-tunnel .woocommerce-info .showcoupon,
.ellocan-tunnel a.showcoupon {
  color: var(--signal) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px !important;
  border-radius: 0 !important;
  display: inline !important;
}

/* ---------- titres ---------- */
.ellocan-tunnel h1,
.ellocan-tunnel h2,
.ellocan-tunnel h3,
.ellocan-tunnel .woocommerce-column__title,
.ellocan-tunnel #order_review_heading {
  font-family: var(--fd);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--anthracite);
}
.ellocan-tunnel h1 { font-size: clamp(28px, 4vw, 40px); }
.ellocan-tunnel h3, .ellocan-tunnel #order_review_heading { font-size: 20px; margin-bottom: 14px; }

/* ---------- retour boutique et rappel du contenu du kit ---------- */
.ellocan-retour { margin: 0 0 18px; font-size: 14px; }
.ellocan-retour a { color: var(--ink-60); text-decoration: none; }
.ellocan-retour a:hover { color: var(--signal); }

.ellocan-rappel-kit {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--signal);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* ---------- champs ---------- */
.ellocan-tunnel .woocommerce form .form-row label,
.ellocan-tunnel .woocommerce-billing-fields label {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-60);
  margin-bottom: 6px;
}
/* Neve, WooCommerce, Stripe et Mondial Relay empilent leurs feuilles apres
   celle-ci : sans !important, le style des champs ne passe pas. */
.ellocan-tunnel input[type="text"],
.ellocan-tunnel input[type="email"],
.ellocan-tunnel input[type="tel"],
.ellocan-tunnel input[type="password"],
.ellocan-tunnel input[type="number"],
.ellocan-tunnel textarea,
.ellocan-tunnel select,
.ellocan-tunnel .select2-container .select2-selection--single {
  font-family: var(--fb) !important;
  font-size: 15px !important;
  border: 1px solid var(--alu-light) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: #fff !important;
  color: var(--anthracite) !important;
  height: auto !important;
  box-shadow: none !important;
}
.ellocan-tunnel .select2-container .select2-selection--single {
  display: flex !important;
  align-items: center !important;
}
.ellocan-tunnel input:focus,
.ellocan-tunnel textarea:focus,
.ellocan-tunnel select:focus {
  border-color: var(--anthracite);
  outline: 2px solid rgba(232, 69, 30, .18);
  outline-offset: 1px;
}

/* ---------- boutons ---------- */
.ellocan-tunnel .button,
.ellocan-tunnel button.button,
.ellocan-tunnel input.button,
.ellocan-tunnel #place_order,
.ellocan-tunnel .wc-block-components-button {
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  background: var(--signal) !important;
  color: #fff !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  padding: 14px 26px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background .15s;
}
.ellocan-tunnel .button:hover,
.ellocan-tunnel #place_order:hover { background: var(--signal-600) !important; }

.ellocan-tunnel #place_order { width: 100%; font-size: 17px !important; padding: 16px 26px !important; }

.ellocan-tunnel .button.wc-backward,
.ellocan-tunnel .checkout-button ~ .button {
  background: transparent !important;
  color: var(--anthracite) !important;
  border-color: var(--anthracite) !important;
}

/* ---------- recapitulatif de commande ---------- */
.ellocan-tunnel .woocommerce-checkout-review-order,
.ellocan-tunnel .cart_totals {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}
.ellocan-tunnel .shop_table,
.ellocan-tunnel .woocommerce table.shop_table {
  border: 0;
  border-radius: 0;
  font-size: 15px;
}
.ellocan-tunnel .shop_table th,
.ellocan-tunnel .shop_table td {
  border-color: var(--line);
  padding: 12px 8px;
}
.ellocan-tunnel .shop_table th { font-family: var(--fd); font-weight: 600; color: var(--ink-60); }
.ellocan-tunnel .order-total .amount,
.ellocan-tunnel .cart-subtotal .amount { font-family: var(--fd); }
.ellocan-tunnel .order-total { font-size: 18px; }
.ellocan-tunnel .order-total .amount { font-size: 22px; color: var(--anthracite); }

/* ---------- moyens de paiement ---------- */
.ellocan-tunnel #payment,
.ellocan-tunnel .woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
}
.ellocan-tunnel #payment ul.payment_methods {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
}
.ellocan-tunnel #payment div.payment_box {
  background: var(--white);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-60);
}
.ellocan-tunnel #payment div.payment_box::before { display: none; }

/* ---------- messages ---------- */
.ellocan-tunnel .woocommerce-info,
.ellocan-tunnel .woocommerce-message,
.ellocan-tunnel .woocommerce-error {
  border-top: 0;
  border-left: 3px solid var(--signal);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  color: var(--anthracite);
}
.ellocan-tunnel .woocommerce-message { border-left-color: var(--eco); }
.ellocan-tunnel .woocommerce-info::before,
.ellocan-tunnel .woocommerce-message::before,
.ellocan-tunnel .woocommerce-error::before { color: var(--signal); }
.ellocan-tunnel .woocommerce-message::before { color: var(--eco); }

/* ---------- reassurance sous le bouton de paiement ---------- */
.ellocan-reassure {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink-60);
  line-height: 1.75;
}
.ellocan-reassure li { position: relative; padding-left: 22px; }
.ellocan-reassure li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
}
.ellocan-reassure a { color: var(--signal); }

/* ---------- pied de page allege ---------- */
.ellocan-tunnel .site-footer .nv-footer-content { padding-top: 24px; padding-bottom: 24px; }
.ellocan-tunnel .site-footer { background: var(--anthracite); color: #cfd0d3; }

@media (max-width: 768px) {
  .ellocan-tunnel .woocommerce-checkout-review-order,
  .ellocan-tunnel .cart_totals { padding: 16px; }
  .ellocan-tunnel #place_order { font-size: 16px !important; }
}