/* Onyx v2 · Sakura 桜
   Couche au-dessus de onyx.css, activée par la classe « onyx2 » sur <html> (avec « verre », « apple » et « onyx »).
   Retirer « onyx2 » rétablit l'état précédent. Décrit dans design/DESIGN-onyx-v2.md.
   Lot 1 : fondations (variables, couleurs jour et nuit, typographie, rayons, relief). Les composants viennent au lot 2. */

@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* ===== Couleurs : nuit (encre brune) ===== */
html.onyx2[data-theme="dark"] {
  --bg: #120D0F; --surface: #1C1417; --sunk: #0D090B; --raise: #271C21;
  --line: #392A31; --line-strong: #745F68;
  --ink: #F7EEF1; --ink-2: #DACCD1; --muted: #BCA6AE;
  --accent: #F4A3BA; --accent-hover: #F8BCCF; --on-accent: #2C0A18;
  --accent-soft: rgba(244, 163, 186, .14); --accent-text: #F8BCCF; --accent-link: #F4A3BA;
  --ok: #6FD3A3; --ok-bg: #123024; --ok-ink: #9FE6C2;
  --warn: #F2C14E; --warn-bg: #34290F; --warn-ink: #F6D98E; --warn-line: #5C4A1A;
  --bad: #FF8A8A; --bad-bg: #3A1B20; --bad-ink: #FFB3B3;
  --scrim: rgba(8, 4, 6, .72);
  --sh-2: 0 16px 40px -20px rgba(0, 0, 0, .55);
}
/* ===== Couleurs : jour (papier washi) ===== */
html.onyx2[data-theme="light"] {
  --bg: #F7F0EE; --surface: #FCF9F7; --sunk: #EEE3E1; --raise: #FFFFFF;
  --line: #DDCCCB; --line-strong: #8A7378;
  --ink: #25161A; --ink-2: #4A383D; --muted: #6D5159;
  --accent: #A8365E; --accent-hover: #8E2B4E; --on-accent: #FFFFFF;
  --accent-soft: rgba(168, 54, 94, .10); --accent-text: #8E2B4E; --accent-link: #A8365E;
  --ok: #1F7A52; --ok-bg: #DFF0E6; --ok-ink: #195F40;
  --warn: #8A5A00; --warn-bg: #F6E8C8; --warn-ink: #5E3E00; --warn-line: #E4CD97;
  --bad: #B42323; --bad-bg: #F8DADA; --bad-ink: #8F1B1B;
  --scrim: rgba(37, 22, 26, .5);
  --sh-2: 0 16px 40px -20px rgba(37, 22, 26, .28);
}

/* ===== Échelles et variables communes ===== */
html.onyx2 {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --r-1: 6px; --r-2: 10px; --r-3: 20px; --r-4: 28px; --r-col: 14px; --r-task: 12px; --bw: 1px;
  --fd: 'Instrument Serif', Georgia, serif; --fs: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --fn: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 22px; --t-xl: 40px; --t-xxl: 54px;
  --r-card: var(--r-3); --r-ctl: var(--r-2); --pad-card: var(--s-6);
  --sans: var(--fs); --mono: var(--fn);
  --ease: cubic-bezier(.3, .7, .2, 1); --spring: cubic-bezier(.3, .7, .2, 1);

  /* Relief : un filet, jamais d'ombre au repos ; au survol le filet passe à l'accent */
  --sh-1: 0 0 0 1px var(--line);
  --sh: var(--sh-1); --sh-up: 0 0 0 1px var(--accent); --shadow: var(--sh-2);
  --lift-1: var(--sh-1); --lift-2: var(--sh-up); --lift-btn: 0 0 0 0 transparent; --well: 0 0 0 0 transparent;
  --btn-hi: 0 0 0 0 transparent; --btn-glow: 0 0 0 0 transparent; --top-sheen: none;

  /* Alias des couches Verre et Apple, ramenés aux variables v2 */
  --glass: var(--surface); --glass-hi: var(--raise);
  --fill: color-mix(in srgb, var(--ink) 7%, transparent); --fill-hi: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-soft: var(--line); --edge: transparent;
  --bar: color-mix(in srgb, var(--bg) 84%, transparent);
  --nav: var(--bar); --nav-ink: var(--ink); --nav-mu: var(--muted); --nav-on: var(--accent-soft); --nav-line: var(--line);
}

