/* =========================================================
   POLARIS — feuille de style commune
   Modifier les couleurs et polices ici : tout le site suit.
   ========================================================= */

:root {
  /* Couleurs */
  --papier: #FBFBF8;        /* fond principal */
  --papier-2: #F2F3F0;      /* fond des encarts */
  --encre: #13233F;         /* texte principal, bleu nuit */
  --ardoise: #556074;       /* texte secondaire */
  --filet: #DDE0E5;         /* lignes fines */
  --or: #D98A1C;            /* accent, entre or et orange Bitcoin */
  --or-fonce: #9A5F0C;      /* accent lisible sur fond clair (liens) */
  --or-pale: #FBEFD9;       /* surlignage doux */

  /* Typographie */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Mise en page */
  --colonne: 68ch;
  --large: 1120px;
  --rayon: 6px;

  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; }

html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--or-fonce); text-underline-offset: 3px; }
a:hover { color: var(--encre); }

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }

/* ---------- Titres ---------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.chapo {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ardoise);
  max-width: var(--colonne);
}

/* ---------- Structure ---------- */
.conteneur { max-width: var(--large); margin: 0 auto; padding: 0 24px; }
.texte { max-width: var(--colonne); }
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--filet); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: rgba(251, 251, 248, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--filet);
  padding-top: 12px; /* place réservée au bandeau tricolore */
}
/* Liseré tricolore en haut de chaque page (bleu et rouge de la Marianne de l'État) : ancrage français, discret */
.entete::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  /* trois bandes horizontales sur toute la largeur : bleu en haut, blanc au milieu, rouge en bas */
  background: linear-gradient(180deg, #000091 0 4px, #FFFFFF 4px 8px, #E1000F 8px 12px);
}
.entete .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 68px; max-width: 1320px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 500;
  color: var(--encre); text-decoration: none; letter-spacing: 0.02em;
}
.logo svg { width: 22px; height: 22px; flex: none; }
/* Nom SELORB : S évoque le dollar, B le Bitcoin. Traits fins ajoutés aux lettres, dans leur couleur ;
   coordonnées en « em » mesurées sur la police Newsreader (fût du L entre 0,125 et 0,23 em, centre du S à 0,28 em). */
.lettre-devise { position: relative; display: inline-block; line-height: 1; --ep: 0.045em; }
.lettre-devise::before, .lettre-devise::after { content: ""; position: absolute; background: currentColor; }
.devise-s::before, .devise-s::after { left: 0.28em; width: var(--ep); height: 0.10em; transform: translateX(-50%); }
.devise-s::before { top: -0.06em; }
.devise-s::after { top: 0.74em; }
/* B du Bitcoin (₿) : deux paires de courts traits verticaux qui dépassent en haut et en bas, au-dessus du fût et de la panse
   (lettre B de la police : fût à partir de 0,12 em, hauteur 0,06 à 0,73 em) ; légère espace avant la lettre */
.devise-b { margin-left: 0.2em; }
.devise-b::before, .devise-b::after { left: 0.16em; width: 0.17em; height: 0.10em; background:
  linear-gradient(to right, currentColor 0 var(--ep), transparent var(--ep) calc(100% - var(--ep)), currentColor calc(100% - var(--ep))); }
.devise-b::before { top: -0.04em; }
.devise-b::after { top: 0.73em; }
.logo .logo-image { width: 40px; height: 40px; flex: none; object-fit: contain; }
.logo-texte { display: flex; flex-direction: column; line-height: 1.1; }
.logo .signature {
  font-family: var(--serif); font-style: italic; font-size: 0.8rem; font-weight: 400;
  color: var(--or-fonce); letter-spacing: 0.01em; margin-top: 2px;
}
.signature-pied { font-family: var(--serif); color: var(--or-fonce); }
.pied .logo { color: var(--encre); margin-bottom: 12px; }
.pied .logo:hover { color: var(--encre); text-decoration: none; }
/* ---------- Navigation : rubriques avec sous-menus ---------- */
.nav { display: flex; align-items: center; gap: 4px; }
.nav-groupe { position: relative; }
.nav-titre, .nav-lien {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 0.95rem var(--sans); color: var(--ardoise); background: none; border: 0;
  padding: 10px 12px; cursor: pointer; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-titre::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.7; }
