/* ════════════════════════════════════════════════════════════════════════════
   LE GLOBAL CSS DE CF 2C — l'application ET /admin.  (mission #2.2, boussole amendement 2.9)
   ⭐ Servi à /charte-application.css : chaque page de /admin (modules/identites ≥ 0.12.0) le charge EN DERNIER, et
      chaque écran de l'application aussi. UNE feuille, une charte.
   ⭐ LES JETONS SONT CEUX DU CONTRAT DE STYLE : `--admin-*` (modules/identites/front/jetons.css). La Personnalisation
      de /admin les règle (sa feuille les pose sous `:root:root`, elle l'emporte sur ce `:root`) — l'application suit.
   ⭐ LES CLASSES DE /admin sont celles de la liste figée (modules/identites/front/classes.json) ; le volet, celles de
      la brique (app/briques/volet/classes.js). ⛔ N'en renommer aucune : elles appartiennent aux briques.
   ⭐ Une charte sobre, de finance : bleu nuit, bleu acier, gris chauds. Aucune marque d'un tiers.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --admin-police: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --admin-police-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --admin-couleur-fond: #f5f6f8;
  --admin-couleur-surface: #ffffff;
  --admin-couleur-survol: #eef1f5;
  --admin-couleur-menu: #ffffff;
  --admin-couleur-menu-survol: #eef1f5;
  --admin-couleur-texte: #1d2733;
  --admin-couleur-texte-second: #4a5868;
  --admin-couleur-texte-discret: #6f7c8b;
  --admin-couleur-titre: #16324f;
  --admin-couleur-bord: #e1e5eb;
  --admin-couleur-bord-fort: #c9d0d9;
  --admin-couleur-accent: #1f5f8b;
  --admin-couleur-accent-survol: #184c70;
  --admin-couleur-accent-texte: #ffffff;
  --admin-couleur-accent-doux: #e7f0f7;
  --admin-couleur-accent-bord: #b9d1e3;
  --admin-couleur-marque: #16324f;
  --admin-couleur-sur-marque: #ffffff;
  --admin-couleur-succes: #2f7d4f;
  --admin-couleur-alerte: #a8641a;
  --admin-couleur-erreur: #b23a3a;
  --admin-rayon: 6px;
  --admin-rayon-carte: 10px;
  --admin-rayon-pastille: 999px;
  --admin-ombre: 0 1px 2px rgba(22, 50, 79, .06), 0 1px 6px rgba(22, 50, 79, .05);
  /* les tons 1 à 5 : du plus doux au plus ferme */
  --cf-ton-1: #5b9bc4; --cf-ton-2: #3f86a8; --cf-ton-3: #c48b2a; --cf-ton-4: #c0672b; --cf-ton-5: #a93b3b;
  --cf-e1: 4px; --cf-e2: 8px; --cf-e3: 12px; --cf-e4: 16px; --cf-e5: 24px; --cf-e6: 32px;
  color-scheme: light;
}
html[data-mode="sombre"] {
  --admin-couleur-fond: #10161d;
  --admin-couleur-surface: #18212b;
  --admin-couleur-survol: #212c38;
  --admin-couleur-menu: #141c25;
  --admin-couleur-menu-survol: #212c38;
  --admin-couleur-texte: #e5eaf0;
  --admin-couleur-texte-second: #b5c0cc;
  --admin-couleur-texte-discret: #8794a3;
  --admin-couleur-titre: #e5eaf0;
  --admin-couleur-bord: #283442;
  --admin-couleur-bord-fort: #36475a;
  --admin-couleur-accent: #5aa0cf;
  --admin-couleur-accent-survol: #7ab4da;
  --admin-couleur-accent-texte: #0d1620;
  --admin-couleur-accent-doux: #1b3044;
  --admin-couleur-accent-bord: #2f5677;
  --admin-couleur-marque: #0d2238;
  --admin-ombre: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ── La base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--admin-police); font-size: 15px; line-height: 1.5;
       color: var(--admin-couleur-texte); background: var(--admin-couleur-fond); }
h1, h2, h3 { color: var(--admin-couleur-titre); line-height: 1.25; margin: 0 0 var(--cf-e3); }
h1 { font-size: 1.6rem; font-weight: 650; } h2 { font-size: 1.1rem; font-weight: 620; }
a { color: var(--admin-couleur-accent); }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { background: var(--admin-couleur-surface); border: 1px solid var(--admin-couleur-bord-fort);
                          border-radius: var(--admin-rayon); padding: 7px 10px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--admin-couleur-accent); outline-offset: 2px; }

