/* ====== PALETTE (thème sombre sobre) ====== */
:root{
  --bg:#060d1f;          /* fond principal sombre */
  --bg2:#0b1730;         /* fond alterné */
  --card:#111e3a;        /* cartes */
  --line:rgba(255,255,255,.08);
  --blue:#3498db;        /* ton bleu */
  --muted:rgba(255,255,255,.6);
}
body{ font-family:'Montserrat',sans-serif; background:var(--bg); color:#fff; }
a{ color:var(--blue); }
.text-blue{ color:var(--blue)!important; }
.text-muted2{ color:var(--muted)!important; }

/* ====== INTRO : goutte + ripple (repris de ton main.html) ====== */
#intro-container{ position:fixed; inset:0; z-index:9999; pointer-events:none; }
/* Intro rapide (pages internes) : mêmes calques, sans goutte ni ripple */
#intro-fast{ position:fixed; inset:0; z-index:9999; pointer-events:none; }
.drop{ position:absolute; left:50%; top:-50px; width:10px; height:10px; background:#fff;
  border-radius:50% 50% 50% 0; transform:translate(-50%,0) rotate(135deg); z-index:1002;
  animation:dropFall 1s cubic-bezier(.55,.055,.675,.19) forwards; }
.layer-white{ position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  box-shadow:0 0 0 200vmax #fff; transform:translate(-50%,-50%); z-index:1000; }
.layer-blue{ position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  box-shadow:0 0 0 200vmax #3498db; transform:translate(-50%,-50%); z-index:1001; }
.ripple{ position:absolute; top:50%; left:50%; width:10px; height:10px; border:2px solid #fff;
  border-radius:50%; transform:translate(-50%,-50%) scale(0); z-index:1003; }
@keyframes dropFall{ 0%{top:-50px;opacity:1;} 90%{opacity:1;} 100%{top:50%;opacity:0;} }
@keyframes rippleEffect{ 0%{transform:translate(-50%,-50%) scale(0);opacity:1;} 100%{transform:translate(-50%,-50%) scale(110);opacity:0;} }
@keyframes expandHole{ 0%{width:0;height:0;} 100%{width:250vmax;height:250vmax;} }
.anim-expand{ animation:expandHole 1.2s cubic-bezier(.7,0,.3,1) forwards; }
.anim-expand-fast{ animation:expandHole .7s cubic-bezier(.7,0,.3,1) forwards; }
.anim-ripple{ animation:rippleEffect .6s ease-out forwards; }

/* ====== TRANSITION CLIC (repris de ton transition.css) ====== */
.transition-overlay{ position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden; }
.expanding-circle{ position:absolute; border-radius:50%; transform:translate(-50%,-50%);
  width:0; height:0; animation:expandRipple .6s ease-in forwards; }
.circle-blue{ background:#fff; z-index:1; }
.circle-white{ background:#3498db; z-index:2; }
@keyframes expandRipple{ 0%{width:0;height:0;} 100%{width:300vmax;height:300vmax;} }

/* ====== HERO uniquement (la vidéo + animation restent ICI seulement) ====== */
#bg-video{ position:absolute; top:50%; left:50%; min-width:100%; min-height:100%;
  width:auto; height:auto; transform:translate(-50%,-50%); z-index:0; object-fit:cover; }
.hero{ position:relative; min-height:100vh; overflow:hidden; background:#060d1f;
  display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-shade{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(6,13,31,.3),rgba(6,13,31,.9)); }
.hero-content{ position:relative; z-index:2; text-shadow:0 0 20px rgba(0,0,0,.5); }
#nom{ font-size:clamp(2.5rem,11vw,5rem); letter-spacing:clamp(2px,1.2vw,5px); text-transform:uppercase; opacity:0; transform:scale(.8);
  animation:popIn .8s cubic-bezier(.175,.885,.32,1.275) forwards; animation-delay:1.5s; }
#formation{ font-size:clamp(1.1rem,4.5vw,2rem); letter-spacing:clamp(2px,1vw,5px); text-transform:uppercase; opacity:0;
  animation:fadeIn 1s ease forwards; animation-delay:2s; }
.hero-content .lbl{ font-size:clamp(.85rem,3vw,1.5rem); font-weight:300; letter-spacing:clamp(3px,2vw,10px); opacity:0;
  animation:fadeIn 1s ease forwards; animation-delay:2s; }
@keyframes popIn{ to{opacity:1;transform:scale(1);} }
@keyframes fadeIn{ to{opacity:1;} }

/* ====== NAVBAR ====== */
.navbar-custom{ background:transparent!important; transition:.3s; }
.navbar-custom.scrolled{ background:rgba(6,13,31,.95)!important; backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.navbar-custom .nav-link,.navbar-custom .navbar-brand{ color:#fff!important; }
.navbar-custom .nav-link:hover{ color:var(--blue)!important; }
.navbar-toggler{ font-size:1.25rem; padding:.25rem .6rem; }
.navbar-toggler:focus{ box-shadow:none; }

/* ===== Menu mobile (burger déroulé) ===== */
@media (max-width: 991.98px){
  /* Le menu déroulé doit avoir un fond solide, sinon illisible en haut de page */
  .navbar-custom .navbar-collapse{
    background:rgba(6,13,31,.98);
    backdrop-filter:blur(10px);
    border:1px solid var(--line);
    border-radius:14px;
    margin-top:12px;
    padding:14px 16px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .navbar-custom .navbar-nav{ gap:2px; }
  .navbar-custom .nav-link{
    padding:11px 12px;
    border-radius:9px;
    transition:background .2s;
  }
  .navbar-custom .nav-link:hover,
  .navbar-custom .nav-link:focus{ background:rgba(52,152,219,.12); }
  /* Le bouton Admin prend toute la largeur et se détache un peu */
  .navbar-custom .navbar-nav .btn{
    width:100%;
    margin-top:8px;
    padding-top:10px;
    padding-bottom:10px;
  }
}

/* ====== SUITE : sections sobres, même thème, AUCUNE animation de fond ====== */
.sec{ background:var(--bg); }
.sec-alt{ background:var(--bg2); }
.card-dark{ background:var(--card); border:1px solid var(--line)!important; color:#fff; }
.chip{ display:inline-block; padding:.3rem .8rem; font-size:.8rem; border-radius:50rem;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--muted); }
.tag{ font-size:.72rem; padding:.15rem .6rem; border-radius:50rem;
  background:rgba(52,152,219,.12); border:1px solid rgba(52,152,219,.3); color:var(--blue); }
.stat-box{ background:var(--card); border:1px solid var(--line); border-radius:.75rem; }
.icon-box{ width:48px; height:48px; background:rgba(52,152,219,.12); color:var(--blue);
  border-radius:.6rem; display:flex; align-items:center; justify-content:center; }
.sae-card{ transition:transform .2s, border-color .2s; cursor:pointer; }
.sae-card:hover{ transform:translateY(-5px); border-color:rgba(52,152,219,.5)!important; }
.form-control-dark{ background:rgba(255,255,255,.05); border:1px solid var(--line); color:#fff; }
.form-control-dark:focus{ background:rgba(255,255,255,.08); border-color:var(--blue);
  box-shadow:0 0 0 .2rem rgba(52,152,219,.15); color:#fff; }
.form-control-dark::placeholder{ color:rgba(255,255,255,.3); }

/* reveal discret (sobre) */
.reveal{ opacity:0; transform:translateY(15px); transition:.5s ease; }
.reveal.show{ opacity:1; transform:translateY(0); }