.nav-titre:hover, .nav-lien:hover, .nav-groupe.ouvert .nav-titre { color: var(--encre); }
.nav-groupe.actif .nav-titre, .nav-lien[aria-current="page"] { color: var(--encre); border-bottom-color: var(--or); }
.sous-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 320px; padding: 10px; background: #fff;
  border: 1px solid var(--filet); border-radius: 8px; box-shadow: 0 12px 32px rgba(19, 35, 63, 0.12);
}
.nav-groupe.ouvert .sous-menu { display: block; }
.sous-menu a { display: block; padding: 10px 12px; border-radius: 6px; text-decoration: none; color: var(--encre); }
.sous-menu a strong { display: block; font-weight: 600; font-size: 0.95rem; }
.sous-menu a span { display: block; font-size: 0.85rem; color: var(--ardoise); line-height: 1.4; }
.sous-menu a:hover, .sous-menu a:focus-visible { background: var(--papier-2); }
.sous-menu a[aria-current="page"] strong { color: var(--or-fonce); }
.nav .nav-lettre { margin-left: 10px; padding: 9px 18px; font-size: 0.92rem; }

.menu-bouton {
  display: none; background: none; border: 1px solid var(--filet);
  border-radius: var(--rayon); padding: 6px 12px; font: inherit; color: var(--encre);
}
@media (max-width: 1080px) {
  .menu-bouton { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - 90px); overflow-y: auto;
    background: var(--papier); border-bottom: 1px solid var(--filet);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px;
  }
  .nav.ouvert { display: flex; }
  .nav-titre { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--filet); font-size: 1rem; color: var(--encre); }
  .nav-groupe.actif .nav-titre { border-bottom-color: var(--filet); color: var(--or-fonce); }
  .sous-menu { position: static; box-shadow: none; border: 0; padding: 4px 0 8px; min-width: 0; background: transparent; }
  .nav-lien { padding: 14px 0; border-bottom: 1px solid var(--filet); font-size: 1rem; color: var(--encre); }
  .nav .nav-lettre { margin: 16px 0 0; text-align: center; justify-content: center; }
}

/* ---------- Accueil : ouverture ---------- */
.ouverture { padding: 96px 0 72px; }
.ouverture h1 { max-width: 18ch; margin-bottom: 28px; }
.ouverture h1.accroche { max-width: 30ch; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.2; }
.ouverture h1.accroche .ligne-2 { display: inline; }
.intro-points { max-width: var(--colonne); margin: 4px 0 8px; padding-left: 1.2em; color: var(--ardoise); font-size: 1.08rem; line-height: 1.55; }
.intro-points li { margin-bottom: 6px; }
.intro-points li::marker { color: var(--or); }
.ouverture h1 .ligne-2 { display: block; color: var(--or-fonce); }
.ouverture .sous-titre {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--encre); margin: 18px 0 28px; padding-left: 14px; border-left: 3px solid var(--or);
}

.compteurs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 48px; border-top: 1px solid var(--encre);
}
.compteur { padding: 24px 32px 8px 0; }
.compteur + .compteur { padding-left: 32px; border-left: 1px solid var(--filet); }
.compteur .valeur {
  font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3rem);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.compteur .libelle { color: var(--ardoise); font-size: 0.95rem; margin-top: 6px; }
.compteur .detail { font-size: 0.9rem; color: var(--or-fonce); margin-top: 4px; }
@media (max-width: 700px) {
  .compteurs { grid-template-columns: 1fr; }
  .compteur + .compteur { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); }
}

/* ---------- Parcours en quatre temps (vraie séquence) ---------- */
.parcours { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: etape; }
.parcours li {
  counter-increment: etape;
  display: grid; grid-template-columns: 64px 1fr; gap: 16px;
  padding: 24px 0; border-top: 1px solid var(--filet);
}
.parcours li::before {
  content: counter(etape, upper-roman);
  font-family: var(--serif); font-size: 1.6rem; color: var(--or);
}
.parcours h3 { margin-bottom: 4px; }
.parcours h3 a { color: var(--encre); text-decoration: none; }
.parcours h3 a:hover { color: var(--or-fonce); }
.parcours p { color: var(--ardoise); margin: 0; max-width: 60ch; }

