/* ═══════════════════════════════════════════════════════════════════════════════
   Kalq · styles communs à toutes les pages
   Le site entier se lit comme un document que Kalq parcourt : la ligne de lecture
   de la marque traverse le titre, puis réapparaît dans chaque démonstration. Colonne
   de 1 200 px, papier réglé en filigrane. Toutes les animations montrent leur état
   final quand le système demande de réduire les mouvements, et chaque page reste
   complète sans JavaScript.

   Trois couches, chargées dans cet ordre :
     commun.css   polices, jetons, base, en-tête, pied, composants partagés ;
     analyse.css  les sections de la page de l'outil Analyse ;
     impot.css    les sections de la page de l'outil Impôt ;
     hub.css      les sections de l'accueil.
   Un style qui sert à deux pages vit ici.
   ═══════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Geist"; src: url("../polices/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../polices/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Polices de repli calées sur les métriques de Geist : sans elles, tout le texte
   saute d'une ligne au moment où la vraie police arrive. */
@font-face { font-family: "Geist repli"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 103.68%; ascent-override: 96.93%; descent-override: 28.45%; line-gap-override: 0%; }
@font-face { font-family: "Geist Mono repli"; src: local("Menlo"), local("Consolas"), local("Liberation Mono"), local("Courier New"); size-adjust: 100%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }

/* Positions animées : déclarées pour que le navigateur sache les interpoler. */
@property --lecture { syntax: "<percentage>"; inherits: true; initial-value: 100%; }
@property --y { syntax: "<percentage>"; inherits: true; initial-value: 114%; }

/* ═══ Jetons ═══════════════════════════════════════════════════════════════════
   Le site est pensé nuit d'abord ; le thème clair reprend les mêmes jetons. */
:root {
  color-scheme: dark;
  --fond: #0D131C; --fond-2: #111925; --surface: #172131; --surface-haute: #1D2839;
  --filet: rgba(236, 238, 232, 0.10); --filet-fort: rgba(236, 238, 232, 0.2);
  --texte: #ECEEE8; --texte-doux: #A7AFBC; --texte-faible: #8A93A2;
  --accent: #EE7A63; --accent-texte: #F29A87; --accent-fond: rgba(238, 122, 99, 0.12); --sur-accent: #1A0F0C;
  --bleu: #6FA8E8; --bleu-fond: rgba(111, 168, 232, 0.14); --conforme: #5CC48E; --conforme-fond: rgba(92, 196, 142, 0.13);
  --vigilance: #E8B65C; --vigilance-fond: rgba(232, 182, 92, 0.13);
  --reglure: rgba(111, 168, 232, 0.06); --ombre: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
  --focus: #6FA8E8;

  /* Le document fictif reste du papier dans les deux thèmes. */
  --papier: #F6F6F1; --papier-encre: #1B2A41; --papier-doux: #566070; --papier-filet: rgba(27, 42, 65, 0.12);
  --papier-lu: rgba(238, 122, 99, 0.14); --papier-rature: #B23A26; --papier-deplace: rgba(47, 111, 222, 0.14);

  /* L'ouverture, les démonstrations et la carte de la bêta restent nuit dans les deux thèmes. */
  --nuit: #0D131C; --nuit-surface: #151E2B; --nuit-surface-haute: #1B2636; --nuit-filet: rgba(236, 238, 232, 0.11);
  --nuit-texte: #ECEEE8; --nuit-doux: #A7AFBC; --nuit-accent: #EE7A63; --nuit-bleu: #6FA8E8; --nuit-conforme: #5CC48E; --nuit-vigilance: #E8B65C; --nuit-reglure: rgba(111, 168, 232, 0.07);

  /* Couleurs du logo, pilotées par le thème. */
  --logo-plein: var(--texte); --logo-calque1: var(--accent); --logo-calque2: var(--bleu); --logo-ligne: var(--accent);
  --logo-op1: 0.9; --logo-op2: 0.55;

  --police: "Geist", "Geist repli", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mono: "Geist Mono", "Geist Mono repli", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.75rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.125rem; --t-xl: 1.375rem;
  --t-2xl: clamp(1.9rem, 1.25rem + 2.3vw, 3rem); --t-titre: clamp(2.6rem, 1rem + 6.4vw, 6.4rem);
  --gouttiere: clamp(16px, 4vw, 40px); --largeur: 1200px;
  --rayon: 16px; --rayon-petit: 9px;
  --courbe: cubic-bezier(0.2, 0.7, 0.2, 1); --courbe-lecture: cubic-bezier(0.45, 0, 0.25, 1);
  --entete: 68px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --fond: #F3F4EE; --fond-2: #ECEEE6; --surface: #FFFFFF; --surface-haute: #FFFFFF;
    --filet: rgba(27, 42, 65, 0.12); --filet-fort: rgba(27, 42, 65, 0.22);
    --texte: #1B2A41; --texte-doux: #4D5767; --texte-faible: #5F6979;
    --accent: #C2412D; --accent-texte: #A8341F; --accent-fond: rgba(194, 65, 45, 0.08); --sur-accent: #FFFFFF;
    --bleu: #2F6FDE; --bleu-fond: rgba(47, 111, 222, 0.10); --conforme: #18724A; --conforme-fond: rgba(24, 114, 74, 0.10);
    --vigilance: #8A5508; --vigilance-fond: rgba(154, 95, 12, 0.10);
    --reglure: rgba(31, 95, 168, 0.07); --ombre: 0 30px 70px -34px rgba(27, 42, 65, 0.35);
    --focus: #2F6FDE;
    --logo-op1: 0.8; --logo-op2: 0.42; --logo-calque2: var(--accent);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --fond: #F3F4EE; --fond-2: #ECEEE6; --surface: #FFFFFF; --surface-haute: #FFFFFF;
  --filet: rgba(27, 42, 65, 0.12); --filet-fort: rgba(27, 42, 65, 0.22);
  --texte: #1B2A41; --texte-doux: #4D5767; --texte-faible: #5F6979;
  --accent: #C2412D; --accent-texte: #A8341F; --accent-fond: rgba(194, 65, 45, 0.08); --sur-accent: #FFFFFF;
  --bleu: #2F6FDE; --bleu-fond: rgba(47, 111, 222, 0.10); --conforme: #18724A; --conforme-fond: rgba(24, 114, 74, 0.10);
  --vigilance: #8A5508; --vigilance-fond: rgba(154, 95, 12, 0.10);
  --reglure: rgba(31, 95, 168, 0.07); --ombre: 0 30px 70px -34px rgba(27, 42, 65, 0.35);
  --focus: #2F6FDE;
  --logo-op1: 0.8; --logo-op2: 0.42; --logo-calque2: var(--accent);
}

