:root {
    --bleu: #0d6efd;
    --marine: #1d4e63;
    --vert: #157347;
    --orange: #fd7e14;
    --rouge: #dc3545;
    --gris: #6c757d;
    --bordure: #d0d5dd;
    --fond: #f7f8fa;
}

* { box-sizing: border-box; }

/* Cible de production : écran 1024×768. Base réduite pour compacter l'ensemble. */
html { font-size: 14px; }

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    background: var(--fond);
    color: #1f2933;
}

/* Filigrane : tampon de la grotte, ancré en haut de la zone de saisie */
.contenu { position: relative; }
.contenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 760px);
    height: min(92vw, 760px);
    background: url("img/logo-stamp.png") top center no-repeat;
    background-size: contain;
    filter: brightness(0);
    opacity: .28;
    pointer-events: none;
    z-index: 0;
}
.contenu > * { position: relative; z-index: 1; }

.wrap { max-width: 1000px; margin: 0 auto; padding: .6rem 1rem; position: relative; z-index: 1; }

/* En-tête : logo à gauche, navigation/boutons à droite sur la même ligne */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.logo-entete { height: 2.4rem; width: auto; max-width: 180px; margin: 0; }
.entete h1 { font-size: 1.25rem; margin: .3rem 0; color: var(--marine); }
.nav-date { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.date-form { margin: 0; }
.date-fr { width: 7rem; text-align: center; font-variant-numeric: tabular-nums; }
/* Le sélecteur natif sert uniquement de calendrier déclenché par le bouton 📅 */
.date-picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.saison-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #e7f1f5;
    color: var(--marine);
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
}
.saison-horaires { font-weight: 700; font-variant-numeric: tabular-nums; }
.saison-tag { margin: .1rem 0 .9rem; }

