/* ==================================================================
   ============================================================
   STYLE27.CSS — feuille de style unique du site
   ============================================================

   Chargée sur TOUTES les pages, anciennes et nouvelles, avec :
     /css/style27.css  (ce fichier)
   Les pages anciennes gardent en plus /css/style26.css pour le
   corps de page (tableaux, cadres...) tant qu'elles ne sont pas
   migrées. Les pages migrées n'ont besoin que de ce fichier.

   SOMMAIRE :
     1. BANNIÈRE + MENU     — identité du site, sur toutes les pages
     2. GABARIT ARTICLE      — .fi-article, pages migrées au nouveau
                                format one-column (ex: page PIB)
   ============================================================
   ================================================================== */


/* ==================================================================
   0. TYPOGRAPHIE DE BASE (récupérée depuis style26.css, oubliée à
      tort lors de l'extraction initiale — même cause que le footer)
   ================================================================== */

html { font-family: Arial, Helvetica, sans-serif; }

@media (min-width: 1440px)                       { html { font-size: calc(1rem + 0.06vw); } }
@media (min-width: 1024px) and (max-width: 1439px) { html { font-size: calc(1rem + 0.1vw); } }
@media (min-width: 640px)  and (max-width: 1023px) { html { font-size: calc(1rem + 0.15vw); } }
@media (max-width: 639px)                          { html { font-size: calc(1.2rem + 0.2vw); } }


/* ##################################################################
   1. BANNIÈRE + MENU (précédemment banniere-menu.css)
   ################################################################## */

/* ==============================================================
   BANNIERE + MENU — France-Inflation.com
   Fichier autonome, indépendant de style26.css / style27.css.
   Chargé une seule fois via menu_haut_utf.php, quelle que soit
   la feuille de style utilisée par le corps de la page.
   ============================================================== */

/* ---- Bannière (logo, titre, date, compte) ---- */

.oeil  { float: left; }
.oeil2 { width: calc(5vw + 60px); }

.title {
  float: left;
  width: calc(80vw - 100px);
  font-family: Tahoma, Arial, sans-serif;
  color: #000096;
  font-weight: bold;
  font-style: italic;
  text-shadow: 5px 5px 5px #5A6F8D;
  font-size: calc(0.8em + 3vw);
}

/* Bandeau message ponctuel (voeux, annonce...) — actuellement désactivé dans le HTML,
   conservé pour réactivation rapide. */
.message {
  float: left;
  font-family: Tahoma, Arial, sans-serif;
  color: #6d9fce;
  font-weight: bold;
  font-style: italic;
  font-size: calc(0.6em + 2vw);
  padding: 1.2vw 0 0 4vw;
}

.datej {
  float: right;
  width: calc(15vw + 20px);
  font-style: italic;
  font-size: 10px;
  text-align: right;
  padding: 10px;
  color: #000096;
}

div.banniere::after { content: ""; clear: both; display: block; }

/* Bloc "compte / abonnement" affiché en haut à droite */
.user {
  z-index: 500;
  position: absolute;
  top: 60px;
  right: 5px;
  padding: 10px;
  width: auto;
  white-space: nowrap;
  text-align: right;
  text-decoration: none;
  color: #000096;
  background-color: #cbd4eb;
}

/* Correctif mobile : sur un écran étroit, le titre passe facilement sur 2 lignes,
   ce qui fait chevaucher le bloc "Option sans Publicité" en position absolute
   (calée à top:60px, sans lien avec la hauteur réelle du titre). On repasse ce
   bloc en flux normal (plus d'absolute) et on contient la taille du titre. */
