/* ============================================================
   Trame — bibliothèque de composants
   Vanilla. Aucun framework, aucune étape de build.
   Dépend de studyos-tokens.css, qui doit être chargé AVANT.

   Toutes les classes sont préfixées « sty- » pour ne jamais
   entrer en collision avec le CSS existant de l'application.

   Aucune valeur en dur ici : tout passe par une variable.
   C'est ce qui rend le mode sombre gratuit.
   ============================================================ */

/* ------------------------------------------------------------
   0. Icônes
   Le sprite js/studyos-icons.svg est injecté une fois dans le
   <body>, puis chaque icône est un <svg><use href="#i-nom"></use></svg>.
   Le trait suit currentColor : la couleur vient du parent.
   ------------------------------------------------------------ */
.sty-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sty-icon--sm { width: 16px; height: 16px; }
.sty-icon--lg { width: 24px; height: 24px; }   /* taille éditeur */

/* ------------------------------------------------------------
   1. Boutons — 5 variantes
   La pression est gérée globalement dans studyos-tokens.css
   (scale 0.97). Ne la redéclare pas ici.
   ------------------------------------------------------------ */
.sty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--size-control);
  padding: 0 var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  background: transparent;
  font: var(--t-body);
  font-weight: 600;
  letter-spacing: var(--tr-body);
  color: var(--c-ink);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.sty-btn:disabled { opacity: .45; cursor: not-allowed; }
.sty-btn:disabled:active { transform: none; }

/* primaire — l'action attendue de l'écran. Une seule par écran. */
.sty-btn--primary { background: var(--c-accent); color: #fff; }
/* secondaire — une alternative légitime. */
.sty-btn--secondary {
  background: var(--c-card);
  border-color: var(--c-line-strong);
  color: var(--c-ink);
  box-shadow: var(--shadow-default);
}
/* fantôme — une action de service : annuler, passer, tout voir. */
.sty-btn--ghost { color: var(--c-accent-text); }
/* pleine neutre — publier, se connecter : une fin de parcours. */
.sty-btn--solid { background: var(--c-solid); color: var(--c-page); }
/* destructive — supprimer. Jamais pleine : on ne rend pas facile
   ce qui ne se rattrape pas. */
.sty-btn--danger {
  background: var(--c-card);
  border-color: var(--c-err);
  color: var(--c-err);
}

@media (hover: hover) and (pointer: fine) {
  .sty-btn--primary:hover:not(:disabled)   { background: var(--c-accent-hover); }
  .sty-btn--secondary:hover:not(:disabled) { background: var(--c-tile); }
  .sty-btn--ghost:hover:not(:disabled)     { background: var(--c-accent-soft); }
  .sty-btn--solid:hover:not(:disabled)     { background: var(--c-solid-hover); }
  .sty-btn--danger:hover:not(:disabled)    { background: var(--c-err-soft); }
}

.sty-btn--sm  { height: 36px; padding: 0 var(--s-3); font: var(--t-small); font-weight: 600; }
.sty-btn--lg  { height: 52px; padding: 0 var(--s-6); }
.sty-btn--full{ width: 100%; }

/* bouton icône seul — exige toujours un aria-label */
.sty-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-touch); height: var(--size-touch);
  border: none; border-radius: var(--r-lg);
  background: transparent; color: var(--c-ink); cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .sty-icon-btn:hover { background: var(--c-tile); }
}

/* bouton flottant de capture (mobile) */
.sty-fab {
  width: 56px; height: 56px; margin-top: -10px;
  border: none; border-radius: var(--r-pill);
  background: var(--c-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-floating);
  cursor: pointer;
}

/* ------------------------------------------------------------
   2. Champs
   ------------------------------------------------------------ */
.sty-field { display: flex; flex-direction: column; gap: var(--s-2); }
.sty-label { font: var(--t-ui); font-weight: 500; letter-spacing: var(--tr-ui); color: var(--c-ink); }
.sty-help  { font: var(--t-small); letter-spacing: var(--tr-small); color: var(--c-ink-3); }
.sty-error { font: var(--t-small); letter-spacing: var(--tr-small); color: var(--c-err); }

