/* ===============================
   login.css — form register/login only
   (aucun style sur header/footer/body global)
   =============================== */

/* Conteneur principal de la page d'auth */
.auth-wrap {
  width: min(960px, 92vw);
  margin: 32px auto 48px;      /* espace autour du bloc, sans impacter le header */
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
}

/* Carte formulaire */
.card-auth {
  position: relative;
  background: linear-gradient(135deg, #c7f1eb, #d3d8f5);
  border: 1px solid rgba(226,232,240,.6);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  backdrop-filter: saturate(1.2) blur(10px);
  overflow: hidden;
  transform: perspective(1200px) rotateX(.0001deg);
  transition: box-shadow .25s ease;
}
.card-auth:hover { box-shadow: 0 22px 52px rgba(2,6,23,.16); }

.card-auth .head { padding: 24px 24px 0; }
.card-auth h1 {
  font: 800 28px/1.1 Poppins, Inter, sans-serif;
  margin: 0;
  letter-spacing: .2px;
}
.card-auth .sub { color: #475569; margin: 6px 0 0; }

/* Formulaire */
.auth-form {
  padding: 18px 24px 24px;
  display: grid;
  gap: 12px;
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-field { display: grid; gap: 6px; }
.form-field label {
  font-weight: 600;
  color: #334155; ;   /* gris foncé (Slate-800) */
}

.form-field input,
.form-field select {
  color: #d4af37 !important; /* doré propre */
  font-weight: 600;
}

/* Champs + icônes à gauche (centrées) */
.form-field input,
.form-field select {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 14px 12px 14px 46px;   /* laisse la place à l’icône */
  border-radius: 14px;
  border: 1px solid #e2e8f0;      /* bord gris clair */
  background: #f3f4f6;            /* fond gris clair */
  outline: none;
  line-height: 1.2;
  color: #d4af37 !important;      /* texte doré */
  font-weight: 600;
}

/* placeholder doré plus clair */
.form-field input::placeholder,
.form-field select::placeholder {
  color: #e6c766;
  opacity: .8;
}

/* focus */
.form-field input:focus,
.form-field select:focus {
  box-shadow: 0 0 0 6px rgba(14,165,233,.15);
  border-color: #cbd5e1;
  background: #f3f4f6;
  color: #d4af37 !important;
}

/* corrige aussi le texte des champs auto-remplis (Chrome, Edge, etc.) */
.form-field input:-webkit-autofill {
  -webkit-text-fill-color: #d4af37 !important;
}


.with-icon { position: relative; }
.with-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: .8;
}

/* Bouton */
.btn.primary {
  display: inline-block;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transition: transform .18s ease;
}
.btn.primary:hover { transform: translateY(-2px); }

/* Aides/erreurs */
.alt { font-size: 14px; color: #475569; }
.hint { font-size: 13px; color: #64748b; }
.error { color: #ef4444; font-size: 13px; margin-top: -2px; }

/* Panneau latéral */
.panel {
  padding: 24px;
  border-radius: 20px;
  border: 1px dashed #cbd5e1;
  background: #fff;
  display: grid;
  gap: 10px;
  align-content: start;
}
.panel h3 { margin: 0; font: 800 18px/1.2 Poppins, Inter, sans-serif; }
.badge {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

/* Décos optionnelles (si présentes dans ton HTML) */
.blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .5; animation: float 10s ease-in-out infinite; }
.b1 { width: 220px; height: 220px; left: -60px; top: -40px; background: #c7d2fe; }
.b2 { width: 260px; height: 260px; right: -60px; bottom: -60px; background: #bae6fd; animation-delay: -2.5s; }
@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-14px) } }

/* Responsive */
/* Responsive register : mobile + tablette */
@media (max-width: 980px) {
  .auth-wrap{
    grid-template-columns: 1fr;   /* form + animation l’un sous l’autre */
    gap: 18px;
  }

  .row{
    grid-template-columns: 1fr;   /* champs 1 par ligne */
  }

  /* carte animation : pleine largeur, plus de bordel */
  .panel-network{
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    min-height: 160px;
  }
}

/* petit affinage pour très petit écran */
@media (max-width: 600px){
  .auth-form{
    padding: 16px 16px 20px;
  }
}

/* Forcer GSO Nova en non-gras sur les pages d'auth */
body.auth .brand span {
  font-weight: 550 !important; /* ou normal */
}
/* 1) Évite le décalage lié à 100vw et au padding */
html, body { margin:0; }
*, *::before, *::after { box-sizing: border-box; }

/* Si tu as du 100vw quelque part, remplace par 100% */
.auth, .auth-wrap, .card-auth, .panel {
  max-width: 100%;
  width: 100%;
}

/* 2) Sticky footer propre pour cette page */
body.auth { min-height: 100vh; display:flex; flex-direction: column; }
.auth-wrap { flex: 1; }

/* 3) Aligne visuellement avec le footer (mêmes gutters) */
.auth-wrap { padding-inline: 24px; margin-inline: auto; max-width: 1200px; }

/* Debug temporaire: si la barre horizontale disparaît, c’était bien un débordement */
body.auth { overflow-x: hidden; } /* (en dernier recours) */
.password-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.password-wrap input {
  flex: 1;
  padding-right: 40px; /* espace pour le bouton */
}

.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

.form-extra {
  margin-top: 8px;
  text-align: left;
}

.form-extra .forgot-link {
  font-size: 0.9em;
  color: #4a6cf7;
  text-decoration: none;
}

.form-extra .forgot-link:hover {
  text-decoration: underline;
}

  h1 {
      color: #007BFF !important; /* bleu forcé */
    }
	  h3 {
      color: #007BFF !important; /* bleu forcé */
    }
	
/* Bloc qui contient la carte NFC */
.panel-nfc{
  margin-top:24px;
  padding:6px;
  border-radius:20px;
  background:rgba(148,163,184,.12);
  border:1px dashed rgba(148,163,184,.5);
}

/* Carte NFC */
.nfc-card{
  position:relative;
  border-radius:18px;
  padding:14px 16px;
  background:linear-gradient(135deg,#020617,#111827);
  box-shadow:0 16px 40px rgba(15,23,42,.6);
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:14px;
}

/* Petit “chip” */
.nfc-chip{
  width:26px;
  height:18px;
  border-radius:6px;
  background:linear-gradient(135deg,#e5e7eb,#cbd5f5);
  position:relative;
}
.nfc-chip::before,
.nfc-chip::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:4px;
  border:1px solid rgba(55,65,81,.8);
}

/* Ondes NFC */
.nfc-waves{
  position:relative;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nfc-waves span{
  position:absolute;
  border-radius:50%;
  border:2px solid rgba(56,189,248,.4);
  animation:nfcWave 2.6s infinite ease-out;
}
.nfc-waves span:nth-child(1){
  width:14px;height:14px;animation-delay:0s;
}
.nfc-waves span:nth-child(2){
  width:22px;height:22px;animation-delay:.4s;
}
.nfc-waves span:nth-child(3){
  width:30px;height:30px;animation-delay:.8s;
}

@keyframes nfcWave{
  0%{transform:scale(.7);opacity:.9;}
  100%{transform:scale(1.4);opacity:0;}
}

/* Texte de la carte */
.nfc-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.nfc-label{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:#e5f0ff;
}
.nfc-sub{
  margin:0;
  font-size:12px;
  color:#9ca3af;
}

/* Ligne de scan horizontale */
.nfc-scan-line{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(56,189,248,.1),
    rgba(56,189,248,.45),
    rgba(56,189,248,.1),
    transparent
  );
  mix-blend-mode:screen;
  transform:translateX(-120%);
  animation:nfcScan 3.4s linear infinite;
}

@keyframes nfcScan{
  0%{transform:translateX(-120%);}
  100%{transform:translateX(120%);}
}
/* Bloc réseau / connexion */
.panel-network{
  margin-top:24px;
  border-radius:18px;
  position:relative;
  overflow:hidden;
  min-height:180px;
  background:radial-gradient(circle at top left,#0ea5e91a,#1f29371a);
  border:1px solid rgba(148,163,184,.5);
  box-shadow:0 18px 40px rgba(15,23,42,.25);
}

/* Canvas plein dans le bloc */
.panel-network canvas{
  width:100%;
  height:100%;
  display:block;
}

/* Halo léger autour (optionnel mais stylé) */
.panel-network::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 180deg,#0ea5e9,#22c55e,#6366f1,#0ea5e9);
  opacity:.14;
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}

/* Texte au centre, style “interface vaisseau” */
.panel-network-text{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#f9fafb;
  z-index:2;             /* au-dessus du canvas */
  pointer-events:none;
  animation:pntFadeIn 1.2s ease-out forwards;
}
/* panel sans carte blanche derrière */
.panel.panel-ghost{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0;
  align-self:center;      /* centre verticalement si le parent est en flex */
}

/* si le .panel a un pseudo-élément décoratif, on le désactive */
.panel.panel-ghost::before,
.panel.panel-ghost::after{
  display:none;
}

/* on enlève le margin-top qu'on avait mis sur panel-network */
.panel.panel-ghost .panel-network{
  margin-top:0;
}

.pnt-small{
  font-size:13px;              /* un peu plus gros */
  letter-spacing:0.25em;
  text-transform:uppercase;
  opacity:.9;
  margin-bottom:4px;
}

.pnt-brand-gso{
  color:#6366f1;               /* violet */
  font-weight:700;
}

.pnt-brand-nova{
  color:#0ea5e9;               /* bleu */
  font-weight:700;
}


.pnt-main{
  font-size:17px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-shadow:
    0 0 12px rgba(248,250,252,.8),
    0 0 26px rgba(56,189,248,.7);
}

/* apparition douce + léger slide */
@keyframes pntFadeIn{
  0%{
    opacity:0;
    transform:translateY(10px);
    filter:blur(4px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
/* enlève le fond blanc sous "Déjà inscrit ?" */
.card-auth .auth-form{
  background: transparent !important;
}

/* s'assure que la ligne texte n'ajoute pas de bande blanche */
.card-auth .auth-form .alt{
  display:block;
  background: transparent !important;
  padding-top: 10px;
}