/* =====================================================================
   WAVE MÉDIA · Feuille de style
   ---------------------------------------------------------------------
   TOKENS EXISTANTS (repris à l'identique de la version précédente)
   Couleurs : une seule teinte (--hue: 222, bleu nuit) déclinée en
     --bg        fond quasi-noir           → autorité, premium
     --text      blanc bleuté              → clarté du texte
     --text-2/3  gris clairs               → texte secondaire
     --ink       quasi-noir                → texte posé sur l'accent
     --accent    bleu (ex --glow)          → ACTION et RÉUSSITE uniquement
     --accent-soft bleu clair              → liens, coches, détails d'action
     --line/-2   filets translucides
     --h-warm / --h-cool : nuances ±25° pour varier les fonds de section
   Rôle de l'accent (≤ 10 % de surface) : CTA primaires, chiffre clé de
   section, offre mise en avant, soulignement du mot clé du H1.
   Jamais de décoration à l'accent.
   Polices : Inter (400 / 700) + Playfair Display italique (500),
   auto-hébergées dans assets/fonts.
   Rayons : 14 / 24 / 34 px. Ombres : --shadow-1 / --shadow-2.
   Espacements : échelle 8 pt (--s1 à --s8).
   ===================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Teinte unique du site (0 à 360). Changer cette valeur re-teinte tout le site. */
  --hue: 222;
  --h-warm: calc(var(--hue) + 26);
  --h-cool: calc(var(--hue) - 24);

  --bg: hsl(var(--hue) 16% 4%);
  --surface: hsl(var(--hue) 18% 7%);
  --text: hsl(var(--hue) 30% 97%);
  --text-2: hsl(var(--hue) 10% 74%);
  --text-3: hsl(var(--hue) 8% 63%);
  --ink: hsl(var(--hue) 22% 6%);
  --line: hsl(var(--hue) 30% 92% / 0.09);
  --line-2: hsl(var(--hue) 30% 92% / 0.17);
  --glass: hsl(var(--hue) 22% 12% / 0.6);
  --accent: hsl(var(--hue) 95% 68%);
  --accent-soft: hsl(var(--hue) 95% 82%);
  --accent-glow: hsl(var(--hue) 95% 62% / 0.24);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;
  --fw-regular: 400;
  --fw-bold: 700;

  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 34px;
  --shadow-1:
    inset 0 1px 0 hsl(0 0% 100% / 0.06),
    0 1px 2px hsl(0 0% 0% / 0.5),
    0 16px 36px -16px hsl(0 0% 0% / 0.75);
  --shadow-2:
    inset 0 1px 0 hsl(0 0% 100% / 0.1),
    0 2px 4px hsl(0 0% 0% / 0.5),
    0 34px 70px -24px hsl(0 0% 0% / 0.9),
    0 24px 90px -30px var(--accent-glow);

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 200ms;
  --gutter: 16px;
  --container: 1200px;

  /* KineticGrid : lit ces deux tokens */
  --kg-accent: var(--accent);
  --kg-bg: transparent;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s7); overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.045;
  background-image: 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a, button, label, input[type="range"] { cursor: pointer; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong, b { font-weight: var(--fw-bold); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
::selection { background: hsl(var(--hue) 90% 60% / 0.35); }

p a, .tile__text a {
  text-decoration: underline;
  text-decoration-color: hsl(var(--hue) 95% 82% / 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--fast), color var(--fast);
}
p a:hover, .tile__text a:hover { color: var(--text); text-decoration-color: var(--accent-soft); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: fixed; top: var(--s2); left: var(--s2); z-index: 200;
  padding: 12px var(--s2); border-radius: 999px;
  background: var(--text); color: var(--ink); font-weight: var(--fw-bold);
  transform: translateY(-200%); transition: transform var(--fast) var(--ease);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.25em; height: 1.25em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

/* ========== Typographie ========== */
.h1, .h2 { font-weight: var(--fw-bold); text-wrap: balance; }
.h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.h2 {
  font-size: clamp(1.875rem, 1.25rem + 2.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.h2 em, .expertise__title em, .offer__title em, .catalogue__title em, .footer__word em, .ms-h1 em, .ms-h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
  background: linear-gradient(100deg, var(--text) 30%, var(--text-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-inline: 0.02em 0.06em;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.8125rem; font-weight: var(--fw-bold);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-2);
  box-shadow: 0 0 0 4px hsl(var(--hue) 30% 92% / 0.08);
}
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.microcopy { font-size: 0.875rem; color: var(--text-3); letter-spacing: 0.02em; }
.caption { margin-top: var(--s2); font-size: 0.875rem; color: var(--text-3); }

.section-head { display: grid; gap: var(--s2); margin-bottom: var(--s6); }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); align-items: end; }
  .section-head .h2 { grid-column: 1 / span 7; }
  .section-head .lead { grid-column: 8 / span 5; }
}
.section-cta { margin-top: var(--s5); }

/* ========== Boutons ========== */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 56px;
  padding: 6px 6px 6px var(--s3);
  border-radius: 999px;
  max-width: 100%;
  font-size: 1rem; font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.25;
  text-align: left;
  transition: transform var(--fast) var(--ease), box-shadow 300ms var(--ease), background-color var(--fast), border-color var(--fast), translate 250ms var(--ease);
}
.btn__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  transition: transform 300ms var(--ease);
}
.btn__icon .icon { width: 18px; height: 18px; }
.btn:hover .btn__icon { transform: rotate(-45deg); }
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 12px 32px -12px var(--accent-glow), inset 0 -2px 0 hsl(0 0% 0% / 0.12);
}
.btn--primary .btn__icon { background: var(--ink); color: var(--text); }
.btn--primary::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, hsl(0 0% 100% / 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 18px 44px -12px var(--accent-glow), 0 0 0 6px hsl(var(--hue) 95% 68% / 0.14); }

.btn--ghost {
  color: var(--text);
  border: 1px solid var(--line-2);
  background: hsl(0 0% 100% / 0.03);
}
.btn--ghost .btn__icon { background: hsl(0 0% 100% / 0.09); }
.btn--ghost:hover { border-color: hsl(0 0% 100% / 0.35); background: hsl(0 0% 100% / 0.07); transform: translateY(-2px); }

.btn--sm { min-height: 44px; padding: 4px 4px 4px var(--s2); font-size: 0.9375rem; gap: 12px; }
.btn--sm .btn__icon { width: 36px; height: 36px; }

.link-quiet {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 44px;
  font-weight: var(--fw-bold); font-size: 0.9375rem; color: var(--text-2);
  transition: color var(--fast);
}
.link-quiet .icon { width: 16px; height: 16px; transition: transform var(--fast) var(--ease); }
.link-quiet:hover { color: var(--text); }
.link-quiet:hover .icon { transform: translateY(2px); }

/* ========== Cartes ========== */
.card {
  position: relative;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, hsl(var(--hue) 30% 100% / 0.06), hsl(var(--hue) 30% 100% / 0.015)),
    hsl(var(--hue) 18% 7% / 0.7);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms;
}
.card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), hsl(var(--hue) 95% 75% / 0.12), transparent 60%);
  transition: opacity 300ms;
}
.card:hover::before { opacity: 1; }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
}

.tag {
  display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: var(--fw-bold);
  background: hsl(0 0% 100% / 0.07); border: 1px solid var(--line-2);
}
.tag--accent { color: var(--accent-soft); background: hsl(var(--hue) 90% 60% / 0.16); border-color: hsl(var(--hue) 90% 70% / 0.3); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s1); }

.badge-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  color: var(--text);
  background: linear-gradient(145deg, hsl(var(--hue) 40% 24% / 0.6), hsl(var(--hue) 40% 12% / 0.5));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.1);
}
.badge-icon .icon { width: 22px; height: 22px; }

/* ========== En-tête ========== */
.nav {
  position: fixed;
  top: max(var(--s2), env(safe-area-inset-top));
  left: 0; right: 0; z-index: 60;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  max-width: var(--container);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 6px 6px 6px var(--s3);
  border-radius: 999px;
  background: hsl(var(--hue) 20% 8% / 0.5);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow-1);
  transition: max-width 500ms var(--ease), background-color 300ms, box-shadow 300ms;
}
.nav.is-scrolled .nav__pill { max-width: 1040px; background: hsl(var(--hue) 20% 7% / 0.85); box-shadow: var(--shadow-2); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.brand__logo { width: auto; height: 22px; }
.brand__name { font-weight: var(--fw-bold); font-size: 1.0625rem; letter-spacing: -0.03em; }
.nav__links { display: none; }
.nav__actions { display: flex; align-items: center; gap: var(--s1); }
.nav__cta { display: none; }
.nav__toggle {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: hsl(0 0% 100% / 0.08); border: 1px solid var(--line-2);
  transition: background-color var(--fast);
}
.nav__toggle:hover { background: hsl(0 0% 100% / 0.16); }
.nav__toggle .icon { transition: transform 400ms var(--ease); }
.nav__toggle[aria-expanded="true"] .icon { transform: rotate(135deg); }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav__toggle { display: none; }
  .nav__links { display: flex; gap: 4px; }
  .nav__links a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 var(--s2); border-radius: 999px;
    font-size: 0.9375rem; color: var(--text-2);
    transition: color var(--fast), background-color var(--fast);
  }
  .nav__links a:hover { color: var(--text); background: hsl(0 0% 100% / 0.06); }
}