/* ── Les classes de /admin (liste figée) que l'application emploie aussi ─────────────────────────── */
.admin-bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--cf-e2); cursor: pointer;
                padding: 8px 14px; border-radius: var(--admin-rayon); border: 1px solid var(--admin-couleur-bord-fort);
                background: var(--admin-couleur-surface); color: var(--admin-couleur-texte); text-decoration: none;
                font-weight: 550; }
.admin-bouton:hover { background: var(--admin-couleur-survol); }
.admin-bouton-principal { background: var(--admin-couleur-accent); border-color: var(--admin-couleur-accent);
                          color: var(--admin-couleur-accent-texte); }
.admin-bouton-principal:hover { background: var(--admin-couleur-accent-survol); }
.admin-bouton-petit { padding: 4px 10px; font-size: .85rem; }
.admin-bouton-danger { color: var(--admin-couleur-erreur); border-color: var(--admin-couleur-erreur); }
.admin-carte { background: var(--admin-couleur-surface); border: 1px solid var(--admin-couleur-bord);
               border-radius: var(--admin-rayon-carte); box-shadow: var(--admin-ombre); padding: var(--cf-e5); }
.admin-badge { display: inline-block; padding: 1px 8px; border-radius: var(--admin-rayon-pastille); font-size: .8rem;
               background: var(--admin-couleur-survol); color: var(--admin-couleur-texte-second); }
.admin-badge-accent { background: var(--admin-couleur-accent-doux); color: var(--admin-couleur-accent); }
.admin-connexion { background: var(--admin-couleur-fond); }
.admin-connexion-carte { border-radius: var(--admin-rayon-carte); box-shadow: var(--admin-ombre); }
.admin-note { color: var(--admin-couleur-texte-discret); }
.admin-refus { color: var(--admin-couleur-erreur); }

/* ════════════════════════════════════════════════════════════════════════════
   LE VOLET — la brique `volet` du catalogue (app/briques/volet), et dans /admin la coquille (identites 0.15)
   ⛔ Les règles marquées « comportement » viennent du LISEZ-MOI de la brique : ne pas les retirer.
   ════════════════════════════════════════════════════════════════════════════ */
.volet-coquille { display: flex; height: 100vh; overflow: hidden; }                         /* comportement */
.volet-contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
:where(.volet-bouton) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
                        font: inherit; color: inherit; text-decoration: none; }
.volet-pied form { margin: 0; display: contents; }
.volet-place { position: relative; flex-shrink: 0; height: 100%; width: 232px; transition: width .15s ease; }
.volet-place.volet-place-replie { width: 60px; }
.volet { height: 100%; width: 232px; min-width: 232px; max-width: 232px; display: flex; flex-direction: column;
         overflow: hidden; background: var(--admin-couleur-menu); border-right: 1px solid var(--admin-couleur-bord);
         transition: width .15s ease; }
.volet.volet-replie { width: 60px; min-width: 60px; max-width: 60px; }
.volet.volet-survol { position: absolute; top: 0; left: 0; bottom: 0; z-index: 61; width: 232px; min-width: 232px;
                      max-width: 232px; box-shadow: 0 8px 30px rgba(22, 50, 79, .18); }
.volet-marque { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--cf-e2); min-height: 60px;
                padding: var(--cf-e3); border-bottom: 1px solid var(--admin-couleur-bord); }
.volet-replie .volet-marque { justify-content: center; padding-left: 0; padding-right: 0; }
.volet-bascule { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
                 border-radius: var(--admin-rayon); color: var(--admin-couleur-texte-discret); }
