/* Feuille de style minimale, sans dépendance externe. Deux colonnes de
   cartes, typographie système, contrastes sobres. */

:root {
  --fond: #f4f2ee;
  --carte: #ffffff;
  --bord: #e0e0e0;
  --texte: #1a1a1a;
  --discret: #666666;
  --bleu: #0a66c2;
  --alerte: #b3261e;
  --succes: #17603a;
  --avertissement: #6b5200;
  /* Turquoise réservé, dans toute l'application, à ce qui **explique** : le
     lien « À quoi sert cette fonctionnalité ? » et sa fiche. Même teinte que
     `--lat-actif` ci-dessous, assombrie pour tenir le contraste AA sur fond
     clair (#0b7186 mesure 5,1:1 sur `--carte`) — un turquoise à `#12c8f5` sur
     blanc n'en mesure que 2,1. */
  --aide: #0b7186;
  --aide-fond: #eaf6f9;
  --aide-fond-fort: #ddeef3;
  --aide-bord: #a8d4e0;
  --rayon: 10px;
  /* Espacement des surfaces flottantes — panneaux au survol, menus d'action,
     détail du score. Retour récurrent du propriétaire : ces panneaux
     paraissent serrés, le texte touche les bords. Le corriger panneau par
     panneau fait revenir le défaut au panneau suivant ; les valeurs vivent
     donc ici, et tout panneau flottant s'y branche au lieu de réinventer son
     `padding`. Élargir un panneau, c'est changer ces trois lignes. */
  --panneau-pad-x: 18px;
  --panneau-pad-y: 14px;
  --panneau-interligne: 10px;
  /* Menu latéral (contexte sombre) : palette et largeur reprises du style
     Jaisty (design/tokens.css : --sidebar-*), pour une identité visuelle
     cohérente entre les deux portails internes SAIFY. */
  --lat-fond: #0d1524;
  --lat-texte: #b6c1d4;
  /* TR-5 / 07-10 : `#6c7a94` mesurait **4,22:1** sur `--lat-fond` (axe-core,
     `color-contrast`), sous le seuil AA de 4,5:1 — et ce lien est porté par le
     gabarit de base, donc identique sur les 24 écrans : les sept lots de
     l'audit l'ont mesuré chacun de leur côté. `#8494ae` mesure **5,94:1**,
     et reste plus sourd que `--lat-texte` (10,06:1) : « quitter » ne doit pas
     se mettre à peser plus que le nom du compte à côté. Corrigé sur le token
     et non dans la règle locale, pour que la valeur ne se reperde pas. */
  --lat-texte-sep: #8494ae;
  --lat-actif: #12c8f5;
  --lat-largeur: 232px;
}

* { box-sizing: border-box; }

/* Tremblement résiduel persistant après le correctif scrollbar (retour
   utilisateur, toujours présent au changement de menu et à la navigation
   idée précédente/suivante) : la mesure instrumentée (Layout Instability
   API, `PerformanceObserver({type:'layout-shift', buffered:true})`) ne
   relève aucun décalage d'élément sur ces pages — ce n'est donc pas un CLS.
   Chaque changement d'écran ici est une navigation complète du navigateur
   (jamais un fragment HTMX, ni pour le menu ni pour les flèches ‹ › de la
   fiche idée) : par défaut, le navigateur efface tout l'écran avant de
   repeindre la page suivante — c'est ce blanc intermédiaire entre deux fonds
   sombres de menu qui se perçoit comme un tremblement. Transition de vue
   native du navigateur (support Chrome 126+, aucune dépendance ajoutée,
   dégradation silencieuse sans elle) : fondu enchaîné plutôt que blanc
   intermédiaire entre deux documents. */
@view-transition {
  navigation: auto;
}

/* Barre de défilement verticale toujours peinte, jamais seulement réservée :
   `scrollbar-gutter: stable` seul ne fait que garder la place, la piste grise
   elle-même apparaît/disparaît selon qu'une page dépasse la fenêtre — d'où un
   tremblement résiduel (piste qui clignote) à chaque navigation, y compris
   entre deux pages longues (l'instant du premier rendu, avant que le
   contenu ne déborde). `overflow-y: scroll` force la piste en permanence
   (retour utilisateur, persiste après le premier correctif). */
html { scrollbar-gutter: stable; overflow-y: scroll; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* 1780px depuis le 01/09, et non plus 1400 (TR-3). L'arbitrage d'origine
   visait les **lignes longues**, pas les écrans larges : au-delà de 1400, un
   paragraphe pleine largeur devient pénible à suivre des yeux. Une mise en
   colonnes satisfait cette raison-là à n'importe quelle largeur — et c'est
   précisément ce que la fiche contact fait désormais (`.fiche-atelier`).
   Sur l'écran de référence (1920), le plafond de 1400 laissait près de 300 px
   inutilisés à droite de chaque écran, barre latérale comprise.

   Un plafond demeure — 1780 et non « aucun » : sur un ultra-large, une page
   sans borne rendrait des lignes de 2 500 px que la mise en colonnes ne
   protège plus. Tout écran qui pose du texte en pleine largeur reste tenu de
   se brider lui-même. */
main { max-width: 1780px; margin: 0 auto; padding: 24px 20px 64px; }

a { color: var(--bleu); }

/* --- coquille : menu latéral + zone de contenu ------------------------
   Le scroll reste porté par le document (body), jamais par .zone-contenu :
   la barre fixe de l'illustration agrandie (focus.js, window.scroll), la
   colonne de simulation LinkedIn et les onglets du mode focus sont tous
   position:sticky/fixed calés sur ce scroll de fenêtre. */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }
.zone-contenu { flex: 1 1 auto; min-width: 0; }

.menu-lateral {
  flex: none; width: var(--lat-largeur);
  background: var(--lat-fond); color: var(--lat-texte);
  display: flex; flex-direction: column;
  padding: 20px 0 16px;
  position: sticky; top: 0; height: 100vh;
  /* Pas de défilement ici : il rognerait le panneau de la barre commune, plus
     large que la colonne. Seuls les liens défilent (`.menu-liens`), et la
     colonne passe au-dessus du contenu pour que le panneau le recouvre. */
  overflow: visible; z-index: 60;
}
/* Lanceur de la barre commune puis logo, sur une seule ligne (ADR-0107). */
.menu-tete { display: flex; align-items: center; gap: 6px; padding: 0 20px 0 12px; }
.menu-tete saify-barre { flex: none; }
.menu-lateral .marque {
  font-weight: 700; text-decoration: none; color: #fff;
  display: inline-flex; align-items: center; gap: 8px; font-size: 16px;
  padding: 0 8px;
}
.marque-icone { width: 24px; height: 24px; border-radius: 5px; }
/* Filet dégradé : seul usage de cet accent dans toute l'application (repris
   du style Jaisty, design/tokens.css — règle de marque « le dégradé Halo
   n'apparaît qu'une fois »). */
