/* ============================================================
   KingSalt - Feuille de style du site
   Charte : blanc dominant, noir pour la structure,
   l'or uniquement en texture et uniquement sur le détail.
   Typographie : Jost, Black pour les titres, Medium pour les textes.
   ============================================================ */

:root{
  --gold:#C8A84B;   /* l'or valide le 21/07, a plat : Kamal a banni
                     les degrades et les reflets */
  --ink:#0D0D0D; --ink-2:#3A3A3A;
  --paper:#FFFFFF; --grey:#8C8C8C; --line:#EAEAEA; --wash:#F7F7F6;
  --ok:#2E9E6B;
  --f:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pad:clamp(20px,5vw,64px);
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--f);font-weight:500;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
h1,h2,h3{font-weight:900;letter-spacing:-0.025em;line-height:1.06;text-transform:uppercase;}
a{color:inherit;}
img{max-width:100%;}

/* ---------- La texture or ---------- */
.gold-tex{
  background:var(--gold);
}
.gold-txt{ color:var(--gold); }

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}
.wrap-s{max-width:820px;margin:0 auto;padding:0 var(--pad);}

/* ---------- Navigation ---------- */
nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
nav .in{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px;}
nav .logo img{height:19px;width:auto;display:block;}
nav ul{display:flex;gap:28px;list-style:none;}
nav ul a{font-size:13px;color:var(--ink-2);text-decoration:none;transition:.15s;}
nav ul a:hover{color:var(--ink);}
nav .tel{font-size:13px;color:var(--ink-2);text-decoration:none;white-space:nowrap;}

/* ---------- Sélecteur de langue ----------
   Trois langues, dont deux officielles en Belgique. Le dépôt est en
   Flandre et près de la moitié des communes livrées sont
   néerlandophones : ce sélecteur n'est pas un ornement. */
.langues{position:relative;flex:0 0 auto;}

/* Le bouton reste volontairement discret : c'est un réglage, pas une
   invitation. Il ne doit pas concurrencer le bouton Commander. */
.lg-bt{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:1px solid transparent;border-radius:100px;
  font-family:var(--f);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--ink-2);padding:6px 9px 6px 10px;cursor:pointer;
  transition:color .16s,background .16s,border-color .16s;
}
.lg-bt:hover{color:var(--ink);background:var(--wash);}
.langues.ouvert .lg-bt{color:var(--ink);background:var(--wash);border-color:var(--line);}
.lg-bt svg{width:14px;height:14px;flex:0 0 auto;}
.lg-bt .lg-chev{
  width:11px;height:11px;opacity:.55;
  transition:transform .24s cubic-bezier(.22,1,.36,1);
}
.langues.ouvert .lg-bt .lg-chev{transform:rotate(180deg);}

.lg-menu{
  position:absolute;top:calc(100% + 9px);right:0;z-index:70;
  display:block;width:max-content;min-width:186px;margin:0;padding:5px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 16px 40px rgba(20,20,18,.13),0 3px 9px rgba(20,20,18,.06);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-7px) scale(.96);transform-origin:top right;
  transition:opacity .16s ease,transform .26s cubic-bezier(.22,1,.36,1),visibility .26s;
}
.langues.ouvert .lg-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
.lg-menu a{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:10px;text-decoration:none;
  font-size:13px;line-height:1.4;color:var(--ink-2);white-space:nowrap;
}
.lg-menu a:hover{background:var(--wash);color:var(--ink);}
.lg-menu a b{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--grey);
  min-width:20px;transition:color .14s;
}
.lg-menu a:hover b{color:var(--ink-2);}
.lg-menu a.on{color:var(--ink);font-weight:600;}
.lg-menu a.on b{color:var(--ink);}
.lg-menu .lg-ok{width:14px;height:14px;margin-left:auto;color:var(--gold);}

/* Les entrées arrivent en léger décalage : le menu se déplie au lieu
   d'apparaître d'un bloc. */
.lg-menu a{
  opacity:0;transform:translateY(-5px);
  transition:opacity .18s ease,transform .28s cubic-bezier(.22,1,.36,1),
             background .14s,color .14s;
}
.langues.ouvert .lg-menu a{opacity:1;transform:none;}
.langues.ouvert .lg-menu a:nth-child(1){transition-delay:.04s;}
.langues.ouvert .lg-menu a:nth-child(2){transition-delay:.08s;}
.langues.ouvert .lg-menu a:nth-child(3){transition-delay:.12s;}

@media (prefers-reduced-motion:reduce){
  .lg-menu,.lg-menu a,.lg-bt .lg-chev{transition-duration:.01ms;}
  .lg-menu,.lg-menu a{transform:none;}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;text-decoration:none;border:0;border-radius:100px;
  font-family:var(--f);font-size:13.5px;font-weight:600;padding:12px 26px;
  cursor:pointer;transition:.18s;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
.btn.sm{font-size:12.5px;padding:9px 19px;}
.btn.lg{font-size:14.5px;padding:13px 28px;}
.btn.ghost{background:none;color:var(--ink);border:1px solid #D9D9D9;}
.btn.ghost:hover{border-color:var(--ink);}
.btn.block{width:100%;}

/* ---------- Bande de réassurance ----------
   Placée juste sous le premier écran. Quatre faits, pas de promesse :
   c'est le moment où le visiteur décide s'il a affaire à un vrai
   commerçant ou à une vitrine. */
.rassure{padding:clamp(30px,3.6vw,44px) 0;border-bottom:1px solid var(--line);}
.r-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);}
.r-item .t{
  font-size:14px;font-weight:700;letter-spacing:-0.01em;padding-top:13px;
  border-top:2px solid transparent;
  border:2px solid var(--gold);
  position:relative;
}
/* Le filet doré, en repli si la texture ne charge pas */
.r-item{position:relative;padding-top:13px;}
.r-item::before{
  content:"";position:absolute;top:0;left:0;width:28px;height:2px;border-radius:2px;
  background:var(--gold);
}
.r-item .t{border:0;padding-top:0;margin-bottom:7px;}
.r-item .d{font-size:13px;color:var(--ink-2);line-height:1.6;}

/* ---------- Blocs de section ---------- */
section{padding:clamp(48px,6.6vw,82px) 0;}
.kick{
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);margin-bottom:14px;
}
.lead-h{text-align:center;max-width:60ch;margin:0 auto clamp(36px,5vw,56px);}
.lead-h h2{font-size:clamp(27px,4.2vw,48px);}
.lead-h p{font-size:clamp(14px,1.5vw,17px);color:var(--ink-2);margin-top:15px;}

