/* Cockpit — feuille de la surface interne.
 *
 * L'organisation visuelle reprend `cockpit.html` de la maquette : rail à
 * gauche en deux sections, barre supérieure avec fil d'Ariane et titre, corps
 * en cartes. Les COULEURS, la POLICE et les rayons viennent de la charte de Mon
 * Pilote (`tokens.css`, recopié) — Cockpit ne définit AUCUN hexcode, à la seule
 * exception du logo, qui lui appartient.
 *
 * Deux contrôles gouvernent ce fichier, automatisés dans tests/test_gabarits.py
 * parce qu'ils ont chacun attrapé un défaut réel :
 *
 *   1. tout `var(--x)` utilisé doit être DÉCLARÉ — ici ou dans la charte ;
 *   2. toute classe posée dans un gabarit a une règle, et toute règle a un
 *      porteur, dans LES DEUX SENS.
 */

/* La règle patchée neuf fois au cas par cas dans la maquette : un `hidden` sur
 * un élément en `display:flex` reste VISIBLE, la règle d'auteur gagne. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  background: var(--color-bg);
  color: var(--color-text-body);
  line-height: 1.5;
  display: flex;
  min-height: 100vh;
}

/* ── Le rail ─────────────────────────────────────────────────────────────── */

.ck-rail {
  /* 15rem valait 195 px (cf. la note des media queries), et « Mon tableau de
   * bord » comme « Réponses clients » passaient à la ligne. Un libellé de
   * navigation qui se coupe se lit comme deux entrées. */
  flex: 0 0 18.5rem;
  display: flex; flex-direction: column;
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  min-height: 100vh;
}

.ck-marque {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-5);
}
.ck-logo { width: 30px; height: 30px; flex: 0 0 auto; }
.ck-marque-txt { display: flex; flex-direction: column; line-height: 1.15; }
.ck-marque-nom { font-size: var(--fs-xl); font-weight: var(--fw-extra);
                 color: var(--color-text-strong); letter-spacing: -.02em; }
.ck-marque-sous { font-size: var(--fs-xs); font-weight: var(--fw-semibold);
                  color: var(--color-text-faint); text-transform: uppercase;
                  letter-spacing: .08em; }

.ck-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-2); }

.ck-nav-titre {
  padding: var(--space-4) var(--space-3) var(--space-1);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .08em;
}

.ck-nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--color-text-body); text-decoration: none;
  font-size: var(--fs-md);
  transition: background var(--t-fast) var(--easing);
}
.ck-nav-item:hover { background: var(--color-sidebar-hover-bg); }

.ck-nav-actif {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active-fg);
  font-weight: var(--fw-semibold);
}

/* Une entrée non construite : lisible, mais visiblement inerte. Un bouton mort
 * et muet se lit comme une panne — d'où le libellé « bientôt » à côté. */
.ck-nav-off { color: var(--color-text-faint); cursor: default; }
.ck-nav-off:hover { background: none; }

.ck-nav-ic { width: 1.1rem; text-align: center; flex: 0 0 auto; opacity: .8; }
.ck-nav-lb { flex: 1 1 auto; min-width: 0; }