.menu {
  position: fixed; inset: 0; z-index: 55;
  display: grid; align-items: center;
  padding: var(--s8) var(--gutter) var(--s5);
  background:
    radial-gradient(80% 60% at 85% 10%, hsl(var(--hue) 60% 16% / 0.9), transparent 65%),
    hsl(var(--hue) 16% 4% / 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 0s 400ms;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 400ms var(--ease); }
.menu__inner { width: 100%; max-width: var(--container); margin-inline: auto; display: grid; gap: var(--s5); justify-items: start; }
.menu__list { display: grid; gap: 4px; }
.menu__link {
  display: inline-flex; align-items: baseline; gap: var(--s2);
  font-size: clamp(2rem, 8vw, 4rem); font-weight: var(--fw-bold);
  letter-spacing: -0.04em; line-height: 1.15;
  opacity: 0; transform: translateY(24px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease), color var(--fast);
}
.menu__list li:nth-child(2) .menu__link { transition-delay: 60ms; }
.menu__list li:nth-child(3) .menu__link { transition-delay: 120ms; }
.menu__list li:nth-child(4) .menu__link { transition-delay: 180ms; }
.menu__list li:nth-child(5) .menu__link { transition-delay: 240ms; }
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu__link small { font-size: 0.875rem; font-weight: var(--fw-regular); letter-spacing: 0; color: var(--text-3); }
.menu__link:hover { color: var(--accent-soft); }

/* ========== KineticGrid (fond animé) ========== */
.kg { position: relative; isolation: isolate; overflow: hidden; }
.kg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.kg-veil { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.section.kg .kg-veil { background: linear-gradient(180deg, hsl(var(--hue) 16% 4.5% / 0.92), transparent 12%, transparent 88%, hsl(var(--hue) 16% 4.5% / 0.92)); }

/* ========== Hero ========== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid; align-items: center;
  padding-block: var(--s8) var(--s7);
  background:
    radial-gradient(70% 55% at 85% 12%, hsl(var(--hue) 75% 24% / 0.5), transparent 70%),
    radial-gradient(55% 45% at 5% 95%, hsl(var(--h-warm) 60% 18% / 0.4), transparent 70%),
    linear-gradient(180deg, hsl(var(--hue) 18% 5.5%), hsl(var(--hue) 16% 4%));
}
.hero .kg-veil {
  background:
    radial-gradient(60% 70% at 28% 50%, hsl(var(--hue) 16% 4% / 0.82), hsl(var(--hue) 16% 4% / 0.35) 60%, transparent 85%),
    linear-gradient(180deg, transparent 70%, var(--bg));
}
.hero__inner { display: grid; gap: var(--s6); }
.hero__copy { display: grid; justify-items: start; }
.hero__copy .eyebrow { margin-bottom: var(--s3); }
.hero__title { max-width: 13ch; margin-bottom: var(--s3); }
.hero__key { position: relative; display: inline-block; font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: -0.015em; padding-right: 0.04em; }
.hero__key::after {
  content: "";
  position: absolute; left: 0.02em; right: 0.02em; bottom: 0.02em;
  height: 0.09em; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
  transform-origin: left;
}
.hero__copy .lead { margin-bottom: var(--s4); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.hero__copy .microcopy { margin-top: 12px; }
.proofbar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.proofbar li { display: grid; gap: 2px; }
.proofbar strong { font-size: 1.75rem; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.proofbar span { font-size: 0.875rem; color: var(--text-3); }

.hero__visual { position: relative; height: 480px; perspective: 1400px; }
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); align-items: center; }
  .hero__copy { grid-column: 1 / span 7; }
  .hero__visual { grid-column: 8 / span 5; height: 600px; }
}

/* Apparition du hero au chargement (indépendante du scroll, pour un LCP rapide) */
.js .hero__title .w { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: rise 600ms var(--ease) forwards; }
.js .hero__title .w:nth-child(2) { animation-delay: 60ms; }
.js .hero__title .w:nth-child(3) { animation-delay: 120ms; }
.js .hero__title .w:nth-child(4) { animation-delay: 180ms; }
.js .hero__title .w:nth-child(5) { animation-delay: 240ms; }
.js .hero__title .w:nth-child(6) { animation-delay: 300ms; }
.js .hero__title .w:nth-child(7) { animation-delay: 360ms; }
.js .hero__title .w:nth-child(8) { animation-delay: 420ms; }
.js .hero__key::after { transform: scaleX(0); animation: draw 700ms var(--ease) 1020ms forwards; }
.js .hero__in { opacity: 0; transform: translateY(20px); animation: rise 700ms var(--ease) 80ms forwards; }
.js .hero__in--2 { animation-delay: 300ms; }
.js .hero__in--3 { animation-delay: 460ms; }
.js .hero__in--4 { animation-delay: 620ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes draw { to { transform: scaleX(1); } }

/* Téléphone (maquette) */
.phone {
  --w: 230px;
  position: absolute;
  width: var(--w);
  aspect-ratio: 9 / 19.5;
  padding: calc(var(--w) * 0.035);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(155deg, hsl(var(--hue) 10% 26%), hsl(var(--hue) 14% 7%) 55%);
  box-shadow:
    inset 0 0 0 1px hsl(0 0% 100% / 0.1),
    inset 0 1px 0 hsl(0 0% 100% / 0.2),
    0 40px 80px -24px hsl(0 0% 0% / 0.9),
    0 30px 100px -30px var(--accent-glow);
}
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.135); background: var(--surface); }
.phone--hero { left: 50%; top: 50%; transform: translate(-50%, -50%) rotateY(-14deg) rotateX(6deg) rotateZ(2deg); }
@media (min-width: 1024px) { .phone--hero { --w: 270px; } }

.ig { display: flex; flex-direction: column; gap: 10px; padding: 14% 7% 6%; font-size: 9px; line-height: 1.3; color: var(--text); }
.ig__bar { font-weight: var(--fw-bold); font-size: 11px; }
.ig__head { display: flex; align-items: center; gap: 10px; }
.ig__avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--text-2);
}
.ig__avatar img { width: 60%; }
.ig__stats { display: flex; flex: 1; justify-content: space-around; }
.ig__stats span { display: grid; justify-items: center; gap: 4px; color: var(--text-3); font-size: 8px; }
.ig__stats i { display: block; width: 18px; height: 7px; border-radius: 4px; background: hsl(0 0% 100% / 0.55); }
.ig__bio { display: grid; gap: 2px; }
.ig__bio strong { font-size: 10px; }
.ig__bio span { color: var(--text-2); }
.ig__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ig__btns span { text-align: center; padding: 5px; border-radius: 6px; background: hsl(0 0% 100% / 0.1); font-weight: var(--fw-bold); }
.ig__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-inline: -7%; }
.ig__tile, .ig__reel { aspect-ratio: 4 / 5; }
.ig__reel {
  grid-column: span 2; grid-row: span 2; aspect-ratio: auto;
  position: relative; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(circle at 28% 22%, hsl(var(--h-warm) 85% 62% / 0.9), transparent 42%),
    radial-gradient(circle at 78% 70%, hsl(var(--hue) 95% 58% / 0.95), transparent 48%),
    linear-gradient(160deg, hsl(var(--hue) 55% 20%), hsl(var(--h-cool) 60% 9%));
}
.ig__reel::before { content: ""; position: absolute; inset: -20%; background: inherit; animation: reel-shift 8s ease-in-out infinite alternate; }
@keyframes reel-shift { to { transform: scale(1.15) rotate(6deg); filter: hue-rotate(-16deg); } }
.ig__play { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: hsl(0 0% 100% / 0.22); border: 1px solid hsl(0 0% 100% / 0.4); color: #fff; }
.ig__play .icon { width: 13px; height: 13px; margin-left: 2px; }
.ig__progress { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 3px; background: hsl(0 0% 100% / 0.3); overflow: hidden; }
.ig__progress span { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); animation: progress 6s linear infinite; }
@keyframes progress { to { transform: scaleX(1); } }
.ig__tile.t1 { background: linear-gradient(135deg, hsl(var(--hue) 70% 50%), hsl(var(--hue) 60% 20%)); }
.ig__tile.t2 { background: linear-gradient(135deg, hsl(var(--h-warm) 60% 55%), hsl(var(--h-warm) 50% 20%)); }
.ig__tile.t3 { background: linear-gradient(135deg, hsl(var(--h-cool) 60% 48%), hsl(var(--h-cool) 55% 18%)); }
.ig__tile.t4 { background: linear-gradient(135deg, var(--text), hsl(var(--hue) 50% 70%)); }
.ig__tile.t5 { background: linear-gradient(135deg, hsl(var(--hue) 45% 30%), hsl(var(--hue) 40% 12%)); }

.chip-float {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  padding: var(--s1) var(--s2) var(--s1) var(--s1);
  border-radius: 18px;
  font-size: 0.875rem; color: var(--text-2);
  background: var(--glass);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-2);
  transition: transform 600ms var(--ease);
}
.chip-float strong { display: block; color: var(--text); font-size: 1.0625rem; line-height: 1.1; }
.chip-float__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--ink); background: linear-gradient(135deg, var(--text), var(--text-2)); }
.chip-float__icon .icon { width: 18px; height: 18px; }
.chip-float--a { top: 10%; right: 0; transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 12px), 0); }
.chip-float--b { bottom: 10%; left: 0; transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0); }

