/* Laurent Folies : proposition de refonte.
   Couleurs tirées de ses photos (salles ultraviolettes, piste de danse en LED rose, logo chromé, étincelles),
   polices et forme des boutons (coins en escalier de pixels, comme un mur de LED vu de près). */

:root {
  /* Couleurs */
  --night: oklch(0.17 0.07 292);          /* l'ultraviolet profond de ses salles : le fond */
  --night-2: oklch(0.215 0.095 292);
  --night-3: oklch(0.27 0.12 292);
  --led-off: oklch(0.205 0.06 292);       /* une LED éteinte */
  --violet: oklch(0.56 0.24 293);         /* ses projecteurs violets */
  --violet-hi: oklch(0.74 0.16 296);
  --fuchsia: oklch(0.69 0.27 345);        /* sa piste de danse en LED : l'action */
  --fuchsia-hi: oklch(0.78 0.2 345);
  --fuchsia-lo: oklch(0.55 0.24 345);
  --chrome: oklch(0.955 0.012 300);       /* l'argent de son logo : le texte sur fond sombre */
  --chrome-dim: oklch(0.82 0.035 300);
  --spark: oklch(0.92 0.13 90);            /* les étincelles, en touche très rare */
  --lilac: oklch(0.965 0.016 305);        /* les sections à lire */
  --lilac-2: oklch(0.915 0.04 305);
  --paper: oklch(0.993 0.005 305);
  --ink: oklch(0.22 0.09 292);
  --ink-soft: oklch(0.42 0.08 292);
  --line-light: oklch(0.78 0.06 300);
  --alert: oklch(0.55 0.2 27);
  --alert-soft: oklch(0.95 0.035 27);

  /* Polices */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Onest', 'Segoe UI', system-ui, sans-serif;
  --font-led: 'Doto', 'Consolas', monospace;

  /* La signature : des coins en escalier de pixels (petit et grand pas) */
  --stepped: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
  --stepped-lg: polygon(0 16px, 8px 16px, 8px 8px, 16px 8px, 16px 0, calc(100% - 16px) 0, calc(100% - 16px) 8px, calc(100% - 8px) 8px, calc(100% - 8px) 16px, 100% 16px, 100% calc(100% - 16px), calc(100% - 8px) calc(100% - 16px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) 100%, 16px 100%, 16px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 16px), 0 calc(100% - 16px));

  /* Mouvement : une seule courbe, trois durées */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --quick: 120ms;
  --standard: 260ms;
  --slow: 700ms;

  /* Le rythme vertical : beaucoup d'air entre les chapitres */
  --space: clamp(56px, 11vw, 168px);
  /* Une LED éteinte : la trame des dalles et des bandeaux */
  --led-grid: radial-gradient(circle, oklch(0.56 0.24 293 / 0.3) 1.2px, transparent 1.7px) 0 0 / 7px 7px;

  /* Contexte par défaut : fond sombre */
  --surface: var(--night);
  --ring: var(--spark);
  --ghost-line: oklch(0.82 0.035 300 / 0.75);
  --header: 60px;

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 12px); }
body {
  margin: 0;
  background: var(--night);
  color: var(--chrome);
  font: 400 17px/1.6 var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
::selection { background: var(--fuchsia); color: var(--night); }

.wrap { width: min(100% - 32px, 1200px); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 50; padding: 10px 14px; background: var(--fuchsia); color: var(--night); font-weight: 600; text-decoration: none; clip-path: var(--stepped); }
.skip:focus { top: 12px; }

.light { --surface: var(--lilac); --ring: var(--fuchsia-lo); --ghost-line: var(--ink); background: var(--lilac); color: var(--ink); color-scheme: light; }

/* Les petites étiquettes en points de matrice, comme un afficheur de scène */
.led-label {
  font: 900 15px/1.2 var(--font-led);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fuchsia-hi);
}
.light .led-label { color: var(--fuchsia-lo); }

/* Icônes en pixels */
.px { flex: none; display: block; }
.px--arrow { width: 14px; height: 10px; }
.px--phone, .px--mail { width: 14px; height: auto; }
.px--star { width: 0.3em; height: 0.3em; color: var(--spark); }

