/* =====================================================================
   MERIDIAN — Système de design premium (Étape 1 : fondations)
   Source : maquette fournie (theme.css) — extraction fidèle du système de
   design (tokens + composants), sans les données fictives de la maquette.

   STRUCTURE DE CE FICHIER (transition progressive, pas un big-bang) :
     1. Tokens Meridian (copie fidèle de la maquette)
     2. Alias de compatibilité (anciens noms de variables --c-*)
     3. Base (reset, typographie, scrollbar)
     4. Composants Meridian (.card-premium, .kpi-card, .table-premium,
        .badge-premium, .btn-premium, .sidebar, .topbar, .login-shell, etc.)
        + ajouts responsive mobile (absents de la maquette, ajoutés car le
        CDC exige mobile/tablette et la maquette ne couvre que 1080px/900px)
     5. PONT DE COMPATIBILITÉ — classes de l'habillage précédent
        (.app-sidebar, .app-topbar, .stat-card, .pipeline-*, .notif-*, ...)
        encore utilisées par les gabarits PHP existants tant que les Étapes
        2 à 4 n'ont pas propagé les classes Meridian dans chaque module.
        Chaque bloc sera retiré au fur et à mesure qu'il devient orphelin.
   ===================================================================== */

/* --- 1. Tokens Meridian (source : maquette) ---------------------------- */
:root{
  --navy:#0A1B33;
  --navy-2:#0F2440;
  --navy-3:#16304F;
  --offwhite:#F7F6F2;
  --gray-100:#EEF0F3;
  --gray-200:#E3E6EB;
  --gray-300:#D3D7DE;
  --gray-500:#8B92A0;
  --ink:#12151C;
  --ink-soft:#565C68;
  --gold:#B8965A;
  --gold-soft:#E7D9BC;
  --green:#1E8A5C;
  --green-bg:#E7F4EC;
  --red:#C1443A;
  --red-bg:#FBEAE8;
  --amber:#B07B1E;
  --amber-bg:#FBF1DE;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(10,27,51,.05);
  --shadow-md:0 10px 30px rgba(10,27,51,.07);
  --sidebar-w:264px;
  --sidebar-w-collapsed:80px;
  --topbar-h:68px;

  --bs-body-font-family:'Inter',-apple-system,'SF Pro Display','Segoe UI',sans-serif;
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--offwhite);
  --bs-border-color:var(--gray-200);
  --bs-primary:var(--navy);
  --bs-primary-rgb:10,27,51;
  --bs-link-color:var(--gold);
  --bs-border-radius:10px;
  --bs-border-radius-lg:var(--radius);
}

/* --- 2. Alias de compatibilité (anciens noms --c-*, utilisés par les
   gabarits pas encore migrés vers les classes Meridian) ------------------ */
:root{
  --c-bg: var(--offwhite);
  --c-surface: #FFFFFF;
  --c-surface-alt: var(--gray-100);
  --c-navy: var(--navy);
  --c-navy-light: var(--navy-2);
  --c-navy-50: var(--gray-100);
  --c-gold: var(--gold);
  --c-gold-soft: var(--gold-soft);
  --c-success: var(--green);
  --c-success-soft: var(--green-bg);
  --c-danger: var(--red);
  --c-danger-soft: var(--red-bg);
  --c-warning: var(--amber);
  --c-warning-soft: var(--amber-bg);
  --c-info: #2563A8;
  --c-info-soft: #E9F1FA;
  --c-border: var(--gray-200);
  --c-border-strong: var(--gray-300);
  --c-text: var(--ink);
  --c-text-secondary: var(--ink-soft);
  --c-text-muted: var(--gray-500);
  --c-text-on-navy: #F4F6FA;

  --font-sans: var(--bs-body-font-family);
  /* Échelle relevée par rapport à la maquette d'origine (jugée trop dense/petite à l'usage réel) */
  --text-xs: .8rem; --text-sm: .9rem; --text-base: 1rem; --text-md: 1.05rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.95rem; --text-3xl: 2.5rem;
  --tracking-wide: .04em;

  /* --- Échelle typographique hiérarchique (contraste net entre niveaux) --- */
  --fs-brand: 17px;
  --fs-page-title: 32px;
  --fs-page-subtitle: 14.5px;
  --fs-kpi-value: 40px;
  --fs-kpi-label: 13.5px;
  --fs-card-title: 16px;
  --fs-card-sub: 12.5px;
  --fs-nav-item: 14.5px;
  --fs-body: 14px;
  --fs-table-header: 11px;
  --fs-table-cell: 13.5px;
  --fs-badge: 11.5px;

  --shadow-xs: var(--shadow-sm);
  --shadow-lg: 0 20px 48px rgba(10,27,51,.16);
  --shadow-navy: 0 8px 24px rgba(10,27,51,.22);

  --radius-sm: 7px; --radius-md: 10px; --radius-lg: var(--radius); --radius-pill: 999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 200ms var(--ease);

  --sidebar-width: var(--sidebar-w);
  --sidebar-collapsed-width: var(--sidebar-w-collapsed);
  --topbar-height: var(--topbar-h);
}