/* ========== Bandeau secteurs ========== */
.band { padding-block: var(--s5); border-block: 1px solid var(--line); background: linear-gradient(90deg, hsl(var(--hue) 22% 6%), hsl(var(--h-warm) 26% 9%), hsl(var(--hue) 22% 6%)); }
.band__title { margin-bottom: var(--s3); font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.band__track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.band__track:focus-visible { outline-offset: -2px; }
.marquee { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.band__track:hover .marquee, .band__track:focus .marquee, .band__track:focus-within .marquee { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; }
.marquee__group li {
  display: flex; align-items: center; gap: var(--s4); padding-right: var(--s4);
  font-size: clamp(1.25rem, 2.6vw, 1.875rem); font-weight: var(--fw-bold); letter-spacing: -0.03em; white-space: nowrap;
}
.marquee__group li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.marquee__group em { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--text-2); letter-spacing: -0.01em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ========== Sections : même base sombre, nuance différente ========== */
.section { position: relative; padding-block: 72px; isolation: isolate; }
@media (min-width: 1024px) { .section { padding-block: var(--s8); } }
.section::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: min(80%, 900px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, hsl(var(--hue) 80% 80% / 0.22), transparent);
}
.bg-warm { background: radial-gradient(60% 55% at 12% 0%, hsl(var(--h-warm) 50% 15% / 0.6), transparent 70%), linear-gradient(180deg, hsl(var(--h-warm) 16% 6.5%), hsl(var(--hue) 16% 4.5%)); }
.bg-cool { background: radial-gradient(65% 60% at 100% 25%, hsl(var(--h-cool) 60% 14% / 0.6), transparent 70%), hsl(var(--h-cool) 18% 4.5%); }
.bg-lift { background: radial-gradient(80% 50% at 50% 0%, hsl(var(--hue) 30% 12% / 0.9), transparent 70%), linear-gradient(180deg, hsl(var(--hue) 14% 7%), hsl(var(--hue) 16% 4%) 75%); }
.bg-warm-2 { background: radial-gradient(55% 60% at 90% 90%, hsl(var(--h-warm) 55% 14% / 0.55), transparent 70%), linear-gradient(160deg, hsl(var(--h-warm) 20% 7%), hsl(var(--hue) 16% 4%) 65%); }
.bg-cool-2 { background: radial-gradient(60% 45% at 0% 100%, hsl(var(--h-cool) 55% 13% / 0.6), transparent 70%), hsl(var(--hue) 14% 5%); }
.bg-spot { background: radial-gradient(55% 45% at 30% 30%, hsl(var(--hue) 75% 22% / 0.55), transparent 75%), hsl(var(--hue) 20% 4%); }

/* ========== Engagements ========== */
.timeline { position: relative; margin-bottom: var(--s6); --p: 0; }
.timeline__steps { display: grid; gap: var(--s4); padding-left: var(--s5); }
.timeline__step { position: relative; display: grid; gap: 4px; }
.timeline__step strong { font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1.2; transition: color 400ms; }
.timeline__step span:last-child { color: var(--text-3); font-size: 0.9375rem; }
.timeline__dot {
  position: absolute; left: calc(-1 * var(--s5) + 4px); top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line-2);
  transition: background-color 400ms, border-color 400ms, box-shadow 400ms, transform 400ms var(--ease);
}
.timeline__step.is-on .timeline__dot { background: var(--text); border-color: var(--text); box-shadow: 0 0 0 6px hsl(var(--hue) 30% 92% / 0.08); transform: scale(1.1); }
.timeline__step:last-child.is-on .timeline__dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); }
.timeline__track { position: absolute; left: 11px; top: 12px; bottom: 28px; width: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.timeline__fill { position: absolute; inset: 0; background: linear-gradient(180deg, var(--text-2), var(--text)); transform-origin: top; transform: scaleY(var(--p)); }
@media (min-width: 768px) {
  .timeline__steps { grid-template-columns: repeat(4, 1fr); gap: var(--s3); padding-left: 0; padding-top: var(--s5); }
  .timeline__dot { left: 0; top: calc(-1 * var(--s5) + 4px); }
  .timeline__track { left: 8px; right: calc(25% - 8px); top: 11px; bottom: auto; width: auto; height: 2px; }
  .timeline__fill { background: linear-gradient(90deg, var(--text-2), var(--text)); transform-origin: left; transform: scaleX(var(--p)); }
}

/* Notes « gain / perte » empilées au scroll */
.notes { display: grid; gap: var(--s3); }
.note {
  display: grid; gap: var(--s4);
  padding: var(--s4);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, hsl(var(--hue) 30% 13% / 0.97), hsl(var(--hue) 22% 7% / 0.98));
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
  transform-origin: 50% 0;
}
.note::before { display: none; }
@media (hover: hover) { .note:hover { transform: none; } }
.notes .note:nth-child(2) { --i: 1; }
.notes .note:nth-child(3) { --i: 2; }
.notes .note:nth-child(4) { --i: 3; }
@media (min-width: 768px) and (min-height: 720px) {
  .notes { gap: var(--s6); }
  .note { position: sticky; top: calc(var(--s7) + var(--i, 0) * 20px); }
}
@media (min-width: 1024px) {
  .note { grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); align-items: center; padding: var(--s5); }
  .note__copy { grid-column: 1 / span 7; }
  .note__art { grid-column: 9 / span 4; }
}
.note__index { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s2); font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.note__index span { display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text); letter-spacing: 0.04em; }
.note__stat { font-size: clamp(3rem, 2rem + 4vw, 5rem); font-weight: var(--fw-bold); letter-spacing: -0.05em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.note__title { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.2; max-width: 26ch; }
.note__title a { text-decoration: underline; text-decoration-color: hsl(var(--hue) 95% 82% / 0.45); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.note__cols { display: grid; gap: var(--s2); margin-top: var(--s3); }
@media (min-width: 640px) { .note__cols { grid-template-columns: 1fr 1fr; } }
.note__col { padding: var(--s2) 20px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.note__col--gain { background: hsl(var(--hue) 90% 60% / 0.08); border-color: hsl(var(--hue) 95% 68% / 0.28); }
.note__col--loss { background: hsl(0 0% 100% / 0.02); }
.note__label { margin-bottom: 12px; font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; }
.note__col--gain .note__label { color: var(--accent-soft); }
.note__col--loss .note__label { color: var(--text-3); }
.note__col ul { display: grid; gap: 12px; }
.note__col li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; }
.note__col--gain li { color: var(--text); }
.note__col--loss li { color: var(--text-3); }
.note__col .icon { width: 18px; height: 18px; margin-top: 2px; }
.note__col--gain .icon { color: var(--accent-soft); }
.notes__cta { display: flex; justify-content: center; }

.note__art {
  position: relative;
  display: grid; place-items: center;
  width: 100%; max-width: 300px; aspect-ratio: 1;
  justify-self: center;
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(60% 60% at 50% 45%, hsl(var(--hue) 80% 40% / 0.28), transparent 70%), hsl(var(--hue) 25% 6% / 0.8);
  border: 1px solid var(--line);
}
.note__chip { position: absolute; bottom: 12%; padding: 6px 14px; border-radius: 999px; font-size: 0.8125rem; font-weight: var(--fw-bold); background: var(--accent); color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity 400ms 1.8s, transform 400ms var(--ease) 1.8s; }
.note.is-in .note__chip { opacity: 1; transform: none; }

.timer { width: 62%; transform: rotate(-90deg); }
.timer circle { fill: none; stroke-width: 8; }
.timer__track { stroke: var(--line-2); }
.timer__fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 314.2; stroke-dashoffset: 314.2; filter: drop-shadow(0 0 8px var(--accent-glow)); transition: stroke-dashoffset 1.6s var(--ease) 200ms; }
.note.is-in .timer__fill { stroke-dashoffset: 0; }
.timer__play { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--text); color: var(--ink); transform: scale(0); transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s; }
.timer__play .icon { width: 20px; height: 20px; margin-left: 3px; }
.note.is-in .timer__play { transform: scale(1); }
.float-heart { position: absolute; bottom: 32%; color: var(--text); opacity: 0; }
.float-heart .icon { width: 20px; height: 20px; }
.fh1 { right: 22%; } .fh2 { right: 16%; } .fh3 { right: 28%; }
.note.is-in .float-heart { animation: heart-up 2.6s ease-out 2.2s infinite; }
.note.is-in .fh2 { animation-delay: 3s; }
.note.is-in .fh3 { animation-delay: 3.8s; }
@keyframes heart-up { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) scale(1.1) rotate(12deg); } }

.art-week { align-content: center; gap: var(--s3); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 84%; }
.week span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line-2); font-size: 0.6875rem; font-weight: var(--fw-bold); color: var(--text-3); transition: background-color 300ms, color 300ms, border-color 300ms; }
.note.is-in .week span { background: hsl(0 0% 100% / 0.12); color: var(--text); border-color: transparent; }
.week span:nth-child(2) { transition-delay: 180ms; } .week span:nth-child(3) { transition-delay: 360ms; }
.week span:nth-child(4) { transition-delay: 540ms; } .week span:nth-child(5) { transition-delay: 720ms; }
.week span:nth-child(6) { transition-delay: 900ms; } .week span:nth-child(7) { transition-delay: 1080ms; }
.note.is-in .week .week__last { background: var(--accent); color: var(--ink); }
.mini-browser { position: relative; display: grid; gap: 8px; width: 84%; padding: 30px 14px 16px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-2); opacity: 0.35; transform: translateY(10px); transition: opacity 500ms 1.2s, transform 500ms var(--ease) 1.2s; }
.mini-browser i { position: absolute; top: 10px; left: 12px; width: 32px; height: 8px; border-radius: 4px; background: hsl(0 0% 100% / 0.2); }
.mini-browser b { display: block; height: 10px; border-radius: 5px; background: hsl(0 0% 100% / 0.5); }
.mini-browser b.short { width: 60%; background: hsl(0 0% 100% / 0.25); }
.mini-browser em { position: absolute; top: 8px; right: 10px; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: 0.6875rem; font-weight: var(--fw-bold); background: var(--accent); color: var(--ink); }
.note.is-in .mini-browser { opacity: 1; transform: none; }

.art-map { background:
    radial-gradient(60% 60% at 50% 45%, hsl(var(--hue) 80% 40% / 0.28), transparent 70%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 28px,
    hsl(var(--hue) 25% 6% / 0.8); }
.map__ring { position: absolute; top: 34%; width: 60px; height: 60px; margin-top: -30px; border-radius: 50%; border: 2px solid hsl(var(--hue) 95% 68% / 0.6); opacity: 0; }
.note.is-in .map__ring { animation: ring-pulse 2s ease-out 1s infinite; }
@keyframes ring-pulse { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.2); } }
.map__pin { position: absolute; top: 34%; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -40px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg) translate(40px, -40px); opacity: 0; background: var(--text); color: var(--ink); transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms, opacity 300ms 300ms; }
.map__pin .icon { width: 22px; height: 22px; transform: rotate(45deg); }
.note.is-in .map__pin { transform: rotate(-45deg); opacity: 1; }
.map__card { position: absolute; bottom: 12%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; width: 72%; padding: 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transform: translateY(14px); transition: opacity 500ms 900ms, transform 500ms var(--ease) 900ms; }
.map__card b { grid-column: 1 / -1; height: 8px; width: 70%; border-radius: 4px; background: hsl(0 0% 100% / 0.5); }
.map__stars { display: flex; gap: 2px; color: var(--text-2); }
.map__stars .icon { width: 13px; height: 13px; }
.map__card em { justify-self: end; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: 0.6875rem; font-weight: var(--fw-bold); background: var(--accent); color: var(--ink); }
.note.is-in .map__card { opacity: 1; transform: none; }

.art-trend svg { width: 86%; overflow: visible; }
.trend__grid { stroke: var(--line); stroke-width: 1; }
.trend__flat { fill: none; stroke: var(--text-3); stroke-width: 2.5; stroke-dasharray: 6 6; opacity: 0; transition: opacity 600ms 200ms; }
.trend__up { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; filter: drop-shadow(0 0 6px var(--accent-glow)); transition: stroke-dashoffset 1.6s var(--ease) 600ms; }
.trend__dot { fill: var(--accent); opacity: 0; transition: opacity 300ms 2.1s; }
.note.is-in .trend__flat { opacity: 1; }
.note.is-in .trend__up { stroke-dashoffset: 0; }
.note.is-in .trend__dot { opacity: 1; }
.trend__tag { position: absolute; padding: 4px 10px; border-radius: 99px; font-size: 0.6875rem; font-weight: var(--fw-bold); opacity: 0; transition: opacity 400ms 2.2s; }
.trend__tag--up { top: 16%; left: 10%; background: var(--accent); color: var(--ink); }
.trend__tag--flat { bottom: 18%; right: 10%; border: 1px solid var(--line-2); color: var(--text-3); }
.note.is-in .trend__tag { opacity: 1; }

