:root{
  --container:1280px; --content:720px; --wide:1140px;
  --vert:#1E3A30; --vert-profond:#15271F;
  --bordeaux:#6E2733; --creme:#FFFFFF; --laiton:#6E2733;
  --encre:#0E1512;
  --font:"Outfit","Helvetica Neue",Arial,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); background:#fff; color:var(--encre); -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }



















/* ============ HERO TEXTE (SEO) ============ */
.shero{ padding:clamp(128px,18vh,190px) clamp(26px,5vw,80px) clamp(46px,7vh,78px); background:var(--vert-profond); color:#fff; }
.shero-inner{ max-width:1100px; margin:0 auto; }
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:13.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:28px; margin-left:-2px; }
    .crumb a{ padding:6px 2px; }
.crumb a{ color:rgba(255,255,255,.6); transition:color .25s; text-underline-offset:4px; }
  .crumb a:hover{ text-decoration:underline; }
.crumb a:hover{ color:#fff; }
.crumb .sep{ opacity:.5; }
.crumb [aria-current]{ color:var(--laiton); }
.shero .kicker{ font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--laiton); margin-bottom:22px; }
.shero h1{ font-family:var(--font); font-weight:200; font-size:clamp(40px,6vw,88px); line-height:1.0; letter-spacing:-.03em; color:#fff; margin:0; max-width:20ch; }
.shero h1 em{ font-style:normal; font-weight:400; color:var(--creme); }
.shero .lede{ margin-top:28px; max-width:70ch; font-size:clamp(17px,1.35vw,20.5px); font-weight:300; line-height:1.68; color:rgba(255,255,255,.85); }

/* ============ CORPS ARTICLE ============ */
.article{ padding:clamp(60px,9vh,110px) clamp(26px,5vw,80px) clamp(40px,6vh,70px); }
.article-inner{ max-width:1160px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(48px,6vw,90px); align-items:start; }
.prose{ max-width:72ch; }
.prose > section{ margin-bottom:clamp(44px,6vh,72px); }
.prose h2{ font-family:var(--font); font-weight:300; font-size:clamp(28px,3.2vw,44px); line-height:1.1; letter-spacing:-.02em; color:var(--vert); margin:0 0 22px; }
.prose h2 em{ font-style:normal; font-weight:500; color:var(--bordeaux); }
.prose h3{ font-family:var(--font); font-weight:500; font-size:clamp(19px,1.5vw,23px); color:var(--vert); margin:30px 0 12px; letter-spacing:-.01em; }
.prose p{ font-size:clamp(16px,1.12vw,18px); font-weight:300; line-height:1.82; color:#47514C; }
.prose p + p{ margin-top:18px; }
.prose ul{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.prose ul li{ position:relative; padding-left:30px; font-size:clamp(15.5px,1.08vw,17.5px); font-weight:300; line-height:1.65; color:#47514C; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--laiton); }
.prose .lead{ font-size:clamp(18px,1.4vw,22px); font-weight:300; line-height:1.7; color:var(--vert); }

/* encart photo vide */
.photo-slot{ margin:clamp(30px,4vh,46px) 0; width:100%; aspect-ratio:16/9; border:1.5px dashed rgba(30,58,48,.32); background:
  repeating-linear-gradient(45deg, rgba(30,58,48,.03) 0 12px, rgba(30,58,48,.06) 12px 24px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; color:var(--vert); }
.photo-slot svg{ width:38px; height:38px; opacity:.5; }
.photo-slot .ps-t{ font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; opacity:.62; }
.photo-slot .ps-s{ font-size:13px; font-weight:300; opacity:.5; max-width:40ch; }
.photo-slot.portrait{ aspect-ratio:4/5; }

/* photo remplie */
.prose .photo{ margin:clamp(30px,4vh,46px) 0; }
.prose .photo img{ width:100%; height:auto; display:block; }
.prose .photo figcaption{ margin-top:14px; font-size:13.5px; font-weight:300; line-height:1.5; color:#6B736E; }

/* En bref (featured snippet) */
.enbref{ background:var(--creme); padding:clamp(26px,3vh,34px) clamp(26px,3vw,38px); margin:0 0 clamp(38px,5vh,56px); }
.enbref h2{ font-family:var(--font); font-weight:500; font-size:clamp(15px,1.1vw,17px); letter-spacing:.12em; text-transform:uppercase; color:var(--bordeaux); margin:0 0 16px; }
.enbref .enbref-txt{ margin:0; max-width:70ch; font-size:clamp(17px,1.35vw,20.5px); font-weight:300; line-height:1.68; color:#47514C; }
.enbref ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.enbref ul li{ position:relative; padding-left:28px; font-size:clamp(15px,1.08vw,17px); font-weight:300; line-height:1.6; color:#47514C; }
.enbref ul li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:50%; background:var(--laiton); }
.enbref ul li strong{ font-weight:500; color:var(--vert); }

/* Signature médicale (E-E-A-T) */
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 clamp(30px,4vh,44px); padding-bottom:22px; border-bottom:1px solid rgba(14,21,18,.12); font-size:13.5px; color:#6B736E; }
.byline .rev{ color:var(--vert); font-weight:500; }
.byline .sep{ opacity:.4; }
.byline time{ color:#6B736E; }

/* ============ FAQ ============ */
.faq{ border-top:1px solid rgba(14,21,18,.12); padding-top:clamp(30px,4vh,48px); }
.faq details{ border-bottom:1px solid rgba(14,21,18,.12); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative; font-size:clamp(17px,1.3vw,20px); font-weight:400; color:var(--vert); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:300; color:var(--bordeaux); transition:transform .3s; }
.faq details[open] summary::after{ content:"–"; }
.faq details[open] summary{ color:var(--bordeaux); }
.faq .ans{ padding:0 40px 24px 0; font-size:clamp(15.5px,1.08vw,17.5px); font-weight:300; line-height:1.75; color:#47514C; }

/* ============ ASIDE ============ */
.aside{ position:sticky; top:110px; display:flex; flex-direction:column; gap:22px; }
.aside .card{ background:var(--creme); padding:30px 28px; }
.aside .card .sf-h{ font-family:var(--font); font-weight:500; font-size:18px; color:var(--vert); margin:0 0 10px; letter-spacing:-.01em; }
.aside .card p{ font-size:14.5px; font-weight:300; line-height:1.65; color:#47514C; margin:0 0 18px; }
.aside .card .btn{ width:100%; }
.aside .related .sf-h{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--laiton); margin:0 0 16px; }
.aside .related a{ display:block; padding:13px 0; border-top:1px solid rgba(14,21,18,.12); font-size:15.5px; font-weight:400; color:var(--vert); transition:color .25s, padding-left .25s; }
.aside .related a:first-of-type{ border-top:0; }
.aside .related a:hover{ color:var(--bordeaux); padding-left:6px; }
.aside .card.info{ background:#F3F6F4; }
.aside .card.info p{ margin-bottom:14px; }
.aside .card.info .alink{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; color:var(--bordeaux); border-bottom:1.5px solid var(--bordeaux); padding-bottom:2px; transition:gap .25s; }
.aside .card.info .alink:hover{ gap:13px; }

/* ============ CTA ============ */
.cta{ background:var(--vert); color:#fff; padding:clamp(80px,12vh,140px) clamp(26px,5vw,80px); text-align:center; }
.cta h2{ font-family:var(--font); font-weight:200; font-size:clamp(34px,4.6vw,72px); line-height:1.0; letter-spacing:-.03em; color:#fff; margin:0 auto; max-width:18ch; }
.cta h2 em{ font-style:normal; font-weight:400; color:var(--creme); }
.cta p{ margin:26px auto 0; max-width:54ch; font-size:clamp(16px,1.2vw,19px); font-weight:300; line-height:1.7; color:rgba(255,255,255,.82); }
.cta-actions{ margin-top:44px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; font-size:16px; font-weight:500; letter-spacing:.02em; padding:16px 32px; border-radius:980px; white-space:nowrap; transition:transform .2s, background .25s, border-color .25s, color .25s; }
.btn-primary{ background:var(--bordeaux); color:var(--creme); }
.btn-primary:hover{ background:#7d2c3a; transform:translateY(-2px); }
.btn-ghost{ background:var(--creme); color:var(--vert); }
.btn-ghost:hover{ background:#fff; transform:translateY(-2px); }
.btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn-outline:hover{ border-color:#fff; transform:translateY(-2px); }

/* ============ FOOTER ============ */
.foot{ background:var(--vert-profond); color:rgba(255,255,255,.6); padding:40px clamp(26px,5vw,80px); font-size:13px; letter-spacing:.04em; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.08); }
.foot a{ color:rgba(255,255,255,.6); }
.foot a:hover{ color:#fff; }

/* ============ RESPONSIVE ============ */

@media (max-width:900px){
  .article-inner{ grid-template-columns:1fr; gap:40px; }
  .aside{ position:static; }
}

/* ============ FOOTER GLOBAL ============ */
.site-footer{ position:relative; z-index:10; background:var(--vert-profond); color:rgba(255,255,255,.72); font-family:var(--font); }
.site-footer *{ box-sizing:border-box; }
.site-footer a{ text-decoration:none; }
.site-footer .sf-inner{ max-width:1300px; margin:0 auto; padding:clamp(56px,8vh,88px) clamp(26px,5vw,80px) clamp(36px,5vh,52px); display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:clamp(32px,4vw,64px); }
.site-footer .sf-h{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 20px; }
.site-footer .sf-col{ display:flex; flex-direction:column; gap:12px; }
.site-footer .sf-col a{ font-size:15px; font-weight:300; color:rgba(255,255,255,.72); transition:color .25s, padding-left .25s; width:fit-content; }
.site-footer .sf-col a:hover{ color:#fff; padding-left:4px; }
.site-footer .sf-logo{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.site-footer .sf-mark{ width:52px; height:52px; flex:none; }
.site-footer .sf-mark img{ width:100%; height:100%; object-fit:contain; }
.site-footer .sf-wm{ display:flex; flex-direction:column; line-height:1.15; gap:3px; }
.site-footer .sf-wm .k{ font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.site-footer .sf-wm .city{ font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.site-footer .sf-tag{ font-size:14px; font-weight:300; line-height:1.7; color:rgba(255,255,255,.6); max-width:34ch; margin:0; }
.site-footer .sf-contact address{ font-style:normal; font-size:15px; font-weight:300; line-height:1.9; color:rgba(255,255,255,.72); }
.site-footer .sf-contact address a{ color:rgba(255,255,255,.92); }
.site-footer .sf-contact address a:hover{ color:#fff; }
.site-footer .sf-contact a.sf-cta{ display:inline-flex; align-items:center; justify-content:center; margin-top:20px; background:var(--creme); color:var(--vert); font-size:14px; font-weight:500; letter-spacing:.02em; padding:13px 24px; border-radius:980px; transition:background .25s, transform .2s; width:fit-content; }
.site-footer .sf-contact a.sf-cta:hover{ background:#fff; transform:translateY(-1px); }
.site-footer .sf-bottom{ max-width:1300px; margin:0 auto; padding:22px clamp(26px,5vw,80px); border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.04em; color:rgba(255,255,255,.5); }
.site-footer .sf-bottom a{ color:rgba(255,255,255,.5); }
.site-footer .sf-bottom a:hover{ color:#fff; }
@media (max-width:860px){ .site-footer .sf-inner{ grid-template-columns:1fr 1fr; gap:38px 32px; } .site-footer .sf-bottom{ flex-direction:column; } }
@media (max-width:520px){ .site-footer .sf-inner{ grid-template-columns:1fr; } }

/* ============ DÉROULÉ ÉTAPE PAR ÉTAPE ============ */
.steps{ list-style:none; margin:26px 0 0; padding:0; }
.steps li{ position:relative; padding:20px 0 20px 32px; border-left:1.5px solid rgba(30,58,48,.16); }
.steps li::before{ content:""; position:absolute; left:-6px; top:28px; width:11px; height:11px; border-radius:50%; background:var(--bordeaux); }
.steps li h3{ margin:0 0 6px; display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; }
.steps li .meta{ font-size:12.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:#6B736E; }
.steps li p{ margin:0; font-size:clamp(15.5px,1.08vw,17.5px); }
/* CTA contextuel au fil du texte */
.pcta{ margin:28px 0 0; }
.pcta a{ display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:500; color:var(--bordeaux); border-bottom:1.5px solid var(--bordeaux); padding-bottom:3px; transition:gap .25s; }
.pcta a:hover{ gap:16px; }
/* duo de photos */
.prose .photo-duo .duo{ display:flex; gap:10px; align-items:flex-start; }
.prose .photo-duo .duo picture{ display:block; flex:1 1 0; min-width:0; }
.prose .photo-duo .duo img{ width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; }





  
  
  
  

/* Video explicative. Aucune requete vers YouTube avant le clic du visiteur :
   l affiche est typographique, l iframe est injectee par assets/video.js. */
.prose .video{ margin:clamp(30px,4vh,46px) 0; }
.prose .video .vframe{ position:relative; aspect-ratio:16/9; background:#1E3A30; overflow:hidden; }
.prose .video .vframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.prose .video button{ position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:10px; padding:clamp(20px,3vw,34px); background:#1E3A30; border:0; cursor:pointer; text-align:left; font:inherit; color:#F1EADB; transition:background .3s ease; }
.prose .video button:hover{ background:#24463a; }
.prose .video button:focus-visible{ outline:2px solid #F1EADB; outline-offset:-6px; }
.prose .video .vplay{ width:54px; height:54px; border-radius:50%; background:#6E2733; display:flex; align-items:center; justify-content:center; flex:none; }
.prose .video .vplay::after{ content:""; width:0; height:0; border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px; }
.prose .video .vt{ font-size:clamp(16px,1.5vw,19px); font-weight:400; line-height:1.4; max-width:34ch; }
.prose .video .vh{ font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; opacity:.7; }
.prose .video figcaption{ margin-top:14px; font-size:13.5px; font-weight:300; line-height:1.5; color:#6B736E; }

/* Bouton du premier écran mobile, dans le bandeau vert */
.shero-rdv{display:none}
@media (max-width:599px){.shero .shero-rdv{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:16px;padding:0 20px;box-sizing:border-box;border:1px solid #F1EADB;border-radius:980px;color:#F1EADB;font-size:15px;font-weight:500;letter-spacing:.01em;text-align:center;text-decoration:none;line-height:1.2;transition:background .2s}.shero .shero-rdv:hover{background:rgba(241,234,219,.12)}.shero .shero-rdv:focus-visible{outline:2px solid #F1EADB;outline-offset:3px}}
/* Largeur de lecture du texte courant */
.prose>p,.prose>ul,.prose>ol,.prose>section>p,.prose>section>ul,.prose>section>ol,.enbref .enbref-txt,.enbref-txt{max-width:56ch}