/* ---------- Le bouton : une dalle de LED ---------- */
.led {
  position: relative;
  display: inline-flex;
  text-decoration: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.led__face {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  padding: 0 20px 0 22px;
  background: var(--fuchsia);
  color: var(--night);
  clip-path: var(--stepped);
  font: 700 14px/1.15 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.led__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; }
.led__dots { position: relative; z-index: 1; display: inline-grid; grid-auto-flow: column; gap: 4px; }
/* L'appui : la dalle s'enfonce vite et remonte lentement ; une onde de LED part du doigt (motion.js) */
.led__face { transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease), transform var(--standard) var(--ease); }
.led:active .led__face { transition-duration: 70ms; }
.led__pulse {
  position: absolute;
  z-index: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--chrome) 1.3px, transparent 1.9px) 0 0 / 6px 6px;
  pointer-events: none;
}
.led__dots i { width: 5px; height: 5px; background: currentColor; opacity: 0.3; }
.led:hover .led__face { background: var(--fuchsia-hi); }
.led:hover .led__dots i { animation: chase 0.66s steps(1, end) infinite; }
.led:hover .led__dots i:nth-child(2) { animation-delay: 0.11s; }
.led:hover .led__dots i:nth-child(3) { animation-delay: 0.22s; }
.led:active .led__face { background: var(--fuchsia-lo); color: var(--chrome); transform: translateY(2px) scale(0.975); }
.led:active .led__dots i { animation: none; opacity: 1; }
@keyframes chase { 0% { opacity: 1; } 34% { opacity: 0.3; } 100% { opacity: 0.3; } }

/* Le focus clavier : un cadre de points lumineux, aux mêmes coins en escalier */
.led::after,
.tile::after,
.reel__item::after,
.floor__tile::after,
.screen__poster::after {
  content: '';
  position: absolute;
  inset: -6px;
  padding: 3px;
  background: radial-gradient(circle, var(--ring) 1.3px, transparent 1.9px) 0 0 / 5px 5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  clip-path: var(--stepped);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--quick) var(--ease);
}
.led:focus-visible::after,
.reel__item:focus-visible::after,
.floor__tile:focus-visible::after,
.screen__poster:focus-visible::after,
.tile:has(input:focus-visible)::after { opacity: 1; }

/* Variante en contour : le téléphone */
.led--ghost .led__face { background: var(--ghost-line); color: var(--chrome); }
.light .led--ghost .led__face { color: var(--ink); }
.led--ghost .led__face::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: -1;
  background: var(--surface);
  clip-path: var(--stepped);
  transition: background-color var(--quick) var(--ease);
}
.led--ghost .px--phone { color: var(--fuchsia-hi); }
.led--ghost:hover .led__face { background: var(--fuchsia); color: var(--chrome); }
.led--ghost:hover .led__face::before { background: var(--night-2); }
.led--ghost:active .led__face { background: var(--fuchsia-lo); transform: translateY(2px) scale(0.975); }
.led--ghost:active .led__face::before { background: var(--night-3); }

.led--small .led__face { min-height: 44px; padding: 0 14px; font-size: 12px; gap: 8px; }
.led--full { display: flex; width: 100%; }
.led--full .led__face { justify-content: space-between; min-height: 58px; }

/* Envoi en cours : les points défilent en continu */
.led.is-busy { cursor: progress; }
.led.is-busy .led__face { background: var(--fuchsia-lo); color: var(--chrome); }
.led.is-busy .led__dots i { animation: chase 0.42s steps(1, end) infinite; }
.led.is-busy .led__dots i:nth-child(2) { animation-delay: 0.07s; }
.led.is-busy .led__dots i:nth-child(3) { animation-delay: 0.14s; }

/* ---------- Le lien : un trait de points qui s'allume ---------- */
.glow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0 10px;
  border: 0;
  background: radial-gradient(circle, currentColor 1.1px, transparent 1.5px) 0 calc(100% - 4px) / 6px 4px repeat-x;
  color: inherit;
  font: 700 13.5px/1.3 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--quick) var(--ease);
}
.glow .px--arrow { color: var(--fuchsia-hi); transition: transform var(--standard) var(--ease); }
.light .glow .px--arrow { color: var(--fuchsia-lo); }
.glow:hover { color: var(--fuchsia-hi); background-size: 4px 4px; }
.light .glow:hover { color: var(--fuchsia-lo); }
.glow:hover .px--arrow { transform: translateX(4px); }
.glow:active { color: var(--fuchsia-lo); }
.glow:active .px--arrow { transform: translateX(7px); }
.glow:focus-visible { outline: 2px dotted var(--ring); outline-offset: 5px; }
.glow--ink { color: var(--night); }
.glow--ink .px--arrow { color: var(--night); }
.glow--ink:hover, .glow--ink:active { color: var(--night); }
.glow--plain { font: 500 16px/1.4 var(--font-body); text-transform: none; letter-spacing: 0; }

