/*==============================================================
  Styles personnalisés ymd
  - Boutons de l'éditeur Gutenberg / Search / WPForms
  - Formes d'images personnalisées
  - Blockquotes personnalisés
  - Blocs de détails pour politique de confidentialité
==============================================================*/



/* ===========================================================
   Variables fonctionnelles propres aux blocs YMD
   -----------------------------------------------------------
   Les couleurs de charte du site sont définies dans style.css :
   --ymd-color-primary
   --ymd-color-primary-dark
   --ymd-color-primary-light
   --ymd-grad--medium-start / end
   --ymd-grad--light-start / end
   --ymd-grad--strong-start / end
   --ymd-grad--pale-start / end
=========================================================== */

:root {

	/* Couleurs neutres */
	--ymd-color-white: #ffffff;
	--ymd-color-border-soft: #ccc;
	--ymd-color-neutral-hover: #757575;

	/* Ombres */
	--ymd-shadow-button: 0 5px 10px rgba(105,105,105,.51);
	--ymd-shadow-button-hover: 0 2px 6px rgba(16,24,40,.10);
	--ymd-shadow-quote: 1px 1px 3px 3px var(--ymd-color-border-soft);
	--ymd-shadow-widget: 0 10px 30px rgba(16,24,40,.08);
	--ymd-shadow-widget-hover: 0 14px 34px rgba(16,24,40,.11);
	--ymd-shadow-image: 0 10px 24px rgba(16,24,40,.10);
	--ymd-shadow-sticky-cta: 0 -4px 18px rgba(0, 0, 0, 0.16);

	/* Boutons */
	--ymd-button-bg: var(--ymd-color-primary);
	--ymd-button-bg-hover: var(--ymd-color-neutral-hover);
	--ymd-button-text: var(--ymd-color-white);
	--ymd-button-radius: 5px;

	/* Citations */
	--ymd-quote-bg: var(--ymd-color-primary);
	--ymd-quote-text: var(--ymd-color-white);
	--ymd-quote-border: var(--ymd-color-border-soft);

	/* Widgets */
	--ymd-widg-fond-pale-start: var(--ymd-grad--pale-start);
	--ymd-widg-fond-pale-end: var(--ymd-grad--pale-end);
	--ymd-widg-fond-pale-border: color-mix(in srgb, var(--ymd-color-primary) 18%, transparent);

	--ymd-widg-fond-light-start: var(--ymd-grad--light-start);
	--ymd-widg-fond-light-end: var(--ymd-grad--light-end);
	--ymd-widg-fond-light-alt-end: var(--ymd-grad--strong-end);

	--ymd-widg-fond-medium-start: var(--ymd-grad--medium-start);
	--ymd-widg-fond-medium-end: var(--ymd-grad--medium-end);
	--ymd-widg-fond-medium-border: color-mix(in srgb, var(--ymd-color-primary) 18%, transparent);

	--ymd-widg-fond-strong-start: var(--ymd-grad--strong-start);
	--ymd-widg-fond-strong-end: var(--ymd-grad--strong-end);
	--ymd-widg-fond-strong-border: color-mix(in srgb, var(--ymd-color-primary) 18%, transparent);
	

	/* Sommaire / onglets */
	--ymd-sommaire-pill-bg: var(--ymd-grad--medium-end);
	--ymd-sommaire-pill-bg-hover: var(--ymd-color-primary-light);
	--ymd-sommaire-pill-text: var(--ymd-color-primary-dark);
	--ymd-sommaire-panel-bg: var(--ymd-grad--medium-start);

	/* CTA mobile sticky */
	--ymd-mobile-cta-bg: var(--ymd-color-white);
}



/*==============================================================
  BASE COMMUNE DES BOUTONS YMD
  S'applique à :
  - bouton de l'éditeur Gutenberg (link interne)
  - bouton du bloc Search
  - bouton WPForms
============================================================== */

.wp-block-button.is-style-ymd-button .wp-block-button__link,
.ymd-site-footer .wp-block-search__button,
.wpforms-submit {

	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	min-height: 2.4em;
	padding: 0.55em 0.9em;

	border: 0;
	border-radius: var(--ymd-button-radius);
	background-color: var(--ymd-button-bg);
	/* box-shadow: 0 20px 30px rgba(16,24,40,.12); */
	box-shadow: var(--ymd-shadow-button);
		
	color: var(--ymd-button-text);
	font-family: Tahoma, sans-serif;

	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;

	text-decoration: none;
	cursor: pointer;

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		background-color .2s ease,
		color .2s ease;
}


