html,body{height:100%; margin:0;}
    body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#050b18; color:#fff; overflow:hidden; }

    /* fond identité (non cliquable) */
    #bgLayer{
      position:fixed; inset:0; z-index:0;
      background: #050b18 url("../assets/fonds/fonds.png") center center / cover no-repeat fixed;
      pointer-events:none;
    }

    /* carte login (centrée sous le logo) */
    .loginWrap{
      position:fixed; inset:0; z-index:2;
      display:flex; flex-direction:column;
      align-items:center; justify-content:flex-start;
      padding-top: 50vh;  /* sous le logo du fond */
      pointer-events:none; /* on réactive sur la card */
    
  margin-top: 40px;
}
    .loginCard{
      pointer-events:auto;
      width:min(420px, 92vw);
      background: rgba(5,11,24,.55);
      border:1px solid rgba(255,255,255,.14);
      border-radius: 22px;
      padding: 14px 18px;
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 60px rgba(0,0,0,.45);
    }
    .loginLabel{ display:block; font-size:12px; opacity:.85; margin: 6px 0 4px; }
    .loginInput{
      width:100%;
      padding: 12px 12px;
      border-radius: 14px;
      border:2px solid rgba(255,255,255,.28);
      background: rgba(0,0,0,.30);
      color:#fff;
      outline:none;
      box-sizing:border-box;
    }
    .loginInput:focus{ border-color: rgba(10,220,255,.6); box-shadow: 0 0 0 3px rgba(10,220,255,.15); }
    .loginBtn{
      width:100%;
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 16px;
      border:1px solid rgba(255,255,255,.16);
      cursor:pointer;
      color:#fff;
      background: rgba(10,79,175,.40);
      font-weight: 900;
      letter-spacing: .2px;
    }
    .loginBtn.secondary{
      background: rgba(255,154,42,.18);
      border-color: rgba(255,154,42,.45);
    }
    .loginErr{ margin-top:10px; font-size:12px; color:#ff8aa0; min-height:16px; }

    /* ===== ANV Intro (Poppins) ===== */
.anv-intro{
  font-family:'Poppins',sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.55;
  letter-spacing:.3px;
  color:rgba(255,255,255,.80);
  text-align:center;
  max-width:720px;
  padding:10px 14px;

  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  margin:0;

  background:rgba(5,11,24,.35);
  border-radius:16px;
  backdrop-filter:blur(10px);
  z-index:2;
}
.anv-intro span{
  display:block;
  margin-top:6px;
  font-weight:400;
  color:rgba(255,255,255,.95);
}

/* Horizontal login fields (index + signup) */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px){
  .grid2{ grid-template-columns: 1fr; }
}

/* ===== Avatar grid (signup) ===== */
.avatarGrid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px;
  margin-top: 8px;
}
@media (max-width: 720px){
  .avatarGrid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px){
  .avatarGrid{ grid-template-columns: repeat(3, 1fr); }
}
.avatarTile{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  overflow:hidden;
  cursor:pointer;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .08s ease, border-color .08s ease;
}
.avatarTile:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.32); }
.avatarTile img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatarTile.isSelected{ border-color: rgba(255,255,255,.6); box-shadow:0 0 0 2px rgba(10,79,175,.65) inset; }
/* ===== ANV index fixes (V1.1) ===== */
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px){
  .grid2{ grid-template-columns: 1fr; }
}

.anv-intro{
  font-family:'Poppins',sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.55;
  letter-spacing:.3px;
  color:rgba(255,255,255,.80);
  text-align:center;
  max-width:720px;
  padding:10px 14px;

  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  margin:0;

  background:rgba(5,11,24,.35);
  border-radius:16px;
  backdrop-filter:blur(10px);
  z-index:2;
}
.anv-intro span{
  display:block;
  margin-top:6px;
  font-weight:400;
  color:rgba(255,255,255,.95);
}

/* ===== ANV Intro Gold (final override) ===== */
.anv-intro{
  font-family:'Poppins',sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.55;
  letter-spacing:.3px;
  color:rgba(255,255,255,.80);
  text-align:center;
  max-width:720px;
  padding:10px 14px;

  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  margin:0;

  background:rgba(5,11,24,.35);
  border-radius:16px;
  backdrop-filter:blur(10px);
  z-index:2;
}
.anv-intro span{
  display:block;
  margin-top:6px;
  font-weight:400;
  color:rgba(255,255,255,.95);
}