/*
  Mode sombre : la maquette Meridian n'en prévoit pas. Le bloc [data-theme="dark"]
  précédent est retiré ici. Décision à valider — voir résumé de fin d'étape.
*/

/* --- 3. Base ------------------------------------------------------------ */
*{-webkit-font-smoothing:antialiased; box-sizing: border-box;}
body{background:var(--offwhite);color:var(--ink); font-family: var(--bs-body-font-family); font-size: var(--fs-body);}
a{text-decoration:none; color: var(--navy);}
a:hover{color: var(--gold);}
h1,h2,h3,h4,h5,h6{font-family:var(--bs-body-font-family); font-weight:600; letter-spacing:-.01em; color:var(--ink);}
small,.text-muted{color:var(--ink-soft) !important;}
::selection{background:var(--gold-soft); color:var(--navy);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:var(--gray-500);}

/* --- 4. Composants Meridian (ported depuis la maquette) ------------------ */

/* Layout shell */
.app-shell{display:flex;min-height:100vh;}
.main-shell{flex:1;display:flex;flex-direction:column;min-width:0;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:linear-gradient(180deg,var(--navy) 0%,#081729 100%);
  color:#fff;display:flex;flex-direction:column;padding:22px 16px;
  transition:width .3s ease;position:relative;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed);}
.sidebar.collapsed .label,
.sidebar.collapsed .group-title,
.sidebar.collapsed .brand-text,
.sidebar.collapsed .user-meta,
.sidebar.collapsed .nav-item .badge,
.sidebar.collapsed .search-wrap{display:none;}
.sidebar.collapsed .user-card{justify-content:center;}
.sidebar.collapsed .nav-item{justify-content:center;}

.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 22px;white-space:nowrap;}
.brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--gold) 0%,#8f7038 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-mark i,.brand-mark svg{color:var(--navy);font-size:20px;width:18px;height:18px;}
.brand-text .name{font-size:var(--fs-brand);font-weight:800;letter-spacing:.3px;color:#fff;}
.brand-text .tag{font-size:12.5px;color:rgba(255,255,255,.45);letter-spacing:.4px;}

.collapse-btn{
  position:absolute;top:28px;right:-12px;width:24px;height:24px;border-radius:50%;
  background:#fff;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--shadow-sm);z-index:5;
}
.collapse-btn i,.collapse-btn svg{color:var(--navy);font-size:15px;width:13px;height:13px;transition:transform .3s;}
.sidebar.collapsed .collapse-btn i,.sidebar.collapsed .collapse-btn svg{transform:rotate(180deg);}

.search-wrap{margin:4px 4px 22px;position:relative;}
.search-wrap input{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  border-radius:10px;padding:9px 12px 9px 34px;color:#fff;font-size:15px;font-family:inherit;
}
.search-wrap input::placeholder{color:rgba(255,255,255,.35);}
.search-wrap input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.09);box-shadow:none;}
.search-wrap i,.search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:16px;width:14px;height:14px;}

.nav-group{margin-bottom:20px;}
.group-title{font-size:12.5px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.32);padding:0 12px 8px;font-weight:600;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:rgba(255,255,255,.72);
  font-size:var(--fs-nav-item);font-weight:500;cursor:pointer;margin-bottom:2px;border-left:2.5px solid transparent;transition:.15s;
}
.nav-item i,.nav-item svg{font-size:19px;width:17px;height:17px;flex-shrink:0;stroke-width:1.75;}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff;}
.nav-item.active{background:rgba(184,150,90,.13);color:#fff;border-left-color:var(--gold);}
.nav-item.disabled{color:rgba(255,255,255,.3);cursor:not-allowed;}
.nav-item .badge{margin-left:auto;background:var(--gold);color:var(--navy);font-size:12px;font-weight:700;}

.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);}
.user-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;}
.user-card:hover{background:rgba(255,255,255,.05);}
.avatar{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#3a5a8a,#16304f);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;}
.user-meta .uname{font-size:15px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-meta .urole{font-size:13px;color:rgba(255,255,255,.4);}

/* Topbar */
.topbar{
  height:var(--topbar-h);flex-shrink:0;display:flex;align-items:center;gap:20px;padding:0 28px;
  background:rgba(247,246,242,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200);
  position:sticky;top:0;z-index:15;
}
.crumb{font-size:14.5px;color:var(--ink-soft);white-space:nowrap;}
.crumb b{color:var(--ink);font-weight:600;}
.global-search{flex:1;max-width:420px;position:relative;}
.global-search input{
  width:100%;border:1px solid var(--gray-200);background:#fff;border-radius:10px;padding:8px 12px 8px 34px;
  font-size:15px;font-family:inherit;color:var(--ink);
}
.global-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,150,90,.12);}
.global-search i,.global-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--gray-500);font-size:16px;width:14px;height:14px;}
.top-actions{display:flex;align-items:center;gap:6px;margin-left:auto;}
.icon-btn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--ink-soft);border:none;background:transparent;}
.icon-btn:hover{background:var(--gray-100);color:var(--ink);}
.icon-btn i,.icon-btn svg{font-size:20px;width:18px;height:18px;}
.icon-btn.disabled{opacity:.4;cursor:not-allowed;}
.dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--red);border:1.5px solid var(--offwhite);}
.divider-v{width:1px;height:24px;background:var(--gray-200);margin:0 6px;}
.dt-block{font-size:13.5px;color:var(--ink-soft);text-align:right;line-height:1.3;white-space:nowrap;}
.dt-block b{color:var(--ink);display:block;font-size:14.5px;font-weight:600;}