/* =====================================================
  Conteneur bouton de l'éditeur Gutenberg
===================================================== */

.wp-block-button.is-style-ymd-button {
	display: inline-block;
	vertical-align: middle;
}


/* =====================================================
  États hover / focus (communs)
===================================================== */

.wp-block-button.is-style-ymd-button .wp-block-button__link:hover,
.wp-block-button.is-style-ymd-button .wp-block-button__link:focus,
.ymd-site-footer .wp-block-search__button:hover,
.ymd-site-footer .wp-block-search__button:focus,
.wpforms-submit:hover,
.wpforms-submit:focus {

	background-color: var(--ymd-button-bg-hover);
	color: var(--ymd-button-text);

	box-shadow: var(--ymd-shadow-button-hover);

	text-decoration: none;
	transform: translateY(-1px);
}


/* =====================================================
  Accessibilité : réduire les animations si demandé
===================================================== */

@media (prefers-reduced-motion: reduce) {

	.wp-block-button.is-style-ymd-button .wp-block-button__link,
	.ymd-site-footer .wp-block-search__button,
	.wpforms-submit {
		transition: none;
	}

	.wp-block-button.is-style-ymd-button .wp-block-button__link:hover,
	.ymd-site-footer .wp-block-search__button:hover,
	.wpforms-submit:hover {
		transform: none;
	}

}


/* =====================================================
  Responsive boutons de l'éditeur Gutenberg
===================================================== */

@media only screen and (max-width: 480px) {

	.wp-block-button.is-style-ymd-button {
		width: 90%;
	}

	.wp-block-button.is-style-ymd-button .wp-block-button__link {
		width: 100%;
		font-size: 1.05em;
	}

}


/* =====================================================
  Formes d'images personnalisées ymd
===================================================== */

.wp-block-image.is-style-CoinsArrondis-ymd img,
.wp-block-post-featured-image.is-style-CoinsArrondis-ymd img {
	border-radius: 0.5em !important;
	overflow: hidden !important;
}

.wp-block-image.is-style-DiaguDescente-ymd img,
.wp-block-post-featured-image.is-style-DiaguDescente-ymd img {
	border-radius: 0.5em !important;
	clip-path: polygon(0 0, 0 88%, 100% 100%, 100% 12%) !important;
}

.wp-block-image.is-style-DiaguMontante-ymd img,
.wp-block-post-featured-image.is-style-DiaguMontante-ymd img {
	border-radius: 0.5em !important;
	clip-path: polygon(0 12%, 0 100%, 100% 88%, 100% 0) !important;
}


/* =====================================================
  Blockquotes personnalisés ymd
===================================================== */


/* citation principale */
.wp-block-quote.is-style-ymd-quote {

	position: relative;

	margin: 0.25em 0;
	padding: 0.45em 15px 0.75em;

	border: 1px solid var(--ymd-quote-border);
	border-radius: 6px;

	box-shadow: var(--ymd-shadow-quote);

	background: var(--ymd-quote-bg);

	color: var(--ymd-quote-text);

	font-family: Satisfy, cursive;
	font-size: 1.4rem;

	line-height: 1.45;
	text-align: center;
}


/* source de la citation */
.wp-block-quote.is-style-ymd-quote > cite {

	display: block;

	margin-top: 5px;
	margin-left: 15px;

	color: var(--ymd-quote-text);

	font-family: Roboto, sans-serif;
	font-size: 0.9rem;

	font-style: normal;
	text-align: left;
}

.wp-block-quote.is-style-ymd-quote cite::before {
	content: "\2014 \2009";
}


/* =====================================================
  Titres H1 de publications
===================================================== */

/* PC */
.wp-block-heading.is-style-ymd-titre-publication {
	margin-top: clamp(40px, 5vw, 70px);
}

/* Tablette */
@media (max-width: 1024px) {
	.wp-block-heading.is-style-ymd-titre-publication {
		margin-top: 20px;
	}
}

/* Smartphone */
@media (max-width: 768px) {
	.wp-block-heading.is-style-ymd-titre-publication {
		margin-top: 8px;
	}
}


/* =====================================================
   BASE DE WIDGETS ymd
===================================================== */

