/* Une colonne : la grille du mois, la fiche du jour choisi, la légende des phases. */
:root{
  --bg:#f6f5f8; --surface:#ffffff; --fg:#1f1c26; --muted:#6c6778; --line:#e3e0ea;
  --regles:#c2304f; --regles-bg:#fbe3e8;
  --folli:#2f8a5f; --folli-bg:#ddf2e6;
  --ovu:#b7791f; --ovu-bg:#fbefd6;
  --luteal:#6a55b5; --luteal-bg:#e9e4f8;
  --spm:#8d3b84; --spm-bg:#f4def0;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15131b; --surface:#1e1b26; --fg:#ece9f2; --muted:#a29cb2; --line:#2e2a39;
  --regles:#f0718b; --regles-bg:#3a1c25; --folli:#6fcf9c; --folli-bg:#173226;
  --ovu:#f0bd5c; --ovu-bg:#3a2d14; --luteal:#a996f0; --luteal-bg:#28223f;
  --spm:#de8ad3; --spm-bg:#381d35; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15131b; --surface:#1e1b26; --fg:#ece9f2; --muted:#a29cb2; --line:#2e2a39;
  --regles:#f0718b; --regles-bg:#3a1c25; --folli:#6fcf9c; --folli-bg:#173226;
  --ovu:#f0bd5c; --ovu-bg:#3a2d14; --luteal:#a996f0; --luteal-bg:#28223f;
  --spm:#de8ad3; --spm-bg:#381d35; color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:560px;margin:0 auto;padding:20px 16px 40px;display:grid;gap:18px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{font-family:var(--display);font-weight:700;font-size:1.6rem;margin:0;text-wrap:balance;text-transform:capitalize}
.sub{color:var(--muted);font-size:.85rem;margin:2px 0 0}
/* 16px au moins : en dessous, Safari sur iPhone zoome dès qu'on touche le champ. */
.sub input{width:2.6em;padding:2px 4px;margin:0 2px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg);font:600 16px var(--body);font-variant-numeric:tabular-nums;text-align:center}
.sub input::placeholder{color:var(--muted);opacity:1}
.sub input:focus-visible{outline:2px solid var(--regles);outline-offset:1px}
.sub input[aria-invalid="true"]{border-color:var(--regles)}
.aide{color:var(--regles);font-size:.8rem;margin:2px 0 0}
.nav{display:flex;gap:6px}
.nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--fg);font-size:1.1rem;cursor:pointer}
.nav button:focus-visible,.day:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow{text-align:center;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:4px}
.day{aspect-ratio:1;max-width:100%;border:0;border-radius:10px;background:var(--pbg);color:var(--fg);font:600 .95rem var(--body);font-variant-numeric:tabular-nums;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.day .cd{font-size:.6rem;font-weight:500;color:var(--pc)}
.day.today{box-shadow:inset 0 0 0 2px var(--fg)}
.day.sel{background:var(--pc);color:var(--bg)}
.day.sel .cd{color:var(--bg)}
.empty{aspect-ratio:1}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:12px;border-top:5px solid var(--pc)}
.card .date{font-size:.8rem;color:var(--muted);text-transform:capitalize}
.card h2{font-family:var(--display);font-size:1.35rem;margin:0;color:var(--pc)}
.card .hormo{font-size:.85rem;color:var(--muted);margin:0}
.block h3{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.block ul{margin:0;padding-left:18px;display:grid;gap:3px}
.block p{margin:0}
.key{display:grid;gap:8px}
.key h3{font-family:var(--display);font-size:1rem;margin:0}
.chip{display:flex;align-items:center;gap:10px;font-size:.88rem}
.chip i{width:14px;height:14px;border-radius:4px;background:var(--pc);flex:none}
.chip span{color:var(--muted)}
.note{font-size:.8rem;color:var(--muted);margin:0}