/* =========================
   HEADER
   ======================== */

/* ====== hover et micro-animation des liens ======= */

/* Links du menu principal */
.main-header .wp-block-navigation-item__content {
	transition:
		color 0.25s ease,
		transform 0.25s ease;
}

/* Hover */
.main-header .wp-block-navigation-item__content:hover {
	color: #C3413F !important;
	transform: translateY(-2px);
} 

/* Suppression du soulignement du lien "Nous contacter" dans le bandeau promo */
.bandeau-promo a {
    text-decoration: none;
}


/* ====== FIN hover et micro-animation des liens ======= */


/* ====== hover burger menu fermé + hover croix menu ouvert ======  */

/* ====== BUrger menu fermé ====== */
/* Ligne du bas */
.wp-block-navigation__responsive-container-open::after {
	width: 16px !important;

	transition:
		width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
		transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

	transform-origin: left center;
}

/* Hover ligne du bas s'anime*/
.wp-block-navigation__responsive-container-open:hover::after {
	width: 24px !important;
}
/* ====== Fin burger menu fermé ======  */

/* ====== Croix menu ouvert ======  */
/* Animation uniquement de la croix */
.wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container-close::after {
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Rotation des deux barres */
.wp-block-navigation__responsive-container-close:hover::before {
	transform: rotate(135deg);
}

.wp-block-navigation__responsive-container-close:hover::after {
	transform: rotate(45deg);
}
/* ====== Fin Croix menu ouvert ======  */

/* ====== hover burger menu fermé + hover croix menu ouvert ======  */

   /* =========================
   FIN HEADER
   ======================== */

/* =========================
   PAGE D'ACCUEIL : micro-animations et animations
   ======================== */

   /* =========================
   HERO : shadow title */
.hero-title {
	text-shadow:
		0 1px 4px rgba(0,0,0,.95),
        0 2px 12px rgba(0,0,0,.20);
	}

.hero-subtitle {
	text-shadow:
        0 1px 4px rgba(0,0,0,.65),
        0 2px 12px rgba(0,0,0,.50);
}

   /* =========================
   HERO : FIN shadow title */

/* =========================
   HERO : etoiles commentaires Hover 
   ======================== */

.testimonial-hero {
	transition:
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.6s ease;

	transform: scale(1);
	will-change: transform;
}

/* Hover premium discret */
.testimonial-hero:hover {
	transform: scale(1.02) translateY(-2px);
	filter: brightness(1.02);
}

/* =========================
    FIN HERO : etoiles commentaires Hover 
   ======================== */

/* =========================
   HERO : rotations et apparition des 3 photos 
   ======================== */

/* Conteneur */
.hero-photos {
	position: relative;
}

/* Toutes les images */
.hero-photos .is-style-rounded img {
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	transition: transform 0.3s ease;
	display: block;
}

/* Grande image du haut */
.hero-photos > .wp-block-image {
	position: relative;
	z-index: 2;

	opacity: 0;
	animation: photoTop 0.9s ease forwards;
	animation-delay: 0.2s;
}

/* Galerie du bas */
.hero-photos .wp-block-gallery {
	margin-top: -2rem;
	position: relative;
	z-index: 3;
}

/* Première petite image */
.hero-photos .wp-block-gallery .size-large:first-child {
	position: relative;
	z-index: 2;

	opacity: 0;
	animation: photoLeft 0.9s ease forwards;
	animation-delay: 0.6s;
}

/* Deuxième petite image */
.hero-photos .wp-block-gallery .size-large:last-child {
	position: relative;
	z-index: 1;

	opacity: 0;
	animation: photoRight 0.9s ease forwards;
	animation-delay: 1s;
}

/* Hover premium */
.hero-photos .is-style-rounded img:hover {
	transform: scale(1.02);
}

/*
   ANIMATIONS
========================= */

/* Grande image */
@keyframes photoTop {
	from {
		opacity: 0;
		transform: translateY(40px) rotate(-6deg) scale(0.92);
	}

	to {
		opacity: 1;
		transform: translateY(0) rotate(-2deg) scale(1);
	}
}

/* Petite image gauche */
@keyframes photoLeft {
	from {
		opacity: 0;
		transform: translateY(30px) translateX(20px) rotate(8deg) scale(0.92);
	}

	to {
		opacity: 1;
		transform: translateY(0) translateX(40px) rotate(3deg) scale(1);
	}
}

/* Petite image droite */
@keyframes photoRight {
	from {
		opacity: 0;
		transform: translateY(40px) rotate(-8deg) scale(0.92);
	}

	to {
		opacity: 1;
		transform: translateY(-10px) rotate(-4deg) scale(1);
	}
}

/*
   FIN ANIMATIONS
========================= */

/* =========================
   FIN HERO : rotations et apparition des 3 photos 
   ======================== */

/* =========================
   CARDS PTS INTERNET : micro-animation zoom photos + bordure hover
========================= */
/* icone interet reste en place au zoom*/
.groupe-interet {
	position: relative;
}

.icone-interet {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
}

/* La card coupe ce qui dépasse */
.card {
	overflow: hidden;
}

/* Bloc image */
.illustration {
	min-height: 320px;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	transform: scale(1);
	transition:
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.7s ease;

	will-change: transform;
}

/* Micro-animation premium */
.card:hover .illustration {
	transform: scale(1.06) translateY(-2px);
	filter: brightness(1.03);
}

/* =========================
   BORDURE AU HOVER POUR .card */

/* Bordure transparente par défaut (pour éviter le "saut" visuel) */
.card {
  border: 1px solid rgba(152,48,46,0.18);
  transition: border-color 0.3s ease; /* Animation fluide pour la bordure */
}

/* Bordure visible au survol */
.card:hover {
  border-color: #98302e;
}

/*
   FIN BORDURE AU HOVER POUR .card
========================= */

/* =========================
   FIN CARDS PTS INTERNET : micro-animation zoom photos + bordure hover
========================= */


/* =========================
   CARDS testimonials - léger zoom et bordure au hover
========================= */

.testimonial-card {
	position: relative;
	border: 1px solid rgba(152,48,46,0.18);
	background: rgba(255,255,255,0.02);

	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	transition:
		transform 0.45s cubic-bezier(.22,1,.36,1),
		border-color 0.45s ease,
		box-shadow 0.45s ease,
		background 0.45s ease;
}

/* léger glow subtil */
.testimonial-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.10) 0%,
			rgba(255,255,255,0.02) 40%,
			rgba(255,255,255,0) 100%
		);

	opacity: 0;
	transition: opacity 0.45s ease;
}

