html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
main {
  flex: 1; /* prend toute la hauteur restante */
}
/* Espace de sécurité en bas si footer fixed */
:root { --footer-h: 72px; }

/* Fond d'écran */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/static/points/images/vive-les-points.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.9; /* transparence sur l'image uniquement */
    z-index: -1; /* derrière tout le contenu */
}

/* Couleur de fond info (avec transparence) */
.bg-info-transparent {
  background-color: rgba(13, 202, 240, 0.92); /* bleu info Bootstrap avec transparence */
}

/* Couleur de fond du body */
/* Titre de page */
.page-title {
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.2;
}

/* Contraste si fond clair */
.page-title-contrast {
  color: #0b2e13; /* ou #0d6efd si tu préfères bleu bootstrap */
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.title-chip {
  display: inline-block;
  background: rgba(0,0,0,.45);
  color: #fff;
  padding: .4rem .9rem;
  border-radius: .75rem;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* Stack des messages */

/* Wrapper neutre par défaut */
.alerts-stack{
  padding-top: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* ⚠️ Fond discret du wrapper UNIQUEMENT quand il y a un warning */
.alerts-stack:has(.alert-warning){
  padding-top: .5rem;
  background-color: var(--bs-warning-bg-subtle);
  border-bottom: 1px solid var(--bs-warning-border-subtle);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  border-radius: .25rem;
}

/* ✅ Success / Info / Primary / Secondary / Danger :
   wrapper neutre → une seule alerte visible */
.alerts-stack:has(.alert-success),
.alerts-stack:has(.alert-info),
.alerts-stack:has(.alert-primary),
.alerts-stack:has(.alert-secondary),
.alerts-stack:has(.alert-danger){
  padding-top: .5rem;     /* petit espace haut si tu veux */
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Lisibilité des messages longs dans l’alerte */
.alert ul { margin-bottom: 0; }
.alert { font-size: 1rem; }

/* Erreurs sous les champs (Django errorlist) */
.errorlist {
  color: #dc3545;          /* rouge Bootstrap */
  margin: .25rem 0 0;
  list-style: none;
  padding-left: 0;
  font-size: .875rem;
}
.errorlist li::before {
  content: "⚠ ";
}