/**
 * Styles de la section Réalisations (widget « arvy-projets »).
 *
 * Chargé uniquement sur les pages où la section est utilisée.
 *
 * Deux états, dans cet ordre :
 *
 * 1. STATIQUE — l'état par défaut, celui du CSS nu. Une liste de visuels,
 *    chacun portant son titre. C'est ce que voit un visiteur sans JavaScript,
 *    en mouvement réduit, ou sur un écran étroit.
 *
 * 2. COLLÉ — activé seulement quand le script anime réellement la section
 *    (préfixe « .arvy-is-ready:not(.arvy-no-motion) »). La carte se colle,
 *    la liste de titres défile dans sa fenêtre, face aux visuels.
 *
 * Conséquence : aucun réglage, aucune panne de script ne peut rendre un
 * projet inatteignable.
 *
 * Ce fichier ne contient que de la structure. Couleurs, tailles, rayons et
 * espacements sont des contrôles Elementor.
 */

/* Sécurité 1 : un conteneur Elementor en colonne avec « flex-wrap: wrap »
   fige la hauteur de sa ligne au premier calcul. Comme la hauteur de cette
   section dépend de son contenu (le format des visuels), l'élément se
   retrouve tronqué et déborde par-dessus ce qui suit. Le wrap n'a de sens
   qu'avec une hauteur imposée : on le neutralise pour le conteneur qui
   porte directement la section. */
.e-con:has( > .elementor-widget-arvy-projets ),
.elementor-element:has( > .elementor-widget-arvy-projets ) {
	flex-wrap: nowrap;
}

/* Sécurité 2 : « position: sticky » cesse de fonctionner si un ancêtre porte
   overflow: hidden. On neutralise le cas sur nos propres conteneurs. */
.arvy-section--arvy-projets,
.arvy-section--arvy-projets .arvy-section__inner {
	overflow: visible;
}

.arvy-projets {
	position: relative;
}

.arvy-projets__carte {
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	box-sizing: border-box;
}

.arvy-projets__colonne {
	display: flex;
	flex-direction: column;
	min-width: 0;
	box-sizing: border-box;
}

.arvy-projets__label {
	margin: 0;
	flex: none;
}

.arvy-projets__fenetre {
	position: relative;
	/* Hors état collé, la colonne de titres ferait doublon avec les titres
	   portés par les visuels. */
	display: none;
}

