/* ==========================================================================
   JS — Design System
   Direction artistique : "Institutionnel jeunesse"
   Surfaces plates, bordures fines, espacement précis. Aucun gradient.
   ========================================================================== */

/* ── 1. Tokens de couleur ─────────────────────────────────────────────────── */

:root {
  /* Identité souveraine — vert émeraude mauritanien */
  --color-souverain: #1A7A55;
  --color-souverain-moyen: #156647;
  --color-souverain-fonce: #0F4D35;
  --color-souverain-clair: #C2E8D8;
  --color-souverain-tres-clair: #E8F7F1;

  /* Fond et surfaces — papier administratif */
  --color-sable: #F7F3EB;
  --color-sable-fonce: #EEE9DE;
  --color-surface: #FFFFFF;
  --color-surface-elevee: #FDFBF6;

  /* Or et cuivre — intemporel */
  --color-or: #B8921F;
  --color-or-clair: #F2E4B0;
  --color-or-pale: #FBF5E0;

  /* Accentuation CTA — WCAG AA (ratio 4.6:1 sur blanc) */
  --color-corail: #C85A35;
  --color-corail-clair: #F9DDD4;
  --color-corail-fonce: #A84728;

  /* Texte — éditorial premium */
  --color-encre: #17263A;
  --color-encre-moyen: #3E5166;
  --color-brume: #7A8E9E;
  --color-brume-claire: #C5D0DA;

  /* États sémantiques */
  --color-succes: #22C55E;
  --color-succes-fond: #DCFCE7;
  --color-attention: #F59E0B;
  --color-attention-fond: #FEF3C7;
  --color-danger: #DC2626;
  --color-danger-fond: #FEE2E2;
  --color-info: #2563EB;
  --color-info-fond: #DBEAFE;
  --color-neutre: #6B7280;
  --color-neutre-fond: #F3F4F6;

  /* États de dossier FSM */
  --etat-draft: var(--color-neutre);
  --etat-draft-fond: var(--color-neutre-fond);
  --etat-submitted: var(--color-info);
  --etat-submitted-fond: var(--color-info-fond);
  --etat-under-review: #6366F1;
  --etat-under-review-fond: #E0E7FF;
  --etat-complement-requested: var(--color-attention);
  --etat-complement-requested-fond: var(--color-attention-fond);
  --etat-recognized: var(--color-succes);
  --etat-recognized-fond: var(--color-succes-fond);
  --etat-active: var(--color-souverain);
  --etat-active-fond: var(--color-souverain-clair);
  --etat-rejected: var(--color-danger);
  --etat-rejected-fond: var(--color-danger-fond);
  --etat-suspended: #D97706;
  --etat-suspended-fond: #FED7AA;
  --etat-dissolved: #4B5563;
  --etat-dissolved-fond: var(--color-neutre-fond);

  /* ── 2. Typographie ───────────────────────────────────────────────────── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic: 'Tajawal', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Échelle typographique */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-display: 52px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-heading: 1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* Letter spacing éditorial */
  --ls-tight:     -0.02em;
  --ls-editorial: -0.01em;
  --ls-normal:     0;
  --ls-wide:       0.04em;
  --ls-wider:      0.08em;

  /* ── 3. Espacements ───────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── 4. Rayons et bordures ────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --border-default: 1px solid var(--color-brume-claire);
  --border-strong: 1px solid var(--color-encre-moyen);

  /* ── 5. Ombres minimalistes ───────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(31, 41, 55, 0.04);
  --shadow-sm: 0 1px 3px rgba(31, 41, 55, 0.06), 0 1px 2px rgba(31, 41, 55, 0.04);
  --shadow-md: 0 2px 8px rgba(31, 41, 55, 0.08);

  /* ── 6. Transitions ───────────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ── RTL: basculement Tajawal ─────────────────────────────────────────────── */
:lang(ar),
[dir="rtl"] {
  --font-body: 'Tajawal', sans-serif;
}

/* ── 7. Reset et base ─────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-encre);
  background-color: var(--color-sable);
  margin: 0;
}

/* ── 8. Typographie ───────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-encre);
  margin: 0;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-base); }

p { margin: 0; }

a {
  color: var(--color-corail);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-corail-fonce); }

code, pre, .font-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Texte arabe dans les éléments bilingues */
.text-ar {
  font-family: var(--font-arabic);
  direction: rtl;
  text-align: right;
}

/* ── 9. Composant : Boutons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base),
              box-shadow var(--transition-base),
              transform 80ms ease;
  white-space: nowrap;
  user-select: none;
  outline: none;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(200, 90, 53, 0.35);
  outline: none;
}

.btn-sm { padding: 6px var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-base); }

/* Variante primary — CTA corail */
.btn-primary {
  background-color: var(--color-corail);
  border-color: var(--color-corail);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(200, 90, 53, 0.3), 0 1px 2px rgba(0,0,0,0.06);
}
.btn-primary:hover {
  background-color: var(--color-corail-fonce);
  border-color: var(--color-corail-fonce);
  color: #FFFFFF;
  box-shadow: 0 4px 8px rgba(200, 90, 53, 0.25), 0 1px 3px rgba(0,0,0,0.08);
}
.btn-primary:active { background-color: #b84a2e; box-shadow: none; }

/* Variante secondary — souverain vert */
.btn-secondary {
  background-color: var(--color-souverain);
  border-color: var(--color-souverain);
  color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(26, 122, 85, 0.3), 0 1px 2px rgba(0,0,0,0.06);
}
.btn-secondary:hover {
  background-color: var(--color-souverain-fonce);
  border-color: var(--color-souverain-fonce);
  color: #FFFFFF;
  box-shadow: 0 4px 8px rgba(26, 122, 85, 0.25);
}

/* Variante ghost — transparent bordé */
.btn-ghost {
  background-color: transparent;
  border-color: var(--color-brume-claire);
  color: var(--color-encre-moyen);
}
.btn-ghost:hover {
  background-color: var(--color-sable);
  border-color: var(--color-brume);
  color: var(--color-encre);
}

/* Variante danger — rejet, suspension */
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #FFFFFF;
}
.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
  color: #FFFFFF;
}

/* Variante success — validation */
.btn-success {
  background-color: var(--color-succes);
  border-color: var(--color-succes);
  color: #FFFFFF;
}
.btn-success:hover {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #FFFFFF;
}

/* Variante warning — attention */
.btn-warning {
  background-color: var(--color-attention);
  border-color: var(--color-attention);
  color: #1F2937;
}
.btn-warning:hover {
  background-color: #d97706;
  border-color: #d97706;
  color: #1F2937;
}

.btn[disabled], .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-block { width: 100%; }

/* ── 10. Composant : Badges ───────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  line-height: 1.4;
}

/* Badges d'état FSM */
.badge-state-DRAFT         { background: var(--etat-draft-fond);              color: var(--etat-draft);              }
.badge-state-SUBMITTED     { background: var(--etat-submitted-fond);          color: var(--etat-submitted);          }
.badge-state-UNDER_REVIEW  { background: var(--etat-under-review-fond);       color: var(--etat-under-review);       }
.badge-state-COMPLEMENT_REQUESTED { background: var(--etat-complement-requested-fond); color: var(--etat-complement-requested); }
.badge-state-RECOGNIZED    { background: var(--etat-recognized-fond);         color: var(--etat-recognized);         }
.badge-state-ACTIVE        { background: var(--etat-active-fond);             color: var(--etat-active);             }
.badge-state-REJECTED      { background: var(--etat-rejected-fond);           color: var(--etat-rejected);           }
.badge-state-SUSPENDED     { background: var(--etat-suspended-fond);          color: var(--etat-suspended);          }
.badge-state-DISSOLVED     { background: var(--etat-dissolved-fond);          color: var(--etat-dissolved);          }

/* Badges génériques */
.badge-or     { background: var(--color-or-clair);          color: #92400e; }
.badge-souverain { background: var(--color-souverain-clair); color: var(--color-souverain); }
.badge-neutre { background: var(--color-neutre-fond);       color: var(--color-encre-moyen); }

/* ── 11. Composant : Cartes ───────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: clip;
}

.card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-default);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-encre);
  background: var(--color-surface-elevee);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-default);
  background: var(--color-surface-elevee);
}

.card-title { margin: 0; font: inherit; }

/* Carte entité — barre dorée en haut */
.card-entity {
  border-top: 3px solid var(--color-or);
}

/* Carte statistique — trait souverain en haut */
.card-stat {
  border-top: 4px solid var(--color-souverain);
}

/* ── 12. Composant : Formulaires ──────────────────────────────────────────── */

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-encre);
  margin-bottom: var(--space-1);
}

.form-required {
  color: var(--color-corail);
  margin-left: 2px;
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-encre);
  background-color: var(--color-surface);
  border: 1px solid var(--color-brume-claire);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  line-height: 1.5;
}

.form-control:focus {
  border-color: var(--color-corail);
  box-shadow: 0 0 0 3px rgba(200, 90, 53, 0.15);
}

.form-control::placeholder { color: var(--color-brume); }

.form-control:disabled {
  background-color: var(--color-neutre-fond);
  color: var(--color-brume);
  cursor: not-allowed;
}

.form-control.is-error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--color-brume);
  margin-top: var(--space-1);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239CA3AF' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}

[dir="rtl"] select.form-control {
  background-position: left var(--space-3) center;
  padding-right: var(--space-3);
  padding-left: var(--space-8);
}

textarea.form-control { resize: vertical; min-height: 96px; }

/* Widgets Django sans classe — applique les styles form-control automatiquement
   dans tout contexte .form-group (portail, agent, auth) */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.form-group select,
.form-group textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-encre);
  background-color: var(--color-surface);
  border: 1px solid var(--color-brume-claire);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  line-height: 1.5;
  box-sizing: border-box;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-corail);
  box-shadow: 0 0 0 3px rgba(200, 90, 53, 0.15);
}

.form-group input:not([type="checkbox"]):not([type="radio"])::placeholder,
.form-group textarea::placeholder {
  color: var(--color-brume);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background-color: var(--color-neutre-fond);
  color: var(--color-brume);
  cursor: not-allowed;
}

.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
  cursor: pointer;
}

[dir="rtl"] .form-group select {
  background-position: left var(--space-3) center;
  padding-right: var(--space-3);
  padding-left: var(--space-8);
}

.form-group textarea {
  resize: vertical;
  min-height: 96px;
}

/* Checkbox et radio — alignés avec le label */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-corail);
  cursor: pointer;
  margin-top: 2px;
}

/* ── CheckboxSelectMultiple — style Tailwind ──────────────────────────────── */

/* Grille de cases à cocher */
.form-group ul {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-2);
}

/* Chaque item = carte cliquable */
.form-group ul li label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-encre);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-brume-claire);
  background: var(--color-surface);
  width: 100%;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  user-select: none;
}

