/* ==========================================================================
   CHAMPIONNAT HEAT — feuille de style
   Identité : programme de course, bleu de France, vibreur rouge/blanc.
   Thème clair.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --fond:       #eceff5;
  --carte:      #ffffff;
  --carte-2:    #f5f7fa;
  --trait:      #d6dce6;
  --trait-fort: #b8c2d1;

  --encre:      #131a26;
  --encre-mi:   #47536580;
  --encre-pale: #5a6577;

  --bleu:       #1746c4;
  --bleu-clair: #e8eeff;
  --rouge:      #c8102e;
  --ambre:      #a8670a;
  --ambre-clair:#fdf3e0;
  --violet:     #6534b0;
  --vert:       #12704b;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --corps:   'IBM Plex Sans', system-ui, sans-serif;
  --data:    'IBM Plex Mono', ui-monospace, monospace;

  --col: 860px;
  --ombre: 0 1px 2px rgba(19,26,38,.05), 0 4px 14px rgba(19,26,38,.05);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--encre); }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 2px; }

/* --- vibreur (signature) ------------------------------------------------- */

.vibreur {
  height: 7px;
  background: repeating-linear-gradient(-45deg, var(--rouge) 0 12px, #fff 12px 24px);
}

/* --- en-tête ------------------------------------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete__interieur {
  max-width: var(--col); margin: 0 auto; padding: 11px 22px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.marque {
  font-family: var(--display); font-weight: 800; font-size: 14.5px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--encre); text-decoration: none; white-space: nowrap;
}
.marque span { color: var(--bleu); }

.nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.nav a {
  font-family: var(--data); font-size: 11.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-pale); text-decoration: none;
  padding: 6px 10px; border-radius: 3px;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--encre); background: var(--carte-2); }
.nav a[aria-current="page"] { color: var(--bleu); background: var(--bleu-clair); font-weight: 600; }

/* --- structure ----------------------------------------------------------- */

.page { max-width: var(--col); margin: 0 auto; padding: 0 22px 110px; }

.chapeau { padding: 48px 0 26px; }
.oeil {
  font-family: var(--data); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--bleu);
  margin: 0 0 12px;
}
h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 6.5vw, 3.2rem); line-height: .97;
  letter-spacing: -.025em; text-transform: uppercase;
  margin: 0 0 16px;
}
.lede { font-size: 1.06rem; color: var(--encre-pale); max-width: 62ch; margin: 0; }

h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem); line-height: 1.12;
  letter-spacing: -.005em; text-transform: uppercase;
  margin: 54px 0 14px; padding-top: 20px; border-top: 2px solid var(--encre);
}
h2 .num {
  font-family: var(--data); font-size: .6em; font-weight: 600;
  color: var(--bleu); letter-spacing: .12em; margin-right: 11px; vertical-align: .14em;
}
h3 {
  font-family: var(--display); font-weight: 600; font-size: .98rem;
  letter-spacing: .06em; text-transform: uppercase; margin: 30px 0 10px;
}
h4 {
  font-family: var(--data); font-weight: 600; font-size: .76rem;
  letter-spacing: .13em; text-transform: uppercase; margin: 24px 0 8px;
  color: var(--encre-pale);
}
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 1.15em; }
li { margin-bottom: 7px; }
li::marker { color: var(--bleu); }

/* --- cartes génériques --------------------------------------------------- */

.carte {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 6px; padding: 22px; box-shadow: var(--ombre); margin: 20px 0;
}
.carte > :last-child { margin-bottom: 0; }

.encart {
  border: 1px solid var(--trait); border-left: 3px solid var(--bleu);
  background: var(--carte); border-radius: 0 5px 5px 0;
  padding: 16px 18px; margin: 22px 0;
}
.encart > :last-child { margin-bottom: 0; }
.encart__titre {
  font-family: var(--data); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); margin: 0 0 7px;
}
.encart--alerte { border-left-color: var(--ambre); background: var(--ambre-clair); }
.encart--alerte .encart__titre { color: var(--ambre); }
.encart--danger { border-left-color: var(--rouge); }
.encart--danger .encart__titre { color: var(--rouge); }

/* --- prochaine manche (accueil) ------------------------------------------ */