/* ===== index: buttons on 2 columns ===== */
.grid2Buttons{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 560px){
  .grid2Buttons{ grid-template-columns: 1fr; }
}
.grid2Buttons .loginBtn{ width:100%; margin-top:0 !important; }


/* ===== index: keep intro visible ===== */
.loginWrap{
  overflow-y:auto;
  max-height: 100vh;
  padding-bottom: 28px;
}


/* ===== index: intro bolder ===== */
.anv-intro{
  font-family:'Poppins',sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.55;
  letter-spacing:.3px;
  color:rgba(255,255,255,.80);
  text-align:center;
  max-width:720px;
  padding:10px 14px;

  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  margin:0;

  background:rgba(5,11,24,.35);
  border-radius:16px;
  backdrop-filter:blur(10px);
  z-index:2;
}
.anv-intro span{
  display:block;
  margin-top:6px;
  font-weight:400;
  color:rgba(255,255,255,.95);
}

.spacer10{height:10px;}

body > *:not(#bgLayer){position:relative;z-index:2;}


/* =========================
   INDEX — INTRO COULEURS ANV (override final)
   ========================= */
.anv-intro{
  /* conserve le placement existant, on ne touche qu'aux couleurs */
  background: rgba(5,11,24,.35);
  border-radius:16px;
  backdrop-filter:blur(10px);

  /* dégradé OR/ORANGE */
  color: transparent;
  background-image: linear-gradient(90deg,#ff8a00,#ffd36a,#ff8a00);
  -webkit-background-clip:text;
  background-clip:text;
}

.anv-intro span{
  color: transparent;
  background-image: linear-gradient(90deg,#ffd36a,#ffffff,#ffd36a);
  -webkit-background-clip:text;
  background-clip:text;
}



/* =========================
   INDEX — LOGIN UP + MOBILE SAFE (NE TOUCHE PAS AU FOND)
   ========================= */

/* 1) Sécurité: fond (chemin depuis /css/) */
#bgLayer{
  background-image: url("../assets/fonds/fonds.png") !important;
}

/* 2) Remonte la card pour ne pas mordre sur l'intro */
.loginWrap{
  padding-top: 36vh !important;
  padding-bottom: 190px !important;
}
.loginCard{
  margin-bottom: 160px !important;
}

/* 3) Couleurs intro ANV (orange + blanc), sans dégradé transparent */
.anv-intro{
  color: #ff9a2a !important;
}
.anv-intro span{
  color: rgba(255,255,255,.92) !important;
}

/* Mobile : on remonte encore pour que l'intro ne recouvre jamais les champs */
@media (max-width: 560px){
  .loginWrap{
    padding-top: 26vh !important;
    padding-bottom: 220px !important;
  }
  .loginCard{
    margin-bottom: 190px !important;
  }
  .anv-intro{
    bottom: 12px !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    max-width: 92vw !important;
  }
}


/* =========================
   INDEX — MOBILE RESPONSIVE FIX (FINAL)
   Objectif:
   - Sur mobile: éviter que l'intro recouvre Pseudo/Mdp
   - Descendre légèrement le bloc connexion
   - Garder le fond/logo INTACT
   ========================= */

@media (max-width: 560px){

  /* on autorise la page à scroller (sinon tout se superpose) */
  body{
    overflow: auto !important;
  }

  /* le wrapper ne doit plus être une "page fixe" qui scroll à l'intérieur */
  .loginWrap{
    position: relative !important;
    inset: auto !important;
    min-height: 100vh !important;

    /* ✅ on DESCEND la card */
    padding-top: 38vh !important;

    /* pas de scroll interne */
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;

    padding-bottom: 22px !important;
  }

  .loginCard{
    margin-bottom: 14px !important;
  }

  /* l'intro devient un bloc normal sous le login */
  .anv-intro{
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    margin: 14px auto 22px !important;
    max-width: 92vw !important;
  }
}


/* ===== ANV: egaliser l'espace bas (sous "Mot de passe oublié ?") =====
   Le texte n'est pas forcément un <a>, donc on cible le dernier bloc de la card
   + on neutralise d'éventuels "spacers" ajoutés en HTML.
*/
.loginCard{
  padding-top: 14px !important;
  padding-bottom: 14px !important; /* même valeur que le haut */
}

/* Le dernier élément visible dans la card ne doit pas rajouter de marge */
.loginCard > *:last-child{
  margin-bottom: 0 !important;
}

/* Si un spacer existe après le lien (classes possibles), on le neutralise */
.loginCard .spacer,
.loginCard .gap,
.loginCard .loginSpacer,
.loginCard .login-spacer{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
}

/* On recrée un espace bas propre et constant, identique à l'espace haut */
.loginCard::after{
  content: "";
  display: block;
  height: 10px; /* ajuste si besoin (10 = "comme en haut") */
}


/* Réduction espace entre bloc connexion et texte d'intro */
.anv-intro{
  margin-top: 6px !important;
}



/* ===== ANV COOKIE BANNER (SAFE LOGIN) ===== */
.cookieBanner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(5,11,24,.95);
  border-top:1px solid rgba(255,255,255,.15);
  padding:12px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  z-index:9999;
  backdrop-filter:blur(10px);
}

.cookieBanner span{
  font-size:14px;
}

.cookieBanner a{
  color:#ffb35a;
  font-weight:900;
  text-decoration:none;
}

.cookieBanner button{
  background:linear-gradient(180deg,#ffb35a,#ff9a2a 55%,#c96c00);
  border:none;
  padding:8px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}

/* Desktop: avoid overlap with intro */
@media (min-width: 561px){
  .anv-intro{
    bottom:90px !important;
  }
}


/* ===== COOKIE BANNER HARD FIX (STACK CONTEXT) ===== */
#cookie-banner{
  position: fixed !important;
  z-index: 999999 !important;
}

.loginWrap{
  z-index: 1 !important;
}

/* ===== INDEX: 3 boutons (Connexion / Inscription / Démo) ===== */
.grid3Buttons{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
}
@media (max-width:560px){
  .grid3Buttons{ grid-template-columns:1fr; }
}
.grid3Buttons .loginBtn{
  width:100%;
  margin-top:0 !important;
}
/* Style bouton Démo (ANLV) */
.loginBtn.demo{
  background:linear-gradient(180deg,#0adcff,#0a4faf);
  border:1px solid rgba(10,220,255,.6);
}


/* =============================================
   SKIN PICKER — Sélecteur visuel de style cartes
   ============================================= */
.skinPicker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}

.skinTile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 7px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
  outline: none;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

.skinTile:hover:not(:disabled) {
  border-color: rgba(255,255,255,.38);
  transform: translateY(-2px);
}

/* Tile active / sélectionnée */
.skinTile.isActive {
  border-color: rgba(10,220,255,.85);
  box-shadow: 0 0 0 3px rgba(10,220,255,.18), 0 4px 18px rgba(10,220,255,.15);
  background: rgba(10,79,175,.30);
}

/* Image d'aperçu */
.skinTile-img {
  position: relative;
  width: 50%;
  margin: 0 auto;
  aspect-ratio: 2 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
}

.skinTile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: transform .2s ease;
}