.form-group ul li label:hover {
  background: var(--color-souverain-tres-clair);
  border-color: var(--color-souverain-clair);
}

/* Checkbox custom Tailwind-style */
.form-group ul input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  border: 2px solid var(--color-brume);
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group ul input[type="checkbox"]:checked {
  background-color: var(--color-souverain);
  border-color: var(--color-souverain);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
}

.form-group ul input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 122, 85, 0.25);
}

/* Item sélectionné — surligner la carte */
.form-group ul li:has(input:checked) label {
  background: var(--color-souverain-tres-clair);
  border-color: var(--color-souverain-clair);
  color: var(--color-souverain-fonce);
  font-weight: 500;
}

/* Champ en erreur */
.form-group.has-error input:not([type="checkbox"]):not([type="radio"]),
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* Section de formulaire */
.form-section {
  border-top: 2px solid var(--color-or);
  padding-top: var(--space-6);
  margin-top: var(--space-8);
}

.form-section:first-child { border-top: none; margin-top: 0; padding-top: 0; }

.form-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-encre);
  margin-bottom: var(--space-4);
}

/* ── 13. Composant : Navigation ───────────────────────────────────────────── */

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-encre-moyen);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-link:hover {
  background-color: var(--color-neutre-fond);
  color: var(--color-encre);
}

.nav-link.active {
  background-color: var(--color-souverain-tres-clair);
  color: var(--color-souverain);
  font-weight: 600;
}

/* Sidebar navigation */
.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-1); }

.sidebar-nav-section {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brume);
  padding: var(--space-4) var(--space-3) var(--space-2);
}

/* ── 14. Composant : Timeline ─────────────────────────────────────────────── */

.timeline {
  position: relative;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-or);
  opacity: 0.4;
}

[dir="rtl"] .timeline::before {
  left: auto;
  right: 20px;
}

.timeline-item {
  position: relative;
  padding-left: 52px;
  padding-bottom: var(--space-6);
}

[dir="rtl"] .timeline-item {
  padding-left: 0;
  padding-right: 52px;
}

.timeline-dot {
  position: absolute;
  left: 12px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-brume-claire);
}

[dir="rtl"] .timeline-dot {
  left: auto;
  right: 12px;
}

.timeline-date {
  font-size: var(--text-xs);
  color: var(--color-brume);
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
}

.timeline-action {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-encre);
}

.timeline-actor {
  font-size: var(--text-xs);
  color: var(--color-encre-moyen);
  margin-top: 2px;
}

.timeline-comment {
  font-size: var(--text-sm);
  color: var(--color-encre-moyen);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-elevee);
  border-left: 2px solid var(--color-or);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

[dir="rtl"] .timeline-comment {
  border-left: none;
  border-right: 2px solid var(--color-or);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* ── 15. Composant : En-tête institutionnel ───────────────────────────────── */

.institutional-header {
  background-color: var(--color-souverain);
  color: #FFFFFF;
  padding: var(--space-4) 0;
}

.institutional-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.institutional-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.armoiries-rim {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}

.ministry-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ministry-name-fr {
  font-size: var(--text-base);
  opacity: 0.95;
  font-weight: 600;
  line-height: 1.4;
}

.ministry-name-fr strong {
  font-size: var(--text-sm);
  font-weight: 600;
}

.ministry-name-ar {
  font-family: var(--font-arabic);
  font-size: var(--text-lg);
  opacity: 0.95;
  font-weight: 700;
  line-height: 1.4;
  direction: rtl;
}

.ministry-name-ar strong {
  font-size: var(--text-base);
  font-weight: 700;
}

.si-logo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.si-logo span {
  color: var(--color-or);
}

/* ── 16. Navigation principale publique ──────────────────────────────────── */

.main-nav {
  background: var(--color-surface);
  border-bottom: var(--border-default);
}

.main-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  gap: var(--space-4);
}

.main-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* ── 17. Layout : Sidebar agent ───────────────────────────────────────────── */

.agent-layout {
  display: flex;
  min-height: 100vh;
}

.agent-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: var(--border-default);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

[dir="rtl"] .agent-sidebar {
  border-right: none;
  border-left: var(--border-default);
}

.agent-sidebar-header {
  padding: var(--space-4) var(--space-4);
  border-bottom: var(--border-default);
  background: var(--color-souverain);
}

.agent-content {
  flex: 1;
  overflow: auto;
  background: var(--color-sable);
}

.agent-topbar {
  background: var(--color-surface);
  border-bottom: var(--border-default);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.agent-page {
  padding: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── 18. Composant : Fil d'Ariane ─────────────────────────────────────────── */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-brume);
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--color-encre-moyen);
  text-decoration: none;
}
.breadcrumbs a:hover { color: var(--color-encre); }

.breadcrumbs-sep {
  color: var(--color-brume-claire);
  font-size: var(--text-xs);
}

[dir="rtl"] .breadcrumbs { flex-direction: row-reverse; }

/* ── 19. Composant : Messages flash ───────────────────────────────────────── */

.flash-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
}

[dir="rtl"] .flash-container {
  right: auto;
  left: var(--space-4);
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}

