/* ============================================================
   Tempowatt — le calculateur

   Un outil ancré à gauche comme une feuille de route, pas une
   carte flottante. Bandeau noir et rayures de maillot en tête, le
   temps imprimé sur un dossard, le relief dessiné comme un roadbook
   d'étape. Charge css/base.css avant cette feuille.
   ============================================================ */

html,body{height:100%}
body{overflow:hidden; font-size:14.5px; line-height:1.5}

/* ---------- Carte ---------- */
/* ---------- Barre d'équipe sur toute la largeur ---------- */
:root{--top:61px}
.app-head{position:fixed; top:0; left:0; right:0; z-index:950}
.app-head .head-in{max-width:none; height:56px; padding:0 18px}
.app-head .brand .wordmark{font-size:27px}
.app-head .site-nav{gap:20px}
.app-stripes{position:fixed; top:56px; left:0; right:0; z-index:950}

#map{position:fixed; inset:var(--top) 0 0 0; background:var(--paper)}
.leaflet-container{font-family:inherit; background:var(--paper)}
/* Fond atténué : la carte porte le terrain, le tracé porte le propos */
#map .leaflet-tile-pane{filter:saturate(.55) contrast(1.03)}
.tiles-dark{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.95)}
.leaflet-control-attribution{
  font-size:10.5px; padding:2px 8px!important;
  background:color-mix(in srgb, var(--surface) 88%, transparent)!important; color:var(--ink-3)!important;
}
.leaflet-control-attribution a{color:var(--ink-2)}
.leaflet-bar{border:1px solid var(--line)!important; border-radius:var(--r-ctl)!important;
             box-shadow:var(--sh-1)!important; overflow:hidden}
.leaflet-bar a{
  width:34px!important; height:34px!important; line-height:34px!important;
  background:var(--surface)!important; color:var(--ink)!important;
  border-bottom:1px solid var(--line-2)!important; font-size:18px!important;
}
.leaflet-bar a:hover{background:var(--ink)!important; color:var(--surface)!important}
.leaflet-bar a:last-child{border-bottom:none!important}

/* ---------- Panneau ---------- */
#panel{
  position:fixed; top:var(--top); left:0; bottom:0; width:400px; z-index:900;
  display:flex; flex-direction:column; background:var(--surface);
  border-right:1px solid var(--line); box-shadow:var(--sh-2);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
#panel.hidden{transform:translateX(-100%)}

/* Poignée de la feuille, sur téléphone seulement */
.grip{display:none}

.scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
        scrollbar-width:thin; scrollbar-color:var(--line) transparent}

.card{padding:16px 18px 18px; border-bottom:1px solid var(--line-2)}
.card h2.tag{margin-bottom:10px}
.lbl{display:block; margin:0 0 6px}

/* ---------- Départ et arrivée ---------- */
.route-inputs{display:flex; gap:10px; align-items:stretch}
.pin-rail{display:flex; flex-direction:column; align-items:center; padding:15px 0 15px 2px}
.dot{width:12px; height:12px; border-radius:50%; flex:none}
.dot.start{background:var(--ink)}
.dot.end{border:1.5px solid var(--ink);
  background:conic-gradient(var(--ink) 0 25%, var(--surface) 0 50%, var(--ink) 0 75%, var(--surface) 0) 0 0/6px 6px}
.rail{flex:1; width:0; margin:4px 0; border-left:2px dashed var(--line)}
.fields{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0}
.field{position:relative}
.field input{
  width:100%; padding:11px 38px 11px 12px; font:500 14.5px/1.3 Archivo, sans-serif;
  color:var(--ink); background:var(--field); border:1px solid var(--line);
  border-radius:var(--r-field); outline:none; transition:border-color .15s, background .15s;
}
.field input::placeholder{color:var(--ink-3); font-weight:400}
.field input:focus{background:var(--field-on); border-color:var(--ink)}
.mini{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; display:grid; place-items:center; padding:0;
  border:none; border-radius:7px; background:transparent; color:var(--ink-3);
  transition:background .14s, color .14s;
}
.mini:hover{background:var(--ink); color:var(--surface)}
.swap{position:static; transform:none; align-self:center; width:34px; height:34px; border-radius:var(--r-field);
      border:1px solid var(--line); background:var(--surface)}
