/* NutriSaaS — Structure de l'app : colonne clients (sidebar), en-tete
   fiche client, grille principale, barre de navigation basse mobile.
   Chaque bloc garde son etat de base ET ses propres media queries ensemble
   (separer les deux a casse un bug responsive cette session — voir
   ARCHITECTURE.md, section "Pieges connus").
   Extrait de site/index.html le 2026-07-13. */

/* Sidebar Smooth Transition & Premium Wide Layout */
#app-sidebar {
  width: 17rem !important;
  transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
}

/* BUG CRITIQUE (trouve 2026-07-12, signale par Kylian) : cette regle de
   "reduire la colonne" (fonctionnalite desktop) etait inconditionnelle,
   sans media query. Or toggleAppSidebar() bascule TOUJOURS .sidebar-collapsed
   (sur #app-container) EN MEME TEMPS que .mobile-drawer-open (sur
   #app-sidebar) — les deux classes sont ajoutees ensemble au meme clic.
   Entre 769px et 1024px de large en portrait (tiroir mobile plein-ecran,
   voir plus bas), ca entrait en conflit avec les regles du tiroir : cette
   regle-ci a `opacity:0` et `pointer-events:none` SANS AUCUNE regle
   concurrente pour les annuler (le tiroir mobile ne redefinit que
   margin-left), donc le tiroir restait invisible et incliquable meme
   "ouvert" — colonne clients definitivement inaccessible a ce palier.
   Scope desormais cette regle aux seules largeurs ou le tiroir mobile ne
   s'active jamais, pour que les deux fonctionnalites ne se marchent plus
   dessus. */
@media (min-width: 1025px), (min-width: 769px) and (orientation: landscape) {
  .sidebar-collapsed #app-sidebar {
    margin-left: -17rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Aperçu au survol (demande Kylian) : colonne repliee qui reapparait quand la
     souris approche du bord gauche, se referme quand elle s'en eloigne — sans
     changer l'etat "repliee" memorise (le bouton chevron garde son etat, .peek
     est juste une classe temporaire posee/retiree par initSidebarHoverPeek()).
     Reutilise la transition margin-left/opacity deja definie sur #app-sidebar,
     donc aucune nouvelle animation a ecrire. Scope volontairement identique a
     la regle de repli ci-dessus : ne doit jamais s'activer au palier tiroir
     mobile, qui est un mecanisme distinct (.mobile-drawer-open plus bas). */
  .sidebar-collapsed.sidebar-peek #app-sidebar {
    margin-left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    box-shadow: 8px 0 24px rgba(0,0,0,.12);
  }
  .sidebar-collapsed @media (min-width: 769px) and (max-width: 959px) and (orientation: landscape) {
  #app-sidebar { width: 15rem !important; }
  .sidebar-collapsed #app-sidebar { margin-left: -15rem !important; }
}
#sidebar-hotzone { pointer-events: auto; }
}
#sidebar-hotzone {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 14px;
  z-index: 9; /* juste sous #app-sidebar (z-index:10) : la colonne, une fois
                 revelee, reste cliquable meme sur sa premiere tranche de 14px */
  pointer-events: none;
}

#btn-toggle-sb-cv, #btn-toggle-sb-empty {
  display: none !important;
}

.sidebar-collapsed #btn-toggle-sb-cv {
  display: inline-flex !important;
}

.sidebar-collapsed #btn-toggle-sb-empty {
  display: block !important;
}

/* Colonne clients en tiroir superpose sur mobile (au lieu de pousser le contenu).
   Cachee par defaut par le CSS seul (aucune dependance a un JS qui tournerait
   au chargement) ; seule la classe .mobile-drawer-open (posee par le meme
   bouton toggle existant) la fait apparaitre, en overlay par-dessus le contenu.
   BUG CORRIGE (2026-07-12) : le z-index:210 ci-dessous n'avait aucun effet sans
   !important — le style inline z-index:10 sur <aside id="app-sidebar"> gagnait,
   donc le backdrop (z-index:205) passait AU-DESSUS du tiroir et absorbait tous
   les clics destines a son contenu (recherche, liste clients, deconnexion). */
@media (max-width: 768px) {
  #app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    z-index: 210 !important;
    margin-left: -17rem !important;
    box-shadow: 8px 0 24px rgba(0,0,0,0.3);
    /* BUG CRITIQUE (trouve 2026-07-12) : la transition margin-left heritee
       (regle de base #app-sidebar, hors media query) anime aussi bien le
       passage clic-a-clic du tiroir QUE le changement de PALIER lui-meme
       (ex: le redimensionnement fait passer #app-sidebar de la largeur
       desktop 17rem, position statique, a ce mode fixed+100vw — deux
       proprietes qui changent en meme temps de facon discontinue). Dans ce
       cas, le moteur de transition peut rester bloque sur l'ancienne valeur
       indefiniment (repro : ouvrir/rouvrir le tiroir a ce palier ne
       redonnait jamais margin-left:0, colonne clients coincee hors-ecran).
       On coupe la transition a ce palier ou elle n'a de toute facon aucune
       valeur ajoutee (l'utilisateur vient de redimensionner ou de changer
       d'orientation, pas de clic a animer). */
    transition: none !important;
  }
  #app-sidebar.mobile-drawer-open {
    margin-left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* BUG CRITIQUE (2026-07-12) : #btn-toggle-sb-cv / #btn-toggle-sb-empty
     n'etaient visibles que sous .sidebar-collapsed (mode "reduire la colonne"
     desktop), jamais defini automatiquement sur mobile. Resultat : aucun
     bouton pour ouvrir le tiroir clients sur telephone, navigation bloquee
     sur la page en cours. On force leur affichage sous 768px, independamment
     de .sidebar-collapsed — toggleAppSidebar() reste la meme fonction (ouvre
     le tiroir + bascule sidebar-collapsed en effet de bord inoffensif ici,
     ce dernier n'a aucun effet visuel sous 768px). */
  #btn-toggle-sb-cv { display: inline-flex !important; }
  #btn-toggle-sb-empty { display: block !important; }
}

/* Tiroir clients PLEIN ECRAN au palier telephone/tablette-portrait (demande
   Kylian : "que ca prenne toute l'interface... comme si le site se
   transforme en version mobile"). Remplace l'overlay partiel (272px + voile
   grise) par un tiroir opaque qui couvre tout — plus besoin du backdrop a ce
   palier puisqu'il n'y a plus rien a griser derriere. Ferme automatiquement
   apres selection d'un client (voir selClient() en JS) pour reveler la
   fiche client en dessous, comme un vrai enchainement liste -> detail. */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
  #app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100vw !important;
    margin-left: -100vw !important;
    /* Doit rester au-dessus de #cv-bottom-nav (z-index:220, meme palier) sinon
       la barre basse reste visible par-dessus le tiroir "plein ecran". */
    z-index: 230 !important;
    /* Meme raison que le palier precedent : transition coupee pour eviter
       que le moteur de transition reste bloque sur l'ancienne valeur de
       margin-left quand width ET position changent en meme temps. */
    transition: none !important;
  }
  #app-sidebar.mobile-drawer-open {
    margin-left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  #sidebar-backdrop-mobile { display: none !important; }
  /* BUG CRITIQUE (trouve 2026-07-12, signale par Kylian) : ce palier va
     jusqu'a 1024px en portrait, mais le bouton pour rouvrir le tiroir
     (#btn-toggle-sb-cv / #btn-toggle-sb-empty) n'etait force visible que
     sous 768px (voir bloc precedent). Entre 769px et 1024px de large en
     portrait, la colonne clients etait donc cachee SANS AUCUN MOYEN de la
     rouvrir — utilisateur bloque, aucun acces a la liste de patients.
     On force ces boutons ici aussi, avec la meme condition exacte que le
     masquage du tiroir juste au-dessus, pour qu'il n'y ait jamais de palier
     ou le tiroir est ferme sans bouton pour l'ouvrir. */
  #btn-toggle-sb-cv { display: inline-flex !important; }
  #btn-toggle-sb-empty { display: block !important; }
}

/* En-tete fiche client (paliers, onglets, bouton compte rendu) : voir shell.css
   (passe design 2026-10, remplace les anciennes regles @container cv-header). */

/* KPI grid (Besoins & Ration) : la carte "Anthropométrie" a plus de contenu
   que ses 3 voisines (Méta de Base/NAP/DEJ), donc plus haute. Sans
   align-items, le comportement grid par defaut (stretch) etire les 3 autres
   cartes a sa hauteur, laissant un vide visible sous leur contenu. */
#kpi-grid { align-items: start !important; }

/* Item actif de la liste clients : utilisait un vert pale (#dcfce7/#15803d)
   different du vert plein (#16a34a) utilise partout ailleurs pour l'etat
   "actif" (.tnav.on, .dtab.on, .bnav-btn.on) — et etait genere en style
   inline, donc invisible/pas ajustable en mode sombre. Aligne sur le meme
   vert plein que le reste de l'app, via une vraie classe. */
/* Styles des lignes de la liste clients (.sb-item) : shell.css. */

/* Tableaux "Historique des mesures" et "Ration Journaliere" : seule la 1re
   colonne (Date/Aliment) avait un padding declare inline, toutes les autres
   colonnes numeriques etaient collees aux bords de cellule. */
#mesure-table th, #mesure-table td,
#ration-table th, #ration-table td {
  padding: .45rem .5rem;
}
#mesure-table th:first-child, #mesure-table td:first-child,
#ration-table th:first-child, #ration-table td:first-child {
  padding-left: .75rem;
}

/* Barre de navigation basse — palier 3 "telephone". Cachee par defaut ;
   affichee uniquement sous le seuil ci-dessous (telephone, ou tablette en
   portrait — idee de Kylian pour l'iPad). Reprend le vert de la charte
   (#16a34a, deja utilise par .tnav.on) mais en forme icone-au-dessus-du-label,
   plus lisible en barre basse qu'un pill horizontal. */
#cv-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 220;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
  gap: .25rem;
}
/* Boutons de la barre basse (.bnav-btn) : shell.css. */

@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
  #cv-hd-tabs { display: none !important; }
  #cv-bottom-nav { display: flex !important; }
  /* padding-bottom deplace plus bas dans le fichier (voir pres de "Premium Compact
     Layout") : pose ici, elle etait ecrasee par #cv-scroll-area{padding:0.75rem 1.5rem
     !important} plus loin dans CE MEME fichier — meme selecteur, meme !important, mais
     plus tard dans l'ordre du fichier = elle gagnait, y compris sur mobile. Kylian a
     signale du texte et des boutons realellement caches derriere la barre basse (capture
     d'ecran : "Proteines recommandees" coupe, un bouton de raccourci invisible). */
  /* La bulle IA (bottom:1.5rem) se posait par-dessus l'icone "Menus" de la
     nouvelle barre basse (regression du jour, meme onglet que la bulle) —
     remontee au-dessus de la barre. */
  #ai-menus-bubble { bottom: calc(4.25rem + 1rem + env(safe-area-inset-bottom, 0px)) !important; }
}

#sidebar-backdrop-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 205;
}

/* Column Stacking for standard layout */
#t-infos-col-left, #t-infos-col-right,
#t-tanita-col-left, #t-tanita-col-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* AI Floating Panel Open Shift Logic */
#main-area {
  transition: padding-right 0.35s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#i-conclusion {
  min-height: 18rem; /* Spacious default height for comfortable writing in single-column mode */
}

@media (min-width: 768px) {
  .ai-panel-open #cv-scroll-area {
    padding-right: 27rem !important;
  }
  #cv-scroll-area {
    transition: padding-right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
}

/* Mises en page 2 colonnes (Infos, Seance, Tableau de bord) : uniquement dans shell.css,
   par container query sur la zone de contenu. Elle tient compte toute seule de la colonne
   patients (ouverte ou repliee) et du panneau IA (ouvert ou ferme) : plus de regles par
   largeur d ecran ici (elles se contredisaient et faisaient sauter la page). */

/* Premium Compact Layout for Professional Dietician Usage
   NOTE: .acc-body and .acc-header values here override the base declarations
   at ~L596-625 — this is intentional for compact spacing. */
.acc-card {
  margin-bottom: 0.65rem !important;
}
/* Marges de #cv-scroll-area (dont la reserve sous la barre basse mobile) : shell.css. */
.acc-body > div[style*="margin-bottom:1.5rem"],
.acc-body > div[style*="margin-bottom: 1.5rem"] {
  margin-bottom: 0.75rem !important;
  gap: 0.65rem !important;
}

.wide-layout #t-nutri {
  max-width: 100% !important;
}

/* Masque la scrollbar de la zone d'onglets du header (etait un <style>
   inline au milieu du HTML dans #cv-hd-tabs, deplace ici). */
.hd div::-webkit-scrollbar { display: none; }