:root{
  --paper:#EDF0EA; --surface:#FFF; --sunken:#F5F7F3;
  --ink:#16211C; --soft:#5D6E64; --dim:#9AA79F; --line:#D5DCD3;
  --accent:#2C6B4C; --accent-soft:#EAF3EE; --link:#2A6F97; --mark:#9C8340;
  --font-display:"Barlow Condensed",sans-serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  --font-data:"IBM Plex Mono",monospace;
  --radius:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:15px;line-height:1.5}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.dsp{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.09em}

.top{position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:18px;min-height:60px;padding:8px 20px}
.logo{font-family:var(--font-display);font-weight:600;font-size:19px;
  white-space:nowrap;justify-self:start}
.find-groupe{display:flex;align-items:center;gap:10px;justify-self:center}
.find-label{font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;font-size:11px;
  color:var(--soft);white-space:nowrap;cursor:pointer}
.find{position:relative;width:340px;max-width:44vw}
.find input{width:100%;height:36px;padding:0 12px;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--radius);font-size:14px}
.find input::placeholder{color:var(--dim)}
.find input:focus{border-color:var(--accent);background:var(--surface);outline:none}
.hits{position:absolute;top:40px;left:0;right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 26px rgba(0,0,0,.13);max-height:300px;overflow:auto;
  display:none;z-index:30}
.hits.on{display:block}
.hits a{display:flex;gap:10px;align-items:center;padding:8px 12px;
  border-bottom:1px solid var(--line)}
.hits a:last-child{border-bottom:none}
.hits a:hover{background:var(--sunken)}
.tag{font-size:10px;padding:2px 6px;border-radius:var(--radius);
  background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.hits .nm{flex:1;font-size:14px}
.hits .cd{font-family:var(--font-data);font-size:11px;color:var(--dim)}
.vide{padding:8px 12px;font-size:13px;color:var(--dim)}

.terr{background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:var(--h-top,61px);z-index:19}
.terr .wrap{padding:24px 20px;transition:padding .16s ease}
.terr h1{transition:font-size .16s ease}
.terr.compact .wrap{padding-top:5px;padding-bottom:6px}
.terr.compact h1{font-size:20px}
.terr.compact .kind{font-size:10px}
.terr.compact .sub{margin-top:1px;font-size:12px}
.terr .kind{font-size:11px;color:var(--soft)}
.terr h1{font-family:var(--font-display);font-size:34px;line-height:1.05;
  text-transform:none;letter-spacing:.01em;font-weight:600}
.terr .sub{font-size:13px;color:var(--soft);margin-top:4px}

.nav{background:var(--paper);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;gap:2px;padding:0 20px;overflow-x:auto;
  scrollbar-width:thin}
.nav-item{display:inline-block;white-space:nowrap;padding:11px 15px;
  font-size:14px;color:var(--soft);border-bottom:2px solid transparent;
  transition:color .12s,border-color .12s,background .12s}
a.nav-item:hover{color:var(--accent);background:var(--accent-soft)}
.nav-item.actif{color:var(--accent);border-bottom-color:var(--accent);
  font-weight:600}
.nav-item.vide{color:var(--dim);cursor:default}

main .wrap{padding:26px 20px 48px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:8px}
.card .id{font-family:var(--font-data);font-size:10px;color:var(--dim)}
.card h2{font-size:15px;font-weight:600;line-height:1.25}
.card .v{font-family:var(--font-data);font-size:28px;color:var(--accent);line-height:1}
.card .u{font-size:12px;color:var(--soft)}
.card footer{margin-top:auto;border-top:1px solid var(--line);padding-top:8px;
  display:flex;gap:6px;flex-wrap:wrap;font-size:10px;color:var(--soft)}
.pill{border:1px solid var(--line);border-radius:var(--radius);padding:1px 6px}

.carte-bloc{margin-top:22px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px}
.carte-bloc .dsp{font-family:var(--font-body);font-size:15px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);display:block;
  margin-bottom:12px}
svg.carte{display:block;width:100%;height:auto;max-height:440px}
svg.carte a{cursor:pointer}
svg.carte .c-voisine{fill:var(--sunken);stroke:var(--line);stroke-width:.8;
  transition:fill .12s,stroke .12s}
svg.carte a:hover .c-voisine,svg.carte a:focus .c-voisine{
  fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4}
svg.carte a:focus{outline:none}
svg.carte .c-ici{fill:var(--accent);stroke:var(--accent);stroke-width:1.2;
  fill-opacity:.85}
.carte-legende{font-size:14px;color:var(--soft);margin-top:10px;line-height:1.45}
.carte-bulle{position:fixed;z-index:50;display:none;pointer-events:none;
  background:var(--ink);color:var(--surface);font-size:12px;line-height:1.3;
  padding:4px 9px;border-radius:var(--radius);white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.22)}
