/* ConsoLab, socle visuel de la version 12.
   Feuille locale, sans dépendance externe. Chargée après style.css pendant la transition : toutes les classes du socle
   commencent par « cl- » et ne rencontrent aucune classe de l'ancienne feuille. */

:root {
  /* encres et fonds */
  --cl-encre: #17202a;
  --cl-encre-2: #45515e;
  --cl-gris: #66717d;
  --cl-trait: #dde2e8;
  --cl-trait-fort: #bcc4cd;
  --cl-fond: #f3f5f7;
  --cl-fond-2: #f8f9fb;
  --cl-papier: #ffffff;
  /* accent unique */
  --cl-accent: #1f4f7a;
  --cl-accent-fonce: #163a5a;
  --cl-accent-pale: #e8eef5;
  --cl-focus: #6d9cc8;
  /* états sémantiques : toujours avec un pictogramme et un libellé, jamais la couleur seule */
  --cl-bloquant: #a3262a;
  --cl-bloquant-pale: #fbeaea;
  --cl-bloquant-bord: #e8b9b9;
  --cl-alerte: #855100;
  --cl-alerte-pale: #fdf3dc;
  --cl-alerte-bord: #ecd29a;
  --cl-conforme: #1d6b45;
  --cl-conforme-pale: #e4f2ea;
  --cl-conforme-bord: #b6d9c4;
  --cl-neutre-pale: #edf0f3;
  /* marqueurs d'espace : retraitements de l'entité et retraitements du siège */
  --cl-entite: #2b6b61;
  --cl-entite-pale: #e6f1ee;
  --cl-siege: #4a4590;
  --cl-siege-pale: #eeedf7;
  /* mesures */
  --cl-bandeau-h: 46px;
  --cl-contexte-h: 42px;
  --cl-menu-l: 244px;
  --cl-rayon: 4px;
  --cl-rayon-carte: 6px;
  --cl-police: "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --cl-police-code: Consolas, "Cascadia Mono", "Courier New", monospace;
  --cl-ombre: 0 1px 2px rgba(23, 32, 42, .06);
  --cl-ombre-haute: 0 8px 28px rgba(23, 32, 42, .18);
}

/* ------------------------------------------------------------------ base */
.cl-page, .cl-page * { box-sizing: border-box; }
html:has(.cl-page) { font-size: 14px; }
body.cl-page {
  margin: 0; font-family: var(--cl-police); color: var(--cl-encre); background: var(--cl-fond); line-height: 1.45;
  font-variant-numeric: lining-nums;
}
.cl-page a { color: var(--cl-accent); text-decoration: none; }
.cl-page a:hover { text-decoration: underline; }
.cl-page :focus-visible { outline: 2px solid var(--cl-focus); outline-offset: 2px; }
/* titres et paragraphes : sans poids (:where) pour que les écrans non encore repris gardent les marges de style.css ;
   les composants du socle fixent les leurs */
