/* ============================================================
   EMERY FRED V2 — Surcouche "Dark Editorial"
   Ce fichier surcharge theme.css / dark-style.css de Sepia.
   Ne jamais modifier les fichiers d'origine du template.
   ============================================================ */

:root {
	--ef-bg: #111111;
	--ef-bg-2: #181818;
	--ef-white: #F2F0EB;
	--ef-text-2: #A8A39A;
	--ef-accent: #B89A72;
}

/* ---- Typographie ---- */
body {
	background-color: var(--ef-bg);
	color: var(--ef-text-2);
	font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.tt-heading-title, .intro-title, .gl-item-title, .footer-text h4 {
	font-family: 'Cormorant Garamond', 'Georgia', serif;
	color: var(--ef-white);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.tt-heading-subtitle, .intro-subtitle {
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ef-accent);
}

/* ---- Logo header ----
   Sepia impose "#header #logo img { max-height: 50px }" (theme.css).
   On neutralise cette contrainte pour garder le ratio du logo à largeur fixe.
   Taille légèrement réduite le 26/08 (160px → 140px desktop, 120px → 110px mobile)
   à la demande de Fred, pour que le logo "rentre" mieux dans le header maintenant
   que le menu occupe toute la largeur de la fenêtre (voir plus bas). */
#header #logo img.ef-logo-header {
	max-height: none;
	width: 140px;
	height: auto;
}
@media (max-width: 991px) {
	#header #logo img.ef-logo-header {
		max-height: none !important;
		width: 110px;
		height: auto;
	}
}

/* ---- Header ----
   Demande client 26/08 : header en fond noir opaque et texte blanc en permanence
   (plus de variante transparente), qui se masque au scroll vers le bas et
   réapparaît au scroll vers le haut (classe native Sepia "header-show-hide-on-scroll",
   identique au comportement de sepia/home-landing.html) plutôt que de rester fixe à l'écran. */
#header {
	/* Légère transparence (27/08, demande client) : 25% (dans la fourchette 20-30% demandée),
	   combinée à un flou d'arrière-plan (backdrop-filter) plutôt qu'une simple opacité seule.
	   Sans le flou, le texte blanc du menu perdrait en lisibilité sur les bandeaux hero très
	   clairs (mariage en robe blanche, paysages en plein jour) — le header passe devant des
	   images très variées d'une page à l'autre (et devant le contenu de page en général au
	   ré-affichage lors d'un scroll vers le haut, cf. "header-show-hide-on-scroll"), le flou
	   garantit un contraste stable quel que soit ce qu'il y a derrière. Fred avait déjà signalé
	   par le passé qu'un header transparent posait un problème de lisibilité (voir plus haut,
	   26/08 : c'était alors un bug qui le rendait 100% transparent — ici la transparence est
	   volontaire et beaucoup plus légère, avec le flou en filet de sécurité).
	   Fallback pour les navigateurs sans support de backdrop-filter : variable CSS neutralisée
	   ci-dessous pour repasser sur un fond plein (pas de flou = texte moins protégé). */
	background-color: rgba(17,17,17,0.75);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	#header {
		background-color: var(--ef-bg);
	}
}

/* Le menu doit occuper toute la largeur de la fenêtre (demande client 26/08), contrairement
   aux autres blocs de contenu qui restent "boxed" à 1440px (cf. section suivante) — on annule
   ici la limite de largeur du mode boxed uniquement pour le header, qui garde son propre
   espacement natif (padding left/right ci-dessous). */
@media (min-width: 992px) {
	#header .header-inner.tt-wrap {
		max-width: none;
		padding-left: 40px;
		padding-right: 40px;
	}
}

/* Logo positionné verticalement dans le header (desktop).
   Important : le logo reste en "float:left" (comportement natif du thème pour
   #header.menu-align-right #logo), car c'est ce qui réserve sa place et empêche le
   menu — en "float:right" — de passer par-dessus lui aux largeurs d'écran les plus
   étroites du mode desktop (juste au-dessus de 991px, avant le menu mobile). Le
   passer en "position:absolute" (essayé un temps) sortait le logo du flux et cassait
   cette réservation d'espace, provoquant un chevauchement logo/texte du menu vers 992px.
   On centre donc verticalement via "position:relative" + "top" (qui décale l'affichage
   sans sortir l'élément du flux). Ajusté le 26/08 (1px → 6px) : centré au pixel près
   sur la ligne du texte du menu, le logo touchait presque le bord supérieur du header
   (quasiment 0 espace au-dessus) — on centre maintenant sur la hauteur totale du
   header pour un espace respirant équilibré au-dessus et en dessous du logo, au prix
   d'un tout petit écart (quelques px) avec le centre exact du texte du menu,
   imperceptible à l'œil. */