.sty-input, .sty-textarea, .sty-select {
  width: 100%;
  min-height: var(--size-control);
  padding: 0 var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-lg);
  background: var(--c-card);
  font: var(--t-body);
  letter-spacing: var(--tr-body);
  color: var(--c-ink);
  box-sizing: border-box;
}
.sty-textarea { padding: var(--s-3) var(--s-4); line-height: 25px; resize: vertical; }
.sty-input::placeholder, .sty-textarea::placeholder { color: var(--c-ink-3); }
.sty-input:focus-visible, .sty-textarea:focus-visible, .sty-select:focus-visible {
  border-color: var(--c-accent);
}
.sty-input[aria-invalid="true"], .sty-textarea[aria-invalid="true"] { border-color: var(--c-err); }
.sty-input:disabled, .sty-textarea:disabled { background: var(--c-sunken); color: var(--c-ink-3); }

/* champ de recherche */
.sty-search { position: relative; display: flex; align-items: center; }
.sty-search > .sty-icon {
  position: absolute; left: var(--s-3);
  color: var(--c-ink-3); pointer-events: none;
}
.sty-search > .sty-input { padding-left: 42px; }

/* ------------------------------------------------------------
   3. Puces et étiquettes de statut
   Règle de fond : un statut porte TOUJOURS un mot.
   Une pastille de couleur seule est un bug, pas un raccourci.
   ------------------------------------------------------------ */
.sty-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 34px; padding: 0 var(--s-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-card);
  font: var(--t-ui); font-weight: 500; letter-spacing: var(--tr-ui);
  color: var(--c-ink-2);
  cursor: pointer;
}
.sty-chip[aria-pressed="true"], .sty-chip[aria-current="page"] {
  background: var(--c-solid); border-color: var(--c-solid); color: var(--c-page);
}

.sty-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font: var(--t-micro); letter-spacing: var(--tr-micro);
  text-transform: none;
  white-space: nowrap;
}
.sty-tag--ok      { background: var(--c-ok-soft);     color: var(--c-ok-strong); }
.sty-tag--warn    { background: var(--c-warn-soft);   color: var(--c-warn-strong); }
.sty-tag--err     { background: var(--c-err-soft);    color: var(--c-err-strong); }
.sty-tag--accent  { background: var(--c-accent-soft); color: var(--c-accent-text); }
.sty-tag--neutral { background: var(--c-tile);        color: var(--c-ink-2); }

/* compteur (révisions dues, messages non lus) */
.sty-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-accent); color: #fff;
  font: var(--t-micro); letter-spacing: 0;
}

.sty-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--c-accent-soft); color: var(--c-accent-text);
  font: var(--t-small); font-weight: 600;
}

/* ------------------------------------------------------------
   4. Cartes, lignes de liste, séparateurs
   ------------------------------------------------------------ */
.sty-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-default);
}
.sty-card--flat    { box-shadow: none; }
.sty-card--floating{ box-shadow: var(--shadow-floating); }
.sty-card__body    { padding: var(--s-5) var(--s-6); }
.sty-card__header  {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
}

.sty-row {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 64px; padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  color: inherit; text-decoration: none;
}
.sty-row:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  a.sty-row:hover, button.sty-row:hover { background: var(--c-tile); }
}
.sty-row__tile {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-lg);
  background: var(--c-tile); color: var(--c-accent-text);
}
.sty-row__main  { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sty-row__title { font: var(--t-body); font-weight: 500; letter-spacing: var(--tr-body); color: var(--c-ink); }
.sty-row__meta  { font: var(--t-small); letter-spacing: var(--tr-small); color: var(--c-ink-3); }

.sty-divider { height: 1px; border: 0; margin: 0; background: var(--c-line); }

/* étiquette de section */
.sty-section-label {
  font: var(--t-micro); letter-spacing: var(--tr-micro);
  text-transform: uppercase; color: var(--c-ink-3);
}

/* ------------------------------------------------------------
   5. Onglets et segments
   ------------------------------------------------------------ */
.sty-tabs {
  display: flex; align-items: center; gap: var(--s-5);
  border-bottom: 1px solid var(--c-line);
}
.sty-tab {
  padding: var(--s-3) 0;
  border: none; border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
  font: var(--t-ui); font-weight: 500; letter-spacing: var(--tr-ui);
  color: var(--c-ink-3);
}
.sty-tab[aria-selected="true"] {
  border-bottom-color: var(--c-accent);
  color: var(--c-ink); font-weight: 600;
}

.sty-segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--r-lg);
  background: var(--c-sunken);
}
.sty-segmented button {
  border: none; border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  background: transparent; cursor: pointer;
  font: var(--t-ui); font-weight: 500; letter-spacing: var(--tr-ui);
  color: var(--c-ink-2);
}
.sty-segmented button:is([aria-pressed="true"], [aria-checked="true"]) {
  background: var(--c-card); color: var(--c-ink); font-weight: 600;
  box-shadow: var(--shadow-default);
}

