/* ===================================================
   ESSEC DESIGN SYSTEM — essec-design.css
   Tailwind companion — animations, mega-menu, utilities
   =================================================== */

/* ===== PALETTE =====
   Deux bleus, deux rôles distincts — c'est ce qui donne la profondeur :

   --essec-navy  (#091D3E) : SURFACES SOMBRES (barre supérieure, pied de page,
       barre latérale du tableau de bord). Registre institutionnel, premium.
   --essec-blue  (#1E3A8A) : ÉLÉMENTS INTERACTIFS sur fond clair (boutons,
       liens, icônes, badges). Plus lumineux, il reste lisible et dynamique —
       le marine, sur du texte fin en fond blanc, alourdirait la lecture.
   --essec-cta   (#EA580C) : appel à l'action principal, pour trancher.        */
:root {
  --essec-navy:        #091D3E;
  --essec-navy-soft:   #0F2B57;
  --essec-blue:        #1E3A8A;
  --essec-blue-light:  #2563EB;
  --essec-cta:         #EA580C;
  --essec-cta-dark:    #C2410C;
}

/* ===== RESET CRITIQUE — élimine tout espace blanc bord de page ===== */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html {
  background-color: #1e3a8a !important;
}
body {
  position: static !important;
  top: 0 !important;
}

/* ===== MEGA-MENU ===== */
.mega-menu {
  transition: opacity 0.2s cubic-bezier(0.16,1,0.3,1),
              transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.mega-menu.mm-hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  visibility: hidden;
}
.mega-menu.mm-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* ===== SCROLLING NEWS ===== */
.scrolling-news {
  overflow: hidden;
  white-space: nowrap;
}
.scrolling-text {
  display: inline-block;
  animation: scroll-left 25s linear infinite;
}
.scrolling-news:hover .scrolling-text {
  animation-play-state: paused;
}
@keyframes scroll-left {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ===== FLYERS SCROLL ===== */
@keyframes slideUpContinuous {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.flyers-scroll-wrapper {
  animation: slideUpContinuous 15s linear infinite;
}
.flyers-display-container:hover .flyers-scroll-wrapper {
  animation-play-state: paused;
}

/* ===== BUTTONS ===== */
.btn-press {
  transition: transform 0.1s cubic-bezier(0.4,0,1,1);
}
.btn-press:active {
  transform: scale(0.98);
}
.focus-ring:focus-visible {
  outline: 2px solid #1e40af;
  outline-offset: 2px;
}

/* ===== PAGE HEADER ===== */
.page-header-bg {
  position: relative;
  background:
    linear-gradient(135deg, rgba(30,58,138,0.82) 0%, rgba(30,64,175,0.65) 60%, rgba(30,64,175,0.45) 100%),
    url("/static/images/Bannier_home/banniere_graduation_essec_douala_autre_page.800695dd578b.webp") center/cover no-repeat;
}

/* ===== NAV ACTIVE ===== */
.nav-item-active {
  color: #1e40af;
  background-color: #eff6ff;
  border-radius: 0.5rem;
}

/* ===== CHEVRON ROTATE ===== */
.chevron-rotate {
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
}
.chevron-rotate.open {
  transform: rotate(180deg);
}

/* ===== UTILITY: screen-reader only ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== ESSEC TOPBAR ===== */
.essec-topbar {
  /* Surface sombre : marine, en écho au pied de page. */
  background-color: var(--essec-navy);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ===== MAIN NAV STICKY ===== */
.essec-main-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border-bottom: 1px solid #e2e8f0;
}

/* ===== MOBILE MENU TRANSITIONS ===== */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1);
}
#mobile-menu.menu-open {
  max-height: 100vh;
}

/* ===== ACCORDION MOBILE ===== */
.mobile-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s cubic-bezier(0.16,1,0.3,1);
}
.mobile-accordion-content.acc-open {
  max-height: 400px;
}

/* ===== FOOTER ===== */
/* ===== BOUTON D'APPEL À L'ACTION PRINCIPAL =====
   Classe définie ici (et non via une classe Tailwind) car la feuille Tailwind
   du projet est compilée avec purge : une couleur jamais employée auparavant
   n'y figure pas et le bouton resterait sans fond. */
.btn-cta {
  background-color: #ea580c;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(124, 45, 18, .35);
}
.btn-cta:hover,
.btn-cta:focus {
  background-color: #c2410c;
  color: #ffffff;
}

