/* ============================================================
   SmartClinic — site vitrine
   ------------------------------------------------------------
   Une seule feuille, aucune dependance, aucun build.

   La peau est du VERRE, et le verre n'est pas une couleur : il
   ne se voit que s'il a quelque chose a refracter. Tout ce
   fichier est organise autour de ce fait.

     1. Un ciel colore (`.ciel`) est pose en `position: fixed`
        derriere toute la page. Fixe, et non haut de N pixels :
        sur une page de plusieurs milliers de pixels, une aurore
        bornee laisse les panneaux du bas poses sur du blanc, et
        du verre pose sur du blanc est du blanc. C'est la lecon
        deja payee sur le tableau de bord clinique de
        l'application (`styles/tableau-bord-clinique.css`).
     2. Chaque plaque (`.vitre`) porte quatre choses ensemble,
        jamais trois : un fond translucide, un `backdrop-filter`,
        un liston clair en haut (`inset 0 1px 0`) et un reflet
        diagonal (`::after`). Retirez le reflet et il reste une
        boite transparente.
     3. Le texte, lui, ne flotte jamais. Il est toujours pose sur
        une plaque assez opaque pour rester lisible aux deux
        themes — le verre est une texture, pas une excuse.
     4. LES PHOTOS SONT DES PLAQUES ELLES AUSSI. C'est le seul
        ajout de fond a cette regle : une photographie posee nue
        sur le ciel est un rectangle opaque au milieu de plaques
        translucides, et elle casse la matiere de la page. Elle
        porte donc le meme rayon, le meme liston clair et la meme
        ombre que `.vitre` — le verre l'encadre au lieu de la
        subir. Voir `.photo`.
     5. La famille des assistants d'IA est en VERRE SOMBRE
        (`.vitre--nuit`), pas sur une bande opaque. Une bande
        pleine couvrirait le ciel, et les plaques posees dessus
        n'auraient plus rien a refracter : la section perdrait
        justement ce qui fait le site. Le verre sombre suffit a
        dire « ici, on parle d'autre chose ».

   La rampe de bleu et la neutre slate sont celles de
   l'application (`client/src/styles/tokens.css`), pour qu'un
   prospect qui se connecte apres la visite reconnaisse le
   produit. Ce qui appartient en propre a SmartClinic est le
   vert-teal du soin : marque, jalons, accents.
   ============================================================ */

/* --- 1. Jetons ------------------------------------------- */

