/*
Theme Name: Escape to France
Theme URI: https://escapetofrance.fr
Author: Escape to France
Description: Bilingual (EN / FR, Polylang) theme for escapetofrance.fr — property search on the French Riviera for people living in the UK and across Europe, paperwork and relocation support. Design system inherited from the Antoine Codex themes (colour tokens, Fraunces + Inter, header/footer, components). Works with the "Escape to France — Core" plugin.
Version: 1.2.4
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: escapetofrance
*/

/* ============================================================
   JETONS DE COULEUR / TYPO — repris tels quels du canvas validé.
   Ne pas modifier sans mettre à jour le canvas en parallèle.
   ============================================================ */

:root {
	--ac-ink: #14161a;
	--ac-surface-dark: #1e2127;
	--ac-cream: #f7f4ee;
	--ac-gold: #b8935a;
	--ac-gold-hover: #c7a671;
	--ac-charcoal: #2c2e33;
	--ac-cream-soft: #efeae0;
	--ac-border-light: #e0dacb;
	--ac-stone: #c9c4b6;
	--ac-slate: #4a4c50;
	--ac-taupe: #8a8677;
	--ac-black: #0f1013;
	--ac-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--ac-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ac-gutter: 56px;
	--ac-max: 1200px;
}

@media (max-width: 782px) {
	:root {
		--ac-gutter: 20px;
	}
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--ac-cream);
	color: var(--ac-charcoal);
	font-family: var(--ac-font-body);
	font-size: 16px;
	line-height: 1.5;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

h1, h2, h3 {
	font-family: var(--ac-font-display);
	font-weight: 500;
	margin: 0;
}

.ac-container {
	max-width: var(--ac-max);
	margin: 0 auto;
	width: 100%;
}

.ac-section {
	padding: 72px var(--ac-gutter);
	box-sizing: border-box;
}

@media (max-width: 782px) {
	.ac-section {
		padding: 44px var(--ac-gutter);
	}
}

.ac-eyebrow {
	display: block;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ac-gold);
	font-weight: 600;
}

/* ---------- Boutons ---------- */

.ac-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border-radius: 4px;
	font-size: 15px;
	font-weight: 600;
	font-family: var(--ac-font-body);
	border: none;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ac-btn--gold {
	background: var(--ac-gold);
	color: var(--ac-black);
	box-shadow: 0 6px 18px rgba(184, 147, 90, 0.32);
}

.ac-btn--gold:hover {
	background: var(--ac-gold-hover);
	box-shadow: 0 8px 22px rgba(184, 147, 90, 0.42);
	transform: translateY(-1px);
}

.ac-btn--outline {
	border: 1px solid rgba(247, 244, 238, 0.55);
	color: var(--ac-cream);
	background: transparent;
}

.ac-btn--outline:hover {
	border-color: var(--ac-cream);
	background: rgba(247, 244, 238, 0.08);
}

.ac-btn-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 600px) {
	.ac-btn-row {
		flex-direction: column;
		width: 100%;
	}

	.ac-btn {
		width: 100%;
	}
}

/* ============================================================
   EN-TÊTE
   ============================================================ */

.ac-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: 88px;
	background: var(--ac-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--ac-gutter);
	box-sizing: border-box;
	border-bottom: 1px solid rgba(184, 147, 90, 0.22);
}

@media (max-width: 782px) {
	.ac-header {
		height: 72px;
	}
}

.ac-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--ac-cream);
}

.ac-brand__logo {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
}

@media (max-width: 782px) {
	.ac-brand__logo {
		width: 32px;
		height: 32px;
	}
}

/*
 * CORRIGÉ SUITE À REVUE DU 2026-09-17 : the_custom_logo() (utilisé dès
 * qu'Antoine a réellement téléversé un logo via Personnaliser > Identité du
 * site) génère son propre balisage WordPress natif (<a class="custom-logo-link">
 * > <img class="custom-logo">), PAS <img class="ac-brand__logo"> — la règle
 * ci-dessus n'a donc jamais pu s'appliquer à un vrai logo. Ce bug restait
 * invisible tant qu'aucun logo n'était configuré. Corrigé ici en ciblant le
 * balisage réel de WordPress, avec le même traitement rond 40px/32px.
 */
.ac-brand .custom-logo-link {
	display: inline-flex;
	line-height: 0;
}

.ac-brand .custom-logo {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

@media (max-width: 782px) {
	.ac-brand .custom-logo {
		width: 32px;
		height: 32px;
	}
}

.ac-brand__mark-link {
	display: inline-flex;
	line-height: 0;
}

.ac-brand__mark {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ac-surface-dark);
	border: 1.5px solid var(--ac-gold);
	color: var(--ac-gold);
	font-family: var(--ac-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (max-width: 782px) {
	.ac-brand__mark {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}
}

.ac-brand__name {
	font-family: var(--ac-font-display);
	font-size: 19px;
	letter-spacing: 0.04em;
	font-weight: 500;
}

@media (max-width: 782px) {
	.ac-brand__name {
		font-size: 15px;
	}
}

.ac-nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.ac-nav__list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ac-nav__link {
	color: #e7e2d6;
	font-size: 14px;
}

.ac-nav__link:hover {
	color: var(--ac-gold);
}

.ac-header__cta {
	white-space: nowrap;
	padding: 11px 22px;
	font-size: 14px;
}

.ac-header__cta--mobile-only {
	display: none;
}

@media (max-width: 900px) {
	.ac-header__cta--desktop-only {
		display: none;
	}

	.ac-header__cta--mobile-only {
		display: inline-flex;
		width: 100%;
		margin-top: 8px;
	}
}

.ac-nav-toggle {
	display: none;
	width: 22px;
	height: 16px;
	flex-direction: column;
	justify-content: space-between;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.ac-nav-toggle span {
	display: block;
	height: 2px;
	background: var(--ac-cream);
	border-radius: 1px;
}

@media (max-width: 900px) {
	.ac-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--ac-ink);
		flex-direction: column;
		align-items: flex-start;
		padding: 16px var(--ac-gutter) 24px;
		gap: 16px;
		display: none;
	}

	.ac-nav.is-open {
		display: flex;
	}

	.ac-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.ac-header__cta {
		width: 100%;
		text-align: center;
	}

	.ac-nav-toggle {
		display: flex;
	}
}

/* ============================================================
   LANGUAGE SWITCHER EN | FR
   ============================================================
   Reusable component (see inc/language-switcher.php), identical in the
   desktop and mobile variant — only visibility differs here.
   ============================================================ */

.ac-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ac-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.ac-lang-switch__item {
	display: inline-flex;
	align-items: center;
	padding: 4px 6px;
	border-radius: 4px;
	color: #e7e2d6;
	text-decoration: none;
	border: 1px solid transparent;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

a.ac-lang-switch__item:hover {
	color: var(--ac-gold);
}

.ac-lang-switch__item:focus-visible {
	outline: 2px solid var(--ac-gold);
	outline-offset: 2px;
}

.ac-lang-switch__item.is-active {
	color: var(--ac-cream);
	background: var(--ac-surface-dark);
	border-color: rgba(184, 147, 90, 0.45);
	cursor: default;
}

/* Active language but not yet published on the other side: stays visible
   and readable, never hidden, but clearly non-interactive — neither a
   dead link nor a disabled HTML button. */
span.ac-lang-switch__item.is-disabled {
	color: var(--ac-stone);
	cursor: default;
	opacity: 0.65;
}

.ac-lang-switch__sep {
	color: var(--ac-stone);
	opacity: 0.6;
	font-size: 12px;
}

/* Desktop variant: visible in the header, hidden in the mobile dropdown
   menu (same threshold as .ac-header__cta--desktop-only/--mobile-only,
   to stay consistent with the rest of the header). */
.ac-lang-switch--mobile {
	display: none;
}

@media (max-width: 900px) {
	.ac-lang-switch--desktop {
		display: none;
	}

	.ac-lang-switch--mobile {
		display: inline-flex;
		margin: 4px 0 2px;
	}
}

/* ============================================================
   VIDÉO D'INTRODUCTION (hero vidéo) — AJOUTÉE 2026-09-19
   CORRIGÉE 2026-09-19 (retour d'Antoine, desktop ET mobile) : la première
   version forçait la section à occuper toute la hauteur d'écran restante
   sous l'en-tête (100vh - 88px). Sur la plupart des moniteurs desktop
   (16:9 ou plus larges une fois l'en-tête déduit), cela rendait le
   conteneur légèrement PLUS LARGE que la vidéo (ratio 16:9) par rapport à
   sa hauteur — avec `object-fit: cover`, le début et la fin du clip se
   retrouvaient donc rognés en haut/bas (texte "ANTOINE CODEX" de la scène
   finale coupé, notamment). Même symptôme, en pire, sur téléphone/tablette
   (rognage sur les côtés, confirmé par Antoine).
   Correction définitive : la section prend TOUJOURS exactement le ratio
   natif de la vidéo (16:9, identique pour hero-desktop.mp4 et
   hero-mobile.mp4), pleine largeur, quelle que soit la taille d'écran —
   `object-fit: cover` ne rogne alors plus jamais rien, puisque le
   conteneur a par construction le même ratio que le contenu. Le clip
   s'affiche donc TOUJOURS en entier, du premier au dernier cadre.
   ============================================================ */

.ac-video-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ac-ink); /* couleur de repli pendant le chargement de l'image d'affiche */
}

.ac-video-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.ac-video-hero__overlay {
	position: absolute;
	inset: 0;
	/* Assombrit progressivement vers le bas, pour que l'indicateur de
	   défilement (gold sur fond sombre) reste lisible quelle que soit la
	   scène de la vidéo à cet instant. */
	background: linear-gradient(180deg, rgba(20, 22, 26, 0) 55%, rgba(20, 22, 26, 0.78) 100%);
	pointer-events: none;
}

/*
 * CORRIGÉ 2026-09-19 — repositionné hors de la vidéo (voir commentaire
 * front-page.php) : élément normal du flux, centré, à cheval sur la
 * jonction vidéo/HERO via une marge négative — ne recouvre donc plus
 * jamais le texte incrusté dans la vidéo elle-même.
 */
