/*
Theme Name: Divi Child CAPMVE
Theme URI: https://communication-vectorielle.capmve.org/
Description: Thème enfant Divi pour CAPMVE. Tous les styles personnalisés vont ici.
Author: OVM Communication
Author URI: https://www.ovm-communication.fr/
Template: Divi
Version: 1.4.1
*/

/* ==========================================================================
   Remise d'équerre OVM, 05/09/2026
   Les !important sont nécessaires : Divi 5 génère ses règles par module
   avec une forte spécificité, et l'interligne 1,0 est posé module par module.
   ========================================================================== */

/* 1. Titres : interligne 1,0 partout dans le builder, lignes qui se touchent. */
#et-main-area h1,
#et-main-area h2,
#et-main-area h3,
#et-main-area h4 {
	line-height: 1.25 !important;
}

/* 2. Paragraphes et listes des modules texte : certains blocs sont à 1,0
      (sous-titre du hero 24 px, accroches 16 px, pied de page 24 px). */
#et-main-area .et_pb_text p,
#et-main-area .et_pb_text li,
#et-main-area .et_pb_blurb_description p,
#et-tb-footer .et_pb_text p {
	line-height: 1.6 !important;
}

/* 3. Mobile */
@media (max-width: 767px) {

	/* Hiérarchie : le h1 était à 26 px comme les h2. */
	#et-main-area h1 {
		font-size: 30px !important;
	}

	/* Boutons placés côte à côte dans un groupe flex (hero) :
	   on les empile sur toute la largeur au lieu de les laisser se replier sur 3 lignes. */
	#et-main-area .et_flex_group:has(> .et_pb_button_module_wrapper) {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px;
	}
	#et-main-area .et_flex_group > .et_pb_button_module_wrapper {
		width: 100% !important;
	}
	#et-main-area .et_flex_group > .et_pb_button_module_wrapper .et_pb_button {
		display: block !important;
		text-align: center;
	}

	/* Carrousel de vidéos : la colonne se réduisait à 123 px (une vignette minuscule
	   et un débordement à droite). Une vidéo par écran, pleine largeur. */
	#et-main-area .et_flex_column:has(> .et_pb_group_carousel) {
		width: 100% !important;
		flex: 1 1 100% !important;
	}
	#et-main-area .et_pb_group_carousel,
	#et-main-area .et_pb_group_carousel_container {
		width: 100% !important;
	}
	#et-main-area .et_pb_group_carousel_slide {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	#et-main-area .et_pb_code iframe {
		max-width: 100%;
	}
}

/* ==========================================================================
   Retours client du 08/09/2026, v1.2.0
   ========================================================================== */

/* 4. Encarts orange (accueil, services particuliers) : ce sont des modules
      « En-tête pleine largeur » posés dans des colonnes. Divi leur impose une
      hauteur minimale de 390 à 510 px et un contenu réduit à 60 % de la largeur,
      d'où les grands vides. Hauteur au contenu, alignée par ligne. */
#et-main-area .et_flex_column > .et_pb_fullwidth_header {
	min-height: 0 !important;
	flex: 1 1 auto !important;
}
#et-main-area .et_flex_column > .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 20px !important;
	box-sizing: border-box;
}
#et-main-area .et_flex_column > .et_pb_fullwidth_header .header-content-container {
	width: 100% !important;
}
#et-main-area .et_flex_column > .et_pb_fullwidth_header .header-content {
	width: 100% !important;
	max-width: 400px !important;
	margin: 28px auto !important;
	padding: 0 !important;
	box-sizing: border-box;
}
#et-main-area .et_flex_column > .et_pb_fullwidth_header .et_pb_image {
	max-width: 90px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
#et-main-area .et_flex_column > .et_pb_fullwidth_header .et_pb_image img {
	width: 100%;
	height: auto;
}
#et-main-area .et_flex_column > .et_pb_fullwidth_header a.et_pb_button {
	margin-right: 0 !important;
}

