/* =========================================================
   EMA COFFEE SHOP — feuille de style principale
   Palette : vert sauge #828570 / orbs #a2a18c / or champagne
   ========================================================= */

/* ---------- Fonts auto-hébergées (RGPD ok, zéro CDN) ---------- */
@font-face {
	font-family: 'Fraunces';
	src: url('../fonts/Fraunces.ttf') format('truetype');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Gilda Display';
	src: url('../fonts/GildaDisplay.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Jost';
	src: url('../fonts/Jost.ttf') format('truetype');
	font-weight: 100 900;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--vert:        #828570;  /* fond principal */
	--vert-orb:    #a2a18c;  /* orbs / gradients */
	--vert-fonce:  #6e7160;  /* sections alternées */
	--sable:       #ece7e4;  /* fond secondaire clair */
	--olive:       #4c4f40;  /* texte sur fond clair */
	--creme:       #fffdf8;  /* texte courant */
	--creme-doux:  #f8f6ee;

	--or-fonce:    #c49b48;
	--or:          #dcbb6a;
	--or-clair:    #f7e8ba;
	--or-grad:     linear-gradient(115deg, var(--or-fonce) 0%, var(--or) 30%, var(--or-clair) 52%, var(--or) 72%, var(--or-fonce) 100%);

	--font-titre:  'Fraunces', Georgia, serif;        /* titres façon "EMA" */
	--font-label:  'Gilda Display', Georgia, serif;    /* labels façon "COFFEE SHOP" */
	--font-texte:  'Jost', 'Segoe UI', sans-serif;     /* corps de texte & boutons */

	--largeur:     1080px;
	--largeur-min: 720px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

html, body { margin: 0; padding: 0; overflow-x: hidden; }
#contenu { margin: 0; padding: 0; }
body {
	background: var(--vert);
	color: var(--creme);
	font-family: var(--font-texte);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
	font-family: var(--font-titre);
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--creme);
}

/* Titres de section en dorure dégradée */
.section-head h1,
.section-head h2 {
	font-weight: 480;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	background: linear-gradient(115deg, #e4c37a 0%, #f0d79c 30%, #fbf0cd 52%, #f0d79c 72%, #e4c37a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 0.02em;
}

.eyebrow {
	font-family: var(--font-label);
	font-weight: 400;
	font-size: 0.85rem;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: var(--creme);
	margin: 0 0 0.8rem;
}

.sr-only {
	position: absolute; width: 1px; height: 1px;
	clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
	position: absolute; left: -999px; top: 0;
	background: var(--or-clair); color: #4c4f40;
	padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
	outline: 2px solid var(--or-clair);
	outline-offset: 3px;
}

/* ---------- Divider signature : ligne — grain — ligne ---------- */
.divider {
	display: flex; align-items: center; justify-content: center;
	gap: 1rem; margin: 1.4rem auto 0;
}
.divider-line {
	display: block; width: min(120px, 22vw); height: 1px;
	background: linear-gradient(90deg, transparent, var(--or));
}
.divider-line:last-child {
	background: linear-gradient(90deg, var(--or), transparent);
}
.divider-bean {
	width: 14px; height: 22px; flex: none;
	background: var(--or-grad);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	transform: rotate(18deg);
	position: relative;
}
.divider-bean::after {
	content: '';
	position: absolute; inset: 3px 5px;
	border-radius: inherit;
	background: var(--vert);
	transform: skewY(8deg) scaleX(0.32);
}

/* ---------- Orbs : un seul décor continu derrière toute la page ---------- */
.page-orbs {
	position: fixed; inset: 0; z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.orb {
	position: absolute; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, var(--vert-orb), transparent 70%);
	filter: blur(46px);
}
.orb--1 { width: 48vw; height: 48vw; top: -14vw; left: -16vw; opacity: 0.9; }
.orb--2 { width: 30vw; height: 30vw; top: 18vh; right: -8vw; opacity: 0.55; animation: orb-drift 22s ease-in-out infinite alternate; }
.orb--3 { width: 22vw; height: 22vw; top: 52vh; left: 6vw; opacity: 0.45; animation: orb-drift 28s ease-in-out infinite alternate-reverse; }
.orb--4 { width: 36vw; height: 36vw; bottom: -10vw; right: -10vw; opacity: 0.6; }
.orb--5 { width: 26vw; height: 26vw; bottom: 24vh; left: -8vw; opacity: 0.45; animation: orb-drift 26s ease-in-out infinite alternate; }
@keyframes orb-drift {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(4vw, -3vh) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
	.orb--2, .orb--3, .orb--5 { animation: none; }
}

/* ---------- Header (style v3.3) : fixe, transparent, voile au scroll ---------- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: transparent;
}
.site-header {
	display: grid;
	grid-template-columns: 46px 1fr 46px;
	align-items: center;
	padding: 0.8rem clamp(1rem, 3vw, 1.6rem);
}
.header-logo { justify-self: center; }
.header-logo img { width: 150px; height: auto; display: block; }
.header-pin {
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	color: var(--or-clair);
	border: 1.5px solid var(--or);
	border-radius: 12px;
	transition: background 0.25s;
}
.header-pin:hover { background: color-mix(in srgb, var(--or) 15%, transparent); transform: translateY(-1px); }

.nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	background: transparent;
	border: 1.5px solid var(--or);
	border-radius: 12px;
	cursor: pointer;
	position: relative;
	transition: background 0.25s;
}
.nav-toggle:hover { background: color-mix(in srgb, var(--or) 15%, transparent); }
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: '';
	display: block;
	width: 20px; height: 2px;
	background: var(--or-clair);
	border-radius: 2px;
	transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; top: -6px; left: 0; }
.nav-toggle__bar::after  { position: absolute; top:  6px; left: 0; }

/* ---------- Drawer gauche ---------- */
.drawer-overlay {
	position: fixed; inset: 0; z-index: 60;
	background: rgba(38, 40, 30, 0.5);
	opacity: 0; transition: opacity 0.3s;
}
.drawer-overlay.is-visible { opacity: 1; }
.drawer {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 61;
	width: min(320px, 84vw);
	background: color-mix(in srgb, var(--vert-fonce) 92%, black 4%);
	border-right: 1px solid color-mix(in srgb, var(--or) 40%, transparent);
	transform: translateX(-100%);
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex; flex-direction: column;
	padding: 1.2rem 0 2rem;
	visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer-close {
	align-self: flex-end;
	margin: 0 1.2rem 1rem;
	width: 42px; height: 42px;
	display: flex; align-items: center; justify-content: center;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--or) 50%, transparent);
	border-radius: 12px;
	color: var(--or-clair);
	cursor: pointer;
}
.drawer-close:hover { background: color-mix(in srgb, var(--or) 16%, transparent); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
	color: var(--creme);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	padding: 1.05rem 2rem;
	border-left: 2px solid transparent;
	transition: color 0.25s, border-color 0.25s, background 0.25s, padding-left 0.25s;
}
.drawer-nav a:hover {
	color: var(--or-clair);
	border-left-color: var(--or);
	background: color-mix(in srgb, var(--or) 8%, transparent);
	padding-left: 2.4rem;
}
.drawer-nav .drawer-cta {
	margin: 1.4rem 2rem 0;
	padding: 0.9rem 0;
	text-align: center;
	border: 1px solid var(--or);
	border-radius: 999px;
	color: var(--or-clair);
}
.drawer-nav .drawer-cta:hover { background: color-mix(in srgb, var(--or) 18%, transparent); padding-left: 0; }
.drawer-foot {
	margin-top: auto;
	display: flex; align-items: center; justify-content: center; gap: 1rem;
	padding: 0 2rem;
}

/* ---------- Hero typographique : Drink • Eat • Enjoy ---------- */
.hero {
	height: 70svh;
	min-height: 480px;
	margin-top: 0;
	padding: 0 1.2rem;
	box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}
/* ---------- Brume de café (WebGL) : sous le contenu, au-dessus du fond ---------- */
.hero-smoke {
	position: absolute; inset: 0;
	z-index: 0;
	pointer-events: none;
}
.hero-smoke canvas {
	width: 100%; height: 100%;
	display: block;
}

.hero-inner {
	position: relative; z-index: 1;
	max-width: 900px;
	display: flex; flex-direction: column; align-items: center;
}
.hero-glow {
	position: absolute;
	top: 8%; left: 50%;
	width: min(640px, 96vw); height: min(420px, 52svh);
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(247, 232, 186, 0.22), transparent 65%);
	filter: blur(12px);
	animation: glow-breathe 6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes glow-breathe {
	0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
	50%       { opacity: 1;   transform: translateX(-50%) scale(1.05); }
}
.hero-kicker {
	font-family: var(--font-label);
	font-size: clamp(0.8rem, 2vw, 0.95rem);
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--creme);
	margin: 0 0 clamp(1rem, 2.5svh, 1.8rem);
}
.hero-title {
	margin: 0;
	display: flex; flex-direction: row; align-items: center;
	flex-wrap: nowrap; white-space: nowrap;
	gap: clamp(0.45rem, 2.4vw, 2.1rem);
	line-height: 1;
}
.hero-word {
	font-family: var(--font-titre);
	font-weight: 520;
	font-size: clamp(1.7rem, 7.8vw, 6.2rem);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background-image:
		linear-gradient(100deg, transparent 42%, rgba(255, 249, 228, 0.95) 50%, transparent 58%),
		linear-gradient(180deg, #fdf3d3 0%, #eccf90 55%, #ddb765 100%);
	background-size: 260% 100%, 100% 100%;
	background-position: 130% 0, 0 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: gold-sheen 8s ease-in-out infinite;
}
/* Un rai de lumière traverse l'or du titre, puis longue pause — effet feuille d'or */
@keyframes gold-sheen {
	0%, 55%  { background-position: 130% 0, 0 0; }
	85%, 100% { background-position: -130% 0, 0 0; }
}
}
@media (prefers-reduced-motion: reduce) {
	.hero-word { animation: none; background-position: 50% 0; }
}
.hero-word,
.section-head h1,
.section-head h2,
.section-head[data-watermark]::before,
.erreur-404__code {
	font-variation-settings: 'SOFT' 0, 'WONK' 0;
	font-optical-sizing: auto;
}
.hero-dot {
	width: clamp(9px, 1.3vw, 15px);
	height: clamp(14px, 2vw, 24px);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: linear-gradient(115deg, #e4c37a, #fbf0cd 55%, #e4c37a);
	rotate: 18deg;
	flex: none;
}
.hero-sub {
	color: var(--creme-doux);
	font-size: clamp(0.98rem, 2.2vw, 1.1rem);
	max-width: 44ch;
	margin: clamp(1.2rem, 3svh, 2rem) auto clamp(1.4rem, 3svh, 2.2rem);
}
.hero-actions {
	display: flex; flex-wrap: wrap; gap: 0.9rem;
	justify-content: center;
}

/* Entrée en scène orchestrée */
.anim {
	opacity: 0;
	transform: translateY(26px);
	animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.anim--1 { animation-delay: 0.1s; }
.anim--2 { animation-delay: 0.3s; }
.anim--3 { animation-delay: 0.45s; }
.anim--4 { animation-delay: 0.6s; }
.anim--5 { animation-delay: 0.85s; }
.anim--6 { animation-delay: 1.05s; }
.anim--7 { animation-delay: 1.5s; }
@keyframes hero-in {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.anim { animation: none; opacity: 1; transform: none; }
	.hero-glow { animation: none; }
}

.hero-scroll {
	position: absolute; left: 50%; bottom: 1.3rem;
	width: 26px; height: 42px;
	transform: translateX(-50%);
	border: 1px solid var(--or);
	border-radius: 999px;
}
.hero-scroll span {
	position: absolute; left: 50%; top: 8px;
	width: 3px; height: 8px; border-radius: 3px;
	background: var(--or-clair);
	transform: translateX(-50%);
	animation: scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint {
	0%, 100% { transform: translate(-50%, 0);   opacity: 1; }
	60%       { transform: translate(-50%, 12px); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-scroll span { animation: none; }
}

/* ---------- Boutons ---------- */
.btn {
	display: inline-block;
	font-family: var(--font-texte);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.9rem 2.2rem;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn--gold {
	background: var(--or-grad);
	color: #4a3d1c;
	border: none;
	box-shadow: 0 6px 22px rgba(0,0,0,0.16);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,0.22); }
.btn--ghost {
	background: transparent;
	color: var(--creme);
	border: 1px solid var(--or);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--or) 16%, transparent); color: var(--or-clair); }

/* ---------- Sections ---------- */
.section { padding: 5.5rem 1.2rem; }
.section-inner { max-width: var(--largeur); margin: 0 auto; position: relative; z-index: 1; }
.section-inner--narrow { max-width: var(--largeur-min); text-align: center; }
.section-head { text-align: center; margin-bottom: 2.8rem; position: relative; }
.section-head[data-watermark]::before {
	content: attr(data-watermark);
	position: absolute;
	left: 50%; top: -0.42em;
	transform: translateX(-50%);
	font-family: var(--font-titre);
	font-weight: 560;
	font-size: clamp(5rem, 16vw, 10.5rem);
	line-height: 1;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--or-clair) 9%, transparent);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: -1;
}

