/* ====================================================================
   STYLE28.CSS
   ====================================================================
   Cible de mise en page, tranchée avant d'écrire la moindre règle :
   UNE SEULE COLONNE, marges de chaque côté, pleine largeur d'écran.
   Pas de grille multi-colonnes. Pas de deuxième largeur "de lecture"
   qui viendrait contredire ce choix. Si une règle future a besoin de
   revenir sur ce point, il faut d'abord changer CETTE phrase — pas
   ajouter une exception locale en douce.

   Construit au fil de l'eau, page migrée après page migrée :
   seuls les composants réellement utilisés par au moins une page
   en style28 sont présents (né avec pouvoir-achat.php, complété
   depuis avec dette_publique_france_1950_dev.php). Un nouveau
   composant (tableau, graphique...) s'ajoute ici seulement quand
   une page migrée en a effectivement besoin — jamais par
   anticipation.

   Menu/bannière/footer : dupliqués depuis style27.css à l'identique
   (décision du 15/09/2026 — voir section 1). Le "chrome" du site
   (polices, tailles de texte) ne change pas non plus dans le gabarit
   article ci-dessous : seule la couche largeur/conteneur est reprise
   de zéro, pas l'identité visuelle.
   ==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ==================================================================
   0. TYPOGRAPHIE DE BASE
   ================================================================== */

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

body { margin: 0; }

@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
   Dupliqué depuis style27.css à l'identique (décision du 15/09/2026 :
   le menu/footer est stable, la duplication le temps de la transition
   style27 -> style28 est acceptée en connaissance de cause plutôt que
   de créer une dépendance croisée entre les deux feuilles).
   Toute modification du menu pendant la période de transition doit
   être répercutée dans les DEUX fichiers.
   ################################################################## */

/* ---- 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 {
   z-index: 500;
  position: absolute;
  top: 50px;
  right: 5px;
  padding: 10px;
  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: 10px;
  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; font-size: 16px; text-align: right; }

  .banniere { display: flex; flex-wrap: wrap; align-items: center; }
  .oeil, .title { flex: 0 0 auto; }
  .datej { float: none; flex: 1 1 100%; width: auto; text-align: center; font-size: 11px; padding: 2px 0; }
  .datej br { display: none; }

}

.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%; }
}

.menu-toggle { display: none; }

@media only screen and (max-width: 640px) {
  .menu-toggle {
    display: block;
    width: 100%;
    text-align: center;
    background: #000096;
    color: #ffffff;
    border: none;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  #onglets { display: none; flex-direction: column; }
  #onglets.menu-open {
    display: flex;
  }
  #onglets.menu-open .on,
  #onglets.menu-open .off {
    width: 100%;
    min-width: 0;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
}

@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; }

/* Pulsation discrète à l'arrivée sur la page, pour attirer l'œil sur le
   widget de vote sans être intrusif. Classe posée uniquement côté PHP si
   le visiteur n'a pas encore voté (voir menu_main.php). S'arrête d'elle-même
   après 4 secondes (4 x 1s) — aucun JS n'est nécessaire pour la stopper. */
.vote-look.attract-attention { animation: fi-vote-pulse 1s ease-in-out 6; }

@keyframes fi-vote-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 150, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 0, 150, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
  .vote-look.attract-attention { animation: none; }
}

@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; }

/* Item "à la une" (contenu mis en avant éditorialement) */
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 à un onglet plus riche. */
#menu_onglets > div.show { min-height: 200px; }

/* ---- Footer ---- */
.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; }


/* ####################################################################
   2. GABARIT ARTICLE — .fi-article
   Reconstruit à zéro (pas porté depuis style27) : une seule largeur
   de conteneur, pas de grid, pas de variable de largeur inutilisée.
   #################################################################### */