.ac-video-hero__scroll {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px auto 0;
	border-radius: 50%;
	border: 1.5px solid var(--ac-gold);
	background: var(--ac-ink);
	animation: ac-video-hero-bounce 2.2s ease-in-out infinite;
}

.ac-video-hero__scroll:hover {
	border-color: var(--ac-gold-hover);
}

.ac-video-hero__scroll-chevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--ac-gold);
	border-bottom: 2px solid var(--ac-gold);
	transform: rotate(45deg) translate(-2px, -2px);
}

@keyframes ac-video-hero-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

@media (max-width: 782px) {
	.ac-video-hero__scroll {
		width: 38px;
		height: 38px;
		margin-top: -19px;
	}
}

/* Mouvement réduit : la vidéo est déjà mise en pause via JS (voir
   front-page.php) ; ici on retire aussi l'animation de rebond décorative
   du repère de défilement. */
@media (prefers-reduced-motion: reduce) {
	.ac-video-hero__scroll {
		animation: none;
	}
}

/* ============================================================
   HERO
   ============================================================ */

.ac-hero {
	position: relative;
	background: linear-gradient(160deg, var(--ac-ink) 0%, var(--ac-surface-dark) 100%);
	padding: 76px var(--ac-gutter) 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 36px));
	scroll-margin-top: 88px; /* AJOUTÉ 2026-09-19 — pour l'ancre #hero-suite, sous l'en-tête fixe */
	/* ADDED 2026-09-23 — .ac-video-hero__scroll (the round chevron between
	   the video and this section) only pulls ITSELF up via a negative
	   top margin; that margin does not affect this section's own flow
	   position. Left as-is, the scroll link's negative margin still
	   consumes 22px of vertical flow space between the video and this
	   section, with no background of its own outside the 44px circle —
	   so the page's cream body background showed through as a full-width
	   bar between two dark sections. Pulling this section up by the same
	   22px closes that gap exactly flush with the video's bottom edge;
	   the chevron (explicit z-index: 2) still renders above this section
	   (z-index: auto) wherever they now overlap, so it stays visible,
	   centred right on the seam.
	*/
	margin-top: -22px;
}

.ac-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		radial-gradient(ellipse 700px 420px at 50% -8%, rgba(184, 147, 90, 0.20), transparent 70%),
		radial-gradient(rgba(247, 244, 238, 0.06) 1px, transparent 1px);
	background-size: auto, 24px 24px;
	pointer-events: none;
}

.ac-hero > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 782px) {
	.ac-hero {
		padding: 44px var(--ac-gutter) 60px;
		gap: 16px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px));
		scroll-margin-top: 72px; /* AJOUTÉ 2026-09-19 — en-tête mobile plus bas (72px, voir .ac-header) */
		margin-top: -19px; /* ADDED 2026-09-23 — matches .ac-video-hero__scroll's -19px mobile margin, see desktop rule above */
	}
}

.ac-hero__mark {
	width: 150px;
	height: auto;
	opacity: 0.96;
}

@media (max-width: 782px) {
	.ac-hero__mark {
		width: 110px;
	}
}

/* CORRIGÉ SUITE À REVUE DU 2026-09-17 — même bug : the_custom_logo() rend
   <a class="custom-logo-link"><img class="custom-logo">, jamais
   <img class="ac-hero__mark">. Le wrapper .ac-hero__mark-wrap existait déjà
   dans front-page.php mais n'avait aucune règle le ciblant. */
.ac-hero__mark-wrap .custom-logo-link {
	display: inline-flex;
	line-height: 0;
}

.ac-hero__mark-wrap .custom-logo {
	/* AGRANDI 2026-09-19, à la demande d'Antoine (+40% : 150px → 210px
	   desktop, 110px → 154px mobile), même ratio conservé entre les deux. */
	width: 210px;
	height: 210px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	box-shadow: 0 0 0 1px rgba(184, 147, 90, 0.35), 0 14px 32px rgba(0, 0, 0, 0.4);
}

@media (max-width: 782px) {
	.ac-hero__mark-wrap .custom-logo {
		width: 154px;
		height: 154px;
	}
}

.ac-hero__eyebrow {
	margin-bottom: -4px;
}

.ac-hero__kicker {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--ac-stone);
	letter-spacing: 0.01em;
}

@media (max-width: 782px) {
	.ac-hero__kicker {
		font-size: 13.5px;
	}
}

.ac-hero__title {
	font-size: 45px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ac-cream);
	max-width: 820px;
}

@media (max-width: 782px) {
	.ac-hero__title {
		font-size: 25px;
		line-height: 1.28;
	}
}

.ac-hero__lede {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ac-stone);
	max-width: 620px;
	margin: 0;
}

@media (max-width: 782px) {
	.ac-hero__lede {
		font-size: 14.5px;
	}
}

/* ============================================================
   GRILLES DE CONTENU (leviers, situations, méthode)
   ============================================================ */

.ac-grid {
	display: grid;
	gap: 24px;
	max-width: var(--ac-max);
	width: 100%;
}

.ac-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ac-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.ac-grid--4,
	.ac-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.ac-grid--4,
	.ac-grid--3 {
		grid-template-columns: 1fr;
	}
}

.ac-levers {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.ac-lever {
	background: var(--ac-cream-soft);
	border: 1px solid var(--ac-border-light);
	border-radius: 10px;
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: 0 1px 2px rgba(15, 16, 19, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ac-lever:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 16, 19, 0.09);
}

.ac-lever__num {
	font-family: var(--ac-font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--ac-gold);
}

.ac-lever__title {
	font-size: 17px;
	font-weight: 600;
	color: var(--ac-ink);
}

.ac-lever__text {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ac-slate);
}

/* ---------- Pour qui ---------- */

.ac-audience {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}

.ac-audience__text {
	font-family: var(--ac-font-display);
	font-size: 26px;
	line-height: 1.55;
	color: var(--ac-charcoal);
	max-width: 760px;
	font-weight: 400;
}

@media (max-width: 782px) {
	.ac-audience__text {
		font-size: 19px;
	}
}

/* ---------- Pour qui, vraiment (contraste) ---------- */

.ac-fit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

.ac-fit__title {
	font-size: 26px;
	max-width: 680px;
}

@media (max-width: 782px) {
	.ac-fit__title {
		font-size: 20px;
	}
}

.ac-fit__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	max-width: var(--ac-max);
	width: 100%;
	text-align: left;
}

@media (max-width: 782px) {
	.ac-fit__grid {
		grid-template-columns: 1fr;
	}
}

.ac-fit__col {
	border-radius: 10px;
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ac-fit__col--no {
	background: var(--ac-cream-soft);
	border: 1px solid var(--ac-border-light);
}

.ac-fit__col--yes {
	background: var(--ac-ink);
	border: 1px solid var(--ac-ink);
}

.ac-fit__col-title {
	font-family: var(--ac-font-display);
	font-size: 17px;
	font-weight: 500;
}

.ac-fit__col--no .ac-fit__col-title {
	color: var(--ac-ink);
}

.ac-fit__col--yes .ac-fit__col-title {
	color: var(--ac-gold);
}

.ac-fit__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ac-fit__list li {
	font-size: 14px;
	line-height: 1.55;
	padding-left: 26px;
	position: relative;
}

.ac-fit__col--no .ac-fit__list li {
	color: var(--ac-slate);
}

.ac-fit__col--no .ac-fit__list li::before {
	content: '–';
	position: absolute;
	left: 0;
	color: var(--ac-taupe);
	font-weight: 700;
}

.ac-fit__col--yes .ac-fit__list li {
	color: var(--ac-cream);
}

.ac-fit__col--yes .ac-fit__list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--ac-gold);
	font-weight: 700;
}

/* ---------- Situations ---------- */

.ac-situations {
	background: var(--ac-cream-soft);
}

.ac-situations__title {
	font-size: 28px;
	text-align: center;
	margin: 0 0 44px;
}

@media (max-width: 782px) {
	.ac-situations__title {
		font-size: 21px;
		margin-bottom: 28px;
	}
}

.ac-card {
	background: var(--ac-cream);
	border: 1px solid var(--ac-border-light);
	border-radius: 8px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ac-card__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ac-ink);
}

.ac-card__text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ac-slate);
}

.ac-card--note {
	background: transparent;
	border: none;
	justify-content: center;
	font-size: 13px;
	line-height: 1.6;
	color: #7a7568;
	font-style: italic;
}

/* ---------- Explication du diagnostic ---------- */

.ac-explainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.ac-explainer__intro {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 720px;
}

.ac-explainer__lede {
	font-family: var(--ac-font-display);
	font-size: 22px;
	line-height: 1.5;
	color: var(--ac-charcoal);
	font-weight: 400;
}

@media (max-width: 782px) {
	.ac-explainer__lede {
		font-size: 17px;
	}
}

.ac-demo {
	max-width: 640px;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ac-border-light);
	border-radius: 10px;
	padding: 32px 36px;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.ac-demo {
		padding: 24px 20px;
	}
}

.ac-demo__tag {
	display: inline-block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ac-gold);
	font-weight: 700;
	background: rgba(184, 147, 90, 0.12);
	padding: 5px 10px;
	border-radius: 4px;
	margin-bottom: 18px;
}

.ac-demo__meta {
	font-size: 12.5px;
	color: #7a7568;
	margin-bottom: 16px;
}

.ac-demo__row {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin-bottom: 14px;
}

.ac-demo__row:last-child {
	margin-bottom: 0;
}

.ac-demo__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	min-width: 64px;
	color: var(--ac-slate);
}

.ac-demo__label--risk {
	color: var(--ac-gold);
}

.ac-demo__text {
	font-size: 14px;
	line-height: 1.55;
	color: var(--ac-charcoal);
}

/*
 * ---------- Grille "explication du diagnostic" + carte Diagnostic rapide ----------
 * AJOUTÉ 2026-09-19. .ac-explainer reste display:flex/column/centré pour
 * l'intro (inchangé) ; cette grille encadre uniquement la partie sous
 * l'intro (démo + CTA / carte promo), en une seule colonne par défaut
 * (mobile — la carte suit simplement l'exemple de démonstration dans l'ordre
 * naturel du contenu) et en deux colonnes à partir de 900px (desktop — carte
 * en colonne de droite, alignée en haut de la grille).
 */
