/* ═══════════════════════════════════════════════════════════════════════════════
   Oyant : feuille de style du site
   ═══════════════════════════════════════════════════════════════════════════════

   DIRECTION : le memo, pas la page d'atterrissage.

   Le public de ce site est tenu au secret professionnel et doit decider en trente
   secondes s'il nous fait confiance. Or l'ancienne version de cette feuille jouait
   contre ce message : halos flous en degrade, sections centrees, cartes arrondies
   partout. C'est le vocabulaire visuel d'une jeune pousse qui leve des fonds, et
   c'est precisement ce dont un avocat ou un medecin a appris a se mefier.

   On prend donc le registre de ce que ces metiers lisent tous les jours : un
   document compose. Filets d'un pixel comme seule structure, sections numerotees
   comme des articles, alignement a gauche, serif editorial reserve aux grandes
   declarations.

   Et un motif graphique qui DIT la promesse au lieu de la contredire : la ou un
   halo diffuse, l'anneau enferme. Le logo est deja deux cercles concentriques ;
   agrandi derriere le titre, il devient une frontiere.

   POLICES : celles de l'application, pas celles du site. Detail et motif juste
   en dessous. Auto-hebergees, la CSP etant `default-src 'self'` et ne devant pas
   etre assouplie ; licences OFL dans `polices/`.

   ⚠️ Fraunces ne sert qu'aux titres et aux chiffres, IBM Plex Sans porte tout le
   reste : le serif garde sa force parce qu'il est rare.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ⛔ **Les memes dessins que l'application, et ce n'est pas negociable.** Le site avait d'abord
   recu deux familles choisies pour lui seul, alors que `oyant-desktop` embarque deja Fraunces,
   IBM Plex Sans et IBM Plex Mono. Une marque qui change de typographie entre sa page et son
   logiciel se contredit a l'endroit ou elle demande qu'on lui fasse confiance.
   Les fichiers sont pris tels quels dans `painteau/cdn`, que le commentaire de
   `src/styles/fontes.css` de l'application designe comme la source commune, et les empreintes
   ont ete comparees : ce sont octet pour octet les memes. Licences OFL dans `polices/`.

   ⚠️ Un seul ecart avec l'application, delibere : `font-display: swap` ici, `block` la-bas. Une
   fenetre d'application est convoquee pour quelques secondes et un echange de fonte en cours de
   lecture y gene plus qu'un chargement local ; une page web lue a distance doit au contraire
   s'afficher avant que la fonte arrive. */
@font-face {
  font-family: 'Fraunces';
  src: url('polices/Fraunces-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('polices/IBMPlexSans-Variable.woff2') format('woff2-variations');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('polices/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

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

:root {
  /* Palette imposee, partagee avec l'application de bureau et l'app iOS. */
  --blue:   #4682b4;
  --blue-l: #5a9fd4;
  --blue-d: #2d5a8e;
  --orange: #dc8c14;
  --red:    #dc3232;
  --bg:     #0e0e16;
  --bg2:    #121220;
  --bg3:    #1a1a28;
  --card:   #1a1a28;
  --border: rgba(255,255,255,.07);
  --text:   #f2f0ec;
  --muted:  #8f8ea0;

  /* Un filet, et un seul : c'est toute la structure du document. */
  --filet: 1px solid rgba(255,255,255,.09);
  --filet-fort: 1px solid rgba(255,255,255,.16);

  --radius: 10px;
  --radius-s: 4px;

  /* Memes noms de roles que `src/styles/socle.css` de l'application, avec les memes replis :
     un lecteur qui compare les deux ne doit pas trouver deux vocabulaires pour une seule marque. */
  --titre: 'Fraunces', Georgia, serif;
  --corps: 'IBM Plex Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Rythme vertical : une seule valeur declinee, pour que rien ne flotte. */
  --section: clamp(72px, 9vw, 128px);

  /* L'anneau du hero : son diametre, et la distance de son CENTRE au bord droit.
     Ces deux valeurs suffisent a placer les deux cercles ET l'apercu de
     l'application exactement sur le meme centre. */
  --anneau: 760px;
  --anneau-centre: 205px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--corps);
  background: var(--bg);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  /* Compteur des sections : la numerotation vient du CSS, donc le HTML ne porte
     aucun numero a maintenir a la main quand on reordonne une section. */
  counter-reset: section;
  -webkit-font-smoothing: antialiased;
}

/* Grain de papier. Une turbulence SVG en `data:` (autorisee par `img-src data:`),
   a opacite tres basse : elle enleve l'aspect numerique plat sans se voir. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

a { color: var(--blue-l); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
/* Un anneau de focus visible partout, une fois, plutot qu'oublie composant par
   composant : c'est la seule façon qu'il ne manque a aucun element. */
a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible {
  outline: 2px solid var(--blue-l); outline-offset: 3px; border-radius: var(--radius-s);
}

code { font-family: var(--mono); font-size: .92em; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ── Titres ───────────────────────────────────────────────────────────────────
   Le serif ne sert qu'ici et aux chiffres. Interlettrage negatif et interligne
   serre : a grand corps, une composition lache fait amateur. */
h1, h2 {
  font-family: var(--titre); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.3rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-family: var(--corps); font-weight: 700; font-size: 1.05rem; line-height: 1.4; }

/* ── Navigation ─────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(14px) saturate(1.2);
  background: rgba(14,14,22,.78);
  border-bottom: var(--filet);
}
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--titre); font-weight: 600; font-size: 1.32rem;
  letter-spacing: -.01em; color: var(--text);
}
.logo:hover { text-decoration: none; color: var(--text); }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a { color: var(--muted); font-size: .94rem; }
.nav-links > a:hover { color: var(--text); text-decoration: none; }
@media (max-width: 860px) {
  .nav-links > a:not(.btn-nav) { display: none; }
}

/* ── Boutons ──────────────────────────────────────────────────────────────────
   Angles peu arrondis : un bouton tres arrondi appartient au registre de
   l'application grand public, pas a celui du document. */
.btn-primary, .btn-secondary, .btn-nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--corps); font-weight: 700; font-size: .98rem;
  padding: 14px 24px; border-radius: var(--radius-s);
  border: 1px solid transparent; cursor: pointer;
  transition: background .16s, border-color .16s, transform .16s;
}
.btn-primary {
  background: var(--blue-d); color: #fff;
  border-color: var(--blue); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset;
}
.btn-primary:hover { background: #35699f; text-decoration: none; transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--text); border-color: rgba(255,255,255,.22); }
.btn-secondary:hover { border-color: var(--blue-l); text-decoration: none; }
.btn-nav { padding: 9px 17px; font-size: .9rem; color: var(--text); border-color: rgba(255,255,255,.18); }
.btn-nav:hover { border-color: var(--blue-l); text-decoration: none; }
.btn-nav-plein { background: var(--blue-d); border-color: var(--blue); }
.btn-nav-plein:hover { background: #35699f; }
.btn-gros { font-size: 1.08rem; padding: 17px 32px; }

/* ── Etiquette ────────────────────────────────────────────────────────────────
   Pas une pilule coloree : petites capitales espacees, comme une mention de
   document. */
.badge {
  display: inline-block;
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--blue-l);
  padding-bottom: 10px; border-bottom: 1px solid rgba(90,159,212,.35);
}

/* ── Hero ─────────────────────────────────────────────────────────────────────
   Composition asymetrique : le texte tient dans une colonne calee a gauche et
   l'anneau deborde a droite, plutot qu'un bloc centre dans le vide. */
.hero {
  position: relative; overflow: hidden;
  min-height: min(90vh, 860px);
  padding: 168px 28px 88px;
  display: flex; align-items: center;
}
/* Sur telephone, 168 px de marge haute mangent un tiers de l'ecran avant le premier mot, et la
   barre fixe n'en occupe qu'une soixantaine. */
@media (max-width: 700px) {
  .hero { padding: 104px 22px 64px; min-height: 0; }
  .container { padding: 0 22px; }
}
.hero-inner { position: relative; z-index: 2; max-width: 700px; width: 100%; margin: 0 auto; }
@media (min-width: 1180px) {
  .hero-inner { margin: 0 auto 0 max(28px, calc((100vw - 1120px) / 2)); }
}

/* L'anneau : la frontiere, en lieu et place des halos. Deux cercles concentriques
   comme le logo, agrandis et a peine visibles. Purement decoratif, donc masque
   aux technologies d'assistance cote HTML. */
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-bg::before, .hero-bg::after {
  content: ""; position: absolute; border-radius: 50%;
  top: 50%; transform: translateY(-50%);
  /* ⚠️ Tailles en pixels et non en `vw`, et un CENTRE unique declare en variable : c'est ce qui
     permet d'aligner exactement l'apercu de l'application sur ce centre. Avec des tailles
     relatives, le centre se deplaçait avec la largeur de la fenetre et rien ne restait cale. */
}
.hero-bg::before {
  width: var(--anneau); height: var(--anneau);
  right: calc(var(--anneau-centre) - var(--anneau) / 2);
  border: 1px solid rgba(90,159,212,.20);
  background: radial-gradient(circle at 50% 50%, rgba(70,130,180,.09), transparent 68%);
}
.hero-bg::after {
  width: calc(var(--anneau) / 2); height: calc(var(--anneau) / 2);
  right: calc(var(--anneau-centre) - var(--anneau) / 4);
  border: 1px solid rgba(90,159,212,.32);
  background: radial-gradient(circle at 50% 50%, rgba(70,130,180,.12), transparent 74%);
}
@media (max-width: 1240px) {
  .hero-bg::before, .hero-bg::after { opacity: .45; }
}

/* `.orb` n'est plus employe dans le HTML. La regle reste neutralisee et nommee :
   si un ancien fragment de page revient, il ne ressuscitera pas le halo. */
.orb, .orb1, .orb2, .orb3 { display: none; }

.gradient { color: var(--blue-l); font-style: italic; }

.hero-sub {
  margin-top: 26px; font-size: 1.14rem; line-height: 1.68;
  color: #d8d6e2; max-width: 40em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-note { margin-top: 18px; font-size: .9rem; color: var(--muted); }

/* Chiffres : serif, chasse fixe, separes par des filets et non enfermes dans une
   boite. Un chiffre dans un cadre est une statistique de tableau de bord ; un
   chiffre sous un filet est une mention de rapport. */
/* ⚠️ Une grille a colonnes egales et non un `flex` : en flex, « Hors ligne » repoussait ses
   voisines et les quatre filets verticaux ne tombaient plus au meme pas. */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 52px; border-top: var(--filet-fort);
}
@media (max-width: 620px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
/* ⛔ Le filet et le retrait sont sur CHAQUE cellule, et surtout PAS sur `.stat + .stat`. Un
   selecteur de fratrie ignore les retours a la ligne d'une grille : en deux colonnes sur
   telephone, la premiere cellule de la DEUXIEME ligne heritait donc d'un retrait et d'un filet
   qui n'avaient plus aucun sens, et « Hors ligne » apparaissait decale sous « Zero » qui ne
   l'etait pas. Uniforme veut dire aucun cas particulier, a n'importe quel nombre de colonnes. */
.stat { padding: 22px 18px 4px; border-left: var(--filet); }
.stat-n {
  display: block; font-family: var(--titre); font-weight: 500;
  font-size: 1.62rem; line-height: 1.15; color: var(--blue-l);
  font-variant-numeric: tabular-nums; text-wrap: balance;
}
.stat-l { display: block; margin-top: 7px; font-size: .84rem; color: var(--muted); line-height: 1.45; text-wrap: balance; }

/* ── Apercu de la zone de notification ────────────────────────────────────────
   ⛔ Il etait pose en bas a droite et se battait avec l'anneau : deux elements
   forts dans la meme moitie de page, dont un coupe par le bord. Il est desormais
   cale sur le CENTRE de l'anneau, et c'est la seule idee graphique de la page :
   l'application est litteralement ENFERMEE dans le cercle, ce qui dit la promesse
   du produit au lieu de simplement l'illustrer. */
.tray-preview {
  position: absolute; z-index: 3;
  top: 50%; right: calc(var(--anneau-centre) - 130px); transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
/* Sous cette largeur la colonne de texte occupe toute la place : l'anneau palit et
   l'apercu disparait plutot que de se superposer au propos. */
@media (max-width: 1240px) { .tray-preview { display: none; } }
.tray-icon {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
}
.tray-icon.idle { background: var(--blue); }
.tray-menu {
  background: rgba(20,20,32,.94); backdrop-filter: blur(18px);
  border: var(--filet-fort); border-radius: var(--radius);
  padding: 5px 0; min-width: 236px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  font-size: .86rem;
}
.tray-item { padding: 8px 16px; color: var(--text); }
.tray-item.muted { color: var(--muted); }
.tray-etat { color: var(--muted); font-size: .78rem; }
.tray-sep { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }

/* ── Sections et leur numerotation ───────────────────────────────────────────
   Le numero et le filet font tout le travail : ils disent « ceci est un document
   structure » sans une ligne de decoration. */
.probleme, .features, .how, .mobile, .questions, .install { counter-increment: section; }

.section-header { margin-bottom: 52px; max-width: 46em; }
.section-header h2, .probleme-inner h2, .mobile-inner h2 { position: relative; }
.section-header h2::before,
.probleme-inner h2::before,
.mobile-inner h2::before {
  content: counter(section, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-family: var(--corps); font-weight: 700; font-size: .78rem;
  letter-spacing: .16em; color: var(--blue);
}
.section-header > p { margin-top: 18px; color: var(--muted); font-size: 1.06rem; }

.features, .how, .questions, .install { padding: var(--section) 0; }
.features, .questions { border-top: var(--filet); }

/* ── Le probleme, avant la solution ─────────────────────────────────────────── */
.probleme { padding: var(--section) 0; background: var(--bg2); border-top: var(--filet); }
.probleme-inner { max-width: 44em; }
.probleme-inner p { margin-top: 20px; font-size: 1.1rem; line-height: 1.72; color: #d8d6e2; }
/* La chute est la phrase qui doit rester. Serif, en grand, detachee par un filet
   vertical : c'est le seul endroit de la page ou le corps de texte passe au serif. */
.probleme-chute {
  margin-top: 34px !important;
  font-family: var(--titre); font-weight: 500; font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important; line-height: 1.35;
  color: var(--text) !important;
  padding-left: 22px; border-left: 2px solid var(--blue);
}

/* ── Les metiers ──────────────────────────────────────────────────────────────
   Pas des cartes. Une liste separee par des filets, avec le metier en serif :
   la forme d'un sommaire, qui se parcourt pour s'y reconnaitre. */
.metiers {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: var(--filet-fort);
}
/* ⛔ Meme correction que pour les chiffres du hero, et c'est le meme defaut qui se voyait le
   mieux ici : avec `.metier + .metier`, en une seule colonne sur telephone, toutes les cartes
   SAUF la premiere etaient decalees de 30 px. Le selecteur de fratrie ne sait rien des retours a
   la ligne de la grille, et `nth-child` ne peut pas non plus trancher puisque `auto-fit` rend le
   nombre de colonnes implicite. Un filet a GAUCHE DE CHAQUE cellule supprime le probleme au lieu
   de le contourner : plus de premiere cellule a traiter a part, et le meme rendu de une a trois
   colonnes. */
.metier {
  padding: 28px 30px 30px; border-left: var(--filet); border-bottom: var(--filet);
  transition: background .18s;
}
.metier h3 {
  font-family: var(--titre); font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.01em; line-height: 1.25;
}
.metier p { margin-top: 12px; color: var(--muted); font-size: .97rem; line-height: 1.65; }

/* ── Encarts ──────────────────────────────────────────────────────────────────
   Un fond a peine teinte et un filet, jamais un degrade appuye. */
.encart {
  max-width: 44em; margin-top: 64px; padding: 36px 38px;
  background: rgba(70,130,180,.07);
  border: 1px solid rgba(90,159,212,.22); border-radius: var(--radius);
}
.encart h3 { font-family: var(--titre); font-weight: 600; font-size: 1.3rem; }
.encart p { margin-top: 18px; line-height: 1.72; }
/* La reserve juridique reste lisible : plus petite, jamais en petites lettres. */
.encart-note {
  font-size: .93rem; color: var(--muted);
  margin-top: 24px !important; padding-top: 20px; border-top: var(--filet);
}
.encart-attention {
  margin-top: 26px; padding: 24px 28px;
  border-left: 2px solid var(--orange);
  background: rgba(220,140,20,.06);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.encart-attention p { line-height: 1.7; font-size: .98rem; }
.encart-attention p + p { margin-top: 15px; }

/* ── Les trois gestes ─────────────────────────────────────────────────────────
   Chiffres en serif, sans pastille ronde : la pastille numerotee est un tic de
   page produit, un chiffre compose suffit. */
.steps {
  display: grid; gap: 0; align-items: start;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  border-top: var(--filet-fort);
}
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  .step-arrow { display: none; }
}
.step { display: flex; gap: 20px; padding: 30px 28px 32px 0; }
.step:not(:first-child) { padding-left: 28px; }
@media (min-width: 901px) { .step:not(:first-child) { border-left: var(--filet); } }
@media (max-width: 900px) { .step { border-bottom: var(--filet); padding-left: 0 !important; } }
.step-num {
  flex-shrink: 0; font-family: var(--titre); font-weight: 500;
  font-size: 2.1rem; line-height: 1; color: rgba(90,159,212,.55);
  font-variant-numeric: tabular-nums;
}
.step-content h3 { font-size: 1.08rem; }
.step-content p { margin-top: 10px; color: var(--muted); font-size: .97rem; line-height: 1.6; }
.step-arrow { align-self: center; color: rgba(255,255,255,.18); font-size: 1.2rem; padding: 0 4px; }

/* ── Cartes explicatives ──────────────────────────────────────────────────────
   Ici la carte se justifie : ce sont quatre affirmations independantes qu'on
   parcourt. Filet fin, angle sobre, et un liseré qui se revele au survol. */
.deux-colonnes {
  display: grid; gap: 18px; margin-top: 68px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.carte-simple {
  position: relative; padding: 28px 30px;
  background: var(--card); border: var(--filet); border-radius: var(--radius);
  transition: border-color .18s;
}
.carte-simple::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px;
  background: var(--blue); opacity: 0; transition: opacity .18s;
  border-radius: 2px;
}
.carte-simple:hover { border-color: rgba(255,255,255,.14); }
.carte-simple:hover::before { opacity: 1; }
.carte-simple h3 { font-size: 1.06rem; }
.carte-simple p { margin-top: 13px; color: #cfcddb; line-height: 1.68; font-size: .98rem; }

/* ── L'application mobile ─────────────────────────────────────────────────────── */
.mobile { padding: var(--section) 0; background: var(--bg2); border-top: var(--filet); }
.mobile-inner { max-width: 44em; }
.mobile-inner h2 { margin-top: 22px; }
.mobile-inner > p { margin-top: 20px; line-height: 1.72; font-size: 1.06rem; }
.mobile-note { font-size: .95rem; color: var(--muted); }

/* ── Questions ────────────────────────────────────────────────────────────────
   `details`/`summary` natifs : ouverture au clavier et restitution par un lecteur
   d'ecran sans une ligne de JavaScript, ce qu'aucun accordeon maison ne donne.
   Separes par des filets plutot qu'empiles en cartes : la forme d'une notice. */
.faq { max-width: 50em; border-top: var(--filet-fort); }
.faq details { border-bottom: var(--filet); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 24px 48px 24px 0; position: relative;
  font-family: var(--titre); font-weight: 600; font-size: 1.16rem;
  letter-spacing: -.005em; line-height: 1.35;
  transition: color .16s;
}
.faq summary::-webkit-details-marker { display: none; }
/* Le signe est dessine en CSS plutot qu'ecrit en caractere : un « + » textuel
   serait lu a voix haute par un lecteur d'ecran, ce qui n'apporte rien. */
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 6px; top: 50%;
  background: var(--blue-l); transition: transform .2s, opacity .2s;
}
.faq summary::after { width: 15px; height: 1.5px; margin-top: -.75px; }
.faq summary::before { width: 1.5px; height: 15px; margin: -7.5px 6.75px 0 0; }
.faq details[open] summary::before { opacity: 0; transform: rotate(90deg); }
.faq summary:hover { color: var(--blue-l); }
.faq details p { padding: 0 48px 6px 0; color: #cfcddb; line-height: 1.75; max-width: 46em; }
.faq details p:last-child { padding-bottom: 26px; }

/* ── Telechargement ─────────────────────────────────────────────────────────── */
.install { border-top: var(--filet); }
.volet {
  max-width: 50em; padding: 34px 38px;
  background: var(--card); border: var(--filet); border-radius: var(--radius);
}
.volet > p { margin-bottom: 18px; }
.volet .btn-primary { margin: 4px 0 18px; }
.volet .code-block { margin: 0 0 18px; }
.volet-note { font-size: .92rem; color: var(--muted); margin-bottom: 0; }
.volet-centre { text-align: center; margin: 0 auto; }
.volet-centre .volet-note { margin-top: 15px; }
.install-avertissement {
  max-width: 50em; margin: 30px auto 0; padding: 22px 26px;
  border-left: 2px solid var(--orange);
  background: rgba(220,140,20,.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .96rem; line-height: 1.68;
}

/* ── Blocs de code ──────────────────────────────────────────────────────────── */
.code-block {
  background: #0a0a12; border: var(--filet); border-radius: var(--radius);
  padding: 22px 24px; overflow-x: auto;
  font-family: var(--mono); font-size: .88rem; line-height: 1.7;
  color: #cfcddb;
}
.code-block code { white-space: pre-wrap; word-break: break-word; }

/* ── Pages de contenu ───────────────────────────────────────────────────────── */
.page { max-width: 46em; margin: 0 auto; padding: 152px 28px 112px; counter-reset: rubrique; }
.page h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); }
.page > p { margin-top: 20px; line-height: 1.75; }
.page h2 {
  counter-increment: rubrique; position: relative;
  margin-top: 60px; padding-top: 26px; border-top: var(--filet);
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
}
.page h2::before {
  content: counter(rubrique, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-family: var(--corps); font-weight: 700; font-size: .76rem;
  letter-spacing: .16em; color: var(--blue);
}
.page ul { margin-top: 18px; padding-left: 0; list-style: none; }
.page li { margin-top: 14px; line-height: 1.72; padding-left: 20px; position: relative; }
.page li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--blue); }
.page .code-block { margin-top: 22px; }

/* ── Tableaux ─────────────────────────────────────────────────────────────────
   Aucune bordure exterieure, aucune alternance de fond : des filets horizontaux,
   comme dans un rapport imprime. */
.tableau-scroll { overflow-x: auto; margin-top: 24px; }
.tableau { width: 100%; min-width: 540px; border-collapse: collapse; font-size: .95rem; text-align: left; }
.tableau th, .tableau td { padding: 13px 16px 13px 0; border-bottom: var(--filet); vertical-align: top; }
.tableau thead th {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: var(--filet-fort);
}
.tableau tbody th[scope="row"] { font-weight: 700; white-space: nowrap; color: var(--text); }
.tableau tbody td { color: #cfcddb; font-variant-numeric: tabular-nums; }

/* ── Pied de page ───────────────────────────────────────────────────────────── */
footer { padding: 56px 0 64px; border-top: var(--filet); background: var(--bg2); }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--titre); font-weight: 600; font-size: 1.16rem;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-links a { color: var(--muted); font-size: .93rem; }
.footer-links a:hover { color: var(--text); }
.footer-note { color: var(--muted); font-size: .86rem; flex-basis: 100%; padding-top: 20px; border-top: var(--filet); }

/* ── Mouvement ────────────────────────────────────────────────────────────────
   Une seule orchestration, a l'arrivee sur la page, en cascade. Le reste est un
   simple fondu au defilement. Un mouvement rare se remarque ; un mouvement
   partout fatigue, et sur ce public il fait perdre le peu de temps qu'on a. */
@keyframes entree {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero-inner > * { animation: entree .62s cubic-bezier(.22,.7,.3,1) backwards; }
.hero-inner > .badge       { animation-delay: .04s; }
.hero-inner > h1           { animation-delay: .11s; }
.hero-inner > .hero-sub    { animation-delay: .20s; }
.hero-inner > .hero-actions{ animation-delay: .28s; }
.hero-inner > .hero-note   { animation-delay: .34s; }
.hero-inner > .hero-stats  { animation-delay: .40s; }
.tray-preview { animation: entree .7s cubic-bezier(.22,.7,.3,1) .5s backwards; }

.metier, .step, .carte-simple { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.metier.visible, .step.visible, .carte-simple.visible { opacity: 1; transform: none; }

/* ⚠️ Le repli doit aussi RENDRE VISIBLE ce que le defilement devait reveler :
   sans la remise a `opacity: 1`, quelqu'un qui demande moins d'animation verrait
   une page vide si le script ne tourne pas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important; animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
  .metier, .step, .carte-simple { opacity: 1 !important; transform: none !important; }
}

/* Meme filet de securite sans JavaScript : la page reste lisible. */
@media (scripting: none) {
  .metier, .step, .carte-simple { opacity: 1; transform: none; }
}