@font-face{font-family:"Montserrat";src:url("../assets/fonts/Montserrat.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../assets/fonts/Satoshi.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/Inter.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../assets/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap}

/* ============================================================
   BIM DAY .MA — V1 sponsor showcase
   Palette + type per the client charte (brand-identity-bimday.pdf).
   BIM GREEN #2E6B1F · BIM RED #E10600 · BIM BLACK #111111
   BRAND GREEN #459956 — sampled from the brand-identity PDF; used
   on dark surfaces where #2E6B1F is not legible.
   ============================================================ */

:root{
  --ground:#111111;
  --ground-alt:#0C0D0C;
  --ink:#DDDDDD;
  --ink-mute:rgba(221,221,221,.58);
  --ink-faint:rgba(221,221,221,.34);   /* ornamental numerals ONLY */
  --ink-quiet:rgba(221,221,221,.66);   /* small READ text */
  --rule:rgba(221,221,221,.10);
  --rule-2:rgba(221,221,221,.18);
  --green:#459956;          /* sampled from assets/brand/brand-identity-bimday.pdf */
  --green-deep:#2E6B1F;     /* charte BIM GREEN — print/light */
  --red:#E10600;            /* the only active state */
  --red-text:#FF6B62;       /* legible error text on dark; --red is for non-text accents */

  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Satoshi","Montserrat",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;

  --shell:1120px;
  --gut:clamp(20px,5vw,48px);
  --d1:clamp(2.15rem,5.4vw,3.4rem);
  --d2:clamp(1.75rem,3.8vw,2.55rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;margin:0;letter-spacing:-.02em}
p{margin:0}
hr.rule{border:0;height:1px;background:var(--rule);margin:0}

.mono{font-family:var(--mono);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase}
.dot{color:var(--red)}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ground);
  padding:.7rem 1rem;z-index:200}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
#main:focus,#main:focus-visible{outline:none}

/* ── pills ───────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;border-radius:0;
  padding:7.5px 15px;font-family:var(--mono);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.pill--ghost{background:rgba(221,221,221,.10);color:var(--ink);
  border:1px solid var(--rule-2);backdrop-filter:blur(6px)}
.pill--solid{background:var(--ink);color:#111}
.pill--solid:hover{background:var(--green);color:var(--ground)}

/* ── logo lockup (charte: BIM ExtraBold · DAY Light · red dot · MA ExtraBold,
      inside the open green bracket. Inline SVG so Montserrat applies.) ── */
.lg-frame{fill:none;stroke:var(--green);stroke-width:5}
.lg-t{font-family:var(--disp);font-size:52px;letter-spacing:-.5px}
.lg-b{font-weight:800;fill:var(--ink)}
.lg-l{font-weight:300;fill:var(--ink)}
.lg-d{font-weight:800;fill:var(--red)}


.nav__logo{display:block;width:128px;flex:none}
.nav__logo svg{width:100%;height:auto;display:block}
.nav__logo .lg-frame{stroke-width:6}

.hero__logo{display:inline-flex;flex-direction:column;gap:.55rem;width:184px;margin-bottom:1rem}
.hero__logo svg{width:100%;height:auto;display:block}
.hero__tagline{color:var(--ink-quiet);letter-spacing:.16em;font-size:.66rem}

.foot__logo{display:block;width:164px}
.foot__logo svg{width:100%;height:auto;display:block}

/* ── nav ─────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;display:flex;align-items:center;
  justify-content:center;
  padding:clamp(10px,1.6vw,16px) var(--gut);pointer-events:none}
.nav>*{pointer-events:auto}
/* the reference nav: one contained dark bar, squared corners */
.nav__bar{display:flex;align-items:center;gap:clamp(.9rem,2.2vw,2.2rem);
  width:min(1100px,100%);padding:14px clamp(14px,1.8vw,24px);
  background:rgba(0,0,0,.2);border:1px dashed rgba(255,255,255,.14);
  border-radius:0;backdrop-filter:blur(8px)}
.nav__links{list-style:none;display:flex;gap:10px;margin:0 auto;padding:0}
.nav__links a{display:block;padding:4px 16px;border-radius:0;
  font-family:var(--body);font-weight:400;font-size:.875rem;letter-spacing:-.03em;line-height:1.5;
  color:rgba(255,255,255,.66);
  border:1px dashed rgba(255,255,255,.22);
  transition:color .3s ease,border-color .3s ease,background-color .3s ease}
/* confer-style flip: default label rolls up and out while the green
   panel with its own label rolls in from below */
.nav__links a{position:relative;overflow:hidden}
.nl__d{display:block;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.nl__h{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#0B0C0B;transform:translateY(101%);
  transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.nav__links a:hover{border-color:var(--green)}
.nav__links a:hover .nl__d{transform:translateY(-101%)}
.nav__links a:hover .nl__h{transform:translateY(0)}
.nav__lang{display:grid;place-content:center;width:38px;height:38px;flex:none;
  border:1px dashed rgba(255,255,255,.22);
  font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.1em;
  color:rgba(255,255,255,.7);transition:color .3s ease,border-color .3s ease,background .3s ease}
.nav__lang:hover{color:#0B0C0B;background:var(--green);border-color:var(--green)}
.nav__cta{display:inline-block;padding:9px 26px;border-radius:0;white-space:nowrap;
  font-family:var(--body);font-weight:500;font-size:.9rem;letter-spacing:.01em;
  color:#0B0C0B;background:#fff;
  border:1px solid #fff;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.nav__cta:hover{background:var(--green);border-color:var(--green);color:#0B0C0B}
.nav__burger{width:46px;height:46px;border-radius:0;border:0;background:var(--ink);
  display:grid;place-content:center;gap:5px;cursor:pointer;padding:0;
  transition:background .3s ease}
.nav__burger span{display:block;width:18px;height:2px;background:#111;transition:transform .3s ease,opacity .25s ease}
.nav__burger:hover{background:var(--green)}
.nav__burger:hover span{background:#fff}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media(min-width:1000px){.nav__burger{display:none}}
@media(max-width:999px){.nav__links{display:none}}

.menu{position:fixed;inset:0;z-index:85;background:rgba(10,11,10,.96);
  backdrop-filter:blur(14px);display:grid;place-content:center;place-content:safe center;
  overflow-y:auto;overscroll-behavior:contain;padding-block:clamp(72px,14vh,120px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.menu.open{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
.menu ul{list-style:none;margin:0;padding:0 var(--gut);text-align:left}
.menu a{display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;gap:.4rem}
.menu li{margin:.35rem 0}
.menu a{font-family:var(--disp);font-weight:800;font-size:clamp(1.5rem,4.4vw,2.4rem);
  letter-spacing:-.02em;display:inline-flex;align-items:baseline;gap:1rem;
  transition:color .3s ease}
.menu a .mono{color:var(--green);font-size:.7rem}
.menu a:hover{color:var(--green)}

/* ── hero ────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-block:clamp(96px,14vh,150px) clamp(28px,5vh,54px);overflow:hidden;background:transparent}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.72) 82%,var(--ground) 100%)}
.hero__wash{position:absolute;inset:0;z-index:1;background:rgba(153,153,153,.10)}
.hero__inner{position:relative;z-index:2;width:100%}

.hero__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 1.6rem}
.hero__title{font-size:var(--d1);line-height:1.06;max-width:16ch;text-wrap:balance}
.hero__sub{margin-top:1.1rem;max-width:52ch;color:var(--ink-mute);font-size:1.02rem}
.hero__foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-top:.9rem;color:var(--ink-quiet)}
.hero .rule:last-of-type{margin-top:clamp(28px,6vh,60px)}

.cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;
  background:rgba(69,153,86,.12);color:var(--green);border-radius:0;padding:10px 28px;
  font-family:var(--disp);font-weight:500;font-size:.9rem;cursor:pointer;
  border:1px solid var(--green);
  transition:background .3s ease,color .3s ease,gap .3s ease}
.cta:hover{background:var(--green);color:var(--ground)}
.cta--sub{margin-top:.6rem}

/* ── bands ───────────────────────────────────────────── */
.band{padding-block:clamp(64px,10vw,124px);border-top:1px solid var(--rule)}
.band--alt{background:var(--ground-alt)}
.label{color:var(--green);display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.1rem}
.label .idx{color:var(--ink-faint)}
.h2{font-size:var(--d2);line-height:1.1;max-width:20ch;text-wrap:balance}
.lede{margin-top:1.1rem;max-width:60ch;color:var(--ink-mute);font-size:1.02rem}
.note{margin-top:1.6rem;color:var(--ink-quiet);letter-spacing:.1em}
/* closes a centred block (e.g. the .figs stat row) — the note follows suit */
.note--c{text-align:center}

.prose{margin-top:1.8rem;max-width:62ch;display:grid;gap:1.1rem}
.prose p{color:var(--ink-mute)}
.prose--narrow{max-width:58ch}

/* pillars */
.pillars{list-style:none;margin:3rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--rule);border-block:1px solid var(--rule);grid-template-columns:1fr}
.pillars li{background:var(--ground);padding:1.5rem 1.4rem 1.6rem;
  display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.4rem;align-items:baseline}
.pillars li>p{grid-column:2}
.pillars span{color:var(--green);display:block;margin-bottom:.7rem}
.pillars p{color:var(--ink-mute);font-size:.94rem}

/* formats */
.formats{display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.formats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.formats{grid-template-columns:1fr}}
.fmt{background:var(--ground-alt);padding:0 0 2.1rem;transition:background .35s ease}
.fmt:hover{background:var(--ground)}
.fmt>*:not(.fmt__media){padding-inline:1.6rem}
/* PLACEHOLDER imagery — desaturated + darkened in CSS so the originals stay
   swappable and the treatment lifts in one line when real photos arrive. */
.fmt__media{overflow:hidden;aspect-ratio:10/6;margin-bottom:1.6rem;position:relative;background:#000}
.fmt__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(17,17,17,0),rgba(17,17,17,.45))}
.fmt__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) brightness(.92) contrast(1.05);
  transform:scale(1.02);transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .6s ease}
.fmt:hover .fmt__media img{transform:scale(1.06);filter:grayscale(.2) brightness(1) contrast(1.05)}
.fmt__n{color:var(--green);margin-bottom:.9rem}
.fmt h3{font-size:1.14rem;margin-bottom:.7rem;letter-spacing:-.01em}
.fmt p{color:var(--ink-mute);font-size:.93rem}

/* full-bleed parallax band — PLACEHOLDER imagery */
.pband{position:relative;height:clamp(280px,42vh,460px);overflow:hidden;background:#000}
.pband__media{position:absolute;inset:-12% 0}
.pband__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.6) brightness(.8) contrast(1.06)}
.pband__scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--ground-alt),rgba(17,17,17,.10) 30%,rgba(17,17,17,.10) 70%,var(--ground))}

/* schedule */
.sched__row{display:grid;grid-template-columns:150px 1fr;gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);align-items:baseline;
  transition:background .3s ease,padding-inline .3s ease}
.sched__row:hover{background:rgba(221,221,221,.03);padding-inline:.8rem}
.sched__t{color:var(--green);padding-top:.22rem;white-space:nowrap}
.sched__b h4{font-family:var(--disp);font-weight:600;font-size:1rem;letter-spacing:-.01em}
.sched__b p{color:var(--ink-mute);font-size:.9rem;margin-top:.25rem}
.tagpar{color:var(--ink-quiet);margin-left:.6rem;font-weight:500}
.sched__row--par .sched__t{color:var(--ink)}

/* quote + signature */
.quote{margin:2rem 0 0;padding:0;text-wrap:balance;
  font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2.5vw,1.6rem);
  line-height:1.35;letter-spacing:-.015em;max-width:30ch}
.sig{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--rule);max-width:52ch}
.sig__n{font-family:var(--disp);font-weight:800;font-size:1.05rem}
.sig__r{color:var(--green);margin-top:.3rem}
.sig__d{color:var(--ink-quiet);font-size:.86rem;margin-top:.6rem}

