/* ==========================================================================
   Fondations : variables de conception, réinitialisation, typographie.
   Chargée en premier sur toutes les pages.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Couleurs (identité vert forêt / crème) ---------- */
  --couleur-primaire: #1F6F5C;
  --couleur-accent-clair: #E4F0EC;
  --couleur-fond: #F3F6F4;
  --couleur-surface: #FFFFFF;
  --couleur-texte: #14201C;
  --couleur-texte-secondaire: #62726A;
  --couleur-texte-attenue: #8B9992;
  --couleur-fond-attenue: #EAF0EC;
  --couleur-bordure: #DCE3DF;
  --couleur-bordure-forte: #C3CDC7;

  --couleur-succes: #0E4B3D;
  --couleur-succes-clair: #E4F0EC;
  --couleur-alerte: #A87A0A;
  --couleur-alerte-clair: #F7ECD3;
  --couleur-danger: #B23A3A;
  --couleur-danger-clair: #FBEBEA;
  --couleur-info: #2C5F8A;
  --couleur-info-clair: #E3EBF3;
  --couleur-violet: #6B4C8A;
  --couleur-violet-clair: #EEE7F3;

  /* Teintes éclaircies réservées au texte dense de la colonne Pointages : les
     jetons partagés ci-dessus y sont trop sombres pour rester distinguables les
     uns des autres. Contraste vérifié au-delà de 4,5:1 sur fond blanc — ne pas
     revenir aux jetons partagés sans revalider ce contraste. */
  --couleur-rectifie: #188068;
  --couleur-manuel: #8966AB;

  /* ---------- Typographie ---------- */
  --police-titre: 'Space Grotesk', 'Inter', sans-serif;
  --police-texte: 'Inter', -apple-system, sans-serif;
  --police-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --taille-xs: 11.5px;
  --taille-sm: 12.5px;
  --taille-base: 14px;
  --taille-md: 15px;
  --taille-lg: 19px;
  --taille-xl: 24px;

  /* ---------- Espacement ---------- */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  --espace-8: 40px;

  /* Rythme vertical entre deux blocs de contenu d'une même section. */
  --rythme-bloc: 15px;

  /* ---------- Rayons et ombres ---------- */
  --rayon-sm: 6px;
  --rayon-md: 10px;
  --rayon-lg: 14px;
  --rayon-pilule: 100px;
  --ombre-sm: 0 1px 2px rgba(20, 32, 28, .06);
  --ombre-md: 0 8px 24px rgba(20, 32, 28, .12);

  /* Hauteur minimale d'une cible tactile confortable. */
  --cible-tactile: 40px;
}

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

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  line-height: 1.5;
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  /* Aucune page ne doit défiler horizontalement : les contenus larges
     (tableaux, graphiques) défilent dans leur propre conteneur. */
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  margin: 0;
}

a {
  color: var(--couleur-primaire);
}

sup {
  font-size: .62em;
}

/* Le contour de focus n'est jamais retiré : c'est le seul repère d'un
   utilisateur au clavier. */
:focus-visible {
  outline: 2px solid var(--couleur-primaire);
  outline-offset: 2px;
}

/* Les noms de salariés et les adresses e-mail peuvent être longs : mieux vaut
   les couper que faire déborder leur conteneur. */
td, th, .carte, .tuile {
  overflow-wrap: break-word;
}

.mono {
  font-family: var(--police-mono);
  font-variant-numeric: tabular-nums;
}

.indice {
  font-size: var(--taille-xs);
  color: var(--couleur-texte-secondaire);
}

p.indice {
  font-size: var(--taille-sm);
  margin: 0 0 var(--espace-4);
  max-width: 720px;
}

/* Contenu réservé aux technologies d'assistance : jamais `display: none`, qui
   le retirerait aussi de leur parcours. */
.lecteur-ecran-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Icônes et emoji ---------- */
.icone {
  flex: none;
  vertical-align: -3px;
}

.emoji {
  height: 1em;
  width: 1em;
  vertical-align: -0.15em;
  object-fit: contain;
}

/* Emoji absent du dossier local : le manque doit se voir, sinon on ne le
   corrigerait jamais. Un cadre vide de la taille d'un emoji suffit. */
.emoji-manquant {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  border: 1px dashed var(--couleur-danger);
  border-radius: 2px;
}