/* apps/vad/static/vad.css
   -------------------------
   Charte A Free Lunch de l'app vente à découvert.

   SOURCE DE LA CHARTE : les dossiers AFL déjà publiés
   (front_theme_WP/inc/afl/defaillances-2026/fr.html, presse-2026/*), qui portent les
   tokens officiels : corail #FF5A5F, fonds rose #FFF5F5, texte #1a1a1a, Inter, titres
   en 800 à interlettrage serré. On REPREND ces pages, on n'invente rien (règle zéro
   CODING_STANDARDS §5.5 : chercher le motif avant d'en créer un. Première version de ce
   fichier : un marine sorti d'une config de dashboard, jamais publié nulle part).

   Les RÈGLES de mise en page des composants restent celles de l'annuaire d'origine
   (mêmes grilles) : seul l'habillage est AFL. Classes `vad-` (génériques) et `vd-`
   (section) : plus aucune classe `ann-*`. Le CHROME (header, footer, container,
   reset) vient du layout partagé afl/base.html : ce fichier ne stylise QUE les
   composants de contenu.

   Hausse = PLUS de pression vendeuse → corail foncé ; baisse → vert. C'est la lecture
   du SUJET (une valeur plus shortée est sous tension), pas la convention du cours. */

:root {
  /* La palette (--corail, --corail-dark, --rose, --rose-deep, --noir, --gris,
     --gris-clair, --gris-bord) et les polices (--font-heading, --font-body)
     sont celles d'A Free Lunch, posées par `afl/base.html`. Ce fichier les
     recopiait, valeurs identiques, pour toute la page (retiré le 12/10/2026,
     `test_composants_communs.py`). Reste la nuance propre à l'outil. */
  --corail-clair: #FF7A7F;
  /* Alias consommés par les composants ci-dessous. */
  /* Liens et actifs de l'outil : corail foncé, lisible sur blanc.
     🚨 SOUS SON NOM À LUI, JAMAIS `--color-primary` (03/10/2026). Ce fichier
     redéfinissait `--color-primary`, la couleur de MARQUE que le bandeau commun
     lit (`_shared/static/css/site-marque.css`, `.site-header`). L'outil sortait
     donc avec un bandeau #E04045 quand le site d'A Free Lunch porte #FF5A5F, et
     le carré du logo, fondu dans le corail du site, ressortait sur le foncé.
     Benjamin : « pourquoi c'est pas le même branding ». Verrouillé par
     `backend/tests/test_vad_couleur_de_marque.py`. */
  --vad-accent: var(--corail-dark);
  --afl-fonce: var(--corail);
  --afl-fond: var(--rose);
  --afl-fond-2: var(--rose-deep);
  --afl-bordure: var(--gris-bord);
  --afl-texte: var(--noir);
  --afl-gris: var(--gris);
}

/* ── Composants (extraits de annuaire.css, habillage AFL) ─────────────────── */
/* ── Cartes ── */
/* Carte, tuile de chiffre, pastille : le jeu de composants commun
   (`composants.css`, `m-carte`, `m-stat`, `m-pastille`), aux valeurs d'A Free
   Lunch posées dans `afl/base.html` (lot 5 du cadre unique, 12/10/2026). */
