/* ======================================================
   35 — LAYOUT (WS) — FOOTER BLEND — VERSION CLEAN
   ======================================================

   Ce fichier crée un footer qui se raccorde naturellement
   avec le last-slice SANS recopier son image de fond.

   Objectif :
   1) Le footer remonte sur la dernière slice
   2) La zone haute du footer laisse apparaître le last-slice
      grâce à un blend transparent -> couleur du footer
   3) Le contenu du footer commence sous cette zone de blend
   4) Le système reste stable dans Gutenberg / FSE

   Préfixe
   - ws- = WebService (générique)

   ====================================================== */


/* ======================================================
   MANUEL D’UTILISATION (GUTENBERG)
   ======================================================

   ------------------------------------------------------
   A) STRUCTURE RECOMMANDÉE
   ------------------------------------------------------

   Le footer est HORS du wrapper .ws-page
   (comme tu l’as indiqué dans ton système).

   Structure type :

   Group / Template Part / footer
   - Classe : ws-footer

     Group
     - Classe : ws-footer__inner

       Group
       - Classe : ws-footer__grid

         Group
         - Classe : ws-footer__col ws-footer__col--nav

         Group
         - Classe : ws-footer__col ws-footer__col--newsletter

         Group
         - Classe : ws-footer__col ws-footer__col--contact

       Group
       - Classe : ws-footer__bottom

   ------------------------------------------------------
   B) PRINCIPE TECHNIQUE
   ------------------------------------------------------

   Le footer remonte sur le last-slice via un margin-top
   négatif.

   Le fond du footer n’est PAS peint directement sur toute
   la hauteur du bloc.

   À la place :
   - ::before = zone de blend haute
   - ::after  = fond plein du footer sous la zone de blend

   Conséquence :
   la dernière slice reste visible derrière la partie
   haute transparente / semi-transparente du footer.
   Le raccord est donc naturellement aligné.

   ------------------------------------------------------
   C) PRÉREQUIS IMPORTANT
   ------------------------------------------------------

   La dernière slice doit avoir suffisamment de hauteur
   visuelle pour que le footer puisse remonter dessus.

   Si nécessaire, augmente la hauteur utile du contenu de la
   dernière slice ou son padding interne.

   Exemple :
   .ws-page{
     --ws-slice-content-min-height: 980px;
   }

   ou sur la dernière slice / son contenu :
   style="--ws-slice-content-min-height: 1100px;"

   ------------------------------------------------------
   D) CLASSE À AJOUTER SUR LE FOOTER
   ------------------------------------------------------

   Bloc principal :
   - ws-footer

   Inner :
   - ws-footer__inner

   Grille :
   - ws-footer__grid

   Colonnes :
   - ws-footer__col
   - ws-footer__col--nav
   - ws-footer__col--newsletter
   - ws-footer__col--contact

   Bas de footer :
   - ws-footer__bottom

   ------------------------------------------------------
   E) RÈGLE D’OR
   ------------------------------------------------------

   Ne mets PAS de background opaque directement sur un bloc
   enfant qui recouvrirait la zone haute du footer,
   sinon tu casses le blend.

   Le fond global est géré par :
   - .ws-footer::before
   - .ws-footer::after

   ====================================================== */
   
/* ======================================================
   F) GÉRER L’ORDRE DES COLONNES EN MOBILE
   ======================================================

   Par défaut, le footer est en 3 colonnes sur desktop.

   Sous 900px :
   - la grille devient verticale
   - les colonnes s’empilent
   - leur ordre est piloté via la propriété CSS order

   ------------------------------------------------------
   CLASSES REQUISES SUR LES COLONNES
   ------------------------------------------------------

   Navigation :
   - ws-footer__col ws-footer__col--nav

   Newsletter :
   - ws-footer__col ws-footer__col--newsletter

   Contact :
   - ws-footer__col ws-footer__col--contact

   ------------------------------------------------------
   ORDRE MOBILE PAR DÉFAUT
   ------------------------------------------------------

   1. Newsletter
   2. Navigation
   3. Contact

   ------------------------------------------------------
   COMMENT CHANGER L’ORDRE
   ------------------------------------------------------

   Dans le media query :

   .ws-footer__col--newsletter{ order: 1; }
   .ws-footer__col--nav{ order: 2; }
   .ws-footer__col--contact{ order: 3; }

   Il suffit de modifier les chiffres.

   Exemple :
   pour afficher Contact en premier :

   .ws-footer__col--contact{ order: 1; }
   .ws-footer__col--newsletter{ order: 2; }
   .ws-footer__col--nav{ order: 3; }

   ------------------------------------------------------
   BONNE PRATIQUE
   ------------------------------------------------------

   En mobile, commence en général par le bloc le plus utile :
   - newsletter si objectif conversion
   - navigation si objectif orientation
   - contact si objectif réassurance / prise de contact

   ====================================================== */


