/* ═══════════════════════════════════════════════════════════════════════════
   BLANC — couche d'harmonisation esthétique (refonte 04/09/2026)
   ---------------------------------------------------------------------------
   Chargée EN DERNIER sur chaque page réelle. Son rôle : imposer la direction
   suisse/épurée par-dessus le CSS inline hérité, que l'on ne peut pas réécrire
   ligne à ligne sans risque (index.html porte à lui seul ~2 250 lignes de CSS).

   Trois principes, dans cet ordre :
     1. APLATIR   — le filet 1px et le blanc séparent les objets, pas l'ombre.
     2. AFFERMIR  — rayons francs ; plus de pilules ni de grands arrondis.
     3. RESTREINDRE — l'accent est RARE : réservé à l'action.

   ⚠️ N'altère JAMAIS la charte risque ni les couleurs sémantiques.
   Le `!important` est ici légitime et volontaire : il ne sert qu'à battre des
   déclarations inline héritées, jamais à masquer une erreur de cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. APLATIR ─────────────────────────────────────────────────────────── */
.mob-cta, .ann-dot, .country-toggle-btn, .nav-mobile, .hero-cta-primary,
.hero-form-col, .tab, .f-btn, .sc-risk-dot, .rsScn, .rsScn-dot, .rsScn-vchip,
.rsScn-lvl, .rsScn-verdict, .teaser-banner, .anomaly-panel, .sonar-demo,
.decision-panel, .form-card, .card, .pricing-card, .feat-card, .metric-card,
.badge, .chip, .tab.on, .country-toggle-btn.on {
  box-shadow: none !important;
}
/* Aplatissement général — borné par TYPES d'éléments (jamais `*`, qui
   toucherait aussi pseudo-éléments et SVG). Dans le système Blanc, l'ombre
   décorative n'existe pas : elle est remplacée par le filet et le blanc. */
div, section, article, aside, header, footer, form, nav, ul, ol, li,
table, thead, tbody, tr, td, th, figure, details, summary,
button, input, select, textarea, label, a, span, p, h1, h2, h3, h4 {
  box-shadow: none !important;
}

/* Seule exception : les calques réellement flottants (menu, modale, popover)
   et l'anneau de focus, qui doivent se détacher du fond pour être lisibles. */
.nav-dd-menu, .exit-modal-box, .actions-menu > .menu, .nav-mobile,
[role="dialog"], [role="menu"], .modal, .popover, .dropdown, .tooltip {
  box-shadow: 0 12px 32px -18px rgba(14, 15, 16, 0.18) !important;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  /* WCAG 2.4.11/1.4.11 : l'indicateur de focus doit atteindre 3:1 contre
     l'arriere-plan. Un halo a 28 % d'opacite tombait a 1,64:1 — invisible
     pour qui navigue au clavier. On pose un TRAIT PLEIN a l'accent plein
     (#243BD1 = 8:1 sur blanc), le halo ne servant plus que d'appui. */
  outline: 2px solid var(--accent, #243BD1) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(36, 59, 209, 0.18) !important;
}

/* ─── 2. AFFERMIR — rayons francs ────────────────────────────────────────── */
.hero-form-col, .sonar-demo, .anomaly-panel, .decision-panel, .exit-modal-box,
.nav-dd-menu, .teaser-banner, .form-card, .pricing-card, .feat-card {
  border-radius: 8px !important;
}
.exit-btn, .exit-input, .tabs, .tab, .f-input, .f-btn, .country-toggle-m,
.sc-decision, .hero-cta-primary, .hero-cta-secondary, .mob-cta-b, .btn,
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  border-radius: 5px !important;
}
/* Les pastilles de statut restent rondes : c'est une information, pas un style. */
.ann-dot, .badge-dot, .sc-risk-dot, .rsScn-dot, .exit-x { border-radius: 50% !important; }

/* ─── 3. TYPOGRAPHIE — un seul grotesque, pas d'italique décorative ──────── */
/* L'emphase du hero est portée par la COULEUR, jamais par une italique :
   le système Blanc n'a qu'un grotesque, il n'a pas d'italique de labeur. */
