/* =====================================================================
   Charte graphique (reprise de Transfert Machines)
   Pour ajuster une couleur, ne modifier que les variables ci-dessous.
   ===================================================================== */
:root {
    --bleu: #1E3A5F;            /* bandeau, titres, boutons secondaires */
    --orange: #FF9F1C;          /* bouton principal, onglet actif */
    --orange-fonce: #E88B0C;
    --fond: #F8FAFC;            /* fond de page */
    --carte: #FFFFFF;
    --bord: #E5E7EB;            /* bords des cartes */
    --bord-champ: #9CA3AF;
    --texte: #1F2937;
    --texte-doux: #6B7280;      /* libellés, onglets inactifs */
    --neutre: #EEF1F4;          /* bouton neutre */
    --ok: #007A00;
    --erreur: #B42318;
    --jaune: #FFE28C;           /* semaine ouverte, jour incomplet */
    --vert: #96D49B;            /* semaine bouclée, jour complet */
    --gris: #E5E7EB;            /* jour vide */
    --rayon: 6px;
    --rayon-bouton: 2px;
}

* { box-sizing: border-box; }

/* Un élément masqué reste masqué, même s'il a un style d'affichage (boutons, champs) */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    background: var(--fond);
    color: var(--texte);
    -webkit-text-size-adjust: 100%;
}

/* ----- Bandeau ----- */
.bandeau {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bleu);
    color: #fff;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px;
}
.bandeau-logo { width: 40px; height: 40px; flex: 0 0 auto; }
.bandeau-titres { min-width: 0; }
.bandeau-titre { font-size: 20px; font-weight: 600; }
.bandeau-sous-titre { font-size: 13px; color: #CBD5E1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bandeau-droite { margin: 0 0 0 auto; }
.btn-bandeau {
    background: none;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--rayon-bouton);
    color: #fff;
    font: inherit;
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
}
.btn-bandeau:hover { background: rgba(255, 255, 255, .1); }

/* Pictogrammes Paramètres / Déconnexion */
.boutons-bandeau { margin-left: auto; display: flex; gap: 8px; }
.boutons-bandeau form { margin: 0; }
.btn-icone {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: var(--rayon-bouton);
    color: #fff;
    cursor: pointer;
}
.btn-icone:hover, .btn-icone.actif { background: rgba(255, 255, 255, .15); }
.btn-icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ----- Onglets ----- */
.onglets {
    display: flex;
    gap: 4px;
    background: #fff;
    border-bottom: 1px solid var(--bord);
    padding: 0 16px;
    overflow-x: auto;
}
.onglet {
    padding: 12px 18px 9px;
    color: var(--texte-doux);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-bottom: 3px solid transparent;
}
.onglet:hover { color: var(--bleu); }
.onglet { display: inline-flex; align-items: center; gap: 8px; }
.picto {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.picto .plein { fill: currentColor; stroke: none; }
.libelle-court { display: none; }
.onglet.actif {
    color: var(--bleu);
    font-weight: 600;
    border-color: var(--bleu);
    border-bottom-color: var(--orange);
}

/* ----- Contenu et cartes ----- */
.contenu {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 16px 18px;
}
.carte-etroite { width: 100%; max-width: 420px; margin: 24px auto 0; }
.titre-carte { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--bleu); }
.texte-doux { color: var(--texte-doux); font-size: 14px; margin: 0; }

