/* ==========================================================================
   COS UI — esthétique des outils internes (administration + espace Gestion)
   2026-10 · sobre, moderne, épuré · thèmes clair / sombre
   --------------------------------------------------------------------------
   Les pages utilisent Tailwind (CDN). Cette feuille :
   1. définit les jetons de couleur COS (clair / sombre) ;
   2. harmonise rayons, ombres, transitions et champs de formulaire ;
   3. traduit en thème sombre les classes Tailwind déjà présentes dans les
      pages (bg-white, text-slate-*, border-slate-*…), sans réécrire chaque page.
   Toutes les règles sont préfixées par html.cos-ui pour l'emporter sur les
   styles générés par Tailwind (injectés après cette feuille).
   ========================================================================== */

html.cos-ui {
  --c-primary: #1f5c8b;
  --c-primary-strong: #164058;
  --c-primary-soft: #e8f0f7;
  --c-accent: #e48a00;
  --c-bg: #f4f6f8;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafb;
  --c-hover: #f1f4f7;
  --c-border: #e1e6eb;
  --c-border-strong: #cdd5dd;
  --c-text: #17222d;
  --c-text-2: #3d4b59;
  --c-muted: #6a7887;
  --c-faint: #7c8895;
  --c-field: #ffffff;
  --c-side: #ffffff;
  --c-side-text: #3d4b59;
  --c-side-active: #e8f0f7;
  --c-side-active-text: #164058;
  --sh-1: 0 1px 2px rgba(16, 32, 48, .05);
  --sh-2: 0 1px 2px rgba(16, 32, 48, .05), 0 6px 18px -6px rgba(16, 32, 48, .10);
  --sh-3: 0 2px 4px rgba(16, 32, 48, .06), 0 16px 32px -10px rgba(16, 32, 48, .16);
  --ring: 0 0 0 3px rgba(31, 92, 139, .22);
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
html.cos-ui.dark {
  --c-primary: #5b9bd0;
  --c-primary-strong: #8fbde3;
  --c-primary-soft: rgba(91, 155, 208, .14);
  --c-accent: #f2a93b;
  --c-bg: #0e1318;
  --c-surface: #151c23;
  --c-surface-2: #1a222b;
  --c-hover: #1f2933;
  --c-border: #26313c;
  --c-border-strong: #334150;
  --c-text: #e5ebf1;
  --c-text-2: #c3ccd5;
  --c-muted: #8f9cab;
  --c-faint: #6d7a88;
  --c-field: #10171d;
  --c-side: #121920;
  --c-side-text: #b7c2cd;
  --c-side-active: rgba(91, 155, 208, .14);
  --c-side-active-text: #e5ebf1;
  --sh-1: 0 1px 0 rgba(0, 0, 0, .25);
  --sh-2: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .55);
  --sh-3: 0 2px 0 rgba(0, 0, 0, .3), 0 18px 36px -12px rgba(0, 0, 0, .7);
  --ring: 0 0 0 3px rgba(91, 155, 208, .3);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html.cos-ui body {
  background: var(--c-bg); color: var(--c-text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'tnum' 0; letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}
html.cos-ui ::selection { background: rgba(31, 92, 139, .22); }
html.cos-ui table td, html.cos-ui table th, html.cos-ui .tabular { font-variant-numeric: tabular-nums; }
html.cos-ui h1 { letter-spacing: -.02em; }
html.cos-ui .ui-ico { display: inline-block; flex: none; vertical-align: -0.2em; }

/* Transitions naturelles */
html.cos-ui a, html.cos-ui button, html.cos-ui summary, html.cos-ui label, html.cos-ui input, html.cos-ui select, html.cos-ui textarea, html.cos-ui tr, html.cos-ui .ui-card {
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), opacity .16s var(--ease);
}
html.cos-ui :focus-visible { outline: none; box-shadow: var(--ring); }
@media (prefers-reduced-motion: reduce) { html.cos-ui * { transition: none !important; animation: none !important; } }

/* ---------- Rayons : plus nets ---------- */
html.cos-ui .rounded { border-radius: var(--r-sm); }
html.cos-ui .rounded-md, html.cos-ui .rounded-lg { border-radius: var(--r-md); }
html.cos-ui .rounded-xl { border-radius: var(--r-lg); }
html.cos-ui .rounded-2xl, html.cos-ui .rounded-3xl { border-radius: var(--r-xl); }
html.cos-ui .rounded-r { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* Étiquettes de statut : capsules discrètes */
html.cos-ui .ui-tag, html.cos-ui span.rounded-full.text-\[11px\], html.cos-ui span.rounded-full.text-\[10px\], html.cos-ui span.rounded-full.text-xs {
  border-radius: var(--r-sm); font-weight: 600; letter-spacing: .01em;
}

/* ---------- Surfaces & cartes ---------- */
html.cos-ui .bg-white { background-color: var(--c-surface); }
html.cos-ui .bg-white.border, html.cos-ui .ui-card { box-shadow: var(--sh-1); }
html.cos-ui .bg-slate-50 { background-color: var(--c-surface-2); }
html.cos-ui .bg-slate-50\/95 { background-color: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(6px); }
html.cos-ui .bg-slate-100 { background-color: var(--c-hover); }
html.cos-ui .border-slate-100 { border-color: color-mix(in srgb, var(--c-border) 70%, transparent); }
html.cos-ui .border-slate-200 { border-color: var(--c-border); }
html.cos-ui .border-slate-300 { border-color: var(--c-border-strong); }
html.cos-ui .divide-slate-100 > * + * { border-color: color-mix(in srgb, var(--c-border) 70%, transparent); }
html.cos-ui .hover\:bg-slate-50:hover, html.cos-ui .hover\:bg-slate-100:hover { background-color: var(--c-hover); }
html.cos-ui .shadow, html.cos-ui .hover\:shadow:hover { box-shadow: var(--sh-2); }
html.cos-ui .shadow-lg, html.cos-ui .hover\:shadow-lg:hover { box-shadow: var(--sh-2); }
html.cos-ui .shadow-xl, html.cos-ui .shadow-2xl, html.cos-ui .hover\:shadow-xl:hover { box-shadow: var(--sh-3); }
/* Cartes cliquables : relief discret au survol */
html.cos-ui a.bg-white.border:hover, html.cos-ui .ui-card-link:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-2); }
html.cos-ui table tbody tr { border-color: color-mix(in srgb, var(--c-border) 70%, transparent); }
html.cos-ui thead tr { border-color: var(--c-border); }
html.cos-ui thead th { font-weight: 600; letter-spacing: .04em; }

