/**
 * Section En-tête (widget « arvy-entete »).
 *
 * Une barre fixée en haut de l'écran, en trois états :
 * - en haut de page : presque toute la largeur, sans fond, posée sur la
 *   première section (textes clairs par défaut, sur un héros sombre) ;
 * - dès qu'on descend : elle se resserre au centre et prend un fond blanc
 *   dépoli ;
 * - quand on descend encore : elle sort par le haut, et revient dès qu'on
 *   remonte.
 * Desktop : liens au centre avec menus déroulants, bouton ARVY à droite.
 * Tablette et mobile : logo et bouton menu ; le menu s'ouvre dans la barre.
 *
 * Toutes les valeurs de la barre passent par des variables « --arvy-en-x-* » :
 * l'état « resserrée » est la base (c'est aussi le repli sans script), l'état
 * « en haut de page » et le menu ouvert les remplacent. Les réglages
 * d'Elementor posent les variables « --arvy-en-* » que ces états lisent.
 */

/* ---- Autour du widget ---- */

/* La barre est fixée : le widget ne prend aucune place. Un conteneur qui ne
   porte que l'en-tête perd son espace intérieur par défaut (sinon une bande
   vide de 20 px en haut de la page). Un espace réglé à la main l'emporte. */
.e-con:has( > .elementor-widget-arvy-entete:only-child ),
.e-con:has( > .e-con-inner > .elementor-widget-arvy-entete:only-child ) {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--min-height: 0px;
}

.elementor-widget-arvy-entete {
	min-width: 0;
	max-width: 100%;
}

/* ---- Variables d'état ---- */