.ck-nav-n {
  flex: 0 0 auto;
  background: var(--color-primary); color: var(--color-text-on-primary);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.ck-nav-bientot {
  flex: 0 0 auto; font-size: var(--fs-xs); color: var(--color-text-faint);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  padding: 0 var(--space-2);
}

.ck-rail-pied {
  margin: auto var(--space-4) 0; padding-top: var(--space-5);
  font-size: var(--fs-xs); color: var(--color-text-faint); line-height: 1.45;
}

/* ── La page ─────────────────────────────────────────────────────────────── */

.ck-page { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.ck-tete {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: var(--color-topbar-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Une base DECLAREE, et non celle du contenu : dans un conteneur qui replie,
 * les elements sont ranges d'apres leur base et ne se resserrent qu'ensuite.
 * Sans elle, la longueur du fil decidait a elle seule du repli de la barre. */
.ck-tete-titre { flex: 2 1 14rem; min-width: 0; }
.ck-fil {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .08em;
}
.ck-h1 { margin: 2px 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold);
         color: var(--color-text-strong); letter-spacing: -.02em; }

.ck-tete-mid { flex: 1 1 16rem; min-width: 0; max-width: 30rem; }
/* Le champ CÈDE, la liste garde sa largeur. Sans ces deux règles, chacun
 * prenait toute la zone et ils se posaient l'un SOUS l'autre — une barre de
 * deux rangées, c'est-à-dire la bande de trop qu'on venait de supprimer. */
.ck-tete-q { flex: 1 1 6rem; min-width: 5rem; }
/* `select.ck-tete-m` et non `.ck-tete-m` : il faut defaire le `width: 100%`
 * de `.ck-champ`, qui est ecrit PLUS BAS dans la feuille. A specificite egale
 * c'est l'ordre qui tranche, et cette regle-ci est en amont. L'element ajoute
 * lui donne un poids propre — elle l'emportera encore si la feuille est
 * reordonnee. Sans cela, la liste prend toute la zone et le champ de recherche
 * se reduit a un moignon. */
select.ck-tete-m { flex: 0 1 auto; width: auto; min-width: 6.5rem; }
.ck-tete-droite { display: flex; flex-wrap: wrap; gap: var(--space-3);
                  align-items: center; }
/* PLEINE LARGEUR, sans plafond. Un plafond de page (`max-width`) laissait un
 * tiers de l'écran vide à droite sur un portable large, pendant que les tables
 * à sept colonnes se comprimaient dans les deux tiers restants. Ce qui doit
 * rester borné, c'est le TEXTE COURANT — pas les tables ni les listes — et
 * cette borne est posée plus bas, sur les paragraphes eux-mêmes. */
.ck-corps { flex: 1 1 auto; padding: var(--space-6); width: 100%; min-width: 0; }

/* Deux cartes ou plus côte à côte, réservé aux contenus PARALLÈLES. Le seuil
 * est porté par `auto-fit` et non par une largeur d'écran : ce qui décide, c'est
 * la place restante après le rail. En dessous de deux colonnes tenables, la
 * grille repasse d'elle-même en une seule. */
/* `align-items: start` : chaque carte fait la hauteur de son contenu. Étirées à
 * la hauteur de la plus grande, celles qui n'ont rien à dire deviennent de
 * grandes boîtes vides — et « rien de pointé cette semaine » est le cas du lundi
 * matin, pas le cas rare. */
.ck-cols {
  display: grid; gap: var(--space-4);
  /* `min(…, 100%)` et non `24rem` seul : une piste `minmax(24rem, 1fr)` ne
   * descend jamais sous son minimum, MÊME QUAND LA PLACE MANQUE. Sur un
   * mobile de 360 px, le corps en offre 312 après ses marges — soit la valeur
   * exacte de 24rem. Un pixel de moins et la grille sortait de l'écran. */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  align-items: start;
  /* Contre l'ÉTIREMENT, pas contre le nombre : `auto-fit` replie les pistes
   * vides, donc deux cartes restent deux cartes sur un 27 pouces — mais de
   * 1100 px chacune. Le plafond ne mord qu'au-delà de ~1900 px de corps, donc
   * ni sur un portable ni sur un 1920. */
  max-width: 120rem;
  margin-bottom: var(--space-4);
}
.ck-cols > .ck-bloc { margin-bottom: 0; }

/* ── Cartes ──────────────────────────────────────────────────────────────── */

.ck-bloc {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  min-width: 0;
}

.ck-compte { margin: 0; color: var(--color-text-muted); font-size: var(--fs-base);
             font-variant-numeric: tabular-nums; }

.ck-st {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}

/* L'aide de groupe, en italique et discrète, comme dans la maquette : elle dit
 * ce qu'on fait dans ce groupe, pas ce qu'il contient. */
.ck-aide { font-size: var(--fs-sm); font-weight: var(--fw-regular);
           font-style: italic; color: var(--color-text-faint);
           max-width: 78ch; }

/* Le texte courant est borné en CARACTÈRES et non en pixels : une ligne de
 * cent-vingt caractères se lit mal quelle que soit la taille de l'écran, et
 * c'est la seule chose que la pleine largeur ne doit pas emporter. */
.ck-note { margin: var(--space-2) 0 0; color: var(--color-text-muted);
           font-size: var(--fs-base); max-width: 78ch; }
.ck-vide { margin: 0; color: var(--color-text-faint); font-size: var(--fs-base);
           max-width: 78ch; }

.ck-pastille {
  background: var(--color-chip-bg); color: var(--color-chip-fg);
  border-radius: var(--radius-full); padding: 1px var(--space-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.ck-replie { font-size: var(--fs-xs); font-weight: var(--fw-regular);
             color: var(--color-text-faint); }

/* ── Lignes ──────────────────────────────────────────────────────────────── */

.ck-liste { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
/* `overflow-wrap: anywhere` sur les porteurs de chaînes NON BORNÉES : un nom
 * de domaine, une adresse de courriel, un jeton `{{…}}`, une clé de procédure.
 * Aucun ne contient d'espace, donc aucun n'offre de point de césure : sans
 * cette règle, ils poussent leur conteneur au-delà de l'écran. C'est
 * `anywhere` et non `break-word`, parce que seul `anywhere` est pris en compte
 * dans le calcul du min-content — c'est-à-dire dans la décision de la grille
 * qui les contient. */
.ck-item { color: var(--color-text-muted); font-size: var(--fs-base);
           padding: 2px 0; max-width: 78ch; overflow-wrap: anywhere; }

.ck-ligne {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
}
.ck-ligne:first-child { border-top: 0; }

/* `min-width:0` plutôt qu'un `max-width` : un `max-width` sur un élément qui ne
 * peut pas se comprimer coupe le texte en plein mot, et ça se lit comme une
 * panne, pas comme un manque de place. */
.ck-ligne-txt { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
                align-items: baseline; min-width: 0; flex: 1 1 20rem; }

.ck-type { font-weight: var(--fw-semibold); color: var(--color-text-strong); }
.ck-detail { color: var(--color-text-muted); font-size: var(--fs-base);
             max-width: 78ch; overflow-wrap: anywhere; }
.ck-echeance { color: var(--color-text-faint); font-size: var(--fs-sm);
               font-variant-numeric: tabular-nums; }

.ck-lien { color: var(--color-primary); text-decoration: none;
           font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* Le nom d'un dossier : FONCE ET GRAS, pas magenta. Le magenta est la couleur
 * de ce qui alerte ; douze noms en couleur vive sur un ecran qui porte deja
 * des pastilles colorees, et le regard ne sait plus ou se poser. Il reste un
 * lien — le survol le dit — mais il ne reclame plus l'attention au repos. */
.ck-nom { color: var(--color-text-strong); font-weight: var(--fw-bold);
          text-decoration: none; overflow-wrap: anywhere; }
.ck-nom:hover { color: var(--color-primary); text-decoration: underline; }

/* Le domaine sous le nom, en chasse fixe : c'est une adresse, et une adresse
 * se lit caractere par caractere. */
.ck-dom { font-family: var(--font-mono); font-size: var(--fs-xs);
          color: var(--color-text-faint); }
.ck-lien:hover { text-decoration: underline; }

/* ── Commandes ───────────────────────────────────────────────────────────── */

.ck-action, .ck-btn {
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-4);
  cursor: pointer; flex: 0 0 auto; text-decoration: none;
  transition: filter var(--t-fast) var(--easing);
}
.ck-action { color: var(--color-text-on-primary); background: var(--color-primary);
             border: 1px solid var(--color-primary); }
.ck-action:hover { background: var(--color-primary-hover); }

.ck-btn { color: var(--color-text-body); background: var(--color-card-bg);
          border: 1px solid var(--color-border); }
.ck-btn:hover { background: var(--color-sidebar-hover-bg); }
/* Un bouton désactivé DOIT se voir. Sans cette règle, la flèche « monter » du
   premier de la liste a l'aspect d'une flèche qui marche : on la presse, rien
   ne se passe, et on la represse. */
.ck-btn:disabled, .ck-action:disabled {
  opacity: .38; cursor: not-allowed;
}
.ck-btn:disabled:hover { background: var(--color-card-bg); }

.ck-form { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
           align-items: flex-end; }
.ck-form-ligne { display: flex; flex-direction: column; gap: var(--space-1);
                 min-width: 0; }
/* `nowrap` : le champ et la liste des marques forment UN geste — chercher un
 * client dans une marque — et deux moities d'un geste ne se posent pas l'une
 * sous l'autre. Elles se resserrent. Seule la zone « Trouver » porte cette
 * classe ; un troisieme champ obligerait a reprendre ce reglage. */
.ck-recherche { display: flex; flex-wrap: nowrap; gap: var(--space-2);
                align-items: center; }

.ck-label { font-size: var(--fs-xs); color: var(--color-text-muted); }

.ck-champ {
  font: inherit; font-size: var(--fs-base);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-input-border);
  background: var(--color-input-bg); color: var(--color-text-body);
  min-width: 0; width: 100%;
}
.ck-champ:focus { outline: none; box-shadow: var(--shadow-focus);
                  border-color: var(--color-primary); }

.ck-erreur {
  margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg); border: 1px solid var(--color-danger);
  color: var(--color-text-strong); font-size: var(--fs-base);
}

/* ── Les trois tons d'une carte ──────────────────────────────────────────── */
/* Liste FERMÉE, reprise telle quelle dans `TONS` (templates/composants.html).
 * Les noms sont écrits en toutes lettres des deux côtés : un nom de classe
 * fabriqué par concaténation échapperait aux contrôles de gabarit, et une règle
 * devenue orpheline ne se voit jamais à l'œil. */

.ck-ton-alerte  { background: var(--color-danger-bg);  border-color: var(--color-danger); }
.ck-ton-reserve { background: var(--color-warning-bg); border-color: var(--color-warning); }
.ck-ton-sourd   { background: var(--color-bg-subtle); }

.ck-estime {
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  padding: 0 var(--space-2); font-size: var(--fs-xs);
  font-weight: var(--fw-regular); color: var(--color-text-faint);
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Définitions ─────────────────────────────────────────────────────────── */

/* `minmax(0, …)` sur LES DEUX pistes. Une piste `1fr` vaut `minmax(auto, 1fr)`,
 * et ce `auto` est le min-content du contenu : sur `/mon-compte`, la largeur
 * entière d'une adresse de courriel, qui ne contient aucune espace où se
 * couper. La carte débordait de l'écran, hors de tout défileur. */
.ck-grille { display: grid;
             grid-template-columns: minmax(0, auto) minmax(0, 1fr);
             gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0;
             font-size: var(--fs-base); }
.ck-dt { color: var(--color-text-muted); }
/* La borne de mesure de `.ck-note`, étendue au texte courant — c'est ce que
 * promet la note de `.ck-corps` : « ce qui doit rester borné, c'est le TEXTE
 * COURANT, pas les tables ni les listes ». Elle n'était tenue que sur deux
 * classes. Sur un 27 pouces, une ligne de 200 caractères ne se relit pas. */
.ck-dd { margin: 0; color: var(--color-text-body);
         max-width: 78ch; overflow-wrap: anywhere; }

/* ── Jauge et états ──────────────────────────────────────────────────────── */

/* `<progress>` et non un `<i>` dont la largeur serait posée en `style=`.
 *
 * La CSP de Cockpit dit `style-src 'self'` sans `unsafe-inline` — plus stricte
 * que celle de Mon Pilote, délibérément. Un attribut `style=` y est donc REFUSÉ,
 * et le navigateur le dit en console sans rien casser d'autre : la barre reprend
 * sa largeur naturelle, c'est-à-dire toute la gouttière. Chaque jauge affichait
 * donc 100 %, quel que soit le taux. Une jauge vide se serait vue ; une jauge
 * pleine se lit comme une bonne nouvelle.
 *
 * `value` et `max` sont des attributs de contenu, pas du style : ils passent. */
.ck-jauge {
  -webkit-appearance: none; appearance: none;
  display: inline-block; width: 4.5rem; height: 6px; vertical-align: middle;
  border: 0; border-radius: var(--radius-full); overflow: hidden;
  background: var(--color-chip-bg); margin-right: var(--space-2);
}
.ck-jauge::-webkit-progress-bar { background: var(--color-chip-bg); }
.ck-jauge::-webkit-progress-value { background: var(--color-primary); }
.ck-jauge::-moz-progress-bar { background: var(--color-primary); }

.ck-etat {
  display: inline-block; padding: 1px var(--space-2);
  border-radius: var(--radius-full); font-size: var(--fs-xs);
  white-space: nowrap;
  background: var(--color-chip-bg); color: var(--color-chip-fg);
  border: 1px solid var(--color-border);
}
/* La couleur passe par `data-etat` et non par une classe : les états sont une
 * liste fermée côté Python, et ajouter un état ne doit pas obliger à inventer
 * une classe qu'on oubliera de déclarer. */
.ck-etat[data-etat="hors_forfait"],
.ck-etat[data-etat="critique"],
.ck-etat[data-etat="depasse"] { background: var(--color-danger-bg);
                                border-color: var(--color-danger); }
.ck-etat[data-etat="tendu"],
.ck-etat[data-etat="en_attente"],
.ck-etat[data-etat="en_retard"],
/* `a_planifier` et `a_dater` désignent la MÊME chose sur deux écrans — la
 * vue datée dit l'un, l'écran Formations dit l'autre, qui est le mot de
 * Marine. Les deux sont déclarés ici plutôt que traduits ailleurs : une table
 * de traduction avait fait sortir « planifiée » jaune d'un côté et bleue de
 * l'autre. */
.ck-etat[data-etat="a_planifier"],
.ck-etat[data-etat="a_dater"],
.ck-etat[data-etat="a_surveiller"],
.ck-etat[data-etat="proposee"] { background: var(--color-warning-bg);
                                 border-color: var(--color-warning); }
/* Les cinq natures du planning. Elles ne disent pas un état de santé mais une
 * NATURE — ce n'est pas la même échelle, d'où des teintes de marque et non le
 * vert/jaune/rouge des états. Une bascule n'est pas « mauvaise » parce qu'elle
 * approche. */
.ck-etat[data-etat="bascule"]    { background: var(--hex-pink);
                                   color: var(--color-text-on-primary); }
.ck-etat[data-etat="seance"]     { background: var(--hex-green);
                                   color: var(--color-text-on-primary); }
.ck-etat[data-etat="etape"]      { background: var(--hex-blue);
                                   color: var(--color-text-on-primary); }
.ck-etat[data-etat="prestation"] { background: var(--hex-violet);
                                   color: var(--color-text-on-primary); }
.ck-etat[data-etat="cloture"]    { background: var(--color-chip-bg);
                                   color: var(--color-text-muted); }

.ck-etat[data-etat="sain"],
.ck-etat[data-etat="validee"],
.ck-etat[data-etat="faite"],
.ck-etat[data-etat="confirmee"],
.ck-etat[data-etat="tenue"],
.ck-etat[data-etat="dans_les_temps"],
.ck-etat[data-etat="close"] { background: var(--color-success-bg);
                              border-color: var(--color-success); }

/* Les états de la fiche client. « Survenu » et « ouvert » suivent l'échelle de
 * gravité ; « sans objet » ne la suit PAS — ce n'est pas un bon état, c'est
 * l'absence d'objet, et le peindre en vert le ferait lire comme une réussite. */
.ck-etat[data-etat="survenu"] { background: var(--color-danger-bg);
                                border-color: var(--color-danger); }
.ck-etat[data-etat="ouvert"]  { background: var(--color-warning-bg);
                                border-color: var(--color-warning); }
.ck-etat[data-etat="ecarte"]  { background: var(--color-bg-subtle);
                                color: var(--color-text-faint); }
/* Gris DÉCLARÉ, ce qui n'est pas un gris par défaut : ces trois-là n'ont aucune
 * gravité à dire. « Sans objet » est l'absence d'objet — le peindre en vert le
 * ferait lire comme une réussite ; un rôle n'est ni bon ni mauvais ; « sans
 * échéance » ne veut pas dire « tranquille ». La règle existe pour que le gris
 * soit un choix, et non le silence de la feuille. */
.ck-etat[data-etat="sans_objet"],
.ck-etat[data-etat="neutre"]  { background: var(--color-chip-bg);
                                color: var(--color-text-muted); }

/* Le statut de déploiement, et d'où il vient. « Déduit » et « posé à la main »
 * ne disent pas un état du dossier mais une PROVENANCE : ils restent sourds,
 * pour ne pas concurrencer la pastille d'à côté qui, elle, dit quelque chose. */
.ck-etat[data-etat="en_cours"],
.ck-etat[data-etat="planifiee"],
.ck-etat[data-etat="ouverte"] { background: var(--color-info-bg);
                                 border-color: var(--color-info); }
.ck-etat[data-etat="livre"]    { background: var(--color-success-bg);
                                 border-color: var(--color-success); }
.ck-etat[data-etat="termine"]  { background: var(--color-chip-bg);
                                 color: var(--color-text-muted); }
.ck-etat[data-etat="deduit"],
.ck-etat[data-etat="pose"]     { background: transparent;
                                 color: var(--color-text-faint);
                                 border-style: dashed; }

/* La marque du dossier, et les traits d'une étape. Teintes de marque, pas de
 * gravité : « externalisable » n'est ni bon ni mauvais. */
.ck-etat[data-etat="marque"] { background: var(--color-primary-soft);
                               color: var(--color-primary);
                               border-color: var(--color-primary); }
.ck-etat[data-etat="haute"]   { background: var(--color-warning-bg);
                                border-color: var(--color-warning); }
.ck-etat[data-etat="normale"],
.ck-etat[data-etat="basse"]   { background: var(--color-chip-bg);
                                color: var(--color-text-muted); }

/* ── Table ───────────────────────────────────────────────────────────────── */

.ck-tableau { width: 100%; overflow-x: auto; }
.ck-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2); }

/* ── La table à colonnes contraintes ──────────────────────────────────────
 * Rangs 3 et 4 du retour de Marine, et son plus fort rendement : « à hauteur
 * d'écran égale, la maquette affiche neuf clients, la préprod deux et demi ».
 *
 * `table-layout: fixed` fait tenir les largeurs déclarées au lieu de laisser le
 * navigateur répartir selon le contenu. Sans lui, une cellule bavarde vole la
 * place des huit autres — et c'est le contenu le moins important qui gagne,
 * celui qui est long.
 *
 * L'échelle est FERMÉE : six valeurs, pas une de plus. Un gabarit qui écrirait
 * `data-l="7"` n'obtiendrait aucune largeur, et le défaut se verrait au premier
 * regard au lieu de se fondre dans une répartition approximative. C'est la même
 * règle que `data-etat` ou `data-sev`.
 *
 * En `data-l` et non en `style=` : la politique de sécurité refuse
 * `unsafe-inline`, et un contrôle interdit tout `style=` dans un gabarit. */
.ck-table-fixe { table-layout: fixed; }
.ck-table-fixe col[data-l="7"]  { width: 7%; }
.ck-table-fixe col[data-l="8"]  { width: 8%; }
.ck-table-fixe col[data-l="9"]  { width: 9%; }
.ck-table-fixe col[data-l="11"] { width: 11%; }
.ck-table-fixe col[data-l="10"] { width: 10%; }
.ck-table-fixe col[data-l="12"] { width: 12%; }
.ck-table-fixe col[data-l="14"] { width: 14%; }
.ck-table-fixe col[data-l="19"] { width: 19%; }
.ck-table-fixe col[data-l="20"] { width: 20%; }

/* UNE PASTILLE NE SE COUPE JAMAIS. Coupée en deux lignes, ce n'est plus une
 * pastille : c'est une bulle déformée. Et comme la hauteur d'une rangée est
 * celle de sa cellule la plus haute, une seule pastille repliée triplait toute
 * la rangée — d'où neuf clients devenus deux et demi. */
.ck-table-fixe .ck-sante,
.ck-table-fixe .ck-phase,
.ck-table-fixe .ck-bsc,
.ck-table-fixe .ck-hf,
.ck-table-fixe .ck-etat,
.ck-table-fixe .ck-mq,
.ck-table-fixe .ck-cn { white-space: nowrap; }

/* La sous-ligne grise — la raison d'une santé, la date d'une bascule, le reste
 * à dater. Une ligne, et ce qui dépasse s'efface plutôt que de replier la
 * cellule. Le texte entier reste dans le `title`. */
.ck-table-fixe .ck-td > .ck-faible {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Le nom du client garde le droit de se couper : c'est la colonne large, et un
 * nom de collectivité tronqué ne se reconnaît plus. */
.ck-table-fixe .ck-td > .ck-lien { white-space: normal; }
/* Petites capitales espacees, en gris : sans elles, l'en-tete et le contenu
 * se ressemblent, et la table perd sa structure au premier regard. */
/* `overflow-wrap` et non une largeur bien choisie : en `table-layout: fixed`,
 * un en-tete trop large ne pousse pas sa colonne, IL SORT DE LA CELLULE et se
 * superpose a la voisine — « PRESTATIONSBASCULE ». Une largeur juste cesse de
 * l'etre au premier libelle rallonge ; le filet, non. */
.ck-th { text-align: left; font-size: var(--fs-xs); font-weight: var(--fw-bold);
         overflow-wrap: anywhere;
         text-transform: uppercase; letter-spacing: .05em;
         color: var(--color-text-muted); padding: var(--space-2) var(--space-3) var(--space-2) 0;
         border-bottom: 1px solid var(--color-border); }
.ck-td { padding: var(--space-2) var(--space-3) var(--space-2) 0;
         font-size: var(--fs-base); font-variant-numeric: tabular-nums;
         border-bottom: 1px solid var(--color-divider); }
.ck-euro { font-weight: var(--fw-bold); color: var(--color-text-strong); }
.ck-faible { color: var(--color-text-faint); }

/* ── Onglets internes (fiche client, échelles d'une vue datée) ───────────── */

.ck-onglets { display: flex; flex-wrap: wrap; gap: var(--space-1);
              margin-bottom: var(--space-4);
              border-bottom: 1px solid var(--color-border); }
.ck-onglet {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--color-text-muted); text-decoration: none; font-size: var(--fs-base);
  border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px;
}
.ck-onglet:hover { color: var(--color-text-strong); }
.ck-actif { color: var(--color-text-strong); font-weight: var(--fw-semibold);
            background: var(--color-card-bg); border-color: var(--color-border); }

/* ── Les surfaces externes : même charte, pas de rail ────────────────────── */
/* Ni le client ni le formateur n'ont d'écran voisin. Un menu dont toutes les
 * entrées sont interdites n'est pas une navigation, c'est une porte fermée
 * qu'on montre. Le corps est donc borné : sans rail, la pleine largeur d'un
 * écran de bureau donnerait des lignes de deux cents caractères. */

.ck-seul .ck-corps { max-width: 76rem; margin: 0 auto; }
.ck-seul .ck-tete { justify-content: space-between; }

.ck-pied {
  margin-top: auto; padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-divider);
  color: var(--color-text-faint); font-size: var(--fs-sm);
  max-width: 76rem; width: 100%; align-self: center;
}

/* Le résultat de la dernière action. En tête et non en pied : posé sous le
 * contenu, il passe sous la ligne de flottaison et l'écran a l'air de n'avoir
 * rien fait — on reclique, et on réserve deux fois. */
.ck-avis {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-success-bg); border: 1px solid var(--color-success);
  color: var(--color-text-strong); font-size: var(--fs-base);
}

/* Un bouton = un formulaire, parce que chaque horaire est une écriture
 * distincte. Sans cette règle, chaque `<form>` prend sa ligne et une plage de
 * six horaires occupe six lignes de tableau. */
.ck-enligne { display: inline-block; margin: 0 var(--space-2) var(--space-2) 0; }

/* ── Étroit : le rail passe en bandeau ─────────────────────────────────────
 *
 * LES BORNES SONT EN PIXELS, ET C'EST DÉLIBÉRÉ. `tokens.css` pose
 * `html { font-size: 13px }`, donc `1rem` vaut 13 px dans les règles de cette
 * feuille. Mais PAS dans une media query : une media query se résout sur la
 * taille initiale du navigateur, 16 px, quoi que porte `html`.
 *
 * `@media (max-width: 60rem)` ne basculait donc pas à 780 px, comme la règle
 * voisine `flex: 0 0 15rem` le laissait lire, mais à 960 px. Deux échelles
 * dans le même fichier, et rien pour le dire. Les bornes portent maintenant
 * leur valeur réelle, et un contrôle refuse qu'on en écrive une en `rem`. */

@media (max-width: 960px) {
  body { flex-direction: column; }
  .ck-rail { flex: 0 0 auto; min-height: 0; width: 100%;
             border-right: 0; border-bottom: 1px solid var(--color-border); }
  /* UNE SEULE RANGÉE QUI DÉFILE, et non un pavé qui se replie. En
   * `flex-wrap: wrap`, les onze entrées et leurs deux titres formaient sept
   * rangées, soit près de 300 px de bandeau à repousser au doigt AVANT
   * d'atteindre le contenu, sur chaque page. La navigation reste entière :
   * elle défile au lieu de s'empiler. */
  .ck-nav { flex-direction: row; flex-wrap: nowrap;
            overflow-x: auto; overscroll-behavior-x: contain; }
  .ck-nav-item { flex: 0 0 auto; }
  .ck-nav-titre { display: none; }
  /* Le pied du rail n'est PAS masqué : il porte la seule explication de ce que
   * veulent dire « réservé » et « bientôt », mentions qui, elles, restaient
   * affichées. Garder l'étiquette et jeter sa légende est pire que les deux. */
  .ck-rail-pied { padding: 0 var(--space-4) var(--space-2); margin: 0;
                  font-size: var(--fs-xs); }
}


/* ── Mobile : le palier qui manquait ──────────────────────────────────────
 * La feuille s'arrêtait à 736 px. Entre 736 et 360, plus rien ne bougeait :
 * 48 px des 360 partaient en marges de corps, et la file gardait sa colonne
 * d'actions à côté d'un texte réduit à une centaine de pixels. */

@media (max-width: 480px) {
  .ck-corps { padding: var(--space-4); }
  .ck-tete { padding: var(--space-3) var(--space-4); }
  /* Le titre et la zone « Trouver » cessent de se partager une ligne : sous
   * 480, la liste des marques y tombait a sa largeur plancher et affichait
   * « Toutes ma ». Une liste tronquee ment sur ce qu'elle contient. */
  .ck-tete-titre, .ck-tete-mid { flex: 1 1 100%; max-width: none; }
  select.ck-tete-m { min-width: 0; }
  .ck-grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ck-dt { margin-top: var(--space-2); }
  /* La file passe en deux temps : le texte prend la ligne, l'action passe
   * dessous. Côte à côte, il restait ~110 px au texte. */
  .ck-q { grid-template-columns: 3px minmax(0, 1fr); }
  .ck-q-act { grid-column: 2; }
}


/* ── La file de travail de l'accueil ──────────────────────────────────────
 * Reprise des mesures de la maquette (`.q*`) : mêmes tailles, mêmes espacements,
 * mêmes couleurs — la charte de Mon Pilote et celle de la maquette sont le même
 * fichier, aux mêmes hexcodes près.
 *
 * La file DÉBORDE de la carte : ses lignes vont d'un bord à l'autre, alors que
 * la carte porte 20 px de padding. D'où les marges négatives, et le rognage des
 * coins en bas — sans lui, la dernière ligne carrerait les angles arrondis de
 * la carte.
 */

.ck-file {
  list-style: none; padding: 0;
  margin: var(--space-3) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}

/* Le bandeau de tête : « 1 en retard · 1 aujourd'hui · 5 sous 7 jours ». */
.ck-file-resume { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5);
                  margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted); }
