/* ============================================================
   Tempowatt — fondations communes

   Identité « roadbook et dossard », palette « nuit et orange » :
   bandeau bleu nuit, orange sécurité pour les vélos à 25 km/h, bleu
   glacier pour les speed pedelecs. Titres et chiffres en Archivo
   étroite, très grasse et italique, la voix des maillots et des
   dossards.

   Les couleurs des marques de données (graphiques, barres) sont des
   pas validés pour le contraste et les daltonismes ; les aplats de
   marque purs ne portent jamais de donnée seuls.
   ============================================================ */

/* Archivo variable : graisse 100–900, largeur 62–125 %, romain et italique.
   SIL Open Font License 1.1 — voir fonts/OFL.txt */
@font-face{
  font-family:Archivo; font-style:normal; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(../fonts/archivo-roman-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:Archivo; font-style:normal; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(../fonts/archivo-roman-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:Archivo; font-style:italic; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(../fonts/archivo-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:Archivo; font-style:italic; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url(../fonts/archivo-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ----------
   Chaque catégorie légale a sa couleur : --c25 pour les vélos à 25 km/h,
   --c45 pour les speed pedelecs. Quatre déclinaisons par couleur :
   l'aplat de marque, le pas validé pour les marques de données (-mark),
   l'encre de texte (-ink) et le fond doux (-soft). -on est la couleur du
   texte posé sur l'aplat. Changer de palette se fait ici seulement. */
:root{
  /* encres — ink-4 ne porte jamais de texte, il n'atteint pas 4,5:1 */
  --ink:#111a28; --ink-2:#3a4658; --ink-3:#586377; --ink-4:#8a94a6;
  /* surfaces */
  --paper:#eef1f5; --surface:#ffffff; --field:#f2f4f7; --field-on:#ffffff;
  --line:#d5dbe3; --line-2:#e6eaf0;
  /* bandeau d'équipe, bleu nuit */
  --band:#0f1b2d; --band-ink:#ffffff; --band-ink-2:#a9b3c4;
  /* orange sécurité — 25 km/h */
  --c25:#f26b1d; --c25-on:#111a28; --c25-mark:#d9580f; --c25-ink:#b4470a; --c25-soft:#fdeadf;
  /* bleu glacier — 45 km/h */
  --c45:#1670b0; --c45-on:#ffffff; --c45-mark:#1a7fc4; --c45-ink:#1667a3; --c45-soft:#e3f0fa;
  /* catégorie active */
  --accent:var(--c25); --accent-mark:var(--c25-mark); --accent-ink:var(--c25-ink);
  --accent-soft:var(--c25-soft); --on-accent:var(--c25-on);
  /* données : rampe ardoise à une seule teinte, validée */
  --seq-1:#9aa7ba; --seq-2:#76869d; --seq-3:#55667f; --seq-4:#364761; --seq-5:#17243b;
  /* états */
  --err:#b4231a; --err-bg:#fdeceb;
  /* rayons : nets, par rôle */
  --r-ctl:4px; --r-block:6px;
  --r-field:10px;   /* champs de saisie, listes et leurs boutons voisins */
  --sh-1:0 1px 2px rgba(15,27,45,.08);
  --sh-2:0 6px 20px rgba(15,27,45,.14), 0 1px 3px rgba(15,27,45,.1);
}
:root[data-cat="45"]{
  --accent:var(--c45); --accent-mark:var(--c45-mark); --accent-ink:var(--c45-ink);
  --accent-soft:var(--c45-soft); --on-accent:var(--c45-on);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef1f5; --ink-2:#c3cad6; --ink-3:#98a2b3; --ink-4:#6a7487;
    --paper:#070b12; --surface:#131b28; --field:#1b2535; --field-on:#212c3e;
    --line:#2c3849; --line-2:#1f2939;
    --band:#0a1220; --band-ink:#ffffff; --band-ink-2:#a9b3c4;
    --c25-mark:#e06a24; --c25-ink:#ff8a4c; --c25-soft:#3a1d0c;
    --c45-mark:#2e8fd0; --c45-ink:#5cb4f0; --c45-soft:#0c2438;
    --seq-1:#475a7c; --seq-2:#62779a; --seq-3:#8296b5; --seq-4:#a9b8ce; --seq-5:#d6dee9;
    --err:#ff8a7a; --err-bg:#2c1512;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 6px 20px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ink:#eef1f5; --ink-2:#c3cad6; --ink-3:#98a2b3; --ink-4:#6a7487;
  --paper:#070b12; --surface:#131b28; --field:#1b2535; --field-on:#212c3e;
  --line:#2c3849; --line-2:#1f2939;
  --band:#0a1220; --band-ink:#ffffff; --band-ink-2:#a9b3c4;
  --c25-mark:#e06a24; --c25-ink:#ff8a4c; --c25-soft:#3a1d0c;
  --c45-mark:#2e8fd0; --c45-ink:#5cb4f0; --c45-soft:#0c2438;
  --seq-1:#475a7c; --seq-2:#62779a; --seq-3:#8296b5; --seq-4:#a9b8ce; --seq-5:#d6dee9;
  --err:#ff8a7a; --err-bg:#2c1512;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 6px 20px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}

/* ---------- Fondations ---------- */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 15px/1.6 Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis:none; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0}
button{font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
a{color:var(--accent-ink); text-underline-offset:2px}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* La voix de la marque : étroite, très grasse, italique, en capitales.
   Réservée aux titres, aux chiffres et aux libellés courts. */
.disp{
  font-stretch:62%; font-style:italic; font-weight:850;
  text-transform:uppercase; letter-spacing:.005em; line-height:.92;
}
/* Libellé de feuille de course : étroit et gras, lisible, sans micro-capitales espacées */
.tag{
  font-stretch:75%; font-weight:700; font-size:12.5px; line-height:1.2;
  text-transform:uppercase; letter-spacing:.03em; color:var(--ink-3);
}

/* Rayures de maillot : les deux catégories, toujours ensemble */
.stripes{
  height:5px; background:linear-gradient(100deg,
    var(--c25) 0 50%, var(--band) 50% calc(50% + 4px), var(--c45) calc(50% + 4px) 100%);
}

/* Marque : deux bandes inclinées et le mot en capitales étroites */
.mark{display:block; flex:none}
.mark .r{fill:var(--c25)} .mark .j{fill:var(--c45)}
.wordmark{
  font-stretch:62%; font-style:italic; font-weight:900; text-transform:uppercase;
  letter-spacing:.01em; line-height:1; color:var(--band-ink);
}
.num{font-variant-numeric:tabular-nums}

/* ---------- En-tête d'équipe, commun au calculateur et aux pages ---------- */
.site-head{background:var(--band)}
.head-in{max-width:1120px; margin:0 auto; padding:16px 28px;
         display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand .wordmark{font-size:31px}
.site-nav{display:flex; align-items:center; gap:22px}
.site-nav a{
  font-stretch:75%; font-size:15.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--band-ink-2); text-decoration:none; white-space:nowrap; padding:4px 0;
  border-bottom:3px solid transparent; transition:color .15s, border-color .15s;
}
.site-nav a:hover{color:var(--band-ink)}
.site-nav a[aria-current="page"]{color:var(--band-ink); border-bottom-color:var(--c25)}

/* Bouton d'appel : incliné comme un numéro de course */
.cta{
  display:inline-block; padding:10px 18px; border:none; background:var(--c25);
  transform:skewX(-12deg); text-decoration:none; cursor:pointer;
  transition:background .15s;
}
.cta > span{
  display:inline-block; transform:skewX(12deg); color:var(--c25-on);
  font-stretch:75%; font-size:15.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
}
.cta:hover{background:#ffffff}
.site-nav a.cta{border-bottom:none; padding:9px 16px}

/* Le nom et, à sa droite, ce que fait le site */
.brand-line{display:flex; align-items:center; gap:14px; flex:none}
.tagline{
  padding-left:14px; border-left:1px solid rgba(255,255,255,.22);
  font-size:13.5px; font-weight:500; line-height:1.2; color:var(--band-ink-2); white-space:nowrap;
}
@media (max-width:960px){ .tagline{display:none} }

/* Sélecteur de langue : deux cases, la langue courante en plein */
.lang{display:flex; flex:none; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-ctl); overflow:hidden}
.site-nav .lang a{
  padding:5px 8px 4px; border-bottom:none; font-size:13px; letter-spacing:.06em;
  color:var(--band-ink-2); transition:background .15s, color .15s;
}
.site-nav .lang a:hover{color:var(--band-ink); background:rgba(255,255,255,.08)}
.site-nav .lang a[aria-current]{background:var(--band-ink); color:var(--band)}

.icon-btn{
  width:34px; height:34px; flex:none; display:grid; place-items:center; padding:0;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-ctl);
  background:transparent; color:var(--band-ink); cursor:pointer;
  transition:border-color .15s, background .15s;
}
.icon-btn:hover{border-color:var(--band-ink); background:rgba(255,255,255,.08)}
.icon-btn:focus-visible{outline-color:var(--band-ink)}

@media (max-width:640px){
  .head-in{padding:12px 16px; gap:12px}
  .brand .wordmark{font-size:24px}
  .brand .mark{width:24px}
  .site-nav{gap:12px}
  .site-nav a{font-size:14px}
  .site-nav a.cta{padding:7px 11px}
  /* La place manque : les liens de texte passent au pied de page */
  .site-nav > a:not(.cta){display:none}
  .brand .wordmark{font-size:22px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}