/* Le téléphone (Célian, 22/09/2026 : « tout doit être utilisable, chaque onglet »). Chargée en
   dernier : elle ne réécrit que ce qui casse sous 700 px et ne touche jamais l'ordinateur.
   Disposition « A · Appli », retenue le 22/09/2026 parmi trois essayées sur iPhone : les onglets
   en bas, une carte par ligne de tableau, la fiche en plein écran avec son retour en tête.
   Mesure de départ, à 390 px : la barre de titre débordait de 72 px sur toutes les vues, les
   tableaux Devis et Commandes faisaient 1 102 et 1 182 px, la Carte s'ouvrait zoomée à 40 %. */

@media (max-width: 700px) {
  /* La barre de titre garde le nom de l'application et l'engrenage ; le lieu s'efface. */
  .sb-topbar .sb-lieu { display: none; }
  .sb-topbar .sb-fin { margin-left: auto; }
  .sb-topbar .sb-presents .ds-avatar:nth-child(n+3) { display: none; }

  /* Les onglets passent en bas, sous le pouce, comme dans une appli ; la page leur laisse la place. */
  .sb-app { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .sb-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px;
    background: var(--surface-1); border-top: 1px solid var(--border-subtle); border-left: 0;
  }
  .sb-nav .sb-vue { flex-direction: column; height: 52px; gap: 3px; padding: 4px 2px; font: var(--weight-medium) 11px/1.1 var(--font-sans); }
  .sb-nav .sb-vue-libelle { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

  /* La barre d'un outil passe à la ligne au lieu de pousser la page. */
  .sb-barre-outil { flex-wrap: wrap; padding: 10px 14px; gap: 8px 12px; }

  /* Un tableau devient une pile de cartes : une par ligne, la valeur de tête en gras, les autres
     précédées du nom de leur colonne (posé par le JS dans `data-libelle`), le chevron à droite. */
  /* Un tableau chiffré (tableau de bord, visionneuse) reste un tableau : ses colonnes se comparent
     d'une ligne à l'autre. Il défile dans son cadre, sa première colonne reste en place pour dire
     de quelle ligne on parle, et son bord droit s'estompe tant qu'il reste des colonnes à voir :
     un en-tête coupé net passait pour un débordement (Célian, 22/09/2026). Le fondu suit le
     défilement (animation liée au défilement) : au bout du tableau il disparaît, et un tableau qui
     tient dans l'écran n'a pas de défilement, donc pas de fondu. */
  .ds-table-wrap { overflow-x: auto; }
  .ds-table-wrap:not(:has(.sb-ligne-carte)) {
    --fondu: 0px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fondu)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--fondu)), transparent);
    animation: sb-fondu-cadre linear both;
    animation-timeline: scroll(self inline);
  }
  .ds-table:not(:has(.sb-ligne-carte)) :is(th, td):first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface-1);
  }
  .ds-table-wrap:has(.sb-ligne-carte) { overflow: visible; }
  .ds-table:has(.sb-ligne-carte), .ds-table:has(.sb-ligne-carte) tbody { display: block; width: 100%; }
  .ds-table:has(.sb-ligne-carte) thead { display: none; }
  .ds-table tbody tr.sb-ligne-carte {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; position: relative;
    padding: 12px 40px 12px 14px; border-bottom: 1px solid var(--border-subtle);
  }
  /* Le DS met `max-width: 0` sur les cellules (technique d'ellipse) : en carte, la tête aurait une
     largeur nulle. */
  .ds-table tbody tr.sb-ligne-carte > td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; width: auto !important; max-width: none !important; }
  .ds-table tbody tr.sb-ligne-carte > td, .ds-table tbody tr.sb-ligne-carte > td * { white-space: normal; overflow-wrap: anywhere; }
  .ds-table tbody tr.sb-ligne-carte > td[data-libelle]::before {
    content: attr(data-libelle) " · "; color: var(--text-2); font: var(--weight-regular) var(--text-xs)/1.4 var(--font-sans);
  }
  .ds-table tbody tr.sb-ligne-carte > td.sb-carte-tete {
    grid-column: 1 / -1; order: -1; font: var(--type-body-strong); color: var(--text-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ds-table tbody tr.sb-ligne-carte > td.sb-col-presence { display: none; }
  /* Le chevron : `> td:last-child` de la LIGNE, jamais de la fiche, qui a aussi un dernier td. */
  .ds-table tbody tr.sb-ligne-carte > td:last-child { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

  /* Une fiche, et le sujet choisi de la Carte, couvrent l'écran ; le retour reste en tête. */
  .sb-cmd-fiche-cellule, .sb-fiche-cellule {
    position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--surface-1);
    padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .sb-contenu--carte > .sb-panneau { position: fixed; inset: 0; z-index: 40; background: var(--surface-1); }
  .sb-retour {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; width: 100%;
    min-height: 48px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-1); font: var(--type-body-strong); color: var(--text-1); text-align: left; cursor: pointer;
  }

  /* La Carte : la liste dépliable remplace l'arbre, la page défile d'un bloc. */
  .sb-contenu--carte { flex-direction: column; height: auto; min-height: calc(100vh - var(--ds-topbar-h)); }
  /* La 3D tient entre la barre du haut et les onglets du bas : son volet se tire dans ce cadre. */
  .sb-contenu--3d { height: calc(100dvh - var(--ds-topbar-h) - 64px - env(safe-area-inset-bottom, 0px)); }
  .sb-arbre--liste { flex: none; }
  .sb-liste { list-style: none; margin: 0; padding: 8px 10px 24px; display: flex; flex-direction: column; gap: 6px; }
  .sb-liste-ligne .sb-sujet { width: 100%; height: auto; min-height: 48px; padding-block: 6px; }
  /* Le chevron plie la branche : au doigt, il lui faut sa cible de 44 px. */
  .sb-liste-ligne .sb-sujet-chevron { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; margin-right: -6px; }
  .sb-contenu--carte > .sb-panneau { flex: none; width: auto; border-left: 0; }

  /* Une carte : son titre au-dessus de ses commandes, qui passent à la ligne. */
  .ds-card__head { flex-wrap: wrap; row-gap: 8px; }
  .ds-card__titles { flex: 1 1 100%; }
  .ds-card__actions { flex-wrap: wrap; }

  /* Une fiche de devis ou de commande : une seule colonne, les champs deux par deux. */
  .sb-fiche, .sb-cmd-fiche { grid-template-columns: minmax(0, 1fr); }
  .sb-fiche-champs, .sb-cmd-fiche-champs { border-right: 0; padding: 14px; }
  .sb-cmd-fiche-cote, .sb-fiche-cote { padding: 14px; }
  .sb-cmd-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-donnees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Le pied d'une commande, fiche ou création : la suppression, puis « Modifié par » sur sa ligne,
     puis les boutons. Sur une seule ligne, Enregistrer sortait de 20 px dans la fiche et de 16 px
     dans « Nouvelle commande » (mesuré à 402 px). */
  .sb-cmd-fiche .sb-cmd-pied { padding: 12px 14px; }
  .sb-cmd-pied { flex-direction: column; align-items: stretch; gap: 12px; }
  .sb-cmd-pied .sb-cmd-fin { margin-left: 0; flex-wrap: wrap; justify-content: flex-end; }
  .sb-cmd-pied .sb-cmd-fin > [data-guide="par"] { flex: 1 1 100%; }

  /* Le tableau de bord : le bandeau sur deux colonnes, les chiffres à leur taille réelle. */
  .tb-contenu { padding-inline: 14px; }
  .tb-bandeau { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-mesure { border-left: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); padding: 12px 14px; }
  .tb-mesure:nth-child(3n + 1) { border-left: 1px solid var(--border-subtle); }
  .tb-mesure:nth-child(2n + 1) { border-left: 0; }
  .tb-mesure:nth-child(-n + 2) { border-top: 0; }
  .tb-mesure-valeur { font-size: 21px; white-space: normal; }
  .tb-tete .tb-fin { margin-left: 0; }

  /* Paramètres : un ajout et un accès passent à la ligne ; une personne sur deux lignes, son nom
     puis ses gestes. */
  .sb-ajout, .sb-acces { flex-wrap: wrap; }
  .sb-ajout > div:first-child { flex-basis: 100%; }
  .sb-acces > div:first-child { flex: 1 1 100%; }
  .sb-acces-ligne { grid-template-columns: repeat(2, auto) minmax(0, 1fr); gap: 8px 12px; }
  .sb-acces-ligne > :first-child { grid-column: 1 / -1; }

  /* Le mode d'emploi : le sommaire au-dessus du texte. */
  .sb-tuto-corps { grid-template-columns: minmax(0, 1fr); }
}

/* Le retour d'une fiche n'existe qu'au téléphone : à l'ordinateur, la fiche se déplie sous sa ligne. */
@media (min-width: 701px) {
  .sb-retour { display: none; }
}

/* Au doigt, toute cible fait 44 px (arbitrage de Célian du 22/09/2026), comme les contrôles du design
   system : le « + » d'un titre, une valeur à copier, un lien de document, le sommaire du mode d'emploi. */
@media (pointer: coarse) {
  .sb-titre-plus .ds-btn { --_h: 44px; height: 44px; width: 44px; }
  .sb-copiable { min-height: 44px; }
  .sb-entree-liens .sb-lien { min-height: 44px; }
  .sb-tuto-sommaire button { min-height: 44px; }
}

/* Le fondu du bord droit d'un tableau qui défile : 32 px au départ, rien une fois au bout. */
@property --fondu { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes sb-fondu-cadre { from { --fondu: 32px; } 99% { --fondu: 32px; } to { --fondu: 0px; } }