// 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;
  position: relative;
  @media (min-width: $breakpoint_desktop) {
    width: 50vw;
    margin-left: 25vw;
    padding: 1rem;
  }

  // Ornements décoratifs (oiseau / fleur) "posés" sur le bord haut du
  // footer : bord bas légèrement entré dans le footer, le reste dépasse
  // au-dessus. En desktop le footer fait 50vw centré ; les ornements
  // sont à cheval sur les bords du footer (moitié dedans, moitié hors).
  // Le footer est passé au-dessus de main (cf. _global.scss) pour que
  // les ornements recouvrent le bas de la colonne.
  // pointer-events:none pour ne pas bloquer les liens du footer.
  > .footer-decor {
    position: absolute;
    bottom: 100%;
    width: 18vw;
    height: auto;
    transform: translateY(15%);
    pointer-events: none;
    @media (min-width: $breakpoint_desktop) {
      width: 8vw;
    }
  }
  > .footer-decor-bird   { left: 0; }
  > .footer-decor-flower { right: 0; }
  @media (min-width: $breakpoint_desktop) {
    > .footer-decor-bird   { left: -4vw; }
    > .footer-decor-flower { right: -4vw; }
  }

  #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; }
    // Logo epau : padding vertical pour cohérence visuelle avec le header
    // (le logo a moins de marge interne que les autres).
    #block-erabletheme-logoepau {
      a {
        display: flex;
        align-items: center;
        height: 4.5rem; // hauteur de référence (= $header_height)
        padding: 1.4rem 0;
        box-sizing: border-box;
      }
      img {
        max-width: 150px;
        height: 100%;
        width: 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; }
  }
}