h1 em, h1 i, h1 span, h2 em, h2 i, h2 span,
.hero h1 em, .hero-title em, .hero-title span {
  font-style: normal !important;
}
h1, h2, h3 { letter-spacing: -0.03em; }
h1 { line-height: 1.03; }
/* Micro-libellés : l'espacement fait la hiérarchie */
.kicker, .eyebrow, .ann-bar, .sect-kicker, .label-xs {
  letter-spacing: 0.14em;
}
/* Chiffres alignés partout où ils comptent */
.score, .metric, .stat, .num, .price, td, .tabular { font-variant-numeric: tabular-nums; }

/* ─── 4. BANDEAU D'ANNONCE — silencieux, pas un aplat de couleur ─────────── */
.ann-bar {
  background: #FFFFFF !important;
  color: var(--ink-2, #54585C) !important;
  border-bottom: 1px solid var(--line, #EBEBE7) !important;
  box-shadow: none !important;
}
.ann-bar a, .ann-link { color: var(--accent, #243BD1) !important; font-weight: 600; }
.ann-x { color: var(--ink-2, #54585C) !important; } /* AA 1.4.11 : element d.interface >= 3:1 */

/* ─── 4 bis. NAV SIMPLIFIÉE (10 pages : métier, mentions, sources, devs…) ──
   Ces pages portaient une barre navy pleine, incohérente avec la nav blanche
   du reste du site. Dans le système Blanc, l'en-tête est blanc à filet. */
nav:has(> .nav-back) {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--line, #EBEBE7) !important;
}
nav:has(> .nav-back) .nav-logo,
nav:has(> .nav-back) .nav-logo span { color: var(--ink, #0E0F10) !important; }
nav:has(> .nav-back) .nav-logo em { color: var(--accent, #243BD1) !important; }
nav:has(> .nav-back) .nav-back { color: var(--ink-2, #54585C) !important; }
nav:has(> .nav-back) .nav-back:hover { color: var(--ink, #0E0F10) !important; }
/* Le pictogramme du logo suit l'encre du texte */
nav:has(> .nav-back) .nav-logo svg circle,
nav:has(> .nav-back) .nav-logo svg path { fill: var(--accent, #243BD1); stroke: var(--accent, #243BD1); }

/* ─── 5. L'ACCENT EST RARE ───────────────────────────────────────────────── */
/* Une seule action colorée par zone. Dans la barre de navigation, seul
   « Lancer une analyse » reste plein ; l'inscription redevient un filet. */
.nav-signup {
  background: #FFFFFF !important;
  color: var(--ink, #0E0F10) !important;
  border: 1px solid var(--line, #EBEBE7) !important;
  box-shadow: none !important;
}
.nav-signup:hover { background: var(--surface-2, #F6F6F3) !important; }

/* Le CTA secondaire redevient neutre : un seul bouton porte la couleur. */
.hero-cta-secondary, .nav-cta-ghost, .btn-secondary {
  background: #FFFFFF !important;
  color: var(--ink, #0E0F10) !important;
  border: 1px solid var(--line, #EBEBE7) !important;
}
.hero-cta-secondary:hover, .nav-cta-ghost:hover, .btn-secondary:hover {
  background: var(--surface-2, #F6F6F3) !important;
}

/* ─── 6. FILETS PLUTÔT QUE BORDURES ÉPAISSES ────────────────────────────── */
.form-card, .hero-form-col, .sonar-demo, .decision-panel, .anomaly-panel,
.card, .pricing-card, .feat-card {
  border-color: var(--line, #EBEBE7) !important;
}

/* ─── 7. DE L'AIR ────────────────────────────────────────────────────────── */
section, .section { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero, .hero-wrap { padding-top: clamp(40px, 5vw, 72px); }

/* ═══════════════════════════════════════════════════════════════════════════
   PASSE D'AFFINAGE — au-delà du re-skin
   Ce qui suit ne change pas les couleurs mais la LECTURE : hiérarchie,
   rythme, mesure. C'est ce qui sépare « migré » de « dessiné ».
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 9. HIÉRARCHIE DU HERO — elle était inversée ────────────────────────────
   `.hero-p` (support) était plus GROS et plus pâle que `.hero-tension` (accroche).
   On rétablit : l'accroche mène, le support suit. */
.hero-tension {
  font-size: 19px !important;
  line-height: 1.55 !important;
  color: var(--ink-2, #54585C) !important;
  max-width: 56ch;
}
.hero-p {
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  /* AA : le tertiaire (#9A9EA3 = 2.69:1) est reserve au NON-texte.
     Le support du hero est du texte courant -> secondaire conforme (4.91:1). */
  color: #6D7176 !important;
  max-width: 58ch;
}

/* ─── 10. EMPHASE CALME ──────────────────────────────────────────────────────
   Dans un système épuré, on appuie par le POIDS, pas par un saut de couleur :
   le gras noir au milieu d'un gris clair produit un texte « tacheté ». */
p strong, p b, li strong, li b {
  font-weight: 600;
  color: inherit;
}
/* Sauf là où l'emphase EST l'information (chiffres clés, verdicts). */
.stat strong, .metric strong, .score strong, .kpi strong { color: var(--ink, #0E0F10); }

/* ─── 11. MESURE DE LECTURE ─────────────────────────────────────────────────
   Au-delà de ~70 caractères, l'œil perd la ligne. */
p, li { max-width: 72ch; }
.section-subtitle, .hero p { max-width: 64ch; }
p.full, .full p, table p, td p, th p, figcaption { max-width: none; }

/* ─── 12. ÉCHELLE TYPOGRAPHIQUE — plus d'assurance ─────────────────────────── */
h1 { letter-spacing: -0.038em; line-height: 1.02; font-weight: 800; }
h2 { letter-spacing: -0.03em; line-height: 1.1; }
h3 { letter-spacing: -0.022em; }
h1 + p, h2 + p { margin-top: 14px; }

/* ─── 13. RYTHME VERTICAL ───────────────────────────────────────────────────── */
h2 { margin-top: 0; }
section > h2, section > .section-title { margin-bottom: 10px; }

/* ─── 14. SURFACES SOMBRES — re-clé sur l'encre du système ──────────────────
   Décision assumée : on garde UN moment sombre (la scène de démo), mais dans
   la teinte du système (#0E0F10), pas un navy hérité, et à angles francs. */
.rsScn, .sonar-demo, .demo-dark, .dark-panel, [class*="scene"], [class*="cockpit"] {
  border-radius: 8px !important;
}

/* ─── 15. LIENS ─────────────────────────────────────────────────────────────── */
p a, li a { color: var(--accent, #243BD1); text-underline-offset: 3px; }
p a:hover, li a:hover { text-decoration: underline; }

/* ─── 15 bis. ICÔNES EN LIGNE DANS UN LIEN ─────────────────────────────────
   design-system.css pose `img, svg { display: block }` (reset legitime pour
   les images). Mesure faite sur la page : 22 des 27 SVG concernes sont dans
   un conteneur flex, ou `display` est de toute facon blockifie — aucun effet.
   Seuls 2 liens hors flex voyaient leur icone passer a la ligne. On corrige
   CES cas, sans toucher au reset global : sur un enfant de flex,
   `inline-block` est ignore, la regle est donc sans risque ailleurs. */
a > svg { display: inline-block; vertical-align: middle; }

/* ─── 16. FILETS UNIFIÉS ────────────────────────────────────────────────────── */
hr { border: 0; border-top: 1px solid var(--line, #EBEBE7); }
table th, table td { border-color: var(--line, #EBEBE7); }

/* ─── 8. FOCUS visible et sobre ──────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  /* NE JAMAIS remettre `outline: transparent` ici : cela supprimait
     l'indicateur natif du navigateur pour le remplacer par un halo
     insuffisant — regression d'accessibilite introduite le 04/09. */
  outline: 2px solid var(--accent, #243BD1) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(36, 59, 209, 0.18) !important;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÉLÉVATION — de « épuré » à « premium »
   ---------------------------------------------------------------------------
   Constat mesuré sur la page en production : le rendu paraissait bon marché
   non par excès de minimalisme, mais par DENSITÉ et TIMIDITÉ.
     · 7 boutons dont le libellé passait à la ligne (« Créer un compte » sur 3)
     · 5 appels à l'action concurrents dans la barre de navigation
     · tailles dominantes 13px (×113), 12px (×50), 11px (×49), 10px (×19)
     · aucun palier entre 22px et 40px : pas d'échelle, donc pas de rythme
     · Arial qui fuite dans les champs de formulaire
   Le luxe visuel, c'est moins d'objets, plus grands, plus calmes — et UNE
   seule chose qui domine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── E1. Un libellé de bouton ne passe JAMAIS à la ligne ─────────────────── */
/* Uniquement AU-DESSUS du mobile : sous 640px, empecher l'enroulement
   fait deborder la page horizontalement (mesure : +137px sur /blog). */
@media (min-width: 641px) {
  nav a, nav button, .btn, .nav-cta, .nav-signup, .nav-a,
  .hero-cta-primary, .hero-cta-secondary, .f-btn, .mob-cta-b {
    white-space: nowrap;
  }
}
/* Hauteur de frappe confortable et CONSTANTE (cible tactile + assurance) */
.nav-cta, .nav-signup, .hero-cta-primary, .hero-cta-secondary, .btn {
  min-height: 42px;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 18px;
  line-height: 1;
}

/* ─── E2. Les champs héritent de la police (Arial fuyait ici) ─────────────── */
input, select, textarea, button, optgroup {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* ─── E3. Plancher typographique — plus rien sous 12px ────────────────────
   19 éléments étaient à 10px et 49 à 11px : c'est une densité de back-office.
   Les micro-libellés deviennent de vraies capitales espacées, traitement
   éditorial classique, lisible et calme. */
.n-ic, .p-ic, .rsScn-chip, .vs-delta-lbl, .ft-badge, .chip-cc, .rsScn-signal,
.kicker, .eyebrow, .label-xs, .sect-kicker, small, figcaption {
  font-size: 12px !important;
  letter-spacing: 0.06em;
}
.kicker, .eyebrow, .label-xs, .sect-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--ink-2, #54585C) !important;
}
/* Un titre ne peut pas être plus petit que le corps de texte. */
h4 { font-size: 15px !important; font-weight: 650; letter-spacing: -0.01em; }
h3 { font-size: 19px; }

/* ─── E4. L'échelle manquante entre 22 et 40 ─────────────────────────────── */
h2 { font-size: clamp(26px, 2.6vw, 34px); }
h1 { font-size: clamp(36px, 4.4vw, 52px); }

/* ─── E5. Le corps de texte respire ──────────────────────────────────────── */
p, li { line-height: 1.68; }
body { font-size: 15px; letter-spacing: -0.005em; }

/* ─── E6. UNE seule action dominante ──────────────────────────────────────
   « Se connecter » redevient un lien : un bouton plein + un contour + un
   troisième bouton, c'est trois voix qui parlent en même temps. */
.nav-signin, .nav-login, a[href*="sign-in"], a[href*="login"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-2, #54585C) !important;
  font-weight: 500;
}
.nav-signin:hover, .nav-login:hover, a[href*="sign-in"]:hover { color: var(--ink, #0E0F10) !important; }

/* ─── E7. Le saut de mise en page au défilement ───────────────────────────
   `content-visibility:auto` réservait 1394px pour un contenu qui en fait
   1252 : un décalage visible de ~142px pendant le défilement. */
.cv-auto { contain-intrinsic-size: auto 900px; }
.cv-auto-tall { contain-intrinsic-size: auto 1250px; }

/* La barre se resserre plutot que de deborder : le libelle du bouton
   principal ne doit jamais etre tronque au bord de l ecran. */
.nav-r { min-width: 0; }
@media (max-width: 1400px) {
  .nav-a { padding-inline: 9px; }
  .nav-signup { padding-inline: 12px; }
}

/* ─── E8. La barre collante est OPAQUE ────────────────────────────────────
   A 88 % d'opacite, le texte de la page transparaissait a travers la nav
   pendant le defilement : impression de calque bricole. Une barre premium
   est franche ; le filet suffit a la detacher. */
nav {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
}

/* ─── E9. UN SEUL langage de pastille ─────────────────────────────────────
   `.demo-chip` etait une PILULE (rayon 999px, 11,5px) tandis que `.chip-cc`
   etait un rectangle 4px/12px : deux dessins pour le meme objet, cote a cote.
   Dans le systeme Blanc il n'y a pas de pilule — le rayon est franc. */
.demo-chip, .chip-cc, .badge, .chip, .ft-badge, .rsScn-chip {
  border-radius: 5px !important;
  font-size: 12px !important;
  border: 1px solid var(--line, #EBEBE7) !important;
  background: #FFFFFF !important;
  color: var(--ink-2, #54585C) !important;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-weight: 500;
}
/* Le code pays reste un reperage discret, pas un second bouton. */
.chip-cc {
  background: var(--surface-2, #F6F6F3) !important;
  border-color: transparent !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  min-height: 20px;
  padding: 0 6px;
}
/* Les pastilles de RISQUE gardent leur charte : c'est de l'information. */
.demo-chip.risk, .demo-chip[class*="risque"], .chip.risk {
  border-color: rgba(217, 119, 6, .35) !important;
  color: #92400E !important;
  background: #FFFBEB !important;
}

/* ─── E10. Nav mobile des gabarits generes ───────────────────────────────
   ATTENTION — piege rencontre : forcer `display:flex` sur .nav-r ECRASE le
   `display:none` qui masque les liens derriere le menu burger. La barre de
   l'accueil passait alors a 259px de haut a 360px : bien pire que le
   debordement corrige. On n'active donc le repli QUE sur les barres qui
   n'ont pas de burger (gabarits generes : blog, glossaire, faq, comparatif),
   et on ne touche JAMAIS au display. */
@media (max-width: 640px) {
  nav:not(:has(.nav-burger)) {
    height: auto !important;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 14px;
  }
  nav:not(:has(.nav-burger)) .nav-right,
  nav:not(:has(.nav-burger)) .nav-r {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
  }
}

/* ─── E11. Barres sans burger : compactes sur mobile ─────────────────────
   Le repli evite le debordement, mais une barre de 159px mange un cinquieme
   d'un ecran de telephone. On resserre l'echelle plutot que de MASQUER des
   liens (les masquer nuirait a la navigation et au maillage interne). */
@media (max-width: 640px) {
  nav:not(:has(.nav-burger)) { padding: 6px 12px; gap: 2px 8px; }
  nav:not(:has(.nav-burger)) .nav-a {
    font-size: 12.5px;
    padding: 4px 7px;
    min-height: 32px;
  }
  nav:not(:has(.nav-burger)) .nav-logo { font-size: 15px; }
  nav:not(:has(.nav-burger)) .nav-cta {
    font-size: 12.5px;
    padding: 0 12px;
    min-height: 34px;
  }
}
/* NOTE — tentative ECARTEE : transformer les liens en rail a defilement
   horizontal. Mesure : les barres restaient a 119-133px ET /dashboard
   passait de 18 a 339px de debordement (le `nowrap` sur la barre le
   contraignait). Le vrai correctif pour ces pages est un menu burger,
   pas une couche CSS : a traiter dans le gabarit, pas ici. */

/* ═══════════════════════════════════════════════════════════════════════════
   SOBRE — registre institutionnel (05/09/2026)
   ---------------------------------------------------------------------------
   Demande du fondateur : « moins de couleur, plus épuré, plus élégant, plus
   rassurant, plus sérieux, plus analytics, moins joujou, jamais d'emoji ».

   Le principe qui gouverne tout ce bloc : LA COULEUR APPARTIENT AUX DONNÉES.
   Un rapport d'agence de notation n'a pas de bouton bleu vif ; il a de l'encre,
   du papier, des filets, des chiffres alignés — et de la couleur UNIQUEMENT
   là où elle porte un sens : le niveau de risque.

   Trois gestes :
     1. L'accent quitte les SURFACES. Les actions passent à l'encre.
     2. Le titre ne se colore plus. La hiérarchie se fait par la taille.
     3. Une police à empattements porte l'affichage : elle dit l'institution
        et le document, là où un grotesque seul disait l'application.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── S1. Empattements pour l'affichage, grotesque pour l'interface ──────── */
h1, h2, h3, .hero h1, .hero-title, .sect-title, .section-title {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
}
h1, .hero h1, .hero-title { font-weight: 700; line-height: 1.06; }
h2 { line-height: 1.18; }
/* L'interface, elle, reste un grotesque : boutons, champs, étiquettes. */
button, input, select, textarea, .btn, .nav-a, .nav-cta, .kicker, .eyebrow,
.label-xs, .sect-kicker, th, .chip, .badge, .demo-chip {
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
}

/* ─── S2. Le titre ne se colore pas ──────────────────────────────────────
   Colorer la moitié d'un titre est un geste d'application grand public.
   Un document sérieux hiérarchise par la taille et l'espace. */
h1 em, h1 span, h1 b, h1 strong,
.hero h1 em, .hero h1 span, .hero-title em, .hero-title span {
  color: inherit !important;
  /* PIEGE : le bleu ne venait PAS de `color` mais de
     `-webkit-text-fill-color`, qui l'ECRASE. La couleur calculee
     annoncait l'encre pendant que l'ecran affichait du bleu.
     Sans cette ligne, la regle ci-dessus est sans effet. */
  -webkit-text-fill-color: currentColor !important;
  font-weight: inherit;
  font-style: normal !important;
}

/* ─── S3. Les actions passent à l'encre ──────────────────────────────────
   L'aplat bleu vif était le principal signal « SaaS grand public ». */
.hero-cta-primary, .nav-cta, .f-btn, .btn-primary, .mob-cta-b,
button[type="submit"], .cta-primary, .sc-decision-btn {
  background: var(--ink, #0E0F10) !important;
  border-color: var(--ink, #0E0F10) !important;
  color: #FFFFFF !important;
}
.hero-cta-primary:hover, .nav-cta:hover, .f-btn:hover, .btn-primary:hover,
button[type="submit"]:hover, .cta-primary:hover {
  background: #2A2D30 !important;
  border-color: #2A2D30 !important;
}

/* ─── S4. L'accent ne subsiste que dans le TEXTE ──────────────────────────
   Plus d'aplats colorés : le bleu ne sert qu'aux liens et au focus, là où il
   signale une action de lecture — jamais comme décor. */
.ann-bar a, .ann-link, p a, li a, .link { color: var(--accent, #243BD1) !important; }
.badge-accent, .chip-accent, .pill-accent {
  background: transparent !important;
  color: var(--ink-2, #54585C) !important;
  border: 1px solid var(--line, #EBEBE7) !important;
}

/* ─── S5. Les chiffres se lisent comme des chiffres ──────────────────────
   C'est le registre « analytics » : tabulaire partout où un nombre compte,
   et le monospace pour les identifiants (SIREN, ICE, dates). */
.score, .metric, .stat, .num, .price, .kpi, td, .tabular,
[class*="score"], [class*="count"], [class*="delta"] {
  font-variant-numeric: tabular-nums lining-nums;
}
.siren, .ice, .id, .ref, code, kbd, .mono, [class*="siren"], [class*="identifiant"] {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.94em;
  letter-spacing: -0.01em;
}

/* ─── S6. Moins de boîtes, plus de filets ────────────────────────────────
   Une note de recherche sépare par des règles, pas par des cartes empilées. */
.card, .feat-card, .metric-card {
  background: transparent !important;
  border-width: 0 0 1px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--line, #EBEBE7) !important;
}

/* ─── S7. Ce qui reste coloré est SÉMANTIQUE, jamais décoratif ───────────
   La charte de risque est verrouillée côté backend : on ne la touche pas.
   On s'assure seulement qu'elle demeure la SEULE couleur forte de la page. */

/* ─── S8. Les derniers aplats bleus ──────────────────────────────────────
   Repérés par balayage : .cta / .roi-cta (l'appel à l'action principal de
   /pricing et /produits) plus deux PANNEAUX d'information. On distingue les
   deux cas : une action prend l'encre, un panneau prend le papier. */
.cta, .roi-cta, a.cta, .cta-lg, .nav-signup.filled, .btn-cta {
  background: var(--ink, #0E0F10) !important;
  border-color: var(--ink, #0E0F10) !important;
  color: #FFFFFF !important;
}
.cta:hover, .roi-cta:hover, a.cta:hover, .btn-cta:hover {
  background: #2A2D30 !important;
  border-color: #2A2D30 !important;
}
/* Un panneau d'information n'est pas un bouton : papier + filet. */
.ft-news, .guarantee, .notice, .callout, .info-panel {
  background: var(--surface-2, #F6F6F3) !important;
  color: var(--ink-2, #54585C) !important;
  border: 1px solid var(--line, #EBEBE7) !important;
}
.ft-news *, .guarantee * { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
.ft-news a, .guarantee a { color: var(--accent, #243BD1) !important; }

/* ─── S9. La police d'affichage s'impose partout ─────────────────────────
   Certains gabarits (blog) redéclaraient la famille sur h1 : sans priorité,
   le grotesque l'emportait et la page sortait du registre. */
h1, h2, h3, .hero h1, .hero-title, .sect-title, .section-title, article h1, article h2 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif !important;
}
/* …sauf l'interface, qui reste un grotesque. */
button, input, select, textarea, .btn, .nav-a, .nav-cta, .cta,
.kicker, .eyebrow, .label-xs, .sect-kicker, .chip, .badge, .demo-chip, th {
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif !important;
}

/* ─── S10. Dernier aplat : « Créer un compte » ───────────────────────────
   Repéré par balayage (seul élément encore bleu du site). « Lancer une
   analyse » est l'action principale ; l'inscription est SECONDAIRE, donc
   contour et non aplat. Règle placée en fin de feuille : à spécificité et
   priorité égales, la dernière l'emporte. */
.nav-signup, #signupBtn, button.nav-signup {
  background: #FFFFFF !important;
  color: var(--ink, #0E0F10) !important;
  border: 1px solid var(--line, #EBEBE7) !important;
  -webkit-text-fill-color: currentColor !important;
}
.nav-signup:hover, #signupBtn:hover {
  background: var(--surface-2, #F6F6F3) !important;
  border-color: var(--ink-3, #9A9EA3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — le paragraphe devient un TABLEAU DE FAITS
   ---------------------------------------------------------------------------
   Le hero portait 70 mots de copie de soutien, dont une partie REPETAIT la
   ligne de réassurance juste en dessous (l'ancien décompte y figurait deux fois).
   Un paragraphe qui enumere des faits est de la publicite ; les MEMES faits
   presentes en tableau sont une fiche technique. C'est le registre analytique
   demande — et c'est plus credible, donc plus rassurant.
   Aucun fait n'a ete ajoute, retire ni modifie : seule la forme change.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-faits {
  margin: 18px 0 26px;
  max-width: 52ch;
  border-top: 1px solid var(--line, #EBEBE7);
}
.hero-faits > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line, #EBEBE7);
  align-items: baseline;
}
.hero-faits dt {
  font-family: 'Public Sans', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6D7176;
  margin: 0;
}
.hero-faits dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2, #54585C);
}
/* Sous 560px la grille en deux colonnes serre trop : on empile. */
@media (max-width: 560px) {
  .hero-faits > div { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
}

/* ─── L'accroche gagne en presence, le hero respire ─────────────────────── */
.hero-tension {
  font-size: 17.5px !important;
  font-weight: 500 !important;
  color: var(--ink-2, #54585C) !important;
  margin: 4px 0 4px !important;
  max-width: 48ch;
}
/* Le bandeau d'accroche : un filet discret plutot qu'une pastille */
.hero-text .badge, .hero .badge {
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--ink, #0E0F10) !important;
  border-radius: 0 !important;
  padding: 1px 0 1px 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6D7176 !important;
}
.hero-text .badge .badge-dot, .hero .badge .badge-dot { display: none !important; }