.mobile-menu-btn{display:none;}

/* Content */
.content{padding:28px 32px 48px;max-width:1400px;width:100%;margin:0 auto;}

/* Titres de page (ex: "Bonjour, {prénom}") — unifiés, plus aucune taille en inline dans les gabarits */
.page-title{font-size:var(--fs-page-title);font-weight:800;letter-spacing:-.5px;margin:0;color:var(--ink);}
.page-subtitle{font-size:var(--fs-page-subtitle);font-weight:400;color:var(--ink-soft);margin-top:3px;}

/* Cards / KPI */
.card-premium{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:.2s;}
.card-premium:hover{box-shadow:var(--shadow-md);}
.kpi-card{padding:18px 20px;}
.kpi-card:hover{transform:translateY(-2px);}
.kpi-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;}
.kpi-icon i,.kpi-icon svg{font-size:19px;width:17px;height:17px;}
.kpi-icon.navy{background:var(--navy);color:var(--gold-soft);}
.kpi-icon.gold{background:var(--gold-soft);color:#7a5f34;}
.kpi-icon.green{background:var(--green-bg);color:var(--green);}
.kpi-trend{font-size:13.5px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px;}
.kpi-trend i,.kpi-trend svg{font-size:14px;width:12px;height:12px;}
.kpi-trend.up{color:var(--green);background:var(--green-bg);}
.kpi-trend.down{color:var(--red);background:var(--red-bg);}
.kpi-trend.flat{color:var(--gray-500);background:var(--gray-100);}
.kpi-label{font-size:var(--fs-kpi-label);font-weight:600;color:var(--ink-soft);margin-bottom:4px;}
.kpi-value{font-size:var(--fs-kpi-value);font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.1;}

.card-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 4px;}
.card-head h3{font-size:var(--fs-card-title);font-weight:700;margin:0;}
.card-head .sub{font-size:var(--fs-card-sub);font-weight:400;color:var(--ink-soft);margin-top:2px;}
.card-link{font-size:14px;color:var(--gold);font-weight:600;cursor:pointer;}
.card-body-premium{padding:14px 20px 20px;}

/* Tables */
.table-premium{width:100%;border-collapse:collapse;margin:0;}
.table-premium th{text-align:left;font-size:var(--fs-table-header);text-transform:uppercase;letter-spacing:.5px;color:var(--gray-500);padding:8px 10px;font-weight:700;border-bottom:1px solid var(--gray-200);}
.table-premium td{padding:12px 10px;font-size:var(--fs-table-cell);font-weight:400;border-bottom:1px solid var(--gray-100);vertical-align:middle;}
.table-premium td.text-end{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.table-premium tr:last-child td{border-bottom:none;}
.table-premium tbody tr:hover{background:var(--gray-100);}
.ref{font-weight:600;color:var(--ink);}
.route{color:var(--ink-soft);font-size:14.5px;}

/* Badges (le rendu doit rester surchargeable par style="background-color:..."
   pour les couleurs dynamiques : statuts_dossier.couleur, etc. — pas de !important ici) */
.badge-premium{font-size:var(--fs-badge);font-weight:700;padding:4px 10px;border-radius:20px;display:inline-block;}
.badge-transit{background:#EAF0FA;color:#2A4D8A;}
.badge-douane{background:var(--amber-bg);color:var(--amber);}
.badge-livre{background:var(--green-bg);color:var(--green);}
.badge-retard{background:var(--red-bg);color:var(--red);}

/* Teintes sémantiques réutilisables pour badge-premium (états statiques :
   actif/inactif, nature honoraire/débours, statuts fixes...). Les couleurs
   dynamiques (statuts_dossier.couleur) continuent d'utiliser style="" inline. */
.badge-premium.tone-success{background:var(--green-bg);color:var(--green);}
.badge-premium.tone-danger{background:var(--red-bg);color:var(--red);}
.badge-premium.tone-warning{background:var(--amber-bg);color:var(--amber);}
.badge-premium.tone-info{background:#E9F1FA;color:#2563A8;}
.badge-premium.tone-neutral{background:var(--gray-100);color:var(--ink-soft);}
.badge-premium.tone-gold{background:var(--gold-soft);color:#7a5f34;}

/* Vessels / timeline / calendar (composants portés ; le mini-calendrier n'est
   pas utilisé dans l'app tant qu'aucune donnée réelle ne l'alimente) */
.vessel-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--gray-100);}
.vessel-item:last-child{border-bottom:none;}
.vessel-ico{width:36px;height:36px;border-radius:9px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--navy);}
.vessel-ico i,.vessel-ico svg{width:16px;height:16px;}
.vessel-name{font-size:15px;font-weight:600;}
.vessel-route{font-size:13.5px;color:var(--ink-soft);}
.vessel-status{margin-left:auto;font-size:13px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;}

.timeline-item{display:flex;gap:12px;padding:0 0 16px;position:relative;}
.timeline-item:last-child{padding-bottom:0;}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:5px;flex-shrink:0;position:relative;}
.tl-line{position:absolute;left:3.5px;top:14px;bottom:-2px;width:1px;background:var(--gray-200);}
.timeline-item:last-child .tl-line{display:none;}
.tl-text{font-size:14.5px;color:var(--ink);line-height:1.4;}
.tl-time{font-size:13px;color:var(--gray-500);margin-top:2px;}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;}
.cal-grid .dow{font-size:12px;color:var(--gray-500);font-weight:600;padding-bottom:4px;}
.cal-grid .day{font-size:13.5px;padding:6px 0;border-radius:7px;color:var(--ink);cursor:pointer;position:relative;}
.cal-grid .day:hover{background:var(--gray-100);}
.cal-grid .day.muted{color:var(--gray-300);}
.cal-grid .day.today{background:var(--navy);color:#fff;font-weight:600;}
.cal-grid .day.event::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:3px;height:3px;border-radius:50%;background:var(--gold);}

