/* ============================================================
   Ma journée — socle visuel commun à tous les modules.
   Chargé AVANT le <style> de chaque page : une règle laissée
   en ligne dans un module l'emporte donc toujours sur celle-ci.
   ============================================================ */

:root {
  color-scheme: dark;

  --bg:#0f1420; --bg2:#171d2b; --card:#1c2434; --card2:#232c3f; --line:#2b3446;
  --text:#f2f5fb; --muted:#97a1b6; --faint:#6c768c;

  /* Chaque module redéfinit ces deux-là avec sa propre couleur. */
  --accent:#378add; --on-accent:#04202e;

  /* Teintes sémantiques, utilisées comme couleur de texte ou de trait. */
  --vert:#38b98a; --bleu:#4b93e6; --dore:#d9a441;
  --rouge:#e8746b; --violet:#a98cf0; --cyan:#3fa9dd;

  /* Panneaux teintés : un fond et son encre, appairés. */
  --t-vert:#12301f;   --i-vert:#b9e8cd;
  --t-bleu:#17304f;   --i-bleu:#bdd8ff;
  --t-cyan:#12384d;   --i-cyan:#a8ddf5;
  --t-dore:#3a2a12;   --i-dore:#f0d9a8;
  --t-rouge:#3d1512;  --i-rouge:#f5b8b2;
  --t-violet:#2a2247; --i-violet:#d4c6ff;

  /* Encre posée sur un aplat de teinte pleine. */
  --on-vert:#04241a; --on-bleu:#0b2340; --on-dore:#2a1e05;
  --on-rouge:#3d1512; --on-violet:#1c1233; --on-cyan:#04202e;

  --ombre:0 6px 20px rgba(0,0,0,.45);

  --st:env(safe-area-inset-top,0px);
  --sb:env(safe-area-inset-bottom,0px);
}

/* ---------- Mode clair ----------
   Suit le réglage de l'appareil, sauf si un thème a été forcé
   dans les réglages (data-theme sur <html>, posé par theme.js). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) { color-scheme: light; }
}
:root[data-theme="clair"] { color-scheme: light; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) {
    --bg:#f3f5fa; --bg2:#ffffff; --card:#ffffff; --card2:#eef1f7; --line:#dde3ee;
    --text:#101724; --muted:#5b6478; --faint:#868fa3;

    --vert:#12855f; --bleu:#2f6dbe; --dore:#9a6c12;
    --rouge:#c4453a; --violet:#6b4bc4; --cyan:#1a7ba8;

    --t-vert:#e2f5ec;   --i-vert:#0e5c40;
    --t-bleu:#e6eefb;   --i-bleu:#14406f;
    --t-cyan:#e0f2fb;   --i-cyan:#0d4a66;
    --t-dore:#fbf1dd;   --i-dore:#6b4c10;
    --t-rouge:#fdeae8;  --i-rouge:#8a2d24;
    --t-violet:#efeafd; --i-violet:#4a2f8f;

    --on-vert:#fff; --on-bleu:#fff; --on-dore:#fff;
    --on-rouge:#fff; --on-violet:#fff; --on-cyan:#fff;

    --ombre:0 6px 20px rgba(20,30,55,.14);
  }
}
:root[data-theme="clair"] {
  --bg:#f3f5fa; --bg2:#ffffff; --card:#ffffff; --card2:#eef1f7; --line:#dde3ee;
  --text:#101724; --muted:#5b6478; --faint:#868fa3;

  --vert:#12855f; --bleu:#2f6dbe; --dore:#9a6c12;
  --rouge:#c4453a; --violet:#6b4bc4; --cyan:#1a7ba8;

  --t-vert:#e2f5ec;   --i-vert:#0e5c40;
  --t-bleu:#e6eefb;   --i-bleu:#14406f;
  --t-cyan:#e0f2fb;   --i-cyan:#0d4a66;
  --t-dore:#fbf1dd;   --i-dore:#6b4c10;
  --t-rouge:#fdeae8;  --i-rouge:#8a2d24;
  --t-violet:#efeafd; --i-violet:#4a2f8f;

  --on-vert:#fff; --on-bleu:#fff; --on-dore:#fff;
  --on-rouge:#fff; --on-violet:#fff; --on-cyan:#fff;

  --ombre:0 6px 20px rgba(20,30,55,.14);
}

/* En clair, les cartes blanches ont besoin d'un relief discret
   là où le mode sombre se contentait d'un trait. */
