/* Clé de 13 — même direction visuelle que la maquette Dalon : bandeau noir, couleur de la société, Barlow Condensed + Inter. */
:root{
  --font-display:"Barlow Condensed","Arial Narrow",sans-serif; --font-ui:Inter,system-ui,sans-serif;
  --cg:#ff5b1a; --tr:#2b6cb0; --ts:#2c7a7b; --co:var(--cg);
  --bg:#f3f1ed; --surface:#fff; --surface-2:#edeae4; --line:#dcd7cf; --ink:#1d1a17; --muted:#6b655d;
  --ok:#1f8f5f; --warn:#c77d12; --bad:#c0392b; --dalon:#0f766e; --r:12px;
}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--font-ui)}
button,input,select{font:inherit;color:inherit} button{cursor:pointer}
a{color:var(--dalon)}
[hidden]{display:none!important}
.top{background:#161310;color:#fff;padding:10px 20px 0}
.top::after{content:"";display:block;height:3px;background:var(--co);margin:0 -20px}
.top-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.wordmark{display:grid;justify-items:center;line-height:1;font-family:var(--font-display);color:#fff;padding:0 6px}.wordmark span{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.wordmark em{font-style:normal;font-size:13px;font-weight:700;color:var(--co);line-height:.9}.brand .d{width:34px;height:34px;border-radius:9px;background:var(--dalon);display:grid;place-items:center;font:700 16px var(--font-display);color:#fff}
.brand b{display:block;font:700 17px var(--font-display);letter-spacing:.04em}.brand span{font-size:11px;color:#bdb6ad}
.co-switch{display:inline-flex;background:#2a2622;border-radius:10px;padding:3px;gap:3px}
.co-switch button{border:0;background:none;color:#bdb6ad;border-radius:8px;padding:7px 12px;font:700 13px var(--font-display);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.co-switch button i{font-style:normal;background:#3a3531;border-radius:5px;padding:1px 5px;font-size:11px}
.co-switch button.on{color:#fff;background:var(--co)}.co-switch button.on i{background:rgba(0,0,0,.25)}
.top .spacer{flex:1}.top .who{font-size:12.5px;color:#bdb6ad}.top .who b{color:#fff}
.top .btn{background:#2a2622;color:#fff;border:1px solid #3a3531}
.tabs{display:flex;gap:4px;margin-top:10px;overflow-x:auto}
.tabs a{text-decoration:none;color:#d8d2c9;font:700 14px var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:9px 12px;border-radius:9px 9px 0 0;white-space:nowrap}
.tabs a.on{background:var(--bg);color:var(--ink)}
.glow{height:260px;margin-bottom:-260px;background:linear-gradient(180deg,color-mix(in srgb,var(--co) 45%,var(--bg)),color-mix(in srgb,var(--co) 14%,var(--bg)) 45%,var(--bg));pointer-events:none}
main{position:relative;padding:18px 20px 60px;max-width:1600px;margin:0 auto}
h1{font:700 30px/1.05 var(--font-display);letter-spacing:.02em;margin:0}
.sub{color:var(--muted);margin:4px 0 14px}
.stack{display:grid;gap:14px}
.panel{background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--co);border-radius:var(--r)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.panel-h h2{margin:0;font:700 19px var(--font-display);letter-spacing:.03em}.panel-h .muted{font-size:12.5px}
.pad{padding:16px}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 14px;font-weight:700;white-space:nowrap}
.btn.primary{background:var(--co);border-color:var(--co);color:#fff}.btn.dalon{background:var(--dalon);border-color:var(--dalon);color:#fff}
.btn.small{padding:5px 10px;font-size:12.5px}.btn.co{border-color:var(--co);color:var(--co)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.form input,.form select{height:42px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);padding:0 11px;color:var(--ink);font-size:14px;min-width:0}
.form input:focus,.form select:focus{outline:none;border-color:var(--co);box-shadow:0 0 0 3px color-mix(in srgb,var(--co) 25%,transparent)}
.frplate{display:flex;align-items:stretch;height:42px;border:2px solid #16213d;border-radius:7px;overflow:hidden;background:#fff}
.frplate:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--co) 30%,transparent)}
.frplate .eu,.frplate .dep{flex:0 0 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1f48b8;color:#fff;font:700 14px/1 var(--font-display)}
.frplate .eu i{font-style:normal;font-size:8px;color:#ffd23f;letter-spacing:-1px;margin-bottom:2px}.frplate .dep{flex-basis:40px}.frplate .dep small{font-size:6.5px;margin-top:2px}
.form .frplate input{flex:1;height:auto;border:0;border-radius:0;text-align:center;font:600 19px var(--font-display);letter-spacing:.1em;text-transform:uppercase;padding:0 6px;box-shadow:none}
.frplate input::placeholder{font-size:13px;letter-spacing:.02em;text-transform:none;color:#8a8f99}
.qdet{font-size:12px;font-weight:600;color:var(--muted);min-height:16px;margin-top:4px}.qdet b{color:var(--co)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:99px;background:var(--surface-2);color:var(--ink)}
.pill.ok{background:#e3f5ec;color:#136b45}.pill.warn{background:#fdf0dc;color:#8a5306}.pill.bad{background:#fde8e5;color:#9a2b1f}.pill.co{background:color-mix(in srgb,var(--co) 14%,var(--surface));color:var(--co)}
.plate{font:600 13px var(--font-display);letter-spacing:.06em;border:1.5px solid var(--ink);border-radius:4px;padding:0 6px;background:var(--surface);white-space:nowrap}
.plate.big{font-size:18px;padding:3px 10px}
.carbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px;margin-bottom:12px;border-radius:12px;background:color-mix(in srgb,var(--co) 7%,var(--surface));border:1.5px solid color-mix(in srgb,var(--co) 45%,var(--line))}
.carbar .cb-id{flex:1 1 360px;min-width:0}.carbar .cb-name b{font:700 19px var(--font-display);letter-spacing:.03em;text-transform:uppercase}
.cb-chips,.vc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}.cb-chips span,.vc-chips span{font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.vb-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:10px 14px;margin-bottom:10px;border-radius:10px;background:color-mix(in srgb,var(--co) 9%,var(--surface));border:1px dashed color-mix(in srgb,var(--co) 45%,var(--line));font-size:13.5px}
.vs-row{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}.vs-row>.vsel{flex:1 1 420px;min-width:0}
.vs-box{border:1.5px solid color-mix(in srgb,var(--co) 35%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--co) 5%,var(--surface));padding:12px 14px;display:grid;gap:10px}
.vs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}@media(max-width:800px){.vs-grid{grid-template-columns:1fr}}
.hist{position:relative;flex:0 0 auto}.vs-row>.hist:nth-child(2){margin-left:auto}
.hist>.h-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font-weight:600;font-size:13px}
.hist>.h-btn em{font-style:normal;background:color-mix(in srgb,var(--co) 14%,var(--surface));color:var(--co);border-radius:99px;padding:0 7px;font-size:12px}
.hist.open>.h-btn{border-color:var(--co);color:var(--co)}
.h-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(620px,calc(100vw - 32px));max-height:380px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:6px}
.h-head{padding:6px 8px 8px;font-size:12px;color:var(--muted);font-weight:600}
.h-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:8px;color:var(--ink)}
.h-item:hover{background:color-mix(in srgb,var(--co) 8%,var(--surface))}.h-item b{font-family:var(--font-display);letter-spacing:.05em;font-size:15px}.h-item span{font-size:13px}.h-item small{color:var(--muted);font-size:12px;white-space:nowrap}
.h-empty{padding:10px 8px;color:var(--muted);font-size:13px}
.next-step{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;padding:12px 16px;border-radius:12px;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--co) 40%,var(--line))}
.next-step .go{flex-basis:100%}.next-step .go b{color:var(--co)}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:6px 14px;font-weight:600}.chip:hover{border-color:var(--co)}
.off-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}@media(max-width:1100px){.off-grid{grid-template-columns:1fr}}
.tablewrap{overflow-x:auto}table.t{width:100%;border-collapse:collapse}table.t th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}table.t .r{text-align:right;font-variant-numeric:tabular-nums}
tr.click{cursor:pointer}tr.click:hover td{background:color-mix(in srgb,var(--co) 6%,var(--surface))}
.bask{position:sticky;top:12px;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--co) 45%,var(--line));border-radius:14px;padding:14px;display:grid;gap:10px}
.bask h3{margin:0;font:700 18px var(--font-display);letter-spacing:.03em;text-transform:uppercase}
.bask-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--line)}
.bask-r .bd{min-width:0;display:grid}.bask-r .bd b{font-size:13.5px}.bask-r .bd .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-st{font-size:12px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:3px}.b-px{font-weight:700;color:#b9770e;white-space:nowrap}
.bask-r .bq{display:flex;align-items:center;gap:6px}.bask-r .bq button,.bask-r .bx{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--surface);font-weight:700}
.bask-r .bp{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.bask-r .bx{color:var(--bad)}.b-strike{text-decoration:line-through;color:var(--muted)}.b-out{color:var(--bad);font-weight:800}
.bask-t{display:flex;justify-content:space-between;align-items:baseline}.bask-t span{font-weight:600;color:var(--muted)}.bask-t b{font:700 24px var(--font-display);color:var(--co)}
.bask-a{display:flex;gap:8px;flex-wrap:wrap}.bask-a .btn.primary{flex:1}
.linkbtn{border:0;background:none;color:var(--dalon);font-weight:600;padding:0;text-decoration:underline}
.alert{padding:10px 14px;border-radius:10px;font-weight:600}.alert.warn{background:#fdf0dc;color:#8a5306}.alert.bad{background:#fde8e5;color:#9a2b1f}.alert.ok{background:#e3f5ec;color:#136b45}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}
.vcard{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--co) 35%,var(--line));background:color-mix(in srgb,var(--co) 6%,var(--surface))}
.vcard h3{margin:0 0 6px;font:700 22px/1.1 var(--font-display);letter-spacing:.03em;text-transform:uppercase}
.steps{display:flex;gap:6px;flex-wrap:wrap}.step{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:99px;background:var(--surface-2)}.step.on{background:color-mix(in srgb,var(--co) 16%,var(--surface));color:var(--co)}.step.done{background:#e3f5ec;color:#136b45}
#toast{position:fixed;right:18px;bottom:18px;background:#1d1a17;color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;max-width:min(560px,90vw);z-index:60;box-shadow:0 10px 30px rgba(0,0,0,.3)}
/* volet droit (carnet) */
#volet{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.15);z-index:50;overflow:auto;padding:16px 18px}
.v-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}.v-head h2{margin:0;font:700 20px var(--font-display)}
.box{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}.box h3{margin:0 0 8px;font:700 15px var(--font-display);letter-spacing:.04em;text-transform:uppercase}
.vb-ev{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 12px;padding:9px 0;border-top:1px solid var(--line)}.vb-ev:first-child{border-top:0}.vb-ev .d{font-size:12px;color:var(--muted);font-weight:600}
.login{max-width:420px;margin:60px auto;background:var(--surface);border:1px solid var(--line);border-top:5px solid var(--co);border-radius:var(--r);padding:24px}
.login .form{grid-template-columns:1fr}
.devmode{background:#fdf0dc;color:#8a5306;font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px}
@media(max-width:700px){main{padding:14px max(16px,env(safe-area-inset-left)) 60px}.bask{position:static}}

/* Futeos : mot-marque, messages, catalogue */
.wordmark.one span{font-size:21px;letter-spacing:.06em;text-transform:none;white-space:nowrap}.wordmark.one b{color:var(--co);font-weight:700}
.chip.on{background:var(--co);border-color:var(--co);color:#fff}
.convlist{max-height:62vh;overflow:auto}
.convrow{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:var(--surface);padding:10px 16px;color:var(--ink);font:inherit;cursor:pointer}
.convrow:first-child{border-top:0}.convrow:hover{background:var(--surface-2)}.convrow.on{background:color-mix(in srgb,var(--co) 10%,var(--surface));box-shadow:inset 3px 0 0 var(--co)}
.convrow:focus-visible{outline:2px solid var(--co);outline-offset:-2px}
.msg{max-width:78%;margin:0 0 10px;padding:8px 12px;border-radius:12px 12px 12px 3px;background:var(--surface-2)}
.msg.out{margin-left:auto;border-radius:12px 12px 3px 12px;background:color-mix(in srgb,var(--co) 14%,var(--surface))}
.msg .muted{font-size:11.5px;margin-top:3px}
.form textarea{border:1.5px solid var(--line);border-radius:9px;background:var(--surface);padding:9px 11px;color:var(--ink);font:14px/1.4 var(--font-ui);resize:vertical}
.form textarea:focus{outline:none;border-color:var(--co);box-shadow:0 0 0 3px color-mix(in srgb,var(--co) 25%,transparent)}