@media (min-width: 992px) {
	#header.menu-align-right #logo {
		float: left;
		position: relative;
		top: 6px;
		margin: 0 3% 0 0;
	}
}
.tt-main-menu .tt-menu-nav > li > a {
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
}
.tt-tools-button.ef-book-btn {
	border: 1px solid var(--ef-accent) !important;
	color: var(--ef-white) !important;
	background: transparent !important;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 11px;
	padding: 10px 22px !important;
	transition: all .3s ease;
}
.tt-tools-button.ef-book-btn:hover {
	background: var(--ef-accent) !important;
	color: #111 !important;
}

/* ---- Lien Accès Client (menu-tools, à côté de Réserver) ----
   Demande client 26/08 : même habillage "bouton encadré" que Réserver (au lieu du
   lien texte discret précédent), pour que les deux boîtes du header se répondent. */
.tt-tools-button.ef-client-btn {
	border: 1px solid var(--ef-accent) !important;
	color: var(--ef-white) !important;
	background: transparent !important;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-size: 11px;
	padding: 10px 22px !important;
	margin-left: 12px;
	transition: all .3s ease;
}
.tt-tools-button.ef-client-btn:hover {
	background: var(--ef-accent) !important;
	color: #111 !important;
}
.ef-client-icon { display: none; }
@media (max-width: 991px) {
	/* Icône seule sur mobile pour éviter que le bouton passe à la ligne et chevauche le hero,
	   mais on garde le même encadré "bouton" que sur desktop. */
	.tt-tools-button.ef-client-btn { padding: 10px 14px !important; }
	.ef-client-text { display: none; }
	.ef-client-icon { display: inline-block; font-size: 14px; }
}

/* ---- Menu desktop resserré (992–1249px) ----
   Bug trouvé en vérifiant le passage du header en pleine largeur (26/08) : le menu
   complet (logo + 8 items + 2 boutons) ne rentre pas sur cette tranche étroite de
   largeurs "desktop" (juste au-dessus du seuil de bascule vers le menu mobile à
   991px, avant que le thème ne réduise suffisamment les espacements) — le menu
   passait par-dessus le logo, ou (juste en dessous de 1250px) était rejeté sur une
   deuxième ligne dans le header (le flottant du logo ne laissant plus assez de place
   à droite pour que le menu tienne sur la même ligne). On resserre donc les
   espacements/tailles sur cette tranche uniquement (logo, items, boutons), avec une
   marge de sécurité confortable, sans toucher au design normal en dessous de 992px
   (menu mobile) ni au-dessus de la fourchette (vérifié sans problème à partir de là).
   Fourchette élargie à 1299px et resserrage renforcé le 26/08 suite à l'ajout d'un
   9e item ("Avis Clients") dans le menu, qui ne tenait plus avec les marges d'origine. */
@media (min-width: 992px) and (max-width: 1299px) {
	#header #logo img.ef-logo-header {
		width: 100px;
	}
	#header.menu-align-right #logo {
		margin-right: 1.5%;
		top: 14px;
	}
	.tt-menu-nav > li {
		margin-left: 1px !important;
		margin-right: 1px !important;
	}
	.tt-main-menu .tt-menu-nav > li > a {
		font-size: 10.5px;
		letter-spacing: 0.04em;
	}
	.tt-tools-button.ef-book-btn,
	.tt-tools-button.ef-client-btn {
		padding: 6px 10px !important;
		font-size: 9.5px;
	}
	.tt-tools-button.ef-client-btn {
		margin-left: 4px;
	}
}

/* ---- Header mobile très étroit (≤400px) ----
   Bug trouvé le 26/08 : sur les téléphones les plus étroits (iPhone SE 320px,
   Galaxy S8 360px...), "Réserver" + "Accès Client" (même en icône) + le logo ne
   tenaient pas sur une seule ligne et étaient rejetés en dessous du logo, cassant
   la mise en page du header. On resserre donc "Réserver" (jusqu'ici jamais compacté
   sur mobile) et l'espacement autour du bouton "Accès Client" sur cette tranche. */
