.main__footer {
  border-top: 2px solid var(--red-light);
  background-color:  var(--white-light);
}
.footer {
  display: grid;
  grid-template-areas: 'logo' 'social' 'legal';
  gap: 32px;
  min-height: 200px;
  padding: 32px 16px;
  justify-content: center;
}
.footer .block-system-branding-block {
  max-width: 228px;
  align-self: center;
  grid-area: logo;
}
.footer .menu--menu-legal {
  grid-area: legal;
}
.footer .menu--social-menu {
  grid-area: social;
}
.footer .block-system-branding-block {
  max-width: 150px;
}
@media all and (min-width:700px) {

  .footer {
    grid-template-areas: 'logo social' 'legal legal';
    justify-content: space-around;
  }
}

/*
  Menu social
*/
.footer .menu-social {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-around;
}

.footer .menu-social .menu-item:hover {
  border: none;
}
.footer .menu-social .menu-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;        /* +10px */
  height: 50px;       /* +10px */
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1); /* léger fond sombre par défaut */
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.footer .menu-social .menu-item svg {
  width: 30px;        /* +8px */
  height: 30px;       /* +8px */
  fill: #333333;      /* icônes sombres sur fond clair */
  transition: fill 0.3s ease, transform 0.3s ease;
}
/* Au hover, les icônes passent en blanc */
.footer .menu-social .menu-item a:hover svg {
  transform: scale(1.2);
  fill: #ffffff;
}
/* Instagram */
.footer .menu-social .instagram a:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
/* TikTok */
.footer .menu-social .tiktok a:hover {
  background-color: #010101;
}
.footer .menu-social .tiktok a:hover svg {
  fill: #EE1D52;
  filter: drop-shadow(2px 2px 0px #69C9D0);
}
/* Youtube */
.footer .menu-social .youtube a:hover {
  background-color: #FF0000;
}

/*
  Menu legal
*/
.footer .menu-legal {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.footer .menu-legal .menu-item a {
  font-size: var(--text-l);
  color: var(--black-light);
}
.footer .menu-legal .menu-item a:hover {
  text-decoration: none;
  border-bottom: 2px solid var(--white-dark);
}
.footer .menu--menu-legal {
  border-top: 2px solid var(--white-dark);
  padding-top: 16px;
}