/* ============ DRAILLE design system — thème clair ============ */
:root{
  --bg:#F5F6F8;
  --surface:rgba(255,255,255,.94);
  --surface-solid:#FFFFFF;
  --raised:#F2F4F7;
  --raised-2:#E7EBF0;
  --text:#18212B;
  --text-2:#46525F;
  --text-3:#7A8592;
  --line:rgba(18,28,40,.09);
  --line-strong:rgba(18,28,40,.16);
  --accent:#EA5A0C;
  --accent-soft:rgba(234,90,12,.09);
  --accent-line:rgba(234,90,12,.5);
  --danger:#CE4141;
  --c-gravel:#18A24E;
  --c-bitume:#FFC800;
  --c-pave:#8D6E63;
  --c-inconnu:#E5484D;
  --r-lg:18px; --r-md:12px; --r-sm:9px;
  --shadow:0 12px 36px rgba(24,33,43,.16);
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden;}
body{font-family:var(--font-ui); background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;}
button{font-family:var(--font-ui);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

#map{position:absolute; inset:0; background:#E9E7DF;}
.leaflet-container{font-family:var(--font-ui); background:#E9E7DF;}
.leaflet-control-attribution{background:rgba(255,255,255,.75)!important; color:#8a94a0!important; font-size:10px!important; padding:2px 8px!important; border-radius:8px 0 0 0;}
.leaflet-control-attribution a{color:#66707c!important;}
.leaflet-control-zoom{border:none!important; box-shadow:var(--shadow)!important; border-radius:12px!important; overflow:hidden;}
.leaflet-control-zoom a{background:var(--surface-solid)!important; color:var(--text-2)!important; border:none!important; border-bottom:1px solid var(--line)!important; width:38px!important; height:38px!important; line-height:38px!important; font-size:17px!important;}
.leaflet-control-zoom a:hover{background:var(--raised)!important; color:var(--text)!important;}
.leaflet-control-scale-line{background:rgba(255,255,255,.7)!important; color:#5c6774!important; border-color:#9aa4b0!important; font-size:10px!important;}
.leaflet-bottom.leaflet-right .leaflet-control-zoom{margin:0 16px 16px 0!important;}
.leaflet-bottom.leaflet-right .leaflet-control-scale{margin:0 16px 10px 0!important;}

/* ============ panneau gauche ============ */
#panel{
  position:absolute; top:0; left:0; bottom:0; z-index:1000;
  width:362px; display:flex; flex-direction:column;
  background:var(--surface); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-right:1px solid var(--line); box-shadow:18px 0 50px rgba(24,33,43,.10);
}
#sheetgrab{display:none;}
#brandrow{display:flex; align-items:center; gap:12px; padding:16px 22px 12px; flex-shrink:0;}
.mark{width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#FF8A3D,#F0540A); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(234,90,12,.35); flex-shrink:0;}
.mark svg{width:22px; height:22px;}
#brandrow .name{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:1.6px; line-height:1;}
#brandrow .name em, #hero h1 em{font-style:normal; color:var(--accent);}
#brandrow .base{font-size:11px; color:var(--text-3); margin-top:4px; letter-spacing:.2px;}

#panelscroll{flex:1; overflow-y:auto; padding:2px 22px 18px; scrollbar-width:thin; scrollbar-color:#C9D0D8 transparent;}
#panelscroll::-webkit-scrollbar{width:5px;}
#panelscroll::-webkit-scrollbar-thumb{background:#C9D0D8; border-radius:3px;}

.step{padding:13px 0 15px; border-top:1px solid var(--line);}
.step:first-child{border-top:none;}
.step-head{display:flex; align-items:baseline; gap:9px; margin-bottom:12px;}
.step-num{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--accent); letter-spacing:1px;}
.step-title{font-size:13px; font-weight:600; letter-spacing:.2px;}

/* départ */
.searchrow{display:flex; gap:8px;}
.searchwrap{position:relative; flex:1;}
.searchwrap .sicon{position:absolute; left:11px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none;}
#search{width:100%; padding:11px 12px 11px 34px; background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:var(--r-md); color:var(--text); font-size:13.5px; outline:none; transition:border-color .15s, box-shadow .15s;}
#search:hover{border-color:rgba(18,28,40,.28);}
#search:focus{border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft);}
#search::placeholder{color:var(--text-3);}
#locateBtn{width:42px; border-radius:var(--r-md); background:var(--surface-solid); border:1px solid var(--line-strong); cursor:pointer; font-size:16px; color:var(--text); transition:all .15s; flex-shrink:0;}
#locateBtn:hover{border-color:var(--accent-line); background:var(--accent-soft);}
#searchResults{position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:var(--r-md); overflow:hidden; display:none; z-index:1400; box-shadow:var(--shadow);}
#searchResults div{padding:10px 13px; font-size:12.5px; cursor:pointer; color:var(--text-2); border-bottom:1px solid var(--line);}
#searchResults div:last-child{border-bottom:none;}
#searchResults div:hover{background:var(--accent-soft); color:var(--text);}
.fieldhint{font-size:11.5px; color:var(--text-3); margin-top:9px; line-height:1.5;}
.fieldhint b{color:var(--text-2); font-weight:500;}

/* profils */
.profiles{display:flex; flex-direction:column; gap:8px;}
.prof{display:flex; align-items:center; gap:11px; padding:9px 11px; background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:var(--r-md); cursor:pointer; transition:all .15s; text-align:left; width:100%;}
.prof:hover{border-color:rgba(18,28,40,.28);}
.prof.sel{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent);}
.prof .ico{width:33px; height:33px; border-radius:9px; background:var(--raised); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; transition:background .15s;}
.prof.sel .ico{background:rgba(234,90,12,.15);}
.prof .t{flex:1; min-width:0;}
.prof .t b{font-size:13.5px; display:block; font-weight:600; letter-spacing:.1px;}
.prof .t span{font-size:11.5px; color:var(--text-3); display:block; margin-top:1px;}
.prof.sel .t span{color:var(--text-2);}
.prof .check{width:18px; height:18px; border-radius:50%; border:2px solid #B9C1CA; flex-shrink:0; transition:all .15s; position:relative;}
.prof.sel .check{border-color:var(--accent); background:var(--accent);}
.prof.sel .check::after{content:''; position:absolute; inset:4px; border-radius:50%; background:#fff;}

/* distance */
.distvalrow{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px;}
#distVal{font-family:var(--font-display); font-size:27px; font-weight:700; letter-spacing:-.5px;}
#distVal small{font-size:14px; color:var(--text-3); font-weight:500; letter-spacing:0; margin-left:2px;}
.distminmax{font-size:11px; color:var(--text-3);}
.sliderwrap{position:relative;}
#disttrack{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:6px; border-radius:3px; background:var(--raised-2);}
#distfill{position:absolute; left:0; top:50%; transform:translateY(-50%); height:6px; border-radius:3px; background:linear-gradient(90deg,#FF8A3D,#F0540A); pointer-events:none; width:31%;}
input[type=range]{width:100%; -webkit-appearance:none; appearance:none; height:26px; background:transparent; cursor:pointer; position:relative; z-index:1; display:block;}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:3px; background:transparent;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:none; margin-top:-7px; box-shadow:0 1px 5px rgba(24,33,43,.35), 0 0 0 4px rgba(234,90,12,.22); transition:box-shadow .15s;}
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 5px rgba(24,33,43,.35), 0 0 0 7px rgba(234,90,12,.28);}
input[type=range]::-moz-range-track{height:6px; border-radius:3px; background:transparent;}
input[type=range]::-moz-range-progress{height:6px; border-radius:3px; background:transparent;}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:none; box-shadow:0 1px 5px rgba(24,33,43,.35), 0 0 0 4px rgba(234,90,12,.22);}

/* direction */
.compass{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; max-width:200px; margin:0 auto;}
.dirbtn{height:38px; background:var(--surface-solid); color:var(--text-2); border:1px solid var(--line-strong); border-radius:var(--r-md); cursor:pointer; font-size:12.5px; font-weight:600; letter-spacing:.5px; transition:all .13s;}
.dirbtn:hover{border-color:rgba(18,28,40,.3); color:var(--text);}
.dirbtn.sel{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 14px rgba(234,90,12,.35);}
.dirbtn.rand{font-size:17px;}
.dirlabel{text-align:center; font-size:11.5px; color:var(--text-3); margin-top:9px;}

/* pied de panneau */
#panelfoot{flex-shrink:0; padding:14px 22px 18px; border-top:1px solid var(--line-strong); background:rgba(255,255,255,.98); box-shadow:0 -10px 24px rgba(24,33,43,.07);}
.mainbtns{display:flex; gap:9px;}
button.primary{
  flex:1; padding:14px 18px; font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:.4px;
  background:linear-gradient(135deg,#FF7A28,#E84E06); color:#fff; border:none; border-radius:14px; cursor:pointer;
  box-shadow:0 8px 20px rgba(234,90,12,.32); transition:transform .12s, box-shadow .15s, filter .15s;
}
button.primary:hover{filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 10px 24px rgba(234,90,12,.42);}
button.primary:active{transform:translateY(0);}
button.primary:disabled{opacity:.4; cursor:default; transform:none; box-shadow:none;}
button.ghost{padding:14px 16px; background:var(--surface-solid); color:var(--text); border:1px solid var(--line-strong); border-radius:14px; cursor:pointer; font-size:15px; transition:all .15s;}
button.ghost:hover{border-color:var(--accent-line); background:var(--accent-soft);}
button.ghost:disabled{opacity:.35; cursor:default;}
#btnsDone{flex-direction:column; gap:8px;}
#status{font-size:12px; color:var(--text-3); line-height:1.55; margin-top:11px; min-height:16px;}
#status b{color:var(--text-2); font-weight:600;}
#status.err{color:var(--danger);}

/* avancé + crédits */
details.adv{margin-top:2px;}
details.adv summary{cursor:pointer; font-size:12px; color:var(--text-3); list-style:none; padding:10px 0; user-select:none; display:flex; align-items:center; gap:7px;}
details.adv summary:hover{color:var(--text-2);}
details.adv summary::before{content:'▸'; font-size:10px; transition:transform .15s;}
details.adv[open] summary::before{transform:rotate(90deg);}
.toggle{display:flex; align-items:center; gap:9px; font-size:12.5px; cursor:pointer; user-select:none; color:var(--text-2);}
.toggle input{accent-color:var(--danger); width:15px; height:15px;}
#nogolist{list-style:none; margin-top:9px; display:flex; flex-direction:column; gap:5px;}
#nogolist li{display:flex; justify-content:space-between; align-items:center; background:var(--raised); padding:6px 10px; border-radius:var(--r-sm); font-size:11.5px; color:var(--text-3);}
#nogolist button{background:none; border:none; color:var(--danger); cursor:pointer; font-size:13px; padding:2px 5px;}
.credits{font-size:10px; color:#98A1AC; line-height:1.7; padding:14px 0 4px; border-top:1px solid var(--line); margin-top:14px;}
.credits a{color:#78828E; text-decoration:none;}
.credits a:hover{text-decoration:underline;}

/* ============ sélecteur de fonds + surcouche ============ */
#layerbar{position:absolute; top:16px; right:16px; z-index:1000; display:flex; align-items:center; background:var(--surface); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:12px; padding:4px; gap:2px; box-shadow:var(--shadow);}
#layerbar button{padding:7px 13px; font-size:12px; font-weight:500; color:var(--text-3); background:none; border:none; border-radius:9px; cursor:pointer; transition:all .13s; white-space:nowrap;}
#layerbar button:hover{color:var(--text);}
#layerbar button.sel{background:var(--text); color:#fff; font-weight:600;}
#layerbar .sep{width:1px; height:20px; background:var(--line-strong); margin:0 5px;}
#layerbar button.overlaybtn{display:flex; align-items:center; gap:6px;}
#layerbar button.overlaybtn::before{content:''; width:8px; height:8px; border-radius:50%; background:#B9C1CA; transition:background .15s;}
#layerbar button.overlaybtn.on{color:var(--text); font-weight:600;}
#layerbar button.overlaybtn.on::before{background:#7C3AED; box-shadow:0 0 0 3px rgba(124,58,237,.18);}

/* ============ carte de résultats ============ */
#results{
  position:absolute; right:16px; bottom:26px; z-index:1000; width:396px;
  background:var(--surface); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:18px 20px 18px; display:none;
  animation:slideup .28s cubic-bezier(.2,.8,.25,1);
}
@keyframes slideup{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
#results .r-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:2px;}
#results .r-title{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:1.6px; color:var(--text-3);}
#rClose{background:none; border:none; color:var(--text-3); cursor:pointer; font-size:15px; padding:2px 6px; border-radius:6px;}
#rClose:hover{color:var(--text); background:var(--raised);}
.r-mainrow{margin:2px 0 10px;}
#rDist{font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:-1px; line-height:1.1; white-space:nowrap;}
#rDist small{font-size:17px; color:var(--text-3); font-weight:500; letter-spacing:0; margin-left:5px;}
#rSub{font-size:12.5px; color:var(--text-2); line-height:1.5; margin-top:5px;}
#rSub b{color:var(--text); font-weight:600;}
.bar{height:10px; border-radius:5px; overflow:hidden; display:flex; gap:2px; margin:4px 0 9px;}
.bar div{height:100%; border-radius:2px; min-width:2px;}
.legend{display:flex; flex-wrap:wrap; gap:4px 15px; font-size:11.5px; color:var(--text-3);}
.legend b{color:var(--text); font-weight:600; font-family:var(--font-display);}
.dot{width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px;}
#elevwrap{position:relative; margin-top:12px;}
#elev{width:100%; height:86px; display:block; border-radius:10px; background:var(--raised);}
#elevtip{position:absolute; top:6px; left:8px; font-size:10.5px; color:var(--text-2); background:rgba(255,255,255,.92); padding:2px 8px; border-radius:6px; pointer-events:none; display:none; box-shadow:0 1px 4px rgba(24,33,43,.15);}
.warn{font-size:11.5px; color:#C13539; margin-top:10px; line-height:1.5; display:none;}

/* ============ héro ============ */
#hero{position:absolute; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 90% at 50% 10%, rgba(245,246,248,.72) 0%, rgba(243,245,247,.97) 78%);}
#hero::before{content:''; position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' fill='none' stroke='%23223040' stroke-opacity='0.07' stroke-width='1.3'%3E%3Cpath d='M466.8 380.0L463.6 391.1L456.0 400.5L447.6 408.4L441.6 416.4L437.3 425.7L431.4 434.6L421.7 439.7L409.6 439.7L398.4 437.5L389.2 438.6L380.0 445.9L368.1 456.1L353.6 462.7L340.0 460.6L330.7 450.6L325.9 437.5L322.6 425.8L318.4 416.4L313.8 407.8L311.0 398.6L310.7 389.2L310.8 380.0L309.1 370.6L306.3 360.1L305.7 348.8L310.4 338.8L319.4 331.7L329.2 326.1L337.4 319.0L344.8 309.1L354.4 299.8L367.0 296.6L380.0 302.3L390.3 314.1L397.6 325.0L404.8 330.0L415.1 329.8L428.0 329.0L440.5 331.8L449.6 338.8L455.7 348.2L460.7 358.2L465.1 368.7L466.8 380.0Z'/%3E%3Cpath d='M497.9 380.0L494.2 395.1L486.2 408.7L477.7 421.0L470.6 433.6L463.5 446.6L454.1 458.6L441.7 468.3L427.8 476.3L413.4 484.8L397.9 494.2L380.0 501.3L361.1 500.8L344.7 490.7L333.0 474.7L324.6 459.4L315.0 449.0L301.4 442.7L285.7 435.8L273.0 424.9L266.9 410.6L265.9 395.1L265.9 380.0L264.6 364.7L263.6 348.6L266.7 332.4L275.4 318.2L288.2 306.8L302.1 297.3L316.2 288.7L331.4 282.1L348.1 280.0L364.8 283.0L380.0 287.8L394.1 289.5L410.0 285.9L429.4 280.5L450.0 279.8L466.9 287.7L476.7 302.9L480.8 320.4L484.1 336.3L489.5 350.4L495.5 364.7L497.9 380.0Z'/%3E%3Cpath d='M532.7 380.0L525.1 399.2L517.6 417.2L513.3 436.0L510.3 457.0L503.4 478.4L489.6 496.3L469.8 508.6L447.4 515.8L424.7 520.0L402.1 521.7L380.0 519.5L359.2 512.8L340.5 503.8L322.4 496.0L302.4 491.1L279.6 486.5L257.6 477.6L241.4 461.9L233.7 441.5L231.6 420.1L229.5 399.9L224.7 380.0L220.3 358.9L222.0 337.3L233.2 318.3L251.2 303.8L270.6 292.8L287.9 282.2L303.3 270.2L319.5 258.0L337.9 248.1L358.3 241.2L380.0 236.2L403.1 232.3L427.3 231.9L450.4 238.3L468.9 252.8L481.3 272.4L490.4 292.0L500.5 308.7L513.9 323.7L527.1 340.3L534.4 359.6L532.7 380.0Z'/%3E%3Cpath d='M568.4 380.0L567.1 404.7L567.6 430.7L565.9 458.1L556.0 484.0L535.5 503.9L507.9 515.8L479.3 522.2L453.6 528.3L430.1 536.8L406.0 546.2L380.0 552.3L352.9 553.1L325.9 549.5L299.0 543.1L272.3 534.2L247.6 520.5L228.0 501.2L214.8 477.7L206.1 453.0L198.2 429.1L189.8 405.2L184.4 380.0L187.0 354.5L199.1 331.1L216.6 311.3L232.9 293.0L245.3 272.6L256.4 248.8L271.7 225.0L294.1 206.9L321.9 197.9L351.3 196.5L380.0 199.1L407.6 203.4L434.1 210.5L458.5 221.8L479.9 237.0L499.1 253.6L518.2 269.8L537.9 286.7L555.4 306.3L566.6 329.6L569.9 354.9L568.4 380.0Z'/%3E%3Cpath d='M615.2 380.0L614.0 411.0L607.7 441.5L593.2 469.6L570.4 492.6L543.5 510.4L517.9 526.5L495.4 545.2L473.0 567.4L446.4 588.1L414.5 600.8L380.0 602.4L346.4 595.3L314.6 584.8L283.9 573.7L253.8 560.7L226.4 543.1L204.5 519.9L188.6 493.2L176.4 465.5L166.0 437.8L158.1 409.4L155.2 380.0L158.7 350.7L166.3 322.3L174.8 293.8L183.4 263.8L195.9 233.2L216.7 206.6L246.7 189.2L281.9 182.4L316.8 182.0L349.0 181.9L380.0 179.2L411.8 176.4L444.2 178.7L475.0 188.7L502.5 204.7L527.7 223.2L552.2 242.7L575.6 264.4L594.9 289.7L607.4 318.6L613.4 349.1L615.2 380.0Z'/%3E%3Cpath d='M639.8 380.0L635.3 413.8L627.7 446.9L615.1 478.8L598.0 508.9L578.3 538.1L556.5 567.4L530.6 595.5L498.1 617.9L459.7 629.8L419.1 630.4L380.0 624.3L342.9 617.4L306.1 611.7L268.8 604.1L233.6 589.5L204.5 566.3L182.5 537.5L164.5 507.4L146.6 478.0L128.0 448.1L112.1 415.4L103.8 380.0L104.8 343.6L113.4 308.0L127.6 273.9L147.1 242.3L173.2 215.2L205.5 194.7L240.8 180.7L275.4 169.3L308.7 156.6L342.9 142.3L380.0 131.2L419.2 129.3L457.1 138.6L491.4 155.5L523.4 174.7L555.5 193.7L587.5 214.6L615.4 240.8L634.2 273.2L642.3 309.2L642.7 345.3L639.8 380.0Z'/%3E%3Cpath d='M675.0 380.0L682.3 420.0L681.0 461.3L668.1 501.1L645.8 537.1L617.5 569.3L585.2 597.9L548.7 621.5L508.1 638.1L465.2 646.9L422.3 650.6L380.0 652.5L337.3 653.2L294.0 649.3L252.4 637.0L215.6 615.3L184.0 588.1L154.7 559.6L124.4 531.1L94.3 500.0L70.4 463.6L59.4 422.4L63.0 380.0L76.6 339.9L93.8 302.7L111.5 267.2L130.9 232.7L155.0 200.6L184.5 172.4L217.9 147.9L253.9 125.9L292.8 106.7L335.2 93.3L380.0 89.5L424.4 95.9L466.5 109.1L506.7 124.8L546.5 141.7L584.8 162.6L617.2 190.9L639.3 226.7L651.0 266.1L657.6 305.0L665.2 342.3L675.0 380.0Z'/%3E%3Cpath d='M741.1 380.0L739.7 427.6L722.6 472.5L695.1 512.4L664.4 548.2L633.9 582.4L601.6 615.2L564.4 643.9L521.6 665.3L475.4 678.8L428.0 687.0L380.0 691.8L331.2 692.5L282.3 686.1L235.5 671.0L192.2 648.8L152.0 622.1L114.1 592.0L80.6 557.0L56.4 515.9L45.5 470.4L46.5 424.1L53.1 380.0L58.7 337.5L62.4 294.2L69.2 249.4L85.7 206.0L113.9 167.9L151.0 136.9L192.4 111.4L235.8 89.5L281.5 71.5L330.1 60.5L380.0 58.9L429.1 66.0L476.1 78.7L521.3 95.3L564.2 116.3L602.5 143.7L634.0 177.5L659.4 214.8L682.3 253.0L705.6 292.0L727.5 334.0L741.1 380.0Z'/%3E%3Cpath d='M768.8 380.0L754.5 429.5L734.1 475.6L713.1 519.9L692.1 564.5L666.8 608.7L632.4 648.0L588.3 678.1L538.2 698.6L486.3 713.1L434.0 725.3L380.0 734.9L324.1 737.4L268.8 728.5L217.3 707.8L171.4 678.7L130.6 644.8L94.6 607.5L64.4 566.6L41.7 522.2L26.1 475.6L14.6 428.3L4.8 380.0L-1.7 329.5L1.0 277.6L18.1 227.9L49.4 184.5L89.5 148.4L132.1 116.8L175.2 86.8L220.8 59.3L271.1 38.7L325.2 29.6L380.0 32.0L432.9 41.7L484.0 54.1L534.6 68.5L584.4 87.4L631.0 113.6L672.0 147.2L707.1 186.6L736.6 230.2L759.1 277.6L770.8 328.3L768.8 380.0Z'/%3E%3C/svg%3E"); background-size:760px; opacity:.75; pointer-events:none;}
#hero .inner{position:relative; max-width:560px; text-align:center; padding:36px 28px;}
#hero .badge{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line-strong); background:rgba(255,255,255,.75); padding:6px 14px; border-radius:99px; margin-bottom:26px;}
#hero .badge i{width:6px; height:6px; border-radius:50%; background:#18A24E; display:inline-block; animation:blink 2.2s infinite;}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:.3;}}
#hero .lockup{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:22px;}
#hero .lockup .mark{width:54px; height:54px; border-radius:16px;}
#hero .lockup .mark svg{width:32px; height:32px;}
#hero h1{font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:3.5px; line-height:1; color:#141C25;}
#hero .pitch{font-family:var(--font-display); font-size:22px; font-weight:500; color:var(--text); line-height:1.35; margin-bottom:12px;}
#hero .sub{font-size:14px; color:var(--text-2); line-height:1.65; margin-bottom:30px; max-width:440px; margin-left:auto; margin-right:auto;}
#hero .btns{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-bottom:34px;}
#hero button{font-size:14.5px;}
#hero button.primary{flex:none; padding:15px 26px;}
#hero button.ghost{padding:15px 22px;}
.feat{display:flex; gap:9px; justify-content:center; flex-wrap:wrap;}
.feat span{font-size:12px; color:var(--text-2); background:rgba(255,255,255,.8); border:1px solid var(--line-strong); padding:8px 14px; border-radius:99px;}

/* ============ loader ============ */
#loader{position:absolute; inset:0; z-index:1600; background:rgba(245,246,248,.55); display:none; align-items:center; justify-content:center; backdrop-filter:blur(3px);}
#loader .box{background:var(--surface-solid); border:1px solid var(--line-strong); padding:22px 30px; border-radius:18px; display:flex; align-items:center; gap:16px; box-shadow:var(--shadow);}
#loader .box span{font-size:14px; font-weight:500;}
.spin{width:22px; height:22px; border:3px solid var(--raised-2); border-top-color:var(--accent); border-radius:50%; animation:sp .8s linear infinite; flex-shrink:0;}
@keyframes sp{to{transform:rotate(360deg);}}

/* ============ éléments carte ============ */
.kmlabel{background:#18212B; color:#fff; border-radius:50%; width:23px; height:23px; line-height:23px; text-align:center; font-size:10.5px; font-weight:700; border:2px solid #fff; box-shadow:0 2px 6px rgba(24,33,43,.4); font-family:var(--font-display);}
.startwrap{position:relative; width:30px; height:30px;}
.startwrap .ring{position:absolute; inset:0; border-radius:50%; background:rgba(234,90,12,.4); animation:pulse 2s ease-out infinite;}
.startwrap .core{position:absolute; inset:4px; border-radius:50%; background:linear-gradient(135deg,#FF8A3D,#F0540A); border:2.5px solid #fff; box-shadow:0 2px 8px rgba(24,33,43,.4);}
@keyframes pulse{0%{transform:scale(.7); opacity:.9;} 70%{transform:scale(1.7); opacity:0;} 100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }
body.hero-open #panel, body.hero-open #layerbar{visibility:hidden;}

/* ============ mobile ============ */
@media (max-width:820px){
  #panel{top:auto; height:auto; max-height:58vh; width:100%; border-right:none; border-top:1px solid var(--line-strong); border-radius:22px 22px 0 0; box-shadow:0 -14px 40px rgba(24,33,43,.18); transition:transform .28s cubic-bezier(.2,.8,.25,1);}
  #panel.down{transform:translateY(calc(100% - 46px));}
  #sheetgrab{display:flex; width:100%; flex-direction:column; align-items:center; gap:5px; padding:9px 0 7px; background:none; border:none; color:var(--text-3); font-size:11.5px; font-weight:500; cursor:pointer;}
  #sheetgrab .grip{width:42px; height:4px; border-radius:2px; background:var(--raised-2);}
  #brandrow{padding:10px 20px 8px;}
  #brandrow .base{display:none;}
  #brandrow .name{font-size:13.5px;}
  .mark{width:30px; height:30px; border-radius:9px;}
  .mark svg{width:18px; height:18px;}
  #layerbar{top:12px; right:12px; left:12px; overflow-x:auto; scrollbar-width:none;}
  #results{position:static; width:auto; box-shadow:none; border-color:var(--line-strong); animation:none; margin:6px 0 16px; padding:14px 16px 16px;}
  #hero h1{font-size:24px; letter-spacing:2px;}
  #hero .pitch{font-size:18px;}
  #hero .lockup .mark{width:44px; height:44px;}
}

/* ============ bandeau cookies ============ */
#cookiebar{position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:3000; display:none; align-items:center; gap:16px; max-width:680px; width:calc(100% - 28px); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:16px; padding:14px 18px; box-shadow:var(--shadow);}
#cookiebar p{font-size:12.5px; color:var(--text-2); line-height:1.5; flex:1; margin:0;}
#cookiebar p b{color:var(--text);}
#cookiebar p a{color:var(--text-2);}
#cookiebar .ckbtns{display:flex; gap:8px; flex-shrink:0;}
#cookiebar button{padding:10px 16px; border-radius:11px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;}
#ckAccept{background:var(--text); color:#fff; border:none;}
#ckAccept:hover{filter:brightness(1.15);}
#ckRefuse{background:none; color:var(--text-3); border:1px solid var(--line-strong);}
#ckRefuse:hover{color:var(--text); border-color:rgba(18,28,40,.3);}
@media (max-width:640px){
  #cookiebar{flex-direction:column; align-items:stretch; gap:10px; bottom:10px;}
  #cookiebar .ckbtns{justify-content:flex-end;}
}

/* pages légales */
.legal{max-width:720px; margin:0 auto; padding:40px 24px 60px; height:100%; overflow-y:auto;}
.legal h1{font-family:var(--font-display); font-size:28px; margin-bottom:6px;}
.legal h2{font-size:16px; margin:26px 0 8px;}
.legal p, .legal li{font-size:14px; color:var(--text-2); line-height:1.7; margin-bottom:10px;}
.legal ul{padding-left:20px;}
.legal a{color:var(--accent);}
.legal .back{display:inline-block; margin-bottom:24px; font-size:13px; color:var(--text-3); text-decoration:none;}
.legal .back:hover{color:var(--text);}
body.legalpage{overflow:auto; background:var(--bg);}