/*
=============================================================
  Fichier    : responsive.css
  Projet     : Financial Analyzer
  Description: Media queries — tablette et mobile
  Auteur     : Claude Marcel
  Version    : 1.0
  Date       : 2026-03-20
  Dépend de  : variables.css, main.css, components.css
=============================================================
*/

/* ==================== RESPONSIVE — TABLETTE (≤ 1024px) ==================== */

@media (max-width: 1024px) {

  :root {
    --sidebar-width: 200px;
  }

  .ratios-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .risks-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .macro-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .company-header-right {
    gap: var(--space-3);
  }

  .content-area {
    padding: var(--space-4);
  }
}

/* ==================== RESPONSIVE — TABLETTE PETITE (≤ 768px) ==================== */

@media (max-width: 768px) {

  /* Sidebar masquée, remplacée par menu hamburger */
  .sidebar {
    transform: translateX(-100%);
    z-index: 500;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Overlay quand sidebar ouverte */
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 499;
  }

  .sidebar-overlay.visible {
    display: block;
  }

  .main-content {
    margin-left: 0;
  }

  /* Bouton hamburger visible */
  .topbar-hamburger {
    display: flex;
  }

  /* Recherche topbar compactée */
  .topbar-search {
    max-width: none;
    flex: 1;
  }

  /* Company header vertical */
  .company-header {
    flex-wrap: wrap;
  }

  .company-header-right {
    width: 100%;
    justify-content: flex-start;
  }

  /* Grilles en 1 colonne */
  .ratios-grid {
    grid-template-columns: 1fr;
  }

  .sector-grid {
    grid-template-columns: 1fr;
  }

  .macro-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .risks-grid {
    grid-template-columns: 1fr;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Premium banner vertical */
  .premium-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Landing page */
  .landing-hero-title {
    font-size: var(--text-3xl);
  }

  .landing-features {
    grid-template-columns: 1fr;
  }

  .content-area {
    padding: var(--space-3);
  }
}

/* ==================== RESPONSIVE — MOBILE (≤ 480px) ==================== */

@media (max-width: 480px) {

  /* Topbar simplifiée */
  .topbar {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .topbar-actions .topbar-btn:not(:last-child) {
    display: none;
  }

  /* Score plus petit */
  .score-circle {
    width: 56px;
    height: 56px;
  }

  .score-circle svg {
    width: 56px;
    height: 56px;
  }

  .score-number {
    font-size: 15px;
  }

  /* Company header compact */
  .company-name {
    font-size: var(--text-xl);
  }

  .company-meta {
    gap: var(--space-2);
  }

  /* Macro 1 colonne */
  .macro-grid {
    grid-template-columns: 1fr;
  }

  /* Ratio cards valeur plus petite */
  .ratio-value {
    font-size: var(--text-xl);
  }

  /* Section trigger compact */
  .section-trigger {
    padding: var(--space-3) var(--space-4);
  }

  .section-body {
    padding: var(--space-4);
  }

  /* Landing */
  .search-input-landing {
    height: 50px;
    font-size: var(--text-base);
  }

  .btn-lg {
    height: 44px;
    padding: 0 var(--space-6);
    font-size: var(--text-base);
  }
}

/* ==================== PRINT ==================== */

@media print {
  .sidebar,
  .topbar,
  .premium-banner,
  .btn,
  .nav-item {
    display: none !important;
  }

  .main-content {
    margin-left: 0;
  }

  .section-body {
    display: block !important;
  }

  .card,
  .section-accordion {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  body {
    background: #fff;
    color: #000;
  }
}