/* app.css — le socle visuel de Tempo.
   Conçu pour TDL + dyslexie : police Atkinson Hyperlegible, texte grand,
   interlignage généreux, cibles tactiles ≥ 56 px, peu de texte, beaucoup d'icônes,
   jamais de compte à rebours visible. Tous les réglages (taille, espacement,
   sombre, contraste, animations) sont des variables pilotées par app.js. */

:root{
  --scale:1; --spacing:0em;
  --paper:#EEF3F1; --card:#FFFFFF; --ink:#1F2A2E; --muted:#5C6B70;
  --brand:#2F5D50; --brand-soft:#D9EBE4;
  --accent:#3B5B7A; --accent-soft:#DCE6EF;
  --coach:#8A5A12; --coach-soft:#FBF0DA;
  --danger:#B3261E; --ok:#2E7D32;
  --line:#D5DEDB; --focus:#7FA69A;
  --radius:18px; --shadow:0 1px 4px rgba(31,42,46,.08);
}
html.dark{
  --paper:#151C1A; --card:#1F2926; --ink:#E8EFEC; --muted:#9DB2AB;
  --brand:#8FCDB9; --brand-soft:#28423A;
  --accent:#9FBEDB; --accent-soft:#2A3A4A;
  --coach:#E3B268; --coach-soft:#3D3222;
  --danger:#F2B8B5; --ok:#9CD49F;
  --line:#33413D; --focus:#5E877B; --shadow:none;
}
html.contrast{
  --paper:#FFFFFF; --card:#FFFFFF; --ink:#000000; --muted:#333B3E;
  --line:#000000; --shadow:none;
}
html.dark.contrast{
  --paper:#000000; --card:#000000; --ink:#FFFFFF; --muted:#D0DDD8; --line:#FFFFFF;
}

*{box-sizing:border-box}
html{font-size:calc(20px * var(--scale))}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  line-height:1.6;letter-spacing:var(--spacing);word-spacing:calc(var(--spacing)*2)}
html.motion-off *{animation:none!important;transition:none!important}

main.page{max-width:660px;margin:0 auto;padding:12px 16px 120px}

/* ---- barre du haut : retour + titre + lecture audio ---- */
.appbar{display:flex;align-items:center;gap:10px;padding:10px 0 6px;position:sticky;top:0;
  background:var(--paper);z-index:20}
.appbar .back{flex:0 0 auto;width:56px;height:56px;border-radius:16px;border:2px solid var(--line);
  background:var(--card);color:var(--ink);font-size:1.3rem;cursor:pointer;display:grid;place-items:center;text-decoration:none}
.appbar h1{flex:1;font-size:1.25rem;font-weight:700;margin:0;display:flex;align-items:center;gap:10px}
.appbar h1 .em{font-size:1.5rem}
.appbar .say{flex:0 0 auto;width:56px;height:56px;border-radius:16px;border:2px solid var(--line);
  background:var(--card);font-size:1.25rem;cursor:pointer}
.sub{color:var(--muted);font-size:.95rem;margin:2px 0 16px}

/* ---- cartes du menu ---- */
.grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.grid .wide{grid-column:1/-1}
a.tile{display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center;
  min-height:108px;padding:16px;border-radius:var(--radius);background:var(--card);
  border:2px solid var(--line);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);position:relative}
a.tile:active{transform:scale(.985)}
a.tile .em{font-size:1.9rem;line-height:1}
a.tile .t{font-weight:700}
a.tile .d{font-size:.85rem;color:var(--muted)}
a.tile .badge{position:absolute;top:10px;right:12px;min-width:30px;height:30px;padding:0 8px;
  border-radius:999px;background:var(--brand);color:var(--paper);font-weight:700;
  display:grid;place-items:center;font-size:.85rem}
.section-title{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  margin:22px 0 10px;grid-column:1/-1}