/* ======================================================
   0) TOKENS & VARIABLES (config globale)
   ======================================================

   Tu peux override :
   - globalement via :root
   - par projet via body / template
   - par footer via style="" dans Gutenberg

   IMPORTANT :
   Ce footer réutilise les variables du système slices,
   notamment :
   - --ws-slice-overlap
   - --ws-slice-fix

   ====================================================== */

:root{
  /* ----------------------------------------------------
     FOOTER — blend / raccord avec le last-slice
     ---------------------------------------------------- */

  /* Hauteur de la zone de raccord visuel.
     Plus grand = transition plus douce, mais footer plus haut. */
  --ws-footer-blend-height: 100px;

  /* Recouvrement physique du footer sur la dernière slice.
     Par défaut on le cale sur l’overlap des slices. */
  --ws-footer-overlap: var(--ws-slice-overlap, 120px);

  /* Anti micro-ligne partagé avec les slices */
  --ws-footer-fix: var(--ws-slice-fix, 1px);

  /* ----------------------------------------------------
     FOOTER — couleurs
     ---------------------------------------------------- */

  --ws-footer-bg: #ffffff;
  --ws-footer-text: #163047;
  --ws-footer-muted: #486173;
  --ws-footer-link: #163047;
  --ws-footer-link-hover: #2f7aa6;
  --ws-footer-border: rgba(22, 48, 71, .12);

  /* ----------------------------------------------------
     FOOTER — blend (voile de transition)
     ---------------------------------------------------- */

  /* Départ très transparent */
  --ws-footer-blend-start: rgba(255,255,255,0);

  /* Milieu du fondu */
  --ws-footer-blend-mid: rgba(255,255,255,.46);

  /* Fin du fondu */
  --ws-footer-blend-end: rgba(255,255,255,1);

  /* ----------------------------------------------------
     FOOTER — layout
     ---------------------------------------------------- */

  --ws-footer-max-width: 1180px;
  --ws-footer-pad-x: 20px;
  --ws-footer-pad-top: 40px;
  --ws-footer-pad-bottom: 28px;

  --ws-footer-grid-gap: clamp(20px, 3vw, 48px);

  /* ----------------------------------------------------
     FOOTER — typo
     ---------------------------------------------------- */

  --ws-footer-title-size: 1rem;
  --ws-footer-title-weight: 700;
  --ws-footer-title-spacing: .01em;

  --ws-footer-text-size: 1rem;
  --ws-footer-line-height: 1.6;

  /* ----------------------------------------------------
     FOOTER — newsletter
     ---------------------------------------------------- */

  --ws-footer-input-height: 44px;
  --ws-footer-input-radius: 999px;
  --ws-footer-input-border: rgba(22, 48, 71, .18);
  --ws-footer-input-bg: #ffffff;

  --ws-footer-button-bg: #163047;
  --ws-footer-button-text: #ffffff;
  --ws-footer-button-bg-hover: #2f7aa6;

  /* ----------------------------------------------------
     FOOTER — réseaux sociaux
     ---------------------------------------------------- */

  --ws-footer-social-size: 40px;
  --ws-footer-social-radius: 999px;
  --ws-footer-social-bg-hover: rgba(47, 122, 166, .08);

  /* ----------------------------------------------------
     FOOTER — bas de footer
     ---------------------------------------------------- */

  --ws-footer-bottom-gap: 16px;
  --ws-footer-bottom-pad-top: 16px;
}


