/* ==========================================================================
   VOYAGE PRIVÉ — COMPOSANTS v4
   Feuille de composants commune aux trois thèmes, chargée APRÈS le thème.

   Pourquoi un fichier séparé : les briques de la v4 (onglets, bandeau
   d'indicateurs, filtres, carte de chaleur, modale) sont les mêmes partout ;
   seules les couleurs changent. Les recopier dans chaque thème garantissait
   qu'elles finiraient par diverger.

   Règle : ce fichier n'utilise que des variables --v4-*, résolues ci-dessous
   depuis les tokens du thème actif, avec un repli. Un thème qui ne déclare
   rien reste donc lisible, et un nouveau thème n'a qu'à définir SES tokens.
   ========================================================================== */

:root {
  /* Surfaces et traits */
  --v4-fond:    var(--bg-elevated, var(--white, #FFFFFF));
  --v4-page:    var(--gray-50, var(--beige, #F9FAFB));
  --v4-calme:   var(--gray-100, var(--aspen, #F3F4F6));
  --v4-trait:   var(--border, var(--bd, #E5E7EB));
  --v4-trait-2: var(--gray-300, var(--line-strong, #D1D5DB));

  /* Textes */
  --v4-ink:   var(--text, var(--ink, #111827));
  --v4-mut:   var(--text-muted, var(--mut, #6B7280));
  --v4-faint: var(--gray-400, var(--faint, #9CA3AF));
  --v4-fort:  var(--gray-700, var(--ink, #374151));

  /* Marque */
  --v4-primaire: var(--primary, var(--obsidian, #111827));
  --v4-accent:   var(--accent, var(--lime, #F0FED2));
  --v4-accent-f: var(--accent-dark, var(--acc-deep, #7E9B3C));
  --v4-accent-q: #F7FEE7;
  --v4-accent-b: #DCF0A8;

  /* États */
  --v4-ok:      var(--success, var(--ok, #059669));
  --v4-ok-bg:   var(--success-bg, var(--ok-bg, #D1FAE5));
  --v4-ok-tx:   var(--success-text, var(--ok, #065F46));
  --v4-warn:    var(--warning, var(--warn, #D97706));
  --v4-warn-bg: var(--warning-bg, var(--warn-bg, #FEF3C7));
  --v4-warn-tx: var(--warning-text, var(--warn, #92400E));
  --v4-err:     var(--error, var(--err, #DC2626));
  --v4-err-bg:  var(--error-bg, var(--err-bg, #FEE2E2));
  --v4-err-tx:  var(--error-text, var(--err, #991B1B));

  /* Formes */
  --v4-r-sm: var(--radius-sm, var(--r-sm, 6px));
  --v4-r-md: var(--radius-md, var(--r-sm, 8px));
  --v4-r-lg: var(--radius-lg, var(--r-carte, 12px));
  --v4-r-max: var(--radius-full, var(--r-gelule, 9999px));
  --v4-sh:    var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / .05));
  --v4-sh-md: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / .08));
  --v4-sh-lg: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / .1));
  --v4-pad:   var(--spacing-xl, 28px);
  --v4-gap:   var(--spacing-lg, 20px);

  /* Marques de données : la mesurée en lime soutenu, les rivales en gris,
     l'intermédiaire en ambre. Ces trois valeurs sont écrites en dur, sans
     repli sur un token de thème : ce sont des couleurs de LECTURE, elles
     doivent rester lisibles sur blanc quel que soit l'habillage. Le lime pâle
     de la charte, parfait en aplat de graphique, disparaît sur un trait de 3 px.
     Un thème qui veut les changer redéfinit ces trois lignes. */
  --v4-mark-moi:     var(--accent-dark, #7E9B3C);
  --v4-mark-partiel: #D97706;
  --v4-mark-rival:   #D1D5DB;

  /* Noms courts conservés : des pages non reprises les utilisent. */
  --mark-moi:   var(--v4-mark-moi);
  --mark-rival: var(--v4-mark-rival);
  --acc-quiet:  var(--v4-accent-q);
}

/* ------------------------------------------------------- Barre de contexte */

/* La barre haute portait un seul sélecteur centré. Elle porte maintenant
   trois informations de nature différente : où l'on est (à gauche), sur quoi
   (à droite). Le centrage n'a plus de sens. */
.topbar {
  justify-content: flex-start;
  gap: 14px;
  min-height: 60px;
  padding: 12px var(--v4-pad);
  flex-wrap: wrap;
}

.fil { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v4-mut); }
.fil strong { font-weight: 600; color: var(--v4-ink); }
.fil .sep { color: var(--v4-trait-2); }

.ctx { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ctx-sel {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  padding: 7px 13px; border: 1px solid var(--v4-trait-2);
  border-radius: var(--v4-r-md); background: white; box-shadow: var(--v4-sh);
  font-size: 13px; font-weight: 600; color: var(--v4-ink); white-space: nowrap;
}
.ctx-sel .k {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v4-mut);
}
.ctx-sel select {
  min-width: 0; width: auto; max-width: 260px;
  /* La marge basse de 16 px que le thème applique à tout « select » décentre
     le contenu d'une gélule en flex de la moitié de cette marge, et gonfle sa
     hauteur d'autant. Elle est faite pour des formulaires empilés, pas pour un
     champ posé sur une ligne : on la neutralise ici. */
  margin: 0; padding: 0 22px 0 0; border: 0; box-shadow: none;
  background-color: transparent; background-position: right 4px center;
  /* Même interligne que le texte de la gélule voisine : les deux boutons de
     la barre haute sont côte à côte, deux pixels d'écart de hauteur se voient. */
  font-size: 13px; font-weight: 600; line-height: 1.6; height: auto;
}
.ctx-sel select:hover, .ctx-sel select:focus { box-shadow: none; border: 0; outline: none; }
.ctx-sel.vs { border-style: dashed; font-weight: 500; box-shadow: none; color: var(--v4-mut); }

/* Sélecteur de langue — deux liens dans un <details>, sans une ligne de script.
   Un menu de langue qui dépend du JavaScript enferme dans une langue qu'on ne
   lit pas le jour où le script ne se charge pas. */
.lang-sel { position: relative; }
.lang-sel summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 11px; border: 1px solid var(--v4-trait-2);
  border-radius: var(--v4-r-md); background: white; box-shadow: var(--v4-sh);
  font-size: 13px; font-weight: 600; color: var(--v4-ink); white-space: nowrap;
  list-style: none;
}
.lang-sel summary::-webkit-details-marker { display: none; }
.lang-sel summary:hover { border-color: var(--v4-ink); }
.lang-sel .lang-fl { color: var(--v4-mut); font-size: 10px; }
.lang-sel[open] .lang-fl { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 170px; padding: 5px; background: white;
  border: 1px solid var(--v4-trait-2); border-radius: var(--v4-r-md);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .13);
}
.lang-menu a {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  border-radius: 7px; font-size: 13.5px; font-weight: 500;
  color: var(--v4-ink); text-decoration: none;
}
.lang-menu a:hover { background: var(--v4-calme); }
.lang-menu a.on { font-weight: 700; }
.lang-menu a.on::after { content: '✓'; margin-left: auto; color: var(--v4-accent-f); }
@media print { .lang-sel { display: none; } }

/* Périmètre mesuré, rappelé sur chaque page : un chiffre lu sans savoir sur
   quoi il porte est un chiffre mal lu. */
.perimetre {
  display: flex; align-items: center; flex-wrap: wrap;
  padding: 8px var(--v4-pad);
  background: var(--v4-page); border-bottom: 1px solid var(--v4-trait);
  font-size: 12px; color: var(--v4-mut);
}
.perimetre b { font-weight: 600; color: var(--v4-fort); font-variant-numeric: tabular-nums; }
.perimetre span + span::before { content: "·"; margin: 0 10px; color: var(--v4-trait-2); }

/* ---------------------------------------------------------- En-tête de page */

.page-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.sub { color: var(--v4-mut); font-size: 14px; margin: 4px 0 0; max-width: 78ch; }

/* -------------------------------------------------------------- Filtres */

.filtres { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--v4-trait-2);
  border-radius: var(--v4-r-md); background: white; box-shadow: var(--v4-sh);
  font-size: 13px; font-weight: 500; color: var(--v4-ink);
  white-space: nowrap; cursor: pointer; margin: 0;
  text-transform: none; letter-spacing: normal;
  transition: all 150ms ease;
}
.chip:hover { border-color: var(--v4-faint); }
.chip .k {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--v4-mut);
}
.chip select {
  width: auto; min-width: 0; border: 0;
  /* Même raison que pour .ctx-sel : sans cette remise à zéro, l'intitulé et la
     valeur ne partagent pas leur ligne médiane. */
  margin: 0; padding: 0 20px 0 0; line-height: 1.45; height: auto;
  background-color: transparent; box-shadow: none;
  font-size: 13px; font-weight: 600; font-family: inherit; color: var(--v4-ink);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239CA3AF' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}
.chip select:focus { outline: none; }
.chip.actif { border-color: var(--v4-accent-f); background: var(--v4-accent-q); }
.chip.actif .k { color: var(--v4-accent-f); }
.chip.raz { color: var(--v4-mut); text-decoration: none; font-weight: 500; }

/* -------------------------------------------------------------- Onglets */

.onglets {
  display: flex; gap: 4px; margin: 20px 0 24px;
  border-bottom: 1px solid var(--v4-trait); overflow-x: auto;
}
.onglet {
  padding: 10px 14px 12px; border: 0; border-bottom: 2px solid transparent;
  background: none; font-size: 14px; font-weight: 500; color: var(--v4-mut);
  text-decoration: none; white-space: nowrap;
  transition: color 150ms, border-color 150ms;
}
.onglet:hover { color: var(--v4-ink); background: none; box-shadow: none; transform: none; }
.onglet.on { color: var(--v4-primaire); font-weight: 600; border-bottom-color: var(--v4-primaire); }
.onglet .n {
  margin-left: 7px; padding: 1px 8px; border-radius: var(--v4-r-max);
  background: var(--v4-calme); font-size: 11px; color: var(--v4-mut); font-weight: 600;
}
.onglet.on .n { background: var(--v4-accent); color: var(--v4-primaire); }

/* ------------------------------------------------------- Cartes à en-tête */

.card.plat { padding: 0; overflow: hidden; }
.card.plat:hover { box-shadow: var(--v4-sh); }
.card-t {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--v4-trait);
  font-size: 15px; font-weight: 600;
}
.card-t .r { margin-left: auto; font-weight: 400; font-size: 12.5px; color: var(--v4-mut); }
.card-b { padding: 18px 20px; }

.duo  { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin: var(--v4-gap) 0; }
.duo.large { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; align-items: start; margin: var(--v4-gap) 0; }
@media (max-width: 1000px) { .duo, .duo.large, .trio { grid-template-columns: 1fr; } }

/* -------------------------------------------- Bandeau d'indicateurs (v4) */

/* Volontairement distinct de l'ancien .kpi, encore utilisé par des pages :
   une refonte de style qui casse les pages non reprises n'est pas une refonte,
   c'est une panne. */
.kpis {
  display: grid; grid-template-columns: repeat(var(--kpi-n, 4), minmax(0, 1fr));
  background: white; border: 1px solid var(--v4-trait);
  border-radius: var(--v4-r-lg); overflow: hidden;
  margin: var(--v4-gap) 0; box-shadow: var(--v4-sh);
}
.kpis .kpi-t {
  padding: 16px 18px 14px; border-right: 1px solid var(--v4-trait);
  min-width: 0; text-decoration: none; color: inherit; display: block;
  transition: background 150ms;
}
.kpis .kpi-t:last-child { border-right: 0; }

/* Sous 1200 px on repasse à trois colonnes, puis à deux : mieux vaut deux
   lignes pleines qu'une ligne de six tuiles trop étroites pour être lues. */
@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis .kpi-t { border-bottom: 1px solid var(--v4-trait); }
  .kpis .kpi-t:nth-child(3n) { border-right: 0; }
}
@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis .kpi-t:nth-child(3n) { border-right: 1px solid var(--v4-trait); }
  .kpis .kpi-t:nth-child(2n) { border-right: 0; }
}
a.kpi-t:hover { background: var(--v4-page); }
.kpis .kpi-t .l {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.35;
  text-transform: uppercase; color: var(--v4-mut);
  /* Deux lignes reservees : un intitule qui se replie ne doit pas decaler
     vers le bas la valeur de SA tuile pendant que les voisines restent en
     haut — des chiffres qu'on compare doivent partager leur ligne de base. */
  min-height: 2.7em;
}
.kpis .kpi-t .v {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin: 9px 0 5px; color: var(--v4-primaire);
}
.kpis .kpi-t .v small { font-size: 15px; font-weight: 500; color: var(--v4-mut); }
.kpis .kpi-t .v.ok { color: var(--v4-ok); }
.kpis .kpi-t .v.warn { color: var(--v4-warn); }
.kpis .kpi-t .v.err { color: var(--v4-err); }
.kpis .kpi-t .ic { display: block; font-size: 12px; color: var(--v4-mut); }

/* ------------------------------------------------------------- Tableaux */

/* Les tableaux denses défilent dans leur propre conteneur : la page ne part
   jamais en défilement horizontal. */
.tbl-wrap {
  overflow-x: auto; border: 1px solid var(--v4-trait);
  border-radius: var(--v4-r-lg); background: white; box-shadow: var(--v4-sh);
  margin: 16px 0;
}
.tbl-wrap table { border: 0; border-radius: 0; box-shadow: none; }
.tbl-wrap thead th { height: auto; padding: 11px 14px; position: sticky; top: 0; z-index: 2; }
.tbl-wrap tbody td { padding: 11px 14px; }
.tbl-wrap tbody td:first-child { padding-left: 14px; }

th.tri { cursor: pointer; }
th.tri::after { content: "↕"; margin-left: 5px; color: var(--v4-trait-2); font-size: 10px; }

/* Ligne de la marque mesurée. .client reste supporté pour les pages non reprises. */
tbody tr.moi td { background: var(--v4-accent-q); font-weight: 500; }
tbody tr.moi:hover td { background: var(--v4-accent-q); }
tbody tr.moi td:first-child { box-shadow: inset 3px 0 0 var(--v4-accent-f); }

td .ref { font-family: ui-monospace, Menlo, Monaco, monospace; font-size: 11.5px; color: var(--v4-faint); }
td .q { display: block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- Palmarès */

.rang { display: flex; flex-direction: column; }
.rang-l {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-bottom: 1px solid var(--v4-trait); font-size: 13.5px;
}
.rang-l:last-child { border-bottom: 0; }
.rang-l .nom { min-width: 0; flex: 1; }
.rang-l .nom b { display: block; font-weight: 600; }
.rang-l .nom span { font-size: 11.5px; color: var(--v4-faint); }
.rang-l .val { text-align: right; font-variant-numeric: tabular-nums; }
.rang-l .val b { display: block; font-weight: 600; }
.rang-l .val span { font-size: 11.5px; }

/* -------------------------------------------------------- Marques et logos */

.logo {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--v4-r-sm);
  background: var(--v4-calme); border: 1px solid var(--v4-trait);
  font-size: 10px; font-weight: 600; color: var(--v4-mut);
  object-fit: contain; overflow: hidden;
}
.logo.moi { background: var(--v4-accent); border-color: #DCF0A8; color: var(--v4-primaire); }
.marque, td.marque { display: flex; align-items: center; gap: 11px; }
.marque .dom { display: block; font-size: 11.5px; color: var(--v4-faint); font-weight: 400; }

/* Empilement : « qui occupe le terrain », pas la liste exhaustive. */
.stack { display: inline-flex; align-items: center; }
.stack .logo { width: 24px; height: 24px; margin-right: -7px; box-shadow: 0 0 0 2px white; }
.stack .plus {
  margin-left: 13px; font-size: 11.5px; font-weight: 500;
  color: var(--v4-mut); font-variant-numeric: tabular-nums;
}

/* Anneau : la couleur accélère la lecture, le chiffre reste écrit à côté. */
.anneau { display: inline-flex; align-items: center; gap: 9px; }
.anneau svg { width: 22px; height: 22px; flex: none; }
.anneau .n { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Assistant : pastille de couleur ET nom écrit. */
.moteur { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13px; font-weight: 500; }
.moteur .g { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--v4-trait-2); }
.moteur .g-chatgpt    { background: #10A37F; }
.moteur .g-perplexity { background: #20808D; }
.moteur .g-ai_mode    { background: #4285F4; }
.moteur .g-aio        { background: #4285F4; }
.moteur .g-gemini     { background: #9168C0; }
.moteur .g-claude     { background: #D97757; }
.moteur .g-copilot    { background: #0A84C1; }

/* --------------------------------------------------------- Carte de chaleur */

.heat { border-collapse: separate; border-spacing: 4px; border: 0; box-shadow: none; font-size: 13px; }
.heat thead th { background: none; border: 0; height: auto; padding: 4px 8px; position: static; }
.heat tbody td { border: 0; padding: 0; }
.heat tbody tr:hover { background: none; }
.heat tbody tr.moi td { background: none; box-shadow: none; }
.heat .lab { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 4px; white-space: nowrap; }
.heat tbody tr.moi .lab { font-weight: 600; }
.heat .cel {
  display: block; padding: 10px 8px; border-radius: var(--v4-r-sm);
  text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 500; color: var(--v4-fort);
}
.heat .cel.fort { color: var(--v4-primaire); font-weight: 700; }

/* ------------------------------------------------------------- Notes */

/* La note par défaut reste informative (bleu). Deux variantes signalent une
   chose à faire : sans elles, un avertissement se lit comme une explication. */
.note.alerte { background: var(--v4-warn-bg); border-left-color: var(--v4-warn); }
.note.alerte strong { color: var(--v4-warn-tx); }
.note.grave { background: var(--v4-err-bg); border-left-color: var(--v4-err); }
.note.grave strong { color: var(--v4-err-tx); }
/* Le thème passe les « strong » d'une note en display:block, ce qui coupe la
   ligne avant et après chaque passage en gras — au milieu d'une phrase, la
   lecture décroche. Le gras et la couleur restent, le retour à la ligne part.
   Les notes qui veulent vraiment deux lignes le disent avec un <br>. */
.note strong { display: inline; margin: 0; }

/* L'essentiel : le seul bloc de la page écrit en phrases. Il porte la lecture
   pour quelqu'un qui ne regardera aucun graphique. */
.resume {
  background: white; border: 1px solid var(--v4-trait);
  border-left: 3px solid var(--v4-accent-f); border-radius: var(--v4-r-lg);
  padding: 20px 24px; margin: var(--v4-gap) 0; max-width: 88ch;
  box-shadow: var(--v4-sh);
}
.resume p { margin: 0 0 9px; font-size: 15px; line-height: 1.6; }
.resume p:last-child { margin: 0; font-size: 12.5px; color: var(--v4-mut); }

/* ---------------------------------------------------------- Tendances */

.tend { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tend.hausse { color: var(--v4-ok); }
.tend.baisse { color: var(--v4-err); }
.tend.stable { color: var(--v4-mut); }
.tend.nouveau, .tend.neuf { color: var(--v4-faint); font-weight: 500; }

/* ------------------------------------------------------------- Étiquettes */

.pill.net { background: white; border: 1px solid var(--v4-trait); color: var(--v4-mut); font-weight: 500; }
.pill.moi, .pill.client { background: var(--v4-accent); color: var(--v4-primaire); }

/* --------------------------------------------------------------- Boutons */

.btn.pt, button.pt {
  padding: 6px 11px; font-size: 12px; box-shadow: none;
}
.btn.pt:hover, button.pt:hover { transform: none; }
/* L'action principale porte le lime de la charte, pas un vert d'état :
   le vert dit « tout va bien », le lime dit « c'est ici qu'on clique ». */
.btn.cta, button.cta, input[type="submit"].cta {
  background: var(--v4-accent); color: var(--v4-primaire); border-color: #DCF0A8;
}
.btn.cta:hover, button.cta:hover, input[type="submit"].cta:hover {
  background: #E6FBBB; border-color: #CDE795; color: var(--v4-primaire);
}

/* Action destructrice : rouge en contour, pas en aplat. Un bouton rouge plein
   attire le clic ; un contour rouge le fait hésiter, ce qui est le but. */
.btn.danger, button.danger, input[type="submit"].danger {
  background: #FFFFFF; color: var(--v4-err-tx);
  border: 1px solid var(--v4-err); box-shadow: none;
}
.btn.danger:hover, button.danger:hover, input[type="submit"].danger:hover {
  background: var(--v4-err); color: #FFFFFF;
  border-color: var(--v4-err); transform: none;
}
.btn.danger[disabled], button.danger[disabled] {
  background: var(--v4-calme); color: var(--v4-faint);
  border-color: var(--v4-trait); cursor: not-allowed;
}

/* ----------------------------------------------------------------- Jauges */

.bar { min-width: 60px; }
.bar i { background: var(--mark-moi); }
.bar i.rival { background: var(--mark-rival); }

/* ---------------------------------------------------------------- Modale */

.voile {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(17 24 39 / .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 36px 20px; overflow-y: auto;
}
.voile { display: none; }
.voile.ouvert, .voile:target { display: flex; }
.modale {
  background: white; border-radius: var(--v4-r-lg);
  width: min(920px, 100%); box-shadow: var(--v4-sh-lg); overflow: hidden;
}
.modale-t {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-bottom: 1px solid var(--v4-trait);
  font-size: 15px; font-weight: 600;
}
.modale-t .btn { margin-left: auto; }
.modale-k {
  display: flex; gap: 32px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--v4-trait); background: var(--v4-page);
}
.modale-k div .l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--v4-mut);
}
.modale-k div .v { margin-top: 6px; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.modale-b { padding: 20px 22px 24px; }
.prompt-box {
  display: inline-block; margin-bottom: 18px;
  padding: 10px 16px; border: 1px solid var(--v4-trait); background: var(--v4-page);
  border-radius: var(--v4-r-md); font-size: 14px; font-weight: 500;
}
.reponse { font-size: 14px; line-height: 1.68; max-width: 80ch; white-space: pre-wrap; }
.reponse mark.m { background: var(--v4-accent); color: var(--v4-primaire); padding: 1px 6px; border-radius: var(--v4-r-sm); font-weight: 600; }
.reponse mark.r { background: var(--v4-calme); color: var(--v4-fort); padding: 1px 6px; border-radius: var(--v4-r-sm); }

/* ------------------------------------------------------------- Graphiques */

.graphe { display: block; width: 100%; height: auto; overflow: visible; }
.card > .graphe, .card-b > .graphe { margin: 4px 0 2px; }

/* ------------------------------------------------------------- Impression */

@media print {
  .nav, .topbar, .filtres, .onglets, .page-head .actions, .voile { display: none !important; }
  body.app { display: block; }
  .app-main { margin-left: 0; }
  .card, .tbl-wrap, table, .graphe { break-inside: avoid; page-break-inside: avoid; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ------------------------------------------------------------- Pagination */

.pagination {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 0 4px;
}
.pagination .small { color: var(--v4-mut); font-variant-numeric: tabular-nums; }

/* Champ de recherche posé dans une barre de filtres. */
.filtres input[type=text] {
  margin: 0; padding: 7px 13px; border: 1px solid var(--v4-trait-2);
  border-radius: var(--v4-r-md); background: var(--v4-fond);
  font: inherit; font-size: 13px; color: var(--v4-ink); box-shadow: var(--v4-sh);
}
.filtres input[type=text]:focus {
  outline: none; border-color: var(--v4-accent-f);
  box-shadow: 0 0 0 3px rgb(126 155 60 / .18);
}

/* Un titre de section à l'intérieur d'une modale reste discret : il structure,
   il n'annonce pas une nouvelle page. */
.modale-b h2 { margin-top: 24px; }

/* ------------------------------------------------- Débordement horizontal */

/* Une grille à deux colonnes ne rétrécit pas sous la taille de son contenu
   sans min-width:0 : un tableau large fait alors déborder la page entière,
   au lieu de défiler dans son propre conteneur. */
.app-main, main { min-width: 0; }
.tbl-wrap, .card, .duo, .trio, .kpis { max-width: 100%; }
.duo > *, .trio > * { min-width: 0; }

/* ------------------------------------------------- Texte long : l'analyse */

/* Une analyse se LIT, elle ne se consulte pas. Les règles d'un tableau de bord
   — dense, serré, tout visible d'un coup — sont exactement les mauvaises ici :
   les paragraphes se touchaient, et huit pages ainsi composées ne se lisent
   pas. On desserre donc l'interligne et on sépare les paragraphes.

   La largeur, elle, reste celle de la carte : une colonne bornée au milieu d'un
   bloc large laisse une bande vide à droite, et cette bande se lit comme un
   défaut d'affichage bien plus qu'elle ne repose l'œil. C'est la carte qui
   décide de la mesure, pas le texte. */
.analyse { font-size: 15px; line-height: 1.75; }
.analyse p { margin: 0 0 1.15em; color: var(--v4-fort); }
.analyse p:last-child { margin-bottom: 0; }
.analyse h3 {
  margin: 1.9em 0 .65em; font-size: 16.5px; font-weight: 650;
  letter-spacing: -0.01em; color: var(--v4-ink);
}
.analyse h3:first-child { margin-top: 0; }
.analyse ul { margin: 0 0 1.15em; padding-left: 1.15em; }
.analyse li { margin: 0 0 .5em; }
.analyse li:last-child { margin-bottom: 0; }
.analyse strong { font-weight: 650; color: var(--v4-ink); }
.analyse .tbl-wrap { margin: 1.4em 0 1.6em; max-width: 100%; }
.analyse table { font-size: 13.5px; }
.analyse table td { line-height: 1.55; padding-top: 10px; padding-bottom: 10px; }

/* Entre deux sections, une respiration : chacune est un chapitre. */
.analyse-sec { margin-top: 22px; }

/* ------------------------------------------------------------ Sous-blocs */

/* Une suite de blocs a l'interieur d'une meme carte — un lot de transfert, un
   moteur diagnostique. La classe etait deja ecrite dans les pages sans qu'une
   regle existe : les blocs se touchaient, et rien ne signalait ou l'un
   finissait. Un filet separe suffit ; le premier n'en porte pas. */
.section + .section {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--v4-trait);
}
.section > h4 { margin: 0 0 6px; }

/* --------------------------------------------------- Titres de sous-section */

/* Complément au titre : la précision (« 12 questions », « les plus lourdes
   d'abord ») et le lien de renvoi vivent dans la même ligne que le titre. */
h2 .free {
  font-weight: 400; font-size: 12.5px; letter-spacing: normal;
  text-transform: none; color: var(--v4-faint);
}
h2 .lien {
  margin-left: auto; font-weight: 500; font-size: 12.5px;
  letter-spacing: normal; text-transform: none;
}
.modale-b h2 { margin-top: 24px; font-size: 15px; }

/* ------------------------------------------------ Densité des tableaux (v4) */

/* Une étiquette qui passe à la ligne double la hauteur de la rangée et casse
   l'alignement des colonnes voisines : dans un tableau dense, les étiquettes
   ne se coupent pas. */
/* Une étiquette qui passe à la ligne double la hauteur de sa rangée et casse
   l'alignement des colonnes voisines. Elles ne se coupent jamais. */
.pill { white-space: nowrap; }
.tbl-wrap .moteur { white-space: nowrap; }
td .apres { display: block; font-size: 11.5px; color: var(--v4-mut); white-space: nowrap; }

/* Champ de recherche : le bouton reste sur la même ligne que le champ. */
.filtres.recherche { flex-wrap: nowrap; align-items: center; }
.filtres.recherche input[type=text] { flex: 1 1 auto; min-width: 240px; max-width: 520px; }
@media (max-width: 720px) { .filtres.recherche { flex-wrap: wrap; } }

/* ------------------------------------------------------- Messages d'action */

/* Le thème ne connaît qu'un bandeau, celui de la réussite : vert, toujours.
   Une erreur s'y affichait donc en vert, ce qui laisse croire que l'action a
   abouti — pire qu'une erreur non signalée. Deux variantes suffisent. */
.flash.err {
  background: var(--v4-err-bg); color: var(--v4-err-tx);
  border-left-color: var(--v4-err);
}
.flash.warn {
  background: var(--v4-warn-bg); color: var(--v4-warn-tx);
  border-left-color: var(--v4-warn);
}

/* ===========================================================================
   SCORE IA (score.php) — repris de la version qui tourne en production
   =========================================================================== */
.score-t { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.score-a { width: 128px; height: 128px; flex: none; }
.score-t > div { flex: 1; min-width: 220px; }
.score-mot { margin: 0 0 8px; font-size: 19px; font-weight: 700; }
.score-mot.ok   { color: var(--v4-ok); }
.score-mot.warn { color: var(--v4-warn-tx); }
.score-mot.err  { color: var(--v4-err-tx); }
.score-mot.mut  { color: var(--v4-mut); }

/* Detail des controles. Une ligne = un constat, sa preuve, et l'action qui en
   decoule. La pastille d'etat est a gauche pour que l'oeil descende la colonne
   des echecs sans lire le reste. */
.score-d { width: 100%; border-collapse: collapse; }
.score-d td { padding: 11px 20px; border-top: 1px solid var(--v4-trait); vertical-align: top; }
.score-d td.p { width: 108px; }
.score-d td.n {
  width: 76px; text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.score-d td.n i { font-style: normal; font-weight: 400; color: var(--v4-faint); }
.score-p {
  display: inline-block; padding: 2px 9px; border-radius: var(--v4-r-max);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.e-ok      .score-p { background: var(--v4-ok-bg);   color: var(--v4-ok-tx); }
.e-partiel .score-p { background: var(--v4-warn-bg); color: var(--v4-warn-tx); }
.e-ko      .score-p { background: var(--v4-err-bg);  color: var(--v4-err-tx); }
.e-nv      .score-p { background: var(--v4-calme);   color: var(--v4-mut); }
/* Un controle non verifie est grise : il ne doit pas se lire comme un echec,
   puisqu'il ne compte precisement pas dans la note. */
.e-nv td { color: var(--v4-mut); }

/* La preuve brute : en chasse fixe, discrete, mais toujours la. C'est elle qui
   permet de contester un constat plutot que de le croire. */
.score-pr {
  margin-top: 5px; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--v4-faint); word-break: break-word;
}
.score-ac {
  margin-top: 6px; padding-left: 11px; font-size: 12.5px; color: var(--v4-fort);
  border-left: 2px solid var(--v4-accent-b);
}

/* Jauge d'axe. Composant a part plutot que reemploi d'une ligne d'audience :
   ici le libelle, la note et la question doivent tenir ensemble dans une
   colonne etroite, ce qu'une barre posee derriere le texte ne permet pas. */
.score-hote { border-top: 1px solid var(--v4-trait); padding-top: 14px; }
.score-hote p { margin: 0; max-width: 78ch; }
.score-hote code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--v4-accent-q); padding: 1px 5px; border-radius: 4px;
}
.score-ax { padding: 12px 0; border-bottom: 1px solid var(--v4-trait); }
.score-ax:first-child { padding-top: 0; }
.score-ax:last-child  { padding-bottom: 0; border-bottom: 0; }
.score-ax-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13.5px;
}
.score-ax-h b { font-weight: 600; }
.score-ax-h span { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-ax-h i { font-style: normal; font-weight: 400; color: var(--v4-faint); }
.score-ax-b {
  height: 8px; margin: 7px 0 6px; border-radius: var(--v4-r-max);
  background: var(--v4-calme); overflow: hidden;
}
.score-ax-b i { display: block; height: 100%; background: var(--v4-accent-f); }
.score-ax p { margin: 0; font-size: 12px; color: var(--v4-mut); }
/* Part de l'axe reellement mesuree, affichee seulement quand elle est
   incomplete : sinon la mention parasiterait les quatre lignes. */
.score-ax-nv {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--v4-r-max);
  background: var(--v4-calme); color: var(--v4-faint); font-size: 11px; white-space: nowrap;
}

/* Bloc de methode, en bas de la page Score. Il est long par necessite : il porte
   le bareme, la regle du non-verifie et ce que le score ne dit pas. D'ou des
   intertitres et une mesure de ligne courte — un pave de la largeur de la carte
   ne se lirait pas, et un bareme qu'on ne lit pas est un bareme qu'on subit. */
/* La mesure de ligne s'applique au TEXTE, pas au bloc : capper le conteneur
   retrecissait aussi le tableau du bareme, dont les quatre colonnes ont besoin
   de toute la largeur de la carte pour rester lisibles. */
.score-ex { max-width: none; }
.score-ex h3, .score-ex p { max-width: 78ch; }
.score-ex h3 {
  margin: 26px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  color: var(--v4-ink);
}
.score-ex h3:first-child { margin-top: 0; }
.score-ex p { margin: 0 0 10px; font-size: 13px; line-height: 1.62; color: var(--v4-fort); }
.score-ex p.mut { color: var(--v4-mut); }
.score-ex code {
  font-size: 12px; padding: 1px 5px; border-radius: var(--v4-r-sm);
  background: var(--v4-calme); color: var(--v4-fort);
}

/* Le bareme, en clair. Quatre lignes : le poids de chaque axe, ce qu'il regarde
   et pourquoi il pese ce qu'il pese. Une ponderation qu'on ne justifie pas est
   une opinion deguisee en mathematiques. */
.score-bar { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: 12.5px; }
.score-bar th {
  text-align: left; padding: 7px 12px 7px 0; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--v4-faint);
  border-bottom: 1px solid var(--v4-trait-2);
}
.score-bar td {
  padding: 9px 12px 9px 0; vertical-align: top; line-height: 1.5;
  border-bottom: 1px solid var(--v4-trait); color: var(--v4-fort);
}
.score-bar tr:last-child td { border-bottom: 0; }
.score-bar td:first-child, .score-bar th:first-child { width: 110px; }
.score-bar .num { width: 58px; text-align: right; font-variant-numeric: tabular-nums; }
.score-bar td.num { font-weight: 700; color: var(--v4-ink); }
@media (max-width: 900px) {
  .score-bar, .score-bar thead, .score-bar tbody, .score-bar tr, .score-bar th, .score-bar td {
    display: block; width: auto;
  }
  .score-bar thead { display: none; }
  .score-bar tr { padding: 10px 0; border-bottom: 1px solid var(--v4-trait); }
  .score-bar td { border-bottom: 0; padding: 2px 0; }
  .score-bar td.num { text-align: left; }
  .score-bar td.num::before { content: 'Poids : '; font-weight: 400; color: var(--v4-faint); }
}

/* Motifs d'un audit incomplet. Le nombre en tete de ligne dit combien de
   controles sont concernes : c'est lui qui distingue une gene ponctuelle d'un
   refus general du site.
   Nom distinct de .score-mot, qui porte deja le mot du verdict : deux regles
   homonymes pour deux composants differents se marchent dessus en silence. */
.score-pourquoi { margin: 4px 0 10px; padding: 0; list-style: none; }
.score-pourquoi li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 12.5px; line-height: 1.5; color: var(--v4-fort); padding: 2px 0;
}
.score-pourquoi li span {
  flex: none; min-width: 22px; text-align: center; padding: 0 5px;
  border-radius: var(--v4-r-max); background: var(--v4-calme);
  color: var(--v4-mut); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Causes possibles d'un refus, dans l'ordre ou il faut les ecarter. Une liste
   numerotee et non a puces : cet ordre est une methode, pas un inventaire. */
.score-causes { margin: 4px 0 12px; padding-left: 22px; }
.score-causes li {
  font-size: 12.5px; line-height: 1.55; color: var(--v4-fort); padding: 3px 0;
}

/* Utilitaires communs, utilises par plusieurs pages sans avoir jamais ete
   definis : les dates se coupaient en deux lignes dans les tableaux. */
.nowrap { white-space: nowrap; }
.pad { padding: 16px 18px; }

/* ---------------------------------------------------------------- Benchmark */
.bench-apercu { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.bench-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--v4-trait); border-radius: 999px; font-size: 12.5px;
  background: var(--v4-page);
}
.bench-chip.cli { border-color: var(--v4-accent-b); background: var(--v4-accent-q); font-weight: 600; }
.bench-chip i { font-style: normal; color: var(--v4-mut); font-size: 11.5px; }
.bench-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bench-form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0 6px; }
.bench-form label { font-size: 12.5px; color: var(--v4-mut); }
.bench-form input[type=number] { width: 70px; margin-left: 6px; }
.bench-form label.ck { display: inline-flex; align-items: center; gap: 6px; }
.bench-journal { margin-top: 12px; font-size: 12px; color: var(--v4-mut); max-height: 220px; overflow: auto; }
.bench-journal div { padding: 2px 0; border-bottom: 1px solid var(--v4-trait); }
.bench-verdict { margin: 0 0 14px; font-size: 14px; line-height: 1.6; max-width: 78ch; }
.bench-scroll { overflow-x: auto; }
.bench-l { cursor: pointer; }
.bench-l:hover { background: var(--v4-calme); }
.bench-voir {
  display: inline-block; font-size: 11.5px; padding: 3px 10px; text-decoration: none;
  border: 1px solid var(--v4-trait); border-radius: 999px; color: var(--v4-mut);
}
.bench-voir:hover { border-color: var(--v4-accent-b); color: var(--v4-ink); }

/* La fiche de detail d'un domaine : le composant .modale maison, complete. */
.bench-fiche { max-height: calc(100vh - 72px); overflow-y: auto; }
.bench-fiche-h {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px 16px; border-bottom: 1px solid var(--v4-trait);
}
.bench-fiche-x { order: 3; margin-left: auto; }
.bench-fiche-h h2 { margin: 0 0 3px; font-size: 18px; }
.bench-fiche-h p  { margin: 0; font-size: 12.5px; color: var(--v4-mut); }
.bench-fiche-n { order: 4; width: 100%; display: flex; gap: 18px; align-items: baseline; }
.bench-fiche-n span { font-size: 20px; font-weight: 700; }
.bench-fiche-n i { font-style: normal; font-size: 11.5px; color: var(--v4-mut); }
.bench-fiche-axe { border-bottom: 1px solid var(--v4-trait); }
.bench-fiche-axe:last-of-type { border-bottom: 0; }
.bench-fiche-axe h3 {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0; padding: 14px 22px 8px; font-size: 12px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--v4-mut);
}
.bench-fiche-axe h3 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.bench-fiche > p.small { margin: 0; padding: 14px 22px 20px; }
.score-hs {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--v4-trait); font-size: 10.5px; color: var(--v4-mut);
  vertical-align: 1px; white-space: nowrap;
}
.bench-tbl { width: 100%; border-collapse: collapse; }
.bench-tbl th, .bench-tbl td { white-space: nowrap; }
.bench-tbl td .marque { white-space: normal; }
.bench-tbl td:nth-child(2) { min-width: 190px; }
.bench-tbl i { font-style: normal; font-weight: 400; color: var(--v4-faint); }

/* ------------------------------------------------------------------ Restes
   Cinq classes etaient ecrites dans le HTML sans qu'aucune feuille ne les
   definisse. Rien ne « cassait » : l'element portait deja le style de son
   type, et la degradation etait donc invisible — c'est precisement ce qui la
   rendait durable. Elles sont traitees ici selon ce qu'elles disent vraiment.
   ------------------------------------------------------------------------ */

/* Conteneur de page. Il ne met pas en forme, il delimite : sans largeur
   maximale, une table large etire le texte des pages voisines sur un grand
   ecran, et deux pages de la meme application ne se lisent plus pareil. */
.page { display: block; width: 100%; }

/* Bloc de section dans les pages de diagnostic : c'est l'espace entre deux
   sections numerotees qui les separe, rien d'autre. */
.section { display: block; margin: 0 0 26px; }

/* Tableau des marques : pleine largeur, comme les autres tableaux de travail. */
.marques { width: 100%; }

/* « jamais », « aucun » : une valeur absente doit se lire comme absente. Sans
   regle, elle s'affichait avec le poids d'une vraie valeur — le contraire de
   ce que la classe annonce. */
.faint { color: var(--v4-faint); }

/* Pastille de marque, affichee a la place du logo quand le theme n'en a pas.
   Sans regle, elle sortait en texte nu au milieu de la barre laterale. */
.mark {
  display: inline-block; padding: 4px 10px;
  border-radius: var(--v4-r-sm);
  background: var(--v4-accent); color: var(--v4-primaire);
  font-weight: 600; font-size: 13px; letter-spacing: .04em;
}

/* ---------------------------------------------------------------- Envois */
.envoi-apercu {
  width: 100%; height: 520px; border: 1px solid var(--v4-trait);
  border-radius: 8px; background: var(--v4-page); margin: 10px 0;
}
.envoi-texte {
  white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
  color: var(--v4-mut); background: var(--v4-calme); padding: 12px; border-radius: 6px;
  max-height: 320px; overflow: auto;

/* Sélecteur de langue sur les pages sans compte : connexion, mot de passe
   provisoire, vérification du dépôt. Posé en haut à droite, à la place qu'il
   occupe dans la barre du haut une fois la session ouverte — on ne déplace pas
   un repère entre l'écran de connexion et le premier écran de l'outil. */
.lang-nu {
  position: absolute; top: 18px; right: 24px; z-index: 5;
}
@media (max-width: 640px) {
  .lang-nu { top: 12px; right: 12px; }
}

/* Avertissement posé au-dessus d'un tableau de contrôles dont les constats
   sont figés dans la langue de leur mesure. Discret : c'est une explication,
   pas une alerte — rien n'est cassé, il manque seulement une relance. */
.score-fige {
  margin: 0 0 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--v4-mut); background: var(--v4-calme);
  border-left: 3px solid var(--v4-trait-2); border-radius: 0 4px 4px 0;
}