/* ═══════════════════════════════════════════════════════════════════════════
   PECUNNIA — LES COMPOSANTS DE L'APPLICATION.

   ⚠ CE FICHIER NE DÉCLARE PLUS AUCUN JETON (2026-09-07). Il portait les deux
   :root — thème sombre et thème clair — plus la remise à zéro, l'@import des
   polices et les styles des éléments nus. Tout cela vit maintenant dans
   systeme.css, qui se charge AVANT celui-ci et que les 32 gabarits à <head>
   chargent tous.

   ⚠ ET C'EST UNE CONDITION, PAS UN RANGEMENT. Cette feuille se charge APRÈS
   systeme.css : un `:root` laissé ici gagnerait contre le système à chaque
   page. C'est exactement le défaut que l'audit a compté vingt fois — le même
   nom déclaré dans vingt sources, et l'écran qui obéit à la dernière.

   Ce qui reste ici : les composants de l'APPLICATION, et eux seuls. Les pages
   publiques ne chargent pas cette feuille (elles n'étendent pas base.html) et
   n'en ont pas besoin — elles n'ont besoin que des jetons.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Base ────────────────────────────────────────────────────────────────── */

/* systeme.css pose déjà la police, la taille, la couleur et le fond du body.
   Ce qui reste ici est propre au GABARIT de l'application : une colonne pleine
   hauteur, dans laquelle le pied de page se pose en bas quand le contenu ne
   remplit pas l'écran. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Les quatre classes historiques du chiffre. `.mono` vient de systeme.css ;
   les trois autres sont des noms d'écran qu'on ne renomme pas ici. */
.prix-actuel, .metric-value, .actif-prix {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  text-align: center;
  padding: 1.25rem 1rem 0;
}

[data-theme="dark"] .site-header {
  background: var(--surface);
}
[data-theme="light"] .site-header { background: var(--surface); }

.site-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem .5rem;
}

.header-brand { padding-bottom: 1rem; }

/* ⚠ 900 ET 800 SONT DES GRAISSES SYNTHETISEES PAR LE NAVIGATEUR : Inter
   s'arrete a 700 dans ce depot, et le § 2.1 de docs/refonte/DESIGN.md n'en
   autorise que quatre — 400, 500, 600, 700. Ce qu'on obtenait n'etait pas une
   graisse plus lourde, c'etait un contour epaissi par interpolation, et il ne
   ressemble a aucune des coupes de la famille. Les trois dernieres du depot
   partent ici (le logo, le titre d'ecran d'administration, le mot de la
   marque) ; les trois autres etaient sur des classes mortes, retirees plus
   haut. */
.logo {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--txt-2xl);
  letter-spacing: -0.04em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
}
.logo span { color: var(--or-texte); }

/* ─── Navigation ──────────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.site-nav a {
  font-family: var(--f-sans);
  font-size: var(--txt-xs);
  font-weight: 500;
  color: var(--text-sec);
  background: transparent;
  border: 1px solid transparent;   /* reserve la place de la bordure de l'etat actif (pas de saut d'1px) */
  text-decoration: none;
  flex: 1;
  text-align: center;
  padding: .5rem .75rem;
  border-radius: var(--rayon-sm);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.site-nav a:hover  { background: var(--surface-2); color: var(--text); }
/* Etat actif adouci : or transparent + texte doré (au lieu de l'aplat plein). */
.site-nav a.active { background: var(--or-light); color: var(--or-texte); border: 1px solid var(--or-border); font-weight: 600; }
[data-theme="dark"] .site-nav a.active { color: var(--or-texte); }

/* ─── Main content ────────────────────────────────────────────────────────── */

.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem;
  flex: 1;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--surface);
  color: var(--text-sec);
  text-align: center;
  padding: 1rem 1rem;
  font-size: var(--txt-2xs);
  border-top: 1px solid var(--border);
}

/* ⚠ --or-texte ET NON --or. La mention légale est le texte le plus lu de ce
   pied et le seul qui engage : var(--or) donne 2,69:1 sur --surface en clair.
   Mesuré sur /cgu, /cgv et /mentions-legales. */
