/* Topspot, pages du site (vitrine, layers, pages légales). Mêmes tokens que l'appli : design system v3, un seul thème clair. */
:root{
  --paper:#FFFFFF;--surface-soft:#F7F7F7;--hairline:#EBEBEB;--hairline-strong:#DDDDDD;
  --ink:#222222;--ink-muted:#6A6A6A;--ink-faint:#929292;
  --sun-500:#FFC61A;--sun-100:#FFF4D4;--sun-700:#815300;
  --cobalt-500:#2B54FF;--cobalt-100:#EAEFFF;--cobalt-700:#1B3BCB;
  --mint-500:#12C48B;--mint-100:#E3F7EF;--mint-700:#0A6E4E;
  --tomato-500:#FF4B2B;--tomato-100:#FFEEE9;--tomato-700:#B8301A;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.08);--shadow-md:0 6px 16px rgba(0,0,0,.12);
  --font-sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/26px var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--cobalt-700);text-underline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.ts-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ts-icon.sm{width:20px;height:20px}.ts-icon.xs{width:16px;height:16px}
.cat-sun{--c500:var(--sun-500);--c100:var(--sun-100);--c700:var(--sun-700)}
.cat-cobalt{--c500:var(--cobalt-500);--c100:var(--cobalt-100);--c700:var(--cobalt-700)}
.cat-mint{--c500:var(--mint-500);--c100:var(--mint-100);--c700:var(--mint-700)}
.cat-tomato{--c500:var(--tomato-500);--c100:var(--tomato-100);--c700:var(--tomato-700)}
.cat-ink{--c100:var(--surface-soft);--c700:var(--ink)}

