/* Feuille de style du site de présentation (ezparaph.com/presentation).
   Autonome : aucun CDN, aucune police distante. Les visiteurs d'une vitrine
   commerciale n'ont pas à voir leur adresse IP partir chez un tiers.

   Refonte de V1.497 : fond clair, surfaces en verre givré, grands espaces,
   micro-animations. L'ancienne feuille est conservée dans
   archive/vitrine_classique/. Le mode sombre suit le poste du visiteur, ou le
   bouton de l'en-tête (attribut data-theme posé par vitrine.js). */

/* Inter (SIL Open Font License, voir polices/LICENSE-Inter.txt), hébergée
   ici : la pile système rendait Segoe, San Francisco ou DejaVu selon le
   poste, et la marque changeait de visage. Police variable : une graisse
   par fichier suffit de 100 à 900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("polices/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("polices/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Couleurs ------------------------------------------------------------
   Toutes les couleurs passent par des variables : le mode sombre n'a qu'à
   les redéfinir, plus bas. */
:root {
  color-scheme: light;
  --encre: #0d1022;
  --encre-douce: #4a4f6a;
  --encre-tenue: #7d829c;
  --accent: #4f46e5;
  --accent-2: #06b6d4;
  --accent-sombre: #3730a3;
  --accent-voile: rgba(79, 70, 229, 0.08);
  --preuve: #047857;
  --preuve-voile: rgba(5, 150, 105, 0.09);
  --preuve-bord: rgba(5, 150, 105, 0.35);
  --preuve-texte: #065f46;
  --preuve-icone: rgba(5, 150, 105, 0.14);
  --fond: #fafafc;
  --fond-doux: #f2f2f8;
  --verre: rgba(255, 255, 255, 0.62);
  --verre-fort: rgba(255, 255, 255, 0.84);
  --bord: rgba(13, 16, 34, 0.08);
  --bord-fort: rgba(13, 16, 34, 0.15);
  --halo-1: rgba(99, 102, 241, 0.20);
  --halo-2: rgba(16, 185, 129, 0.14);
  --lueur: rgba(79, 70, 229, 0.14);
  --sur-accent: #ffffff;
  --bloc-sombre: #0d1022;
  --sur-sombre: #eef0fb;
  --sur-sombre-doux: rgba(238, 240, 251, 0.7);
  --code: rgba(79, 70, 229, 0.08);
  --voile-clair: rgba(255, 255, 255, 0.75);
  --trait: rgba(13, 16, 34, 0.10);
  --trait-fort: rgba(13, 16, 34, 0.22);
  --pointilles: rgba(13, 16, 34, 0.22);
  --ambre-fond: #fffbeb;
  --ambre-texte: #92400e;
  --ambre-reserve: #78350f;
  --rouge-fond: #fef2f2;
  --rouge-texte: #991b1b;
  --ombre: rgba(15, 23, 42, 0.30);
  --ombre-carte: 0 1px 2px rgba(13, 16, 34, 0.04), 0 12px 32px -14px rgba(13, 16, 34, 0.16);
  --ombre-haute: 0 2px 4px rgba(13, 16, 34, 0.04), 0 28px 60px -20px rgba(49, 46, 129, 0.28);
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --rayon: 20px;
  --rayon-petit: 12px;
  --colonne: 1200px;
  --section: clamp(80px, 10vw, 136px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
/* Les deux blocs sombres portent les mêmes valeurs : le premier suit le
   poste du visiteur, le second le bouton de l'en-tête. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --encre: #eef0fb; --encre-douce: #a3a8c3; --encre-tenue: #737896;
    --accent: #8b87ff; --accent-2: #5ee6d0; --accent-sombre: #c7d2fe; --accent-voile: rgba(139, 135, 255, 0.12);
    --preuve: #34d399; --preuve-voile: rgba(52, 211, 153, 0.10); --preuve-bord: rgba(52, 211, 153, 0.35);
    --preuve-texte: #a7f3d0; --preuve-icone: rgba(52, 211, 153, 0.18);
    --fond: #07080d; --fond-doux: #0d0f18;
    --verre: rgba(255, 255, 255, 0.035); --verre-fort: rgba(16, 18, 30, 0.78);
    --bord: rgba(255, 255, 255, 0.08); --bord-fort: rgba(255, 255, 255, 0.16);
    --halo-1: rgba(99, 102, 241, 0.26); --halo-2: rgba(45, 212, 191, 0.12);
    --lueur: rgba(139, 135, 255, 0.20); --sur-accent: #0b0b1a;
    --bloc-sombre: #12152a; --code: rgba(139, 135, 255, 0.14); --voile-clair: rgba(255, 255, 255, 0.07);
    --trait: rgba(255, 255, 255, 0.10); --trait-fort: rgba(255, 255, 255, 0.2); --pointilles: rgba(255, 255, 255, 0.22);
    --ambre-fond: rgba(245, 158, 11, 0.10); --ambre-texte: #fcd34d; --ambre-reserve: #fde68a;
    --rouge-fond: rgba(239, 68, 68, 0.10); --rouge-texte: #fca5a5;
    --ombre: rgba(0, 0, 0, 0.6);
    --ombre-carte: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -20px rgba(0, 0, 0, 0.6);
    --ombre-haute: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -20px rgba(0, 0, 0, 0.8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --encre: #eef0fb; --encre-douce: #a3a8c3; --encre-tenue: #737896;
  --accent: #8b87ff; --accent-2: #5ee6d0; --accent-sombre: #c7d2fe; --accent-voile: rgba(139, 135, 255, 0.12);
  --preuve: #34d399; --preuve-voile: rgba(52, 211, 153, 0.10); --preuve-bord: rgba(52, 211, 153, 0.35);
  --preuve-texte: #a7f3d0; --preuve-icone: rgba(52, 211, 153, 0.18);
  --fond: #07080d; --fond-doux: #0d0f18;
  --verre: rgba(255, 255, 255, 0.035); --verre-fort: rgba(16, 18, 30, 0.78);
  --bord: rgba(255, 255, 255, 0.08); --bord-fort: rgba(255, 255, 255, 0.16);
  --halo-1: rgba(99, 102, 241, 0.26); --halo-2: rgba(45, 212, 191, 0.12);
  --lueur: rgba(139, 135, 255, 0.20); --sur-accent: #0b0b1a;
  --bloc-sombre: #12152a; --code: rgba(139, 135, 255, 0.14); --voile-clair: rgba(255, 255, 255, 0.07);
  --trait: rgba(255, 255, 255, 0.10); --trait-fort: rgba(255, 255, 255, 0.2); --pointilles: rgba(255, 255, 255, 0.22);
  --ambre-fond: rgba(245, 158, 11, 0.10); --ambre-texte: #fcd34d; --ambre-reserve: #fde68a;
  --rouge-fond: rgba(239, 68, 68, 0.10); --rouge-texte: #fca5a5;
  --ombre: rgba(0, 0, 0, 0.6);
  --ombre-carte: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --ombre-haute: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}

/* --- Base --- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-feature-settings: "cv11", "ss01";
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }
code { font-family: var(--mono); font-size: .88em; }

/* Focus clavier visible partout : la vitrine se parcourt aussi à la tabulation. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* Prose : au-delà de ~75 caractères par ligne, l'œil perd la ligne suivante.
   `:where()` garde une spécificité nulle, pour que .intro et .dossier p gardent
   leur propre largeur. */
:where(.colonne) > p, :where(.colonne) > .pli > p { max-width: 72ch; }

.bande { padding: 0 clamp(16px, 4vw, 32px); }
.colonne { max-width: var(--colonne); margin: 0 auto; }

/* --- En-tête : collant, transparent, flouté dès qu'on défile --- */
.entete {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s;
}
.entete.densifiee {
  background: var(--verre-fort); border-bottom-color: var(--bord);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
}
.entete .colonne {
  position: relative; display: flex; align-items: center; gap: 20px; min-height: 68px;
}
.marque { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
a.marque { color: inherit; text-decoration: none; }
.marque img { width: 30px; height: 30px; display: block; }
.marque-nom span { color: var(--accent); }
/* min-width et overflow : un menu trop long défile en lui-même au lieu
   d'élargir la page (cas sans JavaScript ; sinon il passe en tiroir). */
.menu { display: flex; gap: 2px; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a {
  color: var(--encre-douce); text-decoration: none; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: 10px;
  transition: color .2s, background .2s;
}
.menu a:hover { color: var(--encre); background: var(--accent-voile); }
.entete-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.menu + .entete-actions, .menu + .recherche { margin-left: 0; }
.icone-bouton {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  border-radius: 10px; border: 1px solid var(--bord); background: var(--verre); color: var(--encre-douce);
  transition: color .2s, border-color .2s;
}
.icone-bouton:hover { color: var(--encre); border-color: var(--bord-fort); }
.icone-bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone-bouton[hidden] { display: none; }
.burger { display: none; }
.entete-connexion {
  color: var(--encre-douce); text-decoration: none; white-space: nowrap;
  font-size: 14.5px; font-weight: 500; padding: 8px 10px; border-radius: 10px;
  transition: color .2s, background .2s;
}
.entete-connexion:hover { color: var(--encre); background: var(--accent-voile); }

/* Menu commun : page courante, et actions qui n'existent que dans le tiroir. */
.menu a[aria-current="page"] { color: var(--encre); background: var(--accent-voile); }
.menu .menu-action { display: none; }

/* --- Sur cette page : les sections d'une page, en une ligne --- */
.bande-surcette { padding-block: 0 8px; }
.ouverture .surcette-page { margin-top: 32px; }
.surcette-page { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; }
.surcette-titre { color: var(--encre-tenue); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.surcette-page ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.surcette-page a {
  display: inline-block; padding: 6px 13px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--bord); background: var(--verre); color: var(--encre-douce);
  transition: color .2s, border-color .2s, background .2s;
}
.surcette-page a:hover { color: var(--encre); border-color: var(--accent); background: var(--accent-voile); }

/* --- Boutons --- */
.bouton {
  --x: 0px; --y: 0px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: var(--sur-accent); border: 0; cursor: pointer;
  font: 600 15.5px/1.2 var(--police); letter-spacing: -0.01em; text-decoration: none;
  padding: 14px 22px; border-radius: 14px; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 10px 24px -10px var(--accent);
  transform: translate(var(--x), var(--y));
  transition: transform .35s var(--ease), box-shadow .35s, background .2s;
}
.bouton::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; opacity: 0;
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); filter: blur(14px);
  transition: opacity .35s;
}
.bouton:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 18px 36px -12px var(--accent); }
.bouton:hover::before { opacity: .55; }
.bouton:active { transform: translate(var(--x), var(--y)) scale(.98); }
.bouton .fleche { transition: transform .35s var(--ease); }
.bouton:hover .fleche { transform: translateX(4px); }
.bouton--petit { padding: 10px 16px; font-size: 14px; border-radius: 11px; }
.bouton--verre {
  color: var(--encre); background: var(--verre); border: 1px solid var(--bord-fort); box-shadow: var(--ombre-carte);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bouton--verre::before { display: none; }
.bouton--verre:hover { border-color: var(--accent); box-shadow: var(--ombre-carte); }
.lien-fort {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 18px;
  color: var(--accent); font-size: 15.5px; font-weight: 600; text-decoration: none;
}
.lien-fort:hover { text-decoration: underline; }

/* --- Ouverture des pages secondaires --- */
.ouverture { position: relative; padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); overflow: hidden; }
.ouverture::before {
  content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -300px; border-radius: 50%;
  background: var(--halo-1); filter: blur(90px); pointer-events: none;
}
.ouverture .colonne { position: relative; }
.ouverture h1 {
  font-size: clamp(36px, 5.6vw, 64px); line-height: 1.04; font-weight: 800;
  letter-spacing: -0.045em; margin: 0 0 24px; max-width: 20ch;
}
.ouverture .chapeau {
  font-size: clamp(17px, 1.6vw, 19.5px); color: var(--encre-douce);
  max-width: 62ch; margin: 0 0 32px;
}
.ouverture-secondaire h1 { max-width: 24ch; }
.etiquette {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  background: var(--verre); color: var(--accent); border: 1px solid var(--bord);
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* --- Sections ---
   `section.bande` et non `section` : toutes les sections portent aussi .bande,
   dont le padding latéral (une classe, donc plus spécifique qu'un nom
   d'élément) remettait la marge verticale à zéro. */
section.bande { padding-block: var(--section); position: relative; }
section.bande + section.bande { padding-top: 0; }
section.bande.verificateur + section.bande, section.bande.dossier + section.bande, section.bande.fond-doux + section.bande { padding-top: var(--section); }
/* Une section sur fond teinté garde sa marge haute, sinon le texte touche le bord du fond. */
section.bande.verificateur, section.bande.dossier, section.bande.fond-doux { padding-top: var(--section); }
section h2 {
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; font-weight: 800;
  letter-spacing: -0.04em; margin: 0 0 18px; max-width: 22ch;
}
section .intro {
  color: var(--encre-douce); font-size: clamp(16.5px, 1.5vw, 18.5px);
  max-width: 64ch; margin: 0 0 44px;
}
.surtitre {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
}
.surtitre::before { content: ""; width: 18px; height: 1.5px; border-radius: 2px; background: currentColor; }
.fond-doux { background: var(--fond-doux); }

/* --- Cartes en verre ---
   La lueur suit la souris (variables --mx et --my posées par vitrine.js). */
.carte, .tuile, .passerelle, .offre-colonne {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden;
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--verre); box-shadow: var(--ombre-carte);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.carte::before, .tuile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx) var(--my), var(--lueur), transparent 45%);
}
.carte > *, .tuile > * { position: relative; }
.carte:hover, .tuile:hover { transform: translateY(-5px); box-shadow: var(--ombre-haute); border-color: var(--bord-fort); }
.carte:hover::before, .tuile:hover::before { opacity: 1; }

