:root{--photo-cabinet:url(assets/photo-cabinet.webp);--photo-portrait:url(assets/photo-portrait.webp)}
:root{--mauve:#A58FC0;--rose:#EFC9CF;--fond:#ECEFE8;--fond-2:#F6F7F2;--fond-3:#FBFCF8;--sable:#DFE6DD;--encre:#232A27;--encre-douce:#4E5A55;--accent-titre:#3F5A52;--trait:#7F9A92;--miel:#E9CFA3;--bouton:#2C3B36;--bouton-encre:#F6F7F2;--bande:#3B524B;--bande-encre:#EEF2EC;--bande-accent:#E9CFA3;--pied:#222B28;--pied-encre:#E6ECE6;--tache1:#D7E4DA;--tache2:#F1E4CF;--tache3:#E3E9F0;--tache4:#EAF0E2;--tache-op:.6;--souffle-a:#CFDFD5;--souffle-b:#F1E6D2;--pastille-a:#ECEFE8;--pastille-b:#3F5A52;--lierre-a:#9DBBA9;--lierre-b:#5E8572;--lierre-v:#3F5E50;--lierre-tige:#6B7F6A}
:root[data-teinte="miel"]{--mauve:#A58FC0;--rose:#EFC9CF;--fond:#F4ECDF;--fond-2:#FAF6EE;--fond-3:#FDFBF6;--sable:#EADDC8;--encre:#2A231D;--encre-douce:#5A4C40;--accent-titre:#77512E;--trait:#B08A5A;--miel:#E9CFA3;--bouton:#4A3626;--bouton-encre:#FAF6EE;--bande:#5A4331;--bande-encre:#F6EEE2;--bande-accent:#EFD7AE;--pied:#2D241D;--pied-encre:#F1E8DA;--tache1:#F2DDBE;--tache2:#E1E8DC;--tache3:#F5E1DC;--tache4:#F7E9CF;--tache-op:.65;--souffle-a:#F1DDBC;--souffle-b:#DFE7DA;--pastille-a:#F4ECDF;--pastille-b:#77512E;--lierre-a:#AEBB92;--lierre-b:#74875E;--lierre-v:#4D5C3D;--lierre-tige:#8A7A5A}
:root{--display:"Instrument Serif","Instrument Serif secours",Georgia,serif;--texte:"Instrument Sans","Instrument Sans secours","Segoe UI",system-ui,sans-serif;--neutre:"Instrument Sans","Instrument Sans secours","Segoe UI",system-ui,sans-serif;--wrap:min(100% - 2.5rem,80rem);--ease:cubic-bezier(.22,.7,.2,1);--rayon-carte:16px;--arc:999px 999px 16px 16px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem;background:var(--fond);color-scheme:light}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}@view-transition{navigation:auto}}
body{margin:0;color:var(--encre);background:transparent;font-family:var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-weight:400;margin:0;text-wrap:balance}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--encre);color:var(--fond);padding:.6rem 1rem;z-index:99}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--encre);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.todo{font-family:var(--neutre);font-size:.74em;font-style:normal;letter-spacing:.01em;white-space:nowrap;padding:.08em .6em .12em;border:1px dashed currentColor;border-radius:999px;opacity:.9;vertical-align:.08em}
.attente{font-family:var(--neutre);font-size:.72rem;line-height:1.3;letter-spacing:.02em;color:var(--encre-douce);display:inline-flex;gap:.45rem;align-items:center}
.attente::before{content:"";width:.9rem;border-top:1px dashed currentColor;flex:none}
.ruban{margin:0;padding:.5rem 1rem;text-align:center;font-family:var(--neutre);font-size:.78rem;line-height:1.4;background:var(--encre);color:var(--fond)}
.ruban b{font-weight:400;font-style:italic;font-family:var(--display);font-size:1.15em}

/* le fond lent (geste 3) : quatre taches de lumière, transform seulement, en différé */
.fond-lent{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fond-lent i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;opacity:var(--tache-op,.55);will-change:transform}
.fond-lent i:nth-child(1){left:-18vmax;top:-20vmax;background:radial-gradient(closest-side,var(--tache1),transparent)}
.fond-lent i:nth-child(2){right:-22vmax;top:18vh;background:radial-gradient(closest-side,var(--tache2),transparent)}
.fond-lent i:nth-child(3){left:12vw;bottom:-30vmax;background:radial-gradient(closest-side,var(--tache3),transparent)}
.fond-lent i:nth-child(4){right:8vw;top:-26vmax;width:44vmax;height:44vmax;background:radial-gradient(closest-side,var(--tache4),transparent)}
@media (max-width:760px){.fond-lent i:nth-child(3),.fond-lent i:nth-child(4){display:none}}
@media (prefers-reduced-motion:no-preference){
  .vivant .fond-lent i:nth-child(1){animation:lent-a 74s ease-in-out infinite alternate}
  .vivant .fond-lent i:nth-child(2){animation:lent-b 58s ease-in-out infinite alternate}
  .vivant .fond-lent i:nth-child(3){animation:lent-c 88s ease-in-out infinite alternate}
  .vivant .fond-lent i:nth-child(4){animation:lent-a 46s ease-in-out infinite alternate-reverse}
}
@keyframes lent-a{to{transform:translate3d(14vw,10vh,0) rotate(40deg)}}
@keyframes lent-b{to{transform:translate3d(-16vw,14vh,0) rotate(-30deg)}}
@keyframes lent-c{to{transform:translate3d(10vw,-18vh,0) rotate(25deg)}}
.en-pause .fond-lent i,.en-pause [data-ambiance],.en-pause [data-ambiance] *{animation-play-state:paused!important}

/* en-tête */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fond) 93%,transparent);border-bottom:1px solid color-mix(in srgb,var(--encre) 12%,transparent)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.4rem}
.marque{text-decoration:none;display:flex;align-items:center;gap:.7rem;min-width:0}
.marque strong{display:block;font-family:var(--display);font-weight:400;font-size:1.45rem;line-height:1;white-space:nowrap}
.marque small{display:block;font-family:var(--neutre);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-douce);margin-top:.3rem;white-space:nowrap}
.nav{display:flex;align-items:center;gap:1.2rem}
.nav ul{list-style:none;display:flex;gap:1.35rem;margin:0;padding:0}
.nav ul a{text-decoration:none;font-family:var(--neutre);font-size:.9rem;color:var(--encre-douce)}
.nav ul a:hover{color:var(--encre)}
.menu-bouton{display:none;background:none;border:1px solid color-mix(in srgb,var(--encre) 30%,transparent);border-radius:999px;color:var(--encre);font:inherit;font-family:var(--neutre);font-size:.9rem;padding:.55rem 1rem;min-height:44px;cursor:pointer}
.outils{display:flex;align-items:center;gap:.5rem}
.teinte{appearance:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid color-mix(in srgb,var(--encre) 22%,transparent);background:var(--fond-2);color:var(--encre);border-radius:999px;padding:.3rem .75rem .3rem .35rem;min-height:44px;font-family:var(--neutre);font-size:.78rem;cursor:pointer}
.teinte .pastille{width:1.7rem;height:1.7rem;border-radius:50%;background:linear-gradient(90deg,var(--pastille-a) 50%,var(--pastille-b) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--encre) 25%,transparent);transition:transform .6s var(--ease)}
.teinte:hover .pastille{transform:rotate(180deg)}
.pause{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid color-mix(in srgb,var(--encre) 22%,transparent);background:var(--fond-2);color:var(--encre);border-radius:999px;min-width:44px;min-height:44px;padding:0 .8rem;font-family:var(--neutre);font-size:.78rem;cursor:pointer}
.pause svg{width:.85rem;height:.85rem;flex:none}
.pause .lire{display:none}
.en-pause .pause .lire{display:block}.en-pause .pause .arret{display:none}
.pause-flottant{position:fixed;left:1rem;bottom:1rem;z-index:25}
@media (prefers-reduced-motion:reduce){.pause{display:none!important}}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;text-decoration:none;border-radius:999px;background:var(--bouton);color:var(--bouton-encre);font-family:var(--neutre);font-size:1rem;line-height:1.2;padding:1rem 1.6rem;min-height:48px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.bouton:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px color-mix(in srgb,var(--encre) 70%,transparent)}
.bouton svg{width:1.05rem;height:1.05rem;flex:none}
.bouton--petit{padding:.6rem 1.1rem;font-size:.88rem;min-height:44px}
.lien{font-family:var(--display);font-style:italic;font-size:1.25rem;text-underline-offset:.22em;text-decoration-thickness:1px}

/* « est-ce pour moi ? » (geste 5) */
.pm-choix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.pm-bouton{appearance:none;text-align:left;font:inherit;color:var(--encre);background:var(--fond-2);border:1px solid color-mix(in srgb,var(--encre) 14%,transparent);border-radius:var(--rayon-carte);padding:1.4rem 1.4rem 1.5rem;cursor:pointer;display:grid;gap:.7rem;align-content:start;transition:border-color .4s,transform .5s var(--ease),background .4s}
.pm-bouton:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--encre) 40%,transparent)}
.pm-bouton[aria-pressed="true"]{border-color:var(--encre);background:var(--fond-3)}
.pm-bouton svg{width:5.5rem;height:2.6rem;fill:none;stroke:var(--trait);stroke-width:2.4;stroke-linecap:round}
.pm-qui{font-family:var(--neutre);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce)}
.pm-phrase{font-family:var(--display);font-style:italic;font-size:1.32rem;line-height:1.25}
.pm-reponses{margin-top:1.4rem}
.pm-reponse{background:var(--fond-2);border-radius:var(--rayon-carte);padding:clamp(1.3rem,1rem + 2vw,2.4rem);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.2rem,1rem + 2vw,3rem);margin-bottom:1rem}
.pm-reponse h3{font-family:var(--display);font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);margin-bottom:.8rem}
.pm-reponse .ou{font-family:var(--neutre);font-size:.85rem;color:var(--encre-douce)}
.pm-message{border:1px dashed color-mix(in srgb,var(--encre) 35%,transparent);border-radius:12px;padding:1rem 1.1rem;align-self:start}
.pm-etiquette{font-family:var(--neutre);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);margin-bottom:.5rem}
.pm-texte{font-style:italic;margin-bottom:.9rem}
.pm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;font-family:var(--neutre);font-size:.82rem;color:var(--encre-douce)}
.pm-copier{appearance:none;font-family:var(--neutre);font-size:.85rem;background:transparent;color:var(--encre);border:1px solid color-mix(in srgb,var(--encre) 35%,transparent);border-radius:999px;min-height:44px;padding:0 1rem;cursor:pointer}
.pm-note{font-family:var(--neutre);font-size:.8rem;color:var(--encre-douce);margin-top:.8rem}
.js .pm-reponse[hidden]{display:none}