.volet-bascule:hover { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
.volet-identite { display: flex; align-items: center; gap: var(--cf-e2); flex: 1; min-width: 0; }
.volet-logo, .cf-logo { flex: none; height: 32px; }
.volet-nom { min-width: 0; font-weight: 700; font-size: 1.05rem; color: var(--admin-couleur-titre); white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.volet-nom span { display: block; font-weight: 450; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
                  color: var(--admin-couleur-texte-discret); margin-top: 2px; }
.volet-nav { flex: 1; overflow-y: auto; padding: var(--cf-e2); display: flex; flex-direction: column; gap: 2px; }
.volet-entree { position: relative; display: flex; align-items: center; gap: var(--cf-e3); width: 100%;
                padding: 7px var(--cf-e3); border-radius: var(--admin-rayon); border-left: 3px solid transparent;
                font-size: .9rem; white-space: nowrap; color: var(--admin-couleur-texte-second); }
.volet-entree:hover { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
.volet-entree.actif { background: var(--admin-couleur-accent-doux); color: var(--admin-couleur-titre); font-weight: 620;
                      border-left-color: var(--admin-couleur-accent); }
.volet-entree.actif .volet-entree-icone { color: var(--admin-couleur-accent); }
.volet-entree[data-etat="a_venir"] .volet-libelle::after { content: " ·"; color: var(--admin-couleur-texte-discret); }
.volet-replie .volet-entree { justify-content: center; padding-left: 0; padding-right: 0; }  /* comportement */
.volet-entree-icone { flex: none; width: 18px; height: 18px; }
.volet-libelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.volet-entree-compte { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: var(--admin-rayon-pastille);
                       background: var(--admin-couleur-erreur); color: #fff; font-size: .72rem; line-height: 18px; text-align: center; }
.volet-entree-compte[data-replie] { position: absolute; top: 2px; right: 2px; margin: 0; }
/* les quatre espaces : un titre, ou un filet quand le volet est replié */
.cf-espace { margin: var(--cf-e3) var(--cf-e3) 2px; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
             text-transform: uppercase; color: var(--admin-couleur-texte-discret); min-height: 1px; }
.cf-espace:first-child { margin-top: var(--cf-e1); }
.volet-replie .cf-espace { margin: var(--cf-e2) var(--cf-e2) 2px; border-top: 1px solid var(--admin-couleur-bord); }
.volet-bas { border-top: 1px solid var(--admin-couleur-bord); padding: var(--cf-e2) var(--cf-e3); display: flex;
             flex-direction: column; gap: var(--cf-e2); }
.volet-replie .volet-bas { padding-left: var(--cf-e1); padding-right: var(--cf-e1); align-items: center; }
.volet-etat { display: inline-flex; align-items: center; gap: var(--cf-e2); font-size: .8rem; color: var(--admin-couleur-texte-discret); }
.volet-pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--admin-couleur-bord-fort); }
.volet-pastille-en-ligne { background: var(--admin-couleur-succes); }
.volet-pastille-hors-ligne { background: var(--admin-couleur-alerte); }
.volet-pied { display: flex; align-items: center; gap: var(--cf-e2); }
.volet-replie .volet-pied { flex-direction: column; }                                         /* comportement */
.volet-moi { flex: none; display: inline-flex; padding: 2px; border-radius: 50%; }
.volet-moi:hover { box-shadow: 0 0 0 2px var(--admin-couleur-accent); }
.volet-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; overflow: hidden; display: inline-flex;
                align-items: center; justify-content: center; background: var(--admin-couleur-marque);
                color: var(--admin-couleur-sur-marque); font-size: .72rem; font-weight: 700; }
.volet-avatar-image { width: 100%; height: 100%; object-fit: cover; }
.volet-parametres, .volet-deconnexion { flex: 1; display: inline-flex; align-items: center; justify-content: center;
                                        padding: 6px; border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon);
                                        color: var(--admin-couleur-texte-discret); }
.volet-parametres:hover, .volet-deconnexion:hover { background: var(--admin-couleur-menu-survol); color: var(--admin-couleur-texte); }
.volet-parametres.actif { background: var(--admin-couleur-accent-doux); border-color: var(--admin-couleur-accent); }
.volet-barre, .volet-fermer, .volet-voile { display: none !important; }
.volet-barre-espace { flex: 1; }
@media (max-width: 768px) {
  .volet-barre { display: flex !important; align-items: center; gap: var(--cf-e3); position: sticky; top: 0; z-index: 50;
                 height: 52px; padding: 0 var(--cf-e3); background: var(--admin-couleur-surface);
                 border-bottom: 1px solid var(--admin-couleur-bord); }
  .volet-hamburger, .volet-fermer { display: inline-flex; align-items: center; justify-content: center; flex: none;
                                    width: 40px; height: 40px; border: 1px solid var(--admin-couleur-bord);
                                    border-radius: var(--admin-rayon); background: var(--admin-couleur-surface); }
  .volet-fermer { display: inline-flex !important; margin-left: auto; }
  .volet-place { width: 0 !important; height: 0; position: static; }
  .volet { display: none !important; }
  .volet.volet-ouvert { display: flex !important; position: fixed !important; left: 0; top: 0; bottom: 0; z-index: 60;
                        width: min(280px, 85vw) !important; min-width: 0 !important; max-width: none !important; height: auto !important; }
  .volet-voile { display: block !important; position: fixed; inset: 0; z-index: 55; background: rgba(16, 22, 29, .4); }
  .volet-bascule, .volet-nom, .volet-libelle, .volet-etat-texte { display: none !important; }
  .volet-ouvert .volet-nom, .volet-ouvert .volet-libelle, .volet-ouvert .volet-etat-texte { display: inline !important; }
  .volet-ouvert .volet-nom { display: block !important; }
  .volet-pied { flex-direction: row !important; }
}
@media (prefers-reduced-motion: reduce) { .volet, .volet-place { transition: none; } }