/* ---- boutons ---- */
button{font:inherit;letter-spacing:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
  padding:12px 20px;border-radius:16px;border:2px solid var(--line);background:var(--card);
  font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
html.dark .btn.primary{color:#10201B}
.btn.coachy{border-color:var(--coach);color:var(--coach);background:var(--card)}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.big{width:100%;min-height:68px;font-size:1.1rem}
.btn:disabled{opacity:.45;cursor:default}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.btnrow .btn{flex:1 1 auto}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px}

/* ---- panneaux, formulaires ---- */
.panel{background:var(--card);border:2px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.panel h2{font-size:1.05rem;margin:0 0 8px}
label.field{display:block;margin:12px 0}
label.field span{display:block;font-size:.9rem;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=password],textarea,select{width:100%;padding:14px;border:2px solid var(--line);
  border-radius:14px;background:var(--card);color:var(--ink);font:inherit;letter-spacing:inherit}
textarea{min-height:90px;resize:vertical}
input[type=range]{width:100%;accent-color:var(--brand);height:44px}

/* ---- listes ---- */
.item{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--line);
  border-radius:14px;background:var(--card);margin:8px 0}
.item .grow{flex:1;min-width:0}
.item .meta{font-size:.82rem;color:var(--muted)}
.iconbtn{width:52px;height:52px;border-radius:14px;border:2px solid var(--line);background:var(--card);
  font-size:1.1rem;cursor:pointer;flex:0 0 auto}

/* ---- messages du coach ---- */
.coachmsg{background:var(--coach-soft);border-left:6px solid var(--coach);border-radius:10px;
  padding:14px 16px;margin:12px 0}
.coachmsg .who{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--coach);margin-bottom:4px}
.okmsg{border-left-color:var(--ok);background:var(--brand-soft);color:var(--ink)}

/* ---- grands choix (QCM, auto-évaluation) ---- */
.choices{display:grid;gap:10px;margin:14px 0}
.choices .btn{justify-content:flex-start;text-align:left;min-height:64px}
.choices .btn.good{border-color:var(--ok);background:var(--brand-soft)}
.choices .btn.bad{border-color:var(--danger)}

/* ---- carte d'installation (PWA) ---- */
.install-card{border-color:var(--brand)}
.install-steps{margin:8px 0;padding-left:26px}
.install-steps li{margin:10px 0}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);
  color:var(--paper);padding:12px 20px;border-radius:14px;font-weight:700;opacity:0;
  pointer-events:none;transition:opacity .25s;z-index:100;max-width:88vw;text-align:center}
#toast.on{opacity:1}

/* ---- jauge simple ---- */
.meter{height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.meter>div{height:100%;background:var(--brand);border-radius:999px}

/* ---- SUDS (échelle de stress) ---- */
.suds{display:flex;align-items:center;gap:12px;margin:8px 0}
.suds .face{font-size:2.2rem;width:60px;text-align:center}
.suds input{flex:1}

/* ---- mode comptoir (cartes plein écran) ---- */
.fullcard{position:fixed;inset:0;background:var(--card);z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:24px;text-align:center;gap:24px}
.fullcard .text{font-size:2rem;font-weight:700;line-height:1.5}
.fullcard .hintline{color:var(--muted);font-size:.9rem}
.fullcard .navrow{display:flex;gap:14px}
.fullcard .navrow .btn{min-width:90px;min-height:64px;font-size:1.4rem}

/* ---- respiration ---- */
.breath-wrap{display:grid;place-items:center;min-height:46vh}
.breath{width:130px;height:130px;border-radius:50%;background:var(--brand-soft);
  border:4px solid var(--brand);display:grid;place-items:center;font-size:1.05rem;font-weight:700;
  transition:transform .3s ease}
.breath-word{margin-top:18px;text-align:center;font-size:1.3rem;font-weight:700;min-height:2rem}

/* ---- révision (sac à mots) ---- */
.flash{min-height:38vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:20px}
.flash .cue{color:var(--muted)}
.flash .word{font-size:2.1rem;font-weight:700}

@media (max-width:420px){ .grid{grid-template-columns:1fr 1fr} }