/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://isaac-suisse-romande.ch
Description: Thème enfant de Twenty Twenty-Five pour ISAAC Suisse romande
Author: ISAAC Suisse romande
Template: twentytwentyfive
Version: 1.0
*/

/* ---------------------------------------------------------------------------------------------------------------------------------------
   Police Roboto : force 'font-display: swap' pour accélérer l'affichage, via une autre police en attendant que celles-ci soient chargées
   Si les variantes de police changent plus tard, adapter ce bloc.
--------------------------------------------------------------------------------------------------------------------------------------- */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/twentytwentyfive-child/assets/fonts/roboto-400.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/themes/twentytwentyfive-child/assets/fonts/roboto-400italic.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/themes/twentytwentyfive-child/assets/fonts/roboto-700.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/wp-content/themes/twentytwentyfive-child/assets/fonts/roboto-700italic.woff2") format("woff2");
}



/* ===========================================================
   Déclaration de variables réutilisées dans la suite du code 
=========================================================== */


:root {

	/* ===================================================
	   Couleurs pour le site
	=================================================== */

	/* Couleur principale */
	--ymd-color-primary: #305395;

	/* Variante foncée (hover, focus...) */
	--ymd-color-primary-dark: #23527c;

	/* Variante claire (si nécessaire) */
	--ymd-color-primary-light: #bfd6ee;


	/* ===================================================
	   Couleurs pour les dégradés du site
	=================================================== */

	/* Palette pale */
	--ymd-grad--pale-start:    #f0faff;
	--ymd-grad--pale-end:      #ddecf0;

	/* Palette légère */
	--ymd-grad--light-start:   #e7f1fb;
	--ymd-grad--light-end:     #d3e0ec;

	/* Palette medium */
	--ymd-grad--medium-start:  #d3e0ec;
	--ymd-grad--medium-end:    #b2d0ed;

	/* Palette forte */
	--ymd-grad--strong-start:   #b6cde0;
	--ymd-grad--strong-end:     #7193ae;



	/* ===================================================
	   Header
	=================================================== */

	/* Hauteur du logo */
	--ymd-logo-height-desktop: 52px;
	--ymd-logo-height-tablet: 44px;
	--ymd-logo-height-mobile: 34px;

	/* Padding vertical du bandeau */
	--ymd-header-padding-desktop: 6px;
	--ymd-header-padding-tablet: 6px;
	--ymd-header-padding-mobile: 5px;

	/* Hauteur totale du header */
	--ymd-header-height-desktop: calc(var(--ymd-logo-height-desktop) + (2 * var(--ymd-header-padding-desktop)));
	--ymd-header-height-tablet:  calc(var(--ymd-logo-height-tablet)  + (2 * var(--ymd-header-padding-tablet)));
	--ymd-header-height-mobile:  calc(var(--ymd-logo-height-mobile)  + (2 * var(--ymd-header-padding-mobile)));

	--ymd-header-bg: #ffffff;
	--ymd-header-z: 9999;
}



/* ===============================================================
   Styles pr modèle 'Palette de couleurs du site Web'
   Modèle disponible avec les autres modèles dans l'éditeur de WP   
=============================================================== */