/* ---------- En-tête ---------- */
.top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, oklch(0.17 0.07 292 / 0.82), oklch(0.17 0.07 292 / 0));
  transition: background-color var(--standard) var(--ease), box-shadow var(--standard) var(--ease);
}
.top.is-solid { background: var(--night); box-shadow: 0 1px 0 oklch(0.74 0.16 296 / 0.22); }
.top__brand { display: grid; text-decoration: none; line-height: 1; outline: none; }
.top__brand:focus-visible { outline: 2px dotted var(--ring); outline-offset: 4px; }
.brand__first { font: 900 10px/1 var(--font-led); letter-spacing: 0.62em; text-transform: uppercase; color: var(--chrome-dim); padding-left: 2px; }
.brand__name { display: flex; align-items: flex-start; gap: 3px; font: 800 21px/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--chrome); margin-top: 3px; }
.brand__name .px--star { width: 9px; height: 9px; margin-top: -3px; }
.top__nav { display: none; }
.top__actions { display: flex; gap: 8px; align-items: center; }
.top__call .led__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.top__call .led__face { padding: 0 12px; }
.top__call .px--phone { width: 15px; }

/* ---------- Haut de page ---------- */
.hero { position: relative; background: var(--night); }
.hero__wall {
  position: relative;
  height: clamp(250px, 49svh, 470px);
  overflow: hidden;
  background: var(--led-off);
}
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 47% 34%; }
.hero__leds { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
/* Après l'allumage, le canvas n'ajoute que de la lumière à la photo */
.hero__leds.is-ambient { mix-blend-mode: screen; }
/* La photo se fond dans le fond de la page en bas */
.hero__wall::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  background: linear-gradient(to top, var(--night), oklch(0.17 0.07 292 / 0));
  pointer-events: none;
}
.hero__text { position: relative; padding: 14px 16px 34px; }
.hero__overline { margin-bottom: 10px; }
.hero__title { display: grid; color: var(--chrome); text-transform: uppercase; }
.hero__first { font: 500 15px/1 var(--font-display); letter-spacing: 0.56em; color: var(--chrome-dim); margin-bottom: 8px; }
.hero__name { display: flex; align-items: flex-start; font: 800 clamp(50px, 16.4vw, 136px)/0.92 var(--font-display); letter-spacing: -0.01em; }
.hero__name .px--star { margin-left: 0.04em; margin-top: -0.06em; width: 0.26em; height: 0.26em; }
.hero__lede { margin-top: 14px; max-width: 36ch; color: var(--chrome-dim); font-size: 16.5px; line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__cta { flex: 1 1 200px; }
.hero__call { flex: 1 1 150px; }
.hero__call .led__face { gap: 10px; font-size: 13.5px; letter-spacing: 0.04em; }

/* Entrée du texte : une seule cascade, courte */
.hero__overline, .hero__title, .hero__lede, .hero__actions { animation: rise var(--slow) var(--ease) both; }
.hero__title { animation-delay: 80ms; }
.hero__lede { animation-delay: 180ms; }
.hero__actions { animation-delay: 260ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Le fil de lumière et les couches ----------
   Le fil est un canvas fixe posé au-dessus des fonds de section et sous leur contenu. */
.thread { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
[data-thread="off"] .thread { display: none; }
main > section:not(.hero) > *, .ticker > *, .foot > * { position: relative; z-index: 2; }

/* Les canvas posés sur un titre ou une photo le temps de leur apparition en points de LED */
[data-reveal] { position: relative; }
.wipe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* ---------- Le bandeau : un afficheur qui défile ---------- */
.ticker {
  padding: 16px 0 14px;
  background: var(--led-grid), var(--night);
  box-shadow: inset 0 1px 0 oklch(0.56 0.24 293 / 0.25), inset 0 -1px 0 oklch(0.56 0.24 293 / 0.25);
}
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__run { display: flex; align-items: center; flex: none; }
.marquee__item { white-space: nowrap; }
.marquee__sep { flex: none; width: 8px; height: 8px; }
.marquee--ticker .marquee__item {
  padding: 0 24px;
  font: 900 clamp(26px, 6.6vw, 40px)/1 var(--font-led);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fuchsia-hi);
  text-shadow: 0 0 16px oklch(0.69 0.27 345 / 0.5);
}
.marquee--ticker .marquee__sep { background: var(--spark); }

/* ---------- Les chapitres ---------- */
section { position: relative; }
.chapter { position: relative; z-index: 2; display: grid; gap: 16px; margin-bottom: clamp(36px, 7vw, 76px); }
.chapter__over { display: flex; align-items: center; gap: 12px; }
/* Le numéro du chapitre : une petite dalle que le fil allume en arrivant */
.chapter__num {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 26px;
  padding: 0 7px;
  background: var(--led-grid), var(--night-2);
  color: var(--violet-hi);
  clip-path: var(--stepped);
  letter-spacing: 0.06em;
  transition: background-color var(--slow) var(--ease), color var(--slow) var(--ease);
}
.chapter__num.is-lit { background: var(--fuchsia); color: var(--night); }
.chapter__title { font: 800 clamp(40px, 11.6vw, 132px)/0.98 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; max-width: 13ch; }
.chapter__title--giant { font-size: clamp(66px, 21vw, 220px); line-height: 0.84; text-transform: uppercase; max-width: none; }
.chapter__lede { font: 500 clamp(18px, 4.7vw, 25px)/1.4 var(--font-body); color: var(--chrome-dim); max-width: 32ch; text-wrap: pretty; }

/* ---------- La folie : le mot géant et Laurent, qui se chevauchent ---------- */
.folie { padding-block: var(--space); }
.folie__grid { display: grid; gap: 34px; }
.folie__stage { display: grid; }
.folie__stage .chapter { margin-bottom: 0; }
.folie__photo { position: relative; z-index: 1; justify-self: end; width: 78%; margin-top: -0.05em; font-size: clamp(66px, 21vw, 220px); }
.folie__frame { aspect-ratio: 4 / 5; }
.pixel-frame { clip-path: var(--stepped-lg); overflow: hidden; background: var(--night-2); }
.pixel-frame img { width: 100%; height: 100%; object-fit: cover; }
.folie__frame img { object-position: 50% 16%; }
.folie__motto { font: 900 clamp(22px, 5.8vw, 32px)/1.1 var(--font-led); color: var(--fuchsia-hi); letter-spacing: 0.04em; }
.folie__body { display: grid; gap: 16px; max-width: 58ch; font-size: 17.5px; color: var(--chrome-dim); }
.folie__crew { margin-top: 6px; font: 600 clamp(19px, 4.6vw, 23px)/1.45 var(--font-body); color: var(--chrome); text-wrap: pretty; }

/* ---------- Vos fêtes : la piste de danse, puis une seule fête en grand ---------- */
.parties { padding-block: var(--space); }
.floor { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: clamp(28px, 5vw, 48px); }
.floor__tile {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 78px;
  padding: 12px 14px 13px;
  border: 0;
  background: var(--led-grid), var(--night-2);
  color: var(--chrome-dim);
  text-align: left;
  clip-path: var(--stepped);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--standard) var(--ease), color var(--standard) var(--ease), transform var(--standard) var(--ease);
}
.floor__num { font: 900 14px/1 var(--font-led); letter-spacing: 0.08em; color: var(--violet-hi); }
.floor__name { font: 700 clamp(15px, 4.2vw, 19px)/1.15 var(--font-display); }
.floor__tile:hover { background-color: var(--night-3); color: var(--chrome); }
.floor__tile:active { transform: translateY(2px) scale(0.98); transition-duration: 70ms; }
/* La dalle choisie est allumée, comme sa piste en LED rose */
.floor__tile[aria-selected="true"] { background: radial-gradient(circle, oklch(0.86 0.15 345 / 0.75) 1.2px, transparent 1.7px) 0 0 / 7px 7px, var(--fuchsia); color: var(--night); }
.floor__tile[aria-selected="true"] .floor__num { color: var(--night); }
/* La dalle est découpée en escalier : son cadre de focus est donc dessiné à l'intérieur */
.floor__tile::after { --ring: var(--spark); inset: 4px; }
.floor__tile[aria-selected="true"]::after { --ring: var(--night); }

.fete { display: grid; outline: none; animation: rise var(--slow) var(--ease) both; }
.fete:focus-visible { outline: 2px dotted var(--ring); outline-offset: 8px; }
.fete__photo { aspect-ratio: 4 / 3; margin-inline: -16px; clip-path: none; }
.fete__photo::after { content: ''; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(to top, var(--night), oklch(0.17 0.07 292 / 0)); pointer-events: none; }
.fete__body { position: relative; z-index: 2; display: grid; gap: 14px; align-content: start; container-type: inline-size; }
/* Le nom de la fête mord sur le bas de la photo ; sa taille suit sa colonne (le plus long, « Événements », tient toujours) */
.fete__name { margin-top: -0.62em; font: 800 min(104px, 13cqi)/1 var(--font-display); letter-spacing: -0.03em; }
.fete__tagline { font: 500 clamp(19px, 5vw, 26px)/1.3 var(--font-display); color: var(--fuchsia-hi); text-wrap: balance; max-width: 24ch; }
.fete__text { color: var(--chrome-dim); max-width: 58ch; }
.dots-list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 6px; }
.dots-list li { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-body); color: var(--chrome); }
.dots-list li::before { content: ''; flex: none; width: 6px; height: 6px; background: var(--fuchsia); box-shadow: 0 0 8px var(--fuchsia); }
.fete .glow { justify-self: start; margin-top: 4px; }

