/**
 * Section « Bande de réassurance » (widget « arvy-reassurance »).
 *
 * Une bande fine tenue par deux filets : à gauche un surtitre et les logos des
 * clients, à droite un mot court et le bouton ARVY. Un filet vertical sépare
 * les deux en desktop ; empilés, il devient horizontal et le mot peut passer
 * dans un encart teinté.
 *
 * Deux tons : « Clair » (la bande est posée sur le fond de la page) et
 * « Sombre » (la bande devient une carte encre arrondie). Le ton repeint d'un
 * coup les filets, les textes, les logos, l'encart et le bouton — un seul
 * choix, jamais un texte blanc sur un encart beige.
 *
 * Ce fichier ne contient que la structure et les valeurs de repli : tout ce qui
 * est visuel est un contrôle Elementor, qui pose une variable CSS. Les
 * sélecteurs de repli font au moins deux classes (le kit du site stylise les
 * liens et les titres avec une classe et une balise).
 */

/* Sécurité 1 : un conteneur Elementor en colonne avec « flex-wrap: wrap »
   fige la hauteur de sa ligne au premier calcul ; une bande dont la
   hauteur varie (logos qui passent à la ligne, police chargée tard)
   déborderait. */
.e-con:has( > .elementor-widget-arvy-reassurance ),
.elementor-element:has( > .elementor-widget-arvy-reassurance ) {
	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-reassurance {
	min-width: 0;
	max-width: 100%;
}

/* ─── La bande et ses deux zones ────────────────────────────────────── */

.arvy-reassurance__bande {
	box-sizing: border-box;
	background: var(--arvy-rea-fond, transparent);
	border-radius: var(--arvy-rea-rayon, 0px);
	padding-left: var(--arvy-rea-lateral, 0px);
	padding-right: var(--arvy-rea-lateral, 0px);
	display: flex;
	flex-direction: var(--arvy-rea-sens, row);
	align-items: var(--arvy-rea-vertical, flex-start);
	border-top: var(--arvy-rea-filet-haut, 1px) solid var(--arvy-rea-filet, rgba(26, 26, 27, 0.14));
	border-bottom: var(--arvy-rea-filet-bas, 1px) solid var(--arvy-rea-filet, rgba(26, 26, 27, 0.14));
	padding-top: var(--arvy-rea-espace-haut, 40px);
	padding-bottom: var(--arvy-rea-espace-bas, 40px);
}

.arvy-reassurance__logos {
	flex: 1 1 auto;
	min-width: 0;
	/* Côte à côte, l'écart est porté à droite des logos ; empilés, en bas :
	   le filet de séparation tombe alors pile au milieu de l'écart. */
	padding-right: var(--arvy-rea-logos-fin, 56px);
	padding-bottom: var(--arvy-rea-logos-bas, 0px);
}

.arvy-reassurance__mot {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: var(--arvy-rea-mot-largeur, 32%);
	min-width: 0;
	border-left: var(--arvy-rea-sep-gauche, 1px) solid var(--arvy-rea-filet, rgba(26, 26, 27, 0.14));
	border-top: var(--arvy-rea-sep-haut, 0px) solid var(--arvy-rea-filet, rgba(26, 26, 27, 0.14));
	padding-left: var(--arvy-rea-mot-gauche, 56px);
	padding-top: var(--arvy-rea-mot-haut, 0px);
}

/* La zone des logos occupe toute la bande quand le mot est absent. */
.arvy-reassurance__logos:only-child {
	padding-right: 0;
	padding-bottom: 0;
}

/* L'encart : transparent en desktop, teinté quand la bande est empilée
   (réglage par appareil). Il est à part du cadre pour que le filet de
   séparation reste au-dessus, à distance. */
.arvy-reassurance__encart {
	background: var(--arvy-rea-encart-fond, transparent);
	border-radius: var(--arvy-rea-encart-rayon, 0px);
	padding: var(--arvy-rea-encart-espace, 0px);
}

/* ─── Surtitre ──────────────────────────────────────────────────────── */

.arvy-reassurance .arvy-reassurance__surtitre {
	display: flex;
	align-items: center;
	gap: var(--arvy-rea-point-ecart, 10px);
	margin: 0 0 var(--arvy-rea-surtitre-bas, 28px);
	color: var(--arvy-rea-surtitre-couleur, #1A1A1B);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

/* Le point rond, clin d'œil au logo : même pastille que sur les autres
   sections (Expertises, Appel à l'action, Présentation, Points clés). */
.arvy-reassurance .arvy-reassurance__point {
	flex: 0 0 auto;
	width: var(--arvy-rea-point-taille, 8px);
	height: var(--arvy-rea-point-taille, 8px);
	border-radius: 50%;
	background: var(--arvy-rea-point-couleur, #2E5DFF);
}

/* ─── La liste des logos ────────────────────────────────────────────── */

.arvy-reassurance .arvy-reassurance__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--arvy-rea-logos-aligne, flex-start);
	column-gap: var(--arvy-rea-logos-ecart, 36px);
	row-gap: var(--arvy-rea-logos-ecart-v, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.arvy-reassurance .arvy-reassurance__item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* « Automatique » : chaque logo garde sa largeur. Un nombre de logos
	   par ligne pose une largeur calculée, moins 0,02 px : cet arrondi en
	   moins évite qu'un logo descende d'une ligne (le passage à la ligne
	   se décide avant le rétrécissement). */
	flex: 0 0 auto;
	width: var(--arvy-rea-item-largeur, auto);
	max-width: 100%;
}

/* Sélecteur descendant obligatoire : le socle impose « height: auto » à
   toute image de section (.arvy-section img), à une seule classe. */
.arvy-reassurance .arvy-reassurance__item img {
	display: block;
	height: var(--arvy-rea-logo-hauteur, 28px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: var(--arvy-rea-logo-filtre, grayscale(1));
	opacity: var(--arvy-rea-logo-opacite, 1);
	transition:
		filter var(--arvy-rea-douceur, 0.35s) ease,
		opacity var(--arvy-rea-douceur, 0.35s) ease;
}

/* Rendu des logos : la couleur d'origine, les niveaux de gris, l'encre
   (brightness(0)) ou le blanc (brightness(0) invert(1)) — un seul filtre,
   posé par le réglage, comme pour les logos de l'En-tête et du Héros. */

/* Au survol (souris seulement), le logo reprend sa couleur : ces règles ne
   portent que le filtre et l'opacité — une valeur de mise en page y serait
   écrasée dès qu'on survole. */
@media (hover: hover) and (pointer: fine) {
	.arvy-reassurance .arvy-reassurance__item:hover img,
	.arvy-reassurance .arvy-reassurance__lien-logo:focus-visible img {
		filter: var(--arvy-rea-logo-filtre-survol, none);
		opacity: var(--arvy-rea-logo-opacite-survol, 1);
	}
}

.arvy-reassurance .arvy-reassurance__lien-logo {
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* ─── Le mot et son lien ────────────────────────────────────────────── */

.arvy-reassurance .arvy-reassurance__texte {
	max-width: var(--arvy-rea-texte-largeur, 420px);
	color: var(--arvy-rea-texte-couleur, #1A1A1B);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
}

.arvy-reassurance .arvy-reassurance__texte p {
	margin: 0 0 var(--arvy-rea-texte-paragraphes, 12px);
}

.arvy-reassurance .arvy-reassurance__texte p:last-child {
	margin-bottom: 0;
}

/* Un lien dans le mot : le kit du site colore tous les liens en gris
   (.elementor-kit-XXXX a, une classe et une balise) — deux classes suffisent
   à reprendre la main, et la règle de survol ne porte que la couleur. */
.arvy-reassurance .arvy-reassurance__texte a {
	color: var(--arvy-rea-texte-lien, inherit);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--arvy-rea-douceur, 0.35s) ease;
}

.arvy-reassurance .arvy-reassurance__texte a:hover,
.arvy-reassurance .arvy-reassurance__texte a:focus {
	color: var(--arvy-rea-texte-lien-survol, #2E5DFF);
}

.arvy-reassurance .arvy-reassurance__texte a:focus,
.arvy-reassurance .arvy-reassurance__texte a:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--arvy-rea-focus, #2E5DFF);
	outline-offset: 3px;
}

/* Le thème Hello pose un halo blanc sur tous les liens au focus clavier :
   trois classes pour reprendre la main, contour compris. */
.arvy-reassurance .arvy-reassurance__lien-logo:focus,
.arvy-reassurance .arvy-reassurance__lien-logo:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--arvy-rea-focus, #2E5DFF);
	outline-offset: 3px;
}

/* ─── Le bouton ARVY (autre présentation du lien) ───────────────────── */

.arvy-reassurance .arvy-reassurance__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--arvy-rea-bouton-ecart, 10px);
	box-sizing: border-box;
	margin-top: var(--arvy-rea-bouton-haut, 24px);
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--arvy-rea-bouton-fond, #1A1A1B);
	color: var(--arvy-rea-bouton-texte, #FFFFFF);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.8px;
	text-align: center;
	text-decoration: none;
	/* Texte et flèche transparents : c'est la page qui se voit à travers. */
	mix-blend-mode: var(--arvy-rea-bouton-fusion, multiply);
	/* Les cinq transitions dans la même déclaration : celles du survol et
	   celles de l'apparition. Séparées, la règle générique d'apparition —
	   écrite plus bas, à spécificité égale — remplacerait celles du survol et
	   le bouton changerait de couleur d'un coup, sans le fondu des autres
	   sections du site. */
	transition:
		color var(--arvy-rea-bouton-douceur, 0.35s) ease,
		background-color var(--arvy-rea-bouton-douceur, 0.35s) ease,
		border-color var(--arvy-rea-bouton-douceur, 0.35s) ease,
		opacity var(--arvy-rea-apparition-duree, 1.2s) var(--arvy-rea-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-rea-delai, 0s),
		transform var(--arvy-rea-apparition-duree, 1.2s) var(--arvy-rea-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-rea-delai, 0s);
}

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

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

.arvy-reassurance .arvy-reassurance__bouton:focus,
.arvy-reassurance .arvy-reassurance__bouton:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--arvy-rea-focus, #2E5DFF);
	outline-offset: 3px;
}

/* Jamais tronqué : s'il ne tient pas, le libellé passe à la ligne. */
.arvy-reassurance .arvy-reassurance__bouton-texte {
	white-space: normal;
	text-wrap: balance;
}

.arvy-reassurance .arvy-reassurance__bouton svg {
	flex: 0 0 auto;
	width: var(--arvy-rea-bouton-fleche, 0.8em);
	height: var(--arvy-rea-bouton-fleche, 0.8em);
}

/* Ton du bouton : Foncé sur fond clair, Clair sur fond sombre. Ce seul
   choix pose la pastille, la couleur du texte et le mode de fusion. */
.arvy-reassurance .arvy-reassurance__bouton--fonce {
	--arvy-rea-bouton-fond: #1A1A1B;
	--arvy-rea-bouton-texte: #FFFFFF;
	--arvy-rea-bouton-fusion: multiply;
}

.arvy-reassurance .arvy-reassurance__bouton--clair {
	--arvy-rea-bouton-fond: #FFFFFF;
	--arvy-rea-bouton-texte: #000000;
	--arvy-rea-bouton-fusion: screen;
}

/* ─── Ton de la bande ────────────────────────────────────────────────
   « Sombre » repeint d'un coup les filets, le surtitre, le texte, les
   logos ET l'encart : sans lui, l'encart beige de la version empilée
   arriverait sous un texte blanc — illisible en tablette et en mobile. */

.arvy-reassurance--sombre {
	--arvy-rea-fond: #1A1A1B;
	--arvy-rea-rayon: 28px;
	--arvy-rea-lateral: 48px;
	--arvy-rea-filet: rgba(255, 255, 255, 0.2);
	--arvy-rea-surtitre-couleur: #FFFFFF;
	--arvy-rea-texte-couleur: #FFFFFF;
	--arvy-rea-logo-filtre: brightness(0) invert(1);
	--arvy-rea-logo-opacite: 0.72;
	--arvy-rea-logo-opacite-survol: 1;
	--arvy-rea-encart-teinte: transparent;
	--arvy-rea-encart-espace: 0px;
	--arvy-rea-focus: #FFFFFF;
}

/* ─── Apparition au défilement ──────────────────────────────────────── */

.arvy-reassurance [data-arvy-apparition]:not( .arvy-reassurance__bouton ) {
	transition:
		opacity var(--arvy-rea-apparition-duree, 1.2s) var(--arvy-rea-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-rea-delai, 0s),
		transform var(--arvy-rea-apparition-duree, 1.2s) var(--arvy-rea-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-rea-delai, 0s);
}

.arvy-reassurance.est-en-attente [data-arvy-apparition] {
	opacity: 0;
	transform: translateY( var(--arvy-rea-apparition-distance, 20px) );
}

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

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

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

/* ─── Replis par appareil ───────────────────────────────────────────────
   Écrits en fin de feuille : à spécificité égale, une règle placée plus
   bas l'emporte. Sans CSS généré (cache non régénéré, aperçu), la bande
   garde sa mise en page sur chaque format. Le CSS des réglages, plus
   spécifique, l'emporte toujours quand il existe. */

@media (max-width: 1024px) {
	/* Ces replis ne posent QUE des variables : une propriété finale écrite ici
	   (height, gap, padding…) battrait la règle de base qui lit la variable, et
	   le réglage du panneau n'aurait plus aucun effet en tablette ni en mobile.
	   Les tailles de texte, elles, restent des propriétés : le CSS généré par
	   Elementor les vise avec une classe de plus et l'emporte toujours. */
	.arvy-reassurance {
		--arvy-rea-sens: column;
		--arvy-rea-vertical: stretch;
		--arvy-rea-mot-largeur: 100%;
		--arvy-rea-sep-gauche: 0px;
		--arvy-rea-sep-haut: var(--arvy-rea-filet-epaisseur, 1px);
		--arvy-rea-mot-gauche: 0px;
		--arvy-rea-mot-haut: var(--arvy-rea-ecart, 32px);
		--arvy-rea-logos-fin: 0px;
		--arvy-rea-logos-bas: var(--arvy-rea-ecart, 32px);
		--arvy-rea-espace-haut: 36px;
		--arvy-rea-espace-bas: 36px;
		--arvy-rea-logos-aligne: center;
		--arvy-rea-logos-ecart: 32px;
		--arvy-rea-logos-ecart-v: 24px;
		--arvy-rea-logo-hauteur: 26px;
		/* Comme la maquette en tablette : trois logos par ligne. Les 0,02 px
		   retirés absorbent l'arrondi du navigateur (le passage à la ligne se
		   décide sur la largeur de base, avant tout rétrécissement). */
		--arvy-rea-item-largeur: calc( ( 100% - 2 * var(--arvy-rea-logos-ecart, 32px) ) / 3 - 0.02px );
		--arvy-rea-surtitre-bas: 24px;
		--arvy-rea-texte-largeur: 100%;
	}

	.arvy-reassurance--sombre {
		--arvy-rea-lateral: 32px;
	}

	.arvy-reassurance .arvy-reassurance__surtitre {
		font-size: 20px;
	}

	.arvy-reassurance .arvy-reassurance__texte {
		font-size: 16px;
	}

	.arvy-reassurance .arvy-reassurance__bouton {
		font-size: 17px;
		letter-spacing: -1.5px;
	}
}

@media (max-width: 767px) {
	.arvy-reassurance {
		--arvy-rea-espace-haut: 32px;
		--arvy-rea-espace-bas: 32px;
		--arvy-rea-mot-haut: var(--arvy-rea-ecart, 28px);
		--arvy-rea-logos-bas: var(--arvy-rea-ecart, 28px);
		--arvy-rea-logos-ecart: 24px;
		--arvy-rea-logos-ecart-v: 20px;
		--arvy-rea-logo-hauteur: 24px;
		/* En mobile, chaque logo reprend sa largeur : ils se répartissent au
		   centre, comme la maquette (deux, puis un large seul, puis deux). */
		--arvy-rea-item-largeur: auto;
		--arvy-rea-surtitre-bas: 20px;
	}

	.arvy-reassurance--sombre {
		--arvy-rea-rayon: 20px;
		--arvy-rea-lateral: 24px;
	}

	.arvy-reassurance .arvy-reassurance__surtitre {
		font-size: 18px;
	}

	.arvy-reassurance .arvy-reassurance__bouton {
		font-size: 19px;
		letter-spacing: -1.2px;
	}
}