/* NutriSaaS — Correctifs responsive transversaux : regles qui ciblent de
   nombreux elements a la fois (grilles inline, filet de securite mobile)
   plutot qu'un composant unique. Les media queries propres a UN composant
   restent avec lui dans layout.css/components.css.
   Extrait de site/index.html le 2026-07-13. */

/* FILET DE SECURITE MOBILE — de nombreux blocs de formulaire ont des grilles
   figees en style inline (grid-template-columns:1fr 1fr, etc.) qui ignorent
   les classes/media queries. Un !important externe est le seul moyen de
   gagner face a un style inline qui n'en a pas : on force une colonne.
   Seuil aligne sur celui du tiroir sidebar (768px) pour couvrir aussi les
   phablettes/tablettes portrait, pas seulement les petits telephones. */
/* Seuil abaisse a 640 px (passe design 2026-10) : en tablette 641-768 px, les grilles a
   2 colonnes restent en 2 colonnes (moins de defilement). */
@media (max-width: 640px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Complement au filet ci-dessus : une fois une grille reduite a 1 colonne,
     son gap d'origine (souvent pense pour separer des COLONNES, ex. .75rem)
     reste techniquement applique entre les lignes empilees, mais souvent
     trop faible et peu visible en mode sombre (bordures #e2e8f0 pensees
     pour fond clair) — d'ou l'effet "tout est colle" en usage reel malgre
     un gap non nul. On force un espacement genereux et constant entre
     TOUTES les cartes empilees, quel que soit leur conteneur d'origine. */
  .card { margin-bottom: 1rem !important; }
  .card:last-child { margin-bottom: 0 !important; }
  [style*="display:grid"] > .card, [style*="display: grid"] > .card { margin-bottom: 0 !important; }
  [style*="grid-template-columns"] { row-gap: 1rem !important; }
}

/* CORRECTIFS MOBILE — audit du 2026-07-12 (boutons qui se chevauchent,
   Suivi Seance/Besoins & Ration/Parametres trop tasses). CSS uniquement,
   aucune logique JS touchee.
   IMPORTANT : quasiment tout ce fichier utilise des style="..." inline sur
   les elements. Un style inline gagne TOUJOURS face a une regle externe,
   meme un #id, sauf si la regle externe porte !important (meme principe
   que le "FILET DE SECURITE MOBILE" juste au-dessus). Premiere version de
   ces correctifs sans !important partout => silencieusement ignoree en
   pratique (ecran capture par Kylian, tout restait colle). Donc TOUT est
   en !important ici, meme quand ca semble redondant.
   Voir AIOS/JOURNAL/sessions/2026-07-12-*.md et la competence
   AIOS/skills/web/responsive-audit.md pour la methode. */
@media (max-width: 640px) {
  /* 1. En-tete fiche client sur telephone : voir shell.css (passe design 2026-10). */

  /* 2. Filtres du graphique (Suivi Séance) : scroll horizontal plutôt que
     débordement hors de la carte. */
  #chart-filters { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #chart-filters::-webkit-scrollbar { display: none; }

  /* 3. Assistant IA flottant : largeur fixe 24rem (384px) dépasse tout
     écran de téléphone. Passe en pleine largeur avec marges.
     (Regle de base #ai-floating-panel plus bas dans le fichier, meme
     specificite #id — sans !important elle gagnerait quand meme car
     posterieure dans le fichier.) */
  #ai-floating-panel { left: .75rem !important; right: .75rem !important; width: auto !important; top: 5rem !important; }

  /* 4. Bloc AETQ (Besoins & Ration) : empile au lieu de tasser le chiffre
     et le champ manuel côte à côte. */
  #aetq-row { flex-wrap: wrap !important; gap: .75rem !important; }
  #aetq-row > div:last-child { padding-left: 0 !important; border-left: none !important; flex-basis: 100% !important; }
  #n-aetq-m { width: 100% !important; max-width: none !important; }

  /* 5. Tableau Ration Journalière : overflow:hidden (inline) empêchait tout
     scroll, forçant les 7 colonnes à se tasser. Scroll horizontal + largeur
     mini (overflow-x/-y sont des longhands : ils n'écrasent PAS le
     "overflow:hidden" inline sans !important, meme si ca semble logique). */
  #ration-card { overflow-x: auto !important; overflow-y: hidden !important; }
  #ration-card table { min-width: 480px !important; }

  /* 6. Paramètres : les paires input + bouton ("Ouvrir", "Tester") passent
     chacune sur 2 lignes au lieu d'écraser l'input. */
  .stg-row { flex-wrap: wrap !important; }
  .stg-row input { flex: 1 1 100% !important; }
  .stg-row button { flex: 1 1 100% !important; }
}

