/* ============================================================
   Atelier du Site - feuille de style unique
   Stack : HTML/CSS/JS natif, zero dependance, zero build.
   Meme stack que les sites livres aux clients.
   ============================================================ */

/* ---------- 1. Palette Atelier du Site ----------
   Deux echelles seulement : Graphite (neutres, teinte froide) et
   Ambre (accent unique). Chaque couple utilise est verifie WCAG,
   les ratios sont notes en commentaire. Regle : un seul accent
   sur toute la page, jamais deux couleurs vives cote a cote.

   Graphite 500 : ne pas utiliser sous 14px (4.51 sur fond clair,
   c'est le minimum AA, sans marge). En dessous, prendre le 600.  */
:root {
  /* Echelle Graphite */
  --graphite-50:  #FAFAFB;
  --graphite-100: #F2F3F5;
  --graphite-200: #E5E7EB;
  --graphite-300: #D0D4DA;
  --graphite-400: #9AA0AA;
  --graphite-500: #6E747E;
  --graphite-600: #515760;
  --graphite-700: #3B4047;
  --graphite-800: #26292E;
  --graphite-900: #17191D;
  --graphite-950: #0E1013;

  /* Echelle Ambre */
  --ambre-50:  #FEF6EF;
  --ambre-100: #FDE8D6;
  --ambre-200: #FACEAA;
  --ambre-300: #F7AC76;
  --ambre-400: #F28440;
  --ambre-500: #E4621A;
  --ambre-600: #C2410C;
  --ambre-700: #9A3412;
  --ambre-800: #7C2D12;
  --ambre-900: #6A2510;

  /* Etats. Seul le rouge sert aujourd'hui ; le vert attend le message
     de confirmation du formulaire, une fois Netlify Forms branche. */
  --rouge:  #B3261E;
  --rouge-clair: #FCA5A5;
  --vert:   #146C43;
  --vert-clair:  #86EFAC;

  /* ---- Roles : c'est ce que le site utilise, jamais l'echelle brute ---- */
  --bg:          var(--graphite-50);
  --surface:     #FFFFFF;
  --surface-2:   var(--graphite-100);
  --ink:         var(--graphite-950);   /* 18.27 sur --bg  AAA */
  --ink-2:       var(--graphite-600);   /*  6.99 sur --bg  AA  */
  --ink-3:       var(--graphite-500);   /*  4.51 sur --bg  AA  */
  --line:        rgba(14, 16, 19, .10);
  --line-strong: rgba(14, 16, 19, .18);
  --accent:      var(--ambre-600);      /*  4.96 sur --bg  AA  */
  --accent-hi:   var(--ambre-700);
  --accent-ink:  #FFFFFF;               /*  5.18 sur accent AA */
  --accent-wash: var(--ambre-50);
  --accent-line: var(--ambre-200);
  --err:         var(--rouge);

  /* Surfaces pleines. Elles gardent leur couleur dans les deux themes :
     un bloc sombre reste sombre, un bloc ambre reste ambre. */
  --block-dark:   var(--graphite-950);
  --on-dark:      var(--graphite-100);
  --on-dark-2:    var(--graphite-400);
  --block-accent: var(--ambre-600);   /* blanc dessus : 5.18  AA  */
  --on-accent:    #FFFFFF;
  --on-accent-2:  var(--ambre-100);

  --shadow-sm: 0 1px 2px rgba(14,16,19,.05), 0 4px 12px -6px rgba(14,16,19,.10);
  --shadow-md: 0 2px 4px rgba(14,16,19,.04), 0 18px 40px -20px rgba(14,16,19,.20);

  --font:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-card:  14px;
  --r-field: 10px;
  --r-btn:   999px;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* entrees et sorties */
  --ease:        cubic-bezier(0.23, 1, 0.32, 1);   /* alias, meme valeur */
  --spring:      cubic-bezier(0.32, 0.72, 0, 1);   /* courbe tiroir iOS */

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --bay:    clamp(4.5rem, 9vw, 8rem);
  --max:    1200px;
}

