/* ==========================================================================
   Humind — Portail commercial
   Feuille de style unique, partagée par toutes les pages.

   Toutes les classes portent le préfixe `c-`. Ce n'est pas de la coquetterie :
   un nom banal (`rail`, `carte`, `liste`) finit toujours par rencontrer une
   règle écrite ailleurs, et le symptôme — une page qui défile de travers, un
   panneau qui perd ses bordures — ne ressemble jamais à sa cause.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. La police, servie par le portail lui-même (13.0)

   Inter venait de fonts.googleapis.com : une feuille de style tierce,
   bloquante, sur un domaine qu'il fallait résoudre, connecter et chiffrer
   avant que la première ligne du portail ne s'affiche — puis un second
   domaine, fonts.gstatic.com, pour les fichiers eux-mêmes. Deux poignées de
   main réseau avant le premier pixel, pour une police de 48 ko.

   Les deux fichiers sont désormais posés à côté de la feuille de style. Ce
   sont des polices variables : un seul fichier couvre les graisses 100 à
   900, là où quatre fichiers auraient été nécessaires en statique.

   `latin-ext` n'est chargé que si la page contient un caractère de sa plage
   — en français, le « œ » de « cœur » suffit à le déclencher, et c'est très
   bien ainsi : le navigateur décide, pas nous.

   Effet de bord souhaitable : plus aucune requête vers un tiers au
   chargement d'une page. Un portail commercial qui annonce l'adresse IP de
   chacun de ses utilisateurs à un service extérieur à chaque ouverture est
   une conversation qu'on préfère ne pas avoir.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  --c-fond: #f5f6f8;
  --c-surface: #ffffff;
  --c-surface-2: #fafbfc;
  --c-bordure: #e2e5ea;
  --c-bordure-forte: #cdd2da;
  --c-texte: #14171c;
  --c-texte-doux: #5f6874;
  --c-texte-faible: #8b939f;

  --c-primaire: #2f56e0;
  --c-primaire-fonce: #2444bb;
  --c-primaire-voile: #eaeeff;

  --c-vert: #0f8a4d;
  --c-vert-voile: #e4f6ec;
  --c-rouge: #cf2f43;
  --c-rouge-voile: #fdeaec;
  --c-ambre: #b16a05;
  --c-ambre-voile: #fdf1de;
  --c-violet: #6d43cc;
  --c-violet-voile: #f0eafd;
  --c-ardoise-voile: #eef0f4;

  --c-rayon: 10px;
  --c-rayon-s: 6px;
  --c-ombre: 0 1px 2px rgba(16, 20, 28, .05), 0 4px 14px rgba(16, 20, 28, .05);
  --c-ombre-forte: 0 12px 40px rgba(16, 20, 28, .16);

  --c-rail: 246px;
  --c-police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --c-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

/* --------------------------------------------------------------------------
   1 bis. Thème sombre — deux portes vers le même jeu de couleurs

   `data-theme` est posé sur `<html>` par le petit script de tête de page,
   avant le premier rendu : sans lui, un thème choisi « clair » s'afficherait
   d'abord en sombre le temps que le script s'exécute, à chaque navigation.

   - `auto` (défaut) : aucun attribut, la préférence du système décide ;
   - `light` : l'attribut bloque la requête média, quel que soit le système ;
   - `dark` : l'attribut applique le jeu sombre, quel que soit le système.

   D'où le dédoublement de chaque bloc. N'en écrire qu'un laisserait soit le
   bouton inopérant, soit la préférence système ignorée.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-fond: #0e1116;
    --c-surface: #161a20;
    --c-surface-2: #1b1f27;
    --c-bordure: #262c35;
    --c-bordure-forte: #38404b;
    --c-texte: #e7eaef;
    --c-texte-doux: #9aa3b0;
    --c-texte-faible: #6f7987;

    --c-primaire: #6b8cff;
    --c-primaire-fonce: #85a1ff;
    --c-primaire-voile: #1c2440;

    --c-vert: #4ade80;
    --c-vert-voile: #12291d;
    --c-rouge: #f87f8d;
    --c-rouge-voile: #2e1519;
    --c-ambre: #e4a94b;
    --c-ambre-voile: #2c2110;
    --c-violet: #a688f5;
    --c-violet-voile: #221a38;
    --c-ardoise-voile: #212630;

    --c-ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --c-ombre-forte: 0 12px 40px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --c-fond: #0e1116;
  --c-surface: #161a20;
  --c-surface-2: #1b1f27;
  --c-bordure: #262c35;
  --c-bordure-forte: #38404b;
  --c-texte: #e7eaef;
  --c-texte-doux: #9aa3b0;
  --c-texte-faible: #6f7987;

  --c-primaire: #6b8cff;
  --c-primaire-fonce: #85a1ff;
  --c-primaire-voile: #1c2440;

  --c-vert: #4ade80;
  --c-vert-voile: #12291d;
  --c-rouge: #f87f8d;
  --c-rouge-voile: #2e1519;
  --c-ambre: #e4a94b;
  --c-ambre-voile: #2c2110;
  --c-violet: #a688f5;
  --c-violet-voile: #221a38;
  --c-ardoise-voile: #212630;

  --c-ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --c-ombre-forte: 0 12px 40px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

/* `hidden` vient de la feuille du navigateur : n'importe quelle règle de
   classe qui pose un `display` le bat. Sans ce garde-fou, une barre de
   pagination masquée en JS reste visible parce qu'elle est en `flex`. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--c-police);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-texte);
  background: var(--c-fond);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--c-primaire); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   2. Page de connexion
   -------------------------------------------------------------------------- */

body.c-page-connexion {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--c-primaire-voile), transparent 65%),
    var(--c-fond);
}

/* Deux volets (13.0) : à gauche ce que le portail est, à droite ce qu'il
   demande. La colonne de gauche disparaît sous 720 px — elle ne porte aucun
   contrôle, et sur un téléphone elle ne ferait que repousser le mot de passe
   sous la ligne de flottaison. Seul le logo reste, au-dessus du titre. */
.c-acces {
  display: grid;
  grid-template-columns: 300px minmax(0, 392px);
  width: 100%;
  max-width: 692px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: 16px;
  box-shadow: var(--c-ombre);
  overflow: hidden;
}

.c-acces-volet {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 38px 30px;
  background:
    linear-gradient(160deg, var(--c-primaire-voile), transparent 70%),
    var(--c-surface-2);
  border-right: 1px solid var(--c-bordure);
}

.c-acces-logo { display: block; width: 186px; max-width: 100%; height: auto; }

.c-acces-pitch {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-texte);
}

.c-acces-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  color: var(--c-texte-doux);
}
.c-acces-points li { display: flex; gap: 8px; align-items: flex-start; }
/* Une puce dessinée plutôt qu'un caractère : elle s'aligne sur la première
   ligne quel que soit le corps de texte. */
.c-acces-points li::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--c-primaire);
}

.c-acces-corps { padding: 38px 32px 34px; }

.c-acces-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.c-acces-titre { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -.015em; }
.c-acces-sous { margin: 0 0 22px; font-size: 13px; color: var(--c-texte-faible); }

.c-acces-pied { margin: 16px 0 0; text-align: center; }

/* Un bouton qui se lit comme un lien. C'est un `<button>` parce qu'il
   n'ouvre aucune adresse : un `<a href="#">` promettrait une navigation. */
.c-lien-bouton {
  padding: 2px 4px;
  font: inherit;
  font-size: 13px;
  color: var(--c-primaire);
  background: none;
  border: 0;
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}
.c-lien-bouton:hover { text-decoration: underline; }

/* Un champ et son bouton dans le même cadre : le bouton est posé par-dessus,
   et le champ réserve la place à droite pour qu'aucun caractère ne passe
   dessous. */
.c-champ-avec-bouton { position: relative; }
.c-champ-avec-bouton input { padding-right: 42px; }
.c-oeil {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}
.c-oeil:hover { color: var(--c-texte); background: var(--c-surface-2); }

@media (max-width: 720px) {
  .c-acces { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
  /* Le volet ne disparaît pas tout à fait : il se réduit au logo, posé
     au-dessus du formulaire. Une page de connexion sans identité visible
     ressemble à une page d'erreur. */
  .c-acces-volet {
    gap: 0;
    padding: 26px 26px 0;
    background: none;
    border-right: 0;
  }
  .c-acces-pitch, .c-acces-points { display: none; }
  .c-acces-logo { width: 150px; }
  .c-acces-corps { padding: 22px 26px 30px; }
}

.c-marque {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.c-marque-pastille {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--c-primaire);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.02em;
}

.c-marque-nom { font-weight: 650; letter-spacing: -.01em; }
.c-marque-nom span { color: var(--c-texte-faible); font-weight: 500; }

/* Plus de titre ni de baseline : le logo est le seul en-tête, donc il se
   centre, et il respire davantage que lorsqu'il coiffait deux lignes.
   `display: flex` est indispensable : la règle générale de `.c-marque` la
   pose en `inline-flex`, une boîte à la taille de son contenu, dans laquelle
   `justify-content` n'a rien à centrer. */
.c-acces .c-marque { display: flex; justify-content: center; margin-bottom: 30px; }

/* --------------------------------------------------------------------------
   3. Formulaires
   -------------------------------------------------------------------------- */

.c-champ { margin-bottom: 15px; }

.c-champ > label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-texte-doux);
}

.c-champ input,
.c-champ select,
.c-champ textarea,
.c-saisie {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

.c-champ textarea { min-height: 96px; resize: vertical; }

.c-champ input:focus,
.c-champ select:focus,
.c-champ textarea:focus,
.c-saisie:focus {
  border-color: var(--c-primaire);
  box-shadow: 0 0 0 3px var(--c-primaire-voile);
}

.c-champ-aide { margin: 5px 0 0; font-size: 12px; color: var(--c-texte-faible); }

.c-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.c-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  font: inherit;
  font-weight: 600;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, opacity .12s;
}

.c-bouton:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-texte-faible); }
.c-bouton:disabled { opacity: .55; cursor: not-allowed; }

.c-bouton-primaire {
  color: #fff;
  background: var(--c-primaire);
  border-color: var(--c-primaire);
}
.c-bouton-primaire:hover:not(:disabled) { background: var(--c-primaire-fonce); border-color: var(--c-primaire-fonce); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-bouton-primaire { color: #0e1116; }
}
:root[data-theme="dark"] .c-bouton-primaire { color: #0e1116; }

.c-bouton-large { width: 100%; padding: 11px 15px; }
.c-bouton-discret { border-color: transparent; background: transparent; color: var(--c-texte-doux); }
.c-bouton-discret:hover:not(:disabled) { background: var(--c-ardoise-voile); }
.c-bouton-danger { color: var(--c-rouge); border-color: var(--c-bordure-forte); }
.c-bouton-danger:hover:not(:disabled) { background: var(--c-rouge-voile); border-color: var(--c-rouge); }
.c-bouton-petit { padding: 5px 10px; font-size: 12.5px; }

/* --------------------------------------------------------------------------
   4. Alertes
   -------------------------------------------------------------------------- */

.c-alerte {
  display: none;
  padding: 10px 12px;
  margin-bottom: 16px;
  border-radius: var(--c-rayon-s);
  font-size: 13px;
  background: var(--c-rouge-voile);
  border: 1px solid var(--c-rouge);
  color: var(--c-rouge);
}
.c-alerte:not(:empty) { display: block; }
.c-alerte-info { background: var(--c-ambre-voile); border-color: var(--c-ambre); color: var(--c-ambre); }

.c-toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}

.c-toast {
  padding: 11px 14px;
  border-radius: var(--c-rayon-s);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  box-shadow: var(--c-ombre-forte);
  font-size: 13px;
  animation: c-monte .18s ease-out;
}
.c-toast-succes { border-left: 3px solid var(--c-vert); }
.c-toast-erreur { border-left: 3px solid var(--c-rouge); }

@keyframes c-monte { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------------------
   5. Coque : rail + contenu
   -------------------------------------------------------------------------- */

.c-coque {
  display: grid;
  grid-template-columns: var(--c-rail) minmax(0, 1fr);
  min-height: 100vh;
}

.c-rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: calc(8px + var(--c-jeu) * .0154) 10px;
  background: var(--c-surface);
  border-right: 1px solid var(--c-bordure);
  /* Le rail lui-même ne défile pas : la marque, le sélecteur d'activité et
     le bloc de compte restent en place. Seule la liste des pages cède, et
     seulement si l'écran est vraiment trop court — voir `.c-rail-nav`. */
  overflow: hidden;

  /* Le jeu : combien de pixels le rail a en trop, de 0 à 260.

     Il remplace les trois paliers de media queries qui resserraient le rail
     par sauts (820 px, 750 px, 690 px). Trois défauts à ces paliers : ils se
     déclenchaient toujours en retard — l'ascenseur apparaissait avant eux —,
     ils se recalibraient à la main à chaque entrée de menu ajoutée, et le
     saut se voyait au redimensionnement. Ici chaque hauteur du rail est une
     fraction du jeu : la réduction est continue, elle commence exactement
     quand la place manque, et une dix-septième entrée de menu la décale
     toute seule.

     620 px de fenêtre = plus aucun jeu, tout est au plus serré ; 880 px et
     au-delà = le rail respire comme avant. */
  --c-jeu: clamp(0px, calc(100vh - 620px), 260px);
}

/* `min-height: 0` est la ligne qui compte : sans elle, un enfant de flex
   refuse de rétrécir sous sa hauteur de contenu, et c'est le rail entier qui
   se met à déborder. */
.c-rail-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin: 0 -4px;
  padding: 0 4px;
}

.c-rail .c-marque { padding: 0 8px; margin-bottom: calc(4px + var(--c-jeu) * .0231); }

.c-rail-groupe { margin-bottom: calc(1px + var(--c-jeu) * .0154); }
.c-rail-groupe:last-child { margin-bottom: 0; }

.c-rail-titre {
  padding: 0 10px;
  margin: 0 0 calc(var(--c-jeu) * .00385);
  font-size: calc(9px + var(--c-jeu) * .00385);
  line-height: calc(12px + var(--c-jeu) * .0115);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}

.c-rail-lien {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(1px + var(--c-jeu) * .0115) 10px;
  margin-bottom: 0;
  font-size: calc(12.5px + var(--c-jeu) * .0027);
  line-height: calc(16px + var(--c-jeu) * .0146);
  border-radius: var(--c-rayon-s);
  color: var(--c-texte-doux);
  font-weight: 550;
  text-decoration: none;
  transition: background .1s, color .1s;
}

.c-rail-lien:hover { background: var(--c-ardoise-voile); color: var(--c-texte); text-decoration: none; }

.c-rail-lien[aria-current="page"] {
  background: var(--c-primaire-voile);
  color: var(--c-primaire);
}

.c-rail-lien svg {
  width: calc(15px + var(--c-jeu) * .0077);
  height: calc(15px + var(--c-jeu) * .0077);
  flex: 0 0 calc(15px + var(--c-jeu) * .0077);
}

/* Le compte et la déconnexion tiennent sur **une ligne**.

   Ils occupaient deux blocs empilés — la personne, puis un bouton
   « Se déconnecter » pleine largeur —, soit une centaine de pixels pris au
   bas du rail pour deux commandes qu'on utilise une fois par jour. C'est
   cette centaine de pixels qui manquait à la liste des pages sur un écran
   de portable. La sortie devient une icône posée contre le bloc de compte :
   c'est la place qu'elle occupe dans toutes les applications de ce genre, et
   elle reste annoncée aux lecteurs d'écran par son `aria-label`. */
.c-rail-compte {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: calc(6px + var(--c-jeu) * .0077);
  margin-top: calc(6px + var(--c-jeu) * .0077);
  border-top: 1px solid var(--c-bordure);
}

.c-rail-moi {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: calc(3px + var(--c-jeu) * .0077) 10px;
  border-radius: var(--c-rayon-s);
  color: inherit;
  text-decoration: none;
}
.c-rail-moi:hover { background: var(--c-ardoise-voile); text-decoration: none; }
.c-rail-moi[aria-current="page"] { background: var(--c-primaire-voile); }
.c-rail-moi[aria-current="page"] .c-rail-moi-nom { color: var(--c-primaire); }

/* La sortie : carrée, discrète, et rouge seulement au survol. Toujours
   rouge, elle attirerait l'œil en permanence vers la seule commande du rail
   qu'on ne veut pas déclencher par erreur. */