/* Hover desktop uniquement */
@media (hover: hover) and (pointer: fine) {

	.testimonial-card:hover {
		transform: translateY(-4px);

		background: rgba(255,255,255,0.04);

		box-shadow:
			0 6px 18px rgba(0,0,0,0.06),
			0 18px 45px rgba(0,0,0,0.12),
			0 0 0 1px rgba(152,48,46,0.10);
	}

	.testimonial-card:hover::before {
		opacity: 1;
	}
}

/* =========================
   CARDS testimonials - léger zoom et bordure au hover
========================= */

/* =========================
   MAPS GOOGLE : Iframe responsive
========================= */

/* Conteneur de la map */
.map-responsive {
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid rgba(152, 48, 46, 0.35);

	transition:
		border-color 0.4s ease,
		box-shadow 0.4s ease;
}

/* Hover desktop uniquement */
@media (hover: hover) and (pointer: fine) {
	.map-responsive:hover {
		border-color: #98302e;

		box-shadow:
			0 10px 30px rgba(152, 48, 46, 0.18);
	}
}

/* iframe Google Maps */
.map-responsive iframe {
	width: 100%;
	max-width: 100%;
	height: clamp(300px, 50vw, 500px);
	border: 0;
	display: block;
}

/* =========================
   FIN MAPS GOOGLE : Iframe responsive
========================= */

