/* ================================================================
   STYLE_LCA.CSS — CHARTE GRAPHIQUE UNIQUE DU SITE LCA PATRIMOINE
   ================================================================
   Fichier unique : il remplace LCA_style_dark.css + lca-desk.css,
   fusionnes le 2026-07-21. Charge par toutes les pages a sidebar
   (« systeme B ») via admin/includes/layout-top.php, et par la
   bibliotheque admin/style/bibliotheque_LCA.html qui en est la
   vitrine — les deux vont toujours ensemble.

   NE PAS DUPLIQUER CE STYLE DANS UNE PAGE.
   Un composant reutilisable se declare ICI, jamais dans un bloc
   <style> local : c'est la regle qui garantit qu'une correction
   faite une fois vaut pour tout le site.

   CHANGER L'IDENTITE DU SITE
   --------------------------
   Modifier uniquement la section A « VARIABLES » : couleurs, polices,
   arrondis. Tout le reste s'y refere.

   SOMMAIRE
   --------
   A. Variables (couleurs, polices, formes, largeurs)
   B. Reset & base
   C. Titres de contenu (partie, sous-titre)
   D. Punchline
   E. Commentaires « insight » — 4 niveaux
   F. Logo
   G. En-tete de fiche (heritage — voir note ci-dessous)
   H. Pied de fiche (heritage — voir note ci-dessous)
   I. Ossature bureau : barre, sidebar, menu, contenu
   J. En-tete de page, fil d'Ariane, boutons, bouton d'ecoute
   K. Cartes, grilles, listes, chiffres-cles, vignettes de mission
   L. Titre de section (variante bureau)
   M. Tableaux : base, comparatif, sources
   N. Schemas : flux, parcours, graphe a barres
   O. Pied de page bureau & responsive

   HERITAGE « FICHE » (sections F, G, H et .doc / .section en B)
   ------------------------------------------------------------
   Ces regles ne servent AUCUNE page du site : elles servent les 23
   fiches HTML de la revue de marche (data/1 Newsletter/3out/), en
   cours de portage vers la grammaire du site (.page-head,
   .desk-section, .insight). A SUPPRIMER une fois le portage termine.
   Verifie le 2026-07-21 : 22 lignes concernees.
   ================================================================ */


/* ================================================================
   A. VARIABLES
   ================================================================ */
:root {

  /* — A.1 Police & taille de texte — */
  --font-ui:  'Segoe UI', Arial, sans-serif;
  --fs-base:  14px;
  --lh-base:  1.6;

  /* — A.2 Couleur de marque —
     --brand        : couleur principale du cabinet. CONSERVÉE pour les
                      FONDS pleins (header, footer, titres de section),
                      où le texte est blanc.
     --brand-bright : Déclinaison CLAIRE de --brand, utilisée
                      comme couleur de TEXTE bleu sur fond noir (titres
                      de partie, sous-titres, libellés, liens…) là où
                      --brand / --brand-dark seraient illisibles.
     --brand-light  : panneau bleu nuit (fond sombre des zones "info" :
                      commentaire "Important", menu de nav, survols…).
     --brand-mid    : bleu-gris foncé, pour bordures et séparateurs.
     --brand-dark   : bleu très foncé, conservé pour certains fonds
                      pleins et survols de boutons. */
  --brand:        #004793;
  --brand-bright: #4d9bff;
  --brand-light:  #0c1f3d;
  --brand-mid:    #28415f;
  --brand-dark:   #003268;

  /* — A.3 Couleurs sémantiques (performance / alerte) —
     Versions éclaircies pour rester lisibles sur fond noir
     (texte) et bien contrastées (barres). Les -bg sont des
     panneaux SOMBRES (vert/rouge/orangé profonds). */
  --bull:         #43d17f;
  --bull-bg:      #10271a;
  --bull-border:  #245c3a;
  --bear:         #ff6a6a;
  --bear-bg:      #2b1416;
  --bear-border:  #6f2a2c;
  --warn-bg:      #2c1c0f;

  /* — A.4 Fonds —
     --bg-page  : fond derrière le document = NOIR (idem site).
     --bg-card  : fond des cartes/vignettes, gris très foncé.
     --bg-white : fond du DOCUMENT et des tableaux = quasi-noir
                  (légèrement relevé pour détacher la carte du fond). */
  --bg-page:   #000000;
  --bg-card:   #15181f;
  --bg-white:  #0b0d12;

  /* — A.5 Texte —
     Du plus clair (--text-primary, titres/corps sur fond noir) au
     plus discret (--text-faint, légendes / mentions). */
  --text-primary:   #ffffff;
  --text-secondary: #e4e8ef;
  --text-muted:     #b3bac6;
  --text-faint:     #7f8896;

  /* — A.6 Formes & ombres — */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --shadow-doc: 0 4px 30px rgba(0, 0, 0, 0.65);
  --border:     1px solid var(--brand-mid);

  /* — A.7 Dégradés "vignette flash" —
     Palette déjà sombre dans la version claire : conservée telle
     quelle, elle fonctionne parfaitement sur fond noir. */
  --flash-amber-from:  #c05000;
  --flash-amber-to:    #9a3e00;
  --flash-slate-from:  #1e2d40;
  --flash-slate-to:    #111827;
  --flash-teal-from:   #0e7490;
  --flash-teal-to:     #0c4a5e;
  --flash-violet-from: #6d28d9;
  --flash-violet-to:   #4c1d95;

  /* — A.8 Ossature « bureau » (largeurs) — */
  --sidebar-w: 236px;
  --content-max: 1080px;

  /* — A.9 Couleur propre a chaque univers —
     Un « univers » = une section du site avec son menu. Sa teinte colore le
     lisere du haut, le libelle du menu, ses pastilles, et — depuis la refonte
     du 23/07/2026 — les marques de structure du contenu : numero de section,
     puce de liste, filet d'en-tete de tableau, barre de l'encadre « important ».

     LA COULEUR DESIGNE UN SUJET, PAS UN ENDROIT. Une mission de conseil et la
     sidebar qui traite le meme sujet portent exactement la meme teinte (cf.
     A.10) : le mot « Retraite » a une couleur, et une seule, ou qu'on le
     rencontre sur le site.

     DEUX PLAGES SONT INTERDITES a tout univers :
         ROUGE  #ff6a6a  = --bear  : baisse, alerte, mise en garde
         VERT   #43d17f  = --bull  : hausse, gain
     Une section entiere dans l'une de ces deux couleurs ferait dire au menu
     ce qu'il ne veut pas dire.

     CE QUI COMPTE, C'EST LA COLONNE, PAS LA ROUE. Le menu maitre du Terminal
     est le seul endroit ou les onze teintes se retrouvent alignees : deux
     teintes proches y sont admissibles si elles sont eloignees dans la liste,
     deux entrees voisines doivent etre franchement differentes. C'est la, et
     nulle part ailleurs, qu'on juge une attribution. Trois defauts ont ete
     corriges ainsi le 23/07 : trois pastilles bleues dans la meme colonne,
     QYC contre Prevoyance, Retraite contre Immobilier. */
  --side-decouvrir:         #4d9bff;   /* bleu de marque */
  --side-terminal:          #4d9bff;   /* bleu de marque, comme Decouvrir — cf. note */
  --side-revue-marche:      #c9d4e2;   /* gris argent */
  --side-missions-conseil:  #7fc99b;   /* vert sauge — cf. note « vert » */
  --side-qyc:               #fb923c;   /* orange */
  --side-prevoyance:        #38bdf8;   /* cyan */
  --side-epargne:           #f472b6;   /* rose */
  --side-retraite:          #8b9cff;   /* indigo */
  --side-immobilier:        #d4a373;   /* bronze — la matiere, la pierre */
  --side-declarations-fiscales: #2dd4bf; /* turquoise — voir la note d'adjacence */
  --side-fiches-techniques: #fbbf24;   /* ambre */
  --side-simulateurs:       #e879f9;   /* fuchsia */

  /* Teintes libres. Le lime sert a la mission Transmission, seule mission
     sans univers propre ; le violet attend un futur univers. Le turquoise a
     ete pris le 24/07 par « Declarations fiscales ». */
  --side-libre-violet:      #c084fc;   /* libere par Missions de conseil le 23/07 */
  --side-libre-lime:        #a3e635;

  /* Terminal reprend le bleu de marque, comme Decouvrir : ce sont les deux
     zones « socle » du site — l'entree publique et le hub de travail — par
     opposition aux univers thematiques, chacun sa teinte. Ils sont voisins
     dans le menu maitre : deux pastilles bleues cote a cote, assume.

     Le vert de Missions de conseil est un vert SAUGE et non un vert franc :
     #43d17f est --bull, la hausse. Sourd, plus clair et plus froid, il se lit
     comme un vert sans se confondre avec le vert de performance quand les deux
     se croisent sur une page de chiffres. Les cinq missions de conseil, qui
     relevent de cet univers, portent toutes cette meme teinte (cf. A.10).
     Plus affirme si besoin : #5ec98b — mais on se rapproche alors du --bull. */

  /* La teinte de l'univers COURANT. Une seule variable, lue par le
     lisere et par le menu (section I). Elle vaut le bleu de marque par
     defaut, et n'est remplacee que par la classe d'univers posee sur
     <body>. Ajouter un univers = une couleur ci-dessus + une ligne
     dans la section I. Rien d'autre. */
  --accent-univers: var(--brand-bright);

  /* — A.10 Couleur propre a chaque mission de conseil —
     Les cinq missions du cabinet. La teinte sert de fil conducteur sur la
     page « Missions de conseil » : elle colore la vignette du sommaire ET
     le numero de la section detaillee plus bas, pour que le client
     retrouve d'un coup d'oeil la mission qu'il a reperee en haut de page.
     Depuis le 23/07/2026, les cinq missions ne portent plus de couleur propre :
     elles relevent toutes de l'univers « Missions de conseil » et prennent donc
     sa teinte unique (vert sauge, cf. A.9). Les jetons par mission ont ete
     supprimes — une seule couleur, --mission, posee en section K sur les
     composants qui la lisent (vignette et titre de section detaillee).
     Consequence voulue — les missions cessent d'emprunter --bear et --bull,
     qui redeviennent la baisse et la hausse, et rien d'autre. */
  --mission: var(--side-missions-conseil);
}

