/* ==========================================================================
   4ENECO — Design System v1
   Source unique de vérité. Aucun style ne doit être redéfini dans les pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Marque — conservée depuis l'identité 4ENECO */
  --e-blue:        #013759;
  --e-blue-700:    #01293F;
  --e-blue-900:    #011E2E;
  --e-blue-50:     #EAF0F5;
  --e-blue-100:    #D6E1EA;
  --e-amber:       #F1C40F;   /* Accent signature — usage rare et petit */

  /* Encre */
  --e-ink:         #0A1F2E;   /* Texte principal        — 15.8:1 sur blanc */
  --e-ink-2:       #41586C;   /* Texte secondaire       —  7.6:1 */
  --e-ink-3:       #6B8095;   /* Métadonnées, captions  —  4.6:1 */

  /* Surfaces */
  --e-paper:       #F6F8FA;   /* Fond application */
  --e-surface:     #FFFFFF;   /* Cartes, tables */
  --e-surface-2:   #FAFBFC;   /* En-têtes de table, zones inertes */
  --e-line:        #E4EAF0;
  --e-line-2:      #CFDAE4;

  /* Statuts — jamais utilisés comme couleur décorative */
  --e-ok:          #0E7A54;  --e-ok-bg:   #E7F4EF;  --e-ok-line:   #B6DFCD;
  --e-warn:        #A25E00;  --e-warn-bg: #FCF2E3;  --e-warn-line: #F0D9AC;
  --e-crit:        #B3271B;  --e-crit-bg: #FBEBE9;  --e-crit-line: #F2C6C1;
  --e-off:         #66798A;  --e-off-bg:  #EEF1F4;  --e-off-line:  #D5DDE4;

  /* Rayons — sobres. Aucun pill sauf badges de statut. */
  --e-r-xs: 4px;
  --e-r-sm: 6px;
  --e-r:    9px;
  --e-r-lg: 13px;

  /* Élévation — quasi absente. Réservée aux couches flottantes. */
  --e-sh-1: 0 1px 2px rgba(10,31,46,.05), 0 0 0 1px rgba(10,31,46,.04);
  --e-sh-2: 0 10px 30px -8px rgba(10,31,46,.18), 0 0 0 1px rgba(10,31,46,.06);

  /* Espacement — échelle 4 */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;

  /* Typographie */
  --e-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
            "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --e-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
            Menlo, Consolas, monospace;

  /* Structure */
  --e-sidebar:     248px;
  --e-sidebar-min: 64px;
  --e-header:      56px;
  --e-max:         1440px;

  /* Mouvement — court, fonctionnel */
  --e-t: 140ms cubic-bezier(.2,.6,.3,1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--e-paper);
  color: var(--e-ink);
  font-family: var(--e-font);
  font-size: .875rem;      /* 14px */
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1;
}
h1,h2,h3,h4,p,figure{ margin: 0; }
button,input,select,textarea{ font: inherit; color: inherit; }
a{ color: inherit; text-decoration: none; }
table{ border-collapse: collapse; width: 100%; }
[hidden]{ display: none !important; }

/* Focus visible — obligatoire, jamais supprimé */
:focus-visible{
  outline: 2px solid var(--e-blue);
  outline-offset: 2px;
  border-radius: var(--e-r-xs);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
.e-h1{ font-size: 1.25rem;  font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.e-h2{ font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; }
.e-h3{ font-size: .8125rem; font-weight: 600; }
.e-body{ font-size: .875rem; }
.e-sub{ font-size: .8125rem; color: var(--e-ink-2); }
.e-caption{
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--e-ink-3);
}
.e-num{
  font-family: var(--e-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.e-muted{ color: var(--e-ink-2); }
.e-dim{ color: var(--e-ink-3); }

/* --------------------------------------------------------------------------
   4. SHELL — sidebar + header + contenu
   -------------------------------------------------------------------------- */
.e-shell{ display: flex; min-height: 100vh; }

.e-sidebar{
  width: var(--e-sidebar);
  flex: 0 0 var(--e-sidebar);
  background: var(--e-blue);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  transition: width var(--e-t), flex-basis var(--e-t), transform var(--e-t);
}
.e-sidebar__brand{
  height: var(--e-header);
  display: flex; align-items: center; gap: var(--e-3);
  padding: 0 var(--e-4);
  border-bottom: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
/* Marque « 4. » : logo_portail_clair.svg sur fond sombre, logo_portail.svg sur fond clair */
.e-logo{ width: 26px; height: 26px; flex: 0 0 26px; display: block; }
.e-sidebar__name{ font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

.e-nav{ flex: 1 1 auto; overflow-y: auto; padding: var(--e-4) var(--e-2); }
.e-nav__group{ margin-bottom: var(--e-5); }
.e-nav__label{
  font-size: .625rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.40);
  padding: 0 var(--e-3) var(--e-2);
  white-space: nowrap;
}
.e-nav__item{
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--e-r-sm);
  color: rgba(255,255,255,.78);
  font-size: .8125rem; font-weight: 500;
  position: relative;
  white-space: nowrap;
  transition: background var(--e-t), color var(--e-t);
}
.e-nav__item:hover{ background: rgba(255,255,255,.08); color: #fff; }
.e-nav__item i{ font-size: 1rem; flex: 0 0 18px; text-align: center; opacity: .9; }
.e-nav__item.is-active{ background: rgba(255,255,255,.13); color: #fff; font-weight: 600; }
.e-nav__item.is-active::before{
  content: ""; position: absolute; left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 2px 2px 0;
  background: var(--e-amber);
}
.e-nav__count{
  margin-left: auto;
  font-family: var(--e-mono); font-size: .6875rem; font-weight: 500;
  background: rgba(255,255,255,.14); color: #fff;
  padding: 1px 6px; border-radius: 999px;
}
.e-nav__count--crit{ background: #E05B4C; color: #fff; }

.e-sidebar__foot{
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,.10);
  padding: var(--e-3);
}
.e-account{
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2);
  border-radius: var(--e-r-sm);
  width: 100%; border: 0; background: transparent; cursor: pointer;
  text-align: left;
  transition: background var(--e-t);
}
.e-account:hover{ background: rgba(255,255,255,.08); }
.e-avatar{
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 600;
}
.e-account__id{ min-width: 0; }
.e-account__name{
  font-size: .8125rem; font-weight: 500; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.e-account__role{ font-size: .6875rem; color: rgba(255,255,255,.55); white-space: nowrap; }

/* Mode réduit */
.e-shell.is-collapsed .e-sidebar{ width: var(--e-sidebar-min); flex-basis: var(--e-sidebar-min); }
.e-shell.is-collapsed .e-main{ margin-left: var(--e-sidebar-min); }
.e-shell.is-collapsed .e-sidebar__name,
.e-shell.is-collapsed .e-nav__label,
.e-shell.is-collapsed .e-nav__item span,
.e-shell.is-collapsed .e-nav__count,
.e-shell.is-collapsed .e-account__id{ display: none; }
.e-shell.is-collapsed .e-nav__item,
.e-shell.is-collapsed .e-account,
.e-shell.is-collapsed .e-sidebar__brand{ justify-content: center; padding-inline: 0; }
.e-shell.is-collapsed .e-nav__label{ height: 1px; margin: var(--e-4) var(--e-3); background: rgba(255,255,255,.12); display: block; padding: 0; }

/* Tooltip en mode réduit */
.e-shell.is-collapsed .e-nav__item[data-tip]{ position: relative; }
.e-shell.is-collapsed .e-nav__item[data-tip]:hover::after{
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  background: var(--e-ink); color: #fff;
  font-size: .75rem; font-weight: 500;
  padding: 5px 9px; border-radius: var(--e-r-sm);
  white-space: nowrap; z-index: 80;
  box-shadow: var(--e-sh-2);
}

.e-main{
  flex: 1 1 auto;
  margin-left: var(--e-sidebar);
  min-width: 0;
  transition: margin var(--e-t);
}

.e-header{
  height: var(--e-header);
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--e-line);
  display: flex; align-items: center; gap: var(--e-4);
  padding: 0 var(--e-6);
}
.e-header__title{ min-width: 0; }
.e-header__actions{ margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }

.e-iconbtn{
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--e-r-sm);
  color: var(--e-ink-2); cursor: pointer;
  position: relative;
  transition: background var(--e-t), color var(--e-t);
}
.e-iconbtn:hover{ background: var(--e-blue-50); color: var(--e-blue); }
.e-iconbtn__dot{
  position: absolute; top: 5px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--e-crit); box-shadow: 0 0 0 2px #fff;
}

.e-searchbtn{
  display: flex; align-items: center; gap: var(--e-2);
  height: 32px; padding: 0 var(--e-2) 0 var(--e-3);
  border: 1px solid var(--e-line); background: var(--e-surface);
  border-radius: var(--e-r-sm);
  color: var(--e-ink-3); font-size: .8125rem;
  cursor: pointer; min-width: 210px;
  transition: border-color var(--e-t);
}
.e-searchbtn:hover{ border-color: var(--e-line-2); }
.e-kbd{
  margin-left: auto;
  font-family: var(--e-mono); font-size: .6875rem;
  border: 1px solid var(--e-line); border-bottom-width: 2px;
  border-radius: var(--e-r-xs); padding: 1px 5px;
  color: var(--e-ink-3); background: var(--e-surface-2);
}

.e-page{ max-width: var(--e-max); padding: var(--e-6); }

/* --------------------------------------------------------------------------
   5. SIGNATURE — Bandeau d'état du réseau
   Une seule ligne répond à « que se passe-t-il maintenant ? »
   -------------------------------------------------------------------------- */
.e-ribbon{
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: var(--e-r-lg);
  padding: var(--e-5) var(--e-5) var(--e-4);
  margin-bottom: var(--e-5);
}
.e-ribbon__head{
  display: flex; align-items: baseline; gap: var(--e-3);
  margin-bottom: var(--e-4); flex-wrap: wrap;
}
.e-ribbon__total{
  margin-left: auto;
  font-family: var(--e-mono); font-size: .75rem; color: var(--e-ink-3);
}
.e-ribbon__bar{
  display: flex; gap: 2px; height: 10px;
  border-radius: 999px; overflow: hidden;
  background: var(--e-line);
}
.e-ribbon__seg{
  border: 0; padding: 0; cursor: pointer;
  transition: filter var(--e-t), flex-grow var(--e-t);
}
.e-ribbon__seg:hover{ filter: brightness(1.12); }
.e-ribbon__seg--ok  { background: var(--e-ok); }
.e-ribbon__seg--warn{ background: var(--e-warn); }
.e-ribbon__seg--crit{ background: var(--e-crit); }
.e-ribbon__seg--off { background: var(--e-off); }

.e-ribbon__legend{
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6);
  margin-top: var(--e-4);
}
.e-legend{
  display: flex; align-items: center; gap: var(--e-2);
  border: 0; background: transparent; padding: 2px 0; cursor: pointer;
  font-size: .8125rem; color: var(--e-ink-2);
}
.e-legend:hover{ color: var(--e-ink); }
.e-legend b{ font-family: var(--e-mono); font-weight: 600; color: var(--e-ink); }
.e-legend__key{ width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }

/* --------------------------------------------------------------------------
   6. GRILLE + CARTES
   -------------------------------------------------------------------------- */
.e-grid{ display: grid; gap: var(--e-4); }
.e-grid--kpi{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.e-grid--2{ grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); }
.e-stack{ display: grid; gap: var(--e-4); align-content: start; }

.e-card{
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: var(--e-r-lg);
  overflow: hidden;
}
.e-card__head{
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--e-line);
}
.e-card__head .e-link{ margin-left: auto; }
.e-card__body{ padding: var(--e-5); }
.e-card__body--flush{ padding: 0; }

.e-link{
  font-size: .8125rem; font-weight: 500; color: var(--e-blue);
  display: inline-flex; align-items: center; gap: 4px;
}
.e-link:hover{ text-decoration: underline; }

/* KPI — chiffre, libellé, évolution. Rien d'autre. */
.e-kpi{
  background: var(--e-surface);
  border: 1px solid var(--e-line);
  border-radius: var(--e-r-lg);
  padding: var(--e-4) var(--e-5) var(--e-5);
}
.e-kpi__label{
  font-size: .75rem; font-weight: 500; color: var(--e-ink-2);
  display: flex; align-items: center; gap: 6px;
}
.e-kpi__value{
  font-family: var(--e-mono);
  font-size: 1.75rem; font-weight: 500; letter-spacing: -.045em;
  line-height: 1.1; color: var(--e-ink);
  margin-top: var(--e-3);
  font-variant-numeric: tabular-nums;
}
.e-kpi__value small{ font-size: .875rem; font-weight: 500; color: var(--e-ink-3); letter-spacing: 0; }
.e-kpi__delta{
  margin-top: var(--e-2);
  font-size: .75rem; color: var(--e-ink-3);
  display: flex; align-items: center; gap: 5px;
}
.e-kpi__delta b{ font-family: var(--e-mono); font-weight: 500; }
.e-kpi__delta--up   b{ color: var(--e-ok); }
.e-kpi__delta--down b{ color: var(--e-crit); }
.e-kpi--alert{ border-color: var(--e-crit-line); background: linear-gradient(var(--e-crit-bg), var(--e-crit-bg)) no-repeat 0 0 / 100% 3px, var(--e-surface); }
.e-kpi--alert .e-kpi__value{ color: var(--e-crit); }

