/* =========================================================================
   DanGros Supérette — feuille de style du thème
   Palette et composants repris de la maquette validée.
   Ordre : tokens · base · éléments · en-tête · accueil · produits ·
           WooCommerce · pages de contenu · pied de page · panier · utilitaires
   ========================================================================= */

/* ================================ TOKENS ================================ */
:root{
  --blanc:#FFFFFF;
  --bleu:#003C9C;          /* bleu dominant du logo */
  --bleu-nuit:#00265F;     /* bleu profond : bandeaux, pied de page */
  --bleu-vif:#0E74D4;      /* bleu clair du logo : liens, survol */
  --or:#C08424;            /* or du logo, ton moyen */
  --or-clair:#F5CF63;      /* reflet doré */
  --or-profond:#8A5A0E;

  --bg:var(--blanc);
  --bg-2:#F3F6FC;
  --surface:var(--blanc);
  --media:#E8EEF9;
  --fg:#0B1730;
  --muted:#59668A;
  --faint:#8B96B4;
  --border:#DCE3F2;
  --border-2:#C3CFE6;
  --accent:var(--bleu);
  --accent-hover:var(--bleu-nuit);
  --on-accent:#FFFFFF;
  --gold:var(--or);
  --on-gold:#FFFFFF;
  --deep:var(--bleu-nuit);
  --on-deep:#EAF0FC;
  --ok:#0F7B4A;
  --alerte:#B3261E;

  --shadow:0 1px 2px rgba(0,38,95,.06),0 16px 34px -22px rgba(0,38,95,.35);
  --r:4px; --r2:8px;
  --pad:clamp(1rem,4vw,2.75rem);
  --fs-d:clamp(2.2rem,4.8vw,3.7rem);
  --fs-h2:clamp(1.5rem,2.6vw,2.1rem);

  --serif:Archivo,system-ui,sans-serif;
  --texte:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --chiffre:Anton,system-ui,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#050B18; --bg-2:#0A1428; --surface:#0C1730; --media:#132043;
    --fg:#EAF0FC; --muted:#9CAACB; --faint:#7A87A8;
    --border:#1E2C4C; --border-2:#2C3D63;
    --accent:#5596F5; --accent-hover:#7BB0FA; --on-accent:#04102A;
    --gold:#E0AE4A; --on-gold:#FFFFFF;
    --deep:#081227; --on-deep:#EAF0FC; --ok:#3FBB80; --alerte:#F2837B;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 36px -22px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#050B18; --bg-2:#0A1428; --surface:#0C1730; --media:#132043;
  --fg:#EAF0FC; --muted:#9CAACB; --faint:#7A87A8;
  --border:#1E2C4C; --border-2:#2C3D63;
  --accent:#5596F5; --accent-hover:#7BB0FA; --on-accent:#04102A;
  --gold:#E0AE4A; --on-gold:#FFFFFF;
  --deep:#081227; --on-deep:#EAF0FC; --ok:#3FBB80; --alerte:#F2837B;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 36px -22px rgba(0,0,0,.8);
}

/* ================================= BASE ================================= */
*{box-sizing:border-box}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--texte);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:800;margin:0;line-height:1.08;
  letter-spacing:-.022em;text-wrap:balance;
}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
svg,img{display:block;max-width:100%}
img{height:auto}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.num{font-variant-numeric:tabular-nums}

.kicker{
  font-family:var(--serif);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}

/* Masqué visuellement, restitué par les lecteurs d'écran. */
.sr,.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:.6rem;left:.6rem;z-index:200;width:auto;height:auto;
  clip:auto;clip-path:none;background:var(--bleu-nuit);color:#fff;
  padding:.7rem 1.1rem;border-radius:2px;font-weight:700;
}

/* ---- étiquette de prix : le motif graphique récurrent de la marque ---- */
span.tag{
  display:inline-flex;align-items:center;gap:.35rem;background:var(--gold);color:var(--on-gold);
  font-family:var(--serif);font-weight:800;font-size:.74rem;letter-spacing:.02em;
  padding:.34rem .7rem .34rem 1.05rem;
  clip-path:polygon(11px 0,100% 0,100% 100%,11px 100%,0 50%);
  text-transform:uppercase;white-space:nowrap;
}
span.tag.big{
  font-size:.9rem;padding:.5rem 1rem .5rem 1.4rem;
  clip-path:polygon(15px 0,100% 0,100% 100%,15px 100%,0 50%);
}