.essec-footer {
  /* Bleu marine profond + photo du campus en filigrane, comme sur le site
     de référence. Le dégradé sombre garantit un contraste suffisant pour
     que le texte blanc reste lisible par-dessus l'image. */
  position: relative;
  background-color: #091D3E;
  /* Voile plus léger en haut (l'image du campus reste perceptible) et plus
     dense en bas (le bloc légal garde un contraste suffisant). */
  background-image:
    linear-gradient(rgba(9, 29, 62, 0.72), rgba(9, 29, 62, 0.93)),
    url("../assets/img/bg/2.d755ac644579.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: #ffffff;
}

/* Textes du pied de page : blanc franc pour les titres, blanc adouci pour
   le corps — meilleure hiérarchie visuelle sur fond sombre. */
.essec-footer h1, .essec-footer h2, .essec-footer h3,
.essec-footer h4, .essec-footer strong {
  color: #ffffff;
}
.essec-footer p, .essec-footer li, .essec-footer span, .essec-footer address {
  color: rgba(255, 255, 255, 0.82);
}
.essec-footer a:hover {
  color: #ffffff;
}

/* Logo du pied de page en blanc monochrome (choix retenu).
   brightness(0) ramene toutes les couleurs au noir en conservant la
   transparence, puis invert(1) retourne ce noir en blanc : on obtient la
   silhouette du logo en blanc plein, alignee avec les textes du pied de page.
   L'ombre portee lui redonne un peu de relief sur le marine. */
.footer-logo {
  filter: brightness(0) invert(1) drop-shadow(0 2px 5px rgba(0, 0, 0, .35));
  opacity: .95;
  transition: opacity .15s ease;
}
.footer-logo:hover {
  opacity: 1;
}

/* Logos des partenaires (YSEM, IFTIC-SUP, Université de Douala) : même
   déclinaison blanche que le logo de l'école, pour un bandeau homogène.
   Opacité un peu plus basse au repos — ce sont des marques secondaires —
   et pleine au survol. */
.footer-partner-logo {
  filter: brightness(0) invert(1);
  opacity: .7;
  transition: opacity .15s ease;
}
.footer-partner-logo:hover {
  opacity: 1;
}

/* Blason de l'Université de Douala : forme ovale pleine et détaillée, qui
   deviendrait une tache uniforme si on l'aplatissait en blanc. Il garde donc
   ses couleurs, simplement éclairci pour tenir sur le marine. */
.footer-partner-logo-couleur {
  opacity: .85;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4));
  transition: opacity .15s ease;
}
.footer-partner-logo-couleur:hover {
  opacity: 1;
}

/* ===== LISIBILITÉ SUR FOND MARINE =====
   Les libellés utilisaient des bleus clairs (text-blue-100/200/300), pensés
   pour l'ancien bleu roi. Sur le marine #091D3E, ce bleu sur bleu manque de
   contraste. On repasse tout en blanc, en gardant deux niveaux de hiérarchie :
   blanc franc pour les liens et l'information utile, blanc atténué pour le
   texte secondaire. */
/* !important assumé : il s'agit de neutraliser des classes utilitaires
   (text-blue-100/200/300) posées directement sur les éléments. Sans cela,
   elles l'emportent et le texte reste bleu sur bleu. */
.essec-topbar [class*="text-blue-1"],
.essec-topbar [class*="text-blue-2"],
.essec-topbar [class*="text-blue-3"],
.essec-topbar a,
.essec-topbar span,
.essec-footer [class*="text-blue-1"],
.essec-footer [class*="text-blue-2"],
.essec-footer [class*="text-blue-3"],
.essec-footer a,
.essec-footer li {
  color: #ffffff !important;
}

/* Texte purement secondaire : blanc adouci, encore largement lisible. */
.essec-footer .text-slate-400,
.essec-footer .text-blue-400 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Séparateurs verticaux « | » de la barre supérieure : discrets mais visibles. */
.essec-topbar .text-blue-400 {
  color: rgba(255, 255, 255, 0.40) !important;
}

/* Survol : blanc pur et légèrement souligné, pour un repère net. */
.essec-topbar a:hover,
.essec-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== HERO OVERLAY ===== */
.hero-overlay {
  background: linear-gradient(135deg, rgba(30,58,138,0.78) 0%, rgba(30,64,175,0.65) 60%, rgba(30,64,175,0.30) 100%);
}

/* ===== STATS COUNTER ===== */
.stats-number {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

/* ===== PARTNER LOGOS ===== */
.partner-logo {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ===== SKIP NAVIGATION — WCAG 2.4.1 Level A ===== */
.skip-nav {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 9999;
  text-decoration: none;
}
.skip-nav:focus {
  position: fixed;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  padding: 0.75rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: #1e40af;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===== FIX COULEUR ICÔNES SVG DANS LIENS =====
   Problème : les navigateurs appliquent a:visited{color:purple} et a:link{color:blue}
   même quand color:inherit est déclaré dans le preflight Tailwind.
   Solution : forcer color:inherit avec une spécificité plus haute sur les zones
   à fond coloré, et color explicite sur la zone de navigation.
   ============================================= */

/* Topbar — fond bleu #1e3a8a, icônes/texte en bleu-200 */
.essec-topbar a:link,
.essec-topbar a:visited {
  color: #ffffff;
}

/* Footer — fond bleu #1e3a8a, icônes/texte en bleu-200 */
/* Blanc explicite plutôt que « inherit » : les liens portent des classes
   text-blue-* héritées de l'ancien bleu roi ; sur le marine, ils
   reprenaient ce bleu et devenaient peu lisibles. La pseudo-classe :link
   l'emporte sur un simple sélecteur de classe, d'où la correction ici. */
.essec-footer a:link,
.essec-footer a:visited {
  color: #ffffff;
}

/* Nav principale — fond blanc, liens en slate-600 / slate-700 */
.essec-main-nav a:link,
.essec-main-nav a:visited {
  color: inherit;
}

/* Sécurité globale : tout lien portant une classe text-* Tailwind
   conserve sa couleur même si le navigateur est plus strict sur a:visited.
   On re-déclare les valeurs les plus courantes du site. */
a.text-blue-200:link,  a.text-blue-200:visited  { color: rgb(191 219 254); }
a.text-blue-100:link,  a.text-blue-100:visited  { color: rgb(219 234 254); }
a.text-white:link,     a.text-white:visited      { color: #ffffff; }
a.text-slate-600:link, a.text-slate-600:visited  { color: rgb(71 85 105); }
a.text-slate-700:link, a.text-slate-700:visited  { color: rgb(51 65 85); }
a.text-essec-700:link, a.text-essec-700:visited  { color: rgb(30 64 175); }
a.text-essec-green-600:link, a.text-essec-green-600:visited { color: rgb(4 120 87); }