/* =========================================================
   EK — site.css · DS EK v1.3 « Nuit canard » · mise en page « carnet »
   Principes : pages qui se superposent au scroll (sticky), tranche à onglets
   des 5 univers, titres géants, blocs décalés, une seule police.
   — Cody, Assistant Tech IA d'Esy Kennenga
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-weight:var(--w-text);background:var(--bg);color:var(--txt);line-height:1.55;overflow-x:hidden;font-optical-sizing:auto}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ek-jaune);color:var(--ek-noir)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-4)}
h1,h2,h3,h4,.display{font-weight:var(--w-display);letter-spacing:var(--tracking-display);line-height:.98}
strong,b{font-weight:var(--w-strong)}
.kicker{display:inline-block;font-size:.72rem;letter-spacing:var(--tracking-kicker);text-transform:uppercase;font-weight:var(--w-strong);color:var(--primary)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Sections canard ---------- */
.alt{--bg:var(--alt-bg);--bg-2:var(--alt-bg-2);--txt:var(--alt-txt);--txt-2:var(--alt-txt-2);--txt-3:rgba(217,234,231,.6);--ligne:var(--alt-ligne);background:var(--bg);color:var(--txt)}
.alt .kicker{color:var(--ek-jaune)}

/* ---------- Coquille : logo + tranche à onglets ---------- */
.brand{position:fixed;left:22px;top:11px;z-index:60;display:block}  /* logo qui alterne : bloc « 1. Logo » en fin de fichier */
.rail{position:fixed;right:0;top:0;bottom:0;width:var(--rail);z-index:60;display:flex;flex-direction:column;background:var(--ek-noir);border-left:1px solid var(--ligne)}
.rail a{flex:1;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:var(--w-display);font-size:.98rem;letter-spacing:.06em;color:var(--ek-blanc);border-bottom:1px solid var(--ligne);background:var(--ek-noir-2);transition:background var(--ease),color var(--ease)}
.rail a:last-child{border-bottom:0}
.rail a.on{background:var(--ek-jaune);color:var(--ek-noir)}
.rail a:hover{background:var(--ek-canard);color:var(--ek-blanc)}
.rail a.soon{color:rgba(255,255,255,.38)}
.rail a.soon:hover{background:var(--ek-noir-2);color:var(--ek-sable)}
.rail a.soon::after{content:"bientôt";font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;margin-top:10px;opacity:.7}
.rail .go{flex:0 0 var(--rail);writing-mode:horizontal-tb;transform:none;background:var(--ek-jaune);color:var(--ek-noir);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.2;padding:8px 6px}
.rail .go:hover{background:var(--ek-jaune-h);color:var(--ek-noir)}
main{padding-right:var(--rail)}
.burger{display:none;position:fixed;right:16px;top:16px;z-index:70;background:var(--ek-jaune);color:var(--ek-noir);border:0;width:48px;height:48px;font-size:1.3rem;font-weight:700;cursor:pointer;font-family:inherit}

/* ---------- Sous-navigation univers Musique (horizontale, collante) ---------- */
.subnav{position:sticky;top:0;z-index:40;background:rgba(18,18,18,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.subnav .wrap{display:flex;gap:4px;align-items:center;padding:12px var(--sp-4);overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav .lbl{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ek-sable);margin-right:14px;white-space:nowrap;padding-left:96px}
.subnav a{padding:8px 14px;font-size:.84rem;font-weight:var(--w-strong);white-space:nowrap;border:1px solid transparent;transition:background var(--ease),color var(--ease)}
.subnav a:hover{border-color:var(--ligne)}
.subnav a.on{background:var(--ek-jaune);color:var(--ek-noir)}
.subnav .cta{margin-left:auto;background:var(--ek-canard);color:var(--ek-blanc)}
.subnav .cta:hover{background:var(--ek-canard-d)}

/* ---------- Boutons / tags ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--primary);color:var(--on-primary);font-weight:var(--w-strong);letter-spacing:.05em;padding:14px 24px;text-transform:uppercase;font-size:.78rem;border:0;cursor:pointer;font-family:inherit;transition:transform var(--ease),background var(--ease)}
.btn:hover{background:var(--primary-h);transform:translate(-2px,-2px)}  /* 14/09/2026 : plus d'ombre portée au survol (charte) */
.btn-ghost{background:transparent;color:var(--txt);border:1.5px solid var(--txt)}
.btn-ghost:hover{background:var(--txt);color:var(--bg)}
.btn-sm{padding:9px 14px;font-size:.7rem}
.tag,.tag-live{display:inline-block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;font-weight:var(--w-strong);background:var(--ek-jaune);color:var(--ek-noir)}
.territoire{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-left:12px}

/* ---------- Carnet : pages qui se superposent au scroll ---------- */
.book{position:relative}
.page{position:sticky;top:var(--tete);min-height:calc(100vh - var(--tete));min-height:calc(100svh - var(--tete));display:flex;flex-direction:column;justify-content:center;padding:64px 0 56px;overflow:hidden;background:var(--bg);isolation:isolate}
/* 15/09/2026 : la page colle SOUS l'en-tête (--tete, mesurée par site.js) au lieu de passer dessous ; plus d'ombre portée (charte) */
/* chaque page passe DEVANT la précédente (fond opaque + z-index croissant) */
.book .page:nth-child(1){z-index:1}.book .page:nth-child(2){z-index:2}.book .page:nth-child(3){z-index:3}.book .page:nth-child(4){z-index:4}.book .page:nth-child(5){z-index:5}.book .page:nth-child(6){z-index:6}.book .page:nth-child(7){z-index:7}
.page.tall{position:relative}
.page .wrap{width:100%}
.page-n{position:absolute;left:var(--sp-4);top:26px;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-3);font-weight:var(--w-strong)}
.page-n b{color:var(--ek-jaune);font-size:1rem;margin-right:10px}
.page .fold{position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:0 84px 84px 0;border-color:transparent var(--ek-jaune) transparent transparent}
.page.alt .fold{border-color:transparent var(--ek-noir) transparent transparent}

/* ---------- Couverture (15/09/2026 : bande canard, voir « ÉTAPES 3 et 4 ») ---------- */
.marquee{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--ligne);background:var(--ek-noir);overflow:hidden;white-space:nowrap;padding:12px 0}
.marquee span{display:inline-block;padding-right:48px;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ek-sable);animation:mq 32s linear infinite}
.marquee span b{color:var(--ek-jaune);font-weight:var(--w-strong)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.scroll-hint{position:absolute;left:var(--sp-4);bottom:64px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-3)}

/* ---------- Titres de page géants ---------- */
.giant{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-bottom:var(--sp-4)}
.giant h2,.giant h1{font-size:clamp(2.4rem,6vw,5rem);letter-spacing:-.045em;line-height:.9}
.giant .side{max-width:420px;color:var(--txt-2);font-size:1rem;padding-bottom:10px}
.giant .more{margin-left:auto;padding-bottom:12px}

.loading{color:var(--txt-3);padding:20px 0}