.ac-explainer__grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: var(--ac-max);
}

.ac-explainer__col-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

@media (min-width: 900px) {
	.ac-explainer__grid {
		display: grid;
		grid-template-columns: 1.3fr 1fr;
		align-items: start;
		gap: 40px;
	}

	.ac-explainer__col-main {
		align-items: flex-start;
		text-align: left;
	}
}

.ac-diag-promo {
	width: 100%;
	max-width: 640px;
	box-sizing: border-box;
	background: var(--ac-cream);
	border: 1px solid var(--ac-border-light);
	border-left: 3px solid var(--ac-gold);
	border-radius: 10px;
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 900px) {
	.ac-diag-promo {
		max-width: none;
	}
}

.ac-diag-promo__label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ac-gold);
	font-weight: 700;
}

.ac-diag-promo__title {
	font-family: var(--ac-font-display);
	font-size: 22px;
	font-weight: 500;
	color: var(--ac-ink);
	margin: 2px 0 0;
}

.ac-diag-promo__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ac-slate);
	margin: 0;
}

.ac-diag-promo__subline {
	font-size: 12.5px;
	font-style: italic;
	color: var(--ac-taupe);
	margin: 0 0 6px;
}

.ac-diag-promo__btn {
	align-self: flex-start;
}

@media (max-width: 600px) {
	.ac-diag-promo__btn {
		align-self: stretch;
	}
}

/* ---------- Méthode ---------- */

.ac-method {
	position: relative;
	overflow: hidden;
}

.ac-method__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.22;
}

.ac-method__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--ac-ink) 15%, rgba(20, 22, 26, 0.92) 100%);
}

.ac-method__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
}

.ac-method__title {
	font-size: 30px;
	color: var(--ac-cream);
}

.ac-step {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ac-step__num {
	font-family: var(--ac-font-display);
	font-size: 32px;
	color: var(--ac-gold);
}

.ac-step__title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ac-cream);
}

.ac-step__title em {
	font-style: normal;
	font-weight: 400;
	color: var(--ac-taupe);
	font-size: 13px;
}

.ac-step__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ac-stone);
}

.ac-method__footnote {
	font-size: 12.5px;
	color: var(--ac-taupe);
}

.ac-method__link {
	color: var(--ac-gold);
	font-size: 14px;
	font-weight: 600;
}

/* ---------- Aperçu assistant IA ---------- */

.ac-ai-preview-wrap {
	display: flex;
	justify-content: center;
}

.ac-ai-preview {
	max-width: 640px;
	width: 100%;
	background: var(--ac-cream-soft);
	border: 1px solid var(--ac-border-light);
	border-radius: 12px;
	padding: 40px 44px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (max-width: 600px) {
	.ac-ai-preview {
		padding: 24px 20px;
	}
}

.ac-ai-preview__head {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ac-ai-preview__title {
	font-size: 22px;
}

.ac-bubbles {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ac-bubble {
	max-width: 85%;
	padding: 12px 16px;
	font-size: 13.5px;
	line-height: 1.55;
}

.ac-bubble--assistant {
	align-self: flex-start;
	background: var(--ac-cream);
	border: 1px solid var(--ac-border-light);
	border-radius: 10px 10px 10px 2px;
	color: var(--ac-charcoal);
}

.ac-bubble--user {
	align-self: flex-end;
	background: var(--ac-ink);
	border-radius: 10px 10px 2px 10px;
	color: var(--ac-cream);
}

.ac-bubble--tag {
	align-self: center;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ac-gold);
}

.ac-ai-preview__note {
	font-size: 12px;
	line-height: 1.5;
	color: #7a7568;
	text-align: center;
}

/* ---------- Fondateur ---------- */

.ac-founder-wrap {
	display: flex;
	justify-content: center;
}

.ac-founder {
	max-width: 780px;
	width: 100%;
	display: flex;
	gap: 44px;
	align-items: center;
}

@media (max-width: 600px) {
	.ac-founder {
		flex-direction: column;
		text-align: center;
		gap: 24px;
	}
}

.ac-founder__portrait {
	width: 168px;
	height: 168px;
	border-radius: 50%;
	background: var(--ac-cream-soft);
	border: 1px solid var(--ac-border-light);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	overflow: hidden;
}

.ac-founder__portrait-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.ac-founder__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ac-founder__name {
	font-size: 24px;
}

.ac-founder__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ac-slate);
	margin: 0;
}

.ac-founder__link {
	color: var(--ac-gold);
	font-size: 14px;
	font-weight: 600;
}

/* AJOUTÉ 2026-09-19 — signature de la section "mission personnelle"
   d'Antoine sur la page Création d'entreprise (réutilise .ac-founder,
   déjà existant, pour cette nouvelle instance du bloc). */
.ac-founder__signature {
	font-family: var(--ac-font-display);
	font-size: 15px;
	color: var(--ac-gold);
	margin: 4px 0 0;
}

/* ---------- FAQ ---------- */

.ac-faq {
	background: var(--ac-cream-soft);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

.ac-faq__title {
	font-size: 28px;
}

.ac-faq__list {
	max-width: 780px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ac-faq__question {
	font-size: 15px;
	font-weight: 600;
	color: var(--ac-ink);
	margin-bottom: 6px;
}

.ac-faq__answer {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ac-slate);
}

.ac-faq__link {
	color: var(--ac-gold);
	font-size: 14px;
	font-weight: 600;
}

/* ---------- CTA final ---------- */

.ac-final-cta {
	background: var(--ac-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 26px;
}

.ac-final-cta__title {
	font-size: 28px;
	color: var(--ac-cream);
}

@media (max-width: 782px) {
	.ac-final-cta__title {
		font-size: 21px;
	}
}

/* ---------- Formulaires (pages diagnostic / contact) ---------- */

.ac-page-header {
	background: var(--ac-ink);
	padding: 56px var(--ac-gutter);
	text-align: center;
}

.ac-page-header__title {
	color: var(--ac-cream);
	font-size: 32px;
}

.ac-page-header__lede {
	color: var(--ac-stone);
	max-width: 640px;
	margin: 14px auto 0;
	font-size: 15px;
	line-height: 1.6;
}

.ac-page-body {
	padding: 56px var(--ac-gutter) 88px;
	display: flex;
	justify-content: center;
}

.ac-notice {
	padding: 1rem 1.25rem;
	border-radius: 8px;
	font-size: 0.9rem;
}

.ac-notice--warning {
	background: #fbeeda;
	border: 1px solid var(--ac-gold);
	color: var(--ac-charcoal);
}

/* ---------- Pied de page ---------- */

.ac-footer {
	background: var(--ac-black);
	padding: 48px var(--ac-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

.ac-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ac-footer__brand-logo {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: 50%;
	opacity: 0.85;
}

/* CORRIGÉ SUITE À REVUE DU 2026-09-17 — même bug que .ac-brand__logo ci-dessus :
   the_custom_logo() rend <a class="custom-logo-link"><img class="custom-logo">,
   jamais <img class="ac-footer__brand-logo">. */
.ac-footer__brand .custom-logo-link {
	display: inline-flex;
	line-height: 0;
}

.ac-footer__brand .custom-logo {
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	opacity: 0.85;
}

.ac-footer__brand-mark {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ac-surface-dark);
	border: 1px solid rgba(184, 147, 90, 0.55);
	color: var(--ac-gold);
	font-family: var(--ac-font-display);
	font-size: 10px;
	font-weight: 600;
	opacity: 0.9;
}

.ac-footer__brand-name {
	font-family: var(--ac-font-display);
	font-size: 14px;
	color: var(--ac-taupe);
}

.ac-footer__links {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ac-footer__links a {
	font-size: 13px;
	color: var(--ac-taupe);
}

.ac-footer__links a:hover {
	color: var(--ac-gold);
}

/* ---------- Générique (page.php) ---------- */

.ac-generic-content {
	max-width: 780px;
	margin: 0 auto;
	padding: 72px var(--ac-gutter);
}

.ac-generic-content h1 {
	font-size: 32px;
	margin-bottom: 1.5rem;
}

.ac-generic-content p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ac-slate);
}

/* ============================================================
   AJOUTÉ 2026-09-18 — Service "Diagnostic d'entreprise & Stratégie
   de croissance" (page dédiée + carte sur l'accueil). Réutilise au
   maximum les composants existants (.ac-hero, .ac-card, .ac-step,
   .ac-grid, .ac-final-cta) ; seules les règles réellement nouvelles
   sont ajoutées ici.
   ============================================================ */

/* Lien de clarification sous le CTA du hero de service : distingue
   explicitement ce diagnostic accompagné (sur devis) du diagnostic
   automatique gratuit déjà existant sur /diagnostic/. */
.ac-hero__alt-link {
	margin: -6px 0 0;
	font-size: 13px;
	color: var(--ac-stone);
}

.ac-hero__alt-link a {
	color: var(--ac-gold);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ac-hero__alt-link a:hover {
	color: var(--ac-gold-hover);
}

/* Intro de la section méthode (8 étapes) — même traitement que
   .ac-explainer__lede mais sur fond sombre (.ac-method). */
.ac-method__intro {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ac-stone);
	max-width: 680px;
	text-align: center;
	margin: -20px 0 4px;
}

/* Variante bloc (pleine largeur, centrée) de la note discrète déjà
   utilisée en bas de la section méthode de l'accueil. */
.ac-method__footnote--block {
	display: block;
	max-width: 680px;
	text-align: center;
	line-height: 1.6;
	margin-top: 8px;
}

/* Même note discrète, mais utilisée hors fond sombre (section
   "Ce que vous obtenez", fond clair) — couleur adaptée. */
.ac-method__footnote--light {
	display: block;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ac-taupe);
	text-align: center;
	max-width: 680px;
	margin: 8px auto 0;
}

.ac-service-ai {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.ac-service-ai__text {
	max-width: 720px;
}

.ac-service-accent {
	font-family: var(--ac-font-display);
	font-size: 20px;
	font-weight: 500;
	color: var(--ac-ink);
	max-width: 620px;
	margin: 0;
}

.ac-final-cta__lede {
	color: var(--ac-stone);
	max-width: 560px;
	font-size: 15px;
	line-height: 1.6;
	margin: -12px 0 0;
}

/* ---------- Carte "Diagnostic d'entreprise" sur l'accueil ---------- */

.ac-service-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

/*
 * AJOUTÉ 2026-09-19 — Deux nouvelles directions de service ("Notoriété,
 * image de marque & communication" et "Création d'entreprise &
 * accompagnement entrepreneurial") rejoignent le diagnostic dans cette
 * section : la carte unique centrée devient une grille de 3 cartes.
 * .ac-service-feature__card garde exactement le même style (fond, bordure,
 * padding) — seule la disposition autour change.
 */
.ac-service-feature__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	max-width: var(--ac-max);
	width: 100%;
	align-items: stretch;
}

@media (max-width: 900px) {
	.ac-service-feature__grid {
		grid-template-columns: 1fr;
	}
}

.ac-service-feature__card {
	max-width: 720px;
	width: 100%;
	background: var(--ac-cream-soft);
	border: 1px solid var(--ac-border-light);
	border-radius: 12px;
	padding: 40px 44px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

@media (max-width: 600px) {
	.ac-service-feature__card {
		padding: 28px 22px;
	}
}

.ac-service-feature__title {
	font-size: 24px;
}

@media (max-width: 782px) {
	.ac-service-feature__title {
		font-size: 20px;
	}
}

.ac-service-feature__text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ac-slate);
	max-width: 560px;
	margin: 0;
}

