/* ==========================================================================
   Footer — Hummingbird Child
   Override de _partials/footer.tpl + linkblock.tpl du module ps_linklist.
   ========================================================================== */

.shine-footer {
  background-color: var(--shine-ink-2);
  color: var(--shine-white);
  padding: 64px 0 32px;
}

.shine-footer__container {
  /* full-width avec padding fluide */
  padding: 0 clamp(24px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Petits labels (uppercase, espacés) — réutilisé sur les titres de blocs */
.shine-footer__label {
  margin: 0 0 18px;
  color: var(--shine-grey-200);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Row 1 — brand (logo + intro)  |  3 link columns        (50/50)
   --------------------------------------------------------------------------- */

.shine-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.shine-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shine-footer__logo {
  display: inline-flex;
}

.shine-footer__logo img {
  max-width: 180px;
  height: auto;
}

.shine-footer__intro {
  margin: 0;
  color: var(--shine-grey-400);
  font-size: 14px;
  line-height: 1.6;
}

.shine-footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px;
}

/* Link block (rendu par notre override de ps_linklist/linkblock.tpl) */

.footer-links-block__title {
  margin: 0 0 18px;
  color: var(--shine-grey-200);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.footer-links-block__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links-block__item {
  margin: 0 0 11px;
}

.footer-links-block__link {
  color: var(--shine-white);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
}

.footer-links-block__link:hover,
.footer-links-block__link:focus-visible {
  color: var(--shine-white);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Row 2 — socials  |  payments
   La newsletter a quitté cette rangée le 05/08/2026 : elle est devenue une bande
   pleine largeur AU-DESSUS du footer (.shine-prefooter, en bas de ce fichier).
   --------------------------------------------------------------------------- */

.shine-footer__middle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  padding-top: 32px;
  border-top: 1px solid var(--shine-line-light);
}

.shine-footer__socials {
  justify-self: start;
  display: flex;
  align-items: flex-end;
}

.shine-footer__newsletter {
  width: 100%;
  max-width: 480px;
}

.shine-footer__payments {
  justify-self: end;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---- Socials (notre override de template ps_socialfollow) ---- */

.shine-footer__socials .ps-socialfollow__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shine-footer__socials .ps-socialfollow__item {
  margin: 0;
}

.shine-footer__socials .ps-socialfollow__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--shine-white);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.shine-footer__socials .ps-socialfollow__link:hover,
.shine-footer__socials .ps-socialfollow__link:focus-visible {
  opacity: 0.7;
}

.shine-footer__socials .ps-socialfollow__link svg {
  width: 18px;
  height: 18px;
}

/* ---- Newsletter ----------------------------------------------------------
   Styling form-agnostic : cible des éléments génériques (input, button, h2/h3)
   pour fonctionner avec n importe quelle implémentation (PS, SAAS, custom).
   --------------------------------------------------------------------------- */

/* Titre (rendu par <p class="h3"> dans ps_emailsubscription, mais aussi
   <h2>/<h3> directs si on intègre un form SAAS) */
.shine-footer__newsletter h2,
.shine-footer__newsletter h3,
.shine-footer__newsletter .h3 {
  margin: 0;
  color: var(--shine-white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

/* Champs texte / email */
.shine-footer__newsletter input[type="email"],
.shine-footer__newsletter input[type="text"] {
  background-color: rgb(var(--shine-white-rgb) / 0.06);
  border: 1px solid rgb(var(--shine-white-rgb) / 0.16);
  color: var(--shine-white);
  padding: 12px 16px;
  border-radius: 4px;
}

.shine-footer__newsletter input::placeholder {
  color: rgb(var(--shine-white-rgb) / 0.5);
}

.shine-footer__newsletter input:focus {
  background-color: var(--shine-line-light);
  border-color: rgb(var(--shine-white-rgb) / 0.4);
  color: var(--shine-white);
  outline: none;
  box-shadow: none;
}

/* Bouton de soumission */
.shine-footer__newsletter button[type="submit"],
.shine-footer__newsletter input[type="submit"] {
  background-color: var(--shine-white);
  border: 1px solid var(--shine-white);
  color: var(--shine-ink-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 4px;
  cursor: pointer;
}

.shine-footer__newsletter button[type="submit"]:hover,
.shine-footer__newsletter input[type="submit"]:hover {
  background-color: var(--shine-grey-200);
  border-color: var(--shine-grey-200);
  color: var(--shine-ink-2);
}

/* Mentions / textes secondaires (RGPD, helpers, etc.) */
.shine-footer__newsletter p,
.shine-footer__newsletter small {
  margin: 0;
  color: var(--shine-grey-400);
  font-size: 12px;
  line-height: 1.5;
}

/* -- Surcharges spécifiques ps_emailsubscription -----------------------------
 * À SUPPRIMER lors de la migration vers un formulaire SAAS d emailing.
 * Ces règles ne font que neutraliser les classes utilitaires Bootstrap
 * imposées par le template du module (fond clair, container max-width,
 * grille row/col).
 * --------------------------------------------------------------------------- */

.shine-footer__newsletter .ps-emailsubscription {
  /* neutralise .bg-body-tertiary via la CSS var Bootstrap (cf. plus bas) */
  --bs-bg-opacity: 0;
  padding: 0;
}

.shine-footer__newsletter .ps-emailsubscription .container {
  padding: 0;
  margin: 0;
  max-width: none;
}

.shine-footer__newsletter .row {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 12px;
}

.shine-footer__newsletter .row > * {
  width: 100%;
  max-width: none;
  padding: 0;
  flex: none;
}

/* ---- Payments ---- */

/* Logos de paiement : plaque blanche portée par le <span>, image à l'intérieur.
   Pourquoi une plaque : les SVG du module n'ont pas le même parti graphique — les cartes
   embarquent leur propre plaque colorée, PayPal et Google Pay sont sombres et sans fond
   (illisibles sur notre footer quasi noir), Apple Pay est livré en blanc. La plaque rend
   tout le monde lisible, et seul Apple Pay est inversé pour redevenir noir dessus.
   ⚠️ Ne PAS appliquer de filtre de blanchiment à l'image : brightness(0) invert(1) aplatit
   aussi la plaque intégrée des cartes, qui devient un rectangle blanc plein. */

.payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 3px 5px;
  background: var(--shine-white);
  border-radius: 4px;
  transition: opacity 0.2s ease;
  opacity: 0.9;
}

.payment-badge:hover {
  opacity: 1;
}

.payment-icon {
  display: block;
  width: auto;
  height: 18px;
  max-width: 46px;
  object-fit: contain;
}

/* Apple Pay est fourni en blanc : sur la plaque blanche il faut l'inverser */
.payment-icon--invert {
  filter: invert(1);
}

/* ---------------------------------------------------------------------------
   Row 3 — copyright
   --------------------------------------------------------------------------- */

.shine-footer__bottom {
  padding-top: 24px;
  border-top: 1px solid var(--shine-line-light);
}

.shine-footer__copyright {
  margin: 0;
  color: var(--shine-grey-400);
  font-size: 13px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .shine-footer__top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .shine-footer__middle {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .shine-footer__socials,
  .shine-footer__payments {
    justify-self: center;
  }
  .shine-footer__socials ul {
    justify-content: center;
  }
  .shine-footer__newsletter {
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .shine-footer__links {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ---------------------------------------------------------------------------
   Bande newsletter au-dessus du footer (05/08/2026, « boulot »)
   Le bloc a quitté la rangée 2 du footer pour devenir une bande pleine largeur,
   visuellement distincte : fond plus clair que le footer, texte sombre.
   Le conteneur garde la classe .shine-footer__newsletter, sur laquelle repose
   tout le style du formulaire (cf. plus haut dans ce fichier).
   --------------------------------------------------------------------------- */

.shine-prefooter {
  padding: 40px 0;
  color: var(--shine-ink);
  background: var(--shine-paper);
  border-top: 1px solid var(--shine-line);
}

.shine-prefooter__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 720px;
  padding: 0 clamp(24px, 5vw, 80px);
  margin: 0 auto;
  text-align: center;
}

/* la contrainte de largeur de l'ancien emplacement ne s'applique plus ici */
.shine-prefooter .shine-footer__newsletter,
.shine-prefooter.shine-footer__newsletter {
  max-width: none;
}

/* sur fond clair, le petit label et les mentions doivent redevenir lisibles */
.shine-prefooter .shine-footer__label {
  margin-bottom: 4px;
  color: var(--shine-muted);
}

.shine-prefooter :is(h2, h3, .h3) {
  color: var(--shine-ink);
}

.shine-prefooter :is(p, small) {
  color: var(--shine-muted);
}

.shine-prefooter input[type="email"],
.shine-prefooter input[type="text"] {
  color: var(--shine-ink);
  background: var(--shine-white);
  border-color: var(--shine-line-strong);
}

.shine-prefooter input::placeholder {
  color: var(--shine-muted-2);
}

/* le bouton du formulaire est blanc (pensé pour le footer sombre) : sur la bande
   claire il serait invisible, on l'inverse */
.shine-prefooter :is(button[type="submit"], input[type="submit"]) {
  color: var(--shine-white);
  background-color: var(--shine-ink);
  border-color: var(--shine-ink);
}

.shine-prefooter :is(button[type="submit"], input[type="submit"]):hover {
  color: var(--shine-dark);
  background-color: var(--shine-race);
  border-color: var(--shine-race);
}

/* ---------------------------------------------------------------------------
   Coordonnées sous le logo (rendu par ps_contactinfo, donc éditable au BO)
   Le module sort ses propres blocs ; on neutralise ses titres et ses puces pour
   garder un simple paragraphe aligné sur la présentation de la marque.
   --------------------------------------------------------------------------- */

.shine-footer__contact {
  font-size: 14px;
  line-height: 1.6;
  color: var(--shine-grey-400);
}

.shine-footer__contact :is(h3, h4, .h3, .h4, [class*="title"]) {
  display: none;
}

.shine-footer__contact :is(ul, ol) {
  padding: 0;
  margin: 0;
  list-style: none;
}

.shine-footer__contact :is(li, p, div) {
  margin: 0;
}

.shine-footer__contact a {
  color: var(--shine-grey-200);
  text-decoration: none;
}

.shine-footer__contact a:hover,
.shine-footer__contact a:focus-visible {
  color: var(--shine-white);
  text-decoration: underline;
}

/* les icônes Material du module alourdissent le bloc : on les masque */
.shine-footer__contact .material-icons {
  display: none;
}

/* ps_contactinfo range son contenu dans un .collapse dont le bouton d'ouverture vit
   dans le titre — titre que l'on masque. Sans cette règle l'adresse serait
   définitivement replliée sous 768 px. On force l'affichage. */
.shine-footer__contact .footer-block__content.collapse {
  display: block;
}

/* le module se donne des classes de grille Bootstrap (col-md-6 col-lg-3) qui n'ont
   pas de sens dans notre colonne de marque */
.shine-footer__contact .ps-contactinfo {
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  flex: none;
}

/* ---------------------------------------------------------------------------
   Emplacements des modules accrochés au pied de page (05/08/2026)
   Les 4 modules de la maquette sont posés nominativement ; ces blocs recueillent
   TOUT autre module accroché à displayFooterBefore / displayFooter / displayFooterAfter,
   pour qu'un module installé plus tard soit visible sans retoucher le thème.
   --------------------------------------------------------------------------- */

.shine-footer__hooks {
  padding-top: 24px;
  border-top: 1px solid var(--shine-line-light);
  color: inherit;
}

.shine-footer__hooks--before {
  padding: 24px clamp(24px, 5vw, 80px);
  color: var(--shine-ink);
  background: var(--shine-white);
  border-top: 0;
}

/* les modules du footer arrivent souvent avec la grille Bootstrap : on la neutralise
   pour qu'ils s'alignent sur nos gouttières plutôt que d'imposer un container */
.shine-footer__hooks > .container,
.shine-footer__hooks .row {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* Beaucoup de modules de pied de page (ps_customeraccountlinks, ps_contactinfo...) rangent
   leur contenu dans un `.collapse` dont le bouton d'ouverture n'est visible qu'en mobile.
   Dans un emplacement de hook, ce contenu resterait replié et donc INVISIBLE — un module
   silencieusement masqué est pire qu'un module absent. On force l'affichage, et on aligne
   les titres sur ceux des colonnes de liens. */
.shine-footer__hooks .footer-block__content.collapse {
  display: block;
}

.shine-footer__hooks :is(.footer-block__title, .footer-block__title--toggle) {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--shine-grey-200);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.shine-footer__hooks :is(.footer-block__title, .footer-block__title--toggle) button {
  display: none; /* le bouton d'ouverture n'a plus de raison d'être */
}

.shine-footer__hooks :is(ul, ol) {
  padding: 0;
  margin: 0;
  list-style: none;
}

.shine-footer__hooks li {
  margin: 0 0 11px;
}

.shine-footer__hooks a {
  font-size: 15px;
  line-height: 1.35;
  color: var(--shine-white);
  text-decoration: none;
}

.shine-footer__hooks a:hover,
.shine-footer__hooks a:focus-visible {
  text-decoration: underline;
}