/**
 * Section Pied de page (widget « arvy-pied-page »).
 *
 * Une carte sombre : en haut le logo et les réseaux à gauche, les colonnes de
 * liens à droite ; au milieu le grand texte, ajusté à la largeur ; en bas les
 * mentions et la signature.
 *
 * Au défilement (souris seulement, comme la référence) : le fond se déploie de
 * haut en bas pendant que le pied de page entre dans l'écran, le contenu
 * apparaît en fondu et le grand texte monte. Animation CSS liée au défilement
 * (animation-timeline) : aucun script ; un navigateur qui ne la connaît pas
 * affiche tout, immobile.
 *
 * Structure et valeurs de repli seulement : tout ce qui se voit est réglé par
 * les contrôles Elementor, qui posent des variables « --arvy-pp-* » sur la
 * racine. Les replis par appareil sont en fin de fichier.
 */

/* Le conteneur Elementor ne doit ni figer la hauteur de la section (flex-wrap),
   ni se laisser élargir par elle. */
.e-con:has( > .elementor-widget-arvy-pied-page ),
.e-con-inner:has( > .elementor-widget-arvy-pied-page ) {
	flex-wrap: nowrap;
}

.elementor-widget-arvy-pied-page {
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

.arvy-pied-page {
	position: relative;
	view-timeline: --arvy-pp-vue block;
	color: #FFFFFF;
}

.arvy-pied-page .arvy-pied-page__masque {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Carte : le fond est un calque à part, pour pouvoir le déployer ---- */

.arvy-pied-page__fond {
	position: absolute;
	inset: 0;
	border-radius: var(--arvy-pp-rayon, 28px);
	background-color: var(--arvy-pp-fond, #1A1A1B);
	pointer-events: none;
}

.arvy-pied-page .arvy-pied-page__contenu {
	position: relative;
	padding: 48px 32px 28px;
}

/* ---- Haut : marque à gauche, colonnes à droite ---- */

.arvy-pied-page .arvy-pied-page__haut {
	display: flex;
	flex-direction: var(--arvy-pp-haut-sens, row);
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--arvy-pp-haut-ecart, 56px) 32px;
}

.arvy-pied-page .arvy-pied-page__marque {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--arvy-pp-espace-reseaux, 24px);
	min-width: 0;
	max-width: 100%;
}

.arvy-pied-page .arvy-pied-page__logo {
	display: inline-flex;
	max-width: 100%;
	color: inherit;
	text-decoration: none;
	border-radius: 4px;
}

.arvy-pied-page .arvy-pied-page__logo .arvy-pied-page__logo-image {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--arvy-pp-logo-hauteur, 44px);
	object-fit: contain;
	object-position: left center;
}

.arvy-pied-page .arvy-pied-page__logo--blanc .arvy-pied-page__logo-image {
	filter: brightness(0) invert(1);
}

.arvy-pied-page .arvy-pied-page__logo-texte {
	color: #FFFFFF;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.5px;
}

/* Réseaux sociaux : pastilles pictogramme (+ nom) + flèche. */
.arvy-pied-page .arvy-pied-page__reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: var(--arvy-pp-reseaux-ecart, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.arvy-pied-page .arvy-pied-page__reseaux > li {
	margin: 0;
	padding: 0;
}

.arvy-pied-page .arvy-pied-page__reseau {
	display: inline-flex;
	align-items: center;
	gap: var(--arvy-pp-reseau-ecart-fleche, 8px);
	padding: var(--arvy-pp-reseau-padding, 8px 12px);
	border-radius: var(--arvy-pp-reseau-rayon, 16px);
	background-color: var(--arvy-pp-reseau-fond, #FFFFFF);
	color: var(--arvy-pp-reseau-couleur, #1A1A1B);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition:
		border-radius var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)),
		background-color var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)),
		color var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

/* Le kit du site colore tous les liens au survol (« a:hover ») : la couleur
   reste la nôtre, y compris après un toucher. Seulement la couleur : une
   valeur de mise en page dans une règle d'état l'écraserait (piège 99). */