@media (prefers-reduced-motion:no-preference){
}

/* les conditions en clair (geste 6) */
.conditions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem;margin:0;padding:0;list-style:none}
.conditions li{padding:1.1rem 0;border-top:1px solid color-mix(in srgb,var(--encre) 16%,transparent)}
.conditions b{display:block;font-family:var(--neutre);font-weight:400;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);margin-bottom:.35rem}

/* questions */
.faq details{border-top:1px solid color-mix(in srgb,var(--encre) 20%,transparent)}
.faq details:last-child{border-bottom:1px solid color-mix(in srgb,var(--encre) 20%,transparent)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.15rem 0;font-family:var(--display);font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem);line-height:1.2;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.65rem;height:.65rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-.2rem,-.2rem);transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .reponse{padding:0 0 1.2rem;color:var(--encre-douce)}
.faq .reponse p{margin:0}

/* pied */
.pied{background:var(--pied);color:var(--pied-encre);padding:4rem 0 7rem;font-family:var(--neutre);font-size:.9rem;line-height:1.6}
.pied .grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:2.5rem}
.pied h2{font-family:var(--neutre);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem;opacity:.85}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{padding:.15rem 0}
.pied .nom{font-family:var(--display);font-size:2rem;line-height:1.1;margin-bottom:.4rem}
.pied .urgence{margin-top:1.3rem;border:1px solid color-mix(in srgb,var(--pied-encre) 30%,transparent);border-radius:12px;padding:1rem 1.1rem}
.pied .bas{margin-top:3rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--pied-encre) 22%,transparent);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.82rem}
.bientot{font-size:.85em;opacity:.75}

.appel-fixe{display:none}

/* apparitions (natif) */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js [data-reveal="2"]{transition-delay:.12s}.js [data-reveal="3"]{transition-delay:.24s}.js [data-reveal="4"]{transition-delay:.36s}
}

/* le portrait en relief (geste 1) : les plans bougent de quelques pixels, au pointeur (ordinateur) ou au défilement (téléphone) */
.relief .plan{transform:translate3d(calc(var(--rx,0) * var(--d,0) * 1px),calc(var(--ry,0) * var(--d,0) * 1px),0);transition:transform .9s var(--ease)}
@media (prefers-reduced-motion:no-preference) and (hover:none){
  @supports (animation-timeline:view()){
    .relief .plan{animation:relief-defile linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes relief-defile{from{translate:0 calc(var(--d,0) * -1px)}to{translate:0 calc(var(--d,0) * 1px)}}
  }
}

@media (max-width:960px){
  .nav ul,.nav>.bouton{display:none}
  .menu-bouton{display:inline-block}
  .top .wrap{position:relative}
  .nav.is-open ul{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--fond);padding:.6rem 1.25rem 1.4rem;gap:0;border-bottom:1px solid color-mix(in srgb,var(--encre) 15%,transparent)}
  .nav.is-open ul a{display:block;padding:.8rem 0;border-bottom:1px solid color-mix(in srgb,var(--encre) 10%,transparent);font-size:1.05rem;color:var(--encre)}
  .pm-choix{grid-template-columns:1fr}
  .pm-reponse,.souffle-grille{grid-template-columns:1fr}
  .conditions{grid-template-columns:1fr 1fr}
  .pied .grille{grid-template-columns:1fr}
  .pause-flottant{display:none!important}
  .appel-fixe{display:flex;gap:.6rem;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--pied);padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom))}
  .appel-fixe .bouton{flex:1;background:var(--fond);color:var(--encre)}
  .appel-fixe .pause{background:transparent;color:var(--pied-encre);border-color:color-mix(in srgb,var(--pied-encre) 40%,transparent)}
  .teinte .mot{display:none}
  .teinte{padding:.3rem;min-width:44px;justify-content:center}
}
@media (max-width:560px){
  .conditions{grid-template-columns:1fr}
  .marque strong{font-size:1.2rem}
  .marque small{font-size:.72rem;letter-spacing:.01em;text-transform:none}
  .menu-bouton{padding:.5rem .8rem}
  .top .wrap{gap:.6rem}
}
/* ===== propre à F : le cabinet en porte d'entrée ===== */
body{font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);line-height:1.66}
.etiquette{font-family:var(--neutre);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-titre)}
.lien{font-size:1.3rem}

/* la porte : une grande arche, la pièce dedans ; on « entre » au défilement */
.entree{padding:clamp(1.6rem,1rem + 2vw,3rem) 0 0}
.entree .seuil{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem}
.porte-grande{position:relative;margin:0 auto;width:min(100%,64rem);height:clamp(26rem,74vh,46rem);border-radius:var(--arc);overflow:hidden;background:var(--sable);box-shadow:0 60px 90px -60px color-mix(in srgb,var(--encre) 70%,transparent)}
.porte-grande .piece{position:absolute;inset:0;background:var(--photo-cabinet) 50% 64%/cover}
.porte-grande .lumiere{position:absolute;top:-10%;left:38%;width:20%;height:120%;background:linear-gradient(180deg,color-mix(in srgb,#FFF6E4 60%,transparent),transparent 85%);transform:skewX(-18deg);filter:blur(12px);opacity:.55}
.porte-grande figcaption{position:absolute;left:1rem;bottom:1rem;background:color-mix(in srgb,var(--fond-3) 92%,transparent);border-radius:10px;padding:.5rem .8rem;font-family:var(--neutre);font-size:.78rem;line-height:1.35;max-width:22rem}
.porte-grande figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .porte-grande .piece{animation:entrer linear both;animation-timeline:view();animation-range:exit 0% exit 80%}
    @keyframes entrer{to{transform:scale(1.12)}}
  }
  .vivant .porte-grande .lumiere{animation:lumiere 13s ease-in-out infinite alternate}
}
@keyframes lumiere{to{transform:skewX(-18deg) translateX(40%);opacity:.85}}
.grand-titre{font-family:var(--display);font-size:clamp(3.4rem,1rem + 9vw,10.5rem);line-height:.9;letter-spacing:-.02em;text-align:center;margin:clamp(1.6rem,1rem + 2vw,2.8rem) 0 0}
.grand-titre em{color:var(--accent-titre)}
.sous-porte{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:start;padding:clamp(2rem,1.5rem + 2vw,3.4rem) 0 clamp(3rem,2rem + 3vw,5rem)}
.sous-porte h1{font-family:var(--neutre);font-size:clamp(1rem,.95rem + .25vw,1.15rem);line-height:1.45;color:var(--accent-titre);margin:0}
.sous-porte .chapeau{color:var(--encre-douce);max-width:36rem}
.sous-porte .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;margin-top:1.4rem}


.section{padding:clamp(4.5rem,3rem + 5vw,8.5rem) 0}
.tete{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1rem,.5rem + 3vw,4rem);align-items:end;margin-bottom:clamp(2.4rem,2rem + 2vw,4rem)}
.tete h2{font-family:var(--display);font-size:clamp(2.8rem,1.6rem + 4vw,5.6rem);line-height:.95;letter-spacing:-.01em;margin-top:.8rem}
.tete h2 em{color:var(--accent-titre)}
.tete p{color:var(--encre-douce);max-width:34rem;margin:0}

/* la visite : les pièces en grand */
.visite{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:1.2rem}
.piece-photo{position:relative;margin:0;border-radius:var(--rayon-carte);overflow:hidden;background:var(--sable) 50% 50%/cover no-repeat;min-height:18rem}
.piece-photo figcaption{position:absolute;left:.9rem;right:.9rem;bottom:.9rem;display:flex;gap:.8rem;align-items:baseline;background:color-mix(in srgb,var(--fond-3) 93%,transparent);border-radius:10px;padding:.6rem .85rem;font-family:var(--neutre);font-size:.78rem;line-height:1.35}
.piece-photo figcaption .n{font-family:var(--display);font-style:italic;font-size:1.5rem;line-height:1;color:var(--accent-titre)}
.piece-photo figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem}
.p-deux{grid-row:span 2;min-height:40rem;background-image:var(--photo-chaises);background-position:50% 60%}
.p-lin{background-image:var(--photo-lin);min-height:19rem}
.p-plante{background-image:var(--photo-plante);background-position:50% 25%;border-radius:var(--arc);min-height:24rem}
.visite-bas{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.2rem;margin-top:1.2rem}
.adresse{background:var(--fond-2);border-radius:var(--rayon-carte);padding:1.8rem}
.adresse address{font-style:normal;font-family:var(--display);font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);line-height:1.12;margin:.8rem 0 1.2rem}
.faits{list-style:none;margin:0;padding:0}
.faits li{padding:.5rem 0;border-top:1px solid color-mix(in srgb,var(--encre) 12%,transparent);font-size:.96rem}
.faits b{font-weight:400;color:var(--accent-titre)}
.faits.adresse{padding:1.2rem 1.8rem}

/* trois portes : les publics, et « est-ce pour moi ? » */
.portes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.porte-public{background:var(--fond-2);border-radius:var(--arc);padding:3.4rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.9rem;text-align:center;border:1px solid color-mix(in srgb,var(--encre) 10%,transparent)}
.porte-public h3{font-family:var(--display);font-size:clamp(2rem,1.6rem + 1.2vw,2.8rem);line-height:1}
.porte-public .sous{font-family:var(--neutre);font-size:.82rem;color:var(--accent-titre);letter-spacing:.06em}
.porte-public svg.glyphe{width:5rem;height:2.4rem;margin:0 auto;fill:none;stroke:var(--trait);stroke-width:2.4;stroke-linecap:round}
.porte-public p{margin:0}
.porte-public .ou{font-size:.86rem;color:var(--encre-douce)}
.porte-public .pm-bouton{margin-top:auto;text-align:center;background:var(--fond-3)}
.porte-public .pm-bouton .pm-qui{color:var(--accent-titre)}
.pm-reponse{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}

