/* =========================================================
   SensitivIA - feuille de style unique
   Palette reprise du site existant (teinte 240, thème sombre)
   Rayons : boutons 14px / cartes 20px / badges pill
   ========================================================= */

:root {
  /* Couleurs (identiques au site actuel) */
  --bg:            240 48% 5%;
  --bg-elevated:   240 40% 14%;
  --surface:       240 40% 18%;
  --border:        240 28% 32%;
  --border-soft:   240 28% 25%;
  --text:          240 100% 90%;
  --text-muted:    240 22% 80%;
  --primary:       240 100% 90%;
  --primary-hover: 240 100% 95%;
  --border-strong: 240 30% 46%;
  --primary-ink:   240 45% 11%;
  --secondary:     240 35% 62%;
  --accent:        240 43% 28%;
  /* Anneau sombre posé autour des boutons, plus foncé que le fond de page */
  --btn-ring:      240 45% 3%;
  /* Liquid Glass : les deux bords de la lame et son opacité. Au-delà de .62,
     la grille de fond cesse de traverser et ce n'est plus du verre. */
  --glass-top:     240 32% 27%;
  --glass-bot:     240 40% 13%;
  --glass-a:       .52;
  /* Lumière du héros : un blanc à peine froid, pas une teinte saturée. Le
     violet du décor venait de --secondary (240 35% 62%), qui à cette taille
     lisait comme une LED mal réglée plutôt que comme de la lumière. */
  --hero-light:    240 25% 95%;

  /* Rayons */
  --r-btn: 14px;
  --r-card: 20px;
  --r-pill: 999px;

  /* Rythme */
  --section-y: clamp(4.25rem, 7vw, 6.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --maxw: 1200px;

  /* Transitions - une durée par type de mouvement, pas une seule pour tout :
     plus la distance parcourue est grande, plus le mouvement est long. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --t-micro: .12s var(--ease-out);   /* retour immédiat : couleur, pression */
  --t-fast: .2s var(--ease);         /* survol, petits déplacements */
  --t: .35s var(--ease);             /* cartes, ouverture de panneaux */
  --t-slow: .6s var(--ease);         /* entrées de section */

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: hsl(var(--bg));
  color: hsl(var(--text-muted));
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Fond global : grille fine + halos ------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(hsl(var(--primary) / .05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--primary) / .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

h1, h2, h3, h4 {
  color: hsl(var(--text));
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -.015em; }
p  { margin: 0 0 1.1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
strong { color: hsl(var(--text)); font-weight: 600; }

a { color: inherit; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: hsl(var(--primary) / .22); color: hsl(var(--text)); }

:focus-visible {
  outline: 2px solid hsl(var(--primary) / .8);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Utilitaires ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
/* .narrow combiné à .wrap : aligné sur la colonne de contenu, pas centré */
.wrap.narrow {
  max-width: calc(820px + 2 * var(--gutter));
  margin-inline: max(0px, calc((100% - var(--maxw)) / 2)) auto;
}
.section { padding-block: var(--section-y); position: relative; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.2rem); color: hsl(var(--text-muted)); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: hsl(var(--primary)); color: hsl(var(--primary-ink));
  padding: .75rem 1.25rem; border-radius: var(--r-btn); font-weight: 600;
}
.skip:focus { left: 1rem; top: 1rem; }

.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: hsl(var(--text));
  background: hsl(var(--primary) / .12);
  border: 1px solid hsl(var(--primary) / .3);
  border-radius: var(--r-pill);
  padding: .3rem .85rem;
  margin-bottom: 1.25rem;
}

.icon { width: 24px; height: 24px; stroke-width: 1.6; flex: none; }
.icon-sm { width: 18px; height: 18px; }

/* Boutons ---------------------------------------------------------------- */
/* Les boutons sont la plus petite lame de verre du site, donc la plus dense :
   sur 44px de haut, les quatre traits (translucidité, reflet, épaisseur,
   anneau) doivent tenir dans très peu de place. Le reflet spéculaire est
   empilé dans le `background` plutôt que posé sur un pseudo-élément : un
   calque couvrant passerait au-dessus du libellé et le délaverait. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  white-space: nowrap;
  font: inherit; font-size: .9375rem; font-weight: 600;
  padding: .85rem 1.4rem;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
/* Le liseré spéculaire, en anneau d'1px masqué : vif sur l'arête que la
   lumière frappe, éteint sur la tranche opposée. Même technique que les
   cartes, pour que la matière soit la même d'un bout à l'autre du site. */
.btn::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: background var(--t-fast), opacity var(--t-fast);
}

/* Bouton principal : une lame claire. Le fond n'est plus une couleur plate
   mais trois calques — le glint en haut à gauche, un voile froid en bas qui
   creuse la courbure, puis la masse. C'est ce qui le fait lire comme une
   surface bombée et non comme un rectangle peint. */
.btn-primary {
  background:
    linear-gradient(152deg, hsl(0 0% 100% / .85), hsl(0 0% 100% / 0) 44%),
    linear-gradient(0deg, hsl(240 60% 78% / .4), hsl(240 60% 78% / 0) 52%),
    linear-gradient(hsl(240 100% 94%), hsl(var(--primary)));
  color: hsl(var(--primary-ink));
  box-shadow:
    inset 0 1px 0 hsl(0 0% 100% / .9),
    inset 0 0 0 1px hsl(0 0% 100% / .35),
    inset 0 -4px 10px -4px hsl(240 60% 58% / .5),
    inset 0 6px 14px -8px hsl(0 0% 100% / .9),
    0 0 0 4px hsl(var(--btn-ring)),
    0 3px 8px hsl(240 50% 2% / .55);
}
.btn-primary::before {
  background: linear-gradient(152deg,
    hsl(0 0% 100% / .95),
    hsl(0 0% 100% / .25) 30%,
    hsl(240 40% 70% / .35) 62%,
    hsl(0 0% 100% / .6));
}
.btn-primary:hover {
  background:
    linear-gradient(152deg, hsl(0 0% 100% / .95), hsl(0 0% 100% / 0) 48%),
    linear-gradient(0deg, hsl(240 60% 80% / .32), hsl(240 60% 80% / 0) 52%),
    linear-gradient(hsl(0 0% 100%), hsl(var(--primary-hover)));
}

/* Bouton secondaire : la même lame, mais vide — on voit le fond au travers.
   Plus translucide que les cartes (.34 contre .52) parce qu'un bouton est
   petit : à densité égale il paraîtrait plus lourd qu'elles. */
.btn-ghost {
  background:
    radial-gradient(120% 110% at 14% -20%, hsl(var(--primary) / .16), transparent 58%),
    linear-gradient(152deg, hsl(0 0% 100% / .14), hsl(0 0% 100% / 0) 46%),
    linear-gradient(hsl(var(--glass-top) / .34), hsl(var(--glass-bot) / .52));
  color: hsl(var(--text));
  box-shadow:
    inset 0 1px 12px -7px hsl(var(--primary) / .75),
    inset 0 0 0 1px hsl(var(--primary) / .06),
    inset 0 1px 0 hsl(0 0% 100% / .18),
    inset 0 -1px 0 hsl(240 60% 2% / .5),
    0 0 0 4px hsl(var(--btn-ring)),
    0 3px 8px hsl(240 50% 2% / .45);
}
.btn-ghost::before {
  background: linear-gradient(152deg,
    hsl(var(--primary) / .55),
    hsl(var(--primary) / .16) 28%,
    hsl(var(--primary) / .05) 56%,
    hsl(var(--primary) / .22));
}
.btn-ghost:hover {
  background:
    radial-gradient(120% 110% at 14% -20%, hsl(var(--primary) / .22), transparent 58%),
    linear-gradient(152deg, hsl(0 0% 100% / .2), hsl(0 0% 100% / 0) 46%),
    linear-gradient(hsl(var(--glass-top) / .6), hsl(var(--glass-bot) / .7));
  box-shadow:
    inset 0 1px 14px -7px hsl(var(--primary) / .95),
    inset 0 0 0 1px hsl(var(--primary) / .1),
    inset 0 1px 0 hsl(0 0% 100% / .24),
    inset 0 -1px 0 hsl(240 60% 2% / .5),
    0 0 0 4px hsl(var(--btn-ring)),
    0 4px 10px hsl(240 50% 2% / .5);
}
.btn-ghost:hover::before {
  background: linear-gradient(152deg,
    hsl(var(--primary) / .8),
    hsl(var(--primary) / .24) 30%,
    hsl(var(--primary) / .08) 58%,
    hsl(var(--primary) / .3));
}

/* Pression : le bouton s'enfonce dans son anneau, qui lui ne bouge pas, et
   son reflet s'éteint — la lumière ne frappe plus la même arête. */
.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 3px hsl(240 50% 2% / .5),
    0 0 0 4px hsl(var(--btn-ring));
}
.btn:active::before { opacity: .45; }
/* L'anneau occupe les 4px autour du bouton : le liseré de focus passe au-delà. */
.btn:focus-visible { outline-offset: 6px; }
.btn .icon { width: 18px; height: 18px; transition: transform var(--t-fast); }
.btn:hover .icon-shift { transform: translateX(3px); }

/* Transparence réduite : le bouton secondaire redevient plein, sans reflet. */
@media (prefers-reduced-transparency: reduce) {
  .btn-ghost {
    background: hsl(var(--bg-elevated));
    border-color: hsl(var(--border));
    box-shadow: 0 0 0 4px hsl(var(--btn-ring)), 0 3px 8px hsl(240 50% 2% / .45);
  }
  .btn-ghost:hover { background: hsl(var(--surface)); border-color: hsl(var(--border-strong)); }
  .btn-primary {
    background: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--btn-ring)), 0 3px 8px hsl(240 50% 2% / .55);
  }
  .btn::before { display: none; }
}

