/* ============================================================
   Rapports de chantier — feuille de style commune
   Fond clair, couleur de l'entreprise, texte noir. La couleur
   (--accent) est donnée par entreprise/entreprise.css ; le rouge
   reste réservé aux erreurs, aux suppressions et à l'état « ouvert ».
   Pensé pour une lecture à bout de bras, avec des gants,
   et en plein soleil sur un chantier.

   Les noms des variables datent de la version sombre. Ils sont
   conservés pour ne rien casser ailleurs : --noir désigne le
   fond, --blanc le texte.
   ============================================================ */

:root {
    --noir: #FFFFFF;          /* fond de la page */
    --panneau: #F4F4F2;       /* cartes et encadrés */
    --creux: #FFFFFF;         /* champs de saisie */
    --trait: #D7D7D2;         /* traits et bordures */
    --rouge: #CC0000;         /* erreurs, suppressions, rapport ouvert */
    --accent: #24638F;        /* couleur de l'entreprise (entreprise/entreprise.css) */
    --accent-pale: #E8F0F6;   /* fond léger dans la couleur de l'entreprise */
    --blanc: #131313;         /* texte principal */
    --gris: #6B6B70;          /* texte secondaire */

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;

    --r: 12px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--noir);
    color: var(--blanc);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.45;
    padding-bottom: env(safe-area-inset-bottom);
    overscroll-behavior-y: contain;
}

/* ---------- Barre supérieure ---------- */

.barre {
    position: sticky;
    top: 0;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top));

    background: var(--noir);
    border-bottom: 1px solid var(--trait);
}

/* Logo de l'entreprise : souvent plus large que haut. */
.marque {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    flex: none;
}

.titre {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.titre-app {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.titre-vue {
    font-size: 13px;
    color: var(--gris);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.retour {
    flex: none;
    width: 44px;
    height: 44px;
    font-size: 24px;
    line-height: 1;

    color: var(--blanc);
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: 10px;
    cursor: pointer;
}

.retour:active {
    background: var(--accent);
    border-color: var(--accent);
}

/* ---------- Conteneur ---------- */

.vue {
    max-width: 620px;
    margin: 0 auto;
    padding: 18px 16px 8px;
}

.intro {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--gris);
}

.section-titre {
    margin: 26px 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gris);
}

/* ---------- Accueil ---------- */

.grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.tuile {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;

    min-height: 104px;
    padding: 14px;

    text-align: left;
    color: var(--blanc);
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);

    font-family: inherit;
    font-size: 17px;
    cursor: pointer;
}

.tuile:active {
    background: #E8E8E4;
}

.tuile-sous {
    font-size: 12px;
    font-family: var(--mono);
    color: var(--gris);
}

.tuile-nom {
    font-weight: 600;
}

