/* ============================================================
   IVOIRE TECH FORUM 2026 — Design System
   Brand: "Connecter. Booster. Impacter."
   Deep Ink navy · accent green — both derived from the official logo (assets/img/ivoiretech-logo.png)
   ============================================================ */
/* ---------- Gotham (client's official typeface, mini charte graphique) ----------
   Self-hosted from assets/fonts/gothame/ (files supplied by the owner) : desktop weights,
   served as-is (.otf) since the project has no build step to convert them to .woff2.
   Weight mapping per the charte : Book = body text (8–13pt), Bold = section titles (15–30pt),
   Black = large titles only (>30pt). Light/Medium/Thin kept available for finer UI hierarchy. */
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-ThinItalic.otf') format('opentype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-XLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-XLightItalic.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-BookItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-BoldItalic.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/gothame/Gotham-BlackItalic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* Brand palette — from the client's official mini charte graphique (doc/MINI-CHARTE•IVOIRETECH.pdf, June 2025):
     Pantone 638 C #00ACD8 (cyan), Pantone 375 C #93D500 (lime), Pantone 293 C #003DA6 (navy),
     Pantone 3295 C #007565 (teal) — the four principal brand colors. Ink IS the official navy —
     the only dark blue on the site; ink-800/ink-700 are lighter tints of that same hex for
     gradients and placeholder fills (not separate brand colors). */
  --ink: #003DA6;         /* Pantone 293 C — official brand navy */
  --ink-800: #1B4FB4;
  --ink-700: #3A66C4;
  --azure: #0055B8;       /* charte's "dégradé secondaire" stop — navy-to-azure, used on interior-page banners */
  --accent: #007565;      /* Pantone 3295 C — primary accent (buttons/links/badges), WCAG AA on white */
  --accent-600: #00594D;  /* accent hover/darker */
  --accent-soft: #E1F1EE; /* light tint for badges/backgrounds */
  --accent-light: #A1D23F; /* light green (charte) — buttons, client request */
  --green: #00ACD8;       /* Pantone 638 C — secondary accent (confirm states, alt badges) */
  --green-600: #007494;   /* darkened for text/icon contrast (green fails AA at full saturation) */
  --green-soft: #E3F6FA;
  --lime: #93D500;        /* Pantone 375 C — decorative only, low contrast on white (dark backgrounds) */
  --orange: #FF7A00;      /* kept deliberately for eyebrows/breadcrumb — client wants the original orange there */
  --orange-600: #E56C00;
  --bg: #FFFFFF;
  --bg-alt: #F8F5F0; /* ivoire léger — clin d'œil à l'identité du Forum */
  --surface: #FFFFFF;
  --text: #14213D;
  --muted: #47536B;
  --line: #E3E7F0;
  --error: #D92D20;       /* états d'erreur des champs de formulaire */
  --gold: #F4B942;

  /* Type */
  --font-display: 'Gotham', 'Segoe UI', sans-serif;
  --font-body: 'Gotham', 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1180px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(10, 17, 40, .06);
  --shadow-md: 0 8px 30px rgba(10, 17, 40, .1);
  --shadow-lg: 0 20px 60px rgba(10, 17, 40, .18);

  /* Z-scale */
  --z-nav: 50;
  --z-drop: 40;
  --z-overlay: 30;

  /* Motion: pick by what's happening, not by habit.
     - ease-out   → something entering/exiting (dropdowns, reveals, tab panels)
     - ease-io    → something already on screen moving/resizing (accordion height)
     - ease-hover → hover/color/press feedback */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-hover: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Pages with a GSAP ScrollTrigger pin (the zoom-video section) need
   native smooth-scrolling OFF: it fights the pin's own scroll-position
   math and freezes the pinned element. A page-scoped class beats a JS
   inline-style override, which GSAP's own refresh cycle can silently
   re-clobber back to "smooth". */
html.has-pinned-scroll { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: var(--accent-600); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Utility ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-600);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--orange);
}
.section { padding: 88px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); color: #C7CFE2; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section-head { max-width: none; margin-bottom: 48px; }
.section-head p { color: var(--muted); font-size: 1.06rem; max-width: 720px; }
.section-head.center p { margin-inline: auto; }
.section--dark .section-head p { color: #9AA6C4; }
.center { text-align: center; }
.center.section-head { margin-inline: auto; }
.muted { color: var(--muted); }

/* Titres longs (au-delà d'~35 caractères) : la colonne s'élargit et la taille du
   titre diminue légèrement pour qu'il tienne sur une seule ligne en desktop, au
   lieu de replier au hasard sur un mot isolé. Le paragraphe qui suit garde, lui,
   une largeur de lecture confortable (640px). Deux paliers selon la longueur :
   --long (~35-43 caractères) et --xlong (44 caractères et plus). */
.section-head--long { max-width: none; }
.section-head--long h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.section-head--long p { max-width: 640px; }

.section-head--xlong { max-width: none; }
.section-head--xlong h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.section-head--xlong p { max-width: 640px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease-hover), color .18s var(--ease-hover),
              border-color .18s var(--ease-hover), box-shadow .18s var(--ease-hover),
              transform .12s var(--ease-hover);
  text-decoration: none !important;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background-color: var(--accent-light); background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; background-origin: border-box; background-clip: border-box; color: #fff;
  transition: background-size .35s var(--ease-hover), color .18s var(--ease-hover), transform .12s var(--ease-hover); }
