/**
 * Roadloisirs — Footer (.rl-footer)
 * Figma : fond --rl-bleu-noir, 4 colonnes, barre légale
 *
 * Desktop : 80px 64px padding, colonnes CSS Grid 4 cols
 * Mobile  : 120px top / 64px bottom, colonnes empilées et centrées
 *
 * Col 1 : .footer__block.block-contact — statique dans footer.tpl (ps_contactinfo déhooké)
 *          contient Service Client + Suivez l'aventure (.rl-footer__social-wrap) en flex colonne
 * Cols 2-4 : ps_linklist → .footer__block (×N)
 * Mon compte : ps_customeraccountlinks → .footer__block#block-myaccount-infos
 */

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

.rl-footer {
  background-color: var(--rl-footer-bg);
}

.rl-footer__inner {
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ============================================================
   BRAND — logo + baseline
   ============================================================ */

.rl-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.rl-footer__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-decoration: none;
}

.rl-footer__logo-img {
  display: block;
  width: 179px;
  height: 117px;
}

.rl-footer__baseline {
  font-family: var(--rl-font-editorial);
  font-size: var(--rl-title-m);
  font-weight: var(--rl-weight-semibold);
  color: var(--rl-blanc-2);
  text-align: center;
  line-height: 1.4;
  margin: 0;
}

/* ============================================================
   COLONNES — CSS Grid
   4 colonnes auto (largeur = contenu), gap 84px
   .rl-footer__social-wrap positionné en col 1 / row 2
   ============================================================ */

.rl-footer__columns {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, auto);
  column-gap: 84px;
  row-gap: 32px;
  justify-content: center;
  align-items: start;
  padding-block: 16px;
  width: 100%;
}

/* Éléments non-colonnes injectés dans displayFooter (ex: modals blockwishlist)
   → sortis du flux grid via position:absolute (ne crée pas de lignes vides)
   Les modales Bootstrap utilisent position:fixed → restent fonctionnelles */
.rl-footer__columns > :not(.footer__block) {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}

/* ============================================================
   BLOCS MODULES (.footer__block)
   Rendu par ps_linklist, ps_contactinfo, ps_customeraccountlinks
   ============================================================ */

.rl-footer__columns > .footer__block {
  /* Reset Bootstrap col-md-6 col-lg-3 */
  width: auto;
  max-width: none;
  padding: 0;
  flex: none;
  /* Colonne */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Titre (paragraphe avec .d-none.d-md-flex) — forcé visible */
.rl-footer__columns .footer__block__title {
  display: block !important;
  font-family: var(--rl-font-editorial);
  font-size: var(--rl-title-m);
  font-weight: var(--rl-weight-bold);
  color: var(--rl-blanc-2);
  line-height: 32px;
  margin: 0;
  white-space: nowrap;
}

/* Lien dans le titre (ps_customeraccountlinks) */
.rl-footer__columns .footer__block__title a {
  color: inherit;
  text-decoration: none;
}

/* Toggle accordéon mobile — caché sur desktop */
.rl-footer__columns .footer__block__toggle {
  display: none !important;
}

/* Contenu — override Bootstrap .collapse (display:none) */
.rl-footer__columns .footer__block__content {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Liens de liste */
.rl-footer__columns .footer__block__content-list li {
  list-style: none;
}

.rl-footer__columns .footer__block__content-list li a {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-s);
  font-weight: var(--rl-weight-medium);
  padding: 2px 0;
  color: var(--rl-blanc-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.rl-footer__columns .footer__block__content-list li a:hover,
.rl-footer__columns .footer__block__content-list li a:focus-visible {
  color: var(--rl-blanc);
  text-decoration: underline;
}

/* Contenu ps_contactinfo */
.rl-footer__columns .footer__block__content-contact {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

.rl-footer__columns .block-contact .contact__infos,
.rl-footer__columns .block-contact .contact__phone,
.rl-footer__columns .block-contact .contact__fax,
.rl-footer__columns .block-contact .contact__email {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-s);
  font-weight: var(--rl-weight-medium);
  color: var(--rl-blanc-2);
  line-height: 1.5;
}

.rl-footer__columns .block-contact .contact__phone a,
.rl-footer__columns .block-contact .contact__email a {
  color: var(--rl-blanc-2);
  text-decoration: none;
  transition: color 0.15s;
}

.rl-footer__columns .block-contact .contact__phone a:hover,
.rl-footer__columns .block-contact .contact__email a:hover {
  color: var(--rl-blanc);
  text-decoration: underline;
}

/* Icônes Material Icons dans ps_contactinfo — masquées */
.rl-footer__columns .block-contact .material-icons {
  display: none;
}

/* ============================================================
   RÉSEAUX SOCIAUX
   Dans .footer__block.block-contact (col 1), après le contenu contact
   ============================================================ */

.rl-footer__social-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rl-footer__social-title {
  font-family: var(--rl-font-editorial);
  font-size: var(--rl-title-s);
  font-weight: var(--rl-weight-bold);
  color: var(--rl-blanc-2);
  line-height: 32px;
  margin: 0;
  white-space: nowrap;
}

.rl-footer__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rl-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rl-blanc-2);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}

.rl-footer__social-link:hover {
  color: var(--rl-blanc);
  transform: translateY(-2px);
}

/* ============================================================
   SÉPARATEUR
   ============================================================ */

.rl-footer__separator {
  width: 100%;
  height: 1px;
  background-color: var(--rl-blanc-2);
  border: none;
  margin: 0;
}

/* ============================================================
   BARRE LÉGALE
   ============================================================ */

.rl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
}

