/* ================================================================== */
/* Risque #1.B — DESKTOP layout fix (overlap z-index Yann broken)     */
/* ================================================================== */
/* Diagnostic via Chrome inspection :
 *   - header.fixed top-0 z-index 50 (Vendara header, 61px)
 *   - div.active fixed top:0 z-index 55 width:full height:103 (alertes + score 94)
 *     → ECRASE le header (50 < 55)
 *   - aside left:0 top:64px z-index auto (sidebar piliers)
 *     → CACHE par bloc score qui descend a 103px
 *   - body padding-top: 107px (insuffisant pour les 103px du bloc score + header)
 * Fix : forcer hiérarchie z-index propre + reserver padding-top body suffisant.
 */

/* Vendara header TOUJOURS au-dessus */
header.fixed.top-0,
header[class*="fixed"][class*="top-0"] {
  z-index: 100 !important;
}

/* Bloc "Récemment ajouté" + score VENDARA 94 doit etre SOUS le header,
   pas en top:0. Hauteur ~103px. */
div.active[class=""],
div.active:not([class*="bg-"]):not([class*="text-"]) {
  top: 64px !important;
  z-index: 45 !important;
  background-color: rgba(20, 20, 20, 0.92) !important;
  border-bottom: 1px solid #2a2a2a !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Sidebar gauche commence SOUS la zone fixed du haut */
aside.fixed,
aside[class*="lg:block"][class*="fixed"] {
  top: 170px !important;
  z-index: 30 !important;
}

/* Body padding-top suffisant pour eviter chevauchement avec contenu page */
body {
  padding-top: 170px !important;
}

/* Score-value 94 ne doit pas chevaucher le titre "Dossier" */
.score-value,
[class*="score-value"] {
  position: relative !important;
  z-index: 50 !important;
}

/* Maya tooltip "t'a écrit 3 messages" position fix */
.chat-fab,
button[class*="chat-fab"] {
  z-index: 80 !important;
}

/* ================================================================== */
/* Risque #1 — Override mobile global pour TOUTES pages /p/[slug]/*   */
/* ================================================================== */
/*
 * Injecté via page.tsx loadStaticHtml AVANT le HTML statique de Yann.
 * Force le HTML desktop-only à s'adapter au mobile.
 *
 * Stratégie : mobile-first AGRESSIVE (overrides desktop styles existants).
 * Activé uniquement < 768px (tablettes/phones).
 *
 * Couvre :
 *   - Containers qui débordent à droite (overflow-x hidden + max-width 100%)
 *   - Texte trop petit (font-size mini 14px sur mobile)
 *   - Boutons trop petits (min tap target 44x44 Apple HIG)
 *   - Grid/flex multi-colonnes → stack en colonne mobile
 *   - Images débordant → max-width 100%
 *   - Padding/margin trop large pour 380px viewport
 *   - Tableaux qui dépassent → scroll horizontal contrôlé
 */

@media (max-width: 768px) {
  /* === Reset global anti-débordement === */
  *,
  *::before,
  *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important; /* base mobile sane */
    -webkit-text-size-adjust: 100% !important;
    -webkit-tap-highlight-color: rgba(217, 168, 87, 0.2) !important;
  }

  /* === Containers principaux === */
  main,
  .container,
  .wrapper,
  .content,
  section,
  article,
  header,
  footer,
  nav,
  div[class*="container"],
  div[class*="wrapper"],
  div[class*="section"] {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* === Typographie mobile === */
  h1 { font-size: 24px !important; line-height: 1.25 !important; margin: 16px 0 12px !important; }
  h2 { font-size: 20px !important; line-height: 1.3 !important; margin: 14px 0 10px !important; }
  h3 { font-size: 17px !important; line-height: 1.35 !important; margin: 12px 0 8px !important; }
  h4, h5, h6 { font-size: 15px !important; line-height: 1.4 !important; margin: 10px 0 6px !important; }
  p, li, span, div, td, th {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  small, .small, .footnote {
    font-size: 13px !important;
  }

  /* === Grid / Flex multi-colonnes → stack mobile === */
  .grid,
  .row,
  div[class*="grid-"],
  div[class*="columns"],
  div[style*="grid-template-columns"],
  div[style*="display: grid"],
  div[style*="display:grid"] {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .flex,
  div[class*="flex"]:not([class*="flex-col"]) {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .col,
  div[class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 12px !important;
  }

  /* === Tap targets boutons === */
  button,
  a.button,
  a.btn,
  .btn,
  [role="button"],
  input[type="button"],
  input[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }

  /* === Images responsive === */
  img,
  picture,
  video,
  svg,
  iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* === Tableaux : scroll horizontal contrôlé === */
  table {
    display: block !important;
    overflow-x: auto !important;
    width: 100% !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* === Inputs / forms === */
  input,
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* anti-zoom iOS */
    padding: 10px 12px !important;
    box-sizing: border-box !important;
  }
  textarea {
    min-height: 88px !important;
    resize: vertical !important;
  }

  /* === Codes & blocs pré-formatés === */
  pre,
  code,
  .code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-size: 13px !important;
  }

  /* === Fixed / absolute positioning override === */
  /* Si Yann a mis position:fixed sur des éléments, ça peut casser mobile.
   * On force statique sauf pour les vrais headers/banners + composants React Vendara legit. */
  *[style*="position: fixed"]:not(header):not(nav):not(#vendara-yann-detection):not([data-vendara-fixed]),
  *[style*="position:fixed"]:not(header):not(nav):not(#vendara-yann-detection):not([data-vendara-fixed]) {
    position: static !important;
  }

  /* === Padding/margin abusifs override === */
  div[style*="padding: 48px"],
  div[style*="padding:48px"],
  div[style*="padding: 64px"],
  div[style*="padding:64px"] {
    padding: 16px !important;
  }
  div[style*="margin: 48px"],
  div[style*="margin:48px"] {
    margin: 16px 0 !important;
  }

  /* === Maya chat bubble - ne pas couvrir tout l'écran === */
  #maya-chat-bubble,
  .maya-chat,
  [class*="maya-bubble"] {
    bottom: 16px !important;
    right: 16px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  /* === Modals plein écran sur mobile === */
  .modal,
  [role="dialog"],
  div[class*="modal-overlay"] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    padding: 16px !important;
  }
  .modal-content,
  div[class*="modal-content"] {
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 auto !important;
  }

  /* === Score pills / badges visibles === */
  .score-pill,
  .badge,
  [class*="score-"],
  [class*="badge-"] {
    display: inline-block !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* === Sticky banner en haut (style Vendara) === */
  .vendara-banner,
  div[class*="vendara-top"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
}

/* ================================================================== */
/* TRES PETIT MOBILE (iPhone SE, < 380px) — encore plus compact       */
/* ================================================================== */
@media (max-width: 380px) {
  h1 { font-size: 21px !important; }
  h2 { font-size: 18px !important; }
  body,
  p, li, span, div, td {
    font-size: 14px !important;
  }
  main,
  .container,
  section,
  div[class*="container"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  button,
  .btn {
    padding: 10px 16px !important;
    font-size: 15px !important;
  }
}