/* ==========================================================================
   MGC AGENCY — SECTIONS
   Compositions de page : scène « LE SIGNAL », process, réseau, portfolio…
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCÈNE « LE SIGNAL » — 400vh pilotés au scroll
   -------------------------------------------------------------------------- */
.signal {
  position: relative;
  background: linear-gradient(180deg, #123c2c 0%, var(--surface-dark) 45%, var(--surface-dark-2) 100%);
  /* Indispensable : sans cette ligne, les titres sans couleur explicite
     héritaient du texte foncé prévu pour les fonds clairs. */
  color: var(--fg);
  isolation: isolate;
}
.signal::before {
  /* halo de fond — statique, pas de coût GPU */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 62% 6%, rgba(28, 193, 131, 0.18) 0%, transparent 62%),
    radial-gradient(90% 60% at 82% 76%, rgba(227, 166, 58, 0.1) 0%, transparent 64%);
  pointer-events: none;
  z-index: 0;
}

.signal__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: 1;
  pointer-events: none;
}
.signal__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.signal__panel {
  position: relative;
  z-index: 2;
  /* Volontairement sous la hauteur d'écran : le récit 3D ne doit pas creuser
     de grands vides entre les blocs de contenu. */
  min-height: 86svh;
  display: flex;
  align-items: center;
  padding-inline: var(--pad-x);
  padding-block: calc(var(--header-h) + 1.25rem) 2.5rem;
  pointer-events: none;
}
.signal__panel:first-of-type { min-height: 100svh; }
.signal__panel > * { pointer-events: auto; }
.signal__inner { width: 100%; max-width: var(--maxw); margin-inline: auto; }

/* Voile de lisibilité : garantit le contraste du texte d'accueil
   quelle que soit la position des cadres 3D derrière lui. */
.signal__panel:first-of-type::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(9, 42, 31, 0.94) 0%, rgba(9, 42, 31, 0.82) 34%, rgba(9, 42, 31, 0.3) 56%, transparent 72%);
}
@media (max-width: 62rem) {
  .signal__panel:first-of-type::before {
    background: linear-gradient(180deg, rgba(9, 42, 31, 0.9) 0%, rgba(9, 42, 31, 0.72) 46%, rgba(9, 42, 31, 0.9) 100%);
  }
}

/* Panneau 1 — hero */
.hero__eyebrow { margin-bottom: clamp(1rem, 0.6rem + 1vw, 1.75rem); }
.hero__title {
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: var(--tr-display);
  font-weight: 800;
  max-width: 13ch;
}
@media (min-width: 62rem) {
  /* Le texte occupe la moitié gauche, la composition 3D la moitié droite :
     plus aucun chevauchement. */
  .hero__title, .hero__lead { max-width: min(46vw, 34rem); }
}
.hero__title em { font-style: normal; color: var(--gold); }
.hero__lead {
  margin-top: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  max-width: 34rem;
  font-size: var(--fs-lead);
  color: var(--fg-dim);
  line-height: 1.5;
}
.hero__actions {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero__scroll {
  position: absolute;
  left: var(--pad-x);
  bottom: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-label);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.hero__scroll i {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  animation: scroll-hint 2.4s var(--ease-inout) infinite;
}
@keyframes scroll-hint {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@media (max-width: 48rem) { .hero__scroll { display: none; } }

/* Panneaux 2 → 4 — légendes narratives */
.signal__caption {
  max-width: 26rem;
  background: linear-gradient(180deg, rgba(5, 16, 12, 0.72), rgba(5, 16, 12, 0.42));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.35rem, 1rem + 1.1vw, 2rem);
}
.signal__caption h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.35rem);
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin-block: 0.85rem 0.7rem;
}
.signal__caption p { color: var(--fg-dim); font-size: 0.97rem; line-height: 1.55; }
.signal__panel--right { justify-content: flex-end; }
.signal__panel--right .signal__inner { display: flex; justify-content: flex-end; }
.signal__panel--bottom { align-items: flex-end; }

.signal__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 1.1rem;
  font-family: var(--font-label);
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.signal__flow b { font-weight: 400; color: var(--gold); }
.signal__flow s { text-decoration: none; opacity: 0.5; }