.rapide {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.puce {
    padding: 10px 14px;
    color: var(--blanc);
    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.puce:active {
    border-color: var(--accent);
}

/* ---------- Outil ---------- */

.outil {
    margin-bottom: 16px;
    padding: 14px;
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: var(--r);
}

.outil-nom {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.outil-note {
    margin: 2px 0 12px;
    font-size: 13px;
    color: var(--gris);
}

/* Écran de mesure — l'élément signature de l'application */

.ecran {
    padding: 12px 14px;
    background: var(--creux);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
}

.ecran-libelle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gris);
}

.ecran-valeur {
    display: flex;
    align-items: baseline;
    gap: 8px;

    font-family: var(--mono);
    font-size: 34px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    word-break: break-all;
}

.ecran-unite {
    font-size: 16px;
    font-weight: 400;
    color: var(--gris);
}

.ecran.vide .ecran-valeur {
    color: #B4B4B0;
}

.secondaires {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.secondaire {
    padding: 6px 10px;
    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: 8px;
    font-size: 13px;
}

.secondaire b {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.secondaire span {
    color: var(--gris);
}

/* ---------- Champs ---------- */

.champs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.champ.large {
    grid-column: 1 / -1;
}

.champ label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gris);
}

.boite {
    display: flex;
    align-items: center;
    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: 10px;
}

.boite:focus-within {
    border-color: var(--accent);
}

.champ input,
.champ select {
    width: 100%;
    min-width: 0;
    padding: 12px;

    color: var(--blanc);
    background: transparent;
    border: none;

    font-family: var(--mono);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

.champ select {
    font-family: var(--sans);
    font-size: 16px;
    appearance: none;
    cursor: pointer;
}

.champ option {
    color: var(--blanc);
    background: var(--panneau);
}

.champ input:focus,
.champ select:focus {
    outline: none;
}

.unite {
    padding: 0 12px;
    color: var(--gris);
    font-size: 14px;
    white-space: nowrap;
}

.raz {
    display: block;
    width: 100%;
    margin: 4px 0 8px;
    padding: 14px;

    color: var(--gris);
    background: transparent;
    border: 1px solid var(--trait);
    border-radius: 10px;

    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.raz:active {
    color: var(--blanc);
    border-color: var(--accent);
}

/* ---------- Pied de page ---------- */

.pied-droits {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.02em;
}

/* ---------- Listes et fiches ---------- */

.barre-liste {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.barre-liste .boite {
    flex: 1;
}

.barre-liste input {
    width: 100%;
    padding: 12px;
    color: var(--blanc);
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 16px;
}

.barre-liste input:focus {
    outline: none;
}

.fiches {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fiche {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 3px;

    width: 100%;
    padding: 14px;

    text-align: left;
    color: var(--blanc);
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);

    font-family: inherit;
    cursor: pointer;
}

.fiche:active {
    background: #E8E8E4;
}

.fiche-titre {
    font-size: 17px;
    font-weight: 600;
}

.fiche-machine {
    font-size: 12.5px;
    color: #55555A;
}

.fiche-detail {
    font-size: 13px;
    color: var(--gris);
}

.vide {
    padding: 28px 14px;
    text-align: center;
    color: var(--gris);
    font-size: 15px;
}

.champ textarea {
    width: 100%;
    padding: 12px;
    color: var(--blanc);
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
}

.champ textarea:focus {
    outline: none;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 8px;
}

.principal,
.secondaire,
.danger {
    flex: 1;
    min-width: 130px;
    padding: 14px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}

.principal {
    color: var(--noir);
    background: var(--accent);
    border: 1px solid var(--accent);
    font-weight: 600;
}

.secondaire {
    color: var(--blanc);
    background: var(--creux);
    border: 1px solid var(--trait);
}

.danger {
    color: var(--rouge);
    background: transparent;
    border: 1px solid var(--rouge);
}

.erreur {
    margin: 10px 0 0;
    padding: 10px 12px;
    color: var(--blanc);
    background: rgba(238, 0, 0, 0.14);
    border-left: 3px solid var(--rouge);
    border-radius: 8px;
    font-size: 14px;
}

.erreur[hidden] {
    display: none;
}

/* ---------- Accessibilité ---------- */

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

@media (max-width: 400px) {
    .barre {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .marque {
        height: 34px;
        max-width: 100px;
    }

}

@media (max-width: 360px) {
    .champs {
        grid-template-columns: 1fr;
    }
}


/* ---------- Rapports ---------- */

.fiche-haut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.numero {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent);
}

.numero.grand {
    font-size: 26px;
}

.etat {
    padding: 3px 9px;
    border: 1px solid var(--trait);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
    white-space: nowrap;
}

.etat-termine {
    color: var(--noir);
    background: #D97706;
    border-color: #D97706;
}

.etat-cloture {
    color: var(--noir);
    background: var(--gris);
    border-color: var(--gris);
}

.etat-annule {
    color: var(--rouge);
    border-color: var(--rouge);
}

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 16px;
    padding: 14px;

    background: var(--creux);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
}

.info {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: 10px;
    color: var(--gris);
    font-size: 14px;
}

.lignes {
    margin-top: 12px;
}

.pleine {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.champ input[disabled],
.champ textarea[disabled],
.champ select[disabled] {
    color: var(--gris);
    -webkit-text-fill-color: var(--gris);
    opacity: 1;
}


/* ---------- Calendrier ---------- */

.cal {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: var(--r);
}

.cal-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cal-mois {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.cal-fleche {
    width: 40px;
    height: 40px;

    color: var(--blanc);
    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: 10px;

    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cal-fleche:active {
    border-color: var(--accent);
}

.cal-grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.cal-jour-nom {
    padding-bottom: 4px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gris);
}

.cal-vide {
    aspect-ratio: 1 / 1;
}

.cal-case {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;

    aspect-ratio: 1 / 1;
    padding: 0;

    color: var(--blanc);
    background: var(--creux);
    border: 1px solid transparent;
    border-radius: 8px;

    font-family: inherit;
    cursor: pointer;
}

.cal-chiffre {
    font-family: var(--mono);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.cal-heures {
    font-size: 9px;
    line-height: 1;
    color: var(--gris);
}

/* Un jour saisi porte un liseré de couleur : le mois se lit d'un coup d'œil. */
.cal-case.rempli {
    border-color: var(--accent);
}

.cal-case.today .cal-chiffre {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cal-case.choisi {
    color: var(--noir);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
}

.cal-case.choisi .cal-heures {
    color: var(--noir);
}


/* ---------- Création rapide ---------- */

.ligne-champ {
    display: flex;
    gap: 8px;
}

.ligne-champ .boite {
    flex: 1;
    min-width: 0;
}

.plus {
    flex: none;
    width: 48px;

    color: var(--noir);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 10px;

    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.plus:active {
    opacity: 0.8;
}


/* ---------- Photos ---------- */

.vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.vignette {
    display: block;
    padding: 0;
    overflow: hidden;

    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: 10px;

    cursor: pointer;
}

.vignette img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.photo-pleine {
    margin-bottom: 16px;
    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    overflow: hidden;
}

.photo-pleine img {
    display: block;
    width: 100%;
    height: auto;
}

.vide.petit {
    padding: 14px;
    text-align: left;
    font-size: 14px;
}


/* ---------- Signatures ---------- */

.signatures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.signature-case {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 12px;
    text-align: left;

    color: var(--blanc);
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);

    font-family: inherit;
    cursor: pointer;
}

.signature-case[disabled] {
    cursor: default;
    opacity: 0.75;
}

.signature-titre {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
}

.signature-case img {
    display: block;
    width: 100%;
    height: 70px;
    object-fit: contain;

    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
}

.signature-vide {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 70px;
    border: 1px dashed var(--trait);
    border-radius: 6px;

    color: var(--gris);
    font-size: 13px;
}

.signature-nom {
    font-size: 14px;
    font-weight: 600;
}

/* Le canevas est blanc : on signe comme sur du papier. */
.toile {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 4;

    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--trait);
    border-radius: var(--r);

    touch-action: none;
    cursor: crosshair;
}


/* ---------- Numéro modifiable et case à cocher ---------- */

.numero-champ {
    min-width: 0;
    padding: 0;

    color: var(--accent);
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--trait);

    font-family: var(--mono);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.numero-champ:focus {
    outline: none;
    border-bottom-color: var(--accent);
}

.bascule {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-top: 10px;
    padding: 12px 14px;

    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: var(--r);

    cursor: pointer;
}

.bascule input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--accent);
}

.bascule span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bascule b {
    font-size: 15px;
    font-weight: 600;
}

.bascule em {
    color: var(--gris);
    font-size: 13px;
    font-style: normal;
}


/* ---------- Liste de comptes ---------- */

.fiche.sans-clic {
    cursor: default;
}


/* ---------- Pastille d'état ---------- */

.pastille {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;

    border-radius: 50%;
    background: var(--gris);
    vertical-align: baseline;
}

.pastille.grosse {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    flex: none;
}

/* Rouge clignotant : le rapport est encore ouvert. */
.p-ouvert {
    background: var(--rouge);
    animation: battement 1.4s ease-in-out infinite;
}

/* Orange fixe : la réparation est finie, la facturation peut suivre. */
.p-termine {
    background: #D97706;
    animation: none;
}

/* Vert fixe : le rapport est clôturé, il n'attend plus rien. */
.p-cloture {
    background: #16A34A;
    animation: none;
}

.p-annule {
    background: var(--gris);
    animation: none;
}

@keyframes battement {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* Un clignotement permanent fatigue : on le coupe si le téléphone
   demande de limiter les animations. */
@media (prefers-reduced-motion: reduce) {
    .p-ouvert {
        animation: none;
    }
}

.entete {
    align-items: center;
}


/* ---------- Bouton d'action à côté d'un champ ---------- */

.plus.large-plus {
    width: auto;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 600;
}


/* ---------- Vue d'ensemble du déroulement ---------- */

.deroulement {
    margin-bottom: 8px;
    padding: 4px 14px 10px;

    background: var(--panneau);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
}

.jour-bloc {
    padding: 10px 0;
    border-bottom: 1px solid var(--trait);
}

.jour-bloc:last-child {
    border-bottom: none;
}

.jour-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.jour-date {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
}

.jour-qui {
    font-size: 13px;
    font-weight: 600;
}

.jour-heures {
    font-size: 12px;
    color: var(--gris);
}

.jour-puces {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.5;
}

.jour-puces li {
    margin-bottom: 2px;
}

.fiche-objet {
    font-size: 13px;
    font-style: italic;
    color: var(--gris);
}


/* ---------- Case « afficher le mot de passe » ---------- */

.afficher {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 5px;
    font-size: 12px;
    color: var(--gris);
    cursor: pointer;
}

.afficher input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent);
}


/* ---------- Bouton de retrait dans le registre ---------- */

.plus.danger-plus {
    color: var(--rouge);
    background: transparent;
    border-color: var(--rouge);
}

.ajout-tech {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--trait);
}


/* ---------- Écran de connexion ---------- */

.connexion {
    max-width: 340px;
    margin: 40px auto 0;
    text-align: center;
}

.connexion-logo {
    width: 72px;
    height: 72px;
    border-radius: 10px;
}

.connexion-sous {
    margin: 16px 0 24px;
    color: var(--gris);
    font-size: 15px;
}

.connexion .champ label,
.connexion .erreur {
    text-align: left;
}

.connexion .principal.pleine {
    margin-top: 16px;
}

.connexion-signature {
    margin: 28px 0 0;
    color: var(--gris);
    font-size: 11px;
    letter-spacing: 0.04em;
}


/* ---------- Version 6.1 ---------- */

/* Un élément masqué l'est toujours, même s'il porte une classe qui
   fixe son affichage (ligne de champ, fiche…). */
[hidden] {
    display: none !important;
}

/* Textes sur plusieurs lignes (bilans de synchronisation). */
.texte-long {
    white-space: pre-line;
}

/* État de la synchronisation, sur l'accueil. */
.etat-synchro {
    display: flex;
    flex-direction: column;
    gap: 6px;

    width: 100%;
    margin: 0 0 16px;
    padding: 10px 14px;

    text-align: left;
    color: var(--gris);
    background: var(--creux);
    border: 1px solid var(--trait);
    border-radius: 10px;

    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.etat-synchro.alerte {
    border-left: 3px solid var(--rouge);
}

.etat-synchro-alerte {
    color: var(--blanc);
    font-size: 14px;
}

/* Boutons d'un compte, sous son nom. */
.compte-actions,
.compte-mdp {
    margin-top: 8px;
}

.compte-actions .plus,
.compte-mdp .plus {
    min-height: 44px;
}

/* Champ du nouveau mot de passe : même aspect que les autres champs. */
.compte-mdp input {
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    color: var(--blanc);
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--mono);
    font-size: 16px;
}


/* ============================================================
   Chronomètre
   ============================================================ */

/* Bandeau en haut de chaque écran tant qu'un chrono tourne. */
.bandeau-chrono {
    position: sticky;
    top: calc(61px + env(safe-area-inset-top));
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: #FFFFFF;
    background: var(--accent);
    border: 0;
    cursor: pointer;
}

.bandeau-chrono.en-pause {
    color: var(--blanc);
    background: var(--accent-pale);
}

.bandeau-chrono.oubli {
    background: var(--rouge);
    color: #FFFFFF;
}

/* Point rouge qui clignote : quelque chose tourne en arrière-plan. */
.bandeau-point {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FF3B30;
    box-shadow: 0 0 0 2px #FFFFFF;
    animation: clignote 1.2s ease-in-out infinite;
}

.bandeau-chrono.en-pause .bandeau-point {
    animation: none;
    background: var(--gris);
}

@keyframes clignote {
    50% { opacity: 0.15; }
}

@media (prefers-reduced-motion: reduce) {
    .bandeau-point { animation: none; }
}

/* Bloc du chrono dans un rapport */
.chrono {
    margin: 14px 0 6px;
    padding: 14px;
    background: var(--panneau);
    border-left: 3px solid var(--accent);
    border-radius: var(--r);
}

.chrono-etat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 12px;
    font-size: 16px;
}

.chrono-total {
    color: var(--gris);
    font-size: 14px;
}

.chrono-total small {
    font-size: 13px;
}

.chrono-boutons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.chrono-bouton {
    min-height: 58px;
    padding: 10px;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    background: #FFFFFF;
    border: 2px solid var(--accent);
    border-radius: var(--r);
    cursor: pointer;
}

.chrono-bouton.actif {
    color: #FFFFFF;
    background: var(--accent);
}

.chrono-bouton.secondaire-chrono {
    color: var(--blanc);
    border-color: var(--trait);
}

.chrono-bouton.fin-chrono {
    color: var(--rouge);
    border-color: var(--rouge);
}

.chrono-bouton:disabled {
    opacity: 0.5;
}

.chrono .info {
    margin: 0 0 10px;
}

@media (max-width: 400px) {
    .bandeau-chrono {
        top: calc(55px + env(safe-area-inset-top));
    }
}

/* Lignes à copier telles quelles (installer.php) */
.outil-code {
    font-family: var(--mono);
    font-size: 0.85rem;
    background: var(--panneau);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}


/* ---------- Employés sur le chantier (équipe, 1.0.12) ---------- */

.equipe-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.equipier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;

    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent-pale, transparent);
    font-size: 14px;
}

