/* MQ-ARCHIVE (Prépa Bac) — supplements mq.css: the "Débloquer les cours" drawer,
   the PIN pad, the edge tab and the séance cell/fiches. Palette = MQ vermilion. */

/* session cell = the mq-seance card + its fiche links underneath */
.mq-scell{ display:flex; flex-direction:column; min-width:0; }
.mq-fiches{ display:flex; gap:14px; flex-wrap:wrap; padding:11px 4px 0; }
.mq-fiches a{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.mq-fiches a:hover{ color:var(--vermilion); border-color:var(--vermilion); }
.mq-seance.mq-locked{ opacity:.9; }
.mq-seance.mq-locked .mq-seance__go{ color:var(--vermilion); }

/* signed-in account bar on the portal */
.arch-acct{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:1240px; margin:0 auto; padding:14px 40px 0; }
.arch-acct .who{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.arch-acct .who b{ color:var(--ink); }
.arch-acct a.out{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:8px 14px; border-radius:8px; }
.arch-acct a.out:hover{ color:#fff; background:var(--ink); border-color:var(--ink); }
.arch-flag{ max-width:1160px; margin:14px auto 0; padding:13px 18px; background:#fff4f0; border:1px solid #f3c7ba;
  border-left:4px solid var(--vermilion); border-radius:11px; color:#7a2410; font-size:13.5px; line-height:1.5; }

/* ===== the edge tab ===== */
.unlock-tab{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:190;
  display:flex; flex-direction:column; align-items:center; gap:13px; padding:20px 11px 22px;
  background:var(--vermilion); color:#fff; border:0; cursor:pointer; border-radius:16px 0 0 16px;
  box-shadow:-14px 0 40px -16px rgba(242,48,5,.7); transition:padding .22s ease, background .22s ease; }
.unlock-tab:hover{ background:var(--ink); padding-right:17px; }
.unlock-tab .txt{ writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; }
.unlock-tab svg{ width:19px; height:19px; stroke:#fff; stroke-width:2; fill:none; }
@media (max-width:640px){ .unlock-tab{ top:auto; bottom:22px; transform:none; flex-direction:row; border-radius:14px;
  right:16px; padding:13px 18px; } .unlock-tab .txt{ writing-mode:horizontal-tb; transform:none; } }

/* ===== slide-in drawer ===== */
.scrim{ position:fixed; inset:0; background:rgba(14,14,14,.5); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; z-index:200; }
.scrim.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(452px,94vw); background:var(--paper);
  box-shadow:-40px 0 90px -34px rgba(0,0,0,.6); transform:translateX(103%);
  transition:transform .38s cubic-bezier(.32,.72,0,1); z-index:210; display:flex; flex-direction:column; }
.drawer.open{ transform:translateX(0); }
.drawer-x{ position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%;
  background:transparent; border:1px solid var(--line); color:#43403A; font-size:20px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:.18s; }
.drawer-x:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.drawer-body{ padding:60px 42px 30px; flex:1; display:flex; flex-direction:column; }
.d-lock{ width:56px; height:56px; margin-bottom:20px; }
.d-lock svg{ width:56px; height:56px; stroke:var(--vermilion); stroke-width:1.6; fill:none; }
.d-lock .shackle{ transform-origin:12px 10px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.drawer.solved .d-lock .shackle{ transform:rotate(-26deg) translateX(-1.5px); }
.drawer.solved .d-lock svg{ stroke:#1c7a3f; }
.d-kick{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.d-title{ font-family:'Newsreader',serif; font-weight:500; font-size:38px; line-height:1.02; margin:.35rem 0 0; letter-spacing:-.01em; color:var(--ink); }
.d-title i{ color:var(--vermilion); font-style:italic; }
.d-sub{ color:#43403A; font-size:15px; line-height:1.55; margin:14px 0 26px; max-width:34ch; }
.pinboxes{ display:flex; gap:10px; }
.pb{ width:100%; aspect-ratio:1/1.16; min-width:0; text-align:center; font-family:var(--mono);
  font-size:26px; font-weight:700; text-transform:uppercase; color:var(--ink);
  border:1.5px solid var(--line); border-radius:12px; background:#fff; caret-color:var(--vermilion); transition:.15s; }
.pb:focus{ outline:none; border-color:var(--vermilion); box-shadow:0 0 0 4px rgba(242,48,5,.12); }
.pb.filled{ border-color:var(--ink); }
.d-notice{ background:#fff4f0; border:1px solid #f3c7ba; color:#7a2410; font-size:13px; line-height:1.5;
  padding:10px 13px; border-radius:9px; margin:0 0 4px; }
.d-err{ color:var(--vermilion); font-size:13.5px; font-weight:500; margin:16px 0 0; min-height:1em; }
.d-enter{ margin-top:22px; width:100%; background:var(--ink); color:#fff; border:0; border-radius:12px;
  padding:16px; font-family:'Space Grotesk'; font-size:16px; font-weight:600; cursor:pointer; transition:.18s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.d-enter:hover{ background:var(--vermilion); }
.drawer.solved .d-enter{ background:var(--vermilion); box-shadow:0 14px 30px -14px rgba(242,48,5,.7); }
.d-admin{ margin-top:26px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; }
.d-admin:hover{ color:var(--vermilion); }
.drawer-foot{ padding:20px 42px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.drawer-foot a{ color:var(--vermilion); text-decoration:none; }
.drawer-foot a:hover{ text-decoration:underline; }
body.noscroll{ overflow:hidden; }