/* ===================================================================
   AEMERA · pages produit, design 2026
   Pages : analyse-prise-de-sang, analyse-symptome, bilan-bien-etre
   (produit.css) et la-methode-aemera (styles internes).
   Chargée après socle-2026.css. Aucun texte ni script modifié :
   les emojis sont masqués, les animations de produit.js conservées.
   =================================================================== */

body{background:var(--a-bg);font-family:var(--f-body);color:var(--a-ink)}

/* ---------- En-tête : barre blanche, collante ---------- */
.entete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--a-line);padding:.95rem var(--a-gutter)}
.entete .int{max-width:var(--a-max)}
.entete a.marque{font-family:var(--f-body);font-weight:600;font-size:1.02rem;letter-spacing:.24em;color:var(--a-forest)}
.entete a.retour{font-family:var(--f-body);font-weight:500;font-size:.95rem;color:var(--a-ink);
  background:linear-gradient(var(--a-forest),var(--a-forest)) no-repeat right bottom/0% 1.5px;padding-bottom:2px;transition:background-size .35s var(--ease)}
.entete a.retour:hover{color:var(--a-forest);background-size:100% 1.5px;background-position:left bottom}
.fil{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em;color:var(--a-ink-soft);max-width:calc(var(--a-max) + 2*var(--a-gutter));padding:1.4rem var(--a-gutter) 0;margin:0 auto}
.fil a{color:var(--a-forest)}

/* ---------- Titres ---------- */
.eyebrow{background:none!important;padding:0!important;border-radius:0!important;font-size:.76rem!important;letter-spacing:.14em!important;color:var(--a-forest)!important}
.bg-forest .eyebrow{color:var(--a-sage)!important}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,5.8vw,4.8rem);line-height:.98;letter-spacing:-.03em;color:var(--a-forest);text-wrap:balance}
h1 em{font-style:italic;color:var(--a-sage-deep)}
h2.question,.section-question{font-family:var(--f-display);font-weight:400;font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.04;letter-spacing:-.02em;color:var(--a-forest);margin-bottom:clamp(1.6rem,3vw,2.4rem);text-wrap:balance}
.bg-forest h2.question{color:#fff}
.sec-intro,.section-intro{font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.6;color:var(--a-ink);opacity:1;font-weight:400}
.section-intro{color:var(--a-forest);font-weight:500}

/* ---------- Rythme ---------- */
.sec{padding:clamp(4.5rem,8vw,7.5rem) var(--a-gutter)}
.sec-int{max-width:780px}
.sec-large{max-width:var(--a-max)}
.bg-stone{background:var(--a-paper)}
.bg-forest{background:var(--a-forest);color:#fff}
.bg-pearl{background:var(--a-bg)}

/* ---------- Hero ---------- */
.hero{padding:clamp(2.4rem,5vw,4.5rem) var(--a-gutter) clamp(2.5rem,5vw,4rem)}
.hero-int{max-width:var(--a-max);gap:clamp(2.5rem,5vw,5rem)}
.chapeau,.prod-chapeau{font-size:clamp(1.08rem,1.5vw,1.2rem);line-height:1.65;color:var(--a-ink-soft);opacity:1}
.chapeau strong,.prod-chapeau strong{color:var(--a-forest)}

/* Bloc d'achat : le prix d'abord, le bouton ensuite, la garantie dessous */
.bloc-achat,.hero-buy-block{background:var(--a-paper);border-radius:0;padding:clamp(1.5rem,3vw,2.2rem);margin-top:2rem;position:relative;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);border-left:3px solid var(--a-forest)}
.prix,.price-main{font-family:var(--f-display);font-weight:400;font-size:clamp(3.2rem,5vw,4.2rem);letter-spacing:-.03em;line-height:.9;color:var(--a-forest)}
.prix-note,.price-label{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--a-ink-soft);opacity:1}
.price-label{margin-top:.5rem}
.micro-legal,.prod-legal{font-size:.84rem;line-height:1.55;color:var(--a-ink-soft);opacity:1}