/* ---------- Deux publics ---------- */
.publics { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; }
.publics > div { border-left: 3px solid var(--or); padding-left: 24px; }
@media (max-width: 760px) { .publics { grid-template-columns: 1fr; } }

/* ---------- Boutons et formulaires ---------- */
.bouton {
  display: inline-block; background: var(--encre); color: var(--papier);
  border: 0; border-radius: var(--rayon); padding: 12px 22px;
  font: 500 1rem var(--sans); text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--or-fonce); color: var(--papier); }
.bouton.discret {
  background: transparent; color: var(--encre); border: 1px solid var(--encre);
}
.bouton.discret:hover { background: var(--encre); color: var(--papier); }

.abonnement {
  background: var(--papier-2); border-radius: var(--rayon);
  padding: 40px; margin-top: 8px;
}
.abonnement form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.abonnement input[type="email"], .abonnement select {
  flex: 1 1 240px; padding: 12px 14px; font: inherit; color: var(--encre);
  background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon);
}
.abonnement .note { font-size: 0.88rem; color: var(--ardoise); margin: 12px 0 0; }
.message-formulaire { margin-top: 12px; font-size: 0.95rem; color: var(--or-fonce); }

/* ---------- Observatoires : blocs de données ---------- */
.indicateur { padding: 48px 0; border-top: 1px solid var(--filet); }
.indicateur:first-of-type { border-top: 0; }
.indicateur-tete {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px;
}
/* Chiffres clés au-dessus des graphiques : centrés sur la largeur de la page */
.indicateur-tete > .chiffre-cle, .indicateur-tete > .cle-bloc { align-self: center; text-align: center; }
.indicateur-tete h2 { font-size: 1.6rem; margin: 0; }
.chiffre-cle {
  font-family: var(--serif); font-size: 1.9rem; color: var(--or-fonce);
  font-variant-numeric: tabular-nums;
}
.graphique { position: relative; height: 340px; margin: 16px 0 12px; }
@media (max-width: 600px) { .graphique { height: 260px; } }
.lecture {
  font-family: var(--serif); font-size: 1.12rem; line-height: 1.55;
  margin: 8px 0 4px;
}
.source { font-size: 0.85rem; color: var(--ardoise); }
.source .illustratif {
  background: var(--or-pale); color: var(--or-fonce);
  padding: 1px 8px; border-radius: 3px; margin-left: 6px;
}
.a-venir {
  background: var(--papier-2); border-radius: var(--rayon);
  padding: 24px 28px; color: var(--ardoise);
}

