/* =========================================================
   ACO  |  Action Communautaire des Ouanaminthais
   Design system : "Caribbean Nocturne"
   Midnight indigo base, Haitian gold, vermillion, aqua.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Core palette */
  --ink:        #070C1C;
  --midnight:   #0A1128;
  --deep:       #0D1B3E;
  --slate:      #16264F;
  --haze:       #24386B;

  --cream:      #FBF7EF;
  --parchment:  #F3EADA;
  --sand:       #E4D7C1;

  --gold:       #E9B84C;
  --gold-lit:   #F7D384;
  --gold-deep:  #B98A28;

  --flame:      #E2503F;
  --flame-lit:  #F57A63;

  --aqua:       #14BFB6;
  --aqua-lit:   #55E2D6;

  --violet:     #6C4FE0;

  /* Semantic */
  --bg:         var(--midnight);
  --fg:         #EDE8DE;
  --fg-soft:    #A9B3CC;
  --fg-faint:   #6E7A99;
  --line:       rgba(233,184,76,.16);
  --line-soft:  rgba(237,232,222,.10);
  --card:       rgba(255,255,255,.035);
  --card-hi:    rgba(255,255,255,.06);

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Sora", "Avenir Next", "Segoe UI", sans-serif;

  --step--1: clamp(.82rem, .78rem + .18vw, .92rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.12rem);
  --step-1:  clamp(1.22rem, 1.12rem + .5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);
  --step-5:  clamp(3rem, 1.8rem + 5.6vw, 6.6rem);

  /* Space */
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sec: clamp(4.5rem, 9vw, 9rem);
  --maxw: 1240px;
  --narrow: 760px;

  --r-sm: 10px;
  --r:    18px;
  --r-lg: 30px;
  --r-xl: 42px;

  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Light zone : the "En Blanc" inversion */
.zone-light{
  --bg:        var(--cream);
  --fg:        #14192B;
  --fg-soft:   #4C5470;
  --fg-faint:  #8A91A6;
  --line:      rgba(20,25,43,.14);
  --line-soft: rgba(20,25,43,.08);
  --card:      rgba(20,25,43,.035);
  --card-hi:   rgba(20,25,43,.06);
  background: var(--bg);
  color: var(--fg);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{
  font-family: var(--body);
  font-size: var(--step-0);
  line-height:1.68;
  color: var(--fg);
  background: var(--midnight);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- 3. ATMOSPHERE ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.34;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.aurora{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.aurora span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
  animation: drift 26s var(--ease) infinite alternate;
}
.aurora .a1{ width:52vw; height:52vw; left:-14vw; top:-16vw; background:radial-gradient(circle,var(--violet),transparent 68%); }
.aurora .a2{ width:46vw; height:46vw; right:-12vw; top:6vw;  background:radial-gradient(circle,var(--aqua),transparent 68%); opacity:.34; animation-delay:-8s; }
.aurora .a3{ width:40vw; height:40vw; left:26vw; bottom:-18vw; background:radial-gradient(circle,var(--flame),transparent 68%); opacity:.3; animation-delay:-15s; }
.aurora .a4{ width:34vw; height:34vw; right:14vw; bottom:-10vw; background:radial-gradient(circle,var(--gold),transparent 70%); opacity:.28; animation-delay:-21s; }
@keyframes drift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(4vw,-3vw,0) scale(1.14); }
  100% { transform:translate3d(-3vw,4vw,0) scale(.94); }
}

/* Tricolor ribbon : the recurring brand mark */
.ribbon{
  height:5px; width:100%;
  background:linear-gradient(90deg,var(--flame) 0%,var(--gold) 33%,var(--aqua) 66%,var(--violet) 100%);
  background-size:300% 100%;
  animation: ribbon 14s linear infinite;
}
@keyframes ribbon{ to{ background-position:300% 0; } }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ width:100%; max-width:var(--narrow); margin-inline:auto; padding-inline:var(--gut); }
section{ position:relative; }
.section{ padding-block:var(--sec); position:relative; z-index:1; }
.section-tight{ padding-block:clamp(3rem,6vw,5.5rem); }