.c-rail-sortie {
  flex: 0 0 auto;
  display: inline-flex;
  padding: 7px;
  line-height: 0;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  transition: background .1s, color .1s;
}
.c-rail-sortie:hover { background: var(--c-rouge-voile); color: var(--c-rouge); }
.c-rail-sortie svg { width: 16px; height: 16px; }

.c-jeton {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primaire-voile);
  color: var(--c-primaire);
  font-size: 11.5px;
  font-weight: 700;
}

.c-rail-moi-texte { display: flex; flex-direction: column; min-width: 0; }

/* Le jeton tant que l'on ne sait pas encore qui est connecté : le même gris
   qui scintille que les briques de la page, mais rond et à la taille du
   portrait qui va le remplacer. Sans lui, le bas du rail montrait un rond
   bleu pâle vide, seule tache de couleur d'une page entièrement grise. */
.c-jeton-attente {
  background: linear-gradient(90deg, var(--c-ardoise-voile), var(--c-bordure), var(--c-ardoise-voile));
  background-size: 200% 100%;
  animation: c-scintille 1.2s infinite linear;
}

.c-rail-moi-nom {
  display: block;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-rail-moi-mail {
  display: block;
  font-size: 11.5px;
  color: var(--c-texte-faible);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-contenu { min-width: 0; padding: 0 0 56px; }

.c-entete {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 15px 26px;
  background: color-mix(in srgb, var(--c-fond) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-bordure);
}

.c-entete h1 { font-size: 18px; }
.c-entete-sous { margin: 1px 0 0; font-size: 12.5px; color: var(--c-texte-faible); }
.c-entete-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.c-corps { padding: 22px 26px 0; }

.c-basculer {
  display: none;
  padding: 6px;
  line-height: 0;
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface);
  cursor: pointer;
}
.c-basculer svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .c-coque { grid-template-columns: minmax(0, 1fr); }
  .c-rail {
    position: fixed;
    z-index: 60;
    left: 0;
    top: 0;
    width: var(--c-rail);
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    box-shadow: var(--c-ombre-forte);
  }
  .c-coque.c-rail-ouvert .c-rail { transform: none; }
  .c-basculer { display: inline-flex; }
  .c-entete, .c-corps { padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   6. Cartes et grilles
   -------------------------------------------------------------------------- */

.c-carte {
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon);
  box-shadow: var(--c-ombre);
}

.c-carte-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--c-bordure);
}
.c-carte-tete h2 { font-size: 14px; }
.c-carte-tete .c-carte-outils { margin-left: auto; display: flex; gap: 6px; }
.c-carte-corps { padding: 16px; }

.c-grille { display: grid; gap: 16px; margin-bottom: 20px; }
.c-grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Une seule colonne, mais dans la même famille : une fiche sans
   rattachement bascule d'une grille à l'autre sans changer d'écriture. */
.c-grille-1 { grid-template-columns: minmax(0, 1fr); }
.c-grille-2-1 { grid-template-columns: 2fr minmax(0, 1fr); }
/* Deux tiers / un tiers est trop serré quand la colonne de droite porte du
   texte et non des chiffres : « À faire » y nomme le compte, le contact et
   l'affaire de chaque action, et le tiers les coupait tous les trois. Trois
   cinquièmes / deux cinquièmes suffit — la colonne principale reste la
   principale (13.9). */
.c-grille-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

@media (max-width: 1180px) {
  .c-grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-grille-2-1, .c-grille-3-2, .c-grille-3 { grid-template-columns: minmax(0, 1fr); }
}
/* Sur un téléphone, quatre indicateurs empilés font quatre écrans avant le
   premier contenu (13.0). Ils tiennent à deux par ligne : ce sont trois
   lignes de texte chacun, pas des cartes. On ne repasse à une colonne que
   sous 360 px, où « 104 500 € » commencerait à se couper. */
@media (max-width: 720px) {
  .c-grille { gap: 12px; margin-bottom: 14px; }
  .c-grille-4, .c-grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-kpi { padding: 12px 13px; }
  .c-kpi-libelle { font-size: 10.5px; letter-spacing: .03em; }
  .c-kpi-valeur { margin-top: 5px; font-size: 21px; }
  .c-kpi-note { font-size: 11.5px; }
}
@media (max-width: 359px) {
  .c-grille-4, .c-grille-2 { grid-template-columns: minmax(0, 1fr); }
}

/* Indicateurs */

.c-kpi { padding: 15px 16px; }
.c-kpi-libelle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-texte-faible);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.c-kpi-valeur {
  margin-top: 7px;
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.c-kpi-note { margin-top: 3px; font-size: 12.5px; color: var(--c-texte-doux); }
.c-kpi-note strong { font-weight: 650; color: var(--c-texte); }

/* --------------------------------------------------------------------------
   7. Tableaux
   -------------------------------------------------------------------------- */

.c-tableau-cadre { overflow-x: auto; }

table.c-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.c-tableau th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 9px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-bordure);
  white-space: nowrap;
}

table.c-tableau th.c-triable { cursor: pointer; user-select: none; }
table.c-tableau th.c-triable:hover { color: var(--c-texte); }
table.c-tableau th .c-fleche { opacity: .55; font-size: 10px; }

table.c-tableau td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-bordure);
  vertical-align: middle;
}

table.c-tableau tbody tr:last-child td { border-bottom: 0; }
table.c-tableau tbody tr.c-cliquable { cursor: pointer; }
table.c-tableau tbody tr.c-cliquable:hover { background: var(--c-surface-2); }

.c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-fort { font-weight: 620; }
.c-doux { color: var(--c-texte-doux); }
.c-faible { color: var(--c-texte-faible); }
.c-tronque { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.c-cellule-titre { display: flex; align-items: center; gap: 9px; min-width: 0; }

/* --------------------------------------------------------------------------
   8. Pastilles
   -------------------------------------------------------------------------- */

.c-pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 620;
  white-space: nowrap;
  background: var(--c-ardoise-voile);
  color: var(--c-texte-doux);
}
.c-pastille-verte { background: var(--c-vert-voile); color: var(--c-vert); }
.c-pastille-rouge { background: var(--c-rouge-voile); color: var(--c-rouge); }
.c-pastille-ambre { background: var(--c-ambre-voile); color: var(--c-ambre); }
.c-pastille-bleue { background: var(--c-primaire-voile); color: var(--c-primaire); }
.c-pastille-violette { background: var(--c-violet-voile); color: var(--c-violet); }

.c-point { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: currentColor; }

/* --------------------------------------------------------------------------
   9. Barre d'outils de liste
   -------------------------------------------------------------------------- */

.c-outils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.c-recherche { position: relative; flex: 1 1 260px; max-width: 380px; }
.c-recherche svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--c-texte-faible);
  pointer-events: none;
}
.c-recherche input { padding-left: 32px; }

.c-outils select {
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
}

.c-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--c-bordure);
  font-size: 12.5px;
  color: var(--c-texte-doux);
}
.c-pagination .c-pagination-boutons { margin-left: auto; display: flex; gap: 6px; }

.c-vide {
  padding: 44px 20px;
  text-align: center;
  color: var(--c-texte-faible);
}
.c-vide strong { display: block; margin-bottom: 4px; color: var(--c-texte-doux); font-size: 14px; }

/* La brique grise : l'unité de tout ce qui attend ses données. Voir la
   section 74 pour les formes qu'elle compose. */
.c-sq {
  display: block;
  height: 12px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--c-ardoise-voile), var(--c-bordure), var(--c-ardoise-voile));
  background-size: 200% 100%;
  animation: c-scintille 1.2s infinite linear;
}
.c-sq:last-child { margin-bottom: 0; }
.c-sq-titre { height: 14px; }
.c-sq-pilule { display: inline-block; height: 26px; border-radius: 999px; margin-bottom: 0; }
@keyframes c-scintille { to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   10. Kanban des affaires
   -------------------------------------------------------------------------- */

.c-kanban {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 18px;
}

.c-colonne {
  flex: 0 0 274px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 220px);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon);
}

.c-colonne.c-survol { border-color: var(--c-primaire); background: var(--c-primaire-voile); }

.c-colonne-tete {
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--c-bordure);
}
.c-colonne-nom {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 680;
}
.c-colonne-nom .c-compte {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--c-ardoise-voile);
  color: var(--c-texte-doux);
  font-size: 11px;
}
.c-colonne-total {
  margin-top: 3px;
  font-size: 12px;
  color: var(--c-texte-faible);
  font-variant-numeric: tabular-nums;
}

.c-colonne-corps {
  flex: 1;
  min-height: 60px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.c-affaire {
  display: block;
  padding: 11px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  color: inherit;
  text-decoration: none;
  cursor: grab;
  transition: border-color .12s, box-shadow .12s;
}
.c-affaire:hover { border-color: var(--c-bordure-forte); box-shadow: var(--c-ombre); text-decoration: none; }
.c-affaire.c-porte { opacity: .4; }

/* Le liseré d'activité : la couleur posée dans la base, sur le bord
   gauche. Trois pixels suffisent à trier un pipeline transverse du coin de
   l'œil ; un fond teinté, lui, rendrait chaque titre moins lisible. */
.c-affaire-teintee {
  border-left: 3px solid var(--c-teinte, var(--c-bordure));
  padding-left: 10px;
}

/* Sa légende. Une couleur qui ne se nomme nulle part n'est qu'une
   décoration : celle-ci dit ce que chaque liseré veut dire. */
.c-legende-activites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: -4px 0 12px;
  font-size: 12px;
  color: var(--c-texte-doux);
}
.c-legende-activite { display: inline-flex; align-items: center; gap: 6px; }
.c-legende-activite .c-trait {
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.c-affaire-titre { font-weight: 620; line-height: 1.35; margin-bottom: 5px; }
.c-affaire-societe { font-size: 12.5px; color: var(--c-texte-doux); margin-bottom: 8px; }
/* L'étape exacte d'une carte rangée dans une colonne de rang (13.14). */
.c-affaire-etape { margin: -4px 0 8px; font-size: 11.5px; color: var(--c-texte-faible); }
.c-affaire-pied {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--c-texte-faible);
  font-variant-numeric: tabular-nums;
}
.c-affaire-montant { font-weight: 650; color: var(--c-texte); }

/* Barres de progression (répartition par étape) */

.c-barres { display: flex; flex-direction: column; gap: 11px; }
.c-barre-ligne { display: grid; grid-template-columns: 128px minmax(0, 1fr) 96px; gap: 10px; align-items: center; }
.c-barre-nom { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-barre-piste { height: 8px; border-radius: 999px; background: var(--c-ardoise-voile); overflow: hidden; }
.c-barre-jauge { height: 100%; border-radius: 999px; background: var(--c-primaire); min-width: 2px; }
.c-barre-valeur { text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--c-texte-doux); }

@media (max-width: 640px) {
  .c-barre-ligne { grid-template-columns: 92px minmax(0, 1fr) 78px; }
}

/* --------------------------------------------------------------------------
   11. Fiche
   -------------------------------------------------------------------------- */

.c-fiche-tete {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.c-fiche-tete .c-jeton { width: 44px; height: 44px; flex-basis: 44px; font-size: 15px; }
.c-fiche-tete h1 { font-size: 20px; }
.c-fiche-meta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--c-texte-doux); }

.c-attributs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.c-attribut {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-bordure);
  font-size: 13.5px;
}
.c-attributs .c-attribut:last-child,
.c-attributs .c-attribut:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.c-attribut dt { color: var(--c-texte-faible); font-size: 12.5px; padding-top: 1px; }
.c-attribut dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .c-attributs { grid-template-columns: minmax(0, 1fr); }
}

.c-fil { display: flex; flex-direction: column; gap: 12px; }

.c-fil-item {
  display: flex;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-bordure);
}
.c-fil-item:last-child { border-bottom: 0; padding-bottom: 0; }
.c-fil-corps { min-width: 0; flex: 1; }
.c-fil-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.c-fil-tete strong { font-weight: 620; }
.c-fil-date { font-size: 12px; color: var(--c-texte-faible); margin-left: auto; white-space: nowrap; }
.c-fil-texte { margin: 4px 0 0; color: var(--c-texte-doux); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Une action ne se lit pas seule : « Relancer » n'apprend rien tant qu'on
   ne sait pas chez qui. Deux lignes de contexte sous l'intitulé — le
   compte, la personne, l'affaire, puis le début du compte rendu —
   remplacent l'aller-retour vers la fiche (13.9).

   Chacune tient sur une ligne et se coupe proprement : trois rattachements
   longs feraient un pavé, et le bloc « À faire » doit rester une liste
   qu'on balaie du regard. `.c-tronque` ne convient pas ici, sa largeur
   maximale de 280 px ignorerait la colonne élargie. */
.c-fil-rattachement,
.c-fil-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
}
.c-fil-rattachement { margin: 3px 0 0; color: var(--c-texte-doux); }
.c-fil-detail { margin: 2px 0 0; color: var(--c-texte-faible); }

.c-coche {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 2px;
  border-radius: 4px;
  border: 1.5px solid var(--c-bordure-forte);
  background: var(--c-surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  color: transparent;
}
.c-coche[aria-pressed="true"] { background: var(--c-vert); border-color: var(--c-vert); color: #fff; }
.c-coche svg { width: 11px; height: 11px; }

/* --------------------------------------------------------------------------
   12. Boîte modale
   -------------------------------------------------------------------------- */

.c-voile {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 16, 22, .5);
  backdrop-filter: blur(2px);
}
.c-voile[hidden] { display: none; }

.c-modale {
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: 12px;
  box-shadow: var(--c-ombre-forte);
  animation: c-monte .16s ease-out;
}
.c-modale-tete {
  display: flex;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--c-bordure);
}
.c-modale-tete h2 { font-size: 15px; }
.c-modale-corps { padding: 18px; }
.c-modale-pied {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--c-bordure);
  background: var(--c-surface-2);
}

/* --------------------------------------------------------------------------
   13. Divers
   -------------------------------------------------------------------------- */

.c-lien-retour {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--c-texte-doux);
}
.c-lien-retour:hover { color: var(--c-texte); text-decoration: none; }

.c-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--c-bordure); margin-bottom: 16px; }
.c-onglet {
  padding: 8px 13px;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--c-texte-doux);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.c-onglet[aria-selected="true"] { color: var(--c-primaire); border-bottom-color: var(--c-primaire); }

