/* Boutique - mobile first.
   Couleurs, polices et proportions viennent toutes de /theme.css (genere). */

*,*::before,*::after{box-sizing:border-box}
/* Indispensable : .badge et consorts declarent un display et gagneraient sur [hidden]. */
[hidden]{display:none!important}

/* ---------------------------------------------------------------- *
 * Interactions. Trois regles tiennent tout :                        *
 *  - au survol, l'element se souleve legerement,                    *
 *  - au clic, il s'enfonce,                                         *
 *  - au clavier, un anneau de focus toujours visible.               *
 * Tout est coupe si le systeme demande moins d'animations.          *
 * ---------------------------------------------------------------- */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --sh-1:0 1px 2px rgba(15,15,15,.06), 0 2px 8px -4px rgba(15,15,15,.12);
  --sh-2:0 2px 6px rgba(15,15,15,.08), 0 12px 28px -10px rgba(15,15,15,.28);
  --sh-3:0 8px 20px rgba(15,15,15,.12), 0 26px 50px -18px rgba(15,15,15,.42);
}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
html{-webkit-text-size-adjust:100%}
/* La barre du bas est en flux normal (#bottomDock, position:sticky), plus
   fixed+padding-bottom devine. Deux essais precedents (padding fige, puis
   mesure JS) recreaient le meme recouvrement des qu'un chiffre suppose
   sur la hauteur de la barre se trouvait faux. Ici le navigateur reserve
   lui-meme l'espace exact : aucun calcul ne peut plus deriver. */
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.5;
  display:flex;flex-direction:column;min-height:100dvh;
  overscroll-behavior-y:none;
}
#view{flex:1 0 auto}
#bottomDock{
  position:sticky;bottom:0;z-index:100;display:flex;flex-direction:column;
  /* Couche de composition dediee : evite qu'iOS Safari fasse disparaitre
     un element colle en bas avec un flou d'arriere-plan pendant le scroll. */
  transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* ---- Polices par zone (reglables une par une dans le dashboard) ---- */
h1,h2,h3,.section-title,.page-title{font-family:var(--f-heading);line-height:1.2;margin:0}
.price,.slide-price,.totals .grand{font-family:var(--f-price)}
.btn{font-family:var(--f-button)}
.tab,.chip,.topnav{font-family:var(--f-nav)}
.brand-name{font-family:var(--f-brand)}
/* .slide-title : un <p> quand la page a deja son <h1> ailleurs. */

