/**
 * Styles de la section Points clés (widget « arvy-points-cles »).
 *
 * Deux conteneurs : le texte (surtitre, titre, liste de points, bouton) d'un
 * côté, la pile de visuels de l'autre. « Inverser » échange leurs places par
 * « order », sans toucher au HTML : l'ordre de lecture reste texte puis visuels.
 *
 * Chaque point est un <details> : sans JavaScript l'accordéon fonctionne déjà
 * (ouverture au clic et au clavier, un seul ouvert grâce à l'attribut « name »).
 * Le script ajoute la hauteur qui s'anime, le défilement automatique avec sa
 * barre de progression, et le visuel qui suit.
 *
 * Tout ce qui change d'état (survol, focus, ouverture, 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, 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 (panneau ouvert, police chargée tard) déborderait. */
.e-con:has( > .elementor-widget-arvy-points-cles ),
.elementor-element:has( > .elementor-widget-arvy-points-cles ) {
	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-points-cles {
	min-width: 0;
	max-width: 100%;
}

/* ─── Les deux conteneurs ───────────────────────────────────────────── */

.arvy-points-cles {
	display: flex;
	flex-direction: var(--arvy-pc-sens, row);
	align-items: stretch;
	gap: var(--arvy-pc-ecart, 80px);
}

.arvy-points-cles__conteneur {
	min-width: 0;
}

.arvy-points-cles__conteneur--texte {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: var(--arvy-pc-texte-vertical, center);
	padding-block: var(--arvy-pc-texte-espace, 0px);
	/* « Inverser » : 0 = le texte d'abord, 2 = le texte après les visuels. */
	order: var(--arvy-pc-ordre-texte, 0);
}

.arvy-points-cles__conteneur--visuels {
	display: flex;
	flex: 0 0 var(--arvy-pc-visuels-base, calc(var(--arvy-pc-visuels-largeur, 50%) - var(--arvy-pc-ecart, 80px) / 2));
	align-self: var(--arvy-pc-aligne-empile, var(--arvy-pc-visuels-aligne, center));
	order: 1;
}

/* Un seul conteneur : il prend toute la largeur. */
.arvy-points-cles .arvy-points-cles__conteneur--visuels:only-child,
.arvy-points-cles .arvy-points-cles__conteneur--texte:only-child {
	flex: 1 1 100%;
}

.arvy-points-cles__texte {
	width: 100%;
	max-width: var(--arvy-pc-texte-largeur, 100%);
}

/* ─── Surtitre et titre ─────────────────────────────────────────────── */

.arvy-points-cles .arvy-points-cles__surtitre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--arvy-pc-espace-surtitre, 28px);
	padding-bottom: var(--arvy-pc-surtitre-dessous, 16px);
	border-bottom: var(--arvy-pc-surtitre-filet, 1px) solid var(--arvy-pc-filet, rgba(26, 26, 27, 0.18));
	color: var(--arvy-pc-surtitre-couleur, #1A1A1B);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

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

.arvy-points-cles .arvy-points-cles__titre {
	margin: 0 0 var(--arvy-pc-espace-titre, 32px);
	color: var(--arvy-pc-titre-couleur, #1A1A1B);
	font-size: 66px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	text-wrap: balance;
}

/* Le dernier bloc avant la liste ne garde pas sa marge basse si la liste
   est absente : c'est la liste qui porte son propre filet du haut. */
.arvy-points-cles__texte > :last-child {
	margin-bottom: 0;
}

/* ─── La liste de points ────────────────────────────────────────────── */

.arvy-points-cles .arvy-points-cles__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--arvy-pc-filet-epaisseur, 1px) solid var(--arvy-pc-filet, rgba(26, 26, 27, 0.18));
}

.arvy-points-cles__item {
	position: relative;
}

.arvy-points-cles .arvy-points-cles__bloc {
	display: block;
	margin: 0;
}

/* Le thème Hello met les titres en 500 avec des marges, et le kit leur pose sa
   typographie globale : le libellé et le titre reprennent la main. */
.arvy-points-cles .arvy-points-cles__liste li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le libellé : un <summary>, donc cliquable et atteignable au clavier
   sans JavaScript. Le marqueur du navigateur et celui de Hello
   (summary { display: list-item }) sont retirés. */