.ck-file-ri { display: inline-flex; align-items: center; gap: 5px; }
.ck-file-pt { display: inline-block; width: 7px; height: 7px; flex: none;
              border-radius: var(--radius-full);
              background: var(--color-border-strong); }
.ck-file-pt[data-sev="urgent"] { background: var(--hex-pink); }
.ck-file-pt[data-sev="du"]     { background: var(--hex-yellow); }
.ck-file-pt[data-sev="proche"] { background: var(--hex-blue); }

/* ── Un groupe ─────────────────────────────────────────────────────────── */

.ck-file-g { list-style: none; border-bottom: 1px solid var(--color-divider); }
.ck-file-g:last-of-type { border-bottom: none; }
.ck-file-d { display: block; }

.ck-file-gh {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-subtle); cursor: pointer;
  list-style: none;
}
.ck-file-gh::-webkit-details-marker { display: none; }
.ck-file-gh:hover { background: var(--color-chip-bg); }

/* Le chevron est en TÊTE et non en queue, et il TOURNE au lieu de changer de
 * glyphe : un mouvement se remarque là où une substitution de caractère passe
 * inaperçue. Rejeté à l'extrême droite en gris pâle, rien n'annonçait que
 * l'en-tête se pliait. */
.ck-file-gx {
  color: var(--color-text-muted); font-size: var(--fs-sm); flex: none; width: 14px;
  display: grid; place-items: center;
  transform: rotate(0deg); transition: transform var(--t-fast) var(--easing);
}
.ck-file-d[open] .ck-file-gx { transform: rotate(90deg); }
.ck-file-gh:hover .ck-file-gx { color: var(--color-text-strong); }

