/* Thème « Demandes » : sombre par défaut, clair si le système le demande */
:root{
  --bg:#0e1117;--bg2:#151a23;--card:#1a202b;--card-h:#212938;--bd:#2a3342;
  --tx:#e8ecf3;--mut:#8b96a8;--ac:#7c8cff;--ac2:#c084fc;--ac-tx:#0e1117;
  --ok:#34d399;--warn:#fbbf24;--err:#f87171;--info:#60a5fa;
  --r:14px;--sh:0 8px 28px rgba(0,0,0,.35);
  --grad:linear-gradient(135deg,var(--ac),var(--ac2));
}
@media (prefers-color-scheme:light){:root{
  --bg:#f4f6fb;--bg2:#e9edf6;--card:#fff;--card-h:#f6f8fd;--bd:#dfe4ef;
  --tx:#161b26;--mut:#667085;--ac:#5b6cf0;--ac2:#a855f7;--ac-tx:#fff;
  --ok:#059669;--warn:#b45309;--err:#dc2626;--info:#2563eb;--sh:0 8px 24px rgba(30,40,80,.12);
}}
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;min-height:100vh;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--tx);
  background:radial-gradient(1200px 500px at 15% -10%,color-mix(in srgb,var(--ac) 18%,transparent),transparent 60%),
             radial-gradient(900px 450px at 100% 0,color-mix(in srgb,var(--ac2) 14%,transparent),transparent 55%),var(--bg);
  background-attachment:fixed}
a{color:var(--ac);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px 48px}

/* barre du haut */
.topbar{position:sticky;top:0;z-index:5;backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--bd)}
.topbar .in{max-width:1040px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-weight:800;font-size:20px;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.brand i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:var(--ac-tx);font-size:18px}
.brand span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
nav .who{color:var(--mut);margin-right:4px}
nav a,nav button{color:var(--tx);background:transparent;border:1px solid var(--bd);padding:6px 12px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;text-decoration:none}
nav a:hover,nav button:hover{background:var(--card-h);text-decoration:none}

h1{font-size:28px;margin:28px 0 4px}h2{font-size:20px;margin:36px 0 12px}
.sub{color:var(--mut);margin:0 0 18px}

/* formulaires et boutons */
input,select,textarea{font:inherit;color:var(--tx);background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent)}
::placeholder{color:var(--mut)}
.btn{font:inherit;font-weight:600;border:0;border-radius:12px;padding:11px 18px;cursor:pointer;color:var(--ac-tx);background:var(--grad);transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:default;transform:none}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--bd)}
.btn.ghost:hover{background:var(--card-h)}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:9px}
.btn.danger{background:transparent;color:var(--err);border:1px solid color-mix(in srgb,var(--err) 45%,var(--bd))}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* onglets de type */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}
.tab{font:inherit;display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer;transition:all .15s}
.tab:hover{background:var(--card-h)}
.tab.on{background:var(--grad);border-color:transparent;color:var(--ac-tx);font-weight:600;box-shadow:var(--sh)}

.search{display:flex;gap:10px;margin-bottom:20px}.search input{flex:1;min-width:0;font-size:17px;padding:14px 18px;border-radius:14px}

/* résultats */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px}
.card{position:relative;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--ac) 50%,var(--bd))}
.poster{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:var(--bg2)}
.ph{display:grid;place-items:center;font-size:44px;background:linear-gradient(160deg,var(--bg2),var(--card-h))}
.card .meta{padding:10px 12px 6px;flex:1}
.card .t{font-weight:650;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .btn{margin:6px 12px 12px;padding:8px}
.empty{color:var(--mut);padding:24px;text-align:center;grid-column:1/-1}

/* panneau déroulant */
details.panel{margin:22px 0;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:4px 18px}
details.panel summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between}
details.panel summary::after{content:"＋";color:var(--ac)}details[open].panel summary::after{content:"－"}
details.panel form{display:grid;gap:10px;padding-bottom:18px}