.site-footer .disclaimer {
  color: var(--or-texte);
  font-weight: 600;
  margin-bottom: .25rem;
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: var(--rayon);
  font-size: var(--txt-sm);
  font-weight: 600;
  font-family: var(--f-sans);
  cursor: pointer;
  border: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.btn:hover  { opacity: .85; }
.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--text);
  color: var(--bg);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--txt-sm);
  padding: .6rem 1.25rem;
  border-radius: var(--rayon-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.01em;
}
.btn-primary:hover  { opacity: 0.85; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-or {
  background: var(--or);
  color: var(--on-or);
  font-family: var(--f-sans);
  font-weight: 600;
  padding: .6rem 1.25rem;
  border-radius: var(--rayon-sm);
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-or:hover  { background: var(--or-dark); transform: translateY(-1px); box-shadow: var(--shadow-or); }
.btn-or:active { transform: translateY(0) scale(0.98); }

.btn-gold    { background: var(--or); color: var(--on-or); }
.btn-outline { background: transparent; color: var(--text-sec); border: 1.5px solid var(--border); }
.btn-sm      { padding: .3rem .7rem; font-size: var(--txt-2xs); }

/* ─── Cards ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
  transition: box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }

/* ─── Inputs ──────────────────────────────────────────────────────────────── */

/* ⚠ LES CASES À COCHER ET LES BOUTONS RADIO SONT HORS DE CE RESET, et ils en
   sortent PAR LE SÉLECTEUR — pas par une exception posée plus bas qui aurait à
   défaire, propriété par propriété, ce que celui-ci leur applique.

   `width: 100%` a du sens pour un champ de saisie, qui occupe sa ligne. Il n'en
   a aucun pour une case, qui est une pastille suivie d'un libellé : appliqué à
   un radio dans un `<label>` en flex, il l'étire sur toute la largeur du
   conteneur et rejette son texte hors de l'écran. Mesuré le 2026-09-01 sur le
   journal post-thèse du Terminal : radio de 1 065 px, libellé poussé à x = 1483
   dans une fenêtre de 1 500. Les quatre motifs d'archivage se lisaient comme
   quatre points gris sans texte, et le questionnaire passait pour absent.
   `padding: .6rem .875rem`, `border-radius` et `background` n'ont pas plus de
   sens sur ces deux contrôles — d'où l'exclusion entière, et non la seule
   largeur.

   Le `:not()` ne porte que sur `input` : `select` et `textarea` n'ont pas
   d'attribut `type` et gardent le reset complet. */
/* ⚠ `:where()` ET NON `:not()` NU — CORRECTIF DU 2026-09-08, ET IL RÉPARE UNE
   PANNE VISIBLE. `input:not([a]):not([b])` pèse (0,3,1) en spécificité : DEUX
   pseudo-classes et un type. Toute classe de composant pèse (0,1,0). Ce reset
   battait donc `.topbar-search-input`, `.gs-input`, `.a-saisie` et les autres —
   silencieusement, comme toujours en cascade.
   Ce que ça donnait à l'écran : le champ de recherche de la barre haute déclare
   `padding-left: 36px` pour laisser la place à sa loupe ; il recevait les
   14 px du reset, et la loupe (posée de 142 à 158 px) se dessinait PAR-DESSUS
   le « R » de « Rechercher ». Mesuré au navigateur, sur le catalogue et sur le
   Terminal — les deux écrans les plus ouverts de l'application.
   `:where()` ne compte pour rien : le sélecteur retombe à (0,0,1), le reset
   continue d'habiller tout champ nu, et la première classe venue le corrige.
   Le filtre lui-même ne change pas — cases et boutons radio restent exclus,
   pour les raisons ci-dessus. */
input:where(:not([type="checkbox"]):not([type="radio"])), select, textarea {
  font-family: var(--f-sans);
  font-size: var(--txt-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-sm);
  padding: .6rem .875rem;
  color: var(--text);
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
input:where(:not([type="checkbox"]):not([type="radio"])):focus, select:focus, textarea:focus {
  border-color: var(--or);
  box-shadow: var(--ombre-or);
}

/* ─── Cases à cocher et boutons radio ─────────────────────────────────────── */

/* ⚠ CE BLOC EST LA DÉFINITION DU PRODUIT POUR CES DEUX CONTRÔLES, pas le
   rattrapage de l'écran qui les a fait apparaître. Ils sont arrivés tard : au
   2026-09-01 le dépôt n'en comptait que quatre — les trois du journal
   post-thèse et le filtre « Ma liste seulement » du flux — et tous les quatre
   étaient étirés par le reset ci-dessus. Le prochain écran qui en pose ne doit
   rien avoir à corriger, ni à redéclarer.

   ⚠ RENDU NATIF CONSERVÉ : pas d'`appearance: none`. Une case redessinée à la
   main coûte son état indéterminé, son anneau de focus, sa cible tactile et son
   comportement dans les préférences de contraste du système — cher payé pour un
   carré. `accent-color` suffit à les mettre à l'or de la marque, et le navigateur
   garde le reste. */
input[type="checkbox"], input[type="radio"] {
  /* Le garde-fou explicite : l'exclusion ci-dessus suffit aujourd'hui, cette
     ligne tient encore si un reset futur redevient large. */
  width: auto;
  /* Dans un `<label>` en flex, la case ne s'étire ni ne se comprime : c'est le
     libellé qui prend la place restante. */
  flex: none;
  accent-color: var(--or);
  cursor: pointer;
}

/* ─── Search ──────────────────────────────────────────────────────────────── */

.search-wrap { margin-bottom: 1.25rem; }

.search-input {
  width: 100%;
  padding: .65rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rayon);
  color: var(--text);
  font-size: var(--txt-sm);
  font-family: var(--f-sans);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input::placeholder { color: var(--text-sec); }
.search-input:focus { border-color: var(--or); box-shadow: var(--ombre-or); }

/* ─── Actif grid ──────────────────────────────────────────────────────────── */

.actif-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.actif-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.actif-card:hover {
  border-color: var(--or);
  box-shadow: var(--shadow-or);
  transform: translateY(-1px);
}

.card-ticker {
  font-size: var(--txt-xl);
  font-weight: 800;
  color: var(--or-texte);
  letter-spacing: -.5px;
}

.card-nom {
  font-size: var(--txt-2xs);
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-prix {
  font-size: var(--txt-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--f-mono);
  margin-top: .2rem;
}
.card-prix small { font-size: var(--txt-3xs); color: var(--text-sec); font-weight: 400; }

.card-secteur {
  font-size: var(--txt-3xs);
  color: var(--text-sec);
  background: var(--surface-2);
  border-radius: var(--rayon-2xs);
  padding: .15rem .45rem;
  align-self: flex-start;
  margin-top: .2rem;
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-sec);
  padding: 3rem 0;
  font-size: var(--txt-sm);
}

/* ─── Badges ──────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .6rem;
  border-radius: var(--rayon-pilule);
  font-size: var(--txt-3xs);
  font-weight: 600;
  font-family: var(--f-sans);
  letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--text-sec);
  border: 1px solid var(--border);
}
.badge-or       { background: var(--or-light); color: var(--or-texte); border-color: var(--or); }
.badge-action   { background: var(--or-light); color: var(--or-texte); border: none; }
.badge-crypto   { background: var(--or-light); color: var(--or-texte); border: none; }
.badge-etf      { background: var(--green-soft);  color: var(--green); border: none; }
.badge-obligation      { background: var(--or-light); color: var(--or-texte); border: none; }
.badge-matiere_premiere { background: var(--red-soft); color: var(--red); border: none; }
.badge-neutre   { background: var(--surface-2); color: var(--text-sec); border: none; }

/* ─── Tables ──────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-sm);
}

th {
  background: var(--surface-2);
  color: var(--text-sec);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--txt-3xs);
  letter-spacing: .06em;
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }

/* ─── Prix / variation ────────────────────────────────────────────────────── */

.prix      { font-weight: 600; font-variant-numeric: tabular-nums; }
.variation { font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--txt-xs); }
.variation.haussier { color: var(--green); }
.variation.baissier { color: var(--red); }
.variation.neutre   { color: var(--text-sec); }

/* ─── Page actif : en-tête ────────────────────────────────────────────────── */

.actif-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-lg);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
}