.ymd-widg {

	position: relative;

	margin-block: clamp(1.25rem, 2.2vw, 2.2rem);
	padding: clamp(1.2rem, 2.2vw, 2rem);

	/* border-radius: 22px; */   /* pour avoir des coins arrondis */

	box-shadow: var(--ymd-shadow-widget);

	overflow: hidden;
	isolation: isolate;

	opacity: 1;

	transition:
		transform .35s cubic-bezier(.22,.61,.36,1),
		box-shadow .35s cubic-bezier(.22,.61,.36,1);
}


.ymd-widg:hover,
.ymd-widg:focus-within {

	transform: translateY(-2px);

	box-shadow: var(--ymd-shadow-widget-hover);

}


.ymd-widg > :first-child {
	margin-top: 0;
}

.ymd-widg > :last-child {
	margin-bottom: 0;
}

.ymd-widg .wp-block-heading {
	margin-bottom: .9rem;
}



/* =====================================================
   Effet lumineux optionnel
   Ajouter la classe :
   .ymd-widg--lightfx
===================================================== */

.ymd-widg--lightfx::before {

	content: "";

	position: absolute;
	inset: -20%;

	z-index: -1;

	pointer-events: none;

	background:

		radial-gradient(
			circle at 20% 30%,
			var(--ymd-color-primary-light),
			transparent 35%
		),

		radial-gradient(
			circle at 80% 70%,
			var(--ymd-color-primary-light),
			transparent 1%
		);

	transform: scale(1);

	transition: transform 12s ease-in-out;
}


.ymd-widg--lightfx:hover::before {

	transform: scale(1.08);

}



/* =====================================================
   LARGEURS SPÉCIALES DE WIDGETS ymd
===================================================== */

/* identique à la 'largeur du contenu' réglée dans l'éditeur WP - Styles - Mise en page */
.ymd-widg--content-width {

	width: var(--wp--style--global--content-size) !important;
	max-width: var(--wp--style--global--content-size) !important;

	margin-left: 50% !important;
	margin-right: 0 !important;

	translate: -50% 0;
}

/* sur Tablette et smartphone */
@media (max-width: 1200px) {

	.ymd-widg--content-width {

		width: 100% !important;
		max-width: 100% !important;

		margin-left: 0 !important;
		margin-right: 0 !important;

		translate: none;
	}
}




/* identique à la 'grande largeur' du contenu réglée dans l'éditeur WP - Styles - Mise en page */
.ymd-widg--central-col-width {

	width: var(--wp--style--global--wide-size) !important;
	max-width: var(--wp--style--global--wide-size) !important;

	margin-left: 50% !important;
	margin-right: 0 !important;

	translate: -50% 0;
}


/* sur Tablette et smartphone */
@media (max-width: 1200px) {

	.ymd-widg--central-col-width {

		width: 100% !important;
		max-width: 100% !important;

		margin-left: 0 !important;
		margin-right: 0 !important;

		translate: none;
	}
}


/* -----------------------------------------------------
   Pleine largeur de l’écran
   Le widget sort de la colonne Gutenberg et occupe
   toute la largeur du viewport.

----------------------------------------------------- */

.ymd-widg--full-screen-width {
	box-sizing: border-box;

	position: relative;
	left: 50%;

	width: 100dvw !important;
	max-width: 100dvw !important;

	margin-left: 0 !important;
	margin-right: 0 !important;

	translate: -50% 0 !important;
}

@supports not (width: 100dvw) {
	.ymd-widg--full-screen-width {
		width: 100vw !important;
		max-width: 100vw !important;
	}
}

/* Largeur plein écran 'retenue' à la largeur de colonne centrale pour les ymd-cartes-listes */
.ymd-widg--full-screen-width.ymd-cartes-listes {
	box-sizing: border-box;
	padding-left: max(1.25rem, calc(((100vw - var(--wp--style--global--wide-size)) / 2) + 2rem));
	padding-right: max(1.25rem, calc(((100vw - var(--wp--style--global--wide-size)) / 2) + 2rem));
}


/* Largeur plein écran 'retenue' à la largeur de colonne centrale pour les images glissant sous texte */
.ymd-widg--full-screen-width.ymd-image-gliss-sous-texte-depGch {
	box-sizing: border-box;
	padding-left: max(1.25rem, calc(((100vw - var(--wp--style--global--wide-size)) / 2) + 2rem)) !important;
	padding-right: max(1.25rem, calc(((100vw - var(--wp--style--global--wide-size)) / 2) + 2rem)) !important;
}