.menu-logo-filet {
  height: 2px; width: 56px; margin: 6px 20px 16px; border-radius: 1px;
  background: linear-gradient(90deg, #12c8f5, var(--bleu) 55%, #6717f5);
}
.menu-liens { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.menu-lien {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 20px; color: var(--lat-texte);
  text-decoration: none; font-size: 14px;
}
.menu-lien:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu-lien.actif {
  background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600;
  box-shadow: inset 3px 0 0 var(--lat-actif);
}
/* Les deux niveaux du menu ne se distinguaient que par un retrait et un
   point de taille (demande du propriétaire, 03/09). Ils se distinguent
   maintenant par leur *nature* : l'en-tête d'un groupe est un intertitre —
   petites capitales, chevron, jamais une destination —, ses enfants
   s'alignent le long d'un filet qui s'allume à l'entrée courante. */
.menu-lien--enfant {
  margin-left: 20px; padding-left: 18px; font-size: 13px;
  border-left: 1px solid rgba(255, 255, 255, .13);
}
/* Le filet lui-même porte l'accent, à la place du liseré de premier niveau :
   deux marques superposées se disputeraient le même bord. */
.menu-lien--enfant.actif { border-left-color: var(--lat-actif); box-shadow: none; }
.menu-groupe summary { list-style: none; cursor: pointer; }
.menu-groupe summary::-webkit-details-marker { display: none; }
.menu-groupe .menu-entete-groupe {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 20px 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--lat-texte-sep);
}
.menu-groupe .menu-entete-groupe::after {
  content: "\25BE"; font-size: 10px; letter-spacing: 0; margin-left: auto;
  opacity: .6; transition: transform .15s ease;
}
.menu-groupe:not([open]) .menu-entete-groupe::after { transform: rotate(-90deg); }
.menu-groupe[open] .menu-entete-groupe { color: var(--lat-texte); }
.menu-groupe summary:hover { color: #fff; }

.menu-bas { margin-top: auto; padding: 14px 20px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.menu-identite { font-size: 13px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.menu-identite-nom { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-identite a { color: var(--lat-texte-sep); font-size: 12.5px; }
.menu-identite a:hover { color: #fff; }

.bascule-contexte { display: flex; gap: 2px; margin: 0; background: rgba(255, 255, 255, .08); border-radius: 99px; padding: 2px; }
.bascule-contexte button {
  border: none; background: none; border-radius: 99px; padding: 4px 12px; font-size: 12.5px; color: var(--lat-texte);
}
.bascule-contexte button.actif { background: rgba(255, 255, 255, .16); color: #fff; }

@media (max-width: 760px) {
  .app-shell { flex-direction: column; }
  .menu-lateral {
    position: static; width: 100%; height: auto; flex-direction: row;
    flex-wrap: wrap; align-items: center; padding: 10px 12px; gap: 4px 12px;
  }
  .menu-lateral .marque, .menu-logo-filet { display: none; }
  .menu-tete { padding: 0; }
  .menu-liens { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .menu-lien { padding: 6px 10px; }
  .menu-lien.actif { box-shadow: none; border-radius: 6px; }
  /* Le menu se replie en une rangée : un filet vertical n'y désigne plus
     rien, et l'en-tête de groupe cesse d'être un intertitre au-dessus d'une
     colonne. Les deux se retirent plutôt que de se déformer. */
  .menu-lien--enfant { margin-left: 0; padding-left: 10px; border-left: none; }
  .menu-lien--enfant.actif { box-shadow: none; }
  .menu-groupe .menu-entete-groupe { padding: 6px 10px 2px; }
  .menu-bas { margin-top: 0; padding: 0; border-top: none; margin-left: auto; }
}

/* --- éléments communs ----------------------------------------------- */
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 0; }
h4 { font-size: 14px; margin: 12px 0 6px; text-transform: uppercase;
     letter-spacing: .04em; color: var(--discret); }

.entete-page {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 24px 0 12px; flex-wrap: wrap;
}
.discret { color: var(--discret); font-size: 13px; }
.lien-capture { display: inline-block; margin-top: 4px; font-size: 12px; white-space: nowrap; }
.vide { color: var(--discret); padding: 32px 0; }
.fil { margin: 0 0 8px; font-size: 14px; }
/* Bandeau de navigation de la fiche idée (option A retenue) : fil d'ariane,
   pastilles de position (ou indicateur chiffré au-delà d'une douzaine
   d'idées), flèches rondes précédente/suivante (option B) — maquette
   « Navigation de la fiche idée ». */
.nav-idee-bandeau {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; margin-bottom: 16px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: 9px; font-size: 13px;
}
.nav-idee-bandeau .fil { margin: 0; }
.nav-idee-milieu { display: flex; align-items: center; gap: 14px; }
.nav-idee-position { font-variant-numeric: tabular-nums; }
.nav-idee-pastilles { display: flex; align-items: center; gap: 6px; }
.nav-idee-pastilles .point { width: 6px; height: 6px; border-radius: 99px; background: var(--bord); }
.nav-idee-pastilles .point.actif { background: var(--bleu); width: 16px; border-radius: 4px; }
.nav-idee-fleches { display: flex; gap: 4px; }
.nav-idee-fleches a, .nav-idee-fleches span {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--bord); background: var(--carte);
  color: var(--texte); font-size: 14px; display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.nav-idee-fleches a:hover { border-color: var(--bleu); color: var(--bleu); }
.nav-idee-fleches span { color: var(--bord); }

/* Provenance (`depuis`) : deux liens, celui d'où l'on vient mis en avant
   (couleur normale), « Toutes les idées » en retrait (`.fil.discret`). */
.fil-retour { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fil.discret { text-decoration: none; }
.fil.discret:hover { color: var(--bleu); text-decoration: underline; }

/* --- séries (ADR-0043) : fil du post, liste des posts de la série ---- */
.fil-post-serie { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fil-post-serie .fil { flex-shrink: 0; }
.separateur-fil { color: var(--bord); }
.titre-serie-fil {
  color: var(--bleu); text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 14px;
}
.titre-serie-fil:hover { text-decoration: underline; }
.badge.serie { background: #e5effa; color: var(--bleu); margin-left: 8px; vertical-align: middle; }

.serie-posts { margin-top: 24px; }
.liste-posts-serie { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.post-serie-ligne {
  display: flex; align-items: center; gap: 12px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: 8px; padding: 10px 14px; text-decoration: none; color: inherit;
}
.post-serie-ligne:hover { border-color: var(--bleu); }
.numero-serie {
  width: 24px; height: 24px; border-radius: 50%; background: var(--fond); border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
  color: var(--discret); flex-shrink: 0;
}
.titre-serie-ligne { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 500; }
.meta-serie-ligne { flex-shrink: 0; }

/* --- édition en place d'une série (idea_detail.html, ?vue=edition) ----- */
.groupe-boutons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions-serie { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.post-serie-edition {
  display: flex; align-items: center; gap: 12px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px 8px 6px;
}
.rang-serie { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rang-serie form { display: contents; }
.rang-serie .empile { display: flex; flex-direction: column; gap: 2px; }
.rang-serie button {
  padding: 0; width: 22px; height: 20px; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: var(--discret);
}
.ligne-ajout-post {
  display: flex; align-items: center; gap: 10px; border: 1px dashed var(--bord);
  border-radius: 8px; padding: 10px 14px; background: transparent;
}
.ligne-ajout-post input { flex: 1 1 auto; }
.barre-edition-serie {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--bord);
}
.barre-edition-serie .discret { margin-right: auto; }

/* --- position dans la série et confirmation de retrait : même mécanique
   (<details> natif, zéro JS) — un menu déroulant ancré sous un résumé. --- */
.position-serie { position: relative; }
.position-serie > summary {
  list-style: none; cursor: pointer; font-size: 13px; color: var(--discret);
  border: 1px solid var(--bord); border-radius: 7px; padding: 2px 10px;
  font-variant-numeric: tabular-nums; background: var(--carte);
}
.position-serie > summary::-webkit-details-marker { display: none; }
.position-serie > summary:hover { border-color: var(--bleu); color: var(--bleu); }
.post-serie-edition .position-serie { margin-left: auto; }
.retirer-post { border-color: transparent; background: none; color: var(--discret); padding: 4px 8px; }
.retirer-post:hover { color: var(--alerte); border-color: var(--alerte); }
.menu-serie {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; left: auto;
  width: 380px; max-width: 78vw; background: var(--carte); border: 1px solid var(--bord);
  border-radius: 9px; box-shadow: 0 6px 20px rgba(0, 0, 0, .16); padding: 6px; text-align: left;
}
.menu-serie a {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px;
  text-decoration: none; color: var(--texte); font-size: 13.5px;
}
.menu-serie a:hover { background: var(--fond); }
.menu-serie a.actif { background: #e5effa; font-weight: 600; }
.menu-serie .n { color: var(--discret); font-size: 11.5px; font-weight: 700; width: 14px; flex: none; }
.menu-serie .t { flex: 1 1 auto; }
.menu-serie.confirme-retrait {
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  background: #fff4d6; border-color: #f0d99a;
}
.confirme-retrait span { font-size: 13.5px; color: var(--avertissement); }
.confirme-retrait .choix { display: flex; gap: 8px; flex-wrap: wrap; }
.confirme-retrait form { display: contents; }
.confirme-retrait button { font-size: 13px; padding: 5px 12px; }

/* --- écran Idées : ligne-série repliable, lignes-post imbriquées -------- */
.ligne-serie { background: #eaf2fb; }
.chevron-serie {
  border: none; background: none; padding: 2px; cursor: pointer; color: var(--bleu);
  display: flex; align-items: center; justify-content: center;
}
.chevron-serie svg { transition: transform .15s; }
.ligne-serie-repliee .chevron-serie svg { transform: rotate(-90deg); }
.ligne-post td:first-child { position: relative; }
.ligne-post td:nth-child(2) { padding-left: 30px; position: relative; }
.ligne-post td:nth-child(2)::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px; background: var(--bord);
}
.ligne-post td:nth-child(2)::after {
  content: ""; position: absolute; left: 14px; top: 50%; width: 10px; height: 1px; background: var(--bord);
}

button, .bouton {
  font: inherit; padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--bord); background: var(--carte);
  color: var(--texte); cursor: pointer; text-decoration: none;
  display: inline-block;
}
button:hover:not(:disabled), .bouton:hover { border-color: var(--bleu); color: var(--bleu); }
button:disabled { opacity: .45; cursor: default; }
button.principal, .bouton { background: var(--bleu); color: #fff; border-color: var(--bleu); }
button.principal:hover { background: #084d92; color: #fff; }
button.danger { color: var(--alerte); }
button.danger:hover { border-color: var(--alerte); color: var(--alerte); }
/* Bouton d'appoint, à hauteur de badge : il se pose **dans** une ligne de
   texte — à côté d'une étiquette, dans une cellule de tableau — sans en casser
   l'interligne. Un bouton pleine taille au milieu d'un nom de personne fait
   sauter la ligne et déplace tout ce qui suit. */
button.mini, .bouton.mini { padding: 2px 9px; font-size: 12.5px; border-radius: 5px; }

input, select, textarea {
  font: inherit; padding: 7px 9px; border: 1px solid var(--bord);
  border-radius: 6px; background: var(--carte); color: var(--texte);
  max-width: 100%;
}
textarea {
  width: 100%; resize: vertical;
  /* Support natif seulement (TR-4) : un prompt de 177 lignes n'a plus besoin
     de défilement interne dans un navigateur qui le comprend ; ailleurs, le
     `rows` calculé côté serveur et le `resize: vertical` restent le repli. */
  field-sizing: content; max-height: 70vh; min-height: 4em;
  line-height: 1.4;
}
/* Description d'idée : plafonnée à 10 lignes visibles (au lieu des 70vh
   génériques ci-dessus) — au-delà, défilement interne plutôt qu'un champ qui
   grossit sans fin. */
.champ-hauteur-limitee { max-height: calc(10 * 1.4em + 16px + 2px); overflow-y: auto; resize: none; }

/* --- revue d'une déclinaison en série (idea_serie_new.html) ------------ */
.liste-revue-serie { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.post-revue-serie {
  display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; align-items: start;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 12px;
}
.post-revue-serie-case { padding-top: 8px; }
.post-revue-serie input[type="text"] { font-weight: 600; }
.post-revue-serie textarea { grid-column: 2; font-size: 13.5px; }
@media (max-width: 640px) { .post-revue-serie { grid-template-columns: 1fr; } .post-revue-serie textarea { grid-column: 1; } }

/* --- bascule idée simple / série, fil d'étapes (idea_new.html, idea_serie_new.html) --- */
.bascule-mode {
  display: inline-flex; gap: 2px; background: #e7e4de; border-radius: 99px;
  padding: 3px; margin: 0 0 14px;
}
.bascule-mode a {
  border-radius: 99px; padding: 5px 16px; font-size: 14px; color: var(--discret);
  text-decoration: none; line-height: 1.4;
}
.bascule-mode a.actif { background: var(--carte); color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.fil-etapes { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 0 0 14px; flex-wrap: wrap; }
.fil-etapes .etape { display: flex; align-items: center; gap: 7px; color: var(--discret); }
.fil-etapes .etape .n {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--carte);
}
.fil-etapes .etape.faite { color: var(--succes); }
.fil-etapes .etape.faite .n { background: #dcf3e4; border-color: #b7e0c6; color: var(--succes); }
.fil-etapes .etape.active { color: var(--texte); font-weight: 600; }
.fil-etapes .etape.active .n { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.fil-etapes .tiret { width: 22px; height: 1px; background: var(--bord); }

/* --- barre de validation collante, revue de déclinaison ---------------- */
.barre-validation {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 12px 16px; margin-top: 16px; box-shadow: 0 -2px 12px rgba(20, 25, 35, .07);
}
.recap-validation { font-size: 13px; color: var(--discret); line-height: 1.35; }
.recap-validation b { color: var(--texte); font-size: 14px; font-weight: 700; }
.barre-validation .a-droite { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lien-retour { font-size: 13.5px; color: var(--discret); text-decoration: none; }
.lien-retour:hover { color: var(--bleu); }

.badge {
  display: inline-block; padding: 1px 8px; border-radius: 99px;
  background: #eceae6; color: var(--discret); font-size: 12px;
}
.badge.publie { background: #dcf3e4; color: #17603a; }
.badge.assigne { background: #e5effa; color: var(--bleu); }
/* Contrôle technique : signal consultatif, ambre — jamais rouge, rien n'est
   bloqué. L'infobulle (title) porte l'explication complète. */
.badge.controle-technique { background: #fdf2e0; color: #8a5a12; cursor: help; }
.statut-shortlisted { background: #fff2cc; color: #7a5b00; }
.statut-published { background: #dcf3e4; color: #17603a; }
.statut-rejected { background: #fbe0de; color: var(--alerte); }

.alerte {
  background: #fbe0de; color: var(--alerte); border: 1px solid #f2b8b5;
  padding: 10px 16px; border-radius: var(--rayon); margin: 16px auto;
  max-width: 1180px;
}
.alerte ul { margin: 6px 0 0; padding-left: 20px; }
.alerte-erreurs { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.alerte-erreurs form { margin: 0; flex: none; }
.alerte-erreurs button { background: none; border-color: transparent; color: var(--alerte); }
.alerte-erreurs button:hover { border-color: var(--alerte); }

/* --- avatar (initiales d'une voix ou d'un compte) ---------------------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--bleu);
  color: #fff; font-size: 11px; font-weight: 700; flex: none;
}

/* --- tableau de bord : grille de cartes (03-1) ------------------------- */
.grille-idees {
  display: grid; gap: 16px; margin-top: 4px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.carte-idee {
  display: block; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px; text-decoration: none; color: var(--texte);
}
.carte-idee:hover { border-color: var(--bleu); }
.carte-idee-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.carte-idee-entete h3 { font-size: 16px; margin: 0; line-height: 1.35; }
.carte-idee-meta { margin: 4px 0 10px; }
.carte-idee-corps { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.carte-idee-voix { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.carte-idee-cout { margin: 0 0 6px; }
.carte-idee-enseignement {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--bord);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- tableaux -------------------------------------------------------- */
table {
  width: 100%; border-collapse: collapse; background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden;
}
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--bord); }
th { font-size: 13px; color: var(--discret); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
td.enseignement { max-width: 320px; }

.tableau-idees summary { cursor: pointer; font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.tableau-scroll { overflow-x: auto; }
.icone-texte { cursor: help; font-size: 15px; }
/* 09-5 : une ligne archivée s'estompait par `opacity: .55`, ce qui mettait
   **tout** son texte sous le seuil AA — badge « archivée » mesuré à 2,30:1,
   lien titre à 2,42:1. Une opacité de rang ne se rattrape pas : même à .85 le
   badge reste à 4,12:1, et la valeur n'est plus lisible dans le code puisque
   la couleur perçue dépend du fond.
   La ligne se distingue donc par un **fond** et non par une transparence :
   `--fond`, valeur déjà du projet, sur la table blanche. Mesures après :
   badge 4,78:1, lien titre 5,09:1, texte 15,57:1. L'archivée reste visible
   d'un coup d'œil, et se lit. */
/* TR-13, trait 2 : la conséquence d'un écart s'écrit à côté du badge qui le
   signale, plutôt que dans une infobulle. En ligne de tableau, elle passe à
   la ligne sous le badge — une cellule n'a pas la largeur d'une phrase. */
.motif-ecart { display: block; font-size: 12px; margin-top: 3px; max-width: 46ch; }

/* Causes de blocage de la collecte, sur le tableau de bord : une cause par
   ligne, les posts concernés en second plan — c'est la cause qu'on lève. */
.motifs-blocage { margin: 4px 0 0; padding-left: 20px; font-size: 13px; }
.motifs-blocage li { margin-bottom: 4px; }

/* File de travail du tableau de bord (TR-13, trait 3). Grammaire des cartes
   du rituel « Mon réseau » : un rang, ce qu'il y a à faire, pourquoi
   maintenant, et le geste — jamais une table. Le rang est décoratif (`<ol>`
   porte déjà l'ordre pour un lecteur d'écran). */
.file-travail { margin-bottom: 18px; }
.file-travail-entete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.file-travail-entete h2 { margin: 0; font-size: 18px; }
.compte-file {
  background: var(--bleu); color: #fff; border-radius: 99px;
  padding: 1px 10px; font-size: 13px; font-weight: 600;
}
.file-travail-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.carte-a-traiter {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 12px 14px;
}
.rang-file {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fond); color: var(--discret);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.carte-a-traiter .corps-tache { flex: 1; min-width: 0; }
.carte-a-traiter .quoi-tache { font-weight: 600; }
.carte-a-traiter .pourquoi-tache { font-size: 13px; color: var(--discret); margin: 3px 0 0; }
.carte-a-traiter .pourquoi-tache b { color: var(--texte); }
.carte-a-traiter > .bouton { flex: none; align-self: center; }
/* Le premier rang porte le geste principal : c'est celui qu'on veut voir en
   entrant, et le seul que la file recommande de faire tout de suite. Les
   suivants gardent la forme d'un bouton, pas son poids — trois boutons bleus
   empilés ne recommandent plus rien. */
.carte-a-traiter:first-child { border-color: var(--bleu); }
.carte-a-traiter:not(:first-child) > .bouton {
  background: var(--carte); color: var(--texte); border-color: var(--bord);
}
.carte-a-traiter:not(:first-child) > .bouton:hover { border-color: var(--bleu); color: var(--bleu); }

/* 16-6 : repère de sondage de /runner. Discret par construction — il ne doit
   pas attirer l'œil toutes les cinq secondes, seulement répondre à « d'où
   vient ce mouvement ? » quand on le cherche. La transition de vue est portée
   par `hx-swap="… transition:true"` ; on la coupe pour qui demande moins
   d'animation. */
.sonde-etat { font-size: 12px; margin: 0 0 8px; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

.ligne-archivee { background: var(--fond); }
.ligne-archivee:hover { background: #ece9e3; }

.etoiles { color: #d99a00; letter-spacing: 2px; white-space: nowrap; }
.etoiles.cliquables button {
  border: none; background: none; padding: 0 1px; font-size: 20px;
  color: #d99a00; line-height: 1;
}
.etoiles.cliquables .effacer { color: var(--discret); font-size: 14px; }
/* Toujours présente, inerte sans note à retirer (24/08) — voir
   `partials/proposal_rating.html`. */
.etoiles.cliquables .effacer:disabled { opacity: .3; cursor: default; }

/* --- filtres et formulaires ------------------------------------------ */
.filtres { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.filtres label { font-size: 13px; color: var(--discret); }
.filtres select { margin-left: 6px; }

.formulaire, .connexion form {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 20px; max-width: 720px;
  display: flex; flex-direction: column; gap: 6px;
}
/* `display: flex` d'une règle auteur l'emporte toujours sur `[hidden]` de la
   feuille de style du navigateur, même à spécificité égale (origine avant
   spécificité dans la cascade) — sans ceci, le formulaire d'édition de
   l'en-tête d'idée restait visible sous la vue lecture malgré `hidden`,
   même patron que `.activite-generation[hidden]`/`.lightbox[hidden]`. */
.formulaire[hidden] { display: none; }
.formulaire label, .connexion label { font-weight: 600; margin-top: 10px; }
.formulaire button { margin-top: 16px; align-self: flex-start; }
.actions-creation-idee { display: flex; gap: 10px; flex-wrap: wrap; }
.actions-creation-idee button { margin-top: 0; }
.formulaire fieldset {
  border: 1px solid var(--bord); border-radius: 6px; margin-top: 12px;
}
.formulaire legend { font-weight: 600; padding: 0 6px; }
.case { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px;
        font-weight: 400 !important; }
/* Cases dont le libellé porte une explication : elles s'empilent et alignent la
   case sur la première ligne du texte, jamais sur son milieu. */
.cases-declaration { display: grid; gap: 10px; margin: 4px 0 14px; }
.cases-declaration .case { align-items: flex-start; margin-right: 0; font-size: 13px; }
.cases-declaration .case input { margin-top: 3px; flex: 0 0 auto; }
.cases-declaration .case span { color: var(--discret); line-height: 1.45; }
.cases-declaration .case b { color: var(--texte); }
.en-ligne { display: flex; gap: 8px; align-items: center; }

.connexion { max-width: 380px; margin: 12vh auto; }
.connexion button { margin-top: 18px; width: 100%; background: var(--bleu);
                    color: #fff; border-color: var(--bleu); }
.logo-connexion { display: block; width: 120px; margin: 0 auto 12px; }
.logo-connexion-petit { width: 48px; margin-bottom: 16px; }

/* Bouton Microsoft (01-1) : traitement clair et bordé plutôt que le bleu
   d'action générique de l'application, pour signaler sans ambiguïté la
   redirection vers un tiers d'identité. */
.bouton-microsoft {
  background: #fff; color: var(--texte); border: 1px solid #8a8886;
  width: 100%; font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; gap: 10px;
}
.bouton-microsoft:hover { background: #f3f2f1; color: var(--texte); border-color: #605e5c; }
.bouton-microsoft::before {
  content: ""; display: inline-block; width: 18px; height: 18px; flex: none;
  background-repeat: no-repeat; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23F25022'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237FBA00'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300A4EF'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23FFB900'/%3E%3C/svg%3E");
}

/* --- création d'idée : aperçu style LinkedIn (04-2) -------------------- */
.creation-disposition { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.creation-disposition .formulaire { flex: 1 1 480px; }
.apercu-post { flex: 1 1 320px; max-width: 380px; position: sticky; top: 20px; }
.apercu-etiquette { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
.apercu-carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 16px;
}
.apercu-entete { display: flex; align-items: center; gap: 10px; }
.apercu-entete .avatar { width: 36px; height: 36px; font-size: 13px; }
.apercu-nom { font-weight: 600; font-size: 14px; }
.apercu-sous-titre { font-size: 12px; }
.apercu-titre { font-weight: 600; margin: 12px 0 6px; }
.apercu-contenu {
  white-space: pre-wrap; word-wrap: break-word; margin: 0;
  max-height: 8em; overflow: hidden;
}

/* --- détail d'une idée ------------------------------------------------ */
.entete-idee {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 20px; margin-bottom: 20px;
}
.entete-idee .meta { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.ligne-titre-idee { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ligne-titre-idee h1 { margin: 0; }
.action-titre-idee { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.action-titre-idee button { white-space: nowrap; }
.bouton-editer-entete { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; color: var(--discret); }
.bouton-editer-entete svg { width: 13px; height: 13px; }
.bouton-editer-entete:hover { color: var(--bleu); border-color: var(--bleu); }

/* --- bloc d'en-tête basculé en édition (idea_detail.html) --------------- */
.champs-entete { margin-top: 0; }
.barre-mode-edition { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -6px 0 4px; }
.etiquette-mode {
  font-size: 12px; font-weight: 600; color: var(--bleu);
  background: #e5effa; border-radius: 99px; padding: 2px 10px;
}
.champ-titre-idee { font-size: 24px; font-weight: 700; padding: 6px 9px; }
.aide-champ { margin: 2px 0 0; }
.actions-edition-entete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.actions-edition-entete .discret { margin-left: auto; }

/* --- description/thème d'une idée : dépasser le plafond de 10 lignes --- */
.lien-voir-tout {
  display: inline-block; margin-top: 6px; padding: 0; border: none; background: none;
  color: var(--bleu); font-size: 13px; cursor: pointer;
}
.lien-voir-tout:hover { text-decoration: underline; }
.source pre.description-etendue { max-height: none; overflow-y: visible; }
.lien-externe { display: inline-flex; align-items: center; gap: 6px; }
.icone-globe { width: 14px; height: 14px; flex: none; }
.source pre, .bloc-texte pre {
  white-space: pre-wrap; word-wrap: break-word; font-family: inherit;
  background: #faf9f7; border: 1px solid var(--bord); border-radius: 6px;
  padding: 12px; margin: 8px 0 0;
}
/* Description/thème d'une idée (fiche idée, lecture) : même plafond que le
   champ d'édition (.champ-hauteur-limitee) — ce `<pre>` n'est pas un champ de
   formulaire, field-sizing/JS n'ont pas prise dessus, juste ce défilement
   interne. Le texte d'un post généré (.bloc-texte, proposal_card.html) reste
   sans plafond : c'est le contenu qu'on relit en entier. */
.source pre { line-height: 1.4; max-height: calc(10 * 1.4em + 24px); overflow-y: auto; }
.enseignement-champ { margin-top: 16px; }
.enseignement-champ label { font-weight: 600; display: block; margin-bottom: 4px; }
.enregistre { display: block; margin-top: 2px; }

/* --- sources complémentaires (fiche idée + création) -------------------- */
.bloc-sources { margin-top: 16px; }
.etiquette-sources { font-weight: 600; margin-bottom: 4px; }
.entete-sources { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entete-sources .etiquette-sources { margin-bottom: 0; }
/* Bouton sur la ligne d'en-tête plutôt qu'un champ d'ajout toujours affiché
   (consomme de la place même sans rien à ajouter) : <details> natif, comme
   .position-serie/.reattribution ailleurs dans ce gabarit — zéro JS. */
.ajout-source > summary {
  list-style: none; cursor: pointer; font-size: 13px; color: var(--bleu);
  border: 1px solid var(--bord); border-radius: 6px; padding: 3px 10px; background: var(--carte);
}
.ajout-source > summary::-webkit-details-marker { display: none; }
.ajout-source > summary:hover { border-color: var(--bleu); }
.ajout-source .source-ajout { margin-top: 8px; }
.liste-sources { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.source-ligne { display: flex; align-items: center; gap: 8px; }
.source-url-champ { flex: 1 1 auto; margin: 0; }
.source-url-champ input { width: 100%; }
.source-ajout { display: flex; gap: 8px; margin-top: 4px; }
.source-ajout input { flex: 1 1 auto; }
#champs-sources { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.champ-source-ligne { display: flex; align-items: center; gap: 8px; }
.champ-source-ligne input { flex: 1 1 auto; }

/* Infobulle de source : plus large (jusqu'à un tiers d'écran), plus de marge,
   défilement à la souris sur un texte scrapé potentiellement long — reprend
   le composant .infobulle partagé (radar, indicateurs) sans le modifier pour
   les autres usages. Gap réduit avant la bulle et persistance au survol de
   la bulle elle-même : sans ça, quitter le petit badge pour rejoindre la
   bulle (positionnée au-dessus, hors de sa propre boîte de survol) la referme
   avant que la souris n'y arrive. */
.liste-sources .infobulle {
  /* Pas de `bottom` ici : identique au défaut de `.infobulle`, et une
     déclaration explicite à deux classes primerait sur `.infobulle--bas`
     (une classe) qui doit pouvoir la faire basculer vers le bas. */
  width: min(46vw, 640px);
}
.liste-sources .infobulle-nom { word-break: break-all; }
.liste-sources .infobulle-detail {
  padding: 20px 26px 26px; max-height: 320px; overflow-y: auto;
}
.liste-sources .badge-indicateur:hover + .infobulle,
.liste-sources .infobulle:hover {
  opacity: 1; pointer-events: auto;
  transform: translateX(calc(-50% + var(--decalage, 0px))) translateY(0);
}

/* Accroches écrites avant le post (ADR-0057). Reprend la mécanique du bloc
   des sources — même colonne, même en-tête, même disclosure d'ajout — pour
   que l'étape se lise comme une préparation de plus, pas comme un module à
   part. L'étoile pleine est le seul signal fort de la liste : une accroche
   retenue partira dans le prochain post. */
.bloc-accroches { margin-top: 12px; }
.liste-accroches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lot-accroches + .lot-accroches { margin-top: 12px; }
.accroche-ligne {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--carte);
}
.accroche-ligne--retenue { border-color: var(--bleu); box-shadow: inset 3px 0 0 var(--bleu); }
.accroche-ligne--utilisee { opacity: .62; }
.accroche-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.accroche-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.accroche-meta { margin: 0; font-size: .86em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.puce-ressort {
  border: 1px solid var(--bord); border-radius: 999px; padding: 1px 8px;
  font-size: .92em; white-space: nowrap;
}
/* Le job d'un post (ADR-0057), à côté de son angle : une étiquette de
   lecture, discrète — ce n'est pas un statut, et rien ne s'y filtre. */
.puce-job {
  border: 1px solid var(--bord); border-radius: 999px; padding: 1px 8px;
  font-size: .78em; color: var(--discret); white-space: nowrap;
}
/* Concours (ADR-0068) : la puce du couple ressort × registre imposé. */
.puce-concours { border-style: dashed; font-style: italic; }
.bascule-accroche {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 1.15em; line-height: 1.4; color: var(--discret);
}
.bascule-accroche[aria-pressed="true"] { color: var(--bleu); }
.bascule-accroche[disabled] { cursor: default; color: var(--succes); }

.generation { margin: 16px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Jauge stylée plutôt que le rendu brut du navigateur (04-3). */
.generation progress {
  appearance: none; -webkit-appearance: none; border: none; width: 260px; height: 10px;
  border-radius: 99px; overflow: hidden; background: var(--bord);
}
.generation progress::-webkit-progress-bar { background: var(--bord); border-radius: 99px; }
.generation progress::-webkit-progress-value { background: var(--bleu); border-radius: 99px; transition: width .3s ease; }
.generation progress::-moz-progress-bar { background: var(--bleu); border-radius: 99px; }

.voix { margin-top: 32px; }
/* ===================== 05-21 : cartes verticales ======================
   Trois cartes en largeur, cible de travail 1920 px (arbitrage du 24/08 :
   « je veux toujours prévoir le travail sur un écran large 1920 total, je me
   fiche de la compatibilité 1280 »). 3 × 520 + 2 × 24 = 1 608 px pour les
   1 632 px utiles de la zone de contenu.

   `auto-fit` avec une largeur **bornée** et `justify-content: center` : une
   carte seule se pose au centre au lieu de rester collée à gauche avec deux
   pistes vides (05-24, le défaut relevé au round 3). 520 px et non 390 :
   c'est la colonne du fil LinkedIn desktop, pas le gabarit mobile. */
.grille {
  display: grid; gap: 24px; justify-content: center;
  grid-template-columns: repeat(auto-fit, 520px);
  /* Le gabarit de lecture de l'application est borné à 1 400 px (`main`), ce
     qui est la bonne largeur pour du texte suivi mais laisse la grille à deux
     colonnes sur un écran de 1 920 — or la cible de travail est trois cartes
     en largeur (arbitrage du 24/08). Elle seule s'en échappe, symétriquement,
     sans jamais déborder de la zone de contenu : `min()` la ramène d'elle-même
     à deux puis une colonne sur un écran plus étroit. */
  width: min(1608px, calc(100vw - var(--lat-largeur) - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
}
.carte-prop { width: 520px; display: flex; flex-direction: column; }
/* Ni fond teinté ni opacité sur la carte : la première rendrait le post simulé
   infidèle (LinkedIn est blanc), la seconde mettrait tout son texte sous le
   seuil de contraste — la leçon de 09-5. L'état se dit par le badge, et par un
   filet coloré sur le bandeau de chrome, qui n'est pas le post. */
.carte-prop.carte-shortlistee > .bandeau-carte { border-left: 3px solid #e8dba0; padding-left: 10px; }
.carte-prop.carte-archivee > .bandeau-carte { border-left: 3px solid var(--bord); padding-left: 10px; }
.carte-prop.carte-archivee .angle { color: var(--discret); }

/* --- le bandeau de chrome Laiky : au-dessus du post, jamais dedans --- */
.bandeau-carte { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 8px; }
.ligne-titre { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ligne-titre .angle { font-weight: 600; font-size: 14px; flex: 1 1 auto; min-width: 0; }
.ligne-titre .version-carte { color: var(--discret); font-size: 12px; white-space: nowrap; }
.ligne-commandes { display: flex; align-items: center; gap: 8px; }
.ligne-commandes form { margin: 0; }
.lien-focus { font-size: 13px; padding: 6px 12px; }
.lien-post { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 6px 12px; }
.bouton-shortlist {
  border: 1px solid var(--bord); background: var(--carte); border-radius: 6px;
  padding: 6px 12px; font: inherit; font-size: 13px; color: var(--texte);
}
.bouton-shortlist:hover { border-color: #7a5b00; color: #7a5b00; }
.bouton-shortlist.actif { background: #fff2cc; color: #7a5b00; border-color: #e8d48a; }
/* La note est calée à droite de la ligne : c'est le seul contrôle qu'on
   cherche par sa position plutôt que par son libellé. */
.ligne-commandes .etoiles { margin-left: auto; }

/* Menu « ⋯ » : tout ce qui ne se fait pas d'un clic. Les commandes rares
   étaient huit boutons en pied de carte — c'est ce que « beaucoup moins de
   commandes » demandait de replier, pas de supprimer. */
.menu-plus { position: relative; }
.menu-plus > summary {
  list-style: none; cursor: pointer; font-size: 15px; line-height: 1.3;
  color: var(--discret); border: 1px solid var(--bord); border-radius: 6px;
  padding: 4px 11px; background: var(--carte);
}
.menu-plus > summary::-webkit-details-marker { display: none; }
.menu-plus > summary:hover { border-color: var(--bleu); color: var(--bleu); }
.menu-actions {
  position: absolute; z-index: 15; top: 100%; right: 0; margin-top: 4px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(20,25,35,.15);
  padding: var(--panneau-pad-y) var(--panneau-pad-x);
  display: flex; flex-direction: column; gap: var(--panneau-interligne);
  min-width: 260px;
}
.menu-actions button, .menu-actions select, .menu-actions summary { font-size: 13px; }
.menu-actions > form > button { width: 100%; text-align: left; }
.menu-actions .sous-menu > summary { cursor: pointer; }
.menu-actions .formulaire-reattribution { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* --- le post simulé, fidèle à prompts/linkedin_mockup.py --- */
.carte-linkedin {
  background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden;
}
.entete-linkedin { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 4px; }
.avatar-voix {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: rgb(72,101,132); color: #fff; font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.entete-linkedin .nom-voix { font-weight: 700; color: #000; font-size: 14.5px; }
.entete-linkedin .sous-titre-voix,
.entete-linkedin .horodatage-voix { color: #666; font-size: 12.5px; margin-top: 1px; }
.illustration-linkedin { margin-top: 12px; }
.illustration-linkedin img { display: block; width: 100%; height: auto; cursor: zoom-in; }
/* Coupure : six lignes, comme LinkedIn au-dessus du « voir plus ». Le nombre
   exact de caractères que LinkedIn tronquera reste celui de la miniature
   (`compute_preview`, mode focus) — ici on juge l'accroche. */
.corps-post {
  padding: 12px 18px 0; color: #000; font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.corps-post.deplie { display: block; -webkit-line-clamp: none; overflow: visible; }
.voir-plus {
  border: none; background: none; padding: 2px 18px 0; margin: 0;
  font: inherit; font-size: 14px; color: #666; cursor: pointer;
}
.voir-plus:hover { color: var(--bleu); text-decoration: underline; }
.pied-linkedin { padding: 12px 18px 16px; }
.pied-linkedin .filet { border: none; border-top: 1px solid #e0e0e0; margin: 0 0 11px; }
.reactions-linkedin { display: flex; justify-content: space-between; color: #666; font-size: 13px; }

/* --- ce qui reste sous le post --- */
.pied-carte { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 8px 2px 0; }
.pied-carte .carte-technique { margin: 0; }
.carte-prop .adapte-depuis { margin: 6px 2px 0; }
.carte-prop .illustration-suggestion { padding: 8px 2px 0; margin: 0; }

/* --- carte de proposition --------------------------------------------- */
.carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 16px;
}
.carte-entete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.carte-entete-droite { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.titre-post { display: flex; align-items: center; gap: 4px; }
.angle { font-weight: 600; margin-right: 6px; }
.edition-titre { position: relative; }
.edition-titre summary {
  cursor: pointer; list-style: none; color: var(--discret); font-size: 13px;
  padding: 2px 4px; border-radius: 4px;
}
.edition-titre summary::-webkit-details-marker { display: none; }
.edition-titre summary:hover { color: var(--bleu); background: var(--fond); }
.edition-titre form {
  position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px;
  display: flex; gap: 6px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: 6px; padding: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.15); white-space: nowrap;
}
.edition-titre input[type="text"] { min-width: 240px; }
.carte-archivee { opacity: .6; }
/* Fond distinct pour une proposition shortlistée dans les grilles — jaune-gris
   discret, dérivé du badge .statut-shortlisted (#fff2cc) mais adouci pour ne
   pas rivaliser avec lui visuellement. */
/* Vaut pour la mini-carte de la grille condensée ; la carte de proposition,
   elle, se marque par un filet sur son bandeau (05-21). */
.mini-carte.carte-shortlistee { background: #faf6e8; border-color: #e8dba0; }
.miniature, .illustration {
  width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--bord);
  display: block;
}
.illustration { margin-top: 10px; }
.illustration-conteneur { position: relative; margin-top: 10px; }
.illustration-conteneur .illustration { margin-top: 0; }
.bouton-telecharger {
  display: inline-block; margin-top: 6px; font-size: 13px; text-decoration: none;
}
.bouton-telecharger:hover { color: var(--bleu); }
.illustration-actions-focus { margin: 0 0 8px; text-align: right; }
.miniature-conteneur { position: relative; }
.badge-linkedin {
  position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px;
  border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
/* Trois usages de l'icône, jamais interchangeables :
   `.icone-linkedin` s'insère DANS un lien texte (« Voir le post ↗ ») ;
   `.icone-action` EST le lien, seule dans sa cible cliquable (barre
   d'actions d'un prospect) ;
   `.vers-profil` reprend la petite icône mais lui donne sa propre cible, à
   côté d'un nom qui mène ailleurs (« Mon réseau ») — d'où la cible élargie
   sans que l'icône grossisse. */
.icone-linkedin {
  width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px;
}
.icone-action { width: 22px; height: 22px; opacity: .8; transition: opacity .15s; }
a:hover > .icone-action { opacity: 1; }

/* Nom d'une personne dans « Mon réseau » : icône vers LinkedIn, nom vers la
   fiche. `inline-flex` pour que les deux ne se séparent jamais en fin de
   ligne dans une cellule de tableau. */
/* `baseline` et non `center` : quand le nom passe à la ligne (« Violaine
   Briens (Tavernier) »), une icône centrée verticalement se retrouve à cheval
   sur les deux lignes — même arbitrage que `.carte-compte .nom-compte`. */
.identite-lien { display: inline-flex; align-items: baseline; gap: 6px; }
/* 26 px de cible, jamais moins (§14) — les marges négatives empêchent cette
   cible d'écarter les lignes d'un tableau. */
.vers-profil {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; min-height: 26px; margin: -6px 0 -6px -4px; flex: none;
  border-radius: 6px; opacity: .75; transition: opacity .15s, background .15s;
}
.vers-profil:hover { opacity: 1; background: var(--fond); }
.vers-profil .icone-linkedin { margin-right: 0; vertical-align: 0; }
/* En-tête d'une fiche : l'icône se met à l'échelle du titre, sinon elle
   paraît tombée là par accident à côté d'un nom de 24 px. */
h1.identite-lien .icone-linkedin { width: 19px; height: 19px; }
h1.identite-lien .vers-profil { min-width: 30px; min-height: 30px; }
.coupure {
  font-size: 13px; color: var(--discret); font-style: italic;
  margin: 10px 0; padding-left: 10px; border-left: 3px solid var(--bord);
}
.bloc-texte { position: relative; }
/* Le bouton flotte au-dessus du texte : on réserve sa place à droite des
   premières lignes pour qu'aucun mot ne passe dessous. */
.bloc-texte pre { padding-top: 40px; }
.bloc-texte .copier { position: absolute; top: 8px; right: 8px; font-size: 13px;
                      padding: 4px 10px; }
.illustration-suggestion { font-size: 14px; margin: 10px 0 0; }
.adapte-depuis { margin: 4px 0 0; }

[data-agrandir] { cursor: zoom-in; }

/* --- encart flottant de génération, toutes pages (base.html + base.js) -- */
/* 05-30 : en `top: 16px`, l'encart recouvre le bouton « Marquer publié » du
   bandeau d'action du mode focus et déborde sur « Assigner à… » — les deux
   contrôles les plus utilisés de cet écran. Il signale une génération qui
   tourne **n'importe où** dans l'application, donc il ne peut pas simplement
   disparaître ici : sur un écran qui porte un bandeau d'action, il passe en
   bas de fenêtre (`:has(#focus)`, plus bas). Bas de fenêtre plutôt qu'un
   décalage vertical chiffré : une valeur en pixels serait juste le jour où on
   la mesure et fausse au premier bouton ajouté au bandeau. */
.activite-generation {
  position: fixed; top: 16px; right: 16px; z-index: 900;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 10px;
  box-shadow: 0 4px 14px rgba(20,25,35,.18);
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--texte); text-decoration: none;
  transition: opacity 1s ease .3s;
}
.activite-generation:hover { border-color: var(--bleu); }
body:has(#focus) .activite-generation { top: auto; bottom: 16px; }
/* Sans destination, l'encart n'est pas un lien : il ne doit pas s'annoncer
   comme tel au survol. */
.activite-generation:not([href]) { cursor: default; }
.activite-generation:not([href]):hover { border-color: var(--bord); }
.activite-generation[hidden] { display: none; }
.activite-generation.activite-terminee { opacity: 0; }
.activite-anneau-svg { width: 32px; height: 32px; flex-shrink: 0; transform: rotate(-90deg); }
.activite-anneau-fond { fill: none; stroke: var(--bord); stroke-width: 3.5; }
.activite-anneau-avance { fill: none; stroke: var(--bleu); stroke-width: 3.5; stroke-linecap: round; }
.activite-texte { display: flex; flex-direction: column; gap: 1px; }
.activite-titre { font-size: 12.5px; }
.activite-sous-titre { color: var(--discret); font-size: 11.5px; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .85); cursor: zoom-out; padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 1001;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.14); color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-nav:hover { background: rgba(255,255,255,.26); }
.lightbox-nav--precedent { left: 24px; }
.lightbox-nav--suivant { right: 24px; }
.lightbox-activer {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 1001; cursor: default;
}
.lightbox-activer .badge { background: rgba(255,255,255,.9); font-size: 13px; padding: 6px 14px; }
.lightbox-activer button { cursor: pointer; }

.illustration-versions { margin-top: 10px; }
.illustration-versions-liste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.illustration-version {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 90px;
}
.illustration-version img {
  width: 90px; height: 90px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--bord);
}
.illustration-version.actif img { border-color: var(--bleu); border-width: 2px; }
.illustration-version form { margin: 0; }
.illustration-version button { font-size: 12px; padding: 2px 8px; }

.erreur-technique { margin-top: 4px; font-size: 12px; }
.erreur-technique summary { cursor: pointer; }
.erreur-technique pre {
  white-space: pre-wrap; word-break: break-word; margin: 4px 0 0;
  background: rgba(0,0,0,.04); padding: 6px 8px; border-radius: 4px;
}

.carte-note { display: flex; align-items: center; gap: 8px; margin: 10px 0; }

.carte-technique { margin-top: 10px; font-size: 13px; }
.carte-technique summary { cursor: pointer; color: var(--discret); }
.carte-technique p { margin: 6px 0 0; }

.reattribution { margin-top: 10px; }
.reattribution summary { cursor: pointer; color: var(--bleu); font-size: 14px; }
.formulaire-reattribution {
  margin-top: 10px; display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
}
.filet { width: 100%; border: none; border-top: 1px solid var(--bord); margin: 0; }
.fil-archive { font-size: 13px; margin: 12px 0 0; }

.commentaires ul { list-style: none; margin: 0; padding: 0; }
.commentaires li {
  border-left: 3px solid var(--bord); padding: 4px 0 4px 10px; margin-bottom: 8px;
}
.commentaires li p { margin: 2px 0 0; }
.commentaires .auteur { font-weight: 600; font-size: 13px; margin-right: 6px; }
.commentaires form { margin-top: 8px; display: flex; flex-direction: column;
                     align-items: flex-start; gap: 6px; }

.televersement {
  margin-top: 12px; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; font-size: 13px;
}
.televersement label { color: var(--discret); }

.actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bord);
}
.actions form { margin: 0; }
.badge.modele { background: #efe9fb; color: #5b3fa8; font-family: ui-monospace, monospace; }

/* --- configuration : onglets (06-8) ------------------------------------ */
.onglets {
  display: flex; gap: 2px; border-bottom: 1px solid var(--bord); margin-bottom: 20px;
  position: sticky; top: 0; background: var(--fond); padding-top: 4px; z-index: 5; flex-wrap: wrap;
}
.onglet {
  border: none; background: none; padding: 10px 16px; font-size: 14px; color: var(--discret);
  border-bottom: 2px solid transparent; font-weight: 600; cursor: pointer;
}
.onglet:hover { color: var(--texte); }
.onglet.actif { color: var(--bleu); border-bottom-color: var(--bleu); }
.onglet .compte { font-weight: 400; color: var(--discret); font-size: 12px; }

.panneau-config h2 { margin: 0 0 8px; }
.sous-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--bord); }

/* --- Engagement : prospects (Lot 3) ------------------------------------ */
.table-prospects td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.table-prospects .badge { margin: 2px 4px 2px 0; }
.jauge-score { width: 90px; height: 6px; border-radius: 99px; background: var(--bord); overflow: hidden; }
.jauge-score-remplissage { height: 100%; border-radius: 99px; }
.jauge-score--bon { background: var(--succes); }
.jauge-score--moyen { background: var(--avertissement); }
.jauge-score--mauvais { background: var(--alerte); }

/* --- Engagement : vue d'ensemble (Lot 2) ------------------------------- */
.tuiles-engagement {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px;
}
.tuile-engagement {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px;
}
.tuile-engagement .n { font-size: 26px; font-weight: 700; }
.tuile-engagement .l { font-size: 13px; color: var(--discret); }
.tuile-engagement .delta { font-size: 12px; color: var(--discret); margin-top: 4px; }
.tuile-engagement .delta.positif { color: var(--succes, #17603a); }
.tuile-engagement .delta.negatif { color: var(--alerte); }
@media (max-width: 900px) { .tuiles-engagement { grid-template-columns: repeat(2, 1fr); } }

.courbe-entete { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.courbe-entete h3 { margin: 0; }
.courbe-entete select { margin-left: 6px; }
.conteneur-courbe { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px; margin: 10px 0 24px; }
.legende-courbe { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; font-size: 12.5px; }
.puce-legende { display: inline-block; width: 10px; height: 3px; border-radius: 2px; }
.puce-legende--post { background: var(--bleu); }
.puce-legende--moyenne { background: var(--discret); }
.sparkline { color: var(--bleu); vertical-align: middle; }

.statut-hot { background: #fbe2e0; color: var(--alerte); }
.statut-warm { background: #fdf1d6; color: #8a6a00; }
.statut-cold { background: #e5effa; color: var(--bleu); }
.statut-archived { background: #eceae6; color: var(--discret); }

/* --- Engagement : réglages (Lot 4) ------------------------------------- */
/* align-items: flex-start (pas flex-end) : un champ dont le contenu diffère
   en hauteur (ex. une note sous le champ) ne doit jamais désaligner les
   autres label+input de la même ligne — retour utilisateur sur la rétention
   RGPD, autrefois alignée par le bas avec sa note et donc décalée vers le
   haut par rapport aux autres champs. */
.reglages-engagement { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.reglages-engagement .champ { display: flex; flex-direction: column; gap: 3px; flex: 1 1 160px; min-width: 0; }
.reglages-engagement .champ label { font-size: 12px; font-weight: 600; color: var(--discret); }
.reglages-engagement .champ input, .reglages-engagement .champ select { width: 100%; }
.reglages-engagement p, .reglages-engagement > button { flex-basis: 100%; }
/* Une valeur que l'écran **montre** sans la proposer : décision de code, pas
   réglage. Un `<input readonly>` tenait ce rôle et se lisait comme une panne —
   « je ne peux pas modifier ce champ » (02/09/2026). Aligné sur la hauteur des
   champs voisins pour que la ligne reste droite. */
.reglages-engagement .valeur-figee {
  padding: 6px 0; font-size: 14px; font-weight: 600;
}
.reglages-engagement .valeur-figee .discret { font-weight: 400; }
.sous-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.sous-section h3 { font-size: 15px; margin: 0 0 6px; }

/* --- voix de génération : cartes unifiées (06-4/06-5) ------------------- */
.liste-voix { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.carte-voix {
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: end;
}
.carte-voix.nouvelle { border-style: dashed; background: var(--fond); }
.carte-voix .champ { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; min-width: 0; }
.carte-voix .champ label, .carte-voix .etiquette-champ { font-size: 12px; font-weight: 600; color: var(--discret); }
.carte-voix .champ input, .carte-voix .champ select { width: 100%; }
.carte-voix .champ.slug input {
  font-family: ui-monospace, monospace; font-size: 13px; color: var(--discret); background: var(--fond);
}
.champ-etat { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.actions-voix { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 0 0 auto; }
.carte-voix-lecture { align-items: center; }
.carte-voix-lecture .champ { flex: 1 1 120px; }

/* --- configuration ---------------------------------------------------- */
.bloc-config {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 20px; margin-bottom: 24px;
}
.bloc-config h2 { margin-bottom: 8px; }
.bloc-config table { margin: 12px 0; }
.bloc-config table.etat { max-width: 720px; }
.bloc-config table.etat th { width: 260px; vertical-align: top; }
.succes {
  background: #dcf3e4; color: var(--succes); border: 1px solid #b7e0c6;
  padding: 8px 14px; border-radius: 6px;
}
.actions-ligne { display: flex; gap: 6px; flex-wrap: wrap; }
.actions-ligne form { margin: 0; }
.ajout-modele { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ajout-modele input { flex: 1 1 260px; }

.edition-prompt textarea { font-family: ui-monospace, monospace; font-size: 13px; }
.edition-prompt .ligne-actions {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px;
}
.edition-prompt .fichier { font-size: 13px; color: var(--discret); }

.choix-modele { display: block; font-weight: 600; margin-top: 10px; }
.choix-modele.compact { display: inline-block; margin: 0; font-weight: 400; }
.choix-modele select { display: block; margin-top: 4px; }
.choix-modele.compact select {
  display: inline-block; margin-top: 0;
  /* Borne la largeur du menu déroulant compact : sans elle, un libellé long
     poussait le bouton d'action hors de sa carte (05-6). */
  max-width: 190px;
}
.tarif-modele { display: block; margin-top: 4px; }
.avertissement {
  background: #fff4d6; border: 1px solid #f0d99a; color: var(--avertissement);
  padding: 8px 12px; border-radius: 6px; font-size: 13px; margin: 8px 0 0;
}
/* Interrupteur (case à cocher stylée) — recopie d'illustration/report du
   statut shortlisté au moment de régénérer avec les commentaires. */
.interrupteur { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.interrupteur input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 34px; height: 20px; border-radius: 999px;
  background: var(--bord); position: relative; cursor: pointer; flex: none; margin: 0;
  transition: background .15s;
}
.interrupteur input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.interrupteur input[type="checkbox"]:checked { background: var(--bleu); }
.interrupteur input[type="checkbox"]:checked::after { left: 16px; }
code { font-family: ui-monospace, monospace; font-size: 13px;
       background: #f0eeea; padding: 1px 5px; border-radius: 4px; }

/* --- recommandations entre utilisateurs --------------------------------- */
.carte-recommandation {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 14px 16px; margin-bottom: 10px;
}
.titre-recommandation { font-weight: 600; margin: 2px 0 6px; }
.titre-recommandation a { color: var(--texte); text-decoration: none; }
.titre-recommandation a:hover { color: var(--bleu); }

/* --- publiés : capitalisation (07-1, 07-2, mockup 04) ------------------ */
.bilan {
  display: flex; gap: 24px; margin: 12px 0 20px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px;
}
.bilan .stat { flex: 1; text-align: center; }
.bilan .stat .n { font-size: 24px; font-weight: 700; }
.bilan .stat .l { font-size: 12.5px; color: var(--discret); }
.bilan .stat.v2 { opacity: .45; }

.puces-filtres { align-items: center; }
.puce {
  border: 1px solid var(--bord); background: var(--carte); border-radius: 99px;
  padding: 6px 13px; font-size: 13px; color: var(--discret); text-decoration: none;
}
.puce.actif { background: var(--texte); color: #fff; border-color: var(--texte); }
.separateur-puce { width: 1px; align-self: stretch; background: var(--bord); }
.groupement {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 99px; padding: 3px; font-size: 13px;
}
.groupement span { padding: 0 4px 0 8px; color: var(--discret); }
.groupement button, .groupement a {
  border: none; background: none; padding: 5px 12px; border-radius: 99px;
  color: var(--discret); text-decoration: none; font-size: inherit;
}
.groupement button.actif, .groupement a.actif { background: var(--texte); color: #fff; font-weight: 600; }

.mois {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--discret); margin: 24px 0 8px;
}
.ligne-publiee {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 12px 16px; display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
}
/* Miniature + idée + accroche : bloc cliquable dans son ensemble vers le post
   en mode focus (§ demande explicite) — le reset couleur/soulignement évite
   qu'un aussi grand bloc ne se lise comme un lien cassé plutôt qu'une carte. */
.ligne-publiee-post {
  display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0;
  color: inherit; text-decoration: none; border-radius: 8px; margin: -4px; padding: 4px;
}
a.ligne-publiee-post:hover { background: var(--fond); }
.ligne-publiee .miniature { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; flex: none; }
.ligne-publiee .corps { flex: 1; min-width: 0; }
.ligne-publiee .titre {
  font-weight: 600; font-size: 14.5px; margin: 0 0 2px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ligne-publiee .accroche {
  margin: 0 0 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligne-publiee .meta {
  font-size: 12.5px; color: var(--discret); display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ligne-publiee .meta .avatar { width: 18px; height: 18px; font-size: 9px; }
.etoiles-mini { color: #d99a00; font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.ligne-publiee-idee {
  flex: none; width: 200px; padding-left: 12px; border-left: 1px solid var(--bord);
  font-size: 13px; overflow: hidden;
}
.ligne-publiee-idee a {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; color: var(--texte);
}
.ligne-publiee-idee a:hover { color: var(--bleu); }
.ligne-publiee-idee .badge.serie { display: inline-block; margin: 4px 0 0; }

/* Vignette d'un post (miniature + angle), colonne plus large que l'Idée :
   c'est elle qui porte l'information la plus utile pour reconnaître un post
   d'un coup d'œil (§ demande explicite). Partagée par la vue Tableau de
   Publiés et « Nos posts » d'Engagement — la taille de la miniature vit ici
   et non sur `.table-publies`, pour suivre le composant partout où il va. */
.vignette-post {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit;
  min-width: 260px;
}
.vignette-post span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vignette-post:hover { color: var(--bleu); }
.vignette-post .miniature { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
/* Idée réduite en contrepartie, seulement sur le tableau Publiés — pas sur
   Shortlist, qui partage `.table-publies` mais dont l'« Idée » doit garder
   la même largeur (320px) que sur /ideas, § demande explicite précédente. */
.table-publies-liste .titre-tableau { max-width: 160px; }

.lien-post { flex: none; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.lien-post a {
  display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
  border: 1px solid var(--bord); border-radius: 8px; padding: 6px 10px; color: var(--texte);
}
.lien-post a:hover { border-color: var(--bleu); color: var(--bleu); }
.lien-post .retrait-lien { margin: 0; }
.lien-post .retrait-lien button {
  border: 1px solid transparent; background: none; padding: 4px 6px; color: var(--discret);
}
.lien-post .retrait-lien button:hover { color: var(--alerte); border-color: transparent; }
.lien-post .manquant {
  border: 1px dashed var(--bord); border-radius: 8px; padding: 6px 10px; color: var(--discret);
  cursor: pointer; font-size: 13px; list-style: none; display: inline-block;
}
.lien-post .manquant::-webkit-details-marker { display: none; }
.lien-post .manquant:hover { border-color: var(--bleu); color: var(--bleu); }
.lien-post form { margin-top: 6px; }
.lien-post input[type="url"] { width: 220px; }
/* Une fois le formulaire ouvert, le résumé « + Ajouter le lien » qui l'a
   déclenché reste affiché au-dessus par défaut (comportement natif de
   <details>) — redondant avec le champ et le bouton Enregistrer juste en
   dessous. */
.lien-post details[open] > .manquant { display: none; }

.suivi-linkedin-ligne {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 12.5px; color: var(--discret); border-left: 1px solid var(--bord); padding-left: 12px;
  white-space: nowrap;
}
.suivi-linkedin-ligne .interactions { font-variant-numeric: tabular-nums; }

/* --- consommation et coûts -------------------------------------------- */
td.cout, .cout { font-variant-numeric: tabular-nums; white-space: nowrap; }
.conso { margin: 0 0 10px; }
.cumul {
  margin: 10px 0 0; padding: 8px 12px; background: #faf9f7;
  border: 1px solid var(--bord); border-radius: 6px; font-size: 14px;
}
.bloc-config table.etat th { width: 260px; }

/* --- bande de KPIs (tableau de bord) — piste D1-bande-chiffres ----------
   Deux groupes distincts : motivant à gauche (neutre), utile à droite
   (accent de couleur + lien direct), jamais la même carte grise pour les
   deux catégories. */
.kpi-bande {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 18px 20px 16px; margin: 0 0 20px;
}
.kpi-entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.kpi-entete h2 { font-size: 15px; margin: 0; text-transform: uppercase; letter-spacing: .04em; color: var(--discret); }
.kpi-periode {
  display: inline-flex; gap: 2px; background: var(--fond); border-radius: 99px; padding: 2px; font-size: 12.5px;
}
.kpi-periode button {
  border: none; background: none; border-radius: 99px; padding: 4px 12px; color: var(--discret); font: inherit; cursor: pointer;
}
.kpi-periode button.actif { background: var(--carte); color: var(--texte); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.kpi-corps { display: flex; gap: 28px; flex-wrap: wrap; }
.kpi-groupe { flex: 1 1 320px; min-width: 260px; }
.kpi-groupe h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--discret); margin: 0 0 10px; font-weight: 600;
}
.kpi-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.kpi-stat { min-width: 84px; }
.kpi-stat .n { font-size: 26px; font-weight: 700; line-height: 1; }
.kpi-stat .l { font-size: 12px; color: var(--discret); margin-top: 4px; }
.kpi-groupe--utile { border-left: 3px solid var(--avertissement); padding-left: 18px; }
.kpi-groupe--utile h3 { color: var(--avertissement); }
.kpi-stat--lien { text-decoration: none; color: inherit; display: block; border-radius: 6px; margin: -4px; padding: 4px; }
.kpi-stat--lien:hover { background: #fff8ea; }
.kpi-stat--lien:hover .n { color: var(--avertissement); }
.kpi-stat--lien .l { text-decoration: underline; text-decoration-color: transparent; }
.kpi-stat--lien:hover .l { text-decoration-color: var(--avertissement); }
hr.kpi-separateur { border: none; border-top: 1px solid var(--bord); margin: 16px 0 14px; }
.kpi-equipe { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 13px; }
.kpi-equipe-label { color: var(--discret); font-size: 12px; margin-right: 4px; }
.kpi-personne { display: flex; align-items: center; gap: 6px; }
.kpi-personne .n { font-weight: 700; }
.kpi-personne .avatar { width: 20px; height: 20px; font-size: 9.5px; }
.kpi-separateur-equipe { width: 1px; align-self: stretch; background: var(--bord); }
.kpi-avatar-saify { background: #5b3fa8; }
.kpi-note-equipe { font-size: 11.5px; color: var(--discret); margin-top: 8px; }
@media (max-width: 720px) {
  .kpi-corps { flex-direction: column; gap: 18px; }
  .kpi-groupe--utile { border-left: none; border-top: 3px solid var(--avertissement); padding-left: 0; padding-top: 14px; }
}

/* --- barre de filtres : bouton réinitialiser --------------------------- */
.filtres .reinitialiser { margin-left: auto; align-self: center; }

/* --- suivi LinkedIn (carte de proposition, /published, /published/refresh) */
.suivi-linkedin {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bord);
}
.chiffres-linkedin { display: flex; gap: 20px; margin: 8px 0; flex-wrap: wrap; padding: 0; }
.chiffres-linkedin div { text-align: center; }
.chiffres-linkedin dt {
  font-size: 12px; color: var(--discret); text-transform: uppercase;
  letter-spacing: .03em; margin: 0;
}
.chiffres-linkedin dd { font-size: 18px; font-weight: 600; margin: 2px 0 0; }
.fraicheur { margin: 4px 0 8px; }
.embed-linkedin { margin-top: 8px; }
.embed-linkedin iframe { border-radius: 6px; border: 1px solid var(--bord); }
.formulaire-linkedin { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.formulaire-linkedin label { font-weight: 600; margin-top: 8px; }

.alerte-legere {
  background: #fff4d6; border: 1px solid #f0d99a; color: #6b5200;
  padding: 8px 12px; border-radius: 6px; font-size: 13px; margin: 0 0 10px;
}
.badge.alerte-legere { background: #fff4d6; color: #6b5200; }

/* --- bandeau dashboard : commentaires en attente ------------------------ */
.alerte-linkedin ul { margin: 6px 0 0; padding-left: 20px; }

/* --- colonne interactions / fraîcheur, table publiés -------------------- */
td.interactions { white-space: nowrap; font-variant-numeric: tabular-nums; }
td.fraicheur { color: var(--discret); font-size: 13px; white-space: nowrap; }

/* --- vue Tableau, /published : en-têtes triables ------------------------ */
.scroll-horizontal { overflow-x: auto; }
.table-publies th a, .tableau-idees th a { color: inherit; text-decoration: none; white-space: nowrap; }
.table-publies th a:hover, .tableau-idees th a:hover { color: var(--bleu); }
.table-publies td { vertical-align: middle; }
/* Lien « Idée » d'une ligne de tableau : même largeur/troncature sur les
   trois tableaux qui l'affichent (Idées, Publiés, Shortlist), pour une
   lecture cohérente d'un écran à l'autre. Sur le lien plutôt que la cellule,
   pour ne pas tronquer aussi les badges qui le suivent (série, archivée…). */
.titre-tableau {
  display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle;
}

/* Lien sortant vers LinkedIn dans une cellule de tableau : même icône et
   même nature de destination annoncée que `.lien-post` (Publiés), en plus
   sobre — pas de cadre, la cellule en tient lieu. */
.lien-sortant {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  text-decoration: none; color: var(--texte); font-size: 13px;
}
.lien-sortant:hover { color: var(--bleu); }

/* --- /published/refresh : une carte de relevé par post ------------------ */
.liste-refresh-linkedin { display: flex; flex-direction: column; gap: 16px; }
.carte-refresh-linkedin .suivi-linkedin { margin-top: 10px; padding-top: 10px; border-top: none; }

/* --- lien « Mode focus » dans l'en-tête d'une carte ---------------------- */
.bouton-focus {
  font-size: 13px; padding: 3px 10px; border-radius: 6px;
  border: 1px solid var(--bord); text-decoration: none; color: var(--bleu);
}
.bouton-focus:hover { border-color: var(--bleu); background: #e5effa; }

/* --- accusé de réception d'un commentaire -------------------------------- */
.confirmation-envoi { color: var(--succes, #17603a); }

/* --- mode focus (§4.3 bis) -------------------------------------------------
   Disposition : simulation LinkedIn (colonne fixe, sticky) | onglets Texte /
   Illustration / Analyse. Portée depuis la maquette D3 (docs/audit/v2/
   mockups/D3-post-onglets.html) et la galerie de barre d'action v2, piste 2
   (barre-action-pistes-v2.html) — voir journal SUIVI.md pour l'arbitrage. #}
.focus {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 20px; margin-bottom: 28px;
}
.focus .fil { display: inline-block; margin-bottom: 12px; }
.statut-draft { background: #eceae6; color: var(--discret); }

/* ---- bandeau d'action : identité, statut, assignation ------------------ */
.bandeau-actions {
  background: #faf9f7; border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.bandeau-actions .identite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--discret); font-size: 14px; }
.bandeau-actions .commandes { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Piste 2 (« deux groupes séparés »), police réduite pour rester cohérente
   avec les badges/texte discret déjà présents dans ce bandeau compact —
   demande explicite du propriétaire après validation de la piste. */
.bandeau-actions .groupe-commande { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bandeau-actions .groupe-commande button,
.bandeau-actions .groupe-commande select {
  font-size: 13.5px; padding: 6px 12px;
}
.bandeau-actions .groupe-commande form { margin: 0; }
.separateur-commandes { width: 1px; align-self: stretch; min-height: 26px; background: var(--bord); }

.bandeau-verrouille {
  display: flex; align-items: center; gap: 10px; background: #faf9f7;
  border: 1px solid var(--bord); border-left: 3px solid var(--discret);
  border-radius: 6px; padding: 10px 14px; margin: 0 0 16px; font-size: 13.5px;
}
.bandeau-verrouille form { margin-left: auto; }

/* ---- disposition à deux colonnes : simulation | onglets ----------------- */
.disposition-post {
  display: grid; grid-template-columns: 390px 1fr;
  gap: 24px; align-items: start;
}
@media (max-width: 900px) {
  .disposition-post { grid-template-columns: 1fr; }
  .colonne-simulation { position: static !important; width: 100% !important; }
}
.colonne-simulation { position: sticky; top: 16px; width: 390px; }
.colonne-simulation .legende-simulation {
  margin: 0 0 8px; font-size: 12.5px; color: var(--discret); text-align: center;
}

/* ---- carte de simulation LinkedIn, fidèle à linkedin_mockup.py ---------- */
.carte-linkedin {
  background: #ffffff; border: 1px solid #e0e0e0; border-radius: 12px;
  overflow: hidden;
}
.carte-linkedin .entete { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 4px; }
.carte-linkedin .avatar {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bleu); color: #fff; font-weight: 700; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.carte-linkedin .identite-auteur { padding-top: 1px; }
.carte-linkedin .nom { font-weight: 700; color: #000; font-size: 15px; }
.carte-linkedin .sous-titre { color: #666; font-size: 13px; margin-top: 1px; }
.carte-linkedin .horodatage { color: #666; font-size: 13px; margin-top: 1px; }
.carte-linkedin .corps {
  padding: 14px 20px 0; color: #000; font-size: 14.5px; white-space: pre-wrap;
  word-wrap: break-word; line-height: 1.5;
}
/* LinkedIn affiche les hashtags dans le même bleu que ses liens : divergence
   assumée par rapport au générateur PNG (prompts/linkedin_mockup.py, jamais
   modifié → règle 2), qui ne le fait pas — cet aperçu HTML le fait. */
.carte-linkedin .corps .hashtag { color: var(--bleu); }
/* Illustration au-dessus du texte : écart volontaire à l'ordre réel d'un
   lien LinkedIn (texte puis pièce jointe) — c'est ce qui accroche en premier
   dans cet atelier, pas dans le fil réel. */
.apercu-lien { margin: 4px 0 0; }
/* Taille réelle, sans recadrage : un cadre 1.91/1 + object-fit:cover
   tronquait toute image qui n'était pas exactement au gabarit LinkedIn
   (1200×627), notamment les images téléversées à la main. */
.carte-linkedin .apercu-lien .image-fond {
  display: block; width: 100%; height: auto;
}
.carte-linkedin .pied { padding: 14px 20px 18px; }
.carte-linkedin .pied .separateur { border: none; border-top: 1px solid #e0e0e0; margin: 0 0 12px; }
.carte-linkedin .ligne-reactions {
  display: flex; justify-content: space-between; color: #666; font-size: 13.5px;
}

/* ---- superposition agrandie de l'illustration (onglet Illustration) -----
   Pas de second exemplaire de l'image dans l'onglet : l'image du post, déjà
   visible à gauche, grandit et déborde sur la colonne de droite pendant
   qu'on la retouche. Positionnée en fixed pour échapper à l'overflow:hidden
   de .carte-linkedin et se superposer réellement (static/focus.js). */
.illustration-survol {
  position: fixed; z-index: 150; border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  opacity: 0; pointer-events: none;
  transition: top .32s cubic-bezier(.2,.7,.3,1), left .32s cubic-bezier(.2,.7,.3,1),
              width .32s cubic-bezier(.2,.7,.3,1), height .32s cubic-bezier(.2,.7,.3,1),
              opacity .2s ease;
}
.illustration-survol.visible { opacity: 1; }
.illustration-survol.suivi-scroll { transition: opacity .2s ease; }
/* contain, pas cover : le cadre est déjà dimensionné au ratio réel de
   l'image par agrandirIllustration() (focus.js) — contain n'est qu'un
   filet de sécurité si jamais l'image n'a pas fini de charger. */
.illustration-survol img { width: 100%; height: 100%; object-fit: contain; display: block; }
.illustration-survol .etiquette-survol {
  position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.45);
  color: #fff; font-size: 10.5px; padding: 3px 8px; border-radius: 99px; letter-spacing: .03em;
}
@media (prefers-reduced-motion: reduce) { .illustration-survol { transition: opacity .12s ease; } }

/* ---- onglets internes, colonne de droite -------------------------------- */
.colonne-onglets {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 0 20px 20px;
}
.focus-onglets {
  display: flex; gap: 2px; border-bottom: 1px solid var(--bord);
  margin: 0 -20px 20px; padding: 0 20px; flex-wrap: wrap;
  position: sticky; top: 0; background: var(--carte); z-index: 10;
}
.focus-onglet {
  border: none; background: none; padding: 14px 16px 12px; font-size: 14px;
  color: var(--discret); border-bottom: 2px solid transparent;
  font-weight: 600; cursor: pointer;
}
.focus-onglet:hover { color: var(--texte); }
.focus-onglet.actif { color: var(--bleu); border-bottom-color: var(--bleu); }
.focus-onglet:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; border-radius: 4px; }
.focus-panneau { display: none; }
.focus-panneau.actif { display: block; animation: apparition-focus .12s ease; }
@keyframes apparition-focus { from { opacity: 0; } to { opacity: 1; } }

.bloc-texte-focus { position: relative; margin-bottom: 16px; }
.entete-texte {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.corps-editable {
  white-space: pre-wrap; word-wrap: break-word; min-height: 200px;
  background: #faf9f7; border: 1px solid var(--bord); border-radius: 6px;
  padding: 14px; outline: none;
}
.corps-editable:focus { border-color: var(--bleu); }
.note-gras { margin-top: 6px; }

/* ---- mesure du texte + jauge de longueur (onglet Texte) -----------------
   Zones en mots, d'après la bible : le flash (<80 mots) et la tribune
   (200 mots et plus) fonctionnent tous deux, c'est l'entre-deux flou
   (80-199 mots) qui performe le moins — d'où deux zones vertes séparées par
   une zone rouge, pas un dégradé linéaire. */
.mesure-texte { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--discret); }
.mesure-chiffres { white-space: nowrap; }
.mesure-chiffres strong { color: var(--texte); font-weight: 700; }
.jauge-longueur {
  position: relative; width: 120px; height: 8px; border-radius: 99px;
  overflow: visible; display: flex; cursor: help;
}
.jauge-zone { height: 100%; }
.jauge-zone--flash { width: 20%; background: #bfe3cd; border-radius: 99px 0 0 99px; }
.jauge-zone--flou { width: 30%; background: #f6c6c1; }
.jauge-zone--tribune { width: 50%; background: #bfe3cd; border-radius: 0 99px 99px 0; }
.jauge-marqueur {
  position: absolute; top: -3px; width: 3px; height: 14px; background: var(--texte);
  border-radius: 2px; left: 0; transition: left .2s ease;
}
.jauge-infobulle {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--texte); color: #fff; font-size: 12px; padding: 10px 14px;
  border-radius: 8px; width: 240px; text-align: center; line-height: 1.5;
  opacity: 0; pointer-events: none; transition: opacity .15s ease; z-index: 20;
}
.jauge-longueur:hover .jauge-infobulle, .jauge-longueur:focus-visible .jauge-infobulle { opacity: 1; }
.jauge-etiquette { white-space: nowrap; font-weight: 600; }
.jauge-etiquette.bon { color: var(--succes); }
.jauge-etiquette.mauvais { color: var(--alerte); }

hr.separateur-section { border: none; border-top: 1px solid var(--bord); margin: 20px 0; }

.popover-reecriture {
  position: absolute; z-index: 50; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.popover-reecriture[hidden] { display: none; }
/* Fixe sur la ligne de mesure (mots/signes), plus une bulle flottante au
   survol de la sélection : agit sur la sélection en cours dans le texte,
   quel que soit l'endroit du panneau où l'on clique. */
.barre-selection { display: flex; gap: 6px; }
.barre-selection button { font-size: 12.5px; padding: 5px 10px; }
.popover-reecriture {
  background: var(--carte); border: 1px solid var(--bord); padding: 10px;
  width: 300px; display: flex; flex-direction: column; gap: 8px;
}
.popover-reecriture input[type="text"] { width: 100%; }
.popover-reecriture .erreur { color: var(--alerte); font-size: 13px; margin: 0; }

.popover-emoji {
  position: absolute; z-index: 50; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  background: var(--carte); border: 1px solid var(--bord); padding: 8px;
  width: 268px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
/* Une règle `display` sur la classe l'emporte toujours sur `[hidden]` de la
   feuille de style du navigateur (origine avant spécificité dans la
   cascade) — sans ceci le popover resterait visible malgré `hidden`, même
   défaut que celui corrigé sur `.formulaire`. */
.popover-emoji[hidden] { display: none; }
.popover-emoji-choix {
  border: none; background: none; font-size: 18px; line-height: 1; padding: 5px;
  border-radius: 5px; cursor: pointer;
}
.popover-emoji-choix:hover { background: var(--fond); }

.texte-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; gap: 10px;
}
.etat-edition { font-size: 13px; color: var(--discret); }
.etat-edition[data-etat="modifie"] { color: #6b5200; }
.etat-edition[data-etat="echec"] { color: var(--alerte); }

.illustration-panneau { margin: 0; }
.illustration-absente {
  background: #faf9f7; border: 1px dashed var(--bord); border-radius: 6px;
  padding: 12px 14px; margin: 0 0 12px; color: var(--discret);
}
/* Zone laissée vide à gauche de l'onglet Illustration : l'aperçu agrandi
   grandit depuis le post et déborde d'environ 140px dans cette colonne — le
   panneau de formulaires commence après, jamais recouvert. */
.illustration-avec-reserve { display: flex; align-items: flex-start; }
.illustration-reserve { flex: 0 0 156px; }
.illustration-reserve .indice {
  margin-top: 130px; font-size: 12px; color: var(--discret);
  line-height: 1.4; padding-right: 14px; opacity: .85;
}
.illustration-avec-reserve .illustration-panneau { flex: 1 1 auto; min-width: 0; }
.illustration-indisponible {
  background: #fff8ea; border-left: 3px solid var(--avertissement); border-radius: 4px;
  padding: 10px 12px; margin: 8px 0 0; font-size: 13px;
}
.illustration-methode {
  border-left: 3px solid var(--bord); padding: 10px 14px; margin-top: 12px;
  background: #faf9f7; border-radius: 0 6px 6px 0;
}
.illustration-methode--texte { border-left-color: var(--bleu); margin-top: 0; }
.illustration-methode--texte label { display: block; font-size: 13px; margin-top: 6px; }
.illustration-methode--texte input { width: 100%; margin-top: 2px; }
.illustration-methode--scene { border-left-color: #5b3fa8; }
.illustration-methode--scene textarea { width: 100%; margin-top: 6px; }
.erreur-suggestion { color: var(--alerte); }
.televersement-discret { margin-top: 18px; }
.televersement-discret summary { cursor: pointer; color: var(--bleu); font-size: 14px; }

.panneau-analyse {
  background: var(--carte); margin: 0;
}
.panneau-analyse h4:first-child { margin-top: 0; }
.panneau-analyse h5 { font-size: 13px; margin: 10px 0 2px; color: var(--discret); text-transform: uppercase; letter-spacing: .03em; }
.panneau-analyse .badge { vertical-align: middle; }
/* Le modèle répond parfois en puces (« - point ») : sans ça, les sauts de
   ligne d'un <p> sont ignorés par le HTML et tout s'aplatit en une phrase. */
.analyse-texte { white-space: pre-line; }
.score-niveau-succes { background: #dcf3e4; color: var(--succes, #17603a); }
.score-niveau-attention { background: #fff2cc; color: #7a5b00; }
.score-niveau-alerte { background: #fbe0de; color: var(--alerte); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* --- suivi LinkedIn : bouton de rafraîchissement à la demande (Engagement) */
.conteneur-chiffres-linkedin { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rafraichir-mini {
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 13px; line-height: 1; border-radius: 4px;
}
.rafraichir-mini:hover { background: var(--fond); }

/* --- consommation Apify (config → API) ---------------------------------- */
.carte-apify { max-width: 420px; }
.cout-apify { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cout-apify b { font-size: 22px; }
.barre-progression { height: 8px; border-radius: 4px; background: var(--fond); overflow: hidden; }
.barre-progression-remplie { height: 100%; border-radius: 4px; }
.barre-progression--ok { background: var(--bleu); }
.barre-progression--alerte { background: #fab219; }
.barre-progression--critique { background: var(--alerte); }

.groupe-action h4 { margin-top: 0; }
.groupe-action--regeneration {
  background: #faf9f7; border: 1px solid var(--bord); border-radius: 6px;
  padding: 12px 14px; margin-top: 16px;
}

/* ==========================================================================
   Indicateurs qualité : badges miniatures à icône, dérivés de la bible
   LinkedIn (docs/bible-linkedin.md). Aucun libellé affiché en permanence —
   tout est dans l'infobulle au survol/focus, condensé pour laisser lire le
   motif d'ensemble (majorité verte, une exception) avant même le détail.
   ========================================================================== */
.indicateurs-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.indicateurs-entete h5 { margin: 0; }
.indicateurs-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
/* `display: contents` : ces deux conteneurs organisent le code (JS cible
   #indicateurs-instant-*, le serveur peuple #indicateurs-ia-*) sans casser
   la ligne unique — leurs enfants se comportent comme s'ils étaient
   directement dans .indicateurs-rangee. */
.indicateurs-rangee > div { display: contents; }
.separateur-indicateurs { width: 1px; align-self: stretch; min-height: 22px; background: var(--bord); margin: 0 2px; }
.indicateur { position: relative; display: inline-flex; }
.badge-indicateur {
  width: 26px; height: 26px; border-radius: 7px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: help; border: 1px solid transparent; background: #eceae6;
  color: var(--discret); transition: transform .12s ease, box-shadow .12s ease;
}
.badge-indicateur svg { width: 15px; height: 15px; }
.badge-indicateur:hover, .badge-indicateur:focus-visible {
  transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.15); outline: none;
}
.badge-indicateur:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.badge-indicateur--bon { background: #e1f3e6; color: var(--succes); border-color: #c6e7cf; }
.badge-indicateur--moyen { background: #fdf1d6; color: #8a6a00; border-color: #f3dfa3; }
.badge-indicateur--mauvais { background: #fbe2e0; color: var(--alerte); border-color: #f3c6c2; }
.badge-indicateur--neutre { background: #f4f2ee; color: #a8a49c; border-color: var(--bord); }

/* Infobulle : nom + statut en tête, détail en dessous, liseré de couleur.
   Plus aérée que le premier jet (marges/padding généreux, largeur plus
   confortable) — demande explicite du propriétaire, appliquée ici aux
   indicateurs et au radar (.infobulle-radar) qui partagent ce composant.
   `--decalage` (posé en JS) évite qu'elle ne sorte du cadre près des bords ;
   la pointe suit le déclencheur indépendamment du décalage. */
.infobulle {
  position: absolute; bottom: calc(100% + 22px); left: 50%;
  transform: translateX(calc(-50% + var(--decalage, 0px))) translateY(4px);
  width: 340px; max-width: 88vw; z-index: 30; text-align: left;
  background: var(--carte); color: var(--texte);
  border: 1px solid var(--bord); border-radius: 12px;
  padding: 0; overflow: hidden; line-height: 1.65;
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,.2);
}
.infobulle::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.infobulle--bon::before { background: var(--succes); }
.infobulle--moyen::before { background: var(--avertissement); }
.infobulle--mauvais::before { background: var(--alerte); }
.infobulle--neutre::before { background: var(--bord); }
.infobulle::after {
  content: ""; position: absolute; top: 100%;
  left: calc(50% - var(--decalage, 0px)); transform: translateX(-50%);
  width: 11px; height: 11px; background: var(--carte);
  border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.badge-indicateur:hover + .infobulle, .badge-indicateur:focus-visible + .infobulle,
.radar-analyse:hover .infobulle, .radar-analyse:focus-visible .infobulle {
  opacity: 1; pointer-events: auto;
  transform: translateX(calc(-50% + var(--decalage, 0px))) translateY(0);
}
.infobulle-entete {
  display: flex; align-items: center; gap: 14px; padding: 20px 22px 16px;
  border-bottom: 1px solid var(--bord); background: #faf9f7;
}
.infobulle-nom { font-weight: 700; font-size: 14px; flex: 1 1 auto; }
.infobulle-statut {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 4px 10px; border-radius: 99px; white-space: nowrap;
}
.infobulle-statut--bon { background: #e1f3e6; color: var(--succes); }
.infobulle-statut--moyen { background: #fdf1d6; color: #8a6a00; }
.infobulle-statut--mauvais { background: #fbe2e0; color: var(--alerte); }
.infobulle-statut--neutre { background: #f4f2ee; color: #8a867d; }
.infobulle-detail {
  /* `display: block` impératif : en `span` (inline par défaut), le padding
     gauche/droite ne s'applique qu'à la toute première et à la toute
     dernière ligne d'un texte qui passe à la ligne, pas à chaque ligne —
     un texte scrapé un peu long touchait donc les bords sur presque toute
     sa hauteur malgré le padding déclaré. */
  display: block; padding: 18px 22px 22px; font-size: 13.5px; color: var(--texte);
}
/* Bascule sous le déclencheur quand l'espace au-dessus manque (JS,
   positionnerInfobulle) : mêmes réglages que .infobulle mais ouverte vers
   le bas, pointe retournée en conséquence. */
.infobulle--bas { bottom: auto; top: calc(100% + 10px); }
.badge-indicateur:hover + .infobulle--bas, .badge-indicateur:focus-visible + .infobulle--bas {
  transform: translateX(calc(-50% + var(--decalage, 0px))) translateY(0);
}
.infobulle--bas::after {
  top: auto; bottom: 100%;
  border-right: none; border-bottom: none;
  border-left: 1px solid var(--bord); border-top: 1px solid var(--bord);
  clip-path: polygon(0 100%, 100% 100%, 0 0);
}
/* Variante pour un déclencheur **dans un conteneur défilant**
   (`.tableau-scroll` : `overflow-x: auto` force l'axe Y en `auto`, et une
   infobulle absolue s'y fait écrêter — constaté sur l'en-tête de colonne de
   `/radar/personnes`, 02/09). `position: fixed` échappe au conteneur ;
   `left`/`top` sont posés au survol par `radar.js`, la pointe n'a plus
   d'ancre fiable et disparaît. */
.infobulle-fixe { position: fixed; bottom: auto; left: 0; top: 0; transform: translateY(4px); }
.infobulle-fixe::after { display: none; }
.badge-indicateur:hover + .infobulle-fixe,
.badge-indicateur:focus-visible + .infobulle-fixe { transform: translateY(0); }

/* ==========================================================================
   Radar du score global (onglet Analyse) : SVG à 5 axes, agrandi par rapport
   au premier jet (mini-radar du bandeau, retiré) puisqu'il vit maintenant
   dans l'espace généreux de l'onglet plutôt qu'un bandeau compact.
   ========================================================================== */
.radar-section h5 { margin-top: 0; }
.radar-analyse-bloc { display: flex; }
.radar-analyse {
  position: relative; display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--bord); border-radius: 10px; background: #faf9f7;
  padding: 14px 20px 14px 14px; cursor: help;
}
.radar-analyse:hover, .radar-analyse:focus-visible { outline: none; border-color: var(--bleu); }
.svg-radar-analyse { display: block; width: 92px; height: 92px; flex: 0 0 auto; }
.radar-analyse-legende { text-align: left; }
.radar-analyse-titre { font-size: 15px; font-weight: 700; color: var(--texte); margin: 0 0 2px; }
.radar-analyse-verdict { font-size: 13px; color: var(--discret); }
.infobulle-radar { bottom: auto; top: calc(100% + 20px); left: 0; transform: translateX(var(--decalage, 0px)) translateY(-4px); }
.radar-analyse:hover .infobulle-radar, .radar-analyse:focus-visible .infobulle-radar {
  transform: translateX(var(--decalage, 0px)) translateY(0);
}
.infobulle-radar::after {
  top: auto; bottom: 100%; left: calc(24px + var(--decalage, 0px)); transform: translateX(0) rotate(180deg);
}
.grille-condensee { display: flex; gap: 10px; flex-wrap: wrap; }
.mini-carte {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px;
  border: 1px solid var(--bord); border-radius: 6px; text-decoration: none;
  color: var(--texte); background: var(--carte); min-width: 140px;
}
.mini-carte:hover { border-color: var(--bleu); }
.mini-carte.actif { border-color: var(--bleu); border-width: 2px; background: #e5effa; }
.mini-carte .angle { font-size: 13px; font-weight: 600; }

/* ===============================================================   Module « Mon réseau » (ADR-0045)
   Reprend les composants maison : `.onglets`/`.onglet`, `.carte`, `.badge`,
   `.jauge-score`, `.tableau-scroll`, `.filtres`, `.barre-validation`. Ce qui
   suit n'ajoute que ce qui n'existait pas.
   ====================================================================== */
:root {
  /* Le privé se signale par un violet sourd, jamais employé ailleurs. */
  --prive: #5b3fa8;
  --prive-fond: #efe9fb;
}
.cadenas-menu { font-size: 11px; opacity: .85; }

.bandeau-prive {
  display: flex; align-items: center; gap: 12px; background: var(--prive-fond);
  border: 1px solid #d9cef5; border-left: 3px solid var(--prive);
  border-radius: var(--rayon); padding: 10px 16px; margin-bottom: 18px;
}
.bandeau-prive .cadenas { font-size: 18px; }
.bandeau-prive .texte { font-size: 13.5px; }
.bandeau-prive .texte b { color: var(--prive); }

/* --- tier, strate et chaleur -------------------------------------------- */
.badge.tier1 { background: #dcf3e4; color: #17603a; font-weight: 600; }
.badge.tier2 { background: #e5effa; color: var(--bleu); font-weight: 600; }
.badge.tier3 { background: #fff2cc; color: #7a5b00; font-weight: 600; }
.badge.hors { background: #eceae6; color: var(--discret); }
.badge.chaleur-jamais { background: #fbe0de; color: var(--alerte); }
.badge.chaleur-ancien { background: var(--prive-fond); color: var(--prive); }
.badge.chaleur-vivant { background: #dcf3e4; color: var(--succes); }

/* --- relation déclarée et réseaux d'appartenance ------------------------ */
.badge-relation {
  display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px;
  font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.rel-ami { background: #dcf3e4; color: #0f4d2c; border-color: #a9dcbc; }
.rel-connaissance { background: #e8f5ec; color: var(--succes); border-color: #c6e7cf; }
.rel-client { background: #e5effa; color: #08498f; border-color: #b9d4f0; }
.rel-partenaire { background: #eef4fb; color: var(--bleu); border-color: #cfe0f3; }
.rel-client-eloigne { background: #f1f3f6; color: #55637a; border-color: #dde2ea; }
.rel-linkedin { background: #eceae6; color: var(--discret); border-color: #ddd9d2; }
.badge-reseau {
  display: inline-block; padding: 2px 9px; border-radius: 5px; font-size: 12px;
  font-weight: 600; white-space: nowrap; background: var(--carte);
  border: 1px solid var(--prive); color: var(--prive);
}
.badge-reseau.vide { border-style: dashed; border-color: #9aa0a8; color: var(--discret); font-weight: 400; }

/* Deux lignes de badges, jamais mélangées : ligne 1 déduit (non cliquable),
   ligne 2 déclaré (cliquable, même geste partout). */
.ligne-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.ligne-badges .etiquette-ligne {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  /* 22-5 : `#6f7480` mesurait **4,19:1** sur `--fond` (axe-core), sous 4,5:1.
     `#5f636d` mesure **5,38:1** et garde la nuance bleutée d'origine — plus
     proche que le `#55595f` que l'enregistrement citait en exemple, et
     largement au-dessus du seuil. */
  color: #5f636d; font-weight: 700; width: 52px; flex: none;
}
/* `.badge` porte un `border-radius: 99px` : dès que son texte passe à la
   ligne dans une cellule étroite (« À contacter »), la pastille devient un
   gros ovale illisible. Constaté sur la colonne Statut d'Explorer. */
.badge-modifiable { cursor: pointer; border-style: dashed; white-space: nowrap; }
.badge-modifiable::after { content: " \25BE"; font-size: 11px; opacity: .75; }
.badge-modifiable:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
/* Cible de clic : rien sous 24 px sur un geste qu'on rate (§14). */
.declaration { position: relative; display: inline-block; }
.declaration > summary { list-style: none; min-height: 24px; display: inline-flex; align-items: center; }
.declaration > summary::-webkit-details-marker { display: none; }

/* --- file du jour -------------------------------------------------------- */
.file-titre { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 8px; flex-wrap: wrap; }
.file-titre h2 { margin: 0; }
.file-titre .compte-file {
  background: var(--texte); color: #fff; border-radius: 99px; padding: 1px 9px;
  font-size: 12px; font-weight: 700;
}
.file-titre .quoi { font-size: 13px; color: var(--discret); }
.file-travail { display: flex; flex-direction: column; gap: 12px; }
.carte-action {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 16px; display: grid; grid-template-columns: 1fr 400px; gap: 20px;
}
.carte-action.traitee { display: flex; align-items: center; gap: 12px; opacity: .62; flex-wrap: wrap; }
.carte-action-gauche { min-width: 0; }
@media (max-width: 1100px) { .carte-action { grid-template-columns: 1fr; } }
.identite { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.identite-texte { min-width: 0; }
.identite-nom { font-weight: 700; font-size: 15.5px; }
.identite-nom a { color: var(--texte); text-decoration: none; }
.identite-nom a:hover { color: var(--bleu); }
/* Entreprise avant fonction : on situe la personne avant de la décrire. */
.identite-poste { font-size: 13.5px; color: var(--discret); }
.pourquoi { font-size: 13.5px; background: var(--fond); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.brouillon { display: flex; flex-direction: column; gap: 8px; }
.brouillon-etiquette {
  display: flex; align-items: center; justify-content: space-between; font-size: 12px;
  color: var(--discret); gap: 8px;
}
/* Compteur de longueur d'un message (17-2) : « 500 recommandé, 900 plafond ».
   Il n'avait aucune règle jusqu'ici — il héritait du `.brouillon-etiquette`
   discret et ne pouvait donc rien signaler. `--avertissement` et non
   `--alerte` : dépasser le format recommandé n'est pas une faute, le texte
   part quand même. Le dépassement n'est jamais dit par la seule couleur — le
   compteur ajoute « au-delà du format recommandé » et porte son seuil dans
   `title` (le gabarit comme le JS écrivent les deux ensemble). */
.compteur-caracteres { white-space: nowrap; }
.compteur-caracteres.au-dela { color: var(--avertissement); font-weight: 600; white-space: normal; }
.brouillon textarea { font-size: 13.5px; min-height: 132px; background: var(--fond); width: 100%; }
.brouillon-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.brouillon-actions form { margin: 0; }
/* Confirmation d'enregistrement d'un brouillon : discrète, et sans réserver
   de place quand elle est vide — sinon l'étiquette sautillerait au premier
   « Garder ». */
.brouillon-etat { font-size: 12px; color: var(--succes); }
.brouillon-etat:empty { display: none; }
/* Les deux agents (écrire, améliorer) sous la zone de saisie : même
   disposition que les actions, séparés d'un filet pour qu'on ne les confonde
   pas avec « envoyer ». */
.brouillon-agents {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--bord);
}
.brouillon-agents form { margin: 0; display: flex; gap: 6px; align-items: center; }
.barre-avancement {
  height: 6px; background: var(--bord); border-radius: 99px; overflow: hidden; margin: 6px 0 18px;
}
.barre-avancement span { display: block; height: 100%; background: var(--bleu); }
/* Barre sans progression chiffrée (tâche de fond du Radar) : une bande qui
   va-et-vient dit « ça travaille » sans mentir un pourcentage. */
.barre-indeterminee span { width: 40%; border-radius: 99px; animation: va-et-vient 1.2s ease-in-out infinite; }
@keyframes va-et-vient { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .barre-indeterminee span { animation: none; width: 100%; opacity: .5; } }
.fin-rituel {
  background: #e8f5ec; border: 1px solid #c6e7cf; border-radius: var(--rayon);
  padding: 20px 22px; text-align: center;
}
.fin-rituel h3 { margin: 0 0 6px; color: #0f4d2c; font-size: 17px; }

/* --- cinq chiffres, pas un tableau de bord ------------------------------- */
.metriques {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline; background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 16px; margin-bottom: 16px;
}
.metriques .m { display: flex; align-items: baseline; gap: 6px; }
.metriques .m b { font-size: 18px; font-variant-numeric: tabular-nums; }
.metriques .m span { font-size: 12.5px; color: var(--discret); }

/* --- menus d'action (reporter, écarter, marquer) ------------------------- */
.menu-action { position: relative; display: inline-block; }
.menu-action > summary {
  list-style: none; cursor: pointer; font: inherit; padding: 7px 14px; border-radius: 6px;
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte);
  display: inline-flex; align-items: center; gap: 6px;
}
.menu-action > summary::-webkit-details-marker { display: none; }
.menu-action > summary:hover, .menu-action[open] > summary { border-color: var(--bleu); color: var(--bleu); }
.menu-action-panneau {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 232px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16); padding: 8px; text-align: left;
}
.menu-action-panneau.a-droite { left: auto; right: 0; }
.menu-action-panneau form { margin: 0; }
.menu-action-panneau button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 12px; border-radius: 6px; font-size: 13.5px; min-height: 24px;
}
.menu-action-panneau button:hover { background: var(--fond); color: var(--texte); border: none; }
.menu-action-panneau button.coche { font-weight: 700; }
.menu-action-panneau button.coche::before { content: "\2713 "; color: var(--succes); }
.menu-action-panneau .titre-groupe {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--discret);
  padding: 10px 12px 5px; font-weight: 700;
}
.menu-action-panneau hr { border: none; border-top: 1px solid var(--bord); margin: 5px 0; }
.menu-action-panneau .rappel {
  font-size: 12px; color: var(--discret); line-height: 1.45;
  padding: 6px 12px 8px; margin: 0;
}

/* --- détail du score, ouvert au survol ----------------------------------- */
.indicateur-score { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.detail-score {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: 460px; max-width: 92vw;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .2); opacity: 0; pointer-events: none;
  transition: opacity .14s ease; text-align: left; font-weight: 400; font-size: 13px;
}
/* Zone tampon : le panneau reste ouvert quand le curseur traverse l'intervalle
   qui le sépare du déclencheur. Le défaut récurrent est un panneau qui se ferme
   dès qu'on quitte le déclencheur (§14) — corrigé ici une fois pour toutes. */
.detail-score::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.indicateur-score:hover .detail-score, .indicateur-score:focus-within .detail-score {
  opacity: 1; pointer-events: auto;
}
.detail-score .bandeau-detail {
  padding: var(--panneau-pad-y) var(--panneau-pad-x);
  background: #faf9f7; border-bottom: 1px solid var(--bord);
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-radius: 12px 12px 0 0;
}
.detail-score .total-detail { font-size: 19px; font-weight: 700; color: var(--succes); }
.detail-score .corps-detail {
  padding: calc(var(--panneau-pad-y) - 4px) var(--panneau-pad-x) var(--panneau-pad-y);
}
.ligne-detail {
  display: grid; grid-template-columns: 1fr 54px;
  gap: var(--panneau-interligne);
  padding: calc(var(--panneau-interligne) - 2px) 0;
  border-bottom: 1px solid #f0eeea;
}
.ligne-detail:last-child { border-bottom: none; }
.ligne-detail .pts { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.ligne-detail .pts.positif { color: var(--succes); }
.ligne-detail .pts.negatif { color: var(--alerte); }
/* Séparateur des lignes hors socle (ADR-0055) : bonus et malus ne mesurent pas
   l'adéquation, ils disent l'opportunité. Un trait, pas un encadré — le
   panneau tient dans une hauteur d'écran. */
.ligne-detail.entete-hors-socle {
  border-top: 1px solid var(--bord); margin-top: 4px; padding-top: 8px;
  font-size: 12px;
}
.ecart-hors-socle {
  display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 600;
  color: var(--succes);
}
.ecart-hors-socle.negatif { color: var(--alerte); }
.ligne-detail .constat {
  color: var(--discret); font-size: 12px; display: block;
  margin-top: 3px; line-height: 1.45;
}
.origine-critere {
  display: inline-block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
  padding: 0 5px; border-radius: 3px; margin-left: 5px; vertical-align: 1px;
}
.origine-critere.regle { background: #eceae6; color: #55595f; }
.origine-critere.manuel { background: var(--prive-fond); color: var(--prive); }
/* Hors socle (ADR-0055) : ni règle ni modèle, une opportunité. Fond ambré pour
   qu'un bonus ne se lise pas comme un critère d'adéquation de plus. */
.origine-critere.hors-socle { background: #fdf1dc; color: #7a5310; }
tr.hors-socle > td:first-child { border-left: 2px solid #e8b64c; padding-left: 8px; }
/* Le relevé d'activité : le seul bouton de la fiche contact qui dépense, et le
   coût s'annonce avant le clic. */
.bloc-activite { border-top: 1px solid var(--bord); margin-top: 12px; padding-top: 4px; }
/* Où en est la qualification, en trois nombres : un seul ne disait pas de quoi
   il parlait. Le dernier se détache quand il reste du travail — c'est le seul
   des trois sur lequel on peut agir. */
.etat-qualification { display: flex; gap: 28px; flex-wrap: wrap; margin: 10px 0 12px; }
.chiffre-qualif .n {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.chiffre-qualif .l { font-size: 12px; color: var(--discret); margin-top: 2px; }
.chiffre-qualif.a-faire .n { color: var(--bleu); }
/* Ce qu'une lecture de profil rapporterait, énuméré sous le bouton : sans
   cette liste, « enrichissement » ne dit rien de ce qu'on achète. */
.liste-manques {
  margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--discret);
  line-height: 1.55;
}
.bloc-profil-lu { border-top: 1px solid var(--bord); margin-top: 14px; padding-top: 10px; }
.bloc-profil-lu h3 { margin: 0 0 8px; font-size: 14px; }
.parcours { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
/* Les formations se distinguent des postes sans qu'on ait à les étiqueter. */
.parcours li.formation { color: var(--discret); }

/* --- comptes -------------------------------------------------------------- */
.grille-comptes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carte-compte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 14px 16px; text-decoration: none; color: var(--texte); display: block;
}
.carte-compte:hover { border-color: var(--bleu); }
.carte-compte.selectionne { border-color: var(--bleu); box-shadow: 0 0 0 1px var(--bleu); }
/* `align-items: baseline` et non `center` : quand le nom passe à la ligne
   (« ReeVo Cloud & Cybersécurité »), un badge centré verticalement se
   retrouve à cheval sur les deux lignes. `nowrap` empêche par ailleurs
   « Tier » et « 2 » de se séparer. */
.carte-compte .nom-compte {
  font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: baseline;
  flex-wrap: wrap;
}
.carte-compte .nom-compte .badge { white-space: nowrap; flex: none; }
.carte-compte .nom-compte a { color: var(--texte); text-decoration: none; }
.carte-compte .nom-compte a:hover { color: var(--bleu); text-decoration: underline; }

/* Sélecteur de tier : trois cibles de 26 px, jamais moins (§14). */
.choix-tier { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.choix-tier button {
  min-width: 26px; min-height: 26px; padding: 2px 8px; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.choix-tier button.actif {
  background: var(--texte); color: #fff; border-color: var(--texte); font-weight: 700;
}
.carte-compte .chiffres { display: flex; gap: 16px; margin-top: 8px; }
/* Le pont chaud → froid : seul chiffre de la carte qui appelle une action, donc
   seul à porter la couleur d'accent. Son absence se lit en discret, elle ne
   disparaît pas. */
.carte-compte .pont-compte {
  margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--bleu);
}
.carte-compte .pont-compte.sans { font-weight: 400; color: var(--discret); }
/* « Demander une intro » se coupait en deux lignes dans sa colonne. */
.pont-passeurs td button { white-space: nowrap; }
.carte-compte .chiffre .n { font-size: 20px; font-weight: 700; }
.carte-compte .chiffre .l { font-size: 12px; color: var(--discret); }
.maillage { display: flex; gap: 2px; margin-top: 10px; }
.maillage span { height: 5px; border-radius: 99px; flex: 1; background: var(--bord); }
.maillage span.plein { background: var(--succes); }
.maillage span.partiel { background: var(--avertissement); }

/* --- fiche contact -------------------------------------------------------- */
.fiche-reseau { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .fiche-reseau { grid-template-columns: 1fr; } }
.bloc-qualif { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0; }
.bloc-qualif .item { background: var(--fond); border-radius: 8px; padding: 10px 12px; }
.bloc-qualif .item .l {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--discret);
}
.bloc-qualif .item .v { font-weight: 700; font-size: 15px; margin-top: 2px; }

/* --- explorer et réglages -------------------------------------------------- */
.interpretation-filtre {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 10px 16px; margin-bottom: 12px; font-size: 13.5px;
}
.vide-resultat { padding: 28px 0; text-align: center; color: var(--discret); }
.pagination-reseau { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; }
.vocabulaire { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.entree-vocabulaire {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px;
}
/* Rang dans la liste : la poignée de glisser, et deux flèches empilées pour
   le clavier. Le retrait des boutons est resserré pour que la paire ne soit
   pas plus haute que le champ qu'elle accompagne. */
.rang-vocabulaire { display: flex; align-items: center; gap: 6px; }
.fleches-rang { display: flex; flex-direction: column; gap: 2px; }
.rang-vocabulaire form { margin: 0; }
.fleches-rang button {
  padding: 0 6px; font-size: 12px; line-height: 16px; min-height: 16px;
}
.fleches-rang button:disabled { opacity: .35; }
/* Poignée : geste principal, donc cible de 26 px comme les autres (§14) —
   l'idéogramme, lui, reste discret. */
.poignee {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; min-height: 26px; margin-left: -4px;
  /* Jamais `--bord` en couleur de texte : 1,32:1, illisible (§14). */
  color: var(--discret); opacity: .55; font-size: 15px; line-height: 1;
  cursor: grab; user-select: none; border-radius: 6px;
}
.poignee:hover { opacity: 1; background: var(--fond); }
.poignee:active { cursor: grabbing; }
/* La ligne en cours de déplacement : assez visible pour suivre du regard,
   assez discrète pour qu'on lise encore la liste dessous. */
.entree-vocabulaire.en-deplacement {
  opacity: .55; border-color: var(--bleu); border-style: dashed;
}
.entree-vocabulaire form { margin: 0; display: flex; gap: 6px; align-items: center; }
.entree-vocabulaire .effectif { font-variant-numeric: tabular-nums; color: var(--discret); font-size: 13px; }
.entree-vocabulaire .outils { display: flex; gap: 6px; }
.entree-vocabulaire .outils button { padding: 3px 9px; font-size: 12.5px; }
.ajout-vocabulaire { display: flex; gap: 8px; margin-top: 8px; }
.ajout-vocabulaire input { flex: 1 1 auto; }
.zone-danger { border-color: #e6b6b1; }
.zone-danger h3 { color: var(--alerte); }

/* `.jauge-score` est un <div> ailleurs dans l'application. Ici elle vit en
   contexte en ligne (ligne de badges, cellule de tableau) : sans display
   explicite, `width`/`height` sont ignorés sur un élément inline et la jauge
   ne se remplit jamais. Classe dédiée plutôt que modification de la règle
   partagée, qui déplacerait la table des prospects Engagement. */
.jauge-score.jauge-reseau { display: inline-block; vertical-align: middle; }
.jauge-score.jauge-reseau > .jauge-score-remplissage { display: block; }

/* --- couloir « Reprendre » et différentiel de ré-import (§5 bis, §5 ter) --- */
/* Ce qui a déjà répondu passe avant ce qu'on démarche : le filet de gauche
   dit d'un coup d'œil ce qui est en retard. */
.carte-suivi {
  display: grid; grid-template-columns: 4px 1fr auto; gap: 14px; align-items: center;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 12px 16px; margin-bottom: 8px;
}
.carte-suivi .filet-gauche { width: 4px; height: 100%; border-radius: 99px; min-height: 34px; }
.carte-suivi.echue .filet-gauche { background: var(--alerte); }
.carte-suivi.aujourdhui .filet-gauche { background: var(--succes); }
.carte-suivi.avenir .filet-gauche { background: var(--bord); }
.carte-suivi .quand { font-size: 12.5px; font-variant-numeric: tabular-nums; margin-right: 8px; }
.carte-suivi.echue .quand { color: var(--alerte); font-weight: 700; }
.carte-suivi .engagement { font-size: 13.5px; margin-top: 2px; }
.carte-suivi .qui { font-weight: 700; }
.carte-suivi .qui a { color: var(--texte); text-decoration: none; }
.carte-suivi .qui a:hover { color: var(--bleu); }
.carte-suivi form { margin: 0; }

/* --- mesure : ce qui marche (§13 bis) ---------------------------------- */
/* Pas un tableau de bord de volume : le volume mesure l'effort et démoralise
   en six semaines. Seul le taux de réponse par segment change une décision. */
.mesure-angles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mesure {
  display: flex; flex-direction: column; gap: 1px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 10px 14px; min-width: 190px;
}
.mesure b { font-size: 19px; font-variant-numeric: tabular-nums; }
.mesure span { font-size: 12.5px; }
.mesure .discret { font-size: 11.5px; }
.mesure.relation { border-left: 3px solid var(--prive); }
/* Sous l'échantillon significatif, le chiffre s'affiche mais ne s'impose pas. */
.mesure.faible b { color: var(--discret); font-weight: 500; }
/* --- commentaires LinkedIn sous un post (ADR-0049) --------------------- */
/* Pastille de l'onglet : un commentaire existe, sans dire lequel ni combien
   — l'onglet n'est pas un tableau de bord, il signale qu'il y a à voir. */
.pastille-onglet {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bleu); margin-left: 6px; vertical-align: middle;
}
.commentaires-linkedin > p { margin: 0 0 10px; }
.carte-commentaire {
  border: 1px solid var(--bord); border-radius: 8px; background: #fcfcfc;
  padding: 12px 14px; margin: 12px 0;
}
.carte-commentaire--scheduled { border-color: #b9d5f0; background: #f8fbfe; }
.carte-commentaire--published { border-color: #b7dcc7; background: #f9fdfa; }
.carte-commentaire--failed { border-color: #edc3bf; background: #fffafa; }
/* Fil question-réponse (28/08) : la réponse s'indente sous son parent. */
.carte-commentaire--reponse { margin-left: 28px; border-left-width: 3px; }
.carte-commentaire textarea { width: 100%; resize: vertical; }
.entete-commentaire {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.titre-commentaire { font-weight: 600; font-size: 14px; }
.badge.alerte-badge { background: #fdeeed; color: var(--alerte); }
.texte-commentaire-fige { white-space: pre-wrap; margin: 0 0 8px; }
.commentaires-linkedin .ligne-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.commentaires-linkedin .ligne-actions form { margin: 0; }
.note-correction {
  font-size: 13px; color: var(--avertissement, #6b5200); background: #fff4d6;
  border-radius: 6px; padding: 7px 10px;
}
.sources-citables { margin-top: 12px; }
.sources-citables ul { margin: 6px 0; padding-left: 20px; font-size: 13px; word-break: break-all; }
.case-commentaire {
  display: flex; gap: 8px; align-items: flex-start; font-size: 14px;
  margin: 4px 0 12px; line-height: 1.45;
}
.case-commentaire input { margin-top: 3px; flex: 0 0 auto; }


/* --- Cockpit automatisation (/controle) -------------------------------------- */
/* Valeurs reprises des maquettes du 24/08 (docs/maquettes/…-Maquettes suivi
   automatisations V1.0.html) : tailles, graisses et espacements y sont
   mesurés, pas approchés. Trois teintes de fond manquaient à la palette —
   elles portent les pastilles d'état, qui doivent rester lisibles à côté du
   texte qu'elles qualifient. */
:root {
  --fond-creux: #e8e5df;
  --bord-fort: #c4bdb2;
  --vol: #0b6f8c;
  --vol-fond: #dcf0f6;
  --succes-fond: #dceee4;
  --alerte-fond: #fbe2e0;
  --attention-fond: #f7ecc9;
  --dormant-fond: #e6e3dd;
}

/* En-tête : le titre porte le nom de la vue, et la phrase sous lui dit ce que
   l'écran montre. C'est là que la file annonce son total — plutôt que dans un
   bandeau de plus, qui se contredirait au premier décompte divergent. */
.entete-suffixe { font-weight: 400; color: var(--discret); }
.entete-sous { color: var(--discret); font-size: 13px; margin: 2px 0 0; }
.controle-section { margin: 26px 0 0; font-size: 17px; }

/* Les onglets sont des liens ici, pas des `<button>` pilotés en JS : chaque
   vue est une requête, la salle des machines étant réservée par une garde
   serveur. Deux règles suffisent à les faire coïncider avec `.onglet`. */
a.onglet { text-decoration: none; display: inline-block; }
a.onglet.actif { color: var(--bleu); border-bottom-color: var(--bleu); }

/* --- Pastille d'état --------------------------------------------------- */
/* Chaque état porte une FORME en plus de sa couleur : rond, carré, triangle,
   « ? », cercle creux. Deux états voisins doivent rester distincts pour qui ne
   perçoit pas la différence de teinte — et « à vérifier » est précisément
   celui qu'il ne faut pas confondre avec « publié ». */
.et {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.et::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.et-publie { color: var(--succes); background: var(--succes-fond); }
.et-en_vol { color: var(--vol); background: var(--vol-fond); }
.et-en_vol::before { border-radius: 1px; transform: rotate(45deg); }
.et-programme { color: var(--bleu); background: var(--vol-fond); }
.et-programme::before { border-radius: 1px; }
.et-bloque { color: var(--avertissement); background: var(--attention-fond); }
.et-bloque::before {
  width: 0; height: 0; border-radius: 0; background: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid currentColor;
}
.et-a_verifier { color: var(--alerte); background: var(--alerte-fond); }
.et-a_verifier::before {
  content: "?"; width: auto; height: auto; background: none; border-radius: 0;
  font-size: 11px; line-height: 1; font-weight: 700;
}
.et-brouillon { color: var(--discret); background: var(--dormant-fond); }
.et-brouillon::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Repère secondaire. Il reste DANS le flux : la maquette l'écrit à la suite
   du texte qu'il précise, et le passer à la ligne étirerait chaque ligne du
   tableau d'un tiers. */
.controle-sec { color: var(--discret); font-size: 11.5px; }
/* La voix est un jeton, pas une phrase : encadrée, en capitales, elle se
   repère en balayant la colonne sans se lire. Nommée `jeton-voix` et non
   `voix` — ce nom-là sert déjà à une marge dans /config, et deux composants
   sous le même sélecteur finissent toujours par se marcher dessus. */
.jeton-voix {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--discret);
  border: 1px solid var(--bord-fort); border-radius: 3px; padding: 0 5px;
  white-space: nowrap;
}
/* La cause à côté de la ligne, jamais dans un écran d'administration à part.
   La mesure est large parce que la maquette écrit ces causes sur une ligne
   pleine, sous le mouvement qu'elles expliquent : à 60ch, la même phrase
   retombait sur quatre lignes dans une colonne étroite, et le bloc de suite
   se lisait comme un paragraphe posé à côté plutôt que comme la suite de sa
   ligne. */
.controle-motif {
  display: block; margin-top: 3px; font-size: 11.5px; color: var(--avertissement);
  max-width: 100ch;
}

/* --- Bandeau de compteurs (maquette B, « en tête de C ») ---------------- */
.controle-compteurs {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* Fond creusé et non carte blanche : la maquette pose ces colonnes en creux
   dans la page, pas en relief au-dessus d'elle. Six cartes blanches alignées
   sous le titre pesaient autant que les blocs de post qui les suivent, alors
   qu'elles se lisent en passant. Le liseré est toujours là, transparent, pour
   que les six tuiles restent alignées, teintées ou non. */
.controle-compteur {
  flex: 1 1 118px; background: var(--fond-creux);
  border-radius: 8px; padding: 8px 10px;
  border-left: 3px solid transparent;
}
.controle-compteur-nb {
  display: block; font-family: ui-monospace, monospace;
  font-size: 18px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.controle-compteur-libelle {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--discret);
}
/* Les deux colonnes qui demandent une décision humaine, teintées pour se voir
   avant d'avoir été lues. À zéro, elles ne doivent pas crier : un liseré.
   Deux couleurs et non une, comme la maquette : « bloqué » repartira quand la
   cause sera levée (chaud), « à vérifier » ne repartira jamais seul (froid).
   Le même liseré pour les deux effacerait justement la distinction que ce
   bandeau existe pour montrer. */
.controle-compteur--arbitrage { border-left-color: var(--avertissement); }
.controle-compteur--a_verifier { border-left-color: var(--alerte); }

/* --- A : la file d'attente --------------------------------------------- */
table.controle-mq { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.controle-mq th {
  text-align: left; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--discret);
  padding: 0 10px 7px; border-bottom: 1px solid var(--bord); white-space: nowrap;
}
table.controle-mq td {
  padding: 9px 10px; border-bottom: 1px solid var(--bord); vertical-align: top;
}
table.controle-mq tr:last-child td { border-bottom: 0; }
/* Un nombre — version d'extension, compteur — se balaie en colonne : aligné à
   droite et en chasse fixe, les chiffres se superposent d'une ligne à l'autre. */
table.controle-mq .n {
  text-align: right; font-family: ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
/* Les largeurs de colonnes ci-dessous ne valent que pour la file et
   l'historique, dont les quatre colonnes sont toujours les mêmes. Posées sur
   `.controle-mq` tout court, elles s'appliquaient aussi aux tableaux de la
   salle des machines et de la maintenance : la 3ᵉ colonne (« Session
   LinkedIn ») y était écrasée à son minimum et la 4ᵉ (« Ext. », deux
   chiffres) prenait 30 % de la largeur — d'où le vide entre elle et la
   suivante. */
/* La colonne « Quand » se réduit à son contenu : elle est en `nowrap`, et
   l'espace qu'elle prenait en trop creusait un vide entre l'heure et ce
   qu'elle date — surtout quand un mouvement n'a pas encore de date et n'y
   écrit qu'un tiret. */
table.controle-mq--file td:nth-child(1), table.controle-mq--file th:nth-child(1) { width: 1%; }
/* La colonne « Voix » reste étroite : c'est un jeton, il n'a pas à pousser la
   colonne « Quoi », qui porte tout le sens. */
table.controle-mq--file td:nth-child(3), table.controle-mq--file th:nth-child(3) { width: 1%; }
table.controle-mq--file td:nth-child(4), table.controle-mq--file th:nth-child(4) { width: 30%; }
.file-sep td {
  background: var(--fond-creux); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--discret);
  padding: 5px 10px; border-bottom: 1px solid var(--bord);
}
.file-heure {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 600;
  color: var(--discret); white-space: nowrap;
}
/* Le rail file d'une ligne à l'autre : c'est lui qui fait lire le tableau
   comme un temps continu plutôt que comme deux listes empilées. */
.rail { position: relative; padding-left: 16px; }
.rail::before {
  content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px;
  width: 2px; background: var(--bord);
}
.rail::after {
  content: ""; position: absolute; left: 1px; top: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--carte); box-shadow: inset 0 0 0 2px var(--bord-fort);
}
/* Pleine sur la première ligne du passé : celle qui touche la barre. */
.rail.maintenant::after { box-shadow: inset 0 0 0 2px var(--vol); background: var(--vol); }

/* --- C : le post et sa suite ------------------------------------------- */
.post-bloc {
  border: 1px solid var(--bord); border-radius: 8px; margin-bottom: 10px;
  overflow: hidden; background: var(--carte); font-size: 13px;
}
.post-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  align-items: start; padding: 11px 13px;
}
.post-tete .titre { font-weight: 600; font-size: 13.5px; margin: 5px 0 3px; }
.post-tete .titre a { text-decoration: none; color: inherit; }
.post-tete .titre a:hover { text-decoration: underline; }
.chiffres { display: flex; gap: 16px; }
.chiffre { text-align: right; }
.chiffre .v {
  display: block; font-family: ui-monospace, monospace; font-weight: 600;
  font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.chiffre .k {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--discret);
}
/* La suite se lit comme dépendante de son post : fond creusé, branches. */
.post-suite {
  border-top: 1px solid var(--bord); background: var(--fond-creux);
  padding: 4px 13px 10px;
}
.suite-ligne {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px; align-items: start; padding: 7px 0;
  border-bottom: 1px solid var(--bord); font-size: 12.5px;
}
.suite-ligne:last-child { border-bottom: 0; }
.branche { color: var(--bord-fort); font-family: ui-monospace, monospace; padding-top: 1px; }

/* --- D : la salle des machines, et la maintenance ---------------------- */
/* Tout ce bloc manquait : les gabarits appelaient des classes qu'aucune règle
   ne servait, et les deux vues techniques s'affichaient au style par défaut du
   navigateur — panneaux sans cadre empilés en pleine largeur, libellé et
   valeur collés (« Coupe-circuits actifs0 »), jauges d'enveloppe invisibles.
   Les sélecteurs sont préfixés `controle-` : `panneau` et `jauge` tout court
   auraient croisé les familles `.panneau-config`, `.panneau-analyse` et
   `.jauge-score` déjà en service ailleurs. */

/* Deux colonnes inégales, comme la maquette. Le rapport est plus marqué que
   le sien (1,35) parce que le tableau des navigateurs porte ici une colonne
   d'actions que la maquette n'avait pas — sous 2,1 les deux boutons d'une
   ligne se rangeaient l'un sous l'autre et la ligne doublait de hauteur. */
.controle-console {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 14px; align-items: start;
}
.controle-panneau {
  border: 1px solid var(--bord); border-radius: 8px; padding: 11px 13px;
  background: var(--carte);
  /* Sans lui, un tableau plus large que sa colonne pousse la grille au lieu
     de défiler dans son `.scroll-horizontal` : c'est toute la page qui part
     en travers. */
  min-width: 0;
}
.controle-panneau--large { margin-top: 14px; }
/* Les actions d'une ligne restent sur une ligne. Repliées l'une sous l'autre,
   elles doublaient la hauteur de la ligne et éloignaient le geste de l'état
   qu'il corrige — or c'est justement pour ne pas les séparer qu'ils sont ici
   et non dans l'onglet Maintenance. Le tableau défile dans son
   `.scroll-horizontal` s'il n'y tient plus. */
.controle-panneau .actions-ligne { flex-wrap: nowrap; }
/* Et le libellé reste d'un tenant : « Mettre en / pause » coupé en deux se
   lisait comme deux boutons. */
.controle-panneau .actions-ligne button { white-space: nowrap; }
/* Le panneau rouge n'est pas une variante décorative : il porte la session
   discordante — la panne qui a failli publier sous le nom d'un autre membre
   (ADR-0055) — et le code d'appairage, affiché une seule fois. */
.controle-panneau--rouge {
  border-color: var(--alerte); background: var(--alerte-fond);
  margin-bottom: 14px;
}
/* Titre de panneau : une étiquette, pas un titre de section. Il nomme le
   panneau sans peser autant que le titre de la page — la hiérarchie se lit
   dans la taille, pas dans le niveau de balise. Balise `h2`/`h3` et non `h5`
   comme la maquette : sous un `h1` de page, sauter trois niveaux fait un
   ordre de titres incohérent pour un lecteur d'écran. */
.controle-panneau-titre,
.controle-panneau-sous-titre {
  margin: 0 0 9px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--discret);
}
.controle-panneau-sous-titre { margin-top: 16px; }
.controle-panneau--rouge .controle-panneau-titre { color: var(--alerte); }
.controle-panneau > :last-child { margin-bottom: 0; }

/* Un libellé, un nombre, et l'espace entre les deux : c'est ce vide qui fait
   lire la colonne de valeurs sans la chercher. Bornée en largeur : la maquette
   loge ces lignes dans un panneau étroit, et un panneau pleine largeur écartait
   le libellé de son chiffre de plus d'un mètre d'écran — on ne savait plus quel
   nombre allait avec quelle ligne. */
.controle-ligne-cle {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--bord); font-size: 12.5px;
  max-width: 620px;
}
.controle-ligne-cle:last-child { border-bottom: 0; }
.controle-ligne-cle .v {
  font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Nue : la ligne qui coiffe une jauge. Le trait irait entre le chiffre et la
   barre qui le dessine, alors qu'ils se lisent ensemble. */
.controle-ligne-cle--nue { border-bottom: 0; padding-bottom: 2px; }

/* L'enveloppe Apify avant qu'elle ne morde, pas après (règle 23). */
.controle-jauge {
  height: 6px; border-radius: 3px; background: var(--bord);
  overflow: hidden; margin: 0 0 8px;
  /* Même borne que la ligne qu'elle illustre : une barre plus longue que son
     chiffre ne mesurerait plus la même chose à l'œil. */
  max-width: 620px;
}
.controle-jauge > span { display: block; height: 100%; background: var(--vol); }
.controle-jauge--chaude > span { background: var(--avertissement); }

/* Affiché une seule fois, jamais stocké : il doit se lire et se recopier sans
   confusion entre O et 0, d'où la chasse fixe et l'espacement. */
.controle-code-appairage {
  font-family: ui-monospace, monospace; font-size: 20px; font-weight: 600;
  letter-spacing: .12em; user-select: all;
  background: var(--carte); border: 1px solid var(--bord-fort);
  border-radius: 6px; padding: 8px 12px; display: inline-block;
}
/* Les posts qu'une même cause bloque : une liste serrée sous cette cause, pas
   un paragraphe de plus. */
.controle-liste-posts {
  margin: 4px 0 14px; padding-left: 20px; font-size: 12.5px;
}

@media (max-width: 700px) {
  .post-tete { grid-template-columns: 1fr; }
  .chiffres { justify-content: flex-start; }
  .chiffre { text-align: left; }
  .controle-console { grid-template-columns: 1fr; }
}
/* --- fiche d'aide d'un écran (« À quoi sert cette fonctionnalité ? ») ---
   Composant partagé par les trois modules qui en portent une — Radar,
   Mon réseau, Engagement — d'où sa place ici plutôt que dans `radar.css` :
   trois copies auraient divergé comme celles des onglets l'avaient fait
   (TR-6).

   Le lien est volontairement discret : ni bouton bleu plein — il pèserait
   plus que « Sonder maintenant » à côté de lui —, ni lien de texte nu, que
   personne ne verrait. Une pastille turquoise, et rien d'autre dans
   l'application ne porte cette couleur sur fond clair.

   Le panneau est un `<dialog>` natif : piège de focus, fermeture à Échap et
   fond assombri viennent du navigateur, sans une ligne de script. */
.lien-aide {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--aide); background: var(--aide-fond); border: 1px solid var(--aide-bord);
  border-radius: 99px; padding: 4px 12px 4px 5px; white-space: nowrap;
}
.lien-aide:hover { background: var(--aide-fond-fort); border-color: var(--aide); }
.lien-aide-rond {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--aide); color: #fff; font-size: 12.5px; font-weight: 700;
}
/* Placé sous le sous-titre de l'écran, jamais dans la rangée des boutons
   d'action : il n'agit sur rien, il explique (maquette B, 25/08). La marge est
   portée par le composant et non par `.entete-page`, parce que tous les écrans
   n'en ont pas un : `/engagement` pose son `<h1>` à plat. */
.lien-aide { margin-top: 10px; }

.fiche-aide {
  width: min(900px, calc(100vw - 48px)); max-width: none;
  height: min(620px, calc(100vh - 64px)); max-height: none;
  padding: 0; border: 0; border-radius: 14px; background: var(--carte);
  color: var(--texte); box-shadow: 0 30px 80px -30px rgba(13, 21, 36, .7);
  overflow: hidden;
}
.fiche-aide::backdrop { background: rgba(13, 21, 36, .42); }
.fiche-aide[open] { display: flex; flex-direction: column; }
.fiche-aide-tete {
  padding: var(--panneau-pad-y) var(--panneau-pad-x) 0;
  border-bottom: 1px solid var(--bord); display: flex; flex-direction: column; gap: 12px;
}
.fiche-aide-rangee { display: flex; align-items: flex-start; gap: 14px; }
.fiche-aide-fil {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--aide); font-weight: 700;
}
.fiche-aide-tete h2 { margin: 3px 0 0; font-size: 25px; }
.fiche-aide-fermer {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--bord); background: var(--carte); color: var(--discret);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.fiche-aide-fermer:hover { border-color: var(--aide); color: var(--aide); }
/* Barre d'onglets propre au panneau, et non `.onglets` de `/config` : celle-là
   est `sticky`, se peint sur `--fond` et écrit l'ancre de l'URL
   (`onglets.js`) — les trois seraient faux dans un panneau flottant, et la
   dernière écraserait l'onglet ouvert de l'écran qui est dessous. */
.fiche-aide-volets { display: flex; gap: 2px; }
.fiche-aide-volet-onglet {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--discret); cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 15px 11px; margin-bottom: -1px;
}
.fiche-aide-volet-onglet:hover { color: var(--aide); }
.fiche-aide-volet-onglet[aria-selected="true"] { color: var(--aide); border-bottom-color: var(--aide); }
.fiche-aide-volet-onglet .n {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px; color: var(--discret); margin-right: 7px; font-weight: 400;
}
.fiche-aide-volet-onglet[aria-selected="true"] .n { color: var(--aide); }
.fiche-aide-panneau { flex: 1; overflow-y: auto; padding: 18px var(--panneau-pad-x) 22px; }
.fiche-aide-panneau[hidden] { display: none; }
.fiche-aide-panneau > * { max-width: 68ch; }
.fiche-aide-pied {
  border-top: 1px solid var(--bord); padding: 12px var(--panneau-pad-x);
  background: var(--fond); display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--discret);
}
.fiche-aide-pied .fiche-aide-fin { margin-left: auto; }

/* Corps d'une fiche : les gabarits de `templates/aide/` n'écrivent que du
   contenu, jamais de style. Trois formes suffisent — des paragraphes, une
   liste de réglages, une liste de conseils. */
.aide-corps { display: flex; flex-direction: column; gap: 12px; }
.aide-corps p { margin: 0; font-size: 14.5px; line-height: 1.62; }
.aide-corps p.appui { color: var(--discret); font-size: 13.5px; }
.aide-corps .aide-reglages { display: flex; flex-direction: column; margin: 2px 0; }
.aide-corps .aide-reglage {
  display: grid; grid-template-columns: 200px 1fr; gap: 4px 16px;
  padding: 10px 0; border-top: 1px solid var(--bord); align-items: baseline;
}
.aide-corps .aide-reglage:first-child { border-top: 0; padding-top: 2px; }
.aide-corps .aide-reglage dt { font-weight: 600; font-size: 14px; }
.aide-corps .aide-reglage dt .cle {
  display: block; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px; font-weight: 400; color: var(--discret); margin-top: 2px;
  word-break: break-all;
}
.aide-corps .aide-reglage dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--discret); }
.aide-corps .aide-conseils {
  list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px;
}
/* Puce en absolu, et surtout **pas** en grille : un `<li>` de conseil mêle du
   texte et des `<b>`, et chacun de ces nœuds inline deviendrait un élément de
   grille à part. La moitié tomberait dans la colonne de 20 px de la puce, un
   mot par ligne — vu à l'écran le 25/08. Le flux normal, lui, se moque du
   nombre d'enfants. */
.aide-corps .aide-conseils li {
  position: relative; padding-left: 30px; font-size: 14px; line-height: 1.55;
}
.aide-corps .aide-conseils li::before {
  content: ""; position: absolute; left: 6px; top: 8px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--aide);
  transform: rotate(45deg);
}
.aide-corps .aide-note {
  background: #fff4d6; border: 1px solid #f0dda0; border-radius: 8px;
  padding: 10px 13px; font-size: 13.5px; line-height: 1.5; color: var(--avertissement);
}
.aide-corps h3 { margin: 8px 0 0; font-size: 16px; }

@media (max-width: 700px) {
  .aide-corps .aide-reglage { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Bande « Prochainement / À décider » (tableau de bord, maquette B du
   29/08) -----------------------------------------------------------------
   Un extrait de la file du Cockpit. Elle réutilise le vocabulaire visuel
   déjà posé pour lui — pastilles `.et-*`, `.jeton-voix` — plutôt que d'en
   inventer un second : le même état doit se reconnaître d'un écran à
   l'autre. Ce qui lui est propre est le **rail** du temps, qui fait lire la
   colonne de gauche comme une suite d'heures et non comme une liste. */
.bande-suivi {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 0;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); margin: 0 0 20px; overflow: hidden;
}
.bande-suivi-col { padding: 16px 18px; min-width: 0; }
.bande-suivi-col--decisions { border-left: 1px solid var(--bord); }
@media (max-width: 780px) {
  .bande-suivi { grid-template-columns: 1fr; }
  .bande-suivi-col--decisions { border-left: 0; border-top: 1px solid var(--bord); }
}
.bande-suivi-tete { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.bande-suivi-tete h2 { margin: 0; font-size: 18px; }
.bande-fenetre, .bande-compte {
  border-radius: 99px; padding: 1px 9px; font-size: 12.5px; font-weight: 600;
}
.bande-fenetre { background: var(--fond); color: var(--discret); border: 1px solid var(--bord); }
.bande-compte { background: var(--avertissement); color: #fff; }
.bande-lien { margin-left: auto; font-size: 13px; }
.bande-vide { margin: 0; font-size: 14px; }

/* Suite incomplète : une voix qui pourrait commenter n'a rien de prévu sous un
   post qui part bientôt. Ambre — c'est un manque à combler, pas une panne :
   le rouge des décisions bloquées dirait autre chose. */
.bande-manques { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.bande-manque {
  font-size: 13.5px; line-height: 1.45; padding: 7px 10px; border-radius: 6px;
  background: #fdf6e3; border: 1px solid #e8d9ab; color: #6b5200;
}
.bande-manque a { margin-left: 4px; white-space: nowrap; }

/* Le rail : un trait continu derrière les points, qui aligne les heures. Sa
   position (56 px) suit la largeur de la colonne d'heures — les deux bougent
   ensemble, ou le trait sort des points. */
.rail-temps { list-style: none; margin: 0; padding: 0; position: relative; }
.rail-temps::before {
  content: ""; position: absolute; left: 56px; top: 8px; bottom: 8px;
  width: 2px; background: var(--bord);
}
.rail-jour {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--discret); padding: 10px 0 2px 74px;
}
.rail-jour:first-child { padding-top: 0; }
.rail-ligne {
  display: grid; grid-template-columns: 46px 22px 1fr auto;
  gap: 0 8px; align-items: baseline; padding: 6px 0;
}
.rail-heure {
  font-size: 12.5px; color: var(--discret); text-align: right;
  font-variant-numeric: tabular-nums;
}
.rail-point {
  justify-self: center; width: 9px; height: 9px; border-radius: 50%;
  background: var(--carte); border: 2px solid var(--bord-fort);
  position: relative; top: 5px;
}
.rail-ligne--imminent .rail-point { background: var(--bleu); border-color: var(--bleu); }
.rail-quoi { font-size: 14px; min-width: 0; }
.rail-nature {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--discret);
}

.bande-decisions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bande-decision {
  border: 1px solid var(--bord); border-left: 3px solid var(--avertissement);
  border-radius: 8px; padding: 9px 12px; font-size: 13.5px;
}
.bande-decision--a_verifier { border-left-color: var(--alerte); }
.bande-decision-titre { display: block; font-weight: 600; }
.bande-decision-motif { display: block; color: var(--discret); margin-top: 2px; }
.bande-decision-lien { display: inline-block; margin-top: 4px; font-size: 13px; }

/* Relance d'un commentaire vérifié absent (règle 27). La phrase de garde est
   dans le bloc, pas dans une infobulle : elle dit ce qu'un clic de trop
   coûterait, et ça ne se survole pas. */
.relance-verifiee {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 0; font-size: 13px;
}
.relance-verifiee form { margin: 0; }
.relance-verifiee .discret { flex: 1 1 220px; min-width: 0; }

/* Grille « ce que nous savons, et d'où nous le savons » (ADR-0074).

   Chaque chiffre porte sa source, et la source est la moitié du composant :
   un nombre dont on ne sait pas s'il est mesuré ou déduit finit par être cité
   comme un fait. Elle est donc dans la carte, pas dans une infobulle. */
.grille-chiffres {
  display: grid; gap: 14px; margin: 12px 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.carte-chiffre {
  border: 1px solid var(--bordure, rgba(0,0,0,.12));
  border-radius: 10px; padding: 14px 16px; background: var(--fond-carte, #fff);
}
.carte-chiffre .n { font-size: 27px; font-weight: 700; line-height: 1.1; }
.carte-chiffre .l { font-size: 13.5px; opacity: .75; margin-top: 2px; }
.carte-chiffre .src {
  font-size: 11.5px; line-height: 1.5; opacity: .6; margin-top: 9px;
  border-top: 1px dotted rgba(0,0,0,.15); padding-top: 7px;
}


/* ------------------------------------------------------------------ ADR-0080
   Le pont carnet <-> Radar, et la declaration du tier.

   Deux familles, une seule grammaire : un encart de pont (`.pont-*`) dit ce
   que l'autre module sait, un rang de choix (`.declarer-choix`) fait porter a
   chaque option le sens de ce qu'elle pose. Ces boutons-la ne sont pas des
   boutons ordinaires : ils affichent l'etat courant, et l'etat courant ne se
   reclique pas (`disabled` + `aria-pressed`). */
.pont-carnet, .pont-radar {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--carte); padding: 13px 15px; margin-top: 14px;
}
.pont-radar { margin-top: 18px; }
/* Le concurrent est le seul cas ou l'encart hausse la voix : la declaration a
   des consequences que le carnet ignorait, et l'ecran doit le dire avant le
   geste, pas apres. */
.pont-radar.pont-alerte { border-color: var(--alerte); border-left-width: 4px; }
.pont-vide { background: transparent; border-style: dashed; }
.pont-entete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pont-source {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--discret);
}
.pont-lien { font-size: 13px; white-space: nowrap; }
.pont-titre { margin: 6px 0 8px; }
.pont-faits { list-style: none; margin: 0 0 8px; padding: 0; }
.pont-faits li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 4px 0; border-bottom: 1px dotted rgba(0,0,0,.1); font-size: 13.5px;
}
.pont-faits li:last-child { border-bottom: none; }
.pont-faits .k { color: var(--discret); }

.declarer { margin-top: 14px; }
.declarer-groupe { margin: 0 0 14px; }
.declarer-titre { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.declarer-choix { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.declarer-choix.serre { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.declarer-choix .choix {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 9px 11px; height: auto; line-height: 1.35;
  border: 1px solid var(--bord); border-radius: 8px; background: var(--carte);
  color: var(--texte); cursor: pointer;
}
.declarer-choix .choix:hover:not(:disabled) { border-color: var(--bleu); }
/* L'etat courant : marque, et inerte. Le reclic d'une valeur deja posee
   n'etait pas une erreur, mais il ne voulait rien dire, et il coutait un
   aller-retour serveur pour ne rien changer. */
.declarer-choix .choix.actuel {
  border-color: var(--bleu); border-width: 2px; padding: 8px 10px;
  background: #eef5fc; cursor: default; opacity: 1;
}
.declarer-choix .choix-titre { font-weight: 600; font-size: 13.5px; }
.declarer-choix .choix-sens { font-size: 12px; color: var(--discret); }
.declarer-etat { margin: 8px 0 0; font-size: 12.5px; }
.declarer-ailleurs {
  margin: 0 0 8px; padding: 7px 10px; font-size: 12.5px;
  border-left: 3px solid var(--avertissement); background: #fdfaf0;
}
/* Separe du rang de choix, et volontairement plus discret : « rendre aux
   regles » efface une decision humaine. Il ne se range pas parmi ses
   inverses, et il n'a pas a leur ressembler. */
.declarer-defaire { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.lien-bouton {
  background: none; border: none; padding: 0; height: auto;
  color: var(--bleu); text-decoration: underline; cursor: pointer; font-size: 13px;
}
/* --- Moissons proposées au tableau de bord (ADR-0077) ------------------
   Un extrait de la voie Chasse du Radar. Trois lignes au plus, et le bloc
   disparaît quand il n'a rien à proposer : un tableau de bord qui déroule
   n'ordonne plus rien. */
.moissons-bord { border-color: #e79c95; }
.liste-moissons { list-style: none; margin: 0; padding: 0; }
.liste-moissons li {
  padding: 10px 0; border-top: 1px solid var(--bord);
  display: flex; flex-direction: column; gap: 4px;
}
.liste-moissons li:first-child { border-top: none; }
.moisson-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.liste-moissons .extrait {
  font-size: 13.5px; color: var(--texte); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.4; max-width: 90ch;
}
.liste-moissons .extrait:hover { color: var(--bleu); }


/* ------------------------------------------------------------------ ADR-0082
   La fiche contact « La reponse ».

   Une colonne, largeur de lecture. L'ordre visuel est l'ordre de decision :
   ce que le Radar impose, la reponse, les faits qui la portent, le message,
   puis tout le reste replie. Les anciennes deux colonnes rangeaient par
   provenance (« ce que le carnet sait » a gauche, « le suivi » a droite),
   ce qui n'est l'ordre de personne. */
/* La fiche ne se lit plus en une colonne de 78ch. Sur 1920 elle occupait un
   tiers de l'écran et repliait le dossier dans des accordéons que la place
   n'obligeait pas — maquette « L'atelier », 01/09.

   L'ordre de décision d'ADR-0082 est intact : ce que le Radar impose, la
   réponse, les faits qui la portent. Ce qui change est que **le message se
   tient à côté d'eux** au lieu d'être en dessous. Ce n'est pas une invention
   de mise en page : `.carte-action` (file du jour) fait déjà « la raison à
   gauche, le brouillon à droite » — la fiche l'ignorait et empilait tout.
   Or les preuves sont la matière première du message : les mettre côte à côte
   fait qu'on transcrit au lieu de mémoriser. */
.fiche-reponse { margin-top: 18px; }
.fiche-reponse .carte { margin-top: 0; }

.fiche-atelier {
  display: grid; grid-template-columns: minmax(0, 1fr) 480px;
  gap: 26px; align-items: start;
}
/* La colonne de décision pose ses blocs sur `--fond` ; la colonne d'action est
   une carte blanche. Deux textures suffisent à séparer les colonnes sans
   inventer ni couleur ni ombre — l'application n'en a pas d'autre à donner. */
.fiche-decision { min-width: 0; }
/* `.onglets` est déjà collant à `top: 0` avec `z-index: 5` : le brouillon se
   cale dessous, et passe dessous, jamais devant. Budget écrit ici une fois —
   deux collants calés au hasard finissent superposés. */
.fiche-action { position: sticky; top: 60px; z-index: 1; }
@media (max-width: 1240px) {
  .fiche-atelier { grid-template-columns: minmax(0, 1fr); }
  .fiche-action { position: static; }
}

/* Le signal récent, sous la réponse. Ce qui le distingue d'un fait n'est pas
   son poids mais sa **récence** : un fait décrit la personne, un signal date
   un événement. Le barème complet reste dans son pli ; cette phrase-là, non —
   elle se périme. Elle n'apparaît que sous le seuil de récence, donc rarement,
   donc elle se lit quand elle est là. */
.signal-recent {
  margin: 12px 0 0; padding: 9px 13px; border-radius: 6px;
  background: var(--fond); border-left: 3px solid var(--succes);
  font-size: 13.5px; line-height: 1.5;
}

/* Le dossier en bande de cartes. Ce que le pli d'ADR-0082 gagnait par
   **attention** reste replié (le barème, le journal) ; ce qu'il repliait par
   **étroitesse** se déplie : sur 1920, demander un clic pour savoir qui
   d'autre on connaît dans cette entreprise ne se justifie plus.
   420 et non 360 : sous 400 px, le tableau « même entreprise » déclenche le
   défilement horizontal de `.tableau-scroll` — une barre grise sous chaque
   carte, pour rien. */
.bande-dossier {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px; align-items: start; margin-bottom: 16px;
}
.bande-dossier > .carte { margin-top: 0; }
/* Une carte de la bande ne dicte pas la hauteur des autres. « Dans mon carnet,
   même entreprise » liste 42 personnes chez BNP Paribas : repliée, sa longueur
   ne coûtait rien ; dépliée, elle laissait deux cartes courtes flotter dans un
   demi-écran de vide. Même remède que `.source pre` — une dizaine de lignes
   visibles, le reste au défilement dans la carte. */
.bande-dossier .tableau-scroll { max-height: 26em; overflow-y: auto; }
.bande-dossier .liste-sources { max-height: 26em; overflow-y: auto; }
/* Les replis gardent une largeur de lecture : un `<summary>` étiré sur 1700 px
   sépare son titre de son aperçu par un demi-mètre de vide. */
.replis-fiche { max-width: 1100px; }

/* --- le bandeau Radar, remonte au-dessus du verdict ---------------------
   Il etait un encart discret en bas de fiche. Il change une decision : ce
   qu'on s'autorise sous les posts de cette personne se declare ailleurs, et
   celui qui ecrit un message n'a aucune raison de faire defiler jusqu'a lui. */
.bandeau-radar {
  border: 1px solid var(--bord); border-left: 4px solid var(--avertissement);
  border-radius: var(--rayon); background: var(--carte);
  padding: 13px 16px; margin-bottom: 16px;
}
.bandeau-radar--interdit { border-left-color: var(--alerte); }
.bandeau-radar-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
}
.bandeau-radar-source {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 600; color: var(--discret);
}
.bandeau-radar-lien { font-size: 13px; white-space: nowrap; }
.bandeau-radar-phrase { margin: 0 0 9px; font-size: 14px; line-height: 1.5; }
.bandeau-radar--interdit .bandeau-radar-phrase { color: var(--alerte); }
.bandeau-radar-faits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.bandeau-radar-faits li { display: flex; gap: 7px; font-size: 13px; }
.bandeau-radar-faits .k { color: var(--discret); }
.bandeau-radar-faits .v { font-weight: 600; }

/* --- le verdict ------------------------------------------------------- */
.verdict {
  border: 1px solid var(--bord); border-left: 4px solid var(--avertissement);
  border-radius: var(--rayon); background: var(--carte); padding: 16px 19px;
}
.verdict--oui { border-left-color: var(--succes); }
.verdict--non { border-left-color: var(--alerte); }
.verdict-question { margin: 0; font-size: 15px; color: var(--discret); }
.verdict-reponse { margin: 3px 0 0; font-size: 24px; font-weight: 600; line-height: 1.2; }
.verdict--oui .verdict-reponse { color: var(--succes); }
.verdict--non .verdict-reponse { color: var(--alerte); }
/* Ce qui retient ne se replie jamais : c'est la moitie de la decision, et la
   seule qui empeche d'envoyer un message de vente a quelqu'un qui n'achete
   pas. */
.verdict-retient {
  margin: 13px 0 0; padding: 10px 12px; border-radius: 6px;
  background: var(--fond); font-size: 13.5px; line-height: 1.5;
}

.titre-faits, .titre-section { margin: 26px 0 12px; font-size: 19px; }

/* --- un fait, avec sa preuve ------------------------------------------- */
.fait { padding: 15px 0; border-top: 1px solid var(--bord); }
.fait:first-of-type { border-top: none; padding-top: 8px; }
.fait h3 { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; margin: 0; }
.fait-titre { font-size: 16.5px; }
.fait-poids { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--avertissement); white-space: nowrap; }
.fait-poids.nul { color: var(--discret); font-weight: 500; }
.fait-poids .sur { font-weight: 400; font-size: 12px; color: var(--discret); }
.fait-constat { margin: 5px 0 0; font-size: 14px; color: var(--texte); }
.fait--dormant .fait-constat { color: var(--discret); }
.fait-geste { margin: 11px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* La personne en ses mots : la preuve la plus forte de la fiche, et la seule
   qu'aucun calcul ne produit. */
.en-ses-mots {
  margin: 10px 0 4px; font-size: 15px; line-height: 1.5;
  border-left: 3px solid var(--avertissement); padding-left: 14px;
}
.preuve-posts { list-style: none; margin: 10px 0 0; padding: 0; }
.preuve-posts li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px dotted var(--bord); font-size: 13.5px;
}
.preuve-posts li:last-child { border-bottom: none; }
.preuve-posts .meta-post { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--discret); white-space: nowrap; }
.format-post {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  color: var(--discret); border: 1px solid var(--bord); border-radius: 3px;
  padding: 0 5px; margin-right: 7px;
}

/* --- les replis du « reste » ------------------------------------------- */
.pli-fiche { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); }
.pli-fiche + .pli-fiche { margin-top: 8px; }
.pli-fiche > summary {
  cursor: pointer; padding: 13px 17px; font-weight: 600; font-size: 14.5px;
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  list-style: none;
}
.pli-fiche > summary::-webkit-details-marker { display: none; }
.pli-fiche > summary .apercu { color: var(--discret); font-size: 12.5px; font-weight: 400; }
.pli-fiche > summary::after { content: "+"; color: var(--discret); flex: none; font-weight: 400; }
.pli-fiche[open] > summary::after { content: "\2212"; }
.pli-fiche > .dedans { padding: 4px 17px 17px; border-top: 1px solid var(--bord); }
/* Les blocs de l'ancien panneau lateral gardent leur mise en colonnes quand
   la place le permet : ce sont des cartes independantes, pas une suite. */
.colonnes-fiche { columns: 2; column-gap: 20px; padding-top: 14px; }
.colonnes-fiche > * { break-inside: avoid; }
@media (max-width: 820px) { .colonnes-fiche { columns: 1; } }


/* ------------------------------------------------------------------ ADR-0092
   L'ecritoire : le panneau ou l'on travaille un message.

   Un `<dialog>` natif, meme grammaire que `.fiche-aide` — piege de focus,
   Echap et fond assombri viennent du navigateur. Il **lance** et se ferme ;
   la page montre le resultat, par le bandeau de tache puis le rechargement.
   Un panneau qui aurait sonde lui-meme aurait double cette mecanique. */
.ecritoire {
  width: min(1280px, calc(100vw - 48px)); max-width: none;
  height: fit-content; max-height: min(860px, calc(100vh - 56px));
  padding: 0; border: 0; border-radius: 14px; background: var(--carte);
  color: var(--texte); box-shadow: 0 30px 80px -30px rgba(13, 21, 36, .7);
  overflow: hidden;
}
.ecritoire::backdrop { background: rgba(13, 21, 36, .42); }
.ecritoire[open] { display: flex; flex-direction: column; }
.ecritoire > form { display: flex; flex-direction: column; min-height: 0; }

.ecritoire-tete {
  flex: none; padding: 14px var(--panneau-pad-x);
  border-bottom: 1px solid var(--bord);
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.ecritoire-tete h2 { margin: 0; font-size: 22px; }
.ecritoire-fil {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--discret); font-weight: 700;
}
.ecritoire-rappel { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; }
.ecritoire-rappel--oui { color: var(--succes); }
.ecritoire-rappel--non { color: var(--alerte); }
.ecritoire-rappel--reserve { color: var(--avertissement); }
.ecritoire-fermer {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 8px;
  padding: 0; font-size: 15px; line-height: 1; color: var(--discret);
}
.ecritoire-corps { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 18px var(--panneau-pad-x); }
.ecritoire-pied {
  flex: none; border-top: 1px solid var(--bord); background: var(--fond);
  padding: 12px var(--panneau-pad-x);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ecritoire-pied .a-droite { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ecritoire-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ecritoire-rubrique {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--discret); font-weight: 700; margin: 0 0 6px;
}

/* --- les creneaux : un angle, et ce qui l'autorise ---------------------
   Un angle a des prerequis factuels ; en imposer un que les faits ne portent
   pas revient a commander un passe commun. Les indisponibles restent visibles
   **avec leur raison** : griser sans dire pourquoi fait chercher la cause
   dans le mauvais ecran. */
.creneaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.creneau {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--bord); border-radius: 8px; background: var(--carte);
}
.creneau--hors { background: var(--fond); border-style: dashed; }
.creneau--hors .creneau-titre { color: var(--discret); }
.creneau-titre { font-weight: 600; }
.creneau-raison { font-size: 12.5px; color: var(--discret); }

/* --- ce que l'agent recoit : une liste d'intrants est une liste de reglages */
.intrants { list-style: none; margin: 0 0 8px; padding: 0; }
.intrants li { font-size: 13.5px; padding: 4px 0 4px 22px; position: relative; }
.intrants li::before { content: "\2713"; position: absolute; left: 0; color: var(--succes); font-weight: 700; }
.intrants li.intrant-non::before { content: "\2715"; color: var(--alerte); }
.intrant-regler { font-size: 12px; margin-left: 6px; white-space: nowrap; }

/* --- deux champs, deux durees de vie ----------------------------------
   Ils se ressemblent trop pour qu'on laisse deviner : sans la mention de
   duree, un savoir durable finit dans la case jetable. */
.ecritoire-reprise { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bord); }
.boite { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); padding: 12px 15px; }
.boite--durable { border-left: 3px solid var(--prive); }
.boite--jetable { border-left: 3px solid var(--bleu); }
.boite textarea { width: 100%; font-size: 13.5px; background: var(--fond); }
.boite-duree { font-size: 12.5px; margin: 8px 0 0; font-weight: 600; }
.boite--durable .boite-duree { color: var(--prive); }
.boite--jetable .boite-duree { color: var(--bleu); }
.boite-duree .boite-plus { font-weight: 400; color: var(--discret); }

/* --- les propositions du concours -------------------------------------
   Le meme bloc dans l'ecritoire et sur la fiche. Dans le panneau il ouvre le
   corps ; sur la fiche il vient sous l'atelier. */
.bloc-propositions { margin-bottom: 18px; }
.titre-propositions { font-size: 17px; margin: 0 0 4px; }
.ecritoire .bloc-propositions {
  border-bottom: 1px solid var(--bord); padding-bottom: 16px;
}
.propositions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 4px; }
.proposition { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); padding: 12px 14px; }
.proposition-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; }
.proposition-texte { white-space: pre-wrap; font-size: 13px; line-height: 1.5; margin: 0 0 10px; }

/* --- la note, et ce qu'elle nourrit ------------------------------------ */
.note-lue {
  font-size: 12.5px; color: var(--prive); background: var(--prive-fond);
  border-radius: 6px; padding: 7px 11px; margin: 0 0 10px;
}

@media (max-width: 900px) { .ecritoire-deux { grid-template-columns: minmax(0, 1fr); } }


/* --- fenêtre en surimpression (composant partagé, ADR-0088) ------------
   Un `<dialog>` natif : le fond, le piège à focus et la touche Échap sont
   donnés par le navigateur. Rien à écrire pour ça, et rien à oublier.
   Historiquement dans `radar.css` (fenêtre « Ajouter un profil ») ; le
   tableau de bord ouvre désormais la même pour la file d'invitation. */
.fenetre-ajout {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  border: none; border-radius: 14px; padding: 0; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
}
.fenetre-ajout::backdrop { background: rgba(16, 20, 28, .5); }
.fenetre-ajout form { display: flex; flex-direction: column; max-height: calc(100vh - 64px); gap: 0; }
.fenetre-tete {
  padding: 18px 24px 14px; border-bottom: 1px solid var(--bord);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.fenetre-tete h2 { margin: 0; font-size: 18px; }
.fenetre-corps { padding: 18px 24px 8px; overflow-y: auto; }
.fenetre-pied {
  padding: 14px 24px 18px; border-top: 1px solid var(--bord); background: #fbfaf8;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* Les champs de la fenêtre tiennent la largeur : sans cela, un `input` de
   150 px laisse le libellé du champ suivant remonter à côté de lui —
   constaté à l'écran. */
.fenetre-ajout .fenetre-corps > label,
.fenetre-ajout .fenetre-corps > .champ-titre { display: block; font-weight: 600; }
.fenetre-ajout input[type="url"],
.fenetre-ajout input[type="text"],
.fenetre-ajout textarea,
.fenetre-ajout select { width: 100%; }
.fenetre-ajout .segments { width: auto; }

/* --- voix personnelle (ADR-0108) : carte du tableau de bord et /ma-voix -- */
.menu-identite a.menu-identite-nom { color: #fff; font-size: 13px; text-decoration: none; }
.menu-identite a.menu-identite-nom:hover { text-decoration: underline; }
.lien-discret {
  border: 0; background: none; padding: 0; margin: 0; font: inherit; font-size: 13px;
  color: var(--bleu); cursor: pointer;
}
.lien-discret:hover { text-decoration: underline; }
.avatar-voix {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex;
  align-items: center; justify-content: center; background: #5b3fa8; color: #fff;
  font-weight: 700; font-size: 14px;
}
.carte-voix-prete { border-left: 3px solid #5b3fa8; max-width: 620px; margin-bottom: 22px; }
.carte-voix-prete-tete { display: flex; gap: 12px; align-items: flex-start; }
.carte-voix-prete-tete h2 { font-size: 17px; margin: 0; }
.carte-voix-prete-tete p { margin: 2px 0 0; font-size: 13.5px; }
.etapes-voix { list-style: none; padding: 0; margin: 10px 0 0; }
.etapes-voix li {
  display: flex; gap: 10px; align-items: center; padding: 8px 0;
  border-top: 1px solid #efede9; font-size: 13.5px;
}
.etapes-voix li:first-child { border-top: 0; }
.etapes-voix .libelle-etape { flex: 1; min-width: 0; }
.etapes-voix li.faite .libelle-etape { color: var(--discret); }
.coche-voix {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cfccc5; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
}
.etapes-voix li.faite .coche-voix { background: var(--succes); border-color: var(--succes); }
.bouton-etape { font-size: 13px; white-space: nowrap; }
.progression-voix { height: 6px; background: #ecebe7; border-radius: 3px; overflow: hidden; margin-top: 8px; }
.progression-voix > div { height: 100%; background: var(--succes); }
.ma-voix-grille { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 360px); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .ma-voix-grille { grid-template-columns: minmax(0, 1fr); } }
.ma-voix-formulaire textarea { font-family: inherit; }
.apercu-voix { display: flex; gap: 10px; align-items: center; margin: 12px 0 4px; }
.fiche-defaut-lecture {
  white-space: pre-wrap; font-size: 12.5px; max-height: 320px; overflow: auto;
  background: var(--fond); border-radius: 6px; padding: 10px; margin: 8px 0 0;
}
.bandeau-attente {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0;
  background: #fdf1d6; border: 1px solid #f3dfa3; border-left: 3px solid #8a6a00;
  border-radius: var(--rayon); padding: 10px 14px; font-size: 13.5px;
}
.bandeau-attente > span { flex: 1 1 260px; }
.case-voix {
  display: flex !important; gap: 10px; align-items: flex-start; font-weight: 400 !important;
  border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; margin: 14px 0 6px;
}
.case-voix input { margin-top: 3px; }
.ligne-activation { display: grid; grid-template-columns: 110px 1fr; gap: 14px; }
.ligne-activation label { display: flex; align-items: center; font-weight: 600; margin-top: 10px; }
.identifiant-lecture { display: inline-block; margin-top: 6px; }
[data-champs-voix][hidden] { display: none; }
/* --- équipe (ADR-0109) ---------------------------------------------------- */
.geste-equipe { display: inline-block; position: relative; }
.geste-equipe > summary { list-style: none; cursor: pointer; }
.geste-equipe > summary::-webkit-details-marker { display: none; }
.geste-equipe[open] > form {
  position: absolute; right: 0; z-index: 20; width: 280px; display: flex; flex-direction: column; gap: 6px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: var(--panneau-pad-y) var(--panneau-pad-x); box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.geste-equipe form p { margin: 0; font-size: 12.5px; }
.doublons-a-trancher { margin-top: 16px; border-left: 3px solid #8a6a00; }
.doublons-a-trancher h3 { margin: 0 0 4px; font-size: 15px; }
.doublon { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid #efede9; }
.equipe-liste { margin-top: 16px; }