/* Nobti : page d'accueil (v2, photos et mouvement). Blanc, esprit cabinet médical. */
.accueil h2{font-family:Nunito,"Nunito Sans",sans-serif;font-weight:800;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.015em;color:var(--encre)}
.accueil h3{font-family:Nunito,"Nunito Sans",sans-serif;font-weight:800;font-size:20px}
.accueil .sur{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--vert)}
.accueil section{padding:96px 0}
.accueil figure{margin:0}
.accueil img{display:block}
.coches{list-style:none;margin:20px 0 0;padding:0}
.coches li{position:relative;padding:0 0 12px 32px}
.coches li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--brume) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232b7a5e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Apparition au défilement */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.vu{opacity:1;transform:none}
.sans-js .rv{opacity:1;transform:none}

/* 1. Ouverture : photo plein cadre à droite */
.accueil section.ouv{padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:min(calc(100vh - 64px),860px);min-height:min(calc(100svh - 64px),860px)}
.ouv-texte{align-self:center;padding:64px 48px 64px max(20px,calc((100vw - 1120px)/2 + 20px))}
.ouv h1{font-family:Nunito,"Nunito Sans",sans-serif;font-weight:900;font-size:clamp(36px,4.6vw,60px);line-height:1.06;letter-spacing:-.025em;margin:0 0 22px;animation:monte .9s .1s both cubic-bezier(.2,.7,.2,1)}
.ouv .sur{animation:monte .9s both cubic-bezier(.2,.7,.2,1)}
.ouv .intro{font-size:19px;color:var(--gris);max-width:520px;margin:0;animation:monte .9s .2s both cubic-bezier(.2,.7,.2,1)}
.ouv .actions{animation:monte .9s .3s both cubic-bezier(.2,.7,.2,1)}
.prix-ligne{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:26px 0 0;font-size:15px;color:var(--gris);animation:monte .9s .4s both cubic-bezier(.2,.7,.2,1)}
.prix-ligne b{color:var(--encre)}
.prix-ligne span{position:relative;padding-left:16px}
.prix-ligne span::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ambre)}
.ouv-photo{position:relative;overflow:hidden;border-bottom-left-radius:48px}
.ouv-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:35% 30%;animation:zoom 14s ease-out both}
.carte-attente{position:absolute;left:32px;bottom:36px;width:260px;padding:18px 20px;background:#fff;border-radius:20px;box-shadow:0 24px 60px -18px rgba(20,50,40,.35);animation:monte 1s .6s both cubic-bezier(.2,.7,.2,1)}
.ca-haut{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--gris)}
.ca-haut svg{width:18px;height:18px}
.direct{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;color:var(--vert);display:inline-flex;align-items:center;gap:5px}
.direct::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fbf71;animation:pouls 1.8s infinite}
.ca-lbl{margin:14px 0 0;font-size:14px;color:var(--gris)}
.ca-val{margin:0;font-family:Nunito,sans-serif;font-weight:900;font-size:44px;line-height:1.1;color:var(--encre)}
.ca-val b{display:inline-block;min-width:1.2em;transition:opacity .35s,transform .35s}
.ca-val b.change{opacity:0;transform:translateY(-8px)}
.ca-bas{margin:6px 0 0;padding-top:10px;border-top:1px solid var(--ligne);font-size:13px;font-weight:700;color:var(--vert)}