.motifs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.motifs h3{font-family:var(--display);font-style:italic;font-size:1.8rem;color:var(--accent-titre);margin-bottom:.8rem}
.motifs ul{list-style:none;margin:0;padding:0}
.motifs li{padding:.6rem 0;border-top:1px solid color-mix(in srgb,var(--encre) 14%,transparent);line-height:1.4}
.sexo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem;align-items:center;margin-top:2.4rem;padding:2rem 2.2rem;border-radius:var(--rayon-carte);background:color-mix(in srgb,var(--trait) 22%,var(--fond-2))}
.sexo p{margin:0}
.sexo .grand{font-family:var(--display);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.25}

.nuit{background:var(--bande);color:var(--bande-encre);position:relative;overflow:hidden}
.nuit::before{content:"";position:absolute;width:64rem;height:64rem;right:-22rem;top:-36rem;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--bande-accent) 30%,transparent),transparent);pointer-events:none}
.nuit .wrap{position:relative}
.nuit .tete p{color:color-mix(in srgb,var(--bande-encre) 82%,transparent)}
.nuit .tete h2 em,.nuit .etiquette{color:var(--bande-accent)}

/* qui je suis : le double (geste 2) */
.apropos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1rem + 5vw,6rem);align-items:center}
.double-lieu{position:relative;width:min(100%,27rem);aspect-ratio:4/5;margin:0 auto 2.4rem}
.double-lieu .plan{position:absolute}
.double-lieu .ombre-arc{inset:4% -4% -3% 8%;border-radius:var(--arc);background:color-mix(in srgb,var(--trait) 30%,var(--fond))}
.double-lieu .arc{inset:0;border-radius:var(--arc);overflow:hidden;background:var(--photo-cabinet) 50% 60%/cover}
.double-lieu .arc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--fond-2) 30%,transparent))}
#qui-je-suis{overflow-x:clip}
.double-lieu .portrait-plan{right:0;bottom:4%;width:62%}
.double-lieu figcaption{position:absolute;left:0;right:0;bottom:-2.6rem;display:flex;justify-content:center;text-align:center}
.nom{font-family:var(--display);font-size:clamp(2.8rem,1.8rem + 3.4vw,4.8rem);line-height:1;margin-top:.8rem}
.titre-pro{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--accent-titre);margin:.4rem 0 1.2rem}
.honnete{font-size:.9rem;color:var(--encre-douce);padding:.85rem 1rem;border-left:3px solid var(--trait);background:var(--fond-2);border-radius:0 10px 10px 0}
.formations{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.formations li{background:var(--fond-2);border-radius:var(--arc);padding:1.6rem 1rem 1.1rem;text-align:center;font-size:.95rem;line-height:1.35}
.formations b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;margin-bottom:.35rem}

.faq-grille{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.faq-grille h2{font-family:var(--display);font-size:clamp(2.8rem,1.6rem + 3.6vw,5rem);line-height:.95;margin-top:.8rem}


.rdv{padding:clamp(2rem,1.5rem + 3vw,5rem) 0 clamp(4.5rem,3rem + 5vw,8rem)}
.porte-rdv{max-width:46rem;margin-inline:auto;text-align:center;border:1px solid color-mix(in srgb,var(--accent-titre) 40%,transparent);border-radius:var(--arc);padding:clamp(5rem,3rem + 8vw,11rem) clamp(1.4rem,1rem + 3vw,4rem) clamp(2.4rem,2rem + 2vw,3.6rem);background:linear-gradient(180deg,var(--fond-2),transparent)}
.porte-rdv h2{font-family:var(--display);font-size:clamp(2.8rem,1.8rem + 3.6vw,5rem);line-height:1;margin-bottom:1rem}
.porte-rdv h2 em{color:var(--accent-titre)}
.porte-rdv p{color:var(--encre-douce);max-width:32rem;margin-inline:auto}
.porte-rdv .bouton{margin:1.2rem 0 1.6rem}
.porte-rdv .contact{display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2rem;font-size:.92rem}
.porte-rdv .note{margin-top:1.2rem;font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--encre)}

@media (max-width:960px){
  .sous-porte,.tete,.visite,.visite-bas,.portes,.motifs,.sexo,.apropos,.faq-grille,.pm-reponse{grid-template-columns:1fr}
  .p-deux{grid-row:auto;min-height:26rem}
  .porte-grande{height:min(34rem,120vw)}
}
@media (max-width:560px){
  .marque strong{font-size:1.3rem}
  .entree .seuil .etiquette:last-child{display:none}
}

/* le portrait : une vraie photo, cadre décalé et ombre douce (principe de la page J) ; le relief ne bouge qu'avec un pointeur fin, fixe sur téléphone et en mouvement réduit */
.relief-cadre{position:relative;display:block;margin:0 .9rem .9rem 0}
.relief-cadre::before{content:"";position:absolute;inset:0;transform:translate(.9rem,.9rem);border:1px solid color-mix(in srgb,var(--accent-titre) 50%,transparent);border-radius:.3rem;background:var(--sable)}
.relief-cadre img{position:relative;display:block;width:100%;height:auto;border-radius:.3rem;box-shadow:0 1.3rem 1.9rem -1.1rem rgba(35,42,39,.62),0 .2rem .5rem rgba(35,42,39,.14)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .relief-cadre img{transition:transform .4s ease,box-shadow .4s ease;transform:translate(calc(var(--px,0) * -5px),calc(var(--py,0) * -5px))}
  .relief-cadre::before{transition:transform .4s ease;transform:translate(calc(.9rem + var(--px,0) * 4px),calc(.9rem + var(--py,0) * 4px))}
}
@media print{.relief-cadre{margin:0}.relief-cadre::before{display:none}.relief-cadre img{box-shadow:none}}
.p-entree{grid-column:1 / -1;justify-self:center;width:min(100%,23rem);aspect-ratio:4/5;min-height:0;border-radius:var(--arc);background-image:var(--photo-entree);background-position:50% 50%}

html{transition:none}
.bascule,.bascule *,.bascule *::before,.bascule *::after{transition:background-color .9s ease,color .9s ease,border-color .9s ease,fill .9s ease,stroke .9s ease!important}

/* --- l'en-tête : le menu, puis les quatre boutons --- */
.top .wrap.haut{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.5rem 1rem;min-height:4.4rem}
.haut .marque{margin-right:auto}
.nav{gap:1rem}
.nav ul{gap:1.05rem}
.nav ul a{font-size:.88rem}
@media (min-width:761px){.top .wrap.haut{flex-wrap:nowrap}}
.quatre{display:flex;align-items:center;gap:.4rem}
.b4{appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:44px;min-height:44px;padding:0 .8rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--encre) 22%,transparent);background:var(--fond-2);color:var(--encre);font-family:var(--neutre);font-size:.8rem;line-height:1.1;cursor:pointer;text-decoration:none}
.b4:hover{border-color:color-mix(in srgb,var(--encre) 45%,transparent)}
.b4.rond{padding:0;width:44px}
.b4 svg{width:1.2rem;height:1.2rem;flex:none;overflow:visible}
.b4[aria-pressed="true"]{background:var(--fond-3);border-color:var(--accent-titre);box-shadow:inset 0 0 0 1px var(--accent-titre)}
.b4[disabled]{opacity:.55;cursor:not-allowed}
.b4 .pastille{width:1.55rem;height:1.55rem;border-radius:50%;background:linear-gradient(90deg,var(--pastille-a) 50%,var(--pastille-b) 50%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--encre) 25%,transparent);transition:transform .6s var(--ease)}
.b4.teinte:hover .pastille{transform:rotate(180deg)}
.b-carnet{padding:0 .95rem 0 .7rem;text-align:left}
.b-carnet .mot b{display:block;font-family:var(--display);font-weight:400;font-size:1.08rem;line-height:1}
.b-carnet .mot small{display:block;font-size:.66rem;letter-spacing:.08em;color:var(--encre-douce);margin-top:.12rem}
.b-carnet[aria-current="page"]{background:var(--fond-3);border-color:var(--accent-titre)}
html:not(.js) .b-js{visibility:hidden} /* 23/10/2026 : la place des boutons est gardee avant le script, plus de saut de l en-tete */
/* l'icône de la musique ondule doucement ; elle ondule plus nettement quand l'ambiance joue */
.b-musique .onde{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .b-musique .onde{animation:onde 2.8s ease-in-out infinite alternate}
  .b-musique .onde+.onde{animation-delay:-1.1s}
  .b-musique .onde+.onde+.onde{animation-delay:-.5s}
  .b-musique[aria-pressed="true"] .onde{animation-duration:1.1s}
}
@keyframes onde{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
/* la bulle : dix secondes, puis elle s'efface ; le bouton reste */
.zone-musique{position:relative;display:inline-flex}
.bulle{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:45;width:max-content;max-width:min(15.5rem,calc(100vw - 2rem));margin:0;padding:.6rem .85rem;border-radius:12px;background:var(--encre);color:var(--fond-3);font-family:var(--neutre);font-size:.84rem;line-height:1.35;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);opacity:1;transition:opacity .8s ease}
.bulle::before{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;background:inherit;transform:rotate(45deg);border-radius:2px}
.bulle.part{opacity:0}
.bulle[hidden]{display:none}

