/* ═══════════════════════════════════════════════════════
   calendrier-mobile.css — Commerce Éthique
   Palier MOBILE : ≤ 640px, puis un resserrement supplémentaire
   ≤ 380px pour les téléphones étroits (iPhone SE et gabarits
   proches). Chargé en dernier : il a le dernier mot sur la
   cascade et peut surcharger calendrier.css ET
   calendrier-tablet.css.

   Principes de cette passe responsive :
   - la vue "mois pêle-mêle" cède la place à une grille dense de
     vignettes carrées (le format portrait 4/5 gaspille trop
     d'espace vertical sur un petit écran) ;
   - la modale d'événement devient un panneau plein écran ancré
     en bas (pattern "sheet" familier sur mobile) plutôt qu'une
     carte centrée avec des marges mortes ;
   - toutes les cibles tactiles passent à 44px minimum (repère
     Apple HIG / WCAG 2.5.5) ;
   - les zones sûres (encoche, barre de gestes) sont respectées
     partout où une surface touche un bord d'écran ;
   - le texte tronqué en une ligne repasse en plusieurs lignes
     quand la largeur ne suffit plus à rendre l'ellipse utile.
   ═══════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* ── Topbar : compacte, navigation minimale ── */
  .topbar { margin: 6px 6px 0; padding: 0 8px; gap: 4px; height: 46px; }
  .topbar-brand .logo-text { display: none; }
  .topbar-stat { display: none; }
  .period-lbl { font-size: 13px; margin-left: 2px; }
  .nav-arr { width: 34px; height: 34px; }
  .nav-today { padding: 0 9px; font-size: 11px; height: 30px; }
  .nav-today span:not(.nav-today-ico) { display: none; } /* garde l'icône, masque le libellé "Aujourd'hui" */

  .topbar-views { padding: 2px; gap: 2px; }
  .tvtab { height: 30px; padding: 0 9px; font-size: 11px; }

  /* ── Sélecteur de date + recherche : sur la même ligne que la
     nav, comme sur desktop (voir calendrier.css) — c'est cette
     fusion en une seule barre qui règle le retour à la ligne
     indésirable, et libère le plus de hauteur possible pour les
     cartes en dessous. */
  .fb-datepick { flex-shrink: 0; }
  .fb-date-btn { height: 34px; padding: 0 10px; font-size: 11px; }
  .fb-date-btn span { display: none; } /* icône + chevron seuls : le libellé complet apparaît dans le panneau ouvert */
  .fb-search { flex: 1 1 100px; min-width: 70px; max-width: none; }
  .sb-input-wrap { flex: 1; min-width: 0; }
  .sb-input { width: 100%; height: 34px; font-size: 14px; } /* 14px+ évite le zoom auto iOS au focus */
  .sb-submit { width: 34px; height: 34px; flex-shrink: 0; }

  .mini-cal-panel { left: 50%; transform: translateX(-50%) translateY(-6px) scale(.98); width: min(300px, calc(100vw - 24px)); }
  .mini-cal-panel.is-open { transform: translateX(-50%) translateY(0) scale(1); }
  .mini-d { min-height: 34px; }

  /* ── Vue mois : grille dense de vignettes carrées ── */
  .month-pele {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 8px 24px;
  }
  .pm-card { width: auto; aspect-ratio: 1 / 1; transform: none; }
  .pm-card:hover, .pm-card:focus-visible { transform: scale(1.04); }
  .pm-cap-title { font-size: 10.5px; -webkit-line-clamp: 2; white-space: normal; }
  .pm-cap-lieu { display: none; } /* trop à l'étroit sur une vignette carrée */
  .pm-cap-top { font-size: 8px; }
  .pm-date-tag { font-size: 8px; padding: 2px 5px; }
  .pm-date-tag b { font-size: 11px; }
  .pm-cat-flag { width: 22px; height: 22px; font-size: 11px; }

  /* ── Vue semaine : on assume le défilement horizontal mais on
     l'annonce visuellement (ombre de bord) et on réduit la colonne
     d'heures pour laisser plus de place aux jours ── */
  .week-grid { grid-template-columns: 38px repeat(7, minmax(84px, 1fr)); min-width: 640px; }
  .week-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .wg-day-head { scroll-snap-align: start; }

  /* ── Vue jour : header et cartes resserrés, image réduite ── */
  .day-view-header { padding: 6px 4px 12px; flex-wrap: wrap; gap: 6px; }
  .day-date-label { font-size: 18px; }
  .time-row { grid-template-columns: 40px 1fr; }
  .dev-img, .dev-placeholder { width: 56px; height: 56px; }
  .dev-title { white-space: normal; }
  .dev-desc { -webkit-line-clamp: 2; }

  /* ── Cartes agenda mobile ── */
  .mc-card { padding: 10px; gap: 8px; }
  .mc-title { white-space: normal; }
  .mc-thumb, .mc-thumb-img { width: 40px; height: 40px; }

  /* ── Footer : autorise le retour à la ligne plutôt que de couper ── */
  .cal-footer-bar {
    height: auto;
    min-height: 40px;
    flex-wrap: wrap;
    padding: 8px 12px;
    margin: 0 8px calc(8px + var(--safe-b));
  }

  /* ══════════════════════════════════════════════════
     MODALE ÉVÉNEMENT → feuille plein écran ancrée en bas
     (pattern "bottom sheet"), plus naturelle au pouce que
     la carte centrée du desktop.
  ══════════════════════════════════════════════════ */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    width: 100%;
    max-height: calc(100dvh - 24px - var(--safe-t));
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: var(--safe-b);
    transform: translateY(100%);
  }
  .modal-overlay.is-open .modal-box { transform: translateY(0); }
  .modal-hero { height: 42vh; min-height: 160px; max-height: 260px; }
  .modal-close-x, .modal-fav-btn { top: calc(12px + var(--safe-t)); }
  .modal-close-x { width: var(--tap-min); height: var(--tap-min); }
  .modal-fav-btn { width: var(--tap-min); height: var(--tap-min); }

  .modal-meta { grid-template-columns: 1fr 1fr; }
  .modal-actions { gap: 8px; }
  .mbtn, .mbtn-primary { height: var(--tap-min); flex: 1 1 auto; justify-content: center; }
  .mbtn-primary { margin-left: 0; order: -1; flex-basis: 100%; } /* action principale en premier, pleine largeur */

  /* ── Modale agenda : feuille centrée mais pleine largeur ── */
  .agenda-box { max-width: 100%; margin: 0 8px; }
  .agenda-choice { min-height: var(--tap-min); }

  /* ── Toast : ne colle jamais aux bords, respecte l'encoche basse ── */
  .toast { left: 12px; right: 12px; transform: none; width: auto; justify-content: center; }
  .toast.is-out { transform: translateY(10px); }
}

/* ── Téléphones étroits (≤ 380px) : un resserrement de plus ──
   3 colonnes de vignettes deviennent illisibles sous ~360px de
   large ; on repasse à 2 colonnes plutôt que de laisser le texte
   se comprimer jusqu'à l'illisible. */
@media (max-width: 380px) {
  .month-pele { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pm-cap-title { font-size: 12px; }

  .topbar { gap: 4px; padding: 0 8px; }
  .period-lbl { display: none; } /* les flèches + "Aujourd'hui" suffisent à ce gabarit */
  .topbar-views { display: none; } /* rejoint le comportement desktop existant : vue courante pilotée ailleurs */

  .sb-input { font-size: 14px; }
  .day-date-label { font-size: 16px; }
  .modal-hero { min-height: 140px; }
}

/* ══════════════════════════════════════════════════════
   MOBILE EN PAYSAGE — la ressource rare devient la hauteur,
   pas la largeur. On resserre la topbar au strict minimum
   pour rendre le maximum de hauteur aux cartes, et on
   profite de la largeur disponible pour remettre plus de
   colonnes dans la vue mois plutôt que de faire défiler.
══════════════════════════════════════════════════════ */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .topbar { height: 38px; margin: 4px 6px 0; padding: 0 8px; }
  .nav-arr { width: 28px; height: 28px; }
  .nav-today { height: 26px; padding: 0 8px; }
  .tvtab { height: 26px; }
  .period-lbl { font-size: 12px; }

  /* Une seule ligne compacte : nav + date + recherche côte à côte,
     jamais de retour à la ligne — la hauteur ne le permet pas. */
  .period-lbl { display: none; }
  .fb-datepick, .fb-search { flex-shrink: 1; }
  .fb-date-btn, .sb-input-wrap, .sb-submit { height: 28px; }

  /* Vue mois : la largeur paysage permet plus de colonnes, donc
     moins de lignes à faire défiler pour voir autant d'événements. */
  .month-pele { grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 6px 16px; }

  /* Modale : la feuille plein écran ancrée en bas perdrait toute sa
     hauteur utile ici — on revient à une carte centrée, scrollable. */
  .modal-overlay { align-items: center; padding: 10px; }
  .modal-box {
    border-radius: var(--r-lg);
    max-height: calc(100dvh - 20px);
    transform: scale(.96) translateY(8px);
  }
  .modal-overlay.is-open .modal-box { transform: scale(1) translateY(0); }
  .modal-hero { height: 88px; min-height: 0; }
  .modal-meta { grid-template-columns: 1fr 1fr 1fr; }
}