/* =========================================================================
   Finelix Conseil — feuille de style du site
   Traduction du design system « finelix » (navy / or / bleu signal).
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --navy-50:#f2f5fa; --navy-100:#e3e9f3; --navy-200:#c6d1e5; --navy-300:#9daecd;
  --navy-400:#6e83ac; --navy-500:#4a6089; --navy-600:#33476b; --navy-700:#253855;
  --navy-800:#1b2a4a; --navy-900:#121d35; --navy-950:#0a1122;

  --gold-200:#f3da9b; --gold-300:#e7c77a; --gold-400:#d9b45b; --gold-500:#c9a84c;
  --gold-600:#b58f35; --gold-700:#946f23;

  --signal-50:#eef5ff; --signal-100:#d9e8ff; --signal-300:#7faefb; --signal-400:#4a8af4;
  --signal-500:#1f6feb; --signal-600:#1257c4; --signal-700:#0e449b;

  --n-0:#ffffff; --n-50:#f7f8fa; --n-100:#eff1f5; --n-200:#e1e5ec; --n-300:#c9cfda;
  --n-400:#a2abbb; --n-500:#7b8697; --n-600:#5c6676; --n-700:#444c59; --n-800:#2e343e;

  --success-50:#e9f7f1; --success-500:#157f5f; --success-700:#0e5b44;
  --warning-50:#fdf4e3; --warning-700:#85590a;
  --danger-50:#fdeeed; --danger-500:#c2382f; --danger-700:#942720;

  --gradient-navy: linear-gradient(150deg,#1b2a4a 0%,#121d35 58%,#0a1122 100%);
  --gradient-gold: linear-gradient(160deg,#f3da9b 0%,#d9b45b 30%,#c9a84c 55%,#b58f35 80%,#946f23 100%);

  --font-sans: 'Inter Tight', Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --wrap:1200px;
  --shadow-sm:0 1px 3px rgba(18,29,53,.08), 0 1px 2px rgba(18,29,53,.04);
  --shadow-md:0 4px 12px rgba(18,29,53,.09), 0 1px 3px rgba(18,29,53,.05);
  --shadow-lg:0 12px 32px rgba(18,29,53,.12), 0 2px 8px rgba(18,29,53,.06);
  --shadow-xl:0 24px 60px rgba(18,29,53,.16);
  --focus:0 0 0 3px rgba(31,111,235,.28);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  margin:0; background:var(--n-50); color:var(--n-800);
  font-family:var(--font-sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
a { color:var(--signal-600); }
h1,h2,h3,h4 { color:var(--navy-900); margin:0; font-weight:400; letter-spacing:-.025em; }
p { margin:0; }
ul,ol { margin:0; padding:0; }
:focus-visible { outline:2px solid var(--signal-500); outline-offset:2px; border-radius:4px; }
[hidden] { display:none !important; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy-900); color:#fff; padding:12px 18px; border-radius:0 0 var(--r-md) 0;
  font-size:14px; font-weight:500; text-decoration:none;
}
.skip-link:focus { left:0; }

/* ---------- Layout ---------- */
.wrap { max-width:var(--wrap); margin:0 auto; padding-inline:24px; }
.wrap--narrow { max-width:860px; }
.section { padding:76px 0; }
.section--sm { padding:56px 0; }
.section--xs { padding:34px 0; }
.section--white { background:var(--n-0); }
.section--sunken { background:var(--n-50); }
.section--dark { background:var(--gradient-navy); color:#fff; }
.section--rule-top { border-top:1px solid var(--n-200); }
.section--rule-bottom { border-bottom:1px solid var(--n-200); }
.section--rule { border-block:1px solid var(--n-200); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color:#fff; }

.split { display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:start; }
/* Sans cela, un contenu large (tableau, bloc de code) élargit sa colonne au
   lieu de défiler dans son propre conteneur, et fait déborder la page. */
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width:0; }
.split--even { grid-template-columns:1fr 1fr; align-items:center; }
.split--copy { grid-template-columns:.85fr 1.15fr; }
.split--aside { grid-template-columns:.8fr 1.2fr; }
/* Simulateur : réglages à gauche, résultat à droite. */
.split--sim { grid-template-columns:1.15fr .85fr; gap:24px; }
/* Article : corps de texte et colonne latérale (sommaire + encart). */
.split--article { grid-template-columns:minmax(0,1fr) 280px; gap:48px; }
.article-aside { position:sticky; top:100px; align-self:start; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.stack-2 { display:grid; gap:8px; }
.stack-3 { display:grid; gap:12px; }
.stack-4 { display:grid; gap:16px; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row--center { justify-content:center; }
.row--between { justify-content:space-between; align-items:flex-end; }

/* ---------- Typographie ---------- */
.eyebrow {
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; color:var(--n-600);
}
.section--dark .eyebrow { color:var(--gold-300); }
.h1 { font-size:52px; line-height:1.05; letter-spacing:-.03em; font-weight:300; }
.h2 { font-size:36px; line-height:1.12; font-weight:300; }
.h3 { font-size:24px; font-weight:400; }
.h4 { font-size:19px; font-weight:400; }
.h5 { font-size:17px; font-weight:500; }
.lead { font-size:17px; line-height:1.6; color:var(--n-600); }
.section--dark .lead { color:var(--navy-200); }
.sub { font-size:15px; line-height:1.6; color:var(--n-600); }
.small { font-size:13.5px; line-height:1.5; color:var(--n-600); }
.micro { font-size:12px; color:var(--n-600); }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.measure { max-width:68ch; }
.measure-sm { max-width:52ch; }
.gold { color:var(--gold-700); }
.section--dark .gold { color:var(--gold-300); }
.strong { color:var(--navy-900); font-weight:500; }
.section--dark .strong { color:#fff; }

.section-head { margin-bottom:26px; }
.section-head .h2 { margin:8px 0 10px; }
.section-head .sub { margin:0; }

/* ---------- Boutons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:var(--r-md); border:1px solid transparent;
  font-family:inherit; font-size:15px; font-weight:500; text-decoration:none;
  cursor:pointer; transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn--primary { background:var(--signal-500); color:#fff; }
.btn--primary:hover { background:var(--signal-600); }
.btn--navy { background:var(--navy-800); color:#fff; }
.btn--navy:hover { background:var(--navy-900); }
.btn--light { background:#fff; color:var(--navy-900); }
.btn--light:hover { background:var(--n-100); }
.btn--outline { background:#fff; border-color:var(--n-300); color:var(--navy-900); }
.btn--outline:hover { border-color:var(--navy-400); }
.btn--ghost-light { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff; }
.btn--ghost-light:hover { background:rgba(255,255,255,.16); }
.btn--sm { height:40px; padding:0 18px; font-size:13.5px; }
.btn--lg { height:48px; padding:0 24px; }
.btn--block { display:flex; width:100%; }

.link-arrow { font-size:14px; font-weight:500; color:var(--signal-600); text-decoration:none; }
.link-arrow:hover { text-decoration:underline; }

/* ---------- En-tête ---------- */
.site-header {
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--n-200);
}
.site-header__inner {
  max-width:var(--wrap); margin:0 auto; min-height:76px; padding:14px 24px;
  display:flex; align-items:center; gap:16px;
}
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; flex:none; }
.brand img { height:38px; width:38px; border-radius:9px; }
.brand span { font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--navy-900); white-space:nowrap; }
.site-nav { display:flex; gap:20px; flex-wrap:wrap; margin-right:auto; }
.nav-link {
  font-size:13.5px; font-weight:500; color:var(--n-600); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.nav-link:hover { color:var(--navy-900); }
.nav-link.is-active { color:var(--navy-900); border-bottom-color:var(--gold-500); }
.header-actions { display:flex; align-items:center; gap:12px; flex:none; }
.burger {
  display:none; width:42px; height:42px; border:1px solid var(--n-200); border-radius:var(--r-md);
  background:#fff; cursor:pointer; padding:0; align-items:center; justify-content:center;
}
.burger span { display:block; width:18px; height:1.5px; background:var(--navy-900); position:relative; }
.burger span::before,.burger span::after {
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--navy-900);
}
.burger span::before { top:-6px; } .burger span::after { top:6px; }
.mobile-panel {
  display:none; border-top:1px solid var(--n-200); background:#fff; padding:16px 24px 22px;
}
.mobile-panel a { display:block; padding:11px 0; font-size:15px; font-weight:500; color:var(--navy-900); text-decoration:none; border-bottom:1px solid var(--n-100); }
.mobile-panel .btn { margin-top:16px; }

/* ---------- Hero ---------- */
.hero { background:var(--gradient-navy); color:#fff; padding:64px 0 80px; }
.hero .h1 { color:#fff; margin:0 0 20px; }
.hero__facts { display:flex; gap:44px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); }
.fact__num { font-family:var(--font-mono); font-size:30px; font-weight:300; letter-spacing:-.03em; color:#fff; }
.fact__num small { font-size:15px; margin-left:3px; }
.fact__label { font-size:12.5px; color:var(--navy-300); margin-top:3px; }
.hero--compact { padding:56px 0 60px; }

/* Bascule pro / particulier */
.switch { display:inline-flex; gap:4px; padding:4px; background:rgba(255,255,255,.08); border-radius:var(--r-pill); margin-bottom:26px; }
.switch button {
  border:0; border-radius:var(--r-pill); padding:9px 20px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:500;
  background:transparent; color:var(--navy-200); transition:background-color .18s var(--ease);
}
.switch button[aria-selected="true"] { background:#fff; color:var(--navy-900); cursor:default; }

/* ---------- Cartes ---------- */
.card {
  background:#fff; border:1px solid var(--n-200); border-radius:var(--r-lg); padding:24px;
  text-decoration:none; display:block; position:relative; overflow:hidden;
}
a.card { transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
a.card:hover { border-color:var(--n-300); box-shadow:var(--shadow-md); }
.card__gold-bar { position:absolute; inset-inline:0; top:0; height:3px; background:var(--gradient-gold); }
.card .h4 { margin:0 0 8px; }
.card p { font-size:14px; color:var(--n-600); line-height:1.55; margin:0 0 14px; }
.card__meta { font-family:var(--font-mono); font-size:12.5px; color:var(--signal-600); }
.card--flat { padding:24px; border:0; border-radius:0; }
.card--pad-sm { padding:20px; }


/* Choix de profil (page d'accueil) : l'option retenue doit se distinguer au
   premier coup d'oeil, pas seulement pour les technologies d'assistance. */
.choice {
  display:flex; gap:14px; align-items:center; text-align:left;
  padding:14px 22px; font-family:inherit; cursor:pointer;
  border-width:var(--border-width-strong, 1.5px);
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.choice__n { font-size:11px; color:var(--n-600); transition:color .18s var(--ease); }
.choice[aria-pressed="true"] { border-color:var(--signal-500); background:var(--signal-50); cursor:default; }
.choice[aria-pressed="true"] .choice__n { color:var(--signal-600); }
.choice[aria-pressed="false"]:hover { border-color:var(--navy-400); background:var(--n-50); }


/* Cartes de solution (pages Professionnels et Particuliers) : pied de carte
   aligné en bas, pour que les liens « En savoir plus » tombent sur une même ligne. */
.solution { display:flex; flex-direction:column; }
.solution p { flex:1; }
.solution__foot {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid var(--n-100);
  /* Hauteur commune : sans elle, un pied avec lien est plus haut qu'un pied
     sans lien, et le filet se décale d'une carte à l'autre sur une même rangée. */
  min-height:37px;
}
.tile .link-arrow { font-size:13.5px; }

/* Grille jointive (filets 1px) */
.tile-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--n-200); border:1px solid var(--n-200); border-radius:var(--r-lg); overflow:hidden;
}
.tile-grid--2 { grid-template-columns:repeat(2,1fr); }
.tile { background:#fff; padding:24px; }
.tile h3 { font-size:17px; font-weight:500; margin:0 0 6px; }
.tile p { font-size:13.5px; color:var(--n-600); line-height:1.55; margin:0; }

/* Points numérotés */
.numbered { display:flex; gap:14px; align-items:flex-start; }
.numbered__n { font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--gold-800); padding-top:2px; flex:none; }
.numbered__title { font-size:15px; font-weight:500; color:var(--navy-900); }
.numbered__text { font-size:13.5px; color:var(--n-600); line-height:1.5; margin-top:2px; }

/* Étapes */
.steps { list-style:none; display:grid; gap:2px; }
.steps li { display:flex; gap:18px; padding:18px 0; border-bottom:1px solid var(--n-100); }
.steps li:last-child { border-bottom:0; }
.steps .step__n { font-family:var(--font-mono); font-size:12px; color:var(--gold-800); font-weight:500; padding-top:4px; flex:none; }
.steps .step__title { font-size:17px; font-weight:500; color:var(--navy-900); }
.steps p { font-size:14px; color:var(--n-600); margin:4px 0 0; line-height:1.55; }

/* Encadrés */
.callout {
  border:1px solid var(--n-200); border-left:3px solid var(--gold-500);
  background:#fff; border-radius:var(--r-md); padding:20px 22px;
}
.callout--info { border-left-color:var(--signal-500); background:var(--signal-50); border-color:var(--signal-100); }
.callout--legal { background:var(--warning-50); border-color:#f0e2c4; border-left-color:var(--warning-700); }
.callout h3 { font-size:15px; font-weight:500; margin:0 0 6px; }
.callout p { font-size:14px; color:var(--n-600); line-height:1.6; }

.badge {
  display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px;
  border-radius:var(--r-pill); background:var(--signal-50); color:var(--signal-700);
  font-size:12px; font-weight:500;
}
.badge--gold { background:#fdf8ec; color:var(--gold-700); }
.badge--success { background:var(--success-50); color:var(--success-700); }
.dot { width:6px; height:6px; border-radius:var(--r-pill); background:var(--success-500); flex:none; }

/* Chiffres clés */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi { background:#fff; border:1px solid var(--n-200); border-radius:var(--r-lg); padding:20px; }
.kpi__num { font-family:var(--font-mono); font-size:28px; font-weight:400; color:var(--navy-900); letter-spacing:-.02em; }
.kpi__label { font-size:13px; color:var(--n-600); margin-top:4px; line-height:1.5; }

/* Tableaux */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data { width:100%; border-collapse:collapse; font-size:14px; min-width:520px; background:#fff; }
table.data th,table.data td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--n-200); }
table.data th { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--n-600); font-weight:500; background:var(--n-50); }
table.data td.num { font-family:var(--font-mono); text-align:right; font-variant-numeric:tabular-nums; }
table.data tr:last-child td { border-bottom:0; }

/* ---------- FAQ ---------- */
.faq { display:grid; gap:1px; background:var(--n-200); border:1px solid var(--n-200); border-radius:var(--r-md); overflow:hidden; }
.faq__item { background:#fff; }
.faq__q {
  width:100%; display:flex; gap:16px; align-items:center; justify-content:space-between;
  padding:18px 22px; border:0; background:transparent; cursor:pointer; text-align:left;
  font-family:inherit; font-size:15.5px; font-weight:500; color:var(--navy-900);
}
.faq__q:hover { background:var(--n-50); }
.faq__sign { font-family:var(--font-mono); font-size:16px; color:var(--n-600); flex:none; }
.faq__a { padding:0 22px 20px; font-size:14px; color:var(--n-600); line-height:1.6; max-width:70ch; }
.faq__a p + p { margin-top:10px; }

/* ---------- Formulaires ---------- */
.field { display:block; }
.field__label { display:block; font-size:13px; font-weight:500; color:var(--navy-900); margin-bottom:6px; }
.input, .select, .textarea {
  width:100%; padding:0 14px; height:46px; border:1px solid var(--n-300); border-radius:var(--r-md);
  font-family:inherit; font-size:15px; color:var(--navy-900); background:#fff; outline:none;
}
.textarea { height:auto; padding:12px 14px; line-height:1.55; resize:vertical; }
.select { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c6676' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.input:focus,.select:focus,.textarea:focus { border-color:var(--signal-500); box-shadow:var(--focus); }
.input[aria-invalid="true"],.textarea[aria-invalid="true"] { border-color:var(--danger-500); box-shadow:0 0 0 3px rgba(194,56,47,.12); }
/* Champs obligatoires et messages d'erreur sous chaque champ */
.obligatoire { color:var(--danger-500); font-weight:600; margin-left:2px; }
.field__erreur { display:flex; gap:6px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--danger-700); margin:6px 0 0; }
.field__erreur::before { content:"!"; flex:none; display:grid; place-items:center; width:15px; height:15px; margin-top:1px; border-radius:50%; background:var(--danger-500); color:#fff; font-size:10px; font-weight:700; }
.consent input[aria-invalid="true"] { outline:2px solid var(--danger-500); outline-offset:2px; }
/* Page Le cabinet : fondateurs et bureaux */
.fondateur { position:relative; display:flex; gap:18px; align-items:center; padding:26px 24px 24px; }
.fondateur__avatar { flex:none; display:grid; place-items:center; width:60px; height:60px; border-radius:50%; background:var(--navy-800); color:var(--gold-300); font-size:19px; font-weight:500; letter-spacing:.03em; }
.fondateur__nom { font-size:19px; font-weight:500; color:var(--navy-900); letter-spacing:-.01em; }
.fondateur__role { font-size:13.5px; color:var(--n-600); margin:2px 0 10px; }
.fondateur__lien { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; color:var(--signal-600); text-decoration:none; }
.fondateur__lien:hover { text-decoration:underline; }
.bureau { display:flex; gap:14px; align-items:center; padding:20px 22px; }
.bureau__icone { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:var(--navy-50); color:var(--navy-800); }
.bureau__ville { font-size:17px; font-weight:500; color:var(--navy-900); }
.bureau__texte { font-size:13.5px; color:var(--n-600); margin-top:2px; }
.input-suffix { display:flex; align-items:center; gap:8px; height:46px; padding:0 14px; border:1px solid var(--n-300); border-radius:var(--r-md); background:#fff; }
.input-suffix:focus-within { border-color:var(--signal-500); box-shadow:var(--focus); }
.input-suffix input { flex:1; min-width:0; border:0; outline:none; background:transparent; font-family:var(--font-mono); font-size:16px; text-align:right; color:var(--navy-900); }
.input-suffix span { font-size:14px; font-weight:500; color:var(--n-600); }

.consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--n-600); line-height:1.5; }
.consent input { margin:2px 0 0; width:17px; height:17px; flex:none; accent-color:var(--signal-500); }
.consent a { color:var(--signal-600); }
.form-note { display:flex; align-items:center; gap:9px; padding-top:16px; border-top:1px solid var(--n-100); font-size:12px; color:var(--n-600); }
.form-status { font-size:13.5px; border-radius:var(--r-md); padding:12px 14px; }
.form-status.is-ok { background:var(--success-50); color:var(--success-700); }
.form-status.is-err { background:var(--danger-50); color:var(--danger-700); }

.form-card { background:#fff; border:1px solid var(--n-200); border-radius:var(--r-lg); padding:26px; position:relative; overflow:hidden; }
.form-card__bar { position:absolute; inset-inline:0; top:0; height:3px; background:var(--gradient-gold); }

/* Curseurs du simulateur */
input[type="range"] { width:100%; appearance:none; height:5px; border-radius:var(--r-pill); background:var(--n-200); outline:none; }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:20px; height:20px; border-radius:var(--r-pill); background:var(--signal-500); cursor:pointer; border:3px solid #fff; box-shadow:var(--shadow-sm); }
input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:var(--r-pill); background:var(--signal-500); cursor:pointer; border:3px solid #fff; }
input[type="range"]:focus-visible { box-shadow:var(--focus); }
.range-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.range-row output { font-family:var(--font-mono); font-size:20px; color:var(--navy-900); }
.section--dark .range-row output { color:#fff; }

/* ---------- Article ---------- */
.article-head { padding:48px 0 32px; }
.breadcrumb { font-size:12.5px; color:var(--n-600); margin-bottom:14px; }
/* Les liens du fil d'Ariane restent soulignés : la couleur seule ne suffit pas
   à les distinguer du texte environnant (WCAG 1.4.1). */
.breadcrumb a { color:var(--n-700); text-decoration:underline; }
.breadcrumb a:hover { color:var(--signal-600); }
.article-meta { font-family:var(--font-mono); font-size:11.5px; color:var(--n-600); text-transform:uppercase; letter-spacing:.04em; }
.article-body { max-width:68ch; }
.article-body h2 { font-size:26px; font-weight:400; margin:40px 0 12px; }
.article-body h3 { font-size:19px; font-weight:500; margin:28px 0 8px; }
.article-body p { font-size:16px; line-height:1.7; color:var(--n-700); margin:0 0 16px; }
.article-body ul,.article-body ol { margin:0 0 18px; padding-left:22px; }
.article-body li { font-size:16px; line-height:1.7; color:var(--n-700); margin-bottom:8px; }
.article-body strong { color:var(--navy-900); font-weight:500; }
.article-body .callout { margin:24px 0; }
.article-body .table-scroll { margin:22px 0; }
.toc { background:#fff; border:1px solid var(--n-200); border-radius:var(--r-lg); padding:20px 22px; }
.toc ol { list-style:none; display:grid; gap:8px; counter-reset:toc; }
.toc li { counter-increment:toc; font-size:14px; }
.toc li::before { content:counter(toc,decimal-leading-zero); font-family:var(--font-mono); font-size:11px; color:var(--gold-800); margin-right:8px; }
.toc a { color:var(--n-700); text-decoration:none; }
.toc a:hover { color:var(--signal-600); text-decoration:underline; }

.thumb { display:block; height:140px; background:var(--n-100); border-bottom:1px solid var(--n-200); position:relative; overflow:hidden; }
.thumb::after { content:""; position:absolute; inset:0; background:var(--gradient-navy); opacity:.9; }
.thumb--gold::after { background:linear-gradient(150deg,#253855,#121d35 60%,#0a1122); }
.thumb__mark { position:absolute; z-index:1; right:16px; bottom:14px; font-family:var(--font-mono); font-size:11px; color:var(--gold-300); letter-spacing:.08em; }
.post-card { padding:0; }
.post-card__body { display:block; padding:20px; }
.post-card__body .h5 { line-height:1.35; margin:6px 0; color:var(--navy-900); }


/* Visuels d'article */
.post-card__img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-bottom:1px solid var(--n-200); background:var(--n-100); }
.article-hero-img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); margin:4px 0 4px; background:var(--n-100); }
.article-figure { margin:26px 0; }
.article-figure img { width:100%; border-radius:var(--r-lg); }
.article-figure figcaption { font-size:12.5px; color:var(--n-600); margin-top:8px; }


/* ---------- Simulateurs ---------- */
.outil { text-decoration:none; color:inherit; }
.outil__titre { display:block; font-size:15px; margin-bottom:1px; }
.choice[aria-current="true"] { border-color:var(--signal-500); background:var(--signal-50); }
.choice[aria-current="true"] .choice__n { color:var(--signal-600); }
.outil:not([aria-current="true"]):hover { border-color:var(--navy-400); background:var(--n-50); }
/* Carte de résultat : même traitement navy que le simulateur d'origine. */
.resultat { background:var(--gradient-navy); border-color:transparent; color:#fff; box-shadow:var(--shadow-lg); padding:28px; }
/* Préfixe .resultat : ces règles doivent l'emporter sur « .card p ». */
.resultat .resultat__chiffre { font-size:56px; font-weight:500; letter-spacing:-.035em; line-height:1; margin:10px 0 8px; color:#fff; font-variant-numeric:tabular-nums; }
.resultat .resultat__chiffre[data-long] { font-size:44px; }
/* Résultat principal mis en avant : encadré clair et chiffre en grand, lisible d'un coup d'œil. */
.resultat__vedette { background:rgba(255,255,255,.07); border:1px solid rgba(231,199,122,.55); border-radius:12px; padding:18px 20px 16px; }
.resultat__vedette .eyebrow { margin:0; }
.resultat .resultat__sous { font-size:13.5px; line-height:1.5; color:var(--navy-200); margin:0; }
.resultat__lignes .resultat__total dt, .resultat__lignes .resultat__total dd { color:#fff; font-weight:500; font-size:15px; }
.resultat__lignes .resultat__detail { padding-left:14px; margin-top:-4px; }
.resultat__lignes .resultat__detail dd { font-size:14px; font-weight:400; color:var(--navy-100); }
.range-aide { font-size:12.5px; line-height:1.5; color:var(--n-600); margin:8px 0 0; }
.range-aide button { background:none; border:0; padding:0; font:inherit; color:var(--signal-600); text-decoration:underline; cursor:pointer; }
.resultat__filet { border:0; height:1px; background:rgba(255,255,255,.14); margin:22px 0; }
.resultat__lignes > div { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.resultat__lignes dt { color:var(--navy-300); }
.resultat__lignes dd { margin:0; font-size:15px; font-weight:500; text-align:right; color:#fff; }
.jauge { position:relative; height:8px; border-radius:var(--r-pill); background:rgba(255,255,255,.14); margin-top:16px; }
.jauge__remplissage { position:absolute; top:0; bottom:0; left:0; width:0; border-radius:var(--r-pill); background:var(--signal-400); transition:width .25s var(--ease), background-color .25s var(--ease); }
.jauge__seuil { position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:var(--gold-300); }

/* ---------- Pied de page ---------- */
.site-footer { background:var(--navy-950); color:var(--navy-300); padding:56px 0 32px; }
.site-footer h2 { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:#fff; margin:0 0 12px; }
.footer-grid { display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:28px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-brand { display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img { height:44px; width:44px; border-radius:10px; }
.footer-brand span { font-size:18px; color:#fff; }
.footer-links { display:grid; gap:8px; font-size:13px; }
.footer-links a { color:var(--navy-300); text-decoration:none; }
.footer-links a:hover { color:#fff; text-decoration:underline; }
.footer-bottom { display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; }
.footer-bottom a { font-size:12px; color:var(--navy-300); text-decoration:none; }
.footer-bottom a:hover { color:#fff; text-decoration:underline; }
/* La mention réglementaire occupe toute la largeur du pied de page : elle est
   dense et gagne à tenir sur peu de lignes plutôt qu'en colonne étroite. */
.site-footer .legal { font-size:11.5px; line-height:1.6; color:var(--navy-300); margin:16px 0 0; max-width:none; }
.site-footer .legal a { color:#fff; text-decoration:underline; }
.site-footer p { font-size:13px; line-height:1.6; }

.social { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.social a {
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:8px; background:rgba(255,255,255,.06); color:var(--navy-300); text-decoration:none;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.social a:hover { background:rgba(255,255,255,.14); color:#fff; }

/* ---------- Bandeau cookies ---------- */
.cc-banner {
  position:fixed; inset-inline:0; bottom:0; z-index:90;
  background:#fff; border-top:1px solid var(--n-200); box-shadow:var(--shadow-xl);
}
.cc-banner__inner {
  max-width:var(--wrap); margin:0 auto; padding:20px 24px;
  display:flex; gap:24px; align-items:center; flex-wrap:wrap;
}
.cc-banner__text { flex:1; min-width:280px; }
.cc-banner__text h2 { font-size:16px; font-weight:500; margin:0 0 6px; }
.cc-banner__text p { font-size:13.5px; color:var(--n-600); line-height:1.55; max-width:82ch; }
.cc-actions { display:flex; gap:10px; flex-wrap:wrap; }
.cc-panel { border-top:1px solid var(--n-200); background:var(--n-50); }
.cc-panel__inner { max-width:var(--wrap); margin:0 auto; padding:22px 24px; display:grid; gap:14px; }
.cc-choice { display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--n-200); border-radius:var(--r-md); padding:16px 18px; }
.cc-choice__body { flex:1; }
.cc-choice h3 { font-size:14.5px; font-weight:500; margin:0 0 4px; }
.cc-choice p { font-size:13px; color:var(--n-600); line-height:1.5; }
.cc-switch { position:relative; flex:none; width:44px; height:25px; }
.cc-switch input { position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cc-switch span { position:absolute; inset:0; background:var(--n-300); border-radius:var(--r-pill); transition:background-color .18s var(--ease); pointer-events:none; }
.cc-switch span::after { content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; background:#fff; border-radius:var(--r-pill); transition:transform .18s var(--ease); }
.cc-switch input:checked + span { background:var(--signal-500); }
.cc-switch input:checked + span::after { transform:translateX(19px); }
.cc-switch input:disabled + span { background:var(--success-500); opacity:.6; }
.cc-switch input:focus-visible + span { box-shadow:var(--focus); }
.cc-reopen {
  background:none; border:0; padding:0; font:inherit; font-size:12px;
  color:var(--navy-300); cursor:pointer; text-decoration:underline;
}
.cc-reopen:hover { color:#fff; }

/* Emplacement d'un widget tiers bloqué faute de consentement */
.consent-gate {
  display:grid; place-items:center; gap:14px; text-align:center;
  background:#fff; border:1px dashed var(--n-300); border-radius:var(--r-lg); padding:48px 24px;
}
.consent-gate p { font-size:14px; color:var(--n-600); max-width:46ch; }

/* ---------- Responsive ---------- */
@media (max-width:1000px) {
  .split,.split--even,.split--copy,.split--aside,.split--sim,.split--article { grid-template-columns:1fr; gap:36px; }
  /* Sur écran étroit, le sommaire passe avant le texte et cesse d'être fixe. */
  .article-aside { position:static; order:-1; }
  .grid-3,.grid-4,.tile-grid { grid-template-columns:repeat(2,1fr); }
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .h1 { font-size:42px; }
  .h2 { font-size:30px; }
}
@media (max-width:860px) {
  .site-nav { display:none; }
  .burger { display:flex; }
  .header-actions .btn { display:none; }
  .site-header__inner { justify-content:space-between; min-height:66px; }
  .mobile-panel.is-open { display:block; }
}
@media (max-width:680px) {
  .section { padding:52px 0; }
  .hero { padding:44px 0 56px; }
  /* Sur téléphone, le formulaire express de la page d'accueil est masqué :
     les boutons d'appel à l'action mènent au formulaire complet. */
  .hero .form-card { display:none; }
  .grid-2,.grid-3,.grid-4,.tile-grid,.tile-grid--2,.kpi-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .h1 { font-size:34px; }
  .h2 { font-size:26px; }
  .h3 { font-size:21px; }
  .hero__facts { gap:24px; }
  .wrap { padding-inline:18px; }
  .card,.tile,.form-card { padding:20px; }
  .article-body p,.article-body li { font-size:15.5px; }
  .cc-banner__inner { padding:18px; gap:16px; }
  .cc-actions .btn { flex:1; }
  .resultat .resultat__chiffre { font-size:46px; }
  .resultat .resultat__chiffre[data-long] { font-size:36px; }
  .resultat__vedette { padding:16px 16px 14px; }
}