/* le téléphone et les écrans moyens : le menu se replie ; les quatre boutons passent sur une rangée à eux */
@media (max-width:1180px){
  .nav ul{display:none}
  .menu-bouton{display:inline-block}
  .top .wrap{position:relative}
  .nav.is-open ul{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--fond);padding:.6rem 1.25rem 1.4rem;gap:0;border-bottom:1px solid color-mix(in srgb,var(--encre) 15%,transparent);z-index:30}
  .nav.is-open ul a{display:block;padding:.8rem 0;border-bottom:1px solid color-mix(in srgb,var(--encre) 10%,transparent);font-size:1.05rem;color:var(--encre)}
  .bulle{left:auto;right:-3.5rem;transform:none}
  .bulle::before{left:auto;right:calc(3.5rem + 16px)}
}
@media (max-width:960px){.nav>.bouton{display:none}}
@media (max-width:760px){
  html{scroll-padding-top:8.6rem}
  .quatre{order:3;width:100%;justify-content:space-between;padding:0 0 .55rem}
  .bulle{left:0;right:auto}
  .bulle::before{left:16px;right:auto}
  .b-carnet{margin-left:auto}
}
@media (max-width:360px){.quatre{gap:.25rem}.b-carnet .mot small{display:none}}

/* --- couper les animations : le bouton, et le réglage « réduire les animations » de l'appareil --- */
html.sans-anim,html.sans-anim *,html.sans-anim *::before,html.sans-anim *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.js.sans-anim [data-reveal]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
}
/* le relief au défilement de F est coupé sur téléphone : les photos y restent fixes (ordre du 12/10) */
.relief .plan{animation:none!important}
@media (hover:none),(pointer:coarse){.relief .plan{transform:none!important}}
.sans-anim .relief .plan{transform:none!important}

/* --- les photos en relief : cadre décalé, ombre douce, inclinaison légère au pointeur, fixes sur téléphone --- */
.cadre-photo{position:relative;margin:0 .9rem 0 0}
.cadre-photo .cadre{position:relative;display:block}
.cadre-photo .cadre::before{content:"";position:absolute;inset:0;border-radius:var(--forme,var(--arc));border:1px solid color-mix(in srgb,var(--accent-titre) 45%,transparent);background:color-mix(in srgb,var(--sable) 80%,transparent);transform:translate(.9rem,.9rem)}
.cadre-photo .photo{position:relative;display:block;border-radius:var(--forme,var(--arc));overflow:hidden;background:var(--sable) 50% 50%/cover no-repeat;box-shadow:0 1.6rem 2.2rem -1.3rem rgba(35,42,39,.55),0 .25rem .6rem rgba(35,42,39,.12)}
@media (hover:hover) and (pointer:fine){
  .js:not(.sans-anim) .cadre-photo .photo{transition:transform .5s var(--ease),box-shadow .5s var(--ease);transform:perspective(900px) rotateY(calc(var(--tx,0) * 4deg)) rotateX(calc(var(--ty,0) * -4deg)) translate(calc(var(--tx,0) * -5px),calc(var(--ty,0) * -5px))}
  .js:not(.sans-anim) .cadre-photo .cadre::before{transition:transform .5s var(--ease);transform:translate(calc(.9rem + var(--tx,0) * 4px),calc(.9rem + var(--ty,0) * 4px))}
}
.cadre-photo figcaption,.legende{font-family:var(--neutre);font-size:.84rem;line-height:1.4;color:var(--encre-douce);margin-top:1.8rem}
.legende b{display:block;font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--encre)}

/* --- le portrait en filigrane : un ovale fondu par un dégradé, transparent, posé DANS la photo claire --- */
.filigrane{position:absolute;background:var(--photo-portrait) 50% 28%/cover no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%);mask-image:radial-gradient(closest-side,#000 52%,rgba(0,0,0,.55) 74%,transparent 100%);pointer-events:none}
.eclaircie{position:absolute;inset:0;pointer-events:none}

/* --- la voûte : la salle claire dans l'arche, le portrait fondu dessus --- */
.voute-zone{padding:clamp(1.4rem,1rem + 2vw,2.8rem) 0 0}
.voute-zone .seuil{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem}
.voute{position:relative;margin:0 auto;width:min(100%,64rem);height:clamp(25rem,70vh,42rem);border-radius:var(--arc);overflow:hidden;background:var(--sable);box-shadow:0 60px 90px -60px color-mix(in srgb,var(--encre) 70%,transparent)}
.voute .piece{inset:-10px;background:var(--photo-cabinet) 38% 55%/cover no-repeat;filter:brightness(1.07) saturate(.9)}
.voute .eclaircie{background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fond-3) 50%,transparent) 78%),linear-gradient(0deg,color-mix(in srgb,var(--fond-3) 35%,transparent),transparent 40%)}
.voute .filigrane{right:3%;bottom:-2%;width:min(46%,25rem);aspect-ratio:520/708;opacity:.62}
.voute figcaption{position:absolute;left:1rem;bottom:1rem;z-index:2;background:color-mix(in srgb,var(--fond-3) 90%,transparent);border-radius:10px;padding:.5rem .8rem;font-family:var(--neutre);font-size:.78rem;line-height:1.35;max-width:20rem}
.voute figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem}
@media (prefers-reduced-motion:no-preference){.vivant .voute .lumiere{animation:lumiere 13s ease-in-out infinite alternate}}
.voute .lumiere{position:absolute;top:-10%;left:30%;width:18%;height:120%;background:linear-gradient(180deg,color-mix(in srgb,#FFF6E4 60%,transparent),transparent 85%);transform:skewX(-18deg);filter:blur(12px);opacity:.45;pointer-events:none}
.sous-voute{text-align:center;padding:clamp(1.8rem,1.2rem + 2vw,3rem) 0 0}
.sous-voute .nom-grand{font-family:var(--display);font-size:clamp(3rem,1rem + 7vw,7.5rem);line-height:.92;letter-spacing:-.02em;margin:0}
.sous-voute .metier{font-family:var(--display);font-style:italic;font-size:clamp(1.35rem,1.1rem + 1vw,2rem);color:var(--accent-titre);margin:.5rem 0 0}
.sous-voute .phrase{font-family:var(--display);font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);line-height:1.3;max-width:38rem;margin:1.4rem auto 0}
.sous-voute .phrase small{display:block;font-family:var(--neutre);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce);margin-top:.6rem}
@media (max-width:960px){.voute{height:min(36rem,128vw)}.voute .filigrane{width:62%;right:-4%}.voute .piece{background-position:30% 55%}}

/* --- qui je reçois : trois portes, sans bouton ici (le premier message a sa section) --- */
.porte-public{padding-bottom:2rem}


/* --- qui je suis : le portrait fondu dans la salle verticale --- */
.portrait-lieu{position:relative;width:min(100%,27rem);aspect-ratio:4/5;margin:0 auto 2.6rem}
.portrait-lieu .plan{position:absolute}
.portrait-lieu .ombre-arc{inset:4% -4% -3% 8%;border-radius:var(--arc);background:color-mix(in srgb,var(--trait) 30%,var(--fond))}
.portrait-lieu .arc{inset:0;border-radius:var(--arc);overflow:hidden;background:var(--photo-vertical) 50% 60%/cover;box-shadow:0 46px 70px -46px color-mix(in srgb,var(--encre) 75%,transparent)}
.portrait-lieu .arc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--fond-3) 40%,transparent),color-mix(in srgb,var(--fond-3) 25%,transparent) 50%,color-mix(in srgb,var(--fond-3) 55%,transparent))}
.portrait-lieu .filigrane{left:8%;right:8%;bottom:0;aspect-ratio:520/708;opacity:.82}
.portrait-lieu figcaption{position:absolute;left:0;right:0;bottom:-2.4rem;text-align:center;font-family:var(--neutre);font-size:.84rem;color:var(--encre-douce)}
.honnete{font-size:1rem;color:var(--encre)}
.titres{list-style:none;margin:1.6rem 0 0;padding:0}
.titres li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1rem;align-items:baseline;padding:.85rem 0;border-top:1px solid color-mix(in srgb,var(--encre) 14%,transparent)}
.titres li:last-child{border-bottom:1px solid color-mix(in srgb,var(--encre) 14%,transparent)}
.titres .an{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--accent-titre);min-width:3.2rem}