/* ---------- L'équipe : trois colonnes, comme trois écrans ---------- */
.team { padding-block: var(--space); }
.team__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; column-gap: 8px; }
.crew { display: grid; align-content: start; gap: 10px; }
.crew__name { display: flex; align-items: flex-start; gap: 6px; min-height: 2.6em; font: 900 12px/1.25 var(--font-led); letter-spacing: 0.04em; text-transform: uppercase; color: var(--chrome); }
.crew__name::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 3px; background: var(--fuchsia); }
.crew__photos { display: grid; gap: 6px; }
.crew__photo { overflow: hidden; background: var(--night-2); aspect-ratio: 3 / 4; }
.crew__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.roster { margin-top: clamp(44px, 8vw, 80px); display: grid; gap: 16px; }
.roster__list { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 600 clamp(16px, 4.2vw, 21px)/1.25 var(--font-display); color: var(--chrome); }
.roster__list li { display: inline-flex; align-items: baseline; gap: 10px; }
.roster__list li::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--fuchsia); transform: translateY(-2px); }

/* ---------- Vidéos ---------- */
.clips { padding-block: var(--space); }
.clips__grid { display: grid; gap: 22px; }
.screen {
  --bezel: oklch(0.56 0.24 293 / 0.55);
  position: relative;
  padding: 8px;
  background: radial-gradient(circle, var(--bezel) 1.4px, transparent 2px) 0 0 / 7px 7px, var(--night-2);
  clip-path: var(--stepped-lg);
  transition: --bezel var(--standard) var(--ease);
}
.screen:hover, .screen:has(:focus-visible) { --bezel: oklch(0.69 0.27 345 / 0.9); }
.screen__poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--night);
  cursor: pointer;
  outline: none;
}
.screen__poster img { width: 100%; height: 100%; object-fit: cover; }
.screen__poster::after { inset: 6px; }
/* Le bouton de lecture est posé dans un coin, pour ne jamais cacher un visage */
.screen__play {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--fuchsia);
  color: var(--night);
  clip-path: var(--stepped);
  transition: transform var(--standard) var(--ease), background-color var(--quick) var(--ease);
}
.screen__play .px--play { width: 20px; height: 20px; margin-left: 4px; }
.screen__poster:hover .screen__play { transform: scale(1.08); background: var(--fuchsia-hi); }
.screen__poster:active .screen__play { transform: scale(0.96); background: var(--fuchsia-lo); color: var(--chrome); }
.screen__play { transform-origin: 0 100%; }
.screen__caption { display: none; }
.screen iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--night); }
.reel { display: grid; gap: 4px; align-content: start; }
.reel__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 16px 10px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  outline: none;
  clip-path: none;
  transition: background-color var(--quick) var(--ease);
}
.reel__num { font: 900 22px/1 var(--font-led); color: var(--violet-hi); opacity: 0.75; }
.reel__text { display: grid; gap: 2px; }
.reel__now { display: none; font: 900 12px/1.2 var(--font-led); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fuchsia-hi); }
.reel__title { font: 600 16px/1.3 var(--font-body); color: var(--chrome); }
.reel__context { font-size: 14px; color: var(--chrome-dim); }
.reel__item .px--play { width: 9px; height: 9px; color: var(--chrome-dim); opacity: 0; transition: opacity var(--quick) var(--ease), transform var(--standard) var(--ease); }
.reel__item:hover { background: var(--night-2); }
.reel__item:hover .reel__num { color: var(--fuchsia-hi); opacity: 1; }
.reel__item:hover .px--play { opacity: 1; transform: translateX(2px); color: var(--fuchsia-hi); }
.reel__item:active { background: var(--night-3); }
.reel__item[aria-pressed="true"] { background: var(--night-2); clip-path: var(--stepped); }
.reel__item[aria-pressed="true"] .reel__num { color: var(--fuchsia); opacity: 1; text-shadow: 0 0 10px oklch(0.69 0.27 345 / 0.7); }
.reel__item[aria-pressed="true"] .reel__now { display: block; }
.reel__item[aria-pressed="true"] .px--play { opacity: 1; color: var(--fuchsia); }
.reel__item::after { inset: 0; }
.clips__note { margin-top: 18px; font-size: 14px; color: var(--chrome-dim); max-width: 60ch; }