/* ---------- EK TV ---------- */
.grid-vid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.vid{grid-column:span 3;display:block;background:var(--bg-2);transition:transform var(--ease)}
.vid:nth-child(1){grid-column:span 6;grid-row:span 2}
.vid:hover{transform:translate(-4px,-4px);outline:3px solid var(--ek-jaune);outline-offset:-3px}  /* 15/09/2026 : liseré au lieu de l'ombre */
.vid .thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vid .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.vid .thumb::after{content:"▶";position:absolute;left:12px;bottom:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--ek-jaune);color:var(--ek-noir);font-size:.8rem}
.vid .t{padding:12px 14px 4px;font-size:.92rem;font-weight:var(--w-strong);line-height:1.3}
.vid .dt{padding:0 14px 14px;font-size:.72rem;letter-spacing:.06em;color:var(--txt-3)}

/* ---------- Actus : grille décalée ---------- */
.actus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.acard{display:flex;flex-direction:column;background:var(--bg-2);transition:transform var(--ease)}
.acard:nth-child(3n+2){transform:translateY(34px)}
.acard:hover{transform:translate(-4px,-4px)!important;outline:3px solid var(--ek-jaune);outline-offset:-3px}  /* 15/09/2026 : liseré au lieu de l'ombre */
.acard .cover{aspect-ratio:4/3;background:var(--ek-canard-x);position:relative;overflow:hidden}
.acard .cover img{width:100%;height:100%;object-fit:cover}
.acard .badge{position:absolute;left:0;top:0;background:var(--ek-jaune);color:var(--ek-noir);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;font-weight:var(--w-strong)}
.acard .body{padding:18px 18px 22px;flex:1}
.acard .body h3{font-size:1.25rem;margin-bottom:8px}
.acard .body .dt{color:var(--txt-3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Teasers (boutique / dons / actus) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{position:relative;padding:30px 26px 26px;background:var(--bg-2);display:flex;flex-direction:column;gap:10px;min-height:240px}
.tcard::before{content:attr(data-n);position:absolute;right:20px;top:14px;font-size:3.4rem;font-weight:var(--w-display);letter-spacing:-.05em;color:rgba(255,255,255,.08)}
.tcard h3{font-size:1.9rem;letter-spacing:-.03em}
.tcard p{color:var(--txt-2);flex:1}
.tcard .btn{align-self:flex-start}
.tcard.hi{background:var(--ek-jaune);color:var(--ek-noir)}
.tcard.hi p{color:rgba(18,18,18,.75)}
.tcard.hi .btn{background:var(--ek-noir);color:var(--ek-blanc)}
.tcard.hi::before{color:rgba(18,18,18,.1)}

/* ---------- Contact / newsletter ---------- */
.contact .inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.contact h3{font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:14px}
.contact p{color:var(--txt-2);margin-bottom:14px}
.contact .mail{font-size:clamp(1.1rem,2.6vw,1.6rem);font-weight:var(--w-strong);color:var(--ek-jaune);border-bottom:2px solid var(--ek-jaune)}
.nl-form{display:flex;gap:0;flex-wrap:wrap;margin-top:8px}
.nl-form input{flex:1;min-width:220px;background:var(--bg-2);border:1.5px solid var(--ligne);color:var(--txt);padding:14px 16px;font-family:inherit;font-size:.95rem}
.nl-form input:focus{outline:none;border-color:var(--ek-jaune)}
.nl-note{font-size:.75rem;color:var(--txt-3);margin-top:10px}

/* ---------- Sous-pages : en-tête ---------- */
.page-hero{padding:calc(var(--sp-6) + 20px) 0 var(--sp-4);position:relative}
.page-hero .kicker{margin-bottom:12px}
.page-hero h1{font-size:clamp(3rem,9vw,7.5rem);letter-spacing:-.045em;line-height:.9}
.page-hero h1 .c{color:var(--ek-jaune)}
.page-hero p{color:var(--txt-2);max-width:560px;margin-top:18px;font-size:1.05rem}
section{padding:var(--sp-5) 0}
.sec-title{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.04em;margin-bottom:6px}
.sec-title .c{color:var(--ek-jaune)}
.sec-sub{color:var(--txt-2);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.sec-more{margin-top:var(--sp-4)}

/* ---------- Univers (bio) ---------- */
.uni-lead{font-size:clamp(1.4rem,3.4vw,2.4rem);font-weight:var(--w-display);letter-spacing:-.03em;line-height:1.1;max-width:900px;margin-bottom:var(--sp-4)}
.uni-quote{font-size:clamp(3rem,10vw,8rem);font-weight:var(--w-display);letter-spacing:-.05em;line-height:.9;color:var(--ek-jaune);margin:var(--sp-4) 0 8px}
.uni-prose p{color:var(--txt-2);max-width:720px;margin-bottom:18px;font-size:1.05rem}
.uni-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:var(--sp-4)}
.uni-card{padding:26px 22px;background:var(--bg-2);min-height:200px;display:flex;flex-direction:column;justify-content:space-between}
.uni-card h3{font-size:1.5rem;letter-spacing:-.03em}
.uni-card p{color:var(--txt-2);font-size:.9rem;margin-top:14px}
.univers .inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:center}
.univers .visual img{outline:3px solid var(--ek-jaune);outline-offset:10px;aspect-ratio:4/5;object-fit:cover}

/* ---------- Article ---------- */
.article{max-width:760px}
.article .meta{color:var(--txt-3);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.article .cover{margin-bottom:var(--sp-4)}
.article .cover img{width:100%;max-height:520px;object-fit:cover;outline:3px solid var(--ek-jaune);outline-offset:8px}
.article p{color:var(--txt-2);margin-bottom:18px;font-size:1.05rem}
.article h2,.article h3,.article h4{color:var(--txt);margin:32px 0 12px}
.article h2{font-size:1.9rem}.article h3{font-size:1.5rem}.article h4{font-size:1.2rem}
.article a{color:var(--ek-jaune);border-bottom:1px solid var(--ek-jaune)}
.article hr{border:0;border-top:1px solid var(--ligne);margin:30px 0}
.article figure{margin:26px 0}
.article .yt{position:relative;aspect-ratio:16/9;margin:26px 0;background:#000}
.article .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article .back{margin-top:var(--sp-4)}

/* ---------- Dons ---------- */
.don-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:960px}
.don-btn{display:flex;flex-direction:column;gap:6px;padding:30px 22px;background:var(--bg-2);transition:transform var(--ease)}
.don-btn:hover{background:var(--ek-jaune);color:var(--ek-noir);transform:translate(-4px,-4px)}
.don-btn .n{font-size:3rem;font-weight:var(--w-display);letter-spacing:-.05em;line-height:1}
.don-btn .l{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.don-note{color:var(--txt-2);font-size:.9rem;max-width:640px;margin-top:22px}
.don-note a{color:var(--ek-jaune);border-bottom:1px solid var(--ek-jaune)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1000px}
.why-card{padding:28px 26px;background:var(--bg-2)}
.why-card h3{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:10px}
.why-card p{color:var(--txt-2);font-size:.95rem}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--ligne);padding:var(--sp-4) 0;background:var(--ek-noir)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .soc{display:flex;gap:22px}
footer .soc a{color:var(--ek-jaune);letter-spacing:.14em;font-size:.74rem;text-transform:uppercase;font-weight:var(--w-strong)}
footer small{color:var(--txt-3);font-size:.76rem;line-height:1.7}
footer small a{color:var(--txt-2)}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .cover .grid{grid-template-columns:1fr}
  .cover .visual{justify-self:start;width:min(100%,380px);margin-top:20px}
  .actus-grid,.cards{grid-template-columns:1fr 1fr}
  .acard:nth-child(3n+2){transform:none}
  .uni-grid{grid-template-columns:1fr 1fr}
  .don-grid{grid-template-columns:1fr 1fr}
  .vid,.vid:nth-child(1){grid-column:span 6}
}
@media(max-width:720px){
  :root{--rail:0px}
  main{padding-right:0}
  .rail{display:none}
  .rail.open{display:flex;left:0;width:100%;flex-direction:column;background:var(--ek-noir);z-index:65;padding-top:80px}
  .rail.open a{writing-mode:horizontal-tb;transform:none;flex:0 0 auto;padding:22px 26px;font-size:1.6rem;justify-content:flex-start}
  .rail.open a.soon::after{margin:0 0 0 12px}
  .rail.open .go{margin-top:auto;padding:20px}
  .burger{display:flex!important;align-items:center;justify-content:center}
  .brand{top:12px;left:14px}
  .subnav .lbl{display:none}
  /* En-tête téléphone (14/09/2026) : rangée 1 = logo + ☰ (56 px) ; rangée 2 = menu du haut qui défile sur toute la largeur, jamais sous le bouton */
  .subnav{padding-top:56px}
  .subnav .wrap{padding:0 var(--sp-3) 8px;gap:2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .subnav .wrap::after{content:"";flex:0 0 24px}
  .subnav a{padding:8px 12px;font-size:.82rem;line-height:20px}
  .subnav .cta{margin-left:6px}
  .burger{top:6px;right:12px;width:44px;height:44px}
  .marquee span{animation-duration:22s}
  .page{padding:52px 0 var(--sp-5)}
  .actus-grid,.cards,.contact .inner,.univers .inner,.why-grid,.uni-grid,.don-grid{grid-template-columns:1fr}
  .vid,.vid:nth-child(1){grid-column:span 12}
  .wrap{padding:0 var(--sp-3)}
  .page-n{left:var(--sp-3)}
  .cover .visual::before{display:none}
}

/* ---------- Photos (studio GEA) ---------- */
.page-hero.with-photo .wrap{display:grid;grid-template-columns:1fr minmax(240px,340px);gap:var(--sp-5);align-items:end}
.hero-photo{position:relative;margin:0;justify-self:end;width:100%}
.hero-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;outline:3px solid var(--ek-jaune);outline-offset:10px;transform:rotate(2deg)}
.hero-photo::before{content:"";position:absolute;left:-28px;bottom:-28px;width:120px;height:120px;background:var(--ek-canard);z-index:0}
.hero-photo img{position:relative;z-index:1}
.sticker{position:absolute;margin:0;right:calc(var(--sp-4) + 40px);top:70px;width:min(24vw,300px);z-index:2;pointer-events:none}
.sticker img{width:100%;aspect-ratio:4/5;object-fit:cover;outline:3px solid var(--ek-jaune);outline-offset:8px}
.sticker.r1{transform:rotate(3deg)}.sticker.r2{transform:rotate(-4deg);top:auto;bottom:70px}.sticker.r3{transform:rotate(2deg);right:calc(var(--sp-4) + 60px);top:80px}
.sticker.nb img{filter:grayscale(1) contrast(1.05)}
.page.alt .sticker img{outline-color:var(--ek-jaune)}
.page .sticker ~ .wrap .giant{padding-right:min(26vw,330px)}
.page .sticker ~ .wrap .next{padding-right:min(26vw,330px)}
.contact .sticker ~ .wrap.inner{padding-right:min(26vw,330px)}
.page .sticker ~ .wrap .cards{padding-right:min(26vw,330px)}
.univers .visual img{filter:none}
@media(max-width:980px){.sticker{width:180px;top:auto;bottom:24px;right:24px;opacity:.9}.page .sticker ~ .wrap .giant,.page .sticker ~ .wrap .next,.page .sticker ~ .wrap .cards,.contact .sticker ~ .wrap.inner{padding-right:0}}
@media(max-width:720px){.page-hero.with-photo .wrap{grid-template-columns:1fr}.hero-photo{width:min(100%,260px);justify-self:start;margin-top:10px}.sticker{display:none}}

/* =========================================================
   MONTAGES PHOTO — découpes GEA + formes géométriques
   Validés par Esy le 10/09/2026 (couverture = variante A).
   Tout est à l'échelle du conteneur (cqw) : une seule règle
   par montage, du mobile au grand écran. Le texte reste du
   vrai texte (SEO + lecture d'écran), jamais de l'image.
   — Cody, Assistant Tech IA d'Esy Kennenga
   ========================================================= */
.mtg{position:relative;container-type:inline-size;aspect-ratio:1000/1250;overflow:hidden;isolation:isolate;width:100%}
.mtg.wide{aspect-ratio:1000/760}
.mtg>*{position:absolute}
.mtg img.subj{display:block;height:auto;z-index:2}  /* height:auto obligatoire : l'attribut height du HTML ferait sinon loi */
.mtg h1,.mtg h2{margin:0;font-weight:800;letter-spacing:-.04em;line-height:.86}

/* 07 — Boutique (bandeau large) */
.m-boutique{background:var(--ek-canard)}
.m-boutique .subj{right:8cqw;bottom:-4%;width:50cqw}
.m-boutique h1,.m-boutique h2{left:6.4cqw;top:13.7%;font-size:10.6cqw;color:var(--ek-jaune);line-height:.9;z-index:3}
.m-boutique h2 b{display:block;font-weight:800}
.m-boutique p{left:6.4cqw;top:55%;font-size:2.6cqw;color:var(--ek-sable);font-weight:600;max-width:42cqw;line-height:1.45;z-index:3;margin:0}
.m-boutique .cta{left:6.4cqw;bottom:11.5%;z-index:3}

/* --- intégration dans la page 04 du carnet (15/09/2026 : mtg-hero, cover-mtg, next-mtg retirés) --- */
.band-mtg{margin:clamp(16px,2.6vw,28px) auto 0}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:820px){ .cards.two{grid-template-columns:1fr} }
@media (max-width:720px){ .mtg.wide{aspect-ratio:1000/1100} }

