:root{
  --bg:#060d1f; --card:#111e3a; --line:rgba(255,255,255,.08);
  --blue:#3498db; --muted:rgba(255,255,255,.6);
}
body{ font-family:'Montserrat',sans-serif; background:var(--bg); color:#fff; }
.text-blue{ color:var(--blue)!important; }
.text-muted2{ color:var(--muted)!important; }

/* Intro goutte + ripple (cohérent avec le portfolio) */
#intro-container{ 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-ripple{ animation:rippleEffect .6s ease-out forwards; }

/* Transition au clic (cohérent portfolio) */
.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 .8s 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;} }

/* Fond vidéo */
#bg-video{ position:fixed; top:50%; left:50%; min-width:100%; min-height:100%;
  width:auto; height:auto; transform:translate(-50%,-50%); z-index:0; object-fit:cover; opacity:.25; }
.shade{ position:fixed; inset:0; z-index:1;
  background:radial-gradient(circle at center, rgba(6,13,31,.5), rgba(6,13,31,.95)); }

/* Contenu centré */
.wrap{ position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:24px; }

.title{ font-size:clamp(2.5rem,7vw,5rem); font-weight:800; letter-spacing:3px; text-transform:uppercase;
  opacity:0; transform:scale(.85); animation:popIn .8s cubic-bezier(.175,.885,.32,1.275) forwards; animation-delay:1.4s; }
.subtitle{ color:var(--muted); letter-spacing:6px; text-transform:uppercase; margin-bottom:3rem;
  opacity:0; animation:fadeIn 1s ease forwards; animation-delay:1.9s; }
@keyframes popIn{ to{opacity:1;transform:scale(1);} }
@keyframes fadeIn{ to{opacity:1;} }

/* Cartes de choix */
.choices{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fadeIn 1s ease forwards; animation-delay:2.2s; }
.choice{ width:260px; padding:40px 28px; border-radius:18px; text-decoration:none; color:#fff;
  background:var(--card); border:1px solid var(--line); transition:transform .25s, border-color .25s, box-shadow .25s; }
.choice:hover{ transform:translateY(-8px); border-color:rgba(52,152,219,.6); box-shadow:0 18px 40px rgba(0,0,0,.4); color:#fff; }
.choice .ic{ width:70px; height:70px; margin:0 auto 20px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem;
  background:rgba(52,152,219,.12); color:var(--blue); }
.choice h3{ font-weight:700; font-size:1.3rem; margin-bottom:8px; }
.choice p{ color:var(--muted); font-size:.85rem; margin:0; }
.choice .lock{ display:inline-block; margin-top:14px; font-size:.72rem; color:var(--muted); }

/* Champs (page login) */
.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); }

/* Intro rapide (pages internes : login home lab) — calques seulement */
#intro-fast{ position:fixed; inset:0; z-index:9999; pointer-events:none; }