/* ==========================================================================
   Reminder — thème « C · Hybride » (structure Signal, couleurs Monolithe)
   Jour / Nuit / Auto.
   - <html data-theme="light">  → jour forcé
   - <html data-theme="dark">   → nuit forcée
   - pas d'attribut             → suit le système (Auto)
   Fichier du brief de refonte (DESIGN.md) ; seules modifications : polices hébergées sur le site.
   Les compléments propres à l'appli (dialogues, messages, formulaires des autres écrans) sont dans style.css.
   ========================================================================== */

/* Polices hébergées sur le site (fichiers dans /fonts, licence SIL OFL 1.1) : aucune requête vers un service tiers. */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/chakra-petch-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens : JOUR (par défaut) ---------- */
:root {
  color-scheme: light;

  --bg: #E9E8E3;            /* fond « os » */
  --bar: #F2F1EC;           /* header / footer */
  --surface: #F6F5F1;       /* cartes */
  --field: #FFFFFF;         /* champs de formulaire */
  --line: #D2D0C8;          /* filets */
  --line-strong: #A3A096;   /* contours des boutons secondaires */
  --text: #0E0F11;
  --muted: #565A61;

  --accent: #C9F227;        /* vert acide : SURFACES PLEINES uniquement en jour */
  --on-accent: #0E0F11;
  --accent-ink: #3F4D00;    /* vert olive : textes, traits, logo en jour */
  --accent-soft: rgba(63, 77, 0, 0.10);

  --late: #B0122C;          /* retard / danger */
  --late-bg: #F5E6E7;
  --late-line: #E0B3BA;
  --late-tag-bg: #B0122C;
  --late-tag-fg: #FFFFFF;

  --ok-bg: rgba(63, 77, 0, 0.10);
  --ok-fg: #3F4D00;

  --grid: radial-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px);

  /* Typo */
  --font-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Biseaux (coins coupés) */
  --cut-s: 8px;   /* onglets, petits boutons */
  --cut-m: 10px;  /* boutons, coche */
  --cut-l: 14px;  /* cartes */
  --cut-xl: 16px; /* bouton principal, FAB */

  /* Espacements */
  --page-x: 20px;
  --gap-section: 26px;
}

/* ---------- Tokens : NUIT ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0B0C0E; --bar: #0E1013; --surface: #121418; --field: #0B0C0E;
    --line: #23262D; --line-strong: #3A3F48;
    --text: #E9EAEC; --muted: #8E939C;
    --accent: #D4FF3A; --on-accent: #0B0C0E; --accent-ink: #D4FF3A;
    --accent-soft: rgba(212, 255, 58, 0.12);
    --late: #FF5A74; --late-bg: #1A1115; --late-line: #5A1F2C;
    --late-tag-bg: #FF5A74; --late-tag-fg: #1A0008;
    --ok-bg: rgba(212, 255, 58, 0.12); --ok-fg: #D4FF3A;
    --grid: radial-gradient(rgba(212, 255, 58, 0.06) 1px, transparent 1px);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B0C0E; --bar: #0E1013; --surface: #121418; --field: #0B0C0E;
  --line: #23262D; --line-strong: #3A3F48;
  --text: #E9EAEC; --muted: #8E939C;
  --accent: #D4FF3A; --on-accent: #0B0C0E; --accent-ink: #D4FF3A;
  --accent-soft: rgba(212, 255, 58, 0.12);
  --late: #FF5A74; --late-bg: #1A1115; --late-line: #5A1F2C;
  --late-tag-bg: #FF5A74; --late-tag-fg: #1A0008;
  --ok-bg: rgba(212, 255, 58, 0.12); --ok-fg: #D4FF3A;
  --grid: radial-gradient(rgba(212, 255, 58, 0.06) 1px, transparent 1px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--bg);
  background-image: var(--grid);
  background-size: 20px 20px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ---------- Utilitaires biseau ----------
   Le contour se fait en box-shadow inset (une border serait coupée par le clip-path). */
.cut-s  { clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s))); }
.cut-m  { clip-path: polygon(0 0, calc(100% - var(--cut-m)) 0, 100% var(--cut-m), 100% 100%, var(--cut-m) 100%, 0 calc(100% - var(--cut-m))); }
.cut-l  { clip-path: polygon(0 0, calc(100% - var(--cut-l)) 0, 100% var(--cut-l), 100% 100%, var(--cut-l) 100%, 0 calc(100% - var(--cut-l))); }
.cut-xl { clip-path: polygon(0 0, calc(100% - var(--cut-xl)) 0, 100% var(--cut-xl), 100% 100%, var(--cut-xl) 100%, 0 calc(100% - var(--cut-xl))); }