/* =========================================================
   FONDATIONS v2 (14/09/2026, plan dessiné et validé par Esy)
   1. Logo : ЭK et « Solda Lanmou » alternent (retournement 3D)
   2. Glissement latéral entre les pages (View Transitions entre documents)
   3. Bande héros pleine largeur (.bande), réutilisable par toutes les pages
   4. Page /agenda : héros « date sélectionnée » + filtres + tiroirs
   Charte : une police, aucune ombre, relief par formes géométriques.
   Cody, Assistant Tech IA d'Esy Kennenga
   ========================================================= */
[hidden]{display:none!important}  /* .btn (inline-flex) écrasait l'attribut hidden */
html.menu-ouvert{overflow:hidden}

/* ---------- 1. Logo qui alterne ---------- */
.brand{perspective:700px}
.brand .flip{position:relative;display:block;width:72px;height:41px;transform-style:preserve-3d;animation:ek-flip 9s cubic-bezier(.65,0,.35,1) infinite;animation-delay:var(--flip-delay,0s)}
.brand .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.brand .face-logo img{display:block;width:100%;height:auto}
.brand .face-mot{transform:rotateY(180deg);text-align:center;font-weight:800;font-size:.98rem;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;color:var(--ek-jaune)}
.brand:focus-visible{outline:3px solid var(--ek-jaune);outline-offset:4px}
/* 9 s par cycle : chaque face reste 3,6 s puis se retourne en 0,9 s (une face toutes les 4,5 s) */
@keyframes ek-flip{0%,40%{transform:rotateY(0deg)}50%,90%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes ek-fondu{0%,30%{opacity:1}50%,80%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .brand .flip{animation:none;transform:none}
  .brand .face{backface-visibility:visible;-webkit-backface-visibility:visible;animation:ek-fondu 9s ease-in-out infinite;animation-delay:var(--flip-delay,0s)}
  .brand .face-mot{transform:none;animation-delay:calc(var(--flip-delay,0s) - 4.5s)}
}
@media(max-width:720px){
  .brand .flip{width:56px;height:32px}
  .brand .face-mot{font-size:.78rem}
}

/* ---------- 2. Glissement latéral entre les pages ----------
   Le sens est posé par le script #ek-vt du <head> (html[data-vt]) d'après l'ordre du menu.
   L'en-tête, le menu du haut et la tranche restent fixes (view-transition-name). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.brand{view-transition-name:ek-brand}
.burger{view-transition-name:ek-burger}
.rail{view-transition-name:ek-rail}
.subnav{view-transition-name:ek-subnav}
::view-transition-group(root){animation-duration:.62s}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.62s;animation-timing-function:cubic-bezier(.77,0,.18,1);animation-fill-mode:both}
html[data-vt="avance"]::view-transition-old(root){animation-name:ek-vt-sort-g}
html[data-vt="avance"]::view-transition-new(root){animation-name:ek-vt-entre-d}
html[data-vt="recule"]::view-transition-old(root){animation-name:ek-vt-sort-d;z-index:2}
html[data-vt="recule"]::view-transition-new(root){animation-name:ek-vt-entre-g;z-index:1}
@keyframes ek-vt-sort-g{to{transform:translateX(-28%)}}
@keyframes ek-vt-entre-d{from{transform:translateX(100%)}}
@keyframes ek-vt-sort-d{to{transform:translateX(100%)}}
@keyframes ek-vt-entre-g{from{transform:translateX(-28%)}}

/* ---------- 3. Bande héros ----------
   <section class="bande bande--{canard|sable|jaune|noir} bande--photo-{gauche|droite} bande--{s|m|l} [bande--haut]">
     .bande-in > figure.bande-photo (formes .bf-* + découpe) + .bande-corps (contenu)
   Générée par bande_hero() dans build_site.py. */
.bande{
  --bande-bg:var(--ek-sable);--bande-txt:var(--ek-noir);--bande-txt-2:rgba(18,18,18,.74);
  --bf-disque:var(--ek-canard);--bf-anneau:var(--ek-noir);--bf-socle:var(--ek-noir);--bf-carre:var(--ek-jaune);
  --bande-photo:clamp(180px,24vw,330px);
  position:relative;padding:0;overflow:hidden;isolation:isolate;background:var(--bande-bg);color:var(--bande-txt);
  --bg:var(--bande-bg);--bg-2:rgba(18,18,18,.08);--txt:var(--bande-txt);--txt-2:var(--bande-txt-2);--txt-3:var(--bande-txt-2);--ligne:rgba(18,18,18,.2);
  --primary:var(--ek-noir);--primary-h:#000;--on-primary:var(--ek-jaune)}
.bande--canard{--bande-bg:var(--ek-canard);--bande-txt:var(--ek-blanc);--bande-txt-2:#D9EAE7;--bf-disque:var(--ek-jaune);--bf-anneau:var(--ek-sable);--bf-socle:var(--ek-noir);--bf-carre:var(--ek-sable);--bg-2:rgba(255,255,255,.08);--ligne:rgba(255,255,255,.24);--primary:var(--ek-jaune);--primary-h:var(--ek-jaune-h);--on-primary:var(--ek-noir)}
.bande--jaune{--bande-bg:var(--ek-jaune);--bande-txt:var(--ek-noir);--bande-txt-2:rgba(18,18,18,.76);--bf-disque:var(--ek-canard);--bf-anneau:var(--ek-noir);--bf-socle:var(--ek-noir);--bf-carre:var(--ek-blanc)}
.bande--noir{--bande-bg:var(--ek-noir);--bande-txt:var(--ek-blanc);--bande-txt-2:var(--ek-sable);--bf-disque:var(--ek-canard);--bf-anneau:var(--ek-jaune);--bf-socle:var(--ek-jaune);--bf-carre:var(--ek-sable);--bg-2:var(--ek-noir-2);--ligne:rgba(255,255,255,.16);--primary:var(--ek-jaune);--primary-h:var(--ek-jaune-h);--on-primary:var(--ek-noir)}
.bande--s{--bande-photo:clamp(130px,16vw,220px)}
.bande--m{--bande-photo:clamp(180px,24vw,330px)}
.bande--l{--bande-photo:clamp(220px,34vw,470px)}
.bande-in{position:relative;display:grid;grid-template-columns:var(--bande-photo) minmax(0,1fr);grid-template-areas:"photo corps";column-gap:clamp(20px,4vw,64px);max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}
.bande--photo-droite .bande-in{grid-template-columns:minmax(0,1fr) var(--bande-photo);grid-template-areas:"corps photo"}
.bande-photo{grid-area:photo;position:relative;margin:0;align-self:end;padding-top:clamp(24px,3.4vw,48px)}
.bande-photo img{position:relative;z-index:2;display:block;width:100%;height:auto}  /* height:auto obligatoire (attributs width/height) */
.bande--haut .bande-photo{align-self:stretch;padding-top:0;overflow:hidden;min-height:clamp(260px,34vw,480px)}
.bande--haut .bande-photo img{position:absolute;left:0;top:0}
.bande-corps{grid-area:corps;position:relative;z-index:3;align-self:center;min-width:0;padding-block:clamp(28px,4vw,56px)}
.bande .btn:hover{background:var(--primary-h)}
/* formes géométriques : le relief, jamais d'ombre */
.bf{position:absolute;z-index:1;pointer-events:none}
.bf-disque{left:50%;top:clamp(24px,3.4vw,48px);width:94%;aspect-ratio:1;border-radius:50%;background:var(--bf-disque);transform:translate(-50%,6%)}
.bf-anneau{left:-16%;top:44%;width:40%;aspect-ratio:1;border-radius:50%;border:clamp(4px,.55vw,8px) solid var(--bf-anneau)}
.bande--photo-droite .bf-anneau{left:auto;right:-16%}
.bf-socle{left:-14%;right:-14%;bottom:0;height:clamp(10px,1.1vw,16px);background:var(--bf-socle)}
.bf-carre{left:-8%;bottom:18%;width:22%;aspect-ratio:1;background:var(--bf-carre)}
.bande--haut .bf-disque{top:0}
@media(max-width:720px){
  .bande,.bande--m{--bande-photo:34vw}
  .bande--s{--bande-photo:26vw}
  .bande--l{--bande-photo:44vw}
  .bande-in{column-gap:14px;padding-inline:var(--sp-3)}
  .bande-photo{padding-top:22px}
  .bande-corps{padding-block:22px}
  .bande--haut .bande-photo{min-height:200px}
}

/* ---------- 4. Page /agenda v2 ---------- */
.bande-agenda .bande-corps{align-self:stretch;display:flex;align-items:center}
.hd{width:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(170px,21vw,290px);grid-template-areas:"info aff" "actions aff";column-gap:clamp(20px,3.4vw,52px);row-gap:24px;align-items:end}
.hd.sans-aff{grid-template-columns:minmax(0,1fr);grid-template-areas:"info" "actions"}
.hd-info,.hd-actions,.hd-aff{position:relative;z-index:3}
.hd-info{grid-area:info;min-width:0}
.hd-actions{grid-area:actions;display:flex;flex-wrap:wrap;gap:10px;align-self:start}
.hd-aff{grid-area:aff;margin:0;align-self:center}
.hd-kick{display:flex;align-items:center;gap:10px;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;line-height:1.2}
.hd-kick i{flex:none;width:9px;height:9px;background:var(--ek-canard)}
.hd-date{display:flex;align-items:flex-end;gap:clamp(10px,1.4vw,18px);margin:clamp(10px,1.6vw,18px) 0 clamp(12px,1.8vw,20px);line-height:.78}
.hd-j{font-size:clamp(4.4rem,10.5vw,9.6rem);font-weight:800;letter-spacing:-.065em;font-variant-numeric:tabular-nums}
.hd-mw{display:flex;flex-direction:column;gap:.2em;padding-bottom:.1em;font-size:clamp(1.25rem,2.6vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:.9}
.hd-w{font-weight:500}
.hd-lieu{font-size:clamp(1.7rem,3.5vw,3.1rem);letter-spacing:-.04em;line-height:.95;outline:0}
.hd-lieu:focus-visible{outline:3px solid var(--ek-noir);outline-offset:4px}
.hd-meta{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:12px;font-weight:600;font-size:clamp(.95rem,1.3vw,1.08rem);color:var(--txt-2)}
.hd-meta li:not([hidden])~li:not([hidden])::before{content:"";display:inline-block;width:6px;height:6px;margin:0 12px 2px 0;background:currentColor;vertical-align:middle}
.hd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hd-format{background:var(--ek-noir);color:var(--ek-blanc)}
.hd-dans{background:var(--ek-canard);color:var(--ek-blanc)}
.hd-billet-off,.hd-billet-off:hover{background:rgba(18,18,18,.12);color:rgba(18,18,18,.5);cursor:not-allowed;transform:none}
.hd-aff a{display:block}
.hd-aff img{display:block;width:100%;height:auto;background:rgba(18,18,18,.08)}
.hd-aff a:focus-visible{outline:3px solid var(--ek-noir);outline-offset:4px}
.hd-aff.vide{position:relative;overflow:hidden;aspect-ratio:900/1261;display:flex;align-items:flex-end;padding:16px 16px 26px;background:var(--ek-canard);color:var(--ek-blanc)}
.hd-aff.vide::before{content:"";position:absolute;right:-24%;top:-12%;width:82%;aspect-ratio:1;border-radius:50%;background:var(--ek-jaune)}
.hd-aff.vide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--ek-noir)}
.hd-aff.vide span{position:relative;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  .hd.hd-anim .hd-info,.hd.hd-anim .hd-aff{animation:hd-entre .5s cubic-bezier(.2,.7,.2,1) both}
  .hd.hd-anim .hd-aff{animation-delay:.07s}
}
@keyframes hd-entre{from{opacity:0;transform:translateY(16px)}}

.ag-sec{padding:clamp(40px,5.5vw,76px) 0 var(--sp-5)}
.ag-tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 28px;margin-bottom:24px}
.ag-tete h2{font-size:clamp(2.1rem,4.8vw,3.8rem);letter-spacing:-.045em;line-height:.9}
.ag-tete p{max-width:520px;color:var(--txt-2)}
.ag-filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ag-puce{font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;background:transparent;color:var(--txt);border:1.5px solid var(--ligne);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.ag-puce:hover{border-color:var(--ek-sable)}
.ag-puce[aria-pressed="true"]{background:var(--ek-jaune);border-color:var(--ek-jaune);color:var(--ek-noir)}
.ag-puce:focus-visible,.ag-ligne:focus-visible{outline:3px solid var(--ek-jaune);outline-offset:2px}
.ag-mois{display:flex;align-items:center;gap:14px;padding:30px 0 14px;font-size:clamp(1.25rem,2.3vw,1.75rem);letter-spacing:-.025em}
.ag-mois::before{content:"";flex:none;width:14px;height:14px;background:var(--ek-canard)}
.ag-mois-bloc{padding:0}  /* ce sont des <section> : la règle globale section{padding} créait un grand vide entre les mois */
.ag-mois-bloc>ul{list-style:none;border-top:1px solid var(--ligne)}
.ag-ligne{display:grid;grid-template-columns:170px minmax(0,1.35fr) minmax(0,1fr) 150px 22px;grid-template-areas:"d lieu ville format chev";align-items:center;gap:22px;width:100%;padding:20px 18px;background:transparent;color:var(--txt);border:0;border-bottom:1px solid var(--ligne);font:inherit;text-align:left;cursor:pointer;transition:background var(--ease),color var(--ease)}
.ag-ligne:hover{background:var(--ek-noir-2)}
.ag-ligne[aria-current="true"]{--txt-2:rgba(18,18,18,.72);background:var(--ek-sable);color:var(--ek-noir)}
.ag-d{grid-area:d;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.ag-w{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2)}
.ag-j{font-size:2.1rem;font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.ag-m{font-size:.95rem;font-weight:700}
.ag-lieu{grid-area:lieu;font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ag-ville{grid-area:ville;color:var(--txt-2);font-size:.95rem}
.ag-format{grid-area:format;justify-self:start;font-size:.64rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border:1.5px solid currentColor;white-space:nowrap}
.ag-chev{grid-area:chev;justify-self:center;width:11px;height:11px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--ease)}
.ag-ligne:hover .ag-chev{transform:translateX(3px) rotate(-45deg)}
.ag-ligne[aria-current="true"] .ag-chev{transform:rotate(-135deg)}
@media(max-width:980px){
  .ag-ligne{grid-template-columns:130px minmax(0,1fr) auto 22px;grid-template-areas:"d lieu format chev" "d ville format chev";row-gap:4px}
}
@media(max-width:720px){
  /* téléphone : la bande garde photo et texte côte à côte ; affiche sous la photo, boutons sous le texte */
  .bande-agenda .bande-in{grid-template-columns:var(--bande-photo) minmax(0,1fr);grid-template-areas:"photo info" "aff actions";row-gap:0}
  .bande-agenda .bande-corps,.bande-agenda .hd{display:contents}
  .bande-agenda .hd.sans-aff .hd-actions{grid-column:1 / -1}
  .hd-info{align-self:end;padding-top:24px}
  .hd-aff{align-self:start;margin:16px 0 24px}
  .hd-actions{flex-direction:column;align-items:stretch;align-self:start;margin:16px 0 24px}
  .hd-actions .btn{justify-content:center;padding:13px 10px;font-size:.7rem}
  .hd-kick{font-size:.64rem;letter-spacing:.18em;gap:8px}
  .hd-j{font-size:4.1rem}
  .hd-mw{font-size:1.08rem}
  .hd-lieu{font-size:1.5rem}
  .hd-meta{flex-direction:column;align-items:flex-start;gap:2px;font-size:.88rem;margin-top:8px}
  .hd-meta li::before{display:none!important}  /* une info par ligne : le carré séparateur tombait en début de ligne */
  .hd-tags{margin-top:10px}
  .ag-ligne{grid-template-columns:58px minmax(0,1fr) 16px;grid-template-areas:"d lieu chev" "d ville chev" "d format chev";column-gap:14px;row-gap:5px;padding:16px 10px}
  .ag-d{flex-direction:column;align-items:flex-start;gap:3px}
  .ag-j{font-size:1.9rem}
  .ag-format{margin-top:3px}
  .ag-puce{padding:9px 13px;font-size:.74rem}
}

/* =========================================================
   ÉTAPES 3 et 4 de la refonte v2 (15/09/2026, plan validé par Esy)
   Accueil : pages du carnet en bandes pleine largeur (01 canard, 02 sable, 07 sable), collées sous l'en-tête.
   Sous-pages : héros en bande (EK TV noir, Ki nouvèl blanc, Univers canard, Dons jaune, 404 sable).
   Aucune ombre : relief par formes géométriques. Une seule police.
   Cody, Assistant Tech IA d'Esy Kennenga
   ========================================================= */
:root{--tete:62px}  /* hauteur du menu du haut ; site.js pose la mesure réelle */

/* ---------- Carnet : pages en bande ---------- */
.page.p-bande{padding:0;justify-content:flex-start}
.page.p-bande>.bande{flex:1 0 auto;display:flex;flex-direction:column;width:100%}
.page.p-bande>.bande>.bande-in{flex:1 0 auto;width:100%}
.page-n{z-index:6}
.page.cover{background:var(--ek-canard)}
.page.cover .page-n{color:#D9EAE7}
.page.cover .marquee{z-index:6}
.page.p-sable{background:var(--ek-sable)}
.page.p-sable .page-n{color:rgba(18,18,18,.62)}
.page.p-sable .page-n b{color:var(--ek-canard)}
.page.p-sable .fold{border-color:transparent var(--ek-canard) transparent transparent}

/* ---------- Bande : compléments (blanc, photo au centre, deux blocs de texte, taille xl, nouvelles formes) ---------- */
.bande{--bf-trame:var(--ek-jaune);--bf-play:var(--ek-jaune);--bf-demi:var(--ek-canard);--bf-e1:rgba(18,18,18,.14);--bf-e2:rgba(18,18,18,.26);--bf-e3:rgba(18,18,18,.38);--bf-e4:rgba(18,18,18,.5)}
.bande--blanc{--bande-bg:var(--ek-blanc);--bande-txt:var(--ek-noir);--bande-txt-2:rgba(18,18,18,.72);--bf-disque:var(--ek-canard);--bf-anneau:var(--ek-noir);--bf-socle:var(--ek-noir);--bf-carre:var(--ek-jaune);--ligne:rgba(18,18,18,.16)}
.bande--blanc .kicker{color:var(--ek-canard)}
.bande--xl{--bande-photo:clamp(260px,40vw,600px)}
/* deux blocs : titre au-dessus, suite dessous, la photo couvre les deux rangées */
.bande--duo .bande-in{grid-template-rows:auto auto;grid-template-areas:"photo corps" "photo corps2";align-content:center}
.bande--duo.bande--photo-droite .bande-in{grid-template-areas:"corps photo" "corps2 photo"}
.bande--duo .bande-corps{align-self:end;padding-bottom:clamp(8px,1.2vw,16px)}
.bande--duo .bande-corps2{grid-area:corps2;align-self:start;padding-top:clamp(8px,1.2vw,16px)}
.page.p-bande .bande--duo .bande-in{grid-template-rows:1fr 1fr}
/* photo au centre, texte de part et d'autre */
.bande--photo-centre .bande-in{grid-template-columns:minmax(0,1fr) var(--bande-photo) minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"corps photo corps2"}
.bande--photo-centre .bande-corps,.bande--photo-centre .bande-corps2{align-self:center;padding-block:clamp(28px,4vw,56px)}
.bande--photo-centre .bande-corps{text-align:right}
.bande--photo-centre .bande-corps2{text-align:left}
/* formes */
.bf-trame{left:50%;top:clamp(24px,3.4vw,48px);width:94%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,6%);background-image:radial-gradient(var(--bf-trame) 1.5px,transparent 1.8px);background-size:9px 9px}
.bande--haut .bf-trame{top:0}
.bf-play{left:-6%;bottom:24%;z-index:3;width:0;height:0;border-left:clamp(28px,3.4vw,50px) solid var(--bf-play);border-top:clamp(17px,2.05vw,30px) solid transparent;border-bottom:clamp(17px,2.05vw,30px) solid transparent}
.bf-demi{left:0;right:0;bottom:0;height:44%;border-radius:999px 999px 0 0;background:var(--bf-demi)}
.bf-barres{left:-14%;right:-14%;top:14%;bottom:18%;background:linear-gradient(var(--ek-noir),var(--ek-noir)) 0 0/100% 14% no-repeat,linear-gradient(var(--ek-jaune),var(--ek-jaune)) 0 50%/100% 14% no-repeat,linear-gradient(var(--ek-canard),var(--ek-canard)) 0 100%/100% 14% no-repeat}
.bf-escalier{left:-14%;right:-14%;top:8%;bottom:0;background:linear-gradient(var(--bf-e1),var(--bf-e1)) 0 100%/25% 100% no-repeat,linear-gradient(var(--bf-e2),var(--bf-e2)) 33.333% 100%/25% 78% no-repeat,linear-gradient(var(--bf-e3),var(--bf-e3)) 66.667% 100%/25% 56% no-repeat,linear-gradient(var(--bf-e4),var(--bf-e4)) 100% 100%/25% 34% no-repeat}
/* textes communs des héros */
.bande-titre{margin-top:10px;font-size:clamp(3rem,7.4vw,6.6rem);letter-spacing:-.05em;line-height:.88}
.bande-legende{margin-top:14px;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--bande-txt-2)}
.bande-lead{max-width:560px;color:var(--bande-txt-2);font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.55}
.bande .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,2vw,26px)}
.apres-bande{padding-top:clamp(36px,5vw,72px)}

