/* ======================================================
   30 — LAYOUT (WS) — SLICES + PAGE WRAPPER — VERSION IMMERSIVE ROBUSTE
   ======================================================

   Objectifs
   1) Alignfull stable (100vw sans scroll horizontal)
   2) Wrapper page : .ws-page (contenu uniquement, hors header/footer)
   3) Header séparé et réutilisable
   4) Première slice qui remonte sous le header
   5) Système de slices réutilisable sur accueil + pages internes
   6) Fusion entre slices (overlap + mask + anti micro-ligne)
   7) Padding porté par .ws-slice__content, jamais par .ws-slice
   8) Neutralisation robuste des wrappers Gutenberg parasites
   9) Hero correctement centrée / justifiée sous le header
   10) Compatibilité avec hero simple ET hero à base de grid

   Préfixe
   - ws- = WebService

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


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

   STRUCTURE CIBLE
   ------------------------------------------------------
   Header et footer HORS de .ws-page

   Template Part Header
   → classes :
     ws-header
     + éventuellement ws-header--immersive
     + éventuellement ws-header--home
     + éventuellement ws-header--veil

   Main / Group
   → classes :
     ws-page
     + éventuellement ws-page--immersive
     + éventuellement ws-page--home

   Puis à l’intérieur :

   1re slice :
   Group / section
   → classes :
     ws-section ws-slice ws-slice--hero is-slice-first is-under-header

     Group enfant :
     → classes :
       ws-slice__content
       ou ws-slice__content ws-slice__content--hero
       si l’on veut une hero centrée “simple”

   Slice du milieu :
   Group / section
   → classes :
     ws-section ws-slice is-slice-mid

     Group enfant :
     → classes :
       ws-slice__content

   Dernière slice :
   Group / section
   → classes :
     ws-section ws-slice is-slice-last

     Group enfant :
     → classes :
       ws-slice__content

   IMPORTANT
   ------------------------------------------------------
   - Le background reste sur .ws-slice
   - Le padding reste sur .ws-slice__content
   - Il ne faut pas laisser Gutenberg mettre du padding natif
     sur les slices elles-mêmes
   - Évite has-global-padding sur les slices
   - Évite les alignwide internes si possible, sauf besoin précis
   - Pour une hero avec grid interne, ne pas utiliser
     ws-slice__content--hero sauf si l’on veut vraiment
     un centrage flex du contenu

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


/* ======================================================
   0) TOKENS & VARIABLES GLOBALES
   ====================================================== */

:root{
  /* ----------------------------------------------------
     Header / immersion
     ---------------------------------------------------- */
  --ws-header-height-mobile: 120px;
  --ws-header-height-desktop: 160px;
  --ws-header-offset: var(--ws-header-height-mobile);

  /* Espace complémentaire sous le header dans la hero */
  --ws-hero-extra-pad-top-mobile: 56px;
  --ws-hero-extra-pad-top-desktop: 90px;

  /* ----------------------------------------------------
     Slices — fusion
     ---------------------------------------------------- */
  --ws-slice-overlap: 120px;
  --ws-slice-fade: 60px;
  --ws-slice-fix: 1px;

  /* ----------------------------------------------------
     Slices — hauteur
     ---------------------------------------------------- */
  --ws-slice-min-height: 420px;
  --ws-slice-content-min-height: 900px;

  /* ----------------------------------------------------
     Slices — background
     ---------------------------------------------------- */
  --ws-slice-bg-position: center top;
  --ws-slice-bg-repeat: no-repeat;
  --ws-slice-bg-size: cover;

  /* ----------------------------------------------------
     Slices — contenu interne
     ---------------------------------------------------- */
  --ws-slice-content-max-width: 1180px;
  --ws-slice-content-pad-x: 50px;
  --ws-slice-content-pad-y: 120px;

  /* Hero spécifique */
  --ws-slice-hero-content-min-height-mobile: 100svh;
  --ws-slice-hero-content-min-height-desktop: 100svh;
}

@media (min-width: 768px){
  :root{
    --ws-header-offset: var(--ws-header-height-desktop);
  }
}


/* ======================================================
   0.1) ALIGNFULL ROBUSTE
   ====================================================== */

.wp-site-blocks .alignfull{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}


