/* =====================================================
   THEME FUTURISTE MIXTE — ASLA-OPH / LOUZOLO-AMOUR
   Version PRODUCTION (allégée + commentée)
   - Nav/Topbar DARK futuriste
   - Contenu LIGHT lisible
   - Menus gauche encadrés (comme les boutons)
   ===================================================== */

/* =====================
   1) VARIABLES
===================== */
:root{
  /* Light content */
  --page-bg:#f6f7fb;
  --text:#0f172a;
  --muted:rgba(15,23,42,.72);

  /* Dark header/nav */
  --dark-0:#070a12;
  --dark-1:#0b1220;
  --dark-text:rgba(255,255,255,.92);

  /* Accents */
  --gold-1:#d4af37;
  --gold-2:#f1d27a;

  /* Effects */
  --shadow:0 12px 40px rgba(2,6,23,.10);
  --shadow-strong:0 18px 70px rgba(2,6,23,.16);

  /* Fonts */
  --font-body:'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-title:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =====================
   2) BASE
===================== */
html,body{height:100%}
body.site-body{
  margin:0;
  background:
    radial-gradient(900px 500px at 10% 0%, rgba(212,175,55,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(0,217,255,.06), transparent 55%),
    linear-gradient(180deg,var(--page-bg),#fff);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
a:hover{color:inherit}

h1,h2,h3,.display-5{font-family:var(--font-title)}
.nav-main .nav-link,.brand-logo span{font-family:var(--font-ui)}
.text-muted{color:var(--muted)!important}

/* Layout container (ton "portal") */
.container-portal{
  max-width:1200px;
  padding:0 20px;
}
@media(min-width:1400px){.container-portal{max-width:1400px}}
@media(min-width:1700px){.container-portal{max-width:1600px}}

/* Animations légères */
.fade-in{animation:fadeIn .7s ease forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* =====================
   3) TOPBAR (DARK)
===================== */
.site-top .topbar{
  background:linear-gradient(180deg,rgba(7,10,18,.98),rgba(11,18,32,.98));
  color:var(--dark-text);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-top .topbar .nav-link{
  color:rgba(255,255,255,.85)!important;
}
.site-top .topbar .nav-link:hover{
  color:#fff!important;
}

/* =====================
   4) NAVBAR (DARK) + MENUS ENCADRÉS
===================== */
.brandbar.header-gradient{
  background:linear-gradient(180deg,rgba(7,10,18,.92),rgba(11,18,32,.92)) !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.brand-logo span{
  color:#fff;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:800;
}

.brandbar.header-gradient .nav-link{
  color:rgba(255,255,255,.90)!important;
}

/* Menus gauche : encadrés comme des boutons */
.nav-main{
  display:flex;
  align-items:center;
  gap:.55rem;
}

.nav-main .nav-link{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  border-radius:.55rem;
  padding:.35rem .75rem;
  line-height:1.2;
  color:rgba(255,255,255,.88)!important;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.nav-main .nav-link:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.40);
  transform:translateY(-1px);
}

.nav-main .nav-link.active{
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  color:#0b1220!important;
  border-color:rgba(212,175,55,.60);
  box-shadow:0 0 18px rgba(212,175,55,.18);
}

/* Boutons de droite : cohérence */
.brandbar .btn{border-radius:.55rem}
.brandbar .btn-primary{
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  border:0;
  color:#0b1220;
  font-weight:800;
}
.brandbar .btn-outline-primary,
.brandbar .btn-outline-secondary{
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.86);
}
.brandbar .btn-outline-primary:hover,
.brandbar .btn-outline-secondary:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.32);
  color:#fff;
}

/* Search (dans la nav) */
form[role="search"] .form-control{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  border-radius:.55rem;
}
form[role="search"] .form-control::placeholder{
  color:rgba(255,255,255,.55);
}

/* Toggler mobile */
.navbar-toggler{
  border-radius:.55rem;
  border:1px solid rgba(255,255,255,.18)!important;
}
.navbar-toggler-icon{filter:invert(1) opacity(.9)}

/* =====================
   5) SOCIAL BAR (droite)
===================== */
.social-bar{
  position:fixed;
  top:50%;
  right:10px;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:2000;
}
.social-bar a{
  width:38px;height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(15,23,42,.12);
  color:rgba(15,23,42,.90);
  transition:transform .2s ease, box-shadow .2s ease;
}
.social-bar a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(2,6,23,.15);
}

