/* -------------------------------------------------------------- composants
   Le vocabulaire visuel de Murs, posé sur les jetons de Terrain. Aucune
   valeur brute ici : tout passe par var(--...), c'est ce qui fait tenir le
   thème sombre sans rouvrir le fichier.

   Repris de la maquette validée par Otman le 7 septembre 2026.            */

.app { min-height: 100dvh; background: var(--fond-2); display: flex; flex-direction: column; }
.ecran { flex: 1; display: flex; flex-direction: column; }

.attente, .panne {
    min-height: 60dvh; display: grid; place-content: center; gap: 14px;
    text-align: center; color: var(--texte-2); font: var(--t-corps); padding: 24px;
}

/* ------------------------------------------------------------------ entête */

.entete { padding: 22px 20px 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.entete h2 { margin: 0; font: var(--t-grand-titre); letter-spacing: -.01em; }
.entete .jour { font: var(--t-secondaire); color: var(--texte-2); }

.contenu { padding: 0 14px 32px; display: flex; flex-direction: column; gap: 18px; flex: 1; }

/* ------------------------------------------------------- le geste principal */

.principal {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 15px 18px; border-radius: 14px; border: 0;
    background: var(--fort); color: var(--sur-fort); font: var(--t-corps-fort); cursor: pointer;
}
.principal svg { width: 22px; height: 22px; }
.principal:active { opacity: .85; }

.vide { font: var(--t-corps); color: var(--texte-2); text-align: center; padding: 18px 10px; margin: 0; }

/* ------------------------------------------------------ groupes et lignes */

.groupe h3 {
    display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 0 6px 8px;
    font: var(--t-legende); letter-spacing: var(--interlettre-legende);
    text-transform: uppercase; color: var(--texte-2);
}
.groupe h3 .n { font: var(--t-chiffre-2); color: var(--texte); letter-spacing: 0; }
.groupe h3 .n.rouge { color: var(--danger); }

.liste { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; }

.ligne {
    display: grid; grid-template-columns: 4px 1fr auto; gap: 0 12px;
    align-items: center; padding: 12px 14px 12px 0; border-top: 1px solid var(--trait);
}
.ligne:first-child { border-top: 0; }
.ligne .barre { align-self: stretch; border-radius: 0 3px 3px 0; background: transparent; }
.ligne.retard .barre { background: var(--danger); }
/* Un mur sans date de relance n'a pas de retard à afficher, mais il est
   invisible dans le système : il porte l'ambre pour qu'on le voie quand même. */
.ligne.sansdate .barre { background: var(--alerte); }
.ligne.sansdate .quoi { color: var(--alerte); }

.ligne .corps {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit;
    min-width: 0;
}
.ligne .qui { font: var(--t-corps-fort); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ligne .mur { font: var(--t-secondaire); color: var(--texte-2); }
/* Le nom du suiveur, visible du patron seulement. Une pastille et non du
   texte : elle se retrouve d'une ligne à l'autre sans être lue. */
.ligne .suiveur {
    font: var(--t-legende); letter-spacing: var(--interlettre-legende);
    text-transform: uppercase; color: var(--texte-2);
    background: var(--surface-2); padding: 2px 7px; border-radius: 7px;
}
.ligne .suiveur.sans { background: var(--danger-doux); color: var(--danger); }
.ligne .quoi { font: var(--t-secondaire); color: var(--texte-2); }
.ligne.retard .quoi { color: var(--danger); }
.ligne .prix { font: var(--t-corps-fort); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne .actions { grid-column: 2 / 4; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 8px; }

/* --------------------------------------------------------------- boutons */

.bouton {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px;
    border-radius: 10px; border: 0; background: var(--surface-2); color: var(--texte);
    font: var(--t-corps-fort); font-size: 15px; cursor: pointer;
}
.bouton.ok { background: var(--ok-doux); color: var(--ok); }
.bouton.accent { background: var(--accent); color: var(--sur-accent); }
.bouton:active { background: var(--surface-3); }

.chip {
    padding: 7px 12px; border-radius: 9px; border: 0;
    background: var(--surface-2); color: var(--texte-2);
    font: var(--t-corps-fort); font-size: 15px; cursor: pointer;
}
.chip.on { background: var(--texte); color: var(--fond); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.raisons { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.raisons .l { font: var(--t-secondaire); color: var(--texte-2); }

/* ------------------------------------------------------- le compte du jour */

.compte {
    background: var(--surface); border: 1px solid var(--trait); border-radius: 16px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.compte .titre {
    font: var(--t-legende); letter-spacing: var(--interlettre-legende);
    text-transform: uppercase; color: var(--texte-2);
}
.compte .chiffres { display: flex; gap: 20px; flex-wrap: wrap; }
.compte .c { display: flex; flex-direction: column; }
.compte .c b { font: var(--t-chiffre-2); }
.compte .c span { font: var(--t-secondaire); color: var(--texte-2); }

/* ------------------------------------------------------------- la fiche */

.fiche-tete { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.retour {
    display: inline-flex; align-items: center; gap: 4px; background: none; border: 0;
    padding: 0; font: var(--t-corps-fort); font-size: 15px; color: var(--accent-texte); cursor: pointer;
}
.retour svg { width: 18px; height: 18px; }
.fiche-tete h2 { margin: 0; font: var(--t-titre); font-size: 26px; line-height: 30px; text-wrap: balance; }
.fiche-tete .sous { font: var(--t-secondaire); color: var(--texte-2); }

.tel {
    display: inline-flex; align-items: center; gap: 8px; width: max-content;
    background: var(--ok-doux); color: var(--ok); padding: 10px 14px; border-radius: 12px;
    font: var(--t-corps-fort); font-size: 15px; text-decoration: none;
}
.tel svg { width: 18px; height: 18px; }

.frise {
    display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--trait); border-radius: 16px;
}
.frise .segs { display: flex; gap: 4px; }
.frise .segs i { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-3); }
.frise .segs i.fait { background: var(--texte); }
.frise .segs i.ici { background: var(--accent); }
.frise .ou { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.frise .ou b { font: var(--t-corps-fort); }
.frise .ou span { font: var(--t-secondaire); color: var(--texte-2); }

.prochaine {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--surface-2); border-radius: 16px;
}
.prochaine.retard { background: var(--alerte-doux); }
.prochaine .pct {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    background: var(--texte-2); color: var(--fond); display: grid; place-items: center;
}
.prochaine.retard .pct { background: var(--alerte); color: var(--sur-alerte); }
.prochaine .pct svg { width: 20px; height: 20px; }
.prochaine b { font: var(--t-corps-fort); }

.gestes { display: flex; gap: 8px; flex-wrap: wrap; }
.gestes .bouton { flex: 1; justify-content: center; padding: 13px 12px; border-radius: 12px; }

.message {
    background: var(--surface); border: 1px solid var(--trait); border-radius: 16px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.message .l {
    font: var(--t-legende); letter-spacing: var(--interlettre-legende);
    text-transform: uppercase; color: var(--texte-2);
}
.message p {
    margin: 0; font: var(--t-secondaire); white-space: pre-line;
    background: var(--fond-2); padding: 12px 14px; border-radius: 12px;
    border-left: 3px solid var(--ok);
}

.tarif {
    background: var(--surface); border: 1px solid var(--trait); border-radius: 16px;
    padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
}
.tarif .l { font: var(--t-secondaire); color: var(--texte-2); }
.tarif .v { font: var(--t-chiffre-2); font-variant-numeric: tabular-nums; }
.tarif .calc { grid-column: 1 / 3; font: var(--t-secondaire); font-size: 13px; color: var(--texte-3); }

/* --------------------------------------------------------------- champs */

.champs { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; }
.champ { padding: 12px 16px; border-top: 1px solid var(--trait); display: flex; flex-direction: column; gap: 8px; }
.champ:first-child { border-top: 0; }
.champ .l { font: var(--t-secondaire); color: var(--texte-2); }

.champ input, .feuille input {
    width: 100%; padding: 11px 13px; border-radius: 10px;
    border: 1px solid var(--trait-fort); background: var(--fond);
    color: var(--texte); font: var(--t-corps);
}
.champ input:focus-visible, .feuille input:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}

.mesures { display: flex; align-items: center; gap: 8px; }
.mesures input { width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.mesures span { font: var(--t-corps); color: var(--texte-2); }

.perdu { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 4px; }
.perdu span { font: var(--t-secondaire); color: var(--texte-2); }

.journal { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 4px 16px; }
.journal .e {
    display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 10px 0;
    border-top: 1px solid var(--trait); font: var(--t-secondaire);
}
.journal .e:first-child { border-top: 0; }
.journal .e time { color: var(--texte-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- la feuille neuve */

.voile {
    position: fixed; inset: 0; background: var(--voile); z-index: 20;
    display: flex; align-items: flex-end; justify-content: center;
}
.feuille {
    background: var(--fond); width: 100%; max-width: 520px;
    border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 14px;
    max-height: 92dvh; overflow: auto;
}
.feuille h3 { margin: 0; font: var(--t-titre); }
.feuille label { display: flex; flex-direction: column; gap: 6px; }
.feuille label span { font: var(--t-secondaire); color: var(--texte-2); }
.feuille .pied { display: flex; gap: 8px; }
.feuille .pied .bouton { flex: 0 0 auto; }
.feuille .pied .principal { flex: 1; }
.erreur { margin: 0; font: var(--t-secondaire); color: var(--danger); }

/* ------------------------------------------------------------ confirmation */

.toast {
    position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(16px);
    background: var(--fort); color: var(--sur-fort); padding: 12px 18px; border-radius: 12px;
    font: var(--t-corps-fort); font-size: 15px; opacity: 0; pointer-events: none;
    transition: .22s; max-width: calc(100vw - 32px); text-align: center; z-index: 30;
}
.toast.vu { opacity: 1; transform: translateX(-50%); }

.hors-ligne {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    background: var(--alerte); color: var(--sur-alerte);
    font: var(--t-secondaire); text-align: center; padding: 6px 12px;
}

@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* Au-delà du téléphone, l'app reste une colonne : c'est un outil de terrain,
   pas un tableau de bord, et l'étirer sur 1400 px n'ajoute aucune information. */
@media (min-width: 700px) {
    .app { align-items: center; }
    .ecran { width: 100%; max-width: 680px; }
}

/* ------------------------------------------------- la barre du bas, patron */

.onglets {
    position: sticky; bottom: 0; display: flex; gap: 4px;
    border-top: 1px solid var(--trait); background: var(--surface);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.onglets button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 0; border: 0; background: none; cursor: pointer;
    font: var(--t-legende); letter-spacing: .02em; color: var(--texte-3);
}
.onglets button[aria-current="page"] { color: var(--texte); }
.onglets svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------ la recherche */

.recherche {
    display: flex; align-items: center; gap: 10px; color: var(--texte-3);
    background: var(--surface); border: 1px solid var(--trait-fort);
    border-radius: 12px; padding: 4px 14px;
}
.recherche svg { width: 18px; height: 18px; flex: none; }
.recherche input {
    flex: 1; border: 0; background: none; color: var(--texte);
    font: var(--t-corps); padding: 9px 0;
}
.recherche input:focus-visible { outline: none; }
.recherche:focus-within { border-color: var(--accent); }

/* Une ligne qui n'est qu'un lien, sans boutons : tout le bloc est cliquable. */
.ligne.plate {
    border: 0; border-top: 1px solid var(--trait); background: none;
    width: 100%; text-align: left; cursor: pointer; color: inherit;
    grid-template-columns: 1fr auto; padding: 12px 14px;
}
.ligne.plate:first-child { border-top: 0; }
.ligne.plate:active { background: var(--surface-2); }
.ligne.plate .segs { display: flex; gap: 3px; width: 92px; margin-top: 6px; }
.ligne.plate .segs i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-3); }
.ligne.plate .segs i.fait { background: var(--texte-2); }
.ligne.plate .segs i.ici { background: var(--accent); }
.ligne .chev { width: 20px; height: 20px; color: var(--texte-3); flex: none; }
.ligne.ferme { opacity: .55; }

.suiveur.alerte { background: var(--alerte-doux); color: var(--alerte); }

/* -------------------------------------------------------- la supervision */

.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: 16px; padding: 14px 16px; }
.tuile .l { font: var(--t-secondaire); color: var(--texte-2); }
.tuile .v { font: var(--t-chiffre); font-size: 28px; line-height: 32px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tuile.rouge .v { color: var(--danger); }

.alerte-bloc {
    background: var(--alerte-doux); color: var(--alerte); border-radius: 16px;
    padding: 14px 16px; font: var(--t-secondaire);
    display: flex; flex-direction: column; gap: 6px;
}

.barres {
    background: var(--surface); border: 1px solid var(--trait); border-radius: 16px;
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.barres h4 {
    margin: 0; font: var(--t-legende); letter-spacing: var(--interlettre-legende);
    text-transform: uppercase; color: var(--texte-2);
}
.barre-l { display: grid; grid-template-columns: minmax(0, 1fr) 1.2fr 42px; gap: 10px; align-items: center; font: var(--t-secondaire); }
.barre-l .t { height: 10px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.barre-l .t i { display: block; height: 100%; background: var(--texte-2); border-radius: 5px; }
.barre-l .t i.a { background: var(--accent); }
.barre-l .n { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }

.note { margin: 0; font: var(--t-secondaire); color: var(--texte-2); }
.note b { color: var(--texte); }

@media (min-width: 700px) {
    .tuiles { grid-template-columns: repeat(4, 1fr); }
}