/* HtH Planning — charte Human to Hero : Rubik, jaune hi-vis pour l'action, bleu pétrole pour l'information,
   vert pour « c'est bon ». Clair par défaut (lisible en plein jour sur un chantier), sombre si le téléphone l'est.
   Les lots ajoutent leurs règles dans leur propre fichier (bureau.css, coach.css…), pas ici. */
:root {
  --fond: #f4f3ef;
  --carte: #ffffff;
  --creux: #ecebe6;
  --bord: #dcdad3;
  --texte: #15171a;
  --texte-2: #4a4d52;
  --texte-3: #7a7c80;
  --jaune: #f2c21a;
  --sur-jaune: #15171a;
  --jaune-doux: rgba(242, 194, 26, .18);
  --bleu: #11596b;
  --bleu-doux: rgba(17, 89, 107, .10);
  --vert: #2f8f5b;
  --vert-doux: rgba(47, 143, 91, .12);
  --rouge: #c0392b;
  --rouge-doux: rgba(192, 57, 43, .10);
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(21, 23, 26, .06), 0 1px 3px rgba(21, 23, 26, .05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #111316; --carte: #1a1d21; --creux: #0c0e10; --bord: #2c3137;
    --texte: #f5f4f0; --texte-2: #c8c5be; --texte-3: #9a9790;
    --bleu: #5fb8cc; --bleu-doux: rgba(95, 184, 204, .13);
    --vert: #5cbf8a; --vert-doux: rgba(92, 191, 138, .13);
    --rouge: #e5594c; --rouge-doux: rgba(229, 89, 76, .13);
    --ombre: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 16px/1.45 Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
a { color: var(--bleu); }
h1 { font-size: 1.4rem; font-weight: 600; margin: 0 0 .6em; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.2em 0 .5em; }
.page { max-width: 960px; margin: 0 auto; padding: 16px; }

.entete {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top));
  background: #15171a; color: #f5f4f0;
}
.entete .marque { font-weight: 700; letter-spacing: -.01em; }
.entete .marque b { color: var(--jaune); }
.entete .qui { margin-left: auto; font-size: .85rem; opacity: .8; }
.entete a { color: inherit; text-decoration: none; }
.entete .qui a { text-decoration: underline; }

.onglets {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex;
  background: var(--carte); border-top: 1px solid var(--bord); padding-bottom: env(safe-area-inset-bottom);
}
.onglets a {
  flex: 1; text-align: center; padding: 14px 4px 12px; font-size: .8rem; font-weight: 500;
  color: var(--texte-3); text-decoration: none;
}
.onglets a.actif { color: var(--texte); box-shadow: inset 0 3px 0 var(--jaune); }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .onglets { position: sticky; top: 52px; bottom: auto; border-top: 0; border-bottom: 1px solid var(--bord); }
  .onglets a.actif { box-shadow: inset 0 -3px 0 var(--jaune); }
}

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px; margin-bottom: 12px;
}
.discret { color: var(--texte-3); }
.petit { font-size: .85rem; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 12px 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--jaune); color: var(--sur-jaune); font: 600 1rem Rubik, system-ui, sans-serif; text-decoration: none;
}
.bouton.second { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); }
.bouton.danger { background: var(--carte); color: var(--rouge); border: 1px solid var(--rouge); }
.bouton.large { width: 100%; }

label { display: block; font-weight: 500; font-size: .9rem; margin: 14px 0 6px; color: var(--texte-2); }
input, select, textarea {
  width: 100%; padding: 12px; font: 16px Rubik, system-ui, sans-serif; color: var(--texte);
  background: var(--carte); border: 1px solid var(--bord); border-radius: 10px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--jaune); border-color: var(--jaune); }

.pastille {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--creux); color: var(--texte-2);
}
.pastille.ok { background: var(--vert-doux); color: var(--vert); }
.pastille.info { background: var(--bleu-doux); color: var(--bleu); }
.pastille.attention { background: var(--jaune-doux); color: var(--texte); }
.pastille.alerte { background: var(--rouge-doux); color: var(--rouge); }

.message { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; background: var(--bleu-doux); color: var(--bleu); }
.message.erreur { background: var(--rouge-doux); color: var(--rouge); }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-3); }
.tableau-defile { overflow-x: auto; }