/* ============================================================
   Pages ajoutées le 27/09 : compléments de style (mêmes couleurs,
   mêmes composants que espace.css).
   ============================================================ */
.petit { font-size: 12px; font-weight: 600; }
.cellule-2 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cellule-2 strong { font-size: 14px; color: var(--nuit); }
.cellule-2 small { font-size: 12px; font-weight: 600; color: var(--muted); }
.cellule-lien { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); }
.cellule-lien:hover { color: var(--cuivre); }
.texte-long { display: block; max-width: 360px; font-size: 13px; line-height: 1.45; color: var(--texte-2); font-weight: 500; }
.groupe-btn { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ligne-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pile { display: flex; flex-direction: column; gap: 24px; }
.section-note { font-size: 13px; font-weight: 600; color: var(--muted); }

.bandeau-etat { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--trait); }

/* Fiche (chauffeur, client) */
.entete-fiche { display: flex; align-items: center; gap: 18px; }
.entete-fiche h1 { font-size: 34px; color: var(--nuit); }
.rond-grand { width: 64px; height: 64px; font-size: 24px; }
.piece { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--trait-2); }
.piece .cellule-2 { flex-grow: 1; }
.piece-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--ivoire); color: var(--texte-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mandat { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 12px; background: var(--vert-f); color: var(--vert); font-size: 13px; font-weight: 700; }

/* Planning */
.planning { display: grid; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; min-width: 1000px; }
.planning-tete { padding: 14px 12px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--trait); background: var(--ivoire-3); }
.planning-tete.aujourdhui { color: var(--cuivre); }
.planning-nom { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 14px; font-weight: 800; color: var(--nuit); border-bottom: 1px solid var(--trait-2); border-right: 1px solid var(--trait-2); }
.planning-nom.sans { color: var(--ambre); }
.planning-case { padding: 8px; min-height: 64px; border-bottom: 1px solid var(--trait-2); border-right: 1px solid var(--trait-2); }
.planning-case.aujourdhui { background: var(--cuivre-pale); }
.planning-bloc { display: block; padding: 8px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.35; }
.planning-bloc.ton-ambre { background: var(--ambre-f); color: var(--ambre); border: 1px dashed #D9B46A; }
.defile { overflow-x: auto; }
.legende-planning { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: var(--muted); }
.legende-planning span { display: inline-flex; align-items: center; gap: 6px; }
.legende-planning i { width: 10px; height: 10px; border-radius: 3px; }

/* Tarifs */
.grilles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grille-carte { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.grille-nom { font-size: 22px; color: var(--nuit); }
.grille-carte .groupe-btn { justify-content: flex-start; margin-top: 6px; }

/* Paramètres : interrupteurs */
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-top: 1px solid var(--trait-2); }
.reglage-textes { display: flex; flex-direction: column; gap: 3px; }
.reglage-textes strong { font-size: 14px; color: var(--nuit); }
.reglage-textes small { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.45; max-width: 520px; }
.interrupteur { width: 46px; height: 26px; border-radius: 999px; border: 0; background: #CFC9BA; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.interrupteur[aria-checked="true"] { background: var(--vert); }
.interrupteur[aria-checked="true"]::after { left: 23px; }
.reglage .inp { width: 300px; max-width: 100%; }
.formulaire-2c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 4px 20px 20px; }

@media (max-width: 1100px) {
  .grilles, .formulaire-2c { grid-template-columns: 1fr; }
}
.titre-carte { font-size: 16px; font-weight: 800; color: var(--nuit); font-family: var(--police); }
.pile-kv { display: flex; flex-direction: column; gap: 12px; }
.pile-kv .ligne-kv span:last-child { max-width: 60%; }

/* Page de suivi publique */
.suivi { padding: 48px 0 80px; }
.suivi .conteneur { display: flex; gap: 32px; align-items: flex-start; }
.suivi-principal { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.suivi-cote { width: 360px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
.suivi h1 { font-size: 40px; color: var(--nuit); }
.suivi .frise-mission { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.choix-imprevu { display: grid; gap: 10px; }
.choix-imprevu button { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--trait-champ); background: #fff; font: 700 14px var(--police); color: var(--nuit); cursor: pointer; }
.choix-imprevu button small { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-top: 2px; }
.choix-imprevu button[aria-pressed="true"] { border: 2px solid var(--cuivre); background: var(--cuivre-pale); padding: 13px 15px; }
@media (max-width: 900px) {
  .suivi .conteneur { flex-direction: column; }
  .suivi-cote { width: 100%; }
  .suivi .frise-mission { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .suivi h1 { font-size: 30px; }
}
.choix-imprevu .puce { height: auto; display: block; border-radius: 12px; }
#conditions .droite, #prestations .droite { white-space: normal; }
#conditions td:first-child { min-width: 170px; }
.pile-kv .ligne-kv span:last-child { overflow-wrap: anywhere; min-width: 0; }
.titre-section { font-size: 18px; font-weight: 800; color: var(--nuit); }
.grilles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tableau-grille td { vertical-align: middle; }
.case-prix { display: inline-block; min-width: 92px; padding: 7px 10px; border: 1px solid var(--trait-champ); border-radius: 8px; background: #fff; font-weight: 700; text-align: right; }
.condition { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.condition-titre { font-size: 15px; color: var(--nuit); }
.paliers { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.paliers li { padding: 8px 12px; border-radius: 8px; background: var(--ivoire); font-size: 13px; font-weight: 700; color: var(--texte-2); }
.code-suivi { max-width: 460px; margin: 40px auto 0; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.code-suivi .inp { height: 56px; font-size: 22px; font-weight: 800; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
@media (max-width: 1100px) { .grilles-3 { grid-template-columns: 1fr; } }
.groupe-btn { flex-wrap: nowrap; }
.bandeau-maquette { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-radius: 10px; background: var(--ambre-f); color: var(--ambre); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.lien-deconnexion { margin-top: 8px; background: none; border: 0; color: #9AA6B6; font: 700 12px var(--police); cursor: pointer; text-align: left; padding: 4px 16px; }
.client .lien-deconnexion { color: var(--muted); }
.connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--ivoire); }
.connexion-carte { width: 100%; max-width: 420px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.connexion-erreur { padding: 10px 14px; border-radius: 10px; background: var(--rouge-f); color: var(--rouge); font-size: 13px; font-weight: 700; }
.inp-court { width: 84px; height: 38px; padding: 0 10px; }
.inp-moyen { width: auto; min-width: 120px; max-width: 170px; height: 38px; padding: 0 10px; }
.form-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; font-weight: 700; }
.form-ligne label { display: inline-flex; align-items: center; gap: 6px; }
details.ajout summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--cuivre); margin-top: 6px; }
.ligne-ajout td { background: var(--ivoire-3); }
.tableau-grille td { padding: 10px 8px; }
[hidden] { display: none !important; }

/* ============================================================
   Tarifs et règles (reprise de HC Platform) — gestion/tarifs-hc.html
   ============================================================ */
.tf-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 4px 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); }
.tf-nav-groupe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tf-nav-titre { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.tf-onglet { border: 1px solid var(--trait-champ); background: #fff; color: var(--texte-2); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tf-onglet:hover { border-color: var(--cuivre); color: var(--cuivre-fonce); }
.tf-onglet.actif { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.tf-contexte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.tf-contexte:empty { display: none; }
.tf-champ { min-width: 260px; }
.tf-pousse { margin-left: auto; }

.tf-volet-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--police-titre); font-size: 20px; color: var(--nuit); margin: 6px 0 10px; }
.tf-bulles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 12px; }
.tf-bulle { text-align: left; display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tf-bulle:hover { border-color: var(--cuivre); box-shadow: 0 6px 18px rgba(14, 26, 43, .08); }
.tf-bulle.vide { background: var(--ivoire-3); }
.tf-bulle-nom { font-weight: 800; color: var(--nuit); font-size: 15px; }
.tf-bulle-sous { font-size: 12.5px; color: var(--muted); min-height: 32px; }
.tf-bulle-n { font-family: var(--police-titre); font-size: 26px; color: var(--cuivre-fonce); }
.tf-bulle-n small { font-family: var(--police); font-size: 12px; color: var(--muted); }
.tf-bulle-det { font-size: 12px; color: var(--texte-3); }
.tf-fil { font-size: 13px; color: var(--muted); margin: 4px 0 14px; }

.tf-volets { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .tf-volets { grid-template-columns: 1fr; } }
.tf-volet { display: flex; flex-direction: column; gap: 8px; }
.tf-carte { text-align: left; width: 100%; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--trait); border-left: 4px solid var(--vert); border-radius: 12px; padding: 12px 14px; font: inherit; cursor: pointer; }
.tf-carte:hover { border-color: var(--cuivre); border-left-color: var(--cuivre); }
.tf-carte.alerte { border-left-color: var(--ambre); }
.tf-carte.brouillon { border-left-color: var(--gris); background: var(--ivoire-3); opacity: .85; }
.tf-carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tf-alerte { display: block; background: var(--ambre-f); color: var(--ambre); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; }

.tf-pr { background: #fff; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.tf-pr-tete { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 11px 14px; font: inherit; text-align: left; cursor: pointer; }
.tf-pr-tete:hover { background: var(--ivoire-3); }
.tf-fleche { font-size: 10px; color: var(--muted); transition: transform .15s; }
.tf-pr.ouvert .tf-fleche { transform: rotate(90deg); }
.tf-pr-prix { margin-left: auto; font-weight: 700; color: var(--nuit); white-space: nowrap; }
.tf-pr-corps { display: none; padding: 4px 14px 14px; border-top: 1px solid var(--trait-2); flex-direction: column; gap: 8px; }
.tf-pr.ouvert .tf-pr-corps { display: flex; }
.tf-pr-ligne { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--trait-2); font-size: 13.5px; }
.tf-plus-doux { background: none; border: 0; color: var(--cuivre); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

.tf-grille-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 10px 0 14px; }
.tf-grille-nom { font-size: 28px; color: var(--nuit); margin: 0; }
.tf-actions { flex-wrap: wrap; }
.tf-act { background: #fff; border: 1px solid var(--trait-champ); border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--texte-2); cursor: pointer; }
.tf-act:hover { border-color: var(--cuivre); color: var(--cuivre-fonce); }
.tf-act.danger { color: var(--rouge); border-color: #E9C3BE; }
.tf-bloc { margin-top: 16px; }
.tf-pied { margin: 10px 0 0; }
.tf-marge { margin: 0 0 12px; }
.tf-matrice td, .tf-matrice th { vertical-align: top; }
.tf-case { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px; font: inherit; cursor: pointer; text-align: left; }
.tf-case:hover { border-color: var(--trait-champ); background: var(--ivoire-3); }
.tf-case small { color: var(--texte-3); font-size: 12px; }

.tf-cv-bandeau { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 12px; padding: 12px 16px; margin: 10px 0 6px; background: var(--vert-f); color: var(--vert); }
.tf-cv-bandeau.brouillon { background: var(--ambre-f); color: var(--ambre); }
.tf-cv-bloc { border-top: 1px solid var(--trait-2); }
.tf-cv-bloc:first-of-type { border-top: 0; }
.tf-cv-ligne { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: none; border: 0; padding: 12px 2px; font: inherit; text-align: left; cursor: pointer; }
.tf-cv-ligne:hover { background: var(--ivoire-3); }
.tf-cv-droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; text-align: right; }
.tf-cv-panneau { display: flex; flex-direction: column; gap: 10px; background: var(--ivoire-3); border: 1px solid var(--trait-2); border-radius: 12px; padding: 16px; margin: 0 0 14px; }
.tf-cv-cartes { display: flex; flex-wrap: wrap; gap: 8px; }
.tf-cv-carte { background: #fff; border: 1px solid var(--trait-champ); border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tf-cv-carte.choisie { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.tf-paliers { display: flex; flex-direction: column; gap: 6px; overflow-x: auto; }
.tf-paliers-tete, .tf-palier { display: grid; grid-template-columns: 130px minmax(200px, 1.2fr) minmax(220px, 1.4fr) auto; gap: 10px; align-items: start; min-width: 680px; }
.tf-paliers-tete { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tf-palier { background: #fff; border: 1px solid var(--trait-2); border-radius: 10px; padding: 10px; }
.tf-palier > span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-cout { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

#m-tf .modale-corps { flex-direction: row; flex-wrap: wrap; gap: 16px; }
#m-tf .modale-corps > * { flex: 1 1 100%; }
#m-tf .modale-corps > .champ.moitie { flex: 1 1 calc(50% - 8px); }
.modale-large { max-width: 900px; }
.champ .aide { font-size: 12px; color: var(--muted); font-weight: 500; }
.cases { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cases label { font-size: 13.5px; font-weight: 500; color: var(--texte-2); display: flex; align-items: center; gap: 6px; }
button.lien-petit, button.retour { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--cuivre); cursor: pointer; text-align: left; }
button.lien-petit:hover, button.retour:hover { color: var(--cuivre-fonce); }
.tf-cv-ligne { padding: 12px 20px; }
.tf-cv-panneau { margin: 0 16px 14px; }
.tf-palier select.inp-moyen { max-width: 220px; }