/* ---------- Comprendre Bitcoin : les cinq propriétés ---------- */
.proprietes { margin-top: 24px; }
.propriete {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px;
  padding: 40px 0; border-top: 1px solid var(--filet);
}
.propriete h2 { font-size: 1.7rem; }
.propriete .phrase {
  font-family: var(--serif); font-size: 1.45rem; line-height: 1.35; margin-bottom: 12px;
}
.propriete .lien-technique { font-size: 0.95rem; }
@media (max-width: 760px) { .propriete { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Pages de lecture (technique, méthode) ---------- */
.article h2 { margin-top: 56px; }
.article h3 { margin-top: 32px; }
.article ul { padding-left: 1.2em; }
.article li { margin-bottom: 0.5em; }
.encadre {
  border-left: 3px solid var(--or); background: var(--papier-2);
  padding: 20px 24px; margin: 28px 0; border-radius: 0 var(--rayon) var(--rayon) 0;
}
.retour { display: inline-block; margin-top: 16px; font-size: 0.95rem; }

.principes { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: principe; }
.principes li {
  counter-increment: principe; position: relative;
  padding: 28px 0 28px 64px; border-top: 1px solid var(--filet);
}
.principes li::before {
  content: counter(principe);
  position: absolute; left: 0; top: 24px;
  font-family: var(--serif); font-size: 2rem; color: var(--or);
}
.principes h3 { margin: 0 0 6px; }
.principes p { margin: 0; max-width: 62ch; }

/* ---------- Pied de page ---------- */
.pied {
  border-top: 1px solid var(--encre); padding: 40px 0 56px;
  font-size: 0.9rem; color: var(--ardoise);
}
.pied .conteneur { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.pied p { max-width: 60ch; margin: 0 0 8px; }
.pied a { color: var(--ardoise); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Observatoire : chiffre clé détaillé ---------- */
.cle-bloc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.cle-date { font-size: 0.9rem; color: var(--encre); font-weight: 600; }
.cle-var { font-size: 0.88rem; color: var(--or-fonce); white-space: pre-wrap; }
.cle-var:empty, .cle-date:empty { display: none; }

/* ---------- Sélecteur de période ---------- */
.periode {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 14px 0 4px; font-size: 0.92rem; color: var(--ardoise);
}
.periode select {
  font: inherit; color: var(--encre); background: #fff;
  border: 1px solid var(--filet); border-radius: var(--rayon); padding: 5px 8px; margin-left: 4px;
}
.periode-raz {
  font: inherit; font-size: 0.88rem; background: none; border: 0; padding: 4px 0;
  color: var(--or-fonce); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.legende { font-size: 0.9rem; color: var(--ardoise); margin: 6px 0 0; }
/* Hypothèses de calcul : volontairement discrètes (un tiers plus petites que les légendes) */
.hypotheses { font-size: 0.6rem; line-height: 1.5; color: var(--ardoise); margin: 6px 0 4px; }

/* ---------- Tableau des moyennes, posé sur le graphique ---------- */
.graphique .tableau-moyennes {
  position: absolute; top: 4px; left: 64px;
  background: rgba(251, 251, 248, 0.9);
  border: 1px solid var(--filet); border-radius: 4px;
  padding: 6px 10px; font-size: 0.8rem; pointer-events: none;
}
.tableau-moyennes:empty { display: none; }
.tableau-moyennes table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tableau-moyennes th, .tableau-moyennes td { padding: 2px 8px; text-align: right; font-weight: 400; }
.tableau-moyennes thead th { font-weight: 600; border-bottom: 1px solid var(--filet); }
.tableau-moyennes tbody th { text-align: left; color: var(--ardoise); padding-left: 0; }
@media (max-width: 600px) {
  .graphique .tableau-moyennes { position: static; display: inline-block; margin-bottom: 8px; background: var(--papier-2); }
  .graphique:has(.tableau-moyennes:not(:empty)) { height: auto; }
  .graphique:has(.tableau-moyennes:not(:empty)) canvas { height: 260px !important; }
}

/* ---------- Questions-réponses ---------- */
.faq-sommaire { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 24px; }
.faq-sommaire a {
  font-size: 0.92rem; text-decoration: none; color: var(--encre);
  border: 1px solid var(--filet); border-radius: 999px; padding: 6px 14px; background: #fff;
}
.faq-sommaire a:hover { border-color: var(--or); }
.faq h2 { margin-bottom: 8px; scroll-margin-top: 90px; }
.faq details { border-bottom: 1px solid var(--filet); }
.faq details:first-of-type { border-top: 1px solid var(--filet); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 16px 36px 16px 0; font-weight: 600; color: var(--encre); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 400; color: var(--or);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.faq details p { margin: 0 0 18px; color: var(--ardoise); line-height: 1.6; }
.faq details ul, .faq details ol { margin: 0 0 18px; padding-left: 1.3em; color: var(--ardoise); line-height: 1.6; }
.faq details li { margin-bottom: 8px; }
.faq details strong { color: var(--encre); font-weight: 600; }

/* =========================================================
   V4 — composants ajoutés
   ========================================================= */

/* ---------- Accueil : boutons d'action et parcours ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 8px; }
.bouton.or { background: var(--or); color: var(--encre); }
.bouton.or:hover { background: var(--or-fonce); color: #fff; }
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 36px; border-top: 1px solid var(--encre); }
.etape { padding: 28px 28px 8px 0; }
.etape + .etape { padding-left: 28px; border-left: 1px solid var(--filet); }
.etape .numero { font-family: var(--serif); color: var(--or); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
.etape h3 { margin: 6px 0 10px; }
.etape ul { list-style: none; padding: 0; margin: 0; }
.etape li { padding: 8px 0; border-top: 1px solid var(--filet); }
.etape li a { color: var(--encre); text-decoration: none; font-weight: 500; }
.etape li a:hover { color: var(--or-fonce); }
.etape li span { display: block; color: var(--ardoise); font-size: 0.9rem; }
@media (max-width: 860px) {
  .etapes { grid-template-columns: 1fr; }
  .etape + .etape { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); }
}

/* ---------- Chiffres phares (accueil, notes) ---------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border-top: 1px solid var(--encre); margin-top: 32px; }
.chiffre { padding: 20px 20px 12px 0; }
.chiffre + .chiffre { padding-left: 20px; border-left: 1px solid var(--filet); }
.chiffre .valeur { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-variant-numeric: tabular-nums; line-height: 1.1; }
.chiffre .libelle { color: var(--ardoise); font-size: 0.9rem; margin-top: 6px; }
/* Grille de chiffres sur trois colonnes alignées (note de l'observatoire) */
.chiffres.trois { grid-template-columns: repeat(3, 1fr); }
/* Contenu de la lettre, présenté en liste cochée */
.abonnement .accroche-lettre { font-family: var(--serif); font-size: 1.15rem; color: var(--encre); margin-bottom: 10px; }
.contenu-lettre { list-style: none; padding: 0; margin: 0 0 12px; }
.contenu-lettre li { position: relative; padding-left: 28px; margin-bottom: 8px; line-height: 1.5; }
.contenu-lettre li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--or-fonce); font-weight: 700; font-size: 1.1rem; }
.abonnement .pour-qui { color: var(--ardoise); font-size: 0.95rem; }
/* Inscription à la lettre par simple e-mail */
.inscription-lettre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 20px 0 12px; }
.inscription-lettre .consigne { margin: 0; color: var(--encre); }
.inscription-lettre .adresse-lettre { font-weight: 600; user-select: all; }
.copier { font: inherit; font-size: 0.85rem; color: var(--or-fonce); background: none; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 3px 10px; margin-left: 6px; cursor: pointer; }
.copier:hover { border-color: var(--or); }

.chiffres.trois .chiffre:nth-child(3n+1) { padding-left: 0; border-left: 0; }
@media (max-width: 700px) {
  .chiffres.trois { grid-template-columns: 1fr; }
  .chiffres.trois .chiffre { padding-left: 0; border-left: 0; }
  .chiffres.trois .chiffre + .chiffre { border-top: 1px solid var(--filet); }
}
.chiffre .detail { color: var(--or-fonce); font-size: 0.85rem; margin-top: 2px; }
.chiffre a { color: inherit; text-decoration: none; }
@media (max-width: 700px) { .chiffre + .chiffre { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); } }

/* ---------- Lecture SELORB : interprétation, distincte de la donnée ---------- */
.lecture-polaris {
  margin: 14px 0 6px; padding: 16px 20px; background: var(--or-pale);
  border-radius: var(--rayon); font-size: 0.98rem; line-height: 1.6;
}
.lecture-polaris::before {
  content: "Lecture SELOR₿"; display: block; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-fonce); margin-bottom: 4px;
}
.lecture-polaris:empty { display: none; }

/* ---------- Outils sous chaque graphique : données, citation, mise à jour ---------- */
.outils-graphique { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 6px 0 0; font-size: 0.85rem; color: var(--ardoise); }
.outils-graphique button {
  font: inherit; background: none; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--or-fonce); text-decoration: underline; text-underline-offset: 3px;
}
.outils-graphique .maj::before { content: "● "; color: #2E7D4F; }
.citation { display: none; margin-top: 8px; padding: 10px 14px; background: var(--papier-2); border-radius: var(--rayon); font-size: 0.85rem; }
.citation.visible { display: block; }

/* ---------- Avertissement de risque ---------- */
.avertissement {
  display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; padding: 14px 18px;
  border: 1px solid var(--filet); border-left: 3px solid var(--encre); border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: 0.9rem; color: var(--ardoise); background: #fff;
}
.avertissement strong { color: var(--encre); }

/* ---------- Comprendre : ce que la propriété ne garantit pas ---------- */
.limite {
  margin: 14px 0 12px; padding: 12px 16px; border-left: 3px solid var(--ardoise);
  background: var(--papier-2); font-size: 0.95rem; color: var(--ardoise); border-radius: 0 var(--rayon) var(--rayon) 0;
}
.limite strong { color: var(--encre); display: block; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2px; }

/* ---------- Fil d'Ariane ---------- */
.ariane { font-size: 0.85rem; color: var(--ardoise); margin: 0 0 18px; }
.ariane a { color: var(--ardoise); }
.ariane span[aria-current] { color: var(--encre); }

/* ---------- Tableaux de contenu ---------- */
.tableau { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.95rem; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.tableau thead th { border-bottom: 1px solid var(--encre); font-weight: 600; }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.defilement { overflow-x: auto; }

/* ---------- Calculateur ---------- */
.calculateur { display: grid; grid-template-columns: 340px 1fr; gap: 40px; margin-top: 32px; align-items: start; }
.calculateur form { background: var(--papier-2); border-radius: 8px; padding: 24px; display: grid; gap: 16px; }
.champ label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 4px; }
.champ .aide { display: block; font-size: 0.82rem; color: var(--ardoise); margin-top: 4px; }
.champ input, .champ select, .formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--encre);
  background: #fff; border: 1px solid var(--filet); border-radius: var(--rayon);
}
.resultats .grand { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; color: var(--or-fonce); font-variant-numeric: tabular-nums; }
.resultats .grand-libelle { color: var(--ardoise); margin-bottom: 18px; }
@media (max-width: 860px) { .calculateur { grid-template-columns: 1fr; } }