/* ---------- Carte (menu) : card claire #ece7e4 ---------- */
.carte-panel {
	background: var(--sable);
	border-radius: 26px;
	padding: clamp(1.8rem, 4.5vw, 3.2rem);
	box-shadow: 0 24px 60px rgba(46, 48, 38, 0.22);
}
.carte-panel .carte-cat { color: #8a6926; }
.carte-panel .carte-items li { color: var(--olive); }
.carte-panel .carte-prix { color: #8a6926; }
.carte-panel .carte-dots { border-bottom-color: color-mix(in srgb, var(--olive) 45%, transparent); }

.carte-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 3rem 3.5rem;
}
.carte-cat {
	font-family: var(--font-label);
	font-size: 1.45rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--or-clair);
	text-align: center;
	margin-bottom: 1.4rem;
}
.carte-items { list-style: none; margin: 0; padding: 0; }
.carte-items li {
	display: flex; align-items: baseline; gap: 0.6rem;
	padding: 0.55rem 0;
}
.carte-nom { flex: none; max-width: 70%; }
.carte-dots {
	flex: 1; min-width: 20px;
	border-bottom: 1px dotted color-mix(in srgb, var(--creme) 60%, transparent);
	transform: translateY(-4px);
}
.carte-prix { flex: none; color: var(--or-clair); font-weight: 400; }

