/* ==========================================================================
   Souche, les jetons
   Outil de devis et de relance pour l'artisan du bâtiment.
   Conception du 06/09/2026, voie Claude Code. Direction « Carnet à souches ».

   Ce fichier est le seul endroit où vivent les valeurs. Le code de production
   l'importe tel quel. Aucune taille, aucune couleur, aucun espacement ne
   s'écrit à la main ailleurs.

   Aucune dépendance réseau : les polices sont dans polices/ à côté.
   ========================================================================== */

@import url("polices/polices.css");

:root {
  /* --- Couleurs, six rôles et deux nuances de papier ---------------------- */
  --papier:          oklch(97.8% 0.008 75);   /* le fond de tous les écrans */
  --papier-creux:    oklch(95.4% 0.011 75);   /* bande de souche, zones en retrait */
  --papier-creux-2:  oklch(92.6% 0.013 75);   /* second retrait, entêtes de tableau */
  --encre:           oklch(24% 0.014 60);     /* texte principal */
  --encre-pale:      oklch(47% 0.012 60);     /* secondes lignes, légendes */
  --encre-tres-pale: oklch(66% 0.010 60);     /* texte d'aide, jamais porteur de sens seul */
  --trait:           oklch(86% 0.012 70);     /* filets entre les lignes */
  --trait-fort:      oklch(70% 0.014 65);     /* le trait de crayon, sous un titre */

  --cuivre:          oklch(56% 0.135 52);     /* l'accent, une seule chose par écran */
  --cuivre-sombre:   oklch(44% 0.125 50);     /* texte sur papier, impression */
  --cuivre-voile:    oklch(93% 0.035 60);     /* aplat très pâle sous un bloc d'accent */

  --brique:          oklch(50% 0.16 27);      /* alerte : en retard, mention manquante, échec */
  --brique-voile:    oklch(94% 0.032 30);
  --patine:          oklch(45% 0.085 158);    /* réussite : signé, vérifié, validé */
  --patine-voile:    oklch(94% 0.030 158);
  --ardoise:         oklch(44% 0.030 250);    /* calme : sans suite, expiré, rien à faire */
  --ardoise-voile:   oklch(94% 0.012 250);

  /* --- Caractères : deux familles, pas une de plus ------------------------ */
  --texte:  "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --chiffre: "IBM Plex Mono", "Courier New", monospace;

  /* --- Échelle de tailles, ratio 1,25 (outil dense) ----------------------- */
  --t-00: 0.80rem;   /* 12,8 px : mentions de pied, sources */
  --t-0:  1.00rem;   /* 16 px   : légendes, libellés de champ */
  --t-1:  1.031rem;  /* 16,5 px : texte courant, plancher de lisibilité */
  --t-2:  1.25rem;   /* 20 px   : sous-titres, montants de ligne */
  --t-3:  1.563rem;  /* 25 px   : titres de bloc */
  --t-4:  1.953rem;  /* 31,3 px : titres d'écran */
  --t-5:  2.441rem;  /* 39,1 px : titre du site de présentation en petit écran */
  /* Hors échelle courante, réservés aux chiffres héros de ecran-aujourdhui */
  --t-heros:       3.5rem;   /* 56 px, téléphone */
  --t-heros-large: 4.5rem;   /* 72 px, ordinateur */

  --interligne-titre: 1.12;
  --interligne:       1.55;
  --mesure:           68ch;   /* largeur de ligne bornée du texte courant */

  /* --- Espacement, pas réguliers ----------------------------------------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  /* --- Rayons et traits : le papier ne s'arrondit pas --------------------- */
  --rayon:       2px;
  --rayon-badge: 999px;
  --filet:       1px;
  --filet-fort:  3px;   /* le trait de crayon de charpentier */

  /* --- Cible tactile ------------------------------------------------------ */
  --cible: 44px;

  /* --- Durées, toutes justifiées dans 02-direction-artistique.md ---------- */
  --d-ecran:    220ms;
  --d-souche:   280ms;
  --d-ligne:    400ms;
  --d-badge:    180ms;
  --d-jours:    240ms;
  --d-ouverture: 700ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mouvement réduit : plus rien ne bouge, tout est là d'emblée. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-ecran: 0ms; --d-souche: 0ms; --d-ligne: 0ms;
    --d-badge: 0ms; --d-jours: 0ms; --d-ouverture: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Assises communes
   ========================================================================== */

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

/* Un élément caché le reste, même si un composant lui donne un display. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-1);
  line-height: var(--interligne);
  /* La trame du papier : une matière, pas une image. */
  background-image:
    radial-gradient(circle at 1px 1px, oklch(88% 0.014 70 / 0.55) 1px, transparent 0);
  background-size: 22px 22px;
}

h1, h2, h3 {
  font-family: var(--texte);
  font-weight: 700;
  line-height: var(--interligne-titre);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--mesure); }

/* Focus visible partout, jamais retiré. */
:focus-visible {
  outline: 3px solid var(--cuivre);
  outline-offset: 2px;
}

/* --- Le trait de crayon de charpentier : la seule façon de souligner ----- */
.trait-crayon {
  display: block;
  width: 56px;
  height: var(--filet-fort);
  background: var(--encre);
  margin-block: var(--e-3) var(--e-4);
}
.trait-crayon--cuivre { background: var(--cuivre); }

/* --- Les chiffres : toujours en mono, toujours alignés ------------------- */
.chiffre {
  font-family: var(--chiffre);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* --- La signature Local Booster, partout, toujours pareille -------------- */
.signature {
  font-family: var(--texte);
  font-size: var(--t-00);
  color: var(--encre-tres-pale);
  letter-spacing: 0.02em;
  padding-block: var(--e-4);
  border-top: var(--filet) solid var(--trait);
  margin-top: var(--e-6);
}

/* --- Le lien : souligné, jamais une flèche ------------------------------- */
a {
  color: var(--cuivre-sombre);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }