/* ============================================================
   axolo — main-2026.css : LA feuille du site, DA du 30/09/2026, passée au beige le 13/10 (le
   logiciel, lui, est sombre : voir manager.css). Logo d'octobre 2026 servi en SVG, lueur au survol.
   Déposée à un NOUVEAU chemin : /a/main.css reste servie par la prod
   (elle est partagée préprod ↔ prod), celle-ci n'est liée que par les
   pages passées à la nouvelle DA. Structure :
     1. base       — :root (export_identity, collé tel quel) + socle commun
     2. .p-articles / .p-article — listing et article (tokens à jour)
     3. .p-accueil — la landing, écrite depuis le Figma « axolo » 280:6240
   Chaque page pose sa classe sur <body>. Le script /a/main.js pose .vu
   sur les .rvl ; la page pose .js sur <html> — sans .js, rien n'est masqué.
   ============================================================ */

/* ---------- 1. base ---------- */
:root {
  --accent-ink: #FAFAF7;
  --background: #F6F0E7;
  --brand: #FE3730;
  --corail: #E8576B;
  --filet: #ECE8E1;
  --surligne: #F9F1F1;
  --conforme: #177247;
  --conforme-fond: #E6F4EC;
  --stroke-champ: #8A8781;
  --fond-section: #EFE7DB;
  --display: "DM Sans", "Hanken Grotesk", sans-serif;
  --ease-console: cubic-bezier(.22,.61,.36,1);
  --encre: #3B2922;
  --encre-press: #2C1E19;
  --encre-produit: #17181B;
  --espace-bloc: 16px;
  --espace-carte: 24px;
  --espace-colonnes: 34px;
  --espace-gouttiere: clamp(18px, 3.4vw, 44px);
  --espace-grille: 24px;
  --espace-hero: clamp(44px, 6vw, 76px);
  --espace-registre: 52px;
  --espace-section: clamp(64px, 9vw, 120px);
  --filet-encre: rgba(59, 41, 34, .18);
  --fill: #F2F1EC;
  --fond-illustration: #FDF3E7;
  --gradient-atmosphere: radial-gradient(55% 45% at 82% 12%, rgba(252, 212, 164, .55) 0%, rgba(252, 212, 164, 0) 65%), radial-gradient(40% 35% at 12% 78%, rgba(251, 138, 137, .2) 0%, rgba(251, 138, 137, 0) 65%), radial-gradient(50% 40% at 50% 45%, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, 0) 70%);
  --gradient-clairiere: linear-gradient(180deg, var(--paper) 0%, var(--souffle-creme) 100%);
  --gradient-lumiere: linear-gradient(230deg, var(--lumiere-3) 11%, var(--lumiere-2) 39%, var(--lumiere-2) 76%, rgba(246, 240, 231, 0) 110%);
  --gradient-souffle: linear-gradient(158deg, var(--paper) 0%, var(--souffle-2) 100%);
  --gradient-voile: linear-gradient(103deg, var(--souffle-creme) 25%, rgba(254, 247, 240, 0) 54%);
  --lumiere-2: #FFF8F1;
  --lumiere-3: #F6F0E7;
  --logo-encre: #3B2922;
  --logo-encre-sombre: #F9F2ED;
  --lueur-logo-1: rgba(252, 212, 164, .85);
  --lueur-logo-2: rgba(248, 144, 168, .42);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --motion-entree: 800ms;
  --motion-hover: 300ms;
  --motion-micro: 220ms;
  --motion-respiration: 3800ms;
  --motion-revelation: 700ms;
  --ombre-brand: 0 18px 36px -16px rgba(254, 55, 48, .55);
  --ombre-carte: 0 1px 2px rgba(23, 24, 27, .05), 0 14px 40px rgba(23, 24, 27, .07);
  --ombre-relief: inset 0 2px 10px rgba(60, 40, 24, .05), inset -10px -10px 24px rgba(242, 242, 242, .8);
  --paper: #FFFFFF;
  --pastille-active: #E8B4A8;
  --r-lg: 18px;
  --r-md: 13px;
  --r-pill: 999px;
  --r-sm: 8px;
  --r-xl: 24px;
  --sans: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --souffle-2: #FCFCFA;
  --souffle-corail: #FB8A89;
  --souffle-creme: #FEF7F0;
  --souffle-peche: #FCD4A4;
  --stroke-produit: #E9E7E1;
  --stroke-strong: #C9C7BF;
  --stroke-weak: #ECE8E1;
  --text-weak: #63666D;
  --track-data: 0.12em;
  --track-hero: -0.035em;
  --track-titre: 0;
  --type-argument: 18px;
  --type-body: 16px;
  --type-chiffre: 30px;
  --type-chip: 10.5px;
  --type-citation: var(--type-h2);
  --type-h2: clamp(28px, 3.4vw, 42px);
  --type-h3: 16.5px;
  --type-hero: clamp(34px, 3.5vw, 50px);
  --type-lede: 24px;
  --type-legende: 12px;
  --type-small: 14px;
  --width-argument: 844px;
  --width-console: 1032px;
  --width-contenu: 1120px;
  --width-etroit: 720px;
  --width-large: 1220px;
  --width-mesure: 58ch;
  --width-tete: 640px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--background); color: var(--encre); font-family: var(--sans); font-size: var(--type-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--stroke-strong); }
a:hover { text-decoration-color: var(--encre); }
.nav a, .pied nav a { text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; }
/* Les trois voix */
.display, h1, h2 { font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 14; letter-spacing: var(--track-titre); color: var(--encre); text-wrap: balance; }
h1 { font-size: var(--type-h2); line-height: 1.2; }
h2 { font-size: var(--type-h2); line-height: 1.2; }
/* La nav (commune) */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px var(--espace-gouttiere); max-width: var(--width-large); margin: 0 auto; }
/* Le logo (octobre 2026) : la mascotte et le mot, un SVG servi depuis logos/axolo-2026-10.svg
   (texte en --logo-encre) et sa variante -blanc (texte en --logo-encre-sombre) pour les fonds sombres.
   Au survol il s'illumine un peu : une lueur posée EN FOND (::before, sous le logo), pêche vers rose,
   qui s'allume en --motion-hover. Le logo ne bouge pas, c'est la lumière qui vient. */
