/* =====================================================================
   Université Unda — feuille de style du site public.

   Palette tirée du logo : le bleu ciel dégradé de la silhouette porte les
   accents, le bleu marine du mot « UNDA » porte les fonds sombres et les
   textes, l'argent de l'éclair sert aux séparateurs. Le blanc domine.
   ===================================================================== */
:root {
  --ciel: #3FA0D4;          /* bleu ciel du logo */
  --ciel-vif: #6FBEE3;      /* haut du dégradé — accents sur fond sombre */
  --ciel-fonce: #1B75BC;    /* bas du dégradé — liens et boutons */
  --marine: #262262;        /* le mot « UNDA » — fonds sombres, titres */
  --marine-clair: #363080;
  --argent: #D9DCE1;        /* l'éclair */

  --blanc: #ffffff;
  --fond: #F6F9FC;          /* fond des sections claires */
  --encre: #1B2233;         /* texte courant */
  --gris: #6B7A90;
  --ligne: #E4EAF1;

  --ombre: 0 4px 20px rgba(27, 34, 51, .06);
  --ombre-forte: 0 18px 45px rgba(38, 34, 98, .14);
  --rayon: 16px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--encre);
  background: var(--blanc);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  color: var(--marine);
  letter-spacing: -.02em;
}

a { text-decoration: none; }

/* ══════════════════════════ NAVBAR ══════════════════════════ */
.navbar {
  background: var(--blanc);
  box-shadow: 0 1px 0 var(--ligne);
  padding: .85rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar-brand { display: flex; align-items: center; gap: .7rem; }
.navbar-brand .brand-logo { height: 46px; flex-shrink: 0; }
/* Hauteur imposée, largeur libre : le logo n'est pas carré, le contraindre
   dans un carré l'écraserait. */
.navbar-brand .brand-logo img {
  height: 46px; width: auto; display: block; object-fit: contain;
}
.brand-text { line-height: 1.15; }
.brand-text strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--marine);
  letter-spacing: .02em;
  display: block;
}
.brand-text small {
  display: block;
  font-size: .56rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
}

.nav-link {
  font-weight: 600;
  font-size: .875rem;
  color: var(--encre) !important;
  padding: .5rem .85rem !important;
  position: relative;
  transition: color .2s;
}
.nav-link:hover { color: var(--ciel-fonce) !important; }
.nav-link.active { color: var(--ciel-fonce) !important; }
/* Soulignement court sous l'onglet courant, comme sur la maquette. */
.nav-link.active::after {
  content: '';
  position: absolute; bottom: -2px; left: .85rem; right: .85rem;
  height: 3px; border-radius: 3px; background: var(--ciel-fonce);
}

.navbar .dropdown-menu {
  border: 1px solid var(--ligne);
  border-radius: 14px;
  box-shadow: var(--ombre-forte);
  padding: .5rem;
  min-width: 290px;
}
.navbar .dropdown-item {
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem .7rem;
  white-space: normal;
  color: var(--encre);
}
.navbar .dropdown-item:hover { background: #EAF4FB; color: var(--ciel-fonce); }
.navbar .dropdown-item small {
  display: block; color: var(--gris); font-size: .72rem; font-weight: 500;
}

.btn-espace {
  background: var(--ciel-fonce); color: var(--blanc) !important;
  border-radius: 999px; font-weight: 700;
  padding: .62rem 1.3rem !important;
  font-size: .84rem;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: background .2s, transform .15s;
}
.btn-espace:hover { background: var(--marine); transform: translateY(-1px); }
.btn-espace::after { display: none; }

/* ══════════════════════════ BOUTONS ══════════════════════════ */
.btn-ciel {
  background: var(--ciel-fonce); color: var(--blanc);
  border: none; border-radius: 999px;
  padding: .8rem 1.6rem; font-weight: 700; font-size: .88rem;
  transition: background .2s, transform .15s, box-shadow .2s;
  display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: 0 6px 18px rgba(27, 117, 188, .28);
}
.btn-ciel:hover {
  background: var(--marine); color: var(--blanc);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38, 34, 98, .28);
}