/* Buttons */
.btn-premium{
  background:var(--navy);color:#fff;border:none;padding:10px 18px;border-radius:10px;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);transition:.15s;
}
.btn-premium:hover{background:#081729;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn-premium i,.btn-premium svg{color:var(--gold-soft);font-size:17px;width:15px;height:15px;}
.btn-premium:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-outline-premium{
  background:#fff;color:var(--ink);border:1px solid var(--gray-300);padding:10px 18px;border-radius:10px;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s;
}
.btn-outline-premium:hover{border-color:var(--navy);background:var(--gray-100);}
.btn-outline-premium:disabled{opacity:.5;cursor:not-allowed;}

/* Variantes compactes (actions de tableau) et teintes destructives/attention */
.btn-premium.sm,.btn-outline-premium.sm{padding:6px 12px;font-size:12.5px;border-radius:8px;}
.icon-btn.sm{width:30px;height:30px;}
.icon-btn.sm i,.icon-btn.sm svg{font-size:15px;width:15px;height:15px;}
.btn-outline-premium.tone-danger{color:var(--red);border-color:#EBC7C7;}
.btn-outline-premium.tone-danger:hover{background:var(--red-bg);border-color:var(--red);}
.btn-outline-premium.tone-warning{color:var(--amber);border-color:#E9D3A6;}
.btn-outline-premium.tone-warning:hover{background:var(--amber-bg);border-color:var(--amber);}
.btn-premium.tone-success{background:var(--green);}
.btn-premium.tone-success:hover{background:#166b48;}
.btn-premium.tone-danger{background:var(--red);}
.btn-premium.tone-danger:hover{background:#9c372f;}

/* Skeleton / Toast / Empty state (compatibles avec la structure déjà en
   place dans l'app : .empty-icon/.empty-title/.empty-desc, en plus des
   sélecteurs bruts i/h4/p de la maquette) */
.skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 37%,var(--gray-100) 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:8px;}
@keyframes skeleton-loading{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.toast-premium{background:var(--navy);color:#fff;border-radius:10px;padding:12px 16px;font-size:15px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:10px;}
.toast-premium i,.toast-premium svg{color:var(--gold-soft);}
.empty-state{text-align:center;padding:48px 20px;color:var(--ink-soft);}
.empty-state > i,.empty-state > svg{font-size:36px;width:34px;height:34px;color:var(--gray-300);margin-bottom:10px;}
.empty-state h4{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.empty-state p{font-size:14.5px;}
.empty-state .empty-icon{width:52px;height:52px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.empty-state .empty-icon i,.empty-state .empty-icon svg{width:22px;height:22px;stroke-width:1.5;color:var(--gray-500);margin-bottom:0;}
.empty-state .empty-title{font-size:15px;font-weight:600;color:var(--ink-soft);}
.empty-state .empty-desc{font-size:13.5px;margin-top:.25rem;}

/* Login */
.login-shell{min-height:100vh;display:flex;}
.login-visual{
  flex:1.1;position:relative;background:linear-gradient(160deg,var(--navy) 0%,#081729 60%,#040c17 100%);
  color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:56px;overflow:hidden;
}
.login-visual::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%, rgba(184,150,90,.10) 0, transparent 45%),
                    radial-gradient(circle at 80% 75%, rgba(184,150,90,.08) 0, transparent 45%);
}
.login-visual .content-top,.login-visual .content-bottom{position:relative;z-index:1;}
.login-route{position:relative;z-index:1;margin:auto 0;}
.login-form-side{flex:1;display:flex;align-items:center;justify-content:center;background:var(--offwhite);padding:40px;}
.login-card{width:100%;max-width:380px;}
.glass-input-group{position:relative;margin-bottom:16px;}
.glass-input-group label{font-size:14.5px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:6px;}
.glass-input-group input{
  width:100%;border:1px solid var(--gray-300);background:#fff;border-radius:10px;padding:11px 40px 11px 14px;
  font-size:16px;font-family:inherit;color:var(--ink);
}
.glass-input-group input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,150,90,.12);}
.glass-input-group i,.glass-input-group svg{position:absolute;right:14px;top:38px;color:var(--gray-500);cursor:pointer;font-size:18px;width:16px;height:16px;}

@media(max-width:1080px){
  .grid-2col{grid-template-columns:1fr!important;}
}
@media(max-width:900px){
  .login-visual{display:none;}
}

/* --- Ajouts responsive mobile/tablette (au-delà de la maquette, requis par
   le CDC initial — la maquette ne couvre que 1080px/900px) --------------- */
@media (max-width: 991.98px){
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:30;
    transform:translateX(-100%);
    transition:transform .3s ease;
    box-shadow: var(--shadow-md);
  }
  .sidebar.mobile-open{transform:translateX(0);}
  .collapse-btn{display:none;}
  .global-search{display:none;}
  .mobile-menu-btn{display:flex !important;}
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(10,27,51,.45); z-index:29;}
  .sidebar-backdrop.show{display:block;}
  .content{padding:20px 16px 32px;}
  .topbar{padding:0 16px; gap:12px;}
}
@media (max-width: 575.98px){
  .dt-block{display:none;}
}

/* Échelle typographique réduite sous 768px : l'échelle desktop (titre 32px, KPI 40px)
   est trop imposante sur mobile et casse la mise en page — on la resserre sans changer
   la hiérarchie relative entre niveaux. */
@media (max-width: 767.98px){
  :root{
    --fs-page-title: 24px;
    --fs-kpi-value: 28px;
    --fs-brand: 15px;
  }
}

/* =====================================================================
   5. PONT DE COMPATIBILITÉ — classes de l'habillage précédent, encore
   utilisées par les gabarits PHP existants. Retirées progressivement à
   mesure que les Étapes 2 à 4 migrent chaque page vers les classes
   Meridian ci-dessus.
   ===================================================================== */

/* Cards / boutons / tableaux / badges / formulaires / alertes Bootstrap
   natifs (utilisés par tous les modules tant qu'ils n'ont pas été migrés
   vers .card-premium/.btn-premium/.table-premium/.badge-premium à l'Étape 4) */
.card { background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-base); }
.card:hover { box-shadow: var(--shadow-sm); }
.card-header { background-color: transparent; border-bottom: 1px solid var(--c-border); padding: 1rem 1.25rem; font-size: var(--text-md); font-weight: 600; }
.card-body { padding: 1.25rem; }

.btn { font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md); padding: .5rem 1rem; transition: all var(--transition-fast); border: 1px solid transparent; }
.btn:focus { box-shadow: 0 0 0 3px var(--c-navy-50); }
.btn-sm { padding: .3rem .65rem; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-primary { background-color: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--c-navy-light); border-color: var(--c-navy-light); color: #fff; box-shadow: var(--shadow-navy); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary { color: var(--c-navy); border-color: var(--c-border-strong); background: transparent; }
.btn-outline-primary:hover { background-color: var(--c-navy-50); border-color: var(--c-navy); color: var(--c-navy); }
.btn-outline-secondary { color: var(--c-text-secondary); border-color: var(--c-border-strong); }
.btn-outline-secondary:hover { background-color: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-text-muted); }
.btn-success { background-color: var(--c-success); border-color: var(--c-success); }
.btn-outline-danger { color: var(--c-danger); border-color: #EBC7C7; }
.btn-outline-danger:hover { background-color: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); }
.btn-outline-warning { color: var(--c-warning); border-color: #E9D3A6; }
.btn-outline-warning:hover { background-color: var(--c-warning-soft); }
.btn-link { color: var(--c-text-secondary); font-weight: 500; }
.btn-link:hover { color: var(--c-navy); }
.btn:disabled, .btn.disabled { opacity: .45; }

.badge { font-weight: 600; font-size: var(--text-xs); letter-spacing: .02em; padding: .35em .65em; border-radius: var(--radius-pill); }
.badge.bg-primary   { background-color: var(--c-navy-50) !important; color: var(--c-navy) !important; }
.badge.bg-secondary { background-color: var(--c-surface-alt) !important; color: var(--c-text-secondary) !important; border: 1px solid var(--c-border); }
.badge.bg-success   { background-color: var(--c-success-soft) !important; color: var(--c-success) !important; }
.badge.bg-danger    { background-color: var(--c-danger-soft) !important; color: var(--c-danger) !important; }
.badge.bg-warning   { background-color: var(--c-warning-soft) !important; color: var(--c-warning) !important; }
.badge.bg-info      { background-color: var(--c-info-soft) !important; color: var(--c-info) !important; }

.table { color: var(--c-text); --bs-table-bg: transparent; }
.table > thead { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--c-text-muted); }
.table > thead > tr > th { border-bottom: 1px solid var(--c-border); font-weight: 600; padding: .7rem .9rem; background: transparent; }
.table > tbody > tr > td { padding: .8rem .9rem; border-bottom: 1px solid var(--c-border); vertical-align: middle; font-size: var(--text-sm); }
.table-hover > tbody > tr:hover > * { background-color: var(--c-surface-alt); }
.table > :not(caption) > * > * { box-shadow: none; }

.form-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--c-text-secondary); margin-bottom: .4rem; }
.form-control, .form-select { background-color: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); padding: .55rem .8rem; font-size: var(--text-sm); color: var(--c-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-control:focus, .form-select:focus { border-color: var(--c-navy); box-shadow: 0 0 0 3px var(--c-navy-50); }
.form-control::placeholder { color: var(--c-text-muted); }
.form-check-input { border-color: var(--c-border-strong); }
.form-check-input:checked { background-color: var(--c-navy); border-color: var(--c-navy); }
.input-group-text { background-color: var(--c-surface-alt); border-color: var(--c-border-strong); color: var(--c-text-secondary); }

.alert { border: 1px solid var(--c-border); border-left: 3px solid var(--c-text-muted); border-radius: var(--radius-md); background-color: var(--c-surface); font-size: var(--text-sm); box-shadow: var(--shadow-xs); }
.alert-success { border-left-color: var(--c-success); }
.alert-danger  { border-left-color: var(--c-danger); }
.alert-warning { border-left-color: var(--c-warning); }
.alert-info    { border-left-color: var(--c-info); }

.breadcrumb { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--c-text-muted); margin-bottom: 1.25rem; }
.breadcrumb-item a { color: var(--c-text-muted); }
.breadcrumb-item a:hover { color: var(--c-navy); }
.breadcrumb-item.active { color: var(--c-text-secondary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--c-border-strong); }

