/* COMPTOIR 2001 — concept LA MALLETTE
   Tokens derives de .claude/creative/DESIGN.md (palette corrigee le 19/09/2026). */

:root{
  --ground:#FBF1F5;
  --surface:#FFFFFF;
  --ink:#1B2A6B;
  --body:#3A4380;
  --primary:#D62878;
  --primaryInk:#FFFFFF;
  --bubble:#F9A8D4;
  --slot:#5AA5DE;
  --slotSoft:#DCEDFB;
  --alert:#C9203A;
  --clover:#E8384F;
  --sam:#4FA83D;
  --alex:#E0A500;

  --r-slot:20px;
  --r-panel:28px;
  --gut:16px;
  --wrap:1120px;
  --fast:180ms;
  --open:320ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  --titre:"Archivo Expanded","Archivo","Poppins",system-ui,-apple-system,sans-serif;
  --texte:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:var(--texte);font-size:16px;line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);color:var(--ink);margin:0;
  text-transform:uppercase;letter-spacing:-.01em;font-weight:700;line-height:1.05}
h1{font-size:clamp(28px,6.4vw,58px)}
h2{font-size:clamp(22px,4vw,38px)}
h3{font-size:clamp(17px,2.2vw,22px)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- barre de navigation ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--ground);border-bottom:1px solid var(--slotSoft)}
.nav__in{display:flex;align-items:center;gap:12px;min-height:60px}
.logo{font-family:var(--titre);font-weight:700;color:var(--ink);text-decoration:none;
  font-size:15px;letter-spacing:.06em;white-space:nowrap}
.logo span{color:var(--primary)}
.nav__links{display:flex;gap:18px;margin-left:auto;align-items:center}
.nav__links a{color:var(--body);text-decoration:none;font-size:14px;font-weight:500}
.nav__links a:hover{color:var(--primary)}
.nav__cta{background:var(--primary);color:var(--primaryInk);padding:9px 16px;border-radius:999px;
  font-weight:600;text-decoration:none;font-size:14px;white-space:nowrap}
.nav__burger{display:none;background:var(--surface);border:2px solid var(--ink);border-radius:11px;
  width:40px;height:40px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex:none}
.nav__burger i{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--ink);border-radius:2px}
.nav__burger i::before{top:-6px}.nav__burger i::after{top:6px}
.nav__panel{display:none}
@media (max-width:860px){
  /* le panier reste visible : c'est le seul chemin vers la commande en cours */
  .nav__links a:not(.nav__cta):not(.nav__panier){display:none}
  .nav__links{margin-left:auto;gap:10px}
  .nav__burger{display:flex}
  .nav__panel{display:block;max-height:0;overflow:hidden;border-top:0 solid var(--slotSoft);
    transition:max-height 220ms var(--ease)}
  .nav__panel.on{max-height:280px;border-top-width:1px}
  .nav__panel ul{list-style:none;margin:0;padding:6px 0 12px;display:grid;gap:2px}
  .nav__panel a{display:block;padding:11px 0;text-decoration:none;color:var(--ink);font-weight:600;
    border-bottom:1px solid var(--slotSoft)}
  .nav__panel li:last-child a{border-bottom:0}
}

/* ---------- badge rupture ---------- */
.rupture{display:inline-flex;align-items:center;gap:8px;background:var(--alert);color:#fff;
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.2}
.rupture::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;flex:none}
.rupture--pulse{animation:pulse 420ms var(--ease) 1}
@keyframes pulse{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}

/* ---------- panneau console = le couvercle ---------- */
.console{
  background:var(--bubble);border:3px solid var(--ink);border-radius:var(--r-panel);
  padding:18px;position:relative;
  box-shadow:0 10px 0 -2px rgba(27,42,107,.30);
}
.console::before{
  content:"";position:absolute;inset:8px 8px auto 8px;height:10px;border-radius:999px;
  background:repeating-linear-gradient(115deg,var(--slot) 0 7px,var(--ink) 7px 14px);
  opacity:.85;
}
.console__in{padding-top:16px}
.console h1{margin:10px 0 2px}
.console__sub{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 12px;opacity:.85}