/* ---------- Galerie ---------- */
.galerie-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: dense;
	gap: 1rem;
}
.galerie-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
	aspect-ratio: auto;
}
.galerie-item {
	margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
}
.galerie-item img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.galerie-item:hover img { transform: scale(1.05); }
.galerie-item--placeholder {
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--vert-orb) 55%, transparent), transparent 70%),
		var(--vert-fonce);
	color: var(--creme-doux);
	font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
}

/* ---------- À propos ---------- */
.apropos-text { color: var(--creme-doux); max-width: 56ch; margin-inline: auto; }

/* ---------- Infos pratiques ---------- */
.infos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 3rem;
	align-items: start;
}
.infos-col h3 { font-family: var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.3rem; color: var(--or-clair); margin-bottom: 1rem; }
.infos-col h3 + .horaires + h3 { margin-top: 2.2rem; }
.horaires { list-style: none; margin: 0 0 1rem; padding: 0; }
.horaires li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0; }
.adresse { color: var(--creme-doux); margin-bottom: 1.4rem; }

/* ---------- Carte OpenStreetMap : dans une card claire, comme le menu ---------- */
.map-panel {
	background: var(--sable);
	border-radius: 26px;
	padding: clamp(1.2rem, 3vw, 2rem);
	box-shadow: 0 24px 60px rgba(46, 48, 38, 0.22);
	color: var(--olive);
}
#ema-map {
	width: 100%;
	height: clamp(320px, 44vh, 440px);
	border-radius: 18px;
	background: var(--sable);
	overflow: hidden;
}
.map-panel .infos-grid { margin-top: 2rem; padding: 0 clamp(0.4rem, 2vw, 1.4rem) 0.8rem; }
.map-panel .infos-col h3 { color: #8a6926; }
.map-panel .horaires li,
.map-panel .adresse { color: var(--olive); }
.map-panel .acces { color: color-mix(in srgb, var(--olive) 82%, transparent); }
.map-panel .carte-dots { border-bottom-color: color-mix(in srgb, var(--olive) 45%, transparent); }
.leaflet-container {
	background: var(--sable) !important;
	font-family: var(--font-texte) !important;
}
#ema-map .leaflet-tile-pane { filter: grayscale(0.85) sepia(0.15) saturate(0.95) brightness(1.03) contrast(0.97); }
#ema-map .leaflet-control-zoom a {
	background: var(--sable);
	color: var(--olive);
	border-color: color-mix(in srgb, var(--olive) 25%, transparent);
}
#ema-map .leaflet-control-attribution {
	background: color-mix(in srgb, var(--sable) 90%, transparent);
	color: var(--olive);
	font-size: 10px;
}
#ema-map .leaflet-control-attribution a { color: #8a6926; }
#ema-map .leaflet-popup-content-wrapper,
#ema-map .leaflet-popup-tip {
	background: var(--sable);
	color: var(--olive);
}

