/* Feuille de style de l'application "Cadence BTP".
   Palette reprise du schéma de base de données pour rester cohérent :
   bleu plan/chantier en accent principal, orange chantier pour les
   actions sensibles (annuler, signaler un problème). */

:root {
  --bg: #F2F5F8;
  --surface: #FFFFFF;
  --surface-2: #E7ECF1;
  --text: #1A2333;
  --text-muted: #57647A;
  --border: #C9D2DC;
  --accent: #1E4E8C;
  --accent-strong: #153A6B;
  --accent-soft: #DCE8F7;
  --alerte: #C85A22;
  --alerte-soft: #F7E1D2;
  --succes: #1F7A4D;
  --succes-soft: #DDF0E5;
  --radius: 6px;
  /* Bandeau supérieur inspiré de l'admin Django (bandeau bleu-gris foncé,
     texte blanc) — volontairement fixe, pas repris dans le bloc dark mode
     ci-dessous : comme l'admin Django, il ne suit pas le thème clair/sombre
     de l'utilisateur. */
  --entete-bg: #14385C;
  --entete-bg-degrade: #1B4A78;
  --entete-texte: #FFFFFF;
  --entete-texte-discret: rgba(255, 255, 255, .78);
  /* Texte des fonds --surface/--surface-2/--accent — calculés
     automatiquement d'après la couleur choisie (voir
     logistique.context_processors.apparence) ; valeurs ci-dessous
     reprises seulement tant que ce calcul n'a pas encore tourné. */
  --text-surface: var(--text);
  --text-surface-muted: var(--text-muted);
  --text-surface2: var(--text);
  --text-surface2-muted: var(--text-muted);
  --text-accent: #FFFFFF;
  --reliquat-bg: var(--alerte-soft);
  --text-reliquat: var(--alerte);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1620;
    --surface: #161F2C;
    --surface-2: #1D2939;
    --text: #E6ECF4;
    --text-muted: #96A6BE;
    --border: #2B394F;
    --accent: #7CAAE8;
    --accent-strong: #A8C6F2;
    --accent-soft: #1E3454;
    --alerte: #EE8C4E;
    --alerte-soft: #3B2A1C;
    --succes: #4FBE85;
    --succes-soft: #163526;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

a { color: var(--accent); }

.page { max-width: 960px; margin: 0 auto; padding: 20px 16px 60px; }

/* --- En-tête (bandeau inspiré de l'admin Django : fond foncé, texte
   blanc, toujours dans ces couleurs quel que soit le thème clair/sombre
   choisi par l'utilisateur) --- */
.entete {
  background: linear-gradient(180deg, var(--entete-bg-degrade) 0%, var(--entete-bg) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
  position: sticky; top: 0; z-index: 20;
}
.entete-barre {
  max-width: 960px; margin: 0 auto; padding: 4px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.marque { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--entete-texte); }
.logo-marque { width: 24px; height: 24px; border-radius: 6px; display: block; }
.nav { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--entete-texte-discret); padding: 6px 4px; border-bottom: 2px solid transparent; }
.nav a.actif, .nav a:hover { color: var(--entete-texte); border-bottom-color: var(--entete-texte); }
/* Icônes du menu (voir base.html) : le texte reste dans l'attribut title
   (infobulle) plutôt qu'affiché — pastille ronde au survol/actif plutôt
   que le soulignement utilisé pour un lien texte. */
.nav-icones a {
  font-size: 18px; line-height: 1; padding: 5px !important; border-radius: 50%;
  border-bottom-color: transparent !important;
}
.nav-icones a.actif, .nav-icones a:hover { background: rgba(255, 255, 255, .16); }
/* L'émoji "Utilisateurs" (silhouettes) rend en tons gris/bleu-gris avec
   la police d'emoji de Windows, peu lisible sur le fond foncé du bandeau
   — fond clair permanent (pas seulement au survol) pour ce lien précis. */
.nav-icones a[data-icone="utilisateurs_liste"] { background: rgba(255, 255, 255, .16); }
.lien-admin-django { font-size: 17px; line-height: 1; padding: 4px !important; border-radius: 50%; }
.lien-admin-django:hover { background: rgba(255, 255, 255, .12); border-bottom-color: transparent !important; }
/* .form-deconnexion est un <form> — sans ce flex-direction explicite, il
   hérite de la règle générique `form { flex-direction: column }` (pensée
   pour les vrais formulaires de saisie) et empile nom/Mot de passe/
   Déconnexion sur 3 lignes au lieu d'une seule. */
.form-deconnexion { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-left: auto; }
.form-deconnexion .lien-bouton { color: var(--entete-texte-discret); }
.form-deconnexion .lien-bouton:hover { color: var(--entete-texte); }
.qui { color: var(--entete-texte-discret); font-size: 13px; }

/* --- Titres & sections --- */
h1 { font-size: 24px; margin: 4px 0 16px; }
h2 { font-size: 18px; margin: 0 0 10px; }
.entete-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.bloc { margin: 28px 0; }
.meta { color: var(--text-muted); font-size: 14px; margin: 4px 0 16px; }
.discret { color: var(--text-muted); font-size: 13px; }
.vide { color: var(--text-muted); font-style: italic; }

/* Suggestions d'adresses proches quand le géocodage n'est pas assez fiable
   pour être appliqué seul — voir static/js/geocodage.js */
.geocodage-candidats { margin-top: 4px; }
.geocodage-candidats ul { list-style: none; margin: 4px 0 0; padding: 0; }
.geocodage-candidats li { margin: 2px 0; }
.geocodage-candidats button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); text-decoration: underline; font-size: 13px; text-align: left;
}
.geocodage-candidats button:hover { color: var(--accent-strong); }