/* ---------- 5. TYPE ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.022em;
  font-variation-settings:"SOFT" 22,"WONK" 1,"opsz" 40;
  text-wrap:balance;
}
h1{ font-size:var(--step-5); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); line-height:1.24; }
p{ text-wrap:pretty; }

.eyebrow{
  font-family:var(--body);
  font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--gold));
}
.zone-light .eyebrow{ color:var(--gold-deep); }

.lead{ font-size:var(--step-1); line-height:1.55; color:var(--fg-soft); font-weight:300; }
.muted{ color:var(--fg-soft); }
.faint{ color:var(--fg-faint); font-size:var(--step--1); }

.gilt{
  background:linear-gradient(104deg,var(--gold-lit) 4%,var(--gold) 34%,var(--flame-lit) 68%,var(--gold-lit) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: sweep 9s var(--ease) infinite alternate;
}
@keyframes sweep{ to{ background-position:100% 0; } }

.script{ font-style:italic; font-variation-settings:"SOFT" 60,"WONK" 1; }

/* ---------- 6. BUTTONS ---------- */
.btn{
  --btn-bg: var(--gold);
  --btn-fg: #170F02;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.02rem 1.9rem;
  font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  border:0; border-radius:100px; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), filter .3s;
  box-shadow:0 10px 30px -12px rgba(233,184,76,.62);
  overflow:hidden; isolation:isolate; text-align:center;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .75s var(--ease-out);
}
.btn:hover{ transform:translateY(-3px) scale(1.015); box-shadow:0 18px 40px -14px rgba(233,184,76,.8); }
.btn:hover::after{ transform:translateX(120%); }
.btn:active{ transform:translateY(-1px) scale(.995); }

.btn-flame{ --btn-bg:var(--flame); --btn-fg:#FFF3F0; box-shadow:0 10px 30px -12px rgba(226,80,63,.66); }
.btn-flame:hover{ box-shadow:0 18px 40px -14px rgba(226,80,63,.85); }
.btn-aqua{ --btn-bg:var(--aqua); --btn-fg:#02201E; box-shadow:0 10px 30px -12px rgba(20,191,182,.6); }
.btn-aqua:hover{ box-shadow:0 18px 40px -14px rgba(20,191,182,.8); }
.btn-ink{ --btn-bg:var(--ink); --btn-fg:var(--cream); box-shadow:0 10px 30px -14px rgba(7,12,28,.7); }

.btn-ghost{
  background:transparent; color:var(--fg);
  border:1px solid var(--line); box-shadow:none;
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); box-shadow:0 12px 34px -18px rgba(233,184,76,.5); }
.zone-light .btn-ghost:hover{ color:var(--gold-deep); border-color:var(--gold-deep); }

.btn-sm{ padding:.72rem 1.3rem; font-size:.74rem; }
.btn-lg{ padding:1.2rem 2.35rem; font-size:.92rem; }
.btn-block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.86rem; letter-spacing:.04em;
  color:var(--gold); padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:gap .3s var(--ease), border-color .3s, color .3s;
}
.link-arrow:hover{ gap:.95rem; border-bottom-color:currentColor; }
.zone-light .link-arrow{ color:var(--gold-deep); }

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  transition:background .45s var(--ease), backdrop-filter .45s, box-shadow .45s, border-color .45s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(10,17,40,.82);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--line);
  box-shadow:0 14px 44px -26px rgba(0,0,0,.9);
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1rem;
}
.brand{ display:flex; align-items:center; gap:.8rem; flex-shrink:0; }
.brand-mark{
  width:48px; height:48px; flex-shrink:0; display:block;
  filter:drop-shadow(0 6px 18px rgba(233,184,76,.34));
  transition:transform .6s var(--ease-out), filter .5s;
}
.brand:hover .brand-mark{ filter:drop-shadow(0 8px 24px rgba(233,184,76,.55)); }
.brand:hover .brand-mark{ transform:rotate(-6deg) scale(1.07); }
.brand-txt strong{
  display:block; font-family:var(--display); font-size:1.05rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.1; color:#fff;
}
.brand-txt small{
  display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-faint); margin-top:2px;
}

