/* ==========================================================================
   Africa Health Care Expo — refonte 2026
   Charte : Bleu Santé #0055A5 · Or Afrique #B8873F
   Typographies : Bricolage Grotesque (titres) · Barlow Condensed (dates, chiffres) · Geist (texte)
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root {
  /* Marque */
  --blue: #0055A5;
  --blue-deep: #003B73;
  --blue-soft: #E6EEF7;
  --gold: #B8873F;
  --gold-soft: #F4EBDD;
  --ink: #1A2433;
  --white: #FFFFFF;

  /* Dérivés fonctionnels */
  --muted: #4D5B70;
  --line: #D3DFEC;
  --field-border: #7C8DA3;
  --gold-hover: #C99C58;
  --danger: #A3271F;
  --text-on-dark: #E6EEF7;
  --line-on-dark: rgba(255, 255, 255, .2);

  /* Rôles */
  --color-bg: var(--white);
  --color-text: var(--ink);
  --color-heading: var(--blue-deep);
  --color-primary: var(--blue);
  --color-accent: var(--gold);
  --focus: var(--blue);

  /* Typographie */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Geist", "Segoe UI", system-ui, sans-serif;
  --font-num: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fs-h1: clamp(2.375rem, 1.5rem + 3.8vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 1rem + .4vw, 1.25rem);

  /* Formes */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(0, 59, 115, .06), 0 6px 16px -8px rgba(0, 59, 115, .16);
  --shadow-md: 0 2px 4px rgba(0, 59, 115, .05), 0 28px 56px -28px rgba(0, 59, 115, .34);

  /* Mise en page */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(64px, 9vw, 120px);
  --header-h: 68px;

  /* Plans */
  --z-sticky: 40;
  --z-header: 50;
  --z-menu: 60;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 800; }

p { text-wrap: pretty; }

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

a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.on-dark { --focus: var(--gold-soft); color: var(--white); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--blue-deep);
  color: var(--white);
  border-radius: var(--r-sm);
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

.icon {
  width: 1.25em; height: 1.25em;
  flex: none;
}

/* 3. Éléments récurrents --------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 .8125rem/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--gold);
  flex: none;
}
.on-dark .eyebrow { color: var(--text-on-dark); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
}
.on-dark .lead { color: var(--text-on-dark); }

.section { padding-block: var(--section); }
.section--soft { background: var(--blue-soft); }

.section__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head h2 { margin-top: 14px; }
.section__head .lead { margin-top: 16px; }
.section__head--center { margin-inline: auto; text-align: center; }

.split {
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--text-wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  font: 700 1rem/1.2 var(--font-body);
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn .icon { transition: transform .2s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--lg { min-height: 58px; padding-inline: 28px; font-size: 1.0625rem; }
.btn--sm { min-height: 46px; padding: 10px 18px; font-size: .9375rem; }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover {
  background: var(--gold-hover);
  box-shadow: 0 14px 28px -14px rgba(184, 135, 63, .9);
  transform: translateY(-1px);
}

.btn--blue { background: var(--blue); color: var(--white); }
.btn--blue:hover { background: var(--blue-deep); transform: translateY(-1px); }

.btn--outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--outline:hover { background: var(--blue-soft); }

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: var(--white); background: transparent; }
.btn--ghost:hover { background: var(--white); color: var(--blue-deep); border-color: var(--white); }

.btn--white { background: var(--white); color: var(--blue-deep); }
.btn--white:hover { background: var(--gold-soft); transform: translateY(-1px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}
.link-arrow .icon { transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .icon { transform: translateX(3px); }
.on-dark .link-arrow { color: var(--white); }

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

.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .icon {
  width: 24px; height: 24px;
  padding: 5px;
  margin-top: 2px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  stroke-width: 2.5;
}

/* Bloc date — reprend la construction du logo (dates or, lieu entre deux filets) */
.datelock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.datelock__dates {
  display: inline-block;
  font-family: var(--font-num);
  color: var(--gold);
  text-transform: uppercase;
  line-height: .82;
}
.datelock__row {
  display: flex;
  align-items: flex-start;
  gap: .1em;
  font-weight: 800;
  font-size: clamp(4rem, 2.6rem + 5.6vw, 6.25rem);
}
.datelock__row small {
  margin-top: .3em;
  font-size: .25em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}
.datelock__month {
  display: block;
  margin-top: .55em;
  font-weight: 700;
  font-size: clamp(1.0625rem, .85rem + 1vw, 1.5rem);
  line-height: 1;
  letter-spacing: .06em;
  text-align: justify;
  text-align-last: justify;
}
.datelock__venue {
  padding-block: 10px;
  border-block: 2px solid var(--blue);
  color: var(--blue);
  text-transform: uppercase;
  line-height: 1.16;
}
.datelock__venue span {
  display: block;
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
}
.datelock__venue strong {
  display: block;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  letter-spacing: .04em;
}
.on-dark .datelock__venue { border-color: rgba(255, 255, 255, .9); color: var(--white); }

/* Compte à rebours */
.countdown__label {
  font: 600 .75rem/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.countdown__cell {
  padding: 8px 2px 7px;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  text-align: center;
}
.countdown__num {
  display: block;
  font: 800 1.75rem/1 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--blue-deep);
}
.countdown__unit {
  display: block;
  margin-top: 3px;
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
html:not(.js) .countdown__grid,
.countdown[data-state="live"] .countdown__grid,
.countdown[data-state="over"] .countdown__grid { display: none; }

/* Chiffres clés */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding-left: 16px;
  border-left: 2px solid var(--blue);
}
.stat dt {
  font: 600 .875rem/1.25 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.stat dd {
  font: 800 clamp(2.75rem, 2rem + 3.4vw, 4.25rem)/.9 var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.on-dark .stat { border-color: rgba(255, 255, 255, .7); }
.on-dark .stat dt { color: var(--text-on-dark); }

/* 4. En-tête --------------------------------------------------------------- */
.topbar { display: none; background: var(--blue-soft); font-size: .875rem; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 40px; }
.topbar__event, .topbar__links, .topbar__links a { display: flex; align-items: center; gap: 8px; }
.topbar__event { font-weight: 600; color: var(--blue-deep); }
.topbar__event .icon, .topbar__links .icon { width: 16px; height: 16px; color: var(--blue); }
.topbar__sep { width: 1px; height: 14px; margin-inline: 6px; background: #9FB4CC; }
.topbar__links { gap: 24px; }
.topbar__links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.topbar__links a:hover { color: var(--blue); text-decoration: underline; }
@media (min-width: 1120px) { .topbar { display: block; } }

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.header.is-scrolled {
  border-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(0, 59, 115, .6);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}
.brand { display: inline-flex; flex: none; border-radius: 8px; }
.brand img { width: auto; height: 44px; }

.nav { display: none; }
.nav ul { display: flex; gap: 2px; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav a:hover { background: var(--blue-soft); color: var(--blue-deep); }
.nav a[aria-current="page"] { color: var(--blue); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.header__actions { display: flex; align-items: center; gap: 10px; }
.header__cta { display: none; }
@media (min-width: 480px) { .header__cta { display: inline-flex; } }

.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  color: var(--blue-deep);
  cursor: pointer;
}
.menu-toggle .icon { width: 24px; height: 24px; }
.menu-toggle .icon--close,
.menu-toggle[aria-expanded="true"] .icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .icon--close { display: block; }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  overflow-y: auto;
  animation: menu-in .25s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  border-bottom: 1px solid var(--line);
  font: 800 1.375rem/1.2 var(--font-display);
  color: var(--blue-deep);
  text-decoration: none;
}
.mobile-menu__links a[aria-current="page"] { color: var(--blue); }
.mobile-menu__links .icon { color: var(--gold); }
.mobile-menu__contact { display: grid; gap: 4px; margin-top: auto; font-size: 1rem; }
.mobile-menu__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.mobile-menu__contact .icon { color: var(--blue); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 1120px) {
  :root { --header-h: 80px; }
  .brand img { height: 50px; }
  .nav { display: block; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* 5. Accueil — hero immersif --------------------------------------------------
   La photo du salon occupe tout le premier écran ; le titre, les dates et le
   badge officiel sont posés dessus. C'est le seul endroit spectaculaire du site :
   le reste des pages reste sobre pour le laisser respirer. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: min(100svh - var(--header-h), 940px);
  background: var(--blue-deep);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
/* la photo déborde un peu en haut et en bas : elle glisse plus lentement que la page au défilement */
.hero__bg .slides { inset: -5% 0; transform: translateY(calc(var(--parallax, 0) * 1px)); }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 42, 84, .9) 0%, rgba(0, 59, 115, .84) 50%, rgba(0, 36, 74, .8) 100%);
}

.hero__inner { flex: 1; display: grid; align-content: center; padding-block: 36px 28px; }
.hero__content { container-type: inline-size; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 5px;
  border: 1px solid var(--line-on-dark);
  border-radius: 999px;
  background: rgba(0, 42, 84, .45);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
}
.pill__tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font: 700 .9375rem/1 var(--font-num);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Le titre se cale sur la largeur disponible et sur la hauteur de l'écran :
   trois lignes, toujours entières, et le bouton reste visible sans défiler. */
.hero h1 {
  margin-top: 20px;
  font-size: clamp(2.125rem, 1.4rem + 3.6vw, 4rem);
  font-size: clamp(2.125rem, min(11cqi, 9.4svh), 4.75rem);
  line-height: 1.03;
  letter-spacing: -.025em;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero h1 .line > span { display: block; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__lead { margin-top: 18px; max-width: 36em; color: var(--white); }
.hero .datelock { margin-top: 26px; }
.hero .datelock__row { font-size: clamp(4rem, min(2.4rem + 6vw, 14svh), 7rem); }
.hero__actions { margin-top: 30px; }
@media (max-width: 519px) { .hero__actions .btn { flex: 1 1 100%; } }
.hero__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 18px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--white);
}
.hero__notes li { display: flex; align-items: center; gap: 8px; }
.hero__notes .icon { width: 18px; height: 18px; color: var(--gold); stroke-width: 2.5; }

/* Bas du hero : avancement du diaporama, légende de la photo, compte à rebours, pause */
.hero__bar { padding-bottom: 104px; }
.hero__bar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 14px; }
.hero__count {
  order: 1;
  justify-self: start;
  padding: 9px 10px 10px;
  border-radius: 16px;
  background: rgba(0, 42, 84, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero__count .countdown__label { color: var(--text-on-dark); }
.hero__count .countdown__grid { display: flex; gap: 5px; margin-top: 6px; }
.hero__count .countdown__cell { min-width: 42px; padding: 6px 4px 5px; background: rgba(255, 255, 255, .14); }
.hero__count .countdown__num { font-size: 1.375rem; color: var(--white); }
.hero__count .countdown__unit { color: var(--text-on-dark); }
.slides__toggle { order: 2; }
.hero__caption { order: 3; grid-column: 1 / -1; font: 600 .9375rem/1.3 var(--font-body); color: var(--white); }
.slides__bars { order: 4; grid-column: 1 / -1; display: flex; gap: 6px; }

/* Badge visiteur officiel : il pend du haut de l'écran, à côté du titre */
.pass { display: none; }
.pass__img { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
  .hero { min-height: min(100svh - var(--header-h) - 40px, 940px); }
  .hero__bg::after {
    background:
      linear-gradient(90deg, rgba(0, 42, 84, .95) 0%, rgba(0, 59, 115, .9) 40%, rgba(0, 59, 115, .5) 68%, rgba(0, 42, 84, .3) 100%),
      linear-gradient(180deg, rgba(0, 42, 84, .5) 0%, rgba(0, 42, 84, 0) 26%, rgba(0, 42, 84, 0) 56%, rgba(0, 30, 62, .88) 100%);
  }
  .hero__inner { padding-block: 48px 32px; }
  .hero__content { max-width: min(62%, 780px); }
  .hero__lead { color: var(--text-on-dark); }
  .hero__bar-inner { grid-template-columns: 300px minmax(0, 1fr) auto auto; align-items: center; gap: 20px; }
  .hero__count, .slides__toggle, .hero__caption, .slides__bars { order: 0; grid-column: auto; }
  .pass {
    display: block;
    position: absolute;
    top: 0;
    right: max(var(--gutter), calc((100% - var(--container)) / 2 + 28px));
    z-index: 1;
    width: clamp(190px, 17vw, 250px);
    transform-origin: 50% 0;
    transform: rotate(-3deg);
    filter: drop-shadow(0 26px 26px rgba(0, 10, 30, .5));
  }
}
@keyframes sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-1.8deg); }
}

