@font-face{font-family:'Atkinson Hyperlegible';src:url(polices/atkinson-regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(polices/atkinson-bold.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Marcellus';src:url(polices/marcellus.woff) format('woff');font-weight:400;font-display:swap}

/* ---------- Couleurs de la marque ---------- */
:root{
  --bg:#FBF7F0;         /* lin : fond de page */
  --surface:#F3EADB;    /* écru : l'anneau du logo */
  --sable:#BCA88F;      /* beige Audio Claire */
  --ink:#2A221D;        /* texte */
  --muted:#5E5248;      /* texte secondaire */
  --accent:#8E3B46;     /* rose prune du kakémono, assombri pour la lisibilité */
  --on-accent:#FFFFFF;
  --line:#D9CCB8;
  --ring:#F3EADB;
  --logo:#FBF5EA;
  --wave:rgba(255,255,255,.28);
  --ok:#2F5D46;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1D1815; --surface:#2A231E; --sable:#4A3F35; --ink:#F3EADB; --muted:#C9BBA8;
    --accent:#E8A7AE; --on-accent:#2A1215; --line:#4A4038; --ring:#6A5B4C; --logo:#F3EADB;
    --wave:rgba(243,234,219,.12); --ok:#9FD3B6;
  }
}
:root[data-theme="dark"]{
  --bg:#1D1815; --surface:#2A231E; --sable:#4A3F35; --ink:#F3EADB; --muted:#C9BBA8;
  --accent:#E8A7AE; --on-accent:#2A1215; --line:#4A4038; --ring:#6A5B4C; --logo:#F3EADB;
  --wave:rgba(243,234,219,.12); --ok:#9FD3B6;
}

/* ---------- Bases ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5.5rem)}
html[data-taille="2"]{font-size:112.5%}
html[data-taille="3"]{font-size:125%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Atkinson Hyperlegible",Verdana,"Segoe UI",sans-serif;
  font-size:1.125rem;line-height:1.6;-webkit-text-size-adjust:100%;
}
h1,h2,h3{font-family:"Marcellus","Palatino Linotype",Palatino,Georgia,serif;font-weight:400;line-height:1.15;margin:0}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3{font-size:1.35rem}
p{margin:0 0 1rem;max-width:68ch}
a{color:var(--accent);text-underline-offset:.18em}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 2.5rem,76rem);margin-inline:auto}
.bloc{padding-block:clamp(3rem,7vw,5.5rem)}
.bloc > .wrap > h2{margin-bottom:1rem}
.chapo{font-size:1.2rem;color:var(--muted)}
.petit{font-size:.95rem;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:3.25rem;padding:.7rem 1.4rem;border-radius:999px;border:2px solid var(--accent);
  background:var(--accent);color:var(--on-accent);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;
}
.btn:hover{filter:brightness(1.08)}
.btn.clair{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn svg{width:1.25rem;height:1.25rem;flex:none}


/* ---------- En-tête ---------- */
.entete{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.entete .wrap{display:flex;align-items:center;gap:1rem;min-height:4.5rem;flex-wrap:wrap}
.entete .btn{min-height:2.75rem;padding:.4rem 1.15rem}
.marque{display:flex;align-items:center;text-decoration:none;color:var(--ink);margin-right:auto;padding:.4rem 0}
.marque .logo{display:block;height:3.3rem;width:auto}
.entete nav{display:contents}
.nav{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0}
.nav a{color:var(--ink);text-decoration:none;font-size:1rem;padding:.6rem 0;display:inline-block}
.nav a:hover{text-decoration:underline}
.outils{display:flex;align-items:center;gap:.6rem}
.taille{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.taille button{font:inherit;background:none;border:0;color:var(--ink);min-width:2.75rem;min-height:2.75rem;cursor:pointer}
.taille button:first-child{font-size:.9rem}
.taille button:last-child{font-size:1.25rem;font-weight:700;border-left:1px solid var(--line)}
.tel{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.menu-btn{display:none}
@media (max-width:76rem){
  .entete .tel,.entete .outils .btn{display:none}
  .menu-btn{display:inline-flex;min-height:2.75rem;padding:0 1rem;border-radius:999px;border:1px solid var(--ink);background:none;color:var(--ink);font:inherit;cursor:pointer;align-items:center}
  .nav{display:none;order:9;flex-basis:100%;flex-direction:column;gap:0;padding-bottom:.75rem}
  .nav.ouvert{display:flex}
  .nav a{padding:.75rem 0;border-top:1px solid var(--line);display:block;font-size:1.1rem}
}

/* ---------- Ouverture ---------- */
.ouverture{background:var(--sable);position:relative;overflow:hidden}
.ouverture::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 78% 50%,transparent 0 3.4rem,var(--wave) 3.4rem calc(3.4rem + 1px));
}
.ouverture .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.ouverture h1{margin-bottom:1.1rem}
.ouverture .chapo{color:var(--ink);font-size:1.25rem;max-width:34rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 1.2rem}
.note{display:flex;align-items:center;gap:.6rem;margin:0;font-size:1rem}
.note svg{width:6.2rem;height:1.2rem;flex:none}
.logo-ouverture{justify-self:center;width:min(23rem,78vw);height:auto;color:var(--logo);filter:drop-shadow(0 .5rem 1rem rgba(60,42,25,.18))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:52rem){
  .ouverture .wrap{grid-template-columns:1fr}
  .ouverture::before{background:repeating-radial-gradient(circle at 50% 82%,transparent 0 3rem,var(--wave) 3rem calc(3rem + 1px))}
  .logo-ouverture{width:min(15rem,62vw)}
}

/* Trois engagements sous l'ouverture */
.engagements{background:var(--surface);border-bottom:1px solid var(--line)}
.engagements ul{list-style:none;margin:0;padding:1.4rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.engagements li{padding-left:1rem;border-left:3px solid var(--accent)}
.engagements b{display:block;font-size:1.15rem}
.engagements span{color:var(--muted);font-size:1rem}
@media (max-width:46rem){.engagements ul{grid-template-columns:1fr}}

/* ---------- Étapes du premier rendez-vous ---------- */
.etapes{list-style:none;counter-reset:e;margin:2rem 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.etapes li{counter-increment:e;position:relative;padding-top:3.6rem}
.etapes li::before{content:counter(e);position:absolute;top:0;left:0;width:2.6rem;height:2.6rem;border-radius:50%;
  border:2px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:"Marcellus",Georgia,serif;font-size:1.3rem;background:var(--bg)}
.etapes li::after{content:"";position:absolute;top:1.3rem;left:3.1rem;right:-1rem;height:2px;background:var(--line)}
.etapes li:last-child::after{display:none}
.etapes h3{margin-bottom:.4rem}
.etapes p{font-size:1.05rem;margin:0}
@media (max-width:56rem){
  .etapes{grid-template-columns:1fr;gap:1.25rem}
  .etapes li{padding:0 0 0 3.6rem;min-height:2.8rem}
  .etapes li::after{top:3rem;bottom:-1rem;left:1.25rem;right:auto;width:2px;height:auto}
}
.encart{border:1px solid var(--line);background:var(--surface);border-radius:1rem;padding:1.1rem 1.3rem}
.encart p{margin:0}

/* ---------- Questionnaire ---------- */
.fond-ecru{background:var(--surface)}
.quiz{display:grid;grid-template-columns:1fr 1.2fr;gap:2.5rem;align-items:start}
.quiz .ligne{padding:.9rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.quiz .ligne p{margin:0;max-width:26rem}
.ouinon{display:flex;gap:.4rem;flex:none}
.ouinon label{position:relative;cursor:pointer}
.ouinon input{position:absolute;opacity:0;inset:0;margin:0}
.ouinon span{display:grid;place-items:center;min-width:4rem;min-height:2.9rem;border:2px solid var(--ink);border-radius:999px;font-weight:700}
.ouinon input:checked + span{background:var(--ink);color:var(--bg)}
.ouinon input:focus-visible + span{outline:3px solid var(--accent);outline-offset:3px}
.quiz .btn{margin-top:1.25rem}
.resultat{margin-top:1.25rem;padding:1.1rem 1.3rem;border-radius:1rem;background:var(--bg);border:2px solid var(--accent)}
.resultat[hidden]{display:none}
.resultat p{margin:0 0 .75rem}
@media (max-width:56rem){.quiz{grid-template-columns:1fr;gap:1rem}.quiz .ligne{flex-direction:column;align-items:flex-start;gap:.6rem}}

/* ---------- Appareils ---------- */
.types{list-style:none;margin:2rem 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.types svg{width:5rem;height:5rem;color:var(--accent)}
.types h3{margin:.5rem 0 .35rem}
.types p{margin:0;font-size:1.05rem}
@media (max-width:52rem){.types{grid-template-columns:1fr;gap:1.5rem}.types li{display:grid;grid-template-columns:5rem 1fr;gap:1rem;align-items:start}.types h3{margin-top:0}}
.options{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:0 0 1.5rem}
.options li{border:1px solid var(--ink);border-radius:999px;padding:.35rem 1rem;font-size:1rem}

/* ---------- Remboursement ---------- */
.defile{overflow-x:auto;margin:1.75rem 0 1rem}
table.classes{border-collapse:collapse;width:100%;min-width:34rem}
.classes th,.classes td{text-align:left;padding:.9rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.classes thead th{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.3rem;border-bottom:2px solid var(--ink)}
.classes thead td{border-bottom:2px solid var(--ink)}
.classes tbody th{font-weight:400;color:var(--muted);width:28%}
.classes tbody td:nth-child(2){background:var(--bg);font-weight:700}

/* ---------- Le centre ---------- */
.centre{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-top:2rem}
.photo{display:grid;place-items:center;text-align:center;border:2px dashed var(--line);border-radius:1rem;background:var(--surface);color:var(--muted);font-size:.95rem;padding:1rem;min-height:9rem}
.photo.portrait{aspect-ratio:4/5;max-width:18rem}
.centre h3{margin:1rem 0 .4rem}
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.5rem}
.infos{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.25rem}
.infos dt{color:var(--muted)}
.infos dd{margin:0}
@media (max-width:56rem){.centre{grid-template-columns:1fr;gap:2rem}.galerie{grid-template-columns:1fr 1fr}}

/* ---------- Proches et parrainage ---------- */
.proches{background:var(--sable)}
.proches .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center}
.proches h2{margin-bottom:1rem}
.bon{background:var(--ring);border-radius:1.25rem;padding:1.5rem 1.6rem}
.bon h3{margin-bottom:.6rem}
.bon ol{margin:0 0 .75rem;padding-left:1.2rem}
.bon li{margin-bottom:.3rem}
.bon p{margin:0;font-size:.95rem}
@media (max-width:56rem){.proches .wrap{grid-template-columns:1fr}}

/* ---------- Avis ---------- */
.avis{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center;margin-top:1.5rem}
.score{font-family:"Marcellus",Georgia,serif;font-size:clamp(3.2rem,8vw,5rem);line-height:1;margin:0}
.score small{font-size:.38em;color:var(--muted)}
.citations{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
@media (max-width:52rem){.avis{grid-template-columns:1fr;gap:1rem}.citations{grid-template-columns:1fr}}

/* ---------- Rendez-vous ---------- */
.rdv{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:stretch;margin-top:2rem}
.voie{border:1px solid var(--line);border-radius:1.25rem;padding:1.6rem;background:var(--bg)}
.voie h3{margin-bottom:.6rem}
.voie h3.suite{margin-top:2rem}
.voie.principale{border:2px solid var(--accent)}
.champ{margin-bottom:1rem}
.champ label,.champ legend{display:block;font-weight:700;margin-bottom:.3rem;padding:0}
.champ input[type=text],.champ input[type=tel],.champ select{
  width:100%;min-height:3.1rem;padding:.6rem .8rem;font:inherit;color:var(--ink);background:var(--bg);border:2px solid var(--ink);border-radius:.6rem}
fieldset.champ{border:0;padding:0;margin:0 0 1rem}
.choix{display:flex;gap:1.25rem;flex-wrap:wrap}
.choix label{font-weight:400;display:flex;align-items:center;gap:.45rem;min-height:2.75rem;margin:0}
.choix input,.accord input{width:1.3rem;height:1.3rem;accent-color:var(--accent)}
.accord{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem;margin-bottom:1rem}
.accord input{flex:none;margin-top:.2rem}
.erreur{color:var(--accent);font-weight:700;margin:.75rem 0 0}
.confirme{border:2px solid var(--ok);color:var(--ok);border-radius:.8rem;padding:.9rem 1rem;margin:1rem 0 0;font-weight:700}
.confirme[hidden],.erreur[hidden]{display:none}
@media (max-width:56rem){.rdv{grid-template-columns:1fr}}

/* ---------- Questions ---------- */
.faq{margin-top:1.5rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;position:relative;font-weight:700;font-size:1.15rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.7rem;font-size:1.8rem;font-weight:400;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:1.1rem;margin:0}

/* ---------- Boutique ---------- */
.rayons{list-style:none;margin:1.75rem 0 0;padding:0;border-top:1px solid var(--line)}
.rayons li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.rayons b{display:block}
.rayons span{color:var(--muted);font-size:1rem}
.rayons select{font:inherit;min-height:2.6rem;border:1px solid var(--ink);border-radius:.5rem;background:var(--bg);color:var(--ink);padding:0 .5rem;margin-top:.35rem}
.qte{display:flex;align-items:center;border:2px solid var(--ink);border-radius:999px}
.qte button{font:inherit;font-size:1.4rem;line-height:1;width:2.9rem;height:2.9rem;border:0;background:none;color:var(--ink);cursor:pointer}
.qte output{min-width:1.8rem;text-align:center;font-weight:700}
.panier{margin-top:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.panier ul{margin:.5rem 0 0;padding-left:1.2rem}
.boutique-note{margin-top:1.5rem}
@media (max-width:56rem){.panier{grid-template-columns:1fr}}

/* ---------- Pied de page ---------- */
.pied{background:var(--ink);color:var(--bg);padding:3rem 0 2rem}
.pied a{color:var(--bg)}
.pied .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.pied h2{font-size:1.5rem;margin-bottom:.6rem}
.pied h3{font-size:1.1rem;margin-bottom:.5rem}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:.35rem}
.pied address{font-style:normal}
.legal{border-top:1px solid color-mix(in srgb,currentColor 30%,transparent);margin-top:2rem;padding-top:1.25rem;font-size:.9rem}
.legal p{max-width:none}
@media (max-width:52rem){.pied .cols{grid-template-columns:1fr}}

/* ---------- Barre d'action mobile ---------- */
.barre{display:none}
@media (max-width:76rem){
  body{padding-bottom:5rem}
  .barre{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
  .barre .btn{min-height:3rem;padding:.5rem .6rem}
}

/* ---------- Version en plusieurs pages ---------- */
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em;text-decoration-color:var(--accent)}
.tete{background:var(--sable);position:relative;overflow:hidden;padding-block:clamp(1.75rem,4.5vw,3.25rem)}
.tete::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 92% 40%,transparent 0 3.4rem,var(--wave) 3.4rem calc(3.4rem + 1px))}
.tete .wrap{position:relative}
.tete h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:.7rem 0 .8rem;max-width:22ch}
.tete .chapo{color:var(--ink);margin:0;max-width:38rem}
.fil{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.95rem}
.fil a{color:var(--ink)}
.acces{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.acces a{display:block;height:100%;padding:1.3rem 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.acces b{display:block;font-family:"Marcellus","Palatino Linotype",Georgia,serif;font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--accent);margin-bottom:.3rem}
.acces a:hover b{text-decoration:underline}
@media (max-width:52rem){.acces{grid-template-columns:1fr}}
.appel{background:var(--surface)}
.appel.sans-fond{background:var(--bg);border-top:1px solid var(--line)}
.appel h2{margin-bottom:.6rem}
.appel .actions{margin-bottom:0}
.sans-marge{margin-top:0}
.pied .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:60rem){.pied .cols{grid-template-columns:1fr 1fr}}
@media (max-width:36rem){.pied .cols{grid-template-columns:1fr}}
main[hidden]{display:none}

/* ---------- Logo d'origine et visuels ---------- */
:root{--sable:#AD967E;--logo:#FFFFFF}   /* beige exact du fichier du logo */
.marque .logo{height:2.25rem}
@media (max-width:30rem){.marque .logo{height:1.8rem}}
.logo-ouverture{width:min(27rem,80vw)}
@media (max-width:52rem){.logo-ouverture{width:min(17rem,72vw)}}
.visuel{margin:0}
.visuel svg,.visuel img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:1rem;border:1px solid var(--line)}
.visuel.portrait{max-width:18rem}
.visuel.portrait svg{aspect-ratio:4/5}
.visuel figcaption{font-size:.85rem;color:var(--muted);margin-top:.4rem;line-height:1.35}
.v-fond{fill:var(--surface)}.v-sol{fill:var(--line)}.v-sable{fill:var(--sable)}.v-clair{fill:var(--bg)}.v-accent{fill:var(--accent)}.v-vert{fill:var(--ok)}
.v-ligne{fill:none;stroke:var(--line);stroke-width:1.5}.v-anneau{fill:none;stroke:var(--sable);stroke-width:9}
.v-trait{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.v-casque{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round}.v-courbe{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}

/* ---------- Logos harmonisés : toujours blancs, sur le beige de la marque ou sur fond sombre ---------- */
:root{--logo:#FFFFFF;--pied-fond:#2A221D;--pied-texte:#FBF7F0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--logo:#FFFFFF}}
:root[data-theme="dark"]{--logo:#FFFFFF}
.entete{background:var(--sable);border-bottom-color:color-mix(in srgb,var(--ink) 18%,transparent)}
.marque{color:var(--logo)}
.taille{border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.taille button:last-child{border-left-color:color-mix(in srgb,var(--ink) 45%,transparent)}
.nav a[aria-current="page"]{text-decoration-color:var(--ink)}
@media (max-width:76rem){.nav a{border-top-color:color-mix(in srgb,var(--ink) 22%,transparent)}}
.pied{background:var(--pied-fond);color:var(--pied-texte)}
.pied a{color:var(--pied-texte)}
.pied .logo-pied{display:block;height:2.5rem;width:auto;color:var(--logo);margin-bottom:.9rem}


/* ---------- Accueil : oreille graphique, sans cercles ---------- */
.ouverture::before{display:none}
.oreille-ouverture{justify-self:center;width:min(19rem,60vw);height:auto;color:var(--logo);filter:drop-shadow(0 .6rem 1.2rem rgba(60,42,25,.18))}
@media (max-width:52rem){.oreille-ouverture{width:min(11rem,46vw)}}

/* ---------- Accueil : dégradé et vagues fondues ---------- */
.ouverture{background:linear-gradient(125deg,#C2AE96 0%,#AD967E 42%,#977E68 100%)}
.ouverture .wrap{z-index:1;padding-bottom:clamp(4rem,8vw,6.5rem)}
.vagues{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.vagues span{position:absolute;left:78%;top:50%;border-style:solid;transform-origin:center;filter:blur(10px)}
.vagues span:nth-child(1){width:46rem;height:42rem;margin:-21rem 0 0 -23rem;border-width:4.5rem;border-color:rgba(255,255,255,.10);border-radius:48% 52% 60% 40% / 55% 45% 52% 48%;transform:rotate(12deg)}
.vagues span:nth-child(2){width:36rem;height:33rem;margin:-16.5rem 0 0 -18rem;border-width:3.8rem;border-color:rgba(142,59,70,.10);border-radius:60% 40% 52% 48% / 42% 58% 46% 54%;transform:rotate(-24deg);filter:blur(9px)}
.vagues span:nth-child(3){width:27rem;height:25rem;margin:-12.5rem 0 0 -13.5rem;border-width:3rem;border-color:rgba(255,255,255,.14);border-radius:45% 55% 40% 60% / 58% 44% 56% 42%;transform:rotate(18deg);filter:blur(7px)}
.vagues span:nth-child(4){width:19rem;height:20rem;margin:-10rem 0 0 -9.5rem;border-width:2.4rem;border-color:rgba(243,234,219,.20);border-radius:58% 42% 55% 45% / 48% 60% 40% 52%;transform:rotate(-12deg);filter:blur(5px)}
.vagues span:nth-child(5){width:60rem;height:30rem;left:-10%;top:105%;margin:-15rem 0 0 0;border-width:5rem;border-color:rgba(255,255,255,.07);border-radius:50%;transform:rotate(-6deg);filter:blur(14px)}
.vague-bas{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(2.5rem,6vw,5.5rem);display:block;pointer-events:none}
.engagements{border-top:0}
@media (max-width:52rem){
  .vagues span{left:50%;top:84%}
  .vagues span:nth-child(1){width:30rem;height:28rem;margin:-14rem 0 0 -15rem;border-width:3rem}
  .vagues span:nth-child(2){width:23rem;height:21rem;margin:-10.5rem 0 0 -11.5rem;border-width:2.6rem}
  .vagues span:nth-child(3){width:17rem;height:16rem;margin:-8rem 0 0 -8.5rem;border-width:2rem}
  .vagues span:nth-child(4){width:12rem;height:12.5rem;margin:-6.25rem 0 0 -6rem;border-width:1.6rem}
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ouverture{background:linear-gradient(125deg,#5A4C40 0%,#4A3F35 45%,#3A3029 100%)}}
:root[data-theme="dark"] .ouverture{background:linear-gradient(125deg,#5A4C40 0%,#4A3F35 45%,#3A3029 100%)}

/* ---------- Accueil : bulles de mots clés autour de l'oreille ---------- */
.visuel-ouverture{position:relative;justify-self:center;width:min(26rem,80vw);aspect-ratio:1/1;display:grid;place-items:center}
.visuel-ouverture .oreille-ouverture{width:44%;justify-self:center}
.bulle{position:absolute;background:rgba(255,255,255,.88);color:var(--ink);border-radius:1.1rem;padding:.45rem .95rem;font-size:1rem;font-weight:700;line-height:1.2;white-space:nowrap;box-shadow:0 .4rem 1rem rgba(60,42,25,.14)}
.bulle::after{content:"";position:absolute;width:.8rem;height:.8rem;background:inherit;transform:rotate(45deg)}
.bulle.b1{left:0;top:10%}.bulle.b1::after{right:1.2rem;bottom:-.3rem}
.bulle.b2{right:-4%;top:4%;background:var(--accent);color:var(--on-accent)}.bulle.b2::after{left:1.2rem;bottom:-.3rem}
.bulle.b3{right:-2%;top:46%}.bulle.b3::after{left:-.3rem;top:.7rem}
.bulle.b4{left:-4%;top:58%;background:var(--accent);color:var(--on-accent)}.bulle.b4::after{right:-.3rem;top:.7rem}
.bulle.b5{right:8%;bottom:2%}.bulle.b5::after{left:1.2rem;top:-.3rem}
@media (max-width:52rem){.visuel-ouverture{width:min(20rem,86vw)}.bulle{font-size:.85rem;padding:.35rem .75rem}}

/* ---------- Photos du centre ---------- */
.lieu{background:var(--bg)}
.lieu .lieu-tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.75rem}
.lieu .lieu-tete p{margin:.4rem 0 0;color:var(--muted);max-width:36rem}
.mosaique{display:grid;grid-template-columns:1.6fr 1fr 1fr;grid-template-rows:repeat(2,minmax(11rem,15rem));gap:.75rem}
.mosaique figure{position:relative;margin:0;overflow:hidden;border-radius:1.1rem;background:var(--surface)}
.mosaique figure:first-child{grid-row:span 2}
.mosaique img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.mosaique figure:hover img{transform:scale(1.04)}
.mosaique figcaption{position:absolute;left:.75rem;bottom:.75rem;background:rgba(251,247,240,.92);color:#2A221D;border-radius:.8rem;padding:.3rem .75rem;font-size:.9rem;font-weight:700}
@media (max-width:52rem){.mosaique{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:9rem}.mosaique figure:first-child{grid-column:span 2;grid-row:span 2}}
.bandeau-photo{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:2rem}
.bandeau-photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:1rem;border:1px solid var(--line)}
@media (max-width:40rem){.bandeau-photo{grid-template-columns:1fr}}
.proches .photo-proches{margin:0 0 1.25rem;border-radius:1rem;overflow:hidden}
.proches .photo-proches img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}

.photo-ouverture{position:absolute;inset:3% 8%;border-radius:50% 50% 1.6rem 1.6rem;overflow:hidden;border:4px solid rgba(255,255,255,.7);box-shadow:0 1.2rem 2.5rem rgba(60,42,25,.25)}
.photo-ouverture img{display:block;width:100%;height:100%;object-fit:cover}
.photo-ouverture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,42,25,.15) 0%,rgba(60,42,25,.55) 100%)}
.visuel-ouverture .oreille-ouverture{position:relative;z-index:1;color:#FFFFFF;filter:drop-shadow(0 .3rem .8rem rgba(0,0,0,.35))}
.visuel-ouverture .bulle{z-index:2}

.ouverture .wrap{grid-template-columns:1fr 1fr}
.visuel-ouverture{width:min(34rem,88vw);aspect-ratio:5/6}
.visuel-ouverture .oreille-ouverture{width:40%}
.bulle.b1{left:-2%;top:12%}.bulle.b2{right:-2%;top:6%}.bulle.b3{right:0;top:50%}.bulle.b4{left:-2%;top:62%}.bulle.b5{right:12%;bottom:0}
@media (max-width:56rem){.ouverture .wrap{grid-template-columns:1fr}}
@media (max-width:52rem){.visuel-ouverture{width:min(24rem,90vw)}}

/* barre du haut beige clair, logo beige */
:root:not([data-theme="dark"]) .entete{background:#F1E7D8;border-bottom-color:#E0D2BD}
:root:not([data-theme="dark"]) .entete .marque{color:#9E8467}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .entete{background:var(--sable)}:root:not([data-theme="light"]) .entete .marque{color:var(--logo)}}
/* fenêtre photo plus grande */
.ouverture .wrap{grid-template-columns:.95fr 1.05fr;gap:1.5rem}
.visuel-ouverture{width:min(40rem,92vw);aspect-ratio:6/7}
.photo-ouverture{inset:2% 6%}
.visuel-ouverture .oreille-ouverture{width:36%}
@media (max-width:56rem){.ouverture .wrap{grid-template-columns:1fr}}
@media (max-width:52rem){.visuel-ouverture{width:min(28rem,94vw)}}

/* ===== Harmonie globale : sables clairs ===== */
:root:not([data-theme="dark"]){--sable:#DCCBB3;--surface:#F3EADB;--line:#E2D4BF;--pied-fond:#3A2E26}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sable:#4A3F35;--pied-fond:#2A221D}}
:root:not([data-theme="dark"]) .entete{background:#F4ECDF;border-bottom-color:#E4D7C3}
.ouverture{background:linear-gradient(125deg,#F2E9DC 0%,#E6D7C2 45%,#D8C4A8 100%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ouverture{background:linear-gradient(125deg,#5A4C40 0%,#4A3F35 45%,#3A3029 100%)}}
:root[data-theme="dark"] .ouverture{background:linear-gradient(125deg,#5A4C40 0%,#4A3F35 45%,#3A3029 100%)}
.vagues span:nth-child(1){border-color:rgba(255,255,255,.35)}
.vagues span:nth-child(2){border-color:rgba(142,59,70,.07)}
.vagues span:nth-child(3){border-color:rgba(255,255,255,.4)}
.vagues span:nth-child(4){border-color:rgba(173,150,126,.18)}
.bulle{box-shadow:0 .35rem .9rem rgba(110,84,58,.16)}
.tete{background:linear-gradient(125deg,#F2E9DC 0%,#E3D2BB 100%)}
.proches{background:linear-gradient(125deg,#E9DCC8 0%,#DCCBB3 100%)}
/* ===== Formes de la fenêtre ===== */
.photo-ouverture{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:88%;height:96%;border:5px solid #FFFFFF;box-shadow:0 1.4rem 3rem rgba(110,84,58,.28);transition:border-radius .5s ease,width .5s ease,height .5s ease}
.photo-ouverture::after{background:linear-gradient(180deg,rgba(60,42,25,.05) 0%,rgba(60,42,25,.45) 100%)}
.photo-ouverture .croix{display:none}
[data-forme="arche"] .photo-ouverture{border-radius:50% 50% 1.6rem 1.6rem / 38% 38% 1.6rem 1.6rem}
[data-forme="croisee"] .photo-ouverture{border-radius:50% 50% .6rem .6rem / 38% 38% .6rem .6rem;border-width:8px}
[data-forme="croisee"] .photo-ouverture .croix{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(#FFFFFF,#FFFFFF) 50% 0/6px 100% no-repeat,linear-gradient(#FFFFFF,#FFFFFF) 0 42%/100% 6px no-repeat;opacity:.9}
[data-forme="hublot"] .photo-ouverture{width:92%;height:auto;aspect-ratio:1/1;border-radius:50%;border-width:7px}
[data-forme="galet"] .photo-ouverture{width:94%;height:84%;border-radius:58% 42% 52% 48% / 46% 54% 46% 54%}
[data-forme="feuille"] .photo-ouverture{width:86%;height:90%;border-radius:48% 6% 48% 6% / 40% 5% 40% 5%}
.formes{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.4rem 0 0}
.formes span{font-size:.85rem;margin-right:.2rem}
.formes button{font:inherit;font-size:.85rem;font-weight:700;padding:.25rem .8rem;border-radius:1rem;border:1px solid rgba(255,255,255,.5);background:transparent;color:inherit;cursor:pointer}
.formes button[aria-pressed="true"]{background:#F4ECDF;color:#2A221D;border-color:#F4ECDF}
.visuel.portrait img{aspect-ratio:4/5;object-position:50% 20%}

.duo-bilan{display:grid;grid-template-columns:1.25fr 1fr;gap:.9rem;margin:1.5rem 0 2rem}
.duo-bilan figure{margin:0;position:relative;overflow:hidden;border-radius:48% 1.2rem 1.2rem 1.2rem / 30% 1.2rem 1.2rem 1.2rem}
.duo-bilan figure:last-child{border-radius:1.2rem 1.2rem 48% 1.2rem / 1.2rem 1.2rem 30% 1.2rem}
.duo-bilan img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.duo-bilan figure:last-child img{aspect-ratio:auto;object-position:15% 20%}
.duo-bilan figcaption{position:absolute;left:.8rem;bottom:.8rem;background:rgba(251,247,240,.92);color:#2A221D;border-radius:.8rem;padding:.3rem .75rem;font-size:.9rem;font-weight:700}
.duo-bilan figure:last-child figcaption{left:auto;right:.8rem;top:.8rem;bottom:auto}
@media (max-width:44rem){.duo-bilan{grid-template-columns:1fr}.duo-bilan figure:last-child img{aspect-ratio:3/2}}

/* oreille déplacée en bas à gauche pour laisser voir l'examen */
.visuel-ouverture .oreille-ouverture{position:absolute;width:20%;left:14%;bottom:9%;justify-self:auto}

/* photo seule, bulles sorties sous la photo */
.visuel-ouverture{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:.55rem;aspect-ratio:auto}
.visuel-ouverture .photo-ouverture{position:relative;left:auto;top:auto;transform:none;width:86%;height:auto;aspect-ratio:5/6;margin:0 7% .9rem}
.visuel-ouverture .bulle{position:static;transform:none}
.visuel-ouverture .bulle::after{display:none}

/* première vue : photo de l'examen en fond */
.ouverture.photo-fond{background:linear-gradient(90deg,#F2E9DC 0%,#F2E9DC 36%,rgba(242,233,220,.8) 46%,rgba(242,233,220,0) 60%),var(--photo) right center/auto 100% no-repeat,#F2E9DC;min-height:min(46rem,86vh)}
.ouverture.photo-fond .vagues{display:none}
.ouverture.photo-fond .wrap{grid-template-columns:minmax(0,32rem);min-height:inherit;align-content:center}
@media (max-width:56rem){
  .ouverture.photo-fond{background:linear-gradient(180deg,rgba(242,233,220,0) 0,rgba(242,233,220,0) 46vw,#F2E9DC 64vw),var(--photo) center top/100% auto no-repeat,#F2E9DC;min-height:0}
  .ouverture.photo-fond .wrap{grid-template-columns:1fr;padding-top:64vw}
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ouverture.photo-fond{background:linear-gradient(90deg,#3A3029 0%,#3A3029 30%,rgba(58,48,41,.85) 40%,rgba(58,48,41,0) 56%),var(--photo) right center/auto 100% no-repeat,#3A3029}}

.prix{display:inline-block;margin-left:.4rem;font-weight:700;color:var(--accent);white-space:nowrap}
.total{margin:.8rem 0 0;font-size:1.1rem}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal-page h2{font-size:1.35rem;margin:2rem 0 .6rem}.legal-page .wrap>h2:first-child{margin-top:0}
.legal-page p,.legal-page li{max-width:46rem}
.legal-page dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;margin:0;max-width:46rem}
.legal-page dt{color:var(--muted)}.legal-page dd{margin:0}
@media (max-width:40rem){.legal-page dl{grid-template-columns:1fr;gap:0}.legal-page dt{margin-top:.6rem}.legal-page dd{overflow-wrap:anywhere}}

.avis-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;align-items:start}
.avis-carte{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:1.1rem;padding:1.25rem 1.3rem}
.avis-carte .etoiles{color:#C9962B;letter-spacing:.1em;font-size:1.05rem}
.avis-carte blockquote{margin:.6rem 0 .9rem;font-size:1.02rem;line-height:1.55}
.avis-carte figcaption{font-size:.88rem;color:var(--muted)}
.avis-carte figcaption b{color:var(--ink)}
@media (max-width:52rem){.avis-liste{grid-template-columns:1fr}}