/* GED-Courrier — feuille de style commune. Aucune dépendance externe (réseau d'administration). */

/* ---- IBM Plex Sans (hébergée localement, SIL OFL) ---- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Variables : alias vers la charte EC-GED (voir ec-ged-theme.css, chargé en premier) ---- */
:root {
  --c-navy: var(--ec-navy);
  --c-navy-700: var(--ec-navy-dark);
  --c-navy-50: var(--ec-blue-50);
  --c-primaire: var(--ec-blue-600);
  --c-primaire-fonce: var(--ec-navy);
  --c-primaire-clair: var(--ec-blue-50);
  --c-accent: var(--ec-gold);
  --c-accent-clair: var(--ec-warning-bg);
  --c-succes: var(--ec-success);
  --c-succes-clair: var(--ec-success-bg);
  --c-danger: var(--ec-danger);
  --c-danger-clair: var(--ec-danger-bg);
  --c-alerte: var(--ec-warning);
  --c-texte: var(--ec-text);
  --c-texte-doux: var(--ec-text-muted);
  --c-bordure: var(--ec-border);
  --c-fond: var(--ec-bg);
  --c-carte: var(--ec-surface);
  --esp-1: .25rem; --esp-2: .5rem; --esp-3: .75rem; --esp-4: 1rem; --esp-5: 1.5rem; --esp-6: 2rem; --esp-8: 3rem;
  --rayon-sm: var(--ec-radius-sm); --rayon: var(--ec-radius); --rayon-lg: var(--ec-radius-lg);
  --ombre: var(--ec-shadow);
  --ombre-haute: var(--ec-shadow-lg);
  --police: var(--ec-font);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--c-texte); background: var(--c-fond); overflow-x: hidden; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--esp-3); font-weight: 700; color: var(--c-navy); }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 var(--esp-3); }
a { color: var(--c-primaire); } a:hover { color: var(--c-primaire-fonce); }
img { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.lien-evitement { position: absolute; left: -999px; top: 0; background: var(--c-navy); color: var(--ec-white); padding: var(--esp-2) var(--esp-4); z-index: 3000; }
.lien-evitement:focus { left: var(--esp-2); }
.conteneur { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--esp-4); }
.conteneur-large { max-width: 1480px; margin: 0 auto; width: 100%; }

/* ---- Boutons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: 38px; padding: 0 1.1rem; border-radius: var(--rayon); border: 1px solid transparent; font: 700 14px/1 var(--police); cursor: pointer; text-decoration: none; background: var(--c-navy); color: var(--ec-white); transition: background .15s, box-shadow .15s; }
.btn:hover { background: var(--c-navy-700); color: var(--ec-white); }
.btn-secondaire { background: var(--ec-white); color: var(--c-navy); border-color: var(--c-bordure); }
.btn-secondaire:hover { background: var(--c-navy-50); color: var(--c-navy); }
.btn-accent { background: var(--c-accent); color: var(--ec-navy-dark); }
.btn-accent:hover { background: color-mix(in srgb, var(--ec-gold) 85%, #000); color: var(--ec-navy-dark); }
.btn-danger { background: var(--c-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--ec-danger) 80%, #000); }
.btn-succes { background: var(--c-succes); }
.btn-succes:hover { background: color-mix(in srgb, var(--ec-success) 80%, #000); }
.btn-petit { min-height: 30px; padding: 0 .7rem; font-size: 12.5px; border-radius: var(--rayon-sm); }
.btn-grand { min-height: 48px; padding: 0 1.6rem; font-size: 15px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
td .btn, .droite .btn { min-height: 30px; padding: 0 .7rem; font-size: 12.5px; border-radius: var(--rayon-sm); }

/* ---- Formulaires ---- */
.champ { margin-bottom: var(--esp-4); }
.champ label, legend { display: block; font-weight: 700; font-size: 13px; margin-bottom: var(--esp-1); color: var(--c-texte); }
.champ .aide { color: var(--c-texte-doux); font-size: 12px; margin: 4px 0 0; }
.champ .erreur, .erreur { color: var(--c-danger); font-size: 12.5px; margin-top: var(--esp-1); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=file], select, textarea { width: 100%; min-height: 38px; padding: .45rem .75rem; border: 1px solid var(--c-bordure); border-radius: var(--rayon); font: inherit; background: var(--ec-white); color: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--c-primaire); box-shadow: var(--focus); outline: none; }
textarea { min-height: 6rem; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--c-navy); }
fieldset { border: 1px solid var(--c-bordure); border-radius: var(--rayon); }

/* ---- Cartes, tableaux, badges ---- */
.carte { background: var(--c-carte); border: 1px solid var(--c-bordure); border-radius: var(--rayon-lg); box-shadow: var(--ombre); padding: var(--esp-5); }
.carte > h2:first-child, .carte-titre { display: flex; align-items: center; gap: var(--esp-2); font-size: 1.05rem; }
.carte-titre i { color: var(--c-primaire); }
.tableau-defilant { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.carte.tableau-defilant { padding: 0; }
table.tableau { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--ec-white); }
.tableau th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-texte-doux); background: var(--c-fond); padding: .65rem .85rem; border-bottom: 1px solid var(--c-bordure); white-space: nowrap; }
.tableau td { padding: .65rem .85rem; border-bottom: 1px solid var(--c-fond); vertical-align: middle; }
.tableau tbody tr:hover { background: var(--c-navy-50); }
.tableau tr.retard td { background: var(--c-danger-clair); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--c-navy-50); color: var(--c-navy); white-space: nowrap; }
.badge-succes { background: var(--c-succes-clair); color: var(--c-succes); }
.badge-danger { background: var(--c-danger-clair); color: var(--c-danger); }
.badge-alerte { background: var(--c-accent-clair); color: var(--c-alerte); }
.badge-info { background: var(--c-primaire-clair); color: var(--c-primaire-fonce); }

/* ---- Alertes, toasts, modales ---- */
.alerte { padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon); margin-bottom: var(--esp-4); border: 1px solid; }
.alerte-succes { background: var(--c-succes-clair); border-color: color-mix(in srgb, var(--ec-success) 30%, var(--ec-white)); color: var(--c-succes); }
.alerte-erreur { background: var(--c-danger-clair); border-color: color-mix(in srgb, var(--ec-danger) 28%, var(--ec-white)); color: var(--c-danger); }
.alerte-info { background: var(--c-primaire-clair); border-color: var(--ec-blue-100); color: var(--c-primaire-fonce); }
#zone-toasts { position: fixed; top: 76px; right: var(--esp-4); z-index: 12000; display: flex; flex-direction: column; gap: var(--esp-2); max-width: min(92vw, 380px); }
.toast { padding: 12px 18px; border-radius: var(--rayon); color: var(--ec-white); box-shadow: var(--ombre-haute); background: var(--c-navy); border-left: 4px solid var(--c-accent); font-weight: 600; font-size: 13px; }
.toast-succes { background: var(--c-navy); } .toast-erreur { background: var(--c-danger); border-left-color: var(--c-navy-700); }
.modale-fond { position: fixed; inset: 0; background: rgba(0, 20, 63, .55); display: none; align-items: center; justify-content: center; z-index: 2500; padding: var(--esp-4); }
.modale-fond.ouverte { display: flex; }
.modale { background: var(--ec-white); border-radius: var(--rayon-lg); padding: var(--esp-5); width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: var(--ombre-haute); }

