/* =============================================================================
   MBA Ponts Alumni Morocco — Design tokens
   Source unique des couleurs, de la typographie, des espacements, des rayons et
   des ombres. Les valeurs Bootstrap sont surchargées ici pour que tous les
   composants héritent de l'identité sans !important.
   Charger APRÈS bootstrap.min.css et AVANT main.css.
   ============================================================================= */

:root,
[data-bs-theme="light"] {
  /* Marine : structure, titres, actions principales */
  --color-primary-900: #0B2545;
  --color-primary-700: #003366;
  --color-primary-500: #0055A5;
  --color-primary-50:  #EEF3F9;

  /* Or : exception et engagement (texte marine dessus) */
  --color-accent-500: #C9A84C;
  --color-accent-600: #B5933E;
  --color-accent-700: #8C6D1F;
  --color-accent-50:  #FBF6E9;

  /* Surfaces et texte */
  --color-bg:         #F5F6FA;
  --color-surface:    #FFFFFF;
  --color-surface-2:  #F9FAFC;
  --color-border:     #E3E6EE;
  --color-text:       #14213D;
  --color-text-muted: #5B6475;

  /* États */
  --color-success:    #1F7A4D;
  --color-success-50: #E8F5EE;
  --color-warning:    #B7791F;
  --color-warning-50: #FFF7E6;
  --color-danger:     #B42318;
  --color-danger-50:  #FDECEA;
  --color-info:       var(--color-primary-500);

  /* Barre de navigation */
  --nav-bg:           var(--color-primary-900);
  --nav-fg:           #FFFFFF;
  --color-on-dark:    #FFFFFF;
  --nav-fg-muted:     rgba(255, 255, 255, .82);

  /* Typographie */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Espacements (base 4) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --gutter: 16px;

  /* Rayons */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 2px 8px rgba(11, 37, 69, .06);
  --shadow-md: 0 4px 16px rgba(11, 37, 69, .12);
  --shadow-lg: 0 12px 40px rgba(11, 37, 69, .18);

  --focus-ring: 0 0 0 3px rgba(0, 85, 165, .4);

  /* Marques tierces : uniquement pour les icônes, jamais en fond de bouton */
  --brand-whatsapp: #25D366;
  --brand-linkedin: #0A66C2;
  --brand-facebook: #1877F2;

  /* ── Surcharge des variables Bootstrap ───────────────────────────────── */
  --bs-primary: var(--color-primary-700);
  --bs-primary-rgb: 0, 51, 102;
  --bs-link-color: var(--color-primary-500);
  --bs-link-color-rgb: 0, 85, 165;
  --bs-link-hover-color: var(--color-primary-900);
  --bs-link-hover-color-rgb: 11, 37, 69;
  --bs-info: var(--color-primary-500);
  --bs-info-rgb: 0, 85, 165;
  --bs-success: var(--color-success);
  --bs-success-rgb: 31, 122, 77;
  --bs-warning: var(--color-accent-500);
  --bs-warning-rgb: 201, 168, 76;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 180, 35, 24;

  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: var(--color-text);
  --bs-body-color-rgb: 20, 33, 61;
  --bs-body-bg: var(--color-bg);
  --bs-body-bg-rgb: 245, 246, 250;
  --bs-secondary-color: var(--color-text-muted);
  --bs-secondary-color-rgb: 91, 100, 117;
  --bs-heading-color: var(--color-primary-900);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-full);
  --bs-focus-ring-color: rgba(0, 85, 165, .4);
}