.btn--primary:hover { background-size: 100% 100%; color: #fff; }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-600); box-shadow: 0 8px 24px rgba(0, 172, 216, .35); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--accent-light); color: var(--ink); }
.btn--sm { padding: 10px 20px; font-size: .85rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(161,210,63, .7);
  outline-offset: 2px;
}

/* ---------- Header ---------- */
.topbar {
  background: var(--ink);
  color: #B9C3DC;
  font-size: .8rem;
  padding: 7px 0;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.topbar a { color: #E4E9F5; font-weight: 600; }
.topbar-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.topbar-meta span { display: inline-flex; align-items: center; gap: 6px; }
.topbar-meta svg { width: 14px; height: 14px; color: var(--accent); }

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 74px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  margin-right: auto;
  flex-shrink: 0;
}
.brand-logo {
  height: 34px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
/* Footer lockup: the logo's blue wordmark needs a light card to stay legible on the dark footer */
.footer-logo-chip {
  display: inline-flex;
  background: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.footer-logo-chip .brand-logo { height: 28px; }
.footer-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 14px 0 18px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none !important;
  transition: color .2s, background-color .2s;
  cursor: pointer;
  white-space: nowrap;
}
.nav-links > li > a:hover,
.nav-links > li > a.active { color: var(--accent-600); background: var(--accent-soft); }
.nav-links .caret { width: 14px; height: 14px; transition: transform .2s; }
.nav-links li:hover .caret, .nav-links li:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 230px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.98);
  transform-origin: top left;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), visibility .16s;
  z-index: var(--z-drop);
}
.nav-links li:hover .dropdown,
.nav-links li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none !important;
  transition: background-color .18s, color .18s;
}
.dropdown a:hover { background: var(--accent-soft); color: var(--accent-600); }
.dropdown hr { border: 0; border-top: 1px solid var(--line); margin: 6px 8px; }

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* FR/EN selector hidden until every page is fully translated (debrief TEC-03).
   To bring it back: set LANG_SWITCH_ENABLED = true in assets/js/main.js. */
.lang-switch {
  display: none;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch-on .lang-switch { display: inline-flex; }
.lang-switch button {
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  padding: 7px 13px;
  cursor: pointer;
  color: var(--muted);
  transition: background-color .2s, color .2s;
}
.lang-switch button.active { background: var(--ink); color: #fff; }

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px;
  color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(0,117,101,.28), transparent 60%),
    radial-gradient(700px 420px at -5% 110%, rgba(0,172,216,.22), transparent 60%),
    radial-gradient(500px 320px at 50% 120%, rgba(66,103,255,.18), transparent 65%);
  pointer-events: none;
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  padding: 110px 0 90px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
.hero--page .hero-inner {
  grid-template-columns: 1fr;
  padding: 76px 0 64px;
  max-width: 820px;
}
.hero .eyebrow { color: var(--gold); }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--accent); }
.hero-lead { font-size: 1.13rem; color: #B9C3DC; max-width: 560px; }
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 26px 0 34px;
  font-weight: 600;
  font-size: .95rem;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 9px; color: #E4E9F5; }
.hero-meta svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero visual / video card */
.hero-visual { position: relative; }
.video-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(150deg, #1A2755 0%, #0F1738 55%, #251A3F 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 10.5;
  display: grid;
  place-items: center;
}
.video-card .play-btn {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background-color .2s, box-shadow .2s;
}
.video-card .play-btn:hover { background: var(--accent-light); box-shadow: 0 0 0 12px rgba(161,210,63,.25); color: var(--ink); }
.video-card .play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.video-card figcaption {
  position: absolute;
  left: 20px; bottom: 16px;
  font-size: .82rem;
  color: #B9C3DC;
  display: flex; align-items: center; gap: 8px;
}
.video-card figcaption svg { width: 15px; height: 15px; color: var(--accent); }

/* Countdown */
.countdown {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}
.countdown .cd-box {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px 10px;
  min-width: 78px;
  text-align: center;
}
.countdown .cd-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.countdown .cd-label {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9AA6C4;
  margin-top: 6px;
}

/* ---------- Stats ---------- */
.stats-band {
  background: var(--bg-alt);
  margin: 20px;
  border-radius: var(--radius-lg);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 42px 0;
}
.stat { text-align: center; }
/* Chiffres clés dans une demi-colonne (deal-room.html) : trois colonnes égales, sans retour à la ligne dans les chiffres */
.stats-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 26px 0 0; }
.stats-grid--compact .stat-num { font-size: clamp(1.6rem, 2.4vw, 2rem); white-space: nowrap; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.stat-num .plus, .stat-num .statSuffix { color: var(--accent); }
.stat-label { font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: 8px; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
a.card { text-decoration: none !important; color: inherit; display: flex; flex-direction: column; cursor: pointer; }
.card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  background: var(--accent-soft);
  color: var(--accent-600);
}
.card-icon.green { background: var(--green-soft); color: var(--green-600); }
.card-icon.navy { background: #E8EDFB; color: #3653C7; }
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--photo .card-photo-frame { overflow: hidden; }
.card--photo .card-photo {
  width: 100%; height: 190px;
  object-fit: cover; display: block;
  transition: transform .5s var(--ease-out);
}
.card--photo:hover .card-photo { transform: scale(1.06); }
.card--photo .card-body { padding: 26px 30px 30px; display: flex; flex-direction: column; flex: 1; text-align: center; }
.card--photo .card-body h3 { margin-bottom: 6px; }
.card--photo .card-rating { color: var(--ink); letter-spacing: .1em; margin-bottom: 12px; }
.card--photo .card-body p { text-align: left; }
.card--photo .card-body .card-link { align-self: center; margin-top: auto; padding-top: 18px; }

.card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--accent-600);
}
.card .card-link svg { width: 16px; height: 16px; transition: transform .2s; }
.card:hover .card-link svg { transform: translateX(4px); }

