/* ============================================================================
   Europimmo Éditorial — couche de design « éditorial premium »
   Chargée après assets/css/style.css : elle redéfinit les jetons de couleur,
   la typographie, les espacements et les composants principaux.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Jetons */
:root,
[data-theme="clair"] {
	--maxw: 1240px;
	--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--r: 6px;
	--r-lg: 18px;
	--shadow: 0 30px 70px -38px rgba(12, 30, 22, .45);
	--t: .6s cubic-bezier(.16, 1, .3, 1);

	--bg: #f8f4ec;
	--bg-2: #f1ebdf;
	--surface: #fffdf9;
	--surface-2: #f4eee3;
	--ink: #16241d;
	--muted: #6b7066;
	--line: #e4dccd;

	--primary: #123528;
	--primary-2: #1c4a38;
	--accent: #b3863f;
	--accent-2: #dcb87c;
	--accent-deep: #8c6428;
	--on-primary: #f6f1e7;
	--kicker: #a87a3b;

	--hero-overlay: linear-gradient(180deg, rgba(9, 24, 17, .10), rgba(9, 24, 17, .72));
}

html { scroll-behavior: smooth; }

body {
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.75;
	letter-spacing: .002em;
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.018em;
	color: var(--primary);
}

p { color: inherit; }
a { transition: color .25s ease, opacity .25s ease; }

.wrap { max-width: var(--maxw); padding: 0 30px; }

/* Titres de section ------------------------------------------------------- */
.section { padding: clamp(76px, 9vw, 122px) 0; }

.sec-head {
	max-width: 780px;
	margin: 0 auto clamp(40px, 5vw, 62px);
	text-align: center;
}

.sec-head .kicker,
.sec-head > .kicker {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--kicker);
}

.sec-head .kicker::before {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: .55;
}

.sec-head h2,
.sec-head h1 {
	font-size: clamp(34px, 4.4vw, 56px);
	font-weight: 500;
	letter-spacing: -.025em;
	line-height: 1.04;
	margin: 18px 0 16px;
	color: var(--primary);
}

.sec-head p {
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 60ch;
	margin: 0 auto;
}

.kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--kicker);
}

/* Boutons ---------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 32px;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: background .3s ease, color .3s ease, border-color .3s ease,
	            transform .3s ease, box-shadow .3s ease;
}

.btn-gold {
	background: var(--primary);
	color: var(--on-primary);
	box-shadow: 0 16px 34px -22px rgba(12, 40, 29, .8);
}

.btn-gold:hover {
	background: var(--accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 20px 40px -22px rgba(140, 100, 40, .75);
}

.btn-ghost {
	border-color: var(--line);
	color: var(--primary);
	background: transparent;
}

.btn-ghost:hover {
	border-color: var(--primary);
	background: var(--primary);
	color: var(--on-primary);
}

/* --------------------------------------------------------------- 2. En-tête */
.nav {
	position: sticky;
	top: 0;
	z-index: 120;
	background: rgba(248, 244, 236, .86);
	-webkit-backdrop-filter: saturate(150%) blur(16px);
	backdrop-filter: saturate(150%) blur(16px);
	border-bottom: 1px solid rgba(18, 53, 40, .10);
	transition: box-shadow .35s ease, background .35s ease;
}

.nav.scrolled {
	background: rgba(248, 244, 236, .96);
	box-shadow: 0 18px 40px -30px rgba(12, 30, 22, .45);
}

.nav .wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 26px;
	padding: 15px 30px;
}

.logo-wrap { gap: 13px; }

.logo-img { height: 52px; transition: height .3s ease; }
.nav.scrolled .logo-img { height: 44px; }

.logo-txt .nm {
	font-family: var(--serif);
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--primary);
}

.logo-txt .sub {
	font-size: 9px;
	letter-spacing: .24em;
	color: var(--muted);
	margin-top: 5px;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 34px);
	margin-left: auto;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .01em;
}

