/* Téléphone (≤ 600 px) : tout ce qui change par rapport à l'écran large, au même endroit (chargé en dernier).
   Principes (comme Carnet Vert) : rien ne flotte par-dessus le contenu, l'action principale reste sous le pouce,
   les cibles font au moins ~40 px de haut, les onglets prennent toute la largeur, les fenêtres montent du bas. */
@media (max-width: 600px) {
  /* ───────── En-tête ───────── */
  /* Interrupteur clair / sombre : en haut à droite de l'en-tête (il défile avec la page), plus en bas de l'écran */
  .theme-btn { position: absolute; top: calc(max(24px, env(safe-area-inset-top, 0px)) + 22px); right: max(16px, env(safe-area-inset-right, 0px)); width: 40px; height: 40px; box-shadow: none }
  .theme-btn svg { width: 20px; height: 20px }
  :root[data-roue="accueil"] .theme-btn { top: max(24px, env(safe-area-inset-top, 0px)) }
  .accueil-bar { padding-right: 50px }   /* le bouton du compte se range à gauche de l'interrupteur */
  .site-link { min-height: 40px; padding-right: 8px }
  .top-buttons .ghost.small { min-height: 40px; padding: 6px 14px }
  .weather { min-height: 0 }

  /* ───────── Onglets Tirage / Carnet / Badges / Réglages : toute la largeur, à parts égales ───────── */
  .tabs button { flex: 1 1 0; padding-inline: 4px; min-height: 44px }

  /* ───────── Tirage ───────── */
  .chips { gap: 6px }
  .chip { padding: 7px 12px; min-height: 40px }
  .seg { display: flex; width: 100% }
  .seg button { flex: 1 1 auto; min-height: 40px; padding-inline: 8px }
  /* Curseurs de distance : pastille large pour le doigt */
  .km input[type="range"] { -webkit-appearance: none; appearance: none; height: 34px; background: transparent }
  .km input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line) }
  .km input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper); box-shadow: 0 1px 4px var(--shadow) }
  .km input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line) }
  .km input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent) }
  .km input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--paper) }
  /* « Lancer la roue » reste en bas de l'écran pendant qu'on règle les filtres (sous le pouce) */
  #ticket { scroll-margin-top: 12px }   /* après « Lancer la roue », la page descend jusqu'au ticket (tirage.js) */
  .go { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 6px 18px var(--shadow) }

  /* ───────── Fenêtres : elles montent du bas, sur toute la largeur ───────── */
  dialog.sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px) }
  dialog.sheet[open] { animation: sheet-up .28s cubic-bezier(.3, .7, .2, 1) }
  .sheet-head { position: relative; padding-top: 24px }
  .sheet-head::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line) }
  .sheet-head .ghost.small { min-height: 40px; min-width: 40px; justify-content: center }

  /* ───────── Boutons et liens : cibles assez grandes pour le doigt ───────── */
  .ghost.small { min-height: 38px }
  .link { padding: 8px 2px }
  .code-chip { min-height: 34px; padding: 4px 10px }
  .members .acts .ghost.small { min-height: 38px }
}
@keyframes sheet-up { from { transform: translateY(100%) } }
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none } }