/* --------------------------------------------------------------------------
   7. STATUTS — jamais la couleur seule : point + libellé
   -------------------------------------------------------------------------- */
.e-badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: .75rem; font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.e-badge::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.e-badge--ok  { color: var(--e-ok);   background: var(--e-ok-bg);   border-color: var(--e-ok-line); }
.e-badge--warn{ color: var(--e-warn); background: var(--e-warn-bg); border-color: var(--e-warn-line); }
.e-badge--crit{ color: var(--e-crit); background: var(--e-crit-bg); border-color: var(--e-crit-line); }
.e-badge--off { color: var(--e-off);  background: var(--e-off-bg);  border-color: var(--e-off-line); }
.e-badge--neutral{ color: var(--e-blue); background: var(--e-blue-50); border-color: var(--e-blue-100); }
.e-badge--neutral::before{ display: none; }

/* Jauge de remplissage */
.e-gauge{ display: flex; align-items: center; gap: var(--e-3); min-width: 118px; }
.e-gauge__track{
  flex: 1 1 auto; height: 5px; border-radius: 999px;
  background: var(--e-line); overflow: hidden;
}
.e-gauge__fill{ height: 100%; border-radius: 999px; background: var(--e-ok); }
.e-gauge__fill--warn{ background: var(--e-warn); }
.e-gauge__fill--crit{ background: var(--e-crit); }
.e-gauge__val{
  font-family: var(--e-mono); font-size: .75rem; font-weight: 500;
  color: var(--e-ink-2); flex: 0 0 auto; min-width: 34px; text-align: right;
}

/* --------------------------------------------------------------------------
   8. BOUTONS
   -------------------------------------------------------------------------- */
.e-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 var(--e-3);
  border-radius: var(--e-r-sm);
  font-size: .8125rem; font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--e-t), border-color var(--e-t), color var(--e-t);
}
.e-btn i{ font-size: .9375rem; }
.e-btn--primary{ background: var(--e-blue); color: #fff; }
.e-btn--primary:hover{ background: var(--e-blue-700); }
.e-btn--secondary{ background: var(--e-surface); color: var(--e-ink); border-color: var(--e-line-2); }
.e-btn--secondary:hover{ background: var(--e-surface-2); border-color: var(--e-ink-3); }
.e-btn--ghost{ background: transparent; color: var(--e-ink-2); }
.e-btn--ghost:hover{ background: var(--e-blue-50); color: var(--e-blue); }
.e-btn--danger{ background: var(--e-crit); color: #fff; }
.e-btn--danger:hover{ filter: brightness(.92); }
.e-btn--sm{ height: 26px; padding: 0 var(--e-2); font-size: .75rem; }
.e-btn[disabled]{ opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   9. ALERTES — Information → Interprétation → Action
   -------------------------------------------------------------------------- */
.e-alert{
  display: flex; align-items: flex-start; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--e-line);
  transition: background var(--e-t);
}
.e-alert:last-child{ border-bottom: 0; }
.e-alert:hover{ background: var(--e-surface-2); }
.e-alert__rail{ width: 3px; border-radius: 999px; align-self: stretch; flex: 0 0 3px; }
.e-alert--crit .e-alert__rail{ background: var(--e-crit); }
.e-alert--warn .e-alert__rail{ background: var(--e-warn); }
.e-alert--info .e-alert__rail{ background: var(--e-off); }
.e-alert__body{ flex: 1 1 auto; min-width: 0; }
.e-alert__title{ font-size: .875rem; font-weight: 600; color: var(--e-ink); }
.e-alert__read{ font-size: .8125rem; color: var(--e-ink-2); margin-top: 3px; }
.e-alert__meta{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3);
  margin-top: var(--e-2);
  font-size: .75rem; color: var(--e-ink-3);
}
.e-alert__meta .e-num{ font-size: .75rem; }
.e-alert__act{ display: flex; align-items: center; gap: var(--e-2); flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   10. TABLE
   -------------------------------------------------------------------------- */
.e-tablewrap{ overflow-x: auto; }
.e-table{ font-size: .8125rem; }
.e-table thead th{
  text-align: left;
  padding: var(--e-3) var(--e-4);
  background: var(--e-surface-2);
  border-bottom: 1px solid var(--e-line);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--e-ink-3);
  white-space: nowrap;
}
.e-table tbody td{
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--e-line);
  vertical-align: middle;
}
.e-table tbody tr:last-child td{ border-bottom: 0; }
.e-table tbody tr{ transition: background var(--e-t); }
.e-table tbody tr:hover{ background: var(--e-blue-50); }
.e-table__name{ font-weight: 500; color: var(--e-ink); }
.e-table__sub{ font-size: .75rem; color: var(--e-ink-3); margin-top: 1px; }
.e-table__act{ text-align: right; white-space: nowrap; }

/* Barre de filtres */
.e-toolbar{
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--e-line);
  flex-wrap: wrap;
}
.e-field{
  display: flex; align-items: center; gap: var(--e-2);
  height: 32px; padding: 0 var(--e-3);
  border: 1px solid var(--e-line-2); border-radius: var(--e-r-sm);
  background: var(--e-surface); color: var(--e-ink-3);
}
.e-field input{ border: 0; outline: 0; background: transparent; width: 190px; font-size: .8125rem; color: var(--e-ink); }
.e-field input::placeholder{ color: var(--e-ink-3); }
.e-chip{
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 var(--e-2) 0 var(--e-3);
  border: 1px solid var(--e-blue-100); background: var(--e-blue-50);
  border-radius: 999px; font-size: .75rem; color: var(--e-blue);
  cursor: pointer;
}
.e-chip button{ border: 0; background: none; cursor: pointer; color: inherit; display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   11. TIMELINE
   -------------------------------------------------------------------------- */
.e-feed{ padding: var(--e-2) 0; }
.e-feed__item{
  display: flex; gap: var(--e-3);
  padding: var(--e-2) var(--e-5);
  position: relative;
}
.e-feed__ico{
  width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%;
  background: var(--e-blue-50); color: var(--e-blue);
  display: grid; place-items: center; font-size: .75rem;
  margin-top: 1px;
}
.e-feed__ico--ok{ background: var(--e-ok-bg); color: var(--e-ok); }
.e-feed__ico--warn{ background: var(--e-warn-bg); color: var(--e-warn); }
.e-feed__ico--crit{ background: var(--e-crit-bg); color: var(--e-crit); }
.e-feed__txt{ font-size: .8125rem; color: var(--e-ink); min-width: 0; }
.e-feed__txt b{ font-weight: 600; }
.e-feed__meta{ font-size: .75rem; color: var(--e-ink-3); margin-top: 1px; }
.e-feed__time{
  margin-left: auto; flex: 0 0 auto;
  font-family: var(--e-mono); font-size: .6875rem; color: var(--e-ink-3);
  padding-top: 3px;
}

/* --------------------------------------------------------------------------
   12. ÉTATS UX — vide, chargement, erreur
   -------------------------------------------------------------------------- */
.e-empty{
  padding: var(--e-12) var(--e-6);
  text-align: center;
}
.e-empty__ico{
  width: 40px; height: 40px; margin: 0 auto var(--e-4);
  border-radius: var(--e-r);
  background: var(--e-ok-bg); color: var(--e-ok);
  display: grid; place-items: center; font-size: 1.125rem;
}
.e-empty__ico--neutral{ background: var(--e-blue-50); color: var(--e-blue); }
.e-empty__ico--error{ background: var(--e-crit-bg); color: var(--e-crit); }
.e-empty__title{ font-size: .9375rem; font-weight: 600; }
.e-empty__text{ font-size: .8125rem; color: var(--e-ink-2); margin-top: var(--e-2); }
.e-empty__act{ margin-top: var(--e-4); display: flex; gap: var(--e-2); justify-content: center; }

.e-skel{
  position: relative; overflow: hidden;
  background: var(--e-line);
  border-radius: var(--e-r-xs);
  height: 10px;
}
/* Reflet en transform : animé par le GPU, sans repeindre à chaque image */
.e-skel::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #EEF2F6 50%, transparent);
  transform: translateX(-100%);
  animation: e-shimmer 1.2s ease-in-out infinite;
}
@keyframes e-shimmer{ to{ transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   13. RECHERCHE GLOBALE — ⌘K
   -------------------------------------------------------------------------- */
.e-palette{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(10,31,46,.34);
  backdrop-filter: blur(2px);
  display: grid; place-items: start center;
  padding-top: 12vh;
}
.e-palette__box{
  width: min(560px, calc(100vw - 32px));
  background: var(--e-surface);
  border-radius: var(--e-r-lg);
  box-shadow: var(--e-sh-2);
  overflow: hidden;
}
.e-palette__input{
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--e-line);
  color: var(--e-ink-3);
}
.e-palette__input input{ flex: 1; border: 0; outline: 0; font-size: .9375rem; background: transparent; }
.e-palette__list{ max-height: 340px; overflow-y: auto; padding: var(--e-2); }
.e-palette__section{ padding: var(--e-3) var(--e-3) var(--e-1); }
.e-palette__item{
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--e-r-sm);
  font-size: .8125rem; cursor: pointer;
}
.e-palette__item:hover, .e-palette__item.is-sel{ background: var(--e-blue-50); }
.e-palette__item i{ color: var(--e-ink-3); width: 16px; }
.e-palette__item .e-badge{ margin-left: auto; }

/* --------------------------------------------------------------------------
   14. CARTE
   -------------------------------------------------------------------------- */
.e-map{
  position: relative; height: 300px;
  background:
    radial-gradient(circle at 30% 40%, rgba(1,55,89,.05), transparent 55%),
    repeating-linear-gradient(0deg,  transparent 0 27px, rgba(10,31,46,.05) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(10,31,46,.05) 27px 28px),
    var(--e-surface-2);
}
.e-pin{
  position: absolute; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(10,31,46,.3);
  transition: transform var(--e-t);
}
.e-pin:hover{ transform: translate(-50%,-50%) scale(1.45); }
.e-pin--ok{ background: var(--e-ok); }
.e-pin--warn{ background: var(--e-warn); }
.e-pin--crit{ background: var(--e-crit); }
/* Halo en transform/opacity (GPU) plutôt qu'en box-shadow (repeint à chaque image) */
.e-pin--crit::after{
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: rgba(179,39,27,.45); pointer-events: none;
  animation: e-pulse 2s ease-out infinite;
}
.e-pin--off{ background: var(--e-off); }
@keyframes e-pulse{
  0%  { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(2.5); opacity: 0; }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE — repensé, pas réduit
   -------------------------------------------------------------------------- */
@media (max-width: 1120px){
  .e-grid--2{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .e-sidebar{ transform: translateX(-100%); box-shadow: var(--e-sh-2); }
  .e-shell.is-open .e-sidebar{ transform: none; }
  .e-main{ margin-left: 0; }
  .e-shell.is-collapsed .e-main{ margin-left: 0; }
  .e-page{ padding: var(--e-4); }
  .e-header{ padding: 0 var(--e-4); }
  .e-searchbtn{ min-width: 0; width: 32px; padding: 0; justify-content: center; }
  .e-searchbtn span, .e-kbd{ display: none; }
  .e-scrim{ position: fixed; inset: 0; background: rgba(10,31,46,.35); z-index: 50; }
}

/* Tables → cartes */
@media (max-width: 720px){
  .e-table thead{ display: none; }
  .e-table, .e-table tbody, .e-table tr, .e-table td{ display: block; width: 100%; }
  .e-table tbody tr{
    border: 1px solid var(--e-line);
    border-radius: var(--e-r);
    margin: var(--e-3) var(--e-4);
    padding: var(--e-2) 0;
  }
  .e-table tbody td{
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-4);
    border-bottom: 0; padding: 6px var(--e-4);
  }
  .e-table tbody td::before{
    content: attr(data-label);
    font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--e-ink-3);
    flex: 0 0 auto;
  }
  .e-table td[data-label="Équipement"]{
    display: block; padding-top: var(--e-2); padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--e-line); margin-bottom: var(--e-2);
  }
  .e-table td[data-label="Équipement"]::before{ display: none; }
  .e-table__act{ text-align: left; }
  .e-alert{ flex-wrap: wrap; }
  .e-alert__act{ width: 100%; padding-left: calc(3px + var(--e-4)); }
  .e-ribbon__legend{ gap: var(--e-2) var(--e-4); }
}


