/* ==========================================================================
   PineProtect — design system
   Tokens repris de la proposition graphique Claude Design (accueil + boutique)
   ========================================================================== */

:root{
  --green-dark:      oklch(27% 0.035 175);
  --green-darker:    oklch(22% 0.035 175);
  --green-light:     oklch(94% 0.02 175);
  --green-badge:     oklch(90% 0.02 175);
  --orange:          oklch(68% 0.16 55);
  --orange-text:     oklch(20% 0.02 40);
  --orange-soft:     oklch(93% 0.05 60);
  --price:           oklch(42% 0.14 50);
  --cream:           oklch(97% 0.012 75);
  --cream-alt:       oklch(96% 0.015 75);
  --white:           oklch(99% 0.004 75);
  --placeholder:     oklch(90% 0.02 60);
  --red:             oklch(55% 0.22 29);
  --green-ok:        oklch(52% 0.19 145);
  --text:            oklch(22% 0.03 175);
  --text-soft:       oklch(45% 0.02 175);
  --text-nav:        oklch(30% 0.02 175);
  --border:          oklch(90% 0.01 75);
  --border-strong:   oklch(80% 0.01 75);
  --shadow:          0 1px 24px oklch(20% 0.02 175 / 0.08);
  --shadow-up:       0 -4px 16px oklch(20% 0.02 175 / 0.08);
  --font-title:      'Fredoka', sans-serif;
  --font-body:       'Work Sans', sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--text);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  overflow-x:hidden;
}
/* height:auto est indispensable maintenant que les <img> portent des attributs
   width/height : sans lui, une image réduite par max-width garderait la hauteur
   de l'attribut et serait déformée. */
img{ max-width:100%; height:auto; display:block; }
a{ color:oklch(30% 0.05 175); text-decoration:none; }
a:hover{ color:var(--orange); }

/* ---------- shell ---------- */
.shell{
  position:relative; width:100%; max-width:1440px; margin:0 auto;
  background:var(--white); box-shadow:var(--shadow); min-height:100vh;
  display:flex; flex-direction:column;
}
.section-pad{ padding-left:48px; padding-right:48px; }
main{ flex:1; }

/* ---------- barre promo ---------- */
.promo-bar{
  background:var(--green-dark); color:var(--cream);
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:10px 48px; font-size:14px; font-weight:500; position:relative;
}
.promo-bar button{
  position:absolute; right:20px; background:none; border:none;
  color:var(--cream); font-size:18px; line-height:1; cursor:pointer;
}

/* ---------- header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 48px; border-bottom:1px solid var(--border);
  position:relative; background:var(--white);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:38px; height:38px; object-fit:contain; }
.wordmark{ font-family:var(--font-title); font-size:22px; color:var(--green-dark); }
.wordmark .thin{ font-weight:400; }
.wordmark .bold{ font-weight:700; }

/* Nom de marque en ligne dans un texte : reprend le traitement du logo
   (Fredoka, "Pine" en regulier + "Protect" en gras), taille et couleur heritees. */
.brandname{ font-family:var(--font-title); white-space:nowrap; }
.brandname .thin{ font-weight:400; }
.brandname .bold{ font-weight:700; }
.site-nav{ display:flex; gap:32px; font-size:15px; font-weight:500; color:var(--text-nav); }
.site-nav a{ color:var(--text-nav); }
.site-nav a.is-active{ color:var(--green-dark); font-weight:700; border-bottom:2px solid var(--orange); padding-bottom:2px; }
.nav-toggle{ display:none; }
.nav-hamburger{
  display:none; font-size:26px; line-height:1; cursor:pointer;
  color:var(--green-dark); background:none; border:none; padding:4px;
}
.nav-account-mobile{ display:none; }

/* ---------- bandeau réassurance ---------- */
.trust-strip{
  background:var(--green-light); display:flex; justify-content:center;
  gap:48px; padding:12px 48px; font-size:13px; font-weight:600;
  color:var(--green-dark); flex-wrap:wrap;
}
.trust-strip span{ display:inline-flex; align-items:center; gap:7px; }
.flag-icon{
  width:19px; height:13px; object-fit:cover; border-radius:2px;
  display:inline-block; flex-shrink:0;
}

