/* produit.css — Feuille commune aux trois pages produit.
 *
 * Mutualisee volontairement : les trois pages partagent exactement la meme
 * structure de vente, seul le contenu change. Un correctif se fait donc une
 * fois, pas trois — c'est precisement ce qui avait derive sur les anciennes
 * pages, chacune ayant evolue de son cote.
 *
 * Les animations d'apparition sont pilotees par produit.js. Ce fichier ne
 * definit que les DEUX etats (avant / apres) : sans JS, tout est visible.
 */

:root{
  color-scheme:light;
  --forest:#0A3D31; --forest-mid:#1A6B50; --sage:#84A593;
  --stone:#EAE5DB;  --pearl:#FAF8F3;      --ink:#2B2823;
  --mist:#D9D2C2;   --ambre:#B8860B;
  --sortie:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito Sans',system-ui,sans-serif;background:var(--pearl);color:var(--ink);line-height:1.7;overflow-x:hidden}

/* ─── En-tete / pied ─── */
.entete{background:var(--forest);padding:1rem 1.5rem;position:relative;z-index:10}
.entete .int{max-width:1060px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}
.entete a.marque{font-family:'Poppins',sans-serif;font-weight:700;color:var(--pearl);letter-spacing:.35em;font-size:.95rem;text-decoration:none}
.entete a.retour{color:var(--sage);font-size:.82rem;text-decoration:none}
.entete a.retour:hover{color:var(--pearl)}
footer{text-align:center;padding:2rem 1.4rem 6rem;font-size:.75rem;color:var(--sage);border-top:1px solid var(--mist)}
footer a{color:var(--forest-mid)}

/* ─── Rythme des sections ─── */
.sec{padding:3.4rem 1.4rem;position:relative}
.sec-int{max-width:680px;margin:0 auto}
.sec-large{max-width:1060px;margin:0 auto}
.bg-stone{background:var(--stone)}
.bg-forest{background:var(--forest);color:var(--pearl)}
.bg-forest h2,.bg-forest h3{color:var(--pearl)}

.fil{font-size:.78rem;color:var(--sage);padding:1.2rem 1.4rem 0;max-width:1060px;margin:0 auto}
.fil a{color:var(--forest-mid);text-decoration:none}

.eyebrow{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--forest);background:rgba(132,165,147,.16);padding:.34rem .85rem;border-radius:100px;margin-bottom:1rem}

h1{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1.75rem,5.6vw,2.6rem);line-height:1.2;color:var(--forest);letter-spacing:-.01em}
h1 em{font-style:normal;color:var(--forest-mid)}
h2.question{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.25rem,3.6vw,1.6rem);color:var(--forest);line-height:1.3;margin-bottom:1.6rem}
/* Sur fond forest, `.bg-forest h2` plus haut a la MEME specificite que
   `h2.question` et perdait donc l'arbitrage (regle declaree avant) : le titre
   restait vert sur vert, donc illisible. On reprend la main explicitement. */
.bg-forest h2.question,.bg-forest .sec-intro,.bg-forest .eyebrow{color:var(--pearl)}
.sec-intro{font-size:1.04rem;color:var(--ink);opacity:.82;margin-bottom:1.8rem;line-height:1.75}

/* ─── Hero ─── */
.hero{padding:2.4rem 1.4rem 1rem}
.hero-int{max-width:1060px;margin:0 auto;display:grid;gap:2.2rem}
.chapeau{font-size:1.07rem;line-height:1.75;margin:1.2rem 0 0;color:var(--ink);opacity:.86}
.chapeau strong{opacity:1;color:var(--forest)}

.bloc-achat{background:var(--stone);border-radius:20px;padding:1.6rem 1.4rem;margin-top:1.8rem}
.prix-ligne{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.prix{font-family:'Poppins',sans-serif;font-weight:700;font-size:2.3rem;color:var(--forest);line-height:1}
.prix-note{font-size:.88rem;color:var(--ink);opacity:.62}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:1rem;background:var(--forest);color:var(--pearl);padding:1rem 1.8rem;border-radius:100px;
  border:none;cursor:pointer;text-decoration:none;min-height:52px;transition:transform .15s var(--sortie),box-shadow .2s}