/* ==== Application : barre supérieure + menu horizontal + en-tête de page ==== */
.topbar-racine { position: sticky; top: 0; z-index: 1000; }
.topbar { background: linear-gradient(90deg, var(--c-navy-700) 0%, var(--c-navy) 55%, var(--c-primaire-fonce) 100%); color: var(--ec-white); box-shadow: var(--ombre); }
.topbar-haut { display: flex; align-items: center; gap: var(--esp-4); padding: 0 var(--esp-5); min-height: 64px; flex-wrap: wrap; }
.topbar .marque { display: flex; align-items: center; gap: var(--esp-3); text-decoration: none; color: var(--ec-white); flex-shrink: 0; }
.marque-tuile { background: var(--ec-white); border-radius: var(--rayon); padding: 5px 8px; display: flex; align-items: center; gap: 8px; box-shadow: var(--ombre); }
.marque-tuile span { color: var(--c-navy); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.marque-tuile b { color: var(--c-primaire); }
.marque-sous { font-size: 12px; font-weight: 600; opacity: .9; padding-left: var(--esp-3); border-left: 1px solid rgba(255,255,255,.35); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .recherche { flex: 1; min-width: 200px; max-width: 520px; position: relative; margin-left: var(--esp-4); }
.topbar .recherche i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--c-texte-doux); font-size: 13px; }
.topbar .recherche input { padding-left: 34px; border-radius: 999px; border-color: transparent; background: rgba(255,255,255,.96); min-height: 38px; }
.selecteur-admin select { min-height: 38px; border-radius: var(--rayon); background: rgba(255,255,255,.96); width: auto; }
.topbar-droite { margin-left: auto; display: flex; align-items: center; gap: var(--esp-2); }
.topbar-icone { width: 38px; height: 38px; border-radius: var(--rayon-sm); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); color: var(--ec-white); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; position: relative; text-decoration: none; }
.topbar-icone:hover { background: rgba(255,255,255,.25); color: var(--ec-white); }
.topbar-icone .point { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; background: var(--c-accent); border-radius: 50%; border: 1.5px solid var(--c-navy); }
.avatar-bloc { position: relative; }
.avatar-btn { display: flex; align-items: center; gap: var(--esp-2); height: 40px; padding: 0 10px 0 6px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: var(--rayon-sm); color: var(--ec-white); cursor: pointer; font: inherit; }
.avatar-btn:hover { background: rgba(255,255,255,.25); }
.avatar-rond { width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent); color: var(--ec-navy-dark); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.avatar-nom { font-size: 13px; font-weight: 700; line-height: 1.1; text-align: left; }
.avatar-role { font-size: 11px; opacity: .8; display: block; font-weight: 500; }
.avatar-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 260px; background: var(--ec-white); border-radius: var(--rayon); box-shadow: var(--ombre-haute); border: 1px solid var(--c-bordure); display: none; z-index: 9999; overflow: hidden; color: var(--c-texte); }
.avatar-bloc.ouvert .avatar-menu { display: block; }
.avatar-menu header { padding: var(--esp-4); background: var(--c-navy-50); border-bottom: 1px solid var(--c-bordure); }
.avatar-menu header strong { display: block; color: var(--c-navy); }
.avatar-menu header small { color: var(--c-texte-doux); overflow-wrap: anywhere; }
.avatar-menu .role { display: inline-block; margin-top: 6px; background: var(--c-primaire-clair); color: var(--c-primaire-fonce); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.avatar-menu button.item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px var(--esp-4); background: none; border: 0; font: inherit; font-size: 13px; color: var(--c-danger); cursor: pointer; text-align: left; }
.avatar-menu button.item:hover { background: var(--c-danger-clair); }
.topbar-burger { display: none; background: rgba(255,255,255,.12); color: var(--ec-white); border: 1px solid rgba(255,255,255,.28); border-radius: var(--rayon-sm); font-size: 1.1rem; width: 38px; height: 38px; cursor: pointer; }

.menu-horizontal { background: var(--ec-white); border-bottom: 1px solid var(--c-bordure); box-shadow: var(--ombre); }
.menu-horizontal > ul { list-style: none; margin: 0; padding: 0 var(--esp-5); display: flex; flex-wrap: wrap; gap: 2px; }
.menu-groupe { position: relative; }
.menu-titre { display: flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--c-texte); font: 700 13.5px/1 var(--police); padding: 15px 14px 12px; cursor: pointer; text-decoration: none; }
.menu-titre i.ic { color: var(--c-navy); font-size: 14px; width: 16px; text-align: center; }
.menu-titre .caret { font-size: 10px; opacity: .6; }
.menu-titre:hover, .menu-groupe.ouvert > .menu-titre { background: var(--c-navy-50); color: var(--c-navy); }
.menu-groupe.actif > .menu-titre, .menu-titre[aria-current=page] { background: var(--c-navy-50); color: var(--c-navy); border-bottom-color: var(--c-primaire); }
.menu-sous { display: none; position: absolute; left: 0; top: 100%; min-width: 270px; list-style: none; margin: 0; padding: var(--esp-2); background: var(--ec-white); border: 1px solid var(--c-bordure); border-radius: 0 0 var(--rayon) var(--rayon); box-shadow: var(--ombre-haute); z-index: 1200; }
.menu-groupe.ouvert > .menu-sous { display: block; }
.menu-sous a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: var(--c-texte); text-decoration: none; font-weight: 600; font-size: 13px; border-radius: var(--rayon-sm); }
.menu-sous a i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--rayon-sm); background: var(--c-fond); color: var(--c-navy); font-size: 12px; }
.menu-sous a:hover, .menu-sous a:focus-visible { background: var(--c-navy-50); color: var(--c-navy); }

.page-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); background: var(--ec-white); border-bottom: 1px solid var(--c-bordure); padding: 16px 28px; }
.page-titre { display: flex; align-items: center; gap: var(--esp-3); font-size: 1.45rem; font-weight: 700; color: var(--c-navy); margin: 0; }
.page-titre .tuile { width: 40px; height: 40px; border-radius: var(--rayon); background: var(--c-navy); display: grid; place-items: center; font-size: 1rem; color: var(--ec-blue-100); flex-shrink: 0; }
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 4px 0 0 52px; padding: 0; font-size: 12.5px; color: var(--c-texte-doux); }
.fil-ariane li + li::before { content: '/'; color: var(--c-bordure); margin-right: 6px; }
.fil-ariane a { text-decoration: none; }
.fil-ariane li:last-child { color: var(--c-texte); font-weight: 700; }
.app-contenu { padding: 24px 28px 48px; min-height: 60vh; }
.app-contenu h1 { display: none; } /* le titre de la page est dans .page-entete */
.app-contenu .barre-actions:has(> h1:only-child) { display: none; }