/* ---------- en-tête de page ---------- */
.page-head{ padding:32px 48px 8px; }
.page-title{ font-family:var(--font-title); font-size:32px; color:var(--text); margin:0 0 8px; line-height:1.2; }
.page-sub{ font-size:14px; color:var(--text-soft); margin:0; }
.breadcrumb{ font-size:12px; color:var(--text-soft); margin:0 0 10px; }
.breadcrumb a{ color:var(--text-soft); }

/* ---------- boutons ---------- */
.btn{
  display:inline-block; text-align:center; padding:14px 24px; border-radius:10px;
  font-weight:600; font-size:15px; border:none; cursor:pointer;
  font-family:var(--font-body);
}
.btn-block{ display:block; width:100%; }
.btn-primary{ background:var(--green-dark); color:var(--cream); }
.btn-primary:hover{ background:var(--green-darker); color:var(--cream); }
.btn-accent{ background:var(--orange); color:var(--orange-text); }
.btn-accent:hover{ color:var(--orange-text); filter:brightness(1.05); }
.btn-ghost{ background:var(--cream-alt); border:1px solid var(--border-strong); color:var(--text-nav); }
.btn-sm{ padding:9px 18px; font-size:13px; border-radius:8px; }
.btn-disabled{ background:var(--border); color:var(--text-soft); cursor:not-allowed; }

/* ---------- badges ---------- */
.badge{
  font-family:var(--font-title); font-weight:600; font-size:13px;
  padding:6px 14px; border-radius:100px; display:inline-block;
}
.badge-orange{ background:var(--orange); color:var(--orange-text); }
.badge-green{ background:var(--green-badge); color:var(--green-dark); }
/* Paire rouge / vert calee sur les croix et les coches incrustees dans les photos de
   tronc. Les deux teintes sont assombries par rapport aux pictos pour que le texte
   blanc reste lisible ; a n'utiliser que pour un verdict "oui / non". */
.badge-red{ background:var(--red); color:var(--white); }
.badge-ok{ background:var(--green-ok); color:var(--white); }
.badge-cat{
  background:var(--cream-alt); color:var(--text-soft); font-size:11px;
  font-weight:600; padding:4px 10px; border-radius:100px;
  display:inline-block; font-family:var(--font-body);
}
.badge-dark{
  background:oklch(27% 0.035 175 / 0.92); color:var(--cream);
  font-size:12px; font-weight:600; padding:6px 10px; border-radius:100px;
}

/* ---------- cartes ---------- */
.card{
  background:var(--white); border:1px solid var(--border);
  border-radius:14px; padding:20px;
}
.card-soft{ background:var(--white); border-radius:16px; box-shadow:var(--shadow); padding:20px; }
.card h3{ font-family:var(--font-title); font-size:16px; margin:0 0 6px; }
.card p{ font-size:13.5px; color:var(--text-soft); margin:0; line-height:1.5; }

.media{
  position:relative; width:100%; border-radius:14px; overflow:hidden;
  background:var(--cream-alt); display:flex; align-items:center; justify-content:center;
}
.media img{ width:100%; height:100%; object-fit:contain; }
.media-220{ height:220px; }
.media-320{ height:320px; }
.placeholder{
  width:100%; height:100%; background:var(--placeholder);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:12px; font-size:12px; color:oklch(40% 0.02 175);
}

/* ---------- grilles ---------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-6{ grid-template-columns:repeat(3,1fr); }

/* ---------- sections ---------- */
.section{ padding:48px; }
.section-alt{ background:var(--green-light); }
.section-cream{ background:var(--cream); }
.section-title{
  font-family:var(--font-title); font-size:26px; color:var(--text);
  margin:0 0 8px; text-align:center; line-height:1.25;
}
.section-sub{ font-size:14px; color:var(--text-soft); text-align:center; margin:0 0 28px; }