@media (max-width: 400px) {
	.tt-tools-button.ef-book-btn {
		padding: 8px 12px !important;
		font-size: 10px;
	}
	.tt-tools-button.ef-client-btn {
		padding: 8px 10px !important;
		margin-left: 6px;
	}
	.ef-client-icon { font-size: 13px; }
}

/* ---- Grille de témoignages (page Avis Clients) ---- */
.ef-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}
@media (max-width: 991px) {
	.ef-testimonial-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.ef-testimonial-grid { grid-template-columns: 1fr; }
}
.ef-testimonial-card {
	background-color: var(--ef-bg-2);
	border: 1px solid rgba(184,154,114,0.15);
	padding: 26px;
}
.ef-testimonial-card__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}
.ef-testimonial-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.ef-testimonial-name {
	font-family: 'Cormorant Garamond', serif;
	color: var(--ef-white);
	font-size: 18px;
	font-weight: 600;
	margin: 0;
}
.ef-testimonial-date {
	font-family: 'Poppins', sans-serif;
	color: var(--ef-text-2);
	font-size: 12px;
	letter-spacing: 0.04em;
}
.ef-testimonial-stars {
	color: var(--ef-accent);
	font-size: 12px;
	letter-spacing: 3px;
	margin-bottom: 12px;
}
.ef-testimonial-text {
	color: var(--ef-text-2);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0;
}
.ef-testimonial-text strong {
	color: var(--ef-white);
}

/* ---- Grille de prestataires (page Prestataires) ---- */
.ef-partner-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 30px;
}
@media (max-width: 991px) {
	.ef-partner-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.ef-partner-grid { grid-template-columns: 1fr; }
}
.ef-partner-card {
	background-color: var(--ef-bg-2);
	border: 1px solid rgba(184,154,114,0.15);
}
.ef-partner-photo {
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
}
.ef-partner-body {
	padding: 22px 24px 26px;
}
.ef-partner-name {
	font-family: 'Cormorant Garamond', serif;
	color: var(--ef-white);
	font-size: 21px;
	font-weight: 600;
	margin: 0 0 2px;
}
.ef-partner-role {
	display: block;
	font-family: 'Poppins', sans-serif;
	color: var(--ef-accent);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.ef-partner-desc {
	color: var(--ef-text-2);
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0 0 16px;
}
.ef-partner-links {
	display: flex;
	gap: 18px;
}
.ef-partner-links a {
	color: var(--ef-white);
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-decoration: none;
	transition: color .25s ease;
}
.ef-partner-links a:hover {
	color: var(--ef-accent);
}
.ef-partner-links a i {
	color: var(--ef-accent);
	margin-right: 5px;
}

/* ---- Boutons ---- */
.btn-primary {
	background-color: var(--ef-accent);
	border-color: var(--ef-accent);
	color: #111;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 12px;
	border-radius: 0;
}
.btn-primary:hover, .btn-primary:focus {
	background-color: #cbae86;
	border-color: #cbae86;
	color: #111;
}
.btn-white-bordered, .btn-dark {
	border-radius: 0;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 12px;
}
@media (max-width: 480px) {
	.btn-primary, .btn-white-bordered, .btn-dark {
		white-space: normal;
		max-width: 100%;
	}
}
.btn-white-bordered {
	border-color: var(--ef-white);
	color: var(--ef-white);
	background: transparent;
}
.btn-white-bordered:hover {
	background: var(--ef-white);
	color: #111;
}

/* ---- Sections ---- */
.ef-section {
	padding: 110px 0;
	background-color: var(--ef-bg);
}
.ef-section.bg-2 {
	background-color: var(--ef-bg-2);
}
.ef-eyebrow {
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ef-accent);
	margin-bottom: 18px;
	display: block;
}
.ef-lead {
	font-size: 17px;
	line-height: 1.8;
	color: var(--ef-text-2);
	max-width: 620px;
}
.ef-hr {
	width: 60px;
	height: 1px;
	background: var(--ef-accent);
	border: none;
	margin: 26px 0;
}