/* =========================
   FIN PAGE D'ACCUEIL : micro-animations et animations
   ======================== */

/* =========================
   PAGE LA VILLA ASTERIE : micro-animation des photos et du titre
========================= */

/* =========================
   PHOTOS VILLA PREMIUM =========== */

.villa-photo {
	overflow: hidden;
	border-radius: 1.2rem;
	cursor: pointer;

	transition:
		transform 0.7s cubic-bezier(0.19, 1, 0.22, 1),
		box-shadow 0.7s cubic-bezier(0.19, 1, 0.22, 1),
		filter 0.7s ease;

	will-change: transform;
}

/* Image interne */
.villa-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	transition:
		transform 1.2s cubic-bezier(0.19, 1, 0.22, 1),
		filter 0.8s ease;
}

/* Hover desktop uniquement */
@media (hover: hover) and (pointer: fine) {

	.villa-photo:hover {
		transform: translateY(-4px);

		box-shadow:
			0 18px 40px rgba(0, 0, 0, 0.18),
			0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.villa-photo:hover img {
		transform: scale(1.06) rotate(-0.5deg);
		filter: brightness(1.04);
	}
}

/* =========================
   FIN PHOTOS VILLA PREMIUM =========== */

/* =========================
   TITLE VILLA INTRO =========== */

/* shadow pour les titres */
.villa-title {
	text-shadow:
		0 1px 4px rgba(0,0,0,.95),
        0 2px 12px rgba(0,0,0,.80);
	}

.villa-subtitle {
	text-shadow:
        0 1px 4px rgba(0,0,0,.65),
        0 2px 12px rgba(0,0,0,.50);
}

/* fade up pour les titres */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.villa-title {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
}

.villa-subtitle {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: .2s;
}

/* =========================
   FIN TITLE VILLA INTRO =========== */

/* =========================
   FIN PAGE LA VILLA ASTERIE : micro-animation des photos et du titre
========================= */

/* =========================
   PAGE galerie photos
========================= */

/* =========================
   TITLE GALERIE INTRO =========== */
/* shadow pour les titres */
.galerie-title {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 1.10),
        0 2px 12px rgba(0, 0, 0, 0.80);
}

.galerie-subtitle {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.65),
        0 2px 12px rgba(0, 0, 0, 0.50);
}

/* fade up pour les titres */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.galerie-title {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
}

.galerie-subtitle {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: .2s;
}


/* =========================
   FIN TITLE GALERIE INTRO =========== */

/* =========================
   soulèvement GALERIE  =========== */

.galerie-photo {
	transition:
		transform 0.4s ease,
		box-shadow 0.4s ease;
}

@media (hover: hover) and (pointer: fine) {
	.galerie-photo:hover {
		transform: translateY(-4px);
	}
}

/* =========================
   FIN soulèvement GALERIE  =========== */

/* =========================
   FIN PAGE galerie photos
========================= */

/* =========================
   PAGE TOURISME & LOISIRS
========================= */

/* TITRE */

