/* ==========================================================================
   ll-gold.css — Signature dorée, validée le 31/10/2026 sur l'accueil puis étendue à toutes les pages
   (?signature=off pour l'ancienne version ; tag git design-v5-palette-validee).
   Un or métallique (dégradé) remplace l'or uni à quelques endroits choisis ; aucun texte ni lien ne change.
   ========================================================================== */
:root {
	/* Or clair : sur photo et sur bordeaux */
	--ll5-gilt-light: linear-gradient(105deg, #C9A24D 0%, #EDD49B 28%, #FFF4D2 44%, #E2C27A 58%, #B48B36 82%, #E2C27A 100%);
	/* Or soutenu : filets et boutons sur fond clair */
	--ll5-gilt: linear-gradient(105deg, #8C6420 0%, #C9A24D 22%, #F1DC9C 42%, #C9A24D 60%, #9E7728 80%, #D4AF5E 100%);
	/* Or foncé : texte sur fond clair (lisible) */
	--ll5-gilt-ink: linear-gradient(105deg, #6E4D16 0%, #9C7426 35%, #BC9443 50%, #8A6420 70%, #6E4D16 100%);
	/* Fleur de lys entre deux filets */
	--ll5-lys-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 48'%3E%3Crect x='0' y='23' width='54' height='1.6'/%3E%3Crect x='106' y='23' width='54' height='1.6'/%3E%3Cg transform='translate(60 0)'%3E%3Cpath d='M20 1c-6 6-7.5 13-3.4 20.5H23.4C27.5 14 26 7 20 1z'/%3E%3Cpath d='M15.5 23.5C10 25 4 22.5 2.6 17 1.4 12.5 5.5 9.4 8.8 11.4c-2.6.4-3.4 3.2-1.6 5 2 2 5.6 1.6 7.6-.6.6 2.6.9 5.2.7 7.7z'/%3E%3Cpath d='M24.5 23.5C30 25 36 22.5 37.4 17c1.2-4.5-2.9-7.6-6.2-5.6 2.6.4 3.4 3.2 1.6 5-2 2-5.6 1.6-7.6-.6-.6 2.6-.9 5.2-.7 7.7z'/%3E%3Crect x='9' y='24.5' width='22' height='4' rx='1'/%3E%3Cpath d='M15 30.5h10l-2.4 6.5c2.2 1.4 4.2 3.8 4.6 9.5-3.4-2.8-5.4-3.3-7.2-3.4-1.8.1-3.8.6-7.2 3.4.4-5.7 2.4-8.1 4.6-9.5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 1. Fil d'or sous l'en-tête et au-dessus du pied de page */
.ll5-hdr { border-bottom: 0; }
.ll5-hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ll5-gilt); pointer-events: none; }
.ll5-foot { border-top: 3px solid; border-image: var(--ll5-gilt) 1; }

/* 2. Bouton « Réserver » en or métallique, reflet qui glisse au survol */
.ll5-btn--book:not(#ll5-x), .ll5-btn--book:not(#ll5-x):visited {
	position: relative;
	background: var(--ll5-gilt) 0 0 / 220% 100%;
	box-shadow: 0 8px 20px -14px rgba(126, 90, 28, .9);
	transition: background-position .6s ease, box-shadow .25s, transform .25s;
}
.ll5-btn--book::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255, 255, 255, .6); pointer-events: none; }
.ll5-btn--book:not(#ll5-x):hover { background-position: 100% 0; box-shadow: 0 14px 28px -14px rgba(126, 90, 28, .95); }

/* 3. Titre d'accueil et titre final : lettres dorées, ouverts par la fleur de lys entre deux filets */
.llh .hero .copy::before, .llh .final .wrap::before {
	content: ""; display: block; width: 150px; height: 45px; margin-bottom: 26px;
	background: var(--ll5-gilt-light);
	-webkit-mask: var(--ll5-lys-rule) center / contain no-repeat; mask: var(--ll5-lys-rule) center / contain no-repeat;
}
.llh .hero h1:not(#ll5-x):not(#ll5-y), .llh .final h2:not(#ll5-x):not(#ll5-y) {
	background: var(--ll5-gilt-light); -webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 1px rgba(42, 15, 24, .55)) drop-shadow(0 4px 18px rgba(42, 15, 24, .6));
}
.llh .hero h1:not(#ll5-x):not(#ll5-y) { background-image: linear-gradient(105deg, #E2C27A 0%, #F6E3A8 30%, #FFF0C4 42%, #E9CF8A 58%, #D4AF5E 100%); }
.llh .hero::after { background: linear-gradient(90deg, rgba(var(--ll5-scrim), .68) 0%, rgba(var(--ll5-scrim), .34) 52%, rgba(var(--ll5-scrim), 0) 100%); }

/* 4. Un trait d'or sous les grands titres de section */
.llh :is(.book .h2, .intro h2:first-child, .sec-head h2, .split h2, .tour-head h2, .reviews h3)::after {
	content: ""; display: block; width: 64px; height: 2px; margin-top: 22px; background: var(--ll5-gilt);
}
.llh .reviews h3::after { margin-left: auto; margin-right: auto; }
.llh .bg-wine .tour-head h2::after { background: var(--ll5-gilt-light); }

/* 5. Filets dorés métalliques : cartes services, cadre de la photo d'intro, légendes du tourisme */
.llh .card div { border-top: 3px solid; border-image: var(--ll5-gilt) 1; }
.llh .intro figure::before { border: 2px solid; border-image: var(--ll5-gilt) 1; }
.llh .bg-wine .mosaic figcaption { border-top: 2px solid; border-image: var(--ll5-gilt-light) 1; }

/* 6. Étoiles des avis et tuile « devis » en or */
.llh .stars { background: var(--ll5-gilt); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.llh .tile--quote { background: var(--ll5-gilt) 0 0 / 220% 100%; transition: background-position .6s ease, transform .25s, box-shadow .25s; }
.llh .tile--quote:hover { background: var(--ll5-gilt) 100% 0 / 220% 100%; }

/* Mobile : le titre d'accueil passe sur fond clair, en or foncé lisible ; ornements centrés */
@media (max-width: 600px) {
	.llh .hero .copy { border-top: 3px solid; border-image: var(--ll5-gilt) 1; }
	.llh .hero .copy::before, .llh .final .wrap::before { margin-left: auto; margin-right: auto; width: 120px; height: 36px; margin-bottom: 18px; }
	.llh .hero .copy::before { background: var(--ll5-gilt); }
	.llh .hero h1:not(#ll5-x):not(#ll5-y) { background: var(--ll5-gilt-ink); -webkit-background-clip: text; background-clip: text; filter: none; }
	.llh :is(.book .h2, .intro h2:first-child, .sec-head h2, .split h2, .tour-head h2)::after { margin-left: auto; margin-right: auto; }
}
/* 7. Logo : nom en deux lignes, « La Lilloise » en or, « DES VTC » en petites capitales espacées entre deux filets d'or ;
      un filet vertical le sépare de l'emblème, et un espace net le sépare du menu */
.ll5-brand { gap: 16px; margin-right: clamp(20px, 3vw, 48px); }
.ll5-brand img { filter: drop-shadow(0 3px 8px rgba(180, 139, 54, .28)); }
.ll5-brand b:not(#ll5-x) {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	padding: 4px 0 4px 18px; border-left: 1px solid; border-image: linear-gradient(180deg, transparent, #C9A24D 25%, #E9CF8A 50%, #C9A24D 75%, transparent) 1;
	font-size: 27px !important; letter-spacing: .01em;
	background: var(--ll5-gilt-ink); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.ll5-brand b em:not(#ll5-x) {
	display: flex; align-items: center; gap: 8px;
	font: 700 10.5px/1 var(--ll5-sans) !important; letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em;
	color: var(--ll5-wine); -webkit-text-fill-color: var(--ll5-wine);
}
.ll5-brand b em::before, .ll5-brand b em::after { content: ""; width: 18px; height: 1px; background: var(--ll5-gilt); }
.ll5-brand b em::after { margin-left: -.42em; }
@media (max-width: 1180px) { .ll5-brand b:not(#ll5-x) { display: none; } .ll5-brand { margin-right: 0; } }

/* 8. Menu ordinateur : soulignement d'or fin, chevrons dorés, sous-menus à filet d'or */
.ll5-menu > li > a:not(#ll5-x) { font-size: 14.5px; letter-spacing: .02em; transition: color .2s; }
.ll5-menu > li:hover > a:not(#ll5-x), .ll5-menu > li.current-menu-item > a:not(#ll5-x), .ll5-menu > li.current-menu-ancestor > a:not(#ll5-x) { color: var(--ll5-wine) !important; }
.ll5-menu > li > a::after { height: 1.5px; bottom: 2px; background: var(--ll5-gilt); transition: transform .3s ease; }
.ll5-menu > li.menu-item-has-children > a::before { border-color: var(--ll5-gold); }
.ll5-menu .sub-menu { border-top: 0; padding: 12px 0; background: var(--ll5-white); }
.ll5-menu .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ll5-gilt); }
.ll5-menu .sub-menu a:not(#ll5-x) { position: relative; padding: 10px 22px 10px 24px; transition: color .2s, background .2s, padding .2s; }
.ll5-menu .sub-menu a::before { content: ""; position: absolute; left: 12px; top: 50%; width: 0; height: 1.5px; background: var(--ll5-gilt); transition: width .25s; }
.ll5-menu .sub-menu a:not(#ll5-x):hover { padding-left: 34px; background: var(--ll5-paper); }
.ll5-menu .sub-menu a:hover::before { width: 14px; }
.ll5-lang { padding-left: 18px; border-left: 1px solid; border-image: linear-gradient(180deg, transparent, #C9A24D 30%, #C9A24D 70%, transparent) 1; }
.ll5-lang a[aria-current] { box-shadow: none; background: var(--ll5-gilt) 50% 100% / 100% 2px no-repeat; }

/* 9. Mobile : barre d'en-tête claire (logo bien visible) ; panneau du menu en bordeaux adouci, détails dorés */
.ll5-panel { background: linear-gradient(170deg, #93364E 0%, #84293F 45%, #7A2338 100%); color: var(--ll5-on-dark); }
.ll5-panel__top { position: relative; border-bottom: 0; }
.ll5-panel__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ll5-gilt-light); }
.ll5-close { color: var(--ll5-gold-soft); }
.ll5-pmenu > li { border-bottom-color: rgba(226, 194, 122, .22); }
.ll5-pmenu > li > a:not(#ll5-x) { color: #fff !important; }
.ll5-pmenu > li.current-menu-item > a:not(#ll5-x), .ll5-pmenu > li.current-menu-ancestor > a:not(#ll5-x) { color: var(--ll5-patina) !important; }
.ll5-pmenu .sub-menu a:not(#ll5-x) { color: var(--ll5-on-dark-muted) !important; }
.ll5-sub-toggle { color: var(--ll5-gold); }
.ll5-panel__langs a:not(#ll5-x) { color: var(--ll5-on-dark-muted) !important; }
.ll5-panel__langs a[aria-current]:not(#ll5-x) { color: var(--ll5-patina) !important; }

/* ==========================================================================
   Pages intérieures : même signature que l'accueil
   ========================================================================== */

/* 10. Bandeau titre : fleur de lys entre deux filets puis titre en lettres dorées (or foncé sur fond clair en mobile) */
html body .ll5-phero h1:not(#ll5-x)::before {
	content: ""; display: block; width: 150px; height: 45px; margin-bottom: 22px;
	background: var(--ll5-gilt-light);
	-webkit-mask: var(--ll5-lys-rule) center / contain no-repeat; mask: var(--ll5-lys-rule) center / contain no-repeat;
}
html body .ll5-phero h1:not(#ll5-x) {
	background: linear-gradient(105deg, #E2C27A 0%, #F6E3A8 30%, #FFF0C4 42%, #E9CF8A 58%, #D4AF5E 100%); -webkit-background-clip: text; background-clip: text;
	color: transparent !important; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 1px rgba(42, 15, 24, .55)) drop-shadow(0 4px 18px rgba(42, 15, 24, .6));
}
html body .ll5-phero .ll5-phero__sub:not(#ll5-x) { color: var(--ll5-patina) !important; }

/* 11. Trait d'or sous les titres de section du thème et des blocs réservation / devis */
.ll5-s .theme-component-header-subheader-header::after, .ll5-book__title::after, .ll5-quote__title::after {
	content: ""; display: block; width: 64px; height: 2px; margin: 20px auto 0; background: var(--ll5-gilt);
}
.ll5-s .theme-component-header-subheader.alignleft .theme-component-header-subheader-header::after, .ll5-book__title::after, .ll5-quote__title::after { margin-left: 0; }
.ll5-s.ll5-tone--wine .theme-component-header-subheader-header::after { background: var(--ll5-gilt-light); }

/* 12. Filets dorés métalliques (même règle que les cartes de l'accueil) */
:is(.ll5-book__frame, .ll5-form, .ll5-band) { border-top: 3px solid; border-image: var(--ll5-gilt) 1; }
.ll5-s :is(.theme-component-feature-item, .theme-component-process-list-item, .theme-component-call-to-action-box):not(#ll5-x) { border-top: 3px solid; border-image: var(--ll5-gilt) 1; }
.ll5-s--cards > .wpb_column > .vc_column-inner:not(#ll5-x) { border-top: 3px solid; border-image: var(--ll5-gilt) 1; }
@media (min-width: 900px) { .ll5-s--split .wpb_single_image::before { border: 2px solid; border-image: var(--ll5-gilt) 1; } }
.ll5-stars, .ll5-s .wprevpro_t1_DIV_2 .svg-wprsp-star { background: var(--ll5-gilt); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }

/* 13. Boutons « réserver » des contenus et du formulaire de devis : or métallique avec reflet, comme le bouton principal */
.ll5-s :is(.theme-component-button-style-1, .theme-component-call-to-action-button) a:not(#ll5-x),
.ll5-form .fluentform .ff-btn-submit:not(#ll5-x),
html body .elles-vtc-layout .btn-gold:not(#ll5-x) {
	background: var(--ll5-gilt) 0 0 / 220% 100% !important;
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0), inset 0 0 0 5px rgba(255, 255, 255, .55), 0 8px 20px -14px rgba(126, 90, 28, .9) !important;
	transition: background-position .6s ease, transform .25s !important;
}
.ll5-s :is(.theme-component-button-style-1, .theme-component-call-to-action-button) a:not(#ll5-x):hover,
.ll5-form .fluentform .ff-btn-submit:not(#ll5-x):hover,
html body .elles-vtc-layout .btn-gold:not(#ll5-x):hover { background-position: 100% 0 !important; }

@media (max-width: 600px) {
	html body .ll5-phero h1:not(#ll5-x)::before { margin: 0 auto 18px; width: 120px; height: 36px; background: var(--ll5-gilt); }
	html body .ll5-phero h1:not(#ll5-x) { background: var(--ll5-gilt-ink); -webkit-background-clip: text; background-clip: text; filter: none; }
	.ll5-phero__copy { border-top: 3px solid; border-image: var(--ll5-gilt) 1; }
	.ll5-s .theme-component-header-subheader.alignleft .theme-component-header-subheader-header::after, .ll5-book__title::after, .ll5-quote__title::after { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ll5-btn--book:not(#ll5-x), .llh .tile--quote { transition: none; }
}