/* Icones Lucide (SVG inline, voir icons.js) */
.ic{
  width:22px;height:22px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ic--sm{width:18px;height:18px}
.ic--lg{width:34px;height:34px}

/* ---------- Chrome ---------- */
.announce{
  position:relative;background:var(--brand);color:var(--brand-ink);text-align:center;
  padding:8px 34px;font-size:13px;font-weight:500;
}
.announce a{text-decoration:underline;text-underline-offset:2px}
.announce-x{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:inherit;opacity:.7;cursor:pointer;
  display:grid;place-items:center;padding:4px;
}
.logo img{width:var(--logo-size,28px);height:var(--logo-size,28px)}
/* Grille a 3 pistes, les deux extremes en 1fr : le menu du milieu se centre
   vraiment sur la largeur de la page, quelle que soit la longueur du nom de
   la boutique a gauche. Un flex avec espace-entre centrait le menu par
   rapport a l'espace RESTANT entre deux blocs de tailles inegales, pas par
   rapport a la page — d'ou le decalage visible avec un nom long ou un logo. */
.topbar{
  position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;padding:12px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.topbar .brand{grid-column:1;justify-self:start;min-width:0}
.topbar .topnav{grid-column:2;justify-self:center}
.topbar #cartBtn{grid-column:3;justify-self:end}
.brand{
  display:flex;align-items:center;gap:10px;min-width:0;
  transition:opacity .15s ease;
}
.brand:hover{opacity:.7}

/* Navigation horizontale : n'apparait que quand il y a la place. */
.topnav{display:none}
@media(min-width:900px){
  .topnav{
    display:flex;gap:4px;
    font-family:var(--f-nav);font-size:15px;font-weight:600;
  }
  .topnav a{
    position:relative;padding:9px 14px;border-radius:999px;color:var(--muted);
    transition:color .18s ease,background .18s ease;
  }
  .topnav a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .topnav a.is-active{color:var(--brand)}
  .topnav a.is-active::after{
    content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
    border-radius:2px;background:var(--brand);
  }
  /* Le doublon barre du bas + menu haut ne se retire que sur un poste avec
     souris. Un ecran tactile la garde, meme large : c'est le mode de
     navigation au pouce, quelle que soit la largeur. */
  @media (hover:hover) and (pointer:fine){
    #bottomDock{display:none}
  }
  .brand-name{letter-spacing:-.02em}
}
.logo{font-size:var(--logo-size,28px);line-height:1;display:grid;place-items:center}
.logo img{object-fit:contain;border-radius:6px}
.brand-name{
  font-weight:700;font-size:var(--s-brand,20px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.icon-btn{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;width:42px;height:42px;cursor:pointer;display:grid;place-items:center;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.icon-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.icon-btn:active{transform:translateY(0) scale(.94)}
.badge{animation:pop .28s var(--ease)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.badge{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  background:var(--accent);color:#fff;border-radius:999px;
  font-size:11px;font-weight:700;display:grid;place-items:center;
}
.tabbar{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
}
.tab{background:none;border:0;padding:10px 4px;display:grid;gap:2px;justify-items:center;color:var(--muted);cursor:pointer}
.tab span{font-size:10px;font-weight:600}
.tab.is-active{color:var(--brand)}

/* ---------- Hero / diaporama ---------- *
 * --chrome est mesure en JS (en-tete + onglets + bandeau). */
.hero{position:relative;margin-bottom:var(--gap);overflow:hidden}
.hero--full{height:calc(100svh - var(--chrome,120px))}
.hero--grand{height:54svh;min-height:300px;max-height:520px}
.hero--compact{height:34svh;min-height:200px;max-height:340px}
.slides{
  display:flex;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.slides::-webkit-scrollbar{display:none}
.slide{
  position:relative;flex:0 0 100%;height:100%;scroll-snap-align:start;
  display:flex;align-items:flex-end;background-size:cover;background-position:center;color:#fff;
}
.slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.78) 100%);
}
.slide-inner{position:relative;z-index:1;width:100%;padding:24px 20px 68px;display:grid;gap:10px}
.slide h1,.slide .slide-title{   /* deux classes : passe devant `.slide p` */
  font-family:var(--f-hero);font-weight:700;margin:0;line-height:1.2;
  font-size:clamp(22px,6vw,var(--s-hero,38px));letter-spacing:-.02em;text-wrap:balance;
}
.slide p{margin:0;font-size:16px;opacity:.92}
.slide-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:min(38vw,180px)}
.slide-tag{
  justify-self:start;background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  padding:4px 10px;border-radius:999px;letter-spacing:.02em;
}
.slide-price{font-size:20px;font-weight:700}
.slide-price s{font-weight:400;font-size:16px;opacity:.7}
.slide--intro.hero--gradient{background:linear-gradient(135deg,var(--brand),var(--accent));color:var(--brand-ink)}
.slide--intro.hero--gradient::after{background:none}
.slide--intro.hero--minimal{background:var(--bg);color:var(--ink)}
.slide--intro.hero--minimal::after{background:none}
.slide--prod{background-color:color-mix(in srgb,var(--brand) 14%,var(--surface))}
.dots{position:absolute;left:0;right:0;bottom:18px;z-index:2;display:flex;gap:8px;justify-content:center}
.dot{
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.45);transition:width .2s ease,background .2s ease;
}
.dot.is-active{width:24px;background:#fff}
.hero-scroll{
  position:absolute;right:16px;bottom:14px;z-index:2;width:40px;height:40px;border:0;border-radius:999px;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;
}

/* ---------- Layout ---------- */
.wrap{padding:var(--gap) 16px 32px;max-width:1100px;margin:0 auto}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-title{font-size:var(--s-heading,18px);font-weight:700}
.page-title{font-size:24px;font-weight:700;margin-bottom:10px}
/* Titre de la page d'accueil, sous la banniere. */
.pagehead{text-align:center;margin:6px 0 calc(var(--gap)*1.4);display:grid;gap:8px}
.pagehead h1{
  font-family:var(--f-pageTitle);font-size:clamp(24px,6.5vw,var(--s-pageTitle,40px));
  letter-spacing:-.02em;text-wrap:balance;
}
.pagehead p{margin:0;color:var(--muted);font-size:15px;max-width:46ch;justify-self:center;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:13px}
.empty{text-align:center;padding:48px 16px;color:var(--muted)}
.backbar{padding:10px 16px 0;max-width:1100px;margin:0 auto}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:14px;padding:6px 0}

.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;flex-wrap:nowrap}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:14px;cursor:pointer;white-space:nowrap;font-weight:500;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s ease, color .15s ease;
}
.chip:hover{transform:translateY(-2px);box-shadow:var(--sh-1);border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.chip:active{transform:translateY(0)}
.chip.is-active{
  background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent);
}