.prochaine {
  background: var(--encre); color: #fff; border-radius: 8px;
  padding: 30px 28px; margin: 8px 0 0; position: relative; overflow: hidden;
}
.prochaine::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: repeating-linear-gradient(-45deg, var(--rouge) 0 10px, #fff 10px 20px);
}
.prochaine__etiq {
  font-family: var(--data); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #7fa4ff; margin: 6px 0 12px;
}
.prochaine__nom {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.8rem, 5.5vw, 2.6rem); line-height: 1;
  text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 6px;
}
.prochaine__meta {
  font-family: var(--data); font-size: .95rem; color: #c3cbdb; margin: 0;
}
.prochaine__faits {
  display: flex; gap: 28px; flex-wrap: wrap; margin: 22px 0 0;
  padding-top: 18px; border-top: 1px solid #2b3546;
}
.prochaine__fait b {
  display: block; font-family: var(--data); font-size: .66rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: #8b95a8; margin-bottom: 3px;
}
.prochaine__fait span { font-size: .95rem; }

/* --- tableaux ------------------------------------------------------------ */

.tableau-boite {
  overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 6px; box-shadow: var(--ombre);
}
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 440px; }
thead th {
  font-family: var(--data); font-size: .66rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-pale);
  text-align: left; padding: 12px 14px 9px; border-bottom: 1px solid var(--trait);
  white-space: nowrap; background: var(--carte-2);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { font-family: var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.dr, td.dr { text-align: right; }
.compact tbody td { padding: 8px 14px; }

/* --- classement ---------------------------------------------------------- */

.pos {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  width: 40px; color: var(--encre-pale);
}
tbody tr:nth-child(1) .pos { color: #9a7b18; }
tbody tr:nth-child(2) .pos { color: #77808e; }
tbody tr:nth-child(3) .pos { color: #96622f; }
.pilote { font-weight: 600; }
.pts {
  font-family: var(--data); font-weight: 600; font-size: 1.02rem;
  text-align: right; font-variant-numeric: tabular-nums;
}
.ecart { font-family: var(--data); font-size: .8rem; color: var(--encre-pale); }

/* pastille de couleur de voiture */
.voiture {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.22); margin-right: 9px; vertical-align: -1px;
}
.v-rouge{background:#d5253a}.v-bleu{background:#2464c8}.v-vert{background:#2f9e63}
.v-jaune{background:#e9bd2a}.v-noir{background:#2c3340}.v-blanc{background:#f2f2f0}
.v-libre{background:transparent;border-style:dashed}

/* --- pastilles ----------------------------------------------------------- */

.etiq {
  display: inline-block;
  font-family: var(--data); font-size: .64rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; border: 1px solid var(--trait);
  color: var(--encre-pale); background: var(--carte-2); white-space: nowrap;
}
.etiq--base   { border-color:#b9caf0; color:#1746c4; background:#eef3ff; }
.etiq--pluie  { border-color:#a8d5e2; color:#12657c; background:#eaf6fa; }
.etiq--tunnel { border-color:#c9b6ec; color:var(--violet); background:#f3edfd; }
.etiq--roc    { border-color:#e3c98f; color:var(--ambre); background:#fdf5e6; }
.etiq--fait   { border-color:#a9d8bf; color:var(--vert); background:#eaf7f0; }
.etiq--suivant{ border-color:var(--encre); color:#fff; background:var(--encre); }

/* --- fiches circuits ----------------------------------------------------- */

.circuit {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 6px;
  box-shadow: var(--ombre); margin: 16px 0; overflow: hidden;
}
.circuit__corps { padding: 20px 22px; }
.circuit__tete { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.circuit__nom {
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  text-transform: uppercase; letter-spacing: -.01em; margin: 0;
}
.circuit__manche {
  font-family: var(--data); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; color: var(--bleu); text-transform: uppercase;
}
.circuit__regle { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--trait); font-size: .93rem; }
.circuit__regle > :last-child { margin-bottom: 0; }

/* plan du circuit */
/* Les images sont les cartes Circuit, recadrées au ras de l'illustration.
   Le liseré est refait ici, uniforme sur les dix — celui du scan variait de
   34 à 78 px selon la carte. Trois couches, de l'intérieur vers l'extérieur :
   l'illustration aux coins arrondis, le liseré blanc, le filet gris foncé.
   Le fond de montage est en carte-2 : sur du blanc, le liseré ne se verrait pas. */
.plan { margin: 0; background: var(--carte-2); padding: 14px; border-bottom: 1px solid var(--trait); }
.plan img {
  display: block; width: 100%; height: auto;
  border: 24px solid #fff;          /* liseré blanc */
  border-radius: 32px;              /* le rayon intérieur vaut 32 − 24 = 8 px */
  /* Filet 1 px à l'extérieur du blanc, puis l'ombre portée. C'est l'ombre qui
     détache la carte, d'où un filet clair : même idiome que --ombre, un cran
     plus marqué parce qu'une carte doit se soulever du fond. */
  box-shadow: 0 0 0 1px var(--trait-fort),
              0 1px 3px rgba(19, 26, 38, .08),
              0 5px 14px rgba(19, 26, 38, .07);
}

/* Sur téléphone, 24 px de blanc de chaque côté mangeraient près d'un sixième
   de la largeur utile. On revient à 12 px, rayon intérieur inchangé. */
@media (max-width: 640px) {
  .plan { padding: 10px; }
  .plan img { border-width: 12px; border-radius: 20px; }
}

.plan__vide {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 150px; padding: 26px 20px; text-align: center;
  color: var(--trait-fort);
}
.plan__vide svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.plan__vide code {
  font-family: var(--data); font-size: .72rem; color: var(--encre-pale);
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 3px; padding: 2px 7px;
}

/* --- icônes -------------------------------------------------------------- */

.ic {
  width: 1.3em; height: 1.3em; flex: none; vertical-align: -.3em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ic .damier { fill: currentColor; stroke: none; }
img.ic-img { object-fit: contain; display: inline-block; }

.ic-chaleur { color: var(--ambre); }
.ic-froid   { color: var(--bleu); }
.ic-super   { color: var(--violet); }
.ic-danger  { color: var(--rouge); }
.ic-ok      { color: var(--vert); }

.effets {
  list-style: none; padding: 0; margin: 16px 0;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 6px; box-shadow: var(--ombre); overflow: hidden;
}
.effets li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 18px; border-bottom: 1px solid var(--trait); margin: 0;
}
.effets li:last-child { border-bottom: 0; }
.effets .ic { width: 24px; height: 24px; margin-top: 2px; vertical-align: 0; }
.effets b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px;
}
.effets span { font-size: .92rem; color: var(--encre-pale); line-height: 1.5; }
.effets span em { color: var(--encre); font-style: normal; font-weight: 600; }
.ext {
  font-family: var(--data); font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; color: var(--violet); margin-left: 6px;
}

.jeton {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--carte-2); border: 1px solid var(--trait); border-radius: 3px;
  padding: 1px 7px 2px; font-family: var(--data); font-size: .76rem; white-space: nowrap;
}
.jeton .ic { width: 14px; height: 14px; vertical-align: 0; }

/* --- séquence du tour ---------------------------------------------------- */

.sequence {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 22px; padding: 0; list-style: none;
}
.sequence li {
  display: flex; align-items: baseline; gap: 7px; margin: 0;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 4px;
  padding: 7px 11px; font-size: .84rem;
}
.sequence li.cle { border-color: var(--bleu); background: var(--bleu-clair); }
.sequence b {
  font-family: var(--data); font-size: .76rem; font-weight: 600; color: var(--bleu);
}

/* --- résultats ----------------------------------------------------------- */

.manche {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 6px;
  box-shadow: var(--ombre); margin: 18px 0; overflow: hidden;
}
.manche__tete {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--trait); background: var(--carte-2);
}
.manche__n {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: var(--trait-fort);
}
.manche__nom {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; margin: 0;
}
.manche__date { font-family: var(--data); font-size: .82rem; color: var(--encre-pale); margin-left: auto; }
.manche__corps { padding: 4px 0; }
.manche__note {
  padding: 14px 20px; border-top: 1px solid var(--trait);
  font-size: .9rem; color: var(--encre-pale); background: var(--carte-2);
}
.manche__note b {
  font-family: var(--data); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--encre); display: block; margin-bottom: 3px;
}
.manche--vide { opacity: .62; }

/* --- divers -------------------------------------------------------------- */

.a-remplir {
  color: var(--ambre); font-family: var(--data); font-size: .93em;
  background: var(--ambre-clair); padding: 0 4px; border-radius: 2px;
}
.grille-cartes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0;
}
.lien-carte {
  display: block; text-decoration: none; color: inherit;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 6px;
  padding: 18px; box-shadow: var(--ombre);
  transition: border-color .15s, transform .15s;
}
.lien-carte:hover { border-color: var(--bleu); transform: translateY(-2px); }
.lien-carte b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  text-transform: uppercase; margin-bottom: 5px;
}
.lien-carte span { font-size: .88rem; color: var(--encre-pale); line-height: 1.45; }

.pied {
  border-top: 1px solid var(--trait); margin-top: 70px; padding: 22px 0 30px;
  font-family: var(--data); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--encre-pale);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.retour {
  display: inline-block; font-family: var(--data); font-size: .73rem;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--encre-pale); margin-top: 34px;
}
.retour:hover { color: var(--bleu); }

/* --- impression ---------------------------------------------------------- */

@media print {
  @page { margin: 12mm; }
  body { background: #fff; font-size: 9.8pt; line-height: 1.4; }
  /* .bloc-ecran : sections qui n'ont de sens qu'à l'écran (liens, téléchargements). */
  .entete, .vibreur, .pied, .retour, .grille-cartes, .bloc-ecran { display: none !important; }
  .page { max-width: 100%; padding: 0; }
  .chapeau { padding: 0 0 10px; }
  h1 { font-size: 20pt; }
  h2 { font-size: 12pt; margin: 16px 0 6px; page-break-after: avoid; }
  h3, h4 { page-break-after: avoid; }
  .carte, .encart, .circuit, .manche, .effets li, .tableau-boite, .sequence li { page-break-inside: avoid; }
  .carte, .encart, .circuit, .manche, .effets, .tableau-boite { box-shadow: none; }
  .effets li { padding: 7px 10px; }
  .prochaine { background: #fff; color: #000; border: 1px solid #000; }
  .prochaine__etiq, .prochaine__meta, .prochaine__fait b { color: #444; }
  a { color: #000; text-decoration: none; }
  table { min-width: 0; }
  img.ic-img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan { display: none; }
}

/* --- portraits de pilotes ------------------------------------------------ */

.portrait {
  display: block; width: 52px; height: 52px; object-fit: cover;
  border-radius: 50%; background: var(--carte-2);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--trait-fort);
}
.portrait--grand { width: 76px; height: 76px; }
/* Repli quand aucune photo n'est déclarée : initiale sur fond neutre. */
.portrait--vide {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--data); font-size: .95rem; font-weight: 600;
  color: var(--encre-pale); text-transform: uppercase;
}

/* --- livrets de règles --------------------------------------------------- */

.livrets { list-style: none; margin: 14px 0 0; padding: 0; }
.livret {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; margin: 0 0 8px;
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 3px solid var(--bleu); border-radius: 6px; box-shadow: var(--ombre);
}
.livret__texte { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.livret__texte b { font-size: .98rem; }
.livret__meta {
  font-family: var(--data); font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--encre-pale);
}
.livret__note { font-size: .88rem; color: var(--encre-pale); }
.livret__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.livret__lien {
  font-family: var(--data); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; padding: 8px 13px; border-radius: 4px;
  background: var(--encre); color: #fff; border: 1px solid var(--encre);
  transition: background .15s, border-color .15s;
}
.livret__lien:hover { background: var(--bleu); border-color: var(--bleu); }
.livret__source {
  font-family: var(--data); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-pale); text-decoration: none;
  border-bottom: 1px solid var(--trait); white-space: nowrap;
}
.livret__source:hover { color: var(--bleu); border-bottom-color: var(--bleu); }

/* --- fiches de sauvegarde ------------------------------------------------ */

.fiche {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 6px;
  box-shadow: var(--ombre); margin: 14px 0; overflow: hidden;
}
.fiche__tete {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 18px; background: var(--carte-2); border-bottom: 1px solid var(--trait);
}
.fiche__couleur {
  font-family: var(--data); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-pale);
}
.fiche__corps {
  padding: 16px 18px; display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  /* Les contrôles s'alignent sur le bas de la rangée. Une étiquette plus longue
     qu'une autre — « Alexandre — Grille » contre « Arrivée » — passe sur deux
     lignes et décalerait son champ vers le bas ; ici elle grandit vers le haut
     et les deux champs restent sur la même ligne. */
  align-items: end;
}
.champ-form { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* .etiq-champ coiffe un groupe de cases : chaque case porte déjà son propre
   label, donc le titre du groupe n'est pas un label — il n'étiquette aucun
   contrôle. Même allure, élément honnête. */
.champ-form > label, .champ-form > .etiq-champ {
  font-family: var(--data); font-size: .64rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--encre-pale);
}
.plein { grid-column: 1 / -1; }
/* Une grille de champs déjà posée dans une barre : la barre fournit le cadre. */
.fiche__corps--nu { padding: 0; }

/* Tout ce qui se saisit, sauf ce qui n'est pas un champ. Lister les types un à
   un laissait « time », « email » et « password » sans style : la page de
   connexion s'affichait avec les contrôles bruts du navigateur, et la date
   voisinait une heure de hauteur différente. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
select, textarea {
  font-family: var(--corps); font-size: .92rem; color: var(--encre);
  background: var(--carte-2); border: 1px solid var(--trait);
  border-radius: 4px; padding: 7px 9px; width: 100%;
  /* Une hauteur plancher commune : sans elle, une liste, une date et un texte
     dans la même rangée ne font pas la même hauteur selon le navigateur. */
  min-height: 36px;
}
/* Safari impose sa propre apparence — et sa propre hauteur — aux listes et aux
   champs date et heure. Les remettre à plat rétablit l'alignement de la rangée.
   Les champs nombre en sont exclus : ils garderaient leurs flèches, utiles à la
   souris pour une place de grille. */
select, input[type="date"], input[type="time"] {
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--bleu); background: #fff; outline: none; }
textarea { min-height: 64px; resize: vertical; font-size: .88rem; line-height: 1.5; }
input[type="number"], input[type="date"], input[type="time"] { font-family: var(--data); }
/* Une flèche dessinée : appearance:none retire celle du navigateur. */
select {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre-pale) 50%),
                    linear-gradient(135deg, var(--encre-pale) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
/* Un contrôle qui garde sa largeur naturelle au milieu d'une barre. */
.champ-auto { width: auto; }

/* --- drapeaux ------------------------------------------------------------- */

/* Dessinés dans src/flags.js. Dimensionnés en em pour suivre le texte à côté
   duquel ils se posent, du nom de circuit d'une case à cocher au titre de la
   prochaine manche. */
.drapeau {
  width: 1.42em; height: .95em; flex: none;
  border-radius: 1.5px; vertical-align: -.11em;
  /* Un filet, sinon le blanc du Japon et des Pays-Bas se perd dans la carte. */
  box-shadow: 0 0 0 .5px rgba(19, 26, 38, .3);
}
/* Sur le bloc sombre de l'accueil, c'est l'inverse : le filet doit être clair. */
.prochaine .drapeau { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .4); }

/* Le repli quand un circuit n'a pas de dessin : le code du pays, lisible, plutôt
   qu'un glyphe cassé ou un blanc. */
.drapeau-code {
  font-family: var(--data); font-size: .62em; font-weight: 600;
  letter-spacing: .08em; color: var(--encre-pale);
  border: 1px solid var(--trait); border-radius: 2px;
  padding: 0 3px; vertical-align: .1em;
}

/* --- cases à cocher ------------------------------------------------------- */

/* .champ-form > label est une étiquette de groupe en capitales ; le texte à
   côté d'une case se lit, donc il reprend le corps de texte. */
.case {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--corps); font-size: .92rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--encre);
  /* La cible tactile fait toute la hauteur de la ligne, pas seulement la case. */
  min-height: 30px; cursor: pointer;
}
.case input[type="checkbox"] {
  width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--bleu);
}
.cases { display: flex; flex-wrap: wrap; gap: 4px 20px; }

