// Footer : 2 groupes — logos à gauche, navs + linkedin à droite.
//
// Structure DOM (cf. page.html.twig + Drupal regions) :
//   footer
//     section#footer_top                (vide actuellement)
//     section#footer_middle
//       section#footer_left             (logos rep + epau)
//       div#footer_section
//         section#footer_center         (nav compte + nav pied de page)
//         section#footer_right          (icône linkedin)
//     section#footer_bottom             (vide actuellement)
//
// Largeur : 100% en mobile, réduit à la colonne contenu (50vw centré)
// en desktop, comme le reste du contenu de la home.

.layout-container > footer {
  width: 100%;
  background-color: white;
  margin-top: 50px;
  padding: 1rem $x_margin;
  box-sizing: border-box;
  @media (min-width: $breakpoint_desktop) {
    width: 50vw;
    margin-left: 25vw;
    padding: 1rem;
  }

  #footer_middle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
  }

  // --- Groupe gauche : logos ---
  #footer_left > div {
    display: flex;
    align-items: center;
    gap: 1rem;
    #block-erabletheme-logorep img { max-width: 100px; height: auto; }
    #block-erabletheme-logoepau img { max-width: 150px; height: auto; }
  }

  // --- Groupe droite : navs + linkedin ---
  #footer_section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  // Drupal injecte un <div> wrapper entre #footer_center et les <nav>.
  // On flexe ce wrapper pour aligner les 2 navs côte à côte.
  #footer_center > div {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    nav ul {
      display: flex;
      gap: 1.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
      li a {
        color: $text_grey;
        font-family: $marianne;
        font-weight: $fw_bold;
        font-size: $fs_xs;
        text-decoration: underline;
        line-height: 1.2;
      }
    }
  }

  #footer_right #block-erabletheme-socialmedialinks-2 ul {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    a span {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.6rem;
      height: 1.6rem;
      border-radius: 50%;
      background-color: $fluo_green;
      color: $text_grey;
      font-size: 0.8rem;
      font-weight: lighter;
    }
    a svg.ext { display: none; }
  }
}