.suggest{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  list-style:none; margin:0; padding:4px; background:var(--surface);
  border:1px solid var(--ink); border-radius:var(--r-field); box-shadow:var(--sh-2);
  max-height:250px; overflow-y:auto;
}
.suggest:empty{display:none}
.suggest li{padding:9px 10px; border-radius:7px; cursor:pointer; font-size:14px; font-weight:600}
.suggest li:hover,.suggest li.sel{background:var(--ink); color:var(--surface)}
.suggest li small{display:block; margin-top:1px; font-size:11.5px; font-weight:400; color:var(--ink-3);
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.suggest li:hover small,.suggest li.sel small{color:inherit; opacity:.75}
.hint{margin:11px 0 0; font-size:12.5px; color:var(--ink-3)}

/* ---------- Catégorie : un dossard, une plaque ---------- */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px}
.seg button{
  position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px;
  padding:16px 12px 11px; text-align:left; border-radius:var(--r-block);
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink-3);
  transition:box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.seg button:hover{border-color:var(--ink-3)}
.seg .n{font-size:40px}
.seg .u{font-stretch:75%; font-weight:700; font-size:13px; text-transform:uppercase}
.seg .c{flex-basis:100%; margin-top:5px; font-size:11.5px; font-weight:500; line-height:1.3}

/* Le dossard : quatre épingles et la bande de l'épreuve en tête */
.pins{
  position:absolute; inset:0; pointer-events:none;
  --pin:radial-gradient(circle, var(--ink-4) 0 1.7px, transparent 2.2px);
  background:var(--pin) left 4px top 4px/9px 9px no-repeat,
             var(--pin) right 4px top 4px/9px 9px no-repeat,
             var(--pin) left 4px bottom 4px/9px 9px no-repeat,
             var(--pin) right 4px bottom 4px/9px 9px no-repeat;
}
.bib.on{color:var(--ink); border-color:var(--ink); box-shadow:inset 0 5px 0 var(--c25)}

/* La plaque des speed pedelecs : un cadre de plaque, plein quand elle est choisie */
.plate.on{background:var(--c45); color:var(--c45-on); border-color:var(--c45)}
.plate.on .c{color:var(--c45-on)}

.sel{
  width:100%; padding:11px 34px 11px 12px; margin-bottom:14px;
  font:500 14px/1.3 Archivo, sans-serif; color:var(--ink);
  background-color:var(--field); border:1px solid var(--line);
  border-radius:var(--r-field); outline:none; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b5f68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2 6 6.5 10.5 2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
}
.sel:focus{border-color:var(--ink); background-color:var(--field-on)}
.spec{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline;
      margin:-8px 0 16px; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.reset{border:none; background:none; padding:0; font:700 12px Archivo, sans-serif;
       color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px}

/* Modes : la case active passe en noir, comme une case cochée sur la feuille */
.modes{display:grid; grid-template-columns:repeat(5,1fr); gap:4px}
.modes button{
  padding:9px 2px 8px; border-radius:var(--r-ctl); border:1px solid var(--line);
  background:var(--field); color:var(--ink-2);
  font-stretch:75%; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.02em;
  transition:background .14s, color .14s, border-color .14s;
}
.modes button:hover{border-color:var(--ink)}
.modes button.on{background:var(--ink); color:var(--surface); border-color:var(--ink)}

/* ---------- Réglages ---------- */
.disclose{display:flex; align-items:center; justify-content:space-between; width:100%;
          padding:0; border:none; background:none}
.disclose:hover{color:var(--ink)}
.chev{transition:transform .22s cubic-bezier(.32,.72,0,1)}
.disclose[aria-expanded="true"] .chev{transform:rotate(90deg)}
.adv{margin-top:16px; display:flex; flex-direction:column; gap:16px}
.sep{width:100%; margin:0; border:none; border-top:1px solid var(--line-2)}
.row label{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
           margin-bottom:7px; font-size:13px; font-weight:500; color:var(--ink-2)}
.row output{font-stretch:75%; font-size:14px; font-weight:750; color:var(--ink);
            font-variant-numeric:tabular-nums; white-space:nowrap}
input[type=range]{width:100%; height:20px; margin:0; appearance:none; background:transparent; cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--line)}
input[type=range]::-moz-range-track{height:3px; background:var(--line)}
input[type=range]::-webkit-slider-thumb{
  appearance:none; margin-top:-7.5px; width:18px; height:18px; border-radius:50%;
  background:var(--ink); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--ink);
}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--ink)}
.wind-ctl{display:flex; gap:9px; align-items:center}
.wind-ctl input[type=range]{flex:1}
.wind-ctl .mini{position:static; transform:none; flex:none; width:32px; height:32px; border-radius:var(--r-field);
                border:1px solid var(--line); background:var(--surface)}