/* ------------------------------------------------------------
   6. Interrupteurs, radios, cases
   ------------------------------------------------------------ */
.sty-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; }
.sty-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sty-switch__track {
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: var(--c-control);
  transition: background-color var(--d-press) ease;
  pointer-events: none;
}
.sty-switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: var(--r-pill); background: #fff;
  box-shadow: var(--shadow-default);
  transition: transform var(--d-press) var(--ease-out);
}
.sty-switch input:checked + .sty-switch__track { background: var(--c-accent); }
.sty-switch input:checked + .sty-switch__track::after { transform: translateX(18px); }
.sty-switch input:focus-visible + .sty-switch__track { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.sty-choice { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.sty-choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-accent); flex-shrink: 0; }

/* ------------------------------------------------------------
   7. Progression
   ------------------------------------------------------------ */
.sty-progress {
  height: 6px; overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--c-sunken);
}
.sty-progress__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  transition: width var(--d-sheet) var(--ease-in-out);
}
.sty-progress--thin { height: 4px; }

/* état de traitement IA : la barre est indéterminée mais bornée,
   jamais une roue infinie sans fin annoncée. */
.sty-progress--working .sty-progress__fill { animation: sty-indeterminate 1.6s var(--ease-in-out) infinite; }
@keyframes sty-indeterminate {
  0%   { margin-left: 0;   width: 18%; }
  50%  { margin-left: 41%; width: 42%; }
  100% { margin-left: 100%; width: 12%; }
}

/* ------------------------------------------------------------
   8. Encadrés
   « À vérifier » est une promesse produit : tout passage généré
   que la source ne confirme pas atterrit ici. Ce n'est pas une
   décoration, c'est la raison pour laquelle on peut faire
   confiance au reste.
   ------------------------------------------------------------ */
.sty-callout {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
}
.sty-callout__title { font: var(--t-ui); font-weight: 600; letter-spacing: var(--tr-ui); }
.sty-callout__text  { font: var(--t-ui); letter-spacing: var(--tr-ui); color: var(--c-ink); }
.sty-callout--info  { background: var(--c-accent-soft); }
.sty-callout--info  .sty-callout__title, .sty-callout--info  .sty-icon { color: var(--c-accent-text); }
.sty-callout--check { background: var(--c-warn-soft); }
.sty-callout--check .sty-callout__title, .sty-callout--check .sty-icon { color: var(--c-warn-strong); }
.sty-callout--ok    { background: var(--c-ok-soft); }
.sty-callout--ok    .sty-callout__title, .sty-callout--ok    .sty-icon { color: var(--c-ok-strong); }
.sty-callout--err   { background: var(--c-err-soft); }
.sty-callout--err   .sty-callout__title, .sty-callout--err   .sty-icon { color: var(--c-err-strong); }

/* source d'un objet généré : « chapitre 4, § 3 » ou « à 24:16 » */
.sty-source {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--t-small); letter-spacing: var(--tr-small); color: var(--c-ink-3);
}

/* ------------------------------------------------------------
   9. Chargement
   Un squelette qui reprend la forme du contenu attendu, jamais
   une roue qui tourne sans rien annoncer.
   ------------------------------------------------------------ */
.sty-skeleton {
  border-radius: var(--r-sm);
  background: var(--c-sunken);
  animation: sty-pulse 1.6s var(--ease-in-out) infinite;
}
@keyframes sty-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.sty-skeleton--line  { height: 12px; }
.sty-skeleton--title { height: 20px; width: 60%; }
.sty-skeleton--block { height: 96px; border-radius: var(--r-xl); }

