/* ==========================================================================
   layout.css — structure générale : en-tête, contenu, pied de page

   Points de rupture utilisés dans tout le projet :
   1440px / 1024px / 768px / 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(10, 13, 12, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
}

.nav {
  max-width: var(--largeur-max-large);
  margin: 0 auto;
  padding: var(--esp-3) var(--esp-5);
  display: flex;
  align-items: center;
  gap: var(--esp-5);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--texte);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-logo:hover {
  text-decoration: none;
  color: var(--accent);
}

.nav-logo strong {
  color: var(--accent);
  font-weight: 700;
}

.nav-logo-marque {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-voile);
  flex-shrink: 0;
}

.nav-liens {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-lien {
  display: block;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--rayon-m);
  color: var(--texte-doux);
  font-size: 0.92rem;
  transition: color var(--transition), background-color var(--transition);
}

.nav-lien:hover {
  color: var(--texte);
  background-color: var(--surface);
  text-decoration: none;
}

.nav-lien.actif {
  color: var(--accent);
  background-color: var(--accent-voile);
}

.nav-stats {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
}

/* --------------------------------------------------------------------------
   Contenu
   -------------------------------------------------------------------------- */

.contenu {
  flex: 1;
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--esp-7) var(--esp-5) var(--esp-8);
}

.contenu-large {
  max-width: var(--largeur-max-large);
  padding-top: var(--esp-5);
}

.contenu-etroit {
  max-width: 720px;
}

.section {
  margin-top: var(--esp-7);
}

.section-titre {
  font-size: 1.3rem;
  margin-bottom: var(--esp-2);
}

.section-intro {
  color: var(--texte-doux);
  max-width: 70ch;
  margin-bottom: var(--esp-5);
}

.page-entete {
  margin-bottom: var(--esp-6);
}

.page-titre {
  margin-bottom: var(--esp-2);
}

.page-sous-titre {
  color: var(--texte-doux);
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
  border-top: 1px solid var(--bordure);
  padding: var(--esp-5);
  text-align: center;
  color: var(--texte-discret);
  font-size: 0.86rem;
}

.pied p {
  margin: 0 0 var(--esp-1) 0;
}

.pied-note {
  color: var(--texte-discret);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Notifications
   -------------------------------------------------------------------------- */

.notifications {
  position: fixed;
  right: var(--esp-5);
  bottom: var(--esp-5);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  max-width: min(380px, calc(100vw - 2 * var(--esp-5)));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Grilles réutilisables
   -------------------------------------------------------------------------- */

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--esp-4);
}

.grille-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.grille-niveaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--esp-3);
}

/* --------------------------------------------------------------------------
   Adaptations
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .contenu {
    padding: var(--esp-6) var(--esp-4) var(--esp-7);
  }

  .nav {
    padding: var(--esp-3) var(--esp-4);
    gap: var(--esp-4);
  }
}

@media (max-width: 768px) {
  .nav {
    flex-wrap: wrap;
    gap: var(--esp-3);
  }

  .nav-liens {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    padding-bottom: var(--esp-1);
  }

  .nav-stats {
    margin-left: auto;
  }

  .notifications {
    right: var(--esp-3);
    left: var(--esp-3);
    bottom: var(--esp-3);
    max-width: none;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  .contenu {
    padding: var(--esp-5) var(--esp-3) var(--esp-6);
  }

  .nav-lien {
    padding: var(--esp-2);
    font-size: 0.86rem;
  }
}