/* figures — the client's own headline numbers */
.figs{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.figs__k{color:var(--green);margin-bottom:1.3rem}
.figs__row{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.figs__n{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,4.6vw,3.1rem);
  letter-spacing:-.03em;line-height:1}
.figs__n span{color:var(--green)}
.figs__l{color:var(--ink-mute);font-size:.92rem;margin-top:.5rem;max-width:26ch}

/* tiers */
.tiers{display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.tier{background:var(--ground);padding:1.9rem 1.5rem 2.1rem;display:flex;flex-direction:column}
.tier--lead{background:var(--ground-alt);box-shadow:inset 2px 0 0 var(--green)}
.tier__k{color:var(--green);margin-bottom:1.1rem}
.tier__p{font-family:var(--disp);font-weight:800;font-size:1.72rem;letter-spacing:-.02em;
  margin-bottom:1.3rem;line-height:1.1}
.tier__p span{font-family:var(--mono);font-weight:600;font-size:.7rem;letter-spacing:.1em;
  color:var(--ink-quiet);display:block;margin-top:.35rem}
.tier__p--alt{font-size:1.16rem}
.tier ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.tier li{color:var(--ink-mute);font-size:.9rem;padding-left:1.1rem;position:relative;line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  background:var(--green);border-radius:50%}
.tier__x{color:var(--ink-mute);font-size:.9rem}
.tiers--sec{margin-top:1px}
.tier--sm{background:var(--ground-alt)}


/* contact */
/* contact — dome ground + dossier panel */
.band--dome{position:relative;background:#050705;isolation:isolate}
.band--dome::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--aurora,none) center 30%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent)}
.band--dome::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 1 0 0 0 0 0.85 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.band--dome .shell{position:relative;z-index:1}
#contact .form{position:relative;border:1px dashed rgba(255,255,255,.16);
  background:rgba(5,6,5,.72);backdrop-filter:blur(6px);
  padding:2.2rem 1.8rem 1.8rem;align-self:start}
#contact .form::before{content:"Formulaire · Dossier de partenariat";
  position:absolute;top:-9px;left:18px;padding:0 10px;background:#050605;
  font-family:var(--mono);font-weight:600;font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55)}
#contact .form :is(input,select,textarea):not(:focus){border-bottom-color:rgba(221,221,221,.28)}
#contact .form .cta{background:var(--red);color:#fff;border-color:var(--red)}
#contact .form .cta:hover{background:#B80500;border-color:#B80500;color:#fff}
#contact .sh__tag--laurel{margin-bottom:1.2rem}
.contact{display:grid;gap:clamp(2.4rem,5vw,4rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
.meta{margin:2rem 0 0;display:grid;gap:1rem}
.meta div{display:grid;gap:.2rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.meta dt{color:var(--green)}
.meta dd{margin:0;color:var(--ink-mute);font-size:.94rem}

.form{display:grid;gap:1.1rem;grid-template-columns:1fr 1fr}
.f{display:grid;gap:.45rem}
.f--full{grid-column:1/-1}
.form label{color:var(--ink-quiet)}
.form input,.form select,.form textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule-2);color:var(--ink);
  font-family:var(--body);font-size:.96rem;padding:.6rem 0;width:100%;border-radius:0;
  transition:border-color .3s ease}
.form select{appearance:none;cursor:pointer}
.form select option{background:var(--ground);color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--green)}
.form textarea{resize:vertical}
.form .cta{grid-column:1/-1;justify-self:start}
.form__msg{grid-column:1/-1;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);min-height:1.2em}
.form__msg[data-err]{color:var(--red-text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
.foot{padding-block:clamp(48px,7vw,80px) 2.4rem;background:var(--ground-alt)}
.foot__top{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;flex-wrap:wrap;padding:1.6rem 0 2.4rem}
.foot__tag{color:var(--green)}
.foot__grid{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  padding-bottom:2.4rem}
.foot__grid .mono{color:var(--green);margin-bottom:.6rem}
.socials{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.socials a{display:grid;place-content:center;width:38px;height:38px;
  border:1px dashed rgba(255,255,255,.18);color:rgba(221,221,221,.6);
  transition:color .3s ease,border-color .3s ease,background .3s ease}
.socials svg{width:16px;height:16px;fill:currentColor;display:block}
.socials a:hover{color:#0B0C0B;background:var(--green);border-color:var(--green)}
.foot__grid p:last-child{color:var(--ink-mute);font-size:.9rem}
.foot__legal{color:var(--ink-quiet);padding-top:1.4rem}
.foot__by{color:var(--ink-faint);padding-top:1.4rem}
.foot__by a{color:var(--ink-mute);text-decoration:none;transition:color .25s ease}
.foot__by a:hover{color:var(--green)}

/* ── reveal ──────────────────────────────────────────────
   Hero uses CSS keyframes only: it can never depend on JS,
   GSAP or a live rAF to become visible.
   Scroll sections are hidden by JS *only after* it has proved
   that rAF actually ticks (see main.js), so a throttled or
   dead rAF leaves the page fully readable. */
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .js-r{opacity:0;animation:riseIn .9s cubic-bezier(.22,.61,.36,1) forwards}
.hero__inner>.js-r:nth-child(1){animation-delay:.10s}
.hero__inner>.js-r:nth-child(2){animation-delay:.18s}
.hero__inner>.js-r:nth-child(3){animation-delay:.26s}
.hero__inner>.js-r:nth-child(4){animation-delay:.34s}
.hero__inner>.js-r:nth-child(5){animation-delay:.44s}
.hero__inner>.js-r:nth-child(6){animation-delay:.54s}
.hero__inner>.js-r:nth-child(7){animation-delay:.64s}
.hero__inner>.js-r:nth-child(8){animation-delay:.72s}

.js-motion .band .js-r:not([data-split]),
.js-motion .foot .js-r:not([data-split]){opacity:0;transform:translateY(18px)}

@media (max-width:860px){
  .contact{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .sched__row{grid-template-columns:1fr;gap:.35rem}
  .sched__t{padding-top:0}
  .hero__title{max-width:none}
}
@media (max-width:520px){
}
@media (prefers-reduced-motion:reduce){
  .js-motion .band .js-r,.js-motion .foot .js-r{opacity:1;transform:none}
  .hero .js-r{opacity:1;animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html:not(.lenis){scroll-behavior:auto}
}

/* ============================================================
   MOTION + INTERACTIVE COMPONENTS
   Shared across every page of the site, not homepage-specific.
   ============================================================ */

/* ── split-line heading reveal ───────────────────────── */
.ln{display:block;overflow:hidden}
.ln__i{display:block}

/* ── draggable carousel ──────────────────────────────── */
.dcar{position:relative;margin-top:2.8rem}
.dcar__track{margin-top:0;will-change:transform}
.dcar.is-draggable{cursor:grab;overflow:hidden;touch-action:pan-y}
.dcar.is-draggable .dcar__track{width:max-content;grid-auto-flow:column;
  grid-template-columns:none;grid-auto-columns:minmax(272px,320px)}
.dcar.is-dragging{cursor:grabbing;user-select:none}
.dcar.is-dragging a,.dcar.is-dragging img{pointer-events:none}
.dcar__hint{margin-top:1rem;color:var(--ink-quiet);letter-spacing:.14em;display:none}
.dcar.is-draggable+.dcar__hint,.dcar.is-draggable .dcar__hint{display:block}
.dcar:focus-visible{outline:2px solid var(--green);outline-offset:6px}
/* the track keeps its grid look when it fits and doesn't need dragging */
.dcar.is-static{cursor:auto}

/* ── marquee ─────────────────────────────────────────── */
.mq{overflow:hidden;border-block:0;background:var(--green);
  padding-block:1.15rem}
.mq__row{display:flex;width:max-content}
.mq__set{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;flex:none}
.mq__set>span{font-family:var(--disp);font-weight:700;text-transform:uppercase;color:#fff;font-size:clamp(1.3rem,2.4vw,2.1rem);
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;text-transform:uppercase}
.mqi-img{height:clamp(34px,3.4vw,50px);width:auto;flex:none;display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}

/* ── figures ─────────────────────────────────────────── */
.figs__n span[data-count]{font-variant-numeric:tabular-nums}

/* reduced motion: no transforms, no marquee, carousels stay grids */
@media (prefers-reduced-motion:reduce){
  .ln__i{transform:none!important}
  /* carousels stay carousels — dragging is user-driven, not vestibular motion */
}

/* ============================================================
   EDITORIAL LAYOUT + PHASED PROGRAMME
   ============================================================ */

/* section index watermark */
.band{position:relative;overflow:clip}
.wm{position:absolute;top:clamp(28px,5vw,60px);right:calc(var(--gut) * .4);
  font-family:var(--disp);font-weight:800;font-size:clamp(5rem,14vw,12rem);line-height:.8;
  color:rgba(221,221,221,.028);pointer-events:none;user-select:none;letter-spacing:-.04em;z-index:0}
.band>.shell{position:relative;z-index:1}

/* ── editorial two-column ────────────────────────────── */
.ed{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:start}
.ed__side{position:sticky;top:clamp(90px,12vh,130px)}
.ed__fig{margin-top:2rem;overflow:hidden;aspect-ratio:3/4;background:#000;position:relative}
.ed__fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(17,17,17,0),rgba(17,17,17,.5))}
.ed__fig img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) brightness(.9) contrast(1.05)}
.ed__lead{font-family:var(--disp);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.15rem,2.3vw,1.55rem);line-height:1.4;max-width:26ch}
.ed__body .prose{margin-top:2rem}
@media(max-width:900px){
  .ed{grid-template-columns:1fr}
  .ed__side{position:static}
  .ed__fig{aspect-ratio:16/10;margin-top:1.4rem}
}

/* pillars get numbers */
.pillars__n{color:var(--ink-faint)!important;font-size:.62rem;letter-spacing:.16em;
  grid-row:1/3;padding-top:.25rem}
.pillars li{transition:background .35s ease}
.pillars li:hover{background:var(--ground-alt)}

/* ── scroll-scrubbed word reveal ─────────────────────── */
[data-scrub] .sw{transition:color .18s linear}
.js-motion [data-scrub] .sw{color:rgba(221,221,221,.55)}
.js-motion [data-scrub] .sw.on{color:var(--ink)}

/* ── phased programme ────────────────────────────────── */
.sched{margin-top:2.6rem;border-top:0}
.ph{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.2rem,3vw,3rem);padding-block:clamp(1.6rem,3vw,2.6rem);
  border-top:1px solid var(--rule)}
.ph__head{position:sticky;top:clamp(90px,12vh,130px);align-self:start}
.ph__k{color:var(--ink);font-size:.86rem;letter-spacing:.1em;display:flex;
  align-items:baseline;gap:.6rem}
.ph__n{color:var(--green)}
.ph__t{color:var(--green);margin-top:.5rem;font-size:.72rem}
.ph__w{color:var(--ink-quiet);font-size:.86rem;margin-top:.9rem;max-width:34ch;line-height:1.6}
@media(max-width:820px){
  .ph{grid-template-columns:1fr;gap:1rem}
  .ph__head{position:static}
}

/* ── président ───────────────────────────────────────── */
.pres{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);
  align-items:center;margin-top:2rem}
.pres__portrait{aspect-ratio:3/4;border:1px dashed var(--rule-2);border-radius:0;
  display:grid;place-content:center;background:rgba(221,221,221,.025);
  transition:border-color .35s ease}