.wordmark { position: relative; display: flex; align-items: center; isolation: isolate; }
.wordmark img, .wordmark .marque { display: block; height: 32px; width: auto; transition: filter var(--motion-hover) var(--ease-console); }
.wordmark::before { content: ""; position: absolute; z-index: -1; inset: -30% -8%; border-radius: var(--r-pill); pointer-events: none; background: radial-gradient(62% 80% at 30% 50%, var(--lueur-logo-1) 0%, var(--lueur-logo-2) 48%, transparent 100%); filter: blur(8px); opacity: 0; transform: scale(.92); transition: opacity var(--motion-hover) var(--ease-console), transform var(--motion-hover) var(--ease-console); }
.wordmark:hover::before, .wordmark:focus-visible::before { opacity: .55; transform: none; }
.wordmark:hover img, .wordmark:focus-visible img { filter: brightness(1.03); }
@media (max-width: 640px) { .wordmark img, .wordmark .marque { height: 28px; } }
.retour { font-size: var(--type-small); color: var(--text-weak); }
.retour:hover { color: var(--encre); }
/* Les pages document (article, légal) */
.doc-tete { text-align: center; max-width: var(--width-tete); margin: 0 auto; padding: var(--espace-hero) var(--espace-gouttiere) 0; }
.doc-tete .eyebrow { display: block; color: var(--brand); margin-bottom: var(--espace-grille); }
.doc-tete p { color: var(--text-weak); margin-top: 12px; }
.doc-tete .date { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); margin-top: var(--espace-carte); }
.doc { max-width: var(--width-etroit); margin: 0 auto; padding: var(--espace-hero) var(--espace-gouttiere) var(--espace-section); }
.doc h2 { font-size: var(--type-body); font-weight: 800; margin: var(--espace-hero) 0 10px; }
.doc p { color: var(--text-weak); margin-top: 10px; }
.doc p strong { color: var(--encre); font-weight: 700; }
.registre-doc { width: 100%; border-collapse: collapse; font-size: var(--type-small); margin-top: var(--espace-carte); background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-md); overflow: hidden; }
.registre-doc td { padding: 10px 14px; border-bottom: 1px solid var(--stroke-weak); vertical-align: top; }
.registre-doc tr:last-child td { border-bottom: 0; }
.registre-doc td:first-child { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--text-weak); white-space: nowrap; padding-top: 13px; width: 34%; }
.registre-doc td:last-child { font-weight: 600; }
.code-ligne { font-family: var(--mono); font-size: 13px; background: var(--fill); border: 1px solid var(--stroke-produit); border-radius: var(--r-sm); padding: 3px 9px; white-space: nowrap; }
.doc ul { color: var(--text-weak); margin: 10px 0 0 20px; }
.doc li { margin-top: 8px; }
.doc li strong { color: var(--encre); }
.article-fin { text-align: center; margin-top: var(--espace-hero); }
.article-visuel { display: block; width: 100%; height: auto; border-radius: var(--r-xl); border: 1px solid var(--stroke-weak); margin-bottom: var(--espace-hero); }
.lien-linkedin { font-weight: 600; font-size: var(--type-small); }
.filet-doc { border: 0; height: 1px; background: var(--filet-encre); max-width: var(--width-etroit); margin: var(--espace-hero) auto 0; }
footer { border-top: 1px solid var(--stroke-weak); margin-top: var(--espace-hero); padding: 34px 0 44px; }
.pied { max-width: var(--width-contenu); margin: 0 auto; padding-inline: var(--espace-gouttiere); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--text-weak); font-size: 12.5px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pied nav a:hover { color: var(--encre); }
/* La carte de page — un seul gabarit, trois emplois (tuile, chiffre, article) */
.carte { position: relative; background: var(--paper); border: 1px solid var(--stroke-weak); border-radius: var(--r-xl); padding: var(--espace-carte); box-shadow: var(--ombre-relief); transition: transform var(--motion-hover) var(--ease-console); }
.carte:hover { transform: translateY(-2px); }
/* Une carte qui est un lien le dit sous la souris : elle se soulève, prend l-ombre portée,
   son filet se renforce et son visuel respire. La couleur du titre ne bouge pas : l-encre reste
   l-encre, c-est le relief qui signale le clic. */
a.carte { transition: transform var(--motion-hover) var(--ease-console), box-shadow var(--motion-hover) var(--ease-console), border-color var(--motion-hover) var(--ease-console); }
/* Le relief se CREUSE (le même inset, posé deux fois) : la carte reste dans sa matière, elle ne
   bascule pas vers une ombre portée, ce qui faisait un survol sec. */
a.carte:hover, a.carte:focus-visible { transform: translateY(-2px); box-shadow: var(--ombre-relief), var(--ombre-relief); border-color: var(--stroke-strong); }
.p-accueil .article-slot .thumb { transition: transform var(--motion-hover) var(--ease-console); }
.p-accueil .article-slot:hover .thumb { transform: scale(1.02); }
/* Révélation au défilement : masquée SEULEMENT quand le script a signé sa présence (.js sur html). */
.rvl { transition: opacity var(--motion-revelation) ease, transform var(--motion-revelation) var(--ease-console); }
.js .rvl { opacity: 0; transform: translateY(16px); }
.js .rvl.vu { opacity: 1; transform: none; }
/* Dans une grille, les cartes franchissent le seuil ensemble puisqu-elles sont côte à côte :
   sans décalage elles surgissent d-un bloc, ce qui se lit comme un défaut. Un pas de
   --motion-micro/3 par rang suffit à faire une entrée, pas un clignotement. */
.js .p-accueil :is(.tuiles, .articles-grille, .etapes, .registre, .chiffres-cii) > .rvl:nth-child(2) { transition-delay: calc(var(--motion-micro) / 3); }
.js .p-accueil :is(.tuiles, .articles-grille, .etapes, .registre, .chiffres-cii) > .rvl:nth-child(3) { transition-delay: calc(var(--motion-micro) / 3 * 2); }
.js .p-accueil :is(.tuiles, .articles-grille, .etapes, .registre, .chiffres-cii) > .rvl:nth-child(4) { transition-delay: var(--motion-micro); }