.flash-success { border-color: var(--color-succes-fond); background: var(--color-succes-fond); color: #15803d; }
.flash-error   { border-color: var(--color-danger-fond); background: var(--color-danger-fond); color: #b91c1c; }
.flash-warning { border-color: var(--color-attention-fond); background: var(--color-attention-fond); color: #92400e; }
.flash-info    { border-color: var(--color-info-fond); background: var(--color-info-fond); color: #1d4ed8; }

.flash-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  padding: 0;
  font-size: var(--text-base);
  line-height: 1;
  flex-shrink: 0;
}
.flash-close:hover { opacity: 1; }

[dir="rtl"] .flash-close { margin-left: 0; margin-right: auto; }

/* ── 20. Composant : Pagination ───────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.page-item { }

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-2);
  border: var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-encre-moyen);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.page-link:hover {
  background: var(--color-neutre-fond);
  border-color: var(--color-encre-moyen);
  color: var(--color-encre);
}

.page-item.active .page-link {
  background: var(--color-souverain);
  border-color: var(--color-souverain);
  color: #FFFFFF;
}

.page-item.disabled .page-link {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 21. Composant : État vide ────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-encre);
  margin-bottom: var(--space-2);
}

.empty-state-text {
  font-size: var(--text-sm);
  color: var(--color-brume);
  max-width: 360px;
  line-height: 1.6;
}

/* ── 22. Composant : Carte de statistique ─────────────────────────────────── */

.stat-card {
  background: var(--color-surface);
  border: var(--border-default);
  border-top: 4px solid var(--color-souverain);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-encre);
  line-height: 1;
}

.stat-suffix {
  color: var(--color-or);
  font-size: var(--text-xl);
  margin-left: 2px;
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-brume);
  margin-top: var(--space-2);
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--space-2);
}

.stat-trend.up   { color: var(--color-succes); }
.stat-trend.down { color: var(--color-danger); }

/* ── 23. Composant : Alerte ───────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.alert-success { background: var(--color-succes-fond);  border-color: #bbf7d0; color: #15803d; }
.alert-error   { background: var(--color-danger-fond);  border-color: #fecaca; color: #b91c1c; }
.alert-warning { background: var(--color-attention-fond); border-color: #fde68a; color: #92400e; }
.alert-info    { background: var(--color-info-fond);    border-color: #bfdbfe; color: #1d4ed8; }
.alert-neutre  { background: var(--color-neutre-fond);  border-color: var(--color-brume-claire); color: var(--color-encre-moyen); }

/* ── 24. Composant : Onglets ──────────────────────────────────────────────── */

.tabs {
  display: flex;
  border-bottom: 2px solid var(--color-brume-claire);
  gap: 0;
  overflow-x: auto;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-brume);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: -2px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab:hover { color: var(--color-encre); }

.tab.active {
  color: var(--color-corail);
  border-bottom-color: var(--color-corail);
}

/* ── 25. Composant : Modale ───────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 41, 55, 0.5);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-encre);
}

.modal-body { padding: var(--space-6); }

.modal-footer {
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-default);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

[dir="rtl"] .modal-footer { flex-direction: row-reverse; }

/* ── 26. Composant : Zone de upload ──────────────────────────────────────── */

.upload-zone {
  border: 2px dashed var(--color-brume-claire);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  transition: border-color var(--transition-base), background-color var(--transition-base);
  cursor: pointer;
}

.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--color-corail);
  background-color: var(--color-corail-clair);
}

.upload-zone-icon { font-size: 36px; margin-bottom: var(--space-3); opacity: 0.6; }
.upload-zone-text { font-size: var(--text-sm); color: var(--color-encre-moyen); }
.upload-zone-hint { font-size: var(--text-xs); color: var(--color-brume); margin-top: var(--space-1); }

/* ── 27. Composant : Liste de documents ───────────────────────────────────── */

.document-list { display: flex; flex-direction: column; gap: var(--space-2); }

.document-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-md);
}

.document-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-info-fond);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.document-name { font-size: var(--text-sm); font-weight: 500; color: var(--color-encre); }
.document-meta { font-size: var(--text-xs); color: var(--color-brume); font-family: var(--font-mono); }

.document-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
}

[dir="rtl"] .document-actions { margin-left: 0; margin-right: auto; }

/* ── 28. Sélecteur de langue ──────────────────────────────────────────────── */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 2px;
}

.lang-btn {
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: calc(var(--radius-md) - 2px);
  border: none;
  cursor: pointer;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--transition-fast);
}

.lang-btn.active,
.lang-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
}

/* ── 29. Utilitaires ──────────────────────────────────────────────────────── */

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-encre);
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--color-encre-moyen);
  margin-top: var(--space-1);
}

.section-divider {
  border: none;
  border-top: 1px solid var(--color-or);
  opacity: 0.3;
  margin: var(--space-8) 0;
}

.text-mono { font-family: var(--font-mono); }

.number-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-brume);
  background: var(--color-neutre-fond);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-muted { color: var(--color-brume); }
.text-secondary { color: var(--color-encre-moyen); }
.font-display { font-family: var(--font-display); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-right { text-align: right; }

.w-full { width: 100%; }
.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ── 30. Focus visible partout (accessibilité) ───────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-corail);
  outline-offset: 2px;
}

/* ── 31. Impression PDF (attestations) ────────────────────────────────────── */

@media print {
  .no-print { display: none !important; }
  .agent-sidebar { display: none !important; }
  body { background: white; font-size: 12px; }
  .card { box-shadow: none; border: 1px solid #ccc; }

  .attestation-header {
    border-bottom: 3px solid var(--color-souverain);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-8);
  }
}

/* ── 32. Barre de défilement personnalisée ───────────────────────────────── */

.agent-sidebar::-webkit-scrollbar { width: 4px; }
.agent-sidebar::-webkit-scrollbar-track { background: transparent; }
.agent-sidebar::-webkit-scrollbar-thumb { background: var(--color-brume-claire); border-radius: 2px; }