/* ── La marque CF 2C (un monogramme, aucun logo d'un tiers) ─────────────── */
.cf-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; border-radius: 7px;
           background: var(--admin-couleur-marque); color: var(--admin-couleur-sur-marque); font-weight: 800;
           font-size: .8rem; letter-spacing: .02em; }
.cf-logo-grand { width: 48px; height: 48px; font-size: 1.1rem; border-radius: 10px; }

/* ── Les pages ─────────────────────────────────────────────────────────── */
.cf-page { padding: var(--cf-e6); max-width: 1280px; width: 100%; }
.cf-dans-le-cadre .cf-page { padding: var(--cf-e5); }
.cf-page > .admin-carte + .admin-carte { margin-top: var(--cf-e4); }
.cf-entete { margin-bottom: var(--cf-e5); }
.cf-surtitre { margin: 0 0 var(--cf-e1); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
               color: var(--admin-couleur-accent); }
.cf-discret { color: var(--admin-couleur-texte-discret); font-size: .88rem; }
.cf-rangee { display: flex; flex-wrap: wrap; gap: var(--cf-e2); align-items: center; }
.cf-liste-simple { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--cf-e2); }
.cf-a-venir ul { margin: var(--cf-e2) 0 var(--cf-e4); }
.cf-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: var(--cf-e3); }
.cf-table th, .cf-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--admin-couleur-bord); }
.cf-table th { color: var(--admin-couleur-texte-discret); font-weight: 600; }
.cf-bandeau-maquette { margin: var(--cf-e3) 0; padding: var(--cf-e2) var(--cf-e3); border-radius: var(--admin-rayon);
                       background: var(--admin-couleur-accent-doux); border: 1px dashed var(--admin-couleur-accent-bord);
                       font-size: .86rem; color: var(--admin-couleur-texte-second); }

/* ── P0 la connexion ───────────────────────────────────────────────────── */
.cf-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center;
                background: linear-gradient(160deg, var(--admin-couleur-fond) 0%, var(--admin-couleur-accent-doux) 100%); }
.cf-connexion-cadre { width: min(420px, 92vw); padding: var(--cf-e5) 0; }
.cf-connexion-marque { display: flex; align-items: center; gap: var(--cf-e3); margin-bottom: var(--cf-e5); }
.cf-connexion-marque p { margin: 0; }
.cf-connexion-nom { font-size: 1.4rem; font-weight: 750; color: var(--admin-couleur-titre); }
.cf-connexion-carte h1 { font-size: 1.3rem; }
.cf-formulaire { display: grid; gap: var(--cf-e3); }
.cf-formulaire label { display: grid; gap: var(--cf-e1); font-size: .88rem; font-weight: 550; color: var(--admin-couleur-texte-second); }
.cf-large { width: 100%; }
.cf-lien { font-size: .88rem; justify-self: start; }
.cf-refus { margin: 0; color: var(--admin-couleur-erreur); font-size: .88rem; }
.cf-succes { color: var(--admin-couleur-succes); }
.cf-separateur { display: flex; align-items: center; gap: var(--cf-e3); margin: var(--cf-e4) 0; color: var(--admin-couleur-texte-discret);
                 font-size: .8rem; }
.cf-separateur::before, .cf-separateur::after { content: ""; flex: 1; border-top: 1px solid var(--admin-couleur-bord); }
.cf-mention { text-align: center; margin-top: var(--cf-e4); }
[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════════
   LES 13 COMPOSANTS TRANSVERSES (gabarits/macros.html)
   ════════════════════════════════════════════════════════════════════════════ */
.cf-catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--cf-e4); align-items: start; }
.cf-vitrine { background: var(--admin-couleur-surface); border: 1px solid var(--admin-couleur-bord);
              border-radius: var(--admin-rayon-carte); padding: var(--cf-e4) var(--cf-e5); box-shadow: var(--admin-ombre); min-width: 0; }
.cf-vitrine-large { grid-column: 1 / -1; }
.cf-vitrine h2 { display: flex; align-items: center; gap: var(--cf-e2); font-size: 1rem; }
.cf-numero { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
             background: var(--admin-couleur-marque); color: var(--admin-couleur-sur-marque); font-size: .75rem; }

/* badges */
.cf-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--admin-rayon-pastille);
            font-size: .78rem; font-weight: 600; border: 1px solid transparent; }