/* ---------- 01 Couverture : photo plus grosse, calée en haut, à droite ---------- */
.bande-cover .bande-in{max-width:1440px;padding-right:clamp(0px,1.4vw,20px)}
.bande-cover .bande-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.bande-cover .bf-disque{width:90%;top:3%;transform:translate(-50%,0)}
.bande-cover .bf-socle{z-index:3;left:-20%;right:0}
.cv-kick{color:var(--ek-jaune)}
.cv-nom{margin-top:clamp(12px,1.6vw,20px);font-size:clamp(3.2rem,6.8vw,7rem);letter-spacing:-.05em;line-height:.86}
.cv-sub{max-width:520px;color:var(--bande-txt-2);font-size:clamp(1rem,1.2vw,1.12rem)}
.bande-cover .bande-corps2{padding-bottom:calc(clamp(28px,4vw,56px) + 44px)}  /* place du bandeau défilant */

/* ---------- 04 Ki nouvèl et boutique : photo plus petite ---------- */
.band-mtg{max-width:min(980px,100%)}
.mtg.wide.m-boutique{aspect-ratio:1000/380}
.m-boutique .subj{right:9cqw;bottom:-5%;width:20cqw}
#nouvel .tcard{min-height:0}
.m-boutique h2{top:12%;font-size:8cqw}
.m-boutique p{top:56%;font-size:2cqw;max-width:44cqw}