:root {
  color-scheme: light;

  /* Rampe de marque heritee : bleu clinique */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* Rampe propre a SmartClinic : le teal du soin */
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;

  /* Rampe neutre : slate legerement bleute */
  --slate-0: #ffffff;
  --slate-25: #fbfcfe;
  --slate-50: #f6f8fb;
  --slate-100: #eef1f6;
  --slate-200: #e2e7ef;
  --slate-300: #cbd3e0;
  --slate-400: #94a1b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #080d1a;

  /* Accents fonctionnels */
  --violet-500: #8b5cf6;
  --amber-500: #f59e0b;
  --rose-500: #f43f5e;
  --emerald-600: #059669;

  /* Couche semantique — c'est elle que les composants lisent */
  --bg-page: #f7fafc;
  --text-strong: var(--slate-900);
  --text-body: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-inverse: var(--slate-0);
  --accent: var(--teal-700);
  --accent-hover: var(--teal-800);
  --accent-soft: rgba(13, 148, 136, 0.1);
  --lien: var(--blue-700);

  /* --- Le verre -------------------------------------------
     Deux epaisseurs seulement. `--verre` pour les grandes
     plaques posees sur le ciel, `--verre-fort` pour ce qui
     porte du texte long ou un formulaire : au-dela de trois
     niveaux de transparence, l'oeil ne lit plus une hierarchie,
     il lit du desordre. */
  --verre: rgba(255, 255, 255, 0.55);
  --verre-fort: rgba(255, 255, 255, 0.78);
  --verre-creux: rgba(255, 255, 255, 0.34);
  --verre-bord: rgba(15, 23, 42, 0.08);
  --verre-bord-fort: rgba(15, 23, 42, 0.14);
  --verre-rim: rgba(255, 255, 255, 0.92);
  --verre-reflet: linear-gradient(158deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 44%);
  --verre-flou: 28px;
  --verre-sat: 175%;

  /* Le verre sombre : la famille des assistants, et le panneau
     qui reconstitue leur ecran. Les memes quatre couches, mais
     l'encre et le liston sont inverses. */
  --nuit: rgba(12, 26, 48, 0.74);
  --nuit-forte: rgba(9, 20, 38, 0.86);
  --nuit-bord: rgba(148, 197, 255, 0.22);
  --nuit-rim: rgba(191, 219, 254, 0.32);
  --nuit-reflet: linear-gradient(158deg, rgba(191, 219, 254, 0.16) 0%, rgba(191, 219, 254, 0) 46%);
  --sur-nuit: #eaf2ff;
  --sur-nuit-doux: #a8bdd8;

  --ombre-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ombre-md: 0 10px 28px -10px rgba(19, 42, 78, 0.22), 0 2px 6px rgba(19, 42, 78, 0.06);
  --ombre-lg: 0 30px 70px -24px rgba(19, 42, 78, 0.34), 0 6px 16px rgba(19, 42, 78, 0.08);
  --ombre-teal: 0 18px 40px -14px rgba(15, 118, 110, 0.45);

  /* Le ciel. Six taches larges et tres floues, poussees jusqu'en
     bas de la fenetre : c'est ce que le verre a a refracter. */
  --ciel:
    radial-gradient(38% 44% at 10% 4%, rgba(96, 165, 250, 0.52) 0%, transparent 66%),
    radial-gradient(34% 40% at 88% 10%, rgba(45, 212, 191, 0.44) 0%, transparent 68%),
    radial-gradient(30% 36% at 66% 42%, rgba(167, 139, 250, 0.32) 0%, transparent 70%),
    radial-gradient(36% 40% at 14% 62%, rgba(45, 212, 191, 0.34) 0%, transparent 68%),
    radial-gradient(32% 38% at 84% 74%, rgba(96, 165, 250, 0.42) 0%, transparent 70%),
    radial-gradient(40% 42% at 46% 98%, rgba(20, 184, 166, 0.30) 0%, transparent 72%);

  --rayon-sm: 10px;
  --rayon: 16px;
  --rayon-lg: 22px;
  --cadre-max: 1180px;

  --sora: "Sora", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Le sombre n'inverse pas le verre : il le refroidit. Le ciel
   garde ses six taches, plus sourdes ; les plaques deviennent
   une encre translucide au lieu d'un blanc translucide. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-page: #060a14;
    --text-strong: #eef3fb;
    --text-body: #a9b6cc;
    --text-muted: #8494ae;
    --accent: var(--teal-300);
    --accent-hover: var(--teal-200);
    --accent-soft: rgba(45, 212, 191, 0.14);
    --lien: var(--blue-300);

    --verre: rgba(24, 38, 62, 0.56);
    --verre-fort: rgba(18, 30, 52, 0.82);
    --verre-creux: rgba(30, 46, 74, 0.36);
    --verre-bord: rgba(148, 197, 255, 0.14);
    --verre-bord-fort: rgba(148, 197, 255, 0.24);
    --verre-rim: rgba(191, 219, 254, 0.26);
    --verre-reflet: linear-gradient(158deg, rgba(191, 219, 254, 0.14) 0%, rgba(191, 219, 254, 0) 46%);

    --nuit: rgba(9, 18, 34, 0.72);
    --nuit-forte: rgba(6, 13, 26, 0.88);

    --ombre-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ombre-md: 0 10px 28px -10px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
    --ombre-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.4);

    --ciel:
      radial-gradient(38% 44% at 10% 4%, rgba(37, 99, 235, 0.40) 0%, transparent 66%),
      radial-gradient(34% 40% at 88% 10%, rgba(13, 148, 136, 0.34) 0%, transparent 68%),
      radial-gradient(30% 36% at 66% 42%, rgba(109, 40, 217, 0.26) 0%, transparent 70%),
      radial-gradient(36% 40% at 14% 62%, rgba(13, 148, 136, 0.26) 0%, transparent 68%),
      radial-gradient(32% 38% at 84% 74%, rgba(37, 99, 235, 0.32) 0%, transparent 70%),
      radial-gradient(40% 42% at 46% 98%, rgba(15, 118, 110, 0.26) 0%, transparent 72%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-page: #060a14;
  --text-strong: #eef3fb;
  --text-body: #a9b6cc;
  --text-muted: #8494ae;
  --accent: var(--teal-300);
  --accent-hover: var(--teal-200);
  --accent-soft: rgba(45, 212, 191, 0.14);
  --lien: var(--blue-300);

  --verre: rgba(24, 38, 62, 0.56);
  --verre-fort: rgba(18, 30, 52, 0.82);
  --verre-creux: rgba(30, 46, 74, 0.36);
  --verre-bord: rgba(148, 197, 255, 0.14);
  --verre-bord-fort: rgba(148, 197, 255, 0.24);
  --verre-rim: rgba(191, 219, 254, 0.26);
  --verre-reflet: linear-gradient(158deg, rgba(191, 219, 254, 0.14) 0%, rgba(191, 219, 254, 0) 46%);

  --nuit: rgba(9, 18, 34, 0.72);
  --nuit-forte: rgba(6, 13, 26, 0.88);

  --ombre-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ombre-md: 0 10px 28px -10px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
  --ombre-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.75), 0 6px 16px rgba(0, 0, 0, 0.4);

  --ciel:
    radial-gradient(38% 44% at 10% 4%, rgba(37, 99, 235, 0.40) 0%, transparent 66%),
    radial-gradient(34% 40% at 88% 10%, rgba(13, 148, 136, 0.34) 0%, transparent 68%),
    radial-gradient(30% 36% at 66% 42%, rgba(109, 40, 217, 0.26) 0%, transparent 70%),
    radial-gradient(36% 40% at 14% 62%, rgba(13, 148, 136, 0.26) 0%, transparent 68%),
    radial-gradient(32% 38% at 84% 74%, rgba(37, 99, 235, 0.32) 0%, transparent 70%),
    radial-gradient(40% 42% at 46% 98%, rgba(15, 118, 110, 0.26) 0%, transparent 72%);
}

/* --- 2. Socle -------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* La barre collante mesure ~72px : sans cette marge, une ancre
     depose son titre dessous. */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--lien);
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--slate-900);
  color: var(--slate-0);
  padding: 12px 18px;
  font-weight: 600;
  border-radius: 0 0 var(--rayon-sm) 0;
}

.evitement:focus {
  left: 0;
}

/* --- 3. Les deux couches fixes --------------------------- */

/* Le ciel. FIXE, et non haut de N pixels : sur une page de
   plusieurs milliers de pixels, une aurore bornee laisse les
   plaques du bas posees sur du blanc — et du verre pose sur du
   blanc est du blanc. */
.ciel {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--ciel);
  pointer-events: none;
}

/* Le grain casse les bandes de degrade que les six taches
   produisent sur un ecran 8 bits. Tres faible : s'il se voit,
   c'est qu'il est trop fort. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 4. Typographie -------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--sora);
  color: var(--text-strong);
  font-weight: 650;
  letter-spacing: -0.022em;
  margin: 0;
  line-height: 1.14;
  text-wrap: balance;
}

/* `pretty` et non `balance` : sur un titre de plusieurs lignes,
   `balance` egalise les longueurs et finit par poser un mot seul
   sur la derniere. Le plafond est volontairement bas — a 3.9rem,
   le titre du hero passait a quatre lignes dont une d'un seul
   mot dans sa colonne. */
h1 {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.45rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.3vw, 2.7rem);
  letter-spacing: -0.026em;
}

h3 {
  font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 600;
}

h4 {
  font-size: 1.05rem;
  font-weight: 600;
}

h5 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

p {
  margin: 0 0 1.05em;
}

p:last-child {
  margin-bottom: 0;
}

.fort {
  color: var(--text-strong);
  font-weight: 600;
}

/* Le mot mis en avant du titre : un degre de bleu vers le teal,
   pose sur le texte lui-meme. Pas un fond — un fond colore
   derriere un titre de 62px l'ecrase. */