.carte-bulle.on{display:block}
.carte-bulle b{display:block;font-size:13px}
.carte-bulle i{font-style:normal;color:var(--accent-soft)}

.carte-grille{display:grid;grid-template-columns:172px 1fr;gap:16px;align-items:start}
.carte-menu{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);
  border-radius:var(--radius);padding:6px;background:var(--sunken)}
.carte-menu .opt{display:flex;align-items:center;gap:8px;padding:7px 9px;
  font-size:13px;border-radius:var(--radius);cursor:pointer}
.carte-menu .opt:hover{background:var(--surface)}
.carte-menu .opt input{accent-color:var(--accent);margin:0}
.carte-menu .opt:has(input:checked){background:var(--accent);color:var(--surface);
  font-weight:600}

.carte-echelle{display:flex;align-items:center;gap:3px;margin-top:10px;
  font-size:11px;color:var(--soft)}
.carte-echelle .pal{width:26px;height:11px;border:1px solid var(--line);
  background:var(--accent)}
.carte-echelle .unite{margin-left:auto;font-family:var(--font-data);
  font-size:18px;font-weight:500;color:var(--ink)}
.carte-echelle .bas{margin-right:4px}
.carte-echelle .haut{margin-left:4px}

svg.carte .n0,.carte-echelle .n0{fill-opacity:.14;opacity:.14}
svg.carte .n1,.carte-echelle .n1{fill-opacity:.32;opacity:.32}
svg.carte .n2,.carte-echelle .n2{fill-opacity:.52;opacity:.52}
svg.carte .n3,.carte-echelle .n3{fill-opacity:.74;opacity:.74}
svg.carte .n4,.carte-echelle .n4{fill-opacity:1;opacity:1}
svg.carte path.n0,svg.carte path.n1,svg.carte path.n2,
svg.carte path.n3,svg.carte path.n4{fill:var(--accent);stroke:var(--surface);
  stroke-width:.8}
svg.carte path.nd{fill:var(--sunken);stroke:var(--line)}
svg.carte a:hover path[class*="n"],svg.carte a:focus path[class*="n"]{
  stroke:var(--ink);stroke-width:2;fill-opacity:1}

.ratt{margin-top:30px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px}
.ratt > .dsp{font-family:var(--font-body);font-size:15px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);display:block;
  margin-bottom:14px}
.spine{position:relative;padding-left:30px}
.spine::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;
  background:repeating-linear-gradient(to bottom,var(--mark) 0 3px,transparent 3px 7px)}
.rung{position:relative;padding:10px 0;display:flex;flex-wrap:wrap;gap:10px;
  align-items:center}
.rung::before{content:"";position:absolute;left:-21px;top:50%;width:13px;height:1px;
  background:var(--mark)}
.rung::after{content:"";position:absolute;left:-24px;top:calc(50% - 3px);
  width:7px;height:7px;border-radius:50%;background:var(--surface);
  border:1px solid var(--mark)}
.rung.ici::after{background:var(--accent);border-color:var(--accent)}
.rung .lvl{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;font-size:11px;color:var(--soft);width:96px;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line);border-radius:var(--radius);padding:4px 10px;
  font-size:13px;display:inline-block}
a.chip{transition:background .12s,color .12s,border-color .12s}
a.chip:hover,a.chip:focus-visible{background:var(--accent);color:var(--surface);
  border-color:var(--accent);font-weight:600}
.chip.now{background:var(--accent-soft);border-color:var(--accent);
  color:var(--accent);font-weight:600}
.note{margin-top:14px;border-left:2px solid var(--mark);padding:8px 12px;
  font-size:12px;color:var(--soft);background:var(--sunken);border-radius:var(--radius)}

footer.site{border-top:1px solid var(--line);background:var(--surface);
  padding:18px 0;font-size:11px;color:var(--soft)}
footer.site a{color:var(--link)}

@media(max-width:820px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .carte-grille{grid-template-columns:1fr}
  .carte-menu{flex-direction:row;flex-wrap:wrap}
  .carte-menu .opt{font-size:12px;padding:6px 8px}
}
@media(max-width:640px){
  .nav .wrap{padding:0 12px}
  .nav-item{padding:10px 11px;font-size:13px}
  .top .wrap{grid-template-columns:1fr;gap:8px;justify-items:stretch}
  .logo{justify-self:center}
  .find-groupe{justify-self:stretch}
  .find{width:auto;max-width:none;flex:1}
  .top-fin{display:none}
}
@media(max-width:560px){
  .cards{grid-template-columns:1fr}
  .terr h1{font-size:27px}
  .rung .lvl{width:100%}
}