/**
 * Styles de la section Expertises (widget « arvy-expertises »).
 *
 * Un panneau : en-tête (surtitre, titre, bouton) puis une grille d'expertises,
 * chacune avec son pictogramme, son nom, son texte et un filet dessous.
 *
 * Tout ce qui change d'état (survol, focus, apparition) lit une variable posée
 * par un contrôle Elementor : une règle directe générée par un contrôle
 * l'emporterait sur les états. Les valeurs de repli ci-dessous 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, h3
 * 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-expertises ),
.elementor-element:has( > .elementor-widget-arvy-expertises ) {
	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). */
.elementor-widget-arvy-expertises {
	min-width: 0;
	max-width: 100%;
}

/* ─── Panneau ─────────────────────────────────────────────────────────────── */

.arvy-expertises {
	/* Largeur d'une case : la ligne moins les écarts, divisée par le nombre de
	   cases par ligne. Les 0,02 px retirés absorbent l'arrondi du navigateur :
	   sans eux, la somme des cases peut dépasser la ligne d'un centième de
	   pixel et la dernière passerait à la ligne suivante. */
	--arvy-expertises-case-base: calc(
		( 100% - ( var(--arvy-expertises-colonnes, 3) - 1 ) * var(--arvy-expertises-ecart-colonnes, 32px) )
		/ var(--arvy-expertises-colonnes, 3) - 0.02px
	);
	position: relative;
	padding: var(--arvy-expertises-pad-haut, 80px) var(--arvy-expertises-pad-cote, 64px) var(--arvy-expertises-pad-bas, 80px);
	background-color: var(--arvy-expertises-fond, #1A1A1B);
	border-radius: var(--arvy-expertises-rayon, 28px);
	color: #FFFFFF;
}

/* ─── En-tête ─────────────────────────────────────────────────────────────── */

.arvy-expertises__entete {
	display: flex;
	flex-direction: var(--arvy-expertises-entete-direction, row);
	align-items: var(--arvy-expertises-entete-alignement, flex-end);
	justify-content: space-between;
	gap: var(--arvy-expertises-entete-ecart, 32px);
	margin-bottom: var(--arvy-expertises-espace-entete, 64px);
}

.arvy-expertises__entete:last-child {
	margin-bottom: 0;
}

.arvy-expertises__intro {
	min-width: 0;
	max-width: var(--arvy-expertises-titre-largeur, 780px);
}

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

.arvy-expertises .arvy-expertises__surtitre:last-child {
	margin-bottom: 0;
}

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

.arvy-expertises .arvy-expertises__titre {
	margin: 0;
	color: #FFFFFF;
	font-size: 66px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	text-wrap: balance;
}

.arvy-expertises .arvy-expertises__description {
	max-width: var(--arvy-expertises-description-largeur, 600px);
	margin: var(--arvy-expertises-espace-description, 24px) 0 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Sans surtitre ni titre, la description ne garde pas l'espace du titre. */
.arvy-expertises .arvy-expertises__description:first-child {
	margin-top: 0;
}

.arvy-expertises .arvy-expertises__description p,
.arvy-expertises .arvy-expertises__description ul,
.arvy-expertises .arvy-expertises__description ol {
	margin: 0 0 var(--arvy-expertises-paragraphes, 20px);
}

.arvy-expertises .arvy-expertises__description > :last-child {
	margin-bottom: 0;
}

.arvy-expertises .arvy-expertises__description a {
	color: var(--arvy-expertises-lien, #FFFFFF);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--arvy-expertises-bouton-douceur, 0.35s) ease;
}

/* Le kit du site colore les liens survolés (.elementor-kit-XXXX a:hover) :
   cette règle ne porte QUE la couleur, pour ne rien figer d'autre au survol. */
.arvy-expertises .arvy-expertises__description a:hover {
	color: var(--arvy-expertises-lien-survol, #2E5DFF);
}

/* Le thème Hello pose un halo blanc et un contour noir sur tout lien au focus. */
.arvy-expertises .arvy-expertises__description a:focus {
	outline: none;
	box-shadow: none;
}

.arvy-expertises .arvy-expertises__description a:focus-visible {
	color: var(--arvy-expertises-lien-survol, #2E5DFF);
	outline: 2px solid var(--arvy-expertises-lien-survol, #2E5DFF);
	outline-offset: 2px;
	border-radius: 2px;
	box-shadow: none;
}

.arvy-expertises__action {
	flex: none;
	max-width: 100%;
}

/* ─── 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é.
   - Clair (fond sombre) : pastille blanche, texte noir, fusion « écran » → le
     noir devient transparent, le blanc reste blanc.
   - Foncé (fond clair) : pastille foncée, texte blanc, fusion « produit » → le
     blanc devient transparent, le foncé reste foncé.
   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-expertises .arvy-expertises__bouton {
	display: inline-flex;
	align-items: center;
	gap: var(--arvy-expertises-bouton-ecart, 10px);
	max-width: 100%;
	padding: 14px 24px;
	color: var(--arvy-expertises-bouton-texte, #000000);
	background-color: var(--arvy-expertises-bouton-fond, #FFFFFF);
	border: 1px solid var(--arvy-expertises-bouton-fond, #FFFFFF);
	border-radius: 999px;
	box-shadow: none;
	mix-blend-mode: var(--arvy-expertises-bouton-fusion, screen);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.8px;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--arvy-expertises-bouton-douceur, 0.35s) ease,
		background-color var(--arvy-expertises-bouton-douceur, 0.35s) ease,
		border-color var(--arvy-expertises-bouton-douceur, 0.35s) ease,
		opacity var(--arvy-expertises-apparition-duree, 1.2s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-expertises-delai, 0s),
		transform var(--arvy-expertises-apparition-duree, 1.2s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-expertises-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, le bouton garde exactement
   la largeur de son contenu : rien ne change. */
.arvy-expertises .arvy-expertises__bouton-texte {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	text-wrap: balance;
	text-align: center;
}

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

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

.arvy-expertises a.arvy-expertises__bouton:hover,
.arvy-expertises a.arvy-expertises__bouton:focus-visible {
	color: var(--arvy-expertises-bouton-texte-survol, var(--arvy-expertises-bouton-fond, #FFFFFF));
	background-color: var(--arvy-expertises-bouton-fond-survol, transparent);
	border-color: var(--arvy-expertises-bouton-bordure-survol, var(--arvy-expertises-bouton-fond, #FFFFFF));
	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-expertises a.arvy-expertises__bouton:focus {
	outline: none;
	box-shadow: none;
}

.arvy-expertises a.arvy-expertises__bouton:focus-visible {
	outline: 2px solid var(--arvy-expertises-bouton-fond, #FFFFFF);
	outline-offset: 4px;
	box-shadow: none;
}

/* ─── Grille des expertises ───────────────────────────────────────────────── */

.arvy-expertises .arvy-expertises__liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--arvy-expertises-justif, flex-start);
	column-gap: var(--arvy-expertises-ecart-colonnes, 32px);
	row-gap: var(--arvy-expertises-ecart-lignes, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* « Étirée » : les cases de la dernière ligne se partagent la place libre
   (flex-grow 1). Une ligne complète, elle, est déjà pleine : rien ne bouge. */
.arvy-expertises .arvy-expertises__item {
	display: flex;
	flex: var(--arvy-expertises-case-grow, 0) 1 var(--arvy-expertises-case-base);
	min-width: 0;
	margin: 0;
	padding: 0;
}

.arvy-expertises .arvy-expertises__item::marker {
	content: "";
}

.arvy-expertises .arvy-expertises__carte {
	position: relative;
	display: block;
	width: 100%;
	text-align: var(--arvy-expertises-case-texte, left);
	padding-bottom: var(--arvy-expertises-espace-filet, 48px);
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}

/* Le filet, puis sa version colorée qui se remplit au survol d'une expertise
   qui a un lien. « content » est posé à deux classes : l'impression du thème
   ajoute l'adresse des liens dans a[href]::after. */
.arvy-expertises .arvy-expertises__carte::before,
.arvy-expertises .arvy-expertises__carte::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--arvy-expertises-filet-epaisseur, 1px);
	transform-origin: left center;
	pointer-events: none;
}

.arvy-expertises .arvy-expertises__carte::before {
	background-color: var(--arvy-expertises-filet, rgba(255, 255, 255, 0.2));
	transition: transform var(--arvy-expertises-apparition-duree, 1.2s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-expertises-delai, 0s);
}

.arvy-expertises .arvy-expertises__carte::after {
	background-color: var(--arvy-expertises-filet-survol, #2E5DFF);
	transform: scaleX(0);
	transition: transform var(--arvy-expertises-survol-duree, 0.9s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

.arvy-expertises__tete {
	display: flex;
	align-items: var(--arvy-expertises-picto-alignement, center);
	justify-content: var(--arvy-expertises-case-justif, flex-start);
	gap: var(--arvy-expertises-picto-ecart, 16px);
	margin-bottom: var(--arvy-expertises-espace-nom, 14px);
}

.arvy-expertises__tete:last-child {
	margin-bottom: 0;
}

.arvy-expertises__picto {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--arvy-expertises-picto-taille, 44px);
	height: var(--arvy-expertises-picto-taille, 44px);
	color: var(--arvy-expertises-picto-couleur, #FFFFFF);
	background-color: var(--arvy-expertises-picto-fond, #2E5DFF);
	border-radius: var(--arvy-expertises-picto-rayon, 12px);
}

/* Pictogramme livré, SVG importé ou icône de police : même taille, même
   couleur, même rotation. */
.arvy-expertises .arvy-expertises__picto > svg,
.arvy-expertises .arvy-expertises__picto > i {
	display: block;
	width: var(--arvy-expertises-picto-dessin, 22px);
	height: var(--arvy-expertises-picto-dessin, 22px);
	font-size: var(--arvy-expertises-picto-dessin, 22px);
	line-height: 1;
	text-align: center;
	fill: currentColor;
	color: inherit;
	transition: transform var(--arvy-expertises-survol-duree, 0.9s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

.arvy-expertises .arvy-expertises__nom {
	min-width: 0;
	margin: 0;
	color: #FFFFFF;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.5px;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* Dans une colonne étroite (4 colonnes, petit portable), un long mot comme
   « Repositionnement » ne tient plus : il est coupé à une syllabe avec un
   tiret plutôt qu'au hasard. Pas de césure ailleurs, où elle couperait des
   mots qui tiennent. */
.arvy-expertises__tete {
	container: arvy-expertises-tete / inline-size;
}

@container arvy-expertises-tete (max-width: 300px) {
	.arvy-expertises .arvy-expertises__nom {
		-webkit-hyphens: auto;
		hyphens: auto;
		-webkit-hyphenate-limit-before: 5;
		-webkit-hyphenate-limit-after: 5;
		hyphenate-limit-chars: 12 5 5;
	}
}

.arvy-expertises .arvy-expertises__texte {
	max-width: var(--arvy-expertises-texte-largeur, 384px);
	/* « auto » quand la case est centrée : le texte, plus étroit que la case,
	   se centre dedans. */
	margin: 0 var(--arvy-expertises-case-marge, 0);
	color: rgba(255, 255, 255, 0.72);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	text-wrap: pretty;
}

/* ─── Bouton d'une expertise ──────────────────────────────────────────────────
   Même modèle ARVY que le bouton de l'en-tête (pastille pleine, texte et
   flèche transparents par mode de fusion), avec ses propres variables : il est
   plus petit et vit dans une case. Aucun parent animé au-dessus de lui, sinon
   le texte perdrait sa transparence. */

.arvy-expertises .arvy-expertises__bouton-case {
	display: inline-flex;
	align-items: center;
	gap: var(--arvy-expertises-bcase-ecart, 8px);
	max-width: 100%;
	margin-top: var(--arvy-expertises-bcase-espace, 24px);
	padding: 10px 18px;
	color: var(--arvy-expertises-bcase-texte, #000000);
	background-color: var(--arvy-expertises-bcase-fond, #FFFFFF);
	border: 1px solid var(--arvy-expertises-bcase-fond, #FFFFFF);
	border-radius: 999px;
	box-shadow: none;
	mix-blend-mode: var(--arvy-expertises-bcase-fusion, screen);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
	text-decoration: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition:
		color var(--arvy-expertises-bcase-douceur, 0.35s) ease,
		background-color var(--arvy-expertises-bcase-douceur, 0.35s) ease,
		border-color var(--arvy-expertises-bcase-douceur, 0.35s) ease,
		opacity var(--arvy-expertises-apparition-duree, 1.2s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-expertises-delai, 0s),
		transform var(--arvy-expertises-apparition-duree, 1.2s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-expertises-delai, 0s);
}

/* Seul dans sa case (ni nom ni texte au-dessus) : pas d'espace en trop. */
.arvy-expertises .arvy-expertises__bouton-case:first-child {
	margin-top: 0;
}

/* La flèche du bouton de case a sa propre taille (3 classes : elle l'emporte
   sur celle du bouton de l'en-tête). */
.arvy-expertises .arvy-expertises__bouton-case .arvy-expertises__bouton-fleche {
	width: var(--arvy-expertises-bcase-fleche, 0.8em);
	height: var(--arvy-expertises-bcase-fleche, 0.8em);
}

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

.arvy-expertises a.arvy-expertises__bouton-case:hover,
.arvy-expertises a.arvy-expertises__bouton-case:focus-visible {
	color: var(--arvy-expertises-bcase-texte-survol, var(--arvy-expertises-bcase-fond, #FFFFFF));
	background-color: var(--arvy-expertises-bcase-fond-survol, transparent);
	border-color: var(--arvy-expertises-bcase-bordure-survol, var(--arvy-expertises-bcase-fond, #FFFFFF));
	text-decoration: none;
}

/* Le thème Hello pose un halo blanc et un contour noir sur tout lien au focus. */
.arvy-expertises a.arvy-expertises__bouton-case:focus {
	outline: none;
	box-shadow: none;
}

.arvy-expertises a.arvy-expertises__bouton-case:focus-visible {
	outline: 2px solid var(--arvy-expertises-bcase-fond, #FFFFFF);
	outline-offset: 4px;
	box-shadow: none;
}

/* Survol d'une expertise qui a un lien : le filet se remplit, le pictogramme
   pivote. Souris seulement ; au clavier, le focus fait de même. */
@media (hover: hover) and (pointer: fine) {
	.arvy-expertises a.arvy-expertises__carte:hover::after {
		transform: scaleX(1);
	}

	.arvy-expertises a.arvy-expertises__carte:hover .arvy-expertises__picto > * {
		transform: rotate( var(--arvy-expertises-picto-rotation, 90deg) );
	}
}

/* Le kit colore les liens survolés (.elementor-kit-XXXX a:hover) : une
   expertise cliquable garde ses couleurs. */
.arvy-expertises a.arvy-expertises__carte:hover,
.arvy-expertises a.arvy-expertises__carte:focus {
	color: inherit;
	text-decoration: none;
}

.arvy-expertises a.arvy-expertises__carte:focus {
	outline: none;
	box-shadow: none;
}

.arvy-expertises a.arvy-expertises__carte:focus-visible {
	outline: 2px solid var(--arvy-expertises-focus, #FFFFFF);
	outline-offset: 6px;
	border-radius: 4px;
	box-shadow: none;
}

.arvy-expertises a.arvy-expertises__carte:focus-visible::after {
	transform: scaleX(1);
}

.arvy-expertises a.arvy-expertises__carte:focus-visible .arvy-expertises__picto > * {
	transform: rotate( var(--arvy-expertises-picto-rotation, 90deg) );
}

/* ─── Apparition au défilement ────────────────────────────────────────────────
   Le script ne met en attente (« est-en-attente ») que ce qui est encore sous
   l'écran : sans script, en cas d'erreur ou en mouvement réduit, rien n'est
   jamais masqué. Le bouton a sa propre transition, plus haut. */

.arvy-expertises__surtitre[data-arvy-apparition],
.arvy-expertises__titre[data-arvy-apparition],
.arvy-expertises__description[data-arvy-apparition],
.arvy-expertises__picto[data-arvy-apparition],
.arvy-expertises__nom[data-arvy-apparition],
.arvy-expertises__texte[data-arvy-apparition],
.arvy-expertises__bouton-case[data-arvy-apparition] {
	transition:
		opacity var(--arvy-expertises-apparition-duree, 1.2s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-expertises-delai, 0s),
		transform var(--arvy-expertises-apparition-duree, 1.2s) var(--arvy-expertises-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-expertises-delai, 0s);
}

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

.arvy-expertises .est-en-attente .arvy-expertises__picto[data-arvy-apparition] {
	transform: scale(0.5) rotate(-90deg);
}

.arvy-expertises .est-en-attente .arvy-expertises__carte::before {
	transform: scaleX(0);
}

/* ─── Mouvement réduit, impression ────────────────────────────────────────── */

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

	.arvy-expertises .arvy-expertises__picto > * {
		transform: none !important;
	}
}

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

.arvy-no-motion .arvy-expertises .arvy-expertises__picto > * {
	transform: none !important;
}

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

/* ─── Replis par appareil ─────────────────────────────────────────────────────
   En fin de fichier : à spécificité égale, une règle écrite plus bas gagne.
   Sans CSS généré (cache non régénéré, aperçu), la description garde une
   taille adaptée au format. */

@media (max-width: 1024px) {
	.arvy-expertises {
		/* Sans CSS généré, l'en-tête resterait sur une ligne et le titre comme la
		   description seraient écrasés par le bouton ; l'espace intérieur du
		   panneau resterait celui du grand écran. Ces replis reprennent les
		   défauts des réglages pour ce format. */
		--arvy-expertises-entete-direction: column;
		--arvy-expertises-entete-alignement: flex-start;
		--arvy-expertises-entete-ecart: 28px;
		--arvy-expertises-espace-entete: 48px;
		--arvy-expertises-pad-haut: 64px;
		--arvy-expertises-pad-bas: 64px;
		--arvy-expertises-pad-cote: 40px;
		--arvy-expertises-ecart-colonnes: 24px;
		--arvy-expertises-espace-filet: 36px;
		--arvy-expertises-ecart-lignes: 36px;
		--arvy-expertises-colonnes: 2;
	}

	.arvy-expertises .arvy-expertises__surtitre {
		font-size: 20px;
	}

	.arvy-expertises .arvy-expertises__titre {
		font-size: 48px;
		letter-spacing: -1.5px;
	}

	.arvy-expertises .arvy-expertises__description {
		max-width: 100%;
		font-size: 18px;
	}

	.arvy-expertises .arvy-expertises__bouton {
		font-size: 17px;
		letter-spacing: -1.5px;
	}

	.arvy-expertises .arvy-expertises__nom {
		font-size: 24px;
	}

	.arvy-expertises .arvy-expertises__texte {
		font-size: 16px;
	}

	.arvy-expertises .arvy-expertises__bouton-case {
		margin-top: var(--arvy-expertises-bcase-espace, 20px);
		font-size: 16px;
		letter-spacing: -0.8px;
	}
}

@media (max-width: 767px) {
	.arvy-expertises {
		--arvy-expertises-rayon: 20px;
		--arvy-expertises-entete-ecart: 24px;
		--arvy-expertises-espace-entete: 40px;
		--arvy-expertises-espace-surtitre: 14px;
		--arvy-expertises-pad-haut: 48px;
		--arvy-expertises-pad-bas: 48px;
		--arvy-expertises-pad-cote: 24px;
		--arvy-expertises-espace-filet: 32px;
		--arvy-expertises-ecart-lignes: 32px;
		--arvy-expertises-picto-taille: 40px;
		--arvy-expertises-picto-dessin: 20px;
		--arvy-expertises-picto-ecart: 14px;
		--arvy-expertises-espace-nom: 12px;
		--arvy-expertises-colonnes: 1;
	}

	.arvy-expertises .arvy-expertises__surtitre {
		font-size: 18px;
	}

	.arvy-expertises .arvy-expertises__titre {
		font-size: 34px;
		letter-spacing: -1px;
	}

	.arvy-expertises .arvy-expertises__description {
		font-size: 17px;
	}

	.arvy-expertises .arvy-expertises__bouton {
		font-size: 19px;
		letter-spacing: -1.2px;
	}

	.arvy-expertises .arvy-expertises__nom {
		font-size: 22px;
	}

	.arvy-expertises .arvy-expertises__bouton-case {
		margin-top: var(--arvy-expertises-bcase-espace, 18px);
		font-size: 16px;
		letter-spacing: -0.8px;
	}
}