/* ==========================================================================
   NEXUS SYSTEM — thème « Charte CCA » (référence : plateforme e-Achats, DSIPE/SI)
   Chargé EN DERNIER sur chaque page : il réaffecte les variables historiques de NEXUS
   (--bg, --surface, --text, --primary…) aux jetons de la charte (charte-cca.css) puis
   aligne les composants communs (menu, cartes, tuiles, tableaux, boutons, champs, puces).
   Retour à l'ancien thème : retirer la ligne <link … theme-cca.css> des pages.
   ========================================================================== */
@import url('charte-cca.css');

/* ── 1. Variables historiques de NEXUS → jetons de la charte ── */
html:root {
  --bg: var(--fond);
  --surface: var(--blanc);
  --surface-elev: var(--cca-50);
  --border: var(--trait);
  --text: var(--encre);
  /* contraste renforcé (texte secondaire plus foncé que la charte de base) */
  --gris-texte: #334155;
  --gris-aide: #475569;
  --text-sec: var(--gris-texte);
  --text-ter: var(--gris-aide);
  --sec: var(--gris-texte);
  --ter: var(--gris-aide);
  --primary: var(--cca-700);
  --success: var(--cca-600);
  --ok: var(--cca-600);
  --warning: var(--ocre-600);
  --att: var(--ocre-600);
  --danger: var(--danger-700);
  --danger-txt: var(--danger-700);
  --ko: var(--danger-700);
  --accent: var(--ocre-500);
  /* filières : teintes lisibles sur fond clair */
  --coton: #3f5aa6; --coton-fort: #2f4790;
  --anacarde: var(--cca-600);
  --karite: #9a6a12;
  --mangue: var(--ocre-600);
  --filiere: var(--ocre-600); --filiere-dark: var(--ocre-700); --filiere-light: var(--ocre-50);
  --prod: var(--cca-700); --achat: var(--ocre-600); --transfo: #2f5f9e; --export: #6b3fa0;
  /* guichet unique */
  --gu: var(--cca-700); --gu-fort: var(--ocre-500);
  color-scheme: light;
}

/* ── 2. Base ── */
html body {
  font-family: var(--police);
  font-size: 15px;
  background: var(--fond);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
}
/* une seule famille de polices (système) partout, sauf le code */
body *:not(.mono):not(code):not(pre):not(kbd):not(samp):not([class*="mono"]):not(.leaflet-container *) { font-family: var(--police) !important; }
h1, h2, h3, h4 { color: var(--cca-900); }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
::selection { background: var(--cca-100); color: var(--cca-900); }
a { color: inherit; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace !important; }

