/* TRANSITManager — poste terrain : le rendu écran
   =================================================================
   Déposé le 07/09/2026.

   LE DÉFAUT QU'ELLE CORRIGE. Le poste de saisie a été écrit pour le pouce, et
   seulement pour lui : `.cy-tabbar` est en `position:fixed; bottom:0` sans la
   moindre media query. À 1400 pixels, on obtenait donc une colonne de 720 px
   perdue au milieu de l'écran et une barre d'application mobile collée en bas
   — la mise en page disait « téléphone mal posé » alors que le contenu, lui,
   était bon.

   POURQUOI UNE BASCULE MANUELLE A ÉTÉ ÉCARTÉE. Demander à l'utilisateur de
   choisir entre « écran » et « téléphone », c'est lui faire prendre une
   décision que le navigateur prend seul, mieux, et sans qu'il ait à s'en
   souvenir. Une bascule laissée sur la mauvaise position devient un défaut de
   plus, et il se signale comme une panne. Le point de rupture décide.

   POURQUOI UN FICHIER À PART PLUTÔT QU'UN AJOUT DANS styles.css. `styles.css`
   fait 100 Ko et sert LES DEUX postes — DAFManager compris. Une règle mal
   fermée y casserait la trésorerie d'un client en production. Ici, le fichier
   est neuf, il n'écrase rien, il n'est chargé que par `cycle.html` et
   `demo/cycle.php`, et le retour arrière consiste à retirer une ligne. C'est
   la règle des dépôts : du plus inoffensif au plus critique.

   CE QU'ELLE NE TOUCHE PAS. Aucune couleur, aucune police, aucune taille de
   texte, aucun composant. Uniquement la mise en page au-delà de 900 px. En
   dessous, pas une seule de ces règles ne s'applique et le poste reste
   exactement ce qu'il était sur un téléphone.
   ================================================================= */

@media (min-width: 900px) {

  /* --- La barre de navigation remonte en haut ---------------------
     Elle reste la même barre, les mêmes onglets, les mêmes compteurs :
     seule sa place change. Sur un écran, une barre collée en bas est
     hors du champ de lecture ; en haut, elle se lit avec l'en-tête. */
  .cy-tabbar {
    position: sticky;
    top: 0;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 20px rgba(106, 69, 38, .10);
    padding-bottom: 0;
    justify-content: center;
    gap: 4px;
    padding-inline: 24px;
  }

  /* L'onglet cesse de s'étirer sur un quart de l'écran : à 1400 px,
     quatre boutons de 350 px de large ne se lisent plus comme une
     navigation, ils se lisent comme quatre pavés. */
  .cy-tab {
    flex: 0 1 auto;
    min-width: 132px;
    flex-direction: row;
    gap: 8px;
    min-height: 52px;
    padding-inline: 18px;
    font-size: 13.5px;
    border-top: 0;
    border-bottom: 3px solid transparent;
  }
  .cy-tab.is-active {
    border-top-color: transparent;
    border-bottom-color: var(--or);
  }

  /* Le compteur d'anomalies était posé au-dessus de l'icône, pour une
     barre lue de bas en haut. En ligne, il se met à droite du mot. */
  .cy-tab-n {
    position: static;
    transform: none;
    margin-left: 2px;
  }

  /* --- Le contenu respire ----------------------------------------
     720 px est une largeur de lecture, pas une largeur de travail. Le
     point de suivi et la liste des affaires portent des tableaux à
     sept colonnes qui défilaient horizontalement sans raison. */
  .cy-ecran { max-width: 1080px; }

  /* La réserve du bas ne sert plus à rien : la barre n'est plus là. */
  .cy-main { padding: 26px 28px 40px; }

  /* --- L'en-tête tient sur la largeur ----------------------------- */
  .cy-entete { padding-inline: 28px; }
}

/* Au-delà de 1280 px, le tableau du point mérite toute la place : c'est
   l'écran qui remplace leur classeur, et un état qu'on lit en défilant
   n'est pas un état qu'on lit. */
@media (min-width: 1280px) {
  .cy-ecran { max-width: 1240px; }
}