/* ---- Placeholders photo (en attendant les vraies photos Fred) ---- */
.ef-photo-placeholder {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 320px;
	background: linear-gradient(155deg, #23201c 0%, #14120f 55%, #0c0b09 100%);
	border: 1px solid rgba(184,154,114,0.18);
	overflow: hidden;
}
.ef-photo-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, rgba(184,154,114,0.05) 0 2px, transparent 2px 26px);
}
.ef-photo-placeholder .ef-ph-label {
	position: relative;
	z-index: 1;
	padding: 18px 22px;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(242,240,235,0.55);
}
.ef-photo-placeholder.tall { min-height: 620px; }

/* ---- Vraies photos (background-image plein cadre) ---- */
.ef-photo {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid rgba(184,154,114,0.12);
}
.ef-photo-placeholder.hero { min-height: 100vh; align-items: center; justify-content: center; }

/* ---- Photos à ratio fixe (aspect-ratio, pas de hauteur en px) ----
   Un bloc "background-image: cover" avec une hauteur fixe en pixels se déforme
   selon la largeur de l'écran : plus l'écran est large, plus le cadre devient
   large par rapport à sa hauteur fixe, et plus "cover" rogne l'image verticalement.
   Sur grand écran (1920px+), cela pouvait rogner jusqu'à 30-40% de la photo.
   aspect-ratio garde une proportion de rognage constante à toutes les tailles d'écran. */
.ef-photo-wedding-pair {
	width: 100%;
	aspect-ratio: 3 / 2;
	min-height: 160px;
}
.ef-photo-wedding-wide {
	width: 100%;
	aspect-ratio: 2.2 / 1;
	min-height: 140px;
}
.ef-photo-card {
	width: 100%;
	aspect-ratio: 4 / 5;
	min-height: 260px;
}

/* ---- Grille homepage à 5 tuiles (Portrait / Famille / Studio / Grossesse / Bébé) ---- */
@media (min-width: 992px) {
	.ef-col-fifth {
		width: 20%;
	}
}
/* Sur mobile (1 tuile par ligne, pleine largeur), un ratio 4/5 devient beaucoup trop haut
   et force un cadrage "cover" trop serré sur des photos pensées pour d'autres formats.
   On fige un ratio plus modéré, façon vignette carrée, uniquement sous 768px. */
@media (max-width: 767px) {
	.ef-photo-card {
		aspect-ratio: 1 / 1;
		min-height: 0;
	}
}

.ef-home-tile {
	display: block;
	text-decoration: none;
}
.ef-home-tile-photo-wrap {
	overflow: hidden;
}
.ef-home-tile .ef-photo-card {
	transition: transform .6s ease;
}
.ef-home-tile:hover .ef-photo-card {
	transform: scale(1.06);
}
.ef-home-tile h3 {
	transition: color .25s ease;
}
.ef-home-tile:hover h3 {
	color: var(--ef-accent) !important;
}

/* ---- Hero (custom, indépendant du système intro-caption du thème) ---- */
.ef-hero { position: relative; }
.ef-hero-bg {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}
.ef-hero-overlay {
	position: absolute;
	inset: 0;
	/* 28/08 : le point le plus clair du dégradé (35% à 40% de hauteur) tombait
	   pile là où le texte est centré verticalement, rendant le titre illisible
	   sur les photos claires (ex. mur en pierre). On renforce ce point médian
	   et on ajoute un text-shadow ci-dessous en filet de sécurité, pour que la
	   lisibilité ne dépende plus uniquement de la luminosité de la photo. */
	background: linear-gradient(180deg, rgba(10,10,10,0.60) 0%, rgba(10,10,10,0.50) 40%, rgba(10,10,10,0.80) 100%);
}
.ef-hero-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 700px;
	padding: 0 24px;
	margin: 0 auto;
}
.ef-hero-title {
	font-family: 'Playfair Display', 'Georgia', serif;
	color: var(--ef-white);
	font-size: 68px;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 14px 0 0;
	font-weight: 500;
	text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.ef-hero-subtitle {
	font-family: 'Poppins', sans-serif;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--ef-text-2);
	margin-top: 10px;
	text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.ef-hero-content .ef-eyebrow,
.ef-hero-content .ef-lead {
	text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
@media (max-width: 767px) {
	.ef-hero-title { font-size: 40px !important; }
}
@media (max-width: 400px) {
	.ef-hero-title { font-size: 32px !important; }
}

/* ---- Bandeau Iris (vraie photo macro) ---- */
.ef-iris-banner {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: 72% center;
	background-repeat: no-repeat;
}
.ef-iris-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8,8,8,0.90) 0%, rgba(8,8,8,0.62) 32%, rgba(8,8,8,0.18) 58%, rgba(8,8,8,0) 78%);
}
.ef-iris-banner-content {
	position: relative;
	z-index: 2;
	max-width: 480px;
	padding: 0 24px 0 60px;
	text-align: left;
}
.ef-iris-banner-content .ef-hr { margin: 26px 0; }
.ef-iris-banner-content .ef-lead { max-width: none; }
@media (max-width: 991px) {
	.ef-iris-banner { background-position: 65% center; }
	.ef-iris-banner-content { padding-left: 40px; }
}
@media (max-width: 767px) {
	.ef-iris-banner {
		min-height: 480px;
		background-position: center center;
		align-items: flex-end;
	}
	.ef-iris-banner-overlay {
		background: linear-gradient(180deg, rgba(8,8,8,0.25) 0%, rgba(8,8,8,0.55) 55%, rgba(8,8,8,0.92) 100%);
	}
	.ef-iris-banner-content {
		max-width: 100%;
		padding: 0 24px 40px;
		text-align: center;
	}
	.ef-iris-banner-content .ef-hr { margin-left: auto; margin-right: auto; }
}

