/* La règle fixe : fond blanc plein, bord haut de 2 px à l'encre. */
.regle {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: var(--regle-h);
  display: flex;
  padding: 0 max(var(--marge), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--marge), env(safe-area-inset-left));
  background: #fff; color: var(--encre);
  border-top: 2px solid var(--encre);
  user-select: none; -webkit-user-select: none;
}
.regle__jour {
  flex: none; width: 200px; padding: 16px 16px 0 0;
  display: grid; align-content: start; gap: 4px;
}
.regle__date { font: 600 18px/1.15 var(--titre); }
.regle__coef { font: 500 15px/1.2 var(--texte); color: var(--gris); font-variant-numeric: tabular-nums; }
.regle__note { font: 500 12.5px/1.2 var(--texte); color: var(--gris); }
.regle__piste { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.regle__bande { position: relative; display: flex; height: 100%; }
.regle__svg { flex: none; height: 100%; cursor: ew-resize; touch-action: none; }
.r-aire { fill: rgb(47 96 54 / .22); }
.r-courbe { fill: none; stroke: var(--pin); stroke-width: 2; stroke-linejoin: round; }
.r-point { fill: var(--pin); }
.r-ext { font: 600 12.5px var(--texte); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 3px; font-variant-numeric: tabular-nums; }
.r-cran { fill: var(--encre); }
.r-heure { font: 600 13px var(--texte); font-stretch: 80%; fill: var(--encre); font-variant-numeric: tabular-nums; }
.r-crochet { fill: none; stroke: var(--pin); stroke-width: 2; }
.r-crochet-t { font: 500 12.5px var(--texte); fill: var(--pin); font-variant-numeric: tabular-nums; }
.r-maintenant { stroke: var(--encre); stroke-width: 1; stroke-dasharray: 2 3; }
.r-maintenant-t { font: 600 11px var(--texte); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 3px; }

/* La nuit : hachurée, et la page y finit. */
.regle__nuit {
  flex: 1; min-width: 300px; padding: 16px 0 12px 18px;
  display: grid; align-content: start; gap: 6px;
  background: repeating-linear-gradient(135deg, rgb(16 38 27 / .16) 0 1.5px, transparent 1.5px 8px);
  border-left: 2px solid var(--encre);
}
.regle__nuit p { justify-self: start; background: #fff; padding: 1px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.regle__fin { font: 700 20px/1.15 var(--titre); }
.regle__adresse { font: 500 14px/1.4 var(--texte); font-variant-numeric: tabular-nums; max-width: 34ch; }
.regle__adresse a { display: inline-block; padding: 4px 0; margin: -4px 0; white-space: nowrap; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* L'aiguille et sa tête, à cheval sur le bord haut. */
.aiguille {
  position: absolute; top: -2px; bottom: 0; left: 0; width: 0; z-index: 2;
  transition: transform .18s var(--courbe);
}
.est-tire .aiguille { transition: none; }
.aiguille__trait { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--encre); pointer-events: none; }
.tete {
  position: absolute; top: calc(-1 * var(--tete-depasse)); left: -1px;
  display: flex; align-items: stretch; height: 44px;
  background: var(--encre); color: #fff; border-radius: 4px 4px 4px 0;
  box-shadow: 0 8px 20px -12px rgb(16 38 27 / .6);
}
.aiguille.a-gauche .tete { left: auto; right: -1px; border-radius: 4px 4px 0 4px; flex-direction: row-reverse; }
.tete__lecture {
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  cursor: ew-resize; touch-action: none; white-space: nowrap;
}
.tete__heure { font: 600 20px/1 var(--titre); font-variant-numeric: tabular-nums; }
.tete__sens { display: flex; align-items: center; gap: 6px; font: 500 14px/1 var(--texte); color: #D5E5DC; }
.tete__lecture:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.tete__partir {
  display: flex; align-items: center; justify-content: center; min-width: 84px; padding: 0 16px;
  background: var(--pin); color: #fff; font: 600 16px/1 var(--texte); text-decoration: none;
  border-radius: 0 4px 4px 0;
}
.aiguille.a-gauche .tete__partir { border-radius: 4px 0 0 4px; }
.tete__partir:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.tete__partir.est-depart { cursor: default; background: var(--profond); }
@media (hover: hover) { .tete__partir:not(.est-depart):hover { background: #234a29; } }
.tete__chevron { display: none; }

/* Téléphone et tablette : la règle glisse sous le pouce, l'aiguille reste au centre. */
@media (max-width: 1023px) {
  .regle { padding-left: max(16px, env(safe-area-inset-left)); padding-right: 0; }
  .regle__jour { display: none; }
  .regle__piste {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    touch-action: pan-x; overscroll-behavior-x: contain;
  }
  .regle__piste::-webkit-scrollbar { display: none; }
  .regle__svg { cursor: default; touch-action: pan-x; }
  .regle__bande { width: max-content; }
  .r-aimant { position: absolute; top: 0; height: 1px; width: var(--cw); scroll-snap-align: center; scroll-snap-stop: normal; pointer-events: none; }
  .regle__nuit { min-width: max(300px, calc(var(--moitie) + 20px)); padding: 10px 16px 8px 14px; scroll-snap-align: end; gap: 4px; }
  .regle__fin { font-size: 17px; }
  .regle__adresse { font-size: 13px; line-height: 1.35; }
  .aiguille { left: calc(max(16px, env(safe-area-inset-left)) + (100% - max(16px, env(safe-area-inset-left))) / 2); transition: none; }
  .tete { left: 50%; transform: translateX(-50%); border-radius: 4px; }
  .tete__chevron {
    display: flex; align-items: center; justify-content: center; width: 44px; flex: none; color: #fff;
  }
  .tete__chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .tete__chevron:disabled { color: #6F8A7C; cursor: default; }
  .tete__chevron:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
  .tete__lecture { padding: 0 6px; gap: 8px; }
  .tete__heure { font-size: 18px; }
  .tete__sens span { display: none; }
  .tete__partir { min-width: 76px; border-radius: 0; }
  .aiguille.a-gauche .tete { left: 50%; right: auto; flex-direction: row; }
  .regle__note {
    display: block; position: absolute; top: 24px; z-index: 3;
    left: calc(max(16px, env(safe-area-inset-left)) + 2px);
    padding: 0 4px; background: #fff; pointer-events: none;
  }
}
@media (max-width: 1023px) {
  .regle__jour { display: contents; }
  .regle__date, .regle__coef { display: none; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .tete { height: 40px; top: -20px; }
  .regle__fin { font-size: 15px; }
  .regle__adresse { display: none; }
  .regle__note { display: none; }
}