/**
 * Feed Access SAS — Desktop Overrides
 * Styles responsive >= 768px (Story 1.4, 3.2, 3.3) + desktop >= 1024px (Story 5.1)
 * Charge via media query dans le <link>.
 */

@media (min-width: 768px) {

  /* === Tableaux : spacing desktop === */
  table td,
  table th {
    padding: 8px 12px;
  }

  /* === Colonnes numeriques alignees a droite (scope fa-table-data) === */
  .fa-table-data td:nth-child(n+2) {
    text-align: right;
  }

  .fa-hero { padding: 48px 32px; }
  .fa-hero-title { font-size: 1.75rem; }
  .fa-stats-grid { gap: 48px; }
  .fa-stat-number { font-size: 2rem; }
  .fa-company-section { padding: 24px 32px; }
  .fa-legal-content { padding: 0 16px 24px; }

  /* === Pricing / Upgrade (Story 3.2) === */
  .fa-pricing-grid {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  .fa-pricing-card {
    flex: 1;
    max-width: 400px;
  }
  .fa-pricing-section { padding: 0 32px; }
  .fa-comparison-table th,
  .fa-comparison-table td {
    padding: 12px 16px;
  }

  /* === Compteur Free / Usage Meter (Story 3.3) === */
  .fa-usage-meter {
    max-width: 960px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--fa-border-radius) var(--fa-border-radius) 0 0;
  }

  /* === Sticky headers tableaux fa-* (Story 5.2, Task 1) === */
  .fa-formulation-table thead th,
  .fa-comparison-table thead th,
  .fa-invoice-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }
  /* bg-color: comparison table garde son fond fonce (review C1) */
  .fa-formulation-table thead th,
  .fa-invoice-table thead th {
    background-color: var(--fa-color-surface);
  }

  /* Fix JQM overflow pour permettre sticky headers (Story 5.2, Task 1.3) */
  div[data-role='content'] { overflow: visible; }


}

/* === Story 5.1 : Desktop Layout >= 1024px === */
@media (min-width: 1024px) {

  /* === Task 1 : Layout conteneur global === */
  .fa-page-corporate,
  .fa-page-upgrade {
    max-width: 1200px;
  }

  div[data-role='content'] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 32px;
  }

  /* === Task 2 : Cards pricing 3 colonnes === */
  .fa-pricing-grid {
    gap: 24px;
  }

  .fa-pricing-card {
    flex: 0 1 320px;
    max-width: 350px;
    padding: 32px;
  }

  /* === Task 3 : Page entreprise 2 colonnes === */
  .fa-company-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Titres et paragraphes pleine largeur — grid 2 colonnes uniquement si 2 blocs enfants distincts */
  .fa-company-section > .fa-section-title,
  .fa-company-section > p {
    grid-column: 1 / -1;
  }

  .fa-stats-grid {
    gap: 64px;
  }

  .fa-hero {
    padding: 64px 48px;
  }

  .fa-hero-title {
    font-size: 2rem;
  }

  .fa-legal-footer {
    justify-content: flex-start;
    gap: 24px;
  }

  /* === Task 4 : Formulaires elargis === */
  .fa-onboarding-wizard {
    max-width: 700px;
  }

  .fa-onboarding-step {
    padding: 40px 32px;
  }

  .fa-species-selector .fa-select,
  .fa-country-selector .fa-select {
    max-width: 500px;
  }

  .fa-onboarding-actions {
    margin-top: 32px;
  }

  /* === Task 5 : Tableaux formulation elargis === */
  .fa-formulation-table {
    max-width: 100%;
  }

  .fa-formulation-table td,
  .fa-formulation-table th {
    padding: 10px 16px;
  }

  .fa-formulation-table input {
    max-width: 160px;
  }

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

  /* === Task 6 : Historique formulations en grille === */
  .fa-history-page {
    max-width: 900px;
  }

  .fa-history-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .fa-history-actions {
    flex-direction: row;
  }

  /* === Task 7 : Delta economique spacieux === */
  .fa-delta-eco {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.25rem 2rem;
    gap: 16px;
  }

  /* === Task 8 : Compteur free desktop === */
  .fa-usage-meter {
    max-width: 1200px;
  }

  /* === Task 9 : Modale profil desktop === */
  .fa-profile-modal-container {
    max-width: 520px;
  }

  .fa-profile-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .fa-profile-modal-actions {
    grid-column: 1 / -1;
  }

  /* === Colonnes secondaires desktop (Story 5.2, Task 3, AC #2) === */
  .fa-col-secondary { display: table-cell; }

  /* === Alignement numerique formulation (Story 5.2, Task 2) === */
  .fa-formulation-table td {
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
  }
  .fa-formulation-table td:nth-child(n+2) {
    text-align: right;
  }

  /* === Wrapper responsive desktop (Story 5.2, Task 5) === */
  .fa-table-wrapper { overflow-x: visible; }

  /* === Invoice table desktop padding (Story 5.2, Task 4) === */
  .fa-invoice-table td,
  .fa-invoice-table th {
    padding: 10px 16px;
  }

  /* === Alignement numerique invoice (Story 5.2, Task 2) === */
  .fa-invoice-table td:nth-child(2),
  .fa-invoice-table td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* === Navigation horizontale desktop (Story 5.3) === */
  .fa-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
  }
  .fa-nav-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .fa-nav-desktop .fa-nav-link {
    padding: 8px 16px;
    border-radius: var(--fa-border-radius);
    transition: background-color 0.2s;
  }
  .fa-nav-desktop .fa-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }

  /* Masquer le h1 JQM quand nav desktop presente */
  div[data-role='header'] .fa-header-inner ~ h1 {
    display: none;
  }
  /* Si h1 est DANS fa-header-inner, le garder comme titre a gauche */
  .fa-header-inner h1 {
    position: static; /* Override JQM absolute positioning (Story 5.3 review) */
    font-size: 1rem;
    margin: 0;
    flex-shrink: 0;
  }

  /* Override JQM header styles pour layout flex (Story 5.3) */
  div[data-role='header'] {
    overflow: visible !important; /* JQM force overflow hidden */
  }

  /* === Paywall CTA desktop (Story 3.3 AC#3) === */
  .fa-paywall-cta {
    max-width: 600px;
    margin: 24px auto;
    padding: 32px;
  }

}