/* ==========================================================
   Thème « Bénin — Un Monde de Splendeurs »
   Habille la boutique aux couleurs du logo. Chargé après boutique.css :
   retirer le <link> de index.html suffit à revenir au thème précédent.

   Palette relevée sur le logo :
   vert #a2c73a · jaune #f8b917 · rouge #e31f26 · ocre #cc9e14 · bleu #1488ee
   bordeaux #6b1500 (signature) · marine #212b54 · vert foncé #405f2e · brun #753d10
   Typographie : Montserrat, celle de la signature du logo.
   ========================================================== */

:root{
  --vert:#a2c73a; --vert-fonce:#405f2e;
  --jaune-logo:#f8b917; --rouge:#e31f26; --rouge-2:#c5161d;
  --ocre:#cc9e14; --bleu:#1488ee; --bleu-2:#0d6fc8;
  --marine:#212b54; --bordeaux:#6b1500; --brun:#753d10;

  /* Rôles hérités de boutique.css, réaffectés à la palette du logo */
  --or:var(--jaune-logo); --or-2:#e0a40d; --jaune:#fbc93f;
  --brique:var(--rouge);
  --sarcelle:var(--bleu); --sarcelle-2:var(--bleu-2);
  --choco:var(--bordeaux); --choco-2:#551100; --choco-3:#8a2a10;
  --creme:#fffdf9; --card:#ffffff;
  --ink:#2a1410; --ink-soft:rgba(42,20,16,.7); --ink-faint:rgba(42,20,16,.55);
  --rule:rgba(107,21,0,.15);
  --shadow-sm:0 8px 24px -16px rgba(107,21,0,.35);
  --display:'Montserrat',system-ui,sans-serif;
  --sans:'Montserrat',system-ui,sans-serif;
}

body{font-size:14.5px}