.nav-links{ display:flex; align-items:center; gap:.28rem; }
.nav-links a{
  position:relative; padding:.6rem .9rem; border-radius:100px;
  font-size:.83rem; font-weight:500; color:var(--fg-soft);
  transition:color .3s, background .3s;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-links a.on{ color:var(--gold); }
.nav-links a.on::after{
  content:""; position:absolute; left:50%; bottom:.28rem; translate:-50% 0;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
}
.nav-act{ display:flex; align-items:center; gap:.6rem; flex-shrink:0; }

/* Language switcher */
.lang{ display:flex; gap:2px; padding:3px; border-radius:100px; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.lang button{
  border:0; background:transparent; cursor:pointer;
  padding:.34rem .62rem; border-radius:100px;
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-faint); transition:color .25s, background .25s;
}
.lang button:hover{ color:#fff; }
.lang button[aria-pressed="true"]{ background:var(--gold); color:#170F02; }

/* Burger + mobile drawer */
.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  cursor:pointer; place-items:center; gap:5px; flex-direction:column;
}
.burger i{ display:block; width:19px; height:2px; background:var(--fg); border-radius:2px; transition:transform .38s var(--ease), opacity .28s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:899;
  background:linear-gradient(180deg,rgba(7,12,28,.98),rgba(13,27,62,.99));
  backdrop-filter:blur(22px);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:5.5rem var(--gut) 2.5rem;
  transform:translateY(-102%); transition:transform .55s var(--ease-out);
  overflow-y:auto;
}
.drawer.open{ transform:translateY(0); }
.drawer a{
  font-family:var(--display); font-size:clamp(1.7rem,7vw,2.4rem); font-weight:600;
  padding:.42rem 0; color:var(--fg); border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateY(18px);
}
.drawer.open a{ animation: drawerIn .5s var(--ease-out) forwards; }
.drawer.open a:nth-child(1){ animation-delay:.06s } .drawer.open a:nth-child(2){ animation-delay:.11s }
.drawer.open a:nth-child(3){ animation-delay:.16s } .drawer.open a:nth-child(4){ animation-delay:.21s }
.drawer.open a:nth-child(5){ animation-delay:.26s } .drawer.open a:nth-child(6){ animation-delay:.31s }
.drawer.open a:nth-child(7){ animation-delay:.36s }
@keyframes drawerIn{ to{ opacity:1; transform:translateY(0); } }
.drawer-cta{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.8rem; }

/* ---------- 8. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-block:9rem 7.5rem; overflow:hidden;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(108,79,224,.30), transparent 60%),
    radial-gradient(100% 70% at 92% 18%, rgba(20,191,182,.22), transparent 62%),
    radial-gradient(90% 70% at 55% 108%, rgba(226,80,63,.24), transparent 60%),
    linear-gradient(178deg, var(--ink) 0%, var(--deep) 52%, var(--midnight) 100%);
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.34; pointer-events:none;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(80% 65% at 50% 40%,#000 20%,transparent 78%);
}
.hero-in{ position:relative; z-index:2; }
.hero h1{ max-width:15ch; margin-block:1.5rem 0; }
.hero .lead{ max-width:56ch; margin-top:1.7rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.6rem; }
.hero-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 2.4rem;
  margin-top:3.4rem; padding-top:2rem; border-top:1px solid var(--line-soft);
}
.hero-stat b{
  display:block; font-family:var(--display); font-size:var(--step-2); font-weight:700;
  color:var(--gold-lit); line-height:1;
}
.hero-stat span{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-faint); }

.scroll-hint{
  position:absolute; left:50%; bottom:1.6rem; translate:-50% 0; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-faint);
}
.scroll-hint i{ display:block; width:1px; height:42px; background:linear-gradient(var(--gold),transparent); animation:pulseDown 2.2s var(--ease) infinite; }
@keyframes pulseDown{ 0%,100%{ opacity:.3; transform:scaleY(.55); transform-origin:top } 50%{ opacity:1; transform:scaleY(1); } }

/* Page hero (interior) */
.phero{
  position:relative; padding-block:11rem 5rem; overflow:hidden;
  background:
    radial-gradient(100% 90% at 15% 0%, rgba(108,79,224,.24), transparent 62%),
    radial-gradient(90% 80% at 88% 20%, rgba(20,191,182,.18), transparent 62%),
    linear-gradient(176deg,var(--ink),var(--deep));
}
.phero h1{ font-size:var(--step-4); max-width:17ch; margin-top:1.3rem; }
.phero .lead{ max-width:60ch; margin-top:1.3rem; }

/* ---------- 9. COUNTDOWN ---------- */
.countdown-bar{
  position:relative; z-index:2;
  border-block:1px solid var(--line);
  background:linear-gradient(100deg,rgba(226,80,63,.14),rgba(233,184,76,.12),rgba(20,191,182,.1));
  backdrop-filter:blur(10px);
}
.cb-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; padding-block:1.15rem; }
.cb-txt strong{ font-family:var(--display); font-size:1.15rem; display:block; color:#fff; }
.cb-txt span{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-lit); }
.clock{ display:flex; gap:.55rem; }
.clock div{
  min-width:64px; padding:.5rem .6rem; text-align:center; border-radius:12px;
  border:1px solid var(--line); background:rgba(7,12,28,.42);
}
.clock b{ display:block; font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--gold-lit); line-height:1; font-variant-numeric:tabular-nums; }
.clock small{ font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); }
.zone-light .clock div{ background:rgba(255,255,255,.72); }
.zone-light .clock b{ color:var(--flame); }
.zone-light .cb-txt strong{ color:var(--ink); }
.zone-light .cb-txt span{ color:var(--gold-deep); }