/* Le ton du groupe est posé UNE fois, sur la ligne, et DEUX éléments le lisent
 * — le filet de bord gauche et la pastille ronde du total. La couleur vivait
 * auparavant dans cinq règles attachées au filet ; la pastille en aurait exigé
 * cinq de plus, donc dix endroits pour une seule idée, et une divergence le
 * jour où l'une des dix changerait.
 *
 * La maquette peignait ces teintes en style en ligne. Ici elles passent par
 * `data-groupe`, une règle par valeur : la politique de sécurité refuse
 * `unsafe-inline`, et une valeur inventée ne donne AUCUNE couleur plutôt
 * qu'une couleur approchée. */
.ck-file-gh[data-groupe="a_ecrire"]   { --ck-ton-groupe: var(--hex-blue);
                                        --ck-sur-ton-groupe: var(--color-text-on-primary); }
.ck-file-gh[data-groupe="a_lire"]     { --ck-ton-groupe: var(--hex-violet);
                                        --ck-sur-ton-groupe: var(--color-text-on-primary); }
.ck-file-gh[data-groupe="a_faire"]    { --ck-ton-groupe: var(--hex-green);
                                        --ck-sur-ton-groupe: var(--color-text-on-primary); }
/* Le jaune ne porte PAS de blanc : c'est la seule des cinq assez claire pour
 * que le chiffre s'y efface. Violet sur jaune est la paire déjà employée par
 * la pastille d'initiales. */
.ck-file-gh[data-groupe="a_trancher"] { --ck-ton-groupe: var(--hex-yellow);
                                        --ck-sur-ton-groupe: var(--hex-violet); }
.ck-file-gh[data-groupe="on_vous_attend"] { --ck-ton-groupe: var(--hex-pink);
                                        --ck-sur-ton-groupe: var(--color-text-on-primary); }

/* Le filet de couleur en bord gauche du groupe. */
.ck-file-gp { width: 8px; height: 22px; border-radius: 3px; flex: none;
              background: var(--ck-ton-groupe, var(--color-border-strong)); }

.ck-file-gt { font-size: var(--fs-md); color: var(--color-text-strong);
              letter-spacing: -.01em; }
.ck-file-ga { font-size: var(--fs-xs); color: var(--color-text-faint);
              font-style: italic; }
.ck-file-gn { margin-left: auto; font-size: var(--fs-sm);
              color: var(--color-text-muted); white-space: nowrap;
              display: inline-flex; align-items: center; gap: var(--space-2);
              font-variant-numeric: tabular-nums; }
/* ── Les trois compteurs de groupe (rang 19) ─────────────────────────────
 * Trois natures, trois poids. Le total est un repère qu'on lit toujours, les
 * urgentes un signal qu'on remarque, le différé une précision qu'on cherche.
 * Rendus à l'identique, les trois se lisent comme une seule ligne de chiffres
 * et il faut les déchiffrer. */
.ck-fg-n {
  display: inline-grid; place-items: center; flex: none;
  min-width: 1.7rem; height: 1.7rem; padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--ck-ton-groupe, var(--color-border-strong));
  color: var(--ck-sur-ton-groupe, var(--color-text-on-primary));
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.ck-fg-u {
  flex: none; padding: 1px var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-primary-soft); color: var(--color-primary);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .05em;
}
.ck-fg-t { flex: none; font-size: var(--fs-xs); color: var(--color-text-faint); }
.ck-file-gl { list-style: none; margin: 0; padding: 0; }

/* ── Une ligne ─────────────────────────────────────────────────────────── */

/* Le texte ne prend que la mesure qu'il lui faut : avec `1fr`, il poussait le
 * bouton au bord de l'écran et creusait un gouffre entre l'intitulé et l'action
 * à mener. */
.ck-q {
  display: grid; grid-template-columns: 3px minmax(0, 660px) auto;
  gap: 0 var(--space-5); align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.ck-q:last-child { border-bottom: 0; }

.ck-q-bar { align-self: stretch; border-radius: var(--radius-full);
            background: var(--color-border-strong); }
.ck-q[data-sev="urgent"] .ck-q-bar { background: var(--hex-pink); }
.ck-q[data-sev="du"]     .ck-q-bar { background: var(--hex-yellow); }
.ck-q[data-sev="proche"] .ck-q-bar { background: var(--hex-blue); }

.ck-q-txt { min-width: 0; }

.ck-q-why { font-size: var(--fs-xs); font-weight: var(--fw-bold);
            text-transform: uppercase; letter-spacing: .06em;
            color: var(--color-text-muted); margin: 0 0 3px; }
.ck-q[data-sev="urgent"] .ck-q-why { color: var(--hex-pink); }
.ck-q[data-sev="du"]     .ck-q-why { color: var(--hex-yellow-deep); }

.ck-q-ech { font-weight: var(--fw-extra); color: var(--hex-blue-deep);
            text-transform: none; letter-spacing: 0; }
.ck-q-late { color: var(--hex-pink); }

.ck-q-titre { font-size: var(--fs-md); font-weight: var(--fw-bold);
              color: var(--color-text-strong); letter-spacing: -.01em; margin: 0; }
.ck-q-meta { font-size: var(--fs-sm); color: var(--color-text-muted);
             margin: 3px 0 0; }

.ck-q-act { display: flex; gap: var(--space-2); align-items: center;
            flex-wrap: wrap; }

/* La pastille d'initiales de la barre supérieure. Couleur de marque et non
 * couleur de carte : c'est le seul repère « c'est moi » de l'écran, et il doit
 * se retrouver du coin de l'œil. */
.ck-avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--hex-yellow); color: var(--hex-violet);
  font-size: var(--fs-sm); font-weight: var(--fw-extra); letter-spacing: .02em;
}

/* ── La barre de filtres de la file ───────────────────────────────────────
 * Elle ne filtre RIEN par défaut : la file s'ouvre entière et le filtre est un
 * geste volontaire. C'est ce qui reste de la note de cadrage — « filtrer exige
 * une décision avant de commencer à travailler » — une fois la barre adoptée.
 */