/* ============================================================
   MOUVEMENT RÉDUIT — AJOUTÉ 2026-09-18. `html { scroll-behavior:
   smooth }` (tout en haut de ce fichier) et les transitions de survol
   (.ac-btn, .ac-lever, .ac-hero__alt-link) ignoraient jusqu'ici la
   préférence système "Réduire les animations" — corrigé ici pour tout
   le site, pas seulement la nouvelle page, puisque le problème était
   déjà présent partout où `scroll-behavior: smooth` s'applique
   (ancres du menu, "Découvrir notre méthode", etc.).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   AJOUTÉ 2026-09-18 (suite) — Développement de l'étape 01 de la
   méthode, page "Diagnostic d'entreprise & Stratégie de croissance".
   Section claire, texte long-format, sous-titres lisibles : reprend
   le gabarit déjà utilisé par .ac-generic-content (max-width 780px,
   paragraphes 15.5px / line-height 1.7 / couleur --ac-slate) plutôt
   que d'entasser ce texte dans une carte .ac-step (pensée pour un
   court résumé sur fond sombre, pas pour du texte long).
   ============================================================ */

.ac-step-detail {
	background: var(--ac-cream);
}

.ac-step-detail__inner {
	max-width: 780px;
	margin: 0 auto;
}

.ac-step-detail__inner .ac-eyebrow {
	margin-bottom: 8px;
}

.ac-step-detail__subhead {
	font-size: 20px;
	margin-top: 40px;
	margin-bottom: 4px;
	color: var(--ac-charcoal);
}

.ac-step-detail__subhead--first {
	margin-top: 4px;
}

.ac-step-detail__inner p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ac-slate);
}

.ac-step-detail__list {
	margin: 0 0 1em;
	padding-left: 1.2em;
	list-style: disc;
}

.ac-step-detail__list li {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--ac-slate);
	margin-bottom: 6px;
}

.ac-step-detail__list li strong {
	color: var(--ac-charcoal);
}

.ac-step-detail__disclaimer {
	font-size: 12.5px !important;
	line-height: 1.6 !important;
	color: var(--ac-taupe) !important;
	font-style: italic;
	margin-top: 4px !important;
}

.ac-step-detail__accent {
	font-family: var(--ac-font-display);
	font-size: 19px;
	color: var(--ac-gold);
	text-align: center;
	margin: 40px 0 4px;
}

.ac-step-detail .ac-btn-row {
	margin-top: 28px;
}

/* ============================================================
   RÉSOLUTION DE PROBLÈMES / PROBLEM SOLVING — AJOUTÉ 2026-09-25
   Accent sous la vidéo de l'accueil (.ac-ps-teaser) + page dédiée
   (.ac-ps-page). Uniquement les jetons --ac-* existants (couleurs,
   Fraunces/Inter) : aucune nouvelle couleur. Même bloc dans les thèmes
   FR et EN.
   ============================================================ */

/* ---------- Accent sous la vidéo (accueil) ---------- */

.ac-ps-teaser {
	position: relative;
	overflow: hidden;
	background: var(--ac-black);
	color: var(--ac-cream);
	padding: 88px var(--ac-gutter) 92px;
	border-bottom: 1px solid rgba(184, 147, 90, 0.28);
	scroll-margin-top: 88px;
}

.ac-ps-teaser::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 55% 75% at 80% 50%, rgba(184, 147, 90, 0.16), transparent 70%),
		radial-gradient(rgba(247, 244, 238, 0.05) 1px, transparent 1px);
	background-size: auto, 24px 24px;
	pointer-events: none;
}

.ac-ps-teaser__inner {
	position: relative;
	max-width: var(--ac-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 64px;
	align-items: center;
}

.ac-ps-teaser__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.ac-ps-teaser__title {
	margin: 0;
	font-family: var(--ac-font-display);
	font-size: clamp(38px, 4.4vw, 62px);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--ac-cream);
	text-wrap: balance;
}

.ac-ps-teaser__text {
	margin: 0;
	max-width: 540px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--ac-stone);
}

.ac-ps-arrow {
	display: inline-block;
	margin-left: 10px;
	transition: transform 0.15s ease;
}

.ac-btn:hover .ac-ps-arrow,
.ac-btn:focus-visible .ac-ps-arrow {
	transform: translateX(4px);
}

.ac-ps-teaser__visual {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(184, 147, 90, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ac-ps-teaser__visual img {
	display: block;
	width: 100%;
	height: auto;
}

.ac-ps-teaser__visual:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(184, 147, 90, 0.85), 0 36px 80px rgba(0, 0, 0, 0.6), 0 0 70px rgba(184, 147, 90, 0.16);
}

@media (max-width: 900px) {
	.ac-ps-teaser {
		padding: 60px var(--ac-gutter) 64px;
		scroll-margin-top: 72px;
	}

	.ac-ps-teaser__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.ac-ps-teaser__title {
		font-size: clamp(32px, 8.4vw, 44px);
	}

	.ac-ps-teaser__text {
		font-size: 16.5px;
	}
}

@media (max-width: 600px) {
	.ac-ps-teaser__content {
		align-items: stretch;
	}
}

/* Focus clavier visible sur les boutons et liens ajoutés (fonds sombres/clairs). */
.ac-ps-teaser a:focus-visible,
.ac-ps-page a:focus-visible,
.ac-ps-page button:focus-visible {
	outline: 2px solid var(--ac-gold);
	outline-offset: 3px;
}

/* ---------- Page dédiée : structure commune ---------- */

.ac-ps-head {
	max-width: 780px;
	margin: 0 auto 44px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.ac-ps-head h2 {
	font-size: clamp(27px, 3vw, 38px);
	line-height: 1.2;
	color: var(--ac-ink);
}

.ac-ps-head p {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ac-slate);
}

.ac-ps-head--dark h2 {
	color: var(--ac-cream);
}

.ac-ps-head--dark p {
	color: var(--ac-stone);
}

.ac-ps-note {
	max-width: 700px;
	margin: 40px auto 0;
	text-align: center;
	font-family: var(--ac-font-display);
	font-size: 20px;
	line-height: 1.5;
	color: var(--ac-charcoal);
}

.ac-ps-note--small {
	font-family: var(--ac-font-body);
	font-size: 13.5px;
	font-style: italic;
	color: var(--ac-taupe);
}

.ac-ps-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 4px;
	background: rgba(184, 147, 90, 0.12);
	color: var(--ac-gold);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- En-tête de page ---------- */

.ac-ps-hero {
	position: relative;
	overflow: hidden;
	padding: 80px var(--ac-gutter) 104px;
	background: linear-gradient(160deg, var(--ac-black) 0%, var(--ac-ink) 55%, var(--ac-surface-dark) 100%);
	color: var(--ac-cream);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 36px));
}

.ac-ps-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 700px 420px at 20% -10%, rgba(184, 147, 90, 0.18), transparent 70%),
		radial-gradient(rgba(247, 244, 238, 0.05) 1px, transparent 1px);
	background-size: auto, 24px 24px;
	pointer-events: none;
}

.ac-ps-hero__inner {
	position: relative;
	max-width: var(--ac-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.ac-ps-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.ac-ps-hero__title {
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ac-cream);
	text-wrap: balance;
}

.ac-ps-hero__claim {
	margin: 0;
	font-family: var(--ac-font-display);
	font-size: clamp(20px, 2vw, 25px);
	line-height: 1.35;
	color: var(--ac-gold);
}

.ac-ps-hero__lede {
	margin: 0;
	max-width: 600px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ac-stone);
}

.ac-ps-hero__actions {
	justify-content: flex-start;
	margin-top: 6px;
}

.ac-ps-hero__visual {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(184, 147, 90, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55);
}

.ac-ps-hero__visual img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 900px) {
	.ac-ps-hero {
		padding: 48px var(--ac-gutter) 72px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px));
	}

	.ac-ps-hero__inner {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.ac-ps-hero__lede {
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.ac-ps-hero__content {
		align-items: stretch;
	}
}

/* ---------- 1. Le problème examiné ---------- */

.ac-ps-problems {
	background: var(--ac-cream);
}

.ac-ps-problems__grid {
	max-width: var(--ac-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.ac-ps-problem {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px 28px;
	background: #fff;
	border: 1px solid var(--ac-border-light);
	border-top: 3px solid var(--ac-gold);
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(15, 16, 19, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ac-ps-problem:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(15, 16, 19, 0.09);
}

.ac-ps-problem__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ac-ink);
	color: var(--ac-gold);
}

.ac-ps-problem__title {
	font-size: 21px;
	line-height: 1.3;
	color: var(--ac-ink);
}

.ac-ps-problem__question {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ac-charcoal);
}

.ac-ps-problem__tags {
	margin: auto 0 0;
	padding-top: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ac-taupe);
}