.pagination .page-link { border: none; color: var(--c-text-secondary); font-size: var(--text-sm); border-radius: var(--radius-sm); margin: 0 2px; }
.pagination .page-item.active .page-link { background-color: var(--c-navy); color: #fff; }
.pagination .page-link:hover { background-color: var(--c-surface-alt); color: var(--c-navy); }

.nav-pills .nav-link { color: var(--c-text-secondary); font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-pill); padding: .4rem 1rem; }
.nav-pills .nav-link.active { background-color: var(--c-navy); color: #fff; }

.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--c-border); padding: 1.1rem 1.4rem; }
.modal-body { padding: 1.4rem; }
.modal-footer { border-top: 1px solid var(--c-border); padding: 1rem 1.4rem; }

.dropdown-menu { border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: .4rem; }
.dropdown-item { border-radius: var(--radius-sm); font-size: var(--text-sm); padding: .5rem .7rem; }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--c-surface-alt); }

.list-group-item { border-color: var(--gray-100); font-size: var(--fs-table-cell); padding: .7rem .9rem; }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--gray-100); color: var(--ink); }

/* Ancienne coquille sidebar/topbar (remplacée par .sidebar/.topbar Meridian
   à l'Étape 2 — conservée le temps que layout_header.php soit reconstruit) */