.ck-filtres {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  /* La marge BASSE manquait, et c'est le même défaut sur cinq écrans : les
   * chiffres du tableau de bord collés à « Cette semaine », le « 0 daté » du
   * planning collé à « Mon portefeuille », « Rien ne correspond à ce filtre »
   * collé à « Mes clients ». Une barre de filtres se termine ; ce qui suit
   * commence ailleurs. Corrigé ICI, une fois, pour les cinq. */
  margin: var(--space-3) 0 var(--space-5);
}

/* `.ck-champ` vaut `width: 100%` — juste dans un formulaire empilé, faux ici :
 * les quatre contrôles se mettaient chacun sur sa ligne, et la barre prenait
 * quatre fois la hauteur qu'elle devait. Dans la barre, chacun prend la mesure
 * de son contenu, et seule la recherche s'étire. */
.ck-filtres .ck-champ { width: auto; flex: 0 1 auto; }
.ck-filtres .ck-filtre-q { flex: 1 1 14rem; min-width: 0; }
.ck-filtre-go { flex: 0 0 auto; }

/* La pastille « Urgent » : un raccourci vers « En retard », et un interrupteur.
 * Elle porte son compte, parce qu'un filtre dont on ignore le rendement se
 * clique une fois puis plus jamais. */
.ck-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-text-body); background: var(--color-card-bg);
  text-decoration: none; flex: 0 0 auto;
}
.ck-chip:hover { background: var(--color-sidebar-hover-bg); }
.ck-chip-actif { color: var(--color-text-on-primary); background: var(--color-primary);
                 border-color: var(--color-primary); }
.ck-chip-actif:hover { background: var(--color-primary-hover); }
.ck-chip-n { font-variant-numeric: tabular-nums; font-weight: var(--fw-extra); }

/* La sévérité d'une ligne de notification, en toutes lettres. Même échelle de
 * couleur que la barre de gauche de la file (`data-sev`) : deux endroits qui
 * montrent la même chose la montrent de la même façon. `flex:0 0 auto` et
 * `nowrap` parce qu'elle est la colonne de droite d'une ligne — elle ne doit
 * ni s'étirer ni se couper, c'est le texte qui cède. */
.ck-sev {
  display: inline-block; flex: 0 0 auto; white-space: nowrap;
  padding: 2px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--color-border); color: var(--color-text-muted);
  background: var(--color-bg-subtle);
}
.ck-sev[data-sev="urgent"] { border-color: var(--hex-pink);
                             color: var(--hex-pink); }
.ck-sev[data-sev="du"]     { border-color: var(--hex-yellow);
                             color: var(--hex-yellow-deep); }
.ck-sev[data-sev="proche"] { border-color: var(--hex-blue);
                             color: var(--hex-blue-deep); }

/* L'action à droite du titre de carte — « Tout replier ». Elle se pousse au
 * bout de la ligne plutôt que de suivre le titre : collée au titre, on la lit
 * comme une partie du titre. */
.ck-st-act { margin-left: auto; font-size: var(--fs-sm);
             font-weight: var(--fw-semibold); color: var(--color-primary);
             text-decoration: none; }
.ck-st-act:hover { text-decoration: underline; }

/* ── La case à cocher ─────────────────────────────────────────────────────
 * C'est un bouton et non une `<input>` : voir le composant `case()`. Il est
 * donc remis à plat — un `<button>` arrive avec un fond, une bordure et une
 * police qui ne sont pas les nôtres.
 */

.ck-case-f { display: block; margin: 0; }

.ck-case {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; padding: var(--space-2) 0;
  font: inherit; font-size: var(--fs-base); text-align: left;
  color: var(--color-text-body); background: none; border: 0; cursor: pointer;
}
.ck-case:hover .ck-case-m { border-color: var(--color-primary); }
.ck-case:focus-visible { outline: none; box-shadow: var(--shadow-focus);
                         border-radius: var(--radius-sm); }

/* La marque. Carrée et non ronde : un rond se lit « un seul choix parmi
 * plusieurs », et ces points se cochent indépendamment les uns des autres. */
.ck-case-m {
  display: grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-input-bg);
  font-size: var(--fs-sm); font-weight: var(--fw-extra); line-height: 1;
  color: var(--color-text-on-primary);
}
.ck-case-fait .ck-case-m { background: var(--color-success);
                           border-color: var(--color-success); }
.ck-case-l { min-width: 0; }
.ck-case-fait .ck-case-l { color: var(--color-text-strong);
                           font-weight: var(--fw-semibold); }

/* Le champ de date posé DANS une cellule de tableau. Il ne prend pas la largeur
 * de la colonne : `.ck-champ` vaut 100 %, ce qui étirerait une date sur toute
 * la cellule et pousserait le bouton à la ligne. */
.ck-champ-date { width: auto; flex: 0 0 auto; }


/* ── L'administration ────────────────────────────────────────────────────────
   Une liste à gauche, ce qu'on édite à droite. Le point de bascule est porté
   par la grille et non par une largeur d'écran : ce qui compte est la place
   restante après le rail. */
.ck-adm {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-4);
}
@media (max-width: 960px) { .ck-adm { grid-template-columns: 1fr; } }

/* La colonne de droite est UN conteneur qui empile ses cartes. Une exception
   au `:last-child` ne suffisait pas : les cartes du milieu retombaient dans la
   grille, une sur deux à gauche, et l'écran se lisait en zigzag. */
.ck-adm-p { display: flex; flex-direction: column; gap: var(--space-4);
            min-width: 0; }

.ck-adm-l {
  max-height: 34rem;
  overflow-y: auto;
  margin: 0 calc(-1 * var(--space-2));
}
.ck-adm-e {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}
.ck-adm-e:hover { background: var(--color-bg-subtle); }
.ck-adm-e[data-on="1"] { background: var(--color-primary-soft); }
.ck-adm-n {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-strong);
}
.ck-adm-m {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* La palette de variables. Ce ne sont pas des boutons : on les lit et on les
   recopie. Le curseur d'aide dit qu'il y a quelque chose à survoler. */
/* L'élément de liste ne porte plus la pastille : il la CONTIENT. Sans lui,
 * `user-select: all` sur un `<li>` de la palette prendrait aussi les puces
 * voisines au double-clic. */
.ck-jeton-i { display: inline-flex; }
.ck-jetons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Une pastille de jeton n'est PAS un bouton, et cesse d'y ressembler (§4.3).
 * `cursor: text` plutôt que `help` : le curseur dit ce qu'on peut faire, et ce
 * qu'on peut faire ici est sélectionner.
 *
 * `user-select: all` est tout le mécanisme : un double-clic prend le jeton
 * ENTIER, accolades comprises, au lieu de s'arrêter au premier souligné. C'est
 * l'effet visible que la recette demande, sans une ligne de script — et c'est
 * ce qui rendait la recopie risquée qui disparaît : la faute de frappe. */
.ck-jeton {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--color-bg-subtle);
  color: var(--hex-blue-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  cursor: text;
  user-select: all;
  -webkit-user-select: all;
}
/* Le libellé qui accompagne le jeton dans la table : lui reste sélectionnable
 * mot à mot, sinon un double-clic dessus prendrait la phrase entière. */
.ck-jeton-l { user-select: text; -webkit-user-select: text; }

/* Le champ multiligne. Redimensionnable : on ne connaît pas la longueur du
   texte qu'on écrira dedans. */
.ck-zone {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.55;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-card-bg);
  color: var(--color-text-body);
  resize: vertical;
}
.ck-zone:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* `.ck-champ` vaut 100 % de large : dans une ligne de formulaire c'est ce qu'il
   faut, dans une barre en ligne cela empile les champs les uns sous les autres.
   Même correction que pour la barre de filtres. */
.ck-enligne .ck-champ,
.ck-motif { width: auto; flex: 0 1 auto; min-width: 12rem; }
.ck-cellule { width: 100%; min-width: 9rem; }

/* Le champ et son unité, insécables. `inline-flex` plutôt qu'un simple
 * `nowrap` : le champ garde sa largeur propre et l'unité se pose à côté, sans
 * dépendre d'une espace dans le balisage — une espace, ça se supprime en
 * reformatant un gabarit, et personne ne relie ensuite le « 60 min » cassé au
 * coup de peigne qui l'a cassé. */
.ck-avec-u { display: inline-flex; align-items: center; gap: var(--space-1);
             white-space: nowrap; }
.ck-u { color: var(--color-text-muted); font-size: var(--fs-sm); }
.ck-minutes { width: 5.5rem; }

/* Le formulaire d'une ligne de tableau vit HORS de la table et se retrouve par
   l'attribut `form`. Un `<form>` autour d'un `<tr>` est déplacé par le
   navigateur, en silence. */
.ck-cache { display: none; }

/* Le compte porté par un onglet. Même dessin que `.ck-pastille`, mais posé sur
   un fond qui change avec l'onglet actif : il hérite donc sa couleur du lien
   plutôt que de la fixer. */
