@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=DM+Sans:wght@400;500;700&family=Fraunces:ital,opsz,wght@1,9..144,300..500&display=swap");
/* ===== ancien CSS (V4 2026-09-26) ===== */
:root{--odt-blue:#0B5D7A;--odt-deep:#06415A;--odt-yellow:#F4B41A;--odt-light:#F2F8FA;--odt-ink:#17324A}body{font-family:'Lato',Arial,sans-serif;background:#fff;color:var(--odt-ink);line-height:1.6}.container{width:100%;max-width:1200px;margin:0 auto;padding:0}h1,h2,h3{font-family:'Lato',Arial,sans-serif;color:var(--odt-deep);line-height:1.15;text-align:left}.odt-hero{display:flex;align-items:center;gap:48px;max-width:1100px;margin:0 auto;padding:72px 7%;background:linear-gradient(120deg,#F2F8FA,#fff)}.odt-hero-copy{flex:1}.odt-hero-mark{flex:0 0 300px;text-align:center;color:var(--odt-deep);font-weight:700;letter-spacing:2px}.odt-hero-mark img{max-width:100%;height:auto}.odt-kicker{text-transform:uppercase;letter-spacing:2px;font-size:.78rem;font-weight:700;color:var(--odt-blue);margin-bottom:12px}.odt-hero h1{font-size:clamp(2.2rem,5vw,4.5rem);margin:.2em 0}.odt-hero h1 span{color:var(--odt-yellow)}.odt-lead{font-size:1.25rem;color:var(--odt-deep);font-weight:600}.odt-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.odt-btn{display:inline-block;padding:13px 21px;background:var(--odt-yellow);color:#17324A!important;border-radius:4px;font-weight:700;text-decoration:none!important}.odt-btn-outline{background:transparent;border:2px solid var(--odt-blue);color:var(--odt-blue)!important}.odt-section{max-width:1100px;margin:0 auto;padding:60px 7%}.odt-section h2,.odt-join h2{font-size:2rem;margin:.2em 0 .8em}.odt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.odt-card{background:var(--odt-light);padding:24px;border-top:4px solid var(--odt-yellow)}.odt-card h3{margin:.5em 0}.odt-number{color:var(--odt-blue);font-size:1.5rem;font-weight:700}.odt-join{max-width:1100px;margin:0 auto 40px;padding:42px 7%;background:var(--odt-deep);color:#fff;display:flex;gap:40px;align-items:center}.odt-join h2,.odt-join .odt-kicker{color:#fff}.odt-join>div:first-child{flex:1}.odt-price{font-size:2.2rem;font-weight:700;color:#FFD35A}.odt-price span{font-size:1rem;color:#fff;font-weight:400}.odt-narrow{max-width:800px}.odt-section details{border-bottom:1px solid #DCE9EE;padding:15px 0}.odt-section summary{cursor:pointer;color:var(--odt-deep);font-weight:700}.odt-signature{font-weight:700;letter-spacing:2px;color:var(--odt-blue)}a[href*="prochaines-dates"]{font-weight:700}.iATEboguhSfikLwf9LWS7G7S>h2{display:none}@media(max-width:700px){.odt-hero,.odt-join{display:block;padding:42px 6%}.odt-hero-mark{margin-top:30px}.odt-grid{grid-template-columns:1fr}.odt-actions .odt-btn{width:100%;text-align:center}}
/* V4 2026-09-26 : socle graphique, ajout réversible */
:root{--odt-blue:#0D6193;--odt-deep:#01060B;--odt-yellow:#FAB306;--odt-light:#FDFDEF;--odt-ink:#01060B}
body{color:#01060B;background:#fff;font-family:Inter,Arial,sans-serif}
h1,h2,h3,h4{font-family:Manrope,Inter,Arial,sans-serif;color:#01060B}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #0D6193;outline-offset:3px}
.odt-btn{background:#FAB306;color:#01060B!important;border-radius:4px}
.odt-btn-outline{background:transparent;border-color:#0D6193;color:#0D6193!important}
.odt-hero{background:#FDFDEF}.odt-hero h1 span{color:#0D6193}.odt-card{background:#FDFDEF;border-top-color:#FAB306}.odt-join{background:#01060B}
.footer-classic{background:#01060B;color:#fff;padding:44px 20px}.footer-classic h3{color:#fff}.footer-classic .footer-logo img{max-width:90px;height:auto}
@media(max-width:700px){.odt-hero,.odt-join{padding:36px 6%}.odt-section{padding:42px 6%}.odt-hero h1{font-size:clamp(2.5rem,11vw,2.75rem)}}

/* V4 : accueil, photos et agenda */
.odt-hero-v4{max-width:1200px;gap:44px;padding:64px 5%;min-height:530px}.odt-hero-v4 .odt-hero-copy{flex:1 1 48%}.odt-hero-v4 h1{font-size:clamp(2.8rem,5.4vw,4.85rem);font-weight:800;line-height:1.05;max-width:640px}.odt-hero-v4 .odt-lead{font-size:1.18rem;font-weight:400;line-height:1.65;color:#31434B;max-width:600px}.odt-hero-photo{flex:1 1 48%;min-width:0}.odt-hero-photo img{display:block;width:100%;height:425px;object-fit:cover;border-radius:8px}
.odt-section{max-width:1200px}.odt-section h2{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.12}.odt-section>p{max-width:800px}.odt-proof{padding-top:38px;padding-bottom:38px}.odt-proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.odt-proof-grid>div{display:flex;flex-direction:column;border-left:3px solid #FAB306;padding-left:22px}.odt-proof-grid strong{font-size:2.5rem;line-height:1.1;color:#0D6193}.odt-proof-grid span{font-size:1rem}.odt-note{font-size:.8rem;color:#67757B;margin-top:18px}.odt-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}.odt-intro img{width:100%;height:350px;object-fit:cover;border-radius:8px}.odt-card{border-top:4px solid #FAB306;border-radius:4px;padding:30px}.odt-card h3{font-size:1.5rem}.odt-statement{background:#01060B;color:#fff;padding:72px max(7%,calc((100vw - 1050px)/2));font-size:clamp(1.8rem,3.3vw,3rem);line-height:1.2}.odt-statement p{margin:0}.odt-statement strong{color:#FAB306}.odt-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:32px 0}.odt-photo-grid img{width:100%;height:240px;object-fit:cover;border-radius:6px}.odt-event-callout{background:#FDFDEF;border-radius:8px}.odt-life{border-top:1px solid #DCE9EE}.odt-textlink{color:#0D6193;text-decoration:underline;text-underline-offset:3px;font-weight:700}.odt-join{max-width:1200px;padding:55px 6%;border-radius:8px}.odt-join h2{color:#fff}.odt-join .odt-btn{white-space:nowrap}.odt-price{color:#FAB306}.odt-price span{display:block}.odt-hero img,.odt-section img{max-width:100%}
@media(max-width:700px){.odt-hero-v4{min-height:0;padding:40px 6%}.odt-hero-v4 h1{font-size:clamp(2.5rem,11vw,2.85rem)}.odt-hero-photo{margin-top:30px}.odt-hero-photo img{height:250px}.odt-proof-grid{gap:14px}.odt-proof-grid strong{font-size:1.7rem}.odt-proof-grid span{font-size:.84rem}.odt-proof-grid>div{padding-left:9px}.odt-intro{display:block}.odt-intro img{height:240px;margin-top:20px}.odt-photo-grid{grid-template-columns:1fr 1fr}.odt-photo-grid img{height:150px}.odt-photo-grid img:first-child{grid-column:1/-1;height:210px}.odt-statement{padding:50px 6%}.odt-join .odt-btn{white-space:normal}}

/* V4 : taille du logo inchangé dans son dessin, en-tête compact */
.mod-header{min-height:0!important;padding:14px max(5%,calc((100vw - 1200px)/2))!important}.mod-header .mod-header-logo{max-width:92px!important;max-height:92px!important;width:auto!important;height:auto!important}.mod-header-part__left{padding:0!important}#O7CqftF2A8BXJgJpA7x9nsgI .content{padding:12px 5%!important;max-width:1200px;margin:auto}#O7CqftF2A8BXJgJpA7x9nsgI img{width:92px!important;height:auto!important;max-width:92px!important}.navbar.navbar-default{background:#fff!important;border:0!important;border-bottom:1px solid #DCE9EE!important;box-shadow:none!important}.navbar-default .navbar-nav>li>a{color:#01060B!important;font-weight:700!important;font-size:14px!important;padding:18px 15px!important}.navbar-default .navbar-nav>li.active>a,.navbar-default .navbar-nav>li>a:hover{background:#FDFDEF!important;color:#0D6193!important}.navbar-default .navbar-nav>li[data-menu-id="343901"]>a{background:#FAB306!important;color:#01060B!important;border-radius:4px}.navbar-default .navbar-nav>li[data-menu-id="436636"]>a{background:transparent!important;color:#0D6193!important}.navbar-default .navbar-nav>li>a:focus-visible{outline:3px solid #0D6193!important;outline-offset:-3px}
@media(max-width:700px){.mod-header{padding:10px 6%!important}.mod-header .mod-header-logo,#O7CqftF2A8BXJgJpA7x9nsgI img{max-width:72px!important;width:72px!important}.navbar-default .navbar-nav>li>a{padding:13px 20px!important}.navbar-default .navbar-toggle{border-color:#0D6193!important}.navbar-default .navbar-toggle .icon-bar{background-color:#0D6193!important}}

/* V4 : supprimer les titres de menu hérités sur les anciennes pages */
.zone-menu > h2 {display:none!important}

/* Contraste du menu actif */
.menu-type-page.active > a {color:#fff!important;}

.navbar-default .navbar-nav>li.menu-type-page.active[data-menu-id="436636"]>a{background:#0D6193!important;color:#fff!important}
/* Logo cohérent sur toutes les pages */
.zone-header .mod-header-logo{width:92px!important;max-width:92px!important;height:auto!important}

/* ===== nouvelle version du site (mise en ligne 27/10/2026), chargée dans le <head> ===== */
/* Socle « LUMIÈRE » — même technique que la direction Panorama (décor photographique qui défile,
   plaques posées, scènes épinglées) mais en plein jour : voile clair, texte bleu nuit, ombres bleutées douces.
   Priorité d'information : 1) le prochain rendez-vous, 2) rejoindre, 3) comprendre et découvrir.
   100 % CSS, sans JavaScript : compatible forfait Yapla Essentiel. */

:root{
  --ink:#0b2236; --ink-soft:#3d566c; --cream:#fbf7ee; --paper:#fffdf8; --gold:#f2a93b; --gold-deep:#b9740f; --gold-clair:#ffd08a; --sun:#FAB306;
  --blue:#0D6193; --blue-clair:#e3f1f8; --sky:#8fd0ea;
  --ombre:16,48,80; --lumiere:255,208,138;
  --plaque:rgba(255,253,247,.9); --verre:rgba(255,252,244,.72);
  --pose:inset 0 1px 0 rgba(255,255,255,.95), inset 1px 0 0 rgba(255,255,255,.6);
  --sol:0 2px 6px -2px rgba(var(--ombre),.18), 10px 24px 40px -22px rgba(var(--ombre),.4), 30px 60px 90px -46px rgba(var(--ombre),.35);
  --disp:'Bricolage Grotesque',system-ui,sans-serif; --sans:'DM Sans',system-ui,sans-serif; --serif:'Fraunces',Georgia,serif;
  --pad:clamp(20px,5vw,72px);
  --img-h:calc(1.3334 * max(100vw,75vh));
  color-scheme:light; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:rgba(242,169,59,.6) #fbf7ee;
}
*{box-sizing:border-box;margin:0}
.ot-site{background:var(--cream);overflow-x:clip}
html,.ot-site{color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.6}
.ot-site{overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}
.skip{position:fixed;z-index:80;left:8px;top:8px;padding:12px;background:var(--ink);color:#fff;transform:translateY(-160%)}
.skip:focus{transform:none}

/* ---------- décor lumineux ---------- */
.world{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#cfe7f3}
.world img{position:absolute;top:0;left:50%;width:max(100vw,75vh);max-width:none;height:auto;margin-left:calc(max(100vw,75vh)/-2);filter:saturate(1.12) brightness(1.08) contrast(1.02)}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,251,240,.9) 0,rgba(255,251,240,.68) 38%,rgba(255,251,240,.12) 74%,transparent)}
@media(max-width:860px){.veil{background:linear-gradient(180deg,rgba(255,251,240,.86),rgba(255,251,240,.74) 60%,rgba(255,251,240,.5))!important}}
.wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,247,238,.42),rgba(251,247,238,.62));opacity:.7}
.world::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@supports (animation-timeline:scroll()){
  .world img{animation:tilt linear both;animation-timeline:scroll(root);animation-range:0% 55%}
  @keyframes tilt{to{transform:translateY(calc(100vh - var(--img-h)))}}
  .veil{animation:veilout linear both;animation-timeline:scroll(root);animation-range:0% 22%}
  @keyframes veilout{to{opacity:.0}}
  .wash{opacity:.35;animation:washin linear both;animation-timeline:scroll(root);animation-range:6% 46%}
  @keyframes washin{to{opacity:1}}
}

/* ---------- barre ---------- */
.topbar{position:fixed;z-index:60;top:18px;left:50%;translate:-50% 0;width:min(1120px,100% - 28px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;
  padding:.6rem .7rem .6rem 1.1rem;border-radius:16px;background:rgba(255,253,247,.78);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--pose),0 16px 36px -20px rgba(var(--ombre),.45);border:1px solid rgba(255,255,255,.8)}
.brand{display:flex;align-items:center;gap:.7rem;font:700 .8rem/1 var(--disp);letter-spacing:.22em;color:var(--ink)}
.brand img{border-radius:50%}.brand i{font:italic 300 .95rem var(--serif);letter-spacing:0;text-transform:lowercase;color:var(--blue)}
.topbar nav{display:flex;justify-content:center;gap:2rem;font-size:.86rem;font-weight:600}
.topbar nav a{color:var(--ink-soft);transition:color .2s}.topbar nav a:hover{color:var(--blue)}
@media(max-width:860px){.topbar nav{display:none}.topbar{grid-template-columns:1fr auto}}

/* ---------- boutons, liens, titres ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:.95rem 1.5rem;border-radius:8px;font-weight:700;font-size:.95rem;transition:transform .25s,box-shadow .25s,filter .25s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,#ffc65c,#f2a93b);color:var(--ink);box-shadow:var(--pose),0 14px 30px -12px rgba(242,169,59,.9)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 14px 28px -14px rgba(11,34,54,.7)}
.btn-ink:hover{background:var(--blue)}
.btn-line{border:2px solid var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}
.topbar .btn{padding:.65rem 1.1rem;font-size:.84rem}
.link{font-weight:700;font-size:.92rem;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:.1rem;transition:color .2s}
.link:hover{color:var(--blue)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:2rem}
.eyebrow{display:flex;align-items:center;gap:1rem;font:700 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.3rem}
.eyebrow span{width:48px;height:2px;background:var(--gold);flex:none}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance;color:var(--ink)}
em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em;color:var(--blue)}
@keyframes enter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ping{70%{box-shadow:0 0 0 14px rgba(242,169,59,0)}100%{box-shadow:0 0 0 0 rgba(242,169,59,0)}}
.live{display:inline-flex;align-items:center;gap:.6rem;font:700 .74rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.live::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(242,169,59,.7);animation:ping 2.2s infinite}

/* ---------- plaques ---------- */
.plaque{border-radius:16px;box-shadow:var(--pose),var(--sol);border:1px solid rgba(255,255,255,.8)}
.plaque.claire{background:var(--plaque)}
.plaque.verre{background:var(--verre);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.plaque p{color:var(--ink-soft)}

/* ---------- médaillon de date ---------- */
.date{display:grid;place-items:center;text-align:center;width:clamp(120px,15vw,190px);aspect-ratio:1;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#ffe3a0,#f7b43f 70%,#e29a22);color:var(--ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 20px 40px -16px rgba(185,116,15,.7)}
.date span{font:700 .85rem var(--sans);letter-spacing:.22em;margin-bottom:-.7rem}
.date b{font:700 clamp(3.2rem,6.5vw,5.4rem)/1 var(--disp);letter-spacing:-.05em}
.date small{font:700 .76rem var(--sans);margin-top:-.7rem}

/* ---------- tirages ---------- */
.tirage{margin:0;padding:10px 10px 0;background:#fff;color:var(--ink);box-shadow:var(--pose),var(--sol);rotate:var(--r);transition:rotate .5s cubic-bezier(.2,.7,.2,1),translate .5s cubic-bezier(.2,.7,.2,1)}
.tirage img{width:100%;aspect-ratio:var(--ar,3/4);object-fit:cover}
.tirage figcaption{padding:.7rem .2rem .85rem;font:italic 400 .98rem var(--serif);color:#4a4132}
.tirage:hover{rotate:0deg;translate:0 -10px}

/* ---------- adhésion ---------- */
.adherer{padding:clamp(60px,9vw,130px) var(--pad);max-width:1300px;margin-inline:auto;display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:center}
.adh-txt{padding:clamp(1.6rem,3vw,2.6rem)}
.adh-txt h2{font-size:clamp(2.1rem,4.4vw,4rem)}
.adh-txt p:not(.eyebrow){margin-top:1.2rem;max-width:52ch;font-size:1.05rem}
.adh-txt .fine{font-size:.88rem!important;color:#6a8094!important}
.prix{padding:2.4rem 2.2rem;display:grid;justify-items:start;gap:.2rem;background:linear-gradient(160deg,#fffaf0,#fff3d8)!important;border-color:rgba(242,169,59,.5)!important}
.prix img{border-radius:50%;margin-bottom:1rem}
.prix .eyebrow{margin-bottom:.4rem}
.montant{font:700 clamp(5rem,10vw,8rem)/.85 var(--disp);letter-spacing:-.06em;color:var(--ink)}
.montant small{font-size:.38em;letter-spacing:0;margin-left:.1em;vertical-align:top}
.duree{font-weight:700;color:var(--gold-deep);margin-bottom:1.4rem}
@media(max-width:860px){.adherer{grid-template-columns:1fr}}

.about{max-width:880px;margin:0 auto clamp(90px,12vw,160px);text-align:center;padding:clamp(1.8rem,4vw,3rem)}
.about h2{font-size:clamp(2rem,4.2vw,3.6rem)}
.about p{margin-top:1.3rem;font-size:1.08rem}
.about .link{display:inline-block;margin-top:1.6rem}

/* ---------- pied ---------- */
.foot{border-top:3px solid var(--gold);background:rgba(255,253,247,.94);backdrop-filter:blur(10px);padding:2.4rem var(--pad)}
.foot-in{max-width:1240px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:center}
.foot-brand{display:flex;align-items:center;gap:1rem}.foot-brand img{border-radius:50%}
.foot-brand strong{display:block;font:700 .85rem var(--disp);letter-spacing:.22em}.foot-brand i{font:italic 300 1rem var(--serif);letter-spacing:0;text-transform:lowercase;color:var(--blue)}
.foot-brand span{font-size:.82rem;color:var(--ink-soft)}
.foot nav{display:flex;flex-wrap:wrap;gap:1.4rem;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.foot nav a:hover{color:var(--blue)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Maquette I · HEURE DORÉE — lumière chaude, le prochain rendez-vous prend la forme d'un « billet » très lisible,
   puis un récit en chapitres (la photo posée à gauche change pendant que le texte défile). CSS pur. */

/* décor généré « Atlantique » (2304 × 2396) : ciel dégagé, vagues, sable mouillé, dune et passerelle — net et lumineux.
   La hauteur de l'image est 1,04 × sa largeur : on adapte le calcul de la caméra.
   Ancrée à droite pour que le soleil reste visible sur téléphone. */
:root{--cream:#fff8e8;--img-h:calc(1.0399 * max(100vw,96.2vh))}
.world img{width:max(100vw,96.2vh);left:auto;right:0;margin-left:0;filter:saturate(1.02) brightness(1.02)}
/* voile plus léger : on veut voir la mer et la plage ; les plaques claires portent la lisibilité */
.veil{background:linear-gradient(90deg,rgba(255,252,244,.42) 0,rgba(255,252,244,.18) 38%,transparent 62%)}
.wash{background:linear-gradient(180deg,transparent,rgba(255,250,238,.14))}
@media(max-width:860px){.veil{background:linear-gradient(180deg,rgba(255,252,244,.5),rgba(255,252,244,.28) 55%,rgba(255,252,244,.1))!important}}
.hero-txt{text-shadow:0 0 28px rgba(255,255,255,.75),0 0 8px rgba(255,255,255,.5)}
.hero-txt .eyebrow,.hero-txt .lead{color:#0b2236}

/* ---------- 1 · ouverture ---------- */
.hero{position:relative;min-height:max(100svh,760px);padding:130px var(--pad) 60px;max-width:1300px;margin-inline:auto;display:grid;align-content:center;gap:2.4rem}
.hero-txt{max-width:900px;animation:enter 1.1s .1s both cubic-bezier(.2,.7,.2,1)}
.hero h1{font-size:clamp(2.6rem,6vw,5.4rem)}
.lead{max-width:56ch;margin-top:1.2rem;font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink-soft);font-weight:500}

/* le billet */
.billet{--stub:clamp(150px,17vw,220px);--stub-d:clamp(190px,19vw,260px);position:relative;display:grid;grid-template-columns:var(--stub) 1fr var(--stub-d);min-height:200px;background:linear-gradient(180deg,#fffdf6,#fff6df);
  border-radius:22px;box-shadow:var(--sol);border:2px solid rgba(242,169,59,.7);animation:enter 1.1s .35s both cubic-bezier(.2,.7,.2,1);
  -webkit-mask:radial-gradient(circle 16px at var(--stub) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at var(--stub) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 16px at var(--stub) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 16px at var(--stub) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.billet::before{content:"";position:absolute;inset:-30px;z-index:-1;background:radial-gradient(60% 70% at 50% 50%,rgba(255,200,100,.5),transparent 72%);filter:blur(10px)}
.souche{display:grid;place-content:center;text-align:center;padding:1.2rem;background:linear-gradient(160deg,#ffd27a,#f2a93b);color:var(--ink);border-radius:20px 0 0 20px}
.souche .jour,.souche .mois{font:700 .8rem var(--sans);letter-spacing:.22em;text-transform:uppercase}
.souche b{font:700 clamp(4.4rem,9vw,7.6rem)/.9 var(--disp);letter-spacing:-.06em;margin:.1rem 0}
.corps{padding:clamp(1.2rem,2.4vw,2rem) clamp(1.2rem,3vw,2.6rem);display:grid;align-content:center;gap:.9rem;border-left:2px dashed rgba(11,34,54,.25)}
.corps h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.meta{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-weight:700;color:var(--ink)}
.meta li{display:flex;align-items:center;gap:.5rem}
.meta svg{width:22px;height:22px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.souche.droite{border-radius:0 20px 20px 0;border-left:2px dashed rgba(11,34,54,.25);background:var(--blue-clair);gap:1rem;align-content:center;justify-items:center}
.btn.gros{padding:1.15rem 1.5rem;font-size:1.05rem}
@media(max-width:900px){
  .billet{grid-template-columns:1fr;-webkit-mask:none;mask:none}
  .souche{border-radius:20px 20px 0 0;grid-auto-flow:column;gap:.8rem;justify-content:center;align-items:baseline}
  .souche b{font-size:4.4rem}.corps{border-left:0;border-top:2px dashed rgba(11,34,54,.25)}
  .souche.droite{border-radius:0 0 20px 20px;border-left:0;border-top:2px dashed rgba(11,34,54,.25);grid-auto-flow:row}
}
.chiffres{display:flex;flex-wrap:wrap;gap:0}
.chiffres>div{padding:0 clamp(1rem,2.4vw,2rem);border-left:1px solid rgba(11,34,54,.18)}
.chiffres>div:first-child{border-left:0;padding-left:0}
.chiffres dt{font:700 clamp(1.5rem,2.8vw,2.3rem)/1 var(--disp);letter-spacing:-.04em;color:var(--blue)}
.chiffres dd{font:700 .64rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- 2 · chapitres ---------- */
.chapitres{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,5vw,5rem);padding:0 var(--pad);max-width:1400px;margin-inline:auto;timeline-scope:--c1,--c2,--c3,--c4}
.stage{position:sticky;top:0;height:100svh;display:grid;place-items:center}
.frame{position:relative;width:min(100%,440px);aspect-ratio:3/4;max-height:76vh;background:#fff;padding:12px;rotate:-2deg;box-shadow:var(--pose),var(--sol)}
.frame img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:cover;opacity:0}
.frame .i1{opacity:1}
.ch{min-height:100svh;display:grid;align-content:center;padding:clamp(40px,8vh,90px) 0}
.ch .plaque{padding:clamp(1.6rem,3.4vw,2.8rem)}
.c1{view-timeline:--c1 block}.c2{view-timeline:--c2 block}.c3{view-timeline:--c3 block}.c4{view-timeline:--c4 block}
.ch h2{font-size:clamp(2.1rem,4vw,3.6rem)}
.ch h3{font-size:clamp(1.8rem,3vw,2.4rem);margin:.4rem 0 .5rem}
.ch p:not(.eyebrow){margin-top:1rem;font-size:1.05rem}
.num{display:block;font:300 clamp(3.4rem,6vw,5rem)/.9 var(--disp);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.6px var(--gold);margin-top:1.8rem}
.c2 .num,.c3 .num{margin-top:0}
.citation{font:italic 300 1.35rem/1.35 var(--serif)!important;color:var(--ink)!important;padding-left:1rem;border-left:3px solid var(--gold);margin-top:1.6rem!important}
.citation strong{font-weight:400;color:var(--blue)}
.formats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.formats li{padding:.4rem .9rem;border-radius:999px;border:1.5px solid rgba(11,34,54,.2);font-size:.86rem;font-weight:700;color:var(--ink-soft)}
.ch .link{display:inline-block;margin-top:1.6rem}
.ch-img{display:none}
@supports (animation-timeline:view()){
  @media(min-width:901px){
    .i1{animation:out linear both;animation-timeline:--c1;animation-range:cover 60% cover 85%}
    .i2{animation:mid linear both;animation-timeline:--c2;animation-range:cover 10% cover 85%}
    .i3{animation:inn linear both;animation-timeline:--c3;animation-range:cover 10% cover 35%}
    @keyframes out{from{opacity:1}to{opacity:0}}
    @keyframes inn{from{opacity:0}to{opacity:1}}
    @keyframes mid{0%{opacity:0}33%{opacity:1}67%{opacity:1}100%{opacity:0}}
    .ch .plaque{animation:pose linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes pose{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
  }
}
@media(max-width:900px){
  .chapitres{grid-template-columns:1fr}.stage{display:none}
  .ch{min-height:0;gap:1.2rem;padding:2rem 0}
  .ch-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:8px solid #fff;box-shadow:var(--pose),var(--sol);rotate:-1.4deg}
}

/* ---------- rappel ---------- */
.rappel{padding:20px var(--pad)}
.rappel-in{max-width:1000px;margin-inline:auto;display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;padding:1.3rem 1.6rem;border:2px solid rgba(242,169,59,.65)}
.rappel-txt{display:grid;gap:.1rem}
.rappel-txt b{font:700 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--disp);letter-spacing:-.03em}
.rappel-txt span:last-child{color:var(--ink-soft);font-weight:500}

/* =====================================================================
   VERSION TÉLÉPHONE (≤ 700 px) — pensée pour le pouce, pas réduite du bureau :
   1) l'événement et son bouton tiennent dans le premier écran ;
   2) un vrai menu (sans JavaScript) ;
   3) un rappel d'inscription fixe en bas, une fois l'ouverture passée ;
   4) le décor voyage encore (image plus haute que l'écran, ancrée à droite : soleil visible) ;
   5) blocs resserrés, texte plus gros là où il compte, cibles tactiles ≥ 44 px.
   ===================================================================== */
.menu,.dock{display:none}

@media(max-width:700px){
  :root{--pad:16px;--img-h:calc(1.508 * 100vh)}
  .world img{width:calc(1.45 * 100vh)}

  /* barre : logo + menu (le bouton RDV est déjà dans l'ouverture et dans le rappel fixe) */
  .topbar{top:10px;width:calc(100% - 20px);grid-template-columns:1fr auto;padding:.45rem .5rem .45rem .85rem}
  .topbar>.btn{display:none}
  .menu{display:block}
  .menu summary{list-style:none;cursor:pointer;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(11,34,54,.07);-webkit-tap-highlight-color:transparent}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary span,.menu summary span::before,.menu summary span::after{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,background .25s}
  .menu summary span{position:relative}
  .menu summary span::before,.menu summary span::after{content:"";position:absolute;left:0}
  .menu summary span::before{top:-6px}.menu summary span::after{top:6px}
  .menu[open] summary span{background:transparent}
  .menu[open] summary span::before{top:0;transform:rotate(45deg)}
  .menu[open] summary span::after{top:0;transform:rotate(-45deg)}
  .topbar .menu-panel{display:grid;justify-content:stretch;font-size:1rem;position:absolute;left:0;right:0;top:calc(100% + 8px);display:grid;gap:.15rem;padding:.7rem;border-radius:18px;background:#fffdf7;box-shadow:var(--sol);border:1px solid rgba(255,255,255,.9)}
  .topbar .menu-panel a:not(.btn){padding:.95rem 1rem;border-radius:12px;font-weight:700;font-size:1.05rem;color:var(--ink)}
  .topbar .menu-panel a:not(.btn):active{background:var(--blue-clair)}
  .topbar .menu-panel .btn{margin-top:.5rem;padding:1rem;font-size:1rem;min-height:54px}

  /* ouverture : titre → billet → texte → chiffres */
  .hero{min-height:0;display:flex;flex-direction:column;gap:1rem;padding:88px var(--pad) 30px;max-width:none}
  .hero-txt{display:contents}
  .hero-txt .eyebrow{order:1;margin:0;font-size:.62rem;letter-spacing:.15em}
  .hero-txt .eyebrow span{display:none}
  .hero h1{order:2;font-size:clamp(2.35rem,11.4vw,3rem);line-height:.96}
  .billet{order:3;min-height:0}
  .hero-txt .lead{order:4;margin:0;font-size:1.02rem;line-height:1.5}
  .chiffres{order:5;display:grid;grid-template-columns:repeat(3,1fr);margin-top:.4rem;padding:.9rem .3rem;border-radius:16px;background:rgba(255,252,244,.82);backdrop-filter:blur(8px);text-align:center}
  .chiffres>div{padding:0 .3rem}
  .chiffres>div:first-child{padding-left:.3rem}
  .chiffres dt{font-size:1.55rem}

  /* billet compact : date en bandeau, détails, bouton pleine largeur */
  .souche{padding:.55rem .8rem;gap:.7rem}
  .souche b{font-size:3.3rem;margin:0}
  .souche .jour,.souche .mois{font-size:.68rem;letter-spacing:.18em}
  .corps{padding:1rem 1.1rem;gap:.7rem}
  .corps h2{font-size:clamp(1.9rem,9.2vw,2.3rem)}
  .meta{flex-direction:column;gap:.5rem;font-size:.98rem}
  .souche.droite{padding:.9rem 1.1rem 1rem;gap:.7rem}
  .souche.droite .btn{width:100%;padding:1.05rem;font-size:1.08rem;min-height:54px}
  .souche.droite .link{font-size:.9rem}

  /* chapitres : photo d'abord, texte ensuite, blocs resserrés */
  .chapitres{padding:0 var(--pad)}
  .ch{display:flex;flex-direction:column;gap:1.1rem;padding:1.1rem 0}
  .ch-img{order:1;aspect-ratio:4/3;border-width:6px;rotate:-1deg;margin-inline:.2rem}
  .ch:nth-child(even) .ch-img{rotate:1.2deg}
  .ch .plaque{order:2;padding:1.3rem 1.2rem}
  .plaque.claire{background:rgba(255,253,247,.95)}
  .plaque.verre{background:rgba(255,252,244,.92)}
  .ch h2{font-size:clamp(1.9rem,9vw,2.3rem)}
  .ch h3{font-size:1.7rem}
  .ch p:not(.eyebrow){font-size:1rem;margin-top:.8rem}
  .num{font-size:3rem;margin-top:1.2rem}
  .formats{gap:.4rem;margin-top:1.1rem}
  .formats li{padding:.5rem .85rem;font-size:.84rem}
  .ch .link{min-height:44px;display:inline-flex;align-items:center;margin-top:1rem}

  /* le rappel plein écran devient inutile : le rappel fixe le remplace */
  .rappel{display:none}

  /* adhésion : le prix et le bouton d'abord */
  .adherer{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:2.2rem var(--pad) 1rem}
  .prix{order:-1;padding:1.4rem 1.3rem}
  .prix img{width:44px;height:44px;margin-bottom:.5rem}
  .montant{font-size:4.6rem}
  .prix .btn{width:100%;min-height:54px}
  .adh-txt{padding:1.3rem 1.2rem}
  .adh-txt h2{font-size:clamp(1.9rem,9vw,2.3rem)}
  .adh-txt p:not(.eyebrow){font-size:1rem}

  .about{margin:1rem var(--pad) 2rem;padding:1.4rem 1.2rem;text-align:left}
  .about h2{font-size:clamp(1.8rem,8.4vw,2.2rem)}
  .about p{font-size:1rem}

  .foot{padding:1.8rem var(--pad) 104px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .foot nav{gap:.4rem 1.2rem}
  .foot nav a{min-height:40px;display:inline-flex;align-items:center}

  /* rappel fixe d'inscription */
  .dock{display:flex;position:fixed;z-index:55;left:10px;right:10px;bottom:10px;align-items:center;gap:.75rem;padding:.55rem .6rem .55rem .65rem;border-radius:18px;
    background:rgba(255,253,247,.97);backdrop-filter:blur(12px);border:2px solid rgba(242,169,59,.75);box-shadow:var(--sol);opacity:0;pointer-events:none;translate:0 26px}
  .dock .d{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-content:center;text-align:center;line-height:1;background:radial-gradient(circle at 35% 30%,#ffe3a0,#f2a93b);color:var(--ink)}
  .dock .d b{font:800 1.35rem var(--disp);letter-spacing:-.04em}
  .dock .d span{font:700 .52rem var(--sans);letter-spacing:.12em;text-transform:uppercase}
  .dock .t{display:grid;flex:1;min-width:0;line-height:1.2}
  .dock .t strong{font:700 1rem var(--disp);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock .t span{font-size:.8rem;color:var(--ink-soft)}
  .dock .btn{flex:none;min-height:48px;padding:.7rem 1.1rem;font-size:.95rem}
  @supports (animation-timeline:scroll()){
    .dock{animation:dockin linear both;animation-timeline:scroll(root);animation-range:540px 760px}
    @keyframes dockin{to{opacity:1;pointer-events:auto;translate:0 0}}
  }
  @supports not (animation-timeline:scroll()){.dock{opacity:1;pointer-events:auto;translate:none}}
}

/* tablette portrait : les chiffres reçoivent une plaque pour rester lisibles sur le décor */
@media(min-width:701px) and (max-width:900px){
  .chiffres{padding:.9rem 1.2rem;border-radius:16px;background:rgba(255,252,244,.84);backdrop-filter:blur(8px);width:fit-content}
}

/* =====================================================================
   TÉLÉPHONE — blocs plus compacts (retour : « les blocs sont trop gros »)
   ===================================================================== */
@media(max-width:700px){
  :root{--pad:14px}
  .plaque{border-radius:14px}

  /* ouverture */
  .hero{padding:78px var(--pad) 18px;gap:.75rem}
  .hero h1{font-size:clamp(2rem,9.6vw,2.5rem)}
  .hero-txt .lead{font-size:.95rem;line-height:1.45}

  /* billet : une seule bande de date fine, détails sur 2 colonnes, bouton plus bas */
  .billet{border-radius:16px}
  .souche{padding:.4rem .7rem;gap:.5rem;border-radius:14px 14px 0 0}
  .souche b{font-size:2.3rem}
  .souche .jour,.souche .mois{font-size:.6rem}
  .corps{padding:.75rem .9rem;gap:.5rem}
  .corps h2{font-size:1.65rem}
  .meta{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.35rem 1.1rem;font-size:.86rem}
  .meta li:last-child{grid-column:1/-1}
  .meta svg{width:18px;height:18px}
  .souche.droite{padding:.65rem .9rem .75rem;gap:.45rem;border-radius:0 0 14px 14px}
  .souche.droite .btn{min-height:48px;padding:.8rem;font-size:1rem}
  .souche.droite .link{font-size:.82rem}
  .chiffres{padding:.6rem .2rem;border-radius:12px}
  .chiffres dt{font-size:1.25rem}
  .chiffres dd{font-size:.54rem;letter-spacing:.1em}

  /* chapitres : photo plus petite, plaque plus serrée */
  .ch{gap:.7rem;padding:.6rem 0}
  .ch-img{aspect-ratio:16/10;width:88%;margin-inline:auto;border-width:5px}
  .ch .plaque{padding:1rem 1rem 1.1rem}
  .ch .eyebrow{margin-bottom:.8rem;font-size:.6rem}
  .ch h2{font-size:1.55rem}
  .ch h3{font-size:1.35rem;margin:.2rem 0 .3rem}
  .ch p:not(.eyebrow){font-size:.92rem;line-height:1.5;margin-top:.55rem}
  .num{font-size:2.2rem;margin-top:.8rem}
  .citation{font-size:1.05rem!important;margin-top:.9rem!important}
  .formats{margin-top:.8rem}
  .formats li{padding:.35rem .7rem;font-size:.76rem}
  .ch .link{margin-top:.6rem;font-size:.86rem}

  /* adhésion : prix en ligne (montant à gauche, bouton à droite) */
  .adherer{padding:1.2rem var(--pad) .4rem;gap:.7rem}
  .prix{padding:.9rem 1rem;grid-template-columns:auto 1fr;align-items:center;column-gap:.9rem;row-gap:0;justify-items:start}
  .prix img,.prix .eyebrow{display:none}
  .montant{font-size:3.2rem;grid-row:1/3}
  .duree{font-size:.85rem;margin:0}
  .prix .btn{grid-column:1/-1;margin-top:.6rem;min-height:46px;font-size:.95rem}
  .adh-txt{padding:1rem}
  .adh-txt h2{font-size:1.55rem}
  .adh-txt p:not(.eyebrow){font-size:.92rem;margin-top:.7rem}
  .adh-txt .fine{font-size:.78rem!important}

  .about{margin:.6rem var(--pad) 1.2rem;padding:1rem}
  .about h2{font-size:1.5rem}
  .about p{font-size:.92rem;margin-top:.7rem}

  .foot{padding:1.4rem var(--pad) 92px}

  /* rappel fixe : plus fin */
  .dock{left:8px;right:8px;bottom:8px;padding:.4rem .5rem .4rem .5rem;border-radius:14px;gap:.6rem;border-width:1.5px}
  .dock .d{width:40px;height:40px}.dock .d b{font-size:1.1rem}.dock .d span{font-size:.46rem}
  .dock .t strong{font-size:.9rem}.dock .t span{font-size:.72rem}
  .dock .btn{min-height:42px;padding:.5rem .9rem;font-size:.88rem}
}

/* Pages de la maquette I — version 8 « Fenêtres & papier ».
   Réécriture complète (les versions 1 à 7 sont archivées dans _archives/).

   Deux surfaces seulement, jamais de flou derrière le texte :
   - la FENÊTRE : le décor fixe apparaît. On n'y pose que très peu de texte (un titre, une ligne),
     ou des objets opaques (billet, carte de tarif, photos, bandeau). Quand un texte s'y trouve,
     il est bleu nuit sur l'image claire, aidé seulement d'un voile clair latéral (dégradé horizontal, jamais de flaque ronde).
   - le PAPIER : bande opaque pleine largeur, sans cadre, sans ombre, sans coins arrondis.
     Tout le texte dense y vit, en grille éditoriale (phrases courtes, colonnes asymétriques).
   Chaque page alterne fenêtre / papier dans un ordre et avec des compositions différents. */

/* ---------- décor propre à chaque page (image verticale, la caméra descend en défilant) ---------- */
.ot-site:not(.p-accueil){--img-h:calc(var(--ratio) * max(100vw, calc(130vh / var(--ratio))))}
.ot-site:not(.p-accueil) .world img{width:max(100vw,calc(130vh / var(--ratio)));left:50%;right:auto;margin-left:calc(max(100vw,calc(130vh / var(--ratio))) / -2);filter:saturate(1.04) brightness(1.01)}
/* Écriture sur l'image : texte bleu nuit sur l'image claire. Le seul « aide à la lecture » est un voile clair LATÉRAL
   (dégradé horizontal sur toute la hauteur de la fenêtre, comme l'ouverture de la maquette I) — jamais de flaque ronde, jamais de flou. */
:root{--voile:255,252,244}
.veil{background:linear-gradient(90deg,rgba(var(--voile),.6),rgba(var(--voile),.3) 40%,rgba(var(--voile),.06) 68%,transparent)}
.p-membre .veil{background:linear-gradient(270deg,rgba(var(--voile),.6),rgba(var(--voile),.3) 40%,rgba(var(--voile),.06) 68%,transparent)}
.ot-site:not(.p-accueil) .veil{display:block!important}
/* voile UNIFORME sur tout le décor (aucun bord) : 17 % dans l'ouverture, 50 % ensuite (animation washin du socle) */
.wash{background:rgba(var(--voile),.5)}
@media(max-width:860px){
  .veil{background:linear-gradient(180deg,rgba(var(--voile),.62),rgba(var(--voile),.36) 42%,rgba(var(--voile),.06) 70%,transparent)!important}
}
.fenetre .lead,.fenetre .sous,.fenetre p{font-weight:600;color:var(--ink)}
.fenetre .crumbs a{color:var(--blue)}
@supports (animation-timeline:scroll()){
  .ot-site:not(.p-accueil) .world img{animation:tilt linear both;animation-timeline:scroll(root);animation-range:0% 90%}
}

/* ---------- grille et surfaces ---------- */
.pg{max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.fenetre{position:relative;isolation:isolate}
.papier{position:relative;background:var(--paper);color:var(--ink)}
.papier>.pg{padding-block:clamp(3rem,7vw,6.2rem)}
.papier+.papier>.pg{padding-top:0}
.papier p{color:var(--ink-soft);font-weight:500}
.papier p b,.papier p strong{color:var(--ink)}

/* ---------- fenêtre d'ouverture : titre dans le ciel, puis le décor se découvre ---------- */
.hero-f>.pg{min-height:max(74vh,600px);padding-top:150px;padding-bottom:clamp(2rem,6vw,4rem);display:grid;align-content:start}
.hero-f h1{font-size:clamp(2.7rem,6.8vw,6rem);line-height:.94;max-width:15ch}
.hero-f .lead{margin:1.3rem 0 0;max-width:40ch;font-size:clamp(1.05rem,1.45vw,1.28rem);font-weight:500;line-height:1.45}
.crumbs{display:flex;gap:.5rem;align-items:center;font:700 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:0 0 1.1rem}
.crumbs a:hover{text-decoration:underline}
.hero-f.droite>.pg{justify-items:end;text-align:right}
.hero-f.droite .crumbs{justify-content:flex-end}
/* ouverture à deux colonnes (Adhérer) : titre à gauche, objet opaque à droite */
.hero-f.duo>.pg{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.hero-f.duo .carte{animation:enter 1.1s .3s both cubic-bezier(.2,.7,.2,1)}
/* ouverture courte : le titre, puis tout de suite un objet (Agenda) */
.hero-f.courte>.pg{min-height:0}

/* ---------- fenêtre « énoncé » : une phrase forte, l'image assombrie du côté du texte ---------- */
.enonce>.pg{min-height:max(54vh,440px);display:grid;align-content:center;justify-items:start}
.enonce>.pg>*{max-width:640px}
.enonce.droite>.pg{justify-items:end;text-align:right}
.enonce.centre>.pg{justify-items:center;text-align:center}
.enonce .eyebrow{margin-bottom:1rem}
.enonce.droite .eyebrow{flex-direction:row-reverse}
.enonce.centre .eyebrow{justify-content:center}
.enonce blockquote{font:700 clamp(2.2rem,5.2vw,4.8rem)/1 var(--disp);letter-spacing:-.04em;color:var(--ink);text-wrap:balance;margin:0}
.enonce blockquote em{font-size:.96em}
.enonce .sous{margin:1.1rem 0 0;font-size:clamp(1rem,1.3vw,1.15rem);font-weight:500;max-width:36ch;line-height:1.45}
.enonce .actions{margin-top:1.5rem}
.enonce .link{margin-top:1.3rem;display:inline-block}

/* ---------- fenêtre « objets » : seulement des objets opaques ---------- */
.objets>.pg{padding-block:clamp(2rem,5vw,4rem);display:grid;gap:clamp(1.5rem,4vw,3rem);justify-items:start}
.objets.centre>.pg{justify-items:center}

/* ---------- papier : grille éditoriale ---------- */
.edito{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.4rem,5vw,5rem);align-items:start}
.edito>.col-titre .eyebrow{margin-bottom:1rem}
.edito h2{font-size:clamp(2rem,4vw,3.4rem);max-width:16ch}
.edito .col-texte{padding-top:.35rem}
.edito .col-texte p{font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:46ch;line-height:1.6}
.edito .col-texte p+p{margin-top:.9rem}
.edito .col-texte .actions{margin-top:1.4rem}
.edito .col-texte .link{display:inline-block;margin-top:1.2rem}
.edito.inverse>.col-titre{order:2}
.edito.inverse>.col-texte{order:1}
.papier .bloc+.bloc{margin-top:clamp(2.5rem,6vw,4.5rem);padding-top:clamp(2.2rem,5vw,3.5rem);border-top:1px solid rgba(11,34,54,.14)}

/* mots géants (valeurs) */
.mots{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.1rem;font:700 clamp(2rem,5.2vw,4.4rem)/1.05 var(--disp);letter-spacing:-.045em;margin:.2rem 0 1rem;color:var(--ink)}
.mots i{font-style:normal;color:var(--gold);font-weight:400}
.mots span:nth-child(3),.mots span:nth-child(7){font-family:var(--serif);font-style:italic;font-weight:300;color:var(--blue)}
.mots+p{max-width:52ch;font-size:1.05rem}

/* chronologie horizontale */
.ligne{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.6rem);margin:1.2rem 0 0;position:relative}
.ligne::before{content:"";position:absolute;left:0;right:0;top:1.35rem;height:2px;background:linear-gradient(90deg,var(--gold),rgba(242,169,59,.2))}
.ligne li{position:relative;padding-top:3rem}
.ligne li::before{content:"";position:absolute;left:0;top:.9rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(242,169,59,.22)}
.ligne .an{display:block;font:300 clamp(2.6rem,4.6vw,3.8rem)/.9 var(--disp);letter-spacing:-.05em;color:var(--ink);margin-bottom:.4rem}
.ligne h3{font-size:1.35rem;margin-bottom:.3rem}
.ligne p{font-size:1rem;max-width:30ch}

/* date géante */
.date-geante{display:flex;align-items:flex-end;gap:.8rem;line-height:.8;margin:0}
.date-geante b{font:800 clamp(6rem,15vw,12rem)/.78 var(--disp);letter-spacing:-.08em;color:var(--ink)}
.date-geante span{font:700 clamp(1.8rem,4vw,3.2rem)/.9 var(--disp);letter-spacing:-.04em;padding-bottom:.35rem;color:var(--ink)}
.date-geante em{font-size:.92em}

/* index numéroté (formats de rencontre) */
.index{list-style:none;padding:0;margin:1.2rem 0 0;border-top:2px solid var(--ink)}
.index li{display:grid;grid-template-columns:3.2rem 1fr auto;gap:1.2rem;align-items:center;padding:1.3rem .2rem;border-bottom:1px solid rgba(11,34,54,.16);transition:padding .3s,background .3s}
.index li:hover{padding-inline:1rem;background:rgba(13,97,147,.05)}
.index .n{font:700 1rem var(--disp);color:var(--gold-deep)}
.index h3{font-size:clamp(1.4rem,2.8vw,2.2rem);margin-bottom:.25rem}
.index p{font-size:1.02rem;max-width:52ch}
.index .ic svg{width:34px;height:34px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.note-l{margin-top:1.4rem;font-size:.95rem;max-width:60ch}
.note-l .link{margin-left:.3rem}

/* journal (agenda) */
.journal{list-style:none;padding:0;margin:1rem 0 0;border-top:2px solid var(--ink)}
.journal li{display:grid;grid-template-columns:5.2rem 1fr auto;gap:1rem;align-items:baseline;padding:.9rem .2rem;border-bottom:1px solid rgba(11,34,54,.16)}
.journal .j{font:700 .8rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.journal .j b{font:800 1.5rem var(--disp);letter-spacing:-.04em;color:var(--ink);margin-right:.2rem;text-transform:none}
.journal .t b{display:block;font:700 1.1rem var(--disp);letter-spacing:-.02em;color:var(--ink)}
.journal small{color:var(--ink-soft);font-weight:600}
.journal .etat{font:700 .66rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.journal li.passe .etat{color:var(--ink-soft)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,5rem);align-items:start}
.deux h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.agenda-une .billet{animation:none;--stub-d:clamp(220px,22vw,280px);width:100%}
.souche.droite .btn{white-space:nowrap}
.billet .obj{font-size:.95rem;font-weight:600;color:var(--ink-soft);max-width:46ch;margin:-.1rem 0 .1rem;line-height:1.4}
.billet .obj b{color:var(--ink)}

/* chemin en 3 étapes (adhésion) */
.chemin{list-style:none;padding:0;margin:1.2rem 0 0;counter-reset:c;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.6rem);position:relative}
.chemin::before{content:"";position:absolute;left:0;right:0;top:1.05rem;height:2px;background:linear-gradient(90deg,var(--gold),rgba(242,169,59,.2))}
.chemin li{counter-increment:c;position:relative;padding-top:3.4rem;display:grid;gap:.3rem;align-content:start}
.chemin li::before{content:counter(c);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);font:800 1rem var(--disp);color:var(--ink);box-shadow:0 0 0 6px var(--paper)}
.chemin b{font:700 1.3rem var(--disp);letter-spacing:-.025em;color:var(--ink)}
.chemin span{color:var(--ink-soft);font-size:1rem;font-weight:500;max-width:28ch}
.fine-l{font-size:.92rem;max-width:56ch;margin-top:1.6rem}

/* carte de tarif (objet opaque) */
.carte{padding:1.6rem 1.5rem 1.5rem;background:linear-gradient(160deg,#fffaf0,#fff3d8)!important;border:2px solid rgba(242,169,59,.6)!important;display:grid;gap:.4rem;justify-items:start;width:min(100%,360px);justify-self:end}
.carte .montant{font-size:clamp(4.4rem,8vw,6.4rem)}
.carte .btn{margin-top:.8rem;width:100%}
.carte .eyebrow{margin:.4rem 0 0}

/* module Yapla (non simulé) */
.module{padding:1.3rem 1.4rem;border:2px dashed rgba(13,97,147,.45);border-radius:14px;background:rgba(227,241,248,.55)}
.module b{display:block;font:700 1.1rem var(--disp);margin-bottom:.3rem;color:var(--ink)}
.module p{font-size:.94rem}
.module .tag{display:inline-block;margin-bottom:.6rem;padding:.2rem .7rem;border-radius:999px;background:var(--blue);color:#fff;font:700 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase}
.module.grand{padding:clamp(1.4rem,3vw,2.4rem);min-height:220px;display:grid;align-content:center}
.module.grand b{font:700 1.8rem var(--disp);letter-spacing:-.03em}

/* galerie de tirages (objets opaques) */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.6rem);align-items:start;width:100%}
.galerie .tirage{--ar:3/4}.galerie .tirage:nth-child(1){--r:-2.4deg}.galerie .tirage:nth-child(2){--r:1.8deg;margin-top:1.6rem}.galerie .tirage:nth-child(3){--r:-1.4deg;margin-top:.6rem}

/* bandeau d'appel : une ligne, opaque */
.bandeau{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.4rem;padding:.7rem .8rem .7rem 1.4rem;border-radius:999px;background:rgba(255,253,247,.97);border:2px solid rgba(242,169,59,.7);box-shadow:var(--sol);width:fit-content;max-width:100%}
.bandeau b{font:700 clamp(1.1rem,2vw,1.5rem) var(--disp);letter-spacing:-.03em}
.bandeau .quand-b{color:var(--ink-soft);font-weight:600}
.bandeau .btn{margin-left:.6rem}

/* mentions légales : accordéon sobre */
.legal{border-top:2px solid var(--ink)}
.legal details{border-bottom:1px solid rgba(11,34,54,.16)}
.legal summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem .2rem;font:700 clamp(1.2rem,2.2vw,1.6rem) var(--disp);letter-spacing:-.02em;min-height:56px;color:var(--ink)}
.legal summary::-webkit-details-marker{display:none}
.legal summary::after{content:"+";font:300 1.8rem/1 var(--sans);color:var(--gold-deep);transition:transform .25s}
.legal details[open] summary::after{transform:rotate(45deg)}
.legal .corps-l{padding:0 .2rem 1.6rem;max-width:72ch}
.legal h3{font:700 1.02rem var(--sans);letter-spacing:0;margin:1.2rem 0 .3rem;color:var(--blue)}
.legal p{font-size:.97rem;margin-top:.5rem}
.legal ul{margin:.4rem 0 0 1.1rem;font-size:.97rem;color:var(--ink-soft)}
.legal a{color:var(--blue);text-decoration:underline}
.maj{margin-top:1.2rem;font-size:.84rem}
.a-completer{background:#fff3c4;border-radius:4px;padding:0 .25rem}

/* ---------- accueil : texte bleu nuit sur l'image claire, voile latéral clair (pas de plaque, pas de bande blanche) ---------- */
.p-accueil .ch .plaque{position:relative;background:none;box-shadow:none;border:0;padding:0 0 0 .2rem;backdrop-filter:none;-webkit-backdrop-filter:none}
.p-accueil .chapitres{position:relative;isolation:isolate}
.p-accueil .ch .plaque p:not(.eyebrow){color:var(--ink);font-weight:600}
.p-accueil .ch .num{-webkit-text-stroke-color:var(--gold-deep)}
.p-accueil .ch .citation{color:var(--ink)!important}
.p-accueil .formats li{border-color:rgba(11,34,54,.3)}
.p-accueil .adherer{position:relative;isolation:isolate}
.p-accueil .adh-txt{background:none!important;box-shadow:none!important;border:0!important;padding:0;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.p-accueil .adh-txt p:not(.eyebrow){color:var(--ink);font-weight:600}
.p-accueil .adh-txt .fine{color:var(--ink-soft)!important}
.p-accueil .about{position:relative;isolation:isolate;max-width:1180px;margin:0 auto clamp(2rem,6vw,5rem);padding:clamp(2rem,5vw,4rem) var(--pad);text-align:left;background:none;box-shadow:none;border:0;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(1.4rem,5vw,5rem);align-items:start}
.p-accueil .about h2{grid-row:1/3;max-width:12ch}
.p-accueil .about p{grid-column:2;margin:0;font-size:clamp(1.05rem,1.3vw,1.2rem);max-width:46ch;color:var(--ink);font-weight:600}
.p-accueil .about .link{grid-column:2;justify-self:start;margin-top:1.2rem}
.asuivre{list-style:none;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.4rem;font-weight:600;color:var(--ink)}
.asuivre li:first-child span{font:800 .68rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.asuivre b{font-weight:800;margin-right:.3rem}
.asuivre .link{font-size:.9rem}

/* ---------- transitions entre pages (CSS pur) : fondu enchaîné lent, en-tête et rappel fixes immobiles ---------- */
@view-transition{navigation:none}
:root{--vt:1.1s}
.topbar{view-transition-name:topbar}
.dock{view-transition-name:dock}
::view-transition-group(root){animation-duration:var(--vt)}
::view-transition-old(root){animation:vt-out var(--vt) cubic-bezier(.45,0,.2,1) both}
::view-transition-new(root){animation:vt-in var(--vt) cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- tablette ---------- */
@media(max-width:900px){
  .edito,.deux,.hero-f.duo>.pg{grid-template-columns:1fr}
  .edito.inverse>.col-titre{order:1}.edito.inverse>.col-texte{order:2}
  .hero-f.duo .carte{justify-self:start}
  .ligne,.chemin{grid-template-columns:1fr;gap:0}
  .ligne::before,.chemin::before{left:.55rem;right:auto;top:.6rem;bottom:.6rem;width:2px;height:auto;background:linear-gradient(180deg,var(--gold),rgba(242,169,59,.25))}
  .ligne li{padding:0 0 1.4rem 2.2rem}.ligne li::before{left:0;top:.35rem}
  .chemin li{padding:0 0 1.4rem 3rem}.chemin li::before{left:0;top:-.1rem}
  .galerie{grid-template-columns:1fr 1fr}.galerie .tirage:nth-child(3){display:none}
  .p-accueil .about{grid-template-columns:1fr;gap:1rem 0}
  .p-accueil .about h2{grid-row:auto}.p-accueil .about p,.p-accueil .about .link{grid-column:auto}
}

/* ---------- téléphone ---------- */
@media(max-width:700px){
  .pg{padding-inline:14px}
  .papier>.pg{padding-block:2.1rem}
  .hero-f>.pg{min-height:max(58vh,440px);padding-top:88px;padding-bottom:1.4rem}
  .hero-f h1{font-size:clamp(2.1rem,10vw,2.7rem)}
  .hero-f .lead{font-size:.98rem;line-height:1.45;margin-top:.8rem}
  .crumbs{margin-bottom:.6rem;font-size:.58rem}
  .hero-f.droite>.pg{justify-items:start;text-align:left}.hero-f.droite .crumbs{justify-content:flex-start}
  .enonce>.pg{min-height:max(42vh,300px)}
  .enonce blockquote{font-size:clamp(1.75rem,8vw,2.3rem)}
  .enonce .sous{font-size:.95rem}
  .objets>.pg{padding-block:1.4rem;gap:1.2rem}
  .edito h2{font-size:1.75rem;max-width:none}
  .edito .col-texte p{font-size:.98rem;line-height:1.5}
  .papier .bloc+.bloc{margin-top:1.8rem;padding-top:1.6rem}
  .mots{font-size:clamp(1.55rem,7.6vw,2.1rem);gap:.1rem .7rem}
  .ligne .an{font-size:2.2rem}.ligne h3{font-size:1.15rem}.ligne p{font-size:.92rem}
  .date-geante b{font-size:clamp(5rem,28vw,7rem)}.date-geante span{font-size:1.6rem}
  .index li{grid-template-columns:2rem 1fr;gap:.7rem;padding:.9rem .1rem}.index .ic{display:none}
  .index h3{font-size:1.2rem}.index p{font-size:.92rem}
  .journal li{grid-template-columns:4.2rem 1fr;gap:.6rem;padding:.65rem .1rem}.journal .etat{display:none}.journal .t b{font-size:1rem}.journal .j b{font-size:1.25rem}
  .chemin b{font-size:1.1rem}.chemin span{font-size:.92rem}
  .carte{padding:1rem 1.1rem;width:100%}.carte .montant{font-size:3.4rem}
  .module{padding:1rem}.module p{font-size:.88rem}.module.grand{min-height:0}.module.grand b{font-size:1.4rem}
  .galerie{gap:.6rem}.galerie .tirage{padding:6px 6px 0}.galerie figcaption{font-size:.78rem;padding:.4rem .1rem .5rem}
  .bandeau{border-radius:18px;padding:.8rem 1rem;width:100%;display:grid;gap:.15rem}
  .bandeau .btn{margin:.5rem 0 0;width:100%;min-height:48px}
  .legal summary{padding:.9rem .1rem;font-size:1.1rem}.legal .corps-l{padding:0 .1rem 1rem}
  .billet .obj{font-size:.82rem}
  .asuivre{font-size:.86rem;gap:.2rem 1rem;order:4;margin:0}
  .asuivre li:last-child{width:100%}
  .hero-txt .lead{order:5}
  .chiffres{order:6;background:var(--paper);backdrop-filter:none}
  .p-accueil .about{padding:1.8rem 14px}
}

/* =====================================================================
   V9 — grammaire Lockpit (retour du 12/10) : ouverture = titre à gauche, objet opaque à droite, repères en bas ;
   puis des scènes = le décor, une phrase, un objet posé dedans. Papier : agenda et mentions seulement.
   ===================================================================== */
/* ---------- ouverture ---------- */
.ouverture>.pg{min-height:max(88vh,700px);padding-top:140px;padding-bottom:clamp(1.5rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:1fr auto;gap:clamp(1.5rem,4vw,4rem) clamp(1.5rem,5vw,5rem);align-items:center}
.ouv-txt{grid-column:1;grid-row:1;max-width:620px}
.ouv-txt h1{font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:.94}
.ouv-txt .lead{margin:1.3rem 0 0;max-width:40ch;font-size:clamp(1.05rem,1.45vw,1.28rem);line-height:1.45}
.ouv-txt .actions{margin-top:1.6rem}
.ouv-obj{grid-column:2;grid-row:1;justify-self:end;width:100%;display:grid;justify-items:end;animation:enter 1.1s .3s both cubic-bezier(.2,.7,.2,1)}
.ouv-obj>*{max-width:min(100%,420px)}
.ouv-obj .tirage{width:min(100%,400px);--ar:4/5}
.ouv-obj .module.grand{width:min(100%,440px)}
.ouverture.droite>.pg{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.ouverture.droite .ouv-txt{grid-column:2;text-align:right;justify-self:end}
.ouverture.droite .ouv-txt .crumbs,.ouverture.droite .ouv-txt .actions{justify-content:flex-end}
.ouverture.droite .ouv-txt .lead{margin-left:auto}
.ouverture.droite .ouv-obj{grid-column:1;justify-self:start;justify-items:start}
/* rangée de repères en bas (comme les chiffres de Lockpit) */
.ouv-bas{grid-column:1/-1;grid-row:2;animation:enter 1.1s .5s both cubic-bezier(.2,.7,.2,1)}
.ouv-bas .chiffres{display:flex;flex-wrap:wrap;gap:.6rem 0;margin:0}
.ouv-bas .chiffres>div{padding:0 clamp(1.2rem,2.6vw,2.4rem);border-left:1px solid rgba(11,34,54,.22)}
.ouv-bas .chiffres>div:first-child{border-left:0;padding-left:0}
.ouv-bas .chiffres dt{font:700 clamp(1.5rem,2.6vw,2.2rem)/1 var(--disp);letter-spacing:-.04em;color:var(--blue)}
.ouv-bas .chiffres dd{font:700 .66rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-top:.3rem;max-width:16ch}
.ouv-bas .formats-r dt,.ouv-bas .etapes-r dt{color:var(--gold-deep);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.ouv-bas .dates-r dt{font-size:clamp(1.2rem,2vw,1.6rem)}
.ouv-bas .dates-r dd{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600;color:var(--ink-soft);max-width:none}

/* billet vertical (objet de l'ouverture) */
.billet.vertical{grid-template-columns:1fr;-webkit-mask:none;mask:none;width:min(100%,400px);min-height:0}
.billet.vertical .souche{border-radius:20px 20px 0 0;grid-auto-flow:column;gap:.8rem;justify-content:center;align-items:baseline;padding:.8rem 1rem}
.billet.vertical .souche b{font-size:3.4rem;margin:0}
.billet.vertical .corps{border-left:0;border-top:2px dashed rgba(11,34,54,.25);padding:1.3rem 1.4rem;gap:.7rem}
.billet.vertical .corps h2{font-size:clamp(1.8rem,2.6vw,2.3rem)}
.billet.vertical .meta{flex-direction:column;gap:.45rem;font-size:.95rem}
.billet.vertical .souche.droite{border-radius:0 0 20px 20px;border-left:0;border-top:2px dashed rgba(11,34,54,.25);grid-auto-flow:row;padding:1rem 1.4rem 1.1rem;gap:.6rem}
.billet.vertical .souche.droite .btn{width:100%}
.billet.vertical .obj{font-size:.9rem}

/* ---------- scène : décor + phrase + objet ---------- */
.scene>.pg{min-height:max(78vh,600px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,5rem);align-items:center;padding-block:clamp(2.5rem,6vw,5rem)}
.scene-txt{max-width:560px}
.scene-txt .eyebrow{margin-bottom:1rem}
.scene-txt blockquote{font:700 clamp(2.2rem,4.8vw,4.4rem)/1 var(--disp);letter-spacing:-.04em;color:var(--ink);text-wrap:balance;margin:0}
.scene-txt blockquote em{font-size:.96em}
.scene-txt .sous{margin:1.1rem 0 0;font-size:clamp(1rem,1.3vw,1.15rem);font-weight:600;color:var(--ink);max-width:38ch;line-height:1.45}
.scene-txt .actions{margin-top:1.5rem}
.scene-txt .link{margin-top:1.3rem;display:inline-block}
.scene-obj{justify-self:end;width:100%;display:grid;justify-items:end}
.scene-obj>*{max-width:min(100%,460px)}
.scene-obj .tirage{width:min(100%,420px);--ar:4/5}
.scene-obj .bandeau{max-width:none}
.scene.droite>.pg>.scene-txt{order:2;justify-self:end;text-align:right}
.scene.droite .scene-txt .eyebrow{flex-direction:row-reverse}
.scene.droite .scene-txt .sous{margin-left:auto}
.scene.droite .scene-txt .actions{justify-content:flex-end}
.scene.droite>.pg>.scene-obj{order:1;justify-self:start;justify-items:start}
.scene.centre>.pg{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:max(60vh,460px)}
.scene.centre .scene-txt .eyebrow,.scene.centre .scene-txt .actions{justify-content:center}
.scene.pleine>.pg{grid-template-columns:1fr;min-height:0}
.scene.pleine .scene-obj{justify-self:stretch;justify-items:stretch}
.scene.pleine .scene-obj>*{max-width:none}
.scene.pleine .scene-txt{margin-bottom:.5rem}

/* ---------- la fiche : petit objet opaque (valeurs, chronologie, formats, date) ---------- */
.fiche{background:var(--plaque);border-radius:18px;box-shadow:var(--pose),var(--sol);border:1px solid rgba(255,255,255,.8);padding:clamp(1.3rem,2.4vw,1.8rem) clamp(1.3rem,2.4vw,1.9rem);width:min(100%,440px);display:grid;gap:.6rem;justify-items:start}
.fiche .eyebrow{margin-bottom:.4rem}
.fiche p{color:var(--ink-soft);font-size:.98rem}
.fiche .btn,.fiche .link{margin-top:.5rem}
.fiche-liste{list-style:none;padding:0;margin:0;display:grid;gap:.75rem;width:100%}
.fiche-liste li{display:grid;grid-template-columns:1fr;gap:.1rem;padding-bottom:.75rem;border-bottom:1px solid rgba(11,34,54,.12)}
.fiche-liste li:last-child{border-bottom:0;padding-bottom:0}
.fiche-liste b{font:700 1.12rem var(--disp);letter-spacing:-.02em;color:var(--ink)}
.fiche-liste span{font-size:.92rem;color:var(--ink-soft);font-weight:500}
.fiche-liste.icones li{grid-template-columns:auto 1fr;column-gap:.9rem}
.fiche-liste.icones .ic{grid-row:1/3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(160deg,#ffe3a0,#f2a93b)}
.fiche-liste.icones .ic svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fiche.large{width:min(100%,520px)}
.fiche.chrono ol{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;width:100%}
.fiche.chrono li{display:grid;grid-template-columns:4.6rem 1fr;align-items:baseline;gap:.6rem}
.fiche.chrono b{font:300 2rem/1 var(--disp);letter-spacing:-.05em;color:var(--ink)}
.fiche.chrono span{font-size:.95rem;color:var(--ink-soft);font-weight:500}
.fiche.date-obj .date-geante b{font-size:clamp(5rem,9vw,7.6rem)}
.fiche.date-obj .date-geante span{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.fiche.date-obj p:last-child{max-width:30ch}

/* ---------- accueil : ouverture façon Lockpit (titre + boutons à gauche, billet vertical à droite, repères en bas) ---------- */
.p-accueil .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:1fr auto auto;align-items:center;gap:1.2rem clamp(1.5rem,5vw,5rem);padding-top:140px;max-width:1180px}
.p-accueil .hero-txt{grid-column:1;grid-row:1;max-width:620px}
.p-accueil .hero-txt .actions{margin-top:1.6rem}
.p-accueil .hero .billet.vertical{grid-column:2;grid-row:1/3;justify-self:end;align-self:center}
.p-accueil .asuivre{grid-column:1;grid-row:2;align-self:end}
.p-accueil .chiffres{grid-column:1/-1;grid-row:3;margin-top:1rem}
.p-accueil .chiffres>div{border-left-color:rgba(11,34,54,.22)}
.p-accueil .chiffres dd{color:var(--ink)}
.p-accueil .rappel{display:none}

@media(max-width:900px){
  .ouverture>.pg,.ouverture.droite>.pg{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;padding-top:120px}
  .ouv-txt,.ouverture.droite .ouv-txt{grid-column:1;grid-row:1;text-align:left;justify-self:start}
  .ouverture.droite .ouv-txt .crumbs,.ouverture.droite .ouv-txt .actions{justify-content:flex-start}
  .ouv-obj,.ouverture.droite .ouv-obj{grid-column:1;grid-row:2;justify-self:start;justify-items:start}
  .ouv-bas{grid-row:3}
  .scene>.pg,.scene.droite>.pg{grid-template-columns:1fr;min-height:0}
  .scene.droite>.pg>.scene-txt{order:1;text-align:left;justify-self:start}
  .scene.droite .scene-txt .eyebrow{flex-direction:row}.scene.droite .scene-txt .sous{margin-left:0}.scene.droite .scene-txt .actions{justify-content:flex-start}
  .scene.droite>.pg>.scene-obj,.scene-obj{order:2;justify-self:start;justify-items:start}
  .p-accueil .hero{grid-template-columns:1fr}
  .p-accueil .hero-txt,.p-accueil .hero .billet.vertical,.p-accueil .asuivre,.p-accueil .chiffres{grid-column:1;grid-row:auto;justify-self:stretch}
  .p-accueil .hero .billet.vertical{width:100%}
}
@media(max-width:700px){
  .ouverture>.pg{padding-top:88px;gap:1.1rem}
  .ouv-txt h1{font-size:clamp(2.1rem,10vw,2.7rem)}
  .ouv-txt .lead{font-size:.98rem;margin-top:.8rem}
  .ouv-txt .actions{margin-top:1rem;gap:.8rem 1.2rem}
  .ouv-obj>*,.ouv-obj .tirage,.scene-obj>*,.scene-obj .tirage,.fiche,.fiche.large,.billet.vertical{width:100%;max-width:none}
  .ouv-obj .tirage,.scene-obj .tirage{--ar:4/3}
  .ouv-bas .chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.7rem .6rem;padding:.8rem .7rem;border-radius:14px;background:rgba(255,252,244,.92);text-align:center}
  .ouv-bas .chiffres dd{max-width:none;margin-inline:auto}
  .ouv-bas .chiffres>div{border-left:0;padding:0}
  .ouv-bas .chiffres dt{font-size:1.35rem}.ouv-bas .chiffres dd{font-size:.58rem}
  .ouv-bas .dates-r dd{font-size:.82rem}
  .ouv-bas .formats-r{grid-template-columns:1fr 1fr}
  .scene>.pg{padding-block:1.6rem;gap:1.1rem}
  .scene-txt blockquote{font-size:clamp(1.75rem,8vw,2.3rem)}
  .scene-txt .sous{font-size:.95rem}
  .fiche{padding:1rem 1rem 1.1rem;border-radius:14px}
  .fiche-liste b{font-size:1rem}.fiche-liste span{font-size:.88rem}
  .fiche.chrono b{font-size:1.6rem}
  .billet.vertical .souche b{font-size:2.3rem}
  .billet.vertical .corps{padding:.9rem 1rem}.billet.vertical .corps h2{font-size:1.65rem}
  .p-accueil .hero{padding-top:92px}
  .p-accueil .hero-txt{display:block}
  .p-accueil .hero-txt .actions{margin-top:.9rem}
  .p-accueil .hero-txt .lead{font-size:.95rem;margin-top:.6rem}
  .p-accueil .chiffres{margin-top:.2rem}
}

/* ---------- plus aucun voile par section : seules les pastilles reçoivent un fond opaque ---------- */
.p-accueil .formats li{background:#fff;border-color:rgba(11,34,54,.18);color:var(--ink)}
.p-accueil .ch .plaque,.p-accueil .adherer,.p-accueil .about,.scene,.enonce{isolation:auto}

/* =====================================================================
   V11 — TÉLÉPHONE « ouverture immersive, page claire » (12/10, remplace la V10 « une scène par écran », jugée moche).
   Sur téléphone, l'immersion tient en UNE image d'ouverture plein écran (le titre dans le ciel) qui se fond vers une
   page claire. Tout le contenu vit ensuite sur cette page : photos pleine largeur arrondies, billet et tarif en cartes
   posées sur fond uni, listes à filets, chiffres sur un filet, bloc bleu nuit pour l'appel final. Aucun texte sur une
   photo chargée, pas d'écrans vides, pas d'aimantation. (La V10 est archivée dans _archives/.)
   ===================================================================== */
@media(max-width:700px){
  :root{--m:16px}
  .ot-site{scroll-snap-type:none;background:var(--cream)}
  .ot-site{background:none}  /* le fond du body passerait devant le décor (z-index négatif) : c'est html qui porte le crème */
  /* --- le décor : seulement l'ouverture, plein écran, fondu vers la page claire --- */
  .world{position:absolute;inset:0 0 auto 0;height:100svh;overflow:hidden;background:var(--cream)}
  .world img,.ot-site:not(.p-accueil) .world img{position:absolute;top:0;left:50%;right:auto;width:auto;height:100%;max-width:none;min-width:100%;margin:0;translate:-50% 0;transform:none;animation:none!important;filter:saturate(1.04) brightness(1.02)}
  .p-accueil .world img{left:auto;right:0;translate:none}
  .veil{animation:none!important;opacity:1!important;background:linear-gradient(180deg,rgba(255,252,244,.66),rgba(255,252,244,.34) 40%,transparent 62%)!important}
  .wash{animation:none!important;opacity:1!important;background:linear-gradient(180deg,transparent 56%,var(--cream) 94%)!important}
  .world::after{display:none}
  /* --- ouverture : titre dans le ciel, chiffres sur un filet au bas de l'image, l'objet posé sur la page --- */
  .fenetre.ouverture>.pg,.fenetre.ouverture.droite>.pg{display:flex;flex-direction:column;align-items:stretch;gap:1rem;min-height:86svh;padding:88px var(--m) 0;grid-template-columns:none;text-align:left}
  .ouv-txt,.fenetre.ouverture.droite .ouv-txt{order:0;max-width:none;width:100%;text-align:left;justify-self:stretch}
  .fenetre.ouverture.droite .crumbs,.fenetre.ouverture.droite .ouv-txt .actions{justify-content:flex-start}
  .ouv-txt h1,.p-accueil .hero h1{font-size:clamp(2.15rem,10.6vw,2.7rem);line-height:.96;letter-spacing:-.04em;max-width:none}
  .ouv-txt .lead,.p-accueil .hero-txt .lead{font-size:1.02rem;line-height:1.45;margin-top:.8rem;max-width:32ch;font-weight:600;color:var(--ink)}
  .ouv-txt .actions,.p-accueil .hero-txt .actions{margin-top:1rem;gap:.75rem 1.3rem}
  .crumbs{margin-bottom:.6rem;font-size:.58rem}
  .ouv-bas{order:1;margin-top:auto;animation:none}
  .ouv-bas .chiffres{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding:.9rem 0 0;border-top:1px solid rgba(11,34,54,.26);background:none;border-radius:0;text-align:left}
  .ouv-bas .chiffres>div{padding:0;border:0;display:grid;gap:.15rem}
  .ouv-bas .chiffres dt{font-size:1.4rem;color:var(--ink)}
  .ouv-bas .chiffres dd{font-size:.58rem;letter-spacing:.12em;margin:0;max-width:12ch;line-height:1.3;color:var(--ink-soft)}
  .ouv-bas .dates-r dd{font-size:.8rem;letter-spacing:0;text-transform:none;max-width:14ch}
  .ouv-bas .formats-r{grid-template-columns:none}
  .ouv-obj,.fenetre.ouverture.droite .ouv-obj{order:2;width:100%;max-width:none;display:grid;justify-items:stretch;justify-self:stretch;animation:none;margin-top:1.4rem}
  .ouv-obj>*{max-width:none;width:100%}
  /* --- scènes : des sections de page claire, bien espacées --- */
  .fenetre.scene>.pg,.fenetre.scene.droite>.pg,.fenetre.scene.centre>.pg,.fenetre.scene.pleine>.pg{display:flex;flex-direction:column;align-items:stretch;gap:1.1rem;min-height:0;padding:2.6rem var(--m) 0;grid-template-columns:none;text-align:left}
  .fenetre.scene:last-of-type>.pg{padding-bottom:2.6rem}
  .scene-txt,.fenetre.scene.droite>.pg>.scene-txt,.fenetre.scene.centre>.pg>.scene-txt{order:0;max-width:none;width:100%;text-align:left;justify-self:stretch}
  .fenetre.scene.droite .scene-txt .eyebrow,.fenetre.scene.centre .scene-txt .eyebrow{flex-direction:row;justify-content:flex-start}
  .fenetre.scene.droite .scene-txt .sous{margin-left:0}
  .fenetre.scene.droite .scene-txt .actions,.fenetre.scene.centre .scene-txt .actions{justify-content:flex-start}
  .scene-txt .eyebrow{margin-bottom:.7rem;font-size:.62rem;letter-spacing:.18em}
  .scene-txt blockquote{font-size:clamp(1.7rem,8.2vw,2.2rem)}
  .scene-txt .sous{font-size:1rem;line-height:1.5;margin-top:.7rem;max-width:34ch;font-weight:500;color:var(--ink-soft)}
  .scene-txt .actions{margin-top:1rem}
  .scene-obj,.fenetre.scene.droite>.pg>.scene-obj{order:1;width:100%;max-width:none;display:grid;justify-items:stretch;justify-self:stretch}
  .scene-obj>*{max-width:none;width:100%}
  /* --- objets sur page claire --- */
  .tirage{rotate:0deg!important;padding:0;background:none;box-shadow:none;margin:0}
  .tirage:hover{translate:none}
  .tirage img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;max-height:none;width:100%}
  .tirage figcaption{padding:.5rem .1rem 0;font-size:.88rem;color:var(--ink-soft)}
  .ouv-obj .tirage,.scene-obj .tirage{width:100%;margin:0}
  .galerie{grid-template-columns:1fr 1fr;gap:.7rem;align-items:start}
  .galerie .tirage{margin-top:0!important;padding:0}
  .galerie .tirage:nth-child(3){display:none}
  .galerie .tirage img{aspect-ratio:3/4}
  .fiche,.fiche.large,.fiche.chrono,.fiche.date-obj{width:100%;background:#fff;border:1px solid rgba(11,34,54,.08);border-radius:16px;box-shadow:0 14px 34px -26px rgba(16,48,80,.55);padding:1.2rem 1.1rem 1.2rem;gap:.5rem}
  .fiche .eyebrow{margin-bottom:.3rem}
  .fiche-liste{gap:0}
  .fiche-liste li{border-bottom:1px solid rgba(11,34,54,.1);padding:.7rem 0}
  .fiche-liste li:first-child{padding-top:.2rem}.fiche-liste li:last-child{border-bottom:0;padding-bottom:.2rem}
  .fiche-liste b{font-size:1.05rem}.fiche-liste span{font-size:.9rem}
  .fiche-liste.icones li{grid-template-columns:auto 1fr;column-gap:.8rem}
  .fiche-liste.icones .ic{width:38px;height:38px;border-radius:11px}.fiche-liste.icones .ic svg{width:20px;height:20px}
  .fiche.chrono ol{gap:0}.fiche.chrono li{grid-template-columns:4.4rem 1fr;padding:.55rem 0;border-bottom:1px solid rgba(11,34,54,.1)}
  .fiche.chrono li:last-child{border-bottom:0}
  .fiche.chrono b{font-size:1.7rem}
  .fiche.date-obj .date-geante b{font-size:clamp(4.4rem,22vw,5.6rem)}
  .fiche.date-obj p:last-child{font-size:.95rem}
  .fiche .btn{width:100%;min-height:48px;margin-top:.6rem}
  .fiche .link{margin-top:.4rem}
  .carte{width:100%;padding:1.2rem 1.1rem 1.2rem;border-radius:16px;gap:.3rem}
  .carte img{display:none}
  .carte .montant{font-size:clamp(3.6rem,18vw,4.6rem);line-height:.85;grid-row:auto}
  .carte .btn{width:100%;min-height:50px;margin-top:.5rem}
  .billet.vertical{width:100%;border-radius:16px;animation:none}
  .billet.vertical .souche{padding:.5rem .8rem;gap:.6rem;border-radius:14px 14px 0 0}
  .billet.vertical .souche b{font-size:2.4rem}
  .billet.vertical .corps{padding:.9rem 1rem;gap:.5rem}
  .billet.vertical .corps h2{font-size:1.6rem}
  .billet.vertical .corps .live{font-size:.62rem}
  .billet.vertical .obj{font-size:.86rem;line-height:1.35}
  .billet.vertical .meta{gap:.35rem;font-size:.9rem}
  .billet.vertical .souche.droite{padding:.75rem 1rem .85rem;gap:.45rem;border-radius:0 0 14px 14px}
  .billet.vertical .souche.droite .btn{min-height:48px}
  .module,.module.grand{padding:1.1rem;min-height:0;border-radius:14px;background:#fff}
  .module.grand b{font-size:1.3rem}
  /* appel final : bloc bleu nuit, bouton doré */
  .bandeau{width:100%;display:grid;gap:.2rem;padding:1.3rem 1.2rem 1.2rem;border-radius:18px;border:0;background:var(--ink);color:#fff;box-shadow:0 18px 40px -28px rgba(11,34,54,.8)}
  .bandeau b{color:#fff;font-size:1.35rem}
  .bandeau .quand-b{color:rgba(255,255,255,.78)}
  .bandeau .live{color:var(--gold)}
  .bandeau .btn{margin:.8rem 0 0;width:100%;min-height:50px}
  /* --- papier : même page claire --- */
  .papier{background:none}
  .papier>.pg{padding:2.4rem var(--m) 1rem}
  /* --- accueil --- */
  .p-accueil .hero{display:flex;flex-direction:column;align-items:stretch;gap:.8rem;padding:88px var(--m) 0;max-width:none;min-height:86svh}
  .p-accueil .hero-txt{display:grid;gap:0;align-content:start;order:0}
  .p-accueil .hero-txt .eyebrow{order:0;margin:0 0 .8rem;font-size:.58rem;letter-spacing:.12em;white-space:nowrap}
  .p-accueil .hero-txt .eyebrow span{display:block;width:30px}
  .p-accueil .hero h1{order:1}.p-accueil .hero-txt .lead{order:2}.p-accueil .hero-txt .actions{order:3}
  .p-accueil .chiffres{order:1;margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;padding:.9rem 0 0;border-top:1px solid rgba(11,34,54,.26);background:none;backdrop-filter:none;border-radius:0;text-align:left}
  .p-accueil .chiffres>div{padding:0;border:0;display:grid;gap:.15rem}
  .p-accueil .chiffres dt{font-size:1.4rem;color:var(--ink)}
  .p-accueil .chiffres dd{font-size:.58rem;letter-spacing:.12em;color:var(--ink-soft);white-space:nowrap}
  .p-accueil .ecran-rdv{order:2;display:grid;gap:.9rem;margin-top:1.4rem;padding:0}
  .p-accueil .asuivre{margin:0;font-size:.88rem;gap:.25rem 1rem;text-shadow:none}
  .p-accueil .asuivre li:last-child{width:100%}
  .p-accueil .chapitres{padding:0}
  .p-accueil .ch{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:2.6rem var(--m) 0;min-height:0}
  .p-accueil .ch .plaque{order:0;padding:0}
  .p-accueil .ch-img{order:1;width:100%;margin:0;aspect-ratio:4/3;max-height:none;object-fit:cover;rotate:0deg;border:0;border-radius:14px;box-shadow:none}
  .p-accueil .ch:nth-child(even) .ch-img{rotate:0deg}
  .p-accueil .ch .eyebrow{margin-bottom:.7rem}
  .p-accueil .ch h2{font-size:clamp(1.7rem,8.2vw,2.2rem)}
  .p-accueil .ch h3{font-size:1.45rem;margin:.1rem 0 .3rem}
  .p-accueil .ch p:not(.eyebrow){font-size:1rem;line-height:1.5;margin-top:.5rem;max-width:34ch;color:var(--ink-soft);font-weight:500}
  .p-accueil .num{font-size:2.4rem;margin-top:.8rem}
  .p-accueil .citation{font-size:1.02rem!important;margin-top:.8rem!important}
  .p-accueil .formats{margin-top:.8rem}
  .p-accueil .formats li{background:#fff}
  .p-accueil .ch .link{margin-top:.5rem}
  .p-accueil .adherer{display:flex;flex-direction:column;align-items:stretch;gap:1rem;padding:2.8rem var(--m) 0;min-height:0}
  .p-accueil .adh-txt{order:0;padding:0}
  .p-accueil .adh-txt h2{font-size:clamp(1.7rem,8.2vw,2.2rem)}
  .p-accueil .adh-txt p:not(.eyebrow){font-size:1rem;margin-top:.6rem;max-width:34ch;color:var(--ink-soft);font-weight:500}
  .p-accueil .prix{order:1;width:100%;display:grid;gap:.2rem;justify-items:start;padding:1.2rem 1.1rem 1.2rem;border-radius:16px;background:linear-gradient(160deg,#fffaf0,#fff3d8)!important;border:2px solid rgba(242,169,59,.55)!important;box-shadow:0 14px 34px -26px rgba(16,48,80,.55)!important}
  .p-accueil .prix img{display:none}.p-accueil .prix .eyebrow{display:flex;margin:0 0 .2rem}
  .p-accueil .montant{font-size:clamp(3.6rem,18vw,4.6rem);line-height:.85;grid-row:auto}
  .p-accueil .duree{margin:0 0 .5rem}
  .p-accueil .prix .btn{width:100%;min-height:50px;margin-top:.3rem}
  .p-accueil .about{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;margin:0;padding:2.8rem var(--m) 2.6rem;min-height:0}
  .p-accueil .about h2{font-size:clamp(1.7rem,8.2vw,2.2rem);max-width:none}
  .p-accueil .about p{font-size:1rem;max-width:34ch;color:var(--ink-soft);font-weight:500}
  .p-accueil .about .link{margin-top:.6rem}
  /* textes courants sur la page claire */
  .fenetre .sous,.fenetre p:not(.lead):not(.eyebrow):not(.crumbs){color:var(--ink-soft);font-weight:500}
  .fenetre .lead{color:var(--ink);font-weight:600}
  .legal .corps-l{max-width:none}
  .foot{padding-bottom:100px}
}
@media(max-width:700px){
  /* le bloc de titre occupe l'image ; la rangée de repères se pose en bas, là où l'image s'est fondue dans la page */
  .ouv-txt{min-height:calc(92svh - 88px - 96px)}
  .p-accueil .hero-txt{min-height:calc(92svh - 88px - 96px)}
  .fenetre.ouverture>.pg,.fenetre.ouverture.droite>.pg,.p-accueil .hero{min-height:0}
  .ouv-bas .chiffres,.p-accueil .chiffres{border-top-color:rgba(11,34,54,.2)}
}

/* ---------- « À suivre » : plus une ligne en vrac sur l'image, un mini-agenda en carte sous le billet ---------- */
.p-accueil .asuivre{display:grid;gap:0;padding:.9rem 1.1rem 1rem;border-radius:16px;background:var(--plaque);box-shadow:var(--pose),var(--sol);border:1px solid rgba(255,255,255,.8);text-shadow:none;font-weight:600;color:var(--ink)}
.p-accueil .asuivre li{display:grid;grid-template-columns:4.6rem 1fr;gap:.6rem;align-items:baseline;padding:.45rem 0;border-top:1px solid rgba(11,34,54,.1);font-size:.93rem}
.p-accueil .asuivre li:first-child{grid-template-columns:1fr;border:0;padding:0 0 .35rem}
.p-accueil .asuivre li:first-child span{font:800 .64rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.p-accueil .asuivre b{color:var(--gold-deep);font-weight:800;margin:0;white-space:nowrap}
.p-accueil .asuivre li:last-child{grid-template-columns:1fr;padding:.6rem 0 0;justify-items:start}
.p-accueil .asuivre .link{font-size:.88rem}
/* bureau : la carte se range sous le billet, dans la colonne de droite */
@media(min-width:901px){
  .p-accueil .hero-txt{grid-row:1/3}
  .p-accueil .hero .billet.vertical{grid-row:1;align-self:end}
  .p-accueil .asuivre{grid-column:2;grid-row:2;justify-self:end;align-self:start;width:min(100%,400px);margin-top:.9rem}
}
@media(max-width:700px){
  .p-accueil .asuivre{width:100%;margin:0;font-size:.93rem;gap:0}
  .p-accueil .asuivre li:last-child{width:auto}
}

/* ---------- bandeau posé dans une scène : en colonne étroite il devient une carte alignée (plus de bouton qui passe à la ligne de travers) ---------- */
.scene-obj .bandeau,.ouv-obj .bandeau{display:grid;grid-template-columns:1fr;gap:.25rem;justify-items:start;width:min(100%,440px);border-radius:18px;padding:1.3rem 1.4rem 1.3rem}
.scene-obj .bandeau b,.ouv-obj .bandeau b{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.1}
.scene-obj .bandeau .live,.ouv-obj .bandeau .live{margin-bottom:.4rem}
.scene-obj .bandeau .quand-b,.ouv-obj .bandeau .quand-b{font-size:1rem}
.scene-obj .bandeau .btn,.ouv-obj .bandeau .btn{margin:.9rem 0 0;min-height:48px}

/* ---------- bloc d'appel (bandeau dans une scène) : bleu nuit opaque, bouton doré pleine largeur ---------- */
.scene-obj .bandeau,.ouv-obj .bandeau{background:var(--ink);color:#fff;border:0;box-shadow:0 24px 50px -30px rgba(11,34,54,.8);padding:1.5rem 1.5rem 1.4rem;gap:.2rem;width:min(100%,420px)}
.scene-obj .bandeau b,.ouv-obj .bandeau b{color:#fff}
.scene-obj .bandeau .quand-b,.ouv-obj .bandeau .quand-b{color:var(--accent-clair,#ffd79a);font-weight:600}
.scene-obj .bandeau .live,.ouv-obj .bandeau .live{color:var(--gold)}
.scene-obj .bandeau .btn,.ouv-obj .bandeau .btn{width:100%;margin-top:1.1rem;min-height:50px;font-size:1rem}
:root{--accent-clair:#ffd79a}

/* ---------- Yapla : l'éditeur retire les <div> à l'intérieur d'un <dl> ; les dt/dd deviennent enfants directs.
   La rangée de repères se place alors sur deux lignes de grille (dt en haut, dd en bas), même rendu. ---------- */
.chiffres:not(:has(div)){display:grid;grid-auto-flow:column;gap:.2rem clamp(1.2rem,2.6vw,2.4rem);justify-content:start}
.chiffres:not(:has(div))>dt{grid-row:1;padding:0}
.chiffres:not(:has(div))>dd{grid-row:2;padding:0;margin:0}

/* =====================================================================
   V12 — TÉLÉPHONE, accueil d'abord (règles fixées avec le bureau le 12/10) :
   1) le billet du prochain rendez-vous dès le premier écran, le titre réduit à une ligne ;
   2) textes raccourcis (<span class="court">) et éléments moins larges (marges de 22 px, cartes qui respirent) ;
   3) esprit « appli épurée » : grands titres, cartes blanches franches sur page claire, boutons pleine largeur, beaucoup d'air.
   Le décor n'apparaît qu'en ouverture et se fond dans la page (V11).
   ===================================================================== */
.court{display:none}
@media(max-width:700px){
  :root{--m:22px}
  .long{display:none}.court{display:inline}
  /* --- écran 1 : titre d'une ligne, billet, c'est tout --- */
  .p-accueil .hero{padding:84px var(--m) 0;gap:.9rem;min-height:0}
  .p-accueil .hero-txt{min-height:0;gap:0}
  .p-accueil .hero-txt .eyebrow{display:none}
  .p-accueil .hero h1{font-size:clamp(1.55rem,7.4vw,1.9rem);line-height:1.05;letter-spacing:-.03em;max-width:none}
  .p-accueil .hero-txt .lead{font-size:.95rem;margin-top:.4rem;max-width:none;color:var(--ink-soft);font-weight:500}
  .p-accueil .hero-txt .actions{display:none}
  .p-accueil .ecran-rdv{order:1;margin-top:.4rem;gap:.9rem}
  .p-accueil .hero .billet.vertical{border-radius:18px;box-shadow:0 22px 50px -28px rgba(16,48,80,.6)}
  .p-accueil .hero .billet.vertical .souche{padding:.55rem .9rem;gap:.6rem;border-radius:16px 16px 0 0}
  .p-accueil .hero .billet.vertical .souche b{font-size:2.5rem}
  .p-accueil .hero .billet.vertical .corps{padding:1rem 1.1rem;gap:.45rem}
  .p-accueil .hero .billet.vertical .corps h2{font-size:1.7rem}
  .p-accueil .hero .billet.vertical .obj{font-size:.86rem}
  .p-accueil .hero .billet.vertical .meta{font-size:.92rem;gap:.35rem}
  .p-accueil .hero .billet.vertical .souche.droite{padding:.8rem 1.1rem .9rem;gap:.5rem;border-radius:0 0 16px 16px}
  .p-accueil .hero .billet.vertical .souche.droite .btn{min-height:52px;font-size:1.02rem}
  /* mini-agenda : carte blanche franche */
  .p-accueil .asuivre{background:#fff;border:1px solid rgba(11,34,54,.08);box-shadow:0 14px 34px -26px rgba(16,48,80,.5);padding:1rem 1.1rem 1.05rem;border-radius:16px}
  .p-accueil .asuivre li{font-size:.95rem;padding:.5rem 0}
  /* chiffres : une ligne discrète, pas un bloc */
  .p-accueil .chiffres{order:2;margin:.2rem 0 0;padding:1rem 0 .4rem;border-top:0;display:flex;justify-content:space-between;gap:.5rem;text-align:left}
  .p-accueil .chiffres>div{display:grid;gap:.1rem;padding:0;border:0}
  .p-accueil .chiffres dt{font-size:1.2rem;color:var(--blue)}
  .p-accueil .chiffres dd{font-size:.56rem;letter-spacing:.1em;color:var(--ink-soft)}
  /* --- chapitres : un titre, une phrase, une photo ; cartes blanches séparées --- */
  .p-accueil .chapitres{padding:0 var(--m)}
  .p-accueil .ch{padding:2rem 0 0;gap:.9rem;min-height:0}
  .p-accueil .ch .plaque{order:0;padding:0}
  .p-accueil .ch .eyebrow{margin-bottom:.6rem;font-size:.6rem}
  .p-accueil .ch h2{font-size:clamp(1.6rem,7.6vw,2rem)}
  .p-accueil .ch h3{font-size:1.35rem;margin:.1rem 0 .2rem}
  .p-accueil .ch p:not(.eyebrow){font-size:.98rem;line-height:1.5;margin-top:.35rem;max-width:none;color:var(--ink-soft)}
  .p-accueil .num{font-size:2rem;margin-top:.9rem}
  .p-accueil .citation{display:none}
  .p-accueil .formats{margin-top:.6rem;gap:.35rem}
  .p-accueil .formats li{font-size:.78rem;padding:.35rem .7rem;background:#fff}
  .p-accueil .ch .link{margin-top:.5rem}
  .p-accueil .ch-img{order:1;width:100%;aspect-ratio:3/2;border-radius:16px;margin:0}
  .p-accueil .c2 .ch-img,.p-accueil .c4 .ch-img{display:none}
  /* --- adhésion : carte blanche franche, bouton pleine largeur --- */
  .p-accueil .adherer{padding:2.4rem var(--m) 0;gap:1rem;min-height:0}
  .p-accueil .adh-txt h2{font-size:clamp(1.6rem,7.6vw,2rem)}
  .p-accueil .adh-txt p:not(.eyebrow){font-size:.98rem;max-width:none}
  .p-accueil .adh-txt .fine{display:none}
  .p-accueil .prix{background:#fff!important;border:1px solid rgba(11,34,54,.08)!important;box-shadow:0 14px 34px -26px rgba(16,48,80,.5)!important;padding:1.2rem 1.2rem 1.25rem;border-radius:18px}
  .p-accueil .montant{font-size:clamp(3.4rem,17vw,4.2rem)}
  /* --- à propos : court --- */
  .p-accueil .about{padding:2.4rem var(--m) 2.4rem;gap:.5rem;min-height:0}
  .p-accueil .about h2{font-size:clamp(1.6rem,7.6vw,2rem)}
  .p-accueil .about p{font-size:.98rem;max-width:none}
  /* rappel fixe : plus discret, visible seulement une fois le billet passé */
  @supports (animation-timeline:scroll()){.p-accueil .dock{animation-range:700px 900px}}
}

/* =====================================================================
   V12 — TÉLÉPHONE, accueil d'abord (règles fixées avec le bureau le 12/10) :
   1) le billet du prochain rendez-vous dès le premier écran, le titre réduit à une ligne ;
   2) textes raccourcis (<span class="court">) et éléments moins larges (marges de 22 px, cartes qui respirent) ;
   3) esprit « appli épurée » : grands titres, cartes blanches franches sur page claire, boutons pleine largeur, beaucoup d'air.
   Le décor n'apparaît qu'en ouverture et se fond dans la page (V11).
   ===================================================================== */
.court{display:none}
@media(max-width:700px){
  :root{--m:22px}
  .long{display:none}.court{display:inline}
  /* --- écran 1 : titre d'une ligne, billet, c'est tout --- */
  .p-accueil .hero{padding:84px var(--m) 0;gap:.9rem;min-height:0}
  .p-accueil .hero-txt{min-height:0;gap:0}
  .p-accueil .hero-txt .eyebrow{display:none}
  .p-accueil .hero h1{font-size:clamp(1.55rem,7.4vw,1.9rem);line-height:1.05;letter-spacing:-.03em;max-width:none}
  .p-accueil .hero-txt .lead{font-size:.95rem;margin-top:.4rem;max-width:none;color:var(--ink-soft);font-weight:500}
  .p-accueil .hero-txt .actions{display:none}
  .p-accueil .ecran-rdv{order:1;margin-top:.4rem;gap:.9rem}
  .p-accueil .hero .billet.vertical{border-radius:18px;box-shadow:0 22px 50px -28px rgba(16,48,80,.6)}
  .p-accueil .hero .billet.vertical .souche{padding:.55rem .9rem;gap:.6rem;border-radius:16px 16px 0 0}
  .p-accueil .hero .billet.vertical .souche b{font-size:2.5rem}
  .p-accueil .hero .billet.vertical .corps{padding:1rem 1.1rem;gap:.45rem}
  .p-accueil .hero .billet.vertical .corps h2{font-size:1.7rem}
  .p-accueil .hero .billet.vertical .obj{font-size:.86rem}
  .p-accueil .hero .billet.vertical .meta{font-size:.92rem;gap:.35rem}
  .p-accueil .hero .billet.vertical .souche.droite{padding:.8rem 1.1rem .9rem;gap:.5rem;border-radius:0 0 16px 16px}
  .p-accueil .hero .billet.vertical .souche.droite .btn{min-height:52px;font-size:1.02rem}
  /* mini-agenda : carte blanche franche */
  .p-accueil .asuivre{background:#fff;border:1px solid rgba(11,34,54,.08);box-shadow:0 14px 34px -26px rgba(16,48,80,.5);padding:1rem 1.1rem 1.05rem;border-radius:16px}
  .p-accueil .asuivre li{font-size:.95rem;padding:.5rem 0}
  /* chiffres : une ligne discrète, pas un bloc */
  .p-accueil .chiffres{order:2;margin:.2rem 0 0;padding:1rem 0 .4rem;border-top:0;display:flex;justify-content:space-between;gap:.5rem;text-align:left}
  .p-accueil .chiffres>div{display:grid;gap:.1rem;padding:0;border:0}
  .p-accueil .chiffres dt{font-size:1.2rem;color:var(--blue)}
  .p-accueil .chiffres dd{font-size:.56rem;letter-spacing:.1em;color:var(--ink-soft)}
  /* --- chapitres : un titre, une phrase, une photo --- */
  .p-accueil .chapitres{padding:0 var(--m)}
  .p-accueil .ch{padding:2rem 0 0;gap:.9rem;min-height:0}
  .p-accueil .ch .plaque{order:0;padding:0}
  .p-accueil .ch .eyebrow{margin-bottom:.6rem;font-size:.6rem}
  .p-accueil .ch h2{font-size:clamp(1.6rem,7.6vw,2rem)}
  .p-accueil .ch h3{font-size:1.35rem;margin:.1rem 0 .2rem}
  .p-accueil .ch p:not(.eyebrow){font-size:.98rem;line-height:1.5;margin-top:.35rem;max-width:none;color:var(--ink-soft)}
  .p-accueil .num{font-size:2rem;margin-top:.9rem}
  .p-accueil .citation{display:none}
  .p-accueil .formats{margin-top:.6rem;gap:.35rem}
  .p-accueil .formats li{font-size:.78rem;padding:.35rem .7rem;background:#fff}
  .p-accueil .ch .link{margin-top:.5rem}
  .p-accueil .ch-img{order:1;width:100%;aspect-ratio:3/2;border-radius:16px;margin:0}
  .p-accueil .c2 .ch-img,.p-accueil .c4 .ch-img{display:none}
  /* --- adhésion : carte blanche franche, bouton pleine largeur --- */
  .p-accueil .adherer{padding:2.4rem var(--m) 0;gap:1rem;min-height:0}
  .p-accueil .adh-txt h2{font-size:clamp(1.6rem,7.6vw,2rem)}
  .p-accueil .adh-txt p:not(.eyebrow){font-size:.98rem;max-width:none}
  .p-accueil .adh-txt .fine{display:none}
  .p-accueil .prix{background:#fff!important;border:1px solid rgba(11,34,54,.08)!important;box-shadow:0 14px 34px -26px rgba(16,48,80,.5)!important;padding:1.2rem 1.2rem 1.25rem;border-radius:18px}
  .p-accueil .montant{font-size:clamp(3.4rem,17vw,4.2rem)}
  /* --- à propos : court --- */
  .p-accueil .about{padding:2.4rem var(--m) 2.4rem;gap:.5rem;min-height:0}
  .p-accueil .about h2{font-size:clamp(1.6rem,7.6vw,2rem)}
  .p-accueil .about p{font-size:.98rem;max-width:none}
  /* rappel fixe : visible seulement une fois le billet passé */
  @supports (animation-timeline:scroll()){.p-accueil .dock{animation-range:700px 900px}}
}

/* ---------- V12b — téléphone : le décor reste derrière TOUTE la page (comme au bureau), même voile uniforme ;
   on garde les cartes, redimensionnées et allégées. (Annule l'« ouverture seule » de la V11.) ---------- */
@media(max-width:700px){
  .world{position:fixed;inset:0;height:auto;overflow:hidden;background:#cfe7f3}
  .world img{position:absolute;top:0;left:auto;right:0;width:calc(1.45 * 100vh);height:auto;min-width:0;max-width:none;margin:0;translate:none;transform:none;filter:saturate(1.02) brightness(1.02)}
  .ot-site:not(.p-accueil) .world img{width:max(100vw,calc(130vh / var(--ratio)));left:50%;right:auto;margin-left:calc(max(100vw,calc(130vh / var(--ratio))) / -2)}
  @supports (animation-timeline:scroll()){
    .world img,.ot-site:not(.p-accueil) .world img{animation:tilt linear both!important;animation-timeline:scroll(root)!important;animation-range:0% 90%}
    .veil{animation:veilout linear both!important;animation-timeline:scroll(root)!important;animation-range:0% 22%}
    .wash{opacity:.35!important;animation:washin linear both!important;animation-timeline:scroll(root)!important;animation-range:6% 46%}
  }
  .veil{opacity:1;background:linear-gradient(180deg,rgba(var(--voile),.62),rgba(var(--voile),.36) 42%,rgba(var(--voile),.06) 70%,transparent)!important}
  .wash{background:rgba(var(--voile),.5)!important}
  .world::after{display:block}
  html,.ot-site{background:var(--cream)}
  .ot-site{background:none}
  /* les textes posés sur le décor : même traitement qu'au bureau (bleu nuit, graisse 600) */
  .p-accueil .ch p:not(.eyebrow),.p-accueil .adh-txt p:not(.eyebrow),.p-accueil .about p,.p-accueil .hero-txt .lead,.scene-txt .sous,.ouv-txt .lead{color:var(--ink);font-weight:600}
  .p-accueil .chiffres dd{color:var(--ink)}
}
@media(max-width:700px){
  /* pages intérieures : la V11 décalait l'image de -50 % en plus de la marge → image à moitié hors écran */
  .ot-site:not(.p-accueil) .world img{translate:none;transform:none;margin:0 0 0 calc(max(100vw,calc(130vh / var(--ratio))) / -2)}
  .p-accueil .world img{translate:none;margin:0}
}
@media(max-width:700px){
  /* V12c — « il faut toujours que ça respire » : plus d'air entre et dans les éléments */
  :root{--m:24px}
  .p-accueil .hero{gap:1.3rem;padding-top:92px}
  .p-accueil .hero-txt .lead{margin-top:.6rem}
  .p-accueil .ecran-rdv{gap:1.3rem;margin-top:.6rem}
  .p-accueil .hero .billet.vertical .corps{padding:1.2rem 1.3rem;gap:.6rem}
  .p-accueil .hero .billet.vertical .souche.droite{padding:1rem 1.3rem 1.1rem}
  .p-accueil .asuivre{padding:1.2rem 1.3rem 1.25rem}
  .p-accueil .asuivre li{padding:.6rem 0}
  .p-accueil .chiffres{padding:1.6rem 0 .6rem}
  .p-accueil .ch{padding:3rem 0 0;gap:1.2rem}
  .p-accueil .ch p:not(.eyebrow){margin-top:.6rem;line-height:1.55}
  .p-accueil .num{margin-top:1.3rem}
  .p-accueil .adherer{padding:3.4rem var(--m) 0;gap:1.3rem}
  .p-accueil .prix{padding:1.5rem 1.4rem 1.5rem}
  .p-accueil .about{padding:3.4rem var(--m) 3.4rem;gap:.7rem}
  .foot{padding-top:2rem}
  /* pages intérieures : mêmes respirations */
  .fenetre.ouverture>.pg,.fenetre.ouverture.droite>.pg{padding-top:92px;gap:1.3rem}
  .ouv-txt .lead{margin-top:.9rem}
  .ouv-txt .actions{margin-top:1.2rem}
  .ouv-obj{margin-top:1.6rem}
  .fenetre.scene>.pg,.fenetre.scene.droite>.pg,.fenetre.scene.centre>.pg,.fenetre.scene.pleine>.pg{padding-top:3.2rem;gap:1.3rem}
  .scene-txt .sous{margin-top:.8rem;line-height:1.55}
  .fiche,.fiche.large,.fiche.chrono,.fiche.date-obj{padding:1.4rem 1.3rem 1.4rem;gap:.6rem}
  .fiche-liste li{padding:.8rem 0}
  .carte{padding:1.5rem 1.4rem 1.5rem}
  .bandeau{padding:1.5rem 1.4rem 1.4rem}
  .papier>.pg{padding:3rem var(--m) 1.6rem}
}

/* ---------- billet compact sur téléphone : l'essentiel + une flèche, toute la carte mène à l'événement ---------- */
.billet-lien{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){
  .p-accueil .hero .billet.vertical{display:grid;grid-template-columns:auto 1fr auto;align-items:center;position:relative;min-height:0;border-radius:18px;overflow:hidden}
  .p-accueil .hero .billet.vertical .souche{grid-auto-flow:row;gap:0;padding:1rem .95rem;border-radius:0;align-self:stretch;display:grid;place-content:center;text-align:center}
  .p-accueil .hero .billet.vertical .souche .jour{display:none}
  .p-accueil .hero .billet.vertical .souche b{font-size:2.3rem;line-height:.9}
  .p-accueil .hero .billet.vertical .souche .mois{font-size:.52rem;letter-spacing:.12em;margin-top:.15rem;max-width:5.5em;line-height:1.2}
  .p-accueil .hero .billet.vertical .corps{border:0;padding:1rem 0 1rem 1.1rem;gap:.3rem}
  .p-accueil .hero .billet.vertical .corps .live,.p-accueil .hero .billet.vertical .obj,.p-accueil .hero .billet.vertical .meta li:nth-child(3){display:none}
  .p-accueil .hero .billet.vertical .corps h2{font-size:1.3rem;line-height:1.1}
  .p-accueil .hero .billet.vertical .meta{display:grid;gap:.15rem;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
  .p-accueil .hero .billet.vertical .meta svg{width:16px;height:16px}
  .p-accueil .hero .billet.vertical .souche.droite{display:none}
  .p-accueil .hero .billet.vertical .billet-lien{display:grid;place-items:center;width:42px;height:42px;margin:0 1rem 0 .6rem;border-radius:50%;background:var(--ink);color:#fff;font-size:1.25rem;font-weight:700;position:static}
  .p-accueil .hero .billet.vertical .billet-lien::before{content:"";position:absolute;inset:0}
}
@media(max-width:700px){
  .p-accueil .hero .billet.vertical .souche{order:1;border-radius:18px 0 0 18px}
  .p-accueil .hero .billet.vertical .corps{order:2}
  .p-accueil .hero .billet.vertical .billet-lien{order:3}
  .p-accueil .hero .billet.vertical .meta{grid-template-columns:1fr;gap:.2rem}
  .p-accueil .hero .billet.vertical .meta li{white-space:nowrap}
  .p-accueil .hero .billet.vertical .corps h2{font-size:1.25rem}
}
@media(max-width:700px){
  /* la flèche était rognée : la colonne centrale ne doit pas pousser la carte au-delà de sa largeur */
  .p-accueil .hero .billet.vertical{grid-template-columns:auto minmax(0,1fr) auto}
  .p-accueil .hero .billet.vertical .corps{min-width:0;padding-right:.4rem}
  .p-accueil .hero .billet.vertical .meta li{white-space:normal}
  .p-accueil .hero .billet.vertical .billet-lien{margin:0 .9rem 0 .4rem;flex:none}
}

/* =====================================================================
   V13 — TÉLÉPHONE, pages intérieures : même grammaire que l'accueil validé le 12/10
   (décor derrière toute la page, ouverture compacte, cartes blanches qui respirent, textes courts).
   ===================================================================== */
@media(max-width:700px){
  /* photos : même cadre blanc qu'au bureau, droit, pleine largeur */
  .tirage{padding:8px 8px 0;background:#fff;box-shadow:var(--pose),var(--sol);rotate:0deg!important}
  .tirage img{border-radius:0;aspect-ratio:4/3}
  .tirage figcaption{padding:.6rem .2rem .7rem;font:italic 400 .95rem var(--serif);color:#4a4132}
  .galerie{grid-template-columns:1fr 1fr;gap:.8rem}
  .galerie .tirage{padding:6px 6px 0}.galerie .tirage img{aspect-ratio:3/4}
  /* ouverture : repères sur une ligne discrète */
  .ouv-bas .chiffres{border-top:0;padding:1.2rem 0 .2rem;justify-content:space-between;gap:.5rem}
  .ouv-bas .chiffres dt{font-size:1.2rem;color:var(--blue)}
  .ouv-bas .chiffres dd{font-size:.56rem;letter-spacing:.1em;color:var(--ink)}
  .ouv-bas .dates-r dd{font-size:.8rem}
  .ouv-bas .formats-r,.ouv-bas .etapes-r{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}
  /* listes sur papier (agenda, mentions) : en cartes blanches posées sur le décor */
  .papier>.pg{padding:2.6rem var(--m) 1rem;display:grid;gap:1.2rem}
  .papier .deux{display:grid;gap:1.2rem}
  .papier .deux>div,.papier .legal,.papier .maj{background:#fff;border:1px solid rgba(11,34,54,.08);border-radius:18px;box-shadow:0 14px 34px -26px rgba(16,48,80,.5);padding:1.3rem 1.2rem 1.2rem}
  .papier .deux h2{font-size:1.5rem}
  .papier .journal{border-top:1px solid rgba(11,34,54,.14);margin-top:.9rem}
  .papier .journal li{padding:.75rem .1rem}
  .papier .note-l{font-size:.9rem;margin-top:1rem}
  .papier .legal{padding:.4rem 1.2rem 1rem;border-top:1px solid rgba(11,34,54,.08)}
  .papier .maj{padding:.9rem 1.2rem;font-size:.82rem}
  /* scènes : phrase + carte, avec de l'air */
  .scene-txt blockquote{font-size:clamp(1.6rem,7.6vw,2rem)}
  .scene-obj{margin-top:.2rem}
  .module,.module.grand{background:#fff;border:2px dashed rgba(13,97,147,.4)}
  .fiche.date-obj .date-geante b{font-size:clamp(4rem,20vw,5rem)}
  /* bloc d'appel : même bleu nuit qu'au bureau */
  .bandeau{width:100%}
}
@media(max-width:700px){
  /* ouverture : plus de vide artificiel ; ordre texte → objet → repères, comme au bureau */
  .ouv-txt{min-height:0}
  .ouv-obj,.fenetre.ouverture.droite .ouv-obj{order:1;margin-top:1.2rem}
  .ouv-bas{order:2;margin-top:.4rem}
  .fenetre.ouverture>.pg,.fenetre.ouverture.droite>.pg{padding-bottom:1rem}
}
@media(max-width:700px){
  /* sous-titres des scènes sur le décor : bleu nuit, graisse 600 (une règle V11 plus spécifique les laissait pâles) */
  .fenetre .scene-txt p.sous,.fenetre .ouv-txt p.lead,.fenetre .scene-txt p:not(.eyebrow){color:var(--ink);font-weight:600}
  .ouv-bas .chiffres dd{max-width:none}
}
@media(max-width:700px){
  .fenetre .scene-txt p:not(.eyebrow):not(.crumbs):not(.x):not(.y),.fenetre .ouv-txt p.lead:not(.x):not(.y):not(.z){color:var(--ink);font-weight:600}
}

/* =====================================================================
   V14 — accueil téléphone (retour du 12/10) : titre sous la barre, plus d'air après les chiffres, léger flou derrière le
   grand titre des chapitres, et CHAPITRES EN PANNEAUX : en descendant, 01 Rencontrer glisse vers la gauche et laisse
   place à 02 Partager, puis 03, puis 04 — la photo suit chaque panneau. CSS pur (défilement piloté). Sans cette
   fonction (navigateur ancien) : les chapitres s'empilent simplement.
   ===================================================================== */
@media(max-width:700px){
  .p-accueil .hero{padding-top:108px}
  .p-accueil .chiffres{padding-bottom:1rem}
  .p-accueil .chapitres{margin-top:2.2rem}
  /* léger flou derrière le texte posé au milieu de l'image (demandé) : sans bord, en halo */
  .p-accueil .ch .plaque{position:relative;isolation:isolate}
  .p-accueil .ch .plaque::before{content:"";position:absolute;z-index:-1;inset:-1.2rem -1.6rem;pointer-events:none;
    background:rgba(255,252,244,.22);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    -webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 82%);mask-image:radial-gradient(ellipse at center,#000 50%,transparent 82%)}
  .p-accueil .c2 .ch-img,.p-accueil .c4 .ch-img{display:block}
  @supports (animation-timeline:scroll()){
    .p-accueil .chapitres{height:460svh;padding:0;view-timeline:--chap block;position:relative;margin-top:1.4rem}
    .p-accueil .textes{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:row;align-items:stretch;width:100%}
    .p-accueil .ch{flex:0 0 100vw;width:100vw;box-sizing:border-box;padding:96px var(--m) 104px;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;min-height:0;
      animation:glisse linear both;animation-timeline:--chap;animation-range:entry 100% exit 0%}
    .p-accueil .ch .plaque{order:0;padding:0}
    .p-accueil .ch-img{order:1;width:100%;max-height:40svh;aspect-ratio:auto;object-fit:cover;border-radius:16px;box-shadow:var(--pose),var(--sol);border:6px solid #fff}
    .p-accueil .ch .link{margin-top:.4rem}
    @keyframes glisse{
      0%,18%{transform:translateX(0)}
      28%,44%{transform:translateX(-100vw)}
      54%,70%{transform:translateX(-200vw)}
      80%,100%{transform:translateX(-300vw)}
    }
    .p-accueil .adherer{padding-top:3rem}
  }
}
@media(max-width:700px) and (max-height:700px){
  .p-accueil .ch{padding-top:88px}
  .p-accueil .ch-img{max-height:34svh}
  .p-accueil .ch p:not(.eyebrow){font-size:.92rem}
}

/* =====================================================================
   V15 — TÉLÉPHONE, pages intérieures au niveau de l'accueil (retour du 12/10) :
   - ouverture sous la barre (108 px), comme l'accueil ;
   - les SCÈNES des pages « récit » (Le réseau, Historique, Nos rencontres) deviennent des PANNEAUX qui glissent
     vers la gauche en descendant, numérotés 01/02/03, chacun avec son objet (fiche, chronologie, photo, bandeau),
     léger halo flou derrière le texte ; la galerie devient une bande de photos à faire défiler du pouce ;
   - les pages « outil » (Agenda, Adhérer, Espace membre, Mentions) restent verticales : cartes blanches,
     dates en vignettes, plus d'air.
   Au bureau, l'enveloppe .panneaux/.piste est transparente.
   ===================================================================== */
.panneaux,.piste{display:contents}
@media(max-width:700px){
  .fenetre.ouverture>.pg,.fenetre.ouverture.droite>.pg,.hero-f>.pg{padding-top:108px}
  .ouv-bas{margin-top:.8rem}
  /* agenda : les trois dates « à suivre » de l'ouverture font doublon avec la liste qui suit */
  .p-agenda .ouv-bas{display:none}
  .p-agenda .papier>.pg{padding-top:1.8rem}
  /* dates en vignettes dans les listes */
  .journal li{grid-template-columns:3.3rem 1fr;gap:.85rem;align-items:center;padding:.75rem 0}
  .journal .j{display:grid;place-content:center;text-align:center;line-height:1;padding:.5rem .15rem;border-radius:12px;background:linear-gradient(160deg,#ffe3a0,#f2a93b);color:var(--ink);font-size:.5rem;letter-spacing:.1em}
  .journal .j b{display:block;font-size:1.3rem;margin:0 0 .15rem}
  .journal li.passe .j{background:rgba(11,34,54,.07);color:var(--ink-soft)}
  .journal .t b{font-size:1rem;line-height:1.2}
  .journal .t small{display:block;margin-top:.15rem;font-size:.8rem;color:var(--ink-soft)}
  /* panneaux (sans défilement piloté : les scènes s'empilent, avec le halo et la numérotation) */
  .piste{counter-reset:pan}
  .panneaux .scene-txt{position:relative;isolation:isolate;padding-right:3.2rem}
  .panneaux .scene-txt::before{content:"";position:absolute;z-index:-1;inset:-1.2rem -1.6rem;pointer-events:none;
    background:rgba(255,252,244,.22);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
    -webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 82%);mask-image:radial-gradient(ellipse at center,#000 50%,transparent 82%)}
  .panneaux .scene-txt::after{counter-increment:pan;content:counter(pan,decimal-leading-zero);position:absolute;right:0;top:-.5rem;
    font:300 2.6rem/.9 var(--disp);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.6px var(--gold-deep)}
  .panneaux .fiche,.panneaux .fiche.large,.panneaux .fiche.chrono{padding:1.2rem 1.2rem 1.1rem;gap:.5rem}
  .panneaux .fiche-liste li{padding:.6rem 0}
  .panneaux .fiche-liste li span{font-size:.9rem;line-height:1.4}
  .panneaux .fiche-liste.icones .ic{width:36px;height:36px;border-radius:10px}
  .panneaux .fiche-liste.icones .ic svg{width:19px;height:19px}
  .panneaux .fiche .btn{margin-top:.3rem}
  /* galerie : bande de photos à faire défiler du pouce */
  .panneaux .galerie{display:flex;grid-template-columns:none;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    min-width:0;max-width:none;width:auto;margin:0 calc(-1 * var(--m));padding:.4rem var(--m) .6rem;scroll-padding-inline:var(--m)}
  .panneaux .galerie::-webkit-scrollbar{display:none}
  .panneaux .galerie .tirage,.panneaux .galerie .tirage:nth-child(3){display:block;flex:0 0 66%;scroll-snap-align:start;padding:6px 6px 0;margin:0}
  .panneaux .galerie .tirage img{aspect-ratio:3/4}
  .panneaux .galerie figcaption{font-size:.85rem;padding:.45rem .1rem .5rem}
  @supports (animation-timeline:scroll()){
    /* (V16 : le glissement latéral reste réservé à l'accueil ; .panneaux.glisse n'est plus utilisé, gardé en réserve) */
    .panneaux.glisse{display:block;height:350svh;position:relative;view-timeline:--pan block;margin-top:1.2rem}
    .panneaux.glisse>.piste{display:flex;flex-direction:row;align-items:stretch;position:sticky;top:0;height:100svh;overflow:hidden;width:100%}
    .panneaux.glisse .fenetre.scene{flex:0 0 100vw;width:100vw;height:100svh;min-height:0;animation:glisse3 linear both;animation-timeline:--pan;animation-range:entry 100% exit 0%}
    .panneaux.glisse .fenetre.scene>.pg,.panneaux.glisse .fenetre.scene.droite>.pg,.panneaux.glisse .fenetre.scene.centre>.pg,.panneaux.glisse .fenetre.scene.pleine>.pg{
      height:100%;box-sizing:border-box;padding:96px var(--m) 104px;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;min-height:0}
    .panneaux.glisse .fenetre.scene.centre>.pg{justify-content:center}
    .panneaux .scene-obj{min-height:0}
    @keyframes glisse3{
      0%,26%{transform:translateX(0)}
      38%,62%{transform:translateX(-100vw)}
      74%,100%{transform:translateX(-200vw)}
    }
    .panneaux+.foot{padding-top:3rem}
  }
}
@media(max-width:700px) and (max-height:700px){
  /* petits écrans : seules les cartes empilées du Réseau doivent tenir dans un écran */
  .p-reseau .panneaux .scene-txt .sous{display:none}
  .p-reseau .panneaux .scene-txt blockquote{font-size:1.7rem}
  .p-reseau .panneaux .fiche-liste li{padding:.45rem 0}
  .p-rencontres .panneaux .galerie .tirage img{aspect-ratio:1}
}
@media(max-width:700px){
  /* V15b — repères numérotés (étapes d'adhésion, formats) : pastilles dorées lisibles au lieu de chiffres en filigrane */
  .ouv-bas .etapes-r{grid-template-columns:1fr;gap:.7rem}
  .ouv-bas .formats-r{gap:.7rem .8rem}
  .ouv-bas .etapes-r>div,.ouv-bas .formats-r>div{display:grid;grid-template-columns:2.1rem 1fr;align-items:center;column-gap:.7rem;padding:0;border:0}
  .ouv-bas .etapes-r dt,.ouv-bas .formats-r dt{grid-row:auto;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
    font:800 .88rem var(--disp);letter-spacing:0;color:var(--ink);-webkit-text-stroke:0;background:linear-gradient(160deg,#ffe3a0,#f2a93b);box-shadow:0 6px 14px -8px rgba(16,48,80,.5)}
  .ouv-bas .etapes-r dd,.ouv-bas .formats-r dd{grid-row:auto;margin:0;font:600 .93rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
  .ouv-bas .etapes-r dd{font-size:.97rem}
  .hero-f>.pg{padding-inline:var(--m)}
}
@media(max-width:700px){
  /* V15c — retours téléphone (12/10, agenda) :
     1) une bande bleu pâle apparaissait en bas : le fond du conteneur du décor se découvrait quand l'image remontait.
        Hauteur de l'image rendue explicite (150 % de l'écran) et même variable dans l'animation → le bas de l'image
        s'arrête exactement au bas de l'écran ; le fond du conteneur prend la couleur du sable au cas où. */
  .ot-site:not(.p-accueil){--img-h:150vh}
  .ot-site:not(.p-accueil) .world{background:#e8dcc6}
  .ot-site:not(.p-accueil) .world img{height:var(--img-h);width:auto;min-width:100vw;object-fit:cover;object-position:50% 50%;
    left:50%;right:auto;translate:-50% 0;margin:0}
  /* 2) « Pas encore membre ? / 79 € » était écrit deux fois : la phrase au-dessus du bloc bleu nuit disparaît */
  .p-agenda .scene:has(.bandeau)>.pg>.scene-txt,.p-membre .scene:has(.bandeau)>.pg>.scene-txt{display:none}
  .p-agenda .scene:has(.bandeau)>.pg,.p-membre .scene:has(.bandeau)>.pg{padding-top:1.4rem}
}
/* 3) rendez-vous passés : barrés */
.journal li.passe .t b{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(11,34,54,.45);color:var(--ink-soft)}
.journal li.passe .t small{opacity:.75}

/* =====================================================================
   V16 — TÉLÉPHONE : une mécanique de défilement DIFFÉRENTE par page (retour du 12/10 : « pas la même chose partout »).
   Accueil : panneaux qui glissent vers la gauche (V14).
   Le réseau : CARTES QUI S'EMPILENT — chaque scène est une carte claire collée sous la barre ; la suivante monte et la
     recouvre, la précédente recule légèrement (timeline-scope : la carte recouverte écoute l'arrivée de la suivante).
   Historique : FRISE QUI SE TRACE — un fil doré se dessine le long des étapes en descendant, chaque repère s'allume
     et son contenu monte en place.
   Nos rencontres : PELLICULE — les formats apparaissent ligne après ligne, puis la galerie devient une bande de tirages
     que le défilement vertical fait avancer à l'horizontale ; le bloc d'appel ferme la page.
   Sans défilement piloté : empilement vertical normal (cartes, fil fixe, bande à faire glisser du pouce).
   ===================================================================== */
@media(max-width:700px){
  /* ---------- Le réseau : cartes empilées ---------- */
  .p-reseau .panneaux,.p-reseau .piste{display:block}
  .p-reseau .panneaux{padding:1rem 12px 0}
  .p-reseau .piste{timeline-scope:--r1,--r2,--r3;padding-bottom:26svh}
  .p-reseau .panneaux .fenetre.scene{position:sticky;top:84px;height:auto;max-height:calc(100svh - 84px - 84px);min-height:0;isolation:auto;
    background:rgba(255,252,244,.97);border:1px solid rgba(255,255,255,.9);border-radius:26px;box-shadow:0 30px 60px -30px rgba(16,48,80,.55);
    transform-origin:50% 0;overflow:hidden}
  .p-reseau .panneaux .fenetre.scene:nth-child(1){view-timeline:--r1 block}
  .p-reseau .panneaux .fenetre.scene:nth-child(2){view-timeline:--r2 block}
  .p-reseau .panneaux .fenetre.scene:nth-child(3){view-timeline:--r3 block}
  .p-reseau .panneaux .fenetre.scene>.pg,.p-reseau .panneaux .fenetre.scene.droite>.pg{box-sizing:border-box;padding:1.5rem 1.3rem 1.4rem;
    display:flex;flex-direction:column;justify-content:flex-start;gap:1.3rem;min-height:0}
  .p-reseau .panneaux .fenetre.scene+.fenetre.scene{margin-top:14svh}
  .p-reseau .panneaux .scene-txt::before{display:none}
  .p-reseau .panneaux .scene-txt::after{top:-.3rem}
  .p-reseau .panneaux .fiche,.p-reseau .panneaux .fiche.chrono{background:none;box-shadow:none;border:0;border-top:1px solid rgba(11,34,54,.14);border-radius:0;padding:1rem 0 0}
  .p-reseau .panneaux .bandeau{box-shadow:none}
  @supports (animation-timeline:scroll()){
    .p-reseau .panneaux .fenetre.scene:nth-child(1){animation:recule linear both;animation-timeline:--r2;animation-range:entry 0% entry calc(100svh - 84px)}
    .p-reseau .panneaux .fenetre.scene:nth-child(2){animation:recule linear both;animation-timeline:--r3;animation-range:entry 0% entry calc(100svh - 84px)}
    @keyframes recule{65%{opacity:1}to{transform:translateY(-16px) scale(.94);opacity:0}}
  }

  /* ---------- Historique : frise qui se trace ---------- */
  .p-histoire .panneaux,.p-histoire .piste{display:block}
  .p-histoire .panneaux{margin-top:.6rem}
  .p-histoire .piste{position:relative;padding:.6rem 0 1.2rem}
  .p-histoire .piste::before,.p-histoire .piste::after{content:"";position:absolute;left:calc(var(--m) + 7px);top:0;bottom:0;width:3px;border-radius:2px}
  .p-histoire .piste::before{background:rgba(11,34,54,.16)}
  .p-histoire .piste::after{background:linear-gradient(var(--gold),var(--gold-deep));transform-origin:50% 0;transform:scaleY(1)}
  .p-histoire .panneaux .fenetre.scene{position:relative}
  .p-histoire .panneaux .fenetre.scene>.pg,.p-histoire .panneaux .fenetre.scene.droite>.pg,.p-histoire .panneaux .fenetre.scene.centre>.pg{
    padding:2.2rem var(--m) 2.2rem calc(var(--m) + 36px);gap:1.1rem}
  .p-histoire .panneaux .fenetre.scene::before{content:"";position:absolute;z-index:1;left:calc(var(--m) + 1px);top:calc(2.2rem + 1px);width:15px;height:15px;border-radius:50%;
    background:#fff;border:3px solid rgba(11,34,54,.25);box-shadow:0 0 0 0 rgba(250,179,6,0)}
  .p-histoire .panneaux .scene-txt::before{inset:-1.2rem -1.6rem -1.2rem -1rem}
  @supports (animation-timeline:scroll()){
    .p-histoire .piste::after{animation:trace linear both;animation-timeline:view();animation-range:cover 18% cover 82%}
    @keyframes trace{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    .p-histoire .panneaux .fenetre.scene::before{animation:allume linear both;animation-timeline:view();animation-range:entry 20% entry 45%}
    @keyframes allume{to{background:var(--gold);border-color:var(--gold-deep);box-shadow:0 0 0 6px rgba(250,179,6,.28)}}
    .p-histoire .panneaux .scene-txt{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .p-histoire .panneaux .scene-obj{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes monte{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
  }

  /* ---------- Nos rencontres : pellicule ---------- */
  .p-rencontres .panneaux,.p-rencontres .piste{display:block}
  .p-rencontres .panneaux{margin-top:.4rem}
  .p-rencontres .panneaux .fenetre.scene>.pg,.p-rencontres .panneaux .fenetre.scene.droite>.pg,.p-rencontres .panneaux .fenetre.scene.pleine>.pg{padding:2.6rem var(--m) 1.2rem;gap:1.2rem}
  .p-rencontres .panneaux .galerie .tirage{rotate:var(--r)!important}
  @supports (animation-timeline:scroll()){
    .p-rencontres .panneaux .fiche-liste li{animation:monte linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
    .p-rencontres .panneaux .fenetre.scene.pleine{height:230svh;view-timeline:--ruban block}
    .p-rencontres .panneaux .fenetre.scene.pleine>.pg{position:sticky;top:0;height:100svh;box-sizing:border-box;padding:96px var(--m) 104px;
      display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
    .p-rencontres .panneaux .galerie{overflow:visible;scroll-snap-type:none;gap:16px;padding:.6rem var(--m) 1rem;animation:ruban linear both;animation-timeline:--ruban;animation-range:entry 100% exit 0%}
    .p-rencontres .panneaux .galerie .tirage{flex:0 0 70vw}
    @keyframes ruban{0%,10%{transform:none}90%,100%{transform:translateX(calc(-110vw - 80px))}}
  }
}

/* ---------- Adhérer : « Participer ou adhérer ? » (fiche comparative, contenu à valider par le bureau) ---------- */
.compare{width:min(100%,560px)}
.compare ul{list-style:none;margin:0;padding:0;width:100%;display:grid}
.compare li{display:grid;grid-template-columns:minmax(0,1fr) 5rem 5rem;align-items:center;column-gap:.5rem;padding:.6rem 0;border-bottom:1px solid rgba(11,34,54,.12);font-size:.95rem;font-weight:500;color:var(--ink)}
.compare li.tete{font:700 .64rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:.4rem 0 .6rem}
.compare li>span:nth-child(n+2){text-align:center;font-weight:800}
.compare li .adh{background:rgba(250,179,6,.16);border-radius:8px;padding:.35rem 0;align-self:stretch;display:grid;place-items:center;color:var(--ink)}
.compare li.tete .adh{color:var(--gold-deep)}
.compare .oui{color:var(--blue)}
.compare .non{color:rgba(11,34,54,.32)}
.compare .mot{font:600 .72rem/1.15 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink-soft)}
.compare .adh.mot{color:var(--ink)}
.compare .btn{margin-top:.8rem}
@media(max-width:700px){
  .compare li{grid-template-columns:minmax(0,1fr) 3.6rem 3.6rem;font-size:.92rem;padding:.55rem 0}
  .compare li.tete{font-size:.58rem;letter-spacing:.1em}
  .compare .btn{width:100%}
}

/* =====================================================================
   V17 — téléphone : stabilité quand la barre d'adresse se replie (retour du 14/10 : « le footer saute » sur Le réseau).
   Les unités vh/inset:0 suivent la hauteur visible, qui change en plein défilement : le décor fixe et ses animations
   se recalculent et la page « saute ». On cale la HAUTEUR du décor sur la plus grande hauteur d'écran (lvh), qui ne bouge pas.
   (Version corrigée le 14/10 : la première version re-décalait l'image, déjà centrée par la règle V15c → image cassée.
   Ici on ne touche ni au positionnement ni à la largeur, seulement à la hauteur.)
   ===================================================================== */
@supports (height:100lvh){
  @media(max-width:700px){
    .world{inset:0 0 auto 0;height:100lvh}
    .ot-site:not(.p-accueil){--img-h:150lvh}
    /* Bootstrap (chargé par Yapla) impose « img{height:auto!important} » : la hauteur demandée par V15c est ignorée dans Yapla.
       On fixe donc la LARGEUR qui donne la bonne hauteur (150 % de l'écran), proportions conservées. */
    .ot-site:not(.p-accueil) .world img{width:max(100vw,calc(150lvh / var(--ratio)));min-width:0}
    .p-accueil{--img-h:calc(1.0399 * 1.45 * 100lvh)}
    .p-accueil .world img{width:calc(1.45 * 100lvh)}
    @keyframes tilt{to{transform:translateY(calc(100lvh - var(--img-h)))}}
  }
}

/* V18 — pied de page téléphone (retour du 14/10) : une seule ligne pour la signature, une seule ligne pour les quatre liens
   (« Espace membre » ne descend plus en dessous). */
@media(max-width:700px){
  .foot-in{gap:1rem}
  .foot-brand{gap:.8rem}
  .foot-brand img{width:48px;height:48px}
  .foot-brand span{white-space:nowrap;font-size:.76rem}
  .foot nav{flex-wrap:nowrap;justify-content:space-between;gap:.5rem;width:100%;font-size:.8rem}
  .foot nav a{white-space:nowrap;min-height:40px}
}
@media(max-width:360px){.foot nav{font-size:.72rem;gap:.3rem}.foot-brand span{font-size:.7rem}}
@media(max-width:340px){.foot nav{font-size:.66rem;gap:.2rem}}

/* =====================================================================
   V19 — Mentions légales (14/10) : même langage que le reste du site.
   Plus de bande crème « papier » : quatre cartes blanches posées sur le décor, une carte par document (accordéon), lecture aérée.
   Le texte juridique n'est pas modifié (contenu/mentions-legales.txt, tel que fourni).
   ===================================================================== */
.p-legal .papier{background:none}
.p-legal .papier>.pg{padding-block:.5rem clamp(3rem,6vw,5rem)}
.p-legal .legal{border:0;display:grid;gap:1rem;background:none;box-shadow:none;padding:0}
.p-legal .legal details{background:#fff;border:1px solid rgba(11,34,54,.08);border-radius:20px;box-shadow:0 18px 40px -30px rgba(16,48,80,.55);padding:0 clamp(1.1rem,3vw,2rem);transition:box-shadow .25s}
.p-legal .legal details[open]{box-shadow:0 26px 54px -32px rgba(16,48,80,.6)}
.p-legal .legal summary{padding:1.3rem 0;min-height:64px;font-size:clamp(1.15rem,2vw,1.5rem)}
.p-legal .legal summary:hover{color:var(--blue)}
.p-legal .legal summary::after{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:rgba(250,179,6,.18);font-size:1.4rem;flex:none}
.p-legal .legal .corps-l{max-width:none;padding:.2rem 0 1.8rem;border-top:1px solid rgba(11,34,54,.1);column-gap:3rem}
.p-legal .legal h3{font:800 .72rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:1.6rem 0 .5rem}
.p-legal .legal p{font-size:.97rem;line-height:1.65;margin-top:.45rem;color:var(--ink)}
.p-legal .legal ul{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.3rem;color:var(--ink)}
.p-legal .legal ul li{position:relative;padding-left:1.1rem;font-size:.95rem;line-height:1.55}
.p-legal .legal ul li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:.4rem;border-radius:50%;background:var(--gold)}
.p-legal .a-completer{background:rgba(250,179,6,.22);border:1px dashed rgba(138,90,0,.5);border-radius:6px;padding:.05rem .4rem;font-size:.9em}
.p-legal .maj{display:inline-block;margin-top:1.4rem;padding:.55rem 1rem;border-radius:999px;background:rgba(255,255,255,.85);font:600 .8rem var(--sans);color:var(--ink-soft)}
@media(min-width:900px){.p-legal .legal details[open] .corps-l{columns:2}.p-legal .legal details[open] .corps-l h3{break-after:avoid}.p-legal .legal details[open] .corps-l>h3:first-child{margin-top:1.4rem}}
@media(max-width:700px){
  .p-legal .papier>.pg{max-width:none;padding:.4rem var(--m) 2.4rem;display:block}
  .p-legal .papier .legal{background:none;border:0;box-shadow:none;padding:0}
  .p-legal .legal details{border-radius:18px;padding:0 1.1rem}
  .p-legal .legal summary{padding:1.05rem 0;min-height:60px;font-size:1.12rem}
  .p-legal .legal .corps-l{padding:.1rem 0 1.4rem}
  .p-legal .papier .maj{background:rgba(255,255,255,.85);border:0;box-shadow:none;padding:.5rem .9rem;font-size:.78rem;border-radius:999px}
}

/* V19b — mentions légales : la grille des cartes s'élargissait à la largeur de l'adresse e-mail (texte insécable) → cartes
   décalées à droite sur téléphone. Colonne bornée à la largeur de l'écran, et les adresses peuvent passer à la ligne. */
.p-legal .legal{grid-template-columns:minmax(0,1fr)}
.p-legal .legal details,.p-legal .legal .corps-l{min-width:0}
.p-legal .legal a,.p-legal .legal p{overflow-wrap:anywhere}

/* crédit discret en bas du pied de page : même gouttière que le pied, aligné à droite comme le dernier lien */
.foot-credit{max-width:1240px;margin:1.6rem auto 0;padding-top:1rem;border-top:1px solid rgba(23,50,74,.1);text-align:right;font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);opacity:.7}
@media(max-width:760px){.foot-credit{text-align:left;margin-top:1.2rem;padding-top:.9rem}}
.foot-credit{display:flex;justify-content:flex-end;align-items:center;gap:.6em}
.foot-credit a{display:inline-flex;color:inherit;transition:color .3s}
.foot-credit svg{display:block;height:30px;width:auto}
.foot-credit a:hover,.foot-credit a:focus-visible{color:#F2A200;opacity:1}
@media(max-width:760px){.foot-credit{justify-content:flex-start}}

.ot-site{font-family:var(--sans);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;background:none;overflow:visible;width:100vw;margin-left:calc(50% - 50vw);position:relative}
/* =====================================================================
   MODULES YAPLA habillés dans le langage de la maquette (14/10/2026) :
   espace adhérent (.zone-member) et événements (.zone-event : liste, détail, inscription).
   Ces pages sont générées par Yapla : on ne peut agir que par le CSS. Feuille destinée au CSS global de production
   (Personnalisation > Avancée), testée d'abord par injection dans le navigateur sur les pages réelles.
   Prérequis : les variables et polices de site.css (--ink, --blue, --gold, --disp, --sans, --serif, --pose, --sol).
   ===================================================================== */
:root{--ym-card:#fff;--ym-line:rgba(11,34,54,.12);--ym-soft:#4a6070;--ym-radius:18px;--ym-shadow:0 14px 34px -26px rgba(16,48,80,.5)}

/* ---------- socle commun aux deux modules ---------- */
.zone-member,.zone-event{font-family:var(--sans);color:var(--ink);font-size:1rem;line-height:1.6;max-width:1120px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) var(--m,24px) clamp(3rem,6vw,5rem);box-sizing:border-box}
.zone-member *,.zone-event *{box-sizing:border-box}
:is(.zone-member,.zone-event) :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4){font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;color:var(--ink);text-transform:none;margin:0}
:is(.zone-member,.zone-event) h1{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.035em;margin-bottom:.4em}
:is(.zone-member,.zone-event) h2{font-size:clamp(1.35rem,2.2vw,1.8rem)}
:is(.zone-member,.zone-event) p{margin:0 0 .6rem;font-weight:400}
:is(.zone-member,.zone-event) a{color:var(--blue);text-decoration:none}
:is(.zone-member,.zone-event) hr{border:0;border-top:1px solid var(--ym-line);margin:1rem 0}

/* boutons Yapla (.btn, .v-btn, input[type=submit]) → nos deux boutons */
:is(.zone-member,.zone-event) :is(.btn,.v-btn,button,input[type=submit],input[type=button]){display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.8rem 1.4rem;border:0;border-radius:8px;
  font:700 .95rem/1.2 var(--sans);text-transform:none;letter-spacing:0;text-decoration:none;cursor:pointer;background:var(--ink);color:#fff;box-shadow:0 14px 28px -14px rgba(11,34,54,.6);transition:transform .25s,background .25s;margin:0;max-width:none;min-width:0;width:auto}
:is(.zone-member,.zone-event) :is(.btn,.v-btn,button):hover{transform:translateY(-2px);background:var(--blue)}
:is(.zone-member,.zone-event) :is(.btn-primary,.btn-success,input[type=submit]){background:linear-gradient(180deg,#ffc65c,#f2a93b);color:var(--ink);box-shadow:var(--pose),0 14px 30px -12px rgba(242,169,59,.9)}
:is(.zone-member,.zone-event) :is(.btn-primary,.btn-success,input[type=submit]):hover{background:linear-gradient(180deg,#ffd27a,#f2a93b)}
:is(.zone-member,.zone-event) :is(.btn-default,.btn-secondary,.btn-link,.btn-outline){background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(11,34,54,.25)}
:is(.zone-member,.zone-event) :is(.btn-default,.btn-secondary):hover{background:rgba(11,34,54,.06);transform:none}

/* formulaires */
:is(.zone-member,.zone-event) .form-group{margin:0 0 1rem}
:is(.zone-member,.zone-event) .control-label{display:block;width:auto;float:none;text-align:left;padding:0 0 .35rem;font:700 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ym-soft)}
:is(.zone-member,.zone-event) .control-label--required{color:var(--gold-deep)}
:is(.zone-member,.zone-event) :is(.col-md-12,.col-md-6,.col-md-18){width:auto;float:none;padding:0}
:is(.zone-member,.zone-event) :is(.form-control,select,textarea,input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number]){display:block;width:100%;min-height:48px;padding:.7rem .95rem;border:1.5px solid var(--ym-line);border-radius:10px;background:#fff;color:var(--ink);font:500 1rem var(--sans);box-shadow:none;transition:border-color .2s,box-shadow .2s}
:is(.zone-member,.zone-event) :is(.form-control,select,textarea,input):focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(13,97,147,.12)}
:is(.zone-member,.zone-event) .section-title{font-size:1.1rem;letter-spacing:.02em;margin:1.6rem 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--ym-line)}
:is(.zone-member,.zone-event) .section:first-child .section-title{margin-top:.4rem}
:is(.zone-member,.zone-event) .checkbox label,:is(.zone-member,.zone-event) .radio label{font-weight:500;text-transform:none;letter-spacing:0;font-size:.95rem}

/* cartes et pastilles d'état */
:is(.zone-member,.zone-event) :is(.v-card,.card,.panel){background:var(--ym-card);border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);margin:0 0 1rem}
:is(.zone-member,.zone-event) :is(.card-body,.panel-body){padding:1.3rem 1.4rem}
:is(.zone-member,.zone-event) .pill{display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:999px;font:700 .72rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:rgba(11,34,54,.08);color:var(--ink)}
:is(.zone-member,.zone-event) .pill.green{background:rgba(46,160,90,.14);color:#1d7a43}
:is(.zone-member,.zone-event) .pill.orange,:is(.zone-member,.zone-event) .pill.yellow{background:rgba(250,179,6,.2);color:#8a5a00}
:is(.zone-member,.zone-event) .pill.red{background:rgba(200,40,40,.12);color:#9a2222}

/* tableaux (transactions, factures) */
:is(.zone-member,.zone-event) table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--ym-radius);overflow:hidden;box-shadow:var(--ym-shadow);border:1px solid rgba(11,34,54,.08)}
:is(.zone-member,.zone-event) :is(th,td){padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--ym-line);font-size:.95rem}
:is(.zone-member,.zone-event) th{font:700 .7rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ym-soft);background:rgba(11,34,54,.03)}
:is(.zone-member,.zone-event) tr:last-child td{border-bottom:0}

/* ---------- espace adhérent : menu latéral + contenu ---------- */
.zone-member>.row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start;margin:0}
.zone-member .sidebar__member-zone,.zone-member .content.member{width:auto;float:none;padding:0}
.zone-member .member-sidebar__inner{position:sticky;top:96px;background:var(--ym-card);border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);padding:1.3rem 1.1rem 1rem}
.zone-member .member-sidebar__member-header{margin:0 .3rem 1rem;padding:0}
.zone-member .member-sidebar__member-header__title{display:flex;align-items:center;gap:.8rem;font:700 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ym-soft);margin:0}
.zone-member .member-sidebar__member-header__title::before{content:"";display:block;width:32px;height:2px;background:var(--gold)}
.zone-member .member-sidebar__menu{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.zone-member .member-sidebar__menu li{margin:0;padding:0;border:0;background:none}
.zone-member .member-sidebar__menu a.menu-item,.zone-member .member-sidebar__member-footer a.menu-item{display:flex;align-items:center;min-height:42px;padding:.5rem .85rem;border-radius:10px;font:600 .95rem/1.2 var(--sans);color:var(--ink);text-transform:none;letter-spacing:0;background:none;box-shadow:none;transition:background .2s}
.zone-member .member-sidebar__menu a.menu-item:hover{background:rgba(11,34,54,.06)}
.zone-member .member-sidebar__menu li.active a.menu-item{background:var(--ink);color:#fff}
.zone-member .member-sidebar__member-footer{margin:.9rem .3rem 0;padding:.9rem 0 0;border-top:1px solid var(--ym-line)}
.zone-member .member-sidebar__member-footer a.menu-item{color:var(--ym-soft);font-size:.88rem}
.zone-member .content.member h1{margin-bottom:.6rem}
.zone-member .heading-container{margin-bottom:1.2rem}
.zone-member .heading-container .subtitle{color:var(--ym-soft);font-size:1rem}
.zone-member .registrations{display:grid;gap:1rem}
.zone-member .card-body .date{font:700 .72rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .35rem}
.zone-member .card-body .title{font:700 1.25rem/1.15 var(--disp);letter-spacing:-.02em;margin:0 0 .8rem}
.zone-member .card-body .details{display:flex;align-items:center;gap:1rem;color:var(--ym-soft);font-size:.9rem}
.zone-member .card-body .details .users{display:inline-flex;align-items:center;gap:.4rem}
.zone-member .form-create{background:var(--ym-card);border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);padding:1.4rem 1.6rem 1.6rem}

/* ---------- événements : liste (mosaïque) ---------- */
.zone-event .event_list_filter{background:var(--ym-card);border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);padding:1rem 1.2rem .4rem;margin:0 0 1.6rem}
.zone-event .event_list_filter .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0}
.zone-event .event_list_filter :is(.col-sm-12,.col-md-6,.col-md-12){width:auto;float:none;padding:0}
.zone-event .events-mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.4rem;margin:0}
.zone-event .events-mosaic>.row{display:contents}
.zone-event .events-mosaic [class*=col-sm]{width:auto;float:none;padding:0}
.zone-event .events-mosaic .item{background:var(--ym-card);border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);padding:1.4rem 1.5rem 1.5rem;height:100%;display:flex;flex-direction:column}
.zone-event .events-mosaic .item h3{font-size:1.35rem;margin:0 0 .5rem;order:2}
.zone-event .events-mosaic .item .e-date{order:1;font:700 .72rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 .5rem}
.zone-event .events-mosaic .item .e-date a{color:inherit}
.zone-event .events-mosaic .item hr{order:3;margin:.6rem 0}
.zone-event .events-mosaic .item .address{order:4;color:var(--ym-soft);font-size:.92rem;flex:1}
.zone-event .events-mosaic .item .actions{order:5;margin:1rem 0 0;display:flex;gap:.6rem;flex-wrap:wrap}
.zone-event .events-mosaic .item .actions .btn-default{background:var(--ink);color:#fff;box-shadow:0 14px 28px -14px rgba(11,34,54,.6)}

/* ---------- événements : détail ---------- */
.zone-event .event-jumbotron__top{background:var(--ym-card);border:1px solid rgba(11,34,54,.08);border-radius:22px;box-shadow:var(--ym-shadow);padding:clamp(1.6rem,3vw,2.6rem) clamp(1.4rem,3vw,2.6rem);margin:0 0 2rem}
.zone-event .event-jumbotron__title{font-size:clamp(2rem,4.2vw,3.4rem);margin:0 0 .6rem}
.zone-event .event-jumbotron__date{font:700 .8rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 1rem}
.zone-event .calendar-link-content .v-btn{min-height:42px;padding:.55rem 1rem;font-size:.85rem;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(11,34,54,.25)}
.zone-event .event-jumbotron__top h3,.zone-event .event-jumbotron__top .h3{font:700 .72rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ym-soft);margin:1.4rem 0 .3rem}
.zone-event .event-detail__row-image-description{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;margin:0}
.zone-event .event-detail__col-image-description{width:auto;float:none;padding:0}
.zone-event .event-detail__image-wrapper img{width:100%;height:auto;border-radius:16px;box-shadow:var(--pose),var(--sol)}
.zone-event .event-detail__description-wrapper{background:var(--ym-card);border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);padding:1.5rem 1.6rem}
.zone-event .event-detail__actions-wrapper{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--ym-line)}
.zone-event .event-detail__nav{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- téléphone ---------- */
@media(max-width:860px){
  .zone-member>.row{grid-template-columns:1fr}
  .zone-member .member-sidebar__inner{position:static;padding:1rem .9rem}
  .zone-member .member-sidebar__menu{display:flex;flex-wrap:wrap;gap:.4rem}
  .zone-member .member-sidebar__menu a.menu-item{min-height:38px;padding:.4rem .8rem;font-size:.88rem;background:rgba(11,34,54,.06)}
  .zone-member .member-sidebar__member-footer{margin-top:.8rem}
  .zone-event .event-detail__row-image-description{grid-template-columns:1fr}
  .zone-event .event_list_filter .row{grid-template-columns:1fr}
}

/* ---------- correctifs après test par injection (14/10) ---------- */
/* les ::before/::after de clearfix Bootstrap occupent une case des grilles */
.zone-member>.row::before,.zone-member>.row::after,.zone-event .events-mosaic>.row::before,.zone-event .events-mosaic>.row::after,
.zone-event .event-detail__row-image-description::before,.zone-event .event-detail__row-image-description::after,
.zone-event .event_list_filter .row::before,.zone-event .event_list_filter .row::after,.zone-member .form-create .row::before,.zone-member .form-create .row::after{display:none}
/* formulaires : deux colonnes propres */
.zone-member .form-create .row,.zone-event .form-create .row,.zone-event form .row{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;margin:0}
:is(.zone-member,.zone-event) :is(.col-sm-12,.col-sm-24,.col-md-24,.col-xs-12){width:auto;float:none;padding:0;min-height:0}
:is(.zone-member,.zone-event) :is(form,.form-create) :is(.col-sm-24,.col-md-24){grid-column:1/-1}
.zone-member .member-sidebar__member-footer{background:none}
.zone-member .member-sidebar__menu li.active a.menu-item{box-shadow:0 10px 24px -14px rgba(11,34,54,.6)}
@media(max-width:700px){.zone-member .form-create .row,.zone-event form .row{grid-template-columns:1fr}}

/* homonymes avec la maquette : .date (grand disque doré d'une ancienne scène) et .card ; fond gris des v-card Yapla */
.zone-member .v-card .date,.zone-event .v-card .date{display:block;width:auto;aspect-ratio:auto;border-radius:0;background:none;box-shadow:none;text-align:left;place-items:unset}
:is(.zone-member,.zone-event) .v-card.card{background:#fff}
/* liste d'événements : « Places restantes » et autres paragraphes sans classe, en bas de carte */
.zone-event .events-mosaic .item>p:not([class]){order:4;margin:.2rem 0 0;font:700 .78rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
.zone-event .events-mosaic .item .address br+br{display:none}
.zone-member .v-card,.zone-member .current-membership,.zone-event .v-card{background:#fff!important}
.zone-member .current-membership{border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);padding:1.3rem 1.4rem}

/* module posé seul dans la zone principale : colonne centrée (Bootstrap la flotte à gauche), titre du module masqué */
.zone-member,.zone-event{float:none;width:100%;margin-left:auto;margin-right:auto}
.zone-event>h1:first-child,.zone-event>h2:first-child{display:none}
.zone-member>h1:first-child,.zone-member>h2:first-child{display:none}

/* ---------- tunnel d'adhésion / d'inscription (form-withProgress) ---------- */
:is(.zone-member,.zone-event) .nav-progress{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;list-style:none;margin:0 0 1.4rem;padding:0;border:0;background:none}
:is(.zone-member,.zone-event) .nav-progress>li{margin:0;padding:0;border:0;background:none;float:none;display:block}
:is(.zone-member,.zone-event) .nav-progress>li>a{display:inline-flex;align-items:center;gap:.5rem;padding:0;background:none;border:0;border-radius:0;font:700 .72rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ym-soft);box-shadow:none}
:is(.zone-member,.zone-event) .nav-progress>li.active>a{color:var(--ink)}
:is(.zone-member,.zone-event) .nav-progress>li>a::after{display:none}
:is(.zone-member,.zone-event) .form-withProgress__wrapper{background:#fff!important;border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);padding:1.4rem 1.6rem 1.6rem;margin:0 0 1.2rem}
:is(.zone-member,.zone-event) .form-withProgress__wrapper fieldset{border:0;padding:0;margin:0}
:is(.zone-member,.zone-event) .form-withProgress__wrapper h2{font-size:1.2rem;margin:0 0 .9rem;padding:0}
:is(.zone-member,.zone-event) .alert{border:0;border-radius:12px;padding:.9rem 1.1rem;font-size:.95rem;margin:0 0 1.2rem;background:rgba(250,179,6,.16);color:var(--ink)}
:is(.zone-member,.zone-event) .list-group{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.7rem}
:is(.zone-member,.zone-event) .list-group-item{margin:0;padding:1rem 1.2rem;border:1.5px solid var(--ym-line);border-radius:12px;background:#fff;font-size:.97rem;transition:border-color .2s,box-shadow .2s}
:is(.zone-member,.zone-event) .list-group-item:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 4px rgba(13,97,147,.1)}
:is(.zone-member,.zone-event) .list-group-item input[type=radio],:is(.zone-member,.zone-event) input[type=checkbox]{accent-color:var(--blue);min-height:0;width:auto;box-shadow:none}
.zone-member #registration-m,.zone-member [id^=registration-m]{margin:0}
.zone-member [id^=registration-m]>h1{margin-bottom:1rem}

/* numéros de l'assistant : ceux de Yapla (li::before), aux couleurs du site, une seule ligne */
:is(.zone-member,.zone-event) .nav-progress{flex-wrap:nowrap;gap:0;justify-content:space-between}
:is(.zone-member,.zone-event) .nav-progress>li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
:is(.zone-member,.zone-event) .nav-progress>li::before{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:rgba(11,34,54,.12);color:var(--ym-soft);font:800 .85rem/1 var(--disp);letter-spacing:0;flex:none}
:is(.zone-member,.zone-event) .nav-progress>li.active::before{background:var(--ink);color:#fff}
:is(.zone-member,.zone-event) .nav-progress>li::after{top:.9rem;left:2.2rem;width:auto;right:.3rem;height:2px;background:rgba(11,34,54,.12)}
:is(.zone-member,.zone-event) .nav-progress>li:last-child::after{display:none}
:is(.zone-member,.zone-event) .nav-progress>li>a{font-size:.6rem;letter-spacing:.1em;max-width:100%}
@media(max-width:700px){:is(.zone-member,.zone-event) .nav-progress>li>a{font-size:.52rem;letter-spacing:.06em}}

/* ---------- Vie associative et ressources (statuts, règlement intérieur) : accordéons en cartes ---------- */
.zone-news{font-family:var(--sans);color:var(--ink);max-width:1120px;margin:0 auto;padding:clamp(1rem,3vw,2rem) var(--m,24px) clamp(3rem,6vw,5rem);float:none;width:100%;box-sizing:border-box}
.zone-news>h2{font:700 .72rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ym-soft);margin:0 0 1.2rem;display:flex;align-items:center;gap:1rem}
.zone-news>h2::before{content:"";display:block;width:48px;height:2px;background:var(--gold);flex:none}
.zone-news .news-accordion-panel-group{display:grid;gap:1rem;margin:0}
.zone-news .panel-news-accordion{background:#fff;border:1px solid rgba(11,34,54,.08);border-radius:var(--ym-radius);box-shadow:var(--ym-shadow);overflow:hidden;margin:0}
.zone-news .panel-news-accordion .panel-heading{background:none;border:0;padding:1.3rem 1.5rem;position:relative}
.zone-news .panel-title{font:700 clamp(1.1rem,2vw,1.4rem)/1.2 var(--disp);letter-spacing:-.02em;margin:0;text-transform:none}
.zone-news .panel-title a,.zone-news a.news-accordion-header{color:var(--ink);text-decoration:none;display:block;padding-right:2.6rem;font:inherit;text-transform:none}
.zone-news a.news-accordion-header::after{content:"+";position:absolute;right:1.5rem;top:1.2rem;font:300 1.9rem/1 var(--sans);color:var(--gold-deep);transition:transform .25s}
.zone-news a.news-accordion-header:not(.collapsed)::after{transform:rotate(45deg)}
.zone-news .news-accordion-intro,.zone-news .panel-heading p{margin:.45rem 0 0;font-size:.92rem;color:var(--ym-soft);font-weight:500}
.zone-news .panel-heading p:empty{display:none}
.zone-news .panel-body{padding:0 1.5rem 1.5rem;border:0}
.zone-news .odt-statuts,.zone-news .news-accordion-content{max-width:none!important;font-family:var(--sans)!important;color:var(--ink)!important;font-size:.97rem;line-height:1.65}
.zone-news :is(.odt-statuts-header,.odt-intro){background:none!important;border:0!important;padding:0!important;margin:0 0 1rem!important;color:var(--ym-soft)!important}
.zone-news .odt-statuts-header h3,.zone-news .odt-statuts h3{font:700 1.1rem var(--disp)!important;text-transform:none!important;color:var(--ink)!important}
.zone-news details{border-top:1px solid var(--ym-line);padding:.85rem 0;margin:0;background:none!important}
.zone-news details summary{cursor:pointer;font:700 1rem/1.3 var(--sans);color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.zone-news details summary::-webkit-details-marker{display:none}
.zone-news details summary::after{content:"+";font:300 1.5rem/1 var(--sans);color:var(--gold-deep);flex:none}
.zone-news details[open] summary::after{content:"–"}
.zone-news details p,.zone-news details li{margin:.5rem 0 0;font-size:.95rem}
.zone-news h3,.zone-news h4{text-transform:none}

/* ---------- V20 (27/10) — correctifs du tunnel d'inscription aux événements ---------- */
/* La modale « Informations du participant » (Bootstrap, z-index 9999) était enfermée dans les zones à z-index:1 :
   le voile gris (1040) passait au-dessus et empêchait de saisir. Les zones ne créent plus de contexte d'empilement. */
.site-inner .line-main:has(.zone-member,.zone-event),.site-inner .line-main:has(.zone-news),.zone-member,.zone-event{z-index:auto!important}
/* pied de boutons du tunnel : deux boutons nets, espacés, un seul bouton principal */
:is(.zone-member,.zone-event) .form-withProgress__navigation-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.2rem;margin-top:1.4rem}
/* « Devenir membre » / « Précédent » : bouton secondaire lisible (Yapla leur mettait un texte bleu sur fond bleu nuit) */
:is(.zone-member,.zone-event) .btn.btn-link{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px rgba(11,34,54,.4)!important;white-space:nowrap}
:is(.zone-member,.zone-event) .btn.btn-link:hover{background:rgba(11,34,54,.07)!important;color:var(--ink)!important;transform:none}
/* « S'inscrire » (ajout d'un participant) : bouton principal, assez large pour son texte */
:is(.zone-member,.zone-event) .btn.btn-add{background:linear-gradient(180deg,#ffc65c,#f2a93b)!important;color:var(--ink)!important;box-shadow:var(--pose),0 14px 30px -12px rgba(242,169,59,.9)!important;width:auto!important;min-width:max-content!important;flex:none;white-space:nowrap;gap:.6rem}
:is(.zone-member,.zone-event) .btn.btn-add :is(.fa,i){display:inline-block;width:auto;color:inherit!important;font-size:1rem;line-height:1}
:is(.zone-member,.zone-event) .btn.btn-add :is(first,second){display:inline;color:inherit}
:is(.zone-member,.zone-event) .btn.btn-add second{display:none}
/* « Suivant » verrouillé tant qu'aucun participant n'est ajouté : grisé mais lisible */
:is(.zone-member,.zone-event) .btn.lock{opacity:.5!important;box-shadow:none!important;cursor:not-allowed}
/* fenêtre « Informations du participant » */
.modal .modal-content{border:0;border-radius:var(--ym-radius,14px);box-shadow:0 30px 80px -20px rgba(11,34,54,.55)}
.modal .close,.modal .close-modal-cms{min-height:0!important;width:40px!important;height:40px;padding:0!important;border-radius:50%!important;background:var(--ink)!important;color:#fff!important;box-shadow:none!important;opacity:1;font-size:1.3rem}
@media (max-width:700px){
  :is(.zone-member,.zone-event) .form-withProgress__navigation-footer{flex-direction:column-reverse;align-items:stretch}
  :is(.zone-member,.zone-event) .form-withProgress__navigation-footer .btn{width:100%!important;min-width:0!important;justify-content:center;white-space:normal;text-align:center}
}
/* V20b — champs du participant : le clearfix de Yapla (.row::before/::after) occupait une case de la grille et décalait les champs en escalier */
:is(.zone-member,.zone-event) .section>.row::before,:is(.zone-member,.zone-event) .section>.row::after,.modal .section>.row::before,.modal .section>.row::after{content:none!important;display:none!important}
:is(.zone-member,.zone-event) .btn.btn-add{padding:.8rem 1.4rem!important}

/* ---------- V21 (27/10) — page de détail d'un événement : « S'inscrire » en haut à droite du titre, « Retour » seul en bas à gauche ---------- */
.zone-event .content.event-detail{position:relative}
@media (min-width:701px){
  /* « S'inscrire » et « Retour » sont dans le même bloc : on sort seulement le bouton principal, posé sur la carte du titre */
  /* carte du titre équilibrée (plus de marge sous le titre) et bouton centré sur la ligne du titre : 2.6rem de marge + (55px de titre − 48px de bouton) / 2 */
  .zone-event .event-detail__nav__cta>.btn-primary{position:absolute;top:calc(2.6rem + 3.5px);right:2.6rem;z-index:2}
  .zone-event .event-jumbotron__title{padding-right:12rem;margin-bottom:0!important}
  .zone-event .event-jumbotron__contact-wrapper:not(:has(*)){display:none}
}
@media (max-width:700px){
  /* téléphone : les boutons deviennent des enfants directs de la page, on les range : titre, S'inscrire, contenu, Retour */
  .zone-event .content.event-detail{display:flex;flex-direction:column}
  .zone-event .event-detail__actions-wrapper,.zone-event .event-detail__nav,.zone-event .event-detail__nav__cta{display:contents}
  .zone-event .event-jumbotron__top{order:0}
  .zone-event .event-detail__nav__cta>.btn-primary{order:1;margin:1rem 0;width:100%}
  .zone-event .event-detail__row-image-description{order:2}
  .zone-event .event-detail__description-additional{order:3}
  .zone-event .event-detail__nav__cta>.btn-back{order:5;margin-top:1rem;align-self:flex-start}
}

/* ---------- V22 (27/10) — barre du haut : « Adhérer » ne doit plus être un bouton jaune ---------- */
/* L'ancien CSS (V4) colorait en jaune tout lien vers /espace-membres : depuis que la page Adhérer a repris cette adresse,
   le lien du menu devenait une pastille plus haute que les autres. On neutralise dans la barre et on centre les liens. */
.site-inner .ot-site .topbar>nav a[href*="espace-membres"]{background:none!important;color:var(--ink-soft)!important;padding:0!important;border-radius:0!important;font-weight:600!important}
.site-inner .ot-site .topbar>nav a[href*="espace-membres"]:hover{color:var(--blue)!important}
.ot-site .topbar>nav{align-items:center}

/* ---------- V23 (27/10) — barre d'étapes sur téléphone : les cinq libellés se chevauchaient ("IDENTIFICATION" sur "INSCRIPTION") ---------- */
@media(max-width:700px){
  :is(.zone-member,.zone-event) .nav-progress{margin-top:1.2rem}
  /* seul le libellé de l'étape en cours reste visible (les autres sont masqués visuellement, pas pour les lecteurs d'écran) */
  :is(.zone-member,.zone-event) .nav-progress>li:not(.active)>a{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :is(.zone-member,.zone-event) .nav-progress>li.active>a{white-space:nowrap;font-size:.68rem;letter-spacing:.1em;color:var(--ink)}
  :is(.zone-member,.zone-event) .nav-progress>li:last-child{align-items:flex-end}
}

/* ---------- V24 (27/10) — pas de bandeau « prochain rendez-vous » fixe pendant un parcours d'inscription ou d'adhésion ---------- */
body:has(.nav-progress) .ot-site .dock{display:none!important}

/* ---------- V25 (27/10) — menu téléphone plus lisible : navigation, puis Adhérer / Espace membre côte à côte, puis le bouton d'inscription ---------- */
@media(max-width:700px){
  .ot-site .topbar .menu-panel{grid-template-columns:1fr 1fr;gap:0 .6rem;padding:.3rem 1rem 1rem}
  /* les cinq pages du site : lignes pleine largeur, séparateur fin, flèche à droite */
  .ot-site .topbar .menu-panel a:not(.btn){grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:.95rem .15rem;border-radius:0;border-bottom:1px solid rgba(11,34,54,.1);font-size:1.05rem;font-weight:700;line-height:1.2;color:var(--ink)}
  .ot-site .topbar .menu-panel a:not(.btn)::after{content:"\203A";color:var(--gold-deep,#c88a1f);font-size:1.5rem;font-weight:400;line-height:1}
  .ot-site .topbar .menu-panel a:not(.btn):nth-child(5){border-bottom:0}
  /* Adhérer (plein) et Espace membre (contour) : deux actions côte à côte */
  .ot-site .topbar .menu-panel a:not(.btn):nth-child(n+6){grid-column:auto;justify-content:center;margin-top:.7rem;padding:.9rem .5rem;min-height:52px;border:1.5px solid var(--ink);border-radius:12px;font-size:.98rem;text-align:center}
  .ot-site .topbar .menu-panel a:not(.btn):nth-child(n+6)::after{content:none}
  .ot-site .topbar .menu-panel a:not(.btn):nth-child(6){background:var(--ink);color:#fff}
  .ot-site .topbar .menu-panel a:not(.btn):nth-child(7){background:transparent;color:var(--ink)}
  /* bouton d'inscription : en bas, pleine largeur */
  .ot-site .topbar .menu-panel .btn{grid-column:1/-1;margin-top:.8rem;min-height:56px;justify-content:center}
}

/* ---------- V26 (27/10) — encadré covoiturage : voiture avant le titre. Yapla supprime les émoticônes (caractères sur 4 octets) à l'enregistrement d'une description : on l'ajoute ici par CSS (code échappé, donc ASCII) ---------- */
.zone-event .event-detail div[style*="#fff4d6"]>p:first-child::before{content:"\1F697\00a0"}

/* Règles propres aux pages de maquette dans Yapla (chargées après site.css dans site-yapla.css).
   Principe (13/10) : neutraliser l'habillage Yapla SANS écraser la maquette. Yapla stylise les balises nues (p, h1, li, a, img…)
   avec une spécificité (0,0,1) ; on les remet à zéro au MÊME niveau via :where(), placé après → nos remises à zéro gagnent sur
   Yapla et perdent face à toute règle de classe de la maquette. Seules les classes que Yapla possède aussi (.btn) sont réaffirmées. */

/* ---- structure : masquer l'habillage Yapla, libérer la zone principale ---- */
body:is(.pageid-442864,.pageid-442413,.pageid-442867,.pageid-442868,.pageid-442866,.pageid-442869,.pageid-442870,.pageid-442871) :is(.line-header,.line-menu,.line-main,.line-footer,.poweredBy-wrapper){display:none!important}
.site-inner .line-main:has(.ot-site){display:block!important}
.site-inner .line-main:has(.ot-site) h2:not(.ot-site *){display:none!important}
#site-wrapper,.site-inner,.site-inner .line,.site_line__item,.site-inner .line>*,.site-inner .line>*>*,
.site-inner .line-main:has(.ot-site) .zone-html,.site-inner .line-main:has(.ot-site) .content{background:transparent!important;max-width:none!important;width:100%!important;padding:0!important;margin:0!important;box-shadow:none!important}
.ot-site{width:auto;margin-left:0;overflow-x:clip}
/* html a déjà un fond dans Yapla : un fond sur body se peindrait au-dessus du décor fixe (z-index -1) */
html{background:var(--cream)!important;font-size:16px!important}
body{margin:0;background:transparent!important}
body,.ot-site{font-size:1rem}

/* ---- balises nues : même niveau que Yapla (0,0,1), après lui ---- */
:where(.site-inner .ot-site) :is(h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure,figcaption,blockquote,details,summary,section,article,aside,header,footer,nav){margin:0;padding:0;border:0}
:where(.site-inner .ot-site) :is(h1,h2,h3,h4){font-family:var(--disp);font-weight:700;letter-spacing:-.035em;line-height:.98;color:var(--ink);text-transform:none;font-size:inherit;text-align:inherit}
:where(.site-inner .ot-site) :is(p,li,blockquote,figcaption){text-align:inherit}
:where(.site-inner .ot-site) p{line-height:inherit;font-size:inherit}
:where(.site-inner .ot-site) :is(ul,ol){list-style:none}
:where(.site-inner .ot-site) a{text-decoration:none;color:inherit}
:where(.site-inner .ot-site) img{display:block;max-width:100%;height:auto;margin:0;border:0}
:where(.site-inner .ot-site) em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em;color:var(--blue)}
:where(.site-inner .ot-site) :is(b,strong){font-weight:700}
:where(.site-inner .ot-site) :is(h1,h2,h3,h4,p,li) span{display:inline}

/* ---- classes homonymes de Bootstrap (chargé par Yapla) : .lead et .btn ---- */
:where(.ot-site) .lead{margin-bottom:0;line-height:inherit}  /* (0,1,0) : bat le .lead de Bootstrap, laisse la maquette régler le reste */
/* ---- Yapla possède sa propre classe .btn (majuscules, bordures, largeur, marges) : réaffirmer la nôtre, variantes comprises ---- */
.site-inner .ot-site .btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;width:auto;min-width:0;max-width:none;margin:0;padding:.95rem 1.5rem;border:0;border-radius:8px;
  font:700 .95rem/1.6 var(--sans);text-transform:none;letter-spacing:0;text-decoration:none;box-shadow:none;transition:transform .25s,box-shadow .25s,filter .25s}
.site-inner .ot-site .btn-gold{background:linear-gradient(180deg,#ffc65c,#f2a93b);color:var(--ink);box-shadow:var(--pose),0 14px 30px -12px rgba(242,169,59,.9)}
.site-inner .ot-site .btn-ink{background:var(--ink);color:#fff;box-shadow:0 14px 28px -14px rgba(11,34,54,.7)}
.site-inner .ot-site .btn-ink:hover{background:var(--blue)}
.site-inner .ot-site .btn:hover{transform:translateY(-2px)}
.site-inner .ot-site .topbar .btn{padding:.65rem 1.1rem;font-size:.84rem}
.site-inner .ot-site .btn.gros{padding:1.15rem 1.5rem;font-size:1.05rem}
.site-inner .ot-site .carte .btn,.site-inner .ot-site .bandeau .btn,.site-inner .ot-site .billet.vertical .souche.droite .btn,.site-inner .ot-site .compare .btn{width:100%}
.site-inner .ot-site .fiche .btn{width:auto}

/* ---- HTML modifié par l'éditeur Yapla ---- */
/* <span> vides supprimés : trait jaune des sur-titres tracé en CSS ; hamburger tracé en CSS */
.site-inner .ot-site .eyebrow::before{content:"";display:block;width:48px;height:2px;background:var(--gold);flex:none}
.site-inner .ot-site .eyebrow>span{display:none}
.site-inner .ot-site .scene.droite .scene-txt .eyebrow{flex-direction:row-reverse}
/* <dl> vidés de leurs <div>/<dt>/<dd> : rangées de repères converties en <ul><li><b>/<span> par build-yapla-pages.py */
.ot-site ul.chiffres{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.ot-site ul.chiffres>li{padding:0 clamp(1.2rem,2.6vw,2.4rem);border-left:1px solid rgba(11,34,54,.22);display:grid;gap:.3rem;list-style:none}
.ot-site ul.chiffres>li:first-child{border-left:0;padding-left:0}
.ot-site ul.chiffres b{font:700 clamp(1.5rem,2.6vw,2.2rem)/1 var(--disp);letter-spacing:-.04em;color:var(--blue)}
.ot-site ul.chiffres span{font:700 .66rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);max-width:16ch}
.ot-site ul.formats-r b,.ot-site ul.etapes-r b{color:var(--gold-deep);font-weight:300;font-size:clamp(1.4rem,2.2vw,1.9rem)}
.ot-site ul.dates-r b{font-size:clamp(1.2rem,2vw,1.6rem)}
.ot-site ul.dates-r span{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600;color:var(--ink-soft);max-width:none}
.p-accueil ul.chiffres>li{padding:0 clamp(1rem,2.4vw,2rem)}
/* le <details> du menu téléphone est réaffiché par Yapla sur bureau */
@media(min-width:701px){.site-inner .ot-site .menu,.site-inner .ot-site .dock{display:none!important}}
@media(max-width:700px){
  .site-inner .ot-site .menu summary{display:grid;place-items:center;width:46px;height:46px}
  .site-inner .ot-site .menu summary::before{content:"";display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
  .site-inner .ot-site .menu[open] summary::before{box-shadow:none;transform:rotate(45deg)}
  .site-inner .ot-site .topbar>.btn{display:none}
  .ot-site ul.chiffres>li{border-left:0;padding:0}
}
/* téléphone : pastilles numérotées (étapes, formats) et repères, version <ul><li><b>/<span> (V15b de la maquette vise dt/dd) */
@media(max-width:700px){
  .ot-site ul.chiffres{justify-content:space-between;gap:.5rem}
  .ot-site ul.chiffres b{font-size:1.2rem}
  .ot-site ul.chiffres span{font-size:.56rem;letter-spacing:.1em;max-width:none}
  .ot-site ul.etapes-r{display:grid;grid-template-columns:1fr;gap:.7rem}
  .ot-site ul.formats-r{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .8rem}
  .ot-site ul.etapes-r>li,.ot-site ul.formats-r>li{display:grid;grid-template-columns:2.1rem 1fr;align-items:center;column-gap:.7rem;padding:0;border:0}
  .ot-site ul.etapes-r b,.ot-site ul.formats-r b{width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;font:800 .88rem var(--disp);letter-spacing:0;color:var(--ink);background:linear-gradient(160deg,#ffe3a0,#f2a93b);box-shadow:0 6px 14px -8px rgba(16,48,80,.5)}
  .ot-site ul.etapes-r span,.ot-site ul.formats-r span{font:600 .93rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
  .ot-site ul.etapes-r span{font-size:.97rem}
  .p-agenda .ot-site ul.dates-r,.ot-site.p-agenda ul.dates-r{display:none}
}
/* la règle de secours .chiffres:not(:has(div)) (repères sans <div>) impose 3 colonnes aux pastilles : on la bat sur téléphone */
@media(max-width:700px){
  .site-inner .ot-site .ouv-bas ul.etapes-r{display:grid;grid-auto-flow:row;grid-template-columns:1fr;gap:.7rem;padding:0;background:none}
  .site-inner .ot-site .ouv-bas ul.formats-r{display:grid;grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:.7rem .8rem;padding:0;background:none}
  .site-inner .ot-site .ouv-bas ul.etapes-r>li,.site-inner .ot-site .ouv-bas ul.formats-r>li{grid-row:auto;grid-column:auto}
  .site-inner .ot-site .ouv-bas ul.etapes-r b,.site-inner .ot-site .ouv-bas ul.formats-r b,.site-inner .ot-site .ouv-bas ul.etapes-r span,.site-inner .ot-site .ouv-bas ul.formats-r span{grid-row:auto}
}

/* ---- pages scindées (14/10) : bloc « haut » dans la zone Banner, vrai module Yapla (Espace connecté / Espace événements) dans MainArea,
   bloc « bas » (pied de page) dans la zone footer ---- */
.site-inner .line-banner:has(.ot-site),.site-inner .line-footer:has(.ot-site),.site-inner .line-main:has(.zone-member,.zone-event){display:block!important}
.site-inner .line-main:has(.zone-member,.zone-event){position:relative;z-index:1}
.site-inner :is(.line-banner,.line-footer):has(.ot-site) h2:not(.ot-site *){display:none!important}
.site-inner :is(.line-banner,.line-footer):has(.ot-site) :is(.zone-html,.content){padding:0!important;margin:0!important;width:100%!important;max-width:none!important}
.ot-site.scindee main{padding-bottom:0}
.ot-site.scindee .fenetre.ouverture>.pg{min-height:0;padding-bottom:1rem}
.ot-site.scindee.bas{position:static}
/* le module Yapla posé sous l'ouverture : même largeur que la page, sur le décor */
.site-inner .line-main:has(.zone-member,.zone-event){background:transparent!important}
.zone-member,.zone-event{position:relative;z-index:1}
/* détail d'événement : l'ouverture « Les prochaines rencontres » et son billet ne s'affichent que sur la liste */
.site-inner:has(.event-jumbotron__top) .line-banner .fenetre.ouverture{display:none}
.site-inner:has(.event-jumbotron__top) .line-banner .ot-site.scindee main{min-height:96px}
/* détail d'un événement sous une page scindée : l'ouverture de la liste (« Les prochaines rencontres » + billet) est masquée */
.site-inner:has(.event-jumbotron__top) .ot-site.scindee .fenetre.ouverture{display:none}
.site-inner:has(.event-jumbotron__top) .ot-site.scindee main{min-height:100px}
/* pages qui accueillent un module Yapla (espace adhérent, agenda) : décor FIXE, sans glissement ni fondu au défilement
   (retour du 14/10 : « l'arrière-plan qui bouge est très embêtant » une fois connecté) */
.site-inner .ot-site.scindee .world img{animation:none!important;transform:translateY(-22%)!important}
.site-inner .ot-site.scindee .veil{animation:none!important;opacity:.45!important}
.site-inner .ot-site.scindee .wash{animation:none!important;opacity:.5!important}
/* « Vie associative et ressources » (module Articles multiples hérité de la page maîtresse) : réaffichée sous l'espace adhérent */
/* uniquement sur les pages qui portent le module adhérent (Espace membre, Adhérer) : ailleurs, le contenu hérité de la page maîtresse reste masqué */
.site-inner:has(.zone-member) .line-main:has(.zone-news){display:block!important;position:relative;z-index:1;background:transparent!important}

/* quelle que soit la zone qui porte le bloc (ligne principale, bannière, zone ajoutée) : la colonne Yapla (padding 15 px) ne doit pas rétrécir la maquette */
.site-inner :is(.zone-html,.zone-100):has(> .content > .ot-site){padding-left:0!important;padding-right:0!important}
.site-inner .content:has(> .ot-site){padding:0!important;margin:0!important;max-width:none!important;width:100%!important}


/* ---------- V27 (27/10) — page de détail d'un événement : pas de bandeau « prochain rendez-vous » (il renvoyait sur la même page) ; téléphone : « S'inscrire » en bas, bien visible ---------- */
body:has(.event-detail) .ot-site .dock,body:has(.event-detail) .dock{display:none!important}
@media (max-width:700px){
  .zone-event .event-detail__nav__cta>.btn-primary{order:4;margin:1.4rem 0 .4rem;min-height:56px;font-size:1.1rem;display:flex;align-items:center;justify-content:center}
}


/* ---------- V28 (27/10) — « S'inscrire » de la page d'un événement : contour doré qui pulse, bien visible mais sobre ---------- */
@keyframes ot-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(242,162,0,.65),0 0 0 3px rgba(242,162,0,.9),0 8px 22px rgba(11,34,54,.18)}
  50%{box-shadow:0 0 0 12px rgba(242,162,0,0),0 0 0 3px rgba(242,162,0,.35),0 8px 22px rgba(11,34,54,.18)}
}
.zone-event .event-detail__nav__cta>.btn-primary{outline:2px solid rgba(255,255,255,.9);outline-offset:-5px;animation:ot-pulse 1.8s ease-in-out infinite}
.zone-event .event-detail__nav__cta>.btn-primary:hover,.zone-event .event-detail__nav__cta>.btn-primary:focus{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.zone-event .event-detail__nav__cta>.btn-primary{animation:none;box-shadow:0 0 0 3px rgba(242,162,0,.9)}}


/* ---------- V29 (27/10) — inscription et détail d'un événement : on retire le grand bloc d'ouverture de l'Agenda (carte « prochain rendez-vous » + titre) pour que le formulaire arrive tout de suite sous la barre ---------- */
body:has(.nav-progress,.event-detail) .ot-site.p-agenda>main{display:none!important}
body:has(.nav-progress,.event-detail) .ot-site.p-agenda{min-height:0!important}
body:has(.nav-progress,.event-detail) .zone-event{padding-top:92px!important}


/* ---------- V30 (27/10) — téléphone : le bandeau fixe « prochain rendez-vous » s'efface quand le pied de page entre à l'écran (il restait grisé par-dessus) ---------- */
@media (max-width:700px){
  @supports (animation-timeline:view()){
    .ot-site{timeline-scope:--foot}
    .ot-site .foot{view-timeline:--foot block}
    .ot-site .dock{animation-name:dockin,dockout;animation-duration:1ms,1ms;animation-timing-function:linear,linear;animation-fill-mode:both,both;animation-timeline:scroll(root),--foot;animation-range:540px 760px,entry 0% entry 35%}
    .ot-site.p-accueil .dock{animation-range:700px 900px,entry 0% entry 35%}
    @keyframes dockout{to{opacity:0;pointer-events:none;translate:0 26px}}
  }
}


/* ---------- V31 (27/10) — page Agenda : pas de bandeau fixe du bas (la carte et la liste ont déjà leurs boutons) ---------- */
.ot-site.p-agenda .dock{display:none!important}


/* ---------- V32 (27/10) — appui sur un lien / bouton : plus de cadre pointillé ni de soulignement (focus Bootstrap par défaut) ; retour discret au toucher, anneau doré fin au clavier seulement ---------- */
.ot-site a,.ot-site button,.ot-site summary{-webkit-tap-highlight-color:transparent}
.ot-site :is(a,button,summary):is(:focus,:active,:hover):not(.brand){outline:none!important;text-decoration:none!important}
.ot-site :is(a,button,summary):is(:focus,:active) *{text-decoration:none!important}
.ot-site :is(a,button,summary):focus-visible{outline:2px solid rgba(242,162,0,.9)!important;outline-offset:3px;border-radius:12px}
.ot-site :is(a,button,summary):focus:not(:focus-visible){outline:none!important}
.ot-site .menu-panel nav a,.ot-site .menu-panel>a{transition:background-color .18s ease,color .18s ease}
.ot-site .menu-panel a:not(.btn):active,.ot-site .menu-panel a:not(.btn):focus{background:rgba(242,169,59,.16);border-radius:12px}
.ot-site .btn{transition:transform .15s ease,filter .15s ease,box-shadow .2s ease}
.ot-site .btn:active{transform:scale(.97);filter:brightness(.97)}


/* V33 (27/10) - mobile : Realise par Lockpit plus petit et centre */
@media (max-width:760px){
.ot-site .foot-credit{justify-content:center!important;text-align:center!important;font-size:.64rem!important;gap:.5em!important}
.ot-site .foot-credit svg{height:20px!important}
}