/* @override 
	https://idf-nature-foret-voeux.gorelkine.com/wp-content/themes/idf-nature-foret-voeux/css/ifn-intro-voeux.css?* */

/* Wrapper général */.ifn-intro-wrapper {	width: 100%;	min-height: 100vh;	display: flex;	align-items: center;	justify-content: center;	background: #00591d;	padding: 40px 40px;	box-sizing: border-box;}

/* Scène principale avec perspective pour la fausse 3D */.ifn-intro-stage {	position: relative;	max-width: 1920px;	width: 100%;	aspect-ratio: 16 / 9;	background: #fffcf5;	background-size: cover;	overflow: hidden;	border-radius: 15px;	box-shadow: 0 30px 40px rgba(0, 0, 0, 0.18);	margin: 0 auto;	perspective: 1200px;}.double {	font-family: "Arya-Double";	font-size: 0.87em;	line-height: 1em;}.triple {	font-family: "Arya-Triple";	font-size: 0.95em;}.ifn-intro-stage:before {	content: '';	display: block;	position: absolute;	left: 3%;	top: 4%;	width: 17%;	height: 80px;	background: url('../images/logo-IDF-nature.svg') no-repeat left top;}

/* Logo 50 ans au centre, en arrière-plan + anim drop */.ifn-logo-wrap {	position: absolute;	top: 12%;	left: 50%;	transform: translate(-50%, -200px);	max-height: 30%;	width: 17%;	display: block;	pointer-events: none;	z-index: 1;	opacity: 0;	animation: ifn-logo-drop 1.6s ease-out forwards;}

/* Animation logo */
@keyframes ifn-logo-drop {0% {	opacity: 0;	transform: translate(-50%, 50vw);}100% {	opacity: 1;	transform: translate(-50%, 8vw);}}

.ifn-logo {	height: auto;	max-width: 100%;}/* Partie haute visible au départ */.ifn-logo-top {	transition: transform 2s ease, opacity 1.2s ease;	position: absolute;	top: 0!important;}

/* Partie basse masquée au départ (révélée plus tard) */.ifn-logo-bottom {	position: absolute;	opacity: 0;	transition: transform 2s ease, opacity 1.2s ease;}

/* Étape 1 : apparition initiale du "50 ans" */.ifn-logo-wrap.is-logo-in .ifn-logo-top {	opacity: 1;	transform: translateY(0);}

/* Étape 2 : sur la dernière phrase -> le "50 ans" remonte + la base apparaît */.ifn-logo-wrap.is-revealing .ifn-logo-top {	transform: translateY(-52%);}.ifn-logo-wrap.is-revealing .ifn-logo-bottom {	opacity: 1;	transform: translateY(-52%);	width: 100%;	height: inherit;	top: 0;	left: 0;}


/* Conteneur des éléments popup */.ifn-elements {	position: absolute;	inset: 0;	z-index: 2;	background: url(../images/landscape.svg) center bottom no-repeat;}

/* Base pour tous les éléments popup */.ifn-el {	position: absolute;	transform-origin: 50% 100%; /* accroché à la base */	opacity: 0;	transform: scale(1, 1);	will-change: transform, opacity;	transform-origin: bottom center 60px;	-webkit-filter: drop-shadow( -5px 0px 5px rgba(20, 87, 45, .2));	filter: drop-shadow( -5px 0px 5px rgba(20, 87, 45, .2));	z-index: 10;}

/* Classe d'animation déclenchée par le JS */.ifn-el.is-animating {	animation: ifn-popup 4s cubic-bezier(0.18, 0.8, 0.25, 1) forwards;}

/* Animation "livre pop-up" avec effet trapèze/3D */
@keyframes ifn-popup {0% {	opacity: 0;	transform: scale(1, 0);}50% {	opacity: 1;	transform: scale(1, 1);}100% {	opacity: 1;	transform: scale(1, 1);}}

/* Positionnement des éléments pour coller au visuel de référence */
/* À affiner à l’œil si besoin */.ifn-el-arbre-1 {	left: 20%;	top: 19%;	width: 12%;	z-index: 2;}.ifn-el-arbre-2 {	right: 2%;	top: 46%;	width: 15%;	z-index: 5;}.ifn-el-arbre-3 {	right: 18%;	top: 19%;	width: 15%;	z-index: 0;}

/* 4e arbre supplémentaire */.ifn-el-arbre-4 {	left: -0.2%;	top: 24%;	width: 17%;	z-index: 1;}.ifn-el-batiment {	right: 10%;	top: 30%;	width: 10%;	z-index: 0;}.ifn-el-sapin {	right: 18%;	bottom: 4%;	width: 17%;	z-index: 9;}.ifn-el-epis {	left: 3%;	bottom: 24%;	width: 16%;	z-index: 3;}.ifn-el-biche {	left: 16%;	bottom: 5%;	width: 17%;	z-index: 9;}

/* Zone texte centrale + bouton */.ifn-text-zone {	position: absolute;	left: 50%;	bottom: 17%;	transform: translateX(-50%);	width: 100%;	text-align: center;	z-index: 3;	height: 30%;}

/* Texte principal avec bordure blanche + ombre verte */.ifn-intro-text {	text-shadow: -1px -1px 0px #f1f5e0,
     0px -1px 0px #f1f5e0,
     1px -1px 0px #f1f5e0,
    -1px  0px 0px #f1f5e0,
     1px  0px 0px #f1f5e0,
    -1px  1px 0px #f1f5e0,
     0px  1px 0px #f1f5e0,
     1px  1px 0px #f1f5e0,

    -2px -2px 0px #f1f5e0,
    -1px -2px 0px #f1f5e0,
     0px -2px 0px #f1f5e0,
     1px -2px 0px #f1f5e0,
     2px -2px 0px #f1f5e0,
     2px -1px 0px #f1f5e0,
     2px  0px 0px #f1f5e0,
     2px  1px 0px #f1f5e0,
     2px  2px 0px #f1f5e0,
     1px  2px 0px #f1f5e0,
     0px  2px 0px #f1f5e0,
    -1px  2px 0px #f1f5e0,
    -2px  2px 0px #f1f5e0,
    -2px  1px 0px #f1f5e0,
    -2px  0px 0px #f1f5e0,
    -2px -1px 0px #f1f5e0;}

/* Chaque phrase animée */.ifn-text-line {	font-size: 2.5vw;	line-height: 1;	color: #1f5629; /* vert principal */	text-transform: uppercase;	font-family: "Arya-Double";	margin: auto;	opacity: 0;	transform: translateY(-100%);	will-change: transform, opacity;	-webkit-font-smoothing: antialiased;	font-smooth: always;	overflow: visible;	padding-top: 1%;}

/* Phrases "classiques" (intermédiaires) */.ifn-text-line.is-active {	animation: ifn-text-zoom 3s ease-out forwards;}

/* Dernière phrase : même anim d’entrée mais ne disparaît pas */.ifn-text-line.is-active.is-final {	font-family: "Arya-Single";	line-height: 1em;	animation: ifn-text-zoom-final 3s ease-out forwards;	font-size: 3vw;}

/* Animation "vient du fond, s’approche, repart" pour les phrases intermédiaires */
@keyframes ifn-text-zoom {0% {	opacity: 0;	transform: translateY(80%);}25% {	opacity: 1;	transform: translateY(0%);}80% {	opacity: 1;	transform: translateY(0%);}100% {	opacity: 0;	transform: translateY(0);}}

/* Animation pour la dernière phrase : reste visible à la fin */
@keyframes ifn-text-zoom-final {0% {	opacity: 0;	transform: translateY(80%);}25% {	opacity: 1;	transform: translateY(15%);}100% {	opacity: 1;	transform: translateY(15%);}}

/* Bouton CTA - styles communs */.ifn-cta {	font-family: "Arya-single";	display: inline-flex;	align-items: center;	justify-content: center;	padding: 1.2% 2% 1%;	background: #0f4d2b;	color: #ffffff!important;	text-transform: uppercase;	font-size: 1vw;	border-radius: 999px;	text-decoration: none;	border: 0;	outline: 0;	cursor: pointer;	opacity: 0;	pointer-events: none;	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);	animation: ifn-cta-appear 1.6s ease-out forwards;	transition: background 0.3s linear, color 0.3s linear, box-shadow 0.3s linear;	z-index: 2;}

/* Bouton CTA desktop - positionné en absolute dans le stage */.ifn-cta-desktop {	position: absolute;	bottom: 8%;	left: 50%;	transform: translateX(-50%) translateY(50px);}

/* Bouton CTA mobile - caché par défaut */.ifn-cta-mobile {	display: none;	position: relative;	margin-top: 20px;	transform: translateY(50px);	background-color: rgba(147, 165, 37, 1);}

/* Animation d'apparition du CTA desktop */
@keyframes ifn-cta-appear {0% {	opacity: 0;	transform: translateX(-50%) translateY(50px);	pointer-events: none;}100% {	opacity: 1;	transform: translateX(-50%) translateY(0);	pointer-events: auto;}}

/* Animation d'apparition du CTA mobile */
@keyframes ifn-cta-appear-mobile {0% {	opacity: 0;	transform: translateY(30px);	pointer-events: none;}100% {	opacity: 1;	transform: translateY(0);	pointer-events: auto;}}

.ifn-cta.is-visible {	opacity: 1;	transform: translateX(-50%) translateY(0);	pointer-events: auto;}.ifn-cta:hover {	background: #fff;	color: #0f4d2b!important;	box-shadow: 0 0px 0px rgba(0, 0, 0, 0.28);}


/* Responsive basique */@media (min-width: 1920px) {	.ifn-text-line {		font-size: 48px;	}		.ifn-text-line.is-active.is-final {		font-size: 58px;	}		.ifn-cta {		padding: 20px 40px 18px;		font-size: 18px;	}
	
	@keyframes ifn-logo-drop {	0% {		opacity: 0;		transform: translate(-50%, 500px);	}		100% {		opacity: 1;		transform: translate(-50%, 170px);	}	}}

@media (max-width: 1280px) {	.ifn-cta {		padding: 12px 20px 10px;		font-size: 14px;	}}

@media (max-width: 900px) {	.ifn-intro-wrapper {		padding: 10px;		flex-direction: column;	}
	
	/* Cacher le bouton desktop */		.ifn-cta-desktop {		display: none;	}
	
	/* Afficher le bouton mobile */		.ifn-cta-mobile {		display: inline-flex;		padding: 14px 24px 12px;		font-size: 14px;		animation: ifn-cta-appear-mobile 1.6s ease-out forwards;	}}