/* Polices Google : doit rester en première ligne */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@700&family=Open+Sans:wght@400;600&family=Montserrat:wght@300&display=swap');

/* =========================================
   RÉGLAGES (modifiez ici)
   ========================================= */
:root {
  --police-titre: "Source Serif 4", Georgia, serif;
  --police-texte: "Open Sans", Arial, sans-serif;
  --police-fine:  "Montserrat", Arial, sans-serif;

  --cassiopeia-color-primary: #001B4C;
  --cassiopeia-color-link: #001B4C;
  --cassiopeia-color-hover: #0B3D91;
}

/* =========================================
   EN-TÊTE
   ========================================= */
.container-header {
  background-color: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #e5e5e5;
}
.navbar-brand .brand-logo img {
  width: 160px;
  height: auto;
}
.container-header .site-description {
  display: none;
}

/* Logo, menu et recherche sur une seule ligne (ordinateur) */
@media (min-width: 992px) {
  .container-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-inline: max(1rem, calc((100% - 1320px) / 2));
  }
  .container-header > .grid-child {
    margin: 0;
    max-width: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .container-header > .grid-child:first-child {
    flex: 0 0 auto;
  }
  .container-header > .container-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
  }
  .container-header .container-nav .navbar,
  .container-header .container-search,
  .container-header .container-search form {
    margin: 0;
  }
}

/* Menu : petites capitales espacées */
.container-header .metismenu > li > a {
  font-family: var(--police-texte);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #222;
}
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li.active > a {
  color: #0B3D91;
}
.container-header .metismenu > li > a::after {
  background: #0B3D91;
}
.container-header .navbar-toggler {
  color: #001B4C;
  border-color: #001B4C;
}

/* =========================================
   BANDEAU ALUMNI
   ========================================= */
.container-banner {
  display: grid;
  grid-template-columns: subgrid;
  background: none;
}
.container-banner .mod-custom {
  grid-column: main-start / main-end;
  padding: 2.5rem 0 1.5rem;
}
.container-banner h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  margin-bottom: 1.5rem;
  color: #111;
}
.container-banner h2 {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  color: #222;
}
.container-banner h5 {
  font-family: var(--police-fine);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.6vw, 2.1rem);
  line-height: 1.35;
  color: #333;
}

/* =========================================
   BLOC « JE SUIS ÉLÈVE… »
   ========================================= */
.container-top-a .card {
  background-color: #ececec;
  border: none;
}
.container-top-a .card-body {
  padding: 2rem;
}

/* =========================================
   PIED DE PAGE
   ========================================= */
.container-footer {
  background-color: #1e1e1e !important;
  background-image: none !important;
  color: #d0d0d0;
}
.container-footer a {
  color: #ffffff;
}
/* =========================================
   TÉLÉPHONE : Connexion sous « Je suis élève… »,
   Derniers inscrits tout en bas
   ========================================= */
@media (max-width: 991.98px) {
  .site-grid {
    grid-template-areas:
      ". banner banner banner banner ."
      ". top-a top-a top-a top-a ."
      ". top-b top-b top-b top-b ."
      ". side-r side-r side-r side-r ."
      ". comp comp comp comp ."
      ". side-l side-l side-l side-l ."
      ". bot-a bot-a bot-a bot-a ."
      ". bot-b bot-b bot-b bot-b .";
  }
  /* Les modules de la colonne de droite se placent un par un */
  .container-sidebar-right {
    display: contents;
  }
  .container-sidebar-right > .card {
    grid-column: main-start / main-end;
    margin-bottom: 1em;
  }
  /* Connexion : remontée */
  .container-sidebar-right > .card:has(.mod-login) {
    grid-area: side-r;
  }
  /* Les autres modules : tout en bas */
  .container-sidebar-right > .card:nth-child(2) { grid-row: 20; }
  .container-sidebar-right > .card:nth-child(3) { grid-row: 21; }
  .container-sidebar-right > .card:nth-child(4) { grid-row: 22; }
  .container-sidebar-right > .card:nth-child(5) { grid-row: 23; }
}
/* =========================================
   BOUTON « HAUT DE PAGE »
   ========================================= */
.back-to-top-link {
  background-color: #2b2b2b !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  background-color: #ffffff !important;
  color: #2b2b2b !important;
  border-color: #2b2b2b !important;
}
/* =========================================
   MOSAÏQUE DES AFFICHES JPO (page Historique)
   ========================================= */
.mosaique-jpo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2rem 1.5rem;
  margin: 2rem 0;
}
.mosaique-jpo a {
  display: block;
  text-decoration: none;
  color: #222;
}
.mosaique-jpo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.414;          /* format affiche A */
  object-fit: cover;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mosaique-jpo a:hover img,
.mosaique-jpo a:focus img {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .2);
}
.mosaique-jpo span {
  display: block;
  margin-top: .6rem;
  font-family: var(--police-texte);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: #555;
}
@media (max-width: 575.98px) {
  .mosaique-jpo {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1rem;
  }
}