/* ==========================================================================
   Atelier PCi — design system, couche 1 : jetons
   Système « Verre », repris de Boussole (v2, 02.11.2026) pour que tous les outils
   de Lionel parlent la même langue : fond de lumière diffuse, surfaces en verre dépoli
   (flou, bord clair, reflet), typo système Apple (SF, Inter ailleurs), accent bleu #007AFF,
   commandes en pilule, rayons généreux. Chaque espace a sa teinte pour ses tuiles d'icônes.
   ========================================================================== */
:root {
  /* --- surfaces ---------------------------------------------------------- */
  --bg: #EEF0F7;                       /* sous la lumière diffuse */
  --paper: #EEF0F7;                    /* fond opaque (texte inversé, aplats) */
  --surface: rgba(255,255,255,.6);     /* verre : cartes, feuilles, panneaux */
  --surface-solid: rgba(250,250,253,.92);
  --surface-2: rgba(255,255,255,.42);  /* verre plus léger, carte dans la carte */
  --sunk: rgba(118,118,128,.12);       /* creux : champs, segments */
  --line: rgba(60,60,67,.13);
  --line-soft: rgba(60,60,67,.08);
  --ink: #1C1C1E; --ink-2: #3A3A3F; --ink-3: #63636B;
  --accent: #007AFF; --accent-strong: #0062CC; --accent-ink: #FFFFFF;
  --accent-soft: rgba(0,122,255,.12); --accent-line: rgba(0,122,255,.35);
  --emph: #007AFF;                     /* mots mis en valeur (italique) */
  --band: #1C1C1E; --band-ink: #F5F5F7;
  --glow: rgba(180,203,255,.55);
  /* verre */
  --glass-bd: rgba(255,255,255,.75); --glass-hi: inset 0 1px 0 rgba(255,255,255,.65);
  --glass: blur(26px) saturate(180%); --seg-on: #FFFFFF;
  --blobs: radial-gradient(42vmax 42vmax at 8% 6%, #B4CBFF 0%, transparent 62%), radial-gradient(38vmax 38vmax at 92% 10%, #FFC7DE 0%, transparent 60%), radial-gradient(44vmax 44vmax at 78% 92%, #BDEBDA 0%, transparent 62%), radial-gradient(36vmax 36vmax at 10% 96%, #FFDDB0 0%, transparent 60%), radial-gradient(30vmax 30vmax at 50% 50%, #E6DFFF 0%, transparent 70%);

  /* sémantique (couleurs système Apple) */
  --ok: #1F9A44;   --ok-soft: rgba(52,199,89,.14);
  --warn: #C46A00; --warn-soft: rgba(255,149,0,.14);
  --bad: #E5352B;  --bad-soft: rgba(255,59,48,.12);
  --ai: #8E44C9;   --ai-soft: rgba(175,82,222,.13);  /* texte de Claude non relu */
  /* phases PITT */
  --ph-p: #F08A00; --ph-i: #007AFF; --ph-t: #22A145; --ph-q: #AF52DE; --ph-m: #8E8E93;
  /* teintes des espaces (tuiles d'icônes), comme dans Boussole */
  --dom-texte-a: #5AC8FA; --dom-texte-b: #007AFF;
  --dom-lecon-a: #FFC15E; --dom-lecon-b: #F08A00;
  --dom-scen-a: #FF8A80; --dom-scen-b: #E5352B;
  --dom-outil-a: #8E8CFF; --dom-outil-b: #5856D6;
  --dom-acquis-a: #63E6BE; --dom-acquis-b: #00A88F;

  /* --- typographie : SF sur Apple, Inter ailleurs --------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-accent: var(--font-head);     /* l'italique reste dans la même famille */
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-28: 28px; --fs-40: 38px; --fs-48: 44px;
  --lh-tight: 1.1; --lh-ui: 1.4; --lh-body: 1.55;
  --w-regular: 400; --w-medium: 500; --w-semi: 600;

  /* --- espaces ------------------------------------------------------------ */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 80px; --s-9: 96px;

  /* --- formes ------------------------------------------------------------- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20,24,60,.04), 0 12px 32px rgba(40,50,120,.08);
  --shadow-2: var(--glass-hi), 0 1px 2px rgba(20,24,60,.04), 0 16px 40px rgba(40,50,120,.12);
  --shadow-3: 0 20px 60px rgba(0,0,0,.2);
  --focus: 0 0 0 4px var(--accent-soft), 0 0 0 1px var(--accent);

  /* --- mouvement ---------------------------------------------------------- */
  --t-fast: 150ms; --t-med: 250ms; --ease: cubic-bezier(.2, .9, .25, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* --- structure ---------------------------------------------------------- */
  --bar-h: 58px; --plan-w: 264px; --side-w: 380px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07070C; --paper: #07070C;
    --surface: rgba(36,36,42,.5); --surface-solid: rgba(30,30,36,.92); --surface-2: rgba(255,255,255,.05); --sunk: rgba(118,118,128,.24);
    --line: rgba(255,255,255,.1); --line-soft: rgba(255,255,255,.06);
    --ink: #F5F5F7; --ink-2: #D1D1D6; --ink-3: #A1A1A8;
    --accent: #0A84FF; --accent-strong: #409CFF; --accent-ink: #FFFFFF; --accent-soft: rgba(10,132,255,.22); --accent-line: rgba(10,132,255,.5);
    --emph: #64AFFF; --band: #F5F5F7; --band-ink: #1C1C1E; --glow: rgba(70,90,230,.4);
    --glass-bd: rgba(255,255,255,.12); --glass-hi: inset 0 1px 0 rgba(255,255,255,.08); --seg-on: #636366;
    --blobs: radial-gradient(42vmax 42vmax at 8% 6%, rgba(70,90,230,.6) 0%, transparent 62%), radial-gradient(38vmax 38vmax at 92% 12%, rgba(190,60,140,.45) 0%, transparent 60%), radial-gradient(44vmax 44vmax at 78% 92%, rgba(20,150,125,.42) 0%, transparent 62%), radial-gradient(36vmax 36vmax at 10% 96%, rgba(190,110,30,.22) 0%, transparent 60%);
    --ok: #30D158; --ok-soft: rgba(48,209,88,.18); --warn: #FFD60A; --warn-soft: rgba(255,214,10,.16); --bad: #FF453A; --bad-soft: rgba(255,69,58,.18);
    --ai: #DA8FFF; --ai-soft: rgba(191,90,242,.2);
    --ph-p: #FF9F0A; --ph-i: #0A84FF; --ph-t: #30D158; --ph-q: #BF5AF2; --ph-m: #8E8E93;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.35); --shadow-2: var(--glass-hi), 0 14px 36px rgba(0,0,0,.4); --shadow-3: 0 20px 60px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07070C; --paper: #07070C;
  --surface: rgba(36,36,42,.5); --surface-solid: rgba(30,30,36,.92); --surface-2: rgba(255,255,255,.05); --sunk: rgba(118,118,128,.24);
  --line: rgba(255,255,255,.1); --line-soft: rgba(255,255,255,.06);
  --ink: #F5F5F7; --ink-2: #D1D1D6; --ink-3: #A1A1A8;
  --accent: #0A84FF; --accent-strong: #409CFF; --accent-ink: #FFFFFF; --accent-soft: rgba(10,132,255,.22); --accent-line: rgba(10,132,255,.5);
  --emph: #64AFFF; --band: #F5F5F7; --band-ink: #1C1C1E; --glow: rgba(70,90,230,.4);
  --glass-bd: rgba(255,255,255,.12); --glass-hi: inset 0 1px 0 rgba(255,255,255,.08); --seg-on: #636366;
  --blobs: radial-gradient(42vmax 42vmax at 8% 6%, rgba(70,90,230,.6) 0%, transparent 62%), radial-gradient(38vmax 38vmax at 92% 12%, rgba(190,60,140,.45) 0%, transparent 60%), radial-gradient(44vmax 44vmax at 78% 92%, rgba(20,150,125,.42) 0%, transparent 62%), radial-gradient(36vmax 36vmax at 10% 96%, rgba(190,110,30,.22) 0%, transparent 60%);
  --ok: #30D158; --ok-soft: rgba(48,209,88,.18); --warn: #FFD60A; --warn-soft: rgba(255,214,10,.16); --bad: #FF453A; --bad-soft: rgba(255,69,58,.18);
  --ai: #DA8FFF; --ai-soft: rgba(191,90,242,.2);
  --ph-p: #FF9F0A; --ph-i: #0A84FF; --ph-t: #30D158; --ph-q: #BF5AF2; --ph-m: #8E8E93;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.35); --shadow-2: var(--glass-hi), 0 14px 36px rgba(0,0,0,.4); --shadow-3: 0 20px 60px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* ==========================================================================
   Couche 2 : composants de base
   ========================================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--w-regular) var(--fs-14)/var(--lh-ui) var(--font-sans); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }
/* lumière diffuse fixe derrière tout le verre (comme Boussole) */
body::after { content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none; background: var(--blobs), var(--bg); }
@media (prefers-reduced-motion: no-preference) { body::after { animation: drift 38s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: none; } 50% { transform: translate3d(-3vmax, 2vmax, 0) scale(1.06) rotate(2deg); } 100% { transform: translate3d(2vmax, -2vmax, 0) scale(1.03) rotate(-2deg); } } }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: none; box-shadow: var(--focus); }
h1, h2, h3, h4, p { margin: 0; }
em.x, .x { font-family: var(--font-accent); font-style: italic; font-weight: inherit; color: var(--emph); }
.ic { width: 18px; height: 18px; flex: none; display: block; }
.ic.sm { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* Titres : SF Display, gras et serrés, comme Boussole ; un mot en italique bleu si utile */
.t-display { font-family: var(--font-head); font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.t-h1 { font-family: var(--font-head); font-size: var(--fs-40); line-height: var(--lh-tight); letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
.t-h2 { font-family: var(--font-head); font-size: var(--fs-28); line-height: 1.2; letter-spacing: -.022em; font-weight: 600; text-wrap: balance; }
.t-h3 { font-family: var(--font-head); font-size: 19px; line-height: 1.3; font-weight: var(--w-semi); letter-spacing: -.02em; text-wrap: balance; }
.t-lead { font-size: var(--fs-16); line-height: 1.3; font-weight: var(--w-semi); }
.t-body { font-size: var(--fs-16); line-height: var(--lh-body); }
.t-small { font-size: var(--fs-14); }
.t-meta { font-size: var(--fs-12); color: var(--ink-3); }
.t-label { font-size: 13px; font-weight: var(--w-medium); color: var(--ink-3); }

/* Boutons : pilules en verre ; l'action principale est bleue et lumineuse */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--glass-bd); background: var(--surface); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); color: var(--ink); font-size: 14.5px; font-weight: var(--w-semi); letter-spacing: -.01em; white-space: nowrap; transition: transform .25s var(--spring), background-color .2s, box-shadow .25s, color .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
@media (hover: hover) { .btn:hover:not(:disabled) { transform: translateY(-1px); } }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent); }
.btn.dark { background: var(--bad); border-color: transparent; color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { background: var(--sunk); }
.btn.danger { color: var(--bad); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13.5px; }
.btn.block { width: 100%; justify-content: flex-start; }
.icon-btn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink-2); flex: none; position: relative; transition: background var(--t-fast), color var(--t-fast); }
.icon-btn:hover:not(:disabled) { background: var(--sunk); color: var(--ink); }
.icon-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
@media (pointer: coarse) { .btn { height: 42px; } .btn.sm { height: 38px; } .icon-btn { width: 40px; height: 40px; } }

