/* Prixee · Télécommande — adaptation Galaxy Z Fold (fermé ↔ ouvert, rotation).
   Mise en page uniquement : AUCUNE couleur, ombre ou police n'est modifiée.
   À charger après la feuille principale. Repose sur le viewport réel (vw/dvh, media queries),
   aucune dimension d'appareil n'est codée en dur.
   Paliers : < 600px (fermé / téléphone) · ≥ 600px (tabs en haut) · ≥ 720px (2 colonnes, Fold ouvert)
             · ≥ 1200px (large) · hauteur < 520px (paysage serré). */

:root {
  --fold-tap: 48px;
  /* Fold: unify existing controls with the delivered touch target. */
  --tap: var(--fold-tap);
  --fold-tap-lg: 56px;
  --fold-pad: clamp(12px, 2.4vw, 28px);
  --fold-gap: clamp(12px, 1.8vw, 20px);
  --fold-pad-l: max(var(--fold-pad), env(safe-area-inset-left));
  --fold-pad-r: max(var(--fold-pad), env(safe-area-inset-right));
  --fold-nav-h: 64px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Fold: do not hide overflowing content; constrain it at its source. */
html, body { max-width: 100%; }
.shell__body { min-height: 100dvh; display: flex; flex-direction: column; max-width: 100%; }
img, svg, video { max-width: 100%; }

/* ---------- Cibles tactiles ---------- */
.btn, .menu__item, .rnav__link, .topbar__menu, .avatar-btn,
.rc-home-action, .rc-launch__btn, .rc-tile__alt, .rc-home-clients,
.rc-slides__more, .rc-home-screens__help, .rc-loy__q, .rc-loy__target,
.lcp-product__minus, .lcp-product__plus, .rc-loy__credit-minus, .rc-loy__credit-plus,
.rc-loy__send-btn, .rc-key {
  min-height: var(--fold-tap);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.topbar__menu, .avatar-btn, .btn--icon,
.lcp-product__minus, .lcp-product__plus, .rc-loy__credit-minus, .rc-loy__credit-plus {
  min-width: var(--fold-tap);
  display: inline-grid; place-items: center;
}
.btn--link, .rc-home-screens__help { display: inline-flex; align-items: center; gap: 6px; padding-inline: 12px; }
.lcp-product__quantity { min-height: var(--fold-tap); width: 4.5ch; min-width: 56px; font-size: max(16px, 1rem); text-align: center; }
.rc-loy__send-btn, .rc-trk__foot .btn--lg { min-height: var(--fold-tap-lg); width: 100%; }

/* ---------- Barre supérieure ---------- */
/* Barre d'app collante (topbar + établissement). Sa hauteur réelle est publiée dans --fold-appbar-h
   par ce petit script, à ajouter une fois dans l'app :
   new ResizeObserver(([e]) => document.documentElement.style.setProperty('--fold-appbar-h', e.borderBoxSize[0].blockSize + 'px')).observe(document.querySelector('.appbar'));
*/
.appbar { position: sticky; top: 0; z-index: var(--z-topbar); }
.topbar { padding-top: env(safe-area-inset-top); }
.topbar__inner {
  display: flex; align-items: center; gap: 8px; min-height: 64px;
  padding-inline: var(--fold-pad-l) var(--fold-pad-r); min-width: 0;
}
.topbar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.topbar__actions { margin-inline-start: auto; }
.topbar__live { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: var(--fold-tap); }
.establishment-bar { padding: 8px var(--fold-pad-r) 8px var(--fold-pad-l); }
.establishment-bar__name { overflow-wrap: anywhere; }

/* ---------- Page ---------- */
.page { flex: 1; min-width: 0; padding: var(--fold-pad) var(--fold-pad-r) var(--fold-pad) var(--fold-pad-l); }
.rc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fold-gap); align-items: start; }
.rc-col { display: grid; gap: var(--fold-gap); min-width: 0; align-content: start; }
.rc-home-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.rc-home-actions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.rc-home-launch { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.rc-launch__btn { min-height: 88px; width: 100%; text-align: start; }
.rc-home-action { width: 100%; min-height: 76px; text-align: start; }
.rc-home-action__text, .rc-launch__text, .rc-slides__row-text, .lcp-product__text { min-width: 0; overflow-wrap: anywhere; }

.rc-home-pair { display: grid; gap: var(--fold-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.rc-home-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--fold-tap); }
.rc-slides__row { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.rc-slides__row-text { flex: 1; }

/* Fidélité */
.lcp-product { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; flex-wrap: wrap; }
.lcp-product__stepper { display: flex; align-items: center; gap: 6px; flex: none; }
.rc-loy__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rc-loy__credit { display: flex; align-items: center; gap: 8px; }
.rc-loy__targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; border: 0; padding: 0; margin: 0; }
.rc-loy__target { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 8px 12px; text-align: center; }
.rc-loy__quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rc-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-key { min-height: clamp(52px, 8dvh, 72px); }
.rc-trk__qr { width: min(220px, 60vw); height: auto; aspect-ratio: 1; }

/* Menus : jamais plus larges que l'écran */
.menu__popup { max-width: calc(100vw - 2 * var(--fold-pad)); max-height: calc(100dvh - 96px); overflow-y: auto; }

/* ---------- < 600px : écran fermé / téléphone → onglets en bas ---------- */
@media (max-width: 599.98px) {
  .topbar__brand { display: none; }
  .topbar__tabs {
    position: fixed; inset: auto 0 0 0; z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
    background: inherit; /* hérite de la topbar : pas de nouvelle couleur */
  }
  .rnav__list { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; }
  .rnav__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: var(--fold-nav-h); }
  .page { padding-bottom: calc(var(--fold-nav-h) + env(safe-area-inset-bottom) + var(--fold-pad)); }
}
@media (max-width: 419.98px) {
  .topbar__live-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rc-home-launch { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- ≥ 600px : onglets dans la barre ---------- */
@media (min-width: 600px) {
  .rnav__list { display: flex; gap: 4px; margin: 0; padding: 0; }
  .rnav__link { display: inline-flex; align-items: center; gap: 8px; padding-inline: 14px; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .topbar__title { display: none; }
}

/* ---------- ≥ 720px : Fold ouvert (portrait ou paysage) → accueil en 2 colonnes à défilement indépendant ---------- */
@media (min-width: 720px) {
  .shell__body:has(.rc--home) { height: 100dvh; overflow: hidden; }
  .page:has(.rc--home) { min-height: 0; overflow: hidden; display: flex; padding-block: 0; }
  .rc--home { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); align-items: stretch; }
  .rc--home .rc-col {
    /* Fold: the legacy side column was hidden below 1100px. */
    display: grid; position: static; align-self: stretch;
    min-height: 0; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain;
    padding-block: var(--fold-pad) calc(var(--fold-pad) + env(safe-area-inset-bottom));
    scrollbar-gutter: stable;
  }
}

/* ---------- ≥ 1200px : large ---------- */
@media (min-width: 1200px) {
  .rc--home { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ---------- Paysage serré (téléphone fermé tourné, fenêtre réduite) ---------- */
@media (max-height: 519.98px) and (orientation: landscape) {
  .topbar__inner { min-height: 52px; }
  .establishment-bar { padding-block: 4px; }
  .rc-launch__btn { min-height: 64px; }
  .rc-home-action { min-height: 60px; }
}

/* ---------- Écran à deux segments (charnière exposée) : colonnes calées sur les segments ---------- */
@media (horizontal-viewport-segments: 2) {
  .rc--home {
    grid-template-columns: calc(env(viewport-segment-width 0 0) - var(--fold-pad)) minmax(0, 1fr);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + var(--fold-gap));
  }
}

/* =====================================================================
   Gestion des écrans (.rc-screens)
   1 colonne (fermé) · 2 colonnes (Fold ouvert) · 3 colonnes (≥ 1100px) — calculé par la grille, pas par l'appareil.
   ===================================================================== */
.crumbs { padding: 4px var(--fold-pad-r) 0 var(--fold-pad-l); }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; padding: 0; list-style: none; }
.crumbs__item { display: flex; align-items: center; gap: 4px; min-width: 0; }
.crumbs__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--fold-tap); padding-inline: 6px; }
.crumbs__current { min-width: 0; overflow-wrap: anywhere; }