/* ---------- Texte ---------- */
html.cos-ui .text-slate-900, html.cos-ui .text-slate-800 { color: var(--c-text); }
html.cos-ui .text-slate-700, html.cos-ui .text-slate-600 { color: var(--c-text-2); }
html.cos-ui .text-slate-500 { color: var(--c-muted); }
html.cos-ui .text-slate-400 { color: var(--c-faint); }
html.cos-ui .text-cos-dark { color: var(--c-primary-strong); }
html.cos-ui .text-cos-blue, html.cos-ui .hover\:text-cos-blue:hover { color: var(--c-primary); }
html.cos-ui .hover\:text-cos-dark:hover { color: var(--c-primary-strong); }
html.cos-ui .bg-cos-light, html.cos-ui .has-\[\:checked\]\:bg-cos-light:has(:checked) { background-color: var(--c-primary-soft); }
html.cos-ui .has-\[\:checked\]\:border-cos-blue:has(:checked) { border-color: var(--c-primary); }

/* ---------- Boutons ---------- */
html.cos-ui .bg-cos-blue { background-color: #1f5c8b; }
html.cos-ui .bg-cos-blue:hover, html.cos-ui .hover\:bg-cos-dark:hover { background-color: #184b72; }
html.cos-ui .bg-cos-dark { background-color: #164058; }
html.cos-ui button.bg-cos-blue, html.cos-ui a.bg-cos-blue, html.cos-ui button.bg-cos-dark, html.cos-ui a.bg-cos-dark,
html.cos-ui button.bg-emerald-600, html.cos-ui a.bg-emerald-600, html.cos-ui button.bg-slate-800, html.cos-ui a.bg-slate-800 {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 1px 2px rgba(16, 32, 48, .18);
}
html.cos-ui button.bg-cos-blue:active, html.cos-ui button.bg-emerald-600:active, html.cos-ui button.bg-slate-800:active { transform: translateY(1px); }
html.cos-ui .bg-slate-800 { background-color: #22303d; }
html.cos-ui .bg-slate-800:hover { background-color: #2b3b4a; }
html.cos-ui .bg-emerald-600 { background-color: #1d7a4c; }
html.cos-ui .bg-emerald-600:hover, html.cos-ui .hover\:bg-emerald-700:hover { background-color: #186641; }
html.cos-ui button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Champs de formulaire ---------- */
html.cos-ui input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),
html.cos-ui select, html.cos-ui textarea {
  background-color: var(--c-field); color: var(--c-text); border-color: var(--c-border-strong);
}
html.cos-ui input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):hover,
html.cos-ui select:hover, html.cos-ui textarea:hover { border-color: color-mix(in srgb, var(--c-primary) 45%, var(--c-border-strong)); }
html.cos-ui input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):focus,
html.cos-ui select:focus, html.cos-ui textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--ring); }
html.cos-ui input::placeholder, html.cos-ui textarea::placeholder { color: var(--c-faint); }
html.cos-ui input[type=checkbox], html.cos-ui input[type=radio] { accent-color: var(--c-primary); width: 15px; height: 15px; vertical-align: -2px; }
html.cos-ui .field { background: var(--c-field); color: var(--c-text); border-color: var(--c-border-strong); border-radius: var(--r-md); }
html.cos-ui .lbl { color: var(--c-muted); }
html.cos-ui kbd { background: var(--c-hover); border-color: var(--c-border-strong); color: var(--c-text-2); }

/* ---------- Couleurs d'état (adoucies) ---------- */
html.cos-ui .bg-emerald-50 { background-color: #edf7f1; } html.cos-ui .bg-emerald-100 { background-color: #dcf0e4; }
html.cos-ui .bg-red-50 { background-color: #fbf0ef; } html.cos-ui .bg-red-100 { background-color: #f7e0dd; }
html.cos-ui .bg-amber-50 { background-color: #fdf6e9; } html.cos-ui .bg-amber-100 { background-color: #faebcd; }
html.cos-ui .bg-orange-50 { background-color: #fdf3ea; } html.cos-ui .bg-orange-100 { background-color: #fbe5d0; }

/* ---------- Thème sombre : traduction des classes existantes ---------- */
html.cos-ui.dark .text-white { color: #f4f7fa; }
html.cos-ui.dark .bg-slate-200 { background-color: #263240; }
html.cos-ui.dark .bg-slate-300 { background-color: #334150; }
html.cos-ui.dark .bg-slate-900 { background-color: #0b1015; }
html.cos-ui.dark .text-slate-300, html.cos-ui.dark .text-slate-200 { color: var(--c-muted); }
html.cos-ui.dark .text-slate-100 { color: var(--c-text); }
html.cos-ui.dark .text-cos-accent { color: var(--c-accent); }
html.cos-ui.dark .bg-cos-dark { background-color: #22567f; }
html.cos-ui.dark .bg-cos-blue { background-color: #2a6a9c; }
html.cos-ui.dark .bg-cos-blue:hover, html.cos-ui.dark .hover\:bg-cos-dark:hover { background-color: #337bb3; }
html.cos-ui.dark .border-cos-blue { border-color: var(--c-primary); }
html.cos-ui.dark .bg-emerald-50 { background-color: rgba(52, 168, 107, .12); } html.cos-ui.dark .bg-emerald-100 { background-color: rgba(52, 168, 107, .2); }
html.cos-ui.dark .bg-red-50 { background-color: rgba(229, 96, 82, .12); } html.cos-ui.dark .bg-red-100 { background-color: rgba(229, 96, 82, .2); }
html.cos-ui.dark .bg-amber-50 { background-color: rgba(232, 160, 48, .12); } html.cos-ui.dark .bg-amber-100 { background-color: rgba(232, 160, 48, .2); }
html.cos-ui.dark .bg-orange-50 { background-color: rgba(236, 132, 60, .12); } html.cos-ui.dark .bg-orange-100 { background-color: rgba(236, 132, 60, .2); }
html.cos-ui.dark .bg-blue-50, html.cos-ui.dark .bg-blue-100, html.cos-ui.dark .bg-sky-100 { background-color: rgba(91, 155, 208, .18); }
html.cos-ui.dark .bg-indigo-100 { background-color: rgba(129, 140, 248, .18); } html.cos-ui.dark .bg-purple-100 { background-color: rgba(168, 120, 220, .18); }
html.cos-ui.dark .border-emerald-200 { border-color: rgba(52, 168, 107, .35); } html.cos-ui.dark .border-red-200 { border-color: rgba(229, 96, 82, .35); }
html.cos-ui.dark .border-amber-200, html.cos-ui.dark .border-amber-300 { border-color: rgba(232, 160, 48, .35); }
html.cos-ui.dark .border-orange-200, html.cos-ui.dark .border-orange-300 { border-color: rgba(236, 132, 60, .35); }
html.cos-ui.dark .text-emerald-600, html.cos-ui.dark .text-emerald-700, html.cos-ui.dark .text-emerald-800 { color: #6dd39b; }
html.cos-ui.dark .text-red-500, html.cos-ui.dark .text-red-600, html.cos-ui.dark .text-red-700 { color: #f08a7e; }
html.cos-ui.dark .text-amber-600, html.cos-ui.dark .text-amber-700, html.cos-ui.dark .text-amber-800, html.cos-ui.dark .text-amber-900, html.cos-ui.dark .text-amber-950 { color: #f2bd6b; }
html.cos-ui.dark .text-orange-700, html.cos-ui.dark .text-orange-800, html.cos-ui.dark .text-orange-900 { color: #f3a46b; }
html.cos-ui.dark .text-blue-700, html.cos-ui.dark .text-sky-700 { color: #8fbde3; }
html.cos-ui.dark .text-indigo-700 { color: #a5b0fb; } html.cos-ui.dark .text-purple-700, html.cos-ui.dark .text-violet-700 { color: #c9a5ef; }
html.cos-ui.dark .bg-amber-400 { background-color: #c98a1e; }
html.cos-ui.dark img { opacity: .96; }
html.cos-ui.dark iframe.bg-white { background: #fff; }
html.cos-ui.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.cos-ui.dark ::-webkit-scrollbar-thumb { background: #2b3744; border-radius: 6px; border: 2px solid var(--c-bg); }
html.cos-ui.dark ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Coque de l'application (barre latérale + barre du haut) ---------- */
.ui-side {
  background: var(--c-side); border-right: 1px solid var(--c-border); color: var(--c-side-text);
  width: 252px; flex: none; display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0;
}
.ui-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; color: var(--c-primary-strong); text-decoration: none; }
.ui-brand b { font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--c-text); }
.ui-brand small { display: block; font-size: 11.5px; color: var(--c-muted); font-weight: 500; margin-top: 1px; }
.ui-space { margin: 2px 12px 10px; padding: 9px 10px; border-radius: var(--r-md); display: flex; gap: 9px; align-items: center; font-size: 13px; font-weight: 600; color: var(--c-text); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.ui-space i { width: 3px; align-self: stretch; border-radius: 2px; }
.ui-nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.ui-nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0; border-radius: var(--r-md); font-size: 13.5px; font-weight: 500; color: var(--c-side-text); text-decoration: none; position: relative; }
.ui-nav a .ui-ico { color: var(--c-faint); }
.ui-nav a:hover { background: var(--c-hover); color: var(--c-text); }
.ui-nav a:hover .ui-ico { color: var(--c-text-2); }
.ui-nav a.on { background: var(--c-side-active); color: var(--c-side-active-text); font-weight: 600; }
.ui-nav a.on .ui-ico { color: var(--c-primary); }
.ui-nav a.on::before { content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-primary); }
.ui-nav .sep { height: 1px; background: var(--c-border); margin: 8px 6px; }
.ui-nav .grp { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); padding: 12px 10px 4px; }
.ui-side-foot { border-top: 1px solid var(--c-border); padding: 10px; font-size: 12.5px; }
.ui-side-foot a, .ui-side-foot button { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--r-md); color: var(--c-muted); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.ui-side-foot a:hover, .ui-side-foot button:hover { background: var(--c-hover); color: var(--c-text); }
.ui-side-foot .grp { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); padding: 4px 10px 2px; }

.ui-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-border); }
.ui-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); min-width: 0; }
.ui-crumb b { color: var(--c-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 8px; border-radius: var(--r-md); color: var(--c-text-2); border: 1px solid transparent; font-size: 13px; text-decoration: none; background: transparent; cursor: pointer; }
.ui-iconbtn:hover { background: var(--c-hover); color: var(--c-text); }
.ui-seg { display: inline-flex; padding: 2px; border-radius: 7px; background: var(--c-hover); border: 1px solid var(--c-border); }
.ui-seg button { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 5px; color: var(--c-muted); border: 0; background: transparent; cursor: pointer; }
.ui-seg button:hover { color: var(--c-text); }
.ui-seg button.on { background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-1); }
.ui-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.ui-content { padding: 28px 28px 56px; max-width: 1180px; width: 100%; margin: 0 auto; }
.ui-overlay { display: none; }
@media (max-width: 1023px) {
  .ui-side { position: fixed; left: 0; top: 0; z-index: 50; transform: translateX(-100%); transition: transform .22s var(--ease); box-shadow: var(--sh-3); }
  body.ui-nav-open .ui-side { transform: none; }
  body.ui-nav-open .ui-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 16, 22, .4); }
  .ui-content { padding: 20px 16px 48px; }
  .ui-top { padding: 0 12px; }
}
@media (min-width: 1024px) { .ui-only-mobile { display: none !important; } }
@media print { .ui-side, .ui-top { display: none !important; } .ui-content { padding: 0; } }

/* Tuiles d'accueil et vues d'ensemble */
.ui-tile { position: relative; display: flex; flex-direction: column; padding: 22px; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--sh-1); text-decoration: none; color: inherit; overflow: hidden; }
.ui-tile:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-3); transform: translateY(-2px); }
.ui-tile .ui-tile-ico { width: 40px; height: 40px; border-radius: var(--r-lg); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ui-tile::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tile-c, var(--c-primary)); opacity: .9; }
.ui-kpi { padding: 16px 18px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--sh-1); }
.ui-kpi .k { font-size: 11.5px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.ui-kpi .v { font-size: 24px; font-weight: 700; color: var(--c-text); margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ui-quick { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); font-size: 13.5px; font-weight: 600; color: var(--c-text); text-decoration: none; box-shadow: var(--sh-1); }
.ui-quick:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-2); }
.ui-quick .ui-ico { color: var(--c-primary); }
.ui-quick .ui-ico:last-child { margin-left: auto; color: var(--c-faint); }

/* Apparition douce du contenu */
@keyframes uiIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html.cos-ui .ui-content > * { animation: uiIn .28s var(--ease) both; }

/* Pages d'authentification (Espace Gestion) */
.ui-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: var(--c-bg); background-image: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--c-primary) 10%, transparent), transparent 60%), radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, #d9822b 8%, transparent), transparent 60%); }
.ui-auth-top { position: fixed; top: 14px; right: 16px; }
.ui-auth-card { width: 100%; max-width: 400px; padding: 32px; border-radius: var(--r-xl); background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--sh-3); animation: uiIn .35s var(--ease) both; }
.ui-auth-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-lg); color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 10%, transparent); }