/* ======================================================
   1) FOOTER PRINCIPAL
   ======================================================

   Le footer :
   - remonte sur le last-slice
   - laisse voir la dernière slice derrière son blend haut
   - peint ensuite son fond blanc plus bas
   ====================================================== */

.wp-site-blocks .ws-footer{
  position: relative;
  overflow: hidden;

  /* Le footer remonte sur la dernière slice */
  margin-top: calc(-1 * (var(--ws-footer-overlap) + var(--ws-footer-fix))) !important;

  /* Pas de fond direct ici :
     il est géré par ::before et ::after */
  background: transparent !important;

  color: var(--ws-footer-text);
}

/* ======================================================
   1.1) ZONE DE BLEND HAUTE
   ======================================================

   Le last-slice reste visible derrière cette zone,
   car le footer est transparent à cet endroit,
   seulement recouvert par un dégradé blanc progressif.
   ====================================================== */

.wp-site-blocks .ws-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: var(--ws-footer-blend-height);
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      var(--ws-footer-blend-start) 0%,
      var(--ws-footer-blend-mid) 58%,
      var(--ws-footer-blend-end) 100%
    );
}

/* ======================================================
   1.2) FOND PLEIN DU FOOTER
   ======================================================

   Le fond blanc “réel” commence juste sous la zone de blend.
   ====================================================== */

.wp-site-blocks .ws-footer::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top: var(--ws-footer-blend-height);
  bottom:0;
  z-index:0;
  pointer-events:none;
  background: var(--ws-footer-bg);
}


/* ======================================================
   2) CONTENEUR INTERNE
   ======================================================

   Le contenu doit commencer SOUS la zone de blend.
   On ajoute donc :
   padding-top = blend-height + padding-top normal
   ====================================================== */

.wp-site-blocks .ws-footer > .wp-block-group.ws-footer__inner,
.wp-site-blocks .ws-footer > .ws-footer__inner{
  position: relative;
  z-index: 1;

  width: 100%;
  max-width: var(--ws-footer-max-width);

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;

  padding:
    calc(var(--ws-footer-blend-height) + var(--ws-footer-pad-top))
    var(--ws-footer-pad-x)
    var(--ws-footer-pad-bottom);
}


/* ======================================================
   3) GRILLE 3 COLONNES
   ====================================================== */

.ws-footer__grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ws-footer-grid-gap);
  align-items:start;
}

.ws-footer__col{
  min-width:0;
}

.ws-footer__col--newsletter{
  text-align:center;
}

.ws-footer__col--contact{
  text-align:right;
}


/* ======================================================
   4) TYPO / LISTES / LIENS
   ====================================================== */

.ws-footer__title{
  margin:0 0 10px;
  font-size: var(--ws-footer-title-size);
  font-weight: var(--ws-footer-title-weight);
  letter-spacing: var(--ws-footer-title-spacing);
  line-height:1.3;
  color: var(--ws-footer-text);
}

.ws-footer__text{
  margin:0;
  font-size: var(--ws-footer-text-size);
  line-height: var(--ws-footer-line-height);
  color: var(--ws-footer-muted);
}

.ws-footer__text + .ws-footer__text{
  margin-top:8px;
}

.ws-footer__nav,
.ws-footer__meta{
  margin:0;
  padding:0;
  list-style:none;
}

.ws-footer__nav li + li,
.ws-footer__meta li + li{
  margin-top:6px;
}

.ws-footer a{
  color: var(--ws-footer-link);
  text-decoration:none;
  text-underline-offset:.16em;
  transition:
    color .25s ease,
    text-decoration-color .25s ease,
    transform .25s ease,
    background-color .25s ease;
}

.ws-footer a:hover,
.ws-footer a:focus-visible{
  color: var(--ws-footer-link-hover);
  text-decoration:underline;
  text-decoration-color: currentColor;
}

.ws-footer__contact{
  display:grid;
  gap:6px;
  justify-items:end;
}

.ws-footer__contact .ws-footer__text{
  color: var(--ws-footer-text);
}


/* ======================================================
   5) NEWSLETTER
   ====================================================== */

