/**
 * LAYOUT GRID v1 — Ma Bulle Féminine
 * Correctif final mise en page : CSS Grid 3 colonnes
 * Remplace les multiples patches conflictuels (V14–V17)
 * CHARGER EN DERNIER pour écraser tous les conflits !important
 *
 * Structure HTML :
 *   .app-main
 *     ├── .left-card   #leftCard    → colonne 1
 *     ├── .content-card #contentCard → colonne 2 (centre)
 *     └── .drawer.right-card #drawer → colonne 3
 */

/* ═══════════════════════════════════════════════
   1. MOBILE — colonne unique (< 700px)
   ═══════════════════════════════════════════════ */
@media (max-width: 699px) {
  .app-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Tiroir : slide mobile conservé */
  .drawer, #drawer {
    position: fixed !important;
    right: 0; top: 0; bottom: 0;
    width: 290px; max-width: 86%;
    transform: translateX(110%) !important;
    transition: transform .28s cubic-bezier(.22,1,.36,1);
    z-index: 200 !important;
  }
  .drawer.open, #drawer.open {
    transform: translateX(0) !important;
  }

  /* Nav fixe en bas */
  .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    z-index: 90 !important;
    margin: 0 !important;
  }
  .app { padding-bottom: 130px !important; }
}


/* ═══════════════════════════════════════════════
   2. TABLETTE — 2 colonnes (700px–859px)
   ═══════════════════════════════════════════════ */
@media (min-width: 700px) and (max-width: 859px) {
  .app-main {
    display: grid !important;
    grid-template-columns: 260px 1fr !important;
    grid-template-areas:
      "left  center"
      "left  drawer" !important;
    align-items: start !important;
    gap: 14px !important;
    flex-direction: unset !important;
  }

  .left-card, #leftCard {
    grid-area: left !important;
    position: sticky !important;
    top: 14px !important;
    align-self: start !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: auto !important;
    flex: unset !important;
  }

  .content-card, #contentCard {
    grid-area: center !important;
    width: auto !important;
    flex: unset !important;
    min-width: 0 !important;
  }

  /* Tiroir : dans le flux en tablette */
  .drawer, #drawer, .right-card {
    grid-area: drawer !important;
    position: static !important;
    transform: none !important;
    z-index: auto !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: var(--radius-lg, 22px) !important;
  }

  .drawer-backdrop { display: none !important; }
  .drawer-close    { display: none !important; }

  /* Nav bas : fixe */
  .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    z-index: 90 !important;
    margin: 0 !important;
  }
  .app { padding-bottom: 100px !important; }
}


/* ═══════════════════════════════════════════════
   3. DESKTOP — 3 colonnes (≥ 860px)
   ═══════════════════════════════════════════════ */
@media (min-width: 860px) {

  /* ─── Grid principal ─── */
  .app-main {
    display: grid !important;
    grid-template-columns: 310px 1fr 300px !important;
    grid-template-areas: "left center right" !important;
    align-items: start !important;
    gap: 18px !important;
    /* Annuler les flex héritées */
    flex-direction: unset !important;
    flex-wrap: unset !important;
  }

  /* ─── Colonne 1 : Gauche ─── */
  .left-card, #leftCard {
    grid-area: left !important;
    width: auto !important;
    flex: unset !important;
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
    max-height: calc(100vh - 32px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ─── Colonne 2 : Centre ─── */
  .content-card, #contentCard {
    grid-area: center !important;
    flex: unset !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* ─── Colonne 3 : Droite (tiroir) ─── */
  .drawer, #drawer, .right-card {
    grid-area: right !important;
    /* Annuler toutes les propriétés mobile */
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
    transform: none !important;
    z-index: auto !important;
    width: auto !important;
    max-width: none !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    /* Hauteur + scroll interne */
    max-height: calc(100vh - 32px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: var(--radius-lg, 22px) !important;
  }

  /* Corps scrollable du tiroir */
  .drawer .drawer-body,
  #drawer .drawer-body,
  .right-card .drawer-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
  }

  /* Masquer backdrop + bouton fermeture (inutiles sur desktop) */
  .drawer-backdrop { display: none !important; }
  .drawer-close    { display: none !important; }

  /* ─── Nav bas : fixe mais hors flux ─── */
  .bottom-nav {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    z-index: 90 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: 400px !important;
  }

  /* Espace sous le contenu pour ne pas masquer avec la nav fixe */
  .app {
    padding-bottom: 80px !important;
    padding-top: 20px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    max-width: 1400px !important;
  }

  /* ─── Si sport-section injecté comme 5e item direct ─── */
  .app-main > #sportSection,
  .app-main > .sport-section {
    grid-column: 2 !important; /* Place dans la colonne centre */
    min-width: 0 !important;
  }

  /* ─── Scrollbar fins dans les colonnes ─── */
  .left-card::-webkit-scrollbar,
  #drawer::-webkit-scrollbar,
  .right-card::-webkit-scrollbar { width: 4px; }
  .left-card::-webkit-scrollbar-thumb,
  #drawer::-webkit-scrollbar-thumb,
  .right-card::-webkit-scrollbar-thumb {
    background: rgba(255,107,156,.2);
    border-radius: 4px;
  }
  .left-card::-webkit-scrollbar-track,
  #drawer::-webkit-scrollbar-track,
  .right-card::-webkit-scrollbar-track { background: transparent; }

  /* ─── Footer dans le tiroir droit ─── */
  .right-card .site-footer,
  #drawer .site-footer {
    flex: 0 0 auto !important;
    position: static !important;
    margin-top: auto !important;
  }
}