.grille {
  display: grid; gap: 18px;
  /* `min(..., 100%)` est indispensable : sans lui, auto-fit pose quand même une
     colonne de 290px dans un conteneur plus étroit, et la page entière défile
     latéralement sur téléphone. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
/* Quatre cartes en deux lignes de deux, plutôt que trois et une orpheline. */
.grille--quatre { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.carte { padding: 26px; }
.carte h3 { margin: 0 0 10px; font-size: 18.5px; letter-spacing: -0.02em; }
.carte h4 { margin: 0 0 8px; font-size: 16.5px; letter-spacing: -0.01em; }
.carte p { margin: 0; color: var(--encre-douce); font-size: 15.5px; }
.carte p + p { margin-top: 10px; }
.carte ul { margin: 0 0 10px; padding-left: 18px; color: var(--encre-douce); font-size: 15.5px; }
.carte li { margin-bottom: 6px; }
.carte code, .dossier code, .preuve code, .tableau code {
  background: var(--code); padding: 1px 6px; border-radius: 5px; font-size: 13.5px;
}

/* --- Copies d'écran et vidéos ---
   Texte et image côte à côte, en alternance d'un écran à l'autre. Le ratio
   de chaque image est posé par le gabarit, d'après son recadrage. */
.ecran {
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: center;
  grid-template-columns: 0.8fr 1.4fr;
  margin: 0 0 clamp(64px, 8vw, 112px);
}
.ecran:last-child { margin-bottom: 0; }
.ecran > * { min-width: 0; }   /* sans quoi une image large élargit sa colonne */
.ecran:nth-of-type(even) .ecran-texte { order: 2; }
.ecran:nth-of-type(even) { grid-template-columns: 1.4fr 0.8fr; }
.ecran h3 { margin: 0 0 14px; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.03em; }
.ecran p { margin: 0 0 14px; color: var(--encre-douce); }
.ecran .ecran-legende {
  font-size: 14.5px; color: var(--encre); margin: 18px 0 0;
  padding: 12px 16px; border-radius: var(--rayon-petit); background: var(--accent-voile);
}
.ecran figure { margin: 0; }
.ecran figure a { display: block; cursor: zoom-in; }
.ecran img, .ecran video {
  width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover; object-position: top left;
  border: 1px solid var(--bord-fort); border-radius: 16px;
  box-shadow: var(--ombre-haute);
}
/* Vidéos de démonstration : la place est réservée avant le chargement
   (1280 × 900), qui n'a lieu qu'au clic (preload="none"). */
.ecran video { aspect-ratio: 1280 / 900; object-fit: contain; background: #0f172a; }
.ecran video:fullscreen { border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.ecran video:-webkit-full-screen { border: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.commande-video {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
/* Page d'accueil : la capture dans une fenêtre, légèrement inclinée. */
.fenetre {
  margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--bord-fort);
  background: var(--verre-fort); box-shadow: var(--ombre-haute);
  transform: perspective(1400px) rotateY(var(--ry, -4deg)) rotateX(2deg);
  transition: transform .8s var(--ease);
}
.ecran:nth-of-type(even) .fenetre { --ry: 4deg; }
.fenetre:hover { transform: perspective(1400px) translateY(-4px); }
.fenetre-barre { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--bord); }
.fenetre-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--bord-fort); }
.ecran .fenetre img { border: 0; border-radius: 0; box-shadow: none; }

/* --- Sous-rubriques d'une section --- */
.rubrique {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  margin: 48px 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--bord);
}
.grille + .rubrique { margin-top: 56px; }

/* --- Preuve : bloc qui affirme --- */
.preuve {
  border: 1px solid var(--preuve-bord); border-radius: var(--rayon);
  background: linear-gradient(135deg, var(--preuve-voile), transparent), var(--verre);
  padding: 26px 28px; margin-top: 24px;
}
.preuve h3 { margin: 0 0 10px; color: var(--preuve); font-size: 19px; letter-spacing: -0.02em; }
.preuve p { margin: 0 0 10px; color: var(--encre-douce); font-size: 15.5px; }
.preuve p:last-child { margin-bottom: 0; }

/* --- Encadré explicatif (texte long, sous-titres) ---
   Distinct du bloc .preuve, qui affirme ; celui-ci explique. */
.encadre {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--verre); padding: 26px 28px; margin-top: 18px;
}
.encadre h4 { margin: 24px 0 8px; font-size: 16.5px; color: var(--encre); letter-spacing: -0.02em; }
.encadre h4:first-child { margin-top: 0; }
.encadre p { margin: 0 0 12px; color: var(--encre-douce); font-size: 15.5px; }
.encadre p:last-child { margin-bottom: 0; }
.encadre strong { color: var(--encre); }