/* ======================================================
   1) HEADER / FOOTER : neutralisation de base
   ====================================================== */

.ws-header{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  z-index: 40;
}

.ws-footer{
  position: relative;
  z-index: 10;
}

.ws-hero-wrap{
  background: transparent !important;
}


/* ======================================================
   2) WRAPPER PAGE : ws-page
   ====================================================== */

.wp-site-blocks .wp-block-group.ws-page,
.wp-site-blocks main.wp-block-group.ws-page{
  position: relative;
  z-index: 1;
}

.wp-site-blocks .wp-block-group.ws-page.has-global-padding,
.wp-site-blocks main.wp-block-group.ws-page.has-global-padding{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ======================================================
   3) SECTIONS : ws-section
   ====================================================== */

.wp-site-blocks .ws-page > .wp-block-group.ws-section,
.wp-site-blocks .ws-page > section.wp-block-group.ws-section{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}


/* ======================================================
   4) BASE SLICES
   ====================================================== */

.wp-site-blocks .wp-block-group.ws-slice,
.wp-site-blocks section.wp-block-group.ws-slice{
  position: relative;
  overflow: hidden;

  /* règle d’or */
  padding: 0 !important;

  min-height: var(--ws-slice-min-height);

  background-repeat: var(--ws-slice-bg-repeat);
  background-size: var(--ws-slice-bg-size);
  background-position: var(--ws-slice-bg-position);
}


/* ======================================================
   4.0) NEUTRALISATION GUTENBERG SUR LES SLICES
   ====================================================== */