/* ---------- Formulaire de prise de contact qualifiée ---------- */
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 20px; }
.formulaire .plein { grid-column: 1 / -1; }
.formulaire label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 4px; }
@media (max-width: 700px) { .formulaire { grid-template-columns: 1fr; } }

/* ---------- Modèle de politique de trésorerie ---------- */
.modele { counter-reset: article; }
.modele h2 { counter-increment: article; font-size: 1.45rem; margin-top: 44px; }
.modele h2::before { content: "Article " counter(article) " — "; color: var(--or-fonce); }
.a-completer { background: var(--or-pale); padding: 0 4px; border-radius: 3px; font-style: normal; }
.note-modele { font-size: 0.9rem; color: var(--ardoise); border-left: 2px solid var(--filet); padding-left: 12px; margin: 8px 0 16px; }

/* ---------- Notes de l'observatoire ---------- */
.liste-notes { list-style: none; padding: 0; margin: 24px 0 0; }
.liste-notes li { padding: 22px 0; border-top: 1px solid var(--filet); }
.liste-notes .date { font-size: 0.85rem; color: var(--ardoise); text-transform: uppercase; letter-spacing: 0.06em; }
.liste-notes h2 { font-size: 1.5rem; margin: 4px 0 6px; }
.liste-notes h2 a { color: var(--encre); text-decoration: none; }
.liste-notes h2 a:hover { color: var(--or-fonce); }
.meta-article { font-size: 0.9rem; color: var(--ardoise); margin-bottom: 28px; }

