/* CRM Dispatch - le seul fichier de style du projet (cahier, partie 3, section 2).
   Couleurs et espacements repris du prototype V9.1 ; tout se règle ici, à un seul endroit.
   Règle des écrans (Marc, 20 octobre) : peu encombrés, informations utiles à la page, élément en cours mis en avant. */

:root {
  --fond: #fafbf9;
  --surface: #ffffff;
  --surface-2: #f4f6f3;
  --texte: #17232b;
  --discret: #566871;
  --trait: #d3dad6;
  --accent: #b3600f;
  --accent-texte: #ffffff;
  --barre: #e4e9e5;
  --ok: #17653f;
  --ok-fond: #dcf0e4;
  --info: #1b5a93;
  --info-fond: #dbeaf8;
  --alerte: #7d5200;
  --alerte-fond: #f7e9c4;
  --erreur: #a8231b;
  --erreur-fond: #f8dcd9;
  --ombre: 0 1px 2px rgba(23, 35, 43, 0.08), 0 8px 24px rgba(23, 35, 43, 0.08);
  --police: system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titre: "Arial Narrow", Arial, sans-serif;
  --police-code: ui-monospace, Menlo, Consolas, monospace;
  --espace: 0.75rem;
  --rayon: 6px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--police); color: var(--texte); background: var(--fond); }
h1, h2, h3 { font-family: var(--police-titre); margin: 0 0 var(--espace); }
a { color: var(--info); }
/* Boutons (M17, recette du 21 octobre) : cadre net et texte en gras ; le bouton principal de chaque bloc en orange. */
button, .bouton {
  font: inherit; font-weight: 600; padding: 0.5rem 1rem; border: 2px solid var(--discret); border-radius: var(--rayon);
  background: var(--surface); color: var(--texte); cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .bouton:hover { border-color: var(--accent); }
button.principal, .bouton.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
button.principal:hover, .bouton.principal:hover { background: #8f4c0b; border-color: #8f4c0b; }
input, select, textarea { font: inherit; padding: 0.4rem; border: 1px solid var(--trait); border-radius: var(--rayon); }

/* En-tête commun */
.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace);
  padding: 0.5rem 1rem; background: var(--barre); border-bottom: 1px solid var(--trait);
}
.entete .nom-appli { font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem; }
.entete nav a { margin-right: var(--espace); text-decoration: none; color: var(--texte); }
.entete nav a.en-cours { font-weight: 700; border-bottom: 3px solid var(--accent); }
.entete .a-droite { margin-left: auto; display: flex; align-items: center; gap: var(--espace); }
.entete .heure { font-family: var(--police-code); color: var(--discret); }
.entete form { margin: 0; }
main { padding: 1rem; }

/* Pages simples (connexion, double vérification) */
.page-etroite { max-width: 34rem; margin: 2rem auto; padding: 0 1rem; }
.page-etroite label { display: block; margin-top: var(--espace); }
.page-etroite input[type=text], .page-etroite input[type=password] { width: 100%; max-width: 20rem; }
.code-saisi { font-size: 1.4rem; letter-spacing: 0.2rem; width: 12rem; }
/* Messages et alertes (M17) : fond soutenu, bordure épaisse à gauche, texte en gras, signe « ! » pour les alertes. */
.erreur { color: var(--erreur); font-weight: 700; background: var(--erreur-fond); border-left: 6px solid var(--erreur); padding: 0.4rem 0.6rem; border-radius: var(--rayon); }
.discret { color: var(--discret); font-size: 0.9rem; }
.cle { font-family: var(--police-code); font-size: 1.1rem; background: var(--surface-2); padding: 0.5rem; word-break: break-all; }
.codes { font-family: var(--police-code); font-size: 1.3rem; columns: 2; background: var(--surface-2); padding: 1rem 1rem 1rem 2.5rem; }
.qr svg { width: 220px; height: 220px; }

/* Board : colonnes dans l'ordre de la maquette ; une colonne vide est réduite à son titre (Q4). */
.filtre { margin-bottom: var(--espace); }
.board { display: flex; flex-wrap: wrap; gap: var(--espace); align-items: flex-start; padding-bottom: var(--espace); }
/* Titres toujours à l'horizontale (demande de la Direction, 20 octobre). Colonne ouverte (avec des jobs) : large et mise
   en avant (bandeau de couleur). Colonne vide : repliée en un petit onglet discret, titre lisible. */
.colonne {
  flex: 1 0 15rem; background: var(--surface-2); border: 1px solid var(--trait); border-top: 4px solid var(--accent);
  border-radius: var(--rayon); padding: 0.5rem;
}
.colonne h2 { font-size: 1rem; display: flex; justify-content: space-between; gap: 0.5rem; white-space: nowrap; }
.colonne h2 .nombre { background: var(--accent); color: var(--accent-texte); border-radius: 999px; padding: 0 0.5rem; }
.colonne.vide { flex: 0 0 auto; border-top: 1px solid var(--trait); background: var(--surface); color: var(--discret); padding: 0.4rem 0.6rem; }
.colonne.vide h2 { margin: 0; font-size: 0.9rem; font-weight: 600; }
.colonne.vide h2 .nombre { background: none; color: var(--discret); padding: 0; }
.carte {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 0.5rem; margin-bottom: 0.5rem; box-shadow: var(--ombre);
}
.carte .ticket { font-weight: 700; }
.carte .ligne { font-size: 0.9rem; color: var(--discret); }
.carte.en-cours { border: 2px solid var(--accent); }