/* ---- Rangées texte + photo(s) centrées verticalement ----
   Le display:flex ne s'applique qu'à partir du breakpoint md : en dessous,
   les colonnes col-md-* n'ont pas de largeur définie et doivent s'empiler
   normalement (comportement Bootstrap par défaut). Un flex sans flex-wrap
   appliqué à toutes les tailles d'écran empêchait cet empilement mobile
   et écrasait les colonnes les unes sur les autres (bug corrigé le 25/08). */
@media (min-width: 992px) {
	.ef-row-center {
		display: flex;
		align-items: center;
	}
}

/* ---- Galerie page pilier (Mariages, etc.) ---- */
.ef-mariage-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
@media (max-width: 991px) {
	.ef-mariage-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
	.ef-mariage-gallery { grid-template-columns: 1fr; }
}
.ef-gallery-cell {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid rgba(184,154,114,0.12);
}
.ef-gallery-cell .ef-photo {
	width: 100%;
	height: 100%;
	transition: transform .6s ease;
}
.ef-gallery-cell:hover .ef-photo {
	transform: scale(1.06);
}
.ef-gallery-cell .ef-gallery-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ef-white);
	font-size: 20px;
	background: rgba(10,10,10,0);
	opacity: 0;
	transition: all .35s ease;
	pointer-events: none;
}
.ef-gallery-cell:hover .ef-gallery-icon {
	background: rgba(10,10,10,0.35);
	opacity: 1;
}
.ef-gallery-landscape { aspect-ratio: 3 / 2; }
.ef-gallery-portrait { aspect-ratio: 2 / 3; }
.ef-gallery-square { aspect-ratio: 1 / 1; }

/* ---- Galerie générique (Portraits, Studio, autres pages piliers) ---- */
.ef-page-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
@media (max-width: 991px) {
	.ef-page-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
	.ef-page-gallery { grid-template-columns: 1fr; }
}

/* ---- Galerie plein cadre "mosaïque" (27/08 — page Architecture) ----
   Équivalent visuel du modèle Sepia "gallery-single-grid-fluid-2-cropped" (grille
   pleine largeur, sans gouttière, tuiles de tailles variées) mais en CSS Grid pur :
   grid-auto-flow:dense compacte automatiquement les tuiles "feature" (2x2) sans
   trou, sans avoir besoin du plugin JS Isotope/imagesLoaded du thème (non chargé
   sur le site V2 à ce jour) — cohérent avec le choix déjà fait ailleurs sur le
   site de préférer aspect-ratio/CSS Grid à un layout calculé en JS.
   Ce bloc n'est volontairement PAS mis dans un ".tt-wrap" : il doit occuper toute
   la largeur de la fenêtre même si le reste du contenu de la page reste "boxed"
   à 1440px (même logique que les bandeaux hero plein cadre). */