.nav-links a.navlink {
	position: relative;
	padding: 8px 0;
	color: var(--ink);
}

.nav-links a.navlink::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 2px;
	height: 1px;
	background: var(--accent);
	transition: right .4s cubic-bezier(.16, 1, .3, 1);
}

.nav-links a.navlink:hover::after,
.nav-links a.navlink.act::after { right: 0; }

.nav-links a.navlink:hover,
.nav-links a.navlink.act { color: var(--primary); }

.nav-links .btn,
.nav-links > li > a.btn {
	padding: 11px 24px;
	font-size: 11.5px;
	letter-spacing: .1em;
	color: var(--on-primary);
	background: var(--primary);
}

.nav-links .btn:hover,
.nav-links > li > a.btn:hover {
	background: var(--accent);
	color: #fff;
}

.nav-tel {
	font-family: var(--sans);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--primary);
	white-space: nowrap;
	padding-left: 4px;
}

.nav-tel:hover { color: var(--accent-deep); }

.burger { color: var(--primary); font-size: 22px; }

/* ---------------------------------------------------------------- 3. Accueil */
.hero-clean { padding: 0; background: var(--bg); }

.hero-top {
	display: block;
	text-align: left;
	max-width: 980px;
	padding: clamp(54px, 8vw, 96px) 0 clamp(30px, 4vw, 48px);
	margin: 0;
}

.hero-top .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--kicker);
	margin-bottom: 22px;
}

.hero-top .eyebrow::before {
	content: "";
	width: 40px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

.hero-top h1 {
	font-family: var(--serif);
	font-size: clamp(46px, 7vw, 92px);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.035em;
	color: var(--primary);
}

.hero-top h1 span {
	display: block;
	margin-top: clamp(16px, 2vw, 22px);
	font-family: var(--sans);
	font-size: clamp(15px, 1.5vw, 18px);
	font-weight: 400;
	letter-spacing: .015em;
	line-height: 1.6;
	color: var(--muted);
	max-width: 46ch;
}

.hero-pano {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	background: var(--primary);
}

.hero-pano img {
	width: 100%;
	height: clamp(420px, 72vh, 780px);
	object-fit: cover;
	display: block;
}

.pano-caption {
	inset: auto 0 0 0;
	display: block;
	padding: 0 max(30px, calc((100vw - var(--maxw)) / 2 + 30px)) clamp(38px, 5vw, 66px);
	text-align: left;
	background: linear-gradient(180deg, rgba(9, 24, 17, 0) 22%, rgba(9, 24, 17, .48) 58%, rgba(9, 24, 17, .86));
	pointer-events: none;
}

.pano-caption::before { content: none; }

.pano-caption span {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(26px, 3.8vw, 52px);
	line-height: 1.22;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
	display: block;
	max-width: 18ch;
}

.pano-caption em { color: var(--accent-2); }

.hero-bottom {
	text-align: left;
	padding: clamp(30px, 4vw, 48px) 0 0;
}

.visual-caption {
	font-size: clamp(20px, 2.2vw, 27px);
	line-height: 1.45;
	color: var(--primary);
	margin-bottom: 10px;
}

.visual-caption em { color: var(--accent-deep); }

.towns-marquee {
	margin: 18px 0 26px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.towns-track span {
	font-family: var(--serif);
	font-size: clamp(20px, 2.6vw, 30px);
	font-weight: 400;
	color: var(--primary);
	opacity: .82;
}

.towns-track span::after {
	color: var(--accent);
	opacity: .55;
	padding: 0 22px;
}

/* Section « domaines de compétence » (fond sombre) */
.exp-sec {
	background: var(--primary) !important;
	color: var(--on-primary);
	position: relative;
	overflow: hidden;
}

.exp-sec::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 45% at 12% 0%, rgba(220, 184, 124, .16), transparent 70%),
		radial-gradient(45% 40% at 95% 100%, rgba(220, 184, 124, .10), transparent 70%);
	pointer-events: none;
}