/* ---------- hero + comparatif (accueil) ---------- */
.hero{ padding:56px 48px 40px; text-align:center; max-width:920px; margin:0 auto; }
.hero h1{ font-family:var(--font-title); font-size:44px; line-height:1.15; margin:0 0 18px; word-break:break-word; }
.hero p{ font-size:18px; color:var(--text-soft); line-height:1.5; margin:0; }

.compare-row{ display:flex; align-items:stretch; padding:0 48px 8px; position:relative; }
/* Colonne flex : la description absorbe l'espace restant, ce qui aligne
   le bloc prix et le CTA des deux cartes quelle que soit la longueur du texte. */
.compare-card{ flex:1; padding:0 28px 28px; display:flex; flex-direction:column; min-width:0; }
.compare-card > .badge{ align-self:flex-start; }
.compare-card > .media{ flex-shrink:0; }
.compare-card > p{ flex:1 1 auto; }
.compare-divider{ width:1px; background:var(--border); position:relative; margin:20px 0; }
.vs-badge{
  position:absolute; top:150px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; background:var(--orange-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-title); font-weight:700; font-size:14px; color:var(--price);
}
.spec-row{
  display:flex; justify-content:space-between; font-size:14px;
  padding:10px 14px; background:var(--cream-alt); border-radius:8px;
}
.spec-row .label{ color:var(--text-soft); }
.spec-row .value{ font-weight:600; color:var(--text); }

/* ---------- fiche produit ---------- */
.product-layout{ display:flex; gap:40px; padding:24px 48px 56px; align-items:flex-start; }
.product-media{ flex:1 1 50%; min-width:0; }
.product-info{ flex:1 1 50%; min-width:0; }
.thumb-row{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.thumb{ width:72px; height:72px; border-radius:10px; border:1px solid var(--border); overflow:hidden; background:var(--cream-alt); }
.thumb img{ width:100%; height:100%; object-fit:contain; }
.price-big{ font-family:var(--font-title); font-size:26px; color:var(--price); font-weight:600; }
.price-note{ font-size:13px; color:var(--text-soft); }
/* Mention TTC accolee au montant : lisible mais typographiquement en retrait,
   pour ne pas concurrencer le prix lui-meme. */
.price-tax{
  font-family:var(--font-body); font-size:.72em; font-weight:600;
  color:var(--text-soft); margin-left:3px; white-space:nowrap;
}
/* Prix de la variation choisie, entre la liste des circonferences et le panier :
   le montant exact remplace la fourchette au moment ou le client peut le lire. */
.var-price{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--cream-alt); border:1px solid var(--border);
  border-radius:12px; padding:14px 18px; margin:18px 0;
}
.var-price .var-price-label{ font-size:13px; color:var(--text-soft); }
.var-price .var-price-value{
  font-family:var(--font-title); font-size:24px; font-weight:600; color:var(--price);
}
/* Etat initial (aucune circonference choisie) : le bloc garde sa place mais
   n'affiche pas de faux prix. */
.var-price[data-state="empty"]{ background:transparent; border-style:dashed; }
.var-price[data-state="empty"] .var-price-value{
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--text-soft);
}

.field{ margin:18px 0; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--text-nav); margin-bottom:6px; }
.field select, .field input, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border-strong);
  border-radius:8px; font-size:14px; font-family:var(--font-body);
  color:var(--text); background:var(--white);
}
.qty-row{ display:flex; gap:12px; align-items:stretch; }
.qty-row input{ width:90px; text-align:center; }
.qty-row .btn{ flex:1; }

/* ---------- formulaires ---------- */
/* Deux champs sur une meme ligne (Prenom/Nom, Email/Telephone), empiles en mobile. */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.field .req{ color:var(--price); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:2px solid var(--orange); outline-offset:1px; border-color:var(--orange);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--red); }

