/* styles/responsive/mobile-landing.css
 * ══════════════════════════════════════════════════════════════════
 * Couche mobile de la LANDING pinboard (≤ 640px + paysage bas).
 * Ne touche à AUCUN breakpoint desktop : tout est scopé dans des
 * media queries étroites. Les `!important` répliquent ceux de
 * landing-scale.css (même règle, même arme) pour gagner la cascade
 * sur les transforms décoratifs.
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Onglet flottant "LIGNES" (tiroir mobile) ─────────────────────
 * Injecté par src/ui/landing-bits/lines-drawer.js. Invisible hors
 * mobile : le panneau CRT reste en bas-droite comme aujourd'hui. */
.llp-drawer-toggle{ display:none; }

@media (max-width: 640px){

  /* ── TICKET t+ : on garde la DA complète, juste réduite.
   * 460px × .62 ≈ 285px → tient dans 320px avec la rotation. */
  #view-landing.pinboard-theme .pb-ticket{
    top:14px; left:10px;
    transform:rotate(-3deg) scale(.62) !important;
    transform-origin:top left !important;
  }

  /* ── PLAQUES DE MODE : pleine largeur, plus de scale décoratif.
   * Cibles tactiles ≥ 56px de haut. */
  #view-landing.pinboard-theme .landing-modes{
    left:10px; right:10px; bottom:10px;
    padding:10px;
    transform:none !important;
    align-items:stretch;
  }
  #view-landing.pinboard-theme .mode-btn.metro-plate{
    width:100%;
    gap:10px;
  }
  #view-landing.pinboard-theme .mp-plate{
    padding:10px 12px 9px;
    min-height:56px;
  }
  #view-landing.pinboard-theme .mp-title{ font-size:24px; letter-spacing:1.2px; }
  #view-landing.pinboard-theme .mp-sub{ font-size:10px; letter-spacing:1.2px; }
  #view-landing.pinboard-theme .mp-arrow-panel{ width:44px; height:44px; }
  #view-landing.pinboard-theme .mp-arrow{ width:26px; height:26px; }

  /* ── COMPTEUR LIVE : réduit et posé SOUS le ticket, côté gauche
   * (en haut-droite il chevauchait le ticket sur écran étroit). */
  #view-landing.pinboard-theme .live-display{
    top:126px; left:10px; right:auto;
    align-items:flex-start;
    transform:scale(.72) !important;
    transform-origin:top left !important;
  }
  #view-landing.pinboard-theme .ld-arm{ margin-right:0; margin-left:24px; }

  /* ── PANNEAU CRT LIGNES : tiroir latéral droit rétractable.
   * Annule le display:none historique (lines-panel.css ≤640px) et le
   * scale décoratif ; fermé par défaut (translateX hors écran). */
  #view-landing.pinboard-theme .landing-lines-stack{
    display:block;
    position:fixed;
    top:0; right:0; bottom:0; left:auto;
    /* > 1000 : passe devant les contrôles zoom Leaflet détachés
     * (chrome-unified les fixe à z-index:1000). */
    z-index:1010;
    width:min(300px, 86vw);
    max-height:none;
    padding:64px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) 12px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:rgba(8,8,8,.55);
    backdrop-filter:blur(3px);
    transform:translateX(105%) !important;
    transition:transform .28s cubic-bezier(.22,.9,.25,1);
    box-shadow:-18px 0 40px rgba(0,0,0,.45);
  }
  #view-landing.pinboard-theme .landing-lines-stack.is-open{
    transform:translateX(0) !important;
  }
  #view-landing.pinboard-theme .landing-crt-brief.console-brief{
    width:100%;
    max-width:none;
  }

  /* Onglet d'ouverture : plaque métal verticale, collée au bord droit
   * sous le zoom Leaflet (theme 16-52px, zoom 60-132px). ≥44px. */
  .llp-drawer-toggle{
    display:flex; align-items:center; justify-content:center;
    position:fixed;
    top:150px; right:0;
    z-index:1011;
    min-width:44px; min-height:96px;
    padding:14px 12px;
    background:#1a1a1a;
    color:#ff9a1f;
    border:1.5px solid #3a3a3a; border-right:none;
    border-radius:3px 0 0 3px;
    box-shadow:0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    cursor:pointer;
    transition:transform .28s cubic-bezier(.22,.9,.25,1);
  }
  .llp-drawer-toggle-txt{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    font-family:'Barlow Semi Condensed','Barlow',sans-serif;
    font-weight:800; font-size:13px; letter-spacing:3px;
    text-transform:uppercase;
    line-height:1;
  }
  /* Tiroir ouvert → l'onglet accompagne le panneau pour rester
   * accessible comme bouton de fermeture. */
  .llp-drawer-toggle.is-open{
    transform:translateX(calc(-1 * min(300px, 86vw)));
  }
  html[data-theme="light"] .llp-drawer-toggle{
    background:#f8f6f0;
    color:#1a2d52;
    border-color:rgba(0,0,0,.2);
  }
}

/* Très petits écrans (iPhone SE 320px) : un cran plus compact. */
@media (max-width: 400px){
  #view-landing.pinboard-theme .pb-ticket{
    transform:rotate(-3deg) scale(.55) !important;
  }
  #view-landing.pinboard-theme .mp-title{ font-size:21px; }
  #view-landing.pinboard-theme .mp-arrow-panel{ width:40px; height:40px; }
  #view-landing.pinboard-theme .live-display{
    top:114px;
    transform:scale(.62) !important;
  }
}

/* ── PAYSAGE MOBILE : la hauteur est la denrée rare. Les 3 plaques
 * passent côte à côte, le ticket disparaît (re-disponible en
 * portrait), le compteur reste discret. */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape){
  #view-landing.pinboard-theme .pb-ticket{ display:none; }
  #view-landing.pinboard-theme .landing-modes{
    left:10px; right:10px; bottom:8px;
    flex-direction:row;
    gap:8px;
    padding:8px;
    transform:none !important;
  }
  #view-landing.pinboard-theme .mode-btn.metro-plate{
    width:auto; flex:1; min-width:0;
    gap:8px;
  }
  #view-landing.pinboard-theme .mp-plate{
    min-height:52px; padding:8px 10px 7px;
  }
  #view-landing.pinboard-theme .mp-title{ font-size:17px; letter-spacing:.8px; }
  #view-landing.pinboard-theme .mp-sub{ display:none; }
  #view-landing.pinboard-theme .mp-arrow-panel{ display:none; }
  #view-landing.pinboard-theme .live-display{
    top:0; right:56px;
    transform:scale(.6) !important;
    transform-origin:top right !important;
  }
}

/* ── TACTILE (tous écrans) : états actifs remplaçant le hover,
 * et cible confortable pour le group-toggle ◉ (20px → 34px). */
@media (hover: none){
  .pinboard-theme .cb-pick-group-btn{
    width:34px; height:34px;
    font-size:15px;
  }
  .pinboard-theme .cb-pick-chip:active{
    transform:translateY(-1px) scale(1.08);
  }
}