.ws-footer__newsletter{
  display:grid;
  gap:10px;
  justify-items:center;
}

.ws-footer__newsletter-note{
  margin:0 0 10px;
  font-size:.95rem;
  line-height:1.5;
  color: var(--ws-footer-text);
}

.ws-footer__newsletter-form{
  display:grid;
  gap:12px;
  width:min(100%, 360px);
  margin-inline:auto;
}

.ws-footer__newsletter-input{
  width:100%;
  min-width:0;
  height: var(--ws-footer-input-height);
  padding-inline:16px;
  border:1px solid var(--ws-footer-input-border);
  border-radius: var(--ws-footer-input-radius);
  background: var(--ws-footer-input-bg);
  color: var(--ws-footer-text);
  font:inherit;
}

.ws-footer__newsletter-input::placeholder{
  color: rgba(72, 97, 115, .78);
}

.ws-footer__newsletter-input:focus{
  outline:none;
  border-color: var(--ws-footer-link-hover);
  box-shadow: 0 0 0 3px rgba(47, 122, 166, .14);
}

.ws-footer__newsletter-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: var(--ws-footer-input-height);
  padding:10px 18px;
  border:0;
  border-radius:999px;
  background: var(--ws-footer-button-bg);
  color: var(--ws-footer-button-text);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.ws-footer__newsletter-button:hover,
.ws-footer__newsletter-button:focus-visible{
  background: var(--ws-footer-button-bg-hover);
  transform: translateY(-1px);
}

/* Hooks plugins génériques */
.ws-footer__newsletter input[type="email"],
.ws-footer__newsletter input[type="text"]{
  width:100%;
  min-width:0;
  min-height: var(--ws-footer-input-height);
  padding-inline:16px;
  border:1px solid var(--ws-footer-input-border);
  border-radius: var(--ws-footer-input-radius);
  background: var(--ws-footer-input-bg);
  color: var(--ws-footer-text);
  font:inherit;
  font-size: 16px;
}

.ws-footer__newsletter button,
.ws-footer__newsletter input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: var(--ws-footer-input-height);
  padding:10px 18px;
  border:0;
  border-radius:999px;
  background: var(--ws-footer-button-bg);
  color: var(--ws-footer-button-text);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  margin: 0 !important;
}

/* ======================================================
   5.1) FLUENT FORMS — intégration newsletter footer
   ====================================================== */

.ws-footer__newsletter .fluentform{
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.ws-footer__newsletter .ff-el-group{
  margin-bottom: 12px;
}

.ws-footer__newsletter .ff-el-form-control{
  width: 100% !important;
  min-width: 0;
  min-height: var(--ws-footer-input-height);
  padding-inline: 16px;
  border: 1px solid var(--ws-footer-input-border);
  border-radius: var(--ws-footer-input-radius);
  background: var(--ws-footer-input-bg);
  color: var(--ws-footer-text);
  font: inherit;
  box-sizing: border-box;
}

.ws-footer__newsletter .ff-el-form-control::placeholder{
  color: rgba(72, 97, 115, .78);
}

.ws-footer__newsletter .ff-el-form-control:focus{
  outline: none;
  border-color: var(--ws-footer-link-hover);
  box-shadow: 0 0 0 3px rgba(47, 122, 166, .14);
}

.ws-footer__newsletter .ff-btn,
.ws-footer__newsletter .ff-btn-submit{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--ws-footer-input-height);
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ws-footer-button-bg) !important;
  color: var(--ws-footer-button-text) !important;
  font: inherit !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition:
    background-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.ws-footer__newsletter .ff-btn:hover,
.ws-footer__newsletter .ff-btn:focus-visible,
.ws-footer__newsletter .ff-btn-submit:hover,
.ws-footer__newsletter .ff-btn-submit:focus-visible{
  background: var(--ws-footer-button-bg-hover) !important;
  transform: translateY(-1px);
}

.ws-footer__newsletter .ff-el-is-error .text-danger{
  margin-top: 6px;
  font-size: .9rem;
}

.ws-footer__newsletter .ff-message-success{
  margin-top: 10px;
  font-size: .95rem;
}


/* ======================================================
   6) RÉSEAUX SOCIAUX
   ====================================================== */