.cf-statut-autonome { background: #e6f2ec; color: #22603c; }
.cf-statut-en_validation { background: #fdf1df; color: #87500f; }
.cf-statut-bascule { background: #fbe7e7; color: #9a2f2f; }
.cf-statut-suspendu { background: #eceff3; color: #4a5868; }
.cf-statut-clos { background: var(--admin-couleur-accent-doux); color: var(--admin-couleur-accent); }
.cf-badge-ok { background: #e6f2ec; color: #22603c; }
.cf-badge-attente { background: #fdf1df; color: #87500f; }
.cf-badge-refus { background: #fbe7e7; color: #9a2f2f; }
html[data-mode="sombre"] .cf-badge { filter: saturate(.8) brightness(.9); }

/* jauge de ton */
.cf-jauge-ton { display: inline-flex; align-items: center; gap: 3px; }
.cf-jauge-cran { width: 14px; height: 8px; border-radius: 2px; background: var(--admin-couleur-bord); }
.cf-jauge-plein.cf-ton-1 { background: var(--cf-ton-1); } .cf-jauge-plein.cf-ton-2 { background: var(--cf-ton-2); }
.cf-jauge-plein.cf-ton-3 { background: var(--cf-ton-3); } .cf-jauge-plein.cf-ton-4 { background: var(--cf-ton-4); }
.cf-jauge-plein.cf-ton-5 { background: var(--cf-ton-5); }
.cf-jauge-texte { margin-left: 6px; font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--admin-couleur-texte-second); }

/* étiquette de décision IA */
.cf-etiquette-ia { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem;
                   padding: 2px 8px 2px 2px; border-radius: var(--admin-rayon-pastille);
                   background: var(--admin-couleur-accent-doux); border: 1px solid var(--admin-couleur-accent-bord); }
.cf-etiquette-marque { padding: 1px 7px; border-radius: var(--admin-rayon-pastille); background: var(--admin-couleur-marque);
                       color: var(--admin-couleur-sur-marque); font-weight: 700; font-size: .7rem; }
.cf-etiquette-classement { font-weight: 600; }
.cf-score-bas { color: var(--admin-couleur-erreur); font-weight: 700; }
.cf-etiquette-pourquoi { font-size: .75rem; }

/* panneau « Pourquoi » */
.cf-pourquoi { margin-top: var(--cf-e2); border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon);
               background: var(--admin-couleur-fond); font-size: .84rem; }
.cf-pourquoi summary { cursor: pointer; padding: 6px 10px; font-weight: 600; color: var(--admin-couleur-accent); }
.cf-pourquoi dl { margin: 0; padding: 0 10px 10px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.cf-pourquoi dt { color: var(--admin-couleur-texte-discret); }
.cf-pourquoi dd { margin: 0; }

/* fil de conversation */
.cf-fil { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cf-e3); }
.cf-message { max-width: 92%; padding: var(--cf-e2) var(--cf-e3); border-radius: var(--admin-rayon-carte);
              border: 1px solid var(--admin-couleur-bord); background: var(--admin-couleur-fond); }
.cf-message-sortant { justify-self: end; background: var(--admin-couleur-accent-doux); border-color: var(--admin-couleur-accent-bord); }
.cf-message-tete { display: flex; align-items: center; gap: var(--cf-e2); font-size: .78rem; }
.cf-message-auteur { font-weight: 650; }
.cf-message-texte { margin: 4px 0; }
.cf-canal { padding: 0 6px; border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .03em; }
.cf-canal-sms { background: #e3eef6; color: #1f5f8b; } .cf-canal-email { background: #efe9f5; color: #5b3f80; }

/* frise de scénario */
.cf-frise { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; }
.cf-frise-etape { position: relative; flex: 1 1 0; min-width: 96px; padding: 22px 6px 0; display: grid; gap: 2px; font-size: .8rem; }
.cf-frise-etape::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 2px; background: var(--admin-couleur-bord-fort); }
.cf-frise-point { position: absolute; top: 1px; left: 6px; width: 14px; height: 14px; border-radius: 50%;
                  background: var(--admin-couleur-surface); border: 2px solid var(--admin-couleur-bord-fort); }
.cf-frise-faite .cf-frise-point { background: var(--admin-couleur-accent); border-color: var(--admin-couleur-accent); }
.cf-frise-faite::before { background: var(--admin-couleur-accent); }
.cf-frise-courante .cf-frise-point { border-color: var(--admin-couleur-accent); box-shadow: 0 0 0 4px var(--admin-couleur-accent-doux); }
.cf-frise-delai { font-weight: 700; color: var(--admin-couleur-titre); }
.cf-frise-courante .cf-frise-objectif { font-weight: 650; }

/* carte indicateur */
.cf-grille-indicateurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--cf-e3); }
.cf-indicateur { padding: var(--cf-e4); }
.cf-indicateur p { margin: 0; }
.cf-indicateur-libelle { font-size: .8rem; color: var(--admin-couleur-texte-discret); }
.cf-indicateur-valeur { font-size: 1.6rem; font-weight: 700; color: var(--admin-couleur-titre); font-variant-numeric: tabular-nums; }
.cf-indicateur-evolution { font-size: .78rem; }
.cf-hausse { color: var(--admin-couleur-succes); } .cf-baisse { color: var(--admin-couleur-erreur); }

/* éditeur de message */
.cf-editeur { display: grid; gap: var(--cf-e2); grid-template-columns: 1fr 1fr; }
.cf-editeur-barre, .cf-editeur-texte, .cf-mention-verrouillee, .cf-editeur-pied { grid-column: 1; }
.cf-apercu { grid-column: 2; grid-row: 1 / span 4; border: 1px solid var(--admin-couleur-bord); border-radius: var(--admin-rayon-carte);
             padding: var(--cf-e4); background: var(--admin-couleur-fond); }
.cf-editeur-barre { display: flex; flex-wrap: wrap; gap: var(--cf-e2); align-items: center; justify-content: space-between; }
.cf-onglets { display: inline-flex; border: 1px solid var(--admin-couleur-bord-fort); border-radius: var(--admin-rayon); overflow: hidden; }
.cf-onglets button { border: 0; background: var(--admin-couleur-surface); padding: 4px 12px; cursor: pointer; }
.cf-onglets button[aria-selected="true"] { background: var(--admin-couleur-accent); color: var(--admin-couleur-accent-texte); }
.cf-variables { display: flex; flex-wrap: wrap; gap: 4px; }
.cf-variables .admin-bouton { font-family: var(--admin-police-mono); font-size: .75rem; }
.cf-editeur-texte { width: 100%; resize: vertical; }
.cf-mention-verrouillee { margin: 0; font-size: .8rem; color: var(--admin-couleur-texte-second); }
.cf-compteur { font-size: .8rem; color: var(--admin-couleur-texte-discret); font-variant-numeric: tabular-nums; }
.cf-bulle-sms { margin: 0; max-width: 300px; padding: 10px 12px; border-radius: 16px 16px 16px 4px;
                background: var(--admin-couleur-surface); border: 1px solid var(--admin-couleur-bord); white-space: pre-wrap; }
.cf-apercu-objet { font-weight: 650; border-bottom: 1px solid var(--admin-couleur-bord); padding-bottom: 6px; margin-top: 0; }
@media (max-width: 900px) { .cf-editeur { grid-template-columns: 1fr; } .cf-apercu { grid-column: 1; grid-row: auto; } }

/* barre de filtres */
.cf-filtres { display: flex; flex-wrap: wrap; gap: var(--cf-e3); align-items: end; }
.cf-filtres label { display: grid; gap: 2px; font-size: .78rem; color: var(--admin-couleur-texte-discret); }
.cf-filtres select { min-width: 150px; }

/* synchronisation ARPEGE */
.cf-sync { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; padding: 2px 10px;
           border-radius: var(--admin-rayon-pastille); border: 1px solid var(--admin-couleur-bord); }
.cf-sync-pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--admin-couleur-succes); }
.cf-sync-en_retard .cf-sync-pastille { background: var(--admin-couleur-alerte); }

/* interrupteur d'arrêt de l'IA */
.cf-interrupteur { display: flex; align-items: center; gap: var(--cf-e3); padding: 6px 0; }
.cf-interrupteur-bouton { position: relative; width: 44px; height: 24px; flex: none; border-radius: 12px; cursor: pointer;
                          border: 1px solid var(--admin-couleur-bord-fort); background: var(--admin-couleur-erreur); }
.cf-interrupteur-bouton[aria-checked="true"] { background: var(--admin-couleur-succes); }
.cf-interrupteur-curseur { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
                           background: #fff; transition: left .15s ease; }
.cf-interrupteur-bouton[aria-checked="true"] .cf-interrupteur-curseur { left: 22px; }

/* visionneuse de pièce jointe */
.cf-visionneuse { display: flex; gap: var(--cf-e4); margin: 0; align-items: flex-start; }
.cf-visionneuse figcaption p { margin: 0 0 6px; }
.cf-visionneuse-nom { font-weight: 650; }
.cf-feuille { fill: var(--admin-couleur-surface); stroke: var(--admin-couleur-bord-fort); }
.cf-ligne-texte { fill: var(--admin-couleur-bord-fort); }
.cf-feuille-type { font: 700 11px var(--admin-police); fill: var(--admin-couleur-accent); }
.cf-gestes { display: flex; gap: var(--cf-e2); flex-wrap: wrap; }

/* bloc paiement */
.cf-paiement-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--cf-e2); }
.cf-paiement-tete p { margin: 0; }
.cf-montant { font-size: 1.25rem; color: var(--admin-couleur-titre); font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════════════════
   (#2.3) LES PAGES P1 À P5
   ════════════════════════════════════════════════════════════════════════════ */
:root { --cf-serie-sms: #1a6fb0; --cf-serie-email: #c0672b; }               /* validées : validate_palette.js, clair */
html[data-mode="sombre"] { --cf-serie-sms: #3b8fd9; --cf-serie-email: #d9773a; } /* validées contre #18212b */
.cf-bloc { margin: var(--cf-e5) 0; }
.cf-page > .cf-filtres { margin-bottom: var(--cf-e4); }
.cf-deux-colonnes { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--cf-e4); align-items: start; }
.cf-deux-colonnes > * { min-width: 0; }
.cf-deux-colonnes .cf-bloc { margin: 0; }
.cf-fiche > div { display: grid; gap: var(--cf-e4); }
@media (max-width: 1000px) { .cf-deux-colonnes { grid-template-columns: 1fr; } }
.cf-grille-serree { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.cf-plier { margin-top: var(--cf-e2); }
.cf-plier summary { cursor: pointer; color: var(--admin-couleur-accent); font-size: .88rem; }
.cf-entete-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--cf-e3); }
.cf-nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* la courbe d'activité (2 séries : SMS, e-mail) */
.cf-courbe { margin: 0; }
.cf-courbe svg { width: 100%; height: auto; display: block; }
.cf-legende { display: flex; flex-wrap: wrap; gap: var(--cf-e4); font-size: .82rem; color: var(--admin-couleur-texte-second); margin-bottom: var(--cf-e2); }
.cf-legende-item { display: inline-flex; align-items: center; gap: 6px; }
.cf-legende-trait { width: 16px; height: 3px; border-radius: 2px; background: currentColor; }
.cf-legende-trait.cf-serie-sms { background: var(--cf-serie-sms); } .cf-legende-trait.cf-serie-email { background: var(--cf-serie-email); }
.cf-grille-ligne { stroke: var(--admin-couleur-bord); stroke-width: 1; }
.cf-axe { font: 11px var(--admin-police); fill: var(--admin-couleur-texte-discret); }
polyline.cf-serie { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
polyline.cf-serie-sms { stroke: var(--cf-serie-sms); } polyline.cf-serie-email { stroke: var(--cf-serie-email); }
circle.cf-point { stroke: var(--admin-couleur-surface); stroke-width: 2; }
circle.cf-serie-sms { fill: var(--cf-serie-sms); } circle.cf-serie-email { fill: var(--cf-serie-email); }
circle.cf-point:hover { r: 6; }

/* la file des alertes */
.cf-alertes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
.cf-alerte { border-left: 3px solid var(--admin-couleur-bord-fort); padding: 6px 10px; border-radius: 0 var(--admin-rayon) var(--admin-rayon) 0;
             background: var(--admin-couleur-fond); font-size: .86rem; }
.cf-alerte a { display: grid; text-decoration: none; color: inherit; }
.cf-alerte a:hover b { color: var(--admin-couleur-accent); }
.cf-alerte-haute { border-left-color: var(--admin-couleur-erreur); }
.cf-alerte-moyenne { border-left-color: var(--admin-couleur-alerte); }

/* P2 */
.cf-portefeuilles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--cf-e3); }
.cf-portefeuille { display: grid; gap: 6px; padding: var(--cf-e4); }
.cf-portefeuille p { margin: 0; }
.cf-portefeuille-nom { font-weight: 650; color: var(--admin-couleur-titre); }
.cf-portefeuille label, .cf-actions-groupees label, .cf-actions-dossier label, .cf-escalade label, .cf-validation label {
  display: inline-grid; gap: 2px; font-size: .78rem; color: var(--admin-couleur-texte-discret); }
.cf-actions-groupees { display: flex; flex-wrap: wrap; gap: var(--cf-e3); align-items: end; padding: var(--cf-e3);
                       background: var(--admin-couleur-accent-doux); border-radius: var(--admin-rayon); }
.cf-defile { overflow-x: auto; }
.cf-table-dossiers td { vertical-align: middle; white-space: nowrap; }
.cf-table-dossiers tbody tr:hover { background: var(--admin-couleur-survol); }
.cf-sync-pastille-a_jour { background: var(--admin-couleur-succes); }
.cf-sync-pastille-en_retard { background: var(--admin-couleur-alerte); }
.cf-table-dossiers .cf-sync-pastille { display: inline-block; }

/* P3 */
.cf-arpege-tete { display: flex; flex-wrap: wrap; gap: var(--cf-e3); align-items: center; justify-content: space-between; }
.cf-grille-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--cf-e4); margin: var(--cf-e3) 0 0; }
.cf-grille-dl dt { color: var(--admin-couleur-texte-discret); } .cf-grille-dl dd { margin: 0; }
.cf-actions-dossier { display: flex; flex-wrap: wrap; gap: var(--cf-e4); align-items: end; margin-top: var(--cf-e4); }
.cf-page > .admin-carte + .cf-deux-colonnes { margin-top: var(--cf-e4); }
.cf-validations-faites { margin-bottom: var(--cf-e3); font-size: .86rem; }
.cf-choix-dossier select { max-width: 320px; }