/* ------------------------------------------------------------
   10. État vide
   ------------------------------------------------------------ */
.sty-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3); padding: var(--s-12) var(--s-6);
  text-align: center;
}
.sty-empty__title { font: var(--t-heading); letter-spacing: var(--tr-heading); }
.sty-empty__text  { font: var(--t-ui); letter-spacing: var(--tr-ui); color: var(--c-ink-2); max-width: 44ch; }

/* ------------------------------------------------------------
   11. Navigation — trois formes, une hiérarchie
   ------------------------------------------------------------ */

/* barre latérale (bureau, ≥ 1280) */
.sty-sidebar {
  width: var(--size-sidebar); flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-5) var(--s-3);
  background: var(--c-card);
  border-right: 1px solid var(--c-line);
}
.sty-nav-item {
  display: flex; align-items: center; gap: var(--s-3);
  height: 40px; padding: 0 var(--s-3);
  border-radius: var(--r-lg);
  font: var(--t-ui); font-weight: 500; letter-spacing: var(--tr-ui);
  color: var(--c-ink-2); text-decoration: none;
}
.sty-nav-item[aria-current="page"] {
  background: var(--c-accent-soft); color: var(--c-accent-text); font-weight: 600;
}
.sty-nav-item > :last-child.sty-badge,
.sty-nav-item > :last-child.sty-nav-item__count { margin-left: auto; }
.sty-nav-item__count { font: var(--t-small); font-weight: 600; color: var(--c-ink-3); }
@media (hover: hover) and (pointer: fine) {
  .sty-nav-item:hover:not([aria-current="page"]) { background: var(--c-tile); }
}

/* rail (tablette, 768–1279) */
.sty-rail {
  width: var(--size-rail); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-5) 0;
  background: var(--c-card);
  border-right: 1px solid var(--c-line);
}
.sty-rail .sty-nav-item {
  width: 48px; height: 48px; padding: 0;
  justify-content: center;
}

/* barre inférieure (mobile, < 768) */
.sty-tabbar {
  display: flex; align-items: center; justify-content: space-around;
  height: 56px; padding-bottom: env(safe-area-inset-bottom, 20px);
  background: var(--c-card);
  border-top: 1px solid var(--c-line);
}
.sty-tabbar__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
  width: 64px; padding: 6px 0;
  color: var(--c-ink-3); text-decoration: none;
  font: var(--t-micro); letter-spacing: var(--tr-micro);
}
.sty-tabbar__item[aria-current="page"] { color: var(--c-accent-text); }

/* ------------------------------------------------------------
   12. Barre d'action contextuelle
   C'est LA règle d'interaction du produit : l'intelligence
   n'existe que pendant la sélection. Aucune fenêtre de
   discussion permanente, nulle part.
   ------------------------------------------------------------ */
.sty-ai-bar {
  display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--s-1);
  padding: var(--s-2);
  border-radius: var(--r-xl);
  background: var(--c-material);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--shadow-floating);
}
.sty-ai-bar button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px var(--s-3);
  border: none; border-radius: var(--r-sm);
  background: transparent; color: #fff;
  font: var(--t-ui); font-weight: 500; letter-spacing: var(--tr-ui);
  white-space: nowrap; cursor: pointer;
}
.sty-ai-bar button[data-primary] { background: rgba(255, 255, 255, .14); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .sty-ai-bar button:hover { background: rgba(255, 255, 255, .10); }
}

/* surlignage du passage sélectionné */
.sty-selection {
  background: var(--c-accent-wash);
  border-radius: var(--r-xs);
  box-shadow: 0 0 0 2px var(--c-accent-wash);
}

/* instruction entre crochets, dans le texte */
.sty-bracket {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3);
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  font-weight: 600; color: var(--c-ink);
}

/* ------------------------------------------------------------
   13. Calques : feuille basse, modale, voile
   ------------------------------------------------------------ */
.sty-scrim {
  position: fixed; inset: 0;
  background: var(--c-scrim);
  opacity: 1;
  transition: opacity var(--d-sheet) var(--ease-out);
}
@starting-style { .sty-scrim { opacity: 0; } }

