/*
Theme Name: 2025.06.VACFOR-DiviEnfant
Description: Divi Enfant, theme enfant de Divi 4 fourni par VACFOR 2025
Author: VACFOR
Template: Divi
Version: 2025.06.27 2025/06/27
______________________________*/

/*================================================
Modification pour les BLOG - CSS Blog Grille
Utilise une grille pour placer les éléments du blog
Classe CSS: vfblog_grille dans le module blog
================================================*/
.vfblog_grille .et_pb_ajax_pagination_container {
	display: grid;
	grid-gap: 0.1rem; /* Espacement entre les éléments de la grille */
	grid-template-columns: repeat(4, 1fr)!important; /* 4 colonnes égales */
}
/* Étire le conteneur avec la pagination sur toute la largeur
--------------------------------------------------------------------- */	
.vfblog_grille .et_pb_ajax_pagination_container>div,
.vfblog_grille .et_pb_ajax_pagination_container>article{
	grid-column: span 1; /* Occupe 4 cols sur desktop */
}
/*=====================
Version tablette
=====================*/
@media (max-width:980px) {
	.vfblog_grille .et_pb_ajax_pagination_container {
		grid-template-columns: repeat(3, 1fr); /* 3 cols en tablette */
	}
.vfblog_grille .et_pb_ajax_pagination_container>div,
.vfblog_grille .et_pb_ajax_pagination_container>article{
		grid-column: span 1; /* Étend sur 3 colonnes */
	}
}
/*=====================
Version mobile
=====================*/
@media (max-width:600px) {
	.vfblog_grille .et_pb_ajax_pagination_container {
		grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
	}
.vfblog_grille .et_pb_ajax_pagination_container>div,
.vfblog_grille .et_pb_ajax_pagination_container>article{
		grid-column: span 1;
	}
}
/*=====================
Version mobile petit
=====================*/
@media (max-width:460px) {
	.vfblog_grille .et_pb_ajax_pagination_container {
		grid-template-columns: repeat(1, 1fr); /* 1 col pour petit mobile */
	}
.vfblog_grille .et_pb_ajax_pagination_container>div,
.vfblog_grille .et_pb_ajax_pagination_container>article{
		grid-column: span var(--vfblog_in_nbcol_phonepetit); /* Variable personnalisée */
	}
}
/*---------------------------------------------------------------------
Traitement du cadre des articles du blog
--------------------------------------------------------------------- */	
.vfblog_grille .et_pb_post {
	height: clamp(19rem, calc(18.757rem + 1.036vw),20rem);
	max-height: clamp(25rem, calc(23.786rem + 5.178vw),30rem);
	background: transparent;
	box-shadow:
		0.1875rem 0.1875rem 0.2em #922080,  /* 3px 3px */
		-0.0625rem 0 0.2em #f39200;         /* -1px 0 */
	margin-top: 0.5rem;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: 0.5rem
}
/*================================================
Mobile et Tablette : afficher directement les extraits
================================================*/
@media all and (max-width: 980px) {
  .vfblog_grille .et_pb_post .post-content {
    visibility: visible;
    opacity: 1;
    min-height: clamp(16rem, calc(16.243rem + -1.036vw),15rem);
    max-height: clamp(16rem, calc(15.757rem + 1.036vw),17rem);
  }
}
@media all and (min-width: 981px) {
/* Maintient le contenu visible, hauteur de 200px en mode éditeur.
--------------------------------------------------------------------- */	
  body.et-fb .vfblog_grille .et_pb_post .post-content {
    visibility:visible;
    opacity: 1;
  }
/* Cacher le contenu des articles .post-content : état par défaut
--------------------------------------------------------------------- */	
  .vfblog_grille .et_pb_post .post-content {
    visibility: hidden;
    opacity: 0;
	max-height: 0rem; /* 0px */
  }
/* Afficher le contenu des articles au survol de l'élément
--------------------------------------------------------------------- */	
  .vfblog_grille .et_pb_post:hover .post-content {
    visibility: visible;
    opacity:1;
  }
}
/* Ajouter une transition pour le contenu des articles
--------------------------------------------------------------------- */
  .vfblog_grille .et_pb_post .post-content {
    transition: all 500ms !important;
  }
/*---------------------------------------------------------------------
Traitement du fond image et textes     impair : odd 
--------------------------------------------------------------------- */	
.vfblog_grille .et_pb_post:nth-child(odd) {
	background: transparent; /* ou blanc  #ffffff; */
    }