.arvy-points-cles .arvy-points-cles__declencheur {
	display: flex;
	align-items: baseline;
	padding-top: var(--arvy-pc-espace-libelle, 24px);
	list-style: none;
	cursor: pointer;
	color: var(--arvy-pc-libelle-couleur, #1A1A1B);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.5px;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--arvy-pc-douceur, 0.35s) var(--arvy-pc-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

.arvy-points-cles__declencheur::-webkit-details-marker { display: none; }
.arvy-points-cles__declencheur::marker { content: ""; }
.arvy-points-cles .arvy-points-cles__declencheur:focus { outline: none; }

.arvy-points-cles .arvy-points-cles__item.est-actif > .arvy-points-cles__bloc > .arvy-points-cles__declencheur {
	color: var(--arvy-pc-libelle-actif, var(--arvy-pc-libelle-couleur, #1A1A1B));
}

/* Le survol et le focus l'emportent sur les deux états précédents : même
   nombre de classes, écrits après (une règle d'état moins spécifique que
   l'état « ouvert » ne s'appliquerait jamais au point ouvert).
   Ils ne portent QUE la couleur : une valeur de mise en page écrite ici
   écraserait celle du repos. */
.arvy-points-cles .arvy-points-cles__item > .arvy-points-cles__bloc:hover > .arvy-points-cles__declencheur,
.arvy-points-cles .arvy-points-cles__item > .arvy-points-cles__bloc > .arvy-points-cles__declencheur:focus-visible {
	color: var(--arvy-pc-libelle-survol, #2E5DFF);
}

/* Focus clavier : contour sur la ligne entière, halo de Hello neutralisé. */
.arvy-points-cles .arvy-points-cles__item:has( .arvy-points-cles__declencheur:focus-visible ) {
	outline: 2px solid var(--arvy-pc-focus, #2E5DFF);
	outline-offset: 2px;
	box-shadow: none;
}

/* Le libellé reprend la typographie posée sur le <summary>. */
.arvy-points-cles .arvy-points-cles__libelle {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* ─── Le panneau qui se déplie ──────────────────────────────────────── */

.arvy-points-cles__panneau {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--arvy-pc-duree-ouverture, 0.6s) var(--arvy-pc-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

.arvy-points-cles__item.est-replie .arvy-points-cles__panneau {
	grid-template-rows: 0fr;
}

.arvy-points-cles__panneau-cadre {
	min-height: 0;
	overflow: hidden;
}

.arvy-points-cles .arvy-points-cles__contenu {
	padding: var(--arvy-pc-espace-contenu, 16px) var(--arvy-pc-contenu-droite, 40px) 0 0;
	color: var(--arvy-pc-contenu-couleur, #6B7477);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
}

.arvy-points-cles .arvy-points-cles__contenu > :first-child { margin-top: 0; }
.arvy-points-cles .arvy-points-cles__contenu > :last-child { margin-bottom: 0; }

.arvy-points-cles .arvy-points-cles__contenu p {
	margin: 0 0 var(--arvy-pc-ecart-paragraphes, 20px);
}

.arvy-points-cles .arvy-points-cles__contenu ul,
.arvy-points-cles .arvy-points-cles__contenu ol {
	margin: 0 0 var(--arvy-pc-ecart-paragraphes, 20px);
	padding-left: 1.2em;
}

.arvy-points-cles .arvy-points-cles__contenu a {
	color: var(--arvy-pc-lien-couleur, #1A1A1B);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	transition: color var(--arvy-pc-douceur, 0.35s) ease;
}

.arvy-points-cles .arvy-points-cles__contenu a:hover,
.arvy-points-cles .arvy-points-cles__contenu a:focus-visible {
	color: var(--arvy-pc-lien-survol, #2E5DFF);
}

.arvy-points-cles .arvy-points-cles__contenu a:focus {
	outline: none;
	box-shadow: none;
}

.arvy-points-cles .arvy-points-cles__contenu a:focus-visible {
	outline: 2px solid var(--arvy-pc-focus, #2E5DFF);
	outline-offset: 2px;
	box-shadow: none;
}

/* ─── Le filet et sa barre de progression ───────────────────────────── */

.arvy-points-cles__filet {
	height: var(--arvy-pc-filet-epaisseur, 1px);
	margin-top: var(--arvy-pc-espace-filet, 24px);
	background-color: var(--arvy-pc-filet, rgba(26, 26, 27, 0.18));
}

.arvy-points-cles__barre {
	display: block;
	width: 100%;
	height: var(--arvy-pc-barre-epaisseur, 2px);
	margin-top: calc( ( var(--arvy-pc-filet-epaisseur, 1px) - var(--arvy-pc-barre-epaisseur, 2px) ) / 2 );
	background-color: var(--arvy-pc-barre-couleur, #1A1A1B);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--arvy-pc-duree-ouverture, 0.6s) var(--arvy-pc-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

/* Sans défilement automatique, la barre marque simplement le point ouvert.
   Elle suit l'état réel du <details> : sans JavaScript aussi, c'est le
   point ouvert par le visiteur qui est souligné. */
.arvy-points-cles .arvy-points-cles__item:has( > .arvy-points-cles__bloc[open] ):not(.est-replie) .arvy-points-cles__barre {
	transform: scaleX(1);
}

/* Avec le défilement automatique (classe posée par le script seulement
   quand il tourne vraiment), elle mesure le temps qu'il reste. */
@keyframes arvy-pc-progression {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

.arvy-points-cles.est-auto .arvy-points-cles__item.est-actif .arvy-points-cles__barre {
	animation: arvy-pc-progression var(--arvy-pc-duree-point, 10s) linear both;
}

.arvy-points-cles.est-auto.est-en-pause .arvy-points-cles__item.est-actif .arvy-points-cles__barre {
	animation-play-state: paused;
}

/* ─── La pile de visuels ────────────────────────────────────────────── */

.arvy-points-cles__visuels {
	display: grid;
	width: 100%;
	height: 100%;
	position: var(--arvy-pc-visuels-position, static);
	top: var(--arvy-pc-visuels-haut, 96px);
	/* Collé : la pile ne doit pas être étirée à la hauteur de la colonne,
	   sinon elle n'aurait plus de place pour glisser. */
	align-self: var(--arvy-pc-pile-aligne, stretch);
}

.arvy-points-cles .arvy-points-cles__visuel {
	grid-area: 1 / 1;
	margin: 0;
	width: 100%;
	aspect-ratio: var(--arvy-pc-format, 1 / 1);
	/* Le format « hauteur du texte » n'impose aucun rapport : la hauteur vient
	   de la colonne. Empilé, il n'y a plus de colonne à côté, d'où le minimum. */
	min-height: max( var(--arvy-pc-visuel-hauteur, 0px), var(--arvy-pc-visuel-min, 0px) );
	overflow: hidden;
	border-radius: var(--arvy-pc-visuel-rayon, 28px);
	background-color: var(--arvy-pc-visuel-fond, rgba(26, 26, 27, 0.06));
	opacity: 0;
	transition: opacity var(--arvy-pc-fondu, 0.6s) var(--arvy-pc-courbe, cubic-bezier(0.135, 0.9, 0.15, 1));
}

/* Le premier visuel porte « est-actif » dès le rendu : sans script, c'est
   lui qu'on voit, et rien ne clignote au chargement. */
.arvy-points-cles .arvy-points-cles__visuel.est-actif {
	opacity: 1;
}

/* Sélecteur descendant : le garde-fou « img { height: auto } » du socle
   ne doit pas écraser la hauteur du visuel. */
.arvy-points-cles .arvy-points-cles__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* ─── Bouton (modèle ARVY commun à toutes les sections) ──────────────
   Pastille pleine, texte et flèche « découpés » par un mode de fusion :
   ils laissent voir le fond, y compris sur une photo.
   ⚠️ Aucun parent du bouton ne doit recevoir transform, opacity ou filter. */

.arvy-points-cles__action {
	margin-top: var(--arvy-pc-espace-bouton, 36px);
}

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

/* Sur un écran é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-points-cles .arvy-points-cles__bouton-texte {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	text-wrap: balance;
	text-align: center;
}

.arvy-points-cles .arvy-points-cles__bouton-fleche {
	flex: none;
	display: block;
	width: var(--arvy-pc-bouton-fleche, 0.8em);
	height: var(--arvy-pc-bouton-fleche, 0.8em);
	overflow: visible;
}

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

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

.arvy-points-cles a.arvy-points-cles__bouton:focus-visible {
	outline: 2px solid var(--arvy-pc-bouton-fond, #1A1A1B);
	outline-offset: 4px;
	box-shadow: none;
}

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

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

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

.arvy-points-cles.est-en-attente .arvy-points-cles__visuels[data-arvy-apparition] {
	transform: none;
}

.arvy-points-cles.est-en-attente .arvy-points-cles__visuel img {
	transform: scale( var(--arvy-pc-zoom-depart, 1.15) );
}

.arvy-points-cles .arvy-points-cles__visuel img {
	transition: transform calc( var(--arvy-pc-apparition-duree, 1.2s) * 1.4 ) var(--arvy-pc-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-pc-delai, 0s);
}

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

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

	.arvy-points-cles .arvy-points-cles__visuel img {
		transform: none !important;
	}
}

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

.arvy-no-motion .arvy-points-cles .arvy-points-cles__visuel img {
	transform: none !important;
}

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

	.arvy-points-cles .arvy-points-cles__visuel {
		opacity: 1 !important;
	}
}

/* ─── Replis par appareil ───────────────────────────────────────────
   Écrits en FIN de feuille : à spécificité égale, la dernière règle
   gagne. Le CSS généré par les réglages (4 classes) l'emporte toujours
   quand il existe ; ces valeurs ne servent que sans lui. */

@media (max-width: 1024px) {
	.arvy-points-cles {
		--arvy-pc-sens: column;
		--arvy-pc-visuels-base: auto;
		--arvy-pc-aligne-empile: stretch;
		--arvy-pc-ecart: 40px;
		--arvy-pc-format: 4 / 3;
		--arvy-pc-visuel-rayon: 28px;
		--arvy-pc-texte-largeur: 100%;
		--arvy-pc-espace-surtitre: 24px;
		--arvy-pc-espace-titre: 28px;
		--arvy-pc-espace-libelle: 20px;
		--arvy-pc-espace-filet: 20px;
		--arvy-pc-espace-contenu: 14px;
		--arvy-pc-contenu-droite: 0px;
		--arvy-pc-espace-bouton: 32px;
		--arvy-pc-visuels-position: static;
	}

	.arvy-points-cles .arvy-points-cles__surtitre { font-size: 20px; }
	.arvy-points-cles .arvy-points-cles__titre { font-size: 48px; letter-spacing: -1.5px; }
	.arvy-points-cles .arvy-points-cles__declencheur { font-size: 20px; letter-spacing: -0.3px; }
	.arvy-points-cles .arvy-points-cles__contenu { font-size: 16px; }
	.arvy-points-cles .arvy-points-cles__bouton { font-size: 17px; letter-spacing: -1.5px; }
}

@media (max-width: 767px) {
	.arvy-points-cles {
		--arvy-pc-ecart: 32px;
		--arvy-pc-format: 1 / 1;
		--arvy-pc-visuel-rayon: 20px;
		--arvy-pc-espace-surtitre: 20px;
		--arvy-pc-espace-titre: 24px;
		--arvy-pc-espace-libelle: 16px;
		--arvy-pc-espace-filet: 16px;
		--arvy-pc-espace-contenu: 12px;
		--arvy-pc-espace-bouton: 28px;
	}

	.arvy-points-cles .arvy-points-cles__surtitre { font-size: 18px; }
	.arvy-points-cles .arvy-points-cles__titre { font-size: 34px; letter-spacing: -1px; }
	.arvy-points-cles .arvy-points-cles__declencheur { font-size: 18px; letter-spacing: -0.3px; }
	.arvy-points-cles .arvy-points-cles__contenu { font-size: 16px; }
	.arvy-points-cles .arvy-points-cles__bouton { font-size: 19px; letter-spacing: -1.2px; }
}