/* ========================================
   SECTION DERNIÈRE RÉALISATION — GRAFIXÈS
   Scope sécurisé : .gx-last-realisation
======================================== */

/* ======
   TITRE 
======== */

.gx-last-realisation .gx-last-title{
  color: #F0F4ED;
  font-family: "Playfair Display", serif;
  font-size: 28px !important ;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* tablette */
@media (max-width: 1024px){
  .gx-last-realisation .gx-last-title{
    font-size: 24px;
  }
}

/* mobile */
@media (max-width: 767px){
  .gx-last-realisation .gx-last-title{
    font-size: 20px;
    text-align: center !IMPORTANT;
  }
}

/* ===============================
   TEXTE — Dernière réalisation
================================ */

.gx-last-realisation .gx-last-text{
  color: #F0F4ED;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 15px;
}

/* tablette */
@media (max-width: 1024px){
  .gx-last-realisation .gx-last-text{
    font-size: 15px;
  }
}

/* mobile */
@media (max-width: 767px){
  .gx-last-realisation .gx-last-text{
    font-size: 14px;
    line-height: 1.5;
    text-align: center !IMPORTANT;
  }
}

/* Dernière réalisation – Bouton (scope) */
.gx-last-realisation a.gx-btn,
.gx-last-realisation .elementor-shortcode a.gx-btn,
.gx-last-realisation .gx-btn a{
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;

  background: #C9CE00;
  color: #2F7005;

  border-radius: 50px;
  padding: 8px 18px;

  transition: all .2s ease-in-out;
  
  justify-content: right;
}

.gx-last-realisation a.gx-btn:hover,
.gx-last-realisation .elementor-shortcode a.gx-btn:hover,
.gx-last-realisation .gx-btn a:hover{
  background: #4C2706;
  color: #C9CE00;
}

/* ===== MOBILE — bouton centré ===== */
@media (max-width: 767px){
  .gx-last-realisation .gx-btn,
  .gx-last-realisation .elementor-shortcode a.gx-btn,
  .gx-last-realisation .gx-btn a{
    display: inline-flex;
    justify-content: center !IMPORTANT;
    margin-left: auto;
    margin-right: auto;
  }

  .gx-last-realisation .elementor-button-wrapper{
    text-align: center !IMPORTANT;
  }
}

/* =========================================================
   DERNIERE REALISATION — MOSAIQUE PHOTOS (Modele 2)
   Scope: uniquement dans .gx-last-realisation + conteneur .gx-last-real-grid
   Objectif:
   - Remplir 100% du bloc marron (largeur + hauteur)
   - Garder l’animation "layout" (grid qui se réorganise)
   - Aucun zoom sur les images
========================================================= */

/* ---------- 1) Le conteneur marron doit "donner" une hauteur aux enfants ---------- */
/* IMPORTANT : Elementor ajoute souvent des wrappers. On force la chaine de height. */
.gx-last-real-grid{
  overflow: hidden; /* pas de débordement */
  height: 800px !IMPORTANT;
}

/* Tous les wrappers Elementor de ce bloc prennent la hauteur dispo */
.gx-last-real-grid,
.gx-last-real-grid > .e-con-inner,
.gx-last-real-grid .elementor-widget-wrap,
.gx-last-real-grid .elementor-widget,
.gx-last-real-grid .elementor-widget-container,
.gx-last-real-grid .elementor-widget-html,
.gx-last-real-grid .elementor-widget-html .elementor-widget-container{
  height: 100%;
  min-height: 0;
}

/* ---------- 2) La mosaïque remplit 100% du bloc marron ---------- */
.gx-last-realisation .gx-mosaic{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;

  width: 100%;
  height: 100%;          /* ✅ prend toute la hauteur du bloc marron */
  max-width: none;       /* ✅ jamais de limitation */
  min-height: 0;         /* ✅ évite les collapses bizarres */
  overflow: hidden;
  position: relative;

  /* Transition layout (animation) */
  transition: grid-template-columns .35s ease, grid-template-rows .35s ease;
}

/* Chaque case */
.gx-last-realisation .gx-mosaic .gx-item{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Images : remplissent leur case SANS déformation + SANS zoom */
.gx-last-realisation .gx-mosaic .gx-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;

  /* ✅ kill tout zoom/transform possible venant d'ailleurs */
  transform: none !important;
  transition: none !important;
}

/* ---------- 3) Position initiale 2x2 ---------- */
.gx-last-realisation .gx-mosaic .gx-item--avant{ grid-column: 1; grid-row: 1; }
.gx-last-realisation .gx-mosaic .gx-item--p1{   grid-column: 2; grid-row: 1; }
.gx-last-realisation .gx-mosaic .gx-item--p2{   grid-column: 1; grid-row: 2; }
.gx-last-realisation .gx-mosaic .gx-item--p3{   grid-column: 2; grid-row: 2; }

/* =========================================================
   4) HOVER "PREND LA PLACE" (layout) — via :has()
   (Chrome / Safari / Edge OK)
   >>> ON NE TOUCHE PAS : c’est l’animation que tu veux garder.
========================================================= */

/* Hover PHOTO AVANT -> grande à gauche, 3 à droite */
.gx-last-realisation .gx-mosaic:has(.gx-item--avant:hover){
  grid-template-columns: 1.55fr .45fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.gx-last-realisation .gx-mosaic:has(.gx-item--avant:hover) .gx-item--avant{ grid-column: 1; grid-row: 1 / 4; }
.gx-last-realisation .gx-mosaic:has(.gx-item--avant:hover) .gx-item--p1{   grid-column: 2; grid-row: 1; }
.gx-last-realisation .gx-mosaic:has(.gx-item--avant:hover) .gx-item--p2{   grid-column: 2; grid-row: 2; }
.gx-last-realisation .gx-mosaic:has(.gx-item--avant:hover) .gx-item--p3{   grid-column: 2; grid-row: 3; }

/* Hover P1 -> grande en haut à droite */
.gx-last-realisation .gx-mosaic:has(.gx-item--p1:hover){
  grid-template-columns: .45fr 1.55fr;
  grid-template-rows: 1.55fr .45fr;
}
.gx-last-realisation .gx-mosaic:has(.gx-item--p1:hover) .gx-item--p1{    grid-column: 2; grid-row: 1; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p1:hover) .gx-item--avant{ grid-column: 1; grid-row: 1; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p1:hover) .gx-item--p2{    grid-column: 1; grid-row: 2; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p1:hover) .gx-item--p3{    grid-column: 2; grid-row: 2; }

/* Hover P2 -> grande en bas à gauche */
.gx-last-realisation .gx-mosaic:has(.gx-item--p2:hover){
  grid-template-columns: 1.55fr .45fr;
  grid-template-rows: .45fr 1.55fr;
}
.gx-last-realisation .gx-mosaic:has(.gx-item--p2:hover) .gx-item--p2{    grid-column: 1; grid-row: 2; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p2:hover) .gx-item--avant{ grid-column: 1; grid-row: 1; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p2:hover) .gx-item--p1{    grid-column: 2; grid-row: 1; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p2:hover) .gx-item--p3{    grid-column: 2; grid-row: 2; }

/* Hover P3 -> grande en bas à droite */
.gx-last-realisation .gx-mosaic:has(.gx-item--p3:hover){
  grid-template-columns: .45fr 1.55fr;
  grid-template-rows: .45fr 1.55fr;
}
.gx-last-realisation .gx-mosaic:has(.gx-item--p3:hover) .gx-item--p3{    grid-column: 2; grid-row: 2; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p3:hover) .gx-item--avant{ grid-column: 1; grid-row: 1; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p3:hover) .gx-item--p1{    grid-column: 2; grid-row: 1; }
.gx-last-realisation .gx-mosaic:has(.gx-item--p3:hover) .gx-item--p2{    grid-column: 1; grid-row: 2; }