.exp-sec .wrap { position: relative; z-index: 1; }

.exp-sec .kicker { color: var(--accent-2) !important; }

.exp-layout { grid-template-columns: 330px 1fr; gap: clamp(32px, 4vw, 56px); }

.exp-agent {
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(246, 241, 231, .14);
	border-radius: var(--r-lg);
	padding: 34px 28px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .6);
}

.exp-photo {
	width: 132px;
	height: 132px;
	border: 1px solid rgba(220, 184, 124, .55);
	padding: 5px;
	background: rgba(255, 255, 255, .04);
}

.exp-agent h3 { font-weight: 500; font-size: 25px; }

.exp-agent .role {
	color: var(--accent-2);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.5;
	max-width: 26ch;
	margin: 4px auto 0;
}

.exp-agent .agc-row {
	font-size: 13.5px;
	color: rgba(246, 241, 231, .72);
	justify-content: center;
}

.dom-grid { gap: 14px; }

.dom {
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(246, 241, 231, .12);
	border-radius: 16px;
	padding: 26px 24px;
	text-align: left;
	transition: transform .45s var(--t), background .45s ease, border-color .45s ease;
}

.dom:hover {
	transform: translateY(-5px);
	background: rgba(220, 184, 124, .07);
	border-color: rgba(220, 184, 124, .45);
}

.dom .ic {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: rgba(220, 184, 124, .13);
	font-size: 21px;
	margin-bottom: 16px;
}

.dom h4 {
	font-size: 19.5px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--accent-2);
	margin: 0 0 8px;
}

.dom p { font-size: 13.5px; line-height: 1.62; color: rgba(246, 241, 231, .70); }

.dom-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-2);
	opacity: .85;
}

.quote {
	background: transparent;
	border-left: 1px solid rgba(220, 184, 124, .5);
	border-radius: 0;
	padding: 6px 0 6px clamp(22px, 3vw, 38px);
	margin: clamp(42px, 6vw, 66px) 0 0 !important;
	max-width: 860px;
}

.quote p {
	font-family: var(--serif);
	font-size: clamp(22px, 2.6vw, 31px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: -.015em;
	color: var(--on-primary);
}

.quote .by {
	margin-top: 18px;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(246, 241, 231, .55);
}

/* Section « destination » (sombre) */
.region { background: var(--primary-2); }

.region .sec-head h2 { color: var(--on-primary); }
.region .sec-head p { color: rgba(246, 241, 231, .68); }
.region .kicker { color: var(--accent-2); }
.region .kicker::before { background: var(--accent-2); }

.region-grid { gap: 16px; }

.region-card {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(246, 241, 231, .13);
	border-radius: var(--r-lg);
	padding: 34px 30px;
	text-align: left;
	transition: transform .45s var(--t), background .45s ease, border-color .45s ease;
}

.region-card:hover {
	transform: translateY(-5px);
	background: rgba(220, 184, 124, .07);
	border-color: rgba(220, 184, 124, .45);
}

.region-card .ic {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: rgba(220, 184, 124, .13);
	font-size: 23px;
	margin-bottom: 18px;
}

.region-card h3 { font-size: 24px; font-weight: 500; color: var(--accent-2); }
.region-card p { font-size: 14px; line-height: 1.65; color: rgba(246, 241, 231, .70); }

.region-more {
	display: inline-block;
	margin-top: 16px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent-2);
}

/* Section « Belkhir » */
.belkhir { background: var(--bg-2) !important; }

.belkhir-intro { grid-template-columns: 340px 1fr; gap: clamp(30px, 4vw, 54px); }

.bk-portrait { border-radius: var(--r-lg); box-shadow: var(--shadow); }

.bk-portrait img { filter: saturate(.95) contrast(1.02); }

.belkhir-intro p {
	color: var(--muted) !important;
	font-size: 17px !important;
	line-height: 1.85;
}