.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--gap)}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{
  background:var(--card-bg);border:var(--card-border);box-shadow:var(--card-shadow);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.card:active{transform:translateY(-1px) scale(.99);box-shadow:var(--sh-1)}
.thumb{
  aspect-ratio:1;background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  display:grid;place-items:center;font-size:44px;position:relative;overflow:hidden;
}
.thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s var(--ease);
}
.card:hover .thumb img{transform:scale(1.06)}
.tag{
  position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;
  font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;letter-spacing:.02em;
  box-shadow:var(--sh-1);
}
.tag--inline{position:static;display:inline-block}
.card-body{padding:10px 12px 14px;display:grid;gap:4px}
.card-name{font-size:14px;font-weight:600;line-height:1.3}
.price{display:flex;align-items:baseline;gap:6px;font-size:15px;font-weight:700}
.price s{font-weight:400;font-size:13px;color:var(--muted)}

/* ---------- Reassurance (accueil) ---------- */
.trustbar{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;
  padding:16px;margin-bottom:var(--gap);border-radius:var(--radius);
  background:color-mix(in srgb,var(--brand) 7%,var(--surface));
}
@media(min-width:640px){.trustbar{grid-template-columns:repeat(4,1fr)}}
.trust-item{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;min-width:0}
.trust-item span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trust-ic{
  display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:color-mix(in srgb,var(--brand) 16%,transparent);color:var(--brand);
}

/* ---------- Texte + photo (accueil) ---------- */
.story{
  display:flex;flex-direction:column;gap:0;margin-bottom:var(--gap);
  border-radius:var(--radius);overflow:hidden;
  background:var(--card-bg);border:var(--card-border);box-shadow:var(--card-shadow);
}
@media(min-width:720px){
  .story{flex-direction:row;align-items:stretch}
  .story--reverse{flex-direction:row-reverse}
}
.story-media{flex:0 0 auto;aspect-ratio:16/10;background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
@media(min-width:720px){.story-media{flex:0 0 42%;aspect-ratio:auto}}
.story-media img{width:100%;height:100%;object-fit:cover;display:block}
.story-body{padding:22px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.story-body p{color:var(--muted);line-height:1.6;white-space:pre-line}

/* ---------- Vitrine des categories (accueil) ---------- */
.cat-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.cat-tiles{grid-template-columns:repeat(4,1fr)}}
.cat-tile{
  position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:color-mix(in srgb,var(--brand) 10%,var(--surface));
  display:grid;place-items:center;font-size:36px;
}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.cat-tile:hover img{transform:scale(1.06)}
.cat-tile::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0) 60%);
}
.cat-tile-label{
  position:absolute;left:10px;bottom:9px;z-index:1;color:#fff;font-weight:700;font-size:14px;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ---------- Panneaux promo ---------- */
.promos{display:grid;gap:10px;margin-bottom:var(--gap)}
.promo{
  position:relative;display:flex;align-items:center;gap:12px;overflow:hidden;
  padding:16px;border-radius:var(--radius);color:#fff;
  background-color:var(--promo);background-size:cover;background-position:center;
}
.promo[data-img]::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--promo) 88%,transparent),color-mix(in srgb,var(--promo) 40%,transparent));
}
.promo>*{position:relative;z-index:1}
.promo-badge{
  font-family:var(--f-price);font-size:22px;font-weight:800;letter-spacing:-.02em;
  background:rgba(255,255,255,.18);padding:8px 12px;border-radius:calc(var(--radius) - 6px);
  backdrop-filter:blur(4px);white-space:nowrap;
}
.promo-text{display:grid;gap:2px;flex:1;min-width:0}
.promo-text b{font-family:var(--f-heading);font-size:16px}
.promo-text span{font-size:13px;opacity:.9}