/* ---------- 07 Contact : bande sable, photo plus petite à droite ---------- */
.bande-contact .bc-titre{margin-top:10px;font-size:clamp(2.6rem,5.6vw,5.2rem);letter-spacing:-.05em;line-height:.9}
.bande-contact .bc-lead{margin:14px 0 0;max-width:520px;color:var(--bande-txt-2)}
.bande-contact .inner{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(22px,3vw,44px)}
.bande-contact h3{font-size:clamp(1.25rem,2vw,1.8rem);margin-bottom:10px}
.bande-contact p{color:var(--bande-txt-2);margin-bottom:12px}
.bande-contact .mail{color:var(--ek-noir);border-bottom-color:var(--ek-noir);font-size:clamp(1rem,1.6vw,1.3rem)}
.bande-contact .nl-form input{background:var(--ek-blanc);border-color:rgba(18,18,18,.28);color:var(--ek-noir)}
.bande-contact .nl-form input::placeholder{color:rgba(18,18,18,.5)}
.bande-contact .nl-form input:focus{border-color:var(--ek-noir)}
.bande-contact .nl-note{color:rgba(18,18,18,.62)}

/* ---------- EK TV : bande noire, logo au-dessus du titre ---------- */
.bande-ektv{--bf-anneau:rgba(232,203,171,.45);border-bottom:1px solid var(--ligne)}
.bande-ektv .bf-anneau{left:50%;top:clamp(8px,1.6vw,24px);width:108%;transform:translateX(-50%);border-width:clamp(3px,.4vw,5px)}
.ektv-logo{display:block;width:clamp(76px,8vw,118px);height:auto;margin-bottom:clamp(12px,1.6vw,20px)}
.ektv-titre{font-size:clamp(3.6rem,9.4vw,8rem);letter-spacing:-.05em;line-height:.84;color:var(--ek-jaune)}

