/* =====================================================================
   MILO AUTO GROUP : style.css
   Direction artistique : voir DESIGN.md (v3 : bleu de marque, suivi de dossier)
   ===================================================================== */

/* ---------- Police (locale, latin, swap) ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #EEF3FA;          /* fond : bleu très clair */
  --white: #FFFFFF;
  --ink: #0E1B3A;         /* encre = marine d'origine : 15,2:1 sur fond */
  --muted: #465774;       /* texte secondaire : 6,6:1 */
  --muted-2: #5B6C88;     /* placeholders : 5,3:1 sur blanc */
  --rule: #C9D6E9;        /* filets (décoratifs) */
  --rule-2: #AFC0D9;      /* fil de la timeline (décoratif) */
  --leader: #8DA2C2;      /* points de conduite (décoratifs) */
  --field: #7488A8;       /* bordures de champs : 3,6:1 sur blanc */
  --accent: #2F6BC4;      /* bleu de marque affiné ; texte blanc dessus : 5,2:1 */
  --accent-hi: #2559A8;
  --accent-text: #245BAE; /* petit texte bleu sur clair : 5,9:1 */

  --navy: #0E1B3A;        /* bande contact + pied de page */
  --navy-2: #13244A;
  --navy-rule: #22335C;
  --on-ink: #EDEFF4;      /* 14,8:1 sur marine */
  --on-ink-2: #A9B4CC;    /* 8,2:1 */
  --accent-on-ink: #6AA0E8; /* 6,3:1 sur marine ; texte marine dessus : 6,3:1 */
  --field-on-ink: #6B7BA0;  /* 4,0:1 */

  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 6px;

  /* Langage de mouvement unique, utilisé partout : une seule courbe, trois durées */
  --ease: cubic-bezier(.22, .8, .3, 1);   /* départ vif, arrivée douce */
  --t-fast: .18s;    /* états : survol, appui, focus */
  --t-base: .5s;     /* apparitions, changements de contenu */
  --t-slow: 1.4s;    /* une seule fois : l'arrivée de la photo */

  --gutter: 1.25rem;
  color-scheme: light;
}
@media (min-width: 48em) { :root { --gutter: 2.5rem; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 4.75rem;   /* les ancres ne passent pas sous l'en-tête */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 48em) { body { font-size: 1.125rem; } }

h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
.nb { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 10;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: .75rem; }

.wrap {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 650 1rem/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-n { margin-right: .6rem; font-weight: 500; opacity: .75; }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--white); }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.cta-row .btn { flex: 1 1 14rem; }
@media (min-width: 48em) { .cta-row .btn { flex: 0 0 auto; } }

/* ---------- En-tête ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  transition: transform .3s var(--ease);
}
/* Il se range quand on descend, revient dès qu'on remonte (jamais pendant la navigation au clavier) */
.anim .bar.is-hidden:not(:focus-within) { transform: translateY(-100%); }