/* --- Tableau --- */
.tableau { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tableau th, .tableau td {
  text-align: left; padding: 18px 22px;
  border-bottom: 1px solid var(--bord); vertical-align: top;
}
.tableau tr:last-child td { border-bottom: 0; }
.tableau th { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-tenue); }
.tableau td { color: var(--encre-douce); }
.tableau td strong { color: var(--encre); font-weight: 650; }
.tableau tbody tr { transition: background .25s; }
.tableau tbody tr:hover { background: var(--accent-voile); }
/* Le tableau vit dans un cadre en verre, qui défile lui-même au besoin au
   lieu d'emmener la page avec lui. */
.tableau-cadre, .tableau-defilant {
  overflow-x: auto; border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--verre); box-shadow: var(--ombre-carte);
}
.tableau-defilant .tableau, .tableau-cadre .tableau { min-width: 560px; }

/* --- Listes et pages-dossiers --- */
.dossier { background: var(--fond-doux); }
.dossier p { max-width: 74ch; color: var(--encre-douce); }
.dossier p strong { color: var(--encre); }
.dossier .rubrique:first-of-type { margin-top: 28px; }
.liste { max-width: 74ch; color: var(--encre-douce); padding-left: 22px; }
.liste li { margin-bottom: 10px; }
.liste li strong { color: var(--encre); }