.ck-onglet-n {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

/* Une ligne de formulaire qui prend la rangée entière. `ck-form` dimensionne
   chaque champ sur son contenu, et un `<textarea>` mesure vingt caractères de
   large par défaut : il faut le lui dire, elle ne le devine pas. */
.ck-plein { flex: 1 0 100%; }

/* Un `<input>` dans une cellule de tableau ne communique aucune largeur
   intrinsèque : la colonne se réduit à ce que les voisines lui laissent, et le
   libellé se coupe au milieu d'un mot. */
/* 22rem valaient 286 px, imposés à une colonne parmi huit : c'est ce qui
 * poussait `admin_catalogue` et `admin_checklist` hors du champ dès 1280 px. */
.ck-cellule-l { min-width: 16rem; }

/* ── Le seuil ────────────────────────────────────────────────────────────────
   La colonne étroite et centrée a laissé place, le 26/08/2026, à une page en
   deux panneaux calquée sur celle de Mon Pilote : ses règles vivent désormais
   dans `connexion.css`, avec le gabarit qu'elles habillent.

   Les deux règles qui étaient ici (`.ck-seuil`, `.ck-form-seuil`) sont parties
   avec lui. Les garder « au cas où » aurait fait deux règles que plus aucun
   gabarit ne porte — et le contrôle `test_toute_regle_a_un_porteur` est là
   précisément pour que cela ne passe pas inaperçu. */

/* La pastille d'initiales est devenue un lien vers son propre compte. */
a.ck-avatar { text-decoration: none; }


/* ── Le segment : deux périmètres exclusifs ───────────────────────────────
 * « Mes clients » ou « Tout le parc ». Deux liens dans une même gouttière, un
 * seul actif. Le trait autour du groupe est ce qui dit « ces deux-là forment un
 * choix » — sans lui, ce sont deux boutons qui se ressemblent par hasard. */
.ck-seg {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  /* Le fond du GROUPE est appuye, celui de l'entree active est clair : c'est
   * l'inverse de ce qu'on ecrit d'instinct, et c'est ce qui rend le selecteur
   * discret. Il sert une fois par session — il ne doit pas etre l'element le
   * plus visible de l'ecran. */
  padding: 2px; background: var(--color-bg-subtle);
}
.ck-seg-b {
  border: 0; background: none; font-family: inherit; cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-text-muted); text-decoration: none; white-space: nowrap;
}
.ck-seg-b:hover { color: var(--color-text-strong); }
.ck-seg-on { color: var(--color-text-strong); background: var(--color-card-bg); }
.ck-seg-on:hover { color: var(--color-text-strong); }
/* Un simple point de couleur, et non un aplat : l'entree active se reconnait
 * sans que le groupe entier attire l'oeil. */
.ck-seg-on::before {
  content: "\25CF"; color: var(--color-primary);
  font-size: .62em; vertical-align: middle;
  margin-right: var(--space-2);
}

/* ── Le dépôt du client ───────────────────────────────────────────────────
 * Le bloc `.ret` de la maquette. Un dépôt NON LU porte un trait de couleur à
 * gauche et un fond légèrement appuyé : lu et non lu doivent se distinguer
 * d'un coup d'œil depuis l'autre bout de la pièce, pas en lisant le bouton. */
.ck-ret {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  background: var(--color-card-bg);
}
.ck-ret-neuf {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-subtle);
}

.ck-ret-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}
/* La pastille de nature. La maquette posait `style="background:${N.coul}"` ;
 * la CSP le refuse, d'où `data-nature` et une règle par valeur. Une nature
 * inconnue n'aurait pas de règle : la pastille resterait transparente et se
 * verrait, au lieu de reprendre discrètement la couleur d'une voisine. */
.ck-ret-p {
  width: 10px; height: 10px; border-radius: var(--radius-full);
  flex: 0 0 auto;
}
.ck-ret-p[data-nature="ouverture"] { background: var(--hex-blue); }
.ck-ret-p[data-nature="sso"]        { background: var(--hex-violet); }
.ck-ret-p[data-nature="bascule"]    { background: var(--hex-pink); }
.ck-ret-p[data-nature="formation"]  { background: var(--hex-green); }
.ck-ret-p[data-nature="message"]    { background: var(--hex-orange); }

.ck-ret-t { font-size: var(--fs-md); color: var(--color-text-strong);
            font-weight: var(--fw-bold); }
.ck-ret-n { font-size: var(--fs-sm); color: var(--color-text-muted); }
/* Le bouton se pousse au bout de la ligne : collé au titre, il se lit comme
 * une partie du titre — même raison que l'action de carte. */
.ck-ret-f { margin-left: auto; flex: 0 0 auto; }

/* La ligne que l'écran glisse sous l'en-tête : le client sur la boîte, rien
 * sur la fiche du client lui-même. */
.ck-ret-c { margin: var(--space-2) 0 0; font-size: var(--fs-sm);
            color: var(--color-text-muted); }
.ck-ret-tard { color: var(--color-danger); font-weight: var(--fw-semibold); }
.ck-ret-lu { margin: var(--space-2) 0 0; font-size: var(--fs-xs);
             color: var(--color-text-faint); }

/* Les champs du dépôt, en deux colonnes tant que la place le permet. Le
 * libellé ne se coupe pas (`min-content` sur la première colonne) et la valeur
 * respecte les retours à la ligne du client : un contexte de formation écrit en
 * trois paragraphes ne doit pas arriver en un seul bloc. */
.ck-ret-d {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
}
.ck-ret-dt { font-size: var(--fs-sm); color: var(--color-text-muted); }
.ck-ret-dd { font-size: var(--fs-sm); color: var(--color-text-body);
             margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Sous une certaine largeur, deux colonnes dont l'une porte quinze lignes de
 * texte donnent une colonne de libellés perdue en haut à gauche. */
@media (max-width: 736px) {
  .ck-ret-d { grid-template-columns: 1fr; gap: 0; }
  .ck-ret-dt { margin-top: var(--space-2); }
}


/* ── Les mesures : la rangée de chiffres du pilotage ──────────────────────
 * `auto-fit` et non un nombre de colonnes : trois mesures sur un écran large
 * s'étalent, quatre sur un écran étroit se replient, et rien à décider. */
.ck-mesures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-3);
  max-width: 120rem;
  margin-bottom: var(--space-4);
}

.ck-mes {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: var(--color-card-bg);
  display: flex; flex-direction: column; gap: 2px;
}
/* Le trait de gauche porte l'alerte. Un fond coloré sur toute la carte se lit
 * de trop loin et donne un écran qui crie ; un trait se voit sans dominer. */
.ck-mes-alerte    { border-left: 3px solid var(--color-danger); }
.ck-mes-attention { border-left: 3px solid var(--color-warning); }
.ck-mes-calme     { border-left: 3px solid var(--color-success); }

.ck-mes-t { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted);
            font-weight: var(--fw-semibold); }
.ck-mes-v { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-extra);
            color: var(--color-text-strong); font-variant-numeric: tabular-nums;
            line-height: 1.1; }
/* La valeur secondaire reste dans la ligne de la première, en petit : posée
 * en dessous, elle se lit comme une seconde mesure. */
.ck-mes-2 { font-size: var(--fs-sm); font-weight: var(--fw-regular);
            color: var(--color-text-muted); margin-left: var(--space-2); }
.ck-mes-s { margin: 0; font-size: var(--fs-sm); color: var(--color-text-muted);
            max-width: 78ch; }
.ck-mes-alerte .ck-mes-v    { color: var(--color-danger); }
.ck-mes-attention .ck-mes-v { color: var(--color-warning); }

/* ── La courbe de tendance ────────────────────────────────────────────────
 * Un SVG étiré sur la largeur de sa carte. `vector-effect` garde le trait à un
 * pixel malgré l'étirement : sans lui, `preserveAspectRatio="none"` déforme
 * aussi l'épaisseur, et la courbe s'épaissit à mesure que la carte s'élargit. */
.ck-courbe {
  width: 100%; height: 28px; margin-top: var(--space-2);
  overflow: visible;
}
.ck-courbe polyline {
  fill: none; stroke: var(--color-primary); stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ck-mes-alerte .ck-courbe polyline    { stroke: var(--color-danger); }
.ck-mes-attention .ck-courbe polyline { stroke: var(--color-warning); }

/* ── Le journal administratif ─────────────────────────────────────────────
 * Trois gestes, trois teintes, sur la même mécanique `data-etat` que le reste :
 * la liste est fermée côté Python, et ajouter un geste ne doit pas obliger à
 * inventer une classe qu'on oubliera de déclarer.
 *
 * Un retrait n'est pas une alerte — il n'y a rien à réparer, quelqu'un a décidé.
 * Il porte donc la teinte sourde et non le rouge, qui appellerait une action qui
 * n'existe pas. */
.ck-etat[data-etat="creation"]     { background: var(--color-success-bg);
                                     border-color: var(--color-success); }
.ck-etat[data-etat="modification"] { background: var(--color-info-bg,
                                                     var(--color-chip-bg));
                                     border-color: var(--color-border); }
.ck-etat[data-etat="retrait"]      { background: var(--color-chip-bg);
                                     color: var(--color-text-muted); }

/* Un horodatage ne se coupe pas en deux lignes : « 25/08/2026 » au-dessus de
 * « à 14:32 » se relit deux fois avant d'être compris. */
.ck-nowrap { white-space: nowrap; }

/* L'avant et l'après d'une colonne. En liste de définitions parce que c'en est
 * une : un nom, une valeur. La flèche est dans le gabarit et non en `::before`,
 * pour qu'un copier-coller du journal emporte le sens avec le texte. */
.ck-diff { margin: 0; display: grid; grid-template-columns: auto 1fr;
           gap: 0 var(--space-2); align-items: baseline; }
.ck-diff-nom { font-size: var(--fs-xs); color: var(--color-text-muted); }
.ck-diff-val { margin: 0; font-size: var(--fs-sm); }
/* Barré ET grisé : la couleur seule ne se voit pas en impression, ni pour qui
 * distingue mal le rouge du gris — et un journal se relit souvent sur papier. */
.ck-diff-avant { text-decoration: line-through;
                 color: var(--color-text-muted); }
.ck-diff-apres { font-weight: var(--fw-medium, 500); }


/* ══════════════════════════════════════════════════════════════════════════
   L'ECRAN CLIENTS — les neuf colonnes (retour Marine §2.3)
   Chaque pastille rend un ETAT DEDUIT. Aucune couleur en dur : la charte les
   porte, et l'onglet « A quoi ca ressemble » le verifie.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Les filtres, cote a cote et sans validation ─────────────────────────── */
/* Le conteneur vient du composant `filtres()`. Ce qui suit n'habille que le
   formulaire pose DEDANS : trois filtres cote a cote, sans validation. */
.ck-cl-form {
  display: flex; flex-wrap: wrap; align-items: end;
  gap: var(--space-2) var(--space-3); width: 100%;
}
.ck-cl-form .ck-label { margin: 0 0 var(--space-1); display: block; }
.ck-cl-form .ck-champ { min-width: 11rem; }
.ck-cl-form #q { flex: 1 1 14rem; }

/* ── La pastille de marque ────────────────────────────────────────────────
 * Elle s'appelait `.ck-marque`, comme le bloc du logo dans le rail — deux
 * blocs du même nom, à mille lignes l'un de l'autre, et c'est le second qui
 * gagnait. Le logo héritait de `display:inline-block`, perdait sa marge basse,
 * et « Cockpit » chevauchait « Interstis ».
 *
 * Une collision de sélecteurs ne lève rien : ni erreur de rendu, ni contrôle
 * rouge. Elle se voit à l'œil, sur un seul écran, longtemps après. Le nom est
 * donc distinct, ET un contrôle interdit désormais de reposer un sélecteur
 * déjà posé (tests/test_gabarits.py). */
.ck-mq {
  display: inline-block; padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  border: 1px solid var(--color-border-strong); color: var(--color-text-muted);
  white-space: nowrap;
}
.ck-mq[data-marque="hexagone"] {
  border-color: var(--hex-violet); color: var(--hex-violet-deep);
}
.ck-mq[data-marque="resana"] {
  border-color: var(--hex-blue); color: var(--hex-blue-deep);
}

/* ── Le conseiller : pastille d'initiales + prenom ───────────────────────── */
.ck-cn { display: inline-flex; align-items: center; gap: var(--space-2); }
.ck-cn-ini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full);
  background: var(--color-primary-soft); color: var(--color-primary);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