/* --------------------------------------------------------------------------
   16. UTILITAIRES
   -------------------------------------------------------------------------- */
.e-row{ display: flex; align-items: center; gap: var(--e-2); }
.e-row--between{ justify-content: space-between; }
.e-wrap{ flex-wrap: wrap; }
.e-mt-2{ margin-top: var(--e-2); }
.e-mt-4{ margin-top: var(--e-4); }
.e-mt-5{ margin-top: var(--e-5); }
.e-mb-4{ margin-bottom: var(--e-4); }
.e-mb-5{ margin-bottom: var(--e-5); }
.e-sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   17. EN-TÊTE DE PAGE DÉTAIL
   Réutilisé par : fiche équipement, collectivité, intervention, alerte,
   utilisateur, site, véhicule.
   ========================================================================== */
.e-crumb{
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: var(--e-ink-3);
  margin-bottom: var(--e-3);
}
.e-crumb a{ color: var(--e-ink-2); }
.e-crumb a:hover{ color: var(--e-blue); text-decoration: underline; }
.e-crumb i{ font-size: .625rem; opacity: .6; }

.e-pagehead{
  display: flex; align-items: flex-start; gap: var(--e-4);
  flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
.e-pagehead__id{ min-width: 0; flex: 1 1 320px; }
.e-pagehead__title{
  display: flex; align-items: center; gap: var(--e-3);
  flex-wrap: wrap;
}
.e-pagehead__title h1{ font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }
.e-pagehead__ref{
  font-family: var(--e-mono); font-size: .8125rem; font-weight: 500;
  color: var(--e-ink-3);
  background: var(--e-surface-2); border: 1px solid var(--e-line);
  padding: 1px 7px; border-radius: var(--e-r-xs);
}
.e-pagehead__meta{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4);
  margin-top: var(--e-3);
  font-size: .8125rem; color: var(--e-ink-2);
}
.e-pagehead__meta span{ display: inline-flex; align-items: center; gap: 5px; }
.e-pagehead__meta i{ color: var(--e-ink-3); }
.e-pagehead__act{ display: flex; align-items: center; gap: var(--e-2); flex: 0 0 auto; }

/* ==========================================================================
   18. RECOMMANDATION — Information → Interprétation → Action
   Le système ne montre pas une donnée, il propose une décision.
   ========================================================================== */
.e-reco{
  display: flex; align-items: flex-start; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--e-warn-line);
  background: var(--e-warn-bg);
  border-radius: var(--e-r-lg);
  margin-bottom: var(--e-5);
}
.e-reco--crit{ border-color: var(--e-crit-line); background: var(--e-crit-bg); }
.e-reco--ok{ border-color: var(--e-ok-line); background: var(--e-ok-bg); }
.e-reco__ico{
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.75); color: var(--e-warn);
  font-size: .875rem;
}
.e-reco--crit .e-reco__ico{ color: var(--e-crit); }
.e-reco--ok .e-reco__ico{ color: var(--e-ok); }
.e-reco__body{ flex: 1 1 auto; min-width: 0; }
.e-reco__title{ font-size: .9375rem; font-weight: 600; color: var(--e-ink); }
.e-reco__why{ font-size: .8125rem; color: var(--e-ink-2); margin-top: 3px; }
.e-reco__act{ display: flex; gap: var(--e-2); flex: 0 0 auto; align-items: center; }

/* ==========================================================================
   19. ONGLETS
   ========================================================================== */
.e-tabs{
  display: flex; gap: var(--e-1);
  border-bottom: 1px solid var(--e-line);
  margin-bottom: var(--e-5);
  overflow-x: auto;
}
.e-tab{
  border: 0; background: transparent; cursor: pointer;
  padding: var(--e-3) var(--e-3);
  font-size: .8125rem; font-weight: 500; color: var(--e-ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--e-t), border-color var(--e-t);
}
.e-tab:hover{ color: var(--e-ink); }
.e-tab.is-active{ color: var(--e-blue); border-bottom-color: var(--e-blue); font-weight: 600; }
.e-tab__count{
  font-family: var(--e-mono); font-size: .6875rem;
  background: var(--e-surface-2); border: 1px solid var(--e-line);
  color: var(--e-ink-3); padding: 0 5px; border-radius: 999px;
}

/* ==========================================================================
   20. MESURES — petites valeurs instrumentales
   Plus dense qu'un KPI : on en affiche 4 à 6 côte à côte.
   ========================================================================== */
.e-metrics{
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--e-line);
  border: 1px solid var(--e-line);
  border-radius: var(--e-r-lg);
  overflow: hidden;
}
.e-metric{ background: var(--e-surface); padding: var(--e-4) var(--e-5); }
.e-metric__label{
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--e-ink-3);
}
.e-metric__value{
  margin-top: var(--e-2);
  font-size: 1.0625rem; font-weight: 500; color: var(--e-ink);
  display: flex; align-items: center; gap: 7px;
}
.e-metric__value .e-num{ font-size: 1.0625rem; }
.e-metric__hint{ margin-top: 3px; font-size: .75rem; color: var(--e-ink-3); }

/* Batterie — jamais la couleur seule, le niveau est écrit */
.e-batt{
  width: 22px; height: 11px; flex: 0 0 22px;
  border: 1.5px solid var(--e-ink-3); border-radius: 3px;
  padding: 1.5px; position: relative;
}
.e-batt::after{
  content: ""; position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 5px; border-radius: 0 1px 1px 0;
  background: var(--e-ink-3);
}
.e-batt__fill{ height: 100%; border-radius: 1px; background: var(--e-ok); }
.e-batt__fill--warn{ background: var(--e-warn); }
.e-batt__fill--crit{ background: var(--e-crit); }

/* ==========================================================================
   21. DONNÉES TECHNIQUES — clé / valeur brute
   Séparées des informations métier (§15 du brief).
   ========================================================================== */
.e-specs{
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.e-spec{
  display: flex; align-items: baseline; gap: var(--e-4);
  padding: var(--e-3) 0;
  border-bottom: 1px solid var(--e-line);
  font-size: .8125rem;
}
.e-spec dt{ flex: 0 0 44%; color: var(--e-ink-2); }
.e-spec dd{
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--e-mono); font-size: .75rem;
  color: var(--e-ink); word-break: break-all;
}

/* ==========================================================================
   22. FILTRES — segmenté, select, chips actives
   ========================================================================== */
.e-seg{
  display: inline-flex; padding: 2px;
  background: var(--e-surface-2);
  border: 1px solid var(--e-line); border-radius: var(--e-r-sm);
}
.e-seg__btn{
  border: 0; background: transparent; cursor: pointer;
  height: 26px; padding: 0 var(--e-3);
  border-radius: var(--e-r-xs);
  font-size: .75rem; font-weight: 500; color: var(--e-ink-2);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  transition: background var(--e-t), color var(--e-t);
}
.e-seg__btn:hover{ color: var(--e-ink); }
.e-seg__btn.is-active{
  background: var(--e-surface); color: var(--e-ink);
  box-shadow: var(--e-sh-1); font-weight: 600;
}
.e-seg__btn .e-legend__key{ width: 7px; height: 7px; border-radius: 50%; }

.e-select{
  height: 32px; padding: 0 var(--e-6) 0 var(--e-3);
  border: 1px solid var(--e-line-2); border-radius: var(--e-r-sm);
  background: var(--e-surface); color: var(--e-ink);
  font-size: .8125rem; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236B8095' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e-3) center;
}
.e-select:hover{ border-color: var(--e-ink-3); }

.e-filters{
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4) var(--e-3);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--e-line);
}
.e-filters:empty{ display: none; }

/* ==========================================================================
   23. TRI + PAGINATION
   ========================================================================== */
.e-th-sort{
  border: 0; background: transparent; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
  text-transform: inherit; padding: 0;
  display: inline-flex; align-items: center; gap: 4px;
}
.e-th-sort:hover{ color: var(--e-ink); }
.e-th-sort i{ opacity: 0; font-size: .625rem; transition: opacity var(--e-t); }
.e-th-sort:hover i{ opacity: .45; }
.e-th-sort.is-sorted{ color: var(--e-blue); }
.e-th-sort.is-sorted i{ opacity: 1; }