/* ═══ Base ════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: var(--t-m); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, fieldset { margin: 0; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--sur-accent); }

[hidden] { display: none !important; }
.contenu { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.chiffres { font-family: var(--police-mono); font-variant-numeric: tabular-nums; }

.lien-evitement {
  position: fixed; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 60;
  padding: 10px 16px; border-radius: var(--rayon-petit); background: var(--surface-haute); color: var(--texte);
  transform: translateY(-160%); transition: transform 0.2s var(--courbe);
}
.lien-evitement:focus { transform: none; }

/* ═══ Logo ════════════════════════════════════════════════════════════════════ */
.logo { display: block; height: auto; overflow: visible; }
.logo-plein { fill: var(--logo-plein); }
.logo-contour, .logo-calque1, .logo-calque2 { fill: none; stroke-width: var(--logo-trait, 1.1px); stroke-miterlimit: 4; }
.logo-contour { stroke: var(--logo-plein); }
.logo-calque1 { stroke: var(--logo-calque1); stroke-opacity: var(--logo-op1); transform: translateY(90px); }
.logo-calque2 { stroke: var(--logo-calque2); stroke-opacity: var(--logo-op2); transform: translateY(180px); }
.logo-ligne { fill: var(--logo-ligne); }
.logo-calque1, .logo-calque2 { transition: transform 0.45s var(--courbe); }
a:hover > .logo .logo-calque1, a:focus-visible > .logo .logo-calque1 { transform: translateY(130px); }
a:hover > .logo .logo-calque2, a:focus-visible > .logo .logo-calque2 { transform: translateY(260px); }
/* En petit (en-tête, pied de page), deux calques à 3 px d'écart se brouillent sur un
   écran ordinaire : on n'en garde qu'un, plus écarté et plus appuyé. */
.entete-logo .logo, .pied-marque .logo { --logo-trait: 1.4px; }
.entete-logo .logo-calque2, .pied-marque .logo-calque2 { display: none; }
.entete-logo .logo-calque1, .pied-marque .logo-calque1 { transform: translateY(120px); }
.entete-logo:hover .logo-calque1, .entete-logo:focus-visible .logo-calque1, .pied-marque a:hover .logo-calque1, .pied-marque a:focus-visible .logo-calque1 { transform: translateY(170px); }
.nuit .logo { --logo-plein: var(--nuit-texte); --logo-calque1: var(--nuit-accent); --logo-calque2: var(--nuit-bleu); --logo-ligne: var(--nuit-accent); --logo-op1: 0.9; --logo-op2: 0.55; }
/* À l'arrivée, le calque se détache du mot, comme sur la planche animée de la marque. */
@media (prefers-reduced-motion: no-preference) {
  .js .entete-logo .logo-calque1 { animation: calque-sortie 1s var(--courbe) 0.25s backwards; }
}
@keyframes calque-sortie { from { transform: translateY(0); } }

/* ═══ Boutons et étiquettes ═══════════════════════════════════════════════════ */
.bouton {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: 48px; padding: 0 1.3rem; border-radius: 11px; border: 1px solid transparent;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s var(--courbe);
}
.bouton svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--courbe); }
.bouton:hover svg { transform: translateX(3px); }
.bouton:active { transform: translateY(1px) scale(0.99); }
.bouton-principal { background: var(--texte); color: var(--fond); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .bouton-principal:hover { background: color-mix(in srgb, var(--texte) 88%, var(--accent)); }
}
.bouton-discret { border-color: var(--filet-fort); color: var(--texte); background: transparent; }
.bouton-discret:hover { border-color: var(--texte-doux); background: var(--accent-fond); }
.nuit .bouton-principal { background: var(--nuit-texte); color: var(--nuit); }
.nuit .bouton-principal:hover { background: #FFFFFF; }
.nuit .bouton-discret { border-color: rgba(236, 238, 232, 0.24); color: var(--nuit-texte); }
.nuit .bouton-discret:hover { border-color: var(--nuit-doux); background: rgba(236, 238, 232, 0.06); }
/* Au survol, la ligne de lecture balaie le bouton principal une fois. */
.bouton-principal::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: -1;
  background: var(--accent); box-shadow: 0 0 12px rgba(238, 122, 99, 0.6); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .bouton-principal:hover::after { animation: balaye-bouton 0.7s var(--courbe-lecture); }
}
@keyframes balaye-bouton { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }

.surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texte-doux);
}
.surtitre::before { content: ""; width: 22px; height: 2px; background: var(--accent); transform-origin: left; flex: none; }
.nuit .surtitre { color: var(--nuit-doux); }
.nuit .surtitre::before { background: var(--nuit-accent); }

.puce {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
  transition: color 0.35s, background-color 0.35s;
}
.puce::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.puce-conforme { color: var(--conforme); background: var(--conforme-fond); }
.puce-attente { color: var(--texte-doux); background: rgba(138, 147, 162, 0.14); }
.puce-ecart { color: var(--accent-texte); background: var(--accent-fond); }
.puce-vigilance { color: var(--vigilance); background: var(--vigilance-fond); }

/* ═══ En-tête ═════════════════════════════════════════════════════════════════ */
.entete {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--fond);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s, background-color 0.3s;
}
.entete.defile { border-bottom-color: var(--filet); }
.entete-barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--entete); }
.entete-logo { display: block; flex: none; border-radius: 6px; }
.entete-logo .logo { height: 36px; width: auto; }
/* Sur une page d'outil, son nom suit le logo : on sait où l'on est, et le logo ramène au hub. */
.entete-marque { display: flex; align-items: center; gap: 14px; min-width: 0; }
.entete-outil {
  padding-left: 14px; border-left: 1px solid var(--filet-fort); line-height: 1.7; text-decoration: none;
  font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-doux);
}
.entete-outil:hover { color: var(--texte); }
/* Un outil annoncé mais pas encore ouvert. */
.bientot {
  margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: var(--filet); vertical-align: 1px;
  font-family: var(--police-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux);
}
.navigation { display: flex; align-items: center; gap: 24px; font-size: var(--t-s); }
.navigation-liens { display: flex; gap: 24px; }
.navigation-liens a { position: relative; color: var(--texte-doux); text-decoration: none; padding-block: 6px; transition: color 0.2s; }
.navigation-liens a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--courbe);
}
.navigation-liens a:hover, .navigation-liens a[aria-current="true"] { color: var(--texte); }
.navigation-liens a:hover::after, .navigation-liens a[aria-current="true"]::after { transform: scaleX(1); }
.entete .bouton { min-height: 40px; padding-inline: 1rem; font-size: 0.9rem; }

/* La ligne de lecture de la marque sert de barre de progression. */
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progression { animation: progression linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Menu du téléphone : un <details>, qui s'ouvre même sans script. */
.menu { display: none; position: static; }
.menu-bouton {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--filet-fort);
  cursor: pointer; list-style: none; color: var(--texte);
}
.menu-bouton::-webkit-details-marker { display: none; }
.menu-bouton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; overflow: visible; }
.menu-trait { transform-box: fill-box; transform-origin: center; transition: transform 0.35s var(--courbe); }
.menu[open] .menu-trait-haut { transform: translateY(3px) rotate(45deg); }
.menu[open] .menu-trait-bas { transform: translateY(-3px) rotate(-45deg); }
.menu-panneau {
  position: absolute; left: 0; right: 0; top: 100%; padding: 8px var(--gouttiere) 20px;
  /* Téléphone à l'horizontale : le menu défile plutôt que de sortir de l'écran. */
  max-height: calc(100vh - var(--entete)); max-height: calc(100svh - var(--entete)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--fond); border-bottom: 1px solid var(--filet); box-shadow: 0 30px 40px -30px rgba(0, 0, 0, 0.5);
}
.menu-panneau a {
  display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--filet);
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; color: var(--texte);
}
.menu-panneau a .chiffres { font-size: var(--t-xs); color: var(--accent-texte); font-weight: 500; }
/* Sur une page d'outil, le reste de Kalq tient en une ligne sous les sections de la page :
   le menu reste assez court pour l'iPhone SE. */
.menu-kalq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; padding-top: 12px; }
.menu-panneau .menu-kalq a { display: inline-flex; align-items: center; padding: 8px 0; border: 0; font-size: var(--t-s); font-weight: 550; letter-spacing: 0; color: var(--texte-doux); }
.menu-panneau .menu-kalq a:hover { color: var(--texte); }
.entete.sur-nuit .menu-panneau .menu-kalq a { color: var(--nuit-doux); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panneau { animation: menu-ouverture 0.4s var(--courbe); }
  .menu[open] .menu-panneau li { animation: montee 0.5s var(--courbe) backwards; }
  .menu[open] .menu-panneau li:nth-child(2) { animation-delay: 0.04s; }
  .menu[open] .menu-panneau li:nth-child(3) { animation-delay: 0.08s; }
  .menu[open] .menu-panneau li:nth-child(4) { animation-delay: 0.12s; }
  .menu[open] .menu-panneau li:nth-child(5) { animation-delay: 0.16s; }
}
@keyframes menu-ouverture { from { transform: translateY(-8px); opacity: 0.4; } }

@media (max-width: 960px) {
  .navigation-liens { display: none; }
  .menu { display: block; }
  .navigation { gap: 10px; }
}
@media (max-width: 520px) { .entete-outil { display: none; } }
@media (max-width: 380px) { .bouton-entete { padding-inline: 0.8rem; } }