.steps { gap: 16px; }

.step {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 30px 26px;
	transition: transform .4s var(--t), box-shadow .4s var(--t);
}

.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.step .ic { font-size: 24px !important; margin-bottom: 12px; }
.step h4 { font-size: 20px; font-weight: 500; margin-bottom: 6px; }
.step p { font-size: 13.5px; line-height: 1.65; color: var(--muted); }

/* --------------------------------------------------------------- 4. Cartes biens */
.biens-grid {
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: clamp(22px, 2.6vw, 32px);
}

.bien {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: none;
	transition: transform .5s var(--t), box-shadow .5s var(--t), border-color .5s ease;
}

.bien:hover {
	transform: translateY(-6px);
	box-shadow: 0 34px 70px -40px rgba(12, 30, 22, .55);
	border-color: rgba(179, 134, 63, .35);
}

.bien .ph { height: 268px; }

.bien .ph::before {
	opacity: 1;
	background: linear-gradient(180deg, rgba(9, 24, 17, 0) 42%, rgba(9, 24, 17, .80));
}

.bien .ph img { transition: transform 1.1s var(--t); }
.bien:hover .ph img { transform: scale(1.05); }

.ph-info {
	opacity: 1;
	transform: none;
	padding: 20px 22px;
}

.bien:hover .ph-info { transform: none; opacity: 1; }

.ph-info .pi-price {
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: -.02em;
}

.ph-info .pi-meta { font-size: 12.5px; color: rgba(246, 241, 231, .78); }

.ph-info .pi-cta {
	display: none;
}

.badge {
	top: 16px;
	left: 16px;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	background: rgba(246, 241, 231, .94);
	color: var(--primary);
	box-shadow: none;
}

.b-vendre { background: rgba(246, 241, 231, .94); color: var(--primary); }
.b-compromis { background: rgba(220, 184, 124, .95); color: #3a2a10; }
.b-vendu { background: rgba(22, 36, 29, .82); color: #f6f1e7; }

.fav {
	width: 38px;
	height: 38px;
	background: rgba(255, 253, 249, .92);
	font-size: 17px;
}

.bien .body { padding: 22px 24px 24px; }
.bien .price { display: none; }

.bien h3 {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -.015em;
	margin-bottom: 6px;
}

.bien .loc { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px; }

.bien .meta {
	gap: 8px;
	font-size: 11.5px;
	border-top: 1px solid var(--line);
	padding-top: 14px;
}

.bien .meta span {
	background: transparent;
	border: 1px solid var(--line);
	padding: 3px 9px;
	border-radius: 999px;
}

.bien.sold .ph img { filter: grayscale(.7) brightness(.75); }
.bien.sold .ph::after { font-size: 30px; letter-spacing: .3em; }

/* Cartes génériques (archives, blog, recherche) sur fond clair */
#view-actu .dom {
	background: var(--surface);
	border-color: var(--line);
}

#view-actu .dom:hover {
	background: var(--surface);
	border-color: rgba(179, 134, 63, .35);
}

#view-actu .dom .ic {
	background: var(--bg-2);
}

#view-actu .dom h4,
#view-actu .dom h4 a {
	color: var(--primary);
}

#view-actu .dom p {
	color: var(--muted);
}

#view-actu .dom-more a {
	color: var(--accent-deep);
}

/* Page 404 */
.err-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* --------------------------------------------------------- 5. Pages intérieures */
.view > .section:first-of-type { padding-top: clamp(52px, 6vw, 78px); }

.sec-head h1 { font-size: clamp(36px, 5vw, 62px); }

/* Filtres / onglets */
.cat-tabs { gap: 8px; margin-bottom: 26px; }

.cat-tab {
	padding: 11px 26px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	background: transparent;
	border: 1px solid var(--line);
	color: var(--muted);
}

.cat-tab:hover { border-color: var(--accent); color: var(--primary); }