/* Chiffres sous le hero */
.figures { position: relative; z-index: 2; margin-top: -76px; }
.figures__card {
  display: grid;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.figures__title { font-size: 1.375rem; }
.figures__title .eyebrow { display: flex; margin-bottom: 8px; }
@media (min-width: 960px) {
  .figures__card { grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 40px; padding: 34px 40px; }
}

/* 6. Accueil — sections ---------------------------------------------------- */
.about h2 { margin-top: 14px; }
.about .lead { margin-top: 18px; }

.pillars { display: grid; gap: 20px; margin-top: 32px; }
.pillars li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.pillars .icon {
  width: 52px; height: 52px;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--blue);
}
.pillars h3 { font-size: 1.1875rem; }
.pillars p { margin-top: 4px; color: var(--muted); }

.video-wrap { position: relative; }
.video-wrap::before {
  content: "";
  position: absolute;
  inset: 18px -14px -14px 18px;
  border: 2px solid var(--gold);
  border-radius: var(--r-xl);
}
.video {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--blue-deep);
}
.video > img, .video > video { width: 100%; height: 100%; object-fit: cover; }
.video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 59, 115, .1), rgba(0, 59, 115, .78));
  pointer-events: none;
}
.video.is-playing::after, .video.is-playing .video__caption { display: none; }
.video__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
}
.video__play span {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 28px;
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.video__play:hover span { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(255, 255, 255, .22); }
.video__play .icon { width: 30px; height: 30px; margin-left: 4px; }
.video__play:focus-visible { outline-offset: -6px; outline-color: var(--white); border-radius: var(--r-xl); }
.video__caption {
  position: absolute;
  left: 24px; right: 24px; bottom: 20px;
  z-index: 1;
  color: var(--white);
  font: 800 1.125rem/1.3 var(--font-display);
  pointer-events: none;
}
.video__caption small { display: block; font: 500 .9375rem/1.4 var(--font-body); color: var(--text-on-dark); }

/* Deux parcours */
.paths__grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.path {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.path__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.path__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.path:hover .path__media img { transform: scale(1.04); }
.path__tag {
  position: absolute;
  left: 20px; top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--white);
  color: var(--blue-deep);
  font: 700 .8125rem/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.path__tag .icon { width: 18px; height: 18px; color: var(--blue); }
.path__body { display: flex; flex-direction: column; gap: 22px; flex: 1; padding: clamp(24px, 4vw, 40px); }
.path__body .actions { margin-top: auto; padding-top: 6px; }
.path--dark { background: var(--blue-deep); }
.path--dark .checklist .icon, .benefits .icon { background: rgba(255, 255, 255, .12); color: var(--gold-soft); }

.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.benefits li { display: flex; align-items: center; gap: 12px; font-weight: 600; line-height: 1.25; }
.benefits .icon { width: 44px; height: 44px; padding: 11px; border-radius: 14px; }

/* Secteurs */
.sectors__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
@media (min-width: 520px) { .sectors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sectors__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  font-weight: 600;
  line-height: 1.25;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.sectors__list li:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.sectors__list .icon { width: 28px; height: 28px; color: var(--blue); }

.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mosaic figure { border-radius: var(--r-lg); overflow: hidden; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic figure:nth-child(1) { aspect-ratio: 4 / 5; }
.mosaic figure:nth-child(2) { aspect-ratio: 4 / 6; grid-row: span 2; align-self: center; }
.mosaic figure:nth-child(3) { aspect-ratio: 4 / 4; }
@media (min-width: 960px) { .mosaic { gap: 20px; } }

/* Programme */
.programme { position: relative; isolation: isolate; overflow: hidden; background: var(--blue-deep); }
.programme::before {
  content: "";
  position: absolute;
  left: -160px; top: -200px;
  width: 520px; aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 24%;
  transform: rotate(14deg);
  z-index: -1;
}
.programme__media { position: relative; }
.programme__media::before {
  content: "";
  position: absolute;
  inset: -14px 18px 18px -14px;
  border: 2px solid var(--gold);
  border-radius: var(--r-xl);
}
.programme__media img {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--r-xl);
}
.programme h2 { margin-top: 14px; }
.programme .lead { margin-top: 18px; }
.programme .stats { grid-template-columns: repeat(2, minmax(0, 200px)); margin-top: 32px; }
.programme__note { margin-top: 24px; font-size: .9375rem; color: var(--text-on-dark); }
.programme .actions { margin-top: 28px; }

/* Sponsors et partenaires */
.platinum {
  display: grid;
  gap: 28px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--r-xl);
  background: var(--gold-soft);
}
.platinum__logo {
  display: grid;
  place-items: center;
  width: min(100%, 220px);
  aspect-ratio: 1;
  padding: 24px;
  border-radius: 24%;
  background: var(--white);
}
.platinum__logo img { max-height: 100%; object-fit: contain; }
.platinum__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 .8125rem/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.platinum__tag .icon { width: 20px; height: 20px; }
.platinum h3 { margin-top: 10px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.platinum p { margin-top: 12px; max-width: 62ch; }
@media (min-width: 760px) { .platinum { grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 44px; } }

.partners { margin-top: clamp(40px, 6vw, 72px); }
.partners__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 24px; margin-bottom: 24px; }
.partners__head h3 { margin-top: 10px; }
.partners__head p { color: var(--muted); }
.logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } }
.logos li {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}
.logos img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: contain;
}

/* Infos pratiques */
.facts { display: grid; gap: 14px; margin-top: 32px; }
.fact {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--white);
}
.fact .icon { width: 52px; height: 52px; padding: 13px; border-radius: var(--r-md); background: var(--blue-soft); color: var(--blue); }
.fact__label {
  font: 700 .8125rem/1.2 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.fact__value { margin-top: 4px; font: 800 1.1875rem/1.25 var(--font-display); color: var(--blue-deep); }
.fact__detail { margin-top: 4px; color: var(--muted); font-size: 1rem; }
.infos .actions { margin-top: 28px; }

.map {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.map iframe { width: 100%; height: 100%; border: 0; }
.map--wide { aspect-ratio: 16 / 7; min-height: 320px; }

/* FAQ */
.faq__layout { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .faq__layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
}
.faq__intro h2 { margin-top: 14px; }
.faq__intro .lead { margin-top: 16px; }
.faq__intro .actions { margin-top: 24px; }
.faq__list { border-top: 1px solid var(--line); }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding-block: 16px;
  list-style: none;
  cursor: pointer;
  font: 800 1.125rem/1.3 var(--font-display);
  color: var(--blue-deep);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--blue); }
.faq__list summary .icon {
  width: 38px; height: 38px;
  padding: 9px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.faq__list details[open] summary .icon { transform: rotate(45deg); background: var(--blue); color: var(--white); }
.faq__answer { padding: 0 54px 22px 0; color: var(--muted); }
.faq__list details[open] .faq__answer { animation: answer-in .3s var(--ease); }
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } }

/* Appel final */
.cta { padding-bottom: var(--section); }
.cta__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 36px;
  padding: clamp(28px, 6vw, 72px);
  border-radius: var(--r-xl);
  background: var(--gold-soft);
}
.cta__panel::before {
  content: "";
  position: absolute;
  right: -230px; top: -290px;
  width: 420px; aspect-ratio: 1;
  border: 2px solid rgba(184, 135, 63, .45);
  border-radius: 24%;
  transform: rotate(14deg);
  z-index: -1;
}
.cta__panel p { margin-top: 14px; max-width: 46ch; font-size: var(--fs-lead); }
.cta__panel .actions { margin-top: 28px; }
.cta .datelock { justify-content: flex-start; }
@media (min-width: 960px) {
  .cta__panel { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 56px; }
  .cta .datelock { justify-content: flex-end; }
}