/* =====================================================
   FONDS DE WIDGETS ymd
===================================================== */

/* Comme en météo, l'angle 0° part du bas pour aller au Nord, 90° => Est, 180° => Sud, 270° = Ouest */

.ymd-widg--fond-light-Nord {
	background: linear-gradient(
		0deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-light-start) 0%,
		var(--ymd-widg-fond-light-end) 100%
	);
}

.ymd-widg--fond-medium-Nord {
	background: linear-gradient(
		0deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-medium-start) 0%,
		var(--ymd-widg-fond-medium-end) 100%
	);

	border: 1px solid var(--ymd-widg-fond-medium-border);
}

.ymd-widg--fond-light-NEst {
	background: linear-gradient(
		10deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-light-start) 0%,
		/* var(--ymd-widg-fond-light-end) 100% */
		var(--ymd-widg-fond-light-alt-end) 100%
	);
}

.ymd-widg--fond-medium-NEst {
	background: linear-gradient(
		10deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-medium-start) 0%,
		var(--ymd-widg-fond-medium-end) 100%
	);

	border: 1px solid var(--ymd-widg-fond-medium-border);
}

.ymd-widg--fond-light-NOuest {
	background: linear-gradient(
		350deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-light-start) 0%,
		var(--ymd-widg-fond-light-end) 100%
	);
}

.ymd-widg--fond-medium-NOuest {
	background: linear-gradient(
		350deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-medium-start) 0%,
		var(--ymd-widg-fond-medium-end) 100%
	);

	border: 1px solid var(--ymd-widg-fond-medium-border);
}

.ymd-widg--fond-light-Sud {
	background: linear-gradient(
		180deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-light-start) 0%,
		var(--ymd-widg-fond-light-end) 100%
	);
}

.ymd-widg--fond-medium-Sud {
	background: linear-gradient(
		180deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-medium-start) 0%,
		var(--ymd-widg-fond-medium-end) 100%
	);

	border: 1px solid var(--ymd-widg-fond-medium-border);
}

.ymd-widg--fond-light-SEst {
	background: linear-gradient(
		190deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-light-start) 0%,
		var(--ymd-widg-fond-light-end) 100%
	);
}

.ymd-widg--fond-medium-SEst {
	background: linear-gradient(
		190deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-medium-start) 0%,
		var(--ymd-widg-fond-medium-end) 100%
	);

	border: 1px solid var(--ymd-widg-fond-medium-border);
}

.ymd-widg--fond-light-SOuest {
	background: linear-gradient(
		170deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-light-start) 0%,
		var(--ymd-widg-fond-light-end) 100%
	);
}

.ymd-widg--fond-medium-SOuest {
	background: linear-gradient(
		170deg,     /* c.f. rem. en en-tête du bloc */  
		var(--ymd-widg-fond-medium-start) 0%,
		var(--ymd-widg-fond-medium-end) 100%
	);

	border: 1px solid var(--ymd-widg-fond-medium-border);
}


/* =====================================================
   WIDGETS TYPES
===================================================== */

/* ----------------------
   Widget call to action
-----------------------*/

.ymd-widg-type--call2act {

	text-align:center;

	padding-block: clamp(
		3rem,
		5vw,
		5rem
	);

}

.ymd-widg-type--call2act .wp-block-buttons {

	justify-content:center;
	margin-top:1rem;

}

.ymd-widg-type--call2act .wp-block-button {

	width:min(100%,53ch);

}

.ymd-widg-type--call2act .wp-block-button__link {

	display:inline-flex;

	justify-content:center;
	align-items:center;

	width:100%;

	min-height:4.2em;

	padding:.9em 1.2em;

	text-align:center;

	font-size:clamp(
		1rem,
		1.15vw,
		1.4rem
	);

	font-weight:700;
	line-height:1.25;

}


/* ----------------------
   Widget info
-----------------------*/

.ymd-widg-type--info {
	text-align: center;
}

.ymd-widg-type--info .wp-block-heading {
	margin-bottom: 1rem;
}

.ymd-widg-type--info p {
	max-width: 68ch;
	margin-inline: auto;
	line-height: 1.65;
}

.ymd-widg-type--info p + p {
	margin-top: 0.7rem;
}