.c-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media print {
  .c-rail, .c-entete-actions, .c-outils, .c-basculer { display: none !important; }
  .c-coque { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   14. Sélecteur d'activité (rail)
   -------------------------------------------------------------------------- */

.c-rail-activite {
  position: relative;
  margin: 0 2px calc(5px + var(--c-jeu, 260px) * .0192);
}

.c-rail-activite select:disabled {
  cursor: default;
  opacity: 1;
  background: transparent;
  border-color: transparent;
}

.c-rail-activite select {
  width: 100%;
  padding: calc(4px + var(--c-jeu, 260px) * .0154) 10px calc(4px + var(--c-jeu, 260px) * .0154) 20px;
  font: inherit;
  font-size: calc(12.5px + var(--c-jeu, 260px) * .0019);
  font-weight: 600;
  color: var(--c-texte);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}

.c-rail-activite select:focus {
  outline: none;
  border-color: var(--c-primaire);
  box-shadow: 0 0 0 3px var(--c-primaire-voile);
}

/* Trait de couleur de l'activité retenue : sans lui, rien à l'écran ne
   rappelle qu'on regarde un périmètre restreint. */
.c-rail-activite-trait {
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 2px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   15. Composants ajoutés en 2.0
   -------------------------------------------------------------------------- */

.c-case {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  cursor: pointer;
}
.c-case input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }

.c-modale-large { max-width: 660px; }

/* Composeur de message */

.c-composeur { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }
@media (max-width: 900px) { .c-composeur { grid-template-columns: minmax(0, 1fr); } }

.c-composeur textarea {
  min-height: 300px;
  font-family: var(--c-police);
  line-height: 1.55;
}

.c-apercu {
  padding: 14px;
  border: 1px dashed var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface-2);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 340px;
  overflow-y: auto;
}

.c-variables { display: flex; flex-wrap: wrap; gap: 5px; }
.c-variables button {
  padding: 3px 8px;
  font: inherit;
  font-size: 11.5px;
  font-family: var(--c-mono);
  color: var(--c-primaire);
  background: var(--c-primaire-voile);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.c-variables button:hover { background: var(--c-primaire); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-variables button:hover { color: #0e1116; }
}
:root[data-theme="dark"] .c-variables button:hover { color: #0e1116; }

.c-compteur { font-size: 12px; color: var(--c-texte-faible); font-variant-numeric: tabular-nums; }
.c-compteur.c-trop { color: var(--c-rouge); font-weight: 650; }

/* Cartes de ressources (modèles, argumentaires) */

.c-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 14px; }

.c-vignette {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon);
  box-shadow: var(--c-ombre);
}
.c-vignette-tete { display: flex; align-items: flex-start; gap: 8px; }
.c-vignette h3 { font-size: 14.5px; font-weight: 650; margin: 0; line-height: 1.35; }
.c-vignette-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.c-vignette-extrait {
  margin: 0;
  font-size: 13px;
  color: var(--c-texte-doux);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-vignette-pied { margin-top: auto; padding-top: 8px; display: flex; gap: 6px; align-items: center; }
.c-vignette-pied .c-faible { margin-right: auto; font-size: 12px; }

/* Courbe de prévision */

.c-courbe { width: 100%; height: 220px; display: block; }
.c-courbe .c-grille-ligne { stroke: var(--c-bordure); stroke-width: 1; }
.c-courbe .c-serie { fill: none; stroke: var(--c-primaire); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-courbe .c-aire { fill: var(--c-primaire-voile); opacity: .6; }
.c-courbe text { fill: var(--c-texte-faible); font-size: 10px; font-family: var(--c-police); }

.c-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--c-texte-doux); }
.c-legende span { display: inline-flex; align-items: center; gap: 6px; }
.c-legende i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* --------------------------------------------------------------------------
   16. Marque (3.0)

   Le picto est une image, le mot est du texte : le gris clair de la charte
   posé sur le fond blanc du portail serait illisible, et une typo gravée en
   SVG dépendrait d'une police que le navigateur n'a pas forcément.
   -------------------------------------------------------------------------- */

.c-marque {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.c-marque-picto { display: block; flex: 0 0 auto; }

/* Le logo du portail. `max-width: 100%` le laisse rétrécir dans un rail
   étroit plutôt que de déborder ; la hauteur suit, l'image gardant ses
   proportions. */
.c-marque-app {
  display: block;
  flex: 0 1 auto;
  width: calc(104px + var(--c-jeu, 260px) * .1077);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.c-marque-texte { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

.c-marque-nom {
  font-size: 18px;
  font-weight: 450;
  letter-spacing: -.015em;
  color: var(--c-texte);
}

.c-marque-sous,
.c-marque-tagline {
  font-size: 10px;
  color: var(--c-texte-faible);
  letter-spacing: .04em;
}
.c-marque-tagline { letter-spacing: .16em; font-size: 8.5px; }

.c-rail-marque {
  display: block;
  padding: 2px 8px;
  border-radius: var(--c-rayon-s);
  text-decoration: none;
}
.c-rail-marque:hover { text-decoration: none; background: var(--c-ardoise-voile); }



/* --------------------------------------------------------------------------
   17. Barre de recherche et de filtres (3.0)

   Les filtres portent une etiquette visible plutot qu'un « Statut : tous »
   cache dans le select : on voit ce sur quoi on filtre sans derouler.
   -------------------------------------------------------------------------- */

.c-barre {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon);
  box-shadow: var(--c-ombre);
}

.c-barre .c-recherche { flex: 1 1 240px; max-width: 340px; }
.c-barre .c-recherche input { height: 34px; }

.c-barre-filtres {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.c-filtre { display: flex; flex-direction: column; gap: 3px; }

.c-filtre label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
  padding-left: 2px;
}

.c-filtre select {
  height: 34px;
  padding: 0 26px 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  max-width: 200px;
}
.c-filtre select:focus { outline: none; border-color: var(--c-primaire); box-shadow: 0 0 0 3px var(--c-primaire-voile); }

.c-barre-filtres [data-reinitialiser] { height: 34px; }

/* Une barre qui tient sur une ligne (13.10).

   Six contrôles et un compteur : la barre s'enroulait dès qu'on descendait
   sous les grands écrans, et la liste commençait une rangée plus bas pour
   rien. Ici les filtres ne s'enroulent plus — ils défilent à l'horizontale
   si l'écran est vraiment étroit, ce qui coûte un geste au lieu d'une
   rangée. Sous 720 px, la barre se replie derrière son bouton comme
   ailleurs, et cette règle n'a plus d'objet. */
.c-barre-une-ligne { flex-wrap: nowrap; }
.c-barre-une-ligne .c-recherche { flex: 1 1 180px; min-width: 130px; }
.c-barre-une-ligne .c-barre-filtres { flex-wrap: nowrap; min-width: 0; overflow-x: auto; }
.c-barre-une-ligne .c-filtre { flex: 0 0 auto; }
.c-barre-une-ligne .c-filtre select { max-width: 165px; }

.c-barre-compte {
  margin-left: auto;
  align-self: center;
  font-size: 12.5px;
  color: var(--c-texte-faible);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .c-barre { align-items: stretch; }
  .c-barre .c-recherche { max-width: none; }
  .c-filtre select { max-width: none; width: 100%; }
  .c-filtre { flex: 1 1 140px; }
  .c-barre-compte { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   18. Formulaires en blocs (3.0)
   -------------------------------------------------------------------------- */

.c-bloc {
  border: 0;
  border-top: 1px solid var(--c-bordure);
  margin: 0 0 6px;
  padding: 16px 0 0;
}
.c-bloc:first-of-type { border-top: 0; padding-top: 0; }

.c-bloc legend {
  padding: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}

.c-bloc-note { margin: -4px 0 12px; font-size: 12.5px; color: var(--c-texte-doux); }

.c-grille-champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.c-champ-plein { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .c-grille-champs { grid-template-columns: minmax(0, 1fr); }
}

.c-requis { color: var(--c-rouge); font-weight: 700; }

.c-champ-erreur {
  margin: 5px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-rouge);
}

.c-champ-invalide input,
.c-champ-invalide select,
.c-champ-invalide textarea {
  border-color: var(--c-rouge);
  box-shadow: 0 0 0 3px var(--c-rouge-voile);
}

.c-modale-tete { justify-content: space-between; }

.c-modale-fermer {
  padding: 4px 8px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}
.c-modale-fermer:hover { background: var(--c-ardoise-voile); color: var(--c-texte); }

.c-modale-pied { align-items: center; }

/* --------------------------------------------------------------------------
   19. Indicateurs cliquables (3.0)
   -------------------------------------------------------------------------- */

a.c-kpi {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
a.c-kpi:hover {
  text-decoration: none;
  border-color: var(--c-primaire);
  box-shadow: 0 2px 6px rgba(47, 86, 224, .12), var(--c-ombre);
}
a.c-kpi:hover .c-kpi-libelle { color: var(--c-primaire); }

.c-kpi-fleche {
  float: right;
  color: var(--c-texte-faible);
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition: opacity .12s;
}
a.c-kpi:hover .c-kpi-fleche { opacity: 1; color: var(--c-primaire); }

/* Une ligne de fil qui mene quelque part doit le montrer avant le clic. */
.c-fil-item-lien { border-radius: var(--c-rayon-s); transition: background .1s; }
.c-fil-item-lien:hover { background: var(--c-surface-2); }

/* --------------------------------------------------------------------------
   20. Assistant (3.0)
   -------------------------------------------------------------------------- */

.c-chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 210px);
  min-height: 380px;
}

.c-chat-fil {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.c-bulle { display: flex; gap: 11px; max-width: 100%; }
.c-bulle-corps {
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.c-bulle-moi { flex-direction: row-reverse; }
.c-bulle-moi .c-bulle-corps { background: var(--c-primaire); color: #fff; border-bottom-right-radius: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-bulle-moi .c-bulle-corps { color: #0e1116; }
}
:root[data-theme="dark"] .c-bulle-moi .c-bulle-corps { color: #0e1116; }
.c-bulle-lui .c-bulle-corps {
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-bottom-left-radius: 4px;
}

.c-chat-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.c-chat-saisie {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--c-bordure);
  background: var(--c-surface-2);
}
.c-chat-saisie textarea {
  flex: 1;
  min-height: 42px;
  max-height: 160px;
  padding: 10px 12px;
  font: inherit;
  resize: none;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  outline: none;
}
.c-chat-saisie textarea:focus { border-color: var(--c-primaire); box-shadow: 0 0 0 3px var(--c-primaire-voile); }

.c-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.c-suggestion {
  padding: 7px 12px;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--c-texte-doux);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: 999px;
  cursor: pointer;
}
.c-suggestion:hover { border-color: var(--c-primaire); color: var(--c-primaire); }

.c-points span {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 3px;
  border-radius: 50%;
  background: var(--c-texte-faible);
  animation: c-pulse 1.1s infinite ease-in-out;
}
.c-points span:nth-child(2) { animation-delay: .15s; }
.c-points span:nth-child(3) { animation-delay: .3s; }
@keyframes c-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Un bouton occupé (13.10) : le curseur dit l'attente, l'opacité reste
   haute — un bouton à demi effacé se lit comme un bouton interdit. */
.c-bouton-occupe { cursor: progress; opacity: .85; }
.c-bouton-occupe .c-points { margin-right: 6px; }
.c-bouton-occupe .c-points span { background: currentColor; }

/* --------------------------------------------------------------------------
   21. Actions rapides sur une fiche (3.0)
   -------------------------------------------------------------------------- */

.c-actions-rapides { display: flex; flex-wrap: wrap; gap: 7px; }
.c-actions-rapides .c-bouton { flex: 0 0 auto; }

/* Un seul logo pour les deux thèmes (13.0). Le dégradé bleu-cyan ne contient
   ni noir ni blanc : il tient sur les deux fonds, là où la charte précédente
   demandait deux fichiers et six règles pour basculer de l'une à l'autre.
   Le thème sombre lui donne un demi-ton de plus, parce que l'extrémité bleu
   nuit du dégradé s'y enfonce un peu. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-marque-app,
  :root:not([data-theme="light"]) .c-acces-logo { filter: brightness(1.14) saturate(1.06); }
}
:root[data-theme="dark"] .c-marque-app,
:root[data-theme="dark"] .c-acces-logo { filter: brightness(1.14) saturate(1.06); }

/* --------------------------------------------------------------------------
   22. Editeur de texte enrichi (4.0)
   -------------------------------------------------------------------------- */

.c-editeur {
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.c-editeur:focus-within { border-color: var(--c-primaire); box-shadow: 0 0 0 3px var(--c-primaire-voile); }

.c-editeur-outils {
  display: flex;
  gap: 2px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--c-bordure);
  background: var(--c-surface-2);
}

.c-editeur-outils button {
  min-width: 28px;
  height: 26px;
  padding: 0 7px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--c-texte-doux);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.c-editeur-outils button:hover { background: var(--c-ardoise-voile); color: var(--c-texte); }

.c-editeur-zone {
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-texte);
  outline: none;
  overflow-y: auto;
  max-height: 420px;
}

/* Le texte d'invite n'existe pas sur un contenteditable : on le peint. */
.c-editeur-zone:empty::before {
  content: attr(data-placeholder);
  color: var(--c-texte-faible);
}

.c-editeur-zone p { margin: 0 0 10px; }
.c-editeur-zone p:last-child { margin-bottom: 0; }
.c-editeur-zone ul,
.c-editeur-zone ol { margin: 0 0 10px; padding-left: 22px; }
.c-editeur-zone h3 { font-size: 15px; margin: 0 0 8px; }
.c-editeur-zone a { color: var(--c-primaire); }

/* Rendu en lecture seule : meme grammaire, sans la barre d'outils. */
.c-lecture { font-size: 14px; line-height: 1.6; color: var(--c-texte); overflow-wrap: anywhere; }
.c-lecture p { margin: 0 0 10px; }
.c-lecture ul, .c-lecture ol { margin: 0 0 10px; padding-left: 22px; }
.c-lecture h3 { font-size: 15px; margin: 14px 0 8px; }
.c-lecture a { color: var(--c-primaire); }

/* --------------------------------------------------------------------------
   23. Rail sur petit ecran (4.0)
   -------------------------------------------------------------------------- */

.c-rail-tete { display: flex; align-items: flex-start; gap: 8px; }
.c-rail-tete .c-rail-marque { flex: 1; min-width: 0; }

.c-rail-fermer {
  display: none;
  padding: 6px;
  line-height: 0;
  color: var(--c-texte-doux);
  background: none;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 2px;
}
.c-rail-fermer:hover { background: var(--c-ardoise-voile); color: var(--c-texte); }

.c-rail-voile { display: none; }

.c-basculer span { display: none; }

body.c-fige { overflow: hidden; }

@media (max-width: 900px) {
  .c-rail-fermer { display: inline-flex; }

  /* Le rail prend presque tout l'ecran : a 246 px sur un telephone, la
     moitie des libelles se coupent. */
  .c-rail { width: min(86vw, 320px); padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }

  .c-rail-voile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(12, 16, 22, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s;
  }
  .c-coque.c-rail-ouvert .c-rail-voile { opacity: 1; pointer-events: auto; }

  /* Cibles tactiles : 44 px de haut, l'usage recommande. */
  .c-rail-lien { padding: 11px 12px; font-size: 14.5px; line-height: 20px; }
  .c-rail-groupe { margin-bottom: 14px; }
  /* La sortie est une icone : au doigt, il lui faut la meme surface qu'aux
     autres commandes du tiroir, sinon elle se rate une fois sur deux. */
  .c-rail-sortie { padding: 14px; }

  .c-basculer {
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texte-doux);
  }
  .c-basculer span { display: inline; }

  /* Un en-tete de page sur telephone : titre, puis actions sur leur ligne. */
  .c-entete { padding: 12px 14px; gap: 10px; }
  .c-entete h1 { font-size: 17px; }
  .c-entete-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .c-entete-actions > * { flex: 1 1 auto; }
  .c-corps { padding-left: 14px; padding-right: 14px; }

  .c-modale { max-height: 92vh; }
  .c-modale-pied { position: sticky; bottom: 0; }
}

/* --------------------------------------------------------------------------
   24. Selecteurs d'en-tete (4.0)

   Perimetre, pipeline, equipe : ce sont des filtres, ils prennent la meme
   forme que ceux de la barre — etiquette au-dessus, meme hauteur.
   -------------------------------------------------------------------------- */

.c-entete-actions .c-filtre label { color: var(--c-texte-faible); }

.c-entete-actions select:not(.c-filtre select) {
  height: 34px;
  padding: 0 26px 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}

/* Selecteur d'equipe : la personne choisie se voit avant d'ouvrir le menu. */
.c-equipe { display: flex; align-items: center; gap: 7px; }
.c-equipe .c-jeton { width: 24px; height: 24px; flex-basis: 24px; font-size: 10px; }

/* --------------------------------------------------------------------------
   25. Vignettes : pied a l'etroit (4.0)

   Trois boutons pleins texte plus un compteur debordaient de la carte des
   qu'un nom de modele passait sur deux lignes. Les gestes passent en icones,
   le compteur garde le texte.
   -------------------------------------------------------------------------- */

.c-vignette-pied {
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--c-bordure);
  margin-top: auto;
  padding-top: 10px;
}
.c-vignette-pied .c-faible { flex: 1 1 100%; margin-right: 0; }
.c-vignette-pied .c-gestes { display: flex; gap: 4px; margin-left: auto; }

.c-icone-bouton {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--c-texte-doux);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}
.c-icone-bouton:hover { color: var(--c-primaire); border-color: var(--c-primaire); background: var(--c-primaire-voile); }
.c-icone-bouton-primaire { color: #fff; background: var(--c-primaire); border-color: var(--c-primaire); }
.c-icone-bouton-primaire:hover { color: #fff; background: var(--c-primaire-fonce); border-color: var(--c-primaire-fonce); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-icone-bouton-primaire { color: #0e1116; }
  :root:not([data-theme="light"]) .c-icone-bouton-primaire:hover { color: #0e1116; }
}
:root[data-theme="dark"] .c-icone-bouton-primaire { color: #0e1116; }
:root[data-theme="dark"] .c-icone-bouton-primaire:hover { color: #0e1116; }

.c-vignette { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.c-vignette:hover { border-color: var(--c-bordure-forte); box-shadow: var(--c-ombre-forte); }

/* --------------------------------------------------------------------------
   26. Panneaux de fiche cliquables (4.0)
   -------------------------------------------------------------------------- */

.c-fil-item.c-cliquable { cursor: pointer; border-radius: var(--c-rayon-s); }
.c-fil-item.c-cliquable:hover { background: var(--c-surface-2); }

/* --------------------------------------------------------------------------
   29. Avatars de contact (6.0)

   Pas de photo : une silhouette dessinée, teintée par la civilité. Le jeton
   d'initiales reste le repli quand la civilité n'est pas renseignée — deviner
   le genre d'après un prénom n'est pas une option.
   -------------------------------------------------------------------------- */

.c-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
.c-avatar svg { color: var(--c-surface); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-avatar svg { color: #10141a; }
}
:root[data-theme="dark"] .c-avatar svg { color: #10141a; }

.c-jeton-image { object-fit: cover; padding: 0; }

/* --------------------------------------------------------------------------
   27. Liste déroulante cherchable (5.0)

   Un champ de saisie et un panneau : pas de `<select>`, donc rien de ce que
   le navigateur dessine seul. La liste est en `position:absolute` au-dessus
   du reste du formulaire — d'où le `z-index`, et le `position:relative` du
   conteneur sans lequel elle se placerait par rapport à la page.
   -------------------------------------------------------------------------- */

.c-choix { position: relative; }

.c-choix-saisie {
  width: 100%;
  padding: 9px 30px 9px 11px;
  font: inherit;
  font-size: 13.5px;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
}
.c-choix-saisie:focus {
  outline: none;
  border-color: var(--c-primaire);
  box-shadow: 0 0 0 3px var(--c-primaire-voile);
}

.c-choix-effacer {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.c-choix-effacer:hover { color: var(--c-texte); background: var(--c-surface-2); }

.c-choix-liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
  box-shadow: var(--c-ombre-forte);
}

.c-choix-option {
  display: block;
  width: 100%;
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-bordure);
  cursor: pointer;
}
.c-choix-option:last-child { border-bottom: 0; }
.c-choix-option:hover,
.c-choix-option.c-survole { background: var(--c-primaire-voile); }
.c-choix-option span { display: block; color: var(--c-texte); }
.c-choix-option .c-faible { font-size: 11.5px; }

.c-choix-rien { margin: 0; padding: 12px; font-size: 12.5px; color: var(--c-texte-faible); }

/* --------------------------------------------------------------------------
   28. Pièces jointes, source HTML, dossiers de messagerie (5.0)
   -------------------------------------------------------------------------- */

.c-jointes { display: flex; flex-wrap: wrap; gap: 6px; }

.c-jointe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 8px;
  font-size: 12.5px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: 999px;
}
.c-jointe a { overflow: hidden; color: var(--c-texte); text-overflow: ellipsis; white-space: nowrap; }
.c-jointe button {
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.c-jointe button:hover { color: var(--c-rouge); background: var(--c-surface); }

/* La zone de code du mode source. Elle prend exactement la place de la zone
   visuelle : basculer ne doit pas faire sauter le formulaire. */
.c-editeur-source {
  display: block;
  width: 100%;
  min-height: 180px;
  padding: 11px;
  font-family: var(--c-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-texte);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure-forte);
  border-top: 0;
  border-radius: 0 0 var(--c-rayon-s) var(--c-rayon-s);
  resize: vertical;
}
.c-editeur-source-bascule[aria-pressed="true"] {
  color: var(--c-primaire);
  background: var(--c-primaire-voile);
}

.c-icone-bouton-danger:hover {
  color: var(--c-rouge);
  border-color: var(--c-rouge);
  background: transparent;
}

/* Les dossiers de la messagerie coiffent la liste : sur un écran étroit ils
   défilent latéralement plutôt que de passer à la ligne, sans quoi trois
   rangées d'onglets repoussent les messages hors de vue. */
.c-dossiers { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.c-dossiers .c-onglet { white-space: nowrap; }

/* --------------------------------------------------------------------------
   30. Page de profil (6.0)
   -------------------------------------------------------------------------- */

.c-profil { display: grid; gap: 16px; }

.c-carte-titre {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 650;
  letter-spacing: -.01em;
}

.c-profil-identite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.c-portrait {
  position: relative;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--c-primaire-voile);
  border: 1px solid var(--c-bordure);
}
.c-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.c-portrait-initiales {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--c-primaire);
}

.c-profil-nom h2 { margin: 0 0 3px; font-size: 20px; letter-spacing: -.015em; }
.c-profil-nom p { margin: 0; font-size: 13.5px; }

.c-profil-gestes { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }

@media (max-width: 620px) {
  .c-profil-identite { grid-template-columns: auto minmax(0, 1fr); }
  .c-profil-gestes { grid-column: 1 / -1; flex-direction: row; }
}

/* --------------------------------------------------------------------------
   31. Vues alternées d'une fiche de lecture, et sources (6.0)
   -------------------------------------------------------------------------- */

.c-onglets-vues { margin: 4px 0 14px; }

/* La source d'un modèle est du code : elle se lit en chasse fixe, et elle
   défile dans son propre cadre plutôt que d'élargir la fiche. */
.c-source-html,
.c-brut {
  margin: 0;
  padding: 12px;
  max-height: 420px;
  overflow: auto;
  font-family: var(--c-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--c-texte-doux);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-brut { color: var(--c-texte); font-family: var(--c-police); font-size: 13.5px; }

/* Une vignette annoncée comme un bouton se signale au survol et au clavier :
   sans cela, rien ne dit qu'elle s'ouvre. */
.c-vignette.c-cliquable { cursor: pointer; }
.c-vignette.c-cliquable:focus-visible {
  outline: 2px solid var(--c-primaire);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   32. Doublons (7.0)

   Les fiches candidates se lisent en liste, pas en tableau : on en montre
   deux ou trois, et chacune tient sur une ligne — nom, contexte, motif.
   -------------------------------------------------------------------------- */

.c-doublons {
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  overflow: hidden;
}

.c-doublon {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-bordure);
}
.c-doublon:last-child { border-bottom: 0; }
.c-doublon:nth-child(even) { background: var(--c-surface-2); }
.c-doublon a { font-weight: 600; }
.c-doublon .c-faible { font-size: 12.5px; }

.c-choix-note { margin-top: 5px; }

/* --------------------------------------------------------------------------
   33. Fil d'un échange (7.0)

   Sortant à gauche, entrant décalé et teinté : c'est la convention de toutes
   les messageries, et elle se lit sans légende.
   -------------------------------------------------------------------------- */

.c-fil-messages { margin-top: 4px; }

.c-fil-message {
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface-2);
}
.c-fil-message-entrant {
  margin-left: 28px;
  border-left: 3px solid var(--c-primaire);
  background: var(--c-primaire-voile);
}
.c-fil-message .c-lecture > :first-child { margin-top: 0; }
.c-fil-message .c-lecture > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   34. Lecture enrichie (8.0)

   Un argumentaire n'est pas un paragraphe : c'est une trame, avec des blocs,
   des questions à poser telles quelles, et un récapitulatif en tableau. Tant
   que le convertisseur ignorait les tableaux et les citations, ces trames se
   lisaient comme une bouillie de barres verticales. Le rendu leur donne
   maintenant la forme qu'elles ont dans le texte source.
   -------------------------------------------------------------------------- */

.c-lecture { font-size: 14.5px; line-height: 1.62; }
.c-lecture > :first-child { margin-top: 0; }
.c-lecture > :last-child { margin-bottom: 0; }

.c-lecture h2 {
  margin: 26px 0 10px;
  padding-bottom: 7px;
  font-size: 17px;
  font-weight: 680;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--c-bordure);
}
.c-lecture h3 { margin: 22px 0 8px; font-size: 15.5px; font-weight: 660; }
.c-lecture h4, .c-lecture h5, .c-lecture h6 {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-texte-doux);
}

.c-lecture ul, .c-lecture ol { margin: 0 0 12px; padding-left: 20px; }
.c-lecture li { margin-bottom: 5px; }
.c-lecture li::marker { color: var(--c-texte-faible); }

.c-lecture hr {
  height: 0;
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--c-bordure);
}

/* Une citation, dans une trame de découverte, c'est la phrase à dire mot pour
   mot. Elle mérite d'être reconnaissable d'un coup d'oeil au milieu d'une page
   de questions. */
.c-lecture blockquote {
  margin: 0 0 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--c-primaire);
  border-radius: 0 var(--c-rayon-s) var(--c-rayon-s) 0;
  background: var(--c-primaire-voile);
  color: var(--c-texte);
}
.c-lecture blockquote > :last-child { margin-bottom: 0; }
.c-lecture blockquote > :first-child { margin-top: 0; }

.c-lecture .c-tableau-cadre { margin: 0 0 14px; border: 1px solid var(--c-bordure); border-radius: var(--c-rayon-s); }
.c-lecture table.c-tableau-md { font-size: 13.5px; }
.c-lecture table.c-tableau-md th { position: static; white-space: normal; padding: 9px 13px; }
.c-lecture table.c-tableau-md td { padding: 9px 13px; vertical-align: top; }

.c-lecture code {
  padding: 1px 5px;
  font-family: var(--c-mono);
  font-size: 12.5px;
  background: var(--c-ardoise-voile);
  border-radius: 4px;
}
.c-lecture .c-bloc-code {
  margin: 0 0 14px;
  padding: 12px;
  overflow-x: auto;
  font-family: var(--c-mono);
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-lecture .c-bloc-code code { padding: 0; background: none; }

/* --------------------------------------------------------------------------
   35. Rail : écrans courts (13.13)

   Il y avait ici trois paliers de media queries — 820 px, 750 px, 690 px de
   hauteur — qui resserraient le rail par sauts pour retarder l'ascenseur.
   Ils sont partis : chaque hauteur du rail est maintenant une fraction de
   `--c-jeu` (voir `.c-rail`), et la réduction se fait en continu. Deux
   défauts disparaissent avec eux — le recalibrage à la main de trois seuils
   à chaque entrée de menu ajoutée, et le saut visible quand la fenêtre
   franchissait l'un d'eux.

   Sur petit écran le rail est un tiroir : il a toute la hauteur pour lui et
   ses cibles tactiles ne doivent pas maigrir. Le jeu y est donc posé au
   maximum, ce qui neutralise la formule.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .c-rail { --c-jeu: 260px; }
}

/* --------------------------------------------------------------------------
   36. Composeur : aperçu rendu, assistant de rédaction (8.0)
   -------------------------------------------------------------------------- */

/* L'aperçu montre ce que le destinataire verra. Un modèle HTML affiché en
   texte brut, balises comprises, ne disait rien de ce qui allait partir. */
.c-apercu-rendu {
  white-space: normal;
  padding: 0;
  background: var(--c-surface);
  max-height: 460px;
}
.c-apercu-cadre {
  width: 100%;
  min-height: 220px;
  border: 0;
  display: block;
  background: #fff;
}
.c-apercu-rendu .c-lecture { padding: 14px; }
.c-apercu-note {
  margin: 0;
  padding: 7px 10px;
  font-size: 11.5px;
  color: var(--c-texte-faible);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-bordure);
}

.c-ia {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface-2);
}
.c-ia textarea {
  width: 100%;
  min-height: 62px;
  margin-bottom: 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-texte);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  padding: 8px 10px;
  resize: vertical;
}
.c-ia textarea:focus { outline: none; border-color: var(--c-primaire); box-shadow: 0 0 0 3px var(--c-primaire-voile); }
.c-ia-exemples { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.c-ia-exemples button {
  padding: 3px 9px;
  font: inherit;
  font-size: 11.5px;
  color: var(--c-texte-doux);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: 999px;
  cursor: pointer;
  text-align: left;
}
.c-ia-exemples button:hover { border-color: var(--c-primaire); color: var(--c-primaire); }
.c-ia-etat { margin: 8px 0 0; font-size: 12px; color: var(--c-texte-faible); }

/* --------------------------------------------------------------------------
   37. Assistant : conversations passées (8.0)
   -------------------------------------------------------------------------- */

.c-chat-coque { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.c-chat-coque > .c-chat { border-left: 1px solid var(--c-bordure); }

.c-conversations {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 210px);
  min-height: 380px;
  padding: 12px 10px;
}
.c-conversations-tete {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.c-conversations-tete .c-rail-titre { padding: 0; margin: 0; flex: 1; }
.c-conversations-liste {
  flex: 1 1 auto;
  /* Sans `min-height: 0`, un enfant de flex refuse de rétrécir sous sa
     hauteur de contenu, et c'est le panneau entier qui déborde. */
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  margin: 0 -4px;
  padding: 0 4px;
}
.c-conversation {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px 26px 8px 10px;
  margin-bottom: 2px;
  text-align: left;
  font: inherit;
  color: var(--c-texte-doux);
  background: none;
  border: 0;
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}
.c-conversation:hover { background: var(--c-ardoise-voile); color: var(--c-texte); }
.c-conversation[aria-current="true"] { background: var(--c-primaire-voile); color: var(--c-primaire); }
.c-conversation-titre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-conversation-date { display: block; font-size: 11.5px; color: var(--c-texte-faible); }
.c-conversation-oublier {
  position: absolute;
  top: 7px;
  right: 5px;
  padding: 2px 5px;
  line-height: 1;
  font-size: 12px;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}
.c-conversation:hover .c-conversation-oublier,
.c-conversation-oublier:focus-visible { opacity: 1; }
.c-conversation-oublier:hover { color: var(--c-rouge); background: var(--c-rouge-voile); }
.c-conversations-vide { margin: 0; padding: 0 10px; font-size: 12.5px; color: var(--c-texte-faible); }

@media (max-width: 900px) {
  .c-chat-coque { grid-template-columns: minmax(0, 1fr); }
  .c-chat-coque > .c-chat { border-left: 0; }
  .c-conversations { height: auto; min-height: 0; border-bottom: 1px solid var(--c-bordure); }
  .c-conversations-liste { max-height: 168px; }
}

/* --------------------------------------------------------------------------
   38. Vignettes en deux colonnes (8.0)

   Les modèles ne montrent plus le début du corps : un extrait de HTML n'était
   pas lisible, et un extrait de Markdown se lisait comme une coquille. Ce qui
   reste — nom, canal, cas d'usage, objet — tient plus large qu'il n'est haut.
   -------------------------------------------------------------------------- */

.c-vignettes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .c-vignettes-2 { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   39. Événements (8.0)
   -------------------------------------------------------------------------- */

.c-evenement-date {
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 7px 4px;
  border-radius: var(--c-rayon-s);
  background: var(--c-primaire-voile);
  color: var(--c-primaire);
  line-height: 1.1;
}
.c-evenement-jour { font-size: 19px; font-weight: 720; font-variant-numeric: tabular-nums; }
.c-evenement-mois { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.c-evenement-passe { background: var(--c-ardoise-voile); color: var(--c-texte-faible); }

.c-vignette-tete-date { display: flex; align-items: flex-start; gap: 11px; }
.c-vignette-tete-date > div { min-width: 0; flex: 1; }

.c-participants { display: flex; flex-wrap: wrap; gap: 6px; }
.c-participant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--c-bordure);
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--c-surface);
}
.c-participant a { color: inherit; }
.c-participant button {
  padding: 0 2px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  cursor: pointer;
}
.c-participant button:hover { color: var(--c-rouge); }

/* --------------------------------------------------------------------------
   40. Colonnes de liste à largeur imposée (8.0)

   Le sujet d'un message est l'information de la ligne : sans largeur imposée,
   le tableau la comprime au profit de six colonnes de pastilles.
   -------------------------------------------------------------------------- */

table.c-tableau td.c-cellule-large { max-width: 0; }
table.c-tableau td.c-cellule-large .c-tronque { max-width: 100%; }

/* --------------------------------------------------------------------------
   41. Indicateurs cliquables (8.0)

   Un chiffre qui n'ouvre pas la liste qu'il résume oblige à refaire le filtre
   à la main. Tout ce qui porte un lien le dit — au survol et au clavier.
   -------------------------------------------------------------------------- */

a.c-kpi {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
a.c-kpi:hover {
  border-color: var(--c-primaire);
  box-shadow: var(--c-ombre-forte);
  text-decoration: none;
}
a.c-kpi:focus-visible { outline: 2px solid var(--c-primaire); outline-offset: 2px; }
a.c-kpi .c-kpi-valeur { color: var(--c-texte); }

.c-releve {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface-2);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   42. Listes cherchables dessinées en fiches (8.0)

   Trois cents sociétés dans un `<select>` natif : pas de filtre, et deux
   homonymes indiscernables. La liste cherchable existait déjà pour le
   composeur ; elle sert désormais partout, et chaque option porte de quoi
   trancher — la ville, le secteur, les affaires en cours.
   -------------------------------------------------------------------------- */

.c-choix-option.c-choix-carte { display: flex; align-items: center; gap: 10px; }
.c-choix-carte .c-jeton { width: 26px; height: 26px; flex: 0 0 26px; font-size: 10.5px; }
.c-choix-corps { display: block; min-width: 0; flex: 1; }
.c-choix-nom {
  display: block;
  font-weight: 600;
  color: var(--c-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-choix-carte .c-faible {
  display: block;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dans une modale, la liste déroulante doit passer au-dessus des blocs
   suivants — et le corps de la modale ne doit pas la rogner. */
.c-modale-corps .c-choix-liste { z-index: 40; }

/* --------------------------------------------------------------------------
   43. Sommaire d'un argumentaire (8.0)

   Une trame de découverte fait huit blocs. Pendant un appel, retrouver
   « Bloc 4 — Coût et mesure » en faisant défiler à l'aveugle est le genre de
   détail qui fait refermer le script et improviser.
   -------------------------------------------------------------------------- */

.c-sommaire {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-sommaire-titre {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}
.c-sommaire ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 24px;
}
.c-sommaire li { margin-bottom: 4px; font-size: 13px; break-inside: avoid; }
.c-sommaire li a { color: var(--c-texte-doux); text-decoration: none; }
.c-sommaire li a:hover { color: var(--c-primaire); text-decoration: underline; }
.c-sommaire-h3 { padding-left: 14px; font-size: 12.5px; }

@media (max-width: 700px) { .c-sommaire ol { columns: 1; } }

/* Le titre visé se pose sous le haut du cadre défilant, pas collé dessus. */
.c-modale-corps .c-lecture h2,
.c-modale-corps .c-lecture h3 { scroll-margin-top: 12px; }

/* Mention qui remplace la bascule source quand il n'y a rien à basculer :
   un éditeur de texte brut ou de HTML n'a qu'une vue. */
.c-editeur-mention {
  margin-left: auto;
  padding-right: 4px;
  font-size: 11.5px;
  color: var(--c-texte-faible);
}

/* --------------------------------------------------------------------------
   44. Bascule de thème (9.0)

   Dans la tête du rail, à côté de la marque : elle ne coûte aucune hauteur à
   la liste des pages, qui ne doit pas défiler. Le réglage explicite des trois
   états vit sur la page profil — c'est là qu'on va chercher un réglage.
   -------------------------------------------------------------------------- */

.c-rail-theme {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 6px;
  line-height: 0;
  color: var(--c-texte-doux);
  background: none;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}
.c-rail-theme:hover { background: var(--c-ardoise-voile); color: var(--c-texte); }
.c-rail-theme:focus-visible { outline: 2px solid var(--c-primaire); outline-offset: 1px; }

/* Choix explicite, en trois positions. Deux positions obligeraient à trancher
   une fois pour toutes, et le mauvais choix se paie tous les jours. */
.c-segments {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-segments button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-texte-doux);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.c-segments button:hover { color: var(--c-texte); }
.c-segments button[aria-pressed="true"] {
  color: var(--c-primaire);
  background: var(--c-surface);
  box-shadow: var(--c-ombre);
}
.c-segments button svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   45. Calendrier (9.0)

   Une grille de mois, et rien d'autre : sept colonnes, six lignes au plus.
   Les jours hors du mois affiché restent visibles mais éteints — les couper
   ferait sauter la grille d'une semaine à l'autre.
   -------------------------------------------------------------------------- */

.c-cal-tete {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.c-cal-jour-nom {
  padding: 4px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}

.c-cal-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.c-cal-case {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 116px;
  padding: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-cal-case-hors { background: var(--c-surface-2); }
.c-cal-case-hors .c-cal-numero { color: var(--c-texte-faible); }
.c-cal-case-weekend { background: var(--c-surface-2); }
.c-cal-case-aujourdhui { border-color: var(--c-primaire); box-shadow: inset 0 0 0 1px var(--c-primaire); }

.c-cal-numero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--c-texte-doux);
}
.c-cal-case-aujourdhui .c-cal-numero { color: var(--c-primaire); }
.c-cal-reste { font-size: 10.5px; font-weight: 600; color: var(--c-texte-faible); }

/* Une pastille par élément : la couleur dit la nature, le trait de gauche dit
   l'activité. Sans le trait, deux actions de deux domaines se ressemblent. */
.c-cal-item {
  display: block;
  width: 100%;
  padding: 3px 6px;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.3;
  text-align: left;
  color: var(--c-texte);
  background: var(--c-ardoise-voile);
  border: 0;
  border-left: 3px solid var(--c-texte-faible);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-cal-item:hover { background: var(--c-bordure); text-decoration: none; }
.c-cal-item-heure { font-variant-numeric: tabular-nums; color: var(--c-texte-faible); margin-right: 4px; }
.c-cal-item-fait { opacity: .5; }
.c-cal-item-fait .c-cal-item-titre { text-decoration: line-through; }
.c-cal-item-retard { background: var(--c-rouge-voile); }

.c-cal-action { border-left-color: var(--c-primaire); }
.c-cal-message { border-left-color: var(--c-violet); }
.c-cal-evenement { border-left-color: var(--c-vert); }
.c-cal-closing { border-left-color: var(--c-ambre); }

/* Un événement de plusieurs jours occupe une case par jour : les barres
   continues d'un vrai calendrier demandent un moteur de disposition, et on
   perdrait en lisibilité ce qu'on gagnerait en élégance. Le liseré plein
   suffit à dire « ça dure ». */
.c-cal-continue { border-left-style: double; border-left-width: 4px; }

.c-legende-cal { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.c-legende-cal span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-texte-doux); }
.c-legende-cal i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.c-cal-navigation { display: flex; align-items: center; gap: 6px; }
.c-cal-mois {
  min-width: 168px;
  font-size: 15px;
  font-weight: 650;
  text-transform: capitalize;
}

/* Sous 900 px, la grille de mois devient illisible : sept colonnes de 40 px
   ne portent pas un intitulé. On passe à la liste, qui dit la même chose. */
@media (max-width: 900px) {
  .c-cal-grille, .c-cal-tete { display: none; }
}

/* --------------------------------------------------------------------------
   46. Agenda (liste chronologique) (9.0)
   -------------------------------------------------------------------------- */

.c-agenda-jour { margin-bottom: 18px; }
.c-agenda-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-bordure);
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
}
.c-agenda-date .c-faible { font-weight: 500; text-transform: none; }
.c-agenda-aujourdhui .c-agenda-date { color: var(--c-primaire); border-bottom-color: var(--c-primaire); }

.c-agenda-ligne {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 2px;
  font: inherit;
  text-align: left;
  color: var(--c-texte);
  background: none;
  border: 0;
  border-radius: var(--c-rayon-s);
  cursor: pointer;
}
.c-agenda-ligne:hover { background: var(--c-surface-2); text-decoration: none; }
.c-agenda-heure { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--c-texte-faible); }
.c-agenda-titre { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-agenda-sous { font-size: 12.5px; color: var(--c-texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-agenda-marque { width: 3px; align-self: stretch; border-radius: 2px; }

@media (max-width: 640px) {
  .c-agenda-ligne { grid-template-columns: 54px 1fr; }
  .c-agenda-ligne > :last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   47. Événement : les faits pratiques sur la carte (9.0)

   Site, organisateur, budget et surtout date limite d'inscription. C'est la
   seule échéance de la page qui coûte de l'argent quand on la manque : elle
   ne doit pas être réservée à la fiche qu'on ouvre une fois sur dix.
   -------------------------------------------------------------------------- */

.c-faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px 14px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-fait dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}
.c-fait dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-fait-alerte dd { color: var(--c-rouge); }
.c-fait-proche dd { color: var(--c-ambre); }
.c-fait-vide dd { font-weight: 500; color: var(--c-texte-faible); }

/* --------------------------------------------------------------------------
   48. Graphiques (10.0)

   Tout est peint avec des variables CSS : un graphique dont les couleurs
   sont écrites en dur dans le SVG disparaît en thème sombre, et on ne s'en
   aperçoit qu'en basculant — c'est-à-dire jamais, pendant qu'on le construit.
   -------------------------------------------------------------------------- */

.c-graphe {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  overflow: visible;
}
.c-graphe-vide {
  margin: 0;
  padding: 22px 0;
  text-align: center;
  font-size: 13px;
  color: var(--c-texte-faible);
}

.c-gr-ligne { stroke: var(--c-bordure); stroke-width: 1; }
.c-gr-axe {
  font-size: 10px;
  font-weight: 600;
  fill: var(--c-texte-faible);
}
.c-gr-zone { fill: transparent; }
.c-gr-groupe:hover .c-gr-zone { fill: var(--c-ardoise-voile); }
.c-gr-barre { transition: opacity .12s ease; }
.c-gr-groupe:hover .c-gr-barre { opacity: .82; }

/* L'objectif est un **niveau**, pas une barre voisine. Posé en trait
   au-dessus du groupe, l'œil lit un dépassement ; côte à côte, il compare
   deux hauteurs et doit se souvenir laquelle est laquelle. */
.c-gr-repere {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 5 3;
}

.c-gr-cliquable { cursor: pointer; }
.c-gr-cliquable:focus-visible .c-gr-zone { fill: var(--c-primaire-voile); }

.c-gr-trace { fill: none; stroke: var(--c-primaire); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-gr-aire { fill: var(--c-primaire-voile); stroke: none; }
.c-gr-point circle { fill: var(--c-primaire); }
/* Une cible large et invisible : viser un point de 3,5 px à la souris est un
   exercice, au doigt une impossibilité. */
.c-gr-point .c-gr-cible { fill: transparent; }
.c-gr-point:hover circle:first-child { r: 5; }

.c-gr-legende, .c-legende-graphe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--c-texte-doux);
}
.c-gr-legende li { display: inline-flex; align-items: center; gap: 6px; }
.c-gr-legende i { width: 10px; height: 10px; border-radius: 3px; }
.c-gr-legende i.c-gr-legende-trait { height: 3px; border-radius: 2px; }

/* ---- Jauge d'atteinte ---- */

.c-jauge-libelle {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}
.c-jauge { min-width: 0; }
.c-jauge-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.c-jauge-chiffre { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; }
.c-jauge-part { font-size: 13px; font-weight: 650; color: var(--c-texte-doux); font-variant-numeric: tabular-nums; }

.c-jauge-piste {
  position: relative;
  height: 10px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: 999px;
  overflow: hidden;
}
.c-jauge-remplissage {
  display: block;
  height: 100%;
  background: var(--c-primaire);
  border-radius: 999px;
  transition: width .25s ease;
}

/* Le repère du temps écoulé. Sans lui, 40 % le 5 du mois et 40 % le 28 se
   dessinent à l'identique — et ce sont deux nouvelles opposées. */
.c-jauge-temps {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--c-texte);
  opacity: .45;
}
.c-jauge-note { margin: 6px 0 0; font-size: 12.5px; color: var(--c-texte-doux); }
.c-jauge-atteint .c-jauge-remplissage { background: var(--c-vert); }
.c-jauge-atteint .c-jauge-chiffre { color: var(--c-vert); }
.c-jauge-retard .c-jauge-remplissage { background: var(--c-ambre); }
.c-jauge-sans .c-jauge-chiffre { display: block; }

/* ---- Anneau de répartition ---- */

.c-anneau-bloc { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.c-anneau { flex: 0 0 140px; width: 140px; height: 140px; transform: rotate(-90deg); }
.c-anneau-fond { fill: none; stroke: var(--c-surface-2); stroke-width: 16; }
.c-anneau-part { fill: none; stroke-width: 16; }
.c-anneau-total {
  font-size: 15px;
  font-weight: 700;
  fill: var(--c-texte);
  /* Le SVG entier est tourné d'un quart de tour pour que le premier segment
     parte du haut : sans contre-rotation, le total serait écrit sur la
     tranche. */
  transform: rotate(90deg);
  transform-origin: 70px 70px;
}
.c-anneau-legende {
  flex: 1 1 180px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}
.c-anneau-legende li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
}
.c-anneau-legende i { width: 10px; height: 10px; border-radius: 3px; }
.c-anneau-legende b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   49. Rail d'étapes d'une affaire (10.0)

   Remplace la liste déroulante qui disait où l'on en était sans le montrer.
   Le pipeline en entier, l'étape courante marquée, un bouton unique sur
   celle qui suit — le geste de loin le plus fréquent.
   -------------------------------------------------------------------------- */

.c-etapes-carte { margin-bottom: 14px; }

.c-jalons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: jalon;
}
.c-jalon { flex: 1 1 120px; min-width: 0; }
.c-jalon button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px 9px;
  font: inherit;
  text-align: left;
  color: var(--c-texte-doux);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.c-jalon button:hover:not(:disabled) { background: var(--c-bordure); }
.c-jalon button:disabled { cursor: default; }

.c-jalon-point {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--c-bordure-forte);
  box-shadow: inset 0 0 0 1px var(--c-bordure);
}
.c-jalon-nom {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-jalon-proba { font-size: 11px; color: var(--c-texte-faible); font-variant-numeric: tabular-nums; }

.c-jalon-passe button { color: var(--c-texte-doux); }
.c-jalon-passe .c-jalon-point { background: var(--c-primaire); opacity: .45; }

.c-jalon-courant button {
  color: var(--c-texte);
  background: var(--c-primaire-voile);
  border-color: var(--c-primaire);
}
.c-jalon-courant .c-jalon-point { background: var(--c-primaire); box-shadow: 0 0 0 3px var(--c-primaire-voile); }

.c-etapes-suite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.c-etapes-manque {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--c-ambre);
}
.c-etapes-manque svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   50. Pied de fiche : archiver, en discret (10.0)

   Le bouton était en haut, en rouge, entre « Planifier » et « Écrire » —
   deux gestes quotidiens. Archiver arrive une fois dans la vie d'une fiche.
   -------------------------------------------------------------------------- */

.c-pied-fiche {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--c-bordure);
}
.c-pied-texte {
  flex: 1 1 260px;
  margin: 0;
  font-size: 12.5px;
  color: var(--c-texte-faible);
}