/* ================================================================
   A. VARIABLES GÉNÉRALES
   ================================================================ */


/* ================================================================
   B. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

p {
  margin-bottom: 0.55rem;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text-secondary);
}
p:last-child { margin-bottom: 0; }

/* Conteneur principal de la fiche */
.doc {
  max-width: 980px;
  margin: 32px auto;
  background: var(--bg-white);
  border: 1px solid #1a1f29;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-doc);
  overflow: hidden;
}

/* Conteneur générique d'une section de contenu */
.section { padding: 1.6rem 2rem; border-bottom: 1px solid #1b2029; }
.section:last-of-type { border-bottom: none; }


/* ================================================================
   C. TITRES (section / partie / sous-titre)
   ================================================================ */

/* La hierarchie se fait par la graisse et la taille, pas par la couleur :
   depuis le 23/07/2026 le contenu ne porte plus de bleu decoratif. */
.part-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 1.4rem 0 0.8rem;
  padding-bottom: 6px;
  border-bottom: 2px solid #232833;
}
.part-title:first-child { margin-top: 0; }

.sub-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin: 1.1rem 0 0.6rem;
  border-left: 3px solid #3a4250;
  padding-left: 8px;
}


/* ================================================================
   D. PUNCHLINE
   ================================================================ */
.punchline {
  background: #0f1217;
  padding: 18px 3.5rem;
  border-top: 1px solid #1f2530;
  border-bottom: 1px solid #1f2530;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: center;
  position: relative;
  margin-bottom: 1.2rem;
}
.punchline::before {
  content: '\201C';
  position: absolute;
  left: 1.5rem;
  top: 10px;
  font-size: 42px;
  color: var(--brand-mid);
  font-family: Georgia, serif;
  line-height: 1;
}
.punchline::after {
  content: '\201D';
  position: absolute;
  right: 1.5rem;
  bottom: 4px;
  font-size: 42px;
  color: var(--brand-mid);
  font-family: Georgia, serif;
  line-height: 1;
}


/* ================================================================
   E. COMMENTAIRES (INSIGHTS) — 4 niveaux
   ================================================================ */
.insight {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  margin: 12px 0;
}
.insight p { font-size: var(--fs-base); line-height: 1.7; }

/* — Classique : carte sombre, bordure grise neutre — */
.insight--classique {
  background: var(--bg-card);
  border: 1px solid #222834;
  border-left: 5px solid #3a4250;
  color: var(--text-secondary);
}
.insight--classique strong { color: var(--text-primary); }
.insight--classique p      { color: var(--text-secondary); }

/* — Important : meme carte que « classique », barre a la teinte de l'univers —
     Les quatre niveaux partagent desormais la meme carte neutre ; seule la
     barre de gauche change, et elle porte tout le sens. Avant le 23/07/2026,
     trois des quatre etaient des aplats pleins qui se disputaient la page —
     et le rouge de la mise en garde ne se distinguait plus de son voisin. */
.insight--important {
  background: var(--bg-card);
  border: 1px solid #222834;
  border-left: 5px solid var(--accent-univers);
  color: var(--text-secondary);
}
.insight--important strong { color: var(--accent-univers); }
.insight--important p      { color: var(--text-secondary); }

/* Le niveau « tres important » (encadre rouge d'alerte) a ete retire le
   23/07/2026. Il ne reste donc que trois niveaux : classique, important,
   principe. Une vraie mise en garde se fait desormais dans le corps du texte,
   ou via --bear pose ponctuellement, sans encadre dedie. */

/* — Fondamental : encadré plein, fond couleur de marque, texte blanc.
     ANIMÉ : halo bleu "respirant" (surbrillance), reflet diagonal qui
     balaie la surface (mouvement) et léger soulèvement au survol. Les
     animations sont automatiquement désactivées pour les personnes
     ayant activé "réduire les animations" (prefers-reduced-motion). — */
.insight--principe {
  position: relative;
  overflow: hidden;
  background: #1b1f27;
  border: 1px solid #222834;
  border-left: 5px solid var(--text-primary);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  color: var(--text-primary);
  animation: principe-glow 3.6s ease-in-out infinite;   /* surbrillance conservee (23/07) */
}

/* Reflet diagonal qui traverse l'encadré (mouvement) */
.insight--principe::after {
  display: none;              /* reflet retire le 23/07/2026 */
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(255,255,255,0.16) 50%,
              transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: principe-sheen 5.5s ease-in-out infinite;
}

.insight--principe .insight__title {
  position: relative;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
/* Trait sous le titre qui "respire" (surbrillance) */
.insight--principe .insight__title::after {
  content: '';
  display: block;
  height: 2px;
  width: 36px;
  margin: 9px auto 0;
  border-radius: 2px;
  background: var(--text-muted);
  animation: principe-underline 3.6s ease-in-out infinite;
}

.insight--principe p {
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}
.insight--principe p:last-child { margin-bottom: 0; }
.insight--principe strong { color: #fff; }
.insight--principe em { color: rgba(255,255,255,0.80); }

/* Halo "respirant" autour de l'encadré — neutralise en blanc doux le 23/07,
   pour garder la surbrillance sans reintroduire de bleu decoratif. */
@keyframes principe-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.24), 0 10px 30px rgba(255,255,255,0.07); }
}
/* Reflet qui traverse une fois, puis longue pause */
@keyframes principe-sheen {
  0%   { left: -75%; }
  30%  { left: 130%; }
  100% { left: 130%; }
}
/* Largeur/opacité du trait sous le titre */
@keyframes principe-underline {
  0%, 100% { width: 28px; opacity: 0.45; }
  50%      { width: 66px; opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .insight--principe,
  .insight--principe::after,
  .insight--principe .insight__title::after {
    animation: none;
  }
}


/* ================================================================
   F. LOGO
   ================================================================ */
.lca-logo {
  --logo-w: 110px;
  --logo-h: 38px;
  display: inline-block;
  width: var(--logo-w);
  height: var(--logo-h);
  flex-shrink: 0;
  background-image: url('/LOGO/logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* ================================================================
   G. HEADER SIMPLE (V1)
   ================================================================ */
.doc-header { background: var(--brand); padding: 1.4rem 2rem 1.2rem; }

.doc-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.doc-header__surtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.doc-header__title {
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.doc-header__subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.60);
  margin-top: 7px;
}

.doc-header__updated {
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  margin-top: 6px;
  font-style: italic;
}


/* ================================================================
   H. FOOTER (V1 — simple)
   ================================================================ */
.doc-footer {
  background: var(--brand);
  padding: 1.2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.doc-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}
.doc-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}


/* Barre d'accent fine, aux couleurs de la marque */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  /* Une seule couleur, celle de l'univers courant (cf. --accent-univers,
     section A.9) : le lisere prolonge le menu de gauche, sans degrade.
     Aucune page n'a a le savoir. */
  background: var(--accent-univers);
}

/* Ossature */
.app { display: flex; min-height: 100vh; }

.content {
  flex: 1; min-width: 0;
  margin-left: var(--sidebar-w);
  padding: 36px 44px 80px;
}
.content__inner { max-width: var(--content-max); margin: 0 auto; }

/* ---- Bandeau de cotations (widget TradingView) ----
   Se pose en TOUT PREMIER element du contenu d'une page (cf.
   /terminal/revue-marche/catalyseurs.php). Les marges negatives
   annulent le padding de .content pour que le bandeau file d'un bord
   a l'autre du bureau, colle sous le lisere du haut : si le padding
   de .content change (36px / 44px ici, 62px / 18px en mobile),
   changer ces valeurs avec lui, sinon le bandeau se decale.

   min-height reserve la hauteur du widget AVANT sa reponse : sans
   cela le titre de la page saute au moment ou le script s'affiche.

   Le widget est appele avec isTransparent:true cote page, pour qu'il
   prenne le fond declare ici plutot que le sien. */
.ticker-bandeau {
  margin: -36px -44px 30px;
  padding: 4px 44px 2px;
  background: var(--bg-white);
  border-bottom: 1px solid #1a1f29;
}
/* pointer-events:none — le bandeau est un afficheur, pas un menu.
   Chaque cotation du widget est un lien qui emmene le visiteur sur
   tradingview.com : on neutralise clics, survols et selection sur le
   widget entier. Le widget etant servi dans une iframe d'un autre
   domaine, on ne peut pas retirer ces liens de l'interieur — c'est la
   seule prise dont on dispose. Le defilement, lui, n'est pas affecte.
   La regle s'arrete au widget : le lien de credit TradingView, place
   en dehors dans .ticker-bandeau__credit, reste cliquable — il est
   obligatoire pour l'usage gratuit. */