.prix{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.prix__now{font-size:clamp(34px,8vw,46px);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.prix__old{font-size:18px;color:var(--ink);opacity:.62;text-decoration:line-through;
  font-variant-numeric:tabular-nums}
.prix__eco{background:var(--ink);color:#fff;border-radius:999px;padding:4px 11px;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.prix__note{font-size:12.5px;color:var(--ink);opacity:.8;margin:0 0 14px}

.btn{display:block;width:100%;border:0;cursor:pointer;text-align:center;text-decoration:none;
  background:var(--primary);color:var(--primaryInk);font-family:var(--texte);font-weight:700;
  font-size:17px;padding:16px 20px;border-radius:14px;line-height:1.2;
  transition:transform var(--fast) var(--ease),filter var(--fast) var(--ease)}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:var(--surface);color:var(--ink);border:2px solid var(--ink)}
.btn--inline{display:inline-block;width:auto;padding:13px 26px;font-size:15px}

.rassure{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.rassure li{font-size:13.5px;color:var(--ink);display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.rassure li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;margin-top:2px;
  background:var(--ink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
  background-color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-block:14px 26px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center}
.hero__img{border-radius:var(--r-slot);overflow:hidden;border:3px solid var(--ink);
  background:#F9CED7}
.hero__img img{width:100%;height:auto}
.hero__img--d{display:none}
@media (min-width:900px){
  .hero{padding-block:30px 46px}
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:28px}
  .hero__img--m{display:none}
  .hero__img--d{display:block}
}

/* ---------- section / logement ---------- */
.sec{padding-block:clamp(40px,7vw,84px)}
.sec--pale{background:var(--surface);border-block:1px solid var(--slotSoft)}
.sec__head{max-width:62ch;margin-bottom:clamp(20px,3vw,34px)}
.sec__head p{font-size:16.5px}
.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);margin:0 0 8px}

.slots{display:grid;gap:18px}
.slot{
  background:var(--surface);border:2px solid var(--slot);border-radius:var(--r-slot);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);
  box-shadow:inset 0 3px 0 rgba(90,165,222,.22);
}
.slot__fig{margin:0;background:var(--slotSoft);min-width:0}
.slot__fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.slot__body{padding:18px;min-width:0}
.slot__num{font-family:var(--titre);font-size:12px;letter-spacing:.14em;color:var(--slot);
  font-weight:700;margin:0 0 6px}
.slot__tag{display:inline-block;background:var(--slotSoft);color:var(--ink);border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  margin-left:8px;vertical-align:2px}
.slot__txt{font-size:14.5px;margin:8px 0 14px}
.slot__prix{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  border-top:1px dashed var(--slotSoft);padding-top:12px;font-size:13px}
.slot__prix b{font-variant-numeric:tabular-nums;color:var(--ink);font-size:15px}
.etiq{font-size:11.5px;color:var(--body);opacity:.8;line-height:1.35}
.stockout{color:var(--alert);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
@media (min-width:720px){
  .slot{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .slot__fig img{aspect-ratio:auto;height:100%}
  .slot__body{padding:22px 24px}
}
.pastilles{display:flex;gap:8px;margin:10px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.pastilles li{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink)}
.pastilles i{width:13px;height:13px;border-radius:50%;display:block}
.p-clover{background:var(--clover)}.p-sam{background:var(--sam)}.p-alex{background:var(--alex)}

/* ---------- addition ---------- */
.addition{background:var(--surface);border:3px solid var(--ink);border-radius:var(--r-panel);
  padding:clamp(16px,3vw,28px)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:14.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--slotSoft)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--slot);font-weight:700}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums}
tr.total td{border-top:2px solid var(--ink);border-bottom:0;font-weight:700;color:var(--ink);font-size:16px}
tr.notre td{background:var(--bubble);color:var(--ink);font-weight:800;font-size:17px;border-bottom:0}
tr.notre td:first-child{border-radius:10px 0 0 10px}
tr.notre td:last-child{border-radius:0 10px 10px 0}

/* ---------- bande image pleine largeur ---------- */
/* Pas de pivot ici : une section pleine largeur tournee de 3 degres deborde du viewport
   des deux cotes (mesure : -11 px a 1440, -5 px a 390). Le pivot reste aux packshots. */