.lueur {
  background: linear-gradient(96deg, var(--blue-600) 0%, var(--teal-500) 62%, var(--teal-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.plomb {
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.2rem);
  line-height: 1.66;
  color: var(--text-body);
  max-width: 62ch;
}

.discret {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.eyebrow .ico {
  width: 14px;
  height: 14px;
}

/* --- 5. Trames ------------------------------------------- */

.cadre {
  width: min(100% - 2.5rem, var(--cadre-max));
  margin-inline: auto;
}

@media (max-width: 560px) {
  .cadre {
    width: min(100% - 1.75rem, var(--cadre-max));
  }
}

.section {
  padding-block: clamp(3.75rem, 2.6rem + 5vw, 7rem);
  position: relative;
}

.section--serree {
  padding-block: clamp(2.75rem, 2rem + 3.2vw, 4.75rem);
}

.saut {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
}

.saut--centre {
  margin-inline: auto;
  text-align: center;
}

.saut .plomb {
  margin-top: 1.1rem;
}

.duo-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3.6vw, 4rem);
  align-items: center;
}

@media (max-width: 940px) {
  .duo-colonnes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Les grilles a une colonne s'ecrivent `minmax(0, 1fr)`, jamais
   `1fr` : un `1fr` a une taille minimale `auto` que la maquette
   gonfle jusqu'a depasser la fenetre — ses lignes en
   `white-space: nowrap` imposent leur largeur entiere. Comme
   `body` masque le debordement, la page ne defile pas : elle se
   fait rogner a droite. */
.grille-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 14px;
}

/* --- 6. Les plaques -------------------------------------- */

/* Quatre couches ENSEMBLE, jamais trois : le fond translucide,
   le `backdrop-filter`, le liston clair du haut (`inset 0 1px
   0`) et le reflet diagonal (`::after`). Retirez le reflet et il
   reste une boite transparente. */
.vitre {
  position: relative;
  background: var(--verre);
  backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(var(--verre-flou)) saturate(var(--verre-sat));
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-md), inset 0 1px 0 var(--verre-rim);
  padding: clamp(1.35rem, 1rem + 1vw, 2rem);
  overflow: hidden;
}

.vitre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--verre-reflet);
  pointer-events: none;
}

/* Tout ce qui est pose dans une plaque doit passer devant son
   reflet, sinon le texte se lit a travers un voile. */
.vitre > * {
  position: relative;
  z-index: 1;
}

.vitre--forte {
  background: var(--verre-fort);
  border-color: var(--verre-bord-fort);
}

.vitre--creuse {
  background: var(--verre-creux);
  box-shadow: var(--ombre-sm), inset 0 1px 0 var(--verre-rim);
}

/* La plaque qui reagit : les grilles de cartes cliquables ou
   parcourues du regard. Le soulevement est de 2px, pas de 8 :
   du verre qui bondit se lit comme un bouton. */
.vitre--vive {
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.vitre--vive:hover {
  transform: translateY(-2px);
  border-color: var(--verre-bord-fort);
  box-shadow: var(--ombre-lg), inset 0 1px 0 var(--verre-rim);
}

/* Le verre sombre : la famille des assistants. Memes quatre
   couches, encre et liston inverses. */
.vitre--nuit {
  background: var(--nuit);
  border-color: var(--nuit-bord);
  box-shadow: var(--ombre-lg), inset 0 1px 0 var(--nuit-rim);
  color: var(--sur-nuit-doux);
}

.vitre--nuit::after {
  background: var(--nuit-reflet);
}

.vitre--nuit h2,
.vitre--nuit h3,
.vitre--nuit h4 {
  color: var(--sur-nuit);
}

.vitre--nuit .fort {
  color: var(--sur-nuit);
}

.vitre--nuit a {
  color: var(--teal-300);
}

/* Le liston d'une plaque sombre est le sien. Sans cette regle,
   `.vitre--vive:hover` lui repose au survol le liston clair des
   plaques claires, et le haut de la carte s'allume d'un trait
   blanc qui n'a rien a y faire. */
.vitre--nuit.vitre--vive:hover {
  border-color: var(--nuit-rim);
  box-shadow: var(--ombre-lg), inset 0 1px 0 var(--nuit-rim);
}

/* Le repli. Sans `backdrop-filter`, un fond a 55 % d'opacite
   laisse lire le ciel a travers le texte : les plaques
   deviennent donc opaques. Le site perd son effet, jamais son
   contenu. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vitre {
    background: color-mix(in srgb, var(--bg-page) 88%, white);
  }

  .vitre--forte {
    background: color-mix(in srgb, var(--bg-page) 94%, white);
  }

  .vitre--nuit {
    background: #0c1a30;
  }

  :root[data-theme="dark"] .vitre,
  :root[data-theme="dark"] .vitre--forte {
    background: #101a2c;
  }
}

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 999px;
  padding: 4px 11px;
}

.etiquette--ocre {
  color: var(--amber-500);
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

/* --- 7. La barre du haut --------------------------------- */

.barre {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
}

.barre[data-colle="oui"] {
  background: var(--verre);
  backdrop-filter: blur(20px) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(20px) saturate(var(--verre-sat));
  border-bottom-color: var(--verre-bord);
  box-shadow: inset 0 1px 0 var(--verre-rim);
}

.barre__inner {
  width: min(100% - 2.5rem, var(--cadre-max));
  margin-inline: auto;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sora);
  font-size: 1.24rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  text-decoration: none;
  flex: none;
}

.marque__signe {
  width: 34px;
  height: 34px;
}

.marque__sub {
  color: var(--accent);
}

.liens {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  margin-left: auto;
}

/* Le `:not(.btn)` est OBLIGATOIRE. Sans lui, ce selecteur (0,1,1)
   bat `.btn--fort` (0,1,0) et repeint en gris le texte blanc du
   bouton « Se connecter » pose sur son degrade. Il devient
   illisible, et nulle part ailleurs que la. */
.liens > a:not(.btn) {
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--text-body);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
}

.liens > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500));
  transition: right 0.22s ease;
}

.liens > a:not(.btn):hover,
.liens > a[aria-current="page"] {
  color: var(--text-strong);
}

.liens > a:not(.btn):hover::after,
.liens > a[aria-current="page"]::after {
  right: 0;
}

.barre__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0.5rem;
}