/* ---------- People ---------- */
.people { padding-block: var(--space); }
/* Les photos posées côte à côte comme les dalles d'un mur de LED */
.people__wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: var(--night-2); clip-path: var(--stepped-lg); }
.people__tile { aspect-ratio: 503 / 640; overflow: hidden; background: var(--night-3); }
.people__tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Références : deux rangées qui défilent, la liste entière sur demande ---------- */
.refs { padding-block: var(--space); }
.refs__rows { display: grid; gap: 22px; }
.refs__row { display: grid; gap: 10px; }
.refs__row-name { width: min(100% - 32px, 1200px); margin-inline: auto; }
.marquee--refs .marquee__item { padding: 0 20px; font: 600 clamp(22px, 6vw, 44px)/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--chrome); }
.refs__row + .refs__row .marquee__item { color: var(--chrome-dim); }
.marquee--refs .marquee__sep { width: 7px; height: 7px; background: var(--fuchsia); }
.refs__toggle { margin-top: 28px; }
.refs__toggle[aria-expanded="true"] .px--arrow { transform: rotate(90deg); }
.refs__groups { display: grid; gap: 40px; margin-top: 32px; }
.refs__name { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; font: 700 clamp(20px, 5vw, 26px)/1.2 var(--font-display); text-transform: uppercase; }
.refs__name::after { content: ''; flex: 1; height: 4px; background: radial-gradient(circle, var(--violet) 1.4px, transparent 1.9px) 0 50% / 7px 4px repeat-x; }
.refs__list { font: 500 16.5px/1.95 var(--font-body); color: var(--chrome-dim); }
.refs__list li { display: inline; }
/* Le point reste collé au nom qui le précède : jamais de point en début de ligne */
.refs__list li:not(:last-child)::after { content: '\00a0\00a0\25AA\0020\0020'; color: var(--fuchsia); font-size: 0.9em; white-space: pre-wrap; }