/* 7. Pages intérieures ----------------------------------------------------- */
.pagehero { position: relative; isolation: isolate; overflow: hidden; background: var(--blue-deep); padding-block: clamp(52px, 8vw, 104px) clamp(56px, 8vw, 104px); }
.pagehero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: fade-in 1.2s ease-out backwards; }
.pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 42, 84, .95) 0%, rgba(0, 59, 115, .88) 42%, rgba(0, 59, 115, .38) 100%);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: .9375rem; color: var(--text-on-dark); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.breadcrumb a { color: var(--white); }
.pagehero h1 { margin-top: 18px; max-width: 18em; font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem); }
.pagehero .lead { margin-top: 18px; max-width: 44em; }
.pagehero .actions { margin-top: 30px; }
.pagehero__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; font-weight: 600; color: var(--text-on-dark); }
.pagehero__meta li { display: flex; align-items: center; gap: 10px; }
.pagehero__meta .icon { color: var(--gold); }

.cards { display: grid; gap: 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.card .icon { width: 52px; height: 52px; padding: 13px; border-radius: var(--r-md); background: var(--blue-soft); color: var(--blue); }
.card h3 { margin-top: 18px; font-size: 1.25rem; }
.card p { margin-top: 8px; color: var(--muted); }
.card p + p { margin-top: 10px; }
.card strong { color: var(--ink); }

.profiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .profiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.profiles li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--white);
  font: 800 1.0625rem/1.25 var(--font-display);
  color: var(--blue-deep);
}
.profiles .icon { width: 30px; height: 30px; color: var(--blue); }

.band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl); background: var(--blue-deep); padding: clamp(28px, 6vw, 64px); display: grid; gap: 32px; }
.band::before {
  content: "";
  position: absolute;
  right: -250px; bottom: -330px;
  width: 460px; aspect-ratio: 1;
  border: 1.5px solid rgba(184, 135, 63, .5);
  border-radius: 24%;
  transform: rotate(14deg);
  z-index: -1;
}
.band p { margin-top: 12px; }
.band .actions { margin-top: 26px; }
.band .countdown { max-width: 360px; }
.band .countdown__label { color: var(--text-on-dark); }
.band .countdown__cell { background: rgba(255, 255, 255, .1); padding-block: 14px 12px; }
.band .countdown__num { color: var(--gold); font-size: 2.75rem; }
.band .countdown__unit { color: var(--text-on-dark); }
@media (min-width: 960px) { .band { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 56px; } .band .countdown { justify-self: end; width: 100%; } }

/* Contact */
.contact__layout { display: grid; gap: 32px; }
@media (min-width: 960px) { .contact__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } }
.contact__info h2 { margin-top: 14px; }
.contact__info .lead { margin-top: 16px; }
.contact__list { display: grid; gap: 4px; margin-top: 28px; }
.contact__list li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); }
.contact__list .icon { width: 48px; height: 48px; padding: 12px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.contact__list a { display: inline-flex; align-items: center; min-height: 32px; color: var(--blue-deep); font-weight: 700; }

.form {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.form__row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 600; font-size: .9375rem; }
.field label span { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 85, 165, .22);
}
.field__error { display: none; align-items: center; gap: 6px; color: var(--danger); font-size: .9375rem; font-weight: 600; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field.is-invalid .field__error { display: flex; }
.form__hp { position: absolute; left: -9999px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.form__foot small { color: var(--muted); font-size: .875rem; }
.form__status { padding: 14px 16px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-deep); font-weight: 600; }
.form__status:empty { display: none; }

/* 8. Pied de page ---------------------------------------------------------- */
.footer { background: var(--blue-deep); padding-top: clamp(56px, 8vw, 88px); color: var(--text-on-dark); }
.footer__grid { display: grid; gap: 40px 32px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 48px; } }
.footer__logo { display: inline-block; padding: 12px 16px; border-radius: 18px; background: var(--white); }
.footer__logo img { width: 176px; height: auto; }
.footer__about p { margin-top: 20px; max-width: 34ch; }
.footer h2 {
  font: 700 .8125rem/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.footer__links { display: grid; margin-top: 12px; }
.footer__links a, .footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--white);
  text-decoration: none;
  font-weight: 500;
}
.footer__links a:hover, .footer__contact a:hover { text-decoration: underline; }
.footer__contact { display: grid; margin-top: 12px; }
.footer__contact li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.footer__contact .icon { color: var(--gold-soft); }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1.5px solid var(--line-on-dark);
  border-radius: 14px;
  color: var(--white);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.socials a:hover { background: var(--white); border-color: var(--white); color: var(--blue-deep); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-block: 22px;
  border-top: 1px solid var(--line-on-dark);
  font-size: .9375rem;
}

/* Barre d'action mobile */
.stickybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 -12px 30px -20px rgba(0, 59, 115, .5);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}
.stickybar.is-visible { transform: none; visibility: visible; }
.stickybar p { font: 700 1.0625rem/1.15 var(--font-num); letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); }
.stickybar .btn { flex: none; white-space: nowrap; }
.stickybar p { min-width: 0; }
.stickybar p span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 500 .8125rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--muted); }
@media (max-width: 767px) { .footer { padding-bottom: 76px; } }
@media (min-width: 768px) { .stickybar { display: none; } }

/* 9. Mouvement ------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

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

@media print {
  .topbar, .header, .mobile-menu, .stickybar, .video__play, .map { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* 10. Animations ----------------------------------------------------------
   Tout passe par transform, opacity et clip-path. Le remplissage « backwards »
   garde l'état final dans les styles normaux : rien ne reste masqué si une
   animation ne se lance pas, et les survols restent libres après l'entrée. */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes rise-num { from { opacity: 0; transform: translateY(45%); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.95); } }
@keyframes drift {
  0%, 100% { transform: rotate(14deg) translateY(0); }
  50% { transform: rotate(19deg) translateY(-18px); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes unveil {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes pass-drop {
  0% { transform: translateY(-115%) rotate(-3deg); }
  52% { transform: translateY(0) rotate(-7.5deg); }
  68% { transform: rotate(-.4deg); }
  82% { transform: rotate(-4.6deg); }
  92% { transform: rotate(-2.3deg); }
  100% { transform: rotate(-3deg); }
}
@keyframes pass-drop-mobile {
  0% { transform: translateY(-110%) rotate(2.5deg); }
  55% { transform: translateY(0) rotate(6.5deg); }
  72% { transform: rotate(.4deg); }
  88% { transform: rotate(3.6deg); }
  100% { transform: rotate(2.5deg); }
}
@keyframes pulse-ring {
  from { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  to { box-shadow: 0 0 0 24px rgba(255, 255, 255, 0); }
}
@keyframes tick { from { opacity: 0; transform: translateY(-40%); } }

/* Barre de progression de lecture */
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--gold);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Entrée du hero : la photo apparaît, le titre monte ligne par ligne, le badge tombe.
   --t0 retarde l'ensemble quand le rideau d'ouverture est joué. */
@keyframes line-up { from { transform: translateY(112%); } }
.hero__bg { animation: fade-in 1.4s ease-out var(--t0, 0s) backwards; }
.hero__content > * { animation: rise .8s var(--ease) backwards; animation-delay: calc(var(--t0, 0s) + .1s); }
.hero__content > h1 { animation: none; }
.hero h1 .line > span { animation: line-up 1s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--t0, 0s) + .18s); }
.hero h1 .line:nth-child(2) > span { animation-delay: calc(var(--t0, 0s) + .29s); }
.hero h1 .line:nth-child(3) > span { animation-delay: calc(var(--t0, 0s) + .4s); }
.hero__content > :nth-child(3) { animation-delay: calc(var(--t0, 0s) + .55s); }
.hero__content > :nth-child(4) { animation-delay: calc(var(--t0, 0s) + .65s); }
.hero__content > :nth-child(5) { animation-delay: calc(var(--t0, 0s) + .75s); }
.hero__content > :nth-child(6) { animation-delay: calc(var(--t0, 0s) + .85s); }
.hero .datelock__n { display: inline-block; animation: rise-num .9s var(--ease) backwards; animation-delay: calc(var(--t0, 0s) + .8s); }
.hero .datelock__n + small + .datelock__n { animation-delay: calc(var(--t0, 0s) + .92s); }
.hero__bar { animation: rise .8s var(--ease) backwards; animation-delay: calc(var(--t0, 0s) + 1s); }
@media (min-width: 1024px) {
  .pass {
    animation: pass-drop 1.7s cubic-bezier(.3, .7, .3, 1) backwards, sway 7s ease-in-out infinite;
    animation-delay: calc(var(--t0, 0s) + .75s), calc(var(--t0, 0s) + 2.5s);
  }
}
.pagehero .container > * { animation: rise .75s var(--ease) backwards; }
.pagehero .container > :nth-child(2) { animation-delay: .08s; }
.pagehero .container > :nth-child(3) { animation-delay: .16s; }
.pagehero .container > :nth-child(4) { animation-delay: .24s; }
.pagehero .container > :nth-child(5) { animation-delay: .32s; }

/* Variantes d'apparition au défilement */
@media (min-width: 900px) {
  .js .reveal--left { transform: translateX(-32px); }
  .js .reveal--right { transform: translateX(32px); }
}
.js .reveal--frame { opacity: 1; transform: none; }
.js .reveal--frame > .video,
.js .reveal--frame > img {
  clip-path: inset(0 0 100% 0 round var(--r-xl));
  transition: clip-path 1.1s var(--ease);
}
.js .reveal--frame::before { opacity: 0; transition: opacity .7s var(--ease) .55s; }
.js .reveal--frame .video > img { scale: 1.12; transition: scale 1.6s var(--ease); }
.js .reveal--frame.is-in > .video,
.js .reveal--frame.is-in > img { clip-path: inset(0 0 0 0 round var(--r-xl)); }
.js .reveal--frame.is-in::before { opacity: 1; }
.js .reveal--frame.is-in .video > img { scale: 1; }

/* Listes en cascade : chaque enfant entre à son tour */
.js [data-stagger].reveal { opacity: 1; transform: none; }
.js [data-stagger].reveal > * { opacity: 0; }
.js [data-stagger].reveal.is-in > * {
  opacity: 1;
  animation: pop-in .6s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger, 45ms));
}

/* Micro-interactions */
.btn--gold { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-120%);
}
.btn--gold:hover::after { transform: translateX(120%); transition: transform .8s var(--ease); }

.nav a:hover { background: transparent; }
.nav a::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.nav a:hover::before { transform: scaleX(1); }
.nav a[aria-current="page"]::before { display: none; }