/* Un seul bouton « Se connecter » a la fois : celui de la barre
   sur grand ecran, celui du menu replie en dessous. Les deux
   selecteurs portent un ancetre, et ce n'est pas du zele :
   `.btn` pose `display: inline-flex` plus bas dans cette
   feuille, et a specificite egale c'est la derniere regle qui
   gagne. Un `.btn--connexion` seul serait sans effet, et le
   bouton resterait affiche a 390px, ou il deborde. */
.barre .liens .btn,
.barre__actions .btn--connexion {
  display: none;
}

.rond {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--verre-bord);
  background: var(--verre);
  backdrop-filter: blur(14px) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(14px) saturate(var(--verre-sat));
  color: var(--text-body);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--verre-rim);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.rond:hover {
  border-color: var(--verre-bord-fort);
  color: var(--text-strong);
}

.burger {
  display: none;
}

.ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.ico-lune {
  display: none;
}

:root[data-theme="dark"] .ico-soleil {
  display: none;
}

:root[data-theme="dark"] .ico-lune {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-soleil {
    display: none;
  }

  :root:not([data-theme="light"]) .ico-lune {
    display: block;
  }
}

@media (max-width: 1000px) {
  .burger {
    display: inline-grid;
  }

  .liens {
    position: fixed;
    inset: 72px 12px auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.65rem 1.15rem 1.35rem;
    background: var(--verre-fort);
    backdrop-filter: blur(24px) saturate(var(--verre-sat));
    -webkit-backdrop-filter: blur(24px) saturate(var(--verre-sat));
    border: 1px solid var(--verre-bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-lg), inset 0 1px 0 var(--verre-rim);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .liens[data-ouvert="oui"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .liens > a:not(.btn) {
    padding: 13px 2px;
    border-bottom: 1px solid var(--verre-bord);
    font-size: 1rem;
  }

  .barre .liens .btn {
    display: inline-flex;
    margin-top: 1rem;
    justify-content: center;
  }
}

@media (min-width: 1001px) {
  .barre__actions .btn--connexion {
    display: inline-flex;
  }
}

/* --- 8. Boutons ------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: none;
}

.btn--fort {
  background: linear-gradient(122deg, var(--teal-700) 0%, var(--teal-600) 55%, var(--blue-600) 130%);
  color: #ffffff;
  box-shadow: var(--ombre-teal), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn--fort:hover {
  box-shadow: 0 22px 46px -14px rgba(15, 118, 110, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* Le bouton en verre : la meme matiere que les plaques, en plus
   mince. */
.btn--verre {
  background: var(--verre-fort);
  backdrop-filter: blur(16px) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(16px) saturate(var(--verre-sat));
  color: var(--text-strong);
  border-color: var(--verre-bord);
  box-shadow: var(--ombre-sm), inset 0 1px 0 var(--verre-rim);
}

.btn--verre:hover {
  border-color: var(--verre-bord-fort);
  box-shadow: var(--ombre-md), inset 0 1px 0 var(--verre-rim);
}

.btn--large {
  padding: 15px 28px;
  font-size: 0.98rem;
}

.btn .ico {
  width: 16px;
  height: 16px;
  stroke-width: 1.9;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.lien-fleche .ico {
  width: 15px;
  height: 15px;
  transition: transform 0.18s ease;
}

.lien-fleche:hover .ico {
  transform: translateX(3px);
}

/* --- 9. Photographies ------------------------------------ */

/* Une photo est une plaque elle aussi : meme rayon, meme liston
   clair, meme ombre. Posee nue sur le ciel, elle serait un
   rectangle opaque au milieu de plaques translucides, et
   casserait la matiere de la page.

   Le liston et le bord sont poses par un `::after` et non par
   `border` : une bordure sur l'element deplacerait l'image d'un
   pixel a l'interieur du cadre et ferait apparaitre un liseré
   clair sur les photos sombres. */
.photo {
  position: relative;
  margin: 0;
}

.photo__cadre {
  position: relative;
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre-lg);
  background: var(--verre-creux);
}

.photo__cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--verre-bord-fort);
  box-shadow: inset 0 1px 0 var(--verre-rim);
  pointer-events: none;
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo--cadree img {
  aspect-ratio: 4 / 3;
}

.photo--haute img {
  aspect-ratio: 3 / 4;
}

.photo--bande img {
  aspect-ratio: 21 / 8;
}

@media (max-width: 700px) {
  .photo--bande img {
    aspect-ratio: 3 / 2;
  }
}

/* La legende ne decrit pas la photo — le lecteur voit ce qu'elle
   montre. Elle dit ce que la section affirme. */
.photo figcaption {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font-size: 0.83rem;
  line-height: 1.58;
  color: var(--text-muted);
  max-width: 48ch;
}

/* Deux colonnes photo/texte, alternees. */
.recit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3.6vw, 4rem);
  align-items: center;
}

.recit + .recit {
  margin-top: clamp(3rem, 2.2rem + 3.4vw, 5rem);
}

.recit--inverse .recit__photo {
  order: 2;
}

@media (max-width: 940px) {
  .recit {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }

  .recit--inverse .recit__photo {
    order: 0;
  }
}

.recit__num {
  display: inline-block;
  font-family: var(--sora);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 0.65rem;
}

.recit__texte h3 {
  margin-bottom: 0.8rem;
}

/* --- 10. Le hero ----------------------------------------- */

.hero {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-bottom: clamp(3rem, 2rem + 4.5vw, 5.5rem);
}

.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (max-width: 980px) {
  .hero__grille {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hero h1 {
  margin-bottom: 1.35rem;
}

.hero .plomb {
  max-width: 34rem;
}

.duo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.9rem;
}

.duo--centre {
  justify-content: center;
}

.hero__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2.1rem;
}

/* Chaque preuve est une petite plaque : c'est ce qui les
   rattache a la matiere du reste plutot que d'en faire trois
   lignes de texte gris. */
.hero__preuve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--text-body);
  background: var(--verre);
  backdrop-filter: blur(14px) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(14px) saturate(var(--verre-sat));
  border: 1px solid var(--verre-bord);
  border-radius: 999px;
  padding: 7px 14px;
  box-shadow: inset 0 1px 0 var(--verre-rim);
}

.hero__preuve .ico {
  width: 14px;
  height: 14px;
  color: var(--accent);
  stroke-width: 2.2;
}

.hero__photo {
  position: relative;
}

.hero__photo img {
  aspect-ratio: 4 / 3.4;
}