/*---------------------------------------------------------------------
Traitement du fond image et textes     pair : even
--------------------------------------------------------------------- */
.vfblog_grille .et_pb_post:nth-child(even) {
	background: rgba(45, 81, 157, 0.07); /* Fond légèrement coloré */
}
.vfblog_grille .et_pb_post a {
	display: flex;
	justify-content: center;
	margin-bottom:0.2rem
}
.vfblog_grille .et_pb_post img {
	/* width: clamp(8rem, 90%, 20rem); */      /* Largeur responsive */
	height: auto;                         /* Hauteur auto pour conserver les proportions */
	max-width: 100%;                      /* Ne dépasse jamais le conteneur */
	max-height: clamp(6rem, calc(5.515rem + 2.071vw),8rem); /* Hauteur max = 9rem   */
	object-fit: contain;      		      /* Garde l’image entière visible */
/*	border-top-left-radius: 10%; /* Arrondi haut gauche */
/*	border-top-right-radius: 10%; /* Arrondi haut droit */
/*	border-bottom-right-radius: 10%; /* Pas d’arrondi bas droit */
/*	border-bottom-left-radius: 10%; /* Pas d’arrondi bas gauche */	
	opacity: 1; /* Image totalement visible */
	padding-top: 0.5rem;     /* 8px */
	padding-right: 0;
	padding-bottom: 0;
	display: block;
	margin-top: 0; /*0.2rem;*/
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.vfblog_grille .et_pb_post img:hover {
	opacity: 0.3; /* Effet de transparence au survol */
}
/*---------------------------------------------------------------------
Traitement du titre
--------------------------------------------------------------------- */
.vfblog_grille .et_pb_post .entry-title a {
	font-size: clamp(0.8rem, calc(0.727rem + 0.311vw),1.1rem);
	line-height: clamp(0.9rem, calc(0.827rem + 0.311vw),1.2rem);
	margin-top: 0!important;
  	margin-bottom: 0!important;
}
/*---------------------------------------------------------------------
Traitement des méta	
--------------------------------------------------------------------- */
.vfblog_grille .et_pb_post .post-meta {
  font-family: 'Carlito', 'Lato', 'SourceSans3', 'Helvetica Neue', Arial, sans-serif; /* Police personnalisée */
  font-size: clamp(0.6rem, 0.75rem, 0.8rem) !important; /* Taille responsive, max 0.8rem */
  line-height: clamp(0.8rem, 0.85rem, 1rem) !important; /* Hauteur de ligne responsive */
  text-align: left !important; /* Alignement du texte à gauche */
  margin-top: 0rem; /* Pas d'espace au-dessus */
  margin-bottom: 0.2rem; /* Espace sous le bloc */
  padding: 0 2%; /* Padding horizontal (droite/gauche) */
  display: block !important; /* Affichage bloc */
  justify-content: flex-start !important; /* Aligne les éléments à gauche en flex */
  align-items: flex-start !important; /* Alignement vertical à gauche */
  white-space: normal !important; /* Retour ligne autorisé normalement */
  word-break: normal; /* Pas de coupure de mots automatique */
}
.vfblog_grille .et_pb_post .post-meta .published {
  display: block; /* Force un retour à la ligne */
  margin-top: 0rem; /* Pas d'espace au-dessus */
  font-family: inherit; /* Hérite de la police du parent */
  font-size: clamp(0.6rem, 0.75rem, 0.8rem) !important; /* Taille responsive identique */
  line-height: clamp(0.8rem, 0.85rem, 1rem) !important; /* Hauteur de ligne identique */
  font-weight: 600 !important;   /* Met le texte en gras bold 600 = semi bold*/
  color: #F39200 !important;      /* Applique la couleur orange */
}
.vfblog_grille .et_pb_post .post-meta a {
  display: inline; /* Affichage en ligne pour éviter les sauts */
  white-space: nowrap; /* Empêche les retours ligne dans les liens */
  margin-right: 0.1em; /* Espace à droite de chaque lien */
  font-family: inherit; /* Hérite de la police du parent */
  font-size: clamp(0.6rem, 0.75rem, 0.8rem) !important; /* Taille responsive */
  line-height: clamp(0.8rem, 0.85rem, 1rem) !important; /* Hauteur de ligne */
  font-weight: 600 !important;   /* Met le texte en gras bold 600 = semi bold*/
  color: #F39200 !important;      /* Applique la couleur orange */
}
/*---------------------------------------------------------------------
Traitement  du résumé de l'article	
--------------------------------------------------------------------- */
.vfblog_grille .et_pb_post .post-content-inner {
	margin-top: 0rem;     /* Espace au-dessus */
	margin-bottom: 0.2rem;  /* Espace en dessous */
	padding-top: 2%;
	padding-right: 2%;
	padding-bottom: 0;
	padding-left: 2%;
}
.vfblog_grille .et_pb_post .post-content-inner p {
	font-family: 'Carlito', 'Lato', 'SourceSans3', 'Helvetica Neue', Arial, sans-serif; /* Police personnalisée */
	font-size: clamp(0.8rem, 0.9rem, 1rem); /* Taille de police responsive, max 1rem */
	line-height: clamp(0.8rem, 0.9rem, 1rem); /* Hauteur de ligne responsive, max 1.1rem */
	text-align: left; /* Alignement à gauche */
}
.vfblog_grille .et_pb_post .more-link {
  display: inline-block;         /* Nécessaire pour que text-align fonctionne selon le conteneur */
	font-family: 'Carlito', 'Lato', 'SourceSans3', 'Helvetica Neue', Arial, sans-serif; /* Police personnalisée */
	font-size: clamp(0.8rem, 0.9rem, 1rem); /* Taille de police responsive, max 1rem */
	line-height: clamp(0.8rem, 0.9rem, 1rem); /* Hauteur de ligne responsive, max 1.1rem */
	text-align: left; /* Alignement à gauche */
  margin-left: 0;                /* Supprime tout centrage éventuel */
  padding-left: 2%;              /* Optionnel : pour l’alignement identique aux autres textes */
}