.bande{border-block:3px solid var(--ink);background:#F4D7DF;overflow:hidden}
.bande img{width:100%;height:clamp(200px,38vw,440px);object-fit:cover;object-position:center 42%}

/* ---------- cartes generiques ---------- */
.cards{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{background:var(--surface);border:2px solid var(--slotSoft);border-radius:var(--r-slot);
  padding:20px;min-width:0}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px;margin:0}
.card--num{counter-increment:step}
.card__num{font-family:var(--titre);font-size:30px;color:var(--bubble);line-height:1;margin:0 0 8px}

/* promesses / limites */
.pl{display:grid;gap:16px}
@media (min-width:760px){.pl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pl ul{margin:0;padding-left:1.1em;font-size:14.5px}
.pl li{margin-bottom:7px}
.pl__ok{border-color:var(--sam)}
.pl__no{border-color:var(--slot)}

/* ---------- avis ---------- */
.avis__demo{position:relative;background:var(--surface);border:2px dashed var(--slot);
  border-radius:var(--r-slot);padding:20px}
.avis__badge{display:inline-block;background:var(--slot);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:4px 11px;
  position:static;margin-bottom:12px}
.etoiles{color:var(--primary);font-size:17px;letter-spacing:2px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
details{background:var(--surface);border:2px solid var(--slotSoft);border-radius:14px;
  padding:14px 18px}
details[open]{border-color:var(--slot)}
summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;line-height:1;color:var(--primary);flex:none}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0;font-size:14.5px}

/* ---------- formulaire ---------- */
.form{display:grid;gap:14px;max-width:560px}
label{font-size:13px;font-weight:700;color:var(--ink);display:block;margin-bottom:5px}
input,textarea,select{width:100%;font-family:var(--texte);font-size:16px;color:var(--body);
  background:var(--surface);border:2px solid var(--slotSoft);border-radius:12px;padding:12px 14px}
input:focus,textarea:focus,select:focus{border-color:var(--slot);outline:none}
textarea{min-height:130px;resize:vertical}

/* ---------- pied ---------- */
.pied{background:var(--ink);color:#D8DEF7;padding-block:40px 28px;margin-top:20px}
.pied a{color:#fff;text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied h3{color:#fff;font-size:14px;margin-bottom:10px;letter-spacing:.07em}
.pied__grid{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.pied__grid{grid-template-columns:2fr 1fr 1fr}}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px}
.pied__legal{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);
  font-size:12.5px;line-height:1.55;color:#B9C2EA}
.pied__legal strong{color:#fff}

/* ---------- barre fixe ---------- */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);
  transform:translateY(110%);transition:transform 200ms var(--ease);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(27,42,107,.22)}
.barre.on{transform:translateY(0)}
.barre__in{max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:14px}
.barre__txt{color:#fff;min-width:0}
.barre__nom{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre__prix{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.barre__prix s{font-size:13px;font-weight:500;opacity:.62;margin-left:7px}
.barre .btn{width:auto;margin-left:auto;flex:none;padding:13px 22px;font-size:15px}

/* ---------- tiroir de commande ---------- */
.voile{position:fixed;inset:0;background:rgba(27,42,107,.55);opacity:0;pointer-events:none;
  transition:opacity var(--fast) var(--ease);z-index:60}
.voile.on{opacity:1;pointer-events:auto}
.tiroir{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--ground);
  z-index:70;transform:translateX(100%);visibility:hidden;
  transition:transform 260ms var(--ease),visibility 0s linear 260ms;
  display:flex;flex-direction:column;overflow-y:auto}
.tiroir.on{transform:translateX(0);visibility:visible;transition-delay:0s,0s}
.tiroir__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px var(--gut);border-bottom:1px solid var(--slotSoft);position:sticky;top:0;
  background:var(--ground);z-index:2}
.tiroir__head h2{font-size:17px}
.tiroir__x{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);
  padding:4px 8px}
.tiroir__body{padding:18px var(--gut) 28px}
.ligne{display:flex;gap:14px;align-items:center;background:var(--surface);border:2px solid var(--slotSoft);
  border-radius:14px;padding:12px;margin-bottom:16px}
.ligne img{width:64px;height:64px;object-fit:cover;border-radius:9px;flex:none}
.ligne b{display:block;color:var(--ink);font-size:14.5px}
.ligne span{font-size:13px}
.recap{background:var(--surface);border:2px solid var(--slotSoft);border-radius:14px;padding:14px;
  margin-bottom:16px;font-size:14px}
.recap div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.recap .tot{border-top:2px solid var(--ink);margin-top:8px;padding-top:10px;
  font-weight:800;color:var(--ink);font-size:17px}

/* ---------- mouvement : ouvrir ---------- */
.rev{opacity:0;transform:perspective(800px) rotateX(-6deg) translateY(14px);transform-origin:top center}
.rev.vu{opacity:1;transform:none;transition:opacity var(--open) var(--ease),transform var(--open) var(--ease)}
.rev-img{opacity:0;transform:translateY(16px) rotate(3deg)}
.rev-img.vu{opacity:1;transform:none;transition:opacity 280ms var(--ease),transform 280ms var(--ease)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rev,.rev-img{opacity:1;transform:none}
}

/* pages legales : lecture longue */
.legal{max-width:78ch}
.legal h2{margin-top:36px;font-size:clamp(19px,2.6vw,25px)}
.legal h3{margin-top:22px;font-size:17px;text-transform:none;letter-spacing:0}
.legal p,.legal li{font-size:15px}
.legal ul{padding-left:1.15em}
.manque{background:#FFF3C4;border-left:4px solid var(--alex);padding:12px 14px;border-radius:0 10px 10px 0;
  font-size:14px;color:#5A4600;margin:0 0 18px}
.manque strong{color:#3A2E00}

/* ---------- tunnel : lien panier dans la nav ---------- */
.nav__panier{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;border:2px solid var(--slotSoft);color:var(--ink);
  text-decoration:none;flex:none;transition:border-color var(--fast) var(--ease)}
.nav__panier.plein{border-color:var(--primary)}
.nav__nb{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:999px;
  background:var(--primary);color:#fff;font-size:11px;font-weight:800;line-height:19px;
  text-align:center;padding:0 5px}
.nav__nb:empty{display:none}

/* ---------- tiroir mini-panier ---------- */
.tiroir-lien{display:block;text-align:center;margin-top:12px;font-size:14px;font-weight:600;
  color:var(--ink)}

/* ---------- pages panier et informations ---------- */
.panier-grille{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.panier-grille{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px}}

.panier-ligne{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;
  background:var(--surface);border:2px solid var(--slotSoft);border-radius:var(--r-slot);padding:16px}
.panier-ligne img{width:96px;height:120px;object-fit:cover;border-radius:12px}
.panier-ligne__txt{min-width:0;display:grid;gap:4px;align-content:start}
.panier-ligne__txt b{color:var(--ink);font-size:16px}
.panier-ligne__txt span{font-size:13.5px}
.panier-ligne__prix{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;
  border-top:1px dashed var(--slotSoft);padding-top:12px;
  font-size:24px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.panier-ligne__prix s{font-size:14px;font-weight:500;opacity:.55}
.panier-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:13.5px}
.panier-actions a,.panier-actions button{color:var(--primary);font-weight:600;background:none;
  border:0;padding:0;cursor:pointer;font-family:var(--texte);font-size:13.5px;text-decoration:underline}
@media (min-width:560px){
  .panier-ligne{grid-template-columns:120px minmax(0,1fr) auto}
  .panier-ligne img{width:120px;height:150px}
  .panier-ligne__prix{grid-column:auto;border-top:0;padding-top:0;flex-direction:column;
    align-items:flex-end;gap:2px}
}

.panier-recap{background:var(--surface);border:3px solid var(--ink);border-radius:var(--r-panel);
  padding:20px;position:sticky;top:76px}
.panier-recap h3{font-size:15px;margin-bottom:12px}
.panier-recap .recap{border:0;padding:0;margin-bottom:16px}
.panier-retour{display:block;text-align:center;margin-top:12px;font-size:14px;font-weight:600;
  color:var(--ink)}

/* formulaire de coordonnees */
.champs{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.champs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .champs .large{grid-column:1/-1}}
.form{max-width:none}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%233A4380' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
input.touche:invalid,select.touche:invalid{border-color:var(--alert)}
.livraison{border:2px solid var(--slotSoft);border-radius:var(--r-slot);padding:14px 16px;margin:20px 0 0}
.livraison legend{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slot);padding:0 6px}
.livraison label{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--body);
  font-size:14.5px;padding:7px 0;cursor:pointer}
.livraison input{width:auto;flex:none;margin-top:3px;accent-color:var(--primary)}
.erreur{background:#FDE7EA;border-left:4px solid var(--alert);color:#7A0E1F;font-size:14px;
  padding:12px 14px;border-radius:0 10px 10px 0;margin:18px 0 0}

/* ================================================================
   REFONTE 23/09/2026 — fiche mobile-first : galerie, tuiles, accordéons.
   Modèle : fiche produit beauté (galerie slider + accordéons + barre collante).
   ================================================================ */

.wrap--etroit{max-width:720px}

/* ---------- galerie ---------- */
.gal{margin-inline:calc(var(--gut) * -1)}
.gal__piste{display:flex;gap:8px;list-style:none;margin:0;padding:0 var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal__piste::-webkit-scrollbar{display:none}
.gal__vue{flex:0 0 calc(100% - 24px);scroll-snap-align:center;min-width:0}
.gal__vue img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-slot);border:2px solid var(--ink)}
.gal__pts{display:flex;gap:7px;justify-content:center;margin-top:12px}
.gal__pt{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--slotSoft);cursor:pointer;
  transition:background var(--fast) var(--ease),width var(--fast) var(--ease)}