.ymd-color-swatch {
	min-height: 86px;
	border-radius: 12px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.ymd-color-swatch p {
	margin: 0;
	line-height: 1.35;
}

.ymd-color-swatch--test {
	margin-top: 0.35rem;
	border: 2px dashed rgba(0,0,0,.25);
}




/* ===================================================
   Classes utilitaires de visualisation de palette
=================================================== */

.ymd-palette-primary        { background: var(--ymd-color-primary); color: #fff; }
.ymd-palette-primary-dark   { background: var(--ymd-color-primary-dark); color: #fff; }
.ymd-palette-primary-light  { background: var(--ymd-color-primary-light); }

.ymd-palette-pale-start     { background: var(--ymd-grad--pale-start); }
.ymd-palette-pale-end       { background: var(--ymd-grad--pale-end); }

.ymd-palette-light-start    { background: var(--ymd-grad--light-start); }
.ymd-palette-light-end      { background: var(--ymd-grad--light-end); }

.ymd-palette-medium-start   { background: var(--ymd-grad--medium-start); }
.ymd-palette-medium-end     { background: var(--ymd-grad--medium-end); }

.ymd-palette-strong-start   { background: var(--ymd-grad--strong-start); color:#fff; }
.ymd-palette-strong-end     { background: var(--ymd-grad--strong-end); color:#fff; }

.ymd-palette-warm-start     { background: var(--ymd-grad--warm-start); }
.ymd-palette-warm-end       { background: var(--ymd-grad--warm-end); }




/* ==========
   HEADER 
========== */

/* ------------------------------------------
   Vrai header = template part
------------------------------------------ */
.wp-block-template-part.ymd-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: var(--ymd-header-z);
	margin: 0;
	padding: 0;
	background: var(--ymd-header-bg);
	transform: none;
	transition: none;
	animation: none;
	backface-visibility: hidden;
}

/* Sécurité : le wrapper interne Gutenberg reste neutre */
.wp-block-template-part.ymd-header,
.wp-block-template-part.ymd-header > .ymd-header-inner {
	margin-top: 0;
	margin-bottom: 0;
}

/* ------------------------------------------
   Conteneur interne
------------------------------------------ */
.wp-block-template-part.ymd-header .ymd-header-inner {
	margin: 0;
	padding: 0;
	background: var(--ymd-header-bg);
}

/* ------------------------------------------
   Ligne logo + nav
------------------------------------------ */
.wp-block-template-part.ymd-header .ymd-header-inner .alignwide {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ymd-header-height-desktop);
	padding-top: var(--ymd-header-padding-desktop) !important;
	padding-bottom: var(--ymd-header-padding-desktop) !important;
	background: var(--ymd-header-bg);
}

/* ------------------------------------------
   Logo
------------------------------------------ */
.wp-block-template-part.ymd-header .wp-block-site-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 1;
	min-width: 0;
	max-width: none;
}

.wp-block-template-part.ymd-header .custom-logo-link {
	display: block;
	line-height: 0;
}

.wp-block-template-part.ymd-header img.custom-logo {
	display: block;
	width: auto !important;
	height: var(--ymd-logo-height-desktop) !important;
	max-width: none !important;
	max-height: none !important;
}

/* ------------------------------------------
   Navigation
------------------------------------------ */
.wp-block-template-part.ymd-header .wp-block-navigation {
	display: flex;
	align-items: center;
	min-height: 0;
	min-width: 0;
}

.wp-block-template-part.ymd-header .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0.35rem;
	flex-shrink: 0;
}

/* ------------------------------------------
   Compensation du header fixe
------------------------------------------ */

/* Règle générale s'appliquant à la homepage */
body {
	padding-top: var(--ymd-header-height-desktop);
}

/*debug*/
/* Règle s'appliquant aux articles et pages (pas front-page = pas homepage) */
/* body.wp-singular:not(.home):not(.front-page) {
	padding-top: 0;
}
 */
 

/* ----------------------------------------------------
   Réglage de répartition du moto selon largeur écran
---------------------------------------------------- */
 
/* Jusqu'à 460 px : une seule ligne */
.ymd-moto-nowrap-460 {
    white-space: nowrap;
}

/* Caché en temps normal */
.ymd-moto-retour-460 {
    display: inline;
}

@media (max-width: 460px) {

    .ymd-moto-nowrap-460 {
        white-space: normal;
    }

    .ymd-moto-retour-460 {
        display: block;
    }

}

 
/* ------------------------------------------
   Tablette
------------------------------------------ */
@media (max-width: 1024px) {
	.wp-block-template-part.ymd-header .ymd-header-inner .alignwide {
		min-height: var(--ymd-header-height-tablet);
		padding-top: var(--ymd-header-padding-tablet) !important;
		padding-bottom: var(--ymd-header-padding-tablet) !important;
	}

	.wp-block-template-part.ymd-header img.custom-logo {
		height: var(--ymd-logo-height-tablet) !important;
	}

	body {
		padding-top: var(--ymd-header-height-tablet);
	}
}

/* ------------------------------------------
   Mobile
------------------------------------------ */
@media (max-width: 781px) {
	.wp-block-template-part.ymd-header .ymd-header-inner .alignwide {
		min-height: var(--ymd-header-height-mobile);
		padding-top: var(--ymd-header-padding-mobile) !important;
		padding-bottom: var(--ymd-header-padding-mobile) !important;
	}

	.wp-block-template-part.ymd-header img.custom-logo {
		height: var(--ymd-logo-height-mobile) !important;
	}

	body {
		padding-top: var(--ymd-header-height-mobile);
	}
}



/* -----------------------------------------------------------------------------------
   HERO IMAGE 
   (hero image = image pleine largeur, en-tête de page)

   - hauteurs responsives pilotées par variables en début de bloc
   - crop latéral accepté sur petits écrans

   Force de l'effet parallaxe :
   gérée dans fichier 'ymd-header-scroll.js' via la ligne 'const offset = rect.top * ...'
----------------------------------------------------------------------------------- */


 :root {
/*  - Hauteur du hero pilotée par clamp (min, valeur fluide, max)
	  o La valeur centrale (vw) n’agit QUE si elle reste entre min et max
	  o Si aucun effet visible → probablement bloqué par min ou max       */
	--ymd-hero-height-desktop: clamp(220px, 27.4vw, 526px);
	--ymd-hero-height-tablet: clamp(180px, 22.4vw, 423px);
	--ymd-hero-height-mobile: clamp(170px, 20.2vw, 293px);

/*  - Le scale contrôle le zoom de l’image :
	  o augmente → couple plus les bords latéraux de l'image (effet plus immersif)
	  o diminue → image plus “complète” mais risque de bandes vides en-dessus et dessous de l'image   */
	--ymd-hero-scale-desktop: 1.15;
	--ymd-hero-scale-mobile: 1.05;
}

.ymd-hero-image.wp-block-cover {
	position: relative;
	overflow: hidden;
	margin-top: 0;
	padding: 0 !important;
	isolation: isolate;
	min-height: var(--ymd-hero-height-desktop);
}

.ymd-hero-image.wp-block-cover .wp-block-cover__background,
.ymd-hero-image.wp-block-cover .wp-block-cover__inner-container {
	height: 100%;
}

.ymd-hero-image.wp-block-cover .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.ymd-hero-image.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	min-height: inherit;
}