/* ===== Typographie : Instrument Serif pour les titres (une seule graisse), Geist pour le texte, Geist Mono pour les chiffres ===== */
html.onyx2 body { font: 400 15px/1.55 var(--fs); }
html.onyx2 h1, html.onyx2 h2, html.onyx2 h3,
html.onyx2 .page-title, html.onyx2 .hello h1, html.onyx2 .card h2, html.onyx2 .card-head h2, html.onyx2 .rail-head h2,
html.onyx2 .tile-title, html.onyx2 .login-form h1, html.onyx2 .sec-h b {
  font-family: var(--fd); font-weight: 400; letter-spacing: -.01em; line-height: 1.1;
}
html.onyx2 .hello h1 { font-size: var(--t-xxl); }
html.onyx2 .page-title { font-size: var(--t-xl); }
html.onyx2 .card-head h2, html.onyx2 .rail-head h2, html.onyx2 .card h2 { font-size: 24px; }
html.onyx2 .tile-title { font-size: var(--t-lg); }
html.onyx2 .hello .date, html.onyx2 .hello p { font-size: 16px; }
html.onyx2 .mono, html.onyx2 .clock, html.onyx2 time, html.onyx2 .kpi-val, html.onyx2 .task-due, html.onyx2 .col-head .mono { font-family: var(--fn); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  html.onyx2 .hello h1, html.onyx2 .page-title { font-size: 36px; }
  html.onyx2 { --pad-card: var(--s-4); }
}
@media (min-width: 861px) and (max-width: 1100px) { html.onyx2 { --pad-card: var(--s-5); } }

/* ===== Rayons de l'échelle (cartes, tuiles, tâches, colonnes, boutons, champs) ===== */
html.onyx2 .card, html.onyx2 .kpi, html.onyx2 .tile, html.onyx2 .ticket, html.onyx2 .menu-list, html.onyx2 .login-form { border-radius: var(--r-3); }
html.onyx2 .col { border-radius: var(--r-col); }
html.onyx2 .task { border-radius: var(--r-task); }
html.onyx2 .btn, html.onyx2 .input, html.onyx2 .planbar, html.onyx2 .rep-item { border-radius: var(--r-2); }
html.onyx2 .chip, html.onyx2 .tab, html.onyx2 .task-sec, html.onyx2 .back { border-radius: var(--r-2); }
@media (max-width: 860px) { html.onyx2 .tile, html.onyx2 .card, html.onyx2 .ticket { border-radius: var(--r-3); } }

/* ===== Fond et sélection ===== */
html.onyx2 body { background: var(--bg); color: var(--ink); }
html.onyx2 ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }
html.onyx2 :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ===== Fond animé : deux halos très lents et un jeu de segments qui se croisent ===== */
/* Les halos du Verre sont réactivés, en rose, très pâles, avec des dérives de 70 à 90 secondes. */
html.onyx2 .orbs { display: block; }
html.onyx2[data-theme="dark"] { --orb1: #F4A3BA; --orb2: #8E3A55; --orb3: #C9788F; --orb-op: .12; --seg-op: .34; }
html.onyx2[data-theme="light"] { --orb1: #F4B6C6; --orb2: #F8D7DE; --orb3: #E9A0B3; --orb-op: .18; --seg-op: .30; }
html.onyx2 .orb { animation-duration: 80s; }
html.onyx2 .o2 { animation-duration: 90s; }
html.onyx2 .o3 { animation-duration: 70s; }

/* Segments : un trait de 1 px à 45 degrés, estompé aux deux bouts, qui glisse lentement (propriété translate, composée par le GPU). */
html.onyx2 .segs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
html.onyx2 .seg {
  position: absolute; left: var(--x); top: var(--y); width: var(--l); height: 1px; rotate: var(--a); opacity: calc(var(--seg-op) * var(--o));
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent) 78%, transparent);
  will-change: translate; animation: onyx2-seg var(--d) ease-in-out var(--dl) infinite alternate;
}
@keyframes onyx2-seg { from { translate: 0 0; } to { translate: var(--dx) var(--dy); } }
@media (prefers-reduced-motion: reduce) { html.onyx2 .segs { display: none; } html.onyx2 .orb { animation: none; } }