/* ---- filet doré + losange bleu : séparateur de section ---- */
.rule{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.rule i{width:9px;height:9px;background:var(--accent);transform:rotate(45deg);flex:none}
.rule s{flex:1;height:2px;background:linear-gradient(90deg,var(--gold),transparent);text-decoration:none}

.goldline{
  height:3px;
  background:linear-gradient(90deg,var(--or-profond),var(--or-clair) 35%,var(--or) 65%,var(--or-profond));
}

/* =============================== BOUTONS ================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.82rem 1.5rem;background:transparent;border:2px solid transparent;border-radius:2px;
  font-family:var(--serif);font-weight:700;font-size:.9rem;cursor:pointer;text-align:center;
  transition:background .15s,color .15s,border-color .15s;
}
.b-blue{background:var(--accent);color:var(--on-accent)}
.b-blue:hover{background:var(--accent-hover);color:var(--on-accent)}
.b-gold{background:var(--gold);color:var(--on-gold)}
.b-gold:hover{background:var(--or-profond);color:var(--on-gold)}
.b-out{border-color:var(--border-2);color:var(--fg)}
.b-out:hover{border-color:var(--accent);color:var(--accent)}
.b-out-w{border-color:rgba(255,255,255,.5);color:#fff}
.b-out-w:hover{background:rgba(255,255,255,.12)}
.b-sm{padding:.55rem 1rem;font-size:.82rem}
.b-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ================================ EN-TÊTE =============================== */
.annonce{
  background:var(--bleu-nuit);color:#EAF0FC;font-size:.8rem;
  background-image:repeating-linear-gradient(135deg,rgba(245,207,99,.08) 0 2px,transparent 2px 9px);
}
.annonce .wrap{
  display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;
  padding-block:.6rem;text-align:center;
}
.annonce strong{color:var(--or-clair);font-weight:700}

header.site{
  position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid var(--border);
}
.admin-bar header.site{top:32px}
@media screen and (max-width:782px){.admin-bar header.site{top:46px}}

.hrow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(.8rem,3vw,2.5rem);padding-block:.9rem;
}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo-plate{background:#FFF;border-radius:8px;padding:.3rem .45rem;display:inline-flex;line-height:0}
.logo-img{height:76px;width:auto;display:block}
@media(max-width:600px){.logo-img{height:52px}}

form.search{
  display:flex;align-items:center;gap:.6rem;background:var(--bg-2);
  border:1px solid var(--border);border-radius:2px;padding:.55rem .85rem;
  max-width:430px;width:100%;
}
form.search svg{flex:none;color:var(--muted)}
form.search input{border:0;background:transparent;width:100%;outline:none;font-size:.9rem}
form.search input::placeholder{color:var(--faint)}
form.search button{border:0;background:transparent;padding:0;cursor:pointer;color:var(--muted)}
form.search button:hover{color:var(--accent)}

.hact{display:flex;align-items:center;gap:.4rem}
.ib{
  display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--border-2);
  background:var(--surface);border-radius:2px;padding:.52rem .8rem;cursor:pointer;
  font-size:.84rem;font-weight:600;color:var(--fg);
}
.ib:hover{border-color:var(--accent);color:var(--accent)}
.ib.cart{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ib.cart:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.cnt{
  background:var(--or-clair);color:#231600;font-size:.7rem;font-weight:800;
  min-width:1.3rem;height:1.3rem;display:grid;place-items:center;border-radius:2px;
  font-family:var(--serif);
}

nav.main{background:var(--bleu);color:#fff}
nav.main .wrap{display:flex;align-items:center;gap:.2rem;overflow-x:auto;scrollbar-width:none}
nav.main .wrap::-webkit-scrollbar{display:none}
nav.main ul{list-style:none;display:flex;align-items:center;gap:.2rem;margin:0;padding:0}
nav.main a{
  display:block;font-family:var(--serif);font-size:.88rem;font-weight:600;
  padding:.8rem 1.1rem;white-space:nowrap;border-bottom:3px solid transparent;color:#fff;
}
nav.main a:hover{background:rgba(255,255,255,.1)}
nav.main .current-menu-item>a,
nav.main .current_page_item>a,
nav.main a.on{border-color:var(--or-clair);background:rgba(0,0,0,.14)}
nav.main .tel{
  margin-left:auto;font-size:.85rem;font-weight:700;color:var(--or-clair);
  padding-left:1rem;white-space:nowrap;
}
nav.main .tel:hover{background:transparent;text-decoration:underline}

/* Bascule du menu, visible uniquement sur petit écran. */
.navtoggle{display:none}

@media(max-width:900px){
  .hrow{
    grid-template-columns:1fr auto;
    grid-template-areas:"brand act" "search search";
    row-gap:.7rem;
  }
  .brand{grid-area:brand}
  form.search{grid-area:search;max-width:none}
  .hact{grid-area:act}
  .ib .lb{display:none}
  nav.main .tel{display:none}
}

/* ================================= HÉRO ================================= */
.hero{background:var(--bleu-nuit);color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 120% at 88% 0%,rgba(14,116,212,.55),transparent 60%),
    repeating-linear-gradient(135deg,rgba(245,207,99,.05) 0 2px,transparent 2px 11px);
}
.hero .wrap{
  position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(1.4rem,4vw,3.4rem);align-items:center;
  padding-block:clamp(2.2rem,5vw,3.6rem);
}
.hero .kicker{color:var(--or-clair)}
.hero h1{font-size:var(--fs-d);margin-top:.9rem;color:#fff}
.hero h1 span{color:var(--or-clair)}
.hero .sub{margin-top:1.1rem;color:rgba(234,240,252,.85);font-size:1.02rem;max-width:40ch}
.hero .cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.hero .strip{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.9rem}
.hero .strip span{
  border:1px solid rgba(245,207,99,.4);color:#EAF0FC;font-size:.76rem;font-weight:600;
  padding:.35rem .7rem;border-radius:2px;
}
@media(max-width:880px){.hero .wrap{grid-template-columns:1fr}}

/* ---- carrousel du héros ---- */
.hcar{
  position:relative;border:1px solid rgba(255,255,255,.2);border-radius:2px;
  background:var(--blanc);overflow:hidden;box-shadow:0 22px 50px -26px rgba(0,10,40,.8);
}
.hcar .vp{overflow:hidden}
.hcar .rail{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.hslide{min-width:100%;display:grid;grid-template-rows:auto auto;align-content:start}
/* Le lien est detache : en grille, la ligne auto se dimensionnerait sur
   l image et object-fit:contain ne bornerait plus rien. */
.hslide .im{background:#E8EEF9;position:relative;overflow:hidden;
  height:clamp(230px,25vw,330px)}
.hslide .im a{position:absolute;inset:0;display:block}
.hslide .im img{width:100%;height:100%;object-fit:contain;padding:1.1rem}
.hslide .cap{
  background:#FFF;padding:.9rem 1.1rem;display:flex;align-items:center;gap:.9rem;
  border-top:1px solid #DCE3F2;
}
.hslide .cap h3{
  font-family:var(--texte);font-weight:600;font-size:.95rem;color:#0B1730;
  line-height:1.28;letter-spacing:0;flex:1;
}
.hslide .cap h3 a{color:#0B1730}
.hslide .cap h3 a:hover{color:var(--bleu)}
.hslide .cap .pz{font-family:var(--chiffre);font-size:1.5rem;color:#003C9C;line-height:1;white-space:nowrap}
.hslide .cap .pz small{
  font-family:var(--serif);font-size:.62rem;font-weight:700;color:#59668A;
  display:block;letter-spacing:.08em;
}
.hcar .ar{
  position:absolute;top:calc(50% - 2.6rem);width:2.6rem;height:2.6rem;border:0;cursor:pointer;
  background:rgba(0,38,95,.82);color:#fff;display:grid;place-items:center;border-radius:2px;
}
.hcar .ar:hover{background:var(--bleu)}
.hcar .ar.p{left:.6rem}
.hcar .ar.n{right:.6rem}
/* Les pastilles se calent sur le bas du visuel, dont la hauteur est fixe :
   ancrees au bas du carrousel, elles chevaucheraient la legende des que
   celle-ci passe sur deux lignes. */
.hcar .dots{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:.4rem;
  top:calc(clamp(230px,25vw,330px) - 1.15rem)}
.hcar .dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:9px;
  background:rgba(0,38,95,.3);cursor:pointer;
}
.hcar .dots button[aria-current="true"]{background:var(--or);width:20px}
.hcar>span.tag{position:absolute;top:.9rem;left:0;z-index:2}

/* ============================== GARANTIES =============================== */
.guar{background:var(--bg-2);border-bottom:1px solid var(--border)}
.guar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.guar .wrap>div{
  padding:1.15rem clamp(.9rem,2vw,1.6rem);display:flex;gap:.7rem;align-items:flex-start;
  border-right:1px solid var(--border);
}
.guar .wrap>div:first-child{padding-left:var(--pad)}
.guar .wrap>div:last-child{border-right:0;padding-right:var(--pad)}
.guar svg{flex:none;color:var(--accent);margin-top:.1rem}
.guar b{display:block;font-family:var(--serif);font-size:.86rem;font-weight:700}
.guar p{font-size:.78rem;color:var(--muted);line-height:1.4}
@media(max-width:900px){
  .guar .wrap{grid-template-columns:1fr 1fr}
  .guar .wrap>div{
    border-bottom:1px solid var(--border);
    padding-left:var(--pad)!important;padding-right:var(--pad)!important;
  }
  .guar .wrap>div:nth-child(2n){border-right:0}
}
@media(max-width:520px){
  .guar .wrap{grid-template-columns:1fr}
  .guar .wrap>div{border-right:0}
}

/* =============================== SECTIONS =============================== */
section.blk{padding-block:clamp(2.3rem,5vw,3.6rem)}
section.alt{background:var(--bg-2);border-block:1px solid var(--border)}
.shead{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1rem;margin-bottom:1.6rem;
}
.shead h2{font-size:var(--fs-h2)}
.shead .lead{color:var(--muted);font-size:.95rem;max-width:52ch;margin-top:.55rem}
.shead .tools{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.all{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--serif);font-weight:700;
  font-size:.85rem;color:var(--accent);border-bottom:2px solid var(--gold);padding-bottom:.2rem;
}
.all:hover{color:var(--accent-hover)}

/* ============================ CARTE PRODUIT ============================= */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}
.grid.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1040px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid,.grid.g3{grid-template-columns:repeat(2,1fr)}}

/* Un seul produit par ligne sur téléphone : à deux colonnes, la photo et le
   prix deviennent trop petits pour décider d'un achat. */
@media(max-width:640px){.grid,.grid.g3{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .2s,border-color .15s;
}
.card:hover{border-color:var(--border-2);box-shadow:var(--shadow)}
.card .media{
  position:relative;background:var(--media);aspect-ratio:1/1;display:block;overflow:hidden;
}
.card .media>a{display:block;width:100%;height:100%}
.card .media img{width:100%;height:100%;object-fit:contain;padding:1.1rem}
.card .media span.tag{position:absolute;top:.7rem;left:0;z-index:2}
.card .body{padding:.95rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card h3{
  font-family:var(--texte);font-weight:600;font-size:.98rem;line-height:1.32;letter-spacing:0;
}
.card h3 a:hover{color:var(--accent)}
/* Indicateur de disponibilite, commun a la carte et au bloc vedette. */
.disp{
  font-size:.74rem;font-weight:600;color:var(--ok);
  display:inline-flex;align-items:center;gap:.35rem;
}
.disp.ko{color:var(--alerte)}
.feat .disp{align-self:flex-start;margin:1.2rem 0 .1rem}

.pline{
  margin-top:auto;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;padding-top:.3rem;
}
.pline b{font-family:var(--chiffre);font-weight:400;font-size:1.72rem;letter-spacing:.005em;line-height:1}
.pline .cur{font-family:var(--serif);font-size:.7rem;font-weight:700;color:var(--muted)}
.pline s{color:var(--faint);font-size:.85rem}
.hint{font-size:.72rem;color:var(--faint)}

/* ---- rail horizontal de cartes ---- */
/* overflow-x:clip contient la largeur intrinseque du rail sans creer de
   conteneur de defilement vertical : l ombre des cartes reste visible. */
.slider{position:relative;overflow-x:clip}
.track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2.3rem)/3);gap:1.15rem;
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;
  padding-bottom:.6rem;-ms-overflow-style:none;
}
.track::-webkit-scrollbar{display:none}
.track>*{scroll-snap-align:start;min-width:0}
@media(max-width:900px){.track{grid-auto-columns:calc((100% - 1.15rem)/2)}}
@media(max-width:640px){.track{grid-auto-columns:88%}}

.navs{display:flex;gap:.4rem}
.navs button{
  width:2.5rem;height:2.5rem;border:1px solid var(--border-2);background:var(--surface);
  border-radius:2px;cursor:pointer;display:grid;place-items:center;color:var(--accent);
}
.navs button:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.navs button:disabled{opacity:.32;cursor:default}

/* ============================ BANDEAU PROMO ============================= */
.deal{
  background:var(--bleu);color:#fff;border-radius:2px;overflow:hidden;
  display:grid;grid-template-columns:1.25fr .75fr;align-items:center;
  background-image:repeating-linear-gradient(135deg,rgba(245,207,99,.07) 0 2px,transparent 2px 11px);
}
.deal .d1{padding:clamp(1.3rem,3vw,2.1rem)}
.deal h2{color:#fff;font-size:clamp(1.35rem,2.4vw,1.95rem)}
.deal p{color:rgba(234,240,252,.8);font-size:.92rem;margin-top:.55rem;max-width:46ch}
.deal .pct{
  display:flex;align-items:center;justify-content:center;gap:.6rem;background:rgba(0,0,0,.18);
  padding:clamp(1.3rem,3vw,2.1rem);height:100%;border-left:1px solid rgba(245,207,99,.3);
}
.deal .pct b{font-family:var(--chiffre);font-size:clamp(3rem,7vw,4.6rem);color:var(--or-clair);line-height:.9}
.deal .pct span{
  font-family:var(--serif);font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;max-width:9ch;color:#EAF0FC;
}
@media(max-width:760px){
  .deal{grid-template-columns:1fr}
  .deal .pct{border-left:0;border-top:1px solid rgba(245,207,99,.3)}
}

/* ======================= COMMANDER EN 3 ÉTAPES ========================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;counter-reset:s}
.step{
  background:var(--surface);border:1px solid var(--border);border-radius:2px;
  padding:1.4rem;position:relative;
}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--chiffre);font-size:2.1rem;color:var(--gold);line-height:1;
  display:block;margin-bottom:.6rem;
}
.step b{display:block;font-family:var(--serif);font-weight:700;font-size:1rem;margin-bottom:.35rem}
.step p{font-size:.9rem;color:var(--muted)}
@media(max-width:780px){.steps{grid-template-columns:1fr}}

/* ============================ BLOC VISUEL =============================== */
.shot{
  position:relative;background:var(--media);border:1px solid var(--border);border-radius:2px;
  aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;
}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .ghost{
  font-family:var(--chiffre);font-size:clamp(3rem,9vw,6rem);
  color:rgba(0,60,156,.16);letter-spacing:.02em;
}
.shot .file{
  position:absolute;bottom:.6rem;left:.6rem;background:rgba(0,38,95,.86);color:#EAF0FC;
  font-size:.66rem;font-family:var(--serif);font-weight:600;padding:.28rem .55rem;border-radius:2px;
}

.two{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.3rem,3vw,2.5rem);align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr}}