/* P4 et P5 */
.cf-escalade, .cf-validation { display: grid; gap: var(--cf-e3); margin-bottom: var(--cf-e3); border-left: 4px solid var(--admin-couleur-bord-fort); }
.cf-urgence-haute { border-left-color: var(--admin-couleur-erreur); }
.cf-urgence-moyenne { border-left-color: var(--admin-couleur-alerte); }
.cf-escalade-tete { display: flex; flex-wrap: wrap; gap: var(--cf-e3); align-items: center; }
.cf-pris { margin-left: auto; font-size: .86rem; }
.cf-resume { margin: 0; }
.cf-urgence { background: var(--admin-couleur-survol); }
.cf-motif { background: #fbe7e7; color: #9a2f2f; }
.cf-reponse { display: grid; gap: var(--cf-e2); padding-top: var(--cf-e3); border-top: 1px dashed var(--admin-couleur-bord); }
.cf-colonne { display: grid !important; gap: 4px; }
.cf-colonne textarea { width: 100%; }
.cf-validation .cf-rangee { margin-top: var(--cf-e2); }
.cf-grille-pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--cf-e3); }

/* ════════════════════════════════════════════════════════════════════════════
   (#2.4) LES PAGES P6 À P13
   ════════════════════════════════════════════════════════════════════════════ */