/* Filtres du Board : dispatcher et zones (Q11) ; garde-fous en bandeau. */
.filtres { display: flex; flex-wrap: wrap; gap: var(--espace); align-items: flex-start; margin-bottom: var(--espace); }
.filtre-zones summary { cursor: pointer; padding: 0.4rem 0.6rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.filtre-zones details[open] summary { margin-bottom: 0.5rem; }
.filtre-zones fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.case { white-space: nowrap; }
.alerte-zone { background: #f6d77f; color: #5c3c00; font-weight: 700; border-left: 6px solid var(--alerte); padding: 0.55rem 0.8rem; border-radius: var(--rayon); margin: 0 0 var(--espace); }
.alerte-zone::before { content: "! "; }
.alerte-zone a { color: #5c3c00; }
.filtre-zones.modifie fieldset { border: 2px solid var(--accent); }
.non-enregistre { color: var(--erreur); font-weight: 700; }

/* Page « Add a job » : saisie à gauche, identification à droite (l'une sous l'autre sur un téléphone). */
.ajout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.ajout-saisie { flex: 2 1 22rem; }
.ajout-saisie label { display: block; margin-top: var(--espace); font-weight: 600; }
.ajout-saisie input, .ajout-saisie select, .ajout-saisie textarea { width: 100%; max-width: 32rem; }
/* Revue d'une clôture : le cadre qui rend la saisie non modifiable ne se voit pas et ne déborde pas à 320 pixels. */
form.cloture > fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ajout-saisie fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); margin-top: var(--espace); }
.ajout-identification {
  flex: 1 1 16rem; background: var(--surface); border: 1px solid var(--trait); border-top: 4px solid var(--accent);
  border-radius: var(--rayon); padding: var(--espace); position: sticky; top: 0.5rem;
}
.ajout-identification dt { font-weight: 600; }
.ajout-identification dd { margin: 0 0 0.5rem; }
.mention { padding: 0.55rem 0.8rem; border-radius: var(--rayon); border-left: 6px solid currentColor; }
.mention-peut_faire { background: var(--ok-fond); color: var(--ok); }
.mention-ne_peut_pas { background: var(--erreur-fond); color: var(--erreur); }
.mention-exigence_speciale, .mention-niveau_inconnu, .mention-type_inconnu { background: #f6d77f; color: #5c3c00; }
.message { padding: 0.55rem 0.8rem; border-radius: var(--rayon); background: var(--info-fond); color: var(--info); font-weight: 700; border-left: 6px solid var(--info); }
.message.success { background: var(--ok-fond); color: var(--ok); border-left-color: var(--ok); }

/* Fiche du job : blocs dans l'ordre de la V7 ; chat ancien en haut, nouveau en bas, dernier mis en avant (Q7). */
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.bloc { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--espace); }
.statut { background: var(--surface-2); border: 1px solid var(--trait); border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 600; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; }
.details dt { font-weight: 600; }
.details dd { margin: 0; }
.texte-origine { white-space: pre-wrap; background: var(--surface-2); padding: 0.5rem; border-radius: var(--rayon); font-family: var(--police-code); }
.chat { list-style: none; margin: 0 0 var(--espace); padding: 0; max-height: 26rem; overflow-y: auto; border: 1px solid var(--trait); border-radius: var(--rayon); }
.chat li { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; }
.chat li:last-child { border-bottom: none; }
.chat .quand { font-size: 0.8rem; color: var(--discret); }
.chat li.note .quoi { font-style: italic; }
.chat li.dernier { background: var(--alerte-fond); border-left: 4px solid var(--accent); }
.formulaire-colonne label { display: block; margin-top: 0.5rem; font-weight: 600; }
.formulaire-colonne input, .formulaire-colonne select, .formulaire-colonne textarea { width: 100%; }
.boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.boutons form { margin: 0; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.message.error { background: var(--erreur-fond); color: var(--erreur); border-left-color: var(--erreur); }
.carte a { color: inherit; text-decoration: none; }
.carte:hover { border-color: var(--accent); }

/* Inbox (brique 1b) : conversations à gauche, fil au centre, identification à droite ; ancien en haut, nouveau en bas. */
.entete nav .nombre { background: var(--accent); color: var(--accent-texte); border-radius: 999px; padding: 0 0.45rem; font-size: 0.85rem; }
.inbox-entete { display: flex; flex-wrap: wrap; gap: var(--espace); align-items: center; justify-content: space-between; }
.relier { background: #f6d77f; border-left: 6px solid var(--alerte); padding: 0.4rem 0.6rem; border-radius: var(--rayon); font-weight: 700; }
.inbox { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 17rem; gap: var(--espace); align-items: start; }
.conversations { display: flex; flex-direction: column; gap: 0.35rem; }
.conversation { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--texte); text-decoration: none; }
.conversation .nom { font-weight: 700; }
.conversation .nombre { background: var(--accent); color: var(--accent-texte); border-radius: 999px; padding: 0 0.5rem; font-weight: 700; align-self: start; }
.conversation .discret { grid-column: 1 / -1; }
.conversation .apercu { grid-column: 1 / -1; color: var(--discret); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation.en-cours { border: 2px solid var(--accent); }
.fil { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--espace); }
.fil .retour-liste { display: none; }
.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bulle { background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
.bulle .quand { font-size: 0.8rem; color: var(--discret); }
/* Liens longs (g.co, s1j.co) : coupés plutôt que de déborder sur téléphone. */
.bulle .texte { overflow-wrap: anywhere; }
.bulle.sens-envoye { margin-left: 2rem; background: var(--surface); }
.fil .messages { max-height: 70vh; overflow-y: auto; }
.bulle.etat-non_trie { border-left: 6px solid var(--accent); }
.bulle.dernier { box-shadow: var(--ombre); }
.tri { background: var(--surface); border: 1px dashed var(--accent); border-radius: var(--rayon); padding: 0.5rem; }

@media (max-width: 1100px) {
  .inbox { grid-template-columns: 15rem minmax(0, 1fr); }
  .inbox .ajout-identification { grid-column: 1 / -1; }
}

/* Téléphone (le CRM peut aussi s'ouvrir sur un écran de téléphone, Marc, 20 octobre) : en-tête sur deux lignes,
   colonnes ouvertes sur toute la largeur, onglets repliés à la suite, rien ne dépasse de l'écran. */
.entete .a-droite span, .entete button { white-space: nowrap; }
@media (max-width: 600px) {
  .entete { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  /* R2 (recette de la brique 5) : sur téléphone, plus d'espace entre les lignes du menu du haut et des boutons. */
  .entete nav { line-height: 2.2; }
  .entete .a-droite { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: space-between; row-gap: 0.6rem; }
  .entete .heure { font-size: 0.8rem; }
  main { padding: 0.75rem; }
  .colonne { flex-basis: 100%; }
  .colonne.vide { flex-basis: auto; }
  .ajout-identification { position: static; }
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox.avec-fil .conversations { display: none; }
  .inbox.avec-fil .fil .retour-liste { display: block; }
}

@media print { .entete, form, .non-imprime { display: none; } }
.liste-simple { padding-left: 1.2rem; } .liste-simple li { margin-bottom: 0.4rem; }

/* Page « Technicians » (brique 2) : tableau qui défile de côté dans son cadre sur téléphone, jamais la page entière. */
.tableau-defilant { overflow-x: auto; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.liste-techniciens { width: 100%; border-collapse: collapse; }
.liste-techniciens th, .liste-techniciens td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.liste-techniciens th { background: var(--surface-2); font-size: 0.9rem; }
.liste-techniciens tr.prioritaire td { background: var(--alerte-fond); }
.liste-techniciens tr.masque td { opacity: 0.6; }
.liste-techniciens td.boutons form { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pastille { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.pastille.priorite { background: var(--accent); color: var(--accent-texte); }
.pastille.ok { background: var(--ok-fond); color: var(--ok); border: 1px solid var(--ok); }
.pastille.alerte { background: #f6d77f; color: #5c3c00; border: 1px solid var(--alerte); }

/* « Review and send » (brique 2, étape 3). */
.message.warning { background: #f6d77f; color: #5c3c00; border-left-color: var(--alerte); }
.champs-revue { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem var(--espace); margin-bottom: 0.6rem; }
.champs-revue label { display: block; font-weight: 700; font-size: 0.9rem; }
.champs-revue input, .champs-revue select { width: 100%; }
.choix-techniciens { list-style: none; margin: 0.4rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.technicien-propose { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.45rem 0.6rem; }
.technicien-propose:has(input:checked) { border: 2px solid var(--accent); background: var(--alerte-fond); }
.technicien-propose.rouge { border-left: 6px solid var(--erreur); }
.technicien-propose.rouge strong { color: var(--erreur); }
.technicien-propose.limite { opacity: 0.8; }
.technicien-propose .case { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; cursor: pointer; }
.technicien-propose input[type=checkbox] { width: 1.3rem; height: 1.3rem; }
.show-more summary { cursor: pointer; font-weight: 700; margin: 0.4rem 0; }
.offres-du-job { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.carte .offres-carte { font-size: 0.85rem; }
.technicien-propose .case { flex: 1 1 14rem; min-width: 0; white-space: normal; }
.technicien-propose .case > span { min-width: 0; overflow-wrap: anywhere; }
.technicien-propose select { max-width: 100%; }
.reponse-telephone { margin: 0.3rem 0 0.5rem; }
.reponse-telephone input { max-width: 14rem; }
.offre-simulee h2 { font-size: 1.05rem; }
.rang-envoi:empty { display: none; }
.rang-envoi { display: inline-block; min-width: 1.6rem; text-align: center; background: var(--accent); color: var(--accent-texte); border-radius: 999px; font-weight: 700; padding: 0 0.4rem; }

/* Page « Technicians » sur téléphone (étape 5) : chaque technicien devient une petite carte, sans défilement de côté. */
@media (max-width: 700px) {
  .liste-techniciens thead { display: none; }
  .liste-techniciens, .liste-techniciens tbody, .liste-techniciens tr, .liste-techniciens td { display: block; width: 100%; }
  .liste-techniciens tr { border-bottom: 2px solid var(--trait); padding: 0.4rem 0; }
  .liste-techniciens td { border: none; padding: 0.15rem 0.6rem; }
  .liste-techniciens td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--discret); }
  .liste-techniciens td[data-label="Technician"]::before { content: ""; }
  .tableau-defilant { overflow-x: visible; }
}

/* R4 (recette de la brique 2, 23 octobre) : titres Car, Home, Business de la liste « Job type ». */
optgroup { font-weight: bold; font-style: normal; }
optgroup option { font-weight: normal; }

/* Brique 3 : Needs Attention (N1 B), très visible (règle M17) : bordure épaisse rouge, raison en tête de carte. */
.carte.attention { border: 3px solid var(--erreur); }
.carte .raison-attention { margin: 0 0 0.4rem; padding: 0.35rem 0.5rem; font-weight: 700; font-size: 0.9rem; }
.carte .raison-attention .plus { display: inline-block; background: var(--erreur); color: #fff; border-radius: 999px; padding: 0 0.45rem; margin-left: 0.25rem; }
.discret-fort { font-weight: 400; font-size: 0.82rem; }
.bloc-attention { border: 3px solid var(--erreur); background: var(--erreur-fond); }
.bloc-attention h2 { color: var(--erreur); }
.alertes-du-job { margin: 0 0 0.6rem; padding-left: 1.2rem; }

/* Brique 3, étape 4 : compteur Needs Attention du menu Board et bouton des alertes sonores (règle M17). */
.nombre.nombre-attention { background: var(--erreur); color: #fff; }
.nombre-attention.clignote { animation: clignote 0.6s ease-in-out 3; }
@keyframes clignote { 50% { transform: scale(1.35); } }
.alertes-sonores { border: 2px solid var(--erreur); color: var(--erreur); font-weight: 700; background: #fff; }
.alertes-sonores.actif { border-color: var(--discret); color: var(--discret); font-weight: 400; }
/* R1 (recette de la brique 9) : son coupé par le navigateur après un rechargement ; rouge plein et clignotant. */
.alertes-sonores.en-pause { background: var(--erreur); color: #fff; animation: pause-alertes 1s ease-in-out infinite alternate; }
@keyframes pause-alertes { from { opacity: 1; } to { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .alertes-sonores.en-pause { animation: none; } }
@media (prefers-reduced-motion: reduce) { .nombre-attention.clignote { animation: none; } }

/* R7 (recette de la brique 3, 25 octobre) : colonnes vides en une ligne d'étiquettes, au-dessus des colonnes pleines. */
.colonnes-vides { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--espace); }
/* R5 : toute la carte ouvre la fiche (lien étendu sur la carte) ; les boutons et listes restent au-dessus, cliquables. */
.carte { position: relative; cursor: pointer; }
.carte .lien-carte::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.carte .lien-carte { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.carte .bouton, .carte button, .carte form { position: relative; z-index: 2; }
.carte:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Brique 6 : saisie de la clôture et étiquette de la carte. */
.ligne-paiement { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.ligne-paiement select, .ligne-paiement input { flex: 1 1 8rem; min-width: 0; }
.case-a-cocher { display: flex; align-items: center; gap: 0.4rem; }
.carte .etiquette-carte { margin: 0.3rem 0; padding: 0.25rem 0.5rem; font-weight: 700; font-size: 0.88rem; }
/* Brique 6 : bouton d'annulation, nettement marqué (règle M17) mais distinct du bouton principal. */
button.danger { background: var(--erreur); color: #fff; border-color: var(--erreur); font-weight: 700; }
/* Brique 6 : filtres de Past jobs. */
.filtres-past { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; margin-bottom: var(--espace); }
.filtres-past select, .filtres-past input { max-width: 12rem; }

/* Brique 7, S8 C : un SMS du technicien attend dans le chat du job. */
.carte .ligne.alerte-texte { color: var(--texte); background: var(--alerte-fond); border-radius: 4px; padding: 0.1rem 0.4rem; }

/* Application technicien (brique 9) : téléphone d'abord, gros boutons (règle d'écran M17). */
body.appli { font-size: 1.05rem; }
.appli-entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 1rem; background: var(--barre); border-bottom: 1px solid var(--trait);
}
.appli-entete .nom-appli { font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; }
.appli-entete .appli-nom { font-weight: 700; overflow-wrap: anywhere; }
.appli-page { max-width: 34rem; margin: 0 auto; padding: 1rem; }
.appli-page p { overflow-wrap: anywhere; }
.appli-formulaire { display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; }
.appli-formulaire input { font-size: 1.5rem; letter-spacing: 0.4em; padding: 0.6rem; width: 100%; max-width: 12rem; box-sizing: border-box; }
.appli-bouton { min-height: 3rem; width: 100%; font-size: 1.1rem; }
.appli-vide { color: var(--discret); padding: 1.5rem 0; text-align: center; }
.appli-page h2 { margin-top: 1.25rem; }
.appli-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.75rem; margin: 0.75rem 0; box-shadow: var(--ombre); }
.appli-carte.offre { border-left: 6px solid var(--accent); }
.appli-carte p { margin: 0.25rem 0; }
.appli-carte-titre { font-weight: 700; font-size: 1.1rem; }
.appli-carte form { margin: 0.5rem 0 0; }
.appli-pass summary { list-style: none; text-align: center; margin-top: 0.5rem; box-sizing: border-box; }
.appli-pass summary::-webkit-details-marker { display: none; }
.appli-pass fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); }
.appli-choix { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: 1.05rem; }
.appli-formulaire .appli-choix input { width: 1.4rem; height: 1.4rem; max-width: none; margin: 0; padding: 0; flex: none; }
.appli-formulaire input.appli-note { font-size: 1rem; letter-spacing: normal; max-width: none; }
.appli-lien-carte { display: block; color: inherit; text-decoration: none; }
.appli-ouvrir { color: var(--info); font-weight: 700; text-align: right; }
.appli-etape { font-weight: 700; font-size: 1.1rem; }
.appli-carte .appli-bouton, .appli-pass .appli-bouton { text-align: center; box-sizing: border-box; }
a.appli-bouton { display: block; }
.appli-aide { border-color: var(--erreur); color: var(--erreur); }
.appli-formulaire select, .appli-formulaire textarea, .appli-paiement input { font-size: 1rem; width: 100%; box-sizing: border-box; padding: 0.5rem; letter-spacing: normal; max-width: none; }
.appli-formulaire input[type="date"], .appli-formulaire input[inputmode="decimal"], .appli-formulaire input[type="text"] { font-size: 1rem; letter-spacing: normal; max-width: none; }
.appli-paiement { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.appli-historique { margin-top: 1.25rem; }
.appli-historique summary { font-weight: 700; cursor: pointer; padding: 0.5rem 0; }
.appli-historique ul { padding-left: 1.2rem; }
.appli-messages { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.appli-messages li { padding: 0.5rem 0.65rem; border-radius: var(--rayon); overflow-wrap: anywhere; }
.appli-messages li.bureau { background: var(--info-fond); margin-right: 1.5rem; }
.appli-messages li.moi { background: var(--surface-2); margin-left: 1.5rem; }

/* Lot A du 10 novembre (document de Daniel « Technician app - look and feel ») : cartes lisibles en une seconde,
   trois zones sur la page du job, fenêtres glissantes (bas de l'écran) au lieu de panneaux qui poussent les boutons,
   gros boutons au lieu de listes déroulantes. Mêmes couleurs que le reste du CRM. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.appli-page:has(.appli-onglets) { padding-bottom: 5rem; }
.appli-petit { font-size: 0.85rem; color: var(--discret); }
.appli-majuscules { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.appli-grand { font-family: var(--police-titre); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin: 0.15rem 0; }
.appli-lieu { font-weight: 700; font-size: 1.1rem; }
.appli-type { font-weight: 700; font-size: 1.1rem; }
.appli-info { background: var(--info-fond); color: var(--info); border-radius: var(--rayon); padding: 0.4rem 0.6rem; font-weight: 600; }
.appli-ligne-haut { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.appli-lien-carte > span { display: block; margin: 0.2rem 0; }
.appli-lien-carte > .appli-ligne-haut { display: flex; }
.appli-carte-finie { opacity: 0.85; }
.appli-pastille { display: inline-block; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 700; border: 1px solid currentColor; white-space: nowrap; }
.appli-pastille.statut-attribue { color: var(--accent); background: #fbeedf; }
.appli-pastille.statut-en_route { color: var(--info); background: var(--info-fond); }
.appli-pastille.statut-rendez_vous { color: #5b3d8f; background: #ece4f7; }
.appli-pastille.statut-arrive { color: var(--ok); background: var(--ok-fond); }
.appli-pastille.statut-fini { color: var(--discret); background: var(--surface-2); }
.appli-rangee { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }
.appli-petit-bouton { min-height: 2.75rem; padding: 0.4rem 0.6rem; font-size: 0.95rem; text-align: center; box-sizing: border-box; line-height: 1.2; }
.appli-appel { border-color: var(--ok); color: var(--ok); }
.appli-alerte { border-color: var(--erreur); color: var(--erreur); }
.appli-titre-zone { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--discret); margin: 0 0 0.5rem; }
.appli-zone-maj { margin: 1rem 0; }
.appli-zone-maj > form, .appli-zone-maj > a, .appli-zone-maj > .feuille { display: block; margin-bottom: 0.6rem; }
.appli-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.appli-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.appli-grille-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.appli-grille > form, .appli-grille > details { margin: 0; min-width: 0; }
.appli-grille .appli-bouton, .appli-grille .appli-petit-bouton { width: 100%; height: 100%; }
@media (max-width: 360px) { .appli-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.appli-minutes { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4rem; font-size: 1.4rem; width: 100%; }
.appli-minutes span { font-size: 0.75rem; color: var(--discret); font-weight: 400; }
/* Chat : bulles à la manière d'une messagerie. */
.appli-zone-chat .appli-messages li.bureau { background: var(--info-fond); margin-right: 2rem; }
.appli-zone-chat .appli-messages li.moi { background: #fbeedf; margin-left: 2rem; }
.appli-messages li.systeme { background: none; color: var(--discret); text-align: center; font-size: 0.85rem; padding: 0.2rem; }
.appli-plus-ancien summary { color: var(--info); cursor: pointer; font-size: 0.9rem; padding: 0.25rem 0; }
.appli-plus-ancien .appli-messages { margin-bottom: 0.5rem; }
.appli-envoi { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.appli-envoi input { flex: 1 1 auto; min-width: 0; font-size: 1rem; padding: 0.55rem; }
.appli-envoi button { flex: none; }
/* Fenêtre glissante : un <details> dont le contenu s'ouvre en bas de l'écran, au-dessus d'un voile. */
.feuille > summary, .feuille-etape > summary, .appli-historique > summary, .appli-depli > summary { list-style: none; }
.feuille > summary::-webkit-details-marker, .feuille-etape > summary::-webkit-details-marker, .appli-historique > summary::-webkit-details-marker, .appli-depli > summary::-webkit-details-marker { display: none; }
.feuille > summary, .feuille-etape > summary, .appli-historique > summary { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; text-align: center; }
.feuille-corps .appli-bouton { display: flex; align-items: center; justify-content: center; text-align: center; }
.appli-paiement:not(:has(input[value="other"]:checked)) .appli-detail { display: none; }
.feuille[open]::before { content: ""; position: fixed; inset: 0; background: rgba(23, 35, 43, 0.45); z-index: 40; }
body:not(.js) .feuille[open]::before { pointer-events: none; }  /* sans script, le bouton reste touchable pour refermer */
.feuille-corps {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-height: 85vh; overflow-y: auto;
  background: var(--surface); border-radius: 14px 14px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(23, 35, 43, 0.2); max-width: 34rem; margin: 0 auto; box-sizing: border-box; text-align: left;
}
.feuille-titre { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; margin: 0 0 0.75rem; }
.feuille-fermer { border: none; background: none; color: var(--discret); font-weight: 600; padding: 0.3rem; }
.feuille-corps .appli-bouton { margin-bottom: 0.5rem; }
.feuille-etape { margin: 0; }
.feuille-etape[open] { grid-column: 1 / -1; }
.feuille-etape[open] > summary { border-color: var(--accent); }
.feuille-corps .appli-historique ul { margin: 0.5rem 0 1rem; }
.feuille-corps .appli-historique > summary { margin-bottom: 0.5rem; }
/* Choix en gros boutons (au lieu des petits ronds et des listes déroulantes). */
.appli-pilules { border: none; padding: 0; margin: 0.25rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.appli-pilules legend { font-weight: 600; padding: 0; margin-bottom: 0.3rem; }
.appli-pilules label { position: relative; border: 2px solid var(--trait); border-radius: 999px; padding: 0.5rem 0.9rem; cursor: pointer; font-weight: 600; background: var(--surface); }
.appli-pilules input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.appli-pilules label:has(input:checked) { background: var(--texte); border-color: var(--texte); color: #fff; }
.appli-pilules label:has(input:focus-visible) { outline: 3px solid var(--info); outline-offset: 2px; }
.appli-pilules-larges label { flex: 1 1 100%; border-radius: var(--rayon); text-align: center; padding: 0.75rem; }
.appli-heures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 14rem; overflow-y: auto; }
.appli-heures legend { grid-column: 1 / -1; }
.appli-heures label { border-radius: var(--rayon); text-align: center; }
/* Clôture : le reste s'ouvre à la demande. */
.appli-cloture { gap: 0.6rem; }
.appli-formulaire input.appli-total { font-size: 1.6rem; letter-spacing: normal; max-width: none; font-weight: 700; }
.appli-paiement { border: none; padding: 0; margin: 0; }
.appli-paiement legend { font-weight: 600; padding: 0; margin-bottom: 0.3rem; }
.appli-paiement-suivant { border-top: 1px solid var(--trait); padding-top: 0.6rem; }
.appli-somme { background: var(--info-fond); color: var(--info); border-radius: var(--rayon); padding: 0.4rem 0.6rem; font-weight: 600; margin: 0; }
.appli-somme.ecart { background: var(--alerte-fond); color: var(--alerte); }
.appli-lien-bouton { border: none; background: none; color: var(--info); font-weight: 700; padding: 0.3rem 0; }
.appli-depli > summary { color: var(--info); font-weight: 700; cursor: pointer; padding: 0.3rem 0; }
.appli-depli[open] { display: flex; flex-direction: column; gap: 0.4rem; }
.appli-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.appli-deux input { width: 100%; box-sizing: border-box; }
/* Onglets du bas : New · Mine · Done today. */
.appli-onglets { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--surface); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); }
.appli-onglets a { flex: 1 1 0; text-align: center; padding: 0.8rem 0.25rem; color: var(--discret); text-decoration: none; font-weight: 600; border-top: 3px solid transparent; }
.appli-onglets a.actif { color: var(--accent); border-top-color: var(--accent); }
.appli-onglets .compte { display: inline-block; min-width: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--surface-2); color: var(--discret); font-size: 0.8rem; }
.appli-onglets .compte.plein { background: var(--accent); color: #fff; }

/* Brique 10 : rapports et taux (vues Direction). */
.rapport-totaux tfoot th { background: var(--barre); }
.ligne-taux { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.ligne-taux input[name="note"] { max-width: 14rem; }
@media (max-width: 700px) {
  .rapport-totaux tfoot, .rapport-totaux tfoot tr { display: block; width: 100%; }
  .rapport-totaux tfoot th { display: inline-block; padding: 0.15rem 0.6rem; }
}
/* Page Data (brique 10b) : chiffres clés et graphiques en barres dessinés par le CRM (Marc, Q7 A). */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem; margin: 0 0 var(--espace); }
.chiffres > div { background: var(--barre); border-radius: var(--rayon); padding: 0.5rem 0.7rem; }
.chiffres strong { font-size: 1.25rem; }
.graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--espace); margin-bottom: var(--espace); }
.graphiques h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.barre-ligne { display: grid; grid-template-columns: minmax(4rem, 9rem) 1fr 3rem; gap: 0.4rem; align-items: center; font-size: 0.9rem; }
.barre-libelle { overflow-wrap: anywhere; }
.barre-fond { background: #eef1ef; border-radius: 3px; height: 0.9rem; }
.barre { display: block; height: 100%; background: #1b5a93; border-radius: 3px; min-width: 2px; }
.barre-valeur { text-align: right; font-weight: 700; }
.liste-simple { margin: 0; padding-left: 1.1rem; }

/* Audit du 3 novembre (D19 B+) : poste inactif. */
.inactivite-boite { position: fixed; z-index: 50; left: 50%; top: 30%; transform: translateX(-50%); max-width: calc(100% - 2rem); background: var(--surface); border: 3px solid var(--erreur); border-radius: var(--rayon); padding: 1rem 1.5rem; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.inactivite-voile { position: fixed; z-index: 60; inset: 0; width: 100%; border: 0; border-radius: 0; background: rgba(30,30,30,.85); color: #fff; font-size: 1.5rem; cursor: pointer; }

/* « Job from a text » (Marc, 4 novembre 2026, option C2) : une seule page de l'Inbox à l'envoi. Les champs du job se
   replient en une ligne quand ils sont complets ; les boutons restent visibles en bas de l'écran pendant le défilement. */
.envoi-texte .details-job { margin: 0.6rem 0; }
.envoi-texte .details-job summary { cursor: pointer; padding: 0.4rem 0; }
.envoi-texte .details-job textarea { width: 100%; margin-bottom: 0.6rem; }
.envoi-texte select[name="societe"] { max-width: 100%; }
.boutons-collants {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--fond); border-top: 1px solid var(--trait);
  padding: 0.6rem 0; margin-top: 0.6rem;
}
.boutons-collants .message, .boutons-collants .erreur { flex-basis: 100%; margin: 0; }
/* Sur un téléphone, les deux boutons tiennent sur une ligne : la barre collée cache le moins possible de la page. */
@media (max-width: 420px) {
  .boutons-collants { gap: 0.4rem; padding: 0.4rem 0; }
  .boutons-collants button { padding: 0.45rem 0.65rem; }
}
/* Relecture d'écran du 4 novembre (320 pixels) : la liste « Timing » d'un technicien ne dépasse plus de sa carte. */
.technicien-propose .ecart { max-width: 100%; }
.technicien-propose .ecart select { max-width: 100%; }

/* Simplification des écrans (Daniel, 7 novembre) : Board, points 5, 7, 10 et 11. */
.colonne.vide { flex: 0 0 7.5rem; border-top: 4px solid var(--trait); }
.colonne.vide h2 { white-space: normal; }
.colonne.terminee { border-top-color: var(--succes, #2e7d32); }
.colonne.signalee { border-top-color: var(--erreur); }
.colonne h2 .nombres { display: inline-flex; gap: 0.3rem; }
.carte.attention { background: var(--erreur-fond); border: 3px solid var(--erreur); box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.18); }
.bandeau-signales { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; background: var(--erreur-fond); color: var(--erreur);
  border-left: 6px solid var(--erreur); border-radius: var(--rayon); padding: 0.55rem 0.8rem; margin: 0 0 var(--espace); font-weight: 700; }
.bandeau-signales .puce-signal { background: var(--surface); color: var(--erreur); border: 1px solid var(--erreur); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.9rem; text-decoration: none; }
.bandeau-signales .bouton { margin-left: auto; }
.attente { font-weight: 700; padding: 0 0.3rem; border-radius: 4px; }
.attente-vert { color: #1b5e20; background: #e3f2e5; }
.attente-jaune { color: #5c3c00; background: #f6d77f; }
.attente-rouge { color: #fff; background: var(--erreur); }
@media (max-width: 600px) { .colonne.vide { flex: 1 0 45%; } .bandeau-signales .bouton { margin-left: 0; } }

/* Simplification des écrans (Daniel, 7 novembre) : fiche du job, points 1, 2, 3 et 4. */
.entete-fiche, .fiche > .bloc-attention { grid-column: 1 / -1; }
.parcours { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 0 0 var(--espace); font-size: 0.85rem; }
.parcours li { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--surface-2); color: var(--discret); border: 1px solid var(--trait); }
.parcours li + li::before { content: "› "; }
.parcours .etape-fait { color: var(--texte); }
.parcours .etape-en_cours { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 700; }
.prochaine-etape { border: 2px solid var(--accent); border-radius: var(--rayon); padding: var(--espace); background: var(--surface-2); }
.prochaine-etape h2 { font-size: 1rem; }
.prochaine-etape .discret { margin: 0.4rem 0 0; font-size: 0.85rem; }
.actions-depliantes { margin-top: 0.6rem; }
.actions-depliantes > details > summary, .pass-depliant > summary {
  list-style: none; cursor: pointer; font-weight: 600; padding: 0.35rem 0.8rem; border: 1px solid var(--discret);
  border-radius: var(--rayon); background: var(--surface); display: inline-block;
}
.actions-depliantes > details > summary::-webkit-details-marker, .pass-depliant > summary::-webkit-details-marker { display: none; }
.actions-depliantes > details > summary::after { content: " ▾"; }
.actions-depliantes > details[open] { flex-basis: 100%; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--espace); }
.actions-depliantes > details[open] > summary { margin-bottom: var(--espace); border-color: var(--accent); }
.actions-depliantes h3 { font-size: 1rem; margin-top: var(--espace); }
/* Offres : une ligne par technicien, motifs de Pass seulement après le clic. */
.offres-du-job li { margin-bottom: 0.5rem; }
.reponse-telephone { margin-top: 0.3rem; }
.bouton-k { min-width: 3.5rem; }
.pass-depliant[open] { flex-basis: 100%; }
.pass-depliant[open] > summary { border-color: var(--accent); }
.formulaire-pass { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; }
.formulaire-pass input[name="note"] { flex: 1 1 12rem; min-width: 0; }
.motifs-pass { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.motifs-pass legend { font-weight: 600; padding: 0; margin-right: 0.5rem; float: left; }
/* Chat en conversation : technicien à gauche, bureau à droite, signaux au centre. */
.onglets { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--trait); margin-bottom: var(--espace); }
.onglets [role="tab"] { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: 0.4rem 0.8rem; margin-bottom: -2px; }
.onglets [role="tab"][aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); }
.bloc-chat:not(.onglets-actifs) .onglets { display: none; }
.bloc-chat.onglets-actifs[data-onglet="chat"] .panneau-notes, .bloc-chat.onglets-actifs[data-onglet="notes"] .panneau-chat { display: none; }
.chat.conversation { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.5rem; background: var(--surface-2); }
.chat.conversation li { border: 1px solid var(--trait); border-radius: 12px; max-width: 85%; background: var(--surface); }
.chat.conversation li.bulle-technicien { align-self: flex-start; border-bottom-left-radius: 3px; }
.chat.conversation li.bulle-bureau { align-self: flex-end; background: var(--info-fond); border-bottom-right-radius: 3px; }
.chat.conversation li.bulle-signal { align-self: center; max-width: 100%; background: none; border: 0; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--erreur); }
.chat.conversation li.dernier { border-left-width: 4px; border-left-color: var(--accent); }
.chat.conversation li.vide { align-self: stretch; max-width: 100%; border: 0; background: none; }
.chat.conversation .quand { margin-top: 0.15rem; }
.journal-systeme { margin-bottom: var(--espace); }
.journal-systeme summary { cursor: pointer; color: var(--discret); font-size: 0.9rem; }
.chat.systeme li { display: block; font-size: 0.85rem; }
.chat.notes li { display: block; }

/* Recette du 8 novembre : l'étiquette « 1 day 17 h in this step » reste sur une ligne. */
.attente { white-space: nowrap; }

/* Lot 5 (point 12) : techniciens qui ont déjà reçu le job, barrés, en tête de « Send to ». */
.deja-recu .technicien-propose { background: var(--surface-2); color: var(--discret); }
.deja-recu .case { cursor: default; }

/* Point 8 (Daniel, 7 novembre) : barre courte, « + Add a job » en orange, le reste sous « More ». */
.entete nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem var(--espace); }
.entete nav > a { margin-right: 0; font-size: 1.05rem; }
.entete nav a.ajouter-job { color: var(--accent-texte); padding: 0.25rem 0.8rem; border-bottom: 0; }
.entete nav a.ajouter-job.en-cours { outline: 3px solid var(--texte); }
.menu-plus { position: relative; }
.menu-plus > summary { cursor: pointer; list-style: none; padding: 0.2rem 0.4rem; }
.menu-plus > summary::-webkit-details-marker { display: none; }
.menu-plus > summary::after { content: " ▾"; }
.menu-plus > summary.en-cours { font-weight: 700; border-bottom: 3px solid var(--accent); }
.menu-plus-liste { position: absolute; z-index: 20; right: 0; min-width: 11rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 0.3rem 0; display: flex; flex-direction: column; }
.menu-plus-liste a { padding: 0.4rem 0.9rem; text-decoration: none; color: var(--texte); }
.menu-plus-liste a:hover, .menu-plus-liste a:focus { background: var(--surface-2); }
.menu-plus-liste a.en-cours { font-weight: 700; border-left: 3px solid var(--accent); }

/* Q5 (Daniel, 7 novembre) : l'heure de Tijuana en petit gris après l'heure de l'Est. */
.heure-locale { font-size: 0.85em; color: var(--discret); font-weight: normal; }

/* ---------------------------------------------------------------------------------------------------------------
   Lot 8 - finition (direction de design de Daniel, 7 novembre) : moderne et net, sans charger. Les règles M17 restent :
   contraste fort, gros boutons, alertes jamais sur fond pâle ; la mise en page téléphone reste.
   --------------------------------------------------------------------------------------------------------------- */
:root {
  --espace: 1rem;            /* échelle de 8 px : 0.5rem, 1rem, 1.5rem, 2rem */
  --rayon: 8px;              /* coins de 8 px partout (cartes, boutons, champs) */
  --police-titre: var(--police);  /* une seule famille (plus d'Arial Narrow) */
  --trait: #dde3df;          /* traits de 1 px, plus clairs */
  --ombre: 0 1px 2px rgba(23, 35, 43, 0.06), 0 4px 12px rgba(23, 35, 43, 0.06);
}
body { font-size: 0.9375rem; line-height: 1.45; font-variant-numeric: tabular-nums; }  /* 15 px, chiffres alignés */
h1 { font-size: 1.375rem; font-weight: 700; }   /* 22 px */
h2 { font-size: 1rem; font-weight: 700; }       /* 16 px */
h3 { font-size: 0.9375rem; font-weight: 700; }
.discret { font-size: 0.8125rem; }               /* 13 px, gris */
main { padding: 1.5rem 1rem; }
.bloc { box-shadow: none; padding: 1rem; }
.fiche { gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(max(20rem, 30%), 100%), 1fr)); }  /* 3 colonnes au plus */
.carte { box-shadow: var(--ombre); border-radius: var(--rayon); }
input, select, textarea { border-radius: var(--rayon); }

/* Compteurs : petites pastilles rondes, même style partout (menu, colonnes, onglets). */
.nombre, .entete nav .nombre, .colonne h2 .nombre {
  display: inline-block; min-width: 1.4rem; padding: 0 0.4rem; border-radius: 999px; text-align: center;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.4rem; background: var(--accent); color: var(--accent-texte);
}
.colonne.vide h2 .nombre { background: var(--surface-2); color: var(--discret); }

/* Étape du job : pastille avec un point de couleur (New Job gris, Offered bleu, Assigned et On my way orange,
   Arrived et fin vert ; Cant do job et annulé gris ; rendez-vous et Follow-up bleu). */
.statut { display: inline-flex; align-items: center; gap: 0.4rem; }
.statut::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--discret); }
.statut-offert::before, .statut-rendez_vous::before, .statut-follow_up::before { background: var(--info); }
.statut-attribue::before, .statut-en_route::before { background: var(--accent); }
.statut-arrive::before, .statut-ferme::before { background: var(--ok); }

/* Colonnes du Board : liseré de 4 px en haut (orange active, gris vide, rouge signalée, vert Done). */
.colonne { border-top: 4px solid var(--accent); border-radius: var(--rayon); }
.colonne.vide { border-top-color: var(--trait); }
.colonne.terminee { border-top-color: var(--ok); }
.colonne.signalee { border-top-color: var(--erreur); }

/* Retour de chaque clic : en haut de la page, le message de réussite s'efface après 10 secondes (dispatch.js) ;
   une erreur reste jusqu'à la page suivante. */
.message-flash { transition: opacity 0.6s ease; }
.message-flash.efface { opacity: 0; }
.nombre.nombre-attention, .entete nav .nombre.nombre-attention, .colonne h2 .nombre.nombre-attention { background: var(--erreur); color: #fff; }
/* Un compteur caché (attribut hidden) le reste : la règle des pastilles ne doit pas le rendre visible. */
[hidden] { display: none !important; }
.colonne h2 { align-items: flex-start; }
.colonne h2 .nombres { align-items: center; flex-shrink: 0; }

/* Dix points du 8 novembre, point 3 : colonnes ouvertes de largeur fixe (environ 300 px), l'espace libre reste à droite ;
   cartes compactes, bouton plus petit. Sur téléphone, les colonnes gardent toute la largeur. */
.colonne { flex: 0 0 19rem; max-width: 19rem; }
.colonne.vide { flex: 0 0 auto; min-width: 7.5rem; max-width: 10rem; }
.carte { padding: 0.5rem 0.6rem; }
.carte .ligne { line-height: 1.35; }
.carte .bouton, .carte button { padding: 0.3rem 0.75rem; font-size: 0.875rem; margin-top: 0.3rem; }
@media (max-width: 600px) { .colonne { flex: 1 1 100%; max-width: none; } .colonne.vide { flex: 1 0 45%; max-width: none; } }
/* Recette du 8 novembre : sur ordinateur, les colonnes restent sur une seule ligne, dans l'ordre du parcours (« Done »
   ne passe plus sous « New Job »). Une colonne ouverte fait au plus 19rem et rétrécit jusqu'à 14rem quand beaucoup sont
   ouvertes ; au-delà, le Board défile de côté. Choix de Claude, modifiable. */
@media (min-width: 601px) {
  .board { flex-wrap: nowrap; overflow-x: auto; }
  .colonne { flex: 1 1 19rem; min-width: 13.5rem; }
  .colonne.vide { flex: 0 1 8rem; min-width: 6.5rem; }
  .colonne.vide h2 { flex-wrap: wrap; row-gap: 0.25rem; }
}
/* Point 10 : la colonne « Follow-up due » n'apparaît qu'avec un rappel dû, en orange. */
.colonne.rappel-du { border-top-color: var(--accent); background: #fdf1e3; }
.colonne.rappel-du h2 { color: var(--accent); }
.etiquette-rappel { background: #fbe3c8; color: #6b3a06; border-left-color: var(--accent); }
/* Point 7 : repère des messages plus anciens au-dessus du chat et des notes. */
.plus-anciens { display: block; margin: 0 auto 0.3rem; padding: 0.15rem 0.7rem; font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--discret); }
.chat.conversation li.dernier { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Point 6 : pendant l'attente des techniciens, tous les boutons de « Next step » sur une ligne, de même taille. */
.attente-techniciens .boutons, .attente-techniciens .actions-depliantes { display: inline-flex; vertical-align: top; margin-top: 0.5rem; }
.attente-techniciens .actions-depliantes > details > summary { padding: 0.5rem 1rem; }
.aide-bouton { display: inline-block; position: relative; }
.aide-bouton > summary { list-style: none; cursor: pointer; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; text-align: center; border-radius: 50%; border: 1px solid var(--discret); font-weight: 700; color: var(--discret); }
.aide-bouton > summary::-webkit-details-marker { display: none; }
.aide-bouton[open] > p { position: absolute; z-index: 10; left: 0; top: 1.9rem; width: 16rem; margin: 0; padding: 0.5rem 0.7rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); font-size: 0.8125rem; }
@media (max-width: 600px) { .aide-bouton[open] > p { position: fixed; left: 1rem; right: 1rem; top: auto; width: auto; } }
.chat.conversation li.bulle-info { align-self: center; max-width: 100%; background: none; border: 0; text-align: center; font-size: 0.8125rem; color: var(--discret); }
.pastille.historique { background: var(--surface-2); color: var(--discret); border: 1px solid var(--trait); font-weight: 600; }
/* Recette du 8 novembre : « Job details » et les blocs suivants empilés dans une colonne de la fiche (pas de vide). */
.pile-fiche { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
/* Page « Import files » : choix l'un sous l'autre, case à gauche du libellé. */
.choix-liste { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.5rem 0.8rem; margin: 0 0 0.5rem; }
.choix-liste label { display: flex; gap: 0.5rem; align-items: center; margin: 0.3rem 0; font-weight: 400; }