/* ============================================================
   cl-mobile.css — mise en page mobile des surfaces library
   2026-10-23 — demande David : bugs en réglant les filtres sur iPhone.

   N'agit que sous 768 px (même seuil que les style.css des surfaces) ; au-dessus,
   rien ne change. Va de pair avec cl-mobile.js, qui ajoute la barre et les
   boutons du tiroir.

   Deux causes corrigées (mesurées en WebKit, émulation iPhone 15) :
   1. Safari iOS zoome sur tout champ dont le texte fait moins de 16 px : les
      filtres faisaient 10,9 px, la page restait zoomée et décalée après saisie.
   2. La sidebar (900 à 1 700 px) passait au-dessus des résultats : régler un
      filtre ne montrait rien. Elle devient un tiroir plein écran, ouvert à la
      demande, avec le nombre de résultats en direct.
   ============================================================ */

@media (max-width: 768px) {
  /* 1. Pas de zoom automatique iOS au focus. */
  body.lib-layout input:not([type="checkbox"]):not([type="radio"]),
  body.lib-layout select,
  body.lib-layout textarea {
    font-size: 16px !important;
  }

  /* 2. Sidebar → tiroir plein écran, fermé par défaut. */
  body.lib-layout.clm-ready .lib-sidebar { display: none; }
  body.lib-layout.clm-open .lib-sidebar {
    display: flex;
    position: fixed; inset: 0; z-index: 1000;
    max-height: none; height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 0 1em calc(6em + env(safe-area-inset-bottom));
    border: none;
    font-size: 1em;
  }
  body.lib-layout.clm-open { overflow: hidden; }

  /* En-tête du tiroir (titre + fermer), collé en haut pendant le défilement. */
  .clm-drawer-head {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 -1em; padding: calc(0.6em + env(safe-area-inset-top)) 1em 0.6em;
    background: var(--surface, var(--bg, #fff));
    border-bottom: 1px solid var(--border-soft, #e8e8e8);
    font-weight: 600;
  }

  /* Barre collante en haut des résultats. */
  .clm-bar {
    position: sticky; top: 0; z-index: 900;
    display: flex; align-items: center; gap: 0.5em;
    margin: -1em -1em 0.8em; padding: calc(0.5em + env(safe-area-inset-top)) 1em 0.5em;
    background: var(--bg, #fff);
    border-bottom: 1px solid var(--border-soft, #e8e8e8);
  }
  .clm-count {
    margin-left: auto;
    font-size: 14px; color: var(--fg-soft, #666);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  .clm-btn {
    display: inline-flex; align-items: center; gap: 0.4em;
    min-height: 44px; padding: 0 0.9em;
    border: 1px solid var(--border, #ccc); border-radius: 8px;
    background: var(--surface, #fff); color: var(--fg, #222);
    font-size: 15px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .clm-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4em; height: 1.4em; padding: 0 0.35em;
    border-radius: 999px; background: var(--accent, #3b6ea5); color: #fff;
    font-size: 12px; font-weight: 700;
  }
  .clm-badge[hidden] { display: none; }

  /* Bouton « Voir les résultats », fixé en bas du tiroir. */
  .clm-apply {
    position: fixed; z-index: 1001;
    left: 1em; right: 1em; bottom: calc(1em + env(safe-area-inset-bottom));
    min-height: 50px;
    border: none; border-radius: 12px;
    background: var(--accent, #3b6ea5); color: #fff;
    font-size: 16px; font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    cursor: pointer;
  }
  body.lib-layout:not(.clm-open) .clm-apply { display: none; }

  /* Page classements : mode focus pendant un duel (sa propre règle masque déjà
     la sidebar) — ni barre ni tiroir tant qu'on est en duel, réglage ou revue. */
  body[data-view="duel"] .clm-bar,
  body[data-view="setup"] .clm-bar,
  body[data-view="review"] .clm-bar { display: none !important; }

  /* Tri sur deux colonnes : en pleine largeur, les ~11 boutons remplissaient tout
     le premier écran du tiroir avant d'atteindre les filtres. */
  .lib-sidebar .sort-buttons { flex-direction: row; flex-wrap: wrap; gap: 0.35em; }
  .lib-sidebar .sort-btn { flex: 1 1 calc(50% - 0.35em); min-width: 0; }

  /* Cibles tactiles confortables dans le tiroir. */
  .lib-sidebar .seg-btn,
  .lib-sidebar .sort-btn,
  .lib-sidebar .view-btn,
  .lib-sidebar .lib-action-btn,
  .lib-sidebar .lib-link-btn,
  .lib-sidebar .lib-reset-btn,
  .lib-sidebar .lib-nav a { min-height: 40px; }
  .lib-sidebar .chip { min-height: 36px; }
  .lib-sidebar .lib-toggle { min-height: 40px; display: flex; align-items: center; gap: 0.5em; }
  .lib-sidebar .lib-toggle input { width: 20px; height: 20px; }
}

@media (min-width: 769px) {
  .clm-bar, .clm-apply, .clm-drawer-head { display: none !important; }
}