.ema-pin-icon { position: relative; }
.ema-pin-icon svg {
	display: block;
	filter: drop-shadow(0 8px 14px rgba(60, 50, 20, 0.35));
	animation: pin-drop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) both;
	animation-delay: 0.3s;
}
@keyframes pin-drop {
	from { transform: translateY(-70px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}
.ema-pin-icon::after {
	content: '';
	position: absolute;
	left: 50%; bottom: -4px;
	width: 26px; height: 10px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(196, 155, 72, 0.55), transparent 70%);
	animation: pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse {
	0%   { transform: translateX(-50%) scale(0.7); opacity: 0.9; }
	70%  { transform: translateX(-50%) scale(2.1); opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ema-pin-icon svg { animation: none; }
	.ema-pin-icon::after { animation: none; opacity: 0.5; }
}

/* ---------- Réseaux sociaux : cartes animées ---------- */
.social-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.4rem;
	margin-top: 2.8rem;
}
.social-card {
	display: flex; flex-direction: column; align-items: center;
	gap: 0.9rem;
	padding: 2rem 1rem 1.7rem;
	border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
	border-radius: 16px;
	text-decoration: none;
	background: color-mix(in srgb, var(--vert-fonce) 40%, transparent);
	transition: transform 0.3s, border-color 0.3s, background 0.3s;
	animation: social-float 5s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 0.6s);
}
.social-card:hover {
	transform: translateY(-6px) scale(1.03);
	border-color: var(--or);
	background: color-mix(in srgb, var(--vert-fonce) 70%, transparent);
	animation-play-state: paused;
}
@keyframes social-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
.social-icon {
	width: 84px; height: 84px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--or-grad);
	color: #4a3d1c;
	position: relative;
	overflow: hidden;
}
.social-icon svg { width: 40px; height: 40px; position: relative; z-index: 1; }
.social-icon::after {
	content: '';
	position: absolute; top: -20%; bottom: -20%;
	left: -60%; width: 40%;
	background: linear-gradient(105deg, transparent, rgba(255, 250, 235, 0.85), transparent);
	transform: skewX(-18deg);
	animation: icon-shine 4.5s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 0.6s + 1s);
}
@keyframes icon-shine {
	0%, 55%  { left: -60%; }
	75%, 100% { left: 130%; }
}
.social-card:hover .social-icon svg { animation: icon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes icon-pop {
	0%   { transform: scale(1) rotate(0deg); }
	50%  { transform: scale(1.25) rotate(-8deg); }
	100% { transform: scale(1) rotate(0deg); }
}
.social-name {
	font-size: 0.85rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--creme);
}
.social-card:hover .social-name { color: var(--or-clair); }
@media (prefers-reduced-motion: reduce) {
	.social-card { animation: none; }
	.social-icon::after { animation: none; }
}