/* ---- Cartes de statistiques (tableaux de bord) ---- */
.cartes-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4); margin-bottom: var(--esp-5); }
.cartes-stats.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199px) { .cartes-stats, .cartes-stats.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cartes-stats, .cartes-stats.trois { grid-template-columns: minmax(0, 1fr); } }
.carte-stat { --ton: var(--c-navy); --fond: var(--c-navy-50); display: flex; align-items: center; gap: var(--esp-3); min-width: 0; padding: var(--esp-4); background: var(--ec-white); color: var(--c-texte); text-decoration: none; border: 1px solid var(--c-bordure); border-radius: var(--rayon-lg); box-shadow: var(--ombre); transition: border-color .15s, transform .15s; }
a.carte-stat:hover { border-color: var(--ton); color: var(--c-texte); transform: translateY(-1px); }
.carte-stat--bleu { --ton: var(--c-primaire); --fond: var(--c-primaire-clair); }
.carte-stat--succes { --ton: var(--c-succes); --fond: var(--c-succes-clair); }
.carte-stat--alerte { --ton: var(--c-alerte); --fond: var(--c-accent-clair); }
.carte-stat--danger { --ton: var(--c-danger); --fond: var(--c-danger-clair); }
.carte-stat__icone { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--rayon); background: var(--fond); color: var(--ton); font-size: 18px; }
.carte-stat__corps { display: flex; flex-direction: column; min-width: 0; }
.carte-stat__valeur { font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--c-navy); font-variant-numeric: tabular-nums; }
.carte-stat__valeur small { font-size: 12px; font-weight: 700; color: var(--c-texte-doux); }
.carte-stat__libelle { margin-top: 2px; font-size: 12.5px; color: var(--c-texte-doux); line-height: 1.3; }
.graphique-carte canvas { max-width: 100%; }
.graphique-zone { position: relative; height: 260px; }

/* ---- Mises en page ---- */
.grille { display: grid; gap: var(--esp-4); }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grille-tableau-bord { display: grid; grid-template-columns: 2fr 1fr; gap: var(--esp-4); margin-bottom: var(--esp-4); align-items: start; }
@media (max-width: 1000px) { .grille-tableau-bord { grid-template-columns: 1fr; } }
.barre-actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; justify-content: space-between; margin-bottom: var(--esp-4); }
.barre-filtres { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; margin-bottom: var(--esp-4); background: var(--ec-white); border: 1px solid var(--c-bordure); border-radius: var(--rayon-lg); padding: var(--esp-3) var(--esp-4); box-shadow: var(--ombre); }
.barre-filtres .champ { margin: 0; min-width: 160px; }
.onglets { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--c-bordure); margin-bottom: var(--esp-4); }
.onglets button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: .65rem var(--esp-4); font: 700 13.5px var(--police); color: var(--c-texte-doux); cursor: pointer; }
.onglets button:hover { color: var(--c-navy); background: var(--c-navy-50); }
.onglets button[aria-selected=true] { color: var(--c-navy); border-bottom-color: var(--c-primaire); }
.panneau[hidden], [data-panneau][hidden] { display: none; }
.pagination-liens { margin-top: var(--esp-4); }
.pagination-liens nav svg { width: 1rem; height: 1rem; }
.pagination-liens nav > div:first-child { display: none; }
.liste-def { display: grid; grid-template-columns: max-content 1fr; gap: var(--esp-1) var(--esp-4); margin: 0; }
.liste-def dt { font-weight: 700; color: var(--c-texte-doux); }
.liste-def dd { margin: 0; }
.arbre, .arbre ul { list-style: none; margin: 0; padding-left: var(--esp-5); }
.arbre li { margin: var(--esp-1) 0; position: relative; }
.noeud { display: inline-flex; align-items: center; gap: var(--esp-2); padding: .3rem .7rem; border: 1px solid var(--c-bordure); border-left: 4px solid var(--c-primaire); border-radius: var(--rayon-sm); background: var(--ec-white); box-shadow: var(--ombre); }
.noeud.inactif { opacity: .55; }
.noeud.cible { outline: 2px dashed var(--c-accent); background: var(--c-accent-clair); }
.noeud[draggable=true] { cursor: grab; }

/* ---- Utilitaires sémantiques ---- */
.discret { color: var(--c-texte-doux); font-size: 12.5px; }
.etiquette { color: var(--c-texte-doux); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin: 0 0 var(--esp-2); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.droite { text-align: right; white-space: nowrap; }
.droite form { display: inline; }
.vide { text-align: center; color: var(--c-texte-doux); padding: var(--esp-5); }
.pleine-largeur { grid-column: 1 / -1; }
.actions-formulaire { display: flex; justify-content: flex-end; gap: var(--esp-2); padding-top: var(--esp-4); border-top: 1px solid var(--c-bordure); margin-top: var(--esp-4); }
.ligne-actions { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.ligne-def { display: flex; justify-content: space-between; gap: var(--esp-4); padding: .2rem 0; }
.form-carte { max-width: 900px; }
.carte + .carte, .carte + form, form + .carte { margin-top: var(--esp-4); }
form.en-ligne { display: inline; }
.barre-actions > a:not(.btn) { display: inline-flex; padding: .55rem 1.1rem; border-radius: var(--rayon); background: var(--c-navy); color: var(--ec-white); font-weight: 700; text-decoration: none; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .topbar-haut { padding: var(--esp-2) var(--esp-4); }
  .topbar-burger { display: block; margin-left: auto; }
  .topbar .recherche { order: 5; flex-basis: 100%; max-width: none; margin-left: 0; }
  .marque-sous, .avatar-nom { display: none; }
  .menu-horizontal { display: none; }
  .menu-horizontal.ouvert { display: block; }
  .menu-horizontal > ul { flex-direction: column; padding: 0; }
  .menu-titre { width: 100%; border-bottom: 1px solid var(--c-fond); padding: 13px 16px; }
  .menu-sous { position: static; box-shadow: none; border: 0; background: var(--c-fond); }
  .page-entete { padding: 14px 16px; }
  .page-titre { font-size: 1.2rem; }
  .fil-ariane { margin-left: 0; }
  .app-contenu { padding: 16px 14px 36px; }
}

/* ==== Pages publiques et connexion ==== */
.pub-entete { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--c-bordure); backdrop-filter: blur(6px); }
.pub-entete .conteneur { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: var(--esp-3); }
.marque-pub { display: flex; align-items: center; gap: var(--esp-2); font-weight: 700; font-size: 1.2rem; color: var(--c-navy); text-decoration: none; }
.pub-hero { background: radial-gradient(1200px 400px at 85% -10%, rgba(255, 206, 0, .14), transparent 60%), linear-gradient(135deg, var(--c-navy-700), var(--c-navy) 55%, var(--c-primaire)); color: var(--ec-white); padding: 88px 0 96px; }
.pub-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); max-width: 22ch; color: var(--ec-white); display: block; }
.pub-hero p { font-size: 1.15rem; max-width: 60ch; color: var(--ec-blue-100); }
.pub-section { padding: 64px 0; }
.pub-section.alt { background: var(--ec-white); border-block: 1px solid var(--c-bordure); }
.pub-section h2 { font-size: 1.7rem; text-align: center; margin-bottom: var(--esp-6); }
.pub-section .carte h3 { color: var(--c-navy); }
.pub-section .carte { transition: transform .15s, box-shadow .15s; }
.pub-section .carte:hover { transform: translateY(-2px); box-shadow: var(--ombre-haute); }
.pub-icone { width: 46px; height: 46px; border-radius: var(--rayon); background: var(--c-primaire-clair); color: var(--c-primaire); display: grid; place-items: center; font-size: 18px; margin-bottom: var(--esp-3); }
.pub-etapes { counter-reset: etape; list-style: none; padding: 0; display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.pub-etapes li { counter-increment: etape; position: relative; padding: var(--esp-5) var(--esp-4) var(--esp-4); background: var(--c-fond); border-radius: var(--rayon-lg); border: 1px solid var(--c-bordure); }
.pub-etapes li::before { content: counter(etape); position: absolute; top: -14px; left: var(--esp-4); width: 30px; height: 30px; border-radius: 50%; background: var(--c-navy); color: var(--ec-white); font-weight: 700; display: grid; place-items: center; }
.pub-pied { background: var(--c-navy-700); color: var(--ec-blue-100); padding: var(--esp-5) 0; }
.pub-pied a { color: var(--ec-white); }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: var(--esp-4); background: radial-gradient(900px 400px at 10% 0%, rgba(255, 206, 0, .14), transparent 60%), linear-gradient(135deg, var(--c-navy-700), var(--c-navy) 55%, var(--c-primaire)); }
.auth-carte { width: 100%; max-width: 430px; padding: var(--esp-6); box-shadow: var(--ombre-haute); }
.auth-carte h1 { display: block; }

