/* Styles repris de suivi-opera-hotels.html, puis compléments pour les pages serveur (en bas). */
:root{
  --paper:#F3F5F8; --surface:#FFFFFF; --ink:#1B2230; --ink-2:#4A5568; --ink-3:#7A8699;
  --line:#DCE1E8; --line-2:#EBEEF3;
  --brass:#A77A2B; --brass-soft:#F4EAD6; --brass-ink:#6E4E15;
  --done:#2E7A57; --done-soft:#E1F1E8; --na:#8A93A3; --na-soft:#ECEEF2;
  --doing:#2F5E9E; --doing-soft:#E2EBF7; --danger:#B23A3A; --danger-soft:#F8E4E4;
  --focus:#2F5E9E;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#161A21; --surface:#1F242D; --ink:#E8ECF2; --ink-2:#B3BCCA; --ink-3:#8791A1;
    --line:#333A46; --line-2:#2A303A;
    --brass:#D2A457; --brass-soft:#3A3122; --brass-ink:#F0D7A8;
    --done:#5BBE8C; --done-soft:#1F3A2D; --na:#8A93A3; --na-soft:#2A2F38;
    --doing:#7FA8E3; --doing-soft:#23324A; --danger:#E27C7C; --danger-soft:#43262A;
    --focus:#7FA8E3;
  }
}
:root[data-theme="dark"]{
  --paper:#161A21; --surface:#1F242D; --ink:#E8ECF2; --ink-2:#B3BCCA; --ink-3:#8791A1;
  --line:#333A46; --line-2:#2A303A;
  --brass:#D2A457; --brass-soft:#3A3122; --brass-ink:#F0D7A8;
  --done:#5BBE8C; --done-soft:#1F3A2D; --na:#8A93A3; --na-soft:#2A2F38;
  --doing:#7FA8E3; --doing-soft:#23324A; --danger:#E27C7C; --danger-soft:#43262A;
  --focus:#7FA8E3;
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.num{font-variant-numeric:tabular-nums}

/* Barre du haut */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;flex-direction:column;margin-right:auto;cursor:pointer;background:none;border:0;padding:0;text-align:left}
.brand b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.brand span{font-size:12.5px;color:var(--ink-3)}
.create{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.create-field{display:flex;flex-direction:column}
.code-input{width:205px;height:42px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);padding:0 12px;font-size:16px;font-weight:600;letter-spacing:.04em}
.code-input::placeholder{font-weight:400;letter-spacing:0;color:var(--ink-3)}
.code-input[aria-invalid="true"]{border-color:var(--danger)}
.btn{height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);padding:0 16px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-primary:hover{opacity:.9;border-color:var(--ink)}
.btn-sm{height:34px;padding:0 12px;font-size:13.5px;border-radius:8px}
.btn-danger{color:var(--danger)}
.btn-danger.armed{background:var(--danger);border-color:var(--danger);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.form-msg{font-size:12.5px;margin-top:4px;min-height:0;color:var(--danger)}
.form-msg.ok{color:var(--done)}

.banner{margin:16px 0 0;padding:10px 14px;border-radius:10px;font-size:13.5px;background:var(--brass-soft);color:var(--brass-ink)}
.banner:empty{display:none}

/* Accueil */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:26px 0 18px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:36px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);padding:0 14px;cursor:pointer;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .n{font-size:12.5px;opacity:.7}
.search{height:36px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);padding:0 14px;min-width:200px;flex:1;max-width:320px}
.select{height:36px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);padding:0 12px}
.spacer{flex:1}

.tags{list-style:none;margin:0 0 60px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tag{position:relative;display:block;width:100%;text-align:left;cursor:pointer;background:var(--surface);border:1.5px solid var(--line);border-radius:14px 14px 14px 14px;padding:16px 18px 14px 58px;transition:border-color .15s}
.tag:hover{border-color:var(--ink-3)}
.tag::before{content:"";position:absolute;left:18px;top:22px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--paper)}
.tag[data-status="doing"]::before{border-color:var(--doing)}
.tag[data-status="done"]::before{border-color:var(--done);background:var(--done-soft)}
.tag-code{font-size:28px;font-weight:800;letter-spacing:.02em;line-height:1.1}
.tag-name{font-size:14px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-name:empty::before{content:"Nom de l'hôtel à renseigner";color:var(--ink-3);font-style:italic}
.tag-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:13px}
.bar{height:6px;border-radius:3px;background:var(--line-2);overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--doing);border-radius:3px;transition:width .3s}
.bar.done i{background:var(--done)}
.status{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;background:var(--na-soft);color:var(--ink-2)}
.status[data-s="doing"]{background:var(--doing-soft);color:var(--doing)}
.status[data-s="done"]{background:var(--done-soft);color:var(--done)}
.tag-meta{font-size:12px;color:var(--ink-3);margin-top:6px}
.empty{padding:60px 20px;text-align:center;color:var(--ink-2);border:1.5px dashed var(--line);border-radius:14px;margin-bottom:60px}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:4px}