/* La vignette posee sur l'angle : elle dit la seule chose que la
   photo ne peut pas montrer. Le selecteur porte `.photo
   figcaption` parce que c'en est un : sans cela les regles de
   legende, plus specifiques, reprennent la main sur la bordure
   et le retrait. */
.photo figcaption.vignette {
  position: absolute;
  left: -1.25rem;
  bottom: -1.5rem;
  width: min(19.5rem, 80%);
  max-width: none;
  margin-top: 0;
  padding: 1.05rem 1.25rem;
  border-left: 0;
  background: var(--verre-fort);
  backdrop-filter: blur(24px) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(24px) saturate(var(--verre-sat));
  border: 1px solid var(--verre-bord-fort);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-lg), inset 0 1px 0 var(--verre-rim);
}

.vignette h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.vignette p {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-body);
}

@media (max-width: 980px) {
  .photo figcaption.vignette {
    position: static;
    width: auto;
    margin-top: 1rem;
  }
}

/* --- 10 bis. Le defile de l'accueil ---------------------- */

/* Trois moments, chacun une photo et l'ecran qui va avec.

   LA REGLE QUI TIENT TOUT CE BLOC : sans script, les trois vues
   se suivent verticalement et sont toutes lisibles. L'empilement
   dans une seule cellule de grille n'est pose que sous `.js` —
   comme l'apparition au defilement (section 26), et pour la meme
   raison : un robot d'indexation et un navigateur sans script
   doivent voir la page entiere.

   Le defile n'est PAS pose sur une plaque. Une plaque de verre
   contenant une photo-plaque et un ecran-plaque ferait trois
   epaisseurs de transparence empilees, et l'oeil n'y lit plus une
   hierarchie (voir l'en-tete de ce fichier). Les vues sont posees
   sur le ciel, comme le hero. */

.defile__piste {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.defile__vue {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3.4vw, 3.5rem);
  align-items: center;
}

/* La bascule est a 1080 px et non a 940 comme ailleurs sur le
   site : c'est la seule grille dont une colonne porte une photo a
   hauteur imposee. Sous 1080, cette colonne devient assez etroite
   pour que le cadre passe en portrait franc, et le recadrage
   coupe alors le medecin — ce qui se corrige en repassant a une
   colonne, ou plus rien ne dicte la hauteur. */
@media (max-width: 1079px) {
  .defile__vue {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }
}

/* L'empilement. `visibility` et non `display: none` : la vue
   cachee continue de compter dans la hauteur de la cellule, donc
   la bande garde la hauteur de la plus haute et la page ne
   sursaute pas au changement. Elle sort en revanche de l'arbre
   d'accessibilite et du parcours au clavier, ce qu'une simple
   `opacity: 0` n'aurait pas fait — trois formulaires de boutons
   invisibles dans la tabulation. */
.js .defile__piste {
  gap: 0;
}

/* LE MOUVEMENT EST UN FONDU AVEC UN LEGER RAPPROCHEMENT, ET
   SURTOUT PAS UN GLISSEMENT LATERAL. Une vue au repos posee a
   `translateX(3%)` deborde de la fenetre : `visibility: hidden`
   la retire de l'oeil et du clavier, jamais du calcul du
   debordement. Mesure a 960 px : 8 px de trop a droite, et comme
   `body` masque le debordement la page ne defile pas, elle se
   fait rogner — le piege deja paye sur la maquette du hero. Un
   `overflow: hidden` sur la piste reglerait le debordement mais
   couperait l'ombre des photos, qui est ce qui les souleve. Une
   reduction d'echelle, elle, ne peut par construction rien faire
   sortir du cadre. */
.js .defile__vue {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.6s;
}