.arvy-projets__liste {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Un titre est soit un lien vers le projet, soit un bouton quand aucun lien
   n'est renseigné : dans les deux cas il amène son projet en face. Le reset
   ci-dessous efface l'apparence native du bouton. */
.arvy-projets__titre {
	margin: 0;
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

/* Un titre sans lien est un <button>, et hérite donc du style global des
   boutons du site (Elementor → Réglages du site → Boutons) : fond d'accent,
   pastille, padding. Ici ce n'est pas un bouton d'action mais un titre, on
   annule cette apparence. Le sélecteur est volontairement plus spécifique que
   celui du kit — « .elementor-kit-xxx button » — y compris sur ses états.
   Ni la couleur ni la typographie ne sont touchées : elles restent pilotées
   par les contrôles de la section. */
.arvy-projets__liste button.arvy-projets__titre,
.arvy-projets__liste button.arvy-projets__titre:hover,
.arvy-projets__liste button.arvy-projets__titre:focus {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

/* Cliquable seulement là où le clic fait quelque chose : en état collé. */
.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__titre {
	cursor: pointer;
}

.arvy-projets__titre:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.arvy-projets__cadre {
	position: relative;
	min-width: 0;
}

.arvy-projets__media {
	display: flex;
	flex-direction: column;
}

.arvy-projets__visuel {
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	text-decoration: none;
	/* Hors état collé, le visuel suit un format : une hauteur en vh donnerait
	   des cartes démesurées sur un téléphone. Les valeurs viennent des
	   contrôles, posées en variables sur « .arvy-projets ». */
	aspect-ratio: var( --arvy-format-visuel, 4 / 3 );
}

.arvy-projets__visuel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Le sélecteur est descendant, et non la seule classe : le garde-fou commun
   « .arvy-section img { height: auto } » de plugin.css est plus spécifique
   qu'une classe seule, et laisserait l'image à sa hauteur naturelle — donc
   du vide sous elle au lieu d'un cadrage plein. */
.arvy-projets__visuel .arvy-projets__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.arvy-projets__visuel:hover .arvy-projets__image {
	transform: scale(1.04);
}

/* Voile sombre en pied d'image : garantit la lisibilité du titre porté par
   le visuel, quelle que soit la photo. */
.arvy-projets__ombre {
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.arvy-projets__titre-visuel {
	position: absolute;
	left: var( --arvy-marge-etiquette, 16px );
	bottom: var( --arvy-marge-etiquette, 16px );
	z-index: 2;
	line-height: 1.05;
	padding-right: 35%;
}

/* Sur un écran étroit, l'étiquette se place en haut : en bas, elle entrerait
   en concurrence avec le titre du projet. */
.arvy-projets__etiquette {
	position: absolute;
	right: var( --arvy-marge-etiquette, 16px );
	top: var( --arvy-marge-etiquette, 16px );
	z-index: 2;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.arvy-projets__etiquette svg {
	width: 1em;
	height: 1em;
}

/* GSAP écrit un transform en style inline : ces règles garantissent qu'il ne
   survit pas au passage en état statique. */
.arvy-no-motion .arvy-projets__liste,
.arvy-no-motion .arvy-projets__media {
	transform: none !important;
}

@media (max-width: 1024px) {
	.arvy-projets__liste,
	.arvy-projets__media {
		transform: none !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   État COLLÉ — uniquement quand le script anime, et au-dessus de la largeur
   où la mise en page à deux colonnes tient réellement.
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 1025px) {

	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__scene {
		position: sticky;
		top: 0;
		height: 100vh;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__carte {
		height: 100%;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	/* La carte ne garde que ses marges latérales : les visuels touchent le haut
	   et le bas, et se font couper par ses bords. Sans cela, un espace vide
	   court au-dessus et en dessous de la pile d'images.
	   La classe est doublée à dessein : la règle doit passer devant celle que
	   génère le contrôle « Padding interne » de la carte, qui a la même
	   spécificité sans ce doublage. */
	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets .arvy-projets__carte.arvy-projets__carte {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* La colonne de titres reprend la respiration verticale à son compte :
	   elle, ne doit pas toucher les bords. */
	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__colonne {
		height: 100%;
		padding-top: var( --arvy-respiration-colonne, 40px );
		padding-bottom: var( --arvy-respiration-colonne, 40px );
	}

	/* La fenêtre est volontairement plus courte que la colonne : c'est ce qui
	   donne le rouleau. Les marges automatiques la centrent sous le label. */
	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__fenetre {
		display: block;
		flex: 0 0 auto;
		margin: auto 0;
		overflow: hidden;
	}

	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__liste {
		will-change: transform;
	}

	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__media {
		will-change: transform;
	}

	/* Le titre en face du visuel courant reste net ; les autres reculent d'un
	   cran, sans jamais devenir illisibles. */
	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__titre {
		transition: opacity 0.35s ease;
	}

	/* Les visuels portent déjà leur titre dans la colonne de gauche. */
	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__titre-visuel,
	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__ombre {
		display: none;
	}

	/* Le titre est porté par la colonne de gauche : l'étiquette peut reprendre
	   sa place en bas, et le visuel sa hauteur d'écran. */
	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__visuel {
		aspect-ratio: auto;
		height: var( --arvy-hauteur-visuel, 62vh );
	}

	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__etiquette {
		top: auto;
		bottom: var( --arvy-marge-etiquette, 16px );
	}

	.arvy-is-ready:not(.arvy-no-motion) .arvy-projets__cadre {
		height: 100%;
		overflow: hidden;
	}
}