/* ----- Boutons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    font: inherit;
    font-size: 15px;
    border: 1px solid transparent;
    border-radius: var(--rayon-bouton);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn-principal { background: var(--orange); color: #1F282E; font-weight: 600; }
.btn-principal:hover { background: var(--orange-fonce); }
.btn-secondaire { background: #fff; color: var(--bleu); border-color: var(--bleu); }
.btn-secondaire:hover { background: #F1F5F9; }
.btn-neutre { background: var(--neutre); color: var(--texte-doux); }
.btn-neutre:hover { background: #E2E6EA; }
.btn-plein { width: 100%; }
.desactive { opacity: .35; pointer-events: none; }

.lien {
    background: none;
    border: none;
    padding: 4px 0;
    font: inherit;
    font-size: 14px;
    color: var(--bleu);
    cursor: pointer;
    text-decoration: none;
}
.lien:hover { text-decoration: underline; }
.lien-danger { color: var(--erreur); }

/* ----- Messages ----- */
.message { padding: 10px 14px; border: 1px solid; border-radius: var(--rayon); font-size: 14px; }
.message-ok { background: #ECFDF3; border-color: #ABEFC6; color: var(--ok); }
.message-erreur { background: #FEF3F2; border-color: #FECDCA; color: var(--erreur); }
.message-info { background: #EFF4FA; border-color: #C7D6E8; color: var(--bleu); }
.texte-alerte { color: var(--erreur); }

/* ----- Formulaires ----- */
.formulaire {
    display: grid;
    grid-template-columns: 1.2fr 2fr 1fr 1.4fr;
    gap: 12px 14px;
    align-items: start;
}
.formulaire-jour { grid-template-columns: 2fr 1fr 1.4fr; }
.formulaire-colonne { display: flex; flex-direction: column; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.champ label { font-size: 13px; color: var(--texte-doux); }
.champ-plein, .actions { grid-column: 1 / -1; }

input, select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font: inherit;
    font-size: 16px;          /* 16px : évite le zoom automatique sur iPhone */
    color: var(--texte);
    background: #fff;
    border: 1px solid var(--bord-champ);
    border-radius: var(--rayon-bouton);
}
input:focus, select:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--bleu); }

.groupe-heures { display: flex; gap: 4px; }
.groupe-heures input { text-align: right; min-width: 0; }
.btn-pas { min-width: 40px; padding: 0; font-size: 20px; }
.conversion { min-height: 18px; font-size: 13px; }
.conversion.ok { color: var(--ok); }
.conversion.ko { color: var(--erreur); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cases { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.case { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.case input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--bleu); }

/* ----- Navigation entre semaines ----- */
.nav-semaine { display: flex; align-items: stretch; gap: 10px; }
.etiquette-semaine {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: var(--rayon-bouton);
    color: #1F282E;
    font-size: 14px;
    text-align: center;
}
.etiquette-semaine strong { font-size: 16px; }
.ouverte, .partiel { background: var(--jaune); }
.bouclee, .complet { background: var(--vert); }
.vide { background: var(--gris); }
.majuscule::first-letter { text-transform: uppercase; }

.frise { display: flex; gap: 6px; margin-top: 12px; overflow-x: auto; padding-bottom: 2px; }
.pastille {
    flex: 0 0 auto;
    min-width: 50px;
    padding: 6px 0;
    text-align: center;
    font-size: 13px;
    color: #1F282E;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--rayon-bouton);
}
.pastille.courante { border-color: var(--bleu); font-weight: 700; }
.pastille.desactive { background: transparent; border: 1px dashed var(--bord); }

/* 7 boutons des jours : se partagent la largeur */
.frise-jours .pastille-jour {
    flex: 1 1 0;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 5px 0;
    line-height: 1.2;
}
.pastille-jour span { font-size: 12px; }
.pastille-jour strong { font-size: 16px; }

/* Petite étiquette de total (vide / partiel / complet) */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #1F282E;
    white-space: nowrap;
}
.entete-carte { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.entete-carte .titre-carte { margin-bottom: 8px; }

/* ----- Lignes de la semaine ----- */
.jour { border-top: 1px solid var(--bord); margin-top: 10px; padding-top: 10px; }
.jour-entete {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--bleu);
    margin-bottom: 4px;
}
.lien-jour { color: var(--bleu); text-decoration: none; text-transform: capitalize; }
a.lien-jour:hover { text-decoration: underline; }
.jour-cases { font-size: 13px; color: var(--bleu); margin-bottom: 2px; }
.ligne {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bord);
}
.ligne:last-child { border-bottom: none; }
.ligne-edition { background: #FFF7EB; margin: 0 -8px; padding: 8px; }
.ligne-chantier { font-weight: 600; overflow-wrap: anywhere; }
.ligne-detail { font-size: 13px; color: var(--texte-doux); }
.ligne-heures { font-weight: 700; text-align: right; white-space: nowrap; }
.ligne-actions { grid-column: 1 / -1; display: flex; gap: 18px; }
.ligne-actions form { margin: 0; }
.ligne-compacte { padding: 5px 0; }

.pied-semaine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--bord);
    margin-top: 14px;
    padding-top: 14px;
}
.pied-semaine form { margin: 0; }
.actions-semaine { display: flex; flex-wrap: wrap; gap: 10px; }
.totaux { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--texte-doux); }
.total-semaine strong { color: var(--texte); font-size: 16px; }
.total-semaine strong.texte-alerte { color: var(--erreur); }