@media (max-width: 900px) {
	.ac-ps-problems__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.ac-ps-note {
		font-size: 18px;
	}
}

/* ---------- 2. La méthode (fond sombre) ---------- */

.ac-ps-method {
	position: relative;
	background: linear-gradient(160deg, var(--ac-ink) 15%, var(--ac-surface-dark) 100%);
}

.ac-ps-steps {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--ac-max);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
}

.ac-ps-step {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 22px 22px;
	background: rgba(247, 244, 238, 0.03);
	border: 1px solid rgba(184, 147, 90, 0.24);
	border-radius: 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.ac-ps-step:hover {
	border-color: rgba(184, 147, 90, 0.6);
	background: rgba(247, 244, 238, 0.05);
}

.ac-ps-step__letter {
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--ac-gold);
	background: var(--ac-black);
	color: var(--ac-gold);
	font-family: var(--ac-font-display);
	font-size: 24px;
	font-weight: 600;
}

.ac-ps-step__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.ac-ps-step__title {
	font-family: var(--ac-font-body);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ac-cream);
}

.ac-ps-step__title span {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ac-gold);
}

.ac-ps-step__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ac-stone);
}

.ac-ps-step__output {
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(184, 147, 90, 0.2);
	font-size: 14px;
	font-weight: 600;
	color: var(--ac-cream);
}

.ac-ps-step__output span {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ac-taupe);
}

@media (max-width: 900px) {
	.ac-ps-steps {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.ac-ps-step {
		flex-direction: row;
		align-items: flex-start;
		gap: 18px;
		padding: 22px 20px;
	}

	.ac-ps-step__letter {
		width: 46px;
		height: 46px;
		font-size: 21px;
	}
}

/* ---------- 3. Ce que vous obtenez ---------- */

.ac-ps-deliverables {
	background: var(--ac-cream-soft);
}

.ac-ps-deliverables__inner {
	max-width: var(--ac-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 64px;
	align-items: start;
}

.ac-ps-deliverables__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 120px;
}

.ac-ps-deliverables__intro h2 {
	font-size: clamp(27px, 3vw, 38px);
	line-height: 1.2;
	color: var(--ac-ink);
}

.ac-ps-deliverables__intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--ac-slate);
}

.ac-ps-deliverables__intro .ac-ps-deliverables__footnote {
	font-size: 13.5px;
	font-style: italic;
	color: var(--ac-taupe);
}

.ac-ps-deliverables__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ac-border-light);
}

.ac-ps-deliverables__list li {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 16px;
	padding: 24px 0;
	border-bottom: 1px solid var(--ac-border-light);
}

.ac-ps-deliverables__num {
	font-family: var(--ac-font-display);
	font-size: 32px;
	line-height: 1;
	color: var(--ac-gold);
}

.ac-ps-deliverables__list h3 {
	margin-bottom: 6px;
	font-size: 21px;
	line-height: 1.3;
	color: var(--ac-ink);
}

.ac-ps-deliverables__list p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ac-slate);
}

@media (max-width: 900px) {
	.ac-ps-deliverables__inner {
		grid-template-columns: 1fr;
		gap: 28px;
		max-width: 620px;
	}

	.ac-ps-deliverables__intro {
		position: static;
	}

	.ac-ps-deliverables__list li {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 12px;
		padding: 20px 0;
	}

	.ac-ps-deliverables__num {
		font-size: 26px;
	}

	.ac-ps-deliverables__list h3 {
		font-size: 19px;
	}
}

/* ---------- 4. Situations schématiques ---------- */

.ac-ps-examples {
	background: var(--ac-cream);
}

.ac-ps-examples__grid {
	max-width: var(--ac-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.ac-ps-example {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px;
	background: #fff;
	border: 1px solid var(--ac-border-light);
	border-radius: 10px;
}

.ac-ps-example__kicker {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ac-gold);
}

.ac-ps-example__kicker span {
	margin-left: 6px;
	padding-left: 8px;
	border-left: 1px solid var(--ac-border-light);
	color: var(--ac-taupe);
}

.ac-ps-example__title {
	font-size: 19px;
	line-height: 1.4;
	color: var(--ac-ink);
}

.ac-ps-example__list {
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ac-border-light);
}

.ac-ps-example__list dt {
	margin-top: 12px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ac-slate);
}

.ac-ps-example__list dt:first-child {
	margin-top: 0;
}

.ac-ps-example__list dd {
	margin: 4px 0 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ac-charcoal);
}

@media (max-width: 900px) {
	.ac-ps-examples__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

/* ---------- 5. La présentation : ses pages affichées dans le site ---------- */
/* Demande d'Antoine : pas de PDF — les 18 pages s'affichent l'une sous
   l'autre et se lisent en faisant défiler la page. */
.ac-ps-deck {
	background: var(--ac-black);
}

.ac-ps-slides {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1100px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.ac-ps-slide {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ac-ps-slide__num {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ac-gold);
}

.ac-ps-slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	background: var(--ac-surface-dark);
	box-shadow: 0 0 0 1px rgba(184, 147, 90, 0.35), 0 24px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 782px) {
	.ac-ps-slides {
		gap: 22px;
	}

	.ac-ps-slide img {
		border-radius: 6px;
	}
}

/* ---------- Contact : rendez-vous, échange et devis ---------- */

.ac-ps-contact .ac-final-cta__lede {
	margin: -8px 0 0;
}

.ac-ps-contact__mail {
	margin: 0;
	font-size: 14px;
	color: var(--ac-stone);
}

.ac-ps-contact__mail a {
	color: var(--ac-gold);
	font-weight: 600;
}

.ac-ps-contact__mail a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Mouvement réduit : le bloc global en fin de fichier neutralise déjà
   transitions et animations ; on retire en plus les déplacements au survol. */
@media (prefers-reduced-motion: reduce) {
	.ac-ps-teaser__visual:hover,
	.ac-ps-problem:hover {
		transform: none;
	}
}

/* ---------- Video / accent junction (EN homepage) ----------
   ADDED 2026-09-25 — on this site the chevron's negative top margin is
   compensated by .ac-hero { margin-top: -22px } (see the HERO rules). The
   new accent section now sits between the chevron and the HERO, so it takes
   over that compensation, and the HERO right after it is no longer pulled
   up (it would otherwise overlap the accent section by 22px). */
.ac-video-hero__scroll + .ac-ps-teaser {
	margin-top: -22px;
}

.ac-ps-teaser + .ac-hero {
	margin-top: 0;
}

@media (max-width: 782px) {
	.ac-video-hero__scroll + .ac-ps-teaser {
		margin-top: -19px;
	}

	.ac-ps-teaser + .ac-hero {
		margin-top: 0;
	}
}

/* ---------- Gratuit en ligne / approfondi sur place ---------- */
/* AJOUTÉ 2026-09-25 — distingue le diagnostic automatique gratuit
   (questionnaire + assistant IA) de la mission payante sur place décrite
   par la présentation. */
.ac-ps-offers {
	background: var(--ac-cream);
}

.ac-ps-offers__grid {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
}

.ac-ps-offer {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 30px;
	background: #fff;
	border: 1px solid var(--ac-border-light);
	border-radius: 12px;
}

.ac-ps-offer p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ac-slate);
}

.ac-ps-offer--featured {
	background: var(--ac-ink);
	border-color: rgba(184, 147, 90, 0.5);
	box-shadow: 0 20px 50px rgba(15, 16, 19, 0.18);
}

.ac-ps-offer--featured p {
	color: var(--ac-stone);
}

.ac-ps-offer__price {
	align-self: flex-start;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--ac-gold);
	color: var(--ac-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ac-ps-offer--featured .ac-ps-offer__price {
	background: var(--ac-gold);
	color: var(--ac-black);
}

.ac-ps-offer__title {
	font-size: 24px;
	line-height: 1.25;
	color: var(--ac-ink);
}

.ac-ps-offer--featured .ac-ps-offer__title {
	color: var(--ac-cream);
}

.ac-ps-offer .ac-ps-offer__note {
	font-size: 13px;
	font-style: italic;
	color: var(--ac-taupe);
}

.ac-ps-offer__actions {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

.ac-ps-offer__link {
	padding: 0;
	border: none;
	background: none;
	font-family: var(--ac-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ac-gold);
	cursor: pointer;
}

.ac-ps-offer__link[hidden] {
	display: none;
}

.ac-ps-offer__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.ac-ps-offers__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.ac-ps-offer {
		padding: 26px 22px;
	}

	.ac-ps-offer__title {
		font-size: 21px;
	}
}

/* ============================================================
   PREMIUM CONTACT PAGE — ADDED 2026-09-25
   Dark header, form card overlapping the header, side column (Antoine,
   what happens next, direct contact). The form itself: see the plugin's
   ac-frontend.css (.ac-contact-form--premium). Existing --ac-* tokens only.
   ============================================================ */

.ac-contact-hero {
	position: relative;
	overflow: hidden;
	padding: 76px var(--ac-gutter) 150px;
	background: linear-gradient(160deg, var(--ac-black) 0%, var(--ac-ink) 55%, var(--ac-surface-dark) 100%);
	color: var(--ac-cream);
}

.ac-contact-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(ellipse 720px 420px at 85% -10%, rgba(184, 147, 90, 0.2), transparent 70%),
		radial-gradient(rgba(247, 244, 238, 0.05) 1px, transparent 1px);
	background-size: auto, 24px 24px;
	pointer-events: none;
}

.ac-contact-hero__inner {
	position: relative;
	max-width: var(--ac-max);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ac-contact-hero__title {
	max-width: 760px;
	font-size: clamp(38px, 4.6vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--ac-cream);
}

.ac-contact-hero__lede,
.ac-contact-hero__lede p {
	max-width: 640px;
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--ac-stone);
}

.ac-contact-hero__points {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

.ac-contact-hero__points li {
	position: relative;
	padding-left: 26px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ac-cream);
}