/* Anti-spam : question simple, sans dependance externe. */
.captcha-box{
  background:var(--cream-alt); border:1px solid var(--border);
  border-radius:12px; padding:16px 18px; margin:4px 0 20px;
  /* Le widget Turnstile a une largeur plancher de 300 px, superieure a la place
     disponible sur les petits ecrans : il defile dans son propre bloc plutot que
     de faire deborder la page. */
  overflow-x:auto;
}
.captcha-box .cf-turnstile{ max-width:100%; }
.captcha-box .captcha-label{
  display:block; font-size:13px; font-weight:600; color:var(--text-nav); margin-bottom:8px;
}
.captcha-note{ font-size:12px; color:var(--text-soft); margin:10px 0 0; }
/* Emplacement affiche quand le widget Turnstile n'est pas actif (maquette locale,
   cle de site absente) : memes dimensions que le widget reel, pour que la mise en
   page corresponde a ce que verra le visiteur. */
.captcha-placeholder{
  width:300px; max-width:100%; height:65px; border-radius:8px;
  border:1px dashed var(--border-strong); background:var(--white);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:0 12px; font-size:11.5px; font-style:italic; color:var(--text-soft);
  line-height:1.35;
}

.form-msg{
  border-radius:10px; padding:12px 16px; font-size:14px; margin:0 0 16px;
}
.form-msg-ok{ background:var(--green-light); color:var(--green-dark); }
.form-msg-ko{ background:oklch(94% 0.04 29); color:var(--red); }

/* ---------- prose (pages légales, articles) ---------- */
.prose{ max-width:800px; margin:0 auto; padding:8px 48px 56px; }
.prose h2{ font-family:var(--font-title); font-size:24px; margin:32px 0 12px; color:var(--text); line-height:1.3; }
.prose h3{ font-family:var(--font-title); font-size:19px; margin:26px 0 10px; color:var(--text); }
.prose h4{ font-family:var(--font-title); font-size:16px; margin:22px 0 8px; color:var(--text); }
.prose h5, .prose h6{
  font-family:var(--font-title); font-size:17px; font-weight:600;
  margin:26px 0 10px; color:var(--text); line-height:1.35;
}
.prose p{ font-size:15px; line-height:1.7; color:oklch(32% 0.02 175); margin:0 0 14px; }
.prose ul, .prose ol{ padding-left:22px; margin:0 0 16px; }
.prose li{ font-size:15px; line-height:1.7; color:oklch(32% 0.02 175); margin-bottom:8px; }
.prose strong{ color:var(--text); }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14px; }
.prose td, .prose th{ border:1px solid var(--border); padding:8px 10px; text-align:left; }
.prose-narrow{ max-width:720px; }
/* tableaux comparatifs des guides : défilement horizontal plutôt que débordement de page */
.prose figure.wp-block-table{ margin:0 0 18px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:680px){ .prose figure.wp-block-table table{ min-width:480px; } }
/* encadré informatif dans les guides (ex. « quand faire appel à un professionnel ») */
.prose .pp-encadre{
  background:var(--cream); border:1px dashed var(--border);
  border-radius:14px; padding:20px 24px 6px; margin:28px 0;
}
.prose .pp-encadre h2{ margin-top:0; font-size:19px; }
/* encart produits inséré dans les guides */
.prose .pp-cta-produits{
  background:oklch(96% 0.02 175); border:1px solid var(--border); border-left:4px solid var(--price);
  border-radius:14px; padding:20px 24px 8px; margin:32px 0;
}
.prose .pp-cta-produits h2{ margin-top:0; font-size:20px; }
.prose .pp-cta-produits > p:last-child{ margin-bottom:14px; }
/* renvois « À lire aussi » */
.prose em > a, .prose a{ color:var(--price); }

.info-box{
  background:var(--green-light); border-radius:14px; padding:16px 20px;
  font-size:14px; margin:0 0 24px; color:var(--text);
}
.info-box strong{ font-family:var(--font-title); }

/* ---------- Renonciation au droit de retractation (produits sur-mesure) ---------- */
.consent-box{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; margin:16px 0 0; background:var(--cream);
}
.consent-box input[type="checkbox"]{
  flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--green-dark); cursor:pointer;
}
.consent-box label{ font-size:13.5px; line-height:1.55; color:var(--text); cursor:pointer; margin:0; }
.consent-box[data-state="error"]{ border-color:var(--red); background:oklch(97% 0.02 29); }
.consent-note{ font-size:12.5px; color:var(--text-soft); margin:8px 0 0; }