/* ---- Icônes des boutons ---- */
.btn > i.fa-solid, .btn > i.fa-regular { font-size: .88em; line-height: 1; }
.btn-petit > i.fa-solid, td .btn > i.fa-solid { font-size: .8em; }
.btn:empty::before { content: none; }

/* ==========================================================================
   Charte EC-GED — typographie et composants (prime sur les règles précédentes)
   ========================================================================== */
body { font-size: 15px; line-height: 1.55; color: var(--ec-text); background: var(--ec-bg); font-family: var(--ec-font); }
h1 { font-size: 28px; font-weight: 700; color: var(--ec-navy); letter-spacing: -.02em; }
h2 { font-size: 20px; font-weight: 700; color: var(--ec-navy); }
h3 { font-size: 16px; font-weight: 700; color: var(--ec-navy); }
.discret, .etiquette, .aide { font-size: 13px; font-weight: 500; color: var(--ec-text-muted); }
.champ label, legend { font-size: 13px; color: var(--ec-text); font-weight: 700; }
.carte-stat__valeur, .tableau td, .badge { font-variant-numeric: tabular-nums; }
a { color: var(--ec-blue-600); }
a:hover { color: var(--ec-navy); }

/* Focus clavier */
:focus-visible, a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--ec-blue-500); outline-offset: 2px; box-shadow: none; }

/* Boutons */
.btn { min-height: 44px; border-radius: var(--ec-radius); background: var(--ec-navy); color: var(--ec-white); border: 1px solid transparent; font-size: 14px; font-weight: 700; }
.btn:hover { background: var(--ec-navy-dark); color: var(--ec-white); }
.btn-secondaire { background: var(--ec-surface); color: var(--ec-navy); border-color: var(--ec-border); }
.btn-secondaire:hover { background: var(--ec-blue-50); color: var(--ec-navy); }
.btn-danger { background: var(--ec-danger); color: var(--ec-white); }
.btn-danger:hover { background: color-mix(in srgb, var(--ec-danger) 82%, #000); }
.btn-succes { background: var(--ec-success); }
.btn-accent { background: var(--ec-navy); color: var(--ec-white); }
.btn-petit, td .btn, .droite .btn { min-height: 34px; }
.btn-grand { min-height: 52px; }

/* Formulaires */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=file], select {
  min-height: 44px; border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm); background: var(--ec-surface); color: var(--ec-text); }
textarea { border: 1px solid var(--ec-border); border-radius: var(--ec-radius-sm); }
input:focus, select:focus, textarea:focus { border-color: var(--ec-blue-500); box-shadow: 0 0 0 3px var(--ec-blue-100); outline: none; }

/* Cartes */
.carte { background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg); box-shadow: var(--ec-shadow); padding: 24px; }
.carte.tableau-defilant { padding: 0; }

/* Tableaux */
.tableau th { font-size: 13px; font-weight: 700; color: var(--ec-text-muted); background: var(--ec-bg); text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--ec-border); }
.tableau td { border-bottom: 1px solid var(--ec-border); }
.tableau tbody tr:hover { background: var(--ec-blue-50); }

/* Badges de statut */
.badge { font-size: 12px; font-weight: 700; border-radius: var(--ec-radius-sm); padding: 3px 10px; background: var(--ec-info-bg); color: var(--ec-info); }
.badge-info { background: var(--ec-info-bg); color: var(--ec-info); }
.badge-alerte { background: var(--ec-warning-bg); color: var(--ec-warning); }
.badge-succes { background: var(--ec-success-bg); color: var(--ec-success); }
.badge-danger { background: var(--ec-danger-bg); color: var(--ec-danger); }
.badge-archive, .badge-neutre { background: var(--ec-bg); color: var(--ec-text-muted); border: 1px solid var(--ec-border); }

/* Alertes et messages flash : bordure gauche de 4 px dans la couleur forte */
.alerte { border: 0; border-left: 4px solid; border-radius: var(--ec-radius-sm); }
.alerte-succes { background: var(--ec-success-bg); border-left-color: var(--ec-success); color: var(--ec-success); }
.alerte-erreur { background: var(--ec-danger-bg); border-left-color: var(--ec-danger); color: var(--ec-danger); }
.alerte-info { background: var(--ec-info-bg); border-left-color: var(--ec-info); color: var(--ec-info); }
.alerte-avert { background: var(--ec-warning-bg); border-left-color: var(--ec-warning); color: var(--ec-warning); }
.toast { border-left: 4px solid var(--ec-blue-300); background: var(--ec-navy); }
.toast-erreur { background: var(--ec-danger); border-left-color: var(--ec-white); }

/* Barre du haut : fond blanc, bordure basse, administration à gauche, utilisateur à droite */
.topbar { background: var(--ec-surface); color: var(--ec-text); box-shadow: none; border-bottom: 1px solid var(--ec-border); }
.topbar .marque { color: var(--ec-navy); gap: var(--esp-4); }
.marque-logo { height: 40px; width: auto; display: block; }
.topbar .marque-sous { color: var(--ec-text-muted); border-left: 1px solid var(--ec-border); padding-left: var(--esp-4); font-weight: 600; font-size: 13px; opacity: 1; }
.topbar .recherche input { background: var(--ec-bg); border: 1px solid var(--ec-border); }
.topbar .recherche i { color: var(--ec-text-muted); }
.topbar-icone, .avatar-btn, .selecteur-admin select { background: var(--ec-surface); border: 1px solid var(--ec-border); color: var(--ec-navy); }
.topbar-icone:hover, .avatar-btn:hover { background: var(--ec-blue-50); color: var(--ec-navy); }
.avatar-btn { color: var(--ec-text); }
.avatar-role { color: var(--ec-text-muted); opacity: 1; }
.avatar-rond { background: var(--ec-navy); color: var(--ec-white); }
.topbar-burger { background: var(--ec-surface); color: var(--ec-navy); border: 1px solid var(--ec-border); }

/* Menu principal : fond marine, texte blanc atténué ; actif = fond voilé, texte blanc, filet bleu clair */
.menu-horizontal { background: var(--ec-navy); border-bottom: 0; box-shadow: var(--ec-shadow); }
.menu-titre { color: rgba(255, 255, 255, .8); border-bottom: 3px solid transparent; }
.menu-titre i.ic { color: rgba(255, 255, 255, .8); }
.menu-titre:hover, .menu-groupe.ouvert > .menu-titre { background: rgba(255, 255, 255, .1); color: var(--ec-white); }
.menu-groupe.actif > .menu-titre, .menu-titre[aria-current=page] { background: rgba(255, 255, 255, .1); color: var(--ec-white); border-bottom-color: var(--ec-blue-300); }
.menu-groupe.actif > .menu-titre i.ic, .menu-titre:hover i.ic { color: var(--ec-white); }
.menu-sous { background: var(--ec-surface); border: 1px solid var(--ec-border); }
.menu-sous a { color: var(--ec-text); }
.menu-sous a i { background: var(--ec-bg); color: var(--ec-navy); }
.menu-sous a:hover, .menu-sous a:focus-visible { background: var(--ec-blue-50); color: var(--ec-navy); }