.actif-header .ticker {
  font-size: var(--txt-3xl);
  font-weight: 800;
  color: var(--or-texte);
  line-height: 1;
  font-family: var(--f-sans);
  letter-spacing: -0.04em;
}

.actif-header .nom {
  color: var(--text-sec);
  font-size: var(--txt-sm);
  margin-top: .35rem;
}

.actif-header .prix-bloc { text-align: right; }

.actif-header .prix-actuel {
  font-size: var(--txt-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: var(--f-mono);
}

.actif-header .prix-variation {
  font-size: var(--txt-md);
  font-weight: 600;
  margin-top: .35rem;
}

.actif-header .meta {
  display: flex;
  gap: 1.5rem;
  color: var(--text-sec);
  font-size: var(--txt-xs);
  flex-wrap: wrap;
  margin-top: .75rem;
}

.actif-header .meta-item strong { color: var(--text); }

/* ─── Chart card ──────────────────────────────────────────────────────────── */

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
}

.chart-card h3 {
  font-size: var(--txt-md);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  font-family: var(--f-sans);
}

.btn-periode {
  background: var(--surface-2);
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-radius: var(--rayon-xs);
  padding: .3rem .8rem;
  font-size: var(--txt-xs);
  font-family: var(--f-sans);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-periode.active,
.btn-periode:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--on-or);
}
.evolution-pct.haussier { color: var(--green); }
.evolution-pct.baissier { color: var(--red); }

.chart-source { font-size: var(--txt-2xs); color: var(--text-sec); margin-top: .6rem; text-align: right; }
.chart-source a { color: var(--text-sec); text-decoration: underline; }
.chart-wrap { position: relative; height: 280px; }
.chart-loading { text-align: center; color: var(--text-sec); padding: 2rem 0; }

/* Infobulle du graphique de cours (Lightweight Charts n'en fournit pas).
   pointer-events:none — sinon elle intercepte le survol qui la fait vivre. */
.chart-tooltip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  max-width: 260px;
  padding: .5rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--rayon-xs);
  background: var(--surface);
  color: var(--text);
  font-family: var(--f-sans);
  font-size: var(--txt-2xs);
  line-height: 1.35;
  box-shadow: var(--ombre-2);
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip .ct-date { color: var(--text-ter); font-size: var(--txt-3xs); }
.chart-tooltip .ct-prix { font-weight: 600; margin-bottom: .25rem; }
.chart-tooltip .ct-news { margin: .3rem 0 0; padding-left: .9rem; }
.chart-tooltip .ct-news li { margin-bottom: .15rem; }
.chart-tooltip .ct-plus { color: var(--text-ter); font-size: var(--txt-3xs); margin-top: .2rem; }

/* Avertissement de fraîcheur : un graphique figé sans mention est pire qu'un
   graphique vide, parce qu'il continue d'avoir l'air juste. */