/* ---------- 10. CARDS + GRIDS ---------- */
.grid{ display:grid; gap:1.1rem; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split-wide{ grid-template-columns:1.15fr .85fr; }

.card{
  position:relative; padding:clamp(1.5rem,2.6vw,2.1rem);
  border-radius:var(--r-lg); border:1px solid var(--line-soft);
  background:var(--card); backdrop-filter:blur(9px);
  transition:transform .5s var(--ease-out), border-color .4s, background .4s, box-shadow .5s;
  overflow:hidden; height:100%;
}
.card::before{
  content:""; position:absolute; inset:0 auto auto 0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--gold),var(--flame),var(--aqua));
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.card:hover{ transform:translateY(-7px); border-color:var(--line); background:var(--card-hi); box-shadow:0 28px 60px -34px rgba(0,0,0,.85); }
.card:hover::before{ transform:scaleX(1); }
.card h3,.card h4{ margin-bottom:.6rem; }
.card p{ color:var(--fg-soft); font-size:.94rem; }
.card-icon{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  margin-bottom:1.25rem; color:var(--gold-lit);
  background:linear-gradient(140deg,rgba(233,184,76,.17),rgba(226,80,63,.08));
  border:1px solid var(--line);
  transition:color .4s var(--ease), transform .5s var(--ease-out), border-color .4s;
}
.card:hover .card-icon{ color:var(--gold); transform:translateY(-2px) rotate(-4deg); border-color:rgba(233,184,76,.4); }
.zone-light .card-icon{ color:var(--gold-deep); background:linear-gradient(140deg,rgba(233,184,76,.22),rgba(226,80,63,.1)); }
.card-num{
  font-family:var(--display); font-size:2.6rem; font-weight:700; line-height:1;
  color:var(--gold-lit); display:block; margin-bottom:.5rem; font-variant-numeric:tabular-nums;
}
.zone-light .card-num{ color:var(--gold-deep); }

