/* ==========================================================================
   DESIGN « VITRAIL » (piste B, choisie le 23/10/2026)
   Chargee par headerNavbar.php, apres les styles du theme : elle les habille
   sans les reecrire. Ancien design : _backups/convivialiteenflandre-theme0044-20261023.
   Couleurs du logo : bleu #023DA8, ciel #00A4EE, orange #FC7F03,
   jaune #FCC801, rouge-orange #F5530B ; bleu nuit #0A1F4D pour les fonds.
   ========================================================================== */
:root {
  --vb-nuit: #0A1F4D;
  --vb-nuit-2: #071638;
  --vb-bleu: #023DA8;
  --vb-ciel: #00A4EE;
  --vb-orange: #FC7F03;
  --vb-jaune: #FCC801;
  --vb-rouge: #F5530B;
  --vb-filet: linear-gradient(90deg, var(--vb-bleu) 0 25%, var(--vb-ciel) 25% 50%, var(--vb-jaune) 50% 75%, var(--vb-orange) 75%);
}

/* --- 1. EN-TETE : blanc (le logo en couleur doit ressortir), filet 4 couleurs ---
   Essai en bleu nuit abandonne le 23/10/2026 : connecte, le moteur remet le logo
   en couleur, illisible sur fond sombre. */
#header,
#header.header-scrolled {
  background: #fff !important;
  border-bottom: 0 !important;
  box-shadow: 0 6px 24px rgba(10, 31, 77, .08);
}
#header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
  background: var(--vb-filet); pointer-events: none;
}
#header .nav-menu > ul > li > a,
#header .nav-menu > ul > li > a:visited { color: var(--vb-nuit) !important; font-weight: 700; }
#header .nav-menu > ul > li > a:hover { background: rgba(2, 61, 168, .07) !important; color: var(--vb-bleu) !important; }
#header .nav-menu > ul > li > a.lienActif,
#header .nav-menu > ul > li.active > a {
  background: rgba(2, 61, 168, .08) !important; color: var(--vb-bleu) !important;
  box-shadow: inset 0 -3px 0 var(--vb-orange);
}

/* Menu mobile plein ecran : meme bleu nuit, icones orange */
#mobile-overlay { background: var(--vb-nuit) !important; }
.mobile-nav-link > span > i, .mobile-sub-toggle > span > i, .mobile-sub-list a > i { color: var(--vb-orange) !important; }
.mobile-nav-link:hover > i, .mobile-sub-toggle:hover .toggle-arrow,
.mobile-sub-toggle.active .toggle-arrow { background: var(--vb-orange) !important; border-color: var(--vb-orange) !important; }

/* --- 2. BANDEAU DES PAGES : bleu nuit + eclats de vitrail ------------------ */
.esq-ban {
  background: var(--vb-nuit) !important;
  min-height: 340px; height: 40vh; max-height: 440px;
  border-bottom: 6px solid transparent; border-image: var(--vb-filet) 1;
}
.esq-ban__voile { background: linear-gradient(90deg, rgba(10, 31, 77, .92) 0%, rgba(10, 31, 77, .55) 60%, rgba(10, 31, 77, .25) 100%) !important; }
/* Eclats en couleurs franches (sans fusion : sur le bleu nuit, l'orange virait au brun). */
.esq-ban::before, .esq-ban::after { content: ''; position: absolute; z-index: 1; pointer-events: none; }
.esq-ban::before {
  right: 10%; top: 0; width: 24%; height: 70%; background: var(--vb-ciel); opacity: .9;
  clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 70%);
}
.esq-ban::after {
  right: 0; bottom: 0; width: 20%; height: 58%; background: var(--vb-orange);
  clip-path: polygon(30% 0, 100% 20%, 100% 100%, 0 100%);
}
.esq-ban__inner::after {
  content: ''; position: absolute; right: 21%; bottom: 0; width: 9%; height: 42%; background: var(--vb-jaune);
  clip-path: polygon(0 30%, 100% 0, 70% 100%); pointer-events: none;
}
.esq-ban__inner { position: static !important; }
.esq-ban__txt { z-index: 2; max-width: 62%; }
@media (max-width: 768px) { .esq-ban__txt { max-width: none; } .esq-ban__inner::after { display: none; } }
.esq-ban__pastille { display: none !important; }
.esq-ban__titre { font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 768px) {
  .esq-ban { min-height: 240px; height: auto; }
  .esq-ban::before { width: 40%; height: 60%; }
  .esq-ban::after { width: 36%; height: 45%; }
}

/* --- 3. PIED DE PAGE ----------------------------------------------------- */
.esq-footer-social-bar { background: var(--vb-bleu) !important; }
.esq-footer-main { background: var(--vb-nuit) !important; border-top: 6px solid transparent; border-image: var(--vb-filet) 1; }
.esq-footer-legal { background: var(--vb-nuit-2) !important; }
.esq-footer-main .esq-footer-col-title { color: var(--vb-jaune) !important; }

/* --- 4. ACCUEIL (home.php, classes vb-) ----------------------------------- */
.vb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .vb-wrap { padding: 0 16px; } }
.vb-btn {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; border-radius: 12px;
  padding: 15px 22px; font-size: 16px; line-height: 1.1; text-decoration: none !important; transition: transform .2s ease, background .2s ease;
}
.vb-btn:hover { transform: translateY(-2px); }
.vb-btn--orange { background: var(--vb-orange); color: #fff !important; }
.vb-btn--orange:hover { background: var(--vb-rouge); }
.vb-btn--verre { background: rgba(255, 255, 255, .1); color: #fff !important; border: 1px solid rgba(255, 255, 255, .3); }
.vb-btn--verre:hover { background: rgba(255, 255, 255, .18); }
.vb-btn--nuit { background: var(--vb-nuit); color: #fff !important; }
.vb-btn--nuit:hover { background: var(--vb-bleu); }

/* Heros : texte a gauche, photo en vitrail a droite */
/* padding-top = hauteur de l'en-tete fixe (80 px, 70 px sous 992 px) ; le theme pose 60 px sur toute section. */
.vb-hero { position: relative; background: var(--vb-nuit); color: #fff; overflow: hidden; padding: 80px 0 0 !important; }
@media (max-width: 992px) { .vb-hero { padding-top: 70px !important; } }
.vb-hero.vb-hero--connecte { padding-top: 0 !important; }
/* Diapositives empilees dans une meme case de grille : le carrousel prend la
   hauteur de la plus haute et ne bouge plus d'une diapositive a l'autre. */
.vb-hero .carousel-inner { display: grid; }
.vb-hero .carousel-item {
  display: block !important; grid-area: 1 / 1; float: none !important; margin-right: 0 !important;
  transform: none !important; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s ease;
}
.vb-hero .carousel-item.active,
.vb-hero .carousel-item-next,
.vb-hero .carousel-item-prev { visibility: visible; }
.vb-hero .carousel-item.active { opacity: 1; z-index: 1; }
.vb-hero .carousel-item.active.carousel-item-left,
.vb-hero .carousel-item.active.carousel-item-right { opacity: 0; }
.vb-hero .carousel-item-next.carousel-item-left,
.vb-hero .carousel-item-prev.carousel-item-right { opacity: 1; z-index: 2; }
/* Texte a gauche ; la photo occupe toute la moitie droite, jusqu'au bord de l'ecran. */
.vb-hero__in { display: flex; align-items: center; height: 100%; min-height: clamp(560px, 74vh, 760px); }
.vb-hero__txt { width: 46%; padding: 60px 40px 90px 0; position: relative; z-index: 2; }
.vb-kicker {
  display: inline-flex; gap: 8px; align-items: center; background: var(--vb-jaune); color: var(--vb-nuit);
  font-weight: 800; padding: 7px 14px; border-radius: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
}
.vb-hero h1, .vb-hero h2.vb-hero__titre {
  font-size: clamp(38px, 5vw, 68px); line-height: 1; font-weight: 800; letter-spacing: -.02em; margin: 20px 0; color: #fff;
}
.vb-grad { background: linear-gradient(90deg, var(--vb-jaune), var(--vb-orange), var(--vb-rouge)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vb-hero__sous { font-size: 19px; line-height: 1.55; color: #c9d4ee; max-width: 480px; margin: 0 0 30px; }
.vb-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.vb-vitrail { position: absolute; top: 0; right: 0; bottom: 0; width: calc(50% + 30px); }
.vb-vitrail__ph { position: absolute; inset: 0; background: var(--vb-bleu) center / cover no-repeat; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.vb-eclat { position: absolute; mix-blend-mode: multiply; opacity: .9; pointer-events: none; }
.vb-eclat--1 { top: 0; left: 6%; width: 30%; height: 42%; background: var(--vb-ciel); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 70%); }
.vb-eclat--2 { right: 0; bottom: 0; width: 34%; height: 46%; background: var(--vb-orange); clip-path: polygon(30% 0, 100% 20%, 100% 100%, 0 100%); }
.vb-eclat--3 { left: 12%; bottom: 10%; width: 22%; height: 30%; background: var(--vb-jaune); clip-path: polygon(0 30%, 100% 0, 70% 100%); }
.vb-hero .carousel-indicators { left: 24px; right: auto; margin: 0; bottom: 26px; justify-content: flex-start; }
@media (min-width: 1288px) { .vb-hero .carousel-indicators { left: calc((100% - 1240px) / 2 + 24px); } }
.vb-hero .carousel-indicators li { width: 28px; height: 6px; border-radius: 3px; border: 0; background: rgba(255, 255, 255, .35); margin: 0 6px 0 0; }
.vb-hero .carousel-indicators li.active { background: var(--vb-jaune); }
/* Crayon d'edition : par-dessus la photo, en haut a droite du bandeau. */
.vb-hero .vb-hero__edit { position: absolute !important; top: 20px !important; right: 20px !important; left: auto !important; float: none !important; z-index: 30 !important; margin: 0 !important; }
.vb-hero:not(.vb-hero--connecte) .vb-hero__edit { top: 100px !important; }

/* Barre de raccourcis */
.vb-filet { height: 6px; background: var(--vb-filet); }
.vb-quick { display: grid; grid-template-columns: repeat(6, 1fr); background: #fff; }
.vb-quick a {
  padding: 24px 12px; text-align: center; font-weight: 700; font-size: 15px; color: #14213D !important;
  border-right: 1px solid #eef0f5; transition: background .2s ease; text-decoration: none !important;
}
.vb-quick a:last-child { border-right: 0; }
.vb-quick a:hover { background: #f6f8fc; }
.vb-quick i { display: block; font-size: 24px; margin-bottom: 8px; }
.vb-quick a:nth-child(6n+1) i { color: var(--vb-bleu); }
.vb-quick a:nth-child(6n+2) i { color: var(--vb-ciel); }
.vb-quick a:nth-child(6n+3) i { color: var(--vb-orange); }
.vb-quick a:nth-child(6n+4) i { color: var(--vb-rouge); }
.vb-quick a:nth-child(6n+5) i { color: #e0a800; }
.vb-quick a:nth-child(6n+6) i { color: var(--vb-bleu); }

/* Sections */
.vb-sec { padding: 80px 0; background: #fff; }
.vb-sec--gris { background: #f5f7fb; }
.vb-sec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.vb-sec__head h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; margin: 0; color: #14213D; }
.vb-sec__head h2 small {
  display: block; font-size: 15px; font-weight: 700; color: var(--vb-orange); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px;
}
.vb-sec__lien { font-weight: 800; color: var(--vb-bleu) !important; display: inline-flex; gap: 8px; align-items: center; }
.vb-sec__head .btnEdit { position: static !important; float: none !important; }

/* Rendez-vous en tuiles */
.vb-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vb-tuile {
  border-radius: 18px; padding: 24px; color: #fff !important; min-height: 230px; display: flex; flex-direction: column;
  justify-content: space-between; position: relative; overflow: hidden; text-decoration: none !important; transition: transform .2s ease;
}
.vb-tuile:hover { transform: translateY(-4px); }
.vb-tuile::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; background: rgba(255, 255, 255, .14); transform: rotate(30deg); }
.vb-tuile:nth-child(4n+1) { background: var(--vb-bleu); }
.vb-tuile:nth-child(4n+2) { background: var(--vb-ciel); }
.vb-tuile:nth-child(4n+3) { background: var(--vb-orange); }
.vb-tuile:nth-child(4n+4) { background: var(--vb-nuit); }
.vb-tuile__j { font-size: 52px; font-weight: 800; line-height: .9; }
.vb-tuile__m { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; opacity: .9; }
.vb-tuile h3 { font-size: 21px; line-height: 1.2; margin: 18px 0 0; color: #fff; font-weight: 800; }
.vb-tuile__h { font-size: 14px; opacity: .85; margin-top: 6px; }
.vb-vide { background: #f5f7fb; border-radius: 18px; padding: 30px; color: #5b6476; }

/* Actualites en grandes cartes */
.vb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vb-grande {
  border-radius: 22px; overflow: hidden; position: relative; min-height: 360px; color: #fff !important; display: flex; align-items: flex-end;
  background: linear-gradient(135deg, var(--vb-bleu), var(--vb-nuit)); text-decoration: none !important;
}
.vb-grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.vb-grande:hover img { transform: scale(1.04); }
.vb-grande::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, rgba(10, 31, 77, .92)); z-index: 1; }
.vb-grande__txt { position: relative; z-index: 2; padding: 28px; }
.vb-grande h3 { font-size: 28px; line-height: 1.15; margin: 10px 0 8px; color: #fff; font-weight: 800; }
.vb-grande p { margin: 0; color: rgba(255, 255, 255, .85); }
.vb-chip { display: inline-block; background: var(--vb-jaune); color: var(--vb-nuit); font-weight: 800; font-size: 12px; padding: 5px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; }
.vb-grande--sansphoto .vb-eclat { mix-blend-mode: screen; opacity: .5; }

/* Bandeau adhesion */
.vb-adh {
  background: var(--vb-orange); color: #fff; border-radius: 26px; padding: 50px; display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 30px; align-items: center; position: relative; overflow: hidden;
}
.vb-adh h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 0 0 10px; color: #fff; font-weight: 800; letter-spacing: -.02em; }
.vb-adh p { font-size: 18px; margin: 0; opacity: .95; color: #fff; }
.vb-adh > * { position: relative; z-index: 2; }
.vb-adh .vb-btn { justify-self: end; }
.vb-adh::after { content: ''; position: absolute; left: -40px; bottom: -60px; width: 220px; height: 220px; background: var(--vb-jaune); opacity: .35; clip-path: polygon(50% 0, 100% 100%, 0 80%); }

@media (max-width: 991px) {
  .vb-hero__in { flex-direction: column; align-items: stretch; min-height: 0; }
  .vb-hero__txt { width: auto; flex: 1; padding: 40px 0 70px; }
  .vb-vitrail { position: relative; width: auto; height: 300px; margin: 0 -24px; flex: none; }
  .vb-hero .carousel-indicators { bottom: 324px; }
  .vb-quick { grid-template-columns: repeat(3, 1fr); }
  .vb-quick a { border-bottom: 1px solid #eef0f5; }
  .vb-tuiles { grid-template-columns: repeat(2, 1fr); }
  .vb-split { grid-template-columns: 1fr; }
  .vb-adh { grid-template-columns: 1fr; padding: 32px 24px; }
  .vb-adh .vb-btn { justify-self: start; }
  .vb-sec { padding: 60px 0; }
}
@media (max-width: 600px) {
  .vb-vitrail { margin: 0 -16px; }
  .vb-hero__sous { font-size: 17px; }
  .vb-tuiles { grid-template-columns: 1fr; }
  .vb-tuile { min-height: 170px; }
  .vb-grande { min-height: 300px; }
}

/* --- LOGO : plus grand dans le bandeau, sans changer la hauteur du menu ---
   Le logo d'origine a de larges marges vides : on affiche une version rognee
   (img/logo/logo_header_rogne.png, tiree de logo_carre.png) a 70 px de haut. */
@media (min-width: 993px) {
  #header:not([data-locked]) .logo a > div > img {
    content: url("../../../img/logo/logo_header_rogne.png") !important;
    height: 70px !important; width: auto; margin: 0 !important; padding: 0 !important;
  }
  /* Menu trop serre : le moteur reduit le logo (data-fit). */
  #header[data-fit="2"]:not([data-locked]) .logo a > div > img, #header[data-fit="3"]:not([data-locked]) .logo a > div > img, #header[data-fit="4"]:not([data-locked]) .logo a > div > img { height: 54px !important; }
  /* Connecte (panneau d'administration) : logo d'origine, rien de change (data-locked). */
}