.hero-tourisme-title {
	opacity: 0;
	transform: translateY(-200px);

	animation: heroTitleReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes heroTitleReveal {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* SOUS-TITRE */

.hero-tourisme-subtitle {
	opacity: 0;
	transform: translateX(-200px);

	animation: heroSubtitleReveal 1s cubic-bezier(.22,.61,.36,1) forwards;
	animation-delay: .45s;
}

@keyframes heroSubtitleReveal {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* === ombre blanche derrière title et subtittle ===== */
.hero-tourisme-title {
	text-shadow:
		0 1px 4px rgba(0, 0, 0, 1.10),
        0 2px 12px rgba(0, 0, 0, 0.80);
}

.hero-tourisme-subtitle {
	text-shadow:
        0 1px 4px rgba(0,0,0,.65),
        0 2px 12px rgba(0,0,0,.50);
}


/* ===  Fin ombre blanche derrière title et subtittle ===== */

/* ===  Carte geoportail ===== */
.carte-geoportail {
	border-radius: 1.5rem;
	overflow: hidden;

	box-shadow:
		0 8px 25px rgba(0,0,0,.06);

	transition:
		transform .35s ease,
		box-shadow .35s ease;
}

.carte-geoportail:hover {
	transform: translateY(-2px);

	box-shadow:
		0 14px 35px rgba(0,0,0,.10);
}
/* ===  Fin Carte geoportail ===== */

/* =========================
   CARDS LIEUX INCONTOURNABLES =========== */

.card-lieu {
	position: relative;
	overflow: hidden;
}

.card-lieu .incontournable-img {
	transition:
		transform 0.8s ease,
		filter 0.8s ease;
}

/* bottom apparait au hover */
.card-lieu::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;

	width: 100%;
	height: 3px;

	background: #98302e;

	transform: scaleX(0);
	transform-origin: center;

	transition: transform 0.4s ease;
}

/* Hover zoom desktop uniquement */
@media (hover: hover) and (pointer: fine) {

	.card-lieu:hover .incontournable-img {
		transform: scale(1.05);
		filter: brightness(1.08);
	}

	.card-lieu:hover::after {
		transform: scaleX(1);
	}
}

/* icone  haut qui reste en place au zoom */
.card-lieu {
	position: relative;
}

.icone-lieu {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 10;
}

/* capsule distances */
.distance-lieu {
	display: inline-flex;
	align-items: center;
	gap: .4rem;

	padding: .35rem .75rem;

	background: rgba(152,48,46,.08);
	border: 1px solid rgba(152,48,46,.15);

	border-radius: 999px;
}

/* =========================
   FIN CARDS LIEUX INCONTOURNABLES =========== */

/* =========================
   SECTION EXPERIENCES =========== */

.experience-item {
	border-left: 3px solid #98302e;
	padding-left: 1.25rem;
}

/* =========================
   FIN SECTION EXPERIENCES =========== */

/* =========================
   FIN PAGE TOURISME & LOISIRS
========================= */

/* =========================
   PAGE FAQ
========================= */

/* shadow pour les titres */
.faq-title {
	text-shadow:
		0 1px 4px rgba(0,0,0,.95),
        0 2px 12px rgba(0,0,0,.80);
	}

.faq-subtitle {
	text-shadow:
        0 1px 4px rgba(0,0,0,.65),
        0 2px 12px rgba(0,0,0,.50);
}

/* fade up pour les titres */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-title {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
}

.faq-subtitle {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: .2s;
}

/* =========================
   FIN PAGE FAQ
========================= */

/* =========================
   PAGE CONTACT
========================= */

/* shadow pour les titres */
.contact-title {
	text-shadow:
		0 1px 4px rgba(0,0,0,.95),
        0 2px 12px rgba(0,0,0,.80);
	}

.contact-subtitle {
	text-shadow:
        0 1px 4px rgba(0,0,0,.65),
        0 2px 12px rgba(0,0,0,.50);
}

/* fade up pour les titres */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-title {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
}

.contact-subtitle {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: .2s;
}


/* =========================
   FIN PAGE CONTACT
========================= */

/* =========================
   PAGE TARIFS
========================= */

/* shadow pour les titres */
.tarifs-title {
	text-shadow:
		0 1px 4px rgba(0,0,0,.95),
        0 2px 12px rgba(0,0,0,.80);
	}

.tarifs-subtitle {
	text-shadow:
        0 1px 4px rgba(0,0,0,.65),
        0 2px 12px rgba(0,0,0,.50);
}

/* fade up pour les titres */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tarifs-title {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
}

.tarifs-subtitle {
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    animation-delay: .2s;
}

/* =========================
   FIN PAGE TARIFS
========================= */