/*
  Thème « Pro » ECAFF / ECFO-CREFM
  Couche ajoutée à côté de style.css (non supprimé) : les gabarits non
  encore migrés continuent de fonctionner sans changement.
  Palette tirée du visuel officiel de l'Église La Compassion (violet
  profond → magenta, rehauts or) — pas la charte d'un thème acheté,
  pas le bleu SaaS générique.
*/

@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/poppins/poppins-400-latin.9212f6f9860f.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/poppins/poppins-400-latin-ext.90926c36b712.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/poppins/poppins-500-latin.a09f2fccfee3.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/poppins/poppins-500-latin-ext.1f24684cbd72.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/poppins/poppins-600-latin.72993dddf88a.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/poppins/poppins-600-latin-ext.a575b6d9df98.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins/poppins-700-latin.25b0e113ca7c.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins/poppins-700-latin-ext.367d2aa05bf0.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/poppins/poppins-800-latin.af4d371a1027.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215; }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/poppins/poppins-800-latin-ext.6b2835047d68.woff2") format("woff2"); unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  --ec-ink:#1c1030;
  --ec-ink-soft:#5c5170;
  --ec-ink-faint:#8f84a0;
  --ec-bg:#f6f3fb;
  --ec-surface:#ffffff;
  --ec-border:#e7e0f2;

  /* Identité de marque — extraite de l'affiche "22 ans" */
  --ec-brand-deep:#1f0f3d;     /* violet-nuit, coin haut-gauche de l'affiche */
  --ec-brand-purple:#4a1f7a;   /* violet */
  --ec-brand-magenta:#c81f8f;  /* rose-magenta, halo central de l'affiche */
  --ec-brand-violet:#6c2c9e;

  --ec-primary:#7c2d9e;
  --ec-primary-dark:#551f74;
  --ec-primary-soft:#f2e6fa;
  --ec-gold:#d9a53e;
  --ec-gold-soft:#faf1dd;

  --ec-success:#1a9d6c;
  --ec-success-soft:#e2f6ee;
  --ec-warning:#d69412;
  --ec-warning-soft:#fbf0dc;
  --ec-danger:#e0453f;
  --ec-danger-soft:#fbe6e5;
  --ec-info:#9c3fae;
  --ec-info-soft:#f3e7f8;

  --ec-sidebar-bg:#1f0f3d;
  --ec-sidebar-bg-2:#6c2493;
  --ec-sidebar-text:#c9b8de;
  --ec-sidebar-text-active:#ffffff;
  --ec-sidebar-width:272px;

  --ec-radius-lg:22px;
  --ec-radius-md:16px;
  --ec-radius-sm:10px;
  --ec-shadow-sm:0 1px 2px rgba(31,15,61,.07);
  --ec-shadow-md:0 12px 32px rgba(74,31,122,.12);

  --ec-font-display:"Poppins",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ec-font-body:"Poppins",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.ec{ font-family:var(--ec-font-body); color:var(--ec-ink); }
.ec h1,.ec h2,.ec h3,.ec h4,.ec h5,.ec .ec-display{ font-family:var(--ec-font-display); font-weight:800; letter-spacing:-.01em; color:var(--ec-ink); }
.ec, .ec *{ box-sizing:border-box; }
.ec{ background:var(--ec-bg); min-height:100vh; }
.ec .tabular{ font-variant-numeric:tabular-nums; }
.ec .mono{ font-family:"SFMono-Regular",Consolas,Menlo,monospace; font-size:.92em; letter-spacing:-.01em; }
/* Bloc d'informations utilisé uniquement pour composer l'export Excel côté client (js/export-excel.js). */
.ec .export-info-only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- App shell : sidebar + topbar + content ---------- */
.ec-shell{ display:flex; min-height:100vh; }
.ec-sidebar{
  width:var(--ec-sidebar-width); flex:none;
  background:
    radial-gradient(circle at 85% 6%, rgba(216,165,62,.16), transparent 42%),
    linear-gradient(190deg,var(--ec-sidebar-bg) 12%,var(--ec-sidebar-bg-2) 130%);
  color:var(--ec-sidebar-text);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow:hidden;
}
/* Le header (logo) et le pied (déconnexion) restent fixes ; seule la liste
   de liens .ec-nav défile en interne quand elle dépasse la hauteur écran. */