.btn:hover{box-shadow:0 8px 22px rgba(10,61,49,.22)}
.btn:active{transform:scale(.975)}
.btn-full{width:100%;margin-top:1.1rem;font-size:1.06rem}
.btn-clair{background:var(--pearl);color:var(--forest)}
.lien-doux{display:inline-block;margin-top:.9rem;color:var(--forest-mid);font-size:.9rem;text-decoration:underline;text-underline-offset:3px}
.micro-legal{font-size:.78rem;color:var(--ink);opacity:.5;margin-top:1rem;line-height:1.6}

/* ─── Visuel anime du hero ─── */
.visuel{position:relative;background:var(--pearl);border:1px solid var(--mist);border-radius:20px;padding:1.3rem;overflow:hidden}
.visuel-entete{display:flex;align-items:center;gap:.4rem;padding-bottom:.85rem;margin-bottom:1rem;border-bottom:1px solid rgba(43,40,35,.08)}
.pastille{width:8px;height:8px;border-radius:50%;background:var(--mist)}
.visuel-titre{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.62rem;color:rgba(43,40,35,.32);letter-spacing:.04em}

/* ─── Cartes de scene ─── */
.scenes{display:grid;gap:1.1rem}
.scene{background:var(--pearl);border:1px solid var(--mist);border-radius:18px;padding:1.4rem 1.35rem}
.bg-stone .scene{background:var(--pearl)}
.scene .ico{font-size:1.75rem;display:block;margin-bottom:.65rem;line-height:1}
.scene h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.02rem;color:var(--forest);margin-bottom:.5rem}
.scene p{font-size:.95rem;line-height:1.72;opacity:.84}
.scene p+p{margin-top:.6rem}

/* ─── Liste a icones ─── */
.liste-ico{list-style:none;display:flex;flex-direction:column;gap:1.25rem}
.liste-ico li{display:flex;gap:.95rem;align-items:flex-start;font-size:.97rem;line-height:1.68}
.liste-ico .ico{font-size:1.4rem;flex-shrink:0;line-height:1.3}
.liste-ico b{color:var(--forest);font-weight:600}

/* ─── Etapes numerotees ─── */
.etapes{list-style:none;display:flex;flex-direction:column;gap:1.4rem}
.etapes li{display:flex;gap:1rem;align-items:flex-start;font-size:.97rem;line-height:1.7}
.etape-num{width:38px;height:38px;border-radius:50%;background:var(--forest);color:var(--pearl);
  font-family:'Poppins',sans-serif;font-weight:700;font-size:.95rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.etapes b{display:block;color:var(--forest);font-weight:600;margin-bottom:.15rem}

/* ─── Encadre de reassurance ─── */
.reassurance{border:2px solid var(--sage);border-radius:18px;padding:1.5rem 1.4rem;background:var(--pearl)}
.reassurance h3{font-family:'Poppins',sans-serif;font-weight:600;color:var(--forest);font-size:1.05rem;margin-bottom:1rem}
.points{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.points li{padding-left:1.35rem;position:relative;font-size:.94rem;line-height:1.68}
.points li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--sage)}

/* ─── Avis clients ─── */
.avis-grille{display:grid;gap:1rem}
.avis{background:var(--pearl);border:1px solid var(--mist);border-radius:16px;padding:1.25rem 1.3rem}
.bg-stone .avis{background:var(--pearl)}
.etoiles{color:var(--ambre);font-size:.9rem;letter-spacing:.09em;margin-bottom:.55rem}
.avis p{font-size:.94rem;line-height:1.72;opacity:.88;font-style:italic}
.avis .qui{display:block;margin-top:.7rem;font-size:.8rem;color:var(--sage);font-style:normal}