/* Lien fléché ------------------------------------------------------------ */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: hsl(var(--text)); font-weight: 600; font-size: .9375rem;
  text-decoration: none;
}
.arrow-link .icon { width: 18px; height: 18px; transition: transform var(--t-fast); }
.arrow-link:hover .icon { transform: translateX(3px); }
.arrow-link:hover { color: hsl(var(--primary)); }

/* En-tête ---------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  /* Pas de backdrop-filter : sur un en-tête collant, il refloute la page
     derrière lui à chaque image de défilement. À cette opacité le flou ne se
     voyait presque plus, pour un coût GPU permanent. */
  background: hsl(var(--bg) / .96);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 72px;
}
.brand {
  display: inline-flex; align-items: center;
  color: hsl(var(--text)); text-decoration: none;
}
.brand .logo {
  display: block; height: 26px; width: auto;
  transition: color var(--t-fast), opacity var(--t-fast);
}
.brand:hover { color: hsl(var(--primary)); }
.brand:focus-visible { outline: 2px solid hsl(var(--primary) / .7); outline-offset: 6px; border-radius: 4px; }
@media (max-width: 480px) { .brand .logo { height: 23px; } }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: .9375rem; font-weight: 500; text-decoration: none;
  color: hsl(var(--text-muted)); transition: color var(--t-fast);
  position: relative; padding-block: .25rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: hsl(var(--text)); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: hsl(var(--primary) / .7); border-radius: 2px;
}
.header .btn { padding: .6rem 1.1rem; font-size: .875rem; }