/* Carte « pastille organique » : pastille d'icône en haut à gauche, grille 2 x 2 (participer.html) */
.grid-2--blob { gap: 28px; }
.card--blob { border: 0; box-shadow: none; padding: 34px 36px 32px; }
.card--blob:hover { box-shadow: none; transform: translateY(-2px); }
.card--blob .card-icon {
  width: 80px; height: 74px;
  border-radius: 58% 42% 54% 46% / 52% 56% 44% 48%;
  margin-bottom: 18px;
  background: var(--accent-soft);
}
.card--blob .card-icon.green { background: var(--green-soft); }
.card--blob .card-icon.navy { background: #E8EDFB; }
.card--blob .card-icon svg { width: 38px; height: 38px; }
/* Pastille d'icône organique isolée (village-innovation.html), sans changer le reste de la carte */
.card-icon--blob { width: 80px; height: 74px; border-radius: 58% 42% 54% 46% / 52% 56% 44% 48%; margin-bottom: 18px; }
.card-icon--blob svg { width: 38px; height: 38px; }
.card--blob h3 { margin-bottom: 8px; }
.card--blob p { line-height: 1.7; }

/* Day cards (3 jours) */
.day-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  color: #fff;
  text-decoration: none;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* Ancré en haut (sous le pill "day-tag"), pas en bas : bottom-aligné, une carte
   dont le titre prend une ligne de plus poussait sa date plus haut que sur les
   cartes voisines — plus aucune date n'était à la même hauteur. */
.day-card > div { margin-top: 44px; }
.day-card h3 { text-decoration: none; }
.day-card--1 { background: linear-gradient(160deg, var(--ink), #002B74 90%); }
.day-card--2 { background: linear-gradient(160deg, var(--green), #005E7A 90%); }
.day-card--3 { background: linear-gradient(160deg, var(--lime), #3D6B00 90%); }
.day-card .day-tag {
  position: absolute;
  top: 24px; left: 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.35);
  padding: 6px 14px;
  border-radius: 999px;
}
.day-card .day-num {
  position: absolute;
  top: -14px; right: 6px;
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 700;
  color: rgba(255,255,255,.09);
  line-height: 1;
}
.day-card h3 { color: #fff; font-size: 1.45rem; }
.day-card p { color: rgba(255,255,255,.82); font-size: .93rem; margin: 0; }
.day-card .day-date { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }

/* ---------- News ---------- */
.news-card {
  position: relative;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.news-card:hover { box-shadow: none; }
.news-card-inner {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* Circular scoop carved into the bottom-right corner: a quarter-disc of page
   background centered on the card corner, plus two inverse fillets that ease
   the scoop into the card's right and bottom edges (S-curve like the ref).
   Offset -1px so it also erases the card border inside the notch. */
.news-card-inner::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 82px;
  height: 82px;
  pointer-events: none;
  background:
    radial-gradient(circle at 0 0, transparent 18px, var(--line) 18.5px 19.5px, var(--bg) 20px) top right / 20px 20px no-repeat,
    radial-gradient(circle at 0 0, transparent 18px, var(--line) 18.5px 19.5px, var(--bg) 20px) bottom left / 20px 20px no-repeat,
    radial-gradient(circle 67px at 100% 100%, var(--bg) 64px, var(--line) 64.5px 65.5px, transparent 66px) 0 0 / 100% 100% no-repeat;
}
.news-cover {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--ink-800);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.news-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.news-card:hover .news-cover img { transform: scale(1.06); }
.news-body { padding: 24px 26px 56px; display: flex; flex-direction: column; flex: 1; }
.news-date { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-600); margin-bottom: 10px; }
.news-body h3 { font-size: 1.08rem; }
.news-body p { flex: 1; }
.news-card > .icon-link {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-600);
  transition: background-color .2s var(--ease-hover), color .2s var(--ease-hover), transform .2s var(--ease-hover);
}
.news-card > .icon-link svg { width: 18px; height: 18px; transition: transform .2s var(--ease-hover); }
.news-card:hover > .icon-link { background: var(--accent-light); color: var(--ink); transform: scale(1.05); }
.news-card:hover > .icon-link svg { transform: translateX(2px); }
.news-card > .icon-link:active { transform: scale(.94); }

/* ---------- Gallery band (horizontal scroll strip) ---------- */
.gallery-section { padding-bottom: 100px; }
.gallery-strip {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 24px;
  scroll-padding-right: 24px;
  padding: 48px 24px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery-strip::-webkit-scrollbar { display: none; }

/* .gallery-item: the flex slot + scroll-snap target + reveal entrance (transform owned here) */
.gallery-item {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
}

/* .gallery-card: the visual card. Its OWN transform (zigzag baseline + hover) stays off
   the .reveal element on purpose, so the entrance slide and the zigzag never fight over
   the same transform property (see scrub-pipeline: entrance on parent, dynamic style on child). */
.gallery-card {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-sm);
  --gy: 0px;
  transform: translateY(var(--gy));
  transition: transform .5s cubic-bezier(.33, 1, .4, 1), box-shadow .3s ease;
}
.gallery-item:nth-child(odd) .gallery-card { --gy: -26px; }
.gallery-item:nth-child(even) .gallery-card { --gy: 26px; }
.gallery-card:hover { --gy: 0px; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-card--info {
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-700) 100%);
  color: #fff;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}
.gallery-kicker {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.gallery-card--info h3 { color: #fff; font-size: 1.22rem; line-height: 1.25; margin-bottom: 10px; }
.gallery-card--info p { color: #B9C3DC; font-size: .87rem; margin-bottom: 24px; }
.gallery-arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.3);
  display: grid;
  place-items: center;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.gallery-arrow:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--ink); transform: translate(2px, -2px); }
.gallery-arrow svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
  .gallery-item { width: 190px; }
  .gallery-strip { gap: 14px; padding: 38px 20px; scroll-padding-left: 20px; scroll-padding-right: 20px; }
  .gallery-item:nth-child(odd) .gallery-card { --gy: -18px; }
  .gallery-item:nth-child(even) .gallery-card { --gy: 18px; }
}

/* ---------- Partner logos ---------- */
.logo-band { padding: 56px 0; }
.logo-band h2 { font-size: 1rem; text-align: center; color: var(--muted); font-family: var(--font-body); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 34px; }
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.logo-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  height: 76px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: #7A86A3;
  font-size: .86rem;
  text-align: center;
  padding: 8px;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.logo-chip:hover { border-color: rgba(0,117,101,.4); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- Trust logos (homepage partners strip) ---------- */
.partners-section { padding-top: 76px; padding-bottom: 76px; }
.trust-logos {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.trust-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.trust-logo--img img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(.8);
  transition: filter .25s ease;
}
.trust-logo--img:hover img { filter: grayscale(0) opacity(1); }

/* ---------- Speakers ---------- */
.speaker-card { text-align: center; padding: 30px 22px; }
.avatar {
  width: 108px; height: 108px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: #fff;
  border: 4px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line), var(--shadow-sm);
}
.avatar--a { background: linear-gradient(140deg, var(--lime), var(--accent)); }
.avatar--b { background: linear-gradient(140deg, var(--green), var(--ink)); }
.avatar--c { background: linear-gradient(140deg, var(--accent), var(--ink)); }
.avatar--d { background: linear-gradient(140deg, #8B5CF6, #4C2A9E); }
.speaker-card h3 { font-size: 1.06rem; margin-bottom: 4px; }
.speaker-role { font-size: .85rem; color: var(--muted); margin: 0; }
.speaker-tag {
  display: inline-block;
  margin-top: 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-600);
}

/* ---------- Programme timeline ---------- */
.tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.tab-btn {
  border: 1.5px solid var(--line);
  background: var(--surface);
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .9rem;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .18s var(--ease-hover), color .18s var(--ease-hover),
              border-color .18s var(--ease-hover), transform .12s var(--ease-hover);
}
.tab-btn:hover { border-color: var(--accent-light); color: var(--ink); }
.tab-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-btn:active { transform: scale(.96); }
/* Onglets de jour (programme) : libellé, grand numéro, date, et une barre de progression sous l'onglet actif. */
.tabs--days { gap: 0; flex-wrap: nowrap; margin-bottom: 44px; }
.tabs--days .tab-btn {
  position: relative;
  flex: 1 1 0;
  max-width: 300px;
  min-width: 0;
  padding: 0 24px 18px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  color: var(--text);
}
.tabs--days .tab-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent-soft);
  transition: background-color .25s var(--ease-hover);
}
.tabs--days .tab-btn:hover { color: var(--ink); }
.tabs--days .tab-btn.active { background: transparent; color: var(--text); }
.tabs--days .tab-btn.active::after { background: var(--ink); }
.tabs--days .tab-btn:active { transform: none; }
.tabs--days .day-name { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.tabs--days .day-date { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: .92rem; font-weight: 400; color: var(--muted); }
.tabs--days .day-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--text); transition: color .2s var(--ease-hover); }
.tabs--days .tab-btn.active .day-num, .tabs--days .tab-btn:hover .day-num { color: var(--ink); }
@media (max-width: 720px) {
  .tabs--days .tab-btn { padding-right: 10px; }
  .tabs--days .day-name { font-size: .82rem; }
  .tabs--days .day-num { font-size: 1.6rem; }
  .tabs--days .day-date { font-size: .78rem; gap: 4px; }
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabIn .3s var(--ease-out); }
@keyframes tabIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.timeline { border-left: 2px solid var(--line); margin-left: 8px; padding-left: 34px; }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -42px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.tl-time { font-family: var(--font-display); font-weight: 700; color: var(--accent-600); font-size: .92rem; }
.tl-item h3 { font-size: 1.1rem; margin: 6px 0 6px; }
.tl-item p { color: var(--muted); font-size: .93rem; margin: 0; max-width: 640px; }
.tl-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: 2px;
}
.tl-badge--keynote { background: var(--accent-soft); color: var(--accent-600); }
.tl-badge--panel { background: #E8EDFB; color: #3653C7; }
.tl-badge--atelier { background: var(--green-soft); color: var(--green-600); }

/* ---------- Pricing / packs ---------- */
.pack-card { position: relative; display: flex; flex-direction: column; }
.pack-card.featured { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pack-flag {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.pack-price {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 8px 0 2px;
}
.pack-price small { font-size: .9rem; color: var(--muted); font-family: var(--font-body); font-weight: 500; }
.pack-list { list-style: none; margin: 20px 0 26px; padding: 0; flex: 1; }
.pack-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: .92rem;
  color: var(--muted);
}
.pack-list svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 3px; }

/* ---------- Feature list ---------- */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; color: var(--muted); }
.check-list svg { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 3px; }
.check-list strong { color: var(--ink); }

/* ---------- Split layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.split-visual {
  border-radius: var(--radius-lg);
  min-height: 360px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin: 0;
  background: var(--ink-800);
}
.split-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split--access { align-items: stretch; }
.access-info { display: flex; flex-direction: column; }
.access-cta { align-self: flex-end; margin-top: auto; }

.access-gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 100%;
  min-height: 420px;
}
.access-gallery figure {
  margin: 0;
  overflow: hidden;
}
.access-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease-out);
}
.access-gallery figure:hover img { transform: scale(1.05); }
.access-gallery .ag-main { grid-row: 1 / 3; }
@media (max-width: 900px) {
  .access-cta { align-self: stretch; text-align: center; }
}
/* Ces photos sont purement décoratives (aucune information non déjà donnée en texte) :
   inutile de les faire défiler sur mobile, où l'espace vertical compte plus. */
@media (max-width: 720px) {
  .access-gallery { display: none; }
}

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.step::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}
.step h3 { font-size: 1.02rem; }
.step p { font-size: .88rem; color: var(--muted); margin: 0; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-sm); }
.form-card--proposal { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } /* équivalent du shadow-md de Tailwind */
.form-card--white .form-field input, .form-card--white .form-field select, .form-card--white .form-field textarea { background: #fff; } /* champs sur fond blanc (participer.html) */
/* Halo des champs (participer.html) : bleu au focus, vert une fois rempli, rouge si invalide ou obligatoire laissé vide (après interaction) */
.form-card--white .form-field input:focus, .form-card--white .form-field select:focus, .form-card--white .form-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,61,166,.2); }
.form-card--white .form-field input:not(:placeholder-shown)[data-touched]:valid, .form-card--white .form-field textarea:not(:placeholder-shown)[data-touched]:valid, .form-card--white .form-field select[data-touched]:valid { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,117,101,.2); }
.form-card--white .form-field input[data-touched]:invalid, .form-card--white .form-field textarea[data-touched]:invalid, .form-card--white .form-field select[data-touched]:invalid { border-color: var(--error); box-shadow: 0 0 0 3px rgba(217,45,32,.2); }
/* Case à cocher thémée (participer.html) */
.form-card--white .form-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin-top: 3px; cursor: pointer;
  background: #fff center / 12px no-repeat; border: 1.5px solid var(--ink); border-radius: 4px; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.form-card--white .form-check input[type="checkbox"]:hover { border-color: var(--accent); }