.page-entete { background: var(--ec-surface); border-bottom: 1px solid var(--ec-border); }
.page-titre { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ec-navy); }
.page-titre .tuile { background: var(--ec-navy); color: var(--ec-blue-100); }

/* Cartes de statistiques et graphiques */
.carte-stat { background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg); box-shadow: var(--ec-shadow); }
.carte-stat--bleu { --ton: var(--ec-info); --fond: var(--ec-info-bg); }
.carte-stat--alerte { --ton: var(--ec-warning); --fond: var(--ec-warning-bg); }
.carte-stat--succes { --ton: var(--ec-success); --fond: var(--ec-success-bg); }
.carte-stat--danger { --ton: var(--ec-danger); --fond: var(--ec-danger-bg); }

/* Pages publiques et connexion */
.pub-entete { background: var(--ec-surface); border-bottom: 1px solid var(--ec-border); }
.pub-logo { height: 44px; width: auto; display: block; }
.pub-hero { background: var(--ec-navy); color: var(--ec-white); padding: 72px 0 88px; }
.pub-hero h1 { color: var(--ec-white); }
.pub-hero p { color: var(--ec-blue-100); }
.pub-hero .logo-hero { height: 110px; width: auto; display: block; margin-bottom: var(--esp-5); }
.pub-hero .btn { background: var(--ec-surface); color: var(--ec-navy); }
.pub-hero .btn:hover { background: var(--ec-blue-50); }
.pub-pied { background: var(--ec-navy-dark); color: var(--ec-blue-100); }
.pub-icone { background: var(--ec-blue-50); color: var(--ec-navy); }
.auth-page { background: var(--ec-bg); }
.auth-carte { max-width: 440px; padding: 32px; }
.auth-logo { display: block; height: 130px; width: auto; margin: 0 auto var(--esp-5); }
.auth-carte h1 { font-size: 28px; text-align: center; margin-bottom: 0; }
.auth-carte .ec-double-trait { margin-bottom: var(--esp-5); }

/* Responsive : le menu se replie sous 992 px */
@media (max-width: 991px) {
  .topbar-burger { display: block; margin-left: auto; }
  .menu-horizontal { display: none; }
  .menu-horizontal.ouvert { display: block; }
  .menu-horizontal > ul { flex-direction: column; padding: 0; }
  .menu-titre { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .menu-sous { position: static; box-shadow: none; border: 0; background: var(--ec-navy-dark); }
  .menu-sous a { color: rgba(255, 255, 255, .85); }
  .menu-sous a i { background: rgba(255, 255, 255, .1); color: var(--ec-white); }
  .menu-sous a:hover { background: rgba(255, 255, 255, .1); color: var(--ec-white); }
  .topbar .recherche { order: 5; flex-basis: 100%; max-width: none; margin-left: 0; }
  .marque-sous, .avatar-nom { display: none; }
}
@media (max-width: 480px) { .marque-logo { height: 32px; } .page-titre { font-size: 22px; } }
.avatar-menu .item-lien { display: flex; align-items: center; gap: 10px; padding: 11px var(--esp-4); font-size: 13px; color: var(--ec-text); text-decoration: none; }
.avatar-menu .item-lien:hover { background: var(--ec-blue-50); color: var(--ec-navy); }
.avatar-menu .item-lien i { color: var(--ec-navy); width: 16px; }

/* ==========================================================================
   Onglets arrondis (pilules) — seul l'aspect change, pas le fonctionnement
   ========================================================================== */
.onglets { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: var(--esp-4); background: var(--ec-bg); border: 1px solid var(--ec-border); border-radius: 999px; }
.onglets button { margin: 0; padding: .55rem 1.1rem; background: transparent; border: 0; border-radius: 999px; font: 600 13.5px var(--ec-font); color: var(--ec-text-muted); cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.onglets button:hover { background: var(--ec-blue-50); color: var(--ec-navy); }
.onglets button[aria-selected=true] { background: var(--ec-navy); color: var(--ec-white); box-shadow: 0 2px 6px rgba(1, 32, 96, .28); }
.onglets button:focus-visible { outline: 2px solid var(--ec-blue-500); outline-offset: 2px; }
@media (max-width: 600px) { .onglets { border-radius: var(--ec-radius-lg); } }
@media (prefers-reduced-motion: reduce) { .onglets button { transition: none; } }

/* ==========================================================================
   Menu « Actions » des tableaux
   ========================================================================== */
td.droite { text-align: right; }
.menu-actions { display: inline-block; text-align: left; }
.menu-actions__btn { width: 36px; height: 36px; display: inline-grid; place-items: center; background: var(--ec-surface); color: var(--ec-navy); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); cursor: pointer; font-size: 15px; }
.menu-actions__btn:hover, .menu-actions.ouvert .menu-actions__btn { background: var(--ec-blue-50); border-color: var(--ec-blue-100); }
.menu-actions__liste { position: fixed; z-index: 3000; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow-lg); }
.menu-actions__liste[hidden] { display: none; }
.menu-actions__liste li { margin: 0; }
.menu-actions__liste form { margin: 0; display: block; }
.menu-actions__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 12px; background: transparent; border: 0; border-radius: var(--ec-radius-sm); font: 600 13.5px var(--ec-font); color: var(--ec-text); text-align: left; text-decoration: none; cursor: pointer; }
.menu-actions__item i { width: 18px; text-align: center; color: var(--ec-navy); }
.menu-actions__item:hover, .menu-actions__item:focus-visible { background: var(--ec-blue-50); color: var(--ec-navy); outline: none; }
.menu-actions__liste li.danger .menu-actions__item, .menu-actions__liste li.danger .menu-actions__item i { color: var(--ec-danger); }
.menu-actions__liste li.danger .menu-actions__item:hover { background: var(--ec-danger-bg); }
.menu-actions__sep { height: 1px; margin: 6px 4px; background: var(--ec-border); list-style: none; }

/* ==========================================================================
   Barre d'outils des listes : recherche et filtres à gauche, actions à droite
   ========================================================================== */
.barre-outils { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); margin-bottom: var(--esp-4); background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg); padding: var(--esp-3) var(--esp-4); box-shadow: var(--ec-shadow); }
.barre-outils .filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--esp-3); flex: 1 1 auto; }
.barre-outils .filtres .champ { margin: 0; min-width: 160px; }
.barre-outils .actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-left: auto; }

/* ==========================================================================
   Pages publiques : menu fixe, burger, pied de page, section « cabinet »
   ========================================================================== */