/* ---------- 2. listing des articles (.p-articles) et article (.p-article) ---------- */
.p-articles .doc-large { max-width: var(--width-contenu); }
.p-articles .articles-grille, .p-article .articles-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-grille); margin-top: var(--espace-carte); }
@media (max-width: 820px) { .p-articles .articles-grille, .p-article .articles-grille { grid-template-columns: 1fr; } }
.p-articles .article-slot, .p-article .article-slot { display: block; text-decoration: none; }
.p-articles .article-slot .thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--stroke-weak); margin-bottom: 14px; }
.p-articles .article-avenir, .p-article .article-avenir { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 12px; }
.p-articles .article-slot h3, .p-article .article-slot h3 { font-size: var(--type-h3); font-weight: 700; margin-bottom: 6px; color: var(--encre); line-height: 1.25; }
.p-articles .article-slot p, .p-article .article-slot p { color: var(--text-weak); font-size: var(--type-small); margin-top: 0; }
.p-article .lire-aussi { margin-top: var(--espace-hero); border-top: 1px solid var(--stroke-weak); padding-top: var(--espace-hero); }
.p-article .lire-aussi h2 { margin-top: 0; }
.p-article .lire-aussi-tous { text-align: center; margin-top: var(--espace-carte); }
@media (max-width: 820px) { .p-articles .article-slot .thumb, .p-accueil .article-slot .thumb { max-height: 190px; object-position: center; } }

/* ---------- 3. accueil (.p-accueil) — DA du 30/09/2026 ---------- */
.p-accueil a { color: inherit; text-decoration: none; }
.p-accueil .page { max-width: var(--width-contenu); margin: 0 auto; padding-inline: var(--espace-gouttiere); }
/* ── L'atmosphère : en fond des sections d'ouverture, à 60 %, sous voile. Jamais sur une carte. ── */
/* L-atmosphère, relue sur la maquette (nœud 280:6240) : une section à atmosphère est TEINTÉE
   SUR TOUTE SA HAUTEUR, bords francs en haut et en bas, mesuré #FFF8F1 plat sur « Du design au
   code » ; la texture (le souffle) se concentre en BAS de la section, mesurée #FDE1C9 tout en bas
   de « Trois temps ». Pas de miroir, pas de fondu, pas de voile par-dessus : le voile à 75 %
   divisait la présence par deux (saturation 20 contre 38 sur la maquette).
   Pas d-isolation non plus : elle enfermerait les pseudos dans le contexte de la section et une
   section peinte après recouvrirait la précédente. Avec un z-index négatif à la racine, tout
   passe derrière le contenu. La teinte vit DANS le pseudo, jamais sur la section : un fond posé
   sur la section se peindrait par-dessus un pseudo à z-index négatif. */
.p-accueil .atmosphere { position: relative; }
.p-accueil .atmosphere::before, .p-accueil .atmosphere::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-repeat: no-repeat;
  }
/* ::before = la teinte pleine + la vignette radiale, sur toute la section */
/* Plus de gradient d-ambiance : la teinte plate porte la section, la texture en bas la clôt.
   Le radial ajoutait un halo qui montait la saturation à 16 là où la maquette est à 13,6. */
/* DA du 02/10 : fond uni --background partout, aucune teinte de section. Le ::before ne porte plus
   rien ; seule la texture (::after) subsiste, en haut du hero et en bas de « Trois temps ». */
.p-accueil .atmosphere::before { background-color: transparent; }
/* ::after = le souffle, posé en BAS, étiré en largeur seulement (sa hauteur reste la sienne) */
/* La maquette sature le bas des sections (47) plus que le haut du hero (38) : même texture,
   poussée au filtre. Le hero, lui, reste à sa saturation native. */
/* DA du 02/10 : la texture sous « Trois temps » est bien plus douce (sat 20 sur la maquette contre
   47 dans la DA du 30/09). Plus de saturation forcée, et une opacité qui la ramène à cette mesure. */
.p-accueil .atmosphere::after { filter: none; opacity: .62; }
.p-accueil .hero.atmosphere::after { filter: none; opacity: 1; }
.p-accueil .atmosphere::after { background-image: url("/a/fonds/souffle-bas.webp?v=2aa77b04"); background-position: center bottom; background-size: 100% auto; }
/* .bande : une enveloppe qui porte UNE atmosphère pour plusieurs sections, sans aucune
   couture entre elles (Du design au code + Trois temps forment une seule bande sur la maquette). */
.p-accueil .bande > .section { background: transparent; }
/* Le hero est l-inverse : la texture tient le HAUT et remonte derrière l-en-tête transparent,
   sans quoi le crème nu de la nav contre la teinte du hero dessine une ligne fantôme. */
.p-accueil .hero.atmosphere::before, .p-accueil .hero.atmosphere::after { top: calc(-1 * var(--hauteur-entete) - 1px); }
.p-accueil .hero.atmosphere::after { background-image: url("/a/fonds/souffle-haut.webp?v=4e155d3d"); background-position: center top; }
/* ── L'en-tête : transparent sur l'atmosphère, il prend le fond et son bord en collant ── */
.p-accueil .entete { position: sticky; top: 0; z-index: 60; background: transparent; border-bottom: 1px solid transparent; transition: background var(--motion-micro) ease, border-color var(--motion-micro) ease; }
.p-accueil .entete.colle { background: var(--background); border-bottom-color: var(--stroke-weak); }
/* La hauteur de l-en-tête est POSÉE, pas subie par son contenu : c-est elle que le fond du hero
   doit remonter. Laissée au contenu, elle dépassait --espace-hero de 3 px et ces 3 px de crème nu
   faisaient un filet blanc en haut du site. En collant, l-en-tête se tasse d-un bloc. */
