/* ==========================================================
   PAGE CAMPUS — css/test/campus-vincennes.css
   Grille et espacements : Bootstrap (container-lg, row, col, g-*, py-*).
   Ce fichier ne contient que ce que Bootstrap ne fait pas.
   ========================================================== */


   /* TEST : masque la partie visible de l'ancien footer (les modales et les scripts restent actifs) */
#footer .bg-gray > nav > .container-lg,
#bottom-area { display: none; }

/* ---------- 0. Correctif gouttières (bootstrap_min.css cassé) ----------
   À supprimer quand bootstrap_min.css sera régénéré. */
#f2i-campus .container-lg { padding-inline: calc(var(--bs-gutter-x) * .5); }
#f2i-campus .row {
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-inline: calc(-.5 * var(--bs-gutter-x));
}
#f2i-campus .row > * { padding-inline: calc(var(--bs-gutter-x) * .5); }

/* ---------- 1. Base ---------- */
.f2i-cp {
  --cp-dark: #15172D;

  --cp-light: #f4f5f7;
  --cp-space-section: 64px;
  --bs-border-color: #e3e5ea; /* couleur de .border / .border-top sur cette page */
}
.f2i-cp-section { padding-block: var(--cp-space-section); }
.f2i-cp-section-top { padding-top: var(--cp-space-section); }
#f2i-campus p { text-align: inherit; }          /* annule le justify du thème */
.f2i-cp a:not(.btn) { color: inherit; text-decoration: none; }

.f2i-cp-light { background: var(--cp-light); }
.f2i-cp-dark { background: var(--cp-dark); color: #d6d8df; }
.f2i-cp-red { color: var(--bs-red-f2i); }

/* ---------- 2. Titres ---------- */
.f2i-cp .f2i-cp-title { margin-bottom: 2rem; line-height: 1.3; text-transform: uppercase; }
.f2i-cp .f2i-cp-h3 { margin-bottom: 8px; line-height: 1.4; }
.f2i-cp-dark .f2i-cp-h3 { color: #fff; }

/* Trait rouge sous un titre */
.f2i-cp-bar { position: relative; padding-bottom: 18px; }
.f2i-cp-bar::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; background: var(--bs-red-f2i); }

/* ---------- 3. Éléments communs ---------- */
.f2i-cp-icon { display: block; margin-bottom: 12px; font-size: 28px; color: var(--bs-red-f2i); line-height: 1; }

.f2i-cp-more { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--bs-red-f2i) !important; }
.f2i-cp-more.text-white { color: #fff !important; }
.f2i-cp-more i { font-size: 11px; transition: transform .2s; }
.f2i-cp a:hover .f2i-cp-more i,
.f2i-cp a.f2i-cp-more:hover i { transform: translateX(4px); }

/* Image recadrée (Bootstrap 5.2 n'a pas object-fit) */
.f2i-cp-cover { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.f2i-cp-natural { display: block; width: 100%; height: auto; }

/* ---------- 4. Hero ---------- */
.f2i-cp-hero {
  position: relative;
  padding: 24px 0 88px;
  background: var(--cp-dark) center / cover no-repeat;
  color: #fff;
  overflow: hidden;
}
.f2i-cp-hero > * { position: relative; z-index: 2; }
.f2i-cp-hero > .f2i-cp-hero__bg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f2i-cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(21, 23, 45, .92) 0%, rgba(21, 23, 45, .6) 55%, rgba(21, 23, 45, .25) 100%);
   z-index: 1;
}
.f2i-cp-hero > * { position: relative; }
.f2i-cp-breadcrumb { margin-bottom: 72px; }
.f2i-cp-breadcrumb li + li::before { content: ">"; margin-inline: 8px; opacity: .7; }
.f2i-cp .f2i-cp-hero__title { margin-bottom: 28px; }
.f2i-cp-hero__title.f2i-cp-bar::after { width: 56px; height: 4px; }

/* ---------- 5. Image avec trame de points + carré rouge ---------- */
.f2i-cp-figure { position: relative; padding: 0 28px 28px 0; }
.f2i-cp-figure img { position: relative; z-index: 1; }
.f2i-cp-figure::before {
  content: "";
  position: absolute;
  top: -30px;
  right: 0;
  width: 96px;
  height: 96px;
  background: radial-gradient(currentColor 1.5px, transparent 1.6px) 0 0 / 12px 12px;
  opacity: .35;
}
.f2i-cp-figure::after { content: ""; position: absolute; z-index: 2; right: 12px; bottom: 12px; width: 36px; height: 36px; background: var(--bs-red-f2i); }
.f2i-cp-figure--left { padding: 0 0 28px 28px; }
.f2i-cp-figure--left::before { right: auto; left: 0; }
.f2i-cp-figure--left::after { right: auto; left: 12px; }