.ticker-bandeau .tradingview-widget-container {
  min-height: 52px;
  pointer-events: none;
  user-select: none;
}
.ticker-bandeau__credit {
  font-size: 10px; color: var(--text-faint); text-align: right;
  margin-top: -2px;
}
.ticker-bandeau__credit a { color: var(--text-faint); text-decoration: none; }
.ticker-bandeau__credit a:hover { color: var(--brand-bright); }

/* Mobile : on NE remonte PAS le bandeau (pas de marge haute negative).
   Les 62px de padding-haut de .content sont la reserve du bouton de
   menu, qui est fixed : le bandeau passerait dessous. */
@media (max-width: 860px) {
  .ticker-bandeau { margin: 0 -18px 24px; padding: 4px 18px 2px; }
}

/* ---------------- SIDEBAR / SOMMAIRE ---------------- */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--bg-white);
  border-right: 1px solid #1a1f29;
  padding: 26px 16px 24px; overflow-y: auto; z-index: 40;
}

.desk-nav__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent-univers); padding: 0 8px; margin-bottom: 12px;
}

.desk-nav { display: flex; flex-direction: column; gap: 2px; }
.desk-nav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  text-decoration: none; position: relative;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s;
}
.desk-nav__item:hover { background: #0f1217; color: var(--text-primary); }

/* pastille de navigation (teinte de l'univers par défaut, rouge pour le retour) */
.desk-nav__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-univers);
  box-shadow: 0 0 0 3px rgba(77, 155, 255, .10);              /* repli */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-univers) 12%, transparent);
}
.desk-nav__dot--red {
  background: var(--bear);
  box-shadow: 0 0 0 3px rgba(255, 106, 106, .12);
}

/* Avant le 23/07/2026 : fond bleu, lisere bleu, mais pastille a la teinte de
   l'univers — un heurt a l'interieur d'un meme composant. Les trois s'accordent. */
.desk-nav__item.is-active {
  background: color-mix(in srgb, var(--accent-univers) 10%, transparent);
  border-left-color: var(--accent-univers);
  color: var(--text-primary); font-weight: 700;
}

/* séparateur avant le dernier onglet (Retour saas) */
.desk-nav__sep { height: 1px; background: #1a1f29; margin: 10px 10px 8px; }

/* ---------------- IDENTITÉ VISUELLE PAR UNIVERS ----------------
   Terminal est la sidebar maître et porte un argent neutre ; quand on
   entre dans une section spécifique (Revue de marché, QYC, Fiches
   techniques, Simulateurs), le liseré du haut, le libellé du menu et
   ses pastilles prennent la teinte de cet univers, pour matérialiser le
   changement d'environnement. Rien d'autre ne change (contenu, cartes,
   fond de l'onglet actif) — la pastille rouge de déconnexion reste
   rouge partout (sens universel).

   COMMENT ÇA MARCHE
   Ces règles ne peignent rien : elles se contentent de poser
   --accent-univers. Ce sont .topbar, .desk-nav__label et
   .desk-nav__dot (ci-dessus) qui la lisent. Résultat : une seule
   couleur à déclarer par univers, au lieu d'une règle par composant
   et par univers.

   OÙ SE POSE LA CLASSE
   Sur <body>, écrit par admin/includes/layout-top.php à partir de
   $SIDEBAR — le liseré étant hors de la sidebar, il faut un ancêtre
   commun. La variante .sidebar--<slug> est acceptée aussi : elle sert
   aux démonstrations de la bibliothèque, où le menu est montré seul.

   AJOUTER UN UNIVERS = une couleur en section A.9, une ligne ici. */

/* Decouvrir n'a en realite besoin d'aucune ligne : --accent-univers vaut
   --brand-bright par defaut, donc une page sans univers connu reste bleue
   toute seule. La ligne est ecrite quand meme, pour que la liste des onze se
   lise d'un coup d'oeil au lieu d'avoir un trou qu'il faudrait expliquer. */
.univers--decouvrir,         .sidebar--decouvrir         { --accent-univers: var(--side-decouvrir); }
.univers--terminal,          .sidebar--terminal          { --accent-univers: var(--side-terminal); }
.univers--revue-marche,      .sidebar--revue-marche      { --accent-univers: var(--side-revue-marche); }
.univers--missions-conseil,  .sidebar--missions-conseil  { --accent-univers: var(--side-missions-conseil); }
.univers--qyc,               .sidebar--qyc               { --accent-univers: var(--side-qyc); }
.univers--prevoyance,        .sidebar--prevoyance        { --accent-univers: var(--side-prevoyance); }
.univers--epargne,           .sidebar--epargne           { --accent-univers: var(--side-epargne); }
.univers--retraite,          .sidebar--retraite          { --accent-univers: var(--side-retraite); }
.univers--immobilier,        .sidebar--immobilier        { --accent-univers: var(--side-immobilier); }
.univers--fiches-techniques, .sidebar--fiches-techniques { --accent-univers: var(--side-fiches-techniques); }
.univers--declarations-fiscales, .sidebar--declarations-fiscales { --accent-univers: var(--side-declarations-fiscales); }
.univers--simulateurs,       .sidebar--simulateurs       { --accent-univers: var(--side-simulateurs); }

/* ---------------- EN-TÊTE DE PAGE (épuré) ---------------- */
.page-head { margin-bottom: 26px; }
.page-head__eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent-univers);
}
.page-head__title {
  font-size: 30px; font-weight: 900; color: var(--text-primary);
  letter-spacing: -.5px; margin-top: 5px; line-height: 1.12;
}
.page-head__sub { color: var(--text-muted); margin-top: 8px; max-width: 72ch; }
/* Chapeau pleine largeur — a n'utiliser que si le contenu dessous est large
   (tableau, grille) : sans ca le texte s'arrete a 72ch et laisse un vide a
   droite. Sur une page de texte, garder le plafond : au-dela de ~72 caracteres
   par ligne, l'oeil perd la ligne suivante. */
.page-head__sub--large { max-width: none; }

/* Titre + action sur une meme ligne (ex. bouton d'ecoute). Sous 720px les
   deux se replient l'un sous l'autre, cales a gauche. */