/* =====================
   6) HOME HERO (image)
===================== */
.hero-asso-wrapper{text-align:center;margin-top:1.5rem}
.hero-asso-inner{
  display:inline-block;
  overflow:hidden;
  border-radius:22px;
  border:2px solid rgba(212,175,55,.45);
  box-shadow:var(--shadow-strong);
  background:#fff;
  transition:transform .35s ease, box-shadow .35s ease;
}
.hero-asso-inner:hover{
  transform:scale(1.03);
  box-shadow:0 18px 70px rgba(2,6,23,.18);
}
.hero-asso-image{
  max-width:520px;
  width:100%;
  height:auto;
  display:block;
}
.hero-asso-caption{
  font-style:italic;
  color:var(--muted);
  font-size:.95rem;
}

/* =====================
   7) FOOTER
===================== */
.footer-link{
  color:rgba(15,23,42,.78);
}
.footer-link:hover{
  color:rgba(15,23,42,.95);
}

/* =====================
   8) RESPONSIVE
===================== */
@media(max-width:576px){
  .nav-main{flex-wrap:wrap}
  .brand-logo img{height:34px !important}
  .social-bar{right:6px}
}

/* =====================================================
   NAVBAR DYNAMIQUE (Option A)
   - Compacte au scroll
   - Ombre progressive
   ===================================================== */

/* état normal */
.brandbar.header-gradient{
  position: sticky;
  top: 0;
  z-index: 1050; /* au-dessus du contenu */
  transition: padding .25s ease, box-shadow .25s ease, background .25s ease;
}

/* on compense le padding de la navbar pour l'effet "premium" */
.brandbar.header-gradient .navbar{
  padding-top: .85rem;
  padding-bottom: .85rem;
  transition: padding .25s ease;
}

/* taille logo légèrement plus grande au repos */
.brandbar.header-gradient .brand-logo img{
  height: 40px;
  transition: height .25s ease;
}

/* état compact */
.brandbar.header-gradient.is-compact{
  box-shadow: 0 18px 50px rgba(2,6,23,.22);
  background: linear-gradient(180deg, rgba(7,10,18,.98), rgba(11,18,32,.98)) !important;
}

.brandbar.header-gradient.is-compact .navbar{
  padding-top: .45rem;
  padding-bottom: .45rem;
}

.brandbar.header-gradient.is-compact .brand-logo img{
  height: 34px;
}

/* optionnel : resserrer un peu les boutons/menu quand compact */
.brandbar.header-gradient.is-compact .nav-main .nav-link{
  padding: .28rem .65rem;
}