/* Thème sombre : les rôles changent, les échelles restent identiques. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          var(--graphite-950);
    --surface:     var(--graphite-900);
    --surface-2:   var(--graphite-800);
    --ink:         var(--graphite-100);  /* 17.16 sur --bg  AAA */
    --ink-2:       var(--graphite-400);  /*  7.24 sur --bg  AAA */
    --ink-3:       var(--graphite-500);
    --line:        rgba(255, 255, 255, .10);
    --line-strong: rgba(255, 255, 255, .20);
    --accent:      var(--ambre-300);     /* 10.09 sur --bg  AAA */
    --accent-hi:   var(--ambre-200);
    --accent-ink:  var(--graphite-950);  /* 10.09 sur accent AAA */
    --accent-wash: #2A1810;
    --accent-line: rgba(247, 172, 118, .28);
    --err:         var(--rouge-clair);
    --block-dark: var(--graphite-900); --on-dark: var(--graphite-100); --on-dark-2: var(--graphite-400);
    --block-accent: var(--ambre-700);  /* blanc dessus : 7.31  AAA */
    --on-accent: #FFFFFF; --on-accent-2: var(--ambre-200);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.45);
    --shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -20px rgba(0,0,0,.60);
  }
}

:root[data-theme="dark"] {
  --bg: var(--graphite-950); --surface: var(--graphite-900);
  --surface-2: var(--graphite-800);
  --ink: var(--graphite-100); --ink-2: var(--graphite-400); --ink-3: var(--graphite-500);
  --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.20);
  --accent: var(--ambre-300); --accent-hi: var(--ambre-200);
  --accent-ink: var(--graphite-950); --accent-wash: #2A1810;
  --accent-line: rgba(247,172,118,.28); --err: var(--rouge-clair);
    --block-dark: var(--graphite-900); --on-dark: var(--graphite-100); --on-dark-2: var(--graphite-400);
    --block-accent: var(--ambre-700);  /* blanc dessus : 7.31  AAA */
    --on-accent: #FFFFFF; --on-accent-2: var(--ambre-200);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px -6px rgba(0,0,0,.45);
  --shadow-md: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -20px rgba(0,0,0,.60);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -.025em; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.bay  { padding-block: var(--bay); }

.h1 { font-size: clamp(2rem, 5.4vw, 3.85rem); }
.h2 { font-size: clamp(1.9rem, 3.9vw, 2.9rem); }
.h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -.02em; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--ink-2); max-width: 56ch; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.label {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-3);
}

/* ---------- 4. Navigation (une ligne, <= 72px) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--line); }
.nav__in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; letter-spacing: -.02em; }
/* Le logo est pose en SVG dans la page plutot qu'en image : ses trois
   couleurs sont prises aux jetons, donc il s'inverse tout seul en theme
   sombre. Le fichier sites/atelierdusite/logo.svg est la meme forme en
   couleurs fixes, pour les usages hors du site (mail, facture, papeterie). */
.brand__mark { width: 26px; height: 26px; flex: none; display: block; }
.brand__mark rect { fill: var(--ink); }
.brand__mark path { fill: none; stroke: var(--bg); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* La barre est posee sur --ink, pas sur le fond de page : en theme sombre
   --accent devient clair et tomberait a 1.7 de contraste sur un carre clair.
   On s'accroche donc a l'echelle, qui ne bouge pas, et non au role. */
.brand__mark .brand__mark-barre { stroke: var(--ambre-600); }
.nav__links { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; }
.nav__links a:not(.btn) { text-decoration: none; font-size: .925rem; color: var(--ink-2); transition: color .2s; white-space: nowrap; }
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__links a:not(.btn)[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav__toggle { display: none; }

@media (max-width: 860px) {
  .nav__links {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: .5rem var(--gutter) 1.25rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav__links[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; visibility: visible; }
  .nav__links a:not(.btn) { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav__links .btn { margin-top: 1rem; justify-content: center; }
  .nav__toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 40px; height: 40px; border-radius: var(--r-field);
    background: none; border: 1px solid var(--line); cursor: pointer;
  }
  .nav__toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
  .nav__toggle span::before, .nav__toggle span::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink);
    transition: transform .25s var(--spring);
  }
  .nav__toggle span::before { top: -5px; } .nav__toggle span::after  { top: 5px; }
  .nav__toggle[aria-expanded="true"] span { background: transparent; }
  .nav__toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }
}