.p-accueil { --hauteur-entete: 80px; }
.p-accueil .entete .nav { padding-block: 0; min-height: var(--hauteur-entete); transition: min-height var(--motion-micro) ease; }
.p-accueil .entete.colle .nav { min-height: calc(var(--hauteur-entete) - var(--espace-bloc)); }
.p-accueil .nav-liens { display: flex; align-items: center; gap: 24px; font-size: var(--type-small); color: var(--text-weak); }
.p-accueil .nav-liens a:hover { color: var(--encre); }
.p-accueil .nouveau { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 2px 7px; margin-left: 5px; vertical-align: 2px; }
.p-accueil .nav-droite { display: flex; align-items: center; gap: 10px; }
.p-accueil .lien-calme { font-size: var(--type-small); color: var(--text-weak); padding: 9px 12px; }
.p-accueil .lien-calme:hover { color: var(--encre); }
.p-accueil .pilule-noire { display: inline-block; background: var(--encre); color: var(--accent-ink); border-radius: var(--r-pill); font-weight: 600; font-size: var(--type-small); padding: 10px 20px; transition: transform var(--motion-micro) var(--ease-console), background var(--motion-micro) ease; }
.p-accueil .pilule-noire:hover { transform: translateY(-1px); background: var(--encre-press); }
.p-accueil .pilule-claire { display: inline-block; background: var(--paper); color: var(--encre); border: 1px solid var(--stroke-weak); border-radius: var(--r-pill); font-weight: 600; font-size: var(--type-small); padding: 10px 20px; transition: border-color var(--motion-micro) ease, transform var(--motion-micro) var(--ease-console); }
.p-accueil .pilule-claire:hover { border-color: var(--stroke-strong); transform: translateY(-1px); }
@media (max-width: 900px) { .p-accueil .nav-liens { display: none; } }
/* ── Hero — centré, sobre : h1, lede, un CTA, la fenêtre ── */
.p-accueil .hero { text-align: center; padding: var(--espace-hero) 0; border-bottom: 1px solid var(--filet); }
.p-accueil .hero .page { max-width: var(--width-large); }
.p-accueil .hero h1 { font-size: var(--type-hero); line-height: 1.08; max-width: var(--width-contenu); margin: 0 auto var(--espace-grille); }
/* Le mot cadré du H1 (nœud 427:656) : « design system » dans un cadre --corail de 1,5 px, quatre
   poignées blanches aux angles, l-étiquette IA READY posée au-dessus, un voile --surligne derrière
   le mot et sa virgule. Tout cela est DÉCORATIF (aria-hidden), le titre se lit d-une traite.
   Les cotes du nœud sont à 62 px ; ici tout est en em pour suivre --type-hero. */
.p-accueil .h1-ligne { display: block; }
.p-accueil .mot-cadre { display: inline-block; background: var(--surligne); white-space: nowrap; margin-top: .55em; }
.p-accueil .cadre { position: relative; display: inline-block; border: 1.5px solid var(--corail); padding: 0 .13em; }
.p-accueil .poignee { position: absolute; width: 9px; height: 9px; background: var(--paper); border: 1.5px solid var(--corail); }
.p-accueil .poignee:nth-of-type(1) { top: -6px; left: -6px; }
.p-accueil .poignee:nth-of-type(2) { top: -6px; right: -6px; }
.p-accueil .poignee:nth-of-type(3) { bottom: -6px; left: -6px; }
.p-accueil .poignee:nth-of-type(4) { bottom: -6px; right: -6px; }
.p-accueil .tag-ia { position: absolute; left: -1.5px; bottom: calc(100% + 8px); background: var(--corail); color: var(--paper); font-family: var(--mono); font-weight: 500; font-size: var(--type-small); line-height: 20px; letter-spacing: 0; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
/* Le libellé vit en CSS : il n-entre ni dans le texte du H1 que lisent les moteurs, ni dans celui des lecteurs d-écran. */
.p-accueil .tag-ia::after { content: "IA ready"; }
@media (max-width: 640px) { .p-accueil .mot-cadre { white-space: normal; margin-top: .7em; } }
.p-accueil .hero p.lede { color: var(--text-weak); font-size: var(--type-lede); line-height: 1.33; max-width: var(--width-console); margin: 0 auto var(--espace-grille); text-wrap: balance; }
.p-accueil .hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--espace-hero); }
.p-accueil .hero-actions .pilule-noire, .p-accueil .hero-actions .pilule-claire { padding: 10px 20px; font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
/* ── LA FENÊTRE PRODUIT — la signature. Le produit garde son encre et ses traits neutres. ── */
.p-accueil .console-cadre { max-width: var(--width-console); margin: 0 auto; position: relative; }
.p-accueil .fenetre { background: var(--paper); border: 1px solid var(--stroke-produit); border-radius: var(--r-lg); box-shadow: var(--ombre-carte); overflow: hidden; text-align: left; }
.p-accueil .fenetre-barre { display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-bottom: 1px solid var(--stroke-produit); background: var(--accent-ink); }
.p-accueil .pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--stroke-produit); }
.p-accueil .pastille:first-child { background: var(--pastille-active); }
.p-accueil .fenetre-url { flex: 1; text-align: center; font-family: var(--mono); font-size: var(--type-chip); color: var(--text-weak); letter-spacing: .06em; }
.p-accueil .fenetre-corps { background: var(--gradient-lumiere); }
.p-accueil .fenetre-video .ecran { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--lumiere-2); }
.p-accueil .mascotte { position: absolute; z-index: 3; width: auto; pointer-events: none; user-select: none; }
/* Perchoirs relevés au navigateur par le DA (01/10) : un perchoir se règle à l'œil, pose par pose. */
.p-accueil .mascotte-console { height: clamp(78px, 7.6vw, 109px); top: -90px; left: 27px; }
/* ── Avec Axolo — un seul bloc : mascotte, eyebrow, citation, argument, registre ── */
.p-accueil .probleme { text-align: center; padding: var(--espace-section) 0; border-bottom: 1px solid var(--filet); }
.p-accueil .probleme .page > * + * { margin-top: var(--espace-grille); }
.p-accueil .mascotte-flux { display: block; width: auto; }
.p-accueil .mascotte-centre { margin-inline: auto; height: clamp(70px, 6.3vw, 90px); max-width: 100%; object-fit: contain; }
/* La pose « jetable » est une SCÈNE (le personnage et ses papiers) : elle est large, donc on
   la règle sur la hauteur du personnage et on la laisse s'étendre, sans dépasser la colonne. */