/* ============================ PIED DE PAGE ============================== */
footer.site{
  background:var(--bleu-nuit);color:#EAF0FC;
  background-image:repeating-linear-gradient(135deg,rgba(245,207,99,.05) 0 2px,transparent 2px 11px);
}
footer.site .cols{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.3fr;gap:2rem;padding-block:2.7rem}
footer.site h4{
  font-family:var(--serif);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-clair);margin-bottom:1rem;font-weight:700;
}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem;font-size:.89rem}
footer.site a:hover{color:var(--or-clair)}
footer.site .ab p{font-size:.88rem;color:rgba(234,240,252,.75);margin-top:.9rem;max-width:36ch}
footer.site .ct li{display:flex;gap:.55rem;align-items:flex-start}
footer.site .ct svg{flex:none;margin-top:.25rem;color:var(--or-clair)}
.legal{
  border-top:1px solid rgba(255,255,255,.14);padding-block:1.1rem;font-size:.78rem;
  color:rgba(234,240,252,.62);display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
}
.legal a{color:var(--or-clair);font-weight:700}
@media(max-width:900px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer.site .cols{grid-template-columns:1fr}}

/* ========================= PAGES DE CONTENU ============================= */
.phead{
  background:var(--bleu-nuit);color:#fff;
  background-image:repeating-linear-gradient(135deg,rgba(245,207,99,.07) 0 2px,transparent 2px 11px);
}
.phead .wrap{padding-block:clamp(1.8rem,4vw,2.8rem)}
.phead h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.phead p{color:rgba(234,240,252,.82);margin-top:.7rem;max-width:60ch;font-size:1rem}
.phead .kicker{color:var(--or-clair)}

