/**
 * Styles de la section Image et texte (widget « arvy-image-texte »).
 *
 * Deux conteneurs côte à côte : l'image d'un côté, le texte de l'autre
 * (surtitre, titre, description, points forts, bouton). Sur petit écran, ils
 * s'empilent. « Inverser » échange leurs places par « order », sans toucher au
 * HTML : l'ordre de lecture reste image puis texte.
 *
 * Tout ce qui change d'état (survol, focus, apparition) lit une variable posée
 * par un contrôle Elementor. Les valeurs de repli reprennent la charte ARVY et
 * ne servent qu'en l'absence de CSS généré.
 *
 * Les sélecteurs de repli sont à deux classes : le kit du site stylise h2 et
 * les liens (.elementor-kit-XXXX h2 — une classe et une balise), et doit
 * perdre face à la section.
 */

/* Sécurité 1 : un conteneur Elementor en colonne avec « flex-wrap: wrap » fige
   la hauteur de sa ligne au premier calcul ; une section dont la hauteur varie
   (retour à la ligne, police chargée tard) déborderait sur la suite. */
.e-con:has( > .elementor-widget-arvy-image-texte ),
.elementor-element:has( > .elementor-widget-arvy-image-texte ) {
	flex-wrap: nowrap;
}

/* Sécurité 2 : un élément de flex ne rétrécit pas sous la largeur de son
   contenu (min-width: auto) : aucun défilement horizontal de la page. */
.elementor-widget-arvy-image-texte {
	min-width: 0;
	max-width: 100%;
}

/* ─── Les deux conteneurs ─────────────────────────────────────────────────────
   Côte à côte : l'image prend sa largeur réglée (moins la moitié de l'écart),
   le texte le reste ; l'image suit la hauteur du texte, qui a une hauteur
   minimale. Empilés : l'image prend toute la largeur et son format. */

.arvy-image-texte {
	display: flex;
	flex-direction: var(--arvy-it-sens, row);
	align-items: stretch;
	gap: var(--arvy-it-ecart, 32px);
	min-height: var(--arvy-it-hauteur, 560px);
}

.arvy-image-texte__conteneur {
	min-width: 0;
}

.arvy-image-texte__conteneur--image {
	display: flex;
	flex: 0 0 var(--arvy-it-image-base, calc(var(--arvy-it-image-largeur, 50%) - var(--arvy-it-ecart, 32px) / 2));
	align-self: var(--arvy-it-aligne-empile, var(--arvy-it-image-aligne, stretch));
	order: var(--arvy-it-ordre-image, 0);
}

/* Une section sans texte : l'image prend toute la largeur. */
.arvy-image-texte .arvy-image-texte__conteneur--image:only-child {
	flex: 1 1 100%;
}

/* Une section sans image : le texte prend toute la largeur. */
.arvy-image-texte__conteneur--texte {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: var(--arvy-it-texte-vertical, center);
	align-items: var(--arvy-it-texte-horizontal, center);
	padding-block: var(--arvy-it-texte-espace, 80px);
	order: 1;
}

/* Replis de la disposition sur tablette et mobile (empilé), aux points de
   rupture d'Elementor par défaut. Les réglages du widget, plus spécifiques,
   l'emportent toujours : ces valeurs ne servent que sans CSS généré. */
@media (max-width: 1024px) {
	.arvy-image-texte {
		--arvy-it-sens: column;
		--arvy-it-image-base: auto;
		--arvy-it-image-min: 240px;
		--arvy-it-aligne-empile: stretch;
		--arvy-it-format: 16 / 9;
		--arvy-it-ecart: 40px;
		--arvy-it-hauteur: 0px;
		--arvy-it-texte-espace: 0px;
		--arvy-it-texte-horizontal: flex-start;
		--arvy-it-texte-largeur: 640px;
	}
}

@media (max-width: 767px) {
	.arvy-image-texte {
		--arvy-it-point-description-espace: 4px;
		--arvy-it-format: 1 / 1;
		--arvy-it-ecart: 32px;
		--arvy-it-rayon: 20px;
	}
}

/* ─── Image ───────────────────────────────────────────────────────────────── */

.arvy-image-texte .arvy-image-texte__visuel {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--arvy-it-image-min, 0px);
	aspect-ratio: var(--arvy-it-format, auto);
	margin: 0;
	overflow: hidden;
	border-radius: var(--arvy-it-rayon, 28px);
	background-color: rgba(26, 26, 27, 0.06);
	transition: opacity var(--arvy-it-apparition-duree, 1.2s) var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-it-delai, 0s);
}