.cat-tab.on {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--on-primary);
}

.filters { gap: 10px; margin-bottom: 40px; }

.filters select,
.filters input {
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	font-size: 13px;
}

/* Formulaires */
.field input,
.field select,
.fieldset input,
.fieldset select,
.field textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface);
	padding: 12px 14px;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
	transition: border-color .25s ease, box-shadow .25s ease;
}

.field input:focus,
.field select:focus,
.fieldset input:focus,
.fieldset select:focus,
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(179, 134, 63, .15);
}

.field label,
.fieldset label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }

.cform,
.contact-info,
.estim-left,
.estim-note,
.sim-panel,
.tunnel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: clamp(24px, 3vw, 34px);
	box-shadow: 0 30px 60px -50px rgba(12, 30, 22, .4);
}

.cform .btn-gold,
.tunnel .btn-gold { width: 100%; }

.contact-grid {
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}

.contact-map,
.gal-main,
.minisim { border-radius: var(--r-lg); }

.estim-grid { gap: clamp(26px, 3vw, 48px); }

.estim-note { background: var(--bg-2); }

.benefits li,
.rgpd,
.note { font-size: 13px; color: var(--muted); }

/* Simulateurs */
.sim-tabs { gap: 8px; }

.sim-tab {
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid var(--line);
	font-size: 12.5px;
	font-weight: 600;
	background: transparent;
	color: var(--muted);
}

.sim-tab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* Les onglets des simulateurs sont posés sur le fond vert sombre de la page. */
.sim .sim-tab {
	border-color: rgba(246, 241, 231, .28);
	color: rgba(246, 241, 231, .70);
}

.sim .sim-tab:hover {
	border-color: var(--accent-2);
	color: var(--on-primary);
}

.sim .sim-tab.on {
	background: var(--on-primary);
	border-color: var(--on-primary);
	color: var(--primary);
}

.sim-panel { border-radius: var(--r-lg); }

.sim-out { background: var(--bg-2); border-radius: 12px; }
.sim-out .big { font-family: var(--serif); font-weight: 500; color: var(--accent-deep); }

/* Tableaux & contenus légaux */
.hono-table { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }

.hono-table th,
.hono-table td { border-color: var(--line); padding: 14px 20px; }

.hono-table thead th {
	background: var(--primary);
	font-size: 10.5px;
	letter-spacing: .14em;
	padding: 16px 20px;
}

.hono-table tbody td:last-child { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--primary); }

.hono-note { font-size: 13.5px; }

.legal-wrap { font-size: 15px; line-height: 1.85; }
.legal-wrap h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; }

/* Accordéons & encadrés */
.le-acc {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
	margin: 10px 0;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.le-acc:hover { border-color: rgba(179, 134, 63, .35); }
.le-acc.open { box-shadow: 0 24px 50px -40px rgba(12, 30, 22, .45); }

.le-acc-h { padding: 20px 24px; }

.le-acc-n {
	width: 34px;
	height: 34px;
	background: var(--bg-2);
	color: var(--accent-deep);
	font-size: 12.5px;
	font-weight: 700;
}

.le-acc-t { font-size: 19px; font-weight: 500; }
.le-acc-x { color: var(--accent); font-weight: 300; }
.le-acc-pad { padding: 4px 26px 26px; font-size: 15px; line-height: 1.8; }

.le-badges {
	margin: 6px auto 34px;
}

.le-badge {
	border-radius: 999px;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--surface);
	color: var(--accent-deep);
	border: 1px solid var(--line);
	padding: 6px 14px;
}

.le-alert { border-radius: 12px; }

.xp-card,
.exp-card {
	border-radius: var(--r-lg);
	border: 1px solid var(--line);
	padding: 30px 26px;
}

.xp-card h3,
.exp-card h3 { font-weight: 500; }

.xp-tag { border-radius: 999px; }