/* Si Gutenberg ajoute has-global-padding sur la slice */
.wp-site-blocks .wp-block-group.ws-slice.has-global-padding,
.wp-site-blocks section.wp-block-group.ws-slice.has-global-padding{
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

/* Si Gutenberg ajoute un layout contraint sur la slice */
.wp-site-blocks .wp-block-group.ws-slice.is-layout-constrained,
.wp-site-blocks section.wp-block-group.ws-slice.is-layout-constrained{
  max-width: none !important;
}

/* Tous les wrappers directs d’une slice qui NE sont PAS ws-slice__content
   ne doivent pas ajouter de padding qui casse la logique */
.wp-site-blocks .wp-block-group.ws-slice > .has-global-padding:not(.ws-slice__content),
.wp-site-blocks section.wp-block-group.ws-slice > .has-global-padding:not(.ws-slice__content){
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

/* Même logique pour certains wrappers contraints internes */
.wp-site-blocks .wp-block-group.ws-slice > .is-layout-constrained:not(.ws-slice__content),
.wp-site-blocks section.wp-block-group.ws-slice > .is-layout-constrained:not(.ws-slice__content){
  max-width: none !important;
}


/* ======================================================
   4.0.2) UTILITAIRES AVANCÉS — MIN HEIGHT (SLICES)
   ======================================================

   🎯 OBJECTIF
   ------------------------------------------------------
   Permettre de contrôler rapidement la hauteur des sections
   directement depuis Gutenberg sans toucher au CSS.

   📍 OÙ AJOUTER CES CLASSES ?
   ------------------------------------------------------
   Sur le bloc qui contient :
   .ws-slice

   Exemple Gutenberg :
   ws-section ws-slice is-slice-mid has-background ws-h-900

   ⚠️ IMPORTANT
   ------------------------------------------------------
   - Ne PAS mettre ces classes sur ws-slice__content
   - Elles s’appliquent uniquement sur la slice

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

.ws-h-200{ min-height: 200px !important; }
.ws-h-300{ min-height: 300px !important; }
.ws-h-400{ min-height: 400px !important; }
.ws-h-500{ min-height: 500px !important; }
.ws-h-600{ min-height: 600px !important; }
.ws-h-700{ min-height: 700px !important; }
.ws-h-800{ min-height: 800px !important; }
.ws-h-900{ min-height: 900px !important; }
.ws-h-1000{ min-height: 1000px !important; }
.ws-h-1100{ min-height: 1100px !important; }
.ws-h-1200{ min-height: 1200px !important; }
.ws-h-1400{ min-height: 1400px !important; }

@media (max-width: 767px){
  .ws-h-mobile-300{ min-height: 300px !important; }
  .ws-h-mobile-400{ min-height: 400px !important; }
  .ws-h-mobile-500{ min-height: 500px !important; }
  .ws-h-mobile-600{ min-height: 600px !important; }
  .ws-h-mobile-700{ min-height: 700px !important; }
}

@media (min-width: 768px){
  .ws-h-desktop-500{ min-height: 500px !important; }
  .ws-h-desktop-600{ min-height: 600px !important; }
  .ws-h-desktop-700{ min-height: 700px !important; }
  .ws-h-desktop-800{ min-height: 800px !important; }
  .ws-h-desktop-900{ min-height: 900px !important; }
  .ws-h-desktop-1100{ min-height: 1100px !important; }
}


/* ======================================================
   4.0.3) MIN HEIGHT SUR LE CONTENU INTERNE
   ======================================================

   🎯 OBJECTIF
   ------------------------------------------------------
   Permet de contrôler la hauteur DU CONTENU
   sans impacter le background de la slice.

   📍 À mettre sur :
   .ws-slice__content

   Exemple :
   ws-slice__content ws-content-h-600

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

.ws-content-h-300{ min-height: 300px !important; }
.ws-content-h-400{ min-height: 400px !important; }
.ws-content-h-500{ min-height: 500px !important; }
.ws-content-h-600{ min-height: 600px !important; }
.ws-content-h-700{ min-height: 700px !important; }
.ws-content-h-800{ min-height: 800px !important; }


/* ======================================================
   4.0.4) MODE HERO (PLEIN ÉCRAN)
   ======================================================

   🎯 Pour créer une section fullscreen propre

   Usage :
   ws-slice ws-slice-hero

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

.ws-slice-hero{
  min-height: 100vh !important;
  min-height: 100svh !important;
}


/* ======================================================
   4.1) CONTENU INTERNE : ws-slice__content
   ====================================================== */

.wp-site-blocks .wp-block-group.ws-slice > .wp-block-group.ws-slice__content,
.wp-site-blocks section.wp-block-group.ws-slice > .wp-block-group.ws-slice__content,
.wp-site-blocks .wp-block-group.ws-slice > .ws-slice__content,
.wp-site-blocks section.wp-block-group.ws-slice > .ws-slice__content{
  width: 100%;
  max-width: 100% !important;
  min-height: var(--ws-slice-content-min-height);

  margin-left: 0 !important;
  margin-right: 0 !important;

  box-sizing: border-box;

  padding:
    var(--ws-slice-content-pad-y)
    var(--ws-slice-content-pad-x);
}

/* Si Gutenberg a aussi mis has-global-padding sur ws-slice__content,
   on garde NOTRE padding uniquement */
.wp-site-blocks .ws-slice > .ws-slice__content.has-global-padding{
  padding-top: var(--ws-slice-content-pad-y) !important;
  padding-right: var(--ws-slice-content-pad-x) !important;
  padding-bottom: var(--ws-slice-content-pad-y) !important;
  padding-left: var(--ws-slice-content-pad-x) !important;
}


/* ======================================================
   4.1.1) BLOCS INTERNES GUTENBERG À NE PAS LAISSER CASSER LA LARGEUR
   ====================================================== */

.wp-site-blocks .ws-slice .alignwide{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-site-blocks .ws-slice .alignfull{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-site-blocks .ws-slice .wp-block-columns{
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ======================================================
   4.1.2) NEUTRALISATION GUTENBERG SUR GRID INTERNE
   ======================================================

   Cas typique :
   ws-slice__content > .ws-grid.has-global-padding.is-layout-constrained

   La grid interne ne doit ni rajouter de padding,
   ni se recontraindre elle-même.

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

.wp-site-blocks .ws-slice__content > .ws-grid.has-global-padding{
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

.wp-site-blocks .ws-slice__content > .ws-grid.is-layout-constrained{
  max-width: none !important;
}


/* ======================================================
   4.2) HERO IMMERSIVE : première slice sous le header
   ======================================================

   Principe :
   - la slice remonte visuellement sous le header
   - on redonne l’espace sous le header au contenu interne
   - le header reste séparé dans le HTML
   ====================================================== */

.wp-site-blocks .ws-page--immersive > .wp-block-group.ws-slice.is-under-header:first-child,
.wp-site-blocks .ws-page--immersive > section.wp-block-group.ws-slice.is-under-header:first-child,
.wp-site-blocks .wp-block-group.ws-slice.ws-slice--hero.is-under-header,
.wp-site-blocks section.wp-block-group.ws-slice.ws-slice--hero.is-under-header{
  margin-top: calc(-1 * var(--ws-header-offset)) !important;
}

.wp-site-blocks .ws-page--immersive > .wp-block-group.ws-slice.is-under-header:first-child > .ws-slice__content,
.wp-site-blocks .ws-page--immersive > section.wp-block-group.ws-slice.is-under-header:first-child > .ws-slice__content,
.wp-site-blocks .wp-block-group.ws-slice.ws-slice--hero.is-under-header > .ws-slice__content,
.wp-site-blocks section.wp-block-group.ws-slice.ws-slice--hero.is-under-header > .ws-slice__content{
  padding-top: calc(var(--ws-header-offset) + var(--ws-hero-extra-pad-top-mobile)) !important;
  padding-bottom: var(--ws-slice-content-pad-y) !important;
  min-height: var(--ws-slice-hero-content-min-height-mobile);
}

@media (min-width: 768px){
  .wp-site-blocks .ws-page--immersive > .wp-block-group.ws-slice.is-under-header:first-child > .ws-slice__content,
  .wp-site-blocks .ws-page--immersive > section.wp-block-group.ws-slice.is-under-header:first-child > .ws-slice__content,
  .wp-site-blocks .wp-block-group.ws-slice.ws-slice--hero.is-under-header > .ws-slice__content,
  .wp-site-blocks section.wp-block-group.ws-slice.ws-slice--hero.is-under-header > .ws-slice__content{
    padding-top: calc(var(--ws-header-offset) + var(--ws-hero-extra-pad-top-desktop)) !important;
    padding-bottom: var(--ws-slice-content-pad-y) !important;
    min-height: var(--ws-slice-hero-content-min-height-desktop);
  }
}


/* ======================================================
   4.2.1) HERO : MODES DE CONTENU
   ======================================================

   Important :
   - Une hero simple peut être centrée via ws-slice__content--hero
   - Une hero complexe avec grid ne doit PAS être centrée de force
   ====================================================== */

/* Mode par défaut pour les heroes :
   on laisse vivre le layout interne */
.wp-site-blocks .ws-slice--hero > .ws-slice__content{
  text-align: inherit;
}

/* Mode hero centrée explicite */
.wp-site-blocks .ws-slice__content--hero{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Les blocs internes d'une hero centrée restent bien contenus */
.wp-site-blocks .ws-slice__content--hero > *{
  width: 100%;
  max-width: 100%;
}

.wp-site-blocks .ws-slice__content--hero .wp-block-buttons{
  justify-content: center;
}


/* ======================================================
   4.2.2) HERO AVEC GRID INTERNE
   ======================================================

   Si la hero contient une .ws-grid directement,
   on évite tout comportement de recentrage étrange.

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

.wp-site-blocks .ws-slice--hero.is-under-header > .ws-slice__content > .ws-grid{
  align-self: stretch;
}

/* Option de comportement vertical raisonnable dans la hero */
.wp-site-blocks .ws-slice--hero .ws-grid{
  align-items: start;
}


/* ======================================================
   4.3) OVERLAP PHYSIQUE ENTRE SLICES
   ====================================================== */

.wp-site-blocks .wp-block-group.ws-slice + .wp-block-group.ws-slice,
.wp-site-blocks section.wp-block-group.ws-slice + section.wp-block-group.ws-slice,
.wp-site-blocks .wp-block-group.ws-slice + section.wp-block-group.ws-slice,
.wp-site-blocks section.wp-block-group.ws-slice + .wp-block-group.ws-slice{
  margin-top: calc(-1 * (var(--ws-slice-overlap) + var(--ws-slice-fix))) !important;
}


/* ======================================================
   4.4) MASK DE FUSION
   ====================================================== */

@supports (-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000)){

  .wp-site-blocks .wp-block-group.ws-slice.is-slice-mid,
  .wp-site-blocks section.wp-block-group.ws-slice.is-slice-mid{
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--ws-slice-fade),
      #000 calc(100% - var(--ws-slice-fade)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--ws-slice-fade),
      #000 calc(100% - var(--ws-slice-fade)),
      transparent 100%
    );
  }

  .wp-site-blocks .wp-block-group.ws-slice.is-slice-last,
  .wp-site-blocks section.wp-block-group.ws-slice.is-slice-last{
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--ws-slice-fade),
      #000 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--ws-slice-fade),
      #000 100%
    );
  }

  .wp-site-blocks .wp-block-group.ws-slice.is-slice-first,
  .wp-site-blocks section.wp-block-group.ws-slice.is-slice-first{
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - var(--ws-slice-fade)),
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0,
      #000 calc(100% - var(--ws-slice-fade)),
      transparent 100%
    );
  }
}


