:root {
  --bleu-ciel: #10B6F4; --beige: #EAE2DE; --terracotta: #C04F15; --dore: #948A54;
  --bleu-profond: #12466E; --blanc-chaud: #FDFBFA;
  --fond: var(--beige); --carte: var(--blanc-chaud); --texte: #1E2A35; --texte-doux: #4A5560;
  --titre: var(--bleu-profond);
  --accent: var(--bleu-profond); --accent-texte: var(--blanc-chaud);
  --pastille: var(--bleu-ciel); --pastille-texte: var(--bleu-profond);
  --erreur: #9B3A0E; --ok: #2E6B3A; --bordure: #D8CFC9;
  --avertissement-fond: #F6E7DE; --surlignage-fond: #FBE9C9;
}
* { box-sizing: border-box; }
html { font-size: 106.25%; }  /* 17 px sur un réglage standard ; suit le réglage du téléphone (a_J5, P 26) */
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fond); color: var(--texte); line-height: 1.45; }
.entete { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--carte); color: var(--titre); border-bottom: 4px solid var(--bleu-ciel); position: sticky; top: 0; z-index: 2; }
.entete .titre { font-size: 1.1rem; margin: 0; font-weight: 600; }
.menu-bouton { font-size: 1.4rem; background: none; border: 0; color: inherit; }  /* hérite du bleu profond de .entete (puis de --titre, tâche 31) : l'en-tête n'est plus bleue à texte blanc */
.menu { background: var(--carte); border-bottom: 1px solid var(--bordure); padding: 8px 16px; display: flex; flex-direction: column; gap: 4px; }
.menu a, .menu button { padding: 10px 4px; text-decoration: none; color: var(--accent); font-weight: 600; background: none; border: 0; text-align: left; font-size: 1rem; }
.menu-pied { border-top: 1px solid var(--bordure); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; }
.menu-pied a, .menu-pied button { font-weight: 400; color: var(--texte-doux); }
main { padding: 12px 16px 96px; max-width: 760px; margin: 0 auto; }
.carte { background: var(--carte); border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
label { display: block; margin-bottom: 12px; font-weight: 600; }
input[type=text], input[type=password], textarea, select { display: block; width: 100%; margin-top: 6px; padding: 12px; font: inherit; border: 1px solid var(--bordure); border-radius: 8px; }
textarea { resize: vertical; }
button { font: inherit; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--accent); background: var(--carte); color: var(--accent); }
button.principal { background: var(--accent); color: var(--accent-texte); width: 100%; font-weight: 600; }
button:disabled { opacity: .5; }
.barre-fixe { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--fond) 30%); }
.bouton-fichier { display: inline-block; padding: 10px 14px; border: 1px dashed var(--accent); border-radius: 10px; color: var(--accent); cursor: pointer; }
.bouton-fichier input { display: none; }
.liste-fichiers, .liste { list-style: none; padding: 0; margin: 8px 0; }
.liste-fichiers li, .liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: var(--carte); border-radius: 10px; margin-bottom: 6px; }
.liste li a { color: var(--accent); text-decoration: none; flex: 1; }
.case { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.statut { color: var(--texte-doux); min-height: 1.4em; margin: 8px 0 0; }
.statut.erreur { color: var(--erreur); }
.statut.ok { color: var(--ok); }
.rappel, .exemples { color: var(--texte-doux); font-size: .9rem; }
.onglets { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.onglet { flex: 1; }
.onglet.actif, .theme.actif { background: var(--accent); color: var(--accent-texte); }
.theme { flex: 1; }
.document h1 { font-size: 1.3rem; } .document h2 { font-size: 1.1rem; color: var(--titre); margin-top: 1.2em; }
.document table, table.chiffres { width: 100%; border-collapse: collapse; font-size: .95rem; }
.document td, .document th, table.chiffres td, table.chiffres th { border-bottom: 1px solid var(--bordure); padding: 6px 4px; text-align: left; vertical-align: top; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--pastille); color: var(--pastille-texte); font-size: .8rem; }
.badge.echec { background: #fde8e6; color: var(--erreur); }
.badge.terminee { background: #e6f4e8; color: var(--ok); }
.avertissement { background: var(--avertissement-fond); color: var(--texte); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
mark { background: var(--surlignage-fond); color: var(--texte); }
.a-completer li { margin-bottom: 4px; }
pre.resume { white-space: pre-wrap; font: inherit; background: var(--beige); padding: 12px; border-radius: 8px; }
/* Veille et notes : téléphone d'abord, boutons à hauteur de pouce */
.filtres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtres select, .filtres input { margin: 0; }
.filtres input[type=search] { grid-column: 1 / -1; }
input[type=search] { display: block; width: 100%; padding: 12px; font: inherit; border: 1px solid var(--bordure); border-radius: 8px; }
.cartes-veille li { flex-direction: column; align-items: stretch; }
.cartes-veille p { margin: 6px 0; overflow-wrap: anywhere; }
.cartes-veille strong { overflow-wrap: anywhere; }
.meta { color: var(--texte-doux); font-size: .85rem; }
.gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gestes button, .gestes a { min-height: 44px; padding: 10px 14px; display: inline-flex; align-items: center; font-size: .95rem; }
.gestes a { color: var(--accent); }
.gestes button[aria-pressed=true] { background: var(--accent); color: var(--accent-texte); }
.bandeau-alerte { background: var(--avertissement-fond); border-left: 4px solid var(--terracotta); }
.note-inactive { opacity: .6; }
.carte details { margin-top: 8px; }
.carte summary { padding: 8px 0; }
.paire { border-top: 1px solid var(--bordure); padding-top: 8px; margin-top: 8px; }
@media (min-width: 720px) { .menu { flex-direction: row; flex-wrap: wrap; } .menu-pied { border: 0; margin: 0; padding: 0; flex-direction: row; margin-left: auto; } }
/* Jeu sombre suivant le réglage du téléphone (a_J3). Valeurs proposées par le
   plan, non arbitrées par François (design.md A.4 ne fixe que le contraste
   AA) : à valider sur le rendu réel. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14212B; --carte: #1D2E3B; --texte: #EDE7E2; --texte-doux: #B9C2CA; --titre: #9ADCF7;
    --accent: #7FD3F5; --accent-texte: #0F1C26;
    --pastille: #2A4A5E; --pastille-texte: #DDF3FC;
    --erreur: #F5A58A; --ok: #9BD8A6; --bordure: #34495A;
    --avertissement-fond: #4A3324; --surlignage-fond: #5A4A1E;
  }
}