.crumb{font-size:.8rem;color:var(--muted);padding-block:1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.crumb a:hover{color:var(--accent)}

.doc{max-width:74ch;padding-block:clamp(1.8rem,4vw,2.8rem);display:grid;gap:1.5rem}
.doc.wide{max-width:none}
.doc h2{font-size:1.28rem;display:flex;align-items:center;gap:.6rem;margin-top:.6rem}
.doc h2 i{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);flex:none}
.doc h3{font-size:1rem;font-family:var(--serif);font-weight:700}
.doc p,.doc li{color:var(--muted);font-size:.96rem}
.doc ul,.doc ol{margin:0;padding-left:1.2rem;display:grid;gap:.45rem}
.doc section{display:grid;gap:.6rem}
.doc dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0;font-size:.94rem}
.doc dt{font-weight:700;color:var(--fg)}
.doc dd{margin:0;color:var(--muted)}
.doc a{color:var(--accent);border-bottom:1px solid var(--gold)}

/* Document rédigé depuis Réglages → DanGros. L'éditeur produit des titres
   et des paragraphes à plat, sans <section> pour les regrouper : la grille
   du document les espacerait tous pareil, le flux normal rend la
   hiérarchie. */
.doc-edite{display:block}
.doc-edite > * + *{margin-top:.85rem}
.doc-edite > h2{margin-top:2.2rem}
.doc-edite > :first-child{margin-top:0}
/* Le document s'affiche tel qu'il est saisi : ni losange devant les
   titres, ni surlignage des blancs. Rien que le thème n'ajoute. */
