:root{
  /* Couleurs marque */
  --ccb-bleu:#0b3a6e;
  --ccb-bleu-fonce:#082c52;
  --ccb-gris:#f6f8fb;
  --ccb-encre:#1e293b;

  /* Alimente Bootstrap */
  --bs-primary: var(--ccb-bleu);
  --bs-primary-rgb: 11,58,110; /* correspond à #0b3a6e */
  --bs-link-color: var(--ccb-bleu);
  --bs-link-hover-color: var(--ccb-bleu-fonce);
}

/* Base */
body{ color:var(--ccb-encre); }

.navbar-brand strong {
  letter-spacing: .2px;
  padding-left: 3%;
}

@media (min-width: 992px) {
  .navbar-brand strong {
    padding-left: 1.5rem; /* fixe sur écran large */
  }
}




.section-title{ font-weight:700; }
.icon-badge{
  width:48px;height:48px;display:inline-grid;place-items:center;border-radius:50%;
  background:var(--ccb-bleu);color:#fff;margin-bottom:.5rem;
}
.shadow-soft{ box-shadow:0 10px 25px rgba(0,0,0,.06); }
footer a{ text-decoration:none; }

/* Navbar sur fond bleu */
.navbar-dark .navbar-brand strong{ color:#fff; }
.navbar-dark .nav-link{ color:#fff; }
.navbar-dark .nav-link:hover{ color:#e2e8f0; }

/* Section Enseignements sur fond bleu */
#enseignements{ color:#fff; }
#enseignements .card{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.3);
}
#enseignements .card .card-body{
  border:1px solid rgba(255,255,255,.4);
  border-radius:0.5rem; padding:1.5rem;
}
#enseignements .card .card-body h3,
#enseignements .card .card-body p{ color:#fff; }

/* Harmonisation composants */
.text-primary{ color: var(--bs-primary) !important; }
.bg-primary{ background-color: rgba(var(--bs-primary-rgb),1) !important; }
.border-primary{ border-color: rgba(var(--bs-primary-rgb),1) !important; }


/* Empêche les retours à la ligne dans la navbar et resserre un peu l'espacement */
.navbar-nav .nav-link { 
  white-space: nowrap; 
  padding-left: .75rem; 
  padding-right: .75rem;
}
.navbar-nav { gap: .5rem; } /* si tu utilises gap via Bootstrap 5 */

#presentation .text-center {
  text-align: center;
  width: 100%;
}

#presentation .btn {
  margin-top: 1rem;
  display: inline-block;
}

.navbar-brand strong {
  font-size: 2rem; /* taille actuelle environ, tu peux ajuster */
  font-weight: 600;  /* garde un bon contraste */
}

@media (min-width: 992px) {
  .navbar-brand strong {
    font-size: 2rem; /* plus grand sur desktop */
  }
}
/* Harmonisation des titres de section */
.section-title.h1 {
  font-size: 1.75rem;        /* au lieu de ~2.5rem (h1 Bootstrap) */
  font-weight: 700;          /* conserve la présence visuelle */
  text-transform: none;      /* évite les majuscules si tu veux un style sobre */
}

@media (min-width: 992px) {
  .section-title.h1 {
    font-size: 2rem;         /* un peu plus large sur grand écran */
  }
}


.btn-primary{
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #093360;
  --bs-btn-hover-border-color: var(--ccb-bleu-fonce);
  --bs-btn-active-bg: var(--ccb-bleu-fonce);
  --bs-btn-active-border-color: var(--ccb-bleu-fonce);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary{
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: var(--ccb-bleu-fonce);
  --bs-btn-active-border-color: var(--ccb-bleu-fonce);
}

/* Bandeau de séparation */
.band-separator{
  background: linear-gradient(90deg, var(--ccb-bleu) 0%, var(--ccb-bleu-fonce) 100%);
  color:#fff;
}
.band-separator a{ text-decoration:none; }

/* Cartes pédagogiques : léger contour et hover */
.pedag-card { transition: transform .2s ease, box-shadow .2s ease; }
.pedag-card .card-body {
  border:1px solid rgba(0,0,0,.06);
  border-radius:.5rem;
}
.pedag-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* Liste méthodes : fond sobre, séparateurs visibles */
.pedag-list .list-group-item{
  background: transparent;
  border-color: rgba(0,0,0,.06);
}

/* Bloc citation bleu doux */
.quote-blue{
  background: linear-gradient(90deg, rgba(11,58,110,.1), rgba(11,58,110,.18));
  border:1px solid rgba(11,58,110,.25);
}

/* Chiffres clés */
.stat .h2{ font-weight: 800; }
.stat div:last-child{ opacity:.9; }



/* Taille fluide du logo : mini 32px, maxi 56px, fluide entre les deux */
.navbar-brand .brand-logo {
  height: clamp(32px, 4.5vw, 56px);
  width: auto;
  display: block;              /* évite les petits décalages vertical-align */
}

/* Ajuste la hauteur/respiration de la barre pour coller au logo */
.navbar {
  --bs-navbar-padding-y: .5rem;
}
@media (min-width: 992px) {
  .navbar { --bs-navbar-padding-y: .75rem; }
}

/* Optionnel : ajuste le titre à côté du logo selon la taille d’écran */
.navbar-brand strong {
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  line-height: 1.1;
}

/* Si ton logo est un PNG avec bord transparent, ça suffit.
   Si c’est un SVG, il restera parfaitement net en rétina. */


.h5-lg { font-size: 1.35rem; font-weight: 600; } /* grossissement local de titres*/