/* 5. Cartes retournables « Thématiques d'accompagnement » (services entreprises,
      module Code) : hauteur figée à 500 px. Les deux faces sont empilées dans une
      grille, la carte prend la hauteur de son contenu, les cartes d'une même
      ligne restent alignées. */
#et-main-area .et_flex_column > .et_pb_code:has(> .et_pb_code_inner > .cv-flip),
#et-main-area .et_pb_code:has(> .et_pb_code_inner > .cv-flip) > .et_pb_code_inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
#et-main-area .cv-flip {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0 !important;
}
#et-main-area .cv-flip__inner {
	display: grid;
	flex: 1 1 auto;
	min-height: 0;
}
#et-main-area .cv-flip__face {
	position: relative !important;
	inset: auto !important;
	grid-area: 1 / 1;
	padding: 28px !important;
	gap: 14px !important;
}

/* 6. Accueil, « Des accompagnements adaptés à votre situation » : les deux
      photos dans le même cadre 3:2 (la seconde était en portrait). */
.home #et-main-area .et_pb_blurb .et_pb_image_wrap {
	display: block;
	width: 100%;
}
.home #et-main-area .et_pb_blurb .et_pb_image_wrap img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* 7. Services entreprises : le visuel de présentation sur le même bleu que
      le bandeau de titre (la section était blanche). */
.page-id-15 #et-main-area .et_pb_section:has(img[alt^="présentation CAPMVE entreprises"]) {
	background-color: rgba(119, 203, 232, 0.5) !important;
}

/* 8. Vecteurs : la tribu des Vectorions moins large. */
.page-id-19 #et-main-area .et_pb_image:has(img[alt="tribu des vectorions"]) {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* 9. Témoignages : vidéo d'introduction moins large (les vignettes en
      colonnes de 320 px ne sont pas concernées). */
.page-id-27 #et-main-area .et_pb_code .video-container {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* 10. Mentions légales et CGV : les intertitres héritaient du h2 global
       de Divi (61 px). */
.page-id-7947 #et-main-area .et_pb_text h2,
.page-id-7952 #et-main-area .et_pb_text h2 {
	font-size: 22px !important;
	line-height: 1.3 !important;
	margin-top: 1.4em;
}

/* 11. Résultats de recherche (gabarit blog par défaut de Divi) : titres à
       61 px, fond blanc. */
.search #main-content {
	background-color: rgba(119, 203, 232, 0.5);
}
.search #main-content .container {
	padding-top: 40px;
}
.search #left-area article {
	margin-bottom: 40px;
}
.search #left-area .entry-title {
	font-size: 24px !important;
	line-height: 1.25 !important;
	padding-bottom: 4px;
}
.search #sidebar h2,
.search #sidebar h3,
.search #sidebar h4 {
	font-size: 20px !important;
	line-height: 1.25 !important;
}
/* La ligne « par Frantz Rouzé | Juin 9, 2026 » sous chaque résultat n'apporte
   rien au visiteur et affiche le nom de l'ancien prestataire. */
.search #left-area .post-meta {
	display: none;
}

/* ==========================================================================
   Retour client du 09/09/2026, v1.3.0
   ========================================================================== */

/* 12. Vecteurs, « Ils ont expérimenté la communication vectorielle » :
       neuf modules « En-tête pleine largeur » posés directement dans un groupe
       flex (sans colonne), alignés au centre et à hauteur variable selon le
       texte et la taille de l'illustration. Grille de 4 colonnes (2 en tablette,
       1 en mobile) dont toutes les lignes prennent la hauteur du bloc le plus
       haut ; le neuvième témoignage garde sa pleine largeur et sa hauteur
       naturelle. Illustrations à la même taille, texte et image centrés. */