/* Repli sans WebGL — composition CSS de cadres verticaux */
.signal__fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1.4vw, 1.25rem);
  padding: 6rem var(--pad-x);
  overflow: hidden;
}
.no-webgl .signal__fallback { display: flex; }
.no-webgl .signal__canvas { display: none; }
.signal__fallback .vframe {
  width: clamp(4.5rem, 11vw, 10rem);
  flex: none;
  background: linear-gradient(160deg, rgba(19, 160, 107, 0.5), rgba(11, 58, 44, 0.9));
  border-color: rgba(237, 239, 236, 0.14);
}
.signal__fallback .vframe:nth-child(2n) { background: linear-gradient(160deg, rgba(227, 166, 58, 0.42), rgba(11, 58, 44, 0.9)); }
.signal__fallback .vframe:nth-child(1) { transform: translateY(-8%) rotate(-4deg); }
.signal__fallback .vframe:nth-child(2) { transform: translateY(6%) rotate(2deg); }
.signal__fallback .vframe:nth-child(3) { transform: scale(1.22); z-index: 2; }
.signal__fallback .vframe:nth-child(4) { transform: translateY(6%) rotate(-2deg); }
.signal__fallback .vframe:nth-child(5) { transform: translateY(-8%) rotate(4deg); }
@media (max-width: 40rem) {
  .signal__fallback .vframe:nth-child(1), .signal__fallback .vframe:nth-child(5) { display: none; }
}

/* --------------------------------------------------------------------------
   2. EN-TÊTE DE PAGE INTÉRIEURE
   -------------------------------------------------------------------------- */
/* En-tête de page : le seul moment sombre des pages intérieures.
   Il prolonge l'en-tête fixe, puis se fond dans le fond clair du contenu. */
.page-head {
  --fg: #edefec;
  --fg-dim: rgba(237, 239, 236, 0.66);
  --fg-faint: rgba(237, 239, 236, 0.56);
  --line: rgba(237, 239, 236, 0.14);
  --line-strong: rgba(237, 239, 236, 0.26);
  --accent: var(--gold);
  --accent-2: var(--emerald-bright);
  position: relative;
  padding-block: calc(var(--header-h) + clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem)) clamp(2.75rem, 1.8rem + 3.6vw, 5rem);
  /* Vert profond plutôt que presque-noir : l'environnement de titre respire. */
  background: linear-gradient(168deg, #14402f 0%, var(--surface-dark) 55%, var(--surface-dark-2) 100%);
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 90% at 86% -12%, rgba(28, 193, 131, 0.26) 0%, transparent 62%),
    radial-gradient(60% 80% at 2% 112%, rgba(227, 166, 58, 0.14) 0%, transparent 64%);
  z-index: -1;
}
/* Raccord doux vers la section claire qui suit. */
.page-head::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: clamp(3rem, 6vw, 6rem);
  background: linear-gradient(to bottom, transparent, var(--paper));
  z-index: -1;
}
.page-head__title {
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-top: clamp(0.9rem, 0.5rem + 1vw, 1.5rem);
}
.page-head__lead { margin-top: clamp(1.1rem, 0.7rem + 1.2vw, 1.75rem); max-width: 42rem; }
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 1.4rem;
}
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   3. EN-TÊTE DE SECTION
   -------------------------------------------------------------------------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--s-5) var(--s-7);
  align-items: end;
  margin-bottom: clamp(2.25rem, 1.4rem + 2.6vw, 4.5rem);
}
.sec-head__title { font-size: var(--fs-h2); letter-spacing: -0.03em; line-height: 1.03; margin-top: 1rem; max-width: 20ch; }
.sec-head__aside { color: var(--fg-dim); font-size: 1rem; line-height: 1.6; padding-bottom: 0.35rem; }
@media (max-width: 62rem) {
  .sec-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

/* --------------------------------------------------------------------------
   4. PROCESS — 06 étapes
   -------------------------------------------------------------------------- */
.process { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-7); align-items: start; }
@media (max-width: 62rem) {
  .process { grid-template-columns: minmax(0, 1fr); }
  /* Sur mobile, le visuel collant se superposait aux étapes et rendait le
     texte illisible. La liste numérotée se suffit à elle-même. */
  .process__sticky { display: none; }
}

.process__sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
.process__viz {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.process__viz-num {
  font-size: clamp(5rem, 3rem + 12vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
  font-variant-numeric: tabular-nums;
}
.process__viz-label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.process__viz-bar { position: absolute; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--emerald), var(--gold)); width: 0%; }

.process__steps { border-top: 1px solid var(--line); }
.process__step {
  border-bottom: 1px solid var(--line);
  padding: clamp(1.25rem, 0.9rem + 1.1vw, 2rem) 0;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--s-4);
  opacity: 0.45;
  transition: opacity 0.5s var(--ease-out);
}
.process__step.is-active { opacity: 1; }
.process__step h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.process__step p { color: var(--fg-dim); font-size: 0.95rem; margin-top: 0.45rem; }
.process__step-num { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.2em; color: var(--gold); padding-top: 0.5rem; }