/* --- Texte long replié ---
   Le lecteur pressé lit la phrase qui résume ; le juriste déplie. */
.pli {
  margin: 8px 0 22px; border: 1px solid var(--bord); border-radius: 16px;
  background: var(--verre); overflow: hidden;
}
.pli > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer;
  list-style: none; padding: 16px 20px; color: var(--encre); font-weight: 600; font-size: 15.5px;
}
.pli > summary::-webkit-details-marker { display: none; }
.pli > summary::after { content: "+"; flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--accent); transition: transform .3s var(--ease); }
.pli[open] > summary::after { transform: rotate(45deg); }
.pli > :not(summary) { margin-inline: 20px; }
.pli > :last-child:not(summary) { margin-bottom: 20px; }
.pli > p { color: var(--encre-douce); }
.pli > .encadre { margin-inline: 12px; margin-top: 0; }

/* --- Passerelle vers une autre page --- */
.passerelle {
  padding: clamp(26px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
}
.passerelle h2 { margin: 0 0 10px; font-size: clamp(24px, 2.8vw, 32px); }
.passerelle p { margin: 0; color: var(--encre-douce); max-width: 58ch; }
.passerelle > div { min-width: 0; flex: 1 1 340px; }

/* --- Sommaire en tuiles (page Intégration) --- */
.sommaire {
  display: grid; gap: 12px; margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.sommaire a {
  display: block; text-decoration: none; padding: 18px 20px;
  border: 1px solid var(--bord); border-radius: 16px; background: var(--verre);
  transition: border-color .25s, transform .35s var(--ease), box-shadow .35s;
}
.sommaire a:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.sommaire strong { display: block; color: var(--encre); font-size: 15.5px; line-height: 1.35; }
.sommaire span { display: block; margin-top: 6px; color: var(--encre-douce); font-size: 13.5px; line-height: 1.45; }

/* --- Contact --- */
/* Le bloc de contact suit une section qui porte déjà sa marge basse. */
#contact.bande { padding-block: 0; }
.contact {
  position: relative; overflow: hidden;
  background: var(--bloc-sombre); color: var(--sur-sombre);
  border-radius: 32px; padding: clamp(32px, 6vw, 80px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
.contact::before {
  content: ""; position: absolute; width: 640px; height: 640px; right: -220px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent), transparent 65%); opacity: .45; pointer-events: none;
}
.contact > * { position: relative; min-width: 0; }
.contact h2 { color: var(--sur-sombre); margin: 0 0 14px; }
.contact p { margin: 0; color: var(--sur-sombre-doux); max-width: 50ch; font-size: 17px; }
.contact-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 360px; }
.contact .bouton { background: var(--sur-sombre); color: #0d1022; box-shadow: none; }
.bouton--whatsapp {
  background: transparent; color: #fff; border: 1.5px solid #25d366;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.contact .bouton--whatsapp { background: transparent; color: var(--sur-sombre); white-space: nowrap; padding-inline: 14px; }
.bouton--whatsapp::before { display: none; }
.bouton--whatsapp:hover { background: #128c4a; }
.contact .bouton--whatsapp:hover { background: #128c4a; color: #fff; }
.icone-whatsapp { width: 20px; height: 20px; fill: none; stroke: #25d366; stroke-width: 1.8; stroke-linejoin: round; }
.bouton--whatsapp:hover .icone-whatsapp { stroke: #fff; }
.contact .contact-note { font-size: 13px; color: var(--sur-sombre-doux); opacity: .8; max-width: none; }

/* --- Pied --- */
.pied {
  border-top: 1px solid var(--bord); margin-top: var(--section); padding-block: 32px 44px;
  color: var(--encre-tenue); font-size: 14px;
}
.pied .colonne { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.pied a { color: var(--encre-douce); }
.pied-pages { display: flex; flex-wrap: wrap; gap: 6px 20px; flex-basis: 100%; order: -1; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--bord); }
.pied-pages a { text-decoration: none; font-weight: 500; }
.pied-pages a:hover { color: var(--accent); }

/* --- Vérificateur en direct ---
   Seule partie interactive du site : elle a droit à un panneau distinct. */
.verificateur { background: var(--fond-doux); }
.verificateur .intro { max-width: 72ch; }
.vzone {
  border: 2px dashed var(--pointilles); border-radius: 22px;
  background: var(--fond); padding: 42px 24px; text-align: center; cursor: pointer;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.vzone:hover, .vzone:focus-visible, .vzone--active {
  border-color: var(--accent); outline: none; transform: translateY(-3px); box-shadow: 0 0 0 8px var(--accent-voile);
}
.vzone-icone {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center;
  background: var(--accent-voile); color: var(--accent); font-size: 26px; line-height: 1;
}
.vzone-titre { margin: 16px 0 4px; font-weight: 700; font-size: 17px; }
.vzone-aide { margin: 0; color: var(--encre-tenue); font-size: 14.5px; }

.vsortie { margin-top: 20px; display: grid; gap: 14px; }
.vbloc { background: var(--fond); border: 1px solid var(--bord); border-radius: 16px; padding: 20px; }
.vetape { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--preuve); }
.vattente { margin: 0; color: var(--encre-douce); font-size: 15.5px; }
.vempreinte { background: #0d1022; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.vempreinte:last-child { margin-bottom: 0; }
.vempreinte-titre { display: block; margin-bottom: 6px; color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.vempreinte-valeur {
  display: block; color: #a5f3fc; word-break: break-all;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7; letter-spacing: 0.04em;
}
/* Les caractères qui diffèrent de l'empreinte d'origine. */
.vchange { color: #fff; background: #dc2626; border-radius: 3px; padding: 1px 1px; }
.vverdict { border: 1px solid var(--bord); border-left-width: 4px; border-radius: 16px; padding: 20px; background: var(--fond); }
.vverdict h3 { margin: 0 0 6px; font-size: 17.5px; }
.vverdict p { margin: 0; color: var(--encre-douce); font-size: 15.5px; }
.vverdict--emeraude { border-left-color: var(--preuve); background: var(--preuve-voile); }
.vverdict--emeraude h3 { color: var(--preuve); }
.vverdict--ambre { border-left-color: #b45309; background: var(--ambre-fond); }
.vverdict--ambre h3 { color: var(--ambre-texte); }
.vverdict--rouge { border-left-color: #dc2626; background: var(--rouge-fond); }
.vverdict--rouge h3 { color: var(--rouge-texte); }
.vverdict--ardoise { border-left-color: var(--encre-tenue); }
.vdetails { margin: 16px 0 0; display: grid; gap: 8px; }
.vligne { display: flex; gap: 14px; flex-wrap: wrap; }
.vligne dt {
  margin: 0; min-width: 150px; flex-shrink: 0; padding-top: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-tenue);
}
.vligne dd { margin: 0; font-size: 14.5px; color: var(--encre); word-break: break-all; font-family: var(--mono); }
.vreserve { margin: 14px 0 0; padding: 12px 14px; font-size: 14.5px; background: var(--ambre-fond); border-radius: 10px; color: var(--ambre-reserve); }
.vinvite { margin: 0 0 16px; color: var(--encre-douce); font-size: 15.5px; }
.bouton-octet { font-family: inherit; }
.bouton-octet:disabled { background: var(--encre-tenue); cursor: default; box-shadow: none; }
.vcomparaison { border-color: #fca5a5; }
.vconclusion { margin: 14px 0 0; font-size: 15.5px; color: var(--encre-douce); }
.vconclusion strong { color: var(--encre); }
.vnote { margin: 20px 0 0; color: var(--encre-tenue); font-size: 14.5px; max-width: 76ch; }

/* --- Arbre d'empreintes (page EBSI) ---
   Le chemin fourni par le dossier de preuve est en vert (couleur de la
   preuve) ; ce que la personne qui vérifie recalcule, en couleur d'accent. */
.figure-arbre { margin: 18px 0 20px; max-width: 620px; }
.arbre { width: 100%; height: auto; display: block; }
.arbre-lien { stroke: var(--trait-fort); stroke-width: 2; }
.arbre-lien--calcule { stroke: var(--accent); stroke-width: 2.5; }
.arbre-noeud rect { fill: var(--fond); stroke: var(--trait-fort); stroke-width: 2; }
.arbre-noeud text, .arbre-doc text { font: 600 14px var(--police); fill: var(--encre-douce); }
.arbre-noeud--chemin rect { fill: var(--preuve-voile); stroke: var(--preuve); }
.arbre-noeud--chemin text { fill: var(--preuve-texte); }
.arbre-noeud--calcule rect { fill: var(--accent-voile); stroke: var(--accent); }
.arbre-noeud--calcule text { fill: var(--accent-sombre); }
.arbre-noeud--racine rect { fill: var(--accent); stroke: var(--accent); }
.arbre-noeud--racine text { fill: var(--fond); }
.arbre-doc rect { fill: var(--fond); stroke: var(--trait-fort); stroke-width: 2; }
.arbre-doc--vise rect { stroke: var(--accent); stroke-width: 3; }
.arbre-doc--vise text { fill: var(--accent-sombre); }
.figure-arbre figcaption {
  margin-top: 10px; font-size: 14px; color: var(--encre-douce);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
}
.arbre-legende { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 2px solid; }
.arbre-legende--chemin { background: var(--preuve-voile); border-color: var(--preuve); }
.arbre-legende--calcule { background: var(--accent-voile); border-color: var(--accent); margin-left: 8px; }

/* --- Recherche dans le site ---
   Le bouton se glisse dans l'en-tête, le panneau s'ouvre dessous. Masqués sans
   JavaScript (attribut hidden). */
.invisible {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.recherche { flex-shrink: 0; }
.recherche[hidden], .recherche-panneau[hidden] { display: none; }
.recherche-bouton {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; height: 38px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--encre-douce);
  background: var(--verre); border: 1px solid var(--bord); border-radius: 10px; padding: 0 12px;
}
.recherche-bouton:hover, .recherche-bouton[aria-expanded="true"] { color: var(--encre); border-color: var(--bord-fort); }
.recherche-bouton svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.recherche-panneau {
  position: absolute; right: 0; top: 100%; z-index: 40;
  width: min(36rem, 100%); max-height: 72vh; overflow-y: auto;
  background: var(--verre-fort); border: 1px solid var(--bord); border-radius: 18px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: var(--ombre-haute); padding: 14px;
}
.recherche-panneau input[type="search"] {
  width: 100%; font: inherit; font-size: 16px;
  color: var(--encre); background: var(--fond);
  border: 1px solid var(--bord); border-radius: 12px; padding: 11px 14px;
}
.recherche-panneau input[type="search"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.recherche-etat { margin: 10px 2px 4px; font-size: 14px; color: var(--encre-tenue); }
.recherche-resultats { list-style: none; margin: 0; padding: 0; }
.recherche-resultats a { display: block; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: var(--encre); }
.recherche-resultats a:hover, .recherche-resultats a:focus-visible { background: var(--accent-voile); }
.recherche-titre { display: flex; justify-content: space-between; gap: 12px; font-weight: 650; font-size: 15.5px; }
.recherche-page {
  flex-shrink: 0; align-self: flex-start; font-size: 12px; font-weight: 600;
  color: var(--accent); background: var(--accent-voile); border-radius: 999px; padding: 2px 9px;
}
.recherche-extrait { display: block; margin-top: 3px; font-size: 14px; color: var(--encre-douce); line-height: 1.5; }
.recherche-resultats mark { background: var(--accent-voile); color: inherit; border-radius: 3px; padding: 0 1px; font-weight: 650; }

/* ==========================================================================
   Page d'accueil
   ========================================================================== */

/* --- Halos de fond --- */
.halos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.halos span { position: absolute; border-radius: 50%; filter: blur(80px); }
.halos span:nth-child(1) { width: 620px; height: 620px; background: var(--halo-1); top: -220px; right: -120px; }
.halos span:nth-child(2) { width: 460px; height: 460px; background: var(--halo-2); top: 180px; left: -180px; animation-delay: -8s; }
@keyframes derive { to { transform: translate(-60px, 50px) scale(1.08); } }
.trame {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .6;
  background-image: radial-gradient(var(--bord-fort) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* --- Hero asymétrique --- */
.hero { position: relative; padding-block: clamp(40px, 6vw, 80px) clamp(36px, 5vw, 64px); }
.hero-grille { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-grille > * { min-width: 0; }
.hero .etiquette { margin-bottom: 0; }
.hero h1 { font-size: clamp(40px, 6.2vw, 78px); font-weight: 800; letter-spacing: -0.055em; line-height: .98; margin: 24px 0 0; }
.hero h1 span { display: block; }
.hero h1 .decale {
  padding-left: clamp(0px, 7vw, 110px); margin-top: .06em;
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .chapeau { margin: 26px 0 0; color: var(--encre-douce); font-size: clamp(17px, 1.6vw, 19.5px); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 10px; margin-top: 32px; }

/* L'illustration : un acte, son circuit franchi, et le sceau qui l'atteste.
   En HTML et CSS : aucune image à charger, et elle suit le thème. */
.scene { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 100%; }
.feuille {
  position: absolute; inset: 4% 22% 8% 0; border-radius: 20px; padding: 10% 10%;
  background: var(--verre-fort); border: 1px solid var(--bord); box-shadow: var(--ombre-haute);
  transform: rotate(-3deg);
}
.feuille i { display: block; height: 7px; border-radius: 4px; background: var(--trait); margin-bottom: 11px; }
.feuille i.fort { height: 10px; background: var(--trait-fort); margin-bottom: 20px; }
.paraphe { position: absolute; left: 34%; bottom: 13%; width: 42%; overflow: visible; }
.paraphe path {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 260; stroke-dashoffset: 260; animation: trace 1.6s 1.9s cubic-bezier(.6, .1, .3, 1) forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes flotte { 50% { transform: rotate(-3deg) translateY(-8px); } }
.circuit {
  position: absolute; right: 0; top: 42%; width: 62%; border-radius: 18px; padding: 16px 20px;
  background: var(--fond); border: 1px solid var(--bord); box-shadow: var(--ombre-haute);

}
@keyframes flotte2 { 50% { transform: translateY(6px); } }
/* Le flottement de l'illustration et la dérive des halos ne jouent qu'avec
   une souris. Sur iPhone, une animation sans fin sur des calques flous
   (halos, et autrefois un verre dépoli sous l'illustration) se recompose à
   chaque image, et l'illustration tremblotait. Sur ces écrans, elle reste
   immobile une fois posée ; le tracé du paraphe et le sceau s'animent
   toujours, une seule fois. */
@media (hover: hover) and (pointer: fine) {
  .halos span { animation: derive 22s ease-in-out infinite alternate; }
  .feuille { animation: flotte 9s ease-in-out infinite; }
  .circuit { animation: flotte2 8s -2s ease-in-out infinite; }
}
.etape { display: flex; align-items: center; gap: 12px; position: relative; padding-block: 8px; font-size: 14.5px; font-weight: 600; }
.etape + .etape::before { content: ""; position: absolute; left: 11px; top: -8px; height: 14px; width: 2px; background: var(--bord-fort); }
.coche {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--bord-fort); background: var(--fond);
  animation: valide .45s var(--ease) forwards; animation-delay: var(--d);
}
.coche svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: apparait .3s forwards; animation-delay: var(--d); }
.etape--preuve { color: var(--preuve); }
.etape--preuve .coche { animation-name: valide-preuve; }
@keyframes valide { to { background: var(--accent); border-color: var(--accent); } }
@keyframes valide-preuve { to { background: var(--preuve); border-color: var(--preuve); } }
@keyframes apparait { to { opacity: 1; } }
.sceau {
  position: absolute; right: 6%; top: 2%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: var(--preuve);
  background: radial-gradient(circle, var(--preuve-voile) 55%, transparent 56%);
  border: 2px dashed var(--preuve); opacity: 0; transform: scale(1.6) rotate(-25deg);
  animation: pose .7s 3.4s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.sceau span { position: absolute; inset: 9%; border-radius: 50%; border: 1.5px solid var(--preuve); opacity: .5; }
.sceau svg { width: 42%; height: 42%; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pose { to { opacity: 1; transform: scale(1) rotate(-8deg); } }

/* --- Repères : une ligne discrète, centrée --- */
.reperes {
  list-style: none; margin: 0 auto; padding: 0 0 8px; position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
  color: var(--encre-tenue); font-size: 14px; font-weight: 500;
}
.reperes li { display: inline-flex; align-items: center; gap: 8px; padding-inline: 22px; }
.reperes li + li { border-left: 1px solid var(--bord-fort); }
.reperes li::before {
  content: ""; flex: none; width: 14px; height: 14px;
  background: var(--preuve);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* La ligne de repères tient lieu de séparation : la section suivante n'a
   pas besoin de toute sa marge haute. */
.bande-reperes + section.bande { padding-top: clamp(56px, 7vw, 96px); }

/* --- Grille Bento des fonctions --- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tuile { padding: 30px; display: flex; flex-direction: column; gap: 14px; min-width: 0; grid-column: span 2; }
.tuile h3 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.tuile p { margin: 0; color: var(--encre-douce); font-size: 15.5px; }
.tuile ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.tuile li { position: relative; padding-left: 22px; font-size: 15px; color: var(--encre-douce); line-height: 1.55; }
.tuile li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); opacity: .55; }
.tuile li strong { color: var(--encre); font-weight: 600; }
.tuile .icone {
  width: 44px; height: 44px; padding: 11px; flex-shrink: 0; border-radius: 12px;
  background: var(--accent-voile); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tuile--preuve { background: linear-gradient(160deg, var(--preuve-voile), transparent 60%), var(--verre); border-color: var(--preuve-bord); }
.tuile--preuve .icone { background: var(--preuve-icone); stroke: var(--preuve); }
.tuile--preuve li::before { background: var(--preuve); }
.tuile--preuve h3 { color: var(--preuve); }
.contenu-dossier {
  margin-top: auto; border-radius: 16px; border: 1px solid var(--bord); background: var(--fond);
  padding: 16px; display: grid; gap: 8px; font-size: 13.5px; color: var(--encre-douce);
}
.contenu-dossier span { display: flex; align-items: center; gap: 10px; padding-left: 18px; }
.contenu-dossier span::before { content: ""; width: 13px; height: 16px; border-radius: 3px; border: 1.5px solid var(--preuve); flex: none; }
.contenu-dossier span:first-child { padding-left: 0; color: var(--encre); font-weight: 600; font-family: var(--mono); font-size: 12.5px; }
.contenu-dossier span:first-child::before { background: var(--preuve); }

/* --- Deux passerelles côte à côte --- */
.bloc-passerelles { padding-bottom: var(--section); }
.passerelles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 18px; }
.passerelles .passerelle { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.passerelles .passerelle .bouton { margin-top: auto; }
.passerelles .passerelle > div { flex: none; }

/* --- La preuve : frise qui se dessine au défilement --- */
.preuve-grille { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 6vw, 88px); align-items: start; }
.preuve-grille > * { min-width: 0; }
.frise { list-style: none; margin: 0; padding: 0; position: sticky; top: 100px; display: grid; gap: 26px; }
.frise::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--bord-fort); }
.frise::after {
  content: ""; position: absolute; left: 21px; top: 10px; width: 2px; height: calc((100% - 20px) * var(--p, 0));
  background: linear-gradient(var(--accent), var(--preuve));
}
.frise li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; position: relative; z-index: 1; }
.frise .rond {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--fond);
  border: 2px solid var(--bord-fort); font: 700 14px/1 var(--mono); color: var(--encre-tenue); transition: all .4s;
}
.frise li.atteint .rond { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px var(--accent-voile); }
.frise li.atteint:last-child .rond { border-color: var(--preuve); color: var(--preuve); box-shadow: 0 0 0 6px var(--preuve-voile); }
.frise strong { display: block; margin-top: 10px; font-size: 17px; letter-spacing: -0.02em; }
.frise span { display: block; color: var(--encre-douce); font-size: 15px; margin-top: 2px; }
.texte-preuve > p { color: var(--encre-douce); }
.texte-preuve > p strong { color: var(--encre); }
.texte-preuve .rubrique:first-child { margin-top: 0; }

/* --- Vérificateur de la page d'accueil : grand panneau en verre --- */
.verif {
  position: relative; overflow: hidden; border-radius: 32px; padding: clamp(26px, 6vw, 72px);
  background: var(--verre); border: 1px solid var(--bord); box-shadow: var(--ombre-haute);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start;
}
.verif > div:not(.halos) { position: relative; z-index: 1; min-width: 0; }
.verif .halos span:nth-child(1) { width: 420px; height: 420px; top: -160px; right: -160px; }
.verif .halos span:nth-child(2) { width: 320px; height: 320px; top: auto; bottom: -160px; left: -100px; }
.verif .intro { margin-bottom: 16px; }

/* --- Offre : communauté et pro --- */
.offre { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.offre-colonne { padding: clamp(26px, 4vw, 40px); }
.offre-colonne--communaute { border: 1.5px solid var(--accent); background: linear-gradient(170deg, var(--accent-voile), transparent 50%), var(--verre); }
.offre-colonne h3 {
  display: inline-block; margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--encre-douce); background: var(--fond-doux); border: 1px solid var(--bord); padding: 5px 11px; border-radius: 999px;
}
.offre-colonne--communaute h3 { color: var(--sur-accent); background: var(--accent); border-color: var(--accent); }
.offre-prix { margin: 0 0 20px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.offre-colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--encre-douce); font-size: 15.5px; }
.offre-colonne li { position: relative; padding-left: 26px; }
.offre-colonne li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.offre-colonne li strong { color: var(--encre); }
.offre-note { margin: 22px 0 0; color: var(--encre-douce); font-size: 15px; max-width: 80ch; }

/* --- Libre, et vérifiable --- */
.libre { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: end; }
.libre > * { min-width: 0; }
.libre .intro { margin-bottom: 0; }
.libre p { color: var(--encre-douce); }

/* --- Apparitions au défilement ---
   Seulement ce qui est sous la ligne de flottaison au chargement (vitrine.js
   pose .js-anime sur la racine) : la page reste complète sans JavaScript. */
.js-anime .revele { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--delai, 0s); }
.js-anime .revele.vu { opacity: 1; transform: none; }

/* --- Écrans moyens : menu en tiroir --- */
/* --- Menu en tiroir ---
   vitrine.js pose .replie sur l'en-tête dès que ses liens ne tiennent plus
   sur la ligne, quelle que soit la page (certaines ont dix entrées), et
   sous 1080 px dans tous les cas. Sans JavaScript, voir plus bas. */
.entete.replie .burger { display: grid; }
.entete.replie .colonne { gap: 12px; }
.entete.replie .entete-actions { margin-left: auto; }
.entete.replie .menu {
  order: 0; flex-basis: auto; position: absolute; left: 0; right: 0; top: 100%; z-index: 35;
  flex-direction: column; gap: 0; margin: 0; padding: 8px 0 24px; overflow: visible;
  -webkit-mask-image: none; mask-image: none;
  background: var(--fond); border-bottom: 1px solid var(--bord);
  box-shadow: 0 0 0 100vmax var(--fond); clip-path: inset(0 -100vmax 0 -100vmax);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.entete.replie.ouvert .menu { opacity: 1; visibility: visible; transform: none; }
.entete.replie.ouvert { background: var(--fond); border-bottom-color: var(--bord); }
.entete.replie .menu a { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--encre); padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--bord); }
.entete.replie .menu a:hover { background: none; color: var(--accent); }
.entete.replie .menu a[aria-current="page"] { color: var(--accent); background: none; }
.entete.replie .menu .menu-action { display: block; }
.entete.replie .menu .menu-action--principale {
  margin-top: 18px; padding: 14px 22px; border-bottom: 0; border-radius: 14px; text-align: center;
  font-size: 16px; letter-spacing: -0.01em; background: var(--accent); color: var(--sur-accent);
}
.entete.replie .menu .menu-action--principale:hover { background: var(--accent); color: var(--sur-accent); }

@media (max-width: 1080px) {
  /* Sans JavaScript, le menu passe sous la marque, sur une ligne qui
     défile d'elle-même. */
  .entete .colonne { flex-wrap: wrap; }
  .entete-actions { margin-left: auto; }
  .menu {
    order: 3; flex-basis: 100%; margin: 0 0 10px;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }
  .entete.replie .colonne { flex-wrap: nowrap; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > .tuile { grid-column: auto; }
}
@media (max-width: 900px) {
  .hero-grille, .preuve-grille, .verif, .libre, .contact { grid-template-columns: 1fr; }
  .scene { max-width: 440px; margin-inline: auto; }
  .frise { position: static; }
  .ecran, .ecran:nth-of-type(even) { grid-template-columns: 1fr; gap: 20px; }
  .ecran:nth-of-type(even) .ecran-texte { order: 0; }
  .fenetre, .ecran:nth-of-type(even) .fenetre { transform: none; }
  .bento { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .entete-demo { display: none; }
  /* Sur téléphone, « Se connecter » reste dans le pied de page. */
  .entete-connexion { display: none; }
  .recherche-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .recherche-bouton { padding: 0 10px; }
  /* Un libellé long ne tient pas sur une ligne de 375px : mieux vaut qu'il
     passe à la ligne que de faire défiler toute la page latéralement. */
  .bouton { white-space: normal; text-align: center; }
  .lien-fort { display: flex; margin: 16px 0 0; }
  .hero h1 .decale { padding-left: 0; }
  .tuile, .carte { padding: 22px; }
  .reperes { flex-direction: column; align-items: center; gap: 8px; }
  .reperes li + li { border-left: 0; }
  .vzone { padding: 28px 16px; }
  .vbloc, .vverdict { padding: 16px; }
  .vempreinte-valeur { font-size: 12.5px; }
  .vligne dt { min-width: 0; }
  .contact-actions { max-width: 100%; }
}
@media (max-width: 340px) { .contact .bouton--whatsapp { white-space: normal; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js-anime .revele { opacity: 1; transform: none; }
  .paraphe path { stroke-dashoffset: 0; }
  .sceau { opacity: 1; transform: rotate(-8deg); }
}