/* Au-dessus de l'ouverture, l'en-tête prend les couleurs nuit, même en thème clair. */
.entete.sur-nuit { background: var(--nuit); color: var(--nuit-texte); }
.entete.sur-nuit .navigation-liens a { color: var(--nuit-doux); }
.entete.sur-nuit .navigation-liens a:hover { color: var(--nuit-texte); }
.entete.sur-nuit .entete-outil { color: var(--nuit-doux); border-left-color: rgba(236, 238, 232, 0.24); }
.entete.sur-nuit .bientot { background: rgba(236, 238, 232, 0.12); color: var(--nuit-doux); }
.entete.sur-nuit .logo { --logo-plein: var(--nuit-texte); --logo-calque1: var(--nuit-accent); --logo-calque2: var(--nuit-bleu); --logo-ligne: var(--nuit-accent); --logo-op1: 0.9; --logo-op2: 0.55; }
.entete.sur-nuit .bouton-principal { background: var(--nuit-texte); color: var(--nuit); }
.entete.sur-nuit .progression { background: var(--nuit-accent); }
.entete.sur-nuit.defile { border-bottom-color: var(--nuit-filet); }
.entete.sur-nuit .menu-bouton { color: var(--nuit-texte); border-color: rgba(236, 238, 232, 0.24); }
.entete.sur-nuit .menu-panneau { background: var(--nuit); border-bottom-color: var(--nuit-filet); }
.entete.sur-nuit .menu-panneau a { color: var(--nuit-texte); border-bottom-color: var(--nuit-filet); }
.entete.sur-nuit .menu-panneau a .chiffres { color: #F29A87; }
/* Le voile translucide suppose color-mix(). Une déclaration qui contient var() n'est jamais
   rejetée à la lecture : sans ce test, un navigateur trop ancien rendrait l'en-tête
   transparent au lieu de garder le fond uni. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .entete { background: color-mix(in srgb, var(--fond) 80%, transparent); }
  .entete.sur-nuit { background: color-mix(in srgb, var(--nuit) 84%, transparent); }
}

/* ═══ Ouverture : le titre scanné ═════════════════════════════════════════════ */
.nuit { background: var(--nuit); color: var(--nuit-texte); }
/* L'ouverture remonte sous l'en-tête translucide : sans cela, en thème clair, l'en-tête
   nuit se poserait sur le fond clair de la page et virerait au gris. */
.ouverture {
  position: relative; isolation: isolate; overflow: clip;
  margin-top: calc(-1 * var(--entete) - 1px); padding-block: calc(var(--entete) + clamp(28px, 7vw, 104px)) clamp(56px, 7vw, 104px);
}
.ouverture::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
/* Sous le curseur, les lignes du papier réglé s'éclairent : le scanner suit la main. */
.ouverture::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 30%), rgba(111, 168, 232, 0.55), transparent 70%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 31px, #000 31px 32px); mask-image: repeating-linear-gradient(to bottom, transparent 0 31px, #000 31px 32px);
}
.ouverture.eclaire::after { opacity: 1; }
.ouverture-contenu { display: grid; gap: clamp(24px, 3.4vw, 44px); }

.titre-scan {
  position: relative; font-size: var(--t-titre); font-weight: 750; letter-spacing: -0.045em; line-height: 0.98;
  /* --y déclaré ici aussi : sans @property, le titre au repos reste plein et net. */
  --ecart: 1; --y: 114%; margin-bottom: 0.2em;
}
.titre-scan .moins { color: var(--nuit-doux); }
/* Sous la ligne, le titre passe en contour et laisse voir ses deux calques, exactement
   comme le logo. Les copies sont créées par le script : sans lui, le titre reste plein. */
.titre-bas { position: absolute; inset: 0; pointer-events: none; clip-path: inset(var(--y) -30% -40% -30%); }
.titre-calque { position: absolute; inset: 0; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1.4px currentColor; color: var(--nuit-texte); }
.titre-calque .moins { color: var(--nuit-doux); }
.titre-calque1 { color: var(--nuit-accent); opacity: 0.9; transform: translateY(calc(0.09em * var(--ecart))); }
.titre-calque2 { color: var(--nuit-bleu); opacity: 0.55; transform: translateY(calc(0.18em * var(--ecart))); }
.titre-calque1 .moins, .titre-calque2 .moins { color: inherit; }
.titre-calque1, .titre-calque2 { transition: transform 0.5s var(--courbe); }
/* La ligne est un calque de la hauteur du titre, déplacé par transformation : un
   pourcentage de translation vaut alors un pourcentage du titre, et la déplacer ne
   compte pas comme un saut de mise en page. Le trait est dessiné sur son bord haut. */
.titre-ligne { position: absolute; left: -10px; right: -10px; top: 0; height: 100%; transform: translateY(calc(var(--y) - 1px)); pointer-events: none; }
.titre-ligne::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nuit-accent); box-shadow: 0 0 0 1px rgba(238, 122, 99, 0.12), 0 8px 24px rgba(238, 122, 99, 0.35); }
.titre-ligne::after {
  content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 16px;
  background: linear-gradient(var(--nuit-accent), var(--nuit-accent)) left / 2px 100% no-repeat, linear-gradient(var(--nuit-accent), var(--nuit-accent)) right / 2px 100% no-repeat;
}
.js .titre-scan .titre-plein { display: block; clip-path: inset(-20% -30% calc(100% - var(--y)) -30%); }
.titre-scan.suit { transition: --y 0.45s var(--courbe); }
.titre-scan.survol { --ecart: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .js .titre-scan { animation: titre-lecture 1.7s var(--courbe-lecture) 0.35s backwards; }
}
@keyframes titre-lecture { from { --y: -6%; } }