.skinTile:hover:not(:disabled) .skinTile-img img {
  transform: scale(1.04);
}

/* Label sous l'image */
.skinTile-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  opacity: .85;
  transition: opacity .15s;
}

.skinTile.isActive .skinTile-label {
  opacity: 1;
  color: rgba(10,220,255,.95);
}

/* Checkmark visible uniquement si actif */
.skinTile-check {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 11px;
  color: rgba(10,220,255,.95);
  opacity: 0;
  transition: opacity .15s;
  font-weight: 900;
}

.skinTile.isActive .skinTile-check {
  opacity: 1;
}

/* Skin verrouillé (N&B - bientôt) */
.skinTile.isLocked {
  opacity: .48;
  cursor: not-allowed;
}

.skinTile.isLocked:hover {
  transform: none;
  border-color: rgba(255,255,255,.16);
}

.skinTile-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.52);
  color: rgba(255,255,255,.75);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 8px;
}

@media (max-width: 360px) {
  .skinPicker { gap: 7px; }
  .skinTile-label { font-size: 10px; }
}


/* =============================================
   SKIN PICKER — Fix desktop overflow
   (le picker ajoute ~120px, on compense)
   ============================================= */
@media (min-width: 561px) {
  .loginWrap {
    padding-top: 22vh !important;
    padding-bottom: 100px !important;
  }
  .loginCard {
    margin-bottom: 80px !important;
  }
}