.ymd-widg-type--info .wp-block-buttons {
	justify-content: center;
	margin-top: 1.2rem;
}

.ymd-widg-type--info .wp-block-button {
	width: min(100%, 53ch);
}

.ymd-widg-type--info .wp-block-button__link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 3em;
	padding: 0.85em 1.2em;
	text-align: center;
	font-size: clamp(1rem, 1.05vw, 1.25rem);
	font-weight: 700;
	line-height: 1.3;
}


/* ----------------------
   Widget Image + Texte
-----------------------*/

.ymd-widg-type--imgTxt .ymd-widg-imgTxt__cols {
	gap: clamp(1rem, 2.4vw, 2rem);
	align-items: center;
}

.ymd-widg-type--imgTxt .ymd-widg-imgTxt__img {
	margin-bottom: 0;
}

.ymd-widg-type--imgTxt .ymd-widg-imgTxt__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	box-shadow: var(--ymd-shadow-image);
}

.ymd-widg-type--imgTxt .ymd-widg-imgTxt__col-txt p {
	line-height: 1.65;
}

.ymd-widg-type--imgTxt .ymd-widg-imgTxt__col-txt p + p {
	margin-top: 0.75rem;
}

/* =====================================================
   Alignement image sur widget Image + Texte
===================================================== */

/* Sur PC et tablette, image à gauche ou droite */
@media (min-width: 782px) {

	.ymd-widg--align-img-left .ymd-widg-imgTxt__cols {
		flex-direction: row;
	}

	.ymd-widg--align-img-right .ymd-widg-imgTxt__cols {
		flex-direction: row-reverse;
	}
}