/* boutons */
.ts-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--radius-md);border:1px solid transparent;font:600 16px/20px var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.ts-btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ts-btn-primary{background:var(--ink);color:var(--paper)}
.ts-btn-primary:hover{background:#000}
.ts-btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.ts-btn-secondary:hover{background:var(--surface-soft)}
.ts-btn-sm{height:40px;padding:0 16px;font-size:14px;border-radius:var(--radius-pill)}

/* en-tête et pied */
.site-top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--hairline);padding-top:env(safe-area-inset-top,0px)}
.site-top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{display:block;height:28px;width:auto}
.site-foot{border-top:1px solid var(--hairline);margin-top:64px;padding:32px 0 calc(32px + env(safe-area-inset-bottom,0px));background:var(--surface-soft)}
.site-foot .wrap{display:grid;gap:12px}
.brand-sm{margin:0;display:flex;align-items:center;gap:12px}.brand-sm img{display:block;height:22px;width:auto}.brand-sm span{color:var(--ink-muted);font-size:14px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-foot nav a{color:var(--ink);text-decoration:none;font-size:14px}
.site-foot nav a:hover{text-decoration:underline}
.fine{font-size:13px;line-height:20px;color:var(--ink-muted);margin:12px 0 0}

/* vitrine */
.hero{padding:48px 0 32px}
.hero-grid{display:grid;gap:32px;align-items:center}
@media (min-width:860px){.hero-grid{grid-template-columns:1.05fr 1fr;gap:56px}.hero{padding:80px 0 56px}}
.eyebrow{font:600 14px/20px var(--font-sans);color:var(--ink-muted);margin:0 0 12px;letter-spacing:.02em}
.hero h1{font:700 clamp(40px,7vw,64px)/1.04 var(--font-sans);letter-spacing:-.035em}
.lead{font-size:18px;line-height:28px;color:var(--ink-muted);margin:16px 0 0;max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-map{width:100%;max-width:520px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 12px 32px rgba(0,0,0,.12))}
.hm-bg{fill:#F3F4F1}.hm-river{fill:none;stroke:#D6E4F5;stroke-width:22;stroke-linecap:round}
.hm-road{fill:none;stroke:#fff;stroke-width:6}.hm-park{fill:#E3F1E3}
.hp-disc{fill:var(--c500);stroke:#fff;stroke-width:3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.hp-ic{fill:none;stroke:#222;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hp.cat-cobalt .hp-ic{stroke:#fff}
.band{padding:48px 0}
.band.soft{background:var(--surface-soft)}
.band h2{font:700 32px/38px var(--font-sans)}
.sec-lead{color:var(--ink-muted);margin:8px 0 24px;max-width:40em}
.lgrid{display:grid;gap:12px}
@media (min-width:640px){.lgrid{grid-template-columns:1fr 1fr}}
.lcard{display:flex;gap:16px;padding:20px;border:1px solid var(--hairline);border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);text-decoration:none;transition:box-shadow .15s,border-color .15s}
.lcard:hover{box-shadow:var(--shadow-md);border-color:var(--hairline-strong)}
.tile{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--c100);color:var(--c700);flex:none}
.tile.big{width:64px;height:64px;border-radius:var(--radius-lg)}
.tile.big .ts-icon{width:32px;height:32px}
.lc-body{display:grid;gap:4px;min-width:0}
.lc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lc-top strong{font-size:18px;line-height:24px}
.pill{font:600 12px/16px var(--font-sans);padding:3px 10px;border-radius:var(--radius-pill);background:var(--c100);color:var(--c700)}
.lc-desc{color:var(--ink-muted);font-size:15px;line-height:22px}
.lc-meta{font-size:13px;color:var(--ink-faint);font-weight:500}
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:24px}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{display:grid;gap:8px;align-content:start}
.steps strong{font-size:18px;margin-top:8px}
.steps li>span:last-child{color:var(--ink-muted)}
.cities{display:flex;flex-wrap:wrap;gap:8px}
.city{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--hairline);color:var(--ink-faint);font:500 14px/20px var(--font-sans)}
.city small{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.city.on{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-weight:600}
.closing{display:grid;justify-items:start;gap:20px}

/* pages layer */
.lhead{padding:32px 0 32px;background:linear-gradient(var(--c100),var(--paper))}
.crumbs{font-size:14px;color:var(--ink-muted);margin:0 0 20px}
.crumbs a{color:var(--ink-muted)}
.lh-row{display:flex;gap:20px;align-items:flex-start}
.lh-row>div{min-width:0}
.lhead h1{font:700 clamp(32px,5vw,44px)/1.1 var(--font-sans)}
.listing{display:grid;gap:8px}
.argroup h2{font:700 22px/28px var(--font-sans);margin:36px 0 8px;display:flex;align-items:baseline;gap:10px}
.argroup h2 span{font-size:14px;font-weight:500;color:var(--ink-faint)}
.spots{list-style:none;margin:0;padding:0;display:grid}
@media (min-width:760px){.spots{grid-template-columns:1fr 1fr;column-gap:32px}}
.spots li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--hairline);min-width:0}
.spots a{color:var(--ink);text-decoration:none}.spots a:hover{text-decoration:underline}
.spots .meta{display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--ink-muted)}
.spots .meta .ts-icon{margin-top:2px}
.spots .d{font-size:14px;line-height:21px;margin-top:4px}

/* pages de texte */
.prose{max-width:720px;padding-top:40px}
.prose h1{font:700 clamp(32px,5vw,44px)/1.1 var(--font-sans);margin-bottom:16px}
.prose h2{font:700 20px/28px var(--font-sans);margin:32px 0 6px}
.prose p{margin:8px 0;max-width:65ch}
.form{display:grid;gap:16px;margin-top:24px;max-width:520px}
.form label{display:grid;gap:6px;font-weight:600;font-size:15px}
.form .opt{font-weight:400;color:var(--ink-muted)}
.form input,.form select,.form textarea{font:400 16px/24px var(--font-sans);padding:12px 14px;border:1px solid var(--hairline-strong);border-radius:var(--radius-md);background:var(--paper);color:var(--ink);width:100%}
.form button{justify-self:start}
.hp-field{position:absolute;left:-9999px}
.band.soft .tile{background:var(--paper);border:1px solid var(--hairline)}
@media (max-width:560px){.lh-row{flex-direction:column;gap:16px}}