.retirer-equipier {
    padding: 0 4px;
    border: none;
    background: none;
    color: var(--rouge);
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}


/* ---------- Travaux réalisés et fournitures (listes de l'entreprise, 1.0.12) ---------- */

.titre-champ {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gris);
}

.cases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
}

.champ label.case,
.case {
    display: flex;
    margin: 0;
    letter-spacing: normal;
    text-transform: none;
    color: var(--blanc);
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--trait);
    border-radius: 10px;
    background: var(--creux);
    font-size: 15px;
    cursor: pointer;
}

.case input {
    width: 20px;
    height: 20px;
    margin: 0;
    flex: none;
    accent-color: var(--accent);
}

.fournitures-liste {
    display: grid;
    gap: 6px;
}

.champ label.ligne-fourniture,
.ligne-fourniture {
    margin: 0;
    font-size: 15px;
    letter-spacing: normal;
    text-transform: none;
    color: var(--blanc);
    display: grid;
    grid-template-columns: 1fr 90px 64px;
    align-items: center;
    gap: 8px;
}

.ligne-fourniture input {
    width: 100%;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid var(--trait);
    border-radius: 10px;
    background: var(--creux);
    color: var(--blanc);
    font-family: inherit;
    font-size: 16px;
    text-align: right;
}

.fourniture-unite {
    color: var(--gris);
    font-size: 14px;
}


/* ---------- Case à cocher dans un formulaire (Repas, 1.0.12) ---------- */

.case-cocher {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    cursor: pointer;
    font-size: 16px;
}

.champ .case-cocher input {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    accent-color: var(--accent);
}