/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 29 2025 | 23:39:21 */
/* =======================================================
   PAGE "LE CABINET" — STRUCTURE SECTIONS & COLONNES (desktop)
   - Pas de responsive ici (on l’ajoutera ensuite)
   - Respecte les largeurs 40/60 de Gutenberg
   ======================================================= */









/* Variables locales d’espacement (faciles à ajuster) */
.Conteneur-colonnes {
  --section-space: 60px;   /* marge verticale entre les sections */
  --col-gap: 48px;         /* écart entre les deux colonnes */
  --col-pad: 24px;         /* petit padding interne de confort */
	padding: 0;
}




/* Chaque bloc 2 colonnes (le wrapper qui a ta classe "Section") */
.Conteneur-colonnes .Section {
  /* WP .wp-block-columns est déjà en flex – on complète */
  margin-block: var(--section-space);
  column-gap: var(--col-gap);
  align-items: center;           /* aligne verticalement les 2 colonnes */
}

/* Nettoyage des colonnes (évite marges parasites) */
.Conteneur-colonnes .Section > .wp-block-column {
  margin: 0;                     /* neutre : WP gère déjà la largeur */
}

/* Rôle des colonnes */
.Conteneur-colonnes .Grande-colonne {
  display: flex;
  flex-direction: column;
  justify-content: center;       /* centre verticalement le contenu texte */
}

.Conteneur-colonnes .Petite-colonne {
  display: flex;
  align-items: center;           /* centre verticalement l’image */
  justify-content: center;
}

/* Gouttières internes (symétrie bord/centre selon l’ordre visuel) */
.Section1 .Petite-colonne { padding-right: var(--col-pad); }
.Section1 .Grande-colonne { padding-left:  var(--col-pad); }

.Section2 .Grande-colonne { padding-right: var(--col-pad); }
.Section2 .Petite-colonne { padding-left:  var(--col-pad); }

.Section3 .Petite-colonne { padding-right: var(--col-pad); }
.Section3 .Grande-colonne { padding-left:  var(--col-pad); }

/* Images de la petite colonne : plein conteneur, sans débordement */
.Conteneur-colonnes .Petite-colonne .wp-block-image,
.Conteneur-colonnes .Petite-colonne figure {
  margin: 0;
}

.Conteneur-colonnes .Petite-colonne img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;   /* sécurise le rendu si un style fixe est appliqué plus tard */
	border-radius: 5px;
	
	box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),   /* halo large, très diffus */
    0 2px 6px rgba(0, 0, 0, 0.12);     /* ombre courte, ajoute du relief */
}




/* Gestion des images */

.notrecabinet-image {
	border-radius:20px!important;
	}


/* background Section 2 */

.Section2 {
	background:#e8ebfa ;
	}


.Section {
   
    padding: 20px 3%;
  margin: 0 !important;
}




/* ======= RESPONSIVE — PAGE "LE CABINET" ======= */

/* ---- ≤ 1024px (tablettes) ---- */
@media (max-width: 1024px) {
  

  /* Espacements plus serrés */
  .Conteneur-colonnes {
    --section-space: 48px;
    --col-gap: 36px;
    --col-pad: 20px;
  }
}

/* ---- ≤ 900px (petites tablettes / grands mobiles) ---- */
@media (max-width: 900px) {
  
  .Conteneur-colonnes {
    --section-space: 40px;
    --col-gap: 28px;
    --col-pad: 18px;
  }

  /* Empilement vertical propre des colonnes */
  .Conteneur-colonnes .Section {
    display: flex;              /* sécurité si WP ne pousse pas le flex */
    flex-direction: column;
    row-gap: var(--col-gap);
  }

  /* On neutralise les gouttières latérales quand empilé */
  .Conteneur-colonnes .Petite-colonne,
  .Conteneur-colonnes .Grande-colonne {
    padding: 0;
  }
	
	 .Conteneur-colonnes .Section2 {
    display: flex !important;          /* s'assure que c'est bien un conteneur flex */
    flex-direction: column !important;  /* empilement vertical */
  }
  .Conteneur-colonnes .Section2 .Petite-colonne {
    order: -1 !important;               /* l'image passe en premier */
  }
  .Conteneur-colonnes .Section2 .Grande-colonne {
    order: 0 !important;                /* le texte passe en deuxième */
  }
	
}

/* ---- ≤ 650px (mobiles) ---- */
@media (max-width: 650px) {
  

  .Conteneur-colonnes {
    --section-space: 50px;
    --col-gap: 20px;
    --col-pad: 16px;
  }

  .Conteneur-colonnes .Section2 {
    display: flex !important;          /* s'assure que c'est bien un conteneur flex */
    flex-direction: column !important;  /* empilement vertical */
  }
  .Conteneur-colonnes .Section2 .Petite-colonne {
    order: -1 !important;               /* l'image passe en premier */
  }
  .Conteneur-colonnes .Section2 .Grande-colonne {
    order: 0 !important;                /* le texte passe en deuxième */
  }
	

	
}