.burger {
  display: none;
  background: none; border: 1px solid hsl(var(--border)); border-radius: var(--r-btn);
  color: hsl(var(--text)); padding: .5rem; cursor: pointer;
}
.mobile-nav { display: none; }

@media (max-width: 860px) {
  .nav, .header-cta { display: none; }
  .burger { display: inline-flex; }
  .mobile-nav {
    display: grid; gap: .25rem;
    padding: .5rem 0 1.25rem;
    border-top: 1px solid hsl(var(--border));
  }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a {
    text-decoration: none; color: hsl(var(--text-muted));
    font-weight: 500; padding: .7rem .25rem;
    border-bottom: 1px solid hsl(var(--border));
  }
  .mobile-nav a:last-of-type { border-bottom: 0; }
  .mobile-nav .btn { margin-top: .75rem; }
}

/* Héros ------------------------------------------------------------------ */
.hero { position: relative; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
  align-items: center;
}
.hero h1 { font-size: clamp(2.1rem, 3.3vw, 2.85rem); margin-bottom: 1.1rem; }
.hero h1 .accent {
  background: linear-gradient(100deg, hsl(var(--primary)), hsl(var(--secondary)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { font-size: clamp(1.0625rem, 1.55vw, 1.25rem); max-width: 48ch; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Champ lumineux du héros (décor CSS, pas d'image) */
.hero-field {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  margin-inline: auto;
  width: 100%;
}
.hero-field::before,
.hero-field::after {
  content: ""; position: absolute; border-radius: 50%;
}
.hero-field::before {
  inset: 8%;
  /* Un flou de 42px recalculé à chaque image coûte très cher (chemin logiciel
     sur plusieurs pilotes). Comme la source est déjà un dégradé, on obtient le
     même rendu diffus en adoucissant les arrêts : aucun filtre, aucun recalcul.

     Une seule lumière, blanche, centrée sur les anneaux. Les teintes saturées
     qui étaient là avant donnaient deux sources contradictoires et un creux
     gris entre elles. La couleur du décor vient maintenant uniquement des
     lamelles de verre qu'elle traverse — c'est ainsi qu'on lit de la lumière.

     Le rayon est borné en dur (`ellipse R R`, car `circle R` n'accepte pas de
     pourcentage) et calculé pour atteindre transparent AVANT le bord du
     cercle. Sans ça, le dégradé est coupé net par le border-radius et l'on
     voit un disque aux bords francs — d'autant plus que drift le déplace.
     Centre à 2% du milieu, bord à 42%, rayon 40% → marge 8%. */
  background: radial-gradient(ellipse 40% 40% at 49% 46%,
                hsl(var(--hero-light) / .3),
                hsl(var(--hero-light) / .12) 40%,
                hsl(var(--hero-light) / .03) 72%,
                transparent 100%);
}
/* Bord extérieur du champ : la tranche de la lame la plus large. */
.hero-field::after {
  inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(150deg,
                hsl(var(--hero-light) / .5),
                hsl(var(--hero-light) / .12) 30%,
                hsl(var(--hero-light) / .03) 58%,
                hsl(var(--hero-light) / .22)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Les anneaux sont des lamelles de verre concentriques, plus des traits.
   Chacune a un corps translucide et une tranche éclairée : empilées, leurs
   opacités s'additionnent vers le centre et c'est cet empilement — pas un
   dégradé peint — qui crée la profondeur. */
.hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid transparent;
  background: radial-gradient(circle at 34% 28%,
                hsl(var(--hero-light) / .09),
                hsl(var(--hero-light) / .03) 55%,
                transparent 78%);
  /* Même biseau de lentille que les cartes, à l'échelle de l'anneau : la
     lumière s'accumule juste à l'intérieur de la tranche. */
  box-shadow:
    inset 0 2px 20px -14px hsl(var(--hero-light) / .9),
    inset 0 1px 0 hsl(var(--hero-light) / .14);
}
/* La tranche. Sur un pseudo-élément pour que son intensité s'anime en
   opacité — composée par le GPU — au lieu d'une couleur de bordure, qui
   repeignait l'anneau à chaque image de déplacement du curseur. */
.hero-ring::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
  background: linear-gradient(150deg,
                hsl(var(--hero-light) / .9),
                hsl(var(--hero-light) / .25) 28%,
                hsl(var(--hero-light) / .06) 56%,
                hsl(var(--hero-light) / .38)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.hero-ring.r1 { inset: 11%; }
.hero-ring.r2 { inset: 26%; }
.hero-ring.r3 { inset: 41%; }
/* Plus la lamelle est proche du centre, plus sa tranche prend la lumière. */
.hero-ring.r1::before { opacity: .4; }
.hero-ring.r2::before { opacity: .55; }
.hero-ring.r3::before { opacity: .75; }

/* Le coeur : la source elle-même, blanche, sans palier coloré en route. */
.hero-core {
  position: absolute; inset: 42%;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
                hsl(0 0% 100% / .95),
                hsl(var(--hero-light) / .5) 40%,
                hsl(var(--hero-light) / .12) 70%,
                transparent 100%);
  box-shadow: 0 0 18px -4px hsl(var(--hero-light) / .35);
}

/* Halo qui suit le curseur à l'intérieur du champ.
   Même principe que le halo des cartes de service, pour rester cohérent. */
.hero-glow {
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    50% 50% at var(--gx, 50%) var(--gy, 50%),
    hsl(var(--hero-light) / .26), hsl(var(--hero-light) / .07) 45%, transparent 78%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
/* L'intensité du halo suit la proximité du curseur (--pd) plutôt que de
   s'allumer d'un coup : la lumière répond à l'approche. */
.hero-field.is-live .hero-glow { opacity: var(--pd, 0); transition: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Comptes finis, pas `infinite` : le décor respire à l'arrivée sur la page
     puis se fige. Une animation sans fin tient le GPU éveillé tant que l'onglet
     est ouvert, ce qui se paie en ventilateur et en batterie pour un effet que
     plus personne ne regarde. Les comptes sont pairs / entiers, donc les deux
     s'arrêtent sur leur image de départ. */
  .hero-field::before { animation: drift 16s var(--ease) 4 alternate; }
  .hero-core { animation: pulse 6s ease-in-out 5; }

  /* Hors de l'écran, les boucles s'arrêtent : inutile de faire tourner le GPU
     derrière un décor que personne ne voit. La classe est posée par app.js. */
  .hero-field.is-offscreen::before,
  .hero-field.is-offscreen .hero-core { animation-play-state: paused; }

  /* --- Parallaxe au curseur --------------------------------------------
     --px / --py valent -1 à 1 et sont posés par app.js, déjà lissés.
     On se sert de la propriété `translate`, indépendante de `transform` :
     les animations drift et pulse continuent sans être écrasées.
     Les anneaux extérieurs se déplacent moins que les intérieurs : c'est
     ce décalage qui crée la profondeur, comme dans un diaphragme. */
  .hero-field {
    transform: perspective(760px)
               rotateY(calc(var(--px, 0) * 13deg))
               rotateX(calc(var(--py, 0) * -13deg));
    transition: transform .45s var(--ease-out);
  }
  .hero-field.is-live { transition: none; }

  .hero-ring, .hero-core, .hero-field::before {
    transition: translate .45s var(--ease-out), rotate .45s var(--ease-out),
                scale .45s var(--ease-out);
  }
  .hero-ring::before, .hero-field::after { transition: opacity .45s var(--ease-out); }
  .hero-field.is-live .hero-ring::before,
  .hero-field.is-live::after { transition: none; }
  .hero-field.is-live .hero-ring,
  .hero-field.is-live .hero-core,
  .hero-field.is-live::before { transition: none; }

  /* Le flou de fond part à contresens : il recule quand les anneaux avancent. */
  .hero-field::before { translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -26px); }
  .hero-ring.r1 { translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 16px); }
  .hero-ring.r2 { translate: calc(var(--px, 0) * 31px) calc(var(--py, 0) * 31px); }
  .hero-ring.r3 { translate: calc(var(--px, 0) * 48px) calc(var(--py, 0) * 48px); }
  .hero-core    { translate: calc(var(--px, 0) * 70px) calc(var(--py, 0) * 70px); }

  /* Les anneaux se décalent aussi en rotation, chacun à sa vitesse : le
     diaphragme s'ouvre au lieu de simplement glisser. */
  .hero-ring.r1 { rotate: calc(var(--px, 0) *  4deg); }
  .hero-ring.r2 { rotate: calc(var(--px, 0) * -7deg); }
  .hero-ring.r3 { rotate: calc(var(--px, 0) * 11deg); }
  .hero-ring { transform-origin: 50% 50%; }

  /* Les tranches s'allument à mesure que le curseur approche (--pd : 0 à 1).
     En opacité, pas en couleur de bordure : le navigateur compose le calque
     au lieu de repeindre l'anneau à chaque image. */
  .hero-ring.r1::before { opacity: calc(.4 + var(--pd, 0) * .45); }
  .hero-ring.r2::before { opacity: calc(.55 + var(--pd, 0) * .4); }
  .hero-ring.r3::before { opacity: calc(.75 + var(--pd, 0) * .25); }
  .hero-field::after { opacity: calc(.6 + var(--pd, 0) * .4); }
  .hero-core { scale: calc(1 + var(--pd, 0) * .35); }
}
/* Ces deux animations tournent en boucle sur des calques floutés (blur 42px et
   blur 10px). Une mise à l'échelle obligerait le navigateur à recalculer le flou
   à chaque image ; un simple déplacement ou un changement d'opacité se compose
   sans retoucher le calque. Le mouvement reste le même à l'oeil. */
@keyframes drift {
  from { transform: translate3d(-3%, 2%, 0); }
  to   { transform: translate3d(4%, -3%, 0); }
}
@keyframes pulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-field { max-width: 300px; margin-inline: 0; opacity: .8; }
}
@media (max-width: 640px) {
  /* décor purement illustratif : inutile de le faire scroller sur mobile */
  .hero-field { display: none; }
  .hero { padding-bottom: 1rem; }
}

/* Titres de section ------------------------------------------------------ */
.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head p { font-size: 1.0625rem; }

/* Grille de services (bento) --------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.svc {
  position: relative;
  display: flex; flex-direction: column;
  background: hsl(var(--bg-elevated));
  border: 1px solid hsl(var(--border));
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.svc::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), hsl(var(--primary) / .07), transparent 70%);
  opacity: 0; transition: opacity var(--t);
}
a.svc:hover { transform: translateY(-4px); border-color: hsl(var(--primary) / .35); box-shadow: 0 24px 50px -28px hsl(var(--primary) / .45); }
a.svc:hover::after { opacity: 1; }

.svc-lead  { grid-column: span 7; }
.svc-side  { grid-column: span 5; }
.svc-wide  { grid-column: span 12; }
@media (max-width: 860px) { .svc-lead, .svc-side, .svc-wide { grid-column: span 12; } }

.svc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(145deg, hsl(var(--primary) / .18), hsl(var(--secondary) / .22));
  border: 1px solid hsl(var(--primary) / .2);
  color: hsl(var(--text));
}
.svc h3 { margin-bottom: .5rem; }
.svc p { font-size: .9688rem; margin-bottom: 1.5rem; }
.svc .arrow-link { margin-top: auto; }

.svc-lead { background: linear-gradient(160deg, hsl(var(--surface) / .9), hsl(var(--bg-elevated) / .6)); }
.svc-wide {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem;
  background: linear-gradient(100deg, hsl(var(--bg-elevated) / .8), hsl(var(--accent) / .22));
}
.svc-wide .svc-icon { margin-bottom: 1rem; }
.svc-wide p { margin-bottom: 0; }
.svc-wide .arrow-link { margin-top: 0; }
@media (max-width: 720px) {
  .svc-wide { grid-template-columns: 1fr; gap: 1.25rem; }
}

.soon {
  margin-top: 1.5rem;
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  font-size: .9375rem;
  color: hsl(var(--text-muted));
  border-top: 1px solid hsl(var(--border));
  padding-top: 1.5rem;
}
.soon .icon { color: hsl(var(--secondary)); }

/* Bandeau confiance ------------------------------------------------------ */
.trust {
  border-block: 1px solid hsl(var(--border));
  background: linear-gradient(180deg, hsl(var(--bg-elevated) / .55), transparent);
}
.trust-grid {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: start;
}
.trust-points { display: grid; gap: 1.75rem; }
.trust-point { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.trust-point .icon { color: hsl(var(--primary) / .85); margin-top: .2rem; }
.trust-point h3 { font-size: 1.0625rem; margin-bottom: .25rem; }
.trust-point p { font-size: .9688rem; margin: 0; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } }

/* Processus -------------------------------------------------------------- */
.steps { display: grid; column-gap: 1.75rem; row-gap: 2.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step {
  padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--border));
  position: relative;
}
.step-n {
  font-size: .8125rem; font-weight: 600; letter-spacing: .08em;
  color: hsl(var(--secondary)); margin-bottom: .9rem; display: block;
}
.step h3 { font-size: 1.0625rem; margin-bottom: .4rem; display: flex; align-items: center; gap: .5rem; }
.step h3 .icon { width: 18px; height: 18px; color: hsl(var(--primary) / .8); }
.step p { font-size: .9375rem; margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; row-gap: 1.75rem; } }

/* Citation / mission ----------------------------------------------------- */
.quote {
  border-left: 2px solid hsl(var(--primary) / .5);
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0;
}
.quote p {
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  line-height: 1.35; font-weight: 600; letter-spacing: -.02em;
  color: hsl(var(--text));
  max-width: 26ch;
}

/* FAQ -------------------------------------------------------------------- */
.faq { display: grid; gap: .75rem; max-width: 56rem; }
.faq details {
  border: 1px solid hsl(var(--border));
  border-radius: var(--r-card);
  background: hsl(var(--bg-elevated));
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.faq details[open] { border-color: hsl(var(--primary) / .3); background: hsl(var(--surface)); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem clamp(1.25rem, 2.5vw, 1.75rem);
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.03125rem; color: hsl(var(--text));
  line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: hsl(var(--primary) / .75); transition: transform var(--t-fast); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .answer { padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) 1.5rem; }
.faq .answer p { font-size: .9688rem; max-width: 72ch; }
.faq .answer ul { display: grid; gap: .6rem; margin: 0 0 1.1em; }
.faq .answer li { display: grid; grid-template-columns: auto 1fr; gap: .65rem; font-size: .9688rem; }
.faq .answer li .icon { color: hsl(var(--primary) / .7); margin-top: .35rem; }

/* Bandeau d'appel à l'action --------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: var(--r-card);
  background: linear-gradient(120deg, hsl(var(--bg-elevated)), hsl(var(--accent) / .45));
  padding: clamp(2.25rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
}
.cta-band h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: .5rem; }
.cta-band p { margin: 0; max-width: 50ch; }
@media (max-width: 780px) { .cta-band { grid-template-columns: 1fr; } }

/* Pages intérieures ------------------------------------------------------ */
.page-head { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: clamp(2.05rem, 3.6vw, 3.05rem); max-width: 22ch; }
.page-head .lead { max-width: 60ch; }

.prose p { font-size: 1.0625rem; }
.prose > * + * { margin-top: 1.4rem; }
.legal-updated { font-size: .875rem; color: hsl(var(--text-muted) / .75); border-top: 1px solid hsl(var(--border)); padding-top: 1.4rem; margin-top: 2.25rem; }

.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.benefits li {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: .95rem 1.1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--r-btn);
  background: hsl(var(--bg-elevated));
  font-size: .9688rem; color: hsl(var(--text));
}
.benefits li .icon { color: hsl(var(--primary) / .8); margin-top: .18rem; }
@media (max-width: 620px) { .benefits { grid-template-columns: 1fr; } }

.service-hero { display: grid; gap: 1.5rem; }
.service-panel {
  border: 1px solid hsl(var(--border));
  border-radius: var(--r-card);
  background: hsl(var(--bg-elevated) / .6);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.back-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: hsl(var(--text-muted)); text-decoration: none; margin-bottom: 1.75rem; }
.back-link:hover { color: hsl(var(--text)); }
.back-link .icon { width: 16px; height: 16px; transform: rotate(180deg); }

.contact-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--r-card);
  background: linear-gradient(140deg, hsl(var(--bg-elevated)), hsl(var(--surface) / .6));
  padding: clamp(1.75rem, 4vw, 3rem);
}
.contact-card h2, .service-panel h2 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); margin-bottom: .6rem; }
.mail-link {
  display: inline-flex; align-items: center; gap: .65rem;
  font-size: clamp(1.0625rem, 2vw, 1.375rem); font-weight: 700; letter-spacing: -.02em;
  color: hsl(var(--text)); text-decoration: none;
  padding: .85rem 1.35rem;
  border: 1px solid hsl(var(--primary) / .28);
  background: hsl(var(--primary) / .08);
  border-radius: var(--r-btn);
  word-break: break-word;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.mail-link:hover { background: hsl(var(--primary) / .15); border-color: hsl(var(--primary) / .5); }
/* Sur une page de service, l'adresse est une invitation en fin de parcours,
   pas le sujet de la page : elle descend d'un cran. Sur la page Contact, où
   elle est le contenu principal, elle garde sa taille. */
.mail-link-sm { font-size: clamp(1rem, 1.5vw, 1.1875rem); }

.notice {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid hsl(var(--border));
  border-left: 2px solid hsl(var(--primary) / .5);
  border-radius: var(--r-btn);
  background: hsl(var(--bg-elevated));
  font-size: .9688rem;
}
.notice .icon { color: hsl(var(--primary) / .8); margin-top: .15rem; }

/* 404 -------------------------------------------------------------------- */
.error-page { min-height: 62vh; display: grid; align-content: center; justify-items: start; }
.error-code { font-size: clamp(4rem, 14vw, 9rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: hsl(var(--text) / .2); margin-bottom: .25rem; }

/* Pied de page ----------------------------------------------------------- */
.footer {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--bg-elevated) / .4);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
}
.footer h2 { font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: hsl(var(--text) / .78); margin-bottom: 1rem; font-weight: 600; }
.footer ul { display: grid; gap: .65rem; }
.footer a { color: hsl(var(--text-muted)); text-decoration: none; font-size: .9375rem; transition: color var(--t-fast); }
.footer a:hover { color: hsl(var(--text)); }
.footer .brand { color: hsl(var(--text) / .85); }
.footer .brand:hover { color: hsl(var(--primary)); }
.footer .brand .logo { height: 28px; }
.footer-note { font-size: .9375rem; max-width: 38ch; margin-top: .9rem; }
.footer-base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid hsl(var(--border));
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .875rem; color: hsl(var(--text-muted));
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* =========================================================================
   LIQUID GLASS
   Une lame de verre, c'est quatre choses — et une seule coûte cher :

   1. la translucidité : la grille et les halos du fond traversent la surface ;
   2. le reflet spéculaire : un liseré vif sur l'arête éclairée, éteint sur
      l'arête opposée — jamais un `border-color` uniforme ;
   3. l'épaisseur : une arête haute éclairée, une arête basse dans l'ombre ;
   4. la réfraction : le flou de ce qui est derrière.

   Les trois premières se composent une fois et ne coûtent rien par image.
   La quatrième est un `backdrop-filter`, recalculé à chaque image de
   défilement : c'est l'une des trois causes du processus GPU à 36% mesuré
   dans le commit 9356752. Elle reste disponible, mais sur demande explicite
   (voir `.glass-refract` en bas de ce bloc) et après nouvelle mesure.
   ========================================================================= */