.ef-fluid-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 260px;
	grid-auto-flow: dense;
}
.ef-fluid-cell {
	position: relative;
	display: block;
	overflow: hidden;
}
.ef-fluid-cell .ef-photo {
	width: 100%;
	height: 100%;
	transition: transform .6s ease;
}
.ef-fluid-cell:hover .ef-photo {
	transform: scale(1.06);
}
.ef-fluid-cell .ef-gallery-icon {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ef-white);
	font-size: 20px;
	background: rgba(10,10,10,0);
	opacity: 0;
	transition: all .35s ease;
	pointer-events: none;
}
.ef-fluid-cell:hover .ef-gallery-icon {
	background: rgba(10,10,10,0.35);
	opacity: 1;
}
.ef-fluid-cell.is-feature {
	grid-column: span 2;
	grid-row: span 2;
}
/* Tuiles verticales (photos portrait) : on augmente la hauteur (span de lignes)
   sans toucher à la largeur, pour que la cellule reste plus haute que large —
   comme la photo source. Sans ça, une photo verticale plaquée dans une cellule
   large-et-basse se retrouve rognée sur les côtés au lieu du haut/bas, et perd
   tout son sujet (27/08 — retour client "les verticales ne passent pas en
   cadrage horizontal"). */
.ef-fluid-cell.is-portrait {
	grid-row: span 2;
}
.ef-fluid-cell.is-feature-portrait {
	grid-row: span 3;
}
/* Tuile "pleine largeur" : ferme la mosaïque proprement quand le nombre total
   de photos ne remplit pas exactement la dernière ligne de 4 colonnes — sans
   elle, la ou les cases restantes de cette ligne restent vides (fond sombre
   de la section visible en dessous des photos, 28/08 — retour client "la
   galerie ne doit pas finir avec des zones vides"). À réserver à la dernière
   photo de chaque mosaïque, uniquement quand elle se retrouve seule sur sa
   ligne une fois les autres tuiles placées (vérifier visuellement après tout
   ajout/retrait de photo). */
.ef-fluid-cell.is-wide {
	grid-column: span 4;
}
@media (max-width: 767px) {
	.ef-fluid-cell.is-wide {
		grid-column: span 2;
	}
}
@media (max-width: 767px) {
	.ef-fluid-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 140px;
	}
}

/* ---- Tarifs / pricing cards (page Iris) ---- */
.ef-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}
@media (max-width: 991px) {
	.ef-pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
.ef-pricing-card {
	background: var(--ef-bg-2);
	border: 1px solid rgba(184,154,114,0.18);
	padding: 44px 32px;
	text-align: center;
	display: flex;
	flex-direction: column;
}
.ef-pricing-card.is-featured {
	border-color: var(--ef-accent);
	position: relative;
}
.ef-pricing-card.is-featured::before {
	content: "Le plus demandé";
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--ef-accent);
	color: #111;
	font-family: 'Poppins', sans-serif;
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 5px 14px;
}
.ef-pricing-card h3 {
	font-size: 24px;
	margin: 0 0 6px;
}
.ef-pricing-card .ef-pricing-price {
	font-family: 'Poppins', sans-serif;
	color: var(--ef-accent);
	font-size: 15px;
	letter-spacing: 0.05em;
	margin-bottom: 24px;
}
.ef-pricing-card .ef-pricing-price strong {
	font-family: 'Playfair Display', serif;
	font-size: 34px;
	color: var(--ef-white);
	display: block;
	margin-top: 4px;
}
.ef-pricing-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	text-align: left;
	flex-grow: 1;
}
.ef-pricing-card ul li {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ef-text-2);
	padding-left: 20px;
	position: relative;
	margin-bottom: 10px;
}
.ef-pricing-card ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 1px;
	background: var(--ef-accent);
}
.ef-pricing-card ul li strong { color: var(--ef-white); font-weight: 500; }
/* ---- Lien discret (formules non mises en avant) : évite d'aligner plusieurs
   boutons encadrés identiques côte à côte, tout en gardant un CTA cliquable
   dans chaque carte, y compris sur mobile. ---- */
.ef-pricing-link {
	display: inline-block;
	align-self: center;
	color: var(--ef-white);
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid rgba(242,240,235,0.35);
	transition: color 0.25s ease, border-color 0.25s ease;
}
.ef-pricing-link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.25s ease;
}
.ef-pricing-link:hover,
.ef-pricing-link:focus {
	color: var(--ef-accent);
	border-color: var(--ef-accent);
	text-decoration: none;
}
.ef-pricing-link:hover::after,
.ef-pricing-link:focus::after {
	transform: translateX(4px);
}
.ef-pricing-note {
	font-size: 12px;
	color: var(--ef-text-2);
	opacity: 0.75;
	font-style: italic;
}