.brandbar.header-gradient.is-compact form[role="search"] .form-control{
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* =====================================================
   NAVBAR DYNAMIQUE — ULTRA PREMIUM (Glass)
   - Sticky + blur
   - Compact au scroll
   - Ombre progressive + liseré
   ===================================================== */

.brandbar.header-gradient{
  position: sticky;
  top: 0;
  z-index: 1050;

  /* Glass */
  background: linear-gradient(180deg, rgba(7,10,18,.78), rgba(11,18,32,.78)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255,255,255,.10);

  transition: background .25s ease, box-shadow .25s ease;
}

/* Navbar spacing (état normal) */
.brandbar.header-gradient .navbar{
  padding-top: .90rem;
  padding-bottom: .90rem;
  transition: padding .25s ease;
}

/* Logo taille (état normal) */
.brandbar.header-gradient .brand-logo img{
  height: 40px;
  transition: height .25s ease;
}

/* Ombre douce progressive (au repos, légère) */
.brandbar.header-gradient{
  box-shadow: 0 8px 24px rgba(2,6,23,.08);
}

/* ===== ÉTAT COMPACT AU SCROLL ===== */
.brandbar.header-gradient.is-compact{
  background: linear-gradient(180deg, rgba(7,10,18,.92), rgba(11,18,32,.92)) !important;

  /* Ombre premium */
  box-shadow:
    0 18px 50px rgba(2,6,23,.22),
    0 1px 0 rgba(255,255,255,.08) inset;

  border-bottom-color: rgba(255,255,255,.14);
}

.brandbar.header-gradient.is-compact .navbar{
  padding-top: .48rem;
  padding-bottom: .48rem;
}

.brandbar.header-gradient.is-compact .brand-logo img{
  height: 34px;
}

/* Resserre un peu les menus/boutons en compact */
.brandbar.header-gradient.is-compact .nav-main .nav-link{
  padding: .28rem .62rem;
}

.brandbar.header-gradient.is-compact .btn.btn-sm{
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.brandbar.header-gradient.is-compact form[role="search"] .form-control{
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* Optionnel : hover glow discret (très premium) */
.brandbar.header-gradient .nav-main .nav-link:hover{
  box-shadow: 0 0 0 3px rgba(212,175,55,.10);
}
/* Boutons hero (home) */
.btn-outline-dark.rounded-pill{
  transition: 
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.btn-outline-dark.rounded-pill:hover{
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 0 0 4px rgba(212,175,55,.12);
  transform: translateY(-1px);
}
.btn-neon.btn-sm{
  padding: .35rem .8rem;
  border-radius: .55rem;
  font-weight: 800;
}

/* ===============================
   Utilisateur connecté (navbar)
   =============================== */
.nav-user {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  font-weight: 500;
}

/* option premium : légère séparation visuelle */
.nav-user::before {
  content: "👋 ";
  opacity: 0.85;
}

/* responsive : on masque sur très petits écrans */
@media (max-width: 576px) {
  .nav-user {
    display: none;
  }
}
/* ===============================
   Utilisateur connecté (navbar) — FIX lisibilité
   =============================== */

/* On cible précisément la zone de navbar dark */
.brandbar.header-gradient #navMain .nav-user{
  color: rgba(255,255,255,.95) !important;
  font-weight: 600 !important;
  font-size: .92rem;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
  opacity: 1 !important;
}

/* Si jamais Bootstrap lui applique un "text-muted" ou autre */
.brandbar.header-gradient #navMain .nav-user.small,
.brandbar.header-gradient #navMain .nav-user.text-muted{
  color: rgba(255,255,255,.95) !important;
}

/* L'emoji avant peut assombrir/perturber : on le rend discret */
.brandbar.header-gradient #navMain .nav-user::before{
  opacity: .7;
}
/* ===== Badge user (premium) ===== */
.brandbar.header-gradient #navMain .nav-user{
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  padding: .28rem .6rem;
  border-radius: .55rem;

  color: rgba(255,255,255,.95) !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);

  font-weight: 600 !important;
  font-size: .92rem;
  white-space: nowrap;

  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

.brandbar.header-gradient #navMain .nav-user::before{
  content: "👋";
  opacity: .75;
}

/* ===============================
   GROUPE UTILISATEUR (NAVBAR)
   =============================== */
.nav-user-group{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Badge utilisateur */
.brandbar.header-gradient .nav-user{
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  padding: .32rem .65rem;
  border-radius: .55rem;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);

  color: rgba(255,255,255,.95);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;

  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}

/* emoji discret */
.brandbar.header-gradient .nav-user::before{
  content: "👋";
  opacity: .7;
}

/* Bouton logout cohérent */
.brandbar.header-gradient .btn-logout{
  border-radius: .55rem;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  font-weight: 600;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.brandbar.header-gradient .btn-logout:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(212,175,55,.12);
  transform: translateY(-1px);
}