/* Corps de la lame. Deux calques de fond : un voile de lumière posé dans
   l'angle haut-gauche, puis la masse translucide. L'opacité de la masse reste
   à .52 — la baisser donnerait plus de transparence, mais rognerait l'écart
   de clarté entre une carte et le fond, celui que 28df289 avait travaillé.
   On accentue donc par la lumière, pas par la transparence.

   Les ombres internes font l'épaisseur du verre :
   - un biseau de lentille, la lumière qui s'accumule juste à l'intérieur du
     bord parce que la lame y est vue dans son épaisseur ;
   - une paroi interne à peine marquée, qui ferme le volume ;
   - l'arête haute éclairée et l'arête basse dans l'ombre.

   Les ombres portées sont doublées : une ombre de contact courte et dense qui
   pose la carte sur le fond, une ombre ambiante large et diffuse qui la
   décolle. Une seule ombre ne peut pas faire les deux. */
.svc,
.cta-band,
.faq details,
.contact-card,
.service-panel,
.notice,
.benefits li {
  position: relative;
  background:
    radial-gradient(130% 90% at 12% -12%, hsl(var(--primary) / .15), transparent 56%),
    linear-gradient(160deg,
      hsl(var(--glass-top) / var(--glass-a)),
      hsl(var(--glass-bot) / calc(var(--glass-a) + .2)));
  border-color: transparent;
  box-shadow:
    inset 0 2px 22px -12px hsl(var(--primary) / .55),
    inset 0 0 0 1px hsl(var(--primary) / .05),
    inset 0 1px 0 hsl(0 0% 100% / .13),
    inset 0 -1px 0 hsl(240 60% 2% / .5),
    0 1px 2px hsl(240 60% 2% / .35),
    0 10px 20px -14px hsl(240 60% 2% / .7),
    0 32px 60px -38px hsl(240 60% 2% / 1);
}