/* ----- Récapitulatif ----- */
.totaux-recap { border-top: 1px solid var(--bord); margin-top: 14px; padding-top: 12px; }
.pied-actions { border-top: none; margin-top: 4px; padding-top: 8px; justify-content: flex-end; }

/* ----- Suivi (admins) ----- */
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; margin: 0 0 12px; }
.puce { display: inline-block; width: 16px; height: 16px; border-radius: 3px; vertical-align: middle; }
.defilement { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau-suivi { border-collapse: separate; border-spacing: 3px; font-size: 13px; min-width: 100%; }
.tableau-suivi th { font-weight: 600; color: var(--texte-doux); text-align: center; padding: 4px 2px; white-space: nowrap; }
.tableau-suivi .date-col { font-weight: 400; font-size: 11px; }
.tableau-suivi td { padding: 0; text-align: center; }
.tableau-suivi .col-nom {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--carte);
    text-align: left;
    color: var(--texte);
    padding-right: 10px;
    min-width: 130px;
}
.cellule {
    display: block;
    min-width: 52px;
    padding: 7px 4px;
    border-radius: 3px;
    color: #1F282E;
    text-decoration: none;
    font-weight: 600;
}
.cellule:hover { filter: brightness(.95); }
.retard { box-shadow: inset 0 0 0 2px var(--erreur); }
.cellule.choisie { outline: 2px solid var(--bleu); outline-offset: 1px; }
.col-retard { font-weight: 700; min-width: 50px; }

