/* ==========================================================================
   footer.css — #mainFooter

   Paliers utilises : 1200 / 991 / 767.

   Cinquieme feuille de la cascade (tokens > base > layout > header/footer).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Bloc footer
   -------------------------------------------------------------------------- */

#mainFooter {
  padding: 42px 0 0;
  background: var(--secondary);
  color: var(--grey-footer);
  font-size: var(--lba-size-footer);
  line-height: 20px;
}

/* Largeur fixe, volontairement plus etroite que .wrapper. */
#mainFooter .footer-content {
  width: 1170px;
  margin: 0 auto;
}


/* --------------------------------------------------------------------------
   2. Haut du footer — 3 colonnes
   -------------------------------------------------------------------------- */

#mainFooter .footer-top {
  padding: 0 10px 33px;
  border-bottom: var(--border-footer);
}

#mainFooter .footer-top .wrap > div {
  flex: 1;
}

/* Les 3 colonnes sont alignees EN HAUT et non centrees. Le balisage porte la
   classe utilitaire `align-center`, inoffensive tant que les colonnes ont des
   hauteurs proches. Des que la colonne contact se reduit a une seule entree
   (42px contre 80px pour l'adresse), le centrage decale son contenu de
   (80-42)/2 = 19px vers le bas — mesure : 391px contre 372px. `align-items:
   start` sur ce seul bloc remet les trois colonnes sur la meme ligne de depart,
   sans toucher a la classe utilitaire partagee. */
#mainFooter .footer-top .wrap {
  align-items: start;
}

#mainFooter .footer-text {
  color: var(--white);
  font-size: var(--lba-size-footer-lead);
  line-height: 30px;
}

/* Le lien « Contactez-nous » porte l'icone avion : inline-flex + gap 12px pour
   la poser a cote du libelle. `display`, `font-size`, `gap` et la marge sont
   tous necessaires — sans eux l'icone se decale du libelle. */
#mainFooter .footer-text a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: .9rem 0 0;
  color: var(--grey-footer);
  font-size: var(--lba-size-footer);
  text-decoration: none;
}

#mainFooter .footer-text a:hover {
  color: var(--primary-color);
}

/* Lien inactif : le survol ne doit pas suggerer un lien cliquable.
   ⚠️ PIEGE DE SPECIFICITE — la regle generique de header.css
   (`#mainFooter .menu-link--inactive:hover`) ne suffit pas ici : a specificite
   EGALE (0,2,1), footer.css est charge APRES header.css et `.footer-text a:hover`
   l'emporterait. D'ou cette regle, posee au plus pres de celle qu'elle annule. */
#mainFooter .footer-text .menu-link--inactive:hover {
  color: var(--grey-footer);
}

/* Les icones SVG sont inlinees dans le balisage : elles ne doivent pas se
   comprimer quand le texte adjacent est long.

   ⚠️ `width: 22px` est indispensable : sans elle chaque SVG garde sa largeur
   intrinseque (20 / 27,8 / 16,3px), et les textes des lignes de coordonnees ne
   demarrent alors pas a la meme abscisse. */
#mainFooter .list-icon svg {
  flex: 0 0 auto;
  width: 22px;
  height: auto;
}


/* --------------------------------------------------------------------------
   3. Logo du footer
   -------------------------------------------------------------------------- */

#mainFooter .wrap-logo-footer {
  display: flex;
  justify-content: center;
  padding: 33px 10px 27px;
}


/* --------------------------------------------------------------------------
   4. Menu du footer
   --------------------------------------------------------------------------
   Le separateur entre entrees est un filet vertical en `::before` sur chaque
   `li` precede d'un autre. Masque sous 991px (§6).
   -------------------------------------------------------------------------- */

#mainFooter .footer-menu {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 0;
  list-style: none;
  color: var(--grey-footer);
  font-size: var(--lba-size-submenu);
  line-height: 24px;
  text-transform: uppercase;
}

#mainFooter .footer-menu li {
  position: relative;
}

#mainFooter .footer-menu a {
  color: inherit;
  font-weight: var(--lba-font-weight-bold);
  text-decoration: none;
}

#mainFooter .footer-menu a:hover {
  color: var(--primary-color);
}

#mainFooter .footer-menu li ~ li::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: .65em;
  left: -20px;
  width: 1px;
  height: 10px;
  background: var(--grey-footer);
}


/* --------------------------------------------------------------------------
   5. Barre de copyright
   --------------------------------------------------------------------------
   `.footer-copyright` est un enfant direct de <footer> : selecteur simple,
   pas de descendant inutile.
   -------------------------------------------------------------------------- */

.footer-copyright {
  margin-top: 57px;
  background: var(--black);
  color: var(--grey-copy);
  font-size: var(--lba-size-copyright);
  line-height: 24px;
}

.footer-copyright .copyright-text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

/* « LB Access » en ROUGE en permanence, et non au seul `:hover` : la marque
   doit rester mise en evidence en etat normal. Le `:hover` inverse donc le
   contraste (rouge -> blanc) au lieu de l'introduire. */
.footer-copyright .copyright-text a {
  color: var(--primary-color);
  text-decoration: none;
}

.footer-copyright .copyright-text a:hover {
  color: var(--white);
}


/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

/* <= 1200px : footer compacte, largeur fluide */
@media screen and (max-width: 1200px) {

  #mainFooter {
    padding-top: 30px;
  }

  #mainFooter .footer-content {
    width: 100%;
  }

  #mainFooter .wrapper {
    max-width: 96%;
  }

  #mainFooter .wrap-logo-footer {
    padding: 30px 10px 20px;
  }

  #mainFooter .wrap-logo-footer img {
    display: inline-block;
    max-width: 100px;
    height: auto;
  }

  #mainFooter .footer-menu {
    gap: 30px;
  }

  #mainFooter .footer-menu li ~ li::before {
    left: -15px;
  }

  .footer-copyright {
    margin-top: 27px;
  }

  .footer-copyright .copyright-text {
    height: 40px;
  }
}

/* <= 991px : entrees centrees, separateurs masques, icones reduites */
@media screen and (max-width: 991px) {

  #mainFooter .footer-menu li {
    text-align: center;
  }

  #mainFooter .footer-menu li ~ li::before {
    display: none;
  }

  #mainFooter ul.list-icon svg {
    width: 20px;
    height: auto;
  }
}

/* <= 767px : passage en colonne et reordonnancement
   logo (1) -> coordonnees (2) -> menu (3).

   ⚠️ Le reordonnancement repose sur la classe `.footer-logo` (en un seul mot).
   Un balisage ecrit `class="footer logo"` — deux classes — ne serait pas cible
   et l'ordre resterait celui du DOM, sans erreur visible. */
@media screen and (max-width: 767px) {

  #mainFooter .wrapper {
    display: flex;
    flex-direction: column;
    max-width: 96%;
  }

  #mainFooter .footer-logo   { order: 1; }
  #mainFooter .footer-top    { order: 2; }
  #mainFooter .footer-bottom { order: 3; }

  #mainFooter .footer-top {
    padding: 0 0 20px;
    border: 0;
  }

  #mainFooter .footer-top > .wrap,
  #mainFooter .footer-menu {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .6rem;
  }

  #mainFooter .wrap-logo-footer {
    justify-content: flex-start;
  }
}