/* Le reflet spéculaire. Un dégradé posé en fond, puis masqué pour n'en garder
   que l'anneau d'1px : la lumière frappe en haut à gauche, s'éteint sur la
   tranche opposée, et revient faiblement en bas — la lueur rasante qui
   repasse sous la lame. `border-color: transparent` plus haut garde la place
   du liseré d'origine : aucun décalage de mise en page. */
.svc::before,
.cta-band::before,
.faq details::before,
.contact-card::before,
.service-panel::before,
.notice::before,
.benefits li::before,
.svc-icon::before,
.eyebrow::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(150deg,
    hsl(var(--primary) / .68),
    hsl(var(--primary) / .18) 26%,
    hsl(var(--primary) / .05) 54%,
    hsl(var(--primary) / .28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Les cartes gardent leur hiérarchie : la carte principale est une lame plus
   claire, la carte large reste teintée d'accent. */
.svc-lead { background: linear-gradient(160deg, hsl(var(--glass-top) / .68), hsl(var(--glass-bot) / .74)); }
.svc-wide { background: linear-gradient(100deg, hsl(var(--glass-bot) / .66), hsl(var(--accent) / .42)); }
.cta-band { background: linear-gradient(120deg, hsl(var(--glass-top) / .5), hsl(var(--accent) / .5)); }

/* La FAQ ouverte s'éclaircit : la lame prend la lumière quand on l'ouvre.
   Sélecteur plus spécifique que la règle groupée, donc redéclaré ici. */
.faq details[open] {
  background: linear-gradient(160deg, hsl(var(--glass-top) / .72), hsl(var(--glass-bot) / .78));
}
.faq details[open]::before { background: linear-gradient(150deg, hsl(var(--primary) / .62), hsl(var(--primary) / .18) 28%, hsl(var(--primary) / .06) 56%, hsl(var(--primary) / .24)); }

/* L'encart garde son filet d'accent à gauche, que le liseré masqué ne rend pas. */
.notice { border-left: 2px solid hsl(var(--primary) / .5); }

/* Les petites surfaces : même matière, lame plus fine. */
.svc-icon, .eyebrow { position: relative; border-color: transparent; }
.svc-icon { box-shadow: inset 0 1px 0 hsl(0 0% 100% / .14), 0 6px 14px -10px hsl(240 60% 2% / .9); }

/* Survol : la lame s'éclaircit et son reflet remonte, au lieu de simplement
   changer de couleur de bordure. */
a.svc:hover {
  border-color: transparent;
  box-shadow:
    inset 0 2px 26px -12px hsl(var(--primary) / .8),
    inset 0 0 0 1px hsl(var(--primary) / .08),
    inset 0 1px 0 hsl(0 0% 100% / .2),
    inset 0 -1px 0 hsl(240 60% 2% / .5),
    0 1px 2px hsl(240 60% 2% / .35),
    0 14px 26px -16px hsl(240 60% 2% / .75),
    0 38px 70px -36px hsl(240 60% 2% / 1);
}
/* Au survol, le reflet cesse d'être fixe : il se concentre là où le curseur
   longe la tranche et s'éteint ailleurs. C'est ce reflet mobile, plus que la
   transparence, qui fait lire la surface comme du verre et non comme une
   image de verre. --mx / --my sont posés par app.js, une fois par image.
   Le halo de la carte (::after) suit les mêmes coordonnées : les deux
   lumières restent accrochées l'une à l'autre. */
a.svc:hover::before {
  background:
    radial-gradient(55% 55% at var(--mx, 50%) var(--my, 0%),
      hsl(var(--primary) / .95), hsl(var(--primary) / .1) 72%, transparent 100%),
    linear-gradient(150deg,
      hsl(var(--primary) / .5),
      hsl(var(--primary) / .16) 28%,
      hsl(var(--primary) / .05) 56%,
      hsl(var(--primary) / .24));
}

/* En-tête : il reste dense. Sans réfraction, une lame translucide laisserait
   lire le texte qui défile derrière elle. Il ne prend donc que l'arête : un
   liseré spéculaire en bas, là où la lame se termine. */
.header { border-bottom: 1px solid transparent; }
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent, hsl(var(--primary) / .28) 22%, hsl(var(--primary) / .1) 62%, transparent);
}

