/* ============================================================
   THE NAUGHTY GOLFER — base.css
   Reset, éléments natifs, layout applicatif.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* LA POLICE DE L'APPLICATION, DÉCLARÉE UNE FOIS ET UNE SEULE.

   Sur le sélecteur universel et non sur body : en CSS, les boutons,
   les champs de saisie et les cellules de tableau n'héritent PAS de la
   police du document. C'est exactement par là que la seconde police
   s'était installée dans la carte de score.

   Aucune autre règle de l'application ne déclare font-family. Avant
   d'en ajouter une, se demander pourquoi cette app aurait deux
   polices : la réponse a toujours été non. */
*, *::before, *::after { font-family: var(--font); }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--t-base);
  font-weight: var(--w-regular);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;

  /* Chiffres à largeur égale dans TOUTE l'application, hérité par
     tout ce qui descend du body — tableau de score compris.

     C'est ce qui remplace la monospace supprimée de tokens.css :
     l'alignement des colonnes de chiffres était sa seule raison
     d'être. Une seule déclaration, à la racine, plutôt qu'une par
     règle qui manipule des chiffres — ces déclarations-là finissent
     toujours par en oublier une.

     Effet secondaire utile : les pastilles « Par 3 » et « Par 5 »,
     les compteurs de coups et les totaux ne changent plus de largeur
     quand leur valeur change. */
  font-variant-numeric: tabular-nums;

  /* Rien ne bouge pendant le scoring : pas de rebond, pas de zoom accidentel. */
  overscroll-behavior-y: none;
  touch-action: manipulation;
}

/* Sécurise les encoches iPhone, l'app est utilisée en portrait tenu à une main. */
#app {
  /* HAUTEUR FIXE, PAS MINIMALE.

     Avec `min-height`, la colonne grandissait au-delà de la fenêtre
     dès que le contenu était long : c'était alors la PAGE qui
     défilait, pas le corps de l'écran. La barre du bas, collante,
     restait posée sur du contenu qui glissait dessous, et le
     bandeau décoratif recouvrait ce qui ne pouvait pas s'écarter.

     Avec une hauteur fixe, le corps défile à l'intérieur — ce que
     `overflow-y: auto` demandait depuis toujours sans pouvoir
     l'obtenir — et la barre reste posée au bas de l'écran, hors du
     flux du contenu. C'est le fonctionnement de toute application :
     l'ossature ne bouge pas, seul le contenu glisse. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);

  /* Sur grand écran, l'app reste une colonne de la largeur d'un téléphone.
     Étalée sur 2000 px, l'interface ne veut plus rien dire : les cibles
     tactiles deviennent des bandeaux et on ne juge plus rien du design. */
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
}

/* ------------------------------------------------------------
   SUR GRAND ÉCRAN, LA COLONNE DEVIENT UN TÉLÉPHONE POSÉ LÀ

   `min-height: 100dvh` est juste sur un téléphone : la colonne fait
   la hauteur de l'écran. Sur un ordinateur, elle prenait la hauteur
   de la FENÊTRE — 1400 px et plus — et chaque écran devait s'étirer
   pour la remplir. D'où les grands vides : ils n'existaient que là,
   jamais sur l'appareil auquel l'app est destinée.

   La colonne est donc plafonnée à la hauteur d'un grand téléphone et
   centrée dans la fenêtre. Ce qu'on voit à l'écran devient ce que le
   parent verra sur le parcours, sans passer par les outils de
   développement.

   932 px : la hauteur utile d'un iPhone 15 Pro Max, le plus grand du
   parc. Sur une fenêtre plus courte, `min()` rend la main à la
   fenêtre — on ne fabrique jamais une colonne plus haute que l'écran
   qui l'affiche.
   ------------------------------------------------------------ */
@media (min-width: 520px) {
  body {
    background: var(--paper-sunk);
    /* Centre la colonne verticalement dans la fenêtre. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
  }

  #app {
    height: min(100dvh, 932px);
    min-height: 0;
    overflow: hidden;
    border: var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 40px rgba(20, 38, 28, 0.10);
  }
}

h1, h2, h3 {
  font-weight: var(--w-black);
  letter-spacing: var(--track-tight);
  line-height: 1.1;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

input, select {
  font: inherit;
  color: inherit;
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  min-height: var(--touch-min);
  width: 100%;
}

input::placeholder { color: var(--ink-faint); }

/* Les flèches d'un champ numérique sont trop petites pour un pouce
   et volent de la place au clavier numérique. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

ul, ol { list-style: none; }

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---------- Zones structurelles de l'écran ---------------- */

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.screen__head {
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: var(--border);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}

.screen__body {
  flex: 1;
  /* INDISPENSABLE, et longtemps absent.

     Dans une colonne flexible, un enfant ne rétrécit jamais sous la
     taille de son contenu tant qu'on ne l'y autorise pas. Sans cette
     ligne, `overflow-y: auto` ne servait à rien : au lieu de faire
     défiler son contenu, le corps GRANDISSAIT, et la colonne entière
     dépassait la fenêtre. Les derniers éléments de chaque page
     passaient alors sous la barre du bas.

     C'est ce qui expliquait qu'un bouton se retrouve caché sans
     qu'aucune règle ne le recouvre : rien ne passait dessus, c'est la
     page qui débordait dessous. */
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-4);

  /* `-webkit-overflow-scrolling: touch` A ÉTÉ RETIRÉ D'ICI.

     Cette propriété demandait à iOS de confier le défilement à un
     moteur natif séparé, à l'époque où c'était le seul moyen d'avoir
     de l'inertie. Ce moteur DESSINE SON PROPRE INDICATEUR par-dessus
     le contenu, et cet indicateur n'obéit ni à `scrollbar-width` ni à
     `::-webkit-scrollbar` : c'est l'ombre qui apparaissait sur le
     côté pendant le geste et disparaissait à l'arrêt.

     Elle est obsolète depuis iOS 13 : l'inertie est le comportement
     par défaut. La retirer ne change donc rien à la sensation du
     défilement, et rend la couche native inutile — donc son
     indicateur avec.

     Elle n'a jamais rien fait sur autre chose qu'un WebKit ancien. */
}

.screen__foot {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: var(--border);
  background: var(--paper);
}

/* ---------- Utilitaires typographiques -------------------- */

.eyebrow {
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* Conservée pour ne pas casser le HTML qui la porte déjà, mais elle
   ne fait plus rien de particulier : la police est unique et les
   chiffres tabulaires viennent du body. Ne plus l'ajouter ailleurs. */
.num {
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack     { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--sm { gap: var(--s-2); }
.row       { display: flex; align-items: center; gap: var(--s-3); }
.row--between { justify-content: space-between; }