.ymd-hero-image.wp-block-cover .wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	display: block !important;

	width: 100% !important;
	height: 100% !important;
	min-width: 100%;
	min-height: 100%;

	max-width: none !important;
	max-height: none !important;

	object-fit: cover !important;
	object-position: 50% 50%;

	transform: scale(var(--ymd-hero-scale-desktop)) translate3d(0, var(--ymd-parallax-y, 0px), 0);
	transform-origin: center center;
	will-change: transform;
	transition: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.ymd-hero-image.wp-block-cover .wp-block-cover__image-background {
		transform: scale(1.04) translate3d(0, 0, 0) !important;
		will-change: auto;
	}
}

@media (max-width: 1024px) {
	.ymd-hero-image.wp-block-cover {
		min-height: var(--ymd-hero-height-tablet);
	}
}

@media (max-width: 781px) {
	.ymd-hero-image.wp-block-cover,
	.ymd-hero-image.wp-block-cover .wp-block-cover__inner-container {
		height: var(--ymd-hero-height-mobile) !important;
		min-height: var(--ymd-hero-height-mobile) !important;
	}

	.ymd-hero-image.wp-block-cover .wp-block-cover__image-background {
		transform: scale(var(--ymd-hero-scale-mobile)) translate3d(0, var(--ymd-parallax-y, 0px), 0);
	}

	.ymd-hero-image.wp-block-cover .wp-block-group {
		max-width: 100% !important;
	}
}



/* =========================
   FOOTER DU SITE
========================= */

.ymd-site-footer {
	margin-top: 0;
	max-width: 100%;
	overflow-x: clip; /* évite les micro-débordements horizontaux */
}

.ymd-site-footer__inner {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: clamp(22px, 4vw, 56px);
	overflow-x: clip;
}

.ymd-site-footer .wp-block-columns {
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
}

.ymd-site-footer .wp-block-column {
	min-width: 0; /* autorise les colonnes à se rétracter proprement */
}

.ymd-site-footer .wp-block-column > .wp-block-group {
	height: 100%;
	min-width: 0;
}

.ymd-site-footer .wp-block-heading {
	margin-bottom: 1rem;
}

.ymd-site-footer p {
	line-height: 1.6;
	overflow-wrap: anywhere; /* évite qu’un texte long ou une URL pousse la largeur */
}

.ymd-site-footer .wp-block-search,
.ymd-site-footer .wp-block-social-links {
	margin-top: 0.5rem;
}

.ymd-site-footer .wp-block-button {
	margin-bottom: 0;
}


/* ====================================================
   Séparateurs entre blocs s'ils sont empilés
   (sur smartphone ou écran <781px de largeur viewport)
==================================================== */