.form-card--white .form-check input[type="checkbox"]:checked { background-color: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.form-card--white .form-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,117,101,.25); }
/* Liste déroulante thémée (participer.html) : chevron aux couleurs de la charte ; liste native stylée là où le navigateur le permet (appearance: base-select) */
.form-card--white .form-field select { appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--text); padding-left: 16px; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003DA6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
@supports (appearance: base-select) {
  .form-card--white .form-field select, .form-card--white .form-field select::picker(select) { appearance: base-select; }
  .form-card--white .form-field select { background-image: none; padding-right: 14px; align-items: center; line-height: 1.2; }
  .form-card--white .form-field select::picker-icon { content: ""; width: 16px; height: 16px; transition: transform .2s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003DA6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .form-card--white .form-field select:open::picker-icon { transform: rotate(180deg); }
  .form-card--white .form-field select::picker(select) { background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px; margin-top: 4px; box-shadow: none; }
  .form-card--white .form-field select option { padding: 8px 12px; border-radius: 6px; font-size: .95rem; color: var(--text); }
  .form-card--white .form-field select option:hover, .form-card--white .form-field select option:focus-visible { background: var(--accent-soft); color: var(--accent-600); }
  .form-card--white .form-field select option:checked { font-weight: 700; color: var(--ink); }
  .form-card--white .form-field select option::checkmark { color: var(--accent); }
}
.form-card--proposal button[type="submit"] { display: block; margin: 0 auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: .85rem; font-weight: 700; color: var(--ink); }
.form-field input, .form-field select, .form-field textarea {
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg-alt);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
/* RÈGLE PERMANENTE (tous les formulaires) : champs texte et listes = 36 px de haut, rayon 8 px. Le textarea garde sa hauteur libre. */
.form-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), .form-field select { box-sizing: border-box; height: 36px; padding-top: 0; padding-bottom: 0; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,117,101,.15);
}
.form-note { font-size: .82rem; color: var(--muted); }