/* ===== Logo : monogramme ox (lot 4) ===== */
html.onyx2 .ox-mark { color: var(--accent); flex-shrink: 0; }
html.onyx2 .brand { gap: 10px; }
@media (prefers-reduced-motion: no-preference) {
  /* un éclat sur le x, une fois par minute, sur le tableau de bord seulement */
  html.onyx2[data-view="accueil"] .ox-mark .p-ox-x { animation: onyx-x-glint 60s linear 1.5s infinite; }
}

/* ===== Fenêtres arrondies, Tâches et Notes sur toute la place disponible ===== */
/* Les cartes sont les « fenêtres » : 20 px (28 px pour les fenêtres flottantes). Colonnes 14 px, tâches 12 px, boutons et champs 10 px. */
html.onyx2 .gviewer-bar { border-radius: var(--r-4) var(--r-4) 0 0; }
html.onyx2 .gviewer-body, html.onyx2 .gviewer-frame { border-radius: 0 0 var(--r-4) var(--r-4); }
html.onyx2 .dialog, html.onyx2 .toast, html.onyx2 .alert { border-radius: var(--r-4); }
html.onyx2 .rep-frame { border-radius: var(--r-3); }

/* Notes et Compte : la carte prend toute la largeur, la liste des notes toute la hauteur */
html.onyx2[data-view="notes"] .main > .card, html.onyx2[data-view="compte"] .main > .card { max-width: none; }
html.onyx2[data-view="notes"] .feed { max-width: none; }

@media (min-width: 861px) {
  /* Les pages Tâches et Notes remplissent la fenêtre : la carte s'étire jusqu'en bas de l'écran */
  html.onyx2[data-view="taches"] .main, html.onyx2[data-view="notes"] .main { min-height: calc(100dvh - 96px); }
  html.onyx2[data-view="taches"] .main > .card, html.onyx2[data-view="notes"] .main > .card { flex: 1 1 auto; }
  html.onyx2[data-view="taches"] .kanban { flex: 1 1 auto; align-items: stretch; }
  html.onyx2[data-view="notes"] .feed { flex: 1 1 0; min-height: 0; }

  /* Tableau de bord : la rangée Tâches et Notes s'étire jusqu'en bas de l'écran, les colonnes et la liste des notes la remplissent */
  html.onyx2 .cols:has(> #taches) { min-height: calc(100dvh - 96px); align-items: stretch; }
  html.onyx2 .cols > #taches .kanban { flex: 1 1 auto; align-items: stretch; }
  html.onyx2 .cols > #notes .feed.limit { max-height: none; flex: 1 1 0; min-height: 0; }
}
@media (min-width: 861px) {
  /* Tableau de bord : les quatre colonnes restent côte à côte (Terminé ne passe plus en dessous), la carte des Tâches prend les deux tiers */
  html.onyx2 .cols:has(> #taches) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  html.onyx2 .cols > #taches .kanban { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ===== Icônes des onglets de navigation (tuiles et onglets Fichiers) ===== */
/* Fini le carré violet bombé : un carré à filet de la couleur d'action, l'icône au trait dedans. */
html.onyx2.apple .tile-ico, html.onyx2.apple[data-theme="dark"] .tile-ico {
  width: 52px; height: 52px; border-radius: 14px; color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
html.onyx2.apple .tile:hover .tile-ico { box-shadow: inset 0 0 0 1px var(--accent); }
html.onyx2 .tab { display: inline-flex; align-items: center; gap: 8px; }
html.onyx2 .tab svg { flex-shrink: 0; }