/* tableaux */
.tablewrap{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);text-align:left;padding:12px 16px;background:var(--bg2)}
td{padding:12px 16px;border-top:1px solid var(--bd);font-size:14.5px;vertical-align:middle}
tbody tr:hover{background:var(--card-h)}
td .mut{color:var(--mut);font-size:13px}
.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
.badge[data-s="en attente"]{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.badge[data-s="approuvée"]{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.badge[data-s="disponible"]{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.badge[data-s="refusée"]{color:var(--err);background:color-mix(in srgb,var(--err) 14%,transparent)}
.badge.role{color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,transparent)}
.kind{white-space:nowrap}

/* notification */
#msg{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--card-h);color:var(--tx);border:1px solid var(--bd);padding:12px 20px;border-radius:12px;box-shadow:var(--sh);transition:all .25s;z-index:20}
#msg.show{opacity:1;transform:translate(-50%,0)}

/* connexion */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login form{width:min(380px,100%);background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:32px;display:grid;gap:14px;box-shadow:var(--sh)}
.login .brand{justify-content:center;font-size:26px;margin-bottom:4px}
.login .brand i{width:44px;height:44px;font-size:24px;border-radius:13px}
.login p{margin:0 0 6px;text-align:center;color:var(--mut)}
#err{color:var(--err);min-height:1.3em;font-size:14px;text-align:center}

@media(max-width:560px){h1{font-size:24px}.grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}th,td{padding:10px}}

/* ---- liste des demandes ---- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:14px;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--bd);background:var(--card);color:var(--tx);cursor:pointer;transition:all .15s}
.chip:hover{background:var(--card-h)}
.chip b{font-weight:700;font-size:12px;min-width:20px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--bg2);color:var(--mut)}
.chip.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 16%,var(--card))}
.chip.on b{background:var(--ac);color:var(--ac-tx)}
.chip.alert b{background:var(--warn);color:#1a1200}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters select{padding:8px 12px;font-size:14px}
.toggle{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--mut);cursor:pointer;user-select:none}
.toggle input{accent-color:var(--ac);width:16px;height:16px;padding:0}

.reqs{display:grid;gap:12px}
.req{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:12px;transition:border-color .15s,box-shadow .15s}
.req:hover{border-color:color-mix(in srgb,var(--ac) 40%,var(--bd))}
.req.new{border-left:4px solid var(--warn)}
.thumb{width:62px;height:92px;border-radius:9px;object-fit:cover;background:var(--bg2);display:grid;place-items:center;font-size:26px;overflow:hidden}
.req .ttl{font-weight:700;font-size:16px;line-height:1.3}
.req .ttl .y{color:var(--mut);font-weight:400;font-size:14px}
.req .line{color:var(--mut);font-size:13.5px;margin-top:3px;display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
.req .note{margin-top:8px;font-size:13.5px;padding:7px 11px;border-radius:9px;background:var(--bg2);border-left:3px solid var(--bd);color:var(--tx);white-space:pre-wrap}
.req .side{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.act{font:inherit;font-size:13px;font-weight:600;padding:6px 11px;border-radius:9px;border:1px solid var(--bd);background:transparent;color:var(--tx);cursor:pointer;transition:all .12s;white-space:nowrap}
.act:hover{background:var(--card-h)}
.act.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--bd))}.act.ok:hover{background:color-mix(in srgb,var(--ok) 14%,transparent)}
.act.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,var(--bd))}.act.info:hover{background:color-mix(in srgb,var(--info) 14%,transparent)}
.act.no{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--bd))}.act.no:hover{background:color-mix(in srgb,var(--err) 14%,transparent)}
.act.ico{padding:6px 9px}
@media(max-width:640px){.req{grid-template-columns:54px 1fr}.thumb{width:54px;height:80px}.req .side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}}

/* ---- fenêtre utilisateurs ---- */
dialog{border:1px solid var(--bd);border-radius:20px;background:var(--card);color:var(--tx);padding:0;width:min(640px,calc(100vw - 24px));max-height:88vh;box-shadow:var(--sh)}
dialog::backdrop{background:rgba(5,8,14,.6);backdrop-filter:blur(3px)}
.dlg-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--card)}
.dlg-h h3{margin:0;font-size:18px}.dlg-b{padding:18px 22px 22px}
.urow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--bd)}
.urow:first-child{border-top:0}.urow .n{font-weight:650;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.addu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;gap:8px;margin-bottom:8px}
.addu input,.addu select{min-width:0;width:100%}
dialog{overflow-x:hidden}
@media(max-width:600px){.addu{grid-template-columns:minmax(0,1fr)}}