/* =============================================
   SKIN PICKER — Desktop compact (logo visible)
   Uniquement min-width 561px — mobile intact
   ============================================= */
@media (min-width: 561px) {

  /* Remonter la card pour laisser le logo respirer */
  .loginWrap {
    padding-top: 28vh !important;
  }

  /* Tiles plus compactes : moins de padding interne */
  .skinTile {
    padding: 5px 4px 5px !important;
    gap: 4px !important;
  }

  /* Image encore plus petite sur desktop */
  .skinTile-img {
    width: 40% !important;
  }

  /* Label plus discret */
  .skinTile-label {
    font-size: 10px !important;
  }
}


/* =============================================
   ANV-INTRO EN HAUT — repositionnement
   ============================================= */

/* Desktop : intro fixée en haut */
@media (min-width: 561px) {
  .anv-intro {
    position: fixed !important;
    top: 18px !important;
    bottom: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
  }

  /* Card redescend pour laisser le logo visible au centre */
  .loginWrap {
    padding-top: 52vh !important;
    padding-bottom: 20px !important;
  }

  .loginCard {
    margin-bottom: 20px !important;
  }
}

/* Mobile : intro reste relative sous la card */
@media (max-width: 560px) {
  .anv-intro {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 12px auto 16px !important;
    max-width: 92vw !important;
  }
}


/* =============================================
   Fix : remonter la card pour ne pas masquer
   les mentions RGPD / cookie banner en bas
   ============================================= */
@media (min-width: 561px) {
  .loginWrap {
    padding-top: 38vh !important;
  }
}


/* =============================================
   Fix final : remonter la card d'un poil
   ============================================= */
@media (min-width: 561px) {
  .loginWrap {
    padding-top: 32vh !important;
  }
}


/* =============================================
   SKIN PICKER 4 tiles — compact desktop
   ============================================= */
@media (min-width: 561px) {

  /* Tiles plus petites pour tenir en 2x2 sans déborder */
  .skinTile {
    padding: 4px 4px 4px !important;
    gap: 3px !important;
  }

  .skinTile-img {
    width: 35% !important;
  }

  .skinTile-label {
    font-size: 9px !important;
  }

  /* Remonter encore un poil la card */
  .loginWrap {
    padding-top: 28vh !important;
  }
}


/* =============================================
   SKIN PICKER — 4 colonnes desktop / scroll mobile
   ============================================= */

/* Desktop : 4 tiles sur une seule ligne */
@media (min-width: 561px) {
  .skinPicker {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .skinTile {
    padding: 6px 4px !important;
    gap: 4px !important;
  }
  .skinTile-img {
    width: 55% !important;
  }
  .skinTile-label {
    font-size: 10px !important;
  }
  .loginWrap {
    padding-top: 32vh !important;
  }
}

/* Mobile : 2 colonnes avec scroll si besoin */
@media (max-width: 560px) {
  .skinPicker {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* =============================================
   Fix final : descendre la card + réduire espace select
   ============================================= */
@media (min-width: 561px) {
  .loginWrap {
    padding-top: 44vh !important;
  }
}

/* Réduire l'espace sous le select Style de cartes */
.skinRow {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
.skinRow .loginInput {
  margin-bottom: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* =============================================
   Fix : supprimer l'espace sous "Mot de passe oublié"
   ============================================= */
.loginCard::after {
  height: 0 !important;
}
.loginCard .tiny {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Bouton CONTACT — style doré ANV */
.loginBtn.contact{
  background:linear-gradient(180deg,#ffd36a,#ff8a00);
  border:1px solid rgba(255,170,60,.6);
  box-shadow:0 0 10px rgba(255,170,60,.25);
}