/* ---------- Ki nouvèl ? : bande blanche, photo N&B au centre ---------- */
.bande-actus .bande-photo img{filter:grayscale(1) contrast(1.08)}
.bande-actus .bande-titre{font-size:clamp(2.6rem,4.8vw,4.8rem)}

/* ---------- Univers : bande canard, kimono entier ---------- */
.bande-univers{--bf-anneau:var(--ek-jaune)}
.bande-univers .bf-anneau{left:auto;right:-2%;top:4%;width:26%}

/* ---------- Dons : bande jaune ---------- */
.bande-dons .bande-photo{min-height:clamp(300px,38vw,540px);overflow:visible}
.bande-dons .bf-anneau{left:50%;top:10%;width:128%;transform:translateX(-50%)}
.bande-dons .bf-demi{left:-50%;right:-6%;height:40%}
.dons-titre{font-size:clamp(4.4rem,12vw,10rem)}

@media(max-width:720px){
  :root{--tete:101px}
  .bande--xl{--bande-photo:52vw}
  .bande--duo .bande-in{grid-template-columns:var(--bande-photo) minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"photo corps" "corps2 corps2";row-gap:0;align-content:start}
  .bande--duo.bande--photo-droite .bande-in,.bande--photo-centre .bande-in{grid-template-columns:minmax(0,1fr) var(--bande-photo);grid-template-rows:auto auto;grid-template-areas:"corps photo" "corps2 corps2"}
  .page.p-bande .bande--duo .bande-in{grid-template-rows:auto auto;align-content:center}
  .page.p-bande .bande-agenda .bande-in{align-content:center}
  .bande--duo .bande-corps{align-self:end;padding:22px 0 14px}
  .bande--duo .bande-corps2{padding:14px 0 26px}
  .bande--photo-centre .bande-corps{text-align:left;align-self:end;padding:22px 0 14px}
  .bande--photo-centre .bande-corps2{align-self:start;padding:14px 0 26px}
  .bande--duo.bande-cover .bande-in{grid-template-columns:minmax(0,1fr) 64vw;grid-template-rows:auto auto auto;grid-template-areas:". photo" "corps corps" "corps2 corps2"}
  .page.p-bande .bande--duo.bande-cover .bande-in{grid-template-rows:auto auto auto;align-content:space-between}
  .bande-cover .bande-photo{min-height:0;height:calc(64vw * 1.271)}  /* ratio de la découpe 1100×1398 : aucun rognage */
  .bande--duo.bande-cover .bande-corps{padding:18px 0 6px}
  .bande--duo.bande-cover .bande-corps2{padding:8px 0 62px}
  .cv-nom{font-size:clamp(2.4rem,12vw,3.4rem)}
  .bf-barres{left:-30%;right:0}
  .bf-escalier{right:0}
  .bande-titre{font-size:clamp(2rem,10vw,3rem)}
  .ektv-titre{font-size:clamp(2.4rem,12vw,3.4rem)}
  .ektv-logo{width:56px;margin-bottom:10px}
  .dons-titre{font-size:clamp(2.8rem,15vw,4rem)}
  .bande-legende{font-size:.58rem;letter-spacing:.16em}
  .bande-lead{font-size:.98rem}
  .bande-contact .bc-titre{font-size:clamp(1.8rem,8.4vw,2.4rem)}
  .bande-contact .inner{grid-template-columns:1fr;gap:20px}
  .bande-dons .bande-photo{min-height:220px;overflow:hidden}
  .bande-dons .bf-anneau{width:96%}
  .mtg.wide.m-boutique{aspect-ratio:1000/900}
  .m-boutique .subj{width:34cqw;right:3cqw;bottom:-4%}
  .m-boutique h2{font-size:12cqw;top:9%}
  .m-boutique p{font-size:3.8cqw;top:46%;max-width:56cqw}
}

