/* =========================================================
   AYAA Market — Feuille de style principale
   Charte graphique : Bleu marine + Jaune quincaillerie
   ========================================================= */

:root{
  /* --- Bleu marine : couleur de structure (barres, boutons, pied de page) --- */
  --navy:#0E2148;
  --navy-2:#081733;      /* survol des aplats marine */
  --navy-3:#33507F;      /* marine clair, lisible en texte sur blanc (7:1) */
  --navy-tint:#EAEFF8;   /* fond bleuté très clair */

  /* --- Jaune : couleur d'accent (appels à l'action, badges, icônes) --- */
  --yellow:#F7B500;
  --yellow-dark:#D89D00; /* survol des aplats jaunes */
  --yellow-light:#FFF3CF;/* bandeau newsletter, survols doux */
  /* Un jaune ne se lit pas en TEXTE sur du blanc : 1,7:1, très en dessous du
     minimum de 4,5:1. Cette déclinaison ocre atteint 5,6:1 et sert partout où
     le jaune doit être lu (intitulés, petits pictogrammes sur fond clair). */
  --yellow-ink:#8A5A00;
  /* À l'inverse, un texte posé SUR un aplat jaune doit être marine : 7,3:1.
     Le blanc sur jaune ne donnerait que 2:1. */
  --on-yellow:#0E2148;

  --bg:#F7F5EF;          /* ivoire : réchauffe le marine sans grisailler */
  --white:#ffffff;
  --text:#101828;
  --text-light:#5B6474;
  --text-faint:#98A0AE;
  --border:#E4E2DA;
  --red:#D92D20;
  --green:#16A34A;
  /* Le vert vif ne tient que 3,3:1 sur blanc : trop faible pour un prix.
     Cette variante atteint 5:1 tout en restant reconnaissable comme « bonne affaire ». */
  --green-dark:#15803D;
  --purple:#33507F;
  /* Accent lisible SUR FOND MARINE : le jaune de marque y dépasse 9:1. */
  --gold:#FFC53D;
  --gold-soft:rgba(255,197,61,.16);
  --hero-1:#0B1B36;
  --hero-2:#1B3A6B;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 2px 10px rgba(14,33,72,.07);
  --shadow-lg:0 12px 32px rgba(14,33,72,.16);
}