/* ---------- FAQ / Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 26px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: background-color .2s;
}
.accordion summary:hover { background: var(--accent-soft); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent);
  transition: transform .25s var(--ease-io);
  flex: none;
}
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion .acc-body {
  overflow: hidden;
  height: 0;
  transition: height .28s var(--ease-io);
}
.accordion .acc-body-inner {
  padding: 0 26px 22px;
  color: var(--muted);
  font-size: .95rem;
}

/* ---------- Info rows ---------- */
.info-row { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; }
.info-row svg { width: 22px; height: 22px; color: var(--accent); flex: none; margin-top: 2px; }
.info-row strong { display: block; color: var(--ink); }
.info-row span { color: var(--muted); font-size: .94rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  background: linear-gradient(135deg, var(--ink) 0%, var(--green) 100%);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: #B9C3DC; margin: 0; max-width: 520px; }
.cta-band .btn { position: relative; }
@media (max-width: 700px) {
  .cta-band--center { flex-direction: column; justify-content: center; text-align: center; gap: 28px; }
  .cta-band--center p { margin-left: auto; margin-right: auto; }
}

/* ---------- Bande photo pleine largeur (ouverture + dérive au défilement) ----------
   Pleine largeur, sans coin arrondi ni marge : en fin d'animation la photo occupe tout
   l'espace, collée aux sections voisines (dont le padding vertical donne déjà de l'air). */
.photo-band { margin: 0; }
.photo-band__media {
  position: relative;
  margin: 0;
  height: clamp(300px, 62vh, 640px);
  overflow: hidden;
  background: var(--ink-800);
}
.photo-band__media img {
  position: absolute;
  left: 0;
  top: -12%;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink) url('../img/footer-gradient.webp') center / 100% 100% no-repeat;   /* dégradé fourni par le client, repli bleu uni */
  color: #fff;   /* blanc : le gris-bleu d'origine est illisible sur le dégradé */
  padding: 72px 0 0;
  margin: 0 20px 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 52px;
}
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a { color: #fff; font-size: .9rem; text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--accent); }
.footer-brand p { font-size: .9rem; max-width: 300px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.5);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background-color .2s, border-color .2s, color .2s;
}
.footer-social a:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--ink); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.4);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
}

/* ---------- Breadcrumb hero (interior pages) ---------- */
.page-hero {
  position: relative;
  /* Client's "dégradé secondaire" (mini charte graphique): azure -> cyan highlight -> navy,
     matching the pill swatch's bright cyan midpoint (a straight 2-stop blend of azure/navy
     alone stays flat — those two blues are too close in lightness to produce that highlight) */
  background: linear-gradient(135deg, var(--ink) 0%, var(--green) 65%, var(--azure) 100%);
  color: #fff;
  overflow: hidden;
  padding: 72px 0 60px;
}
.page-hero .container { position: relative; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3rem); }
.page-hero p { color: #B9C3DC; max-width: 640px; font-size: 1.05rem; margin-bottom: 0; }
.breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .82rem;
  font-weight: 600;
  color: #9AA6C4;
  margin-bottom: 20px;
}
.breadcrumb a { color: #C7CFE2; }
.breadcrumb svg { width: 13px; height: 13px; }
.breadcrumb .current { color: var(--lime); }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(38px) scale(.98);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }

/* Staggered entrance: siblings in the same row reveal in a wave, not all at once */
.grid-2 .reveal:nth-child(1), .grid-3 .reveal:nth-child(1), .grid-4 .reveal:nth-child(1),
.stats-grid .reveal:nth-child(1), .logo-grid .reveal:nth-child(1), .steps .reveal:nth-child(1) { transition-delay: 0ms; }
.grid-2 .reveal:nth-child(2), .grid-3 .reveal:nth-child(2), .grid-4 .reveal:nth-child(2),
.stats-grid .reveal:nth-child(2), .logo-grid .reveal:nth-child(2), .steps .reveal:nth-child(2) { transition-delay: 90ms; }
.grid-3 .reveal:nth-child(3), .grid-4 .reveal:nth-child(3),
.stats-grid .reveal:nth-child(3), .logo-grid .reveal:nth-child(3), .steps .reveal:nth-child(3) { transition-delay: 180ms; }
.grid-4 .reveal:nth-child(4),
.stats-grid .reveal:nth-child(4), .logo-grid .reveal:nth-child(4), .steps .reveal:nth-child(4) { transition-delay: 270ms; }
.stats-grid .reveal:nth-child(5), .logo-grid .reveal:nth-child(5) { transition-delay: 360ms; }
.logo-grid .reveal:nth-child(6) { transition-delay: 450ms; }
.trust-logos .reveal:nth-child(1) { transition-delay: 0ms; }
.trust-logos .reveal:nth-child(2) { transition-delay: 80ms; }
.trust-logos .reveal:nth-child(3) { transition-delay: 160ms; }
.trust-logos .reveal:nth-child(4) { transition-delay: 240ms; }
.trust-logos .reveal:nth-child(5) { transition-delay: 320ms; }
.trust-logos .reveal:nth-child(6) { transition-delay: 400ms; }
/* The gallery strip reveals left to right, echoing its own horizontal scroll */
.gallery-strip .reveal:nth-child(1) { transition-delay: 0ms; }
.gallery-strip .reveal:nth-child(2) { transition-delay: 70ms; }
.gallery-strip .reveal:nth-child(3) { transition-delay: 140ms; }
.gallery-strip .reveal:nth-child(4) { transition-delay: 210ms; }
.gallery-strip .reveal:nth-child(5) { transition-delay: 280ms; }
.gallery-strip .reveal:nth-child(6) { transition-delay: 350ms; }
.gallery-strip .reveal:nth-child(7) { transition-delay: 420ms; }
.gallery-strip .reveal:nth-child(8) { transition-delay: 490ms; }
.gallery-strip .reveal:nth-child(9) { transition-delay: 560ms; }
/* Retire the stagger once revealed, so any later hover transition on these cards never inherits the delay */
.grid-2 .reveal.in, .grid-3 .reveal.in, .grid-4 .reveal.in,
.stats-grid .reveal.in, .logo-grid .reveal.in, .steps .reveal.in,
.gallery-strip .reveal.in, .trust-logos .reveal.in { transition-delay: 0s !important; }

/* ---------- Effets d'apparition « wow » (mêmes noms que WOW.js + animate.css) ----------
   Usage : <div class="wow fadeInUp">, <div class="wow fadeInDown">, <div class="wow fadeInLeft">, <div class="wow fadeInRight">
   Options : data-wow-delay="0.3s", data-wow-duration="1s". Script : bloc WOW de main.js. */
.animated { animation-duration: 1.2s; animation-fill-mode: both; }
.animated.fadeInUp { animation-duration: 1.75s; }
.animated.fadeInLeft, .animated.fadeInRight { animation-duration: 2s; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 30%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -30%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-20%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(20%, 0, 0); } to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }
.fadeInDown { animation-name: fadeInDown; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-links > li > a { padding: 10px 9px; font-size: .84rem; }
}

@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-logos { flex-wrap: wrap; gap: 24px 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding: 72px 0 64px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 48px 32px; }
}

/* Mobile / tablet navigation — kicks in at 1080px because the six top-level labels need ~1050px */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  /* Anchored to the sticky header (its backdrop-filter makes it the containing
     block for fixed descendants, so position:fixed would resolve against the
     74px-tall header and collapse — absolute + top:100% is immune to that). */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 74px);
    height: calc(100dvh - 74px);
    background: var(--surface);
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 4px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
    z-index: var(--z-drop);
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links > li > a { display: flex; width: 100%; padding: 14px 12px; font-size: 1rem; justify-content: space-between; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 8px 14px;
    padding: 0 0 0 6px;
    display: none;
  }
  .nav-links li.open .dropdown { display: block; }
  .nav-actions .btn { display: none; }
}