/* --- le cabinet : deux pièces dans l'arche, le bandeau fondu ; l'envol part de la photo de la salle d'attente (reprise.css) --- */
.cabinet-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,5fr);gap:clamp(1.4rem,1rem + 2vw,2.6rem);align-items:start}
.cabinet-grille .photo{aspect-ratio:4/5}
.cabinet-cote{display:grid;gap:1.4rem}
.bandeau-fondu{margin:clamp(2.4rem,2rem + 2vw,4rem) 0 0;height:clamp(9rem,6rem + 9vw,15rem);background:var(--photo-bandeau) 50% 55%/cover no-repeat;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(0deg,transparent,#000 30%,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(0deg,transparent,#000 30%,#000 70%,transparent);mask-composite:intersect}
@media (max-width:960px){.cabinet-grille{grid-template-columns:1fr 1fr}.cabinet-cote{grid-column:1 / -1}}
@media (max-width:560px){.cabinet-grille{grid-template-columns:1fr}.cabinet-grille .cadre-photo{width:min(100%,22rem);margin-inline:auto}}

/* --- les conditions : les tarifs, avec les champs du pupitre --- */
[data-pupitre]{border-bottom:1px dotted color-mix(in srgb,var(--accent-titre) 55%,transparent)}
.pupitre-note{margin-top:1.4rem}
.prix{font-family:var(--display);font-size:1.6rem;line-height:1.1;color:var(--encre)}

/* --- le pied : les deux diplômes en vignettes, zoom au survol --- */
.pied .grille{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr)}
.pied a{color:inherit}
.diplomes{position:relative;list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem}
.diplomes li{display:flex;align-items:center;gap:.65rem;padding:0;max-width:15rem}
.vignette{appearance:none;flex:none;width:68px;height:48px;padding:0;border:1px solid color-mix(in srgb,var(--pied-encre) 40%,transparent);border-radius:4px;background:#fff 50% 50%/cover no-repeat;cursor:zoom-in;box-shadow:0 6px 12px -8px rgba(0,0,0,.6)}
.vignette.d1{background-image:var(--diplome-1-mini)}
.diplomes .dit{font-size:.78rem;line-height:1.35;opacity:.9}
.zoom{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(18,24,21,.82);overscroll-behavior:contain}
.zoom[hidden]{display:none}
.zoom-img{display:block;width:min(90vw,calc(90vh * var(--k,1.4)),1100px);height:auto;aspect-ratio:var(--k,1.4);object-fit:contain;background:#fff;border-radius:4px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.zoom-fermer{position:absolute;top:max(.8rem,env(safe-area-inset-top));right:max(.8rem,env(safe-area-inset-right));width:3rem;height:3rem;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(18,24,21,.88);color:#fff;display:grid;place-items:center;cursor:pointer}
.zoom-fermer svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zoom-fermer:focus-visible,.vignette:focus-visible{outline:3px solid #fff;outline-offset:2px}
.zoom.survol{background:transparent;pointer-events:none}
.zoom.survol .zoom-fermer{display:none}
.zoom.survol .zoom-img{width:min(30rem,90vw)}
.pied .marque-maquette{font-size:.78rem;opacity:.8;margin-top:.6rem}
@media (max-width:960px){.pied .grille{grid-template-columns:1fr}}
.appel-fixe .bouton{flex:1}

/* le Carnet dans le plan du site */
.lien-carnet{font-family:var(--display);font-style:italic;font-size:1.1rem}
.voute .plan{position:absolute}

/* ===== le Carnet : plus aéré, plus petit ; le lierre fin en bord de feuille, une ombre légère derrière ===== */
.bandeau-carnet{padding:clamp(1.2rem,1rem + 1.5vw,2.4rem) 0 0}
.bandeau-photo{position:relative;margin:0 auto;width:min(100%,64rem);height:clamp(15rem,11rem + 14vw,23rem);border-radius:var(--rayon-carte);overflow:hidden;background:var(--sable);box-shadow:0 40px 60px -48px color-mix(in srgb,var(--encre) 70%,transparent)}
.bandeau-photo .plan{position:absolute}
.bandeau-photo .piece{inset:-10px;background:var(--photo-cabinet) 40% 50%/cover no-repeat;filter:brightness(1.08) saturate(.88)}
.bandeau-photo .eclaircie{background:linear-gradient(90deg,color-mix(in srgb,var(--fond-3) 82%,transparent) 0%,color-mix(in srgb,var(--fond-3) 62%,transparent) 42%,transparent 75%)}
.bandeau-photo .filigrane{right:6%;bottom:-6%;width:min(26%,11rem);aspect-ratio:520/708;opacity:.5}
.bandeau-texte{position:absolute;left:clamp(1.2rem,1rem + 3vw,3.4rem);top:50%;transform:translateY(-50%);max-width:min(30rem,62%);z-index:2}
.carnet-surtitre{font-family:var(--neutre);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-titre);margin:0 0 .4rem}
.carnet-titre{font-family:var(--display);font-size:clamp(2.8rem,1.6rem + 4vw,4.8rem);line-height:.95;margin:0}
.carnet-titre em{color:var(--accent-titre)}
.carnet-chapeau{font-family:var(--display);font-style:italic;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);line-height:1.35;margin:.8rem 0 0;color:var(--encre)}
@media (max-width:640px){.bandeau-photo{height:auto}.bandeau-texte{position:relative;left:auto;top:auto;transform:none;max-width:none;padding:1.5rem 36% 1.7rem 1.2rem}.bandeau-photo .eclaircie{background:linear-gradient(90deg,color-mix(in srgb,var(--fond-3) 86%,transparent) 0%,color-mix(in srgb,var(--fond-3) 70%,transparent) 60%,transparent 100%)}.bandeau-photo .filigrane{width:40%;right:-4%;bottom:-6%;opacity:.5}.carnet-chapeau{font-size:1rem}}

/* la feuille : le lierre tout le tour, une ombre légère en arrière-plan, comme un module 3D léger */
.feuille-zone{padding:clamp(2.4rem,2rem + 2vw,3.6rem) 0 clamp(3rem,2rem + 3vw,5rem)}
.feuille{position:relative;width:min(100%,58rem);margin:0 auto;padding:clamp(2.6rem,2rem + 2.5vw,4rem) clamp(1.6rem,1rem + 3.5vw,4rem);background:var(--fond-3);border-radius:14px;box-shadow:0 1px 0 color-mix(in srgb,var(--encre) 6%,transparent),0 28px 60px -34px color-mix(in srgb,var(--encre) 45%,transparent),0 10px 22px -18px color-mix(in srgb,var(--encre) 30%,transparent)}
.feuille::before{content:"";position:absolute;inset:10px -7px -10px 7px;z-index:-1;border-radius:14px;background:color-mix(in srgb,var(--sable) 75%,var(--fond))}
.lierre-defs{position:absolute;width:0;height:0;overflow:hidden}
.lierre{position:absolute;pointer-events:none;overflow:hidden;z-index:1}
.lierre svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lierre .echelle{position:absolute;inset:0}
.lierre-g{top:6px;bottom:6px;left:-20px;width:56px}
.lierre-d{top:6px;bottom:6px;right:-20px;width:56px;transform:scaleX(-1)}
.lierre-h{left:6px;right:6px;top:-26px;height:56px}
.lierre-b{left:6px;right:6px;bottom:-26px;height:56px;transform:scaleY(-1)}
.lierre .arriere{opacity:.55;transform:translate(5px,calc(var(--ls,0) * -3px))}
.lierre .avant{filter:drop-shadow(0 2px 1.6px rgba(30,40,34,.22));transform:translateY(calc(var(--ls,0) * 3px))}
.lierre-h .arriere,.lierre-b .arriere{transform:translate(calc(var(--ls,0) * -3px),5px)}
.lierre-h .avant,.lierre-b .avant{transform:translateX(calc(var(--ls,0) * 3px))}
.sans-anim .lierre .arriere{transform:translate(5px,0)}
.sans-anim .lierre-h .arriere,.sans-anim .lierre-b .arriere{transform:translate(0,5px)}
.sans-anim .lierre .avant{transform:none}
@media (max-width:560px){.lierre .echelle{width:125%;height:125%;transform:scale(.8);transform-origin:0 0}.lierre-g{left:-19px;width:45px}.lierre-d{right:-19px;width:45px}.lierre-h{top:-19px;height:45px}.lierre-b{bottom:-19px;height:45px}}

.carnet-note{font-family:var(--neutre);font-size:.84rem;color:var(--encre-douce);margin:0 0 2rem;text-align:center}
.carnet-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,1.4rem + 2vw,3rem) clamp(1.6rem,1rem + 2vw,2.6rem)}
.carnet-liste>li:last-child{grid-column:1 / -1}
.carte{position:relative;height:100%;background:var(--fond-2);border-radius:10px;padding:1.6rem 1.4rem 1.3rem;box-shadow:0 18px 34px -26px color-mix(in srgb,var(--encre) 55%,transparent),0 2px 6px -3px color-mix(in srgb,var(--encre) 18%,transparent)}
@media (hover:hover) and (pointer:fine){
  .js:not(.sans-anim) .carte{transition:transform .5s var(--ease),box-shadow .5s var(--ease);transform:perspective(1000px) rotateY(calc(var(--tx,0) * 3deg)) rotateX(calc(var(--ty,0) * -3deg))}
  .js:not(.sans-anim) .carte:hover{box-shadow:0 26px 40px -26px color-mix(in srgb,var(--encre) 60%,transparent),0 2px 6px -3px color-mix(in srgb,var(--encre) 18%,transparent)}
}
/* la photo tenue par un scotch dessiné, discret */
.carte-photo{position:relative;margin:-.2rem .2rem 1.2rem;transform:rotate(-1.2deg)}
.carnet-liste>li:nth-child(2) .carte-photo{transform:rotate(1.1deg)}
.carte-photo .image{display:block;aspect-ratio:560/460;border-radius:3px;background:var(--sable) 50% 50%/cover no-repeat;border:6px solid #FCFBF7;box-shadow:0 12px 20px -14px rgba(30,35,30,.6),0 1px 2px rgba(30,35,30,.12)}
.image.d-lampe{background-image:var(--detail-lampe)}
.image.d-pampa{background-image:var(--detail-pampa)}
.scotch{position:absolute;top:-12px;left:50%;width:6.2rem;height:1.55rem;margin-left:-3.1rem;transform:rotate(-4deg);background:linear-gradient(180deg,rgba(247,239,220,.82),rgba(236,226,202,.72));box-shadow:0 1px 2px rgba(60,50,30,.18);clip-path:polygon(0 8%,4% 0,9% 10%,14% 0,20% 8%,80% 6%,86% 0,91% 9%,96% 0,100% 8%,100% 92%,96% 100%,91% 90%,86% 100%,80% 93%,20% 94%,14% 100%,9% 91%,4% 100%,0 92%);opacity:.92}
.scotch::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 7px)}
.carnet-meta{font-family:var(--neutre);font-size:.8rem;color:var(--encre-douce);margin:0 0 .5rem;display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:center}
.carte h3{font-family:var(--display);font-size:clamp(1.45rem,1.3rem + .5vw,1.8rem);line-height:1.12;margin:0 0 .6rem}
.carnet-resume{font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.4;color:var(--accent-titre)}
.carnet-corps p{font-size:.98rem;color:var(--encre-douce)}
.autrice{margin:1.1rem 0 0;padding-top:.8rem;border-top:1px solid color-mix(in srgb,var(--encre) 12%,transparent);font-family:var(--neutre);font-size:.82rem;color:var(--encre-douce)}
.autrice em{font-family:var(--display);font-size:1.08rem;color:var(--encre)}
.carte-vide{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem;align-items:center;padding:1.4rem 1.6rem;border:1.5px dashed color-mix(in srgb,var(--encre) 25%,transparent);border-radius:10px;background:transparent}
.carte-vide svg{width:4.2rem;height:4.2rem}
.carte-vide h3{font-family:var(--display);font-size:1.5rem;margin:.3rem 0}
.carte-vide p{margin:0;color:var(--encre-douce)}
.carnet-pied-feuille{margin:2.6rem 0 0;text-align:center}
.carnet-pied-feuille .merci{font-family:var(--display);font-style:italic;font-size:1.4rem;margin-bottom:1rem}
.carnet-pied-feuille .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1.4rem;align-items:center}
.carnet-honnete{max-width:38rem;margin:1.8rem auto 0;font-size:.92rem;color:var(--encre-douce);padding:.85rem 1rem;border-left:3px solid var(--trait);background:var(--fond-2);border-radius:0 10px 10px 0;text-align:left}
@media (max-width:760px){.carnet-liste{grid-template-columns:1fr}.carnet-liste>li:last-child{grid-column:auto}}


