/* ═══════════════════════════════════════════════════════════════════════════
   genco-responsive.css — Système Responsive GencoAide
   Mobile-first, optimisé pour iPhone SE (375px), iPad (768px), Desktop (1025px+)
   À inclure APRÈS genco-design.css dans toutes les pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PETIT MOBILE (320-374px) — iPhone SE, Galaxy S8
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 374px) {
  /* Navigation ultra-compacte */
  nav {
    padding: 10px 8px !important;
    gap: 8px !important;
  }
  
  nav .logo {
    font-size: 1rem !important;
  }
  
  nav .logo img {
    height: 24px !important;
    width: 24px !important;
  }
  
  .btn-nav-accueil {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
  }
  
  /* Layout page */
  .page,
  .ga-page,
  .container {
    margin: 12px auto 0 !important;
    padding: 0 12px 30px !important;
  }
  
  /* Typographie */
  h1,
  .page h1 {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }
  
  .sous-titre {
    font-size: 0.85rem !important;
  }
  
  body {
    font-size: 0.9rem !important;
  }
  
  /* Grilles → 1 colonne partout */
  .solde-banniere,
  .formules-grille,
  .grille-items,
  .dash-4-grille,
  .acces-rapide-grille,
  .grille-raccourcis,
  .synthese-grid,
  .grille-2,
  .cats-grid,
  .pro-liste {
    grid-template-columns: 1fr !important;
  }
  
  /* Cartes et blocs compacts */
  .ga-bloc,
  .carte-statut,
  .carte-paiement,
  .solde-card,
  .section-raccourcis {
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
  }
  
  /* Boutons pleine largeur */
  .btn-principal,
  .btn-secondaire,
  .pro-btn-ajouter {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE STANDARD (375-767px) — iPhone 12/13, Samsung Galaxy
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Navigation responsive */
  nav {
    padding: 12px 12px !important;
    gap: 12px !important;
    flex-wrap: wrap;
  }
  
  nav .logo {
    font-size: 1.1rem !important;
  }
  
  nav .logo img {
    height: 28px !important;
    width: 28px !important;
  }
  
  .btn-nav-accueil {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }
  
  /* Layout page */
  .page,
  .ga-page,
  .container {
    margin: 16px auto 0 !important;
    padding: 0 16px 40px !important;
  }
  
  /* Typographie */
  h1,
  .page h1,
  #titre-dossier {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
  
  h2 {
    font-size: 1.3rem !important;
  }
  
  .sous-titre {
    font-size: 0.9rem !important;
    margin-bottom: 20px !important;
  }
  
  body {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  /* Cartes et blocs */
  .ga-bloc,
  .carte-statut,
  .carte-paiement,
  .solde-card,
  .section-raccourcis,
  .dash-gros-btn,
  .fichier-row,
  .pro-card {
    padding: 16px 18px !important;
    margin-bottom: 12px !important;
  }
  
  /* Grilles responsive */
  .solde-banniere,
  .formules-grille,
  .grille-items,
  .synthese-grid,
  .grille-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .dash-4-grille {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .acces-rapide-grille,
  .grille-raccourcis {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
  
  .cats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .pro-liste {
    grid-template-columns: 1fr !important;
  }
  
  /* Boutons pleine largeur */
  .btn-principal,
  .btn-secondaire,
  .btn-danger {
    width: 100% !important;
    padding: 14px 18px !important;
  }
  
  .btns-actions {
    flex-direction: column !important;
  }
  
  /* Formulaires */
  .m-grille-2 {
    grid-template-columns: 1fr !important;
  }
  
  .m-champ input,
  .m-champ select {
    font-size: 16px !important; /* Évite zoom iOS */
  }
  
  /* Tables */
  table {
    font-size: 0.85rem !important;
  }
  
  th, td {
    padding: 8px 6px !important;
  }
  
  /* Footer */
  .ga-footer-links {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  
  .ga-footer-sep {
    display: none;
  }
  
  /* Modales */
  .modal-content {
    margin: 20px 12px !important;
    max-width: calc(100% - 24px) !important;
  }
  
  /* Fil d'Ariane */
  #fil-ariane {
    font-size: 0.8rem !important;
    padding: 10px 14px !important;
  }
  
  /* Recherche et filtres */
  .pro-entete,
  .mois-bar {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .pro-search-input {
    width: 100% !important;
  }
  
  /* Cartes dashboard */
  .dash-section-titre {
    font-size: 1rem !important;
  }
  
  /* Raccourcis */
  .raccourci-btn {
    width: 120px !important;
    min-height: 110px !important;
    padding: 12px 8px !important;
    font-size: 0.85rem !important;
  }
  
  .raccourci-btn img {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Statut cards abonnement */
  .statut-grille {
    grid-template-columns: 1fr !important;
  }
  
  /* Pro interface */
  .pro-actions-rapides {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Zones tactiles minimum 44px */
  .btn-x,
  .fichier-btn-del,
  .modal-close,
  button[type="button"]:not(.btn-principal):not(.btn-secondaire) {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLETTE (768-1024px) — iPad, tablettes Android
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1024px) {
  /* Navigation tablette */
  nav {
    padding: 14px 24px !important;
    gap: 20px !important;
  }
  
  nav .logo {
    font-size: 1.2rem !important;
  }
  
  nav .logo img {
    height: 34px !important;
    width: 34px !important;
  }
  
  /* Layout page */
  .page,
  .ga-page,
  .container {
    margin: 24px auto 0 !important;
    padding: 0 24px 60px !important;
  }
  
  /* Typographie */
  h1,
  .page h1 {
    font-size: 1.75rem !important;
  }
  
  /* Grilles optimisées tablette */
  .solde-banniere {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .formules-grille,
  .grille-items,
  .dash-4-grille {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .acces-rapide-grille,
  .grille-raccourcis {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  
  .cats-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .pro-liste {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Cartes */
  .ga-bloc,
  .carte-statut {
    padding: 20px 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CLASSES UTILITAIRES RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* Masquer sur mobile */
.hidden-mobile {
  display: block;
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

/* Visible uniquement mobile */
.visible-mobile {
  display: none;
}

@media (max-width: 767px) {
  .visible-mobile {
    display: block !important;
  }
}

/* Visible uniquement tablette */
.visible-tablet {
  display: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .visible-tablet {
    display: block !important;
  }
}

/* Stack vertical sur mobile */
.stack-mobile {
  display: flex;
}

@media (max-width: 767px) {
  .stack-mobile {
    flex-direction: column !important;
  }
}

/* Texte centré sur mobile */
.center-mobile {
  text-align: left;
}

@media (max-width: 767px) {
  .center-mobile {
    text-align: center !important;
  }
}

/* Pleine largeur sur mobile */
.full-width-mobile {
  width: auto;
}

@media (max-width: 767px) {
  .full-width-mobile {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CORRECTIONS SPÉCIFIQUES PAR PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* Page index.html - Homepage */
@media (max-width: 767px) {
  .hero-accueil {
    padding: 40px 20px !important;
  }
  
  .hero-accueil h1 {
    font-size: 1.8rem !important;
  }
  
  .hero-accueil p {
    font-size: 1rem !important;
  }
}

/* Page budget.html - Soldes */
@media (max-width: 767px) {
  .solde-card .sc-montant {
    font-size: 1.6rem !important;
  }
  
  .mois-bar {
    padding: 12px 14px !important;
  }
}

/* Page bibliotheque_liens.html - Raccourcis */
@media (max-width: 767px) {
  .section-raccourcis h2 {
    font-size: 1rem !important;
  }
}

/* Page mes_documents.html - Fichiers */
@media (max-width: 767px) {
  .fichier-nom {
    font-size: 0.85rem !important;
  }
  
  .fichier-taille {
    display: none; /* Masquer taille sur petit écran */
  }
}

/* Page abonnement.html - Formules */
@media (max-width: 767px) {
  .formule-prix {
    font-size: 1.6rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CORRECTIONS OVERFLOW & PERFORMANCE
   ══════════════════════════════════════════════════════════════════════════ */

/* Prévention overflow horizontal */
@media (max-width: 767px) {
  body {
    overflow-x: hidden !important;
  }
  
  * {
    max-width: 100%;
  }
  
  /* Tables responsives */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px; /* Compense padding page */
    padding: 0 16px;
  }
  
  /* Images responsives */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Texte long */
  .fichier-nom,
  .pro-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ORIENTATION PAYSAGE MOBILE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) and (orientation: landscape) {
  nav {
    padding: 8px 16px !important;
  }
  
  .page,
  .ga-page {
    margin: 12px auto 0 !important;
  }
  
  h1,
  .page h1 {
    font-size: 1.35rem !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media print {
  nav,
  .btn-nav-accueil,
  .ga-footer,
  .btn-principal,
  .btn-secondaire,
  .btn-danger {
    display: none !important;
  }
  
  .page,
  .ga-page {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  * {
    color: #000 !important;
    background: #fff !important;
  }
}