.ouverture-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: end; }
.ouverture .chapeau { font-size: var(--t-l); line-height: 1.6; color: var(--nuit-doux); max-width: 36em; }
.ouverture .chapeau strong { color: var(--nuit-texte); font-weight: 600; }
.ouverture-actions { display: grid; gap: 18px; justify-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.assurances { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--police-mono); font-size: var(--t-xs); letter-spacing: 0.02em; color: var(--nuit-doux); }
.assurances li { display: inline-flex; align-items: center; gap: 8px; }
.assurances svg { width: 14px; height: 14px; color: var(--nuit-conforme); flex: none; }
@media (max-width: 1100px) { .ouverture-bas { grid-template-columns: minmax(0, 1fr); align-items: start; } }

@media (prefers-reduced-motion: no-preference) {
  .ouverture-contenu > .surtitre, .ouverture-bas > * { animation: montee 0.8s var(--courbe) backwards; }
  .ouverture-bas > :nth-child(1) { animation-delay: 0.5s; }
  .ouverture-bas > :nth-child(2) { animation-delay: 0.62s; }
}
/* Seul le déplacement est animé : le texte reste visible dès la première image. */
@keyframes montee { from { transform: translateY(14px); } to { transform: none; } }

/* ═══ Sections ════════════════════════════════════════════════════════════════ */
.section { padding-block: clamp(72px, 9vw, 120px); }
.section-alternee { background: var(--fond-2); border-block: 1px solid var(--filet); }
/* Le pied de page porte déjà son filet : la dernière bande ne le double pas. */
main > .section-alternee:last-child { border-bottom: 0; }
.section-tete { display: flex; flex-direction: column; gap: 18px; max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.section-tete h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.035em; }
.section-tete > p { font-size: var(--t-l); color: var(--texte-doux); max-width: 38em; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-tete, .engagement, .reponse, .point-controle, .logiciel { animation: montee linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .section-tete .surtitre::before { animation: trait linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }
}
@keyframes trait { from { transform: scaleX(0.15); } to { transform: scaleX(1); } }

/* ═══ En chiffres ═════════════════════════════════════════════════════════════ */
.preuves { border-block: 1px solid var(--filet); background: var(--fond); }
/* Autant de colonnes que de chiffres : la bande reste pleine quand on en retire un. */
.preuves-liste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.preuves-liste li { display: flex; flex-direction: column; gap: 6px; padding: 30px 24px; border-left: 1px solid var(--filet); }
.preuves-liste li:first-child { border-left: 0; padding-left: 0; }
.preuves-valeur {
  font-family: var(--police-mono); font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; transition: text-shadow 0.45s var(--courbe);
  text-shadow: 0 0 0 rgba(238, 122, 99, 0), 0 0 0 rgba(111, 168, 232, 0);
}
/* Au survol, le chiffre se dédouble en calques, comme le logo. */
.preuves-liste li:hover .preuves-valeur { text-shadow: 0 0.14em 0 rgba(238, 122, 99, 0.55), 0 0.28em 0 rgba(111, 168, 232, 0.35); }
.preuves-infini { font-size: 1.1em; font-weight: 500; margin-left: 0.1em; line-height: 0; color: var(--texte-doux); letter-spacing: 0; }
.preuves-nouveau { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--t-s); color: var(--texte-doux); line-height: 1.4; max-width: 22em; }
.badge-news { flex: none; font-size: 0.7em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(238, 122, 99, 0.22); color: var(--texte); }
.preuves-libelle { font-size: var(--t-s); color: var(--texte-doux); line-height: 1.45; max-width: 22em; }
@media (max-width: 860px) {
  .preuves-liste { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preuves-liste li { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); }
  .preuves-liste li:nth-child(-n + 2) { border-top: 0; }
  .preuves-liste li:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--filet); }
  /* Un chiffre seul sur sa rangée en prend toute la largeur. */
  .preuves-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ═══ Projecteur ══════════════════════════════════════════════════════════════ */
/* Sous le curseur, la carte s'éclaire à l'endroit visé. Le script pose la classe et suit
   la souris ; sans lui, la carte reste simplement unie. */
.projecteur::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--accent-fond), transparent 70%);
}
@media (hover: hover) { .projecteur:hover::before { opacity: 1; } }

/* ═══ Adresse e-mail ═════════════════════════════════════════════════════════ */
/* Affichée en clair partout où l'on peut écrire au cabinet. Avec le script, un clic la
   copie (data-copiable) : elle passe doucement au rouge de la marque et en revient, et
   une bulle dit ce que fait le clic, puis ce qu'il a fait. Le rouge est une copie posée
   sur l'adresse, dont seule l'opacité varie : le texte dessous reste entier, et la
   boucle ne repeint rien. Les deux pseudo-éléments n'entrent ni dans la sélection ni
   dans la copie. */