.doc-edite h2{display:block}

.toc{border:1px solid var(--border);background:var(--bg-2);border-radius:2px;padding:1rem 1.1rem}
.toc h4{
  font-family:var(--serif);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem;
}
.toc ol{padding-left:1.1rem;gap:.3rem;font-size:.9rem;margin:0;display:grid;list-style:decimal}
.toc a:hover{color:var(--accent)}

.infocard{
  border:1px solid var(--border);border-radius:2px;background:var(--bg-2);
  padding:1.3rem;display:grid;gap:1rem;
}
.infocard h3{font-size:1rem}
.infocard .row{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem}
.infocard .row svg{flex:none;color:var(--accent);margin-top:.2rem}
.infocard .row b{
  display:block;font-family:var(--serif);font-size:.78rem;color:var(--muted);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.val{border:1px solid var(--border);border-radius:2px;padding:1.2rem;background:var(--surface)}
.val svg{color:var(--gold);margin-bottom:.7rem}
.val b{display:block;font-family:var(--serif);font-weight:700;margin-bottom:.3rem}
.val p{font-size:.89rem;color:var(--muted)}
@media(max-width:780px){.vals{grid-template-columns:1fr}}

.form{display:grid;gap:.9rem;border:1px solid var(--border);border-radius:2px;padding:1.3rem;background:var(--surface)}
.form label{display:grid;gap:.35rem;font-size:.85rem;font-weight:600;font-family:var(--serif)}
.form input,.form textarea,.form select{
  border:1px solid var(--border-2);background:var(--bg);border-radius:2px;
  padding:.65rem .8rem;font-size:.92rem;font-family:var(--texte);font-weight:400;outline:none;
}
.form input:focus,.form textarea:focus{border-color:var(--accent)}
.form textarea{min-height:120px;resize:vertical}

/* Encart d'information à fond doré discret. */
.note{
  border:1px dashed var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent);
  border-radius:2px;padding:.85rem 1rem;display:flex;gap:.65rem;font-size:.84rem;color:var(--fg);
}
.note svg{flex:none;color:var(--gold);margin-top:.2rem}
.note b{font-family:var(--serif);font-weight:700}

/* ============================== UTILITAIRES ============================= */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ========================= MESSAGE FLOTTANT ============================= */
.toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,1rem);z-index:97;
  background:var(--bleu-nuit);color:#fff;padding:.7rem 1.1rem;border-radius:2px;
  font-size:.86rem;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;border:1px solid rgba(245,207,99,.4);
  max-width:calc(100vw - 2rem);text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* Dans une carte, le formulaire s efface pour que le bouton reste un
   element de la colonne. Sur la fiche produit il porte lui-meme la
   disposition (.buy) : display:contents l annulerait. */
form.dg-add{margin:0}
form.dg-add:not(.buy){display:contents}

/* ========================== PRODUIT EN VEDETTE ==========================
   Employé quand un rayon ne compte qu'une référence : le rail de
   défilement laisserait alors les deux tiers de la largeur vides. */