/* « Non affecte » sur fond neutre avec un point d'interrogation : c'est une
   affectation A FAIRE, pas une donnee absente. */
.ck-cn-sans { color: var(--color-text-muted); }
.ck-cn-sans .ck-cn-ini {
  background: var(--color-chip-bg); color: var(--color-text-faint);
}

/* ── La phase ────────────────────────────────────────────────────────────── */
.ck-phase {
  display: inline-block; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); background: var(--color-chip-bg);
  color: var(--color-chip-fg); font-size: var(--fs-xs);
}

/* ── L'avancement : le nombre en gros, le litteral en dessous ────────────── */
.ck-av-n { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.1; }

/* ── La sante : trois etats, et le motif en attribut title ───────────────── */
.ck-sante {
  display: inline-block; padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  border: 1px solid currentColor;
}
.ck-sante[data-sante="dans_les_temps"] { color: var(--color-success); }
.ck-sante[data-sante="a_surveiller"]   { color: var(--color-warning); }
.ck-sante[data-sante="critique"]       { color: var(--color-danger); }

/* ── La charge : la barre change de couleur au-dela de 100 % ─────────────── */
.ck-charge { display: flex; align-items: center; gap: var(--space-2); }
.ck-charge .ck-jauge { flex: 0 1 6rem; }
.ck-charge[data-depasse="1"] .ck-jauge::-webkit-progress-value {
  background: var(--color-danger);
}
.ck-charge[data-depasse="1"] .ck-jauge::-moz-progress-bar {
  background: var(--color-danger);
}
.ck-charge[data-depasse="1"] { color: var(--color-danger); font-weight: var(--fw-semibold); }

/* Du temps pointe, rien de vendu. Ce n'est PAS un pourcentage — invariant
   n 2 du retour : « un lot pointe sans rien de vendu a un etat a lui ». */
.ck-hf {
  display: inline-block; padding: 0 var(--space-2);
  border-radius: var(--radius-full); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-warning); border: 1px solid currentColor;
}

/* ── La bascule ──────────────────────────────────────────────────────────── */
.ck-bsc { font-size: var(--fs-sm); }
.ck-bsc[data-bsc="aucun_creneau"] { color: var(--color-text-muted); }
.ck-bsc[data-bsc="a_confirmer"]   { color: var(--color-warning); font-weight: var(--fw-medium); }
.ck-bsc[data-bsc="faite"]         { color: var(--color-success); }
.ck-bsc[data-bsc="sans_objet"]    { color: var(--color-text-faint); }

/* ── Presentation « Chantiers » ──────────────────────────────────────────── */
/* `auto-fit` et non `auto-fill` : c'était la seule grille de la feuille à
 * employer `auto-fill`, qui GARDE les pistes vides. Trois chantiers sur un
 * écran large tenaient donc dans le tiers gauche, avec cinq colonnes vides à
 * droite — au lieu de s'étaler. */
.ck-chantiers {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  max-width: 120rem;
}
.ck-ch {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: var(--radius-lg); padding: var(--space-3);
  background: var(--color-card-bg);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.ck-ch[data-sante="a_surveiller"] { border-left-color: var(--color-warning); }
.ck-ch[data-sante="critique"]     { border-left-color: var(--color-danger); }
.ck-ch[data-sante="dans_les_temps"] { border-left-color: var(--color-success); }
.ck-ch-t { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ck-ch-p { font-size: var(--fs-sm); }
.ck-ch-m { margin: var(--space-1) 0 0; padding-left: var(--space-4);
           font-size: var(--fs-xs); color: var(--color-text-muted); }
.ck-ch-f { margin-top: var(--space-2); }

/* ── Presentation « Tableau » : ou ca coince, par etat ───────────────────── */
/* Pas de plafond ici : un tableau par état est fait pour prendre la largeur
 * disponible, c'est même à quoi il sert. */
.ck-board {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.ck-bd-col {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-3); background: var(--color-bg-subtle);
  border-top: 3px solid var(--color-border-strong);
}
.ck-bd-col[data-sante="dans_les_temps"] { border-top-color: var(--color-success); }
.ck-bd-col[data-sante="a_surveiller"]   { border-top-color: var(--color-warning); }
.ck-bd-col[data-sante="critique"]       { border-top-color: var(--color-danger); }
.ck-bd-t {
  margin: 0 0 var(--space-2); font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: flex; align-items: center; justify-content: space-between;
}
/* Le compte d'une colonne. Ce n'est PAS `ck-chip-n` : celle-la appartient a
   `chip()`, qui est un lien, et une colonne de tableau n'en est pas un. */
.ck-bd-n {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  background: var(--color-chip-bg); border-radius: var(--radius-full);
  padding: 0 var(--space-2);
}
.ck-bd-c {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-2); margin-bottom: var(--space-2);
  background: var(--color-card-bg);
}
.ck-bd-vide { margin: 0; font-style: italic; }

/* ── Ce que l'ecran Economie ne peut pas encore montrer ──────────────────── */
.ck-manque-t { font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.ck-manque { margin: var(--space-2) 0; padding-left: var(--space-5); }
.ck-manque li { margin-bottom: var(--space-1); }

/* ── La fiche client ─────────────────────────────────────────────────────── */

.ck-fc { margin-bottom: var(--space-3); }
.ck-fc-nom {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
}
.ck-fc-id { margin: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Un jeton cité dans une phrase — `{{prenom_contact}}`. En chasse fixe parce
 * qu'il se RECOPIE : une police proportionnelle rend `l` et `1` indistincts, et
 * c'est exactement la faute de frappe que le contrôle des jetons refuse. */
.ck-code {
  overflow-wrap: anywhere;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  background: var(--color-bg-subtle); border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}

/* ── La progression par phases ───────────────────────────────────────────── */
/* Une bande de segments, l'accompli derrière, le courant en avant. `flex: 1`
 * partout : les cinq phases occupent la largeur à parts égales, et le tableau
 * ne se déforme pas quand un libellé est plus long qu'un autre. */
.ck-prog {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
}
.ck-prog-s {
  flex: 1 1 8rem; min-width: 0;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  /* La barre d'état est un bord épais EN HAUT, pas un fond coloré : un fond
   * plein sur cinq segments écrase le texte qu'ils portent. */
  border-top: 3px solid var(--color-border-strong);
}
.ck-prog-s[data-prog="faite"]    { border-top-color: var(--color-success); }
.ck-prog-s[data-prog="courante"] { border-top-color: var(--hex-pink);
                                   background: var(--color-card-bg); }
.ck-prog-s[data-prog="a_venir"]  { border-top-color: var(--color-border); }
.ck-prog-l {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--color-text-strong);
}
.ck-prog-n { display: block; font-size: var(--fs-xs); color: var(--color-text-muted); }
.ck-prog-a { margin: var(--space-2) 0 0; font-size: var(--fs-xs);
             color: var(--color-text-muted); }

/* ── Le Gantt en tableau ─────────────────────────────────────────────────── */
/* La barre est un `<span>` à largeur pleine dans sa cellule, et sa hauteur vient
 * de la règle — pas d'un `style=` calculé, que la CSP refuse. Les quatre formes
 * — seule, début, milieu, fin — arrondissent le bon côté, ce qui rend l'étendue
 * lisible sans qu'aucune bordure ne soit dessinée. */
.ck-gt-p { font-weight: var(--fw-semibold); white-space: nowrap; }
.ck-gt-c { padding: var(--space-1) 0; min-width: 3.5rem; }
.ck-gt-b { display: block; height: 0.75rem; }
.ck-gt-c[data-gt="vide"] .ck-gt-b { background: transparent; }
.ck-gt-c[data-gt="en_cours"] .ck-gt-b { background: var(--hex-blue); }
.ck-gt-c[data-gt="debut"] .ck-gt-b {
  background: var(--hex-blue);
  border-radius: var(--radius-full) 0 0 var(--radius-full);
  margin-left: var(--space-1);
}
.ck-gt-c[data-gt="fin"] .ck-gt-b {
  background: var(--hex-blue);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  margin-right: var(--space-1);
}
.ck-gt-c[data-gt="seule"] .ck-gt-b {
  background: var(--hex-blue); border-radius: var(--radius-full);
  margin: 0 var(--space-1);
}

/* ── La barre supérieure (§5) ────────────────────────────────────────────── */

/* Le cadrage par marque : trois liens collés, celui qui est actif en relief.
 * Des LIENS et non des boutons — chaque cadrage a son URL, donc se partage, se
 * recharge et se défait avec « précédent ». */
/* La cloche. Son compte est celui des dépôts NON OUVERTS : le seul chiffre de
 * la barre qui compte des faits — quelqu'un a écrit, personne n'a répondu — et
 * non des calculs. Absent quand il vaut zéro : une pastille à « 0 » attire
 * l'œil pour rien. */
.ck-cloche { display: inline-flex; align-items: center; position: relative;
             padding: var(--space-2); }
.ck-cloche-ic { display: block; width: 1.15rem; height: 1.15rem; }
/* La pastille se POSE SUR l'icône au lieu de la suivre : à côté, elle rallonge
 * la barre de sa propre largeur, et c'est précisément la place qu'on venait de
 * gagner en retirant le mot « Notifications ». */
.ck-cloche-n {
  position: absolute; top: 1px; right: 0;
  background: var(--hex-pink); color: var(--color-text-on-primary);
  border-radius: var(--radius-full); font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); padding: 0 var(--space-1); min-width: 1.2em;
  line-height: 1.35; text-align: center;
}

/* Le bandeau d'emprunt d'identite. Il n'a PAS de bouton « fermer » : un emprunt
 * qu'on oublie devient une serie de gestes attribues a quelqu'un d'autre, et le
 * seul moyen de le faire disparaitre est d'y mettre fin.
 *
 * Le fond soutenu est deliberé : ce bandeau doit gener un peu. */
.ck-emprunt {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4); padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-warning-bg);
  border: 2px solid var(--color-warning);
}
.ck-emprunt-t { margin: 0; flex: 1 1 20rem; min-width: 0;
                color: var(--color-text-strong); }