/* --- Messages --- */
.messages { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.message { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; }
.message-success { background: var(--succes-soft); color: var(--succes); }
.message-error { background: var(--alerte-soft); color: var(--alerte); }
.alerte { background: var(--alerte-soft); color: var(--alerte); padding: 10px 14px; border-radius: var(--radius); }
.info { background: var(--accent-soft); color: var(--accent-strong); padding: 10px 14px; border-radius: var(--radius); }

/* --- Cartes --- */
.liste-cartes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carte {
  background: var(--surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
a.carte { text-decoration: none; color: var(--text-surface); }
a.carte:hover { border-color: var(--accent); }
.carte-cliquable, tr.ligne-cliquable { cursor: pointer; }
.carte-cliquable:hover { border-color: var(--accent); }
tr.ligne-cliquable:hover td { background: var(--surface-2); }
.carte-entete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Tuiles compactes des pages d'accueil/hub (accueil.html) : icône puis
   nom sur une ligne, description en info-bulle (attribut title) plutôt
   qu'affichée — voir accueil.html. */
.liste-cartes-modules { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.carte-module { flex-direction: row; align-items: center; padding: 10px 14px; gap: 10px; }
.carte-module .module-emoji { font-size: 22px; line-height: 1; }

/* Widgets de la page d'accueil (suivi chauffeur, suivi des locations) —
   côte à côte sur grand écran, empilés sur mobile. */
.grille-widgets-accueil { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 24px; }
.carte-connexion { max-width: 340px; margin: 60px auto; }
.ligne-detail { margin: 0; font-size: 14px; }

/* --- Badges de statut --- */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.badge-en_attente, .badge-brouillon, .badge-a_faire { background: var(--surface-2); color: var(--text-surface2-muted); }
.badge-planifiee { background: var(--accent-soft); color: var(--accent-strong); }
.badge-validee, .badge-en_cours { background: var(--accent); color: var(--text-accent); }
.badge-livree, .badge-livre, .badge-terminee { background: var(--succes-soft); color: var(--succes); }
.badge-annulee, .badge-probleme { background: var(--alerte-soft); color: var(--alerte); }
.badge-partiel, .badge-partiellement_livree { background: var(--alerte-soft); color: var(--alerte-strong, var(--alerte)); }

/* --- Demande reliquat (reprogrammée après problème ou livraison partielle) --- */
.carte-reliquat { background: var(--reliquat-bg); color: var(--text-reliquat); border-color: var(--alerte); }
tr.ligne-reliquat td { background: var(--reliquat-bg); color: var(--text-reliquat); }
.mention-reliquat { color: var(--text-reliquat); font-size: 12px; font-weight: 600; }
.mention-chauffeur { color: var(--accent-strong); font-size: 12px; font-weight: 600; }

/* --- Formulaires --- */
form { display: flex; flex-direction: column; gap: 12px; }
.formulaire-demande fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.formulaire-demande legend { padding: 0 6px; font-weight: 600; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-muted); }
.champ, input[type=text], input[type=password], input[type=number], input[type=date], select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text-surface);
}
.champ-ordre { width: 70px; }
.champ-heure { width: 110px; }
.lignes-formset { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ligne-formset { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.champ-large { flex: 1; min-width: 180px; }
.case-suppr { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.case-cochee { flex-direction: row; align-items: center; gap: 8px; }
.erreur-champ { color: var(--alerte); font-size: 12px; }

.bouton, .lien-bouton {
  cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-surface);
  padding: 5px 16px; border-radius: var(--radius); font: inherit; text-decoration: none; text-align: center;
  line-height: 1.4;
}
.bouton-principal { background: var(--accent); border-color: var(--accent); color: var(--text-accent); }
.bouton-alerte { background: var(--alerte); border-color: var(--alerte); color: #fff; }
.lien-bouton { border: none; background: none; color: var(--accent); padding: 4px 0; font-size: 13px; }
.lien-bouton-danger { color: var(--alerte); }
.bouton-petit { padding: 3px 10px; font-size: 12.5px; }
.masque { display: none; }

/* --- Tables --- */
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.table thead th { background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-surface2-muted); }
.table tbody tr:last-child td { border-bottom: none; }
.ligne-alerte td { background: var(--alerte-soft); }
.alerte-inline { color: var(--alerte); font-size: 12px; margin-left: 6px; }

/* --- Détail jour par jour de la semaine, dépliable (heures_sup_decompte.html) :
   des <tr> ordinaires du même tableau (pas un tableau imbriqué), pour que
   leurs colonnes restent alignées avec l'en-tête sans calcul manuel — le
   jour occupe les deux premières colonnes (bouton +/- et Salarié) via
   colspan="2". --- */
.bouton-detail-semaine {
  width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text-surface2-muted); font: inherit; font-weight: 700;
  line-height: 1; cursor: pointer;
}
.bouton-detail-semaine:hover { background: var(--accent-soft); color: var(--accent-strong); }
/* Même fond gris clair pour toutes les lignes de détail (jours du mois
   affiché ou d'un mois voisin) — seule la police italique distingue encore
   un jour hors mois (voir plus bas). Lignes resserrées (moins de padding
   vertical) pour rester compactes malgré les 7 jours par salarié déplié. */
.ligne-detail-semaine td { font-size: 13px; padding-top: 3px; padding-bottom: 3px; background: var(--surface-2); }
/* Trait fin de séparation entre colonnes. */
#tableau-heures-sup th, #tableau-heures-sup td { border-right: 1px solid var(--border); }
#tableau-heures-sup th:last-child, #tableau-heures-sup td:last-child { border-right: none; }
/* Jour d'un mois voisin (semaine à cheval) : police italique. */
.jour-hors-mois td { font-style: italic; }

/* --- Tableaux "Variables de paie" / "Contrôle des heures par semaine"
   (paie_variables_revue.html) : colonnes redimensionnables individuellement
   à la souris (une <col> par colonne, largeur mémorisée en localStorage —
   voir le JS du gabarit), en-têtes centrés, quadrillage fin. Réutilise la
   poignée .poignee-redim du planning RH (voir plus bas) — chaque <th> ici
   porte la sienne. Un en-tête à plusieurs mots passe à la ligne plutôt que
   de tronquer (voir le JS : la police ne réduit que si un mot pris
   isolément ne tient plus, jamais au-delà de sa taille par défaut). */
#tableau-variables thead th, #tableau-controle thead th { text-align: center; }
.table-redimensionnable th { position: relative; white-space: normal; overflow-wrap: break-word; }
#tableau-variables th, #tableau-variables td,
#tableau-controle th, #tableau-controle td { border-right: 1px solid var(--border); }
#tableau-variables th:last-child, #tableau-variables td:last-child,
#tableau-controle th:last-child, #tableau-controle td:last-child { border-right: none; }

/* --- Widget de suivi des tournées en cours (voir demandes_en_attente.html) --- */
.carte-suivi-tournee { border-left: 4px solid var(--border); }
.carte-suivi-alerte { border-left-color: var(--alerte); }
.carte-suivi-tournee .alerte-inline { display: block; margin-left: 0; margin-top: 2px; }

/* --- Écran chauffeur --- */
.liste-arrets-chauffeur { display: flex; flex-direction: column; gap: 14px; }
.carte-arret { border-left: 4px solid var(--border); }
.carte-arret-en_cours { border-left-color: var(--accent); }
.carte-arret-livre { border-left-color: var(--succes); }
.carte-arret-probleme { border-left-color: var(--alerte); }
.actions-arret { margin-top: 8px; }
.boutons-arret { display: flex; gap: 8px; flex-wrap: wrap; }
.boutons-arret .bouton { flex: 1; min-width: 130px; }

/* --- Bascule cartes/tableau et historique --- */
.barre-bascule { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.groupe-bascule { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.bouton-bascule { padding: 6px 12px; font-size: 13px; text-decoration: none; color: var(--text-surface-muted); background: var(--surface); }
.bouton-bascule.actif { background: var(--accent); color: var(--text-accent); }
.groupe-boutons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-inline { display: inline; }
#formulaire-periode { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 16px; }

/* --- Détail d'arrêt repliable (écran chauffeur) --- */
.carte-arret > summary { cursor: pointer; list-style: none; }
.carte-arret > summary::-webkit-details-marker { display: none; }
.carte-arret[open] > summary { margin-bottom: 8px; }
.fieldset-elements { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 8px 0; }
.fieldset-elements legend { font-size: 12px; color: var(--text-muted); padding: 0 4px; }
.case-element { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--text-surface); padding: 4px 0; }
.bloc-depart, .bloc-carburant { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; }
.ligne-carburant { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.champ-inline { flex-direction: row; align-items: center; gap: 8px; }

.barre-selecteur-chauffeur { margin-bottom: 16px; }

.dialog-email {
  width: min(560px, 90vw);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  background: var(--surface);
  color: var(--text);
}
.dialog-email::backdrop { background: rgba(0, 0, 0, 0.45); }
.dialog-email textarea { width: 100%; }

/* --- Bouton à bascule « plein nécessaire », relief 3D --- */
.bouton-3d {
  cursor: pointer; font: inherit; font-weight: 600; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 18px; color: var(--text-surface);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: 0 3px 0 var(--border), 0 5px 8px rgba(0, 0, 0, .18);
  transform: translateY(0); transition: transform .08s, box-shadow .08s, background .08s, color .08s;
}
.bouton-3d:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border), 0 2px 3px rgba(0, 0, 0, .18); }
.bouton-3d.enfonce {
  color: #fff; border-color: var(--alerte);
  background: linear-gradient(180deg, var(--alerte) 0%, var(--alerte-strong, #9C4416) 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4);
  transform: translateY(2px);
}

/* --- Suggestions d'éléments (bibliothèque), sous ou au-dessus du champ --- */
.champ-element-conteneur { position: relative; display: block; }
.suggestions-element {
  position: absolute; left: 0; right: 0; top: 100%; margin: 2px 0 0; z-index: 20;
  background: var(--surface); color: var(--text-surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px; list-style: none; max-height: 220px; overflow-y: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}
.suggestions-element[data-position="haut"] { top: auto; bottom: 100%; margin: 0 0 2px; }
.suggestions-element li { padding: 7px 10px; border-radius: var(--radius); cursor: pointer; font-size: 14px; }
.suggestions-element li:hover, .suggestions-element li.suggestion-active { background: var(--accent-soft); color: var(--accent-strong); }

.carte-itineraire { height: 420px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.ligne-lieu-trajet td { background: var(--surface-2); color: var(--text-surface2); font-weight: 600; }
.ligne-connecteur td { padding: 3px 12px; border: none; }
.segment-trajet {
  display: block; width: 13px; height: 13px; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: transform .12s;
}
.segment-trajet:hover { transform: scale(1.5); }
.champ-lieu-libre { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-weight: normal; }
.champ-lieu-libre .champ { width: auto; flex: 1; min-width: 140px; }

/* --- Réordonnancement des arrêts par glisser-déposer (voir tournee_detail.html) --- */
.poignee-glisser { cursor: grab; margin-right: 6px; color: var(--text-surface-muted); font-size: 16px; user-select: none; }
tr[draggable="true"]:active .poignee-glisser, .ligne-en-glissement .poignee-glisser { cursor: grabbing; }
.ligne-en-glissement { opacity: .4; }
.ligne-survolee-glisser { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }

/* --- Groupe de cases à cocher (ex. matériel à prendre) --- */
.champ-cases { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-muted); }
.titre-champ { font-weight: inherit; }
.champ-cases label { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }

/* --- Carte de la fiche lieu (voir lieu_form.html) : position du lieu et
   cercles des zones de trajet centrés sur l'entreprise utilisatrice. --- */
.carte-lieu { height: 320px; margin: 8px 0; border: 1px solid var(--border); border-radius: var(--radius); }
.marqueur-entreprise { font-size: 20px; line-height: 1; text-align: center; }

/* --- Planning RH (Gantt, voir rh_planning.html) --- */
.palette-planning { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.palette-groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-right: 10px; border-right: 1px solid var(--border); }
.palette-groupe:last-child { border-right: none; padding-right: 0; }
.palette-outil { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 2px solid transparent; border-radius: var(--radius); background: var(--surface-2); color: var(--text-surface); cursor: pointer; font: inherit; font-size: 13px; }
.palette-outil.actif { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pastille-couleur { width: 12px; height: 12px; border-radius: 3px; flex: none; }
/* Menus déroulants chantier / motif d'absence (voir rh_planning.html) :
   regroupent ce qui était un bouton par chantier ou par motif — même mise
   en évidence que .palette-outil.actif une fois une valeur choisie (le
   premier choix, vide, désélectionne l'outil ; la touche Échap ou le
   bouton dédié font de même). */
.palette-select-chantier.actif, .palette-select-absence.actif { border: 2px solid var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* Le menu absence a des libellés longs (jusqu'à 30 caractères) : largeur
   plafonnée plutôt que la largeur native, qui s'ajuste au texte le plus
   long et prend sinon toute la place dans la palette. */
.palette-select-absence { max-width: 150px; }

.barre-planning { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }

/* Colonne salarié figée : deux <table> côte à côte (voir le commentaire
   HTML dans rh_planning.html) plutôt qu'une colonne position:sticky dans
   un seul tableau — un <td>/<th> sticky n'adopte pas de façon fiable un
   changement de largeur de colonne après le premier rendu (constaté à
   l'usage, sur plusieurs méthodes, y compris un rendu serveur direct —
   limitation du navigateur). Le petit tableau de gauche n'est simplement
   jamais dans la zone de défilement horizontal : pas besoin de sticky du
   tout, et sa colonne se redimensionne normalement, comme celles de
   droite. Les deux tableaux doivent donc garder des hauteurs de ligne
   identiques pour rester alignés (voir plus bas). */
.planning-scinde { display: flex; align-items: flex-start; }
.colonne-fixe { flex: none; }

/* border-collapse: separate (pas collapse) — évite les problèmes de
   bordures dédoublées/disparues avec table-layout: fixed quand une ligne
   de groupe (colspan) s'intercale (bascule « Regrouper par chantier »).
   table-layout: fixed — indispensable : en layout auto (par défaut), une
   ligne de regroupement (<td colspan>) force le navigateur à recalculer la
   largeur de chaque colonne selon son contenu, ce qui décale toute la
   grille par rapport au mode Alphabétique qui n'a pas cette ligne — d'où
   l'impression de grille instable en changeant de tri. En layout fixe,
   seule la largeur du <colgroup>/de la première ligne compte. */
.table-personnel-fixe, .grille-planning { border-collapse: separate; border-spacing: 0; font-size: 12.5px; table-layout: fixed; }
.table-personnel-fixe th, .table-personnel-fixe td, .grille-planning th, .grille-planning td {
  border-style: solid; border-color: var(--border); border-width: 0 1px 1px 0; padding: 0; text-align: center; overflow: hidden;
}
.table-personnel-fixe thead th, .grille-planning thead th { border-top-width: 1px; }
/* Hauteurs de ligne identiques entre les deux tableaux, indispensable
   pour rester alignés — chacun n'a que ses propres cellules pour décider
   de la hauteur de ses lignes (les deux <thead><tr> et le corps). */
.ligne-entete-semaines th, .ligne-entete-semaines td { height: 24px; }
.ligne-entete-jours th, .ligne-entete-jours td { height: 32px; }
.table-personnel-fixe tbody tr:not(.ligne-groupe), .grille-planning tbody tr:not(.ligne-groupe) { height: 40px; }
.table-personnel-fixe tr.ligne-groupe, .grille-planning tr.ligne-groupe { height: 32px; }

/* Largeurs portées par <colgroup> (voir rh_planning.html), pas par les
   cellules — indispensable pour le redimensionnement à la souris : une
   seule <col class="col-jour" span="N"> pour tous les jours veut dire
   qu'ajuster sa largeur (JS) redimensionne toutes les colonnes de jour
   d'un coup, toujours à l'identique. */
.col-personnel { width: 140px; }
.col-jour { width: 56px; }
.grille-planning th.entete-jour { position: relative; padding: 4px 2px; font-weight: 500; background: var(--surface-2); color: var(--text-surface2); white-space: nowrap; }
.grille-planning .texte-entete-jour { font-size: var(--taille-jour, inherit); }
/* En mode « Regrouper par chantier », l'en-tête de chaque jour devient un
   lien (choisir la date qui pilote le regroupement, voir rh_planning dans
   views.py) — même apparence que le texte simple, pas un lien classique. */
a.texte-entete-jour { color: inherit; text-decoration: none; display: block; cursor: pointer; }
a.texte-entete-jour:hover { text-decoration: underline; }
/* Colonne du jour choisi pour le regroupement par chantier : cellules
   assombries d'un ton (filter s'applique à toute cellule quelle que soit
   sa couleur de fond — y compris les puces de chantier à l'intérieur). */
.entete-jour.jour-selectionne, .cellule-planning.jour-selectionne { filter: brightness(0.85); }
.table-personnel-fixe td.nom-personnel, .table-personnel-fixe th.entete-coin {
  position: relative; background: var(--surface); text-align: left; padding: 6px 10px;
  white-space: nowrap; text-overflow: ellipsis; font-weight: 500; border-left-width: 1px;
}
.table-personnel-fixe th.entete-coin { background: var(--surface-2); }
.grille-planning th.entete-semaine { background: var(--surface-2); color: var(--text-surface2); font-weight: 600; padding: 3px 2px; }

/* Poignées de redimensionnement — bande fine sur le bord droit de la
   colonne salarié (poignee-redim-personnel, une seule instance) et de
   chaque en-tête de jour (poignee-redim-jour, une par jour, mais toutes
   pilotent la même largeur partagée .col-jour — voir le JS). */
.poignee-redim { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 4; }
.poignee-redim:hover, .poignee-redim.en-cours { background: var(--accent); opacity: .5; }
.jour-aujourdhui { box-shadow: inset 2px 0 0 var(--alerte), inset -2px 0 0 var(--alerte); }
/* Le nom du chantier (ligne de regroupement), sur le tableau de gauche —
   la barre de couleur qui continue sur le tableau de droite (colspan,
   sans texte) est stylée séparément par .ligne-groupe td ci-dessous. */
.ligne-groupe td { background: var(--accent-soft); padding: 6px 10px; border-left-width: 1px; }
.ligne-groupe-titre { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; text-align: left; white-space: nowrap; text-overflow: ellipsis; }

.cellule-planning { height: 40px; vertical-align: top; cursor: pointer; padding: 2px !important; background: var(--surface); position: relative; }
.grille-planning th.entete-jour.jour-non-travaille, .cellule-planning.jour-non-travaille { background: var(--surface-2); }
.cellule-planning.double-affectation { box-shadow: inset 0 0 0 2px var(--alerte); }
.cellule-planning.verrouille {
  cursor: not-allowed;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 6px, var(--surface-2) 6px, var(--surface-2) 12px);
}
.cellule-planning.verrouille::after { content: "🔒"; position: absolute; top: 1px; right: 2px; font-size: 9px; opacity: .6; }
/* Pendant l'édition fine d'une cellule (voir .edition-cellule plus bas),
   le popover peut être plus large que la cellule elle-même (colonnes de
   jour parfois très étroites) — overflow: visible pour ne pas le rogner,
   z-index pour qu'il passe au-dessus des cellules voisines. */
.cellule-planning.en-edition { overflow: visible; z-index: 5; }
.chips-cellule { display: flex; flex-direction: column; gap: 2px; }
.chip-affectation { display: block; min-height: 1.5em; border-radius: 3px; padding: 1px 4px; color: #fff; font-size: var(--taille-jour, 11px); line-height: 1.5; text-shadow: 0 1px 1px rgba(0,0,0,.25); white-space: nowrap; }
.chip-absence { border-radius: 3px; padding: 1px 4px; font-size: var(--taille-jour, 11px); line-height: 1.5; background: var(--surface); color: var(--text-surface-muted); border: 1px dashed var(--border); white-space: nowrap; }
/* position: absolute (pas dans le flux) : le tableau des jours défile
   indépendamment du petit tableau des noms (voir le commentaire dans
   rh_planning.html) — si ce popover agrandissait sa cellule normalement,
   la ligne grandirait seulement côté jours, désalignant les deux tableaux
   pendant l'édition. En overlay flottant, la hauteur de la ligne ne bouge
   jamais. */
.edition-cellule {
  position: absolute; top: 0; left: 0; z-index: 10; width: 110px;
  display: flex; flex-direction: column; gap: 3px; padding: 3px;
  background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.edition-cellule input[type=number] { width: 44px; font-size: 11px; padding: 2px; }
.edition-cellule .lien-bouton { font-size: 11px; padding: 1px 0; }

@media (max-width: 640px) {
  /* En ligne, .nav (flex:1) peut devenir plus haute que .marque/.form-
     deconnexion dès qu'elle contient beaucoup d'icônes (modules + raccourcis
     admin) et wrap sur plusieurs lignes — avec align-items:center sur
     .entete-barre, ces deux éléments plus courts se retrouvaient alors
     recentrés au milieu de cette colonne d'icônes, superposés à elle.
     Empiler les 3 blocs en colonne l'évite complètement. */
  .entete-barre { gap: 10px; flex-direction: column; align-items: stretch; }
  .nav { flex: none; }
  .form-deconnexion { margin-left: 0; }
  h1 { font-size: 20px; }
}