/* ============================================================
   style.css — feuille de style de l'application « Suivi »

   Reprise du prototype validé, avec deux changements :
   1. les polices Google (Spectral, IBM Plex) sont remplacées par
      des polices déjà présentes sur le téléphone : l'application
      doit marcher sans aucun réseau ;
   2. à la fin du fichier, des ajouts pour le téléphone : zones
      sûres (encoche et barre d'accueil de l'iPhone), champs de
      saisie de 44 px minimum, police de 16 px dans les champs
      (en dessous, Safari zoome tout seul à chaque saisie).

   Le thème sombre suit le réglage du téléphone (prefers-color-scheme).
   ============================================================ */

:root{
  color-scheme:light;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif:Georgia, "Times New Roman", serif;
  --mono:ui-monospace, Menlo, "SF Mono", Consolas, monospace;
  --paper:#F2F5F3; --surface:#FFFFFF; --surface-2:#E7ECEA;
  --ink:#13211E; --ink-2:#3C4A47; --muted:#6B7976;
  --rule:#D2D9D7; --rule-soft:#E2E8E6;
  --accent:#15685A; --accent-ink:#0E4A3F; --accent-soft:#DBEAE5;
  --warn:#98511F; --warn-soft:#F2E5D9;
  --ok:#15685A; --bad:#98511F;
  --on-accent:#FFFFFF;   /* texte posé sur la couleur d'accent */
  --shadow:0 1px 1px rgba(19,33,30,.05), 0 10px 28px -16px rgba(19,33,30,.30);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --paper:#0E1413; --surface:#161E1C; --surface-2:#1D2624;
    --ink:#E3EAE8; --ink-2:#B7C3C0; --muted:#86938F;
    --rule:#2A3432; --rule-soft:#212B29;
    --accent:#5BBBA0; --accent-ink:#8AD3BD; --accent-soft:#16302A;
    --warn:#D08F61; --warn-soft:#2C2019;
    --ok:#5BBBA0; --bad:#D08F61;
    --on-accent:#0E1413;   /* en sombre, l'accent est clair : texte foncé pour rester lisible */
    --shadow:0 1px 1px rgba(0,0,0,.35), 0 10px 28px -16px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; padding-bottom:80px}
.wrap{max-width:760px; margin:0 auto; padding-inline:16px}
h1{font-family:var(--serif); font-size:26px; margin:20px 0 2px; letter-spacing:-.01em}
h2{font-family:var(--serif); font-size:20px; margin:26px 0 10px; letter-spacing:-.01em}
h3{font-size:13px; font-weight:600; margin:20px 0 8px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
p{margin:0 0 12px}
.sub{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
td.mono{white-space:nowrap}

nav.tabs{position:fixed; bottom:0; left:0; right:0; z-index:50; display:grid;
  grid-template-columns:repeat(6,1fr); background:var(--surface); border-top:1px solid var(--rule)}
nav.tabs button{appearance:none; border:0; background:none; padding:9px 2px 10px; cursor:pointer;
  font-family:inherit; font-size:10px; color:var(--muted); display:flex; flex-direction:column;
  align-items:center; gap:3px; border-top:2px solid transparent; line-height:1.15}
nav.tabs button .ic{font-size:17px; line-height:1}
nav.tabs button[aria-current="true"]{color:var(--accent); border-top-color:var(--accent)}

.card{background:var(--surface); border:1px solid var(--rule); padding:14px 15px; margin:0 0 12px; box-shadow:var(--shadow)}
.card > h4{margin:0 0 10px; font-size:14.5px; font-weight:600; display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.card > h4 em{font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--muted); font-weight:400}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
@media (max-width:430px){ .grid3{grid-template-columns:repeat(2,1fr)} }
.stat{background:var(--surface); border:1px solid var(--rule); padding:11px 12px}
.stat .k{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.stat .v{display:block; font-family:var(--serif); font-size:21px; font-weight:600; color:var(--accent-ink); line-height:1.1}
.stat .s{display:block; font-size:11.5px; color:var(--ink-2); margin-top:3px; line-height:1.3}

button.act{appearance:none; font-family:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); padding:9px 14px; border-radius:2px}
button.act.ghost{background:none; color:var(--accent-ink); border-color:var(--rule)}
button.act.ghost:hover{border-color:var(--accent)}
button.act:disabled{opacity:.45; cursor:default}
button.mini{font-size:12px; padding:5px 9px}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
input,select,textarea{font-family:inherit; font-size:14px; padding:7px 9px; border:1px solid var(--rule);
  background:var(--surface); color:var(--ink); border-radius:2px; width:100%; min-width:0}
input[type=number]{font-family:var(--mono); font-variant-numeric:tabular-nums}
label.fld{display:block; margin-bottom:10px}
label.fld span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--rule-soft); font-variant-numeric:tabular-nums}
thead th{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600}
tbody tr:last-child td{border-bottom:none}
.tw{overflow-x:auto; margin-bottom:12px}