@media (max-width: 700px) {
  /* Sur un téléphone, le bouton passe sous le texte et prend toute la
     largeur : à mi-largeur il se retrouverait à portée du pouce, contre le
     bord, là où on ne veut pas d'un geste irréversible. */
  .c-pied-fiche { flex-direction: column; align-items: stretch; }
  /* `flex: 1 1 260px` décrit une **largeur** de base tant que l'axe principal
     est horizontal. En colonne, ces 260 px deviennent une hauteur, et le
     texte creuse un trou de la taille d'un écran entre lui et le bouton. */
  .c-pied-fiche .c-pied-texte { flex: 0 0 auto; }
  .c-pied-fiche button { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   51. Logo du portail (10.0)
   -------------------------------------------------------------------------- */

/* Le logo personnel remplace celui du portail : les laisser tous les deux
   donnerait deux marques côte à côte. */
.c-marque-perso .c-marque-picto,
.c-marque-perso .c-marque-texte,
.c-marque-perso .c-marque-app,
.c-marque-perso .c-marque-sous,
.c-marque-perso .c-marque-complet { display: none !important; }
.c-marque-logo { max-height: 32px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

.c-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.c-logo-case { min-width: 0; }
.c-logo-titre {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}

/* L'aperçu est posé sur le fond du thème auquel il est destiné, quel que
   soit le thème courant : c'est la seule façon de voir tout de suite qu'un
   logo noir sera invisible en sombre. Les couleurs sont donc écrites en dur
   ici — c'est l'exception assumée à la règle des variables. */
.c-logo-apercu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  overflow: hidden;
}
.c-logo-clair { background: #ffffff; }
.c-logo-sombre { background: #0e1116; }
.c-logo-apercu img { max-height: 48px; max-width: 100%; width: auto; object-fit: contain; }
.c-logo-clair .c-logo-vide { color: #98a2b3; }
.c-logo-sombre .c-logo-vide { color: #667085; }
.c-logo-vide { font-size: 12px; }
.c-logo-outils { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   52. Compléments de mise en forme (10.0)
   -------------------------------------------------------------------------- */

.c-separateur { margin: 18px 0; border: 0; border-top: 1px solid var(--c-bordure); }
.c-sous-titre { margin: 0 0 6px; font-size: 14px; font-weight: 700; }

/* Un lien LinkedIn réduit à son icône, dans une cellule de liste. */
.c-lien-li {
  display: inline-flex;
  vertical-align: -2px;
  margin-left: 5px;
  color: var(--c-texte-faible);
}
.c-lien-li:hover { color: #0a66c2; }

/* Un tableau dense, pour les cartes de statistiques : la hauteur de ligne
   des listes principales ferait tenir cinq lignes par écran. */
.c-tableau-compact th, .c-tableau-compact td { padding: 6px 10px; font-size: 12.5px; }
.c-tableau-compact th { font-size: 11px; }
.c-cellule-outils { white-space: nowrap; }

/* La ligne de contrat (13.10) : deux étages serrés, et une jauge de six
   pixels pour la part encaissée. Le nom du client tient la première ligne,
   l'intitulé et les pastilles la seconde ; l'ensemble reste sur deux
   hauteurs de texte, là où trois paragraphes en prenaient quatre. */
.c-contrat-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-contrat-sous {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--c-texte-doux);
}
.c-contrat-sous .c-tronque { max-width: 240px; }
.c-contrat-chiffre { display: block; margin-top: 3px; font-size: 11.5px; }

.c-jauge-mince {
  display: block;
  height: 5px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--c-ardoise-voile);
  overflow: hidden;
}
.c-jauge-mince-part { display: block; height: 100%; border-radius: 999px; background: var(--c-ambre); }
.c-jauge-mince-pleine { background: var(--c-vert); }
.c-cellule-outils .c-bouton, .c-cellule-outils .c-icone-bouton { margin-left: 4px; }

/* `.c-barre-compte` est en `white-space: nowrap` : juste pour « 25 sur
   1 076 », qu'on ne veut pas voir coupé au milieu du nombre. Une phrase
   entière y déborde la fenêtre et fait défiler toute la page en travers.
   Ce modificateur la laisse passer à la ligne. */
.c-barre-compte-long {
  white-space: normal;
  max-width: 100%;
  line-height: 1.5;
}

.c-ecart-positif { color: var(--c-vert); font-weight: 650; }
.c-ecart-negatif { color: var(--c-rouge); font-weight: 650; }

/* --------------------------------------------------------------------------
   53. Calendrier sur petit écran (10.0)

   La grille était purement et simplement masquée sous 900 px, avec bascule
   forcée sur l'agenda : le « calendrier » ne s'affichait donc pas sur un
   téléphone, alors que c'est là qu'on regarde son mois.

   Elle revient, en points plutôt qu'en intitulés — c'est la forme qu'ont
   tous les calendriers de téléphone, et pour la même raison : sept colonnes
   de 45 px ne portent pas un texte, mais elles portent très bien « il se
   passe trois choses ce jour-là ». La case entière devient tapable et ouvre
   l'agenda du jour, où les intitulés ont la place de s'écrire.
   -------------------------------------------------------------------------- */

.c-cal-case { position: relative; }

/* Le calque tapable ne sert qu'aux petits écrans. Posé au-dessus des
   pastilles, il leur volerait le clic sur un poste de travail. */
.c-cal-case-ouvrir { display: none; }

@media (max-width: 900px) {
  .c-cal-grille, .c-cal-tete { display: grid; }
  .c-cal-grille, .c-cal-tete { gap: 3px; }

  .c-cal-jour-nom { padding: 2px; font-size: 9.5px; text-align: center; }

  .c-cal-case {
    min-height: 46px;
    padding: 3px 2px;
    gap: 2px;
    align-items: center;
  }
  .c-cal-numero { justify-content: center; font-size: 11.5px; }
  /* Le compteur du coin ferait deux nombres dans une case de 45 px : le
     nombre de points le dit déjà. */
  .c-cal-numero .c-cal-reste { display: none; }

  /* Chaque élément devient un point de la couleur de sa nature. Le titre
     n'est pas caché par `display:none` : il reste dans l'arbre
     d'accessibilité, où un lecteur d'écran continue de l'annoncer. */
  .c-cal-item {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c-texte-faible);
    overflow: hidden;
    text-indent: -999em;
    pointer-events: none;
    flex: 0 0 auto;
  }
  .c-cal-case { flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; }
  .c-cal-numero { flex: 0 0 100%; }
  .c-cal-item-fait { opacity: .35; }
  .c-cal-reste-bouton { display: none; }

  .c-cal-action { background: var(--c-primaire); }
  .c-cal-message { background: var(--c-violet); }
  .c-cal-evenement { background: var(--c-vert); }
  .c-cal-closing { background: var(--c-ambre); }
  .c-cal-item-retard { box-shadow: 0 0 0 2px var(--c-rouge-voile); }

  .c-cal-case-ouvrir {
    display: block;
    position: absolute;
    inset: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--c-rayon-s);
    cursor: pointer;
  }
  .c-cal-case-ouvrir:focus-visible { outline: 2px solid var(--c-primaire); outline-offset: 1px; }

  .c-cal-mois { min-width: 0; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   54. Agenda : lisible au doigt (10.0)

   La teinte de la nature passe de la troisième colonne à un liseré à
   gauche. En dessous de 640 px, cette colonne devenait une bande pleine
   largeur sous chaque ligne — un trait de trois pixels qui ne se rattachait
   visuellement à rien.
   -------------------------------------------------------------------------- */

.c-agenda-ligne {
  grid-template-columns: 62px 1fr;
  border-left: 3px solid var(--teinte, var(--c-bordure));
  min-height: 40px;
}
.c-agenda-type {
  font-weight: 650;
  color: var(--teinte, var(--c-texte-doux));
}

/* L'en-tête de jour reste visible pendant qu'on fait défiler : sur une liste
   de quatre semaines, on perd sinon très vite quel jour on est en train de
   lire. */
.c-agenda-date {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--c-surface);
  padding-top: 6px;
}

@media (max-width: 640px) {
  .c-agenda-ligne { grid-template-columns: 52px 1fr; min-height: 44px; padding: 8px; }
  .c-agenda-ligne > :last-child { grid-column: auto; }
  .c-agenda-heure { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   55. La bande de temps : passé, présent, futur (11.0)

   « Prévisions » et « Statistiques » posaient la même question — où en
   est-on ? — sans jamais dire de quel côté de « maintenant » elles
   regardaient. Réunies, elles deviennent quatre moments nommés.

   Des onglets ordinaires auraient suffi à changer d'écran. Ceux-ci portent
   en plus **le chiffre du moment**, calculé même quand l'écran est fermé :
   on lit l'ensemble sans avoir à cliquer trois fois, et le choix se fait sur
   ce qu'il y a derrière, pas sur un intitulé.
   -------------------------------------------------------------------------- */

.c-temps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.c-temps-onglet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px 11px;
  font: inherit;
  text-align: left;
  color: var(--c-texte-doux);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.c-temps-onglet:hover { border-color: var(--c-bordure-forte); }

.c-temps-quand {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}
.c-temps-quoi { font-size: 14.5px; font-weight: 650; color: var(--c-texte); }
.c-temps-note {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--c-texte-faible);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-temps-onglet[aria-selected="true"] {
  background: var(--c-primaire-voile);
  border-color: var(--c-primaire);
}
.c-temps-onglet[aria-selected="true"] .c-temps-quand,
.c-temps-onglet[aria-selected="true"] .c-temps-note { color: var(--c-primaire); }

/* Les objectifs ne sont pas un moment : c'est le repère auquel les trois
   autres se comparent. La colonne est donc marquée d'un trait, pas d'une
   couleur — elle appartient à la bande sans en être un quatrième temps. */
.c-temps-reglage { border-left: 3px solid var(--c-ambre); }

@media (max-width: 820px) {
  .c-temps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .c-temps { grid-template-columns: 1fr; gap: 6px; }
  .c-temps-onglet { flex-direction: row; align-items: baseline; gap: 8px; padding: 8px 12px; }
  .c-temps-quand { flex: 0 0 auto; }
  .c-temps-note { margin-left: auto; }
}

/* Une valeur lissée n'est pas un engagement : elle porte toujours d'où elle
   vient, en pastille dans les titres et en tilde dans les tableaux. */
.c-mention-lisse {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 14px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--c-texte-doux);
  background: var(--c-ambre-voile);
  border-radius: var(--c-rayon-s);
}
.c-mention-lisse svg { flex: 0 0 auto; margin-top: 2px; color: var(--c-ambre); }

.c-marque-lisse {
  display: inline-block;
  margin-left: 3px;
  font-weight: 700;
  color: var(--c-ambre);
  cursor: help;
}

.c-ligne-courante { background: var(--c-primaire-voile); }

/* --------------------------------------------------------------------------
   57. Publications (11.0)
   -------------------------------------------------------------------------- */

/* Six colonnes plutôt que les quatre du Kanban des affaires : un cycle
   éditorial a plus d'étapes et des cartes plus courtes. */
.c-kanban-social { grid-auto-columns: minmax(190px, 1fr); }

.c-canaux { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }

/* La pastille d'un canal emprunte sa couleur à la plateforme : c'est le
   seul endroit du portail où une teinte de marque extérieure a du sens —
   on la reconnaît avant de la lire. */
.c-canal {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.6;
  color: var(--teinte, var(--c-texte-doux));
  background: color-mix(in srgb, var(--teinte, var(--c-texte-faible)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--teinte, var(--c-texte-faible)) 32%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

.c-tronque-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Une déclinaison, telle qu'elle paraîtra. Le liseré reprend la couleur du
   canal, et le corps garde les retours à la ligne : sur un réseau social,
   les sauts de ligne *sont* la mise en forme. */
.c-variante {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-left: 3px solid var(--teinte, var(--c-bordure-forte));
  border-radius: var(--c-rayon-s);
}
.c-variante-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12.5px;
}
.c-variante-outils { margin-left: auto; display: flex; gap: 5px; }

.c-variante-titre { margin: 0 0 5px; font-size: 15px; font-weight: 650; }
.c-variante-corps {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.c-variante-tags { margin: 8px 0 0; font-size: 13px; color: var(--c-primaire); }
.c-variante-lien { margin: 6px 0 0; font-size: 12.5px; color: var(--c-texte-faible); overflow-wrap: anywhere; }

.c-variante-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--c-bordure);
  font-size: 12px;
  color: var(--c-texte-faible);
  font-variant-numeric: tabular-nums;
}
.c-compteur-trop { color: var(--c-rouge); font-weight: 700; }
.c-variante-alerte { margin: 8px 0 0; font-size: 12.5px; color: var(--c-rouge); }
.c-variante-conseil { margin: 6px 0 0; font-size: 12px; color: var(--c-texte-faible); }

.c-ajout-canaux {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-bordure);
  font-size: 12.5px;
}

/* --------------------------------------------------------------------------
   58. Lire un argumentaire (11.0)

   Une trame de découverte se lit trois minutes, parfois en parlant au
   téléphone. 660 px de large en corps 14 donnait des lignes trop courtes et
   des caractères trop petits pour ça.

   La boîte s'élargit à 980 px, le corps passe à 16 px, et la mesure — la
   longueur d'une ligne de texte — est bornée à 68 caractères. Au-delà, l'œil
   perd le début de la ligne suivante ; c'est ce qui rend un texte large plus
   fatigant qu'un texte étroit, à taille égale.
   -------------------------------------------------------------------------- */

.c-modale-lecture { max-width: 980px; }
.c-modale-lecture .c-modale-corps { padding: 22px 26px 26px; }

/* La mesure est posée sur les **éléments de texte**, pas sur leur conteneur.
   Borner `.c-lecture` à 68ch bornerait tout ce qu'il contient, tableaux
   compris — et un tableau de six colonnes comprimé dans la largeur d'un
   paragraphe redevient illisible, ce qu'on venait précisément de corriger. */
.c-modale-lecture .c-lecture {
  font-size: 16px;
  line-height: 1.68;
  /* La mesure en pixels, pas en `ch` : l'unité `ch` se recalcule sur la
     police de **chaque** élément, si bien qu'un titre en 21 px obtenait une
     mesure de 963 px et s'étalait sur toute la boîte pendant que les
     paragraphes restaient à 686. 690 px, c'est environ 68 caractères dans
     le corps de base. */
  --mesure: 690px;
}
.c-modale-lecture .c-lecture > p,
.c-modale-lecture .c-lecture > ul,
.c-modale-lecture .c-lecture > ol,
.c-modale-lecture .c-lecture > h2,
.c-modale-lecture .c-lecture > h3,
.c-modale-lecture .c-lecture > h4,
.c-modale-lecture .c-lecture > blockquote { max-width: var(--mesure); }
.c-modale-lecture .c-lecture h2 { font-size: 21px; margin-top: 30px; }
.c-modale-lecture .c-lecture h3 { font-size: 17.5px; margin-top: 24px; }
.c-modale-lecture .c-lecture h4 { font-size: 15.5px; margin-top: 20px; }
.c-modale-lecture .c-lecture p { margin: 0 0 15px; }
.c-modale-lecture .c-lecture li { margin-bottom: 6px; }
.c-modale-lecture .c-lecture blockquote { font-size: 16px; }

/* Tableaux et sommaire gardent toute la largeur : ils se lisent en balayant,
   pas en suivant une ligne. */
.c-modale-lecture .c-lecture .c-tableau-cadre,
.c-modale-lecture .c-lecture .c-sommaire { max-width: none; width: 100%; }

.c-sommaire-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.c-sommaire-duree {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-texte-faible);
  font-variant-numeric: tabular-nums;
}
.c-sommaire-h4 { padding-left: 28px; }

@media (max-width: 700px) {
  .c-modale-lecture .c-modale-corps { padding: 16px; }
  .c-modale-lecture .c-lecture { font-size: 15.5px; }
}

/* --------------------------------------------------------------------------
   59. Compléments (11.0)
   -------------------------------------------------------------------------- */

.c-liste-puces { margin: 10px 0; padding-left: 20px; }
.c-liste-puces li { margin-bottom: 4px; }

.c-alerte-ambre {
  color: var(--c-texte);
  background: var(--c-ambre-voile);
  border: 1px solid color-mix(in srgb, var(--c-ambre) 35%, transparent);
}

/* Un filtre masqué garde sa place dans la grille s'il n'est pas retiré du
   flux : `hidden` sur un `<span class="c-filtre">` en flex ne suffit pas,
   la règle d'affichage du conteneur le remet en ligne. */
.c-barre-filtres [data-si-periode][hidden] { display: none; }

/* Un menu déroulant sans effet doit le montrer, pas seulement le taire. */
.c-barre-filtres select:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   60. L'entonnoir de conversion (13.0)

   Trois défauts de la version précédente, tous du même ordre : le dessin ne
   disait pas ce qu'il montrait.

   1. La hauteur d'une barre verticale de 36 px ne se compare pas d'une
      colonne à l'autre — deux étapes proches paraissaient identiques. La
      barre est passée à l'horizontale, sur toute la largeur de la carte :
      on lit une longueur, pas une hauteur, et l'œil compare des longueurs.
   2. Le taux de passage était posé sur un trait gris, à mi-hauteur de rien.
      Il porte maintenant une flèche pleine, teintée en rouge quand moins de
      45 % du montant franchit l'étape : c'est là que le portefeuille fuit.
   3. Chaque carte ne disait qu'un montant et un compte. Elle dit désormais
      le ticket moyen et la part du portefeuille — les deux chiffres qu'on
      allait chercher ailleurs.
   -------------------------------------------------------------------------- */

.c-entonnoir {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 2px 0 0;
  list-style: none;
  overflow-x: auto;
}

.c-ent-etape { display: flex; align-items: stretch; flex: 1 1 0; min-width: 158px; }

/* La flèche porte le taux de passage : c'est là qu'on le cherche, entre les
   deux étapes qu'il compare, et pas dans une colonne de tableau. */
.c-ent-passage {
  position: relative;
  flex: 0 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--c-texte-faible);
}
.c-ent-fleche {
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}
.c-ent-taux {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* Moins de 45 % du montant franchit l'étape : c'est le goulot, et il se
   voit sans être cherché. */
.c-ent-passage-faible { color: var(--c-rouge); }
.c-ent-passage-faible .c-ent-fleche { opacity: 1; }

.c-ent-carte {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 13px 14px 12px;
  color: var(--c-texte);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--teinte, var(--c-primaire)) 7%, transparent), transparent 62%),
    var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.c-ent-carte:hover {
  text-decoration: none;
  border-color: color-mix(in srgb, var(--teinte, var(--c-primaire)) 55%, transparent);
  box-shadow: var(--c-ombre);
  transform: translateY(-1px);
}

.c-ent-tete { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Le rang dans une pastille teintée : il numérote le chemin, et la couleur
   rattache la carte à son étape sans avoir à relire la légende. */
.c-ent-rang {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--teinte, var(--c-primaire));
  border-radius: 50%;
}
.c-ent-nom {
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  /* Deux lignes au plus : « Proposition de surveillance » ne doit pas
     étirer toute la rangée. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-ent-montant {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.c-ent-detail { font-size: 11.5px; color: var(--c-texte-faible); }

/* La piste est horizontale et pleine largeur : on compare des longueurs,
   pas des hauteurs. La plus longue vaut l'étape la plus lourde. */
.c-ent-piste {
  margin-top: 7px;
  height: 6px;
  background: var(--c-bordure);
  border-radius: 999px;
  overflow: hidden;
}
.c-ent-remplissage {
  display: block;
  height: 100%;
  background: linear-gradient(90deg,
    var(--teinte, var(--c-primaire)),
    color-mix(in srgb, var(--teinte, var(--c-primaire)) 60%, #fff));
  border-radius: 999px;
}

.c-ent-part { margin-top: 5px; font-size: 11px; color: var(--c-texte-faible); }
.c-ent-variantes {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 7px;
  font-size: 10.5px;
  color: var(--c-texte-faible);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: 999px;
}

@media (max-width: 820px) {
  /* Sur un téléphone, quatre étapes en ligne font des colonnes de 70 px.
     On repasse en pile, et les flèches se couchent — l'entonnoir se lit
     alors de haut en bas, ce qui reste un chemin. */
  .c-entonnoir { flex-direction: column; overflow-x: visible; }
  .c-ent-etape { flex-direction: column; min-width: 0; }
  .c-ent-passage { flex: 0 0 30px; flex-direction: row; gap: 8px; width: 100%; }
  .c-ent-fleche { transform: rotate(135deg); }
  .c-ent-nom { -webkit-line-clamp: 1; }
  .c-ent-montant { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   61. Étiquettes : le champ de saisie (12.0)

   La colonne `tags` existait depuis le début et s'affichait en pastilles.
   Rien ne permettait d'en poser une : il fallait passer par l'administration.
   -------------------------------------------------------------------------- */

.c-etiquettes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-etiquettes:focus-within { border-color: var(--c-primaire); box-shadow: 0 0 0 3px var(--c-primaire-voile); }
.c-etiquettes-jetons { display: contents; }

.c-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  font-size: 12.5px;
  color: var(--c-texte);
  background: var(--c-primaire-voile);
  border: 1px solid color-mix(in srgb, var(--c-primaire) 28%, transparent);
  border-radius: 999px;
}
.c-etiquette-retirer {
  padding: 0 3px;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.c-etiquette-retirer:hover { color: var(--c-rouge); }

/* La saisie n'a pas de cadre à elle : le cadre, c'est la zone entière. */
.c-etiquettes-saisie {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 2px 0;
  background: none;
  border: 0;
}
.c-etiquettes-saisie:focus { outline: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   62. Notes et échanges dans la colonne principale (12.0)

   Les notes vivaient dans la colonne de droite, large de 300 px : chaque
   note y tenait sur huit lignes de six mots. C'est du texte qu'on écrit et
   qu'on relit — sa place est dans la colonne principale.
   -------------------------------------------------------------------------- */

.c-note-saisie { margin-bottom: 16px; }
.c-note-saisie textarea { min-height: 76px; }
.c-note-saisie .c-champ { margin-bottom: 8px; }

.c-notes { display: flex; flex-direction: column; gap: 2px; }

.c-note {
  padding: 11px 12px;
  border-radius: var(--c-rayon-s);
  border-left: 3px solid transparent;
}
.c-note:hover { background: var(--c-surface-2); }
.c-note + .c-note { border-top: 1px solid var(--c-bordure); border-radius: 0 var(--c-rayon-s) var(--c-rayon-s) 0; }
.c-note-epinglee { border-left-color: var(--c-ambre); background: var(--c-ambre-voile); }

.c-note-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.c-note-tete .c-fil-date { margin-left: auto; color: var(--c-texte-faible); }
.c-jeton-petit { width: 22px; height: 22px; font-size: 9.5px; flex: 0 0 22px; }

.c-note-titre { margin: 0 0 4px; font-size: 14px; font-weight: 650; }
/* Le corps hérite de la lecture enrichie : une note contient des listes et
   du gras aussi souvent qu'un argumentaire, en plus court. */
.c-note-corps { font-size: 13.5px; line-height: 1.6; }
.c-note-corps > :first-child { margin-top: 0; }
.c-note-corps > :last-child { margin-bottom: 0; }
.c-note-corps p { margin: 0 0 8px; }

/* Un échange : qui, puis quoi. Le sens de la flèche remplace une pastille
   « entrant / sortant » — deux caractères au lieu de deux mots, et il se
   lit sans être lu. */
.c-echange-qui {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-texte-doux);
}
.c-echange-sens {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-texte-faible);
}
.c-echange-extrait {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--c-texte-doux);
}

/* --------------------------------------------------------------------------
   63. Publications : formats de contenu (12.0)
   -------------------------------------------------------------------------- */

.c-variante-riche { font-size: 14px; line-height: 1.6; }
.c-variante-riche > :first-child { margin-top: 0; }
.c-variante-riche > :last-child { margin-bottom: 0; }

/* Le HTML d'une publication de site est rendu tel quel dans la carte. Il est
   écrit par l'équipe, pas reçu de l'extérieur — mais on le borne pour qu'une
   balise oubliée ne déforme pas la page autour. */
.c-variante-html {
  max-width: 100%;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.c-variante-html img { max-width: 100%; height: auto; }
.c-variante-html table { max-width: 100%; }

.c-cal-publication { border-left-color: #c13584; }
@media (max-width: 900px) { .c-cal-publication { background: #c13584; } }

/* --------------------------------------------------------------------------
   64. Groupes de doublons (12.0)
   -------------------------------------------------------------------------- */

.c-grappe {
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}
.c-grappe-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.c-grappe-nom { font-weight: 650; }
.c-grappe-tete .c-bouton { margin-left: auto; }

/* --------------------------------------------------------------------------
   65. Alertes : l'attribut `hidden` doit gagner (13.0)

   `.c-alerte:not(:empty) { display: block }` est plus spécifique que la
   règle du navigateur pour `[hidden]`. Une alerte vidée puis remise
   réapparaîtrait donc à contretemps. On tranche ici.
   -------------------------------------------------------------------------- */

.c-alerte[hidden] { display: none !important; }
.c-alerte-succes {
  background: var(--c-vert-voile);
  border-color: var(--c-vert);
  color: var(--c-vert);
}

/* --------------------------------------------------------------------------
   66. Périmètre des commerciaux (13.0)

   Une case par activité et par personne. Les cases sont des pastilles
   cliquables et non des carrés cochés : à cinq activités par ligne, la
   colonne de carrés se lit moins bien que la couleur de l'activité.
   -------------------------------------------------------------------------- */

.c-perimetre-cases { display: flex; flex-wrap: wrap; gap: 6px; }

.c-perimetre-case {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  font-size: 12.5px;
  color: var(--c-texte-doux);
  background: var(--c-surface);
  border: 1px solid var(--c-bordure-forte);
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.c-perimetre-case:hover { border-color: var(--teinte, var(--c-primaire)); }
.c-perimetre-case input { accent-color: var(--teinte, var(--c-primaire)); margin: 0; }
.c-perimetre-case input:disabled { cursor: not-allowed; }
.c-perimetre-case:has(input:disabled) { cursor: default; opacity: .75; }

.c-perimetre-actif {
  color: var(--c-texte);
  background: color-mix(in srgb, var(--teinte, var(--c-primaire)) 12%, transparent);
  border-color: color-mix(in srgb, var(--teinte, var(--c-primaire)) 45%, transparent);
}

.c-perimetre td { vertical-align: middle; }

/* --------------------------------------------------------------------------
   67. LinkedIn en icône dans une liste d'attributs (13.0)

   `.c-lien-li` est fait pour suivre un nom : d'où sa marge à gauche et son
   décalage vertical. Seul dans une cellule de valeur, il doit se poser
   comme une pastille cliquable — sinon il flotte à cinq pixels du bord et
   la zone de clic fait quatorze pixels de côté.
   -------------------------------------------------------------------------- */

.c-lien-li-seul {
  margin-left: 0;
  vertical-align: baseline;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface-2);
}
.c-lien-li-seul:hover { color: #fff; background: #0a66c2; border-color: #0a66c2; }

/* --------------------------------------------------------------------------
   68. Bandeau de restriction (13.0)

   Une liste ouverte depuis un graphique arrive filtrée. Sans un mot, elle
   ressemble à une liste vide ou incomplète — et on cherche l'erreur.
   -------------------------------------------------------------------------- */

.c-bandeau-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--c-texte-doux);
  background: var(--c-primaire-voile);
  border: 1px solid color-mix(in srgb, var(--c-primaire) 32%, transparent);
  border-radius: var(--c-rayon-s);
}
.c-bandeau-filtre .c-bouton { margin-left: auto; }

/* --------------------------------------------------------------------------
   69. Outils dans le pied d'une modale (13.0)

   Ils agissent dans le formulaire sans le fermer : leur place est à gauche,
   loin d'« Annuler » et d'« Enregistrer », qui eux le referment. Sur un
   téléphone, le pied passe en colonne pour que trois boutons ne se
   réduisent pas à trois carrés de vingt pixels.
   -------------------------------------------------------------------------- */

.c-modale-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: auto;
}

@media (max-width: 560px) {
  .c-modale-pied { flex-wrap: wrap; }
  .c-modale-outils { width: 100%; margin-right: 0; }
  .c-modale-outils .c-bouton { flex: 1 1 auto; justify-content: center; }
}

/* --------------------------------------------------------------------------
   70. Visuels d'une publication (13.0)

   La colonne `image` existait depuis le début, et l'aperçu d'un canal
   signalait « manque : visuel » — sans qu'aucun écran ne permette d'en
   poser un. Instagram refusait donc toute publication, ce que le portail
   disait sans offrir la suite.
   -------------------------------------------------------------------------- */

.c-visuel {
  display: block;
  max-width: 320px;
  overflow: hidden;
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  background: var(--c-surface-2);
}
.c-visuel img { display: block; width: 100%; height: auto; }
/* L'image n'a pas pu être chargée : on garde le cadre et on le dit, plutôt
   que de laisser une icône cassée. */
.c-visuel-absent::after {
  content: 'Image indisponible';
  display: block;
  padding: 14px;
  font-size: 12.5px;
  color: var(--c-texte-faible);
}
.c-visuel-absent img { display: none; }

.c-visuel-vide {
  display: inline-block;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--c-texte-faible);
  background: var(--c-surface-2);
  border: 1px dashed var(--c-bordure-forte);
  border-radius: var(--c-rayon-s);
}

.c-visuel-bloc {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.c-visuel-etiquette {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-texte-doux);
}

.c-variante-visuel { margin: 0 0 10px; }

/* La bibliothèque : une grille de vignettes, dense mais lisible. Trois
   colonnes sur un écran de portable, une seule sur un téléphone. */
.c-bibli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 2px;
}
.c-bibli-case {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 7px;
  text-align: left;
  color: var(--c-texte);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  overflow: hidden;
}
.c-bibli-case:hover { border-color: var(--c-primaire); }
.c-bibli-choisi { border-color: var(--c-primaire); box-shadow: 0 0 0 2px var(--c-primaire-voile); }
.c-bibli-case img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  background: var(--c-bordure);
}
.c-bibli-nom {
  padding: 6px 8px 0;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-bibli-meta { padding: 0 8px; font-size: 11px; color: var(--c-texte-faible); }

/* --------------------------------------------------------------------------
   71. Repli de la barre de filtres sur petit écran (13.0)

   Le bouton n'existe qu'en dessous de 720 px. Au-dessus, la barre reste
   dépliée et la classe `c-filtres-replies` ne veut rien dire — c'est
   volontaire : l'état est posé une fois au chargement et n'a pas à être
   recalculé quand on redimensionne une fenêtre de bureau.
   -------------------------------------------------------------------------- */

.c-filtres-bascule { display: none; }

@media (max-width: 720px) {
  .c-filtres-bascule {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-texte-doux);
    background: var(--c-surface);
    border: 1px solid var(--c-bordure-forte);
    border-radius: var(--c-rayon-s);
    cursor: pointer;
  }
  .c-filtres-bascule:hover { border-color: var(--c-primaire); color: var(--c-texte); }

  /* Le compte des filtres posés. Sans lui, une liste filtrée dont les
     filtres sont repliés se lit comme une liste incomplète. */
  .c-filtres-compte {
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--c-primaire);
    border-radius: 999px;
  }

  .c-filtres-replies .c-barre-filtres { display: none; }

  /* Dépliée, la barre prend toute la largeur et ses sélecteurs se posent
     deux par ligne : à la file, ils faisaient six lignes d'un seul champ. */
  .c-barre-filtres { width: 100%; gap: 8px; }
  .c-filtre { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .c-filtre select { width: 100%; max-width: none; }
  .c-barre-filtres .c-bouton { flex: 1 1 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   72. Étoile de favori (13.4)

   Une seule géométrie, deux états : `fill` passe de transparent à l'ambre.
   Deux tracés distincts obligeraient à recomposer le SVG à chaque bascule,
   et l'animation sauterait.
   -------------------------------------------------------------------------- */

.c-etoile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--c-texte-faible);
  background: none;
  border: 0;
  border-radius: var(--c-rayon-s);
  cursor: pointer;
  transition: color .12s, transform .12s;
}
.c-etoile svg { fill: none; transition: fill .12s; }
.c-etoile:hover { color: var(--c-ambre); background: var(--c-surface-2); }
.c-etoile:active { transform: scale(.88); }
.c-etoile-active { color: var(--c-ambre); }
.c-etoile-active svg { fill: currentColor; }
.c-etoile-compacte { width: 26px; height: 26px; }

/* L'étoile qui **filtre** une liste, dans la barre d'outils (13.10). Elle
   porte un contour, sans quoi rien ne la distingue d'une décoration ; le mot
   « Favoris » à côté ne lui apprend rien que l'icône ne dise déjà. */
.c-filtre-favoris {
  width: 34px;
  height: 34px;
  align-self: flex-end;
  border: 1px solid var(--c-bordure-forte);
  background: var(--c-surface);
  flex: 0 0 auto;
}
.c-filtre-favoris[aria-pressed="true"] { border-color: var(--c-ambre); }

/* Dans le titre d'une fiche, l'étoile suit le texte sans le pousser. */
[data-titre] .c-etoile { vertical-align: middle; margin-left: 4px; }

/* Sur une vignette d'événement, elle se pose dans le coin — la vignette est
   cliquable en entier, l'étoile ne doit donc pas être dans son flux. */
.c-vignette { position: relative; }
.c-vignette > .c-etoile { position: absolute; top: 8px; right: 8px; z-index: 1; }

/* --------------------------------------------------------------------------
   73. Raccourcis vers les fiches, depuis un message (13.4)

   Un message se lit pour agir, et le geste suivant est presque toujours
   « ouvrir la fiche ». Les liens existaient, noyés dans le tableau des
   attributs ; ici ce sont trois cibles franches, au-dessus du corps.
   -------------------------------------------------------------------------- */

.c-raccourcis {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-bordure);
}

.c-raccourci {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 14px 9px 11px;
  color: var(--c-texte);
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
  transition: border-color .12s, background .12s;
}
.c-raccourci:hover {
  text-decoration: none;
  background: var(--c-primaire-voile);
  border-color: color-mix(in srgb, var(--c-primaire) 45%, transparent);
}
.c-raccourci svg { flex: 0 0 auto; color: var(--c-primaire); }
.c-raccourci > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.c-raccourci-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}
.c-raccourci-nom {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

@media (max-width: 560px) {
  .c-raccourci { flex: 1 1 100%; }
  .c-raccourci-nom { max-width: none; }
}

/* --------------------------------------------------------------------------
   74. Les briques de chargement (13.11)

   La page arrivait grisée et inerte, puis se révélait d'un coup. Le défaut
   corrigé était réel — une page qui se peint par morceaux ressemble à un
   défaut d'affichage — mais on regardait une page éteinte sans savoir ce
   qui allait s'y trouver, et la requête la plus lente retenait tout.

   La page arrive maintenant **entière, en briques grises**, chacune à la
   place et à la taille du contenu qu'elle annonce ; chaque bloc remplace la
   sienne dès que ses données arrivent. Le module `Squelette` de `crm.js`
   compose ces formes ; on ne trouve ici que leur mise en page.
   -------------------------------------------------------------------------- */

/* Un fil dans un panneau : chaque élément séparé comme le sera le vrai. */
.c-sq-item {
  padding: 9px 0;
  border-top: 1px solid var(--c-bordure);
}
.c-sq-item:first-child { padding-top: 0; border-top: 0; }
.c-sq-item:last-child { padding-bottom: 0; }

/* La barre de filtres d'une liste, et la première ligne d'une fiche. */
.c-sq-barre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.c-sq-barre-fin { display: flex; gap: 8px; margin-left: auto; }

.c-sq-tableau { padding: 4px 0; }
.c-sq-ligne {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
  padding: 11px 14px;
  border-top: 1px solid var(--c-bordure);
}
.c-sq-ligne:first-child { border-top: 0; }
.c-sq-ligne .c-sq { margin-bottom: 0; }
.c-sq-tete { background: var(--c-surface-2); }

.c-sq-vignette { min-height: 148px; }
.c-sq-pastilles { display: flex; gap: 8px; margin-top: 12px; }

.c-sq-affaire {
  padding: 10px;
  margin-bottom: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-bordure);
  border-radius: var(--c-rayon-s);
}

.c-sq-attributs { margin: 0; }
.c-sq-attribut {
  padding: 7px 0;
  border-top: 1px solid var(--c-bordure);
}
.c-sq-attribut:first-child { border-top: 0; }

/* Le graphique : des barres alignées sur la ligne de base, comme celles
   qui vont les remplacer. */
.c-sq-graphe {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
}
.c-sq-graphe .c-sq { flex: 1 1 0; margin-bottom: 0; }

/* La tête d'une fiche : le jeton rond, puis le nom et son sous-titre. */
.c-sq-fiche-tete {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.c-sq-jeton { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; margin-bottom: 0; }
.c-sq-fiche-noms { flex: 1 1 auto; min-width: 0; }

/* Il y avait ici un faux rail : une bande de 246 px peinte en travers de la
   coque pendant le chargement, parce que le vrai rail n'arrivait qu'après
   trois requêtes. Il arrive maintenant avec la page (voir `Coque.poser`), et
   ce décor n'a plus rien à cacher. Il coûtait par ailleurs une bande blanche
   en travers du contenu sur téléphone, où la coque n'a qu'une colonne. */

@media (prefers-reduced-motion: reduce) {
  .c-sq,
  .c-jeton-attente { animation: none; background-position: 50% 0; }
}

/* Un fil de progression en tête de page : deux pixels qui disent que
   quelque chose se passe. Sans lui, une page lente est indiscernable d'une
   page bloquée dès que les briques sont posées. */
.c-chargement::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--c-primaire) 40%, var(--c-primaire) 60%, transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: c-fil-progression 1.1s ease-in-out infinite;
}
@keyframes c-fil-progression {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .c-chargement::before { animation: none; background-position: 50% 0; }
}

/* ==========================================================================
   75. Formulaire pleine page (13.5)

   Le même `Modale.ouvrir` que partout, mais étalé : plus de fond assombri,
   plus de boîte, plus de « à côté » où cliquer. La surface remplace la page.

   Trois bandes, et c'est tout l'intérêt de ne pas réutiliser `.c-modale`
   tel quel : ici l'en-tête et le pied **tiennent**, seul le corps défile.
   Dans la boîte centrée, le pied défile avec le contenu — acceptable sur
   six champs, pénible sur quarante lignes de texte, où le bouton
   « Enregistrer » finit hors de vue au moment précis où on le cherche.
   ========================================================================== */

.c-voile-plein {
  padding: 0;
  background: var(--c-fond);
  backdrop-filter: none;
  place-items: stretch;
}

.c-modale-plein {
  max-width: none;
  max-height: none;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--c-fond);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: none;
}