.price-sale{color:var(--green-dark) !important}
.logo-mark,.footer-brand-logo-box i,.admin-logo-box{color:#fff}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.wrap{max-width:1360px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:960px;margin:0 auto;padding:0 24px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;font-size:13.5px;padding:12px 20px;transition:transform .12s,box-shadow .12s,background .15s}
.btn:active{transform:translateY(1px)}
.btn-yellow{background:var(--yellow);color:var(--on-yellow)}
.btn-yellow:hover{background:var(--yellow-dark)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--navy)}
.btn-outline:hover{border-color:var(--navy)}
.btn-outline-w{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
.btn-outline-w:hover{background:rgba(255,255,255,.08)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px;font-size:12.5px}
.btn-lg{padding:15px 26px;font-size:15px}
.btn-danger{background:#FEE2E2;color:#B91C1C}
.btn-danger:hover{background:#FCA5A5}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- TOPBAR ---------- */
.topbar{background:var(--navy);padding:8px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px}
.topbar-left{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--yellow-light)}
.topbar-badge{background:var(--yellow);color:var(--on-yellow);font-size:10px;font-weight:800;padding:2px 8px;border-radius:3px;letter-spacing:.3px}
.topbar-right{display:flex;gap:16px;font-size:12px;color:rgba(255,255,255,.6);flex-wrap:wrap}
.topbar-right a{display:flex;align-items:center;gap:4px}
.topbar-right a:hover{color:#fff}

/* ---------- NAV ---------- */
.nav{background:#fff;border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;height:86px;gap:16px;position:sticky;top:0;z-index:50}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-box{width:38px;height:38px;background:var(--navy);border-radius:9px;display:flex;align-items:center;justify-content:center}
.logo-box i{color:var(--yellow);font-size:19px}
.logo-name{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.5px}
.logo-name em{color:var(--yellow-dark);font-style:normal}
.logo-img{height:56px;width:auto;display:block}

.nav-search{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;display:flex;align-items:center;height:42px;overflow:hidden;max-width:560px}
.nav-search select{border:none;background:transparent;border-right:1px solid #E0DED8;padding:0 10px;height:100%;font-size:12px;color:#555;outline:none;max-width:130px}
.nav-search input{flex:1;border:none;background:transparent;padding:0 12px;font-size:13px;outline:none;color:#222;min-width:0}
.nav-search button{background:var(--navy);color:#fff;border:none;height:100%;padding:0 18px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px}
.nav-search button:hover{background:var(--navy-2)}

.nav-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.nav-icon-btn{background:none;border:1px solid var(--border);border-radius:7px;padding:8px 10px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:12px;color:#444;position:relative}
.nav-icon-btn:hover{border-color:var(--navy)}
.nav-icon-btn .badge{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:10px;font-size:9px;font-weight:700;padding:1px 5px;min-width:16px;text-align:center}
.nav-cart{background:var(--navy);color:#fff;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;border:none}
.nav-cart:hover{background:var(--navy-2)}
.nav-cart .badge{background:var(--yellow);color:var(--on-yellow);border-radius:10px;font-size:10px;font-weight:800;padding:1px 6px}
.nav-burger{display:none;background:none;border:1px solid var(--border);border-radius:7px;padding:8px 10px}

/* ---------- CAT BAR ---------- */
.catbar{background:var(--navy);padding:0 24px;display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.catbar a{display:flex;align-items:center;gap:7px;padding:12px 16px;font-size:12px;font-weight:500;color:rgba(255,255,255,.68);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s}
.catbar a.active,.catbar a:hover{color:#fff;border-bottom-color:var(--yellow)}

/* ---------- PROMO STRIP ---------- */
.promo-strip{background:linear-gradient(90deg,var(--yellow-dark),var(--yellow));padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.promo-strip span{font-size:13px;font-weight:700;color:var(--navy)}
.promo-strip .countdown{background:rgba(11,31,58,.15);border-radius:5px;padding:4px 12px;font-size:13px;font-weight:800;color:var(--navy);letter-spacing:1px}
.promo-strip .cta{background:var(--navy);color:#fff;border-radius:5px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;border:none}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{padding:14px 24px;font-size:12px;color:var(--text-light);display:flex;gap:6px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--navy);text-decoration:underline}
.breadcrumb .sep{color:var(--text-light)}

/* ---------- HERO ----------
   Marine profond, trame technique discrète et halos lumineux : un rendu
   moderne et sobre qui laisse la vedette aux produits du carrousel. */
.hero{position:relative;overflow:hidden;isolation:isolate;padding:48px 32px 30px;
  background:
    radial-gradient(760px 460px at 82% 18%,rgba(247,181,0,.14),transparent 62%),
    radial-gradient(640px 520px at 0% 100%,rgba(51,80,127,.5),transparent 66%),
    linear-gradient(160deg,#061126 0%,var(--hero-1) 45%,#10284F 100%)}
/* Trame en quadrillage, estompée vers les bords. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 68% 42%,#000 15%,transparent 72%);
          mask-image:radial-gradient(ellipse 75% 70% at 68% 42%,#000 15%,transparent 72%)}
/* Filet lumineux en bas de section. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(247,181,0,.55),transparent)}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:52px;align-items:center;max-width:1280px;margin:0 auto}

.hero-tag{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 15px 7px 12px;margin-bottom:22px;font-size:11px;font-weight:700;color:rgba(255,255,255,.88);text-transform:uppercase;letter-spacing:.7px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-tag-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;box-shadow:0 0 0 4px rgba(255,197,61,.18),0 0 12px rgba(255,197,61,.8);animation:heroPulse 2.4s ease-in-out infinite}
@keyframes heroPulse{50%{box-shadow:0 0 0 8px rgba(255,197,61,0),0 0 12px rgba(255,197,61,.8)}}

.hero h1{font-size:46px;font-weight:800;color:#fff;line-height:1.07;letter-spacing:-1.4px;margin-bottom:18px}
/* L'accent du titre est souligné plutôt que simplement coloré : le trait
   ambre tient le rôle de signature et reste lisible même en cas de daltonisme. */
.hero h1 em{color:var(--gold);font-style:normal;box-shadow:inset 0 -.16em 0 rgba(255,197,61,.22)}
.hero-sub{font-size:15.5px;color:rgba(255,255,255,.7);line-height:1.65;max-width:520px;margin-bottom:28px}

.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
/* Le prix d'appel est intégré au bouton : le visiteur sait ce qu'il engage
   avant de cliquer. */
.hero-cta{box-shadow:0 10px 28px rgba(247,181,0,.32)}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(247,181,0,.45)}
.hero-cta em{font-style:normal;font-weight:800;background:rgba(14,33,72,.14);border-radius:6px;padding:2px 8px;margin-left:4px;font-size:13px}
.hero-btns .btn-outline-w{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-btns .btn-outline-w:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}

.hero-features{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:580px;margin-bottom:24px}
.hero-features li{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s}
.hero-features li:hover{border-color:rgba(247,181,0,.4);background:linear-gradient(180deg,rgba(247,181,0,.09),rgba(255,255,255,.02))}
.hero-features i{font-size:20px;color:var(--gold);flex-shrink:0;margin-top:1px}
.hero-features strong{display:block;font-size:12.5px;color:#fff;font-weight:700;line-height:1.3}
.hero-features small{display:block;font-size:11.5px;color:rgba(255,255,255,.58);line-height:1.4;margin-top:2px}

.hero-reassure{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;font-size:12px;font-weight:600;color:rgba(255,255,255,.62)}
.hero-reassure span{display:inline-flex;align-items:center;gap:6px}
.hero-reassure i{color:#4ADE80;font-size:15px}

/* ---------- CARROUSEL DU HERO ----------
   Cadre en verre dépoli, scène claire pour la photo, coins façon viseur. */
.hero-carousel{position:relative}
.hero-carousel::before{content:"";position:absolute;inset:6% 4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(247,181,0,.3),transparent);filter:blur(34px)}
.hc-frame{position:relative;border-radius:24px;padding:14px;background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.15);box-shadow:0 30px 70px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hc-hud{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 6px 12px;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hc-live{display:inline-flex;align-items:center;gap:8px}
.hc-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 10px #4ADE80}
.hc-count{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:1.5px}
.hc-count b{color:var(--gold)}

/* Toutes les diapositives occupent la même case : la piste prend la hauteur
   de la plus grande et rien ne saute pendant les transitions. */
.hc-track{display:grid}
.hc-slide{grid-area:1/1;display:flex;flex-direction:column;gap:14px;color:inherit;opacity:0;visibility:hidden;transform:translateX(30px);
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s linear .7s}
.hero-carousel.is-back .hc-slide{transform:translateX(-30px)}
.hc-slide.is-active,.hero-carousel.is-back .hc-slide.is-active{opacity:1;visibility:visible;transform:none;
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s}

.hc-stage{position:relative;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 42%,#fff 0%,#F4F6FA 58%,#E4E9F1 100%)}
.hc-stage img{width:100%;height:100%;object-fit:contain;padding:26px;mix-blend-mode:multiply;transform:scale(.93);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.hc-slide.is-active .hc-stage img{transform:scale(1)}
.hc-slide:hover .hc-stage img{transform:scale(1.04)}
.hc-stage::before,.hc-stage::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--yellow);pointer-events:none;z-index:1}
.hc-stage::before{top:14px;left:14px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.hc-stage::after{bottom:14px;right:14px;border-left:0;border-top:0;border-bottom-right-radius:8px}
.hc-badge{position:absolute;top:14px;right:14px;z-index:2;background:var(--red);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:4px 10px}

.hc-info{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:2px 6px}
.hc-text{min-width:0}
.hc-cat{display:block;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.hc-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:18px;font-weight:700;color:#fff;line-height:1.3}
.hc-buy{flex-shrink:0;text-align:right}
.hc-old{display:block;font-size:12px;color:rgba(255,255,255,.5);text-decoration:line-through}
.hc-price{display:block;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.4px;white-space:nowrap}
.hc-go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;font-weight:700;color:var(--gold)}
.hc-go i{transition:transform .2s}
.hc-slide:hover .hc-go i{transform:translateX(3px)}

.hc-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:12px 4px 0;border-top:1px solid rgba(255,255,255,.1)}
.hc-arrow{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;flex-shrink:0;transition:background .15s,border-color .15s,color .15s}
.hc-arrow:hover{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.hc-dots{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;flex-wrap:wrap}
/* Zone cliquable de 24 px ; la barre visible, elle, reste fine. */
.hc-dot{height:24px;padding:0 3px;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center}
.hc-dot span{position:relative;display:block;width:16px;height:5px;border-radius:999px;background:rgba(255,255,255,.24);overflow:hidden;transition:width .35s ease,background .2s}
.hc-dot:hover span{background:rgba(255,255,255,.45)}
.hc-dot.is-active span{width:44px}
.hc-dot i{position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.hc-dot.is-active i{transform:scaleX(1)}
.hero-carousel.is-auto .hc-dot.is-active i{transform:scaleX(0);animation:hcProgress 5s linear forwards}
.hero-carousel.is-paused .hc-dot.is-active i{animation-play-state:paused}
@keyframes hcProgress{to{transform:scaleX(1)}}

.hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1280px;margin:40px auto 0}
.hero-kpi{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}
.hero-kpi > i{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(247,181,0,.12);border:1px solid rgba(247,181,0,.22);color:var(--gold);font-size:20px;flex-shrink:0}
.hero-kpi-num{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.15}
.hero-kpi-lbl{font-size:11px;color:rgba(255,255,255,.58);margin-top:2px;letter-spacing:.2px}

@media (prefers-reduced-motion:reduce){
  .hc-slide,.hc-slide.is-active,.hc-stage img{transition:none}
  .hero-tag-dot{animation:none}
}

/* ---------- BANNIERE VISUELLE ----------
   Deux tuiles-photos plutôt qu'une image aplatie : le texte reste du vrai
   texte (lisible par Google, redimensionnable), et chaque tuile est un lien. */
.promo-band{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;padding:22px 24px;background:var(--bg)}
.promo-tile{position:relative;border-radius:16px;overflow:hidden;min-height:230px;display:flex;align-items:flex-end;box-shadow:var(--shadow);isolation:isolate}
.promo-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s cubic-bezier(.4,0,.2,1)}
/* Voile sombre : sans lui, un texte blanc sur photo claire devient illisible.
   Les tuiles sans photo portent leur propre dégradé marine, le voile reste
   alors transparent pour ne pas les assombrir deux fois. */
.promo-tile::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,27,54,.88) 0%,rgba(11,27,54,.72) 42%,rgba(11,27,54,.18) 100%)}
.promo-tile-plain::after{background:none}
.promo-tile-plain{background:linear-gradient(135deg,var(--hero-1) 0%,var(--hero-2) 100%)}
.promo-tile-gold{background:linear-gradient(135deg,#8A5A00 0%,#C68B00 100%)}
.promo-tile:hover img{transform:scale(1.04)}
.promo-tile-icon{position:absolute;right:-10px;bottom:-18px;font-size:150px;line-height:1;color:rgba(255,255,255,.09);pointer-events:none}
.promo-tile-body{padding:26px 28px;max-width:460px}
.promo-eyebrow{display:inline-block;font-size:11px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.7px;margin-bottom:9px}
.promo-tile-body h2{font-size:24px;font-weight:800;color:#fff;line-height:1.22;letter-spacing:-.4px;margin-bottom:8px}
.promo-tile-body p{font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.55;margin-bottom:14px}
.promo-cta{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#fff;border-bottom:2px solid var(--gold);padding-bottom:3px}
.promo-tile .promo-cta i{transition:transform .2s}
.promo-tile:hover .promo-cta i{transform:translateX(4px)}
.promo-tile:not(.promo-tile-main)::after{background:linear-gradient(180deg,rgba(20,23,27,.12) 0%,rgba(20,23,27,.78) 58%,rgba(20,23,27,.92) 100%)}
.promo-tile:not(.promo-tile-main) .promo-tile-body h2{font-size:19px}

/* ---------- SECTION AMBIANCE ---------- */

/* ---------- TRUST ---------- */
.trust{background:#fff;border-bottom:1px solid var(--border);padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;align-items:center;gap:12px;padding:18px 20px;border-right:1px solid #F0EEE8}
.trust-item:last-child{border-right:none}
.trust-icon{width:38px;height:38px;background:var(--yellow-light);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-icon i{color:var(--yellow-dark);font-size:18px}
.trust-text p{font-size:13px;font-weight:700;color:#111;line-height:1.2}
.trust-text span{font-size:11px;color:var(--text-light)}

/* ---------- SECTIONS ---------- */
.sec{padding:44px 24px}
.sec-alt{background:#fff;padding:44px 24px}
.sec-hdr{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:12px;flex-wrap:wrap}
.sec-tag{font-size:11px;font-weight:800;color:var(--yellow-dark);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.sec-title{font-size:21px;font-weight:800;color:#111;letter-spacing:-.3px}
.sec-link{font-size:12px;font-weight:700;color:var(--navy);border:1.5px solid var(--border);border-radius:7px;padding:8px 16px;cursor:pointer;background:none;display:flex;align-items:center;gap:5px}
.sec-link:hover{border-color:var(--navy)}

/* ---------- CATEGORY GRID ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px 14px;cursor:pointer;transition:border-color .18s,transform .12s;position:relative;display:block}
.cat-card:hover{border-color:var(--yellow-dark);transform:translateY(-2px)}
.cat-card-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.cat-card-icon i{font-size:22px}
/* Carte de catégorie illustrée : la photo remplace l'icône et occupe toute la
   largeur, comme sur les grands sites marchands. */
.cat-card-photo{padding:0;overflow:hidden}
.cat-card-media{aspect-ratio:3/2;overflow:hidden;background:var(--navy-tint)}
.cat-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.cat-card-photo:hover .cat-card-media img{transform:scale(1.06)}
.cat-card-photo h3{margin:14px 14px 2px}
.cat-card-photo p{margin:0 14px}
.cat-card-photo .sub{margin:5px 14px 16px}
.cat-card h3{font-size:13px;font-weight:700;color:#111;margin-bottom:2px;line-height:1.3}
.cat-card p{font-size:11px;color:var(--text-light)}
.cat-card .sub{font-size:10.5px;color:var(--text-light);margin-top:5px;line-height:1.4}
.cat-more{background:var(--navy);border-color:var(--navy);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:18px 16px}
.cat-more h3{font-size:14px;font-weight:800;color:#fff;margin-bottom:4px}
.cat-more p{font-size:11px;color:rgba(255,255,255,.72)}
.cat-more i{color:var(--yellow-ink);font-size:20px;margin-top:10px}

/* ---------- FLASH SALE ---------- */
.flash{background:#fff;padding:44px 24px}
.flash-hdr{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.flash-title{font-size:21px;font-weight:800;color:#111;letter-spacing:-.3px;display:flex;align-items:center;gap:8px}
.flash-timer{display:flex;align-items:center;gap:6px;color:var(--text-light)}
.timer-box{background:var(--navy);color:#fff;border-radius:6px;padding:6px 10px;font-size:14px;font-weight:800;min-width:36px;text-align:center}
.timer-sep{font-size:16px;font-weight:800;color:var(--navy)}
.flash-link{margin-left:auto;font-size:12px;font-weight:700;color:var(--navy);border:1.5px solid var(--border);border-radius:7px;padding:8px 16px;cursor:pointer;background:none;display:flex;align-items:center;gap:5px}

/* ---------- PRODUCT GRID / CARD ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Rangée de produits défilante horizontalement (style AliExpress/eBay) */
.scroll-row-wrap{position:relative}
.scroll-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:2px 2px 10px;scrollbar-width:none}
.scroll-row::-webkit-scrollbar{display:none}
.scroll-row .prod-card{flex:0 0 215px;width:215px;scroll-snap-align:start}
.scroll-arrow{position:absolute;top:38%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:4;color:var(--navy)}
.scroll-arrow:hover{background:var(--bg)}
.scroll-arrow.prev{left:-14px}
.scroll-arrow.next{right:-14px}
.prod-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.prod-card:hover{border-color:#CECDCA;box-shadow:var(--shadow)}
/* Zone carrée : la photo est affichée entière (contain) et occupe le maximum
   de place possible, quelle que soit sa forme (carrée 800x800 ou paysage). */
.prod-img{aspect-ratio:1/1;min-height:190px;max-height:280px;position:relative;overflow:hidden;background:#F4F4F5;display:flex;align-items:center;justify-content:center;padding:10px}
.prod-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s}
.prod-card:hover .prod-img img{transform:scale(1.05)}
.prod-tag{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;padding:3px 8px;border-radius:4px;z-index:2}
.tag-promo{background:var(--red);color:#fff}
.tag-new{background:var(--navy);color:#fff}
.tag-top{background:var(--purple);color:#fff}
.tag-sold{background:var(--text-light);color:#fff}
.prod-wish{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.prod-wish i{font-size:13px;color:#BBB}
.prod-wish.active i{color:var(--red)}
.prod-body{padding:14px;display:flex;flex-direction:column;flex:1}
.prod-cat-lbl{font-size:10px;font-weight:700;color:var(--navy-3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.prod-name{font-size:13px;font-weight:700;color:#111;line-height:1.35;margin-bottom:8px;min-height:38px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-rating{display:flex;align-items:center;gap:4px;margin-bottom:10px}
.stars{display:flex;gap:2px}
.star{width:10px;height:10px;background:var(--yellow-dark);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star-e{background:var(--border)}
.prod-rating span{font-size:11px;color:var(--text-light)}
.prod-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #F0EEE8;padding-top:10px;margin-top:auto}
.prod-price{font-size:15px;font-weight:800;color:var(--navy)}
.prod-old{font-size:11.5px;color:var(--text-light);text-decoration:line-through;display:block;margin-top:1px}
.prod-add{background:var(--navy);color:#fff;border:none;border-radius:7px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px}
.prod-add:hover{background:var(--navy-2)}
.prod-add.added{background:var(--green)}
.stock-low{font-size:10.5px;color:var(--red);font-weight:700;margin-top:4px}

/* ---------- CTA STRIP ---------- */
.cta-strip{margin:0 24px 44px;background:var(--navy);border-radius:14px;padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.cta-strip h2{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.3px}
.cta-strip p{font-size:13px;color:rgba(255,255,255,.72);line-height:1.65;max-width:62ch}
.cta-badge{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);border-radius:20px;padding:5px 13px;margin-bottom:14px}
.cta-badge i{font-size:13px;color:var(--on-yellow)}
.cta-badge span{font-size:11px;font-weight:800;color:var(--on-yellow);letter-spacing:.2px}
.cta-side{text-align:right}
.cta-strip .wa-btn{background:var(--yellow);color:var(--on-yellow);border:none;border-radius:9px;padding:15px 22px;font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.cta-strip .wa-btn:hover{background:var(--yellow-dark)}
.cta-note{font-size:11.5px;color:rgba(255,255,255,.6);margin-top:10px;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.cta-note a{color:var(--gold);font-weight:700;border-bottom:1px solid rgba(255,197,61,.4)}

/* ---------- BRANDS ---------- */
.brands-bar{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 24px;display:flex;align-items:center;gap:12px;overflow-x:auto;scrollbar-width:none}
.brands-bar::-webkit-scrollbar{display:none}
.brands-bar .lbl{font-size:11px;font-weight:800;color:var(--text-light);text-transform:uppercase;letter-spacing:.6px;flex-shrink:0}
.brand-pill{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--navy);flex-shrink:0;white-space:nowrap;transition:border-color .15s,background .15s}
.brand-pill:hover{background:var(--navy-tint);border-color:var(--navy-3)}

/* ---------- NEWSLETTER ---------- */
.newsletter{background:var(--yellow-light);border:1px solid #F1E3B4;border-radius:12px;padding:28px 32px;margin:0 24px 44px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.newsletter-text h3{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:4px}
.newsletter-text p{font-size:13px;color:#6B5A2A}
.newsletter-form{display:flex;flex:1;gap:8px;justify-content:flex-end;flex-wrap:wrap;min-width:260px}
.newsletter-form input{flex:1;max-width:280px;border:1.5px solid var(--border);border-radius:8px;padding:11px 14px;font-size:13px;background:#fff;outline:none}
.newsletter-form button{background:var(--navy);color:#fff;border:none;border-radius:8px;padding:11px 20px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.newsletter-form button:hover{background:var(--navy-2)}
.newsletter-msg{font-size:12px;margin-top:8px;width:100%}

/* ---------- FILTER TABS ---------- */
.filter-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.ftab{background:#fff;border:1.5px solid var(--border);border-radius:7px;padding:8px 14px;font-size:12px;font-weight:600;color:#555;cursor:pointer}
.ftab.on,.ftab:hover{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}

/* ---------- FOOTER ---------- */
.footer{background:var(--navy);padding:44px 24px 20px}
.footer-top{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:24px;margin-bottom:32px}
.footer-brand-logo{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.footer-brand-logo-box{width:32px;height:32px;background:rgba(247,181,0,.18);border-radius:7px;display:flex;align-items:center;justify-content:center}
.footer-brand-logo-box i{color:var(--yellow);font-size:16px}
.footer-brand-logo span{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.3px}
.footer-brand-logo em{color:var(--yellow);font-style:normal}
.footer-logo-img{height:64px;width:auto;display:block}
.footer-brand p{font-size:12.5px;color:rgba(255,255,255,.78);line-height:1.75;margin-bottom:14px}
.footer-brand-contact{display:flex;flex-direction:column;gap:8px}
.footer-brand-contact span,.footer-brand-contact a{font-size:12.5px;color:rgba(255,255,255,.86);display:flex;align-items:center;gap:8px}
.footer-brand-contact a:hover{color:#fff}
.footer-brand-contact i{font-size:14px;color:var(--gold);flex-shrink:0}
.footer-col h4{font-size:12.5px;font-weight:800;color:#fff;margin-bottom:14px;letter-spacing:.2px}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{font-size:12.5px;color:rgba(255,255,255,.72);cursor:pointer}
.footer-col ul li a:hover{color:var(--gold)}
.footer-desc{color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.75;margin-bottom:16px}
.footer-socials{display:flex;gap:8px;margin-top:14px}
.soc-btn{width:30px;height:30px;background:rgba(255,255,255,.12);border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.soc-btn i{font-size:14px;color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:18px;margin-top:8px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:11.5px;color:rgba(255,255,255,.6)}
.pay-icons{display:flex;gap:7px;flex-wrap:wrap}
.pay-icon{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:5px 11px;font-size:10.5px;font-weight:700;color:#fff}

/* ---------- CATEGORY / SEARCH / LISTING PAGE ---------- */
.listing{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start;padding:20px 24px 50px}
.filters-box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;position:sticky;top:82px}
.filters-box h4{font-size:13px;font-weight:800;margin-bottom:12px;color:var(--navy);text-transform:uppercase;letter-spacing:.4px}
.filter-group{margin-bottom:20px}
.filter-group h5{font-size:12px;font-weight:700;margin-bottom:10px;color:#333}
.filter-group label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#555;padding:5px 0;cursor:pointer}
.filter-price{display:flex;gap:8px;align-items:center}
.filter-price input{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px;font-size:12px}
.listing-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.listing-count{font-size:12.5px;color:var(--text-light)}
.listing-sort select{border:1.5px solid var(--border);border-radius:7px;padding:9px 12px;font-size:12.5px;background:#fff}
.cat-hero{background:var(--navy);padding:30px 24px;display:flex;align-items:center;gap:16px}
.cat-hero-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-hero-icon i{font-size:26px}
.cat-hero h1{font-size:22px;font-weight:800;color:#fff}
.cat-hero p{font-size:13px;color:rgba(255,255,255,.55);margin-top:4px}
.empty-state{background:#fff;border:1px dashed var(--border);border-radius:12px;padding:50px 24px;text-align:center;color:var(--text-light)}
.empty-state i{font-size:40px;color:var(--text-faint);margin-bottom:12px}

.pagination{display:flex;gap:6px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:7px;font-size:12.5px;font-weight:600;color:var(--navy)}
.pagination a:hover{border-color:var(--navy)}
.pagination .active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagination .disabled{color:var(--text-faint);pointer-events:none}

/* ---------- PRODUCT DETAIL ---------- */
.pd-wrap{display:grid;grid-template-columns:460px 1fr;gap:36px;padding:24px}
.pd-gallery-main{background:#F4F4F5;border:1px solid var(--border);border-radius:14px;overflow:hidden;height:420px;display:flex;align-items:center;justify-content:center;padding:24px}
.pd-gallery-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pd-thumbs{display:flex;gap:8px;margin-top:10px}
.pd-thumb{width:76px;height:76px;border-radius:9px;overflow:hidden;border:2px solid var(--border);cursor:pointer;flex-shrink:0;background:#F4F4F5;display:flex;align-items:center;justify-content:center;padding:6px}
.pd-thumb.active{border-color:var(--yellow-dark)}
.pd-thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pd-info h1{font-size:24px;font-weight:800;color:var(--text);line-height:1.3;margin:8px 0 10px}
.pd-brand{font-size:12.5px;color:var(--text-light)}
.pd-brand a{color:var(--navy);font-weight:700}
.pd-rating{display:flex;align-items:center;gap:8px;margin:12px 0}
.pd-price-box{background:var(--bg);border-radius:12px;padding:18px;margin:16px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.pd-price{font-size:28px;font-weight:800;color:var(--navy)}
.pd-old-price{font-size:14px;color:#BBB;text-decoration:line-through}
.pd-save{font-size:12px;font-weight:700;color:var(--red);background:#FEE2E2;padding:3px 8px;border-radius:5px;display:inline-block;margin-top:4px}
.pd-stock{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.pd-stock.ok{color:var(--green)}
.pd-stock.low{color:#D97706}
.pd-stock.out{color:var(--red)}
.pd-qty{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:8px;overflow:hidden;width:fit-content}
.pd-qty button{width:38px;height:42px;background:#fff;border:none;font-size:16px;font-weight:700;color:var(--navy);cursor:pointer}
.pd-qty button:hover{background:var(--bg)}
.pd-qty input{width:50px;text-align:center;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);height:42px;font-size:14px;font-weight:700}
.pd-actions{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap}
.pd-meta{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--text-light);border-top:1px solid var(--border);padding-top:16px;margin-top:6px}
.pd-meta strong{color:var(--text)}
.pd-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin:40px 24px 0}
.pd-tab{padding:14px 20px;font-size:13.5px;font-weight:700;color:var(--text-light);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px}
.pd-tab.active{color:var(--navy);border-color:var(--yellow-dark)}
.pd-tab-content{padding:28px 24px 50px;max-width:900px}
.pd-tab-panel{display:none}
.pd-tab-panel.active{display:block}
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr{border-bottom:1px solid var(--border)}
.spec-table td{padding:12px 8px;font-size:13px}
.spec-table td:first-child{color:var(--text-light);width:220px}
.spec-table td:last-child{font-weight:600}
.pd-desc{font-size:13.5px;line-height:1.8;color:#333}
.related-wrap{padding:0 24px 50px}

/* ---------- CART PAGE ---------- */
.cart-wrap{display:grid;grid-template-columns:1fr 340px;gap:24px;padding:24px;align-items:start}
.cart-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;margin-bottom:12px}
.cart-item img{width:80px;height:80px;object-fit:contain;border-radius:8px;background:#F4F4F5;padding:6px}
.cart-item h4{font-size:13.5px;font-weight:700;margin-bottom:4px}
.cart-item .cat{font-size:11px;color:var(--yellow-dark);font-weight:700;text-transform:uppercase}
.cart-item-actions{display:flex;align-items:center;gap:16px;margin-top:8px}
.cart-item-price{text-align:right}
.cart-item-price strong{font-size:15px;color:var(--navy);display:block}
.cart-remove{font-size:11.5px;color:var(--red);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px}
.qty-mini{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:7px;overflow:hidden}
.qty-mini button{width:28px;height:28px;background:#fff;border:none;font-weight:700;cursor:pointer;color:var(--navy)}
.qty-mini input{width:36px;text-align:center;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);height:28px;font-size:12.5px}
.summary-box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;position:sticky;top:82px}
.summary-box h3{font-size:15px;font-weight:800;margin-bottom:16px}
.summary-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-light);padding:8px 0}
.summary-row.total{border-top:1px solid var(--border);margin-top:8px;padding-top:14px;font-size:16px;font-weight:800;color:var(--navy)}
.summary-row.total span:last-child{color:var(--navy)}
.empty-cart{background:#fff;border:1px dashed var(--border);border-radius:12px;padding:60px 24px;text-align:center}
.empty-cart i{font-size:48px;color:var(--text-faint);margin-bottom:16px}
.promo-note{background:var(--yellow-light);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:11.5px;color:var(--text-light);margin-top:14px}

/* ---------- CHECKOUT / FORMS ---------- */
.form-page{display:grid;grid-template-columns:1fr 360px;gap:24px;padding:24px;align-items:start}
.form-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:24px}
.form-card h3{font-size:15px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:700;color:var(--text)}
.field input,.field select,.field textarea{border:1.5px solid var(--border);border-radius:8px;padding:11px 13px;font-size:13.5px;outline:none;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy)}
.field-error{font-size:11.5px;color:var(--red)}
.payment-options{display:flex;flex-direction:column;gap:10px}
.payment-option{border:1.5px solid var(--border);border-radius:10px;padding:13px 16px;display:flex;align-items:center;gap:12px;cursor:pointer}
.payment-option:has(input:checked){border-color:var(--navy);background:var(--navy-tint)}
.payment-option input{width:16px;height:16px}
.payment-option i{font-size:20px;color:var(--navy)}
.alert{border-radius:9px;padding:12px 16px;font-size:12.5px;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start}
.alert-error{background:#FEE2E2;color:#B91C1C;border:1px solid #FCA5A5}
.alert-success{background:#DCFCE7;color:#166534;border:1px solid #86EFAC}
.alert-info{background:var(--navy-tint);color:var(--navy);border:1px solid #C7D6EC}

/* ---------- CONSIGNES DE PAIEMENT (page de confirmation) ---------- */
.pay-info{margin-top:20px;border:1.5px solid var(--navy);border-radius:var(--radius);padding:20px;background:var(--navy-tint)}
.pay-info h3{font-size:15px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pay-info-intro{font-size:12.5px;color:var(--text-light);margin-bottom:16px;line-height:1.6}
.pay-info-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-sm);overflow:hidden}
.pay-info-table tr{border-bottom:1px solid var(--border)}
.pay-info-table tr:last-child{border-bottom:none}
.pay-info-table td{padding:11px 14px;font-size:13px;vertical-align:middle}
.pay-info-table td:first-child{color:var(--text-light);width:170px}
.pay-info-table td strong{font-size:14px;letter-spacing:.02em}
.pay-info-ref{background:#FFFBEB}
.pay-info-ref td strong{color:var(--yellow-dark)}
.copy-btn{margin-left:10px;border:1px solid var(--border);background:#fff;border-radius:6px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--navy);cursor:pointer;font-family:inherit}
.copy-btn:hover{background:var(--navy-tint)}
.copy-btn.is-copied{background:#DCFCE7;border-color:#86EFAC;color:#166534}
.pay-info-warning{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--text);display:flex;gap:8px;align-items:flex-start}
.pay-info-warning i{color:var(--yellow-ink);font-size:16px;flex-shrink:0}
.pay-info-alt{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--text-light)}
@media(max-width:700px){
  .pay-info-table td:first-child{width:110px}
  .pay-info-table td{padding:10px;font-size:12px}
  .copy-btn{display:block;margin:6px 0 0}
}

/* ---------- ACCOUNT PAGES ---------- */
.auth-wrap{max-width:420px;margin:50px auto;padding:0 24px}
.auth-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:32px;box-shadow:var(--shadow)}
.auth-card h1{font-size:20px;font-weight:800;margin-bottom:6px}
.auth-card p.sub{font-size:12.5px;color:var(--text-light);margin-bottom:22px}
.auth-switch{text-align:center;margin-top:18px;font-size:12.5px;color:var(--text-light)}
.auth-switch a{color:var(--navy);font-weight:700}
.dash-orders table{width:100%;border-collapse:collapse}
.dash-orders th{text-align:left;font-size:11.5px;text-transform:uppercase;color:var(--text-light);padding:10px;border-bottom:2px solid var(--border)}
.dash-orders td{padding:12px 10px;font-size:13px;border-bottom:1px solid var(--border)}
.status-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;display:inline-block}
.status-en_attente{background:#FEF3C7;color:#92400E}
.status-confirmee{background:#DBEAFE;color:#1E40AF}
.status-preparee{background:#E0E7FF;color:#3730A3}
.status-expediee{background:#EDE9FE;color:#5B21B6}
.status-livree{background:#DCFCE7;color:#166534}
.status-annulee{background:#FEE2E2;color:#991B1B}

/* ---------- STATIC PAGES ---------- */
.static-hero{background:var(--navy);padding:44px 24px;text-align:center}
.static-hero h1{color:#fff;font-size:28px;font-weight:800}
.static-hero p{color:rgba(255,255,255,.55);margin-top:8px;font-size:13.5px}
.static-content{max-width:820px;margin:0 auto;padding:40px 24px;font-size:14px;line-height:1.8;color:#333}
.static-content h2{font-size:18px;font-weight:800;color:var(--navy);margin:28px 0 12px}
.static-content h2:first-child{margin-top:0}
.static-content p{margin-bottom:12px}
.credits-table{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.5;margin:6px 0 18px}
.credits-table th{text-align:left;background:var(--navy);color:#fff;font-weight:700;padding:9px 10px;white-space:nowrap}
.credits-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.credits-table tr:nth-child(even) td{background:#FAFAFB}
.credits-table td:first-child{font-weight:600;color:var(--navy)}
.credits-table a{color:var(--navy);text-decoration:underline;word-break:break-word}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0}
.faq-item h3{font-size:14.5px;font-weight:700;margin-bottom:6px;color:var(--navy)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:40px auto;padding:0 24px}
.contact-info-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px}
.contact-info-card .item{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.contact-info-card i{color:var(--yellow-dark);font-size:18px;margin-top:2px}

/* ---------- HERO PRODUIT UNIQUE (accueil) ---------- */
.hero-flex{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:36px 0 10px}
.hero-flex-img{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.35);min-height:320px}
.hero-flex-img img{width:100%;height:100%;object-fit:cover;min-height:320px;max-height:440px}
.hero-price-pill{display:inline-flex;align-items:baseline;gap:8px;background:#fff;border-radius:12px;padding:10px 16px;margin:14px 0 18px}
.hero-price-pill .amount{font-size:22px;font-weight:800;color:var(--navy)}
.hero-price-pill .note{font-size:11.5px;color:var(--text-light)}

/* ---------- SPOTLIGHT PRODUIT ---------- */
.spotlight{display:grid;grid-template-columns:460px 1fr;gap:36px;padding:0 24px}
.spotlight-gallery-main{border-radius:14px;overflow:hidden;border:1px solid var(--border);height:420px;background:#fff}
.spotlight-gallery-main img{width:100%;height:100%;object-fit:cover}
.spotlight-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.spotlight-thumb{width:66px;height:66px;border-radius:9px;overflow:hidden;border:2px solid var(--border);cursor:pointer;flex-shrink:0}
.spotlight-thumb.active{border-color:var(--navy)}
.spotlight-thumb img{width:100%;height:100%;object-fit:cover}
.swatch-row{display:flex;gap:10px;margin:14px 0 4px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--border);cursor:pointer;position:relative;padding:0}
.swatch.active{border-color:var(--navy);box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--navy)}
.swatch-label{font-size:12px;color:var(--text-light);margin-left:4px}
.tier-row{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.tier-card{border:1.5px solid var(--border);border-radius:10px;padding:12px 16px;min-width:140px}
.tier-card.best{border-color:var(--navy);background:var(--navy-tint)}
.tier-card .tier-lbl{font-size:11px;font-weight:700;color:var(--text-light);text-transform:uppercase}
.tier-card .tier-price{font-size:17px;font-weight:800;color:var(--navy);margin-top:4px}
.tier-card .tier-save{font-size:11px;color:var(--green);font-weight:700}

/* ---------- FEATURES / GALLERY / AVIS ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-grid img{width:100%;height:230px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-grid-4{grid-template-columns:repeat(4,1fr)}
.review-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
.review-card .stars{margin-bottom:8px}
.review-card h4{font-size:13.5px;font-weight:700;margin-bottom:4px}
.review-card p{font-size:12.5px;color:#444;line-height:1.6;margin-bottom:10px}
.review-card .who{font-size:11.5px;color:var(--text-light);display:flex;align-items:center;gap:6px}
.review-summary{display:flex;align-items:center;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.review-summary .avg{font-size:34px;font-weight:800;color:var(--navy)}
.review-bar-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-light);margin-bottom:3px}
.review-bar-track{flex:1;height:6px;background:var(--border);border-radius:4px;overflow:hidden;max-width:160px}
.review-bar-fill{height:100%;background:var(--yellow-dark)}

@media (max-width:1100px){
  .hero-flex{grid-template-columns:1fr}
  .spotlight{grid-template-columns:1fr}
  .spotlight-gallery-main{height:320px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .review-grid,.review-grid-4{grid-template-columns:1fr}
}

/* ---------- COOKIE BANNER ---------- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:100;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:18px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;max-width:900px;margin:0 auto}
.cookie-banner-text strong{font-size:13.5px;display:block;margin-bottom:4px}
.cookie-banner-text p{font-size:12px;color:var(--text-light);line-height:1.6}
.cookie-banner-text a{color:var(--navy);font-weight:700;text-decoration:underline}
.cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;margin-left:auto}
@media (max-width:640px){
  .cookie-banner{flex-direction:column;align-items:stretch}
  .cookie-banner-actions{margin-left:0;justify-content:stretch}
  .cookie-banner-actions .btn{flex:1}
}

/* ---------- SUIVI DE COMMANDE ---------- */
.status-timeline{display:flex;justify-content:space-between;margin:24px 0 30px;position:relative}
.status-timeline::before{content:'';position:absolute;top:15px;left:5%;right:5%;height:2px;background:var(--border);z-index:0}
.status-step{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1;flex:1;text-align:center}
.status-step .dot{width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:15px}
.status-step.done .dot{background:var(--navy);border-color:var(--navy);color:#fff}
.status-step.current .dot{background:#fff;border-color:var(--navy);color:var(--navy);box-shadow:0 0 0 4px var(--navy-tint)}
.status-step .lbl{font-size:11.5px;font-weight:700;color:var(--text-light)}
.status-step.done .lbl,.status-step.current .lbl{color:var(--text)}
.status-history{margin-top:10px}
.status-history-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.status-history-row:last-child{border-bottom:none}
.status-history-row .when{color:var(--text-faint);white-space:nowrap;min-width:130px}
@media (max-width:640px){
  .status-timeline{flex-wrap:wrap;gap:14px}
  .status-timeline::before{display:none}
}

/* ---------- 404 ---------- */
.page-404{text-align:center;padding:90px 24px}
.page-404 .code{font-size:80px;font-weight:800;color:var(--yellow-dark)}
.page-404 p{color:var(--text-light);margin:10px 0 24px}

/* ---------- MOBILE / RESPONSIVE ---------- */
@media (max-width:1200px){
  .hero h1{font-size:40px}
  .hero-grid{gap:36px}
}
@media (max-width:1024px){
  /* Le texte passe au-dessus du carrousel, qui garde une largeur confortable. */
  .hero-grid{grid-template-columns:1fr}
  .hero-carousel{width:100%;max-width:620px;margin:0 auto}
  .hc-stage{aspect-ratio:4/3}
  .hero-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .listing{grid-template-columns:1fr}
  .filters-box{position:static;margin-bottom:16px}
  .pd-wrap{grid-template-columns:1fr}
  .pd-gallery-main{height:340px}
  .form-page{grid-template-columns:1fr}
  .cart-wrap{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .promo-band{grid-template-columns:1fr}
  .promo-tile{min-height:200px}
  .ambiance{grid-template-columns:1fr;gap:24px;padding:34px 20px}
}
@media (max-width:900px){
  .promo-tile-body{padding:20px 22px}
  .promo-tile-body h2{font-size:20px}
  .ambiance-body h2{font-size:23px}
}
@media (max-width:760px){
  .topbar-right span:nth-child(2){display:none}
  .nav{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px}
  /* « width » ne suffit pas : .nav-search est en flex:1, donc sa base vaut 0 et
     la barre restait collée au panier, en débordant à droite. C'est la base
     flexible qu'il faut passer à 100 % pour lui donner sa propre ligne. */
  .nav-search{order:3;max-width:100%;flex:1 0 100%}
  .nav-actions .nav-icon-btn span,.nav-actions .nav-icon-btn{display:none}
  .nav-cart{padding:9px 12px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust-item{border-right:none;border-bottom:1px solid #F0EEE8}
  .hero{padding:30px 18px 24px}
  .hero h1{font-size:32px;letter-spacing:-1px}
  .hero-sub{font-size:14.5px;margin-bottom:22px}
  /* Les deux appels à l'action tiennent sur deux lignes plutôt que de déborder. */
  .hero-btns{margin-bottom:24px}
  .hero-btns .btn{flex:1 1 220px;justify-content:center}
  /* Sur mobile, les arguments restent sur deux colonnes, sans sous-titre :
     le carrousel remonte ainsi plus près du haut de l'écran. */
  .hero-features{gap:8px;margin-bottom:18px}
  .hero-features li{padding:11px 12px;gap:9px;align-items:center}
  .hero-features i{font-size:18px;margin-top:0}
  .hero-features small{display:none}
  .hc-name{font-size:16px}
  .hc-price{font-size:19px}
  .cta-strip{grid-template-columns:1fr;text-align:center}
  .cta-strip .wa-btn{width:100%;justify-content:center}
  .cta-side{text-align:center}
  .cta-note{justify-content:center}

  .newsletter{flex-direction:column;text-align:center}
  .newsletter-form{justify-content:center}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px 16px}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .cart-item{grid-template-columns:60px 1fr;grid-template-areas:"img body" "img price"}
  .cart-item img{grid-area:img;width:60px;height:60px}
  .cart-item-price{grid-area:price;text-align:left;display:flex;align-items:center;justify-content:space-between;margin-top:8px}
  .scroll-arrow.prev{left:2px}
  .scroll-arrow.next{right:2px}
}
@media (max-width:480px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .wrap,.sec,.sec-alt{padding-left:14px;padding-right:14px}
  .hero{padding:24px 14px 22px}
  .hero h1{font-size:28px}
  .hc-frame{padding:10px;border-radius:18px}
  .hc-stage img{padding:16px}
  .hc-info{flex-direction:column;align-items:flex-start;gap:8px}
  .hc-buy{text-align:left}
  .hero-kpi{padding:12px}
  .hero-kpi > i{width:34px;height:34px;font-size:17px}
  .hero-kpi-num{font-size:18px}
  .pd-thumbs{flex-wrap:wrap}
  .scroll-row .prod-card{flex:0 0 165px;width:165px}
}