:root {
  --background: hsl(240, 20%, 12%);
  --foreground: hsl(0, 0%, 100%);
  --primary: hsl(270, 60%, 50%);
  --primary-foreground: hsl(0, 0%, 100%);
  --muted-foreground: hsl(240, 10%, 70%);
  --radius: 0.75rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
}

body.auth-page {
  position: relative;
  background: url('../images/pinguin.png') center / cover no-repeat;
  color: var(--foreground);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Flou du background */
body.auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(8px);
  transform: scale(1.05);
  z-index: 0;
}

body.auth-page>* {
  position: relative;
  z-index: 1;
}

/* Container principal */
body.auth-page .container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  min-height: 650px;
  border-radius: 24px;
  background: url('../images/pinguin.png') center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.2);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow: hidden;
}

/* Logo en haut à gauche du container, visible au-dessus de l'image */
body.auth-page .container-logo {
  position: absolute;
  top: 20px;
  /* espace par rapport au haut */
  left: 20px;
  /* espace par rapport à gauche */
  z-index: 10;
  /* bien au-dessus du background et du form */
  display: flex;
  align-items: center;
}

/* Logo plus gros */
body.auth-page .container-logo img {
  width: 140px;
  /* agrandi */
  height: auto;
  object-fit: contain;
}

/* Formulaire */
body.auth-page .form-box {
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 3rem;
  border-radius: 20px;
  background: hsla(220, 20%, 15%, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsla(260, 30%, 40%, 0.3);
  color: var(--foreground);
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 🔥 TITRE PRINCIPAL (PinguinCorp) */
body.auth-page .main-title {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

/* Titres */
body.auth-page .auth-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.2rem;
}

body.auth-page .auth-subtitle {
  font-size: 0.83rem;
  color: var(--muted-foreground);
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Champs */
body.auth-page .auth-field {
  position: relative;
  margin-bottom: 0.75rem;
  width: 100%;
}

body.auth-page .auth-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.6;
  pointer-events: none;
}

body.auth-page .auth-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  background: hsla(220, 20%, 20%, 0.5);
  border: 1px solid hsla(260, 30%, 50%, 0.25);
  border-radius: var(--radius);
  color: var(--foreground);
  font-size: 0.9rem;
  transition: border-color 0.2s;
}

body.auth-page .auth-input::placeholder {
  color: var(--muted-foreground);
}

body.auth-page .auth-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px hsla(270, 60%, 50%, 0.2);
}

/* Terms / remember */
body.auth-page .auth-remember,
body.auth-page .auth-terms {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin: 0.75rem 0;
}

/* Bouton */
body.auth-page .btn-primary-gradient {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, hsl(270, 60%, 50%), hsl(300, 70%, 45%));
  color: var(--primary-foreground);
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

body.auth-page .btn-primary-gradient:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

body.auth-page .btn-primary-gradient:active {
  transform: translateY(0);
}

/* Liens */
body.auth-page .auth-link {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-top: 0.75rem;
}

body.auth-page .auth-link a {
  color: hsl(270, 60%, 70%);
  text-decoration: none;
}

body.auth-page .auth-link a:hover {
  text-decoration: underline;
}

body.auth-page .auth-forgot {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}

body.auth-page .auth-forgot a {
  color: var(--muted-foreground);
  text-decoration: none;
}

body.auth-page .auth-forgot a:hover {
  color: var(--foreground);
  text-decoration: underline;
}

/* Messages */
body.auth-page .auth-error {
  background: hsla(0, 84%, 60%, 0.2);
  border: 1px solid hsla(0, 84%, 60%, 0.4);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: hsl(0, 84%, 80%);
  margin-bottom: 1rem;
}

body.auth-page .auth-info {
  background: hsla(270, 60%, 50%, 0.2);
  border: 1px solid hsla(270, 60%, 50%, 0.4);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;

  /* ============================================================
   BARRE DE RECHERCHE AJAX
   ============================================================ */

  /*
Cette section concerne UNIQUEMENT la barre de recherche
que tu as ajoutée dans ton template Twig :

<input type="text" id="searchInput">
<div id="resultats"></div>

Le but est de la rendre visible, moderne
et cohérente avec le design PinguinCorp.
*/

  /* --- Champ de saisie --- */
  #searchInput {
    /*
    largeur responsive :
    prend toute la largeur disponible
    mais ne dépasse jamais 420px
    */
    width: 100%;
    max-width: 420px;

    /*
    espace intérieur :
    haut/bas = 12px
    gauche/droite = 16px
    */
    padding: 12px 16px;

    /*
    espace extérieur :
    ajoute de l’air autour du champ
    */
    margin: 16px 0;

    /*
    bordure dans le style du dashboard
    */
    border: 1px solid rgba(100, 150, 255, 0.18);

    /*
    coins arrondis
    */
    border-radius: 10px;

    /*
    fond sombre identique aux cards
    */
    background: rgba(4, 14, 36, 0.9);

    /*
    couleur du texte tapé
    */
    color: var(--text-primary);

    /*
    taille du texte
    */
    font-size: 0.95rem;

    /*
    enlève le contour navigateur par défaut
    */
    outline: none;

    /*
    animation fluide lors du focus
    */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* --- Texte gris affiché avant saisie --- */
  #searchInput::placeholder {
    color: var(--text-secondary);
  }

  /* --- Effet quand l'utilisateur clique dans la barre --- */
  #searchInput:focus {
    /*
    bordure bleue lumineuse
    */
    border-color: var(--accent-blue);

    /*
    halo lumineux autour du champ
    */
    box-shadow: 0 0 0 3px rgba(91, 196, 245, 0.15);
  }

  /* --- Zone qui affiche les résultats AJAX --- */
  #resultats {
    /*
    petit espace sous la barre
    */
    margin-top: 12px;

    /*
    même largeur que l'input
    */
    max-width: 420px;

    /*
    fond sombre style dashboard
    */
    background: rgba(4, 14, 36, 0.95);

    /*
    bordure douce
    */
    border: 1px solid rgba(100, 150, 255, 0.18);

    /*
    coins arrondis
    */
    border-radius: 10px;

    /*
    cache les débordements
    */
    overflow: hidden;
  }

  /* --- Chaque ligne de résultat --- */
  #resultats p {
    /*
    espace intérieur pour chaque nom
    */
    padding: 12px 16px;

    /*
    supprime les marges par défaut du <p>
    */
    margin: 0;

    /*
    ligne de séparation entre résultats
    */
    border-bottom: 1px solid rgba(100, 150, 255, 0.08);

    /*
    curseur main pour effet interactif
    */
    cursor: pointer;

    /*
    transition hover fluide
    */
    transition: background 0.2s ease;
  }

  /* --- Survol souris --- */
  #resultats p:hover {
    /*
    surbrillance bleue légère
    */
    background: rgba(91, 196, 245, 0.12);
  }

  /* --- Dernier élément sans bordure --- */
  #resultats p:last-child {
    border-bottom: none;
  }


}