/* ---------- FAQ ---------- */
.faq-item{
  border:1px solid var(--border); border-radius:12px; padding:16px 18px;
  margin-bottom:12px; background:var(--white);
}
.faq-item h3{ font-family:var(--font-title); font-size:16px; margin:0 0 8px; color:var(--text); }
.faq-item p{ font-size:14px; color:var(--text-soft); margin:0; line-height:1.6; }

/* Accordeon : meme habillage que .faq-item, mais depliable (details/summary natif,
   aucun JS). Le premier item de chaque groupe est ouvert par defaut. */
.accordion{ max-width:880px; margin:0 auto; }
.acc-item{
  border:1px solid var(--border); border-radius:12px; margin-bottom:12px;
  background:var(--white); overflow:hidden;
}
.acc-item > summary{
  list-style:none; cursor:pointer; padding:16px 46px 16px 18px; position:relative;
  font-family:var(--font-title); font-size:16px; font-weight:500; color:var(--text);
  line-height:1.4;
}
.acc-item > summary::-webkit-details-marker{ display:none; }
.acc-item > summary::after{
  content:'+'; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; border-radius:100px; background:var(--orange-soft);
  color:var(--price); font-size:16px; line-height:24px; text-align:center;
  font-weight:600;
}
.acc-item[open] > summary::after{ content:'−'; }
.acc-item[open] > summary{ color:var(--green-dark); }
.acc-item > summary:hover{ background:var(--cream-alt); }
.acc-body{ padding:0 18px 16px; }
.acc-body p{ font-size:14px; color:var(--text-soft); margin:0 0 10px; line-height:1.65; }
.acc-body p:last-child{ margin-bottom:0; }

/* ---------- cartes video (centre d'aide) ---------- */
.video-card{ display:block; color:inherit; }
.video-card .media{ position:relative; }
.video-card .media::after{
  content:''; position:absolute; inset:0; background:oklch(20% 0.02 175 / 0.12);
  transition:background .15s;
}
.video-card:hover .media::after{ background:oklch(20% 0.02 175 / 0.02); }
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:100px; background:var(--orange);
  display:flex; align-items:center; justify-content:center; z-index:2;
  box-shadow:var(--shadow);
}
.video-play svg{ width:24px; height:24px; fill:var(--orange-text); margin-left:3px; }
.video-card h3{
  font-family:var(--font-title); font-size:15px; margin:12px 0 2px; color:var(--text);
}
.video-card p{ font-size:13px; color:var(--text-soft); margin:0; }

/* ---------- galerie configurations de tronc ---------- */
.config-block{ margin-bottom:32px; }
.config-block:last-child{ margin-bottom:0; }
.config-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.config-head h3{ font-family:var(--font-title); font-size:18px; margin:0; color:var(--text); }
.config-note{ font-size:14px; color:var(--text-soft); margin:0 0 18px; }