@media (max-width: 560px) {
  .section { padding: 64px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-logos { flex-wrap: wrap; gap: 20px 32px; }
  .trust-logo--img img { max-height: 38px; max-width: 110px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:nth-child(2), .footer-grid > div:nth-child(3) { display: none; }
  .site-footer { padding-top: 36px; }
  .countdown { flex-wrap: wrap; }
  .countdown .cd-box { min-width: 70px; flex: 1; }
  .hero-ctas .btn { width: 100%; }
  .topbar .topbar-meta span:nth-child(2) { display: none; }
}

/* ---------- Zoom video section ---------- */
.zoomVideoSection {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.zoomVideoSection__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoomVideoSection__frame {
  position: relative;
  width: 74%;
  aspect-ratio: 16/9;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--ink);
}
.zoomVideoSection__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.zoomVideoSection__overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 38, .45);
  pointer-events: none;
}
.zoomVideoSection__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoomMessage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  padding: 0 24px;
}
.zoomVideoSection__content .eyebrow { color: var(--lime); }
.zoomVideoSection__content .eyebrow::before { background: var(--lime); }
.zoomVideoSection__content h2 {
  color: #fff;
  max-width: 720px;
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 28px;
}
.zoomVideoSection__content h2 em {
  color: var(--lime);
  font-style: normal;
}
@media (max-width: 700px) {
  .zoomVideoSection__frame { width: 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .zoomVideoSection__frame { width: 100%; max-width: none; }
  /* Only the final message (the CTA) shows — no sequence to play. */
  #zoomMessage3 { opacity: 1; }
}

/* ---------- « Annonce à venir » — placeholder for content not yet confirmed (règle d'or du débrief client) ----------
   Inline:  <span class="tba" data-en="Coming soon">Annonce à venir</span>
   Block:   <div class="tba-block"><p class="tba-block__title" data-en="Coming soon">Annonce à venir</p>
              <p data-en="Details will be announced shortly.">Les détails seront communiqués prochainement.</p></div> */
.tba {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px dashed var(--muted);
  background: var(--bg-alt);
  color: var(--muted);
  vertical-align: 2px;
}
.tba-block {
  padding: 28px 24px;
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  color: var(--muted);
}
.tba-block p { margin: 0; }
.tba-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 6px !important;
}

/* ---------- Programme : statuts de session, filtres, export ---------- */
.tl-status {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 2px;
  border: 1px dashed var(--muted);
  background: var(--bg-alt);
  color: var(--muted);
}
.tl-status--wip { border: 1px solid var(--green); background: var(--green-soft); color: var(--green-600); }
.tl-status--ok { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-600); }
.tl-theme { margin: 10px 0 0; font-size: .95rem; color: var(--muted); }
.tl-theme strong { color: var(--ink); }
.tl-item[hidden] { display: none; }

/* Masquage des mentions d'attente, sur demande du client (22/09/2026) : « Annonce à venir », « En cours de
   finalisation » et « À confirmer » disparaissent partout où elles apparaissent. La classe .pending-validation
   est posée directement dans le HTML sur le bloc, la carte, la section ou le champ à masquer — jamais sur le
   seul texte, pour ne pas laisser un libellé sans valeur ou une carte vide à l'écran. Réversible : retirer cette
   classe dans le HTML réaffiche l'élément dès que son contenu est validé, sans toucher au CSS. */
.pending-validation { display: none; }
.prog-tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.prog-filters, .prog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.chip:hover { border-color: var(--accent-light); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.prog-note { margin-top: 34px; font-size: .86rem; }

/* Fiche intervenant (modèle : doc/FICHE-INTERVENANT.md) */
.speaker-photo { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; }
.speaker-session { display: inline-block; margin-top: 10px; font-size: .82rem; font-weight: 600; }

@media print {
  .topbar, .site-header, .site-footer, .prog-tools, .tabs, .cta-band, .breadcrumb { display: none !important; }
  .tab-panel { display: block !important; animation: none !important; page-break-inside: auto; }
  .tl-item { break-inside: avoid; }
  section.section:not([data-tabs]) { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Accessibilité : texte réservé aux lecteurs d'écran ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Fiche de session générique (panels, masterclasses) ---------- */
.session-card__head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.session-card__head .tl-badge, .session-card__head .tl-status { margin-left: 0; }
.session-fields { display: grid; gap: 8px; margin: 14px 0 0; font-size: .9rem; }
.session-fields div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; }
.session-fields dt { font-weight: 700; color: var(--ink); }
.session-fields dd { margin: 0; color: var(--muted); }

/* Mobile : pas de vidéo épinglée (économie de données) — le dernier message reste visible sur l'image d'attente */
@media (max-width: 720px) {
  .zoomVideoSection__frame { width: 100%; max-width: none; }
  #zoomMessage3 { opacity: 1; }
}

/* Séquence vidéo : texte blanc lisible sur un voile plus sombre (débrief ACC-18) */
.zoomVideoSection__overlay { background: rgba(6, 20, 38, .58); }
.zoomMessage h2, .zoomMessage .eyebrow { text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }

/* ---------- Formulaires : case de consentement ---------- */
.form-check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--muted); margin-top: 18px; }
.form-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.form-check a { color: var(--accent-600); text-decoration: underline; }
.form-status { margin: 18px 0 0; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--surface, #f4f7fb); font-size: .92rem; border-radius: 4px; }
.form-status.is-error { border-left-color: var(--orange-600); }
.form-status[hidden] { display: none; }

/* ---------- Repères en icônes au trait, sans carte (pays-invite-rwanda.html) ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 28px; text-align: center; }
.feature-icon { position: relative; width: 96px; height: 96px; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.feature-icon::before { content: ""; position: absolute; right: 2px; bottom: 6px; width: 70px; height: 64px; background: var(--green-soft); border-radius: 62% 38% 56% 44% / 56% 44% 56% 44%; transform: rotate(-14deg); }
.feature-icon svg { position: relative; width: 58px; height: 58px; stroke-width: 1.5; }
.feature-item h3 { margin: 18px 0 8px; font-size: 1.12rem; }
.feature-item p { margin: 0 auto; max-width: 260px; color: var(--muted); font-size: .96rem; }
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); text-align: left; }
.feature-grid--2 .feature-icon { width: 80px; margin: 0; justify-content: flex-start; }
.feature-grid--2 .feature-icon::before { right: 0; }
/* le trait de chaque icône part du bord gauche du texte (marge interne du viewBox compensée) */
.feature-grid--2 .feature-item:nth-child(1) .feature-icon svg { margin-left: -10px; }
.feature-grid--2 .feature-item:nth-child(2) .feature-icon svg, .feature-grid--2 .feature-item:nth-child(3) .feature-icon svg { margin-left: -5px; }
.feature-grid--2 .feature-item:nth-child(4) .feature-icon svg { margin-left: -8px; }
.feature-grid--2 .feature-item p { margin: 0; max-width: none; }
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); text-align: left; }
.feature-grid--3 .feature-icon { width: 80px; margin: 0; justify-content: flex-start; }
.feature-grid--3 .feature-icon::before { right: 0; }
.feature-grid--3 .feature-item p { margin: 0; max-width: none; }
/* le trait de chaque icône part du bord gauche du texte (marge interne du viewBox compensée) */
.feature-grid--3 .feature-item:nth-child(1) .feature-icon svg { margin-left: -3px; }
.feature-grid--3 .feature-item:nth-child(2) .feature-icon svg { margin-left: -1px; }
.feature-grid--3 .feature-item:nth-child(3) .feature-icon svg { margin-left: -10px; }
.feature-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
.feature-grid--cols3 .feature-item { padding: 0 12px; }
.feature-grid--cols3 .feature-item p { max-width: none; }
/* pile d'éléments (icône à gauche, titre et texte à droite) + colonne image verticale décorée */
.split--press { grid-template-columns: 1fr 480px; align-items: center; gap: 56px; }
.press-copy .section-head { margin-bottom: 40px; }
.feature-stack { display: grid; gap: 40px; }
.feature-stack .feature-item { display: grid; grid-template-columns: 80px 1fr; column-gap: 24px; align-items: start; text-align: left; }
.feature-stack .feature-icon { width: 80px; margin: -27px 0 0; }
/* le trait de chaque icône démarre ~8 px au-dessus des majuscules du titre (comme le modèle) : compensation de la marge interne du viewBox */
.feature-stack .feature-item:nth-child(3) .feature-icon { margin-top: -29px; }
.feature-text h3 { margin: 0 0 10px; }
.feature-text p { margin: 0; max-width: none; }
@media (max-width: 900px) { .split--press { grid-template-columns: 1fr; gap: 56px; } }
.feature-grid--green .feature-icon { color: var(--accent); }
.feature-grid--green .feature-icon::before { background: var(--accent-soft); }
@media (max-width: 1080px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .feature-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .feature-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .feature-grid--cols2 { grid-template-columns: 1fr; } }
@media (max-width: 1080px) { .feature-grid--cols3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .feature-grid--cols3 { grid-template-columns: 1fr; } }