/* ---------- Témoignage : un panneau de LED rose ---------- */
.word {
  --ring: var(--night);
  overflow: hidden;
  padding-block: var(--space);
  background:
    radial-gradient(circle, oklch(0.8 0.19 345 / 0.6) 1.4px, transparent 2px) 0 0 / 10px 10px,
    var(--fuchsia);
  color: var(--night);
}
/* Le mur dessiné (motion.js) remplace le fond quand les animations sont permises */
.word > .word__wall { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; }
.word .led-label { color: var(--night); }
.word .chapter__over { margin-bottom: 4px; }
.word .chapter__num { background: oklch(0.55 0.24 345 / 0.5); color: var(--night); }
.word .chapter__num.is-lit { background: var(--night); color: var(--fuchsia-hi); }
.word__figure { margin-top: 22px; display: grid; gap: 22px; }
.word blockquote { margin: 0; display: grid; gap: 14px; }
.word__lead { font: 800 clamp(31px, 8.4vw, 86px)/1.04 var(--font-display); letter-spacing: -0.025em; text-wrap: balance; max-width: 20ch; }
.word__lead::before { content: '« '; }
.word__lead::after { content: ' »'; }
.word__line { font: 500 18px/1.55 var(--font-body); max-width: 56ch; }
.word__by { display: grid; gap: 4px; }
.word__by strong { font: 800 18px/1.2 var(--font-display); text-transform: uppercase; }
.word__by span { font: 900 15px/1.2 var(--font-led); letter-spacing: 0.08em; text-transform: uppercase; }
.word__more { margin-top: 26px; }

/* ---------- Devis ---------- */
.quote { padding-block: var(--space); }
.quote__grid { display: grid; gap: 44px; }
.quote__intro .chapter { margin-bottom: 20px; }
.quote__text { font-size: 18px; max-width: 42ch; color: var(--chrome-dim); }
.quote__lines { margin-top: 30px; display: grid; gap: 10px; }
.quote__line-label { margin-top: 8px; }
.quote__phones { display: grid; gap: 4px; }
.dial {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 8px;
  color: var(--chrome);
  font: 700 clamp(24px, 6.6vw, 32px)/1.15 var(--font-display);
  text-decoration: none;
  background: radial-gradient(circle, transparent 1.1px, transparent 1.5px) 0 100% / 6px 4px repeat-x;
  transition: color var(--quick) var(--ease);
}
.dial .px { width: 18px; color: var(--fuchsia-hi); }
.dial--mail { font-size: clamp(16px, 4.4vw, 21px); overflow-wrap: anywhere; }
.dial:hover { color: var(--fuchsia-hi); background-image: radial-gradient(circle, var(--fuchsia-hi) 1.1px, transparent 1.5px); }
.dial:active { color: var(--fuchsia); }
.dial:focus-visible { outline: 2px dotted var(--ring); outline-offset: 4px; }

/* Le formulaire : la seule surface claire de la page, comme une carte posée sur la scène */
.desk { position: relative; padding: 22px 18px 26px; background: var(--paper); color: var(--ink); clip-path: var(--stepped-lg); }
.burst { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.desk__title { font: 700 21px/1.2 var(--font-display); }
.desk__note { margin: 8px 0 20px; font-size: 15px; color: var(--ink-soft); }
.desk__form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label, .choice legend { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.field small, .choice small { font-weight: 400; color: var(--ink-soft); font-size: 14px; }
.field input, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 2px solid var(--line-light);
  border-radius: 0;
  background: var(--lilac);
  color: var(--ink);
  font-size: 16.5px;
  outline: none;
  transition: border-color var(--quick) var(--ease), background-color var(--quick) var(--ease), outline-color var(--quick) var(--ease);
}
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder, .field textarea::placeholder { color: oklch(0.55 0.05 300); }
.field input:hover, .field textarea:hover { border-color: var(--violet); }
.field input:focus-visible, .field textarea:focus-visible, .field input:focus, .field textarea:focus { border-color: var(--fuchsia-lo); background: var(--paper); outline: 2px dotted var(--fuchsia-lo); outline-offset: 3px; }
.field input[aria-invalid="true"] { border-color: var(--alert); background: var(--alert-soft); }
.field input[aria-invalid="true"]:focus { outline-color: var(--alert); }
.field__error { display: flex; align-items: center; gap: 8px; font: 600 14.5px/1.3 var(--font-body); color: var(--alert); }
.field__error .px--alert { width: 4px; height: 12px; }
.field-row { display: grid; gap: 18px; }
.choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: 10px; }
.choice__list { display: flex; flex-wrap: wrap; gap: 8px; }