.chart-fraicheur {
  margin: .6rem 0 0;
  padding: .45rem .6rem;
  border-left: 3px solid var(--red);
  background: var(--red-soft);
  color: var(--text-sec);
  font-size: var(--txt-2xs);
  font-family: var(--f-sans);
}
.chart-fraicheur[hidden] { display: none; }

/* ─── Micro-environnement D3 ──────────────────────────────────────────────── */

.graph-outer {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  overflow: hidden;
  margin-bottom: 1rem;
}

.graph-legend {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: .6rem 0 .25rem;
  font-size: var(--txt-2xs);
  color: var(--text-sec);
}

/* ─── Sections IA ─────────────────────────────────────────────────────────── */

.ia-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  margin-bottom: .75rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ia-section-header.open  { border-bottom-color: var(--border); }

.ia-icon { font-size: var(--txt-md); }
.ia-section-body.visible { display: block; }

.ia-result { line-height: 1.75; color: var(--text); }
.ia-result h1, .ia-result h2, .ia-result h3 {
  color: var(--text);
  margin: 1.1em 0 .4em;
  font-weight: 700;
  font-family: var(--f-sans);
}
.ia-result h2 { font-size: var(--txt-md); border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.ia-result h3 { font-size: var(--txt-sm); }
.ia-result p  { margin-bottom: .7em; }
.ia-result ul, .ia-result ol { margin: .4em 0 .7em 1.3em; }
.ia-result li { margin-bottom: .2em; }
.ia-result strong { color: var(--text); font-weight: 700; }
.ia-result em { color: var(--text-sec); }
.ia-result table { width:100%; border-collapse:collapse; margin:.8em 0; font-size:var(--txt-xs); }
.ia-result table th { font-size:var(--txt-2xs); background: var(--surface-2); }
.ia-result table td, .ia-result table th { padding:.4rem .65rem; border:1px solid var(--border); }
.ia-result code { background: var(--surface-2); padding:.1em .35em; border-radius:var(--rayon-2xs); font-size:.85em; font-family: var(--f-mono); }
.ia-result blockquote { border-left:3px solid var(--or); padding-left:.85rem; color:var(--text-sec); margin:.5em 0; font-style:italic; }
.ia-result hr { border:none; border-top:1px solid var(--border); margin:1em 0; }

/* Pieds d'analyse. Portés par une classe et non par un style= en ligne :
   l'assainisseur (app/assainissement_html.py) coupe l'attribut style, faute de
   pouvoir filtrer les propriétés CSS une par une.
   Deux classes, pas une : .analyse-source est un MARQUEUR sémantique lu par
   assurerSourceAccord (actif.html) — sa présence signifie « ce corps porte déjà
   sa vraie source » et retire la source par défaut. L'avertissement AMF n'est
   pas une source ; lui donner la même classe supprimerait à tort cette ligne. */
.analyse-source,
.analyse-avertissement {
  font-size: var(--txt-2xs);
  color: var(--text-ter);
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  padding-top: .5rem;
}
.analyse-avertissement { margin-top: 1.5rem; padding-top: .75rem; }

/* ─── Actualités — la source d'un article ────────────────────────────────────

   ⚠ CENT TRENTE LIGNES ONT ÉTÉ RETIRÉES ICI LE 2026-09-10 (lot 3), ET AUCUNE
   N'ÉTAIT MORTE AU SENS ORDINAIRE : elles étaient JUMELLES de celles que
   `index.html` déclare dans son propre bloc `<style>`.

   `.news-hero`, `.news-grid`, `.news-card`, `.news-card-titre`,
   `.news-card-footer`, `.news-badge`, `.news-no-link` étaient écrites DEUX FOIS,
   ici et là-bas. La page se charge après cette feuille, donc elle gagnait — mais
   SEULEMENT sur les propriétés qu'elle redéclare. Mesuré au rendu, après la
   reprise du fil :

     .news-hero  → padding et border-top de la PAGE,
                   border-radius 16px, box-shadow et background de CETTE FEUILLE.
     .news-card  → display:grid et padding de la PAGE,
                   border, border-radius 12px et box-shadow de CETTE FEUILLE.

   Autrement dit : la rangée de fil qu'on venait d'écrire rendait quand même en
   carte arrondie et ombrée. C'est le défaut nommé au § 4.4 de
   docs/refonte/DESIGN.md — « un nom ne se déclare pas deux fois » — et c'est
   celui qui avait déjà coûté `.gs-input`. Un doublon ne se voit pas dans le
   diff : il se voit à la capture, et seulement là.

   `.news-subnav` et `.news-subnav-btn` partaient avec, pour l'autre raison :
   aucun gabarit ne les emploie.

   CE QUI RESTE ICI, ET POURQUOI : `.news-source` et `.news-empty` sont les deux
   seules de la famille qu'un SECOND écran emploie (`actif_v2.html`). Elles
   restent donc dans la feuille partagée, et la page ne les redéclare pas. */

.news-source {
  font-size: var(--txt-2xs);
  color: var(--text-ter);
  flex-shrink: 0;
}

.news-empty {
  text-align: center;
  color: var(--text-sec);
  padding: 3rem 0;
  font-size: var(--txt-sm);
}

/* ─── Metric cards ────────────────────────────────────────────────────────── */

.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
}
.metric-card:hover { border-color: var(--or-light); }
.metric-label { font-size: var(--txt-3xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-ter); font-family: var(--f-sans); }
.metric-value { font-size: var(--txt-xl); font-weight: 700; color: var(--text); font-family: var(--f-mono); margin: .2rem 0; }
.metric-source { font-size: var(--txt-3xs); color: var(--or-texte); }