.m-carte + .m-carte { margin-top: 1.25rem; }
/* ── Titres ── */
.vad-h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--noir); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.35rem; }
.vad-h2 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--noir); letter-spacing: -0.01em; margin: 0 0 1rem; }
.vad-lede { font-size: 1.1rem; color: #555; margin: 0; }
.vad-claim-box .vad-h2, .vad-claim-box p { color: var(--color-text-on-primary); }
.vad-liens .vad-h2 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--noir); letter-spacing: -0.01em; margin: 0 0 1rem; }
/* ── Pagination des listings ── */
.vad-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.vad-pagination__btn {
  display: inline-block; padding: 0.5rem 1.1rem; border: 1px solid var(--afl-bordure);
  border-radius: 8px; font-weight: 600; color: var(--vad-accent); background: #fff;
}
.vad-pagination__btn:hover { border-color: var(--vad-accent); background: var(--afl-fond); text-decoration: none; }
.vad-pagination__btn--off { color: var(--afl-gris); opacity: 0.5; pointer-events: none; }
.vad-pagination__status { font-size: 0.9rem; color: var(--afl-gris); }
/* ── Ventes à découvert AMF - palmarès agrégé (/ventes-a-decouvert-amf/) ──── */
/* Une ligne = une société shortée (ou un fonds), avec le bloc des contreparties dessous.
   Pas un <table> : la ligne est multi-niveaux (titre + barre + liste de fonds), une pile
   de blocs tient mieux en mobile qu'une cellule qui déborde. Palette ambre (#b45309) -
   déjà celle du badge « ● Active » de la page : c'est la couleur « position ouverte »
   de cette donnée, pas le vert de marque (qui signale l'agrément dans l'annuaire). */