@media (max-width: 781px) {
	#colonnes-footer > .wp-block-column + .wp-block-column {
		position: relative;
		margin-top: 16px;

		/* la ligne horizontale apparait entre le margin-top et le padding-top */
		padding-top: 40px;
	}

	#colonnes-footer > .wp-block-column + .wp-block-column::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 90%;
		height: 2px;
		transform: translateX(-50%);

		background: linear-gradient(
			to right,
			transparent,
			var(--ymd-color-primary),
			transparent
		);

		opacity: 0.35;
	}
}


/* ====================================================
   Couleur des liens dans le footer
==================================================== */

.ymd-site-footer a {
	/* color: inherit;  version où on garde la même couleur que le texte usuel */
	color: var(--ymd-color-primary); /* version avec couleur principale ISAAC sur les liens */
	text-decoration: underline;
}

.ymd-site-footer a:hover,
.ymd-site-footer a:focus {
	color: var(--ymd-color-primary);
	text-decoration: underline;
}




/* =====================================================
   Image de fond
   - Uniquement sur les pages internes
   - Visible seulement dans les marges latérales
   - Désactivée sur mobile
===================================================== */

@media (min-width: 785px) {

	body.page:not(.home):not(.front-page) {
		--ymd-bg-scroll-y: 0px;
		background: none;
		position: relative;
	}

	/* Calque image de fond */
	body.page:not(.home):not(.front-page)::after {
		content: "";
		position: fixed;

		top: var(--ymd-bg-layer-top, -100vh);
		left: 0;
		right: 0;
		height: var(--ymd-bg-layer-height, 500vh);
		

		background-image: var(--ymd-bg-image);
		background-size: 100vw auto;
		background-position: center top;
		background-repeat: repeat-y;

		transform: translate3d(0, var(--ymd-bg-scroll-y, 0px), 0);
		will-change: transform;

		z-index: -2;
		pointer-events: none;
	}


	/* Voile blanc devant l'image de fond. */
	body.page:not(.home):not(.front-page)::before {
		content: "";
		position: fixed;
		inset: 0;
		/* ci-dessous dernière valeur réglée via le code HTML dans la page (par défaut forcé à 0.35)
		valeur plus petite => image plus visible / plus grande => image plus estompée */
		background: rgba(255,255,255,var(--ymd-bg-veil-opacity, 0.35));   
		pointer-events: none;
		z-index: -1;
	}
	
	
	
/* =====================================================
   STRUCTURE DES PAGES INTERNES AVEC FOND LATÉRAL

   .wp-site-blocks reste en pleine largeur afin que les
   blocs Gutenberg alignfull puissent atteindre les bords.

   La colonne blanche centrale est dessinée séparément
   avec ::before, selon la grande largeur définie dans
   l’éditeur WordPress : Styles → Mise en page.
===================================================== */

@media (min-width: 785px) {

	body.page:not(.home):not(.front-page) .wp-site-blocks {
		position: relative;
		z-index: 0;
		isolation: isolate;

		width: 100%;
		max-width: none;

		margin-left: 0;
		margin-right: 0;

		/* Le conteneur général doit rester transparent,
		   sinon il masquerait le fond lacustre. */
		background: transparent;
	}


	/* Colonne blanche centrale placée derrière les blocs */
	body.page:not(.home):not(.front-page) .wp-site-blocks::before {
		content: "";

		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;

		width: min(
			100%,
			var(--wp--style--global--wide-size)
		);

		transform: translateX(-50%);

		background: #ffffff;

		pointer-events: none;
		z-index: -1;
	}

}


	/* Bloc marqueur invisible */
	.ymd-bkgrd-img-scroll {
		display: none !important;
	}
}


/* ================================================================================================================================
   CHAMP 'RECHERCHE' DU FOOTER

   le champ recherche, placé en 4ème colonne du footer, a tendance à créer une marge vide à droite lorsqu'il déborde de la colonne
   qui lui est assignée, ou alors à créer une petite marge peu perceptible, mais qui modifie carrément le comportement du header
   à l'opposé sur la page, en le faisant légèrement remonter au scroll sur smartphone. On corrige ci-dessous.
================================================================================================================================ */


/* Masquage de l'étiquette via Gutenberg ne pose plus problème depuis correction par 'STABILISATION DU BLOC RECHERCHE DU FOOTER' */
/* ON PEUT DONC SUPPRIMER CE PASSAGE à fin mai 2026 SI TOUT FONCTIONNE TOUJOURS BIEN */
/* --------------------------------------------------------------------------------------------------------------------------------------------------
   MASQUAGE DE L'ÉTIQUETTE 'Rechercher' dans le champ recherche du footer
   car avec l'option 'afficher le libellé' désactivée, Gutenberg crée une grosse marge vide à droite du site (parfois jusqu'à environ un demi-écran)
-------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 
.ymd-search-footer .wp-block-search__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
 */

/* --------------------------------------------------------------------------------------------------------------------------------
   STABILISATION DU BLOC RECHERCHE DU FOOTER

   Sans cela, le bloc recherche peut créer, au scroll ou dans d'autres circonstances, un léger débordement horizontal du viewport. 
   Ce débordement suffit parfois à perturber le comportement du header fixe sur smartphone.
-------------------------------------------------------------------------------------------------------------------------------- */

/* Très important dans les colonnes flex : autoriser la réduction */
#colonnes-footer,
#colonnes-footer > .wp-block-column,
#colonnes-footer > .wp-block-column > .wp-block-group,
#colonne-4-footer,
#grp-colonne-4-footer {
	min-width: 0;
	max-width: 100%;
}

/* Le bloc search et ses wrappers ne doivent jamais élargir la page */
.ymd-search-footer,
.ymd-search-footer form,
.ymd-search-footer .wp-block-search__inside-wrapper,
.ymd-search-footer .wp-block-search__input,
.ymd-search-footer .wp-block-search__button {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
}

/* Le bloc prend toute la largeur disponible de sa colonne, sans plus */
.ymd-search-footer,
.ymd-search-footer form,
.ymd-search-footer .wp-block-search__inside-wrapper,
.ymd-search-footer .wp-block-search__input {
	width: 100%;
}

/* Le bouton ne doit pas imposer une largeur excessive */
.ymd-search-footer .wp-block-search__button {
	flex: 0 0 auto;
}

/* Sécurité générale contre les micro-débordements */
.ymd-site-footer,
.ymd-site-footer__inner,
#colonnes-footer {
	max-width: 100%;
	overflow-x: clip;
}



/* ==========================================
   DÉGRADÉS POUR COULEURS 'À PLAT'
========================================== */

/* Base du gradient */
/* Base implicite : s'applique à tout élément qui porte au moins une classe ymd--grad--... */

[class^="ymd--grad--"],
[class*=" ymd--grad--"] {
	--ymd-grad-start: var(--ymd-grad--medium-start);
	--ymd-grad-end: var(--ymd-grad--medium-end);
	--ymd-grad-direction: to top;

	background-color: var(--ymd-grad-end);
	background-image: linear-gradient(
		var(--ymd-grad-direction),
		var(--ymd-grad-end),
		var(--ymd-grad-start)
	);
}

/* Directions possibles */
.ymd--grad--Nord {
	--ymd-grad-direction: to top;
}

.ymd--grad--NEst {
	--ymd-grad-direction: to top right;
}

.ymd--grad--NOuest {
	--ymd-grad-direction: to top left;
}

.ymd--grad--SEst {
	--ymd-grad-direction: to bottom right;
}

.ymd--grad--Sud {
	--ymd-grad-direction: to bottom;
}

.ymd--grad--SOuest {
	--ymd-grad-direction: to bottom left;
}

/* Palettes de couleurs */

.ymd--grad--pale {
	--ymd-grad-start: var(--ymd-grad--pale-start);
	--ymd-grad-end: var(--ymd-grad--pale-end);
}

.ymd--grad--light {
	--ymd-grad-start: var(--ymd-grad--light-start);
	--ymd-grad-end: var(--ymd-grad--light-end);
}

.ymd--grad--medium {
	--ymd-grad-start: var(--ymd-grad--medium-start);
	--ymd-grad-end: var(--ymd-grad--medium-end);
}

.ymd--grad--strong {
	--ymd-grad-start: var(--ymd-grad--strong-start);
	--ymd-grad-end: var(--ymd-grad--strong-end);
}


/* ===========================================
   MASQUAGE D'ÉLEMENTS SELON DEVICE
=========================================== */

/* on va masquer les éléments ayant la class correspondante, en fonction de la largeur du viewport */

/* Passé en commentaire car cela force l'affichage en block, et peut interférer avec certaines utilisations.  à supprimer complètement si pas de bug remarqué finalement sur le reste du site */
/* Par défaut = visible partout */
/* .noMobile-ymd, */
/* .noTablet-ymd, */
/* .noComputer-ymd { */
	/* display: block; */
/* } */


/* Mobile (jusqu'à 781px) */
@media (max-width: 781px) {
	.noMobile-ymd {
		display: none !important;
	}
}

/* Tablette (781px → 1024px) */
@media (min-width: 781px) and (max-width: 1024px) {
	.noTablet-ymd {
		display: none !important;
	}
}

/* Desktop (1025px et +) */
@media (min-width: 1025px) {
	.noComputer-ymd {
		display: none !important;
	}
}


/* ====================================================
   MENU PRINCIPAL DU SITE

   Principe :
   - Menu 1 : 4 liens visibles sur desktop
   - Menu 2 : menu complet dans un overlay
   - Desktop : bouton texte "MENU"
   - Mobile  : icône burger standard
==================================================== */


/* Conteneur des 2 menus */
.ymd-header-navs {
	gap: 18px;
}


/* menu complet, masque toujours la liste horizontale.
   Seul le bouton d'ouverture (burger) de l'overlay reste visible. */
.ymd-menu-burger-complet .wp-block-navigation__container {
	display: none;
}


/* Assure l'affichage du bouton (burger) ouvrant l'overlay */
.ymd-menu-burger-complet .wp-block-navigation__responsive-container-open {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	cursor: pointer;
}


/* -------------------------------------------------
   DESKTOP
   - Affiche les 4 liens principaux
   - Remplace le burger par le mot "MENU"
---------------------------------------------------- */

@media (min-width: 782px) {

	/* Cache l'icône burger */
	.ymd-menu-burger-complet .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	/* Affiche le texte MENU */
	.ymd-menu-burger-complet .wp-block-navigation__responsive-container-open::before {
		content: "MENU";
		font-size: 16px;
		font-weight: 500;
		line-height: 1;
	}
}


/* ---------------------------------------------------
   MOBILE
   - Cache le menu des 4 liens
   - Réaffiche l'icône burger standard
----------------------------------------------------- */

@media (max-width: 781px) {

	/* Cache complètement le menu desktop */
	nav.ymd-menu-desktop-4 {
		display: none !important;
	}

	/* Supprime le texte MENU */
	.ymd-menu-burger-complet .wp-block-navigation__responsive-container-open::before {
		content: none;
	}
	

	/* Cache le SVG Gutenberg */
	.ymd-menu-burger-complet .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	/* Bouton burger personnalisé */
	.ymd-menu-burger-complet .wp-block-navigation__responsive-container-open::before {
		content: "☰";
		font-size: 1.8rem;
		font-weight: normal;
		line-height: 1;
	}
}


/* =========================================================================
	BreadCrumbs - Fil d'Ariane (généré par Yoast)
	Style créé pour gérer l'affichage du fil d'Ariane
	de façon personnalisée  
========================================================================== */

.yoast-breadcrumbs,
.dt-breadcrumbs-ymd {
	font-size: 12px;
	font-style: italic;
	line-height: 1.8;
	letter-spacing: .04em;
	color: #333;
	margin: 0 0 10px;
	padding-top: 1rem;
}

.yoast-breadcrumbs a,
.dt-breadcrumbs-ymd a {
	color: var(--ymd-color-primary);   /* couleur de l'ancre du lien au repos */
	text-decoration: none;
	
	/* border-bottom: 1px solid rgba(51, 51, 51, .45); */
	/* souligne le lien via la bordure inférieure */
}

.yoast-breadcrumbs a:hover,
.yoast-breadcrumbs a:focus,
.dt-breadcrumbs-ymd a:hover,
.dt-breadcrumbs-ymd a:focus {
	color: var(--ymd-color-primary-dark);
	/* border-bottom-color: var(--ymd-color-primary-dark); /*
	/* souligne le lien via la bordure inférieure */
}

/* =================================
  Liens hypertextes - style général 
==================================== */

a {
	color: var(--ymd-color-primary);   /* couleur de l'ancre du lien au repos */
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease;
	/* border-bottom: 1px solid currentColor; */
	/* souligne le lien via la bordure inférieure */

}

a:hover,
a:focus {
	color: var(--ymd-color-primary-dark);
	/* border-bottom-color: var(--ymd-color-primary-dark); */
	/* souligne le lien via la bordure inférieure */

}

/* Évite d'appliquer ce style aux éléments qui ne doivent pas ressembler à des liens texte */
.wp-block-button__link,
.wp-block-navigation a,
.site-logo a,
.wp-block-site-logo a {
	text-decoration: none;
	border-bottom: 0;
}