/* Boutons des pages produit : même dessin que l'accueil */
.btn{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:1.1rem;min-height:56px;padding:.5rem .5rem .5rem 1.4rem;
  font-family:var(--f-body);font-weight:600;font-size:1.02rem;color:#fff;border-radius:0;box-shadow:none!important;
  clip-path:polygon(0 0,calc(100% - var(--cut-sm)) 0,100% var(--cut-sm),100% 100%,0 100%);
  background:linear-gradient(var(--a-sage-deep),var(--a-sage-deep)) no-repeat left/0% 100%,var(--a-forest);transition:background-size .45s var(--ease),opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.btn::after{content:'';flex:none;width:40px;height:40px;background:rgba(255,255,255,.14)}
.btn::before{content:'';position:absolute;right:.5rem;top:50%;width:40px;height:40px;margin-top:-20px;background:#fff;
  -webkit-mask:var(--arrow) center/16px no-repeat;mask:var(--arrow) center/16px no-repeat;transition:translate .35s var(--ease)}
.btn:hover{background-size:100% 100%,auto}
.btn:hover::before{translate:4px 0}
.btn-full{width:100%;margin-top:1.3rem}
.btn-clair{background:linear-gradient(var(--a-sage-pale),var(--a-sage-pale)) no-repeat left/0% 100%,#fff;color:var(--a-forest)}
.btn-clair::before{background:var(--a-forest)}
.btn-clair::after{background:var(--a-sage-pale)}
.cta-fin .btn{min-width:min(100%,340px)}
.lien-doux,.lien-exemple{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-weight:600;font-size:.98rem;color:var(--a-forest);text-decoration:none;
  background:linear-gradient(var(--a-forest),var(--a-forest)) no-repeat left bottom/100% 1.5px;padding-bottom:2px;transition:background-size .35s var(--ease)}
.lien-doux:hover,.lien-exemple:hover{background-size:0% 1.5px;background-position:right bottom}

/* Visuel du rapport : carte blanche posée sur une scène sauge */
.visuel{background:#fff;border:clamp(1.2rem,3.5vw,2.8rem) solid var(--a-sage);border-radius:0;padding:clamp(1.2rem,2.4vw,1.8rem);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.visuel-entete{border-bottom:1px solid var(--a-line)}
.pastille,.mockup-dot{display:none}
.visuel-titre,.mockup-title{margin-left:0;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;color:var(--a-forest)}

/* ---------- Listes à emojis : les emojis laissent place à une numérotation ---------- */
.liste-ico,.methode-liste-icones{counter-reset:dzl;gap:0;border-top:1.5px solid var(--a-forest)}
.liste-ico li,.methode-liste-icones li{counter-increment:dzl;position:relative;padding:1.3rem 0 1.3rem 3.4rem;border-bottom:1px solid var(--a-line);
  font-size:1.02rem;line-height:1.62;color:var(--a-ink-soft);gap:0;transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1),background-color .3s}
.liste-ico li::before,.methode-liste-icones li::before{content:counter(dzl,decimal-leading-zero);position:absolute;left:0;top:1.45rem;
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;color:var(--a-sage-deep)}
.liste-ico li:hover,.methode-liste-icones li:hover{background:var(--a-paper)}
.liste-ico .ico,.methode-liste-icones .icone,.scene .ico,.scene-ico{display:none!important}
.liste-ico b,.methode-liste-icones strong{color:var(--a-ink);font-weight:600}

/* ---------- Deux scènes : ce qu'on trouve ailleurs / ce qu'on reçoit ici ---------- */
.scenes{gap:0}
.scene{position:relative;background:var(--a-paper)!important;border:0;border-radius:0;padding:clamp(1.6rem,3vw,2.4rem);padding-top:clamp(4.2rem,6vw,5rem)}
.scene::before{content:'';position:absolute;left:clamp(1.6rem,3vw,2.4rem);top:clamp(1.5rem,2.6vw,2rem);width:30px;height:30px;background:var(--a-ink-soft);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='.75' y='.75' width='28.5' height='28.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='m10 10 10 10M20 10 10 20' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='.75' y='.75' width='28.5' height='28.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='m10 10 10 10M20 10 10 20' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
.scene h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2rem);line-height:1.1;color:var(--a-ink);margin-bottom:.8rem}
.scene p{font-size:1rem;line-height:1.65;color:var(--a-ink-soft);opacity:1}
.scenes .scene:last-child{background:var(--a-forest)!important;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.scenes .scene:last-child::before{background:var(--a-sage);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='.75' y='.75' width='28.5' height='28.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='m9 15 4 4 8-9' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Crect x='.75' y='.75' width='28.5' height='28.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='m9 15 4 4 8-9' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E")}
.scenes .scene:last-child h3{color:#fff}
.scenes .scene:last-child p{color:rgba(255,255,255,.82)}
.scenes .scene:last-child em{color:var(--a-sage);font-style:italic}

/* Scènes de la Méthode : quatre usages concrets */
.scenes-grid{gap:1px;background:var(--a-line);border:1px solid var(--a-line);counter-reset:dzs}
.scene-card{counter-increment:dzs;background:var(--a-bg)!important;border-radius:0;padding:clamp(1.6rem,3vw,2.2rem);position:relative;transition:background-color .35s}
.scene-card::before{content:counter(dzs,decimal-leading-zero);display:block;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;color:var(--a-sage-deep);margin-bottom:1rem}
.scene-card h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.85rem);line-height:1.12;color:var(--a-forest);margin-bottom:.7rem}
.scene-card p{font-size:1rem;color:var(--a-ink-soft)}
.scene-card:hover{background:var(--a-sage-pale)!important}
@media(min-width:880px){.scenes-grid{display:grid;grid-template-columns:repeat(2,1fr)}}

/* ---------- Avis ---------- */
.avis-grille{gap:1rem}
.avis{background:#fff!important;border:0;border-radius:0;padding:clamp(1.6rem,2.8vw,2.2rem);position:relative;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.etoiles{color:var(--a-forest);font-size:.85rem;letter-spacing:.2em;margin-bottom:1rem}
.avis p{font-family:var(--f-display);font-style:normal;font-size:clamp(1.25rem,1.8vw,1.45rem);line-height:1.35;color:var(--a-ink);opacity:1}
.avis .qui{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--a-forest);margin-top:1.2rem;padding-top:.9rem;border-top:1px solid var(--a-line)}

/* ---------- Étapes : un fil qui relie les cases ---------- */
.etapes,.etapes-liste{gap:0;position:relative}
.etapes li,.etapes-liste li{position:relative;gap:1.4rem;padding-bottom:2rem;font-size:1.02rem;color:var(--a-ink-soft)}
.etapes li:not(:last-child)::after,.etapes-liste li:not(:last-child)::after{content:'';position:absolute;left:21px;top:46px;bottom:4px;width:1.5px;background:var(--a-mute)}
.etape-num{width:44px;height:44px;border-radius:0!important;background:var(--a-forest);color:#fff;font-family:var(--f-mono);font-weight:500;font-size:.95rem;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transition:background-color .3s}
.etapes li:hover .etape-num,.etapes-liste li:hover .etape-num{background:var(--a-sage-deep)}
.etapes b,.etapes-liste strong{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2vw,1.7rem);line-height:1.15;color:var(--a-forest);margin-bottom:.35rem;display:block}

/* ---------- Données : trois chiffres forts ---------- */
.chiffres{gap:0;border-top:1px solid rgba(255,255,255,.18)}
.chiffre{background:none!important;border:0!important;border-radius:0;text-align:left;padding:1.4rem 1.2rem 1.4rem 0;border-right:1px solid rgba(255,255,255,.18)!important}
.chiffre:last-child{border-right:0!important}
.chiffre .n{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;color:#fff!important}
.chiffre .l{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--a-sage);opacity:1;margin-top:.6rem}
.bg-forest p strong{color:#fff}

/* ---------- Réassurance ---------- */
.reassurance,.reassurance-encadre{background:#fff;border:0;border-radius:0;padding:clamp(1.6rem,3vw,2.4rem);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);border-top:3px solid var(--a-forest)}
.reassurance h3,.reassurance-titre{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,2.4vw,2rem);color:var(--a-forest);margin-bottom:1.2rem}
.points,.reassurance-points{gap:0}
.points li,.reassurance-points li{padding:1rem 0 1rem 1.8rem;border-bottom:1px solid var(--a-line);font-size:1rem;color:var(--a-ink-soft)}
.points li:last-child,.reassurance-points li:last-child{border-bottom:0}
.points li::before{top:1.6rem;width:8px;height:8px;border-radius:0;background:var(--a-forest)}
.points strong{color:var(--a-ink)}
.reassurance-bloc p{font-size:1.05rem;color:var(--a-ink-soft)}
.cout-bloc{background:var(--a-bg);border-left:3px solid var(--a-forest);border-radius:0;padding:1.4rem 1.5rem}
.cout-titre{font-family:var(--f-display);font-weight:400;font-size:1.5rem;color:var(--a-forest)}

/* ---------- Appel final ---------- */
.cta-fin .nom,.cta-nom{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;color:var(--a-forest);margin-bottom:.8rem}
.cta-fin .prix{font-size:clamp(4rem,8vw,6rem)}
.cta-fin .sous,.cta-sous-bouton{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;color:var(--a-ink-soft);opacity:1;line-height:1.7}

/* ---------- FAQ ---------- */
.faq,.faq-liste{gap:0;border-top:1.5px solid var(--a-forest)}
.faq details,.faq-item{background:none!important;border:0;border-bottom:1px solid var(--a-line);border-radius:0;padding:0;position:relative}
.faq details::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a-forest);scale:1 0;transform-origin:top;transition:scale .45s var(--ease)}
.faq details[open]::before{scale:1 1}
.faq summary,.faq-item summary{font-family:var(--f-body);font-weight:500;font-size:clamp(1.05rem,1.5vw,1.18rem);color:var(--a-ink);padding:1.4rem 0;transition:padding-left .4s var(--ease),color .25s}
.faq details[open] summary,.faq summary:hover{padding-left:1.1rem;color:var(--a-forest)}
.faq summary::after{content:'+';width:38px;height:38px;border:1px solid var(--a-line);display:grid;place-items:center;font-family:var(--f-body);font-weight:300;font-size:1.3rem;color:var(--a-forest);transition:transform .3s var(--ease),background-color .25s,color .25s}
.faq details[open] summary::after{background:var(--a-forest);color:#fff;border-color:var(--a-forest)}
.faq details p{font-size:1rem;color:var(--a-ink-soft);opacity:1;padding:0 0 1.5rem 1.1rem;margin-top:0}

/* ---------- Barre d'achat collante ---------- */
.barre-collante{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--a-line);box-shadow:none}
.barre-int{max-width:var(--a-max)}
.barre-nom{font-family:var(--f-display);font-weight:400;font-size:1.2rem;color:var(--a-forest)}
.barre-prix{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;color:var(--a-ink-soft);opacity:1}
.barre-collante .btn{min-height:50px;padding:.4rem .4rem .4rem 1.1rem;font-size:.95rem}
.barre-collante .btn::after{width:36px;height:36px}
.barre-collante .btn::before{width:36px;height:36px;margin-top:-18px;right:.4rem}

/* ---------- Méthode : sections et hero ---------- */
main{max-width:calc(var(--a-max) + 2*var(--a-gutter));padding-left:var(--a-gutter);padding-right:var(--a-gutter)}
.methode-section{max-width:none;padding:clamp(4.5rem,8vw,7rem) max(var(--a-gutter),calc((100% - 780px)/2))}
.prod-hero{border-bottom:0}
.prod-hero .eyebrow{margin-top:1rem}
.btn-full.btn-primary{width:100%}

/* ---------- Pied ---------- */
footer{background:var(--a-ink);color:rgba(255,255,255,.6);border:0;padding:2.4rem var(--a-gutter) 7rem;font-size:.85rem}
footer a{color:#fff}
.legal-footer{color:var(--a-ink-soft)}
footer .legal-footer{color:rgba(255,255,255,.6)}

@media(min-width:880px){
  .scenes{grid-template-columns:repeat(2,1fr)}
}

/* Bilan : les six sources de données publiques (les emojis sont masqués,
   le nom de la source passe en titre, l'organisme en légende) */
.chiffres[style*="margin-top:1.8rem"]{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:0;gap:1px;background:rgba(255,255,255,.14)}
.chiffres[style*="margin-top:1.8rem"] .chiffre{background:var(--a-forest)!important;border:0!important;padding:1.3rem 1.1rem;position:relative}
.chiffres[style*="margin-top:1.8rem"] .chiffre::before{content:'';display:block;width:10px;height:10px;background:var(--a-sage);margin-bottom:1rem;
  clip-path:polygon(0 0,60% 0,100% 40%,100% 100%,0 100%)}
.chiffres[style*="margin-top:1.8rem"] .n{display:none}
.chiffres[style*="margin-top:1.8rem"] .l{display:block;margin:0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--a-sage)}
.chiffres[style*="margin-top:1.8rem"] .l::first-line{font-family:var(--f-display);font-size:1.45rem;letter-spacing:0;text-transform:none;color:#fff;line-height:1.5}

/* Méthode : le bloc d'achat se place à droite du titre sur grand écran */
.fil{margin-bottom:0}
main .fil{padding-left:0;padding-right:0}
@media(min-width:960px){
  .prod-hero{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(3rem,6vw,6rem);align-items:end}
  .prod-hero > *{grid-column:1}
  .prod-hero .hero-buy-block{grid-column:2;grid-row:1 / span 4;align-self:end;margin-top:0}
}

/* ======================= CORRECTIFS DE REVUE ======================= */
/* Sections sur fond Forest : tout le texte repasse en clair */
.bg-forest,.bg-forest p,.bg-forest li,.bg-forest span{color:rgba(255,255,255,.86)}
.bg-forest b,.bg-forest strong,.bg-forest h3{color:#fff}
.bg-forest .liste-ico,.bg-forest .methode-liste-icones{border-top-color:rgba(255,255,255,.5)}
.bg-forest .liste-ico li,.bg-forest .points li{border-bottom-color:rgba(255,255,255,.14)}
.bg-forest .liste-ico li::before{color:var(--a-sage)}
.bg-forest .liste-ico li:hover{background:rgba(255,255,255,.06)}
.bg-forest .points li::before{background:var(--a-sage)}
.bg-forest a{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
/* Encadré posé sur fond Forest (fond translucide défini dans la page) : texte clair */
.bg-forest .reassurance{border-top-color:var(--a-sage)}
.bg-forest .reassurance,.bg-forest .reassurance p,.bg-forest .reassurance li,.bg-forest .reassurance span{color:rgba(255,255,255,.86)}
.bg-forest .reassurance strong,.bg-forest .reassurance b,.bg-forest .reassurance h3{color:#fff}
.bg-forest .reassurance li{border-bottom-color:rgba(255,255,255,.14)}
.legal-footer{opacity:1!important}
.bg-forest .chiffre .l{color:var(--a-sage)}
/* Les blocs animés par produit.js gardent leur transition d'apparition */
.scene,.avis,.reassurance,.chiffres,.etapes li,.faq details{transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1)}

.btn:hover,.btn:active{transform:none}
.cta-fin .sous,.cta-fin p{margin-left:auto;margin-right:auto;text-align:center}

/* ======================= LECTURE MOBILE (PAGES PRODUIT) ======================= */
@media(max-width:600px){
  .prix-note,.price-label,.barre-prix,.avis .qui,.fil,.visuel-titre,.cta-fin .sous,.cta-sous-bouton{font-size:.82rem!important}
  .liste-ico li,.methode-liste-icones li,.points li,.scene p,.etapes li,.faq details p{font-size:1.0625rem}
  .micro-legal,.prod-legal{font-size:.9rem}
  .sec{padding-block:3.75rem}
  h2.question,.section-question{font-size:2rem}
}