/* ---------- Hero plein cadre ----------
   La photo occupe tout le premier ecran, le texte passe par-dessus.
   Le voile n'est pas un effet : il garantit le contraste du texte
   blanc quelle que soit la photo que Kamal nous enverra. */
/* Le hero occupe l'ecran entier moins la barre de navigation. L'unite
   svh tient compte de la barre d'adresse mobile, vh sert de repli. */
.hero-plein{
  position:relative;display:flex;align-items:center;justify-content:flex-start;
  min-height:calc(100vh - 62px);
  min-height:calc(100svh - 62px);
  overflow:hidden;text-align:left;
}
.hero-plein > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Le voile s'appuie à gauche, là où se pose le texte, et s'efface vers
   la droite pour laisser la photo respirer. Centrer le bloc de texte
   sur l'image le tassait au milieu sans rien ancrer. */
.hero-plein .voile{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.52) 42%,rgba(0,0,0,.12) 100%),
             linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.34));
}
.hero-plein .in{position:relative;z-index:2;width:100%;padding:clamp(40px,6vw,72px) 0;}
/* Le bloc de texte garde une largeur de colonne : au-delà, les lignes
   s'étirent et le titre perd sa force. */
.hero-plein .in .wrap > *{max-width:min(660px,100%);}
/* Interligne desserré : en Jost Black, les capitales accentuées montent
   haut et la virgule d'une ligne vient mordre l'accent de la suivante. */
