/* ======================================================
   WS LAYOUT — GRID SYSTEM
   ======================================================

   UTILISATION GUTENBERG :

   Group
   → Classe CSS obligatoire :
     ws-grid

   Optionnel :
   → ws-grid--2
   → ws-grid--3
   → ws-grid--4
   → ws-grid--full
   → ws-grid--items-center
   → ws-grid--items-start
   → ws-grid--items-end
   → ws-grid--items-stretch

   IMPORTANT :
   - Il faut toujours mettre ws-grid
   - ws-grid--3 seul ne suffit pas

   Exemple :
   ws-grid ws-grid--3

   CLASSES COMPLÉMENTAIRES DISPONIBLES :

   SPAN COLONNES :
   → ws-col-span-1
   → ws-col-span-2
   → ws-col-span-3
   → ws-col-span-4

   SPAN LIGNES :
   → ws-row-span-1
   → ws-row-span-2
   → ws-row-span-3
   → ws-row-span-4

   LARGEURS MIN :
   → ws-min-w-150
   → ws-min-w-200
   → ws-min-w-250
   → ws-min-w-300
   → ws-min-w-400
   → ws-min-w-500

   HAUTEURS MIN :
   → ws-min-h-100
   → ws-min-h-150
   → ws-min-h-200
   → ws-min-h-250
   → ws-min-h-300
   → ws-min-h-400
   → ws-min-h-500
   → ws-min-h-600

   PRESETS :
   → ws-item--wide
   → ws-item--tall
   → ws-item--hero

   ALIGNEMENT DE L'ITEM DANS SA CELLULE :
   → ws-justify-self-start
   → ws-justify-self-center
   → ws-justify-self-end
   → ws-justify-self-stretch
   → ws-align-self-start
   → ws-align-self-center
   → ws-align-self-end
   → ws-align-self-stretch
   → ws-self-start
   → ws-self-center
   → ws-self-end
   → ws-self-stretch

   ALIGNEMENT DU CONTENU INTERNE :
   → ws-content-center
   → ws-content-center-left
   → ws-content-center-right
   → ws-content-middle
   → ws-content-middle-left
   → ws-content-middle-right

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


/* ======================================================
   1) GRID DE BASE
   ====================================================== */

.ws-grid{
  --ws-grid-cols: 2;
  --ws-grid-gap: 40px;
  --ws-grid-max: 1200px;
  --ws-grid-auto-rows: auto;

  display: grid !important;
  grid-template-columns: repeat(var(--ws-grid-cols), minmax(0,1fr));
  gap: var(--ws-grid-gap);
  grid-auto-rows: var(--ws-grid-auto-rows);

  width: 100%;
  max-width: var(--ws-grid-max);
  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
  align-items: stretch;
}


/* ======================================================
   2) VARIANTES RAPIDES
   ====================================================== */

.ws-grid--2{ --ws-grid-cols: 2; }
.ws-grid--3{ --ws-grid-cols: 3; }
.ws-grid--4{ --ws-grid-cols: 4; }

.ws-grid--full{
  max-width: none;
}


/* ======================================================
   3) SÉCURITÉ ENFANTS DIRECTS
   ====================================================== */

.ws-grid > *{
  min-width: 0;
  box-sizing: border-box;
}


/* ======================================================
   4) SPAN COLONNES
   ====================================================== */

.ws-col-span-1{ grid-column: span 1; }
.ws-col-span-2{ grid-column: span 2; }
.ws-col-span-3{ grid-column: span 3; }
.ws-col-span-4{ grid-column: span 4; }


/* ======================================================
   5) SPAN LIGNES
   ====================================================== */

.ws-row-span-1{ grid-row: span 1; }
.ws-row-span-2{ grid-row: span 2; }
.ws-row-span-3{ grid-row: span 3; }
.ws-row-span-4{ grid-row: span 4; }


/* ======================================================
   6) LARGEURS MIN
   ====================================================== */

.ws-min-w-150{ min-width: 150px; }
.ws-min-w-200{ min-width: 200px; }
.ws-min-w-250{ min-width: 250px; }
.ws-min-w-300{ min-width: 300px; }
.ws-min-w-400{ min-width: 400px; }
.ws-min-w-500{ min-width: 500px; }


/* ======================================================
   7) HAUTEURS MIN
   ====================================================== */

.ws-min-h-100{ min-height: 100px; }
.ws-min-h-150{ min-height: 150px; }
.ws-min-h-200{ min-height: 200px; }
.ws-min-h-250{ min-height: 250px; }
.ws-min-h-300{ min-height: 300px; }
.ws-min-h-400{ min-height: 400px; }
.ws-min-h-500{ min-height: 500px; }
.ws-min-h-600{ min-height: 600px; }


/* ======================================================
   8) PRESETS PRATIQUES
   ====================================================== */

.ws-item--wide{
  grid-column: span 2;
}

.ws-item--tall{
  grid-row: span 2;
}

.ws-item--hero{
  grid-column: span 2;
  grid-row: span 2;
  min-height: 400px;
}