/* ---------- Glossaire ---------- */
.glossaire dt { font-family: var(--serif); font-size: 1.25rem; margin-top: 26px; scroll-margin-top: 100px; }
.glossaire dd { margin: 4px 0 0; color: var(--ardoise); max-width: var(--colonne); }
.lettres { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.lettres a { display: inline-block; min-width: 32px; text-align: center; padding: 4px 6px; border: 1px solid var(--filet); border-radius: 4px; text-decoration: none; color: var(--encre); background: #fff; }

/* ---------- Mise à jour d'une page ---------- */
.mise-a-jour { font-size: 0.85rem; color: var(--ardoise); }

/* ---------- Pied de page en colonnes ---------- */
.pied .conteneur { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.pied h2 { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre); margin: 0 0 10px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin: 0 0 6px; }
.pied a { text-decoration: none; }
.pied a:hover { color: var(--encre); text-decoration: underline; }
@media (max-width: 960px) { .pied .conteneur { grid-template-columns: 1fr 1fr; } .pied .pied-marque { grid-column: 1 / -1; } }

/* ---------- Mobiles et écrans tactiles ---------- */
/* Pas de grossissement automatique du texte quand le téléphone passe à l'horizontale (iOS) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Encoches et bords arrondis des téléphones (la page déclare viewport-fit=cover) */
.conteneur { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
/* Les grilles ne débordent jamais de l'écran, même à 320 px de large */
.calculateur > *, .calculateur form > *, .chiffres > *, .publics > *, .compteurs > * { min-width: 0; }
@media (max-width: 1080px) {
  .nav { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overscroll-behavior: contain; }
}
@media (max-width: 700px) {
  section { padding: 48px 0; }
  .ouverture { padding: 48px 0 40px; }
  .compteurs, .chiffres { margin-top: 28px; }
  .conteneur { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .entete .conteneur { gap: 12px; }
  .logo { min-width: 0; }
  .abonnement { padding: 24px 20px; }
  .calculateur { gap: 24px; margin-top: 24px; }
  .calculateur form { padding: 18px 16px; }
  .parcours li { grid-template-columns: 40px 1fr; gap: 10px; }
  .publics > div { padding-left: 16px; }
  .tableau { font-size: 0.88rem; }
  .tableau th, .tableau td { padding: 8px 8px; }
  .tableau th:first-child, .tableau td:first-child { padding-left: 0; }
  .defilement { -webkit-overflow-scrolling: touch; }
  .hypotheses { font-size: 0.72rem; }
  .graphique { height: 280px; }
  .periode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .periode select { margin-left: 0; }
  .pied .conteneur { grid-template-columns: 1fr; gap: 24px; }
  .inscription-lettre .copier { margin: 6px 0 0; }
}
/* Écrans tactiles : champs à 16 px (sinon iOS zoome à la saisie) et zones à toucher d'au moins 40 px */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
  .periode select, .champ input, .champ select { min-height: 40px; }
  .copier, .periode-raz, .outils-graphique button, .outils-graphique a { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .outils-graphique a { display: inline-flex; align-items: center; }
  .menu-bouton { min-height: 40px; padding: 8px 14px; }
  .lettres a { min-width: 40px; padding: 9px 6px; }
  .faq-sommaire a { padding: 10px 14px; }
  .pied li { margin-bottom: 4px; }
  .pied li a { display: inline-block; padding: 6px 0; }
}

/* ---------- Impression (modèle de politique, notes) ---------- */
@media print {
  .entete, .pied, .abonnement, .outils-graphique, .actions, .ne-pas-imprimer { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  section { padding: 12px 0; border: 0 !important; }
  a { color: inherit; text-decoration: none; }
  .a-completer { background: none; border-bottom: 1px dotted #999; }
}

/* ---------- Accueil : publics et engagements ---------- */
.publics.publics-3 { grid-template-columns: repeat(3, 1fr); gap: 36px; }
@media (max-width: 960px) { .publics.publics-3 { grid-template-columns: 1fr; } }
.engagements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 28px 0 20px; }
.engagements h3 { font-size: 1.15rem; margin-bottom: 6px; }
.engagements p { color: var(--ardoise); font-size: 0.95rem; margin: 0; }
@media (max-width: 960px) { .engagements { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .engagements { grid-template-columns: 1fr; } }
.avertissement p { margin: 0; }
.avertissement > span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--encre); color: #fff; font-weight: 600; font-size: 0.8rem; display: grid; place-items: center; }
.evitement:focus { position: fixed; top: 16px; left: 16px; width: auto; height: auto; clip: auto; z-index: 100; background: var(--encre); color: #fff; padding: 8px 14px; border-radius: var(--rayon); }
.abonnement input[type="email"], .abonnement select, .formulaire select, .champ select { min-width: 0; max-width: 100%; }
.abonnement form > * { min-width: 0; }
code { overflow-wrap: anywhere; }
/* Colonnes de lecture alignées à gauche, comme le reste du site */
.conteneur.texte { max-width: var(--large); }
.conteneur.texte > * { max-width: var(--colonne); }
.conteneur.texte > .defilement, .conteneur.texte > .avertissement, .conteneur.texte > .actions, .conteneur.texte > .formulaire { max-width: 860px; }