.card .icon, .sectors__list .icon, .profiles .icon, .pillars .icon {
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.card:hover .icon { background: var(--blue); color: var(--white); transform: rotate(-6deg) scale(1.06); }
.sectors__list li:hover .icon, .profiles li:hover .icon { transform: scale(1.15) rotate(-8deg); }
.pillars li:hover .icon { background: var(--blue); color: var(--white); }
.profiles li { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.profiles li:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.logos li { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.logos li:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: var(--shadow-sm); }
.mosaic img { transition: transform .8s var(--ease); }
.mosaic figure:hover img { transform: scale(1.05); }
.video__play span { animation: pulse-ring 2.2s ease-out infinite; }
.video__play:hover span { animation: none; }
.countdown__num.is-tick { animation: tick .35s var(--ease); }
.socials a:hover .icon { transform: scale(1.12); }
.socials .icon { transition: transform .25s var(--ease); }

/* Diaporama du hero : fondu enchaîné, zoom lent, barres de progression, pause */
.slides { position: absolute; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.slide.is-active img { animation: kenburns 8s ease-out both; }
.slide:nth-child(even).is-active img { animation-name: kenburns-back; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-1.2%, -.8%); } }
@keyframes kenburns-back { from { transform: scale(1.12) translate(1.2%, .8%); } to { transform: scale(1.02); } }
.slides__bars li { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.slides__bars span { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; }
.slides__bars .is-done span { transform: scaleX(1); }
.slides__bars .is-active span { animation: bar-fill 6s linear forwards; }
@keyframes bar-fill { to { transform: scaleX(1); } }
.slides__toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(0, 42, 84, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.slides__toggle:hover { background: var(--blue); }
.slides__toggle:focus-visible { outline-color: var(--gold-soft); }
.slides__toggle .icon { width: 20px; height: 20px; }
.slides__toggle .icon--play { display: none; }
.is-paused .slides__toggle .icon--pause { display: none; }
.is-paused .slides__toggle .icon--play { display: block; }
.is-paused .slides__bars span, .is-paused .slide img { animation-play-state: paused; }
html:not(.js) .slides__bars, html:not(.js) .slides__toggle,
.is-static .slides__bars, .is-static .slides__toggle { display: none; }

/* 12. Programme ------------------------------------------------------------- */
.prog__days { display: grid; gap: 10px; }
.prog__day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 72px;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.prog__day b { font: 800 1.5rem/1 var(--font-num); letter-spacing: .03em; text-transform: uppercase; color: var(--blue-deep); }
.prog__day span { font-size: .9375rem; color: var(--muted); }
.prog__day:hover { border-color: var(--blue); transform: translateY(-2px); }
.prog__day[aria-selected="true"] { border-color: var(--blue-deep); background: var(--blue-deep); }
.prog__day[aria-selected="true"] b { color: var(--gold); }
.prog__day[aria-selected="true"] span { color: var(--text-on-dark); }
.prog__day[aria-selected="true"]:focus-visible { outline-color: var(--gold); }
@media (min-width: 640px) { .prog__days { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 14px; } }

.prog__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 600 .9375rem/1.2 var(--font-body);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.chip:hover { border-color: var(--blue); }
.chip.is-on { border-color: var(--blue); background: var(--blue); color: var(--white); }

.prog__panel { margin-top: clamp(28px, 4vw, 44px); }
.prog__panel[hidden] { display: none; }
.prog__panel:focus-visible { outline-offset: 8px; }
.js .prog__panel:not([hidden]) { animation: rise .5s var(--ease) backwards; }
.prog__title { font-size: var(--fs-h3); }
.js [data-prog] .prog__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prog__later { padding: 28px; border: 1.5px dashed var(--line); border-radius: var(--r-lg); color: var(--muted); text-align: center; }

.sessions { display: grid; gap: 12px; margin-top: 18px; }
.session {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.session:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.session[hidden] { display: none; }
.session__time { padding-right: 14px; border-right: 2px solid var(--blue); font-family: var(--font-num); line-height: 1; }
.session__time time { display: block; font-weight: 800; font-size: 1.75rem; color: var(--gold); }
.session__time span { display: block; margin-top: 6px; font-weight: 600; font-size: 1.0625rem; color: var(--muted); }
.session__type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  font: 700 .75rem/1.3 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.session h3 { margin-top: 8px; font-size: 1.1875rem; }
.session__desc { margin-top: 6px; color: var(--muted); }
.session__meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: .9375rem; font-weight: 500; }
.session__meta li { display: flex; align-items: center; gap: 8px; }
.session__meta .icon { width: 18px; height: 18px; color: var(--blue); }
@media (min-width: 720px) {
  .session { grid-template-columns: 112px minmax(0, 1fr); gap: 24px; padding: 22px 26px; }
  .session__time time { font-size: 2.125rem; }
}

.prog-empty {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
  text-align: center;
}
.prog-empty__icon {
  display: inline-grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: 24%;
  background: var(--blue-soft);
  color: var(--blue);
}
.prog-empty__icon .icon { width: 32px; height: 32px; }
.prog-empty h2 { margin-top: 20px; font-size: var(--fs-h3); }
.prog-empty p { margin-top: 12px; color: var(--muted); }
.prog-empty .actions { justify-content: center; margin-top: 26px; }

/* Programme complet en PDF : une carte bien visible au-dessus des séances */
.prog-pdf {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-bottom: clamp(32px, 5vw, 56px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-xl);
  background: var(--blue-deep);
}
.prog-pdf:last-child { margin-bottom: 0; }
.prog-pdf__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: rgba(255, 255, 255, .12); color: var(--gold); }
.prog-pdf__icon .icon { width: 34px; height: 34px; }
.prog-pdf h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.prog-pdf p { margin-top: 8px; color: var(--text-on-dark); }
@media (min-width: 860px) { .prog-pdf { grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; } }

/* 11. Pop-up de réservation ------------------------------------------------
   Une scène à gauche (le vrai badge visiteur suspendu, ou la photo de stand),
   le contenu à droite. Peu d'animations, mais chacune a un rôle : l'entrée,
   le balancement du badge, le changement de scène, le passage d'une étape à l'autre. */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes comet { from { --spin: 0deg; opacity: 1; } 80% { opacity: 1; } to { --spin: 360deg; opacity: 0; } }
@keyframes spin-el { to { transform: rotate(360deg); } }
@keyframes curtain { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes curtain-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ray { 0%, 100% { transform: translateX(-32%); } 50% { transform: translateX(32%); } }
@keyframes word-in { from { opacity: 0; transform: translateY(60%); } }
@keyframes mark-draw { from { background-size: 0% 34%; } }
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.95); } }
@keyframes bg-breathe { from { transform: scale(1.04); } to { transform: scale(1.14) translateY(-2%); } }
@keyframes card-sway { from { rotate: 3deg; } to { rotate: 7deg; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(0, 85, 165, .5); } 100% { box-shadow: 0 0 0 9px rgba(0, 85, 165, 0); } }
@keyframes step-out { to { opacity: 0; transform: translateX(var(--out, -28px)); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(var(--in, 32px)); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(22px) scale(.4); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(78px) scale(1.15); }
}

html:has(.popup[open]) { overflow: hidden; }

.popup {
  width: min(100% - 24px, 1060px);
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
.popup::backdrop {
  background: rgba(0, 20, 46, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
.popup.is-open::backdrop {
  background: rgba(0, 20, 46, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Cadre : filet or, parcouru une seule fois par un trait de lumière à l'ouverture */
.popup__frame {
  position: relative;
  padding: 2px;
  border-radius: calc(var(--r-xl) + 2px);
  background: linear-gradient(135deg, var(--gold), rgba(230, 238, 247, .9) 45%, var(--gold));
  box-shadow: 0 40px 100px -30px rgba(0, 8, 24, .85);
  opacity: 0;
  transform: translateY(46px) scale(.94);
  transition: opacity .2s ease-in, transform .2s ease-in;
}
.popup__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--spin), transparent 0 72%, var(--white) 90%, var(--gold) 97%, transparent 100%);
  opacity: 0;
}
.popup.is-open .popup__frame {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease-out, transform .75s cubic-bezier(.16, 1, .3, 1);
}
.popup.is-open .popup__frame::before { animation: comet 1.7s cubic-bezier(.4, 0, .2, 1) .2s 1 both; }
.popup.is-closing .popup__frame { transform: translateY(14px) scale(.97); }

.popup__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 28px);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
}

.popup__close {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .18);
  color: var(--white);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.popup__close .icon { width: 22px; height: 22px; transition: transform .4s var(--ease); }
.popup__close:hover .icon { transform: rotate(90deg); }
.popup__close:hover { background: rgba(255, 255, 255, .3); }
.popup__close:focus-visible { outline-color: var(--gold-soft); }

/* Scène : le badge officiel pend à son cordon ; côté exposant, la photo de stand prend sa place */
.popup__stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 142px;
  background: radial-gradient(130% 90% at 28% 0%, #0A63B8 0%, var(--blue-deep) 56%, #002A54 100%);
  animation: curtain-down .7s var(--ease) .1s backwards;
}
.stage__nums {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: none;
  font: 800 11.5rem/.8 var(--font-num);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(184, 135, 63, .45);
  translate: calc(var(--px, 0) * -12px) calc(var(--py, 0) * -9px);
  transition: translate .5s var(--ease);
}
.stage__nums span { position: absolute; }
.stage__nums span:first-child { left: 18px; top: 26px; }
.stage__nums span:last-child { right: 14px; bottom: 96px; }
.stage__ray {
  position: absolute;
  inset: -40% -70%;
  z-index: -2;
  background: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .11) 50%, transparent 56%);
  animation: ray 8s ease-in-out 1.2s infinite;
}
.stage__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: circle(0% at 50% 100%);
  transition: clip-path .85s cubic-bezier(.3, .8, .3, 1);
}
.popup__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 42, 84, .2), rgba(0, 42, 84, .78));
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.popup[data-role="exposant"] .stage__photo { clip-path: circle(150% at 50% 100%); }
.popup[data-role="exposant"] .popup__stage::after { opacity: 1; }

.stage__badge {
  position: absolute;
  left: 28px; top: -64px;
  z-index: 1;
  width: 98px; height: auto;
  transform-origin: 50% 0;
  translate: 0 -118%;
  rotate: var(--swing, 0deg);
  filter: drop-shadow(0 18px 16px rgba(0, 10, 30, .45));
  transition: translate .85s cubic-bezier(.2, .9, .3, 1);
  will-change: translate, rotate;
}
.popup.is-open .stage__badge { translate: 0 0; transition-delay: .25s; }
.popup.is-open[data-role="exposant"] .stage__badge { translate: 0 -106%; transition-delay: 0s; transition-duration: .6s; }

