/* Pages SEO par ville / service (21/10/2026), fabriquées par tools/pages_villes.py. Habillage aligné sur l'accueil. */
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("../fonts/host-grotesk.woff2") format("woff2"); font-weight: 300 600; font-display: swap; }
:root { --marine: #1E2E48; --nuit: #131D2E; --brun: #6B4E3A; --creme: #FBF8F2; --papier: #F5F0E7; --sable: #D9C6A8; --or: #C8A36A; --ligne: rgba(107,78,58,.22); }
* { box-sizing: border-box; }
body.pv { margin: 0; background: var(--creme); color: var(--marine); font: 400 17px/1.65 "Host Grotesk", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.pv a { color: inherit; }
.pv img, .pv video { max-width: 100%; display: block; }

/* En-tête marine */
.pv-tete { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--marine); color: var(--creme); position: sticky; top: 0; z-index: 5; }
.pv-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 19px/1 "Playfair Display", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sable) !important; }
.pv-logo img { width: 38px; height: 38px; }

/* Accroche */
.pv-hero { background: linear-gradient(180deg, var(--marine) 0%, var(--nuit) 100%); color: var(--creme); padding: 28px 16px 64px; }
.pv-hero__in { max-width: 820px; margin: 0 auto; }
.pv-fil { font-size: 13px; color: rgba(251,248,242,.6); margin-bottom: 20px; }
.pv-fil a { text-decoration: none; }
.pv h1 { font: 500 clamp(34px, 6.4vw, 58px)/1.1 "Playfair Display", serif; margin: 0 0 18px; color: var(--creme); }
.pv-intro { font-size: 18px; margin: 0 0 28px; color: rgba(251,248,242,.85); max-width: 640px; }

/* Boutons */
.pv-btn { display: inline-block; background: var(--marine); color: var(--creme) !important; text-decoration: none; padding: 15px 22px; font: 500 13.5px/1.35 "Host Grotesk", sans-serif; letter-spacing: .14em; text-transform: uppercase; transition: background .2s, color .2s; }
.pv-btn--or { background: var(--or); color: var(--nuit) !important; }
.pv-btn--or:hover { background: var(--sable); }
.pv-btn--clair { background: transparent; border: 1px solid rgba(251,248,242,.45); }
.pv-btn--petit { padding: 9px 14px; font-size: 11.5px; }

main { max-width: 820px; margin: 0 auto; padding: 0 16px 56px; }
.pv h2 { font: 500 clamp(24px, 3.8vw, 32px)/1.22 "Playfair Display", serif; margin: 52px 0 14px; }
.pv h3 { font: 500 22px/1.2 "Playfair Display", serif; margin: 0 0 6px; }
.pv-liste { padding-left: 1.2em; }
.pv-liste li { margin: 7px 0; }
.pv-liste li::marker { color: var(--or); }

/* Film */
.pv-film { margin-top: -40px; position: relative; z-index: 2; }
.pv-film__cadre { position: relative; background: var(--nuit); box-shadow: 0 24px 60px rgba(19,29,46,.28); aspect-ratio: 16 / 9; }
.pv-film video { width: 100%; height: 100%; object-fit: cover; }
.pv-film__son { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: rgba(19,29,46,.72); color: var(--creme); border: 1px solid rgba(251,248,242,.4); padding: 11px 18px; font: 500 12px/1 "Host Grotesk", sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); white-space: nowrap; }
.pv-film__legende { font-size: 13px; color: var(--brun); margin: 10px 0 0; letter-spacing: .04em; }

/* Avant / après */
.pv-ba__cadre { position: relative; max-width: 480px; aspect-ratio: 4 / 5; overflow: hidden; touch-action: pan-y; }
.pv-ba__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pv-ba__avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pv-ba__trait { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--creme); box-shadow: 0 0 8px rgba(0,0,0,.35); pointer-events: none; }
.pv-ba__trait::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--creme); color: var(--marine); display: grid; place-items: center; font-size: 18px; }
.pv-ba__etiq { position: absolute; top: 12px; background: rgba(19,29,46,.7); color: var(--creme); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; pointer-events: none; }
.pv-ba__etiq--g { left: 12px; } .pv-ba__etiq--d { right: 12px; }
.pv-ba__cadre input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.pv-ba__aide { font-size: 13px; color: var(--brun); margin-top: 8px; }