.pres__portrait span{color:var(--ink-quiet);font-size:.6rem;letter-spacing:.14em}
.pres__portrait:hover{border-color:var(--green)}
.pres .quote{margin:0}
.creds{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.creds li{border:1px dashed var(--rule-2);border-radius:0;padding:5px 12px;
  color:var(--ink-mute);font-size:.62rem;letter-spacing:.12em}
@media(max-width:700px){.pres{grid-template-columns:1fr}.pres__portrait{max-width:180px}}

/* ============================================================
   SPONSOR PLACEMENTS — the screen the site exists for.
   Empty is the PRIMARY state: each lot is a designed frame with
   tier identity, not a grey box. Corner brackets echo the logo's
   cadre vert.
   ============================================================ */
.lots__intro{max-width:62ch}
.lots{margin-top:3rem}
.lots--inst{margin-top:3.6rem;padding-top:2.4rem;border-top:1px solid var(--rule)}
.lots__k{color:var(--ink);display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin:2.4rem 0 1rem;font-size:.74rem}
.lots__k:first-child{margin-top:0}
.lots__k span{color:var(--ink-faint)}
.lots__k em{color:var(--green);font-style:normal;margin-left:auto;letter-spacing:.1em}
.lots__x{color:var(--ink-mute);font-size:.93rem;max-width:56ch;margin:-.4rem 0 1.4rem}
.lots__row{display:flex;flex-wrap:wrap;gap:14px}

.lot{position:relative;flex:1 1 190px;min-width:0;min-height:148px;border-radius:0;
  background:linear-gradient(160deg,rgba(221,221,221,.045),rgba(221,221,221,.012));
  border:1px solid var(--rule);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.35rem;padding:1.1rem .9rem 2.3rem;
  text-align:center;overflow:hidden;
  transition:border-color .4s ease,background .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.lot::before{content:"";position:absolute;inset:0;opacity:0;
  background:radial-gradient(120% 100% at 50% 0%,rgba(69,153,86,.16),transparent 70%);
  transition:opacity .45s ease}
.lot:hover{border-color:rgba(69,153,86,.55);transform:translateY(-3px)}
.lot:hover::before{opacity:1}

/* corner brackets — the charte's cadre, quartered */
.lot:hover 
.lot__k{color:var(--green);font-size:.58rem;letter-spacing:.18em}
/* tier labels struck in their own metal */
.lot__k[data-metal]{font-weight:700;background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.lot__k[data-metal="platinum"]{background-image:linear-gradient(100deg,
  #6E7478 0%,#CfD4D8 26%,#FFFFFF 44%,#AEB5BA 62%,#E9EDF0 80%,#7A8085 100%)}
.lot__k[data-metal="gold"]{background-image:linear-gradient(100deg,
  #7A5A12 0%,#D9AE4A 26%,#FBEEA8 46%,#C9982F 64%,#F0D384 82%,#8A6716 100%)}
.lot__k[data-metal="silver"]{background-image:linear-gradient(100deg,
  #5F6468 0%,#B9BEC2 28%,#EDF0F2 48%,#9AA0A5 66%,#D2D7DA 84%,#6B7074 100%)}
.lot__k[data-metal="bronze"]{background-image:linear-gradient(100deg,
  #6B3B1E 0%,#B87333 28%,#E3A86B 48%,#9C5A28 66%,#D0904F 84%,#71401F 100%)}
.lot__k[data-metal="inst"]{background-image:linear-gradient(100deg,
  #3F6B4C 0%,#7FBF95 30%,#D6F0DF 50%,#69A87E 70%,#4A7A59 100%)}
.lot__cta{margin-top:.7rem;font-family:var(--disp);font-weight:600;font-size:.86rem;
  color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.28);transition:color .3s ease,text-decoration-color .3s ease}
.lot:hover .lot__cta{color:#fff;text-decoration-color:var(--green)}
.lot__m{font-family:var(--disp);font-weight:800;letter-spacing:-.01em;
  color:rgba(221,221,221,.55);font-size:1.05rem;transition:color .4s ease}
.lot:hover .lot__m{color:var(--ink)}
/* neutral placeholder mark instead of the "Votre logo" label */
.lot__logo{width:min(78%,190px);height:auto;object-fit:contain;
  opacity:.55;transition:opacity .3s ease;margin:.35rem 0}
.lot:hover .lot__logo{opacity:.9}
.lot--xl .lot__logo{width:min(52%,260px)}
.lot--l .lot__logo{width:min(74%,200px)}
.lot__n sup{font-size:.82em;vertical-align:.35em;line-height:0}
.lot__n{color:rgba(221,221,221,.58);font-size:.62rem;letter-spacing:.1em;max-width:26ch;line-height:1.7}

.lot--xl{flex-basis:100%;min-height:210px}
.lot--xl .lot__m{font-size:1.9rem}
.lot--l{flex-basis:calc(33.333% - 9.34px);min-width:0;min-height:168px}
.lot--l .lot__m{font-size:1.3rem}
.lot--m{flex-basis:calc(25% - 10.5px);min-width:0;min-height:158px}
.lot--s{flex-basis:calc(16.666% - 11.67px);min-width:0;min-height:122px}
.lot--s .lot__m{font-size:.8rem}
.lot--s .lot__n{display:none}
@media(max-width:900px){.lot--s{flex-basis:calc(33.333% - 9.34px)}}
@media(max-width:820px){.lot--m{flex-basis:calc(50% - 7px)}}
@media(max-width:640px){
  .lot--l{flex-basis:100%}
  .lot--m{flex-basis:calc(50% - 7px)}
  .lot--s{flex-basis:calc(33.333% - 10px)}
  .lots__k em{margin-left:0;width:100%}
}

/* ── rhythm breakers ─────────────────────────────────── */
.mid{margin-inline:auto;text-align:center}
.mid .label{justify-content:center}
.mid .h2{margin-inline:auto}
.mid .lede{max-width:46ch;margin-inline:auto}
.tiers,.figs{position:relative;z-index:1}

/* section with a photographic backdrop */
.band--shot{position:relative;isolation:isolate}
.band__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.band__media img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.75) brightness(.42) contrast(1.08)}
.band__scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--ground),rgba(17,17,17,.82) 30%,rgba(17,17,17,.86) 70%,var(--ground))}
.band--shot .form :is(input,select,textarea):not(:focus){
  border-bottom-color:rgba(221,221,221,.28)}
/* institutional row: 4 across, never 3+1 */
.lots--inst .lot--l{flex-basis:calc(25% - 11px);min-width:0}
@media(max-width:820px){.lots--inst .lot--l{flex-basis:calc(50% - 7px)}}

/* ── B2: nav must never push its CTA off a phone ─────── */
@media (max-width:640px){
  /* phone nav: burger · logo · lang · CTA, all breathing on one line */
  .nav{padding:10px 12px}
  .nav__bar{gap:.5rem;padding:8px 10px}
  .nav__logo{width:104px}
  .nav__burger{width:40px;height:40px}
  .nav__lang{width:32px;height:32px;font-size:.55rem}
  .nav__cta{font-size:.72rem;letter-spacing:.02em;padding:9px 12px;margin-left:auto}
}
@media (max-width:400px){
  .nav__logo{width:92px}
  .nav__burger{width:46px;height:46px}
}
@media (max-width:340px){
  .nav__logo{width:80px}
}

/* ── B7: carousel prev/next, siblings of the track ───── */
.dcar__nav{display:none;gap:.5rem;margin-top:1rem}
.dcar__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-2);
  background:transparent;color:var(--ink);font-size:1rem;cursor:pointer;
  display:grid;place-content:center;transition:background .3s ease,border-color .3s ease,opacity .3s ease}
.dcar__btn:hover:not(:disabled){background:var(--green);border-color:var(--green);color:var(--ground)}
.dcar__btn:disabled{opacity:.32;cursor:default}
.dcar.is-draggable ~ .dcar__nav{display:flex}
.dcar.is-draggable + .dcar__hint,.dcar.is-draggable .dcar__hint{display:block}

/* ── A8: the pitch screen gets its sticky moment in CSS,
      now that .band no longer creates a scroll container ── */
#emplacements>.shell{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.2rem,3vw,3rem);align-items:start}
#emplacements .lots__intro{position:sticky;top:clamp(90px,12vh,130px);align-self:start;max-width:none}
#emplacements .lots,#emplacements .lots--inst{grid-column:2}
#emplacements .lots{margin-top:0}
@media(max-width:900px){
  #emplacements>.shell{grid-template-columns:1fr}
  #emplacements .lots,#emplacements .lots--inst{grid-column:1}
  #emplacements .lots__intro{position:static;max-width:62ch}
}

/* ============================================================
   PACKAGE CONFIGURATOR — driven live in a sponsor meeting
   ============================================================ */
.cfg{margin-top:3.4rem;padding-top:2.6rem;border-top:1px solid var(--rule)}
.cfg__head{max-width:44ch;margin-bottom:2rem}
.cfg__h{font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.015em;line-height:1.25}
.cfg__grid{display:grid;gap:clamp(1.6rem,3vw,3rem);grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.cfg__k{color:var(--green);margin-bottom:.9rem}
.cfg__opts{display:grid;gap:8px}
.cfg__opts--multi{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(221,221,221,.035);border:1px solid var(--rule);border-radius:0;
  padding:.85rem 1rem;cursor:pointer;text-align:left;color:var(--ink);width:100%;
  font-family:var(--body);font-size:.92rem;
  transition:border-color .3s ease,background .3s ease,transform .25s ease}
@media (hover:hover){
  .opt:hover{border-color:rgba(69,153,86,.5);background:rgba(69,153,86,.06);transform:translateY(-1px)}
}
.opt__n{font-weight:500}
.opt__p{color:var(--ink-quiet);white-space:nowrap;font-size:.68rem}
.opt[aria-pressed="true"]{border-color:var(--green);background:rgba(69,153,86,.12);
  box-shadow:inset 3px 0 0 var(--green)}
[data-tier].opt[aria-pressed="true"] .opt__n::before{content:"● ";color:var(--green)}
.opt[aria-pressed="true"] .opt__p{color:var(--green)}
.opt--add[aria-pressed="true"] .opt__n::before{content:"✓ ";color:var(--green)}

.cfg__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start;
  margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.cfg__sum{min-width:0}
.cfg__list{color:var(--ink-quiet);font-size:.9rem;line-height:1.7;max-width:52ch}
.cfg__tot{text-align:right}
.cfg__n{font-family:var(--disp);font-weight:800;font-size:clamp(1.9rem,4vw,2.8rem);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.cfg__n em{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.12em;
  color:var(--ink-quiet);display:block;margin-top:.5rem}
.cfg__tot .cta{margin-top:1.1rem;background:#fff;color:#0B0C0B;border-color:#fff}
.cfg__tot .cta:hover{background:var(--green);color:#0B0C0B;border-color:var(--green)}
@media(max-width:880px){
  .cfg__grid{grid-template-columns:1fr}
  .cfg__foot{grid-template-columns:1fr}
  .cfg__tot{text-align:left}
}

/* clicking a placement starts the conversation about that placement */
.lot{cursor:pointer;font:inherit;text-align:center}
.lot:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.lot:hover .lot--s 
/* ── #intervenants / #comite (still hidden) — a real base so
      removing `hidden` doesn't ship bare stacked divs. NOT built on
      .lot: those brackets read "unsold sponsor slot", wrong for people. */
.slotrow{display:flex;flex-wrap:wrap;gap:14px}
.slot{flex:1 1 250px;min-width:0;min-height:168px;display:grid;place-content:center;
  border:1px dashed var(--rule);border-radius:0;color:var(--ink-quiet);text-align:center;padding:1rem}
.slot span{font-size:.62rem;letter-spacing:.14em}
@media(max-width:640px){.slot{flex-basis:calc(50% - 7px)}}
/* <picture> must not become a layout box between the grid item and the img */
picture{display:contents}

/* screen-reader-only live region for the configurator total */
.cfg__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* CTA / carousel arrow — inline SVG because U+2192 is in none of the three
   shipped subsets, and the upstream faces don't carry it either */
.ico{width:20px;height:12px;flex:none;display:block}
.cta .ico{transition:transform .3s ease}
.cta:hover .ico{transform:translateX(4px)}
.dcar__btn .ico{width:18px;height:11px}

/* ============================================================
   TOUR MOHAMMED VI — the scroll-driven point cloud behind the page
   The canvas is a fixed base layer. Opaque sections pass over it like
   cutaways; the four "veil" sections let it through under a scrim
   heavy enough to keep body copy legible.
   Nothing here applies until tower.js confirms WebGL actually started
   (html.has-tower), so the JPEG poster remains the default.
   ============================================================ */
#tower{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;display:none}
.has-tower #tower{display:block}

/* the page ground moves to <html> so the canvas can sit under the body */
html{background:var(--ground)}
.has-tower body{background:transparent}
.has-tower main,.has-tower .foot{position:relative;z-index:1}
/* NOT .nav / .menu — they are already position:fixed with z-index 90/85, and
   forcing position:relative here put the 742px menu overlay back into flow. */

/* hero: the poster gives way to the live scene */
.has-tower .hero{background:transparent}
.has-tower .hero__media{opacity:0;transition:opacity .8s ease}
.has-tower .hero__scrim{
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 62%,rgba(0,0,0,.62) 84%,var(--ground) 100%)}

/* the four veil sections — tower visible, text still readable */
.has-tower #vision,
.has-tower #programme,
.has-tower #partenariat{background:rgba(17,17,17,.74);backdrop-filter:blur(1.5px)}

/* everything else stays opaque and hides the tower: .band--alt (#format,
   #president, #emplacements), both .pband photo bands, .band--shot
   (#contact), .mq and .foot already carry solid grounds. */
.has-tower .band--alt{background:var(--ground-alt)}

/* ============================================================
   HERO — Confer-register composition: centred display lockup,
   info boxes, and the REAL Tour Mohammed VI flanking both edges
   (the reference's column role). Photo is a 4K-upscaled matte;
   light comes from the right, so the right flank is the original
   and the left is mirrored. All hero motion is CSS keyframes —
   never rAF-dependent (see the js-motion gate rule).
   ============================================================ */
.hero--c{align-items:stretch;text-align:center;background:transparent;position:relative;overflow:hidden}
.hero__head{position:fixed;z-index:4;height:min(56svh,540px);width:auto;bottom:6svh;
  pointer-events:none;user-select:none;filter:brightness(.72) saturate(.85);
  animation:headIn 1.6s cubic-bezier(.22,.61,.36,1) .3s both;
  transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.hero__head--l{left:min(-105px,-7vw)}
.hero__head--r{right:min(-136px,-9vw);bottom:16svh}

.hero__head{transition:transform 1s cubic-bezier(.22,.61,.36,1),opacity .6s ease}

/* scroll starts → the heads part to the sides, Confer-column style */
.tucked .hero__head--l{transform:translateX(-43%)}
.tucked .hero__head--r{transform:translateX(26%)}
@keyframes headIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero__head{animation:none;transition:none}}
@media(max-width:900px){
  /* the heads stay on phones — smaller, further out, behind the type */
  .hero__head{display:block;height:min(42svh,380px);bottom:auto;top:21svh;
    opacity:.18;z-index:0}
  /* offsets are a share of each head's OWN width, so both show the same
     sliver whatever the image's aspect or the screen width */
  .hero__head--l{left:0;transform:translateX(-70%)}
  /* the man's photo already faces left — mirroring him turned his gaze
     outward on phones; no scaleX here */
  .hero__head--r{right:0;transform:translateX(70%)}
  .tucked .hero__head--l{transform:translateX(-84%)}
  .tucked .hero__head--r{transform:translateX(84%)}
  /* MOBILE ONLY: past the hero the figures leave the frame completely.
     This was a phone request — on desktop the heads keep their .tucked
     resting position all the way down the page. */
  .past-hero .hero__head--l{transform:translateX(-102%)}
  .past-hero .hero__head--r{transform:translateX(102%)}
}
.hero__tower{position:absolute;left:50%;bottom:0;height:min(88svh,820px);width:auto;
  z-index:0;pointer-events:none;user-select:none;
  animation:towerIn 1.6s cubic-bezier(.22,.61,.36,1) .2s both}
@keyframes towerIn{from{opacity:0;transform:translate(-50%,46px)}to{opacity:.42;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.hero__tower{animation:none;opacity:.42;transform:translateX(-50%)}}
@media(max-width:700px){.hero__tower{height:70svh;opacity:.3}}
.hero--c .hero__inner{max-width:1240px;margin-inline:auto;position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;width:100%;
  padding-top:clamp(7rem,20vh,15rem)}


.hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 46% at 50% 34%, rgba(69,153,86,.20), transparent 70%),
    radial-gradient(85% 55% at 50% 118%, rgba(69,153,86,.14), transparent 65%)}
.hero__grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 1 0 0 0 0 0.85 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}


.hero__name{font-family:var(--disp);font-weight:500;color:var(--ink);
  font-size:clamp(2.4rem,5.2vw,4.7rem);line-height:1.12;letter-spacing:-.02em;margin:0}
.hero__name .hn-dot{color:var(--red)}
/* "IA" drawn in the site's ascii vocabulary */
.hn-ia{display:inline-block;vertical-align:-.04em}
.hn-ia pre{font-family:var(--mono);font-size:.053em;line-height:1.05;letter-spacing:0;
  margin:0;white-space:pre;color:#EDEDED;user-select:none}
.hn-ia .o1{color:#8A8A8A;opacity:.3}.hn-ia .o2{color:#BFBFBF;opacity:.5}
.hn-ia .o3{color:#EDEDED;opacity:.8}.hn-ia .o4{color:#FFFFFF;opacity:1}
.hn-ia--q{display:block;margin-bottom:1.2rem}
.hn-ia--q pre{font-size:4.6px;color:#9FD8B4}
.hn-ia--q .o1{color:#4A7A5E;opacity:.3}.hn-ia--q .o2{color:#6FB489;opacity:.5}
.hn-ia--q .o3{color:#9FD8B4;opacity:.75}.hn-ia--q .o4{color:#D9FFE9;opacity:.98}


.hero__tag{margin-top:1.3rem;font-family:var(--disp);font-weight:600;color:var(--ink);
  font-size:clamp(1.15rem,2.6vw,1.7rem);letter-spacing:-.015em}
.hero--c .hero__sub{margin:1.4rem auto 0;max-width:58ch;
  font-family:var(--disp);font-weight:400;color:rgba(255,255,255,.82);
  font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.6}

.hero__info{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(2.2rem,6vh,3.6rem);background:transparent;
  position:relative;width:auto;margin-inline:auto}
.hero__info::before,.hero__info::after{content:"";position:absolute;left:50%;
  width:100vw;transform:translateX(-50%);border-top:1px dashed rgba(255,255,255,.12);
  pointer-events:none}
.hero__info::before{top:0}
.hero__info::after{bottom:0}
.hero__info>div{background-color:rgba(5,6,5,.82);border:1px dashed rgba(255,255,255,.16);
  backdrop-filter:blur(5px);
  padding:16px;width:300px;flex:0 0 auto;display:grid;gap:10px;place-content:center;
  border-radius:0}
.hero__info span{color:rgba(255,255,255,.6);font-size:1rem;font-weight:700;letter-spacing:.1em}
.hero__info strong{font-family:var(--disp);font-weight:500;font-size:1.25rem;line-height:1.2;color:#fff;white-space:nowrap}

.hero--c .cta{margin-top:auto;box-shadow:0 0 70px 45px rgba(4,5,4,.78);
  background:var(--red);color:#fff;border-color:var(--red)}
.hero--c .cta:hover{background:#B80500;color:#fff;border-color:#B80500}

@media(max-width:900px){
    .hero__info>div{min-width:calc(50% - 1px);flex:1}
}
@media(max-width:560px){
    .hero__name,.hero--c .hero__sub{position:relative;z-index:1}
    /* the title sits higher on phones — less dead space under the nav */
    .hero--c .hero__inner{padding-top:clamp(2.4rem,7vh,4.5rem)}
    .hero__info{gap:0;width:100vw;margin-inline:calc(50% - 50vw);
      margin-top:clamp(1.4rem,4vh,2rem);margin-bottom:clamp(1.4rem,4vh,2rem)}
    .hero__info::before,.hero__info::after{display:none}
    .hero__info>div{min-width:100%;padding:15px 16px;gap:.2rem;
      border:0;border-top:1px dashed rgba(255,255,255,.16);
      background-color:rgba(5,6,5,.72)}
    .hero__info>div:last-child{border-bottom:1px dashed rgba(255,255,255,.16)}
    .hero__info span{font-size:.62rem;letter-spacing:.16em}
    .hero__info strong{font-size:1.05rem}
    .hero--c .cta{margin-top:.6rem}
}
@media(prefers-reduced-motion:reduce){
  }
/* the reference's glowing green primary nav CTA */
.pill--go{background:rgba(69,153,86,.12);color:var(--green);border:1px solid rgba(69,153,86,.55);
  box-shadow:0 0 14px rgba(69,153,86,.25), inset 0 0 10px rgba(69,153,86,.10)}
.pill--go:hover{background:var(--green);color:var(--ground);box-shadow:0 0 20px rgba(69,153,86,.45)}

/* ============================================================
   REFERENCE REGISTER — measured anatomy applied site-wide.
   48px centred titles · one giant 32px/-1.2px lead at 660px ·
   image-top black cards (img 211px, title 28px) · green 32px
   phase labels · 48/20 stats · 100px block rhythm.
   ============================================================ */
.sec{padding-block:100px}
.wm{display:none}                                   /* TDC-era watermarks retired */

/* centred section header */
.sh{text-align:center;max-width:820px;margin:0 auto 1.6rem}
.sh__tag{color:var(--green);letter-spacing:.22em;margin-bottom:1.1rem}
.sh__tag--h{text-align:left;margin-bottom:1.4rem;display:block}
.sh__t{font-family:var(--disp);font-weight:600;color:var(--ink);
  font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.2;letter-spacing:-.02em;
  max-width:none;text-wrap:balance}
.sh__t--left{text-align:left;margin-inline:0}
#emplacements .sh__tag{text-align:left;display:block}

/* the giant centred lead */
.sec__lead{max-width:660px;margin:2.2rem auto 0;text-align:center;
  font-family:var(--body);font-weight:400;color:var(--ink);
  font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.2;letter-spacing:-1.2px}
.sec__lead--s{font-size:clamp(1.1rem,1.8vw,1.45rem);color:var(--ink-quiet);letter-spacing:-.4px}
.sec__prose{max-width:660px;margin:2.6rem auto 0;display:grid;gap:1.2rem;text-align:center}
.sec__prose p{color:rgba(221,221,221,.6);font-size:1rem;line-height:1.7}

/* image-top cards — img 211px, black card, 28px title, 24px pad */
.kcards{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:3.4rem}
.kc{background:#000;padding:0 0 24px;display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--rule);overflow:hidden;
  transition:border-color .35s ease,transform .35s ease}
.kc:hover{border-color:rgba(69,153,86,.4);transform:translateY(-3px)}
.kc__img{height:211px;overflow:hidden}
.kc__img img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) brightness(.85) contrast(1.05);
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.kc:hover .kc__img img{transform:scale(1.05)}
.kc__t{font-family:var(--disp);font-weight:700;font-size:1.5rem;line-height:1.2;
  letter-spacing:-.01em;padding-inline:20px}
.kc__b{color:rgba(221,221,221,.6);font-size:1rem;line-height:1.55;padding-inline:20px}
@media(max-width:980px){.kcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.kcards{grid-template-columns:1fr}}

/* programme → the reference agenda construction: every session is its
   own dashed box with gaps; a dashed divider splits the ~330px time
   column from content; day chips are chunky green gradient boxes. */
#programme .sched{max-width:1240px;margin-inline:auto;margin-top:3rem;border-top:0}
#programme .ph{grid-template-columns:1fr;gap:0;border-top:0;padding-block:0 clamp(3rem,6vw,5.5rem)}
#programme .ph__head{position:sticky;top:clamp(120px,16vh,180px);z-index:1;align-self:start}
#programme .ph__w{max-width:60ch;color:rgba(221,221,221,.5);font-size:.9rem;margin:.9rem 0 1.6rem}
#programme .ph__rows{border:0;border-radius:0;padding:0;display:grid;gap:24px}
#programme .ph{padding-bottom:clamp(4rem,8vw,7rem)}
#programme .sched__row{display:block;min-height:300px;
  border:1px dashed rgba(221,221,221,.22);
  background:#0C0F0C;padding:32px 0;
  position:sticky;top:clamp(280px,34vh,400px);z-index:2;
  box-shadow:0 -30px 44px -24px rgba(0,0,0,.75)}
#programme .sess{display:grid;grid-template-columns:330px 1fr;align-items:start}
#programme .sess--sp{grid-template-columns:330px 1fr auto}
#programme .sess + .sess{margin-top:30px;padding-top:30px;
  border-top:1px dashed rgba(221,221,221,.13)}
#programme .sched__row:only-child{min-height:0}
#programme .sched__row:hover{background:#0E120E;padding-inline:0}
#programme .sched__row:last-child{border-bottom:1px dashed rgba(221,221,221,.22)}
#programme .sched__t{color:var(--ink);font-weight:500;font-size:.95rem;letter-spacing:.04em;
  padding:0 28px;align-self:start;
  border-right:1px dashed rgba(221,221,221,.18);height:100%;display:block}
#programme .sched__b{padding:0 32px}
#programme .sched__b h4{font-family:var(--disp);font-weight:700;font-size:1.6rem;
  letter-spacing:-.015em;line-height:1.2}
#programme .sched__b p{color:rgba(221,221,221,.6);font-size:1.02rem;margin-top:.6rem;max-width:58ch}
#programme .schip{margin:0 28px 0 0;align-self:center}
#programme .tagpar{font-size:.62rem}
@media(max-width:820px){
  #programme .sched__row{padding:20px;position:static;min-height:0;box-shadow:none}
  #programme .sess,#programme .sess--sp{grid-template-columns:1fr;gap:.6rem}
  #programme .ph__head{position:static}
  #programme .sched__t{border-right:0;padding:0;height:auto}
  #programme .sched__b{padding:0}
  #programme .schip{margin:0.6rem 0 0}
}

/* learn cards — three complete units (image slice + text) that arrive
   individually from different depths and land into one row where the
   slices join: ascii hand → logo ← ascii hand */

/* le format — hero-style grainy dome ground */
#format{position:relative;background:#050705;isolation:isolate}
#format::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--aurora,none) center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 88%,transparent)}
#format::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 1 0 0 0 0 0.85 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#format .shell{max-width:1400px}
.learn{margin-top:2.2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  align-items:stretch}
.lcard{border:1px dashed rgba(255,255,255,.14);background:#050605;
  display:flex;flex-direction:column}
.lcard__img{flex:none}
.lcard__txt{flex:1}
.lcard__img{height:auto;aspect-ratio:1.6667;background:#0A0D0A;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  container-type:inline-size;
  border-bottom:1px dashed rgba(255,255,255,.14)}
.hand{font-family:var(--mono);font-size:calc(100cqi / 42);line-height:1.05;
  letter-spacing:0;color:#9FD8B4;margin:0;user-select:none;white-space:pre;flex:none}
.hand .o1{color:#4A7A5E;opacity:.3}.hand .o2{color:#6FB489;opacity:.5}
.hand .o3{color:#9FD8B4;opacity:.75}.hand .o4{color:#D9FFE9;opacity:.98}
.learn__logo{width:min(190px,44%);height:auto;display:block;flex:none;position:relative;z-index:1;background:#0A0D0A;padding:12px 16px}
.lcard__img--logo{position:relative;justify-content:center!important;padding:0}
.hand--tip{position:absolute;top:50%;transform:translateY(-50%)}
.lcard__img--logo .hand--tip:first-of-type{left:0}
.lcard__img--logo .hand--tip:last-of-type{right:0}
.lcard__txt{padding:20px 22px 24px}
.lcard__txt h3{font-family:var(--disp);font-weight:600;font-size:1.55rem;letter-spacing:-.015em}
.lcard__txt p{color:rgba(221,221,221,.6);font-size:1rem;line-height:1.55;margin-top:.6rem;max-width:38ch}
@media(max-width:820px){
  /* phones: the row stays HORIZONTAL and becomes a swipe carousel, so the
     hands keep reaching left→right toward the lockup exactly as designed */
  .learn{display:flex;grid-template-columns:none;gap:0;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .learn::-webkit-scrollbar{display:none}
  .lcard{flex:0 0 84vw;scroll-snap-align:center;min-width:0}
  .lcard + .lcard{border-left:0}
  .learn__logo{width:min(200px,62%)}
  .lcard__txt{padding:20px 20px 24px}
}

/* day chip — the white button language: squared, black text */
.daychip{display:inline-flex;align-items:center;gap:1.2rem;margin-bottom:0;
  padding:13px 26px;border-radius:0;
  background:#fff;border:1px solid #fff}
.daychip__n{font-family:var(--disp);font-weight:600;font-size:1.7rem;letter-spacing:-.01em;
  color:#0B0C0B;margin:0;line-height:1}
.daychip__d{width:1px;height:26px;background:rgba(0,0,0,.3)}
.daychip__s{font-family:var(--disp);font-weight:500;font-size:1rem;color:#0B0C0B;margin:0}
#programme .ph.is-active .daychip{border-color:var(--green);box-shadow:0 0 0 2px var(--green) inset}
.js-motion #programme .ph:not(.is-active) .daychip{opacity:.55}

/* speaker chip — 84px duotone avatar, boxed */
.schip{display:inline-flex;align-items:center;gap:0;
  border:1px solid rgba(221,221,221,.16);background:rgba(0,0,0,.5)}
.schip__av{width:84px;height:84px;flex:none;display:grid;place-content:center;
  font-family:var(--mono);font-weight:600;font-size:1.25rem;color:#D8F7E6;
  background:radial-gradient(circle at 50% 30%, #1F6A3C, #08200F 80%)}
.schip__i{display:grid;gap:2px;padding:8px 20px}
.schip__i strong{font-family:var(--disp);font-weight:600;font-size:1.1rem;color:var(--ink)}
.schip__i em{font-style:normal;font-size:.9rem;color:rgba(221,221,221,.6)}

/* stats → 48px numbers, 20px labels at 60% */
.figs{border-top:0;text-align:center}
.figs__k{display:none}
.figs__row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.figs__n{font-family:var(--disp);font-weight:500;font-size:clamp(2rem,3.4vw,3rem);
  letter-spacing:-.02em;color:#fff}
.figs__n span[data-count],.figs__n span{color:#fff}
.figs__n span[data-count]{font-weight:500}
.figs__l{color:rgba(221,221,221,.6);font-size:1.1rem;margin-top:.4rem;max-width:none}

/* venue gallery — mixed grid */
.gal{display:grid;gap:24px;margin-top:3.2rem;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-auto-rows:minmax(200px,auto)}
.gal figure{margin:0;overflow:hidden;background:#000}
.gal img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.9);transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.gal figure:hover img{transform:scale(1.04)}
.gal__a{grid-row:1/3}
@media(max-width:760px){.gal{grid-template-columns:1fr}.gal__a{grid-row:auto}}

/* ============================================================
   CARD STACK — measured off the reference: rows are
   position:sticky; top:300px and each row COVERS the one before
   (no scale, no fade — a pure sticky cover). In-row cards sit
   brick-staggered ~14px, as measured (309/321).
   ============================================================ */
.kstack{margin-top:3.4rem}
.krow{position:sticky;top:280px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;background:var(--ground-alt);padding:14px 0 40px;
  box-shadow:0 -34px 50px -20px rgba(0,0,0,.65)}
.krow .kc:nth-child(2){margin-top:14px}
.krow .kc{opacity:1}
.kc__img{height:250px}
@media(max-width:700px){
  .krow{position:static;grid-template-columns:1fr;box-shadow:none;padding:0 0 20px}
  .krow .kc:nth-child(2){margin-top:0}
}
/* agenda scrollspy — the reference's "Active" day state */
.js-motion #programme .ph .ph__k{opacity:.3;transition:opacity .4s ease}
#programme .ph.is-active .ph__k{opacity:1}

/* ============================================================
   REFERENCE COMPONENTS — day chips, speaker chips, pricing
   passes, editorial cards, laurel tags. Shared blueprint
   vocabulary: dashed borders + corner nodes. OG colors only.
   ============================================================ */

/* intervenants — reference speaker cards, honest placeholders:
   duotone statue stand-ins + real session slots, names to come */
#intervenants .shell{max-width:1400px}
.spk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:3rem}
.spk__c{border:1px dashed rgba(255,255,255,.14);background:#050605;text-align:center;
  transition:border-color .3s ease}
.spk__c:hover{border-color:var(--green)}
.spk__img{height:clamp(260px,25vw,380px);background:#0A0D0A;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  border-bottom:1px dashed rgba(255,255,255,.14)}
.spk__img img{height:86%;width:auto;filter:grayscale(1) brightness(.66);opacity:.9;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);
  mask-image:linear-gradient(180deg,#000 74%,transparent)}
.spk__img--flip img{transform:scaleX(-1)}
.spk__c h3{font-family:var(--disp);font-weight:600;font-size:1.45rem;letter-spacing:-.01em;
  margin:1.2rem 0 .35rem;color:rgba(255,255,255,.55)}
.spk__c p{color:rgba(221,221,221,.6);font-size:.95rem;padding:0 1rem;margin-bottom:1.4rem}
/* real portraits */
.spk__img--real img{height:100%!important;width:100%!important;object-fit:cover;
  filter:grayscale(1) brightness(.86) contrast(1.05);opacity:1;
  -webkit-mask-image:none;mask-image:none;transform:none}
.spk__c:hover .spk__img--real img{filter:grayscale(0) brightness(1)}
.pres2__av.pres2__av--real{padding:0;overflow:hidden;display:block;position:relative;
  aspect-ratio:1/1;background:#050605;border-bottom:0}
.pres2__av--real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.schip__av--real{padding:0;overflow:hidden;display:block;place-content:stretch}
.schip__av--real img{width:100%;height:100%;object-fit:cover;display:block}

/* named speaker: monogram plate until the real portrait arrives */
.spk__img--mono{background:radial-gradient(circle at 50% 30%, #1F6A3C, #08200F 82%);
  display:grid;place-content:center}
.spk__img--mono span{font-family:var(--mono);font-weight:600;font-size:3.4rem;color:#D8F7E6;
  letter-spacing:.04em}
.spk__c--named h3{color:var(--ink)}
/* blog cards: CTA now, article pages later */
.bcard{display:flex;flex-direction:column}
.bcard__cta{margin:1.9rem 1.4rem 1.4rem;margin-top:auto;padding:12px 14px;width:calc(100% - 2.8rem);
  font-family:var(--disp);font-weight:600;font-size:.9rem;letter-spacing:0;
  text-align:center;color:#0B0C0B;background:#fff;border:1px solid #fff;
  cursor:pointer;transition:background .3s ease,border-color .3s ease}
.bcard__cta:hover{background:var(--green);border-color:var(--green)}
.bcard__x{margin-bottom:1.5rem}
#intervenants .figs{margin-top:3.4rem;border-top:0}
#intervenants .figs__row>div+div{border-left:1px dashed rgba(255,255,255,.14)}
@media(max-width:1000px){.spk{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
  /* portraits keep their own 3:4 so no head gets cropped */
  .spk__img{height:auto;aspect-ratio:3/4}
  .spk__img--real img{object-position:center 18%}
  /* stats: a 2×2 block with rules between, not stray vertical lines */
  #intervenants .figs__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  #intervenants .figs__row>div{padding:18px 10px}
  #intervenants .figs__row>div+div{border-left:0}
  #intervenants .figs__row>div:nth-child(even){border-left:1px dashed rgba(255,255,255,.14)}
  #intervenants .figs__row>div:nth-child(n+3){border-top:1px dashed rgba(255,255,255,.14)}
  .figs__n{font-size:clamp(1.8rem,8vw,2.4rem)}
  .figs__l{font-size:.86rem}
}
@media(max-width:560px){.spk{grid-template-columns:1fr}}

/* word pop — the word under the cursor lifts a little */
.wrd{display:inline-block;white-space:nowrap;transition:transform .22s ease}
.wrd:hover{transform:translateY(-3px)}

/* le mot du président — photo-ready split: monogram card left
   (swaps to the official portrait in one file), letter right */
.pres2{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:2.6rem}
.pres2__card{border:1px dashed rgba(255,255,255,.14);background:#050605;
  text-align:center;padding:0 0 1.6rem;position:sticky;top:120px}
.pres2__av{aspect-ratio:3/4;display:grid;place-content:center;
  background:radial-gradient(circle at 50% 32%, #1F6A3C, #08200F 82%);
  border-bottom:1px dashed rgba(255,255,255,.14);margin-bottom:1.4rem}
.pres2__av span{font-family:var(--mono);font-weight:600;font-size:4.5rem;color:#D8F7E6}
.pres2__n{font-family:var(--disp);font-weight:600;font-size:1.35rem}
.pres2__r{font-size:.68rem;letter-spacing:.14em;color:rgba(255,255,255,.55);margin:.3rem 0 1rem}
.pres2__card .creds{justify-content:center;margin:0 1rem}
.pres2__note{font-size:.6rem;letter-spacing:.16em;color:rgba(255,255,255,.35);margin-top:1.1rem}
.pres2__body .quote{margin-top:0}
.pres2__body .prose{margin-top:1.8rem}
.pres2__body .sig__d{margin-top:1.6rem;color:rgba(221,221,221,.5);font-size:.9rem}
@media(max-width:900px){
  .pres2{grid-template-columns:1fr}
  .pres2__card{position:static;max-width:340px;margin-inline:auto}
}

/* CTA band — the conversion strip on the dome ground */
.ctaband{position:relative;text-align:center;overflow:hidden;isolation:isolate;
  padding-block:clamp(4.5rem,9vw,7rem);
  border-block:1px dashed rgba(255,255,255,.14);
  background:#050705}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--aurora,none) center 70%/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.ctaband::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 1 0 0 0 0 0.85 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.ctaband .shell{position:relative;z-index:1}
.ctaband__t{font-family:var(--disp);font-weight:600;color:var(--ink);
  font-size:clamp(1.7rem,3.2vw,2.7rem);letter-spacing:-.015em;line-height:1.25;
  max-width:24ch;margin-inline:auto}
.ctaband .cta{background:var(--red);color:#fff;border-color:var(--red);margin-top:2.2rem}
.ctaband .cta:hover{background:#B80500;border-color:#B80500;color:#fff}
/* the frame: eyebrow brackets at band scale */
.ctaband__frame{position:relative;padding:clamp(2.6rem,5vw,4rem) clamp(2rem,6vw,5rem);
  max-width:1000px;margin-inline:auto}
.ctaband__frame::before,.ctaband__frame::after{content:"";position:absolute;left:0;right:0;
  height:30%;border:1px solid var(--green);pointer-events:none}
.ctaband__frame::before{top:0;border-bottom:0}
.ctaband__frame::after{bottom:0;border-top:0}
.ctaband__k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:1.1rem}
/* fingertips reaching toward the button */
.ctaband__tip{position:absolute;top:50%;font-size:4.6px;line-height:1.05;letter-spacing:0;
  margin:0;white-space:pre;user-select:none}
.ctaband__tip--l{left:-150px;transform:translateY(-50%);
  animation:tipL 3.6s ease-in-out infinite alternate}
.ctaband__tip--r{right:-150px;transform:translateY(-50%);
  animation:tipR 3.6s ease-in-out infinite alternate}
@keyframes tipL{from{transform:translateY(-50%) translateX(0)}to{transform:translateY(-50%) translateX(14px)}}
@keyframes tipR{from{transform:translateY(-50%) translateX(0)}to{transform:translateY(-50%) translateX(-14px)}}
@media(prefers-reduced-motion:reduce){.ctaband__tip{animation:none}}
@media(max-width:1100px){.ctaband__tip{font-size:3.4px;left:-96px;right:-96px}}
@media(max-width:820px){
  .ctaband__tip{display:block;font-size:2.5px}
  .ctaband__tip--l{left:-58px}
  .ctaband__tip--r{right:-58px}
}
/* mono facts pinned in the band corners */
.ctaband__c{position:absolute;z-index:1;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}
.ctaband__c--tl{top:18px;left:clamp(120px,10vw,160px)}
.ctaband__c--tr{top:18px;right:clamp(120px,10vw,160px)}
@media(max-width:820px){
  .ctaband{padding-block:clamp(3rem,7vw,4.5rem)}
  .ctaband__c{position:static;display:inline-block;margin:0 .45rem 1.4rem;
    font-size:.55rem;letter-spacing:.14em}
  .ctaband__c--tl::after,.ctaband__c--tr::after,.ctaband__c--bl::after{content:" ·";
    margin-left:.45rem;color:rgba(255,255,255,.22)}
  .ctaband__frame{padding:clamp(2rem,6vw,2.6rem) clamp(1.2rem,5vw,2rem)}
}
.ctaband__c--bl{bottom:18px;left:clamp(120px,10vw,160px)}
.ctaband__c--br{bottom:18px;right:clamp(120px,10vw,160px)}

/* consent block + legal document pages */
.consent{margin-top:.4rem}
.consent__l{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer}
.consent__l input{width:16px;height:16px;flex:none;margin-top:.2rem;accent-color:var(--green);
  border-radius:0}
.consent__l span{font-size:.86rem;line-height:1.5;color:rgba(221,221,221,.75)}
.consent__l input[aria-invalid="true"]{outline:2px solid var(--red);outline-offset:2px}
.consent__n{font-size:.74rem;line-height:1.55;color:rgba(221,221,221,.42);margin-top:.6rem}
.consent__n a{color:rgba(221,221,221,.7);text-decoration:underline;text-underline-offset:2px}
.consent__n a:hover{color:var(--green)}

.doc .nav{position:sticky}
.doc__w{max-width:760px}
.doc__up{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-top:1.4rem}
.doc__b{margin-top:2.6rem}
.doc__b h2{font-family:var(--disp);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;
  margin:2.4rem 0 .7rem;color:var(--ink)}
.doc__b h2:first-child{margin-top:0}
.doc__b p{color:rgba(221,221,221,.68);font-size:1rem;line-height:1.65}
.doc__b a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.doc__b strong{color:var(--ink);font-weight:600}
.todo{color:var(--red);font-family:var(--mono);font-size:.72em;letter-spacing:.06em}
.foot__bottom{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  justify-content:space-between}
.foot__links{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0}
.foot__links a{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(221,221,221,.45)}
.foot__links a:hover{color:var(--green)}

/* le lieu — the tower + the three event spaces inside it */
.venue{display:grid;gap:22px;margin-top:3rem;
  grid-template-columns:minmax(0,.92fr) minmax(0,.54fr) minmax(0,.54fr);
  grid-auto-rows:minmax(210px,auto)}
.venue__f{position:relative;margin:0;overflow:hidden;background:#000;
  border:1px dashed rgba(255,255,255,.14)}
.venue__f--tall{grid-row:1/3}
.venue__f--wide{grid-column:2/4}
.venue__f img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.82) brightness(.88);transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.venue__f:hover img{transform:scale(1.04)}
.venue__f figcaption{position:absolute;left:0;bottom:0;padding:9px 14px;
  background:rgba(5,6,5,.85);backdrop-filter:blur(4px);
  font-weight:600;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
  border-top:1px dashed rgba(255,255,255,.14);border-right:1px dashed rgba(255,255,255,.14)}
@media(max-width:820px){
  .venue{grid-template-columns:1fr 1fr}
  .venue__f--tall{grid-row:auto;grid-column:1/3}
  .venue__f--wide{grid-column:1/3}
}

/* les partenaires — the placement showcase: empty slots by design */
.pslots{margin-top:3rem}
.pslots__k{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);margin:2rem 0 1rem;text-align:center}
.pslots__k:first-child{margin-top:0}
.pslots__mq{overflow:hidden;display:flex;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.pslots__set{gap:18px;padding-right:18px;align-items:stretch}
.pslots__set .pslot{width:clamp(240px,31vw,400px);flex:none}
.pslots__s{color:rgba(255,255,255,.35);letter-spacing:.12em;margin-left:.7rem}
.pslot--n{background:#000}
.note--1l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(.54rem,.85vw,.66rem);text-align:center}
.pslot--logo{padding:18px 10px}
.pslot--logo img{max-width:92%;max-height:40px;width:auto;height:auto;object-fit:contain;
  opacity:.88;transition:opacity .3s ease}
.pslot--logo:hover img{opacity:1}
.pslot--n .pslot__n{font-family:var(--disp);font-weight:600;font-size:1.02rem;
  letter-spacing:-.01em;color:rgba(255,255,255,.82);text-align:center;padding:0 1rem;
  line-height:1.3}
.pslot--n:hover .pslot__n{color:#fff}
.pslot{min-height:110px;display:grid;place-content:center;
  border:1px dashed rgba(255,255,255,.16);background:#000;
  transition:border-color .3s ease,background .3s ease}
.pslot:hover{border-color:rgba(96,196,120,.5);background:#050805}
.pslot span{font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.3)}


/* la vision — editorial split: prose left, blueprint tower right,
   the client motto as a blueprint-framed pull line */
.vis{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.vis__body{text-align:left}
.vis__body .sec__lead,.vis__body .sec__prose p{margin-inline:0;text-align:left}
.vis__body .sec__lead{font-size:clamp(1.35rem,2.1vw,1.8rem);line-height:1.35;font-weight:500;max-width:30ch}
.vis__tower img{width:min(100%,420px);height:auto;display:block;margin-inline:auto;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent);
  mask-image:linear-gradient(180deg,#000 88%,transparent)}
.vis__quote{margin-top:2.4rem;padding:1.3rem 1.6rem 1.5rem;display:grid;gap:.55rem;width:fit-content;background-image:none!important}
.vis__quote span.mono{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vis__quote strong{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);
  letter-spacing:-.01em;color:var(--ink)}
.vis__quote .hn-dot{color:var(--red)}
@media(max-width:900px){
  .vis{grid-template-columns:1fr;position:relative}
  /* the tower drops behind the copy instead of sitting under it */
  .vis__tower{position:absolute;inset:0;z-index:0;pointer-events:none;
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  .vis__tower img{width:auto;height:104%;max-width:none;margin:0;opacity:.16;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 76%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 18%,#000 76%,transparent)}
  .vis__body{position:relative;z-index:1}
}

/* eyebrow tag framed like the logo lockup — two green half-brackets
   (top + bottom) with the side gaps at mid-height */
.sh__tag--laurel{display:inline-block;position:relative;padding:9px 20px;color:#fff}
.sh__tag--laurel::before,.sh__tag--laurel::after{content:"";position:absolute;left:0;right:0;
  height:34%;border:1px solid var(--green);pointer-events:none}
.sh__tag--laurel::before{top:0;border-bottom:0}
.sh__tag--laurel::after{bottom:0;border-top:0}

/* blueprint box: dashed border + corner nodes */
.dashbx{border:1px dashed rgba(221,221,221,.22);
  background-image:
    radial-gradient(circle, rgba(221,221,221,.6) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(221,221,221,.6) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(221,221,221,.6) 1.5px, transparent 2.2px),
    radial-gradient(circle, rgba(221,221,221,.6) 1.5px, transparent 2.2px);
  background-position:-2px -2px, calc(100% + 2px) -2px, -2px calc(100% + 2px), calc(100% + 2px) calc(100% + 2px);
  background-size:8px 8px;background-repeat:no-repeat}

/* pricing passes */
#partenariat .shell{max-width:1400px}
.passes{display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:3rem}
.passes--sec{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
/* configurator, rebuilt: visual tier chips + icon option cards + ticket total */
.cfg__step{margin-top:2.6rem}
.cfg__no{color:rgba(255,255,255,.35);margin-right:.5rem}
.tsels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:1rem}
.tsel{display:grid;gap:.35rem;text-align:left;padding:20px 18px;cursor:pointer;
  background:#000;border:1px dashed rgba(255,255,255,.16);
  transition:border-color .3s ease,background .3s ease,transform .3s ease}
.tsel:hover{border-color:rgba(255,255,255,.4)}
.tsel__n{font-family:var(--disp);font-weight:600;font-size:1.1rem;color:var(--ink)}
.tsel__d{color:rgba(221,221,221,.5);font-size:.8rem}
.tsel__p{color:#fff;font-size:.95rem;letter-spacing:.02em;margin-top:.5rem}
.tsel[aria-pressed="true"]{border-style:solid;border-color:#fff;background:#fff}
.tsel[aria-pressed="true"] .tsel__n{color:#0B0C0B}
.tsel[aria-pressed="true"] .tsel__d{color:rgba(11,12,11,.62)}
.tsel[aria-pressed="true"] .tsel__p{color:#0B0C0B}

.ocards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:1rem}
.ocard{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;
  padding:20px 14px 18px;text-align:center;
  background:#000;border:1px dashed rgba(255,255,255,.16);
  transition:border-color .3s ease,background .3s ease}
.ocard:hover{border-color:rgba(255,255,255,.4)}
.ocard img{height:46px;width:auto;max-width:80%;object-fit:contain;align-self:center;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));opacity:.9;transition:opacity .3s ease}
.ocard:hover img{opacity:1}
.ocard__n{font-family:var(--disp);font-weight:500;font-size:.9rem;line-height:1.3;
  color:rgba(221,221,221,.8);margin-top:.3rem}
.ocard__p{color:#fff;font-size:.8rem;letter-spacing:.02em;margin-top:auto;padding-top:.4rem}
.ocard{position:relative}
.ocard[aria-pressed="true"]{border-style:solid;border-color:#fff;background:#0A0B0A}
.ocard[aria-pressed="true"] .ocard__n{color:#fff}
.ocard[aria-pressed="true"] .ocard__p{color:#fff}
.ocard[aria-pressed="true"]::after{content:"";position:absolute;top:-1px;right:-1px;
  width:22px;height:22px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 0v24L0 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.ocard[aria-pressed="true"]::before{content:"";position:absolute;top:3px;right:3px;z-index:1;
  width:9px;height:6px;border-left:2px solid #0B0C0B;border-bottom:2px solid #0B0C0B;
  transform:rotate(-45deg)}

/* the total, as a ticket stub */
.cfg__ticket{--notch:0px;position:relative;margin-top:2.4rem;display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(1.5rem,4vw,3rem);
  align-items:center;padding:30px 32px;
  border:1px dashed rgba(221,221,221,.22);background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px)}
@media(max-width:1100px){
  .tsels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ocards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .tsels,.ocards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfg__ticket{grid-template-columns:1fr}
}

/* masterclasses — chrome-icon cards */
#masterclasses .shell{max-width:1400px}
.mcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:3rem}
.mcard{display:flex;flex-direction:column;padding:30px 26px;
  border:1px dashed rgba(221,221,221,.22);background:#000}
.mcard__i{width:auto;height:72px;max-width:100%;align-self:flex-start;object-fit:contain;
  display:block;margin-bottom:1.6rem;flex:none;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.5))}
.mcard__k{color:var(--green);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase}
.mcard h3{font-family:var(--disp);font-weight:600;font-size:1.45rem;letter-spacing:-.015em;
  margin:.6rem 0 .8rem;line-height:1.2}
.mcard__b{color:rgba(221,221,221,.62);font-size:.98rem;line-height:1.55}
.mcard__l{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.5rem}
.mcard__l li{position:relative;padding-left:1.1rem;color:rgba(221,221,221,.78);
  font-size:.88rem;line-height:1.5}
.mcard__l li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  background:var(--green)}
.mcard .pass__cta{margin-top:auto;padding:14px;line-height:1.35;text-align:center;
  display:block;box-sizing:border-box;text-decoration:none}
.mcard__l{margin-bottom:1.8rem}
.mcard--alt{background:rgba(255,255,255,.035);backdrop-filter:blur(10px)}
@media(max-width:900px){
  .mcards{grid-template-columns:1fr}
  .mcard{text-align:center;align-items:center}
  .mcard__i{align-self:center}
  .mcard__b{max-width:36ch}
  .mcard__l{justify-items:center}
  .mcard__l li{padding-left:0;text-align:center}
  .mcard__l li::before{display:none}
}

/* attendee passes — same ticket construction, 3 across */
.passes--3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3rem}
.passes--3 .pass{--notch:196px}
.pass__price--free{font-size:clamp(1.7rem,2.4vw,2.4rem)}
/* the masterclass supplement — a wide add-on bar under the three */
.passopt{margin-top:24px;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
  justify-content:space-between;padding:26px 28px;
  border:1px dashed rgba(221,221,221,.22);background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px)}
.passopt__l{max-width:62ch}
.passopt__l .mono{color:var(--green);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase}
.passopt__l h3{font-family:var(--disp);font-weight:600;font-size:1.35rem;margin:.5rem 0 .6rem}
.passopt__d{color:rgba(221,221,221,.6);font-size:.95rem;line-height:1.55}
.passopt__p{font-family:var(--disp);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.2rem);
  letter-spacing:-.02em;color:#fff;white-space:nowrap}
.passopt__p span{font-family:var(--mono);font-weight:600;font-size:.6rem;letter-spacing:.12em;
  color:rgba(221,221,221,.62)}
@media(max-width:900px){.passes--3{grid-template-columns:1fr}}
.pass{--notch:232px;position:relative;display:flex;flex-direction:column;padding:30px 26px;
  background:rgba(255,255,255,.035);backdrop-filter:blur(10px);overflow:hidden;
  border:1px dashed rgba(221,221,221,.22);
  -webkit-mask-image:
    radial-gradient(circle 10px at 0 var(--notch), transparent 9px, #000 10px),
    radial-gradient(circle 10px at 100% var(--notch), transparent 9px, #000 10px);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(circle 10px at 0 var(--notch), transparent 9px, #000 10px),
    radial-gradient(circle 10px at 100% var(--notch), transparent 9px, #000 10px);
  mask-composite:intersect}
/* the ticket tear line at the notches */
.pass::before{content:"";position:absolute;left:18px;right:18px;top:var(--notch);
  border-top:1px dashed rgba(221,221,221,.3);pointer-events:none}
/* the header zone is normalized so the tear lands at one height */
.pass__desc{min-height:92px}
.passes--sec .pass{-webkit-mask-image:none;mask-image:none}
.passes--sec .pass::before{display:none}
.passes--sec .pass__desc{min-height:0}
.pass--hi{background:
  linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.78)),
  linear-gradient(180deg,rgba(2,20,9,.30),rgba(1,12,5,.72)),
  url("../assets/stock/silk.webp") center/cover;
  border-color:rgba(69,153,86,.45)}
.pass__price{font-family:var(--disp);font-weight:600;font-size:clamp(2.1rem,3vw,3rem);
  letter-spacing:-.02em;color:#fff;line-height:1.1}
.pass__price span{font-family:var(--mono);font-weight:600;font-size:.62rem;letter-spacing:.12em;
  color:rgba(221,221,221,.62)}
.pass__price--s{font-size:1.25rem}
.pass__name{font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-top:.7rem}
.pass__desc{color:rgba(221,221,221,.6);font-size:.95rem;line-height:1.55;margin-top:.9rem}
.pass__list{list-style:none;margin:2rem 0;padding:0 0 .4rem;display:grid;gap:.7rem}
.pass__list li{position:relative;padding-left:1.7rem;color:rgba(221,221,221,.78);
  font-size:.92rem;line-height:1.5}
.pass__list li::before{content:"";position:absolute;left:0;top:.28em;width:14px;height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 6l4 4L13 1' fill='none' stroke='%23459956' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.pass__cta{margin-top:auto;width:100%;padding:14px;
  font-family:var(--disp);font-weight:600;font-size:.95rem;color:#0B0C0B;cursor:pointer;
  background:#fff;border:1px solid #fff;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.pass__cta:hover{background:var(--green);border-color:var(--green);color:#0B0C0B}
a.pass__cta{display:block;text-align:center;text-decoration:none}
.pass--sm{padding-bottom:26px}
@media(max-width:1080px){.passes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.passes--sec{grid-template-columns:1fr}}
@media(max-width:600px){.passes{grid-template-columns:1fr}}

/* editorial cards */
.bcards{display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:3.2rem}
.bcard{border:1px dashed rgba(221,221,221,.22);background:rgba(0,0,0,.28);
  display:flex;flex-direction:column;padding-bottom:22px;overflow:hidden;
  transition:border-color .35s ease,transform .35s ease}
.bcard:hover{border-color:rgba(69,153,86,.5);transform:translateY(-3px)}
.bcard__img{aspect-ratio:16/10;overflow:hidden;margin:-1px -1px 0}
.bcard__img img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) brightness(.88);transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.bcard:hover .bcard__img img{transform:scale(1.05)}
.bcard__cat{color:var(--green);font-family:var(--mono);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;padding:18px 20px 0}
.bcard__t{font-family:var(--disp);font-weight:700;font-size:1.35rem;line-height:1.25;
  letter-spacing:-.01em;padding:10px 20px 0}
.bcard__x{color:rgba(221,221,221,.6);font-size:.95rem;line-height:1.6;padding:10px 20px 0}
@media(max-width:900px){.bcards{grid-template-columns:1fr}}

/* ============================================================
   The tower lives as a centered hero emblem (.hero__tower,
   defined with the hero) — scrolling still adds .tucked on
   <html>, which only dims the page aurora now.
   ============================================================ */
/* content rides above the fixed atmosphere layers */
main,footer{position:relative;z-index:1}

.pass__more{color:rgba(221,221,221,.42)!important;font-size:.85rem!important}
.pass__more::before{display:none!important}

/* ============================================================
   PAGE ATMOSPHERE — fixed layers painted UNDER the tower
   fixtures (the hero itself is transparent; its old opaque
   ground was covering the lifted flanks). Grain runs page-wide
   at the reference's 0.22; the aurora dims once tucked.
   ============================================================ */
.pagebg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--aurora,none) center bottom/cover no-repeat #050705;
  transition:opacity 1.2s ease}
.tucked .pagebg{opacity:.45}
.pagegrain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 1 0 0 0 0 0.85 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* typography: never leave a single word orphaned on the last line */
.sh__t,.hero__name,.hero__tag,.cfg__h,.ctaband__t,.mcard h3,.lcard__txt h3,
.bcard__t,.pass__desc,.tsel__d,.ocard__n,.spk__c p,.pres2__n{text-wrap:balance}
.sec__lead,.sec__prose p,.prose p,.mcard__b,.lcard__txt p,.bcard__b,
.pslots__k,.note,.venue__f figcaption{text-wrap:pretty}

/* ---------- the official lockup (client feedback #5) ----------
   The brand, the venue, the organiser and the event's pilot, as he supplied them.
   Dark tiles with negative marks, matching the institutional partner logos elsewhere on
   the page. Waldorf keeps its own navy plate because its wordmark cannot be reproduced
   from the low-resolution file we were given. */
.lock{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(2.4rem,4vw,3.4rem);
  grid-template-columns:repeat(5,minmax(0,1fr))}
.lock__t{margin:0;display:flex;flex-direction:column;gap:.9rem}
.lock__k{color:var(--green);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  text-align:center}
.lock__p{display:grid;place-items:center;padding:26px 22px;min-height:132px;
  background:#000;border:1px dashed rgba(221,221,221,.22)}
.lock__p img{max-width:82%;max-height:52px;width:auto;height:auto;object-fit:contain;
  display:block;opacity:.92;transition:opacity .3s ease}
.lock__t:hover .lock__p img{opacity:1}
.lock__p svg{width:min(100%,170px);height:auto;display:block}
.lock__date{display:grid;place-content:center;gap:.1rem;text-align:center;
  font-family:var(--disp);font-weight:700;line-height:1.05;letter-spacing:.04em}
.lock__date b{display:block;font-size:1.05rem;color:var(--red)}
.lock__date span{display:block;font-size:1.05rem;color:var(--ink)}
.lock__date i{display:block;font-style:normal;font-size:1.5rem;color:var(--green)}
@media(max-width:1080px){ .lock{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:720px){ .lock{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:460px){ .lock{grid-template-columns:1fr} }

/* compact lockup strip in the footer */
.foot__lock{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,34px);
  padding-block:1.5rem;border-top:1px solid var(--rule)}
.foot__lock figure{margin:0;display:flex;align-items:center;gap:.7rem}
.foot__lock .mono{color:var(--ink-faint);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
.foot__lock img{height:24px;width:auto;max-width:98px;object-fit:contain;display:block;opacity:.8}
.foot__lock figure:nth-child(2) img{height:30px;max-width:54px}
.foot__lock svg{height:26px;width:auto;display:block}

/* ---------- the President's letter: keep the portrait alongside it ----------
   Two things were stopping the existing position:sticky on .pres2__card from ever moving:
   (1) .band{overflow:clip} silently disables sticky for every descendant — clipping only the
       horizontal axis keeps the decoration contained while restoring vertical sticky;
   (2) the grid uses align-items:start, so the left column was only as tall as the card and had
       no travel. It has to stretch to the row for the card to have somewhere to stick. */
.band:has(.pres2){overflow-x:clip;overflow-y:visible}
.pres2__side{align-self:stretch}
@media(max-width:900px){
  .pres2__card{position:static;top:auto}   /* stacked layout: nothing to stick to */
}

/* ============================================================
   PROGRAMME GATE (.plock) — client request (portal feedback 6):
   offer the running order in exchange for first name, last name
   and e-mail, "afin de valoriser son accès et de générer une
   première base de contacts".

   The phase heads (name, slot, summary) stay readable; only the
   hour-by-hour rows are gated, so the teaser is real content.

   The locked state applies only under `html.js`, which an inline
   script in <head> sets. Without JavaScript — and for any crawler
   that does not run it — the programme reads in full rather than
   sitting behind a permanent blur. The gate is a lead capture,
   not a secrecy mechanism.
   ============================================================ */
.plock{position:relative}
.plock__gate{display:none}
/* One item of the morning reads in full, then the blur begins. The rows are
   blurred individually rather than the whole body, so the veil that sits over
   them (lock + phrase) stays sharp. */
.js .plock.is-locked{display:grid;grid-template-rows:auto auto}
.js .plock.is-locked .plock__body{grid-area:1/1;
  max-height:clamp(575px,66vh,640px);overflow:hidden;
  /* the fade has to start LATE: at 72% the blurred teaser was almost entirely
     inside the fade on mobile, where rows are tall, so the strip read as dead
     space with a padlock floating in it instead of as hidden content */
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.js .plock.is-locked .plock__gate{grid-area:2/1}
/* blur per SESSION, not per row: the first row holds two sessions, and only the
   first one is meant to read before the gate */
.js #programme .plock.is-locked .sess{filter:blur(6px) saturate(.6);opacity:.62;
  pointer-events:none;user-select:none}
.js #programme .plock.is-locked .ph:first-child .ph__rows>.sched__row:first-child>.sess:first-child{
  filter:none;opacity:1}
/* These four undo the sticky/tall row treatment while the section is gated:
   sticky heads and 300px rows are right for the full programme, but inside the
   clip they overlap each other and push a 160px hole above the first phase.
   They must carry #programme to out-rank the ID-scoped rules that set them. */
/* :not(.is-opening) matters — these compact the rows while gated, so the content
   is SHORTER locked than unlocked. Dropping them the moment the release starts
   puts the content in its final layout before the height is measured; otherwise
   the animation lands on the compact height and the last frame jumps ~690px. */
.js #programme .plock.is-locked:not(.is-opening) .ph{padding-bottom:0}
.js #programme .plock.is-locked:not(.is-opening) .ph__head{position:static;top:auto}
/* padding-BLOCK only: on desktop the horizontal inset comes from .sched__t and
   .sched__b, but under 820px those are zeroed and the row's own 20px does the
   work. Setting `padding:22px 0` here wiped it, so the time and title sat flush
   against the dashed border. */
.js #programme .plock.is-locked:not(.is-opening) .sched__row{position:static;top:auto;
  min-height:0;padding-block:22px;box-shadow:none;margin:0}
.js #programme .plock.is-locked:not(.is-opening) .ph__rows{gap:0}

/* the veil shares the body's grid cell, so it sits over the blur unblurred */
.plock__veil{display:none}
.js .plock.is-locked .plock__veil{grid-area:1/1;z-index:2;
  display:grid;justify-items:center;align-content:end;
  grid-template-areas:"lock" "phrase";gap:.8rem;
  padding-bottom:38px;pointer-events:none;text-align:center}
/* both padlocks share the "lock" cell: stacked, so closed can fade into open
   without the layout shifting and without a display: hard cut */
.plock__veil .pgate__lock{grid-area:lock}
.plock__veil .plock__ph{grid-area:phrase}
.plock__ph{font-family:var(--disp);font-weight:600;color:var(--ink);
  font-size:clamp(1rem,2vw,1.22rem);letter-spacing:-.012em;margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.85)}
/* both stay in the layout; the swap is an opacity cross-fade, not a display cut */
.plock .pgate__lock--open{opacity:0;transform:scale(.88) rotate(-8deg)}
.plock .pgate__lock--closed{opacity:1}

/* ── unlock choreography ──────────────────────────────
   Paced so each beat reads: the form leaves, the padlock cross-fades open and
   HOLDS for a moment, the veil lifts away, and only then does the programme
   expand. The previous version swapped the padlock with display (a hard cut)
   and ran the whole thing inside a second.
     0.00-0.45  form slides right and fades
     0.30-0.75  closed padlock fades out as the open one springs in
     0.75-1.00  hold on the open padlock
     1.00-1.45  veil lifts and fades
     1.05-2.05  clip expands, blur clears
   ------------------------------------------------------ */
/* the transition lives on the base element, not only in the end state: declared
   only under .is-opening it can be skipped entirely on a element that is also
   changing display, and the form snapped out instead of sliding */
.js .plock.is-locked .plock__gate{
  transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .45s ease}
.plock.is-opening .plock__gate{transform:translateX(72px);opacity:0}
.plock__veil .pgate__lock{
  transition:opacity .4s ease,transform .55s cubic-bezier(.22,1.1,.36,1)}
.plock.is-opening .pgate__lock--closed{
  opacity:0;transform:scale(1.07);
  transition:opacity .38s ease .30s,transform .5s ease .30s}
.plock.is-opening .pgate__lock--open{
  opacity:1;transform:scale(1) rotate(0);
  transition:opacity .42s ease .38s,
             transform .7s cubic-bezier(.22,1.25,.36,1) .38s}
.plock.is-opening .plock__ph{opacity:0;transition:opacity .38s ease .06s}
.plock.is-opening .plock__veil{animation:veilOut .45s ease 1s both}
@keyframes veilOut{to{opacity:0;transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){
  .plock.is-opening .plock__gate,.plock.is-opening .plock__veil,
  .plock.is-opening .pgate__lock{transition:none;animation:none}
}
.js .plock.is-locked .plock__gate{display:block}

.pgate{max-width:1024px;margin:2.4rem auto 0;padding:32px 40px 28px;
  border:1px dashed rgba(221,221,221,.26);background:#0A0C0A;
  box-shadow:0 -40px 70px -30px rgba(0,0,0,.9);text-align:center}
.pgate__lock{display:block;height:82px;width:auto;margin:0 auto .9rem;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.pgate__k{color:var(--green);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.pgate__t{font-family:var(--disp);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.85rem);
  letter-spacing:-.018em;line-height:1.18;margin:.9rem 0 0;text-wrap:balance}
.pgate__l{color:var(--ink-mute);font-size:.96rem;line-height:1.6;margin:.8rem auto 0;max-width:46ch}
.pgate__f{margin-top:1.4rem;display:grid;gap:12px;text-align:left}
/* the three fields and the submit share one row, so the gate stays a short band
   rather than a tall column in the middle of the programme */
.pgate__g{display:grid;grid-template-columns:1fr 1fr 1.25fr auto;gap:14px;align-items:end}
.pgate__g .btn{height:46px;padding-inline:30px;white-space:nowrap}
@media(max-width:980px){
  .pgate__g{grid-template-columns:1fr 1fr}
  .pgate__g>.f:nth-child(3),.pgate__g>.btn{grid-column:1/-1}
}
.pgate .f label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.45rem}
.pgate input{width:100%;box-sizing:border-box;padding:13px 14px;
  background:transparent;color:var(--ink);font:inherit;font-size:.95rem;
  border:1px solid rgba(221,221,221,.20);border-radius:0;transition:border-color .2s ease}
.pgate input:focus{outline:none;border-color:var(--green)}
.pgate input[aria-invalid="true"]{border-color:var(--red-text)}
.pgate__n{color:var(--ink-faint);font-size:.76rem;line-height:1.55;margin-top:.2rem}
.pgate__n a{color:var(--ink-mute);text-decoration:underline;text-underline-offset:2px}
.pgate__m{font-size:.85rem;color:var(--green);min-height:1.2em;margin:0}
.pgate__m[data-err]{color:var(--red-text)}
@media(max-width:620px){
  .pgate{padding:28px 20px 24px;margin-inline:0}
  .pgate__g{grid-template-columns:1fr}
  .pgate__g>.f:nth-child(3),.pgate__g>.btn{grid-column:auto}
}


/* ------------------------------------------------------------------
   .btn — the site's white filled button, NOT the green outlined .cta.
   Lives here rather than in pages.css because the hand-authored
   homepages load styles.css only, and used to render .btn as plain
   inline text.
   ------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:13px 26px;
  background:#fff;color:#0B0C0B;border:1px solid #fff;font-family:var(--disp);
  font-weight:600;font-size:.92rem;line-height:1;text-decoration:none;cursor:pointer;
  transition:background .3s ease,border-color .3s ease,color .3s ease}
.btn:hover{background:var(--green);border-color:var(--green);color:#0B0C0B}
/* full-width variant, for a .btn that has to fill a form or a card */
.btn--wide{width:100%;justify-content:center;padding:15px 26px}
/* gate consent — the stated purpose is a contact base for later outreach, which
   needs an explicit opt-in (loi 09-08 / CNDP, and GDPR for any EU signups). */
.pgate__c{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;
  color:var(--ink-mute);font-size:.84rem;line-height:1.5}
.pgate__c input{width:16px;height:16px;flex:none;margin-top:.15rem;accent-color:var(--green)}
.pgate__c input[aria-invalid="true"]{outline:2px solid var(--red-text);outline-offset:2px}


/* ---------- named speaker, transparent cutout ----------
   ZAIM asked for a PNG without background on the speaker card (feedback #2). A cutout
   must NOT use .spk__img--real (object-fit:cover crops a standing figure); it stands on
   the frame's base like the placeholder busts. Unlike them it stays in FULL COLOUR: the
   busts are anonymous placeholders, this is a named, confirmed speaker. Lives here rather
   than pages.css because the homepage loads styles.css only. */
.spk__img--cut{align-items:flex-end}
.spk__img--cut img{height:100%!important;width:auto!important;object-fit:contain;
  filter:none;opacity:1;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);
  mask-image:linear-gradient(180deg,#000 86%,transparent);transform:none;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.spk__c:hover .spk__img--cut img{transform:translateY(-4px)}

/* Timeline variant of the gate: the articles show the running order as a .tl
   list rather than the .sched component, so the blur targets .tl__row. The
   first row reads, exactly as the first session does in the .sched variant. */
.js .plock--tl.is-locked .plock__body{max-height:clamp(280px,36vh,400px)}
.js .plock--tl.is-locked .tl__row{filter:blur(6px) saturate(.6);opacity:.62;
  pointer-events:none;user-select:none}
.js .plock--tl.is-locked .tl__row:first-child{filter:none;opacity:1}


/* ── smooth release ───────────────────────────────────
   Removing .is-locked in one step snapped the blur to zero and the height from
   the clip to full. Instead the opening state animates both: the blur eases out,
   the clip grows to the measured height (set inline by main.js), and the bottom
   fade is pushed off the element by growing mask-size, which unlike mask-image
   is interpolatable. .is-locked is only dropped once all of that has finished. */
.js .plock.is-opening .plock__body{
  -webkit-mask-size:100% 620%;mask-size:100% 620%;
  transition:max-height 1s cubic-bezier(.22,.61,.36,1) 1.05s,
             -webkit-mask-size .95s ease 1.05s, mask-size .95s ease 1.05s}
.js #programme .plock.is-opening .sess,
.js .plock--tl.is-opening .tl__row{
  filter:none;opacity:1;
  transition:filter .95s ease 1.1s,opacity .95s ease 1.1s}
@media(prefers-reduced-motion:reduce){
  .js .plock.is-opening .plock__body,
  .js #programme .plock.is-opening .sess,
  .js .plock--tl.is-opening .tl__row{transition:none}
}

/* ------------------------------------------------------------------
   Mobile hit areas. The footer legal links, the "by We Developz"
   credit, the breadcrumb and the inline privacy links were rendering
   13-20px tall, well under a thumb-sized target. Padding rather than
   font-size, so nothing about the type changes.
   ------------------------------------------------------------------ */
@media(max-width:820px){
  .foot__links a,.foot__by a,.phero__crumb a,
  .pgate__n a,.consent__n a{display:inline-block;padding-block:7px}
  .foot__links{display:flex;flex-wrap:wrap;gap:0 1.2rem}
  .socials a{display:grid;place-items:center;min-width:40px;min-height:40px}
}

/* While gated, the 30px margin + 30px padding that separates two sessions sits
   between the readable first item and the blurred next one, and reads as dead
   air rather than as separation. Tighten it only in the locked state. */
.js #programme .plock.is-locked:not(.is-opening) .sess + .sess{
  margin-top:14px;padding-top:14px}

/* the consent line must not break the brand across two lines */
.pgate__c{font-size:.8rem}
.pgate__c span{text-wrap:pretty}

/* footer credit — the mark rather than the word, and the whole lockup is the
   link out to wedevelopz.com (same treatment as the AHMA footer) */
.foot__wd{display:inline-flex;align-items:center;gap:1rem;text-decoration:none}
.foot__wd img{height:28px;width:auto;display:block}
.foot__wd .mono{color:var(--ink-quiet);font-size:.8rem;transition:color .25s ease}
.foot__wd:hover .mono{color:var(--ink)}
@media(max-width:820px){.foot__wd{padding-block:7px}.foot__wd img{height:24px}}

/* ------------------------------------------------------------------
   .spaces — the four venue photographs as a portrait filmstrip.
   The homepage already carries these same four images in the .venue
   mosaic; repeating that layout on the programme page made the two
   pages read as one. Here they are a row of spaces, which is what the
   page is actually about, and the row scrolls on a phone rather than
   stacking into another tall mosaic.
   ------------------------------------------------------------------ */
.spaces{display:flex;gap:16px;margin-top:3rem;overflow-x:auto;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:8px}
.space{flex:1 1 0;min-width:198px;scroll-snap-align:start;margin:0;background:#000;
  border:1px dashed rgba(221,221,221,.20);overflow:hidden}
/* explicit height, not aspect-ratio: with a width/height attribute on the img,
   aspect-ratio was ignored and the tower rendered at its intrinsic 1650px */
.space img{width:100%;height:clamp(230px,26vw,290px);object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.space:hover img{transform:scale(1.04)}
.space figcaption{padding:13px 15px 15px;display:grid;gap:.3rem}
.space__k{color:var(--green);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase}
.space__n{font-family:var(--disp);font-weight:600;font-size:1.02rem;
  color:var(--ink);line-height:1.25}
@media(max-width:820px){
  .spaces{gap:12px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .space{min-width:64vw}
}
}
/* text for screen readers and crawlers only */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the aurora glow is decorative: it loads after the page, so fonts and the title get the bandwidth first */
.bg-ready{--aurora:url("../assets/stock/hero-aurora-sm.webp")}
/* a button inside legal-style body copy keeps the button look, not the link look */
.doc__b .btn{color:#0B0C0B;text-decoration:none}
.doc__b .btn:hover{color:#0B0C0B}