/*
 * Refonte 2026 — charte inchangée.
 * Les couleurs reprennent exactement celles du kit Elementor du site :
 *   violet #42002B, rose #B72082 (survol #862C5D), sarcelle #0097A8, sarcelle foncé #007380,
 *   bleu canard #007380, fond clair #EBF7F8, texte #555555. Police : Montserrat.
 */

:root {
	--ei-violet: #42002b;
	--ei-rose: #b72082;
	--ei-rose-survol: #862c5d;
	--ei-sarcelle: #0097a8;
	--ei-sarcelle-texte: #007380; /* version conforme AA sur fond blanc */
	--ei-fond-clair: #ebf7f8;
	--ei-texte: #555555;
	--ei-rayon: 7px;
}

/* ------------------------------------------------------------------ *
 * En-tête : téléphone + demande de rappel (colonne de droite)
 * ------------------------------------------------------------------ */

.ei-entete-contact {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	font-family: "Montserrat", sans-serif;
}

.ei-entete-tel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	text-decoration: none;
	line-height: 1.2;
}

.ei-entete-tel:hover,
.ei-entete-tel:focus-visible {
	color: #fff;
	text-decoration: none;
}

.ei-entete-tel .ei-icone {
	flex: 0 0 auto;
}

.ei-entete-tel-texte {
	display: flex;
	flex-direction: column;
}

.ei-entete-tel-libelle {
	font-size: 13px;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

.ei-entete-tel strong {
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

.ei-entete-tel:hover strong {
	text-decoration: underline;
}

.ei-btn-rappel {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--ei-rayon);
	background: var(--ei-rose);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.ei-btn-rappel:hover,
.ei-btn-rappel:focus-visible {
	background: var(--ei-rose-survol);
	color: #fff;
	text-decoration: none;
}

/* Sous 1080 px, la barre d'action fixe remplace le bloc de l'en-tête. */
@media screen and (max-width: 1080px) {
	.ei-entete-contact {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * Barre d'action fixe (mobile et tablette)
 * ------------------------------------------------------------------ */

.ei-barre-mobile {
	display: none;
}

@media screen and (max-width: 1080px) {
	.ei-barre-mobile {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 9990;
		display: flex;
		font-family: "Montserrat", sans-serif;
		box-shadow: 0 -2px 10px rgba(0, 1, 1, 0.2);
		/* respecte la zone tactile des iPhone récents */
		padding-bottom: env(safe-area-inset-bottom, 0);
		background: var(--ei-violet);
	}

	.ei-barre-mobile-lien {
		flex: 1 1 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 54px;
		padding: 10px 8px;
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
		text-align: center;
	}

	.ei-barre-mobile-lien:hover,
	.ei-barre-mobile-lien:focus-visible {
		color: #fff;
		text-decoration: none;
	}

	.ei-barre-mobile-tel {
		background: var(--ei-violet);
	}

	.ei-barre-mobile-rappel {
		background: var(--ei-rose);
	}

	.ei-barre-mobile-rappel:active {
		background: var(--ei-rose-survol);
	}

	/* La barre ne doit jamais masquer la fin du contenu ni le bandeau de cookies. */
	body {
		padding-bottom: 54px;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		margin-bottom: 54px;
	}
}

/* ------------------------------------------------------------------ *
 * En-tête mobile compact
 * Avant la refonte, le bandeau supérieur (bouton espace client sur une ligne,
 * puis logo, puis barre du menu) occupait environ 45 % de la hauteur d'écran
 * avant le moindre contenu. On aligne le logo et l'espace client sur une seule
 * ligne et on réduit les marges : même charte, deux fois moins de hauteur.
 * Identifiants Elementor : section 2f73488, colonnes e2ce40b (espace client),
 * de3bff9 (logo) et d220a0b (téléphone + rappel, masqué sous 1080 px).
 * ------------------------------------------------------------------ */

@media screen and (max-width: 1080px) {
	.elementor-location-header .elementor-element-2f73488 {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	.elementor-location-header .elementor-element-2f73488 > .elementor-container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.elementor-location-header .elementor-element-de3bff9 {
		order: 1;
		flex: 1 1 auto;
		width: auto;
	}

	.elementor-location-header .elementor-element-e2ce40b {
		order: 2;
		flex: 0 0 auto;
		width: auto;
	}

	.elementor-location-header .elementor-element-d220a0b {
		display: none;
	}

	/* Logo : hauteur maîtrisée plutôt que pleine largeur. */
	.elementor-location-header .elementor-element-de3bff9 img {
		max-height: 46px;
		width: auto;
	}

	/* Bouton « Mon espace client » compact : l'icône suffit à l'identifier. */
	.elementor-location-header .elementor-element-2daaf8e .elementor-button {
		padding: 8px 12px !important;
		font-size: 12px;
	}
}

@media screen and (max-width: 560px) {
	.elementor-location-header .elementor-element-2daaf8e .elementor-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.elementor-location-header .elementor-element-2daaf8e .elementor-button-icon {
		margin: 0;
	}

	.elementor-location-header .elementor-element-de3bff9 img {
		max-height: 38px;
	}
}

/* ------------------------------------------------------------------ *
 * Bandeau de cookies compact
 * Le message est ramené à une phrase (la finalité), le détail restant dans
 * « Personnaliser » et dans la politique de confidentialité. Accepter, Refuser
 * et Personnaliser restent au même niveau, comme l'exige la CNIL.
 * Desktop : petite boîte en bas à gauche. Mobile : barre basse de deux lignes,
 * posée au-dessus de la barre d'action « Appeler / Être rappelé ».
 * ------------------------------------------------------------------ */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	padding: 14px 16px;
	border-radius: var(--ei-rayon);
	box-shadow: 0 2px 12px rgba(0, 1, 1, 0.18);
	font-family: "Montserrat", sans-serif;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ei-texte);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

/* Complianz impose width:100% à chaque bouton, ce qui les empile : on repasse en largeur
   automatique pour les aligner sur une seule ligne. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	width: auto;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 9px 10px;
	border-radius: var(--ei-rayon);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-accept {
	background: var(--ei-rose);
	border-color: var(--ei-rose);
	color: #fff;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences {
	background: #fff;
	border: 1px solid #ccc;
	color: var(--ei-texte);
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links {
	margin-top: 8px;
	font-size: 11px;
}

@media screen and (max-width: 1080px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		left: 8px;
		right: 8px;
		bottom: 62px; /* au-dessus de la barre d'action fixe */
		width: auto;
		max-width: none;
		max-height: none;
		padding: 12px 14px;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
		font-size: 12.5px;
		margin-bottom: 8px;
	}

	/* Complianz repasse ses boutons en colonne sous 768 px : on les garde sur une ligne. */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		flex-direction: row;
		gap: 6px;
	}

	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		padding: 9px 4px;
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Page « introuvable »
 * ------------------------------------------------------------------ */

.ei-404-recherche {
	margin: 24px 0 36px;
}

.ei-404-recherche label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: var(--ei-sarcelle-texte);
}

.ei-404-recherche-ligne {
	display: flex;
	gap: 10px;
	max-width: 540px;
}

.ei-404-recherche input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid #ccc;
	border-radius: var(--ei-rayon);
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
}