.stage__date {
  position: absolute;
  left: 146px; right: 64px; top: 50%;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(0, 42, 84, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  translate: 0 -50%;
  animation: rise .6s var(--ease) .5s backwards;
}
.stage__date b {
  display: block;
  font: 800 1.625rem/1 var(--font-num);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--gold);
}
.stage__date span {
  display: block;
  margin-top: 6px;
  font: 600 .75rem/1.3 var(--font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
}

/* Contenu */
.popup__body { position: relative; padding: 22px 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
.popup__step[hidden] { display: none; }
.popup__step.is-leaving { animation: step-out .17s ease-in forwards; }
.popup[data-dir="back"] .popup__step.is-leaving { --out: 28px; }
.popup__step.is-active > :not(.popup__choices):not(.form),
.popup__step.is-active .form > * { animation: slide-in .55s var(--ease) backwards; }
.popup[data-dir="back"] .popup__step.is-active { --in: -32px; }
.popup__step.is-active > :nth-child(1) { animation-delay: .1s; }
.popup__step.is-active > :nth-child(2) { animation-delay: .17s; }
.popup__step.is-active > :nth-child(3) { animation-delay: .24s; }
.popup__step.is-active > :nth-child(n + 4) { animation-delay: .3s; }
.popup__step.is-active .form > :nth-child(2) { animation-delay: .2s; }
.popup__step.is-active .form > :nth-child(3) { animation-delay: .26s; }
.popup__step.is-active .form > :nth-child(4) { animation-delay: .32s; }
.popup__step.is-active .form > :nth-child(5) { animation-delay: .38s; }
.popup__step.is-active .form > :nth-child(n + 6) { animation-delay: .44s; }

.popup__timer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.popup__timer .countdown__label { color: var(--blue); font-weight: 700; }
.popup__timer .countdown__grid { display: flex; gap: 6px; margin: 0; }
.popup__timer .countdown__cell { display: flex; align-items: baseline; gap: 4px; padding: 6px 10px; }
.popup__timer .countdown__num { font-size: 1.25rem; }
.popup__timer .countdown__unit { margin: 0; font-size: .8125rem; letter-spacing: 0; text-transform: none; }

.popup h2 { margin-top: 14px; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
.popup h2:focus { outline: 0; }
.popup h2 .w { display: inline-block; animation: word-in .7s var(--ease) .3s backwards; }
.popup h2 .w:nth-child(2) { animation-delay: .38s; }
.popup h2 .w:nth-child(3) { animation-delay: .46s; }
.popup h2 .mark {
  padding-inline: .08em;
  background: linear-gradient(rgba(184, 135, 63, .42), rgba(184, 135, 63, .42)) no-repeat 0 90% / 100% 34%;
  animation: word-in .7s var(--ease) .38s backwards, mark-draw .7s var(--ease) .9s backwards;
}
.popup__lead { margin-top: 8px; color: var(--muted); }
.popup__step .actions { margin-top: 22px; }

/* Cartes de choix : le stand en photo, le badge officiel en avant */
.popup__choices { display: grid; gap: 12px; margin-top: 20px; }
.choice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 186px;
  padding: 16px 18px 18px;
  border: 0;
  border-radius: var(--r-lg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transform: perspective(800px) rotateX(calc(var(--ry, 0) * 1deg)) rotateY(calc(var(--rx, 0) * 1deg)) translateY(var(--lift, 0px));
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  animation: card-in .7s cubic-bezier(.16, 1, .3, 1) .5s backwards;
}
.choice + .choice { animation-delay: .62s; }
.choice.is-tilting { transition-duration: .12s, .45s; }
.choice:hover, .choice:focus-visible { --lift: -6px; box-shadow: 0 28px 46px -24px rgba(0, 42, 84, .75); }
.choice:active { --lift: -1px; }

.choice__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.choice__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 100% 30%;
  opacity: 0;
  transition: opacity .7s var(--ease);
  animation: bg-breathe 9s ease-in-out infinite alternate;
}
.choice__bg img.is-loaded { opacity: 1; }
.choice__bg::after { content: ""; position: absolute; inset: 0; }
.choice--stand .choice__bg::after {
  background: linear-gradient(90deg, rgba(0, 42, 84, .97) 40%, rgba(0, 42, 84, .5) 70%, rgba(0, 42, 84, .12));
}
/* Badge officiel : posé de biais, il se balance doucement et se redresse au survol */
.choice--badge .choice__bg { background: radial-gradient(120% 90% at 85% 0%, var(--white) 0%, var(--gold-soft) 64%); }
.choice--badge .choice__bg img {
  position: absolute;
  left: auto; right: 12px; top: 0;
  width: 104px; height: auto;
  max-width: none;
  transform-origin: 50% 0;
  translate: 0 -30%;
  filter: drop-shadow(0 14px 12px rgba(0, 20, 50, .3));
  transition: opacity .7s var(--ease), translate .5s var(--ease);
  animation: card-sway 4.5s ease-in-out infinite alternate;
}
.choice--badge:hover .choice__bg img, .choice--badge:focus-visible .choice__bg img { translate: 0 -27%; }
.choice--badge .choice__bg::after {
  background: linear-gradient(90deg, rgba(244, 235, 221, .96) 44%, rgba(244, 235, 221, 0) 66%);
}

.choice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .34), transparent 62%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.choice:hover::before { opacity: 1; }
.choice__icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: auto;
  border-radius: 15px;
  box-shadow: 0 10px 20px -10px rgba(0, 20, 50, .7);
  transition: transform .35s var(--ease);
}
.choice:hover .choice__icon { transform: rotate(-8deg) scale(1.08); }
.choice__icon .icon { width: 24px; height: 24px; }
.choice strong { display: block; margin-top: 18px; font: 800 1.1875rem/1.2 var(--font-display); }
.choice small { display: block; font-size: .9375rem; line-height: 1.4; }
.choice strong, .choice small { max-width: 58%; }
.choice__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-weight: 700;
  font-size: .9375rem;
}
.choice__go .icon { transition: transform .3s var(--ease); }
.choice:hover .choice__go .icon { transform: translateX(5px); }
.choice__tag {
  position: absolute;
  right: 14px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--white);
  color: var(--blue-deep);
  font: 700 .75rem/1.2 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -10px rgba(0, 20, 50, .6);
}
.choice__tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: ping 1.8s ease-out infinite; }
.choice--stand { background: var(--blue-deep); color: var(--text-on-dark); }
.choice--stand strong, .choice--stand .choice__go { color: var(--white); }
.choice--stand .choice__icon { background: var(--white); color: var(--blue); }
.choice--badge { background: var(--gold-soft); color: var(--ink); }
.choice--badge strong, .choice--badge .choice__go { color: var(--blue-deep); }
.choice--badge .choice__icon { background: var(--gold); color: var(--ink); }
@media (max-width: 599px) {
  .popup__step[data-step="choix"] .popup__lead, .choice small { display: none; }
  .choice { min-height: 152px; }
  .choice strong { max-width: 52%; }
}

.popup__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: -8px 0 0 -6px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--blue);
  font: 700 .9375rem/1 var(--font-body);
  cursor: pointer;
}
.popup__back:hover { background: var(--blue-soft); }
.popup__back .icon { transition: transform .25s var(--ease); }
.popup__back:hover .icon { transform: translateX(-3px); }
.popup__back + h2 { margin-top: 4px; }

.form--plain { margin-top: 18px; padding: 0; border: 0; border-radius: 0; box-shadow: none; gap: 14px; }
.form--plain .form__row { gap: 14px; }
.form--plain .field textarea { min-height: 92px; }
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px; height: 22px;
  border: 3px solid rgba(26, 36, 51, .25);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin-el .7s linear infinite;
}

/* Confirmation : coche tracée et éclats */
.done { position: relative; width: 84px; height: 84px; }
.done svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.done circle {
  stroke: var(--gold);
  stroke-width: 4;
  stroke-dasharray: 214;
  stroke-dashoffset: 214;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.done path { stroke: var(--blue-deep); stroke-width: 6; stroke-dasharray: 48; stroke-dashoffset: 48; }
.popup__step.is-active .done circle { animation: draw .7s var(--ease) .2s forwards; }
.popup__step.is-active .done path { animation: draw .4s var(--ease) .75s forwards; }
.done__burst i {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px;
  border-radius: 28%;
  background: var(--c, var(--gold));
  opacity: 0;
}
.popup__step.is-active .done__burst i { animation: burst .9s var(--ease) .8s; }

@media (min-width: 600px) {
  .popup__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .choice { gap: 6px; min-height: 330px; padding: 20px 22px 22px; }
  .choice__go { margin-top: 10px; }
  .choice__tag { top: 16px; bottom: auto; }
  .choice strong, .choice small { max-width: none; }
  .choice__bg img { object-position: 50% 18%; }
  .choice--stand .choice__bg::after {
    background: linear-gradient(180deg, rgba(0, 42, 84, .06) 30%, rgba(0, 42, 84, .97) 62%);
  }
  .choice--badge .choice__bg img { right: calc(50% - 68px); width: 136px; translate: 0 -30%; }
  .choice--badge:hover .choice__bg img, .choice--badge:focus-visible .choice__bg img { translate: 0 -26%; }
  .choice--badge .choice__bg::after {
    background: linear-gradient(180deg, rgba(244, 235, 221, 0) 50%, rgba(244, 235, 221, .98) 66%);
  }
}
@media (min-width: 860px) {
  .popup__panel { grid-template-columns: 372px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .popup__stage { min-height: 590px; animation-name: curtain; }
  .stage__nums { display: block; }
  .stage__badge { left: 50%; top: -72px; width: 238px; margin-left: -119px; filter: drop-shadow(0 30px 26px rgba(0, 10, 30, .5)); }
  .stage__date {
    left: 24px; right: 24px; top: auto; bottom: 22px;
    padding: 10px 14px;
    text-align: center;
    translate: none;
  }
  .stage__date b { font-size: 2rem; }
  .stage__date span { font-size: .8125rem; }
  .popup__body { padding: 40px 40px 36px; }
  .popup__close { background: var(--blue-soft); color: var(--blue-deep); }
  .popup__close:hover { background: var(--line); }
  .popup__close:focus-visible { outline-color: var(--blue); }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal--frame > .video, .js .reveal--frame > img { clip-path: none; }
  .js .reveal--frame::before { opacity: 1; }
  .js .reveal--frame .video > img { scale: 1; }
  .js [data-stagger].reveal > * { opacity: 1; }
  .hero__bg .slides { transform: none; }
  .stage__ray { display: none; }
  .done circle, .done path { stroke-dashoffset: 0; }
}

/* 13. Mise en mouvement -----------------------------------------------------
   Rideau d'ouverture, phrase qui s'éclaire, galerie horizontale et
   transitions entre pages. Les effets liés
   au défilement sont pilotés par assets/js/animations.js. */

/* Rideau d'ouverture : joué une fois par visite, il se lève sur le hero */
@keyframes intro-lift { to { transform: translateY(-100%); } }
@keyframes intro-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes intro-fill { from { transform: scaleX(0); } }
.intro { display: none; }
.has-intro { --t0: 1.05s; }
.has-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--blue-deep);
  animation: intro-lift .8s cubic-bezier(.76, 0, .24, 1) 1s forwards;
}
.intro__inner { display: grid; justify-items: center; gap: 18px; animation: intro-in .6s var(--ease) backwards; }
.intro__logo { padding: 14px 18px; border-radius: 20px; background: var(--white); }
.intro__logo img { width: 200px; height: auto; }
.intro__date { font: 800 1.5rem/1 var(--font-num); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.intro__bar { width: 200px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.intro__bar::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--gold);
  transform-origin: 0 50%;
  animation: intro-fill .9s cubic-bezier(.6, 0, .2, 1) .05s backwards;
}