:root[data-theme="clair"] .card,
:root[data-theme="clair"] .sum-c { box-shadow:0 1px 2px rgba(20,30,55,.06); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) .card,
  :root:not([data-theme="sombre"]) .sum-c { box-shadow:0 1px 2px rgba(20,30,55,.06); }
}

/* ---------- Base ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}

#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}

/* ---------- En-tête ---------- */
.top{display:flex;align-items:center;gap:10px;padding:calc(var(--st) + 18px) 16px 10px;background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:.5px solid var(--line)}
.top h1{font-size:20px;font-weight:600;margin:0;flex:1}
.menu-btn{width:38px;height:38px;font-size:22px;color:var(--text);border-radius:12px;flex-shrink:0}
.menu-btn:active{background:var(--card)}

.main{flex:1;overflow-y:auto;padding:14px 16px calc(var(--sb) + 24px)}

/* ---------- Cartes ---------- */
.card{background:var(--card);border:.5px solid var(--line);border-radius:16px;padding:14px;margin-bottom:14px}
.card-tt{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.card-tt .n{margin-left:auto;font-weight:400;font-size:13px;color:var(--faint)}

.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sum-c{background:var(--card);border:.5px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.sum-c .v{font-size:22px;font-weight:700}
.sum-c .l{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- Boutons ---------- */
.btn{background:var(--card);color:var(--text);border:.5px solid var(--line);font-weight:600;border-radius:12px;padding:13px;width:100%;font-size:14px}
.btn.ghost{background:var(--card);color:var(--text);border:.5px solid var(--line)}
.primary{background:var(--accent);color:var(--on-accent);border:none}
.mini{background:var(--card2);border:.5px solid var(--line);border-radius:9px;padding:7px 12px;font-size:13px;color:var(--muted)}
.link{display:block;text-align:center;color:var(--muted);font-size:13px;padding:12px}

/* ---------- Formulaires ---------- */
.f{margin-bottom:11px}
.f label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.input{width:100%;background:var(--card2);border:.5px solid var(--line);border-radius:10px;padding:12px;color:var(--text);font-size:16px;-webkit-appearance:none}
.row{display:flex;gap:9px}
.row>*{flex:1}
.frow{display:flex;gap:10px}

.segmented{display:flex;gap:4px;margin:10px 16px 0;padding:4px;background:var(--card);border:.5px solid var(--line);border-radius:12px}

/* ---------- Fiches glissantes ---------- */
.sheet-bd{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70;display:flex;align-items:flex-end}
.sheet-bd[hidden]{display:none}
.sheet{width:100%;max-width:480px;margin:0 auto;background:var(--bg2);border-radius:20px 20px 0 0;padding:16px 16px calc(var(--sb) + 18px)}

/* ---------- Menu latéral ---------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60}
.drawer-backdrop[hidden]{display:none}
.drawer{position:absolute;top:0;left:0;bottom:0;width:78%;max-width:300px;background:var(--bg2);border-right:.5px solid var(--line);padding:calc(var(--st) + 22px) 14px calc(var(--sb) + 18px);display:flex;flex-direction:column;animation:sd .22s ease}
@keyframes sd{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.drawer-head{font-size:13px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin:0 8px 12px}
.drawer a,.drawer .app-soon{display:flex;align-items:center;gap:14px;padding:14px;border-radius:12px;text-decoration:none;color:var(--text);font-size:16px;font-weight:500;margin-bottom:4px}
.drawer a:active{background:var(--card)}
.drawer a.current{background:var(--card)}
.drawer a.current .app-ico{color:var(--accent)}
.drawer .app-ico{font-size:22px;width:26px;text-align:center}
.drawer .app-soon{color:var(--faint)}
.drawer .app-soon .soon-tag{font-size:11px;margin-left:auto;background:var(--card);padding:3px 8px;border-radius:999px}
.drawer-foot{margin-top:auto;font-size:12px;color:var(--faint);text-align:center;padding-top:12px}

/* ---------- Grand écran ---------- */
@media (min-width:768px){
  #app{max-width:760px}
  .main{padding-left:32px;padding-right:32px}
  .sum-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Passage d'un module à l'autre ----------
   Supprime le flash noir du rechargement de page. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Squelettes de chargement ---------- */
@keyframes pulseSk { 0%,100%{opacity:.45} 50%{opacity:.85} }
.sk{background:var(--card2);border-radius:8px;animation:pulseSk 1.4s ease-in-out infinite}
.sk-l{height:13px;margin:9px 0}
.sk-l.court{width:45%}
.sk-l.moyen{width:70%}
@media (prefers-reduced-motion: reduce){ .sk{animation:none} }