/* Les trois bandes partagent la même colonne : sans cela le titre serait
   collé au bord gauche et les boutons au bord droit d'un écran de 27
   pouces, à un demi-mètre l'un de l'autre. */
.c-modale-plein > .c-modale-tete,
.c-modale-plein > .c-modale-pied {
  padding-inline: max(24px, calc((100% - 1120px) / 2));
  background: var(--c-surface);
}

.c-modale-plein > .c-modale-tete {
  padding-block: 16px;
  border-bottom: 1px solid var(--c-bordure);
}

.c-modale-plein > .c-modale-tete h2 { font-size: 17px; }

.c-modale-plein > .c-modale-corps {
  overflow-y: auto;
  padding: 26px max(24px, calc((100% - 1120px) / 2)) 44px;
}

.c-modale-plein > .c-modale-pied {
  padding-block: 14px;
  border-top: 1px solid var(--c-bordure);
  box-shadow: 0 -8px 20px -18px rgba(0, 0, 0, .55);
}

.c-modale-plein .c-bloc { margin-bottom: 22px; }

@media (max-width: 720px) {
  .c-modale-plein > .c-modale-tete,
  .c-modale-plein > .c-modale-pied { padding-inline: 14px; }
  .c-modale-plein > .c-modale-corps { padding: 18px 14px 32px; }
  /* Sur téléphone le pied déborderait : outils d'un côté, actions de
     l'autre, et l'ensemble sur deux lignes plutôt qu'une barre coupée. */
  .c-modale-plein > .c-modale-pied { flex-wrap: wrap; gap: 8px; }
  .c-modale-plein .c-modale-outils { width: 100%; }
}

