/* =========================================
    HEADER & NAVIGATION
========================================= */

/* Conteneur principal du header : fond noir et texte blanc */
header {
  background-color: var(--bg-header);
  color: var(--text-white);
}

/* Barre de navigation : Flexbox pour espacer les éléments (gauche, centre, droite) */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 124px;
  padding: 0 35px 0 35px;
}

/* --- Liens de Navigation (Gauche) --- */
/* Liste des liens : suppression des puces et alignement horizontal */
.nav-links {
  list-style: none;
  display: flex;
  gap: 45px;
}

/* Style des liens */
.nav-links a {
  text-decoration: none;
  color: var(--text-white);
  font-family: var(--font-rugen);
  font-weight: var(--weight-expanded);
  font-size: var(--text-h4);
}

/* --- Logo Central --- */
/* Positionnement absolu pour centrer parfaitement le logo indépendamment des autres éléments */
.nav-logo-center {
  height: 111px;
  width: 111px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image dans le lien */
.nav-logo-center img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Garde les proportions du logo */
}

/* --- Icônes (Droite) --- */
/* Liste des icônes : alignement horizontal et espacement */
.nav-icons {
  list-style: none;
  display: flex;
  gap: 45px;
}

/* Dimensionnement des icônes panier et utilisateur */
.nav-icons img {
  text-decoration: none;
  height: 32px;
  width: 32px;
}

/* =========================================
    FOOTER
========================================= */

/* Conteneur principal du footer */
.main-footer {
  background-color: var(--bg-card);
  padding: 50px 60px 40px;
  color: var(--text-white);
}

/* Conteneur interne pour centrer et aligner le logo et les colonnes */
.footer-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 80px;
}

/* Taille du logo dans le footer */
.footer-brand a {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

.footer-brand img {
  width: 240px;
  height: auto;
  display: block; /* Supprime l'espace vide sous l'image */
}

/* Grille des colonnes de liens */
.footer-nav-grid {
  display: flex;
  gap: 120px;
}

/* Style d'une colonne individuelle */
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

/* Titres des colonnes (H4) */
.footer-col h4 {
  font-family: var(--font-lato);
  font-size: var(--text-base);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Liens dans le footer */
.footer-col a {
  display: block;
  font-family: var(--font-lato);
  font-size: var(--text-base);
  text-decoration: none;
  color: var(--text-white);
  text-transform: uppercase;
}

/* Ligne des réseaux sociaux : centrée avec espacement */
.footer-social-row {
  margin: 30px auto 0;
  display: flex;
  justify-content: center;
  gap: 32px;
}

/* Conteneur des liens sociaux */
.footer-social-row a {
  display: inline-flex;
}

/* Taille des icônes réseaux sociaux */
.footer-social-row img {
  width: 26px;
  height: 26px;
  display: block;
  cursor: pointer;
}

/* Barre de copyright tout en bas */
.copyright-bar {
  background-color: #000000;
  padding: 20px 0;
  text-align: center;
  color: var(--text-white);
  font-family: var(--font-rugen);
  font-size: 27px;
}