/* ============================================================
   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 */
  --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;
  --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%; 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: 720px; margin-bottom: 48px; }
.section-head p { color: var(--muted); font-size: 1.06rem; }
.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: 900px; }
.section-head--long h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.section-head--long p { max-width: 640px; }

.section-head--xlong { max-width: 1100px; }
.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: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-600); box-shadow: 0 8px 24px rgba(0,117,101, .35); }
.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); color: var(--accent-600); }
.btn--sm { padding: 10px 20px; font-size: .85rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid rgba(0,117,101, .5);
  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: #9AA6C4;
  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); box-shadow: 0 0 0 12px rgba(0,117,101,.18); }
.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; }
.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); }

/* 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); color: #fff; 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); border-color: var(--accent); 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); color: var(--accent-600); }
.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;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.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-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: 11px;
  background: var(--bg-alt);
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.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; }

/* ---------- 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);
  color: #9AA6C4;
  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: #9AA6C4; 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,.15);
  display: grid;
  place-items: center;
  color: #C7CFE2;
  transition: background-color .2s, border-color .2s, color .2s;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  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; }

@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); color: var(--accent-600); }
.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; }