.page-head__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.page-head__line .page-head__title { margin-top: 0; }
.page-head__line .content-actions { margin-top: 0; flex: none; }
@media (max-width: 720px) {
  .page-head__line { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Fil d'Ariane (pages secondaires) */
.breadcrumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--text-faint);
  margin-bottom: 14px;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb__sep { color: var(--text-faint); }
.breadcrumb__current { color: var(--text-primary); }

/* ---------------- ACTIONS / BOUTONS ---------------- */
.content-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* Variante : tous les boutons de la rangee a la meme largeur (27/07/2026). */
.content-actions--egales .btn { flex: 1 1 0; min-width: 160px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 10px 18px;
  border: 1px solid #2a3040; border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-primary);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-1px); }

/* Sur fond noir, l'action se signale par la LUMINOSITE, pas par la teinte :
   un bouton clair se voit de plus loin qu'un degrade bleu, et il reste lisible
   sous n'importe quel univers.
       .btn          fond sombre, contour gris   → action secondaire
       .btn-accent   fond clair, texte noir      → action principale
       .btn--anneau  + anneau a la teinte        → l'action de la page

   LA FACE DU BOUTON RESTE NEUTRE. Un essai du 24/07/2026 lui avait donne la
   teinte de l'univers : rejete. Le bouton n'a pas a changer de couleur d'une
   section a l'autre — c'est son ANNEAU, et lui seul, qui porte la teinte.
   Une seule chose bouge donc selon la sidebar : le contour. */
.btn-accent {
  border-color: transparent; color: #0b0d12;
  background: #e8ecf3;
  box-shadow: 0 12px 26px -14px rgba(255,255,255,.40);
}
.btn-accent:hover { background: #fff; box-shadow: 0 16px 32px -14px rgba(255,255,255,.55); }

/* ---------------- BOUTON : CONTOUR TOURNANT ---------------- */
/* Modificateur de .btn — un contour A LA TEINTE DE L'UNIVERS qui tourne en
   boucle, pour attirer l'oeil sur l'action principale d'une page. Un degrade
   conique tournant, masque en anneau : le mask ne garde que la zone de padding
   (mask-composite: exclude), donc l'arc reste un contour et ne passe jamais sur
   la face du bouton. Un seul bouton a anneau par page, sinon plus rien n'attire
   l'oeil.

   C'EST LE SEUL ELEMENT DU BOUTON QUI CHANGE AVEC LA SIDEBAR. La face reste
   neutre ; l'anneau dit de quelle section on parle.

   ACCENTUE LE 24/07/2026 : il etait trop discret sur un bouton clair. Quatre
   leviers, aucun changement de principe —
     · epaisseur portee de 2 a 3 px ;
     · arc visible allonge (il demarre a 42 % du tour au lieu de 52 %) ;
     · teinte pleine plus longtemps, avec une pointe eclaircie en fin d'arc ;
     · halo de la meme teinte, pose par drop-shadow APRES le masque, donc il
       nimbe l'anneau et non le rectangle. */
@property --btn-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.btn--anneau { position: relative; }
.btn--anneau::before {
  content: '';
  position: absolute;
  inset: -3px;
  padding: 3px;
  border-radius: calc(var(--radius-sm) + 3px);
  background: conic-gradient(from var(--btn-angle),
              transparent 0 42%,
              color-mix(in srgb, var(--accent-univers) 50%, transparent) 64%,
              var(--accent-univers) 84%,
              color-mix(in srgb, var(--accent-univers) 45%, #ffffff) 93%,
              transparent 100%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-univers) 65%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: btn-tour 2.6s linear infinite;
  pointer-events: none;
}
@keyframes btn-tour { to { --btn-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .btn--anneau::before { animation: none; }
}

/* ---------------- BOUTON AUDIO ---------------- */
/* Ecoute d'une page — rendu par admin/includes/audio-bouton.php. Les fichiers
   vivent tous dans /assets/audio/. Variante de .btn : ne redefinit que l'icone
   et l'etat de lecture. L'anneau vient de .btn--anneau, pose par l'include
   uniquement quand le fichier existe (rien a inviter tant qu'il n'y a pas de
   son). */
.audio-actions { align-items: center; }
.audio-btn { gap: 9px; cursor: pointer; font-family: inherit; }
.audio-btn__icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  font-size: 9px;
  line-height: 1;
}
/* Sur le bouton d'appel, dont la face est claire, un voile blanc serait
   invisible : la pastille de l'icone s'assombrit. Le cas desactive garde le
   voile clair, puisque son bouton reste sombre. */
.audio-btn.btn-accent .audio-btn__icon { background: rgba(0,0,0,.14); }
.audio-btn.is-playing .audio-btn__icon { background: var(--text-primary); color: #0b0d12; }
.audio-btn[disabled] { opacity: .5; cursor: not-allowed; }
.audio-btn[disabled]:hover { transform: none; }
.audio-btn.is-playing::before { animation-duration: 1.3s; }  /* s'emballe a la lecture */

/* ---------------- BLOCS DE CONTENU ---------------- */
/* wrapper de section propre au bureau (n'entre pas en conflit avec
   la classe .section de la charte, réservée au format « fiche .doc ») */
.desk-section { margin-top: 30px; }
.desk-section:first-of-type { margin-top: 0; }

/* grille + cartes légères */
.desk-grid { display: grid; gap: 14px; }
.desk-grid--2 { grid-template-columns: 1fr 1fr; }
.desk-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Grille libre : autant de colonnes que la largeur en permet, sans palier a
   declarer. --2 et --3 imposent un nombre de colonnes et tombent d'un coup a
   une seule sous 1040px ; --auto s'adapte en continu, ce qu'il faut des que le
   nombre de vignettes n'est ni deux ni trois (cinq criteres de notation, par
   exemple). 260px est le seuil sous lequel une vignette de texte devient
   illisible ; c'est aussi ce qui permet d'en tenir deux dans la bande etroite
   ou la sidebar est encore la. */
.desk-grid--auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.desk-card {
  background: var(--bg-card);
  border: 1px solid #222834;
  border-radius: var(--radius-md);
  padding: 18px 20px;
}
.desk-card__title { font-size: 14px; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.desk-card__body { color: var(--text-secondary); font-size: 13.5px; }

/* ---- Panneaux colorés de desk-card (section « accompagnement ») ----
   Fond sémantique de la charte + puces assorties. brand = bleu (ce que je
   fais / processus), bull = vert (ce que vous y gagnez / bénéfice). */
.desk-card--soft-brand { background: var(--brand-light); border-color: var(--brand-mid); }
.desk-card--soft-brand .desk-card__title { color: var(--brand-bright); }
.desk-card--soft-bull  { background: var(--bull-bg); border-color: var(--bull-border); }
.desk-card--soft-bull  .desk-card__title { color: var(--bull); }
.desk-card--soft-bull  .desk-list li::before { background: var(--bull); }

/* Variante « mission » : la carte prend la teinte de la mission (--mission,
   section A.10) au lieu du bleu. Elle raccroche la carte « Le risque » a la
   courbe et au numero de sa section — la carte « Ce que je fais » restant,
   elle, en --soft-brand (bleu) sur toutes les missions : ce qui menace change
   de couleur, ce que fait le cabinet garde la sienne.
   Chaque color-mix est precede de sa valeur de repli, pour les navigateurs
   qui ne la connaissent pas encore. */
.desk-card--mission {
  background: var(--bg-card);
  border-color: #2a3140;
  background: color-mix(in srgb, var(--mission, var(--brand-bright)) 9%, var(--bg-card));
  border-color: color-mix(in srgb, var(--mission, var(--brand-bright)) 32%, transparent);
}
.desk-card--mission .desk-card__title      { color: var(--mission, var(--brand-bright)); }
.desk-card--mission .desk-list li::before  { background: var(--mission, var(--brand-bright)); }

/* — Carte a la teinte de la SECTION —
   .desk-card--soft-brand est bleue en dur ; .desk-card--mission suit --mission.
   Celle-ci suit --accent-univers, donc la teinte de l'element qui la contient.
   Posez une classe .univers--<slug> sur une <section> et ses cartes prennent
   cette couleur : c'est ce qui permet de donner un theme a chaque section d'une
   meme page, sans ecrire une regle par section. */
.desk-card--theme {
  background: color-mix(in srgb, var(--accent-univers) 9%, var(--bg-card));
  border-color: color-mix(in srgb, var(--accent-univers) 32%, transparent);
}
.desk-card--theme .desk-card__title     { color: var(--accent-univers); }
.desk-card--theme .desk-list li::before { background: var(--accent-univers); }
/* statistique */
.desk-stat {
  background: var(--bg-card); border: 1px solid #222834;
  border-radius: var(--radius-md); padding: 16px 18px;
}
.desk-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; }
.desk-stat__value { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-top: 6px; letter-spacing: -.02em; }
.desk-stat__value.bull { color: var(--bull); }
.desk-stat__value.bear { color: var(--bear); }
.desk-stat__note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
/* Chiffre-cle encadre — pour poser un desk-stat DANS une carte sans qu'il se
   fonde dans le texte (ex. rendement du point RCI sur la fiche metier).
   Ajoute le 27/07/2026. */
.desk-stat--carte {
  border: 1px solid #232833;
  background: var(--bg-white);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
}
/* Un chiffre-cle pose APRES une grille de cartes a besoin de respirer. Regle
   ciblee et non marge sur .desk-stat : dans une grille, l'espacement vient
   deja du gap, une marge s'y ajouterait et desalignerait les colonnes. */
.desk-grid + .desk-stat { margin-top: 14px; }
/* Blocs successifs d'une meme section (cartes, tableaux, legendes) : une
   respiration entre chacun — meme logique que la regle ci-dessus.
   Ajoute le 27/07/2026 ; RESTREINT le meme jour aux enfants directs de la
   section : dans une .desk-grid c'est le gap de la grille qui espace, et la
   version large decalait la 2e carte de chaque rangee (bug repere par
   Florent sur la fiche metier). */
.desk-section > .desk-card + .desk-card,
.desk-section > .desk-card + .tbl-wrap,
.desk-section > .tbl-source + .desk-card { margin-top: 14px; }

/* ---- Economie / honoraires — le rapprochement en un coup d'oeil ----
   Deux nombres sur la meme ligne : ce que la mission fait gagner, ce qu'elle
   coute. Ils sont poses ensemble parce que c'est leur RAPPORT qui parle, pas
   chacun pris a part — un gain seul n'est qu'une promesse, un prix seul n'est
   qu'une depense. Alignes sur la ligne de base pour que les deux montants se
   lisent d'un trait malgre leurs tailles differentes ; le flex-wrap les empile
   proprement sur telephone. S'utilise dans un .desk-stat, entre le libelle et
   la note. */
.gain { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 4px; }
.gain__eco {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  color: var(--bull);                   /* vert = ce que vous gagnez */
}
.gain__prix { font-size: 17px; font-weight: 800; color: var(--text-primary); }
.gain__lien { font-size: 13px; color: var(--text-faint); }

/* liste a puces — puce carree bleue, dans une carte ou en pleine largeur.
   Variante --num : etapes numerotees (une sequence, pas une enumeration). */
.desk-list { list-style: none; padding: 0; margin: 10px 0 0; }
.desk-list li {
  position: relative;
  padding-left: 18px;
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
}
.desk-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--accent-univers);
}
.desk-list strong { color: var(--text-primary); }
/* La liste n'a pas de marge basse (elle finit souvent une carte). Quand du
   texte la suit, il faut la lui rendre. */
.desk-list + p { margin-top: 0.8rem; }

/* Lien dans le corps du texte. Sans cette regle, un <a> pose dans un paragraphe
   tombe sur le bleu par defaut du navigateur (#0000EE) : illisible sur le fond
   quasi noir du site. Cibles nommees une par une plutot qu'un ".content a"
   general, qui aurait aussi repeint les vignettes .mission et les boutons.
   .tbl-source est exclu : ses liens de source ont deja leur style discret. */
.desk-section p:not(.tbl-source) a,
.desk-section .desk-list a,
/* Blancs soulignes : le soulignement suffit a les designer. La teinte de
   l'univers n'apparait qu'au survol — signal de geste, pas element de decor. */
.desk-card__body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.desk-section p:not(.tbl-source) a:hover,
.desk-section .desk-list a:hover,
.desk-card__body a:hover { color: var(--accent-univers); }

.desk-list--num { counter-reset: etape; }
.desk-list--num li { padding-left: 30px; margin-top: 11px; }
.desk-list--num li::before {
  counter-increment: etape;
  content: counter(etape);
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--accent-univers);
  color: #0b0d12;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ---- Missions de conseil — vignettes a code couleur ----
   Grille de N vignettes, une par mission. Chaque vignette porte sa teinte
   via --mission (jetons en section A.10) : le lisere du haut, le numero et
   le nom la lisent. La MEME classe .mission--<slug> se pose sur le titre de
   la section detaillee (avec .sec-title--mission, section L) : le client
   retrouve la mission a sa couleur. C'est le principe de .univers--<slug>,
   applique aux missions.
   La grille est en auto-fit : 5 vignettes de front sur bureau, puis 3, 2 et
   1 en descendant, sans aucune media query. */
.missions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.mission {
  display: block;
  background: var(--bg-card);
  border: 1px solid #222834;
  border-top: 3px solid var(--mission, var(--brand-bright));
  border-radius: var(--radius-md);
  padding: 14px 15px 16px;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease, opacity .18s ease;
}
/* Seules les vignettes qui sont des liens reagissent au survol. */
a.mission:hover { transform: translateY(-2px); border-color: var(--mission, var(--brand-bright)); }

.mission__num {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  background: var(--mission, var(--brand-bright));
  color: #0b0d12;                       /* chiffre sombre : lisible sur les 5 teintes */
  font-size: 12px; font-weight: 800;
  margin-bottom: 9px;
}
.mission__nom {
  font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--mission, var(--brand-bright));
  line-height: 1.3; margin-bottom: 4px;
}
.mission__sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* — Variante NEUTRE —
   Une grille de vignettes qui n'est pas la page « Missions de conseil » n'a pas
   a en porter le vert, ni meme la teinte de sa propre section : sur une page qui
   compte deja des cartes bleues, huit vignettes colorees en plus font trop.
   .missions--neutre les pose en gris : le lisere, le numero et le nom passent en
   --text-muted. Les vignettes se lisent alors comme une liste, et la couleur
   reste disponible pour ce qui doit vraiment ressortir.
   (Une variante --univers, qui prenait --accent-univers, a existe le 23/07 puis
   a ete retiree : trop de bleu sur la meme page.) */
.missions--neutre { --mission: var(--text-muted); }
/* — LE PROJECTEUR —
   Survoler une vignette estompe TOUTES les autres de la page, y compris celles
   d'une autre grille. C'est ce qui les relie : les huit vignettes de l'accueil
   du Terminal — quatre risques, quatre rubriques de marche — reagissent comme
   un seul jeu, alors qu'elles vivent dans deux sections distinctes.

   Le crochet est pose sur .app (l'enveloppe du bureau, cf. section I) et non
   sur .missions : accroche a la grille, l'effet s'arreterait a ses quatre
   vignettes et ne relierait rien.

   Aucune couleur ajoutee — seulement de l'opacite. Sur un navigateur sans
   :has(), rien ne s'estompe : la page reste correcte, elle perd juste l'effet. */
.app:has(.mission:hover) .mission { opacity: .45; }
.app .mission:hover { opacity: 1; }

/* Plus de jeton par mission : --mission vaut le vert de l'univers « Missions de
   conseil » (A.10), pose une seule fois. Les classes .mission--<slug> restent
   admises dans le markup — elles ne peignent plus rien, mais servent encore de
   crochet semantique (ancre, script, futur vocabulaire). */

/* schema de flux — N etapes reliees par des fleches. Horizontal sur bureau,
   empile sous 720px (la fleche bascule alors vers le bas). */
.schema-flux { display: flex; align-items: stretch; gap: 12px; margin-top: 14px; }
.schema-flux__etape {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid #222834;
  border-radius: var(--radius-md);
  padding: 18px 16px;
  text-align: center;
}
.schema-flux__etape--sortie { background: var(--brand-light); border-color: var(--brand-mid); }
.schema-flux__fleche { flex: none; align-self: center; color: var(--accent-univers); font-size: 18px; }
.schema-flux__fleche::before { content: '\2192'; }        /* → */
.schema-flux__visuel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 46px;
  margin-bottom: 12px;
}
.schema-flux__pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-mid); }
.schema-flux__pastille--touche {
  width: 18px;
  height: 18px;
  background: var(--brand-bright);
  box-shadow: 0 0 0 5px rgba(77, 155, 255, .18);
}
.schema-flux__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
}
.schema-flux__titre { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.schema-flux__texte { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.55; }

@media (max-width: 720px) {
  .schema-flux { flex-direction: column; }
  .schema-flux__fleche::before { content: '\2193'; }       /* ↓ */
}

/* graphe a barres horizontales — comparaison de N valeurs sur une meme base.
   La largeur de chaque barre est portee par --part (0 a 1) en style inline :
   width: calc(var(--part) * 100%). Une barre --hero est mise en avant. */
.barcompare { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.barcompare__ligne { display: flex; align-items: center; gap: 12px; }
.barcompare__label { flex: 0 0 116px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.barcompare__track {
  flex: 1;
  min-width: 0;
  height: 30px;
  background: var(--bg-card);
  border: 1px solid #222834;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.barcompare__fill {
  height: 100%;
  width: calc(var(--part, 0) * 100%);
  background: var(--brand-mid);
  border-radius: var(--radius-sm);
}
/* couleur par jauge : --moins rouge, --plus vert */
.barcompare__ligne--moins .barcompare__fill { background: var(--bear); }
.barcompare__ligne--plus  .barcompare__fill { background: var(--bull); }
/* estompe : toutes les jauges sauf la derniere (hero) sont attenuees */
.barcompare__ligne:not(.barcompare__ligne--hero) .barcompare__fill { opacity: .45; }
.barcompare__ligne--hero .barcompare__label { color: var(--bull); }
.barcompare__val { flex: 0 0 66px; text-align: right; font-size: 13.5px; font-weight: 800; color: var(--text-primary); }

@media (max-width: 560px) {
  .barcompare__label { flex-basis: 84px; font-size: 11.5px; }
  .barcompare__val { flex-basis: 56px; font-size: 12.5px; }
}

/* ===== Camembert — ventilation d'un total par postes =====
   Ajoute le 27/07/2026 (simulateur cotisations). SVG genere cote serveur,
   aucun JS. Couleurs : palette categorique validee le 27/07/2026 par le
   validateur dataviz contre notre surface #15181f (tous controles PASS,
   separation daltonisme adjacente >= 8,4). ORDRE FIXE par poste — une teinte
   suit son poste, jamais recyclee. Ecart de 2 px entre les parts (contour
   couleur de surface) ; les textes portent l'encre de texte, jamais la
   couleur de serie ; legende toujours presente. */
.camembert { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.camembert__svg { flex: 0 1 210px; min-width: 170px; height: auto; }
.camembert__part { stroke: var(--bg-card); stroke-width: 2; }
.camembert__part--1 { fill: #3987e5; }
.camembert__part--2 { fill: #d95926; }
.camembert__part--3 { fill: #199e70; }
.camembert__part--4 { fill: #c98500; }
.camembert__part--5 { fill: #d55181; }
.camembert__part--6 { fill: #008300; }
.camembert__part--7 { fill: #9085e9; }
.camembert__pct { fill: var(--text-primary); font-size: 11px; font-weight: 800; text-anchor: middle; }
.camembert__total { fill: var(--text-primary); font-size: 19px; font-weight: 800; text-anchor: middle; letter-spacing: -.02em; }
.camembert__soustitre { fill: var(--text-faint); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; text-anchor: middle; }
.camembert__legende { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.camembert__item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.camembert__puce { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.camembert__puce--1 { background: #3987e5; }
.camembert__puce--2 { background: #d95926; }
.camembert__puce--3 { background: #199e70; }
.camembert__puce--4 { background: #c98500; }
.camembert__puce--5 { background: #d55181; }
.camembert__puce--6 { background: #008300; }
.camembert__puce--7 { background: #9085e9; }
.camembert__val { margin-left: auto; font-weight: 800; color: var(--text-primary); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Sous-ligne d'un element de liste — precision discrete sous un tiret
   (ex. conditions d'ouverture et plafond d'un droit, fiche metier).
   Ajoute le 27/07/2026 a la demande de Florent, avec marche arriere simple :
   retirer les <span class="desk-list__note"> des pages, la classe peut rester. */
.desk-list__note { display: block; font-size: 11px; font-weight: 400; color: var(--text-faint); margin-top: 2px; line-height: 1.5; }

/* ===== Colonnes empilees — decomposition d'un montant =====
   Ajoute le 27/07/2026 (fiche metier : simulations figees « du brut au net »,
   colonne verticale decomposee facon schema salaire brut/net). Les colonnes
   partagent la meme hauteur : chacune montre sa REPARTITION (les proportions
   se comparent d'une colonne a l'autre), les montants absolus sont dans la
   note. Rouge = ce qui part (--moins), vert = ce qui reste (--plus) — meme
   grammaire que .barcompare. Ecart de 2 px entre segments. */
.colonnes { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.colonne { flex: 1 1 150px; min-width: 140px; display: flex; flex-direction: column; gap: 8px; }
.colonne__titre { font-size: 12.5px; font-weight: 800; color: var(--text-primary); }
.colonne__soustitre { font-size: 11px; color: var(--text-faint); margin-top: -4px; }
.colonne__pile { height: 210px; display: flex; flex-direction: column; gap: 2px; }
.colonne__seg {
  flex-grow: var(--part, 1);
  flex-basis: 0;
  min-height: 26px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px 6px;
  font-size: 11.5px;
  font-weight: 800;
  /* Par defaut : NEUTRE, grammaire de luminosite des tableaux comparatifs
     (revue le 27/07/2026 a la demande de Florent) — part recessive en gris
     sombre, la part mise en avant porte --hero, plus claire et en blanc.
     Gris repris de l'existant (cellules heros), aucune couleur nouvelle. */
  background: #1e222b;
  color: var(--text-secondary);
}
.colonne__seg--hero { background: #2a3040; color: var(--text-primary); }  /* la part qui compte */
.colonne__seg--moins { background: var(--bear); color: #fff; }   /* vraie perte uniquement */
.colonne__seg--plus { background: var(--bull); color: #fff; }    /* vrai gain uniquement */
.colonne__note { font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.colonne__ratio { font-size: 20px; font-weight: 800; color: var(--text-primary); letter-spacing: -.02em; }  /* le chiffre-vedette sous la pile */

/* ===== Formulaire de simulation =====
   Ajoute le 27/07/2026 (simulateur cotisations). Champs sobres sur fond
   sombre, libelles en petites capitales, focus a l'accent d'univers. */
.formulaire { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: flex-end; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ__libelle { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; }
.champ__saisie {
  background: var(--bg-white);
  border: 1px solid #232833;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 700;
  width: 200px;
  max-width: 100%;
}
.champ__saisie:focus { outline: none; border-color: var(--accent-univers); }
/* ===== Selecteur — menu deroulant de navigation =====
   Ajoute le 27/07/2026 (simulateur : menu des metiers, pose dans un
   .page-head__line a cote du titre). Un <select> aux couleurs de la charte ;
   navigation par onchange="if (this.value) { location = this.value; }" ;
   les entrees pas encore disponibles restent des <option disabled>. */
.selecteur {
  background: var(--bg-white);
  border: 1px solid #232833;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
  max-width: 100%;
  cursor: pointer;
}
.selecteur:focus { outline: none; border-color: var(--accent-univers); }

.choix { display: flex; gap: 16px; align-items: center; min-height: 38px; }
.choix label { display: flex; gap: 6px; align-items: center; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.choix input { accent-color: var(--accent-univers); }

/* ===== Zone de notes libres =====
   Ajoute le 27/07/2026. Un encart ou l'on ecrit directement (contenteditable),
   pense pour l'annotation en rendez-vous puis l'impression. Rien n'est
   enregistre : le contenu vit le temps de la page. */
.zone-notes {
  min-height: 90px;
  border: 1px dashed #2c3340;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.6;
}
.zone-notes:focus { outline: none; border-color: var(--accent-univers); }
.zone-notes:empty::before { content: attr(data-vide); color: var(--text-faint); }

/* parcours — frise de N étapes numérotées, reliées par une ligne. Chaque
   étape a sa couleur (--step). Horizontal sur bureau, frise verticale sous
   720px. Pensé pour 4 étapes mais fonctionne avec 3 ou 5. */
.parcours { display: flex; gap: 16px; margin-top: 24px; }
/* ⚠️ Ces quatre teintes sont DECORATIVES : elles rythment la frise, elles ne
   designent aucun univers. Ne jamais les faire pointer vers un jeton
   --side-<univers> : le 24/07/2026, l'etape 3 lisait --side-qyc, qui valait
   alors le violet ; QYC est passe a l'orange et l'etape a change de couleur
   toute seule, sans que personne ne touche a cette ligne. On pointe donc vers
   des jetons stables ou vers la teinte libre, jamais vers un univers. */
.parcours__etape:nth-child(1) { --step: var(--bull); }                 /* vert   */
.parcours__etape:nth-child(2) { --step: #fbbf24; }                     /* ambre  */
.parcours__etape:nth-child(3) { --step: var(--side-libre-violet); }    /* violet */
.parcours__etape:nth-child(4) { --step: var(--brand-bright); }         /* bleu   */
.parcours__etape { flex: 1; position: relative; text-align: center; }
.parcours__num {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--step, var(--brand-bright));
  color: #0b0d12;
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 8px 22px -6px var(--step, var(--brand-bright));
}
/* trait de liaison entre une pastille et la suivante */
.parcours__etape:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 29px;
  left: calc(50% + 30px);
  width: calc(100% - 44px);
  height: 3px;
  border-radius: 2px;
  background: var(--brand-mid);
  z-index: 0;
}
.parcours__titre {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--step, var(--brand-bright));
}
.parcours__texte { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 720px) {
  .parcours { flex-direction: column; gap: 0; }
  .parcours__etape { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding-bottom: 22px; }
  .parcours__num { margin: 0; flex: none; }
  .parcours__etape:not(:last-child)::after {
    top: 60px; left: 29px; width: 3px; height: calc(100% - 60px);
  }
  .parcours__corps { padding-top: 4px; }
  .parcours__titre { margin-top: 0; }
}

/* ---- Courbe de risque — schema SVG d'une section « mission » ----
   Une seule idee par courbe, toujours la meme grammaire visuelle :
     trait plein    = ce qui se passe reellement,
     trait pointille = la reference (trajectoire attendue, niveau d'avant),
     aire teintee   = l'ecart entre les deux, c'est-a-dire la perte.
   Le lecteur apprend cette grammaire une fois et lit les quatre courbes.

   AUCUN TEXTE DANS LE SVG. C'est la regle de ce composant : un libelle
   ecrit dans le dessin retrecit avec lui et devient illisible sur
   telephone, sans recours. Tout le texte vit donc en HTML autour du
   dessin, ou il reflue normalement : la legende sous la courbe, les
   tranches d'age dans une grille de 3 colonnes qui tombe exactement sur
   les tiers du viewBox (le SVG et la grille ont la meme largeur).

   Le trace prend la teinte de la mission par currentColor : poser
   .mission--<slug> sur la section suffit, la courbe suit. */
/* La marge basse detache la courbe des cartes qui la suivent : le dessin est
   une respiration, pas l'en-tete du bloc suivant. */
.courbe { margin: 16px 0 22px; }
.courbe__zone {
  background: var(--bg-card);
  border: 1px solid #222834;
  border-radius: var(--radius-md);
  padding: 14px 16px 12px;
  color: var(--mission, var(--brand-bright));   /* lu par currentColor */
}
.courbe__titre {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint); margin-bottom: 10px;
}
.courbe__zone svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Traits : non-scaling-stroke fige l'epaisseur en pixels ecran, sinon un
   trait de 3 devient 5 sur grand ecran et 1,5 sur telephone. */
.courbe__trace {
  fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.courbe__ref {
  fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}
.courbe__aire  { fill: currentColor; opacity: .20; }
.courbe__axe   { stroke: #2a3140; stroke-width: 2; vector-effect: non-scaling-stroke; }
.courbe__point { fill: currentColor; stroke: var(--bg-card); stroke-width: 3; vector-effect: non-scaling-stroke; }

/* Tranches d'age — 3 colonnes calees sur les tiers du dessin. */
.courbe__phases {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 6px; font-size: 11px; color: var(--text-faint); text-align: center;
}

/* Legende — en HTML, donc elle passe a la ligne au lieu de retrecir. */
.courbe__legende {
  display: flex; flex-wrap: wrap; gap: 7px 18px;
  margin-top: 12px; font-size: 12px; color: var(--text-muted);
}
.courbe__cle { display: inline-flex; align-items: center; gap: 8px; }
.courbe__trait {
  flex: none; width: 20px; height: 3px; border-radius: 2px;
  background: var(--mission, var(--brand-bright));
}
.courbe__trait--ref {
  height: 2px; border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--text-faint) 0 5px, transparent 5px 9px);
}
.courbe__trait--aire { height: 11px; border-radius: 2px; opacity: .20; }

/* ---- Schema d'englobement — N vignettes posees sur un socle unique ----
   Dit « cette mission-ci contient toutes les autres ». Chaque vignette porte
   son nom, et le socle le sien.

   ENTIEREMENT EN HTML, pas en SVG. C'est la consequence directe de la regle
   du composant .courbe (aucun texte dans un dessin) : des lors que les blocs
   doivent etre etiquetes, autant qu'ils cessent d'etre dessines. Le texte
   reste alors selectionnable, il reflue seul et ne retrecit jamais avec la
   fenetre. Seuls les traits de liaison sont decoratifs.

   Les teintes viennent des jetons de mission (section A.10) : le schema reste
   d'accord avec les vignettes du haut de page, sans rien redeclarer.
   S'utilise dans une enveloppe .courbe__zone, pour le cadre et le titre. */
.englobe__blocs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.englobe__bloc {
  background: var(--mission, var(--brand-bright));
  color: #0b0d12;                       /* texte sombre : lisible sur les 4 teintes */
  border-radius: var(--radius-md);
  padding: 15px 10px;
  text-align: center;
  font-size: 12.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.3;
  overflow-wrap: anywhere;              /* « Rémunération » ne doit jamais deborder */
}

/* Traits de liaison — purement decoratifs, une colonne par vignette. */
.englobe__liens { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; height: 26px; }
.englobe__liens span {
  width: 0; height: 100%; margin: 0 auto;
  border-left: 2px dashed var(--mission); opacity: .75;
}

.englobe__socle {
  background: var(--mission);
  color: #0b0d12;
  border-radius: var(--radius-md);
  padding: 15px 12px;
  text-align: center;
  font-size: 13px; font-weight: 800; line-height: 1.35;
}

/* Sous 620px, quatre colonnes deviennent illisibles : on passe en 2x2 et un
   seul trait central descend vers le socle. */
@media (max-width: 620px) {
  .englobe__blocs { grid-template-columns: repeat(2, 1fr); }
  .englobe__liens { grid-template-columns: 1fr; }
  .englobe__liens span:nth-child(n+2) { display: none; }
}

/* pied de page discret */
.desk-foot { margin-top: 40px; color: var(--text-faint); font-size: 11.5px; line-height: 1.6; }
.desk-foot b { color: var(--text-muted); font-weight: 600; }

/* ---------------- RESPONSIVE ---------------- */
.menu-toggle {
  display: none; position: fixed; top: 12px; left: 12px; z-index: 70;
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--brand-mid); background: var(--bg-card);
  color: var(--text-primary); align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 1040px) { .desk-grid--3, .desk-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  /* padding-top : le .menu-toggle est fixed et occupe 12→50px du haut ; sans
     cette reserve il recouvre le titre de la page. */
  .content { margin-left: 0; padding: 62px 18px 70px; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; width: 236px; }
  .sidebar.is-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.6); }
  .menu-toggle { display: inline-flex; }
}

/* ===== Titre de section — variante bureau (sans fond bleu) =====
   Surcharge LOCALE (n'affecte pas LCA_style_dark.css). Structure attendue :
   <div class="sec-title">
     <span class="sec-title__num">06</span>
     <span class="sec-title__name">Nom de la section</span>
     <span class="sec-title__desc">· explication secondaire</span>
   </div>
   Rendu : icône bleue carrée (angles arrondis) + nom + explication grise
   + ligne de séparation dessous. */
.sec-title {
  background: none;                       /* fond bleu supprimé */
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
  margin-bottom: 1.2rem;
  border-radius: 0;
  border-bottom: 1px solid #1f2530;       /* la ligne */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
/* Pastille du numéro — carré bleu à angles arrondis.
   Fond CLAIR (--brand-bright) et chiffre foncé : en --brand (#004793,
   bleu très sombre) sur le fond quasi noir du site, la pastille se
   fondait dans la page et le numéro devenait introuvable. C'est le
   même principe que partout ailleurs dans cette charte — le bleu de
   marque pour les fonds sur clair, le bleu clair dès qu'on est sur
   fond noir. */
.sec-title__num {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--accent-univers);
  color: #0b0d12;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 800;
}
/* Variante « mission » : le numero prend la teinte de la mission (section
   A.10), posee par la classe .mission--<slug> sur ce meme element. Sert a
   raccrocher la section a sa vignette du haut de page. */
.sec-title--mission .sec-title__num {
  background: var(--mission, var(--brand-bright));
  color: #0b0d12;
}

.sec-title__name { font-weight: 700; color: var(--text-primary); }  /* même police */
/* Variante : le nom de section prend la teinte de sa section. Opt-in, sinon
   TOUS les titres du site se coloreraient — <body> porte deja un univers. */
.sec-title--theme .sec-title__name { color: var(--accent-univers); }
.sec-title__desc {                         /* explication secondaire, grise + petite */
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
}

/* ===== Tableau — base =====
   Reprise a l'identique de la section 6 « Base » de LCA_bibliotheque.html
   (en-tete bleu de marque, lignes alternees, surbrillance au survol). La
   biblio porte ces regles dans son propre <style> ; elles sont portees ici
   pour que les pages du bureau en disposent via la feuille commune. */
/* Repris le 23/07/2026. Trois defauts cumules : un bandeau d'en-tete bleu plein
   qui pesait plus lourd que les chiffres, des rayures alternees qui hachaient la
   lecture, un survol bleu-gris qui repeignait la donnee elle-meme. Le tableau
   redevient un document : un filet, de l'air, et la donnee comme seul element
   qui porte. On lit une colonne de chiffres du haut vers le bas — tout ce qui
   est horizontal et colore gene ce mouvement, d'ou le filet unique sous
   l'en-tete, seule couleur du tableau. */
.tbl-wrap  { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid #232833; background: var(--bg-white); margin-bottom: 0.75rem; }
table      { width: 100%; border-collapse: collapse; font-size: 12px; }
thead tr th { background: transparent; color: var(--text-faint); padding: 11px 10px 8px; text-align: left; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; border-bottom: 1px solid var(--accent-univers); }
tbody tr:nth-child(odd)  td { background: transparent; }
tbody tr:nth-child(even) td { background: transparent; }
tbody tr:hover td          { background: #171b22; }   /* ligne selectionnee : elle s'eclaire, elle ne se teinte pas */
tbody tr:last-child td     { border-bottom: 0; }
td { padding: 8px 10px; color: var(--text-primary); border-bottom: 1px solid #1a1e27; vertical-align: top; font-size: 12px; }

/* Ligne de total — fond legerement eclairci, filet superieur a l'accent
   d'univers : la synthese se distingue des lignes de detail sans crier.
   Ajoute le 27/07/2026 (simulateur cotisations). */
table tr.tbl-total td,
tbody tr.tbl-total:hover td { background: #1e222b; border-top: 1px solid var(--accent-univers); font-weight: 800; }

/* Lien dans une cellule — le bleu navigateur par defaut est illisible sur fond
   sombre : gris clair souligne, accent au survol (meme logique que .tbl-source a).
   Ajoute le 27/07/2026 (colonne « le droit en face » des fiches metier). */
table td a { color: var(--text-secondary); text-decoration: underline; }
table td a:hover { color: var(--brand-bright); }

/* Pictogramme au trait (include admin/includes/pictos.php) — taille du texte,
   couleur heritee du libelle qu'il accompagne, jamais seul (le libelle porte
   le sens). Valide le 27/07/2026 ; planche de reference dans la bibliotheque
   (section Pictos) : 5 postes (maladie, incapacite, invalidite, deces,
   retraite) + 1 par metier. */
.picto { width: 17px; height: 17px; vertical-align: -3.5px; margin-right: 7px; }
.picto--titre { width: 24px; height: 24px; vertical-align: -4px; margin-right: 10px; }  /* pour un h1 (lca_picto_titre) */

/* ===== Tableau — variante triable =====
   Le CSS ne fait que rendre l'affordance visible : curseur, fleche, focus. Le
   tri lui-meme est en JavaScript, dans la page qui en a besoin — chaque <th>
   triable porte data-sort="num" ou "txt", chaque <td> porte data-v (la valeur a
   trier, jamais le texte affiche : il contient des virgules decimales, des
   mentions et du balisage).

   Sans JavaScript, il ne reste que les fleches : le tableau doit donc etre
   servi deja trie dans un ordre qui a du sens. */
.tbl-sort th[data-sort] { cursor: pointer; user-select: none; }
.tbl-sort th[data-sort]:hover { color: var(--text-secondary); }
.tbl-sort th[data-sort]::after { content: '\2195'; margin-left: 5px; opacity: .3; }
.tbl-sort th[aria-sort="ascending"]::after  { content: '\2191'; opacity: 1; }
.tbl-sort th[aria-sort="descending"]::after { content: '\2193'; opacity: 1; }
.tbl-sort th[data-sort]:focus-visible { outline: 2px solid var(--accent-univers); outline-offset: -2px; }

/* ===== Tableau — colonne heros =====
   La colonne qui porte la conclusion (une note globale, un total) sur un
   tableau ordinaire. Meme langage que .tbl-compare plus bas, et pour la meme
   raison : une bande verticale COLOREE se lit sur toute la hauteur du tableau
   et ecrase le reste. La mise en avant passe par la LUMINOSITE — colonne plus
   claire, texte blanc et plus gros. Elle tient sous les onze teintes.

   Selecteurs longs volontairement : les fonds doivent battre le survol de
   ligne, sans !important. .tbl-compare reste plus specifique et garde sa
   propre version (centree, plus etroite). */
table th.is-hero {
  background: #2a3040;
  color: var(--text-primary);
}
table th.is-hero,
table td.is-hero {
  border-left: 1px solid #3a4250;
  border-right: 1px solid #3a4250;
}
table tbody tr td.is-hero,
table tbody tr:hover td.is-hero {
  background: #1e222b;
  color: var(--text-primary);
  font-weight: 800;
  font-size: 13.5px;
}
table tbody tr:last-child td.is-hero { border-bottom: 1px solid #3a4250; }

/* ===== Tableau — variante comparatif =====
   Une rubrique par ligne, une offre par colonne, la valeur est un mot (jamais
   une pastille seule : le sens doit rester lisible sans la couleur). La
   colonne LCA est la colonne « heros » : bandeau continu --brand-light borde
   de --brand-bright, qui traverse l'en-tete et toutes les lignes. */
.tbl-compare { table-layout: fixed; }
.tbl-compare th, .tbl-compare td { text-align: center; }
.tbl-compare th:first-child, .tbl-compare td:first-child { text-align: left; width: 34%; }

/* la rubrique est un th (en-tete de ligne, pour les lecteurs d'ecran) : la
   base ne peint que les td, ces regles lui rendent la meme apparence. */
.tbl-compare__rub {
  padding: 7px 10px;
  border-bottom: var(--border);
  vertical-align: top;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.tbl-compare tbody tr:nth-child(odd)  .tbl-compare__rub { background: transparent; }
.tbl-compare tbody tr:nth-child(even) .tbl-compare__rub { background: transparent; }
.tbl-compare tbody tr:hover           .tbl-compare__rub { background: #171b22; }
.tbl-compare__rub { border-bottom: 1px solid #1a1e27; }

/* colonne heros — les fonds doivent battre les rayures alternees et le survol,
   d'ou les selecteurs longs plutot qu'un !important */
/* La colonne « heros » disait « nous » en bleu vif. Le sens est juste, le moyen
   ne l'etait pas : elle se lit sur toute la hauteur du tableau, et une bande
   verticale coloree ecrase tout le reste. La mise en avant passe donc par la
   LUMINOSITE — colonne plus claire, texte blanc, concurrentes en gris. Elle
   fonctionne a l'identique sous les onze teintes, et ne jure avec aucune. */
.tbl-compare th.is-hero {
  background: #2a3040;
  color: var(--text-primary);
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
}
.tbl-compare th.is-hero,
.tbl-compare td.is-hero {
  border-left: 1px solid #3a4250;
  border-right: 1px solid #3a4250;
}
.tbl-compare tbody tr:nth-child(odd) td.is-hero,
.tbl-compare tbody tr:nth-child(even) td.is-hero,
.tbl-compare tbody tr:hover td.is-hero {
  background: #1e222b;
  color: var(--text-primary);
  font-weight: 800;
  font-size: 12.5px;
}
.tbl-compare tbody tr:last-child td.is-hero { border-bottom: 1px solid #3a4250; }
.tbl-compare__col2 { display: block; }     /* seconde ligne d'un en-tete de colonne */

/* Valeurs concurrentes : grises, jamais de rouge — le contraste avec le blanc
   de la colonne heros suffit a la faire ressortir. */
.tbl-compare tbody td:not(.is-hero) { color: var(--text-muted); }

.tbl-compare__note {                       /* precision sous la valeur (moyenne, unite...) */
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-faint);
}
.tbl-compare td.is-hero .tbl-compare__note { color: var(--text-muted); }

/* Note de sources sous un tableau — chiffres opposables : l'origine, la date
   et le lien doivent rester lisibles et verifiables par le lecteur. */
.tbl-source {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
}
.tbl-source a { color: var(--text-muted); text-decoration: underline; }
.tbl-source a:hover { color: var(--brand-bright); }

/* Responsive — sous 720px le tableau se replie en une carte par rubrique :
   l'en-tete disparait et chaque cellule porte son libelle de colonne via
   data-col. Un scroll horizontal a 4 colonnes serait illisible sur mobile. */
@media (max-width: 720px) {
  .tbl-wrap--compare { border: none; border-radius: 0; overflow-x: visible; }
  .tbl-compare, .tbl-compare tbody, .tbl-compare tr,
  .tbl-compare td, .tbl-compare__rub { display: block; }
  .tbl-compare thead { display: none; }
  /* Empile en pleine largeur. La regle de bureau qui fixe la 1re colonne a
     34% doit etre annulee ici sur th ET td : sans cela le bandeau bleu de la
     rubrique s'arrete a 34% et laisse le fond noir apparaitre a sa droite. */
  .tbl-compare th:first-child,
  .tbl-compare td:first-child,
  .tbl-compare td { width: auto; }
  .tbl-compare tr {
    border: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 10px;
  }
  /* Libelle a gauche, valeur a droite. Les deux doivent pouvoir retrecir et
     passer a la ligne : sans min-width:0 un flex-item ne descend pas sous sa
     largeur min-content, et les libelles longs poussent la carte hors de
     l'ecran (valeurs coupees a droite). */
  .tbl-compare td {
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px 14px;
    padding: 9px 12px;
  }
  .tbl-compare td::before {                /* libelle de colonne, repris de data-col */
    content: attr(data-col);
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    color: var(--text-faint);
    font-weight: 700;
    font-size: 11px;
  }
  .tbl-compare td > span { min-width: 0; overflow-wrap: anywhere; }
  /* la rubrique devient l'en-tete de carte — fond bleu plein, sur toutes les
     lignes, d'ou la surcharge des rayures alternees et du survol */
  .tbl-compare tbody tr:nth-child(odd)  .tbl-compare__rub,
  .tbl-compare tbody tr:nth-child(even) .tbl-compare__rub,
  .tbl-compare tbody tr:hover           .tbl-compare__rub {
    background: #1e222b;
    color: var(--text-primary);
    font-weight: 800;
    font-size: 12.5px;
    text-align: left;
    border-bottom: none;
  }
  .tbl-compare tbody tr:nth-child(odd) td.is-hero,
  .tbl-compare tbody tr:nth-child(even) td.is-hero,
  .tbl-compare tbody tr:hover td.is-hero {
    border-left: 3px solid #3a4250;
    border-right: none;
    border-bottom: 1px solid #232833;
  }
}

/* ===== Tableau — variante repliable (mobile) =====
   Meme mecanique que le repli mobile de .tbl-compare, pour un tableau
   ordinaire : sous 720 px chaque ligne devient une carte, la premiere
   cellule en devient l'en-tete, les autres affichent leur libelle de
   colonne repris de data-col. Ajoute le 27/07/2026 (fiches metier). */
@media (max-width: 720px) {
  .tbl-wrap--fold { border: none; border-radius: 0; overflow-x: visible; background: transparent; }
  .tbl-fold, .tbl-fold tbody, .tbl-fold tr, .tbl-fold td { display: block; }
  .tbl-fold thead { display: none; }
  .tbl-fold tr {
    border: var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 10px;
  }
  .tbl-fold tbody tr:hover td { background: transparent; }
  .tbl-fold td {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px 14px;
    padding: 9px 12px;
    border-bottom: 1px solid #1a1e27;
  }
  .tbl-fold td::before {                     /* libelle de colonne, repris de data-col */
    content: attr(data-col);
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    color: var(--text-faint);
    font-weight: 700;
    font-size: 11px;
  }
  .tbl-fold td > span { min-width: 0; overflow-wrap: anywhere; text-align: right; }
  /* la premiere cellule devient l'en-tete de la carte */
  .tbl-fold td:first-child,
  .tbl-fold tbody tr:hover td:first-child {
    display: block;
    text-align: left;
    background: #1e222b;
    font-size: 12.5px;
  }
  .tbl-fold td:first-child::before { content: none; }
  .tbl-fold tr:last-child td:last-child { border-bottom: 0; }
}

/* ================================================================
   IMPRESSION — pages imprimables (Ctrl+P → PDF)
   Ajoute le 27/07/2026 pour les fiches metier (presentation complete),
   vaut pour toute page du systeme B qu'on imprime. La charte ecran est
   sombre : a l'impression on passe en noir sur blanc, on masque la
   navigation, et les tableaux ne se coupent pas en plein milieu.
   Pas un composant visuel : volontairement absent de la bibliotheque.
   Regle inchangee : aucune regle print dans une page.
   ================================================================ */
@media print {
  .topbar, .menu-toggle, .sidebar, .breadcrumb,
  .content-actions, .audio-btn, .btn { display: none !important; }
  body { background: #fff !important; color: #111 !important; }
  .app { display: block !important; }
  .content { margin: 0 !important; padding: 0 !important; }
  .content__inner { max-width: none !important; padding: 0 !important; }
  .page-head__title, .sec-title__num, .sec-title__name, .desk-card__title,
  h1, h2, h3, strong { color: #000 !important; }
  .page-head__sub, .sec-title__desc, .desk-card__body, p, li, em { color: #222 !important; }
  .desk-section, .desk-card, .insight, .tbl-wrap, tr { break-inside: avoid; }
  .desk-card, .insight, .tbl-wrap {
    background: #fff !important;
    border-color: #bbb !important;
    box-shadow: none !important;
  }
  table { width: 100%; }
  thead { display: table-header-group; }  /* en-tetes de tableau repetes a chaque page */
  th, td { background: #fff !important; color: #222 !important; border-color: #ccc !important; }
  a { color: #222 !important; text-decoration: none !important; }
  .tbl-source, .desk-foot { color: #555 !important; }
  /* camembert : les parts (fill SVG) s'impriment ; le contour passe au blanc
     du papier, les textes du centre a l'encre noire, les pastilles de legende
     gardent au moins un lisere. */
  .camembert__part { stroke: #fff !important; }
  .camembert__total { fill: #111 !important; }
  .camembert__soustitre { fill: #555 !important; }
  .camembert__puce { border: 1px solid #999; }
  .zone-notes { border-color: #999 !important; }
  .colonne__seg { border: 1px solid #999; color: #111 !important; }
  @page { margin: 14mm 12mm; }
}