.e-pager{
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--e-line);
  flex-wrap: wrap;
}
.e-pager__info{ font-size: .75rem; color: var(--e-ink-3); margin-right: auto; }
.e-pager__info b{ font-family: var(--e-mono); font-weight: 500; color: var(--e-ink-2); }
.e-pager__btn{
  min-width: 28px; height: 28px; padding: 0 var(--e-2);
  border: 1px solid var(--e-line); background: var(--e-surface);
  border-radius: var(--e-r-sm);
  font-family: var(--e-mono); font-size: .75rem; color: var(--e-ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--e-t), border-color var(--e-t);
}
.e-pager__btn:hover:not([disabled]){ background: var(--e-blue-50); border-color: var(--e-blue-100); color: var(--e-blue); }
.e-pager__btn.is-active{ background: var(--e-blue); border-color: var(--e-blue); color: #fff; }
.e-pager__btn[disabled]{ opacity: .4; cursor: not-allowed; }

/* ==========================================================================
   24. GRAPHIQUES — servent à lire une tendance, jamais à décorer
   ========================================================================== */
.e-chart{ width: 100%; height: auto; display: block; overflow: visible; }
.e-chart .grid{ stroke: var(--e-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.e-chart .thr{ stroke: var(--e-warn); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.e-chart .line{ fill: none; stroke: var(--e-blue); stroke-width: 1.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.e-chart .area{ fill: rgba(1,55,89,.07); }
.e-chart .drop{ stroke: var(--e-ok); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.e-chart .lbl{ font-family: var(--e-mono); font-size: 9px; fill: var(--e-ink-3); }
.e-chart .dot{ fill: var(--e-blue); }
.e-chart .dot--warn{ fill: var(--e-warn); }

.e-chart__legend{
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
  margin-top: var(--e-3);
  font-size: .75rem; color: var(--e-ink-3);
}
.e-chart__legend span{ display: inline-flex; align-items: center; gap: 6px; }
.e-chart__legend i{ width: 12px; height: 2px; border-radius: 1px; background: var(--e-blue); display: inline-block; }
.e-chart__legend i.thr{ background: var(--e-warn); }
.e-chart__legend i.drop{ background: var(--e-ok); }

/* Micro-tendance en cellule de table */
.e-spark{ width: 52px; height: 16px; flex: 0 0 52px; overflow: visible; }
.e-spark path{ fill: none; stroke: var(--e-ink-3); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.e-spark.is-warn path{ stroke: var(--e-warn); }

/* ==========================================================================
   25. RESPONSIVE — additions
   ========================================================================== */
@media (max-width: 900px){
  .e-pagehead__act{ width: 100%; }
  .e-pagehead__act .e-btn{ flex: 1 1 auto; }
  .e-reco{ flex-wrap: wrap; }
  .e-reco__act{ width: 100%; padding-left: calc(28px + var(--e-4)); }
  .e-reco__act .e-btn{ flex: 1 1 auto; }
}

@media (max-width: 720px){
  .e-spec dt{ flex-basis: 50%; }
  .e-toolbar{ flex-direction: column; align-items: stretch; }
  .e-toolbar .e-field{ width: 100%; }
  .e-toolbar .e-field input{ width: 100%; }
  .e-toolbar > .e-btn{ margin-left: 0 !important; }
  .e-seg{ overflow-x: auto; }
  .e-pager__info{ width: 100%; margin-bottom: var(--e-2); }
}

/* ==========================================================================
   26. FORMULAIRES
   ========================================================================== */
.e-form{ display: grid; gap: var(--e-6); }
.e-formsec{
  display: grid; gap: var(--e-4);
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  padding-bottom: var(--e-6);
  border-bottom: 1px solid var(--e-line);
}
.e-formsec:last-of-type{ border-bottom: 0; padding-bottom: 0; }
.e-formsec__aside h3{ font-size: .875rem; font-weight: 600; }
.e-formsec__aside p{ font-size: .8125rem; color: var(--e-ink-2); margin-top: var(--e-2); }
.e-formsec__fields{ display: grid; gap: var(--e-4); align-content: start; }

.e-fields-2{ display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.e-label{
  display: block;
  font-size: .8125rem; font-weight: 500; color: var(--e-ink);
  margin-bottom: 6px;
}
.e-label .e-req{ color: var(--e-crit); margin-left: 2px; }
.e-label .e-opt{ color: var(--e-ink-3); font-weight: 400; margin-left: 4px; }

.e-input, .e-textarea{
  width: 100%;
  min-height: 34px; padding: 7px var(--e-3);
  border: 1px solid var(--e-line-2); border-radius: var(--e-r-sm);
  background: var(--e-surface); color: var(--e-ink);
  font-size: .8125rem;
  transition: border-color var(--e-t), box-shadow var(--e-t);
}
.e-textarea{ min-height: 84px; resize: vertical; }
.e-input::placeholder, .e-textarea::placeholder{ color: var(--e-ink-3); }
.e-input:hover, .e-textarea:hover{ border-color: var(--e-ink-3); }
.e-input:focus, .e-textarea:focus{
  outline: 0; border-color: var(--e-blue);
  box-shadow: 0 0 0 3px var(--e-blue-50);
}
.e-input[aria-invalid="true"]{ border-color: var(--e-crit); }
.e-input[aria-invalid="true"]:focus{ box-shadow: 0 0 0 3px var(--e-crit-bg); }
.e-input[readonly]{ background: var(--e-surface-2); color: var(--e-ink-2); }

.e-help{ font-size: .75rem; color: var(--e-ink-3); margin-top: 5px; }
.e-err{
  font-size: .75rem; color: var(--e-crit); margin-top: 5px;
  display: flex; align-items: center; gap: 5px;
}

.e-inputgroup{ display: flex; align-items: stretch; }
.e-inputgroup .e-input{ border-radius: var(--e-r-sm) 0 0 var(--e-r-sm); }
.e-inputgroup__suffix{
  display: grid; place-items: center;
  padding: 0 var(--e-3);
  border: 1px solid var(--e-line-2); border-left: 0;
  border-radius: 0 var(--e-r-sm) var(--e-r-sm) 0;
  background: var(--e-surface-2);
  font-family: var(--e-mono); font-size: .75rem; color: var(--e-ink-3);
}

/* Interrupteur */
.e-switch{ display: flex; align-items: flex-start; gap: var(--e-3); cursor: pointer; }
.e-switch input{ position: absolute; opacity: 0; width: 0; height: 0; }
.e-switch__track{
  width: 34px; height: 20px; flex: 0 0 34px;
  border-radius: 999px; background: var(--e-line-2);
  position: relative; transition: background var(--e-t);
  margin-top: 1px;
}
.e-switch__track::after{
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--e-sh-1);
  transition: transform var(--e-t);
}
.e-switch input:checked + .e-switch__track{ background: var(--e-blue); }
.e-switch input:checked + .e-switch__track::after{ transform: translateX(14px); }
.e-switch input:focus-visible + .e-switch__track{ outline: 2px solid var(--e-blue); outline-offset: 2px; }
.e-switch__txt{ font-size: .8125rem; }
.e-switch__txt b{ display: block; font-weight: 500; }
.e-switch__txt span{ color: var(--e-ink-3); font-size: .75rem; }

/* Choix en carte */
.e-choices{ display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.e-choice{
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--e-line-2); border-radius: var(--e-r);
  cursor: pointer; background: var(--e-surface);
  transition: border-color var(--e-t), background var(--e-t);
}
.e-choice:hover{ border-color: var(--e-ink-3); }
.e-choice input{ margin-top: 2px; accent-color: var(--e-blue); }
.e-choice:has(input:checked){ border-color: var(--e-blue); background: var(--e-blue-50); }
.e-choice__txt b{ display: block; font-size: .8125rem; font-weight: 500; }
.e-choice__txt span{ font-size: .75rem; color: var(--e-ink-2); }

/* Barre d'actions collante */
.e-formfoot{
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-5);
  margin: var(--e-6) calc(var(--e-5) * -1) calc(var(--e-5) * -1);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--e-line);
}
.e-formfoot__note{ font-size: .75rem; color: var(--e-ink-3); margin-right: auto; }

/* Zone destructive */
.e-danger{
  border: 1px solid var(--e-crit-line);
  border-radius: var(--e-r-lg);
  background: var(--e-surface);
  overflow: hidden;
}
.e-danger__head{
  padding: var(--e-3) var(--e-5);
  background: var(--e-crit-bg);
  border-bottom: 1px solid var(--e-crit-line);
  font-size: .875rem; font-weight: 600; color: var(--e-crit);
}
.e-danger__row{
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--e-line);
}
.e-danger__row:last-child{ border-bottom: 0; }
.e-danger__row div{ flex: 1 1 auto; }
.e-danger__row b{ display: block; font-size: .8125rem; font-weight: 500; }
.e-danger__row span{ font-size: .75rem; color: var(--e-ink-2); }

/* ==========================================================================
   27. AUTHENTIFICATION
   ========================================================================== */
.e-auth{
  min-height: 100vh;
  display: grid; grid-template-columns: 1fr minmax(0, 460px);
}
.e-auth__side{
  background: var(--e-blue);
  color: #fff;
  padding: var(--e-12) var(--e-10);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.e-auth__side::after{
  content: ""; position: absolute; inset: auto -120px -160px auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(255,255,255,.04);
}
.e-auth__brand{ display: flex; align-items: center; gap: var(--e-3); position: relative; }
.e-auth__brand span{ font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.e-auth__claim{ position: relative; max-width: 420px; }
.e-auth__claim h2{
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.25;
}
.e-auth__claim p{ margin-top: var(--e-4); color: rgba(255,255,255,.68); font-size: .875rem; }
.e-auth__stats{
  display: flex; gap: var(--e-8); position: relative;
  padding-top: var(--e-6); border-top: 1px solid rgba(255,255,255,.14);
}
.e-auth__stat b{
  display: block; font-family: var(--e-mono);
  font-size: 1.375rem; font-weight: 500; letter-spacing: -.03em;
}
.e-auth__stat span{ font-size: .75rem; color: rgba(255,255,255,.6); }

.e-auth__panel{
  background: var(--e-surface);
  display: grid; place-items: center;
  padding: var(--e-8) var(--e-6);
}
.e-auth__form{ width: 100%; max-width: 340px; }
.e-auth__form h1{ font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.e-auth__form > p{ font-size: .8125rem; color: var(--e-ink-2); margin-top: var(--e-2); margin-bottom: var(--e-6); }
.e-auth__foot{ margin-top: var(--e-6); font-size: .75rem; color: var(--e-ink-3); text-align: center; }

@media (max-width: 900px){
  .e-auth{ grid-template-columns: 1fr; }
  .e-auth__side{ display: none; }
}

/* ==========================================================================
   28. GRAPHIQUES — barres, donut, progression
   ========================================================================== */
.e-bars{ display: flex; align-items: flex-end; gap: 6px; height: 128px; }
.e-bar{ flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.e-bar__col{
  border-radius: 3px 3px 0 0;
  background: var(--e-blue); opacity: .82;
  transition: opacity var(--e-t);
  min-height: 2px;
}
.e-bar:hover .e-bar__col{ opacity: 1; }
.e-bar__col--alt{ background: var(--e-ok); }
.e-bar__lbl{
  font-family: var(--e-mono); font-size: .625rem; color: var(--e-ink-3);
  text-align: center; white-space: nowrap;
}
.e-bar.is-now .e-bar__col{ background: var(--e-amber); opacity: 1; }
.e-bar.is-now .e-bar__lbl{ color: var(--e-ink); font-weight: 600; }

.e-donut{ display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; }
.e-donut svg{ flex: 0 0 128px; transform: rotate(-90deg); }
.e-donut__legend{ flex: 1 1 180px; display: grid; gap: var(--e-2); }
.e-donut__row{ display: flex; align-items: center; gap: var(--e-3); font-size: .8125rem; }
.e-donut__key{ width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.e-donut__row b{ margin-left: auto; font-family: var(--e-mono); font-weight: 500; }
.e-donut__row span{ color: var(--e-ink-3); font-family: var(--e-mono); font-size: .75rem; min-width: 40px; text-align: right; }

.e-progress{ display: grid; gap: var(--e-3); }
.e-progress__row{ display: grid; gap: 6px; }
.e-progress__top{ display: flex; align-items: baseline; gap: var(--e-3); font-size: .8125rem; }
.e-progress__top b{ margin-left: auto; font-family: var(--e-mono); font-weight: 500; }
.e-progress__track{ height: 6px; border-radius: 999px; background: var(--e-line); overflow: hidden; }
.e-progress__fill{ height: 100%; border-radius: 999px; background: var(--e-blue); }

/* ==========================================================================
   29. PERMISSIONS
   ========================================================================== */
.e-matrix{ font-size: .8125rem; }
.e-matrix th, .e-matrix td{
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--e-line);
  text-align: center;
}
.e-matrix thead th{
  background: var(--e-surface-2);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--e-ink-3);
  white-space: nowrap;
}
.e-matrix tbody th{ text-align: left; font-weight: 500; }
.e-matrix tbody tr:last-child th, .e-matrix tbody tr:last-child td{ border-bottom: 0; }
.e-perm{ display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--e-r-xs); }
.e-perm--yes{ background: var(--e-ok-bg); color: var(--e-ok); }
.e-perm--no{ background: var(--e-off-bg); color: var(--e-off); }
.e-perm--part{ background: var(--e-warn-bg); color: var(--e-warn); }

/* ==========================================================================
   30. NOTES & AFFECTATION
   ========================================================================== */
.e-note{
  display: flex; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--e-line);
}
.e-note:last-child{ border-bottom: 0; }
.e-note__who{
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
  background: var(--e-blue-50); color: var(--e-blue);
  display: grid; place-items: center;
  font-size: .625rem; font-weight: 600;
}
.e-note__body{ flex: 1 1 auto; min-width: 0; }
.e-note__head{ display: flex; align-items: baseline; gap: var(--e-2); font-size: .8125rem; }
.e-note__head b{ font-weight: 600; }
.e-note__head time{ margin-left: auto; font-family: var(--e-mono); font-size: .6875rem; color: var(--e-ink-3); }
.e-note__txt{ font-size: .8125rem; color: var(--e-ink-2); margin-top: 3px; }

.e-who{ display: inline-flex; align-items: center; gap: var(--e-2); font-size: .8125rem; }
.e-who__av{
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
  background: var(--e-blue-50); color: var(--e-blue);
  display: grid; place-items: center; font-size: .5625rem; font-weight: 600;
}
.e-who--none .e-who__av{ background: var(--e-off-bg); color: var(--e-off); }

/* ==========================================================================
   31. LISTES SIMPLES
   ========================================================================== */
.e-list{ display: grid; }
.e-list__item{
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--e-line);
  transition: background var(--e-t);
}
.e-list__item:last-child{ border-bottom: 0; }
.e-list__item:hover{ background: var(--e-surface-2); }
.e-list__main{ flex: 1 1 auto; min-width: 0; }
.e-list__title{ font-size: .875rem; font-weight: 500; }
.e-list__sub{ font-size: .75rem; color: var(--e-ink-3); margin-top: 2px; }
.e-list__end{ flex: 0 0 auto; display: flex; align-items: center; gap: var(--e-3); }

/* Notification non lue */
.e-list__item--unread{ background: var(--e-blue-50); }
.e-list__item--unread:hover{ background: var(--e-blue-100); }
.e-list__item--unread .e-list__title::before{
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--e-blue); margin-right: 7px; vertical-align: 1px;
}

/* ==========================================================================
   32. MISE EN PAGE DÉTAIL — corps + colonne latérale
   ========================================================================== */
.e-split{ display: grid; gap: var(--e-4); grid-template-columns: minmax(0,1fr) minmax(0,320px); align-items: start; }
@media (max-width: 1120px){ .e-split{ grid-template-columns: 1fr; } }

/* ==========================================================================
   33. CALENDRIER
   ========================================================================== */
.e-cal{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--e-line); border: 1px solid var(--e-line); border-radius: var(--e-r); overflow: hidden; }
.e-cal__dow{
  background: var(--e-surface-2); padding: var(--e-2);
  font-size: .625rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--e-ink-3); text-align: center;
}
.e-cal__day{ background: var(--e-surface); min-height: 76px; padding: var(--e-2); }
.e-cal__day--out{ background: var(--e-surface-2); }
.e-cal__num{ font-family: var(--e-mono); font-size: .6875rem; color: var(--e-ink-3); }
.e-cal__day--today .e-cal__num{
  background: var(--e-blue); color: #fff;
  border-radius: 50%; width: 18px; height: 18px;
  display: inline-grid; place-items: center;
}
.e-cal__ev{
  display: block; margin-top: 3px; padding: 2px 5px;
  border-radius: var(--e-r-xs);
  font-size: .625rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--e-blue-50); color: var(--e-blue);
  border-left: 2px solid var(--e-blue);
}
.e-cal__ev--warn{ background: var(--e-warn-bg); color: var(--e-warn); border-left-color: var(--e-warn); }
.e-cal__ev--crit{ background: var(--e-crit-bg); color: var(--e-crit); border-left-color: var(--e-crit); }

/* ==========================================================================
   34. TOAST
   ========================================================================== */