/* Champs */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13px; font-weight: var(--w-medium); color: var(--ink-3); }
.input, .select, .textarea { width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--sunk); font-size: 15px; transition: box-shadow .15s, background .15s; }
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: var(--lh-ui); }
.input:focus, .select:focus, .textarea:focus { outline: none; background: var(--surface-solid); box-shadow: var(--focus); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }

/* Segments (onglets en pastille) */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--sunk); }
.seg button { height: 30px; padding: 0 14px; border-radius: 8px; color: var(--ink); opacity: .8; font-size: 14px; font-weight: var(--w-medium); white-space: nowrap; transition: transform .25s var(--spring), background-color .2s; }
.seg button[aria-pressed="true"] { background: var(--seg-on); opacity: 1; font-weight: var(--w-semi); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }

/* Puces d'état : toujours forme + couleur, jamais la couleur seule */
.state { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-pill); font-size: 12px; font-weight: var(--w-medium); color: var(--ink-2); background: var(--sunk); white-space: nowrap; }
.state i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; display: block; }
.state[data-s="revoir"], .state[data-s="relecture"] { color: var(--warn); background: var(--warn-soft); }
.state[data-s="revoir"] i, .state[data-s="relecture"] i { background: currentColor; }
.state[data-s="valide"] { color: var(--ok); background: var(--ok-soft); }
.state[data-s="valide"] i { background: currentColor; border-radius: 2px; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: var(--w-medium); color: var(--ink-2); border: 1px solid transparent; background: var(--sunk); white-space: nowrap; }
.tag.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.tag.ai { color: var(--ai); border-color: transparent; background: var(--ai-soft); }
.tag.warn { color: var(--warn); border-color: transparent; background: var(--warn-soft); }
.tag.bad { color: var(--bad); border-color: transparent; background: var(--bad-soft); }
.tag.ok { color: var(--ok); border-color: transparent; background: var(--ok-soft); }

