/* ==============================================================================
   0xCyberLiTech · CLT1 — RESPONSIVE DESIGN SYSTEM (SMARTPHONES & TABLETTES)
   Architecte UI & Master Designer Unique (Règles 6, 11 & 14)
   Flux vertical natif pur · Zéro tiroir · Zéro accordéon · Bases saines
   Plafond volumétrique strict <= 350L (Règle 14 §7) · Préservation 100% Desktop
   ============================================================================== */

/* ── 1. FONDATIONS & ZERO DÉBORDEMENT GLOBAL (TABLETTES & MOBILES) ── */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; width: 100% !important; }
  .clt-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-left: 10px !important; padding-right: 10px !important; }
  .luminous-ambient-bg { display: none !important; }
  .footer-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}

/* ── 2. NAVIGATION & TIROIR MOBILE HORS-CHAMP (STANDARD NAVBAR) ── */
@media (max-width: 992px) {
  .clt-navbar, .clt-nav-inner { max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; }
  .clt-nav-inner { padding: 10px 12px !important; }
  .clt-nav-links { display: none !important; }
  .clt-nav-actions { margin-right: 0 !important; max-width: 100% !important; }
  .clt-nav-burger { display: flex !important; }
  .brand-title { font-size: 1.12rem !important; }
  .brand-tagline { display: none !important; }
  .mobile-nav-drawer { display: none !important; }
  .mobile-nav-drawer.is-open { display: flex !important; right: 0 !important; transform: translateX(0) !important; }
}