.hero-plein h1{font-size:clamp(31px,5.4vw,60px);margin:0;color:#fff;line-height:1.16;}
.hero-plein p.sub{font-size:clamp(15px,1.5vw,18.5px);color:#E4E4E0;max-width:46ch;margin:18px 0 0;line-height:1.5;}
.hero-plein .cta{display:flex;gap:10px;justify-content:flex-start;align-items:center;margin-top:26px;flex-wrap:wrap;}
/* La ligne qui nomme le produit, au-dessus du titre. Elle répond à la
   première question du visiteur : qu'est-ce qui se vend ici. */
.hero-plein .quoi{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#E8E8E4;margin-bottom:18px;
}
.hero-plein .meta{font-size:13px;color:#D8D8D4;margin-top:20px;}
.hero-plein .meta b{color:#fff;font-weight:600;}
.btn.blanc{background:#fff;color:var(--ink);}
.btn.blanc:hover{background:#EDEDEA;}
.lien-sec.clair{color:#fff;}

/* ---------- Hero blanc, sans photo ----------
   Le premier écran redevient blanc : le texte annonce, la bande de
   réassurance juste dessous montre. Hauteur naturelle, pas de plein
   écran vide. */
.hero-blanc{
  background:#fff;text-align:left;
  padding:clamp(64px,9vw,128px) 0 clamp(46px,6.5vw,84px);
  border-bottom:1px solid #F0EFEC;
}
.hero-blanc .wrap > *{max-width:min(720px,100%);}
.hero-blanc .quoi{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:18px;
}
.hero-blanc h1{font-size:clamp(31px,5.4vw,60px);margin:0;line-height:1.16;}
.hero-blanc p.sub{font-size:clamp(15px,1.5vw,18.5px);color:var(--ink-2);max-width:46ch;margin:18px 0 0;line-height:1.5;}
.hero-blanc .cta{display:flex;gap:10px;justify-content:flex-start;align-items:center;margin-top:26px;flex-wrap:wrap;}
.hero-blanc .meta{font-size:13px;color:var(--ink-2);margin-top:20px;}
.hero-blanc .meta b{color:var(--ink);font-weight:600;}

/* ---------- Hero classique, pages interieures ----------
   Composition tenue serree : le texte annonce, le visuel montre. */
.hero{padding:clamp(34px,4.6vw,58px) 0 clamp(26px,3.4vw,40px);text-align:center;}
.hero h1{font-size:clamp(30px,5.2vw,58px);max-width:15ch;margin:0 auto;line-height:1.02;}
.hero p.sub{font-size:clamp(15px,1.45vw,18.5px);color:var(--ink-2);max-width:58ch;margin:15px auto 0;line-height:1.5;}
.hero .cta{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:23px;flex-wrap:wrap;}
.hero .meta{font-size:12.5px;color:var(--grey);margin-top:14px;}

/* Le lien secondaire s'efface derriere l'action principale : un
   bouton, puis un lien qui ne crie pas. */
.lien-sec{
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  font-size:14.5px;font-weight:600;color:var(--ink);padding:11px 6px;
}
.lien-sec .fl{transition:transform .22s cubic-bezier(.22,.61,.36,1);}
.lien-sec:hover .fl{transform:translateX(3px);}

.shot{
  margin-top:clamp(24px,3vw,38px);aspect-ratio:1800/700;border-radius:18px;
  background:var(--wash);border:1px solid var(--line);overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.shot img{width:100%;height:100%;object-fit:cover;display:block;}
.shot .ph{font-size:11.5px;color:#B4B4B4;letter-spacing:.1em;text-transform:uppercase;max-width:34ch;line-height:1.75;padding:24px;}

/* Visuel d'appui, plus discret que le hero */
.visuel{border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/2;}
.visuel img{width:100%;height:100%;object-fit:cover;display:block;}
.duo-txt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px);align-items:center;}
.duo-txt h2{font-size:clamp(27px,3.8vw,44px);}

/* ---------- Trois étapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);}
.step .n{font-size:13px;font-weight:900;letter-spacing:.1em;margin-bottom:13px;}
.step h3{font-size:clamp(17px,2vw,21px);margin-bottom:8px;}
.step p{font-size:14px;color:var(--ink-2);}

/* ---------- Tarifs ---------- */
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;align-items:stretch;}
.tier{
  border:1px solid var(--line);border-radius:14px;padding:26px 18px 20px;
  display:flex;flex-direction:column;text-align:center;background:var(--paper);
  position:relative;transition:.2s;
}
.tier:hover{border-color:#CFCFCF;}
.tier.best{border-color:var(--ink);box-shadow:0 14px 40px rgba(0,0,0,.09);}
.tier .badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#241C0B;padding:4px 13px;border-radius:100px;white-space:nowrap;
}
.tier .q{font-size:12.5px;color:var(--grey);letter-spacing:.06em;text-transform:uppercase;}
.tier .p{font-weight:900;font-size:clamp(25px,3.1vw,34px);letter-spacing:-0.03em;margin:8px 0 2px;}
.tier .u{font-size:12px;color:var(--grey);}
.tier .save{font-size:11.5px;font-weight:700;margin-top:7px;}
/* Le palier a l'unite n'a rien a economiser : la mention garde sa
   place pour que les listes des quatre cartes partent du meme trait. */
.tier .save.neutre{color:var(--grey);font-weight:500;}
.tier ul{
  list-style:none;text-align:left;font-size:12px;color:var(--ink-2);
  margin:15px 0 18px;padding-top:14px;border-top:1px solid var(--line);flex:1;
}
.tier li{padding:3.5px 0 3.5px 17px;position:relative;line-height:1.45;}
.tier li::before{
  content:"";position:absolute;left:0;top:9px;width:8px;height:2px;border-radius:2px;
  background:var(--gold);
}
.tier li.plus{font-weight:600;color:var(--ink);}
.tiers.quatre{grid-template-columns:repeat(4,1fr);}
.note-tva{text-align:center;font-size:12.5px;color:var(--grey);margin-top:24px;line-height:1.7;}

/* ---------- Le code postal, sous la grille ----------
   Une seule question posee ici : est-ce que la livraison est offerte
   chez moi. Le calcul complet reste sur la page de commande. */
.zone-cp{
  display:grid;grid-template-columns:auto minmax(0,140px) minmax(0,1fr);
  gap:16px;align-items:center;
  border:1px solid var(--line);border-radius:100px;
  padding:14px 26px;margin-top:clamp(26px,3.4vw,38px);background:var(--paper);
}
.zone-cp label{
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grey);white-space:nowrap;
}
.zone-cp input{
  width:100%;font-family:var(--f);font-size:15.5px;font-weight:600;color:var(--ink);
  border:1px solid #DEDEDE;border-radius:100px;padding:11px 18px;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.zone-cp input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(13,13,13,.06);}
.zone-cp .r{font-size:13.5px;color:var(--ink-2);line-height:1.55;}
.zone-cp .r b{color:var(--ink);font-weight:600;}
.zone-cp .r.ok b:first-child{color:var(--ok);}

/* ---------- Arguments ---------- */
.args{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,42px);}
.arg{display:flex;gap:15px;align-items:flex-start;}
.arg .bar{width:2px;flex:0 0 auto;align-self:stretch;border-radius:2px;}
.arg h3{font-size:15.5px;margin-bottom:5px;}
.arg p{font-size:14px;color:var(--ink-2);}

/* ---------- Bandeau sombre ---------- */
.dark{background:var(--ink);color:#fff;border-radius:20px;padding:clamp(34px,5vw,60px);text-align:center;}
.dark h2{font-size:clamp(24px,3.5vw,40px);color:#fff;}
.dark p{font-size:15px;color:#B9B9B9;max-width:52ch;margin:15px auto 0;}
.dark .btn{background:#fff;color:var(--ink);margin-top:26px;}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 0;font-size:15.5px;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:19px;font-weight:400;color:var(--grey);flex:0 0 auto;}
.faq details[open] summary::after{content:"−";}
.faq p{font-size:14.5px;color:var(--ink-2);padding:0 0 20px;max-width:66ch;}

/* ---------- FAQ sur deux colonnes ----------
   Le titre tient a gauche pendant qu'on parcourt les questions :
   la page gagne en hauteur ce qu'elle perd en defilement. */
.faq-duo{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4.5vw,64px);align-items:start;}
.faq-duo .tete-g{position:sticky;top:84px;}
.faq-duo .faq{max-width:none;margin:0;}

/* ---------- Final : deux portes de sortie ----------
   Le particulier commande, l'etablissement demande un devis.
   Deux chemins distincts plutot qu'un seul bouton pour tout le monde. */
.final{padding-top:clamp(50px,7vw,88px);}
.portes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,26px);}
.porte{
  border:1px solid var(--line);border-radius:20px;background:var(--paper);
  padding:clamp(28px,3.4vw,42px);display:flex;flex-direction:column;align-items:flex-start;
}
.porte h2{font-size:clamp(24px,3vw,34px);}
.porte p{font-size:14.5px;color:var(--ink-2);margin:14px 0 24px;max-width:38ch;line-height:1.6;}
/* Les deux appels a l'action se tiennent sur la meme ligne de base,
   pour que les portes se lisent comme deux chemins de meme rang. */
.porte .act{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.porte .lien-sec{font-size:13.5px;color:var(--ink-2);}

/* ---------- Pied de page ----------
   Il porte désormais tout le plan du site : sur un site de plusieurs
   pages, c'est lui qui rend l'ensemble navigable. */
footer{border-top:1px solid var(--line);padding:clamp(40px,5vw,60px) 0 40px;background:var(--wash);}
.f-haut{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,48px);
  padding-bottom:clamp(28px,3.4vw,40px);
}
.f-marque img{height:17px;width:auto;display:block;margin-bottom:14px;}
.f-marque p{font-size:13px;color:var(--ink-2);line-height:1.7;max-width:34ch;margin-bottom:18px;}
.f-col h4{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:14px;
}
.f-col a{display:block;font-size:13px;color:var(--ink-2);text-decoration:none;padding:5px 0;transition:color .15s;}
.f-col a:hover{color:var(--ink);}
.f-bas{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px;font-size:12.5px;color:var(--grey);
}
.f-bas a{color:var(--grey);text-decoration:none;}
.f-bas a:hover{color:var(--ink);}

@media(max-width:860px){
  .f-haut{grid-template-columns:1fr 1fr;gap:32px;}
  .f-marque{grid-column:span 2;}
}
@media(max-width:520px){
  .f-haut{grid-template-columns:1fr;}
  .f-marque{grid-column:span 1;}
}

/* ============================================================
   PAGES INTERNES
   ------------------------------------------------------------
   L'en-tête tient sur deux colonnes : le titre à gauche, des
   repères chiffrés à droite. Un titre seul sur la moitié gauche
   d'un écran de 1500 px ne fait pas une composition, il fait un
   déséquilibre. Les repères remplissent l'espace avec de
   l'information plutôt qu'avec du décor.
   ============================================================ */
.page-tete{
  padding:clamp(38px,5vw,72px) 0 clamp(34px,4.2vw,56px);
  border-bottom:1px solid var(--line);
}
.pt-grille{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:end;
}
.fil{font-size:11.5px;color:var(--grey);margin-bottom:20px;letter-spacing:.02em;}
.fil a{color:var(--grey);text-decoration:none;}
.fil a:hover{color:var(--ink);text-decoration:underline;}
.fil span{margin:0 8px;}
.page-tete h1{font-size:clamp(32px,4.6vw,56px);max-width:15ch;line-height:1.04;}
.page-tete .chapo{
  font-size:clamp(15px,1.6vw,17.5px);color:var(--ink-2);line-height:1.65;
  max-width:48ch;margin-top:18px;
}
.page-tete .cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:26px;}

/* Les repères : trois faits chiffrés, séparés par des filets fins.
   C'est le bloc qui donne son assise à l'en-tête. */
.reperes{border-top:1px solid var(--line);}
.reperes .r{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.reperes .l{font-size:12.5px;color:var(--grey);}
.reperes .v{font-size:clamp(15px,1.7vw,18px);font-weight:700;letter-spacing:-0.02em;text-align:right;}

@media(max-width:900px){
  .pt-grille{grid-template-columns:1fr;gap:34px;align-items:start;}
  .page-tete h1{max-width:none;}
}

/* ---------- Titres de section des pages internes ----------
   Ils doivent passer après le titre de la page, pas rivaliser
   avec lui. C'est ce qui manquait le plus : tout avait le même
   poids, donc plus rien n'en avait. */
.page-tete ~ section .tete-g h2,
.page-tete ~ section .lead-h h2{font-size:clamp(24px,3.1vw,36px);}
.page-tete ~ section .tete-g p,
.page-tete ~ section .lead-h p{font-size:15px;}

/* ---------- Bandeau d'image ----------
   Une respiration entre deux blocs de texte. */
.bandeau{overflow:hidden;}
.bandeau img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;display:block;}

/* ---------- Une phrase, en grand ----------
   Sur une page qui explique, il faut un endroit où l'oeil se pose
   et où une seule idée est affirmée. */
.affirmation{
  text-align:center;max-width:22ch;margin:0 auto;text-wrap:balance;
  font-size:clamp(26px,4vw,46px);font-weight:900;letter-spacing:-0.03em;
  line-height:1.12;text-transform:uppercase;
}
.affirmation + .apres{
  text-align:center;font-size:15.5px;color:var(--ink-2);line-height:1.7;
  max-width:56ch;margin:clamp(22px,2.8vw,32px) auto 0;
}

/* ---------- Étapes numérotées, version éditoriale ----------
   Sans cadre ni carte : le numéro et le filet suffisent à séparer. */
.etapes-num{display:grid;gap:0;margin-top:clamp(30px,4vw,48px);}
.etape-l{
  display:grid;grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);
  gap:clamp(18px,3vw,48px);align-items:start;
  padding:clamp(24px,3vw,36px) 0;border-top:1px solid var(--line);
}
.etape-l:last-child{border-bottom:1px solid var(--line);}
.etape-l .n{
  font-size:12px;font-weight:900;letter-spacing:.16em;color:#C4C4C0;padding-top:5px;
}
.etape-l h3{font-size:clamp(17px,2vw,22px);}
.etape-l p{font-size:14.5px;color:var(--ink-2);line-height:1.7;}

@media(max-width:820px){
  .etape-l{grid-template-columns:auto 1fr;gap:14px 20px;}
  .etape-l p{grid-column:2;}
}

/* ---------- Tableau des communes livrées ----------
   Aucune valeur n'est écrite en dur : distances et suppléments sont
   calculés par zones.js, comme partout ailleurs sur le site. */
.tab-zones{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;}
.tab-zones table{width:100%;border-collapse:collapse;font-size:14px;}
.tab-zones th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);padding:16px 20px;border-bottom:1px solid var(--line);background:var(--wash);
}
.tab-zones th.num,.tab-zones td.num{text-align:right;}
.tab-zones td{padding:14px 20px;border-bottom:1px solid var(--line);color:var(--ink-2);}
.tab-zones tr:last-child td{border-bottom:0;}
.tab-zones tbody tr{transition:background .15s;}
.tab-zones tbody tr:hover{background:var(--wash);}
.tab-zones td b{color:var(--ink);font-weight:600;}
.tab-zones td.cp{color:var(--grey);font-variant-numeric:tabular-nums;}
.tab-zones .num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.tab-zones .offert{color:var(--ok);font-weight:600;}
.tab-zones .sup{color:var(--ink);font-weight:600;}
.tab-note{
  font-size:12.5px;color:var(--grey);line-height:1.7;
  padding:18px 20px;border-top:1px solid var(--line);background:var(--wash);
}

@media(max-width:600px){
  .tab-zones table{font-size:13px;}
  .tab-zones th,.tab-zones td{padding:12px 14px;}
  /* Le code postal double le nom de la commune : sur petit écran on
     garde l'essentiel, la distance et le prix. */
  .tab-zones th:nth-child(2),.tab-zones td:nth-child(2){display:none;}
}

/* ---------- Renvois vers les pages dédiées ----------
   L'accueil résume et oriente, les pages approfondissent. */
.voir-plus{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:clamp(24px,3vw,34px);}
.voir-plus .lien-sec{padding-left:0;font-size:14px;}
.faq-plus{margin-top:26px;}
.faq-plus .lien-sec{padding-left:0;font-size:14px;}

/* ---------- Questions fréquentes, page dédiée ----------
   Classées par thème : sur quinze questions, un accordéon d'un seul
   tenant devient illisible. */
.faq-bloc{margin-bottom:clamp(34px,4.4vw,52px);}
.faq-bloc:last-child{margin-bottom:0;}
.faq-titre{
  font-size:clamp(18px,2.1vw,23px);padding-bottom:14px;margin-bottom:6px;
  border-bottom:2px solid transparent;position:relative;
}
.faq-titre::after{
  content:"";position:absolute;bottom:-1px;left:0;width:42px;height:2px;border-radius:2px;
  background:var(--gold);
}
.faq-bloc .faq{max-width:none;margin:0;}

/* ---------- Page contact ---------- */
.contact-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,44px);align-items:start;}
.c-bloc{padding-bottom:clamp(26px,3vw,36px);margin-bottom:clamp(26px,3vw,36px);border-bottom:1px solid var(--line);}
.c-bloc:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.c-bloc h2{font-size:clamp(19px,2.2vw,25px);margin-bottom:14px;}
.c-bloc p{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin-top:12px;max-width:44ch;}
.c-gros{
  display:inline-block;font-size:clamp(23px,2.8vw,32px);font-weight:900;letter-spacing:-0.03em;
  text-decoration:none;color:var(--ink);transition:opacity .15s;
}
.c-gros:hover{opacity:.7;}
.c-gros.petit{font-size:clamp(16px,1.9vw,21px);letter-spacing:-0.02em;word-break:break-all;}
.c-carte{background:var(--wash);border-radius:20px;padding:clamp(24px,3vw,36px);}
.c-carte h2{font-size:clamp(19px,2.2vw,25px);margin-bottom:18px;}
.c-infos{list-style:none;}
.c-infos li{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2);
}
.c-infos li:last-child{border-bottom:0;}
.c-infos b{color:var(--ink);font-weight:600;text-align:right;}
.c-note{font-size:13.5px;color:var(--ink-2);line-height:1.7;margin-top:16px;}