:root{
  --ep:10px;
  --arche-clair:color-mix(in srgb,var(--fond-3) 45%,#fff);
  --arche-milieu:color-mix(in srgb,var(--sable) 62%,var(--fond-2));
  --arche-sombre:color-mix(in srgb,var(--trait) 62%,var(--sable));
  --arche-contour:color-mix(in srgb,var(--encre) 22%,transparent);
  --arche-grad:linear-gradient(160deg,var(--arche-clair) 0%,var(--arche-milieu) 48%,var(--arche-sombre) 100%);
  --ombre-arche:0 0 0 1px var(--arche-contour),0 2px 3px -1px color-mix(in srgb,var(--encre) 22%,transparent),0 34px 60px -34px color-mix(in srgb,var(--encre) 55%,transparent);
  --creux-arche:inset 0 0 0 1px var(--arche-contour),inset 0 1px 0 1px rgba(255,255,255,.4),inset 0 5px 12px -6px color-mix(in srgb,var(--encre) 32%,transparent);
  --feutre-fond:linear-gradient(180deg,color-mix(in srgb,var(--fond-3) 82%,var(--fond-2)),color-mix(in srgb,var(--fond-2) 76%,var(--sable)));
  --feutre-ombre:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px color-mix(in srgb,#fff 30%,transparent),0 1px 2px color-mix(in srgb,var(--encre) 12%,transparent),0 18px 36px -22px color-mix(in srgb,var(--encre) 42%,transparent);
  --bouton-fond:linear-gradient(180deg,color-mix(in srgb,var(--fond-3) 70%,#fff),color-mix(in srgb,var(--fond-2) 62%,var(--sable)));
  --bouton-ombre:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 color-mix(in srgb,var(--sable) 75%,var(--trait)),0 0 0 1px color-mix(in srgb,var(--encre) 9%,transparent),0 1px 2px color-mix(in srgb,var(--encre) 16%,transparent),0 14px 26px -16px color-mix(in srgb,var(--encre) 45%,transparent);
  --bouton-enfonce:inset 0 2px 7px color-mix(in srgb,var(--encre) 24%,transparent),inset 0 0 0 1.5px color-mix(in srgb,var(--accent-titre) 70%,transparent),0 1px 0 rgba(255,255,255,.75);
}

/* ---------- 1. les arches : double contour, épaisseur en dégradé, bord lumière, ombre portée douce ---------- */
.relief-arche{--dedans:linear-gradient(var(--fond-2),var(--fond-2));border:var(--ep) solid transparent;background:var(--dedans) padding-box,var(--arche-grad) border-box;box-shadow:var(--ombre-arche),var(--creux-arche)}
.voute.relief-arche{--dedans:linear-gradient(var(--sable),var(--sable));box-shadow:var(--ombre-arche),0 60px 90px -60px color-mix(in srgb,var(--encre) 60%,transparent)}
.voute::after,.cadre-photo .photo::after,.portrait-lieu .arc::before,.relief-cadre-n::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--creux-arche);pointer-events:none;z-index:3}
.relief-cadre-n::after{z-index:1}
/* les trois portes de « Qui je reçois » : chacune sa teinte, celle du milieu un peu plus haute ; plus de pictogrammes */
.porte-public{padding:3rem 1.6rem 1.8rem}
.p-adultes{--dedans:linear-gradient(180deg,color-mix(in srgb,var(--tache1) 45%,var(--fond-3)),var(--fond-2))}
.p-couples{--dedans:linear-gradient(180deg,color-mix(in srgb,var(--tache2) 60%,var(--fond-3)),var(--fond-2))}
.p-ados{--dedans:linear-gradient(180deg,color-mix(in srgb,var(--rose) 28%,var(--fond-3)),var(--fond-2))}
@media (min-width:961px){.portes{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr) minmax(0,1fr);align-items:start;gap:1.6rem}.p-couples{margin-top:-1.6rem}}
/* les photos du cabinet : le cadre en relief, le cadre décalé en épaisseur plutôt qu'en trait */
.cadre-photo .photo{border:var(--ep) solid transparent;background:linear-gradient(var(--sable),var(--sable)) padding-box,var(--arche-grad) border-box;box-shadow:var(--ombre-arche)}
.cadre-photo .photo.p-consultation{background:var(--photo-vertical) 50% 60%/cover no-repeat padding-box,var(--arche-grad) border-box}
.cadre-photo .photo.p-attente{background:var(--photo-attente) 50% 40%/cover no-repeat padding-box,var(--arche-grad) border-box}
.cadre-photo .cadre::before{border:0;background:linear-gradient(160deg,color-mix(in srgb,var(--sable) 70%,var(--fond-3)),color-mix(in srgb,var(--sable) 72%,var(--trait)));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px color-mix(in srgb,#fff 25%,transparent),0 12px 26px -18px color-mix(in srgb,var(--encre) 45%,transparent)}
.porte-rdv{--dedans:linear-gradient(180deg,var(--fond-3),color-mix(in srgb,var(--fond-2) 80%,var(--fond)))}

/* ---------- 2. les encadrés : fond teinté, ombre douce à deux niveaux, bord lumière, coins arrondis ---------- */
.feutre,.adresse,.sexo,.honnete,.pm-reponse,.carnet-honnete{border:0;background:var(--feutre-fond);box-shadow:var(--feutre-ombre);border-radius:18px}
.sexo{background:linear-gradient(180deg,color-mix(in srgb,var(--trait) 14%,var(--fond-3)),color-mix(in srgb,var(--trait) 22%,var(--fond-2)))}
.honnete,.carnet-honnete{border-left:0;padding:.9rem 1.15rem;border-radius:14px}
.pm-message{border:0;background:var(--fond-3);border-radius:14px;box-shadow:inset 0 1px 0 #fff,0 0 0 1px color-mix(in srgb,var(--encre) 7%,transparent),0 12px 26px -18px color-mix(in srgb,var(--encre) 45%,transparent)}
.voute figcaption{box-shadow:var(--feutre-ombre);background:color-mix(in srgb,var(--fond-3) 92%,transparent)}
.pied .urgence{border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--pied-encre) 10%,var(--pied)),color-mix(in srgb,var(--pied-encre) 5%,var(--pied)));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pied-encre) 20%,transparent),0 16px 30px -18px rgba(0,0,0,.75);border-radius:14px}
/* « en bref » : la bande tressée est retirée ; une seule capsule feutrée, trois repères en ligne */
.en-bref{padding:clamp(1.6rem,1rem + 2vw,2.6rem) 0 0}
.en-bref ul{list-style:none;margin:0 auto;padding:.6rem 1.4rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.3rem 0;width:fit-content;max-width:100%;border-radius:999px;background:var(--feutre-fond);box-shadow:var(--feutre-ombre)}
.en-bref li{padding:.15rem .9rem}
.en-bref li+li{border-left:1px solid color-mix(in srgb,var(--encre) 14%,transparent)}
.en-bref li b{font-weight:400;font-family:var(--display);font-style:italic;font-size:1.15em;color:var(--accent-titre)}
@media (max-width:640px){.en-bref ul{flex-direction:column;align-items:center;border-radius:22px;padding:.8rem 1rem;text-align:center}.en-bref li+li{border-left:0;border-top:1px solid color-mix(in srgb,var(--encre) 12%,transparent)}}

/* ---------- 3. les boutons : on voit qu'ils se cliquent ; fond plein doux, relief, enfoncement au clic, état choisi net ---------- */
.pm-bouton{border:0;border-radius:20px;background:var(--bouton-fond);box-shadow:var(--bouton-ombre);padding:1.4rem 1.4rem 1.6rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .4s}
.pm-bouton:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 0 color-mix(in srgb,var(--sable) 75%,var(--trait)),0 0 0 1px color-mix(in srgb,var(--encre) 12%,transparent),0 2px 4px color-mix(in srgb,var(--encre) 16%,transparent),0 20px 32px -16px color-mix(in srgb,var(--encre) 50%,transparent)}
.pm-bouton:active{transform:translateY(1px);box-shadow:var(--bouton-enfonce)}
.pm-bouton[aria-pressed="true"]{transform:translateY(1px);background:linear-gradient(180deg,color-mix(in srgb,var(--accent-titre) 14%,var(--fond-3)),color-mix(in srgb,var(--accent-titre) 22%,var(--fond-2)));box-shadow:var(--bouton-enfonce)}
.pm-qui{display:flex;align-items:center;gap:.6rem}
.pm-qui::before{content:"";flex:none;width:.95rem;height:.95rem;border-radius:50%;background:var(--fond-3);box-shadow:inset 0 1px 3px color-mix(in srgb,var(--encre) 32%,transparent),0 1px 0 rgba(255,255,255,.85);transition:background .3s}
.pm-bouton[aria-pressed="true"] .pm-qui{color:var(--accent-titre)}
.pm-bouton[aria-pressed="true"] .pm-qui::before{background:radial-gradient(circle,var(--accent-titre) 0 42%,var(--fond-3) 50%)}
.pm-copier,.souffle-bouton{border:0;background:var(--bouton-fond);box-shadow:var(--bouton-ombre);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pm-copier:hover,.souffle-bouton:hover{transform:translateY(-1px)}
.pm-copier:active,.souffle-bouton:active,.souffle.en-cours .souffle-bouton{transform:translateY(1px);box-shadow:var(--bouton-enfonce)}
/* les quatre boutons de l'en-tête prennent le même relief, en plus discret */
.b4{border:0;background:var(--bouton-fond);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px color-mix(in srgb,var(--encre) 13%,transparent),0 4px 10px -6px color-mix(in srgb,var(--encre) 40%,transparent)}
.b4:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px color-mix(in srgb,var(--encre) 26%,transparent),0 6px 12px -6px color-mix(in srgb,var(--encre) 45%,transparent)}
.b4[aria-pressed="true"],.b-carnet[aria-current="page"]{box-shadow:inset 0 1px 3px color-mix(in srgb,var(--encre) 22%,transparent),0 0 0 1.5px var(--accent-titre)}