.btn-ciel-outline {
  border: 2px solid var(--ciel-fonce);
  color: var(--ciel-fonce);
  background: transparent; border-radius: 999px;
  padding: .68rem 1.5rem; font-weight: 700; font-size: .85rem;
  transition: background .2s, color .2s;
  display: inline-flex; align-items: center; gap: .45rem;
}
.btn-ciel-outline:hover { background: var(--ciel-fonce); color: var(--blanc); }

/* Bouton sombre, utilisé sous les titres de section (cf. maquette). */
.btn-marine {
  background: var(--marine); color: var(--blanc);
  border: none; border-radius: 999px;
  padding: .75rem 1.5rem; font-weight: 700; font-size: .85rem;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: background .2s, transform .15s;
}
.btn-marine:hover { background: var(--ciel-fonce); color: var(--blanc); transform: translateY(-2px); }

.btn-outline-white {
  background: var(--blanc); color: var(--marine);
  border: none;
  border-radius: 999px; padding: .8rem 1.5rem;
  font-weight: 700; font-size: .88rem;
  transition: transform .15s, box-shadow .2s;
  display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.btn-outline-white:hover { color: var(--ciel-fonce); transform: translateY(-2px); }

/* ══════════════════════════ HERO ══════════════════════════ */
/* `min-height` fixe donne au bandeau un format constant (≈ 3/1 en grand
   écran) : les photos à téléverser ont donc une taille cible connue, et le
   recadrage `cover` ne rogne presque rien quand elle est respectée. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--marine);
  padding: 5rem 0 7rem;
  min-height: 640px;
  display: flex;
  align-items: center;
}
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0;
  /* Cadrage sur le tiers supérieur : sur une photo de groupe, ce sont les
     visages qu'il faut garder, pas le sol. */
  background-position: center 30%;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero-slide.active { opacity: 1; }
/* Voile marine : le texte blanc reste lisible quelle que soit la photo
   téléversée depuis l'administration. */
.hero-slides::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(38, 34, 98, .96) 0%,
              rgba(38, 34, 98, .86) 38%,
              rgba(27, 117, 188, .55) 100%);
}
/* Sans photo, le dégradé de marque tient lieu de fond. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, var(--marine) 0%, var(--marine-clair) 55%, var(--ciel-fonce) 100%);
}
.hero-slides { z-index: 1; }
.hero > .container { position: relative; z-index: 2; width: 100%; }
/* Courbe blanche qui referme le bandeau, comme sur la maquette. */
/* La section qui suit l'accueil est grise : la courbe prend sa couleur. */
.hero { --courbe: var(--fond); }
.hero::after {
  content: '';
  position: absolute; z-index: 2;
  left: -6%; right: -6%; bottom: -70px; height: 140px;
  background: var(--courbe);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.hero-eyebrow {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ciel-vif); font-weight: 700; margin-bottom: 1rem;
  display: flex; align-items: center; gap: .6rem;
}
.hero-eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--ciel-vif); border-radius: 2px;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  color: var(--blanc); line-height: 1.12; margin-bottom: 1.2rem;
}
.hero h1 span { color: var(--ciel-vif); }
.hero p.hero-intro {
  color: rgba(255, 255, 255, .82);
  font-size: .98rem;
  max-width: 33rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

/* Carte flottante des atouts, en bas à droite du hero. */
.hero-atouts {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: .6rem;
}
.hero-atout {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .85rem .9rem;
  border-radius: 12px;
}
.hero-atout + .hero-atout { border-top: 1px solid var(--ligne); }
.hero-atout .atout-icone {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.atout-icone.t1 { background: #E7F3FB; color: var(--ciel-fonce); }
.atout-icone.t2 { background: #E9E8F4; color: var(--marine); }
.atout-icone.t3 { background: #EEF1F5; color: var(--marine-clair); }
.hero-atout h6 { font-size: .86rem; margin: 0 0 .15rem; font-weight: 700; }
.hero-atout p { font-size: .74rem; color: var(--gris); margin: 0; line-height: 1.5; }

/* Indicateurs du diaporama. */
.hero-points {
  display: flex; gap: .4rem; justify-content: center;
  position: relative; z-index: 3; margin-top: 2.5rem;
}
.hero-points span {
  width: 26px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .35);
}
.hero-points span.actif { background: var(--ciel-vif); width: 38px; }

/* ══════════════════ EN-TÊTES DE SECTION ══════════════════ */
.section-eyebrow {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ciel-fonce); font-weight: 800; margin-bottom: .6rem;
}
.section-title { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.section-divider {
  width: 54px; height: 4px; background: var(--ciel);
  border-radius: 4px; margin: 1rem auto 0;
}
.section-divider.left { margin: 1rem 0 0; }

.section-ciel { background: var(--fond); padding: 70px 0; }
.section-white { background: var(--blanc); padding: 70px 0; }
.cartes { background: var(--fond); padding: 70px 0; }

/* ══════════════════════════ CARTES ══════════════════════════ */
.carte {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.6rem 1.4rem;
  height: 100%;
  box-shadow: var(--ombre);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  /* Colonne flexible : le lien reste collé en bas, les cartes d'une même
     rangée s'alignent quelle que soit la longueur du texte. */
  display: flex;
  flex-direction: column;
  text-align: left;
}
.carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-forte);
  border-color: #CFE3F3;
}
.carte-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
  font-size: 1.35rem;
}
/* Quatre teintes de la marque, alternées d'une carte à l'autre. */
.carte-icon.t1 { background: #E7F3FB; color: var(--ciel-fonce); }
.carte-icon.t2 { background: #E9E8F4; color: var(--marine); }
.carte-icon.t3 { background: #DFF0F9; color: #17679C; }
.carte-icon.t4 { background: #EEF1F5; color: var(--marine-clair); }

.carte h5 { font-size: 1rem; margin-bottom: .5rem; line-height: 1.35; }
.carte p { font-size: .82rem; color: var(--gris); line-height: 1.65; margin-bottom: .6rem; }
.carte-img {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  display: block;
}
.carte .carte-lien { margin-top: auto; padding-top: .8rem; }
.carte-lien {
  color: var(--ciel-fonce); font-size: .8rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .35rem;
  transition: gap .2s;
}
.carte-lien:hover { color: var(--marine); gap: .55rem; }

.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pastilles de cycle (licence / master) */
.cycle-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .25rem .65rem; border-radius: 999px;
}
.cycle-licence { background: #E7F3FB; color: var(--ciel-fonce); }
.cycle-master { background: #E9E8F4; color: var(--marine); }
/* La durée accompagne le cycle sans lui faire concurrence : pas de
   majuscules ni de couleur d'accent, c'est une précision, pas une étiquette. */
.duree-badge {
  background: var(--fond); color: var(--gris);
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .72rem;
}
.carte-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .7rem; }
.carte-faculte {
  font-size: .72rem; color: var(--gris); font-weight: 600; margin-bottom: .3rem;
}

.faculte-card .carte-icon { margin: 0 0 1rem; }
.faculte-cycles { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }
.faculte-compte {
  font-size: .76rem; font-weight: 700; color: var(--ciel-fonce);
  display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem;
}

/* Liste des formations d'une faculté */
.formation-row {
  display: flex; align-items: center; gap: 1rem;
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: .75rem;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.formation-row:hover {
  border-color: var(--ciel); transform: translateX(4px);
  box-shadow: var(--ombre); color: inherit;
}
.formation-row .formation-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: #E7F3FB; color: var(--ciel-fonce);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.formation-row h6 { font-size: .94rem; margin: 0 0 .2rem; font-weight: 700; }
.formation-row p { font-size: .76rem; color: var(--gris); margin: 0; }
.formation-row .chevron { margin-left: auto; color: var(--ciel); }

.cycle-titre { display: flex; align-items: center; gap: .8rem; margin: 2.2rem 0 1.2rem; }
.cycle-titre h3 { font-size: 1.25rem; margin: 0; }
.cycle-titre span { font-size: .78rem; color: var(--gris); font-weight: 600; }
.cycle-titre::after { content: ''; flex: 1; height: 1px; background: var(--ligne); }

/* Pastille d'option (cours en ligne, double certification, double diplôme) */
.option-badge {
  background: rgba(38, 34, 98, .07); color: var(--marine);
  text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .7rem;
}
.option-badge i { font-size: .78rem; color: var(--ciel-fonce); }

/* Options détaillées, sur la fiche d'une formation */
.options-formation {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; margin: 1.6rem 0;
}
.option-detail {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--fond); border: 1px solid var(--ligne);
  border-radius: 14px; padding: 1rem;
}
.option-detail i { color: var(--ciel-fonce); font-size: 1.2rem; margin-top: 2px; }
.option-detail b { display: block; font-size: .88rem; color: var(--marine); }
.option-detail span { font-size: .78rem; color: var(--gris); line-height: 1.55; }

/* ═════════════════ DOUBLE CERTIFICATION ═════════════════ */
/* Section en deux colonnes visuel/texte : ni cartes ni panneau sombre, pour
   trancher avec les sections qui l'entourent. */
.certification { background: var(--fond); padding: 70px 0; }
.certification-visuel {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 20px; display: block;
  box-shadow: var(--ombre-forte);
}
.certification-points {
  display: flex; flex-direction: column; gap: .9rem; margin: 1.6rem 0;
}
.certification-point { display: flex; gap: .85rem; align-items: flex-start; }
.certification-point i {
  color: var(--ciel-fonce); font-size: 1.15rem; margin-top: 2px; flex-shrink: 0;
}
.certification-point b { display: block; font-size: .9rem; color: var(--marine); }
.certification-point span { font-size: .82rem; color: var(--gris); line-height: 1.6; }
.certification-compte { font-size: .84rem; color: var(--gris); margin-bottom: 1rem; }
.certification-compte b { color: var(--ciel-fonce); font-size: 1rem; }

/* ═══════════════════════ STATISTIQUES ═══════════════════════ */
/* Panneau marine posé sur fond blanc, comme sur la maquette. */
.stats-bar { background: var(--blanc); padding: 20px 0 60px; }
.stats-panel {
  background: linear-gradient(115deg, var(--marine) 0%, var(--marine-clair) 100%);
  border-radius: 20px;
  padding: 2.2rem;
  box-shadow: var(--ombre-forte);
}
.stat-item { display: flex; align-items: center; gap: 1rem; }
.stat-icon-wrap {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 1.4rem; color: var(--blanc);
}
.stat-icon-wrap.t1 { background: var(--ciel-fonce); }
.stat-icon-wrap.t2 { background: var(--ciel); }
.stat-icon-wrap.t3 { background: rgba(255, 255, 255, .16); }
.stat-icon-wrap.t4 { background: var(--ciel-vif); color: var(--marine); }
.stat-num { font-size: 1.7rem; font-weight: 800; color: var(--blanc); line-height: 1.1; }
.stat-label { font-size: .78rem; color: rgba(255, 255, 255, .62); margin: 0; font-weight: 600; }

/* ══════════════════════════ CAMPUS ══════════════════════════ */
.campus { padding: 60px 0; background: var(--blanc); }
.campus-left { padding-right: 2.5rem; }
.campus-card {
  border-radius: var(--rayon);
  overflow: hidden;
  height: 100%;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  box-shadow: var(--ombre);
  display: block;
  color: inherit;
  transition: transform .25s, box-shadow .25s;
}
a.campus-card:hover {
  transform: translateY(-4px); box-shadow: var(--ombre-forte); color: inherit;
}
a.campus-card:hover .campus-card-body h6 { color: var(--ciel-fonce); }
.campus-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  transition: transform .4s;
}
.campus-card:hover img { transform: scale(1.04); }
.campus-card-placeholder {
  aspect-ratio: 4 / 3; background: var(--fond); color: var(--gris);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .8rem;
}
.campus-card-body { padding: 1rem 1.1rem 1.1rem; }
.campus-card-body h6 { font-size: .93rem; margin-bottom: .2rem; font-weight: 700; }
.campus-card-body small { color: var(--gris); font-size: .78rem; }

.campus-carousel .carousel-inner { border-radius: var(--rayon); }
.campus-carousel .carousel-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.campus-carousel .carousel-indicators .active { background-color: var(--ciel-vif); }
.campus-carousel .carousel-caption {
  left: 1.5rem; right: auto; bottom: 1.5rem; text-align: left;
  background: linear-gradient(90deg, rgba(38, 34, 98, .82), rgba(38, 34, 98, .25));
  padding: .9rem 1.1rem; border-radius: 12px; max-width: 340px;
}
.campus-carousel .carousel-caption h5 { color: var(--blanc); font-size: 1rem; margin-bottom: .2rem; }
.campus-carousel .carousel-caption p { font-size: .82rem; margin: 0; }

/* ═════════════════════ CONTACT (accueil) ═════════════════════ */
.contact-highlight { background: var(--blanc); padding: 20px 0 60px; }
.contact-panel {
  background: linear-gradient(115deg, var(--marine) 0%, var(--marine-clair) 100%);
  border-radius: 20px;
  padding: 2.2rem;
  color: var(--blanc);
  box-shadow: var(--ombre-forte);
}
.contact-panel .section-eyebrow { color: var(--ciel-vif); }
.contact-panel .section-title,
.contact-panel h6 { color: var(--blanc); }
.contact-panel .text-muted { color: rgba(255, 255, 255, .75) !important; }
.contact-panel small { color: rgba(255, 255, 255, .8); }
.contact-panel .section-divider { background: var(--ciel-vif); }
.contact-item {
  display: flex; gap: .8rem; align-items: flex-start;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px; padding: .95rem 1rem; height: 100%;
}
.contact-item i { color: var(--ciel-vif); font-size: 1rem; margin-top: 2px; }
.contact-item h6 { margin-bottom: .2rem; font-size: .9rem; }
.contact-item small { font-size: .78rem; line-height: 1.6; }
.contact-cta {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--rayon); padding: 1.5rem;
}
.contact-cta h4 { font-size: 1.15rem; margin-bottom: .6rem; color: var(--blanc); }
.contact-cta p { font-size: .86rem; color: rgba(255, 255, 255, .78); line-height: 1.7; margin: 0; }

/* ═══════════════════════ ACTUALITÉS ═══════════════════════ */
.actualites { background: var(--fond); padding: 60px 0; }
/* Bloc blanc autour de chacune des trois colonnes, comme sur la maquette. */
.bloc-blanc {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.5rem;
  height: 100%;
}
.bloc-titre {
  display: flex; align-items: center; gap: .6rem;
  font-size: 1rem; font-weight: 800; color: var(--marine); margin: 0;
}
.bloc-titre .bloc-icone {
  width: 34px; height: 34px; border-radius: 10px;
  background: #E7F3FB; color: var(--ciel-fonce);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}

.news-card {
  background: var(--blanc);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ligne);
  color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.news-card:hover { box-shadow: var(--ombre); color: inherit; transform: translateY(-2px); }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-card-body { padding: 1rem; }
/* Variante en ligne (accueil) : vignette à gauche, texte à droite. */
.news-row { display: flex; gap: .9rem; align-items: stretch; padding: .6rem 0; }
.news-row + .news-row { border-top: 1px solid var(--ligne); }
.news-row img {
  width: 108px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; flex-shrink: 0;
}
.news-row .news-card-body { padding: 0; }
.news-badge {
  display: inline-block; font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .2rem .6rem; border-radius: 999px;
  margin-bottom: .45rem;
}
.badge-annonce { background: #E7F3FB; color: var(--ciel-fonce); }
.badge-event { background: #E9E8F4; color: var(--marine); }
.badge-campus { background: #E3F5EE; color: #0f8f63; }
.badge-partenariat { background: #FDF0DC; color: #a86a12; }
.badge-recherche { background: #EFEAFA; color: #6134c9; }
.news-card h6, .news-row h6 { font-size: .88rem; font-weight: 700; margin-bottom: .3rem; line-height: 1.4; }
.news-card p, .news-row p { font-size: .76rem; color: var(--gris); line-height: 1.55; margin-bottom: .35rem; }
.news-date { font-size: .7rem; color: var(--gris); font-weight: 600; }

/* Infos pratiques */
.info-row {
  display: flex; align-items: center;
  padding: .8rem 0; border-bottom: 1px solid var(--ligne);
  color: inherit;
  transition: color .15s;
}
.info-row:last-child { border-bottom: none; }
.info-row:hover h6 { color: var(--ciel-fonce); }
.info-icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: #E7F3FB; color: var(--ciel-fonce);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: .85rem; font-size: .95rem;
}
.info-icon.t2 { background: #E9E8F4; color: var(--marine); }
.info-icon i { font-size: .95rem; }
.info-row h6 { font-size: .84rem; font-weight: 700; margin: 0; }
.info-row small { font-size: .72rem; color: var(--gris); }
.info-row .chevron { margin-left: auto; color: var(--gris); }

/* Encadré citation */
.quote-card {
  background: linear-gradient(150deg, var(--marine) 0%, var(--marine-clair) 60%, var(--ciel-fonce) 100%);
  border-radius: var(--rayon);
  padding: 1.8rem; color: var(--blanc);
  box-shadow: var(--ombre-forte);
}
.quote-card .quote-icon { font-size: 2.2rem; color: var(--ciel-vif); line-height: 1; margin-bottom: .6rem; }
.quote-card blockquote { font-size: 1.1rem; font-weight: 700; line-height: 1.45; }
.quote-card p.sub { font-size: .82rem; color: rgba(255, 255, 255, .72); line-height: 1.7; }
.quote-card h5 { color: var(--blanc); }
/* Filet argenté entre la citation et son sous-texte (cf. maquette). */
.quote-separateur {
  width: 46px; height: 3px; background: var(--argent);
  border-radius: 3px; margin: 1.1rem 0;
}

/* ═══════════════════════ PIED DE PAGE ═══════════════════════ */
footer { background: var(--marine); color: rgba(255, 255, 255, .7); padding: 60px 0 0; }
/* Le logo est fourni en JPEG, donc sans transparence : posé tel quel sur le
   bleu marine, son fond clair formerait un rectangle. On l'assume en pastille
   blanche, comme les logos des partenaires juste en dessous. */
footer .footer-brand img {
  height: 46px; width: auto; object-fit: contain;
  background: var(--blanc); border-radius: 10px; padding: .2rem .3rem;
}
footer .footer-brand strong { font-size: 1.4rem; font-weight: 800; color: var(--blanc); display: block; line-height: 1.1; }
footer .footer-brand small {
  display: block; font-size: .55rem; color: rgba(255, 255, 255, .5);
  text-transform: uppercase; letter-spacing: .09em; font-weight: 600;
}
footer .footer-brand p { font-size: .8rem; line-height: 1.7; margin-top: .9rem; }
footer h6 { color: var(--blanc); font-weight: 800; font-size: .92rem; margin-bottom: 1.1rem; }
footer a { color: rgba(255, 255, 255, .68); font-size: .82rem; transition: color .2s; }
footer a:hover { color: var(--ciel-vif); }
footer ul { list-style: none; padding: 0; margin: 0; }
footer ul li { margin-bottom: .55rem; }
.footer-contact-item {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: .7rem; font-size: .82rem;
}
.footer-contact-item i { color: var(--ciel-vif); font-size: .9rem; margin-top: 3px; flex-shrink: 0; }
.social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .8) !important;
  font-size: .9rem; transition: background .2s;
  margin-right: .4rem;
}
.social-icons a:hover { background: var(--ciel-fonce); color: var(--blanc) !important; }

.footer-partenaires {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2.5rem; padding-top: 1.6rem;
}
.footer-partenaires .partner-logos { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
/* Fond blanc sous les logos : la plupart sont fournis pour un fond clair et
   deviendraient illisibles sur le bleu marine du pied de page. */
.footer-partenaires .partner-logos img {
  max-height: 44px; width: auto; background: var(--blanc);
  border-radius: 10px; padding: .35rem .55rem;
}
.footer-partenaires .small { color: rgba(255, 255, 255, .45); font-size: .74rem; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center; padding: 1.2rem 0;
  font-size: .75rem; color: rgba(255, 255, 255, .45);
  margin-top: 2.5rem;
}

/* ═══════════════════════ ANIMATIONS ═══════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .7s ease both; }
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .35s; }
.delay-4 { animation-delay: .5s; }

/* Illustration d'une section (à propos, admission, fiche faculté…). */
.img-encart {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--rayon); box-shadow: var(--ombre-forte); display: block;
}

/* ═══════════════════ PAGES INTÉRIEURES ═══════════════════ */
.page-head {
  background: linear-gradient(115deg, var(--marine) 0%, var(--marine-clair) 60%, var(--ciel-fonce) 100%);
  position: relative; overflow: hidden;
  padding: 3.4rem 0 4.4rem; color: var(--blanc);
}
/* Blanche par défaut ; `sur-fond` quand la page enchaîne sur une section grise. */
.page-head { --courbe: var(--blanc); }
.page-head.sur-fond { --courbe: var(--fond); }
.page-head::after {
  content: '';
  position: absolute; left: -6%; right: -6%; bottom: -70px; height: 130px;
  background: var(--courbe);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.page-head .container { position: relative; z-index: 2; }
.page-head .breadcrumb-line {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin-bottom: .7rem; font-weight: 600;
}
.page-head .breadcrumb-line a { color: rgba(255, 255, 255, .82); }
.page-head .breadcrumb-line a:hover { color: var(--blanc); }
.page-head h1 { color: var(--blanc); font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin: 0; }
.page-head p.lead-sub {
  color: rgba(255, 255, 255, .78); font-size: .95rem; margin: .6rem 0 0; max-width: 62ch;
}
.page-head .cycle-badge { background: rgba(255, 255, 255, .16); color: var(--blanc); }

/* Onglets / filtres */
.tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.tab {
  border: 1px solid var(--ligne); background: var(--blanc); color: var(--encre);
  border-radius: 999px; padding: .5rem 1.15rem;
  font-size: .82rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all .2s; font-family: inherit;
}
.tab:hover { border-color: var(--ciel); color: var(--ciel-fonce); }
.tab.active {
  background: var(--ciel-fonce); border-color: var(--ciel-fonce); color: var(--blanc);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Liste à coches */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .75rem 0; border-bottom: 1px solid var(--ligne); font-size: .88rem;
}
.check-list li:last-child { border-bottom: none; }
.check-list li i { color: var(--ciel); font-size: 1.05rem; line-height: 1.4; }

/* Carte des dates */
.dates-card {
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: var(--rayon); padding: 1.5rem; box-shadow: var(--ombre);
}
.date-row { display: flex; gap: .9rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--ligne); }
.date-row:last-child { border-bottom: none; }
.date-row .info-icon { margin-right: 0; }
.date-row b { display: block; font-size: .85rem; }
.date-row span { font-size: .78rem; color: var(--gris); }

/* Étapes d'admission */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 2.5rem; }
.step {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px;
  padding: 1.1rem; display: flex; align-items: center; gap: .8rem; box-shadow: var(--ombre);
}
.step .num {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--fond); color: var(--gris);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0;
}
.step.active { border-color: var(--ciel); }
.step.active .num { background: var(--ciel-fonce); color: var(--blanc); }
.step span { font-size: .82rem; font-weight: 700; }
@media (max-width: 768px) { .stepper { grid-template-columns: repeat(2, 1fr); } }

/* Bande newsletter */
.newsletter-band {
  background: linear-gradient(115deg, var(--marine) 0%, var(--marine-clair) 100%);
  border-radius: 20px; padding: 2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; color: var(--blanc);
  box-shadow: var(--ombre-forte);
}
.newsletter-band h5 { color: var(--blanc); margin: 0 0 .25rem; }
.newsletter-band p { color: rgba(255, 255, 255, .68); font-size: .82rem; margin: 0; }
.newsletter-form { display: flex; gap: .6rem; flex: 1; min-width: 260px; max-width: 430px; }
.newsletter-form input {
  flex: 1; border: none; border-radius: 999px;
  padding: .7rem 1.15rem; font-size: .85rem; font-family: inherit;
}
.newsletter-form input:focus { outline: 2px solid var(--ciel-vif); }
.newsletter-form .btn-ciel { border: none; box-shadow: none; }

/* Formulaires */
.form-panel {
  background: var(--blanc); border: 1px solid var(--ligne);
  border-radius: var(--rayon); padding: 2rem; box-shadow: var(--ombre);
}
.form-panel label { font-size: .82rem; font-weight: 700; margin-bottom: .35rem; }
.form-panel .form-control {
  font-size: .88rem; padding: .7rem .95rem; border-radius: 12px;
  border-color: var(--ligne); font-family: inherit;
}
.form-panel .form-control:focus {
  border-color: var(--ciel);
  box-shadow: 0 0 0 .18rem rgba(63, 160, 212, .18);
}

.article-body { font-size: .95rem; line-height: 1.85; white-space: pre-line; }

.commodites-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  column-gap: 1.5rem;
}
.commodites-list li { border-bottom: 1px solid var(--ligne); }

/* Modales « Informations pratiques » */
.modal-unda .modal-content { border: none; border-radius: var(--rayon); overflow: hidden; }
.modal-unda .modal-header {
  background: linear-gradient(115deg, var(--marine), var(--marine-clair));
  border-bottom: 3px solid var(--ciel); padding: 1.1rem 1.4rem; gap: .8rem;
}
.modal-unda .modal-title { color: var(--blanc); font-size: 1.1rem; font-weight: 800; }
.modal-unda .modal-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center;
}
.modal-unda .modal-icon i { color: var(--blanc); font-size: 1rem; }
.modal-unda .modal-body { padding: 1.4rem; }
.modal-unda .modal-footer { border-top: 1px solid var(--ligne); padding: .95rem 1.4rem; }
.modal-unda .check-list li { font-size: .86rem; }

.modal-steps { display: flex; flex-direction: column; gap: .6rem; }
.modal-step {
  display: flex; align-items: center; gap: .8rem;
  background: var(--fond); border: 1px solid var(--ligne);
  border-radius: 12px; padding: .75rem .95rem; font-size: .86rem; font-weight: 700;
}
.modal-step .num {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: var(--ciel-fonce); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem;
}

/* ═══════════════════ POP-UP PROMOTIONNEL ═══════════════════ */
.popup-promo .modal-content {
  border: none; border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(38, 34, 98, .35);
}
.popup-promo .modal-dialog { max-width: 460px; }
.popup-visuel {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
.popup-corps { padding: 1.6rem 1.6rem 1.5rem; text-align: center; }
/* Sans visuel, le corps suit directement la croix : on dégage le titre pour
   qu'un intitulé long ne passe pas dessous. */
.popup-fermer + .popup-corps { padding-top: 3.2rem; }
.popup-corps h5 { font-size: 1.25rem; margin-bottom: .6rem; }
.popup-corps p {
  font-size: .88rem; color: var(--gris); line-height: 1.7; margin-bottom: 1.3rem;
}
.popup-actions {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.popup-actions .btn-ciel { justify-content: center; }
.popup-plus-tard {
  background: none; border: none; font-family: inherit;
  font-size: .8rem; font-weight: 600; color: var(--gris); cursor: pointer;
  padding: .3rem .6rem; border-radius: 8px;
}
.popup-plus-tard:hover { color: var(--marine); background: var(--fond); }
/* Croix posée sur le visuel : fond translucide pour rester visible quelle
   que soit la photo téléversée. */
.popup-fermer {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  width: 34px; height: 34px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--marine);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; cursor: pointer; box-shadow: var(--ombre);
  transition: background .2s, transform .15s;
}
.popup-fermer:hover { background: var(--blanc); transform: scale(1.06); }

/* Validation du formulaire de contact */
.champ-erreur {
  color: #c0392b; font-size: .78rem; margin-top: .35rem;
  display: flex; align-items: flex-start; gap: .3rem;
}
.champ-erreur::before { content: "\26A0"; }  /* ⚠ */
.champ-aide { color: var(--gris); font-size: .75rem; margin-top: .35rem; }
.form-panel .form-control.is-invalid { border-color: #c0392b; background-image: none; }
.form-panel .form-control.is-invalid:focus { box-shadow: 0 0 0 .18rem rgba(192, 57, 43, .16); }
#message-compteur.compteur-limite { color: #c0392b; font-weight: 700; }

/* Messages flash */
.flash-wrap {
  position: fixed; top: 92px; right: 20px; z-index: 2000;
  display: flex; flex-direction: column; gap: .6rem; max-width: 340px;
}
.flash {
  padding: .85rem 1.15rem; border-radius: 12px; color: var(--blanc);
  font-size: .85rem; font-weight: 600; box-shadow: var(--ombre-forte);
  animation: fadeUp .4s ease both;
}
.flash.success { background: #0f8f63; }
.flash.error { background: #c0392b; }
.flash.info { background: var(--ciel-fonce); }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 991px) {
  .navbar-nav { padding: .6rem 0; }
  .btn-espace { display: inline-flex; margin-top: .6rem; }
  .hero { padding: 3.5rem 0 5rem; min-height: 0; }
  .hero-atouts { margin-top: 2rem; }
  .campus-left { padding-right: 0; margin-bottom: 2rem; }
}
@media (max-width: 576px) {
  .news-row img { width: 84px; height: 72px; }
  .stats-panel, .contact-panel { padding: 1.5rem; }
}