.feat{
  display:grid;grid-template-columns:.92fr 1.08fr;background:var(--surface);
  border:1px solid var(--border);border-radius:2px;overflow:hidden;align-items:stretch;
}
.feat .fm{
  background:var(--media);display:grid;place-items:center;position:relative;
  padding:clamp(1.4rem,3vw,2.4rem);
}
.feat .fm>span.tag{position:absolute;top:1rem;left:0;z-index:2}
.feat .fm img{max-width:300px;width:100%;height:auto;object-fit:contain}
.feat .fb{padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;justify-content:center}
.feat h3{font-size:clamp(1.3rem,2.3vw,1.8rem);margin-top:.6rem}
.feat h3 a:hover{color:var(--accent)}
.feat ul{
  list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.55rem;
  font-size:.92rem;color:var(--muted);
}
.feat li{display:flex;gap:.6rem;align-items:flex-start}
.feat li svg{flex:none;color:var(--gold);margin-top:.22rem}
.feat .pline{margin:.2rem 0 1.2rem;padding:0}
.feat .pline b{font-size:2.4rem}
@media(max-width:820px){.feat{grid-template-columns:1fr}}

/* ===================== GARDE-FOUS DE LARGEUR =============================
   Un élément de grille ou de flex a par défaut une largeur minimale égale
   à son contenu : sans min-width:0, le carrousel impose sa largeur
   intrinsèque à toute la page et provoque un défilement horizontal. */
.hero .wrap>*,
.two>*,
.guar .wrap>div,
.grid>*,
.feat>*,
.steps>*{min-width:0}

.hslide{max-width:100%}
.hslide .cap{min-width:0;flex-wrap:wrap}
.hslide .cap h3{min-width:8ch;overflow-wrap:anywhere}

/* Sous 520 px, la légende du carrousel tient mieux sur deux lignes. */
@media(max-width:520px){
  .hslide .cap{gap:.5rem .9rem}
  .hslide .cap h3{flex:1 0 100%}
}

/* =============================== CATALOGUE ==============================
   Colonne de filtres à gauche, grille de produits à droite. */
.clayout{
  display:grid;grid-template-columns:248px 1fr;gap:clamp(1.2rem,3vw,2.4rem);
  align-items:start;padding-bottom:3rem;
}
.clayout>*{min-width:0}
@media(max-width:880px){.clayout{grid-template-columns:1fr}}

aside.fil{
  border:1px solid var(--border);border-radius:2px;background:var(--surface);padding:1.2rem;
  position:sticky;top:170px;
}
/* Le formulaire porte la grille : c est lui qui contient les groupes. */
aside.fil form{display:grid;gap:1.35rem}
.admin-bar aside.fil{top:202px}
@media(max-width:880px){aside.fil,.admin-bar aside.fil{position:static}}

.fg h4{
  font-family:var(--serif);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.7rem;font-weight:700;
}
.fg label{display:flex;align-items:center;gap:.55rem;font-size:.88rem;padding:.22rem 0;cursor:pointer}
.fg label .c{margin-left:auto;color:var(--faint);font-size:.78rem}
.fg input[type=checkbox]{accent-color:var(--accent);width:1rem;height:1rem;flex:none}

.rg{display:flex;align-items:center;gap:.6rem;margin-top:.3rem;flex-wrap:wrap}
.rg input[type=range]{flex:1;min-width:7rem}
.rg input[type=range]{width:100%;accent-color:var(--accent)}
.rg output{font-family:var(--serif);font-size:.82rem;font-weight:700;white-space:nowrap}

.tbar{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;background:var(--bg-2);border:1px solid var(--border);
  border-radius:2px;margin-bottom:1.1rem;
}
.tbar .n{font-size:.86rem;color:var(--muted)}
.tbar label{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.tbar select{
  border:1px solid var(--border-2);background:var(--surface);border-radius:2px;
  padding:.45rem .7rem;font-size:.85rem;
}

/* Aucun produit ne correspond aux filtres. */
.vide{
  border:1px dashed var(--border-2);border-radius:2px;padding:2.2rem 1.4rem;
  text-align:center;display:grid;gap:.9rem;justify-items:center;
}
.vide p{color:var(--muted);font-size:.95rem;max-width:46ch}

/* ============================= FICHE PRODUIT ============================ */
.pdp{
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.4rem,4vw,3rem);
  align-items:start;padding-bottom:2.5rem;
}
.pdp>*{min-width:0}
@media(max-width:860px){.pdp{grid-template-columns:1fr}}

.gal{display:grid;gap:.7rem}
.gmain{
  position:relative;background:var(--media);border:1px solid var(--border);border-radius:2px;
  aspect-ratio:1/1;overflow:hidden;
}
.gmain img{width:100%;height:100%;object-fit:contain;padding:1.6rem}
.gmain>span.tag{position:absolute;top:1rem;left:0;z-index:2}
.gmain .zoom{
  position:absolute;bottom:.7rem;right:.7rem;z-index:2;display:grid;place-items:center;
  width:2.2rem;height:2.2rem;border-radius:2px;background:rgba(0,38,95,.82);color:#fff;
  border:0;cursor:pointer;
}
.gmain .zoom:hover{background:var(--bleu)}