.adresse { font-family: var(--police-mono); font-size: 0.8em; color: var(--texte); user-select: all; }
.adresse[data-texte] { position: relative; display: inline-block; line-height: 1.3; cursor: pointer; text-decoration: underline 1px transparent; text-underline-offset: 4px; transition: text-decoration-color 0.25s; }
.adresse[data-texte]::before { content: attr(data-texte); position: absolute; inset: 0; color: var(--accent-texte); opacity: 0; pointer-events: none; }
.adresse[data-texte]::after {
  content: attr(data-bulle); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 2; padding: 5px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap;
  font-family: var(--police); font-size: 12px; font-weight: 550; line-height: 1.3; background: var(--texte); color: var(--fond); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35);
  display: none; transform: translateX(-50%); transform-origin: 50% 100%;
}
/* Absente tant qu'on ne la demande pas : cachée seulement, elle débordait du paragraphe. */
.adresse[data-texte]:is(:focus-visible, .copiee)::after { display: block; }
.adresse[data-texte].copiee::after { background: var(--conforme); }
@media (hover: hover) {
  .adresse[data-texte]:hover { text-decoration-color: var(--accent); }
  .adresse[data-texte]:hover::after { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .adresse[data-texte]::before { animation: adresse-teinte 4s ease-in-out infinite; }
  .adresse[data-texte]:hover::before { animation-play-state: paused; }
  .adresse[data-texte]::after { animation: bulle-entree 0.25s var(--courbe); }
}
@keyframes adresse-teinte { 50% { opacity: 1; } }
@keyframes bulle-entree { from { transform: translateX(-50%) translateY(4px) scale(0.92); } }

/* ═══ Engagements (sécurité, données) ═════════════════════════════════════════ */
.engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--filet); border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.engagement { position: relative; display: grid; align-content: start; gap: 10px; padding: 28px 26px 30px; background: var(--fond-2); overflow: hidden; }
.engagement > * { position: relative; }
.engagement svg { width: 26px; height: 26px; color: var(--accent); transition: transform 0.4s var(--courbe); }
.engagement h3 { font-size: var(--t-l); font-weight: 600; letter-spacing: -0.015em; }
.engagement p { font-size: var(--t-s); color: var(--texte-doux); }
@media (hover: hover) {
  .engagement:hover svg { transform: translateY(-3px); }
}
@media (max-width: 900px) { .engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .engagements { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Questions ═══════════════════════════════════════════════════════════════ */
.questions { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); }
.questions .section-tete { margin-bottom: 0; }
.reponses { border-top: 1px solid var(--filet); }
.reponse { border-bottom: 1px solid var(--filet); interpolate-size: allow-keywords; }
.reponse summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: var(--t-l); font-weight: 600; letter-spacing: -0.015em; transition: color 0.2s; }
.reponse summary::-webkit-details-marker { display: none; }
.reponse summary::after {
  content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--texte-doux); border-bottom: 2px solid var(--texte-doux);
  transform: translateY(-3px) rotate(45deg); transition: transform 0.35s var(--courbe);
}
.reponse[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.reponse summary:hover { color: var(--accent-texte); }
.reponse-corps { padding: 0 0 24px; color: var(--texte-doux); max-width: 40em; display: grid; gap: 10px; }
.reponse::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--courbe), content-visibility 0.4s allow-discrete; }
.reponse[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) { .reponse[open] .reponse-corps { animation: montee 0.5s var(--courbe); } }
@media (max-width: 860px) { .questions { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Bêta et formulaire de demande ═════════════════════════════════════════════ */
/* La carte a un cadre visible : sur fond nuit, sans lui, son retrait passerait pour un décalage. */
.beta-carte {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px);
  padding: clamp(20px, 5vw, 64px); border-radius: 24px; border: 1px solid var(--nuit-filet); overflow: hidden; background-color: var(--nuit);
  grid-template-areas: "intro formulaire" "details formulaire"; grid-template-rows: auto 1fr; row-gap: 28px;
}
/* Sur téléphone, le formulaire vient juste après le titre : on s'inscrit sans chercher. */
.beta-intro { grid-area: intro; }
.formulaire { grid-area: formulaire; }
.beta-details { grid-area: details; display: grid; gap: 20px; align-content: start; }
.beta-carte::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(90% 70% at 0% 0%, rgba(238, 122, 99, 0.09), transparent 70%), repeating-linear-gradient(to bottom, transparent 0 31px, var(--nuit-reglure) 31px 32px);
}
.beta-carte > * { position: relative; z-index: 1; }
.beta-carte h2 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.035em; }
.beta-intro { display: flex; flex-direction: column; gap: 20px; }
.beta-intro > p { color: var(--nuit-doux); font-size: var(--t-l); max-width: 30em; }
.beta-avantages { display: grid; gap: 10px; }
.beta-avantages li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--nuit-texte); }
.beta-avantages li::before { content: ""; width: 12px; height: 2px; margin-top: 0.8em; background: var(--nuit-accent); }
.beta-etapes { display: grid; gap: 0; margin-top: 4px; border-top: 1px solid var(--nuit-filet); }
.beta-etapes li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--nuit-filet); color: var(--nuit-doux); font-size: var(--t-s); }
.beta-etapes .chiffres { color: #F29A87; font-size: var(--t-xs); padding-top: 2px; }
.formulaire { position: relative; display: grid; gap: 18px; align-self: start; padding: clamp(18px, 3vw, 32px); border-radius: var(--rayon); background: var(--nuit-surface); border: 1px solid var(--nuit-filet); overflow: hidden; }
.formulaire-champs { display: grid; gap: 18px; }
.champ { display: grid; gap: 8px; }
.champ label { font-size: var(--t-s); font-weight: 600; color: var(--nuit-texte); }
.champ .aide { font-size: var(--t-xs); color: var(--nuit-doux); font-weight: 400; }
.champ-saisie { position: relative; }
.champ input[type="email"], .champ input[type="text"], .champ select {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(236, 238, 232, 0.18);
  background: var(--nuit); color: var(--nuit-texte); font-size: 1rem; transition: border-color 0.2s, box-shadow 0.25s;
}
.champ-saisie input { padding-right: 44px; }
.champ-valide { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; color: var(--nuit-conforme); transform: translateY(-50%) scale(0.6); opacity: 0; transition: opacity 0.25s, transform 0.35s var(--courbe); pointer-events: none; }
.champ-saisie.valide .champ-valide { opacity: 1; transform: translateY(-50%); }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A7AFBC' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
/* Liste déroulante : sombre et aux couleurs du site, même ouverte. */
.champ select { color-scheme: dark; cursor: pointer; }
.champ select option { background: var(--nuit-surface); color: var(--nuit-texte); }
@supports (appearance: base-select) {
  .champ select, .champ select::picker(select) { appearance: base-select; }
  .champ select::picker-icon { display: none; }
  .champ select { display: flex; align-items: center; }
  .champ select selectedcontent { display: block; }
  .champ select::picker(select) {
    margin-top: 6px; padding: 6px; border-radius: 12px; border: 1px solid rgba(236, 238, 232, 0.18);
    background: var(--nuit-surface); color: var(--nuit-texte); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
  .champ select option { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; }
  .champ select option:hover, .champ select option:focus-visible { background: var(--nuit-surface-haute); outline: none; }
  .champ select option:checked { background: rgba(111, 168, 232, 0.16); }
  .champ select option::checkmark { color: var(--nuit-bleu); }
}
.champ input::placeholder { color: #7D8696; }
.champ input:hover, .champ select:hover { border-color: rgba(236, 238, 232, 0.32); }
.champ input:focus-visible, .champ select:focus-visible { outline: none; border-color: var(--nuit-bleu); box-shadow: 0 0 0 3px rgba(111, 168, 232, 0.28); }
.champ [aria-invalid="true"] { border-color: #F29A87; }
.erreur { font-size: var(--t-xs); color: #F4A897; }
.erreur:empty { display: none; }
.deux-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.formulaire .bouton { width: 100%; }
.mention-envoi { font-size: var(--t-xs); line-height: 1.55; color: var(--nuit-doux); }
.mention-envoi a { color: var(--nuit-texte); }
.mention-maquette { font-size: var(--t-xs); color: var(--nuit-doux); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire:has(.merci:not([hidden])) .formulaire-champs { display: none; }
.merci { display: grid; gap: 14px; justify-items: start; align-content: center; }
.merci:focus { outline: none; }
.merci h3 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -0.02em; }
.merci p { color: var(--nuit-doux); }
.merci-coche { width: 48px; height: 48px; color: var(--nuit-conforme); }
.merci-coche circle, .merci-coche path { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.merci-coche circle { stroke-opacity: 0.35; }
@media (prefers-reduced-motion: no-preference) {
  .merci:not([hidden]) .merci-coche circle { stroke-dasharray: 132; animation: trace 0.7s var(--courbe) backwards; }
  .merci:not([hidden]) .merci-coche path { stroke-dasharray: 32; animation: trace 0.45s var(--courbe) 0.45s backwards; }
  .merci:not([hidden]) .merci-ligne { animation: calque-ligne 0.7s var(--courbe) 0.6s backwards; }
}
@keyframes trace { from { stroke-dashoffset: var(--longueur, 132); } }
.merci-coche path { --longueur: 32; }
.merci-ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--nuit); border: 1px solid var(--nuit-filet); font-family: var(--police-mono); font-size: 11.5px; color: var(--nuit-texte);
}
.merci-ligne > :nth-child(-n + 3) { font-size: 10px; letter-spacing: 0.08em; color: var(--nuit-doux); }
.merci-ligne > :nth-child(5) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merci-statut { color: var(--nuit-conforme); }
.balayage { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--nuit-accent); box-shadow: 0 6px 18px rgba(238, 122, 99, 0.4); pointer-events: none; opacity: 0; }
@media (max-width: 900px) { .beta-carte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "formulaire" "details"; grid-template-rows: auto; } }
@media (max-width: 480px) { .deux-champs { grid-template-columns: minmax(0, 1fr); } }
/* Le geste du logo : deux calques décalés viennent se poser sur la ligne. */
@keyframes calque-ligne {
  from { text-shadow: 0 8px 0 rgba(238, 122, 99, 0.75), 0 16px 0 rgba(111, 168, 232, 0.45); }
  to { text-shadow: 0 0 0 rgba(238, 122, 99, 0), 0 0 0 rgba(111, 168, 232, 0); }
}

/* ═══ Pied de page ════════════════════════════════════════════════════════════ */
.pied { border-top: 1px solid var(--filet); padding-block: 56px 40px; }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.8fr)); gap: 40px; }
/* La colonne est aussi haute que le plan du site : sans align-content, la devise glisserait vers le bas. */
.pied-marque { display: grid; gap: 14px; justify-items: start; align-content: start; }
.pied-marque .logo { height: 44px; width: auto; }
.pied-marque p { color: var(--texte); font-size: var(--t-m); font-weight: 600; letter-spacing: -0.01em; max-width: 26em; }
.pied h2 { font-family: var(--police-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-faible); margin-bottom: 14px; }
.pied ul { display: grid; gap: 10px; font-size: var(--t-s); }
.pied a { color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--texte); text-decoration: underline; text-underline-offset: 3px; }
.pied .adresse { font-size: 12.5px; }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--filet); font-size: var(--t-xs); color: var(--texte-faible); }
.choix-theme { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--filet-fort); background: transparent; color: var(--texte-doux); font-size: var(--t-xs); cursor: pointer; }
.choix-theme:hover { color: var(--texte); border-color: var(--texte-doux); }
.choix-theme svg { width: 14px; height: 14px; transition: transform 0.6s var(--courbe); }
@media (max-width: 760px) { .pied-grille { grid-template-columns: minmax(0, 1fr); } }