/* ---------- Pages legales ---------- */
.legal-list{display:grid;gap:8px}
.legal-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:var(--radius);
  background:var(--card-bg);border:var(--card-border);box-shadow:var(--card-shadow);
  font-size:14px;font-weight:600;
}
.legal-link .ic{color:var(--muted)}
.legal-page p{line-height:1.7;margin:0 0 12px;color:var(--muted)}

/* ---------- Mode edition (dans l'apercu du dashboard) ---------- */
.edit-mode [data-zone]{cursor:pointer;transition:outline-color .12s ease}
.edit-mode [data-zone]{outline:2px dashed transparent;outline-offset:-2px}
.edit-mode [data-zone]:hover{outline-color:color-mix(in srgb,var(--brand) 60%,transparent)}
.edit-mode [data-zone].is-editing{outline:2px solid var(--brand);outline-offset:-2px}
.edit-mode [data-zone].is-editing::before{
  content:attr(data-zone);position:absolute;z-index:40;transform:translateY(-100%);
  background:var(--brand);color:var(--brand-ink);font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:4px 4px 0 0;text-transform:uppercase;letter-spacing:.04em;
}
.edit-mode [data-zone]{position:relative}

/* ---------- Fiche produit ---------- */
.gal{position:relative;background:color-mix(in srgb,var(--brand) 8%,var(--surface))}
.gal--product{aspect-ratio:1;max-height:62svh}
.gal--empty{display:grid;place-items:center;font-size:min(40vw,160px);aspect-ratio:1;max-height:62svh}
.gal-rail{
  display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.gal-rail::-webkit-scrollbar{display:none}
.gal-img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.gal-img.img-pop{animation:imgPop .22s cubic-bezier(.34,1.4,.64,1)}
@keyframes imgPop{0%{transform:scale(.985)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.gal-img.img-pop{animation:none}}
.gal-dots .dot{background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.gal-dots .dot.is-active{background:var(--brand)}

.product-head{padding-top:16px}

/* Sur grand ecran : image a gauche, fiche a droite, l'image reste visible
   pendant qu'on fait defiler le texte. */
@media(min-width:900px){
  .product-top{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:36px;align-items:start;
    max-width:1100px;margin:0 auto;padding:0 16px;
  }
  .product-top .gal--product,
  .product-top .gal--empty{
    position:sticky;top:88px;max-height:none;aspect-ratio:1;
    border-radius:var(--radius);overflow:hidden;
  }
  .product-top .wrap{padding:0;max-width:none}
  .product-head{padding-top:0}
  /* La barre d'achat flottante ne sert plus : le bouton est a cote du produit. */
  #buybarSlot{display:none}
  .product-buy{display:block;margin-top:20px;max-width:320px}
}
@media(max-width:899px){.product-buy{display:none}}
.product-cat{font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.product-name{font-size:clamp(24px,6vw,34px);margin:6px 0 10px;letter-spacing:-.01em;text-wrap:balance}
.product-price{font-size:22px;margin-bottom:10px}
.product-price s{font-size:16px}
.stock{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;margin:0 0 14px}
.stock--ok{color:var(--brand)}
.stock--ko{color:var(--muted)}
.product-lead{margin:0 0 8px;font-size:16px;color:var(--muted)}
.product-section{margin-top:26px}
.product-section h2{font-size:17px;margin-bottom:10px}
.product-section p{margin:0 0 10px;line-height:1.6}
.features{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.features li{display:flex;gap:8px;align-items:flex-start}
.features .ic{color:var(--brand);margin-top:3px}
.specs{margin:0;display:grid;gap:0}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--muted);font-size:14px}
.specs dd{margin:0;font-weight:600;font-size:14px;text-align:right}

/* Barre d'achat collee au-dessus de la barre d'onglets. */
.buybar{
  display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
#buybarSlot:empty{display:none}
.buybar-price{display:grid;min-width:0;flex:1}
.buybar-price .small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buybar .btn{width:auto;flex:0 0 auto;padding:12px 18px}

/* ---------- Recherche et filtres ---------- */
.searchbar{
  display:flex;align-items:center;gap:8px;padding:0 14px;margin-bottom:12px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);
}
.searchbar input{flex:1;border:0;background:none;padding:14px 0;outline:none;color:var(--ink)}
.searchbar-x{border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:4px}
.filters{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);
  margin-bottom:var(--gap);overflow:hidden;
}
.filters summary{
  display:flex;align-items:center;gap:8px;padding:14px 16px;cursor:pointer;
  font-weight:600;font-size:14px;list-style:none;
}
.filters summary::-webkit-details-marker{display:none}
.pill-n{
  margin-left:auto;background:var(--brand);color:var(--brand-ink);
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  font-size:11px;font-weight:700;display:grid;place-items:center;
}
.filters-body{padding:0 16px 16px;display:grid;gap:16px}
.f-block{display:grid;gap:8px}
.f-block>label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.f-block .chips{padding-bottom:0;flex-wrap:wrap;overflow:visible}
.f-row{display:flex;align-items:center;gap:10px}
.f-row input{
  flex:1;min-width:0;padding:11px 12px;border-radius:calc(var(--radius) - 6px);
  border:1px solid var(--line);background:var(--surface);
}
.filters select{
  padding:12px;border-radius:calc(var(--radius) - 6px);border:1px solid var(--line);background:var(--surface);
}

/* ---------- Formulaires ---------- */
.btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px 18px;border:0;border-radius:calc(var(--radius) - 4px);
  background:var(--brand);color:var(--brand-ink);font-weight:600;font-size:16px;
  cursor:pointer;min-height:48px;box-shadow:var(--sh-1);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--sh-1);filter:brightness(.96)}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn--ghost:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:var(--sh-1)}
