/* 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 {
  /* Tokens des dossiers AFL, noms compris (afl-dv). */
  --corail: #FF5A5F;
  --corail-clair: #FF7A7F;
  --corail-dark: #E04045;
  --rose: #FFF5F5;
  --rose-deep: #FFE5E5;
  --noir: #1a1a1a;
  --gris: #666666;
  --gris-clair: #999999;
  --gris-bord: #EEEEEE;
  /* Alias consommés par les composants ci-dessous. */
  --color-primary: var(--corail-dark);   /* liens et actifs : corail foncé, lisible sur blanc */
  --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);
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Composants (extraits de annuaire.css, habillage AFL) ─────────────────── */
/* ── Cartes ── */
.vad-card { background: #fff; border: 1px solid var(--afl-bordure); border-radius: 10px; box-shadow: 0 1px 4px rgba(31,78,121,0.06); padding: 1.5rem; }
.vad-card + .vad-card { 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-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.vad-stat { background: var(--afl-fond); border: 1px solid var(--afl-bordure); border-radius: 10px; padding: 1rem 1.6rem; min-width: 150px; }
.vad-stat__num { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--corail-dark); }
.vad-stat__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--afl-gris); margin-top: 0.2rem; }
/* Pills (régions, spécialités en accueil) */
.vad-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vad-pill { background: #fff; border: 1px solid var(--afl-bordure); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9rem; color: var(--afl-texte); }
.vad-pill:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.vad-pill__count { color: var(--afl-gris); margin-left: 0.3rem; }
.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(--color-primary); background: #fff;
}
.vad-pagination__btn:hover { border-color: var(--color-primary); 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(--color-primary); 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(--color-primary); 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; }
.vd-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vd-table th { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 2px solid var(--afl-bordure); }
.vd-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--afl-bordure); }
.vd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Un en-tête de colonne numérique s'aligne sur SES données. `th` est centré/gauche par
   défaut : le titre flottait à gauche pendant que les nombres collaient à droite, deux
   colonnes visuelles pour une seule réelle (relevé sur capture le 10/08/2026). */
.vd-table th.vd-num { text-align: right; }
/* 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(--color-primary); 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(--color-primary); }
/* 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; }
.vd-h3 { font-family: var(--font-heading); font-size: 0.95rem; margin: 0 0 0.6rem; color: var(--color-primary); }
.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; }
.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. */
.vd-table--serree { font-size: 0.82rem; margin-top: 0.5rem; }
.vd-table--serree th { border-bottom-width: 1px; padding: 0.35rem 0.5rem; }
.vd-table--serree td { padding: 0.3rem 0.5rem; }
.vd-chrono__n { min-width: 5rem; text-align: right; font-size: 0.8rem; color: var(--afl-gris); font-variant-numeric: tabular-nums; }
/* Pill sélectionnée. Existait en style inline répété sur chaque lien ; passée en classe pour
   pouvoir aussi corriger le compteur, qui restait gris sur fond vert foncé (illisible). */
.vad-pill--on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.vad-pill--on:hover { color: #fff; }
.vad-pill--on .vad-pill__count { color: rgba(255, 255, 255, 0.72); }
/* ── 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); }
.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); max-width: 760px; }
.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; }
a { color: #E04045; }
.vd-pct { color: #1a1a1a; }
.vad-stat__num { color: #1a1a1a; }
.vd-h3, .vad-h2, .vad-h1 { color: #1a1a1a; }
.vd-more summary { color: #1a1a1a; cursor: pointer; }
.vd-more summary:hover { color: #E04045; }
.vd-etat--on { color: #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: #E04045; }
.vd-table th[aria-sort="ascending"]::after { content: " ▴"; }