.sty-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  padding: var(--s-3) var(--s-4) var(--s-8);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--c-card);
  box-shadow: var(--shadow-up);
  transform: translateY(0);
  transition: transform var(--d-sheet) var(--ease-drawer);
}
@starting-style { .sty-sheet { transform: translateY(100%); } }
.sty-sheet__grab {
  width: 40px; height: 4px; margin: 0 auto var(--s-3);
  border-radius: var(--r-pill); background: var(--c-line-strong);
}

.sty-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: min(660px, calc(100vw - 32px));
  padding: var(--s-8);
  border-radius: var(--r-2xl);
  background: var(--c-card);
  box-shadow: var(--shadow-modal);
  opacity: 1;
  transition: opacity var(--d-dropdown) var(--ease-out),
              transform var(--d-dropdown) var(--ease-out);
}
/* Une entrée ne part jamais de scale(0) : rien ne surgit de rien. */
@starting-style {
  .sty-modal { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}

/* popover ancré sur son déclencheur, pas sur son centre */
.sty-popover {
  transform-origin: var(--sty-origin, top center);
  border-radius: var(--r-lg);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-floating);
  opacity: 1; transform: scale(1);
  transition: opacity var(--d-popover) var(--ease-out),
              transform var(--d-popover) var(--ease-out);
}
@starting-style { .sty-popover { opacity: 0; transform: scale(.97); } }

/* ------------------------------------------------------------
   14. Apparition en cascade
   30 à 80 ms entre deux éléments. Au-delà, l'interface traîne.
   Le décalage est décoratif : il ne bloque jamais l'interaction.
   ------------------------------------------------------------ */
.sty-stagger > * {
  opacity: 0; transform: translateY(8px);
  animation: sty-rise 280ms var(--ease-out) forwards;
}
.sty-stagger > :nth-child(1) { animation-delay: 0ms; }
.sty-stagger > :nth-child(2) { animation-delay: 50ms; }
.sty-stagger > :nth-child(3) { animation-delay: 100ms; }
.sty-stagger > :nth-child(4) { animation-delay: 150ms; }
.sty-stagger > :nth-child(5) { animation-delay: 200ms; }
.sty-stagger > :nth-child(n + 6) { animation-delay: 240ms; }
@keyframes sty-rise { to { opacity: 1; transform: translateY(0); } }

/* ------------------------------------------------------------
   15. Gabarits d'application et paliers
   La planche bureau est la référence ; les deux autres paliers
   en découlent par ces valeurs.
   ------------------------------------------------------------ */
.sty-app { display: flex; min-height: 100vh; min-height: 100dvh; }
.sty-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sty-read { width: 100%; max-width: var(--size-read); margin: 0 auto; padding: 0 var(--s-10); }
.sty-panel {
  width: var(--size-panel); flex-shrink: 0;
  background: var(--c-card);
  border-left: 1px solid var(--c-line);
}

.sty-only-mobile  { display: none; }
.sty-only-tablet  { display: none; }

@media (max-width: 1279px) {
  .sty-sidebar     { display: none; }
  .sty-only-tablet { display: revert; }
  .sty-read        { max-width: 620px; padding: 0 var(--s-6); }
  .sty-panel       { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; box-shadow: var(--shadow-modal); }
}
@media (max-width: 767px) {
  .sty-rail        { display: none; }
  .sty-only-tablet { display: none; }
  .sty-only-mobile { display: revert; }
  .sty-only-mobile:is(.sty-btn, .sty-icon-btn, .sty-chip, .sty-fab, .sty-segmented) { display: inline-flex; }
  .sty-only-mobile.sty-search { display: flex; }   /* « revert » les rendait en ligne : icône et texte décentrés */
  .sty-app         { flex-direction: column; }
  .sty-read        { max-width: none; padding: 0 var(--s-4); }
  .sty-btn         { height: var(--size-control); }   /* 48 sur mobile */
  .sty-panel       { width: 100%; border-left: none; }
}
@media (min-width: 768px) {
  .sty-tabbar { display: none; }
  .sty-fab    { display: none; }
}
/* Le rail n'existe qu'au palier tablette : au-delà c'est la barre latérale
   complète, en deçà c'est la barre inférieure. Les trois sont rendues en
   même temps par la coquille ; c'est ici, et seulement ici, qu'on décide
   laquelle s'affiche. */
@media (min-width: 1280px) {
  .sty-rail { display: none; }
}