/* Le fil : indicateur de lecture de toute la page, même langage que la timeline (fil + losange) */
.fil {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;
  height: 3px;
  pointer-events: none;
}
.fil-fill { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.fil-dot {
  position: absolute;
  top: 2px;
  left: calc(var(--p, 0) * (100% - 8px));   /* reste entier dans l'écran, de 0 à 100 % */
  width: 8px;
  height: 8px;
  background: var(--accent);
  opacity: clamp(0, calc(var(--p, 0) * 80), 1);   /* absent tant que la page n'a pas bougé */
  transform: rotate(45deg);
}
html:not(.js) .fil { display: none; }
.bar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.brand { font-size: 1.125rem; line-height: 1; letter-spacing: -.01em; text-decoration: none; }
.brand b { font-weight: 780; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.nav .nav-x { display: none; }
.nav .nav-c {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 650;
}
.nav .nav-c:hover, .nav .nav-c[aria-current] { background: var(--white); }
@media (min-width: 48em) { .nav .nav-x { display: inline; } }

/* la section lue est soulignée : on sait toujours où on est */
.nav .nav-x { position: relative; transition: color var(--t-fast) var(--ease); }
.nav .nav-x::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.4rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.nav .nav-x:hover::after, .nav .nav-x[aria-current]::after { transform: scaleX(1); }
.nav .nav-x[aria-current] { color: var(--ink); }

/* ---------- Hero : la preuve d'abord ---------- */
.hero { padding-block: 2.5rem 4.5rem; }
.hero-grid { display: grid; gap: 2.5rem; }
@media (min-width: 64em) {
  .hero { padding-block: 4.5rem 6.5rem; }
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 5rem;
    align-items: start;
  }
}

h1 {
  font-size: clamp(2.7rem, 11.5vw, 6rem);
  font-weight: 720;
  line-height: .97;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.lead { max-width: 32rem; margin-top: 1.5rem; font-size: 1.1875rem; color: var(--muted); }
.hero .cta-row { margin-top: 1.75rem; max-width: 24rem; }
.hero-note { max-width: 32rem; margin-top: 1.1rem; font-size: .9375rem; color: var(--muted); }
.hero-note a { color: var(--ink); text-underline-offset: .2em; }

.proof img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 676 / 902;
  object-fit: cover;
  background: var(--rule);
}
/* mobile : photo plein cadre, bord à bord */
.proof picture { display: block; margin-inline: calc(var(--gutter) * -1); }
.proof figcaption { padding-top: 1.5rem; }
.proof blockquote {
  padding-left: 1.1rem;
  border-left: 4px solid var(--accent);
  font-size: 1.25rem;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.proof .cite { margin: .85rem 0 0 calc(1.1rem + 4px); font-size: .9375rem; color: var(--muted); }
@media (min-width: 64em) {
  .proof picture { margin-inline: 0; }
  .proof { max-width: 32rem; margin-left: auto; }
}

/* Arrivée en scène, une seule fois. Le titre et la photo sont visibles tout de suite (LCP) :
   la photo se pose (zoom léger), le reste monte doucement derrière. */
.anim .hero-copy .lead,
.anim .hero-copy .cta-row,
.anim .hero-copy .hero-note,
.anim .proof figcaption { animation: rise .7s var(--ease) both; }
.anim .hero-copy .lead { animation-delay: .1s; }
.anim .hero-copy .cta-row { animation-delay: .2s; }
.anim .hero-copy .hero-note { animation-delay: .3s; }
.anim .proof figcaption { animation-delay: .6s; }
.anim .proof picture { overflow: hidden; }
.anim .proof img { animation: settle var(--t-slow) var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes settle { from { transform: scale(1.07); } }

/* ---------- Sections : registre à filets ---------- */
.sec {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 10vw, 7.5rem);
}
#about { padding-bottom: clamp(1.5rem, 4vw, 3rem); }   /* la transition du soir fait le reste */
.sec-grid { display: grid; gap: 2.25rem; }
@media (min-width: 64em) {
  .sec-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0; }
  .sec-head { padding-right: 3rem; }
  .sec-body { padding-left: 4rem; border-left: 1px solid var(--rule); }
}

h2 {
  font-size: clamp(2.1rem, 7vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.sec-sub { max-width: 22rem; margin-top: 1.25rem; color: var(--muted); }

/* ---------- Process : le suivi du dossier ---------- */
.journal { --node-y: .7rem; --line-x: 1rem; }   /* haut de l'étape au centre du repère ; position du fil */
.step { position: relative; padding: 0 0 3rem 3rem; }
.step:last-child { padding-bottom: 0; }

.step-status {
  margin-bottom: .45rem;
  font-size: .9375rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--accent-text);
}
.step-status span:not(.sr-only) { display: block; }
.step h3 {
  font-size: 1.5rem;
  font-weight: 680;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.step-n { display: inline-block; min-width: 2.1rem; margin-right: .5rem; font-weight: 500; color: var(--muted); }
.step-main p { margin-top: .4rem; max-width: 30rem; color: var(--muted); }

/* le fil (gris) et sa version remplie (bleu), du repère de cette étape à celui de la suivante */
.step::before, .step::after {
  content: "";
  position: absolute;
  left: calc(var(--line-x) - 1px);
  top: var(--node-y);
  bottom: calc(-1 * var(--node-y));
  width: 2px;
  transform-origin: top;
}
.step::before { background: var(--rule-2); }
.step::after { background: var(--accent); }
.step:last-child::before, .step:last-child::after { display: none; }

/* le repère : un losange (écho discret de la marque) */
.rail {
  position: absolute;
  left: calc(var(--line-x) - 6px);
  top: calc(var(--node-y) - 6px);
  z-index: 1;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  background: var(--accent);
  transform: rotate(45deg);
}
.step:last-child .rail { left: calc(var(--line-x) - 9px); top: calc(var(--node-y) - 9px); width: 18px; height: 18px; }
.step:last-child .step-status { font-size: 1.0625rem; font-weight: 720; }

@media (min-width: 48em) {
  .journal { --node-y: .94rem; --line-x: 12.5rem; }
  .step {
    display: grid;
    grid-template-columns: 11rem 3rem minmax(0, 1fr);
    padding: 0 0 3.25rem;
  }
  .step-status { grid-column: 1; margin: 0; padding-top: .28rem; text-align: right; }
  .step-status span:not(.sr-only):not(:first-of-type) { margin-top: .15rem; }
  .step-main { grid-column: 3; }
}

/* Signature : le fil se remplit au fil du scroll (JS pose --seg et .is-reached) */
.anim .step::after { transform: scaleY(var(--seg, 0)); }
.anim .rail, .anim .step-status { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.anim .step:not(.is-reached) .rail { background: var(--white); }
.anim .step:not(.is-reached) .step-status { color: var(--muted); }

/* ---------- Tarifs : liste de prix ---------- */
.prices { margin: 0; border-top: 2px solid var(--ink); }
.price {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  padding: 1.5rem 0 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.price dt {
  grid-column: 1 / -1;
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.3;
}
.price-fig { grid-column: 1 / -1; display: flex; align-items: baseline; gap: .75rem; margin-top: .55rem; }
.leader {
  flex: 1 1 1rem;
  min-width: 1rem;
  border-bottom: 3px dotted var(--leader);
  transform: translateY(-.3em);
}
.fig {
  font-size: 1.625rem;
  font-weight: 720;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--accent-text);
  white-space: nowrap;
}
.price-note { grid-column: 1 / -1; max-width: 34rem; margin-top: .7rem; font-size: .9375rem; color: var(--muted); }
.incl { margin-top: .7rem; display: grid; gap: .35rem; color: var(--ink); }
.incl li { position: relative; padding-left: 1.5rem; }
.incl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: .8rem;
  height: 2px;
  background: var(--accent);
}
.price-foot {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.5rem;
  font-weight: 650;
  color: var(--accent-text);
}
.price-foot::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  transform: rotate(45deg);
}
@media (min-width: 40em) {
  .price dt { grid-column: 1; font-size: 1.3125rem; }
  .price-fig { grid-column: 2; margin-top: 0; padding-left: .75rem; }
}

/* ---------- Qui suis-je ---------- */
.about-body { display: grid; gap: 2.5rem; align-content: start; }
.prose { display: grid; gap: 1.1rem; max-width: 36rem; font-size: 1.1875rem; }
.prose p:first-child { font-size: 1.375rem; line-height: 1.4; letter-spacing: -.01em; }

.spec { max-width: 36rem; border-top: 2px solid var(--ink); }
.spec > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: .25rem 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec dt { font-size: .9375rem; color: var(--muted); }

/* ---------- Du jour au soir : le bleu clair devient marine sans coupure ----------
   Zone sans texte : un ciel qui s'assombrit, puis deux crêtes (tracées d'après la photo) qui se lèvent au scroll. */
.dusk {
  --far: #34528A;
  position: relative;
  height: 15rem;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--bg) 0%, #E4ECF8 16%, #C9D9EF 38%, #9FB7DC 68%, #6F8FC2 100%);
}
.dusk svg { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 9rem; }
.dusk-far path { fill: var(--far); }
.dusk-near path { fill: var(--navy); }
/* les deux plans montent à des vitesses différentes (--k : 0 loin, 1 arrivé) */
.anim .dusk-far { transform: translateY(calc((1 - var(--k, 1)) * 14px)); }
.anim .dusk-near { transform: translateY(calc((1 - var(--k, 1)) * 46px)); }
@media (min-width: 48em) {
  .dusk { height: max(13rem, 22vw); }
  .dusk svg { height: auto; aspect-ratio: 1440 / 200; }   /* les crêtes ne sont jamais rognées */
}

/* ---------- Contact : bande marine, « Prépare ta demande » ---------- */
.sec-ink { background: var(--navy); color: var(--on-ink); border-top: 0; }
.sec-ink .sec-sub { color: var(--on-ink-2); }
.sec-ink :focus-visible { outline-color: var(--accent-on-ink); }
@media (min-width: 64em) { .sec-ink .sec-body { border-left-color: var(--navy-rule); } }

.sec-ink .btn-primary { background: var(--accent-on-ink); color: var(--navy); }
.sec-ink .btn-primary:hover { background: #8DB7F0; }
.sec-ink .btn-ghost { border-color: var(--on-ink-2); color: var(--on-ink); }
.sec-ink .btn-ghost:hover { background: var(--navy-2); }

.contact-fallback .btn { width: 100%; max-width: 22rem; }
.tool { display: grid; gap: 1.5rem; max-width: 40rem; }
.tool h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.tool-hint { margin-top: -.75rem; color: var(--on-ink-2); }

.fields { display: grid; gap: 1.1rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { min-width: 0; margin: 0; padding: 0; border: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .field legend, .out label {
  display: block;
  margin-bottom: .4rem;
  padding: 0;
  font-size: .9375rem;
  color: var(--on-ink-2);
}
.field input[type="text"] {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem .9rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--white);
  border-radius: var(--radius);
  font: 400 1rem/1.4 var(--sans);   /* 16 px minimum : pas de zoom auto sur iOS */
}
.field input::placeholder { color: var(--muted-2); opacity: 1; }
.field input[type="text"]:focus { outline: 2px solid var(--accent-on-ink); outline-offset: 2px; }

.zone-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mk name" "mk sub";
  column-gap: .8rem;
  align-items: center;
  min-height: 3.25rem;
  padding: .55rem .9rem;
  border: 1px solid var(--field-on-ink);
  border-radius: var(--radius);
}
.opt-body::before {
  content: "";
  grid-area: mk;
  width: .7rem;
  height: .7rem;
  border: 1px solid var(--on-ink-2);
  transform: rotate(45deg);
}
.opt-name { grid-area: name; font-weight: 650; line-height: 1.2; }
.opt-sub { grid-area: sub; font-size: .8125rem; color: var(--on-ink-2); line-height: 1.3; }
.opt input:checked + .opt-body { background: var(--white); border-color: var(--white); color: var(--ink); }
.opt input:checked + .opt-body::before { background: var(--accent); border-color: var(--accent); }
.opt input:checked + .opt-body .opt-sub { color: var(--muted); }
.opt input:focus-visible + .opt-body { outline: 2px solid var(--accent-on-ink); outline-offset: 3px; }

/* Le message se compose sous tes yeux : chaque info remplie ajoute sa ligne */
.out-label { display: block; margin: 0 0 .4rem; font-size: .9375rem; color: var(--on-ink-2); }
.msg {
  padding: 1rem;
  background: var(--navy-2);
  color: var(--on-ink);
  border: 1px solid var(--navy-rule);
  border-radius: var(--radius);
  font-size: .9375rem;
  line-height: 1.65;
  user-select: text;
  -webkit-user-select: text;
}
.msg p { margin: 0; }
.msg-gap { height: .8rem; }
.msg-row {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.msg-row.is-on { grid-template-rows: 1fr; opacity: 1; }
.msg-row > * { overflow: hidden; min-height: 0; }
/* source du presse-papiers : hors écran, jamais visible ni focalisable */
.copy-src { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; font-size: 16px; }
.tool .cta-row .btn-ghost { min-width: 13.5rem; }   /* évite le saut quand le libellé devient « Message copié » */
.btn.is-next { animation: nudge .6s var(--ease) 1; }
@keyframes nudge { 40% { transform: scale(1.035); } }
.tool-status { min-height: 1.6em; margin-top: -.5rem; color: var(--on-ink); font-weight: 500; }
.tool-note { margin-top: -.5rem; max-width: 34rem; font-size: .9375rem; color: var(--on-ink-2); }

/* ---------- Barre d'action mobile : le DM reste à un geste, sauf quand on y est déjà ---------- */
.dock { display: none; }
@media (max-width: 47.99em) {
  .dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: block;
    padding: .75rem max(var(--gutter), env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    background: var(--bg);
    border-top: 1px solid var(--rule);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .35s var(--ease), visibility 0s linear .35s;
  }
  .dock.is-on { visibility: visible; transform: none; transition: transform .35s var(--ease); }
  .dock .btn { width: 100%; }
}

/* ---------- Pied de page (prolonge la bande marine) ---------- */
.foot { background: var(--navy); border-top: 1px solid var(--navy-rule); color: var(--on-ink-2); padding-block: 3rem 3.5rem; font-size: .9375rem; }
.foot-grid { display: grid; gap: 1.5rem; align-items: start; }
.foot-brand { font-size: 1.125rem; color: var(--on-ink); letter-spacing: -.01em; }
.foot-brand b { font-weight: 780; }
.foot a { text-underline-offset: .2em; }
.foot :focus-visible { outline-color: var(--accent-on-ink); }
@media (max-width: 47.99em) {
  .foot { padding-bottom: calc(3.5rem + 5.5rem + env(safe-area-inset-bottom)); }   /* la barre d'action ne masque jamais le pied de page */
}
@media (min-width: 48em) {
  .foot-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 2rem; }
}

/* ---------- Apparitions discrètes (opacité + 6 px) ---------- */
/* --d : délai d'échelonnement posé dans le HTML, pour que les lignes d'un groupe arrivent l'une après l'autre */
.anim .reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base) var(--ease) var(--d, 0ms), transform var(--t-base) var(--ease) var(--d, 0ms);
}
.anim .reveal.in { opacity: 1; transform: none; }

/* ---------- Mouvement réduit : tout est affiché, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}