@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

/* ==========================================================================
   ll-tokens.css — design system v5 validé (28/10/2026)
   Palette adaptée de Paris Premium Van : papier, pierre, bordeaux (le rouge de Lille), or patiné.
   Titres Cormorant Garamond, texte Manrope. Maquette : 04-maquette/accueil.html.
   ========================================================================== */

:root {
	--ll5-paper: #FBF5EA;
	--ll5-stone: #F3E9D8;
	--ll5-stone-2: #E8D7BA;
	--ll5-blush: #F6ECE6;
	--ll5-white: #FFFFFF;
	--ll5-gold: #C9A24D;
	--ll5-gold-hover: #B48B36;
	--ll5-gold-ink: #7E5A1C;
	--ll5-gold-soft: #EDD49B;
	--ll5-patina: #E2C27A;
	--ll5-wine: #7A2338;
	--ll5-wine-2: #5E1A2B;
	--ll5-on-dark: #F7EEDF;
	--ll5-on-dark-muted: #DCC9B6;
	--ll5-ink: #2A0F18;
	--ll5-muted: #5C464C;
	--ll5-line: #E8D7BA;
	--ll5-scrim: 42, 15, 24;
	--ll5-serif: "Cormorant Garamond", Georgia, serif;
	--ll5-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--ll5-wrap: 1240px;
	--ll5-gut: clamp(18px, 4vw, 48px);
	--ll5-sec: clamp(72px, 8.5vw, 120px);

	/* Anciennes variables (ll-components.css, ll-pages.css) ramenées sur la palette v5 */
	--ll-black: var(--ll5-ink);
	--ll-black-2: var(--ll5-wine-2);
	--ll-gold: var(--ll5-gold);
	--ll-gold-light: var(--ll5-patina);
	--ll-gold-ink: var(--ll5-gold-ink);
	--ll-stone: var(--ll5-stone);
	--ll-white: var(--ll5-white);
	--ll-grey: var(--ll5-muted);
	--ll-line: var(--ll5-line);
	--ll-ground: var(--ll5-paper);
	--ll-ink: var(--ll5-ink);
	--ll-ink-soft: var(--ll5-muted);
	--ll-accent: var(--ll5-gold);
	--ll-font: var(--ll5-sans);

	--ll-step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
	--ll-step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
	--ll-step-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
	--ll-step-head: clamp(2rem, 1.4rem + 2vw, 3rem);
	--ll-step-display: clamp(2.75rem, 1.6rem + 4vw, 5.125rem);
	--ll-leading-display: 1.02;
	--ll-leading-head: 1.08;
	--ll-leading-body: 1.7;
	--ll-tracking-display: -0.005em;
	--ll-tracking-head: -0.005em;
	--ll-gutter: var(--ll5-gut);
	--ll-space-1: 8px;
	--ll-space-2: 16px;
	--ll-space-3: 24px;
	--ll-space-4: 40px;
	--ll-space-5: 64px;
	--ll-section: var(--ll5-sec);
	--ll-radius: 2px;
	--ll-ease: cubic-bezier(.2, .7, .2, 1);
	--ll-measure: 64ch;
}

/* Texte en Manrope partout (le thème force Lato), titres en Cormorant Garamond.
   Les polices d'icônes gardent leur famille. */
html body,
html body *:not(i):not(svg):not(svg *):not([class*="icon"]):not([class*="fa-"]):not(.fa):not(.fab):not(.fas):not(.far):not([class*="revicon"]):not([class*="dashicons"]) {
	font-family: var(--ll5-sans) !important;
}
/* :not(#ll5-x) donne le poids d'un identifiant : plus fort que la règle « tout en Manrope » ci-dessus */
html body :is(h1, h2, h3, h4, h5, h6, .ll5-serif):not(#ll5-x),
html body :is(h1, h2, h3, h4, h5, h6) *:not(#ll5-x) {
	font-family: var(--ll5-serif) !important;
	font-weight: 600 !important;
	letter-spacing: -0.005em !important;
	text-transform: none !important;
}

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--ll5-paper) !important;
	color: var(--ll5-ink);
	font-size: var(--ll-step-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ll5-gold-soft); color: var(--ll5-ink); }
:focus-visible { outline: 2px solid var(--ll5-gold); outline-offset: 3px; }

/* ---------- Boutons v5 : pleins, liseré intérieur, sans flèche ---------- */
.ll5-btn:not(#ll5-x) {
	display: inline-flex !important; align-items: center; justify-content: center;
	min-height: 56px !important; padding: 0 32px !important; margin: 0 !important; border: 0 !important; border-radius: 2px !important; cursor: pointer; line-height: 1 !important;
	font: 700 13px/1 var(--ll5-sans) !important; letter-spacing: .14em; text-transform: uppercase;
	text-decoration: none !important; white-space: nowrap;
	transition: background .25s, box-shadow .25s, transform .25s;
}
.ll5-btn:hover { transform: translateY(-2px); }
.ll5-btn--book, .ll5-btn--book:visited {
	background: var(--ll5-gold); color: var(--ll5-ink) !important;
	box-shadow: inset 0 0 0 4px var(--ll5-gold), inset 0 0 0 5px rgba(255,255,255,.55);
}
.ll5-btn--book:hover {
	background: var(--ll5-gold-hover);
	box-shadow: inset 0 0 0 4px var(--ll5-gold-hover), inset 0 0 0 5px rgba(255,255,255,.75), 0 10px 22px -12px rgba(126,90,28,.7);
}
.ll5-btn--quote, .ll5-btn--quote:visited {
	background: var(--ll5-white); color: var(--ll5-ink) !important;
	box-shadow: inset 0 0 0 1.5px var(--ll5-gold), inset 0 0 0 4px var(--ll5-white), inset 0 0 0 5px var(--ll5-gold-soft);
}
.ll5-btn--quote:hover {
	background: var(--ll5-stone);
	box-shadow: inset 0 0 0 1.5px var(--ll5-gold), inset 0 0 0 4px var(--ll5-stone), inset 0 0 0 5px var(--ll5-gold), 0 10px 22px -12px rgba(126,90,28,.5);
}
.ll5-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.ll5-link {
	font-weight: 700; font-size: 15px; color: var(--ll5-gold-ink) !important; text-decoration: none !important;
	border-bottom: 1.5px solid var(--ll5-gold-soft); padding-bottom: 2px; transition: border-color .2s;
}
a:hover .ll5-link, .ll5-link:hover { border-color: var(--ll5-gold); }

@media (max-width: 600px) {
	body { font-size: 18px; line-height: 1.75; }
	.ll5-btns { flex-direction: column; align-items: stretch; max-width: 380px; margin-left: auto; margin-right: auto; }
	.ll5-btn { width: 100%; font-size: 14px !important; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .ll5-btn, .ll5-link { transition: none; } .ll5-btn:hover { transform: none; } }