/* =========================================================
   CEECI-UE — En-tête moderne (surcouche de style.css)
   Chargé APRÈS style.css : supprimez ce fichier + sa balise <link>
   dans includes/header.php pour revenir à l'ancien design.
   ========================================================= */

/* ------------------------------ Topbar : fine et sobre ------------------------------ */
.topbar{background:var(--accent);color:#c3d0e4;font-size:.76rem;padding:.32rem 0;letter-spacing:.01em}
.topbar a{color:#c3d0e4;transition:color .2s}
.topbar a:hover{color:var(--gold)}
.topbar .sep{opacity:.35}
.topbar-right{gap:.85rem}
.topbar-legal{opacity:.75}
.topbar-soc{gap:.7rem}

/* Boutons « Espace membre / Administration » : puces discrètes */
.topbar-admin{border:none;background:rgba(255,255,255,.09);padding:.2rem .75rem;font-weight:600;font-size:.72rem;transition:background .2s,color .2s}
.topbar-admin:hover{background:var(--gold);color:#1b1b1b!important}

/* Sélecteur de langue FR | EN */
.lang-switch{display:inline-flex;align-items:center;background:rgba(255,255,255,.1);border-radius:999px;padding:2px}
.lang-switch a{padding:.14rem .62rem;border-radius:999px;font-weight:700;font-size:.7rem;letter-spacing:.07em;line-height:1.4;color:#c3d0e4}
.lang-switch a:hover{color:#fff}
.lang-switch a.active{background:var(--gold);color:#1b1b1b}

/* ------------------------------ Barre de navigation ------------------------------ */
.main-nav{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(18,58,114,.08);
  box-shadow:none;
  padding:.65rem 0;
  transition:padding .25s,box-shadow .25s,background .25s;
}
.main-nav.scrolled{box-shadow:0 10px 30px rgba(10,34,73,.10);padding:.4rem 0;background:rgba(255,255,255,.96)}
.brand-crest{transition:width .25s,height .25s,flex-basis .25s}
.main-nav.scrolled .brand-crest{width:44px;height:44px;flex-basis:44px}
.brand-text strong{letter-spacing:-.3px}
.brand-text small{color:#7a8595}

/* Liens : soulignement or animé au lieu du fond bleuté */
.nav-links{gap:.1rem}
.nav-link{position:relative;color:#2a3a52;font-weight:500;font-size:.9rem;padding:.6rem .8rem;background:none!important;border-radius:8px;transition:color .2s}
.nav-link::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .28s ease}
.nav-link:hover,.nav-link.active{color:var(--brand)}
.nav-link:hover::after,.nav-link.active::after,.has-drop.active>.drop-toggle::after{transform:scaleX(1)}
.has-drop.active>.drop-toggle{background:none}
.drop-toggle .ic{transition:transform .25s}
.has-drop:hover .drop-toggle .ic,.has-drop.open .drop-toggle .ic{transform:rotate(180deg)}

/* Bouton « Devenir membre » */
.btn-nav{margin-left:.7rem;padding:.55rem 1.25rem;font-size:.86rem;box-shadow:0 6px 16px rgba(200,162,39,.32);transition:transform .2s,box-shadow .2s,background .2s}
.btn-nav:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(200,162,39,.4)}

/* Menu déroulant « Réseau » */
.drop-menu{border-top:none;border:1px solid rgba(18,58,114,.08);border-radius:16px;box-shadow:0 26px 60px rgba(10,34,73,.16);padding:.5rem;min-width:290px}
.drop-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}   /* pont invisible : le menu ne se ferme plus en traversant l'espace */
.drop-link{padding:.65rem .85rem;border-radius:11px;transition:background .2s,padding-left .2s}
.drop-link:hover,.drop-link.active{background:rgba(18,58,114,.06);padding-left:1.05rem}
.drop-link strong{font-weight:600}
.drop-link.active strong{color:var(--gold-dark)}

/* ------------------------------ Mobile / tablette ------------------------------ */
@media(max-width:979px){
  .nav-link::after{display:none}
  .nav-link:hover,.nav-link.active{background:rgba(18,58,114,.06)!important}
  .nav-link.active{box-shadow:inset 3px 0 0 var(--gold)}
  .btn-nav{margin:.9rem 0 0;box-shadow:none}
  .drop-menu{border:none;box-shadow:none;border-radius:12px;min-width:0}
  .drop-menu::before{display:none}
  .main-nav.scrolled .brand-crest{width:40px;height:40px;flex-basis:40px}
}
@media(max-width:640px){
  .topbar-soc,.topbar-hide-s{display:none}
  .topbar-in{justify-content:space-between;flex-wrap:nowrap}
  .topbar-right{gap:.6rem}
}