.ws-footer__social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-top:6px;
}

.ws-footer__social-link{
  width: var(--ws-footer-social-size);
  height: var(--ws-footer-social-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--ws-footer-social-radius);
  color: var(--ws-footer-link);
  text-decoration:none;
  transition:
    transform .25s ease,
    color .25s ease,
    background-color .25s ease,
    box-shadow .25s ease;
}

.ws-footer__social-link:hover,
.ws-footer__social-link:focus-visible{
  color: var(--ws-footer-link-hover);
  background: var(--ws-footer-social-bg-hover);
  transform: translateY(-2px);
  text-decoration:none;
}

.ws-footer__social-link svg,
.ws-footer__social-link img{
  display:block;
  width:22px;
  height:22px;
}


/* ======================================================
   7) BAS DE FOOTER
   ====================================================== */

.ws-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: var(--ws-footer-bottom-gap);
  margin-top:30px;
  padding-top: var(--ws-footer-bottom-pad-top);
  border-top:1px solid var(--ws-footer-border);
  text-align:center;
}

.ws-footer__copyright,
.ws-footer__legal{
  margin:0;
  font-size:.92rem;
  line-height:1.5;
  color: var(--ws-footer-text);
}

.ws-footer__legal{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  padding:0;
  list-style:none;
  justify-content:center;
}


/* ======================================================
   8) VARIANTES
   ====================================================== */

.ws-footer--compact{
  --ws-footer-blend-height: 100px;
  --ws-footer-pad-top: 24px;
  --ws-footer-pad-bottom: 18px;
  --ws-footer-grid-gap: 20px;
}

.ws-footer--airy{
  --ws-footer-blend-height: 180px;
  --ws-footer-pad-top: 52px;
  --ws-footer-pad-bottom: 36px;
  --ws-footer-grid-gap: 56px;
}

.ws-footer--soft-blend{
  --ws-footer-blend-mid: rgba(255,255,255,.32);
  --ws-footer-blend-end: rgba(255,255,255,.92);
}

.ws-footer--rich-blend{
  --ws-footer-blend-mid: rgba(255,255,255,.56);
  --ws-footer-blend-end: rgba(255,255,255,1);
}


/* ======================================================
   9) COMPATIBILITÉ GUTENBERG
   ====================================================== */

.ws-footer .wp-block-columns,
.ws-footer .wp-block-column,
.ws-footer .wp-block-group,
.ws-footer .wp-block-navigation,
.ws-footer .wp-block-social-links,
.ws-footer .wp-block-paragraph,
.ws-footer .wp-block-heading,
.ws-footer .wp-block-image,
.ws-footer .wp-block-list{
  margin-top:0;
  margin-bottom:0;
}

.ws-footer .wp-block-image img{
  height:auto;
}

.ws-footer .wp-block-group__inner-container,
.ws-footer .is-layout-constrained,
.ws-footer .is-layout-flex,
.ws-footer .is-layout-grid{
  position:relative;
  z-index:1;
}

.ws-footer .wp-block-social-links{
  gap:10px;
  justify-content:center;
}

.ws-footer .wp-block-social-links .wp-social-link a{
  transition:
    transform .25s ease,
    opacity .25s ease;
}

.ws-footer .wp-block-social-links .wp-social-link a:hover,
.ws-footer .wp-block-social-links .wp-social-link a:focus-visible{
  transform: translateY(-2px);
}


/* ======================================================
   10) RESPONSIVE
   ======================================================

   Principe :
   - Desktop / tablette large : grille 3 colonnes
   - Mobile / tablette portrait : empilement vertical
   - L’ordre mobile est piloté via order sur les colonnes
   - Les séparations suivent l’ordre visuel et non l’ordre HTML

   IMPORTANT :
   .ws-footer__grid passe en flex-column sous 900px.
   ====================================================== */
   