/* ── 33. Séparateur doré ─────────────────────────────────────────────────── */

.gold-bar {
  height: 3px;
  background: var(--color-or);
  border-radius: var(--radius-full);
}

/* ── 34. Menu utilisateur ────────────────────────────────────────────────── */

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: none;
  border: var(--border-default);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-encre);
  transition: background-color var(--transition-fast);
}
.user-menu-trigger:hover { background: var(--color-neutre-fond); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-souverain);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── 35. Fil de progression des formulaires ──────────────────────────────── */

.form-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-8);
}

.form-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-brume);
}

.form-step.active { color: var(--color-corail); font-weight: 600; }
.form-step.done   { color: var(--color-succes); }

.form-step-num {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.form-step.done .form-step-num {
  background: var(--color-succes);
  border-color: var(--color-succes);
  color: white;
}

.form-step.active .form-step-num {
  background: var(--color-corail);
  border-color: var(--color-corail);
  color: white;
}

.form-step-connector {
  flex: 1;
  height: 1px;
  background: var(--color-brume-claire);
  min-width: var(--space-6);
}

/* ── 36. Table de données ────────────────────────────────────────────────── */

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.data-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.data-table th {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brume);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-default);
  text-align: left;
  background: var(--color-surface-elevee);
}

[dir="rtl"] .data-table th { text-align: right; }

.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-default);
  color: var(--color-encre);
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: var(--color-souverain-tres-clair);
}

.data-table tbody tr:last-child td { border-bottom: none; }

/* ── 37. Responsive container ────────────────────────────────────────────── */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-sm { max-width: 720px; }
.container-md { max-width: 960px; }

/* ── 38. Pied de page ────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-encre);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-10) 0 var(--space-6);
  margin-top: var(--space-16);
}

.site-footer a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.site-footer a:hover { color: #FFFFFF; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── 39. Page d'accueil publique — Hero institutionnel ────────────────────── */

.hero {
  background-color: var(--color-souverain-fonce);
  color: #FFFFFF;
  padding: var(--space-16) 0 var(--space-20);
  text-align: center;
  border-bottom: 3px solid var(--color-or);
}

.hero-sovereignty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  line-height: 1;
}

.hero-sovereignty-ar {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  font-weight: 500;
}

.hero-sovereignty-sep { opacity: 0.4; }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: #FFFFFF;
  max-width: 820px;
  margin: 0 auto var(--space-5);
}

.hero-title-ar {
  font-family: var(--font-arabic);
  font-size: var(--text-xl);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.hero-subtitle {
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  opacity: 0.78;
  max-width: 580px;
  margin: 0 auto var(--space-10);
}

.hero-gold-line {
  width: 48px;
  height: 2px;
  background: var(--color-or);
  margin: 0 auto var(--space-8);
  opacity: 0.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Bouton ghost sur fond vert foncé */
.btn-hero-ghost {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  white-space: nowrap;
}
.btn-hero-ghost:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

/* ── 40. Styleguide ──────────────────────────────────────────────────────── */

.styleguide-section {
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: var(--border-default);
}

.styleguide-section:last-child { border-bottom: none; }

.styleguide-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-encre);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 3px solid var(--color-or);
}

.styleguide-subtitle {
  font-size: var(--text-sm);
  color: var(--color-brume);
  margin-bottom: var(--space-6);
}

.styleguide-demo {
  background: var(--color-surface-elevee);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-2);
}

.color-swatch {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* ── 41. Alpine x-cloak ──────────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

/* ── 42. Utilitaires responsive ──────────────────────────────────────────── */

.desktop-only { }
.mobile-only  { display: none; }

/* ── 43. Hamburger nav (nav-toggle) — caché sur desktop ─────────────────── */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-encre-moyen);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}
.nav-toggle:hover {
  background: var(--color-neutre-fond);
  border-color: var(--color-brume-claire);
}

/* ── 44. Sidebar toggle (agent) — caché sur desktop ─────────────────────── */

.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--color-brume-claire);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-encre-moyen);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--color-neutre-fond); }

/* ── 45. Overlay de sidebar mobile ──────────────────────────────────────── */

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 122, 85, 0.4);
  z-index: 250;
  backdrop-filter: blur(2px);
}

/* ── 46. Mobile < 768px ──────────────────────────────────────────────────── */