/* ═══════════════════════════════════════════════
   4a. LAPTOP 13" — petite résolution (860–1100px)
   → Colonnes latérales plus étroites pour libérer le centre
   ═══════════════════════════════════════════════ */
@media (min-width: 860px) and (max-width: 1099px) {
  .app-main {
    grid-template-columns: 250px 1fr 240px !important;
    gap: 12px !important;
  }
  .app {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }
  /* Réduire le padding interne des cartes sur petits laptops */
  .card {
    padding: 14px 14px 16px !important;
  }
  /* Réduire les titres pour gagner de la place */
  .content-title {
    font-size: 16px !important;
  }
  .summary-title {
    font-size: 13px !important;
  }
}


/* ═══════════════════════════════════════════════
   4b. LAPTOP 14-15" (1100–1280px)
   ═══════════════════════════════════════════════ */
@media (min-width: 1100px) and (max-width: 1280px) {
  .app-main {
    grid-template-columns: 270px 1fr 260px !important;
    gap: 14px !important;
  }
  .app {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
}


/* ═══════════════════════════════════════════════
   4c. GRAND LAPTOP / MONITEUR HD (1280–1440px)
   ═══════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1440px) {
  .app-main {
    grid-template-columns: 290px 1fr 280px !important;
    gap: 16px !important;
  }
  .app {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 1380px !important;
  }
}


/* ═══════════════════════════════════════════════
   5. GRAND ÉCRAN / TV (≥ 1440px)
   ═══════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .app-main {
    grid-template-columns: 320px 1fr 300px !important;
    gap: 20px !important;
  }
  .app {
    max-width: 1600px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (min-width: 1920px) {
  .app-main {
    grid-template-columns: 360px 1fr 340px !important;
    gap: 24px !important;
  }
  .app { max-width: 1800px !important; }
}


/* ═══════════════════════════════════════════════
   4d. CORRECTIF "Je ne vois pas tout" sur laptop
   Assure que les conseils personnalisés sont visibles
   ═══════════════════════════════════════════════ */
@media (min-width: 860px) and (max-width: 1280px) {
  /* La colonne gauche ne dépasse pas la hauteur de l'écran */
  .left-card, #leftCard {
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }

  /* Grille de chips dans la colonne gauche : 2 colonnes pour compacter */
  .quick-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .quick-buttons .chip {
    font-size: 11px !important;
    padding: 8px 6px !important;
    justify-content: center !important;
  }

  /* Réduire les marges des blocs résumé */
  .summary-block {
    margin-top: 10px !important;
    padding: 12px !important;
  }

  /* Le mini-calendrier peut être compact */
  .mini-calendar {
    font-size: 11px !important;
  }

  /* Section sport dans le centre : vidéos sur 2 colonnes */
  #contentCard .sport-videos {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Header du site plus compact */
  .app-header {
    padding: 10px 16px 12px !important;
  }
}


/* ═══════════════════════════════════════════════
   6. CORRECTIFS VISUELS GÉNÉRAUX
   ═══════════════════════════════════════════════ */

/* Empêcher le texte de déborder des cartes */
.content-card, #contentCard,
.left-card, #leftCard {
  min-width: 0;
  word-break: break-word;
}

/* Sport section dans le content-card : prend toute la largeur */
#contentCard #sportSection,
#contentCard .sport-section {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 16px !important;
}

/* Empêcher les orbes du body de déborder horizontalement */
html, body {
  overflow-x: hidden !important;
}

/* Assure que .app prend bien tout l'espace en colonne */
.app {
  box-sizing: border-box !important;
}