/* Sur smartphone (image empilée entre titre et texte) */
@media (max-width: 781px) {

	.ymd-widg-type--imgTxt .ymd-widg-imgTxt__cols {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.ymd-widg-type--imgTxt .ymd-widg-imgTxt__col-img,
	.ymd-widg-type--imgTxt .ymd-widg-imgTxt__col-txt {
		width: 100%;
	}
}


/* =====================================================
   WIDGETS : ANIMATIONS
===================================================== */

/* Le JS déclenchant l'animation des widgets est dans fichier ymd-widgets.css */

/*
Ci-dessous réglages globaux ajustables :
- --ymd-widg-fade-duration  = vitesse des fade-in
- --ymd-widg-slide-duration = vitesse des slide-in
- --ymd-widg-fade-up-offset = décalage vertical du fade-up
- --ymd-widg-slide-offset   = décalage horizontal des slide-in
- valeurs pour cubic-bezier =>  (vitesse au début, accélération initiale, comportement en fin, ralentissement final)
*/

:root {
	--ymd-widg-fade-duration: 1.35s;
	--ymd-widg-slide-duration: 2.28s;

	--ymd-widg-fade-up-offset: 32px;
	--ymd-widg-slide-offset: 48px;

	--ymd-widg-ease-organic: cubic-bezier(.16, 1, .3, 1);
}


/* ===============================================================================================================
   UTILITAIRE : coupe le débordement horizontal et restreint les animations dans leur bloc parent
   -----------------------------------------------------
   À placer sur un conteneur parent qui entoure immédiatement un élément animé horizontalement.

   - overflow: clip empêche le contenu déplacé de créer une zone déroulable ;
   - display: flow-root crée un contexte de mise en forme indépendant ;
   - contain: paint garantit que les descendants ne sont pas peints en dehors du parent.

   
   Dans certains cas, l'usage d'un slide-in génère une marge vide sur le côté du site,
   liée au débordement latéral initial du bloc qui doit ensuite slider.
   Pour éviter l'apparition de cette marge, il faut empêcher le conteneur parent du
   bloc qui slide, de tolérer les débordements horizontaux.
   
   P.ex. le bloc 'Editorial Layout de base'  avec css: ymd-editorial-layout
   contient le bloc 'Editorial Layout Rangée 1er plan'  qui a la class   'ymd-widg--anim-slide-in-left'
   
   Le 'Editorial Layout de base' est le bloc parent à qui on doit attribuer la class 'ymd-no-horizontal-overflow'
=============================================================================================================== */

.ymd-no-horizontal-overflow {
	position: relative;
	display: flow-root;

	overflow: clip !important;
	contain: paint;
}


/* Repli pour les navigateurs ne prenant pas en charge overflow: clip */
@supports not (overflow: clip) {

	.ymd-no-horizontal-overflow {
		overflow: hidden !important;
	}

}

/* Le CTA animé remplit exactement son conteneur parent */
.ymd-no-horizontal-overflow > .ymd-widg {
	box-sizing: border-box;

	width: 100% !important;
	max-width: none !important;

	margin-left: 0 !important;
	margin-right: 0 !important;
}



/* -----------------------------------------------------
   Etat initial commun
----------------------------------------------------- */

.ymd-widg--anim-fade-in,
.ymd-widg--anim-fade-up,
.ymd-widg--anim-slide-in-right,
.ymd-widg--anim-slide-in-left {
	opacity: 0;
	will-change: opacity, transform;

	position: relative;
	z-index: 1;
}

/* -----------------------------------------------------
   Fade-in simple
   Départ : même place
   Effet : apparition douce uniquement sur l'opacité
----------------------------------------------------- */

.ymd-widg--anim-fade-in {
	transform: translate3d(0, 0, 0);
	transition:
		opacity var(--ymd-widg-fade-duration) var(--ymd-widg-ease-organic),
		transform var(--ymd-widg-fade-duration) var(--ymd-widg-ease-organic);

	position: relative;
	z-index: 1;
}


/* -----------------------------------------------------
   Fade-up
   Départ : un peu plus bas
   Arrivée : position normale
----------------------------------------------------- */

.ymd-widg--anim-fade-up {
	transform: translate3d(0, var(--ymd-widg-fade-up-offset), 0);
	transition:
		opacity var(--ymd-widg-fade-duration) var(--ymd-widg-ease-organic),
		transform var(--ymd-widg-fade-duration) var(--ymd-widg-ease-organic);

	position: relative;
	z-index: 1;
}



/* -----------------------------------------------------
   Slide-in-right
   Départ : un peu à gauche
   Arrivée : position normale
----------------------------------------------------- */

.ymd-widg--anim-slide-in-right {
	transform: translate3d(calc(var(--ymd-widg-slide-offset) * -1), 0, 0);
	transition:
		opacity var(--ymd-widg-slide-duration) var(--ymd-widg-ease-organic),
		transform var(--ymd-widg-slide-duration) var(--ymd-widg-ease-organic);

	position: relative;
	z-index: 1;
}



/* -----------------------------------------------------
   Slide-in-left
   Départ : un peu à droite
   Arrivée : position normale
----------------------------------------------------- */

.ymd-widg--anim-slide-in-left {
	transform: translate3d(var(--ymd-widg-slide-offset), 0, 0);
	transition:
		opacity var(--ymd-widg-slide-duration) var(--ymd-widg-ease-organic),
		transform var(--ymd-widg-slide-duration) var(--ymd-widg-ease-organic);

	position: relative;
	z-index: 1;
}



/* -----------------------------------------------------
   Etat visible
   Arrivée : opacité normale + position normale
----------------------------------------------------- */

.ymd-widg.is-inview.ymd-widg--anim-fade-in,
.ymd-widg.is-inview.ymd-widg--anim-fade-up,
.ymd-widg.is-inview.ymd-widg--anim-slide-in-right,
.ymd-widg.is-inview.ymd-widg--anim-slide-in-left,
.is-inview.ymd-widg--anim-fade-in,
.is-inview.ymd-widg--anim-fade-up,
.is-inview.ymd-widg--anim-slide-in-right,
.is-inview.ymd-widg--anim-slide-in-left {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}


/* -----------------------------------------------------
   Accessibilité
----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ymd-widg--anim-fade-in,
	.ymd-widg--anim-fade-up,
	.ymd-widg--anim-slide-in-right,
	.ymd-widg--anim-slide-in-left {
		opacity: 1;
		transform: none;
		transition: none;
	}
}



/* ==================================================================================
   Bandeau Call-to-Action -> CTA mobile en bas d'écran déclenché par scroll
   Activé seulement si un bloc (normalement composition 'Boutons CTA bas d'écran')
   de la page possède la class :      .ymd-mobile-botm-sticky-cta
================================================================================== */


/* Bandeau sticky caché en front uniquement, visible ds éditeur */
.wp-block-columns.ymd-mobile-botm-sticky-cta {
	display: none;
}

/* Réaffiché dans l'éditeur */
.editor-styles-wrapper .wp-block-columns.ymd-mobile-botm-sticky-cta {
	display: flex !important;
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	position: relative !important;
}


@media (max-width: 781px) {
	body.ymd-has-mobile-botm-sticky-cta {
		padding-bottom: 76px;
	}

	.wp-block-columns.ymd-mobile-botm-sticky-cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;    /* fixe en bas d'écran */
		z-index: 9999;

		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;

		margin: 0 !important;
		
		/* Marge intérieure entre les boutons et la bordure du bandeau, partant du haut, gauche, bas (calculé), droit */
		padding: 5px 10px calc(5px + env(safe-area-inset-bottom)) 10px !important;

		background: var(--ymd-mobile-cta-bg);
		box-shadow: var(--ymd-shadow-sticky-cta);

		opacity: 0;
		transform: translateY(100%);
		pointer-events: none;

		transition: opacity 180ms ease, transform 180ms ease;
	}

	.wp-block-columns.ymd-mobile-botm-sticky-cta.is-visible {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.wp-block-columns.ymd-mobile-botm-sticky-cta > .wp-block-column {
		flex-basis: 50% !important;
		flex-grow: 1 !important;
		margin: 0 !important;
	}

	.wp-block-columns.ymd-mobile-botm-sticky-cta .wp-block-buttons {
		width: 100%;
		justify-content: center;
	}

	.wp-block-columns.ymd-mobile-botm-sticky-cta .wp-block-button {
		width: auto;
	}

	.wp-block-columns.ymd-mobile-botm-sticky-cta .wp-block-button__link {
		width: auto;
		text-align: center;
		white-space: nowrap;
	}
}


/* =============================================================
   SOMMAIRE ARTICLE - ONGLET FLEX AVEC BLOCS DETAILS NATIF WP
============================================================= */

/* -------------------------------------------------------------------------------------- */
/* Pilules liens avec section et sous-section                                             */
/* penser à régler aussi pilules en lien direct sans sous-section, plus bas dans le code! */
/* -------------------------------------------------------------------------------------- */

.ymd-sommaire-onglets-flex {
	margin-block: 2rem;
}

.ymd-sommaire-onglets-flex__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-start;
}