/* ======================================================
   4.5) PATCH ANTI MICRO-LIGNE
   ====================================================== */

.wp-site-blocks .wp-block-group.ws-slice::after,
.wp-site-blocks section.wp-block-group.ws-slice::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom: calc(-1 * var(--ws-slice-fix));
  height: var(--ws-slice-fix);
  background: inherit;
  pointer-events:none;
}


/* ======================================================
   4.6) UTILITAIRES DE HAUTEUR
   ====================================================== */

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-500,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-500{
  min-height: 500px !important;
}

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-600,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-600{
  min-height: 600px !important;
}

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-700,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-700{
  min-height: 700px !important;
}

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-800,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-800{
  min-height: 800px !important;
}

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-900,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-900{
  min-height: 900px !important;
}

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-1000,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-1000{
  min-height: 1000px !important;
}

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-1100,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-1100{
  min-height: 1100px !important;
}

.wp-site-blocks .wp-block-group.ws-slice.ws-min-height-slice-1200,
.wp-site-blocks section.wp-block-group.ws-slice.ws-min-height-slice-1200{
  min-height: 1200px !important;
}


/* ======================================================
   5) HERO COVER OPTIONNEL
   ====================================================== */

.wp-site-blocks .ws-hero{
  min-height: 100vh;
  min-height: 100svh;
}