.btn--accent{background:var(--accent);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-size:13px;font-weight:600;color:var(--muted)}
.field input,.field textarea{
  width:100%;padding:13px 14px;border-radius:calc(var(--radius) - 6px);
  border:1px solid var(--line);background:var(--surface);min-height:48px;
}
.field input,.field textarea,.field select,.searchbar{
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent);
}
.searchbar:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent);
}
/* La page apparait en douceur a chaque changement de vue. */
#view>*{animation:rise .3s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.legal-link,.info-list>div,.pay{
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s ease;
}
.legal-link:hover,.pay:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.promo{transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.promo:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.qty button{transition:transform .14s var(--ease), border-color .14s ease}
.qty button:hover{transform:scale(1.1);border-color:var(--brand)}
.qty button:active{transform:scale(.92)}
.dot{transition:width .22s var(--ease), background .22s ease, transform .15s ease}
.dot:hover{transform:scale(1.4)}
.hero-scroll{transition:transform .2s var(--ease), background .2s ease}
.hero-scroll:hover{transform:translateY(3px);background:rgba(255,255,255,.32)}
.back{transition:transform .16s var(--ease), color .16s ease}
.back:hover{transform:translateX(-3px);color:var(--ink)}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.field select{
  width:100%;padding:13px 14px;border-radius:calc(var(--radius) - 6px);
  border:1px solid var(--line);background:var(--surface);min-height:48px;
}
.req{color:var(--accent);font-weight:700}
.field-error{font-size:13px;font-weight:500;color:#c0392b}
.field.is-bad input,.field.is-bad textarea{border-color:#c0392b;background:color-mix(in srgb,#c0392b 5%,var(--surface))}
.form-error{
  padding:12px 14px;border-radius:calc(var(--radius) - 6px);margin-bottom:12px;font-size:14px;
  background:color-mix(in srgb,#c0392b 10%,transparent);color:#c0392b;
  border:1px solid color-mix(in srgb,#c0392b 30%,transparent);
}

/* Choix du moyen de paiement */
.pays{display:grid;gap:8px;margin-bottom:8px}
.pay{
  display:flex;gap:12px;align-items:flex-start;padding:14px 16px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg);
}
.pay:has(input:checked){border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.pay input{margin-top:3px;accent-color:var(--brand);width:18px;height:18px;flex:0 0 auto}
.pay-body{display:grid;gap:2px}
.pay-instructions{
  text-align:left;margin:18px 0;padding:14px 16px;border-radius:var(--radius);
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));border:1px solid var(--line);
}
.pay-instructions p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.6}

/* ---------- Panier ---------- */
.line{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.line-thumb{
  width:52px;height:52px;border-radius:10px;background:color-mix(in srgb,var(--brand) 8%,var(--surface));
  display:grid;place-items:center;font-size:24px;overflow:hidden;flex:0 0 auto;
}
.line-thumb img{width:100%;height:100%;object-fit:cover}
.line-main{flex:1;min-width:0}
.line-name{font-size:14px;font-weight:600;display:block}
.qty{display:flex;align-items:center;gap:10px}
.qty button{
  width:34px;height:34px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;display:grid;place-items:center;
}
.totals{display:grid;gap:6px;margin:16px 0;font-size:14px}
.totals div{display:flex;justify-content:space-between;gap:12px}
.totals .grand{font-size:18px;font-weight:700;padding-top:8px;border-top:1px solid var(--line)}

/* ---------- Divers ---------- */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  /* --dock-h (mesuree en JS) inclut deja tout : tabbar, bouton d'achat
     flottant eventuel, zone de securite de l'appareil. Le repli sert
     seulement le temps du tout premier rendu. */
  bottom:calc(var(--dock-h, 60px) + 14px);
  z-index:60;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;
  font-size:14px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.ok{text-align:center;padding:24px 8px}
.ok .big{display:grid;place-items:center;margin-bottom:8px}
.info-list{display:grid;gap:12px;margin-top:8px}
.info-list>div{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card-bg);border:var(--card-border);box-shadow:var(--card-shadow);
  border-radius:var(--radius);padding:14px 16px;
}
.info-list .ic{color:var(--brand);margin-top:2px}

/* Banniere sans diapositive : visible uniquement dans l'apercu du dashboard. */
.hero--empty{
  display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 6%,var(--surface));
  border:2px dashed color-mix(in srgb,var(--brand) 40%,transparent);border-radius:var(--radius);
  margin:var(--gap) 16px;min-height:160px;height:auto;
}
.hero-empty{display:grid;justify-items:center;gap:4px;text-align:center;color:var(--muted);padding:20px}
.hero-empty .ic{color:var(--brand)}
.hero-empty b{color:var(--ink)}
.hero-empty span{font-size:13px;max-width:36ch}

/* ---------- Variantes produit (coloris, modeles...) ---------- */
.variants{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 4px}
.vbtn{
  border:0;background:none;cursor:pointer;padding:0;
  display:grid;justify-items:center;gap:5px;font:inherit;color:var(--muted);
  transition:transform .15s var(--ease);
}
.vbtn:hover{transform:translateY(-2px)}
.vbtn:active{transform:translateY(0) scale(.96)}

.vbtn--swatch .vbtn-dot{
  width:38px;height:38px;border-radius:999px;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), var(--sh-1);
  transition:box-shadow .15s var(--ease);
}
.vbtn--swatch.is-active .vbtn-dot{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
}
.vbtn-cap{font-size:12px;font-weight:600;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbtn--swatch.is-active .vbtn-cap{color:var(--ink)}

.vbtn--text{
  padding:10px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-weight:600;font-size:14px;color:var(--ink);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s ease, border-color .15s ease;
}
.vbtn--text:hover{box-shadow:var(--sh-1)}
.vbtn--text.is-active{
  background:var(--brand);color:var(--brand-ink);border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 20%,transparent);
}