/* ── La barre « DANS CET ONGLET » (§4.2) ─────────────────────────────────── */
/* `scroll-margin-top` sur la cible d'ancre : sans elle, descendre a une section
 * la colle au bord haut de la fenetre et son titre passe sous la barre
 * superieure. Le defaut ne se voit qu'a l'usage, jamais en relisant le code. */
.ck-som {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
}
.ck-som-t {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-muted);
}
.ck-som-l {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  list-style: none; margin: 0; padding: 0;
}
.ck-som-i { display: inline-flex; }
.ck-som-a {
  font-size: var(--fs-sm); color: var(--color-primary); text-decoration: none;
}
.ck-som-a:hover { text-decoration: underline; }
.ck-som-n { color: var(--color-text-muted); font-size: var(--fs-xs); }
.ck-ancre { display: block; scroll-margin-top: var(--space-6); }

/* Ce qu'une procedure accroche aujourd'hui (§4.4). `<details>` natif : la ligne
 * se deplie sans script, se navigue au clavier et s'annonce seule. Un panneau
 * JavaScript disparaitrait avec lui, et cette colonne est celle qui sert a
 * reperer une procedure qui ment. */
.ck-acc { display: inline-block; }
.ck-acc-s {
  cursor: pointer; font-size: var(--fs-sm); color: var(--color-primary);
}
.ck-acc-l {
  list-style: none; margin: var(--space-1) 0 0; padding: 0;
  max-width: 28rem;
}
.ck-acc-i {
  font-size: var(--fs-xs); color: var(--color-text-muted);
  padding: 2px 0;
}


/* ── La barre du haut, en trois zones (§24.1) ─────────────────────────────
 * « Tout tient à droite du titre, sur la ligne du titre, en trois groupes
 * séparés par un filet. » Les commandes étaient descendues sous le titre, sept
 * boutons de même poids sur toute la largeur : une bande de plus avant le
 * contenu, et plus rien qui ressorte.
 *
 * Un SEUL élément est coloré — le `+`. C'est ce qui donne à la barre un point
 * d'entrée au lieu d'une rangée. */
/* `ck-tete-zone` et non `ck-zone` : ce dernier appartient depuis toujours
 * a la zone de saisie longue du macro `zone()`. Deux regles nues de meme
 * specificite, et la derniere ecrit l'emporte sans que rien ne le dise. */
.ck-tete-zone { display: inline-flex; align-items: center; gap: var(--space-2); }
.ck-tete-sep {
  flex: 0 0 auto; width: 1px; align-self: stretch; min-height: 1.75rem;
  background: var(--color-border);
}

/* Le menu déroulant : `<details>` natif, donc clavier et Échap sans script. */
.ck-menu { position: relative; }
.ck-menu > summary { list-style: none; cursor: pointer; }
.ck-menu > summary::-webkit-details-marker { display: none; }
.ck-pop {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 40;
  min-width: 15.5rem; padding: var(--space-2);
  background: var(--color-card-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.ck-pop-tt {
  display: block; padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-faint);
}
.ck-pop-e {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: 0;
  border-radius: var(--radius-sm); background: none; font: inherit;
  text-align: left; cursor: pointer; text-decoration: none;
  color: var(--color-text-body);
}
.ck-pop-e:hover { background: var(--color-sidebar-hover-bg); }
.ck-pop-k {
  margin-left: auto; padding: 1px var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-text-faint);
}
.ck-pop-n {
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs); color: var(--color-text-faint); max-width: 20rem;
}

/* Le `+` : plein, en couleur de marque, et seul de son espèce dans la barre. */
.ck-plus {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  background: var(--color-primary); color: var(--color-text-on-primary);
}
.ck-plus:hover { filter: brightness(1.08); }
.ck-plus-ic { display: block; width: 1.05rem; height: 1.05rem; }


/* ── Le sélecteur de colonnes (§6) ─────────────────────────────────────────
   Dix-huit cases en colonnes automatiques : à dix-huit entrées, une liste
   verticale ferait défiler la page entière pour cocher la dernière.

   `<details>` natif et non un panneau à écouteur — il s'ouvre au clavier, se
   ferme à Échap, et survit à la panne du script. */
.ck-selcol { position: relative; display: inline-block;
             margin-bottom: var(--space-3); }
.ck-selcol > summary { cursor: pointer; list-style: none;
                       display: inline-flex; align-items: center;
                       gap: var(--space-2); }
.ck-selcol > summary::-webkit-details-marker { display: none; }
.ck-selcol-n { color: var(--color-text-muted); font-size: var(--fs-xs);
               font-variant-numeric: tabular-nums; }
.ck-selcol-f { margin-top: var(--space-3); }
.ck-selcol-l { list-style: none; margin: 0 0 var(--space-3); padding: 0;
               columns: 3 14rem; column-gap: var(--space-5); }
.ck-selcol-i { break-inside: avoid; margin-bottom: var(--space-2); }
.ck-selcol-e { display: flex; align-items: center; gap: var(--space-2);
               font-size: var(--fs-sm); cursor: pointer; }

/* L'intitulé d'une barre de filtres — « Trier par », « Marque ». Il n'est pas
   un filtre : il dit ce que les pastilles à côté de lui règlent. Sans lui, une
   rangée de noms de colonnes ressemble à un second jeu de filtres. */
.ck-f-l { flex: 0 0 auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
          color: var(--color-text-muted); text-transform: uppercase;
          letter-spacing: .04em; }


/* ── Le Coup d'œil, en panneau (§6) ────────────────────────────────────────
   Superposé à droite plutôt que posé au-dessus de la liste : une carte au-
   dessus pousse les lignes vers le bas, et regarder un dossier fait perdre de
   vue celui d'à côté — exactement ce qu'un coup d'œil doit éviter.

   `position: fixed` et non `sticky` : la liste défile dessous, le panneau
   reste. `100dvh` et non `100vh` — sur mobile, `vh` compte la barre d'adresse
   du navigateur, et le bas du panneau passe sous elle. */
.ck-apercu {
  position: fixed; top: 0; right: 0; z-index: 40;
  width: min(24rem, 92vw); height: 100dvh; overflow-y: auto;
  background: var(--color-card-bg);
  border-left: 1px solid var(--color-border);
  box-shadow: -12px 0 32px -16px rgb(0 0 0 / .35);
  padding: var(--space-5);
}
.ck-apercu-tete { display: flex; align-items: flex-start;
                  justify-content: space-between; gap: var(--space-3);
                  margin-bottom: var(--space-4); }
.ck-apercu-nom { margin: 0; font-size: var(--fs-lg);
                 font-weight: var(--fw-bold); line-height: 1.3; }
.ck-apercu-f { display: flex; gap: var(--space-2); align-items: center;
               margin-bottom: var(--space-4); }
.ck-apercu-f .ck-champ { flex: 1 1 auto; min-width: 0; }
.ck-apercu-corps > * + * { margin-top: var(--space-4); }

/* Le corps de page RÉSERVE la place du panneau plutôt que de passer dessous.
   Sans cela, le panneau recouvre les dernières colonnes : on peut les
   retrouver en faisant défiler le tableau, mais un coup d'œil qui oblige à
   faire défiler ce qu'il cachait n'est plus un coup d'œil. */
.ck-corps[data-apercu="1"] { padding-right: min(24rem, 92vw); }

/* Le tableau garde une largeur LISIBLE et défile dans sa propre gouttière
   plutôt que de se comprimer. Neuf colonnes dans ce qui reste coupaient les
   en-têtes en deux — « MARQU / E » — et faisaient se chevaucher les cellules.
   Un tableau illisible est pire qu'un tableau qui défile : on croit lire, et
   on lit faux. C'est `.ck-tableau` qui porte le défilement, jamais la page. */
.ck-corps[data-apercu="1"] .ck-table-fixe { min-width: 1200px; }

/* Sous 60rem, le panneau cesse d'être un panneau : superposé, il couvrirait
   la liste entière, et « la liste est toujours dessous » deviendrait faux. Il
   reprend alors sa place dans le flux, en haut de l'écran. */
@media (max-width: 960px) {
  .ck-apercu { position: static; width: auto; height: auto;
               border-left: 0; border-bottom: 1px solid var(--color-border);
               box-shadow: none; margin-bottom: var(--space-4); }
  /* Le panneau est revenu dans le flux : il n'y a plus de place à réserver, et
     la garder amputerait la page de moitié sur un téléphone. */
  .ck-corps[data-apercu="1"] { padding-right: 0; }
}