/* Pied de page : la lame s'arrête sur une arête éclairée. */
.footer { border-top-color: transparent; box-shadow: inset 0 1px 0 hsl(var(--primary) / .14); }

/* Transparence réduite : certains utilisateurs la désactivent au niveau du
   système. On leur rend des surfaces pleines, le reflet en moins. */
@media (prefers-reduced-transparency: reduce) {
  .svc, .cta-band, .faq details, .contact-card, .service-panel, .notice, .benefits li {
    background: hsl(var(--bg-elevated));
    border-color: hsl(var(--border));
  }
  .faq details[open] { background: hsl(var(--surface)); }
  .svc::before, .cta-band::before, .faq details::before, .contact-card::before,
  .service-panel::before, .notice::before, .benefits li::before,
  .svc-icon::before, .eyebrow::before { display: none; }
  .svc-icon, .eyebrow { border-color: hsl(var(--primary) / .2); }
  /* Les biseaux internes sont eux aussi un effet de verre : il ne reste que
     les ombres portées, qui disent l'élévation sans simuler la matière. */
  .svc, .cta-band, .faq details, .contact-card, .service-panel, .notice, .benefits li,
  a.svc:hover {
    box-shadow: 0 1px 2px hsl(240 60% 2% / .35), 0 18px 34px -24px hsl(240 60% 2% / .9);
  }
  a.svc:hover { border-color: hsl(var(--primary) / .35); }
  .svc-icon { box-shadow: 0 6px 14px -10px hsl(240 60% 2% / .9); }
}