/* ─── Theme toggle ────────────────────────────────────────────────────────── */

.theme-toggle {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--rayon-sm);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: var(--txt-sm);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--or); background: var(--or-light); }

/* ─── Auth header ─────────────────────────────────────────────────────────── */

.header-auth-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.header-auth-link {
  font-size: var(--txt-xs);
  font-weight: 500;
  color: var(--text-sec);
  text-decoration: none;
  padding: .3rem .6rem;
  border-radius: var(--rayon);
  transition: color .15s;
}
.header-auth-link:hover { color: var(--text); }

.header-auth-btn-off {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--rayon-sm);
  padding: .3rem .65rem;
  font-size: var(--txt-xs);
  font-weight: 500;
  color: var(--text-sec);
  cursor: pointer;
  font-family: var(--f-sans);
  transition: border-color .15s, color .15s;
}
.header-auth-btn-off:hover { border-color: var(--or); color: var(--text); }

.header-auth-btn-on {
  display: inline-flex;
  align-items: center;
  background: var(--text);
  border: none;
  border-radius: var(--rayon-sm);
  padding: .35rem .8rem;
  font-size: var(--txt-xs);
  font-weight: 600;
  color: var(--bg);
  text-decoration: none;
  cursor: pointer;
  font-family: var(--f-sans);
  transition: opacity .15s, transform .15s;
  letter-spacing: -0.01em;
}
.header-auth-btn-on:hover { opacity: .85; transform: translateY(-1px); }

/* ─── Loader ──────────────────────────────────────────────────────────────── */

.loader { display: none; align-items: center; gap: .6rem; color: var(--text-sec); font-size: var(--txt-sm); padding: .5rem 0; }
.loader.visible { display: flex; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Erreur ──────────────────────────────────────────────────────────────── */

.erreur { display:none; background:var(--red-soft); border-left:3px solid var(--red); border-radius:var(--rayon-2xs); padding:.6rem .9rem; color:var(--red); font-size:var(--txt-sm); margin-top:.5rem; }
.erreur.visible { display: block; }

/* ─── Chevron ─────────────────────────────────────────────────────────────── */

.chevron { transition:transform .2s; font-style:normal; display:inline-block; }
.chevron.open { transform: rotate(90deg); }

/* ─── Tab buttons ─────────────────────────────────────────────────────────── */

.tab-btn {
  background: var(--surface-2);
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-radius: var(--rayon-xs);
  padding: .3rem .8rem;
  font-size: var(--txt-xs);
  font-family: var(--f-sans);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab-btn.active, .tab-btn:hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--on-or);
}

/* ─── Misc ────────────────────────────────────────────────────────────────── */

.page-title { font-size: var(--txt-xl); font-weight: 600; color: var(--text); margin-bottom: var(--esp-5); letter-spacing: var(--appr-titre); }
.text-muted  { color: var(--text-sec); }
.text-small  { font-size: var(--txt-xs); }

/* ─── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .actif-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .actif-grid { grid-template-columns: repeat(2, 1fr); }
  .actif-card { flex-direction: column; align-items: flex-start; }
  .actif-header { flex-direction: column; }
  .actif-header .prix-bloc { text-align: left; }
  .site-header-top { padding: .75rem 1rem .5rem; }
}

@media (max-width: 640px) {
  .btn-periode { padding: .25rem .5rem; font-size: var(--txt-2xs); flex-shrink: 0; }

  #force-graph-container { height: 300px !important; }
  #chartSegments, #chartZones { height: 200px !important; }
  .ia-result { font-size: var(--txt-xs); padding: .75rem; }
  .metric-card { padding: .6rem .75rem; }
  .metric-value { font-size: var(--txt-md); }

  .site-nav a { font-size: var(--txt-3xs); padding: .5rem .3rem; }
  .logo { font-size: var(--txt-xl); }
  .chart-card { padding: .75rem; }
  .actif-header { padding: .75rem; border-radius: var(--rayon); }
}

@media (max-width: 480px) {
  .actif-grid { grid-template-columns: 1fr 1fr; }
  .logo { font-size: var(--txt-xl); }
  .site-nav a { padding: .55rem .7rem; font-size: var(--txt-2xs); }
}

/* ─── Navigation mobile ───────────────────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
  box-shadow: var(--ombre-2);
}

[data-theme="dark"] .mobile-nav {
  background: var(--surface);
  border-top-color: var(--border);
}
[data-theme="light"] .mobile-nav { background: var(--surface); border-top-color: var(--border); }

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  text-decoration: none;
  color: var(--text-ter);
  flex: 1;
  padding: .35rem .1rem;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 0;
  position: relative;
}

.mobile-nav-item.active {
  color: var(--or-texte);
}

.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--or);
  border-radius: 0 0 2px 2px;
}

.mobile-nav-item:active {
  transform: scale(0.92);
}

.mobile-nav-item svg {
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-item.active svg {
  transform: translateY(-1px);
}

.mobile-nav-item span {
  font-size: var(--txt-4xs);
  font-weight: 500;
  font-family: var(--f-sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .mobile-nav { display: flex; }
  .site-nav { display: none; }
  body { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  .site-header-top { padding: .6rem 1rem; }
}

/* ─── Logo mode sombre ────────────────────────────────────────────────────── */