/* ---------- Conseils ----------
   Un numéro, un titre, une réponse courte, puis le détail. */
.conseils{max-width:860px;margin:0 auto;}
.conseil{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);
  padding-bottom:clamp(32px,4vw,48px);margin-bottom:clamp(32px,4vw,48px);
  border-bottom:1px solid var(--line);
}
.conseil:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}
.conseil .c-num{
  font-size:13px;font-weight:900;letter-spacing:.14em;color:#C8C8C4;padding-top:6px;
}
/* `balance` répartit les mots entre les lignes : sans lui, un titre
   qui se termine par « ? » laisse le point d'interrogation seul. */
.conseil h2{font-size:clamp(20px,2.5vw,29px);max-width:26ch;text-wrap:balance;}
.conseil .c-chapo{
  font-size:clamp(15px,1.6vw,17.5px);color:var(--ink);font-weight:500;
  line-height:1.6;margin:16px 0 14px;
}
.conseil p{font-size:14.5px;color:var(--ink-2);line-height:1.75;}

@media(max-width:820px){
  .contact-duo{grid-template-columns:1fr;}
  .conseil{grid-template-columns:1fr;gap:10px;}
  .conseil .c-num{padding-top:0;}
}

/* ---------- Formulaire de commande ---------- */
.order{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(26px,4vw,52px);align-items:start;}
.field{margin-bottom:17px;}
.field label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f);font-size:15px;font-weight:500;color:var(--ink);
  border:1px solid #DEDEDE;border-radius:10px;padding:13px 15px;background:#fff;
  transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);
}
.field textarea{resize:vertical;min-height:88px;}
.field .hint{font-size:12px;color:var(--grey);margin-top:5px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.summary{
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  background:var(--wash);position:sticky;top:82px;
}
.summary h3{font-size:15px;margin-bottom:16px;}
.summary .ln{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:8px 0;color:var(--ink-2);}
.summary .ln b{color:var(--ink);font-weight:600;}
.summary .tot{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-top:1px solid #DEDEDE;margin-top:12px;padding-top:14px;
}
.summary .tot .lbl{font-size:13px;color:var(--ink-2);}
.summary .tot .val{font-weight:900;font-size:27px;letter-spacing:-0.03em;}
.summary ul{list-style:none;font-size:12.5px;color:var(--ink-2);margin-top:16px;}
.summary li{padding:3.5px 0 3.5px 17px;position:relative;}
.summary li::before{
  content:"";position:absolute;left:0;top:10px;width:8px;height:2px;border-radius:2px;
  background:var(--gold);
}
.pick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:6px;}
.pick label{cursor:pointer;position:relative;display:block;}
/* Le bouton radio couvre son etiquette : invisible mais toujours
   cliquable et accessible au clavier. Sans le confinement au label,
   il heritait de width:100% et debordait hors de l'ecran. */