/* ---------- 4. la voûte : la salle claire, le portrait ovale posé sur le voilage blanc (R1), jamais sur l'étagère ---------- */
.filigrane{-webkit-mask-image:radial-gradient(closest-side,#000 46%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.32) 84%,transparent 100%);mask-image:radial-gradient(closest-side,#000 46%,rgba(0,0,0,.78) 64%,rgba(0,0,0,.32) 84%,transparent 100%)}
.voute .piece{background-position:38% 52%}
.voute .filigrane{left:21%;right:auto;bottom:5%;width:min(32%,20rem);opacity:.7}
.voute .eclaircie{background:radial-gradient(ellipse 22% 46% at 37% 52%,color-mix(in srgb,var(--fond-3) 62%,transparent),transparent 100%),radial-gradient(ellipse 22% 34% at 37% 92%,color-mix(in srgb,var(--fond-3) 70%,transparent),transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--fond-3) 30%,transparent),transparent 34%)}
.voute figcaption{left:auto;right:1.2rem;bottom:1.1rem;text-align:right}
@media (max-width:960px){
  .voute{height:min(36rem,128vw)}
  .voute .piece{background-position:30% 52%}
  .voute .filigrane{left:14%;right:auto;width:70%;bottom:9%}
  .voute .eclaircie{background:radial-gradient(ellipse 46% 36% at 50% 46%,color-mix(in srgb,var(--fond-3) 55%,transparent),transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--fond-3) 30%,transparent),transparent 34%)}
  .voute figcaption{right:50%;transform:translateX(50%);bottom:.9rem;text-align:center;width:max-content;max-width:86%}
}
[data-maquette="o2"] .voute .piece{background:var(--photo-attente-voute) 50% 0%/cover no-repeat;filter:brightness(1.05) saturate(.92)}
[data-maquette="o2"] .voute .filigrane{left:14%;width:min(31%,19.5rem);bottom:10%}
[data-maquette="o2"] .voute .eclaircie{background:radial-gradient(ellipse 22% 40% at 30% 44%,color-mix(in srgb,var(--fond-3) 56%,transparent),transparent 100%),radial-gradient(ellipse 19% 28% at 24% 82%,color-mix(in srgb,var(--fond-3) 76%,transparent),transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--fond-3) 30%,transparent),transparent 34%)}
@media (max-width:960px){
  [data-maquette="o2"] .voute .piece{background-position:0% 0%}
  [data-maquette="o2"] .voute .filigrane{left:-2%;width:68%;bottom:9%}
  [data-maquette="o2"] .voute .eclaircie{background:radial-gradient(ellipse 44% 36% at 34% 46%,color-mix(in srgb,var(--fond-3) 55%,transparent),transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--fond-3) 30%,transparent),transparent 34%)}
}
/* « Qui je suis » : la salle claire IMG_9352 (R4), le portrait fondu sur le voilage */
.portrait-lieu .arc{border:var(--ep) solid transparent;background:var(--photo-cabinet) 33% 8%/auto 150% no-repeat padding-box,var(--arche-grad) border-box;box-shadow:var(--ombre-arche)}
.portrait-lieu .arc::after{background:radial-gradient(ellipse 58% 44% at 50% 40%,color-mix(in srgb,var(--fond-3) 48%,transparent),transparent 100%),linear-gradient(180deg,color-mix(in srgb,var(--fond-3) 22%,transparent),transparent 45%,color-mix(in srgb,var(--fond-3) 42%,transparent))}
.portrait-lieu .ombre-arc{background:linear-gradient(160deg,color-mix(in srgb,var(--trait) 22%,var(--fond)),color-mix(in srgb,var(--trait) 36%,var(--fond)));box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.portrait-lieu .filigrane{left:10%;right:10%;bottom:var(--ep);opacity:.84}

/* ---------- 5. les feuilles : une transition discrète entre les sections, à la place de la bande tressée ---------- */
.feuilles-defs{position:absolute;width:0;height:0;overflow:hidden}
.passage{display:flex;justify-content:center;padding:clamp(.6rem,.3rem + 1vw,1.2rem) 0;pointer-events:none}
.passage svg{width:min(13.5rem,52vw);height:auto;overflow:visible}
.passage .pf{transform:translate(calc(var(--pv,0) * var(--k,4) * 1px),calc(var(--pv,0) * var(--k,4) * -.35px));transition:transform .7s var(--ease)}
.sans-anim .passage .pf{transform:none}

/* ---------- 6. le déroulement : un court paragraphe, trois phrases en marge le long d'une tige ; ni numéros ni cartes ---------- */
.recit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:start}
.recit-grand{font-family:var(--display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.45rem);line-height:1.28;margin:0;color:var(--bande-encre)}
.marge{position:relative;padding-left:2.8rem}
.marge .tige{position:absolute;left:0;top:-.3rem;width:2rem;height:100%;overflow:visible}
.marge p{font-family:var(--display);font-style:italic;font-size:clamp(1.12rem,1.05rem + .3vw,1.3rem);line-height:1.42;color:color-mix(in srgb,var(--bande-encre) 90%,transparent);margin:0 0 1.6rem}
.marge p:nth-of-type(2){margin-left:.9rem}
.marge p:last-child{margin-bottom:0}
@media (max-width:960px){.recit{grid-template-columns:1fr}.marge p:nth-of-type(2){margin-left:0}}

.souffle-cercle span,.souffle-repere{position:absolute;width:84%;aspect-ratio:1;height:auto;border-radius:50%;left:8%;top:50%;translate:0 -50%}
@media (prefers-reduced-motion:no-preference){.vivant .souffle:not(.en-cours) .souffle-cercle span{animation:souffle-repos 7s ease-in-out infinite alternate}}

/* ---------- 8. l'envol : cinq oiseaux se détachent du mur de la salle d'attente, sortent du cadre, s'effacent ---------- */
.vol .cadre{position:relative}
.envol-oiseaux{position:absolute;left:var(--ep);top:var(--ep);width:calc(100% - 2 * var(--ep));height:calc(100% - 2 * var(--ep));overflow:visible;pointer-events:none;z-index:4}
.oiseau{opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.oiseau .aile{transform-box:fill-box;transform-origin:85% 100%}
.vol.envole .oiseau{animation:envol var(--du,2s) var(--de,0s) ease-in-out both}
.vol.envole .oiseau .aile{animation:battre .24s ease-in-out infinite alternate}
.vol.envole .oiseau .aile.loin{animation-delay:-.12s}
@keyframes envol{
  0%{opacity:0;transform:translate(0,0) rotate(0deg) scale(1)}
  10%{opacity:1;transform:translate(calc(var(--dx) * .01),calc(var(--dy) * .015)) rotate(0deg) scale(1.04)}
  36%{opacity:1;transform:translate(calc(var(--dx) * .22),calc(var(--dy) * .2)) rotate(calc(var(--r,-10deg) * .4)) scale(1.18)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r,-10deg)) scale(var(--s,.72))}
}
@keyframes battre{to{transform:scaleY(.42)}}
.sans-anim .envol-oiseaux,html:not(.js) .envol-oiseaux{display:none}
@media (prefers-reduced-motion:reduce){.envol-oiseaux{display:none}}

/* ---------- 9. le logo (proposition b) dans l'en-tête ---------- */
.marque .logo{width:2.2rem;height:2.2rem;flex:none;color:var(--accent-titre);overflow:visible}
@media (max-width:400px){.marque .logo{width:1.75rem;height:1.75rem}.marque{gap:.45rem}}

/* ---------- 10. le pied : les vignettes sans trait nu ---------- */
.vignette{border:0;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 6px 12px -8px rgba(0,0,0,.6)}

.relief-cadre-n{border:var(--ep) solid transparent;background:linear-gradient(var(--sable),var(--sable)) padding-box,var(--arche-grad) border-box;box-shadow:var(--ombre-arche);border-radius:22px}
.bandeau-photo .piece{background-position:42% 44%}
.bandeau-photo .eclaircie{background:radial-gradient(ellipse 17% 62% at 38% 56%,color-mix(in srgb,var(--fond-3) 52%,transparent),transparent 100%),linear-gradient(270deg,color-mix(in srgb,var(--fond-3) 88%,transparent) 0%,color-mix(in srgb,var(--fond-3) 70%,transparent) 40%,transparent 60%)}
.bandeau-photo .filigrane{left:28%;right:auto;bottom:-8%;width:min(21%,13rem);opacity:.66}
.bandeau-texte{left:auto;right:clamp(1.2rem,1rem + 3vw,3.4rem);max-width:min(29rem,45%)}
@media (max-width:640px){
  .bandeau-photo .piece{background-position:0% 40%}
  .bandeau-texte{right:auto;padding:1.5rem 41% 1.7rem 1.1rem;max-width:none}
  .bandeau-photo .eclaircie{background:radial-gradient(ellipse 30% 46% at 76% 55%,color-mix(in srgb,var(--fond-3) 50%,transparent),transparent 100%),linear-gradient(90deg,color-mix(in srgb,var(--fond-3) 88%,transparent) 0%,color-mix(in srgb,var(--fond-3) 72%,transparent) 50%,transparent 66%)}
  .bandeau-photo .filigrane{left:auto;right:1%;width:42%;bottom:-6%;opacity:.62}
}
.carte{background:var(--feutre-fond);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 1px 2px color-mix(in srgb,var(--encre) 12%,transparent),0 20px 36px -24px color-mix(in srgb,var(--encre) 52%,transparent);border-radius:16px}
.carte-vide{border:0;border-radius:16px}


