/**
 * SCPI Cards — Hero « pile de cartes » ([scpi_hero_stack]).
 *
 * Porté du mockup validé (scpi-hero-mockup.html), classes namespacées sous
 * .scpi-hero-stack__*. Couleurs/typo de la charte : navy #07124a, orange
 * #f18815 / #ea580c, police du site « Plus Jakarta Sans » (var --scpi-font).
 *
 * Différences avec le mockup : pas d'annotation « Survolez … » ; les cartes
 * sont des liens <a> vers #scpi-cards ; l'image de fond vient de chaque SCPI
 * (repli dégradé si absente).
 */

.scpi-hero-stack,
.scpi-hero-stack__cue {
	--scpi-hero-navy: #07124a;
	--scpi-hero-orange: #f18815;
	--scpi-hero-orange-dark: #ea580c;
	--scpi-hero-muted: #6b7280;
	--scpi-hero-border: #e5e7eb;
	--scpi-hero-shadow-lg: 0 24px 48px rgba(7, 18, 74, 0.18);
	--scpi-hero-shadow-xl: 0 32px 64px rgba(7, 18, 74, 0.22);
	--scpi-hero-shadow-sm: 0 2px 8px rgba(7, 18, 74, 0.06);
}

/* ---------- Conteneur (colonne droite du hero) ----------
   Bloc en COLONNE FLEX dont la hauteur est dictée par le contenu (libellé +
   scène des cartes). On ne fixe plus de hauteur en dur : la scène des cartes
   (.scpi-hero-stack__cards) réserve elle-même sa place dans le flux, donc la
   colonne Elementor ne s'effondre pas. min-height équilibre la hauteur avec la
   colonne de gauche (titre + puces + CTA) ; justify-content centre le contenu
   si la colonne est étirée plus haut. */
.scpi-hero-stack {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	/* L'amorce de défilement (sœur, sous les cartes) tire le centre de la
	   colonne vers le bas ; on compense par un espace au-dessus des cartes pour
	   que LES CARTES (et pas la colonne entière) s'alignent sur le centre du
	   texte de gauche. */
	margin-top: 120px;
}
.scpi-hero-stack *,
.scpi-hero-stack__cue * {
	box-sizing: border-box;
}

/* ---------- Zone d'empilement (la « scène ») ----------
   Position RELATIVE (et non plus absolue) : elle reste dans le flux et réserve
   sa hauteur, ce qui donne une vraie hauteur au conteneur et empêche la colonne
   Elementor de s'effondrer. Les cartes restent en absolu À L'INTÉRIEUR de cette
   scène. Largeur = empreinte de l'éventail (carte 3 à left:260 + 290px = 550px) ;
   centrée dans la colonne via margin auto. */
.scpi-hero-stack__cards {
	position: relative;
	width: 550px;
	max-width: 100%;
	height: 460px;
	margin: 0 auto;
}

/* La carte est RIGOUREUSEMENT la carte du catalogue (.scpi-sel-card.scpi-scard,
   visuel dans scpi-cards.css). Ici on ne gère QUE son positionnement en éventail
   + les réglages que le catalogue avait limités au scroller :
   - width: 290px (le catalogue le fixait via .scpi-scroller__track)
   - line-height: 1.35 (idem ; sinon le line-height fixe hérité regonfle la carte) */
.scpi-hero-stack__card {
	position: absolute;
	width: 290px;
	line-height: 1.35;
	box-shadow: var(--scpi-hero-shadow-lg);
	transform-origin: bottom center;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	opacity: 0;
	text-decoration: none;
	color: inherit;
}
.scpi-hero-stack__card:focus-visible {
	outline: 3px solid var(--scpi-hero-orange);
	outline-offset: 3px;
}

/* Carte 1 — gauche, en retrait */
.scpi-hero-stack__card.card-1 {
	top: 10px;
	left: 0;
	transform: rotate(-9deg) translateX(0) translateY(20px);
	z-index: 1;
	animation: scpiHeroFanIn1 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
/* Carte 2 — centre, premier plan, meilleur TDD */
.scpi-hero-stack__card.card-2 {
	top: 0;
	left: 130px;
	transform: rotate(0deg);
	z-index: 3;
	animation: scpiHeroFanIn2 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}
/* Carte 3 — droite, en retrait */
.scpi-hero-stack__card.card-3 {
	top: 10px;
	left: 260px;
	transform: rotate(9deg) translateX(0) translateY(20px);
	z-index: 2;
	animation: scpiHeroFanIn3 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}
/* Cartes 4-5 (limit > 3) — cachées sous la pile, légèrement décalées */
.scpi-hero-stack__card.card-extra {
	top: 16px;
	left: 130px;
	transform: rotate(0deg) translateY(28px) scale(0.94);
	z-index: 0;
	opacity: 1;
	animation: none;
}

/* Écartement au survol de la pile */
.scpi-hero-stack__cards:hover .scpi-hero-stack__card.card-1 {
	transform: rotate(-13deg) translateX(-30px) translateY(10px);
}
.scpi-hero-stack__cards:hover .scpi-hero-stack__card.card-2 {
	transform: rotate(0deg) translateY(-12px);
	box-shadow: var(--scpi-hero-shadow-xl);
}
.scpi-hero-stack__cards:hover .scpi-hero-stack__card.card-3 {
	transform: rotate(13deg) translateX(30px) translateY(10px);
}

/* (Le visuel interne de la carte — image, badges, nom, TDD, lignes — provient
   désormais de scpi-cards.css via .scpi-scard*, identique au catalogue.) */

/* ---------- Amorce de défilement ---------- */
.scpi-hero-stack__cue {
	/* Séparation nette sous les cartes, sans gonfler inutilement la colonne. */
	margin-top: 36px;
	text-align: center;
	opacity: 0;
	animation: scpiHeroFadeUp 0.7s ease-out 1.1s forwards;
}
.scpi-hero-stack__cue-text {
	font-family: var(--scpi-font, 'Plus Jakarta Sans', sans-serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--scpi-hero-navy);
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}
.scpi-hero-stack__cue-text em {
	color: var(--scpi-hero-orange);
	font-style: normal;
}
.scpi-hero-stack__cue-arrow {
	width: 44px;
	height: 44px;
	margin: 0 auto;
	border: 1.5px solid var(--scpi-hero-navy);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--scpi-hero-navy);
	font-size: 18px;
	text-decoration: none;
	animation: scpiHeroPulse 2.2s ease-in-out infinite;
}
.scpi-hero-stack__cue-arrow:focus-visible {
	outline: 3px solid var(--scpi-hero-orange);
	outline-offset: 3px;
}