.page-id-19 #et-main-area .et_flex_group:has(> .et_pb_fullwidth_header) {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: 1fr 1fr auto;
	gap: 30px;
	align-items: stretch !important;
	width: 100% !important;
}
@media (max-width: 980px) {
	.page-id-19 #et-main-area .et_flex_group:has(> .et_pb_fullwidth_header) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(4, 1fr) auto;
	}
}
@media (max-width: 767px) {
	.page-id-19 #et-main-area .et_flex_group:has(> .et_pb_fullwidth_header) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header {
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header.et_flex_column_24_24 {
	grid-column: 1 / -1;
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header .et_pb_fullwidth_header_container {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header .header-content-container {
	width: 100% !important;
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header .header-content {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 32px 20px !important;
	box-sizing: border-box;
	justify-content: center !important;
	gap: 24px;
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header .et_pb_header_content_wrapper {
	margin: 0 !important;
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header .et_pb_header_button_wrapper:empty {
	display: none;
}
.page-id-19 #et-main-area .et_flex_group > .et_pb_fullwidth_header:not(.et_flex_column_24_24) .et_pb_image {
	width: 60% !important;
	max-width: 150px !important;
	margin: 0 auto !important;
}

/* ==========================================================================
   Retours client du 09/09/2026 (12h16), v1.4.0
   Les photos de ces pages sont des fonds de colonnes vides (pas des modules
   Image). Divi leur impose une hauteur figée (500 px tablette, 395 px
   téléphone) avec recadrage « cover », et masque les colonnes vides en
   téléphone. Chaque colonne prend ici le rapport largeur/hauteur de sa photo.
   ========================================================================== */

/* 13. Coaching orientation : le visuel du bonhomme (nouveau fichier 500 × 620
       fourni le 09/09, en remplacement d'une image 538 × 197 étirée) est un
       fond de colonne. La colonne prend le format de l'image, entière, dans
       son cadre blanc, centrée à côté du texte. */
.page-id-765 #et-main-area .et_pb_column_37 {
	align-self: center !important;
	width: min(100%, 420px) !important;
	flex: 0 0 auto !important;
	margin: 0 auto !important;
	aspect-ratio: 500 / 620;
	height: auto !important;
	min-height: 0 !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: #fff !important;
}

/* 14. Coaching et Coaching orientation, tablette et téléphone : photos
       entières, hauteur au rapport de l'image. */
@media (max-width: 980px) {
	.page-id-759 #et-main-area .et_pb_column_27,
	.page-id-759 #et-main-area .et_pb_column_35,
	.page-id-765 #et-main-area .et_pb_column_31,
	.page-id-765 #et-main-area .et_pb_column_35,
	.page-id-765 #et-main-area .et_pb_column_41 {
		height: auto !important;
		min-height: 0 !important;
		background-size: cover !important;
		background-position: center !important;
	}
	.page-id-759 #et-main-area .et_pb_column_27 { aspect-ratio: 4 / 3; }
	.page-id-759 #et-main-area .et_pb_column_35 { aspect-ratio: 550 / 385; }
	.page-id-765 #et-main-area .et_pb_column_31,
	.page-id-765 #et-main-area .et_pb_column_35 { aspect-ratio: 16 / 9; }
	.page-id-765 #et-main-area .et_pb_column_41 { aspect-ratio: 550 / 385; }
}

/* 15. Jeux éducatifs, téléphone : les quatre visuels de jeux (300 × 465)
       n'apparaissaient pas (colonnes vides masquées par Divi). Affichés au
       format portrait, centrés, au-dessus du texte de chaque jeu. */
@media (max-width: 767px) {
	.page-id-908 #et-main-area .et_pb_column_23,
	.page-id-908 #et-main-area .et_pb_column_24,
	.page-id-908 #et-main-area .et_pb_column_27,
	.page-id-908 #et-main-area .et_pb_column_28 {
		display: block !important;
		width: 64% !important;
		max-width: 240px;
		margin: 0 auto 28px !important;
		aspect-ratio: 300 / 465;
		height: auto !important;
		min-height: 0 !important;
		background-size: contain !important;
		background-position: center !important;
	}
}