[data-theme="dark"] .logo-svg circle { stroke: var(--text); }
[data-theme="dark"] .logo-svg text   { fill: var(--text); }
[data-theme="dark"] .logo-svg line   { stroke: var(--or); }
[data-theme="light"] .logo-svg circle { stroke: var(--bg); }
[data-theme="light"] .logo-svg text   { fill: var(--bg); }

/* ─── Sidebar classes (index) ─────────────────────────────────────────────── */

.sidebar-classes {
  width: 80px;
  position: fixed;
  left: 0;
  top: var(--barre);
  bottom: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  gap: .25rem;
  z-index: 50;
  overflow-y: auto;
}

.sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .6rem .5rem;
  border-radius: var(--rayon-sm);
  text-decoration: none;
  color: var(--text-ter);
  width: 64px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: var(--txt-4xs);
  font-family: var(--f-sans);
  font-weight: 500;
  text-align: center;
}
.sidebar-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.sidebar-item.active {
  background: var(--or-light);
  color: var(--or-texte);
}
[data-theme="dark"] .sidebar-item.active {
  background: var(--or-light);
  color: var(--or-texte);
}
.sidebar-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.main-content {
  margin-left: 80px;
}

@media (max-width: 768px) {
  .sidebar-classes { display: none; }
  .main-content { margin-left: 0; }
}

/* ─── Logo actif (clearbit) ───────────────────────────────────────────────── */

/* ⚠ LA VIGNETTE D'ACTIF DESCEND DE 28 À 20 PX (2026-09-10, lot 3), et c'est
   elle qui commandait la hauteur de rangée du catalogue : 28 px de vignette
   plus deux fois 13,6 px de rembourrage donnaient 54 px, quand le tableau du
   Terminal en fait 40. Une vignette n'est pas la donnée de la ligne, c'est son
   repère : à 20 px elle se reconnaît toujours et cesse de fixer la trame.
   Le rayon suit la règle de profondeur — un élément imbriqué a un rayon PLUS
   PETIT que ce qui le contient, et une rangée de tableau n'a plus de rayon du
   tout. Le repli à deux lettres perd sa graisse 700 : il est un pis-aller,
   il n'a pas à peser plus que le nom qu'il remplace. */