/* ---------- 1. les coordonnées : cliquables, jamais coupées ---------- */
.tel{white-space:nowrap}
.tel,.mel{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
.ruban a{color:inherit}
.ruban-contact{white-space:normal}
@media (max-width:560px){.ruban-contact{display:block}.ruban-contact .sep{display:none}}
.li-contact{display:none}
@media (max-width:1180px){.nav.is-open .li-contact{display:list-item}.nav.is-open .li-contact a{color:var(--accent-titre);overflow-wrap:anywhere}}
.pied .coord{margin:.6rem 0 0;line-height:1.7}
.pied .coord a,.pied .mentions a{color:var(--pied-encre)}
.porte-rdv .contact a{color:inherit}
.pm-actions .mel{overflow-wrap:anywhere}

/* ---------- 2. les cadres feutrés : plus de filets en grille (conditions, motifs, questions, titres) ---------- */
.conditions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:1.4rem;align-items:start}
.cond{padding:1.5rem 1.5rem 1.4rem;border-radius:20px}
.cond h3{font-family:var(--display);font-weight:400;font-style:italic;font-size:1.65rem;line-height:1.1;color:var(--accent-titre);margin:0 0 1rem}
.cond p{margin:0 0 1rem;line-height:1.5}
.cond p:last-child{margin-bottom:0}
.cond b{display:block;font-family:var(--neutre);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);margin-bottom:.25rem}
.cond .prix{font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--encre)}
.cond-tarifs{background:linear-gradient(180deg,color-mix(in srgb,var(--miel) 22%,var(--fond-3)),color-mix(in srgb,var(--miel) 30%,var(--fond-2)))}
.cond-cadre{background:linear-gradient(180deg,color-mix(in srgb,var(--trait) 12%,var(--fond-3)),color-mix(in srgb,var(--trait) 20%,var(--fond-2)))}
.cond-urgence{font-size:.9rem;color:var(--encre-douce)}
@media (min-width:961px){.cond-pratique{margin-top:1.6rem}}
@media (max-width:960px){.conditions{grid-template-columns:1fr 1fr}.cond-pratique{grid-column:1 / -1;order:3}}
@media (max-width:640px){.conditions{grid-template-columns:1fr}.cond-pratique{order:0}}
/* O : les trois colonnes de « Ce dont on peut parler » deviennent trois cadres, sans traits entre les lignes */
.motifs{gap:1.4rem;align-items:start}
.motifs>div{padding:1.5rem 1.5rem 1.3rem;border-radius:20px;background:var(--feutre-fond);box-shadow:var(--feutre-ombre)}
.motifs>div:nth-child(2){margin-top:1.6rem;background:linear-gradient(180deg,color-mix(in srgb,var(--tache2) 45%,var(--fond-3)),var(--fond-2))}
.motifs>div:nth-child(3){background:linear-gradient(180deg,color-mix(in srgb,var(--rose) 22%,var(--fond-3)),var(--fond-2))}
.motifs li{border-top:0;padding:.42rem 0}
.motifs h3{margin-top:0}
@media (max-width:960px){.motifs>div:nth-child(2){margin-top:0}}
/* les questions : chaque question est un petit cadre, l'espace remplace le trait */
.faq{display:grid;gap:.8rem}
.faq details,.faq details:last-child{border:0;border-radius:16px;padding:0 1.3rem;background:var(--feutre-fond);box-shadow:var(--feutre-ombre)}
.faq details[open]{background:linear-gradient(180deg,var(--fond-3),color-mix(in srgb,var(--fond-2) 80%,var(--sable)))}
.faq summary{padding:1rem 0}
/* les titres de « Qui je suis » : un seul cadre, des lignes espacées */
.titres.feutre{padding:.6rem 1.3rem;border-radius:16px}
.titres li,.titres li:last-child{border:0;padding:.55rem 0}

/* ---------- 3. le premier message : plus de guillemet seul sur sa ligne (R3) ---------- */
.pm-phrase{text-wrap:balance}


[data-maquette="o2"] .voute .piece{background:var(--photo-attente-voute) 50% 42%/cover no-repeat;filter:brightness(1.05) saturate(.92)}
[data-maquette="o2"] .voute .filigrane{left:auto;right:3%;width:min(30%,19rem);bottom:4%}
[data-maquette="o2"] .voute .eclaircie{background:radial-gradient(ellipse 20% 42% at 82% 56%,color-mix(in srgb,var(--fond-3) 50%,transparent),transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--fond-3) 30%,transparent),transparent 34%)}
[data-maquette="o2"] .voute figcaption{left:1.2rem;right:auto;text-align:left}
@media (max-width:960px){
  [data-maquette="o2"] .voute .piece{background-position:100% 50%}
  [data-maquette="o2"] .voute .filigrane{left:auto;right:-4%;width:60%;bottom:8%}
  [data-maquette="o2"] .voute .eclaircie{background:radial-gradient(ellipse 40% 34% at 70% 58%,color-mix(in srgb,var(--fond-3) 45%,transparent),transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--fond-3) 30%,transparent),transparent 34%)}
  [data-maquette="o2"] .voute figcaption{left:50%;right:auto;transform:translateX(-50%);text-align:center}
}
.motifs.motifs-prose{grid-template-columns:repeat(2,minmax(0,1fr))}
.motifs-prose>div p{margin:0;line-height:1.6;font-size:1.06rem}
@media (max-width:960px){.motifs.motifs-prose{grid-template-columns:1fr}}
.motifs-prose>div p+p{margin-top:.6rem}
[data-maquette="o2"] .recit-grand{font-size:clamp(1.45rem,1.1rem + 1.2vw,2.2rem)}

/* ---------- 6. les deux diplômes, entiers : même petit encadré crème, le document tout entier réduit dedans ---------- */
.vignette{width:76px;height:54px;padding:3px;background-color:#F6F1E6;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-origin:content-box;background-clip:padding-box;border-radius:4px}
.vignette.d1{background-image:var(--diplome-1-mini)}
.vignette.d2{background-image:var(--diplome-2-mini)}.vignette.d3{background-image:var(--diplome-3-mini)}
.zoom-img{box-shadow:0 0 0 6px #F6F1E6,0 30px 60px -20px rgba(0,0,0,.7)}

/* ---------- 7. le pied : le plan du site en liens ---------- */
.pied .grille ul li{margin:.18rem 0}
.pied .grille ul a{color:var(--pied-encre)}

/* ---------- 8. le logo (1) : l'amande en feuille de sauge, dans l'en-tête ---------- */
.marque .logo{width:2.4rem;height:2.4rem}
@media (max-width:400px){.marque .logo{width:1.9rem;height:1.9rem}}

/* ---------- 9. le Carnet sur téléphone : le portrait moins voilé (R6) ---------- */
@media (max-width:640px){
  .bandeau-photo .filigrane{opacity:.86;-webkit-mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.85) 76%,rgba(0,0,0,.35) 90%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,rgba(0,0,0,.85) 76%,rgba(0,0,0,.35) 90%,transparent 100%)}
  .bandeau-photo .eclaircie{background:linear-gradient(90deg,color-mix(in srgb,var(--fond-3) 88%,transparent) 0%,color-mix(in srgb,var(--fond-3) 72%,transparent) 48%,transparent 60%)}
}

/* ---------- 10. retouches vues sur l'aperçu ---------- */
/* les champs que Véronique pourra changer seule gardent leur attribut, sans pointillé visible : sur une page propre, il se lirait comme un manque */
[data-pupitre]{border-bottom:0}
/* l'adresse du cabinet : l'espace remplace les filets, comme partout */
.faits li{border-top:0;padding:.32rem 0}
.adresse address{margin-bottom:.8rem}
/* le pied : un souffle sous les coordonnées */
.pied .coord{margin-bottom:.9rem}
/* les notes sans le petit trait pointillé qui les précédait (correction du 12/10 au soir) */
.attente::before{content:none}
.attente{display:block}
@font-face{font-family:"Instrument Serif";src:url(assets/police-1e3bf8f4.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(assets/police-4036d1c3.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(assets/police-2b81d5b6.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{--detail-lampe:url(assets/detail-lampe.webp);--detail-pampa:url(assets/detail-pampa.webp);--diplome-1:url(assets/diplome-1.webp);--diplome-1-mini:url(assets/diplome-1-mini.webp);--diplome-2:url(assets/diplome-2.webp);--diplome-2-mini:url(assets/diplome-2-mini.webp);--diplome-3:url(assets/diplome-3.webp);--diplome-3-mini:url(assets/diplome-3-mini.webp)}

/* logo VB du 19/10/2026, un peu plus grand que l'ancien (2,4rem) */
.logo[data-logo="VB"]{width:4.6rem;height:4.6rem;color:#4D7164;flex:none}@media (max-width:700px){.logo[data-logo="VB"]{width:3.3rem;height:3.3rem}}@media (max-width:400px){.logo[data-logo="VB"]{width:3rem;height:3rem}}
/* anciens attributs style des balises, sortis le 23/10/2026 pour la politique de securite */
.zs1.zs1.zs1{margin:0 auto}
.zs2.zs2.zs2{--d:-8}
.zs3.zs3.zs3{--d:8}
.zs4.zs4.zs4{stop-color:var(--lierre-b)}
.zs5.zs5.zs5{stop-color:var(--lierre-a)}
.zs6.zs6.zs6{stop-color:var(--lierre-v)}
.zs7.zs7.zs7{stroke:var(--lierre-tige)}
.zs8.zs8.zs8{stroke:var(--lierre-v)}
.zs9.zs9.zs9{margin-top:1.8rem}
.zs10.zs10.zs10{margin-top:1.6rem}
.zs11.zs11.zs11{--k:1.4973}
.zs12.zs12.zs12{--k:1.3902}
.zs13.zs13.zs13{--k:1.4151}

/* polices de secours calibrees sur les vraies (23/10/2026) : le texte ne saute presque plus quand les polices arrivent */
@font-face{font-family:"Instrument Serif secours";src:local("Georgia");size-adjust:75.81%;ascent-override:130.59%;descent-override:40.89%;line-gap-override:0%}
@font-face{font-family:"Instrument Serif secours";font-style:italic;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:79.03%;ascent-override:125.27%;descent-override:39.23%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans secours";src:local("Arial"),local("ArialMT");size-adjust:101.53%;ascent-override:95.54%;descent-override:24.62%;line-gap-override:0%}