[data-bs-theme="dark"] {
  --color-primary-900: #0B1A33;
  --color-primary-700: #2F6FBF;
  --color-primary-500: #7DB5FF;
  --color-primary-50:  #1B2B4A;

  --color-accent-500: #C9A84C;
  --color-accent-600: #D8B95C;
  --color-accent-700: #E3C877;
  --color-accent-50:  #2A2412;

  --color-bg:         #0E1626;
  --color-surface:    #16213A;
  --color-surface-2:  #1B2848;
  --color-border:     #26324D;
  --color-text:       #E7ECF5;
  --color-text-muted: #9AA6BD;

  --color-success:    #4CC38A;
  --color-success-50: #12281D;
  --color-warning:    #E0A84A;
  --color-warning-50: #2A2112;
  --color-danger:     #FF7A70;
  --color-danger-50:  #2D1513;

  --nav-bg:           #0B1A33;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5);
  --focus-ring: 0 0 0 3px rgba(125, 181, 255, .45);

  --bs-primary: var(--color-primary-700);
  --bs-primary-rgb: 47, 111, 191;
  --bs-link-color: var(--color-primary-500);
  --bs-link-color-rgb: 125, 181, 255;
  --bs-link-hover-color: #A8CCFF;
  --bs-link-hover-color-rgb: 168, 204, 255;
  --bs-info: var(--color-primary-500);
  --bs-info-rgb: 125, 181, 255;
  --bs-success: var(--color-success);
  --bs-success-rgb: 76, 195, 138;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 255, 122, 112;

  --bs-body-color: var(--color-text);
  --bs-body-color-rgb: 231, 236, 245;
  --bs-body-bg: var(--color-bg);
  --bs-body-bg-rgb: 14, 22, 38;
  --bs-secondary-color: var(--color-text-muted);
  --bs-secondary-color-rgb: 154, 166, 189;
  --bs-secondary-bg: var(--color-surface);
  --bs-tertiary-bg: var(--color-surface-2);
  --bs-heading-color: var(--color-text);
  --bs-border-color: var(--color-border);
  --bs-emphasis-color: var(--color-text);
  --bs-focus-ring-color: rgba(125, 181, 255, .45);
}

/* ── Typographie : échelle unique (aucune autre taille autorisée) ─────────── */
:root {
  --fs-display: 1.5rem;   --lh-display: 1.875rem;   /* 24/30 serif */
  --fs-h1: 1.375rem;      --lh-h1: 1.75rem;         /* 22/28 */
  --fs-h2: 1.0625rem;     --lh-h2: 1.5rem;          /* 17/24 */
  --fs-h3: 1rem;          --lh-h3: 1.375rem;        /* 16/22 */
  --fs-body: .9375rem;    --lh-body: 1.375rem;      /* 15/22 */
  --fs-sm: .8125rem;      --lh-sm: 1.125rem;        /* 13/18 */
  --fs-xs: .75rem;        --lh-xs: 1rem;            /* 12/16 */
  --fs-label: .8125rem;   --lh-label: 1.125rem;     /* 13/18 · 600 */
  --fs-kpi: 1.5rem;                                 /* 24 · 700 */
}
@media (min-width: 576px) {
  :root {
    --fs-display: 2rem;   --lh-display: 2.5rem;     /* 32/40 */
    --fs-h1: 1.75rem;     --lh-h1: 2.25rem;         /* 28/36 */
    --fs-h2: 1.25rem;     --lh-h2: 1.75rem;         /* 20/28 */
    --fs-h3: 1.0625rem;   --lh-h3: 1.5rem;          /* 17/24 */
    --fs-body: 1rem;      --lh-body: 1.5rem;        /* 16/24 */
    --fs-sm: .875rem;     --lh-sm: 1.25rem;         /* 14/20 */
    --fs-xs: .8125rem;    --lh-xs: 1.125rem;        /* 13/18 */
    --fs-label: .875rem;  --lh-label: 1.25rem;      /* 14/20 · 600 */
    --fs-kpi: 1.75rem;                              /* 28 */
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-sans);
  color: var(--bs-heading-color);
  letter-spacing: -.01em;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
h3, .h3, h4, .h4 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
h5, .h5, h6, .h6 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.display-5, .display-6, .titre-editorial { font-family: var(--font-serif); }
.titre-editorial { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; }
.display-5 { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; }
.display-6 { font-size: var(--fs-kpi); line-height: 1.2; font-weight: 700; }
.fs-1, .fs-2, .fs-3 { font-size: var(--fs-h1) !important; } /* neutralise les tailles Bootstrap héritées */
.fs-4, .fs-5 { font-size: var(--fs-h2) !important; }
.fs-6 { font-size: var(--fs-body) !important; }

.font-serif { font-family: var(--font-serif); }
.overline {
  font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted);
}
small, .small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.text-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.form-label, label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: 600; }
.form-check-label { font-weight: 500; }
.table { font-size: var(--fs-sm); }
.table > thead > tr > th { font-size: var(--fs-xs); text-transform: none; }
.badge { font-size: var(--fs-xs); font-weight: 600; }