html { scroll-behavior: smooth; }
.pub-entete { position: sticky; top: 0; z-index: 100; }
[id] { scroll-margin-top: 84px; }
.pub-barre { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); min-height: 72px; }
.pub-menu { display: flex; align-items: center; gap: var(--esp-5); }
.pub-menu ul { display: flex; gap: var(--esp-1); list-style: none; margin: 0; padding: 0; }
.pub-menu ul a { display: block; padding: .55rem .9rem; border-radius: var(--ec-radius); color: var(--ec-navy); font-weight: 600; text-decoration: none; }
.pub-menu ul a:hover { background: var(--ec-blue-50); }
.pub-burger { display: none; width: 44px; height: 44px; background: var(--ec-surface); color: var(--ec-navy); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); font-size: 1.1rem; cursor: pointer; }
@media (max-width: 991px) {
  .pub-burger { display: inline-grid; place-items: center; }
  .pub-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--esp-3); padding: var(--esp-4); background: var(--ec-surface); border-bottom: 1px solid var(--ec-border); box-shadow: var(--ec-shadow-lg); }
  .pub-menu.ouvert { display: flex; }
  .pub-menu ul { flex-direction: column; }
}
.pub-pied { padding: var(--esp-6) 0 0; }
.pub-pied-grille { display: grid; gap: var(--esp-6); grid-template-columns: 1.2fr 1fr 1.4fr; padding-bottom: var(--esp-5); }
@media (max-width: 991px) { .pub-pied-grille { grid-template-columns: 1fr; } }
.pub-pied-logo { height: 40px; width: auto; margin-bottom: var(--esp-3); }
.pub-pied-titre { color: var(--ec-white); font-size: 1rem; margin-bottom: var(--esp-3); }
.pub-pied p { margin: 0 0 var(--esp-3); }
.pub-pied a { color: var(--ec-white); }
.pub-adresse { display: flex; flex-direction: column; gap: var(--esp-2); font-style: normal; }
.pub-adresse i { width: 18px; color: var(--ec-blue-300); }
.pub-pied-bas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); padding-top: var(--esp-4); padding-bottom: var(--esp-4); border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; }
.pub-cabinet { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--esp-6); align-items: center; }
.pub-cabinet-logo { justify-self: center; max-width: 200px; height: auto; }
@media (max-width: 991px) { .pub-cabinet { grid-template-columns: 1fr; } .pub-cabinet-logo { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ==========================================================================
   Connexion en deux colonnes
   ========================================================================== */
.connexion { min-height: 100vh; display: grid; grid-template-columns: 45% 55%; background: var(--ec-bg); }
.connexion-panneau { background: var(--ec-navy); color: var(--ec-white); padding: var(--esp-8) var(--esp-6); display: flex; flex-direction: column; justify-content: center; gap: var(--esp-5); }
.connexion-panneau .logo-panneau { height: 150px; width: auto; align-self: flex-start; }
.connexion-panneau h2 { color: var(--ec-white); font-size: 1.7rem; line-height: 1.25; margin: 0; max-width: 22ch; }
.connexion-avantages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-4); }
.connexion-avantages li { display: flex; gap: var(--esp-3); align-items: flex-start; color: var(--ec-blue-100); }
.connexion-avantages i { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--ec-radius); background: rgba(255, 255, 255, .1); color: var(--ec-white); }
.connexion-avantages strong { display: block; color: var(--ec-white); }
.connexion-formulaire { display: grid; place-items: center; padding: var(--esp-5); }
.connexion-formulaire .carte { width: 100%; max-width: 440px; padding: 32px; }
.connexion-formulaire .logo-mobile { display: none; }
.connexion-formulaire h1 { text-align: center; margin-bottom: 0; }
.connexion-formulaire .ec-double-trait { display: block; margin-bottom: var(--esp-5); }
@media (max-width: 991px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion-panneau { display: none; }
  .connexion-formulaire .logo-mobile { display: block; height: 110px; width: auto; margin: 0 auto var(--esp-4); }
}

/* ==========================================================================
   Pied de page de l'application (écrans connectés)
   ========================================================================== */
body.app-corps { min-height: 100vh; display: flex; flex-direction: column; }
body.app-corps > main { flex: 1 0 auto; }
.app-pied { flex-shrink: 0; border-top: 1px solid var(--ec-border); background: var(--ec-surface); color: var(--ec-text-muted); font-size: 13px; }
.app-pied .conteneur-large { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--esp-2) var(--esp-5); padding: var(--esp-4) 28px; }
.app-pied nav { display: flex; gap: var(--esp-4); }

/* ==========================================================================
   Écrans de détail : cartes thématiques, paires libellé / valeur
   ========================================================================== */
.detail-carte { margin-bottom: var(--esp-4); }
.detail-grille { display: grid; gap: var(--esp-3) var(--esp-4); margin: 0; }
.detail-grille--1 { grid-template-columns: minmax(0, 1fr); }
.detail-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .detail-grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .detail-grille--2, .detail-grille--3 { grid-template-columns: minmax(0, 1fr); } }
.detail-champ { min-width: 0; }
.detail-champ--pleine { grid-column: 1 / -1; }
.detail-libelle { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-text-muted); margin: 0 0 4px; }
.detail-valeur { margin: 0; padding: 9px 12px; font-size: 15px; font-weight: 700; color: var(--ec-text); background: var(--ec-blue-50); border-radius: var(--ec-radius-sm); overflow-wrap: anywhere; min-height: 40px; }
.detail-valeur--vide { color: var(--ec-text-muted); font-weight: 400; background: var(--ec-bg); }
.detail-valeur .badge { vertical-align: middle; }
.detail-valeur a { font-weight: 700; }

/* ==========================================================================
   Circuit de traitement : cercles numérotés reliés par une ligne
   ========================================================================== */
.circuit { list-style: none; margin: var(--esp-4) 0 var(--esp-2); padding: 0; display: flex; gap: 0; overflow-x: auto; padding-bottom: var(--esp-3); }
.circuit-etape { position: relative; flex: 1 0 118px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; }
/* ligne vers l'étape suivante */
.circuit-etape::after { content: ''; position: absolute; top: 21px; left: calc(50% + 24px); right: calc(-50% + 24px); border-top: 3px dotted var(--ec-border); }
.circuit-etape:last-child::after { display: none; }
.circuit-etape--terminee::after { border-top: 3px solid var(--ec-success); }
.circuit-cercle { position: relative; z-index: 1; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ec-border); background: var(--ec-surface); color: var(--ec-text-muted); font: 700 15px var(--ec-font); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.circuit-cercle:hover { transform: scale(1.08); }
.circuit-etape--terminee .circuit-cercle { background: var(--ec-success); border-color: var(--ec-success); color: var(--ec-white); }
.circuit-etape--en_cours .circuit-cercle { width: 50px; height: 50px; margin-top: -4px; background: var(--ec-navy); border-color: var(--ec-navy); color: var(--ec-white); font-size: 17px; animation: circuit-halo 2s ease-out infinite; }
.circuit-etape--en_cours::after { top: 21px; }
.circuit-etape--retard .circuit-cercle { background: var(--ec-danger); border-color: var(--ec-danger); }
.circuit-nom { font-size: 13px; font-weight: 600; color: var(--ec-text); line-height: 1.3; max-width: 130px; }
.circuit-etape--a_venir .circuit-nom { color: var(--ec-text-muted); font-weight: 500; }
.circuit-badge { font-size: 11px; padding: 1px 8px; }
@keyframes circuit-halo { 0% { box-shadow: 0 0 0 0 rgba(1, 32, 96, .35); } 70% { box-shadow: 0 0 0 12px rgba(1, 32, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(1, 32, 96, 0); } }
@media (prefers-reduced-motion: reduce) { .circuit-etape--en_cours .circuit-cercle { animation: none; box-shadow: 0 0 0 5px var(--ec-blue-100); } .circuit-cercle { transition: none; } }
/* bulle d'information */
.circuit-bulle { position: fixed; z-index: 3500; width: min(320px, calc(100vw - 24px)); padding: var(--esp-3) var(--esp-4); text-align: left; background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow-lg); font-size: 13px; color: var(--ec-text); }
.circuit-bulle[hidden] { display: none; }
.circuit-bulle strong { display: block; color: var(--ec-navy); margin-bottom: 4px; }
.circuit-bulle p { margin: 0 0 var(--esp-2); color: var(--ec-text-muted); }
.circuit-bulle dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; }
.circuit-bulle dt { color: var(--ec-text-muted); } .circuit-bulle dd { margin: 0; font-weight: 600; }
/* mobile : circuit à la verticale */
@media (max-width: 767px) {
  .circuit { flex-direction: column; overflow: visible; gap: var(--esp-3); }
  .circuit-etape { flex: none; flex-direction: row; align-items: center; text-align: left; gap: var(--esp-3); padding: 0; min-height: 46px; }
  .circuit-etape::after { top: 46px; bottom: -14px; left: 20px; right: auto; height: auto; border-top: 0; border-left: 3px dotted var(--ec-border); }
  .circuit-etape--terminee::after { border-left: 3px solid var(--ec-success); border-top: 0; }
  .circuit-etape--en_cours::after { left: 24px; }
  .circuit-nom { max-width: none; }
}