/* ------------------------------------------------------
   MOBILE — SÉPARATIONS ET ORDRE VISUEL
   ------------------------------------------------------

   IMPORTANT :
   En mobile, les colonnes sont réordonnées avec order.

   Le sélecteur :
   .ws-footer__col + .ws-footer__col
   ne doit pas être utilisé pour les séparations,
   car il suit l’ordre HTML et non l’ordre visuel.

   Règle :
   - la colonne affichée en premier = pas de bordure haute
   - les colonnes affichées ensuite = bordure haute

   Pense donc toujours ensemble :
   1) order
   2) quelles colonnes portent border-top

   ------------------------------------------------------ */

@media (max-width: 1200px){

  .ws-footer__grid{
    display:flex;
    flex-direction:column;
    gap:0;
    align-items:stretch;
  }

  .ws-footer__col{
    width:100%;
    max-width:680px;
    margin-inline:auto;
    text-align:center;
    padding-block:22px;
    border-top:0;
  }

  /* ----------------------------------------------------
     ORDRE MOBILE DES COLONNES
     ---------------------------------------------------- */

  .ws-footer__col--newsletter{ order: 1; }
  .ws-footer__col--nav{ order: 2; }
  .ws-footer__col--contact{ order: 3; }

  /* ----------------------------------------------------
     SÉPARATIONS VISUELLES
     ----------------------------------------------------

     On ne peut pas utiliser :
     .ws-footer__col + .ws-footer__col

     car ce sélecteur suit l’ordre HTML, pas l’ordre visuel.
     On met donc la séparation sur tous les blocs sauf
     celui qui est affiché en premier.
     ---------------------------------------------------- */

  .ws-footer__col--nav,
  .ws-footer__col--contact{
    border-top:1px solid var(--ws-footer-border);
  }

  /* ----------------------------------------------------
     RECENTRAGE DES CONTENUS INTERNES
     ---------------------------------------------------- */

  .ws-footer__col--newsletter,
  .ws-footer__col--contact,
  .ws-footer__col--nav{
    text-align:center;
  }

  .ws-footer__contact{
    justify-items:center;
    text-align:center;
  }

  .ws-footer__newsletter{
    justify-items:center;
    text-align:center;
  }

  .ws-footer__newsletter-form{
    width:min(100%, 360px);
    margin-inline:auto;
  }

  .ws-footer__nav,
  .ws-footer__meta{
    text-align:center;
  }

  .ws-footer__social{
    justify-content:center;
  }
  
  /* Anti micro-ligne entre le blend (::before)
     et le fond plein (::after) sur mobile */
  .wp-site-blocks .ws-footer::after{
    top: calc(var(--ws-footer-blend-height) - 1px);
  }
}

@media (max-width: 1200px){

  .ws-footer{
    --ws-footer-pad-x: 20px;
    --ws-footer-blend-height: 100px;
  }

  .ws-footer__col{
    padding-block:20px;
  }

  .ws-footer__bottom{
    flex-direction:column;
  }
}


/* ======================================================
   MAINTENANCE & ASTUCES (PRISE EN MAIN RAPIDE)
   ======================================================

   ✅ Réglages rapides
   ------------------
   - Hauteur du blend :
       --ws-footer-blend-height: 140px;

   - Intensité du fondu :
       --ws-footer-blend-mid / --ws-footer-blend-end

   - Couleur de fond du footer :
       --ws-footer-bg

   ✅ Si le raccord est trop abrupt
   -------------------------------
   - augmente --ws-footer-blend-height
   - ou utilise .ws-footer--rich-blend

   ✅ Si le footer “mange” trop la dernière slice
   ---------------------------------------------
   - réduis --ws-footer-overlap
   - ou augmente légèrement la hauteur utile du last-slice

   ✅ Si rien ne se blend
   ---------------------
   - vérifie que le footer a bien la classe .ws-footer
   - vérifie que le footer arrive immédiatement après le last-slice
   - vérifie qu’aucun parent n’a un overflow qui coupe le recouvrement
   - vérifie que le footer n’a pas un fond opaque appliqué sur un bloc
     enfant couvrant toute sa hauteur

   ✅ Astuce de workflow
   --------------------
   Le footer n’a plus besoin de connaître l’image du last-slice.
   C’est le last-slice réel qu’on voit derrière la zone haute du footer.
   Donc :
   - zéro souci de background-size cover
   - zéro souci d’alignement
   - zéro duplication d’image

   ====================================================== */