.fi-article {
  /* -------- tokens, scopés ici (jamais sur :root, pour ne jamais
     entrer en collision avec les futures pages qui chargeraient
     encore style27) -------- */
  --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;

  /* -------- largeur : UN SEUL conteneur, pas de deuxième largeur
     de lecture qui obligerait à la neutraliser page par page comme
     sur index.php (style="max-width:100%" répété sur chaque bloc). -------- */
  --fi-container-width: 1200px;

  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;

  background: linear-gradient(#2A77BD, #b9def4);
  background-repeat: repeat-x;
  background-attachment: fixed;
  background-size: auto 100vh;

  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;
}

/* Correctif mobile : le dégradé n'est de toute façon pas perceptible sur
   un écran étroit (trop peu de hauteur visible pour voir la transition
   de couleur), et background-attachment:fixed est une cause connue de
   saccades au scroll sur mobile (repaint à chaque frame, notamment
   Safari iOS). Sous 640px : fond uni, couleur de départ du dégradé,
   attachment normal (pas de repaint au scroll). */
@media (max-width: 640px) {
  .fi-article {
    background: #2A77BD;
    background-attachment: scroll;
  }
}

.fi-article * { box-sizing: border-box; }
.fi-article [id] { scroll-margin-top: 74px; }

/* -------- conteneur unique -------- */
.fi-article .row {
  width: 100%;
}
.fi-article .row-inner {
  max-width: var(--fi-container-width);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 6vw, 120px);
  background: var(--fi-paper);
  border-top: 1px solid var(--fi-line);
}
/* Le tout premier bloc de contenu de la page (le masthead) n'a rien
   au-dessus : exemption via une classe explicite (.row-first) plutôt
   qu'un sélecteur structurel (:first-child), qui se casserait dès
   qu'un élément non-.row (ex: la barre "Dans cette page") est inséré
   avant lui — jamais un style en ligne à répéter, ceci dit, c'est
   justement ce qui avait causé les deux bugs de lignes parasites
   corrigés plus tôt. */
.fi-article .row-first .row-inner { border-top: none; }
@media (max-width: 640px) {
  .fi-article .row-inner { padding: 24px 16px; }
}

/* -------- en-tête d'article --------
   Pas de border-bottom : le masthead n'apparaît qu'une fois par
   page et ce padding est la valeur réellement utilisée (pas un
   défaut à neutraliser en ligne comme précédemment). */
.fi-article .masthead { padding: 40px 0 20px; }
.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: 'IBM Plex Serif', 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 .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; }

/* -------- encadré "en bref" (sommaire avec liens internes) -------- */
.fi-article .en-bref {
  background: var(--fi-paper-raised);
  border: 1px solid var(--fi-line);
  border-radius: 4px;
  padding: 20px 24px;
  margin-top: 24px;
}
.fi-article .en-bref h2 {
  font-size: 1.0625rem; margin: 0 0 12px;
}
.fi-article .en-bref ul { list-style: none; padding: 0; margin: 0; }
.fi-article .en-bref li { margin-bottom: 10px; }
.fi-article .en-bref li:last-child { margin-bottom: 0; }
.fi-article .en-bref a { color: var(--fi-ink); text-decoration: none; }
.fi-article .en-bref a:hover { text-decoration: underline; }
.fi-article .en-bref .emoji { margin-right: 6px; }

/* -------- chapitres repliables (accordéon) --------
   <details class="row-accordion"><summary class="row-title" id="...">
   Titre</summary> ... contenu ... </details>
   Ouvert par défaut partout ; la fermeture de tous les chapitres sauf
   le premier sur mobile est gérée en JS (menu_main.php, déjà chargé
   sur toutes les pages — rien à ajouter ici). */
.fi-article .row-title {
  font-family: 'IBM Plex Serif', serif; font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.625rem); line-height: 1.2;
  margin: 0 0 16px; color: var(--fi-ink);
}
.fi-article .row-accordion summary.row-title {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; margin-bottom: 0;
}
.fi-article .row-accordion summary.row-title::-webkit-details-marker { display: none; }
.fi-article .row-accordion summary.row-title::before {
  content: "▶"; font-size: .5em; color: #ff0000; flex-shrink: 0; display: inline-block; transition: transform .2s ease;
}
.fi-article .row-accordion[open] summary.row-title::before { transform: rotate(90deg); }
.fi-article .row-accordion[open] summary.row-title { margin-bottom: 24px; }

