/**
 * Styles de la section Présentation (widget « arvy-presentation »).
 *
 * En haut, un en-tête en deux colonnes : surtitre et titre d'un côté,
 * description de l'autre (empilés sur petit écran). Dessous, une grande photo
 * dont le coin haut gauche est découpé autour du bouton.
 *
 * L'encoche est un MASQUE sur la photo, pas un bloc de la couleur du fond posé
 * dessus (c'est ce que fait la référence) : elle reste juste sur n'importe quel
 * fond. Ses dimensions sont celles du bouton, mesurées par le script ; sans
 * script, des valeurs de repli proches du bouton par défaut.
 *
 * 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-presentation ),
.elementor-element:has( > .elementor-widget-arvy-presentation ) {
	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-presentation {
	min-width: 0;
	max-width: 100%;
}

/* ─── En-tête ─────────────────────────────────────────────────────────────────
   Côte à côte : surtitre (rangée 1) et titre (rangée 2) à gauche, texte à
   droite, calé par défaut sur le haut du titre. Empilé : une seule colonne,
   le texte en rangée 3. */

.arvy-presentation__entete {
	display: grid;
	grid-template-columns: var(--arvy-pr-colonnes, minmax(0, var(--arvy-pr-titre-largeur, 56%)) minmax(0, 1fr));
	column-gap: var(--arvy-pr-ecart-colonnes, 32px);
	align-items: start;
}

.arvy-presentation .arvy-presentation__surtitre {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: var(--arvy-pr-point-ecart, 10px);
	margin: 0 0 var(--arvy-pr-espace-surtitre, 20px);
	color: #1A1A1B;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

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

.arvy-presentation .arvy-presentation__titre {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	color: #1A1A1B;
	font-size: 66px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -2px;
	text-wrap: balance;
}

.arvy-presentation__texte {
	grid-column: var(--arvy-pr-texte-colonne, 2);
	grid-row: var(--arvy-pr-texte-rangee, 2);
	align-self: var(--arvy-pr-texte-aligne, start);
	justify-self: var(--arvy-pr-texte-position, start);
	width: 100%;
	min-width: 0;
	max-width: var(--arvy-pr-texte-largeur, 600px);
	margin-top: var(--arvy-pr-texte-marge, 0px);
}

/* Un en-tête sans surtitre ni titre : le texte prend toute la largeur. */
.arvy-presentation .arvy-presentation__texte:only-child {
	grid-column: 1 / -1;
	grid-row: auto;
	margin-top: 0;
}

/* Un surtitre sans titre ni texte ne laisse pas d'espace sous lui. */
.arvy-presentation .arvy-presentation__surtitre:only-child {
	margin-bottom: 0;
}

/* 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-presentation {
		--arvy-pr-colonnes: minmax(0, 1fr);
		--arvy-pr-texte-colonne: 1;
		--arvy-pr-texte-rangee: 3;
		--arvy-pr-texte-aligne: start;
		--arvy-pr-texte-marge: 20px;
		--arvy-pr-texte-largeur: 720px;
		--arvy-pr-espace-photo: 40px;
		--arvy-pr-encoche-droite: 16px;
		--arvy-pr-encoche-bas: 16px;
		--arvy-pr-encoche-l: 182px;
		--arvy-pr-encoche-h: 65px;
	}
}

@media (max-width: 767px) {
	.arvy-presentation {
		--arvy-pr-texte-marge: 16px;
		--arvy-pr-rayon: 20px;
		--arvy-pr-encoche-l: 201px;
		--arvy-pr-encoche-h: 67px;
	}
}

/* ─── Description ─────────────────────────────────────────────────────────── */

.arvy-presentation .arvy-presentation__description {
	color: #6B7477;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

.arvy-presentation .arvy-presentation__description p,
.arvy-presentation .arvy-presentation__description ul,
.arvy-presentation .arvy-presentation__description ol {
	margin: 0 0 var(--arvy-pr-paragraphes, 20px);
}

.arvy-presentation .arvy-presentation__description > :last-child {
	margin-bottom: 0;
}

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

.arvy-presentation .arvy-presentation__description a:hover {
	color: var(--arvy-pr-lien-survol, #2E5DFF);
}

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

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

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

.arvy-presentation .arvy-presentation__texte > :first-child {
	margin-top: 0;
}

/* ─── Photo ───────────────────────────────────────────────────────────────── */

.arvy-presentation__photo {
	position: relative;
	margin-top: var(--arvy-pr-espace-photo, 64px);
}

.arvy-presentation .arvy-presentation__photo:first-child {
	margin-top: 0;
}

.arvy-presentation .arvy-presentation__visuel {
	position: relative;
	height: var(--arvy-pr-hauteur, 70vh);
	min-height: var(--arvy-pr-hauteur-min, 360px);
	margin: 0;
	overflow: hidden;
	border-radius: var(--arvy-pr-rayon, 28px);
	background-color: rgba(26, 26, 27, 0.06);
	transition: opacity var(--arvy-pr-apparition-duree, 1.2s) var(--arvy-pr-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-pr-delai, 0s);
}

/* L'apparition resserre l'image dans son cadre. */
.arvy-presentation__zoom {
	position: absolute;
	inset: 0;
	transition: transform calc(var(--arvy-pr-apparition-duree, 1.2s) * 1.4) var(--arvy-pr-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-pr-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-presentation .arvy-presentation__zoom img {
	position: absolute;
	top: calc(var(--arvy-pr-parallaxe, 40px) * -1);
	left: 0;
	display: block;
	width: 100%;
	height: calc(100% + var(--arvy-pr-parallaxe, 40px) * 2);
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--arvy-pr-cadrage, center center);
}

.arvy-presentation[data-parallaxe="oui"] .arvy-presentation__zoom img {
	will-change: transform;
}

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

/* ─── Encoche ─────────────────────────────────────────────────────────────────
   7 calques de masque, positionnés en px depuis le coin haut gauche :
   1–4 : aplats (à droite de l'encoche, sous l'encoche, et deux bandes de la
         largeur d'un rayon qui ferment les angles) ;
   5–6 : les deux coins arrondis de la photo le long de l'encoche ;
   7   : le coin creux (l'angle intérieur, arrondi, de l'encoche).
   Chaque aplat déborde de 1 px sur son voisin, et de 2 px au-delà des bords
   droit et bas (rognés par le cadre) : aucun filet ni décrochement, même à
   une taille non entière. Le rayon ne dépasse jamais la moitié de
   l'encoche (sinon les calques se chevaucheraient de travers). */

.arvy-presentation--encoche .arvy-presentation__visuel {
	--arvy-pr-l: var(--arvy-pr-encoche-l, 223px);
	--arvy-pr-h: var(--arvy-pr-encoche-h, 77px);
	--arvy-pr-r: min(var(--arvy-pr-encoche-rayon, var(--arvy-pr-rayon, 28px)), calc(var(--arvy-pr-h) / 2), calc(var(--arvy-pr-l) / 2));
	-webkit-mask-image:
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		radial-gradient(circle at 100% 100%, #000 calc(var(--arvy-pr-r) - 0.5px), transparent calc(var(--arvy-pr-r) + 0.5px)),
		radial-gradient(circle at 100% 100%, #000 calc(var(--arvy-pr-r) - 0.5px), transparent calc(var(--arvy-pr-r) + 0.5px)),
		radial-gradient(circle at 0 0, transparent calc(var(--arvy-pr-r) - 0.5px), #000 calc(var(--arvy-pr-r) + 0.5px));
	mask-image:
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		linear-gradient(#000 0 0),
		radial-gradient(circle at 100% 100%, #000 calc(var(--arvy-pr-r) - 0.5px), transparent calc(var(--arvy-pr-r) + 0.5px)),
		radial-gradient(circle at 100% 100%, #000 calc(var(--arvy-pr-r) - 0.5px), transparent calc(var(--arvy-pr-r) + 0.5px)),
		radial-gradient(circle at 0 0, transparent calc(var(--arvy-pr-r) - 0.5px), #000 calc(var(--arvy-pr-r) + 0.5px));
	-webkit-mask-size:
		calc(100% - var(--arvy-pr-l) - var(--arvy-pr-r) + 3px) calc(100% + 2px),
		calc(100% + 2px) calc(100% - var(--arvy-pr-h) - var(--arvy-pr-r) + 3px),
		calc(var(--arvy-pr-r) + 1px) calc(100% - var(--arvy-pr-r) + 3px),
		calc(100% - var(--arvy-pr-r) + 3px) calc(var(--arvy-pr-r) + 1px),
		var(--arvy-pr-r) var(--arvy-pr-r),
		var(--arvy-pr-r) var(--arvy-pr-r),
		var(--arvy-pr-r) var(--arvy-pr-r);
	mask-size:
		calc(100% - var(--arvy-pr-l) - var(--arvy-pr-r) + 3px) calc(100% + 2px),
		calc(100% + 2px) calc(100% - var(--arvy-pr-h) - var(--arvy-pr-r) + 3px),
		calc(var(--arvy-pr-r) + 1px) calc(100% - var(--arvy-pr-r) + 3px),
		calc(100% - var(--arvy-pr-r) + 3px) calc(var(--arvy-pr-r) + 1px),
		var(--arvy-pr-r) var(--arvy-pr-r),
		var(--arvy-pr-r) var(--arvy-pr-r),
		var(--arvy-pr-r) var(--arvy-pr-r);
	-webkit-mask-position:
		calc(var(--arvy-pr-l) + var(--arvy-pr-r) - 1px) 0,
		0 calc(var(--arvy-pr-h) + var(--arvy-pr-r) - 1px),
		var(--arvy-pr-l) calc(var(--arvy-pr-r) - 1px),
		calc(var(--arvy-pr-r) - 1px) var(--arvy-pr-h),
		var(--arvy-pr-l) 0,
		0 var(--arvy-pr-h),
		calc(var(--arvy-pr-l) - var(--arvy-pr-r)) calc(var(--arvy-pr-h) - var(--arvy-pr-r));
	mask-position:
		calc(var(--arvy-pr-l) + var(--arvy-pr-r) - 1px) 0,
		0 calc(var(--arvy-pr-h) + var(--arvy-pr-r) - 1px),
		var(--arvy-pr-l) calc(var(--arvy-pr-r) - 1px),
		calc(var(--arvy-pr-r) - 1px) var(--arvy-pr-h),
		var(--arvy-pr-l) 0,
		0 var(--arvy-pr-h),
		calc(var(--arvy-pr-l) - var(--arvy-pr-r)) calc(var(--arvy-pr-h) - var(--arvy-pr-r));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Le bouton est posé APRÈS la photo dans le HTML : peint au-dessus, il reste
   visible même si le masque ne tombait pas juste (script absent, texte plus
   long que le repli). L'encoche n'a ni z-index ni transform : le texte du
   bouton garde sa transparence. */
.arvy-presentation__encoche {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	box-sizing: border-box;
	max-width: calc(100% - var(--arvy-pr-rayon, 28px) * 2);
	padding: 0 var(--arvy-pr-encoche-droite, 32px) var(--arvy-pr-encoche-bas, 24px) 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-presentation .arvy-presentation__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--arvy-pr-bouton-ecart, 10px);
	max-width: 100%;
	box-sizing: border-box;
	padding: 14px 24px;
	color: var(--arvy-pr-bouton-texte, #FFFFFF);
	background-color: var(--arvy-pr-bouton-fond, #1A1A1B);
	border: 1px solid var(--arvy-pr-bouton-fond, #1A1A1B);
	border-radius: 999px;
	box-shadow: none;
	mix-blend-mode: var(--arvy-pr-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-pr-bouton-douceur, 0.35s) ease,
		background-color var(--arvy-pr-bouton-douceur, 0.35s) ease,
		border-color var(--arvy-pr-bouton-douceur, 0.35s) ease,
		opacity var(--arvy-pr-apparition-duree, 1.2s) var(--arvy-pr-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-pr-delai, 0s),
		transform var(--arvy-pr-apparition-duree, 1.2s) var(--arvy-pr-courbe, cubic-bezier(0.135, 0.9, 0.15, 1)) var(--arvy-pr-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-presentation .arvy-presentation__bouton-texte {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	text-wrap: balance;
	text-align: center;
}

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

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

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

.arvy-presentation a.arvy-presentation__bouton:focus-visible {
	outline: 2px solid var(--arvy-pr-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'en-tête monte en cascade, la photo apparaît en se resserrant
   dans son cadre, puis le bouton. */

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

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

.arvy-presentation.est-en-attente .arvy-presentation__visuel[data-arvy-apparition] {
	transform: none;
}

.arvy-presentation.est-en-attente .arvy-presentation__zoom {
	transform: scale( var(--arvy-pr-zoom-depart, 1.15) );
}

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

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

	.arvy-presentation.est-en-attente .arvy-presentation__zoom,
	.arvy-presentation .arvy-presentation__zoom img {
		transform: none !important;
	}
}

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

.arvy-no-motion .arvy-presentation.est-en-attente .arvy-presentation__zoom,
.arvy-no-motion .arvy-presentation .arvy-presentation__zoom img {
	transform: none !important;
}

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

	.arvy-presentation.est-en-attente .arvy-presentation__zoom {
		transform: none !important;
	}
}

/* ─── Tailles de repli sur tablette et mobile ─────────────────────────────────
   En fin de fichier pour passer après les règles de base. Elles ne servent
   qu'en l'absence de CSS généré : les typographies réglées, plus spécifiques,
   l'emportent toujours. */

@media (max-width: 1024px) {
	.arvy-presentation .arvy-presentation__surtitre { font-size: 20px; }
	.arvy-presentation .arvy-presentation__titre { font-size: 48px; letter-spacing: -1.5px; }
	.arvy-presentation .arvy-presentation__description { font-size: 18px; }
	.arvy-presentation .arvy-presentation__bouton { font-size: 17px; letter-spacing: -1.5px; }
}

@media (max-width: 767px) {
	.arvy-presentation .arvy-presentation__surtitre { font-size: 18px; }
	.arvy-presentation .arvy-presentation__titre { font-size: 34px; letter-spacing: -1px; }
	.arvy-presentation .arvy-presentation__description { font-size: 17px; }
	.arvy-presentation .arvy-presentation__bouton { font-size: 19px; letter-spacing: -1.2px; }
}