#wrapper { min-height: 100vh; }
.app-sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background: linear-gradient(180deg, var(--c-navy) 0%, #081930 100%); color: var(--c-text-on-navy); min-height: 100vh; display: flex; flex-direction: column; position: sticky; top: 0; transition: width var(--transition-base); z-index: 20; }
.app-sidebar.collapsed { width: var(--sidebar-collapsed-width); min-width: var(--sidebar-collapsed-width); }
.app-sidebar.collapsed .sidebar-label, .app-sidebar.collapsed .sidebar-group-title, .app-sidebar.collapsed .sidebar-search, .app-sidebar.collapsed .sidebar-brand-text, .app-sidebar.collapsed .sidebar-user-meta { display: none !important; }
.app-sidebar.collapsed .sidebar-user { justify-content: center; }
.app-sidebar.collapsed .nav-link-app { justify-content: center; }
.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1.25rem 1.15rem; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.sidebar-brand-mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--c-gold), #8F6C34); display: flex; align-items: center; justify-content: center; color: var(--c-navy); flex-shrink: 0; }
.sidebar-brand-text { font-weight: 700; font-size: var(--text-md); line-height: 1.1; }
.sidebar-brand-text small { display: block; font-weight: 400; font-size: var(--text-xs); color: rgba(255,255,255,.55); text-transform: uppercase; }
.sidebar-search { padding: .9rem 1rem .3rem; position: relative; }
.sidebar-search input { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md); color: #fff; font-size: var(--text-sm); padding: .5rem .7rem .5rem 2.1rem; }
.sidebar-search input::placeholder { color: rgba(255,255,255,.4); }
.sidebar-search svg { position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); opacity: .5; width: 15px; height: 15px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem .7rem 1rem; }
.sidebar-group-title { font-size: var(--text-xs); text-transform: uppercase; color: rgba(255,255,255,.38); padding: 1rem .6rem .35rem; font-weight: 600; }
.nav-link-app { display: flex; align-items: center; gap: .75rem; padding: .58rem .7rem; border-radius: var(--radius-md); color: rgba(255,255,255,.72); font-size: var(--text-sm); font-weight: 500; margin-bottom: 2px; transition: background var(--transition-fast); position: relative; }
.nav-link-app svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; }
.nav-link-app:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-link-app.active { background: rgba(255,255,255,.1); color: #fff; }
.nav-link-app.active::before { content: ''; position: absolute; left: -0.7rem; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: var(--c-gold); border-radius: var(--radius-pill); }
.nav-link-app.disabled { color: rgba(255,255,255,.32); cursor: not-allowed; }
.nav-link-app .soon-badge { margin-left: auto; font-size: 9.5px; text-transform: uppercase; background: rgba(255,255,255,.08); padding: .15rem .4rem; border-radius: var(--radius-pill); font-weight: 600; }
.sidebar-user { display: flex; align-items: center; gap: .65rem; padding: .9rem 1rem; border-top: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.sidebar-user:hover { background: rgba(255,255,255,.04); }
.avatar-initials { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--c-gold), #8F6C34); color: var(--c-navy); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; }
.sidebar-user-meta { line-height: 1.2; overflow: hidden; }
.sidebar-user-meta .name { font-size: var(--text-sm); font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-meta .role { font-size: var(--text-xs); color: rgba(255,255,255,.5); }
.sidebar-collapse-btn { border: none; background: rgba(255,255,255,.06); color: rgba(255,255,255,.6); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 1.4rem; right: -13px; z-index: 21; }
.sidebar-collapse-btn:hover { background: var(--c-gold); color: var(--c-navy); }
.sidebar-collapse-btn svg { width: 14px; height: 14px; transition: transform var(--transition-base); }
.app-sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: var(--topbar-height); background: rgba(255,255,255,.72); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem; position: sticky; top: 0; z-index: 15; }
.topbar-search { position: relative; width: 340px; max-width: 40vw; }
.topbar-search svg { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--c-text-muted); }
.topbar-search input { width: 100%; background: var(--c-surface-alt); border: 1px solid transparent; border-radius: var(--radius-pill); padding: .5rem .8rem .5rem 2.3rem; font-size: var(--text-sm); color: var(--c-text); }
.topbar-search input:focus { outline: none; border-color: var(--c-border-strong); background: var(--c-surface); }
.topbar-search kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--c-text-muted); background: var(--c-surface); border: 1px solid var(--c-border); padding: .1rem .35rem; border-radius: 4px; }
.topbar-actions { display: flex; align-items: center; gap: .35rem; }
.topbar-icon-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-text-secondary); border: none; background: transparent; position: relative; transition: background var(--transition-fast); }
.topbar-icon-btn:hover { background: var(--c-surface-alt); color: var(--c-navy); }
.topbar-icon-btn svg { width: 18px; height: 18px; }
.topbar-icon-btn.disabled { opacity: .4; cursor: not-allowed; }
.topbar-badge-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-danger); border: 2px solid var(--c-surface); }
.topbar-clock { font-size: var(--text-xs); color: var(--c-text-muted); text-align: right; line-height: 1.2; white-space: nowrap; }
.topbar-clock .date { text-transform: capitalize; }
.topbar-clock .time { font-weight: 600; color: var(--c-text-secondary); font-variant-numeric: tabular-nums; }
.notif-panel { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-item { display: block; padding: .7rem .5rem; border-bottom: 1px solid var(--c-border); }
.notif-item:last-child { border-bottom: none; }
.notif-item .titre { font-size: var(--text-sm); font-weight: 600; color: var(--c-text); }
.notif-item .message { font-size: var(--text-xs); color: var(--c-text-secondary); }
.notif-item .date { font-size: 10.5px; color: var(--c-text-muted); }
.notif-item.non-lue { background: var(--c-navy-50); border-radius: var(--radius-sm); }
.page-main { padding: 1.75rem; flex: 1; }

/* Ancien dashboard (.stat-card...) — remplacé par .kpi-card à l'Étape 3 */
.stat-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-xs); transition: transform var(--transition-base); position: relative; overflow: hidden; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.stat-card .stat-icon svg { width: 19px; height: 19px; stroke-width: 1.75; }
.stat-card .stat-label { font-size: var(--text-xs); text-transform: uppercase; color: var(--c-text-muted); font-weight: 600; }
.stat-card .stat-value { font-size: var(--text-2xl); font-weight: 700; color: var(--c-text); margin-top: .15rem; }
.stat-card .stat-trend { font-size: var(--text-xs); font-weight: 600; margin-top: .4rem; display: flex; align-items: center; gap: .25rem; }
.stat-card .stat-trend.up { color: var(--c-success); }
.stat-card .stat-trend.down { color: var(--c-danger); }
.stat-card .stat-trend.flat { color: var(--c-text-muted); }
.icon-tint-navy { background: var(--c-navy-50); color: var(--c-navy); }
.icon-tint-gold { background: var(--c-gold-soft); color: var(--c-gold); }
.icon-tint-success { background: var(--c-success-soft); color: var(--c-success); }
.icon-tint-info { background: var(--c-info-soft); color: var(--c-info); }
.icon-tint-warning { background: var(--c-warning-soft); color: var(--c-warning); }
.activity-item { display: flex; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--c-border); }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-dot svg { width: 14px; height: 14px; }
.activity-text { font-size: var(--text-sm); }
.activity-meta { font-size: 11px; color: var(--c-text-muted); }