.e-toasts{
  position: fixed; right: var(--e-5); bottom: var(--e-5); z-index: 120;
  display: grid; gap: var(--e-2); max-width: calc(100vw - 40px);
}
.e-toast{
  display: flex; align-items: flex-start; gap: var(--e-3);
  min-width: 260px; max-width: 380px;
  padding: var(--e-3) var(--e-4);
  background: var(--e-ink); color: #fff;
  border-radius: var(--e-r); box-shadow: var(--e-sh-2);
  font-size: .8125rem;
  animation: e-rise .18s cubic-bezier(.2,.6,.3,1);
}
@keyframes e-rise{ from{ opacity: 0; transform: translateY(6px); } }
.e-toast i{ margin-top: 2px; }
.e-toast--ok i{ color: #5FD3A3; }
.e-toast--crit i{ color: #F2938A; }
.e-toast button{ margin-left: auto; border: 0; background: none; color: rgba(255,255,255,.6); cursor: pointer; }
.e-toast button:hover{ color: #fff; }

/* ==========================================================================
   35. RESPONSIVE — additions
   ========================================================================== */
@media (max-width: 900px){
  .e-formsec{ grid-template-columns: 1fr; gap: var(--e-3); }
  .e-formfoot{ margin-inline: calc(var(--e-4) * -1); padding-inline: var(--e-4); flex-wrap: wrap; }
  .e-formfoot__note{ width: 100%; margin-bottom: var(--e-2); }
  .e-formfoot .e-btn{ flex: 1 1 auto; }
  .e-cal{ font-size: .75rem; }
  .e-cal__day{ min-height: 56px; }
  .e-toasts{ left: var(--e-4); right: var(--e-4); bottom: var(--e-4); }
  .e-toast{ min-width: 0; max-width: none; }
}
@media (max-width: 720px){
  .e-matrix thead th:not(:first-child){ font-size: .5625rem; padding-inline: var(--e-2); }
  .e-matrix th, .e-matrix td{ padding-inline: var(--e-2); }
  .e-donut svg{ margin-inline: auto; }
}

/* ==========================================================================
   36. COUCHE DE COMPATIBILITÉ — pages du module Recyclage
   --------------------------------------------------------------------------
   Les 15 pages reprises du portail 4Recyclage utilisent leur propre
   vocabulaire de classes (.hero, .cardx, .btn-pill…). Plutôt que de réécrire
   leur structure — et de risquer d'y casser du JavaScript ou de la logique
   Jinja — on redéfinit ici ces classes avec les jetons du design system.

   Résultat : ces pages adoptent l'apparence du portail sans qu'une seule
   ligne de leur logique soit touchée. Elles pourront être réécrites une à
   une ensuite, et cette section rétrécira d'autant.

   Les règles propres à une page (vue 3D des casiers, grilles de tableau
   kanban, cartes…) restent dans leur template : elles ne sont pas
   dupliquées et n'ont pas d'équivalent ici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   36.1 Remappage des jetons
   Les règles page par page conservées dans les templates utilisent ces
   variables. En les redéfinissant ici, tout ce qui s'y réfère devient sobre
   automatiquement — y compris ce que cette couche ne couvre pas.
   -------------------------------------------------------------------------- */
:root{
  --r-brand:    var(--e-blue);
  --r-brand-2:  var(--e-blue-700);
  --r-brand-3:  var(--e-blue-900);
  --r-green:    var(--e-ok);
  --r-green-2:  var(--e-ok);
  --r-green-3:  var(--e-ok);
  --r-accent:   var(--e-amber);
  --r-bg:       var(--e-paper);
  --r-bg-2:     var(--e-surface-2);
  --r-card:     var(--e-surface);
  --r-text:     var(--e-ink);
  --r-text-2:   var(--e-ink-2);
  --r-text-3:   var(--e-ink-3);
  --r-muted:    var(--e-ink-3);
  --r-border:   var(--e-line);
  --r-ring:     var(--e-blue-50);

  /* Les ombres portées et les grands rayons sont la principale signature
     « site vitrine » de ces pages. On les neutralise à la source. */
  --r-shadow:    var(--e-sh-1);
  --r-shadow-sm: var(--e-sh-1);
  --r-shadow-lg: var(--e-sh-2);
  --r-radius:    var(--e-r-lg);
}

/* La police propriétaire est remplacée partout où elle était imposée. */
[style*="Outfit"], .hello, .hero-title, .cardx-title, .form-title,
.section-title, .btn-pill, .form-label, .kpi, .pill, .status-pill{
  font-family: var(--e-font) !important;
}

/* --------------------------------------------------------------------------
   36.2 En-tête de page — le bandeau dégradé devient un en-tête sobre
   -------------------------------------------------------------------------- */
.container-xxl{ max-width: var(--e-max) !important; padding: 0 !important; }

.hero{
  background: transparent !important;
  color: var(--e-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--e-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 var(--e-5) !important;
  margin-bottom: var(--e-5) !important;
  overflow: visible !important;
}
.hero::before, .hero::after{ display: none !important; }

.hero-inner{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}

.hello, .hero-title{
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--e-ink) !important;
  display: flex; align-items: center; gap: var(--e-3);
}
.hello i, .hero-title i{
  color: var(--e-blue) !important;
  font-size: 1.125rem !important;
}
.hero-sub{
  margin-top: var(--e-2) !important;
  color: var(--e-ink-2) !important;
  font-size: .8125rem !important;
  font-weight: 400 !important;
}
.hero-meta{
  display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4);
  margin-top: var(--e-3);
  font-size: .8125rem; color: var(--e-ink-2);
}

/* Champs et boutons posés dans l'en-tête : ils étaient clairs sur fond foncé */
.hero .form-control, .hero .form-select{
  background: var(--e-surface) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-line-2) !important;
}
.hero .form-control::placeholder{ color: var(--e-ink-3) !important; }
.hero .btn-outline-light, .btn-outline-light{
  background: var(--e-surface) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-line-2) !important;
}
.hero .btn-outline-light:hover, .btn-outline-light:hover{
  background: var(--e-surface-2) !important;
  border-color: var(--e-ink-3) !important;
  color: var(--e-ink) !important;
}

/* --------------------------------------------------------------------------
   36.3 Cartes
   -------------------------------------------------------------------------- */
.cardx, .pcard, .doc-card, .kpi-card, .mini-card, .step-panel{
  background: var(--e-surface) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: var(--e-r-lg) !important;
  box-shadow: none !important;
}
.cardx-head{
  padding: var(--e-4) var(--e-5) !important;
  border-bottom: 1px solid var(--e-line) !important;
  background: transparent !important;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  flex-wrap: wrap;
}
.cardx-title, .form-title, .section-title, .modal-title{
  font-size: .9375rem !important;
  font-weight: 600 !important;
  color: var(--e-ink) !important;
  display: flex; align-items: center; gap: var(--e-3);
  margin: 0 !important;
}
.cardx-title > i, .ico-badge, .tab-icon, .doc-icon, .kpi-ico{
  width: 28px !important; height: 28px !important;
  background: var(--e-blue-50) !important;
  color: var(--e-blue) !important;
  border-radius: var(--e-r-sm) !important;
  align-items: center; justify-content: center;
  font-size: .875rem !important;
  flex: 0 0 28px;
}
.cardx-body{ padding: var(--e-5) !important; }

/* --------------------------------------------------------------------------
   36.4 Indicateurs
   -------------------------------------------------------------------------- */
.kpi, .kpi-item{
  background: var(--e-surface) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: var(--e-r-lg) !important;
  box-shadow: none !important;
  padding: var(--e-4) var(--e-5) !important;
}
.kpi-badge, .results-pill, .info-pill, .badge-state, .badge-bareme{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  background: var(--e-blue-50) !important;
  color: var(--e-blue) !important;
  border: 1px solid var(--e-blue-100) !important;
}

/* --------------------------------------------------------------------------
   36.5 Boutons — un seul système, quatre rôles
   -------------------------------------------------------------------------- */
.btn-pill, .btn-save, .btn-cta, .btn-soft, .btn-action, .btn-icon,
.btn-send, .btn-cancel, .btn-outline-secondary, .btn-outline-primary,
.btn-ghost, .filter-btn, .pc-btn{
  border-radius: var(--e-r-sm) !important;
  font-family: var(--e-font) !important;
  font-weight: 500 !important;
  font-size: .8125rem !important;
  padding: 0 var(--e-3) !important;
  height: 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background var(--e-t), border-color var(--e-t), color var(--e-t) !important;
}
.btn-pill:hover, .btn-save:hover, .btn-cta:hover, .btn-soft:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* Action principale : bleu de marque, jamais le vert de statut */
.btn-save, .btn-cta, .btn-send, .btn-soft-primary{
  background: var(--e-blue) !important;
  color: #fff !important;
  border-color: var(--e-blue) !important;
}
.btn-save:hover, .btn-cta:hover, .btn-send:hover, .btn-soft-primary:hover{
  background: var(--e-blue-700) !important; color: #fff !important;
}