/* ---------- Pages simples & formulaire ---------- */
.page-simple { padding-top: 10rem; min-height: 70vh; }
.page-content { text-align: left; color: var(--creme-doux); }
.page-content a { color: var(--or-clair); }

.ema-form { text-align: left; max-width: 560px; margin: 2.5rem auto 0; }
.ema-form p { margin: 0 0 1.3rem; }
.ema-form label {
	display: block;
	font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--creme-doux);
	margin-bottom: 0.45rem;
}
.ema-form input[type="text"],
.ema-form input[type="email"],
.ema-form textarea {
	width: 100%; box-sizing: border-box;
	background: color-mix(in srgb, var(--vert-fonce) 72%, transparent);
	border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
	border-radius: 10px;
	color: var(--creme);
	font-family: var(--font-texte);
	font-size: 1rem;
	padding: 0.85rem 1rem;
	transition: border-color 0.2s;
}
.ema-form input:focus,
.ema-form textarea:focus { border-color: var(--or-clair); outline: none; }
.hp-field { position: absolute !important; left: -9999px !important; }

.form-notice {
	max-width: 560px; margin: 1.5rem auto 0;
	padding: 0.9rem 1.2rem; border-radius: 10px;
	text-align: center;
}
.form-notice--ok  { background: color-mix(in srgb, var(--or) 22%, transparent); color: var(--or-clair); border: 1px solid var(--or); }
.form-notice--err { background: rgba(140, 60, 50, 0.25); color: #f2cfc7; border: 1px solid rgba(190, 110, 95, 0.6); }

/* ---------- Footer ---------- */
.site-footer {
	background: transparent;
	border-top: 1px solid color-mix(in srgb, var(--or) 25%, transparent);
	padding: 4rem 1.2rem 2.5rem;
	text-align: center;
}
.footer-inner { max-width: var(--largeur); margin: 0 auto; }
.footer-logo { width: 130px; opacity: 0.95; }
.footer-tagline {
	font-family: var(--font-label);
	letter-spacing: 0.45em; text-transform: uppercase;
	font-size: 0.78rem; color: var(--or-clair);
	margin: 1.4rem 0 1.8rem;
}
.footer-socials {
	list-style: none; margin: 0 0 1.8rem; padding: 0;
	display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center;
}
.footer-socials a,
.footer-legal a {
	color: var(--creme); text-decoration: none;
	font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.footer-socials a:hover,
.footer-legal a:hover { color: var(--or-clair); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; margin-bottom: 1.6rem; }
.footer-copy { font-size: 0.82rem; color: color-mix(in srgb, var(--creme) 85%, transparent); margin: 0; }

/* ---------- Reveal au scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
	.section { padding: 4rem 1.2rem; }
	.orb { filter: blur(30px); }
	.site-header { grid-template-columns: 44px 1fr 44px; padding: 0.7rem 0.9rem; }
	.header-pin, .nav-toggle { width: 44px; height: 44px; }
	.header-logo img { width: 112px; }
	.hero { min-height: 520px; }
	.section-head[data-watermark]::before { font-size: clamp(3.4rem, 20vw, 5.5rem); top: -0.3em; }
	#ema-map { height: 320px; }
	.carte-panel, .map-panel { border-radius: 18px; }
	.galerie-grid { grid-template-columns: repeat(2, 1fr); }
	.galerie-item:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
	.social-icon { width: 68px; height: 68px; }
	.social-icon svg { width: 32px; height: 32px; }
	.hero { min-height: 540px; }
}

/* ---------- Page 404 ---------- */
.erreur-404 {
	min-height: 100svh;
	display: flex; align-items: center;
	text-align: center;
	padding-top: 7rem;
}
.erreur-404__code {
	font-family: var(--font-titre);
	font-weight: 480;
	font-size: clamp(6rem, 22vw, 11rem);
	line-height: 1;
	margin: 0 0 0.5rem;
	background: linear-gradient(115deg, #dcb765 0%, #f9ecc4 52%, #dcb765 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.erreur-404 h1 {
	font-family: var(--font-titre);
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	color: var(--creme);
	margin-bottom: 0.6rem;
}
.erreur-404 .hero-actions { margin-top: 2.2rem; justify-content: center; display: flex; flex-wrap: wrap; gap: 0.9rem; }