/* Stat blocks */
.stat{ text-align:center; padding:clamp(1.4rem,2.4vw,2rem) 1rem; border-radius:var(--r); border:1px solid var(--line-soft); background:var(--card); }
.stat b{ display:block; font-family:var(--display); font-size:var(--step-3); font-weight:700; color:var(--gold-lit); line-height:1; font-variant-numeric:tabular-nums; }
.stat span{ display:block; margin-top:.5rem; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-faint); }
.zone-light .stat b{ color:var(--flame); }

/* Timeline */
.tl{ position:relative; padding-left:2.4rem; }
.tl::before{ content:""; position:absolute; left:9px; top:.6rem; bottom:.6rem; width:2px; background:linear-gradient(var(--gold),var(--flame),var(--aqua),transparent); }
.tl-item{ position:relative; padding-bottom:2.6rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-2.4rem; top:.45rem; width:20px; height:20px; border-radius:50%;
  background:var(--midnight); border:2px solid var(--gold); box-shadow:0 0 0 5px rgba(233,184,76,.12);
}
.zone-light .tl-item::before{ background:var(--cream); }
.tl-year{ font-family:var(--display); font-size:.9rem; font-weight:700; letter-spacing:.14em; color:var(--gold); display:block; margin-bottom:.35rem; }
.zone-light .tl-year{ color:var(--gold-deep); }
.tl-item h4{ margin-bottom:.5rem; }
.tl-item p{ color:var(--fg-soft); font-size:.95rem; }

/* Pull quote */
.quote{
  position:relative; padding:clamp(2rem,4vw,3.2rem); border-radius:var(--r-xl);
  border:1px solid var(--line); background:linear-gradient(140deg,rgba(233,184,76,.08),rgba(226,80,63,.05));
  text-align:center;
}
.quote::before{
  content:"\201C"; position:absolute; left:50%; top:-.15em; translate:-50% 0;
  font-family:var(--display); font-size:8rem; line-height:1; color:var(--gold); opacity:.22;
}
.quote q{ font-family:var(--display); font-size:var(--step-2); font-weight:500; font-style:italic; line-height:1.32; quotes:none; display:block; }
.quote cite{ display:block; margin-top:1.2rem; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-style:normal; color:var(--gold); }
.zone-light .quote cite{ color:var(--gold-deep); }

/* Image slot */
.imgslot{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); aspect-ratio:4/3;
  background:
    linear-gradient(140deg,rgba(108,79,224,.22),rgba(20,191,182,.14),rgba(233,184,76,.16)),
    var(--slate);
  display:grid; place-items:center; text-align:center; padding:1.5rem;
}
.imgslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.imgslot-note{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); line-height:1.75; max-width:22ch; }
.imgslot-note b{ display:block; color:var(--gold-lit); font-size:.74rem; margin-bottom:.35rem; }
.zone-light .imgslot-note{ color:rgba(255,255,255,.75); }
.imgslot.tall{ aspect-ratio:3/4; }
.imgslot.wide{ aspect-ratio:16/9; }

/* Video block : ready for the gala and Noel Solidarite footage */
.videoslot{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--slate); aspect-ratio:16/9;
}
.videoslot video,.videoslot iframe{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0;
}
.videoslot-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(7,12,28,.1),rgba(7,12,28,.55));
  cursor:pointer; transition:background .4s;
}
.videoslot-play:hover{ background:linear-gradient(180deg,rgba(7,12,28,.05),rgba(7,12,28,.4)); }
.videoslot-play i{
  width:78px; height:78px; border-radius:50%; display:grid; place-items:center;
  background:rgba(233,184,76,.94); box-shadow:0 14px 44px -14px rgba(233,184,76,.8);
  transition:transform .45s var(--ease-out);
}
.videoslot-play i::after{
  content:""; width:0; height:0; margin-left:5px;
  border-left:22px solid #170F02; border-block:14px solid transparent;
}
.videoslot-play:hover i{ transform:scale(1.09); }
.videoslot-cap{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1.6rem;
  background:linear-gradient(transparent,rgba(7,12,28,.88));
  font-size:.9rem; color:#EDE8DE;
}