.ymd-sommaire-onglets-details {
	margin: 0;
}

/* Bouton pilule */
.ymd-sommaire-onglets-details summary {
	list-style: none;
	cursor: pointer;

	display: inline-flex;
	align-items: center;
	gap: 0.45rem;

	padding: 0.75rem 1.1rem;
	border-radius: 10px;

	background: var(--ymd-sommaire-pill-bg);
	color: var(--ymd-sommaire-pill-text);

	font-weight: 600;
	line-height: 1.25;
}

.ymd-sommaire-onglets-details summary::-webkit-details-marker {
	display: none;
}

.ymd-sommaire-onglets-details summary::marker {
	content: "";
}

.ymd-sommaire-onglets-details summary::after {
	content: "▾";
	font-size: 0.95em;
	transition: transform 0.2s ease;
}

.ymd-sommaire-onglets-details[open] summary::after {
	transform: rotate(180deg);
}

/* Contenu déroulé sous la pilule */
.ymd-sommaire-onglets-details[open] {
	flex-basis: 100%;
}

.ymd-sommaire-onglets-details > *:not(summary) {
	margin-top: 0.65rem;
	padding: 0.85rem 1rem;
	border-radius: 1rem;
	background: var(--ymd-sommaire-panel-bg);
}

.ymd-sommaire-onglets-details ul {
	margin: 0;
	padding-left: 1.2rem;
}

.ymd-sommaire-onglets-details li {
	margin-bottom: 0.35rem;
}

.ymd-sommaire-onglets-details a {
	text-decoration: none;
}

.ymd-sommaire-onglets-details a:hover {
	text-decoration: underline;
}


/* ------------------------------------------- */
/* Pilules liens directs, sans sous-section    */
/* ------------------------------------------- */

.ymd-sommaire-pill {
	margin: 0;
}

.ymd-sommaire-pill a {
	display: inline-flex;
	align-items: center;

	padding: 0.75rem 1.1rem;

	border-radius: 10px;

	background: var(--ymd-sommaire-pill-bg);
	color: var(--ymd-sommaire-pill-text);

	font-weight: 600;
	line-height: 1.25;

	text-decoration: none;

	transition: background-color 0.25s ease;
}

.ymd-sommaire-pill a:hover {
	background: var(--ymd-sommaire-pill-bg-hover);
	text-decoration: none;
}