.barre-outils {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 18px 0; padding: 14px 16px;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 6px; box-shadow: var(--ombre);
}
/* Une barre qui contient des champs et non seulement des boutons. L'étiquette
   monte au-dessus de son contrôle, donc les enfants s'alignent par le bas et le
   bouton tombe sur la ligne des champs ; centrés, ils flotteraient à mi-hauteur
   de l'étiquette. */
.barre-outils--champs { align-items: flex-end; row-gap: 12px; }
/* Une barre qui sert de cadre à un formulaire vertical. */
.barre-outils--bloc { display: block; }
/* La rangée de boutons qui ferme un bloc. */
.pied { margin-top: 13px; }

/* Un nombre à deux chiffres n'a pas besoin de la largeur d'un nom. */
.champ-form--nombre { flex: 0 0 7.5rem; }
.champ-form--souple { flex: 1 1 14rem; }

/* Le chapô gris d'une section. Répété sur cinq pages en style en ligne. */
.note { font-size: .93rem; color: var(--encre-pale); }
.sans-marge { margin: 0; }
/* Les petits formulaires d'une action unique, côte à côte dans une barre. */
.en-ligne { display: inline; }
.en-ligne--champs { display: flex; gap: 8px; align-items: center; }
.bouton {
  font-family: var(--data); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 14px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--trait); background: var(--carte); color: var(--encre);
  transition: border-color .15s, color .15s;
}
.bouton:hover { border-color: var(--bleu); color: var(--bleu); }
.bouton--fort { background: var(--encre); color: #fff; border-color: var(--encre); }
.bouton--fort:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bouton--danger:hover { border-color: var(--rouge); color: var(--rouge); }
.etat { font-family: var(--data); font-size: .7rem; color: var(--encre-pale); margin-left: auto; }
.etat--ok { color: var(--vert); }
.etat--ko { color: var(--ambre); }

/* --- formulaires sur téléphone -------------------------------------------- */

@media (max-width: 640px) {
  /* Safari iOS zoome sur un champ dont le texte fait moins de 16 px, et ne
     dézoome pas en sortant. Sur une page de formulaires utilisée en cours de
     partie, un zoom involontaire à chaque saisie est intenable. 16 px pile. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
  select, textarea { font-size: 16px; }

  /* Une barre de champs devient une colonne : un champ par ligne, sauf les
     nombres qui tiennent à deux, et le bouton sur toute la largeur — il est en
     bas de la colonne, là où tombe le pouce. */
  .barre-outils--champs { align-items: stretch; }
  .champ-form--souple { flex: 1 1 100%; }
  .champ-form--nombre { flex: 1 1 6rem; }
  .barre-outils--champs > .bouton { flex: 1 1 100%; }

  /* La grille des fiches garde son auto-fit : elle passe d'elle-même à une
     colonne quand 140 px n'y tiennent plus. La forcer à une colonne séparerait
     la grille et l'arrivée d'un même pilote sur deux rangées, alors que les
     deux nombres se lisent ensemble. Seules les marges se resserrent. */
  .fiche__corps { padding: 14px 15px; gap: 12px 11px; }
  .barre-outils { padding: 13px 14px; }
  /* Un bouton isolé dans une barre prend la largeur : même raison. */
  .barre-outils > .bouton:only-child { width: 100%; }
}

.controle { display: flex; gap: 26px; flex-wrap: wrap; }
.controle div { font-family: var(--data); font-size: .85rem; }
.controle b {
  display: block; font-size: .64rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-pale); margin-bottom: 2px;
}
.controle span { font-size: 1.25rem; font-weight: 600; }