.ac-contact-hero__points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1.5px solid var(--ac-gold);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8935a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.ac-contact-main {
	padding: 0 var(--ac-gutter) 96px;
	background: var(--ac-cream);
}

.ac-contact-main__inner {
	position: relative;
	z-index: 2;
	max-width: var(--ac-max);
	margin: -96px auto 0;
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}

.ac-contact-main__form .ac-contact-form--premium {
	max-width: none;
}

/* ---------- Side column ---------- */

.ac-contact-aside {
	position: sticky;
	top: 112px;
	margin-top: 150px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ac-contact-aside__person {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ac-contact-aside__person img {
	width: 68px;
	height: 68px;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--ac-cream), 0 0 0 3.5px var(--ac-gold);
}

.ac-contact-aside__name {
	margin: 0;
	font-family: var(--ac-font-display);
	font-size: 21px;
	color: var(--ac-ink);
}

.ac-contact-aside__role {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--ac-taupe);
}

.ac-contact-aside__quote {
	margin: 0;
	padding-left: 16px;
	border-left: 2px solid var(--ac-gold);
	font-family: var(--ac-font-display);
	font-size: 17px;
	line-height: 1.55;
	color: var(--ac-charcoal);
}

.ac-contact-aside__title {
	margin-top: 6px;
	font-family: var(--ac-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ac-gold);
}

.ac-contact-steps {
	list-style: none;
	margin: -8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ac-contact-steps li {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 14px;
}

.ac-contact-steps__num {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ac-ink);
	color: var(--ac-gold);
	font-family: var(--ac-font-display);
	font-size: 15px;
}

.ac-contact-steps strong {
	display: block;
	font-size: 15px;
	color: var(--ac-ink);
}

.ac-contact-steps p {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ac-slate);
}

.ac-contact-aside__direct,
.ac-contact-aside__free {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--ac-border-light);
	border-radius: 12px;
	background: #fff;
}

.ac-contact-aside__label {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--ac-taupe);
}

.ac-contact-aside__direct a {
	font-size: 16px;
	font-weight: 600;
	color: var(--ac-ink);
	overflow-wrap: anywhere;
}

.ac-contact-aside__direct a:hover,
.ac-contact-aside__free:hover {
	color: var(--ac-gold);
}

.ac-contact-aside__free {
	background: var(--ac-ink);
	border-color: var(--ac-ink);
	color: var(--ac-cream);
	font-size: 15px;
	font-weight: 600;
	transition: transform 0.15s ease;
}

.ac-contact-aside__free:hover {
	transform: translateY(-2px);
}

.ac-contact-aside a:focus-visible {
	outline: 2px solid var(--ac-gold);
	outline-offset: 3px;
}

@media (max-width: 1000px) {
	.ac-contact-main__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		max-width: 780px;
	}

	.ac-contact-main__form {
		order: -1;
	}

	.ac-contact-aside {
		position: static;
		margin-top: 0;
	}
}

@media (max-width: 782px) {
	.ac-contact-hero {
		padding: 48px var(--ac-gutter) 110px;
	}

	.ac-contact-hero__lede,
	.ac-contact-hero__lede p {
		font-size: 16px;
	}

	.ac-contact-main {
		padding-bottom: 64px;
	}

	.ac-contact-main__inner {
		margin-top: -72px;
	}
}

/* ============================================================
   AI ASSISTANT OFFLINE — ADDED 2026-09-25
   Every [data-ac-requires-chat] element (assistant preview on the homepage,
   "Chat with the AI assistant" button) stays hidden until the plugin has
   confirmed the assistant answers ("ac-chat-online" class on <html>, set by
   ac-chat-widget.js). Same rule as in the plugin, repeated here so these
   elements stay hidden even if the plugin is deactivated.
   ============================================================ */
html:not(.ac-chat-online) [data-ac-requires-chat] {
	display: none !important;
}
/* ============================================================
   PRIMARY MENU — ADDED 2026-09-26 (Antoine's request)
   1. Light colour for ALL menu links, including those of a WordPress menu
      assigned under Appearance → Menus (wp_nav_menu doesn't give them the
      .ac-nav__link class: they took the dark default link colour — the
      case on antoinecodex.com, "About" etc. barely visible).
   2. Every anchored section (#about, #services…) stops BELOW the sticky
      header instead of having its heading hidden behind it.
   ============================================================ */
.ac-nav__list a {
	color: #e7e2d6;
	font-size: 14px;
	transition: color 0.15s ease;
}

.ac-nav__list a:hover,
.ac-nav__list a:focus-visible {
	color: var(--ac-gold);
}

.ac-section[id] {
	scroll-margin-top: 88px;
}

@media (max-width: 782px) {
	.ac-section[id] {
		scroll-margin-top: 72px;
	}
}

/* ============================================================
   ESCAPE TO FRANCE — additions (1.0.0)
   Only existing --ac-* tokens.
   ============================================================ */

/* Hero without header video: no overlap with a media block above. */
.ac-hero.ac-hero--flush {
	margin-top: 0;
}

/* Header media: YouTube background, MP4 or image. */
.etf-hero-media {
	background-size: cover;
	background-position: center;
	max-height: calc(100vh - 88px);
	min-height: 320px;
}

@supports (aspect-ratio: 16 / 9) {
	.etf-hero-media {
		max-height: none;
	}
}

.etf-hero-media__yt {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.etf-hero-media__yt iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Slight overscan hides YouTube's edges and title bar. */
	width: 112%;
	height: 112%;
	transform: translate(-50%, -50%);
	border: 0;
}

@media (max-width: 782px) {
	.etf-hero-media {
		aspect-ratio: 4 / 3;
	}

	.etf-hero-media__yt iframe {
		width: 160%;
		height: 120%;
	}
}

/* EN / FR button: a little more presence. */
.ac-lang-switch {
	padding: 3px;
	border: 1px solid rgba(184, 147, 90, 0.35);
	border-radius: 999px;
	gap: 2px;
}

.ac-lang-switch__item {
	border-radius: 999px;
	padding: 4px 10px;
}

.ac-lang-switch__item.is-active {
	background: var(--ac-gold);
	color: var(--ac-ink);
	border-color: var(--ac-gold);
}

.ac-footer .ac-lang-switch__item {
	color: var(--ac-stone);
	text-decoration: underline;
	padding: 0;
}

/* ---------- Property cards / listing ---------- */

.etf-props {
	text-align: center;
}

.etf-props__title {
	font-family: var(--ac-font-display);
	font-weight: 500;
	font-size: clamp(26px, 3.2vw, 36px);
	color: var(--ac-ink);
	margin: 10px 0 32px;
}

.etf-props__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
	max-width: var(--ac-max);
	margin: 0 auto;
	text-align: left;
}

.etf-props__more {
	justify-content: center;
	margin-top: 36px;
}

.etf-card {
	background: #fff;
	border: 1px solid var(--ac-border-light);
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.etf-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(20, 22, 26, 0.10);
}

.etf-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--ac-cream-soft);
}

.etf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.etf-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ac-taupe);
	font-size: 14px;
}

.etf-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--ac-ink);
	color: var(--ac-cream);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
}

.etf-card__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.etf-card__location {
	color: var(--ac-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.etf-card__title {
	font-family: var(--ac-font-display);
	font-weight: 500;
	font-size: 21px;
	line-height: 1.25;
	margin: 0;
}

.etf-card__title a {
	color: var(--ac-ink);
	text-decoration: none;
}

.etf-card__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	color: var(--ac-slate);
	font-size: 14px;
}

.etf-card__price {
	margin-top: auto;
	padding-top: 10px;
	font-weight: 700;
	color: var(--ac-ink);
	font-size: 18px;
}

.etf-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 28px;
	background: #fff;
	border: 1px dashed var(--ac-stone);
	border-radius: 10px;
}

.etf-empty h2 {
	font-family: var(--ac-font-display);
	font-weight: 500;
	margin: 0 0 10px;
	color: var(--ac-ink);
}

.etf-pagination {
	margin-top: 32px;
}

.etf-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.etf-pagination .page-numbers {
	padding: 6px 12px;
	border: 1px solid var(--ac-border-light);
	border-radius: 6px;
	color: var(--ac-ink);
	text-decoration: none;
}

.etf-pagination .page-numbers.current {
	background: var(--ac-ink);
	color: var(--ac-cream);
}

/* ---------- Single property ---------- */

.etf-property__price {
	color: var(--ac-gold);
	font-size: 22px;
	font-weight: 700;
	margin: 8px 0 0;
}