/* Cartes : réservées aux objets à part (document, remarque), pas à chaque bloc */
.card { background: var(--surface); border: 1px solid var(--glass-bd); border-radius: var(--r-lg); box-shadow: var(--shadow-2); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }

/* Menus, feuilles, toasts */
.scrim { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-4); background: rgba(0,0,0,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet { width: min(560px, 100%); max-height: min(86dvh, 760px); overflow: auto; background: var(--surface-solid); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.sheet.wide { width: min(860px, 100%); }
.sheet-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.sheet-f { display: flex; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.menu { position: fixed; z-index: 120; min-width: 220px; padding: 6px; border-radius: var(--r-md); background: var(--surface-solid); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.menu button { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--r-xs); font-size: var(--fs-14); text-align: left; color: var(--ink); }
.menu button:hover, .menu button:focus-visible { background: var(--sunk); box-shadow: none; }
.menu button .ic { color: var(--ink-3); }
.menu button.danger, .menu button.danger .ic { color: var(--bad); }
.menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 4px 2px; }
.menu kbd { margin-left: auto; font: 11px var(--font-sans); color: var(--ink-3); }
#toasts { position: fixed; z-index: 140; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(480px, calc(100% - 32px)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-radius: var(--r-pill); background: var(--surface-solid); color: var(--ink); border: 1px solid var(--glass-bd); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); font-size: 14.5px; box-shadow: var(--shadow-1); }
.toast button { color: var(--accent); font-weight: var(--w-semi); white-space: nowrap; }
.toast.err { background: var(--bad); color: #fff; border-color: transparent; }
.toast.err button { color: #fff; }
@media (prefers-reduced-transparency: reduce) { :root { --surface: var(--surface-solid); } * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }

kbd { font: 500 11px var(--font-sans); padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-2); background: var(--surface); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }