/* ========================================================
   MAIN.CSS — Boost Academy V2
   Palette : bleu nuit #0B1F3A, bleu royal #1D4ED8,
             doré #F59E0B, fond clair #F8FAFC,
             texte principal #111827, texte secondaire #6B7280,
             succès #16A34A, danger #DC2626, blanc #FFFFFF
   ======================================================== */

/* -------- RESET & BASE -------- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  color: #111827;
  background-color: #F8FAFC;
  margin: 0;
  line-height: 1.6;
}

/* Liens globaux */
a {
  color: #1D4ED8;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #0B1F3A;
  text-decoration: underline;
}

/* -------- TYPOGRAPHIE -------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #0B1F3A;
}

/* -------- NAVBAR CUSTOM -------- */
.navbar-custom {
  background-color: #0B1F3A;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-custom .navbar-brand {
  color: #FFFFFF;
  font-size: 1.25rem;
  letter-spacing: -0.5px;
}

.navbar-custom .navbar-brand:hover {
  color: #FFFFFF;
}

.text-gold {
  color: #F59E0B !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s, color 0.2s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #F59E0B;
  background-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-nav .nav-link.active {
  color: #F59E0B;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Boutons navbar */
.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.9);
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.btn-gold {
  background-color: #F59E0B;
  color: #0B1F3A;
  border-color: #F59E0B;
  font-weight: 600;
}

.btn-gold:hover,
.btn-gold:focus {
  background-color: #d98c0a;
  border-color: #d98c0a;
  color: #0B1F3A;
}

/* -------- FOOTER CUSTOM -------- */
.footer-custom {
  background-color: #0B1F3A;
  color: rgba(255, 255, 255, 0.8);
}
.footer-custom h5,
.footer-custom h6 {
  color: #FFFFFF;
}

.footer-custom h6 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.text-secondary-footer {
  color: rgba(255, 255, 255, 0.65) !important;
}

.footer-link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover {
  color: #F59E0B;
  text-decoration: none;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 1.2rem;
  transition: background-color 0.2s, color 0.2s;
}

.footer-social-icon:hover {
  background-color: #F59E0B;
  color: #0B1F3A;
}

/* -------- ALERTES & MESSAGES -------- */
.custom-alert {
  border: none;
  border-left: 4px solid;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-weight: 500;
}

.alert-success.custom-alert {
  background-color: #d1fae5;
  border-left-color: #16A34A;
  color: #065f46;
}

.alert-danger.custom-alert {
  background-color: #fee2e2;
  border-left-color: #DC2626;
  color: #991b1b;
}

.alert-warning.custom-alert {
  background-color: #ffedd5;
  border-left-color: #F59E0B;
  color: #92400e;
}

.alert-info.custom-alert {
  background-color: #dbeafe;
  border-left-color: #1D4ED8;
  color: #1e40af;
}

/* Bouton de fermeture des alertes */
.custom-alert .btn-close {
  filter: invert(1) grayscale(100%) brightness(40%);
}

/* -------- BOUTONS GÉNÉRIQUES -------- */
.btn-primary {
  background-color: #1D4ED8;
  border-color: #1D4ED8;
}

.btn-primary:hover {
  background-color: #1e3a8a;
  border-color: #1e3a8a;
}

.btn-outline-primary {
  color: #1D4ED8;
  border-color: #1D4ED8;
}

.btn-outline-primary:hover {
  background-color: #1D4ED8;
  color: #FFFFFF;
}

.btn-success {
  background-color: #16A34A;
  border-color: #16A34A;
}

.btn-success:hover {
  background-color: #15803d;
  border-color: #15803d;
}

.btn-danger {
  background-color: #DC2626;
  border-color: #DC2626;
}

.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* -------- CARTES, SECTIONS -------- */
.card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* -------- UTILITAIRES SUPPLEMENTAIRES -------- */
.bg-navy {
  background-color: #0B1F3A !important;
}

.bg-royal {
  background-color: #1D4ED8 !important;
}

.bg-gold {
  background-color: #F59E0B !important;
}

.text-navy {
  color: #0B1F3A !important;
}

.text-royal {
  color: #1D4ED8 !important;
}

/* Espacement supplémentaire */
.section-padding {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Correction visibilité sur petits écrans */
@media (max-width: 576px) {
  h1 {
    font-size: 1.75rem;
  }
  .navbar-brand {
    font-size: 1.1rem;
  }
}
/* --- Icônes de service et fonctionnalités (accueil) --- */
.service-icon {
  font-size: 2.5rem;
  display: inline-block;
}

.feature-check-icon {
  font-size: 1.4rem;
  margin-top: 0.2rem;
  color: #1D4ED8; /* text-royal */
  flex-shrink: 0;
}

/* --- Blocs d'illustration (remplacement des images) --- */
.hero-illustration {
  background-color: #1D4ED8;
  border-radius: 1rem;
}

.hero-icon {
  font-size: 8rem;
  color: #FFFFFF;
  opacity: 0.9;
}

.why-us-illustration {
  background-color: #F8FAFC;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.why-us-icon {
  font-size: 6rem;
  color: #1D4ED8;
  opacity: 0.8;
}
/* --- Icônes pour pages À propos et Services --- */
.value-icon {
  font-size: 2.5rem;
  display: block;
}

.about-icon {
  font-size: 6rem;
  color: #1D4ED8;
  opacity: 0.9;
}

.about-illustration {
  background-color: #F8FAFC;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.service-detail-illustration {
  background-color: #E8EDF5;
  border-radius: 1rem;
}

.service-detail-icon {
  font-size: 5rem;
  color: #1D4ED8;
  opacity: 0.85;
}
/* --- Icône placeholder pour liste vide (professeurs) --- */
.placeholder-icon-lg {
  font-size: 3rem;
}
/* --- Icône de succès (formation) --- */
.icon-success-lg {
  font-size: 3rem;
}
/* --- Avatar profil parent --- */
.profile-avatar-sm {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f5;
  color: #6c757d;
}

.profile-avatar-placeholder i {
  font-size: 2rem;
}
/* --- Images de profil et aperçu agrandi --- */
.profile-photo {
  display: block;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  background: #f1f3f5;
}
.profile-photo-xs { width: 35px; height: 35px; }
.profile-photo-sm { width: 60px; height: 60px; }
.profile-photo-md { width: 80px; height: 80px; }
.profile-photo-lg { width: 120px; height: 120px; }
.profile-photo-xl { width: 180px; height: 180px; }
.profile-photo-identity { width: 120px; height: 150px; border-radius: .75rem; }

.image-zoom-trigger {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  cursor: zoom-in;
}
.image-zoom-trigger:focus-visible {
  outline: 3px solid rgba(29, 78, 216, .35);
  outline-offset: 3px;
}
.image-preview-modal-body {
  min-height: 240px;
  background: #f8fafc;
}
.image-preview-modal-image {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: .75rem;
}
.teacher-public-card { transition: transform .2s ease, box-shadow .2s ease; }
.teacher-public-card:hover { transform: translateY(-3px); }
.teacher-card-bio { min-height: 4.5rem; }
.teacher-public-bio { line-height: 1.75; }