.wp-site-blocks .ws-hero > .wp-block-cover__inner-container{
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ======================================================
   6) IMAGES SLICES — OPTIMISATION MOBILE
   ====================================================== */
/*
@media (max-width: 900px){

  .ws-slice.is-slice-first{
    background-image: url("/wp-content/uploads-webpc/uploads/2026/03/amandine-slice-home-01-768x512.png.webp") !important;
  }

  .ws-slice.is-slice-last{
    background-image: url("/wp-content/uploads-webpc/uploads/2026/03/amandine-slice-home-02-768x512.png.webp") !important;
  }
}
*/


/* ======================================================
   7) AJUSTEMENTS MOBILE
   ====================================================== */

@media (max-width: 767px){
  :root{
    --ws-slice-content-pad-x: 16px;
    --ws-slice-content-pad-y: 56px;
    --ws-slice-content-min-height: 680px;
    --ws-slice-overlap: 90px;
    --ws-slice-fade: 42px;
  }

  /* Colonnes Gutenberg : on empile plus proprement */
  .wp-site-blocks .ws-slice .wp-block-columns{
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  .wp-site-blocks .ws-slice .wp-block-column{
    flex-basis: 100% !important;
  }

  /* Hero mobile centrée explicite uniquement */
  .wp-site-blocks .ws-slice__content--hero{
    justify-content: flex-start;
  }

  /* Hero avec grid : un peu plus respirante */
  .wp-site-blocks .ws-slice--hero .ws-grid{
    align-items: start;
  }
}


/* ======================================================
   8) DEBUG FACULTATIF
   ====================================================== */
/*
.ws-page{ outline: 2px solid blue !important; }
.ws-slice{ outline: 2px solid red !important; }
.ws-slice__content{ outline: 2px solid lime !important; }
.ws-header{ outline: 2px solid orange !important; }
*/

/* ======================================================
   9) BLOG / SINGLE POST — LAYOUT AVEC COLONNE LATÉRALE
   ====================================================== */

/*
Structure Gutenberg cible :

Main :
ws-page ws-page--blog

Groupe :
ws-blog-shell

  Groupe gauche :
  ws-blog-main

    Titre / métas / contenu de publication

  Groupe droite :
  ws-blog-sidebar ws-blog-sidebar--sticky

Important :
- Ne PAS utiliser ws-page--home sur le blog
- Ne PAS utiliser ws-slice dans les articles avec sidebar
- Le background blog doit être porté par ws-blog-shell OU par une classe dédiée, pas par ws-page + ws-slice + contenu
*/

/* Page blog/article */
.wp-site-blocks .ws-page.ws-page--blog{
  position: relative;
  z-index: 1;
  background: none !important;
  padding: 0 !important;
}

/* Neutralisation Gutenberg sur le contenu article */
.single-post .ws-page--blog .wp-block-post-content,
.blog .wp-block-post-content,
.archive .wp-block-post-content{
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: none !important;
}

/* Shell principal blog */
.ws-blog-shell{
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;

  /* fond unique du layout blog */
  padding: clamp(32px, 5vw, 72px);
  box-sizing: border-box;
}

/* Colonne principale */
.ws-blog-main{
  min-width: 0;
  background-color: #F8F6E9 !important;
  margin-top: 70px !important;
}

/* Contenu article classique */
.ws-blog-content{
  max-width: 760px;
  background: none !important;
}

/* Sidebar */
.ws-blog-sidebar{
  position: relative;
  align-self: start;
  background-color: #F8F6E9 !important;
}

/* Sidebar sticky optionnelle */
@media (min-width: 901px){
  .ws-blog-sidebar.ws-blog-sidebar--sticky{
    position: sticky;
    top: calc(var(--ws-header-offset) + 32px);
  }
}

/* Sécurité : éviter les slices dans le blog sidebar */
.single-post .ws-page--blog .ws-slice{
  background: none !important;
  padding: 0 !important;
  min-height: auto !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Mobile */
@media (max-width: 900px){
  .ws-blog-shell{
    grid-template-columns: 1fr;
    width: min(100% - 32px, 760px);
    padding: 24px;
  }

  .ws-blog-sidebar{
    position: static;
  }
}

/* ======================================================
   10) BLOG ARCHIVES — LISTING / CATÉGORIES / TAGS
   ====================================================== */

/*
OBJECTIF
---------------------------------------------------------
Créer une structure propre pour :

- /blog/
- /blog/category/...
- /tag/...
- archives WordPress

sans utiliser le système de slices immersives.

STRUCTURE GUTENBERG RECOMMANDÉE
---------------------------------------------------------

MAIN
classes :
ws-page ws-page--blog ws-page--blog-archive

À l’intérieur :

GROUP
classes :
ws-blog-archive-shell

  Titre archive
  Description éventuelle
  Query Loop

IMPORTANT
---------------------------------------------------------

NE PAS UTILISER :

- ws-page--home
- ws-slice
- ws-slice--hero
- is-under-header
- alignfull sur le Post Template si possible

CONFIGURATION QUERY LOOP
---------------------------------------------------------

Boucle de requête :
- afficher les articles
- mise en page grille
- idéalement sans alignfull sur le bloc Post Template

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


/* ======================================================
   10.1) WRAPPER GLOBAL ARCHIVES
   ====================================================== */

.archive .ws-page--blog-archive,
.blog .ws-page--blog-archive{
  position: relative;
  z-index: 1;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: hidden;
}


/* Neutralise le padding global Gutenberg sur ce modèle */
.archive .ws-page--blog-archive.has-global-padding,
.blog .ws-page--blog-archive.has-global-padding{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ======================================================
   10.2) SHELL PRINCIPAL
   ====================================================== */

.ws-blog-archive-shell{
  width: min(1180px, calc(100% - 40px));
  max-width: 1180px;

  margin-inline: auto;

  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(48px, 7vw, 96px);

  box-sizing: border-box;
  overflow: hidden;
}


/* Si Gutenberg ajoute has-global-padding sur le shell */
.ws-blog-archive-shell.has-global-padding{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ======================================================
   10.3) TITRES / DESCRIPTIONS D’ARCHIVE
   ====================================================== */

.ws-blog-archive-shell .wp-block-query-title,
.ws-blog-archive-shell .archive-title,
.ws-blog-archive-shell .page-title{
  margin-top: 0 !important;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.ws-blog-archive-shell .taxonomy-description,
.ws-blog-archive-shell .archive-description{
  margin-bottom: clamp(32px, 4vw, 56px);
  opacity: .8;
}


/* ======================================================
   10.4) QUERY LOOP — NEUTRALISATION DES WRAPPERS
   ====================================================== */

.ws-blog-archive-shell .wp-block-query,
.ws-blog-archive-shell .wp-block-query.is-layout-flow,
.ws-blog-archive-shell .wp-block-query.is-layout-constrained{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ======================================================
   10.5) GRID QUERY LOOP
   ====================================================== */

/*
Le UL généré par Gutenberg utilise :
.wp-block-post-template

ATTENTION :
Gutenberg ajoute parfois alignfull sur ce UL.
On le force donc à rester dans ws-blog-archive-shell.
*/

.ws-blog-archive-shell .wp-block-post-template,
.ws-blog-archive-shell .wp-block-post-template.alignfull,
.ws-blog-archive-shell ul.wp-block-post-template{
  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: 0 !important;
  list-style: none !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(24px, 3vw, 40px) !important;

  box-sizing: border-box;
}


/* Neutralise la classe columns-3 native de Gutenberg si elle force autre chose */
.ws-blog-archive-shell .wp-block-post-template.columns-2,
.ws-blog-archive-shell .wp-block-post-template.columns-3,
.ws-blog-archive-shell .wp-block-post-template.columns-4{
  display: grid !important;
}


/* ======================================================
   10.6) CARTES ARTICLES
   ====================================================== */

.ws-blog-archive-shell .wp-block-post{
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;

  overflow: hidden;

  background: rgba(248,246,233,.92);
  border-radius: 24px;

  box-sizing: border-box;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.ws-blog-archive-shell .wp-block-post:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}


/* ======================================================
   10.7) IMAGE
   ====================================================== */

.ws-blog-archive-shell .wp-block-post-featured-image{
  margin: 0 !important;
  width: 100%;
}

.ws-blog-archive-shell .wp-block-post-featured-image img{
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}


/* ======================================================
   10.8) CONTENU TEXTE
   ====================================================== */

.ws-blog-archive-shell .wp-block-post-title,
.ws-blog-archive-shell .wp-block-post-date,
.ws-blog-archive-shell .wp-block-post-excerpt,
.ws-blog-archive-shell .wp-block-read-more,
.ws-blog-archive-shell .wp-block-post-author-name,
.ws-blog-archive-shell .wp-block-post-terms{
  padding-inline: 24px;
  box-sizing: border-box;
}

.ws-blog-archive-shell .wp-block-post-title{
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

.ws-blog-archive-shell .wp-block-post-title a{
  text-decoration: none;
}

.ws-blog-archive-shell .wp-block-post-date{
  opacity: .65;
  font-size: .9rem;
  margin-bottom: 12px !important;
}

.ws-blog-archive-shell .wp-block-post-excerpt{
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.ws-blog-archive-shell .wp-block-post-excerpt__excerpt{
  margin: 0 !important;
}

.ws-blog-archive-shell .wp-block-read-more{
  margin-top: auto;
  padding-bottom: 24px;
}


/* ======================================================
   10.9) PAGINATION
   ====================================================== */

.ws-blog-archive-shell .wp-block-query-pagination{
  width: 100%;
  margin-top: clamp(40px, 5vw, 72px) !important;

  display: flex;
  justify-content: center;
  gap: 12px;
}


/* ======================================================
   10.10) MOBILE / TABLETTE
   ====================================================== */

@media (max-width: 1100px){

  .ws-blog-archive-shell .wp-block-post-template,
  .ws-blog-archive-shell .wp-block-post-template.alignfull,
  .ws-blog-archive-shell ul.wp-block-post-template{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

}

@media (max-width: 700px){

  .ws-blog-archive-shell{
    width: min(100% - 32px, 760px);
  }

  .ws-blog-archive-shell .wp-block-post-template,
  .ws-blog-archive-shell .wp-block-post-template.alignfull,
  .ws-blog-archive-shell ul.wp-block-post-template{
    grid-template-columns: 1fr !important;
  }

}