/* l'ajout au panier (10/10/2026) : une carte, en bas sur telephone, en haut a droite sur ordinateur */
.aj-ok{position:fixed;inset:0;z-index:80;background:rgba(22,59,53,0);display:flex;align-items:flex-start;justify-content:flex-end;padding:84px 28px 0;transition:background .25s}
.aj-ok.on{background:rgba(22,59,53,.18)}
.aj-in{background:#fff;border-radius:16px;box-shadow:0 18px 44px rgba(22,59,53,.22);padding:22px 22px 20px;width:min(380px,100%);box-sizing:border-box;color:#163b35;transform:translateY(-8px);opacity:0;transition:transform .25s,opacity .25s}
.aj-ok.on .aj-in{transform:none;opacity:1}
.aj-t{margin:0 0 6px;font:500 13px/1.3 'Glacial Indifference','Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.aj-v{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#163b35;color:#fff7cb;font-size:12px;letter-spacing:0}
.aj-n{margin:0 0 2px;font:400 20px/1.25 'Recoleta',Georgia,serif}
.aj-k{margin:0 0 16px;font-size:13.5px;opacity:.7}
.aj-b{display:grid;gap:10px}
.aj-b .cta{width:100%;box-sizing:border-box;justify-content:center;margin:0}
@media (max-width:900px){.aj-ok{align-items:flex-end;justify-content:center;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .aj-in{width:100%;transform:translateY(16px)}}
@media (prefers-reduced-motion:reduce){.aj-ok,.aj-in{transition:none}}
.preco-f select,.preco-f input,.preco-f textarea{max-width:100%;width:100%;box-sizing:border-box;min-width:0}
/* la boutique est jaune : le menu en jaune */
header#hdr.h2{background:var(--jaune);border-bottom-color:rgba(22,59,53,.12)}
/* ================= LA BOUTIQUE v2 ================= */
.page-int main{padding-top:62px}
.b-wrap{max-width:1140px;margin:0 auto;padding:0 40px}
@media (max-width:640px){.b-wrap{padding:0 18px}}
h2.bt{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:0 0 6px}
p.bs{font-size:15px;line-height:1.7;margin:0 0 20px;opacity:.85;max-width:44em}
.b-sec{padding:34px 0 10px}
/* la barre des rayons */
.snav{position:sticky;top:62px;z-index:40;background:rgba(251,250,246,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(22,59,53,.1)}
.snav .in{max-width:1140px;margin:0 auto;padding:0 40px;display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none}
.snav .in::-webkit-scrollbar{display:none}
.snav a{flex:none;padding:14px 12px 12px;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;border-bottom:3px solid transparent;
  transition:border-color .2s,opacity .2s}
.snav a:hover{opacity:.6}
.snav a.on{border-bottom-color:#163b35}
@media (max-width:900px){.snav{top:54px}
  .snav .in{padding:0 12px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 88%,transparent)}
  .snav a{padding:12px 10px 10px;font-size:11.5px}}
/* en-tete du catalogue */
.b-hero{padding:44px 0 6px}
.b-hero h1{font-size:clamp(34px,4vw,54px);line-height:1.08}
.b-hero .lead{font-size:16px;line-height:1.7;max-width:36em;margin:12px 0 0}
.fil-a{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;opacity:.55;margin:0 0 10px}
.reass-b{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 8px}
@media (max-width:900px){.reass-b{grid-template-columns:1fr 1fr}}
.reass-b div{display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid rgba(22,59,53,.12);border-radius:12px;padding:12px 14px;
  font-size:13px;line-height:1.35}
.reass-b svg{width:26px;height:26px;flex:none;color:#163b35;opacity:.8}
/* cartes */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.g4{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.g3,.g4{grid-template-columns:1fr}}
.ens{display:flex;flex-direction:column;gap:8px;border-radius:16px;padding:26px 26px 22px;
  color:#163b35;min-height:280px}
.ens.e-bleu{background:var(--bleu)}
.ens.e-blanc{background:#fff;border:1px solid rgba(22,59,53,.16)}
.ens.e-jaune{background:var(--jaune)}
.ens h3{font-size:24px;line-height:1.15;margin:0}
.ens.e-bleu h3{color:var(--jaune)}
.ens p{font-size:14px;line-height:1.6;margin:0}
.ens .comp{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ens .comp span{font-size:11.5px;letter-spacing:.06em;background:rgba(255,255,255,.7);
  border-radius:999px;padding:4px 10px}
.ens.e-blanc .comp span{background:var(--bleupale,#e3eef7)}
.ens .ep{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap}
.ens .ep .ap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.ens .ep .px{font-family:'Recoleta',Georgia,serif;font-size:26px}
.ens .cta{align-self:flex-start;margin-top:6px;min-height:44px;padding:8px 20px 4px;
  font-size:11px}
.ens.e-jaune .cta,.ens.e-bleu .cta{background:#fff;box-shadow:0 6px 18px rgba(22,59,53,.12)}
.ens.e-jaune .cta:hover,.ens.e-bleu .cta:hover{background:var(--jaune)}
.fam{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid rgba(22,59,53,.12);color:#163b35;transition:transform .3s,box-shadow .3s}
.fam:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(22,59,53,.14)}
.fam .im{aspect-ratio:1/1;background:#eeece6 center/cover no-repeat}
.fam .tx{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1}
.fam h3{font-size:20px;line-height:1.2;margin:0}
.fam p{font-size:13px;line-height:1.5;margin:0;opacity:.8}
.fam .fp{margin-top:auto;padding-top:8px;font-size:12px}
.fam .fp b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:18px}
/* la ligne service */
.serv-l{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 24px;background:var(--bleu);border-radius:14px;padding:18px 24px;margin:30px 0 0}
.serv-l p{margin:0;font-size:15px;line-height:1.5;max-width:44em}
.serv-l .serv-r{display:block;margin-top:6px;font-size:14px;opacity:.85}
.serv-l p b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:19px;
  display:block;color:#163b35}
.serv-l .cta{min-height:44px;padding:8px 20px 4px;font-size:11px;background:#fff}
.serv-l.diag-l{background:var(--jaune)}
.serv-l.diag-l + .serv-l{margin-top:14px!important}
.sh-cy .diag-l{margin-top:34px}
@media (max-width:600px){.diag-l .cta{letter-spacing:.06em;padding-left:14px;padding-right:14px;max-width:100%}.diag-l{padding:18px 16px}}
/* accordeons pratiques */
.acc{border:1px solid rgba(22,59,53,.14);border-radius:14px;background:#fff;padding:0 22px;
  margin-bottom:10px}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:15px 0;font-family:'Recoleta',Georgia,serif;font-size:19px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:'Jost',sans-serif;font-weight:300;font-size:24px;
  line-height:1;opacity:.6;transition:transform .3s}
.acc[open] summary::after{transform:rotate(45deg)}
.acc p{font-size:14.5px;line-height:1.7;margin:0 0 16px;max-width:52em}
/* la fiche */
.f-haut{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start;
  padding-top:28px;padding-bottom:10px}
@media (max-width:900px){.f-haut{grid-template-columns:1fr;gap:22px;padding-top:16px}}
.gal .g1{aspect-ratio:1/1;border-radius:16px;background:#eeece6 center/cover no-repeat;
  border:1px solid rgba(22,59,53,.08)}
/* F2 (16/09/2026) : les vignettes gardaient la largeur de la colonne divisee par leur nombre
   (96 px a cinq, 250 px a deux, la moitie de la grande photo). Taille FIXE, calees a gauche. */
.gal .gs{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.gal .gs button{width:88px;height:88px;flex:none;aspect-ratio:1/1;border-radius:10px;border:1px solid rgba(22,59,53,.12);
  background:#eeece6 center/cover no-repeat;cursor:pointer;padding:0}
/* F3 : la colonne de droite descend 700 px plus bas que la galerie ; la photo suit le client
   pendant qu'il choisit le modele et la formule. */
/* 17/10/2026 (Morgane) : plus de galerie collante. Sur un ecran pas tres haut, les vignettes restaient sous la ligne de
   flottaison et la molette faisait defiler tout le texte de droite avant de les montrer. */
.gal .gs button.on{outline:2px solid #163b35;outline-offset:2px}
.gal .gs button[hidden]{display:none!important}
.gal .prov{font-size:10.5px;opacity:.5;margin:6px 0 0}
.f-info h1{font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.f-info .tag{font-size:16px;line-height:1.5;margin:8px 0 0;opacity:.85;max-width:30em}
.f-info .prix{display:flex;align-items:baseline;gap:10px;margin-top:18px;flex-wrap:wrap}
.f-info .prix .ap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.f-info .prix .px{font-family:'Recoleta',Georgia,serif;font-size:34px;line-height:1}
.f-info .prix .ttc{font-size:12px;opacity:.65}
.f-info .prix .att-r{flex:0 0 100%;margin-top:6px;font-size:13px;line-height:1.5;opacity:.8}
.f-info .livr{margin:10px 0 0;font-size:13.5px;line-height:1.6;padding-left:22px;position:relative}
.f-info .livr::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;
  border-radius:50%;background:var(--jaune);outline:2px solid #fff}
.choix{margin-top:20px}
.choix .ck,.qte .qk{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.choix .ck{margin:0 0 8px}
.choix .opts{display:flex;flex-wrap:wrap;gap:8px}
.choix label{cursor:pointer}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix .opt{display:inline-flex;flex-direction:column;gap:1px;border-radius:12px;
  border:1px solid rgba(22,59,53,.25);padding:9px 16px 8px;background:#fff;min-width:150px}
.choix .opt b{font-weight:500;font-size:13.5px}
.choix .opt span{font-size:12px;opacity:.7}
.choix input:checked + .opt{background:var(--jaune);border-color:#163b35}
.choix input:focus-visible + .opt{outline:2px solid #163b35;outline-offset:2px}
.choix.formule .opts{display:grid;grid-template-columns:1fr 1fr}
.choix.formule label{display:flex}
.choix.formule .opt{min-width:0;width:100%;box-sizing:border-box}
.choix.formule .opt span{line-height:1.4}
.choix.formule .fp-n{margin-top:8px}
@media (max-width:480px){.choix.formule .opts{grid-template-columns:1fr}}
.qte{display:flex;align-items:center;gap:14px;margin-top:16px}
.qte .qb{display:inline-flex;align-items:center;border:1px solid rgba(22,59,53,.25);
  border-radius:999px;background:#fff}
.qte button{border:none;background:none;width:38px;height:38px;font-size:20px;cursor:pointer;
  color:#163b35;font-family:'Jost',sans-serif;font-weight:300}
.qte output{min-width:28px;text-align:center;font-size:15px}
.f-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.f-act .cta{min-height:52px}
.reass{list-style:none;margin:20px 0 0;padding:14px 0 0;border-top:1px solid rgba(22,59,53,.12);
  display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:13px;line-height:1.5}
.reass li{padding-left:20px;position:relative}
.reass li::before{content:"";position:absolute;left:0;top:.35em;width:11px;height:11px;border-radius:3px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 L 6.5 11.5 L 12.5 4.5' fill='none' stroke='%23163b35' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
  outline:1px solid rgba(22,59,53,.35)}
@media (max-width:480px){.reass{grid-template-columns:1fr}}
/* les onglets */
.tabs{margin-top:26px}
.tabs .tl{display:flex;gap:4px;border-bottom:1px solid rgba(22,59,53,.14);overflow-x:auto;
  scrollbar-width:none}
.tabs .tl::-webkit-scrollbar{display:none}
.tabs .tl button{flex:none;border:none;background:none;font:400 15px/1 'Recoleta',Georgia,serif;
  color:#163b35;padding:14px 16px 12px;cursor:pointer;border-bottom:3px solid transparent;
  margin-bottom:-1px;opacity:.65;transition:opacity .2s,border-color .2s;white-space:nowrap}
.tabs .tl button:hover{opacity:1}
.tabs .tl button.on{opacity:1;border-bottom-color:#163b35}
/* F1 (16/09/2026) : les panneaux etaient empiles dans la meme case de grille, donc le conteneur
   gardait la hauteur du PLUS HAUT (« Comment ca marche », 591 px) : 330 px de vide sous « Pour quel
   exterieur ». Seul le panneau actif occupe la place maintenant. */
.tabs .tps{display:block}
.tabs .tp{padding:26px 0 6px}
@media (min-width:901px){.tabs .tp{display:none}.tabs .tp.on{display:block}}
.marche{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center}
@media (max-width:820px){.marche{grid-template-columns:1fr}}
.marche .sch{aspect-ratio:1/1;border-radius:14px;background:#fff center/cover no-repeat;
  border:1px solid rgba(22,59,53,.08)}
.marche ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.marche li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.marche li i{font-family:'Recoleta',Georgia,serif;font-style:normal;font-size:24px;line-height:1;
  opacity:.4}
.marche li b{display:block;font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:18px;
  line-height:1.25;margin-bottom:3px}
.marche li p{margin:0;font-size:14px;line-height:1.6;opacity:.9}
.marche .cap{font-size:11px;opacity:.5;margin:6px 0 0}
.marche .sch4{background:#fff;border:1px solid rgba(22,59,53,.12);display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;counter-reset:sch}
.marche .sch4 i{display:block;aspect-ratio:1/1;background:center/contain no-repeat;position:relative;counter-increment:sch}
.marche .sch4 i::after{content:counter(sch);position:absolute;left:6px;top:6px;width:22px;height:22px;border-radius:50%;background:#163b35;color:#fff7cb;font:400 12px/22px 'Recoleta',Georgia,serif;text-align:center}
.usages{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.usages{grid-template-columns:1fr}}
.usage{border-radius:14px;padding:18px 20px 16px;background:#fff;border:1px solid rgba(22,59,53,.12)}
.usage.u-serv{background:var(--bleu)}
.usage .pict{display:block;margin-bottom:8px;color:#163b35}
.usage .pict svg{width:30px;height:30px;display:block}
.usage b{display:block;font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:19px;
  line-height:1.2;margin-bottom:4px}
.usage p{font-size:13.5px;line-height:1.55;margin:0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
.duo .d{background:#fff;border:1px solid rgba(22,59,53,.12);border-radius:14px;padding:20px 22px 18px}
.duo .d.dj{background:var(--jaune);border-color:transparent}
.duo h3{font-size:18px;margin:0 0 8px}
.duo ul{margin:0;padding:0;list-style:none;font-size:14px;line-height:1.7}
.duo ul li{padding-left:16px;position:relative}
.duo ul li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;
  background:#163b35;opacity:.6}
/* 20/09 (Morgane) : « le souligne bleu est ok mais pas le trait noir ». Le surlignage bleu
   marque deja le lien ; le trait par-dessous faisait deux marques pour une. Il faut passer
   devant « .pg-boutique main li a », qui souligne tous les liens de liste de la boutique. */
.duo ul li a,.pg-boutique main .duo ul li a{box-shadow:inset 0 -.4em 0 var(--bleu);text-decoration:none}
.carac{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid rgba(22,59,53,.12);
  border-radius:14px;overflow:hidden}
.carac td{padding:9px 16px;border-top:1px solid rgba(22,59,53,.08);vertical-align:top}
.carac tr:first-child td{border-top:none}
.carac td:first-child{width:36%;opacity:.65}
.assoc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:900px){.assoc{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;
  margin:0 -18px;padding:0 18px 6px;scrollbar-width:none}
  .assoc::-webkit-scrollbar{display:none}
  .assoc .as{flex:none;width:46%;scroll-snap-align:start}}
.as{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(22,59,53,.12);
  border-radius:12px;overflow:hidden;color:#163b35;transition:transform .25s}
.as:hover{transform:translateY(-3px)}
.as .im{aspect-ratio:1/1;background:#eeece6 center/cover no-repeat}
.as .tx{padding:10px 12px 12px}
.as b{display:block;font-weight:500;font-size:13px;line-height:1.3}
.as span{font-size:12px;opacity:.7}
.note-r{font-size:12px;line-height:1.7;opacity:.65;max-width:60em;margin:10px 0 0}
/* le formulaire */
.preco-f{background:#fff;border:1px solid rgba(22,59,53,.14);border-radius:16px;padding:26px 30px 26px;
  position:relative}
@media (max-width:640px){.preco-f{padding:20px 16px}}
.preco-f h2{font-size:clamp(22px,2.4vw,28px);line-height:1.15;margin:0}
.preco-f .intro{font-size:14px;line-height:1.65;margin:8px 0 16px;max-width:44em;opacity:.85}
.preco-f .champs{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
@media (max-width:640px){.preco-f .champs{grid-template-columns:1fr}}
.preco-f label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.75}
.preco-f label.large{grid-column:1/-1}
.preco-f input,.preco-f select,.preco-f textarea{font:400 15px/1.4 'Glacial Indifference','Jost',sans-serif;
  color:#163b35;border:1px solid rgba(22,59,53,.25);border-radius:10px;padding:11px 13px;
  background:#fbfaf6;letter-spacing:0;text-transform:none}
.preco-f textarea{min-height:76px;resize:vertical}
.preco-f input:focus,.preco-f select:focus,.preco-f textarea:focus{outline:2px solid #163b35;outline-offset:1px}
.preco-f .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.preco-f .bas{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:16px}
.preco-f .bas small{font-size:12px;opacity:.65;max-width:34em;line-height:1.5}
.preco-f .ok{display:none;background:var(--jaune);border-radius:14px;padding:20px 22px;font-size:15px;line-height:1.6}
.preco-f .ok b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:22px;display:block;margin-bottom:6px}
.preco-f.envoye form{display:none}
.preco-f.envoye .ok{display:block}
.preco-f .err{display:none;color:#8a2c1b;font-size:13px;margin-top:8px}
.preco-f .err.on{display:block}
.duo li.sous{list-style:none;margin:12px 0 4px -1.2em;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.65}
.duo li.sous:first-child{margin-top:0}
.bt-2{margin-top:34px}
/* la boutique relue (14/09 nuit) : le petit heros, les titres de section, en pratique, service ou boutique */
.si-ligne{display:block;font-size:12.5px;line-height:1.45;opacity:.85;margin:0 0 10px}
.sh-titre{margin-top:9vh}
.sh-titre h2{margin:4px 0 0}
.sh-titre+.sh{margin-top:3vh}
/* le cout par mois (07/10/2026, Morgane) : un petit bloc dans la charte */
.sh-calc.dedans-l{margin:9vh auto 0}
.sh-calc-in{background:var(--jaunepale,#fdf7d9);border-radius:18px;padding:34px 36px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.9fr);gap:36px;align-items:stretch}
.sh-calc-in h2{margin:0 0 10px;font-size:clamp(24px,2.4vw,32px)}
.sh-calc-l{margin:0 0 20px;font-size:15px;line-height:1.5;opacity:.85}
.sh-calc-f{list-style:none;margin:0;padding:0}
.sh-calc-f li{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;border-top:1px solid rgba(22,59,53,.14)}
.sh-calc-f li:last-child{border-bottom:1px solid rgba(22,59,53,.14)}
.sh-calc-t b{display:block;font-weight:500;font-size:15.5px}
.sh-calc-t small{display:block;font-size:12.5px;opacity:.7;margin-top:2px;line-height:1.4}
.sh-calc-q{display:inline-flex;align-items:center;border:1px solid rgba(22,59,53,.25);border-radius:999px;background:#fff;flex:none}
.sh-calc-q button{border:0;background:none;width:38px;height:38px;font-size:19px;color:#163b35;cursor:pointer;border-radius:999px}
.sh-calc-q button:hover{background:rgba(22,59,53,.07)}
.sh-calc-q output{min-width:26px;text-align:center;font-size:15px;font-weight:500}
.sh-calc-sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;flex:none;font-size:14px}
.sh-calc-sw input{position:absolute;opacity:0;width:1px;height:1px}
.sh-calc-sw i{width:44px;height:26px;border-radius:999px;background:rgba(22,59,53,.22);position:relative;transition:background .2s}
.sh-calc-sw i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.sh-calc-sw input:checked+i{background:#163b35}
.sh-calc-sw input:checked+i::after{transform:translateX(18px)}
.sh-calc-sw input:focus-visible+i{outline:2px solid #163b35;outline-offset:2px}
.sh-calc-d{background:#fff;border-radius:14px;padding:26px 26px 22px;display:flex;flex-direction:column;justify-content:center}
.sh-calc-k{margin:0 0 6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.sh-calc-big{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sh-calc-big b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:clamp(38px,3.6vw,48px);line-height:1;white-space:nowrap}
.sh-calc-big span{font-size:15px;opacity:.8}
.sh-calc-j{margin:6px 0 18px;font-size:13.5px;opacity:.75}
.sh-calc-b{margin:0;padding:12px 0 0;border-top:1px solid rgba(22,59,53,.14);display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px}
.sh-calc-b b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:21px;white-space:nowrap}
.sh-calc-n{margin:14px 0 0;font-size:12px;line-height:1.5;opacity:.65}
@media (max-width:900px){.sh-calc-in{grid-template-columns:1fr;padding:22px 18px;gap:18px}.sh-calc-d{padding:20px 18px 18px}.sh-calc-t small{font-size:12px}.sh-calc-b{display:block}.sh-calc-b span{display:block;margin-bottom:2px}.sh-calc-b b{font-size:22px}}
/* 07/10/2026 (audit) : un seul bloc pratique de quatre lignes, a la place des quatre cartes et du bloc vert */
.sh-prat4{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.sh-prat4 li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;border:1px solid rgba(22,59,53,.14);border-radius:14px;font-size:14.5px;line-height:1.55}
.sh-prat4 li svg{width:26px;height:26px;flex:none;margin-top:2px}
.sh-prat4 li b{font-weight:500}
.sh-prat4 a{text-decoration:underline;text-underline-offset:3px}
.sh-kit-t{font-size:clamp(22px,2.2vw,28px);margin:0 0 12px}
.sh-trois{margin:4px 0 14px;font-size:16px;line-height:1.5;font-family:'Recoleta',Georgia,serif;font-style:italic;opacity:.9}
/* 07/10 (Morgane) : en tete de la grille, comme chapeau des produits */
@media (max-width:900px){.sh-prat4{grid-template-columns:1fr}}
.sh-prat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.sh-prat>div{background:#fff;border:1px solid rgba(22,59,53,.14);border-radius:14px;padding:18px 18px 16px}
.sh-prat svg{width:26px;height:26px;display:block;margin-bottom:10px}
.sh-prat b{display:block;font-size:18px;line-height:1.2;margin-bottom:6px}
.sh-prat p{margin:0;font-size:13.5px;line-height:1.55;opacity:.9}
.sh-prat-l{margin:18px 0 0;font-size:15px}
.sh-prat-l a{text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:10px 0}
/* page dediee (16/09, mk_livraison) */
/* 20/09 (Morgane) : « ca me perturbe les changements de largeur des encadres sans arret ». Un
   cadre colore se peint TOUJOURS sur un element interieur, jamais sur le conteneur de page :
   .dedans-l porte 24 px de retrait, et le bloc bleu qui les remplacait par son propre padding
   debordait de 24 px de chaque cote par rapport au bandeau jaune et au bloc de precommande. */
.sh-ou{margin-top:9vh}
.sh-ou-in{background:var(--bleu);border-radius:16px;padding:30px 32px 28px}
/* 20/09 : « Pourquoi trois dispositifs », d'apres la page « Notre approche » de Wiliv (Morgane). Le
   cycle en six etapes, les trois ou l'on agit, chacune avec son produit. Le service dit la meme
   chose a sa maniere (« Trois moments du cycle. Trois endroits ou agir. »). */
.sh-cy.dedans-l{margin:9vh auto 0}
/* .dedans-l remet margin:0 auto, il faut la meme specificite */
/* 21/09 (Morgane) : « Pourquoi trois dispositifs » sort de son encadre, titre a la taille des autres sections */
.sh-cy-in{background:none;border:0;border-radius:0;padding:0}
.sh-cy h2{margin:0 0 10px}
/* 21/09 (Morgane) : la phrase tient sur deux lignes, une par phrase sur ordinateur */
.sh-cy-t span{display:block}
@media (max-width:900px){.sh-cy-t span{display:inline}.sh-cy h2.sh-cy-t{font-size:19px!important;text-wrap:balance;line-height:1.25}}
.sh-cy-ch{margin:0 0 22px;font-size:15px;line-height:1.6;max-width:62em}
.sh-cy-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sh-cy-l li{background:#fff;border:1px solid rgba(22,59,53,.14);border-radius:14px;padding:16px 18px 18px;font-size:14.5px;line-height:1.55}
.sh-cy-l li b{display:block;font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:18px;margin:6px 0 6px}
.sh-cy-l li>span{display:block}
.sh-cy-n{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.65}
.sh-cy-l a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.sh-cy-l{grid-template-columns:1fr}}
.sh-ou h2{margin:0 0 14px;font-size:clamp(22px,2.4vw,30px)}
.sh-ou-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:18px}
.sh-ou-duo p{margin:0;font-size:15px;line-height:1.6}
.sh-ou-duo .cta{margin-top:18px}
@media (max-width:900px){.sh-prat{grid-template-columns:1fr 1fr}.sh-ou-duo{grid-template-columns:1fr}.sh-ou-in{padding:22px 18px}}
/* la bande et le bloc « etre prevenu » du mode attente */
.att-bande{position:fixed;top:0;left:0;right:0;z-index:56;height:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#163b35;color:#fff7cb;font-size:13.5px;line-height:1.35;text-align:center;padding:0 16px}
.att-bande b{font-weight:600;color:#fff;margin-right:4px}
.att-bande a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:6px;white-space:nowrap}
html[data-mode="attente"] .pg-boutique header#hdr.h2{top:40px}
html[data-mode="attente"] .pg-boutique.page-int main{padding-top:102px}
html[data-mode="attente"] .pg-boutique .snav{top:102px}
/* 20/09 : en mode attente, la bande verte pousse l'entete de 40 px ; tout ce qui colle sous
   l'entete doit suivre, sinon il passe derriere et seul son trait du bas depasse (Morgane :
   « double barre chelou » sur l'espace client). */
html[data-mode="attente"] .pg-boutique .ec-nav{top:101px}
html[data-mode="attente"] .pg-boutique .sh-cats{top:164px}
html[data-mode="attente"] .pg-boutique .f-haut .gal{top:170px}
.att-court{display:none}
@media (max-width:900px){.att-bande{font-size:12.5px;padding:0 10px}.att-long{display:none}.att-court{display:inline}
  html[data-mode="attente"] .pg-boutique header#hdr.h2{top:40px}html[data-mode="attente"] .pg-boutique.page-int main{padding-top:102px}html[data-mode="attente"] .pg-boutique .snav{top:94px}html[data-mode="attente"] .pg-boutique .tiroir .tir-in{padding-top:124px}}
/* 20/09 (Morgane) : « pourquoi l'encadre est toujours en jaune alors que j'ai dit que precommande,
   prevenu etc. ca devait etre en vert ». Le CADRE est vert nuit, texte creme ; dedans, le bouton
   reprend le jaune et la pastille d'offre reste jaune, sinon ils disparaissent. Meme traitement
   pour le bloc de precommande (.preco-x). */
.alerte-x{background:#163b35;color:#fff7cb;border-radius:16px;padding:28px 30px 24px;margin-top:18px;scroll-margin-top:92px}
/* 20/09 (Morgane) : en arrivant par #prevenir, le cadre vert se collait sous le menu ; de l'air au-dessus */
html[data-mode="attente"] .alerte-x{scroll-margin-top:132px}
.alerte-x .sh-gt,.alerte-x h2,.alerte-x p{color:#fff7cb}
.alerte-x a{color:inherit}
.alerte-x .sh-gt{margin:0 0 6px}
.alerte-x h2{font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:0 0 10px;max-width:22em}
.alerte-x p{font-size:15px;line-height:1.7;margin:0 0 14px;max-width:48em}
.alerte-f{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:560px}
.alerte-f .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.alerte-f input{flex:1 1 240px;min-width:0;font:400 15px/1.4 'Glacial Indifference','Jost',sans-serif;padding:12px 14px;border:1px solid rgba(22,59,53,.25);border-radius:12px;background:#fff;color:#163b35}
.alerte-f input:focus{outline:2px solid #163b35;outline-offset:1px}
.alerte-f .cta{margin:0}
.alerte-x .alerte-ok{font-size:16px}
.alerte-x .alerte-ok b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:22px;display:block;margin-bottom:4px}
.alerte-x .alerte-err{color:#ffc9b8;font-size:13px;margin:8px 0 0}
.alerte-x small{display:block;font-size:12px;opacity:.75;margin-top:12px}
.preco-x + .alerte-x{margin-top:0}
.serv-l + .preco-x{margin-top:28px}
/* F12 : la regle n'existait que sous 900 px */
.preco-f select,.preco-f input,.preco-f textarea{max-width:100%;width:100%;box-sizing:border-box}
/* ================= LA BOUTIQUE, l'index en grille (10/09/2026) ================= */
.dedans-l{max-width:1180px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.sh-ou.dedans-l{margin:9vh auto 0}
@media (max-width:900px){.sh-ou-in{padding:22px 18px 20px}}
.sh-tete{background:var(--jaune);text-align:center;padding:calc(61px + 8vh) 24px 7vh}
.sh-tete h1{font-size:clamp(38px,5vw,64px);line-height:1.04;margin:0 0 12px;color:var(--vert)}
.sh-chapo{font-size:16px;line-height:1.7;max-width:40em;margin:0 auto;color:#163b35}
.sh{display:grid;grid-template-columns:230px 1fr;gap:0 40px;margin-top:6vh;align-items:start}
.sh.sh-1{display:block;margin-top:4vh}
.kit-dit{margin:14px 0 4px;padding:12px 14px;border-radius:10px;background:var(--jaune,#fff7cb);font-size:14px;line-height:1.5}
.kit-dit b{display:block;font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:17px;margin-bottom:2px}
.kit-dit span{display:block}
.sh-grille .pc[hidden]{display:none!important}
/* 17/09 : .pc{display:flex} annulait [hidden], le filtre ne masquait rien */
/* 17/09 : variante C du labo (choix de Morgane) : les categories dans une colonne a gauche, avec leur nombre */
.sh.sh-c{grid-template-columns:220px 1fr;gap:0 36px;margin-top:5vh}
.sh-cats{position:sticky;top:124px}
.sh-cats .sh-ft{font-family:'Recoleta',Georgia,serif;font-size:22px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid rgba(22,59,53,.18)}
.sh-puces button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;font:400 15px/1.2 'Glacial Indifference','Jost',sans-serif;color:#163b35;background:none;border:0;border-radius:8px;padding:11px 12px;cursor:pointer}
.sh-puces button:hover{background:rgba(22,59,53,.06)}
.sh-puces button.on{background:#163b35;color:#fff7cb}
.sh-nb{opacity:.55;font-size:.9em;margin-left:8px}
@media (max-width:900px){.sh.sh-c{display:block;margin-top:3vh}.sh-cats{position:static;margin-bottom:14px}.sh-cats .sh-ft{display:none}
  .sh-puces{display:flex;gap:6px;overflow-x:auto;margin:0 -24px;padding:0 24px 2px;scrollbar-width:none}.sh-puces::-webkit-scrollbar{display:none}
  .sh-puces button{width:auto;flex:none;white-space:nowrap;border:1px solid rgba(22,59,53,.25);border-radius:999px;padding:10px 14px;min-height:44px}
  .sh-grille{grid-template-columns:1fr 1fr}}
.sh-filtres{position:sticky;top:80px}
.sh-ft{font-family:'Recoleta',Georgia,serif;font-size:22px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(22,59,53,.18)}
.sh-grp{margin:0 0 22px}
.sh-gt{font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.7;margin:0 0 8px}
.sh-grp label{display:flex;align-items:center;gap:9px;font-size:14px;padding:5px 0;cursor:pointer}
.sh-grp input{accent-color:#163b35;width:15px;height:15px;margin:0}
.sh-raz{font:500 11px 'Glacial Indifference','Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;background:transparent;border:1px solid rgba(22,59,53,.3);border-radius:999px;padding:8px 14px;cursor:pointer;color:inherit}
.sh-barre{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid rgba(22,59,53,.18)}
.sh-n{opacity:.75}
.sh-tri select{font:400 13px 'Glacial Indifference','Jost',sans-serif;color:inherit;background:#fff;border:1px solid rgba(22,59,53,.28);border-radius:999px;padding:6px 12px;margin-left:6px}
.sh-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px}
.sh-grille-4{grid-template-columns:repeat(4,1fr);gap:20px 16px}
/* F10 : plus de carte orpheline */
@media (max-width:900px){.sh-grille-4{grid-template-columns:1fr 1fr}}
.pc{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(22,59,53,.06);transition:transform .25s,box-shadow .25s}
.pc:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,59,53,.12)}
.pc-im{display:block;aspect-ratio:1/1;background-size:cover;background-position:center;position:relative}
.pc-defil .pc-im2{position:absolute;inset:0;background-size:cover;background-position:center;animation:pcdefil 7s ease-in-out infinite}
.pc-pts{position:absolute;right:12px;bottom:10px;display:flex;gap:5px}
.pc-pts b{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.5}
.pc-pts b:first-child{animation:pcpt 7s ease-in-out infinite}
.pc-pts b:last-child{animation:pcpt 7s ease-in-out infinite reverse}
@keyframes pcdefil{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
@keyframes pcpt{0%,40%{opacity:1}50%,90%{opacity:.5}100%{opacity:1}}
.pc-im i{display:none;position:absolute;left:12px;top:12px;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;background:var(--jaune,#fff7cb);color:#163b35;padding:5px 10px;border-radius:999px}
.pc-im i[data-etat="faible"],.pc-im i[data-etat="epuise"]{display:block}
.pc-im i[data-etat="epuise"]{background:#163b35;color:#fff7cb}
/* la precommande se dit UNE fois, au-dessus de la grille, plus sur chaque carte */
.sh-preco-b{margin:0 0 16px;font-size:13.5px;line-height:1.5;background:var(--jaune);border-radius:10px;padding:10px 14px}
.pc-cat{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.6;margin:14px 16px 4px}
.pc-nom{display:block;font-size:19px;line-height:1.2;margin:0 16px 4px;hyphens:manual;-webkit-hyphens:manual}
.pc-court{display:block;font-size:13px;opacity:.75;margin:0 16px 10px;line-height:1.5}
.pc{display:flex;flex-direction:column}
.pc-prix{display:flex;align-items:baseline;gap:8px;margin:auto 16px 16px}
/* cale en bas de carte */
.pc-prix .ap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.pc-prix b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:20px}
.pc-prix{flex-wrap:wrap}
.pc-prix .pc-barre{font-family:'Recoleta',Georgia,serif;font-size:15px;opacity:.55;text-decoration:line-through}
.pc-prix .pc-off{font-size:11px;letter-spacing:.05em;background:#e3f1e6;color:#1d6b4a;border-radius:999px;padding:3px 8px;font-weight:500}
/* 09/10/2026 (Morgane) : d'une carte à l'autre, famille, nom, rôle et texte commencent à la même hauteur
   (sous-grille : chaque carte prend six rangées partagées avec ses voisines), et le prix tient sur UNE ligne,
   même en promotion : le « −10 % » passe en pastille sur la photo, « À partir de » devient « Dès ». */
.sh-grille > .pc{grid-row:span 6}
.sh-grille > .pc:not(.pc-quiz){display:grid;grid-template-rows:subgrid;row-gap:0;position:relative}
.sh-grille > .pc > .pc-im{grid-row:1}
.sh-grille > .pc > .pc-cat{grid-row:2}
.sh-grille > .pc > .pc-nom{grid-row:3}
.sh-grille > .pc > .pc-role{grid-row:4}
.sh-grille > .pc > .pc-court{grid-row:5}
.sh-grille > .pc > .pc-prix{grid-row:6;align-self:end;margin-top:0}
.pc-court .sans-px{display:block;margin-top:6px}
.pc-prix.pc-remise{flex-wrap:nowrap;white-space:nowrap}
.pc-prix.pc-remise .ap{font-size:0;letter-spacing:0}
.pc-prix.pc-remise .ap::before{content:"Dès";font-size:10.5px;letter-spacing:.14em}
.pc .pc-prix .pc-off{position:absolute;right:12px;top:12px;font-size:12px;padding:5px 10px;z-index:2}
@media (max-width:900px){
  .pc .pc-prix .pc-off{right:8px;top:8px;font-size:12px;padding:4px 8px}
  .pc-prix.pc-remise .ap{display:none}
  .pc-prix.pc-remise{gap:6px}
  .pc-prix.pc-remise .pc-barre{font-size:12.5px}
  .pc-prix.pc-remise b{font-size:15.5px}
  .sh-grille > .pc > .pc-role{margin:0 12px 8px;font-size:13px;line-height:1.35}
}
.sh-vide{text-align:center;opacity:.7;padding:40px 0}
.sh-reass{margin-top:10vh}
.sh-preco{margin-top:8vh}
.sh-preco .preco-f{max-width:none}
.note-r.dedans-l{margin-top:24px;margin-bottom:10vh}
.sh-situ{margin-top:7vh}
.sh-situ h2{font-size:clamp(24px,2.8vw,36px);margin:4px 0 22px}
.si-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.si{display:block;text-decoration:none;color:inherit;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(22,59,53,.06);transition:transform .25s,box-shadow .25s}
.si:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(22,59,53,.12)}
.si-im{display:block;aspect-ratio:16/9;background-size:cover;background-position:center}
.si-tx{display:block;padding:16px 18px 18px}
.si-nom{display:block;font-size:21px;line-height:1.15;margin-bottom:6px}
.si-compo{display:block;font-size:13px;opacity:.75;margin-bottom:10px}
.si-prix{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.si-prix .ap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.si-prix b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:20px}
.si-voir{font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.sh-livr{font-size:14.5px;line-height:1.7;max-width:60em;margin:18px 0 0}
/* la page des situations */
.st{padding:8vh 24px 0}
.st:last-of-type{padding-bottom:4vh}
.st-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:center}
.st-im{aspect-ratio:4/3;border-radius:12px;background-size:cover;background-position:center}
.st-tx h2{font-size:clamp(28px,3.2vw,42px);line-height:1.08;margin:0 0 12px}
.st-ph{font-size:16px;line-height:1.7;margin:0 0 18px}
.st-l{list-style:none;padding:0;margin:0 0 18px}
.st-l li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid rgba(22,59,53,.14);font-size:14.5px}
.st-l li b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:17px}
.st-l li span{opacity:.8;line-height:1.5}
.st-prix{display:flex;align-items:baseline;gap:10px;margin:0 0 16px}
.st-prix .ap{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.st-prix b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:32px}
.st-prix .ttc{font-size:12px;opacity:.65}
.st-tx .cta{width:auto}
.st-sep{display:block;margin-top:14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.75}
.st:nth-of-type(even) .st-in .st-im{order:2}
@media (max-width:900px){
  .si-grille{grid-template-columns:1fr}
  .st-in{grid-template-columns:minmax(0,1fr);gap:18px}.st-in>*{min-width:0}.st-tx .cta{max-width:100%;white-space:normal}.st:nth-of-type(even) .st-in .st-im{order:0}
  .st-l li{grid-template-columns:1fr}
  .sh{grid-template-columns:1fr;gap:20px}
  .sh-filtres{position:static}
  .sh-grp{display:inline-block;vertical-align:top;margin:0 22px 14px 0}
  .sh-grille{grid-template-columns:1fr 1fr;gap:16px 12px}
  .sh-tete{padding:calc(61px + 6vh) 20px 6vh}
}
@media (max-width:520px){.sh-grille{grid-template-columns:1fr}}
/* le heros B du labo (Morgane, 14/09 nuit) : deux colonnes, la Willo a droite, la grille juste apres */
.sh-tete-b{text-align:left;padding:calc(24px + 3vh) 40px 4vh}
.sh-tete-b .sb-in{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.sh-tete-b h1{font-size:clamp(32px,4vw,50px);margin:0 0 14px}
.sh-tete-b .sh-chapo{margin:0;max-width:34em}
.sh-chapo-s{margin-top:10px;font-size:14.5px;opacity:.85}
.sh-tete-b .sh-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px 0 0}
.sh-tete-b .cta{min-height:50px;padding:10px 22px 6px;font-size:11px}
.sh-tete-b .sb-im{display:block;aspect-ratio:4/3;max-height:340px;border-radius:16px;background-size:cover;background-position:center}
.sh-tete-b + .sh-titre{margin-top:5vh}
@media (max-width:820px){.sh-tete-b{padding-left:20px;padding-right:20px}.sh-tete-b .sb-in{grid-template-columns:1fr;gap:20px}.sh-tete-b .sb-im{max-height:240px}}
/* la livraison reguliere sur la fiche et dans le panier (06/10/2026 au soir) */
.f-abo{margin-top:16px}
.f-abo .fa-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f-abo label{cursor:pointer;display:flex;min-width:0}
.f-abo input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.f-abo .fa-o{display:flex;flex-direction:column;gap:1px;width:100%;box-sizing:border-box;border-radius:12px;border:1px solid rgba(22,59,53,.25);padding:9px 14px 8px;background:#fff}
.f-abo .fa-o b{font-weight:500;font-size:13.5px}
.f-abo .fa-o span{font-size:12px;opacity:.7}
.f-abo input:checked + .fa-o{background:var(--jaune);border-color:#163b35}
.f-abo input:focus-visible + .fa-o{outline:2px solid #163b35;outline-offset:2px}
.f-abo .fa-plus{margin-top:10px}
.f-abo .fa-plus[hidden]{display:none}
.f-abo .fa-f{display:flex;align-items:center;gap:10px;font-size:13.5px;flex-wrap:wrap}
.f-abo select,.pn-ab select,.livr-ici select,.pn-z select{font:inherit;color:#163b35;border:1px solid rgba(22,59,53,.25);border-radius:10px;padding:7px 10px;background:#fff;max-width:100%}
.f-abo .fa-n{margin:8px 0 0;font-size:12.5px;line-height:1.5;opacity:.8}
.f-abo .fa-e{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;margin:14px 0 8px}
.f-abo .fa-e i{font-style:normal;font-size:11px;width:20px;height:20px;line-height:20px;text-align:center;border-radius:50%;background:#163b35;color:#fff7cb}
.f-abo .fa-com[hidden],.f-abo .fa-px[hidden]{display:none}
.f-abo .fa-zone{width:100%;min-height:44px}
.f-abo .fa-px{margin:8px 0 0;font-size:13.5px}
.livr-ici{display:inline}
.livr-ici .li-b{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.livr-ici .li-sel{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.livr-ici .li-l{font-size:12.5px;opacity:.75}
.livr-ici-ouvert{display:block;margin-top:10px}
.pn-ab{display:block;margin-top:6px}
.pn-ab select{font-size:13px;padding:5px 8px}
.pn-ab-n{margin:10px 0 0;padding:10px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;background:#f4f8f1;border:1px solid rgba(22,59,53,.14)}
.pn-mode{border:0;margin:0 0 4px;padding:0;min-width:0}
.pn-mode legend{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;margin:0 0 8px;padding:0}
.pn-mode .pm-o{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pn-mode label{cursor:pointer;display:flex;min-width:0}
.pn-mode input{position:absolute;opacity:0;pointer-events:none}
.pn-mode .pm{display:flex;flex-direction:column;gap:2px;width:100%;box-sizing:border-box;border-radius:12px;border:1px solid rgba(22,59,53,.25);padding:10px 14px;background:#fff}
.pn-mode .pm b{font-weight:500;font-size:14px}
.pn-mode .pm span{font-size:12px;opacity:.75;line-height:1.4}
.pn-mode input:checked + .pm{background:var(--jaune);border-color:#163b35}
.pn-mode input:focus-visible + .pm{outline:2px solid #163b35;outline-offset:2px}
.pn-z[hidden],.pn-livp[hidden]{display:none}
.pn-livp{margin:8px 0 0;font-size:14px}
@media (max-width:420px){.f-abo .fa-opts,.pn-mode .pm-o{grid-template-columns:1fr}}
/* le bouton « Menu » flottant couvrait les lignes du panier (Morgane) : pas sur le panier ni le paiement */
body.pg-panier .pas,body.pg-paiement .pas{display:none!important}
body.gs-vu .pas{opacity:0;pointer-events:none;transition:opacity .2s}
.reass-l{margin:14px 0 0;font-size:13px;line-height:1.6;opacity:.85}
.reass-l a{color:inherit}
/* la pastille du panier (07/10/2026, Morgane : elle chevauchait le sac) : dans le coin, petite, detouree de la couleur du bandeau */
header.h2 .hico-n{top:-2px;right:-3px;min-width:16px;height:16px;line-height:16px;font-size:9.5px;padding:0 4px;box-shadow:0 0 0 2px var(--jaune,#fff7cb)}
/* l'offre de lancement a cote du prix (07/10/2026, audit) : l'ancien prix barre, le prix de lancement, la date de fin */
.f-info .prix .px-barre{font-family:'Recoleta',Georgia,serif;font-size:20px;opacity:.55;margin-right:10px;text-decoration:line-through}
.f-info .prix .px-off{display:inline-block;margin-left:10px;font-size:12px;letter-spacing:.06em;background:#e3f1e6;color:#1d6b4a;border-radius:999px;padding:4px 10px;vertical-align:middle;font-weight:500}
.serv-ligne{margin:0;font-size:15px;line-height:1.6}
.serv-ligne a{text-decoration:underline;text-underline-offset:3px}
.f-serv{padding:36px 0 0}
/* « Le prix pour ma commune » : une cible de 44 px sans changer la ligne (07/10/2026, audit) */
.livr-ici .li-b{padding:12px 4px;margin:-12px -4px;min-height:44px;box-sizing:border-box}
.f-ech-n{font-size:13px;line-height:1.5;margin:12px 0 0;padding:10px 12px;border:1px solid rgba(22,59,53,.18);border-radius:10px}
.biocide{font-size:12px;line-height:1.5;opacity:.75;margin:12px 0 0}
.biocide-bas{max-width:46em;margin:4vh auto;text-align:center}
.f-compl{display:block;margin-top:10px;font-weight:500;opacity:1}
.a-prev{margin:16px 0 0;padding:14px 16px;border-radius:14px;background:#f4f8f1;border:1px solid rgba(22,59,53,.12)}
.a-prev-t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;margin:0 0 10px}
.a-prev ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.a-prev li{font-size:13.5px;line-height:1.35;padding:0}
.a-prev li::before{display:none}
.a-prev li b{display:block;font-weight:500}
.a-prev li span{opacity:.75;font-size:12.5px}
.pc-role{display:block;margin:2px 16px 4px;font-size:13.5px;font-weight:500;color:#1d6b4a}
.f-role{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#1d6b4a;margin:0 0 6px;opacity:1}
/* la bande jaune « que choisir » en tete de la boutique (plus de hero, Morgane 10/09) */
.sh-haut{padding-top:calc(61px + 2.5vh);margin-top:0}
.sh-haut h1{font-size:clamp(24px,2.8vw,34px);line-height:1.06;margin:2px 0 14px}
.si-petit{grid-template-columns:repeat(3,1fr)}
.si-petit .si{display:grid;grid-template-columns:96px 1fr;align-items:center}
.si-petit .si-im{aspect-ratio:auto;width:96px;height:100%;min-height:120px}
.si-petit .si-tx{min-width:0}
.si-petit .si-tx{padding:12px 14px}
.si-petit .si-nom{font-size:17px;margin-bottom:3px}
.si-petit .si-compo{font-size:12px;margin-bottom:6px}
.si-petit .si-prix{margin-bottom:4px}
.si-petit .si-prix b{font-size:17px}
.si-petit .si-voir{font-size:10px}
/* 20/09 soir : la case « Vous ne savez pas quoi choisir ? » dans la grille, avec les kits */
.pc.pc-quiz{background:var(--jaune);box-shadow:none;justify-content:center}
.pc-quiz .pq-in{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px}
.pc-quiz .pq-t{font-size:26px;line-height:1.1}
.pc-quiz .pq-p{font-size:14px;line-height:1.55;opacity:.85}
.pc-quiz .cta{margin-top:8px}
.pc-quiz:hover .cta{background:#fff}
.dedans-m{max-width:820px;margin:0 auto;padding:0 24px;box-sizing:border-box}
/* le parcours */
.cq{padding:7vh 0 0;opacity:.35;transition:opacity .4s}
.cq.vu{opacity:1}
.cq h2{font-size:clamp(24px,2.8vw,34px);margin:4px 0 10px}
.cq-aide{margin:0 0 16px;font-size:14px;opacity:.75}
.co-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.co input{position:absolute;opacity:0;pointer-events:none}
.co-in{display:block;background:#fff;border:1.5px solid rgba(22,59,53,.14);border-radius:12px;padding:16px 18px;cursor:pointer;transition:border-color .2s,transform .2s}
.co-in b{display:block;font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:18px;line-height:1.2}
.co-in span{display:block;font-size:13px;opacity:.7;margin-top:4px;line-height:1.45}
.co input:checked+.co-in{border-color:#163b35;background:var(--jaune)}
.co-in:hover{transform:translateY(-2px)}
/* 21/09 : la premiere question se coche a plusieurs, une case le dit */
.co-m .co-in{position:relative;padding-right:46px}
.co-m .co-in::after{content:"";position:absolute;top:16px;right:16px;width:18px;height:18px;border:1.5px solid rgba(22,59,53,.4);border-radius:5px;background:#fff}
.co-m input:checked+.co-in::after{background:#163b35 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff7cb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:#163b35}
.co-m input:focus-visible+.co-in{outline:2px solid #163b35;outline-offset:2px}
.cq-bas{margin-top:20px}
.cq-suite[disabled]{opacity:.35;pointer-events:none}
.cr{margin:9vh 0 0;padding:7vh 0 8vh;background:var(--casse,#fbfaf6)}
/* 20/09 : variante D du labo (choix de Morgane) */
.cr h2{font-size:clamp(26px,3.2vw,40px);margin:4px 0 22px}
.cr-l,.pn-l{list-style:none;margin:0;padding:0}
.cr-av{background:#fff;border-radius:12px;padding:14px 18px;margin:4px 0 14px;box-shadow:0 6px 18px rgba(22,59,53,.06)}
.cr-av-t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin:0 0 8px}
.cr-av label{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 0;cursor:pointer;border-top:1px solid rgba(22,59,53,.08)}
.cr-av label:first-of-type{border-top:0}
.cr-av input{accent-color:#163b35;width:16px;height:16px;margin:0}
.cr-av small{display:block;font-size:13px;opacity:.75}
.cr-l li{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;background:#fff;border-radius:12px;padding:14px 18px;margin-bottom:10px;box-shadow:0 6px 18px rgba(22,59,53,.06)}
.cr-q{display:inline-flex;align-items:center;border:1px solid rgba(22,59,53,.25);border-radius:999px;background:#fff}
.cr-q button{border:none;background:transparent;width:32px;height:32px;font-size:18px;cursor:pointer;color:inherit}
.cr-q output{min-width:22px;text-align:center;font-family:'Recoleta',Georgia,serif;font-size:17px}
.cr-t b{display:block;font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:18px}
.cr-t span{display:block;font-size:13.5px;opacity:.8;line-height:1.5}
.cr-t em{display:block;font-size:12px;font-style:normal;letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-top:3px}
.cr-p{font-family:'Recoleta',Georgia,serif;font-size:18px;white-space:nowrap}
.cr-tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:18px 0 16px}
.cr-tot b{white-space:nowrap}
.cr-p small{display:block;font-size:11.5px;opacity:.7;white-space:nowrap}
.cr-tot b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:34px}
.cr-tot .ttc{font-size:12px;opacity:.65}
body .cr .cta,body .cr a.cta[href]{background:#163b35!important;box-shadow:none}
body .cr .cta .sv{color:#fff7cb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q 6 0 12 4 T 24 4' fill='none' stroke='%23fff7cb' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.cr-tot b{font-size:clamp(34px,4vw,52px)}
.cr-why{background:#fff;border-radius:16px;padding:20px 22px}
.cr .cta.off{opacity:.4;pointer-events:none}
.cr-why{margin-top:32px}
.cr-why h3{font-size:22px;margin:0 0 8px}
.cr-why p{font-size:15px;line-height:1.7;margin:0 0 10px}
.cr-mail{margin-top:26px;background:var(--jaune);border:0;border-radius:16px;padding:24px 26px 20px}
.cr-mail h3{font-size:22px;margin:0 0 6px}
.cr-mail p{font-size:15px;line-height:1.65;margin:0 0 12px;max-width:44em}
.cr-mail .cr-f{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:560px}
.cr-mail .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.cr-mail .cr-f input{flex:1 1 240px;min-width:0;font:400 15px/1.4 'Glacial Indifference','Jost',sans-serif;padding:12px 14px;border:1px solid rgba(22,59,53,.25);border-radius:12px;background:#fbfaf6;color:#163b35}
.cr-mail .cr-f input:focus{outline:2px solid #163b35;outline-offset:1px}
.cr-mail .cr-f .cta{margin:0}
.cr-mail .cr-ok{font-size:16px}
.cr-mail .cr-ok b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:22px;display:block;margin-bottom:4px}
.cr-mail small{display:block;font-size:12px;opacity:.7;margin-top:10px;line-height:1.5}
.cr .cr-prev{margin-top:18px}
/* 20/09 : le « pourquoi » detaille, et la case facultative pour etre prevenu */
.cr-rec{font-family:'Recoleta',Georgia,serif;font-size:clamp(17px,1.7vw,20px);line-height:1.4;margin:0 0 12px}
.cr-l2{margin:0;padding-left:1.1em}
.cr-l2 li{font-size:15px;line-height:1.65;margin:0 0 8px}
.cr-opt{flex:1 1 100%;display:flex;align-items:center;justify-content:flex-start;gap:9px;font-size:14px;margin:8px 0 0;cursor:pointer;white-space:normal}
.cr-opt input{flex:none}
.cr-opt input{accent-color:#163b35;width:16px;height:16px;margin:0}
.pg-boutique .cq .dedans-m,.pg-boutique .cr .dedans-m{max-width:1060px}
.cr-serv{margin-top:18px;background:var(--bleu);border-radius:12px;padding:16px 20px}
.cr-serv p{margin:0;font-size:14.5px;line-height:1.6}
/* 20/09 soir : le kit petit budget, propose sous chaque resultat (Morgane : ok) */
.cr-deb{margin:14px 0 18px;background:#fff;border:1px solid rgba(22,59,53,.14);border-radius:12px;padding:16px 20px}
.cr-deb p{margin:0;font-size:14.5px;line-height:1.6}
.cr-deb a{text-decoration:underline;text-underline-offset:3px}
.cr-deb b[data-prix-compo]{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:18px;margin-left:4px}
/* le panier. 20/09 (Morgane) : sur le modele du panier Carli Paris. Un tableau Produit / Quantite /
   Total sur toute la largeur, une vignette et le rayon par ligne, la corbeille a cote de la
   quantite ; puis, a droite, le sous-total, la jauge vers la livraison offerte et le bouton. */
.pn{margin-top:4vh}
.pn-en{display:grid;grid-template-columns:1fr 200px 120px;gap:18px;padding:0 0 12px;border-bottom:1px solid rgba(22,59,53,.2);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.pn-en span:nth-child(2){text-align:center}
.pn-en span:nth-child(3){text-align:right}
.pn-l li{display:grid;grid-template-columns:96px 1fr 200px 120px;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(22,59,53,.12)}
.pn-im{width:96px;height:96px;border-radius:10px;background:#eeece6 center/cover no-repeat}
.pn-t i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-bottom:4px}
.pn-t b{display:block;font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:19px}
.pn-t span{display:block;font-size:13.5px;opacity:.75;margin-top:2px}
.pn-qc{display:flex;align-items:center;justify-content:center;gap:12px}
.pn-p{font-family:'Recoleta',Georgia,serif;font-size:19px;white-space:nowrap;text-align:right}
.pn-x{border:none;background:transparent;padding:6px;cursor:pointer;color:inherit;opacity:.55;display:inline-flex}
.pn-x:hover{opacity:1}
.pn-bas{margin:26px 0 0 auto;max-width:400px}
.pn-taxes{margin:0 0 14px;font-size:12.5px;opacity:.7;text-align:right}
.pn-jauge{background:#fff;border:1px solid rgba(22,59,53,.12);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.pn-jauge-l{display:flex;align-items:center;gap:10px;font-size:11px;opacity:.85}
.pn-jauge-r{flex:1;height:6px;border-radius:3px;background:rgba(22,59,53,.12);overflow:hidden}
.pn-jauge-r i{display:block;height:100%;width:0;background:#163b35;border-radius:3px;transition:width .4s}
.pn-jauge .pn-franco{margin:10px 0 0}
@media (max-width:760px){.pn-en{display:none}.pn-l li{grid-template-columns:72px 1fr;gap:12px 14px}.pn-im{width:72px;height:72px;grid-row:1/3}
  .pn-qc{justify-content:flex-start;grid-column:2}.pn-p{grid-column:2;text-align:left}.pn-bas{max-width:none}}
.pn-z{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.pn-z select{display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:8px;font:400 14px 'Glacial Indifference','Jost',sans-serif;color:inherit;background:#fff;border:1px solid rgba(22,59,53,.25);border-radius:10px;padding:10px 12px;letter-spacing:0;text-transform:none}
.pn-franco{margin:10px 0 0;font-size:13.5px}
.pn-arr{margin:14px 0 0;padding:10px 14px;background:#fff7cb;border-radius:10px;font-size:14px}
.pn-abo{margin:10px 0 0;padding:12px 14px;border:1px solid rgba(22,59,53,.18);border-radius:10px;font-size:14px;background:#f4f8f1}
.pn-abo-c{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.pn-abo-c input{margin-top:3px;accent-color:#163b35}
.pn-abo small{display:block;opacity:.75;margin-top:2px}
.pn-abo-f{display:block;margin:10px 0 0 26px}
.pn-abo-f[hidden]{display:none}
.pn-abo-f select{margin-left:8px;font:inherit;color:#163b35;border:1px solid rgba(22,59,53,.25);border-radius:10px;padding:7px 10px;background:#fff}
.pn-env{margin:10px 0 0;padding:12px 14px;border:1px solid rgba(22,59,53,.18);border-radius:10px;font-size:14px}
.pn-env-t{margin:0 0 8px}
.pn-env label{display:flex;gap:10px;align-items:flex-start;padding:6px 0;cursor:pointer}
.pn-env input{margin-top:3px;accent-color:#163b35}
.pn-env small{display:block;opacity:.7}
.pn-tots{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:0 0 6px;font-size:15px;align-items:baseline}
.pn-tots dt:first-child,.pn-tots dd:nth-child(2){font-family:'Recoleta',Georgia,serif;font-size:20px}
.pn-tots dd{margin:0;text-align:right}
.pn-tots .tt{font-family:'Recoleta',Georgia,serif;font-size:24px;padding-top:8px;border-top:1px solid rgba(22,59,53,.2)}
.pn-bas .pn-z{margin:0 0 12px}
.pn-bas .pn-code{margin:0 0 16px}
.pn-code{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.pn-code input{flex:1;min-width:160px;max-width:260px;border:1px solid rgba(22,59,53,.3);border-radius:8px;padding:9px 12px;font:inherit;text-transform:uppercase}
.pn-code button{border:1px solid rgba(22,59,53,.3);background:#fff;border-radius:8px;padding:9px 14px;font:500 11px 'Glacial Indifference','Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:inherit}
.pn-credit{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:0 0 14px;cursor:pointer}
.pn-credit[hidden]{display:none}
.pn-credit input{margin-top:3px}
.pn-code-msg{font-size:13px;width:100%}
.pn-code-msg.err{color:#b3261e}
.pn-code-msg.ok{color:#2f6b3d}
.f-dispo{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-left:10px;opacity:.75}
.f-dispo[data-etat=epuise]{color:#b3261e;opacity:1}
.f-dispo[data-etat=faible]{color:#a96b00;opacity:1}
[data-ajout].off{opacity:.45;pointer-events:none}
.pn-cgv{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;margin:0 0 16px}
.pn-cgv input{margin-top:3px;accent-color:#163b35}
.pn-bas .cta{width:100%}
.pn-err{margin:12px 0 0;font-size:13.5px;color:#8a2b1c}
.pn-note{margin:14px 0 0;font-size:12.5px;line-height:1.6;opacity:.8}
.pn-vide{text-align:center;padding:8vh 24px 4vh}
.pn-vide p{font-size:17px;margin:0 0 18px}
.pn-vide .cta{width:auto;margin:0 auto}
.pn-vide .cta + .st-sep{margin-left:20px}
@media (max-width:640px){.pn-vide .cta + .st-sep{display:block;margin:16px 0 0}}
.pn-vide .st-sep{display:inline-block;margin-top:16px}
.pn-suite{margin:0 0 14px;font-size:13px;text-align:right}
.pn-suite a{text-decoration:underline;text-underline-offset:3px}
/* « avec, si vous voulez » sur la fiche */
.f-plus{margin-top:18px}
.f-plus .ck{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin:0 0 8px}
.f-plus label{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid rgba(22,59,53,.14);border-radius:10px;margin-bottom:8px;cursor:pointer;background:#fff}
.f-plus label:has(input:checked){border-color:#163b35;background:var(--jaune)}
.f-req label:has(input:checked){background:#fff;border-color:rgba(22,59,53,.5)}
.fp-av{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 12px;border:1px dashed rgba(22,59,53,.3);border-radius:10px;margin-bottom:8px;opacity:.85}
.fp-n{font-size:12.5px;opacity:.7;margin:2px 0 0;line-height:1.5}
.f-plus input{accent-color:#163b35;width:16px;height:16px;margin:0}
.fp-t b{display:block;font-size:14.5px;font-weight:500}
.fp-t span{display:block;font-size:12.5px;opacity:.7;line-height:1.4}
.fp-p{font-family:'Recoleta',Georgia,serif;font-size:16px;white-space:nowrap}
/* dans le panier : ce qui va avec */
.preco-off{background:var(--jaune);border-radius:10px;padding:12px 16px;margin:0 0 14px}
.pn-av{margin-top:22px;background:var(--jaune);border-radius:12px;padding:16px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pn-av[hidden]{display:none}
/* display:flex gagnait sur l'attribut hidden : le bloc jaune s'affichait vide (corrigé le 15/09/2026) */
.pn-av p{margin:0;font-size:14.5px;line-height:1.55;flex:1;min-width:240px}
.pn-av .cta{background:#fff;flex:none;border:none;border-radius:12px;padding:11px 20px 7px;font:500 11px/1 'Glacial Indifference','Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#163b35;cursor:pointer;box-shadow:0 4px 14px rgba(13,36,32,.12)}
.pn-plus{margin-top:26px}
.pn-plus h2{font-size:22px;margin:0 0 12px}
.pn-plus-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pn-plus-g div{background:#fff;border:1px solid rgba(22,59,53,.12);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.pn-plus-g b{font-family:'Recoleta',Georgia,serif;font-weight:400;font-size:17px}
.pn-plus-g span{font-size:13px;opacity:.75;line-height:1.45;flex:1}
.pn-plus-g button{align-self:flex-start;font:500 10.5px 'Glacial Indifference','Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;background:var(--jaune);border:1px solid rgba(22,59,53,.25)!important;border:none;border-radius:999px;padding:8px 14px;cursor:pointer;color:inherit}
@media (max-width:820px){.pn-plus-g{grid-template-columns:1fr}}
.preco-x{background:#163b35;color:#fff7cb;border:1px solid #163b35;border-radius:16px;padding:26px 30px 22px}
.preco-x .sh-gt,.preco-x h2,.preco-x p{color:#fff7cb}
.preco-x a{color:inherit}
.preco-x .preco-off{color:#163b35}
.preco-x h2{font-size:clamp(22px,2.4vw,30px);margin:4px 0 12px}
.preco-x p{font-size:15px;line-height:1.7;margin:0 0 10px}
@media (max-width:820px){
  .pc-quiz .pq-in{padding:22px 18px}.pc-quiz .pq-t{font-size:22px}
  .si-petit{grid-template-columns:1fr}
  .co-grille{grid-template-columns:1fr}
  .cr-l li{grid-template-columns:auto 1fr}.cr-p{grid-column:2}
}
/* ================= aide : FAQ + contact (14/09/2026) ================= */
/* 20/09 (Morgane : « hero puis bande blanche puis FAQ jaune... deux encadres pas de la meme largeur »).
   La FAQ est un cadre jaune a la largeur des autres cadres (110/1060), colle sous le heros ; les
   videos et le renvoi au contact s'alignent dessus (b-wrap sans retrait, cadre a margin:0 40px). */
.faq-b{background:none;padding:0;margin-top:44px}
.faq-b .b-wrap{padding:0}
.faq-b .faq-th{background:var(--jaunepale,#fdf7d9);border-radius:18px;padding:44px 40px 40px;margin:0 40px}
/* la page aide respire : les sections sont franchement separees (Morgane 14/09) */
.pg-aide .b-hero{padding-bottom:0}
.pg-aide #contact{padding:11vh 0 0}
.pg-aide #contact .contact3{margin-top:5vh;margin-bottom:2vh}
.pg-aide #contact+.b-sec{padding-top:11vh}
.pg-aide h2.bt{margin-bottom:6px}
.faq-th{display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px;align-items:start}
.faq-b .faq-th{grid-template-columns:repeat(2,1fr);gap:26px 48px}
/* 20/09 : quatre groupes, deux par ligne */
.faq-th h3{font-size:22px;font-weight:600;margin:0 0 12px;font-family:'Recoleta',Georgia,serif}
.faq-th h3 span{display:inline-block;color:#163b35;padding:0 0 8px;border-bottom:2px solid #163b35}
.faq-th details{border-top:1px solid rgba(22,59,53,.22)}
.faq-th summary{font-family:'Recoleta',Georgia,serif;font-size:17px;padding:12px 24px 12px 0;cursor:pointer;list-style:none;position:relative}
.faq-th summary::-webkit-details-marker{display:none}
.faq-th summary:after{content:"+";position:absolute;right:0;top:10px;font-size:18px;opacity:.6}
.faq-th details[open] summary:after{content:"\2212"}
.faq-th details[open] summary{font-weight:600}
.faq-th .rep-f{font-size:14.5px;line-height:1.65;margin:0 0 14px;opacity:.9}
.ct-sous{margin:0 0 6px;font-size:15px}
.contact3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}
.ct{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px;color:#163b35;text-decoration:none}
.ct .ico{display:flex;width:76px;height:76px;padding:22px;box-sizing:border-box;border-radius:50%;background:var(--jaune);color:#163b35;margin:0 0 6px;transition:transform .25s,background .25s}
.ct:hover .ico{transform:scale(1.08);background:var(--bleu)}
.ct-v{font-size:19px;line-height:1.2;word-break:break-word;font-family:'Recoleta',Georgia,serif}
.ct .ct-b{display:inline-flex;margin-top:2px;padding:4px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.ct .ct-b .sv{display:inline-block;padding:2px 2px 9px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q 6 0 12 4 T 24 4' fill='none' stroke='%23163b35' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 100%/22px 7px}
.ct:hover .ct-b .sv{animation:vague-file .9s linear infinite}
@media (max-width:900px){.faq-th{grid-template-columns:1fr;gap:22px}.contact3{grid-template-columns:1fr;gap:10px}
  .faq-b .faq-th{grid-template-columns:1fr;gap:22px;margin:0;padding:26px 18px 22px}.faq-b .b-wrap{padding:0 20px}}
.f-qr .faq-1{grid-template-columns:1fr;max-width:46em}
.f-qr h2.bt{margin-bottom:10px}
.f-qr .faq-th details:last-child{border-bottom:1px solid rgba(22,59,53,.22)}
.f-qr .qr-plus{margin:16px 0 0;font-size:14px;opacity:.85}
/* P1 : la phrase qui remplace « Prix a venir » et le bouton gris */
.sans-px{margin:8px 0 0;font-size:13.5px;line-height:1.55;max-width:34em;background:var(--jaune);
  border-radius:10px;padding:9px 14px;display:block}
.sans-px[hidden]{display:none}
.pc .sans-px,.si .sans-px{background:none;padding:0;margin:0 16px 10px;font-size:11.5px;opacity:.8}
.cr-tot + .sans-px{margin-bottom:14px}
/* T9 / P21 (16/09/2026) : les liens dans les paragraphes et les etiquettes de la boutique se
   voient (« conditions generales », « Quatorze jours », « ecrivez-nous », « Mot de passe oublie ? »
   avaient la couleur du texte et aucun soulignement). */
.pg-boutique main p a,.pg-boutique main label a,.pg-boutique main li a,.pg-boutique main dd a,
.pg-boutique main .rep-f a,.pg-boutique main small a{text-decoration:underline;text-underline-offset:3px}
.pg-boutique main .cta,.pg-boutique main .as,.pg-boutique main .pc,.pg-boutique main .si,
.pg-boutique main .snav a,.pg-boutique main .ct{text-decoration:none}
/* T7 : le depliant des trente-quatre communes (panier, page livraison) */
.zc{margin:10px 0 0;font-size:13.5px}
.zc summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:8px 0;list-style:none}
.zc summary::-webkit-details-marker{display:none}
.zc summary::before{content:"+ ";font-family:'Jost',sans-serif}
.zc[open] summary::before{content:"− "}
.zc-l{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px}
.zc-l li b{display:block;font-weight:600;font-size:13.5px}
.zc-l li span{line-height:1.5;opacity:.85}
.zc-r{margin:10px 0 0;opacity:.85;line-height:1.5}
/* le rappel du heros (Vincent, 16/09) : « Dimwazel · La boutique », comme « Dimwazel · Le service » */
.sh-tete-b .lx-ou{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin:0 0 12px;color:#163b35}
/* les sections de la fiche se distinguent (Vincent, 16/09) : fonds alternes creme / jaune pale /
   creme / blanc / creme, une etiquette au-dessus de chaque titre, un filet entre « Pour la faire
   fonctionner » et « Pour aller plus loin ». Sobre sur ecran, la meme logique sur telephone. */
.f-eti{margin:0 0 8px}
.f-eti-tel{display:none}
/* 20/09 (Morgane) : « Etre prevenu » en vert nuit, seul bouton de la ligne d'action, pour qu'il
   ressorte. Meme traitement que le bouton du resultat de la composition (variante D). */
/* 20/09 (Morgane) : « tout ce qui est relatif aux premieres bornes doit etre en vert fonce » : le
   bouton de la fiche, celui du bloc « Les premieres bornes arrivent », ceux des kits, du resultat
   et du panier vide. Une seule classe, .cta-nuit. */
body .cta.cta-nuit,body.bm-a .cta.cta-nuit{background:#163b35!important;box-shadow:none;border-color:#163b35}
body .cta.cta-nuit .sv,body.bm-a .cta.cta-nuit .sv{color:#fff7cb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q 6 0 12 4 T 24 4' fill='none' stroke='%23fff7cb' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.f-qr{background:none;padding:0;margin-top:44px}
/* 20/09 (Morgane) : l'encadre des questions peignait la colonne entiere (1140 px) alors que le
   bloc service et le bloc precommande peignent un cadre en retrait de 40 px (1060 px) : d'un bloc
   a l'autre, la largeur changeait. Tous les encadres partent maintenant du meme bord. */
.f-qr .b-wrap{background:none;padding:0}
.f-qr .b-wrap>*{max-width:none}
.f-qr .qr-cadre{background:var(--jaunepale,#fdf7d9);border-radius:18px;padding:44px 40px 40px;margin:0 40px}
.f-qr .faq-1{max-width:none}
.f-qr h2.bt{margin-bottom:14px}
.f-serv{padding:40px 0 0}
.f-serv .serv-l{margin-top:0}
.f-serv .note-r{margin-top:18px}
.f-assoc[hidden]{display:none}
.f-assoc{background:#fff;padding:52px 0 48px;margin-top:44px;border-top:1px solid rgba(22,59,53,.08);border-bottom:1px solid rgba(22,59,53,.08)}
.f-assoc .as{background:var(--casse,#fbfaf6)}
.f-assoc h2.bt{margin-bottom:16px}
.f-assoc h2.bt.bt-2{margin-top:0}
.f-assoc .as-req:not([hidden]) + .as-plus{margin-top:40px;padding-top:36px;border-top:1px solid rgba(22,59,53,.14)}
/* en mode attente, le bloc « Precommande et paiement » est cache : « Bientot disponible » retrouve
   sa marge apres le bloc bleu du service (Vincent, 16/09 : ils etaient colles) */
html[data-mode="attente"] .preco-x + .alerte-x{margin-top:28px}
@media (max-width:900px){
  .f-eti-tel{display:block;margin:6px 0 4px}
  .f-qr{margin-top:32px}
  .f-qr .b-wrap{padding:30px 18px 26px;border-radius:14px}
  .f-serv{padding:32px 0 4px}
  .f-assoc{padding:36px 0 32px;margin-top:32px}
  .f-assoc .as-req:not([hidden]) + .as-plus{margin-top:32px;padding-top:28px}
}
/* ===== heros de la boutique (17/09, variante A) ; 07/10/2026 (audit) : un demi-ecran, l'offre sous le slogan ===== */
.sh-tete.sh-tete-b{padding:0;text-align:center}
.bh{position:relative;overflow:hidden;min-height:min(56vh,520px);display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(96px + 3vh) 24px 6vh}
.bh-off{margin:14px auto 0;font-size:15px;line-height:1.5;background:#163b35;color:#fff7cb;border-radius:999px;padding:8px 16px;max-width:100%;box-sizing:border-box}
.bh-off[hidden]{display:none}
.bh-nuee{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.bh-lib{position:absolute;top:0;left:0;width:96px;height:auto;z-index:6;overflow:visible;opacity:0;color:#6fa3c4;pointer-events:none;will-change:transform,opacity}
.bh-lib .a1{animation:bhb1 400ms ease-in-out infinite alternate}
.bh-lib .a2{animation:bhb2 400ms ease-in-out infinite alternate 40ms}
.bh-lib.pose .a1,.bh-lib.pose .a2{animation:none}
@keyframes bhb1{from{transform:translate(451px,304px) scale(1,1) translate(-451px,-304px)}to{transform:translate(451px,304px) scale(1,.52) translate(-451px,-304px)}}
@keyframes bhb2{from{transform:translate(451px,304px) scale(1,1) translate(-451px,-304px)}to{transform:translate(451px,304px) scale(1,.66) translate(-451px,-304px)}}
@media (prefers-reduced-motion: reduce){.bh-lib{display:none}}
.bh-in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;max-width:1000px}
.bh-logo{width:min(34vw,460px);color:var(--bleu,#aacde2);margin:0 0 4vh}
/* 07/10/2026 : le bleu de la charte, pas un bleu a part */
.bh-logo svg{width:100%;height:auto;display:block}
.sh-tete-b .bh h1{font-size:clamp(30px,3.4vw,46px);line-height:1.08;margin:0 0 12px}
.sh-tete-b .bh .sh-chapo{margin:0 auto;font-size:16px}
.sh-tete-b .bh .sh-actions{justify-content:center;margin-top:26px}
.sh-calc-r{font-size:12.5px;opacity:.75;margin:2px 0 0;line-height:1.45}
.sh-calc-r:empty{display:none}
.sh-calc-ra{margin:-4px 0 10px}
/* 17/10/2026 (Morgane) : le rythme colle a son montant */
@media (max-width:900px){.bh{min-height:0;padding:calc(96px + 3vh) 20px 6vh}.bh-logo{width:min(60vw,280px);margin-bottom:3vh}.bh-lib{width:62px}.bh-off{font-size:13.5px;padding:8px 14px}}
/* les deux portes et les trois kits mis en avant (06/10/2026, soir) */
.sh-portes{padding:6vh 24px 2vh}
.pt-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pt{display:flex;flex-direction:column;gap:6px;padding:26px 26px 24px;border-radius:18px;background:var(--jaune);color:#163b35;text-decoration:none;border:1px solid rgba(22,59,53,.12)}
.pt-b{background:#fff}
.pt-q{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.pt b{font-size:clamp(24px,2.4vw,32px);font-weight:400;line-height:1.15}
.pt-go{font-size:14px;opacity:.85}
.pt:hover b{text-decoration:underline;text-underline-offset:4px}
.kv-t{font-size:clamp(24px,2.4vw,32px);margin:6vh 0 18px}
.kv-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kv{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(22,59,53,.12);color:#163b35;text-decoration:none}
.kv-im{aspect-ratio:4/3;background:#eeece6 center/cover no-repeat}
.kv-tx{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.kv-tx b.ins{font-size:20px;font-weight:400}
.kv-tx>span{font-size:14px;opacity:.8;line-height:1.45}
.kv-px b{font-family:'Recoleta',Georgia,serif;font-size:18px;font-weight:400}
@media (max-width:900px){.pt-2,.kv-3{grid-template-columns:1fr}.pt{padding:20px}}