/* styles/theme/pinboard/modal.css
 * --------------------------------------------------------------
 * Surcharge pinboard de la modal multi (connexion / création room).
 *
 * Reprend la DA :
 *   · Fond papier crème au lieu du panel sombre
 *   · Bordure simple crème (pas de `clip-path` arcade)
 *   · Code-boxes en mini-plaques bleues RATP (miroir des tiles du lobby)
 *   · Tabs : style "ticket perforé" — fond crème avec bande noire active
 *   · Typo Barlow Semi Condensed partout
 *   · ZÉRO box-shadow blur > 8px, ZÉRO text-shadow glow
 *
 * Doit rester < 300 L.
 */

/* Variables locales (repris de plaques.css + lobby.css) */
body:has(.view.pinboard-theme.active) .mc-modal-backdrop{
  --md-tile-blue: #003f7a;
  --md-tile-blue-grout: rgba(245,241,230,.38);
  --md-paper: #fbf7ec;
  --md-paper-edge: rgba(60,55,45,.2);
  --md-ink: #1a1b1c;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .mc-modal-backdrop{
  --md-paper: #26292e;
  --md-paper-edge: rgba(255,255,255,.12);
  --md-ink: #e9eaee;
}

/* ============================================================
   BOX PRINCIPAL : papier crème, coin supérieur droit corné
   ============================================================ */
body:has(.view.pinboard-theme.active) .mc-modal-backdrop{
  background:rgba(10,12,16,.58);
}
body:has(.view.pinboard-theme.active) .mc-modal{
  background:var(--md-paper);
  border:1.5px solid var(--md-paper-edge);
  border-radius:3px;
  clip-path:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 24px 48px -16px rgba(0,0,0,.5),
    0 4px 8px rgba(0,0,0,.2);
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .mc-modal{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 48px -16px rgba(0,0,0,.7),
    0 4px 8px rgba(0,0,0,.4);
}
body:has(.view.pinboard-theme.active) .mc-modal-close{
  background:transparent;
  border:1px solid var(--md-paper-edge);
  color:var(--md-ink);
  opacity:.55;
  border-radius:2px;
}
body:has(.view.pinboard-theme.active) .mc-modal-close:hover{
  background:rgba(0,0,0,.05);
  border-color:#c23e3e;
  color:#c23e3e;
  opacity:1;
}

/* ============================================================
   HEADER : eyebrow ticket + titre plaque RATP
   ============================================================ */
body:has(.view.pinboard-theme.active) .mc-modal-eyebrow{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--md-tile-blue);
  opacity:.9;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .mc-modal-eyebrow{
  color:#6ea8ff;
}
body:has(.view.pinboard-theme.active) .mc-modal-title{
  --tile-w: 28px; --tile-h: 14px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:800;
  font-size:28px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#f8f6f0;
  padding:10px 18px;
  display:inline-block;
  background-color:var(--md-tile-blue);
  background-image:
    repeating-linear-gradient(0deg,
      var(--md-tile-blue-grout) 0 1px,
      rgba(255,255,255,.08)     1px 2px,
      transparent               2px var(--tile-h)),
    repeating-linear-gradient(90deg,
      var(--md-tile-blue-grout) 0 1px,
      transparent 1px var(--tile-w));
  background-attachment:fixed, fixed;
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.35),
    inset 0 -2px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.08),
    0 3px 6px rgba(0,0,0,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  align-self:flex-start;
}

/* ============================================================
   TABS (Créer / Rejoindre) : ticket perforé
   ============================================================ */
body:has(.view.pinboard-theme.active) .mc-modal-tabs{
  background:transparent;
  border:1px dashed var(--md-paper-edge);
  padding:3px;
  border-radius:3px;
}
body:has(.view.pinboard-theme.active) .mc-mtab{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--md-ink);
  opacity:.6;
  border-radius:2px;
  transition:background .15s ease, color .15s ease;
}
body:has(.view.pinboard-theme.active) .mc-mtab:hover{
  opacity:1;
  background:rgba(0,0,0,.04);
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .mc-mtab:hover{
  background:rgba(255,255,255,.04);
}
body:has(.view.pinboard-theme.active) .mc-mtab.active{
  background:var(--md-tile-blue);
  color:#f8f6f0;
  opacity:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.2);
}

