/* Mise en page et composants. Les couleurs viennent des jetons de themes.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--frame);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.5;min-height:100vh}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-title);font-weight:var(--w-title);margin:0;line-height:1.25;letter-spacing:0}
h1{font-size:var(--fs-title)}
h2{font-size:18px}
h3{font-size:15px}
p{margin:0}
a{color:var(--accent-ink);text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.num,input[type=number],.ltr{direction:ltr;unicode-bidi:isolate}
bdi{unicode-bidi:isolate}
.muted{color:var(--muted)}
.sm{font-size:13px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;direction:ltr;unicode-bidi:isolate}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------ boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--control);background:var(--card);color:var(--text);border-radius:var(--ctrl-radius);cursor:pointer;font-weight:500;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--track)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.danger{color:#B42318;border-color:#E0A9A3}
[data-theme="nuit"] .btn.danger{color:#F28B82;border-color:#6B3A36}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--track)}
.btn.small{min-height:32px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg,.nav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------ champs */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.lbl{font-size:13px;font-weight:500;color:var(--muted)}
.field .hint{font-size:12px;color:var(--muted)}
input[type=text],input[type=password],input[type=search],input[type=tel],input[type=date],input[type=number],select,textarea{width:100%;min-height:40px;padding:8px 12px;background:var(--card);border:1px solid var(--control);border-radius:var(--ctrl-radius);color:var(--text)}
textarea{min-height:84px;resize:vertical}
select{appearance:auto}
input:disabled,select:disabled{opacity:.6}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--accent);flex:none}
input[aria-invalid=true]{border-color:#B42318}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.form-error{color:#B42318;font-size:14px;min-height:0}
[data-theme="nuit"] .form-error{color:#F28B82}
.check{display:flex;align-items:center;gap:10px;min-height:32px}

/* ------------------------------------------------------------ ossature */
.app{padding:var(--inset);min-height:100vh}
.sheet{background:var(--sheet);border:var(--sheet-edge);border-radius:var(--sheet-radius);min-height:calc(100vh - 2*var(--inset));display:grid;grid-template-columns:240px minmax(0,1fr);overflow:clip}
.nav{padding:20px 14px;display:flex;flex-direction:column;gap:4px;border-inline-end:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 18px;min-width:0}
.brand img,.brand .mark{width:40px;height:40px;border-radius:8px;object-fit:contain;flex:none}
.brand .mark{display:grid;place-items:center;background:var(--accent);color:#fff}
.brand .mark svg{width:22px;height:22px}
.brand b{font-family:var(--font-title);font-weight:var(--w-title);font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.brand small{display:block;color:var(--muted);font-size:12px}
.nav a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 12px;border-radius:var(--ctrl-radius);color:var(--nav-ink);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--track)}
.nav a[aria-current=page]{background:var(--nav-bg);color:var(--nav-ink-active)}
.nav a[aria-current=page] svg{color:var(--nav-icon-active)}
.nav .sp{flex:1}
.nav .sep{height:1px;background:var(--rule);margin:8px 0}
.main{padding:24px 28px 48px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.topbar .who{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.pagehead p{color:var(--muted);margin-top:4px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--border);background:var(--tint);border-radius:var(--card-radius);margin-bottom:18px}
.banner.warn{background:color-mix(in srgb,#C77700 10%,var(--card));border-color:color-mix(in srgb,#C77700 40%,var(--border))}

/* ------------------------------------------------------------ cartes, tableaux */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:18px}
.card+.card{margin-top:16px}
.card>h2,.card>h3{margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:14px 16px}
.kpi .v{font-size:28px;font-weight:600;color:var(--accent-ink);line-height:1.1;direction:ltr;unicode-bidi:isolate;display:block;text-align:start}
.kpi .l{font-size:13px;color:var(--muted)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--card-border);border-radius:var(--card-radius);background:var(--card)}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;font-weight:500;font-size:12px;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--track) 45%,transparent)}
.tbl .n{text-align:end;font-variant-numeric:tabular-nums}
.tbl select{min-width:150px}
.tbl td:first-child input[type=checkbox]{margin:0}
.tbl td.act{white-space:nowrap;text-align:end}
.tbl .row-link{color:var(--text);font-weight:500;text-decoration:none}
.tbl .row-link:hover{text-decoration:underline}
.empty{padding:36px 20px;text-align:center;color:var(--muted)}
.badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:var(--pill-radius);font-size:12px;font-weight:500;background:var(--track);color:var(--text);white-space:nowrap}
.badge.ok{background:color-mix(in srgb,#1A7F4B 14%,var(--card));color:#166A3F}
.badge.warn{background:color-mix(in srgb,#C77700 16%,var(--card));color:#8A5200}
.badge.off{background:var(--track);color:var(--muted)}
[data-theme="nuit"] .badge.ok{color:#7FD6A3}
[data-theme="nuit"] .badge.warn{color:#F0B45A}
.bar{height:8px;background:var(--track);border-radius:var(--bar-radius);overflow:hidden;min-width:80px}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:var(--bar-radius)}
.prog{display:flex;align-items:center;gap:10px}
.prog .bar{flex:1}
.prog span{font-size:13px;color:var(--muted);min-width:56px;text-align:end;direction:ltr;unicode-bidi:isolate}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:500;white-space:nowrap;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--text);border-bottom-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--control);border-radius:var(--ctrl-radius);overflow:hidden;background:var(--card)}
.seg button{border:0;background:none;padding:0 14px;min-height:38px;cursor:pointer;font-weight:500;color:var(--muted);border-inline-end:1px solid var(--border)}
.seg button:last-child{border-inline-end:0}
.seg button[aria-pressed=true]{background:var(--nav-bg);color:var(--nav-ink-active)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar .grow{flex:1;min-width:180px}
.toolbar select{width:auto;min-width:200px;max-width:100%}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.filebtn:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.stack{display:flex;flex-direction:column;gap:16px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.two>.card+.card{margin-top:0}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0}
dl.kv dt{color:var(--muted);font-size:13px}
dl.kv dd{margin:0;overflow-wrap:anywhere}
.cycle-title{margin:22px 0 10px;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cls-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.cls-card{display:block;background:var(--card);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:14px 16px;text-decoration:none;color:var(--text)}
.cls-card:hover{border-color:var(--control)}
.cls-card b{display:block;font-weight:600}
.cls-card span{font-size:13px;color:var(--muted)}

/* grille de notes */
input.grid-in{width:92px;text-align:center;font-variant-numeric:tabular-nums}
input.grid-app{min-width:180px}
.st-ico{display:inline-block;min-width:70px;font-size:12px;color:var(--muted)}
.st-ico.ok{color:#166A3F}
.st-ico.err{color:#B42318}
[data-theme="nuit"] .st-ico.ok{color:#7FD6A3}
[data-theme="nuit"] .st-ico.err{color:#F28B82}

/* choix de thème */
.theme-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.theme-opt{display:block;text-align:start;border:2px solid var(--border);border-radius:var(--card-radius);padding:10px;background:var(--card);cursor:pointer}
.theme-opt[aria-checked=true]{border-color:var(--accent)}
.theme-opt>b{display:block;margin-top:8px;font-size:14px}
.theme-opt>span{font-size:12px;color:var(--muted)}
.tp{background:var(--frame);padding:6px;border-radius:8px;border:1px solid var(--outer);color:var(--text);font-family:var(--font)}
.tp-sheet{background:var(--sheet);border:var(--sheet-edge);border-radius:min(var(--sheet-radius),10px);display:grid;grid-template-columns:30% 1fr;min-height:96px;overflow:hidden}
.tp-nav{padding:8px 6px;border-inline-end:1px solid var(--rule);display:flex;flex-direction:column;gap:5px}
.tp-nav i{display:block;height:8px;border-radius:4px;background:var(--track)}
.tp-nav i:first-child{background:var(--nav-bg)}
.tp-main{padding:8px;display:flex;flex-direction:column;gap:6px}
.tp-card{background:var(--card);border:1px solid var(--card-border);border-radius:min(var(--card-radius),10px);padding:6px 8px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.tp-card em{font-style:normal;font-weight:600;color:var(--accent-ink);font-size:15px;direction:ltr}
.tp-card i{display:block;height:6px;width:46%;background:var(--track);border-radius:3px}
.tp-btn{align-self:flex-start;background:var(--primary);color:var(--on-primary);font-size:10px;padding:3px 10px;border-radius:var(--ctrl-radius)}
.tp-logo{width:16px;height:16px;border-radius:4px;object-fit:contain;background:var(--accent);margin-bottom:2px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--control);cursor:pointer;padding:0}
.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--text)}
.logo-box{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo-box img{width:64px;height:64px;object-fit:contain;border:1px solid var(--border);border-radius:8px;background:#fff}
input[type=color]{width:44px;height:36px;padding:2px;border:1px solid var(--control);border-radius:var(--ctrl-radius);background:var(--card)}

/* ------------------------------------------------------------ connexion */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(420px,100%);background:var(--card);border:1px solid var(--card-border);border-radius:var(--card-radius);padding:28px}
.login-card h1{margin-bottom:6px}
.login-card .stack{margin-top:20px}
.login .lang{position:fixed;top:14px;inset-inline-end:14px}

/* ------------------------------------------------------------ fenêtres, messages */
.modal-back{position:fixed;inset:0;background:rgba(10,12,14,.5);display:grid;place-items:start center;padding:5vh 14px;overflow:auto;z-index:50}
.modal{background:var(--card);color:var(--text);border:1px solid var(--card-border);border-radius:var(--card-radius);width:min(520px,100%);padding:22px}
.modal.wide{width:min(860px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;flex-wrap:wrap}
.cred{background:var(--frame);border:1px solid var(--border);border-radius:var(--card-radius);padding:14px;display:grid;gap:10px;margin:14px 0}
.cred .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cred .val{font-size:18px;font-weight:600;overflow-wrap:anywhere}
.toasts{position:fixed;bottom:16px;inset-inline-start:16px;display:flex;flex-direction:column;gap:8px;z-index:80;max-width:calc(100vw - 32px)}
.toast{background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:var(--ctrl-radius);font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.toast.err{background:#B42318;color:#fff}
.loading{padding:40px;text-align:center;color:var(--muted)}

/* ------------------------------------------------------------ bulletin (écran + impression) */
#print-root{display:none}
.bul{background:#fff;color:#111;font-family:var(--font);padding:28px 30px;border:1px solid #ddd;max-width:800px;margin:0 auto;font-size:13px}
.bul+.bul{margin-top:24px}
.bul-head{display:flex;align-items:center;gap:16px;border-bottom:2px solid #111;padding-bottom:12px;margin-bottom:14px}
.bul-head img{width:64px;height:64px;object-fit:contain}
.bul-head h1{font-size:20px;color:#111}
.bul-head .sub{color:#444}
.bul-id{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;margin-bottom:14px}
.bul table{width:100%;border-collapse:collapse}
.bul th,.bul td{border:1px solid #888;padding:5px 8px;text-align:start}
.bul th{background:#eee;font-weight:600;font-size:12px}
.bul td.c{text-align:center;font-variant-numeric:tabular-nums;direction:ltr}
.bul tfoot td{font-weight:600;background:#f6f6f6}
.bul-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.bul-sum div{border:1px solid #888;padding:8px 10px}
.bul-sum b{display:block;font-size:18px}
.bul-obs{border:1px solid #888;padding:8px 10px;min-height:56px;margin-bottom:16px}
.bul-sign{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px;min-height:70px}
.bul-sign div{border-top:1px solid #888;padding-top:6px;text-align:center;color:#444}
.cred-sheet{font-family:var(--font);color:#111;padding:20px;max-width:520px;border:2px solid #111}
.cred-sheet h1{font-size:20px;margin-bottom:12px;color:#111}
.cred-sheet p{margin:6px 0}
.cred-sheet .v{font-size:20px;font-weight:700}

@media (max-width:860px){
  .app{padding:0}
  .sheet{display:block;border-radius:0;border-inline:0;min-height:100vh}
  .nav{flex-direction:row;flex-wrap:wrap;align-items:center;border-inline-end:0;border-bottom:1px solid var(--rule);padding:10px 12px;gap:2px}
  .nav .brand{padding:0 8px 0 0;width:100%;margin-bottom:6px}
  .nav .sep,.nav .sp{display:none}
  .nav a{min-height:40px;padding:0 10px;font-size:14px}
  .nav a span{display:inline}
  .main{padding:18px 14px 40px}
  .modal-back{padding:0}
  .modal{border-radius:0;min-height:100vh;width:100%}
}
@media (prefers-reduced-motion:no-preference){.btn,.nav a{transition:background-color .12s}}
@media print{
  body{background:#fff}
  .app,.toasts,.modal-back,.login{display:none!important}
  #print-root{display:block!important}
  .bul{border:0;max-width:none;padding:0;page-break-after:always;break-after:page}
  .bul:last-child{page-break-after:auto;break-after:auto}
  .bul+.bul{margin-top:0}
  @page{size:A4;margin:14mm}
}