@media (max-width: 767px) {

  /* Afficher/masquer desktop/mobile */
  .desktop-only { display: none !important; }
  .mobile-only  { display: block; }

  /* -- En-tête institutionnel compact -- */
  .institutional-header-inner {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }
  .ministry-name-ar { display: none; }

  /* -- Navigation principale : hamburger -- */
  .nav-toggle { display: inline-flex; }

  .main-nav-inner {
    height: auto;
    min-height: 52px;
    padding: 0 var(--space-4);
    flex-wrap: wrap;
    align-items: center;
  }

  /* Nav links masquées par défaut, visibles quand .mobile-open */
  .main-nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) 0 var(--space-3);
    order: 10;
    border-top: var(--border-default);
  }
  .main-nav-links.mobile-open {
    display: flex;
  }
  .main-nav-links .nav-link {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    min-height: 44px;
  }

  /* -- Agent layout : sidebar overlay -- */
  .agent-layout { display: block; }

  .agent-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 300;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
  }
  .agent-sidebar.sidebar-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(31, 41, 55, 0.18);
  }
  [dir="rtl"] .agent-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  [dir="rtl"] .agent-sidebar.sidebar-open {
    transform: translateX(0);
  }

  /* Hamburger agent visible */
  .sidebar-toggle { display: inline-flex; }

  .agent-content { width: 100%; }

  .agent-topbar {
    height: auto;
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .agent-page { padding: var(--space-4); }

  /* -- Flash messages : bas de l'écran pleine largeur -- */
  .flash-container {
    top: auto;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }

  /* -- Titre de page -- */
  .page-title { font-size: var(--text-xl); }

  /* -- Hero section -- */
  .hero { padding: var(--space-12) 0; }
  .hero-title { font-size: var(--text-2xl); }
  .hero-subtitle { font-size: var(--text-base); padding: 0 var(--space-4); }

  /* -- Modale plein écran (bottom sheet) -- */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 85vh;
  }

  /* -- Cartes : espacement réduit -- */
  .card-body { padding: var(--space-4); overflow-x: auto; }
  .card-header { padding: var(--space-3) var(--space-4); }
  .card-footer { padding: var(--space-3) var(--space-4); }

  /* -- Formulaire : sections compactes -- */
  .form-section { margin-top: var(--space-6); padding-top: var(--space-4); }
  .form-section-title { font-size: var(--text-lg); }
  .form-steps { flex-wrap: wrap; gap: var(--space-2); }

  /* -- Stat cards -- */
  .stat-value { font-size: var(--text-2xl); }

  /* -- Footer -- */
  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  /* -- Container padding -- */
  .container { padding: 0 var(--space-4); }
}

/* ── 47. Tablette 768–1023px ─────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1023px) {
  .agent-sidebar { width: 200px; }
  .agent-page { padding: var(--space-5); }
  .institutional-header-inner { padding: 0 var(--space-4); }
  .main-nav-inner { padding: 0 var(--space-4); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 48. Help icon — pastille « ? » avec tooltip natif ──────────────────── */

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--color-brume, #94a3b8);
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  user-select: none;
}
.help-icon:hover,
.help-icon:focus {
  background: var(--color-souverain, #0F5132);
  outline: none;
}

/* ── 49b. Détail dossier — liste clé/valeur ──────────────────────────────── */

.detail-list {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
}

.detail-list dt {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brume);
  padding: var(--space-2) 0;
  border-bottom: var(--border-default);
  display: flex;
  align-items: center;
}

.detail-list dd {
  color: var(--color-encre);
  padding: var(--space-2) 0;
  border-bottom: var(--border-default);
  margin: 0;
  display: flex;
  align-items: center;
}

.detail-list dt:last-of-type,
.detail-list dd:last-of-type { border-bottom: none; }

/* ── 49c. Portail déclarant — layout avec sidebar de progression ─────────── */

.portal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.portal-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-4);
}

.portal-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

@media (max-width: 1023px) {
  .portal-layout {
    grid-template-columns: 1fr;
  }
  .portal-sidebar {
    position: static;
    order: 2;
  }
  .portal-main {
    order: 1;
  }
}

/* ── Mode lecture — layout principal + aside statut ─────────────────────── */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-6);
  align-items: start;
}

.detail-layout > aside {
  position: sticky;
  top: var(--space-4);
}

@media (max-width: 1023px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .detail-layout > aside {
    position: static;
    order: -1;
  }
}

@media (max-width: 767px) {
  .portal-layout {
    gap: var(--space-4);
  }
  .portal-sidebar .card:first-child .card-body {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    padding: var(--space-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portal-sidebar .card:first-child .card-body::-webkit-scrollbar {
    display: none;
  }
  .progress-step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 72px;
    flex-shrink: 0;
    padding: var(--space-2);
    gap: var(--space-1);
  }
  .progress-step > div:last-child .text-xs {
    display: none;
  }
}

/* Étapes de progression verticales */
.progress-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-brume-claire);
  background: var(--color-surface);
  font-size: var(--text-sm);
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.step-num.done    { background: var(--color-succes);  color: #fff; }
.step-num.active  { background: var(--color-corail);  color: #fff; }
.step-num.pending { background: var(--color-neutre-fond); color: var(--color-brume);
                    border: 2px solid var(--color-brume-claire); }

.progress-step--active { border-color: var(--color-corail); }

/* ── 49. Grille de qualification — détail responsive ─────────────────────── */

.grille-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 1023px) {
  .grille-layout { grid-template-columns: 1fr; }
}

.criteres-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.critere-row {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 6px);
  background: var(--surface, #fff);
}
.critere-read {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  flex-wrap: wrap;
}
.critere-num {
  flex: 0 0 auto;
  min-width: 32px;
  color: var(--color-brume, #94a3b8);
  font-weight: 600;
  font-size: var(--text-sm, 0.875rem);
}
.critere-main {
  flex: 1 1 240px;
  min-width: 0;
}
.critere-libelle {
  font-weight: 600;
  margin-bottom: 4px;
  word-break: break-word;
}
.critere-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-secondary, #64748b);
}
.critere-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.critere-edit {
  padding: var(--space-3);
  background: var(--color-souverain-tres-clair, #ebf5ee);
  border-top: 1px solid var(--border-color, #e2e8f0);
}
.critere-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
@media (max-width: 768px) {
  .critere-edit-grid { grid-template-columns: 1fr 1fr; }
  .critere-edit-grid > .form-group { grid-column: 1 / -1 !important; }
  .critere-edit-grid > .form-group:nth-child(2),
  .critere-edit-grid > .form-group:nth-child(3) { grid-column: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPOSANTS HOMEPAGE — Refonte institutionnelle premium
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 41. Lien d'évitement — WCAG AA ──────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-encre);
  color: #FFFFFF;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition-fast);
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-or);
  outline-offset: 2px;
}

/* ── 42. Couleurs utilitaires ────────────────────────────────────────────── */

.text-souverain { color: var(--color-souverain); }
.text-corail    { color: var(--color-corail); }
.text-or        { color: var(--color-or); }

/* ── 43. Homepage — Structure des sections ───────────────────────────────── */

.home-section {
  padding: var(--space-16) 0;
}

.home-section--tinted {
  background-color: var(--color-surface-elevee);
  border-top: var(--border-default);
  border-bottom: var(--border-default);
}

.section-header {
  margin-bottom: var(--space-10);
}

.section-header--center {
  text-align: center;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-encre);
  letter-spacing: var(--ls-editorial);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-3);
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--color-encre-moyen);
  margin-top: var(--space-4);
  max-width: 600px;
  line-height: var(--lh-relaxed);
}

