/* --- polices hebergees ici, en woff2 --- */
@font-face{font-family:'Playfair Display';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/PlayfairDisplay-700.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/PlayfairDisplay-800.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-style:italic;font-display:swap;src:url(/assets/fonts/PlayfairDisplay-700-italic.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:800;font-style:italic;font-display:swap;src:url(/assets/fonts/PlayfairDisplay-800-italic.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:400;font-display:swap;src:url(/assets/fonts/NunitoSans-400.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:600;font-display:swap;src:url(/assets/fonts/NunitoSans-600.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:700;font-display:swap;src:url(/assets/fonts/NunitoSans-700.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-weight:800;font-display:swap;src:url(/assets/fonts/NunitoSans-800.woff2) format('woff2')}

/* Souffle de Vie : feuille de style du site, version 2.
   Palette et polices du flyer. Trois motifs reviennent partout : la vague, l'anneau du logo
   et le rythme de respiration 4-6, qui anime les cercles sans une ligne de JavaScript. */

:root{
  --creme:#F7F4ED; --blanc:#FDFBF6; --encre:#1B2A38; --encre2:#3A4757;
  --jaune:#F7B32E; --jaune2:#f5a90f; --jaune-graine:#ECAB2C; --bleu:#D8E3EE; --bleu-f:#33566F; --sable:#E7E0D2; --filet:#E2DCCB;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Nunito Sans',system-ui,sans-serif;color:var(--encre);background:var(--creme);
     line-height:1.55;font-size:18px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;line-height:1.02;margin:0 0 .45em;letter-spacing:-.02em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(2.9rem,7.2vw,6rem)}
h2{font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem)}
h3{font-weight:700;font-size:1.45rem;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;font-weight:800}
p{margin:0 0 1em}
.sur{display:flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;color:var(--encre);margin-bottom:1.1em}
.sur::before{content:"";width:12px;height:12px;border:2.5px solid currentColor;border-radius:50%;flex:none}
.chapo{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--encre2);max-width:56ch;line-height:1.5}
.saut{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--jaune);padding:8px 12px;color:var(--encre);font-weight:700}
.saut:focus{width:auto;height:auto;overflow:visible;clip-path:none;left:8px;top:8px;z-index:20;border-radius:8px}

/* --- respiration 4-6 : 10 secondes, 40 % pour gonfler, 60 % pour relacher --- */
@keyframes souffle{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes voix-in{0%,34%{opacity:1}42%,100%{opacity:0}}
@keyframes voix-ex{0%,38%{opacity:0}46%,96%{opacity:1}100%{opacity:0}}
@keyframes defile{to{transform:translateX(-50%)}}
.anneau{position:relative;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:800}
.anneau .disque{position:absolute;inset:0;border-radius:50%;border:6px solid var(--encre);animation:souffle 10s ease-in-out infinite}
.anneau .voix{position:relative;display:grid}
.anneau .voix span{grid-area:1/1;animation:voix-in 10s linear infinite}
.anneau .voix span.ex{animation-name:voix-ex}
@media(prefers-reduced-motion:reduce){
  .anneau .disque,.anneau .voix span,.bande div{animation:none!important}
  .anneau .voix span.ex{display:none}
  .reveal{opacity:1!important;transform:none!important}
}

/* --- en-tete --- */
.tete{position:sticky;top:0;z-index:10;background:var(--jaune);transition:background .3s,box-shadow .3s}
.tete.solide{background:rgba(247,244,237,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--filet)}
.tete .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo img{height:34px;width:auto}
nav ul{display:flex;gap:30px;align-items:center}
nav a{text-decoration:none;font-weight:700;font-size:.95rem;padding:6px 0;border-bottom:2px solid transparent}
nav a[aria-current]{border-color:var(--encre)}
nav a:hover{border-color:var(--encre)}
nav .cta{background:var(--encre);color:var(--creme);padding:11px 20px;border-radius:999px;border:0}
nav .cta:hover{background:var(--bleu-f)}
.burger{display:none}
nav .menu-pied{display:none}
@media(max-width:860px){
  nav ul{display:none;position:fixed;inset:78px 0 0 0;background:var(--jaune);flex-direction:column;gap:0;
         padding:24px 28px 32px;align-items:stretch;overflow:auto;z-index:9}
  nav.ouvert ul{display:flex}
  nav li a{display:block;padding:16px 0;font-family:'Playfair Display',serif;font-weight:800;font-size:2rem;letter-spacing:-.02em;border:0;border-bottom:1.5px solid rgba(27,42,56,.25)}
  nav li a[aria-current]{border-bottom-color:var(--encre)}
  nav .cta{display:block;margin-top:28px;text-align:center;font-family:'Nunito Sans',sans-serif;font-size:1.05rem;padding:16px 20px;border-radius:999px}
  body.menu-ouvert{overflow:hidden}
  body.menu-ouvert .tete{background:var(--jaune);box-shadow:none;backdrop-filter:none}
  nav .menu-pied{display:block;margin-top:auto;padding-top:32px;font-family:'Nunito Sans',sans-serif;font-size:.95rem;line-height:1.6;color:var(--encre2)}
  nav .menu-pied a{display:inline;padding:0;border:0;font:inherit;font-weight:700;color:var(--encre);text-decoration:underline}
  .burger{display:block;background:none;border:2px solid var(--encre);border-radius:999px;font:inherit;font-weight:800;cursor:pointer;padding:8px 16px}
}

/* --- boutons --- */
.btn{display:inline-block;padding:16px 28px;border-radius:999px;font-weight:800;text-decoration:none;
     background:var(--encre);color:var(--creme);transition:transform .2s var(--ease),background .2s;line-height:1.2}
.btn:hover{transform:translateY(-2px);background:var(--bleu-f)}
.btn.jaune{background:var(--jaune);color:var(--encre)}
.btn.jaune:hover{background:var(--jaune2)}
.btn.ligne{background:transparent;border:2px solid var(--encre);color:var(--encre)}
.btn.ligne:hover{background:var(--encre);color:var(--creme)}
.btn.creme{background:var(--creme);color:var(--encre)}
.btn.creme:hover{background:#fff}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* --- vague de section --- */
.vague{display:block;width:100%;height:clamp(40px,7vw,96px);position:absolute;left:0;bottom:-1px}
.vague path:not(.trait-vague){fill:var(--creme)}
.vague.jaune path:not(.trait-vague){fill:var(--jaune-graine)}
.vague.encre path:not(.trait-vague){fill:var(--encre)}
.vague.blanc path:not(.trait-vague){fill:var(--blanc)}

/* --- hero --- */
.hero{position:relative;background:var(--jaune);padding:clamp(40px,6vw,80px) 0 clamp(96px,11vw,150px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,72px);align-items:center;position:relative}
.hero h1{margin-bottom:.35em}
.hero .chapo{margin-bottom:1.7em;color:var(--encre)}
.hero-visuel{position:relative;padding:6% 8% 14% 4%}
.hero-visuel .blob{width:100%;aspect-ratio:1;object-fit:cover;position:relative;z-index:1;
  border-radius:58% 42% 55% 45% / 48% 55% 45% 52%;transform:rotate(-2.5deg);box-shadow:0 40px 80px -40px rgba(27,42,56,.55)}
.hero-visuel .halo{position:absolute;inset:0 0 8% 10%;border-radius:50%;border:2px solid var(--encre);opacity:.28;transform:translate(6%,-4%)}
.hero-visuel .halo.b{inset:10% -6% 0 20%;border-width:1.5px;opacity:.18;transform:translate(4%,6%)}
.sticker{position:absolute;z-index:2;top:2%;right:-2%;background:var(--bleu);padding:12px 20px;border-radius:16px;
  font-weight:800;line-height:1.25;font-size:.95rem;transform:rotate(4deg);display:flex;gap:9px;align-items:center;box-shadow:0 10px 30px -14px rgba(27,42,56,.5)}
.sticker svg{flex:none}
.hero .anneau{position:absolute;z-index:3;left:-2%;bottom:0;width:clamp(120px,14vw,170px);aspect-ratio:1;background:var(--creme);font-size:.95rem}
.hero .anneau .disque{border-color:var(--encre)}
@media(max-width:900px){
  .hero{padding-top:32px;padding-bottom:72px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visuel{max-width:440px;margin:0 auto;padding:4% 8% 10% 4%}
  .hero .anneau{left:0;width:112px;font-size:.85rem}
  .sticker{font-size:.85rem;padding:10px 16px}
}
@media(max-width:600px){
  .actions .btn{width:100%;text-align:center}
  h1{font-size:clamp(2.3rem,10.5vw,3rem)}
  .hero .chapo .long{display:none}
  .hero .chapo{margin-bottom:1.2em}
  .hero{padding-top:24px}
}

/* --- bandeau qui defile --- */
.bande{background:var(--encre);color:var(--creme);overflow:hidden;padding:16px 0;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.82rem}
.bande div{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:defile 40s linear infinite}
.bande span{display:flex;align-items:center;gap:56px}
.bande span::after{content:"";width:14px;height:14px;border:2.5px solid var(--jaune);border-radius:50%}

/* --- sections --- */
.section{padding:clamp(64px,9vw,120px) 0;position:relative;overflow-x:clip}
.section.jaune{background:var(--jaune)}
.section.encre{background:var(--encre);color:var(--creme)}
.section.encre .chapo,.section.encre p{color:#d9dfe6}
.section.encre .sur{color:var(--jaune)}
.section.encre h2{color:var(--creme)}
.section.blanc{background:var(--blanc)}
.section.bleu{background:var(--bleu)}
.section.a-vague{padding-bottom:clamp(120px,16vw,220px)}
.entete{max-width:64ch;margin-bottom:clamp(36px,5vw,64px)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:860px){.deux,.trois{grid-template-columns:1fr}}

/* --- photos en formes --- */
.blob{aspect-ratio:1;object-fit:cover;border-radius:58% 42% 55% 45% / 48% 55% 45% 52%}
.blob.b{border-radius:42% 58% 45% 55% / 55% 45% 55% 45%}
.cadre-photo{position:relative}
.cadre-photo .halo{position:absolute;inset:-6% -4% 6% 8%;border:2px solid var(--encre);border-radius:50%;opacity:.25;pointer-events:none}

/* --- mosaique et bande de photos --- */
.mosaique{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;aspect-ratio:1}
.mosaique img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.mosaique img:first-child{grid-row:1/3;object-position:50% 30%}
.large{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:26px}
.bande-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bande-photos figure{margin:0}
.bande-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px}
.bande-photos figcaption{margin-top:14px;font-weight:800;font-size:1.05rem;position:relative;padding-left:24px}
.bande-photos figcaption::before{content:"";position:absolute;left:0;top:.32em;width:12px;height:12px;border:2.5px solid currentColor;border-radius:50%}
.bande-photos figcaption small{display:block;font-weight:600;color:var(--encre2);font-size:.9rem;margin-top:2px}
@media(max-width:860px){.bande-photos{grid-template-columns:1fr}}

/* --- liste editoriale numerotee --- */
.liste-01 li{display:grid;grid-template-columns:96px 1fr auto;gap:28px;align-items:start;padding:36px 0;border-top:1.5px solid var(--encre)}
.liste-01 li:last-child{border-bottom:1.5px solid var(--encre)}
.liste-01 .num{font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.9;letter-spacing:-.03em}
.liste-01 h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.3em}
.liste-01 p{max-width:58ch;margin:0;color:var(--encre2)}
.liste-01 .lien{font-weight:800;text-decoration:none;border-bottom:2px solid var(--encre);padding-bottom:2px;white-space:nowrap;align-self:center}
.liste-01 .lien:hover{color:var(--bleu-f);border-color:var(--bleu-f)}
.section.jaune .liste-01 p,.section.jaune .chapo{color:var(--encre)}
@media(max-width:700px){.liste-01 li{grid-template-columns:64px 1fr}.liste-01 .lien{grid-column:2}}

/* --- pause : le grand anneau --- */
.pause-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,88px);align-items:center}
.grand-anneau{width:min(100%,380px);aspect-ratio:1;margin:0 auto;font-family:'Playfair Display',serif;font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.01em}
.grand-anneau .disque{border-width:8px}
.grand-anneau .compte{font-family:'Nunito Sans',sans-serif;font-size:.85rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-top:6px;color:var(--encre2)}
@media(max-width:860px){.pause-grid{grid-template-columns:1fr}}

/* --- horaires --- */
.horaires{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
@media(max-width:760px){.horaires{grid-template-columns:1fr}}
.horaires h3{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:.5em;display:flex;gap:12px;align-items:center}
.creneau{display:grid;grid-template-columns:128px 1fr;gap:6px 18px;padding:16px 0;border-top:1.5px solid var(--encre);font-size:1.05rem}
.creneau:last-of-type{border-bottom:1.5px solid var(--encre)}
.creneau b{font-family:'Playfair Display',serif;font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.creneau .tag{display:inline-block;background:var(--encre);color:var(--jaune);border-radius:6px;padding:2px 9px;font-size:.78rem;font-weight:800;margin-left:8px;vertical-align:2px;letter-spacing:.04em}
.note{font-size:.92rem;color:var(--encre2)}
.section.jaune .note{color:var(--encre)}

/* --- tarifs --- */
.formules{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
@media(max-width:860px){.formules{grid-template-columns:1fr}}
.carte{background:var(--blanc);border-radius:28px;padding:clamp(28px,4vw,44px);border:1.5px solid var(--filet);position:relative}
.carte.encre{background:var(--encre);color:var(--creme);border-color:var(--encre)}
.carte.encre p{color:#d9dfe6}
.carte.encre .prix,.carte.encre h3{color:var(--creme)}
.carte.encre .prix small{color:#c9d2dc}
.carte.encre .renvoi{border-color:#33445a;color:#c9d2dc}
.carte.jaune{background:var(--jaune);border-color:var(--jaune)}
.carte p:last-child{margin-bottom:0}
.carte h3{margin-top:.6em}
.prix{font-family:'Playfair Display',serif;font-size:clamp(2.6rem,5vw,4.2rem);font-weight:800;line-height:1;margin:10px 0 6px;letter-spacing:-.03em}
.prix small{font-family:'Nunito Sans',sans-serif;font-size:1rem;font-weight:700;color:var(--encre2);letter-spacing:0}
.prix sup{font-size:.45em;top:-.9em}
.puces li{position:relative;padding-left:32px;margin-bottom:12px}
.puces li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--jaune)}
.puces li::after{content:"";position:absolute;left:6px;top:8px;width:6px;height:3px;border:solid var(--encre);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.etiquette{display:inline-block;background:var(--jaune);color:var(--encre);border-radius:8px;padding:5px 13px;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.renvoi{font-size:.9rem;color:var(--encre2);border-top:1px solid var(--filet);padding-top:14px;margin-top:20px}

/* --- decouverte --- */
.decouverte{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(28px,5vw,64px);align-items:center}
.decouverte .anneau{width:clamp(110px,12vw,150px);aspect-ratio:1;font-size:.9rem;color:var(--creme)}
.decouverte .anneau .disque{border-color:var(--jaune)}
.decouverte h2{margin-bottom:.3em}
@media(max-width:860px){.decouverte{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* --- faq --- */
.faq details{border-top:1.5px solid var(--encre);padding:22px 0}
.faq details:last-child{border-bottom:1.5px solid var(--encre)}
.faq summary{cursor:pointer;font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Nunito Sans',sans-serif;font-size:1.8rem;line-height:1;color:var(--encre);flex:none;width:40px;height:40px;border:2px solid var(--encre);border-radius:50%;display:grid;place-items:center;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:14px 0 0;max-width:68ch;color:var(--encre2);font-size:1.05rem}

/* --- intro des pages interieures --- */
.intro{position:relative;background:var(--jaune);padding:clamp(56px,8vw,110px) 0 clamp(110px,14vw,190px);overflow:hidden}
.intro .wrap{position:relative}
.intro h1{max-width:14ch}
.intro .chapo{color:var(--encre);max-width:60ch}
.intro .halo{position:absolute;right:-8%;top:-30%;width:min(60vw,640px);aspect-ratio:1;border:2px solid var(--encre);border-radius:50%;opacity:.16;pointer-events:none}
.intro .halo.b{right:6%;top:10%;width:min(36vw,380px);opacity:.12}

/* --- prose --- */
.prose{max-width:70ch}
.prose h2{margin-top:1.6em;font-size:clamp(1.7rem,3vw,2.4rem)}
.prose h3{margin-top:1.4em}
.prose ul{list-style:disc;padding-left:22px;margin-bottom:1em}
.prose li{margin-bottom:.5em}

/* --- contact --- */
.coord{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.coord{grid-template-columns:1fr}}
.coord a{font-weight:800;overflow-wrap:anywhere}
.pied a{overflow-wrap:anywhere}
.ronds{display:flex;gap:12px;margin-top:8px}
.ronds a{width:48px;height:48px;border-radius:50%;background:var(--encre);color:var(--creme);display:grid;place-items:center;text-decoration:none;transition:transform .2s var(--ease)}
.ronds a:hover{background:var(--bleu-f);transform:translateY(-2px)}
.ronds svg{width:20px;height:20px}
.a-completer{background:#fff3d6;border:1px dashed var(--jaune2);border-radius:8px;padding:2px 8px;font-size:.85rem;font-weight:700}

/* --- apparition au defilement --- */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.vu{opacity:1;transform:none}

/* --- pied --- */
.pied{background:var(--encre);color:#c9d2dc;padding:clamp(56px,8vw,88px) 0 28px}
.pied .colonnes{display:grid;grid-template-columns:1.3fr .9fr .9fr .8fr .8fr .9fr;gap:28px;margin-bottom:48px}
@media(max-width:1180px){.pied .colonnes{grid-template-columns:repeat(3,1fr)}}
@media(max-width:960px){.pied .colonnes{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pied .colonnes{grid-template-columns:1fr}}
.pied .sur{color:var(--jaune)}
.pied a{color:#e9eef3;text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied li{margin-bottom:8px}
.pied .legal{border-top:1px solid #33445a;padding-top:20px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.pied .logo-pied{height:30px;width:auto;filter:brightness(0) invert(1) opacity(.92);margin-bottom:16px}

/* --- barre mobile collee en bas --- */
.barre-cta{display:none}
@media(max-width:860px){
  body{padding-bottom:84px}
  .barre-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:8;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
             background:rgba(247,244,237,.92);backdrop-filter:blur(10px);border-top:1px solid var(--filet);
             transform:translateY(110%);transition:transform .35s var(--ease)}
  .barre-cta.visible{transform:none}
  body.menu-ouvert .barre-cta{transform:translateY(110%)}
  .barre-cta .btn{display:block;width:100%;text-align:center;padding:15px 20px}
}

/* --- grain : un voile de bruit tres leger sur les aplats jaunes, comme le papier du flyer --- */
.grain{isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px}

/* --- prochaine seance --- */
.prochaine{display:inline-block;position:relative;margin-top:18px;padding:9px 16px 10px 36px;border-radius:18px;
  background:var(--creme);font-weight:600;font-size:.92rem;line-height:1.5;max-width:min(100%,44ch);text-wrap:pretty}
.prochaine::before{content:"";position:absolute;left:14px;top:1.05em;width:10px;height:10px;border-radius:50%;
  background:var(--encre);animation:souffle 10s ease-in-out infinite}
.prochaine b{font-weight:800}
.prochaine i,.prochaine-barre i{font-style:normal;font-weight:600;font-size:.85em;opacity:.68}
.prochaine span,.prochaine-barre span{opacity:.4;padding:0 1px}
.prochaine-barre{text-align:center;font-weight:600;font-size:.82rem;line-height:1.4;margin-bottom:8px;color:var(--encre2)}
.prochaine-barre b{font-weight:800;color:var(--encre)}
@media(max-width:600px){.prochaine{font-size:.86rem;padding:8px 14px 9px 32px}
  .prochaine::before{left:13px}}

/* --- cartes a glisser sur mobile --- */
@media(max-width:860px){
  .bande-photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:0 0 10px;margin:0 -28px;padding-left:28px;scrollbar-width:none}
  .bande-photos::-webkit-scrollbar{display:none}
  .bande-photos figure{flex:0 0 76%;scroll-snap-align:start}
  .bande-photos figure:last-child{margin-right:28px}
}

/* --- vagues qui derivent au defilement, survols --- */
@supports (animation-timeline: view()){
  .vague{width:108%;left:-4%;animation:derive linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes derive{from{transform:translateX(0)}to{transform:translateX(-3.5%)}}
}
.carte{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.carte:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(27,42,56,.45)}
.liste-01 li{transition:background .3s}
.liste-01 li:hover .num{color:var(--bleu-f)}
.liste-01 .num{transition:color .3s}
.mosaique img,.bande-photos img,.large{transition:transform .6s var(--ease)}
.mosaique img:hover,.bande-photos img:hover,.large:hover{transform:scale(1.025)}
nav a:not(.cta){position:relative;border-bottom:0}
nav a:not(.cta)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--encre);transition:right .3s var(--ease)}
nav a:not(.cta):hover::after,nav a[aria-current]::after{right:0}
@media(max-width:860px){nav a:not(.cta)::after{display:none}}

/* --- focus clavier visible --- */
:focus-visible{outline:3px solid var(--encre);outline-offset:3px;border-radius:4px}
.section.encre :focus-visible,.pied :focus-visible{outline-color:var(--jaune)}
@media(prefers-reduced-motion:reduce){.vague{animation:none!important}.prochaine::before{animation:none}}
/* l en-tete porte le meme grain que le hero tant qu il est jaune, et le perd en devenant creme */
.tete::before{transition:opacity .3s}
.tete.solide::before{opacity:0}
/* anneau de la page 404 : encre sur jaune, pas creme sur jaune */
.intro .anneau{color:var(--encre)}
.intro .anneau .disque{border-color:var(--encre)}

/* --- pages villes --- */
.ariane{display:flex;gap:10px;flex-wrap:wrap;font-size:.85rem;font-weight:700;margin-bottom:26px}
.ariane a{text-decoration:none;border-bottom:1.5px solid currentColor}
.ariane span[aria-current]{color:var(--encre2)}
.voisines{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.voisines a{display:inline-block;padding:10px 18px;border:2px solid var(--encre);border-radius:999px;font-weight:800;text-decoration:none;transition:background .2s,color .2s}
.voisines a:hover{background:var(--encre);color:var(--creme)}
.villes-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.villes-grille{grid-template-columns:1fr}}
.ville-carte{text-decoration:none;display:block}
.ville-carte h3{margin:.3em 0 .3em;font-size:1.7rem}
.ville-carte p{color:var(--encre2);margin:0}
.ville-carte .sur{margin-bottom:.4em}
.visio-bloc{grid-template-columns:.7fr 1.3fr}
.visio-bloc .grand-anneau{font-size:clamp(1.2rem,2.2vw,1.7rem)}
@media(max-width:860px){.visio-bloc{grid-template-columns:1fr}.visio-bloc .grand-anneau{order:2;width:min(100%,200px)!important}}

/* --- bandeau de consentement pour la mesure d'audience --- */
.bandeau-cookies{position:fixed;left:0;right:0;bottom:0;z-index:12;background:var(--encre);color:#e9eef3;
  padding:18px 0 calc(18px + env(safe-area-inset-bottom));box-shadow:0 -18px 40px -30px rgba(0,0,0,.7)}
.bandeau-cookies .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.bandeau-cookies p{margin:0;font-size:.92rem;line-height:1.5;max-width:66ch}
.bandeau-cookies .choix{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bandeau-cookies .btn{padding:12px 22px;font-size:.92rem;background:var(--jaune);color:var(--encre)}
.bandeau-cookies .btn:hover{background:var(--jaune2)}
.bandeau-cookies .btn.ligne{background:transparent;border-color:#93a3b4;color:#e9eef3}
.bandeau-cookies .btn.ligne:hover{background:#e9eef3;color:var(--encre)}
.bandeau-cookies a{font-size:.88rem;color:#c9d2dc}
.bandeau-cookies :focus-visible{outline-color:var(--jaune)}
body.cookies-ouvert .barre-cta{display:none}
@media(max-width:860px){
  .bandeau-cookies .wrap{flex-direction:column;align-items:stretch;gap:14px}
  .bandeau-cookies .choix{justify-content:space-between}
  .bandeau-cookies .btn{flex:1;text-align:center}
}

/* =======================================================================
   Micro-respirations. Tout suit le meme rythme que les seances : 4 secondes
   d'inspiration, 6 d'expiration, soit un cycle de 10 secondes. Tout se coupe
   pour qui demande moins de mouvement, en bas de ce bloc.
   ======================================================================= */

/* --- le fond de page respire : un voile blanc a peine perceptible --- */
@keyframes voile{0%{opacity:0}40%{opacity:.032}100%{opacity:0}}
body::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:#fff;opacity:0;animation:voile 10s ease-in-out infinite}

/* --- les petits ronds de section respirent aussi --- */
.sur::before{animation:souffle 10s ease-in-out infinite}

/* --- la vague se dessine, comme tracee a la main --- */
.trait-vague{stroke:var(--encre);stroke-width:3;opacity:.3;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1}
.vague.encre .trait-vague,.section.encre .trait-vague{stroke:var(--creme);opacity:.3}
@supports (animation-timeline: view()){
  .trait-vague{animation:tracer linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
  @keyframes tracer{to{stroke-dashoffset:0}}
}
@supports not (animation-timeline: view()){ .trait-vague{stroke-dashoffset:0} }

/* --- parallaxe doux sur les photos rondes : elles glissent moins vite que le texte --- */
@supports (animation-timeline: view()){
  @keyframes parallaxe{from{translate:0 -2.6%}to{translate:0 2.6%}}
  .cadre-photo .blob,.mosaique img,.large,.bande-photos img{
    animation:parallaxe linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}

/* --- transitions entre pages : un fondu au lieu d'un saut --- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:var(--ease)}

@media(prefers-reduced-motion:reduce){
  body::after,.sur::before{animation:none!important}
  body::after{display:none}
  .trait-vague{animation:none!important;stroke-dashoffset:0}
  .cadre-photo .blob,.mosaique img,.large,.bande-photos img{animation:none!important;translate:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}