/* ==========================================================================
   Organigramme en arbre (OrgChart) aux couleurs de la charte
   ========================================================================== */
.bascule-vue { display: inline-flex; gap: 4px; padding: 4px; background: var(--ec-bg); border: 1px solid var(--ec-border); border-radius: 999px; }
.bascule-vue .btn { min-height: 34px; border-radius: 999px; border-color: transparent; background: transparent; }
.bascule-vue .btn[aria-pressed=true] { background: var(--ec-navy); color: var(--ec-white); }
.bascule-vue .btn[aria-pressed=true] i { color: var(--ec-white); }
.arbre-outils { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; margin-bottom: var(--esp-3); }
.arbre-outils__sep { width: 1px; height: 26px; background: var(--ec-border); margin: 0 var(--esp-2); }
#arbre-graphique { text-align: center; min-height: 460px; height: min(70vh, 720px); overflow: hidden; border: 1px dashed var(--ec-border); border-radius: var(--ec-radius); background: var(--ec-bg); }
#arbre-graphique .orgchart { background: transparent; min-height: 100%; }
#arbre-graphique .orgchart .node { width: 210px; height: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
#arbre-graphique .orgchart .node:hover { background: transparent; }
.oc-carte { text-align: left; background: var(--ec-surface); border: 1px solid var(--ec-border); border-top: 4px solid var(--ec-navy); border-radius: var(--ec-radius); padding: 10px 12px; box-shadow: var(--ec-shadow); cursor: pointer; transition: box-shadow .15s, transform .15s; }
.oc-carte:hover, .oc-carte:focus-visible { box-shadow: var(--ec-shadow-lg); transform: translateY(-2px); outline: none; border-color: var(--ec-blue-500); border-top-color: var(--ec-navy); }
.oc-nom { font-weight: 700; font-size: 14px; color: var(--ec-text); line-height: 1.3; }
.oc-type { font-size: 12px; color: var(--ec-text-muted); margin: 2px 0 6px; }
.oc-resp { font-size: 12.5px; color: var(--ec-navy); font-weight: 600; }
.oc-resp i { margin-right: 4px; }
.oc-vide { color: var(--ec-text-muted); font-weight: 400; font-style: italic; }
.oc-inactive { opacity: .55; border-top-color: var(--ec-text-muted); }
#arbre-graphique .orgchart .edge { color: var(--ec-navy); font-size: 11px; }
@media (max-width: 640px) { #arbre-graphique { height: 60vh; } }

/* OrgChart : lignes de liaison et fond aux couleurs de la charte (remplace le rouge par défaut de la bibliothèque) */
#arbre-graphique .orgchart { background-image: none; padding: 24px 24px 12px; }
#arbre-graphique .orgchart .hierarchy::before,
#arbre-graphique .orgchart .nodes.vertical .hierarchy::after,
#arbre-graphique .orgchart .nodes.vertical .hierarchy::before { border-color: var(--ec-blue-300); }
#arbre-graphique .orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after,
#arbre-graphique .orgchart > ul > li > ul li > .node::before { background-color: var(--ec-blue-300); }
#arbre-graphique .orgchart .edge:hover::before { border-color: var(--ec-navy); }
#arbre-graphique .orgchart .node .toggleBtn:hover { background-color: var(--ec-navy); }
#arbre-graphique .orgchart .edge { color: var(--ec-navy); }

/* ==========================================================================
   Concepteur visuel de workflow (glisser-déposer + flèches)
   ========================================================================== */
.wf { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: var(--esp-4); align-items: start; }
.wf:has(.wf-palette:not(:first-child)) { }
.wf > .wf-zone { min-width: 0; }
.wf-palette, .wf-panneau { background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg); box-shadow: var(--ec-shadow); padding: var(--esp-4); position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; }
.wf-palette h2, .wf-panneau h2 { font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.wf-panneau[hidden] { display: none; }
.wf:not(:has(.wf-panneau:not([hidden]))) { grid-template-columns: 210px minmax(0, 1fr); }
.wf:not(:has(.wf-palette)) { grid-template-columns: minmax(0, 1fr) 320px; }
.wf:not(:has(.wf-palette)):not(:has(.wf-panneau:not([hidden]))) { grid-template-columns: minmax(0, 1fr); }
.wf-palette-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: var(--esp-2); background: var(--ec-bg); border: 1px solid var(--ec-border); border-left: 4px solid var(--ec-navy); border-radius: var(--ec-radius-sm); font-weight: 600; font-size: 13.5px; cursor: grab; user-select: none; }
.wf-palette-item i { width: 18px; text-align: center; color: var(--ec-navy); }
.wf-palette-item:hover, .wf-palette-item:focus-visible { background: var(--ec-blue-50); border-color: var(--ec-blue-500); border-left-color: var(--ec-navy); }
.wf-palette-item[data-cle=debut] { border-left-color: var(--ec-success); }
.wf-palette-item[data-cle=fin] { border-left-color: var(--ec-danger); }
.wf-aide { margin: 0 0 var(--esp-2); }
.wf-pastille { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--ec-blue-500); border: 2px solid var(--ec-surface); box-shadow: 0 0 0 1px var(--ec-blue-500); vertical-align: -2px; }
.wf-canvas { height: min(68vh, 680px); min-height: 420px; overflow: auto; background-color: var(--ec-bg); background-image: radial-gradient(var(--ec-border) 1px, transparent 1px); background-size: 20px 20px; border: 1px solid var(--ec-border); border-radius: var(--ec-radius-lg); }
.wf-scene { position: relative; }
.wf-fleches { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.wf-fleche { pointer-events: auto; cursor: pointer; outline: none; }
.wf-fleche__zone { fill: none; stroke: transparent; stroke-width: 16; }
.wf-fleche__trait { fill: none; stroke: var(--ec-blue-600); stroke-width: 2.5; }
.wf-fleche:hover .wf-fleche__trait, .wf-fleche:focus-visible .wf-fleche__trait { stroke: var(--ec-navy); stroke-width: 3.5; }
.wf-fleche--sel .wf-fleche__trait { stroke: var(--ec-gold); stroke-width: 4; }
.wf-fleche__fond { fill: var(--ec-surface); stroke: var(--ec-border); }
.wf-fleche__texte { font: 600 11.5px var(--ec-font); fill: var(--ec-text); }
.wf-pointe { fill: var(--ec-blue-600); } .wf-pointe--sel { fill: var(--ec-gold); }
.wf-fleche__temp { fill: none; stroke: var(--ec-blue-500); stroke-width: 2.5; stroke-dasharray: 6 5; pointer-events: none; }
.wf-noeud { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 14px 8px 12px; background: var(--ec-surface); border: 1px solid var(--ec-border); border-top: 4px solid var(--ec-navy); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow); cursor: grab; touch-action: none; user-select: none; }
.wf-noeud:hover { border-color: var(--ec-blue-500); border-top-color: var(--ec-navy); }
.wf-noeud:focus-visible { outline: 2px solid var(--ec-blue-500); outline-offset: 2px; }
.wf-noeud--sel { border-color: var(--ec-gold); border-top-color: var(--ec-navy); box-shadow: 0 0 0 3px var(--ec-gold), var(--ec-shadow-lg); }
.wf-noeud--glisse { cursor: grabbing; box-shadow: var(--ec-shadow-lg); z-index: 5; }
.wf-noeud--cible { border-color: var(--ec-success); box-shadow: 0 0 0 3px var(--ec-success-bg), 0 0 0 5px var(--ec-success); }
.wf-noeud--debut { border-top-color: var(--ec-success); }
.wf-noeud--fin { border-top-color: var(--ec-danger); }
.wf-num { position: absolute; top: 6px; right: 12px; font: 600 11px ui-monospace, Consolas, monospace; color: var(--ec-text-muted); }
.wf-ic { position: absolute; left: 12px; top: 10px; color: var(--ec-navy); font-size: 13px; }
.wf-titre { margin-left: 22px; font-size: 13.5px; line-height: 1.25; color: var(--ec-text); max-height: 2.6em; overflow: hidden; padding-right: 30px; }
.wf-acteur { margin-left: 22px; font-size: 11.5px; color: var(--ec-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-marque { position: absolute; left: 10px; bottom: -9px; font: 700 10px var(--ec-font); text-transform: uppercase; letter-spacing: .06em; padding: 1px 8px; border-radius: 999px; color: var(--ec-white); }
.wf-marque--debut { background: var(--ec-success); } .wf-marque--fin { background: var(--ec-danger); }
.wf-sortie { position: absolute; right: -8px; top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--ec-blue-500); border: 2px solid var(--ec-surface); box-shadow: 0 0 0 1px var(--ec-blue-500); cursor: crosshair; touch-action: none; }
.wf-sortie:hover { background: var(--ec-navy); transform: scale(1.2); }
.wf-popover { position: fixed; z-index: 4000; width: 250px; padding: var(--esp-3); background: var(--ec-surface); border: 1px solid var(--ec-border); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow-lg); }
.wf-popover[hidden] { display: none; }
.wf-popover label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
@media (max-width: 1100px) {
  .wf, .wf:not(:has(.wf-panneau:not([hidden]))), .wf:not(:has(.wf-palette)) { grid-template-columns: minmax(0, 1fr); }
  .wf-palette, .wf-panneau { position: static; max-height: none; }
  #wf-palette-liste { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
  .wf-palette-item { margin: 0; }
}

