/* ============================================================
   Pages locales, une par ville.
   Mêmes jetons que la page d'accueil, mise en page de lecture
   élargie avec cartes d'offre et blocs d'appel.
   ============================================================ */
:root{
  --canvas:#0A0E16;
  --canvas-2:#0C1220;
  --panel:#121826;
  --panel-2:#161E30;
  --accent:#6FD4E6;
  --accent-hover:#9AE6F2;
  --accent-muted:#2A4E5C;
  --border-strong:#5A8798;
  --hairline:#1E2836;
  --text-primary:#E9EEF6;
  --text-secondary:#93A2B8;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'Public Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display);font-stretch:semi-expanded;font-weight:700;line-height:1.06;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:var(--accent);text-decoration:none;transition:color .3s var(--ease-soft)}
a:hover{color:var(--accent-hover)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#06202B;
  padding:12px 18px;font-family:var(--mono);font-size:13px}
.skip:focus{left:8px;top:8px}

.env{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 45% at 22% 12%,rgba(38,86,110,.24) 0%,rgba(10,14,22,0) 70%),
  radial-gradient(50% 40% at 84% 78%,rgba(28,60,84,.2) 0%,rgba(10,14,22,0) 70%),
  var(--canvas)}

/* ---------- barre du haut ---------- */
.nav{position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 26px;background:rgba(10,14,22,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand-mark{width:42px;height:auto;flex:none}
.brand b{font-family:var(--display);font-stretch:semi-expanded;font-weight:700;font-size:13px;letter-spacing:.14em;display:block}
.brand em{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--text-secondary);font-style:normal;display:block;margin-top:2px}
.nav-cta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:#05202B;padding:12px 18px;border-radius:3px;white-space:nowrap}
.nav-cta:hover{background:var(--accent-hover);color:#05202B}
@media (max-width:520px){
  .nav{padding:12px 16px}
  .brand-mark{width:34px}
  .brand b{font-size:11px;letter-spacing:.08em;white-space:nowrap}
  .brand em{display:none}
  .nav-cta{font-size:10px;padding:11px 13px}
}

/* ---------- corps ---------- */
main{position:relative;z-index:2;max-width:880px;margin:0 auto;
  padding:clamp(34px,5vw,58px) 26px clamp(70px,9vw,120px)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:34px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb li::after{content:"/";margin-left:8px;color:var(--accent-muted)}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--text-secondary)}
.crumb a:hover{color:var(--accent)}
.crumb [aria-current]{color:var(--text-primary)}

.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::after{content:"";height:1px;flex:1;max-width:120px;background:linear-gradient(90deg,var(--accent-muted),transparent)}
h1{font-size:clamp(30px,5.2vw,52px);margin-bottom:20px}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--text-primary);max-width:64ch;margin-bottom:14px}
main p{color:var(--text-secondary);max-width:70ch}
p+p{margin-top:14px}
main strong{color:var(--text-primary);font-weight:500}

section{margin-top:clamp(44px,5.5vw,68px)}
h2{font-size:clamp(21px,2.6vw,28px);margin-bottom:18px;padding-top:28px;border-top:1px solid var(--hairline)}
h3{font-size:17px;margin-bottom:8px;letter-spacing:-.01em}
ul{margin:16px 0 0;padding-left:20px;color:var(--text-secondary);max-width:70ch}
li{margin-bottom:10px}
li::marker{color:var(--accent-muted)}

/* ---------- repères chiffrés ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:3px;margin-top:26px;overflow:hidden}
.facts div{background:var(--panel);padding:20px 18px}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.facts dd{margin:0;font-family:var(--display);font-stretch:semi-expanded;font-weight:700;font-size:19px;color:var(--text-primary);line-height:1.25}

/* ---------- cartes d'offre ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin-top:26px}
.card{border:1px solid var(--hairline);background:var(--panel);border-radius:3px;padding:24px 22px;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.card:hover{border-color:var(--accent-muted);background:var(--panel-2)}
.card .price{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}
.card p{font-size:15.5px;line-height:1.65}

/* ---------- déroulé en étapes ---------- */
.steps{margin-top:26px;border-left:1px solid var(--hairline);padding-left:26px}
.steps .step{position:relative;padding-bottom:26px}
.steps .step:last-child{padding-bottom:0}
.steps .step::before{content:"";position:absolute;left:-31px;top:7px;width:9px;height:9px;
  background:var(--accent);border-radius:1px}
.steps .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--text-secondary);display:block;margin-bottom:5px}
.steps p{font-size:15.5px;margin-top:6px}

/* ---------- questions ---------- */
.qa{margin-top:26px;border-top:1px solid var(--hairline)}
.qa details{border-bottom:1px solid var(--hairline)}
.qa summary{cursor:pointer;list-style:none;padding:20px 0;font-family:var(--display);
  font-stretch:semi-expanded;font-weight:600;font-size:16.5px;color:var(--text-primary);
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--accent);flex:none;font-size:19px;line-height:1}
.qa details[open] summary::after{content:"–"}
.qa details p{padding-bottom:20px;font-size:15.5px}

/* ---------- appel à l'action ---------- */
.cta{margin-top:clamp(48px,6vw,76px);border:1px solid var(--accent-muted);background:var(--panel);
  border-radius:3px;padding:clamp(28px,4vw,42px)}
.cta h2{border-top:none;padding-top:0;margin-bottom:12px}
.cta p{margin-bottom:24px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 22px;border-radius:3px;display:inline-flex;align-items:center;gap:9px;min-height:48px}
.btn-primary{background:var(--accent);color:#05202B}
.btn-primary:hover{background:var(--accent-hover);color:#05202B}
.btn-ghost{border:1px solid var(--border-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- autres villes ---------- */
.nearby{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.nearby a{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;border:1px solid var(--hairline);
  background:var(--panel);padding:11px 16px;border-radius:3px;color:var(--text-secondary);min-height:44px;
  display:inline-flex;align-items:center}
.nearby a:hover{border-color:var(--accent-muted);color:var(--accent)}

/* ---------- pied de page ---------- */
footer{position:relative;z-index:2;border-top:1px solid var(--hairline);background:var(--canvas-2);
  padding:38px 26px;text-align:center}
footer .small{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--text-secondary);line-height:2.1}
footer a{color:var(--text-secondary)}
footer a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}