/* L'apparition resserre l'image dans son cadre. */
.arvy-image-texte__zoom {
	position: absolute;
	inset: 0;
	transition: transform calc(var(--arvy-it-apparition-duree, 1.2s) * 1.4) var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-it-delai, 0s);
}

/* Sélecteur descendant : le garde-fou du socle (img { height: auto }) et la
   règle d'Elementor (.elementor img) l'emporteraient sur une seule classe.
   L'image déborde du cadre de la hauteur de la parallaxe, en haut et en bas :
   le script la fait glisser sans jamais laisser de vide. */
.arvy-image-texte .arvy-image-texte__zoom img {
	position: absolute;
	top: calc(var(--arvy-it-parallaxe, 40px) * -1);
	left: 0;
	display: block;
	width: 100%;
	height: calc(100% + var(--arvy-it-parallaxe, 40px) * 2);
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--arvy-it-cadrage, center center);
}

.arvy-image-texte[data-parallaxe="oui"] .arvy-image-texte__zoom img {
	will-change: transform;
}

.arvy-image-texte[data-parallaxe="non"] .arvy-image-texte__zoom img {
	top: 0;
	height: 100%;
}

/* ─── Textes ──────────────────────────────────────────────────────────────── */

.arvy-image-texte__contenu {
	width: 100%;
	min-width: 0;
	max-width: var(--arvy-it-texte-largeur, 600px);
}

