/* ===================================================
   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); }


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — la saisie sur telephone

   Safari sur iOS zoome la page des qu'un champ dont la police est inferieure
   a 16 px recoit le focus, et ne dezoome pas ensuite : la page reste agrandie
   et il faut la faire defiler lateralement pour lire la suite. Le reglage se
   fait donc champ par champ, du cote du site.

   Releve sur un ecran de 375 x 812, avant correctif : 9 des 10 champs du
   formulaire de contact etaient concernes, ainsi que le champ d'inscription a
   la lettre d'information, present dans le pied de page de toutes les pages.

   Les formulaires de candidature ont leur propre bloc dans
   concours_wizard.css : cette regle-ci couvre tout le reste du site.

   Cases a cocher, boutons radio et curseurs sont exclus : leur taille ne
   depend pas de la police, et iOS ne zoome pas dessus.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}