.p-accueil .mascotte-jetable { height: clamp(70px, 6.25vw, 90px); }
.p-accueil .eyebrow { display: block; color: var(--corail); font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; }
.p-accueil .probleme blockquote p:first-child { font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 14; font-size: var(--type-citation); line-height: 1.2; letter-spacing: var(--track-titre); color: var(--encre); text-wrap: balance; }
.p-accueil .probleme .argument { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 14; font-size: var(--type-argument); line-height: 1.38; color: var(--encre); max-width: var(--width-argument); margin: var(--espace-grille) auto 0; }
.p-accueil .registre { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--espace-registre); max-width: var(--width-etroit); margin-inline: auto; text-align: left; }
.p-accueil .rang { display: grid; grid-column: 1 / -1; grid-template-columns: max-content 1fr; grid-template-columns: subgrid; align-items: baseline; margin-top: var(--espace-grille); padding-top: calc(var(--espace-grille) * 2 / 3); border-top: .5px solid var(--filet-encre); }
.p-accueil .rang:first-child { margin-top: 0; }
.p-accueil .rang .etiquette { font-family: var(--mono); font-size: var(--type-chip); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--corail); white-space: nowrap; }
.p-accueil .rang p { font-family: var(--display); font-variation-settings: "opsz" 14; font-weight: 500; font-size: var(--type-body); line-height: 1.55; color: var(--text-weak); }
.p-accueil .rang strong { color: var(--encre); font-weight: 700; }
/* ── Sections communes ── */
/* Deux pas, et deux seulement : --espace-hero entre sections courantes, --espace-section pour
   les respirations amples. Les quatre grands raccords tombent ainsi tous sur la même valeur ;
   la bande « confiance » reste serrée des deux côtés, ses filets font la frontière. */