.js .defile__vue[data-actif="oui"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.defile__photo img {
  aspect-ratio: 4 / 3.15;
}

/* En deux colonnes, la photo prend TOUTE la hauteur de la vue au
   lieu d'un rapport fixe. C'est ce qui la rend grande : la
   hauteur de la bande est donnee par la colonne de droite (titre,
   texte, ecran), et une photo en 4/3 posee a cote y flottait au
   milieu de deux bandes de vide.

   LE CADRE EST SORTI DU FLUX (`position: absolute`), et c'est le
   point delicat. Laisse dedans, il se remplit d'une image en
   `height: 100%` dont la hauteur depend de la rangee, laquelle
   depend de son contenu : la boucle se resout en gonflant la
   photo jusqu'a 1,5 fois la colonne de texte, et le medecin sort
   du cadre. Hors du flux, la figure ne pese plus rien dans le
   calcul de la rangee — c'est la colonne de droite qui la fixe,
   seule, et la photo la remplit exactement. Le `min-height` est
   le seul plancher.

   Ce bloc doit rester APRES la regle de rapport ci-dessus : a
   specificite egale, c'est la derniere ecrite qui gagne, et une
   `@media` n'y change rien. */
@media (min-width: 1080px) {
  .defile__vue {
    align-items: stretch;
  }

  .defile__dire {
    align-self: center;
  }

  .defile__photo {
    position: relative;
    min-height: 26rem;
  }

  .defile__photo .photo__cadre {
    position: absolute;
    inset: 0;
  }

  .defile__photo img {
    aspect-ratio: auto;
    height: 100%;
  }
}

/* Le cadre du defile est presque carre et les photos sont des
   paysages en 3/2 : recadrees sur leur centre, deux d'entre elles
   perdent ce qu'elles ont a montrer. Le point de fuite est donc
   pose photo par photo, et c'est la seule facon de le faire — un
   recadrage juste ne se calcule pas, il se regarde.

   La troisieme n'a pas de classe : son centre tombe juste. */
.defile__photo--gauche img {
  object-position: 38% center;
}

.defile__photo--film img {
  object-position: 44% center;
}

@media (max-width: 1079px) {
  .defile__photo img {
    aspect-ratio: 16 / 10;
  }
}

/* Un cran sous un h2 de section : c'est un titre de vue, pas un
   titre de chapitre, et trois d'entre eux se succedent au meme
   endroit de la page. */
.defile__titre {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
}

.defile__texte {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: clamp(0.97rem, 0.93rem + 0.25vw, 1.08rem);
  line-height: 1.62;
  color: var(--text-body);
  max-width: 46ch;
}

.defile__ecran {
  margin-top: clamp(1.3rem, 1.05rem + 1vw, 1.9rem);
}

/* Le pilote n'existe que pour le script. Sans lui, les trois vues
   sont deja toutes a l'ecran : des fleches et des pastilles qui
   ne feraient rien seraient un piege pour le clavier. */
.defile__pilote {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
}

.js .defile__pilote {
  display: flex;
}

.defile__fleche {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: var(--verre);
  backdrop-filter: blur(14px) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(14px) saturate(var(--verre-sat));
  border: 1px solid var(--verre-bord);
  box-shadow: var(--ombre-sm), inset 0 1px 0 var(--verre-rim);
  color: var(--text-body);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.defile__fleche:hover {
  color: var(--accent);
  border-color: var(--verre-bord-fort);
}

.defile__fleche .ico {
  width: 18px;
  height: 18px;
}

.defile__fleche[data-defile="prec"] .ico {
  transform: rotate(180deg);
}

.defile__pastilles {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Le bouton est transparent et ne sert qu'a la cible du doigt :
   une pastille de 10 px se rate. Ce qui se voit est le `<i>`. */
.defile__pastille {
  display: block;
  padding: 11px 7px;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.defile__jauge {
  display: block;
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--verre-bord-fort);
  overflow: hidden;
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease;
}

.defile__pastille[aria-current="true"] .defile__jauge {
  width: 46px;
  background: var(--accent-soft);
}

/* LA JAUGE EST L'HORLOGE, et c'est la seule de tout le defile.
   Le script n'a pas de minuterie a lui : il ecoute la fin de
   cette animation pour avancer. Une pause est donc exacte par
   construction — `animation-play-state` arrete l'affichage et
   l'echeance ensemble, alors qu'un `setTimeout` a cote aurait
   derive a chaque survol. Et sous « moins d'animations » elle ne
   demarre pas : rien ne tourne tout seul, ce qui est le
   comportement demande. */
.defile__jauge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.defile__pastille[aria-current="true"] .defile__jauge::after {
  animation: defile-jauge 6s linear forwards;
}

.defile[data-pause="oui"] .defile__jauge::after {
  animation-play-state: paused;
}

@keyframes defile-jauge {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .defile__vue {
    transition: opacity 0.001s, visibility 0s;
    transform: none;
  }

  .defile__jauge,
  .defile__fleche {
    transition: none;
  }

  .defile__pastille[aria-current="true"] .defile__jauge::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* --- 11. Chiffres ---------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 14px;
}

.chiffre {
  text-align: center;
  padding: 1.5rem 1.1rem 1.6rem;
}

.chiffre__val {
  font-family: var(--sora);
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  line-height: 1;
  font-weight: 650;
  letter-spacing: -0.035em;
  background: linear-gradient(122deg, var(--blue-600), var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: lining-nums tabular-nums;
}

.chiffre__lib {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- 12. Le parcours ------------------------------------- */

.parcours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 14px;
  counter-reset: etape;
}

.etape {
  counter-increment: etape;
  padding-top: 1.7rem;
}

/* Le rang, en gros chiffre pale dans l'angle. C'est lui qui fait
   la sequence — une fleche dessinee entre huit plaques ne
   survivrait pas au passage sur deux colonnes. */
.etape__num {
  position: absolute;
  top: 0.55rem;
  right: 1.05rem;
  z-index: 1;
  font-family: var(--sora);
  font-size: 2.6rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--accent) 16%, transparent);
  font-variant-numeric: lining-nums tabular-nums;
}

.etape__num::before {
  content: counter(etape, decimal-leading-zero);
}

.etape__signe {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.etape__signe .ico {
  width: 19px;
  height: 19px;
}

.etape h3 {
  margin-bottom: 0.55rem;
}

.etape p {
  font-size: 0.94rem;
  margin-bottom: 0.7em;
}

/* La note : le detail qui prouve qu'on a fait le travail. Sur un
   liston teal, elle se lit apres le paragraphe, pas avant. */
.etape__note {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--text-muted);
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  margin-bottom: 0 !important;
}

/* --- 13. Les assistants ---------------------------------- */

.assistants {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 14px;
}

.assistant {
  padding: 1.6rem 1.5rem 1.75rem;
}

.assistant__signe {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.3);
  color: var(--teal-300);
  margin-bottom: 1rem;
}

.assistant__signe .ico {
  width: 19px;
  height: 19px;
}

.assistant__qui {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-300);
  margin-bottom: 0.5rem;
}

.assistant h3 {
  margin-bottom: 0.55rem;
}

.assistant p {
  font-size: 0.91rem;
  line-height: 1.62;
}

/* La regle qui gouverne toute la famille, posee en grand entre
   la promesse et le detail. */
.regle {
  font-family: var(--sora);
  font-size: clamp(1.2rem, 0.95rem + 1.15vw, 1.75rem);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  max-width: 30ch;
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.6rem);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--blue-500), var(--teal-500)) 1;
}

/* Le panneau qui reconstitue l'ecran de l'application. Du verre
   sombre, comme les assistants : c'est la meme famille. */
.panneau-ia {
  padding: 1.3rem 1.4rem 1.45rem;
  font-size: 0.87rem;
}

.panneau-ia__tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0.85rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--nuit-bord);
}

.panneau-ia__tete h4 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-300);
}

.panneau-ia__niveau {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fcd34d;
  border: 1px solid rgba(252, 211, 77, 0.36);
  background: rgba(252, 211, 77, 0.1);
  border-radius: 999px;
  padding: 3px 10px;
}

.panneau-ia__synthese {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--sur-nuit);
  margin-bottom: 1rem;
}

.panneau-ia__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.panneau-ia__points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.5;
  color: var(--sur-nuit-doux);
}

.panneau-ia__sujet {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ec5e8;
  background: rgba(148, 197, 255, 0.1);
  border: 1px solid rgba(148, 197, 255, 0.22);
  border-radius: 999px;
  padding: 3px 9px;
  margin-top: 2px;
  white-space: nowrap;
}

.panneau-ia__sujet--rouge {
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.32);
}

.panneau-ia__pied {
  margin-top: 1.05rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--nuit-bord);
  font-size: 0.76rem;
  color: #8296b4;
}