/* Gallery mosaic */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }
.mosaic .imgslot{ aspect-ratio:1; }
.mosaic .m-big{ grid-column:span 2; grid-row:span 2; aspect-ratio:1; }

/* ---------- 11. GIVING ---------- */
.tier{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(1.7rem,3vw,2.3rem); border-radius:var(--r-lg);
  border:1px solid var(--line-soft); background:var(--card);
  transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s;
  overflow:hidden;
}
.tier:hover{ transform:translateY(-8px); box-shadow:0 30px 66px -36px rgba(0,0,0,.9); }
.tier-flag{ position:absolute; inset:0 0 auto 0; height:4px; }
.tier-1 .tier-flag{ background:var(--aqua); }
.tier-2 .tier-flag{ background:var(--gold); }
.tier-3 .tier-flag{ background:var(--violet); }
.tier-4 .tier-flag{ background:var(--flame); }
.tier.featured{ border-color:var(--gold); background:linear-gradient(160deg,rgba(233,184,76,.11),var(--card)); }
.tier-badge{
  position:absolute; right:1.1rem; top:1.1rem;
  font-size:.58rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:.34rem .7rem; border-radius:100px; background:var(--gold); color:#170F02;
}
.tier-name{ font-family:var(--display); font-size:1.3rem; font-weight:700; margin-bottom:.3rem; }
.tier-price{ display:flex; align-items:baseline; gap:.3rem; margin-block:.7rem 1rem; }
.tier-price b{ font-family:var(--display); font-size:3rem; font-weight:700; line-height:1; color:var(--gold-lit); }
.tier-price span{ font-size:.82rem; color:var(--fg-faint); }
.zone-light .tier-price b{ color:var(--gold-deep); }
.tier ul{ display:flex; flex-direction:column; gap:.6rem; margin-block:.4rem 1.7rem; flex-grow:1; }
.tier li{ display:flex; gap:.65rem; font-size:.9rem; color:var(--fg-soft); line-height:1.5; }
.tier li::before{ content:"✦"; color:var(--gold); flex-shrink:0; font-size:.8rem; line-height:1.7; }
.zone-light .tier li::before{ color:var(--gold-deep); }

/* Impact ladder : "your money does this" */
.ladder{ display:grid; gap:.75rem; }
.rung{
  display:flex; align-items:center; gap:1.1rem;
  padding:1rem 1.3rem; border-radius:var(--r);
  border:1px solid var(--line-soft); background:var(--card);
  transition:border-color .35s, transform .35s var(--ease-out), background .35s;
}
.rung:hover{ border-color:var(--gold); transform:translateX(6px); background:var(--card-hi); }
.rung b{
  font-family:var(--display); font-size:1.5rem; font-weight:700; color:var(--gold-lit);
  min-width:88px; flex-shrink:0; font-variant-numeric:tabular-nums;
}
.zone-light .rung b{ color:var(--gold-deep); }
.rung p{ font-size:.94rem; color:var(--fg-soft); }