.wind-dir{display:flex; gap:10px; align-items:center; margin-top:10px}
.wind-dir input{flex:1}
.wind-dir span{width:80px; text-align:right; font-size:12.5px; font-weight:600; color:var(--ink-2)}

/* ---------- Le relevé ---------- */
.result{padding-top:18px}
.bib-card{
  position:relative; padding:20px 20px 16px; border-radius:var(--r-block);
  background:var(--surface); border:1.5px solid var(--ink);
  box-shadow:inset 0 6px 0 var(--accent);
}
.bib-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:2px}
.bib-top .tag{color:var(--ink-2)}
.cat-chip{padding:3px 7px 2px; border-radius:3px; font-size:15px;
          background:var(--accent); color:var(--on-accent)}
.time{margin:10px 0 8px; font-size:80px; line-height:.86; color:var(--ink)}
.time i{font-style:inherit; font-size:.42em; color:var(--ink-3); margin:0 .05em; text-transform:none}
.sub{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px;
     font-size:14px; font-weight:650; color:var(--ink-2)}
.sub .slash{font-style:normal; color:var(--ink-4); font-weight:400}
.sub .muted{font-weight:400; color:var(--ink-3)}

.stats{display:grid; grid-template-columns:1fr 1fr; column-gap:18px; margin:14px 0 4px}
.stat{display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid var(--line-2)}
.stat .v{font-stretch:75%; font-size:20px; font-weight:750; letter-spacing:-.005em;
         color:var(--ink); white-space:nowrap}

/* ---------- Roadbook ---------- */
.roadbook{margin:18px 0 0}
.rb-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.legend{display:flex; align-items:center; gap:7px; font-size:11.5px}
.legend .ramp{width:56px; height:8px; border-radius:2px;
  background:linear-gradient(90deg, var(--seq-1), var(--seq-2), var(--seq-3), var(--seq-4), var(--seq-5))}
.rb-plot{position:relative; display:grid; grid-template-columns:38px 1fr}
.axis-y{position:relative; height:150px}
.axis-y span, .axis-x span{
  position:absolute; font-stretch:75%; font-size:11px; font-weight:600; color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.axis-y span{right:6px; transform:translateY(-50%)}
#chart{width:100%; height:150px; display:block; overflow:visible; cursor:crosshair;
       background:var(--field); border-bottom:1.5px solid var(--ink)}
.axis-x{position:relative; height:18px; margin-left:38px}
.axis-x span{top:4px; transform:translateX(-50%)}
.axis-x span:first-child{transform:none}
.axis-x span.end{transform:translateX(-100%)}
.tip{
  position:absolute; z-index:10; pointer-events:none; top:6px; padding:6px 9px;
  border-radius:3px; background:var(--ink); color:var(--surface);
  font-size:12px; font-weight:500; line-height:1.45; white-space:nowrap;
  transform:translateX(-50%); font-variant-numeric:tabular-nums;
}
.tip b{font-weight:750}