/* ========== Comparatif ========== */
.compare { display: grid; gap: var(--s5); }
.compare__stage { position: relative; display: grid; gap: var(--s3); --pos: 50%; }
.compare__pane { display: grid; gap: var(--s2); justify-items: center; }
.compare__tag { font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.compare__tag--avec { color: var(--accent-soft); }
.compare__range, .compare__handle { display: none; }
@media (min-width: 768px) { .compare__stage { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .compare__stage { grid-template-columns: 1fr; }
  .compare__pane { grid-area: 1 / 1; }
  .compare__pane--sans .compare__tag { justify-self: start; }
  .compare__pane--avec { clip-path: inset(0 0 0 var(--pos)); }
  .compare__pane--avec .compare__tag { justify-self: end; }
  .compare__range { display: block; position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
  .compare__handle {
    display: grid; place-items: center;
    position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
    width: 2px; transform: translateX(-1px);
    background: var(--text); pointer-events: none;
  }
  .compare__handle .icon {
    width: 44px; height: 44px; padding: 12px; border-radius: 50%;
    background: var(--text); color: var(--ink); box-shadow: var(--shadow-2);
  }
  .compare__range:focus-visible ~ .compare__handle .icon { outline: 2px solid var(--accent); outline-offset: 3px; }
}
.compare__lists { display: grid; gap: var(--s4); }
@media (min-width: 768px) { .compare__lists { grid-template-columns: 1fr 1fr; gap: var(--s3); } }
.compare__h { font-size: 1.0625rem; margin-bottom: var(--s2); color: var(--text-2); }
.compare__h--avec { color: var(--text); }
.compare__list { display: grid; gap: 12px; }
.compare__list li { display: flex; align-items: center; gap: 12px; }
.compare__list .icon { width: 20px; height: 20px; }
.compare__list--sans { color: var(--text-3); }
.compare__list--avec .icon { color: var(--accent-soft); }

.profile--sans, .profile--avec { transition: filter 900ms var(--ease), transform 900ms var(--ease); }
.js .compare__stage .profile--avec { filter: saturate(0.3) brightness(0.6); }
.js .compare__stage.is-played .profile--sans { filter: grayscale(1) brightness(0.72) contrast(0.9); }
.js .compare__stage.is-played .profile--avec { filter: none; transform: scale(1.02); transition-delay: 700ms; }

.profile {
  width: 100%; max-width: 340px;
  padding: var(--s2);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  font-size: 12px; line-height: 1.35;
}
.profile__bar { display: flex; align-items: baseline; gap: var(--s1); font-weight: var(--fw-bold); font-size: 13px; }
.profile__alt { color: var(--text-3); font-weight: var(--fw-regular); font-size: 11px; }
.profile__head { display: flex; align-items: center; gap: var(--s2); margin-top: 12px; }
.profile__avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text-2);
}
.profile__avatar img { width: 58%; }
.profile__avatar--plain { background: linear-gradient(135deg, hsl(var(--hue) 6% 40%), hsl(var(--hue) 6% 22%)); box-shadow: none; }
.profile__stats { display: flex; flex: 1; justify-content: space-around; text-align: center; }
.profile__stats span { display: grid; color: var(--text-3); font-size: 10px; }
.profile__stats b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.profile__bio { display: grid; gap: 2px; margin-top: 12px; }
.profile__bio span { color: var(--text-2); }
.profile__bio--blur { filter: blur(1.2px); opacity: 0.7; }
.profile__link { color: var(--accent-soft) !important; }
.profile__cta { margin-top: 12px; padding: 6px; border-radius: 8px; text-align: center; font-weight: var(--fw-bold); background: var(--accent); color: var(--ink); }
.profile__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: var(--s2); }
.profile__grid span { position: relative; aspect-ratio: 1; border-radius: 3px; }
.profile__grid--clean span { aspect-ratio: 4 / 5; }
.profile__grid--clean i {
  position: absolute; left: 6px; bottom: 5px;
  display: flex; align-items: center; gap: 3px;
  font-style: normal; font-size: 9px; font-weight: var(--fw-bold); color: #fff;
}
.profile__grid--clean i::before { content: ""; width: 0; height: 0; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.c1 { background: radial-gradient(circle at 30% 25%, hsl(var(--h-warm) 85% 62% / 0.85), transparent 50%), linear-gradient(160deg, hsl(var(--hue) 55% 30%), hsl(var(--hue) 50% 12%)); }
.c2 { background: radial-gradient(circle at 70% 30%, hsl(var(--hue) 95% 62% / 0.85), transparent 50%), linear-gradient(160deg, hsl(var(--hue) 50% 24%), hsl(var(--hue) 45% 10%)); }
.c3 { background: linear-gradient(160deg, var(--text), hsl(var(--hue) 55% 62%)); }
.c4 { background: radial-gradient(circle at 50% 70%, hsl(var(--h-cool) 80% 55% / 0.8), transparent 55%), linear-gradient(160deg, hsl(var(--hue) 50% 22%), hsl(var(--hue) 45% 9%)); }
.c5 { background: radial-gradient(circle at 25% 70%, hsl(var(--hue) 95% 62% / 0.8), transparent 50%), linear-gradient(160deg, hsl(var(--h-warm) 40% 22%), hsl(var(--hue) 45% 10%)); }
.c6 { background: radial-gradient(circle at 75% 25%, hsl(var(--h-warm) 85% 65% / 0.8), transparent 50%), linear-gradient(160deg, hsl(var(--hue) 55% 28%), hsl(var(--hue) 50% 10%)); }
.m1 { background: hsl(var(--hue) 5% 55%); }
.m2 { background: repeating-linear-gradient(45deg, hsl(var(--h-warm) 20% 30%) 0 6px, hsl(var(--h-warm) 20% 22%) 6px 12px); }
.m3 { background: hsl(var(--h-cool) 30% 70%); }
.m4 { background: linear-gradient(0deg, hsl(var(--hue) 5% 20%) 50%, hsl(var(--hue) 5% 75%) 50%); }
.m5 { background: hsl(var(--h-warm) 25% 40%); }
.m6 { background: radial-gradient(circle, hsl(var(--hue) 5% 85%) 25%, hsl(var(--hue) 5% 35%) 26%); }
.m7 { background: hsl(var(--hue) 8% 15%); }
.m8 { background: linear-gradient(90deg, hsl(var(--h-cool) 25% 45%), hsl(var(--h-warm) 20% 60%)); }
.m9 { background: hsl(var(--hue) 5% 45%); }

/* ========== Bento ========== */
.bento { display: grid; gap: var(--s3); }
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--xl, .tile--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(248px, auto)) auto; }
  .tile--xl { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .tile--wide { grid-column: 1 / -1; }
}
.tile { display: flex; flex-direction: column; padding: var(--s3); overflow: hidden; }
.tile__art { position: relative; flex: 1; min-height: 136px; display: grid; place-items: center; margin-bottom: var(--s3); }
.tile__title { font-size: 1.125rem; letter-spacing: -0.02em; line-height: 1.25; }
.tile__text { margin-top: var(--s1); color: var(--text-2); font-size: 0.9375rem; }
.tile--xl .tile__title { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); }
.tile--xl .tile__text { font-size: 1.0625rem; }

.art-pack { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); }
.pack {
  display: grid; grid-template-columns: repeat(2, auto); gap: 12px;
  padding: var(--s3);
  border-radius: 22px;
  border: 1px dashed var(--line-2);
  transition: border-color 600ms 1s, box-shadow 600ms 1s, background-color 600ms 1s;
}
@media (min-width: 480px) { .pack { grid-template-columns: repeat(3, auto); } }
.pack__piece {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px;
  font-size: 0.875rem; font-weight: var(--fw-bold);
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(0.9);
  transition: transform 900ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 500ms;
}
.pack__piece .icon { width: 16px; height: 16px; color: var(--text-2); }
.pp1 { --fx: -140px; --fy: -90px; --fr: -18deg; }
.pp2 { --fx: 20px; --fy: -130px; --fr: 12deg; transition-delay: 90ms; }
.pp3 { --fx: 150px; --fy: -70px; --fr: 20deg; transition-delay: 180ms; }
.pp4 { --fx: -150px; --fy: 90px; --fr: 14deg; transition-delay: 270ms; }
.pp5 { --fx: -10px; --fy: 130px; --fr: -10deg; transition-delay: 360ms; }
.pp6 { --fx: 140px; --fy: 100px; --fr: -16deg; transition-delay: 450ms; }
.tile.is-in .pack__piece { opacity: 1; transform: none; }
.tile.is-in .pack { border-style: solid; border-color: hsl(var(--hue) 95% 68% / 0.45); background: hsl(var(--hue) 90% 60% / 0.06); box-shadow: 0 0 60px -20px var(--accent-glow); }
.pack__seal {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 0.875rem; font-weight: var(--fw-bold);
  background: var(--accent); color: var(--ink);
  opacity: 0; transform: scale(0.6);
  transition: opacity 400ms 1.2s, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s;
}
.pack__seal .icon { width: 16px; height: 16px; }
.tile.is-in .pack__seal { opacity: 1; transform: none; }

.flip { position: relative; width: 168px; height: 96px; transform-style: preserve-3d; transition: transform 900ms var(--ease) 200ms; }
.flip span {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: var(--shadow-1);
}
.flip__front { font-size: 2.5rem; font-weight: var(--fw-bold); color: var(--text-2); background: var(--surface); }
.flip__back { transform: rotateY(180deg); font-size: 0.9375rem; color: var(--text-2); background: linear-gradient(145deg, hsl(var(--hue) 40% 20%), var(--surface)); }
.flip__back b { font-size: 1.5rem; color: var(--text); margin-inline: 4px; }
.tile.is-in .flip { transform: rotateY(180deg); }