/* Un choix : une dalle de piste de danse */
.tile { position: relative; display: inline-flex; cursor: pointer; }
.tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tile__face {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px 0 14px;
  background: var(--line-light);
  color: var(--ink);
  font: 600 15px/1.2 var(--font-body);
  clip-path: var(--stepped);
  transition: background-color var(--quick) var(--ease), color var(--quick) var(--ease), transform var(--quick) var(--ease);
}
.tile__face::before { content: ''; position: absolute; inset: 2px; z-index: -1; background: var(--lilac); clip-path: var(--stepped); transition: background-color var(--quick) var(--ease); }
.tile__mark { width: 10px; height: 10px; border: 2px solid var(--ink-soft); flex: none; transition: background-color var(--quick) var(--ease), border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease); }
.tile:hover .tile__face { background: var(--violet); }
.tile:hover .tile__face::before { background: var(--lilac-2); }
.tile:active .tile__face { transform: translateY(1px); }
.tile input:checked + .tile__face { background: var(--fuchsia-lo); color: var(--night); }
.tile input:checked + .tile__face::before { background: var(--fuchsia); }
.tile input:checked + .tile__face .tile__mark { background: var(--night); border-color: var(--night); box-shadow: 0 0 0 2px var(--fuchsia), 0 0 0 4px var(--night); }

.desk__done { margin-top: 20px; outline: none; }
.desk__done-mark { display: grid; place-items: center; width: 56px; height: 56px; background: var(--fuchsia); color: var(--night); clip-path: var(--stepped); animation: pop var(--standard) var(--ease) both; }
.desk__done-mark .px--check { width: 24px; height: auto; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.desk__done-title { margin-top: 16px; font: 800 26px/1.15 var(--font-display); text-transform: uppercase; }
.desk__done-text { margin-top: 6px; color: var(--ink-soft); }
.desk__summary { margin: 18px 0; display: grid; gap: 0; }
.desk__summary div { display: grid; gap: 2px; padding: 10px 0; background: radial-gradient(circle, var(--line-light) 1px, transparent 1.4px) 0 100% / 6px 3px repeat-x; }
.desk__summary dt { font: 900 13px/1.2 var(--font-led); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fuchsia-lo); }
.desk__summary dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.desk__demo { margin-bottom: 16px; font: 600 14.5px/1.4 var(--font-body); color: var(--ink-soft); }

/* ---------- Pied de page ---------- */
.foot { padding: clamp(56px, 9vw, 110px) 0 calc(28px + env(safe-area-inset-bottom)); background: oklch(0.13 0.055 292); color: var(--chrome-dim); }
.foot__name { display: grid; font: 800 clamp(56px, 17vw, 190px)/0.9 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; color: var(--night-3); }
.foot__name span { font: 500 clamp(13px, 2.6vw, 22px)/1 var(--font-display); letter-spacing: 0.6em; color: var(--violet-hi); margin-bottom: 10px; }
.foot__grid { display: grid; gap: 28px; margin-top: 36px; }
.foot__about { display: grid; gap: 10px; max-width: 44ch; }
.foot__motto { font: 900 17px/1.3 var(--font-led); color: var(--fuchsia-hi); letter-spacing: 0.04em; }
.foot__links { display: grid; gap: 0; justify-items: start; }
.foot__links .glow { color: var(--chrome); }
.foot__links .glow:hover { color: var(--fuchsia-hi); }
.foot__links .glow:active { color: var(--fuchsia); }
.foot__demo { margin-top: 44px; padding-top: 22px; display: grid; gap: 10px; font-size: 14.5px; background: radial-gradient(circle, var(--night-3) 1.2px, transparent 1.6px) 0 0 / 7px 4px repeat-x; }
.foot__demo a { color: var(--chrome); text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.foot__demo a:hover { color: var(--fuchsia-hi); }
.foot__demo a:focus-visible { outline: 2px dotted var(--ring); outline-offset: 3px; }
.foot__official { justify-self: start; }

/* ---------- Tablette ---------- */
@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .top__call .led__text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .desk { padding: 30px 30px 34px; }
  .folie__photo { width: 64%; }
}