/* ---------- Header ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 12px 0 var(--page-x);
  background: var(--bar); box-shadow: inset 0 -1px 0 var(--line);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.12em; }
.brand__slash { color: var(--accent-ink); }
.brand__logo { color: var(--accent-ink); } /* SVG hexagone : stroke/fill = currentColor */
.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: flex; align-items: center; height: 40px; padding: 0 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--muted);
}
.nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } /* + .cut-s */
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: none; box-shadow: inset 0 0 0 1px var(--line-strong);
} /* + .cut-s */

/* ---------- Page ---------- */
.page { padding: 28px var(--page-x) 120px; display: flex; flex-direction: column; gap: var(--gap-section); max-width: 720px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.page-title { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; }

/* Titre de section : LIBELLÉ ———————— 06 */
.section { display: flex; flex-direction: column; gap: 8px; }
.section-title {
  margin: 0 0 4px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.section-title::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--line); }
.section-title__count { order: 2; }
.section-title--late { color: var(--late); }

/* ---------- Cartes ---------- */
.card { padding: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 14px; } /* + .cut-l */

/* Bloc alerte (haut du planning) */
.alert {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--late-bg); box-shadow: inset 0 0 0 1px var(--late-line);
} /* + .cut-l */
.alert__count { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--late); }
.alert__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--late); }
.alert__sub { font-size: 13px; color: var(--muted); }

/* ---------- Tâche ---------- */
.task {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
} /* + .cut-l */
.task--late  { background: var(--late-bg); box-shadow: inset 0 0 0 1px var(--late-line); }
.task--today { box-shadow: inset 0 0 0 1px var(--accent-ink); }
.task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.task--done .task__title { text-decoration: line-through; color: var(--muted); }
.task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font-mono); font-size: 11.5px; }
.task__recur { color: var(--muted); } /* préfixe « ↻ » */
.tag { padding: 2px 6px; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-ink); }
.tag--late  { background: var(--late-tag-bg); color: var(--late-tag-fg); }
.tag--today { background: var(--accent); color: var(--on-accent); }

.check {
  width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  background: transparent; color: var(--text); border: none; box-shadow: inset 0 0 0 1px var(--line-strong);
} /* + .cut-m */
.check[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }

/* ---------- Boutons ---------- */
.btn {
  height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong);
} /* + .cut-m */
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: none; font-weight: 600; }
.btn--danger  { color: var(--late); box-shadow: inset 0 0 0 1px var(--late-line); }
.btn--block   { width: 100%; height: 56px; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0.12em; } /* + .cut-xl */
.btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.fab {
  position: fixed; right: var(--page-x); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  height: 56px; padding: 0 24px; display: inline-flex; align-items: center; gap: 10px;
  border: none; background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
} /* + .cut-xl */

/* ---------- Filtres (barre segmentée) ---------- */
.segmented { display: flex; box-shadow: inset 0 0 0 1px var(--line-strong); }
.segmented__btn {
  flex: 1; height: 44px; padding: 0 4px; border: none; background: transparent; color: var(--text);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.segmented__btn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- Sélecteur d’apparence (Jour / Nuit / Auto) ---------- */
.theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.theme-option {
  height: 72px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  border: none; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
} /* + .cut-m */
.theme-option[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.theme-option__swatch { width: 26px; height: 14px; box-shadow: inset 0 0 0 1px currentColor; }
.theme-option__swatch--light { background: #E9E8E3; }
.theme-option__swatch--dark  { background: #0B0C0E; }
.theme-option__swatch--auto  { background: linear-gradient(90deg, #E9E8E3 50%, #0B0C0E 50%); }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 13px; font-weight: 600; }
.field__hint { margin: 0; font-size: 13px; color: var(--muted); }
.input, .select {
  height: 48px; width: 100%; padding: 0 12px; border: none; border-radius: 0;
  border-bottom: 2px solid var(--accent-ink); background: var(--field); color: var(--text);
  font-family: var(--font-mono); font-size: 16px; /* 16px évite le zoom auto sur iOS */
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }

/* Statut notifications */
.status { align-self: flex-start; margin: 0; padding: 4px 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; background: var(--ok-bg); color: var(--ok-fg); }
.status--off { background: var(--late-bg); color: var(--late); }

/* Compte */
.avatar { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-display); font-size: 22px; font-weight: 700; } /* + .cut-m */

/* ---------- Footer ---------- */
.app-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--page-x); background: var(--bar); box-shadow: inset 0 1px 0 var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .check, .segmented__btn, .theme-option, .nav__link { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
}