/* ---- FAQ (accordéon "déplié", demande client 26/08) ----
   Structure Bootstrap 3 native reprise de sepia/page-faq.html (panel-group.accordion-wrap,
   panel panel-default, panel-heading/panel-title/panel-collapse/panel-body) — le plugin
   collapse de bootstrap.min.js gère l'ouverture/fermeture, aucun JS custom nécessaire.
   Ci-dessous : uniquement l'habillage visuel pour coller à la direction artistique
   (au lieu de la classe utilitaire claire "bg-gray-2" du thème). */
.ef-faq-accordion .panel {
	background: transparent;
	border: none;
	margin-top: 14px;
}
.ef-faq-accordion .panel:first-child {
	margin-top: 0;
}
.ef-faq-accordion .panel-heading {
	padding: 0;
	background: transparent;
}
.ef-faq-accordion .panel-heading a {
	display: block;
	position: relative;
	padding: 22px 50px 22px 24px;
	background-color: var(--ef-bg-2);
	border: 1px solid rgba(184,154,114,0.15);
	font-family: 'Cormorant Garamond', serif;
	font-size: 19px;
	font-weight: 600;
	color: var(--ef-white);
	text-decoration: none;
	transition: border-color 0.25s ease;
}
.ef-faq-accordion .panel-heading a:hover,
.ef-faq-accordion .panel-heading a:focus {
	color: var(--ef-white);
	text-decoration: none;
	border-color: rgba(184,154,114,0.4);
}
.ef-faq-accordion .panel-heading a.collapsed {
	color: var(--ef-text-2);
}
.ef-faq-accordion .ef-faq-num {
	display: inline-block;
	color: var(--ef-accent);
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin-right: 8px;
	vertical-align: baseline;
}
.ef-faq-accordion .acc-arrow {
	color: var(--ef-accent);
	font-size: 13px;
}
.ef-faq-accordion .panel-body {
	padding: 22px 24px 2px;
	border: none;
	color: var(--ef-text-2);
	font-size: 15px;
	line-height: 1.7;
}
.ef-faq-accordion .panel-body p {
	margin: 0;
}
@media (max-width: 767px) {
	.ef-faq-accordion .panel-heading a {
		padding: 18px 44px 18px 18px;
		font-size: 17px;
	}
	.ef-faq-accordion .panel-body {
		padding: 16px 18px 2px;
	}
}

/* ---- Grille de tarifs flexible (5 forfaits sur tarifs.html) ---- */
.ef-pricing-grid.ef-pricing-grid-flex {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* ---- Formulaires (Contact, Réservation) ---- */
.ef-form-group {
	margin-bottom: 22px;
	text-align: left;
}
.ef-form-group label {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ef-accent);
	margin-bottom: 10px;
}
.ef-form-group .ef-required { color: var(--ef-accent); }
.ef-input,
.ef-form-group input[type="text"],
.ef-form-group input[type="email"],
.ef-form-group input[type="tel"],
.ef-form-group select,
.ef-form-group textarea {
	width: 100%;
	background: var(--ef-bg-2);
	border: 1px solid rgba(184,154,114,0.25);
	color: var(--ef-white);
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	padding: 14px 16px;
	border-radius: 0;
	transition: border-color .3s ease;
}
.ef-form-group input:focus,
.ef-form-group select:focus,
.ef-form-group textarea:focus {
	outline: none;
	border-color: var(--ef-accent);
	background: #1f1f1f;
}
.ef-form-group textarea { resize: vertical; min-height: 130px; }
.ef-form-group select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B89A72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px;
	padding-right: 42px;
}
.ef-form-card {
	background: var(--ef-bg-2);
	border: 1px solid rgba(184,154,114,0.18);
	padding: 50px;
	max-width: 720px;
	margin: 0 auto;
}
@media (max-width: 575px) {
	.ef-form-card { padding: 32px 22px; }
}
.ef-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 575px) { .ef-form-row { grid-template-columns: 1fr; } }
.ef-form-note { font-size: 12px; color: var(--ef-text-2); opacity: 0.75; margin-top: -8px; margin-bottom: 22px; }