/* Transitions entre pages : l'en-tête reste en place, le contenu glisse (navigateurs compatibles) */
@view-transition { navigation: auto; }
@keyframes page-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(26px); } }
.header { view-transition-name: en-tete; }
::view-transition-old(root) { animation: page-out .26s ease-in both; }
::view-transition-new(root) { animation: page-in .55s cubic-bezier(.16, 1, .3, 1) both; }

/* Phrase d'introduction en grand : ses mots s'éclairent au défilement */
.statement {
  font: 700 clamp(1.25rem, 1rem + 1.2vw, 1.75rem)/1.4 var(--font-display);
  letter-spacing: -.01em;
  color: var(--blue-deep);
}

/* Galerie « Le salon en images » : ruban à faire défiler ; sur grand écran, il traverse l'écran pendant que la section reste en place */
.gallery { position: relative; overflow: hidden; background: var(--blue-deep); padding-block: var(--section); }
.gallery__head { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.gallery__head h2 { margin-top: 14px; }
.gallery__head .lead { margin-top: 14px; max-width: 30em; }
.gallery__progress { display: none; }
.gallery__viewport {
  margin-top: 32px;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .4) transparent;
}
.gallery__viewport:focus-visible { outline-offset: -3px; }
.gallery__track { display: flex; gap: 16px; width: max-content; padding-bottom: 12px; }
.gallery__item { flex: none; width: min(72vw, 340px); aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; scroll-snap-align: start; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .gallery.is-pinned {
    display: grid;
    align-items: center;
    height: 100svh;
    min-height: 620px;
    padding-block: calc(var(--header-h) + 16px) 16px;
  }
  .gallery.is-pinned .gallery__inner {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  }
  .gallery.is-pinned .gallery__head { width: auto; margin: 0; }
  .gallery.is-pinned .gallery__progress {
    display: block;
    width: 200px; height: 3px;
    margin-top: 32px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
  }
  .gallery.is-pinned .gallery__progress i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
  .gallery.is-pinned .gallery__viewport {
    margin-top: 0;
    padding: 64px 0;
    overflow: hidden;
    scroll-snap-type: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
    mask-image: linear-gradient(90deg, transparent, #000 56px);
  }
  .gallery.is-pinned .gallery__track { align-items: center; gap: 28px; padding: 0 12vw 0 56px; will-change: transform; }
  .gallery.is-pinned .gallery__item { width: clamp(260px, 23vw, 350px); }
  .gallery.is-pinned .gallery__item:nth-child(odd) { translate: 0 -40px; }
  .gallery.is-pinned .gallery__item:nth-child(even) { translate: 0 40px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* 14. Mur des exposants -------------------------------------------------------
   Sans JavaScript : la grille complète des logos, avec les noms.
   Avec JavaScript : des rangées qui défilent en sens alternés, ralentissent sous
   la souris et accélèrent avec le défilement de la page. Si le visiteur a demandé
   moins d'animations, les rangées ne bougent pas : elles se font glisser à la main.
   Le bouton « Voir tous les exposants » rouvre la grille complète. */
.exhib { overflow: hidden; }
.exhib__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(28px, 4vw, 44px);
}
.exhib__head h2 { margin-top: 14px; }
.exhib__head .lead { margin-top: 14px; max-width: 34em; }
.exhib__tools { display: none; align-items: center; gap: 10px; }
.js .exhib__tools { display: flex; }
.exhib__pause {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1.5px solid var(--blue);
  border-radius: 14px;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.exhib__pause:hover { background: var(--blue); color: var(--white); }
.exhib__pause .icon { width: 20px; height: 20px; }
.exhib__pause .icon--play, .exhib.is-paused .exhib__pause .icon--pause { display: none; }
.exhib.is-paused .exhib__pause .icon--play { display: block; }
.exhib:not(.is-ready) .exhib__pause, .exhib.is-grid .exhib__pause { display: none; }

/* Grille complète */
@keyframes exhib-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } }
.exhib__wall {
  --cell: 96px;
  --tile-w: 132px;
  --tile-h: 84px;
  --gap: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  gap: 20px var(--gap);
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .exhib__wall { --cell: 150px; --tile-w: 176px; --tile-h: 106px; --gap: 16px; }
}
.exhib__row, .exhib__group { display: contents; }
.exhib__group[aria-hidden="true"] { display: none; }
.exhib__item { position: relative; display: grid; align-content: start; gap: 8px; }
.exhib.is-grid .exhib__item {
  animation: exhib-pop .5s var(--ease) backwards;
  animation-delay: calc(min(var(--i, 0), 36) * 14ms);
}
.exhib__logo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.exhib__logo img {
  position: absolute;
  inset: 12px 16px;
  width: calc(100% - 32px);
  height: calc(100% - 24px);
  object-fit: contain;
  transition: transform .35s var(--ease);
}
.exhib__logo--text {
  padding: 8px 12px;
  font: 800 clamp(.9375rem, .8rem + .5vw, 1.1875rem)/1.1 var(--font-num);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--blue-deep);
  overflow-wrap: anywhere;
}
.exhib__name {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--muted);
  overflow-wrap: anywhere;
}
/* Sans logo, le nom est déjà écrit dans la tuile : la légende reste pour les lecteurs d'écran seulement */
.exhib__logo--text + .exhib__name,
.js .exhib:not(.is-grid) .exhib__logo--text + .exhib__name {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (hover: hover) {
  .exhib__item:hover .exhib__logo { border-color: var(--blue); box-shadow: var(--shadow-sm); }
}

/* Rangées */
@keyframes exhib-slide { to { transform: translateX(calc(-100% / var(--copies, 2))); } }
.js .exhib:not(.is-grid) .exhib__wall {
  grid-template-columns: none;
  gap: var(--gap);
  width: auto;
  margin: 0;
  padding: 14px var(--gutter) 18px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--blue) transparent;
}
.js .exhib:not(.is-grid) .exhib__wall:focus-visible { outline-offset: -3px; }
.js .exhib:not(.is-grid) .exhib__row { display: flex; width: max-content; }
.js .exhib:not(.is-grid) .exhib__group { display: flex; gap: var(--gap); padding-right: var(--gap); }
.js .exhib:not(.is-grid) .exhib__item {
  display: block;
  flex: none;
  width: var(--tile-w);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.js .exhib:not(.is-grid) .exhib__logo { aspect-ratio: auto; height: var(--tile-h); }
.js .exhib:not(.is-grid) .exhib__name {
  position: absolute;
  inset: auto 0 0;
  padding: 6px 10px;
  background: var(--blue-deep);
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(101%);
  transition: transform .3s var(--ease);
}
@media (hover: hover) {
  .js .exhib:not(.is-grid) .exhib__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .js .exhib:not(.is-grid) .exhib__item:hover .exhib__logo { border-color: var(--gold); box-shadow: none; }
  .js .exhib:not(.is-grid) .exhib__item:hover .exhib__logo img { transform: translateY(-10px) scale(.86); }
  .js .exhib:not(.is-grid) .exhib__item:hover .exhib__name { transform: none; }
}

/* Défilement : lancé par le script une fois chaque rangée recopiée pour boucler sans à-coup */
.exhib.is-ready:not(.is-grid) .exhib__wall {
  padding-inline: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.exhib.is-ready:not(.is-grid) .exhib__row {
  will-change: transform;
  animation: exhib-slide calc(var(--n) * var(--pace, 3.4s)) linear infinite;
  translate: 9vw 0;
  opacity: 0;
}
.exhib.is-ready:not(.is-grid) .exhib__row:nth-child(2) {
  --pace: 4.1s;
  animation-direction: reverse;
  translate: -9vw 0;
  transition-delay: .12s;
}
.exhib.is-ready:not(.is-grid) .exhib__row:nth-child(3) { --pace: 3s; transition-delay: .24s; }
/* La transition n'existe qu'à l'entrée en scène : au chargement, les rangées se placent sans se faire voir */
.exhib.is-ready.is-seen:not(.is-grid) .exhib__row {
  translate: none;
  opacity: 1;
  transition: translate 1.3s var(--ease), opacity .9s var(--ease);
}
.exhib.is-ready.is-paused:not(.is-grid) .exhib__row,
.exhib.is-ready.is-away:not(.is-grid) .exhib__row { animation-play-state: paused; }
@media print {
  .exhib__tools { display: none !important; }
  .exhib.is-ready:not(.is-grid) .exhib__row { translate: none; opacity: 1; animation: none; }
}

/* 15. Éditions ----------------------------------------------------------------
   Menu déroulant « Éditions » de l'en-tête, sous-menu du menu mobile, ligne du pied
   de page et pages des éditions passées (une page par édition, écrite par build.py). */

/* Menu déroulant : ouvert au clic ; sans JavaScript, il s'ouvre quand le bouton a le focus */
.nav__drop { position: relative; }
.nav__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 10px 8px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.nav__toggle .icon { width: 16px; height: 16px; color: var(--blue); transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav__toggle:hover, .nav__toggle[aria-expanded="true"] { color: var(--blue-deep); }
.nav__toggle[aria-current] { color: var(--blue); }
.nav__toggle::before {
  content: "";
  position: absolute;
  left: 14px; right: 10px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.nav__toggle:hover::before, .nav__toggle[aria-expanded="true"]::before { transform: scaleX(1); }
.nav__toggle[aria-current]::before { background: var(--gold); transform: scaleX(1); }

.drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  width: 344px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 10px) scale(.97);
  transform-origin: 50% 0;
  transition: opacity .2s var(--ease), transform .25s var(--ease), visibility 0s .25s;
}
.drop::before {
  content: "";
  position: absolute;
  left: 50%; top: -7px;
  width: 12px; height: 12px;
  margin-left: -6px;
  border: solid var(--line);
  border-width: 1px 0 0 1px;
  background: var(--white);
  transform: rotate(45deg);
}
.nav__toggle[aria-expanded="true"] + .drop,
html:not(.js) .nav__drop:focus-within .drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s;
}
.drop__title {
  padding: 8px 12px 10px;
  font: 700 .75rem/1.2 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav .drop ul { display: grid; gap: 2px; }
.drop li { opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .35s var(--ease); }
.nav__toggle[aria-expanded="true"] + .drop li,
html:not(.js) .nav__drop:focus-within .drop li {
  opacity: 1;
  transform: none;
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}
.nav .drop a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-weight: 400;
}
.nav .drop a::before, .nav .drop a[aria-current="page"]::after { display: none; }
.nav .drop a:hover, .nav .drop a:focus-visible { background: var(--blue-soft); }
.nav .drop a[aria-current="page"] { background: var(--gold-soft); }
.drop__num {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--gold-soft);
  color: var(--blue-deep);
  font: 800 1.5rem/1 var(--font-num);
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.nav .drop a:hover .drop__num, .nav .drop a:focus-visible .drop__num { background: var(--blue-deep); color: var(--white); }
.drop__text { display: grid; gap: 2px; }
.drop__text b { font: 800 1.0625rem/1.2 var(--font-display); color: var(--blue-deep); }
.drop__text small { font-size: .875rem; line-height: 1.3; color: var(--muted); }
.drop__num .icon { width: 24px; height: 24px; }
.nav .drop a > .icon { width: 18px; height: 18px; color: var(--gold); opacity: 0; transform: translateX(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.nav .drop a:hover > .icon, .nav .drop a:focus-visible > .icon { opacity: 1; transform: none; }

/* Menu mobile : « Éditions » se déplie sur place */
.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--blue-deep);
  font: 800 1.375rem/1.2 var(--font-display);
  text-align: left;
  cursor: pointer;
}
.mobile-menu__toggle .icon { color: var(--gold); transition: transform .3s var(--ease); }
.mobile-menu__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mobile-menu__sub { padding: 6px 0 8px 16px; border-bottom: 1px solid var(--line); animation: menu-in .25s var(--ease); }
.mobile-menu__links .mobile-menu__sub a { min-height: 50px; border-bottom: 0; font: 500 1.0625rem/1.3 var(--font-body); color: var(--ink); }
.mobile-menu__links .mobile-menu__sub b { font-weight: 800; color: var(--blue-deep); }
.mobile-menu__links .mobile-menu__sub a[aria-current="page"] b { color: var(--blue); }

/* Pied de page : les années sur une ligne */
.footer__editions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; min-height: 44px; font-weight: 500; }
.footer__editions span { color: var(--text-on-dark); }