:where(.cl-page h1) { font-size: 1.43rem; font-weight: 600; margin: 0; letter-spacing: -.01em; line-height: 1.25; }
:where(.cl-page h2) { font-size: 1.07rem; font-weight: 600; margin: 0 0 .6rem; }
:where(.cl-page h3) { font-size: 1rem; font-weight: 600; margin: 0 0 .4rem; }
:where(.cl-page p) { margin: 0 0 .6rem; }
.cl-entete h1 { margin: 0; font-size: 1.43rem; line-height: 1.25; }
.cl-carte h2, .cl-repli-corps h2, .cl-tiroir-corps h2 { margin: 0 0 .6rem; }
.cl-carte * + h2, .cl-repli-corps * + h2, .cl-tiroir-corps * + h2 { margin-top: 1.2rem; }
.cl-carte h3, .cl-repli-corps h3, .cl-tiroir-corps h3 { margin: 0 0 .4rem; }
.cl-carte * + h3, .cl-repli-corps * + h3, .cl-tiroir-corps * + h3 { margin-top: 1rem; }
.cl-discret { color: var(--cl-gris); }
.cl-petit { font-size: .89rem; }
.cl-code { font-family: var(--cl-police-code); font-size: .93em; }
.cl-n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-page [hidden] { display: none !important; }
.cl-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-evitement { position: absolute; left: -999px; top: 0; z-index: 50; background: #fff; padding: .4rem .8rem; }
.cl-evitement:focus { left: .5rem; top: .5rem; }

/* ------------------------------------------------------------------ cadre : bandeau, barre de contexte, menu, contenu */
.cl-bandeau {
  position: sticky; top: 0; z-index: 30; height: var(--cl-bandeau-h); display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem 0 0; background: #15212d; color: #dbe3ec;
}
.cl-bandeau .cl-produit {
  flex: 0 0 var(--cl-menu-l); padding-left: 1.1rem; font-weight: 700; font-size: 1.07rem; color: #fff; letter-spacing: .02em;
}
.cl-bandeau .cl-produit:hover { text-decoration: none; }
.cl-bandeau .cl-groupe { flex: 1 1 auto; min-width: 0; font-size: .93rem; color: #c3cfdb; line-height: 1.2; }
.cl-bandeau .cl-groupe strong { color: #fff; font-weight: 600; }
.cl-bandeau .cl-qui { text-align: right; line-height: 1.15; white-space: nowrap; color: #dbe3ec; }
.cl-bandeau .cl-qui small { display: block; color: #9fb0c2; font-size: .8rem; }
.cl-bandeau .cl-bouton-bandeau {
  background: none; border: 1px solid #36495c; color: #dbe3ec; padding: .28rem .65rem; border-radius: var(--cl-rayon);
  font: inherit; cursor: pointer; white-space: nowrap;
}
.cl-bandeau .cl-bouton-bandeau:hover { background: #22323f; }

.cl-contexte {
  position: sticky; top: var(--cl-bandeau-h); z-index: 29; min-height: var(--cl-contexte-h); display: flex; align-items: center;
  flex-wrap: wrap; gap: .3rem 1.1rem; padding: .25rem 1.6rem;
  background: var(--cl-papier); border-bottom: 1px solid var(--cl-trait); font-size: .93rem;
}
.cl-contexte form { display: contents; }
.cl-contexte .cl-selecteur { display: inline-flex; align-items: center; gap: .4rem; }
.cl-contexte label { color: var(--cl-gris); font-size: .86rem; }
.cl-contexte select {
  font: inherit; border: 1px solid var(--cl-trait-fort); border-radius: var(--cl-rayon); background: #fff; color: var(--cl-encre);
  padding: .2rem 1.6rem .2rem .45rem; min-width: 0; max-width: 17rem; width: auto;
}
.cl-contexte .cl-fixe { font-weight: 600; }
.cl-contexte .cl-espace-libre { flex: 1 1 auto; }
/* choix du groupe dans le bandeau (admin entré dans un groupe) */
.cl-bandeau .cl-choix-groupe { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.cl-bandeau .cl-choix-groupe select {
  font: inherit; font-size: .93rem; font-weight: 600; background: #223244; color: #fff; border: 1px solid #36495c;
  border-radius: var(--cl-rayon); padding: .22rem 1.6rem .22rem .5rem; width: auto; max-width: 100%; min-width: 0;
}

.cl-cadre { display: grid; grid-template-columns: var(--cl-menu-l) minmax(0, 1fr); min-height: calc(100vh - var(--cl-bandeau-h));
  /* fond du menu prolongé sur toute la hauteur de la page */
  background: linear-gradient(to right, var(--cl-papier) 0 calc(var(--cl-menu-l) - 1px), var(--cl-trait) calc(var(--cl-menu-l) - 1px) var(--cl-menu-l), transparent var(--cl-menu-l)); }
.cl-colonne { min-width: 0; display: flex; flex-direction: column; }
.cl-contenu { min-width: 0; padding: 1.1rem 1.6rem 3rem; max-width: 1360px; }

/* ------------------------------------------------------------------ menu par étapes */
.cl-menu {
  position: sticky; top: var(--cl-bandeau-h); align-self: start;
  height: calc(100vh - var(--cl-bandeau-h)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--cl-papier); border-right: 1px solid var(--cl-trait); padding: .5rem 0 1.5rem; scrollbar-width: thin;
}
.cl-menu a { color: var(--cl-encre-2); }
.cl-menu a:hover { text-decoration: none; background: var(--cl-fond); }
.cl-menu .cl-menu-accueil {
  display: flex; align-items: center; gap: .55rem; padding: .5rem 1rem; font-weight: 600; color: var(--cl-encre);
  border-left: 3px solid transparent;
}
.cl-menu .cl-menu-titre { font-size: .78rem; color: var(--cl-gris); padding: .8rem 1rem .25rem; letter-spacing: .02em; }
.cl-menu details { margin: 0; }
.cl-menu summary {
  display: flex; align-items: center; gap: .55rem; padding: .34rem .9rem .34rem 1rem; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--cl-encre); border-left: 3px solid transparent; user-select: none; line-height: 1.25;
}
.cl-menu summary::-webkit-details-marker { display: none; }
.cl-menu summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: .4rem; height: .4rem; border-right: 1.5px solid var(--cl-gris);
  border-bottom: 1.5px solid var(--cl-gris); transform: rotate(-45deg); transition: transform .15s ease;
}
.cl-menu details[open] > summary::after { transform: rotate(45deg); }
.cl-menu summary:hover { background: var(--cl-fond); }
.cl-menu ul { list-style: none; margin: 0 0 .3rem; padding: 0 0 0 1.95rem; }
.cl-menu ul a { display: block; padding: .24rem .8rem .24rem .7rem; font-size: .93rem; line-height: 1.3; border-left: 2px solid var(--cl-trait); }
.cl-menu a[aria-current="page"] { color: var(--cl-accent-fonce); font-weight: 600; background: var(--cl-accent-pale); border-left-color: var(--cl-accent); }
.cl-menu .cl-menu-accueil[aria-current="page"] { border-left-color: var(--cl-accent); }
.cl-menu details.cl-courante > summary { color: var(--cl-accent-fonce); }
.cl-menu .cl-separateur { border-top: 1px solid var(--cl-trait); margin: .6rem 1rem; }
.cl-menu .cl-menu-bas a { display: block; padding: .24rem 1rem; font-size: .89rem; }
.cl-menu .cl-reduire { padding: .5rem 1rem; }
.cl-menu ul.cl-menu-plat { padding-left: 1rem; }
.cl-contexte .cl-liste-contexte { min-width: 15rem; }
.cl-contexte .cl-liste-contexte .cl-liste-bouton { padding: .2rem .45rem; min-height: 0; }
/* numéro d'étape et son état (fait, en cours, à traiter, bloquant) */
.cl-num {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.45rem; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; border: 1px solid var(--cl-trait-fort); background: #fff; color: var(--cl-encre-2);
  font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums; position: relative;
}
.cl-num[data-etat="fait"] { background: var(--cl-conforme-pale); border-color: var(--cl-conforme-bord); color: var(--cl-conforme); }
.cl-num[data-etat="encours"] { background: var(--cl-accent); border-color: var(--cl-accent); color: #fff; }
.cl-num[data-etat="alerte"] { background: var(--cl-alerte-pale); border-color: var(--cl-alerte-bord); color: var(--cl-alerte); }
.cl-num[data-etat="bloquant"] { background: var(--cl-bloquant-pale); border-color: var(--cl-bloquant-bord); color: var(--cl-bloquant); }
.cl-num .cl-marque {
  position: absolute; right: -.35rem; top: -.3rem; min-width: .95rem; height: .95rem; padding: 0 .2rem; border-radius: 999px;
  font-size: .62rem; line-height: .95rem; text-align: center; background: var(--cl-bloquant); color: #fff; font-weight: 700;
}
.cl-menu .cl-etat-etape { margin-left: auto; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.cl-menu details[data-espace="entite"] > summary { border-left-color: var(--cl-entite); }
.cl-menu details[data-espace="siege"] > summary { border-left-color: var(--cl-siege); }
.cl-menu details[data-espace="entite"][open] > summary, .cl-menu details[data-espace="entite"] > summary:hover { background: var(--cl-entite-pale); }
.cl-menu details[data-espace="siege"][open] > summary, .cl-menu details[data-espace="siege"] > summary:hover { background: var(--cl-siege-pale); }

/* ------------------------------------------------------------------ en-tête d'écran : fil d'Ariane, titre, action principale */
.cl-fil { font-size: .86rem; color: var(--cl-gris); margin: 0 0 .35rem; display: flex; flex-wrap: wrap; gap: .1rem .4rem; }
.cl-fil a { color: var(--cl-gris); text-decoration: underline; text-decoration-color: var(--cl-trait-fort); }
.cl-fil .cl-sep { color: var(--cl-trait-fort); }
.cl-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cl-entete .cl-titres { min-width: 0; }
.cl-entete .cl-sous-titre { color: var(--cl-gris); margin: .2rem 0 0; }
.cl-entete .cl-actions { display: flex; gap: .45rem; align-items: center; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.cl-entete h1 .cl-pastille { vertical-align: 3px; margin-left: .45rem; }

/* marqueur d'espace (retraitements de l'entité / du siège) */
.cl-espace {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem; margin: 0 0 .9rem; border-radius: var(--cl-rayon-carte);
  border: 1px solid; font-size: .92rem;
}
.cl-espace strong { font-weight: 700; letter-spacing: .01em; }
.cl-espace .cl-picto-espace {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: var(--cl-rayon);
  color: #fff; font-weight: 700; font-size: .8rem; flex: 0 0 auto;
}
.cl-espace.cl-espace-entite { background: var(--cl-entite-pale); border-color: #b9d7d0; color: #1d4f47; }
.cl-espace.cl-espace-entite .cl-picto-espace { background: var(--cl-entite); }
.cl-espace.cl-espace-siege { background: var(--cl-siege-pale); border-color: #cdcae6; color: #36316e; }
.cl-espace.cl-espace-siege .cl-picto-espace { background: var(--cl-siege); }
.cl-espace a { margin-left: auto; white-space: nowrap; }
.cl-carte.cl-bord-entite { border-top: 3px solid var(--cl-entite); }
.cl-carte.cl-bord-siege { border-top: 3px solid var(--cl-siege); }

/* ------------------------------------------------------------------ blocs */
.cl-carte {
  background: var(--cl-papier); border: 1px solid var(--cl-trait); border-radius: var(--cl-rayon-carte); padding: .9rem 1.1rem;
  margin-bottom: 1rem; box-shadow: var(--cl-ombre);
}
.cl-carte > :last-child { margin-bottom: 0; }
.cl-carte-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.cl-carte-entete h2 { margin: 0; }
.cl-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.cl-g4 { grid-column: span 4; } .cl-g5 { grid-column: span 5; } .cl-g6 { grid-column: span 6; }
.cl-g7 { grid-column: span 7; } .cl-g8 { grid-column: span 8; } .cl-g12 { grid-column: span 12; }
.cl-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.cl-chiffre { background: var(--cl-papier); border: 1px solid var(--cl-trait); border-radius: var(--cl-rayon-carte); padding: .6rem .85rem; }
.cl-chiffre .cl-valeur { font-size: 1.28rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; white-space: nowrap; }
.cl-chiffre .cl-libelle { color: var(--cl-gris); font-size: .86rem; }
a.cl-chiffre:hover { text-decoration: none; border-color: var(--cl-accent); }

/* ------------------------------------------------------------------ pastilles d'état */
.cl-pastille {
  display: inline-flex; align-items: center; gap: .3em; padding: .06rem .5rem; border-radius: 999px; font-size: .8rem;
  font-weight: 600; white-space: nowrap; line-height: 1.45; border: 1px solid transparent;
}
.cl-pastille .cl-picto { font-weight: 700; font-size: .95em; line-height: 1; }
.cl-pastille[data-etat="bloquant"] { background: var(--cl-bloquant-pale); color: var(--cl-bloquant); border-color: var(--cl-bloquant-bord); }
.cl-pastille[data-etat="alerte"] { background: var(--cl-alerte-pale); color: var(--cl-alerte); border-color: var(--cl-alerte-bord); }
.cl-pastille[data-etat="conforme"] { background: var(--cl-conforme-pale); color: var(--cl-conforme); }
.cl-pastille[data-etat="attente"] { background: var(--cl-alerte-pale); color: var(--cl-alerte); }
.cl-pastille[data-etat="encours"] { background: var(--cl-neutre-pale); color: var(--cl-encre-2); }
.cl-pastille[data-etat="afaire"] { background: #fff; color: var(--cl-gris); border-color: var(--cl-trait-fort); }
.cl-pastille[data-etat="verrou"] { background: var(--cl-accent-pale); color: var(--cl-accent-fonce); }
.cl-pastille[data-etat="info"] { background: var(--cl-accent-pale); color: var(--cl-accent-fonce); }
.cl-pastille[data-etat="neutre"] { background: var(--cl-neutre-pale); color: var(--cl-encre-2); }
.cl-pastille[data-etat="sans-objet"] { background: transparent; color: var(--cl-gris); font-weight: 400; }
.cl-pastille[data-etat="entite"] { background: var(--cl-entite-pale); color: var(--cl-entite); }
.cl-pastille[data-etat="siege"] { background: var(--cl-siege-pale); color: var(--cl-siege); }
a.cl-pastille:hover { text-decoration: none; filter: brightness(.97); border-color: currentColor; }

/* ------------------------------------------------------------------ bandeau d'état d'un objet (liasse, consolidation, période) */
.cl-bandeau-etat {
  display: flex; align-items: stretch; flex-wrap: wrap; background: var(--cl-papier); border: 1px solid var(--cl-trait);
  border-radius: var(--cl-rayon-carte); margin-bottom: 1rem; box-shadow: var(--cl-ombre);
}
.cl-bandeau-etat > div { padding: .6rem 1rem; border-left: 1px solid var(--cl-trait); min-width: 0; flex: 1 1 0; }
.cl-bandeau-etat > div:first-child { border-left: none; }
.cl-bandeau-etat .cl-intitule { font-size: .8rem; color: var(--cl-gris); margin-bottom: .2rem; }
.cl-bandeau-etat .cl-suite { flex: 2 1 0; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.cl-bandeau-etat .cl-suite .cl-texte-suite { font-weight: 600; }

/* ------------------------------------------------------------------ messages et états vides */
.cl-message {
  display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .9rem; border-radius: var(--cl-rayon); margin-bottom: .8rem;
  border: 1px solid; font-size: .95rem;
}
.cl-message .cl-picto { font-weight: 700; flex: 0 0 auto; width: 1.1rem; text-align: center; }
.cl-message .cl-corps { flex: 1 1 auto; min-width: 0; }
.cl-message .cl-quoi-faire { display: block; margin-top: .15rem; }
.cl-message[data-type="erreur"], .cl-message[data-type="bloquant"] { background: var(--cl-bloquant-pale); border-color: var(--cl-bloquant-bord); color: #7d1d20; }
.cl-message[data-type="alerte"] { background: var(--cl-alerte-pale); border-color: var(--cl-alerte-bord); color: #6a4100; }
.cl-message[data-type="succes"] { background: var(--cl-conforme-pale); border-color: var(--cl-conforme-bord); color: #17573a; }
.cl-message[data-type="info"] { background: var(--cl-accent-pale); border-color: #c8d7e6; color: var(--cl-accent-fonce); }
.cl-message .cl-action-message { margin-left: auto; white-space: nowrap; align-self: center; }
.cl-vide {
  text-align: left; padding: 1.2rem 1.3rem; border: 1px dashed var(--cl-trait-fort); border-radius: var(--cl-rayon-carte);
  background: var(--cl-fond-2); color: var(--cl-encre-2);
}
.cl-vide strong { display: block; color: var(--cl-encre); margin-bottom: .2rem; }
.cl-vide .cl-bouton { margin-top: .6rem; }

/* bandeau « vous venez du rapport des contrôles » et élément en cause */
.cl-retour {
  display: flex; align-items: center; gap: .8rem; padding: .5rem .9rem; margin-bottom: .9rem; border-radius: var(--cl-rayon);
  background: #fff8e6; border: 1px solid var(--cl-alerte-bord); font-size: .93rem;
}
.cl-retour[data-gravite="bloquant"] { background: var(--cl-bloquant-pale); border-color: var(--cl-bloquant-bord); }
.cl-retour .cl-texte-retour { flex: 1 1 auto; min-width: 0; }
.cl-cible { outline: 2px solid var(--cl-alerte); outline-offset: -2px; background: #fff6dc !important; scroll-margin-top: 140px; }
tr.cl-cible > td, tr.cl-cible > th { background: #fff6dc !important; }
.cl-cible[data-gravite="bloquant"], tr.cl-cible[data-gravite="bloquant"] > td { outline-color: var(--cl-bloquant); }

/* ------------------------------------------------------------------ boutons */
.cl-bouton {
  font: inherit; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: var(--cl-rayon);
  cursor: pointer; border: 1px solid var(--cl-accent); background: var(--cl-accent); color: #fff; font-weight: 600;
  white-space: nowrap; line-height: 1.3; text-decoration: none;
}
.cl-page a.cl-bouton { color: #fff; }
.cl-bouton:hover { background: var(--cl-accent-fonce); text-decoration: none; }
.cl-bouton.cl-secondaire, .cl-page a.cl-bouton.cl-secondaire { background: #fff; color: var(--cl-accent); }
.cl-bouton.cl-secondaire:hover { background: var(--cl-accent-pale); }
.cl-bouton.cl-discret-bouton, .cl-page a.cl-bouton.cl-discret-bouton { background: transparent; border-color: transparent; color: var(--cl-accent); font-weight: 600; padding-left: .4rem; padding-right: .4rem; }
.cl-bouton.cl-discret-bouton:hover { background: var(--cl-accent-pale); }
.cl-bouton.cl-danger, .cl-page a.cl-bouton.cl-danger { background: #fff; color: var(--cl-bloquant); border-color: var(--cl-bloquant); }
.cl-bouton.cl-danger:hover { background: var(--cl-bloquant-pale); }
.cl-bouton.cl-valider { background: var(--cl-conforme); border-color: var(--cl-conforme); }
.cl-bouton.cl-valider:hover { background: #17573a; }
.cl-bouton.cl-petit { padding: .2rem .55rem; font-size: .87rem; }
.cl-bouton[disabled], .cl-bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.cl-lien-bouton { background: none; border: none; padding: 0; font: inherit; color: var(--cl-accent); cursor: pointer; }
.cl-lien-bouton:hover { text-decoration: underline; }

/* menu « Plus d'actions » */
.cl-plus { position: relative; display: inline-block; }
.cl-plus > summary { list-style: none; }
.cl-plus > summary::-webkit-details-marker { display: none; }
.cl-plus > summary::after { content: "▾"; font-size: .8em; margin-left: .15rem; }
.cl-plus[open] > .cl-plus-liste { display: flex; }
.cl-plus-liste {
  display: none; flex-direction: column; position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 15rem;
  background: #fff; border: 1px solid var(--cl-trait-fort); border-radius: var(--cl-rayon-carte); box-shadow: var(--cl-ombre-haute);
  padding: .3rem 0;
}
.cl-plus-liste a, .cl-plus-liste button {
  display: block; text-align: left; padding: .4rem .9rem; color: var(--cl-encre); background: none; border: none; font: inherit;
  cursor: pointer; white-space: nowrap;
}
.cl-plus-liste a:hover, .cl-plus-liste button:hover { background: var(--cl-fond); text-decoration: none; }
.cl-plus-liste .cl-sep-liste { border-top: 1px solid var(--cl-trait); margin: .3rem 0; }

/* ------------------------------------------------------------------ onglets */
.cl-onglets { display: flex; gap: .15rem; border-bottom: 1px solid var(--cl-trait-fort); margin: 0 0 1rem; align-items: flex-end; }
.cl-onglets > a, .cl-onglets > button, .cl-onglets .cl-plus > summary {
  padding: .45rem .85rem; color: var(--cl-encre-2); border: 1px solid transparent; border-bottom: none; background: none;
  border-radius: var(--cl-rayon) var(--cl-rayon) 0 0; margin-bottom: -1px; font: inherit; cursor: pointer; white-space: nowrap;
}
.cl-onglets > a:hover, .cl-onglets > button:hover, .cl-onglets .cl-plus > summary:hover { text-decoration: none; background: #eef2f6; }
.cl-onglets > [aria-current="page"], .cl-onglets > [aria-selected="true"] {
  background: var(--cl-papier); border-color: var(--cl-trait-fort); color: var(--cl-accent-fonce); font-weight: 600;
}
.cl-onglets .cl-compteur { font-size: .78rem; font-weight: 700; margin-left: .3rem; padding: 0 .38rem; border-radius: 999px; background: var(--cl-neutre-pale); }
.cl-onglets .cl-compteur[data-etat="bloquant"] { background: var(--cl-bloquant); color: #fff; }
.cl-onglets .cl-compteur[data-etat="alerte"] { background: var(--cl-alerte-pale); color: var(--cl-alerte); }
.cl-onglets .cl-plus { margin-left: .1rem; }
.cl-onglets .cl-plus-liste { left: 0; right: auto; }
.cl-onglets.cl-secondaires { border-bottom-color: var(--cl-trait); }
.cl-onglets.cl-secondaires > a { font-size: .92rem; padding: .3rem .7rem; }
[role="tabpanel"][hidden] { display: none; }

/* ------------------------------------------------------------------ sections repliables */
details.cl-repli {
  background: var(--cl-papier); border: 1px solid var(--cl-trait); border-radius: var(--cl-rayon-carte); margin-bottom: .8rem;
  box-shadow: var(--cl-ombre);
}
details.cl-repli > summary {
  display: flex; align-items: center; gap: .6rem; padding: .65rem 1.1rem; cursor: pointer; list-style: none; font-weight: 600;
  user-select: none;
}
details.cl-repli > summary::-webkit-details-marker { display: none; }
details.cl-repli > summary::before {
  content: ""; width: .45rem; height: .45rem; border-right: 1.6px solid var(--cl-encre-2); border-bottom: 1.6px solid var(--cl-encre-2);
  transform: rotate(-45deg); transition: transform .15s ease; flex: 0 0 auto; margin-right: .15rem;
}
details.cl-repli[open] > summary::before { transform: rotate(45deg); }
details.cl-repli > summary .cl-resume { font-weight: 400; color: var(--cl-gris); margin-left: auto; text-align: right; }
details.cl-repli > .cl-repli-corps { padding: 0 1.1rem 1rem; }
details.cl-repli.cl-leger { background: transparent; border: none; box-shadow: none; }
details.cl-repli.cl-leger > summary { padding-left: 0; color: var(--cl-accent); font-weight: 600; }
details.cl-repli.cl-leger > .cl-repli-corps { padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------------------ barre de filtres */
.cl-filtres {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .9rem; margin: 0 0 .8rem; padding: .55rem .8rem;
  background: var(--cl-papier); border: 1px solid var(--cl-trait); border-radius: var(--cl-rayon-carte);
}
.cl-filtres .cl-champ { margin: 0; }
.cl-filtres label { display: block; font-size: .78rem; color: var(--cl-gris); font-weight: 600; margin-bottom: .15rem; }
.cl-filtres select, .cl-filtres input[type=search] { min-width: 9rem; width: auto; }
.cl-filtres input[type=search] { min-width: 15rem; }
.cl-filtres .cl-compte { margin-left: auto; align-self: center; color: var(--cl-encre-2); font-size: .9rem; white-space: nowrap; }
.cl-segments { display: inline-flex; border: 1px solid var(--cl-trait-fort); border-radius: var(--cl-rayon); overflow: hidden; }
.cl-segments > a, .cl-segments > button, .cl-segments > label {
  padding: .3rem .7rem; color: var(--cl-encre-2); border: none; border-left: 1px solid var(--cl-trait-fort); background: #fff;
  font: inherit; cursor: pointer; white-space: nowrap; margin: 0;
}
.cl-segments > :first-child { border-left: none; }
.cl-segments > [aria-pressed="true"], .cl-segments > [aria-current="true"] { background: var(--cl-accent); color: #fff; font-weight: 600; }
.cl-segments > a:hover { text-decoration: none; }

/* ------------------------------------------------------------------ tableaux compacts */
.cl-defile { overflow-x: auto; }
table.cl-tableau { border-collapse: collapse; width: 100%; background: var(--cl-papier); font-size: .95rem; }
.cl-tableau th, .cl-tableau td { padding: .38rem .6rem; border-bottom: 1px solid var(--cl-trait); text-align: left; vertical-align: middle; }
.cl-tableau thead th {
  text-transform: none; letter-spacing: 0; white-space: normal;
  font-size: .8rem; font-weight: 600; color: var(--cl-encre-2); background: var(--cl-fond-2); border-bottom: 1px solid var(--cl-trait-fort);
  position: sticky; top: calc(var(--cl-bandeau-h) + var(--cl-contexte-reelle, var(--cl-contexte-h))); z-index: 2; line-height: 1.25; vertical-align: bottom;
}
.cl-tableau td.cl-n, .cl-tableau th.cl-n { text-align: right; }
.cl-tableau tbody tr:hover > td { background: #fafbfd; }
.cl-tableau tr.cl-groupe-lignes > th, .cl-tableau tr.cl-groupe-lignes > td {
  background: var(--cl-fond-2); font-weight: 600; color: var(--cl-accent-fonce); font-size: .88rem; padding-top: .5rem;
}
.cl-tableau tr.cl-sous-total td { font-weight: 600; border-top: 1px solid var(--cl-trait-fort); }
.cl-tableau tr.cl-total td { font-weight: 700; border-top: 2px solid var(--cl-encre); border-bottom: 2px solid var(--cl-encre); }
.cl-tableau .cl-col-sup { display: none; }
.cl-tableau.cl-toutes-colonnes .cl-col-sup { display: table-cell; }
.cl-tableau tr.cl-ligne-lien { cursor: pointer; }
.cl-tableau td .cl-secondaire-ligne { display: block; color: var(--cl-gris); font-size: .86rem; line-height: 1.3; }
.cl-tableau td.cl-actions-ligne { text-align: right; white-space: nowrap; width: 1%; }
.cl-tableau input[type=text], .cl-tableau input:not([type]), .cl-tableau select { padding: .25rem .4rem; }
.cl-tableau td.cl-saisie { padding-top: .2rem; padding-bottom: .2rem; }
.cl-tableau td.cl-saisie input { width: 100%; min-width: 4.5rem; }
.cl-tableau td.cl-saisie.cl-n input { text-align: right; font-variant-numeric: tabular-nums; }
table.cl-tableau.cl-grille-saisie { table-layout: fixed; }
.cl-defile .cl-tableau thead th { position: static; }
.cl-tableau tfoot td { background: var(--cl-fond-2); font-size: .88rem; border-top: 1px solid var(--cl-trait-fort); }
.cl-pied-tableau { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; font-size: .9rem; color: var(--cl-encre-2); }
.cl-pied-tableau .cl-espace-libre { flex: 1 1 auto; }

/* ------------------------------------------------------------------ formulaires */
.cl-champ { margin: 0 0 .8rem; min-width: 0; }
.cl-champ > label, .cl-champ > .cl-intitule-champ { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.cl-champ .cl-facultatif { font-weight: 400; color: var(--cl-gris); }
.cl-page input[type=text], .cl-page input[type=search], .cl-page input[type=password], .cl-page input[type=number],
.cl-page input[type=date], .cl-page input[type=file], .cl-page select, .cl-page textarea {
  font: inherit; padding: .38rem .55rem; border: 1px solid var(--cl-trait-fort); border-radius: var(--cl-rayon); background: #fff;
  color: var(--cl-encre); width: 100%; max-width: 100%;
}
.cl-page textarea { min-height: 4.5rem; }
.cl-page input:disabled, .cl-page select:disabled, .cl-page textarea:disabled {
  background: var(--cl-fond); color: var(--cl-encre-2); border-style: dashed; cursor: not-allowed;
}
.cl-champ .cl-aide-champ { display: block; font-size: .84rem; color: var(--cl-gris); margin-top: .2rem; line-height: 1.35; }
.cl-champ.cl-en-erreur input, .cl-champ.cl-en-erreur select, .cl-champ.cl-en-erreur textarea { border-color: var(--cl-bloquant); }
.cl-champ .cl-erreur-champ { display: block; color: var(--cl-bloquant); font-size: .88rem; margin-top: .2rem; font-weight: 600; }
.cl-rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.cl-formulaire { max-width: 52rem; }
.cl-barre-actions {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: .5rem; align-items: center; padding: .6rem 1.1rem;
  margin: 1rem -1.1rem -.9rem; background: var(--cl-fond-2); border-top: 1px solid var(--cl-trait);
  border-radius: 0 0 var(--cl-rayon-carte) var(--cl-rayon-carte);
}
.cl-barre-actions .cl-espace-libre { flex: 1 1 auto; }

/* aide en clair : bouton « ? » qui déplie une explication courte, jamais de pavé permanent */
.cl-aide { display: inline; }
.cl-aide > summary {
  display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid var(--cl-trait-fort); color: var(--cl-encre-2); font-size: .74rem; font-weight: 700; cursor: pointer;
  list-style: none; vertical-align: 1px; margin-left: .25rem; background: #fff;
}
.cl-aide > summary::-webkit-details-marker { display: none; }
.cl-aide[open] > summary { background: var(--cl-accent); color: #fff; border-color: var(--cl-accent); }
.cl-aide > .cl-aide-texte {
  display: block; margin: .3rem 0 .4rem; padding: .5rem .7rem; background: var(--cl-accent-pale); border-radius: var(--cl-rayon);
  font-weight: 400; font-size: .88rem; color: var(--cl-accent-fonce); max-width: 46rem;
}

/* ------------------------------------------------------------------ liste structurée (liste déroulante groupée, avec recherche) */
.cl-liste { position: relative; display: block; min-width: 0; }
.cl-liste > select.cl-liste-source { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cl-liste-bouton {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; text-align: left;
  font: inherit; padding: .38rem .55rem; border: 1px solid var(--cl-trait-fort); border-radius: var(--cl-rayon); background: #fff;
  color: var(--cl-encre); cursor: pointer; min-height: 2.2rem;
}
.cl-liste-bouton::after { content: "▾"; color: var(--cl-gris); flex: 0 0 auto; }
/* valeur choisie : renvoyée à la ligne plutôt que de déborder du bouton (libellé de compte long, colonne étroite) */
.cl-liste-bouton { min-width: 0; max-width: 100%; }
.cl-liste-bouton > span { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.cl-liste-bouton.cl-en-erreur { border-color: var(--cl-bloquant); box-shadow: 0 0 0 1px var(--cl-bloquant); }
.cl-liste-bouton .cl-vide-liste { color: var(--cl-gris); }
.cl-liste-bouton .cl-code { margin-right: .45rem; color: var(--cl-encre-2); }
.cl-liste-panneau {
  position: absolute; left: 0; top: calc(100% + 3px); z-index: 40; width: max(100%, 26rem); max-width: 40rem; background: #fff;
  border: 1px solid var(--cl-trait-fort); border-radius: var(--cl-rayon-carte); box-shadow: var(--cl-ombre-haute); padding: .4rem;
}
.cl-liste-panneau[hidden] { display: none; }
.cl-liste-panneau.cl-a-droite { left: auto; right: 0; }
.cl-liste-panneau input[type=search] { margin-bottom: .35rem; }
.cl-liste-options { max-height: 19rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.cl-liste-options .cl-liste-groupe {
  font-size: .78rem; font-weight: 700; color: var(--cl-accent-fonce); padding: .45rem .5rem .2rem; letter-spacing: .02em;
  position: sticky; top: 0; background: #fff;
}
.cl-liste-options [role="option"] { padding: .3rem .5rem .3rem 1.1rem; border-radius: var(--cl-rayon); cursor: pointer; line-height: 1.3; }
.cl-liste-options [role="option"] .cl-code { color: var(--cl-encre-2); margin-right: .45rem; }
.cl-liste-options [role="option"][aria-selected="true"] { font-weight: 600; }
.cl-liste-options [role="option"].cl-active { background: var(--cl-accent-pale); }
.cl-liste-options .cl-liste-aucun { padding: .5rem; color: var(--cl-gris); }
.cl-liste-options mark { background: #fff0b3; color: inherit; padding: 0; }

/* ------------------------------------------------------------------ fil d'étapes de la clôture */
.cl-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 0; margin: 0 0 1rem; padding: 0; list-style: none;
  background: var(--cl-papier); border: 1px solid var(--cl-trait); border-radius: var(--cl-rayon-carte); box-shadow: var(--cl-ombre); }
.cl-etapes > li { border-left: 1px solid var(--cl-trait); min-width: 0; }
.cl-etapes > li:first-child { border-left: none; }
.cl-etapes > li > a { display: flex; flex-direction: column; gap: .2rem; padding: .55rem .7rem .6rem; color: var(--cl-encre); height: 100%; }
.cl-etapes > li > a:hover { text-decoration: none; background: var(--cl-fond-2); }
.cl-etapes .cl-ligne-etape { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.cl-etapes .cl-detail-etape { font-size: .8rem; color: var(--cl-encre-2); line-height: 1.3; }
.cl-etapes > li[aria-current="step"] { box-shadow: inset 0 3px 0 var(--cl-accent); background: var(--cl-accent-pale); }

/* ------------------------------------------------------------------ tiroir (aide de l'écran, formulaire court, détail) */
.cl-voile { position: fixed; inset: 0; background: rgba(21, 33, 45, .32); z-index: 60; }
.cl-voile[hidden] { display: none; }
.cl-tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(560px, 92vw); background: #fff; box-shadow: var(--cl-ombre-haute);
  display: flex; flex-direction: column; border-left: 1px solid var(--cl-trait-fort);
}
.cl-tiroir.cl-large { width: min(820px, 94vw); }
.cl-tiroir[hidden] { display: none; }
.cl-tiroir-entete { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--cl-trait); }
.cl-tiroir-entete h2 { margin: 0; flex: 1 1 auto; }
.cl-tiroir-corps { padding: 1rem 1.1rem; overflow-y: auto; flex: 1 1 auto; }
.cl-tiroir-pied { padding: .7rem 1.1rem; border-top: 1px solid var(--cl-trait); display: flex; gap: .5rem; background: var(--cl-fond-2); }
.cl-fermer { background: none; border: 1px solid transparent; border-radius: var(--cl-rayon); font-size: 1.2rem; line-height: 1;
  padding: .2rem .45rem; cursor: pointer; color: var(--cl-encre-2); }
.cl-fermer:hover { background: var(--cl-fond); }

/* ------------------------------------------------------------------ parcours d'un retraitement : catalogue, fiche, calcul, pièces, effet */
.cl-parcours { display: flex; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: parcours; flex-wrap: wrap; }
.cl-parcours > li { counter-increment: parcours; display: flex; align-items: center; color: var(--cl-gris); font-size: .9rem; }
.cl-parcours > li + li::before { content: ""; width: 1.4rem; height: 1px; background: var(--cl-trait-fort); margin: 0 .45rem; }
.cl-parcours > li > a, .cl-parcours > li > span { display: inline-flex; align-items: center; gap: .4rem; color: inherit; }
.cl-parcours > li > a::before, .cl-parcours > li > span::before {
  content: counter(parcours); display: inline-flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem;
  border-radius: 50%; border: 1px solid var(--cl-trait-fort); font-size: .74rem; font-weight: 700; background: #fff;
}
.cl-parcours > li[data-etat="fait"] { color: var(--cl-conforme); }
.cl-parcours > li[data-etat="fait"] > a::before, .cl-parcours > li[data-etat="fait"] > span::before { content: "✓"; border-color: var(--cl-conforme-bord); background: var(--cl-conforme-pale); }
.cl-parcours > li[aria-current="step"] { color: var(--cl-encre); font-weight: 600; }
.cl-parcours > li[aria-current="step"] > a::before, .cl-parcours > li[aria-current="step"] > span::before { background: var(--cl-accent); border-color: var(--cl-accent); color: #fff; }

/* liste à deux volets : liste à gauche, détail à droite (catalogue, contrôles, sociétés) */
.cl-deux-volets { display: grid; grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.cl-volet-liste { position: sticky; top: calc(var(--cl-bandeau-h) + var(--cl-contexte-reelle, var(--cl-contexte-h)) + .8rem); max-height: calc(100vh - 150px); overflow-y: auto; }
.cl-arbre { list-style: none; margin: 0; padding: 0; }
.cl-arbre .cl-arbre-groupe { font-size: .8rem; font-weight: 700; color: var(--cl-accent-fonce); padding: .55rem .6rem .2rem; letter-spacing: .02em; }
.cl-arbre .cl-arbre-norme { font-size: .82rem; font-weight: 600; color: var(--cl-encre-2); padding: .35rem .6rem .1rem 1rem; }
.cl-arbre a { display: flex; align-items: center; gap: .4rem; padding: .28rem .6rem .28rem 1.6rem; color: var(--cl-encre); border-radius: var(--cl-rayon); line-height: 1.3; }
.cl-arbre a:hover { background: var(--cl-fond); text-decoration: none; }
.cl-arbre a[aria-current="true"] { background: var(--cl-accent-pale); font-weight: 600; color: var(--cl-accent-fonce); }
.cl-arbre .cl-nb { margin-left: auto; font-size: .78rem; color: var(--cl-gris); }

/* ------------------------------------------------------------------ largeur 1024 : menu plus étroit, colonnes repliées */
@media (max-width: 1240px) {
  :root { --cl-menu-l: 212px; }
  .cl-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-etapes > li:nth-child(4n + 1) { border-left: none; }
  .cl-etapes > li:nth-child(n + 5) { border-top: 1px solid var(--cl-trait); }
  .cl-contenu { padding: 1rem 1.1rem 2.5rem; }
  .cl-contexte { padding-left: 1.1rem; padding-right: 1.1rem; }
  .cl-g4, .cl-g5, .cl-g6, .cl-g7, .cl-g8 { grid-column: span 12; }
  .cl-deux-volets { grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr); }
  .cl-tableau .cl-col-large { display: none; }
  .cl-tableau.cl-toutes-colonnes .cl-col-large { display: table-cell; }
  .cl-bandeau .cl-qui small { display: none; }
}
/* menu réduit à la demande (bouton « Réduire le menu ») */
.cl-menu-reduit { --cl-menu-l: 64px; }
.cl-menu-reduit .cl-menu .cl-libelle-menu, .cl-menu-reduit .cl-menu ul, .cl-menu-reduit .cl-menu .cl-menu-titre,
.cl-menu-reduit .cl-menu .cl-menu-bas, .cl-menu-reduit .cl-menu summary::after, .cl-menu-reduit .cl-menu .cl-etat-etape { display: none; }
.cl-menu-reduit .cl-bandeau .cl-produit { flex-basis: auto; }
/* menu réduit : les étapes numérotées restent, l'accueil devient un pictogramme ; le bouton qui rouvre le menu reste */
.cl-menu-reduit .cl-menu .cl-menu-accueil::before { content: "⌂"; font-size: 1.15rem; line-height: 1; }
.cl-menu-reduit .cl-menu details:not([data-espace]):not(:has(.cl-num)), .cl-menu-reduit .cl-menu .cl-separateur { display: none; }
.cl-menu-reduit .cl-menu .cl-menu-bas.cl-menu-bascule { display: block; }
.cl-menu-reduit .cl-menu .cl-reduire { font-size: 0; padding: .5rem 1.2rem; }
.cl-menu-reduit .cl-menu .cl-reduire::after { content: "»"; font-size: 1.2rem; }

/* ------------------------------------------------------------------ impression des états */
@media print {
  @page { size: A4; margin: 12mm 10mm; }
  body.cl-page { background: #fff; font-size: 10pt; }
  .cl-bandeau, .cl-contexte, .cl-menu, .cl-evitement, .cl-actions, .cl-onglets, .cl-filtres, .cl-retour, .cl-barre-actions,
  .cl-tiroir, .cl-voile, .cl-bouton, .cl-plus, .cl-aide, .cl-message[data-type="succes"], .cl-pied-tableau .cl-bouton { display: none !important; }
  .cl-cadre { display: block; }
  .cl-contenu { max-width: none; padding: 0; }
  .cl-carte, details.cl-repli { border: none; box-shadow: none; padding: 0; margin: 0 0 6mm; }
  details.cl-repli > summary { padding: 0 0 2mm; }
  details.cl-repli > summary::before { display: none; }
  details.cl-repli:not([open]) > .cl-repli-corps { display: block; }
  .cl-defile { overflow: visible; }
  .cl-tableau thead th { position: static; }
  .cl-tableau .cl-col-sup { display: table-cell; }
  table.cl-tableau { font-size: 9pt; }
  .cl-tableau tr { break-inside: avoid; }
  .cl-tableau thead { display: table-header-group; }
  .cl-page a { color: inherit; text-decoration: none; }
  .cl-fil { display: none; }
  .cl-entete h1 { font-size: 14pt; }
  .cl-action-message, .cl-pied-tableau, .cl-carte-entete > button, .cl-carte-entete > a { display: none !important; }
  .cl-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-chiffre .cl-valeur { white-space: nowrap; font-size: 11pt; }
}

/* ligne des onglets d'états et du choix d'une autre analyse (écran des résultats) */
.cl-onglets-ligne { display: flex; align-items: flex-end; gap: 1rem; border-bottom: 1px solid var(--cl-trait-fort); margin: 0 0 1rem; }
.cl-onglets-ligne > .cl-onglets { border-bottom: none; margin: 0; flex: 1 1 auto; min-width: 0; }
.cl-onglets-ligne .cl-analyse { flex: 0 0 14rem; padding-bottom: .35rem; }
.cl-onglets-ligne .cl-analyse .cl-champ { margin: 0; }
.cl-onglets-ligne .cl-analyse label { font-size: .78rem; color: var(--cl-gris); font-weight: 600; margin-bottom: .1rem; }
.cl-tableau td.cl-saisie input.cl-court { width: 5.5rem; min-width: 0; }

/* ------------------------------------------------------------------ cohabitation avec style.css pendant la transition :
   l'ancienne feuille donne un fond de couleur à tout « button » et des majuscules aux en-têtes de tableaux */
.cl-page .cl-liste-bouton, .cl-page .cl-liste-bouton:hover, .cl-page .cl-liste-bouton:focus { background: #fff; color: var(--cl-encre); font-weight: 400; }
.cl-page .cl-lien-bouton, .cl-page .cl-lien-bouton:hover, .cl-page .cl-lien-bouton:focus { background: none; border: none; color: var(--cl-accent); font-weight: 600; }
.cl-page .cl-fermer, .cl-page .cl-fermer:focus { background: none; color: var(--cl-encre-2); font-weight: 400; }
.cl-page .cl-fermer:hover { background: var(--cl-fond); }
.cl-page .cl-onglets > button, .cl-page .cl-onglets > button:hover { color: var(--cl-encre-2); font-weight: 400; }
.cl-page .cl-onglets > button:hover { background: #eef2f6; }
.cl-page .cl-onglets > button[aria-selected="true"] { background: var(--cl-papier); color: var(--cl-accent-fonce); font-weight: 600; }
.cl-page .cl-plus-liste button, .cl-page .cl-plus-liste button:hover { color: var(--cl-encre); font-weight: 400; border: none; }
.cl-page .cl-plus-liste button:hover { background: var(--cl-fond); }
.cl-page .cl-plus-liste button[disabled] { color: var(--cl-gris); cursor: not-allowed; background: none; }
.cl-page .cl-bandeau .cl-bouton-bandeau { font-weight: 400; }
.cl-page .cl-tableau thead th { text-transform: none; letter-spacing: 0; }
.cl-montant { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* en-têtes collants des anciens tableaux : sous le bandeau et la barre de contexte (hauteur réelle mesurée par socle.js),
   et à leur place dans un tableau défilant */
.cl-contenu thead th { top: calc(var(--cl-bandeau-h) + var(--cl-contexte-reelle, var(--cl-contexte-h))); }
.cl-contenu .tableau-defile thead th, .cl-contenu .cl-defile thead th { top: 0; }
/* messages de la session et messages des écrans non repris (classe « message ») : même aspect que cl-message, avec
   le pictogramme de leur nature */
.cl-page .message { position: relative; padding-left: 2.3rem; font-size: .95rem; }
.cl-page .message::before { position: absolute; left: .85rem; top: .6rem; width: 1.1rem; text-align: center; font-weight: 700; }
.cl-page .message.succes::before { content: "✓"; }
.cl-page .message.erreur::before { content: "✕"; }
.cl-page .message.alerte::before { content: "!"; }
.cl-page .message.info::before { content: "i"; }
.cl-message.cl-notice { align-items: center; }
.cl-message.cl-notice .cl-bouton { margin-left: auto; }
.cl-chiffre[data-etat="bloquant"] .cl-valeur { color: var(--cl-bloquant); }
.cl-chiffre[data-etat="alerte"] .cl-valeur { color: var(--cl-alerte); }
.cl-chiffre[data-etat="conforme"] .cl-valeur { color: var(--cl-conforme); }

/* ------------------------------------------------------------------ utilitaires (la politique de sécurité refuse les attributs style) */
.cl-mt { margin-top: .75rem; } .cl-mb { margin-bottom: .8rem; } .cl-mb0 { margin-bottom: 0; }
.cl-normal { font-weight: 400; }
.cl-sur-titre { margin: 0 0 .2rem; }
.cl-titre-objet { font-size: 1.25rem; }
.cl-tableau .cl-col-num { width: 3.8rem; } .cl-tableau .cl-col-code { width: 5.5rem; }
.cl-tableau .cl-col-etat { width: 7.5rem; } .cl-tableau .cl-col-lien { width: 16rem; }
col.cl-l5 { width: 5%; } col.cl-l10 { width: 10%; } col.cl-l15 { width: 15%; } col.cl-l20 { width: 20%; }
col.cl-l25 { width: 25%; } col.cl-l30 { width: 30%; } col.cl-l35 { width: 35%; } col.cl-l40 { width: 40%; }

/* ===================================================================== version 13 (lot « saisie ») : bouton
   « Retour » de l'en-tête, « Annuler » des formulaires, tableaux de fiche repris d'un fichier importé */
.cl-entete .cl-titre-ligne { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cl-lien-retour { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem .2rem .45rem;
  border: 1px solid var(--cl-trait-fort); border-radius: var(--cl-rayon); background: var(--cl-papier); color: var(--cl-accent);
  font-size: .87rem; font-weight: 600; line-height: 1.35; text-decoration: none; white-space: nowrap; }
.cl-page a.cl-lien-retour { color: var(--cl-accent); }
.cl-lien-retour:hover { background: var(--cl-accent-pale); text-decoration: none; }
.cl-lien-retour::before { content: "\2190"; font-weight: 400; }
.cl-titre-tableau { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }
.cl-titre-tableau h4 { margin: .4rem 0; }
.cl-import { border: 1px solid var(--cl-trait); border-left: 3px solid var(--cl-accent); border-radius: var(--cl-rayon);
  background: var(--cl-fond-2); padding: .55rem .75rem; margin: .3rem 0 .6rem; }
.cl-import .cl-import-titre { margin: 0 0 .45rem; }
.cl-import .cl-tableau { margin-bottom: .45rem; }
.cl-import p:last-child { margin-bottom: 0; }
.cl-contexte .cl-recherche-contexte input { width: 11.5rem; padding: .22rem .5rem; font-size: .87rem; }
/* version 13 : l'indication de format d'une date (« JJ/MM/AAAA ») reste lisible en entier à 1366 × 768 */
.cl-page input[placeholder="JJ/MM/AAAA"] { min-width: 8.6rem; }
.cl-tableau td.cl-saisie input[placeholder="JJ/MM/AAAA"] { min-width: 8.6rem; }