/* ── 3. Menu latéral (même identité que l'en-tête d'e-Achats) ── */
.sidebar {
  background: linear-gradient(180deg, var(--cca-900) 0%, var(--cca-800) 55%, var(--cca-700) 100%) !important;
  border-right: 4px solid var(--ocre-500) !important;
  color: #fff;
  box-shadow: var(--ombre-entete);
}
.sidebar-brand { border-bottom: 1px solid rgba(255,255,255,.15) !important; }
.sidebar .sidebar-brand-logo {
  width: 92px !important; min-width: 92px; height: 40px !important;
  background: #fff url('logo-cca.png') center / 86% auto no-repeat !important;
  border-radius: var(--rayon-champ) !important; box-shadow: 0 1px 2px rgba(0,0,0,.12);
  color: transparent !important; font-size: 0 !important; overflow: hidden;
}
.sidebar .sidebar-brand-logo img { display: none; }
.sidebar .sidebar-brand-text h1 { color: #fff !important; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.sidebar .sidebar-brand-text p { color: var(--ocre-100) !important; }
.sidebar .nav-section-title { color: var(--cca-200) !important; }
.sidebar .nav-item { color: rgba(255,255,255,.88) !important; font-weight: 600; border-left-color: transparent; }
.sidebar .nav-item:hover { background: rgba(255,255,255,.10) !important; color: #fff !important; }
.sidebar .nav-item.active {
  background: rgba(255,255,255,.15) !important; color: #fff !important;
  border-left-color: var(--ocre-500) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.sidebar .nav-badge { background: var(--ocre-500) !important; color: #fff !important; }
.sidebar .nav-user { border-bottom-color: rgba(255,255,255,.15) !important; }
.sidebar ::-webkit-scrollbar { width: 6px; } .sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
/* menu mobile (bouton burger et voile) */
.pilotage-burger { background: var(--cca-700) !important; color: #fff !important; border-color: var(--cca-800) !important; }
.pilotage-overlay { background: rgba(7,42,24,.45) !important; }

/* ── 4. En-tête de page ── */
.bi-header h1 { color: var(--cca-900); font-size: var(--taille-titre); font-weight: var(--graisse-extra); letter-spacing: -.01em; }
.bi-header p { color: var(--gris-texte); font-size: var(--taille-base); }
.bi-header .brand-sup { color: var(--ocre-600); }
.perimetre { background: rgba(255,255,255,.94) !important; border-bottom: 1px solid var(--trait); }
.perimetre-titre { color: var(--cca-700) !important; }

/* ── 5. Cartes : en-tête coloré comme e-Achats ── */
.card, .note-doc, .sante-card, .prix-card, .filter-bar, .bloc {
  background: #fff; border: 1px solid var(--trait); box-shadow: var(--ombre-carte);
}
.card { border-radius: var(--rayon-carte); padding: 20px; overflow: hidden; }
.card > .card-title:first-child {
  margin: -20px -20px 16px; padding: 12px 20px;
  background: var(--cca-700); color: #fff; font-size: 15px; font-weight: 700;
}
.card > .card-title:first-child .hint, .card > .card-title:first-child small, .card > .card-title:first-child span { color: var(--cca-100); }
.card > .card-title:first-child a { color: var(--cca-100); }
.card > .card-title:first-child .btn { color: var(--encre); }
/* une carte sur trois avec l'en-tête ocre, comme les tableaux de bord d'e-Achats */
.grid-2 > .card:nth-child(2) > .card-title:first-child,
.grid-2e > .card:nth-child(2) > .card-title:first-child,
.grid-3 > .card:nth-child(3n+2) > .card-title:first-child { background: var(--ocre-500); }
.grid-2 > .card:nth-child(2) > .card-title:first-child .hint,
.grid-2e > .card:nth-child(2) > .card-title:first-child .hint,
.grid-3 > .card:nth-child(3n+2) > .card-title:first-child .hint { color: var(--ocre-50); }
.bloc { border-radius: var(--rayon-carte); background: #fff; }
.bloc h4 { color: var(--cca-900); }
.filter-bar { border-radius: var(--rayon-carte); }
.filter-bar label { color: var(--cca-900); text-transform: none; font-size: 12px; letter-spacing: 0; }

/* ── 6. Tuiles d'indicateurs (dégradés signature) ── */
.kpi-card {
  border: 0 !important; border-radius: var(--rayon-carte) !important; color: #fff !important;
  background: var(--degrade-tuile-vert) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.kpi-grid > .kpi-card:nth-child(4n+2) { background: var(--degrade-tuile-sombre) !important; }
.kpi-grid > .kpi-card:nth-child(4n+3) { background: var(--degrade-tuile-ocre) !important; }
.kpi-grid > .kpi-card:nth-child(4n+4) { background: linear-gradient(to bottom right, #56627c, #3a4560) !important; }
.kpi-grid > .kpi-card.ok { background: var(--degrade-tuile-vert) !important; }
.kpi-grid > .kpi-card.att { background: var(--degrade-tuile-ocre) !important; }
.kpi-grid > .kpi-card.alerte { background: linear-gradient(to bottom right, #dc2626, #b91c1c) !important; }
.kpi-card .kpi-label { color: rgba(255,255,255,.92) !important; text-transform: none; font-size: 12px; letter-spacing: 0; font-weight: 600; }
.kpi-card .kpi-value, .kpi-card .kpi-value * { color: #fff !important; font-weight: 800; }
.kpi-card .kpi-sub, .kpi-card .kpi-unit, .kpi-card small { color: rgba(255,255,255,.85) !important; }
.kpi-card .delta, .kpi-card .niv, .kpi-card .etiq { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.kpi-card a { color: #fff; }

/* ── 7. Tableaux ── */
.data-table, .pivot-table { font-size: 13px; }
.data-table th, .pivot-table th {
  background: var(--cca-50) !important; color: var(--cca-900) !important; border-bottom: 2px solid var(--cca-200) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; font-weight: 700 !important;
}
.data-table td, .pivot-table td { border-bottom: 1px solid #e3eee6 !important; }
.data-table tbody tr:hover td, .data-table tr:hover td, .pivot-table tr:hover td { background: rgba(235,245,238,.7) !important; }
.data-table td.num, .pivot-table td.num { color: var(--encre); }
.pivot-table tr.subtotal { background: var(--cca-50); } .pivot-table tr.subtotal td { border-top-color: var(--cca-600) !important; color: var(--cca-800); }
.pivot-table tr.grand-total { background: var(--ocre-50); } .pivot-table tr.grand-total td { border-top-color: var(--ocre-500) !important; color: var(--ocre-700); }
.table-wrap { border-radius: var(--rayon-champ); }

/* ── 8. Boutons ── */
.btn {
  background: #fff; color: var(--encre); border: 1px solid var(--trait); border-radius: var(--rayon-champ);
  font-weight: 600; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.btn:hover { background: #fff; border-color: var(--cca-600); color: var(--cca-800); transform: none; }
.btn.btn-primary, .btn-primary, button.btn-primary {
  background: var(--cca-700) !important; border: 1px solid var(--cca-700) !important; color: #fff !important;
}
.btn.btn-primary:hover, .btn-primary:hover { background: var(--cca-800) !important; border-color: var(--cca-800) !important; }
.btn-gold, .btn-accent, .hdr-btn.gold {
  background: var(--ocre-500) !important; border: 1px solid var(--ocre-500) !important; color: #fff !important;
}
.btn-gold:hover, .btn-accent:hover, .hdr-btn.gold:hover { background: var(--ocre-600) !important; }
.hdr-btn { background: var(--cca-700) !important; color: #fff !important; border-radius: var(--rayon-champ) !important; box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; }
.hdr-btn:hover { background: var(--cca-800) !important; transform: none !important; }
.btn.danger, .btn-danger { background: #fff !important; color: var(--danger-700) !important; border-color: var(--danger-300) !important; }
.btn.danger:hover, .btn-danger:hover { background: var(--danger-50) !important; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { color: var(--gris-aide); } .icon-btn:hover { color: var(--cca-800); }

/* ── 9. Champs ── */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html body select, html body textarea {
  background-color: #fff !important; color: var(--encre) !important; border-color: var(--trait) !important;
  border-radius: var(--rayon-champ);
}
html body input:focus, html body select:focus, html body textarea:focus {
  outline: none; border-color: var(--cca-600) !important; box-shadow: 0 0 0 2px var(--cca-100) !important;
}
html body input[readonly] { background-color: var(--cca-50) !important; color: var(--cca-900) !important; }
input::placeholder, textarea::placeholder { color: #94a3b8 !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--cca-700); }
.champ label, .filter-bar label, label.etiquette {
  color: var(--cca-900) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 13px !important; font-weight: 600 !important;
}

/* ── 10. Fenêtres modales, notifications ── */
.modal-fond { background: rgba(7,42,24,.45) !important; }
.modal { background: #fff !important; border: 1px solid var(--trait) !important; border-radius: var(--rayon-carte) !important; box-shadow: 0 20px 40px rgba(7,42,24,.25) !important; color: var(--encre); }
.modal h3 { color: var(--cca-900); }
.p-toast, .toast {
  background: #fff !important; color: var(--encre) !important; border: 1px solid var(--trait) !important;
  border-left: 4px solid var(--cca-600) !important; box-shadow: 0 10px 25px rgba(7,42,24,.18) !important;
}
.p-toast.danger, .toast.danger { border-left-color: var(--danger-700) !important; }
.p-toast.success { border-left-color: var(--cca-600) !important; }

/* ── 11. Puces de statut (badges) ── */
.etiq, .niv, .delta, .rythme, .etat, .tag {
  border-radius: var(--rayon-puce) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-weight: 600 !important; font-size: 11.5px !important; padding: 2px 10px !important;
}
.e-ok, .niv-positif, .etat.actif, .delta.bon, .rythme.en_avance, .rythme.atteint, .tag.hausse {
  background: var(--cca-100) !important; color: var(--cca-800) !important; box-shadow: inset 0 0 0 1px var(--cca-200);
}
.e-info, .niv-info, .niv-BASSE, .rythme.dans_les_temps {
  background: var(--cca-50) !important; color: var(--cca-700) !important; box-shadow: inset 0 0 0 1px var(--cca-100);
}
.e-risque, .niv-attention, .niv-MOYENNE, .etat.verrou, .tag.stable {
  background: var(--ocre-100) !important; color: var(--ocre-700) !important; box-shadow: inset 0 0 0 1px rgba(240,138,62,.4);
}
.e-ko, .niv-critique, .niv-HAUTE, .delta.mauvais, .rythme.en_retard, .tag.baisse {
  background: var(--danger-100) !important; color: var(--danger-700) !important; box-shadow: inset 0 0 0 1px #fecaca;
}
.e-neutre, .etat.inactif, .delta.neutre, .rythme.sans_donnee, .tag.indetermine {
  background: #e2e8f0 !important; color: #334155 !important;
}
.chip { background: #fff !important; border-color: var(--trait) !important; color: var(--gris-texte) !important; }
.chip.on { background: var(--cca-700) !important; border-color: var(--cca-700) !important; color: #fff !important; }

/* ── 12. Jauges, barres, constats ── */
.jauge, .bar-conf { background: var(--cca-50) !important; box-shadow: inset 0 0 0 1px var(--cca-100); border-radius: var(--rayon-puce); }
.jauge > span, .bar-conf span { background: var(--cca-600); }
.jauge .repere { background: var(--ocre-600) !important; }
.constat { background: #fff !important; border: 1px solid var(--trait); border-left-width: 4px; box-shadow: var(--ombre-carte); }
.constat.critique { border-left-color: var(--danger-700) !important; background: var(--danger-50) !important; }
.constat.attention { border-left-color: var(--ocre-500) !important; background: var(--ocre-50) !important; }
.constat.positif { border-left-color: var(--cca-600) !important; background: var(--cca-50) !important; }
.funnel-bar { background: var(--cca-50) !important; } .funnel-bar > span { color: #fff !important; }
.note-org { color: var(--ocre-600) !important; } .note-entete { border-bottom-color: var(--cca-700) !important; }
.note-logo { background: #fff url('logo-cca.png') center / 90% auto no-repeat !important; color: transparent !important; width: 110px !important; border: 1px solid var(--trait); }
.fact-row, .ds-row, .obj { border-bottom-color: #e3eee6 !important; }

/* ── 13. Mode réunion (grand écran) : fond clair, bandeau vert, tuiles contrastées ── */
.r-ecran { background: var(--fond) !important; color: var(--encre); padding: 22px 32px !important; }
.r-top {
  background: var(--degrade-entete); color: #fff; border-radius: var(--rayon-carte); padding: 14px 22px;
  border-bottom: 4px solid var(--ocre-500); box-shadow: var(--ombre-entete); margin-bottom: 22px !important;
}
.r-top .r-marque { color: #fff; font-size: 20px !important; display: flex; align-items: center; gap: 12px; }
.r-top .r-marque span:not(.r-logo) { color: var(--ocre-400) !important; }
.r-logo { width: 92px; height: 38px; border-radius: var(--rayon-champ); background: #fff url('logo-cca.png') center / 86% auto no-repeat; display: inline-block; flex: none; }
.r-top .r-perim { color: var(--cca-100) !important; font-size: 14px !important; }
.r-top .r-horloge { color: #fff; }
.r-slide h2 { color: var(--cca-900) !important; font-size: 34px !important; display: flex; align-items: center; gap: 12px; }
.r-slide h2::after { content: ''; flex: 0 0 90px; height: 5px; border-radius: 3px; background: var(--ocre-500); margin-left: 8px; }
.r-kpi { border: 0 !important; color: #fff !important; box-shadow: 0 6px 18px rgba(7,42,24,.14); background: var(--degrade-tuile-vert) !important; }
.r-kpis .r-kpi:nth-child(6n+2) { background: var(--degrade-tuile-ocre) !important; }
.r-kpis .r-kpi:nth-child(6n+3) { background: linear-gradient(to bottom right, #56627c, #3a4560) !important; }
.r-kpis .r-kpi:nth-child(6n+4) { background: var(--degrade-tuile-sombre) !important; }
.r-kpis .r-kpi:nth-child(6n+5) { background: linear-gradient(to bottom right, #ffffff, #f2f7f3) !important; color: var(--cca-900) !important; border: 1px solid var(--trait) !important; }
.r-kpis .r-kpi:nth-child(6n+6) { background: var(--degrade-tuile-ocre) !important; }
.r-kpi .l { color: rgba(255,255,255,.92) !important; font-size: 17px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700; }
.r-kpi .v { color: #fff !important; }
.r-kpi .v small { color: rgba(255,255,255,.85) !important; }
.r-kpis .r-kpi:nth-child(6n+5) .l, .r-kpis .r-kpi:nth-child(6n+5) .v small { color: var(--gris-texte) !important; }
.r-kpis .r-kpi:nth-child(6n+5) .delta { color: var(--cca-900) !important; background: rgba(7,42,24,.08) !important; }
.r-kpis .r-kpi:nth-child(6n+5) .v { color: var(--cca-800) !important; }
.r-kpi .delta { background: rgba(255,255,255,.22) !important; color: #fff !important; font-size: 14px !important; }
.r-constats .constat { background: #fff !important; border: 1px solid var(--trait) !important; border-left-width: 6px !important; box-shadow: var(--ombre-carte); }
.r-constats .constat.critique { border-left-color: var(--danger-700) !important; }
.r-constats .constat.attention { border-left-color: var(--ocre-500) !important; }
.r-constats .constat h4 { color: var(--cca-900); font-size: 24px !important; }
.r-constats .constat .dom { color: var(--ocre-700) !important; font-size: 13px !important; }
.r-constats .constat p { color: var(--gris-texte) !important; font-size: 18px !important; }
.r-constats .constat .reco { color: var(--encre) !important; font-size: 18px !important; font-weight: 600; }
.r-sante .sante-card { background: #fff !important; border: 1px solid var(--trait) !important; border-top: 6px solid var(--fc, var(--cca-700)) !important; box-shadow: var(--ombre-carte); }
.r-sante .sante-card.inactif { opacity: .78; }
.r-sante .sante-card h3 { color: var(--cca-900) !important; font-size: 22px !important; display: flex; align-items: center; justify-content: flex-start !important; gap: 10px; }
.r-sante .comp-l { color: var(--gris-texte) !important; font-size: 15px !important; }
.r-sante .comp-l b { color: var(--encre) !important; }
.r-sante .score small { color: var(--gris-aide) !important; }
.ico-fil { width: 1.35em; height: 1.35em; vertical-align: -0.3em; display: inline-block; }
.r-objectifs { flex: 1; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); padding: 18px 26px; overflow: auto; }
.r-objectifs .obj { border-bottom-color: #e3eee6 !important; }
.r-objectifs .obj-t { color: var(--cca-900); font-size: 20px !important; }
.r-objectifs .obj-s { color: var(--gris-texte) !important; font-size: 15px !important; }
.r-vide { text-align: center; padding: 60px 20px; color: var(--gris-texte); }
.r-vide h3 { color: var(--cca-900); font-size: 26px; margin: 10px 0; }
.r-vide p { font-size: 18px; max-width: 760px; margin: 0 auto; line-height: 1.6; }
.r-bas { color: var(--gris-texte) !important; font-size: 14px !important; gap: 16px; flex-wrap: wrap; }
.r-commandes { display: flex; gap: 8px; align-items: center; }
.r-btn { border: 1px solid var(--trait); background: #fff; color: var(--cca-900); border-radius: var(--rayon-champ); padding: 9px 14px; font-weight: 700; font-size: 15px; cursor: pointer; }
.r-btn:hover { border-color: var(--cca-600); color: var(--cca-800); }
.r-btn.r-mode { background: var(--cca-700); border-color: var(--cca-700); color: #fff; min-width: 150px; }
.r-btn.r-mode.manuel { background: var(--ocre-500); border-color: var(--ocre-500); }
.r-duree { padding: 9px 10px !important; font-size: 14px; }
.r-points i { width: 12px !important; height: 12px !important; background: var(--trait) !important; }
.r-points i.on { background: var(--ocre-500) !important; }
.r-progress { background: var(--ocre-500) !important; height: 4px !important; }
body.r-manuel .r-progress { display: none; }
.r-aide { color: var(--gris-aide); }

/* ── 14. Pied de page commun (facultatif) ── */
.pied-cca { margin-top: 28px; padding: 14px 0 0; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--gris-aide); }

/* ── 15. Impression : fond blanc ── */
@media print { html body { background: #fff !important; } .sidebar { display: none !important; } }

/* ── 16. Badge de l'utilisateur connecté (nexus-auth.js) ── */
.nx-badge { background: #fff !important; border-color: var(--trait) !important; color: var(--encre) !important; border-radius: var(--rayon-champ) !important; }
.nx-avatar { background: var(--ocre-500) !important; color: #fff !important; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.nx-qui small { color: var(--gris-aide) !important; }
.nx-lien { color: var(--gris-texte) !important; } .nx-lien:hover { color: var(--cca-800) !important; }
.nx-connexion { color: var(--cca-700) !important; }
.sidebar .nx-badge { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; }
.sidebar .nx-qui small { color: var(--cca-200) !important; }
.sidebar .nx-lien { color: var(--cca-100) !important; } .sidebar .nx-lien:hover { color: #fff !important; }

/* ══════════ 17. Page de connexion : vitrine à gauche, formulaire à droite (comme e-Achats) ══════════ */
html body.page-connexion { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, 1fr); padding: 0; align-items: stretch; background: #fff; }
.page-connexion .cnx-vitrine {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 48px 56px; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(30,110,70,.55) 0 360px, transparent 361px),
    radial-gradient(circle at 100% 100%, rgba(30,110,70,.65) 0 260px, transparent 261px),
    radial-gradient(rgba(255,255,255,.08) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(135deg, #0c2318 0%, #0e2a1c 55%, #10301f 100%);
}
.page-connexion .cnx-vitrine::after { content: none; }
.cnx-marque { display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 15px; position: relative; z-index: 1; }
.cnx-cartouche { background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: inline-flex; }
.cnx-cartouche img { height: 52px; width: auto; display: block; }
.cnx-centre { max-width: 640px; position: relative; z-index: 1; }
.cnx-pastille { display: inline-block; background: var(--ocre-500); color: #fff; border-radius: 9999px; padding: 6px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 20px; }
.page-connexion .cnx-vitrine h2 { color: #fff; font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -.01em; margin-bottom: 26px; }
.page-connexion .cnx-vitrine h2 sup { font-size: .32em; vertical-align: super; color: var(--ocre-400); font-family: var(--police) !important; margin-left: 4px; }
.page-connexion .cnx-vitrine h2::after { content: ''; display: block; width: 210px; height: 5px; background: var(--ocre-500); margin-top: 18px; border-radius: 3px; }
.cnx-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; max-width: 600px; }
.cnx-points li { position: relative; padding-left: 34px; color: rgba(255,255,255,.92); font-size: 18px; line-height: 1.55; }
.cnx-points li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--ocre-500); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; }
.cnx-points b { color: #fff; } .cnx-points sup { font-size: .6em; color: var(--ocre-100); }
/* filigrane du logo CCAK (comme la présentation institutionnelle) */
.page-connexion .cnx-filigrane { position: absolute; right: -70px; top: 52%; transform: translateY(-50%); height: 74%; max-height: 640px; width: auto; opacity: .42; pointer-events: none; z-index: 0; }
.page-connexion .cnx-vitrine::before { content: ''; position: absolute; left: -110px; bottom: -110px; width: 220px; height: 220px; border-radius: 50%; background: #f97316; z-index: 0; }
.page-connexion .cnx-centre { max-width: 70%; }
.page-connexion .cnx-pied { padding-left: 110px; color: rgba(255,255,255,.75); }
.cnx-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cnx-tuiles div { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: var(--rayon-carte); padding: 16px; backdrop-filter: blur(2px); }
.cnx-tuiles b { display: block; font-size: 15px; margin-bottom: 6px; }
.cnx-tuiles span { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.45; }
.cnx-pied { font-size: 12px; color: var(--cca-200); position: relative; z-index: 1; }
html body.page-connexion > .carte {
  align-self: center; justify-self: center; width: 100%; max-width: 440px; margin: 40px 32px;
  background: #fff !important; border: 0 !important; box-shadow: none !important; padding: 0 8px !important; overflow: visible;
}
.page-connexion .carte::before { display: none; }
.page-connexion .marque { margin-bottom: 30px; }
.page-connexion .logo { background: #fff url('logo-cca.png') center / 90% auto no-repeat !important; width: 112px !important; height: 44px !important; color: transparent !important; border: 1px solid var(--trait); border-radius: var(--rayon-champ) !important; }
.page-connexion .marque h1 { color: var(--cca-900); font-size: 20px; }
.page-connexion .marque p { color: var(--ocre-700) !important; }
.page-connexion h2 { color: var(--cca-900); font-size: 30px !important; font-weight: 800; margin-bottom: 8px !important; }
.page-connexion form h2::after { content: ''; display: block; width: 76px; height: 4px; border-radius: 4px; background: var(--ocre-500); margin-top: 12px; }
.page-connexion .aide { color: var(--gris-texte) !important; font-size: 14px !important; }
.page-connexion label { color: var(--cca-900) !important; text-transform: none !important; font-size: 14px !important; letter-spacing: 0 !important; font-weight: 600 !important; }
.page-connexion input { padding: 12px 14px !important; font-size: 15px !important; }
.page-connexion button { background: var(--cca-700) !important; border-radius: var(--rayon-champ) !important; font-size: 15px !important; font-weight: 700 !important; padding: 14px !important; }
.page-connexion button:hover { background: var(--cca-800) !important; }
.page-connexion button::after { content: ' →'; }
.page-connexion .msg.err { background: var(--danger-50) !important; border-color: var(--danger-300) !important; color: var(--danger-700) !important; }
.page-connexion .msg.info { background: var(--cca-50) !important; border-color: var(--cca-200) !important; color: var(--cca-900) !important; }
.page-connexion .pied { color: var(--gris-aide) !important; margin-top: 28px; padding: 12px 14px; border-radius: var(--rayon-champ); background: var(--cca-50); }
.page-connexion .pied a { color: var(--cca-700) !important; font-weight: 600; }
@media (max-width: 900px) {
  html body.page-connexion { grid-template-columns: 1fr; }
  .page-connexion .cnx-vitrine { padding: 28px 20px; gap: 18px; }
  .page-connexion .cnx-vitrine h2 { font-size: 26px; }
  .cnx-points, .cnx-tuiles, .cnx-pied, .page-connexion .cnx-filigrane { display: none; }
  .page-connexion .cnx-vitrine h2 { font-size: 40px; }
  html body.page-connexion > .carte { margin: 24px auto; padding: 0 16px !important; }
}

/* ══════════ 18. Portail d'accueil (index.html) ══════════ */
.page-portail { background: var(--fond) !important; }
.page-portail .header {
  background: var(--degrade-entete) !important; border-bottom: 4px solid var(--ocre-500) !important; box-shadow: var(--ombre-entete);
  padding: 10px 40px !important; backdrop-filter: none;
}
.page-portail .logo-icon {
  width: 112px !important; height: 44px !important; border-radius: var(--rayon-champ) !important;
  background: #fff url('logo-cca.png') center / 88% auto no-repeat !important; color: transparent !important; box-shadow: 0 1px 2px rgba(0,0,0,.12) !important;
}
.page-portail .logo-text h1 { color: #fff; font-size: 19px; }
.page-portail .logo-text p { color: var(--cca-200) !important; }
.page-portail .header .brand-sup { color: var(--ocre-400) !important; }
.page-portail .status { color: rgba(255,255,255,.9) !important; }
.page-portail .dot { background: var(--ocre-400) !important; box-shadow: 0 0 10px var(--ocre-400) !important; }
.page-portail .header .nx-badge { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.25) !important; color: #fff !important; }
.page-portail .header .nx-qui small { color: var(--cca-200) !important; } .page-portail .header .nx-lien { color: var(--cca-100) !important; }
.page-portail .hero {
  max-width: 1320px; margin: 28px auto 8px; border-radius: 18px; padding: 44px 160px !important; text-align: center;
  color: #fff; box-shadow: 0 10px 30px rgba(7,42,24,.18);
  background:
    radial-gradient(circle at 92% 8%, transparent 0 120px, rgba(232,116,31,.55) 121px 124px, transparent 125px),
    radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--cca-900), var(--cca-800) 50%, var(--cca-700));
}
/* fruits des filières en décor, texte centré */
.page-portail .hero { text-align: center !important; }
.page-portail .hero h2, .page-portail .hero p, .page-portail .hero-tagline { margin-left: auto !important; margin-right: auto !important; }
.page-portail .wm-arc-icon { display: block; font-size: 0; opacity: .95 !important; animation: floatSlow 8s ease-in-out infinite; filter: drop-shadow(0 10px 16px rgba(0,0,0,.28)) !important; }
.page-portail .wm-arc-icon img { width: 92px; height: 92px; display: block; }
.page-portail .wm-arc-1 { top: 10%; left: 3%; } .page-portail .wm-arc-2 { top: 10%; right: 3%; }
.page-portail .wm-arc-3 { bottom: 8%; left: 3%; } .page-portail .wm-arc-4 { bottom: 8%; right: 3%; }
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.page-portail .filiere-icon img { width: 64px; height: 64px; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.15)); }
@media (max-width: 1100px) { .page-portail .wm-arc-icon { display: none; } .page-portail .hero { padding: 40px 40px !important; } }
.page-portail .hero-badge { background: var(--ocre-500) !important; border: 0 !important; color: #fff !important; border-radius: 9999px !important; animation: none !important; padding: 6px 14px !important; margin-bottom: 18px !important; }
.page-portail .hero h2 { color: #fff; font-size: 40px; letter-spacing: -.02em; max-width: 1000px; }
.page-portail .hero h2 .gradient { background: none !important; -webkit-text-fill-color: var(--ocre-400) !important; color: var(--ocre-400); }
.page-portail .hero-tagline { color: #fff !important; font-size: 20px !important; }
.page-portail .hero-tagline strong { color: var(--ocre-100) !important; }
.page-portail .hero p { color: rgba(255,255,255,.9) !important; margin: 0 auto 6px !important; max-width: 820px; font-size: 16px !important; }
.page-portail .hero-micro { color: var(--cca-200) !important; }
.page-portail .filieres-title { color: var(--cca-900) !important; text-align: center; letter-spacing: 0 !important; text-transform: none !important; font-size: 18px !important; font-weight: 800 !important; }
.page-portail .filiere-card {
  background: #fff !important; border: 1px solid var(--trait) !important; border-radius: var(--rayon-carte) !important;
  box-shadow: var(--ombre-carte); color: var(--encre) !important;
}
.page-portail .filiere-card::before { height: 5px !important; opacity: 1 !important; }
.page-portail .filiere-card:hover { border-color: var(--cca-600) !important; box-shadow: 0 12px 28px rgba(14,90,52,.15) !important; }
.page-portail .filiere-card h3 { color: var(--cca-900); }
.page-portail .filiere-card p { color: var(--gris-texte) !important; }
.page-portail .filiere-status { border-radius: 9999px !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; }
.page-portail .status-historique { background: #e3e8f6 !important; color: var(--coton-fort) !important; }
.page-portail .status-reference { background: var(--cca-100) !important; color: var(--cca-800) !important; }
.page-portail .status-refonte { background: #f6ead2 !important; color: #7a5410 !important; }
.page-portail .status-developpement { background: var(--ocre-100) !important; color: var(--ocre-700) !important; }
.page-portail .status-pilotage { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.page-portail .pilotage-card {
  background: #fff !important; border: 1px solid var(--trait) !important; border-radius: var(--rayon-carte) !important; box-shadow: var(--ombre-carte); padding-top: 0 !important;
  grid-template-columns: 1.1fr 2fr auto; overflow: hidden;
}
.page-portail .pilotage-card::before { height: 6px !important; background: var(--cca-700) !important; }
.page-portail .guichet-card::before { background: var(--ocre-500) !important; }
.page-portail .pilotage-card { padding: 30px 26px 24px !important; }
.page-portail .pilotage-card:hover { box-shadow: 0 12px 28px rgba(14,90,52,.15) !important; border-color: var(--cca-600) !important; }
.page-portail .pilotage-id h3 { color: var(--cca-900); }
.page-portail .pilotage-id p { color: var(--gris-texte) !important; }
.page-portail .pilotage-card .status-pilotage { background: var(--cca-100) !important; color: var(--cca-800) !important; }
.page-portail .pk { background: var(--cca-50) !important; border: 1px solid var(--cca-100) !important; border-radius: var(--rayon-champ) !important; }
.page-portail .pk-v { color: var(--cca-900); }
.page-portail .pk-l, .page-portail .pk-v small { color: var(--gris-texte) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; }
.page-portail .pk.alerte .pk-v { color: var(--danger-700) !important; }
.page-portail .pilotage-cta { background: var(--cca-700) !important; border-radius: var(--rayon-champ) !important; }
.page-portail .guichet-card .pilotage-cta { background: var(--ocre-500) !important; }
.page-portail .shield-card { margin-top: 18px !important; }
.page-portail .shield-card::before { background: #3949AB !important; }
.page-portail .shield-card .pilotage-cta { background: #3949AB !important; }
.page-portail .stat-card { border: 0 !important; border-radius: var(--rayon-carte) !important; background: var(--degrade-tuile-vert) !important; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.page-portail .stats-grid .stat-card:nth-child(3n+2) { background: var(--degrade-tuile-sombre) !important; }
.page-portail .stats-grid .stat-card:nth-child(3n+3) { background: var(--degrade-tuile-ocre) !important; }
.page-portail .stat-value { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
.page-portail .stat-label { color: rgba(255,255,255,.9) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; }
.page-portail .footer { background: var(--cca-950); color: var(--cca-200) !important; border-top: 0 !important; margin-top: 32px !important; padding: 18px 20px !important; }
.page-portail .footer-brand { color: #fff !important; }
.page-portail .footer-badge { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.2) !important; color: var(--ocre-100) !important; }
.page-portail .portal-toast { background: #fff !important; border-color: var(--trait) !important; box-shadow: 0 10px 25px rgba(7,42,24,.18); }
@media (max-width: 768px) {
  .page-portail .header { padding: 10px 16px !important; }
  .page-portail .hero { margin: 16px 12px 8px; padding: 28px 22px !important; }
  .page-portail .hero p { font-size: 15px !important; }
  .page-portail .hero h2 { font-size: 26px; }
  .page-portail .header { flex-wrap: wrap; gap: 8px; }
  .page-portail .logo-icon { width: 92px !important; height: 38px !important; }
  .page-portail .logo-text p { display: none; }
  .page-portail .status { width: 100%; justify-content: space-between; font-size: 12px; }
  .page-portail .hero-tagline { font-size: 17px !important; }
}

/* ── 19. Compléments : tuiles, en-têtes de cartes, blocs des fiches ── */
.kpi-card, .kpi-card * { color: #fff !important; }
.kpi-card [class*="icon"] { background: rgba(255,255,255,.16) !important; }
.card > .card-title:first-child span:not(.btn):not(.etiq):not(.niv), .card > .card-title:first-child small { color: var(--cca-100) !important; }
.bloc { padding: 14px 16px !important; overflow: hidden; }
.bloc > h4:first-child { margin: -14px -16px 12px !important; padding: 10px 16px; background: var(--cca-50); border-bottom: 1px solid var(--trait); color: var(--cca-900) !important; }

/* ── 20. Marque NEXUS SYSTEMᴮᴹ : exposant toujours lisible ── */
.brand-sup { color: var(--ocre-600) !important; }
.page-portail .hero .brand-sup, .sidebar .brand-sup, .page-portail .header .brand-sup, .page-portail .footer .brand-sup { color: var(--ocre-400) !important; }
.nav-item .ico-fil { width: 20px; height: 20px; vertical-align: middle; }

/* Cartes Leaflet : les commandes (zoom, couches) restent sous les fenêtres modales */
.leaflet-top, .leaflet-bottom { z-index: 500 !important; }
.leaflet-pane { z-index: 300; }