.pick input{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;margin:0;cursor:pointer;}
.pick input:focus-visible ~ .box{outline:2px solid var(--ink);outline-offset:2px;}
.pick .box{
  display:block;border:1px solid #DEDEDE;border-radius:10px;
  padding:11px 5px;text-align:center;transition:.15s;
}
.pick .box .n{display:block;font-size:14px;font-weight:700;line-height:1.2;}
.pick .box .e{display:block;font-size:11px;color:var(--grey);margin-top:2px;line-height:1.2;}
.pick input:checked ~ .box{border-color:var(--ink);background:var(--ink);}
.pick input:checked ~ .box .n{color:#fff;}
.pick input:checked ~ .box .e{color:#A8A8A8;}
.pick label:hover .box{border-color:#B8B8B8;}

.done{
  text-align:center;padding:clamp(50px,8vw,90px) 0;display:none;
}
.done .ico{
  width:54px;height:54px;border-radius:50%;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#241C0B;
}
.done h2{font-size:clamp(26px,4vw,42px);}
.done p{font-size:16px;color:var(--ink-2);margin:16px auto 26px;max-width:46ch;}

/* ---------- Pages de contenu ---------- */
.doc{padding:clamp(46px,7vw,80px) 0;}
.doc h1{font-size:clamp(30px,4.6vw,48px);margin-bottom:10px;}
.doc .maj{font-size:12.5px;color:var(--grey);margin-bottom:34px;}
.doc h2{font-size:17px;margin:34px 0 10px;}
.doc p,.doc li{font-size:14.5px;color:var(--ink-2);margin-bottom:9px;}
.doc ul{padding-left:19px;}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .order{grid-template-columns:1fr;}
  .summary{position:static;}
}
/* ---------- Menu mobile ---------- */
.burger{display:none;width:38px;height:38px;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0;}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),opacity .18s;}
nav.ouvert .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
nav.ouvert .burger span:nth-child(2){opacity:0;}
nav.ouvert .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media(max-width:860px){
  .steps{grid-template-columns:1fr;gap:28px;}
  .tiers{grid-template-columns:repeat(2,1fr);}
  .args{grid-template-columns:1fr;}
  .burger{display:flex;order:3;}
  nav .in{gap:12px;}
  nav .in > .btn{order:2;margin-left:auto;}
  nav ul{
    order:4;width:100%;flex-direction:column;gap:0;
    max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.22,.61,.36,1);
  }
  nav.ouvert ul{max-height:340px;}
  nav ul li{border-top:1px solid var(--line);}
  nav ul a{display:block;padding:15px 2px;font-size:15px;color:var(--ink);}
  nav .in{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:12px;}
  /* Sur mobile le sélecteur reste dans la barre, à gauche du bouton
     Commander, mais le menu s'ancre au bord droit de l'écran. */
  .langues{order:1;}
  .lg-bt{padding:6px 7px;}
  .lg-bt .lg-cd{display:none;}
  .lg-bt svg{width:16px;height:16px;}
  .lg-menu{min-width:172px;}
}
@media(max-width:560px){
  .tiers{grid-template-columns:1fr;}
  .pick{grid-template-columns:repeat(3,1fr);}
  .row2{grid-template-columns:1fr;}
  nav .tel{display:none;}
}


/* ---------- Apparition au defilement ----------
   Volontairement sobre : une legere montee et un fondu, rien de plus.
   Desactive pour qui a demande a reduire les animations. */
/* Le masquage n'est applique que si le script a pris la main : sans
   JavaScript, ou s'il echoue, tout le contenu reste visible. */
.js-anim .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.js-anim .reveal.vu{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}
@media(max-width:820px){ .duo-txt{grid-template-columns:1fr;} }