/* ---- affichage en posters ---- */
.seg{display:inline-flex;border:1px solid var(--bd);border-radius:10px;overflow:hidden}
.seg button{font:inherit;font-size:14px;padding:7px 12px;border:0;background:var(--card);color:var(--mut);cursor:pointer}
.seg button.on{background:var(--grad);color:var(--ac-tx);font-weight:600}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px}
.pcard{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:color-mix(in srgb,var(--ac) 50%,var(--bd))}
.pcard.new{border-color:color-mix(in srgb,var(--warn) 60%,var(--bd))}
.pimg{position:relative;aspect-ratio:2/3;background:var(--bg2)}
.pimg img,.pimg .ph{width:100%;height:100%;object-fit:cover;display:grid;place-items:center;font-size:52px}
.pimg .badge{position:absolute;left:8px;top:8px;backdrop-filter:blur(6px);background:rgba(10,14,22,.72);border-color:currentColor}
.pimg .kindico{position:absolute;right:8px;top:8px;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(10,14,22,.72);font-size:15px;backdrop-filter:blur(6px)}
.pimg.dim img{filter:grayscale(.85) brightness(.7)}
.pm{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.pm .t{font-weight:650;font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm small{color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm .pn{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:4px;color:var(--tx);opacity:.85}
.pm .acts{margin-top:auto;padding-top:10px;justify-content:flex-start}
.pm .act{padding:5px 9px;font-size:14px}
@media(max-width:560px){.pgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}}

/* ---- sortie à venir et identification ---- */
.relinfo{display:inline-block;padding:2px 9px;border-radius:8px;font-size:12.5px;font-weight:600;white-space:normal}
.relinfo.soon{color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent)}
.relinfo.out{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.relinfo.unk{color:var(--info);background:color-mix(in srgb,var(--info) 13%,transparent)}
.mut2{color:var(--mut);font-size:12.5px}
.pm small.rl{white-space:normal;margin-top:4px;line-height:1.5}
.sugs{display:grid;gap:10px;margin:12px 0}
.sug{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2)}
.sug .sinfo{min-width:0}
@media(max-width:520px){.sug{grid-template-columns:54px 1fr}.sug .btn{grid-column:1/-1}}

/* ---- couvertures : on respecte le ratio d'origine (carré, 2:3…), fond flou tiré de l'image ---- */
.pimg{overflow:hidden}
.pimg::before{content:"";position:absolute;inset:-12%;background:var(--cv,none) center/cover no-repeat;filter:blur(18px) brightness(.55) saturate(1.25);transform:scale(1.1)}
.pimg img{position:relative;object-fit:contain}
.pimg .ph{position:relative}
.thumb{object-fit:contain}

/* ---- bouton « ⋯ » et menu d'actions (posters) ---- */
.kebab{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border:0;border-radius:11px;background:rgba(10,14,22,.72);color:#fff;font:700 20px/1 system-ui;cursor:pointer;backdrop-filter:blur(6px);display:grid;place-items:center;padding:0;transition:background .15s,transform .12s}
.kebab:hover,.kebab:focus-visible{background:var(--ac);color:var(--ac-tx);transform:scale(1.06)}
#menu{position:fixed;z-index:40;min-width:210px;padding:6px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:var(--sh);display:none;gap:2px}
#menu.open{display:grid}
#menu button{font:inherit;font-size:14px;text-align:left;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--tx);cursor:pointer;white-space:nowrap}
#menu button:hover{background:var(--card-h)}
#menu button.ok{color:var(--ok)}#menu button.info{color:var(--info)}#menu button.no{color:var(--err)}

/* ---- boutons principaux selon le statut, étiquette cliquable ---- */
.pbtns{display:flex;gap:6px;margin-top:auto;padding-top:10px}
.pbtns .act,.act.grow{flex:1;text-align:center;padding:7px 6px;font-size:13px}
.kebab.inline{position:static;width:32px;height:32px;border-radius:9px;background:transparent;border:1px solid var(--bd);color:var(--tx);backdrop-filter:none}
.kebab.inline:hover,.kebab.inline:focus-visible{background:var(--card-h);color:var(--tx);transform:none}
button.relinfo.click{font:inherit;font-size:12.5px;font-weight:600;border:1px solid transparent;cursor:pointer;text-align:left;transition:border-color .12s,filter .12s}
button.relinfo.click:hover,button.relinfo.click:focus-visible{border-color:currentColor;filter:brightness(1.15)}

/* ---- étiquette « identification » superposée à l'affiche ---- */
.relov{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 56px);padding:4px 9px;border-radius:9px;font:600 12px/1.25 system-ui,sans-serif;text-align:left;color:var(--info);background:rgba(10,14,22,.8);border:1px solid currentColor;backdrop-filter:blur(6px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.relov.soon{color:var(--warn)}.relov.out{color:var(--ok)}.relov.unk{color:var(--info)}
button.relov{cursor:pointer;transition:filter .12s,transform .12s}
button.relov:hover,button.relov:focus-visible{filter:brightness(1.2);transform:translateY(-1px)}