/* Page d'une édition : l'année en très grand derrière le titre */
/* L'entrée ne touche pas à « transform » : le glissement au défilement (animations.js) en a besoin */
@keyframes year-in { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.pagehero--edition { display: grid; align-items: end; min-height: clamp(380px, 54vh, 580px); }
.pagehero--figures { padding-bottom: calc(clamp(56px, 8vw, 104px) + 76px); }
.pagehero__year {
  position: absolute;
  right: -.03em; bottom: -.1em;
  z-index: -1;
  font: 800 clamp(9rem, 30vw, 26rem)/.8 var(--font-num);
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .3);
  pointer-events: none;
  user-select: none;
  animation: year-in 1.4s var(--ease) .15s backwards;
}
/* La carte des chiffres recouvre le bas du bandeau : l'année remonte pour rester lisible */
.pagehero--figures .pagehero__year { bottom: calc(76px - .1em); }
.figures--edition + .section { padding-top: clamp(48px, 7vw, 88px); }
.figures--edition + .gallery { margin-top: clamp(48px, 7vw, 88px); }

.edlinks { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.edlinks h2 { margin-top: 14px; }

.edcards { display: grid; gap: 16px; }
@media (min-width: 720px) { .edcards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
.edcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.edcard:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: var(--shadow-md); }
.edcard__num { font: 800 clamp(2.75rem, 2rem + 2.4vw, 3.75rem)/.9 var(--font-num); color: var(--gold); }
.edcard__text { display: grid; gap: 4px; }
.edcard__text b { font: 800 1.25rem/1.2 var(--font-display); color: var(--blue-deep); }
.edcard__text small { font-size: .9375rem; line-height: 1.35; color: var(--muted); }
.edcard .icon { color: var(--blue); transition: transform .3s var(--ease); }
.edcard:hover .icon { transform: translateX(4px); }

/* 16. Plan du salon -------------------------------------------------------------
   Le plan se déplace et s'agrandit dans son cadre (assets/js/plan.js). Quand le
   fichier est un SVG dont les stands sont identifiés, la liste des exposants et les
   stands eux-mêmes sont cliquables. Sans JavaScript : le plan en image et la liste. */
.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.plan__head h2 { margin-top: 14px; }
.plan__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 32em;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--gold-soft);
  font-size: .9375rem;
  line-height: 1.45;
}
.plan__note .icon { margin-top: 1px; color: var(--blue-deep); }

.plan__layout { display: grid; gap: 20px; }
.plan__map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #F4F8FC;
  overflow: hidden;
}
.plan__viewport { position: relative; overflow: hidden; }
.plan__image, .plan__svg { display: block; width: 100%; height: auto; -webkit-user-select: none; user-select: none; }
.plan__loading, .plan__tools, .plan__hint { display: none; }

/* Cadre interactif */
.js .plan__viewport { aspect-ratio: 4 / 3; cursor: grab; touch-action: pan-y; }
@media (min-width: 640px) { .js .plan__viewport { aspect-ratio: 3 / 2; } }
.js .plan__viewport.is-zoomed { touch-action: none; }
.js .plan__viewport.is-dragging { cursor: grabbing; }
.js .plan__viewport:focus-visible { outline-offset: -4px; }
.js .plan__canvas { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; will-change: transform; }
.plan__canvas.is-moving { transition: transform .6s var(--ease); }
.js .plan:not(.is-ready) .plan__canvas { opacity: 0; }
.plan.is-ready .plan__canvas { animation: fade-in .6s ease-out; }
.js .plan:not(.is-ready) .plan__loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
}

.plan__svg * { pointer-events: none; }
.plan__svg .plan-stand { pointer-events: all; cursor: pointer; outline: none; }
.plan__svg .plan-hover {
  fill: rgba(0, 85, 165, .2);
  stroke: var(--blue);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
@keyframes plan-pulse { 50% { fill: rgba(184, 135, 63, .12); } }
.plan__svg .plan-mark {
  fill: rgba(184, 135, 63, .42);
  stroke: var(--gold);
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: plan-pulse 1.6s ease-in-out infinite;
}

.js .plan.is-ready .plan__tools {
  position: absolute;
  right: 12px; top: 12px;
  display: grid;
  gap: 6px;
}
.plan__tools button, .plan__card button {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--blue-deep);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.plan__tools button:hover:not(:disabled), .plan__card button:hover { border-color: var(--blue); background: var(--blue); color: var(--white); }
.plan__tools button:disabled { opacity: .45; cursor: default; }
.plan__tools .icon { width: 20px; height: 20px; }

.js .plan.is-ready .plan__hint {
  position: absolute;
  left: 50%; bottom: 12px;
  display: block;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 42, 84, .88);
  color: var(--white);
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.js .plan.is-ready .plan__hint.is-on { opacity: 1; transform: translate(-50%, 0); }

.plan__tip {
  position: absolute;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--blue-deep);
  color: var(--white);
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

@keyframes plan-card-in { from { opacity: 0; transform: translateY(12px); } }
.plan__card {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 24px);
  padding: 10px 10px 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
  animation: plan-card-in .35s var(--ease);
}
.plan__card[hidden] { display: none; }
.plan__card p { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
.plan__card small { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan__card b { font: 800 1.0625rem/1.2 var(--font-display); color: var(--blue-deep); overflow-wrap: anywhere; }
.plan__card .plan__logo { width: 76px; height: 50px; }
.plan__card button { flex: none; width: 40px; height: 40px; box-shadow: none; }

/* Liste des exposants */
.plan__side { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.plan__panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; padding: 14px; }
.plan__search { position: relative; display: block; }
.plan__search .icon { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--blue); pointer-events: none; }
.plan__search input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px 10px 42px;
  border: 1.5px solid var(--field-border);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.plan__search input:focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 85, 165, .2); }