.actif-logo-cell {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.actif-logo-img {
  width: 20px;
  height: 20px;
  border-radius: var(--rayon-2xs);
  object-fit: contain;
  background: var(--surface-2);
}
.actif-logo-fallback {
  width: 20px;
  height: 20px;
  border-radius: var(--rayon-2xs);
  background: var(--surface-2);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: var(--txt-4xs);
  font-weight: 500;
  color: var(--text-ter);
  font-family: var(--f-mono);
}

/* ── SWOT ────────────────────────────────────────────────────────────────── */
.swot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.swot-card { border-radius: var(--rayon); padding: 1.25rem; }
.swot-titre { font-family: var(--f-sans); font-weight: 700; font-size: var(--txt-sm); margin-bottom: .75rem; }
.swot-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.swot-liste li { font-size: var(--txt-xs); line-height: 1.5; display: flex; justify-content: space-between; gap: .5rem; }
.swot-forces { background: var(--green-soft); border: 1px solid var(--green-border); }
.swot-forces .swot-titre { color: var(--green); }
.swot-faiblesses { background: var(--warn-soft); border: 1px solid var(--warn-border); }
.swot-faiblesses .swot-titre { color: var(--warn); }
.swot-opportunites { background: var(--info-soft); border: 1px solid var(--info-border); }
.swot-opportunites .swot-titre { color: var(--info); }
.swot-menaces { background: var(--red-soft); border: 1px solid var(--red-border); }
.swot-menaces .swot-titre { color: var(--red); }
/* Contraste SWOT : fonds clairs (vert/orange/bleu/rouge) → texte sombre forcé,
   quel que soit le thème (sinon le corps hérite du blanc en thème sombre et
   devient illisible). Les .swot-titre gardent leur couleur dédiée (specificité
   supérieure). */
.swot-card,
.swot-card .swot-liste,
.swot-card .swot-liste li,
.swot-card .swot-point { color: var(--text) !important; }
.swot-card .source-lien { color: var(--text-sec) !important; }
@media (max-width: 640px) { .swot-grid { grid-template-columns: 1fr; } }

/* Résumé entreprise : le sous-bloc « Chiffres clés » (resume-section contenant
   .resume-metrics) fait doublon avec la section « Données financières » dédiée.
   Le prompt #15 ne le génère plus, mais on masque les contenus déjà en cache. */
.resume-section:has(.resume-metrics) { display: none; }
.fin-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.fin-tab-content.show { display: block; }
.cal-date { font-family: var(--f-mono); font-size: var(--txt-sm); font-weight: 600; color: var(--text); min-width: 90px; }
.cal-type { font-size: var(--txt-2xs); font-weight: 600; color: var(--or-texte); }
.cal-desc { font-size: var(--txt-xs); color: var(--text-sec); }

/* ── Boutons favori et partage ───────────────────────────────────────────── */
.actif-actions { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; justify-content: flex-end; }
.btn-favori, .btn-partager { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rayon-sm); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s cubic-bezier(0.16, 1, 0.3, 1); color: var(--text-sec); }
.btn-favori:hover { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.btn-favori.actif { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.btn-partager:hover { border-color: var(--or); background: var(--or-light); color: var(--or-texte); }
.tooltip-copie.visible { opacity: 1; }

/* ── Cards risques horizontales — Option E ───────────────────────────────── */
.risque-card-h {
  display: flex;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  margin-bottom: .75rem;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
}
.risque-card-h:hover { box-shadow: var(--shadow-md); border-color: var(--border-2); }
.risque-card-h.niveau-eleve  { border-left: 3px solid var(--red); }
.risque-card-h.niveau-eleve  .risque-icon-wrap { background: var(--red-soft); color: var(--red); }
.risque-card-h.niveau-moyen  { border-left: 3px solid var(--warn); }
.risque-card-h.niveau-moyen  .risque-icon-wrap { background: var(--warn-soft); color: var(--warn); }
.risque-card-h.niveau-faible { border-left: 3px solid var(--green); }
.risque-card-h.niveau-faible .risque-icon-wrap { background: var(--green-soft); color: var(--green); }
.risque-body { flex: 1; min-width: 0; }
.risque-badge-niveau.rouge  { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-border); }
.risque-badge-niveau.orange { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); }
.risque-badge-niveau.vert   { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-border); }
@media (max-width: 640px) {
  .risque-card-h   { flex-direction: column; gap: .75rem; }
}

/* ─── Paywall components ──────────────────────────────────────────────────── */

.paywall-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 2px solid var(--or);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 200;
  box-shadow: var(--ombre-2);
}
.paywall-banner-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.paywall-banner-title {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: var(--txt-md);
  color: var(--text);
}
.paywall-banner-sub {
  font-size: var(--txt-2xs);
  color: var(--text-sec);
}
.paywall-banner-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.paywall-banner-btn {
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--rayon);
  padding: .6rem 1.35rem;
  font-size: var(--txt-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--f-sans);
  white-space: nowrap;
  transition: opacity .15s;
}
.paywall-banner-btn:hover { opacity: .85; }
.paywall-banner-link {
  font-size: var(--txt-xs);
  color: var(--text-sec);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.paywall-banner-link:hover { color: var(--text); }

.paywall-blur {
  position: relative;
  overflow: hidden;
  border-radius: var(--rayon);
}

@media (max-width: 640px) {
  .paywall-banner { flex-direction: column; text-align: center; padding: 1rem; }
  .paywall-banner-actions { width: 100%; justify-content: center; }
}

/* ─── Section comparaison ─────────────────────────────────────────────────── */
.compare-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-lg);
  box-shadow: var(--shadow-sm);
}

.compare-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.compare-titre {
  font-family: var(--f-sans);
  font-size: var(--txt-lg);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .2rem;
  letter-spacing: -0.02em;
}

.compare-clear-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rayon-sm);
  padding: .4rem .75rem;
  font-size: var(--txt-2xs);
  color: var(--text-sec);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.compare-clear-btn:hover { border-color: var(--red); color: var(--red); }

.compare-slots {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.compare-slot {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  height: 80px;
  border-radius: var(--rayon);
  border: 1.5px dashed var(--border-2);
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.compare-slot.empty {
  cursor: pointer;
  background: var(--surface-2);
}
.compare-slot.empty:hover {
  border-color: var(--or);
  background: var(--or-light);
}
.compare-slot.empty:hover .compare-add-icon { color: var(--or-texte); }
.compare-slot.empty:hover .compare-add-label { color: var(--or-texte); }

.compare-slot.filled {
  border-style: solid;
  border-color: var(--border);
  background: var(--surface);
  cursor: default;
}
.compare-slot-var.pos { color: var(--green); }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-xs);
}

.compare-table thead tr { background: var(--surface-2); }

.compare-td-val.meilleur {
  background: var(--green-soft);
  color: var(--green);
  font-weight: 700;
}

.compare-td-val.pire { color: var(--red); }

.compare-source {
  font-size: var(--txt-3xs);
  color: var(--text-ter);
  text-align: right;
  padding: .5rem 1rem;
  margin: 0;
  background: var(--surface-2);
}

@media (max-width: 768px) {
  .compare-slot { min-width: 120px; max-width: 160px; height: 70px; }
  .compare-section { padding: 1rem; }
}