/* Pipeline de statuts (Module 5B) — logique dynamique inchangée, restylée aux tokens Meridian */
.pipeline-statuts { display: flex; overflow-x: auto; padding: 1.25rem .5rem .5rem; }
.pipeline-etape { flex: 1 0 110px; min-width: 100px; text-align: center; position: relative; padding-top: 2px; }
.pipeline-etape:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 50%; width: 100%; height: 2px; background-color: var(--c-border); z-index: 0; }
.pipeline-etape.pipeline-complete:not(:last-child)::after { background-color: var(--c-success); }
.pipeline-cercle { width: 42px; height: 42px; border-radius: 50%; background-color: var(--c-surface); border: 2px solid var(--c-border-strong); color: var(--c-text-muted); display: flex; align-items: center; justify-content: center; margin: 0 auto .5rem; position: relative; z-index: 1; font-weight: 700; transition: all var(--transition-base); }
.pipeline-complete .pipeline-cercle { color: #fff; border-color: transparent; }
.pipeline-courant .pipeline-cercle { width: 52px; height: 52px; color: #fff; font-size: 1.05rem; box-shadow: var(--shadow-md); border-color: transparent; }
.pipeline-libelle { font-size: var(--text-xs); color: var(--c-text-muted); }
.pipeline-courant .pipeline-libelle { font-weight: 700; color: var(--c-text); }

/* Ancien écran de connexion — remplacé à l'Étape 5 */
.login-input-group { position: relative; }
.login-input-group svg.leading { position: absolute; left: .85rem; top: 42px; width: 16px; height: 16px; color: var(--c-text-muted); }
.login-input-group .form-control { padding-left: 2.4rem; }
.login-input-group .toggle-visibility { position: absolute; right: .6rem; top: 38px; background: none; border: none; color: var(--c-text-muted); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.login-input-group .toggle-visibility:hover { color: var(--c-navy); background: var(--c-surface-alt); }
.auth-stub-row { display: flex; gap: .6rem; }
.auth-stub-btn { flex: 1; border: 1px solid var(--c-border-strong); background: var(--c-surface); border-radius: var(--radius-md); padding: .55rem; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: var(--text-xs); color: var(--c-text-muted); cursor: not-allowed; position: relative; }
.auth-stub-btn svg { width: 15px; height: 15px; }
.glass-panel { background: rgba(255,255,255,.08); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); }

/* Utilitaires génériques conservés */
.text-gold { color: var(--gold) !important; }
.bg-surface-alt { background-color: var(--c-surface-alt) !important; }
.fw-semibold { font-weight: 600 !important; }
.rounded-xl { border-radius: var(--radius-lg) !important; }
.fade-in-up { animation: fadeInUp var(--transition-base) both; }

/* ===== Portail client (Module 16) — layout séparé du back-office, même charte ===== */
.portail-shell { min-height: 100vh; background: var(--offwhite); display: flex; flex-direction: column; }
.portail-topbar { background: var(--navy); color: #fff; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.portail-brand { display: flex; align-items: center; gap: 12px; }
.portail-brand-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--gold) 0%, #8f7038 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portail-brand-mark i { width: 20px; height: 20px; color: var(--navy); }
.portail-brand-logo { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #fff; }
.portail-brand-text { display: flex; flex-direction: column; gap: 4px; }
.portail-brand-nom { font-weight: 800; font-size: 15px; color: #fff; letter-spacing: .2px; white-space: nowrap; }
.portail-titre { font-size: 11.5px; font-weight: 700; color: var(--navy); background: var(--gold); padding: 3px 11px; border-radius: var(--radius-pill); letter-spacing: .2px; white-space: nowrap; align-self: flex-start; }
.portail-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.portail-nav a, .portail-nav-logout-form button, .portail-nav-lang-btn { color: rgba(255, 255, 255, .8); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; }
.portail-nav a:hover, .portail-nav-logout-form button:hover, .portail-nav-lang-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.portail-nav a.active { background: rgba(184, 150, 90, .18); color: #fff; }
.portail-nav-logout-form { margin: 0; }
.portail-content { flex: 1; padding: 28px; max-width: 1100px; width: 100%; margin: 0 auto; }
.portail-footer { text-align: center; font-size: 11.5px; color: var(--gray-500); padding: 18px; }
@media (max-width: 767px) {
    .portail-topbar { padding: 12px 16px; justify-content: center; text-align: center; }
    .portail-brand { width: 100%; justify-content: center; }
    .portail-nav { width: 100%; justify-content: center; }
    .portail-nav a { padding: 8px 10px; font-size: 12.5px; }
    .portail-content { padding: 16px; }
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }