/* Mise en page seulement. Les composants viennent de web/composants.css. */

/* Écran : contenu, onglets en bas sur téléphone, menu latéral dès 900 px, rail d'onglets couché. */
.contenu { overflow-x: clip; min-height: 100dvh; }
#zone { outline: none; }
.ecran { display: flex; flex-direction: column; gap: var(--block-gap); padding-block: calc(env(safe-area-inset-top, 0px) + var(--s-6)) calc(var(--tabbar) + var(--s-3) * 2 + env(safe-area-inset-bottom, 0px) + var(--s-5)); }
body { --toast-bas: calc(var(--tabbar) + var(--s-3) * 2); }

.menu-lateral { display: none; }
@media (min-width: 900px) and (min-height: 501px) {
  .menu-lateral { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 240px; }
  .contenu { margin-inline-start: 240px; }
  .ecran { padding-block-end: calc(env(safe-area-inset-bottom, 0px) + var(--s-6)); }
  body { --toast-bas: var(--s-5); }
}
.menu__marque { display: flex; align-items: center; gap: var(--s-3); margin-block-end: var(--s-4); padding-inline: var(--s-1); font-weight: 650; text-decoration: none; color: inherit; }
.menu__marque .logo-rond { width: var(--tap); height: var(--tap); }

/* Téléphone couché, tablette couchée tactile : rail d'onglets à droite, pas de menu latéral. */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .menu-lateral { display: none; }
  .contenu { margin-inline-start: 0; padding-inline-end: calc(var(--rail) + var(--s-3)); }
  .ecran { padding-block: calc(env(safe-area-inset-top, 0px) + var(--s-4)) calc(env(safe-area-inset-bottom, 0px) + var(--s-6)); }
  body { --toast-bas: var(--s-5); }
}

/* Boutons des médicaments : 3 par rangée sur téléphone, plus dès qu'il y a la place. */
.meds { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: var(--s-3); }
/* Heures et minutes sur la même ligne. */
.molettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }

/* Réglages : blocs l'un sous l'autre ; aperçu de la couleur personnalisée (arc-en-ciel tant qu'il n'y en a pas). */
.pile-blocs { display: flex; flex-direction: column; gap: var(--block-gap); }
.mini-perso { width: 60%; height: 10px; border-radius: calc(var(--r-btn) * 0.5); background: var(--perso, conic-gradient(var(--data-8), var(--data-4), var(--data-6), var(--data-1), var(--data-7), var(--data-5), var(--data-8))); }