/* État compact (scroll) */
.brandbar.header-gradient.is-compact .nav-user{
  padding: .25rem .55rem;
  font-size: .88rem;
}

.brandbar.header-gradient.is-compact .btn-logout{
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* Mobile : on masque le badge, on garde le bouton */
@media (max-width: 576px){
  .nav-user{
    display: none;
  }
}

/* HOME - colonnes latérales (cards) */
.home-sidecard{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  border-radius: 18px;
}

.home-side-title{
  letter-spacing: .08em;
  font-weight: 800;
  color: rgba(15,23,42,.75);
}

/* Liste de liens (droite) */
.home-links .list-group-item{
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(15,23,42,.08);
  padding: .65rem 0;
}

.home-links .list-group-item:first-child{
  border-top: 0;
}

.home-links .list-group-item:hover{
  background: rgba(212,175,55,.10);
  border-radius: 10px;
  padding-left: .5rem;
}
/* Cartes premium + hover */
.card-premium{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-premium:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(2,6,23,.14);
  border-color: rgba(212,175,55,.35);
}

/* Reveal au scroll */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibilité : réduire animations si demandé */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card-premium{transition:none}
}
.site-top .topbar .topbar-center{
  flex: 1;
  display: flex;
  justify-content: center;
}

.site-top .topbar .topbar-link{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: .55rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.site-top .topbar .topbar-link:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.32);
  transform: translateY(-1px);
}
/* ===============================
   Harmonisation des polices NAV
   =============================== */
.site-top,
.site-top .nav-link,
.site-top .topbar,
.site-top .topbar * {
  font-family: var(--font-ui);
}

/* ===============================
   Harmonisation polices (Topbar)
   =============================== */
.site-top,
.site-top .topbar,
.site-top .topbar *{
  font-family: var(--font-ui) !important; /* Montserrat */
}

/* =====================================================
   PREMIUM: animations au scroll + micro-interactions
   Léger, sans JS lourd
   ===================================================== */

/* --- Reveal au scroll (état initial) --- */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}

/* Quand visible */
.reveal.reveal--in{
  opacity: 1;
  transform: translateY(0);
}

/* Respecte "réduire les animations" */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Cartes premium (hover) --- */
.card.card-premium{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(2,6,23,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card.card-premium:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 46px rgba(2,6,23,.14);
  border-color: rgba(212,175,55,.35);
}

/* Petit “glow” discret dans l’angle */
.card.card-premium::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  background:
    radial-gradient(420px 180px at 20% 0%, rgba(212,175,55,.12), transparent 55%),
    radial-gradient(380px 160px at 90% 10%, rgba(0,217,255,.10), transparent 55%);
  opacity: .0;
  transition: opacity .18s ease;
}
.card.card-premium{ position:relative; overflow:hidden; }
.card.card-premium:hover::after{ opacity: 1; }

/* --- Boutons: micro-interaction premium --- */
.btn{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover{
  transform: translateY(-1px);
}
.btn:active{
  transform: translateY(0);
}
.btn-outline-dark.rounded-pill:hover{
  border-color: rgba(212,175,55,.75);
  box-shadow: 0 0 0 4px rgba(212,175,55,.12);
}

/* --- Liens de nav: petit underline animé (optionnel) --- */
.brandbar .nav-main .nav-link{
  position: relative;
}
.brandbar .nav-main .nav-link::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:6px;
  height:2px;
  border-radius:2px;
  background: rgba(212,175,55,.75);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .18s ease;
  opacity: .8;
}
.brandbar .nav-main .nav-link:hover::after{
  transform: scaleX(1);
}
.brandbar .nav-main .nav-link.active::after{
  transform: scaleX(0); /* on laisse l’état actif gérer le style */
}
/* Recherche dans la navbar */
.search-input{
  width: 260px;
  max-width: 100%;
}

/* Responsive : encore plus compact sur petits écrans */
@media (max-width: 992px){
  .search-input{
    width: 100%;
  }
}