.section-header--center .section-subtitle {
  margin: var(--space-4) auto 0;
}

/* ── 44. Homepage — Barre de statistiques ────────────────────────────────── */

.stat-band {
  background: var(--color-surface);
  border-bottom: var(--border-default);
}

.stat-band-inner {
  display: flex;
  align-items: stretch;
}

.stat-band-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.stat-band-sep {
  width: 1px;
  background: var(--color-brume-claire);
  margin: var(--space-6) 0;
  flex-shrink: 0;
}

.stat-band-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-encre);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.stat-band-label {
  font-size: var(--text-sm);
  color: var(--color-encre-moyen);
  margin-top: var(--space-2);
  line-height: var(--lh-snug);
}

/* ── 44b. Homepage — KPI Cards ───────────────────────────────────────────── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding: var(--space-10) 0;
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-brume-claire);
  border-left: 4px solid var(--color-brume-claire);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.kpi-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.kpi-card--souverain { border-left-color: var(--color-souverain); }
.kpi-card--corail    { border-left-color: var(--color-corail); }
.kpi-card--or        { border-left-color: var(--color-or); }

.kpi-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon--souverain { background: var(--color-souverain-tres-clair); color: var(--color-souverain); }
.kpi-icon--corail    { background: var(--color-corail-clair);         color: var(--color-corail-fonce); }
.kpi-icon--or        { background: var(--color-or-pale);              color: var(--color-or); }

.kpi-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-encre);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.kpi-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-encre-moyen);
  line-height: var(--lh-snug);
}

/* ── 45. Homepage — Accès rapides ────────────────────────────────────────── */

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.quick-access-tile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-encre);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base);
}

.quick-access-tile:hover {
  border-color: var(--color-souverain-clair);
  box-shadow: var(--shadow-sm);
  background-color: var(--color-souverain-tres-clair);
  color: var(--color-encre);
}

.quick-access-tile:hover .quick-access-arrow {
  color: var(--color-souverain);
  transform: translateX(3px);
}

.quick-access-tile--primary {
  background: var(--color-corail-clair);
  border-color: rgba(200, 90, 53, 0.2);
}

.quick-access-tile--primary:hover {
  border-color: var(--color-corail);
  background: var(--color-corail-clair);
}

.quick-access-tile--primary .quick-access-icon {
  background: rgba(200, 90, 53, 0.12);
  color: var(--color-corail);
}

.quick-access-tile--primary .quick-access-title { color: var(--color-corail-fonce); }
.quick-access-tile--primary .quick-access-arrow { color: var(--color-corail-fonce); }

.quick-access-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-souverain-tres-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-souverain);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.quick-access-content {
  flex: 1;
  min-width: 0;
}

.quick-access-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-encre);
  line-height: 1.3;
}

.quick-access-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-brume);
  margin-top: 2px;
}

.quick-access-arrow {
  color: var(--color-brume-claire);
  flex-shrink: 0;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

[dir="rtl"] .quick-access-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .quick-access-tile:hover .quick-access-arrow {
  transform: scaleX(-1) translateX(-3px);
}

/* ── 46. Homepage — Démarches en ligne ───────────────────────────────────── */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.service-card {
  background: var(--color-surface);
  border: var(--border-default);
  border-top: 4px solid var(--color-souverain);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-xs);
}

.service-card--alt {
  border-top-color: var(--color-or);
}

.service-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.service-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-souverain-tres-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-souverain);
  flex-shrink: 0;
}

.service-card--alt .service-card-icon {
  background: var(--color-or-pale);
  color: var(--color-or);
}

.service-card-badge { flex-shrink: 0; }

.service-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-encre);
  letter-spacing: var(--ls-editorial);
  line-height: var(--lh-heading);
  margin: 0;
}

.service-card-desc {
  font-size: var(--text-sm);
  color: var(--color-encre-moyen);
  line-height: var(--lh-relaxed);
}

.service-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-card-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-encre-moyen);
}

.service-card-features li svg {
  color: var(--color-souverain);
  flex-shrink: 0;
}

.service-card--alt .service-card-features li svg { color: var(--color-or); }

.service-card-action {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* ── 47. Homepage — Couverture territoriale ──────────────────────────────── */

.territory-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8);
  background: var(--color-surface);
  border: var(--border-default);
  border-left: 4px solid var(--color-souverain);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

[dir="rtl"] .territory-band {
  border-left: var(--border-default);
  border-right: 4px solid var(--color-souverain);
}