/* =========================================
   FIXES GLOBAUX RESPONSIVE & DARK MODE 
   ========================================= */

/* 1. Correction des grilles inline sur Tablettes & Mobiles */
/* Fenetres (hors fiche patient). Dans la fiche, voir shell.css (container queries). */
@media (max-width: 1024px) {
    /* Les grilles de 4 colonnes passent à 2 sur tablette */
    [style*="grid-template-columns: repeat(4"]:not(#cv-scroll-area *),
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"]:not(#cv-scroll-area *),
    [style*="grid-template-columns:1fr 1fr 1fr 1fr"]:not(#cv-scroll-area *) {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Les grilles de 3 colonnes passent à 2 sur tablette */
    [style*="grid-template-columns: 1fr 1fr 1fr"]:not(#cv-scroll-area *),
    [style*="grid-template-columns:1fr 1fr 1fr"]:not(#cv-scroll-area *),
    [style*="grid-template-columns: repeat(3"]:not(#cv-scroll-area *) {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    /* Tout passe à 1 colonne sur mobile */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        row-gap: 0.75rem !important;
    }
    .card { margin-bottom: 0.75rem !important; }
    .card:last-child { margin-bottom: 0 !important; }
}

/* Questionnaire Wizard Mobile & Desktop Fixes */
#m-questionnaire .mbox {
  padding: 1.25rem !important;
}
#q-steps-indicator {
  display: flex !important;
  gap: 0.5rem !important;
  overflow-x: auto !important;
  margin-bottom: 1.25rem !important;
  padding: 4px 2px !important;
  scrollbar-width: none !important;
  flex-shrink: 0 !important;
  min-height: 44px !important;
  align-items: center !important;
}
#q-steps-indicator::-webkit-scrollbar {
  display: none !important;
}
.q-step-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.45rem 0.85rem !important;
  height: 34px !important;
  border-radius: 9999px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: 1px solid #cbd5e1 !important;
  background: #f8fafc !important;
  color: #475569 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}
.q-step-btn:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}
.q-step-btn.done {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
  color: #15803d !important;
}
.q-step-btn.active {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}
.dark .q-step-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}
.dark .q-step-btn.done {
  background: #064e3b !important;
  border-color: #059669 !important;
  color: #6ee7b7 !important;
}
/* Etape en cours : meme vert plein qu en clair (avant : transparent, invisible en sombre). */
.dark .q-step-btn.active {
  background: #15803d !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
}

@media (max-width: 640px) {
  #m-questionnaire .mbox {
    width: 98% !important;
    max-height: 96vh !important;
    padding: 0.85rem !important;
  }
  .q-card {
    padding: 0.75rem !important;
  }
  .q-step-btn {
    padding: 0.35rem 0.65rem !important;
    height: 30px !important;
    font-size: 0.72rem !important;
  }
}

/* Mobile 390 px (remise en etat 2026-10) :
   - bandeaux "Tableau de bord" / "Questionnaire" : les boutons passent sous le texte et
     retournent a la ligne au lieu de deborder de la carte;
   - en-tete fiche : nom sur 2 lignes au lieu d'etre coupe, indicateur d'enregistrement et
     bouton PDF alignes sur leur propre ligne (gauche / droite). */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
  .dark-banner { flex-direction: column !important; align-items: stretch !important; gap: 0.85rem !important; }
  .dark-banner > div:last-child { flex-wrap: wrap !important; }
  .dark-banner > button, .dark-banner > div:last-child > button { flex: 1 1 100% !important; justify-content: center !important; text-align: center !important; max-width: 100% !important; }
  .dark-banner > div:first-child { min-width: 0 !important; }
  .dark-banner > div:first-child > div:last-child { min-width: 0 !important; flex: 1 1 0 !important; }
  .dark-banner strong { overflow-wrap: anywhere !important; }

}