.art-hub svg { width: 100%; max-width: 200px; }
.hub__line { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-dasharray: 80; stroke-dashoffset: 80; transition: stroke-dashoffset 900ms var(--ease); }
.hub__line:nth-child(2) { transition-delay: 90ms; } .hub__line:nth-child(3) { transition-delay: 180ms; }
.hub__line:nth-child(4) { transition-delay: 270ms; } .hub__line:nth-child(5) { transition-delay: 360ms; }
.hub__node { fill: var(--text-2); }
.hub__core { fill: var(--text); filter: drop-shadow(0 0 8px hsl(var(--hue) 30% 92% / 0.5)); }
.tile.is-in .hub__line { stroke-dashoffset: 0; }

.art-orbit { min-height: 160px; }
.orbit__core { width: 18px; height: 18px; border-radius: 50%; background: var(--text); box-shadow: 0 0 24px hsl(var(--hue) 30% 92% / 0.4); }
.orbit { position: absolute; width: 140px; height: 140px; border: 1px dashed var(--line-2); border-radius: 50%; animation: spin 18s linear infinite; animation-play-state: paused; }
.orbit__node {
  position: absolute; padding: 4px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: var(--fw-bold); white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-2);
  animation: spin 18s linear infinite reverse; animation-play-state: inherit;
}
.o1 { top: -12px; left: 50%; margin-left: -24px; }
.o2 { bottom: 8px; left: -18px; }
.o3 { bottom: 8px; right: -26px; }
.is-live .orbit { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

.art-curve svg { width: 100%; max-width: 220px; overflow: visible; }
.curve__grid { stroke: var(--line); stroke-width: 1; }
.curve__line { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1400ms var(--ease); }
.curve__dot { fill: var(--text); opacity: 0; transition: opacity 300ms 1200ms; }
.tile.is-in .curve__line { stroke-dashoffset: 0; }
.tile.is-in .curve__dot { opacity: 1; }

.tile--wide { flex-direction: row; align-items: center; gap: var(--s4); }
.tile__big { display: flex; align-items: baseline; gap: var(--s1); flex-shrink: 0; }
.tile__big-num { font-size: clamp(4rem, 3rem + 4vw, 6rem); font-weight: var(--fw-bold); letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.tile__big span:last-child { font-size: 1.5rem; color: var(--text-2); font-weight: var(--fw-bold); }

/* ========== Expertises ========== */
.expertises { display: grid; gap: var(--s3); }
.expertise { display: grid; gap: var(--s4); padding: var(--s4); border-radius: var(--radius-lg); }
@media (min-width: 1024px) {
  .expertise { grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); align-items: center; padding: var(--s6); }
  .expertise__copy { grid-column: 1 / span 6; }
  .expertise__visual { grid-column: 7 / span 6; }
  .expertise--reverse .expertise__copy { grid-column: 7 / span 6; order: 2; }
  .expertise--reverse .expertise__visual { grid-column: 1 / span 6; order: 1; }
  .expertise .folder__grid { grid-template-columns: repeat(2, 1fr); }
}
.expertise__copy { display: grid; justify-items: start; gap: var(--s2); }
.expertise__copy .folder { justify-self: stretch; }
.expertise__copy .folder__panel { margin-top: var(--s3); }
.expertise__num {
  font-size: clamp(4rem, 3rem + 4vw, 6.5rem); font-weight: var(--fw-bold); line-height: 0.85; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px hsl(var(--hue) 60% 85% / 0.35);
}
.expertise__title { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem); letter-spacing: -0.035em; line-height: 1.1; }
.expertise__text { color: var(--text-2); max-width: 52ch; }
.expertise .tags { margin-block: var(--s1); }
.expertise__visual { position: relative; display: grid; justify-items: center; align-content: center; min-height: 320px; padding: var(--s3); border-radius: var(--radius); background: radial-gradient(60% 60% at 50% 50%, hsl(var(--hue) 80% 40% / 0.2), transparent 70%), hsl(var(--hue) 20% 100% / 0.02); border: 1px solid var(--line); }
.profile--card { max-width: 320px; transform: rotate(-2deg); transition: transform 600ms var(--ease); }
.expertise:hover .profile--card { transform: rotate(0) scale(1.02); }

.browser { width: 100%; max-width: 440px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); transform: perspective(1200px) rotateY(8deg) rotateX(4deg); transition: transform 600ms var(--ease); }
.expertise:hover .browser { transform: perspective(1200px) rotateY(2deg) rotateX(1deg); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: hsl(var(--hue) 18% 12%); border-bottom: 1px solid var(--line); }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: hsl(0 0% 100% / 0.2); }
.browser__url { margin-left: 12px; padding: 2px 12px; border-radius: 99px; font-size: 0.75rem; color: var(--text-2); background: hsl(0 0% 100% / 0.06); }
.browser__viewport { height: 300px; overflow: hidden; }
.minisite { display: grid; gap: 14px; padding: 12px 16px 24px; font-size: 9px; background: radial-gradient(80% 30% at 90% 0%, hsl(var(--hue) 75% 24% / 0.5), transparent 70%), var(--bg); animation: site-scroll 18s ease-in-out infinite alternate; animation-play-state: paused; }
.is-live .minisite { animation-play-state: running; }
@keyframes site-scroll { 0%, 10% { transform: translateY(0); } 90%, 100% { transform: translateY(calc(-100% + 300px)); } }
.ms-nav { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); font-weight: var(--fw-bold); }
.ms-nav img { height: 9px; width: auto; }
.ms-nav i { margin-left: auto; width: 44px; height: 12px; border-radius: 99px; background: var(--accent); }
.ms-hero { display: grid; gap: 8px; padding-block: 16px; justify-items: start; }
.ms-eyebrow { color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; font-size: 7px; }
.ms-h1 { font-size: 22px; font-weight: var(--fw-bold); line-height: 1.05; letter-spacing: -0.04em; max-width: 14ch; }
.ms-h2 { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.1; }
.ms-btn { padding: 6px 12px; border-radius: 99px; background: var(--accent); color: var(--ink); font-weight: var(--fw-bold); justify-self: start; }
.ms-band { padding: 8px 0; border-block: 1px solid var(--line); color: var(--text-2); font-weight: var(--fw-bold); }
.ms-cards, .ms-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ms-cards span, .ms-offers span { display: grid; gap: 2px; padding: 10px 8px; border-radius: 8px; border: 1px solid var(--line); background: hsl(0 0% 100% / 0.03); color: var(--text-3); }
.ms-cards b, .ms-offers b { font-size: 13px; color: var(--text); }
.ms-offers .is-hot { border-color: var(--accent); }
.ms-offers .is-hot b { color: var(--accent); }

/* ========== Dossiers dépliables (accordéons) ========== */
.folder-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 4px 4px 4px var(--s2);
  border-radius: 999px; font-weight: var(--fw-bold); font-size: 0.9375rem;
  border: 1px solid var(--line-2); background: hsl(0 0% 100% / 0.04);
  transition: background-color var(--fast), border-color var(--fast), transform var(--fast) var(--ease);
}
.folder-toggle:hover { background: hsl(0 0% 100% / 0.09); border-color: hsl(0 0% 100% / 0.3); transform: translateY(-1px); }
.folder-toggle__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: var(--ink); transition: transform 450ms var(--ease); }
.folder-toggle__icon .icon { width: 16px; height: 16px; }
.folder-toggle[aria-expanded="true"] .folder-toggle__icon { transform: rotate(135deg); }
.folder-toggle--sm { font-size: 0.875rem; }

.js .folder { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 550ms var(--ease); }
.js [data-folder].is-open .folder { grid-template-rows: 1fr; }
.folder__inner { min-height: 0; overflow: hidden; }
.folder__panel {
  position: relative;
  margin-top: var(--s4);
  padding: var(--s3);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius);
  background: linear-gradient(180deg, hsl(var(--hue) 40% 100% / 0.06), hsl(var(--hue) 40% 100% / 0.02));
  border: 1px solid var(--line-2);
}
.folder__panel::before {
  content: ""; position: absolute; top: -13px; left: -1px;
  width: 120px; height: 14px;
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: 10px 14px 0 0;
  background: hsl(var(--hue) 40% 100% / 0.06);
}
.js .folder__panel > li { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.js [data-folder].is-open .folder__panel > li { opacity: 1; transform: none; transition-delay: 180ms; }
.js [data-folder].is-open .folder__panel > li:nth-child(2) { transition-delay: 240ms; }
.js [data-folder].is-open .folder__panel > li:nth-child(3) { transition-delay: 300ms; }
.js [data-folder].is-open .folder__panel > li:nth-child(4) { transition-delay: 360ms; }
.js [data-folder].is-open .folder__panel > li:nth-child(5) { transition-delay: 420ms; }
.js [data-folder].is-open .folder__panel > li:nth-child(6) { transition-delay: 480ms; }
.folder__grid { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .folder__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .folder__grid { grid-template-columns: repeat(3, 1fr); } }
.folder__grid li { display: grid; gap: 4px; padding-left: var(--s2); border-left: 2px solid var(--line-2); }
.folder__grid span { color: var(--text-2); font-size: 0.9375rem; }
.checklist { display: grid; gap: 12px; padding: var(--s3) var(--s2); font-size: 0.9375rem; color: var(--text-2); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--accent-soft); }

/* ========== Services les plus demandés (carrousel, adapté de « FeatureCarousel » 21st.dev) ========== */
.fc {
  display: grid;
  overflow: hidden;
  border-radius: 40px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
@media (min-width: 1024px) { .fc { grid-template-columns: 5fr 7fr; min-height: 620px; } }
.fc__rail {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 30% 50%, hsl(var(--hue) 80% 45% / 0.35), transparent 70%),
    linear-gradient(160deg, hsl(var(--hue) 45% 16%), hsl(var(--hue) 35% 8%));
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .fc__rail { border-bottom: 0; border-right: 1px solid var(--line); } }
.fc__wheel { position: relative; display: grid; gap: var(--s1); justify-items: start; padding: var(--s4) var(--s3); }
.js .fc__wheel {
  display: block; height: 340px; padding: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}