.arvy-image-texte .arvy-image-texte__surtitre {
	display: flex;
	align-items: center;
	gap: var(--arvy-it-point-ecart, 10px);
	margin: 0 0 var(--arvy-it-espace-surtitre, 20px);
	color: #1A1A1B;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.arvy-image-texte__point {
	flex: none;
	width: var(--arvy-it-point-taille, 8px);
	height: var(--arvy-it-point-taille, 8px);
	border-radius: 50%;
	background-color: var(--arvy-it-point-couleur, #2E5DFF);
}

.arvy-image-texte .arvy-image-texte__titre {
	margin: 0;
	color: #1A1A1B;
	font-size: 66px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	text-wrap: balance;
}

.arvy-image-texte .arvy-image-texte__description {
	margin: var(--arvy-it-espace-description, 24px) 0 0;
	color: #6B7477;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

/* ─── Points forts ────────────────────────────────────────────────────────── */

.arvy-image-texte .arvy-image-texte__liste {
	display: flex;
	flex-direction: column;
	gap: var(--arvy-it-liste-ecart, 14px);
	margin: var(--arvy-it-espace-liste, 32px) 0 0;
	padding: 0;
	list-style: none;
}

.arvy-image-texte .arvy-image-texte__point-fort {
	display: flex;
	align-items: flex-start;
	gap: var(--arvy-it-coche-ecart, 14px);
	margin: 0;
	padding: 0;
	color: #1A1A1B;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.3px;
}

/* La pastille est centrée sur la PREMIÈRE ligne du texte (1lh), pas sur le
   bloc : un point fort sur deux lignes garde sa coche en haut. */
.arvy-image-texte__coche {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--arvy-it-coche-taille, 26px);
	height: var(--arvy-it-coche-taille, 26px);
	margin-top: max(0px, calc((1lh - var(--arvy-it-coche-taille, 26px)) / 2));
	color: var(--arvy-it-coche-couleur, #FFFFFF);
	background-color: var(--arvy-it-pastille-couleur, #2E5DFF);
	border-radius: 50%;
	font-size: calc(var(--arvy-it-coche-taille, 26px) * var(--arvy-it-coche-dessin, 0.56));
	line-height: 1;
	transition: transform 0.8s var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) calc(var(--arvy-it-delai, 0s) + 0.15s);
}

.arvy-image-texte .arvy-image-texte__coche svg {
	display: block;
	width: 1em;
	height: 1em;
	overflow: visible;
}

/* Icône choisie dans la bibliothèque d'Elementor : même taille que le dessin. */
.arvy-image-texte .arvy-image-texte__coche i {
	display: block;
	font-size: 1em;
	line-height: 1;
}

.arvy-image-texte .arvy-image-texte__coche svg:not(.arvy-image-texte__coche-dessin) {
	fill: currentColor;
}

.arvy-image-texte__coche-dessin path {
	stroke-dasharray: 20;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.7s var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) calc(var(--arvy-it-delai, 0s) + 0.35s);
}

/* Le corps prend la place restante à droite de la pastille : le texte, et
   sous lui la description facultative. La pastille reste calée sur la
   première ligne du texte (1lh du point fort). */
.arvy-image-texte__point-fort-corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.arvy-image-texte__point-fort-texte {
	display: block;
	min-width: 0;
	text-wrap: pretty;
}

.arvy-image-texte .arvy-image-texte__point-fort-description {
	display: block;
	margin-top: var(--arvy-it-point-description-espace, 6px);
	color: #6B7477;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-wrap: pretty;
}

.arvy-image-texte__action {
	max-width: 100%;
	margin-top: var(--arvy-it-espace-bouton, 36px);
}

/* Un élément vide n'est pas rendu : les espaces ne se cumulent jamais. */
.arvy-image-texte .arvy-image-texte__contenu > :first-child {
	margin-top: 0;
}

.arvy-image-texte .arvy-image-texte__contenu > .arvy-image-texte__surtitre:last-child {
	margin-bottom: 0;
}

.arvy-image-texte .arvy-image-texte__surtitre + .arvy-image-texte__description,
.arvy-image-texte .arvy-image-texte__surtitre + .arvy-image-texte__liste,
.arvy-image-texte .arvy-image-texte__surtitre + .arvy-image-texte__action {
	margin-top: 0;
}

/* ─── Bouton (modèle ARVY commun à toutes les sections) ───────────────────────
   Pastille pleine, texte et flèche « découpés » : ils laissent voir le fond.
   Le découpage est un vrai mode de fusion, pas une couleur recopiée : il reste
   juste sur une photo ou un dégradé.
   - Foncé (fond clair, défaut) : pastille foncée, texte blanc, fusion
     « produit » → le blanc devient transparent, le foncé reste foncé.
   - Clair (fond sombre) : pastille blanche, texte noir, fusion « écran ».
   Au survol, la pastille se vide : contour et texte prennent sa couleur.
   ⚠️ Aucun parent du bouton ne doit recevoir transform, opacity ou filter : il
   isolerait le bouton du fond et le texte perdrait sa transparence. */

.arvy-image-texte .arvy-image-texte__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--arvy-it-bouton-ecart, 10px);
	max-width: 100%;
	padding: 14px 24px;
	color: var(--arvy-it-bouton-texte, #FFFFFF);
	background-color: var(--arvy-it-bouton-fond, #1A1A1B);
	border: 1px solid var(--arvy-it-bouton-fond, #1A1A1B);
	border-radius: 999px;
	box-shadow: none;
	mix-blend-mode: var(--arvy-it-bouton-fusion, multiply);
	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-it-bouton-douceur, 0.35s) ease,
		background-color var(--arvy-it-bouton-douceur, 0.35s) ease,
		border-color var(--arvy-it-bouton-douceur, 0.35s) ease,
		opacity var(--arvy-it-apparition-duree, 1.2s) var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-it-delai, 0s),
		transform var(--arvy-it-apparition-duree, 1.2s) var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-it-delai, 0s);
}

/* Sur un écran très étroit, le texte passe sur deux lignes, centrées, plutôt
   que d'être coupé. Quand il tient sur une ligne, rien ne change. */
.arvy-image-texte .arvy-image-texte__bouton-texte {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	text-wrap: balance;
	text-align: center;
}

.arvy-image-texte .arvy-image-texte__bouton-fleche {
	flex: none;
	display: block;
	width: var(--arvy-it-bouton-fleche, 0.8em);
	height: var(--arvy-it-bouton-fleche, 0.8em);
	overflow: visible;
}

a.arvy-image-texte__bouton:hover,
a.arvy-image-texte__bouton:focus-visible {
	cursor: pointer;
}