.ei-404-recherche button {
	flex: 0 0 auto;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--ei-rayon);
	background: var(--ei-rose);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.ei-404-recherche button:hover,
.ei-404-recherche button:focus-visible {
	background: var(--ei-rose-survol);
}

.ei-404-liens {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px 24px;
	margin: 16px 0 32px;
	padding: 0;
	list-style: none;
}

.ei-404-liens li {
	margin: 0;
}

.ei-404-liens a {
	display: block;
	padding: 12px 16px;
	border-radius: var(--ei-rayon);
	background: var(--ei-fond-clair);
	color: var(--ei-sarcelle-texte);
	font-weight: 600;
	text-decoration: none;
}

.ei-404-liens a:hover,
.ei-404-liens a:focus-visible {
	background: var(--ei-sarcelle-texte);
	color: #fff;
}

/* ------------------------------------------------------------------ *
 * Accessibilité : contrastes conformes AA à charte constante
 * Le sarcelle #0097A8 sur blanc plafonne à 3,2:1 ; sa déclinaison foncée
 * #007380, déjà présente dans la charte, atteint 5,1:1.
 * ------------------------------------------------------------------ */

/* Texte réservé aux lecteurs d'écran. */
.ei-texte-lecteur {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Texte sarcelle sur fond blanc : 3,5:1 avant, 5,1:1 après, même famille de couleur. */
.ariane,
.ariane a,
.breadcrumb_last,
.titre_h2.bleu,
h2.bleu,
.bleu,
.lien_sommaire .contenu_lien,
.menu_lateral_custom a,
.contenu_parent a,
.lien_enfant,
.lien_page_enfant,
.guide_titre,
.bdp-categories a,
.section-pagedyn-contenu a:not(.btn_lien):not(.elementor-button) {
	color: var(--ei-sarcelle-texte);
}

/* Titres et intitulés du méga-menu (« Quels sont vos objectifs ? », « Famille »…).
   Max Mega Menu génère sa feuille avec une spécificité élevée : on s'aligne dessus. */
#mega-menu-wrap-menu-1 #mega-menu-menu-1 .textwidget p:not(.sans_bordure),
#mega-menu-wrap-menu-1 #mega-menu-menu-1 .textwidget b:not(.sans_bordure),
#mega-menu-wrap-menu-1 #mega-menu-menu-1 .menu_profil_droite b:not(.sans_bordure),
#mega-menu-wrap-menu-1 #mega-menu-menu-1 .menu_divers_droite b:not(.sans_bordure),
#mega-menu-wrap-menu-1 #mega-menu-menu-1 li .textwidget p:not(.sans_bordure),
.textwidget p,
.textwidget b {
	color: var(--ei-sarcelle-texte);
}

/* Texte blanc sur aplat sarcelle : on fonce l'aplat plutôt que d'éclaircir le texte,
   en restant sur le « bleu canard » déjà présent dans la charte. */
.contenu_avis,
.auteur_avis,
.bloc_avis .contenu_avis,
.section-a-retenir,
.bloc-detail-produit,
.lien_enfant.enfant_ec,
.contenu_enfants .lien_enfant.enfant_ec {
	background-color: var(--ei-sarcelle-texte);
}

/* Cible du lien d'évitement : elle n'existait pas dans le gabarit d'origine. */
#content {
	scroll-margin-top: 20px;
}