.vd-row { border-bottom: 1px solid var(--afl-bordure); padding: 0.9rem 0; }
.vd-row:last-child { border-bottom: none; }
.vd-row__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.vd-rank { font-family: var(--font-heading); font-weight: 700; color: var(--afl-gris); min-width: 1.9rem; font-size: 0.95rem; }
.vd-nom { font-weight: 700; color: var(--vad-accent); font-size: 1.02rem; }
.vd-isin { font-size: 0.78rem; color: var(--afl-gris); font-weight: 400; }
.vd-pct { margin-left: auto; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--corail-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-sub { font-size: 0.82rem; color: var(--afl-gris); }
/* Barre : COMPARAISON entre les lignes affichées (échelle relative au 1er du classement),
   PAS une jauge 0-100 % du capital - un short de 8 % remplirait sinon 8 px. */
.vd-bar { height: 7px; border-radius: 999px; background: var(--afl-fond-2); margin: 0.45rem 0 0.5rem; overflow: hidden; }
.vd-bar__fill { height: 100%; border-radius: 999px; background: var(--corail); }
.vd-fonds { font-size: 0.9rem; color: var(--afl-texte); line-height: 1.6; }
.vd-fonds b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-more { margin-top: 0.35rem; }
.vd-more summary { cursor: pointer; color: var(--vad-accent); font-weight: 600; font-size: 0.85rem; list-style: none; }
.vd-more summary::-webkit-details-marker { display: none; }
.vd-detail { margin: 0.5rem 0 0; padding: 0.6rem 0.9rem 0.6rem 1.8rem; background: var(--afl-fond); border-radius: 8px; font-size: 0.86rem; }
.vd-detail li { margin-bottom: 0.2rem; }
/* Les tableaux sont `m-tableau` (jeu commun, `apps/_shared/static/css/composants.css`)
   aux valeurs d'A Free Lunch (`afl/base.html`), depuis le 12/10/2026 (lot 5e du cadre
   unique) ; les colonnes de chiffres portent `num`, qui aligne aussi leur en-tête sur
   les données. `vd-table` reste sur la balise : c'est la prise du tri côté navigateur
   (`vad.js`) et des règles d'en-tête triable ci-dessous. */
/* En-tête de colonne triable du journal. Le lien occupe TOUTE la cellule (block) : sur un
   tableau dense, viser trois mots au pixel près est le meilleur moyen de rater la cible. */
.vd-th { display: block; color: inherit; font-weight: inherit; text-decoration: none; white-space: nowrap; }
.vd-th:hover { color: var(--vad-accent); text-decoration: underline; }
.vd-th--on { color: #b45309; }
/* Renvois de fin de ligne (« tout l'historique de ce fonds → ») - discrets par défaut :
   ce sont des sorties de secours, pas l'information principale de la ligne. */
.vd-liens { margin-top: 0.4rem; font-size: 0.82rem; }
.vd-liens a { color: var(--afl-gris); }
.vd-liens a:hover { color: var(--vad-accent); }
/* Filtres du journal (année, seuil) - une ligne qui s'empile en mobile. */
.vd-filtres { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.vd-filtres label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--afl-gris); text-transform: uppercase; letter-spacing: 0.03em; }
.vd-filtres select { padding: 0.5rem 0.7rem; border: 1px solid var(--afl-bordure); border-radius: 8px; font-size: 0.92rem; background: #fff; color: var(--afl-texte); }
/* Vue Historique : deux colonnes de records côte à côte, empilées en mobile. */
.vd-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
/* HIÉRARCHIE (Benjamin, 10/08/2026 : « on est sûr que le titre a la bonne taille ? »).
   Non : le H3 était à 0,95rem, soit PLUS PETIT que le corps de texte (1rem), et les H2
   portaient un font-size inline qui écrasait le 1,3rem ci-dessus. Un titre doit se voir
   comme un titre, à l'écran comme dans la structure lue par Google. */
.vd-h3 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; line-height: 1.3;
         margin: 0 0 0.6rem; color: var(--noir); }
.vd-records { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.5; }
.vd-records li { margin-bottom: 0.5rem; }
.vd-records .vd-sub { display: block; }
/* Chronologie année par année. Deux barres empilées par an (prises / débouclées) plutôt que
   deux graphiques : l'oeil doit pouvoir comparer les deux flux d'un même millésime. */
.vd-legende { display: flex; gap: 1.25rem; font-size: 0.82rem; color: var(--afl-gris); margin-bottom: 0.6rem; }
.vd-puce { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.3rem; vertical-align: baseline; }
.vd-puce--ouv { background: #b45309; }
.vd-puce--fer { background: var(--afl-bordure); }
.vd-chrono { display: flex; align-items: center; gap: 0.75rem; padding: 0.2rem 0; position: relative; }
/* Détail au survol, INSTANTANÉ et en CSS pur. L'infobulle native `title` a été
   essayée d'abord : le navigateur attend environ une seconde de survol immobile
   avant de l'afficher, donc elle passe pour inexistante (constaté en prod le
   10/08/2026). Zéro JS ici non plus. */
.vd-chrono::after { content: attr(data-detail); position: absolute; right: 0; bottom: 100%;
                    background: #1a1a1a; color: #fff; font-size: 0.78rem; line-height: 1.3;
                    padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 5;
                    opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.vd-chrono:hover::after, .vd-chrono:focus-within::after { opacity: 1; }
.vd-chrono:hover { background: rgba(255,90,95,0.06); border-radius: 6px; }
.vd-chrono__an { min-width: 3rem; font-size: 0.85rem; color: var(--afl-gris); font-variant-numeric: tabular-nums; }
.vd-chrono__barres { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vd-chrono__b { height: 8px; border-radius: 999px; min-width: 2px; }
.vd-chrono__b--ouv { background: #b45309; }
.vd-chrono__b--fer { background: var(--afl-bordure); }
/* Etat d'une position sur les fiches : en cours (ambre, la couleur « position ouverte »
   de cette donnee) ou refermee (gris). Une pastille, pas une phrase : la ligne porte deja
   les dates. */
.vd-etat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--afl-gris); background: var(--afl-fond-2); border-radius: 999px; padding: 0.12rem 0.55rem; }
.vd-etat--on { color: #fff; background: #b45309; }
/* Tableau des declarations d'une position, dans la ligne depliable : plus dense que le
   tableau principal, c'est de la matiere brute consultee ponctuellement. */
/* Le tableau du détail des déclarations, resserré : les valeurs du composant, réglées
   sur la classe de l'outil (jamais au `:root`). */
.vd-table--serree {
  --m-tableau-taille: 0.82rem;
  --m-tableau-entete-marge: 0.35rem 0.5rem;
  --m-tableau-entete-trait: 1px solid var(--afl-bordure);
  --m-tableau-cellule-marge: 0.3rem 0.5rem;
  --m-tableau-gouttiere: 0.5rem;
  margin-top: 0.5rem;
}
.vd-chrono__n { min-width: 5rem; text-align: right; font-size: 0.8rem; color: var(--afl-gris); font-variant-numeric: tabular-nums; }
/* ── Ventes à découvert : courbe, podiums d'évolution, records ──────────────
   POURQUOI ici et pas en <style> dans le gabarit : la page est servie en AJAX partiel
   (annuaire-vd.js remplace #vd-resultats). Un <style> posé DANS ce bloc disparaîtrait
   au premier échange, et la page se retrouverait dépouillée sans erreur visible. */
.vd-courbe { margin: 0 0 0.5rem; }
.vd-courbe svg { width: 100%; height: 220px; display: block; }
.vd-courbe__grille { stroke: var(--afl-bordure, #d8e0d8); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vd-courbe__ligne { fill: none; stroke: var(--corail); stroke-width: 2;
                        vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.vd-courbe__an { font-size: 20px; fill: var(--afl-gris, #777); }
.vd-courbe__reperes { display: flex; justify-content: space-between; flex-wrap: wrap;
                          gap: 0.5rem; font-size: 0.82rem; color: var(--afl-gris, #777); }
.vd-podium { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.vd-podium li { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
                    padding: 0.4rem 0; border-bottom: 1px solid var(--afl-bordure, #e6ebe6); }
.vd-podium li:last-child { border-bottom: 0; }
.vd-podium__nom { flex: 1; min-width: 140px; font-weight: 600; }
.vd-podium__detail { font-size: 0.8rem; color: var(--afl-gris, #777); white-space: nowrap; }
.vd-podium__delta, .vd-evol { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
/* Hausse = plus de pression vendeuse. Rouge/orangé côté hausse, vert côté baisse : c'est
   la lecture du sujet (une valeur davantage shortée est une valeur sous tension), pas la
   convention boursière du cours. Le libellé de colonne le dit, la couleur ne porte donc
   jamais l'information seule. */
.vd-podium__delta--hausse, .vd-evol--hausse { color: var(--corail-dark); }
.vd-podium__delta--baisse, .vd-evol--baisse { color: #16a34a; }
.vd-evol { font-size: 0.82rem; margin-left: 0.5rem; }
.vd-records { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.vd-records li { padding: 0.3rem 0; }
.vd-methode { font-size: 0.88rem; color: var(--afl-gris, #777); margin-top: 1.75rem;
                  padding-top: 0.9rem; border-top: 1px solid var(--afl-bordure, #e6ebe6); }
.vd-courbe__cible { fill: transparent; }
.vd-courbe__cible:hover { fill: rgba(255,90,95,0.10); }
/* PAS de max-width ici : « pourquoi tout n'est pas sur la même largeur PARTOUT ? »
   (Benjamin, 10/08/2026). Cet encadré s'arrêtait à 760px au milieu d'une page à
   1200px, ce qui le faisait lire comme un élément flottant et pas comme le pied
   de la page. La largeur unique, c'est le conteneur. */
.vd-apropos { border: 1px solid var(--afl-bordure, #d8e0d8); border-radius: 8px;
                  padding: 0.9rem 1.25rem; margin-top: 2rem; font-size: 0.85rem;
                  color: var(--afl-gris, #666); }
.vd-apropos strong { color: inherit; }
@media (max-width: 640px) {
  .vad-pagination { gap: 0.6rem; }
  .vad-pagination__btn { padding: 0.5rem 0.8rem; }
  .vad-h1 { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; color: var(--noir); line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 0.35rem; }
}
@media (max-width: 640px) {
  /* Le % passe TOUJOURS à la ligne : sur un nom court il restait collé au titre, sur un nom
     long il passait dessous - deux alignements différents d'une ligne à l'autre. */
  .vd-pct { margin-left: 0; font-size: 1.05rem; flex-basis: 100%; }
  .vd-rank { min-width: 1.4rem; }
}


/* ── Discipline de couleur (Benjamin, 10/08/2026 : « tout est rouge, on ne sait
   pas ce qui se clique ») : le corail est réservé aux LIENS et aux états actifs.
   Chiffres, titres de sections et résumés dépliables sont NOIRS ; un dépliable
   se reconnaît à son triangle natif, pas à sa couleur. Les graphiques (barres,
   courbe, frise) restent corail : ce sont des dessins, pas des libellés. ── */
body { color: #1a1a1a; }
/* LA COULEUR DES LIENS EST CELLE DE LA MARQUE, PAS UNE COPIE (10/11/2026, revue
   accessibilité) : `#E04045` était écrit ici en dur. Si Benjamin fonce le corail
   pour le contraste (décision de marque, `afl/base.html`), les liens doivent
   suivre sans qu'on pense à cette feuille. Même teinte qu'avant tant qu'il n'a
   pas tranché. */
a { color: var(--corail-dark, #E04045); }
/* Un lien DANS une phrase se voit sans sa couleur (critère WCAG 1.4.1, revue du
   10/11/2026) : contre le gris du texte, le corail ne ressortait qu'à 1,4:1. */
main#contenu p a:not(.m-bouton) { text-decoration: underline; text-underline-offset: 0.15em; }
.vd-pct { color: #1a1a1a; }
.vd-h3, .vad-h2, .vad-h1 { color: #1a1a1a; }
.vd-more summary { color: #1a1a1a; cursor: pointer; }
.vd-more summary:hover { color: var(--corail-dark, #E04045); }
.vd-etat--on { color: var(--corail-dark, #E04045); }
.vd-chrono__b--ouv { background: #FF5A5F; }
.vd-chrono__b--fer { background: #FFE5E5; }
.vd-puce--ouv { background: #FF5A5F; }
.vd-puce--fer { background: #FFE5E5; }

/* Tableaux triables : l'en-tête est un contrôle, il l'affiche. */
.vd-table th { cursor: pointer; user-select: none; white-space: nowrap; }
.vd-table th[aria-sort]::after { content: " ▾"; color: var(--corail-dark, #E04045); }
.vd-table th[aria-sort="ascending"]::after { content: " ▴"; }
/* L'unité sous le libellé de colonne : en bloc, sinon le `white-space: nowrap`
   ci-dessus la garde sur la même ligne et l'en-tête devient interminable. */
.vd-th-sub { display: block; font-weight: 400; font-size: 0.75rem; color: var(--afl-gris);
             text-transform: none; letter-spacing: 0; }

/* ── Fraîcheur et note de lecture (Benjamin, 10/08/2026) ──────────────────────
   La date de la donnée se lit EN HAUT, dans le cartouche, avant les chiffres
   qu'elle date. La note de lecture, elle, était en gris minuscule sous quatre
   chiffres de 2rem : personne ne la voyait. Elle devient un encadré posé sur le
   rose de la marque, à la largeur du texte, sans devenir un pavé. */
.vd-maj { font-size: 0.78rem; color: var(--afl-gris); margin: 0.6rem 0 0;
          text-transform: uppercase; letter-spacing: 0.06em; }
.vd-note-lecture { background: var(--rose, #FFF5F5); border-left: 3px solid var(--corail, #FF5A5F);
                   border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; margin: 0 0 1.75rem;
                   font-size: 0.88rem; line-height: 1.55; color: #444; }
.vd-note-lecture strong { color: #1a1a1a; }

/* ── Bandeau inscription newsletter AFL (_nl_form.html) ───────────────────────
   Maquette v3 VALIDÉE le 25/08/2026 : bandeau compact ~64px pleine largeur du
   conteneur, texte à gauche (kicker + promesse + réassurance), champs à droite.
   Champs/bouton : style du formulaire WP (bordure 2px #ddd, rayon 8, corail),
   en padding réduit. Le honeypot .vd-nl__hp est caché en style INLINE dans le
   gabarit : ne pas compter sur ce fichier pour ça (cache CSS périmé, vécu). */
.vd-nl { background: var(--rose); border-radius: 8px; padding: 12px 16px; margin: 14px 0;
         display: flex; align-items: center; justify-content: space-between;
         gap: 14px; flex-wrap: wrap; }
.vd-nl__txt p { margin: 0; font-size: 0.95rem; color: var(--noir); }
.vd-nl__txt p strong { color: var(--corail-dark); text-transform: uppercase;
                       font-size: 0.78rem; letter-spacing: 0.06em; margin-right: 6px; }
.vd-nl__txt small { display: block; margin-top: 2px; font-size: 0.8rem; color: #8a8a8a; }
.vd-nl__form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0; }
/* PIÈGE : `display:flex` ci-dessus écrase l'attribut hidden (le display:none du
   navigateur perd contre une règle d'auteur). Sans cette ligne, le formulaire
   resterait affiché après l'envoi alors que vad.js pose form.hidden. Attrapé
   au screenshot du /verify, jamais en lecture de code. */
.vd-nl__form[hidden] { display: none; }
.vd-nl__input { padding: 9px 12px; font-size: 0.92rem; font-family: inherit;
                border: 2px solid #ddd; border-radius: 8px; outline: none;
                width: 210px; transition: border-color 0.2s; }
.vd-nl__input:focus { border-color: var(--corail); }
.vd-nl__select { padding: 9px 10px; font-size: 0.92rem; font-family: inherit;
                 border: 2px solid #ddd; border-radius: 8px; background: #fff;
                 outline: none; cursor: pointer; }
.vd-nl__select:focus { border-color: var(--corail); }
.vd-nl__bouton { padding: 9px 16px; font-size: 0.92rem; font-weight: 600;
                 font-family: inherit; color: #fff; background: var(--corail);
                 border: none; border-radius: 8px; cursor: pointer;
                 white-space: nowrap; transition: opacity 0.2s; }
.vd-nl__bouton:hover { opacity: 0.9; }
.vd-nl__bouton:disabled { opacity: 0.6; cursor: default; }
/* Message d'issue : succès = il REMPLACE le formulaire (vad.js le masque),
   erreur = il s'affiche sous le formulaire qui reste utilisable. */
.vd-nl__msg { margin: 0; font-size: 0.95rem; flex-basis: auto; }
.vd-nl__msg--ok { color: #085229; }
.vd-nl__msg--ko { color: var(--corail-dark); flex-basis: 100%; }
/* Repli du honeypot si le CSS charge (l'inline du gabarit fait déjà le travail). */
.vd-nl__hp { position: absolute; left: -9999px; }
@media (max-width: 700px) {
  .vd-nl { display: block; }
  .vd-nl__form { margin-top: 10px; }
  .vd-nl__input, .vd-nl__select, .vd-nl__bouton { width: 100%; }
  .vd-nl__msg { margin-top: 8px; display: block; }
}

/* ── Cartouche de page : bandeau rose pleine largeur sous l'en-tête, porteur du
   titre (idée de Benjamin, 10/08/2026 : le pâle sert à poser le titre, comme le
   hero du site). Vivait dans `afl/base.html` ; il n'est posé que par les pages
   de cet outil, il vit donc avec elles depuis le cadre unique (11/10/2026). ── */
.page-cartouche { background: var(--rose); padding: 30px 0 34px; margin-bottom: 32px; }
.page-cartouche h1 { margin: 0 0 6px; }
.page-cartouche .vad-lede { margin: 0; }

/* Bouton « Suivre cette société » : depuis le 05/11/2026 il est DANS l'en-tête
   de la fiche (`m-entete` et `m-suivre--entete`, `_shared/static/css/composants.css`),
   plus en carte sous la note de lecture : aucune règle propre au site. */

/* ── Pays étrangers (routers/monde.py, maquette validée le 10/11/2026) ──────────
   Les tableaux sont le composant commun `m-tableau` ; ces règles ne font que
   l'empiler sur téléphone : chaque ligne devient une carte (le nom et le chiffre
   en tête, le reste dessous), sans défilement horizontal. */
.vd-monde-groupe { margin: 0 0 2rem; }
.vd-monde-compte { font-size: 0.8rem; font-weight: 600; color: var(--afl-gris); margin-left: 0.4rem; }
.vd-monde-chapo { font-size: 0.9rem; color: var(--afl-gris); margin: 0 0 0.75rem; }
.vd-pays-detail { display: block; font-size: 0.8rem; color: var(--afl-gris); font-weight: 400; margin-top: 2px; }
.vd-pays-stats { justify-content: flex-start; margin: 0 0 1.75rem; }
.vd-pays-liens { margin: 1rem 0 0; font-weight: 700; }
.vd-avis { border: 1px solid var(--rose-deep); background: var(--rose); padding: 12px 16px;
           border-radius: 8px; margin: 0 0 1.5rem; max-width: 760px; }
.vd-preuve { margin-top: 2.5rem; border-top: 1px solid var(--afl-bordure); padding-top: 0.9rem;
             font-size: 0.82rem; color: var(--afl-gris); }
.vd-liste-pays td a { font-weight: 600; }
.vd-pays-h2 { margin-top: 2rem; }
.vd-pays-autres { font-size: 0.9rem; margin: 1.25rem 0 0; }
/* Moins de 80 caractères par ligne de texte (contrôle de /maquette : au-delà,
   l'œil perd la ligne suivante). PIÈGE : pas en `ch`. Inter est étroite, 70ch y
   valaient 127 caractères réels (mesuré le 10/11/2026) ; un caractère moyen y fait
   0,35 em, donc 27 em ≈ 78 caractères quelle que soit la taille du texte.
   `.vd-h1-pays + .vad-lede` borne le chapô de CES pages seulement. */
.vd-h1-pays + .vad-lede, .vd-monde-chapo, .vd-preuve, .vd-avis, .vd-pays-liens,
.vd-pays-autres { max-width: 27em; text-wrap: pretty; }
/* `text-wrap: pretty` : pas de mot seul sur la dernière ligne (relevé de la mesure
   impeccable du 10/11/2026). Un navigateur qui l'ignore coupe comme avant. */
@media (max-width: 640px) {
  /* Deux lignes au plus à 390 px (contrôle de /maquette) : à 2rem, « Les actions
     vendues à découvert au Royaume-Uni » en prenait trois. */
  .vd-h1-pays { font-size: 1.45rem; }
  /* Les trois chiffres côte à côte, comme la maquette : empilés, ils prenaient un
     écran entier avant la première société. Réglés par les jetons du composant. */
  .vd-pays-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem;
                   --m-stat-largeur-min: 0; --m-stat-marge: 0.7rem 0.75rem; --m-stat-taille: 1.4rem;
                   --m-stat-label-taille: 0.62rem; --m-stat-label-espacement: 0.04em; }
  /* PIÈGE : `.m-tableau tbody td` (composant commun) est plus spécifique qu'une
     classe seule ; sans le `.m-tableau` devant, ses traits et ses marges restaient
     sous chaque cellule empilée. */
  .m-tableau.vd-liste-pays thead { display: none; }
  .m-tableau.vd-liste-pays tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
                                      padding: 10px 0; border-bottom: 1px solid var(--afl-bordure); }
  .m-tableau.vd-liste-pays tbody td { border: 0; padding: 0; }
  .m-tableau.vd-liste-pays tbody td.vd-rang { display: none; }
  .m-tableau.vd-liste-pays tbody td.vd-sec { grid-column: 1 / -1; font-size: 0.8rem;
                                             color: var(--afl-gris); text-align: left; }
}

/* ── Les quatre chiffres de la fiche société (10/11/2026, revue UX) ──────────
   Rangés par le flex du jeu commun, ils prenaient la largeur de leur libellé :
   trois sur une ligne et le quatrième seul dessous sur grand écran, et sur
   téléphone un par ligne, de largeurs inégales (plus d'un demi-écran avant la
   note de lecture). Même rangement que la fiche des dirigeants (`.dg-stats`) :
   quatre colonnes égales, deux sur téléphone. */
.vd-stats-fiche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                  margin-top: 0; margin-bottom: 1.5rem; --m-stat-largeur-min: 0; }
@media (max-width: 800px) {
  .vd-stats-fiche { grid-template-columns: repeat(2, minmax(0, 1fr));
                    --m-stat-taille: 1.5rem; --m-stat-marge: 0.85rem 1rem; }
}