/* Flotte ORÉA — jetons et composants (voir DESIGN.md) */
:root{
  --canvas:#0A0A0A;--surface:#121214;--raised:#19191C;--line:rgba(245,245,240,.08);--line-strong:rgba(245,245,240,.16);
  --ink:#F5F5F0;--ink-2:#A3A39C;--ink-3:#6B6B66;--accent:#FF7A1A;--accent-2:#FFA254;--accent-dim:rgba(255,122,26,.16);
  --sage:#7FA37E;--amber:#D08C3C;--oxblood:#B0463F;--ia:#B14CFF;--ok:#3DFF7A;
  --rail:264px;--panel:440px;--g:24px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Playfair Display",Georgia,serif;
}
:root[data-accent=violet]{--accent:#B14CFF;--accent-2:#D29CFF;--accent-dim:rgba(177,76,255,.18)}
:root[data-theme=light][data-accent=violet]{--accent:#8A2BE2;--accent-2:#A85CFF;--accent-dim:rgba(138,43,226,.16)}
:root[data-theme=light]{
  --canvas:#F5F5F0;--surface:#FFFFFF;--raised:#FAFAF7;--line:rgba(10,10,10,.08);--line-strong:rgba(10,10,10,.18);
  --ink:#0A0A0A;--ink-2:#5E5E5A;--ink-3:#9A9A94;--accent:#E8640A;--accent-2:#FF8A33;--accent-dim:rgba(232,100,10,.16);
  --sage:#4F7A4E;--amber:#A86A24;--oxblood:#8E342E;
}
*{box-sizing:border-box}
html{color-scheme:dark}:root[data-theme=light]{color-scheme:light}
body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.45 var(--sans);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;font-weight:500}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.mute{color:var(--ink-2)}.faint{color:var(--ink-3)}
.sage{color:var(--sage)}.amber{color:var(--amber)}.oxblood{color:var(--oxblood)}.gold{color:var(--accent)}

/* ===== squelette ===== */
.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.marque{display:flex;align-items:baseline;gap:10px;padding:22px 20px 18px}
.marque .orea{font-family:var(--serif);font-size:20px;letter-spacing:.14em;color:var(--ink)}
.marque .sous{font-size:12px;color:var(--ink-2)}
.rail-titre{padding:6px 20px 6px;font-size:12px;color:var(--ink-3)}
.rail-bots{overflow:auto;flex:1;padding:0 10px}
.rail-bot{display:grid;grid-template-columns:8px 1fr 56px 44px;gap:10px;align-items:center;width:100%;text-align:left;padding:7px 10px;border-radius:4px;color:var(--ink-2)}
.rail-bot:hover{background:var(--raised);color:var(--ink)}
.rail-bot.sel{background:var(--raised);color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
.rail-bot .nom{font-weight:500}
.rail-bot .n{text-align:right;font-size:12px}
.rail-bot svg{width:44px;height:16px;display:block}
.rail-bas{padding:12px 10px 16px;border-top:1px solid var(--line);display:grid;gap:2px}
.rail-lien{display:flex;justify-content:space-between;padding:7px 10px;border-radius:4px;color:var(--ink-2);width:100%;text-align:left}
.rail-lien:hover{background:var(--raised);color:var(--ink)}
.pastille{width:8px;height:8px;border-radius:50%;background:var(--sage)}
.pastille.off{background:var(--ink-3)}.pastille.alerte{background:var(--oxblood)}

.centre{min-width:0}
.corps>div,.sante>div,.regle>div,.grille-3>div,.deux>div{min-width:0}
.barre{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;height:52px;padding:0 var(--g);background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.barre .fil{color:var(--ink-2);font-size:13px}
.barre .fil b{color:var(--ink);font-weight:500}
.barre .releve{margin-left:auto;font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.barre .releve i{width:6px;height:6px;border-radius:50%;background:var(--sage);display:inline-block}
.cmdk-btn{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 12px;border:1px solid var(--line-strong);border-radius:4px;color:var(--ink-2);font-size:13px;min-width:200px}
.cmdk-btn:hover{color:var(--ink);border-color:var(--accent)}
.cmdk-btn kbd{margin-left:auto;font:11px var(--sans);color:var(--ink-3);border:1px solid var(--line-strong);border-radius:3px;padding:1px 5px}
.ico-btn{width:30px;height:30px;border:1px solid var(--line-strong);border-radius:4px;display:grid;place-items:center;color:var(--ink-2)}
.ico-btn:hover{color:var(--ink);border-color:var(--accent)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:600}
.page{padding:28px var(--g) 80px;max-width:1180px}

/* ===== accueil ===== */
.titre-flotte{display:flex;align-items:baseline;gap:18px;margin-bottom:22px}
.titre-flotte h1{font-size:44px;line-height:1.1}
.titre-flotte .resume{color:var(--ink-2);font-size:14px}
.pouls{display:grid;grid-template-columns:repeat(8,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.pouls-bot{display:block;text-align:left;padding:14px 14px 12px;border-right:1px solid var(--line);position:relative;min-width:0}
.pouls-bot:last-child{border-right:0}
.pouls-bot:hover{background:var(--surface)}
.pouls-bot .nom{font-weight:500;display:flex;align-items:center;gap:7px}
.pouls-bot .nom i{width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none}
.pouls-bot .nom i.off{background:var(--ink-3)}
.pouls-bot .role{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pouls-bot svg{display:block;width:100%;height:64px;margin:12px 0 10px}
.pouls-bot .chiffres{display:grid;grid-template-columns:1fr auto;align-items:baseline;font-size:12px;color:var(--ink-2);column-gap:8px}
.pouls-bot .chiffres b{font-weight:500;color:var(--ink);font-size:16px}
.pouls-bot .chiffres .c{color:var(--ink-3)}
.pouls-bot .alerte-trait{position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--oxblood)}
.pouls-bot .alerte-n{position:absolute;top:14px;right:14px;font-size:11px;color:var(--oxblood)}
.pouls-note{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);padding:8px 0 0}

.deux{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;margin-top:40px}
.bloc h2{font-size:22px;margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
.bloc h2 small{font-size:13px;color:var(--ink-2);font-weight:400}
.bloc h2 .lien{margin-left:auto;font-size:13px;color:var(--accent);font-weight:400}
.ligne-al{display:grid;grid-template-columns:10px 1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);align-items:start}
.ligne-al .g{width:8px;height:8px;border-radius:50%;margin-top:6px}
.ligne-al .g.critique{background:var(--oxblood)}.ligne-al .g.majeur{background:var(--amber)}.ligne-al .g.moyen{background:var(--ink-3)}
.ligne-al b{font-weight:500;display:block}.ligne-al span{font-size:12.5px;color:var(--ink-2)}
.ligne-al .qui{font-size:12px;color:var(--ink-3);white-space:nowrap;padding-top:2px}
.journal{display:grid;gap:0}
.j-ligne{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.j-ligne .date{color:var(--ink-3);font-size:12px;padding-top:1px}
.j-ligne .quoi b{font-weight:500}
.j-ligne .auteur{color:var(--ink-3);font-size:12px}
.j-ligne .auteur.inconnu{color:var(--oxblood)}

table.ledger{width:100%;border-collapse:collapse;font-size:13px}
.ledger th{font-weight:400;color:var(--ink-2);font-size:12px;text-align:left;height:28px;border-bottom:1px solid var(--line-strong);padding:0 10px 0 0;white-space:nowrap}
.ledger td{height:36px;border-bottom:1px solid var(--line);padding:0 10px 0 0;vertical-align:middle}
.ledger tr:hover td{background:var(--surface)}
.ledger th.n,.ledger td.n{text-align:right;padding-right:0;padding-left:14px;white-space:nowrap}
.ledger td.num,.ledger th{white-space:nowrap}
.ledger td.n+td,.ledger th.n+th{padding-left:14px}
.ledger td.n{font-variant-numeric:tabular-nums}
.ledger .b{font-weight:500}
.ledger .sous{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.trait{height:3px;background:var(--line);position:relative;min-width:80px}
.trait i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.bascule{width:34px;height:18px;border-radius:9px;background:var(--line-strong);position:relative;transition:background .15s}
.bascule::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--ink-2);transition:transform .15s,background .15s}
.bascule.on{background:var(--accent)}.bascule.on::after{transform:translateX(16px);background:var(--canvas)}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--line-strong);border-radius:4px;font-size:12px;color:var(--ink-2);white-space:nowrap}
.chip b{color:var(--ink);font-weight:500}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--sage)}
.chip i.off{background:var(--ink-3)}.chip i.amber{background:var(--amber)}

/* ===== page bot ===== */
.entete{display:flex;align-items:flex-end;gap:24px;margin-bottom:8px}
.entete h1{font-size:34px;line-height:1.1}
.entete .role{color:var(--ink-2);font-size:15px;padding-bottom:4px}
.entete .actions{margin-left:auto;display:flex;gap:8px;padding-bottom:4px}
.btn{height:32px;padding:0 14px;border:1px solid var(--line-strong);border-radius:4px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--accent)}
.btn.or{background:var(--accent);color:var(--canvas);border-color:var(--accent);font-weight:600}
.btn.or:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.petit{height:26px;padding:0 10px;font-size:12px;color:var(--ink-2)}
.btn.petit:hover{color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 28px}
.corps{display:grid;grid-template-columns:150px 1fr;gap:40px}
.ancres{position:sticky;top:76px;align-self:start;display:grid;gap:2px}
.ancres a{padding:6px 0 6px 12px;color:var(--ink-2);font-size:13px;border-left:1px solid var(--line)}
.ancres a:hover{color:var(--ink)}
.ancres a.on{color:var(--ink);border-left-color:var(--accent)}
section.s{padding:0 0 44px;scroll-margin-top:76px}
section.s h2{font-size:22px;margin-bottom:16px;display:flex;align-items:baseline;gap:10px}
section.s h2 small{font-size:13px;color:var(--ink-2);font-weight:400}
section.s h2 .lien{margin-left:auto;font-size:13px;color:var(--accent);font-weight:400}
.sante{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
.sante svg.grand{width:100%;height:120px;display:block}
.sante .legende{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin-top:6px}
.faits{display:grid;grid-template-columns:1fr auto;font-size:13px;row-gap:0}
.faits div{padding:7px 0;border-bottom:1px solid var(--line)}
.faits div:nth-child(2n){text-align:right;font-variant-numeric:tabular-nums}
.faits .k{color:var(--ink-2)}
.regle{display:grid;grid-template-columns:200px 1fr auto;gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.regle:last-child{border-bottom:1px solid var(--line)}
.regle h3{font-size:14px;font-weight:500;line-height:1.4}
.regle .n{color:var(--ink-3);font-size:12px;display:block;margin-top:2px}
.regle .texte{font-size:13.5px;color:var(--ink-2);line-height:1.55;white-space:pre-wrap;max-width:66ch;max-height:7.8em;overflow:hidden;position:relative}
.regle .texte.ouvert{max-height:none}
.regle .texte:not(.ouvert)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4em;background:linear-gradient(transparent,var(--canvas))}
.regle .plus{font-size:12px;color:var(--accent);margin-top:6px;display:inline-block}
.regle .act{display:grid;gap:6px;align-content:start}
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.liste-simple{list-style:none;margin:0;padding:0;font-size:13px}
.liste-simple li{padding:7px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.liste-simple li span{color:var(--ink-3);font-size:12px;text-align:right}
.liste-simple.gf li{display:block}
.liste-simple.gf li span{display:block;text-align:left}
.liste-simple.gf .tag{display:inline-block;margin-top:4px;font-size:11px;color:var(--sage);border:1px solid color-mix(in srgb,var(--sage) 40%,transparent);border-radius:3px;padding:1px 6px}
.exclus{font-size:12px;color:var(--ink-3);display:block;margin-top:2px}
.vide{padding:28px 0;color:var(--ink-2);font-size:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vide b{color:var(--ink);font-weight:500;display:block;margin-bottom:4px}
.cause{font-size:12px;color:var(--ink-3);display:block;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== panneau d'action ===== */
.voile{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .18s;z-index:20}
.voile.on{opacity:1;pointer-events:auto}
.panneau{position:fixed;top:0;right:0;bottom:0;width:var(--panel);max-width:100vw;background:var(--surface);border-left:1px solid var(--line-strong);transform:translateX(100%);transition:transform .18s ease-out;z-index:21;display:flex;flex-direction:column}
.panneau.on{transform:none}
.panneau header{padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.panneau header .k{font-size:12px;color:var(--ink-2)}
.panneau header h2{font-size:18px;margin-top:4px;line-height:1.35}
.panneau .x{position:absolute;top:16px;right:16px}
.panneau .contenu{padding:18px 24px;overflow:auto;flex:1}
.panneau .pied{padding:14px 24px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.panneau .pied .btn.or{margin-left:auto}
.p-titre{font-size:12px;color:var(--ink-2);margin:16px 0 8px}
.p-titre:first-child{margin-top:0}
.diff{font-size:12.5px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.diff div{padding:5px 10px;white-space:pre-wrap;font-family:var(--sans)}
.diff .moins{background:rgba(176,70,63,.12);color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--oxblood)}
.diff .plus{background:rgba(184,151,106,.14);color:var(--ink)}
.diff .ctx{color:var(--ink-3)}
.verif{display:grid;gap:0}
.verif div{display:grid;grid-template-columns:16px 1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;align-items:center}
.verif .ok{color:var(--sage)}.verif .ko{color:var(--oxblood)}.verif .attente{color:var(--ink-3)}
.verif .res{font-size:12px;color:var(--ink-2)}
.champ{width:100%;background:var(--raised);border:1px solid var(--line-strong);border-radius:4px;color:var(--ink);padding:8px 10px;font:inherit;resize:vertical;min-height:64px}
.champ:focus{outline:none;border-color:var(--accent)}
.champ.court{min-height:0;height:32px;padding:0 10px}
.etat-final{padding:14px;border:1px solid var(--sage);border-radius:4px;font-size:13px;display:none}
.etat-final.on{display:block}
.etat-final b{color:var(--sage);font-weight:500;display:block;margin-bottom:4px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,8px);background:var(--ink);color:var(--canvas);padding:9px 14px;border-radius:4px;font-size:13px;opacity:0;transition:.18s;z-index:30;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ===== palette ⌘K ===== */
.cmdk{position:fixed;inset:0;z-index:40;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(0,0,0,.5)}
.cmdk.on{display:flex}
.cmdk .boite{width:600px;max-width:calc(100vw - 32px);background:var(--raised);border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.cmdk input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:15px var(--sans);padding:14px 16px;outline:none}
.cmdk .res{max-height:360px;overflow:auto;padding:6px}
.cmdk .grp{font-size:11px;color:var(--ink-3);padding:8px 10px 4px}
.cmdk .it{display:grid;grid-template-columns:1fr auto;gap:12px;padding:8px 10px;border-radius:4px;font-size:13.5px;cursor:pointer}
.cmdk .it span{color:var(--ink-3);font-size:12px}
.cmdk .it.on,.cmdk .it:hover{background:var(--accent-dim);color:var(--ink)}
.cmdk .pied{display:flex;gap:16px;padding:8px 16px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3)}

/* ===== mouvement ===== */
.trace{stroke-dasharray:1;stroke-dashoffset:1;animation:tracer 1.2s ease-out forwards}
.aire{opacity:0;animation:apparaitre .6s ease-out .8s forwards}
@keyframes tracer{to{stroke-dashoffset:0}}
@keyframes apparaitre{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.trace{animation:none;stroke-dashoffset:0}.aire{animation:none;opacity:1}.panneau,.voile,.toast,.bascule,.bascule::after{transition:none}}

/* ===== téléphone ===== */
@media (max-width:980px){.deux,.sante,.grille-3{grid-template-columns:1fr}.corps{grid-template-columns:1fr}.ancres{display:none}.pouls{grid-template-columns:repeat(8,180px);overflow-x:auto}.regle{grid-template-columns:1fr}.cmdk-btn{min-width:0}.cmdk-btn span{display:none}}
@media (max-width:760px){:root{--g:16px}.app{grid-template-columns:1fr}.rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}.rail-bots{display:flex;overflow-x:auto;gap:4px;padding:0 10px 10px}.rail-bot{grid-template-columns:8px auto;width:auto;white-space:nowrap}.rail-bot .n,.rail-bot svg{display:none}.rail-bas,.rail-titre{display:none}.barre .releve{white-space:nowrap}.barre .releve::before{content:none}.titre-flotte{flex-direction:column;gap:6px;align-items:flex-start}.titre-flotte h1{font-size:34px}.titre-flotte .resume{font-size:13px}.entete{flex-wrap:wrap}.entete .actions{margin-left:0}.panneau{width:100vw}}