/* ═══ Pages de texte (mentions, confidentialité, 404) ═════════════════════════ */
.page-texte { padding-block: clamp(56px, 8vw, 110px); }
.page-texte .article { display: grid; gap: 20px; max-width: 44rem; }
.page-texte h1 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -0.035em; }
.page-texte h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; margin-top: 18px; }
.page-texte p, .page-texte li { color: var(--texte-doux); }
.page-texte ul { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }
.a-completer { font-family: var(--police-mono); font-size: 0.92em; color: var(--accent-texte); }
.page-texte code { font-family: var(--police-mono); font-size: 0.9em; padding: 0.08em 0.4em; border-radius: 5px; background: var(--fond-2); border: 1px solid var(--filet); color: var(--texte); }
/* L'encart, en tête d'une page de texte : la version d'un texte, ou un renvoi vers un autre.
   Les textes de l'extension Kalq Impôt (outils/textes-impot.mjs) : repris tels quels de
   l'avocat, leurs sections, listes numérotées et tableaux reçoivent ici la mise en page
   du site. Les tableaux tiennent dans la largeur, sans défilement, jusqu'au téléphone. */
.encart { max-width: 46rem; margin-block: 18px 36px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--filet); background: var(--fond-2); font-size: var(--t-s); color: var(--texte-doux); }
/* Dans l'article d'une page du site, l'écart de la grille suffit. */
.page-texte .article > .encart { margin-block: 0; }
.encart a, .texte-juridique a, .texte-liens a { color: var(--texte); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.page-texte .texte-juridique { max-width: 46rem; }
.texte-juridique h1 + p { font-family: var(--police-mono); font-size: var(--t-s); color: var(--texte-doux); }
.texte-juridique section { display: grid; gap: 12px; }
.texte-juridique ol { display: grid; gap: 10px; padding-left: 1.6em; list-style: decimal; }
.texte-juridique ol > li::marker { font-family: var(--police-mono); font-size: 0.85em; color: var(--accent-texte); }
.texte-juridique li > ul { margin-top: 8px; gap: 6px; }
.texte-juridique strong { font-weight: 600; color: var(--texte); }
.texte-juridique div { border: 1px solid var(--filet); border-radius: 12px; overflow: hidden; }
.texte-juridique table { width: 100%; border-collapse: collapse; font-size: var(--t-s); line-height: 1.5; hyphens: auto; overflow-wrap: break-word; }
.texte-juridique th, .texte-juridique td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filet); }
.texte-juridique th { background: var(--fond-2); font-weight: 600; color: var(--texte); }
.texte-juridique td { color: var(--texte-doux); }
.texte-juridique td:first-child { color: var(--texte); }
.texte-juridique tbody tr:last-child td { border-bottom: 0; }
.texte-liens { max-width: 46rem; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--filet); }
.page-texte .texte-liens ul { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-left: 0; list-style: none; font-size: var(--t-s); }
@media (max-width: 600px) {
  .texte-juridique table { font-size: var(--t-xs); }
  .texte-juridique th, .texte-juridique td { padding: 8px 9px; }
}
.introuvable { display: grid; justify-items: start; gap: 24px; }
.introuvable .logo { width: min(460px, 100%); height: auto; --logo-trait: 2px; }