/* ---------- Verificateur de zone et de besoin ----------
   Deux questions, une reponse chiffree. C'est un outil, pas un
   ornement : il repond a ce qui bloque avant de commander. */
.outil{
  border:1px solid var(--line);border-radius:20px;padding:clamp(26px,3.6vw,44px);
  background:var(--paper);
}
.o-tete{max-width:54ch;}
.o-tete h2{font-size:clamp(24px,3vw,37px);}
.o-tete p{font-size:14.5px;color:var(--ink-2);margin-top:12px;}
.o-champs{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:14px;margin-top:clamp(24px,3vw,34px);
}
.o-ch label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey);margin-bottom:7px;
}
.o-ch input,.o-ch select{
  width:100%;font-family:var(--f);font-size:15px;font-weight:500;color:var(--ink);
  border:1px solid #DEDEDE;border-radius:11px;padding:13px 15px;background:#fff;
  transition:border-color .15s;
}
.o-ch input:focus,.o-ch select:focus{outline:none;border-color:var(--ink);}

.o-res{margin-top:22px;}
.o-res:empty{display:none;}
.o-carte{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);
  border-top:1px solid var(--line);padding-top:24px;
  animation:oApp .42s cubic-bezier(.22,.61,.36,1);
}
@keyframes oApp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .o-carte{animation:none;} }
.o-bloc .t{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grey);margin-bottom:9px;}
.o-bloc .g{font-size:clamp(21px,2.6vw,27px);font-weight:900;letter-spacing:-0.025em;line-height:1.15;}
.o-bloc .g.oui{color:var(--ok);}
.o-bloc p{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.6;}
.o-bloc .reco{
  display:inline-flex;align-items:center;gap:9px;margin-top:15px;padding:11px 17px;
  border:1px solid var(--ink);border-radius:100px;text-decoration:none;
  font-size:13.5px;font-weight:600;color:var(--ink);transition:.16s;
}
.o-bloc .reco:hover{background:var(--ink);color:#fff;}
.o-bloc .reco b{font-weight:700;}

@media(max-width:820px){
  .o-champs{grid-template-columns:1fr;}
  .o-carte{grid-template-columns:1fr;gap:22px;}
}

/* ============================================================
   MICRO-ANIMATIONS
   Règle suivie : chaque animation sert la lecture ou confirme
   une action. Aucune n'est décorative. Rien qui retarde l'accès
   à l'information, conformément au « ça doit se comprendre en
   5 secondes » demandé au brief.
   Tout est neutralisé si le visiteur a réduit les animations.
   ============================================================ */

/* Le lien de navigation se souligne depuis la gauche */
nav ul a{position:relative;}
nav ul a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
nav ul a:hover::after{transform:scaleX(1);}

/* Retour tactile au clic, sur tous les boutons */
.btn:active{transform:translateY(0) scale(.985);}

/* La carte tarifaire se soulève, celle mise en avant plus franchement */
.tier{transition:transform .26s cubic-bezier(.22,.61,.36,1),
                 border-color .2s,box-shadow .26s;}
.tier:hover{transform:translateY(-4px);box-shadow:0 12px 34px rgba(0,0,0,.07);}
.tier.best:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.12);}

/* La question de la FAQ signale qu'elle s'ouvre */
.faq summary{transition:color .18s;}
.faq summary:hover{color:var(--ink);}
.faq details[open] summary{color:var(--ink);}

/* Le visuel s'agrandit très légèrement au survol : on sent que
   l'image est vivante sans qu'elle bouge vraiment. */
.visuel img,.shot img{transition:transform 1.1s cubic-bezier(.22,.61,.36,1);}
.visuel:hover img{transform:scale(1.028);}

/* Le champ actif du vérificateur se détache du reste */
.o-ch input:focus,.o-ch select:focus{box-shadow:0 0 0 3px rgba(13,13,13,.06);}

/* Le résultat chiffré prend la lumière une fois posé */
.o-bloc .g{transition:color .3s;}

@media (prefers-reduced-motion:reduce){
  nav ul a::after,.btn,.tier,.visuel img,.shot img,.o-ch input,.o-ch select{
    transition:none !important;
  }
  .tier:hover,.visuel:hover img{transform:none;}
}

/* ============================================================
   EMPLACEMENTS À REMPLIR
   Ces blocs attendent le contenu de Kamal : ses photos de
   service, ses chiffres, ses avis clients.
   ------------------------------------------------------------
   À SUPPRIMER AVANT LA MISE EN LIGNE PUBLIQUE.
   Ils sont tous marqués par la classe .a-remplir, il suffit de
   chercher ce mot dans les fichiers pour tous les retrouver.
   ============================================================ */
.a-remplir{
  border:1.5px dashed #D4D4D0;border-radius:16px;background:#FBFBFA;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px 22px;gap:9px;min-height:130px;
}
.a-remplir .et{
  font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#241C0B;padding:4px 11px;border-radius:100px;
  background:var(--gold);
}
.a-remplir .q{font-size:14px;font-weight:700;color:var(--ink);}
.a-remplir .d{font-size:12.5px;color:var(--grey);line-height:1.55;max-width:34ch;}

/* Le hero partage la place entre la photo actuelle et celle attendue */
.shot-duo{display:grid;grid-template-columns:1.9fr 1fr;gap:14px;
  margin-top:clamp(24px,3vw,38px);}
.shot-duo .shot{margin-top:0;}
.shot-duo .a-remplir{min-height:100%;}

/* Preuve sociale */
.preuve{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  margin-bottom:18px;}
.chiffre{border:1px solid var(--line);border-radius:14px;padding:22px 20px;text-align:center;}
.chiffre .v{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-0.03em;line-height:1;}
.chiffre .v.vide{color:#D4D4D0;}
.chiffre .l{font-size:12.5px;color:var(--grey);margin-top:8px;}

@media(max-width:820px){
  .shot-duo{grid-template-columns:1fr;}
  .preuve,.chiffres{grid-template-columns:1fr;}
}

/* ============================================================
   RYTHME DE LA PAGE
   Chaque section a sa propre respiration : certaines centrees,
   d'autres alignees a gauche, d'autres en deux colonnes.
   C'est cette alternance qui empeche la page de ressembler a
   un empilement de blocs interchangeables.
   ============================================================ */

/* En-tete de section alignee a gauche, avec un filet dore */
.tete-g{max-width:52ch;margin-bottom:clamp(30px,4vw,46px);}
.tete-g h2{font-size:clamp(26px,3.6vw,42px);}
.tete-g p{font-size:15.5px;color:var(--ink-2);margin-top:14px;line-height:1.65;}
.tete-g .kick{display:flex;align-items:center;gap:11px;}
.tete-g .kick::before{
  content:"";width:26px;height:2px;border-radius:2px;flex:0 0 auto;
  background:var(--gold);
}

/* Les trois etapes, en bande numerotee */
.bande{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);}
.bande .et{padding:26px 30px 26px 0;border-right:1px solid var(--line);}
.bande .et:last-child{border-right:0;padding-right:0;}
.bande .et:not(:first-child){padding-left:30px;}
.bande .et .n{
  font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--grey);
  display:block;margin-bottom:12px;
}
.bande .et h3{font-size:17px;margin-bottom:8px;}
.bande .et p{font-size:14px;color:var(--ink-2);line-height:1.6;}