.gal__pt.on{background:var(--primary);width:20px;border-radius:999px}
.gal__vgs{display:none}
@media (min-width:900px){
  .gal{margin-inline:0;display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:start}
  .gal__piste{grid-column:2;padding:0;overflow:visible;display:block}
  /* sans JS, la première vue reste affichée ; avec JS, c'est la vue active */
  .gal__vue{display:none}
  .gal__vue:first-child{display:block}
  .gal--js .gal__vue:first-child{display:none}
  .gal--js .gal__vue.on{display:block}
  .gal__pts{display:none}
  .gal__vgs{display:grid;gap:8px;grid-column:1;grid-row:1}
  .gal__vg{padding:0;border:2px solid var(--slotSoft);border-radius:12px;overflow:hidden;
    cursor:pointer;background:none;line-height:0}
  .gal__vg.on{border-color:var(--primary)}
  .gal__vg img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
}

/* ---------- fiche ---------- */
.fiche{padding-block:12px 8px}
.fiche__grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.fiche__achat h1{font-size:clamp(26px,6.2vw,40px);margin-bottom:2px}
.fiche__sub{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--body);margin:0 0 14px}
.fiche__achat .prix{margin:0 0 16px}
.picto{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:16px 0 0;padding:0;text-align:center}
.picto li{background:var(--surface);border:2px solid var(--slotSoft);border-radius:14px;padding:10px 6px;min-width:0}
.picto b{display:block;color:var(--ink);font-size:12px;line-height:1.25}
.picto span{display:block;font-size:11px;opacity:.8;line-height:1.25;margin-top:2px}
@media (min-width:900px){
  .fiche{padding-block:26px 12px}
  .fiche__grid{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:40px;align-items:start}
  .fiche__achat{position:sticky;top:78px}
}