/* Action secondaire */
.btn-outline-secondary, .btn-outline-primary, .btn-soft, .btn-cancel,
.filter-btn, .pc-btn, .btn-action{
  background: var(--e-surface) !important;
  color: var(--e-ink) !important;
  border-color: var(--e-line-2) !important;
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-soft:hover,
.btn-cancel:hover, .filter-btn:hover, .pc-btn:hover, .btn-action:hover{
  background: var(--e-surface-2) !important;
  border-color: var(--e-ink-3) !important;
  color: var(--e-ink) !important;
}
.filter-btn.active, .filter-btn.is-active{
  background: var(--e-blue-50) !important;
  border-color: var(--e-blue-100) !important;
  color: var(--e-blue) !important;
  font-weight: 600 !important;
}

/* Action tertiaire */
.btn-ghost, .btn-icon{
  background: transparent !important;
  color: var(--e-ink-2) !important;
  border-color: transparent !important;
}
.btn-ghost:hover, .btn-icon:hover{
  background: var(--e-blue-50) !important; color: var(--e-blue) !important;
}

/* Action destructive */
.btn-soft-danger, .btn-maint{
  background: var(--e-crit-bg) !important;
  color: var(--e-crit) !important;
  border-color: var(--e-crit-line) !important;
}
.btn-soft-success{
  background: var(--e-ok-bg) !important;
  color: var(--e-ok) !important;
  border-color: var(--e-ok-line) !important;
}
.btn-soft-warning{
  background: var(--e-warn-bg) !important;
  color: var(--e-warn) !important;
  border-color: var(--e-warn-line) !important;
}

/* --------------------------------------------------------------------------
   36.6 Formulaires
   -------------------------------------------------------------------------- */
.form-label{
  font-size: .8125rem !important;
  font-weight: 500 !important;
  color: var(--e-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 6px !important;
}
.form-control, .form-select, textarea.form-control{
  border-radius: var(--e-r-sm) !important;
  border: 1px solid var(--e-line-2) !important;
  padding: 7px var(--e-3) !important;
  font-size: .8125rem !important;
  color: var(--e-ink) !important;
  background-color: var(--e-surface) !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus{
  border-color: var(--e-blue) !important;
  box-shadow: 0 0 0 3px var(--e-blue-50) !important;
}
.form-control:disabled, .form-select:disabled{
  background-color: var(--e-surface-2) !important;
  color: var(--e-ink-2) !important;
}
.search, .search-bar, .mini-search, .toolbar{
  border-radius: var(--e-r-sm) !important;
  border-color: var(--e-line) !important;
  box-shadow: none !important;
  background: var(--e-surface) !important;
}
.hint, .inline-error{
  font-family: var(--e-font) !important;
  font-size: .75rem !important;
  font-weight: 400 !important;
}
.hint{ color: var(--e-ink-3) !important; }
.hint i{ color: var(--e-ink-3) !important; }
.inline-error{ color: var(--e-crit) !important; }

/* --------------------------------------------------------------------------
   36.7 Tables
   -------------------------------------------------------------------------- */
.table{ font-size: .8125rem !important; }
.table thead th{
  background: var(--e-surface-2) !important;
  border-bottom: 1px solid var(--e-line) !important;
  font-family: var(--e-font) !important;
  font-size: .6875rem !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--e-ink-3) !important;
  padding: var(--e-3) var(--e-4) !important;
}
.table td{
  border-color: var(--e-line) !important;
  padding: var(--e-3) var(--e-4) !important;
  vertical-align: middle;
}
.table tbody tr:hover{ background: var(--e-blue-50) !important; }

/* --------------------------------------------------------------------------
   36.8 Statuts, pastilles, étapes
   -------------------------------------------------------------------------- */
.pill, .status-pill, .step-pill, .rel-badge, .interloc-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-family: var(--e-font) !important;
  font-size: .75rem !important;
  font-weight: 500 !important;
  border: 1px solid var(--e-line) !important;
  background: var(--e-surface-2) !important;
  color: var(--e-ink-2) !important;
}
.st-ok,   .status-signe,   .pill-signe{
  background: var(--e-ok-bg) !important; color: var(--e-ok) !important;
  border-color: var(--e-ok-line) !important;
}
.st-wait, .status-envoye,  .pill-envoye{
  background: var(--e-warn-bg) !important; color: var(--e-warn) !important;
  border-color: var(--e-warn-line) !important;
}
.st-no{
  background: var(--e-crit-bg) !important; color: var(--e-crit) !important;
  border-color: var(--e-crit-line) !important;
}
.dot{ box-shadow: none !important; }

.progress-bar{
  background: var(--e-blue) !important;
  border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   36.9 États vides, messages, modales
   -------------------------------------------------------------------------- */
.empty-state, .empty-row{
  padding: var(--e-12) var(--e-6) !important;
  text-align: center;
  color: var(--e-ink-2) !important;
  font-family: var(--e-font) !important;
  font-weight: 400 !important;
}
.empty-state-icon{
  width: 40px !important; height: 40px !important;
  border-radius: var(--e-r) !important;
  background: var(--e-blue-50) !important;
  color: var(--e-blue) !important;
  display: grid; place-items: center;
  margin: 0 auto var(--e-4) !important;
  font-size: 1.125rem !important;
}
.alert-danger, .alert-info-soft{
  border-radius: var(--e-r) !important;
  font-family: var(--e-font) !important;
  font-weight: 400 !important;
  font-size: .8125rem !important;
  padding: var(--e-3) var(--e-4) !important;
}
.alert-danger{
  background: var(--e-crit-bg) !important;
  border: 1px solid var(--e-crit-line) !important;
  color: var(--e-crit) !important;
}
.alert-info-soft{
  background: var(--e-blue-50) !important;
  border: 1px solid var(--e-blue-100) !important;
  color: var(--e-blue) !important;
}
.modal-header, .modal-footer{
  border-color: var(--e-line) !important;
  background: transparent !important;
  padding: var(--e-4) var(--e-5) !important;
}
.modal-body{ padding: var(--e-5) !important; }
.modal-content{
  border-radius: var(--e-r-lg) !important;
  border: 1px solid var(--e-line) !important;
}
.toast-feedback{
  border-radius: var(--e-r) !important;
  background: var(--e-ink) !important;
  color: #fff !important;
  font-family: var(--e-font) !important;
  font-size: .8125rem !important;
  box-shadow: var(--e-sh-2) !important;
}

/* --------------------------------------------------------------------------
   36.10 Navigation interne aux pages
   -------------------------------------------------------------------------- */
.main-tab, .t-item, .type-item, .view-toggle, .recipient-type-card{
  border-radius: var(--e-r-sm) !important;
  font-family: var(--e-font) !important;
  font-weight: 500 !important;
  font-size: .8125rem !important;
  border-color: var(--e-line) !important;
  box-shadow: none !important;
}
.main-tab.active, .t-item.active, .type-item.active,
.view-toggle .active, .recipient-type-card.selected{
  background: var(--e-blue-50) !important;
  border-color: var(--e-blue-100) !important;
  color: var(--e-blue) !important;
  font-weight: 600 !important;
}
.pagination .page-link{
  border-radius: var(--e-r-sm) !important;
  border-color: var(--e-line) !important;
  color: var(--e-ink-2) !important;
  font-family: var(--e-mono) !important;
  font-size: .75rem !important;
  box-shadow: none !important;
}
.pagination .active .page-link{
  background: var(--e-blue) !important;
  border-color: var(--e-blue) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   36.11 Divers
   -------------------------------------------------------------------------- */
.drop-zone{
  border: 1.5px dashed var(--e-line-2) !important;
  border-radius: var(--e-r) !important;
  background: var(--e-surface-2) !important;
}
.drop-zone.dragover, .drop-zone:hover{
  border-color: var(--e-blue) !important;
  background: var(--e-blue-50) !important;
}
.kv{ font-size: .8125rem !important; }
.footer-actions{
  border-top: 1px solid var(--e-line) !important;
  padding-top: var(--e-4) !important;
  gap: var(--e-2);
}
.fstep, .direction-line, .relances-track{ border-color: var(--e-line) !important; }
.board, .kcards, .kcol{ gap: var(--e-3) !important; }
.kcol{
  background: var(--e-surface-2) !important;
  border: 1px solid var(--e-line) !important;
  border-radius: var(--e-r) !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   36.12 Reprise de priorité
   Certaines pages déclarent leurs couleurs en !important. À importance égale,
   c'est la spécificité qui tranche, puis l'ordre : leur <style> étant plus bas
   dans le document, il l'emportait. Le préfixe `body` rétablit la priorité.

   Uniquement des propriétés d'apparence : aucune règle de mise en page ni
   d'affichage n'est reprise ici, pour ne pas écraser les comportements des
   pages (étapes d'assistant, messages conditionnels, panneaux repliés).
   -------------------------------------------------------------------------- */
body .btn-outline-secondary,
body .btn-outline-primary{
  border: 1px solid var(--e-line-2) !important;
  border-color: var(--e-line-2) !important;
  border-radius: var(--e-r-sm) !important;
  background: var(--e-surface) !important;
  color: var(--e-ink) !important;
}
body .btn-outline-secondary:hover,
body .btn-outline-primary:hover{
  background: var(--e-surface-2) !important;
  border-color: var(--e-ink-3) !important;
  color: var(--e-ink) !important;
}

body .table thead th{
  background: var(--e-surface-2) !important;
  border-bottom: 1px solid var(--e-line) !important;
  color: var(--e-ink-3) !important;
}
body .table td{ border-color: var(--e-line) !important; }

body .progress-bar{ background: var(--e-blue) !important; }

body .pagination .page-link{
  background: var(--e-surface) !important;
  color: var(--e-ink-2) !important;
  border-color: var(--e-line) !important;
}
body .pagination .active .page-link{
  background: var(--e-blue) !important;
  color: #fff !important;
  border-color: var(--e-blue) !important;
}

body .form-select,
body .form-control,
body .search,
body .mini-search,
body .input-points,
body .input-note,
body .select-mode{
  border: 1px solid var(--e-line-2) !important;
  border-radius: var(--e-r-sm) !important;
  font-family: var(--e-font) !important;
  font-size: .8125rem !important;
  font-weight: 400 !important;
  color: var(--e-ink) !important;
  background-color: var(--e-surface) !important;
}
body .form-select:focus,
body .form-control:focus,
body .input-points:focus,
body .input-note:focus,
body .select-mode:focus{
  border-color: var(--e-blue) !important;
  box-shadow: 0 0 0 3px var(--e-blue-50) !important;
}

body .empty-row{ color: var(--e-ink-2) !important; font-weight: 400 !important; }

/* --------------------------------------------------------------------------
   36.13 Contenu des bandeaux
   Ces pages posaient leur titre, leurs boutons et leurs pastilles sur un
   bandeau bleu foncé : tout y était écrit en blanc, ou sur du blanc
   translucide. Le bandeau étant devenu clair, ces éléments disparaissaient —
   texte blanc sur blanc, pastilles fantômes.

   On repeint donc explicitement tout ce qui vit dans .hero. Le préfixe `body`
   assure la priorité sur les 158 règles concernées des templates.
   -------------------------------------------------------------------------- */

/* Décor : anneaux, points et halos n'ont plus de raison d'être */
body .hero::before, body .hero::after,
body .hero-deco, body .hero .deco-ring, body .hero .deco-dot,
body .hero .hero-blob, body .hero .hero-glow{
  display: none !important;
}

/* Titres */
body .hero .hello, body .hero .hero-title,
body .hero h1, body .hero h2, body .hero h3{
  color: var(--e-ink) !important;
}
body .hero .hello i, body .hero .hero-title i{
  color: var(--e-blue) !important;
}

/* Textes secondaires */
body .hero .hero-sub, body .hero .sub, body .hero p,
body .hero small, body .hero .text-muted{
  color: var(--e-ink-2) !important;
}
body .hero strong, body .hero b{ color: var(--e-ink) !important; }

/* Pastilles posées sur le bandeau */
body .hero .hero-meta, body .hero .results-pill, body .hero .pill,
body .hero .badge-state, body .hero .kpi-badge, body .hero .info-pill{
  background: var(--e-blue-50) !important;
  color: var(--e-blue) !important;
  border: 1px solid var(--e-blue-100) !important;
}
body .hero .hero-meta i, body .hero .results-pill i,
body .hero .badge-state i{ color: var(--e-blue) !important; }

/* Variante « national » : c'est une information, pas une alerte */
body .hero .hero-meta.national{
  background: var(--e-ok-bg) !important;
  color: var(--e-ok) !important;
  border-color: var(--e-ok-line) !important;
}
body .hero .hero-meta.national i{ color: var(--e-ok) !important; }

/* Champs de recherche intégrés au bandeau */
body .hero .form-control, body .hero .form-select,
body .hero .search, body .hero .search-input,
body .hero input, body .hero select{
  background: var(--e-surface) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-line-2) !important;
}
body .hero .form-control::placeholder,
body .hero .search-input::placeholder,
body .hero input::placeholder{ color: var(--e-ink-3) !important; }
body .hero .form-control:focus, body .hero .search-input:focus,
body .hero input:focus, body .hero select:focus{
  border-color: var(--e-blue) !important;
  box-shadow: 0 0 0 3px var(--e-blue-50) !important;
}

/* Boutons secondaires du bandeau */
body .hero .btn-outline-light, body .hero .btn-soft, body .hero .btn-ghost,
body .hero .btn-pill.btn-outline-light{
  background: var(--e-surface) !important;
  color: var(--e-ink) !important;
  border: 1px solid var(--e-line-2) !important;
}
body .hero .btn-outline-light:hover, body .hero .btn-soft:hover,
body .hero .btn-ghost:hover{
  background: var(--e-surface-2) !important;
  border-color: var(--e-ink-3) !important;
  color: var(--e-ink) !important;
}

/* Action principale : elle reste identifiable */
body .hero .btn-cta, body .hero .btn-save, body .hero .btn-soft-primary{
  background: var(--e-blue) !important;
  color: #fff !important;
  border: 1px solid var(--e-blue) !important;
}
body .hero .btn-cta i, body .hero .btn-save i,
body .hero .btn-soft-primary i{ color: #fff !important; }
body .hero .btn-cta:hover, body .hero .btn-save:hover{
  background: var(--e-blue-700) !important;
}

/* Onglets logés dans le bandeau (page Documents) */
body .hero .main-tab{
  background: var(--e-surface) !important;
  color: var(--e-ink-2) !important;
  border: 1px solid var(--e-line) !important;
}
body .hero .main-tab.active{
  background: var(--e-blue-50) !important;
  color: var(--e-blue) !important;
  border-color: var(--e-blue-100) !important;
}
body .hero .main-tab.active .tab-label{ color: var(--e-blue) !important; }

/* --------------------------------------------------------------------------
   36.14 États actifs
   Chaque page traitait son « élément sélectionné » à sa façon : fond bleu
   foncé ici, vert ailleurs, texte blanc ou sombre selon les cas. Certaines de
   ces règles l'emportaient sur la couche de compatibilité, d'autres non — d'où
   une sélection lisible sur une page et fantomatique sur la suivante.

   Une seule écriture pour tout le portail : fond bleu très clair, texte bleu,
   bordure assortie. Les descendants suivent, pour ne pas laisser un compteur
   en blanc au milieu.
   -------------------------------------------------------------------------- */
body .filter-btn.active, body .filter-btn.is-active,
body .main-tab.active,
body .type-item.active,
body .interloc-item.active,
body .t-item.active,
body .view-toggle button.on,
body .recipient-type-card.selected,
body .step-pill.active,
body .step-pill.done{
  background: var(--e-blue-50) !important;
  color: var(--e-blue) !important;
  border-color: var(--e-blue-100) !important;
}
body .filter-btn.active *, body .main-tab.active *,
body .type-item.active *, body .interloc-item.active *,
body .t-item.active *, body .view-toggle button.on *,
body .recipient-type-card.selected *, body .step-pill.active *{
  color: var(--e-blue) !important;
}

/* Le numéro de l'étape en cours reste plein, c'est le repère de progression */
body .step-pill.active .num, body .step-pill.done .num{
  background: var(--e-blue) !important;
  color: #fff !important;
}
body .t-item.active .t-dot{ background: var(--e-blue) !important; }

/* Compteurs logés dans un élément sélectionné */
body .type-item.active .count, body .interloc-item.active .count,
body .main-tab.active .count{
  background: var(--e-blue) !important;
  color: #fff !important;
}

/* ==========================================================================
   37. RESPONSIVE
   --------------------------------------------------------------------------
   Trois paliers, alignés sur ceux déjà présents dans ce fichier :
      < 720 px   téléphone
      720–1119   tablette
      >= 1120    bureau
   Plus deux ajustements ponctuels : très petits écrans (< 380 px) et
   paysage court (hauteur < 480 px).

   Rien ici ne modifie le rendu au-delà de 1120 px : le bureau est inchangé.
   ========================================================================== */

/* --------------------------------------------------------------------------
   37.1 Garde-fous structurels
   Un débordement horizontal vient presque toujours d'un enfant flex ou grid
   qui refuse de rétrécir sous la largeur de son contenu. `min-width: 0` règle
   la cause ; on n'a donc pas besoin de masquer le symptôme avec overflow.
   -------------------------------------------------------------------------- */
.e-main, .e-page, .e-card, .e-card__body,
.e-list__main, .e-table__name, .e-alert__body,
.e-formsec__fields, .e-pagehead__id, .e-kpi, .e-metric{
  min-width: 0;
}
.e-grid > *, .e-stack > *, .e-split > *, .e-row > *{ min-width: 0; }

/* Les médias ne débordent jamais de leur conteneur */
img, svg, video, canvas, iframe{ max-width: 100%; }
img, video{ height: auto; }

/* Un mot très long — URL, référence, e-mail — ne doit pas élargir la page */
.e-table__sub, .e-list__sub, .e-alert__read, .e-spec dd, .e-note__txt{
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   37.2 Hauteurs d'écran
   100vh ignore les barres d'interface mobiles : sur iOS Safari, un élément en
   100vh dépasse toujours de la hauteur de la barre d'adresse. dvh suit la
   zone réellement visible.
   -------------------------------------------------------------------------- */
.e-shell{ min-height: 100vh; min-height: 100dvh; }
.e-auth{ min-height: 100vh; min-height: 100dvh; }

/* --------------------------------------------------------------------------
   37.3 Zones sûres — encoche et barre d'accueil iPhone
   Requiert viewport-fit=cover dans la balise viewport, déjà présent.
   -------------------------------------------------------------------------- */
.e-sidebar{
  padding-left: env(safe-area-inset-left);
  padding-bottom: env(safe-area-inset-bottom);
}
.e-header{ padding-right: max(var(--e-6), env(safe-area-inset-right)); }
.e-toasts{
  right: max(var(--e-5), env(safe-area-inset-right));
  bottom: max(var(--e-5), env(safe-area-inset-bottom));
}
.e-palette{ padding-bottom: env(safe-area-inset-bottom); }

/* --------------------------------------------------------------------------
   37.4 Cibles tactiles
   44 px de côté minimum dès que le pointeur est grossier. On agrandit la zone
   sensible sans grossir le dessin, pour ne pas alourdir l'interface.
   -------------------------------------------------------------------------- */
@media (pointer: coarse){
  .e-btn{ min-height: 40px; padding-inline: var(--e-4); }
  .e-btn--sm{ min-height: 36px; }
  .e-iconbtn, .e-pager__btn{ min-width: 44px; min-height: 44px; }
  .e-nav__item{ min-height: 44px; }
  .e-tab{ min-height: 44px; }
  .e-seg__btn{ min-height: 36px; }
  .e-chip{ min-height: 32px; }

  /* Extension invisible de la zone cliquable des petites icônes */
  .e-link, .e-legend{ position: relative; }
  .e-link::after, .e-legend::after{
    content: ""; position: absolute; inset: -10px -6px;
  }

  /* Espacement minimal entre deux actions voisines */
  .e-table__act, .e-list__end, .e-alert__act{ gap: var(--e-3); }
  .e-table__act .e-btn + .e-btn,
  .e-table__act form + form{ margin-left: var(--e-1); }
}

/* Une interaction ne doit jamais dépendre du seul survol */
@media (hover: none){
  .e-table tbody tr:hover{ background: transparent; }
  .e-nav__item[data-tip]:hover::after{ display: none; }
}

/* --------------------------------------------------------------------------
   37.5 TABLETTE — 720 à 1119 px
   -------------------------------------------------------------------------- */
@media (max-width: 1120px){
  .e-page{ padding: var(--e-5); }
  .e-grid--kpi{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .e-metrics{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .e-formsec{ grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   37.6 TÉLÉPHONE — moins de 720 px
   -------------------------------------------------------------------------- */
@media (max-width: 720px){

  /* Conteneur : jamais de contenu collé au bord */
  .e-page{ padding: var(--e-4) var(--e-4) var(--e-10); }

  /* Le contenu occupe toute la largeur, la navigation devient un tiroir */
  .e-main{ margin-left: 0 !important; }

  /* En-tête de page : titre, méta, puis actions en pleine largeur */
  .e-pagehead{ flex-direction: column; gap: var(--e-4); }
  /* En colonne, la base de 320px deviendrait une hauteur : grand vide au-dessus des boutons */
  .e-pagehead__id{ flex: 0 0 auto; }
  .e-pagehead__title h1{ font-size: 1.1875rem; }
  .e-pagehead__act{ width: 100%; flex-wrap: wrap; }
  .e-pagehead__act .e-btn{ flex: 1 1 auto; justify-content: center; }
  .e-pagehead__act .e-btn--ghost{ flex: 0 0 auto; }

  /* Indicateurs : deux colonnes, puis une seule si l'écran est très étroit */
  .e-grid--kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .e-kpi{ padding: var(--e-3) var(--e-4) var(--e-4); }
  .e-kpi__value{ font-size: clamp(1.25rem, 6vw, 1.5rem); }
  .e-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Grilles à deux zones : empilement */
  .e-grid--2, .e-split{ grid-template-columns: 1fr; }

  /* Cartes : moins de marge intérieure, la place manque */
  .e-card__head{ padding: var(--e-3) var(--e-4); flex-wrap: wrap; }
  .e-card__body{ padding: var(--e-4); }

  /* Barre d'outils : la recherche prend la ligne, les filtres suivent */
  .e-toolbar{ flex-direction: column; align-items: stretch; gap: var(--e-2); }
  .e-toolbar .e-field{ width: 100%; }
  .e-toolbar .e-field input{ width: 100%; }
  .e-toolbar .e-select,
  .e-toolbar .e-btn{ width: 100%; justify-content: center; }
  .e-toolbar > .e-btn[style*="margin-left"]{ margin-left: 0 !important; }
  .e-seg{ width: 100%; overflow-x: auto; scrollbar-width: none; }
  .e-seg::-webkit-scrollbar{ display: none; }
  .e-seg__btn{ flex: 0 0 auto; }

  /* Formulaires : une colonne, libellés au-dessus */
  .e-formsec{ grid-template-columns: 1fr; gap: var(--e-3); }
  .e-fields-2{ grid-template-columns: 1fr; }
  .e-choices{ grid-template-columns: 1fr; }

  /* Barre d'actions collante : au-dessus de la barre d'accueil iPhone */
  .e-formfoot{
    margin-inline: calc(var(--e-4) * -1);
    padding: var(--e-3) var(--e-4)
             calc(var(--e-3) + env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
  .e-formfoot__note{ width: 100%; margin-bottom: var(--e-2); }
  .e-formfoot .e-btn{ flex: 1 1 auto; justify-content: center; }

  /* Alertes : action sous le texte, en pleine largeur */
  .e-alert{ flex-wrap: wrap; padding: var(--e-4); }
  .e-alert__act{ width: 100%; padding-left: 0; }
  .e-alert__act .e-btn{ flex: 1 1 auto; justify-content: center; }

  /* Bandeau d'état : légende sur deux colonnes */
  .e-ribbon{ padding: var(--e-4); }
  .e-ribbon__legend{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
  .e-ribbon__total{ width: 100%; margin-left: 0; margin-top: var(--e-1); }

  /* Recherche globale : feuille venant du bas, plus atteignable au pouce */
  .e-palette{ place-items: end center; padding: 0; }
  .e-palette__box{
    width: 100%;
    border-radius: var(--e-r-lg) var(--e-r-lg) 0 0;
    max-height: 85dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .e-palette__list{ max-height: 60dvh; }

  /* Notifications : bandeau bas pleine largeur */
  .e-toasts{ left: var(--e-4); right: var(--e-4); }
  .e-toast{ min-width: 0; max-width: none; }

  /* Carte : plus basse, elle n'est qu'un aperçu */
  .e-map{ height: clamp(200px, 45vw, 300px); }

  /* Fiches techniques : clé au-dessus de la valeur */
  .e-specs{ grid-template-columns: 1fr; }
  .e-spec{ flex-direction: column; gap: 2px; }
  .e-spec dt{ flex-basis: auto; }

  /* Matrice de permissions : illisible en tableau, on la fait défiler */
  .e-matrix{ min-width: 520px; }

  /* Calendrier : cases plus basses */
  .e-cal__day{ min-height: 52px; }
  .e-cal__ev{ font-size: .5625rem; }
}

/* --------------------------------------------------------------------------
   37.7 TRÈS PETITS ÉCRANS — moins de 380 px
   -------------------------------------------------------------------------- */
@media (max-width: 380px){
  .e-page{ padding: var(--e-3) var(--e-3) var(--e-10); }
  .e-grid--kpi, .e-metrics{ grid-template-columns: 1fr; }
  .e-ribbon__legend{ grid-template-columns: 1fr; }
  .e-pagehead__act{ flex-direction: column; }
  .e-pagehead__act .e-btn{ width: 100%; }
}

/* --------------------------------------------------------------------------
   37.8 PAYSAGE COURT — hauteur < 480 px
   Le clavier virtuel réduit encore cette hauteur : les couches flottantes
   doivent rester entièrement atteignables.
   -------------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape){
  .e-palette{ place-items: start center; padding-top: var(--e-3); }
  .e-palette__box{ max-height: 92dvh; border-radius: var(--e-r-lg); }
  .e-palette__list{ max-height: 55dvh; }
  .e-header{ height: 48px; }
  .e-sidebar__brand{ height: 48px; }
  .e-formfoot{ position: static; }   /* ne pas manger la hauteur restante */
}

/* --------------------------------------------------------------------------
   37.9 Tiroir de navigation
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  .e-sidebar{
    width: min(84vw, 300px);
    flex-basis: min(84vw, 300px);
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;      /* le défilement ne fuit pas vers la page */
  }
  /* Le mode réduit n'a pas de sens dans un tiroir */
  .e-shell.is-collapsed .e-sidebar{ width: min(84vw, 300px); flex-basis: min(84vw, 300px); }
  .e-shell.is-collapsed .e-sidebar__name,
  .e-shell.is-collapsed .e-nav__label,
  .e-shell.is-collapsed .e-nav__item span,
  .e-shell.is-collapsed .e-nav__count,
  .e-shell.is-collapsed .e-account__id{ display: revert; }
  .e-shell.is-collapsed .e-nav__item,
  .e-shell.is-collapsed .e-account,
  .e-shell.is-collapsed .e-sidebar__brand{ justify-content: flex-start; padding-inline: var(--e-3); }
  .e-shell.is-collapsed .e-nav__label{ height: auto; background: none; padding: 0 var(--e-3) var(--e-2); }
}

/* Blocage du défilement de la page derrière le tiroir */
body.e-noscroll{
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   37.10 Saisie — anti-zoom iOS
   Safari zoome automatiquement sur un champ dont la police descend sous 16 px.
   L'utilisateur se retrouve alors avec une page décalée qu'il doit repincer.
   C'est le défaut mobile le plus visible : tous les champs du portail étaient
   en 13 px.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  .e-input, .e-textarea, .e-select,
  .e-field input, .e-palette__input input,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="time"], input[type="url"],
  select, textarea{
    font-size: 16px;
  }
  .e-input, .e-textarea{ min-height: 44px; }
  .e-select{ height: 44px; }
  .e-field{ height: auto; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   37.11 Typographie fluide
   Aucun titre ne doit déborder ni se réduire au point de perdre sa hiérarchie.
   -------------------------------------------------------------------------- */
.e-h1{ font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem); }
.e-pagehead__title h1{ font-size: clamp(1.1875rem, 1.05rem + .8vw, 1.375rem); }
.e-auth__claim h2{ font-size: clamp(1.5rem, 1.1rem + 2vw, 1.75rem); }
.e-auth__stat b{ font-size: clamp(1.125rem, .9rem + 1.2vw, 1.375rem); }

/* ==========================================================================
   38. RESPONSIVE — pages du module Recyclage
   --------------------------------------------------------------------------
   Ces pages ont été reprises avec leur structure d'origine, pensée pour le
   bureau. On corrige ici les grilles et les couches flottantes qui ne
   tiennent pas sur un téléphone, sans toucher à leur balisage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   38.1 Conteneurs
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  body .container-xxl{ padding-inline: 0 !important; }
  body .cardx-body, body .form-body{ padding: var(--e-4) !important; }
  body .cardx-head, body .form-head{ padding: var(--e-3) var(--e-4) !important; }
}

/* --------------------------------------------------------------------------
   38.2 En-tête de page
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  body .hero{ padding-bottom: var(--e-4) !important; margin-bottom: var(--e-4) !important; }
  body .hero-inner{ flex-direction: column; align-items: stretch; gap: var(--e-3); }
  body .hero-inner > form,
  body .hero-inner > div:last-child{ width: 100%; }
  body .hero .form-control,
  body .hero .search-input{ min-width: 0 !important; width: 100% !important; }
  body .hero form{ flex-direction: column; align-items: stretch; }
  body .hero .btn-pill, body .hero .btn{ width: 100%; justify-content: center; }
  body .hello, body .hero-title{ font-size: clamp(1.1875rem, 1.05rem + .8vw, 1.375rem) !important; }
  body .hero-sub{ max-width: none !important; }
}

/* --------------------------------------------------------------------------
   38.3 Grilles figées
   Ces trois pages déclarent un nombre de colonnes en dur, ce qui donne des
   colonnes de 70 px sur un téléphone.
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  /* Barèmes : trois indicateurs côte à côte */
  body .kpi-row{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--e-3) !important; }

  /* Détail des casiers : indicateurs, et vue en coupe de la borne */
  body .kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body .casiers-grid.realistic,
  body .ghost-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Documents : choix du type de destinataire */
  body .recipient-type-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Toute grille de cartes retombe sur une colonne */
  body .doc-grid, body .cards-grid, body .grid-2, body .grid-3{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 380px){
  body .kpi-row, body .kpi,
  body .casiers-grid.realistic, body .ghost-grid,
  body .recipient-type-grid{ grid-template-columns: 1fr !important; }
}

/* --------------------------------------------------------------------------
   38.4 Colonne de filtres — Documents
   Une colonne latérale de 280 px n'a pas sa place à côté du contenu sur
   téléphone : elle passe au-dessus, dépliable.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  body .doc-layout, body .docs-wrap{
    display: block !important;
  }
  body .doc-side{
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: var(--e-4) !important;
    max-height: none !important;
  }
}

/* --------------------------------------------------------------------------
   38.5 Tableau kanban — Prospection
   Le défilement horizontal est ici la bonne réponse : on garde les colonnes
   lisibles et on rend le geste naturel, plutôt que d'écraser cinq colonnes.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  body .board{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--e-3);
    margin-inline: calc(var(--e-4) * -1);
    padding-inline: var(--e-4);
  }
  body .kcol{
    flex: 0 0 min(78vw, 292px) !important;
    width: min(78vw, 292px) !important;
    scroll-snap-align: start;
  }
}

/* --------------------------------------------------------------------------
   38.6 Tableaux
   Ils restent des tableaux, avec un défilement horizontal maîtrisé : leurs
   colonnes portent des données comparables, qu'un empilement en cartes
   rendrait plus difficiles à lire.
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  body .table-responsive{
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body .table{ min-width: 640px; }
  body .table th, body .table td{ padding: var(--e-3) !important; }
  /* La première colonne reste visible pendant le défilement */
  body .table thead th:first-child,
  body .table tbody td:first-child{
    position: sticky; left: 0; z-index: 1;
    background: var(--e-surface);
    box-shadow: 1px 0 0 var(--e-line);
  }
  body .table thead th:first-child{ background: var(--e-surface-2); }
}

/* --------------------------------------------------------------------------
   38.7 Couches flottantes
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  /* Le retour visuel s'affichait en haut à droite, sous le header */
  body .toast-feedback{
    top: auto !important;
    right: var(--e-4) !important;
    left: var(--e-4) !important;
    bottom: calc(var(--e-4) + env(safe-area-inset-bottom)) !important;
    width: auto !important;
  }

  /* Modales : feuille venant du bas, fermeture toujours atteignable */
  body .modal-dialog{
    margin: 0 !important;
    max-width: none !important;
    position: absolute;
    left: 0; right: 0; bottom: 0;
  }
  body .modal-content{
    border-radius: var(--e-r-lg) var(--e-r-lg) 0 0 !important;
    max-height: 90dvh;
  }
  body .modal-body{ overflow-y: auto; max-height: 65dvh; }
  body .modal-footer{ padding-bottom: calc(var(--e-4) + env(safe-area-inset-bottom)) !important; }
  body .modal-footer .btn{ flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   38.8 Formulaires et actions
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  body .row > [class*="col-"]{ width: 100%; flex: 0 0 100%; max-width: 100%; }
  body .footer-actions{ flex-direction: column-reverse; gap: var(--e-2); }
  body .footer-actions .btn,
  body .footer-actions .btn-pill{ width: 100%; justify-content: center; }
  body .d-flex.gap-2.flex-wrap{ gap: var(--e-2) !important; }

  /* Assistants : les étapes défilent au lieu de s'empiler sur quatre lignes */
  body .steps{
    display: flex !important;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--e-2) !important;
    margin-inline: calc(var(--e-4) * -1);
    padding-inline: var(--e-4);
  }
  body .steps::-webkit-scrollbar{ display: none; }
  body .step-pill{
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: var(--e-2) var(--e-3) !important;
    font-size: .8125rem;
  }
}

/* --------------------------------------------------------------------------
   38.9 Décor
   Les éléments purement décoratifs coûtent de la place et du calcul sur
   mobile, sans rien apporter.
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  body .hero-deco, body .deco-ring, body .deco-dot,
  body .hero-blob, body .hero-glow{ display: none !important; }
}

/* Vue en coupe de la borne : décorative et lourde, on la réduit */
@media (max-width: 720px){
  body .borne-scene{ transform: scale(.85); transform-origin: top center; }
}

/* --------------------------------------------------------------------------
   37.10 Petits écrans : en-tête de page sur deux lignes
   Quand ses actions ne tiennent pas à côté du titre (Tournées : choix du site
   et « Planifier avec Claude » sortaient de l'écran et écrasaient le titre),
   elles passent sous le titre, qui tient sur une ligne.
   -------------------------------------------------------------------------- */
@media (max-width: 600px){
  .e-header{
    height: auto; min-height: var(--e-header);
    flex-wrap: wrap; row-gap: var(--e-2);
    padding-top: var(--e-2); padding-bottom: var(--e-2);
  }
  .e-header__title{ flex: 1 1 0; }
  .e-header__title .e-h1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .e-header__actions{ flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
}

/* --------------------------------------------------------------------------
   37.11 Fluidité sur écran tactile (17/10/2026)
   Le flou d'un élément collant (en-tête, barre d'actions) est recalculé à
   chaque image du défilement : coûteux sur un téléphone. Fond presque opaque
   à la place, même rendu à l'œil.
   -------------------------------------------------------------------------- */
@media (hover: none), (max-width: 900px){
  .e-header{ background: rgba(255,255,255,.985); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .e-formfoot{ background: rgba(255,255,255,.98); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .e-palette{ -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   39. COULEURS DE SECTION (23/10/2026)
   Chaque section du portail a sa teinte, la même que sur l'accueil
   (kiosque.css, .k-t-*) : menu, en-tête, indicateurs, titres de cartes,
   liens et onglets. La coquille pose data-section sur <body> (section de la
   page) et sur chaque groupe du menu ; sans section, la teinte de la marque.
   --e-sec   texte / icône (≥ 4,5:1 sur blanc et sur --e-sec-bg)
   --e-sec-bg fond clair · --e-sec-bd bordure · --e-sec-vif sur fond marine
   Décor seulement : les statuts gardent ok / warn / crit.
   -------------------------------------------------------------------------- */
:root{ --e-sec: var(--e-blue); --e-sec-bg: var(--e-blue-50); --e-sec-bd: var(--e-blue-100); --e-sec-vif: #7DD3FC; }
:is(body, .e-nav__group)[data-section="exploitation"]  { --e-sec: #0E6B4A; --e-sec-bg: #E5F3ED; --e-sec-bd: #9DD3BD; --e-sec-vif: #6EE7B7; }
:is(body, .e-nav__group)[data-section="commercial"]    { --e-sec: #8A5200; --e-sec-bg: #FCF2E3; --e-sec-bd: #EDCD95; --e-sec-vif: #FCD34D; }
:is(body, .e-nav__group)[data-section="collectivites"] { --e-sec: #0B4F7C; --e-sec-bg: #E6EFF6; --e-sec-bd: #9CC0DA; --e-sec-vif: #7DD3FC; }
:is(body, .e-nav__group)[data-section="reseau"]        { --e-sec: #5B3A93; --e-sec-bg: #EFEAF7; --e-sec-bd: #C4B3E2; --e-sec-vif: #C4B5FD; }
:is(body, .e-nav__group)[data-section="organisation"]  { --e-sec: #0B6670; --e-sec-bg: #E3F2F3; --e-sec-bd: #97CDD2; --e-sec-vif: #5EEAD4; }
:is(body, .e-nav__group)[data-section="administration"]{ --e-sec: #A8264F; --e-sec-bg: #FBEAF0; --e-sec-bd: #EDB3C6; --e-sec-vif: #FDA4AF; }
:is(body, .e-nav__group)[data-section="nouvelles"]     { --e-sec: #4338A8; --e-sec-bg: #ECEBFB; --e-sec-bd: #BDB8EE; --e-sec-vif: #A5B4FC; }
:is(body, .e-nav__group)[data-section="site"]          { --e-sec: #5B3A93; --e-sec-bg: #EFEAF7; --e-sec-bd: #C4B3E2; --e-sec-vif: #C4B5FD; }

/* Menu : pastille et icônes à la couleur de la section, élément actif teinté */
.e-nav__group[data-section] .e-nav__label{ display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.55); }
.e-nav__group[data-section] .e-nav__label::before{ content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 2px; background: var(--e-sec-vif); }
.e-nav__group[data-section] .e-nav__item i{ color: var(--e-sec-vif); opacity: .9; }
.e-nav__group[data-section] .e-nav__item.is-active{ background: color-mix(in srgb, var(--e-sec-vif) 17%, transparent); }
.e-nav__group[data-section] .e-nav__item.is-active::before{ background: var(--e-sec-vif); }
.e-nav__group[data-section] .e-nav__item.is-active i{ opacity: 1; }
/* Menu replié (bureau seulement : sous 900 px c'est un tiroir, § 37.9) : le titre
   de section devient un filet à sa couleur, sans texte qui dépasse */
@media (min-width: 901px){
  .e-shell.is-collapsed .e-nav__group[data-section] .e-nav__label{ display: block; height: 1px; padding: 0; overflow: hidden; font-size: 0;
    color: transparent; background: color-mix(in srgb, var(--e-sec-vif) 45%, transparent); }
  .e-shell.is-collapsed .e-nav__group[data-section] .e-nav__label::before{ display: none; }
}

/* En-tête : pictogramme de la page et filet coloré */
.e-header__ico{ width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--e-sec-bg); color: var(--e-sec); font-size: .9375rem; }
.e-header::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--e-sec), var(--e-sec-bd) 35%, transparent 80%); }
/* Halo très léger en haut de page */
.e-main{ background: radial-gradient(1100px 300px at 85% 0, color-mix(in srgb, var(--e-sec-bd) 28%, transparent), transparent 75%) no-repeat; }

/* Indicateurs : liseré et libellé colorés, une teinte par carte dans une grille */
.e-kpi{ position: relative; overflow: hidden; --e-kc: var(--e-sec); --e-kbg: var(--e-sec-bg);
  background: linear-gradient(150deg, var(--e-surface) 60%, color-mix(in srgb, var(--e-kbg) 70%, var(--e-surface))); }
.e-kpi::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--e-kc); opacity: .85; }
.e-kpi__label{ color: var(--e-kc); }
.e-grid--kpi > .e-kpi:nth-child(6n+2){ --e-kc: #0E6B4A; --e-kbg: #E5F3ED; }
.e-grid--kpi > .e-kpi:nth-child(6n+3){ --e-kc: #5B3A93; --e-kbg: #EFEAF7; }
.e-grid--kpi > .e-kpi:nth-child(6n+4){ --e-kc: #8A5200; --e-kbg: #FCF2E3; }
.e-grid--kpi > .e-kpi:nth-child(6n+5){ --e-kc: #0B6670; --e-kbg: #E3F2F3; }
.e-grid--kpi > .e-kpi:nth-child(6n+6){ --e-kc: #4338A8; --e-kbg: #ECEBFB; }
/* Une alerte reste rouge, quelle que soit sa place dans la grille */
.e-kpi.e-kpi--alert, .e-grid--kpi > .e-kpi.e-kpi--alert{ --e-kc: var(--e-crit); --e-kbg: var(--e-crit-bg); }

/* Cartes, liens, onglets, mesures */
.e-card__head .e-h2::before, .e-card__head > h2:first-child::before, .e-card__head > h3:first-child::before{
  content: ""; display: inline-block; width: 4px; height: 14px; margin-right: 9px; border-radius: 2px;
  background: var(--e-sec); vertical-align: -2px; }
.e-link{ color: var(--e-sec); }
.e-tab.is-active{ color: var(--e-sec); border-bottom-color: var(--e-sec); }
.e-tab.is-active .e-tab__count{ background: var(--e-sec-bg); color: var(--e-sec); }
.e-metric__label{ color: var(--e-sec); }
.e-empty__ico--neutral{ background: var(--e-sec-bg); color: var(--e-sec); }

@media (max-width: 600px){
  .e-header__ico{ display: none; }
}