.gth{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.gth button{
  background:var(--media);border:2px solid var(--border);border-radius:2px;aspect-ratio:1/1;
  cursor:pointer;padding:0;overflow:hidden;
}
.gth button img{width:100%;height:100%;object-fit:contain;padding:.35rem}
.gth button[aria-current="true"]{border-color:var(--accent)}
.gth button:hover{border-color:var(--border-2)}

.pdp h1{font-size:clamp(1.55rem,3vw,2.3rem);margin-top:.5rem}

.pprice{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:1.1rem 0}
.pprice b{font-family:var(--chiffre);font-weight:400;font-size:2.9rem;line-height:.95;color:var(--accent)}
.pprice .cur{font-family:var(--serif);font-size:.85rem;font-weight:700;color:var(--muted)}
.pprice s{color:var(--faint);font-size:1rem}

.pitch{color:var(--muted);font-size:.97rem;max-width:52ch}

.bul{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.55rem;font-size:.93rem}
.bul li{display:flex;gap:.6rem;align-items:flex-start}
.bul svg{flex:none;color:var(--gold);margin-top:.22rem}

.buy{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.3rem;align-items:stretch}
.qty{display:flex;align-items:center;border:2px solid var(--border-2);border-radius:2px;
  overflow:hidden;flex:0 0 auto}
.qty button{
  width:2.6rem;align-self:stretch;background:var(--surface);border:0;cursor:pointer;
  font-size:1.15rem;font-weight:700;color:var(--fg);
}
.qty button:hover{background:var(--bg-2);color:var(--accent)}
.qty input{
  width:2.9rem;text-align:center;border:0;background:transparent;font-weight:700;
  font-variant-numeric:tabular-nums;outline:none;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{appearance:none;margin:0}
.buy .b-blue{flex:1;min-width:215px}

.assur{
  margin-top:1.3rem;border:1px solid var(--border);border-radius:2px;background:var(--bg-2);
  padding:1rem;display:grid;gap:.65rem;
}
.assur div{display:flex;gap:.6rem;align-items:flex-start;font-size:.87rem}
.assur svg{flex:none;color:var(--accent);margin-top:.15rem}
.assur a{color:var(--accent)}

.pmeta{font-size:.82rem;color:var(--faint);margin-top:1rem;display:grid;gap:.25rem}
.pmeta a{color:var(--muted)}
.pmeta a:hover{color:var(--accent)}

/* ---- avertissement pour les produits à base de plantes ---- */
.avert{
  margin-top:1.1rem;border:1px dashed var(--border-2);border-radius:2px;
  background:var(--bg-2);padding:.8rem .95rem;display:flex;gap:.6rem;
  font-size:.82rem;color:var(--muted);
}
.avert svg{flex:none;color:var(--muted);margin-top:.15rem}

/* ------------------------------- onglets ------------------------------- */
.tabs{border-top:1px solid var(--border);margin-top:clamp(1.5rem,4vw,2.5rem)}
.tbb{display:flex;gap:.2rem;overflow-x:auto;border-bottom:1px solid var(--border);scrollbar-width:none}
.tbb::-webkit-scrollbar{display:none}
.tbb button{
  border:0;background:transparent;padding:.95rem 1.1rem;font-family:var(--serif);
  font-size:.88rem;font-weight:700;cursor:pointer;color:var(--muted);
  border-bottom:3px solid transparent;white-space:nowrap;
}
.tbb button[aria-selected="true"]{color:var(--accent);border-color:var(--gold)}
.tp{padding:1.5rem 0;max-width:72ch;color:var(--muted);font-size:.95rem;display:grid;gap:1rem}
.tp h4{
  font-size:1rem;color:var(--fg);display:flex;align-items:center;gap:.5rem;
  font-family:var(--serif);font-weight:700;
}
.tp h4::before{content:"";width:8px;height:8px;background:var(--gold);transform:rotate(45deg);flex:none}
.tp p{margin:0}
.tp ul,.tp ol{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.tp dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0}
.tp dt{font-weight:700;color:var(--fg)}
.tp dd{margin:0}

/* ================== MARQUEUR DE CONTENU À FOURNIR =======================
   Signale, dans les pages légales et éditoriales, ce que le commerçant
   doit encore renseigner. Visible volontairement : un texte manquant se
   remarque, un texte oublié dans le code non. */
.gap{
  display:inline-flex;align-items:center;gap:.3rem;border:1px dashed var(--gold);
  background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--fg);
  border-radius:2px;padding:.05rem .4rem;font-family:var(--serif);
  font-size:.78rem;font-weight:700;white-space:nowrap;
}
.phead .gap{color:#fff;border-color:var(--or-clair);background:rgba(245,207,99,.2)}
.doc .gap+*{margin-top:0}

/* Colonne latérale des pages longues : sommaire et encart de contact. */
.doc-aside{display:grid;gap:1.2rem;position:sticky;top:170px;padding-top:clamp(1.8rem,4vw,2.8rem)}
.admin-bar .doc-aside{top:202px}
@media(max-width:860px){.doc-aside,.admin-bar .doc-aside{position:static;padding-top:0}}

/* ==================== BLANC À REMPLIR ===================================
   Les mentions légales et les CGV comportent des informations que seul le
   commerçant détient. Le trait souligné les rend impossibles à manquer,
   sur écran comme à l'impression d'une relecture. */
.blanc{
  display:inline-block;min-width:8ch;color:var(--or-profond);font-weight:700;
  letter-spacing:.02em;background:color-mix(in srgb,var(--gold) 12%,transparent);
  border-bottom:2px solid var(--gold);padding:0 .25rem;border-radius:2px 2px 0 0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .blanc{color:var(--or-clair)}
}
:root[data-theme="dark"] .blanc{color:var(--or-clair)}

/* ===================== BOUTON WHATSAPP FLOTTANT =========================
   Pastille ronde a l'angle droit : le canal de contact principal de la
   boutique, joignable depuis n'importe quelle page. Le badge reCAPTCHA
   occupe l'angle gauche pour ne pas se disputer la place. */
.wa-flot{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:95;
  display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;
  background:#25D366;color:#fff;
  box-shadow:0 12px 30px -10px rgba(0,20,60,.5);
  transition:transform .15s,box-shadow .15s;
  margin-bottom:env(safe-area-inset-bottom,0);
}
.wa-flot:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(0,20,60,.55)}
.wa-flot:active{transform:translateY(0)}
.wa-flot svg{width:1.9rem;height:1.9rem}

/* Le tiroir du panier passe par-dessus. */
.dw.on~.wa-flot{opacity:0;pointer-events:none}
@media print{.wa-flot{display:none}}

/* ========================== TIROIR DU PANIER ============================
   Ouvert depuis l'en-tête. Repris de la maquette : voile sombre, panneau
   glissant depuis la droite, totaux en pied. */
.scrim{
  position:fixed;inset:0;background:rgba(0,20,50,.55);z-index:98;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.scrim.on{opacity:1;pointer-events:auto}

.dw{
  position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);
  background:var(--surface);border-left:1px solid var(--border);z-index:99;
  display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .25s ease;
}
.dw.on{transform:none}

.dw>header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;background:var(--bleu-nuit);color:#fff;flex:none;
}
.dw>header h3{font-size:1.02rem;color:#fff}
.dw .x{
  border:0;background:transparent;cursor:pointer;font-size:1.5rem;line-height:1;
  color:rgba(255,255,255,.8);padding:0 .2rem;
}
.dw .x:hover{color:#fff}

.dw .items{
  flex:1;overflow-y:auto;padding:1.2rem;display:grid;gap:1rem;align-content:start;
}
.dw .empty{color:var(--muted);font-size:.9rem;text-align:center;padding:2rem 1rem 1rem}

/* Une ligne du panier : vignette, désignation, prix et retrait. */
.ci{display:grid;grid-template-columns:52px 1fr auto;gap:.8rem;align-items:center}
.ci .t{
  background:var(--media);border-radius:2px;padding:.3rem;
  display:grid;place-items:center;overflow:hidden;
}
.ci .t img{width:100%;height:auto;display:block}
.ci-nom{min-width:0}
.ci b{font-size:.87rem;font-weight:600;display:block;line-height:1.3}
.ci b a:hover{color:var(--accent)}
.ci small{color:var(--muted);font-size:.77rem}
.ci-fin{display:grid;justify-items:end;gap:.25rem}
.ci .pr{font-family:var(--serif);font-weight:700;font-variant-numeric:tabular-nums;font-size:.9rem}
.ci-x{
  display:grid;place-items:center;width:1.4rem;height:1.4rem;
  border:1px solid var(--border-2);border-radius:2px;
  color:var(--faint);font-size:.95rem;line-height:1;
}
.ci-x:hover{border-color:var(--alerte);color:var(--alerte)}

.dw>footer{
  border-top:1px solid var(--border);padding:1.2rem;display:grid;gap:.8rem;flex:none;
}
.tot{display:grid;gap:.4rem;font-size:.9rem}
.tot div{display:flex;justify-content:space-between}
.tot .free{color:var(--ok);font-weight:700}
.tot .g{
  font-family:var(--chiffre);font-size:1.5rem;padding-top:.5rem;
  border-top:1px solid var(--border);align-items:baseline;
}

/* Le voile (z-index 98) recouvre la barre flottante (95) et le badge
   reCAPTCHA (94) : rien d'autre à prévoir pour les mettre en retrait. */

/* ============================== MOSAIQUE ================================
   Visuel de remplacement tant qu'aucune photo de boutique n'est deposee :
   le catalogue reel plutot qu'un cadre vide. */
.mosaique{
  position:relative;width:100%;height:100%;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:2px;background:var(--border);
}
.mosaique span{background:var(--media);display:grid;place-items:center;overflow:hidden}
.mosaique img{width:100%;height:100%;object-fit:cover}
.mosaique b{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(transparent,rgba(0,38,95,.88) 45%);
  color:#fff;font-family:var(--serif);font-weight:800;font-size:1rem;
  letter-spacing:-.01em;padding:2.2rem .9rem .8rem;text-align:center;
}

/* ==================== RESPIRATION AVANT LE PIED DE PAGE =================
   Une page qui s'acheve sur un encart ou un tableau le collait au bandeau
   bleu du pied de page. Les pages qui se terminent par une section deja
   espacee, ou par un ecran WooCommerce qui gere son propre bas, gardent
   leur mise en page inchangee. */
main#contenu{padding-bottom:clamp(2.4rem,5vw,3.6rem)}
main#contenu.dg-woo{padding-bottom:clamp(2rem,5vw,3.5rem)}
main#contenu:has(> section.blk:last-child),
main#contenu:has(> section.alt:last-child){padding-bottom:0}