/* Amount chooser */
.amounts{ display:flex; flex-wrap:wrap; gap:.6rem; margin-block:1.2rem; }
.amounts button{
  padding:.85rem 1.35rem; border-radius:100px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--fg);
  font-family:var(--display); font-size:1.05rem; font-weight:600;
  transition:all .3s var(--ease);
}
.amounts button:hover{ border-color:var(--gold); color:var(--gold); }
.amounts button[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:#170F02; }

/* Trust row */
.trust{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .95rem; border-radius:100px;
  border:1px solid var(--line-soft); background:var(--card);
  font-size:.74rem; letter-spacing:.05em; color:var(--fg-soft);
}
.chip b{ color:var(--gold); font-weight:600; }
.zone-light .chip b{ color:var(--gold-deep); }

/* ---------- 12. FORMS ---------- */
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.05rem; }
.field label{ font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft); }
.field input,.field select,.field textarea{
  padding:.92rem 1.1rem; border-radius:var(--r-sm);
  border:1px solid var(--line-soft); background:rgba(255,255,255,.045);
  color:var(--fg); font-size:.95rem;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.zone-light .field input,.zone-light .field select,.zone-light .field textarea{ background:rgba(255,255,255,.8); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(255,255,255,.075);
  box-shadow:0 0 0 4px rgba(233,184,76,.15);
}
.zone-light .field input:focus,.zone-light .field select:focus,.zone-light .field textarea:focus{ background:#fff; }
.field textarea{ resize:vertical; min-height:130px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }

/* Accordion */
.acc{ border-top:1px solid var(--line-soft); }
.acc details{ border-bottom:1px solid var(--line-soft); }
.acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; cursor:pointer; list-style:none;
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  transition:color .3s;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary:hover{ color:var(--gold); }
.acc summary::after{ content:"+"; font-size:1.5rem; color:var(--gold); flex-shrink:0; transition:transform .35s var(--ease); }
.acc details[open] summary::after{ transform:rotate(45deg); }
.acc .acc-body{ padding-bottom:1.4rem; color:var(--fg-soft); font-size:.95rem; max-width:74ch; }

/* ---------- 13. EN BLANC (light zone) ---------- */
.enblanc{
  background:
    radial-gradient(90% 70% at 18% 0%, rgba(233,184,76,.22), transparent 62%),
    radial-gradient(80% 70% at 88% 100%, rgba(226,80,63,.14), transparent 62%),
    var(--cream);
  color:#14192B;
}
.enblanc-mark{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(2.6rem,7.2vw,5.6rem); line-height:.96; letter-spacing:-.03em;
  font-variation-settings:"SOFT" 80,"WONK" 1;
  background:linear-gradient(120deg,var(--gold-deep),var(--flame),var(--gold-deep));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 11s var(--ease) infinite alternate;
}

/* ---------- 14. CTA BAND ---------- */
.band{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:clamp(2.4rem,6vw,4.6rem);
  background:linear-gradient(122deg,var(--flame) 0%,#C9432F 26%,var(--gold-deep) 62%,var(--gold) 100%);
  color:#1B0F03; text-align:center;
}
.band::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(0,0,0,.14) 1px, transparent 0);
  background-size:22px 22px; opacity:.5;
}
.band > *{ position:relative; z-index:1; }
.band h2{ color:#1B0F03; max-width:19ch; margin-inline:auto; }
.band p{ max-width:56ch; margin:1.1rem auto 0; color:rgba(27,15,3,.82); font-size:1.05rem; }
.band .btn-ink{ margin-top:2rem; }
.band-acts{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2.1rem; }

/* ---------- 15. FOOTER ---------- */
.foot{ background:var(--ink); color:var(--fg-soft); padding-block:clamp(3.5rem,7vw,5.5rem) 2rem; position:relative; z-index:1; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:2.5rem; }
.foot h5{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.foot ul{ display:flex; flex-direction:column; gap:.62rem; }
.foot li{ line-height:1.5; }
.foot li .faint{ display:block; margin-top:.1rem; font-size:.74rem; letter-spacing:.04em; }
.foot li a[data-mail]{ font-weight:500; color:var(--fg); }
.foot li a[data-mail]:hover{ color:var(--gold-lit); }
.foot a{ font-size:.9rem; transition:color .28s, padding-left .28s; }
.foot a:hover{ color:var(--gold-lit); padding-left:5px; }
.foot p{ font-size:.9rem; line-height:1.75; }
.foot-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:3.2rem; padding-top:1.7rem; border-top:1px solid var(--line-soft);
  font-size:.78rem; color:var(--fg-faint);
}
.social{ display:flex; gap:.5rem; }
.social a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.03);
  transition:all .32s var(--ease);
}
.social a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); padding-left:0; }