.plan__count { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan__list { display: grid; align-content: start; gap: 2px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--blue) transparent; }
.plan__empty { padding: 14px 4px; color: var(--muted); }
.plan__stand {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.plan__stand:hover:not(:disabled) { background: var(--blue-soft); color: var(--blue-deep); }
.plan__stand.is-active { background: var(--gold-soft); color: var(--blue-deep); font-weight: 800; }
.plan__stand:disabled { cursor: default; color: inherit; }
html:not(.js) .plan__stand { cursor: default; }
.plan__logo {
  display: grid;
  place-items: center;
  width: 56px; height: 38px;
  flex: none;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}
.plan__logo img { width: 100%; height: 100%; object-fit: contain; }
.plan__logo--text { font: 800 1.125rem/1 var(--font-num); color: var(--blue-deep); }

@media (min-width: 1024px) {
  .plan__layout { grid-template-columns: 320px minmax(0, 1fr); }
  .plan__layout--solo { grid-template-columns: minmax(0, 1fr); }
  /* La liste prend exactement la hauteur du plan et défile à l'intérieur */
  .js .plan__side { position: relative; }
  .js .plan__panel { position: absolute; inset: 0; }
  .js .plan__list { max-height: none; }
}
@media (max-width: 1023.98px) {
  .plan__side { order: 2; }
}
@media print {
  .plan__tools, .plan__hint, .plan__card, .plan__tip { display: none !important; }
}

/* 17. Refonte visuelle 2026 ------------------------------------------------------
   Direction : un grand évènement institutionnel, affiché comme une affiche.
   Typographie plus franche (titres Bricolage Grotesque serrés, chiffres et dates en
   Barlow Condensed géant), moins d'étiquettes au-dessus des titres, photos plus
   présentes, et une règle de formes unique :
   boutons en pilule, petites tuiles 16 px, cartes et médias 24 px, grands panneaux 32 px. */
:root {
  --fs-h2: clamp(2rem, 1.2rem + 2.8vw, 3.375rem);
  --section: clamp(72px, 10vw, 136px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1 { letter-spacing: -.035em; }
h2 { font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
.section__head h2:first-child, .about h2, .programme h2:first-child,
.faq__intro h2:first-child, .infos h2:first-child, .sectors h2:first-child { margin-top: 0; }
.section h2:first-child { margin-top: 0; }

/* Boutons en pilule, boutons-icônes ronds */
.btn { border-radius: 999px; }
.btn--lg { padding-inline: 30px; }
.slides__toggle, .exhib__pause, .plan__tools button, .menu-toggle { border-radius: 999px; }

/* Hero : quatre éléments seulement (édition, titre, date, boutons) ; la photo respire davantage */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .11;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero h1 {
  margin-top: 22px;
  font-size: clamp(2.25rem, min(6.4cqi, 8.6svh), 4.25rem);
  font-weight: 800;
  line-height: 1.02;
}
.hero .datelock { margin-top: 30px; }
.hero__actions { margin-top: 34px; }
.hero__bar { padding-bottom: 28px; }
@media (min-width: 1024px) {
  .hero { min-height: min(100svh - var(--header-h) - 40px, 980px); }
  .hero__content { max-width: min(68%, 860px); }
  .hero__bg::after {
    background:
      linear-gradient(90deg, rgba(0, 30, 62, .94) 0%, rgba(0, 42, 84, .8) 36%, rgba(0, 59, 115, .32) 66%, rgba(0, 42, 84, .12) 100%),
      linear-gradient(180deg, rgba(0, 30, 62, .45) 0%, rgba(0, 30, 62, 0) 24%, rgba(0, 30, 62, 0) 62%, rgba(0, 22, 48, .9) 100%);
  }
}

/* Le salon : le propos et ses trois piliers, la vidéo à côté */
.about__grid { display: grid; gap: 48px; align-items: center; }
.about h2 { max-width: 15em; }
.about .statement { margin-top: 28px; max-width: 32em; }
.pillars { gap: 0; margin-top: 36px; }
.pillars li { grid-template-columns: 44px minmax(0, 1fr); padding: 20px 0; border-top: 1px solid var(--line); }
.pillars .icon { width: 44px; height: 44px; padding: 11px; border-radius: 14px; }
.pillars h3 { font-size: 1.125rem; }
.about__video .video { aspect-ratio: 1; border-radius: var(--r-xl); }
@media (min-width: 1024px) {
  .about__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 80px; }
}

/* Le salon en chiffres : une bande, des chiffres géants, aucun filet.
   La taille de chaque nombre suit la largeur de sa colonne (unités de conteneur) et la
   longueur du nombre : il remplit l'espace sans jamais déborder sur son voisin. */
.kpis { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(72px, 9vw, 128px); background: var(--blue-deep); }
.kpis__bg { position: absolute; left: 0; top: -12%; z-index: -3; width: 100%; height: 124%; object-fit: cover; opacity: .16; filter: grayscale(1); }
.kpis::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(55% 75% at 88% 0%, rgba(184, 135, 63, .32), transparent 62%),
    radial-gradient(60% 80% at 0% 100%, rgba(0, 85, 165, .6), transparent 70%);
}
.kpis::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.kpis__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(44px, 6vw, 80px); }
.kpis__head h2 { max-width: 12em; }
.kpis__head p { max-width: 28em; font-size: var(--fs-lead); color: var(--text-on-dark); }
.kpis__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 56px); }
@media (min-width: 900px) { .kpis__list { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.kpi { container-type: inline-size; min-width: 0; }
.kpi__num {
  font: 800 clamp(3rem, calc(165cqi / var(--len, 4)), 9rem)/.78 var(--font-num);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--gold);
}
.kpi__num small { margin-left: .03em; font-size: .52em; vertical-align: .64em; color: var(--white); }
.kpi__label {
  margin-top: 16px;
  font: 700 clamp(.875rem, .8rem + .3vw, 1.0625rem)/1.25 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
}
.kpis--light { background: var(--blue-soft); }
.kpis--light::before, .kpis--light::after { display: none; }
.kpis--light .kpis__head p { color: var(--muted); }
.kpis--light .kpi__num { color: var(--blue-deep); }
.kpis--light .kpi__num small { color: var(--blue); }
.kpis--light .kpi__label { color: var(--ink); }

/* Deux parcours : deux grands panneaux photo ; sur ordinateur, celui qu'on survole s'élargit */
.paths { background: var(--blue-soft); }
.paths__title { max-width: 14em; margin-bottom: clamp(28px, 4vw, 48px); }
.paths__grid { gap: 18px; }
.path {
  position: relative;
  isolation: isolate;
  justify-content: flex-end;
  min-height: 580px;
  background: var(--blue-deep);
  box-shadow: none;
}
.path__media { position: absolute; inset: 0 0 -18% 0; z-index: -2; aspect-ratio: auto; }
.path__media img { object-position: 50% 0%; }
.path::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 30, 62, .08) 0%, rgba(0, 30, 62, .3) 32%, rgba(0, 30, 62, .9) 62%, rgba(0, 30, 62, .97) 100%);
}
.path--dark::before {
  background: linear-gradient(180deg, rgba(0, 42, 84, .12) 0%, rgba(0, 42, 84, .36) 32%, rgba(0, 42, 84, .92) 62%, var(--blue-deep) 100%);
}
.path__body { flex: 0 0 auto; gap: 18px; background: none; }
.path__tag {
  position: static;
  align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: var(--white);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.path__tag .icon { color: currentColor; }
.path--dark .path__tag { border-color: transparent; background: var(--gold); color: var(--ink); }
.path h3 { max-width: 15em; font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.08; letter-spacing: -.02em; }
.path .checklist .icon { background: rgba(255, 255, 255, .14); color: var(--gold-soft); }
@media (min-width: 900px) {
  .paths__grid { display: flex; gap: 20px; }
  .path { flex: 1 1 0; min-height: 680px; transition: flex-grow .8s var(--ease); }
  .paths__grid:hover .path:hover { flex-grow: 1.22; }
}

/* Secteurs : de grands intitulés plutôt que des cartes */
.sectors__list { gap: 4px 28px; margin-top: 32px; }
.sectors__list li {
  min-height: 0;
  padding: 14px 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: 800 clamp(1.1875rem, 1rem + .7vw, 1.5rem)/1.2 var(--font-display);
  letter-spacing: -.01em;
  color: var(--blue-deep);
  transition: color .25s var(--ease), transform .35s var(--ease);
}
.sectors__list li:hover { border: 0; box-shadow: none; color: var(--blue); transform: translateX(6px); }
.sectors__list .icon { width: 46px; height: 46px; padding: 11px; border-radius: 16px; background: var(--gold-soft); color: var(--blue-deep); }

/* Galerie : titre à l'échelle de la section */
.gallery__head h2 { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); }

/* Appel final : une affiche, avec la date en très grand */
.poster { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(88px, 12vw, 168px); background: var(--blue-deep); }
.poster__bg { position: absolute; left: 0; top: -10%; z-index: -3; width: 100%; height: 120%; object-fit: cover; }
.poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(0, 22, 48, .96) 0%, rgba(0, 42, 84, .86) 45%, rgba(0, 59, 115, .55) 100%);
}
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .1;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.poster__inner { display: grid; gap: 48px; align-items: center; }
.poster h2 { max-width: 11em; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); }
.poster__text > p { margin-top: 18px; max-width: 34em; font-size: var(--fs-lead); color: var(--text-on-dark); }
.poster .actions { margin-top: 34px; }
.poster__date { display: grid; justify-items: start; font-family: var(--font-num); line-height: .8; text-transform: uppercase; }
.poster__days { font-weight: 800; font-size: clamp(6rem, 3rem + 11vw, 15rem); letter-spacing: -.02em; color: var(--gold); }
.poster__days i { margin-inline: .03em; font-style: normal; color: rgba(255, 255, 255, .35); }
.poster__month { margin-top: .35em; font-weight: 700; font-size: clamp(1.375rem, 1rem + 1.6vw, 2.5rem); letter-spacing: .22em; color: var(--white); }
@media (min-width: 1024px) {
  .poster__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
  .poster__date { justify-items: end; }
}

/* Pages intérieures : les grilles de cartes prennent du rythme au lieu d'aligner des cartes identiques */
.card h3 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); }
.cards--4 > :nth-child(1),
.cards--3 > :first-child:nth-last-child(3) { border-color: transparent; background: var(--blue-deep); }
.cards--4 > :nth-child(1) h3, .cards--3 > :first-child:nth-last-child(3) h3 { color: var(--white); }
.cards--4 > :nth-child(1) p, .cards--3 > :first-child:nth-last-child(3) p { color: var(--text-on-dark); }
.cards--4 > :nth-child(1) strong, .cards--3 > :first-child:nth-last-child(3) strong { color: var(--white); }
.cards--4 > :nth-child(1) .icon, .cards--3 > :first-child:nth-last-child(3) .icon { background: rgba(255, 255, 255, .12); color: var(--gold); }
.cards--4 > :nth-child(4) { border-color: transparent; background: var(--gold-soft); }
@media (min-width: 1024px) {
  .cards--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 > :nth-child(1), .cards--4 > :nth-child(4) { grid-column: span 2; }
}