.ec-sidebar-brand{ display:flex; align-items:center; gap:12px; padding:22px 22px 18px; flex:none; }
.ec-sidebar-brand img{ width:38px; height:38px; object-fit:contain; border-radius:9px; background:#fff; padding:4px; }
.ec-sidebar-brand .name{ font-family:var(--ec-font-display); font-weight:800; color:#fff; font-size:15px; line-height:1.2; }
.ec-sidebar-brand .tag{ font-size:11px; color:#c9b8de; letter-spacing:.04em; }

.ec-sidebar-section{ padding:6px 22px; margin-top:10px; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:#a992c4; font-weight:700; }
.ec-nav{ display:flex; flex-direction:column; gap:2px; padding:4px 14px 18px; flex:1 1 auto; min-height:0; overflow-y:auto; }
.ec-nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--ec-radius-sm);
  color:var(--ec-sidebar-text); text-decoration:none; font-size:14px; font-weight:500;
  position:relative; transition:background .15s ease, color .15s ease;
}
.ec-nav-link i{ font-size:16px; width:20px; text-align:center; flex:none; color:#a48fc4; transition:color .15s ease; }
.ec-nav-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
.ec-nav-link:hover i{ color:#f0dba9; }
.ec-nav-link.active{ background:linear-gradient(135deg,var(--ec-primary),var(--ec-brand-magenta)); color:#fff; box-shadow:0 8px 20px rgba(200,31,143,.35); }
.ec-nav-link.active i{ color:#fff; }
.ec-nav-link .ec-chip{ margin-left:auto; }
.ec-sidebar-foot{ flex:none; margin-top:auto; padding:16px 22px 22px; border-top:1px solid rgba(255,255,255,.12); }
.ec-sidebar-foot a{ color:#c9b8de; font-size:12.5px; text-decoration:none; }
.ec-sidebar-foot a:hover{ color:#fff; }

.ec-main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.ec-topbar{
  position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ec-border); padding:14px 26px; display:flex; align-items:center; gap:16px;
}
.ec-topbar .ec-burger{ display:none; }
.ec-topbar-title{ font-family:var(--ec-font-display); font-weight:800; font-size:18px; color:var(--ec-ink); }
.ec-topbar-title small{ display:block; font-family:var(--ec-font-body); font-weight:500; font-size:12.5px; color:var(--ec-ink-faint); }
.ec-topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.ec-icon-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--ec-border); background:#fff;
  display:grid; place-items:center; color:var(--ec-ink-soft); position:relative; text-decoration:none;
  transition:transform .15s ease, background .15s ease, color .15s ease;
  /* Safari conserve un padding et un alignement de contrôle natifs sur
     <button> même sous display:grid, ce qui décale son contenu — invisible
     sur Chrome/Android, visible sur Safari iOS. On enlève complètement le
     chrome natif du bouton pour que le centrage grid s'applique réellement. */
  -webkit-appearance:none; appearance:none; padding:0; margin:0; font:inherit; outline:none;
  /* Dans .ec-topbar (flex), un titre sur 2-3 lignes réclame plus de largeur :
     sans protection, flexbox rétrécit ce bouton en priorité (flex-shrink:1
     par défaut) et le cercle devient un ovale écrasé. flex-shrink:0 garantit
     qu'il reste toujours 42×42, quelle que soit la longueur du titre. */
  flex-shrink:0;
}
.ec-icon-btn:focus, .ec-icon-btn:focus-visible{ outline:none; box-shadow:none; }
/* Centrer une icône via line-height/vertical-align dépend des métriques de la
   police (ascendant/descendant), qui varient selon le moteur de rendu — fiable
   sur Chromium, visiblement pas sur Safari iOS. On centre donc le glyphe
   (le contenu ::before) avec flexbox, indépendant de ces métriques : l'icône
   remplit tout le cercle puis centre son propre contenu par calcul de boîte,
   pas par ligne de base. */
.ec-icon-btn i{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.ec-icon-btn:hover{ background:var(--ec-primary-soft); color:var(--ec-primary); transform:translateY(-1px); }
.ec-icon-btn .dot{ position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--ec-danger); border:2px solid #fff; }
.ec-topbar-actions > .dropdown:last-child{ margin-left:10px; padding-left:14px; border-left:1px solid var(--ec-border); }

.ec-profile{ display:flex; align-items:center; gap:10px; padding:6px 8px 6px 6px; border-radius:999px; border:1px solid var(--ec-border); background:#fff; cursor:pointer; }
.ec-profile:hover{ background:var(--ec-primary-soft); }
.ec-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--ec-primary),var(--ec-brand-magenta)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; overflow:hidden; flex:none; }
.ec-avatar img{ width:100%; height:100%; object-fit:cover; }
.ec-avatar-clickable{ cursor:pointer; border:0; padding:0; }

.ec-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(15,17,24,.82); display:flex; align-items:center; justify-content:center; padding:32px; }
.ec-lightbox img{ max-width:min(90vw,520px); max-height:85vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.ec-lightbox-close{ position:absolute; top:20px; right:24px; width:42px; height:42px; border-radius:50%; border:0; background:#fff; color:#1f2330; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ec-profile-name{ font-size:13.5px; font-weight:600; color:var(--ec-ink); line-height:1.15; }
.ec-profile-role{ font-size:11px; color:var(--ec-ink-faint); }

.ec-error-overlay{ position:fixed; inset:0; z-index:2100; background:rgba(15,17,24,.55); display:flex; align-items:center; justify-content:center; padding:20px; }
.ec-error-dialog{ background:var(--ec-surface); border-radius:var(--ec-radius-lg); box-shadow:var(--ec-shadow-md); padding:32px 28px; max-width:380px; width:100%; text-align:center; }
.ec-error-dialog-icon{ width:52px; height:52px; border-radius:50%; background:var(--ec-danger-soft); color:var(--ec-danger); display:flex; align-items:center; justify-content:center; font-size:22px; margin:0 auto 16px; }
.ec-error-dialog h3{ margin:0 0 8px; font-size:17px; color:var(--ec-ink); }
.ec-error-dialog p{ margin:0 0 20px; font-size:14px; color:var(--ec-ink-soft); line-height:1.5; }
.ec-error-dialog .ec-btn{ min-width:100px; }
.ec-error-dialog-icon.icon-info{ background:var(--ec-primary-soft); color:var(--ec-primary); }
.ec-dialog-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* Menu déroulant personnalisé (recherche/filtres) : s'ouvre toujours vers le
   bas, contrairement à un <select> natif que le navigateur peut inverser
   vers le haut selon la place disponible à l'écran. */
.ec-dropdown{ position:relative; }
.ec-dropdown-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; text-align:left; background:#fff; }
.ec-dropdown-menu{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--ec-border); border-radius:12px; box-shadow:var(--ec-shadow-md); z-index:80; max-height:280px; overflow-y:auto; padding:6px; display:none; }
.ec-dropdown-menu.show{ display:block; }
.ec-dropdown-group-label{ padding:8px 10px 4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ec-ink-faint); }
.ec-dropdown-item{ display:block; padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--ec-ink); text-decoration:none; }
.ec-dropdown-item:hover{ background:var(--ec-primary-soft); }
.ec-dropdown-item.active{ background:var(--ec-primary-soft); color:var(--ec-primary); font-weight:700; }

.ec-content{ padding:26px; flex:1; }
.ec-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.ec-page-head h1{ font-size:23px; margin:0 0 4px; }
.ec-page-head p{ margin:0; color:var(--ec-ink-soft); font-size:14px; }
.ec-eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ec-gold); margin:0 0 4px; }

/* ---------- Cartes ---------- */
.ec-card{ background:var(--ec-surface); border:1px solid var(--ec-border); border-radius:var(--ec-radius-lg); box-shadow:var(--ec-shadow-sm); }
.ec-card-body{ padding:24px; }
.ec-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px 0; }
.ec-card-head h2{ font-size:16px; margin:0; }
.ec-card-head .muted{ color:var(--ec-ink-faint); font-size:12.5px; }