/* --------------------------------------------------------------------------
   5. PLATEFORMES
   -------------------------------------------------------------------------- */
.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
@media (max-width: 52rem) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.platform {
  position: relative;
  background: var(--bg);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  min-height: clamp(14rem, 10rem + 12vw, 20rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  overflow: hidden;
  transition: background-color 0.5s var(--ease-out);
}
.platform::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--plat-accent, var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
.platform:hover::after { transform: scaleX(1); }
.platform__icon { width: 1.85rem; height: 1.85rem; color: var(--plat-accent, var(--fg)); }
.platform__name { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.02em; }
.platform__meta { color: var(--fg-dim); font-size: 0.9rem; margin-top: 0.4rem; }
.platform__fmt {
  font-family: var(--font-label);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* --------------------------------------------------------------------------
   6. RÉSEAU CRÉATEURS
   -------------------------------------------------------------------------- */
.network { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(0.75rem, 0.4rem + 1vw, 1.35rem); }
.creator {
  position: relative;
  border-radius: var(--r-frame);
  overflow: hidden;
  /* 4:5 — le format natif des portraits fournis : aucun recadrage,
     aucun visage déformé. */
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
  isolation: isolate;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.4s linear;
}
.creator:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.creator__bg { position: absolute; inset: 0; z-index: -1; }
.creator__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.7s var(--ease-out), filter 0.5s linear;
  /* Les portraits sont légèrement éclaircis : ils doivent respirer sur le
     fond clair sans perdre le contraste du texte posé dessus. */
  filter: saturate(1.02) contrast(1.02) brightness(1.03);
}
.creator:hover .creator__img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .creator:hover .creator__img { transform: none; }
}
.creator__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem;
  background: linear-gradient(to top, rgba(5, 16, 12, 0.92), rgba(5, 16, 12, 0) 100%);
}
.creator__name { font-weight: 800; font-size: 1rem; letter-spacing: -0.015em; color: #edefec; }
.creator__meta { font-size: 0.8rem; color: rgba(237, 239, 236, 0.84); margin-top: 0.2rem; }
.creator__tags { position: absolute; top: 0.7rem; left: 0.7rem; right: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.creator__tag {
  font-family: var(--font-label);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-pill);
  background: rgba(5, 16, 12, 0.62);
  border: 1px solid rgba(237, 239, 236, 0.14);
  color: rgba(237, 239, 236, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Filtres */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--s-6); }
.filter {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  color: var(--fg-dim);
  transition: color var(--d-fast) linear, border-color var(--d-fast) linear, background-color var(--d-fast) linear;
  min-height: 2.5rem;
}
.filter:hover { color: var(--fg); border-color: var(--line-strong); }
.filter[aria-pressed='true'] { background: var(--gold); border-color: var(--gold); color: #14120a; font-weight: 600; }
.creator[hidden], .work[hidden] { display: none; }

/* --------------------------------------------------------------------------
   7. RÉALISATIONS — séquence animée
   --------------------------------------------------------------------------
   Une seule séquence est visible et lue à la fois. Les autres vidéos ne sont
   même pas téléchargées : la section reste légère sur mobile.
   -------------------------------------------------------------------------- */
.reel { position: relative; }
.reel__stage {
  position: relative;
  height: min(68vh, 620px);
  min-height: 22rem;
}
.reel__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 0.6rem + 0.8vw, 1.4rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.reel__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
html:not(.js) .reel__slide { position: relative; opacity: 1; visibility: visible; pointer-events: auto; margin-bottom: 2rem; }

.reel__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid rgba(237, 239, 236, 0.14);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.85);
  isolation: isolate;
}
.reel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.reel__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 0%, transparent 45%, rgba(5, 16, 12, 0.5) 100%),
    linear-gradient(to top, rgba(5, 16, 12, 0.55), transparent 38%);
}

.reel__caption { flex: none; text-align: center; max-width: 26rem; }
.reel__title { font-size: var(--fs-h3); letter-spacing: -0.02em; margin-top: 0.4rem; }
.reel__meta { color: var(--fg-dim); font-size: 0.92rem; margin-top: 0.25rem; }

.reel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.reel__btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--fg);
  flex: none;
  transition: background-color var(--d-fast) linear, color var(--d-fast) linear, border-color var(--d-fast) linear;
}
.reel__btn:hover { background: var(--fg); color: var(--bg); border-color: transparent; }
.reel__dots { display: flex; align-items: center; gap: 0.45rem; }
.reel__dot {
  width: 2rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
}
.reel__dot span {
  display: block;
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: background-color 0.35s linear, width 0.35s var(--ease-out);
}
.reel__dot.is-active span { background: var(--gold); width: 2.25rem; }
.reel__dot:hover span { background: var(--fg-dim); }