/* ---------- 5. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .72rem 1.35rem; border-radius: var(--r-btn);
  font-size: .935rem; font-weight: 500; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; position: relative;
  transition: transform .18s var(--spring), background .2s, border-color .2s, color .2s;
}
.btn:active { transform: scale(.975); }
.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-hi); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn__arrow { transition: transform .25s var(--spring); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- 6. Hero ---------- */
.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; }
.hero__in { display: grid; gap: 1.6rem; max-width: 34rem; }
@media (min-width: 780px) { .hero__in { max-width: 44rem; } }
.hero__in .lede { max-width: 42ch; }
.hero h1 .accent { color: var(--accent); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Fond : champ d'ondes anime (js/wavefield.js).
   Le masque efface les lignes derriere le bloc de texte : l'effet
   reste visible sur les cotes, le titre garde un fond uni. */
.wavefield {
  position: absolute; inset: 0; z-index: 0; pointer-events: auto;
  -webkit-mask-image: radial-gradient(ellipse 50% 68% at 18% 46%, transparent 0%, transparent 26%, #000 70%);
  mask-image: radial-gradient(ellipse 50% 68% at 18% 46%, transparent 0%, transparent 26%, #000 70%);
}
.wavefield canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 980px) {
  .wavefield {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, #000 62%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, #000 62%);
  }
}

/* Bouton d'arret de l'animation */
.wave-toggle {
  position: absolute; right: var(--gutter); bottom: 1.25rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: var(--r-btn);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--mono); font-size: .7rem; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color .2s, border-color .2s;
}
.wave-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.wave-toggle__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.wave-toggle[aria-pressed="true"] .wave-toggle__dot { background: var(--ink-3); }
@media (max-width: 640px) { .wave-toggle { display: none; } }

.hero .wrap { position: relative; z-index: 1; }

/* ---------- 10. Cartes et grilles ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(1.4rem, 2.6vw, 2rem);
}
.card--wash { background: var(--accent-wash); border-color: var(--accent-line); }
/* ---------- 12. Tarifs ---------- */
.price { display: flex; align-items: baseline; gap: .4rem; font-family: var(--mono); }
.price__n { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 500; letter-spacing: -.04em; }
.price__u { font-size: .95rem; color: var(--ink-2); }

/* ---------- 13. Questions (accordeon natif) ---------- */
.qa { border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 500; letter-spacing: -.015em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform .28s var(--spring);
}
.qa details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.qa__body { padding-bottom: 1.4rem; color: var(--ink-2); max-width: 68ch; }
.qa__body > * + * { margin-top: .8rem; }

/* ---------- 14. Formulaire ---------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .875rem; font-weight: 500; }
.field .hint { font-size: .8rem; color: var(--ink-3); }
.field input, .field textarea, .field select {
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-field); padding: .7rem .85rem; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field--err input, .field--err textarea { border-color: var(--err); }
.field .err { font-size: .8rem; color: var(--err); }

/* ---------- 15. Pied de page ---------- */
.foot { border-top: 1px solid var(--line); background: var(--surface); }
.foot__grid { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-family: var(--mono); font-weight: 400; }
.foot ul { margin-top: 1rem; display: grid; gap: .6rem; }
.foot a { text-decoration: none; color: var(--ink-2); font-size: .925rem; transition: color .2s; }
.foot a:hover { color: var(--accent); }
.foot__bar {
  border-top: 1px solid var(--line); padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; color: var(--ink-3);
}

/* ---------- 16. Revelations au defilement ----------
   Masque uniquement si le JS s'est execute (.js pose par un script
   en tete de page). Sans JS, tout le contenu reste visible. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }

/* ---------- 17. Mouvement reduit : tout se fige ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 18. Grille a deux colonnes (page contact) ---------- */
.split2 { display: grid; gap: 3rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 960px) { .split2 { grid-template-columns: 1.25fr .85fr; } }


/* ---------- 19. Blocs de couleur pleine largeur ----------
   Le site n'a aucune image : la couleur et les chiffres portent
   le rythme visuel a leur place. Une seule echelle d'accent. */
.block { background: var(--bg); }
.block--wash   { background: var(--accent-wash); }
.block--dark   { background: var(--block-dark);   color: var(--on-dark); }
.block--accent { background: var(--block-accent); color: var(--on-accent); }
.block--dark .muted   { color: var(--on-dark-2); }
.block--dark .lede    { color: var(--on-dark-2); }
.block--dark .label   { color: var(--on-dark-2); }
.block--accent .muted,
.block--accent .lede  { color: var(--on-accent-2); }
.block--accent .label { color: var(--on-accent-2); }

/* Bouton clair sur fond sombre ou colore */
.btn--onfill { background: var(--on-dark); color: var(--block-dark); }
.btn--onfill:hover { background: #FFFFFF; }
.block--accent .btn--onfill { background: #FFFFFF; color: var(--ambre-700); }
.btn--ghostfill { background: transparent; color: inherit; border-color: rgba(255,255,255,.32); }
.btn--ghostfill:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.5); }

/* ---------- 20. Chiffres en grand ---------- */
.figures { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .figures--2 { grid-template-columns: 1fr 1fr; } }
.figure__n {
  font-family: var(--mono); font-weight: 500; line-height: .88;
  font-size: clamp(3.4rem, 9vw, 6.5rem); letter-spacing: -.055em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.block--dark .figure__n   { color: var(--ambre-300); }
.block--accent .figure__n { color: #FFFFFF; }

/* ---------- 21. Lignes de comparaison ---------- */
.ledger { display: grid; }
.ledger__row {
  display: grid; gap: .35rem 1.5rem; padding: 1.4rem 0;
  border-top: 1px solid var(--line); align-items: baseline;
}
@media (min-width: 720px) { .ledger__row { grid-template-columns: 1.1fr 1.4fr auto; } }
.ledger__k { font-weight: 500; }
.ledger__v { color: var(--ink-2); font-size: .93rem; }

/* ---------- 22. Etapes numerotees ---------- */
.flow { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 880px) { .flow { grid-template-columns: repeat(3, 1fr); } }
.flow__item { background: var(--bg); padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.1rem, 2vw, 2rem); }
.flow__n {
  font-family: var(--mono); font-size: 2.5rem; line-height: 1; font-weight: 500;
  color: var(--accent-line); letter-spacing: -.04em;
}
.flow__item h3 { margin-top: 1.1rem; }
.flow__item p { margin-top: .7rem; color: var(--ink-2); font-size: .95rem; }

/* ---------- 23. Grille de prestations sans image ---------- */
.grid-mix { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-mix { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-mix { grid-template-columns: repeat(3, 1fr); } }
.tile {
  border-radius: var(--r-card); padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line); background: var(--surface);
  display: grid; gap: .6rem; align-content: start;
}
.tile--wash   { background: var(--accent-wash); border-color: var(--accent-line); }
.tile--dark   { background: var(--block-dark); border-color: transparent; color: var(--on-dark); }
.tile--accent { background: var(--block-accent); border-color: transparent; color: var(--on-accent); }
.tile p { color: var(--ink-2); font-size: .93rem; }
.tile--dark p   { color: var(--on-dark-2); }
.tile--accent p { color: var(--on-accent-2); }

/* ---------- 24. Liste a puces dans les blocs de couleur ---------- */
.checklist { display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; }
.checklist li::before {
  content: ""; flex: none; width: 7px; height: 7px; margin-top: .55rem;
  border-radius: 50%; background: currentColor; opacity: .55;
}


/* ============================================================
   25. Mouvement
   Page marketing, vue une premiere fois : le budget d'animation
   est ici, pas dans une interface utilisee tous les jours.
   Regles tenues : transform et opacity uniquement, jamais de
   ease-in, jamais de scale(0), survol desactive au doigt,
   et tout se reduit sous prefers-reduced-motion.
   ============================================================ */

/* --- Entree de la banniere. Sequence de haut en bas, decalage 70 ms. --- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js .hero__in > * {
  /* backwards, pas forwards : l'element est visible par defaut et
     l'animation ne fait qu'appliquer l'etat de depart pendant le delai.
     Si l'animation ne joue pas (onglet ouvert en arriere-plan, moteur
     qui suspend les animations), le titre reste lisible au lieu de
     disparaitre. */
  animation: riseIn .62s var(--ease-out) backwards;
}
.js .hero__in > *:nth-child(1) { animation-delay: .06s; }
.js .hero__in > *:nth-child(2) { animation-delay: .13s; }
.js .hero__in > *:nth-child(3) { animation-delay: .20s; }

/* Le mot accentue arrive apres le reste du titre : c'est lui qui porte
   la promesse, il merite d'etre vu en dernier. */
@keyframes accentIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js .hero h1 .accent {
  display: inline-block;
  animation: accentIn .55s var(--ease-out) .34s backwards;
}

/* --- Survol des tuiles et des cartes. Souris uniquement. --- */
@media (hover: hover) and (pointer: fine) {
  .tile, .card {
    transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  }
  .tile:hover, .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
  .flow__item { transition: background .2s var(--ease-out); }
  .flow__item:hover { background: var(--surface-2); }
  .flow__item .flow__n { transition: color .2s var(--ease-out); }
  .flow__item:hover .flow__n { color: var(--accent); }
}

/* --- Boutons : la reponse doit etre immediate. --- */
.btn { transition: transform .14s var(--ease-out), background .16s var(--ease-out),
                   border-color .16s var(--ease-out), color .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--onfill:hover { transform: translateY(-1px); }
}
.btn:active { transform: translateY(0) scale(.975); }

/* --- Liens du pied de page et de la navigation --- */
@media (hover: hover) and (pointer: fine) {
  .foot a { transition: color .16s var(--ease-out), transform .16s var(--ease-out); display: inline-block; }
  .foot a:hover { transform: translateX(2px); }
}

/* --- Filet en haut des blocs de couleur : la bande se dessine a l'arrivee --- */
.block--accent, .block--dark { position: relative; }

/* --- Mouvement reduit : on garde l'apparition, on retire le deplacement --- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__in > *,
  .js .hero h1 .accent {
    opacity: 1;
    animation: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .tile:hover, .card:hover, .btn--primary:hover, .btn--onfill:hover, .foot a:hover {
      transform: none;
    }
  }
}


/* ============================================================
   26. Halo au curseur sur les cartes de prix
   Portage du composant React "GlowCard" fourni par Mathis.

   Le principe de l'original est gardé intact : un projecteur
   circulaire posé en coordonnées d'écran (background-attachment:
   fixed), découpé au seul liseré de la carte par un masque
   padding-box / border-box. Les trois cartes lisent le même
   projecteur, donc la lumière traverse la rangée d'un seul tenant
   au lieu de s'allumer carte par carte.

   Quatre écarts avec l'original, tous voulus :
   1. Les variables du pointeur sont écrites une seule fois sur
      :root, pas sur chacune des trois cartes. Une écriture par
      image au lieu de trois.
   2. La teinte reste dans l'ambre du site (14 à 36 degrés).
      L'original balayait 200 degrés et serait parti au bleu au
      milieu de l'écran.
   3. Aucun filter: blur() sur un élément qui bouge. Le halo
      extérieur est obtenu par un dégradé plus large et plus
      doux. Même rendu, une fraction du coût, et pas de bloc
      englobant parasite qui aurait décalé le fond fixe.
   4. Rien au doigt, rien sous prefers-reduced-motion, et
      l'écoute du pointeur s'arrête dès que la rangée quitte
      l'écran.
   ============================================================ */

.glow { position: relative; }
.glow__halo { display: none; }

@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  @media (hover: hover) and (pointer: fine) {

    .glow {
      --glow-size: 260;          /* diamètre du projecteur, en pixels */
      --glow-w: 2px;             /* épaisseur du liseré              */
      --glow-l: 50%;             /* clarté de la teinte, par thème   */
      --glow-hue: calc(14 + (var(--pointer-xp, .5) * 22));
    }

    /* Le masque ne laisse passer que la bande de bordure : une
       couche opaque jusqu'au padding-box, une seconde jusqu'au
       border-box, et on ne garde que ce qui appartient à l'une
       ou à l'autre, jamais aux deux. Reste l'anneau. */
    .glow::before,
    .glow::after,
    .glow__halo {
      content: "";
      position: absolute;
      border-radius: inherit;
      pointer-events: none;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% 100%;
      -webkit-mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
      -webkit-mask-clip: padding-box, border-box;
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000, #000), linear-gradient(#000, #000);
      mask-clip: padding-box, border-box;
      mask-composite: exclude;
      opacity: 0;
      transition: opacity .45s var(--ease-out);
    }

    /* Le liseré net. C'est lui qui dessine la carte. */
    .glow::before {
      inset: calc(var(--glow-w) * -1);
      border: var(--glow-w) solid transparent;
      background-image: radial-gradient(
        calc(var(--glow-size) * 1px) calc(var(--glow-size) * 1px) at
        calc(var(--pointer-x, -9999) * 1px) calc(var(--pointer-y, -9999) * 1px),
        hsl(var(--glow-hue) 92% var(--glow-l)), transparent 100%);
    }

    /* Le cœur clair, plus petit et plus chaud, qui donne
       l'impression d'une source et non d'une teinture. */
    .glow::after {
      inset: calc(var(--glow-w) * -1);
      border: var(--glow-w) solid transparent;
      background-image: radial-gradient(
        calc(var(--glow-size) * 1px * .34) calc(var(--glow-size) * 1px * .34) at
        calc(var(--pointer-x, -9999) * 1px) calc(var(--pointer-y, -9999) * 1px),
        hsl(32 100% 97%), transparent 100%);
    }

    /* Le débord extérieur. Anneau épais, dégradé large, aucun flou. */
    .glow__halo {
      display: block;
      inset: -14px;
      border: 14px solid transparent;
      border-radius: calc(var(--r-card) + 14px);
      background-image: radial-gradient(
        calc(var(--glow-size) * 1px * 1.7) calc(var(--glow-size) * 1px * 1.7) at
        calc(var(--pointer-x, -9999) * 1px) calc(var(--pointer-y, -9999) * 1px),
        hsl(var(--glow-hue) 90% var(--glow-l) / .5), transparent 72%);
    }

    /* Tant que la souris n'a pas bougé, rien ne s'allume. */
    [data-pointer="on"] .glow::before { opacity: 1; }
    [data-pointer="on"] .glow::after  { opacity: .8; }
    [data-pointer="on"] .glow__halo   { opacity: .55; }

    /* Sur la carte ambre pleine, la même teinte serait invisible.
       On monte la clarté au lieu de changer de couleur. */
    .tile--accent.glow { --glow-l: 90%; }

    /* La carte ne se soulève plus au survol : un transform sur
       l'élément re-ancrerait le fond fixe sur la carte au lieu
       de l'écran, et le halo décrocherait. Le halo est de toute
       façon un meilleur retour visuel, et il est continu. */
    .tile.glow:hover { transform: none; box-shadow: var(--shadow-sm); }
  }
}

/* Thème sombre : le liseré doit être plus clair pour exister. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glow { --glow-l: 66%; }
}
:root[data-theme="dark"] .glow { --glow-l: 66%; }