/* ======================================================
   8.1) ALIGNEMENT DES ITEMS DANS LA GRID
   ====================================================== */

/* Alignement horizontal de l'item dans sa cellule */
.ws-justify-self-start{ justify-self: start; }
.ws-justify-self-center{ justify-self: center; }
.ws-justify-self-end{ justify-self: end; }
.ws-justify-self-stretch{ justify-self: stretch; }

/* Alignement vertical de l'item dans sa cellule */
.ws-align-self-start{ align-self: start; }
.ws-align-self-center{ align-self: center; }
.ws-align-self-end{ align-self: end; }
.ws-align-self-stretch{ align-self: stretch; }

/* Raccourcis pratiques */
.ws-self-center{
  justify-self: center;
  align-self: center;
}

.ws-self-start{
  justify-self: start;
  align-self: start;
}

.ws-self-end{
  justify-self: end;
  align-self: end;
}

.ws-self-stretch{
  justify-self: stretch;
  align-self: stretch;
}


/* ======================================================
   8.2) CENTRAGE DU CONTENU INTERNE
   ====================================================== */

.ws-content-center{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.ws-content-center-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.ws-content-center-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

.ws-content-middle{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ws-content-middle-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.ws-content-middle-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}


/* ======================================================
   8.3) ALIGNEMENT GLOBAL DE LA GRID
   ====================================================== */

.ws-grid--items-center{
  justify-items: center;
  align-items: center;
}

.ws-grid--items-start{
  justify-items: start;
  align-items: start;
}

.ws-grid--items-end{
  justify-items: end;
  align-items: end;
}

.ws-grid--items-stretch{
  justify-items: stretch;
  align-items: stretch;
}


/* ======================================================
   9) NEUTRALISATION GUTENBERG DANS LES ITEMS
   ====================================================== */

/* Neutralisation des paddings Gutenberg parasites */
.ws-grid > .wp-block-group.has-global-padding{
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
}

/* Neutralisation des contraintes Gutenberg */
.ws-grid > .wp-block-group.is-layout-constrained{
  max-width: none !important;
}

/* Certains blocs internes Gutenberg gardent des largeurs contraignantes */
.ws-grid .is-layout-constrained{
  max-width: none;
}


/* ======================================================
   10) IMAGES DANS LA GRID
   ====================================================== */

.ws-grid .wp-block-image{
  margin: 0 !important;
}

.ws-grid .wp-block-image img{
  display: block;
  width: 100%;
  height: auto;
}


/* ======================================================
   11) OPTIONS UTILES FACULTATIVES
   ====================================================== */

/* Permet de combler certains “trous” visuels dans la grille
   À activer seulement si besoin
*/
/*
.ws-grid{
  grid-auto-flow: dense;
}
*/

/* ======================================================
   11.1) VISIBILITÉ + ORDRE MOBILE
   ====================================================== */

@media (max-width: 1200px){

  .ws-hide-mobile{
    display: none !important;
  }

  .ws-show-mobile{
    display: block !important;
  }

  .ws-order-mobile-1{ order: 1; }
  .ws-order-mobile-2{ order: 2; }
  .ws-order-mobile-3{ order: 3; }
  .ws-order-mobile-4{ order: 4; }
  .ws-order-mobile-5{ order: 5; }
  .ws-order-mobile-6{ order: 6; }
  .ws-order-mobile-7{ order: 7; }
  .ws-order-mobile-8{ order: 8; }
  .ws-order-mobile-9{ order: 9; }
  .ws-order-mobile-10{ order: 10; }
}


/* ======================================================
   12) RESPONSIVE
   ====================================================== */

@media (max-width: 1200px){

  .ws-grid{
    grid-template-columns: 1fr;
  }

  /* Tous les spans redeviennent simples sur mobile */
  .ws-col-span-2,
  .ws-col-span-3,
  .ws-col-span-4,
  .ws-item--wide,
  .ws-item--hero{
    grid-column: span 1 !important;
  }

  .ws-row-span-2,
  .ws-row-span-3,
  .ws-row-span-4,
  .ws-item--tall,
  .ws-item--hero{
    grid-row: span 1 !important;
  }

  /* Les min-width trop grandes peuvent casser la lisibilité mobile */
  .ws-min-w-150,
  .ws-min-w-200,
  .ws-min-w-250,
  .ws-min-w-300,
  .ws-min-w-400,
  .ws-min-w-500{
    min-width: 0 !important;
  }

  /* Hero plus raisonnable sur mobile */
  .ws-item--hero{
    min-height: 250px;
  }

  /* Sur mobile, les items centrés reprennent un comportement plus simple si besoin */
  .ws-self-center,
  .ws-self-start,
  .ws-self-end,
  .ws-self-stretch,
  .ws-justify-self-start,
  .ws-justify-self-center,
  .ws-justify-self-end,
  .ws-justify-self-stretch,
  .ws-align-self-start,
  .ws-align-self-center,
  .ws-align-self-end,
  .ws-align-self-stretch{
    justify-self: stretch;
    align-self: stretch;
  }
}