.arvy-image-texte a.arvy-image-texte__bouton:hover,
.arvy-image-texte a.arvy-image-texte__bouton:focus-visible {
	color: var(--arvy-it-bouton-texte-survol, var(--arvy-it-bouton-fond, #1A1A1B));
	background-color: var(--arvy-it-bouton-fond-survol, transparent);
	border-color: var(--arvy-it-bouton-bordure-survol, var(--arvy-it-bouton-fond, #1A1A1B));
	text-decoration: none;
}

/* Le thème Hello pose un halo blanc et un contour noir sur tout lien au focus :
   on les remplace par un contour de la couleur de la pastille. */
.arvy-image-texte a.arvy-image-texte__bouton:focus {
	outline: none;
	box-shadow: none;
}

.arvy-image-texte a.arvy-image-texte__bouton:focus-visible {
	outline: 2px solid var(--arvy-it-bouton-fond, #1A1A1B);
	outline-offset: 4px;
	box-shadow: none;
}

/* ─── Apparition au défilement ────────────────────────────────────────────────
   Le script ne met en attente (« est-en-attente ») que si la section est encore
   sous l'écran : sans script, en cas d'erreur ou en mouvement réduit, rien n'est
   jamais masqué. L'image apparaît en se resserrant dans son cadre, puis le
   texte monte ligne à ligne et les coches se dessinent. */

.arvy-image-texte__surtitre[data-arvy-apparition],
.arvy-image-texte__titre[data-arvy-apparition],
.arvy-image-texte__description[data-arvy-apparition],
.arvy-image-texte__point-fort[data-arvy-apparition] {
	transition:
		opacity var(--arvy-it-apparition-duree, 1.2s) var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-it-delai, 0s),
		transform var(--arvy-it-apparition-duree, 1.2s) var(--arvy-it-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-it-delai, 0s);
}

.arvy-image-texte.est-en-attente [data-arvy-apparition] {
	opacity: 0;
	transform: translateY( var(--arvy-it-apparition-distance, 32px) );
}

.arvy-image-texte.est-en-attente .arvy-image-texte__visuel[data-arvy-apparition] {
	transform: none;
}

.arvy-image-texte.est-en-attente .arvy-image-texte__zoom {
	transform: scale( var(--arvy-it-zoom-depart, 1.15) );
}

.arvy-image-texte.est-en-attente .arvy-image-texte__coche {
	transform: scale(0.4);
}

.arvy-image-texte.est-en-attente .arvy-image-texte__coche-dessin path {
	stroke-dashoffset: 20;
}

/* ─── Mouvement réduit, impression ──────────────────────────────────────────
   « !important » : les règles d'attente ci-dessus ont plus de classes. */

@media (prefers-reduced-motion: reduce) {
	.arvy-image-texte.est-en-attente [data-arvy-apparition] {
		opacity: 1 !important;
		transform: none !important;
	}

	.arvy-image-texte.est-en-attente .arvy-image-texte__zoom,
	.arvy-image-texte.est-en-attente .arvy-image-texte__coche,
	.arvy-image-texte .arvy-image-texte__zoom img {
		transform: none !important;
	}

	.arvy-image-texte.est-en-attente .arvy-image-texte__coche-dessin path {
		stroke-dashoffset: 0 !important;
	}
}

.arvy-no-motion .arvy-image-texte.est-en-attente [data-arvy-apparition] {
	opacity: 1 !important;
	transform: none !important;
}

.arvy-no-motion .arvy-image-texte.est-en-attente .arvy-image-texte__zoom,
.arvy-no-motion .arvy-image-texte.est-en-attente .arvy-image-texte__coche,
.arvy-no-motion .arvy-image-texte .arvy-image-texte__zoom img {
	transform: none !important;
}

.arvy-no-motion .arvy-image-texte.est-en-attente .arvy-image-texte__coche-dessin path {
	stroke-dashoffset: 0 !important;
}

@media print {
	.arvy-image-texte.est-en-attente [data-arvy-apparition] {
		opacity: 1 !important;
		transform: none !important;
	}

	.arvy-image-texte.est-en-attente .arvy-image-texte__zoom,
	.arvy-image-texte.est-en-attente .arvy-image-texte__coche {
		transform: none !important;
	}

	.arvy-image-texte.est-en-attente .arvy-image-texte__coche-dessin path {
		stroke-dashoffset: 0 !important;
	}
}

/* Replis de taille par appareil, en fin de feuille : à spécificité égale, la
   dernière règle écrite l'emporte (ils ne servent que sans CSS généré). */
@media (max-width: 1024px) {
	.arvy-image-texte .arvy-image-texte__point-fort-description { font-size: 16px; }
}

@media (max-width: 767px) {
	.arvy-image-texte .arvy-image-texte__point-fort-description { font-size: 16px; }
}