/*
 * Pages villes — éléments communs (lot 64).
 * Registre éditorial : titres à gauche, intitulés en capitales espacées
 * précédés d'un filet, zones de couleur pleine. Ni cadre, ni pastille,
 * ni bordure latérale. Chaque ville compose ensuite sa propre page dans
 * creation-site-internet-<ville>.css.
 */
.vl{--vl-acc:var(--blue);--vl-ink:var(--ink);--vl-bg:var(--light);color:var(--ink);font-family:var(--fb);overflow-x:clip}
.vl *{box-sizing:border-box}
.vl-w{max-width:var(--maxw,1220px);margin:0 auto;padding:0 24px}
.vl-z{padding:96px 0}
.vl h1,.vl h2,.vl h3{font-family:var(--fd);color:inherit;text-align:left;letter-spacing:-.02em;margin:0}
.vl h1{font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.02;font-weight:800}
.vl h2{font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.08;font-weight:750}
.vl h3{font-size:1.18rem;line-height:1.25;font-weight:700}
.vl p{margin:0;line-height:1.62}
.vl a{color:inherit}
.vl-lbl{display:flex;align-items:center;gap:14px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:0 0 22px!important;color:currentColor;opacity:.78}
.vl-lbl::before{content:"";width:34px;height:2px;background:currentColor;flex:none}
.vl-lead{font-size:clamp(1.06rem,1.5vw,1.24rem);max-width:62ch;margin-top:26px!important}

/* Fil d'Ariane */
.vl-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:.84rem;margin-bottom:46px;opacity:.75}
.vl-crumb a{text-decoration:none}
.vl-crumb a:hover,.vl-crumb a:focus-visible{text-decoration:underline}

/* Boutons */
.vl-btn{display:inline-flex;align-items:center;gap:10px;background:var(--vl-acc);color:#fff!important;font-weight:700;text-decoration:none;padding:16px 26px;border-radius:6px;transition:transform .2s ease,background .2s ease}
.vl-btn:hover,.vl-btn:focus-visible{transform:translateY(-2px)}
.vl-btn-2{background:transparent;color:inherit!important;box-shadow:inset 0 0 0 2px currentColor}
.vl a:focus-visible,.vl summary:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* En bref — résumé factuel, citable tel quel (moteurs et assistants IA) */
.vl-bref{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:56px 0 0}
.vl-bref>div{background:rgba(20,22,52,.05);padding:22px 22px 24px}
.vl-bref dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:8px}
.vl-bref dd{margin:0;font-size:.98rem;line-height:1.5}

/* FAQ — séparation par aplats, pas par filets */
.vl-faq{display:grid;gap:6px;margin-top:40px}
.vl-q{background:rgba(20,22,52,.045)}
.vl-q summary{cursor:pointer;list-style:none;padding:22px 64px 22px 26px;font-weight:700;font-size:1.06rem;position:relative}
.vl-q summary::-webkit-details-marker{display:none}
.vl-q summary::after{content:"+";position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:1.6rem;font-weight:400;line-height:1}
.vl-q[open]{background:var(--vl-acc);color:#fff}
.vl-q[open] summary::after{content:"–"}
.vl-a{padding:0 26px 26px}
.vl-a p{max-width:70ch}

/* Contact */
.vl-contact{background:var(--ink);color:#fff}
.vl-contact-in{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end}
.vl-contact-p{margin-top:20px!important;max-width:52ch;color:rgba(255,255,255,.82)}
.vl-contact-act{display:grid;gap:14px;justify-items:start}
.vl-contact .vl-btn{background:var(--yellow);color:var(--ink)!important}
.vl-contact .vl-btn-2{background:transparent;color:#fff!important}
.vl-direct{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px!important;font-weight:600}
.vl-direct a{text-decoration:none}
.vl-direct a:hover,.vl-direct a:focus-visible{text-decoration:underline}
.vl-adr{font-size:.86rem;color:rgba(255,255,255,.66)}

/* Villes voisines */
.vl-voisins{background:var(--light-2);padding:72px 0}
.vl-vl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 40px}
.vl-vl a{font-family:var(--fd);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:750;text-decoration:none;letter-spacing:-.02em}
.vl-vl a::after{content:" →";font-weight:400;opacity:.45}
.vl-vl a:hover,.vl-vl a:focus-visible{color:var(--blue)}
.vl-vl-autres{margin-top:22px!important;opacity:.78}

/* Liens de poursuite dans le texte */
.vl-suite{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px!important;font-weight:700}
.vl-suite a{text-decoration:none;box-shadow:inset 0 -2px 0 currentColor}
.vl-suite a:hover,.vl-suite a:focus-visible{box-shadow:inset 0 -6px 0 var(--yellow)}

/* Apparition sobre */
@media (prefers-reduced-motion:no-preference){
	.vl-in{animation:vlIn .7s ease both}
	@keyframes vlIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

@media (max-width:900px){
	.vl-z{padding:68px 0}
	.vl-bref{grid-template-columns:1fr 1fr}
	.vl-contact-in{grid-template-columns:1fr;gap:34px}
}
@media (max-width:520px){
	.vl-w{padding:0 16px}
	.vl-bref{grid-template-columns:1fr}
	.vl-q summary{padding:20px 54px 20px 18px}
	.vl-a{padding:0 18px 22px}
	.vl-btn{width:100%;justify-content:center}
}