/* ---- Onglets (type de demande / mode séance-cadeau) ---- */
.ef-tabs { display: flex; gap: 10px; margin-bottom: 28px; }
.ef-tabs input[type="radio"] { display: none; }
.ef-tabs label {
	flex: 1;
	text-align: center;
	padding: 13px 10px;
	border: 1px solid rgba(184,154,114,0.25);
	color: var(--ef-text-2);
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all .25s ease;
	margin: 0;
}
.ef-tabs input[type="radio"]:checked + label {
	background: var(--ef-accent);
	border-color: var(--ef-accent);
	color: #111;
}

/* ---- Légende calendrier ---- */
.ef-cal-legend { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ef-text-2); margin: -6px 0 22px; }
.ef-cal-legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--booked-red, #e05a4e); display: inline-block; }

/* Thème flatpickr adapté au fond sombre du site (surcharge le thème dark de flatpickr) */
.flatpickr-calendar { background: var(--ef-bg-2) !important; border: 1px solid rgba(184,154,114,0.25) !important; box-shadow: none !important; }
.flatpickr-day.is-booked, .flatpickr-day.is-booked:hover {
	background: #5a2a24 !important;
	border-color: #5a2a24 !important;
	color: #e0a99e !important;
	text-decoration: line-through;
}
.flatpickr-day.selected { background: var(--ef-accent) !important; border-color: var(--ef-accent) !important; color: #111 !important; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays { background: var(--ef-bg-2) !important; color: var(--ef-white) !important; }

/* ---- Sections conditionnelles du formulaire réservation ---- */
.ef-form-section { display: none; }
.ef-form-section.is-visible { display: block; }

/* ---- Mini-grille "Mon univers" (page À propos) ---- */
.ef-universe-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 767px) {
	.ef-universe-grid { grid-template-columns: repeat(2, 1fr); }
}
.ef-universe-item {
	position: relative;
	display: block;
	aspect-ratio: 3/4;
	overflow: hidden;
	border: 1px solid rgba(184,154,114,0.15);
}
.ef-universe-item .ef-photo { width: 100%; height: 100%; transition: transform .6s ease; }
.ef-universe-item:hover .ef-photo { transform: scale(1.07); }
.ef-universe-item .ef-universe-label {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 16px;
	background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
	color: var(--ef-white);
	font-family: 'Poppins', sans-serif;
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* ---- Chiffre clé (page À propos) ---- */
.ef-stat { text-align: center; }
.ef-stat .ef-stat-number {
	font-family: 'Playfair Display', serif;
	color: var(--ef-accent);
	font-size: 56px;
	line-height: 1;
	display: block;
}
.ef-stat .ef-stat-label {
	font-family: 'Poppins', sans-serif;
	font-size: 12px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ef-text-2);
	margin-top: 10px;
	display: block;
}

/* ---- Contenu légal (Mentions légales, Confidentialité) ---- */
.ef-legal { max-width: 780px; margin: 0 auto; text-align: left; }
.ef-legal h2 {
	font-size: 22px;
	margin-top: 46px;
	margin-bottom: 14px;
}
.ef-legal h2:first-child { margin-top: 0; }
.ef-legal p, .ef-legal li {
	color: var(--ef-text-2);
	font-size: 15px;
	line-height: 1.8;
}
.ef-legal p { margin-bottom: 16px; }
.ef-legal ul { padding-left: 20px; margin-bottom: 16px; }
.ef-legal li { margin-bottom: 6px; }
.ef-legal a { color: var(--ef-accent); text-decoration: underline; }
.ef-legal strong { color: var(--ef-white); font-weight: 500; }
.ef-legal .ef-legal-meta {
	margin-top: 50px;
	padding-top: 24px;
	border-top: 1px solid rgba(184,154,114,0.18);
	font-size: 12px;
	color: var(--ef-text-2);
	opacity: 0.7;
}

/* ---- Footer ---- */
#footer.footer-dark, #footer.footer-minimal {
	background-color: var(--ef-bg-2);
}
.footer-menu li a {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
}

/* ---- Isotope / galerie catégories ---- */
.gl-item-info { background: rgba(17,17,17,0.55); }
.gallery-list-item .gl-item-title a { color: var(--ef-white); }

/* ---- Responsive tweaks ---- */
@media (max-width: 767px) {
	.ef-section { padding: 70px 0; }
}