@media (min-width: 1024px) { .js .fc__wheel { height: 100%; } }
.fc__chip {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 var(--s3);
  border-radius: 999px;
  border: 1px solid hsl(0 0% 100% / 0.2);
  color: hsl(0 0% 100% / 0.72);
  font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  transition: background-color 500ms, color 500ms, border-color 500ms, box-shadow 500ms;
}
.fc__chip .icon { width: 18px; height: 18px; opacity: 0.6; }
.fc__chip:hover { color: #fff; border-color: hsl(0 0% 100% / 0.45); }
.fc__chip.is-active { background: var(--text); color: var(--ink); border-color: var(--text); box-shadow: 0 12px 32px -12px hsl(0 0% 0% / 0.7); }
.fc__chip.is-active .icon { opacity: 1; color: var(--accent); }
.js .fc__chip {
  position: absolute; top: 50%; left: 0; right: 0;
  width: fit-content; margin: -26px auto 0;
  transition: transform 800ms cubic-bezier(0.34, 1.2, 0.64, 1), opacity 500ms, background-color 500ms, color 500ms, border-color 500ms, box-shadow 500ms;
}
@media (min-width: 1024px) { .js .fc__chip { left: var(--s6); right: auto; margin-left: 0; } }

.fc__stage {
  position: relative;
  display: grid; place-items: center;
  padding: var(--s6) var(--s3);
  overflow: hidden;
  background: radial-gradient(60% 50% at 50% 40%, hsl(var(--hue) 60% 25% / 0.35), transparent 70%), hsl(var(--hue) 20% 5%);
}
.fc__deck { position: relative; display: grid; gap: var(--s3); width: min(100%, 400px); }
.js .fc__deck { display: block; aspect-ratio: 4 / 5; }
.fc__card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 32px;
  border: 6px solid var(--bg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.js .fc__card {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(0.7); z-index: 0; pointer-events: none;
  transition: transform 750ms cubic-bezier(0.34, 1.25, 0.64, 1), opacity 500ms var(--ease), filter 600ms;
}
.js .fc__card.is-prev { opacity: 0.4; transform: translateX(-100px) scale(0.85) rotate(-3deg); z-index: 1; filter: grayscale(1) blur(2px) brightness(0.75); }
.js .fc__card.is-next { opacity: 0.4; transform: translateX(100px) scale(0.85) rotate(3deg); z-index: 1; filter: grayscale(1) blur(2px) brightness(0.75); }
.js .fc__card.is-active { opacity: 1; transform: none; z-index: 2; pointer-events: auto; filter: none; }
.fc__art {
  position: absolute; inset: 0 0 38% 0;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(70% 70% at 50% 45%, hsl(var(--hue) 70% 32% / 0.55), transparent 70%),
    linear-gradient(180deg, hsl(var(--hue) 35% 14%), hsl(var(--hue) 25% 8%));
}
.fc__art * { animation-play-state: paused !important; }
.fc__card.is-active .fc__art * { animation-play-state: running !important; }
.fc__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: 12px; justify-items: start;
  padding: var(--s5) var(--s3) var(--s3);
  background: linear-gradient(180deg, transparent, hsl(var(--hue) 22% 6% / 0.96) 28%);
}
.js .fc__body > * { opacity: 0; transform: translateY(16px); transition: opacity 500ms, transform 500ms var(--ease); }
.js .fc__card.is-active .fc__body > * { opacity: 1; transform: none; transition-delay: 200ms; }
.js .fc__card.is-active .fc__body > :nth-child(2) { transition-delay: 280ms; }
.js .fc__card.is-active .fc__body > :nth-child(3) { transition-delay: 360ms; }
.fc__kicker { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line-2); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase; }
.fc__desc { font-size: 1rem; line-height: 1.45; color: var(--text); }
@media (max-width: 639px) {
  .fc__card, .js .fc__deck { aspect-ratio: 3 / 4.6; }
  .fc__art { inset: 0 0 46% 0; }
  .fc__body { padding: var(--s3) var(--s2) var(--s2); gap: var(--s1); background: linear-gradient(180deg, transparent, hsl(var(--hue) 22% 6% / 0.97) 18%); }
  .fc__desc { font-size: 0.9375rem; }
  .fc__stage { padding: var(--s5) var(--s2); }
}
.fc__cta { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; font-weight: var(--fw-bold); font-size: 0.9375rem; color: var(--accent-soft); }
.fc__cta .icon { width: 16px; height: 16px; transition: transform var(--fast) var(--ease); }
.fc__cta:hover .icon { transform: translateX(4px); }

/* Illustrations animées des services */
.fx-phone { position: relative; width: 116px; height: 200px; padding: 6px; border-radius: 24px; overflow: hidden; background: linear-gradient(155deg, hsl(var(--hue) 10% 30%), hsl(var(--hue) 14% 8%)); box-shadow: 0 30px 60px -20px hsl(0 0% 0% / 0.8), 0 20px 60px -20px var(--accent-glow); }
.fx-phone::before { content: ""; position: absolute; inset: 6px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, hsl(var(--h-warm) 85% 62% / 0.9), transparent 45%), radial-gradient(circle at 75% 70%, hsl(var(--hue) 95% 58%), transparent 50%), linear-gradient(160deg, hsl(var(--hue) 55% 22%), hsl(var(--h-cool) 60% 9%)); animation: reel-shift 6s ease-in-out infinite alternate; }
.fx-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: hsl(0 0% 100% / 0.25); border: 1px solid hsl(0 0% 100% / 0.45); transform: translate(-50%, -50%); animation: fx-pulse 1.6s ease-in-out infinite; }
.fx-play .icon { width: 16px; height: 16px; margin-left: 2px; }
@keyframes fx-pulse { 50% { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 10px hsl(0 0% 100% / 0.08); } }
.fx-bar { position: absolute; left: 14px; right: 14px; bottom: 16px; height: 4px; border-radius: 4px; overflow: hidden; background: hsl(0 0% 100% / 0.3); }
.fx-bar i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); animation: progress 4s linear infinite; }
.fx-heart { position: absolute; bottom: 26%; color: var(--text); opacity: 0; animation: heart-up 2.6s ease-out infinite; }
.fx-heart .icon { width: 22px; height: 22px; }
.ha { right: 26%; } .hb { right: 19%; animation-delay: 0.9s; } .hc { right: 31%; animation-delay: 1.7s; }

.fx-social { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.fx-cal-title { font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.fx-cal { display: grid; grid-template-columns: repeat(4, 44px); gap: 8px; }
.fx-cal span { height: 44px; border-radius: 10px; border: 1px solid var(--line-2); background: hsl(0 0% 100% / 0.03); animation: cell-on 4.8s infinite; }
.fx-cal span:nth-child(2) { animation-delay: 0.25s; } .fx-cal span:nth-child(3) { animation-delay: 0.5s; }
.fx-cal span:nth-child(4) { animation-delay: 0.75s; } .fx-cal span:nth-child(5) { animation-delay: 1s; }
.fx-cal span:nth-child(6) { animation-delay: 1.25s; } .fx-cal span:nth-child(7) { animation-delay: 1.5s; }
.fx-cal span:nth-child(8) { animation-delay: 1.75s; } .fx-cal span:nth-child(9) { animation-delay: 2s; }
.fx-cal span:nth-child(10) { animation-delay: 2.25s; } .fx-cal span:nth-child(11) { animation-delay: 2.5s; }
.fx-cal span:nth-child(12) { animation-delay: 2.75s; }
@keyframes cell-on {
  0%, 6% { background: hsl(0 0% 100% / 0.03); border-color: var(--line-2); transform: scale(1); }
  12% { transform: scale(1.12); }
  16%, 84% { background: hsl(var(--hue) 70% 55%); border-color: transparent; transform: scale(1); }
  100% { background: hsl(0 0% 100% / 0.03); border-color: var(--line-2); }
}

.fx-google { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.fx-search { display: flex; align-items: center; gap: 10px; width: 250px; padding: 12px 16px; border-radius: 999px; background: var(--text); color: var(--ink); font-size: 0.8125rem; font-weight: var(--fw-bold); }
.fx-search .icon { width: 16px; height: 16px; flex-shrink: 0; }
.fx-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--ink); animation: typing 4.5s steps(24) infinite; }
@keyframes typing { 0% { width: 0; } 40%, 90% { width: 24ch; } 100% { width: 0; } }
.fx-result { display: flex; align-items: center; gap: 12px; width: 250px; padding: 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line-2); opacity: 0; animation: result-in 4.5s infinite; }
@keyframes result-in { 0%, 40% { opacity: 0; transform: translateY(16px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fx-pin { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--text); color: var(--ink); }
.fx-pin .icon { width: 16px; height: 16px; }
.fx-result div { flex: 1; display: grid; gap: 6px; }
.fx-result b { height: 8px; width: 80%; border-radius: 4px; background: hsl(0 0% 100% / 0.6); }
.fx-stars { display: flex; gap: 2px; color: var(--text-2); }
.fx-stars .icon { width: 12px; height: 12px; }
.fx-result em { font-style: normal; font-size: 0.6875rem; font-weight: var(--fw-bold); padding: 3px 8px; border-radius: 99px; background: var(--accent); color: var(--ink); }

.fx-browser { display: grid; gap: 8px; width: 230px; padding-bottom: 12px; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); }
.fx-browser__bar { display: flex; gap: 4px; padding: 8px 10px; background: hsl(var(--hue) 18% 12%); }
.fx-browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: hsl(0 0% 100% / 0.2); }
.fx-hero { display: block; margin: 0 10px; height: 64px; border-radius: 8px; background: radial-gradient(circle at 80% 30%, hsl(var(--hue) 95% 60% / 0.7), transparent 50%), linear-gradient(135deg, hsl(var(--hue) 40% 22%), hsl(var(--hue) 35% 10%)); transform-origin: left; animation: block-in 5s var(--ease) infinite; }
.fx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 10px; }
.fx-tiles span { height: 36px; border-radius: 6px; background: hsl(0 0% 100% / 0.1); animation: tile-in 5s infinite; }
.fx-tiles span:nth-child(2) { animation-delay: 0.15s; } .fx-tiles span:nth-child(3) { animation-delay: 0.3s; }
.fx-btn { display: block; margin: 0 10px; width: 90px; height: 18px; border-radius: 99px; background: var(--accent); animation: btn-click 5s infinite; }
.fx-cursor { position: absolute; left: 50%; top: 50%; width: 18px; height: 22px; background: var(--text); clip-path: polygon(0 0, 100% 70%, 55% 70%, 75% 100%, 60% 100%, 42% 74%, 0 95%); filter: drop-shadow(0 2px 4px hsl(0 0% 0% / 0.5)); animation: cursor-move 5s infinite; }
@keyframes block-in { 0% { transform: scaleX(0); opacity: 0; } 15%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes tile-in { 0%, 15% { transform: scale(0.5); opacity: 0; } 28%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes btn-click { 0%, 56% { transform: none; } 62% { transform: scale(0.9); box-shadow: 0 0 0 8px hsl(var(--hue) 95% 68% / 0.3); } 70%, 100% { transform: none; box-shadow: none; } }
@keyframes cursor-move { 0%, 28% { transform: translate(50px, 110px); opacity: 0; } 36% { opacity: 1; } 56% { transform: translate(-62px, 66px); } 62% { transform: translate(-62px, 66px) scale(0.85); } 68%, 90% { transform: translate(-62px, 66px); opacity: 1; } 100% { transform: translate(-62px, 66px); opacity: 0; } }

.fx-radar { position: relative; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-2); background: repeating-radial-gradient(circle, transparent 0 34px, var(--line-2) 34px 35px); }
.fx-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -70deg, transparent, hsl(var(--hue) 95% 68% / 0.45) 70deg, transparent 70.5deg); animation: spin 3s linear infinite; }
.fx-radar i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--text-2); opacity: 0.4; animation: blip 3s infinite; }
.d1 { top: 18%; left: 60%; animation-delay: 0.17s !important; }
.d2 { top: 34%; left: 80%; animation-delay: 0.55s !important; }
.d3 { top: 70%; left: 72%; animation-delay: 1.15s !important; }
.d4 { top: 78%; left: 34%; animation-delay: 1.75s !important; }
.d5 { top: 50%; left: 14%; animation-delay: 2.25s !important; }
.d6 { top: 24%; left: 30%; animation-delay: 2.65s !important; }
@keyframes blip { 0%, 100% { transform: scale(1); opacity: 0.4; } 6% { transform: scale(1.9); opacity: 1; background: var(--text); } 30% { transform: scale(1); opacity: 0.5; } }
.fx-core { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 8px hsl(0 0% 100% / 0.08); }

