/* ====================================================================
   CSS pour le style des widgets Activéquilibre en page d'accueil
   selon un structure graphique en 'editorial layout'
==================================================================== */

/* ====================================================================
   ACTIVÉQUILIBRE — EDITORIAL LAYOUT
   --------------------------------------------------------------------
   Présentations de blocs en 'Layout éditorial', inspiré d'une composition "magazine".

   STRUCTURE GÉNÉRALE
   --------------------------------------------------------------------
   Le layout repose sur 3 types de rangées :

   - Rang-ArrPlan
   - Rang-MedPlan (implémentation future si nécessaire)
   - Rang-1erPlan
   
   Le but étant de donner le sentiment d'avoir une page complète en arrière plan, 
   avec des rangées posées par-dessus sur le plan médian et le 1er plan.
   
   Chaque rangée d'un même plan est simplement numérotée à la fin de son nom dans le HTML afin d'avoir des identifiants uniques
   Et au sein d'une rangée, chaque colonne est référencée en fonction de son type de contenu
   
   Le layout de base est donc construit ainsi:
   
   Editorial-Layout-ymd
		- Rang-ArrPlan1
			Rang-ArrPlan1--Col-Info ¦ Rang-ArrPlan1--Col-C2Act ¦ Rang-ArrPlan1--Col-Img
			
		- Rang-1erPlan1
			Rang-1erPlan1-Col-Img ¦ Rang-1erPlan1-Col-Txt
											 (col ci-dessus contient 2 sous-colonnes =>)   Rang-1erPlan1-Col-Info ¦ Rang-1erPlan1-Col-C2Act
		
		- Rang-ArrPlan2
			Rang-ArrPlan2-Col-Espace ¦ Rang-ArrPlan2-Col-Centr
   
   RESPONSIVE
   --------------------------------------------------------------------
   Sur smartphone, les rangées passent en empilement vertical.
   L'ordre peut être piloté par des classes qu'on attribue à chaque groupe (dans chaque colonne):
   - ymd-editorial-layout__mob-order--1
   - ymd-editorial-layout__mob-order--2
   - etc.
==================================================================== */


/* ====================================================================
   CONTENEUR PRINCIPAL DU LAYOUT
==================================================================== */

.ymd-editorial-layout {
	padding: 0;
	margin: 0;
}


.ymd-editorial-layout,
.ymd-editorial-layout * {
	box-sizing: border-box;
}



/* ====================================================================
   RESET GUTENBERG (CRUCIAL)
==================================================================== */

.ymd-editorial-layout .wp-block-columns,
.ymd-editorial-layout__row {
	--wp--style--block-gap: 0;
	gap: 0;
	column-gap: 0;
	row-gap: 0;
	margin: 0;
	padding: 0;
}

.ymd-editorial-layout__row + .ymd-editorial-layout__row {
	margin-top: 0;
}

.ymd-editorial-layout__row > .wp-block-column,
.ymd-editorial-layout .is-layout-flex > .wp-block-column {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ymd-editorial-layout .is-layout-flex > :not(:first-child) {
	margin-left: 0;
}


/* ====================================================================
   GROUPES
==================================================================== */

.ymd-editorial-layout__group {
	height: 100%;
	min-height: 260px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	margin: 0;
}

.ymd-editorial-layout__group--center-items {
	align-items: center;
}

.ymd-editorial-layout__group--image {
	padding: 0;
}


/* ---------------------------------------------------------------
   Permet la suppression de la hauteur minimum sur les conteneurs 
   ayant la class '.ymd-editorial-layout__no-min-height'
--------------------------------------------------------------- */
.ymd-editorial-layout__group-no-min-height {
	min-height: 0 !important;
}

/* ====================================================================
   IMAGES
==================================================================== */

.ymd-editorial-layout__img,
.ymd-editorial-layout__img a,
.ymd-editorial-layout__group--image figure {
	display: block;
	height: 100%;
	margin: 0;
	line-height: 0;
}

.ymd-editorial-layout__img img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;

	object-fit: cover;
	object-position: center;

	border: 0;
}


/* ====================================================================
   🎯 RANGÉE 1er PLAN
   → Gutenberg gère les largeurs et alignements
   → CSS gère uniquement le stretch et cohérence hauteur
==================================================================== */

.ymd-editorial-layout__row--1erPlan1 {
	display: flex;
	align-items: stretch;
}

/* colonnes prennent toute la hauteur */
.ymd-editorial-layout__row--1erPlan1 > .wp-block-column {
	display: flex;
	align-self: stretch;
	min-width: 0;
}

/* colonne texte */
.ymd-editorial-layout__row--1erPlan1 > .ymd-editorial-layout__col--Txt {
	display: flex;
	min-width: 0;
}