/* ========================================================
   IMAGE À DROITE DU TEXTE - GLISSANT SOUS TEXTE DU BAS
========================================================= */


/* Conteneur principal */
.ymd-image-gliss-sous-texte-depGch {
	position: relative;
	box-sizing: border-box;
	padding-left: max(1.25rem, calc((100vw - var(--wp--style--global--wide-size)) / 2 + 2rem));
	padding-right: max(1.25rem, calc((100vw - var(--wp--style--global--wide-size)) / 2 + 2rem));
}

/* Texte haut : colonne gauche virtuelle */
.ymd-texte-haut-G {
	width: calc(100% - min(42%, 600px) - clamp(2rem, 5vw, 4rem));
	max-width: 720px;
}

/* Image indépendante à droite */
.ymd-image-glissante-D {
	position: sticky;
	top: 7rem;
	float: right;
	width: min(42%, 600px);
	margin: 0 0 2rem clamp(2rem, 5vw, 4rem);
	z-index: 3;

	transform-origin: top right;
	will-change: transform, opacity;
}

.ymd-image-glissante-D img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
}

/* Bloc texte pleine largeur avec image dessous */
.ymd-texte-image-glissee-dessous {
	clear: both;
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	padding: clamp(2rem, 5vw, 4rem);
	/* margin-top: clamp(2rem, 5vw, 4rem); */
	min-height: 360px;
}

/* Image en fond, invisible au départ puis pilotée par JS */
.ymd-texte-image-glissee-dessous::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("https://preprod.activequilibre.ch/wp-content/uploads/2021/10/Massage-Nuque.jpg");
	background-size: cover;
	background-position: center 30%;
	opacity: var(--ymd-bg-opacity, 0);
	pointer-events: none;
}

/* Voile blanc, invisible au départ puis piloté par JS */
.ymd-texte-image-glissee-dessous::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255, 255, 255, var(--ymd-voile-opacity, 0));
	pointer-events: none;
}

/* Texte au-dessus du fond */
.ymd-texte-image-glissee-dessous > * {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}


.ymd-image-glissante-D.wp-block-image {
	display: block;
	clear: none;
	text-align: center;

	position: sticky;
	top: 7rem;
	float: right;

	width: min(42%, 600px);
	margin: 0 0 2rem clamp(2rem, 5vw, 4rem) !important;

	z-index: 3;
	transform-origin: top right;
	will-change: transform, opacity;
}


/* Mobile : pas d'animation */
@media (max-width: 781px) {
	.ymd-image-glissante-D.wp-block-image {
		position: static;
		float: none;
		width: 100%;
		margin: 0 0 2rem 0 !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.ymd-texte-haut-G {
		width: 100%;
		max-width: none;
	}

	.ymd-texte-image-glissee-dessous {
		clear: none;
		padding: 2rem 1.25rem;
		min-height: auto;
	}

	/* Sur mobile, l'image #2 est visible directement,
	   sans animation JS */
	.ymd-texte-image-glissee-dessous::before {
		opacity: 0.45;
	}

	.ymd-texte-image-glissee-dessous::after {
		background: rgba(255,255,255,0.45);
	}
}




/* ========================================================
   BLOCS DÉTAILS - POLITIQUE DE CONFIDENTIALITÉ
========================================================= */

.ymd-detail-bloc-pol-confid {
    margin-top: var(--wp--preset--spacing--40);
}

.ymd-detail-bloc-pol-confid > summary {
    cursor: pointer;
    font-weight: 600;
}

.ymd-detail-bloc-pol-confid[open] > summary {
    margin-bottom: 1.2rem;
}

/* Tous les blocs Gutenberg à l'intérieur */

.ymd-detail-bloc-pol-confid > :not(summary) {
    padding-left: 3rem;
}

/* Espacement entre les blocs */

.ymd-detail-bloc-pol-confid .wp-block-paragraph,
.ymd-detail-bloc-pol-confid .wp-block-list,
.ymd-detail-bloc-pol-confid .wp-block-columns,
.ymd-detail-bloc-pol-confid .wp-block-group,
.ymd-detail-bloc-pol-confid .wp-block-image {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--30);
}

/* Les listes restent alignées avec les paragraphes */

.ymd-detail-bloc-pol-confid ul,
.ymd-detail-bloc-pol-confid ol {
    padding-left: 1.5rem;
}