/* Session d'appel & éditeur d'arborescence : variantes sombres */
html.cos-ui.dark .ph-say { background: color-mix(in srgb, #3b82c4 14%, var(--c-surface)); border-left-color: #4f93c9; }
html.cos-ui.dark .ph-say.f { background: color-mix(in srgb, #a05bc0 14%, var(--c-surface)); border-left-color: #a970c4; }
html.cos-ui.dark .ph-ph { background: rgba(228,138,0,.18); color: #f2b65c; }
html.cos-ui.dark .ph-note { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-muted); }
html.cos-ui.dark .ph-warn { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.35); color: #f19d95; }
html.cos-ui.dark .ph-ans { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text); }
html.cos-ui.dark .ph-ans:hover { background: var(--c-hover); border-color: var(--c-primary); }
html.cos-ui.dark .ph-ans kbd { background: var(--c-surface-2); border-color: var(--c-border-strong); color: var(--c-muted); }
html.cos-ui.dark .ph-ans.obj { background: rgba(228,138,0,.08); border-color: rgba(228,138,0,.45); }
html.cos-ui.dark .ph-ans.ret { background: rgba(30,132,73,.1); border-color: rgba(30,132,73,.5); }
html.cos-ui.dark .ph-steps span { background: var(--c-surface-2); color: var(--c-muted); }
html.cos-ui.dark .ph-steps span.done { background: rgba(59,130,196,.2); color: #9cc4e6; }
html.cos-ui.dark .ph-sig label { border-color: var(--c-border); }
html.cos-ui.dark .ph-sig label.on { background: rgba(30,132,73,.14); border-color: rgba(30,132,73,.6); }
html.cos-ui.dark .ed-in { background: var(--c-field); border-color: var(--c-border-strong); color: var(--c-text); }
html.cos-ui.dark .ed-l { color: var(--c-muted); }
html.cos-ui.dark .nd:hover { background: var(--c-hover); }
html.cos-ui.dark #map svg rect { fill-opacity: .14; }
html.cos-ui.dark #map svg text { fill: var(--c-text); }
html.cos-ui h1.font-extrabold { font-weight: 700; letter-spacing: -.02em; }
html.cos-ui h2.font-extrabold, html.cos-ui .font-extrabold { font-weight: 700; }
html.cos-ui a.rounded-full.text-xs, html.cos-ui button.rounded-full.text-xs, html.cos-ui a.rounded-full.text-sm { border-radius: var(--r-md); }
/* Logo réel du site (image) : pastille claire en thème sombre pour rester lisible quelle que soit sa couleur */
.ui-logo { display: block; object-fit: contain; flex-shrink: 0; }
/* 2026-10-17 : logo noir en thème clair, logo blanc en thème sombre (voir ui_logo_mark()) — plus de pastille */
.ui-logo--on-dark { display: none; }
html.cos-ui.dark .ui-logo--on-light { display: none; }
html.cos-ui.dark .ui-logo--on-dark { display: block; }

/* Audit thème sombre (2026-10-17) — blocs restés clairs en thème sombre */
html.cos-ui.dark .rdv-card { background: var(--c-surface); border-color: var(--c-border); }
html.cos-ui.dark .rdv-met label { border-color: var(--c-border-strong); }
html.cos-ui.dark .rdv-met label.on { background: var(--c-hover); border-color: var(--c-text-2); }
/* Écran de connexion Espace Gestion (2026-10-17) : sobre noir / gris / blanc, sans dégradé bleu */
html.cos-ui .ui-auth { background-image: none; }
html.cos-ui .ui-auth h1 { color: var(--c-text); }
html.cos-ui .ui-auth .ui-auth-btn { background: #111; color: #fff; }
html.cos-ui .ui-auth .ui-auth-btn:hover { background: #2a2a2a; }
html.cos-ui .ui-auth a:hover { color: var(--c-text); }
html.cos-ui .ui-auth input:focus { border-color: var(--c-text-2); box-shadow: 0 0 0 3px rgba(0,0,0,.08); }
html.cos-ui.dark .ui-auth { background: #111; }
html.cos-ui.dark .ui-auth-card { background: #1a1a1a; border-color: #2a2a2a; }
html.cos-ui.dark .ui-auth .ui-auth-btn { background: #f1f1ef; color: #111; }
html.cos-ui.dark .ui-auth .ui-auth-btn:hover { background: #fff; }
html.cos-ui.dark .ui-auth-card input { background: #141414 !important; border-color: #3a3a3a !important; color: #f1f1ef; }
html.cos-ui.dark .ui-auth p.text-slate-500 { color: #a6a6a3; }