/* ---------- tuiles produit ---------- */
.tuiles{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:660px){.tuiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.tuile{background:var(--surface);border:2px solid var(--slotSoft);border-radius:16px;
  padding:10px;min-width:0;display:flex;flex-direction:column;gap:2px}
.tuile img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:6px}
.tuile b{color:var(--ink);font-size:13px;line-height:1.2}
.tuile span{font-size:11.5px;opacity:.8}
.tuile s{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums;margin-top:auto;padding-top:4px}
.tuile--mal{background:var(--bubble);border-color:var(--ink);align-items:flex-start;
  justify-content:center;text-align:left;min-height:120px}
.tuile--mal b{font-size:15px}
.tuile--mal span{opacity:1;color:var(--ink)}

/* ---------- accordéons ---------- */
.acc{display:grid;gap:8px}
.acc details{background:var(--surface);border:2px solid var(--slotSoft);border-radius:14px;padding:0}
.acc details[open]{border-color:var(--slot)}
.acc summary{padding:15px 18px;font-size:15px}
.acc details > div{padding:0 18px 16px;font-size:14.5px;line-height:1.55}
.acc ul{margin:0;padding-left:1.1em}
.acc li{margin-bottom:6px}
.acc p{margin:0 0 .7em}
.acc p:last-child{margin:0}

/* ---------- couverture d'accueil ---------- */
.cover{padding-block:14px 26px}
.cover__in{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.cover__img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-slot);border:2px solid var(--ink)}
.cover__txt h1{font-size:clamp(30px,7.4vw,56px);margin-bottom:2px}
.cover__sub{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--body);margin:0 0 14px}
@media (min-width:900px){
  .cover{padding-block:36px 52px}
  .cover__in{grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:44px;align-items:center}
  .cover__img img{aspect-ratio:3/4}
}

/* les accordéons vivent sous le bloc d'achat, comme sur une fiche beauté */
.fiche__achat .acc{margin-top:20px}
.sec--fin{padding-block:0 clamp(32px,5vw,56px)}
/* vous êtes ici */
.nav__links a[aria-current],.nav__panel a[aria-current]{color:var(--primary)}
.nav__panel a[aria-current]{position:relative;padding-left:14px}
.nav__panel a[aria-current]::before{content:"";position:absolute;left:0;top:50%;
  width:5px;height:5px;margin-top:-2px;border-radius:50%;background:var(--primary)}

/* enseigne sur deux lignes : la marque, puis le statut du revendeur */
.logo{display:flex;flex-direction:column;gap:1px;line-height:1.05}
.logo b{font-family:var(--titre);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--ink)}
.logo em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--primary)}
@media (min-width:900px){.logo b{font-size:17px}.logo em{font-size:10px}}

/* l'identité du vendeur sort de la fine impression du pied */
.pied__avis{margin-top:28px;padding:14px 16px;border:1px solid rgba(255,255,255,.34);
  border-radius:12px;font-size:14px;line-height:1.5;color:#E7EBFB}
.pied__avis strong{color:#fff}
.pied__legal{margin-top:14px;padding-top:14px}