/* =========================================================
   Corrections du 07/10/2026 (revue des héros avec Esy)
   1. Couverture : photo collée au bord droit, image entière en largeur (pas de rognage par le site), sans IA.
   2. Bandeau défilant retiré (HTML) : plus de réserve en bas.
   4. Interlettrage des grands titres desserré sur tout le site.
   Cody, Assistant Tech IA d'Esy Kennenga
   ========================================================= */
@media(min-width:721px){
  .bande-cover .bande-in{max-width:none;padding-right:0;grid-template-columns:minmax(0,1fr) min(calc((100svh - var(--tete)) * .787),56vw)}
  .bande-cover .bande-photo img{width:100%;height:100%;object-fit:cover;object-position:100% 0}
  .bande-cover .bande-corps,.bande-cover .bande-corps2{padding-left:max(0px,calc((100vw - 1440px) / 2))}
}
.bande-cover .bande-corps2{padding-bottom:clamp(28px,4vw,56px)}
@media(max-width:720px){.bande--duo.bande-cover .bande-corps2{padding-bottom:26px}}

:root{--titre-ls:-.015em}
.cv-nom,.bande-titre,.ektv-titre,.dons-titre,.uni-quote,.page-hero h1,.sec-title,.giant h1,.giant h2,.ag-tete h2,.mtg h1,.mtg h2,.bande-contact .bc-titre,.hd-lieu,.tcard h3,.uni-card h3,.why-card h3,.uni-lead{letter-spacing:var(--titre-ls)}