@media (min-width: 760px) {
  .floor { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .floor__tile { min-height: 96px; padding: 14px 18px 16px; }
  .team__groups { gap: 28px; }
  .crew__name { min-height: 0; font-size: 14px; }
  .crew__photos { grid-template-columns: 1fr 1fr; align-items: start; }
  .crew__photo:last-child { margin-top: 40px; }
  .refs__groups { grid-template-columns: 1.35fr 1fr; gap: 56px; }
  .fete__photo { aspect-ratio: 16 / 9; margin-inline: 0; clip-path: var(--stepped-lg); }
  .people__wall { max-width: 1000px; }
}

/* Deux colonnes seulement quand il y a vraiment la place */
@media (min-width: 1024px) {
  /* Le mot géant à gauche déborde sur la photo de Laurent, à droite ; la photo commence sous la première ligne */
  .folie__grid { --folie-size: min(11vw, 200px); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); row-gap: 40px; align-items: start; }
  .folie__stage { display: contents; }
  .folie__stage .chapter { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  .folie .chapter__title--giant { font-size: var(--folie-size); white-space: nowrap; }
  /* la photo commence sous le mot : le bas des lettres mord sur son bord supérieur (des projecteurs, pas un visage) */
  .folie__photo { grid-column: 2; grid-row: 1 / span 2; width: 100%; font-size: var(--folie-size); margin-top: calc(46px + 0.62em); }
  .folie__body { padding-top: 0; }
  .folie__body { grid-column: 1; grid-row: 2; align-self: start; }
  .fete { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
  .fete__photo { aspect-ratio: 4 / 3; }
  .fete__name { margin-top: 0; }
}

/* ---------- Ordinateur ---------- */
@media (min-width: 1024px) {
  :root { --header: 72px; }
  .top { padding-inline: max(32px, calc((100vw - 1200px) / 2)); }
  .top__nav { display: flex; gap: 6px; margin-left: auto; margin-right: 18px; }
  .top__link {
    padding: 8px 12px 10px;
    color: var(--chrome-dim);
    font: 500 15px/1 var(--font-body);
    text-decoration: none;
    background: radial-gradient(circle, transparent 1px, transparent 1.4px) 12px 100% / 6px 4px repeat-x;
    transition: color var(--quick) var(--ease);
    outline: none;
  }
  .top__link:hover { color: var(--chrome); background-image: radial-gradient(circle, var(--fuchsia) 1.1px, transparent 1.5px); background-size: 6px 4px; background-position: 12px calc(100% - 2px); background-repeat: repeat-x; }
  .top__link:active { color: var(--fuchsia-hi); }
  .top__link:focus-visible { outline: 2px dotted var(--ring); outline-offset: 2px; }
  .brand__name { font-size: 24px; }

  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(100svh, 980px); }
  .hero__wall { --word-x: 0.56; --word-fill: 0.7; grid-column: 2; grid-row: 1; height: auto; min-height: 560px; }
  .hero__wall::after { inset: 0 auto 0 0; width: 18%; height: auto; background: linear-gradient(to right, var(--night), oklch(0.17 0.07 292 / 0)); }
  .hero__photo { object-position: 46% 40%; }
  .hero__text { grid-column: 1; grid-row: 1; align-self: center; padding: calc(var(--header) + 32px) 24px 56px max(32px, calc((100vw - 1200px) / 2)); }
  .hero__name { font-size: clamp(72px, 7.3vw, 136px); }
  .hero__first { font-size: clamp(15px, 1.25vw, 20px); }
  .hero__lede { font-size: 18px; }
  .hero__actions { max-width: 620px; }
  .hero__cta, .hero__call { flex: 0 1 auto; }
  .hero__cta .led__face, .hero__call .led__face { min-height: 58px; padding-inline: 26px; }

  .clips__grid { grid-template-columns: 1.75fr 1fr; gap: 28px; align-items: start; }
  .quote__grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .quote__intro { position: sticky; top: calc(var(--header) + 32px); }
  .foot__grid { grid-template-columns: 1.4fr 1fr; }
  .word__lead { max-width: 24ch; }
}

/* Sur grand écran, la colonne du texte suit la largeur du contenu : le titre ne déborde jamais sur la photo */
@media (min-width: 1280px) {
  .hero { grid-template-columns: calc(max(32px, (100vw - 1200px) / 2) + 600px) minmax(0, 1fr); }
  .hero__name { font-size: clamp(72px, 7.3vw, 120px); }
}

/* ---------- Réduire les animations ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .led:hover .led__dots i, .led.is-busy .led__dots i { animation: none !important; opacity: 1; }
}

/* ---------- Page figée (?static=1, pour les captures) : tout dans son état final ---------- */
[data-motion="off"] .hero__overline, [data-motion="off"] .hero__title, [data-motion="off"] .hero__lede, [data-motion="off"] .hero__actions, [data-motion="off"] .fete { animation: none; }