/* Les verrous, en vis-a-vis du panneau. */
.verrous {
  display: grid;
  gap: 12px;
  margin-top: 1.5rem;
}

.verrou {
  padding: 1.15rem 1.25rem 1.25rem;
}

.verrou h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 650;
  margin-bottom: 0.45rem;
}

.verrou h4 .ico {
  width: 17px;
  height: 17px;
  color: var(--accent);
}

.verrou p {
  font-size: 0.89rem;
  line-height: 1.6;
}

/* --- 14. Modules ----------------------------------------- */

.modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 14px;
}

.module__tete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.85rem;
}

.module__signe {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  flex: none;
}

.module__signe .ico {
  width: 19px;
  height: 19px;
}

.module__corps p {
  font-size: 0.95rem;
}

.module__liste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.module__liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.89rem;
  line-height: 1.58;
  color: var(--text-muted);
}

.module__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
}

/* --- 15. La maquette du tableau de bord ------------------ */

/* Dessinee en HTML et non capturee : elle suit le theme, ne
   floute pas au zoom, et ne perime pas le jour ou un ecran
   change de couleur. Les chiffres sont des exemples. */
.maquette {
  padding: 0;
}

.maq__barre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  background: var(--verre-creux);
  border-bottom: 1px solid var(--verre-bord);
}

.maq__pastilles {
  display: inline-flex;
  gap: 5px;
}

.maq__pastille {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--verre-bord-fort);
}

.maq__url {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maq__corps {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.maq__ligne {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.maq__ligne--duo {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

@media (max-width: 520px) {
  .maq__ligne,
  .maq__ligne--duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.maq__carte {
  background: var(--verre-creux);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-sm);
  padding: 11px 12px;
}

.maq__etiq {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.maq__chiffre {
  font-family: var(--sora);
  font-size: 1.6rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--text-strong);
  margin-top: 5px;
  font-variant-numeric: lining-nums tabular-nums;
}

.maq__chiffre small {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 550;
  color: var(--text-muted);
  margin-left: 5px;
}

.maq__courbe {
  width: 100%;
  height: 62px;
  margin-top: 8px;
  display: block;
}

.maq__aire {
  fill: url(#maq-aire);
}

.maq__trait {
  fill: none;
  stroke: url(#maq-degrade);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.maq__file {
  display: grid;
  gap: 6px;
}

.maq__rang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-body);
}

.maq__jeton {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.6rem;
  font-weight: 700;
  flex: none;
}

.maq__nom {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puce {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 650;
  border-radius: 999px;
  padding: 2px 8px;
  flex: none;
}

.puce--rose {
  color: var(--rose-500);
  background: rgba(244, 63, 94, 0.12);
}

.puce--ambre {
  color: var(--amber-500);
  background: rgba(245, 158, 11, 0.14);
}

.puce--vert {
  color: var(--emerald-600);
  background: rgba(5, 150, 105, 0.13);
}

.puce--bleu {
  color: var(--blue-600);
  background: rgba(37, 99, 235, 0.12);
}

/* --- 16. Le pont clinique / laboratoire ------------------ */

.arguments {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.4rem;
}

.argument {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
}

.argument__signe {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  margin-top: 2px;
}

.argument__signe .ico {
  width: 16px;
  height: 16px;
}

.argument h4 {
  margin-bottom: 0.3rem;
}

.argument p {
  font-size: 0.92rem;
  margin: 0;
}

.pont {
  display: grid;
  gap: 1rem;
}

.pont__cote h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
}

.pont__cote h4 .ico {
  width: 15px;
  height: 15px;
}

.pont__cote ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.pont__cote li {
  font-size: 0.89rem;
  color: var(--text-body);
  padding-left: 1.3rem;
  position: relative;
}

.pont__cote li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--verre-bord-fort);
}

.pont__fleche {
  display: grid;
  place-items: center;
  color: var(--accent);
}

.pont__fleche .ico {
  width: 22px;
  height: 22px;
  transform: rotate(90deg);
}

.pont__legende {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--verre-bord);
}

/* --- 17. Les papiers ------------------------------------- */

.papiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 14px;
}

.papier {
  padding: 1.5rem 1.4rem 1.6rem;
}

/* Cinq filets de longueurs decroissantes. Une icone de document
   dessinerait une page ; ceci evoque du texte, ce qui est plus
   juste. */
.papier__feuille {
  display: grid;
  gap: 4px;
  width: 34px;
  margin-bottom: 1rem;
}

.papier__feuille i {
  height: 2px;
  border-radius: 2px;
  background: var(--verre-bord-fort);
}

.papier__feuille i:nth-child(1) {
  width: 100%;
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500));
}
.papier__feuille i:nth-child(2) { width: 76%; }
.papier__feuille i:nth-child(3) { width: 92%; }
.papier__feuille i:nth-child(4) { width: 60%; }
.papier__feuille i:nth-child(5) { width: 84%; }

.papier h4 {
  margin-bottom: 0.5rem;
}

.papier p {
  font-size: 0.88rem;
  line-height: 1.6;
  margin: 0;
}

/* --- 18. Cartes de confiance ----------------------------- */

.carte__signe {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  margin-bottom: 1rem;
}

.carte__signe .ico {
  width: 19px;
  height: 19px;
}

.carte h3 {
  margin-bottom: 0.55rem;
}

.carte p {
  font-size: 0.91rem;
  margin: 0;
}

/* --- 19. Roles ------------------------------------------- */

.roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 12px;
}

.role {
  padding: 1.25rem 1.3rem 1.35rem;
}

.role__tete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.45rem;
}

.role__signe {
  color: var(--accent);
  display: inline-flex;
}

.role__signe .ico {
  width: 18px;
  height: 18px;
}

.role p {
  font-size: 0.87rem;
  color: var(--text-muted);
  margin: 0;
}

/* --- 20. Questions --------------------------------------- */

.questions {
  display: grid;
  gap: 12px;
  max-width: 54rem;
}

.question {
  padding: 0;
}

.question summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  font-family: var(--sora);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong);
  transition: color 0.15s ease;
}

.question summary::-webkit-details-marker {
  display: none;
}

.question summary:hover {
  color: var(--accent);
}

.question summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.question[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.question > div {
  padding: 0 clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem) 1.3rem;
  max-width: 64ch;
}

.question p {
  font-size: 0.94rem;
}