/* ---------- Animations ---------- */
@keyframes scpiHeroFadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes scpiHeroFanIn1 {
	0%   { opacity: 0; transform: rotate(0deg) translateX(120px) translateY(0) scale(0.92); }
	100% { opacity: 1; transform: rotate(-9deg) translateX(0) translateY(20px); }
}
@keyframes scpiHeroFanIn2 {
	0%   { opacity: 0; transform: rotate(0deg) translateX(120px) translateY(0) scale(0.92); }
	100% { opacity: 1; transform: rotate(0deg) translateX(0) translateY(0); }
}
@keyframes scpiHeroFanIn3 {
	0%   { opacity: 0; transform: rotate(0deg) translateX(120px) translateY(0) scale(0.92); }
	100% { opacity: 1; transform: rotate(9deg) translateX(0) translateY(20px); }
}
@keyframes scpiHeroPulse {
	0%, 100% { transform: translateY(0); opacity: 0.7; }
	50%      { transform: translateY(6px); opacity: 1; }
}

/* Respect des préférences de mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
	.scpi-hero-stack__label,
	.scpi-hero-stack__card.card-1,
	.scpi-hero-stack__card.card-2,
	.scpi-hero-stack__card.card-3,
	.scpi-hero-stack__cue {
		animation: none !important;
		opacity: 1 !important;
	}
	.scpi-hero-stack__cue-arrow {
		animation: none !important;
	}
}

/* ---------- Responsive ---------- */
/* En dessous de 960px la colonne droite passe sous la colonne gauche
   (géré par Elementor). La pile éventail (positionnement absolu + survol)
   n'a pas de sens au doigt : on la masque et on s'appuie sur le catalogue
   #scpi-cards plus bas. */
@media (max-width: 960px) {
	.scpi-hero-stack,
	.scpi-hero-stack__cue {
		display: none;
	}
}

/* ============================================================
   Intégration dans le hero Elementor.
   Le ciblage par :has(.scpi-hero-stack) limite ces ajustements au SEUL hero
   qui contient le shortcode — indépendamment de l'ID de page (donc portable
   prod-mirror -> prod, même si l'ID diffère). Les autres hero .publique-*
   du site (/per/, /assurance-vie/…) ne sont PAS touchés. Bloc autonome :
   aucun réglage Elementor manuel requis pour l'alignement/l'espacement.
   (:has() est supporté par tous les navigateurs courants depuis 2023.)
   ============================================================ */

/* 1. Réduit l'espace vide au-dessus et n'impose plus 800px de hauteur.
   ~9.5rem en haut : sous l'en-tête flottant. */
.publique-hero:has(.scpi-hero-stack) {
	padding-top: 9.5rem;
	min-height: 0;
}

/* 2. Centre verticalement les 2 colonnes l'une par rapport à l'autre
   (la ligne hôte ne définissait pas d'alignement -> stretch par défaut). */
.publique-hero-container:has(.scpi-hero-stack) {
	align-items: center;
}
.publique-hero-card:has(.scpi-hero-stack) {
	padding: 0;
	/* Force la colonne hôte en flex colonne : ainsi la pile et l'amorce de
	   défilement s'empilent verticalement même si la colonne Elementor est
	   restée une grille 2 colonnes (sinon l'amorce se placerait À CÔTÉ des
	   cartes). Rend l'installation Elementor infaillible : il suffit de poser
	   le widget Shortcode, sans toucher au type de conteneur. */
	display: flex;
	flex-direction: column;
}

/* 3. La colonne droite (~40 %) est plus étroite que l'éventail (540 px) :
   on réduit la pile pour qu'elle tienne dans la colonne et s'aligne avec le
   texte. On utilise `zoom` (et NON `transform: scale`) : `zoom` réduit aussi la
   boîte dans le flux (pas de marge négative à compenser) et surtout re-rasterise
   au DPI natif → cartes NETTES sur écran haute densité. `transform: scale`
   promouvait la pile en couche GPU mise à l'échelle → rendu flou en Retina. */
.scpi-hero-stack__cards {
	zoom: 0.82;
}