.etf-property__layout {
	max-width: var(--ac-max);
	margin: 0 auto;
	padding: 56px var(--ac-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 48px;
	align-items: start;
}

.etf-property__photo {
	margin: 0 0 28px;
}

.etf-property__photo img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

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

.etf-property__aside {
	position: sticky;
	top: 110px;
	background: #fff;
	border: 1px solid var(--ac-border-light);
	border-radius: 10px;
	padding: 26px;
}

.etf-property__aside-title {
	font-family: var(--ac-font-display);
	font-weight: 500;
	font-size: 22px;
	margin: 0 0 14px;
	color: var(--ac-ink);
}

.etf-property__facts {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.etf-property__facts li {
	padding: 8px 0;
	border-bottom: 1px solid var(--ac-cream-soft);
}

.etf-property__agency,
.etf-property__ref,
.etf-property__note {
	font-size: 14px;
	color: var(--ac-slate);
}

.etf-property__cta {
	display: block;
	text-align: center;
	margin: 18px 0 12px;
}

.etf-property__back {
	max-width: var(--ac-max);
	margin: 0 auto;
	padding: 0 var(--ac-gutter) 56px;
}

.etf-property__back a {
	color: var(--ac-ink);
}

@media (max-width: 900px) {
	.etf-property__layout {
		grid-template-columns: 1fr;
		gap: 28px;
		padding-top: 32px;
	}

	.etf-property__aside {
		position: static;
	}
}

/* ---------- Header film (1.0.2): full screen, muted, sound toggle ---------- */

.etf-hero-media--film {
	aspect-ratio: auto;
	width: 100%;
	height: calc(100vh - 88px);
	height: calc(100svh - 88px);
	min-height: 420px;
	max-height: none;
	background-color: var(--ac-ink);
	background-size: cover;
	background-position: center;
}

@media (max-width: 782px) {
	.etf-hero-media--film {
		aspect-ratio: auto;
		height: calc(100vh - 72px);
		height: calc(100svh - 72px);
		min-height: 360px;
	}
}

.etf-hero-media--film .ac-video-hero__video {
	object-fit: cover;
	object-position: center;
}

.etf-sound {
	position: absolute;
	z-index: 3;
	right: 24px;
	bottom: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(247, 244, 238, 0.5);
	border-radius: 50%;
	background: rgba(20, 22, 26, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--ac-cream);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.etf-sound:hover,
.etf-sound:focus-visible {
	border-color: var(--ac-gold);
	color: var(--ac-gold);
}

.etf-sound:focus-visible {
	outline: 2px solid var(--ac-gold);
	outline-offset: 3px;
}

.etf-sound.is-on {
	background: var(--ac-gold);
	border-color: var(--ac-gold);
	color: var(--ac-ink);
}

.etf-sound__on,
.etf-sound.is-on .etf-sound__off {
	display: none;
}

.etf-sound.is-on .etf-sound__on {
	display: block;
}

@media (max-width: 782px) {
	.etf-sound {
		right: 14px;
		bottom: 28px;
		width: 42px;
		height: 42px;
	}
}

/* Low screens (phones in landscape): the film exactly fills what is left under the menu. */
@media (max-height: 520px) {
	.etf-hero-media--film {
		min-height: 0;
	}

	.etf-sound {
		bottom: 16px;
	}
}


/* ---------- 1.0.4: whole film visible on every screen + small sound button ---------- */

/* The section takes the film's own shape (1920×984), so nothing is cut off:
   full width, height follows. On screens too low for that, it stops at the
   space under the menu and the film is shown whole with dark side bands. */
.etf-hero-media--film,
.etf-hero-media.etf-hero-media--film {
	aspect-ratio: 1920 / 990;
	height: auto;
	min-height: 0;
	max-height: calc(100vh - 88px);
	max-height: calc(100svh - 88px);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media (max-width: 782px) {
	.etf-hero-media--film,
	.etf-hero-media.etf-hero-media--film {
		aspect-ratio: 1920 / 990;
		height: auto;
		min-height: 0;
		max-height: calc(100vh - 72px);
		max-height: calc(100svh - 72px);
	}
}

.etf-hero-media--film .ac-video-hero__video {
	object-fit: contain;
}

.etf-sound {
	width: 30px;
	height: 30px;
	right: 14px;
	bottom: 14px;
	border-width: 1px;
	background: rgba(20, 22, 26, 0.5);
}

.etf-sound svg {
	width: 14px;
	height: 14px;
}

@media (max-width: 782px) {
	.etf-sound {
		width: 28px;
		height: 28px;
		right: 10px;
		bottom: 10px;
	}

	.etf-sound svg {
		width: 13px;
		height: 13px;
	}
}

@media (max-height: 520px) {
	.etf-sound {
		bottom: 10px;
	}
}

/* 1.0.5 — header with 5 languages on mid-size screens (small laptops, iPad landscape):
   the menu stays on one line, the CTA button moves into the mobile menu width only. */
@media (min-width: 901px) and (max-width: 1240px) {
	.ac-header__cta--desktop-only {
		display: none;
	}

	.ac-brand__name {
		white-space: nowrap;
		font-size: 17px;
	}

	.ac-nav__list {
		gap: 20px;
	}

	.ac-nav__link {
		white-space: nowrap;
		font-size: 13.5px;
	}

	.ac-lang-switch__item {
		padding: 4px 8px;
	}
}


/* 1.0.6 — questionnaire card right under the hero (as on antoinecodex.fr) */
.etf-quiz-card {
	display: flex;
	justify-content: center;
	padding-top: 56px;
	padding-bottom: 8px;
}

.etf-quiz-card .ac-diag-promo {
	max-width: 760px;
}

@media (max-width: 782px) {
	.etf-quiz-card {
		padding-top: 40px;
	}
}


/* 1.0.7 — artistic tagline under the video: the place in a gold script,
   the activity in spaced small capitals between two fine gold lines. */
.etf-tagline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px;
}

.etf-tagline__place {
	font-family: 'Great Vibes', 'Fraunces', Georgia, cursive;
	font-weight: 400;
	font-size: clamp(46px, 7vw, 86px);
	line-height: 1.2;
	letter-spacing: 0.01em;
	/* Script capitals (R, F…) rise above the line box: extra room on top so the
	   gold gradient (clipped to this box) never cuts them; negative margin keeps the spacing. */
	padding: 0.32em 0.2em 0.12em;
	margin: -0.3em 0 -0.08em;
	background: linear-gradient(100deg, #a8824a 0%, #e9cf98 30%, #fff1cf 48%, #d8b678 66%, #a8824a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 10px rgba(184, 147, 90, 0.28));
}

.etf-tagline__sub {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--ac-font-body);
	font-size: clamp(12px, 1.25vw, 15px);
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: #e7d6b2;
	padding-left: 0.34em; /* keeps the spaced text optically centred */
}

.etf-tagline__sub::before,
.etf-tagline__sub::after {
	content: '';
	display: block;
	width: clamp(28px, 5vw, 64px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ac-gold));
}

.etf-tagline__sub::after {
	background: linear-gradient(90deg, var(--ac-gold), transparent);
}

@media (max-width: 600px) {
	.etf-tagline__sub {
		gap: 10px;
		letter-spacing: 0.22em;
		padding-left: 0.22em;
	}
}


/* 1.0.8 — brand: emblem in header/footer, full logo band on the homepage */
.etf-emblem-link {
	display: inline-flex;
	border-radius: 50%;
}

.etf-emblem {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px rgba(184, 147, 90, 0.85), 0 2px 10px rgba(0, 0, 0, 0.35);
	background: #fef9f1;
}

.etf-emblem--footer {
	width: 56px;
	height: 56px;
}

@media (max-width: 782px) {
	.etf-emblem {
		width: 42px;
		height: 42px;
	}
}

.etf-brand {
	background: #fef9f1;
	padding: 36px var(--ac-gutter) 28px;
	display: flex;
	justify-content: center;
}

.etf-brand__logo {
	display: block;
	width: 100%;
	max-width: 780px;
	height: auto;
	/* soft edges: the paper of the logo melts into the band */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-composite: intersect;
}

@media (max-width: 782px) {
	.etf-brand {
		padding: 20px 8px 14px;
	}
}

/* The questionnaire card follows the logo band: same light background, less top space. */
.etf-brand + .etf-quiz-card {
	background: #fef9f1;
	padding-top: 8px;
	padding-bottom: 48px;
}

/* The dark hero ends with a slanted edge: the logo band slides under it so the
   slant shows the logo's paper colour, not a different cream. */
.ac-hero + .etf-brand {
	margin-top: -36px;
	padding-top: 72px;
}

@media (max-width: 782px) {
	.ac-hero + .etf-brand {
		margin-top: -20px;
		padding-top: 40px;
	}
}


/* 1.0.9 — four services (search, documents, financing, move): 2 × 2 on large screens */
@media (min-width: 901px) {
	.ac-service-feature__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 1040px;
	}
}


/* 1.0.10 — new logo (more square): narrower so it is not too tall */
.etf-brand__logo {
	max-width: 620px;
}


/* ======================================================================
   1.1.0 — trust strip, property-type tiles, areas, 8-step guide, 6 services
   ====================================================================== */

.etf-section-title {
	font-family: var(--ac-font-display);
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.15;
	color: var(--ac-ink);
	margin: 10px 0 8px;
	text-align: center;
}

.etf-section-lede {
	max-width: 640px;
	margin: 0 auto 34px;
	text-align: center;
	color: var(--ac-slate);
	font-size: 16px;
}

/* Trust strip */
.etf-trust {
	background: #fef9f1;
	padding: 6px var(--ac-gutter) 18px;
}

.etf-trust__list {
	list-style: none;
	margin: 0 auto;
	padding: 18px 0 0;
	max-width: var(--ac-max);
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 28px;
	border-top: 1px solid rgba(184, 147, 90, 0.35);
}

.etf-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--ac-charcoal);
}

.etf-trust__mark {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	border: 1.5px solid var(--ac-gold);
	position: relative;
}

.etf-trust__mark::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid var(--ac-gold);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

@media (max-width: 900px) {
	.etf-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.etf-trust__list {
		grid-template-columns: 1fr;
	}
}

/* Property-type tiles */
.etf-types {
	text-align: center;
}

.etf-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	max-width: var(--ac-max);
	margin: 0 auto;
}

.etf-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	min-height: 150px;
	padding: 24px 26px;
	text-align: left;
	text-decoration: none;
	border-radius: 10px;
	border: 1px solid rgba(184, 147, 90, 0.28);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(184, 147, 90, 0.22), transparent 55%),
		linear-gradient(160deg, #1b2735 0%, var(--ac-ink) 100%);
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.etf-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(247, 244, 238, 0.06) 1px, transparent 1px);
	background-size: 22px 22px;
	pointer-events: none;
}

.etf-tile:hover,
.etf-tile:focus-visible {
	transform: translateY(-3px);
	border-color: var(--ac-gold);
	box-shadow: 0 14px 30px rgba(20, 22, 26, 0.22);
}

.etf-tile__label {
	position: relative;
	font-family: var(--ac-font-display);
	font-size: 23px;
	font-weight: 500;
	color: var(--ac-cream);
}

.etf-tile__go {
	position: relative;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ac-gold);
	padding-top: 10px;
	border-top: 1px solid rgba(184, 147, 90, 0.4);
	width: fit-content;
}

@media (max-width: 900px) {
	.etf-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.etf-tiles {
		grid-template-columns: 1fr;
	}

	.etf-tile {
		min-height: 110px;
	}
}

/* Services: six cards */
@media (min-width: 1101px) {
	.ac-service-feature__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		max-width: var(--ac-max);
	}
}

@media (min-width: 783px) and (max-width: 1100px) {
	.ac-service-feature__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Areas */
.etf-areas {
	text-align: center;
	background: #fef9f1;
}

.etf-areas__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	max-width: var(--ac-max);
	margin: 0 auto;
	text-align: left;
}