.territory-band-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  flex: 1;
}

.territory-band-icon {
  width: 56px;
  height: 56px;
  background: var(--color-souverain-tres-clair);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-souverain);
  flex-shrink: 0;
}

.territory-band-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-encre);
  letter-spacing: var(--ls-editorial);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-2);
}

.territory-band-desc {
  font-size: var(--text-sm);
  color: var(--color-encre-moyen);
  line-height: var(--lh-relaxed);
}

.territory-band-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  padding: var(--space-5) var(--space-8);
  background: var(--color-souverain-tres-clair);
  border-radius: var(--radius-md);
}

.territory-band-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-souverain);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.territory-band-unit {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-souverain);
  margin-top: var(--space-1);
  opacity: 0.7;
}

/* ── 48. Homepage — Partenaires ──────────────────────────────────────────── */

.partner-band {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--space-6) 0 var(--space-2);
}

.partner-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  max-width: 500px;
}

.partner-emblem {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-souverain-tres-clair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-souverain);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

.partner-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.partner-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-encre);
}

.partner-detail {
  font-size: var(--text-xs);
  color: var(--color-encre-moyen);
  line-height: var(--lh-snug);
}

/* ── 49. Skeleton loaders (shimmer) ──────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-brume-claire) 0%,
    #FFFFFF 50%,
    var(--color-brume-claire) 100%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: block;
}

.skeleton-text  { height: 14px; margin-bottom: var(--space-2); }
.skeleton-title { height: 22px; margin-bottom: var(--space-3); width: 60%; }
.skeleton-avatar { border-radius: var(--radius-full); }
.skeleton-card  { height: 120px; border-radius: var(--radius-lg); }

/* ── 50. Responsive mobile-first — breakpoints complets ──────────────────── */

/* xs — Smartphone portrait (≤ 640px) */
@media (max-width: 640px) {

  :root {
    --text-display: 30px;
    --text-3xl: 26px;
    --text-2xl: 22px;
  }

  .hero { padding: var(--space-12) 0 var(--space-16); }
  .hero-title { font-size: var(--text-display); }
  .hero-title-ar { font-size: var(--text-base); }
  .hero-sovereignty { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn,
  .hero-actions .btn-hero-ghost { width: 100%; justify-content: center; }

  .stat-band-inner { flex-direction: column; }
  .stat-band-item {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-default);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
  .stat-band-item:last-child { border-bottom: none; }
  .stat-band-sep { display: none; }
  .stat-band-label { margin-top: 0; }
  .stat-band-value { font-size: var(--text-2xl); }

  .kpi-grid { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-6) 0; }

  .quick-access-grid { grid-template-columns: 1fr; gap: var(--space-2); }

  .services-grid { grid-template-columns: 1fr; }

  .territory-band {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    border-left: none;
    border-top: 4px solid var(--color-souverain);
  }
  [dir="rtl"] .territory-band {
    border-right: none;
    border-top: 4px solid var(--color-souverain);
  }
  .territory-band-content { flex-direction: column; gap: var(--space-3); }
  .territory-band-stat {
    align-self: stretch;
    flex-direction: row;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }

  .section-title { font-size: var(--text-xl); }
  .home-section  { padding: var(--space-10) 0; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .partner-item { flex-direction: column; text-align: center; }

  /* Cibles tactiles ≥44px sur mobile */
  .btn        { min-height: 44px; }
  .nav-link   { min-height: 44px; }
  .page-link  { min-width: 44px; height: 44px; }
}

/* sm — Tablette (641px – 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {

  :root { --text-display: 40px; }

  .kpi-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  .quick-access-grid { grid-template-columns: repeat(2, 1fr); }

  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Sidebar tablette : overlay avec backdrop */
  .agent-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 800;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-md);
  }
  [dir="rtl"] .agent-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  .agent-sidebar.is-open { transform: translateX(0); }
  [dir="rtl"] .agent-sidebar.is-open { transform: translateX(0); }

  .agent-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 38, 58, 0.45);
    z-index: 790;
  }

  .hero-sovereignty { gap: var(--space-2); }

  /* Cibles tactiles ≥44px sur tablette */
  .btn        { min-height: 44px; }
  .nav-link   { min-height: 44px; }
}

/* lg — Grand écran (≥ 1440px) */
@media (min-width: 1440px) {
  .container   { max-width: 1400px; }
  .agent-page  { max-width: 1320px; }
  .agent-sidebar { width: 260px; }
}

/* Protection globale scroll horizontal */
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── 51. Pied de page institutionnel premium ─────────────────────────────── */

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }

.footer-logo {
  font-size: var(--text-xl);
  display: inline-block;
  margin-bottom: var(--space-1);
}

.footer-ministry-ar {
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  direction: rtl;
  text-align: right;
  opacity: 0.6;
  line-height: 1.5;
}

.footer-ministry-fr {
  font-size: var(--text-xs);
  opacity: 0.6;
  line-height: 1.4;
}

.footer-desc {
  font-size: var(--text-xs);
  line-height: var(--lh-relaxed);
  opacity: 0.5;
  margin-top: var(--space-1);
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--space-1);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-links li a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links li a:hover { color: #FFFFFF; }

.footer-partner-note {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-partner-label {
  font-size: var(--text-xs);
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.footer-partner-emblem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-partner-sigla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}

.footer-version {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  opacity: 0.3;
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .footer-col--identity { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-col--identity { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: var(--space-2); text-align: center; }
}