/* Interface mobile — feuille NON scopée, à dessein.

   Le CSS scopé de Blazor est attaché à UN composant : une règle écrite dans le fichier
   d'une page ne touche pas le balisage rendu par une autre. Les listes, la fiche et le
   formulaire partagent la même rangée et les mêmes pastilles ; les scoper aurait imposé
   de dupliquer chaque règle dans trois fichiers, et une retouche dans un seul aurait
   produit une divergence silencieuse. Tout est donc préfixé par `.mobile`, la racine du
   gabarit, pour ne rien déborder sur l'écran desktop.

   Aucune couleur littérale : les teintes viennent des jetons de theme-homelab.css, seule
   autorité sur la palette. */

/* --- Ossature ------------------------------------------------------------- */

.mobile { max-width: 46rem; margin: 0 auto; padding: 0 var(--espace); }

/* Une fois l'application ajoutee a l'ecran d'accueil, il n'y a plus de barre Safari
   au-dessus : la page demarre au bord haut de l'ecran. Selon le reglage de barre d'etat
   retenu par iOS, l'entete peut alors passer SOUS l'horloge et le niveau de batterie.
   L'ecart vaut 0 tant que le systeme n'en reclame pas, donc la regle est sans effet dans
   un navigateur ordinaire -- et juste des qu'elle sert. */
.mobile .entete-mobile {
    display: flex; align-items: center; gap: 0.5rem;
    padding: calc(0.7rem + env(safe-area-inset-top, 0px)) 0 0.9rem;
}
.mobile .entete-mobile .marque { font-size: 1.15rem; font-weight: 700; }
.mobile .entete-mobile .sous-titre { color: var(--texte-doux); font-size: 0.85rem; }
.mobile .entete-mobile .quitter { margin: 0 0 0 auto; }
.mobile .entete-mobile .bouton { padding: 0.25rem 0.6rem; font-size: 0.85rem; }

.mobile h1 { font-size: 1.3rem; margin: 0 0 0.8rem; }

/* --- Barre basse ---------------------------------------------------------- */

/* Fixe en bas : sur un telephone le pouce atteint le bas de l'ecran, pas le haut. La
   reserve de 3.5rem que la charte pose sous le body l'empeche de masquer la derniere
   ligne du contenu. */
.mobile .barre-basse {
    position: fixed; left: 0; right: 0; bottom: 0;
    display: flex;
    background: var(--fond-profond);
    border-top: 1px solid var(--bord);
    /* Sur iPhone, la barre d'accueil mange le bas de l'ecran : sans cette marge, le second
       onglet tombe dessous et devient intouchable. */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile .onglet-bas {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    padding: 0.45rem 0.5rem;
    color: var(--texte-doux); text-decoration: none; font-size: 0.75rem;
}
.mobile .onglet-bas .glyphe { font-size: 1.15rem; line-height: 1; }
/* La classe est posee par NavLink sur la route active. La couleur ne porte pas seule :
   le libelle est ecrit, et le filet superieur double la teinte. */
.mobile .onglet-bas.active { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }

/* --- Onglets de liste ------------------------------------------------------ */

/* Defilement horizontal : cinq listes ne tiennent pas de front sur un ecran de telephone,
   et les empiler sur deux rangees mangerait la moitie de la hauteur utile. */
.mobile .onglets {
    display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.6rem;
    scrollbar-width: none;
}
.mobile .onglets::-webkit-scrollbar { display: none; }
.mobile .onglet {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
    padding: 0.35rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--bord); background: var(--fond-profond);
    color: var(--texte-doux); text-decoration: none; font-size: 0.9rem;
    white-space: nowrap;
}
.mobile .onglet.actif { border-color: var(--accent); color: var(--texte); }
/* Le compte est une information, pas une decoration : zero s'affiche aussi, sinon une
   liste vide et une liste non calculee se ressemblent. */
.mobile .onglet .compte {
    font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--texte-doux);
}
.mobile .onglet.actif .compte { color: var(--accent); }

/* --- Rangees de taches ------------------------------------------------------ */

.mobile .liste { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }

.mobile .rangee {
    display: block; text-decoration: none; color: inherit;
    background: var(--fond-eleve);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 0.7rem 0.85rem;
}
.mobile .rangee:hover, .mobile .rangee:focus-visible { border-color: var(--accent); }
.mobile .rangee .intitule { display: block; font-weight: 600; }
/* Une tache cloturee reste lisible : le texte barre dit ce que la teinte seule ne dirait
   pas a qui ne la distingue pas. */
.mobile .rangee.cloturee .intitule { text-decoration: line-through; color: var(--texte-doux); }
.mobile .rangee .details {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
    margin-top: 0.35rem; font-size: 0.82rem; color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
}
.mobile .rangee .chemin { font-size: 0.78rem; color: var(--texte-doux); opacity: 0.85; }

/* --- Remonter d'un cran ----------------------------------------------------- */

/* La cible fait au moins 44 px de haut : en dessous, elle se rate au pouce, et c'est le
   seul chemin vers la tache parente quand on a ouvert la sous-tache depuis une liste. */
.mobile .retour {
    display: inline-flex; align-items: center; gap: 0.35rem;
    min-height: 44px; padding-right: 0.5rem;
    color: var(--texte-doux); text-decoration: none; font-size: 0.9rem;
}
.mobile .retour:hover, .mobile .retour:focus-visible { color: var(--accent); }
.mobile .retour .chevron { font-size: 1.2rem; line-height: 1; }
/* Le lien apporte deja sa hauteur de cible : sans ceci, le titre est repousse deux fois. */
.mobile .retour + h1 { margin-top: 0; }

/* --- Fiche ----------------------------------------------------------------- */

.mobile .fiche { display: grid; gap: var(--espace); }
.mobile .etat { grid-template-columns: max-content 1fr; }
.mobile .description { white-space: pre-wrap; margin: 0; }
.mobile .sous-titre-bloc {
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--texte-doux); margin: 0 0 0.5rem;
}
.mobile .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mobile .actions form { margin: 0; }

/* --- Formulaires ------------------------------------------------------------ */

.mobile .champ-saisie { display: block; margin-bottom: 0.9rem; }
.mobile .champ-saisie > span { display: block; color: var(--texte-doux); font-size: 0.85rem; margin-bottom: 0.25rem; }
/* Les champs natifs ne sont pas tous couverts par la charte, qui ne nomme que text/time
   et select. Sur un fond sombre, un champ oublie reste blanc -- constate a l'ecran.

   Le selecteur vise `input` sans qualifier le type, et ce n'est pas de la paresse :
   <InputText> de Blazor rend un <input> SANS attribut type. `input[type="text"]` ne le
   voit donc pas, et le champ Intitule restait blanc sur fond sombre alors que le champ
   date, lui, etait correct -- la difference etant invisible a la lecture du Razor. Les
   cases et les boutons sont exclus : ils ont leur propre rendu. */
.mobile input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.mobile textarea,
.mobile select {
    width: 100%;
    padding: 0.55rem 0.6rem;
    border-radius: calc(var(--rayon) - 4px);
    border: 1px solid var(--bord);
    background: var(--fond-profond);
    color: var(--texte);
    font: inherit;
    /* 16px minimum : en dessous, iOS zoome sur le champ a la mise au point et ne
       dezoome jamais. */
    font-size: 16px;
}
.mobile textarea { min-height: 6rem; resize: vertical; }
.mobile .validation-message { color: var(--alerte); font-size: 0.85rem; }

/* --- Vide ------------------------------------------------------------------- */

/* Une liste vide le DIT. Un ecran blanc se confond avec un chargement qui n'a pas abouti. */
.mobile .vide {
    padding: 1.5rem 1rem; text-align: center; color: var(--texte-doux);
    border: 1px dashed var(--bord); border-radius: var(--rayon);
}