@media (max-width: 640px) {
  .oeil2 { width: 44px; }
  .title {
    width: calc(100% - 60px);
    font-size: calc(1em + 2.2vw);
    line-height: 1.05;
  }
  .user {
    position: static;
    display: block;
    width: auto;
    margin: 4px 5px 4px auto;
    text-align: right;
  }
}
.user:hover { color: #ff0000; }
.user.on    { color: #FFFFFF; background-color: #000096; }

.abo       { text-decoration: none; color: #000096; }
.abo:hover { color: #ff0000; }

/* ---- Barre d'onglets sticky (Accueil / Inflation / Emploi / ...) ---- */

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  top: 0;
  padding: 0;
  border: 0;
  z-index: 500;
  background-color: #FFFFFF;
}

div.ligne { margin: 0; height: 15px; width: 100%; background-color: #000096; }

/* Barre d'onglets : #onglets est un <ul> depuis la rationalisation sémantique
   (auparavant un <div> conteneur de <div class="off/on">) */
#onglets { list-style: none; margin: 0; padding: 0; }

.on, .off {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.off      { color: #000096; background-color: #cbd4eb; }
.off:hover{ color: #ff0000; }
.on       { color: #ffffff; background-color: #000096; }

@media only screen and (max-width: 640px) {
  .on, .off { margin: 0.5vw; padding: 0.5vw; width: 30%; min-width: 120px; }
  div.blocs a { line-height: 150%; }
}
@media only screen and (min-width: 641px) {
  .on, .off { padding: 5px 15px; width: 6vw; min-width: 100px; }
}

/* ---- Widget de vote "nouveau look" — coin haut-droit du menu sticky (desktop),
   pastille flottante bas-droite (mobile, la barre d'onglets étant déjà pleine largeur) ---- */
.vote-look { display: flex; align-items: center; gap: 6px; }

.vote-look-label {
  font-family: inherit; font-size: 12px; font-weight: 600;
  color: #000096; white-space: nowrap;
}

.vote-look-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: #000096; background-color: #cbd4eb;
  border: none; border-radius: 4px; padding: 5px 10px;
  cursor: pointer; user-select: none;
}
.vote-look-btn:hover:not(:disabled) { color: #ff0000; }
.vote-look-btn[aria-pressed="true"] { background-color: #000096; color: #ffffff; }
.vote-look-btn:disabled { opacity: 0.6; cursor: default; }
.vote-look-btn svg { display: block; }
.vote-look-count { font-weight: 700; }

@media only screen and (min-width: 641px) {
  .vote-look { position: absolute; top: 0; right: 0; }
}

@media only screen and (max-width: 640px) {
  .vote-look {
    position: static;
    width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid #cbd4eb;
  }
}

/* ---- Panneaux déroulants du méga-menu (blocs de liens par rubrique) ---- */

div.show, div.hide {
  display: inline-block;
  width: 100%;
  top: 0;
  padding: 0;
  border: 0;
  z-index: 500;
  background-color: #000096;
  text-align: left;
}
div.hide { display: none; opacity: 0; }
div.show { display: inline-block; opacity: 1; }

div.blocs {
  display: inline-block;
  min-width: 100px;
  user-select: none;
  text-align: left;
  vertical-align: top;
  padding: 0 1vw 10px 20px;
}
div.blocs ul { list-style: none; margin: 0; padding: 0; }
div.blocs a {
  font-size: 95%;
  color: #ffffff;
  text-align: left;
  text-decoration: none;
  transition: 0.3s;
  width: 100%;
}
div.blocs a:hover { background-color: #f7f5bf; color: #000096; width: 100%; }

span.st { color: #f3f707; text-decoration: underline; }

/* ---- Nouveaux éléments de la restructuration à 6 onglets ---- */

/* Lien direct (Biorythme) : même look que les onglets classiques */
/* Lien direct retiré : Biorythme est redevenu un onglet dropdown "Détente" classique */

/* Item "à la une" (contenu mis en avant éditorialement, ex: PIB Production) —
   intégré dans sa liste thématique normale, pas isolé dans un bloc à part. */
li.promo a {
  color: #fff38e;
  font-weight: bold;
}
li.promo a:hover { background-color: #f7f5bf; color: #000096; }

/* Hauteur minimale commune à tous les panneaux : évite que la page "saute"
   verticalement quand on passe d'un onglet court (ex: Calculateurs) à un
   onglet plus riche (ex: Économie). Valeur à ajuster après test visuel réel. */
#menu_onglets > div.show { min-height: 200px; }

/* Pattern "Voir plus" (details/summary) abandonné au profit des colonnes
   thématiques toujours visibles, plus adapté à un écran large. */

/* ---- Footer (styles récupérés depuis style26.css, oubliés à tort lors de l'extraction initiale) ---- */
.footer { background-color: #000096; color: #ffffff; text-align: center; font-size: 14px; padding: 10px 0 10px 0; }
.pied a { text-decoration: none; color: #ffffff; padding: 0; }
.pied a:hover { color: #CC0000; }

/* ==============================================================
   NON REPRIS ICI — code mort identifié dans style26.css, ne
   correspondant à aucune classe présente dans le HTML actuel de
   menu_haut_utf.php : ul.topnav, ul.topnav2, ul.fullnav,
   ul.leftnav, .overlay*, div.menu_tab. Laissés dans style26.css
   pour ne rien casser sur d'éventuelles pages non auditées ;
   à confirmer puis supprimer dans un second temps.
   ============================================================== */


/* ##################################################################
   2. GABARIT ARTICLE — .fi-article (précédemment style27.css)
   ################################################################## */

/* ==============================================================
   STYLE27 — Gabarit "article one-column" pour France-Inflation.com
   ==============================================================
   Origine : extrait et généralisé depuis le <style> inline de
   pib-approche-production.php (.pib-page -> .fi-article).

   Portée volontairement scopée sous .fi-article : les variables
   sont déclarées sur .fi-article et non sur :root, pour ne jamais
   entrer en collision avec les variables :root de style26.css
   (notamment --line, qui existait des deux côtés — bug corrigé ici).

   Usage : <link rel="stylesheet" href="/css/banniere-menu.css">
           <link rel="stylesheet" href="/css/style27.css">
           <link rel="stylesheet" href="fonts Fraunces / IBM Plex...">
           puis <div class="fi-article"> ... </div>

   Ne PAS charger style26.css sur les nouvelles pages migrées :
   elles n'en ont plus besoin (tables/cadres legacy remplacés par
   les composants ci-dessous).
   ============================================================== */

.fi-article {
  /* -------- palette & tokens, scopés ici volontairement -------- */
  --fi-paper:        #FFFFFF;
  --fi-paper-raised: #EEF2FA;
  --fi-ink:          #101B4A;
  --fi-ink-soft:     #40507A;
  --fi-ink-faint:    #8891A8;
  --fi-line:         #C7D2E8;
  --fi-line-soft:    #E1E7F5;
  --fi-official:     #000096;
  --fi-official-bg:  #E4E4F7;
  --fi-estimate:     #9C6A2A;
  --fi-estimate-bg:  #F3E8D6;
  --fi-positive:     #2F7D4F;
  --fi-negative:     #CC0000;
  --fi-fiscal-bar:     #C98A3B;
  --fi-fiscal-bar-neg: #6E8F72;
  --fi-text-width:     760px; /* largeur de confort de lecture des paragraphes/listes ; les titres restent en pleine largeur du conteneur */

  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: #DFE3EC;
  color: var(--fi-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.fi-article *{ box-sizing: border-box; }
.fi-article section, .fi-article [id] { scroll-margin-top: 74px; }
.fi-article .wrap{ display:block; width:100%; max-width:1160px; margin:0 auto; padding:0 28px; background: var(--fi-paper); }

/* -------- en-tête d'article -------- */
.fi-article .masthead{ border-bottom:1px solid var(--fi-ink); padding:40px 0 28px; }
.fi-article .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fi-ink-soft); display:flex; gap:10px; align-items:center; margin-bottom:18px; }
.fi-article .eyebrow .dot{ width:5px; height:5px; background:var(--fi-official); border-radius:50%; display:inline-block; }
.fi-article h1{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(32px,5vw,50px); line-height:1.05; letter-spacing:-.01em; margin:0 0 16px; color:var(--fi-ink); }
.fi-article h1 em{ font-style:italic; font-weight:400; color:var(--fi-official); }
.fi-article .deck{ font-size:1.0625rem; color:var(--fi-ink-soft); max-width:660px; margin:0; }
.fi-article .deck strong{ color:var(--fi-ink); font-weight:500; }
.fi-article .deck-wide{ font-size:1.0625rem; color:var(--fi-ink-soft); max-width:800px; margin:0; }

/* -------- barre de sommaire à ancres -------- */
.fi-article .tocbar{ display:flex; gap:2px; background:var(--fi-official); padding:2px; border-radius:3px; margin:8px 0 4px; overflow-x:auto; }
.fi-article .tocbar a{ flex:1; display:flex; align-items:center; gap:10px; font-family:'IBM Plex Sans',sans-serif; font-size:14px; font-weight:500; color:#fff; text-decoration:none; padding:14px 20px; white-space:nowrap; background:transparent; transition:background .15s; }
.fi-article .tocbar a:hover{ background:rgba(255,255,255,.15); }
.fi-article .tocbar a span{ font-family:'Fraunces',serif; font-weight:600; font-size:22px; line-height:1; color:#fff; opacity:.55; }

/* -------- chaîne de formule (ex: P1 -> VAB -> PIB) -------- */
.fi-article .formula-chain{ display:flex; align-items:stretch; gap:0; margin:24px 0 28px; flex-wrap:wrap; }
.fi-article .formula-box{ display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; background:var(--fi-paper-raised); border:1px solid var(--fi-ink); padding:16px 22px; min-width:130px; text-align:center; }
.fi-article .formula-box-final{ background:var(--fi-official); border-color:var(--fi-official); }
.fi-article .formula-box-final .fb-label, .fi-article .formula-box-final .fb-code{ color:#fff; }
.fi-article .fb-label{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--fi-ink); }
.fi-article .fb-code{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fi-ink-faint); }
.fi-article .formula-arrow{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0 14px; min-width:110px; }
.fi-article .formula-arrow span{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--fi-ink-soft); text-align:center; line-height:1.35; }
.fi-article .formula-arrow i{ font-style:normal; font-size:18px; color:var(--fi-official); margin-top:2px; }

/* -------- sections -------- */
.fi-article section{ padding:52px 0; border-bottom:1px solid var(--fi-line-soft); }
.fi-article section:last-of-type{ border-bottom:none; }
.fi-article .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:6px; flex-wrap:wrap; }
.fi-article h2{ font-family:'Fraunces',serif; font-weight:500; font-size:1.625rem; margin:0; letter-spacing:-.01em; color:var(--fi-ink); }
.fi-article h3{ font-family:'Fraunces',serif; font-weight:600; font-size:1.1875rem; margin:0 0 12px; color:var(--fi-ink); }
.fi-article .section-intro{ color:var(--fi-ink-soft); max-width:700px; margin:14px 0 28px; font-size:0.9375rem; }

/* -------- toggle de vue (branches / groupes) -------- */
.fi-article .toggle{ display:inline-flex; border:1px solid var(--fi-ink); border-radius:2px; overflow:hidden; margin-bottom:20px; }
.fi-article .toggle button{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.03em; background:transparent; border:none; color:var(--fi-ink-soft); padding:8px 16px; cursor:pointer; transition:background .15s,color .15s; border-right:1px solid var(--fi-ink); }
.fi-article .toggle button:last-child{ border-right:none; }
.fi-article .toggle button.active{ background:var(--fi-ink); color:var(--fi-paper); }
.fi-article .toggle button:hover:not(.active){ background:var(--fi-line-soft); }

/* -------- .tablewrap : wrapper structurel de tout tableau --------
   Rôle unique : permettre le scroll horizontal si le tableau déborde
   sur petit écran. Ne porte plus aucun style visuel de colonnes —
   celui-ci vient de la classe posée sur le <table> lui-même :
     <table class="prix-table">  → colonnes homogènes (cas courant)
     <table class="sortable">    → thème "tableau triable" ci-dessous
   ============================================================== */
.fi-article .tablewrap{ overflow-x:auto; border:1px solid var(--fi-ink); }
.fi-article table{ width:100%; border-collapse:collapse; margin:0; }

/* -------- thème "tableau triable", opt-in via <table class="sortable"> --------
   Réservé aux tableaux avec tri au clic réel (JS). Un tableau sans
   cette classe (le cas courant : .prix-table) n'en hérite plus. */
.fi-article table.sortable{ min-width:760px; }
/* Le thead sticky se cale par rapport à .tablewrap (son propre conteneur de
   scroll, à cause de overflow-x:auto) et non par rapport à la page — d'où
   cette boîte bornée avec défilement vertical interne, plutôt qu'un calage
   sur --sticky-offset qui ne fonctionnerait pas ici (piège classique
   position:sticky + overflow sur un ancêtre). */
.fi-article .tablewrap:has(table.sortable){ max-height:70vh; overflow-y:auto; }
.fi-article table.sortable thead th{ font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; font-weight:600; color:var(--fi-ink); text-align:right; padding:10px 12px; border-bottom:1px solid var(--fi-ink); background:var(--fi-paper-raised); cursor:pointer; user-select:none; white-space:nowrap; position:sticky; top:0; z-index:5; }
/* Ligne active au tap (mobile, pas de :hover) — activée en JS via une classe row-selected */
.fi-article table.sortable tbody tr.row-selected td{ background:var(--fi-official-bg); }
.fi-article table.sortable thead th .subhead{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:400; text-transform:uppercase; letter-spacing:.04em; color:var(--fi-ink-faint); margin-top:3px; }
.fi-article table.sortable thead th.grouphead{ text-align:center; border-bottom:1px solid var(--fi-line-soft); cursor:default; }
.fi-article table.sortable thead th.grouphead.official{ color:var(--fi-official); }
.fi-article table.sortable thead th.grouphead.estimate{ color:var(--fi-estimate); }
.fi-article table.sortable thead th:first-child, .fi-article table.sortable thead th:nth-child(2){ text-align:left; }
.fi-article table.sortable thead th:hover{ color:var(--fi-official); }
.fi-article table.sortable thead th .arrow{ opacity:0; font-size:9px; margin-left:3px; }
.fi-article table.sortable thead th.sorted .arrow{ opacity:1; }
.fi-article table.sortable th.source-head{ font-size:10px; text-align:center !important; }
.fi-article table.sortable tbody td{ padding:9px 12px; text-align:right; font-family:'IBM Plex Mono',monospace; font-size:13px; font-variant-numeric:tabular-nums; border-bottom:1px solid var(--fi-line-soft); white-space:nowrap; }
.fi-article table.sortable tbody td:first-child{ font-family:'IBM Plex Sans',sans-serif; font-size:11px; font-weight:600; color:var(--fi-ink-faint); text-align:left; letter-spacing:.03em; }
.fi-article table.sortable tbody td:nth-child(2){ font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; font-weight:400; color:var(--fi-ink); text-align:left; white-space:normal; min-width:200px; }
.fi-article table.sortable tbody tr:hover td{ background:var(--fi-paper-raised); }
.fi-article table.sortable tbody tr.total td{ border-top:2px solid var(--fi-ink); border-bottom:none; font-weight:600; color:var(--fi-ink); background:var(--fi-paper-raised); }
.fi-article table.sortable tbody tr.view-hidden{ display:none; }
.fi-article .pos{ color:var(--fi-positive); }
.fi-article .neg{ color:var(--fi-negative); }
.fi-article .na{ color:var(--fi-ink-faint); }
.fi-article .verify{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; color:var(--fi-official); text-decoration:none; border-radius:2px; transition:background .15s; }
.fi-article .verify:hover{ background:var(--fi-official-bg); }
.fi-article .verify svg{ width:15px; height:15px; }

/* -------- jauge fiscale (barre horizontale dans une cellule) -------- */
.fi-article .fiscalcell{ width:150px; }
.fi-article .fiscalbar-track{ position:relative; height:14px; background:var(--fi-line-soft); border-radius:1px; }
.fi-article .fiscalbar-zero{ position:absolute; top:-3px; bottom:-3px; width:1px; background:var(--fi-ink-faint); }
.fi-article .fiscalbar-fill{ position:absolute; top:0; bottom:0; background:var(--fi-fiscal-bar); border-radius:1px; }
.fi-article .fiscalbar-fill.neg{ background:var(--fi-fiscal-bar-neg); }
.fi-article .fiscalbar-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--fi-ink-soft); display:block; margin-top:3px; text-align:right; }

/* -------- encarts (callout) -------- */
.fi-article .callout{ background:var(--fi-paper-raised); border-left:3px solid var(--fi-estimate); padding:18px 22px; margin:26px 0; font-size:14.5px; color:var(--fi-ink-soft); }
.fi-article .callout strong{ color:var(--fi-ink); font-weight:600; }
.fi-article .callout.official{ border-left-color:var(--fi-official); }
.fi-article .callout p{ margin:0 0 10px; }
.fi-article .callout p:last-child{ margin-bottom:0; }

/* -------- grille de contrôles chiffrés -------- */
.fi-article .controls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px; background:var(--fi-line); border:1px solid var(--fi-line); margin-top:24px; }
.fi-article .control{ background:var(--fi-paper-raised); padding:16px 18px; }
.fi-article .control .k{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fi-ink-faint); display:block; margin-bottom:6px; }
.fi-article .control .v{ font-family:'IBM Plex Mono',monospace; font-size:20px; color:var(--fi-ink); }

/* -------- légende -------- */
.fi-article .legend{ display:flex; gap:22px; flex-wrap:wrap; margin:18px 0 4px; font-size:12.5px; color:var(--fi-ink-soft); }
.fi-article .legend span{ display:inline-flex; align-items:center; gap:7px; }
.fi-article .legend .sw{ width:12px; height:12px; border-radius:1px; }

/* -------- glossaire -------- */
.fi-article .glossaire{ margin-top:30px; border-top:1px solid var(--fi-line); padding-top:22px; }
.fi-article .glossaire h3{ font-family:'Fraunces',serif; font-weight:500; font-size:16px; margin:0 0 14px; color:var(--fi-ink-soft); }
.fi-article .glossaire dl{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px 28px; margin:0; }
.fi-article .glossaire dt{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:500; color:var(--fi-ink); margin-bottom:4px; }
.fi-article .glossaire dd{ margin:0; font-size:13px; color:var(--fi-ink-soft); line-height:1.5; }

/* -------- colonnes de texte -------- */
.fi-article .prose{ max-width:760px; margin:0 auto; }
.fi-article .prose img:not([width]), .fi-article .prose-wide img:not([width]){ width:100%; height:auto; display:block; }
.fi-article .prose-wide{ max-width:920px; margin:0 auto; }
.fi-article article{ padding:8px 0 12px; }
.fi-article article p{ font-size:1.0625rem; line-height:1.65; margin:0 0 22px; color:var(--fi-ink); }
.fi-article article p.lead{ font-size:1.1875rem; color:var(--fi-ink-soft); }
.fi-article article p strong{ color:var(--fi-ink); font-weight:600; }
.fi-article h2.h-section{ font-family:'Fraunces',serif; font-weight:600; font-size:1.75rem; letter-spacing:-.01em; margin:48px 0 8px; line-height:1.15; color:var(--fi-ink); }
.fi-article p.subhead-editorial{ color:var(--fi-ink-soft); font-size:0.96875rem; margin:0 0 24px; max-width:600px; }

/* -------- chiffre-choc mis en avant -------- */
.fi-article .pullnum{ display:flex; align-items:baseline; gap:18px; margin:36px 0; padding:24px 0; border-top:1px solid var(--fi-line); border-bottom:1px solid var(--fi-line); }
.fi-article .pullnum .num{ font-family:'Fraunces',serif; font-weight:600; font-size:52px; color:var(--fi-official); line-height:1; white-space:nowrap; }
.fi-article .pullnum .txt{ font-size:15px; color:var(--fi-ink-soft); }
.fi-article .pullnum .txt strong{ color:var(--fi-ink); }

/* -------- mini-graphiques barres horizontales -------- */
.fi-article .chart{ margin:26px 0 8px; }
.fi-article .barrow{ display:grid; grid-template-columns:170px 1fr 68px; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--fi-line-soft); }
.fi-article .barrow .label{ font-size:13.5px; color:var(--fi-ink); font-weight:500; }
.fi-article .barrow .track{ position:relative; height:22px; background:var(--fi-line-soft); border-radius:2px; overflow:hidden; }
.fi-article .barrow .fill{ position:absolute; top:0; left:0; bottom:0; border-radius:2px; }
.fi-article .barrow .val{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--fi-ink-soft); text-align:right; white-space:nowrap; }

.fi-article .divrow{ display:grid; grid-template-columns:170px 1fr 58px; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--fi-line-soft); }
.fi-article .divrow .label{ font-size:13.5px; color:var(--fi-ink); font-weight:500; }
.fi-article .divrow .track{ position:relative; height:20px; background:var(--fi-line-soft); border-radius:2px; }
.fi-article .divrow .zero{ position:absolute; top:-3px; bottom:-3px; left:50%; width:1px; background:var(--fi-ink-faint); }
.fi-article .divrow .fill{ position:absolute; top:0; bottom:0; border-radius:2px; }
.fi-article .divrow .fill.pos{ background:var(--fi-positive); }
.fi-article .divrow .fill.neg{ background:var(--fi-negative); }
.fi-article .divrow .val{ font-family:'IBM Plex Mono',monospace; font-size:13px; text-align:right; white-space:nowrap; }
.fi-article .divrow .val.pos{ color:var(--fi-positive); }
.fi-article .divrow .val.neg{ color:var(--fi-negative); }
.fi-article .chart-caption{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--fi-ink-faint); margin-top:10px; }

/* -------- encart "paradoxe" / mise en avant contrastée -------- */
.fi-article .paradox{ background:var(--fi-paper-raised); border:1px solid var(--fi-line); border-radius:2px; padding:26px 28px; margin:36px 0; }
.fi-article .paradox h3{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; margin:0 0 16px; color:var(--fi-ink); }
.fi-article .paradox-compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:18px 0; }
.fi-article .paradox-cell{ text-align:center; padding:14px; background:var(--fi-paper); border:1px solid var(--fi-line-soft); }
.fi-article .paradox-cell .k{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fi-ink-faint); display:block; margin-bottom:8px; }
.fi-article .paradox-cell .n{ font-family:'Fraunces',serif; font-weight:600; font-size:34px; line-height:1; }
.fi-article .paradox-cell .n.pos{ color:var(--fi-positive); }
.fi-article .paradox-cell .n.neg{ color:var(--fi-negative); }
.fi-article .paradox p{ font-size:14.5px; color:var(--fi-ink-soft); margin:0 0 12px; }
.fi-article .fiscalgauge-track{ position:relative; height:26px; background:var(--fi-paper); border:1px solid var(--fi-line); border-radius:2px; overflow:hidden; margin:16px 0; }
.fi-article .fiscalgauge-fill{ position:absolute; top:0; bottom:0; left:0; background:var(--fi-fiscal-bar); }
.fi-article .fiscalgauge-label{ position:absolute; top:0; bottom:0; right:10px; display:flex; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:500; color:var(--fi-ink); }

/* -------- bandeau de transition / call-to-action interne -------- */
.fi-article .bridge{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--fi-ink); color:var(--fi-paper); padding:24px 28px; margin:52px 0 0; border-radius:2px; }
.fi-article .bridge .t{ font-family:'Fraunces',serif; font-size:17px; font-weight:500; }
.fi-article .bridge .s{ font-family:'IBM Plex Sans',sans-serif; font-size:13px; color:#B8BEC7; margin-top:4px; }
.fi-article .bridge a{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em; background:var(--fi-paper); color:var(--fi-ink); text-decoration:none; padding:10px 18px; border-radius:2px; white-space:nowrap; }

/* -------- pied d'article (méta sources / date) -------- */
.fi-article footer{ padding:40px 0 60px; }
.fi-article footer .meta{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--fi-ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--fi-line); padding-top:20px; }

/* ==============================================================
   COMPOSANT HUB — page de catégorie (Inflation, Immobilier, ...)
   Cartes de teasers vers les pages filles, même langage visuel
   que .fi-article pour une identité cohérente.
   ============================================================== */

.fi-hub-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; margin:28px 0; }
.fi-hub-card{ display:flex; flex-direction:column; gap:8px; background:var(--fi-paper); border:1px solid var(--fi-line); border-radius:2px; padding:20px 22px; text-decoration:none; transition:border-color .15s, background .15s; }
.fi-hub-card:hover{ border-color:var(--fi-official); background:var(--fi-paper-raised); }
.fi-hub-card .fi-hub-title{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:var(--fi-ink); }
.fi-hub-card .fi-hub-teaser{ font-size:13.5px; color:var(--fi-ink-soft); line-height:1.5; }
.fi-hub-card .fi-hub-meta{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fi-ink-faint); margin-top:auto; padding-top:8px; }

/* ==============================================================
   COMMENTAIRES (récupéré depuis style26.css, oublié à tort lors
   de l'extraction initiale — même cause que le footer/police).
   Utilisé par comments/comments.php, inclus tel quel sur les
   pages migrées, en dehors du scope .fi-article.
   ============================================================== */

.bt_com { width: 200px; text-align: center; border: none; outline: none; background-color: navy; color: white; cursor: pointer; margin: 10px; padding: 5px; border-radius: 10px; font-size: 18px; }
.out { display: block; background: #bbb; border: 1px solid #ddd; position: relative; margin: 2em; width: 90%; margin: auto; }
.in { background: #f0feff; border: 6px solid #6495ed; position: relative; padding: 5px; font-weight: normal; left: -5px; top: -5px; }

/* ==============================================================
   TABLEAU DE DONNÉES SIMPLE (.prix-table) — récupéré tel quel
   depuis la page voitures, réutilisable sur toute page migrée
   ayant besoin d'un tableau basique sans tri/bascule.
   ============================================================== */
.fi-article .prix-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fi-article .prix-table th, .fi-article .prix-table td {
  border: none;
  border-bottom: 1px solid var(--fi-line);
  padding: 8px 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fi-article .prix-table th:first-child, .fi-article .prix-table td:first-child { text-align: left; white-space: nowrap; }
.fi-article .prix-table thead th { background: var(--fi-paper-raised); font-weight: 600; border-bottom: 2px solid var(--fi-ink); }
.fi-article .prix-table tbody td:first-child { background: var(--fi-paper-raised); font-weight: 500; }
.fi-article .prix-table tbody tr:hover td { background: var(--fi-line-soft); }
.fi-article .prix-table tbody tr.row-selected td { background: var(--fi-official-bg); }
.fi-article .prix-table tbody tr.total td { border-top: 2px solid var(--fi-ink); border-bottom: none; font-weight: 600; background: var(--fi-paper-raised); }
.fi-article .prix-table caption { caption-side: top; text-align: left; font-weight: 600; margin-bottom: 8px; }
@media (max-width: 768px) { .fi-article .prix-table { font-size: 13px; } }

/* ---- .table-yearly : tableau minimaliste "1 ligne = 1 valeur, colonnes = années"
   (ex: Année / Prix baguette €). Sans largeur mini, il se tasse à 100% de l'écran
   au lieu de déclencher le scroll horizontal de .tablewrap. ---- */
.fi-article .table-yearly { min-width: 640px; }
.fi-article .table-yearly td { padding: 6px 10px; white-space: nowrap; text-align: center; }
.fi-article .table-yearly td:first-child { text-align: left; font-weight: 600; }
/* Utilitaire : à poser sur un tableau qui doit suivre la largeur du texte
   (760px) plutôt que la pleine largeur du conteneur. Remplace tout
   style="max-width:700px" inline rencontré sur les pages existantes. */
.fi-article .prix-table.text-width { max-width: var(--fi-text-width); margin: 0 auto; }


/* ==============================================================
   FIGURES INTERACTIVES À HOTSPOTS — récupéré tel quel depuis la
   page voitures. Pattern récurrent (graphique + points cliquables
   avec infobulle) probablement utile sur d'autres pages migrées.
   ============================================================== */
.fi-article .graph-container { text-align: initial; }
.fi-article figure { margin: 0; }
.fi-article .graph-container figcaption { font-size: smaller; color: var(--fi-ink-faint); margin-top: 8px; }
.fi-article .graph-stage { position: relative; display: block; margin: 0 auto; width: 100%; max-width: 100%; }
.fi-article .graph-stage img { width: 100%; height: auto; display: block; margin: 0; }

.fi-article .hotspot { position: absolute; z-index: 2; transform: translate(-50%, -50%); cursor: pointer; }
.fi-article .hotspot .dot {
  display: block; width: clamp(6px, 1vw, 10px); height: clamp(6px, 1vw, 10px);
  border-radius: 50%; background: rgba(150,150,150,.75); border: 2px solid #fff;
}
.fi-article .hotspot:hover, .fi-article .hotspot.active { z-index: 9999; }

.fi-article .hotspot .tooltip {
  opacity: 0; pointer-events: none; position: absolute;
  width: 240px; max-width: 80vw; padding: 10px 12px;
  background: var(--fi-paper); border: 1px solid var(--fi-line); border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 14px; line-height: 1.45;
  left: 20px; top: 50%; transform: translateY(-50%);
}
.fi-article .hotspot:hover .tooltip,
.fi-article .hotspot.active .tooltip { opacity: 1; pointer-events: auto; display: block; }

.fi-article .hotspot[data-pos="left"] .tooltip { left: auto; right: 20px; }
.fi-article .hotspot[data-pos="top"] .tooltip { top: auto; bottom: 20px; left: 50%; transform: translateX(-50%); }
.fi-article .hotspot[data-pos="bottom"] .tooltip { top: 20px; left: 50%; transform: translateX(-50%); }

@media (max-width:700px) {
  .fi-article .hotspot .tooltip { font-size: 15px; line-height: 1.5; width: min(240px, 75vw); }
}

/* ==============================================================
   TITRE DE SECTION AVEC RETOUR EN HAUT (.titre-bloc / .back-to-top)
   récupéré depuis style26.css, oublié comme les précédents.
   ============================================================== */
.fi-article .titre-bloc { display: flex; align-items: baseline; padding-bottom: 4px; margin-top: 2em; gap: 12px; }
.fi-article .titre-bloc h2 { margin: 0; }
.fi-article .back-to-top { margin-left: auto; margin-right: 5px; text-decoration: none; font-size: 0.85em; color: var(--fi-ink-faint); opacity: 0.8; transition: opacity 0.2s ease; white-space: nowrap; }
.fi-article .back-to-top:hover { opacity: 1; color: var(--fi-official); }
.fi-article .titre-bloc img { display: none; } /* petite flèche décorative devenue inutile (style natif du lien) */

/* ==============================================================
   MISE EN ÉVIDENCE D'UN CHIFFRE CLÉ (balise <re> personnalisée)
   et ENCART DE MAILLAGE INTERNE (.lien-interne-box)
   Rencontrés sur plusieurs pages (prevision_inflation, budget-france...)
   ============================================================== */
.fi-article re { color: #b00020; font-weight: bold; font-style: normal; }
.fi-article .lien-interne-box {
  background-color: #f4f7f9; border-left: 4px solid var(--fi-official);
  padding: 15px 20px; margin: 25px 0; border-radius: 4px;
}
.fi-article .lien-interne-box h4 { margin: 0 0 8px; color: var(--fi-official); font-size: 1.1rem; }
.fi-article .lien-interne-box p { margin: 5px 0; font-size: 0.95rem; line-height: 1.4; }
.fi-article .cta-lien { margin-top: 12px !important; }
.fi-article .cta-lien a { color: #d9534f; text-decoration: underline; }
.fi-article .cta-lien a:hover { color: var(--fi-official); }

/* ==============================================================
   SOMMAIRE D'ANCRES (.fi-toc-list) — pour les pages longues à
   nombreuses sections (plus adapté que .tocbar au-delà de 4-5
   entrées, qui ne wrap pas).
   ============================================================== */
.fi-article .fi-toc-list {
  columns: 2; column-gap: 32px; margin: 0; padding-left: 20px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
}
.fi-article .fi-toc-list li { margin-bottom: 6px; break-inside: avoid; }
.fi-article .fi-toc-list a { color: var(--fi-official); text-decoration: none; }
.fi-article .fi-toc-list a:hover { text-decoration: underline; }
@media (max-width:640px) { .fi-article .fi-toc-list { columns: 1; } }

/* -------- responsive -------- */
@media (max-width:640px){
  .fi-article .wrap{ padding:0 18px; }
  .fi-article h1{ font-size:30px; }
  .fi-article .section-head{ flex-direction:column; align-items:flex-start; }
  .fi-article .barrow, .fi-article .divrow{ grid-template-columns:100px 1fr 54px; gap:8px; }
  .fi-article .paradox-compare{ grid-template-columns:1fr; }
  .fi-article .tocbar{ flex-direction:column; overflow-x:visible; }
  .fi-article .tocbar a{ white-space:normal; padding:12px 16px; }
  .fi-article .formula-chain{ flex-direction:column; align-items:stretch; }
  .fi-article .formula-box{ min-width:0; }
  .fi-article .formula-arrow{ flex-direction:row; padding:8px 0; min-width:0; }
  .fi-article .formula-arrow i{ margin-top:0; margin-left:8px; transform:rotate(90deg); }
}

/* ==============================================================
   SYSTÈME "ROWS" — v4, largeurs simplifiées
   2 largeurs de conteneur (1200 standard / 1600 large, opt-in par
   page via .large) + 1 largeur de colonne de lecture (--fi-text-width,
   déclarée sur .fi-article), appliquée par sélecteur de balise donc
   sans changement HTML requis sur les pages existantes.
   ============================================================== */

.wide-row { width: 100%; box-sizing: border-box; }
.wide-row-inner {
  max-width: 1200px;      /* largeur unique du site */
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 120px);
  background: var(--fi-paper);
  border-top: 1px solid var(--fi-line);
}
/* Exception ponctuelle (tableau exceptionnellement large) : surcharger
   au cas par cas avec un style inline, ex. style="max-width:1600px"
   sur .wide-row-inner. Si ce cas se répète sur plusieurs pages,
   formaliser alors une classe .large ici plutôt que de multiplier
   les styles inline. */

/* Colonne de lecture : le .slot lui-même est contraint, SAUF s'il
   contient un tableau, un graphique statique, une figure, ou un
   graphique JS (tout id contenant "chart" — chart_div, xxx_chart,
   chart_xxx... peu importe la convention exacte utilisée sur la page).
   Cibler .slot plutôt que .slot p corrige au passage le texte brut
   sans balise <p> (juste des retours <br>), fréquent sur les pages
   issues de l'ancien format 1/2 colonnes — sans avoir besoin de
   rouvrir chaque page pour ajouter les balises manquantes.
   Les titres (H1, row-title) sont hors de .slot, donc jamais affectés. */
.slot:not(:has(table, .graph-container, figure, [id*="chart"], [id*="treemap"])) {
  max-width: var(--fi-text-width);
  margin-left: auto;
  margin-right: auto;
}

.grid-row { display:grid; gap:clamp(24px,3vw,48px); align-items:start; }
.grid-row.cols-1 { grid-template-columns:1fr; }
.grid-row > * { min-width:0; }
.grid-row img { max-width:100%; height:auto; display:block; }
/* cols-2 / cols-3 et leur media query de repli supprimés avec le
   passage au tout-colonne-unique : plus aucune page ne doit produire
   de layout multi-colonnes. */

.row-title { font-family:'Fraunces',serif; font-weight:600; font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.2; margin-top:0; margin-bottom:24px; color:var(--fi-ink); }

/* Accordéon (details/summary) : ouvert par défaut partout, JS referme sur mobile */
.row-accordion summary.row-title { cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; margin-bottom:0; }
.row-accordion summary.row-title::-webkit-details-marker { display:none; }
.row-accordion summary.row-title::before { content:"–"; font-family:'IBM Plex Mono',monospace; font-weight:400; color:var(--fi-ink-faint); flex-shrink:0; }
.row-accordion:not([open]) summary.row-title::before { content:"+"; }
.row-accordion[open] summary.row-title { margin-bottom:24px; }
.row-accordion .grid-row { margin-top:0; }

/* Barre sticky "Dans cette page" — fond distinct du menu bleu, sticky sous le menu principal */
/*.toc-sticky {position: sticky; top: 0; z-index: 400; display: flex; flex-wrap: wrap; align-items: stretch; gap: 1px; border-bottom: 3px solid var(--fi-official); padding: 1px; }
.toc-sticky .toc-label { flex: 0 0 auto; display: flex; align-items: center; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--fi-official); padding: 10px 12px; white-space: nowrap; }
.toc-sticky a {flex: 1 1 150px; text-align: center; font-family: 'IBM Plex Sans', sans-serif;  font-size: 13px; font-weight: 500; color: var(--fi-ink); text-decoration: none; padding: 10px 8px; white-space: nowrap; overflow: hidden; text-overflow:  ellipsis;}*/

/* largeur chaque item fixe*/
.toc-sticky {position: sticky; top: 0; z-index: 400; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; border-bottom: 3px solid var(--fi-official); padding: 1px; }
.toc-sticky .toc-label {display: flex; align-items: center; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--fi-official); padding: 10px 12px; white-space: nowrap; }
.toc-sticky a { text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; font-weight: 500; color: var(--fi-ink); text-decoration: none; padding: 10px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*
.toc-sticky {  background: #fff3b0; }
.toc-sticky a {  background: #fff3b0;   transition: background .15s; }
.toc-sticky a:hover { background: #ffe98a; }
.toc-sticky a.active { background: #ffe066; font-weight:700; }
*/
.toc-sticky {  background: #f0f9ff; }
.toc-sticky a {  background: #f0f9ff;   transition: background .15s; }
.toc-sticky a:hover { background: #cde7f8; }
.toc-sticky a.active { background: #a8dcff; font-weight:700; }

@media (max-width:860px) { .toc-sticky { display:none; } }

.slot h2 { font-family:'Fraunces',serif; font-weight:600; font-size:1.6rem; line-height:1.2; margin:0 0 16px; color:var(--fi-ink); }
.slot h3 { font-family:'Fraunces',serif; font-weight:600; font-size:1.25rem; line-height:1.25; margin:0 0 14px; color:var(--fi-ink); }
.slot p, .slot li { font-size:1rem; line-height:1.7; color:var(--fi-ink); }
.slot ul { padding-left:1.2em; }
.slot small { color:var(--fi-ink-faint); }

/* graphiques + hotspots : la version scopée .fi-article (section
   "FIGURES INTERACTIVES À HOTSPOTS" plus haut dans ce fichier) suffit
   désormais — .fi-article englobe toutes les pages migrées. La copie
   non scopée qui existait ici (doublon strict) est supprimée. */

/* .prix-table et .table-centree : la version scopée .fi-article .prix-table
   (section "TABLEAU DE DONNÉES SIMPLE" plus haut) est la seule définition
   restante. .table-centree supprimée : quasi identique à .prix-table,
   plus besoin de deux classes pour la même chose — utiliser .prix-table
   partout (ajouter text-align:center à des cellules ponctuelles au
   besoin, plutôt que de dupliquer toute la classe). */