/* ---------- frise chronologique ---------- */
.timeline{ position:relative; max-width:780px; margin:28px auto 0; }
.timeline::before{
  content:''; position:absolute; left:34px; top:12px; bottom:12px;
  width:2px; background:var(--border);
}
.tl-item{ position:relative; padding-left:96px; padding-bottom:26px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-year{
  position:absolute; left:0; top:0; width:70px; text-align:center;
  background:var(--orange-soft); color:var(--price);
  font-family:var(--font-title); font-weight:700; font-size:14px;
  padding:6px 0; border-radius:100px;
}
.tl-item h4{
  font-family:var(--font-title); font-size:16px; margin:2px 0 6px; color:var(--text);
}
.tl-item p{ font-size:14px; color:var(--text-soft); line-height:1.65; margin:0; }
.tl-todo{
  display:inline-block; background:var(--cream-alt); color:var(--text-soft);
  border:1px dashed var(--border-strong); border-radius:8px;
  padding:8px 12px; font-size:13px; font-style:italic;
}

@media (max-width:768px){
  .timeline::before{ left:26px; }
  .tl-item{ padding-left:70px; padding-bottom:22px; }
  .tl-year{ width:54px; font-size:13px; }
}

/* ---------- encart "tout est inclus" ---------- */
/* Complete une grille de cartes : meme habillage, mais pleine largeur, pour
   dire ce que contient la boite en plus des elements presentes au-dessus. */
.included-card{
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  padding:26px; margin-top:24px; text-align:left;
}
.included-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.included-head h3{ font-family:var(--font-title); font-size:19px; margin:0; color:var(--text); }
.included-cols{ display:grid; grid-template-columns:1.25fr 1fr; gap:28px; }
.included-cols h4{ font-family:var(--font-title); font-size:14px; margin:0 0 10px; color:var(--text); }
.included-list{ list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.included-list li{
  font-size:13.5px; color:var(--text-soft); line-height:1.5;
  padding-left:24px; position:relative;
}
.included-list li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--green-ok); font-weight:700;
}
.included-notice{ background:var(--cream-alt); border-radius:12px; padding:16px 18px; height:100%; }
.included-notice p{ font-size:13.5px; color:var(--text-soft); margin:0 0 12px; line-height:1.55; }

/* ---------- encart fondateur : le piege d'aujourd'hui, 2020 en medaillon ---------- */
/* La grande photo montre le piege actuel (imitation ecorce) ; la premiere version
   de 2020, au collier noir, reste visible en medaillon comme une archive. */
.evo-founder{ display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; }
.evo-stack{ flex:0 0 340px; max-width:100%; }
.evo-main{ position:relative; border-radius:14px; overflow:hidden; }
.evo-main img{ width:100%; height:300px; object-fit:cover; display:block; }
.evo-main-year{
  position:absolute; top:12px; left:12px; font-family:var(--font-title); font-weight:700;
  font-size:13px; color:var(--cream); background:oklch(27% 0.035 175 / 0.92);
  border-radius:100px; padding:5px 12px;
}
.evo-inset{
  position:absolute; right:12px; bottom:12px; width:132px; border-radius:10px; overflow:hidden;
  border:3px solid var(--cream); box-shadow:0 2px 12px oklch(20% 0.02 175 / 0.28);
}
.evo-inset img{ width:100%; height:96px; object-fit:cover; display:block; }
.evo-inset-year{
  position:absolute; top:0; left:0; font-family:var(--font-title); font-weight:700; font-size:11px;
  color:var(--cream); background:oklch(27% 0.035 175 / 0.92); padding:3px 8px; border-radius:0 0 8px 0;
}
.evo-stack-cap{ font-size:12.5px; color:var(--text-soft); font-style:italic; margin:10px 2px 0; line-height:1.5; }

/* ---------- bloc partenaire distributeur ---------- */
/* Le logo partenaire est noir sur fond blanc : la pastille blanche evite d'avoir
   a le detourer et le fait lire comme un label "distribue par". */
.partner-band{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.partner-kicker{
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-soft); margin:0;
}
.partner-logo{
  background:var(--white); border-radius:12px; padding:10px 18px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
}
.partner-logo img{ height:38px; width:auto; }

.partner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:880px; margin:28px auto 0; }
.partner-card{
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; text-align:left;
  transition:transform .15s, box-shadow .15s;
}
.partner-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.partner-card > img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.partner-card-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.partner-card-body h3{ font-family:var(--font-title); font-size:17px; margin:0; color:var(--text); }
.partner-card-body p{ font-size:13.5px; color:var(--text-soft); margin:0; flex:1; }
.partner-card-body .btn{ margin-top:4px; }
/* Fleche des liens sortants. */
.ext-icon{ font-size:.85em; }

/* ---------- blog ---------- */
.post-card{
  background:var(--white); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
}
.post-card .body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card h2{ font-family:var(--font-title); font-size:17px; margin:0; line-height:1.35; color:var(--text); }
.post-card p{ font-size:13.5px; color:var(--text-soft); margin:0; flex:1; }
.post-meta{ font-size:12px; color:var(--text-soft); }

/* ---------- footer ---------- */
.site-footer{ padding:40px 48px 24px; background:var(--green-dark); color:oklch(85% 0.01 75); }
.footer-cols{ display:flex; justify-content:space-between; gap:40px; max-width:1100px; margin:0 auto 28px; }
.footer-cols a{ color:oklch(85% 0.01 75); }
.footer-cols a:hover{ color:var(--orange); }
.footer-brand{ max-width:280px; }
.footer-brand img{ width:32px; height:32px; object-fit:contain; }
.footer-col-title{ font-weight:600; color:var(--cream); margin-bottom:10px; font-size:13px; }
.footer-links{ display:flex; flex-direction:column; gap:6px; font-size:13px; }
.footer-bottom{
  max-width:1100px; margin:0 auto; padding-top:20px;
  border-top:1px solid oklch(40% 0.03 175); display:flex;
  justify-content:space-between; align-items:center; font-size:13px; gap:16px;
}
.footer-bottom a{ color:oklch(85% 0.01 75); }

/* ---------- bandeau cookies ---------- */
.cookie-banner{
  position:sticky; bottom:0; left:0; width:100%; background:var(--white);
  border-top:1px solid oklch(88% 0.01 75); padding:16px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  box-shadow:var(--shadow-up); z-index:20;
}
.cookie-banner p{ font-size:13px; color:oklch(35% 0.02 175); margin:0; }
.cookie-actions{ display:flex; gap:10px; flex-shrink:0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .product-layout{ flex-direction:column; gap:28px; }
}

@media (max-width:768px){
  .section-pad, .page-head, .section, .hero, .prose,
  .promo-bar, .site-header, .site-footer, .cookie-banner, .trust-strip,
  .product-layout, .compare-row{
    padding-left:20px !important; padding-right:20px !important;
  }
  .site-header{ padding-top:14px; padding-bottom:14px; }
  .nav-hamburger{ display:flex; }
  .nav-account-desktop{ display:none; }
  .site-nav{
    display:none; flex-direction:column; gap:14px; position:absolute;
    top:100%; left:0; right:0; background:var(--white); padding:18px 20px 22px;
    box-shadow:0 10px 20px oklch(20% 0.02 175 / 0.12); z-index:40;
    border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  }
  .nav-toggle:checked ~ .site-nav{ display:flex; }
  .nav-account-mobile{
    display:inline-block; margin-top:6px; background:var(--green-dark);
    color:var(--cream); padding:10px 16px; border-radius:8px;
    text-align:center; font-weight:600;
  }
  .trust-strip{ gap:14px; font-size:12px; }
  .hero{ padding-top:32px; padding-bottom:24px; }
  .hero h1{ font-size:28px; }
  .hero p{ font-size:15px; }
  .page-title{ font-size:24px; }
  .section{ padding-top:36px; padding-bottom:36px; }
  .section-title{ font-size:21px; }
  .compare-row{ flex-direction:column; padding-bottom:0; }
  .compare-card{ padding:0 0 24px; }
  .media-320{ height:220px; }
  .compare-divider{
    width:100%; height:auto; background:none; margin:0;
    display:flex; justify-content:center;
  }
  .vs-badge{ position:static; transform:none; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .partner-grid{ grid-template-columns:1fr; }
  .included-cols{ grid-template-columns:1fr; gap:20px; }
  .grid-6{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .footer-cols{ flex-direction:column; gap:24px; }
  .footer-bottom{ flex-direction:column; gap:10px; text-align:center; }
  .cookie-banner{
    padding-top:14px; padding-bottom:14px; flex-direction:column;
    align-items:stretch; gap:12px;
  }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn{ flex:1; }
  .qty-row{ flex-direction:column; }
  .qty-row input{ width:100%; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .acc-item > summary{ font-size:15px; padding:14px 42px 14px 15px; }
  .acc-body{ padding:0 15px 14px; }
}

@media (max-width:420px){
  .grid-6{ grid-template-columns:1fr; }
  .hero h1{ font-size:25px; }
  .thumb{ width:60px; height:60px; }
}