.cf-colonnes-inverse { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 1000px) { .cf-colonnes-inverse { grid-template-columns: 1fr; } }
.cf-ligne-active { background: var(--admin-couleur-accent-doux); }
.cf-ligne-active a { font-weight: 650; }
.cf-formulaire-ligne { display: flex; flex-wrap: wrap; gap: var(--cf-e2); align-items: end; margin: var(--cf-e2) 0; }
.cf-formulaire-ligne label { display: inline-grid; gap: 2px; font-size: .8rem; color: var(--admin-couleur-texte-discret); }
.cf-etapes input, .cf-etapes select { padding: 4px 6px; }
.cf-echelle li { padding: var(--cf-e2) 0; border-bottom: 1px solid var(--admin-couleur-bord); }
.cf-exemple { margin: 4px 0 0; font-style: italic; color: var(--admin-couleur-texte-second); }
.cf-etiquettes { list-style: none; padding: 0; margin: 0 0 var(--cf-e3); display: flex; flex-wrap: wrap; gap: 6px; }
.cf-etiquettes li form { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: var(--admin-rayon-pastille);
                         background: var(--admin-couleur-accent-doux); border: 1px solid var(--admin-couleur-accent-bord); font-size: .82rem; }
.cf-retirer { border: 0; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--admin-couleur-texte-discret); padding: 0 4px; }
.cf-retirer:hover { color: var(--admin-couleur-erreur); }
.cf-liste-modeles li { display: flex; justify-content: space-between; gap: var(--cf-e2); align-items: center; padding: 4px 6px; border-radius: var(--admin-rayon); }
.cf-mention-bloc { padding: var(--cf-e2); border: 1px dashed var(--admin-couleur-bord-fort); border-radius: var(--admin-rayon); }
.cf-en-ligne { display: inline; margin-left: var(--cf-e2); }
.cf-journal td { vertical-align: top; font-size: .82rem; }
.cf-avant { color: var(--admin-couleur-texte-discret); text-decoration: line-through; }
.cf-echantillon { margin-bottom: var(--cf-e3); }
.cf-case { display: inline-flex !important; align-items: center; gap: 4px; font-size: .84rem; color: var(--admin-couleur-texte) !important; }
.cf-barres { width: 100%; height: auto; }
.cf-barre { fill: var(--cf-serie-sms); }
.cf-routes ul { margin: 4px 0; padding-left: 18px; font-size: .86rem; }
.cf-apercu-mention { padding: var(--cf-e3); border-left: 3px solid var(--admin-couleur-accent); background: var(--admin-couleur-fond); font-size: .88rem; }