/* static/css/style.css */

/* ==========================================================================
   Base globale — s'applique à TOUTES les pages
   ========================================================================== */

body {
  background-color: #000000;
  color: #ffffff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Les liens restent lisibles sur fond noir, sans dépendre des couleurs
   par défaut de Bootstrap qui supposent souvent un fond clair */
a {
  color: #6ea8fe;
}
a:hover {
  color: #9ec5fe;
}

/* ==========================================================================
   Ajustements mobile — Bootstrap gère déjà beaucoup de choses,
   ceci ne fait qu'affiner certains détails
   ========================================================================== */

/* Évite que le texte soit collé aux bords sur petit écran */
.container-fluid {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Sur très petit écran, on réduit un peu les titres pour éviter
   qu'ils ne prennent trop de place verticalement */
@media (max-width: 576px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
}

/* ==========================================================================
   Classes utilitaires réutilisables sur plusieurs pages
   (à compléter au fur et à mesure de vos besoins réels)
   ========================================================================== */

.page-centree {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* ==========================================================================
   Page d'accueil — section "hero" avec image de fond
   ========================================================================== */

.hero-hero {
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;   /* image entière visible, quitte à laisser des bandes */
  min-height: 100vh;
  background-attachment: scroll;
}

/* display-3 est assez grand (≈ 48px) : on le réduit un peu sur très petit écran
   pour éviter qu'il ne prenne trop de place verticale sur un téléphone */
@media (max-width: 400px) {
  .hero-hero h1.display-3 {
    font-size: 2.2rem;
  }
}

/* ==========================================================================
   Formulaires (login, inscription...) — style commun des inputs Django
   ========================================================================== */

form input {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff !important;
  background-color: #1a1d21 !important;
  background-clip: padding-box;
  border: 1px solid #3a3f44 !important;
  appearance: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}
form input:focus {
  color: #fff;
  background-color: #1a1d21;
  border-color: #0d6efd !important;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
form input[type="checkbox"] {
  width: auto !important;
  display: inline-block !important;
  margin-right: 0.5rem;
  padding: 0;
}

.text-gradient {
  background: linear-gradient(180deg, #fff 0%, #adb5bd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Le formulaire d'inscription a un focus VERT (validation),
   distinct du focus BLEU par défaut du login. La classe .form-inscription
   rend ce sélecteur plus spécifique, donc il l'emporte sur la règle générale
   ci-dessus, MAIS uniquement sur cette page précise. */
.form-inscription input:focus {
  border-color: #198754 !important;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Nettoyage des listes d'aide Django (ex: exigences du mot de passe) */
.help-text ul {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 0.8rem;
  color: #8c959e;
}
.help-text li {
  margin-top: 0.2rem;
}