/* ==========================================================================
   Campus Nova – feuille de style personnelle (chargée après Bootstrap 5)
   Sommaire : 1. Variables  2. Base  3. Accessibilité  4. Composants Bootstrap
              adaptés  5. Sections  6. Pied de page  7. Media queries
   Mobile first : styles de base = petits écrans, ajouts en min-width.
   ========================================================================== */

/* 1. VARIABLES ------------------------------------------------------------ */
:root {
  --nv-navy: #17233c;       /* titres, fond sombre         (15,7:1 sur blanc) */
  --nv-blue: #3157d8;       /* accent principal, boutons    (6,0:1 sur blanc) */
  --nv-blue-dark: #2445b5;  /* survol des boutons */
  --nv-teal: #0b7b6f;       /* accent secondaire (texte)    (4,7:1 sur fond clair) */
  --nv-gray: #566179;       /* texte secondaire             (5,7:1 sur fond clair) */
  --nv-tint: #f2f5fd;       /* fond clair bleuté */
  --nv-line: #cfd6ea;       /* bordure des cartes */
  --nv-field: #66708a;      /* bordure des champs           (4,9:1 sur blanc) */
  --nv-focus-light: #ffd166;/* focus sur fond sombre */

  --bs-body-color: var(--nv-navy);
  --bs-link-color: var(--nv-blue);
  --bs-link-hover-color: var(--nv-blue-dark);
}

/* 2. BASE ----------------------------------------------------------------- */
h1, h2, h3 {
  font-weight: 800;
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  margin-bottom: .5rem;
}

.section {
  padding-block: 2.5rem;
}

.section-intro {
  margin-bottom: 1.75rem;
  color: var(--nv-gray);
}

/* 3. ACCESSIBILITÉ -------------------------------------------------------- */
/* Lien d'évitement : visible uniquement au focus clavier */
.skip-link {
  position: absolute;
  left: .5rem;
  top: -4rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--nv-navy);
  color: #fff;
  border-radius: .375rem;
}
.skip-link:focus { top: .5rem; }

/* Focus visible et homogène */
a:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  outline: 3px solid var(--nv-blue);
  outline-offset: 3px;
  box-shadow: none;
}
.section-dark a:focus-visible { outline-color: var(--nv-focus-light); }

/* 4. COMPOSANTS BOOTSTRAP ADAPTÉS ---------------------------------------- */
/* Navbar */
.site-header { background: #fff; }

.navbar {
  --bs-navbar-color: var(--nv-navy);
  --bs-navbar-hover-color: var(--nv-blue);
  --bs-navbar-active-color: var(--nv-blue);
  --bs-navbar-brand-color: var(--nv-navy);
  --bs-navbar-brand-hover-color: var(--nv-navy);
  --bs-navbar-toggler-border-color: transparent;
  padding-block: .75rem;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
}
.brand-accent { color: var(--nv-blue); }

.navbar-toggler {
  background: var(--nv-tint);
  border-radius: .5rem;
}

.navbar-nav .nav-link { font-size: .9375rem; }

/* Boutons */
.btn {
  font-weight: 700;
  border-radius: .625rem;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nv-blue);
  --bs-btn-border-color: var(--nv-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nv-blue-dark);
  --bs-btn-hover-border-color: var(--nv-blue-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nv-blue-dark);
  --bs-btn-active-border-color: var(--nv-blue-dark);
}

/* Cartes */
.card {
  --bs-card-border-color: var(--nv-line);
  --bs-card-border-radius: 1rem;
  --bs-card-inner-border-radius: calc(1rem - 1px);
  --bs-card-color: var(--nv-navy);
}
.card-body { padding: 1.5rem; }

.card-number {
  margin-bottom: .75rem;
  font-size: .875rem;
  font-weight: 800;
  color: var(--nv-teal);
}
.card-title { font-size: 1.25rem; margin-bottom: .75rem; }
.card-text  { margin-bottom: 0; font-size: .9375rem; color: var(--nv-gray); }

/* Formulaire */
.form-label {
  margin-bottom: .375rem;
  font-size: .875rem;
  font-weight: 700;
}

.form-control,
.form-select {
  min-height: 2.75rem;
  border: 2px solid var(--nv-field);
  border-radius: .5rem;
  color: var(--nv-navy);
}
.form-select:invalid { color: var(--nv-gray); } /* aspect « placeholder » */

.form-check-input { border: 2px solid var(--nv-field); }
.form-check-input:checked {
  background-color: var(--nv-blue);
  border-color: var(--nv-blue);
}
.form-check-label { font-size: .875rem; }

.form-text {
  color: var(--nv-gray);
  font-size: .875rem;
}

#retour-formulaire:empty { display: none; }

/* 5. SECTIONS ------------------------------------------------------------- */
/* Héros */
.hero { background: var(--nv-tint); }

.eyebrow {
  margin-bottom: .75rem;
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nv-teal);
}

.hero h1 {
  max-width: 10.5em; /* coupe le titre comme la maquette */
  margin-bottom: 1rem;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
}

.hero-text {
  max-width: 32rem;
  margin-bottom: 1.5rem;
  font-size: 1.0625rem;
  color: var(--nv-gray);
}

.session-info {
  margin: 1rem 0 0;
  font-size: .8125rem;
  color: var(--nv-gray);
}

.hero-img { display: block; width: 100%; height: auto; }

/* Indicateurs */
.stats-section { padding-block: 2rem 0; }

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--nv-blue);
}
.stat-label {
  display: block;
  font-size: .9375rem;
  color: var(--nv-gray);
}

/* Section contrastée (atouts) */
.section-dark {
  background: var(--nv-navy);
  color: #fff;
}
.section-dark h2 { color: #fff; margin-bottom: 1.5rem; }

.benefits {
  font-weight: 700;
}
.benefits li {
  display: flex;
  align-items: center;
  gap: .875rem;
}

/* Pastille ✓ décorative */
.check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--nv-teal);
  color: #fff;
  font-size: .875rem;
}

/* 6. PIED DE PAGE --------------------------------------------------------- */
.site-footer {
  padding-block: 1.75rem;
  background: var(--nv-tint);
  font-size: .875rem;
}
.footer-brand {
  margin-bottom: .25rem;
  font-size: 1rem;
  font-weight: 800;
}
.footer-links { margin-bottom: .25rem; }
.footer-links a {
  display: inline-block;
  padding-block: .375rem; /* zone cliquable confortable */
  color: var(--nv-navy);
  text-decoration: underline;
}
.footer-links a:hover { color: var(--nv-blue); }
.footer-links .list-inline-item:not(:last-child)::after {
  content: "•";
  margin-left: .5rem;
}
.footer-legal { margin-bottom: 0; color: var(--nv-gray); }

/* 7. MEDIA QUERIES (mobile first) ---------------------------------------- */
@media (min-width: 768px) {
  .section { padding-block: 3.5rem; }
  .stats-section { padding-block: 2.5rem 0; }
}

@media (min-width: 992px) {
  .hero { padding-block: 3.5rem; }
  .card-body { padding: 1.75rem; }
}