/* Ligne 125 — socle : police, asphalte, marquages au sol, lettres remplies de photo. */
@font-face {
  font-family: "Anek Latin";
  src: url("fonts/anek-latin-var.woff2?v=2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
}
@property --trace { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }

:root {
  --asphalte: #0D0E0F;
  --blanc: #fff;
  --gris: #9AA0A6;
  --gris2: #5E646A;
  --repli: #17191C;
  --marge: clamp(16px, 4.5vw, 64px);
  --wd: 116;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  /* Contour blanc sans les contours internes de la police variable (un trait les montrerait) */
  --lisere: drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff);
  --cerne: 1.5px 0 #fff, -1.5px 0 #fff, 0 1.5px #fff, 0 -1.5px #fff, 1.1px 1.1px #fff, -1.1px -1.1px #fff, 1.1px -1.1px #fff, -1.1px 1.1px #fff;
  /* Bord de peinture routière : bande pleine et tiret de 0,6 em, bords légèrement bruts */
  --m-plein: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 1.4L9 .7 21 1.5 34 .5 47 1.2 61 .4 75 1.3 90 .6 104 1.5 118 .5 133 1.1 147 .3 162 1.4 176 .6 190 1.2 200 .7V9.3L188 9.8 174 8.9 160 9.6 145 8.7 131 9.5 116 8.8 101 9.7 87 8.9 72 9.6 58 8.6 43 9.5 29 8.8 15 9.7 0 8.9Z'/%3E%3C/svg%3E");
  --m-tirets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M1 1.6L15 .7 31 1.4 46 .5 59 1.2 60 8.6 45 9.6 30 8.7 16 9.5 0 8.8Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--asphalte);
  color: var(--blanc);
  scroll-padding-top: 96px;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100svh;
  background: var(--asphalte) url("img/enrobe.webp") repeat;
  background-size: 512px 512px;
  font-family: "Anek Latin", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.45;
  font-kerning: normal;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.evitement {
  position: fixed; z-index: 100;
  top: calc(var(--demobar-offset, 0px) + 8px); left: max(8px, env(safe-area-inset-left));
  min-height: 44px; padding: 12px 18px; border-radius: 8px;
  background: var(--blanc); color: var(--asphalte); font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 80px));
}
.evitement:focus { transform: none; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; border-radius: 4px; }

/* Mots-champs : un marquage au sol, discontinu tant que la valeur n'est que proposée */
.champ {
  position: relative;
  font-weight: 800;
  white-space: nowrap;
  background-color: transparent;
  background-image: var(--m-plein), var(--m-tirets);
  background-repeat: no-repeat, repeat-x;
  background-size: var(--trace) max(4px, .1em), 1em max(4px, .1em);
  background-position: 0 .96em, 0 .96em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: --trace .35s var(--courbe);
}
.champ.choisi { --trace: 100%; }
.champ--long { white-space: normal; }

/* Lettres remplies d'une photo : jamais sous 120 px, contour blanc, repli blanc plein */
.remplie { color: var(--blanc); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .remplie {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: var(--photo);
    background-size: cover;
    background-position: var(--photo-pos, 50% 50%);
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    filter: var(--lisere);
  }
}
.photo-scooter { --photo: url("img/scooter-jaune-800.webp"); }
.photo-lyon { --photo: url("img/lyon-du-ciel-800.webp"); }
.photo-duo { --photo: url("img/duo-pluie-800.webp"); }
.photo-nuit { --photo: url("img/hotel-dieu-nuit-800.webp"); }
@media (min-width: 1024px) {
  .photo-scooter { --photo: url("img/scooter-jaune-1920.webp"); }
  .photo-lyon { --photo: url("img/lyon-du-ciel-1920.webp"); }
  .photo-nuit { --photo: url("img/hotel-dieu-nuit-1920.webp"); }
}
.contour { color: var(--asphalte); -webkit-text-fill-color: var(--asphalte); text-shadow: var(--cerne); }

/* Bloc blanc : l'action, partout la même */
.bloc {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 56px; padding: 0 22px;
  border: 0; border-radius: 8px; background: var(--blanc); color: var(--asphalte);
  font-weight: 700; font-stretch: 110%; font-size: 17px; text-decoration: none; white-space: nowrap;
  transition: transform .1s;
}
.bloc:active { transform: scale(.97); }
.bloc[disabled] { opacity: .45; cursor: not-allowed; }

.lien-court {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; font-weight: 500; font-stretch: 110%; color: var(--gris);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  background: none; border: 0; padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}