/* --- Réfraction réelle, sur demande -------------------------------------
   Le quatrième trait, le seul qui coûte. Pour l'activer : ajouter la classe
   `glass-refract` sur <body> dans build.mjs, puis remesurer le processus GPU
   au défilement avant de garder le changement. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-refract .svc,
  .glass-refract .cta-band,
  .glass-refract .faq details,
  .glass-refract .contact-card,
  .glass-refract .service-panel,
  .glass-refract .notice {
    -webkit-backdrop-filter: blur(16px) saturate(155%);
    backdrop-filter: blur(16px) saturate(155%);
  }
  .glass-refract .header {
    background: hsl(var(--bg) / .62);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }
  .glass-refract .header.is-scrolled { background: hsl(var(--bg) / .72); }
}

/* =========================================================================
   MOUVEMENT
   Tout ce bloc est enfermé dans `prefers-reduced-motion: no-preference` :
   si l'utilisateur a désactivé les animations, il reçoit l'état final lisible,
   sans glissement ni parallaxe.
   ========================================================================= */

/* Révélation au défilement ----------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity var(--t-slow), transform var(--t-slow);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* Entrée en cascade du bloc d'accroche : titre, phrase, boutons.
     Décalage court (90 ms) pour que la séquence reste sous la demi-seconde. */
  /* Le conteneur ne bouge pas lui-même : sinon son déplacement s'ajouterait
     à celui de ses enfants et la course deviendrait trop longue. */
  [data-reveal][data-seq] { opacity: 1; transform: none; transition: none; }
  [data-seq] > * {
    opacity: 0; transform: translateY(12px);
    transition: opacity var(--t-slow), transform var(--t-slow);
  }
  [data-seq].is-in > * { opacity: 1; transform: none; }
  [data-seq].is-in > :nth-child(1) { transition-delay: 60ms; }
  [data-seq].is-in > :nth-child(2) { transition-delay: 150ms; }
  [data-seq].is-in > :nth-child(3) { transition-delay: 240ms; }

  /* Le trait de chaque étape se trace à l'arrivée : il matérialise
     la progression du processus décrit juste à côté. */
  .step::before {
    content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0;
    height: 1px; width: 0;
    background: hsl(var(--primary) / .55);
    transition: width .7s var(--ease) 120ms;
  }
  .step.is-in::before { width: 100%; }

  /* L'icône du service répond au survol de sa carte. */
  .svc-icon { transition: transform var(--t), border-color var(--t), color var(--t); }
  a.svc:hover .svc-icon { transform: translateY(-2px) scale(1.06); }

  /* Reflet traversant la bande d'appel à l'action, au survol seulement :
     l'élément le plus important de la page, et rien qui bouge en continu. */
  .cta-band::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, hsl(var(--primary) / .10) 50%, transparent 62%);
    transform: translateX(-100%);
    transition: transform .9s var(--ease-out);
  }
  .cta-band:hover::after { transform: translateX(100%); }

  /* Ouverture de la FAQ : le contenu se déplie au lieu d'apparaître d'un coup.
     La hauteur est animée en JS (app.js) pour rester fluide sur tout navigateur. */
  .faq .answer { overflow: hidden; }
  .faq details[data-animating] { will-change: height; }
}

/* En-tête : se densifie une fois la page défilée ------------------------- */
.header {
  transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
.header.is-scrolled {
  background: hsl(var(--bg) / .97);
  box-shadow: 0 10px 30px -22px hsl(240 50% 2% / .9);
}
/* Défilée, l'arête de l'en-tête s'allume : le liseré dégradé remplace le
   filet plein d'avant, qui ne s'affichait de toute façon pas (la règle posait
   une couleur de bordure sur un en-tête qui n'en déclarait aucune). */
.header.is-scrolled::after {
  background: linear-gradient(90deg,
    transparent, hsl(var(--primary) / .45) 22%, hsl(var(--primary) / .16) 62%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .header-inner { transition: height var(--t); }
  .header.is-scrolled .header-inner { height: 64px; }
}

/* Pression : retour tactile immédiat sur tout ce qui se clique ----------- */
.btn, a.svc, .faq summary { -webkit-tap-highlight-color: transparent; }
.faq summary { transition: color var(--t-micro); }
a.svc:active { transform: translateY(-1px); }