.fx-shot { position: absolute; width: 110px; height: 136px; border: 6px solid var(--text); border-bottom-width: 22px; border-radius: 6px; opacity: 0; box-shadow: var(--shadow-2); animation: shot-in 5s var(--ease) infinite; }
.s1 { --r: -10deg; --x: -64px; background: radial-gradient(circle at 30% 30%, hsl(var(--h-warm) 80% 62%), transparent 55%), linear-gradient(160deg, hsl(var(--hue) 50% 30%), hsl(var(--hue) 45% 12%)); }
.s2 { --r: 8deg; --x: 60px; background: radial-gradient(circle at 70% 40%, hsl(var(--hue) 95% 62%), transparent 55%), linear-gradient(160deg, hsl(var(--h-cool) 50% 26%), hsl(var(--hue) 45% 10%)); animation-delay: 0.15s; }
.s3 { --r: -2deg; --x: 0px; background: radial-gradient(circle at 50% 35%, var(--text-2), transparent 50%), linear-gradient(160deg, hsl(var(--hue) 40% 34%), hsl(var(--hue) 40% 14%)); animation-delay: 0.3s; }
@keyframes shot-in { 0%, 32% { opacity: 0; transform: translate(0, 30px) scale(0.8); } 44%, 90% { opacity: 1; transform: rotate(var(--r)) translate(var(--x), 0); } 100% { opacity: 0; transform: rotate(var(--r)) translate(var(--x), 0); } }
.fx-finder { position: relative; width: 180px; height: 130px; z-index: 2; animation: finder-out 5s infinite; }
.fx-finder i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--text); }
.fx-finder i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.fx-finder i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.fx-finder i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.fx-finder i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.fx-focus { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 2px solid var(--accent); border-radius: 6px; animation: focus 5s infinite; }
@keyframes finder-out { 0%, 26% { opacity: 1; transform: scale(1); } 32%, 94% { opacity: 0; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes focus { 0% { transform: scale(1.8); opacity: 0.4; } 16%, 100% { transform: scale(1); opacity: 1; } }
.fx-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flash 5s infinite; }
@keyframes flash { 0%, 26% { opacity: 0; } 28% { opacity: 0.45; } 36%, 100% { opacity: 0; } }

.fx-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.fx-logo { width: 110px; height: 110px; }
.fx-logo path { fill: none; stroke: var(--text); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 72; stroke-dashoffset: 72; animation: draw-logo 4.5s var(--ease) infinite; }
@keyframes draw-logo { 0% { stroke-dashoffset: 72; } 35%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 72; } }
.fx-swatches { display: flex; gap: 10px; }
.fx-swatches span { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); transform: scale(0); animation: swatch 4.5s infinite; }
.fx-swatches span:nth-child(1) { background: var(--text); animation-delay: 0.1s; }
.fx-swatches span:nth-child(2) { background: hsl(var(--hue) 60% 55%); animation-delay: 0.2s; }
.fx-swatches span:nth-child(3) { background: hsl(var(--hue) 40% 28%); animation-delay: 0.3s; }
.fx-swatches span:nth-child(4) { background: var(--ink); animation-delay: 0.4s; }
@keyframes swatch { 0%, 36% { transform: scale(0); } 46%, 90% { transform: scale(1); } 100% { transform: scale(0); } }
.fx-type-sample { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 2.5rem; line-height: 1; color: var(--text-2); opacity: 0; animation: fade-loop 4.5s infinite; }
@keyframes fade-loop { 0%, 46% { opacity: 0; transform: translateY(8px); } 56%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.fx-chat { display: flex; flex-direction: column; gap: 10px; width: 240px; }
.fx-bubble, .fx-catalog, .fx-typing { opacity: 0; animation: bubble-in 6s infinite; }
.fx-bubble { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 0.8125rem; line-height: 1.3; }
.fx-bubble.in { align-self: flex-start; background: hsl(0 0% 100% / 0.1); border-bottom-left-radius: 4px; }
.fx-bubble.out { align-self: flex-end; background: var(--text); color: var(--ink); border-bottom-right-radius: 4px; font-weight: var(--fw-bold); }
.fx-catalog { align-self: flex-end; display: flex; gap: 6px; padding: 8px; border-radius: 14px; background: var(--text); }
.fx-catalog i { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(135deg, hsl(var(--hue) 60% 55%), hsl(var(--hue) 50% 25%)); }
.fx-catalog i:nth-child(2) { background: linear-gradient(135deg, hsl(var(--h-warm) 60% 58%), hsl(var(--h-warm) 50% 26%)); }
.fx-catalog i:nth-child(3) { background: linear-gradient(135deg, hsl(var(--h-cool) 60% 52%), hsl(var(--h-cool) 50% 22%)); }
.fx-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: hsl(0 0% 100% / 0.1); }
.fx-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-2); animation: typing-dot 1s infinite; }
.fx-typing i:nth-child(2) { animation-delay: 0.15s; } .fx-typing i:nth-child(3) { animation-delay: 0.3s; }
.b2 { animation-delay: 0.9s; } .b3 { animation-delay: 1.6s; } .b4 { animation-delay: 2.4s; }
@keyframes bubble-in { 0% { opacity: 0; transform: translateY(10px) scale(0.95); } 8%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes typing-dot { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } }

/* ========== Offres ========== */
.offers { display: grid; gap: var(--s3); align-items: start; }
@media (min-width: 768px) { .offers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .offers { grid-template-columns: repeat(4, 1fr); } }
.offer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--s4) var(--s3); }
.offer__kicker { font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.offer__title { font-size: 1.5rem; letter-spacing: -0.035em; line-height: 1.15; }
.offer__price { display: flex; align-items: baseline; gap: 6px; font-size: 2.5rem; font-weight: var(--fw-bold); letter-spacing: -0.05em; line-height: 1; }
.offer__price span { font-size: 0.9375rem; font-weight: var(--fw-regular); letter-spacing: 0; color: var(--text-3); }
.offer__price small { font-size: 1rem; letter-spacing: -0.01em; color: var(--text-2); }
.offer__price--text { font-size: 1.5rem; letter-spacing: -0.03em; }
.offer__text { color: var(--text-2); font-size: 0.9375rem; }
.offer .folder { width: 100%; }
.offer .folder__panel { margin-top: var(--s3); }
.offer__cta { display: inline-flex; align-items: center; gap: var(--s1); min-height: 44px; margin-top: auto; font-weight: var(--fw-bold); font-size: 0.9375rem; color: var(--accent-soft); }
.offer__cta .icon { width: 16px; height: 16px; transition: transform var(--fast) var(--ease); }
.offer__cta:hover .icon { transform: translateX(4px); }
.offer__btn { margin-top: var(--s1); }
.offer--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, hsl(var(--hue) 40% 14%), hsl(var(--hue) 30% 8%)) padding-box,
    linear-gradient(160deg, var(--accent), hsl(var(--hue) 40% 50% / 0.15) 50%, hsl(var(--hue) 95% 68% / 0.6)) border-box;
  box-shadow: var(--shadow-2), 0 0 60px -10px var(--accent-glow);
}
.offer--featured .offer__price { color: var(--accent); }
.offer__badge { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: var(--fw-bold); color: var(--ink); background: var(--accent); }
@media (min-width: 1200px) {
  .offer--featured { transform: translateY(-16px); }
  .offer--featured:hover { transform: translateY(-20px); }
}

.catalogue {
  display: grid; gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  border-radius: var(--radius-lg);
  background: radial-gradient(60% 120% at 100% 50%, hsl(var(--hue) 80% 40% / 0.22), transparent 70%), linear-gradient(180deg, hsl(var(--hue) 30% 100% / 0.06), hsl(var(--hue) 30% 100% / 0.02));
}
@media (min-width: 1024px) { .catalogue { grid-template-columns: 1fr auto; align-items: center; gap: var(--s5); padding: var(--s5); } }
.catalogue__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); letter-spacing: -0.035em; line-height: 1.1; }
.catalogue__text { margin-top: 12px; color: var(--text-2); max-width: 56ch; }
.catalogue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