/* 6. Agenda en tiroirs (07/10/2026) : un seul ouvert ; les dates suivantes s'ouvrent sur place avec leur affiche seule */
.ag-ligne[aria-expanded="true"] .ag-chev{transform:rotate(-135deg)}
.ag-tiroir{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start;padding:clamp(18px,2.6vw,32px) 18px clamp(22px,3vw,36px);background:var(--ek-sable);color:var(--ek-noir);border-bottom:1px solid var(--ligne)}
.ag-tiroir[hidden]{display:none}
.ag-tiroir .tir-aff{margin:0;outline:3px solid var(--ek-jaune);outline-offset:6px}
.ag-tiroir .tir-aff img{display:block;width:100%;height:auto}
.ag-tiroir .tir-aff.vide{aspect-ratio:900/1261;display:flex;align-items:center;justify-content:center;background:rgba(18,18,18,.08);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(18,18,18,.6);outline:0}
.ag-tiroir:not(:has(.tir-aff)){grid-template-columns:1fr}
.tir-date{font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:800;letter-spacing:var(--titre-ls)}
.tir-j{font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;font-variant-numeric:tabular-nums}
.tir-lieu{margin-top:8px;font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:var(--titre-ls);line-height:1}
.tir-meta{list-style:none;margin:12px 0 0;padding:0;color:rgba(18,18,18,.75);display:flex;flex-direction:column;gap:3px}
.ag-tiroir .hd-tags{margin-top:14px}
.tir-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(16px,2vw,24px)}
.tir-actions .btn-ghost{color:var(--ek-noir);border-color:var(--ek-noir)}
@media(max-width:720px){
  .ag-tiroir{grid-template-columns:1fr;padding:18px 10px 24px}
  .ag-tiroir .tir-aff{max-width:260px}
  .tir-actions{flex-direction:column;align-items:stretch}
}
.ag-ligne{scroll-margin-top:calc(var(--tete) + 16px)}

/* Dons (08/10/2026, Esy) : texte calé à droite, en face de la photo, pour équilibrer le héros */
@media(min-width:721px){
  .bande-dons .bande-corps,.bande-dons .bande-corps2{justify-self:end;text-align:right}
  .bande-dons .bande-lead{margin-left:auto}
  .bande-dons .cta-row{justify-content:flex-end}
}

/* Univers (08/10/2026) : 5 formats, grille de 3 colonnes */
@media(min-width:900px){.uni-grid{grid-template-columns:repeat(3,1fr)}}

/* Contact et newsletter (08/10/2026, Esy) : photo collée au bord droit et en bas, plus grande, comme la couverture */
@media(min-width:721px){
  .bande-contact .bande-in{max-width:none;padding-right:0;grid-template-columns:minmax(0,1fr) min(calc((100svh - var(--tete)) * .62),46vw)}
  .bande-contact .bande-photo{align-self:stretch;padding-top:0;display:flex;align-items:flex-end}
  .bande-contact .bande-photo img{width:100%;height:auto;max-height:calc(100svh - var(--tete) - 24px);object-fit:contain;object-position:100% 100%}
  .bande-contact .bf-disque{width:86%;top:auto;bottom:30%;left:52%}
  .bande-contact .bande-corps,.bande-contact .bande-corps2{padding-left:max(0px,calc((100vw - 1440px) / 2))}
}

/* Téléphone (08/10/2026, retour d'Esy sur iPhone) : plus d'empilement collant des pages.
   La barre d'adresse d'iOS change la hauteur utile pendant le défilement : texte coupé par la page suivante,
   bande vide au-dessus du Contact. Sur téléphone les pages se suivent ; l'effet carnet reste sur ordinateur. */
@media(max-width:720px){
  .book .page,.book .page.tall{position:relative;top:auto;min-height:0}
  .page.p-bande:not(.cover) .bande-in{padding-top:58px}
}

/* Univers (08/10/2026, Esy) : texte découpé en blocs, frise des dates, photos de Georges-Emmanuel Arnaud */
.uni-h{font-size:clamp(1.4rem,2.4vw,2rem);margin:var(--sp-4) 0 14px;letter-spacing:var(--titre-ls);line-height:1.1}
.uni-bloc{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);gap:clamp(24px,4vw,64px);align-items:center;margin:var(--sp-3) 0;max-width:1100px}
.uni-bloc--g{grid-template-columns:minmax(220px,340px) minmax(0,1fr)}
.uni-bloc .uni-h{margin-top:0}
.uni-photo{margin:0}
.uni-photo img{display:block;width:100%;height:auto}
.uni-frise{list-style:none;padding:0;margin:4px 0 26px;max-width:900px;display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--ek-jaune)}
.uni-frise li{padding:14px 18px 0 0}
.uni-frise b{display:block;font-size:clamp(1.7rem,3vw,2.6rem);font-weight:var(--w-display);letter-spacing:var(--titre-ls);line-height:1;color:var(--ek-jaune)}
.uni-frise span{display:block;margin-top:6px;color:var(--txt-2);font-size:.95rem;line-height:1.35}
.uni-prose p.uni-exergue{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:var(--w-display);letter-spacing:var(--titre-ls);line-height:1;color:var(--ek-jaune);margin:22px 0}
.uni-prose p.uni-signature{font-weight:var(--w-strong);color:var(--txt);font-size:1.2rem;margin-top:var(--sp-3)}
.uni-lien{font-weight:var(--w-strong)}
@media(max-width:720px){
  .uni-bloc,.uni-bloc--g{grid-template-columns:1fr}
  .uni-bloc--g .uni-photo{order:2}
  .uni-photo{max-width:420px}
  .uni-frise{grid-template-columns:1fr 1fr;row-gap:16px}
}