/* ==========================================================================
   76. Plan d'affaires (13.5)

   Quatre cartes qui répondent à « est-ce que cet objectif tient debout ? ».
   L'essentiel du travail visuel porte sur une seule chose : distinguer un
   chiffre **posé** d'un chiffre **déduit**. Sans cette distinction, tout
   l'écran se lit comme un engagement, et l'on discute d'une cible que
   personne n'a fixée.
   ========================================================================== */

.c-plan-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.c-plan-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px;
  border: 1px solid var(--c-bordure);
  border-radius: 10px;
  background: var(--c-surface-2);
}

.c-plan-kpi-libelle {
  font-size: 12px;
  color: var(--c-texte-faible);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.c-plan-kpi-valeur {
  font-size: 21px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.c-plan-kpi-note { font-size: 12px; color: var(--c-texte-faible); }

/* L'étiquette de provenance. Elle est petite parce qu'elle se consulte, pas
   parce qu'elle est secondaire : c'est elle qui dit si le chiffre au-dessus
   se négocie ou se constate. */
.c-plan-source {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.c-plan-source-pose { background: var(--c-primaire-voile); color: var(--c-primaire); }
.c-plan-source-deduit { background: var(--c-ardoise-voile); color: var(--c-texte-faible); }
.c-plan-source-mesure { background: var(--c-vert-voile); color: var(--c-vert); }

.c-plan-legende {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-texte-faible);
}


.c-plan-bascule { display: flex; gap: 6px; margin-bottom: 12px; }

/* Deux réglages sur une seule rangée, chacun sous son intitulé (13.9).
   Empilés sans titre, les six boutons se lisaient comme une seule famille
   de choix exclusifs — on cherchait « Par mois » et « Par activité » dans
   la même liste. Nommer chaque groupe coûte deux mots et lève l'ambiguïté. */
.c-plan-reglages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 12px;
}
.c-plan-reglage { display: flex; align-items: center; gap: 8px; }
.c-plan-reglage .c-plan-bascule { margin-bottom: 0; }
.c-plan-reglage-titre {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-texte-faible);
}