/* ---- Import BPMN ---- */
#bpmn-canvas { height: 380px; border: 1px solid var(--c-bordure); border-radius: var(--rayon); background: var(--ec-white); margin: var(--esp-3) 0; }
#bpmn-canvas:empty { display: none; }
#bpmn-form label { display: block; font-weight: 600; margin-top: var(--esp-3); }
#bpmn-form select, #bpmn-form input[type=text] { max-width: 28rem; }

/* ---- Import BPMN ---- */
#bpmn-canvas { height: 380px; border: 1px solid var(--c-bordure); border-radius: var(--rayon); background: var(--ec-white); margin: var(--esp-3) 0; }
#bpmn-canvas:empty { display: none; }
#bpmn-form label { display: block; font-weight: 600; margin-top: var(--esp-3); }
#bpmn-form select, #bpmn-form input[type=text] { max-width: 28rem; }

/* ---- Colonne d'actions : moins de 3 actions = boutons directs, sans menu ---- */
td.droite.actions-directes { display: flex; justify-content: flex-end; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
td.droite.actions-directes form { margin: 0; display: inline-flex; }

/* ---- Concepteur : statut lié à l'étape ---- */
.wf-statut { display: inline-block; margin-top: 2px; padding: 0 .45rem; font-size: 10.5px; font-weight: 600; border-radius: 999px; background: var(--c-primaire-clair); color: var(--c-primaire-fonce); }

/* ---- Parcours du courrier (frise verticale) ---- */
.parcours { list-style: none; margin: 0; padding: 0; position: relative; }
.parcours-ev { position: relative; display: flex; gap: var(--esp-3); padding: 0 0 var(--esp-4) 0; }
.parcours-ev::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--c-bordure); }
.parcours-ev:last-child::before { display: none; }
.parcours-point { flex: 0 0 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--ec-white); border: 3px solid var(--c-bordure); z-index: 1; }
.parcours-ev--terminee .parcours-point { border-color: var(--ec-success); background: var(--ec-success); }
.parcours-ev--en_cours .parcours-point { border-color: var(--c-navy); background: var(--ec-white); box-shadow: 0 0 0 4px var(--c-primaire-clair); }
.parcours-ev--annulee .parcours-point { border-color: var(--c-bordure); background: var(--c-bordure); }
.parcours-ev--annulee .parcours-corps { opacity: .7; }
.parcours-corps { flex: 1; min-width: 0; }
.parcours-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
.parcours-meta { margin: 2px 0; color: var(--c-texte-doux, #5b6677); font-size: 13px; }
.parcours-action { margin: 2px 0; font-size: 13.5px; }
.parcours-commentaire { margin: var(--esp-2) 0; padding: var(--esp-2) var(--esp-3); border-left: 3px solid var(--c-navy); background: var(--c-navy-50); border-radius: var(--rayon-sm); font-size: 13.5px; }

/* ---- Détail : résumé du circuit, acteurs et statuts ---- */
.circuit-resume { margin: 0 0 var(--esp-4); padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon); background: var(--c-navy-50); border-left: 4px solid var(--c-navy); }
.circuit-resume p { margin: 2px 0; }
.sous-titre-carte { margin: var(--esp-5) 0 var(--esp-2); font-size: 15px; color: var(--c-navy); }
.tableau-compact td, .tableau-compact th { padding: .45rem .6rem; font-size: 13px; }
.tableau-compact tr.ligne-courante { background: var(--c-primaire-clair); font-weight: 600; }

/* ---- Accueil : repère de la section affichée dans le menu ---- */
.pub-menu ul a { position: relative; transition: background .15s, color .15s; }
.pub-menu ul a::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .2rem; height: 3px; border-radius: 3px; background: var(--ec-blue-600, var(--c-navy)); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.pub-menu ul a.actif { color: var(--c-primaire-fonce, var(--ec-navy)); background: var(--ec-blue-50); }
.pub-menu ul a.actif::after { transform: scaleX(1); }

/* ---- Menu « Attente d'actions » : compteur ---- */
.compteur-menu { display: inline-block; min-width: 20px; margin-left: .45rem; padding: 0 .4rem; border-radius: 999px; background: var(--ec-danger); color: var(--ec-white); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; }
.compteur-menu.nul { background: rgba(255,255,255,.22); color: var(--ec-white); }