.etf-area {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 72px 22px 22px;
	background: #fff;
	border: 1px solid var(--ac-border-light);
	border-radius: 10px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.etf-area::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 54px;
	background: linear-gradient(100deg, #2f6f9a 0%, #5ea3c6 45%, #e9cf98 100%);
	opacity: 0.85;
}

.etf-area::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 40px;
	height: 18px;
	background: #fff;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.etf-area:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(20, 22, 26, 0.10);
}

.etf-area__name {
	font-family: var(--ac-font-display);
	font-weight: 500;
	font-size: 21px;
	line-height: 1.2;
	margin: 0;
	color: var(--ac-ink);
}

.etf-area__text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ac-slate);
	flex: 1;
}

.etf-area__link {
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9a7640;
	text-decoration: none;
}

.etf-area__link:hover {
	color: var(--ac-ink);
}

.etf-area--nice::before { background: linear-gradient(100deg, #1f5f8b 0%, #4f9ac0 50%, #e9cf98 100%); }
.etf-area--cannes::before { background: linear-gradient(100deg, #274b78 0%, #6aa8cf 55%, #f1d9a6 100%); }
.etf-area--antibes::before { background: linear-gradient(100deg, #2b6a7a 0%, #64aebb 50%, #e6c78f 100%); }
.etf-area--menton::before { background: linear-gradient(100deg, #3d7f6a 0%, #e8c25a 60%, #f3d98b 100%); }
.etf-area--villefranche::before { background: linear-gradient(100deg, #1e6f86 0%, #3fa3b3 50%, #f0a77a 100%); }
.etf-area--stpaul::before { background: linear-gradient(100deg, #7a6a4f 0%, #b99a6b 50%, #e9d5ad 100%); }
.etf-area--mougins::before { background: linear-gradient(100deg, #3f6b3a 0%, #7ea86a 50%, #e1cf98 100%); }
.etf-area--straphael::before { background: linear-gradient(100deg, #8b3a2a 0%, #c9673f 45%, #4f9ac0 100%); }

@media (max-width: 1100px) {
	.etf-areas__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.etf-areas__grid {
		grid-template-columns: 1fr;
	}
}

/* 8-step guide */
.etf-guide__grid .ac-step__title {
	font-size: 17px;
}

/* Property archive: filter chips */
.etf-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 auto 30px;
	max-width: var(--ac-max);
}

.etf-chip {
	padding: 8px 16px;
	border: 1px solid var(--ac-border-light);
	border-radius: 999px;
	background: #fff;
	color: var(--ac-ink);
	font-size: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.etf-chip:hover {
	border-color: var(--ac-gold);
}

.etf-chip.is-active {
	background: var(--ac-ink);
	border-color: var(--ac-ink);
	color: var(--ac-cream);
}

/* 1.1.1 — header with 6 menu items: the emblem never shrinks; on small laptops
   (901–1100 px) the emblem alone stands for the brand, so the menu keeps room. */
.ac-brand,
.etf-emblem-link,
.etf-emblem {
	flex-shrink: 0;
}

.ac-brand {
	margin-right: 18px;
}

@media (min-width: 901px) and (max-width: 1100px) {
	.ac-brand__name {
		display: none;
	}

	.ac-nav__list {
		gap: 16px;
	}
}


/* ============================================================
   1.2.0 — warm & light palette (Anton, 2026-11-06)
   Colours taken from the logo: paper #fef9f1, sun-washed sand,
   gold, and the logo's deep blue for text instead of near-black.
   ============================================================ */
:root {
	--etf-paper: #fef9f1;
	--etf-sand: #f6e4c8;
	--etf-sand-soft: #fbf0df;
	--etf-navy: #1d2d4f;
	--etf-navy-soft: #3d4a66;
	--etf-gold-deep: #9a7136;
	--etf-terracotta: #c4693d;
	/* the old near-black tokens become the logo's warm deep blue everywhere */
	--ac-ink: #1d2d4f;
	--ac-surface-dark: #2a3a5c;
	--ac-black: #17243f;
}

/* ---------- Header: light paper band ---------- */
.ac-header {
	background: rgba(254, 249, 241, 0.97);
	border-bottom: 1px solid rgba(184, 147, 90, 0.38);
	box-shadow: 0 4px 18px rgba(154, 113, 54, 0.10);
}
@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
	.ac-header {
		background: rgba(254, 249, 241, 0.9);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}
.ac-brand,
.ac-brand__name {
	color: var(--etf-navy);
}
.ac-brand__name:hover {
	color: var(--etf-gold-deep);
}
.ac-header .etf-emblem {
	box-shadow: 0 0 0 1.5px rgba(184, 147, 90, 0.85), 0 2px 8px rgba(154, 113, 54, 0.22);
}
.ac-nav__link,
.ac-nav__list a {
	color: var(--etf-navy);
	font-weight: 500;
}
.ac-nav__link:hover,
.ac-nav__list a:hover {
	color: var(--etf-gold-deep);
}
.ac-nav-toggle span {
	background: var(--etf-navy);
}
.ac-header .ac-lang-switch {
	border-color: rgba(184, 147, 90, 0.5);
	background: #fff;
}
.ac-header .ac-lang-switch__item {
	color: var(--etf-navy);
}
.ac-header a.ac-lang-switch__item:hover {
	color: var(--etf-gold-deep);
}
.ac-header .ac-lang-switch__item.is-active {
	background: var(--ac-gold);
	border-color: var(--ac-gold);
	color: #fff;
}
.ac-header span.ac-lang-switch__item.is-disabled,
.ac-header .ac-lang-switch__sep {
	color: var(--ac-taupe);
}
@media (max-width: 900px) {
	.ac-nav {
		background: var(--etf-paper);
		border-bottom: 1px solid rgba(184, 147, 90, 0.38);
		box-shadow: 0 14px 28px rgba(154, 113, 54, 0.14);
	}
}

/* ---------- Seam between video and hero ---------- */
.ac-video-hero__scroll {
	background: var(--etf-paper);
	box-shadow: 0 4px 14px rgba(154, 113, 54, 0.25);
}
.ac-video-hero__scroll-chevron {
	border-color: var(--etf-gold-deep);
}

/* ---------- Hero: sunlit sand ---------- */
.ac-hero {
	background: linear-gradient(170deg, var(--etf-paper) 0%, var(--etf-sand-soft) 45%, var(--etf-sand) 100%);
}
.ac-hero::before {
	background-image:
		radial-gradient(rgba(184, 147, 90, 0.12) 1px, transparent 1px);
	background-size: 24px 24px;
}
.ac-hero__kicker {
	color: var(--etf-terracotta);
}
.ac-hero__title {
	color: var(--etf-navy);
}
.ac-hero__lede {
	color: var(--etf-navy-soft);
}
.ac-hero .ac-btn--outline,
.ac-final-cta .ac-btn--outline {
	border-color: rgba(29, 45, 79, 0.55);
	color: var(--etf-navy);
}
.ac-hero .ac-btn--outline:hover,
.ac-final-cta .ac-btn--outline:hover {
	border-color: var(--etf-navy);
	background: rgba(29, 45, 79, 0.06);
}
.etf-tagline__place {
	background: linear-gradient(100deg, #8f6a35 0%, #a67a3d 50%, #8f6a35 100%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: none;
}
.etf-tagline__sub {
	color: var(--etf-navy);
}

/* ---------- Tops of the other pages ---------- */
.ac-page-header {
	background: linear-gradient(170deg, var(--etf-paper) 0%, var(--etf-sand) 100%);
	border-bottom: 1px solid rgba(184, 147, 90, 0.25);
}
.ac-page-header__title {
	color: var(--etf-navy);
}
.ac-page-header__lede {
	color: var(--etf-navy-soft);
}
.ac-page-header .ac-eyebrow,
.etf-property__price {
	color: var(--etf-gold-deep);
}
.ac-contact-hero {
	background: linear-gradient(165deg, var(--etf-paper) 0%, var(--etf-sand-soft) 50%, var(--etf-sand) 100%);
	color: var(--etf-navy);
}
.ac-contact-hero::before {
	background-image:
		radial-gradient(ellipse 720px 420px at 85% -10%, rgba(255, 205, 130, 0.4), transparent 70%),
		radial-gradient(rgba(184, 147, 90, 0.14) 1px, transparent 1px);
}
.ac-contact-hero__title,
.ac-contact-hero__points li {
	color: var(--etf-navy);
}
.ac-contact-hero__lede,
.ac-contact-hero__lede p {
	color: var(--etf-navy-soft);
}
.ac-contact-hero .ac-eyebrow {
	color: var(--etf-gold-deep);
}

/* ---------- Darker sections lower down: warm instead of near-black ---------- */
.ac-method {
	background: var(--etf-navy);
}
.ac-method__overlay {
	background: var(--etf-navy);
}
.ac-final-cta {
	background:
		radial-gradient(ellipse 640px 300px at 50% 0%, rgba(255, 205, 130, 0.38), transparent 70%),
		linear-gradient(170deg, var(--etf-sand-soft) 0%, var(--etf-sand) 100%);
}
.ac-final-cta__title {
	color: var(--etf-navy);
}
.ac-final-cta .ac-final-cta__lede {
	color: var(--etf-navy-soft);
}
.ac-footer {
	background: var(--etf-navy);
}

/* AI assistant launcher and chat header: logo blue with a gold edge, not black. */
.ac-chat-widget .ac-chat-widget__toggle {
	background: var(--etf-navy);
	box-shadow: 0 0 0 1.5px rgba(184, 147, 90, 0.7), 0 8px 24px rgba(29, 45, 79, 0.28);
}
.ac-chat-widget .ac-chat-widget__header {
	background: var(--etf-navy);
}

/* 1.2.3 — card grids are centred on wide screens (they were stuck to the left
   once the window is wider than the 1200px grid, e.g. "Questions you may be asking yourself"). */
.ac-grid {
	margin-left: auto;
	margin-right: auto;
}

/* 1.2.4 — buying guide: the small note under the steps was too faint on the navy. */
.ac-method .ac-method__footnote {
	color: #b9bccb;
}