/* container interne */
.ymd-editorial-layout__row--1erPlan1 > .ymd-editorial-layout__col--Txt > .wp-block-columns {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
}

/* sous-colonnes */
.ymd-editorial-layout__row--1erPlan1 > .ymd-editorial-layout__col--Txt > .wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* groupes remplissent */
.ymd-editorial-layout__row--1erPlan1 .ymd-editorial-layout__group {
	height: 100%;
}

/* -----------------------------------------------------------------------------------------------
	CENTRAGE VERTICAL POUR CERTAINS BLOCS
	les groupes ayant cette classe verront leur contenu centré
	
	Attention: avec flex-direction: column cela 'verticalise' la direction. 
		           Donc le justify-content se fait en hauteur, et align-items se fait en largeur.
	               avec flex-direction: row c'est l'inverse.
------------------------------------------------------------------------------------------------*/

.ymd-editorial-layout__group--vertcenter {
	display: flex;
	flex-direction: column;
	justify-content: center;   
	height: 100%;
}

/* ====================================================================
   TYPOGRAPHIE
==================================================================== */

/* unités:   vw = viewport width    cqw = container query width  (largeur du conteneur)   */

.ymd-editorial-layout__title {
	margin-top: 0;
	margin-bottom: 0.55em;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.ymd-editorial-layout__title--big {
	font-size: clamp(2.2rem, 2.8vw, 3.6rem);
	max-width: clamp(8ch, 75cqw, 21ch);
}

.ymd-editorial-layout__title--medium {
	font-size: clamp(1.8rem, 2.1vw, 2.8rem);
	max-width: clamp(7ch, 72cqw, 20ch);
}


.ymd-editorial-layout__text {
	margin-top: 0;
}

.ymd-editorial-layout__text--small {
	font-size: clamp(.95rem, 1.02vw, 1.08rem);
	line-height: 1.5;
	max-width: clamp(22ch, 88cqw, 72ch);
	margin-bottom: .8em;
	text-wrap: pretty;
}

.ymd-editorial-layout__text--medium {
	font-size: .98rem;
	line-height: 1.45;
	opacity: .95;
	max-width: clamp(18ch, 84cqw, 62ch);
	margin-bottom: 1.2em;
	text-wrap: pretty;
}


/* ============================================
   Ligne traversante horizontalement sur blocs
   Ancrée au titre, pas à la rangée
============================================ */

/* 
   Déclenchement explicite avec l'ajout de la class :
		ymd-editorial-layout__horizline
   qui doit être ajoutée au conteneur parent (en principe le 'groupe') 
   du titre de colonne auquel sera lié la ligne traversante
   
   Ce qui donne donc dans la vue en liste Gutenberg (à gauche de l'éditeur)
		Rang-ArrPlan1--Col-Info
			Groupe (ici ajouter la class:  ymd-editorial-layout__horizline)
				Titre (sur lequel on prend la référence pour la position du départ de ligne)
				Ligne-horiz   (bloc  <hr>, qui est passé en display : none, par le css pour le masquer systématiquement)

   Principe :
   - le bloc <hr> reste utile comme repère dans l'éditeur Gutenberg
   - sur le front, le <hr> est masqué
   - la vraie ligne est créée via le titre, avec  ::after
*/

/* Rendu front : on masque le <hr> de construction */
.ymd-editorial-layout__horizline > hr {
	display: none;
}


/* Autorise la ligne à dépasser du bloc */
.ymd-editorial-layout__horizline {
	overflow: visible;
}

/* Le titre devient l’ancre de la ligne */
.ymd-editorial-layout__horizline .ymd-editorial-layout__title {
	position: relative;
	z-index: 2;
}


/* Ligne créée depuis le titre */
@media (min-width: 782px) {
	.ymd-editorial-layout__horizline .ymd-editorial-layout__title::after {
		content: "";
		position: absolute;

		/* position verticale relative au titre */
		top: 50%;
		transform: translateY(-50%);

		/* position horizontale du point de départ depuis le bord gauche (left) du conteneur titre
		   100% = bord droit du conteneur du titre, puisqu'on y ajoute le 100% de la largeur
		   si addition => départ plus à droite que le 100%
		   si soustraction => départ plus à gauche, chevauchant le titre 
		   pour rappel:  clamp = pince entre ( minimum, adaptatif, maximum )
		                 vw = proportion de largeur viewport */
		left: calc(100% - clamp(7rem, 18vw, 13rem));

		/* longueur responsive
		   pour rappel:  clamp = pince entre ( minimum, adaptatif, maximum )
		                 vw = proportion de largeur viewport */
		width: clamp(90px, 26vw, 510px);

		/* épaisseur de ligne */
		height: 1.5px;
		pointer-events: none;
		z-index: 1;

		--line-color: #305395;

		background: linear-gradient(
			to right,
			color-mix(in srgb, var(--line-color) 6%, transparent) 0%,
			color-mix(in srgb, var(--line-color) 18%, transparent) 20%,
			color-mix(in srgb, var(--line-color) 58%, transparent) 50%,
			color-mix(in srgb, var(--line-color) 28%, transparent) 76%,
			color-mix(in srgb, var(--line-color) 8%, transparent) 100%
		);

		border-radius: 999px;
	}
}


/* ====================================================================
   BOUTONS
==================================================================== */

.ymd-editorial-layout .wp-block-buttons {
	margin-top: 0.5rem;
}

.ymd-editorial-layout .wp-block-button__link {
	text-decoration: none;
}


/* ====================================================================
   EFFET MAGAZINE PRO
   --------------------------------------------------------------------
   - la rangée 1er plan remonte légèrement sur la rangée du dessus
   - l'image de gauche descend légèrement vers la rangée du dessous
   - rendu plus éditorial / premium
==================================================================== */

/* Le conteneur principal doit laisser voir les débordements */
.ymd-editorial-layout {
	position: relative;
	overflow: visible;
}

/* Chaque rangée reste visible même si un enfant dépasse */
.ymd-editorial-layout__row {
	position: relative;
	overflow: visible;
}


/* --------------------------------------------------
   1er plan : légère remontée sur l'arrière-plan
   --------------------------------------------------
   Valeur plus négative = effet plus marqué
   Exemple :
   - -20px = discret
   - -40px = élégant et visible
   - -70px = effet très magazine
-------------------------------------------------- */
.ymd-editorial-layout__row--1erPlan1 {
	position: relative;
	z-index: 3;
	margin-top: -42px;
}


/* On s'assure que l'image prend bien toute la hauteur visuelle */
.ymd-editorial-layout__row--1erPlan1 
.ymd-editorial-layout__col--Img 
.ymd-editorial-layout__img img {
	min-height: 100%;
}

/* --------------------------------------------------
   Le bloc texte du 1er plan reste au-dessus du fond,
   mais légèrement sous l'image pour conserver la hiérarchie
-------------------------------------------------- */
.ymd-editorial-layout__row--1erPlan1 
.ymd-editorial-layout__col--Txt {
	position: relative;
	z-index: 3;
	box-shadow: 0 16px 34px rgba(21, 43, 66, 0.08);
}

/* --------------------------------------------------
   Rangée d'arrière-plan du dessous :
   on lui laisse de l'air pour recevoir le débordement visuel
-------------------------------------------------- */
.ymd-editorial-layout__row--arrPlan2 {
	position: relative;
	z-index: 1;
}


/* --------------------------------------------------
   Espacement vertical pour la 'respiration'
-------------------------------------------------- */
.ymd-editorial-layout__col--C2Act .ymd-editorial-layout__group,
.ymd-editorial-layout__col--Txt .ymd-editorial-layout__group {
	padding-top: clamp(26px, 3vw, 42px);
	padding-bottom: clamp(26px, 3vw, 42px);
}


/* 	--------------------------------------------
	Bloc espaceur pour rangées de l'editorial layout
	-------------------------------------------- */	
	
/* Base : invisible sur desktop + tablette */
.ymd-editorial-layout__mobilonly-spacer {
	display: none;
	margin: 0 !important;              /* supprime margin-block-start */
	margin-block-start: 0 !important;  /* sécurité */
	margin-block-end: 0 !important;
	padding: 0;                        /* évite tout espace parasite */
}

/* Visible uniquement sur mobile */
@media (max-width: 781px) {

	.ymd-editorial-layout__mobilonly-spacer {
		display: block;

		/* on garde ton height Gutenberg */
		width: 100%;

		/* sécurité anti-styles WP */
		margin: 0 !important;
		margin-block-start: 0 !important;
		margin-block-end: 0 !important;
	}
}


/* ====================================================================
   RESPONSIVE INTELLIGENT
==================================================================== */

/* ------------------------------------------------------------------------------------------------------------------
   l'ordre d'empilement de chaque colonne (pour chaque rangée), se gère avec des class  'ymd-editorial-layout__mob-order--X'
   à la fin desquelles X est un chiffre donnant l'ordre de haut en bas sur smartphone.
   Une classe doit être attribuée à chaque élément colonne (!!!singulier, pas colloneS) dans Gutenberg ou le html
   On ne peut toutefois pas mixer les colonnes de rangées différentes entre-elle.
   
   p.ex:      rangée 1  mob-order    1   3   2
              spacer (noComputer-ymd noTablett-ymd)
		      rangée 2  mob-order    1   2   3

   devient sur mobile:  1
						2
						3
						spacer
						1
						2
						3
						
------------------------------------------------------------------------------------------------------------------ */

	/* 	--------------------------------------------
	Bloc espaceur pour rangées de l'editorial layout
	-------------------------------------------- */	
	
	/* Mobilonly spacer : invisible sur desktop + tablette */
	.ymd-editorial-layout__mobilonly-spacer {
		display: none;
		margin: 0 !important;              /* supprime margin-block-start */
		margin-block-start: 0 !important;  /* sécurité */
		margin-block-end: 0 !important;
		padding: 0;                        /* évite tout espace parasite */
	}

@media (max-width: 781px) {

	 /* Mobilonly spacer visible uniquement sur mobile */ 
	.ymd-editorial-layout__mobilonly-spacer {
		display: block; /* on garde ton height Gutenberg */ 
		width: 100%; /* sécurité anti-styles WP */ 
		margin: 0 !important; 
		margin-block-start: 0 !important; 
		margin-block-end: 0 !important; 
		}
}
	

@media (max-width: 781px) {
	 
	/* ======================================
	   RANGÉES EN PILE
	====================================== */

	.ymd-editorial-layout__row,
	.ymd-editorial-layout__row--1erPlan1,
	.ymd-editorial-layout__row--1erPlan1 > .wp-block-column,
	.ymd-editorial-layout__row--1erPlan1 > .ymd-editorial-layout__col--Txt > .wp-block-columns {
		display: flex;
		flex-direction: column;
	}

	/* ======================================
	   AJUSTEMENTS LAYOUT MOBILE
	====================================== */

	.ymd-editorial-layout__row--1erPlan1 {
		margin-top: 0;
	}

	.ymd-editorial-layout__row--1erPlan1 
	.ymd-editorial-layout__col--Img 
	.ymd-editorial-layout__img {
		transform: none;
		box-shadow: none;
	}

	.ymd-editorial-layout__row--arrPlan2 {
		min-height: 0;
	}

	/* ======================================
	   GROUPES / ESPACEMENTS
	====================================== */

	.ymd-editorial-layout__group {
		min-height: auto;
		padding-left: clamp(20px, 6vw, 30px) !important;
		padding-right: clamp(20px, 6vw, 30px) !important;
	}

	.ymd-editorial-layout__group--image {
		padding: 0 !important;
	}
	

	/* ======================================
	   IMAGES
	====================================== */

	.ymd-editorial-layout__img,
	.ymd-editorial-layout__img a,
	.ymd-editorial-layout__group--image figure {
		width: 100%;
		height: auto;
	}

	.ymd-editorial-layout__img img {
		display: block;
		width: 100%;
		height: clamp(280px, 62vw, 430px);
		min-height: 0;
		object-fit: cover;
		object-position: center;
	}

	/* ======================================
	   TYPOGRAPHIE
	====================================== */

	.ymd-editorial-layout__title--big {
		font-size: clamp(2rem, 8vw, 2.5rem);
		line-height: 1.05;
		max-width: none;
	}

	.ymd-editorial-layout__title--medium {
		font-size: clamp(1.55rem, 6.7vw, 2rem);
		line-height: 1.08;
		max-width: none;
	}

	.ymd-editorial-layout__text--small,
	.ymd-editorial-layout__text--medium {
		font-size: 1rem;
		line-height: 1.55;
		max-width: none;
		margin-left: auto;
		margin-right: auto;
	}

	/* ======================================
	   CTA
	====================================== */

	.ymd-editorial-layout__group--center-items {
		align-items: stretch;
	}

	.ymd-editorial-layout .wp-block-buttons {
		justify-content: center;
	}

	/* ======================================
	   SOUS-COLONNES EN PILE
	====================================== */

	.ymd-editorial-layout__row--1erPlan1 > .ymd-editorial-layout__col--Txt > .wp-block-columns > .wp-block-column {
		width: 100% !important;
		flex-basis: auto !important;
	}

	/* ==============================================================================================
	   ORDRES MOBILES
	   (en général 3-4 class suffisent puisque c'est l'ordre des colonnes au sein de chaque rangée
	    mais ici on a déjà codé avec un peu de marge pour des mises en pages plus complexes à venir)
	============================================================================================== */

	.ymd-editorial-layout__mob-order--1 { order: 1; }
	.ymd-editorial-layout__mob-order--2 { order: 2; }
	.ymd-editorial-layout__mob-order--3 { order: 3; }
	.ymd-editorial-layout__mob-order--4 { order: 4; }
	.ymd-editorial-layout__mob-order--5 { order: 5; }
	.ymd-editorial-layout__mob-order--6 { order: 6; }
	.ymd-editorial-layout__mob-order--7 { order: 7; }
	.ymd-editorial-layout__mob-order--8 { order: 8; }
	.ymd-editorial-layout__mob-order--9 { order: 9; }
}