/* ============================================================
   FIELD pseudo + hint
   ============================================================ */
body:has(.view.pinboard-theme.active) .mc-field-lbl{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:2px;
  color:var(--md-tile-blue);
  opacity:.9;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .mc-field-lbl{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .mc-field-input{
  background:#fff;
  border:1px solid var(--md-paper-edge);
  color:var(--md-ink);
  border-radius:2px;
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  font-weight:500;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .mc-field-input{
  background:#1a1d22;
  color:#e9eaee;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
body:has(.view.pinboard-theme.active) .mc-field-input:focus{
  border-color:var(--md-tile-blue);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.06),
    0 0 0 2px rgba(0,63,122,.18);
}
body:has(.view.pinboard-theme.active) .mc-modal-hint{
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  font-size:12px;
  letter-spacing:.3px;
  color:var(--md-ink);
  opacity:.6;
}

/* ============================================================
   CODE BOXES (entrée code 4 lettres) : mini-plaques émaillées
   Miroir du bloc code du lobby — cohérence visuelle.
   ============================================================ */
body:has(.view.pinboard-theme.active) .mc-code-box{
  --tile-w: 24px; --tile-h: 12px;
  background-color:var(--md-tile-blue);
  background-image:
    repeating-linear-gradient(0deg,
      var(--md-tile-blue-grout) 0 1px,
      rgba(255,255,255,.08)     1px 2px,
      transparent               2px var(--tile-h)),
    repeating-linear-gradient(90deg,
      var(--md-tile-blue-grout) 0 1px,
      transparent 1px var(--tile-w));
  border:none;
  border-radius:2px;
  color:#f8f6f0;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:800;
  font-size:36px;
  letter-spacing:0;
  caret-color:#f8f6f0;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  box-shadow:
    inset 0 0 0 2px rgba(245,241,230,.35),
    inset 0 0 0 3px rgba(0,0,0,.35),
    inset 0 -2px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.1),
    0 3px 6px rgba(0,0,0,.22);
}
body:has(.view.pinboard-theme.active) .mc-code-box::placeholder{ color:rgba(245,241,230,.3); }
body:has(.view.pinboard-theme.active) .mc-code-box:focus{
  background-color:var(--md-tile-blue);
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.4),
    inset 0 -2px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.12),
    0 5px 10px rgba(0,0,0,.3);
}
body:has(.view.pinboard-theme.active) .mc-code-box:not(:placeholder-shown){
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.4),
    inset 0 -2px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.12),
    0 3px 6px rgba(0,0,0,.22);
}

/* ============================================================
   CTA modal : reprend le style "plaque RATP bleue" du lobby
   ============================================================ */
body:has(.view.pinboard-theme.active) .mc-modal-cta{
  background:var(--md-tile-blue);
  color:#f8f6f0;
  border:none;
  border-radius:3px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:800;
  letter-spacing:2px;
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.3),
    inset 0 -3px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.08),
    0 4px 10px rgba(0,0,0,.25);
  animation:none !important;
}
body:has(.view.pinboard-theme.active) .mc-modal-cta:hover:not([disabled]){
  transform:translateY(-1px);
  filter:brightness(1.05);
}
body:has(.view.pinboard-theme.active) .mc-modal-cta .mc-cta-glow{ display:none; }

/* ============================================================
   Erreur en bas de modal
   ============================================================ */
body:has(.view.pinboard-theme.active) .mc-multi-error{
  background:rgba(194,62,62,.08);
  border:1px solid #c23e3e;
  color:#c23e3e;
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  font-size:12px;
  letter-spacing:.4px;
  border-radius:2px;
}