/* ---------- Drawer (panneau latéral) ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; transition: visibility 0s linear .35s; }
.drawer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(20, 33, 61, .45); opacity: 0; transition: opacity .3s ease; }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: var(--surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.33, 1, .4, 1); outline: none; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--line); flex: none; }
.drawer__head h2 { margin: 0; font-size: 1.2rem; line-height: 1.3; }
.drawer__close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .18s ease; }
.drawer__close:hover { background: var(--accent-soft); }
.drawer__close svg { width: 20px; height: 20px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 28px; }
.drawer__section { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.drawer__section:not(:first-child) { margin-top: 30px; }
.drawer__actions { margin-top: 26px; }
body.drawer-open { overflow: hidden; }
.form-radios { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.form-radios__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.form-radio { display: flex; align-items: center; gap: 10px; font-size: .92rem; cursor: pointer; }
.form-radio input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.drawer .form-field:has(.dropzone) { margin-top: 22px; }
.drawer .form-field input:not([type="file"]) { padding: 0 12px; font-size: .9rem; }
.dropzone { position: relative; padding: 26px 18px; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--bg-soft, #F8F5F0); text-align: center; font-size: .92rem; color: var(--muted); transition: border-color .18s ease, background-color .18s ease; }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone u { color: var(--accent-600); font-weight: 700; }
.dropzone__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .86rem; }
.dropzone__list:not(:empty) { margin-top: 10px; }
.dropzone__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; }
.dropzone__list li.is-error { border-color: var(--orange); color: var(--orange); }
.dropzone__list button { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
@media (max-width: 560px) { .drawer__head, .drawer__body { padding-left: 20px; padding-right: 20px; } .form-radios__list { grid-template-columns: 1fr; } }

/* ---------- Formulaire sur page dédiée (accréditation presse) ---------- */
.section-head--wide p { max-width: none; }
.form-section-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.form-section-title:not(:first-child) { margin-top: 30px; }
.form-grid--6 { grid-template-columns: repeat(6, 1fr); }
.form-grid--6 .span-2 { grid-column: span 2; }
.form-grid--6 .span-3 { grid-column: span 3; }
.form-grid--6 .span-4 { grid-column: span 4; }
.form-compact .form-field input:not([type="file"]) { padding: 0 12px; font-size: .9rem; }
.form-compact .form-field:has(.dropzone) { margin-top: 22px; }
.form-compact .form-radios__list { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.form-actions { margin-top: 26px; text-align: center; }
@media (max-width: 900px) { .form-grid--6 { grid-template-columns: repeat(2, 1fr); } .form-grid--6 .span-2, .form-grid--6 .span-3 { grid-column: auto; } .form-grid--6 .span-4 { grid-column: 1 / -1; } }
@media (max-width: 560px) { .form-grid--6 { grid-template-columns: 1fr; } .form-grid--6 .span-4 { grid-column: auto; } }

/* pile compacte : icône décorée (tache douce) à la taille des pastilles de carte, texte centré verticalement à sa droite */
.feature-stack--compact { gap: 28px; }
.feature-stack--compact .feature-item { grid-template-columns: 56px 1fr; column-gap: 20px; align-items: start; }
.feature-stack--compact .feature-item:nth-child(n) .feature-icon { width: 56px; height: 56px; margin: 0; }
.feature-stack--compact .feature-icon::before { width: 42px; height: 38px; right: 0; bottom: 3px; }
.feature-stack--compact .feature-icon svg { width: 30px; height: 30px; }