/* ---------- Le produit, en quatre donnees ----------
   On ne garde que le mesurable. Pas d'adjectif, pas de promesse :
   des chiffres qui figurent sur la fiche technique du fournisseur. */
.donnees{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.donnees .d{border:1px solid var(--line);border-radius:16px;padding:28px 24px;background:var(--paper);}
.donnees .v{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-0.03em;line-height:1.05;}
.donnees .l{font-size:13px;color:var(--ink-2);margin-top:8px;line-height:1.5;}
.sel-note{
  font-size:14.5px;color:var(--ink-2);line-height:1.7;
  max-width:70ch;margin:clamp(24px,3vw,32px) auto 0;text-align:center;
}

/* ---------- La fiche produit ----------
   Ce qu'on achète, à quel prix, et par où passer. Une section qui
   décrit sans jamais donner de prix ne vend pas. */
.produit{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(28px,4vw,56px);
  align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:22px;padding:clamp(24px,3vw,38px);
}
.p-visuel{border-radius:16px;overflow:hidden;background:var(--wash);aspect-ratio:4/3;}
.p-visuel img{width:100%;height:100%;object-fit:cover;display:block;}
.p-fiche h3{font-size:clamp(19px,2.3vw,26px);}
.p-desc{font-size:14.5px;color:var(--ink-2);line-height:1.65;margin:12px 0 20px;max-width:46ch;}
.p-specs{list-style:none;margin-bottom:22px;}
.p-specs li{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2);
}
.p-specs li:last-child{border-bottom:0;}
.p-specs b{color:var(--ink);font-weight:600;white-space:nowrap;}
.p-achat{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:20px;
}
.p-prix .d{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);}
.p-prix .v{display:inline-block;font-size:clamp(28px,3.4vw,38px);font-weight:900;
  letter-spacing:-0.04em;line-height:1;margin:6px 8px 0 0;}
.p-prix .u{font-size:12.5px;color:var(--grey);}
.p-note{font-size:12.5px;color:var(--grey);margin-top:16px;line-height:1.6;}

@media(max-width:860px){
  .produit{grid-template-columns:1fr;}
  .r-grille{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .r-grille{grid-template-columns:1fr;gap:22px;}
  .p-achat{flex-direction:column;align-items:flex-start;}
  .p-achat .btn{width:100%;}
}

/* Les deux emplacements de preuve, cote a cote */
.preuve-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}

@media(max-width:900px){
  .bande{grid-template-columns:1fr;}
  .bande .et{border-right:0;border-bottom:1px solid var(--line);padding:22px 0;}
  .bande .et:not(:first-child){padding-left:0;}
  .bande .et:last-child{border-bottom:0;}
  .tiers.quatre{grid-template-columns:repeat(2,1fr);}
  .donnees{grid-template-columns:repeat(2,1fr);}
  .faq-duo{grid-template-columns:1fr;gap:26px;}
  .faq-duo .tete-g{position:static;}
  .portes{grid-template-columns:1fr;}
}
@media(max-width:640px){
  /* La ligne code postal se replie : etiquette, champ, puis reponse */
  .zone-cp{grid-template-columns:1fr;border-radius:20px;padding:22px;gap:11px;text-align:center;}
  .zone-cp input{max-width:180px;margin:0 auto;text-align:center;}
}
@media(max-width:520px){
  .tiers.quatre{grid-template-columns:1fr;}
  .donnees{grid-template-columns:1fr;}
  .preuve-duo{grid-template-columns:1fr;}
}

/* ==================================================================
   PLAN D'AMÉLIORATION DU SITE (septembre 2026)
   Kamal : « qu'il comprenne que c'est un site de service et pas un
   site de vente de produits ». Les composants ci-dessous servent tous
   cette bascule : montrer le camion, la main qui porte, la personne
   qui répond, plutôt que d'aligner des arguments.
   ================================================================== */

/* ---------- Emplacements photo (points 2, 3, 9, 10) ----------
   Un bloc photo dont l'image n'est pas encore déposée se retire de
   lui-même (voir visuels.js). On ne laisse jamais un cadre vide :
   c'est le reproche fait aux compteurs à zéro du point 1. */
[data-photo]{margin:0;}
.ph{
  position:relative;overflow:hidden;border-radius:16px;background:var(--wash);
  border:1px solid var(--line);
}
.ph img{width:100%;height:100%;object-fit:cover;display:block;}
.ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 20px 14px;
  background:linear-gradient(to top,rgba(13,13,13,.72),transparent);
  color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;
}

/* La story de livraison en quatre temps : le camion arrive, le sac est
   porté, il descend à la cave, il est posé près de l'adoucisseur. */
.story{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.story .ph{aspect-ratio:3/4;}
.story .n{
  position:absolute;top:12px;left:12px;z-index:2;
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--ink);font-size:11.5px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}

/* Le véhicule, en bandeau large (point 9) */
.van{overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--wash);}
.van img{width:100%;height:auto;display:block;}
.van-lg{margin-top:clamp(26px,3.5vw,42px);}

/* Le portrait du responsable (point 3) */
.portrait{
  display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,3vw,34px);
  align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:clamp(20px,2.6vw,30px);
}
.portrait .ph{aspect-ratio:1;border-radius:50%;}
.portrait .mot{font-size:clamp(16px,2vw,20px);font-weight:600;line-height:1.5;
  letter-spacing:-0.01em;}
.portrait .qui{font-size:12.5px;color:var(--grey);margin-top:12px;}
.portrait .qui b{color:var(--ink);font-weight:600;}
.portrait.seul{grid-template-columns:1fr;text-align:center;}

/* ---------- Pourquoi KingSalt (point 8) ----------
   Les quatre promesses déjà présentes, mais rassemblées sous un seul
   intitulé pour qu'on les lise comme un service et non comme quatre
   arguments épars. */
.piliers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px);}
.pilier{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.4vw,26px);
}
.pilier .ic{
  width:34px;height:34px;margin-bottom:16px;color:var(--ink);
}
.pilier .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.pilier h3{font-size:14.5px;letter-spacing:-0.01em;margin-bottom:8px;}
.pilier p{font-size:13.5px;color:var(--ink-2);line-height:1.6;}