/* ========== Avis : perspective ========== */
#avis { overflow: hidden; }
.reviews { position: relative; display: grid; place-items: center; min-height: 520px; padding-block: var(--s5); perspective: 1200px; --rx: 0; --ry: 0; }
.reviews__back { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.rcard {
  position: absolute; left: 50%; top: 50%;
  display: grid; gap: var(--s1);
  width: 240px; padding: var(--s2);
  border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line-2);
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotate(var(--r));
  translate: calc(var(--rx) * var(--k) * 1px) calc(var(--ry) * var(--k) * 1px);
  filter: blur(var(--b)); opacity: var(--o);
  transition: translate 600ms var(--ease);
}
.rcard__av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--hue) 70% 60%), hsl(var(--h-warm) 60% 40%)); }
.rcard__stars {
  width: 76px; height: 13px; background: var(--text-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / 15.2px 13px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z'/%3E%3C/svg%3E") 0 0 / 15.2px 13px repeat-x;
}
.rcard i { display: block; height: 7px; border-radius: 4px; background: hsl(0 0% 100% / 0.18); }
.rcard i:last-child { width: 60%; }
.rb1 { --x: -400px; --y: -150px; --z: -200px; --r: -6deg; --b: 2px; --o: 0.8; --k: 10; }
.rb2 { --x: 390px; --y: -160px; --z: -260px; --r: 5deg; --b: 3px; --o: 0.72; --k: 12; }
.rb3 { --x: -500px; --y: 100px; --z: -380px; --r: 4deg; --b: 4px; --o: 0.62; --k: 16; }
.rb4 { --x: 480px; --y: 120px; --z: -320px; --r: -5deg; --b: 3.5px; --o: 0.66; --k: 14; }
.rb5 { --x: -180px; --y: -250px; --z: -480px; --r: 3deg; --b: 5px; --o: 0.54; --k: 20; }
.rb6 { --x: 180px; --y: 250px; --z: -520px; --r: -3deg; --b: 5.5px; --o: 0.5; --k: 22; }
.rb7 { --x: -320px; --y: 260px; --z: -640px; --r: -8deg; --b: 6.5px; --o: 0.44; --k: 26; }
.rb8 { --x: 320px; --y: -280px; --z: -700px; --r: 7deg; --b: 7px; --o: 0.4; --k: 28; }
.rb9 { --x: 0px; --y: -320px; --z: -820px; --r: 0deg; --b: 8px; --o: 0.34; --k: 32; }
.rb10 { --x: 620px; --y: -20px; --z: -760px; --r: 9deg; --b: 7.5px; --o: 0.36; --k: 30; }
@media (max-width: 767px) { .reviews__back { transform: scale(0.55); } }
.reviews__front { position: relative; z-index: 2; display: grid; gap: var(--s3); width: 100%; grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; }
.review { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); background: linear-gradient(180deg, hsl(var(--hue) 30% 14% / 0.95), hsl(var(--hue) 22% 8% / 0.95)); box-shadow: var(--shadow-2); }
.review:nth-child(1) { transform: rotate(-2deg); }
.review:nth-child(2) { transform: rotate(1.5deg) translateY(var(--s2)); }
.review:nth-child(3) { transform: rotate(-1deg); }
@media (hover: hover) { .review:hover { transform: rotate(0) translateY(-4px); } }
.review__mark { width: 36px; height: 36px; color: var(--text-2); }
.review__text { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.375rem; line-height: 1.4; }
.review__who { display: flex; align-items: center; gap: 12px; padding-top: var(--s2); border-top: 1px solid var(--line); }
.review__who strong { display: block; }
.review__who small { color: var(--text-3); font-size: 0.875rem; }
.review__av { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; font-weight: var(--fw-bold); color: var(--ink); background: linear-gradient(135deg, var(--text), var(--text-2)); }

/* ========== FAQ ========== */
.faq { display: grid; gap: var(--s5); }
.faq__head { display: grid; gap: var(--s2); justify-items: start; align-content: start; }
.faq__head .btn { margin-top: var(--s1); }
@media (min-width: 1024px) {
  .faq { grid-template-columns: repeat(12, 1fr); column-gap: var(--s3); }
  .faq__head { grid-column: 1 / span 4; position: sticky; top: var(--s8); }
  .faq__list { grid-column: 6 / span 7; }
}
.faq__list { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); transition: background-color 300ms; }
.faq__item h3 { font-size: inherit; font-weight: inherit; }
.faq__q {
  width: 100%; min-height: 64px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2);
  padding: var(--s3) 4px; text-align: left;
  font-size: 1.0625rem; font-weight: var(--fw-bold); letter-spacing: -0.015em; line-height: 1.35;
  transition: color var(--fast);
}
.faq__q:hover { color: var(--accent-soft); }
.faq__num { font-size: 0.875rem; font-weight: var(--fw-regular); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pm { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color 300ms, border-color 300ms, transform 450ms var(--ease); }
.pm::before, .pm::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 450ms var(--ease); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .pm { background: var(--text); color: var(--ink); border-color: var(--text); transform: rotate(180deg); }
.faq__item.is-open .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item.is-open .faq__q { color: var(--text); }
.faq__a { padding: 0 var(--s6) var(--s3) 40px; color: var(--text-2); max-width: 64ch; }
@media (max-width: 639px) { .faq__a { padding-inline: 4px; } }

/* ========== CTA final + contacts ========== */
.final { background: radial-gradient(45% 55% at 50% 110%, hsl(var(--hue) 95% 55% / 0.35), transparent 70%), hsl(var(--hue) 20% 4%); }
.final .kg-veil { background: radial-gradient(60% 60% at 50% 35%, hsl(var(--hue) 20% 4% / 0.85), hsl(var(--hue) 20% 4% / 0.4) 60%, transparent 90%); }
.final__inner { display: grid; justify-items: center; text-align: center; }
.final .eyebrow { margin-bottom: var(--s3); }
.final__title { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); line-height: 1.05; max-width: 16ch; margin-bottom: var(--s3); }
.final__lead { margin-inline: auto; margin-bottom: var(--s4); }
.final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-bottom: var(--s6); }
.contacts { display: grid; gap: var(--s2); width: 100%; text-align: left; }
@media (min-width: 640px) { .contacts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .contacts { grid-template-columns: repeat(3, 1fr); } }
.contact {
  display: flex; align-items: center; gap: var(--s2);
  min-height: 72px; padding: 12px var(--s2);
  border-radius: var(--radius-sm);
  background: hsl(var(--hue) 20% 8% / 0.7); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color var(--fast), transform var(--fast) var(--ease), background-color var(--fast);
}
.contact:hover { border-color: hsl(0 0% 100% / 0.3); transform: translateY(-2px); background: hsl(var(--hue) 20% 10% / 0.85); }
.contact__icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: hsl(0 0% 100% / 0.08); }
.contact__icon .icon { width: 20px; height: 20px; }
.contact small { display: block; font-size: 0.8125rem; color: var(--text-3); }
.contact strong { display: block; font-size: 1rem; overflow-wrap: anywhere; }

/* ========== Pied de page ========== */
.footer { position: relative; padding-block: var(--s6) var(--s4); background: hsl(var(--hue) 18% 3%); border-top: 1px solid var(--line); overflow: hidden; }
.footer__grid { display: grid; gap: var(--s5); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s3); } }
.footer__brand p { margin-top: var(--s2); color: var(--text-2); max-width: 32ch; font-size: 0.9375rem; }
.footer__h { font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s2); }
.footer__col ul { display: grid; gap: 4px; }
.footer__col a { display: inline-flex; align-items: center; gap: 12px; min-height: 36px; color: var(--text-2); transition: color var(--fast); }
.footer__col a:hover { color: var(--text); }
.footer__col .icon { width: 18px; height: 18px; }
.footer__word {
  margin-top: var(--s6);
  font-size: clamp(3.5rem, 16vw, 14rem); font-weight: var(--fw-bold); letter-spacing: -0.06em; line-height: 0.85; white-space: nowrap;
  background: linear-gradient(180deg, hsl(var(--hue) 30% 96% / 0.14), transparent 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none;
}
.footer__word em { background: linear-gradient(180deg, hsl(var(--hue) 30% 96% / 0.1), transparent 85%); -webkit-background-clip: text; background-clip: text; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--text-3); }

.page-simple .footer { padding-top: var(--s2); }

/* ========== Apparition au scroll ========== */
.js [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition:
    opacity 700ms var(--ease),
    translate 700ms var(--ease),
    transform 300ms var(--ease),
    box-shadow 300ms var(--ease),
    border-color 300ms;
  transition-delay: calc(var(--d, 0) * 80ms), calc(var(--d, 0) * 80ms), 0s, 0s, 0s;
}
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ========== Pages légales et 404 ========== */
.page-simple .nav__pill { max-width: 960px; }
.legal { padding-block: 160px var(--s7); }
.legal .container { max-width: calc(760px + 2 * var(--gutter)); }
.legal h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: var(--s3); }
.legal h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin: var(--s5) 0 var(--s2); }
.legal p, .legal li { color: var(--text-2); }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: var(--s1); padding-left: var(--s3); list-style: disc; }
.legal a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 0.2em; }
.legal .todo { color: var(--text); background: hsl(var(--hue) 95% 68% / 0.16); padding: 0 6px; border-radius: 4px; }
.legal__meta { color: var(--text-3); font-size: 0.9375rem; }
.notfound { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--s8) var(--gutter); }
.notfound__code { font-size: clamp(5rem, 3rem + 10vw, 10rem); font-weight: var(--fw-bold); letter-spacing: -0.06em; line-height: 0.9; color: transparent; -webkit-text-stroke: 1.5px hsl(var(--hue) 60% 85% / 0.35); }
.notfound .h2 { margin: var(--s3) 0 var(--s2); }
.notfound .lead { margin: 0 auto var(--s4); }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }

/* ========== Mouvement réduit : états finaux, aucune animation ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; translate: none; }
  .marquee, .orbit, .orbit__node, .minisite, .ig__reel::before, .ig__progress span { animation: none !important; }
  .ig__progress span { transform: scaleX(0.6); }
  .js .compare__stage .profile--avec { filter: none; }
  .js .compare__stage .profile--sans { filter: grayscale(1) brightness(0.72); }
  .fc__art *, .note__art *, .float-heart { animation: none !important; }
  .fx-bubble, .fx-catalog, .fx-typing, .fx-result, .fx-type-sample, .fx-shot, .fx-hero, .fx-tiles span { opacity: 1 !important; }
  .fx-shot { transform: rotate(var(--r)) translate(var(--x), 0); }
  .fx-type { width: auto; border-right: 0; }
  .fx-logo path { stroke-dashoffset: 0; }
  .fx-swatches span { transform: none; }
  .fx-bar i { transform: scaleX(0.6); }
  .fx-finder, .fx-flash, .fx-cursor, .float-heart { display: none; }
}