/* 2. Repères */
.accueil section.reperes{padding:34px 0;border-bottom:1px solid var(--ligne)}
.reperes .cadre{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.reperes div{display:flex;flex-direction:column}
.reperes b{font-family:Nunito,sans-serif;font-weight:900;font-size:30px;color:var(--vert);line-height:1.1}
.reperes span{font-size:15px;color:var(--gris)}

/* 3. Une journée : photo fixe, l'heure avance au défilement */
.j-entete{max-width:640px;margin-bottom:44px}
.j-grille{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:start}
.j-photo{position:sticky;top:96px;border-radius:28px;overflow:hidden;aspect-ratio:4/3.2}
.j-photo img{width:100%;height:100%;object-fit:cover}
.j-ecran{position:absolute;right:20px;top:20px;width:230px;padding:16px 18px;background:rgba(255,255,255,.95);border-radius:18px;box-shadow:0 18px 40px -16px rgba(20,50,40,.4);display:flex;flex-direction:column;gap:4px}
.j-heure{font-size:13px;font-weight:800;color:var(--gris);letter-spacing:.04em}
.j-est{font-size:15px;color:var(--gris)}
.j-est b{font-family:Nunito,sans-serif;font-weight:900;font-size:36px;color:var(--encre);margin-right:4px}
.j-barre{height:6px;border-radius:6px;background:var(--brume);overflow:hidden;margin-top:6px}
.j-barre i{display:block;height:100%;width:90%;border-radius:6px;background:var(--vert);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.j-etapes{list-style:none;margin:0;padding:8vh 0 18vh}
.j-etape{position:relative;padding:0 0 0 30px;margin:0 0 26vh;opacity:.32;transition:opacity .5s}
.j-etape:last-child{margin-bottom:0}
.j-etape::before{content:"";position:absolute;left:0;top:6px;bottom:-26vh;width:2px;background:var(--ligne)}
.j-etape:last-child::before{bottom:0}
.j-etape::after{content:"";position:absolute;left:-5px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ligne);transition:all .4s}
.j-etape.actif{opacity:1}
.j-etape.actif::after{background:var(--ambre);border-color:var(--ambre)}
.j-h{display:block;font-weight:800;font-size:14px;color:var(--vert);margin-bottom:6px}
.j-etape h3{font-size:24px;margin-bottom:10px}
.j-etape p{margin:0;color:var(--gris)}

/* 4. Accueil du cabinet */
.accueil section.accueil-bloc{background:var(--doux)}
.a-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}
.a-photo{position:relative}
.a-photo img{width:100%;border-radius:28px;aspect-ratio:4/3.4;object-fit:cover}
.a-boutons{position:absolute;right:-24px;bottom:-28px;display:flex;flex-direction:column;gap:10px;width:240px;padding:14px;background:#fff;border-radius:20px;box-shadow:0 24px 50px -20px rgba(20,50,40,.4)}
.a-boutons span{display:block;padding:15px;border-radius:13px;text-align:center;font-weight:800;color:#fff}
.a-boutons .b1{background:var(--vert)}
.a-boutons .b2{background:#3a9a6e}
.a-texte p{color:var(--gris)}

/* 5. Côté patient : la vidéo de démonstration */
.p-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:64px;align-items:center}
.p-texte p{color:var(--gris);max-width:520px}
.p-video{justify-self:center;width:100%;max-width:340px;text-align:center}
.p-video video{display:block;width:100%;height:auto;aspect-ratio:480/854;border-radius:28px;background:var(--brume);box-shadow:0 30px 70px -30px rgba(20,50,40,.45)}
.p-video figcaption{margin-top:14px;font-size:14px;font-weight:700;color:var(--gris)}

/* 6. Bande photo */
.accueil section.bande{position:relative;padding:120px 0;overflow:hidden}
.bande>img,.fin>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bande>img{object-position:center 40%}
.bande .cadre,.fin .cadre{position:relative}
.b-carte{max-width:520px;padding:40px;background:#fff;border-radius:28px;box-shadow:0 30px 70px -30px rgba(20,50,40,.45)}

/* 7. Tarif */
.t-entete{margin-bottom:36px}
.tarif{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:stretch}
.tarif .offre{grid-row:span 2}
.offre,.option{padding:36px;border-radius:28px}
.offre{background:#fff;border:2px solid var(--vert);box-shadow:0 30px 60px -36px rgba(20,50,40,.5)}
.option{background:var(--brume)}
.tarif .p{font-family:Nunito,sans-serif;font-weight:900;font-size:46px;line-height:1.1;color:var(--encre)}
.tarif .p small{font-family:"Nunito Sans",sans-serif;font-size:16px;font-weight:600;color:var(--gris)}
.se{display:inline-block;margin:10px 0 6px;padding:5px 12px;border-radius:99px;background:var(--brume);color:var(--vert);font-weight:800;font-size:14px}
.offre .btn{margin-top:12px}
.option h3{margin:0 0 10px}
.option p{color:var(--gris)}

/* 8. Adhésion */
.accueil section.adhesion{background:var(--doux)}
.ligne{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:n}
.ligne li{position:relative;padding-top:64px}
.ligne li::before{content:"";position:absolute;left:52px;right:-28px;top:23px;height:2px;background:var(--ligne)}
.ligne li:last-child::before{display:none}
.ligne span{position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;background:var(--vert);color:#fff;font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center}
.ligne h3{margin-bottom:8px}
.ligne p{margin:0;color:var(--gris)}

/* 9. Questions */
.q-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.q-grille h2{margin-bottom:14px}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-weight:800;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert);transform:rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{margin:0 0 20px;color:var(--gris)}

/* 10. Fin */
.accueil section.fin{position:relative;padding:140px 0;overflow:hidden}
.fin>img{object-position:center 45%}
.f-carte{max-width:460px;margin-left:auto;padding:40px;background:#fff;border-radius:28px;box-shadow:0 30px 70px -30px rgba(20,50,40,.45)}
.f-carte p{color:var(--gris);margin:10px 0 24px}

@keyframes monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(47,191,113,.5)}70%{box-shadow:0 0 0 8px rgba(47,191,113,0)}100%{box-shadow:0 0 0 0 rgba(47,191,113,0)}}

/* Tablette */
@media(max-width:980px){
 .accueil section{padding:72px 0}
 .accueil section.ouv{grid-template-columns:1fr;min-height:0}
 .ouv-texte{padding:40px 20px 36px}
 .ouv-photo{height:62vh;min-height:360px;border-radius:0}
 .j-grille,.a-grille,.p-grille,.q-grille,.tarif{grid-template-columns:1fr;gap:36px}
 .j-photo{top:76px;z-index:2;aspect-ratio:16/10}
 .j-etapes{padding:24px 0 0}
 .j-etape{margin-bottom:40px;opacity:1}
 .j-etape::before{bottom:-40px}
 .a-boutons{right:12px;bottom:-24px}
 .reperes .cadre{grid-template-columns:repeat(2,1fr)}
}
/* Téléphone */
@media(max-width:600px){
 .accueil section{padding:60px 0}
 .ouv-photo{height:54vh;min-height:320px}
 .ouv-photo img{object-position:72% 25%}
 .carte-attente{left:16px;right:16px;bottom:16px;width:auto;padding:14px 16px}
 .ca-val{font-size:36px}
 .j-photo{position:relative;top:0}
 .j-ecran{right:12px;top:12px;width:190px;padding:12px 14px}
 .j-est b{font-size:28px}
 .a-boutons{position:relative;right:auto;bottom:auto;width:auto;margin:-40px 16px 0}
 .ligne{grid-template-columns:1fr;gap:28px}
 .ligne li{padding:0 0 0 64px;min-height:48px}
 .ligne li::before{display:none}
 .b-carte,.f-carte,.offre,.option{padding:26px}
 .accueil section.bande,.accueil section.fin{padding:200px 0 24px}
 .tarif .p{font-size:38px}
 .reperes b{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
 .rv{opacity:1;transform:none;transition:none}
 .ouv *,.ouv-photo img,.carte-attente{animation:none!important}
}