/* ---------- Comparaison ---------- */
.cmp-title{margin:20px 0 10px}
.compare{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.cmp{display:grid; grid-template-columns:76px 1fr 58px; gap:10px; align-items:center}
.cmp .cn{font-stretch:75%; font-size:13.5px; font-weight:600; color:var(--ink-2)}
.cmp .cb{height:10px; background:var(--line-2)}
.cmp .cb i{display:block; height:100%; border-radius:0 4px 4px 0; background:var(--ink-4);
           transition:width .4s cubic-bezier(.32,.72,0,1)}
.cmp .ct{text-align:right; font-stretch:75%; font-size:14px; font-weight:750; color:var(--ink-2);
         font-variant-numeric:tabular-nums}
.cmp.me .cn,.cmp.me .ct{color:var(--ink); font-weight:800}
.cmp.me .cb i{background:var(--accent-mark)}
.cmp.c25 .cb i{background:var(--c25-mark)}
.cmp.c45 .cb i{background:var(--c45-mark)}
.rider-note{margin:0; padding-top:12px; border-top:1px solid var(--line-2);
            font-size:12.5px; line-height:1.6; color:var(--ink-3)}

/* ---------- Divers ---------- */
.err{margin:14px 18px 0; padding:12px 14px; border-radius:var(--r-ctl);
     background:var(--err-bg); color:var(--err); border:1px solid currentColor;
     font-size:13px; font-weight:500}
.foot{padding:16px 18px 22px; font-size:11.5px; line-height:1.6; color:var(--ink-3)}
.foot p{margin:0}
.foot a{color:var(--ink-2)}
.foot-nav{display:flex; flex-wrap:wrap; gap:16px; padding-bottom:12px; margin-bottom:12px;
          border-bottom:1px solid var(--line-2)}
.foot-nav a{font-stretch:75%; font-size:14px; font-weight:700; text-transform:uppercase;
            letter-spacing:.02em; color:var(--ink); text-decoration:none}
.foot-nav a:hover{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px}
.spin{display:inline-block; width:12px; height:12px; vertical-align:-1px; margin-right:7px;
      border:2px solid var(--line); border-top-color:var(--ink); border-radius:50%;
      animation:sp .65s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- Repères sur la carte ---------- */
.mk{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
    box-shadow:0 0 0 2px #ffffff, 0 2px 8px rgba(0,0,0,.45)}
.mk.s{background:#0f1b2d; color:#ffffff; font:800 12px/1 Archivo, sans-serif; font-stretch:75%}
.mk.e{border:2px solid #0f1b2d;
  background:conic-gradient(#0f1b2d 0 25%, #ffffff 0 50%, #0f1b2d 0 75%, #ffffff 0) 0 0/8px 8px}
.cursor-dot{width:14px; height:14px; border-radius:50%; background:var(--accent);
            border:2.5px solid #0f1b2d; box-shadow:0 0 0 2px #ffffff}

/* ---------- Tirette du panneau ---------- */
.panel-toggle{
  position:fixed; top:calc(50% + var(--top) / 2); left:400px; z-index:901; width:22px; height:56px; padding:0;
  transform:translateY(-50%); border:none; border-radius:0 var(--r-ctl) var(--r-ctl) 0;
  background:var(--band); color:var(--band-ink); box-shadow:var(--sh-1);
  transition:left .32s cubic-bezier(.32,.72,0,1);
}
.panel-toggle::before{content:""; display:inline-block; width:7px; height:7px;
  border:solid currentColor; border-width:0 2px 2px 0; transform:translateX(2px) rotate(135deg)}
#panel.hidden ~ .panel-toggle{left:0}
#panel.hidden ~ .panel-toggle::before{transform:translateX(-1px) rotate(-45deg)}

/* ---------- Écrans étroits ---------- */
@media (max-width:780px){
  #panel{top:auto; left:0; right:0; bottom:0; width:auto; max-height:76vh;
         border-right:none; border-radius:10px 10px 0 0; overflow:hidden}
  #panel.hidden{transform:translateY(calc(100% - 24px))}
  :root{--top:57px}
  .app-head .head-in{height:52px; padding:0 14px}
  .app-head .brand .wordmark{font-size:23px}
  .app-head .site-nav{gap:14px}
  .app-stripes{top:52px}
  .grip{display:block; flex:none; width:100%; height:24px; padding:0; border:none;
        background:var(--surface); cursor:grab; border-bottom:1px solid var(--line-2)}
  .grip::before{content:""; display:block; width:38px; height:4px; margin:0 auto;
                border-radius:3px; background:var(--line)}
  .scroll{display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom)}
  /* Le relevé passe devant les réglages */
  .err{order:0}
  .scroll > section:nth-of-type(1){order:1}
  #result{order:2}
  .scroll > section:nth-of-type(2){order:3}
  .scroll > section:nth-of-type(3){order:4}
  .foot{order:5}
  .time{font-size:68px}
  .panel-toggle{display:none}
}