/* Wrappers injectés par le module — transparents dans le flex */
.rl-footer__legal > div,
.rl-footer__legal ul,
.rl-footer__legal ol,
.rl-footer__legal li {
  display: contents !important;
}

/* Titre de section injecté par le module — masqué */
.rl-footer__legal .footer__block__title,
.rl-footer__legal .footer__block__toggle {
  display: none !important;
}

.footer .rl-footer__legal .footer__block__content-list a {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-nav);
  font-weight: var(--rl-weight-bold);
  color: var(--rl-blanc-60);
  text-decoration: none;
  padding: 4px 0;
  white-space: nowrap;
  transition: color 0.15s;
}

.footer .rl-footer__legal .footer__block__content-list a:hover,
.footer .rl-footer__legal .footer__block__content-list a:focus-visible {
  color: var(--rl-blanc-2);
}

/* ============================================================
   PICTOS CERTIFICATIONS (desktop uniquement)
   ============================================================ */

.rl-footer__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.rl-footer__trust img {
  height: 48px;
  width: auto;
  display: block;
}

/* ============================================================
   MASQUER copyright PrestaShop
   ============================================================ */

.rl-footer .copyright {
  display: none;
}

/* ============================================================
   CHECKOUT — mode tunnel (.rl-footer--checkout)
   ============================================================ */

.rl-footer--checkout .rl-footer__inner {
  padding-block: 32px;
}

.rl-footer__contact-checkout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--rl-bleu-fonce-20);
  border-radius: var(--rl-border-radius);
  text-align: center;
  color: var(--rl-blanc);
}

.rl-footer__contact-checkout__title {
  font-family: var(--rl-font-editorial);
  font-size: var(--rl-title-m);
  font-weight: var(--rl-weight-bold);
  line-height: 32px;
  margin: 0;
}

.rl-footer__contact-checkout__hours {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-nav);
  font-weight: var(--rl-weight-medium);
  line-height: 1.4;
  margin: 0;
}

.rl-footer__contact-checkout__phone {
  margin: 0;
}

.rl-footer__contact-checkout__phone a {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-l);
  font-weight: var(--rl-weight-medium);
  color: var(--rl-blanc);
  text-decoration: none;
  line-height: 1.45;
}

/* ============================================================
   COPYRIGHT
   ============================================================ */

.rl-footer__copyright {
  font-family: var(--rl-font-primary);
  font-size: var(--rl-text-s);
  font-weight: var(--rl-weight-medium);
  color: var(--rl-blanc-2);
  text-align: center;
  margin: 0;
}

/* ============================================================
   RESPONSIVE — Mobile (< 768px)
   ============================================================ */

@media (max-width: 767.98px) {

  .rl-footer__inner {
    padding: 120px 16px 64px;
    gap: 52px;
  }

  /* Variante mobile : size=S, color=no → 124×81px */
  .rl-footer__logo-img {
    width: 124px;
    height: 81px;
  }

  .rl-footer__baseline {
    font-size: 1.125rem;
  }

  /* Grille → colonne unique */
  .rl-footer__columns {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 40px;
    justify-items: center;
  }

  /* Blocs modules : pleine largeur, centrés */
  .rl-footer__columns > .footer__block {
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 8px 0;
  }

  /* Titre toujours visible (pas d'accordéon sur mobile) */
  .rl-footer__columns .footer__block__title {
    font-size: 1.25rem;
    font-weight: var(--rl-weight-extrabold);
    line-height: 1.4;
  }

  /* Toggle accordéon caché */
  .rl-footer__columns .footer__block__toggle {
    display: none !important;
  }

  /* Contenu toujours visible */
  .rl-footer__columns .footer__block__content {
    display: flex !important;
    align-items: center;
  }

  /* Réseaux sociaux : centrés dans la col 1 */
  .rl-footer__social-wrap {
    align-items: center;
    padding-top: 8px;
    width: 100%;
  }

  .rl-footer__social-title {
    text-align: center;
  }

  .rl-footer__trust {
    display: none;
  }

  .rl-footer__legal {
    flex-direction: column;
    gap: 0;
  }

  .footer .rl-footer__legal .footer__block__content-list a {
    font-size: 0.9375rem;
    font-weight: var(--rl-weight-semibold);
    padding: 4px 8px;
  }

  .rl-footer--checkout .rl-footer__inner {
    padding-top: 72px;
    gap: 32px;
  }

  .rl-footer__contact-checkout {
    border: none;
    padding: 0;
  }

  .rl-footer__contact-checkout__title {
    font-size: 1.25rem;
    font-weight: var(--rl-weight-extrabold);
    line-height: 1.4;
  }

  .rl-footer__contact-checkout__hours,
  .rl-footer__contact-checkout__phone a {
    font-size: 0.9375rem;
    line-height: 1.34;
  }

}