/* ── 3. TABLETTES (769px - 1024px) — SANCTUARISATION 100% ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .radio-master-front-deck { grid-template-columns: 120px 1fr 130px !important; gap: 8px !important; }
  .radio-vm-chassis .rack-ear, .radio-matrix-table-wrap .rack-ear { width: 10px !important; }
}

/* ── 4. SMARTPHONES (PORTRAIT <= 700px & PAYSAGE <= 500px) : BASES SAINES & FLUX PUR ── */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {

  /* 4.1 HERO SOUVERAIN (RESTAURÉ · LISIBILITÉ OPTIMALE SUR LES 3 PAGES) */
  .clt-hero, .rd-hero-section {
    display: flex !important; flex-direction: column !important; align-items: center !important;
    padding: 68px 16px 26px 16px !important; text-align: center !important;
    box-sizing: border-box !important; width: 100% !important; max-width: 100vw !important;
  }
  .hero-badge-pill, .rd-hero-badge { font-size: 0.72rem !important; padding: 4px 10px !important; margin-bottom: 12px !important; max-width: 96% !important; }
  .hero-main-title, .hero-headline, .rd-hero-title {
    font-size: clamp(1.18rem, 4.8vw, 1.55rem) !important; line-height: 1.28 !important;
    letter-spacing: -0.01em !important; margin-bottom: 14px !important;
    max-width: 100% !important; word-break: normal !important; overflow-wrap: break-word !important;
    box-sizing: border-box !important; padding: 0 4px !important;
  }
  .hero-main-title span, .rd-hero-title span { word-break: normal !important; }
  .hero-lead-text, .hero-subhead, .rd-hero-subtitle { font-size: 0.88rem !important; line-height: 1.5 !important; max-width: 95% !important; margin: 0 auto 18px auto !important; }
  .hero-cta-bar, .hero-actions-group, .rd-hero-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; width: 100% !important; max-width: 320px !important; margin: 0 auto !important; }
  .hero-cta-bar .btn, .hero-actions-group .btn, .btn-supreme-primary, .btn-supreme-secondary { width: 100% !important; min-height: 46px !important; justify-content: center !important; box-sizing: border-box !important; }

  /* 4.2 TOUTES LES GRILLES & SECTIONS EN 1 SEULE COLONNE VERTICALE PURE */
  .manifesto-pillars-grid, .bento-features-grid, .twin-sanctuary-grid, .craft-grid-4,
  .dispatches-grid, .legal-cards-grid, .arch-phases-grid, .piliers-grid, .rd-matrix-grid {
    display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important; gap: 14px !important; padding: 0 !important; margin-bottom: 24px !important;
  }
  .manifesto-pillar-card, .bento-card, .sanctuary-col, .craft-card, .dispatch-card,
  .legal-card, .supreme-card, .twin-command-pod, .arch-phase-card, .rd-matrix-card {
    width: 100% !important; min-width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important; display: block !important; margin: 0 !important;
    padding: 14px 16px !important;
  }

  /* 4.3 TUNER 1U : CHÂSSIS DE POCHE ERGONOMIQUE */
  .radio-vm-chassis { padding: 10px 12px !important; border-radius: 8px !important; margin-bottom: 14px !important; }
  .radio-vm-chassis .rack-ear, .radio-matrix-table-wrap .rack-ear,
  .radio-vm-chassis::before, .radio-vm-chassis::after { display: none !important; }
  .radio-master-front-deck { display: flex !important; flex-direction: column !important; gap: 10px !important; }

  /* Écran LCD Ambre pleine largeur */
  .sx-card-lcd.is-vm-lcd.radio-grand-amber-lcd {
    width: 100% !important; box-sizing: border-box !important;
    padding: 10px 12px !important; display: flex !important; flex-direction: column !important; gap: 8px !important;
  }
  .lcd-top-row { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 4px 6px !important; }
  .lcd-bus-tag { font-size: 0.72rem !important; }
  .lcd-top-right-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px 6px !important; }
  .lcd-pilot-pod, .lcd-optmod-pod, .lcd-status-chip, .lcd-quartz-pod { display: inline-flex !important; font-size: 0.65rem !important; }
  .lcd-title-row { margin: 2px 0 !important; width: 100% !important; }
  .lcd-title { font-size: 0.95rem !important; line-height: 1.35 !important; }
  .lcd-rds-row { display: flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; overflow: hidden !important; }
  .lcd-rds-container { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
  .lcd-audio-bay { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; }
  .lcd-wave-ruler-bay { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 3px !important; }
  .lcd-wave-container { width: 100% !important; height: 34px !important; overflow: hidden !important; }
  .radio-wave-canvas { width: 100% !important; height: 100% !important; display: block !important; }
  .lcd-ruler-track { width: 100% !important; box-sizing: border-box !important; }
  .ruler-tick.minor { display: none !important; }
  .lcd-side-telemetry-bay { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; padding-top: 6px !important; border-top: 1px solid rgba(26, 15, 2, 0.25) !important; }
  .lcd-smeter-pod { display: flex !important; width: 100% !important; height: 32px !important; box-sizing: border-box !important; }
  .lcd-time-side-pod { display: flex !important; width: 100% !important; height: 22px !important; justify-content: space-around !important; }
  .time-side-cell { font-size: 0.82rem !important; }
  .lcd-engineering-strip { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 6px !important; padding: 6px 4px 2px 4px !important; border-top: 1px solid rgba(26, 15, 2, 0.25) !important; width: 100% !important; }
  .eng-compartment { display: flex !important; align-items: center !important; gap: 4px !important; }
  .phase-tick-line { width: 55px !important; }
  .eng-zone-sep { display: none !important; }

  /* Pupitre de transport */
  .radio-left-controls-pod { width: 100% !important; order: 2 !important; }
  .radio-vm-ico-box { display: none !important; }
  .studio-transport-deck { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; width: 100% !important; margin: 8px 0 !important; }
  .transport-shuttle-row, .transport-master-row { display: contents !important; }
  .btn-shuttle-alu, .btn-transport-alu.btn-play-alu, .btn-transport-alu.btn-pause-alu { width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 4px 6px !important; border-radius: 4px !important; }
  .transport-power-row { grid-column: 1 / -1 !important; width: 100% !important; margin-top: 4px !important; }
  .btn-transport-alu.btn-power-alu { width: 100% !important; height: 44px !important; min-height: 44px !important; border-radius: 4px !important; }

  /* Molette Jog Wheel centrée */
  .radio-right-deck-pod { width: 100% !important; order: 3 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 14px 0 8px 0 !important; border-top: 1px solid rgba(0, 207, 255, 0.2) !important; }
  .radio-vnic-compact, .radio-vm-lower-deck { display: none !important; }
  .radio-jog-module { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; gap: 10px !important; }
  .jog-housing-large { width: clamp(160px, 54vw, 210px) !important; height: clamp(160px, 54vw, 210px) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .jog-shuttle-svg { width: 100% !important; height: 100% !important; }
  .jog-dial-large { width: clamp(120px, 40vw, 160px) !important; height: clamp(120px, 40vw, 160px) !important; }
  .jog-laser-engraving { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
  .laser-txt { font-size: 0.72rem !important; }
  .laser-sub { font-size: 0.62rem !important; }

  /* 4.4 MATRICE EPG : 100% DÉBRIDÉE SANS SCROLL INTERNE */
  .radio-rack-chassis, .radio-matrix-table-wrap, .radio-table-responsive { contain: none !important; touch-action: pan-y !important; }
  .radio-matrix-table-wrap { padding: 12px 6px !important; border-radius: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }

  #radioMatrixCompartment .hud-header-nodal {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  #radioMatrixCompartment .epg-node-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #radioMatrixCompartment .epg-vnic-compact {
    margin-left: auto !important;
  }

  /* EPG Catégories : Ruban Horizontal fluide sous le pouce (Type Spotify / Podcasts) */
  .epg-category-bar { width: 100% !important; max-width: 100% !important; overflow: hidden !important; margin-bottom: 12px !important; }
  .epg-cat-label { display: none !important; }
  .epg-cat-track {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
    gap: 8px !important; padding: 4px 2px 8px 2px !important; width: 100% !important;
    box-sizing: border-box !important; scrollbar-width: none !important;
  }
  .epg-cat-track::-webkit-scrollbar { display: none !important; }
  .epg-cat-chip {
    flex-shrink: 0 !important; width: auto !important; min-height: 38px !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 6px 14px !important; font-size: 0.78rem !important; font-weight: 700 !important;
    white-space: nowrap !important; border-radius: 20px !important;
  }

  /* Tableau EPG en cartes verticales fluides sous le pouce */
  #radioMatrixCompartment, .radio-matrix-table-wrap, .radio-table-responsive,
  .radio-matrix-table, .radio-matrix-table tbody, .radio-matrix-row, .radio-matrix-row td {
    overflow: visible !important; max-height: none !important; height: auto !important;
    overscroll-behavior: auto !important; touch-action: pan-y !important; contain: none !important;
  }
  .radio-matrix-table { display: block !important; width: 100% !important; min-width: 0 !important; }
  .radio-matrix-table thead { display: none !important; }
  .radio-matrix-table tbody { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; }
  .radio-matrix-row {
    display: flex !important; flex-direction: column !important; width: 100% !important;
    box-sizing: border-box !important; padding: 14px 16px !important; border-radius: 12px !important;
    background: rgba(11, 20, 42, 0.92) !important; border: 1px solid rgba(0, 207, 255, 0.25) !important; gap: 10px !important;
  }
  .radio-matrix-row td { display: block !important; width: 100% !important; padding: 0 !important; border: none !important; }
  .radio-matrix-row td:first-child { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; }
  .radio-matrix-row td:nth-child(2) { display: none !important; }
  .radio-matrix-row .row-ep-title { font-size: 0.96rem !important; line-height: 1.35 !important; margin: 4px 0 !important; }
  .radio-matrix-row .row-ep-desc { font-size: 0.8rem !important; line-height: 1.45 !important; color: #94a3b8 !important; }
  .radio-matrix-row td:last-child { margin-top: 4px !important; }
  .btn-matrix-play { width: 100% !important; min-height: 46px !important; justify-content: center !important; font-size: 0.88rem !important; font-weight: 700 !important; border-radius: 8px !important; }

  /* 4.5 CARTOGRAPHIE DES FLUX EN PLEINE LARGEUR */
  .arch-diagram-card, .arch-graph-wrapper, .arch-phases-summary-box, .arch-flow-stage {
    width: 100% !important; max-width: 100% !important; padding: 12px 10px !important; margin: 0 0 14px 0 !important; box-sizing: border-box !important; border-radius: 12px !important;
  }
  .arch-graph-container { width: 100% !important; height: 260px !important; border-radius: 10px !important; overflow: hidden !important; }
  .arch-topology-canvas { width: 100% !important; height: 260px !important; }
  .arch-graph-filter-bar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; width: 100% !important; margin-bottom: 8px !important; }
  .arch-graph-filter-bar > span { grid-column: 1 / -1 !important; }
  .arch-graph-filter-btn { width: 100% !important; min-height: 40px !important; padding: 6px 8px !important; font-size: 0.74rem !important; }
  .arch-node-inspector { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 12px 14px !important; border-radius: 12px !important; gap: 8px !important; margin-top: 10px !important; }
  .inspector-col-main, .inspector-col-meta { width: 100% !important; min-width: 0 !important; }
  .inspector-title { font-size: 1.12rem !important; font-weight: 800 !important; color: #0f172a !important; word-break: break-word !important; }
  .inspector-desc { font-size: 0.82rem !important; line-height: 1.45 !important; }
  .manifesto-title, h2 { font-size: clamp(1.35rem, 5.2vw, 1.8rem) !important; line-height: 1.3 !important; word-break: break-word !important; }

  /* 4.6 RÈGLE MAÎTRESSE FOOTER SMARTPHONE (SUR LES 3 PAGES) */
  .clt-footer { padding: 22px 10px 16px 10px !important; margin-top: 24px !important; text-align: center !important; }
  .footer-grid-4 { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; width: 100% !important; }
  .footer-grid-4 > div:nth-child(2), .footer-grid-4 > div:nth-child(3) { display: none !important; }
  .footer-grid-4 > div:first-child { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
  .footer-grid-4 > div:first-child p { font-size: 0.80rem !important; line-height: 1.4 !important; max-width: 100% !important; margin: 0 auto !important; }
  .footer-grid-4 > div:last-child { display: flex !important; flex-direction: column !important; align-items: center !important; }
  .lab-orchestrator-seal { margin: 12px auto !important; padding: 10px 12px !important; font-size: 0.74rem !important; text-align: center !important; flex-direction: column !important; gap: 4px !important; width: 100% !important; box-sizing: border-box !important; }
  .footer-bottom-row { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: center !important; text-align: center !important; font-size: 0.74rem !important; margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid rgba(226, 232, 240, 0.6) !important; width: 100% !important; }
  .footer-bottom-row span[aria-hidden="true"] { display: none !important; }
  .btn-footer-legal { font-size: 0.78rem !important; min-height: 38px !important; }
}

/* ── 5. IMMERSION VOCALE CŒUR DE JARVIS (MODALE HOLOGRAPHIQUE SOUVERAINE) ── */
@media (max-width: 768px) {
  .jarvis-holo-modal { padding: 0 !important; }
  .holo-modal-backdrop { background: rgba(4, 9, 22, 0.96) !important; backdrop-filter: blur(20px) !important; }
  .holo-modal-stage { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; border: none !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; }
  .holo-stage-topbar { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }
  .holo-live-tag { font-size: 0.68rem !important; padding: 4px 10px !important; }
  .btn-close-holo { padding: 8px 16px !important; font-size: 0.85rem !important; min-height: 44px !important; background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important; border-radius: 20px !important; }
  .holo-reactor-container { width: 220px !important; height: 220px !important; max-width: 65vw !important; max-height: 35vh !important; margin: auto !important; }
  .holo-speech-box { width: 100% !important; max-height: 34vh !important; padding: 12px 14px !important; border-radius: 14px !important; background: rgba(13, 22, 44, 0.95) !important; border: 1px solid rgba(0, 207, 255, 0.3) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7) !important; }
  .holo-speaker-name { font-size: 0.75rem !important; color: #38bdf8 !important; }
  .holo-speech-text { font-size: 0.88rem !important; line-height: 1.5 !important; max-height: 18vh !important; color: #f1f5f9 !important; }
  .holo-speech-footer { padding-top: 6px !important; font-size: 0.72rem !important; }
}

/* ── 6. MODE PAYSAGE SMARTPHONE (BASCULE HORIZONTALE COMPACTE) ── */
@media (orientation: landscape) and (max-height: 500px) {
  .holo-modal-stage { display: grid !important; grid-template-columns: 190px 1fr !important; grid-template-rows: auto 1fr !important; gap: 10px 16px !important; padding: 8px 14px !important; }
  .holo-stage-topbar { grid-column: 1 / -1 !important; }
  .holo-reactor-container { grid-column: 1 !important; grid-row: 2 !important; width: 140px !important; height: 140px !important; margin: auto !important; }
  .holo-speech-box { grid-column: 2 !important; grid-row: 2 !important; max-height: calc(100vh - 50px) !important; margin: 0 !important; }
  .holo-speech-text { max-height: calc(100vh - 120px) !important; }
  /* Tuner 1U en paysage smartphone */
  .radio-master-front-deck { display: grid !important; grid-template-columns: 1fr 130px !important; gap: 10px !important; align-items: center !important; width: 100% !important; }
  .radio-left-controls-pod { order: 2 !important; width: 100% !important; }
  .sx-card-lcd.is-vm-lcd.radio-grand-amber-lcd { order: 1 !important; width: 100% !important; }
  .radio-right-deck-pod { order: 3 !important; grid-row: 1 / 3 !important; grid-column: 2 !important; border-top: none !important; padding: 0 !important; align-self: center !important; }
  .jog-housing-large { width: 90px !important; height: 90px !important; }
  .jog-dial-large { width: 68px !important; height: 68px !important; }
  .jog-shuttle-svg { width: 90px !important; height: 90px !important; }
  .studio-transport-deck { width: 100% !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .btn-shuttle-alu, .btn-transport-alu.btn-play-alu, .btn-transport-alu.btn-pause-alu { height: 38px !important; min-height: 38px !important; max-height: 38px !important; }
  .btn-transport-alu.btn-power-alu { height: 34px !important; min-height: 34px !important; }
}

/* ── 7. TABLEAUX & CODE LIVRES BLANCS (JARVIS-RD & SOC-RD) ── */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  .rd-hero-section { padding: 85px 0 25px 0 !important; }
  .specs-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 12px !important; margin-bottom: 35px !important; display: block !important; width: 100% !important; max-width: 100% !important; }
  .specs-table { min-width: 480px !important; }
  .specs-table th, .specs-table td { padding: 10px 12px !important; font-size: 0.82rem !important; }
  .arch-code-blueprint, .arch-code-content, pre, code { max-width: 100% !important; box-sizing: border-box !important; }
  pre.arch-code-content { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  pre.arch-code-content code { display: inline-block !important; white-space: pre !important; min-width: 100% !important; }
  .twin-switch-banner { flex-direction: column !important; align-items: stretch !important; padding: 16px !important; gap: 12px !important; }
}
.mobile-orientation-hint { display: none !important; }