/* ---------- Le bénéfice chiffré (point 7) ----------
   « 125 kg que vous ne soulevez pas » : le poids parle mieux que la
   promesse. */
.poids{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,26px);
  flex-wrap:wrap;text-align:center;
  border:1px solid var(--line);border-radius:20px;background:var(--paper);
  padding:clamp(22px,3vw,32px);margin-top:clamp(22px,3vw,32px);
}
.poids .kg{font-size:clamp(34px,5vw,54px);font-weight:900;letter-spacing:-0.04em;line-height:1;}
.poids .txt{font-size:clamp(14px,1.7vw,17px);color:var(--ink-2);max-width:34ch;text-align:left;}
@media(max-width:520px){ .poids .txt{text-align:center;} }

/* ---------- Les avis (points 4 et 5) ---------- */
.avis-note{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  font-size:13.5px;color:var(--ink-2);margin-bottom:clamp(24px,3vw,34px);
}
.avis-note b{font-size:17px;font-weight:900;color:var(--ink);}
.avis-note .sep{color:var(--line);}
.avis-note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;}
.avis-note a:hover{color:var(--ink);}
.et-note{display:inline-flex;gap:2px;}
.avis-et{width:15px;height:15px;display:block;color:#DCDCD8;}
.avis-et svg{width:100%;height:100%;fill:currentColor;}
.avis-et.on{color:var(--gold);}

.avis-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);}
.avis-c{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;gap:14px;
}
.avis-c blockquote{font-size:15px;line-height:1.62;color:var(--ink);letter-spacing:-0.01em;}
.avis-c blockquote::before{content:'\201C';}
.avis-c blockquote::after{content:'\201D';}
.avis-c figcaption{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--grey);margin-top:auto;
  border-top:1px solid var(--line);padding-top:14px;
}
.avis-c figcaption b{color:var(--ink);font-weight:600;}
.avis-offre{
  margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);
  background:var(--wash);border-radius:100px;padding:4px 10px;
}

/* ---------- Le simulateur de sacs (point 16) ----------
   « Combien de sacs me faut-il ? » est la question qui bloque le plus
   de commandes. Elle se règle en deux réponses. */
.simu{
  background:var(--paper);border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,3.2vw,36px);
}
.simu-q{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,30px);}
.simu-q label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);margin-bottom:12px;}
.choix{display:flex;gap:8px;flex-wrap:wrap;}
.choix button{
  font-family:var(--f);font-size:13.5px;font-weight:600;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;cursor:pointer;transition:.16s;
}
.choix button:hover{border-color:#CFCFCF;color:var(--ink);}
.choix button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.simu-r{
  margin-top:clamp(22px,3vw,30px);border-top:1px solid var(--line);padding-top:clamp(22px,3vw,30px);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.simu-r .rep{font-size:clamp(15px,2vw,18px);font-weight:600;letter-spacing:-0.01em;max-width:48ch;}
.simu-r .rep b{font-weight:900;}
.simu-r .rep .det{display:block;font-size:13px;font-weight:500;color:var(--grey);margin-top:7px;}

/* ---------- Confiance et paiement (points 18, 19, 20) ---------- */
.confiance-b{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,20px);
}
.cf{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:clamp(18px,2.2vw,24px);
}
.cf .ic{width:26px;height:26px;flex:0 0 auto;color:var(--ink);}
.cf .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.cf .t{font-size:13.5px;font-weight:600;}
.cf .d{font-size:12.5px;color:var(--grey);line-height:1.55;margin-top:4px;}

/* Les badges « sans engagement / sans compte », en ligne */
.badges{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(20px,2.6vw,28px);}
.badge-c{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);border-radius:100px;
  padding:8px 15px;
}
.badge-c svg{width:14px;height:14px;stroke:var(--ok);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

/* Le délai de livraison, collé au bouton (point 17) */
.delai{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--ink-2);
}
.delai svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
.delai b{font-weight:600;color:var(--ink);}

/* Le repère offert sur les paliers 5 et 10 sacs (point 12) */
.tier li.plus{
  display:flex;align-items:flex-start;gap:7px;padding-left:0;
}
.tier li.plus::before{content:none;}
.tier li.plus .ic-plus{
  width:15px;height:15px;flex:0 0 auto;margin-top:2px;
  background:var(--gold);
  border-radius:50%;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 6v6c0 5 3.4 9.4 8 10 4.6-.6 8-5 8-10V6z' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 4 6v6c0 5 3.4 9.4 8 10 4.6-.6 8-5 8-10V6z' fill='black'/></svg>") center/contain no-repeat;
}

/* La justification du palier le plus choisi (point 13) */
.tier .pourquoi{
  font-size:11.5px;color:var(--ink-2);line-height:1.45;
  background:var(--wash);border-radius:9px;padding:8px 10px;margin-top:10px;
}

/* ---------- La carte des communes (point 15) ---------- */
.carte-z{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:20px;padding:clamp(20px,3vw,32px);overflow:hidden;
}
.carte-z svg{width:100%;height:auto;display:block;}
.carte-lg{
  display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  font-size:12.5px;color:var(--ink-2);margin-top:18px;
}
.carte-lg i{width:11px;height:11px;border-radius:50%;display:inline-block;
  margin-right:6px;vertical-align:-1px;}
.carte-lg .o{background:var(--ok);}
.carte-lg .h{background:var(--gold);}
.carte-lg .d{background:var(--ink);}

@media(max-width:980px){
  .piliers{grid-template-columns:repeat(2,1fr);}
  .avis-grille{grid-template-columns:repeat(2,1fr);}
  .confiance-b{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .story{grid-template-columns:repeat(2,1fr);}
  .portrait{grid-template-columns:1fr;text-align:center;}
  .portrait .ph{max-width:190px;margin:0 auto;}
  .simu-q{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .piliers{grid-template-columns:1fr;}
  .avis-grille{grid-template-columns:1fr;}
  .simu-r{flex-direction:column;align-items:flex-start;}
  .simu-r .btn{width:100%;justify-content:center;}
}

/* Un bloc en deux colonnes dont le visuel n'est pas encore déposé se
   remet sur une colonne, sinon le texte reste coincé sur la moitié
   gauche avec un vide à droite. Posée par visuels.js. */
.duo-txt.seul{grid-template-columns:1fr;}
.duo-txt.seul .reveal{max-width:66ch;}
.carte-note{
  font-size:12.5px;color:var(--grey);line-height:1.6;text-align:center;
  max-width:62ch;margin:14px auto 0;
}