.arvy-entete {
	--arvy-en-courbe: cubic-bezier(0.135, 0.9, 0.15, 1);
	--arvy-en-courbe-largeur: cubic-bezier(0.23, 1, 0.32, 1);
	position: relative;

	/* État « resserrée » (et repli sans script). */
	--arvy-en-v: var(--arvy-en-padding-v, 14px);
	--arvy-en-g: var(--arvy-en-padding-g, 28px);
	--arvy-en-d: var(--arvy-en-padding-d, 14px);
	--arvy-en-x-largeur: min(var(--arvy-en-largeur-reduite, 1000px), calc(100% - 2 * var(--arvy-en-marge, 10px)));
	--arvy-en-x-fond: var(--arvy-en-fond, rgba(255, 255, 255, 0.85));
	--arvy-en-x-texte: var(--arvy-en-texte, #1A1A1B);
	--arvy-en-x-ombre: var(--arvy-en-ombre, 0 10px 40px -12px rgba(26, 26, 27, 0.18));
	--arvy-en-x-flou: var(--arvy-en-flou, 12px);
	--arvy-en-x-logo-clair: 0;
	--arvy-en-x-logo-filtre: none;
	--arvy-en-b-fond: var(--arvy-en-bouton-fond, #1A1A1B);
	--arvy-en-b-texte: var(--arvy-en-bouton-texte, #FFFFFF);
	--arvy-en-b-fusion: var(--arvy-en-bouton-fusion, multiply);
}

/* État « en haut de page ». */
.arvy-entete.est-en-haut {
	--arvy-en-g: var(--arvy-en-padding-haut-g, 32px);
	--arvy-en-d: var(--arvy-en-padding-haut-d, 32px);
	--arvy-en-x-largeur: calc(100% - 2 * var(--arvy-en-marge, 10px));
	--arvy-en-x-fond: var(--arvy-en-fond-haut, transparent);
	--arvy-en-x-texte: var(--arvy-en-texte-haut, #FFFFFF);
	--arvy-en-x-ombre: 0 0 0 0 transparent;
	--arvy-en-x-flou: 0px;
	--arvy-en-x-logo-clair: var(--arvy-en-logo-clair-haut, 1);
	--arvy-en-x-logo-filtre: var(--arvy-en-logo-filtre-haut, brightness(0) invert(1));
	--arvy-en-b-fond: var(--arvy-en-bouton-haut-fond, #FFFFFF);
	--arvy-en-b-texte: var(--arvy-en-bouton-haut-texte, #000000);
	--arvy-en-b-fusion: var(--arvy-en-bouton-haut-fusion, screen);
}

/* Sans JavaScript, ou si le script a échoué : la barre reste resserrée,
   lisible sur n'importe quelle section (jamais de texte blanc sur fond clair). */
@media (scripting: none) {
	.arvy-entete.est-en-haut {
		--arvy-en-g: var(--arvy-en-padding-g, 28px);
		--arvy-en-d: var(--arvy-en-padding-d, 14px);
		--arvy-en-x-largeur: min(var(--arvy-en-largeur-reduite, 1000px), calc(100% - 2 * var(--arvy-en-marge, 10px)));
		--arvy-en-x-fond: var(--arvy-en-fond, rgba(255, 255, 255, 0.85));
		--arvy-en-x-texte: var(--arvy-en-texte, #1A1A1B);
		--arvy-en-x-ombre: var(--arvy-en-ombre, 0 10px 40px -12px rgba(26, 26, 27, 0.18));
		--arvy-en-x-flou: var(--arvy-en-flou, 12px);
		--arvy-en-x-logo-clair: 0;
		--arvy-en-x-logo-filtre: none;
		--arvy-en-b-fond: var(--arvy-en-bouton-fond, #1A1A1B);
		--arvy-en-b-texte: var(--arvy-en-bouton-texte, #FFFFFF);
		--arvy-en-b-fusion: var(--arvy-en-bouton-fusion, multiply);
	}
}

.arvy-no-motion .arvy-entete.est-en-haut:not(.est-pret) {
	--arvy-en-g: var(--arvy-en-padding-g, 28px);
	--arvy-en-d: var(--arvy-en-padding-d, 14px);
	--arvy-en-x-largeur: min(var(--arvy-en-largeur-reduite, 1000px), calc(100% - 2 * var(--arvy-en-marge, 10px)));
	--arvy-en-x-fond: var(--arvy-en-fond, rgba(255, 255, 255, 0.85));
	--arvy-en-x-texte: var(--arvy-en-texte, #1A1A1B);
	--arvy-en-x-ombre: var(--arvy-en-ombre, 0 10px 40px -12px rgba(26, 26, 27, 0.18));
	--arvy-en-x-flou: var(--arvy-en-flou, 12px);
	--arvy-en-x-logo-clair: 0;
	--arvy-en-x-logo-filtre: none;
	--arvy-en-b-fond: var(--arvy-en-bouton-fond, #1A1A1B);
	--arvy-en-b-texte: var(--arvy-en-bouton-texte, #FFFFFF);
	--arvy-en-b-fusion: var(--arvy-en-bouton-fusion, multiply);
}

/* ---- Le cadre fixe (c'est lui qui sort par le haut) ---- */

.arvy-entete .arvy-entete__fixe {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--arvy-en-z, 1000);
	display: flex;
	justify-content: center;
	padding-top: var(--arvy-en-haut, 20px);
	pointer-events: none;
	transition: transform var(--arvy-en-cache-duree, 1s) var(--arvy-en-courbe);
}

/* Barre d'administration de WordPress (visiteur connecté) : la barre se pose
   dessous. Sous 600 px, WordPress la laisse défiler avec la page. */
.admin-bar .arvy-entete .arvy-entete__fixe {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .arvy-entete .arvy-entete__fixe {
		top: 0;
	}
}

.arvy-entete.est-cache .arvy-entete__fixe {
	/* Toute sa hauteur, plus de quoi emporter l'ombre. */
	transform: translateY(calc(-100% - 24px));
}

/* ---- La barre ---- */

.arvy-entete .arvy-entete__barre {
	position: relative;
	box-sizing: border-box;
	width: var(--arvy-en-x-largeur);
	margin: 0;
	padding: var(--arvy-en-v) var(--arvy-en-d) var(--arvy-en-v) var(--arvy-en-g);
	border-radius: var(--arvy-en-rayon, 999px);
	background-color: var(--arvy-en-x-fond);
	box-shadow: var(--arvy-en-x-ombre);
	color: var(--arvy-en-x-texte);
	-webkit-backdrop-filter: blur(var(--arvy-en-x-flou));
	backdrop-filter: blur(var(--arvy-en-x-flou));
	pointer-events: auto;
	transition:
		width var(--arvy-en-largeur-duree, 0.6s) var(--arvy-en-courbe-largeur),
		padding var(--arvy-en-largeur-duree, 0.6s) var(--arvy-en-courbe-largeur),
		border-radius var(--arvy-en-largeur-duree, 0.6s) var(--arvy-en-courbe-largeur),
		background-color 0.5s ease,
		box-shadow 0.5s ease,
		color 0.35s ease;
}

.arvy-entete.est-cache .arvy-entete__barre {
	pointer-events: none;
}

/* Première image : pas d'animation (page rechargée au milieu). */
.arvy-entete.est-sans-transition .arvy-entete__barre,
.arvy-entete.est-sans-transition .arvy-entete__fixe,
.arvy-entete.est-sans-transition .arvy-entete__logo-image,
.arvy-entete.est-sans-transition .arvy-entete__nav,
.arvy-entete.est-sans-transition .arvy-entete__bouton {
	transition: none;
}

.arvy-entete .arvy-entete__rangee {
	display: grid;
	/* Liens exactement au centre ; si la place manque, les côtés gardent leur
	   contenu et le centre se décale plutôt que de déborder. */
	grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
	align-items: center;
	column-gap: 24px;
}

/* ---- Logo ---- */

.arvy-entete .arvy-entete__logo,
.arvy-entete .arvy-entete__logo:hover {
	display: grid;
	justify-self: start;
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

/* Position réglable du logo : un déplacement visuel, qui ne décale ni les
   liens ni le bouton. Dans une règle à part, sans état (règle 32). */
.arvy-entete .arvy-entete__logo {
	translate: var(--arvy-en-logo-x, 0px) var(--arvy-en-logo-y, 0px);
}

.arvy-entete .arvy-entete__logo-image {
	grid-area: 1 / 1;
	display: block;
	width: auto;
	height: var(--arvy-en-logo-hauteur, 36px);
	max-width: none;
	transition: opacity 0.35s ease, filter 0.35s ease;
}

/* En haut de page, la version claire du logo remplace la version normale. */
.arvy-entete .arvy-entete__logo-image--clair {
	opacity: var(--arvy-en-x-logo-clair);
}

.arvy-entete .arvy-entete__logo-image--normal:not(:only-child) {
	opacity: calc(1 - var(--arvy-en-x-logo-clair));
}

/* Un seul logo : passé en blanc en haut de page (réglage « Logo en blanc »). */
.arvy-entete.arvy-entete--logo-blanc .arvy-entete__logo-image--normal:only-child {
	filter: var(--arvy-en-x-logo-filtre);
}

.arvy-entete .arvy-entete__logo-texte {
	grid-area: 1 / 1;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
	white-space: nowrap;
}

.arvy-entete .arvy-entete__logo:focus {
	outline: none;
	box-shadow: none;
}

.arvy-entete .arvy-entete__logo:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
	border-radius: 6px;
	box-shadow: none;
}

/* ---- Liens (desktop) ---- */

/* Au centre exact de la barre, même si l'espace intérieur n'est pas le même à
   gauche et à droite. */
.arvy-entete .arvy-entete__nav {
	display: flex;
	align-self: stretch;
	justify-self: center;
	translate: calc((var(--arvy-en-d) - var(--arvy-en-g)) / 2) 0;
	transition: translate var(--arvy-en-largeur-duree, 0.6s) var(--arvy-en-courbe-largeur);
}

.arvy-entete .arvy-entete__liste {
	display: flex;
	align-items: stretch;
	height: 100%;
	gap: var(--arvy-en-ecart-liens, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.arvy-entete .arvy-entete__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	/* L'élément couvre toute la hauteur de la barre : la souris ne sort pas du
	   menu en descendant vers le panneau. */
	margin-block: calc(-1 * var(--arvy-en-v));
	padding-block: var(--arvy-en-v);
}

.arvy-entete .arvy-entete__lien,
.arvy-entete .arvy-entete__lien:hover {
	position: relative;
	display: inline-flex;
	color: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

/* Lien parent sans adresse : un vrai bouton, remis à zéro contre le style des
   boutons du kit (fond bleu, pastille, typo), survol et focus compris. */
.arvy-entete button.arvy-entete__lien,
.arvy-entete button.arvy-entete__lien:hover,
.arvy-entete button.arvy-entete__lien:focus {
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
	text-transform: none;
	cursor: pointer;
}

/* Soulignement qui se dessine au survol et sur le menu ouvert. */
.arvy-entete .arvy-entete__lien::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform 0.5s var(--arvy-en-courbe);
}

@media (hover: hover) and (pointer: fine) {
	.arvy-entete .arvy-entete__lien:hover::after {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

.arvy-entete .arvy-entete__item.est-ouvert > .arvy-entete__lien::after,
.arvy-entete .arvy-entete__lien:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.arvy-entete .arvy-entete__lien:focus {
	outline: none;
	box-shadow: none;
}

.arvy-entete .arvy-entete__lien:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 6px;
	border-radius: 4px;
	box-shadow: none;
}

.arvy-entete .arvy-entete__pastille {
	position: absolute;
	top: -13px;
	right: -16px;
	min-width: 1.6em;
	box-sizing: border-box;
	padding: 2px 6px 1px;
	border-radius: 999px;
	background-color: var(--arvy-en-pastille-fond, #2E5DFF);
	color: var(--arvy-en-pastille-texte, #FFFFFF);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	pointer-events: none;
}

/* ---- Panneau déroulant ---- */

.arvy-entete .arvy-entete__panneau {
	position: absolute;
	top: 100%;
	left: var(--arvy-en-panneau-x, 50%);
	z-index: 2;
	box-sizing: border-box;
	width: var(--arvy-en-panneau-largeur, 704px);
	max-width: calc(100vw - 20px);
	/* Pont invisible entre la barre et la carte. */
	padding-top: var(--arvy-en-panneau-ecart, 16px);
	translate: var(--arvy-en-panneau-decalage, -50%) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity 0.35s ease,
		transform 0.5s var(--arvy-en-courbe),
		visibility 0s linear 0.35s;
}

/* Sans script : le survol et le clavier ouvrent quand même. */
@media (hover: hover) and (pointer: fine) {
	.arvy-entete:not(.est-pret) .arvy-entete__item:hover > .arvy-entete__panneau {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
}

.arvy-entete:not(.est-pret) .arvy-entete__item:focus-within > .arvy-entete__panneau,
.arvy-entete .arvy-entete__item.est-ouvert > .arvy-entete__panneau {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 0.45s ease,
		transform 0.6s var(--arvy-en-courbe),
		visibility 0s linear 0s;
}

.arvy-entete .arvy-entete__carte {
	position: relative;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 12px;
	padding: var(--arvy-en-carte-padding, 24px);
	border-radius: var(--arvy-en-carte-rayon, 28px);
	background-color: var(--arvy-en-carte-fond, #FFFFFF);
	box-shadow: 0 30px 70px -20px rgba(26, 26, 27, 0.28);
	color: #1A1A1B;
	white-space: normal;
}

.arvy-entete .arvy-entete__carte--seule {
	grid-template-columns: 1fr;
}

/* Petite pointe tournée vers le lien. */
.arvy-entete .arvy-entete__carte::before {
	content: "";
	position: absolute;
	top: -6px;
	left: var(--arvy-en-fleche-x, 50%);
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: inherit;
	transform: translateX(-50%) rotate(45deg);
}

.arvy-entete .arvy-entete__sous-liste {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.arvy-entete .arvy-entete__sous-liste > li {
	margin: 0;
}

.arvy-entete .arvy-entete__sous-lien,
.arvy-entete .arvy-entete__sous-lien:hover,
.arvy-entete .arvy-entete__encart,
.arvy-entete .arvy-entete__encart:hover {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--arvy-en-sous-titre, #1A1A1B);
	text-decoration: none;
	transition: background-color 0.35s ease;
}

.arvy-entete .arvy-entete__sous-lien {
	padding: 12px 16px;
	border-radius: var(--arvy-en-sous-rayon, 16px);
}

.arvy-entete .arvy-entete__sous-titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--arvy-en-sous-titre, #1A1A1B);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.3px;
}

.arvy-entete .arvy-entete__sous-texte {
	color: var(--arvy-en-sous-texte, #6B7477);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
}

.arvy-entete .arvy-entete__petite-fleche {
	flex: none;
	width: 14px;
	height: 14px;
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity 0.35s ease, transform 0.5s var(--arvy-en-courbe);
}

@media (hover: hover) and (pointer: fine) {
	.arvy-entete a.arvy-entete__sous-lien:hover,
	.arvy-entete a.arvy-entete__encart:hover {
		background-color: var(--arvy-en-sous-survol, #F9F7F2);
	}

	.arvy-entete a.arvy-entete__sous-lien:hover .arvy-entete__petite-fleche,
	.arvy-entete a.arvy-entete__encart:hover .arvy-entete__petite-fleche {
		opacity: 1;
		transform: none;
	}

	.arvy-entete a.arvy-entete__encart:hover .arvy-entete__encart-image {
		transform: scale(1.04);
	}
}

.arvy-entete .arvy-entete__sous-lien:focus,
.arvy-entete .arvy-entete__encart:focus {
	outline: none;
	box-shadow: none;
}

.arvy-entete .arvy-entete__sous-lien:focus-visible,
.arvy-entete .arvy-entete__encart:focus-visible {
	background-color: var(--arvy-en-sous-survol, #F9F7F2);
	outline: 2px solid var(--arvy-en-focus, #2E5DFF);
	outline-offset: 0;
	box-shadow: none;
}

.arvy-entete .arvy-entete__sous-lien:focus-visible .arvy-entete__petite-fleche,
.arvy-entete .arvy-entete__encart:focus-visible .arvy-entete__petite-fleche {
	opacity: 1;
	transform: none;
}

.arvy-entete .arvy-entete__encart,
.arvy-entete .arvy-entete__encart:hover {
	gap: 6px;
	padding: 20px;
	border-radius: var(--arvy-en-encart-rayon, 20px);
	background-color: var(--arvy-en-encart-fond, #F4F1EA);
}

.arvy-entete .arvy-entete__encart .arvy-entete__sous-texte {
	margin-bottom: 14px;
}

.arvy-entete .arvy-entete__encart-cadre {
	display: block;
	margin-top: auto;
	overflow: hidden;
	border-radius: 14px;
	aspect-ratio: 4 / 3;
}

.arvy-entete .arvy-entete__encart-cadre img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.8s var(--arvy-en-courbe);
}

/* ---- Voile derrière un panneau ouvert ---- */

.arvy-entete .arvy-entete__voile {
	position: fixed;
	inset: 0;
	z-index: calc(var(--arvy-en-z, 1000) - 1);
	background-color: var(--arvy-en-voile, rgba(26, 26, 27, 0.12));
	-webkit-backdrop-filter: blur(var(--arvy-en-voile-flou, 10px));
	backdrop-filter: blur(var(--arvy-en-voile-flou, 10px));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.arvy-entete.est-panneau-ouvert .arvy-entete__voile {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0s linear 0s;
}

/* ---- Bouton ARVY (droite de la barre et bas du menu mobile) ----
   Couleurs selon l'état de la barre : en haut de page, ton « haut » (Clair
   par défaut) ; barre resserrée ou menu ouvert, ton normal (Foncé).
   La barre est fixée : elle isole son contenu du reste de la page. Le texte
   transparent laisse donc voir le fond de la barre, pas la page derrière. */

.arvy-entete .arvy-entete__actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
}

.arvy-entete .arvy-entete__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--arvy-en-bouton-ecart, 10px);
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 24px;
	color: var(--arvy-en-b-texte);
	background-color: var(--arvy-en-b-fond);
	border: 1px solid var(--arvy-en-b-fond);
	border-radius: 999px;
	box-shadow: none;
	mix-blend-mode: var(--arvy-en-b-fusion);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.8px;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--arvy-en-bouton-douceur, 0.35s) ease,
		background-color var(--arvy-en-bouton-douceur, 0.35s) ease,
		border-color var(--arvy-en-bouton-douceur, 0.35s) ease;
}

.arvy-entete .arvy-entete__actions > .arvy-entete__bouton {
	white-space: nowrap;
}

/* Dans le menu mobile, sur un écran très étroit, le texte passe sur deux
   lignes centrées plutôt que d'être coupé. */
.arvy-entete .arvy-entete__bouton-texte {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	text-wrap: balance;
	text-align: center;
}

.arvy-entete .arvy-entete__actions > .arvy-entete__bouton .arvy-entete__bouton-texte {
	white-space: nowrap;
}

.arvy-entete .arvy-entete__bouton-fleche {
	flex: none;
	display: block;
	width: var(--arvy-en-bouton-fleche, 0.8em);
	height: var(--arvy-en-bouton-fleche, 0.8em);
	overflow: visible;
}

.arvy-entete a.arvy-entete__bouton:hover,
.arvy-entete a.arvy-entete__bouton:focus-visible {
	cursor: pointer;
	color: var(--arvy-en-bouton-texte-survol, var(--arvy-en-b-fond));
	background-color: var(--arvy-en-bouton-fond-survol, transparent);
	border-color: var(--arvy-en-bouton-bordure-survol, var(--arvy-en-b-fond));
	text-decoration: none;
}

.arvy-entete a.arvy-entete__bouton:focus {
	outline: none;
	box-shadow: none;
}

.arvy-entete a.arvy-entete__bouton:focus-visible {
	outline: 2px solid var(--arvy-en-b-fond);
	outline-offset: 4px;
	box-shadow: none;
}

/* ---- Bouton du menu (tablette et mobile) ----
   Le kit du site stylise tous les <button> (fond bleu, pastille, typo) :
   tout est remis à zéro, survol et focus compris. */

.arvy-entete .arvy-entete__burger,
.arvy-entete .arvy-entete__burger:hover,
.arvy-entete .arvy-entete__burger:focus {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--arvy-en-burger-taille, 44px);
	height: var(--arvy-en-burger-taille, 44px);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	box-shadow: none;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.arvy-entete .arvy-entete__burger:focus {
	outline: none;
}

.arvy-entete .arvy-entete__burger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
	box-shadow: none;
}

.arvy-entete .arvy-entete__traits {
	position: relative;
	display: block;
	width: var(--arvy-en-traits-largeur, 22px);
	height: 14px;
}

.arvy-entete .arvy-entete__traits span {
	position: absolute;
	left: 0;
	width: 100%;
	height: var(--arvy-en-traits-epaisseur, 2px);
	margin-top: calc(var(--arvy-en-traits-epaisseur, 2px) / -2);
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.5s var(--arvy-en-courbe), opacity 0.3s ease;
}

.arvy-entete .arvy-entete__traits span:nth-child(1) { top: 1px; }
.arvy-entete .arvy-entete__traits span:nth-child(2) { top: 7px; }
.arvy-entete .arvy-entete__traits span:nth-child(3) { top: 13px; }

.arvy-entete.est-tiroir-ouvert .arvy-entete__traits span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.arvy-entete.est-tiroir-ouvert .arvy-entete__traits span:nth-child(2) { opacity: 0; }
.arvy-entete.est-tiroir-ouvert .arvy-entete__traits span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.arvy-entete .arvy-entete__masque {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Verrou du défilement quand le menu mobile est ouvert. */
html.arvy-entete-bloque,
html.arvy-entete-bloque body {
	overflow: hidden;
}

/* ---- Menu déroulé dans la barre (tablette et mobile) ---- */

.arvy-entete .arvy-entete__tiroir {
	display: none;
}

@media (max-width: 1024px) {
	.arvy-entete .arvy-entete__rangee {
		grid-template-columns: 1fr auto;
	}

	.arvy-entete .arvy-entete__nav,
	.arvy-entete .arvy-entete__actions > .arvy-entete__bouton {
		display: none;
	}

	.arvy-entete .arvy-entete__burger,
	.arvy-entete .arvy-entete__burger:hover,
	.arvy-entete .arvy-entete__burger:focus {
		display: inline-flex;
	}

	.arvy-entete .arvy-entete__tiroir {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition:
			grid-template-rows 0.45s var(--arvy-en-courbe-largeur) 0.1s,
			visibility 0s linear 0.6s;
	}

	.arvy-entete.est-tiroir-ouvert .arvy-entete__tiroir {
		grid-template-rows: 1fr;
		visibility: visible;
		transition:
			grid-template-rows 0.55s var(--arvy-en-courbe-largeur) 0.15s,
			visibility 0s linear 0s;
	}

	/* Jamais plus haut que l'écran (téléphone à l'horizontale) : le menu
	   défile alors à l'intérieur, la page restant bloquée derrière. */
	.arvy-entete .arvy-entete__tiroir-interieur {
		min-height: 0;
		max-height: calc(100dvh - var(--arvy-en-haut, 16px) - var(--arvy-en-burger-taille, 44px) - 2 * var(--arvy-en-v) - 16px);
		overflow: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
	}

	.arvy-entete .arvy-entete__tiroir-contenu {
		padding: var(--arvy-en-tiroir-espace, 36px) 2px 14px;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.arvy-entete.est-tiroir-ouvert .arvy-entete__tiroir-contenu {
		opacity: 1;
		transition: opacity 0.8s ease 0.3s;
	}

	/* Menu ouvert : la barre reprend toute la largeur, fond blanc plein. */
	.arvy-entete.est-tiroir-ouvert {
		--arvy-en-g: var(--arvy-en-padding-g, 18px);
		--arvy-en-d: var(--arvy-en-padding-d, 6px);
		--arvy-en-x-largeur: calc(100% - 2 * var(--arvy-en-marge, 10px));
		--arvy-en-x-fond: var(--arvy-en-fond-ouvert, #FFFFFF);
		--arvy-en-x-texte: var(--arvy-en-texte, #1A1A1B);
		--arvy-en-x-ombre: var(--arvy-en-ombre, 0 10px 40px -12px rgba(26, 26, 27, 0.18));
		--arvy-en-x-flou: 0px;
		--arvy-en-x-logo-clair: 0;
		--arvy-en-x-logo-filtre: none;
		--arvy-en-b-fond: var(--arvy-en-bouton-fond, #1A1A1B);
		--arvy-en-b-texte: var(--arvy-en-bouton-texte, #FFFFFF);
		--arvy-en-b-fusion: var(--arvy-en-bouton-fusion, multiply);
	}

	.arvy-entete.est-tiroir-ouvert .arvy-entete__barre {
		border-radius: var(--arvy-en-rayon-ouvert, 24px);
	}

	.arvy-entete .arvy-entete__surtitre {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 18px;
		color: var(--arvy-en-surtitre, #1A1A1B);
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
	}

	.arvy-entete .arvy-entete__surtitre::before {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--arvy-en-point, #2E5DFF);
	}

	.arvy-entete .arvy-entete__tiroir-liste {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--arvy-en-tiroir-ecart, 4px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.arvy-entete .arvy-entete__tiroir-liste > li {
		margin: 0;
	}

	.arvy-entete .arvy-entete__tiroir-lien,
	.arvy-entete .arvy-entete__tiroir-lien:hover {
		position: relative;
		display: inline-block;
		color: var(--arvy-en-tiroir-lien, #1A1A1B);
		font-size: 48px;
		font-weight: 700;
		line-height: 1.05;
		letter-spacing: -1.5px;
		text-decoration: none;
	}

	.arvy-entete .arvy-entete__tiroir-lien .arvy-entete__pastille {
		top: -4px;
		right: -26px;
		font-size: 12px;
	}

	.arvy-entete .arvy-entete__tiroir-lien:focus {
		outline: none;
		box-shadow: none;
	}

	.arvy-entete .arvy-entete__tiroir-lien:focus-visible {
		outline: 2px solid var(--arvy-en-focus, #2E5DFF);
		outline-offset: 4px;
		border-radius: 6px;
		box-shadow: none;
	}

	.arvy-entete .arvy-entete__tiroir .arvy-entete__bouton {
		margin-top: var(--arvy-en-tiroir-bouton-espace, 32px);
	}

	/* ---- Sous-menus déroulés dans le menu mobile ----
	   Le lien à sous-menu est un bouton : il déroule ses sous-pages dessous.
	   Remis à zéro contre le style des boutons du kit et du thème. */

	.arvy-entete .arvy-entete__tiroir-item--sous {
		align-self: stretch;
	}

	.arvy-entete button.arvy-entete__tiroir-lien,
	.arvy-entete button.arvy-entete__tiroir-lien:hover,
	.arvy-entete button.arvy-entete__tiroir-lien:focus {
		display: inline-flex;
		align-items: center;
		gap: var(--arvy-en-plus-ecart, 18px);
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--arvy-en-tiroir-lien, #1A1A1B);
		font-family: inherit;
		text-align: left;
		text-transform: none;
		white-space: normal;
		cursor: pointer;
		transition: none;
		-webkit-tap-highlight-color: transparent;
	}

	.arvy-entete .arvy-entete__tiroir-texte {
		position: relative;
	}

	/* La pastille déborde à droite du texte : le « + » s'écarte d'autant.
	   Par variable : la règle du survol et du focus, plus spécifique, ne
	   touche pas à l'écart (le « + » venait se poser sur la pastille). */
	.arvy-entete .arvy-entete__tiroir-ouvrir:has( .arvy-entete__pastille ) {
		--arvy-en-plus-ecart: 40px;
	}

	/* « + » dessiné, qui tourne en « × » quand le sous-menu est ouvert. */
	.arvy-entete .arvy-entete__plus {
		position: relative;
		flex: none;
		width: 0.42em;
		height: 0.42em;
		transition: transform var(--arvy-en-tiroir-sous-duree, 0.5s) var(--arvy-en-courbe);
	}

	.arvy-entete .arvy-entete__plus::before,
	.arvy-entete .arvy-entete__plus::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: max(2px, 0.065em);
		border-radius: 2px;
		background: currentColor;
		transform: translateY(-50%);
	}

	.arvy-entete .arvy-entete__plus::after {
		transform: translateY(-50%) rotate(90deg);
	}

	.arvy-entete .arvy-entete__tiroir-item.est-ouvert .arvy-entete__plus {
		transform: rotate(45deg);
	}

	.arvy-entete .arvy-entete__tiroir-sous {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition:
			grid-template-rows var(--arvy-en-tiroir-sous-duree, 0.5s) var(--arvy-en-courbe),
			visibility 0s linear var(--arvy-en-tiroir-sous-duree, 0.5s);
	}

	.arvy-entete .arvy-entete__tiroir-item.est-ouvert > .arvy-entete__tiroir-sous {
		grid-template-rows: 1fr;
		visibility: visible;
		transition:
			grid-template-rows var(--arvy-en-tiroir-sous-duree, 0.5s) var(--arvy-en-courbe),
			visibility 0s linear 0s;
	}

	.arvy-entete .arvy-entete__tiroir-sous-interieur {
		min-height: 0;
		overflow: hidden;
	}

	.arvy-entete .arvy-entete__tiroir-sous-liste {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--arvy-en-tiroir-sous-ecart, 12px);
		margin: 0;
		padding: 14px 0 12px;
		list-style: none;
	}

	.arvy-entete .arvy-entete__tiroir-sous-liste > li {
		margin: 0;
	}

	.arvy-entete .arvy-entete__tiroir-sous-lien,
	.arvy-entete .arvy-entete__tiroir-sous-lien:hover {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		color: var(--arvy-en-tiroir-sous, #1A1A1B);
		font-size: 22px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.5px;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.arvy-entete .arvy-entete__tiroir-sous-lien .arvy-entete__petite-fleche {
		width: 0.62em;
		height: 0.62em;
		opacity: 0.45;
		transform: none;
	}

	.arvy-entete .arvy-entete__tiroir-sous-lien:focus,
	.arvy-entete button.arvy-entete__tiroir-lien:focus {
		outline: none;
		box-shadow: none;
	}

	.arvy-entete .arvy-entete__tiroir-sous-lien:focus-visible,
	.arvy-entete button.arvy-entete__tiroir-lien:focus-visible {
		outline: 2px solid var(--arvy-en-focus, #2E5DFF);
		outline-offset: 4px;
		border-radius: 6px;
		box-shadow: none;
	}
}

/* ---- Replis par appareil (valeurs par défaut des réglages) ----
   En fin de fichier : à spécificité égale, une règle écrite plus bas
   l'emporterait sur ces @media. */

@media (max-width: 1024px) {
	.arvy-entete {
		--arvy-en-haut: 16px;
		--arvy-en-largeur-reduite: 256px;
		--arvy-en-padding-v: 6px;
		--arvy-en-padding-g: 18px;
		--arvy-en-padding-d: 6px;
		--arvy-en-padding-haut-g: 22px;
		--arvy-en-padding-haut-d: 9px;
		--arvy-en-rayon: 28px;
		--arvy-en-logo-hauteur: 30px;
	}

	.arvy-entete .arvy-entete__tiroir .arvy-entete__bouton {
		font-size: 17px;
		letter-spacing: -1.5px;
	}
}

@media (max-width: 767px) {
	.arvy-entete {
		--arvy-en-padding-haut-g: 20px;
		--arvy-en-logo-hauteur: 28px;
	}

	.arvy-entete .arvy-entete__tiroir-lien,
	.arvy-entete .arvy-entete__tiroir-lien:hover {
		font-size: 40px;
		letter-spacing: -1.2px;
	}

	.arvy-entete .arvy-entete__tiroir-sous-lien,
	.arvy-entete .arvy-entete__tiroir-sous-lien:hover {
		font-size: 20px;
		letter-spacing: -0.4px;
	}

	.arvy-entete .arvy-entete__tiroir .arvy-entete__bouton {
		font-size: 19px;
		letter-spacing: -1.2px;
	}
}

/* Mouvement réduit : tout change d'état sans animation. */
@media (prefers-reduced-motion: reduce) {
	.arvy-entete *,
	.arvy-entete *::before,
	.arvy-entete *::after {
		transition: none !important;
	}
}

.arvy-no-motion .arvy-entete *,
.arvy-no-motion .arvy-entete *::before,
.arvy-no-motion .arvy-entete *::after {
	transition: none !important;
}