@media print {
  /* .encart--outil décrit les boutons : sans eux, il n'a plus d'objet. */
  .barre-outils, .etat, .encart--outil { display: none !important; }
  .fiche { page-break-inside: avoid; box-shadow: none; }
  .fiche__corps { gap: 9px; }
  /* Même sélecteur qu'à l'écran, pour la même raison : lister les types laissait
     l'heure et l'e-mail sortir en gris sur une feuille noir et blanc. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
  select, textarea {
    background: #fff; border-color: #999; padding: 4px 6px; font-size: 9pt;
    min-height: 0;
  }
  textarea { min-height: 46px; }
  .champ-form > label, .champ-form > .etiq-champ { color: #000; }
  /* La flèche dessinée du select est un fond : il ne part pas à l'impression. */
  select { background-image: none; padding-right: 6px; }
  .case { min-height: 0; }
  /* Un drapeau en aplats sort en gris sur une page noir et blanc, et le nom du
     circuit dit déjà le pays. */
  .drapeau, .drapeau-code { display: none; }
}

/* --- session strip ------------------------------------------------------- */

.session {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--data); font-size: .68rem; letter-spacing: .06em;
  color: var(--encre-pale);
}
.session a { color: var(--encre-pale); text-decoration: none; border-bottom: 1px solid var(--trait); }
.session a:hover { color: var(--bleu); border-bottom-color: var(--bleu); }
.session .bouton { padding: 5px 10px; font-size: .64rem; }

@media print { .session { display: none !important; } }