/* Offres */
.pv-offres__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .pv-offres__liste { grid-template-columns: repeat(3, 1fr); } }
.pv-offre { background: var(--papier); border: 1px solid var(--ligne); padding: 22px 20px; }
.pv-offre--une { background: var(--marine); color: var(--creme); border-color: var(--or); }
.pv-offre__prix { font: 500 30px/1 "Playfair Display", serif; margin: 6px 0 14px; }
.pv-offre__prix span { display: block; font: 400 13px/1.4 "Host Grotesk", sans-serif; opacity: .7; margin-top: 6px; }
.pv-offre ul { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.pv-offre li { padding: 6px 0; border-top: 1px solid var(--ligne); }
.pv-offre--une li { border-color: rgba(251,248,242,.18); }
.pv-offres__note { font-size: 14px; color: var(--brun); margin-top: 12px; }

/* FAQ, fin */
.pv-faq details { border-top: 1px solid var(--ligne); padding: 15px 0; }
.pv-faq details:last-child { border-bottom: 1px solid var(--ligne); }
.pv-faq summary { cursor: pointer; font-weight: 500; }
.pv-faq p { margin: 10px 0 0; }
.pv-final { margin-top: 48px; background: var(--marine); color: var(--creme); padding: 32px 22px; text-align: center; }
.pv-final p { font: italic 500 clamp(22px, 3.6vw, 28px)/1.3 "Playfair Display", serif; margin: 0 0 18px; }
.pv-autres { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pv-autres a { display: inline-block; border: 1px solid var(--ligne); padding: 9px 14px; text-decoration: none; font-size: 15px; }

/* Pied */
.pv-pied { background: var(--nuit); color: rgba(251,248,242,.7); text-align: center; padding: 40px 16px; font-size: 14px; }
.pv-pied img { margin: 0 auto 14px; width: 72px; height: 72px; }
.pv-pied p { margin: 6px 0; }
.pv-pied__slogan { font: 400 22px/1.3 "Playfair Display", serif; color: var(--creme); margin-bottom: 14px !important; }

/* Blog */
.pv-date { font-size: 13px; color: rgba(251,248,242,.6); margin: 0; }
.pv-article { padding-top: 8px; }
.pv-article p, .pv-article li { max-width: 68ch; }
.pv-article ul, .pv-article ol { padding-left: 1.2em; }
.pv-article li { margin: 8px 0; }
.pv-article li::marker { color: var(--or); }
.pv-sources { font-size: 13px; color: var(--brun); margin-top: 32px; }
.pv-cartes { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 16px; }
.pv-carte a { display: block; text-decoration: none; background: var(--papier); border: 1px solid var(--ligne); padding: 24px 22px; transition: border-color .2s; }
.pv-carte a:hover { border-color: var(--or); }
.pv-carte h2 { margin: 0 0 10px !important; }
.pv-carte p { margin: 0 0 12px; }
.pv-carte span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--brun); }

/* 25/10/2026 — Direction lumineuse (comme l'accueil) : en-tête blanc cassé, accroche azur clair, pied sable ; bleu Azur Film en accent */
:root { --azur-vif: #2F6FB3; --azur-clair: #EAF3FB; --azur-ciel: #D6E8F7; --sable-clair: #F4EDE1; }
body.pv { background: #FBF9F4; }
.pv-tete { background: rgba(251, 249, 244, .95); color: var(--marine); box-shadow: 0 1px 0 rgba(30, 46, 72, .12); gap: 10px; }
.pv-logo { color: var(--marine) !important; }
.pv-tete__liens { display: flex; align-items: center; gap: 8px; }
.pv-tete .pv-btn--clair { background: transparent; border-color: rgba(30, 46, 72, .45); color: var(--marine) !important; }
.pv-tete .pv-btn--clair:hover { background: var(--marine); color: #fff !important; }
.pv-connexion { color: #fff !important; background: var(--azur-vif); border: 1px solid var(--azur-vif); }
.pv-connexion:hover { background: var(--marine); border-color: var(--marine); }
@media (max-width: 400px) { .pv-logo span { display: none; } }
.pv-hero { background: linear-gradient(180deg, var(--azur-clair) 0%, var(--azur-ciel) 100%); color: var(--marine); }
.pv-fil, .pv-date { color: rgba(30, 46, 72, .66); }
.pv h1 { color: var(--marine); }
.pv-intro { color: rgba(30, 46, 72, .85); }
.pv-btn { background: var(--azur-vif); color: #fff !important; }
.pv-btn:hover { background: var(--marine); }
.pv-offre--une { background: var(--azur-clair); color: var(--marine); border-color: var(--azur-vif); }
.pv-offre--une li { border-color: rgba(30, 46, 72, .14); }
.pv-final { background: linear-gradient(120deg, var(--azur-ciel) 0%, var(--sable-clair) 100%); color: var(--marine); }
.pv-final .pv-btn--clair { border-color: rgba(30, 46, 72, .45); background: transparent; color: var(--marine) !important; }
.pv-pied { background: linear-gradient(180deg, var(--sable-clair) 0%, #EFE5D4 100%); color: rgba(30, 46, 72, .75); }
.pv-pied__slogan { color: var(--marine); }
.pv-pied__slogan em { color: var(--azur-vif); }