.sidebar-sep {
  width: 40px;
  height: 1px;
  background: var(--border);
  margin: .5rem auto;
}

[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: inline !important; }
[data-theme="light"] .logo-dark { display: none; }
[data-theme="light"] .logo-light { display: inline; }

/* ── SIDEBAR PRINCIPALE (partagée : index, dashboard) ── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 64px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  overflow: hidden;
}
.sidebar.open { width: 200px; }

.sidebar-logo {
  display: flex;
  align-items: center;
  height: var(--barre);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
  text-decoration: none;
  gap: 10px;
}
.sidebar-logo-mark { flex-shrink: 0; }
.sidebar-logo-text {
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--txt-md);
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--text);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.25s, max-width 0.25s;
}
.sidebar.open .sidebar-logo-text { opacity: 1; max-width: 160px; }
/* ⚠ LES DEUX DERNIERES LETTRES DE LA MARQUE ETAIENT ECRITES TROIS FOIS, EN
   `style=` SUR LA BALISE, ET AVEC DEUX COULEURS DIFFERENTES : `--or-texte`
   dans base.html et index.html, `--c-gold` (c'est-a-dire `--or`) dans
   dashboard.html. ⚠ `--or` est une couleur d'APLAT, jamais de texte
   (docs/refonte/DESIGN.md § 3.3) : le Terminal ecrivait donc son propre nom
   avec le jeton que la regle interdit pour du texte. Une seule declaration,
   ici, et les trois gabarits n'ont plus rien a dire. */
.sidebar-logo-text span { color: var(--or-texte); }

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text-sec);
  transition: all 0.15s;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: var(--f-sans);
  position: relative;
  overflow: hidden;
}
.sidebar-item:hover { background: var(--surface-2); color: var(--text); }
.sidebar-item.active { background: var(--or-light); color: var(--or-texte); }
.sidebar-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: var(--rayon-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  color: var(--text-ter);                 /* teinte neutre uniforme, pilotée par le thème */
  transition: background 0.18s ease, color 0.18s ease;
}
/* Sobre & uniforme (style Apple) : plus aucune couleur propre par section.
   Toutes les icônes partagent la même teinte neutre au repos. */
.sidebar-icon-actus,
.sidebar-icon-action,
.sidebar-icon-obligation,
.sidebar-icon-crypto,
.sidebar-icon-etf,
.sidebar-icon-matiere,
.sidebar-icon-economie,
/* Survol : l'icône s'éclaircit en douceur + léger fond arrondi discret derrière. */
.sidebar-item:not(.active):hover .sidebar-icon-badge {
  background: var(--border);
  color: var(--text);
}
/* Actif (page courante) : icône ET libellé à l'accent doré Pecunnia,
   fond de sélection conservé par .sidebar-item.active ci-dessus. */
.sidebar-item.active .sidebar-icon-badge {
  background: transparent;
  color: var(--or-texte);
}
.sidebar-item.active .sidebar-item-label {
  color: var(--or-texte);
}

.sidebar-item-label {
  font-size: var(--txt-sm);
  font-weight: 500;
  color: var(--text-sec);
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: opacity 0.25s, max-width 0.25s;
  display: block;
}
.sidebar.open .sidebar-item-label {
  max-width: 160px;
  opacity: 1;
}

.sidebar-account {
  border-top: 1px solid var(--border);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.sidebar-account:hover { background: var(--surface-2); }

.sidebar-account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--or);
  color: var(--on-or);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--txt-xs);
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--f-sans);
}

.sidebar-account-info {
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.2s, width 0.2s;
  white-space: nowrap;
}
.sidebar.open .sidebar-account-info { opacity: 1; width: auto; }
.sidebar-account-name { font-size: var(--txt-xs); font-weight: 600; color: var(--text); font-family: var(--f-sans); }
.sidebar-account-email { font-size: var(--txt-2xs); color: var(--text-sec); font-family: var(--f-sans); }

.topbar {
  position: fixed;
  top: 0;
  left: var(--rail);
  right: 0;
  height: var(--barre);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  z-index: 99;
  transition: left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.topbar.sidebar-open { left: 200px; }

/* ⚠ LES HALOS SONT PARTIS (2026-09-08). Trois dégradés radiaux posés en fond
   de <body> avec `!important`, jumeau clair des trois halos DORÉS de
   pecunnia-premium.css. Même argument : une ambiance n'est pas un accent, et
   un `!important` sur le fond du body bat tout ce qu'une page écrit ensuite.
   Le fond du body est celui du système, et c'est tout. */

/* Logo (nav) — déplacé depuis le <style> de landing.html pour réutilisation sur les pages légales */
.nav-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; text-decoration: none; }
.nav-logo-mark { height: 36px; width: auto; display: block; }
.nav-logo-text {
  font-family: var(--f-sans);
  font-size: var(--txt-2xl); font-weight: 600; letter-spacing: -0.02em;
  color: var(--text); line-height: 1;
}
/* Les deux dernières lettres du logo : 2,69:1 en or d'aplat sur blanc. */
.nav-logo-text span { color: var(--or-texte); }