/* ---------- 6. Galerie ---------- */
.f2i-cp-cover--gallery { aspect-ratio: 4 / 3.5; }
/* Scrollbar de la galerie : sous les images, pas par-dessus */
#f2i-campus .f2i-cp-swiper .swiper-scrollbar {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  height: 4px;
  margin-top: 16px;
}
#f2i-campus .f2i-cp-swiper .swiper-scrollbar-drag { background: var(--bs-red-f2i); }

/* ---------- 7. Onglets formations ---------- */
.f2i-cp-tabs { gap: 8px 30px; border-bottom: 2px solid var(--bs-border-color); }
.f2i-cp-tab {
  margin-bottom: -2px;
  padding: 12px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-weight: 700;
  text-transform: uppercase;
}
.f2i-cp-tab:hover,
.f2i-cp-tab.active { color: var(--bs-red-f2i); }
.f2i-cp-tab.active { border-bottom-color: var(--bs-red-f2i); }
.f2i-cp-tab:focus-visible { outline: 2px solid var(--bs-red-f2i); outline-offset: 2px; }
/* Carte formation : bordure bleu nuit identique pour toutes, couleur du niveau sur l'icône uniquement */
.f2i-cp-formation {
  --niveau: var(--bs-red-f2i);                                       /* par défaut */
  background: #fff;
  border: 1px solid var(--cp-dark);                                  /* #15172D */
}
.f2i-cp-formation--avant-bac { --niveau: var(--bs-heading-color); }  /* Avant Bac */
.f2i-cp-formation--bac2      { --niveau: var(--bs-yellow-f2i); }     /* Bac+2 */
.f2i-cp-formation--niveau-6  { --niveau: var(--bs-blue-f2i); }       /* Niveau 6 */
.f2i-cp-formation--niveau-7  { --niveau: var(--bs-red-f2i); }        /* Niveau 7 */

/* Icône ronde : couleur et teinte de fond selon le niveau */
.f2i-cp-formation__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, .05);                                    /* navigateurs anciens */
  background: color-mix(in srgb, var(--niveau) 12%, transparent);
  font-size: 20px;
  color: var(--niveau);
}
.f2i-cp-formation__badge { padding: 4px 10px; background: var(--cp-dark); font-size: 11px; letter-spacing: .04em; color: #fff; }

/* "En savoir plus" : rouge (règle générale .f2i-cp-more), sans effet au survol */
.f2i-cp-formation .f2i-cp-more i { transition: none; transform: none !important; }

/* ---------- 8. Cartes campus ---------- */
.f2i-cp-campus { position: relative; min-height: 220px; overflow: hidden; background: var(--cp-dark) center / cover no-repeat; }
.f2i-cp-campus::before { content: ""; position: absolute; inset: 0; background: rgba(21, 23, 45, .6); transition: background .2s; }
.f2i-cp-campus:hover::before { background: rgba(21, 23, 45, .75); }
.f2i-cp-campus > * { position: relative; }

/* ---------- 9. Événements ---------- */
.f2i-cp-event__date { width: 56px; line-height: 1.1; }

/* ---------- 10. Bandeau CTA ---------- */
.f2i-cp-cta-icon { width: 58px; height: 58px; background: var(--bs-red-f2i); }
@media (min-width: 992px) {
  .f2i-cp { --cp-space-section: 80px; }
}
/* ---------- 11. Responsive (seuil identique au footer : 992px) ---------- */
@media (max-width: 991.98px) {
  .f2i-cp-hero { padding-bottom: 64px; }
  .f2i-cp-breadcrumb { margin-bottom: 48px; }
  .f2i-cp-tabs { gap: 8px 24px; font-size: 12px; }

  /* Trait rouge centré sous les titres centrés en mobile */
  #f2i-campus .text-lg-start .f2i-cp-bar::after,
  #f2i-campus .f2i-cp-bar.text-lg-start::after { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 575.98px) {
  /* Onglets : grille 2 x 2 en boutons pleins */
  .f2i-cp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-bottom: 0; }
  .f2i-cp-tab { margin: 0; padding: 12px 8px; border: 0; background: var(--cp-light); text-align: center; }
  .f2i-cp-tab.active,
  .f2i-cp-tab.active:hover { background: var(--bs-red-f2i); color: #fff; }
}