/* --- 21. Appel final ------------------------------------- */

.appel {
  text-align: center;
  padding: clamp(2.25rem, 1.7rem + 2.6vw, 3.75rem) clamp(1.35rem, 1rem + 2.6vw, 3.5rem);
}

.appel h2 {
  margin-bottom: 0.9rem;
}

.appel .plomb {
  margin-inline: auto;
}

/* --- 22. Tarifs ------------------------------------------ */

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 14px;
  align-items: start;
}

.offre {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.9rem 1.6rem 2rem;
}

/* La colonne mise en avant est plus opaque et porte le liston
   teal : c'est ce qui la designe, pas un bandeau plein qui
   prendrait le pas sur le prix. */
.offre--phare {
  background: var(--verre-fort);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  box-shadow: var(--ombre-lg), inset 0 1px 0 var(--verre-rim);
}

.offre__ruban {
  position: absolute;
  top: 1.35rem;
  right: 1.5rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Les trois prix doivent se trouver sur la meme ligne : c'est la
   seule ligne que le lecteur compare. Une description sur deux
   lignes suffirait a decaler une colonne. */
.offre > .discret {
  min-height: 3em;
}

.offre h3 {
  font-size: 1.35rem;
}

.offre--phare h3 {
  padding-right: 7rem;
}

.offre__prix {
  font-family: var(--sora);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.3rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-strong);
  padding-block: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--verre-bord);
  font-variant-numeric: lining-nums tabular-nums;
}

.offre__prix span {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 550;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0;
}

.offre__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  flex: 1;
}

.offre__liste li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.89rem;
  line-height: 1.55;
}

.offre__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
}

.offre__liste li.hors {
  color: var(--text-muted);
}

.offre__liste li.hors::before {
  background: var(--verre-bord-fort);
}

.offre .btn {
  margin-top: 0.5rem;
}

.tableau-enveloppe {
  padding: 0;
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.89rem;
  min-width: 40rem;
}

.compare caption {
  caption-side: top;
}

.compare th,
.compare td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--verre-bord);
}

.compare thead th {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--verre-creux);
  border-bottom: 1px solid var(--verre-bord-fort);
}

.compare tbody th {
  font-family: var(--sans);
  font-size: 0.89rem;
  font-weight: 550;
  color: var(--text-strong);
}

.compare td {
  text-align: center;
  color: var(--text-muted);
}

.compare thead th:not(:first-child) {
  text-align: center;
}

.compare .oui {
  color: var(--accent);
  font-weight: 700;
}

.compare .non {
  color: var(--verre-bord-fort);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

/* --- 23. Formulaire -------------------------------------- */

.champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 620px) {
  .champs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.champ--large {
  grid-column: 1 / -1;
}

.champ {
  display: grid;
  gap: 6px;
}

.champ label {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.obl {
  color: var(--rose-500);
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--text-strong);
  background: var(--verre-creux);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon-sm);
  padding: 11px 13px;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.champ textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: 1.6;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--verre-fort);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.message {
  margin-top: 1.1rem;
  padding: 12px 14px;
  border-radius: var(--rayon-sm);
  font-size: 0.9rem;
  border: 1px solid;
}

.message--ok {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--text-strong);
}

.message--ko {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.32);
  color: var(--text-strong);
}

.coordonnees {
  display: grid;
  gap: 1.15rem;
}

.coordonnee {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.coordonnee .ico {
  width: 17px;
  height: 17px;
  color: var(--accent);
  margin-top: 4px;
}

.coordonnee h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.coordonnee p,
.coordonnee a {
  font-size: 0.95rem;
  margin: 0;
}

/* --- 24. Prose (confidentialite) ------------------------- */

.prose {
  max-width: 46rem;
  padding: clamp(1.6rem, 1.2rem + 1.8vw, 2.75rem);
}

.prose h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--verre-bord);
}

.prose h2:first-of-type {
  margin-top: 0.75rem;
}

.prose h3 {
  font-size: 1.1rem;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.05em;
  padding-left: 1.15rem;
}

.prose li {
  margin-bottom: 0.5rem;
  line-height: 1.68;
}

.prose dl {
  margin: 0 0 1.05em;
}

.prose dt {
  font-weight: 650;
  color: var(--text-strong);
  margin-top: 1rem;
}

.prose dd {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--verre-bord);
}

.prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--verre-creux);
  border: 1px solid var(--verre-bord);
  border-radius: 6px;
  padding: 1px 5px;
}

.sommaire {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 1.2rem 1.35rem;
  background: var(--verre-creux);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.5rem 1.5rem;
  font-size: 0.89rem;
}

/* --- 25. Pied de page ------------------------------------ */

.pied {
  border-top: 1px solid var(--verre-bord);
  background: var(--verre-creux);
  backdrop-filter: blur(18px) saturate(var(--verre-sat));
  -webkit-backdrop-filter: blur(18px) saturate(var(--verre-sat));
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem) 2rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}

@media (max-width: 860px) {
  .pied__grille {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  }

  .pied__marque {
    grid-column: 1 / -1;
  }
}

.pied__marque p {
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 32ch;
}

.pied ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.pied ul a {
  font-size: 0.89rem;
  color: var(--text-body);
  text-decoration: none;
}

.pied ul a:hover {
  color: var(--accent);
}

.pied__bas {
  margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--verre-bord);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- 26. Apparition au defilement ------------------------ */

/* La classe `js` est posee par le script. Sans lui, rien n'est
   cache : le site entier reste lisible et indexable. */
.js [data-revele] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--revele-delai, 0ms);
}

.js [data-revele].vu {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-revele] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn:hover,
  .vitre--vive:hover {
    transform: none;
  }
}

/* --- 27. Impression -------------------------------------- */

@media print {
  .barre,
  .pied,
  .evitement,
  .ciel,
  .grain,
  .btn,
  .defile__pilote {
    display: none !important;
  }

  /* Imprimee, la page n'a plus de script pour faire tourner le
     defile : les trois vues se suivent, comme sans lui. */
  .js .defile__piste {
    gap: 2rem;
  }

  .js .defile__vue {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .vitre {
    background: #ffffff;
    box-shadow: none;
    backdrop-filter: none;
  }

  .js [data-revele] {
    opacity: 1;
    transform: none;
  }
}