/* Boutons */
.btn {
    display: inline-block;
    padding: .3rem .6rem;
    border: 1px solid var(--bordure);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    color: #1f2933;
    font-size: .9rem;
}
.btn:hover { background: #eef1f5; }
.btn-primary { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.btn-primary:hover { background: #0b5ed7; }
.btn-today { font-size: .85rem; }
.btn-suppr { color: var(--rouge); border-color: #f1c0c5; padding: .2rem .5rem; }
.btn-suppr:hover { background: #fdeef0; }

/* God Mode (super admin) */
.god-inline { display: inline; margin: 0; }
.btn-god { font-size: .85rem; }
.btn-god.actif { background: #e6f4ea; border-color: var(--vert); color: #12633c; font-weight: 700; }
.btn-god.actif:hover { background: #d3ecdb; }
.god-modal { border: none; border-radius: 12px; padding: 1.2rem 1.4rem; max-width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.god-modal::backdrop { background: rgba(15,23,42,.45); }
.god-modal h2 { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--marine); }
.god-modal label { margin-top: .6rem; }
.god-modal input[type="password"] { width: 100%; }
.god-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* Cartes / formulaires */
.carte {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: .7rem .8rem;
    margin-bottom: .7rem;
}
.entete-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.entete .entete-form {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: .8rem 1rem;
    margin-top: .8rem;
}
/* Bandeau du jour : titre + saison + config + météo regroupés */
.bandeau-corps { display: flex; gap: 1.5rem; align-items: stretch; flex-wrap: wrap; }
.bandeau-corps .entete-form { flex: 1 1 300px; background: transparent; border: 0; padding: 0; margin: 0; align-content: flex-start; }

/* Configuration figée (après validation) */
.config-figee { flex: 1 1 300px; display: block; }
.config-titre { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.lien-modif { font-size: .8rem; color: var(--bleu); text-decoration: none; font-weight: 600; }
.lien-modif:hover { text-decoration: underline; }
.config-scenario { font-weight: 700; color: var(--marine); margin-bottom: .3rem; }
.config-liste { font-size: .9rem; color: #1f2933; margin: .1rem 0; }
.config-label { color: #52606d; font-weight: 600; }

/* Bascule de config en cours de journée */.config-bascule { margin-top: .5rem; padding-top: .4rem; border-top: 1px dashed var(--bordure); }
.bascule-actif { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bascule-tag { font-size: .85rem; font-weight: 600; color: #8a4b00; background: #fff3e0; border: 1px solid #ffc27a; border-radius: 6px; padding: .1rem .45rem; }
.btn-lien { background: none; border: none; color: var(--bleu); font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0; }
.btn-lien:hover { text-decoration: underline; }
.bascule-remove-form { display: inline; margin: 0; }
.bascule-details > summary { font-size: .82rem; color: var(--bleu); font-weight: 600; cursor: pointer; list-style: none; }
.bascule-details > summary:hover { text-decoration: underline; }
.bascule-form { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin-top: .4rem; }
.bascule-guides-liste { border: 1px solid var(--bordure); border-radius: 6px; padding: .25rem .5rem .4rem; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem .8rem; }
.bascule-guides-liste legend { font-size: .72rem; color: #52606d; font-weight: 600; padding: 0 .3rem; }
.btn-secondary { background: #fff3e0; color: #8a4b00; border: 1px solid #ffc27a; border-radius: 6px; padding: .45rem .7rem; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: #ffe6c2; }

/* Libérer un guide en cours de journée (part avant la fin) */
.config-liberes { margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--bordure); }
.libere-actif { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .25rem; }
.libere-tag { font-size: .85rem; font-weight: 600; color: #7a2e00; background: #ffe7dd; border: 1px solid #ffb59a; border-radius: 6px; padding: .1rem .45rem; }
.libere-remove-form { display: inline; margin: 0; }
.liberer-details > summary { font-size: .82rem; color: var(--bleu); font-weight: 600; cursor: pointer; list-style: none; }
.liberer-details > summary:hover { text-decoration: underline; }
.liberer-form { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.liberer-form .liberer-nom { min-width: 5rem; font-size: .85rem; }
.liberer-form input[type=time] { padding: .15rem .3rem; font-size: .85rem; }
.liberer-caisse { cursor: help; font-size: .8rem; }

/* Interrupteur « saisie libre » (ignorer l'heure système) */
.saisie-libre-bar { margin: 0 0 1rem; padding: .4rem .6rem; border: 1px dashed var(--bordure); border-radius: 8px; background: #fafbfc; }
.saisie-libre-bar.active { border: 1px solid #8a4b00; background: #fff3e0; }
.saisie-libre-form { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0; }
.saisie-libre-txt { font-size: .85rem; color: #52606d; }
.saisie-libre-bar.active .saisie-libre-txt { color: #8a4b00; }

/* Bandeau « mode dégradé » (aucune disponibilité FareHarbor pour le jour → saisie manuelle). */
.mode-degrade-bar { margin: 0 0 1rem; padding: .55rem .8rem; border: 1px solid #b42318; border-left: 5px solid #b42318; border-radius: 8px; background: #fef3f2; color: #912018; font-size: .88rem; }
.mode-degrade-bar strong { color: #b42318; }

label { display: flex; flex-direction: column; font-size: .8rem; font-weight: 600; color: #52606d; gap: .25rem; }
input, select { padding: .3rem .45rem; border: 1px solid var(--bordure); border-radius: 6px; font-size: .95rem; }
input:focus, select:focus { outline: 2px solid #b6d4fe; border-color: var(--bleu); }

.grille-ajout { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.grille-ajout input[type=number] { width: 5.5rem; }
.grille-ajout .btn { align-self: flex-end; }

/* Saisie des pauses (étape 4) */
.grille-pause { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .8rem; }
.grille-pause .btn { align-self: flex-end; }
.grille-pause .champ-note { flex: 1 1 12rem; }
.grille-pause .champ-note input { width: 100%; }
.tableau-pauses { max-width: 720px; }

/* Proposition de pauses prédéfinies */
.pauses-predef {
    background: #f3f8ff;
    border: 1px solid #cfe0f5;
    border-radius: 10px;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}
.predef-tete { margin-bottom: .5rem; }
.predef-tete .hint { display: inline; margin: 0; }
.predef-liste { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.predef-liste li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.predef-pos {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--marine); color: #fff; font-weight: 700; font-size: .8rem;
}
.predef-caisse { color: #9a5b00; font-weight: 600; font-size: .85rem; }
.predef-pause { color: #52606d; font-size: .85rem; }
.predef-appliquer { margin: 0; }

.hint { color: var(--gris); font-size: .8rem; margin: .5rem 0 0; }
.hint-warn { color: var(--orange); font-weight: 600; }
.hint-warn { position: relative; padding-right: 1.7rem; }
.alerte-close { position: absolute; top: .1rem; right: .3rem; border: none; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 .25rem; opacity: .55; }
.alerte-close:hover { opacity: 1; }
.hint-ok { color: var(--vert); font-weight: 600; }
.alert { padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; }
.alert.ko { background: #fdeef0; color: var(--rouge); border: 1px solid #f1c0c5; }

/* Bloc affiché à la place du formulaire d'ajout tant que la config n'est pas validée */
.bloc-config {
    background: #fff8e6;
    border: 1px solid #f4d68a;
    color: #7a5b00;
}
.form-absents { margin-top: .5rem; }
.absents-liste { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .5rem 0; }
.absent-item { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bordure); border-radius: 10px; overflow: hidden; margin-bottom: 1rem; }
.tableau th, .tableau td { padding: .18rem .5rem; border-bottom: 1px solid #eef1f5; text-align: left; }
.tableau thead th { background: #f1f4f8; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: #52606d; }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .vide { text-align: center; color: var(--gris); padding: 1.2rem; }
.col-heure { white-space: nowrap; font-weight: 600; }
.col-action { text-align: center; width: 1%; }

/* Saisie du retour de visite (étape 3) */
.col-retour { white-space: nowrap; }
.form-retour { display: flex; align-items: center; gap: .25rem; margin: 0; flex-wrap: wrap; }
.inp-retour { width: 6.2rem; padding: .2rem .3rem; font-size: .85rem; }
.btn-mini { padding: .2rem .4rem; font-size: .82rem; line-height: 1; }
.btn-now { color: var(--marine); }
.duree { font-weight: 600; white-space: nowrap; }

/* Vue « au fil de l'eau » : états + chrono (étape 3+) */
.col-etat { white-space: nowrap; }
.tag { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
.tag-encours { background: #e6f4ea; color: var(--vert); }
.tag-encours::first-letter { color: #2e9e57; }
.tag-revenu { background: #eceff3; color: var(--gris); }
.tag-pause { background: #eef1f5; color: #52606d; }
.tag-repas { background: #fff3e0; color: #9a5b00; }
.ligne-revenue { color: var(--gris); background: #fafbfc; }
.ligne-revenue td { opacity: .78; }
.chrono { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--vert); }
.btn-retour-now { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 600; }
.btn-retour-now:hover { background: #12633c; }
/* Petit clignotement discret du point « En cours » */
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.tag-encours { animation: pulse-dot 1.6s ease-in-out infinite; }

/* Cumuls */
.tableau tfoot .cumul td { background: #f1f4f8; font-size: .95rem; border-top: 2px solid var(--bordure); }

/* Total coloré selon le remplissage */
.total { font-weight: 700; }
.r-bleu   { background: var(--bleu); }
.r-vert   { background: var(--vert); }
.r-orange { background: var(--orange); }
.r-rouge  { background: var(--rouge); }

/* Badge horaire modifié */
.badge-modif {
    display: inline-block;
    background: var(--rouge);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 4px;
    margin-left: .3rem;
    vertical-align: middle;
    letter-spacing: .02em;
}
.prevu { display: block; font-size: .72rem; color: var(--rouge); font-weight: 600; }

/* Cycle en 2 temps : créneau planifié -> départ effectif */
.col-creneau { white-space: nowrap; font-weight: 600; color: var(--marine); }
.tag-planifie { background: #e7f0ff; color: #0057ff; }
.ligne-planifiee { background: #f7faff; }
.form-depart { display: flex; align-items: center; gap: .3rem; margin: 0; flex-wrap: wrap; }
.inp-depart { width: 6.2rem; padding: .2rem .3rem; font-size: .85rem; }
.btn-depart-now { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 600; }
.btn-depart-now:hover { background: #0043c9; }

/* Départ / retour uniformisés : bouton « maintenant HH:MM » + ligne manuelle dessous */
.form-now { flex-direction: column; align-items: stretch; gap: .2rem; }
.btn-now { white-space: nowrap; }
.now-manuel { display: flex; align-items: center; gap: .2rem; }
.now-manuel .inp-depart, .now-manuel .inp-retour { width: 5.2rem; }
/* Fil de l'eau : entêtes centrées, groupes départ/retour sur une ligne, colonnes teintées. */
.tableau thead th { text-align: center; }
.form-now .now-manuel { flex-wrap: nowrap; }
/* Colonnes : style « Planning » — teintes de gris alternées + séparateurs verticaux ombrés (pas de pastel). */
.tableau th, .tableau td { border-right: 1px solid #d3d9e0; }
.tableau th:last-child, .tableau td:last-child { border-right: none; }
.tableau tbody td:nth-child(even) { background: #f3f5f8; }
.tableau tbody td:nth-child(odd)  { background: #fff; }
.tableau thead th { background: #e9edf1; color: #3a4654; box-shadow: inset -1px 0 0 #cbd2db; }
/* Compactage pour tenir dans 1024px (cible écran prod) — colonnes départ/retour à 3 éléments. */
.tableau th, .tableau td { padding-left: .27rem; padding-right: .27rem; }
.tableau .now-manuel { gap: .12rem; }
.tableau .now-manuel .inp-depart, .tableau .now-manuel .inp-retour { width: 5.2rem; flex: 0 0 auto; padding-left: .25rem; padding-right: .1rem; }
.tableau input[type=time]::-webkit-inner-spin-button, .tableau input[type=time]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.tableau .btn-now, .tableau .btn-mini { padding: .16rem .3rem; font-size: .78rem; }
.inp-nb { width: 3.6rem; padding: .3rem .35rem; font-size: .9rem; }
.btn-valider-depart { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 700; white-space: nowrap; }
.btn-valider-depart:hover { background: #12633c; }
/* Croix pour acquitter l'alerte « horaire modifié » */
.form-ack { display: inline; margin: 0; }
.btn-alerte-x { background: none; border: none; color: var(--rouge); font-weight: 700; cursor: pointer; padding: 0 .2rem; font-size: .9rem; vertical-align: middle; }
.btn-alerte-x:hover { color: #8a0000; }

/* Ajout de retardataires (visiteurs qui rejoignent une visite en cours) */
.ajout-vis { display: inline-block; margin-left: .3rem; }
.ajout-vis > summary { display: inline-block; list-style: none; cursor: pointer; width: 1.25rem; height: 1.25rem; line-height: 1.15rem; text-align: center; border: 1px solid var(--bordure); border-radius: 4px; color: var(--bleu); font-weight: 700; background: #fff; }
.ajout-vis > summary::-webkit-details-marker { display: none; }
.ajout-vis > summary:hover, .ajout-vis[open] > summary { background: #eef4ff; border-color: var(--bleu); }
.ajout-vis-form { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; margin-top: .3rem; }
.ajout-vis-form .inp-nb { width: 3rem; }
.ajout-vis-form .sel-ajout { padding: .28rem .3rem; font-size: .8rem; border: 1px solid var(--bordure); border-radius: 6px; }

.tableau-guides { max-width: 520px; }
.pied { color: var(--gris); font-size: .8rem; text-align: center; margin: 1.5rem 0; }

/* Onglets de vues */
.onglets { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 2px solid var(--bordure); }
.onglet {
    padding: .5rem .9rem; text-decoration: none; color: #52606d; font-weight: 600;
    border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0;
    position: relative; top: 2px;
}
.onglet:hover { background: #eef1f5; }
.onglet.actif { background: #fff; color: var(--marine); border-color: var(--bordure); border-bottom: 2px solid #fff; }

/* Vue Planning — KPI */
.kpi-bandeau { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kpi {
    flex: 1 1 8rem; background: #f1f4f8; border: 1px solid var(--bordure);
    border-radius: 10px; padding: .5rem .8rem; display: flex; flex-direction: column;
}
.kpi-val { font-size: 1.6rem; font-weight: 800; color: var(--marine); line-height: 1.1; }
.kpi-lib { font-size: .75rem; color: #52606d; text-transform: uppercase; letter-spacing: .02em; }
.kpi-next .kpi-val { color: var(--orange); }

/* Vue Planning — grille heures × guides */
.planning-scroll { overflow-x: auto; }
.planning-sous-titre { font-size: .95rem; color: var(--marine); margin: .8rem 0 .3rem; }
/* Grille des départs par créneau (heures × minutes) : cellules = vignettes de visite. */
.grille-creneaux tbody tr { height: auto; }
.grille-creneaux td { height: auto; padding: .25rem .3rem; vertical-align: top; }
.grille-creneaux .col-h { vertical-align: middle; font-size: .8rem; }
.grille-creneaux td.pl-vide { background: #fbfcfe; border-color: #eef1f5; }

/* --- Grille « Portée des visites » (onglet Planning) : 1 ligne = 1 heure, échelle minutes --- */
.gp-grille { min-width: 880px; position: relative; font-size: .66rem; }
.gp-entete { display: flex; position: sticky; top: 0; z-index: 8; background: #1d4e63; color: #fff; }
.gp-coin { width: 52px; flex: 0 0 52px; position: sticky; left: 0; z-index: 9; background: #123a4c; border-right: 1px solid #0d2c3a; font-size: .72rem; display: flex; align-items: center; justify-content: center; }
.gp-mins { position: relative; height: 18px; flex: 1; }
.gp-hsection { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(255,255,255,.22); border-right: 1px solid rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: #fff; }
.gp-ligne { display: flex; border-top: 1px solid #e3e8ef; }
.gp-colh { width: 52px; flex: 0 0 52px; position: sticky; left: 0; z-index: 7; background: #f8fafc; border-right: 1px solid #d0d5dd; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #334; font-size: .82rem; }
.gp-piste { position: relative; flex: 1; min-height: 72px; }
.gp-col-dep { position: absolute; top: 0; bottom: 0; background: #f3f5f8; border-left: 1px solid #fff; border-right: 1px solid #d7dce3; }
.gp-col-dep.alt { background: #eaeef3; }
.gp-fin-h { position: absolute; top: 0; bottom: 0; width: 2px; background: #c0392b22; border-left: 1px dashed #c0392b55; }
.gp-info { position: absolute; height: 66px; border: 1px solid #1a1f24; border-right: none; border-radius: 8px 0 0 8px; box-shadow: inset 2px 0 0 #fff, inset 0 2px 0 #fff, inset 0 -2px 0 #fff, 2px 2px 4px rgba(0,0,0,.30); overflow: hidden; padding: 3px 7px; color: #111; display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.12; }
.gp-info .nom { font-weight: 700; font-size: .72rem; }
.gp-info .l3 { font-weight: 700; }
.gp-portee { position: absolute; height: 66px; border: 1px solid #3d4650; border-left: none; border-bottom: none; border-radius: 0 6px 6px 0; }
.gp-portee.deborde { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gp-portee.suite { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gp-suite-lbl { position: absolute; top: 1px; right: 4px; font-size: .62rem; font-weight: 700; white-space: nowrap; line-height: 1; color: #111; }
/* Couleurs tickets : info (médium) + portée (dégradé vertical → fond blanc) */
.gp-info-rouge  { background: #ec5b5b; } .gp-tk-rouge  { background: linear-gradient(180deg,#ec5b5b,#fff); }
.gp-info-bleu   { background: #4f88ef; } .gp-tk-bleu   { background: linear-gradient(180deg,#4f88ef,#fff); }
.gp-info-orange { background: #ff9448; } .gp-tk-orange { background: linear-gradient(180deg,#ff9448,#fff); }
.gp-info-violet { background: #a659ee; } .gp-tk-violet { background: linear-gradient(180deg,#a659ee,#fff); }
.gp-info-vert   { background: #38bd67; } .gp-tk-vert   { background: linear-gradient(180deg,#38bd67,#fff); }
.gp-info-blanc  { background: #dce1e8; } .gp-tk-blanc  { background: linear-gradient(180deg,#dce1e8,#fff); }
.gp-info-marron { background: #be875a; } .gp-tk-marron { background: linear-gradient(180deg,#be875a,#fff); }
.gp-info-jaune  { background: #e6cf3f; } .gp-tk-jaune  { background: linear-gradient(180deg,#e6cf3f,#fff); }
.grille-planning { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grille-planning th, .grille-planning td { border: 1px solid #e3e8ef; padding: 0 .3rem; text-align: center; vertical-align: middle; }
.grille-planning thead th { background: var(--marine); color: #fff; font-size: .78rem; padding: .35rem .3rem; position: sticky; top: 0; }
.grille-planning .col-h { width: 3.2rem; background: #f8fafc; color: #52606d; font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 600; border-right: 1px solid #d0d5dd; }
/* Pas de 5 min : lignes fines ; trait plus marqué à chaque créneau (toutes les 15 min) */
.grille-planning tbody tr { height: .5rem; }
.grille-planning tbody tr.l-creneau > td { border-top: 1px solid #c7ccd4; }
.grille-planning tbody tr.l-creneau > .col-h { color: #1f2933; }
.grille-planning .ligne-now > td { box-shadow: inset 0 2px 0 var(--orange); }
.grille-planning .ligne-now > .col-h { background: var(--orange); color: #fff; }
.grille-planning .ligne-bascule > td { box-shadow: inset 0 2px 0 #8a4b00; }
.grille-planning .bascule-marqueur { margin-left: .2rem; font-size: .7rem; }
.pl-cell { font-size: .8rem; line-height: 1.2; }
.pl-label { display: block; padding: .1rem .2rem; }
.pl-dispo   { background: #eaf6ee; }
.pl-indiv   { background: #cfe2ff; color: #0a3d91; font-weight: 600; }
.pl-groupe  { background: #ffe2c2; color: #8a4b00; font-weight: 600; }
.pl-pause   { background: #e4e7eb; color: #52606d; font-weight: 600; }
.pl-visite  { background: #cfe2ff; color: #0a3d91; font-weight: 600; }
.pl-caisse  { background: #fde3c4; color: #8a4b00; font-weight: 700; }

/* Vignettes de visite (planning) : fond léger + bordure (orange = visite, violet = groupe privé) */
.pl-vignette { text-align: left; padding: .15rem .3rem; }
.grille-planning td.v-visite { background: rgba(232, 115, 10, .12); color: #7a3d00; border: 1px solid #e8730a; border-left: 4px solid #e8730a; }
.grille-planning td.v-groupe { background: rgba(123, 63, 242, .10); color: #40206e; border: 1px solid #7b3ff2; border-left: 4px solid #7b3ff2; }
.grille-planning td.v-previ { opacity: .5; border-style: dashed; }
/* Fond pastel des vignettes selon la couleur du ticket (prime sur v-visite/v-groupe) */
.grille-planning td.tk-rouge  { background: #ffdede; border-color: #E60000; }
.grille-planning td.tk-bleu   { background: #dbe7ff; border-color: #0057FF; }
.grille-planning td.tk-orange { background: #ffe4d0; border-color: #FF6A00; }
.grille-planning td.tk-violet { background: #eeddff; border-color: #8F00FF; }
.grille-planning td.tk-vert   { background: #d6f3e0; border-color: #00A83B; }
.grille-planning td.tk-blanc  { background: #f4f6f8; border-color: #c7ccd4; }
.grille-planning td.tk-marron { background: #ecddd0; border-color: #703800; }
.grille-planning td.tk-jaune  { background: #fdfdc2; border-color: #D4C400; }
.pl-l1 { display: block; font-size: .8rem; margin-bottom: .05rem; }
.pl-l2 { display: block; font-weight: 700; font-size: .82rem; }
.pl-guide { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .08rem; }
.grille-planning td.pl-vide { background: #fff; border-color: #eef1f5; }
.grille-planning td.pl-pause, .grille-planning td.pl-caisse { overflow: hidden; }
.grille-planning td.pl-pause .pl-label, .grille-planning td.pl-caisse .pl-label { font-size: .66rem; line-height: 1.1; }
.ticket-chip { border: 1px solid rgba(0,0,0,.15); border-radius: 4px; padding: .02rem .35rem; font-weight: 700; font-size: .72rem; color: #fff; }
.t-rouge  { background: #E60000; }
.t-bleu   { background: #0057FF; }
.t-orange { background: #FF6A00; }
.t-violet { background: #8F00FF; }
.t-vert   { background: #00A83B; }
.t-blanc  { background: #FFFFFF; color: #333; border-color: #c7ccd4; }
.t-marron { background: #703800; }
.t-jaune  { background: #FFFF00; color: #333; }

/* Bloc « Attente » : grisé et barré */
.pl-attente {
    background: repeating-linear-gradient(45deg, #eceff3, #eceff3 5px, #e2e6ec 5px, #e2e6ec 10px);
    color: #8a8f98; font-style: italic; text-decoration: line-through; font-size: .7rem;
}
/* Bloc « Fin de journée » : sobre, journée terminée pour ce guide */
.pl-fin {
    background: #dfe3e8; color: #6b7280; font-size: .7rem; font-style: italic;
}

/* Sous-onglets Théorique / Réel */
.sous-onglets { display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; }
.sous-onglet {
    padding: .3rem .7rem; text-decoration: none; font-size: .85rem; font-weight: 600;
    color: #52606d; background: #eef1f5; border-radius: 999px;
}
.sous-onglet.actif { background: var(--marine); color: #fff; }
.sous-onglets-info { margin: 0 0 0 .3rem; }

.planning-legende { display: flex; gap: 1rem; margin-top: .7rem; font-size: .8rem; flex-wrap: wrap; }
.planning-legende .lg { display: inline-flex; align-items: center; gap: .35rem; color: #52606d; }
.planning-legende .lg::before { content: ""; width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; }
.lg-indiv::before  { background: #cfe2ff; }
.lg-groupe::before { background: #ffe2c2; }
.lg-dispo::before  { background: #eaf6ee; border: 1px solid #cfe0d4; }
.lg-pause::before  { background: #e4e7eb; }
.lg-visite::before { background: rgba(232, 115, 10, .12); border: 1px solid #e8730a; }
.lg-previ::before  { background: rgba(232, 115, 10, .12); border: 1px dashed #e8730a; opacity: .5; }
.lg-groupe2::before{ background: rgba(123, 63, 242, .10); border: 1px solid #7b3ff2; }
.lg-caisse::before { background: #fde3c4; }
.lg-attente::before{ background: repeating-linear-gradient(45deg, #eceff3, #eceff3 3px, #e2e6ec 3px, #e2e6ec 6px); }
.lg-fin::before    { background: #dfe3e8; }

/* Bloc météo automatique (intégré au bandeau) */
.meteo-bloc {
    flex: 1 1 260px;
    background: linear-gradient(135deg, #eef5ff 0%, #f7fbff 100%);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: .7rem .9rem;
}
.meteo-titre { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; flex-wrap: wrap; }
.meteo-lieu { font-weight: 700; font-size: 1.05rem; color: var(--marine); }
.meteo-heure { color: var(--gris); font-size: .8rem; }
.meteo-corps { display: flex; gap: 1rem; align-items: center; }
.meteo-icone { font-size: 3rem; line-height: 1; }
.meteo-mesures { display: flex; flex-direction: column; gap: .1rem; }
.meteo-temp { font-size: 1.2rem; font-weight: 700; }
.meteo-ciel { color: #52606d; font-weight: 600; }
.meteo-details {
    list-style: none; margin: .3rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .85rem; color: #52606d;
}
.meteo-details strong { color: #1f2933; }
.meteo-journal { margin-top: .6rem; }
.meteo-journal summary { cursor: pointer; font-size: .85rem; color: var(--bleu); font-weight: 600; }
.tableau-meteo { margin-top: .6rem; font-size: .85rem; }
.tableau-meteo th, .tableau-meteo td { padding: .35rem .5rem; }

@media (max-width: 640px) {
    .entete-form, .grille-ajout { flex-direction: column; align-items: stretch; }
    .grille-ajout input[type=number] { width: 100%; }
}

/* ---------------------------------------------------------------------
   Page de connexion (login.php)
   --------------------------------------------------------------------- */
.page-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}
.login-carte {
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    padding: 1.6rem 1.8rem 1.8rem;
    width: 100%;
    max-width: 340px;
    text-align: center;
}
.login-logo { max-width: 180px; height: auto; margin-bottom: .6rem; }
.login-titre { color: var(--marine); font-size: 1.25rem; margin: .2rem 0 1rem; }
.login-form { display: flex; flex-direction: column; gap: .8rem; text-align: left; }
.login-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: #333; }
.login-form input { padding: .5rem; border: 1px solid var(--bordure); border-radius: 6px; font-size: 1rem; }
.login-form .btn { margin-top: .4rem; justify-content: center; }
.login-lien { margin: .8rem 0 0; font-size: .85rem; }
.login-lien a { color: var(--marine, #1d4e63); }
.login-erreur {
    background: #fdecec;
    border: 1px solid var(--rouge);
    color: #a12;
    border-radius: 6px;
    padding: .5rem .7rem;
    font-size: .9rem;
    margin: 0 0 1rem;
}

/* ---------------------------------------------------------------------
   Planning du personnel (planning.php) — grille mensuelle façon Excel
   --------------------------------------------------------------------- */
.pp-mois-titre { font-weight: 700; color: var(--marine, #1d4e63); padding: 0 .4rem; white-space: nowrap; }
.pp-wrap { overflow-x: auto; border: 1px solid #d2d6dc; border-radius: 6px; }
.pp-grille { border-collapse: collapse; font-size: .78rem; width: 100%; }
.pp-grille th, .pp-grille td { border: 1px solid #e2e5e9; text-align: center; }
.pp-grille td.pp-cell { width: 24px; min-width: 24px; height: 24px; padding: 0; font-weight: 600; }
.pp-jour { width: 26px; min-width: 26px; padding: 0; background: #f5f7fa; vertical-align: top; }
.pp-jour-box { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 76px; padding: 3px 0; }
.pp-jnum { font-size: .72rem; font-weight: 600; color: #3e4c59; }
.pp-jfull { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: mixed; font-size: .72rem; font-weight: 400; color: #52606d; line-height: 1.1; letter-spacing: .02em; }
.pp-sem { background: #e3e9ef; color: var(--marine, #1d4e63); font-weight: 700; font-size: .68rem; padding: 2px 0; }
.pp-grille .pp-lundi { border-left: 3px solid #9aa5b1; }
.pp-aujourdhui { box-shadow: inset 0 0 0 100px rgba(46, 160, 67, .22); }
.pp-demi { font-size: .55rem; font-weight: 700; opacity: .9; margin-left: 1px; }
.pp-nom {
    text-align: left; padding: .2rem .5rem; white-space: nowrap;
    min-width: 130px; position: sticky; left: 0; background: #fff; z-index: 1;
}
.pp-coin { background: #f5f7fa; z-index: 2; }
.pp-section td {
    text-align: left; font-weight: 700; background: #eef2f6; color: var(--marine, #1d4e63);
    padding: .25rem .5rem; position: sticky; left: 0;
}
.pp-we { background: #f0f2f5; }
.pp-inactif { color: #7b8794; font-weight: 700; }
.pp-dot { color: #b9c1c9; font-weight: 700; }
.pp-vide { padding: .8rem; color: #7b8794; text-align: center; }

/* Codes de statut */
.st-guide     { background: #ffd9a8; color: #8a4b00; }   /* orange */
.st-caisse    { background: #cfe0ff; color: #1f4db8; }   /* bleu */
.st-repos     { background: #e4e7eb; color: #52606d; }   /* gris (inchangé) */
.st-conge     { background: #e5d4ff; color: #6a1fb0; }   /* violet */
.st-formation { background: #ffd6d6; color: #b3261e; }   /* rouge */
.st-horscontrat { background: #ffffff; color: #1f2933; }  /* présence hors contrat (forcée) */
.st-present   { background: #cfe0ff; color: #1f4db8; }   /* présence (J/M/AM) — bleu */
.st-sanssolde { background: #4a5158; color: #ffffff; }   /* sans solde (CSS) — anthracite */
.pp-grille td.st-sanssolde, .pp-lg .pp-cell.st-sanssolde { font-size: .6rem; letter-spacing: -.02em; }

.pp-legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .6rem 0; font-size: .82rem; color: #52606d; align-items: center; }
.pp-lg { display: inline-flex; align-items: center; gap: .35rem; }
.pp-lg .pp-cell { display: inline-block; width: 22px; height: 20px; line-height: 20px; text-align: center; border-radius: 3px; font-weight: 600; font-size: .72rem; }

/* Légendes contextuelles insérées dans le tableau (avant Vacances / avant Pression) */
.pp-legende-cell { position: sticky; left: 0; background: #fff; text-align: left; padding: .35rem .5rem; border-top: 1px solid #e4e7eb; }
.pp-legende-cell .pp-legende { margin: 0; }

/* Échelle de pression touristique : barre dégradée + indices repères à l'intérieur */
.pp-lg-press { align-items: center; }
.pp-press-echelle {
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 200px; height: 20px; padding: 0 5px; border-radius: 3px;
    background: linear-gradient(90deg, #fff3c4 0%, #fcd980 34%, #f7a03c 67%, #ef6c2f 100%);
    font-size: .64rem; font-weight: 700; color: #5a3b00; line-height: 20px;
}
.pp-press-echelle .pp-press-max { color: #fff; }

/* Édition du planning — clics cycliques */
.pp-edit-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
#ppEditToggle.actif { background: #e8730a; color: #fff; border-color: #e8730a; }
.pp-edit-warn { flex: 1 1 auto; background: #fff4e5; border: 1px solid #f2c48a; color: #8a4b00; border-radius: 6px; padding: .4rem .6rem; font-size: .82rem; }
.pp-edit-on .pp-editable { cursor: pointer; }
.pp-edit-on .pp-editable:hover { outline: 2px solid #2186eb; outline-offset: -2px; }
.pp-saving { opacity: .45; }

/* Ligne d'ajout d'un employé (bouton « + ») — visible seulement en mode Modification */
.pp-addrow { display: none; }
.pp-edit-on .pp-addrow { display: table-row; }
.pp-addrow td { text-align: left; background: #f7fafc; padding: .25rem .5rem; position: sticky; left: 0; }
.pp-add-btn { border: 1px dashed #98a6b3; background: #fff; color: #1d4e63; border-radius: 6px; padding: .2rem .6rem; font-size: .82rem; cursor: pointer; }
.pp-add-btn:hover { border-color: #2186eb; color: #1f4db8; }
.pp-add-select { padding: .2rem .4rem; font-size: .82rem; border: 1px solid #2186eb; border-radius: 6px; }

/* Sollicitation d'extras (email) */
.extras-dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .3rem .8rem; }
.extras-item { display: flex; align-items: baseline; gap: .4rem; padding: .25rem .3rem; border-radius: 6px; }
.extras-item:hover { background: #f0f3f5; }
.extras-item .extras-nom { font-weight: 600; }
.extras-item .extras-mail { color: #6b7680; font-size: .8rem; }
.extras-nomail { opacity: .55; }
.extras-objet { display: block; margin-bottom: .8rem; font-weight: 600; }
.extras-objet input { display: block; width: 100%; margin-top: .25rem; padding: .5rem; border: 1px solid var(--bordure); border-radius: 6px; font-weight: 400; }
.extras-editeur-label { font-weight: 600; margin-bottom: .35rem; }
.editeur-toolbar { display: flex; gap: .25rem; margin-bottom: .35rem; }
.editeur-toolbar button { min-width: 32px; padding: .25rem .5rem; border: 1px solid var(--bordure); background: #fff; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.editeur-toolbar button:hover { border-color: #2186eb; }
.editeur-zone { min-height: 180px; padding: .7rem .8rem; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; line-height: 1.55; }
.editeur-zone:focus { outline: 2px solid #2186eb; outline-offset: -1px; }
.jour-ligne { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.jour-ligne input { padding: .35rem .4rem; border: 1px solid var(--bordure); border-radius: 6px; }
.jour-ligne input[type=date] { min-width: 9rem; }
.extras-sous-titre { font-weight: 600; color: #52606d; font-size: .85rem; margin-bottom: .4rem; }
.extras-sous-titre-espace { margin-top: 1rem; }
.plage-ligne { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; flex-wrap: wrap; }
.plage-ligne input { padding: .35rem .4rem; border: 1px solid var(--bordure); border-radius: 6px; }
.plage-ligne input[type=date] { min-width: 9rem; }
.plage-mot { color: #52606d; font-size: .85rem; }
.tag-nonrepondu { background: #fdecec; color: #b3261e; }
.suivi-suppr-form { margin: 0; }

/* Page publique de validation des extras */
.valider-wrap { max-width: 560px; margin: 2rem auto; }
.valider-jour { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 1px solid var(--bordure); border-radius: 8px; margin-bottom: .5rem; }
.valider-jour input { width: 20px; height: 20px; }
.valider-jour .vj-date { font-weight: 600; }
.valider-jour .vj-h { color: #52606d; font-size: .85rem; }
.valider-recap li { margin: .2rem 0; }

/* Calendrier sous le planning : vacances scolaires (A/B/C) + jours fériés */
.pp-cal .pp-cal-lib { font-size: .7rem; font-weight: 600; color: #52606d; text-align: right; padding-right: .4rem; white-space: nowrap; }
.pp-cal .pp-cal-b .pp-cal-lib { color: #12506b; font-weight: 700; }
.pp-cal-cell { height: 15px; border: 1px solid #eceff1; }
.pp-cal-row .pp-lundi { border-left: 2px solid #cfd8dc; }
.pp-cal-row .pp-aujourdhui { box-shadow: inset 0 0 0 2px #ffd54f; }
.pp-vac-a { background: #ffe0b2; }
.pp-vac-b { background: #90caf9; }
.pp-vac-c { background: #c8e6c9; }
.pp-cal-feries .pp-ferie { color: #b3261e; text-align: center; font-weight: 700; line-height: 15px; }
.pp-ferie-pt { color: #b3261e; font-weight: 700; }
.pp-cal-press .pp-cal-cell { text-align: center; font-size: .58rem; font-weight: 700; color: #5a3b00; line-height: 15px; }
.pp-press-1 { background: #fff3c4; }
.pp-press-2 { background: #fcd980; }
.pp-press-3 { background: #f7a03c; }
.pp-press-4 { background: #ef6c2f; color: #fff; }

/* Ligne « Commentaires » : une note par jour, texte vertical comme les en-têtes de jours */
.pp-comment-row .pp-cal-cell { height: 120px; vertical-align: top; text-align: center; position: relative; padding: 2px 0 14px; }
.pp-comment-txt { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: mixed; font-size: .66rem; color: #3e4c59; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; max-width: 23px; max-height: 102px; overflow: hidden; }
.pp-comment-plus { position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%); width: 14px; height: 12px; padding: 0; line-height: 10px; font-size: .7rem; font-weight: 700; color: #52606d; background: #eceff1; border: 1px solid #cfd8dc; border-radius: 3px; cursor: pointer; }
.pp-comment-plus:hover { background: #2186eb; border-color: #2186eb; color: #fff; }
.pp-comment-bulle { position: fixed; z-index: 1000; width: 280px; padding: .5rem .6rem; font-size: .82rem; line-height: 1.35; color: #1f2933; background: #fff; border: 1px solid #9aa5b1; border-radius: 6px; box-shadow: 0 3px 12px rgba(0, 0, 0, .25); }
.pp-comment-bulle-jour { margin-bottom: .3rem; font-size: .7rem; font-weight: 700; text-transform: capitalize; color: #7b8794; }
.pp-comment-bulle-txt { max-height: 40vh; overflow-y: auto; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.pp-comment-bulle-aide { display: block; width: 100%; margin-top: .4rem; padding: .3rem 0 0; text-align: left; font-size: .75rem; color: #2186eb; background: none; border: 0; border-top: 1px solid #e2e5e9; cursor: pointer; }
.pp-comment-bulle-aide:hover { text-decoration: underline; }
.pp-comment-bulle-edit { width: 100%; box-sizing: border-box; font: inherit; padding: .3rem .4rem; border: 1px solid #2186eb; border-radius: 4px; resize: vertical; }
.pp-comment-bulle-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .4rem; }
.pp-bulle-btn { padding: .2rem .55rem; font-size: .78rem; color: #3e4c59; background: #eceff1; border: 1px solid #cfd8dc; border-radius: 4px; cursor: pointer; }
.pp-bulle-btn.pp-bulle-ok { color: #fff; background: #2186eb; border-color: #2186eb; }
.pp-comment-bulle-note { margin-top: .35rem; font-size: .68rem; color: #7b8794; }
.pp-edit-on .pp-comment-editable { cursor: pointer; }
.pp-edit-on .pp-comment-editable:hover { outline: 2px solid #2186eb; outline-offset: -2px; }

/* Ligne « Groupes » : nombre de groupes de visite réservés par jour (source CRM) */
.pp-groupes-cell { text-align: center; font-size: .72rem; color: #9aa5b1; }
.pp-groupes-actif { font-weight: 700; color: #b23a00; background: #fff3ea; }
.pp-groupes-lien { color: inherit; text-decoration: none; }
.pp-groupes-lien:hover { text-decoration: underline; }
.pp-modal { border: none; border-radius: 8px; padding: 0; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); width: 300px; max-width: 92vw; }
.pp-modal::backdrop { background: rgba(0, 0, 0, .35); }
.pp-modal form { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.pp-modal h3 { margin: 0; font-size: 1rem; color: var(--marine, #1d4e63); }
.pp-modal label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: #52606d; }
.pp-modal .pp-force { flex-direction: row; align-items: center; gap: .4rem; font-weight: 600; color: #a12; }
.pp-modal select { padding: .35rem; font-size: .95rem; }
.pp-warn { margin: 0; color: #a12; font-size: .82rem; background: #fdecec; border: 1px solid #f0b0b0; border-radius: 6px; padding: .4rem .5rem; }
.pp-modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .3rem; }

/* Configuration du jour par cases à cocher */
.config-choix .config-choix-tete { font-weight: 600; color: var(--marine, #1d4e63); margin-bottom: .3rem; }
.config-cols { display: flex; gap: 1rem; flex-wrap: wrap; margin: .4rem 0; }
.config-fieldset { border: 1px solid #d2d6dc; border-radius: 6px; padding: .4rem .6rem; min-width: 150px; }
.config-fieldset legend { font-size: .8rem; font-weight: 600; color: #52606d; padding: 0 .3rem; }
.config-fieldset .hint { display: block; margin-top: .2rem; }

/* Bandeau d'alertes opérateur (fil de l'eau) */
.alertes-fil { border-left: 4px solid #f0b429; background: #fffaf0; }
.alertes-fil .hint-warn { margin: .2rem 0; }

/* KPI opérationnels dans la vue fil */
.kpi-carte { padding: .5rem .8rem; margin-bottom: .7rem; }
.kpi-noms { display: block; font-size: .72rem; color: #52606d; margin-top: .15rem; line-height: 1.25; }
.kpi-pause-fin { font-weight: 700; color: #e8730a; white-space: nowrap; }
.pause-duree { font-size: .72rem; color: #7b8794; margin-left: .25rem; white-space: nowrap; }
.pause-hors { color: #b3261e; font-weight: 700; }
.pause-ligne-hors { background: #fdecec; }
.kpi-rebours { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-weight: 700; font-size: .95rem; color: #e8730a; font-variant-numeric: tabular-nums; }
.kpi-rebours .sablier { display: inline-block; width: 18px; height: 18px; vertical-align: middle; animation: sablier-tourne 2.4s ease-in-out infinite; }
.kpi-rebours.rebours-zero { color: #c00; }
@keyframes sablier-tourne { 0%, 65% { transform: rotate(0); } 82%, 100% { transform: rotate(180deg); } }

/* Tableau de bord (dashboard) : hub vers les modules */
.page-titre { margin: .3rem 0 .1rem; color: var(--marine, #1d4e63); }
.page-sous { margin: 0 0 1rem; color: #52606d; }
.dash-user { font-size: .9rem; color: #52606d; margin-right: .3rem; }
.nav-user { font-size: .85rem; color: #52606d; margin-right: .3rem; white-space: nowrap; }
.module-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; }
.module { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border: 1px solid #d7dde3; border-radius: 10px; background: #fff; text-decoration: none; color: inherit; position: relative; min-height: 110px; }
.module-actif { cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.module-actif:hover { border-color: var(--marine, #1d4e63); box-shadow: 0 3px 10px rgba(29,78,99,.15); transform: translateY(-2px); }
.module-icone { font-size: 1.9rem; line-height: 1; }
.module-titre { font-weight: 700; font-size: 1.05rem; color: var(--marine, #1d4e63); }
.module-desc { font-size: .8rem; color: #52606d; line-height: 1.3; }
.module-avenir, .module-verrou { background: #f2f4f6; color: #8a97a3; cursor: not-allowed; }
.module-avenir .module-titre, .module-verrou .module-titre { color: #6b7783; }
.module-avenir .module-icone, .module-verrou .module-icone { filter: grayscale(1); opacity: .6; }
.module-badge { margin-top: auto; align-self: flex-start; font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; background: #e3e8ec; color: #5a6672; }
.module-verrou .module-badge { background: #f6e4e4; color: #a05252; }

/* Page Utilisateurs & droits */
.carte-titre { margin: .1rem 0 .7rem; font-size: 1.05rem; color: var(--marine, #1d4e63); }
.tbl-users td, .tbl-users th { vertical-align: middle; }
.tbl-users .user-inactif { opacity: .55; }
.user-moi { font-size: .75rem; color: #7b8794; }
.user-date { white-space: nowrap; font-size: .85rem; color: #52606d; }
.user-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
/* Colonne « Actions » de la liste employés : le td reste une vraie cellule (hauteur
   alignée sur les autres colonnes) ; le flex est porté par un conteneur interne. */
.tbl-users .col-actions { vertical-align: middle; white-space: nowrap; text-align: center; }
.tbl-users .col-actions .user-actions { display: inline-flex; flex-wrap: nowrap; gap: .45rem; align-items: center; justify-content: center; }
.tbl-users .col-actions .btn { padding: .45rem .75rem; font-size: .88rem; line-height: 1.15; }
.tbl-users tbody td { padding-top: .3rem; padding-bottom: .3rem; }
/* Fiche incomplète : surlignage de la ligne (passe devant la zébrure par colonne) + tag d'alerte. */
.tbl-users tbody tr.emp-incomplet td:nth-child(n) { background: #fff7e0; }
.tbl-users tbody tr.emp-incomplet td:first-child { box-shadow: inset 4px 0 0 #e6a817; }
.tag-incomplet { background: #ffe6b3; color: #8a4b00; margin-left: .3rem; }
.frm-inline { margin: 0; display: inline; }
.frm-inline select { padding: .2rem .3rem; font-size: .85rem; }
.user-pwd { display: inline-block; }
.user-pwd > summary { display: inline-block; list-style: none; cursor: pointer; }
.user-pwd > summary::-webkit-details-marker { display: none; }
.frm-pwd { display: flex; gap: .3rem; margin-top: .3rem; }
.frm-pwd input[type=password] { padding: .25rem .4rem; font-size: .85rem; }
.tag-actif { background: #d7f2e0; color: #1c7a44; }
.tag-inactif { background: #ececec; color: #7b7b7b; }
.tag-prevu { background: #ffe7c2; color: #8a5300; }
.emp-section-row td.emp-section { background: #eef2f5; color: #33475b; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-top: 2px solid #cdd8e0; }
.emp-section-count { display: inline-block; margin-left: .4rem; background: #cdd8e0; color: #33475b; border-radius: 10px; padding: 0 .5rem; font-size: .72rem; font-weight: 600; }
.tag-avenir { background: #e3e8ec; color: #5a6672; font-size: .7rem; margin-left: .3rem; }
.tag-tempmdp { background: #fff4e5; color: #8a4b00; font-size: .68rem; margin-left: .3rem; }
.tag-acces { background: #e0ecff; color: #0043c9; font-size: .68rem; margin-left: .3rem; }
.tag-sans-acces { background: #f2f3f5; color: #98a2ac; font-size: .68rem; margin-left: .3rem; }
.tag-invit-envoi { background: #e7f0ff; color: #0057ff; font-size: .68rem; margin-left: .3rem; }
.tag-invit-ouvert { background: #fff4e5; color: #8a4b00; font-size: .68rem; margin-left: .3rem; }
.tag-invit-soumise { background: #d7f2e0; color: #1c7a44; font-size: .68rem; margin-left: .3rem; }
.chk-temp { flex-direction: row !important; align-items: center; gap: .35rem; font-size: .78rem; color: #52606d; }
.frm-create { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; }
.frm-create label { display: flex; flex-direction: column; font-size: .8rem; gap: .2rem; color: #52606d; }
.frm-create input, .frm-create select { padding: .35rem .45rem; }

/* Page Employés (module RH) */
.emp-nom { width: 8rem; }
.emp-email { width: 12rem; max-width: 100%; }
.emp-caisse { text-align: center; }
.frm-create .emp-chk { flex-direction: row; align-items: center; gap: .4rem; }

/* Fiche employé détaillée (RH lot 2) */
.fiche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem 1rem; }
.fiche-grid label { display: flex; flex-direction: column; font-size: .8rem; font-weight: 600; color: #52606d; gap: .25rem; }
.fiche-grid input { padding: .35rem .45rem; font-size: .95rem; }
.fiche-grid .fiche-large { grid-column: 1 / -1; }
.fiche-actions { display: flex; gap: .6rem; align-items: center; margin: .2rem 0 1rem; }
.fiche-actions .btn-suppr-fiche { margin-left: auto; }
.fiche-hint { font-size: .75rem; color: #98a2ac; font-weight: 400; }
.carte-sous { margin-top: 1.1rem; padding-top: .6rem; border-top: 1px solid var(--bordure); }
.ct-actions { display: flex; gap: .3rem; align-items: center; }
.ct-edit input, .ct-edit select { padding: .2rem .3rem; font-size: .82rem; width: 100%; box-sizing: border-box; }

/* Coordonnées bancaires : champs (1/4) à gauche, aperçu du justificatif (3/4) à droite */
.rib-layout { display: flex; gap: 1.2rem; align-items: stretch; flex-wrap: wrap; }
.rib-champs { flex: 1 1 220px; min-width: 210px; }
.rib-apercu { flex: 3 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: .4rem; }
.rib-cadre { flex: 1; min-height: 320px; border: 1px solid var(--bordure, #d5dbe0); border-radius: 6px; background: #f6f8fa; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rib-media { width: 100%; height: 100%; min-height: 320px; border: 0; object-fit: contain; background: #fff; }
.rib-vide { color: #98a2ac; font-size: .85rem; text-align: center; padding: 1rem; }
.rib-fichier-ok { color: #4a5560; font-size: .85rem; text-align: center; padding: 1rem; line-height: 1.5; }
.rib-apercu-actions { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .8rem; }
.rib-suppr { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; color: #52606d; }
.rib-champ-copie { display: flex; gap: .3rem; align-items: stretch; }
.rib-champ-copie input { flex: 1 1 auto; min-width: 0; }
.btn-copie { flex: 0 0 auto; padding: 0 .55rem; font-size: .95rem; line-height: 1; border: 1px solid var(--bordure, #d5dbe0); border-radius: 5px; background: #eef2f5; color: #35505f; cursor: pointer; }
.btn-copie:hover { background: #dde5ea; }
.btn-copie.ok { background: #d8f0dd; border-color: #8fce9b; color: #1c7a34; }
@media (max-width: 680px) { .rib-layout { flex-direction: column; } }
.ct-edit .inp-ct { max-width: 4.5rem; }
.ct-edit td { padding: .2rem .25rem; }

/* Vignette sticky (feuille du jour) : prochain départ + prochaine sortie, toujours visible */
.sticky-vignette {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
    display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
    background: var(--marine, #1d4e63); color: #fff; padding: .45rem 1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .25);
}
.sv-bloc { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.sv-lib { font-weight: 600; opacity: .85; }
.sv-val { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.sv-vide { opacity: .55; }
.sv-nom { font-weight: 700; font-size: 1.25rem; }
.sv-retard { display: inline-block; padding: .12rem .55rem; border-radius: 12px; background: var(--rouge, #dc3545); color: #fff; font-weight: 700; font-size: .9rem; animation: sv-blink 1s steps(1, end) infinite; }
.sv-heure { display: inline-block; padding: .12rem .55rem; border-radius: 12px; background: var(--vert, #157347); color: #fff; font-weight: 700; font-size: .9rem; animation: sv-blink 1s steps(1, end) infinite; }
.sv-retard[hidden], .sv-heure[hidden] { display: none; }   /* l'attribut hidden doit primer sur display:inline-block */
@keyframes sv-blink { 50% { opacity: .2; } }
.contenu { padding-bottom: 3.4rem; }   /* évite que la barre fixe masque le bas du contenu */
.tbl-droits th, .tbl-droits td { text-align: center; }
.tbl-droits td:first-child, .tbl-droits th:first-child { text-align: left; }
.droit-oui { color: #1c7a44; font-weight: 700; }
.droit-non { color: #c0c7cd; }

/* Popup d'avertissement « guide en pause » à l'ajout d'un créneau */
.dlg-pause { border: none; border-radius: 10px; padding: 0; max-width: 30rem; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.dlg-pause::backdrop { background: rgba(0,0,0,.45); }
.dlg-pause form { padding: 1.2rem 1.3rem; }
.dlg-pause-titre { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 700; color: #b91c1c; }
.dlg-pause-sub { margin: .6rem 0 1rem; font-size: .9rem; color: #555; }
.dlg-pause-actions { display: flex; justify-content: flex-end; gap: .6rem; }
.btn-danger { background: #dc2626; color: #fff; border-color: #b91c1c; }
.btn-danger:hover { background: #b91c1c; }

/* Grille des départs (onglet Planning) : heure × minute, vignettes info sans portée. */
.grille-visites { border-collapse: collapse; width: 100%; table-layout: fixed; }
.grille-visites th, .grille-visites td { border: 1px solid #d3d9e0; padding: 2px; vertical-align: top; }
.grille-visites thead th { background: var(--marine); color: #fff; font-size: .74rem; padding: .3rem 2px; text-align: center; }
.grille-visites .gv-h { width: 2.6rem; background: #eef1f5; font-weight: 700; color: #334; font-size: .8rem; text-align: center; vertical-align: middle; }
.gv-vig { border: 1px solid; border-left-width: 4px; border-radius: 4px; padding: 2px 4px; font-size: .68rem; line-height: 1.2; }
.gv-vig .gv-nom { display: block; font-weight: 700; font-size: .72rem; }
.gv-vig .gv-dep, .gv-vig .gv-nb, .gv-vig .gv-ret { display: block; font-size: .64rem; color: #2a2f36; }
.gv-vig .gv-ret { font-weight: 600; }
.gv-previ { opacity: .55; border-style: dashed; }
.grille-visites .tk-rouge  { background:#ffdede; border-color:#E60000; }
.grille-visites .tk-bleu   { background:#dbe7ff; border-color:#0057FF; }
.grille-visites .tk-orange { background:#ffe4d0; border-color:#FF6A00; }
.grille-visites .tk-violet { background:#eeddff; border-color:#8F00FF; }
.grille-visites .tk-vert   { background:#d6f3e0; border-color:#00A83B; }
.grille-visites .tk-blanc  { background:#f4f6f8; border-color:#c7ccd4; }
.grille-visites .tk-marron { background:#ecddd0; border-color:#703800; }
.grille-visites .tk-jaune  { background:#fdfdc2; border-color:#D4C400; }

/* Page de diagnostic de la passerelle Pretix (app/pretix_feuille_jour_test.php) */
.pfj-datenav { gap: .4rem; align-items: center; }
.pfj-mode-live { color: #b3261e; }
.pfj-mode-test { color: #8a5b00; }
.pfj-sante { margin-top: .35rem; font-size: .85rem; font-weight: 400; }
.pfj-creneau-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.pfj-heure { font-size: 1.05rem; font-weight: 800; color: var(--marine); font-variant-numeric: tabular-nums; }
.pfj-type { font-weight: 600; color: #3e4c59; }
.pfj-compteurs { margin-left: auto; font-size: .82rem; color: #52606d; }
.pfj-statut-open { background: #e6f4ea; color: #12633c; }
.pfj-statut-closed { background: #eceff3; color: #52606d; }
.pfj-statut-cancelled { background: #fdecec; color: #b3261e; }
.pfj-surbooking { background: #fdecec; color: #b3261e; }
.pfj-ligne-detail { font-size: .82rem; line-height: 1.35; }
.pfj-sous { font-size: .75rem; color: #7b8794; }
.pfj-vide { color: var(--gris); font-style: italic; margin: .2rem 0; }