.p-accueil .section { padding: var(--espace-hero) 0; }
.p-accueil .section-tete { max-width: var(--width-tete); margin: 0 auto; text-align: center; }
.p-accueil .section-tete .eyebrow { margin-bottom: var(--espace-bloc); }
.p-accueil .section-tete p { color: var(--text-weak); margin-top: var(--espace-bloc); }
/* ── Comment ça marche — 4 tuiles à relief, chacune ouverte par un creux où joue la mini-UI ── */
.p-accueil .tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-grille); margin-top: calc(var(--espace-grille) * 2.5); }
@media (max-width: 820px) { .p-accueil .tuiles { grid-template-columns: 1fr; } }
.p-accueil .tuile { position: relative; }
.p-accueil .mini { position: relative; background: var(--gradient-voile), var(--gradient-atmosphere), var(--fill); background-size: cover; background-position: center; border-radius: var(--r-md); min-height: 148px; padding: 16px; display: flex; flex-direction: column; gap: 8px; justify-content: center; margin-bottom: 14px; }
.p-accueil .tuile h3 { font-family: var(--sans); font-size: var(--type-h3); font-weight: 700; letter-spacing: -0.01em; color: var(--encre); margin-bottom: 4px; }
.p-accueil .tuile > p { color: var(--text-weak); font-size: var(--type-small); }
/* Les quatre creux portent chacun leur fond déposé (les « Container » du Figma), sous le voile. */
.p-accueil .tuile:nth-child(1) .mini { background-image: var(--gradient-voile), url("/a/fonds/creux-1.webp"); }
.p-accueil .tuile:nth-child(2) .mini { background-image: var(--gradient-voile), url("/a/fonds/creux-2.webp"); }
.p-accueil .tuile:nth-child(3) .mini { background-image: var(--gradient-voile), url("/a/fonds/creux-3.webp"); }
.p-accueil .tuile:nth-child(4) .mini { background-image: var(--gradient-voile), url("/a/fonds/creux-4.webp"); }
/* mini-UI 1 : le code instancie le vrai composant */
.p-accueil .ligne-code { font-family: var(--mono); font-size: 11px; color: var(--text-weak); background: var(--paper); border: 1px solid var(--stroke-produit); border-radius: var(--r-sm); padding: 8px 11px; align-self: flex-start; }
.p-accueil .ligne-code b { color: var(--encre-produit); font-weight: 500; }
.p-accueil .rendu { display: flex; align-items: center; gap: 10px; }
.p-accueil .rendu .pilule-noire { pointer-events: none; font-size: 12.5px; padding: 8px 16px; }
.p-accueil .etat { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-pill); padding: 3px 8px; }
.p-accueil .etat.ok { background: var(--fill); color: var(--encre-produit); }
.p-accueil .etat.alerte { border: 1px solid var(--brand); color: var(--brand); }
/* mini-UI 2 : prod ⇄ figma */
.p-accueil .aller-retour { display: flex; align-items: center; gap: 10px; justify-content: center; }
.p-accueil .noeud { background: var(--paper); border: 1px solid var(--stroke-produit); border-radius: var(--r-sm); padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--encre-produit); }
.p-accueil .fleches { font-size: 15px; color: var(--brand); letter-spacing: 2px; }
/* mini-UI 3 : le PM demande, l'agent répond (la marque en avatar) */
.p-accueil .demande { display: flex; gap: 9px; align-items: flex-start; }
.p-accueil .avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--encre); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.p-accueil .avatar-agent { background: var(--paper); }
.p-accueil .avatar-agent img { width: 14px; height: 13px; display: block; }
.p-accueil .demande p { font-size: 12.5px; background: var(--paper); border-radius: var(--r-sm); padding: 8px 11px; color: var(--encre-produit); }
/* mini-UI 4 : les connecteurs, avec la marque de l'outil dans sa case */
.p-accueil .connecteurs { display: flex; flex-direction: column; gap: 7px; }
.p-accueil .connecteur { display: flex; align-items: center; gap: 9px; background: var(--paper); border-radius: var(--r-sm); padding: 8px 11px; font-size: 12.5px; font-weight: 600; color: var(--encre-produit); }
.p-accueil .connecteur .etat { margin-left: auto; }
.p-accueil .connecteur .case { width: 20px; height: 20px; border-radius: 5px; border: .5px solid var(--stroke-produit); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.p-accueil .connecteur .case img { display: block; height: 11px; width: auto; }
/* Les mini-UI jouent LEUR mécanisme à la révélation de la tuile */
.js .p-accueil .tuile .ligne-code { clip-path: inset(0 100% 0 0); }
.js .p-accueil .tuile.vu .ligne-code { animation: ecrire-code var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * .25) forwards; }
@keyframes ecrire-code { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
.js .p-accueil .tuile .rendu, .js .p-accueil .tuile .demande, .js .p-accueil .tuile .connecteur { opacity: 0; transform: translateY(6px); }
@keyframes repondre { to { opacity: 1; transform: none; } }
.js .p-accueil .tuile.vu .rendu { animation: repondre var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * 1.25) forwards; }
.js .p-accueil .tuile.vu .fleches { animation: osciller var(--motion-respiration) ease-in-out infinite; }
@keyframes osciller { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.js .p-accueil .tuile.vu .demande:first-child { animation: repondre var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * .25) forwards; }
.js .p-accueil .tuile.vu .demande + .demande { animation: repondre var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * 1.375) forwards; }
.js .p-accueil .tuile.vu .connecteur:nth-child(1) { animation: repondre var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * .25) forwards; }
.js .p-accueil .tuile.vu .connecteur:nth-child(2) { animation: repondre var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * .6875) forwards; }
.js .p-accueil .tuile.vu .connecteur:nth-child(3) { animation: repondre var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * 1.125) forwards; }
.js .p-accueil .tuile.vu .connecteur:nth-child(4) { animation: repondre var(--motion-entree) var(--ease-console) calc(var(--motion-entree) * 1.5625) forwards; }
.js .p-accueil .tuile.vu .connecteur .etat { animation: veiller var(--motion-respiration) ease-in-out infinite; }
.js .p-accueil .tuile.vu .connecteur:nth-child(2) .etat { animation-delay: calc(var(--motion-respiration) / 3); }
.js .p-accueil .tuile.vu .connecteur:nth-child(3) .etat { animation-delay: calc(var(--motion-respiration) / 3 * 2); }
.js .p-accueil .tuile.vu .connecteur:nth-child(4) .etat { animation-delay: calc(var(--motion-respiration) / 2); }
@keyframes veiller { 0%, 100% { opacity: .65; } 12% { opacity: 1; } }
/* La mascotte perchée sur la première tuile */
.p-accueil .mini-perchoir { position: relative; }
.p-accueil .mascotte-mini { height: clamp(76px, 7vw, 101px); top: calc(-.62 * var(--espace-hero)); right: var(--espace-carte); }
/* ── Comment on l'implémente — 3 colonnes OUVERTES sous un filet, chacune avec sa mascotte ── */
/* Le filet ouvre les colonnes : il était calé sous les mascottes, elles sont retirées (01/10). */
.p-accueil .etapes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-colonnes); margin-top: calc(var(--espace-grille) * 2); padding-top: var(--espace-grille); }
.p-accueil .etapes::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--brand) 0 1px, transparent 1px 8px); opacity: .55; }
@media (max-width: 820px) { .p-accueil .etapes { grid-template-columns: 1fr; gap: var(--espace-hero); } .p-accueil .etapes::before { display: none; } }
.p-accueil .etape { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.p-accueil .etape .etiquette { font-family: var(--mono); font-size: var(--type-legende); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--corail); }
.p-accueil .etape h3 { font-family: var(--sans); font-size: var(--type-h3); font-weight: 700; color: var(--encre); line-height: 1.1; }
.p-accueil .etape p { color: var(--text-weak); font-size: var(--type-small); }
/* ── Financement — pleine largeur sur atmosphère, alignée à gauche, 4 chiffres à relief ── */
/* ── Financement (maquette 412:1598) : en-tête en deux colonnes, la mascotte CII dans le titre,
   quatre chiffres clés sur un filet. Fond uni, aucune atmosphère. ── */
.p-accueil .cii { background: var(--fond-section); padding: var(--espace-section) 0; }
.p-accueil .cii .page { max-width: var(--width-large); }
/* La colonne du titre est un peu plus large que celle du texte : à 36 px, « Crédit d-Impôt Innovation. »
   doit tenir sur sa ligne pour que le titre fasse trois lignes, comme sur la maquette. */