.rc-screens { gap: var(--fold-gap); }
.rc-screens__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: var(--fold-tap); }
.rc-screens__add { min-height: var(--fold-tap); display: inline-flex; align-items: center; gap: 8px; padding-inline: 18px; }

.rc-screens-list {
  display: grid; gap: var(--fold-gap); align-items: stretch;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.rc-screen {
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: clamp(14px, 2vw, 20px);
}
.rc-screen__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rc-screen__tv { display: grid; place-items: center; width: 48px; height: 48px; flex: none; }
.rc-screen__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-screen__name { display: inline-flex; align-items: center; min-height: 32px; overflow-wrap: anywhere; }
.rc-screen__loc { overflow-wrap: anywhere; }
.rc-screen__status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rc-screen__lines { display: flex; flex-direction: column; gap: 8px; }
.rc-screen__line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.rc-screen__line-icon { flex: none; margin-top: 1px; }
.rc-screen__open { margin-top: auto; min-height: var(--fold-tap-lg); width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rc-screen__cmds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rc-screen__cmd { min-height: var(--fold-tap-lg); display: flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 8px; min-width: 0; white-space: normal; text-align: center; }

/* Carte étroite : statut sous le nom, commandes icône au-dessus du libellé */
@container (max-width: 360px) {
  .rc-screen__head { grid-template-columns: auto minmax(0, 1fr); }
  .rc-screen__status { grid-column: 2; }
  .rc-screen__cmd { flex-direction: column; gap: 4px; min-height: 64px; font-size: 0.875rem; }
}
@media (max-width: 599.98px) {
  .rc-screens__add { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   Fiche écran (.scr-detail) — page « Ouvrir »
   Fermé : une colonne, sélecteur de section. Ouvert (≥ 720px) : héros sur 2 colonnes,
   onglets collants, cartes de section côte à côte quand la largeur le permet.
   ===================================================================== */
.scr-detail { display: grid; gap: calc(var(--fold-gap) * 1.5); max-width: 1280px; margin-inline: auto; min-width: 0; }
.scr-detail .input, .scr-detail select, .scr-detail input[type="text"] { min-height: var(--fold-tap); font-size: max(16px, 1rem); max-width: 100%; }
.scr-detail .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.scr-detail .btn--sm { min-height: var(--fold-tap); }
.scr-detail .btn--icon { width: var(--fold-tap); height: var(--fold-tap); padding: 0; }
.scr-detail .truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-detail .grow { flex: 1 1 auto; min-width: 0; }

/* Héros */
.scr-hero { display: grid; gap: 16px; min-width: 0; }
.scr-hero__name { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.scr-hero__title { overflow-wrap: anywhere; }
.scr-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.scr-hero__line { display: flex; align-items: flex-start; gap: 8px; }
.scr-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.scr-callout > .btn { grid-column: 1 / -1; width: 100%; min-height: var(--fold-tap-lg); }
.scr-hero__actions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.scr-hero__actions .btn { width: 100%; min-height: var(--fold-tap); }

/* Navigation de la fiche */
.scr-tabs { position: sticky; top: var(--fold-appbar-h, 0px); z-index: 10; padding-block: 8px; }
.scr-tabs__mobile { display: grid; gap: 4px; }
.scr-tabs__mobile select { width: 100%; }
.scr-tabs__links { display: none; }
.scr-tabs__link { display: inline-flex; align-items: center; min-height: var(--fold-tap); padding-inline: 16px; white-space: nowrap; scroll-snap-align: start; }
@media (min-width: 600px) {
  .scr-tabs__mobile { display: none; }
  .scr-tabs__links { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
  .scr-tabs__links::-webkit-scrollbar { display: none; }
}
.scr-section { scroll-margin-top: calc(var(--fold-appbar-h, 0px) + 72px); display: grid; gap: var(--fold-gap); min-width: 0; }
.scr-section__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Plages horaires / périodes de jeux : ligne réordonnable */
.scr-scheds, .gcal-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.scr-sched, .gcal-item { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 64px; }
.scr-sched__handle, .gcal-item__handle { flex: none; width: 40px; min-height: var(--fold-tap); display: grid; place-items: center; touch-action: none; }
.scr-sched__prio, .gcal-item__prio { flex: none; min-width: 28px; text-align: center; }
.scr-sched__main, .gcal-item__main { flex: 1 1 auto; min-width: 0; min-height: var(--fold-tap); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; }
.gcal-item__content { flex: 1 1 auto; min-width: 0; }
.gcal-item__main { flex-direction: row; align-items: center; gap: 10px; width: 100%; }
.gcal-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gcal-item__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scr-sched__title { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.scr-sched__move, .gcal-item__move { flex: none; display: flex; gap: 2px; }
@media (max-width: 419.98px) {
  .scr-sched__handle, .gcal-item__handle { display: none; } /* les flèches restent disponibles */
  .scr-sched__name { display: none; }
}

/* Semaine en un coup d'œil */
.scr-disclosure__summary { display: flex; align-items: center; gap: 12px; min-height: var(--fold-tap-lg); cursor: pointer; list-style: none; }
.scr-disclosure__summary::-webkit-details-marker { display: none; }
.scr-week { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
.scr-week__label { text-align: center; overflow-wrap: anywhere; }
.scr-week__today { grid-column: 1 / -1; justify-self: center; }
@media (min-width: 600px) { .scr-week { grid-template-columns: auto minmax(0, 1fr) auto auto; } .scr-week__today { grid-column: auto; } }
.scr-tl-wrap, .scr-tl { min-width: 0; }
.scr-tl__ruler, .scr-tl__row { display: grid; grid-template-columns: clamp(52px, 9vw, 72px) minmax(0, 1fr); align-items: center; gap: 8px; }
.scr-tl__rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.scr-tl__track { height: clamp(24px, 3.2dvh, 32px); }
.scr-tl__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }

/* Jeux */
.gcal-main { display: grid; gap: var(--fold-gap); min-width: 0; }
.gcal-now__body { display: flex; align-items: center; gap: 14px; min-width: 0; }
.gcal-now__text { min-width: 0; overflow-wrap: anywhere; }
.gcal-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
.gcal-choice { display: flex; align-items: center; gap: 8px; min-height: var(--fold-tap); padding: 8px 12px; text-align: start; }
.gcal-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.gcal-periods__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gcal-link-row .btn { min-height: var(--fold-tap); }

/* Réglages */
.scr-volume__row { display: flex; align-items: center; gap: 12px; }
.scr-volume__range { flex: 1; min-width: 0; height: var(--fold-tap); }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--fold-tap-lg); }
.switch__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch__input { flex: none; min-width: 52px; /* Fold: the input itself remains tappable when its label is visually hidden. */ min-height: var(--fold-tap); }
.segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 4px; }
.segmented__item { min-height: var(--fold-tap); }

/* Aide, dépannage, actions sensibles, abonnement */
.scr-help-list { padding-inline-start: 1.25em; display: grid; gap: 8px; }
.scr-cmds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.scr-cmd-card { display: grid; gap: 6px; align-content: start; }
.scr-cmd { width: 100%; min-height: var(--fold-tap-lg); }
.scr-danger__item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scr-danger__item .btn { flex: 1 1 200px; min-height: var(--fold-tap); }
.scr-billing__status { display: flex; align-items: flex-start; gap: 12px; }
.scr-billing__actions .btn { min-height: var(--fold-tap-lg); }

/* Fold ouvert : on exploite la largeur */
@media (min-width: 720px) {
  .scr-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(var(--fold-gap) * 1.5); align-items: start; }
  .scr-hero__name, .scr-hero__badges, .scr-hero__now { grid-column: 1; }
  .scr-hero__alert { grid-column: 2; grid-row: 1 / span 2; }
  .scr-hero__actions { grid-column: 2; grid-row: 3; }
  .scr-section { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
  .scr-section > .scr-section__header,
  .scr-section > .scr-sched-card,
  .scr-section > details,
  .scr-section > .gcal-root,
  .scr-section > .scr-settings,
  #billing > .card { grid-column: 1 / -1; }
  .gcal-main { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
  .gcal-now { grid-column: 1 / -1; }
  .scr-settings > .stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 32px; align-items: start; }
  .scr-settings__intro, .scr-settings__advanced, .scr-settings .scr-default__status { grid-column: 1 / -1; }
}

/* =====================================================================
   Action principale de la barre (Importer, Nouveau…)
   ===================================================================== */
.topbar__action { min-height: var(--fold-tap); display: inline-flex; align-items: center; gap: 6px; padding-inline: 14px; flex: none; }
@media (max-width: 419.98px) {
  .topbar__action { width: var(--fold-tap); padding: 0; justify-content: center; }
  .topbar__action .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* =====================================================================
   Médias (.media-view)
   ===================================================================== */
.media-layout { display: grid; gap: var(--fold-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.media-main { display: grid; gap: var(--fold-gap); min-width: 0; }
.media-quota { display: grid; gap: 8px; }
.media-quota__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.media-toolbar { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.media-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.media-search { position: relative; min-width: 0; }
.media-search__icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.media-search__input { width: 100%; min-height: var(--fold-tap); padding-inline: 44px 52px; font-size: max(16px, 1rem); }
.media-search__clear { position: absolute; inset-inline-end: 0; top: 0; width: var(--fold-tap); height: var(--fold-tap); display: grid; place-items: center; }
.media-toolbar__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.media-sort { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.media-sort__wrap { position: relative; flex: 1 1 auto; min-width: 0; max-width: 260px; }
.media-sort__select { width: 100%; min-height: var(--fold-tap); font-size: max(16px, 1rem); }
.media-viewswitch { display: flex; gap: 2px; flex: none; }
.media-viewswitch__btn { width: var(--fold-tap); height: var(--fold-tap); display: grid; place-items: center; }
.media-grid { display: grid; gap: clamp(10px, 1.6vw, 16px); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 22vw, 200px), 1fr)); }
.media-tile { min-width: 0; }
.media-tile__open { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: start; padding: 0; }
.media-thumb { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; position: relative; }
.media-thumb__img { width: 100%; height: 100%; object-fit: cover; }
.media-tile__text { display: grid; gap: 2px; min-width: 0; padding-inline: 2px; }
.media-tile__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-more__btn { width: 100%; min-height: var(--fold-tap-lg); }
.media-drop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--fold-pad); }
@media (min-width: 720px) {
  .media-toolbar { grid-template-columns: minmax(240px, auto) minmax(0, 1fr) auto; }
  .media-toolbar__row { justify-content: flex-end; }
}
@media (min-width: 1100px) {
  .media-layout:has(.media-aside:not(:empty)) { grid-template-columns: minmax(0, 1fr) 360px; }
  .media-aside:not(:empty) { position: sticky; top: calc(var(--fold-appbar-h, 0px) + 16px); max-height: calc(100dvh - var(--fold-appbar-h, 0px) - 32px); overflow-y: auto; }
}

/* =====================================================================
   Programmes (.program-list)
   ===================================================================== */
.program-list { display: grid; gap: var(--fold-gap); }
.program-grid { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.program-tile { min-width: 0; }
.program-tile__link { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 12px 14px; height: 100%; }
.program-tile__thumbs { flex: none; display: flex; }
.program-tile__thumb { width: 64px; height: 64px; overflow: hidden; display: block; }
.program-tile__img { width: 100%; height: 100%; object-fit: cover; }
.program-tile__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.program-tile__name { overflow-wrap: anywhere; }
.program-tile__screens { display: flex; align-items: center; gap: 6px; min-width: 0; }
.program-tile__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.program-tile__chevron { flex: none; }

/* =====================================================================
   Détail d'un programme (.program-editor)
   Fermé : aperçu puis médias, barre d'enregistrement au-dessus des onglets du bas.
   Ouvert (≥ 720px) : aperçu collant à gauche, médias et réglages à droite.
   ===================================================================== */
.program-editor { display: grid; gap: var(--fold-gap); max-width: 1280px; margin-inline: auto; min-width: 0; }
.program-editor__header { display: flex; align-items: flex-start; gap: 8px; }
.program-editor__header > .field { flex: 1; min-width: 0; }
.program-editor__header .input { width: 100%; min-height: var(--fold-tap-lg); font-size: max(18px, 1.125rem); padding-inline-end: 52px; }
.field__control { position: relative; }
.field__clear { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: var(--fold-tap); height: var(--fold-tap); display: grid; place-items: center; }
.program-editor__layout { display: grid; gap: var(--fold-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.program-editor__aside, .program-editor__main { display: grid; gap: var(--fold-gap); min-width: 0; }
.program-section__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: var(--fold-tap); }

.program-preview__frame { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.program-preview__frame--portrait { aspect-ratio: 9 / 16; max-height: 60dvh; width: auto; margin-inline: auto; }
.program-preview__timeline { /* Fold: wrap long playlists instead of shrinking their controls. */ display: flex; flex-wrap: wrap; gap: 4px; min-height: var(--fold-tap); }
.program-preview__segment { flex: var(--duration, 1) 1 0; min-width: var(--fold-tap); min-height: var(--fold-tap); }
.program-preview__controls { display: flex; justify-content: center; gap: 12px; }
.program-preview__skip, .program-preview__play { width: var(--fold-tap); height: var(--fold-tap); display: grid; place-items: center; }
.program-preview__play { width: var(--fold-tap-lg); height: var(--fold-tap-lg); }

.program-broadcast__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.program-chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--fold-tap); padding-inline: 14px; max-width: 100%; min-width: 0; }

.program-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.program-item__main { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 72px; }
.program-item__handle { flex: none; width: 40px; min-height: var(--fold-tap); display: grid; place-items: center; touch-action: none; }
.program-item__edit { flex: 1 1 auto; min-width: 0; min-height: var(--fold-tap); display: flex; align-items: center; gap: 10px; text-align: start; }
.program-item__thumb { flex: none; width: 52px; height: 52px; }
.program-item__thumb .media-thumb { width: 100%; height: 100%; aspect-ratio: auto; }
.program-item__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.program-item__name { display: flex; min-width: 0; }
.program-item__moves { flex: none; display: flex; gap: 2px; }
.program-item__move { width: 44px; height: var(--fold-tap); display: grid; place-items: center; }
.program-item__details { display: grid; gap: 14px; padding-block: 12px; }
.program-item__controls { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.program-item__duration-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--fold-tap); }
.program-stepper { display: inline-flex; align-items: center; gap: 6px; }
.program-stepper__btn { width: var(--fold-tap); height: var(--fold-tap); display: grid; place-items: center; }
.program-stepper__input { width: 72px; min-height: var(--fold-tap); text-align: center; font-size: max(16px, 1rem); }
.program-item__fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.program-item__fit .segmented__item { min-height: 72px; padding: 8px; }
.program-fit-choice { display: flex; align-items: center; gap: 8px; text-align: start; min-width: 0; }
.program-fit-picture { flex: none; width: 48px; aspect-ratio: var(--aspect, 16 / 9); position: relative; overflow: hidden; }
.program-item__advice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.program-item__advice p { flex: 1 1 220px; margin: 0; }
.program-item__focus, .program-item__remove-action { min-height: var(--fold-tap); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.program-item__remove-action .btn__label { overflow-wrap: anywhere; white-space: normal; text-align: start; }
.program-items__add { width: 100%; min-height: var(--fold-tap-lg); }
.program-playback > summary { display: flex; align-items: center; gap: 12px; min-height: var(--fold-tap-lg); cursor: pointer; list-style: none; }
.program-playback > summary::-webkit-details-marker { display: none; }
.program-playback__heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.program-playback__body { display: grid; gap: var(--fold-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.program-range__head { display: flex; justify-content: space-between; gap: 8px; }
.program-range__input { width: 100%; height: var(--fold-tap); }

.program-savebar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px var(--fold-pad-r) calc(10px + env(safe-area-inset-bottom)) var(--fold-pad-l);
  margin-inline: calc(-1 * var(--fold-pad));
}
.program-savebar__text { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; }
.program-savebar .btn, .program-savebar__discard { min-height: var(--fold-tap); padding-inline: 20px; }
@media (max-width: 599.98px) {
  .program-savebar { bottom: calc(var(--fold-nav-h) + env(safe-area-inset-bottom)); padding-bottom: 10px; }
  .program-savebar .btn { flex: 1 1 140px; }
}
@media (max-width: 419.98px) {
  .program-item__handle { display: none; }
  .program-item__moves { flex-direction: column; gap: 0; }
  .program-item__move { height: 36px; width: 44px; }
}
@media (min-width: 720px) {
  .program-editor__layout { grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.3fr); }
  .program-editor__aside {
    position: sticky; top: calc(var(--fold-appbar-h, 0px) + 16px);
    max-height: calc(100dvh - var(--fold-appbar-h, 0px) - 104px);
    overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (min-width: 720px) and (max-height: 519.98px) {
  .program-editor__aside { position: static; max-height: none; }
}

/* Nouveau programme : états vides (même .program-editor) */
.program-preview__empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; }
.program-preview__timeline:empty { min-height: 32px; }
.program-items__empty { width: 100%; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; }
.program-chip:disabled { cursor: not-allowed; }
.program-editor__header:not(:has(.program-editor__menu)) > .field { flex: 1 1 100%; }
.field__clear[hidden] { display: none; }

/* =====================================================================
   Planning TV (.dsp-planning)
   Fermé : agenda défilant horizontalement dans son cadre (colonnes ≥ 92px), cartes au-dessus.
   Fold ouvert : 7 jours visibles sans défilement, cartes en bandeau. ≥ 1100px : cartes à gauche, collantes.
   ===================================================================== */
.dsp-planning { max-width: 1400px; margin-inline: auto; min-width: 0; }
.dsp-planning__identity { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dsp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dsp-toolbar__nav { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; max-width: 520px; min-width: 0; }
.dsp-toolbar__nav .btn--icon { flex: none; width: var(--fold-tap); height: var(--fold-tap); }
.dsp-toolbar__date { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-align: center; }
.dsp-toolbar .segmented { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dsp-toolbar .segmented__item { min-height: var(--fold-tap); padding-inline: 16px; }
.dsp-planning__layout { display: grid; gap: var(--fold-gap); grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.dsp-planning__aside { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: start; min-width: 0; }
.dsp-now { display: flex; align-items: flex-start; gap: 12px; }
.dsp-now__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dsp-now .btn--icon { flex: none; width: var(--fold-tap); height: var(--fold-tap); }
.dsp-orientation__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-orientation__actions .btn, .dsp-default .btn { min-height: var(--fold-tap); }
.dsp-planning__calendar { min-width: 0; }
.dsp-night { width: 100%; min-height: var(--fold-tap); display: flex; align-items: center; gap: 10px; text-align: start; }
.dsp-agenda__scroll { /* Fold: keep all hours reachable inside the existing bounded agenda. */ overflow-x: auto; overflow-y: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; min-width: 0; }
.dsp-agenda__head, .dsp-agenda { --dsp-hours-w: 56px; --dsp-col-min: 70px; /* Fold: each overlap lane retains a touch target, including grid gaps. */ min-width: calc(var(--dsp-hours-w) + var(--cols, 7) * max(var(--dsp-col-min), calc(var(--fold-agenda-lanes, 1) * (var(--fold-tap) + 10px)))); }
.dsp-agenda__head { display: grid; grid-template-columns: var(--dsp-hours-w) repeat(var(--cols, 7), minmax(0, 1fr)); }
.dsp-agenda { display: grid; grid-template-columns: var(--dsp-hours-w) repeat(var(--cols, 7), minmax(0, 1fr)); }
.dsp-agenda__day { min-height: 56px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dsp-agenda__dow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dsp-agenda__col { position: relative; min-width: 0; }
.dsp-agenda__hours { position: sticky; left: 0; z-index: 3; }
.dsp-hour { left: 0; right: 0; min-height: 0; } /* 48px par heure = cible tactile */
.dsp-block { container-type: inline-size; min-width: 0; overflow: hidden; touch-action: none; }
.dsp-block__handle { min-height: 14px; }
.dsp-block__name { display: flex; align-items: center; gap: 4px; min-width: 0; }
@container (max-width: 110px) { .dsp-block__flag { display: none; } }
@container (max-width: 60px) { .dsp-block__time { display: none; } }
.dsp-free { left: 3px; right: 3px; overflow: hidden; }
.dsp-free__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.dsp-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.dsp-legend li { display: flex; align-items: center; gap: 6px; }
.dsp-planning__add {
  position: fixed; z-index: 25; min-height: var(--fold-tap-lg); padding-inline: 22px;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.page:has(.dsp-planning) { padding-bottom: calc(var(--fold-pad) + 88px + env(safe-area-inset-bottom)); }
@media (max-width: 599.98px) {
  .dsp-agenda__head, .dsp-agenda { --dsp-col-min: 92px; }
  .dsp-toolbar .segmented { flex: 1 1 100%; }
  .dsp-planning__add { bottom: calc(var(--fold-nav-h) + 16px + env(safe-area-inset-bottom)); }
  .page:has(.dsp-planning) { padding-bottom: calc(var(--fold-nav-h) + 96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1100px) {
  .dsp-planning__layout { grid-template-columns: 300px minmax(0, 1fr); }
  .dsp-planning__aside { grid-template-columns: minmax(0, 1fr); position: sticky; top: calc(var(--fold-appbar-h, 0px) + 16px); }
}
@media (min-width: 1100px) and (max-height: 519.98px) { .dsp-planning__aside { position: static; } }

/* Barre : les onglets ne rétrécissent jamais ; titre / libellé d'action cèdent la place */
.topbar__tabs { flex: none; }
@media (min-width: 600px) and (max-width: 1099.98px) {
  .topbar__inner:has(.topbar__actions:not(:empty)) .topbar__title { display: none; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
  .topbar__action { width: var(--fold-tap); padding: 0; justify-content: center; }
  .topbar__action .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* =====================================================================
   Bandeau défilant (.tk-page)
   Fermé : aperçu puis formulaire, bouton « Diffuser » collé au-dessus des onglets du bas.
   Fold ouvert : aperçu collant à gauche, formulaire à droite (libellés en colonne).
   ===================================================================== */
.tk-layout { display: grid; gap: var(--fold-gap); grid-template-columns: minmax(0, 1fr); align-items: start; max-width: 1280px; margin-inline: auto; min-width: 0; }
.tk-screens { grid-column: 1 / -1; }
.tk-preview { display: grid; gap: 10px; min-width: 0; }
.tk-preview__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tk-stop { min-height: var(--fold-tap); }
.dsp-preview__box { width: 100%; aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.tk-form { display: grid; gap: var(--fold-gap); min-width: 0; }
.tk-message textarea { width: 100%; min-height: 96px; font-size: max(16px, 1rem); resize: vertical; }
.tk-counter { display: block; text-align: end; }
.tk-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-starters .btn { min-height: var(--fold-tap); }
.tk-options { display: grid; gap: 18px; }
.tk-option { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.tk-colors { display: grid; grid-template-columns: repeat(auto-fill, var(--fold-tap)); gap: 8px; }
.tk-swatch { width: var(--fold-tap); height: var(--fold-tap); }
.tk-option .segmented, .tk-end-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: 4px; }
.tk-option .segmented__item, .tk-end-options .segmented__item { min-height: var(--fold-tap); min-width: 0; }
.tk-period .input, .tk-dates .input { width: 100%; min-height: var(--fold-tap); font-size: max(16px, 1rem); }
.tk-dates { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.tk-footer { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 12px; }
.tk-save-hint { flex: 1 1 180px; margin: 0; }
.tk-publish { flex: 1 1 220px; min-height: var(--fold-tap-lg); }
@media (max-width: 599.98px) {
  .tk-footer { bottom: calc(var(--fold-nav-h) + 8px + env(safe-area-inset-bottom)); }
}
@media (min-width: 720px) {
  .tk-layout { grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); }
  .tk-preview { position: sticky; top: calc(var(--fold-appbar-h, 0px) + 16px); }
  .tk-option { grid-template-columns: 110px minmax(0, 1fr); }
  .tk-option__label { padding-top: 12px; }
}
@media (min-width: 720px) and (max-height: 519.98px) { .tk-preview { position: static; } }

/* =====================================================================
   Éditeur de menu (.dsp-editor)
   Fermé : prix et promo passent sous le nom de l'article. Ouvert : aperçu collant à droite.
   ===================================================================== */
.dsp-editor { display: grid; gap: var(--fold-gap); grid-template-columns: minmax(0, 1fr); align-items: start; max-width: 1280px; margin-inline: auto; min-width: 0; }
.dsp-menu-name { width: 100%; min-height: var(--fold-tap-lg); font-size: max(18px, 1.125rem); }
.dsp-cat { min-width: 0; }
.dsp-cat__head { display: flex; align-items: center; gap: 8px; min-height: 60px; min-width: 0; }
.dsp-cat__caret { flex: 1; min-width: 0; min-height: var(--fold-tap); display: flex; align-items: center; gap: 10px; text-align: start; }
.dsp-cat__head .btn--icon { flex: none; width: var(--fold-tap); height: var(--fold-tap); }
.dsp-cat__head .switch, .dsp-mi__switch { flex: none; min-height: var(--fold-tap); }
.dsp-cat__head .switch__label, .dsp-mi__switch .switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dsp-cat__body { display: grid; gap: 8px; min-width: 0; }
.dsp-cat__body > .btn { min-height: var(--fold-tap); justify-self: start; }
.dsp-items { margin: 0; padding: 0; list-style: none; }
.dsp-mi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-block: 8px; min-width: 0; }
.dsp-mi__handle { /* Fold: the drag grip is also a touch target. */ flex: none; width: var(--fold-tap); min-height: var(--fold-tap); display: grid; place-items: center; touch-action: none; }
.dsp-mi__text { flex: 1 1 180px; min-width: 0; min-height: var(--fold-tap); display: grid; align-content: center; text-align: start; }
.dsp-price { display: inline-flex; align-items: center; gap: 4px; }
.dsp-price__input { width: 88px; min-height: var(--fold-tap); text-align: end; font-size: max(16px, 1rem); }
.dsp-mi .btn--sm { min-height: var(--fold-tap); }
.dsp-sub { padding-inline-start: 12px; min-width: 0; }
.dsp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-swatch { min-height: var(--fold-tap); padding-inline: 16px; display: inline-flex; align-items: center; gap: 8px; }
.dsp-editor .segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 4px; }
.dsp-editor .segmented__item { min-height: var(--fold-tap); }
.dsp-editor .btn--danger, .dsp-editor .btn--secondary { min-height: var(--fold-tap); }
.dsp-editor__aside { display: grid; gap: 10px; min-width: 0; }
.dsp-preview--portrait .dsp-preview__box { aspect-ratio: 9 / 16; width: auto; max-width: 100%; max-height: 70dvh; margin-inline: auto; }
@media (max-width: 599.98px) {
  .dsp-mi__text { flex-basis: calc(100% - 110px); } /* prix + promo à la ligne */
  .dsp-mi .dsp-price:first-of-type { margin-inline-start: 38px; }
}
@media (min-width: 720px) {
  .dsp-editor { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); }
  .dsp-editor__aside { position: sticky; top: calc(var(--fold-appbar-h, 0px) + 16px); }
}
@media (min-width: 720px) and (max-height: 519.98px) { .dsp-editor__aside { position: static; } }

/* =====================================================================
   Aperçu de la TV (.dsp-preview-page)
   L'écran simulé prend la hauteur disponible ; le choix du moment passe à droite sur le Fold ouvert.
   ===================================================================== */
.dsp-preview-page { max-width: 1280px; margin-inline: auto; min-width: 0; }
.dsp-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp-switch__chip { min-height: var(--fold-tap); padding-inline: 16px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.dsp-preview-page .dsp-preview { display: grid; place-items: center; min-width: 0; }
.dsp-preview-page .dsp-preview__box { width: min(100%, calc((100dvh - var(--fold-appbar-h, 0px) - 160px) * 16 / 9)); }
.dsp-preview-page .dsp-preview--portrait .dsp-preview__box { width: auto; height: min(70dvh, calc(100dvh - var(--fold-appbar-h, 0px) - 160px)); max-height: none; }
.scr-sheet__pair { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.dsp-moment .input { width: 100%; min-height: var(--fold-tap); font-size: max(16px, 1rem); }
.dsp-moment .btn { min-height: var(--fold-tap); }
@media (min-width: 720px) {
  .dsp-preview-page > .stack { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--fold-gap); align-items: start; }
  .dsp-preview-page > .stack > .dsp-switch, .dsp-preview-page > .stack > .dsp-rotate-hint { grid-column: 1 / -1; }
  .dsp-moment { position: sticky; top: calc(var(--fold-appbar-h, 0px) + 16px); }
}

/* =====================================================================
   Réglages des jeux (.game-view)
   Onglets en bandeau défilant, vignettes de jeux en grille fluide, bouton « Lancer » collant.
   ===================================================================== */
.game-view { max-width: 1280px; margin-inline: auto; min-width: 0; }
.game-tabs { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.game-tabs::-webkit-scrollbar { display: none; }
.game-tabs .segmented__item { flex: none; min-height: var(--fold-tap); padding-inline: 16px; display: inline-flex; align-items: center; white-space: nowrap; scroll-snap-align: start; }
.gl-step { display: flex; align-items: center; gap: 10px; }
.gl-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gl-games { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(clamp(136px, 17vw, 180px), 1fr)); }
.gl-game { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; }
.gl-game__card { display: grid; gap: 6px; min-width: 0; cursor: pointer; }
.gl-game__media { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; }
.gl-game__img { width: 100%; height: 100%; object-fit: cover; }
.gl-game__name, .gl-game__summary { overflow-wrap: anywhere; }
.gl-game__settings { width: 100%; min-height: var(--fold-tap); }
.gl-all .check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; min-height: var(--fold-tap); }
.gl-all .field__hint { grid-column: 2; }
.check__input { width: 24px; height: 24px; }
.check__label, .gl-screen__label { min-height: var(--fold-tap); }
.gl-screens { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.gl-screen { display: grid; gap: 8px; min-width: 0; }
.gl-screen__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.gl-screen__label { display: grid; gap: 3px; min-width: 0; }
.gl-screen__moment { display: flex; align-items: center; gap: 6px; }
.gl-screen__pair { min-height: var(--fold-tap); justify-self: start; }
.gl-recent > summary { min-height: var(--fold-tap-lg); display: flex; align-items: center; cursor: pointer; }
.gr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gr-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gr-row__link { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.gr-row__main { flex: 1; min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.gr-row__status { flex: none; }
.gl-launch { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 15; display: grid; gap: 8px; padding-block: 12px; }
.gl-launch__btn { min-height: var(--fold-tap-lg); }
@media (max-width: 599.98px) {
  .gl-launch { bottom: calc(var(--fold-nav-h) + 8px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   Calendrier des jeux (.gcal-page / .gcal--full)
   Fermé : tout en une colonne. Fold ouvert : cartes « par défaut » et « périodes » côte à côte,
   année en pleine largeur. ≥ 1100px : réglages à gauche, année collante à droite.
   ===================================================================== */
.gcal-page { min-width: 0; }
.gcal-picker { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gcal-picker__field { display: grid; gap: 6px; min-width: 0; }
.gcal-picker__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.gcal-screen-choice { min-height: var(--fold-tap); padding-inline: 18px; max-width: 100%; }
.gcal-copy-btn { min-height: var(--fold-tap); }
.gcal--full .gcal-columns { display: grid; gap: var(--fold-gap); grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
.gcal-year { display: grid; gap: 12px; min-width: 0; }
.gcal-yearnav { display: flex; align-items: center; gap: 4px; }
.gcal-yearnav .btn--icon { width: var(--fold-tap); height: var(--fold-tap); }
.gcal-yearnav__label { min-width: 4.5ch; text-align: center; margin: 0; }
.gcal-yearnav__today { min-height: var(--fold-tap); }
.gcal-yr-wrap, .gcal-yr { min-width: 0; }
.gcal-yr__ruler, .gcal-yr__row { display: grid; grid-template-columns: clamp(44px, 8vw, 60px) minmax(0, 1fr); gap: 8px; align-items: center; }
.gcal-yr__rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gcal-yr__track { position: relative; /* Fold: interactive calendar segments need a full-height touch target. */ height: calc(var(--fold-tap) + 4px); min-width: 0; }
.gcal-yr__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.gcal-yr__legend li { display: flex; align-items: center; gap: 6px; }
.gcal-yr__table > summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; }
.gcal-yr__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gcal-yr__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding-block: 8px; }
.gcal-yr__item-dates, .gcal-yr__item-game { grid-column: 2; overflow-wrap: anywhere; }
.gcal-yr__item > .gcal-dot { grid-row: 1 / span 2; }
@media (min-width: 600px) {
  .gcal-yr__item { grid-template-columns: auto minmax(140px, auto) minmax(0, 1fr); }
  .gcal-yr__item-dates { grid-column: 2; } .gcal-yr__item-game { grid-column: 3; }
  .gcal-yr__item > .gcal-dot { grid-row: auto; }
}
@media (min-width: 1100px) {
  .gcal--full .gcal-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gcal--full .gcal-main { grid-template-columns: minmax(0, 1fr); }
  .gcal--full .gcal-year { position: sticky; top: calc(var(--fold-appbar-h, 0px) + 16px); }
}
@media (min-width: 1100px) and (max-height: 519.98px) { .gcal--full .gcal-year { position: static; } }

/* =====================================================================
   Tiroir de navigation (.drawer__panel)
   La maquette Menu Prixee (layout.css, layout/drawer.js) fixe la largeur : 340 px (volet,
   puis barre latérale à partir de 1200 px). Ici : hauteur réelle, zone sûre, tactile.
   ===================================================================== */
.drawer__panel {
  box-sizing: border-box;
  block-size: 100dvh; max-block-size: 100dvh;
  padding-inline-start: env(safe-area-inset-left);
  overflow: hidden;
}
.drawer__link, .drawer__group-toggle, .drawer__tile { touch-action: manipulation; min-inline-size: 0; }
@media (max-height: 519.98px) and (orientation: landscape) {
  .drawer__head, .drawer__subhead { min-block-size: 52px; }
  .drawer__link, .drawer__group-toggle, .drawer__logout { min-block-size: 44px; }
  .drawer__tile { min-block-size: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Fold: the existing nav is moved outside the backdrop-filter header on phones. */
@media (max-width: 599.98px) {
  .rnav__list { max-width: none; }
}
/* Fold: preserve hidden/label semantics while making native controls usable by touch. */
.page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.page select, .page textarea { font-size: max(16px, 1em); }
.topbar__brand, .crumbs__link { min-height: var(--fold-tap); }
/* Fold: short landscape windows need their full content height. */
@media (max-height: 519.98px) and (orientation: landscape) {
  :root { --fold-tap: 44px; }
  .appbar, .scr-tabs, .tk-footer, .gl-launch, .program-savebar,
  .program-editor__aside, .tk-preview, .dsp-editor__aside,
  .dsp-planning__aside, .gcal--full .gcal-year, .media-aside:not(:empty), .dsp-moment { position: static; }
  .shell__body:has(.rc--home) { height: auto; overflow: visible; }
  .page:has(.rc--home), .rc--home .rc-col { overflow: visible; }
}

/* Fold: icon controls retain full touch targets, including reorder arrows. */
.scr-sched__handle, .gcal-item__handle, .program-item__handle,
.program-item__move { min-width: var(--fold-tap); min-height: var(--fold-tap); }
.rc-screen__name { min-height: var(--fold-tap); }
.segmented__item { min-width: var(--fold-tap); }
.program-stepper { min-width: calc(2 * var(--fold-tap) + 86px); }
/* Fold: explicit static launch state must win over the generic sticky launch bar. */
.gl-launch--static { position: static; }

/* Fold: the monthly planning grid scrolls internally when seven touch targets cannot fit. */
.dsp-month { min-width: 0; overflow-x: auto; }
.dsp-month__head, .dsp-month__grid { min-width: calc(7 * var(--fold-tap) + 12px); }

/* Fold: center the existing switch thumb in its enlarged hit area. */
.switch__input::after { top: calc(50% - 12px); }

/* Fold: a tall sticky panel remains entirely reachable inside the available viewport. */
@media (min-width: 720px) and (min-height: 520px) {
  .tk-preview, .dsp-editor__aside, .dsp-moment {
    max-height: calc(100dvh - var(--fold-appbar-h, 0px) - 32px);
    overflow-y: auto;
  }
}
@media (min-width: 1100px) and (min-height: 520px) {
  .gcal--full .gcal-year, .dsp-planning__aside {
    max-height: calc(100dvh - var(--fold-appbar-h, 0px) - 32px);
    overflow-y: auto;
  }
}