/* ----- Suivi chantier ----- */
.cellule-chantier { background: #EEF4FB; }
.cellule-chantier.vide-ch { background: transparent; color: #9CA3AF; font-weight: 400; }
.cellule-chantier.non-boucle { outline: 1px dashed var(--bleu); outline-offset: -3px; }
.cellule-chantier.non-boucle.choisie { outline: 2px solid var(--bleu); outline-offset: 1px; }
.col-total { font-weight: 700; color: var(--bleu); min-width: 50px; }
.ligne-total th, .ligne-total td { border-top: 2px solid var(--bleu); font-weight: 700; color: var(--bleu); padding-top: 6px; }
.badge-chantier { background: #EEF4FB; color: var(--bleu); }
.cumul { margin-top: 8px; }

.tableau-detail { border-collapse: collapse; width: 100%; font-size: 13px; }
.tableau-detail th, .tableau-detail td { padding: 6px; border-bottom: 1px solid var(--bord); text-align: center; white-space: nowrap; }
.tableau-detail th:first-child, .tableau-detail td:first-child { text-align: left; position: sticky; left: 0; background: var(--carte); }
.tableau-detail thead th { color: var(--texte-doux); font-weight: 600; }
.tableau-detail tfoot td { font-weight: 700; color: var(--bleu); border-top: 2px solid var(--bleu); border-bottom: none; }
.mo { display: block; font-size: 11px; color: var(--texte-doux); }

/* ----- Motifs de journée (congé, RTT, férié, maladie) ----- */
.picto-motif { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.pastille-jour .picto-motif { width: 13px; height: 13px; margin-top: 1px; }
.motifs { display: flex; margin-top: 12px; border: 1px solid var(--bleu); border-radius: var(--rayon-bouton); overflow: hidden; }
.motifs button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 0;
    font: inherit;
    font-size: 14px;
    color: var(--bleu);
    background: #fff;
    border: none;
    border-right: 1px solid var(--bleu);
    cursor: pointer;
}
.motifs button:last-child { border-right: none; }
.motifs button.choisi { background: var(--bleu); color: #fff; font-weight: 600; }
.bandeau-absence {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #C7D6E8;
    border-radius: var(--rayon);
    background: #EEF4FB;
    color: var(--bleu);
    font-size: 14px;
}
.bandeau-absence strong { display: block; font-size: 16px; }
.bandeau-absence .picto-motif { width: 28px; height: 28px; stroke-width: 1.8; flex: 0 0 auto; }
.bandeau-absence.motif-ferie { background: #FFF7EB; border-color: #F5D7A6; color: #7A4B00; }
.bandeau-absence.motif-maladie { background: #FEF3F2; border-color: #FECDCA; color: var(--erreur); }
.jour-motif { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bleu); margin: 2px 0; }
.jour-motif.motif-ferie { color: #7A4B00; }
.jour-motif.motif-maladie { color: var(--erreur); }
.etiquette-forfait {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 600;
    color: var(--bleu);
    background: #EEF4FB;
    border: 1px solid #C7D6E8;
    border-radius: 999px;
    vertical-align: 1px;
}
.motif-admin { margin: 2px 0 6px; font-size: 13px; color: var(--texte-doux); }
.motif-admin label { display: flex; align-items: center; gap: 8px; }
.motif-admin select { width: auto; min-height: 32px; padding: 3px 8px; font-size: 14px; }

/* ----- Paramètres ----- */
.sous-titre-carte { display: flex; align-items: center; gap: 6px; color: var(--texte-doux); font-size: 14px; margin-bottom: 4px; }
.picto-p { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.reglage { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--bord); }
.reglage strong { display: block; }
.reglage p { margin: 2px 0 8px; font-size: 13px; color: var(--texte-doux); }
.reglage select { width: auto; min-height: 36px; padding: 4px 8px; }
.interrupteur {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    position: relative;
    width: 46px;
    min-height: 0;
    height: 26px;
    margin-top: 2px;
    padding: 0;
    border: none;
    border-radius: 13px;
    background: #D1D5DB;
    cursor: pointer;
    transition: background .15s;
}
.interrupteur::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: left .15s;
}
.interrupteur:checked { background: var(--bleu); }
.interrupteur:checked::after { left: 23px; }
.etat-appareil { margin: 0 0 8px; font-size: 14px; color: var(--texte-doux); }
.etat-appareil.ok { color: var(--ok); }
.etat-appareil.ko { color: var(--erreur); }
.actions-appareil { margin-top: 12px; }

/* ----- Déplacement du jour ----- */
.ligne-frais { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: end; }
.liste-zone { font-weight: 600; }
.case-panier { margin-bottom: 9px; }
.zone-badge { display: inline-block; padding: 0 8px; font-size: 12px; font-weight: 600; color: var(--bleu); background: #EEF4FB; border: 1px solid #C7D6E8; border-radius: 999px; }
.recap-zones { margin-top: 4px; font-size: 13px; color: var(--texte-doux); }
.case-admin { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.case-admin input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--bleu); }

/* ----- Comptes ----- */
.lien-retour { align-self: flex-start; font-size: 14px; color: var(--bleu); text-decoration: none; }
.lien-retour:hover { text-decoration: underline; }
.btn-petit { min-height: 34px; padding: 4px 12px; }
.compte { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--bord); }
.compte-nom { font-weight: 600; }
.compte-login { font-size: 12px; color: var(--texte-doux); }
.compte.inactif .compte-nom { color: #9CA3AF; text-decoration: line-through; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.puce-compte { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid #C7D6E8; background: #EEF4FB; color: var(--bleu); }
.puce-compte.fort { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.puce-compte.gris { background: #F3F4F6; border-color: var(--bord); color: var(--texte-doux); }
.puce-compte.orange { background: #FFF7EB; border-color: #F5D7A6; color: #7A4B00; }
.cases-colonne { display: flex; flex-direction: column; gap: 10px; }
.aide-case { margin: -6px 0 0 28px; font-size: 12px; color: var(--texte-doux); }
.aide-champ { margin: 0; font-size: 12px; color: var(--texte-doux); }
.champ-fige { background: #F3F4F6; color: var(--texte-doux); }
.zone-mdp { border-top: 1px solid var(--bord); margin-top: 16px; padding-top: 12px; }
.zone-mdp p { margin: 4px 0 10px; }
.zone-mdp form { margin: 0; }

/* ----- Téléphone ----- */
@media (max-width: 700px) {
    /* Onglets : pictogramme + libellé court, répartis sur toute la largeur */
    .onglets { padding: 0; gap: 0; overflow-x: visible; }
    .onglet { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 2px; padding: 9px 0 6px; font-size: 11px; }
    .libelle-long { display: none; }
    .libelle-court { display: inline; }

    .bandeau { padding-left: 14px; padding-right: 14px; }
    .bandeau-logo { width: 34px; height: 34px; }
    .bandeau-titre { font-size: 18px; }
    .contenu { padding-left: 10px; padding-right: 10px; }
    .carte { padding: 14px; }
    .formulaire, .formulaire-jour { grid-template-columns: 1fr 1fr; }
    .champ-chantier { grid-column: 1 / -1; order: -1; }
    .texte-large { display: none; }
    .nav-semaine .btn { padding: 8px 14px; }
    .actions .btn, .pied-semaine form, .pied-semaine .btn, .actions-semaine { width: 100%; }
    .actions-appareil .btn { white-space: normal; }
}