.ec-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:20px; }
.ec-stat{ background:var(--ec-surface); border:1px solid var(--ec-border); border-radius:var(--ec-radius-lg); padding:20px; box-shadow:var(--ec-shadow-sm); display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.ec-stat:before{ content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg,var(--ec-primary),var(--ec-brand-magenta)); opacity:.85; }
.ec-stat-top{ display:flex; align-items:flex-start; justify-content:space-between; }
.ec-stat-icon{ width:48px; height:48px; border-radius:16px; display:grid; place-items:center; font-size:19px; flex:none; }
.ec-stat-icon.brand{ background:var(--ec-primary-soft); color:var(--ec-primary); }
.ec-stat-icon.gold{ background:var(--ec-gold-soft); color:var(--ec-gold); }
.ec-stat-icon.success{ background:var(--ec-success-soft); color:var(--ec-success); }
.ec-stat-icon.info{ background:var(--ec-info-soft); color:var(--ec-info); }
.ec-stat-icon.warning{ background:var(--ec-warning-soft); color:var(--ec-warning); }
.ec-stat-icon.danger{ background:var(--ec-danger-soft); color:var(--ec-danger); }
.ec-stat-trend{ font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; }
.ec-stat-trend.up{ background:var(--ec-success-soft); color:var(--ec-success); }
.ec-stat-trend.flat{ background:var(--ec-bg); color:var(--ec-ink-faint); }
.ec-stat-value{ font-family:var(--ec-font-display); font-size:28px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.ec-stat-label{ font-size:13px; color:var(--ec-ink-soft); }

/* Cartes KPI « pleines » en dégradé de marque — le signal visuel principal du
   tableau de bord. Icône en médaillon translucide, chiffre et libellé en blanc. */
.ec-stat-glow{ border:none; color:#fff; padding:24px 90px 24px 24px; min-height:112px; justify-content:center; box-shadow:0 14px 30px -8px rgba(31,15,61,.35); }
.ec-stat-glow:before{ display:none; }
.ec-stat-glow .ec-stat-value{ color:#fff; font-size:32px; }
.ec-stat-glow .ec-stat-label{ color:rgba(255,255,255,.88); font-weight:600; }
.ec-stat-icon-glow{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:16px; border:2px solid rgba(255,255,255,.55);
  display:grid; place-items:center; font-size:23px; color:#fff; background:rgba(255,255,255,.08);
}
/* Le bloc principal du tableau de bord reprend la composition verticale des
   quatre KPI suivants : icône, valeur, puis libellé. */
.ec-stat-glow.ec-stat-stacked{padding:20px;justify-content:flex-start;gap:14px}
.ec-stat-glow.ec-stat-stacked .ec-stat-icon-glow{
  position:static;right:auto;top:auto;transform:none;
  width:48px;height:48px;border:0;border-radius:16px;
  background:rgba(255,255,255,.20)
}
.ec-stat-glow-blue{ background:linear-gradient(135deg,#4facfe,#1f78e0); }
.ec-stat-glow-green{ background:linear-gradient(135deg,#3ddc97,#0fa968); }
.ec-stat-glow-gold{ background:linear-gradient(135deg,#f6c667,#e0a52e); }
.ec-stat-glow-coral{ background:linear-gradient(135deg,#ff8a65,#f2543d); }
.ec-stat-glow-red{ background:linear-gradient(135deg,#f4515e,#ff9a9e); }
/* alias conservés pour compatibilité de nommage */
.ec-stat-glow-violet{ background:linear-gradient(135deg,#4facfe,#1f78e0); }
.ec-stat-glow-magenta{ background:linear-gradient(135deg,#3ddc97,#0fa968); }
.ec-stat-glow-success{ background:linear-gradient(135deg,#3ddc97,#0fa968); }
.ec-stat-glow-info{ background:linear-gradient(135deg,#4facfe,#1f78e0); }
.ec-stat-glow-danger{ background:linear-gradient(135deg,#ff8a65,#f2543d); }
.ec-stat-glow-purple{ background:linear-gradient(135deg,#7654f6,#9b6cf6); }
.ec-stat-glow-mint{ background:linear-gradient(135deg,#23c99a,#5edeb2); }
.ec-stat-glow-orange{ background:linear-gradient(135deg,#ffad28,#ffc65b); }
.ec-stat-glow-pink{ background:linear-gradient(135deg,#df75df,#f0a0e8); }
/* Tous les KPI de tableau de bord utilisent désormais le langage coloré de la référence mobile. */
.ec-stat-grid > .ec-stat:not(.ec-stat-glow){color:#fff;border:0;min-height:112px;justify-content:center;box-shadow:0 14px 30px -10px rgba(31,15,61,.28)}
.ec-stat-grid > .ec-stat:not(.ec-stat-glow):nth-child(4n+1){background:linear-gradient(135deg,#7654f6,#9b6cf6)}
.ec-stat-grid > .ec-stat:not(.ec-stat-glow):nth-child(4n+2){background:linear-gradient(135deg,#ffb12e,#ffd06b)}
.ec-stat-grid > .ec-stat:not(.ec-stat-glow):nth-child(4n+3){background:linear-gradient(135deg,#45d6a3,#70e1bb)}
.ec-stat-grid > .ec-stat:not(.ec-stat-glow):nth-child(4n+4){background:linear-gradient(135deg,#df75df,#f2a5e9)}
.ec-stat-grid > .ec-stat:not(.ec-stat-glow):before{display:none}.ec-stat-grid > .ec-stat:not(.ec-stat-glow) .ec-stat-value,.ec-stat-grid > .ec-stat:not(.ec-stat-glow) .ec-stat-label{color:#fff}.ec-stat-grid > .ec-stat:not(.ec-stat-glow) .ec-stat-icon{background:rgba(255,255,255,.2);color:#fff}
@media(max-width:575.98px){.ec-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ec-stat{padding:18px;min-width:0}.ec-stat-glow{padding:20px 62px 20px 18px}.ec-stat-glow.ec-stat-stacked{padding:18px}.ec-stat-glow .ec-stat-value{font-size:28px}.ec-stat-icon-glow{right:14px;width:46px;height:46px}}
/* Boîte mail institutionnelle intégrée */
.ec-mail-folders{display:grid;gap:6px}.ec-mail-folders a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;color:var(--ec-ink-soft);text-decoration:none;font-weight:600;font-size:13px}.ec-mail-folders a:hover,.ec-mail-folders a.active{background:var(--ec-primary-soft);color:var(--ec-primary)}
.ec-mail-list{display:grid}.ec-mail-row{display:grid;grid-template-columns:28px minmax(150px,220px) minmax(200px,1fr) 125px;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--ec-border);text-decoration:none;color:var(--ec-ink);font-size:13px}.ec-mail-row:hover{background:var(--ec-bg)}.ec-mail-row.unread{background:#faf7ff;font-weight:700}.ec-mail-status{color:var(--ec-primary)}.ec-mail-sender,.ec-mail-subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ec-mail-row time{font-size:12px;color:var(--ec-ink-faint);text-align:right}.ec-mail-meta{font-size:13px;color:var(--ec-ink-soft)}.ec-mail-meta p{margin:0 0 6px}.ec-mail-body{white-space:normal;line-height:1.75;min-height:180px;overflow-wrap:anywhere}
@media(max-width:767.98px){.ec-mail-row{grid-template-columns:24px 1fr 90px}.ec-mail-sender{grid-column:2}.ec-mail-subject{grid-column:2/4;color:var(--ec-ink-soft)}.ec-mail-row time{grid-column:3;grid-row:1}.ec-mail-status{grid-row:1/3}}

.ec-quick-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.ec-quick-card{
  display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:var(--ec-radius-md);
  border:1px solid var(--ec-border); background:#fff; text-decoration:none; color:inherit; position:relative;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ec-quick-card:hover{ transform:translateY(-2px); box-shadow:var(--ec-shadow-md); border-color:#dfc2ee; }
.ec-quick-card .ec-stat-icon{ width:42px; height:42px; border-radius:12px; font-size:17px; }
.ec-quick-card h3{ font-size:14.5px; margin:0 0 3px; }
.ec-quick-card p{ font-size:12.5px; color:var(--ec-ink-faint); margin:0; }

/* ---------- Boutons ---------- */
.ec-btn{ display:inline-flex; align-items:center; gap:8px; border-radius:11px; padding:11px 18px; font-weight:700; font-size:14px; border:1px solid transparent; text-decoration:none; cursor:pointer; }
.ec-btn-primary{ background:linear-gradient(135deg,var(--ec-primary),var(--ec-brand-magenta)); color:#fff; box-shadow:0 10px 22px rgba(124,45,158,.28); }
.ec-btn-primary:hover{ filter:brightness(1.06); color:#fff; }
.ec-btn-light{ background:var(--ec-primary-soft); color:var(--ec-primary-dark); }
.ec-btn-light:hover{ background:#e6d0f4; color:var(--ec-primary-dark); }
.ec-btn-outline{ background:#fff; border-color:var(--ec-border); color:var(--ec-ink); }
.ec-btn-outline:hover{ border-color:#d9bfec; }
.ec-btn-gold{ background:var(--ec-gold); color:#fff; }
.ec-btn-block{ width:100%; justify-content:center; }
.ec-btn-sm{ padding:8px 13px; font-size:12.5px; border-radius:9px; }

/* ---------- Badges / statuts ---------- */
.ec-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.01em; max-width:100%; white-space:normal; }
.ec-badge-success{ background:var(--ec-success-soft); color:var(--ec-success); }
.ec-badge-warning{ background:var(--ec-warning-soft); color:var(--ec-warning); }
.ec-badge-danger{ background:var(--ec-danger-soft); color:var(--ec-danger); }
.ec-badge-info{ background:var(--ec-info-soft); color:var(--ec-info); }
.ec-badge-gold{ background:var(--ec-gold-soft); color:var(--ec-gold); }
.ec-badge-neutral{ background:var(--ec-bg); color:var(--ec-ink-soft); }
.ec-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px; padding:0 6px; border-radius:999px; background:var(--ec-danger); color:#fff; font-size:10.5px; font-weight:800; }

/* ---------- Formulaires ---------- */
.ec-field{ margin-bottom:16px; }
.ec-field label{ display:block; font-size:13px; font-weight:700; color:var(--ec-ink); margin-bottom:7px; }
.ec-input, .ec select.ec-input, .ec textarea.ec-input{
  width:100%; padding:12px 14px; border-radius:11px; border:1.5px solid var(--ec-border); background:#fcfaff;
  font-size:14.5px; font-family:var(--ec-font-body); color:var(--ec-ink); transition:border-color .15s, box-shadow .15s, background .15s;
}
.ec-input:focus{ outline:none; border-color:var(--ec-primary); box-shadow:0 0 0 3px var(--ec-primary-soft); background:#fff; }
.ec-input-group{ position:relative; }
.ec-input-group .ec-input{ padding-right:46px; }
.ec-input-group button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--ec-ink-faint); width:34px; height:34px; border-radius:9px; display:grid; place-items:center; cursor:pointer; }
.ec-input-group button:hover{ background:var(--ec-primary-soft); color:var(--ec-primary); }
.ec-input-group input::-ms-reveal,
.ec-input-group input::-ms-clear{ display:none; }

/* Compteur numérique +/- : bouton data-qty-action="decrement"/"increment"
   ciblant l'input voisin (voir app.js), en plus de la saisie directe. */
.ec-qty-stepper{ display:flex; align-items:stretch; gap:8px; max-width:190px; }
.ec-qty-stepper .ec-input{ text-align:center; padding-left:6px; padding-right:6px; }
.ec-qty-btn{ flex:none; width:42px; border:1.5px solid var(--ec-border); background:#fcfaff; border-radius:11px; display:grid; place-items:center; color:var(--ec-ink); cursor:pointer; font-size:17px; line-height:1; transition:background .15s, border-color .15s, color .15s; }
.ec-qty-btn:hover{ background:var(--ec-primary-soft); border-color:var(--ec-primary); color:var(--ec-primary); }
.ec-qty-btn:active{ transform:scale(.94); }

/* Barre de filtres (au-dessus des tableaux / graphiques) */
.ec-filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.ec-filter-bar .ec-field{ margin-bottom:0; }
.ec-seg{ display:inline-flex; padding:4px; border-radius:999px; background:var(--ec-bg); border:1px solid var(--ec-border); gap:2px; flex-wrap:wrap; }
.ec-seg button{ border:0; background:transparent; padding:8px 15px; border-radius:999px; font-size:12.5px; font-weight:700; color:var(--ec-ink-soft); cursor:pointer; transition:background .15s,color .15s; }
.ec-seg button.active{ background:linear-gradient(135deg,var(--ec-primary),var(--ec-brand-magenta)); color:#fff; box-shadow:0 6px 14px rgba(124,45,158,.25); }
.ec-seg button:not(.active):hover{ background:#fff; color:var(--ec-primary); }

/* ---------- Tables ---------- */
.ec-table-wrap{ overflow-x:auto; border-radius:var(--ec-radius-lg); border:1px solid var(--ec-border); }
table.ec-table{ width:100%; border-collapse:collapse; background:#fff; min-width:520px; }
table.ec-table th{ text-align:left; padding:13px 16px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--ec-primary-dark); background:var(--ec-primary-soft); border-bottom:1px solid var(--ec-border); white-space:nowrap; }
table.ec-table td{ padding:13px 16px; font-size:14px; border-bottom:1px solid var(--ec-border); vertical-align:middle; }
table.ec-table tr:last-child td{ border-bottom:none; }
table.ec-table tbody tr{ transition:background .12s; }
table.ec-table tbody tr:hover{ background:#faf5fd; }

/* Colonne du nom (étudiant/formateur) figée au défilement horizontal, même
   quand elle n'est pas la toute première (ex. après une colonne N°) : elle
   défile normalement avec les colonnes qui la précèdent jusqu'à atteindre le
   bord gauche (left:0), puis s'y fixe -- comme si elle devenait la première
   colonne visible -- pendant que les colonnes suivantes continuent de
   défiler. Utile aussi bien sur mobile qu'en fenêtre étroite sur PC ;
   inoffensif tant que le tableau n'a pas besoin de défiler. */
table.ec-table th.ec-sticky-col,
table.ec-table td.ec-sticky-col{ position:sticky; left:0; z-index:2; }
table.ec-table th.ec-sticky-col{ background:var(--ec-primary-soft); }
table.ec-table td.ec-sticky-col{ background:#fff; }
table.ec-table tbody tr:hover td.ec-sticky-col{ background:#faf5fd; }
table.ec-table .ec-sticky-col-edge{ box-shadow:2px 0 4px rgba(15,17,24,.06); }

/* ---------- Alertes ---------- */
.ec-alert{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--ec-radius-md); font-size:14px; margin-bottom:14px; border:1px solid transparent; }
.ec-alert i{ font-size:17px; margin-top:1px; }
.ec-alert > div{ flex:1; min-width:0; }
.ec-alert-close{ flex:none; width:26px; height:26px; margin:-3px -4px 0 0; border:0; border-radius:50%; background:transparent; color:inherit; opacity:.6; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; transition:opacity .15s, background .15s; }
.ec-alert-close:hover{ opacity:1; background:rgba(0,0,0,.07); }
.ec-alert-success{ background:var(--ec-success-soft); color:#0f6b49; border-color:#bfe9d7; }
.ec-alert-danger{ background:var(--ec-danger-soft); color:#9c2d29; border-color:#f3c6c3; }
.ec-alert-info{ background:var(--ec-info-soft); color:#6b2179; border-color:#e3c3ec; }
.ec-alert-warning{ background:var(--ec-warning-soft); color:#8a5d05; border-color:#f0dba9; }

/* ---------- Auth / pages publiques ---------- */
.ec-auth{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:48px; background:#f5f6fa; }
.ec-auth-shell{ width:min(1200px,100%); min-height:650px; display:grid; grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr); overflow:hidden; background:#fff; border:1px solid var(--ec-border); border-radius:28px; box-shadow:0 22px 60px rgba(31,15,61,.12); }
.ec-auth-visual{ display:flex; align-items:center; justify-content:center; padding:64px; background:#fff; position:relative; }
.ec-auth-emblem{ display:block; width:min(360px,82%); max-height:410px; object-fit:contain; }
.ec-auth-copy{ display:none; }
.ec-auth-form{ display:flex; align-items:center; justify-content:center; padding:64px 70px 64px 42px; background:#fff; }
.ec-auth-card{ width:min(540px,100%); background:transparent; padding:0; border:0; border-radius:0; box-shadow:none; }
.ec-auth-card-logo{ display:none; width:52px; margin-bottom:18px; }
.ec-auth-card > .logo{ display:none; }
.ec-auth-card h1{ font-size:42px; line-height:1.08; margin:0 0 14px; }
.ec-auth-card p.lede{ color:var(--ec-ink-soft); font-size:16px; margin:0 0 28px; }
.ec-auth-foot{ text-align:center; margin-top:18px; font-size:13px; color:var(--ec-ink-soft); }
.ec-auth-foot a{ color:var(--ec-primary); font-weight:700; text-decoration:none; }
/* Compatibilité avec le formulaire candidat public, qui n'utilise pas le gabarit horizontal. */
.ec-auth > .ec-auth-form{ width:100%; min-height:calc(100vh - 96px); background:transparent; }
.ec-auth > .ec-auth-form .ec-auth-card{ padding:38px 34px; border:1px solid var(--ec-border); border-radius:var(--ec-radius-lg); box-shadow:var(--ec-shadow-md); }

@media (max-width:900px){
  .ec-auth{ display:block; min-height:100vh; padding:30px 18px; }
  .ec-auth-shell{ display:block; min-height:0; width:100%; overflow:visible; background:transparent; border:0; border-radius:0; box-shadow:none; }
  .ec-auth-visual{ display:none; }
  .ec-auth-form{ display:flex; min-height:calc(100vh - 60px); padding:0; background:transparent; }
  .ec-auth-card{ width:min(520px,100%); padding:38px 34px; border:1px solid var(--ec-border); border-radius:var(--ec-radius-lg); box-shadow:var(--ec-shadow-md); }
  .ec-auth-card-logo{ display:block; }
  .ec-auth-card > .logo{ display:none; }
}

@media (max-width:575.98px){
  .ec-auth{ padding:22px 14px; }
  .ec-auth-form{ min-height:calc(100vh - 44px); }
  .ec-auth-card{ padding:32px 26px; }
}

/* ---------- Public : accueil ---------- */
.ec-public-topbar{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--ec-border); }
.ec-public-topbar .row{ max-width:1180px; margin:auto; padding:16px 24px; display:flex; align-items:center; gap:18px; }
.ec-public-hero{ max-width:1180px; margin:auto; padding:76px 24px 40px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.ec-public-hero h1{ font-size:42px; line-height:1.12; margin:0 0 16px; max-width:16ch; }
.ec-public-hero p{ color:var(--ec-ink-soft); font-size:16.5px; line-height:1.7; max-width:52ch; margin:0 0 26px; }
.ec-public-visual{ background:radial-gradient(circle at 25% 15%,var(--ec-brand-magenta),var(--ec-brand-deep) 68%); border-radius:26px; padding:38px; color:#fff; text-align:center; box-shadow:var(--ec-shadow-md); position:relative; overflow:hidden; }
.ec-public-visual:before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 85%, rgba(217,165,62,.26), transparent 55%); }
.ec-public-visual img{ width:100%; max-height:220px; object-fit:contain; margin-bottom:18px; position:relative; z-index:1; }
.ec-public-visual h2, .ec-public-visual p{ position:relative; z-index:1; }
@media(max-width:900px){ .ec-public-hero{ grid-template-columns:1fr; padding-top:50px; } .ec-public-hero h1{ font-size:32px; max-width:none; } }

/* ---------- Sidebar mobile (offcanvas Bootstrap) ---------- */
@media (max-width:991.98px){
  .ec-topbar .ec-burger{ display:grid; }
  .ec-content{ padding:18px; }
}
.ec-offcanvas .offcanvas-body{ padding:0; }
.ec-offcanvas{ background:linear-gradient(190deg,var(--ec-sidebar-bg) 12%,var(--ec-sidebar-bg-2) 130%); }
.ec-offcanvas .ec-sidebar{ position:static; height:auto; width:100%; background:none; overflow:visible; }
.ec-offcanvas .ec-nav{ flex:none; min-height:auto; overflow-y:visible; }

/* Messagerie de classe : fil de discussion repliable */
.ec-mail-row{ border-bottom:1px solid var(--ec-border); }
.ec-mail-row:last-child{ border-bottom:none; }
.ec-mail-row summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px 6px; }
.ec-mail-row summary::-webkit-details-marker{ display:none; }
.ec-mail-row summary::after{ content:"+"; margin-left:auto; font-size:20px; color:var(--ec-ink-faint); transition:transform .15s; }
.ec-mail-row details[open] summary::after{ transform:rotate(45deg); }
.ec-mail-sender{ font-weight:700; font-size:13.5px; }
.ec-mail-date{ margin-left:auto; margin-right:10px; color:var(--ec-ink-faint); font-size:12.5px; white-space:nowrap; }
.ec-mail-body{ padding:4px 6px 20px 40px; font-size:14px; line-height:1.7; color:var(--ec-ink); }
.ec-mail-meta{ color:var(--ec-ink-faint); font-size:12.5px; margin-bottom:10px; }
.ec-compose-panel{ display:none; margin-top:20px; }
.ec-compose-panel:target{ display:block; }

/* Charts + répartition chiffrée */
.ec-chart-box{ position:relative; height:280px; }
.ec-chart-box.sm{ height:200px; }
.ec-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; }
.ec-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ec-ink-soft); }
.ec-legend i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.ec-breakdown{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.ec-breakdown-row{ display:flex; align-items:center; gap:10px; font-size:13px; }
.ec-breakdown-row .dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.ec-breakdown-row .label{ flex:1; color:var(--ec-ink-soft); }
.ec-breakdown-row .value{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--ec-ink); }
.ec-breakdown-row .pct{ color:var(--ec-ink-faint); font-size:12px; min-width:40px; text-align:right; }
.ec-breakdown-row.total{ border-top:1px solid var(--ec-border); padding-top:8px; margin-top:2px; }
.ec-breakdown-row.total .dot{ visibility:hidden; }
.ec-breakdown-row.total .label{ font-weight:800; color:var(--ec-ink); text-transform:uppercase; font-size:12px; letter-spacing:.03em; }
.ec-breakdown-row.total .value{ color:var(--ec-primary); }