/* Champs de saisie : 16 px sur mobile (sinon zoom iOS) */
.form-control, .form-select, .input-group-text { font-size: 1rem; }
@media (min-width: 576px) { .form-control, .form-select, .input-group-text { font-size: var(--fs-body); } }

/* ── Icônes : l'espacement vient uniquement du gap du composant parent ─────── */
.btn, .nav-link, .dropdown-item, .chip, .pill, .badge, .back-link, .list-group-item-action {
  display: inline-flex; align-items: center; gap: .5rem;
}
.btn-sm, .chip, .pill, .badge { gap: .375rem; }
.dropdown-item { display: flex; }
.btn > i, .nav-link > i, .dropdown-item > i, .chip > i, .pill > i, .badge > i {
  font-size: 1.15em; line-height: 1; margin: 0; flex: 0 0 auto;
}
.btn { white-space: nowrap; }
/* Icône dans un texte courant */
p > i.bi, li > i.bi, td > i.bi, small > i.bi, span > i.bi { vertical-align: -.1em; }

/* Bouton à icône seule */
.btn-icon { width: 40px; height: 40px; padding: 0; justify-content: center; }
.btn-icon.btn-sm { width: 36px; height: 36px; }
.table .btn-icon { width: 32px; height: 32px; }

/* ── Boutons : variables Bootstrap rebranchées sur les tokens ─────────────── */
.btn {
  --bs-btn-border-radius: var(--radius-md);
  --bs-btn-font-weight: 600;
  --bs-btn-focus-box-shadow: var(--focus-ring);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary-700);
  --bs-btn-border-color: var(--color-primary-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-500);
  --bs-btn-hover-border-color: var(--color-primary-500);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-900);
  --bs-btn-active-border-color: var(--color-primary-900);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color-primary-700);
  --bs-btn-disabled-border-color: var(--color-primary-700);
  --bs-btn-focus-shadow-rgb: 0, 85, 165;
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary-700);
  --bs-btn-border-color: var(--color-primary-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-700);
  --bs-btn-hover-border-color: var(--color-primary-700);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-900);
  --bs-btn-active-border-color: var(--color-primary-900);
  --bs-btn-disabled-color: var(--color-primary-700);
  --bs-btn-disabled-border-color: var(--color-primary-700);
  --bs-btn-focus-shadow-rgb: 0, 85, 165;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--color-primary-500);
  --bs-btn-border-color: var(--color-primary-500);
  --bs-btn-hover-color: var(--color-primary-900);
  --bs-btn-hover-bg: var(--color-primary-500);
  --bs-btn-hover-border-color: var(--color-primary-500);
  --bs-btn-active-color: var(--color-primary-900);
  --bs-btn-active-bg: var(--color-primary-500);
}

/* Bouton d'engagement : or de marque, texte marine (6,7:1) */
.btn-warning, .btn-accent {
  --bs-btn-color: #0B2545;
  --bs-btn-bg: var(--color-accent-500);
  --bs-btn-border-color: var(--color-accent-500);
  --bs-btn-hover-color: #0B2545;
  --bs-btn-hover-bg: var(--color-accent-600);
  --bs-btn-hover-border-color: var(--color-accent-600);
  --bs-btn-active-color: #0B2545;
  --bs-btn-active-bg: var(--color-accent-600);
  --bs-btn-active-border-color: var(--color-accent-600);
  --bs-btn-disabled-color: #0B2545;
  --bs-btn-disabled-bg: var(--color-accent-500);
  --bs-btn-disabled-border-color: var(--color-accent-500);
  --bs-btn-focus-shadow-rgb: 201, 168, 76;
  font-weight: 600;
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-text);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-primary-50);
  --bs-btn-hover-border-color: var(--color-primary-500);
  --bs-btn-active-color: var(--color-text);
  --bs-btn-active-bg: var(--color-primary-50);
  --bs-btn-active-border-color: var(--color-primary-500);
}