/* Vue hôtel */
.hotel{display:grid;grid-template-columns:260px 1fr;gap:28px;margin:22px 0 80px;align-items:start}
.hotel>*{min-width:0}
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px)}
.back{background:none;border:0;padding:0;color:var(--ink-2);cursor:pointer;font-weight:500;font-size:14px;margin-bottom:14px}
.back:hover{color:var(--ink)}
.fob{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px}
.fob-code{font-size:40px;font-weight:800;letter-spacing:.02em;line-height:1}
.fob-pct{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;font-size:13px;color:var(--ink-2)}
.fob-pct b{font-size:22px;color:var(--ink)}
.secnav{list-style:none;margin:14px 0 0;padding:0}
.secnav a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:14px}
.secnav a:hover{background:var(--surface);color:var(--ink)}
.secnav a .c{font-size:12.5px;color:var(--ink-3)}
.secnav a.full .c{color:var(--done);font-weight:600}
.side-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);cursor:pointer;padding:4px 2px}
.toggle input{width:16px;height:16px;accent-color:var(--ink)}

.info{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:22px}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 16px}
.fld label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:3px}
.fld input,.fld textarea{width:100%;border:1.5px solid var(--line-2);background:var(--paper);border-radius:8px;padding:7px 10px;font-size:14px}
.fld input:focus,.fld textarea:focus{border-color:var(--focus);outline:none}
.fld textarea{min-height:64px;resize:vertical;line-height:1.45}
.fld-notes{margin-top:12px}
.info-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-3)}

.section{margin-bottom:30px}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:4px}
.sec-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.sec-head .c{font-size:13px;color:var(--ink-2)}
.group{font-size:13px;font-weight:600;color:var(--brass);margin:18px 0 2px;padding-left:44px}
.note{margin:12px 0;padding:10px 14px;border-left:3px solid var(--brass);background:var(--brass-soft);color:var(--brass-ink);border-radius:0 8px 8px 0;font-size:13.5px}
.tasks{list-style:none;margin:0;padding:0}
.task{display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);align-items:start}
.task input[type=checkbox]{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:1px 0 0;border:2px solid var(--ink-3);border-radius:6px;background:var(--surface);cursor:pointer;display:grid;place-items:center;transition:background .12s,border-color .12s}
.task input[type=checkbox]::after{content:"";width:6px;height:11px;border:solid transparent;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.task input[type=checkbox]:checked{background:var(--done);border-color:var(--done)}
.task input[type=checkbox]:checked::after{border-color:#fff}
.task input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}
.task-t{font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.exp{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;background:var(--line-2);color:var(--ink-2);letter-spacing:.02em}
.exp[data-k="on"]{background:var(--done-soft);color:var(--done)}
.exp[data-k="off"]{background:var(--danger-soft);color:var(--danger)}
.exp[data-k="val"]{background:var(--brass-soft);color:var(--brass-ink)}
.task-p{font-size:13px;color:var(--ink-3);margin-top:2px}
.task-h{font-size:14px;color:var(--ink-2);margin-top:4px;max-width:72ch}
.task-n{font-size:13px;color:var(--brass-ink);margin-top:4px}
.task-m{font-size:12px;color:var(--ink-3);margin-top:5px}
.task-m:empty{display:none}
.task.is-done .task-t{color:var(--ink-3)}
.task.is-done .task-t span.tt{text-decoration:line-through;text-decoration-thickness:1px}
.task.is-na{opacity:.6}
.task.is-na .task-t span.tt{text-decoration:line-through}
.na{height:28px;padding:0 10px;border-radius:7px;border:1.5px solid var(--line);background:transparent;font-size:12px;font-weight:600;color:var(--ink-3);cursor:pointer}
.na[aria-pressed="true"]{background:var(--na-soft);border-color:var(--na);color:var(--ink-2)}
.hide-done .task.is-done,.hide-done .task.is-na{display:none}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-size:14px;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.loading{padding:60px 0;text-align:center;color:var(--ink-3)}

@media (max-width:820px){
  .hotel{grid-template-columns:1fr;gap:18px}
  .side{position:static}
  .secnav{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
  .secnav a{white-space:nowrap;background:var(--surface);border:1px solid var(--line)}
  .top .wrap{gap:10px}
  .brand{margin-right:0;width:100%}
  .create{width:100%;flex-wrap:nowrap}
  .code-input{width:100%}
  .create-field{flex:1;min-width:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------- Compléments : barre utilisateur ---------------- */
a.btn{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
a.btn-primary{color:var(--paper)}
.brand{color:inherit;text-decoration:none}
.usernav{display:flex;align-items:center;gap:14px;font-size:13.5px;flex-wrap:wrap}
.usernav-name{font-weight:600;color:var(--ink)}
.usernav a{color:var(--ink-2);text-decoration:none}
.usernav a:hover{color:var(--ink);text-decoration:underline}
.usernav form{margin:0}
.linkbtn{background:none;border:0;padding:0;color:var(--ink-2);cursor:pointer;font-size:13.5px}
.linkbtn:hover{color:var(--ink);text-decoration:underline}

/* ---------------- Compléments : pages serveur ---------------- */
.panel{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:22px 24px;margin:26px 0}
.panel-narrow{max-width:560px}
.panel h1{margin:0 0 14px;font-size:24px;letter-spacing:-.01em}
.panel h2{margin:22px 0 10px;font-size:17px}
.panel h1+h2,.panel h2:first-child{margin-top:0}
.muted{color:var(--ink-3)}
.form{display:flex;flex-direction:column;gap:12px}
.form .btn{align-self:flex-start}
.form-inline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.form-inline input{border:1.5px solid var(--line-2);background:var(--paper);border-radius:8px;padding:6px 10px;font-size:14px;min-width:0;flex:1 1 150px}
.fld select{width:100%}
.alert{margin:0 0 14px;padding:10px 14px;border-radius:10px;font-size:14px;background:var(--danger-soft);color:var(--danger)}
.alert-ok{background:var(--done-soft);color:var(--done)}
.alert-warn{background:var(--brass-soft);color:var(--brass-ink)}
.banner-ok{background:var(--done-soft);color:var(--done)}
.banner-error{background:var(--danger-soft);color:var(--danger)}
.checklist{list-style:none;padding:0;margin:0 0 14px;font-size:14px}
.checklist li{padding:3px 0}
.checklist .ok{color:var(--done)}
.checklist .ko{color:var(--danger);font-weight:600}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--line-2);padding:1px 5px;border-radius:4px}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-size:12.5px;color:var(--ink-3);font-weight:600;padding:8px 10px;border-bottom:2px solid var(--ink)}
.table td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:top}
.table .num{text-align:right}
.actions details{margin-bottom:6px}
.actions summary{cursor:pointer;color:var(--ink-2);font-size:13.5px}
.actions summary:hover{color:var(--ink)}
.sync-state{font-size:12.5px;color:var(--ink-3)}
.sync-state.off{color:var(--danger)}
/* ---------------- Compléments : bloc dépliable d'une tâche ---------------- */
.task-x{margin-top:8px;max-width:72ch}
.task-x summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--doing);width:max-content;max-width:100%}
.task-x summary:hover{text-decoration:underline}
.task-x-body{margin-top:8px;display:flex;flex-direction:column;gap:10px}
.x-copy,.x-block{background:var(--paper);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px}
.x-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.x-head b{color:var(--ink)}
.x-code{display:block;font-size:12.5px;word-break:break-all;background:none;padding:0}
.x-text{white-space:pre-line;font-size:13.5px;line-height:1.55}
.x-block .task-n{margin-top:6px}
.copy-btn{height:28px;padding:0 10px;font-size:12.5px;flex-shrink:0}

