/* Retraite Maurice — pages villes (gabarits/ville.html). Chargé après accueil.css, vente.css et region.css. */

/* en-tête : la vraie photo en grand, texte posé dessus */
.vl-hero{padding:104px 24px 0}
.vl-hero-in{position:relative;max-width:1400px;margin:0 auto;min-height:min(82vh,760px);border-radius:44px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;box-shadow:0 50px 100px -50px rgba(15,58,107,.7)}
.vl-hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;animation:vlkb 32s ease-in-out infinite alternate}
@keyframes vlkb{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,1%)}}
.vl-hero-in::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,37,71,0) 30%,rgba(10,37,71,.35) 55%,rgba(10,37,71,.82) 100%),linear-gradient(90deg,rgba(10,37,71,.45),rgba(10,37,71,0) 60%)}
.vl-hero-txt{max-width:760px;padding:0 56px 58px;color:#fff}
.vl-hero .crumbs{color:rgba(255,255,255,.82);margin-bottom:18px}
.vl-hero .crumbs a,.vl-hero .crumbs span{color:rgba(255,255,255,.85)}
.vl-hero .crumbs a:hover{color:#fff}
.vl-hero .crumbs a+a::before,.vl-hero .crumbs span::before{color:rgba(255,255,255,.5)}
.vl-hero h1{font-size:clamp(38px,5vw,72px);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:#fff;text-shadow:0 2px 30px rgba(10,37,71,.35)}
.vl-hero h1 .serif{color:#bff3f1}
.vl-hero .lead{margin-top:18px;font-size:18px;line-height:1.65;color:#eef8fd;max-width:640px}
.vl-hero .ctas{margin-top:26px}
.btn-glass{border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.26)}
.vl-chips{position:absolute;right:32px;top:32px;display:grid;gap:10px}
.vl-chip{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 40px -24px rgba(10,37,71,.7)}
.vl-chip .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff}
.vl-chip strong{display:block;font-size:17px;color:var(--navy-d);line-height:1.1}
.vl-chip small{font-size:12.5px;color:#5d7894}

/* crédit d'une photo, discret, dans un coin */
.vl-credit{position:absolute;right:14px;bottom:12px;z-index:3;max-width:70%;padding:4px 10px;border-radius:999px;background:rgba(10,37,71,.45);backdrop-filter:blur(6px);font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.75;transition:opacity .25s}
.vl-credit:hover{opacity:1}
.rg-photo .vl-credit{bottom:auto;top:12px}

/* quartiers */
.vl-quartiers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.vl-q{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:#fff;border:1px solid rgba(15,58,107,.08);box-shadow:0 24px 50px -40px rgba(15,58,107,.7);transition:transform .35s}
.vl-q:hover{transform:translateY(-5px)}
.vl-q-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.vl-q-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.vl-q:hover .vl-q-img img{transform:scale(1.06)}
.vl-q-txt{padding:22px 24px 24px}
.vl-tag{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--ice);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.vl-q h3{margin:10px 0 6px;font-size:21px;letter-spacing:-.01em;color:var(--navy-d)}
.vl-q p{font-size:15px;line-height:1.65;color:#4d6b88}
.vl-q:not(.vl-q-photo){background:linear-gradient(150deg,#f4fafe,#fff 60%)}

/* au quotidien */
.vl-quot-g{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;margin-top:28px}
.vl-quot-liste{display:grid;gap:12px}
.vl-quot-liste article{display:flex;gap:16px;padding:20px 22px;border-radius:22px;background:#fff;border:1px solid rgba(15,58,107,.08);transition:border-color .3s,transform .3s}
.vl-quot-liste article:hover{border-color:var(--lagoon);transform:translateX(4px)}
.vl-quot-liste .rg-ic{flex:0 0 46px;margin:0}
.vl-quot-liste h3{font-size:17px;color:var(--navy-d);margin-bottom:4px}
.vl-quot-liste p{font-size:14.8px;line-height:1.65;color:#4d6b88}
.vl-quot-liste strong{color:var(--navy-d)}
.vl-quot-photo{position:sticky;top:110px;aspect-ratio:4/5}

/* loyers, fond lagon */
.vl-loyers{margin-top:80px;padding:84px 0}
.vl-loyers-g{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.vl-loyers-p{font-size:17px;line-height:1.65;color:#e2f4fb;max-width:460px}
.vl-barres{display:grid;gap:14px;padding:28px;border-radius:28px;background:rgba(255,255,255,.95);box-shadow:0 40px 80px -40px rgba(10,37,71,.8)}
.vl-barre-t{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.vl-barre-t b{font-size:16px;color:var(--navy-d)}
.vl-barre-t span{font-size:15px;font-weight:600;color:var(--blue)}
.vl-barre small{font-size:13px;color:#6d86a0}
.vl-piste{position:relative;height:12px;margin:8px 0 6px;border-radius:999px;background:#e8f1f8;overflow:hidden}
.vl-piste i{position:absolute;top:0;bottom:0;left:var(--de);width:calc(var(--a) - var(--de));min-width:12px;border-radius:999px;background:linear-gradient(90deg,var(--lagoon),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--d))}
.vl-barres.in .vl-piste i{transform:none}
.vl-achat{margin-top:6px;padding:14px 16px;border-radius:16px;background:#fff7e8;font-size:14.5px;line-height:1.6;color:#5b4a2e}
.vl-achat b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#c2560f;margin-bottom:2px}
.vl-note{font-size:12.5px;line-height:1.55;color:#7d93aa}

/* budget du mois, poste par poste */
.vl-mois-g{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.vl-mois-g .vt-head p{margin-bottom:24px}
.vl-mois{padding:10px 30px 26px;border-radius:28px;background:#fff;border:1px solid rgba(15,58,107,.08);box-shadow:0 30px 60px -44px rgba(15,58,107,.7)}
.vl-mois-l{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px dashed rgba(15,58,107,.14);font-size:16px;color:#41607f}
.vl-mois-l b{color:var(--navy-d);white-space:nowrap}
.vl-mois-t{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 16px;margin-top:18px;padding:18px 22px;border-radius:20px;background:linear-gradient(120deg,#0a2547,#0f3a6b 60%,#1c7db3);color:#fff}
.vl-mois-t span{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#bff3f1}
.vl-mois-t b{grid-row:span 2;font-size:clamp(30px,3.4vw,40px);letter-spacing:-.03em}
.vl-mois-t small{font-size:14px;color:#dff3fb}

/* trajets */
.vl-trajets-g{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.vl-mini{position:relative;top:0;margin-top:26px}
.vl-trajets li{transition:border-color .3s,transform .3s,box-shadow .3s}
.vl-trajets li.on{border-color:#f48a1f;transform:translateX(6px);box-shadow:0 14px 30px -22px rgba(15,58,107,.6)}
.vl-trajets{list-style:none;display:grid;gap:12px;padding:0;margin:0}
.vl-trajets li{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:center;padding:16px 20px;border-radius:20px;background:#fff;border:1px solid rgba(15,58,107,.08)}
.vl-min{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--navy-d)}
.vl-trajets b{font-size:15.5px;color:var(--navy-d)}
.vl-trajets small{display:block;font-size:13.5px;line-height:1.5;color:#6d86a0}
.vl-trajets .vl-piste{height:8px;margin:7px 0 5px}
.vl-trajets .vl-piste i{left:0;width:var(--w);transition-delay:.4s}
.vl-trajets li.in .vl-piste i{transform:none}

/* galerie */
.vl-galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:28px}
.vl-galerie figure{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/3}
.vl-galerie img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.vl-galerie figure:hover img{transform:scale(1.05)}
.vl-galerie figcaption{position:absolute;left:14px;bottom:14px;padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.9);font-size:13px;font-weight:600;color:var(--navy-d)}
.vl-galerie .vl-credit{bottom:auto;top:12px}

/* crédits en bas de page */
.vl-credits{padding-top:40px;padding-bottom:10px}
.vl-credits p{font-size:12.5px;line-height:1.7;color:#7d93aa}
.vl-credits a{color:#5d7894;text-decoration:underline;text-underline-offset:2px}

@media(max-width:980px){
  .vl-loyers-g,.vl-trajets-g,.vl-quot-g,.vl-mois-g{grid-template-columns:1fr;gap:28px}
  .vl-quot-photo{position:relative;top:0;aspect-ratio:16/11}
  .vl-chips{top:20px;right:20px}
}
@media(max-width:700px){
  .vl-hero{padding:88px 12px 0}
  .vl-hero-in{min-height:640px;border-radius:30px}
  .vl-hero-txt{padding:0 22px 48px}
  .vl-hero .lead{font-size:16px}
  .vl-chips{left:16px;right:auto;top:16px;grid-auto-flow:column}
  .vl-chip{padding:8px 12px 8px 8px}.vl-chip .ic{width:32px;height:32px}.vl-chip strong{font-size:15px}.vl-chip small{font-size:11px}
  .vl-quartiers{grid-template-columns:1fr}
  .vl-barres{padding:20px}
  .vl-mois{padding:6px 18px 18px}.vl-mois-l{font-size:15px}
  .vl-trajets li{grid-template-columns:76px 1fr;gap:12px;padding:14px 16px}.vl-min{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.vl-piste i{transform:none}}

@media(max-width:900px){.vl-trajets-g{grid-template-columns:1fr;gap:28px}.vl-mini{max-width:560px;margin-inline:auto}}