/* Ce que le plan cumule : les deux décompositions écrites comme des
   additions, parce que c'est ainsi qu'on les vérifie. Une ligne par
   décomposition, les parts à gauche du total. */
.c-cumuls {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--c-bordure);
  border-radius: 10px;
  background: var(--c-surface-2);
}
.c-cumul-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--c-bordure);
}
.c-cumul-ligne:last-of-type { border-bottom: 0; }
.c-cumul-titre { min-width: 140px; font-weight: 620; font-size: 13.5px; }
.c-cumul-calcul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13.5px; }
.c-cumul-calcul b { color: var(--c-texte-faible); font-weight: 500; }
.c-cumul-part { display: inline-flex; align-items: baseline; gap: 4px; }
.c-cumul-part .c-faible { font-size: 12px; }
.c-cumul-note { margin-left: auto; font-size: 12px; color: var(--c-texte-faible); }
.c-cumuls .c-kpi-note { margin: 10px 0 0; }
.c-cumul-alerte {
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--c-ambre);
  background: var(--c-ambre-voile);
}

/* Un bloc d'explication qu'on replie (13.9). Le texte reste dans la page —
   il dit comment se lit l'écran — mais il cesse d'en occuper le haut à
   chaque visite une fois qu'on l'a lu. */
.c-repli {
  border: 1px solid var(--c-bordure);
  border-radius: 10px;
  background: var(--c-surface-2);
}
.c-repli > summary {
  padding: 11px 14px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 620;
  list-style: none;
}
.c-repli > summary::-webkit-details-marker { display: none; }
.c-repli > summary::before {
  content: '▸';
  display: inline-block;
  width: 14px;
  color: var(--c-texte-faible);
}
.c-repli[open] > summary::before { content: '▾'; }
.c-repli > summary:hover { color: var(--c-primaire); }
.c-repli-corps { padding: 0 14px 12px 28px; }
.c-repli-corps p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.65; }
.c-repli-corps p:last-child { margin-bottom: 0; }