.p-accueil .cii-tete { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
/* La mascotte à gauche, et à sa droite l-eyebrow AU-DESSUS du titre (demande du 02/10 : pas au-dessus de l-axolotl). */
.p-accueil .cii-titre { display: flex; align-items: center; gap: calc(var(--espace-bloc) * 1.75); }
.p-accueil .cii-titre .eyebrow { margin-bottom: calc(var(--espace-bloc) / 2); }
.p-accueil .mascotte-cii { flex: none; width: 100px; height: 137px; object-fit: contain; display: block; }
.p-accueil .cii h2 { text-align: left; font-size: 32px; line-height: 1.22; }
.p-accueil .cii-texte { padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.p-accueil .cii-texte p { font-size: 17px; line-height: 1.53; color: var(--text-weak); }
.p-accueil .cii-texte p strong { color: var(--encre); font-weight: 600; }
.p-accueil .cii-texte p.cii-note { font-size: var(--type-small); line-height: 1.43; }
.p-accueil .chiffres-cii { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; }
.p-accueil .chiffre-cii { border-top: 1px solid var(--filet); padding-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.p-accueil .chiffre-cii b { display: block; font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 14; font-size: 36px; line-height: 42px; letter-spacing: var(--track-hero); color: var(--encre); }
.p-accueil .chiffre-cii span { display: block; font-size: 15px; line-height: 22px; color: var(--text-weak); }
@media (max-width: 820px) { .p-accueil .cii-tete { grid-template-columns: 1fr; gap: var(--espace-carte); } .p-accueil .cii-texte { padding-top: 0; } }
/* En colonne étroite la mascotte passe AU-DESSUS du titre : à côté, elle le comprimait sur 230 px
   (huit lignes de 36). Et le titre reprend l-échelle des H2 au lieu de ses 36 px fixes. */
@media (max-width: 640px) { .p-accueil .cii-titre { flex-direction: column; align-items: flex-start; gap: var(--espace-carte); } .p-accueil .cii h2 { font-size: var(--type-h2); } }
/* ── Articles — dérivée : 3 cartes à relief ── */
/* Les cartes d-article pesaient plus que le reste (337 px de haut, plaque de 184) : grille ramenée
   d-une colonne d-espacement de chaque côté, scène posée à 88 % de sa plaque, carte moins rembourrée. */
.p-accueil .articles-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-grille); margin: calc(var(--espace-grille) * 2.5) auto 0; max-width: calc(var(--width-console) - 2 * var(--espace-colonnes)); }
.p-accueil .article-slot.carte { padding: 20px; }
@media (max-width: 820px) { .p-accueil .articles-grille { grid-template-columns: 1fr; } }
.p-accueil .article-slot { display: block; }
/* La vignette est une PLAQUE de --fond-illustration ; la scène est détourée et se pose
   dessus en `contain`, jamais rognée. Un seul crème, un seul format : c'est ce qui referme
   les huit crèmes et les trois formats du registre cadré (mesurés non conformes le 05/09). */
.p-accueil .article-slot .thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; padding: 10px; background: var(--fond-illustration); border-radius: var(--r-md); border: 1px solid var(--stroke-weak); margin-bottom: 14px; }
.p-accueil .article-slot .article-avenir { color: var(--brand); display: block; margin-bottom: 12px; }
.p-accueil .article-slot h3 { font-family: var(--sans); font-size: var(--type-h3); font-weight: 700; margin-bottom: 6px; color: var(--encre); }
.p-accueil .article-slot p { color: var(--text-weak); font-size: var(--type-small); }
.p-accueil .articles-note { text-align: center; margin-top: var(--espace-carte); }
.p-accueil .note-sep { color: var(--text-weak); }
.p-accueil .lien-linkedin { font-weight: 600; font-size: var(--type-small); color: var(--text-weak); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--stroke-strong); }
.p-accueil .lien-linkedin:hover { color: var(--encre); text-decoration-color: var(--encre); }
.p-accueil .mascotte-carte { height: clamp(80px, 7.3vw, 105px); top: -94px; right: var(--espace-carte); }
@media (max-width: 820px) { .p-accueil .mascotte-carte, .p-accueil .mascotte-mini { display: none; } }
/* ── Références — sur l'atmosphère, avec sa mascotte : la file désaturée ── */
/* Confiance : les logos seuls, sans fond ni mascotte, sur une hauteur courte. */
/* Aucune marge extérieure : les filets tiennent la frontière, et la marge des sections
   voisines suffit. Empilée, elle creusait 154 px au-dessus et 186 px en dessous des filets. */
/* L-appel de fin de section : une relance courte et le même bouton partout. Pas de cadre,
   pas de fond : il se pose dans le flux, à la façon de la note sous les étapes. */
.appel { text-align: center; margin-top: var(--espace-section); }
.appel p { color: var(--text-weak); font-size: var(--type-body); margin-bottom: var(--espace-bloc); text-wrap: balance; }
/* ── Fondateur (maquette 412:2192) : bloc blanc entre filets, portrait à gauche sur une plaque
   --fill voilée de souffle, texte à droite, « Avec qui » sous un filet, trois liens soulignés. ── */
.p-accueil .fondateur { background: var(--paper); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: var(--espace-section) 0; }
.p-accueil .fondateur-grille { display: grid; grid-template-columns: 266px 1fr; gap: calc(var(--espace-carte) * 2); align-items: start; }
.p-accueil .portrait { aspect-ratio: 266 / 302.5; border-radius: var(--r-md); overflow: hidden; }
.p-accueil .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-accueil .fondateur-texte { display: flex; flex-direction: column; gap: 20px; }
.p-accueil .fondateur-texte .eyebrow { margin-bottom: -8px; }
.p-accueil .fondateur h2 { text-align: left; line-height: 1.2; }
.p-accueil .fondateur-sous { font-size: 20px; line-height: 1.5; color: var(--encre); }
.p-accueil .fondateur-texte > p { font-size: 17px; line-height: 1.53; color: var(--text-weak); }
.p-accueil .fondateur-texte p strong { color: var(--encre); font-weight: 600; }
.p-accueil .avec-qui { border-top: 1px solid var(--filet); padding-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.p-accueil .avec-qui h3 { font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 14; font-size: var(--type-argument); line-height: 1.45; color: var(--encre); }
.p-accueil .avec-qui p { font-size: var(--type-body); line-height: 1.5; color: var(--text-weak); }
.p-accueil .avec-qui .clients { color: var(--corail); font-weight: 700; }
.p-accueil .fondateur-liens { display: flex; flex-wrap: wrap; gap: var(--espace-carte); font-size: 15px; line-height: 22px; font-weight: 600; }
.p-accueil .fondateur-liens a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; transition: color var(--motion-hover) ease; }
.p-accueil .fondateur-liens a:hover { color: var(--corail); }
@media (max-width: 820px) { .p-accueil .fondateur-grille { grid-template-columns: 1fr; } .p-accueil .portrait { max-width: 266px; } }
/* ── FAQ — une vraie tête de section, l'accordéon sur --paper ── */
/* ── FAQ (maquette 412:2229) : bloc blanc entre deux filets ; le titre tient la colonne gauche,
   les questions la droite, chacune sur un filet, un chevron qui se retourne. Pas de carte. ── */