/* -------- barre sticky "Dans cette page" --------
   #toc-sticky (id obligatoire, ciblé par le JS de menu_main.php) :
   surlignage du chapitre en cours de lecture automatique, position
   recalée sous le menu principal sticky. */
.fi-article .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;
  background: #f0f9ff;
}
.fi-article .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;
}
.fi-article .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; background: #f0f9ff; transition: background .15s;
}
.fi-article .toc-sticky a:hover { background: #cde7f8; }
.fi-article .toc-sticky a.active { background: #a8dcff; font-weight: 700; }
@media (max-width: 860px) { .fi-article .toc-sticky { display: none; } }

/* -------- sélecteur à choix exclusif (.toggle) --------
   Pour choisir une vue parmi plusieurs sans les superposer (ex: les
   3 notions du graphique pouvoir d'achat) — un clic affiche l'une,
   masque les autres. Porté depuis style27, jamais utile avant. */
.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); }

/* -------- bloc détaché --------
   Exception locale et délibérée à la règle "tout est jointif" :
   un espace (fond dégradé visible) au-dessus et en-dessous d'un
   bloc précis, ex. les commentaires, pour le distinguer visuellement
   du corps éditorial. Vient en plus du trait fin par défaut, pas à
   sa place. À poser sur .row-detached (le conteneur du bloc), pas
   sur .fi-article section — sinon on recrée le problème partout. */
.fi-article .row-detached .row-inner { margin-top: 48px; margin-bottom: 48px; }
@media (max-width: 640px) {
  .fi-article .row-detached .row-inner { margin-top: 28px; margin-bottom: 28px; }
}
/* -------- typographie courante --------
   PAS de règle .fi-article section ici volontairement : une balise
   <section> pleine largeur avec padding+border-bottom transparents
   laisse voir le dégradé de fond entre les blocs (effet "cartes"
   séparées) et une ligne grise qui traverse tout l'écran, au lieu
   du simple trait fin de .row-inner (1200px) qui sert déjà de
   séparateur entre blocs jointifs. <section> reste utilisable pour
   le balisage sémantique / les ancres, juste sans lui accrocher de
   style visuel — la séparation vient uniquement de .row-inner. */
.fi-article h2 {
  font-family: 'IBM Plex Serif', serif; font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.625rem); margin: 0 0 16px;
  letter-spacing: -.01em; color: var(--fi-ink);
}
.fi-article h3 {
  font-family: 'IBM Plex Serif', serif; font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.1875rem); margin: 0 0 12px; color: var(--fi-ink);
}
.fi-article p, .fi-article li { font-size: 1rem; line-height: 1.5; color: var(--fi-ink); }
.fi-article ul { padding-left: 1.2em; }
.fi-article small { color: var(--fi-ink-faint); }
.fi-article img { max-width: 100%; height: auto; display: block; }

/* -------- tableaux de données (.tablewrap / .prix-table) --------
   Porté depuis style27.css, requis par dette_publique_france_1950_dev.php
   (multiples tableaux de chiffres). .tablewrap : scroll horizontal si le
   tableau déborde sur petit écran, aucun style visuel propre. .prix-table :
   thème de colonnes standard. Le thème "sortable" de style27 n'est pas
   repris : aucune page en style28 n'a pour l'instant de tableau triable. */
.fi-article .tablewrap { overflow-x: auto; border: 1px solid var(--fi-ink); }
.fi-article table { width: 100%; border-collapse: collapse; margin: 0; }
.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.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; } }

@media (max-width: 640px) {
  .fi-article h1 { font-size: 30px; }
}