/* Fiche bien */
.back { color: var(--accent-deep); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.gal-main { border-radius: var(--r-lg); }
.gal-thumb { border-radius: 10px; }
.detail-side, .minisim { border-radius: var(--r-lg); }
.dh-head h1 { font-size: clamp(32px, 4vw, 48px); }

/* --------------------------------------------------------------- 6. Pied de page */
footer {
	background: #0d2119;
	color: rgba(246, 241, 231, .62);
	padding-top: 12px;
}

footer .wrap { padding: clamp(52px, 6vw, 76px) 30px 30px; }

.foot-top {
	display: grid;
	grid-template-columns: 1.1fr 1.4fr;
	gap: clamp(30px, 5vw, 70px);
	border-bottom: 1px solid rgba(246, 241, 231, .12);
	padding-bottom: clamp(30px, 4vw, 44px);
}

.foot-top .nm {
	font-family: var(--serif);
	font-size: clamp(26px, 3vw, 34px) !important;
	font-weight: 500 !important;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--on-primary) !important;
}

.foot-top .nm em { color: var(--accent-2) !important; }

.foot-tag {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(246, 241, 231, .62);
	max-width: 34ch;
	margin-top: 14px;
}

.foot-links {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 24px;
	font-size: 13px;
	align-content: start;
}

.foot-links a { color: rgba(246, 241, 231, .72); }
.foot-links a:hover { color: var(--accent-2); }

.foot-bottom {
	margin-top: 26px;
	font-size: 11.5px;
	line-height: 1.7;
	text-align: left;
	color: rgba(246, 241, 231, .42);
	border-top: 0;
	padding-top: 0;
}

.foot-bottom a { color: rgba(246, 241, 231, .6); text-decoration: none; }
.foot-bottom a:hover { color: var(--accent-2); }

/* Bandeau cookies */
.cookie {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 30px 60px -30px rgba(12, 30, 22, .45);
	font-size: 12.5px;
	color: var(--muted);
}

.cookie b { color: var(--ink); }

.cookie .acc {
	background: var(--primary);
	color: var(--on-primary);
	border-radius: 999px;
	padding: 10px 20px;
	border: 0;
}

.cookie .ref {
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
	padding: 10px 20px;
}

/* ------------------------------------------------------------- 7. Animations */
.reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .9s var(--t), transform .9s var(--t);
	will-change: opacity, transform;
}

.reveal.in { opacity: 1; transform: none; }

.reveal-late { transition-delay: .08s; }

@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
	.towns-track { animation: none; }
	.bien, .dom, .region-card, .step { transition: none; }
}

/* -------------------------------------------------------------- 8. Responsive */
@media (max-width: 1080px) {
	.nav-tel { display: none; }
	.foot-top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.wrap { padding: 0 22px; }

	.nav .wrap { padding: 13px 22px; }

	.nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		padding: 18px 22px 24px;
		background: var(--bg);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 30px 50px -30px rgba(12, 30, 22, .4);
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		font-size: 15px;
	}

	.nav-links li { width: 100%; }
	.nav-links a.navlink { display: block; padding: 10px 0; }
	.nav-links .btn { width: 100%; margin-top: 10px; }
	.burger { display: block; margin-left: auto; }

	.hero-top { padding-top: 44px; }
	.hero-top h1 { font-size: clamp(38px, 9vw, 54px); }
	.pano-caption span { font-size: clamp(23px, 6vw, 34px); }

	.exp-layout, .belkhir-intro { grid-template-columns: 1fr; }
	.exp-agent { position: static; }

	.dom-grid { grid-template-columns: 1fr; }
	.region-grid { grid-template-columns: 1fr; }

	.foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sec-head p { font-size: 16px; }
}

@media (max-width: 560px) {
	body { font-size: 16px; }
	.hero-bottom .btn { width: 100%; }
	.bien .ph { height: 230px; }
	.foot-links { grid-template-columns: 1fr; }
	.section { padding: 64px 0; }
}