.btn-danger {
  --bs-btn-bg: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-bg: #8F1B12;
  --bs-btn-hover-border-color: #8F1B12;
}

.btn-outline-danger {
  --bs-btn-color: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-bg: var(--color-danger);
  --bs-btn-hover-border-color: var(--color-danger);
  --bs-btn-hover-color: #fff;
}

.btn-success {
  --bs-btn-bg: var(--color-success);
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-bg: #17603D;
  --bs-btn-hover-border-color: #17603D;
}

/* Hauteurs de boutons : 40 px (mobile), 44 px (desktop et CTA principal), 36 px (sm), 32 px (tableau) */
.btn { min-height: 40px; font-size: var(--fs-sm); font-weight: 600; padding-top: 0; padding-bottom: 0; }
.btn-lg { min-height: 48px; font-size: var(--fs-body); }
.btn-sm { min-height: 36px; font-size: var(--fs-sm); }
.table .btn, .table .btn-sm { min-height: 32px; }
@media (min-width: 992px) { .btn:not(.btn-sm):not(.btn-lg) { min-height: 44px; } }
.form-control, .form-select { min-height: 44px; }

/* ── Éléments Bootstrap codés avec #0d6efd en dur ─────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--focus-ring);
}
.form-check-input:checked {
  background-color: var(--color-primary-700);
  border-color: var(--color-primary-700);
}
.form-check-input:focus { border-color: var(--color-primary-500); box-shadow: var(--focus-ring); }
.form-switch .form-check-input:focus { border-color: var(--color-primary-500); }
.form-range::-webkit-slider-thumb { background-color: var(--color-primary-700); }
.form-range::-moz-range-thumb { background-color: var(--color-primary-700); }

.progress { --bs-progress-bar-bg: var(--color-primary-700); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--color-primary-700); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--color-primary-700); }
.list-group { --bs-list-group-active-bg: var(--color-primary-700); --bs-list-group-active-border-color: var(--color-primary-700); }
.pagination {
  --bs-pagination-color: var(--color-primary-700);
  --bs-pagination-hover-color: var(--color-primary-900);
  --bs-pagination-active-bg: var(--color-primary-700);
  --bs-pagination-active-border-color: var(--color-primary-700);
  --bs-pagination-focus-box-shadow: var(--focus-ring);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--color-primary-700);
  --bs-dropdown-border-radius: var(--radius-md);
  --bs-dropdown-box-shadow: var(--shadow-md);
}
.accordion {
  --bs-accordion-active-bg: var(--color-primary-50);
  --bs-accordion-active-color: var(--color-primary-700);
  --bs-accordion-btn-focus-box-shadow: var(--focus-ring);
}
.btn-check:checked + .btn-outline-primary { color: #fff; }
.alert-info {
  --bs-alert-bg: var(--color-primary-50);
  --bs-alert-color: var(--color-primary-700);
  --bs-alert-border-color: var(--color-primary-50);
}

/* Cyan Bootstrap (bg-info) : jamais utilisé dans la charte → marine */
.bg-info { color: #fff; }
.text-bg-info { color: #fff; }

/* Contraste : texte or sur blanc */
.text-accent { color: var(--color-accent-700); }
.bg-accent-soft { background-color: var(--color-accent-50); }

/* ── Focus visible ────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--color-primary-500);
  outline-offset: 2px;
}
.navbar :focus-visible, #bottom-nav :focus-visible {
  outline-color: var(--color-accent-500);
}

/* ── Respect de prefers-reduced-motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; /* justifié : coupe toutes les animations tierces */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}