/* Sommaire d'un écran long : des ancres, pas des onglets — la page ne
   change pas, le regard s'y déplace. */
.c-sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.c-sommaire a {
  padding: 5px 11px;
  border: 1px solid var(--c-bordure);
  border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-texte-doux);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}
.c-sommaire a:hover { border-color: var(--c-primaire); color: var(--c-primaire); }

.c-plan-organisation {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--c-primaire);
  border-radius: 0 10px 10px 0;
  background: var(--c-surface-2);
}

.c-plan-organisation p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; }
.c-plan-organisation p:last-child { margin-bottom: 0; }

.c-plan-verdicts { display: flex; flex-direction: column; gap: 9px; }

.c-plan-verdict {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--c-bordure);
  border-radius: 10px;
  background: var(--c-surface-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.c-plan-verdict strong { display: block; margin-bottom: 2px; }
.c-plan-verdict-texte { color: var(--c-texte-faible); }
.c-plan-verdict-pastille { flex: none; margin-top: 1px; }

/* La couleur porte le niveau, mais elle ne le porte pas seule : l'icône
   change aussi, et l'ordre de tri met les alertes en tête. Un daltonien
   doit pouvoir lire cet écran sans compter sur la teinte. */
.c-plan-verdict-alerte {
  border-color: var(--c-rouge);
  background: var(--c-rouge-voile);
}
.c-plan-verdict-alerte .c-plan-verdict-pastille { color: var(--c-rouge); }

.c-plan-verdict-vigilance {
  border-color: var(--c-ambre);
  background: var(--c-ambre-voile);
}
.c-plan-verdict-vigilance .c-plan-verdict-pastille { color: var(--c-ambre); }

.c-plan-verdict-ok .c-plan-verdict-pastille { color: var(--c-vert); }

@media (max-width: 620px) {
  .c-plan-grille { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .c-plan-kpi-valeur { font-size: 18px; }
  .c-plan-organisation { padding: 12px 13px; }
}

/* Provenance de la cible (13.6) — d'où vient le chiffre du plan. */
.c-plan-provenance {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-bordure);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--c-texte-doux);
}

.c-plan-provenance svg { flex: none; margin-top: 2px; }
.c-plan-provenance-pose { color: var(--c-texte-faible); }
.c-plan-provenance-pose svg { color: var(--c-vert); }

/* Un total agrégé n'est pas un engagement : il se signale. Deux états
   visuels seulement — posé ou reconstitué — parce que c'est la seule
   distinction qui change la lecture ; le détail est dans la phrase. */
.c-plan-provenance-agrege {
  border-color: var(--c-ambre);
  background: var(--c-ambre-voile);
  color: var(--c-texte);
}

.c-plan-provenance-agrege svg { color: var(--c-ambre); }

.c-plan-parts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }
.c-plan-parts b { font-weight: 600; }
.c-plan-source-agrege { background: var(--c-ambre-voile); color: var(--c-ambre); }

/* Un indicateur qui appelle une action se distingue des trois autres (13.6).
   Sur la page Contrats, « en retard » n'est pas une statistique : c'est une
   relance à passer, et il doit se voir sans être lu. */
.c-kpi-alerte {
  border-color: var(--c-rouge);
  background: var(--c-rouge-voile);
}

.c-kpi-alerte .c-kpi-valeur { color: var(--c-rouge); }

/* ==========================================================================
   77. Vision 3 ans et raffinements du plan d'affaires (13.7)
   ========================================================================== */

.c-carte-note {
  margin: -6px 0 14px;
  font-size: 12.5px;
  color: var(--c-texte-doux);
}

/* Une carte KPI qui mène quelque part se distingue au survol — sans quoi
   rien ne dit qu'elle est cliquable plutôt que simplement lue. */
.c-plan-kpi-cliquable {
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}

.c-plan-kpi-cliquable:hover,
.c-plan-kpi-cliquable:focus-visible {
  border-color: var(--c-primaire);
  transform: translateY(-1px);
}

.c-plan-source-parametre { background: var(--c-violet-voile); color: var(--c-violet); }

/* Le bref éclat d'une section qu'on vient d'atteindre en cliquant une carte
   KPI — le regard doit se poser au bon endroit, pas seulement défiler
   jusque-là. */
.c-plan-eclat {
  animation: c-plan-eclat-anim .9s ease-out;
  border-radius: var(--c-rayon);
}

@keyframes c-plan-eclat-anim {
  0% { box-shadow: 0 0 0 3px var(--c-primaire-voile); }
  100% { box-shadow: 0 0 0 3px transparent; }
}

/* La grille « Vision 3 ans » : une colonne d'étiquettes, puis une colonne
   par année. `--vision-colonnes` est posé en ligne par le script — le
   nombre d'années n'est pas fixe dans la feuille de style. */
.c-vision-grille { display: flex; flex-direction: column; gap: 8px; }

.c-vision-ligne {
  display: grid;
  grid-template-columns: minmax(120px, 180px) repeat(var(--vision-colonnes, 3), 1fr);
  gap: 8px;
  align-items: stretch;
}

.c-vision-entete {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-texte-faible);
}

.c-vision-entete span:not(:first-child) { text-align: center; }

.c-vision-segment {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-texte-doux);
}

.c-vision-carte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border: 1px solid var(--c-bordure);
  border-radius: 10px;
  background: var(--c-surface-2);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, background .12s ease;
}

.c-vision-carte:hover,
.c-vision-carte:focus-visible { border-color: var(--c-primaire); background: var(--c-primaire-voile); }

.c-vision-carte strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.c-vision-carte .c-faible { font-size: 11.5px; }

.c-vision-carte-vide {
  border-style: dashed;
  background: transparent;
}

@media (max-width: 720px) {
  .c-vision-ligne { grid-template-columns: minmax(90px, 120px) repeat(var(--vision-colonnes, 3), 1fr); gap: 5px; }
  .c-vision-carte { padding: 7px 4px; }
  .c-vision-carte strong { font-size: 12.5px; }
}

/* ==========================================================================
   78. Sélection en lot dans les listes (13.14)

   Une case en tête de ligne, et une barre qui n'apparaît qu'une fois une
   ligne cochée. Elle se pose en haut de la carte, au-dessus des en-têtes :
   là où l'œil revient après avoir coché, sans recouvrir la ligne suivante.
   ========================================================================== */

table.c-tableau th.c-col-case,
table.c-tableau td.c-col-case { width: 38px; padding-right: 0; cursor: default; }
.c-col-case input {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--c-primaire);
  cursor: pointer;
}

table.c-tableau tbody tr.c-ligne-choisie,
table.c-tableau tbody tr.c-ligne-choisie:hover { background: color-mix(in srgb, var(--c-primaire) 6%, var(--c-surface)); }

.c-lot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 14px;
  font-size: 13px;
  background: var(--c-primaire-voile);
  border-bottom: 1px solid color-mix(in srgb, var(--c-primaire) 32%, transparent);
  border-radius: var(--c-rayon) var(--c-rayon) 0 0;
}
.c-lot-compte { font-weight: 650; }
.c-lot-tout {
  padding: 0;
  font: inherit;
  color: var(--c-primaire);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.c-lot-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.c-lot-actions .c-bouton:not(.c-bouton-discret) { background: var(--c-surface); }

@media (max-width: 640px) {
  .c-lot-actions { width: 100%; margin-left: 0; }
}