.p-accueil .faq { background: var(--paper); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: var(--espace-section) 0; }
.p-accueil .faq-grille { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 64px; align-items: start; }
.p-accueil .faq h2 { text-align: left; line-height: 1.2; }
.p-accueil .faq-liste { border-bottom: 1px solid var(--filet); }
.p-accueil details { border-top: 1px solid var(--filet); padding: 18px 0; transition: none; }
.p-accueil summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-bloc); font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 14; font-size: var(--type-argument); line-height: 1.45; color: var(--encre); }
.p-accueil summary::-webkit-details-marker { display: none; }
.p-accueil summary .chevron { flex: none; color: var(--encre); transition: transform var(--motion-micro) var(--ease-console); }
.p-accueil details[open] summary .chevron { transform: rotate(180deg); }
.p-accueil summary:hover { color: var(--corail); }
.js .p-accueil details[open] p { animation: repondre var(--motion-micro) var(--ease-console) forwards; opacity: 0; transform: translateY(-4px); }
@supports (interpolate-size: allow-keywords) {
  .p-accueil .faq { interpolate-size: allow-keywords; }
  .p-accueil details::details-content { block-size: 0; overflow: hidden; transition: block-size var(--motion-micro) var(--ease-console), content-visibility var(--motion-micro) allow-discrete; }
  .p-accueil details[open]::details-content { block-size: auto; }
}
.p-accueil details p { padding-top: 8px; color: var(--text-weak); font-size: var(--type-body); line-height: 1.5; }
.p-accueil details p strong { color: var(--encre); }
@media (max-width: 820px) { .p-accueil .faq-grille { grid-template-columns: 1fr; gap: var(--espace-carte); } }
/* ── La promotion du logiciel (07/10) : une bande sur --fond-section, texte à gauche, l-écran du
   produit à droite, un bouton. Une seule idée : le logiciel existe, la liste est ouverte. ── */
.p-accueil .promo { background: var(--fond-section); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: var(--espace-section) 0; }
.p-accueil .promo-grille { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: var(--espace-colonnes); align-items: center; }
.p-accueil .promo .eyebrow { margin-bottom: var(--espace-bloc); }
.p-accueil .promo h2 { text-align: left; line-height: 1.15; margin-bottom: var(--espace-bloc); }
.p-accueil .promo p { color: var(--text-weak); font-size: var(--type-argument); line-height: 1.45; margin-bottom: var(--espace-grille); }
.p-accueil .promo .pilule-noire + .nouveau { margin-left: 12px; vertical-align: middle; }
.p-accueil .promo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--ombre-carte); }
@media (max-width: 820px) { .p-accueil .promo-grille { grid-template-columns: 1fr; } }
/* ── Le bandeau d-appel (maquette 416:2467) : sur le fond uni, centré, eyebrow, question, bouton. ── */
.p-accueil .bandeau { padding: var(--espace-hero) 0; text-align: center; }
.p-accueil .bandeau .page { display: flex; flex-direction: column; align-items: center; gap: var(--espace-bloc); }
.p-accueil .bandeau h2 { font-size: var(--type-h2); line-height: 1.2; }
.p-accueil .bandeau .pilule-noire { padding: 14px 24px; font-size: var(--type-body); line-height: 1.5; }
/* ── Pied — posé sur un filet d'encre, plus d'air ── */
.p-accueil footer { background: var(--paper); border-top: 1px solid var(--filet); margin-top: 0; padding: var(--espace-hero) 0; }
.p-accueil .pied-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.p-accueil .pied-tag { color: var(--text-weak); font-size: 13.5px; margin-top: 6px; }
.p-accueil .pied-tag a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stroke-strong); }
.p-accueil .pied-tag a:hover { color: var(--encre); text-decoration-color: var(--encre); }
.p-accueil .pied-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 26px; color: var(--text-weak); font-size: 12.5px; }
.p-accueil .pied-bas nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* ── Mobile ── */
/* 445 caractères centrés tiennent sur grand écran ; en colonne étroite c-est un pavé de dix
   lignes dont chaque début se cherche. À gauche, la lecture retrouve son bord. */
@media (max-width: 820px) { .p-accueil .probleme .argument { text-align: left; } }
@media (max-width: 640px) {
  .p-accueil .hero p.lede { font-size: var(--type-argument); }
  .p-accueil .registre { grid-template-columns: 1fr; }
  .p-accueil .rang { grid-template-columns: 1fr; gap: .5em; }
  /* « left: 0 » visait le bord du bloc, pas celui du contenu : la mascotte mordait de 12 px
     dans la gouttière. Elle s-aligne maintenant sur la colonne. */
  .p-accueil .mascotte-console { height: 62px; top: -8px; left: var(--espace-gouttiere); }
  .p-accueil .hero-actions .pilule-noire { width: 100%; justify-content: center; }
  .p-accueil .chiffres-cii { grid-template-columns: 1fr 1fr; gap: var(--espace-grille); }
}
/* ── Mouvement — l'arrivée orchestrée du hero, puis les révélations ── */
.js .p-accueil .up { opacity: 0; transform: translateY(14px); animation: lever var(--motion-entree) var(--ease-console) forwards; }
.p-accueil .up-2 { animation-delay: calc(var(--motion-entree) * .15); }
.p-accueil .up-3 { animation-delay: calc(var(--motion-entree) * .3); }
.p-accueil .up-4 { animation-delay: calc(var(--motion-entree) * .475); }
.p-accueil .up-5 { animation-delay: calc(var(--motion-entree) * .6875); }
.js .p-accueil .console-cadre.up { animation-name: ouvrir; }
@keyframes ouvrir { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes lever { to { opacity: 1; transform: none; } }
/* La garde, non négociable : sous mouvement réduit, tout arrive posé et rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .js .p-accueil .up, .js .rvl, .js .p-accueil .tuile .ligne-code, .js .p-accueil .tuile .rendu, .js .p-accueil .tuile .demande, .js .p-accueil .tuile .connecteur { opacity: 1; transform: none; animation: none; transition: none; clip-path: none; }
  .js .p-accueil .tuile .fleches, .js .p-accueil .tuile .connecteur .etat { animation: none; }
  .wordmark::before { transition: none; }
  .carte:hover, a.carte:hover, .p-accueil .article-slot:hover .thumb, .p-accueil .pilule-noire:hover, .p-accueil .pilule-claire:hover { transform: none; }
}