/* ═══ Impression ══════════════════════════════════════════════════════════════ */
/* Une page de texte s'imprime seule : sans en-tête, pied ni encarts, sur fond blanc. Les
   PDF des textes de Kalq Impôt en sont tirés (outils/textes-impot.mjs). */
@media print {
  .entete, .pied, .lien-evitement, .encart, .texte-liens { display: none !important; }
  html, body { background: #FFFFFF; }
  .page-texte { padding-block: 0; }
  .page-texte .contenu { width: auto; }
  .texte-juridique h2 { break-after: avoid; }
  .texte-juridique li, .texte-juridique tr { break-inside: avoid; }
  /* Un cadre arrondi qui rogne son tableau se coupe mal d'une page à l'autre : la dernière
     rangée débordait sur le paragraphe suivant. Le cadre passe au tableau lui-même. */
  .texte-juridique div { border: 0; border-radius: 0; overflow: visible; }
  .texte-juridique table { border: 1px solid var(--filet); }
  /* Une grille se coupe mal entre deux pages (le tableau mordait sur la suite) : à
     l'impression, les blocs s'enchaînent simplement, avec les mêmes écarts. */
  .page-texte .article, .texte-juridique section, .texte-juridique ol, .page-texte ul { display: block; }
  .page-texte .article > * + *, .texte-juridique section > * + * { margin-top: 14px; }
  .texte-juridique section + section { margin-top: 26px; }
  .texte-juridique li + li { margin-top: 8px; }
}

/* ═══ Mouvement réduit ════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}