/* ---------- 16. REVEAL ---------- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.09s } .rv-d2{ transition-delay:.18s } .rv-d3{ transition-delay:.27s }
.rv-d4{ transition-delay:.36s } .rv-d5{ transition-delay:.45s } .rv-d6{ transition-delay:.54s }

.hero-in > *{ opacity:0; transform:translateY(26px); animation:heroIn .95s var(--ease-out) forwards; }
.hero-in > *:nth-child(1){ animation-delay:.12s } .hero-in > *:nth-child(2){ animation-delay:.24s }
.hero-in > *:nth-child(3){ animation-delay:.36s } .hero-in > *:nth-child(4){ animation-delay:.48s }
.hero-in > *:nth-child(5){ animation-delay:.60s } .hero-in > *:nth-child(6){ animation-delay:.72s }
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* ---------- 17. UTILITIES ---------- */
.center{ text-align:center; }
.mb-s{ margin-bottom:.7rem } .mb-m{ margin-bottom:1.4rem } .mb-l{ margin-bottom:2.6rem } .mb-xl{ margin-bottom:4rem }
.mt-m{ margin-top:1.4rem } .mt-l{ margin-top:2.6rem }
.mx-auto{ margin-inline:auto } .maxw-60{ max-width:62ch } .maxw-50{ max-width:52ch }
.prose p + p{ margin-top:1.15rem; }
.prose p{ color:var(--fg-soft); }
.hide{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:absolute; left:1rem; top:-4rem; z-index:9999;
  background:var(--gold); color:#170F02; padding:.8rem 1.3rem; border-radius:0 0 10px 10px;
  font-weight:600; font-size:.85rem; transition:top .3s;
}
.skip:focus{ top:0; }

/* Section heading block */
.shead{ max-width:64ch; margin-bottom:clamp(2.2rem,4vw,3.4rem); }
.shead.center{ margin-inline:auto; }
.shead h2{ margin-block:1rem .9rem; }
.shead p{ color:var(--fg-soft); font-size:var(--step-1); font-weight:300; line-height:1.55; }

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width: 1080px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:2.2rem; }
}
@media (max-height: 820px){
  .scroll-hint{ display:none; }
}
@media (max-width: 900px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .nav-act .btn{ display:none; }
  .split,.split-wide{ grid-template-columns:1fr; }
  .g3{ grid-template-columns:1fr; }
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .mosaic .m-big{ grid-column:span 2; grid-row:span 1; aspect-ratio:16/10; }
  .hero{ min-height:auto; padding-block:8rem 5rem; }
  .scroll-hint{ display:none; }
}
@media (max-width: 680px){
  .g2{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .clock div{ min-width:56px; }
  .clock b{ font-size:1.2rem; }
  .cb-in{ justify-content:center; text-align:center; }
  .hero-foot{ gap:1.4rem 2rem; }
  .brand-txt small{ display:none; }
  .rung{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  .rung b{ min-width:0; }
  .foot-grid{ grid-template-columns:1fr; }
  .lang button{ padding:.32rem .5rem; font-size:.64rem; }
}
@media (max-width: 400px){
  .brand-txt strong{ font-size:.92rem; }
  .clock{ gap:.35rem; }
  .clock div{ min-width:48px; padding:.4rem .3rem; }
}

/* Print */
@media print{
  .nav,.drawer,.grain,.aurora,.scroll-hint,.countdown-bar{ display:none !important; }
  body{ background:#fff; color:#000; }
}