@media (max-width: 40rem) {
  .reel__stage { height: min(62vh, 480px); }
  .reel__dot { width: 1.35rem; }
  .reel__dot span { width: 0.9rem; }
  .reel__dot.is-active span { width: 1.4rem; }
}

/* --------------------------------------------------------------------------
   8. BANDEAU CTA FINAL
   -------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  background: var(--forest);
  color: #eef3f0;
  padding-block: clamp(5rem, 3rem + 8vw, 11rem);
  overflow: hidden;
  isolation: isolate;
}
.cta-final::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 140%;
  background: radial-gradient(48% 46% at 50% 50%, rgba(227, 166, 58, 0.22) 0%, transparent 64%);
  z-index: -1;
}
.cta-final__title {
  font-size: clamp(1.7rem, 1.15rem + 2.4vw, 3.2rem);
  letter-spacing: -0.032em;
  line-height: 1.04;
  max-width: 19ch;
}
.cta-final__actions { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-final__meta {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(238, 243, 240, 0.16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--s-5);
}
.cta-final__meta dt { font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.cta-final__meta dd { margin: 0.4rem 0 0; font-size: 0.98rem; }
.cta-final__meta a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   9. BLOCS ÉDITORIAUX DIVERS
   -------------------------------------------------------------------------- */
.pull {
  font-size: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  max-width: 24ch;
}
.pull em { font-style: normal; color: var(--accent); }

.figure-frame {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.figure-frame img, .figure-frame svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure-frame figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.9rem 1.1rem;
  font-size: 0.8rem;
  color: rgba(237, 239, 236, 0.75);
  background: linear-gradient(to top, rgba(5, 16, 12, 0.9), transparent);
}

.kpi-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--s-6) var(--s-5);
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3.5rem);
  border-block: 1px solid var(--line);
}

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: clamp(1.1rem, 0.85rem + 0.8vw, 1.6rem) 0;
  text-align: left;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; width: 1rem; height: 1rem; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.faq__icon::before { inset: 50% 0 auto 0; height: 1px; transform: translateY(-50%); }
.faq__icon::after { inset: 0 50% 0 auto; width: 1px; transform: translateX(50%); }
.faq__q[aria-expanded='true'] .faq__icon::after { transform: translateX(50%) scaleY(0); }
.faq__a { overflow: hidden; height: 0; }
.faq__a > div { padding-bottom: clamp(1.1rem, 0.85rem + 0.8vw, 1.6rem); color: var(--fg-dim); max-width: 52rem; }

.timeline { border-left: 1px solid var(--line); padding-left: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem); display: flex; flex-direction: column; gap: var(--s-7); }
.timeline__item { position: relative; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem) - 3.5px);
  top: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.timeline__year { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; }
.timeline__item h3 { font-size: var(--fs-h4); margin-top: 0.35rem; }
.timeline__item p { color: var(--fg-dim); margin-top: 0.4rem; }

/* Bloc contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-8) var(--s-7); align-items: start; }
@media (max-width: 62rem) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-block + .contact-block { margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.contact-block h3 { font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.contact-block p, .contact-block a { margin-top: 0.6rem; display: block; font-size: 1rem; }
.contact-block a:hover { color: var(--gold); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 44rem) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Onglets (Marques / Créateurs) */
.tabs { display: inline-flex; padding: 0.3rem; border: 1px solid var(--line); border-radius: var(--r-pill); gap: 0.2rem; }
.tab {
  padding: 0.55rem 1.15rem;
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fg-dim);
  transition: background-color var(--d-fast) linear, color var(--d-fast) linear;
  min-height: 2.5rem;
}
.tab[aria-selected='true'] { background: var(--emerald); color: #fff; }

/* Page 404 */
.err {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--pad-x) 4rem;
  background: var(--ink);
}
.err__code {
  font-size: clamp(5rem, 2rem + 18vw, 14rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

/* Page légale */
.legal { max-width: 46rem; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
.legal h3 { font-size: var(--fs-h4); margin-top: var(--s-5); }
.legal p, .legal li { color: var(--fg-dim); margin-top: 0.85rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.2em; }

/* Bandeau cookies */
.cookie {
  position: fixed;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 190;
  max-width: 32rem;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: 1.25rem;
  display: none;
  gap: 1rem;
  flex-direction: column;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
}
.cookie.is-visible { display: flex; }
.cookie p { font-size: 0.86rem; color: var(--fg-dim); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }