/* ═══════════════════════════════════════════════════════════════════
   OrgGuardian : site vitrine (orgguardian.com)
   Système 2026 : le rapport d'audit. Encre dense, papier froid, un seul
   accent — la sévérité « Élevée » du produit. Titrage en serif d'ingénierie,
   donnée en mono, filets d'un pixel, zéro dégradé décoratif.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Polices auto-hébergées : la superfamille IBM Plex ───────────────
   Un seul dessin pour les trois rôles. Plex a été dessiné pour la
   documentation d'ingénierie : c'est le registre exact d'un rapport de
   posture qu'un RSSI pose devant un comité des risques — pas celui d'une
   page de startup. Plex porte le TEXTE et la DONNÉE.
   Le TITRAGE revient à Newsreader, et l'appariement est délibéré : un serif
   éditorial contre un sans/mono d'ingénierie dit mieux « rapport » qu'une
   seule superfamille étendue à tous les rôles. C'est un fichier VARIABLE à
   axe optique, et l'axe travaille vraiment — comparé à 62 px, le dessin de
   titrage monte le contraste, affine les empattements et resserre la chasse
   face au dessin de texte. Un visiteur francophone charge 57 984 o, contre
   104 972 o pour le trio Sora/Inter/JetBrains qui precedait. Une fois ce dessin choisi, l'axe est FIGÉ et les
   glyphes inutilisés retirés : voir website/build-fonts.py, à rejouer après
   tout ajout de caractère inhabituel. 57 984 o pour un visiteur francophone.
   Servies depuis notre domaine, jamais depuis fonts.gstatic.com : un
   produit qui vend « aucune donnée ne sort » ne fait pas résoudre l'IP de
   chaque visiteur par un tiers pour afficher son titre. (SIL OFL 1.1.)
 */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(assets/fonts/newsreader-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(assets/fonts/newsreader-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(assets/fonts/plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(assets/fonts/plex-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/plex-mono-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/plex-mono-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/plex-mono-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/plex-mono-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ── Encre et papier ──────────────────────────────────────────────
     Un dossier d'audit : encre dense, papier froid. Pas de crème —
     le chaud appartient à l'accent, et à lui seul. */
  --ink-900: #0B1220;
  --ink-800: #131C2E;
  --ink-700: #1A2438;
  --ink-600: #22304A;
  --line-d: #22304A;
  --paper: #EEF1F6;
  --card: #ffffff;
  --line-l: #DCE2EC;
  --text-d: #E8EDF6;
  --muted-d: #93A1BC;
  --text-l: #111A2B;
  --muted-l: #5A6880;

  /* ── Accent : la sévérité « Élevée » du produit ───────────────────
     L'orange n'est pas décoratif, il est sémantique : c'est la couleur
     que le produit donne lui-même au constat sérieux qui n'est pas
     encore un incident. Il ne paraît que sur une sévérité, un appel à
     l'action, ou la ligne de scan. Nulle part ailleurs.
     Sur fond clair il ne porte JAMAIS de texte (2.48:1) — seulement un
     remplissage ; --signal-encre prend le relais pour l'écrit. */
  --signal: #F97316;
  /* 5,74:1 sur --paper. #C2410C, la valeur precedente, tenait AA avec 0,07 de
     marge — trop peu pour survivre au moindre ajustement du fond. */
  --signal-encre: #A63A06;
  --crit: #DC2626;
  --eleve: #F97316;
  --moyen: #D97706;
  --faible: #16A34A;
  /* Le cyan survit, réduit à son seul emploi honnête : ce qui est vérifié. */
  --preuve: #0E7490;
  /* Couleur de lien dans le corps de texte. Supprimée par erreur lors de la
     refonte de la palette alors que trois déclarations la consommaient encore :
     `var(--lien)` non défini est invalide au calcul, la déclaration `color` est
     jetée, et les liens des pages légales perdaient toute couleur — y compris
     le « ← Retour à l'accueil ». 4,57:1 sur --paper, 5,17:1 sur --card. */
  --lien: #2563eb;
  --ok: #16a34a;
  --warn: #d97706;

  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --head: "Newsreader", Georgia, "Times New Roman", serif;
  --body: "Plex Sans", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* L'en-tête est `sticky` sur 64px et TOUTE la navigation de la page repose
   sur des sauts d'ancre : sans réserve de défilement, la cible atterrit
   sous la barre. 84px = 64 de barre + 20 de respiration. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--text-l);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--signal); color: var(--ink-900); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 840px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--ink-800); color: #fff; padding: 10px 18px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* Micro-étiquette mono : la signature du système */
.tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal-encre); display: block;
}
/* Crochets en FLUX, pas en pseudo-éléments d'un conteneur flex : sur mobile
   l'étiquette passe à la ligne, et le flex expédiait « [ » et « ] » chacun
   sur sa propre ligne, loin du texte qu'ils encadraient. */
.tag::before { content: "[ "; color: var(--muted-l); }
.tag::after { content: " ]"; color: var(--muted-l); }
.tag.on-dark { color: var(--signal); }
.tag.on-dark::before, .tag.on-dark::after { color: var(--muted-d); }
/* Remplace un style="justify-content:center" en dur : la CSP du site interdit
   les styles en ligne, et l'affaiblir pour une seule règle serait un mauvais
   échange sur un site qui vend la rigueur de sa posture. */
.tag-center { justify-content: center; }

/* ─── Nav ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  /* Opaque : translucide, le fond effectif de la barre s'eclaircissait
     au-dessus des sections claires et la bordure du bouton fantome
     retombait sous le seuil de 3:1 sur la majeure partie du defilement. */
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-d);
}
.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { border-radius: 8px; display: block; }
.brand-name { font-family: var(--head); font-weight: 600; font-size: 18px; color: #fff; letter-spacing: -.01em; }
.brand-name em { font-style: normal; color: var(--signal); }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--muted-d); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: #fff; }
.nav-cta { display: flex; gap: 10px; }
.nav-burger {
  display: none; background: none; border: 0; cursor: pointer; padding: 0;
  width: 26px; height: 30px; position: relative;
}
/* Trois traits dessinés, pas le glyphe « ☰ » : celui-ci tombait hors de tous
   les unicode-range des polices sous-ensemblées et se rendait dans une fonte
   système, avec une chasse et une graisse étrangères au reste. */
.nav-burger span, .nav-burger::before, .nav-burger::after {
  content: ""; position: absolute; left: 3px; right: 3px; height: 2px;
  background: #fff; border-radius: 1px; transition: transform .18s ease, opacity .18s ease;
}
.nav-burger::before { top: 8px; }
.nav-burger span { top: 14px; }
.nav-burger::after { top: 20px; }
.nav.is-open .nav-burger::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-burger span { opacity: 0; }
.nav.is-open .nav-burger::after { transform: translateY(-6px) rotate(-45deg); }

/* ─── Boutons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 8px;
  font-weight: 600; font-size: 14.5px; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--signal); color: var(--ink-900); }
.btn-primary:hover { background: #FFA05C; }
/* La bordure est le SEUL indice visuel de ce bouton : à var(--line-d) elle
   valait 1.38:1 sur le fond marine, donc l'affordance n'existait qu'au
   survol. #52628f vaut 3.28:1, au-dessus du seuil de 3.0 (WCAG 1.4.11). */
.btn-ghost-d { color: #fff; border-color: #52628f; background: transparent; }
.btn-ghost-d:hover { border-color: var(--signal); color: var(--signal); }
.btn-outline { color: var(--ink-800); border-color: var(--ink-800); background: transparent; }
.btn-outline:hover { background: var(--ink-800); color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 15.5px; border-radius: 9px; }

/* ─── Hero ────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(circle at 1px 1px, rgba(139,155,184,.14) 1px, transparent 0) 0 0/26px 26px,
    var(--ink-900);
  color: var(--text-d);
  border-bottom: 1px solid var(--line-d);
  padding: 110px 0 76px;
}
/* Le hero prend la colonne de .wrap, ni plus ni moins : il était centré sur
   960px quand tout le reste de la page part du bord gauche de la colonne à
   1200px, et la rupture se lisait comme un défaut d'alignement. Aucune
   largeur propre ici — la mesure de lecture est bornée par .lede. */
.hero h1 {
  font-family: var(--head); font-weight: 700;
  font-size: clamp(38px, 5.4vw, 62px); line-height: 1.06; letter-spacing: -.012em;
  color: #fff; margin: 22px 0 24px;
}
.hero h1 .hl { color: var(--signal); }
.lede { font-size: 19px; color: var(--muted-d); max-width: 700px; margin-bottom: 36px; }
.lede strong { color: var(--text-d); font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hero-note { font-family: var(--mono); font-size: 12.5px; color: var(--muted-d); }

/* Capture produit dans le hero.
   Avant, le premier pixel de produit arrivait a ~2450px de defilement : la page
   parlait du produit pendant deux ecrans avant de le montrer. La capture est
   posee juste apres l accroche, de sorte que la bande de chiffres qui suit se
   lise comme la legende de ce qu on vient de voir. */
.hero-shot {
  margin: 48px 0 0;
  border: 1px solid var(--line-d);
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 40px 80px -24px rgba(0,0,0,.55);
}
.hero-shot img { width: 100%; display: block; height: auto; aspect-ratio: 16 / 10; }

/* Bandeau de preuves chiffrées */
.proof {
  margin-top: 72px;
  border-top: 1px solid var(--line-d);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.proof > div { padding: 30px 28px 40px; border-left: 1px solid var(--line-d); }
.proof > div:first-child { border-left: 0; padding-left: 0; }
.proof .p-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); margin-bottom: 10px; }
.proof .p-v { font-family: var(--mono); font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; color: #fff; letter-spacing: -.02em; }
.proof .p-v .u { color: var(--signal); }
.proof .p-s { font-size: 12.5px; color: var(--muted-d); margin-top: 6px; }
.proof-note { padding: 0 0 36px; font-size: 12px; color: var(--muted-d); font-family: var(--mono); }

/* ─── Sections ────────────────────────────────────────────────────── */
.section { padding: 100px 0; }
.section-alt { background: #fff; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.section-dark {
  background:
    radial-gradient(circle at 1px 1px, rgba(139,155,184,.10) 1px, transparent 0) 0 0/26px 26px,
    var(--ink-800);
  color: var(--text-d);
  border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
}
h2 {
  font-family: var(--head); font-size: clamp(27px, 3.4vw, 40px); font-weight: 700;
  line-height: 1.1; letter-spacing: -.022em; color: var(--ink-800);
  margin: 18px 0 20px;
}
.section-dark h2 { color: #fff; }
.sec-lede { font-size: 17.5px; color: var(--muted-l); max-width: 720px; margin-bottom: 52px; }
.sec-lede strong { color: var(--text-l); }
.section-dark .sec-lede { color: var(--muted-d); }
.section-dark .sec-lede strong { color: var(--text-d); }

/* ─── Problème : 3 lectures ───────────────────────────────────────── */
.pains { border-top: 1px solid var(--line-l); }
.pain {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px;
  padding: 34px 0; border-bottom: 1px solid var(--line-l);
}
.pain .who { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--signal-encre); padding-top: 6px; }
.pain h3 { font-family: var(--head); font-size: 21px; font-weight: 600; letter-spacing: -.005em; margin-bottom: 10px; color: var(--ink-800); }
.pain p { color: var(--muted-l); font-size: 15.5px; max-width: 720px; }
.pain p em { color: var(--text-l); font-style: normal; font-weight: 600; }

/* ─── Showcase produit ────────────────────────────────────────────── */
.showcase { margin-bottom: 64px; }
.showcase-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.shot-tab {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  padding: 11px 18px; border: 1px solid var(--line-l); border-bottom: 0;
  border-radius: 8px 8px 0 0; background: var(--paper); color: var(--muted-l);
  cursor: pointer; position: relative; top: 1px;
}
.shot-tab.is-active { background: #fff; color: var(--ink-800); border-top: 2px solid var(--signal); }
.showcase-frame {
  border: 1px solid var(--line-l); border-radius: 0 12px 12px 12px;
  background: #fff; overflow: hidden;
}
/* Les captures sont desormais cadrees a la source en 1600x1000 (chrome Salesforce
   et badge « Scratch Org » retires, contenu utile conserve). Le recadrage CSS
   `max-height:640px + object-fit:cover` n'a donc plus lieu d'etre : au-dela de
   1024px de conteneur il amputait le bas de l'image, c'est-a-dire les trois
   tuiles KPI. `aspect-ratio` fige la place reservee -> zero decalage (CLS). */
.showcase-frame img { width: 100%; display: block; height: auto; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line-l); }
.showcase-frame figcaption { padding: 18px 26px; font-size: 14.5px; color: var(--muted-l); }
.showcase-frame figcaption strong { color: var(--ink-800); }

/* ─── Bento capacités ─────────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento > article {
  background: var(--card); border: 1px solid var(--line-l); border-radius: 14px;
  padding: 28px 26px; grid-column: span 2;
  transition: border-color .15s ease, transform .15s ease;
}
.bento > article:hover { border-color: var(--signal-encre); transform: translateY(-2px); }
.bento > article.wide { grid-column: span 3; }
.bento .b-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-encre); margin-bottom: 12px; }
.bento h3 { font-family: var(--head); font-size: 18.5px; font-weight: 600; color: var(--ink-800); margin-bottom: 10px; letter-spacing: -.005em; }
.bento p { font-size: 14.5px; color: var(--muted-l); }
.bento .b-num { font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--ink-800); margin-bottom: 8px; }
.bento .b-num .u { color: var(--signal-encre); }

/* ─── Conformité (sombre, technique) ──────────────────────────────── */
.conf-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; }
.conf-item { border-top: 1px solid var(--line-d); padding: 26px 0; }
.conf-item h3 { font-family: var(--head); font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.conf-item p { font-size: 14.5px; color: var(--muted-d); }
/* Un lien en ligne sur fond sombre SANS regle propre herite du bleu par
   defaut du navigateur : 1.81:1 sur la marine. L'orange y monte a 5.9:1. */
.section-dark p a, .conf-note p a { color: var(--signal); text-underline-offset: 3px; }
.section-dark p a:hover, .conf-note p a:hover { color: #FFA05C; }
.conf-item .c-tag { font-family: var(--mono); font-size: 11.5px; color: var(--signal); letter-spacing: .1em; display: block; margin-bottom: 8px; }
.conf-note {
  background: var(--ink-700); border: 1px solid var(--line-d); border-radius: 14px;
  padding: 32px 30px; align-self: start;
}
.conf-note h4 { color: var(--signal); font-family: var(--head); font-size: 16px; margin-bottom: 14px; }
.conf-note p { color: var(--muted-d); font-size: 14px; margin-bottom: 14px; }
.conf-note p:last-child { margin-bottom: 0; }

/* ─── Confiance ───────────────────────────────────────────────────── */
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-l); border-radius: 14px; overflow: hidden; background: #fff; }
.trust-item { padding: 34px 32px; border: 0 solid var(--line-l); }
.trust-item:nth-child(odd) { border-right-width: 1px; }
.trust-item:nth-child(-n+2) { border-bottom-width: 1px; }
.trust-item h3 { font-family: var(--head); font-size: 17px; font-weight: 600; color: var(--ink-800); margin-bottom: 10px; }
.trust-item h3 .n { font-family: var(--mono); color: var(--signal-encre); font-size: 13px; margin-right: 10px; }
.trust-item p { font-size: 14.5px; color: var(--muted-l); }
/* Le 5e élément occupe la largeur : il porte l'attestation, qui est un
   argument de vente à part entière et non un quatrième bullet de principe. */
.trust-item-wide { grid-column: 1 / -1; border-right-width: 0 !important; border-top-width: 1px; }
.trust-item-wide p { font-size: 15px; }
.trust-foot { margin-top: 26px; font-size: 14.5px; color: var(--muted-l); }
.trust-foot a { color: var(--lien); }

/* ─── Tarifs ──────────────────────────────────────────────────────── */
.pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.price-card {
  position: relative; background: #fff; border: 1px solid var(--line-l);
  border-radius: 14px; padding: 30px 26px; display: flex; flex-direction: column;
}
.price-card h3 { font-family: var(--head); font-size: 20px; font-weight: 600; color: var(--ink-800); }
.price-sub { font-size: 12.5px; font-family: var(--mono); color: var(--muted-l); margin: 6px 0 22px; }
.price { margin-bottom: 22px; }
/* Chasse resserree : le mono a une avance fixe, et les espaces insecables
   des montants (2 490 €) les deliaient sur une grille tarifaire. */
.amount { font-family: var(--mono); font-size: 29px; font-weight: 600; color: var(--ink-800); letter-spacing: -.055em; white-space: nowrap; }
.per { font-size: 13px; color: var(--muted-l); display: inline-block; margin-left: 4px; white-space: nowrap; }
.price-card ul { list-style: none; margin-bottom: 22px; flex: 1; }
.price-card li { font-size: 14px; color: var(--muted-l); padding: 7px 0 7px 20px; position: relative; border-bottom: 1px dashed var(--line-l); }
.price-card li:last-child { border-bottom: 0; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 5px; border-left: 2px solid var(--signal-encre); border-bottom: 2px solid var(--signal-encre); transform: rotate(-45deg); }
.price-card li strong { color: var(--ink-800); }
.price-note { font-size: 12.5px; color: var(--muted-l); font-style: italic; }

.price-card-hl { background: var(--ink-800); border-color: var(--ink-800); }
.price-card-hl h3, .price-card-hl li strong { color: #fff; }
.price-card-hl .price-sub, .price-card-hl .per, .price-card-hl li, .price-card-hl .price-note { color: var(--muted-d); }
.price-card-hl .amount { color: var(--signal); }
.price-card-hl li { border-bottom-color: var(--line-d); }
.price-card-hl li::before { border-color: var(--signal); }
.price-flag {
  position: absolute; top: -12px; left: 26px;
  background: var(--signal); color: var(--ink-900);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}

.pricing-examples { display: flex; flex-wrap: wrap; gap: 12px 34px; margin-top: 36px; font-size: 14.5px; color: var(--muted-l); }
.pricing-examples strong { color: var(--ink-800); font-family: var(--mono); }
/* La section la plus proche de l'intention d'achat ne portait aucun lien :
   quatre cartes de prix et zéro sortie. */
.pricing-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pricing-foot { margin-top: 20px; font-size: 13px; color: var(--muted-l); line-height: 1.75; }

/* ─── Services ────────────────────────────────────────────────────── */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc article { background: #fff; border: 1px solid var(--line-l); border-radius: 14px; padding: 30px 28px; }
.svc .b-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-encre); margin-bottom: 12px; }
.svc h3 { font-family: var(--head); font-size: 18px; font-weight: 600; color: var(--ink-800); margin-bottom: 10px; }
.svc p { font-size: 14.5px; color: var(--muted-l); }

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.faq details { border-bottom: 1px solid var(--line-l); }
.faq summary {
  cursor: pointer; list-style: none; padding: 22px 4px;
  font-family: var(--head); font-weight: 600; font-size: 16.5px; color: var(--ink-800);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--signal-encre); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 4px 24px; color: var(--muted-l); font-size: 15px; max-width: 720px; }

/* ─── CTA final ───────────────────────────────────────────────────── */
.section-cta {
  background:
    radial-gradient(circle at 1px 1px, rgba(249,115,22,.10) 1px, transparent 0) 0 0/26px 26px,
    var(--ink-900);
  color: #fff; text-align: center; padding: 110px 0;
  border-top: 1px solid var(--line-d);
}
.section-cta h2 { color: #fff; margin-bottom: 16px; }
.section-cta p { color: var(--muted-d); max-width: 560px; margin: 0 auto 34px; }
.section-cta .hero-cta { justify-content: center; }
/* Supprimée : cette règle réécrasait la bordure corrigée de .btn-ghost-d
   (#52628f, 3,12:1) par --line-d, et ramenait le bouton du CTA final à
   1,42:1 — le défaut d'affordance que S-14 était censé fermer partout. */
.section-cta .hero-note { margin-top: 18px; }

/* ─── Footer ──────────────────────────────────────────────────────── */
.footer { background: var(--ink-900); color: var(--muted-d); padding: 64px 0 0; border-top: 1px solid var(--line-d); }
.footer-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line-d); }
.footer .brand-name { color: #fff; }
.footer-brand p { margin-top: 14px; font-size: 14px; }
.footer-col h3 { font-family: var(--mono); color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col a { display: block; color: var(--muted-d); text-decoration: none; font-size: 14.5px; padding: 4px 0; }
.footer-col a:hover { color: #fff; }
.footer-legal { font-size: 13.5px; line-height: 1.7; }
/* #5d6b8c valait 3.69:1 sur --ink-900 : sous le seuil AA de 4.5 pour du
   texte de 12.5px. #7d8bab vaut 5.76:1, même registre visuel. */
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 22px; padding-bottom: 26px; font-size: 12.5px; color: #7d8bab; font-family: var(--mono); }

/* ─── Reveal ──────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .pricing { grid-template-columns: 1fr 1fr; }
  .bento > article, .bento > article.wide { grid-column: span 3; }
  .conf-grid { grid-template-columns: 1fr; }
  .svc { grid-template-columns: 1fr; }
  .footer-in { grid-template-columns: 1fr 1fr; }
}
/* Bascule burger à 950px, pas 720px : la barre sature bien avant.
   Marque 152 + liens 386 + CTA 255 + gaps 56 + padding 64 = 913px de contenu
   pour une barre haute de 64px — entre 721 et 950px les boutons passaient sur
   3 puis 4 lignes et débordaient sous la barre. Tout l'iPad portrait (768px)
   était concerné. Bloc séparé du layout ≤720px, qui reste inchangé. */
@media (max-width: 950px) {
  .nav-links { display: none; }
  /* Le bloc .nav-cta entier disparaissait ici, ce qui laissait 11 688 px —
     13,85 hauteurs d'écran, 71 % de la page — sans un seul appel à l'action
     sur mobile. Seul le bouton secondaire part ; le principal reste, compacté. */
  .nav-cta { display: flex; margin-left: auto; }
  .nav-cta .btn-ghost-d { display: none; }
  .nav-cta .btn { padding: 8px 14px; font-size: 13.5px; white-space: nowrap; }
  .nav-burger { display: block; margin-left: 14px; }
  .nav.is-open .nav-cta .btn-ghost-d { display: inline-block; }

  /* Menu ouvert : les deux panneaux passent en FLUX NORMAL et la barre grandit.
     Avant, les deux étaient en position absolue — .nav-links à top:64px et
     .nav-cta à top:100%, or .nav est `sticky` donc sert de bloc conteneur :
     ce 100% valait aussi 64px. Les panneaux se superposaient exactement et le
     CTA, plus bas dans le DOM, avalait chaque tap destiné à un lien : « Produit »
     déclenchait « Essai 30 jours ». En flux, la superposition est impossible et
     aucun décalage magique n'est à maintenir. */
  .nav.is-open .nav-in { flex-wrap: wrap; height: auto; padding-bottom: 18px; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; gap: 14px;
    flex-basis: 100%; order: 2; margin-left: 0;
    padding-top: 18px; border-top: 1px solid var(--line-d);
  }
  .nav.is-open .nav-cta {
    display: flex; flex-basis: 100%; order: 3; gap: 10px; padding-top: 14px;
  }
  /* Cibles tactiles. Le commentaire précédent annonçait 44px et la règle en
     posait 32 : la hauteur calculée valait 35.1px. 44px est le seuil 2.5.5
     (AAA) ; 24px est le seuil 2.5.8 (AA). On vise le plus exigeant. */
  .nav.is-open .nav-links a { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 720px) {
  /* Une seule colonne : à 2 par ligne la carte fait 113px de texte utile, et
     « 40+ détecteurs » en mono 30px en mesure 180 — il débordait de 67px. */
  .bento { grid-template-columns: 1fr; }
  /* LES DEUX sélecteurs : la règle de 1020px met `.bento > article` ET
     `.bento > article.wide` en `span 3`. N'en ramener qu'un laissait les
     cartes non-`wide` demander 3 colonnes sur une grille qui n'en a qu'une. */
  .bento > article, .bento > article.wide { grid-column: span 1; }
  .wrap { padding: 0 20px; }
  .hero { padding: 64px 0 0; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof > div { border-left: 0; padding: 22px 0; }
  .pain { grid-template-columns: 1fr; gap: 10px; }
  .section { padding: 64px 0; }
  .pricing { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item:nth-child(odd) { border-right-width: 0; }
  .trust-item { border-bottom-width: 1px !important; }
  .trust-item:last-child { border-bottom-width: 0 !important; }
  .footer-in { grid-template-columns: 1fr; gap: 28px; }
}

/* ─── Pages légales ───────────────────────────────────────────────────
   Gabarit sobre partagé par mentions-legales.html et confidentialite.html.
   Elles réutilisent la même feuille que la page d'accueil : aucune requête
   supplémentaire, et les polices sont déjà en cache. */
.legal { max-width: 760px; margin: 0 auto; padding: 120px 24px 90px; }
.legal h1 { font-family: var(--head); font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -.02em; color: var(--ink-800); margin-bottom: 10px; }
.legal .legal-date { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-l); margin-bottom: 40px; }
.legal h2 { font-family: var(--head); font-size: 20px; font-weight: 600; color: var(--ink-800); margin: 38px 0 12px; letter-spacing: -.01em; }
.legal p, .legal li { font-size: 15.5px; color: var(--text-l); margin-bottom: 12px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--lien); }
.legal .back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 34px; font-family: var(--mono); font-size: 13px; color: var(--lien); text-decoration: none; }
/* Chevron dessiné au bord plutôt que le glyphe « ← » (U+2190), lui aussi hors
   des unicode-range des polices sous-ensemblées. */
.legal .back::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.legal .back:hover { text-decoration: underline; }
.legal dl { margin-bottom: 12px; }
.legal dt { font-weight: 600; color: var(--ink-800); font-size: 14.5px; margin-top: 12px; }
.legal dd { font-size: 15.5px; color: var(--text-l); margin-left: 0; }


/* ═══════════════════════════════════════════════════════════════════
   SIGNATURE — le panneau de constats
   Le produit dit ce que l'org cache, en français, chiffré. La page
   n'a donc pas à le décrire : elle le montre dans le format exact que
   le produit rend. C'est le seul endroit où la page prend un risque ;
   tout ce qui l'entoure reste tenu.
   Les trois constats sont RÉELS, produits sur l'org de démonstration.
   ═══════════════════════════════════════════════════════════════════ */
.scan {
  position: relative; margin-top: 40px;
  border: 1px solid var(--line-d); border-radius: 12px;
  background: var(--ink-800); overflow: hidden;
}
.scan-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 20px; border-bottom: 1px solid var(--line-d);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted-d); background: rgba(255,255,255,.02);
}
.scan-head .live {
  display: inline-flex; align-items: center; gap: 7px; color: var(--signal);
}
.scan-head .live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 3px rgba(249,115,22,.18);
}
.scan-head .meta { margin-left: auto; color: #7B88A1; text-transform: none; letter-spacing: .03em; }

/* Une ligne = un constat. Trois colonnes sur desktop : sévérité, cible, euros. */
.constat {
  display: grid; grid-template-columns: 104px 1fr auto;
  gap: 4px 18px; align-items: baseline;
  padding: 16px 20px; border-bottom: 1px solid var(--line-d);
}
.constat:last-of-type { border-bottom: 0; }
.constat .sev {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.constat .sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.constat.c-crit .sev { color: #ff7a7a; }
.constat.c-crit .sev::before { background: var(--crit); }
.constat.c-elev .sev { color: var(--signal); }
.constat.c-elev .sev::before { background: var(--eleve); }
.constat .cible {
  font-family: var(--mono); font-size: 13.5px; color: #fff; font-weight: 600;
  overflow-wrap: anywhere;
}
.constat .euro {
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.constat .euro.nul { color: #7B88A1; font-weight: 400; }
.constat .phrase {
  grid-column: 2 / -1; font-size: 14.5px; color: var(--muted-d); line-height: 1.55;
}
.scan-foot {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  align-items: baseline; gap: 10px 34px;
  padding: 15px 20px; border-top: 1px solid var(--line-d);
  background: rgba(255,255,255,.02);
  font-family: var(--mono); font-size: 12.5px; color: var(--muted-d);
}
.scan-foot strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Prose, donc police de texte : le mono porte la donnée, pas les phrases. */
.scan-note {
  margin-top: 15px; max-width: 78ch; font-size: 13.5px;
  color: #8B98B2; line-height: 1.6;
}

/* ── La séquence de balayage ──────────────────────────────────────────
   Un seul geste orchestré au chargement : le filet descend une fois,
   les constats se posent derrière lui. Pas d'animation ailleurs sur la
   page — c'est ce qui lui donne son poids. */
.scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  box-shadow: 0 0 22px 3px rgba(249,115,22,.5);
  opacity: 0; pointer-events: none;
}
.scan.is-scanning .scan-line { animation: balayage 1150ms cubic-bezier(.4,0,.2,1) forwards; }
@keyframes balayage {
  0%   { top: 0; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scan.is-scanning .constat { opacity: 0; animation: pose 460ms ease forwards; }
.scan.is-scanning .constat:nth-of-type(1) { animation-delay: 320ms; }
.scan.is-scanning .constat:nth-of-type(2) { animation-delay: 560ms; }
.scan.is-scanning .constat:nth-of-type(3) { animation-delay: 800ms; }
.scan.is-scanning .scan-foot { opacity: 0; animation: pose 460ms ease 1050ms forwards; }
@keyframes pose { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* ─── Bande de preuves ─────────────────────────────────────────────── */
.preuves {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l);
  background: var(--card);
}
.preuves div { padding: 26px 24px; border-right: 1px solid var(--line-l); }
.preuves div:last-child { border-right: 0; }
.preuves dt {
  font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--text-l);
  font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.preuves dd { font-size: 13.5px; color: var(--muted-l); line-height: 1.5; }
.preuves .verifie { color: var(--preuve); font-weight: 600; }

@media (max-width: 900px) {
  .constat { grid-template-columns: 1fr auto; }
  .constat .sev { grid-column: 1; }
  .constat .euro { grid-column: 2; }
  .constat .cible { grid-column: 1 / -1; }
  .constat .phrase { grid-column: 1 / -1; }
  .preuves { grid-template-columns: 1fr 1fr; }
  .preuves div:nth-child(2) { border-right: 0; }
  .preuves div:nth-child(-n+2) { border-bottom: 1px solid var(--line-l); }
}
@media (max-width: 520px) {
  .preuves { grid-template-columns: 1fr; }
  .preuves div { border-right: 0; border-bottom: 1px solid var(--line-l); }
  .preuves div:last-child { border-bottom: 0; }
}

/* Un visiteur qui a demandé moins de mouvement n'en reçoit aucun :
   le panneau est simplement là, complet, dès le premier rendu. */
@media (prefers-reduced-motion: reduce) {
  .scan.is-scanning .scan-line { animation: none; opacity: 0; }
  .scan.is-scanning .constat,
  .scan.is-scanning .scan-foot { opacity: 1; animation: none; }
}

/* Titre de section réservé aux technologies d'assistance : le panneau de
   constats a besoin d'un nom pour être annoncé, pas d'un titre à l'écran. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.preuves-band { background: var(--card); }
.preuves-band .wrap { padding: 0; }
@media (min-width: 1265px) { .preuves-band .wrap { padding: 0 32px; } }

@media (max-width: 900px) {
  .scan-foot { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
}
@media (max-width: 520px) { .scan-foot { grid-template-columns: 1fr; } }


/* À l'écran, le bloc d'identification n'existe pas. Déclaré AVANT le bloc
   @media print : placé après, il gagnait à spécificité égale et masquait
   l'identification sur le papier, exactement là où elle sert. */
.print-entete { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   IMPRESSION
   La décision d'achat passe par un dossier agrafé et une annexe de
   comité. Sans ces règles, la page imprimée était trouée : 25 blocs
   révélés au défilement restaient à `opacity: 0` en occupant leur
   place, le nombre de mots imprimés dépendait donc du parcours de
   lecture (838 à 1 873), et le texte blanc des fonds sombres sortait
   à 2,30:1 sur papier — Chrome ne peint pas les aplats par défaut.
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  @page { margin: 14mm 12mm; }

  /* Rien de ce qui dépend du défilement ne doit dépendre du défilement. */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scan .constat, .scan .scan-foot { opacity: 1 !important; animation: none !important; }
  [role="tabpanel"][hidden] { display: block !important; }

  /* Encre sur papier : les aplats ne s'impriment pas, le texte clair posé
     dessus devenait illisible. On repasse tout en noir sur blanc. */
  body, .hero, .section-dark, .section-cta, .scan, .footer, .nav {
    background: #fff !important; color: #000 !important;
  }
  .hero h1, .hero h1 .hl, .lede, .lede strong, .section-dark h2, .section-dark p,
  .section-cta h2, .section-cta p, .scan .cible, .scan .euro, .scan .phrase,
  .scan-foot, .scan-foot strong, .footer, .footer p, .footer a,
  .brand-name, .brand-name em, .tag, .tag.on-dark, .hero-note, .scan-note {
    color: #000 !important;
  }
  .scan, .constat, .preuves div, .trust-grid, .price-card { border-color: #999 !important; }

  /* Ce qui n'a pas de sens sur papier. */
  .nav, .nav-cta, .hero-cta, .pricing-cta, .section-cta .hero-cta,
  .skip, .scan-line, .showcase-tabs { display: none !important; }

  /* L'identification, en tête de la première page seulement. */
  .print-entete {
    display: block; font-family: var(--mono); font-size: 9pt; line-height: 1.5;
    color: #000; border-bottom: 1px solid #000; padding-bottom: 6pt; margin-bottom: 10pt;
  }
  /* Une URL imprimée doit être lisible : on déplie les liens sortants. */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  h1, h2, h3 { page-break-after: avoid; }
  .price-card, .trust-item, .constat, .pain { page-break-inside: avoid; }
  img { max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAGES DE CONTENU
   Les satellites de l'architecture : un sujet, une intention, une URL.
   Elles réutilisent la feuille de l'accueil — aucune requête de plus,
   polices déjà en cache.
   ═══════════════════════════════════════════════════════════════════ */
.article { max-width: 780px; margin: 0 auto; padding: 104px 24px 90px; }
/* Le fil d'Ariane et le sélecteur de langue partagent une ligne : le premier
   dit où l'on est, le second dans quelle langue. */
.fil-barre { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.fil-barre .fil { margin-bottom: 0; }
.fil-barre .lang { margin-left: auto; }
.fil-barre .lang a { color: var(--muted-l); }
.fil-barre .lang a[aria-current="true"] { color: var(--ink-800); background: var(--line-l); }
.fil-barre .lang a:hover { color: var(--ink-800); }
.fil { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted-l); margin-bottom: 26px; }
.fil a { color: var(--signal-encre); text-decoration: none; }
.fil a:hover { text-decoration: underline; }
/* `--line-l` est une couleur de FILET, pas de texte : sur blanc elle donne
   1.15:1. Le separateur porte la hierarchie du fil, il n'est pas decoratif. */
.fil span { margin: 0 7px; color: var(--muted-l); }
.article h1 { font-family: var(--head); font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -.018em; color: var(--ink-800); margin-bottom: 16px; }
.article .chapo { font-size: 19px; line-height: 1.6; color: var(--muted-l); margin-bottom: 14px; }
.article .meta-art { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-l); margin-bottom: 44px; padding-bottom: 22px; border-bottom: 1px solid var(--line-l); }
.article h2 { font-family: var(--head); font-size: 27px; font-weight: 700; color: var(--ink-800); margin: 46px 0 14px; letter-spacing: -.01em; }
.article h3 { font-family: var(--head); font-size: 20px; font-weight: 600; color: var(--ink-800); margin: 30px 0 10px; }
.article p, .article li { font-size: 16.5px; line-height: 1.72; color: var(--text-l); margin-bottom: 14px; }
.article ul, .article ol { padding-left: 22px; }
/* `:not(.btn)` est indispensable : sans lui cette regle bat `.btn-primary`
   en specificite (0,1,1 contre 0,1,0) et repeint le texte des boutons en
   bleu de lien — sur un fond orange, soit 1.84:1. */
.article a:not(.btn) { color: var(--lien); }
.article code { font-family: var(--mono); font-size: .88em; background: var(--card); border: 1px solid var(--line-l); border-radius: 4px; padding: 1px 5px; }
.article .encart { background: var(--card); border: 1px solid var(--line-l); border-left: 3px solid var(--signal); border-radius: 0 10px 10px 0; padding: 22px 26px; margin: 30px 0; }
.article .encart p:last-child, .article .encart ul:last-child { margin-bottom: 0; }
.article .encart .titre-encart { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-encre); margin-bottom: 10px; }
.tbl { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-l); vertical-align: top; }
.tbl th { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-l); font-weight: 600; }
.tbl td code { background: transparent; border: 0; padding: 0; color: var(--ink-800); font-weight: 600; }
.tbl .part { color: var(--signal-encre); font-family: var(--mono); font-size: 13px; }
.tbl .full { color: var(--preuve); font-family: var(--mono); font-size: 13px; }
.suite { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line-l); }
.suite h2 { margin-top: 0; }
.suite-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.suite-liens a { display: block; padding: 18px 20px; background: var(--card); border: 1px solid var(--line-l); border-radius: 10px; text-decoration: none; }
.suite-liens a:hover { border-color: var(--signal-encre); }
.suite-liens strong { display: block; font-family: var(--head); font-size: 17px; font-weight: 600; color: var(--ink-800); margin-bottom: 5px; }
.suite-liens span { font-size: 14px; color: var(--muted-l); }
.cta-article { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ── Sélecteur de langue et bannière de suggestion ─────────────────── */
.lang { display: flex; gap: 2px; font-family: var(--mono); font-size: 12px; }
.lang a { color: var(--muted-d); text-decoration: none; padding: 4px 7px; border-radius: 5px; }
.lang a[aria-current="true"] { color: #fff; background: var(--ink-600); }
.lang a:hover { color: #fff; }
.suggest-lang {
  display: none; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--ink-800); color: var(--text-d); border-bottom: 1px solid var(--line-d);
  padding: 11px 32px; font-size: 14.5px;
}
.suggest-lang.is-on { display: flex; }
.suggest-lang a { color: var(--signal); font-weight: 600; }
.suggest-lang button {
  margin-left: auto; background: none; border: 1px solid var(--line-d); color: var(--muted-d);
  border-radius: 6px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer;
}
.suggest-lang button:hover { color: #fff; border-color: var(--muted-d); }

@media (max-width: 720px) {
  .suite-liens { grid-template-columns: 1fr; }
  .article { padding: 84px 20px 70px; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 9px 8px; }
}
@media print {
  .fil, .suite, .cta-article, .suggest-lang, .lang { display: none !important; }
  .article { max-width: none; padding: 0; }
  .article .encart { border: 1px solid #999 !important; background: #fff !important; }
}

/* ── Selecteur de langue : barre haute au-dessus de 950 px, pied de page en
   dessous ──────────────────────────────────────────────────────────────────
   Garde dans la barre, il poussait `.nav-cta` a 426 px dans une fenetre de
   390 : 36 px de debordement horizontal, mesures. Le pied de page est
   l'emplacement usuel d'un selecteur de langue sur mobile, et la banniere de
   suggestion automatique couvre le cas du visiteur qui arrive dans la
   mauvaise langue. */
@media (max-width: 950px) {
  .nav .lang { display: none; }
}
.footer-lang { margin-top: 18px; }
.footer-lang .lang { display: inline-flex; }
@media (min-width: 951px) {
  .footer-lang { display: none; }
}