/* ════════ HERO : fond blanc, le logo en vedette ════════ */
.hero-side{color:var(--ink);background:#fff;border-right:1px solid var(--rule)}
.hero-side::after{display:none}
/* Bandeau aux cinq couleurs des lettres du logo */
.hero-side::before{content:"";position:absolute;z-index:3;inset:0 auto 0 0;width:10px;
  background:linear-gradient(to bottom,var(--vert) 0 20%,var(--jaune-logo) 20% 40%,var(--rouge) 40% 60%,var(--ocre) 60% 80%,var(--bleu) 80% 100%)}
.hero-side-in{padding-left:calc(clamp(28px,4vw,52px) + 10px)}

.hero-brand--text{font-size:clamp(15px,1.4vw,18px);font-weight:700;color:var(--bordeaux);letter-spacing:0}
.hero-brand--text span{color:var(--brun);letter-spacing:.14em}
.hero-site-btn{background:var(--marine);box-shadow:0 8px 22px -10px rgba(33,43,84,.7)}
.hero-site-btn:hover{background:#171f3f}

.hero-logo{display:block;width:min(100%,430px);height:auto;margin:0 0 22px -8px}
.hero-side .eyebrow{color:var(--bleu-2)}
.hero-side h1{font-weight:800;font-size:clamp(28px,3.3vw,48px);line-height:1.08;letter-spacing:-.025em;color:var(--bordeaux);margin:12px 0 16px}
.hero-side h1 .accent{color:var(--rouge);font-style:normal}
.hero-side-lead{color:var(--ink-soft)}
.hero-side-facts strong{font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;color:var(--marine)}
.hero-side-facts span{color:var(--brun)}

.hero-note{background:#fff8e3;border:1px solid rgba(248,185,23,.55)}
.hero-note::before{background:var(--jaune-logo)}
.hero-note-badge{background:var(--rouge);color:#fff}
.hero-note p{color:var(--ink)}
.hero-note strong{color:var(--bordeaux)}
.hero-note em{color:var(--rouge)}

/* Lieu de retrait, dans l'encadré « Retrait en boutique » */
.pickup-info{display:flex;flex-direction:column;gap:3px;margin-top:4px;font-style:normal;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.pickup-info strong{font-size:15px;font-weight:700;color:var(--bordeaux)}
.pickup-map{align-self:flex-start;margin-top:4px;font-weight:700;color:var(--rouge);text-decoration:underline;text-underline-offset:3px}
.pickup-map::before{content:"📍 "}
/* ════════ PARCOURS D'ACHAT ════════ */
/* Fond uni vert très clair, dérivé du vert du logo (#a2c73a). Les contenus (cartes, pied, étapes) restent sur blanc. */
.buy-side{background:var(--fond,#edf4d8);background-image:none}

/* Variantes de fond, tirées du logo (sauf le crème). Le choix se fait avec l'attribut
   data-fond de la balise <html> dans index.html (vert par défaut). */
html[data-fond="vert"]{--fond:#edf4d8}
html[data-fond="bleu"]{--fond:#e2effd}
html[data-fond="jaune"]{--fond:#fef2cc}
html[data-fond="rouge"]{--fond:#fde6e4}
/* Crème : teinte du tissu du hoodie crème, hors logo */
html[data-fond="creme"]{--fond:#efe6d6}

/* Étapes et pied de page posés sur des bandeaux blancs */
.stepper{padding:10px 14px;border-radius:999px;background:#fff}
.step{color:var(--ink-soft)}
.buy-foot{padding:14px 18px;border:0;border-radius:18px;background:#fff}
/* Formulaire, récapitulatif et confirmation : sur une carte blanche */
.pane[data-pane="2"],.pane[data-pane="3"],.pane[data-pane="4"]{background:#fff;border-radius:18px;padding:24px}
.pane[data-pane="2"] .pane-title em,.pane[data-pane="3"] .pane-title em{color:var(--rouge)}
.ticket{background:#fff;border-color:transparent;box-shadow:0 16px 34px -20px rgba(33,43,84,.5)}
.recap,.confirm-block{background:#fff}

.btn-amber{background:var(--rouge);color:#fff;font-weight:700;box-shadow:0 10px 22px -12px rgba(227,31,38,.8)}
.btn-amber:hover{background:var(--rouge-2)}
.btn-ghost:hover:not(:disabled){border-color:var(--bordeaux);color:var(--bordeaux)}

.step.is-current .step-num{font-weight:700}
.step.is-done{color:var(--vert-fonce)}
.step.is-done .step-num{background:var(--vert);border-color:var(--vert);color:#1f3310}

.pane-title{font-weight:800;font-size:clamp(20px,2.2vw,27px);letter-spacing:-.02em;color:var(--bordeaux)}
.pane-title em{font-style:normal;color:var(--rouge)}

.ticket-name{font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--bordeaux)}
/* ── Prix : chiffres fins en marine, devise en petite capitale rouge ── */
.ticket-price{display:inline-grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;column-gap:5px;font-weight:500;font-size:27px;letter-spacing:-.01em;line-height:1.1;color:var(--marine)}
.ticket-price b{font-weight:500}
.ticket-price i,.tm-value i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rouge)}
.ticket-price small{grid-column:1/-1;margin-top:3px;font-family:var(--sans);font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.ticket-ribbon{background:var(--rouge)}
.size-chip.is-active{background:rgba(20,136,238,.1)}

/* ── Total : même écriture que les prix, nombre d'articles en pastille ── */
.total-mini{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.tm-label{flex-basis:100%;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--ink-soft)}
.tm-value{display:inline-flex;align-items:baseline;gap:6px;font-weight:500;font-size:30px;letter-spacing:-.01em;line-height:1.1;color:var(--marine)}
.tm-value b{font-weight:500}
.tm-value i{font-size:12px}
.tm-fee{align-self:center;padding:3px 10px;border-radius:999px;background:rgba(162,199,58,.28);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--vert-fonce)}
.recap-total b,.confirm-amount{font-weight:500;color:var(--marine)}
.pay-hint{background:rgba(20,136,238,.08)}
.confirm h2{font-weight:800;letter-spacing:-.02em;color:var(--bordeaux)}
.confirm h2 em{font-style:normal;color:var(--rouge)}
.modal-title{font-weight:800;color:var(--bordeaux)}

/* Écran étroit : le bandeau de couleurs passe en haut */
@media (max-width:880px){
  .hero-side{border-right:0;border-bottom:1px solid var(--rule)}
  .hero-side::before{inset:0 0 auto 0;width:auto;height:8px;
    background:linear-gradient(to right,var(--vert) 0 20%,var(--jaune-logo) 20% 40%,var(--rouge) 40% 60%,var(--ocre) 60% 80%,var(--bleu) 80% 100%)}
  .hero-side-in{padding-left:clamp(22px,5vw,40px);padding-top:calc(clamp(24px,5vw,40px) + 8px)}
  .hero-logo{width:min(100%,340px)}
}

/* ════════ Responsive : ajustements propres au thème ════════ */
/* Écran large mais bas : le hero épinglé se resserre pour laisser voir le lieu de retrait */
@media (min-width:881px) and (max-height:640px){
  .hero-logo{width:min(100%,260px);margin-bottom:12px}
  .hero-side h1{font-size:clamp(24px,2.8vw,34px);margin:8px 0 10px}
  .hero-note{margin-top:16px}
}
@media (max-width:880px){
  .hero-side-in{padding-left:clamp(18px,5vw,34px);padding-top:calc(clamp(18px,5vw,34px) + 8px)}
  .hero-logo{width:min(72%,300px);margin:0 0 14px -4px}
  .hero-side h1{font-size:clamp(24px,6.6vw,40px)}
  .buy-foot{bottom:8px;box-shadow:0 14px 34px -14px rgba(33,43,84,.55),0 0 0 1px var(--rule)}
}
@media (max-width:880px) and (max-height:520px){
  .buy-foot{box-shadow:none}
  .hero-logo{width:min(40%,220px)}
}
@media (max-width:560px){
  .stepper{padding:8px 12px;margin-bottom:14px}
  .pane[data-pane="2"],.pane[data-pane="3"],.pane[data-pane="4"]{padding:clamp(14px,4.5vw,22px);border-radius:16px}
  .buy-foot{padding:12px 14px;border-radius:16px}
  /* Total sur une seule ligne : libellé + nombre d'articles à gauche, montant à droite */
  .total-mini{flex-wrap:nowrap;align-items:center;gap:8px}
  .tm-label{flex-basis:auto;order:1}
  .tm-fee{order:2;white-space:nowrap}
  .tm-value{order:3;margin-left:auto;font-size:clamp(20px,6.2vw,26px);white-space:nowrap}
  .total-mini,.tunnel-nav{flex-basis:100%}
  .ticket-name{font-size:17px}
}
@media (max-width:340px){
  .tm-fee{display:none}
  .tunnel-nav .btn-amber{font-size:13.5px;padding-left:12px;padding-right:12px}
}