@media (max-width:820px){
  .usernav{width:100%;justify-content:flex-end}
  .panel{padding:18px 16px}
}


/* ---------------- Compléments : modèles de checklists ---------------- */
.model-select{height:42px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);padding:0 10px;max-width:240px}
.cl-title{font-size:12.5px;color:var(--ink-3);margin:16px 0 4px}
.cl-list{list-style:none;margin:0;padding:0}
.cl-list a{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:13.5px}
.cl-list a:hover{background:var(--paper);color:var(--ink)}
.cl-list a[aria-current="page"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--ink)}
.cl-list a .c{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.cl-list a.full .c{color:var(--done);font-weight:600}
.cl-add{display:flex;gap:6px;margin-top:10px}
.cl-add[hidden]{display:none}
.cl-add .select{flex:1;min-width:0;height:34px;border-radius:8px;font-size:13.5px}
.cl-head{margin-bottom:24px}
.cl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cl-name{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.cl-pct{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.cl-pct b{font-size:22px;color:var(--ink)}
.cl-foot{margin:-10px 0 40px;display:flex;justify-content:flex-end}
@media (max-width:820px){
  .create{flex-wrap:wrap}
  .model-select{order:3;flex:1 1 100%;max-width:none}
}

/* ---------------- Compléments : panneau des checklists (accueil) ---------------- */
.home{display:grid;grid-template-columns:260px 1fr;gap:28px;margin:22px 0 60px;align-items:start}
.home>*{min-width:0}
.cl-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px);max-height:calc(100vh - 110px);overflow-y:auto;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:10px}
.cl-nav-title{font-size:12.5px;color:var(--ink-3);padding:4px 8px 4px}
.cl-group{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brass);padding:12px 8px 4px}
.tab{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer}
.tab:hover{background:var(--paper);color:var(--ink)}
.tab[aria-current="page"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--ink)}
.tab .n{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.tab-select-wrap{display:none}
.home-title{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.home-main .toolbar{margin:14px 0 18px}
.home .tags{margin-bottom:0}
@media (max-width:820px){
  .home{grid-template-columns:1fr;gap:14px}
  .cl-nav{display:none}
  .tab-select-wrap{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
  .tab-select-wrap .select{height:42px;border-radius:10px;font-size:15px;color:var(--ink)}
}