.arvy-pied-page a.arvy-pied-page__reseau:hover {
	color: var(--arvy-pp-reseau-couleur, #1A1A1B);
}

.arvy-pied-page .arvy-pied-page__reseau-icone {
	display: block;
	flex: none;
	width: var(--arvy-pp-reseau-icone, 16px);
	height: var(--arvy-pp-reseau-icone, 16px);
	fill: currentColor;
}

.arvy-pied-page .arvy-pied-page__reseau-icone--trait {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Icône choisie dans la bibliothèque d'Elementor (police ou SVG). */
.arvy-pied-page .arvy-pied-page__reseau-icone > svg,
.arvy-pied-page .arvy-pied-page__reseau-icone > i {
	display: block;
	width: 100%;
	height: 100%;
	font-size: var(--arvy-pp-reseau-icone, 16px);
	line-height: 1;
	fill: currentColor;
}

.arvy-pied-page .arvy-pied-page__reseau-nom {
	white-space: nowrap;
}

.arvy-pied-page .arvy-pied-page__reseau-fleche {
	display: block;
	flex: none;
	width: var(--arvy-pp-reseau-fleche, 12px);
	height: var(--arvy-pp-reseau-fleche, 12px);
	transition: transform var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

/* Colonnes de liens. Côte à côte : la zone est aussi large que ses colonnes (au
   moins la largeur réglée). Si elles ne tiennent pas à côté du logo, toute la
   zone passe dessous ; elle ne se coupe en rangées que si l'écran est trop étroit. */
.arvy-pied-page .arvy-pied-page__colonnes {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	justify-content: var(--arvy-pp-colonnes-justify, space-between);
	gap: var(--arvy-pp-colonnes-lignes, 40px) var(--arvy-pp-colonnes-ecart, 24px);
	width: var(--arvy-pp-zone, fit-content);
	min-width: var(--arvy-pp-zone-min, var(--arvy-pp-zone-largeur, 68%));
	max-width: 100%;
	box-sizing: border-box;
}

.arvy-pied-page .arvy-pied-page__colonne {
	flex: var(--arvy-pp-colonne-flex, 0 1 auto);
	min-width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	padding-left: var(--arvy-pp-colonne-retrait, 16px);
	border-left: var(--arvy-pp-filet-epaisseur, 1px) solid var(--arvy-pp-filet, rgba(255, 255, 255, 0.2));
}

.arvy-pied-page .arvy-pied-page__colonne-titre {
	margin: 0 0 var(--arvy-pp-colonne-titre-espace, 12px);
	color: var(--arvy-pp-colonne-titre, rgba(255, 255, 255, 0.5));
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.arvy-pied-page .arvy-pied-page__liens {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--arvy-pp-liens-ecart, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.arvy-pied-page .arvy-pied-page__liens > li {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.arvy-pied-page .arvy-pied-page__lien {
	display: inline-flex;
	max-width: 100%;
	color: var(--arvy-pp-lien, #FFFFFF);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.5px;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

.arvy-pied-page a.arvy-pied-page__lien:hover {
	color: var(--arvy-pp-lien, #FFFFFF);
}

/* Texte qui roule : la copie (ajoutée par le script, aria-hidden) arrive du
   bas. Marge compensée pour ne pas rogner les jambages. */
.arvy-pied-page .arvy-pied-page__lien-cadre {
	position: relative;
	display: block;
	overflow: hidden;
	padding-block: 0.12em;
	margin-block: -0.12em;
}

.arvy-pied-page .arvy-pied-page__lien-texte,
.arvy-pied-page .arvy-pied-page__lien-copie {
	display: block;
	transition: transform var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

.arvy-pied-page .arvy-pied-page__lien-copie {
	position: absolute;
	top: 0.12em;
	left: 0;
	right: 0;
	transform: translateY(calc(100% + 0.24em));
}

/* ---- Grand texte, ajusté à la largeur ---- */

.arvy-pied-page .arvy-pied-page__grand {
	margin: var(--arvy-pp-grand-espace, 120px) 0 var(--arvy-pp-grand-bas, 32px);
	container-type: inline-size;
	text-align: var(--arvy-pp-grand-aligne, left);
}

/* Taille « ajustée » : le script calcule le rapport taille / largeur
   (--arvy-pp-ratio), appliqué en unités de conteneur (cqi) : un redimensionnement
   ne demande aucun calcul. Le rendu PHP en pose une estimation. */
.arvy-pied-page .arvy-pied-page__grand-texte {
	display: block;
	margin: 0;
	color: var(--arvy-pp-grand-couleur, #FFFFFF);
	font-family: inherit;
	font-size: var(--arvy-pp-grand-taille, calc(var(--arvy-pp-ratio, 0.14) * 100cqi));
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.02em;
	white-space: var(--arvy-pp-grand-blanc, nowrap);
	text-box: trim-both cap alphabetic;
}

/* Un texte avec des jambages (g, j, p, q, y) garde leur place sous la dernière
   ligne : ils ne descendent pas sur les mentions. */
.arvy-pied-page .arvy-pied-page__grand-texte--jambages {
	text-box: trim-both cap text;
}

/* En ligne (pas inline-block) : le rognage aux capitales s'applique à chaque
   ligne quand le texte passe à la ligne. La montée anime le paragraphe. */
.arvy-pied-page .arvy-pied-page__grand-ligne {
	display: inline;
}

.arvy-pied-page .arvy-pied-page__grand-point {
	display: inline-block;
	width: var(--arvy-pp-point-taille, 0.15em);
	height: var(--arvy-pp-point-taille, 0.15em);
	margin-left: var(--arvy-pp-point-ecart, 0.06em);
	border-radius: 0;
	background-color: var(--arvy-pp-point, #2E5DFF);
	vertical-align: baseline;
}

.arvy-pied-page .arvy-pied-page__grand-point--rond {
	border-radius: 50%;
}

/* ---- Bas : mentions et signature ---- */

.arvy-pied-page .arvy-pied-page__bas {
	display: flex;
	flex-direction: var(--arvy-pp-bas-sens, row);
	justify-content: space-between;
	align-items: var(--arvy-pp-bas-aligne, center);
	gap: 12px 32px;
}

/* Points entre les mentions : posés AVANT chaque mention, dans son retrait. La
   liste est décalée de la largeur du retrait vers la gauche et son cadre rogne à
   gauche : le point d'une mention qui commence une ligne sort du cadre. Jamais
   de point seul en bout ou en début de ligne. */
.arvy-pied-page .arvy-pied-page__mentions-cadre {
	min-width: 0;
	overflow-x: clip;
}

.arvy-pied-page .arvy-pied-page__mentions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 6px;
	margin: 0 0 0 calc(-1 * var(--arvy-pp-mentions-ecart, 24px));
	padding: 0;
	list-style: none;
}

.arvy-pied-page .arvy-pied-page__mention,
.arvy-pied-page .arvy-pied-page__signature {
	color: var(--arvy-pp-mention, rgba(255, 255, 255, 0.72));
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.arvy-pied-page .arvy-pied-page__mention {
	position: relative;
	margin: 0;
	padding: 0 0 0 var(--arvy-pp-mentions-ecart, 24px);
}

.arvy-pied-page .arvy-pied-page__mention::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--arvy-pp-mentions-ecart, 24px) / 2);
	width: var(--arvy-pp-separateur, 4px);
	height: var(--arvy-pp-separateur, 4px);
	border-radius: 50%;
	background-color: var(--arvy-pp-separateur-couleur, currentColor);
	transform: translate(-50%, -50%);
}

.arvy-pied-page .arvy-pied-page__signature {
	flex: none;
	max-width: 100%;
	margin: 0;
}

.arvy-pied-page .arvy-pied-page__mention a,
.arvy-pied-page .arvy-pied-page__mention a:hover,
.arvy-pied-page .arvy-pied-page__signature a,
.arvy-pied-page .arvy-pied-page__signature a:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition:
		color var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)),
		text-decoration-color var(--arvy-pp-duree, 0.6s) var(--arvy-pp-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

/* ---- Focus clavier : le thème Hello pose un halo sur tous les liens ---- */

.arvy-pied-page .arvy-pied-page__contenu a:focus {
	outline: none;
	box-shadow: none;
}

.arvy-pied-page .arvy-pied-page__contenu a:focus-visible {
	outline: 2px solid var(--arvy-pp-focus, #2E5DFF);
	outline-offset: 3px;
	box-shadow: none;
}

/* ---- Survol (souris) et focus clavier ---- */

.arvy-pied-page .arvy-pied-page__contenu a.arvy-pied-page__lien:focus-visible {
	color: var(--arvy-pp-lien-survol, #2E5DFF);
}

.arvy-pied-page--roule.est-pret .arvy-pied-page__lien:focus-visible .arvy-pied-page__lien-texte {
	transform: translateY(calc(-100% - 0.24em));
}

.arvy-pied-page--roule.est-pret .arvy-pied-page__lien:focus-visible .arvy-pied-page__lien-copie {
	transform: translateY(0);
}

.arvy-pied-page .arvy-pied-page__contenu a.arvy-pied-page__reseau:focus-visible {
	border-radius: var(--arvy-pp-reseau-rayon-survol, 6px);
	background-color: var(--arvy-pp-reseau-fond-survol, var(--arvy-pp-reseau-fond, #FFFFFF));
	color: var(--arvy-pp-reseau-couleur-survol, var(--arvy-pp-reseau-couleur, #1A1A1B));
}

.arvy-pied-page .arvy-pied-page__contenu .arvy-pied-page__mention a:focus-visible,
.arvy-pied-page .arvy-pied-page__contenu .arvy-pied-page__signature a:focus-visible {
	color: var(--arvy-pp-mention-survol, #FFFFFF);
}

@media (hover: hover) and (pointer: fine) {
	.arvy-pied-page a.arvy-pied-page__lien:hover {
		color: var(--arvy-pp-lien-survol, #2E5DFF);
	}

	.arvy-pied-page--roule.est-pret a.arvy-pied-page__lien:hover .arvy-pied-page__lien-texte {
		transform: translateY(calc(-100% - 0.24em));
	}

	.arvy-pied-page--roule.est-pret a.arvy-pied-page__lien:hover .arvy-pied-page__lien-copie {
		transform: translateY(0);
	}

	.arvy-pied-page a.arvy-pied-page__reseau:hover {
		border-radius: var(--arvy-pp-reseau-rayon-survol, 6px);
		background-color: var(--arvy-pp-reseau-fond-survol, var(--arvy-pp-reseau-fond, #FFFFFF));
		color: var(--arvy-pp-reseau-couleur-survol, var(--arvy-pp-reseau-couleur, #1A1A1B));
	}

	.arvy-pied-page a.arvy-pied-page__reseau:hover .arvy-pied-page__reseau-fleche {
		transform: rotate(45deg);
	}

	.arvy-pied-page .arvy-pied-page__mention a:hover,
	.arvy-pied-page .arvy-pied-page__signature a:hover {
		color: var(--arvy-pp-mention-survol, #FFFFFF);
		text-decoration-color: currentColor;
	}
}

/* ---- Déploiement au défilement (souris seulement, jamais dans l'éditeur) ---- */

@keyframes arvy-pp-fond {
	from { clip-path: inset(0 0 100% 0 round var(--arvy-pp-rayon, 28px)); }
	to { clip-path: inset(0 0 0 0 round var(--arvy-pp-rayon, 28px)); }
}

@keyframes arvy-pp-fondu {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes arvy-pp-monte {
	from {
		opacity: 0;
		transform: translateY(var(--arvy-pp-grand-montee, 40%));
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
		:where(body:not(.elementor-editor-active)) .arvy-pied-page--deploiement .arvy-pied-page__fond {
			animation: arvy-pp-fond linear both;
			animation-timeline: --arvy-pp-vue;
			animation-range: entry 0% entry 100%;
		}

		:where(body:not(.elementor-editor-active)) .arvy-pied-page--deploiement .arvy-pied-page__contenu {
			animation: arvy-pp-fondu linear both;
			animation-timeline: --arvy-pp-vue;
			animation-range: entry 25% entry 85%;
		}

		:where(body:not(.elementor-editor-active)) .arvy-pied-page--montee .arvy-pied-page__grand-texte {
			animation: arvy-pp-monte linear both;
			animation-timeline: --arvy-pp-vue;
			animation-range: entry 55% entry 100%;
		}
	}
}

.arvy-no-motion .arvy-pied-page .arvy-pied-page__fond,
.arvy-no-motion .arvy-pied-page .arvy-pied-page__contenu,
.arvy-no-motion .arvy-pied-page .arvy-pied-page__grand-texte {
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.arvy-pied-page .arvy-pied-page__lien-texte {
		transform: none !important;
	}

	.arvy-pied-page .arvy-pied-page__lien-copie {
		display: none;
	}
}

.arvy-no-motion .arvy-pied-page .arvy-pied-page__lien-texte {
	transform: none !important;
}

.arvy-no-motion .arvy-pied-page .arvy-pied-page__lien-copie {
	display: none;
}

/* ---- Replis par appareil (sans CSS généré) : en fin de fichier, pour passer
   après les règles de base à spécificité égale. Les variables sont posées sur
   la racine : les réglages, plus spécifiques, l'emportent. ---- */

@media (max-width: 1024px) {
	.arvy-pied-page {
		--arvy-pp-haut-sens: column;
		--arvy-pp-zone: 100%;
		--arvy-pp-zone-min: 0px;
		--arvy-pp-colonne-flex: 1 1 calc(50% - var(--arvy-pp-colonnes-ecart, 24px));
		--arvy-pp-reseau-padding: 10px 14px;
		--arvy-pp-grand-espace: 72px;
		--arvy-pp-grand-bas: 28px;
		--arvy-pp-logo-hauteur: 40px;
	}

	.arvy-pied-page .arvy-pied-page__contenu {
		padding: 56px 28px 24px;
	}

	.arvy-pied-page .arvy-pied-page__lien {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	.arvy-pied-page {
		--arvy-pp-rayon: 20px;
		--arvy-pp-haut-ecart: 48px;
		--arvy-pp-colonnes-lignes: 32px;
		--arvy-pp-espace-reseaux: 20px;
		--arvy-pp-grand-espace: 56px;
		--arvy-pp-grand-bas: 24px;
		--arvy-pp-logo-hauteur: 36px;
		--arvy-pp-bas-sens: column;
		--arvy-pp-bas-aligne: flex-start;
	}

	.arvy-pied-page .arvy-pied-page__contenu {
		padding: 48px 20px 20px;
	}

	.arvy-pied-page .arvy-pied-page__lien {
		font-size: 19px;
	}

	.arvy-pied-page .arvy-pied-page__mention,
	.arvy-pied-page .arvy-pied-page__signature {
		font-size: 13px;
	}
}