.ex{border:1px solid var(--rule); background:var(--surface); margin-bottom:10px}
.ex > header{padding:9px 11px; background:var(--surface-2); border-bottom:1px solid var(--rule); display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap}
.ex > header b{font-size:14px}
.ex > header .p{font-family:var(--mono); font-size:11px; color:var(--muted)}
.ex .sets{padding:9px 11px; display:flex; flex-direction:column; gap:6px}
.setrow{display:grid; grid-template-columns:26px 1fr 1fr 34px; gap:6px; align-items:center}
.setrow .n{font-family:var(--mono); font-size:11px; color:var(--muted)}
.setrow input{padding:5px 7px; font-size:13.5px}
.setrow .done{text-align:center; font-size:15px}
.hint{padding:7px 11px; border-top:1px solid var(--rule-soft); font-size:12.5px; color:var(--ink-2); background:var(--surface-2)}
.hint.up{color:var(--accent-ink); background:var(--accent-soft)}

.pill{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; padding:2px 7px; border:1px solid var(--rule); color:var(--muted); background:var(--surface)}
.pill.ok{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.pill.warn{color:var(--warn); border-color:var(--warn); background:var(--warn-soft)}

.note{border:1px dashed var(--warn); background:var(--warn-soft); padding:11px 13px; margin:0 0 12px; font-size:13px; color:var(--ink-2)}
.note b{color:var(--ink)}
.banner{background:var(--warn-soft); border:1px solid var(--warn); padding:9px 12px; font-size:12.5px; margin:12px 0; color:var(--ink-2)}
.hidden{display:none !important}
.chk{display:flex; align-items:center; gap:9px; padding:7px 0; border-bottom:1px solid var(--rule-soft); font-size:13.5px}
.chk:last-child{border-bottom:none}
.chk input{width:19px; height:19px; flex:0 0 auto; accent-color:var(--accent)}
.chk .t{flex:1 1 auto; min-width:0}
.bar{height:6px; background:var(--surface-2); border:1px solid var(--rule); position:relative; margin-top:5px}
.bar i{position:absolute; inset:0 auto 0 0; background:var(--accent); display:block}
.sparkwrap{margin-top:8px}
.foot{margin:28px 0 10px; padding-top:14px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.7}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ============================================================
   Ajouts pour le téléphone (appliqués par-dessus les règles ci-dessus)
   ============================================================ */

html{-webkit-text-size-adjust:100%; overflow-x:hidden}
/* jamais de défilement horizontal, même à 375 px de large
   (clip et non hidden sur body : hidden en ferait une zone de défilement qui neutralise position:sticky) */
body{overflow-x:clip; padding-bottom:calc(84px + env(safe-area-inset-bottom))}
/* zones sûres : encoche en haut, bords arrondis sur les côtés */
.wrap{padding-top:env(safe-area-inset-top);
  padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
/* la barre d'onglets ne passe ni sous la barre d'accueil de l'iPhone, ni sous ses bords arrondis
   en paysage (Safari ignore le verrou « portrait » du manifeste) */
nav.tabs{padding-bottom:env(safe-area-inset-bottom); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right)}
nav.tabs button{min-height:54px}
/* champs de saisie : 44 px de haut minimum, 16 px de police (sinon Safari zoome) */
input:not([type=checkbox]):not([type=radio]), select, textarea{font-size:16px; min-height:44px}
.setrow{grid-template-columns:28px 1fr 1fr 44px}
.setrow input{padding:6px 8px; font-size:16px}
button.act{min-height:44px}
button.mini{min-height:40px}
img,svg,video{max-width:100%}
/* bandeau d'information (mise à jour, installation, stockage) */
.banner{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.banner .texte{flex:1 1 120px}
.banner button.mini{min-width:44px}