/* ─── Chiffres cles ─── */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.9rem}
.chiffre{background:var(--pearl);border:1px solid var(--mist);border-radius:14px;padding:1.1rem .9rem;text-align:center}
.bg-stone .chiffre,.bg-forest .chiffre{background:rgba(250,248,243,.06);border-color:rgba(250,248,243,.16)}
.bg-forest .chiffre{color:var(--pearl)}
.chiffre .n{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.5rem;color:var(--forest);line-height:1.1}
.bg-forest .chiffre .n{color:var(--pearl)}
.chiffre .l{font-family:'JetBrains Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;opacity:.62;margin-top:.35rem;display:block;line-height:1.4}

/* ─── FAQ ─── */
.faq{display:flex;flex-direction:column;gap:.7rem}
.faq details{background:var(--pearl);border:1px solid var(--mist);border-radius:14px;padding:1rem 1.2rem}
.bg-stone .faq details{background:var(--pearl)}
.faq summary{font-family:'Poppins',sans-serif;font-weight:600;font-size:.97rem;color:var(--forest);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.3rem;color:var(--sage);transition:transform .25s var(--sortie);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:.8rem;font-size:.93rem;line-height:1.72;opacity:.84}

/* ─── CTA de fin ─── */
.cta-fin{text-align:center}
.cta-fin .nom{font-family:'Poppins',sans-serif;font-weight:700;font-size:1.25rem;color:var(--forest);margin-bottom:.3rem}
.bg-forest .cta-fin .nom{color:var(--pearl)}
.cta-fin .sous{font-size:.84rem;opacity:.62;margin-top:.9rem;line-height:1.6}

/* ─── Barre d'achat collante ───
   Le levier le plus rentable mesure sur ce type de page. Elle n'apparait
   qu'une fois le bloc d'achat du hero depasse, pour ne pas doublonner. */
.barre-collante{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--pearl);
  border-top:1px solid var(--mist);box-shadow:0 -6px 24px rgba(10,61,49,.12);
  padding:.7rem 1rem;transform:translateY(110%);transition:transform .38s var(--sortie);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom))}
.barre-collante.vue{transform:none}
.barre-int{max-width:680px;margin:0 auto;display:flex;align-items:center;gap:1rem}
.barre-txt{flex:1;min-width:0}
.barre-nom{font-family:'Poppins',sans-serif;font-weight:600;font-size:.88rem;color:var(--forest);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barre-prix{font-size:.8rem;opacity:.6}
.barre-collante .btn{padding:.75rem 1.5rem;font-size:.93rem;min-height:46px;flex-shrink:0}

/* ─── Apparition au defilement ───
   Reversible : produit.js retire la classe quand l'element ressort de
   l'ecran, l'animation se rejoue donc en remontant. */
   Le masquage initial est conditionne a `.js` sur <html>, classe posee par
   un script en tete de page : sans JavaScript, aucune regle ne cache quoi
   que ce soit et la page reste integralement lisible. */
.js .rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s var(--sortie)}
.js .rev.vu{opacity:1;transform:none}
.js .rev.d1{transition-delay:.08s}
.js .rev.d2{transition-delay:.16s}
.js .rev.d3{transition-delay:.24s}
.js .rev.d4{transition-delay:.32s}

/* ─── Bureau ─── */
@media(min-width:880px){
  .hero{padding:3.2rem 1.4rem 1.4rem}
  .hero-int{grid-template-columns:1.05fr .95fr;align-items:center;gap:3rem}
  .sec{padding:4.4rem 1.4rem}
  .scenes{grid-template-columns:repeat(2,1fr)}
  .avis-grille{grid-template-columns:repeat(3,1fr)}
  /* Quand il n'y a que deux avis, trois colonnes laisseraient un trou :
     on passe a deux colonnes plus larges, centrees dans la page. */
  .avis-grille.avis-duo{grid-template-columns:repeat(2,1fr);max-width:840px;margin:0 auto;gap:1.4rem}
  .avis-grille.avis-duo .avis{padding:1.6rem 1.7rem}
  .avis-grille.avis-duo .avis p{font-size:1rem;line-height:1.75}
  .barre-int{max-width:1060px}
}

/* ─── Mouvement reduit ─── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rev{opacity:1;transform:none;transition:none}
  .barre-collante{transition:none}
  .visuel *{animation:none!important;transition:none!important}
}