/* Budget Builder — socle de style.
   Deux thèmes, clair et sombre. Le clair est le défaut : c'est celui des
   longues sessions de saisie. Le sombre s'obtient par la bascule de la barre
   du haut, et seulement par elle — le réglage du système n'est pas suivi,
   sinon « par défaut » voudrait dire deux choses selon la machine.

   Toutes les couleurs passent par des variables : une valeur écrite en dur
   quelque part serait juste dans un thème et fausse dans l'autre. */

:root {
  /* Clair — thème par défaut */
  --fond: #f5f6f8;
  --fond-panneau: #fff;
  --fond-champ: #fff;
  --fond-survol: #eef1f5;
  --bordure: #e0e4ea;
  --bordure-nette: #c3cad4;

  --texte: #171c23;
  --texte-doux: #576270;
  --texte-faible: #6e7885;

  --accent: #2563d1;
  --accent-sombre: #1d51ad;
  --accent-texte: #fff;
  --succes: #1c7f57;
  --alerte: #9a6512;
  --erreur: #c0352f;

  /* Voiles : fonds teintés, qui doivent s'inverser avec le thème */
  --accent-voile-leger: rgb(37 99 209 / 4%);
  --accent-voile: rgb(37 99 209 / 7%);
  --accent-voile-fort: rgb(37 99 209 / 12%);
  --accent-halo: rgb(37 99 209 / 20%);
  --erreur-fond: rgb(192 53 47 / 7%);
  --erreur-bordure: rgb(192 53 47 / 28%);
  --alerte-fond: rgb(154 101 18 / 9%);
  --alerte-bordure: rgb(154 101 18 / 30%);
  --ombre-carte: 0 1px 2px rgb(23 28 35 / 6%), 0 8px 24px rgb(23 28 35 / 6%);

  --rayon: 6px;
  --rayon-petit: 4px;

  /* Espacements — l'écran doit respirer sans cesser d'être un outil de saisie */
  --espace: 12px;
  --pad-cellule: 11px 14px;
  --pad-panneau: 22px;
  --pad-ecran: 28px 32px;

  --police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --police-chiffres: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* Sombre — uniquement sur choix explicite */
:root[data-theme='sombre'] {
  --fond: #101215;
  --fond-panneau: #171a1f;
  --fond-champ: #1e222a;
  --fond-survol: #232833;
  --bordure: #2b313b;
  --bordure-nette: #3a424f;

  --texte: #e6e9ee;
  --texte-doux: #98a1b0;
  --texte-faible: #6b7482;

  --accent: #4c8dff;
  --accent-sombre: #2f6ad9;
  --accent-texte: #fff;
  --succes: #3fb27f;
  --alerte: #e0a33c;
  --erreur: #e0574d;

  --accent-voile-leger: rgb(76 141 255 / 5%);
  --accent-voile: rgb(76 141 255 / 8%);
  --accent-voile-fort: rgb(76 141 255 / 14%);
  --accent-halo: rgb(76 141 255 / 26%);
  --erreur-fond: rgb(224 87 77 / 12%);
  --erreur-bordure: rgb(224 87 77 / 34%);
  --alerte-fond: rgb(224 163 60 / 12%);
  --alerte-bordure: rgb(224 163 60 / 34%);
  --ombre-carte: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

/* --- Primitives de formulaire ------------------------------------------- */

label {
  display: block;
  margin-bottom: 5px;
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

input,
select,
button {
  font-family: inherit;
  font-size: 13px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-champ);
  color: var(--texte);
}

input:focus,
select:focus,
button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-halo);
}

input[type="number"] {
  font-family: var(--police-chiffres);
  text-align: right;
}

button {
  padding: 9px 15px;
  border: 1px solid var(--bordure-nette);
  border-radius: var(--rayon);
  background: var(--fond-survol);
  color: var(--texte);
  cursor: pointer;
}

button:hover:not(:disabled) {
  border-color: var(--accent);
}

button:disabled {
  opacity: 0.55;
  cursor: default;
}

button.primaire {
  border-color: var(--accent-sombre);
  background: var(--accent-sombre);
  /* Sans cette ligne, le bouton héritait de `color: var(--texte)` de la règle
     générale : du texte quasi noir sur un fond bleu foncé, illisible en thème
     clair. Le fond change, la couleur du texte doit suivre. */
  color: var(--accent-texte);
  font-weight: 600;
}

button.primaire:hover:not(:disabled) {
  background: var(--accent);
}

/* --- Page de connexion --------------------------------------------------- */

.page-login {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: var(--espace);
}

.carte-login {
  width: 360px;
  padding: 34px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
}

.carte-login h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.carte-login .sous-titre {
  margin: 4px 0 22px;
  color: var(--texte-faible);
  font-size: 12px;
}

.champ + .champ {
  margin-top: 14px;
}

.carte-login button {
  width: 100%;
  margin-top: 20px;
}

.message-erreur {
  margin-top: 14px;
  padding: 8px 10px;
  border: 1px solid var(--erreur-bordure);
  border-radius: var(--rayon);
  background: var(--erreur-fond);
  color: var(--erreur);
  font-size: 12px;
}

.message-erreur[hidden] {
  display: none;
}

/* --- Chrome applicatif --------------------------------------------------- */

.barre-appli {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-panneau);
}

.barre-appli .marque {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.barre-appli .utilisateur {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texte-doux);
  font-size: 12px;
}

main {
  padding: var(--pad-ecran);
}

.panneau {
  max-width: 760px;
  padding: var(--pad-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
}

.panneau h2 {
  margin: 0 0 8px;
  font-size: 13px;
}

.panneau p {
  margin: 0 0 6px;
  color: var(--texte-doux);
}

/* --- Entête d'écran ------------------------------------------------------ */

.entete-ecran {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}

.entete-ecran h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.indicateur {
  color: var(--succes);
  font-size: 11px;
}

.vide {
  margin: 16px 0 0;
  color: var(--texte-faible);
}

main .message-erreur {
  max-width: 620px;
  margin-bottom: 14px;
}

/* --- Grille de saisie ---------------------------------------------------- */

/* Dense et sans bouton « enregistrer » : les cellules sont des champs, la
   tabulation passe de l'une à l'autre, Entrée valide. */

.grille {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}

.grille th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordure-nette);
  color: var(--texte-doux);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.grille td {
  padding: 0;
  border-bottom: 1px solid var(--bordure);
  vertical-align: middle;
}

.grille tbody tr:hover {
  background: var(--fond-survol);
}

/* Les champs se fondent dans la cellule et ne se révèlent qu'au focus. */
.grille td input[type="text"],
.grille td select {
  width: 100%;
  padding: var(--pad-cellule);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
}

.grille td input[type="text"]:hover,
.grille td select:hover {
  border-color: var(--bordure);
}

.grille td input[type="text"]:focus,
.grille td select:focus {
  border-color: var(--accent);
  background: var(--fond-champ);
  box-shadow: none;
}

.grille td.col-montant,
.col-montant {
  padding: var(--pad-cellule);
  font-family: var(--police-chiffres);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

th.col-montant {
  text-align: right;
}

.montant-fort {
  color: var(--texte);
  font-weight: 600;
}

.avertissement {
  color: var(--alerte);
  cursor: help;
}

.grille td.col-date,
.col-date {
  padding: var(--pad-cellule);
  color: var(--texte-doux);
  font-family: var(--police-chiffres);
  font-size: 11px;
  white-space: nowrap;
}

.col-statut {
  width: 130px;
}

.grille td.col-actions,
.col-actions {
  width: 1%;
  padding: 7px 14px;
  white-space: nowrap;
}

.actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.actions button {
  padding: 4px 9px;
  border-color: transparent;
  background: transparent;
  color: var(--texte-doux);
  font-size: 11px;
}

.grille tbody tr:hover .actions button {
  border-color: var(--bordure-nette);
  background: var(--fond-champ);
}

.actions button:hover {
  color: var(--texte);
}

.ligne-ajout td {
  border-bottom: none;
  background: var(--accent-voile-leger);
}

.ligne-ajout input::placeholder {
  color: var(--texte-faible);
}

/* Ligne de matériel dont le libellé n'est plus au catalogue. */
tr.avertissement td { background: var(--alerte-fond); }
.bandeau {
  margin: 8px 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--alerte);
  border-radius: var(--rayon);
  background: var(--alerte-fond);
  font-size: 12px;
  cursor: default;
}

/* Menu déroulant du catalogue (écran Matériel). */
.ajout-materiel {
  padding: 8px 10px 10px;
  background: var(--accent-voile-leger);
  border-radius: 0 0 var(--rayon) var(--rayon);
}
.ajout-materiel .combobox { max-width: 420px; }
.combobox { position: relative; }
.combobox > input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-champ);
  color: var(--texte);
  font-size: 13px;
}
.combo-panneau {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 320px;
  overflow-y: auto;
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.combo-societe {
  padding: 5px 10px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  position: sticky;
  top: 0;
  background: var(--fond-panneau);
}
.combo-entree {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--texte);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.combo-entree:hover,
.combo-entree.actif { background: var(--accent-voile-leger); }
.combo-societe-inline { font-weight: 600; color: var(--accent); }
.combo-vide { padding: 8px 10px; font-size: 12px; color: var(--texte-doux); }

.grille td.col-ouvrir,
.col-ouvrir {
  width: 1%;
  padding: 11px 6px 11px 14px;
  white-space: nowrap;
}

.col-ouvrir a {
  color: var(--texte-doux);
  font-size: 11px;
  text-decoration: none;
}

.col-ouvrir a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* --- Écran projet -------------------------------------------------------- */

.barre-appli .marque a {
  color: inherit;
  text-decoration: none;
}

.entete-projet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace);
  padding: 18px 32px;
  border-bottom: 1px solid var(--bordure);
}

.entete-projet .identite {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.entete-projet .retour {
  color: var(--texte-doux);
  font-size: 15px;
  text-decoration: none;
}

.entete-projet .retour:hover {
  color: var(--accent);
}

.entete-projet h1 {
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entete-projet .client {
  color: var(--texte-faible);
  font-size: 12px;
}

.resume-prix {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.resume-prix .etiquette {
  color: var(--texte-doux);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.resume-prix .valeur {
  font-family: var(--police-chiffres);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.onglets {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond-panneau);
}

.onglet {
  padding: 12px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--texte-doux);
  font-size: 12px;
}

.onglet:hover:not(:disabled) {
  border-bottom-color: var(--bordure-nette);
  color: var(--texte);
}

.onglet.actif {
  border-bottom-color: var(--accent);
  color: var(--texte);
  font-weight: 600;
}

.onglet:disabled {
  color: var(--texte-faible);
  cursor: not-allowed;
  opacity: 0.5;
}

/* --- Sections repliables ------------------------------------------------- */

.section-phase {
  margin-bottom: 28px;
}

.entete-section {
  display: block;
  width: 100%;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--texte);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: left;
}

.entete-section:hover {
  color: var(--accent);
}

.entete-section .chevron {
  display: inline-block;
  width: 12px;
  color: var(--texte-doux);
}

.resume-replie {
  display: block;
  padding: 0 0 4px 12px;
  color: var(--texte-faible);
  font-family: var(--police-chiffres);
  font-size: 11px;
}

/* --- Cellules numériques ------------------------------------------------- */

.cellule-nombre {
  width: 110px;
  text-align: right;
}

th.cellule-nombre {
  text-align: right;
}

.grille td.cellule-nombre input[type="number"] {
  width: 100%;
  padding: var(--pad-cellule);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--texte);
}

.grille td.cellule-nombre input[type="number"]:hover {
  border-color: var(--bordure);
}

.grille td.cellule-nombre input[type="number"]:focus {
  border-color: var(--accent);
  background: var(--fond-champ);
  box-shadow: none;
}

/* Les flèches d'incrément volent de la place et cassent la saisie rapide. */
.grille input[type="number"]::-webkit-inner-spin-button,
.grille input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Glisser-déposer ----------------------------------------------------- */

.grille td.poignee,
.poignee {
  width: 26px;
  padding: 11px 0 11px 12px;
  color: var(--texte-faible);
  cursor: grab;
  text-align: center;
  user-select: none;
}

tr.en-deplacement {
  background: var(--fond-survol);
  opacity: 0.5;
}

/* --- Pieds de tableau ---------------------------------------------------- */

.sous-total {
  color: var(--texte-doux);
  font-weight: 600;
}

.total-general {
  max-width: 100%;
  margin-top: 4px;
  border: none;
  background: transparent;
}

.total-general .libelle-total {
  padding: 8px 10px;
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-align: right;
  text-transform: uppercase;
}

.total-general td {
  border: none;
  border-top: 1px solid var(--bordure-nette);
}

.total-general .col-montant {
  width: 150px;
  font-size: 14px;
}

/* --- Tableau de bord ----------------------------------------------------- */

.bloc-bord {
  margin-bottom: 34px;
}

.bloc-bord h2 {
  margin: 0 0 8px;
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.note-bloc {
  color: var(--texte-faible);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.grille td.libelle-synthese,
.grille td.libelle-categorie {
  padding: var(--pad-cellule);
  white-space: nowrap;
}

.grille tfoot .libelle-categorie {
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.col-taux select {
  width: auto;
  min-width: 150px;
  padding: 5px 8px;
  border: 1px solid var(--bordure);
  background: var(--fond-champ);
  font-size: 12px;
}

.grille td.col-taux,
.col-taux {
  width: 190px;
  padding: 7px 14px;
  white-space: nowrap;
}

.col-taux input[type="number"] {
  width: 68px;
  padding: 5px 8px;
  border: 1px solid var(--bordure);
  background: var(--fond-champ);
}

.col-taux .suffixe {
  margin-left: 7px;
  color: var(--texte-faible);
  font-size: 11px;
}

.table-synthese td {
  padding: 6px 10px;
}

.ligne-majeure td {
  background: var(--accent-voile);
}

.montant-majeur {
  font-size: 17px;
  font-weight: 600;
}

.inactif {
  color: var(--texte-faible);
}

.interrupteur {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--texte);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.interrupteur input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.table-bareme {
  max-width: 420px;
}

.table-bareme td {
  padding: 4px 10px;
  color: var(--texte-doux);
  font-size: 11px;
}

.palier-actif td {
  background: var(--accent-voile-fort);
  color: var(--texte);
  font-weight: 600;
}

.alerte-bareme {
  max-width: 560px;
  margin: 10px 0 14px;
  padding: 7px 10px;
  border: 1px solid var(--alerte-bordure);
  border-radius: var(--rayon);
  background: var(--alerte-fond);
  color: var(--alerte);
  font-size: 11px;
}

.resume-commission {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--bordure);
}

.resume-commission[hidden] {
  display: none;
}

/* --- Paramètres en tête d'écran ----------------------------------------- */

.entete-ecran-parametres {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
  padding: var(--pad-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
}

.parametre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
}

.parametre label {
  margin: 0;
}

.parametre input[type="number"] {
  padding: 6px 8px;
}

.parametre .aide {
  color: var(--texte-faible);
  font-size: 10px;
}

.parametre-lecture .valeur-lecture {
  padding: 6px 8px;
  border: 1px solid transparent;
  color: var(--accent);
  font-family: var(--police-chiffres);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Groupes de matériel -------------------------------------------------- */

/* Le nom du groupe reste collé au chevron ; seules les actions vont à droite.
   Avec justify-content: space-between, le nom se retrouvait centré au milieu
   de la barre. */
.barre-groupe {
  display: flex;
  align-items: center;
  gap: 4px;
}

.actions-groupe {
  display: flex;
  margin-left: auto;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.12s;
}

.section-phase:hover .actions-groupe,
.actions-groupe:focus-within {
  opacity: 1;
}

.actions-groupe button {
  padding: 3px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--texte-doux);
  font-size: 11px;
}

.actions-groupe button:hover {
  border-color: var(--bordure-nette);
  color: var(--texte);
}

.separateur-parametres {
  width: 1px;
  margin: 2px 0;
  background: var(--bordure);
}

.formule {
  flex-basis: 100%;
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-faible);
  font-size: 11px;
  line-height: 1.6;
}

.formule strong {
  color: var(--texte-doux);
  font-weight: 600;
}

.chevron-bouton {
  padding: 4px 6px;
  border-color: transparent;
  background: transparent;
  color: var(--texte-doux);
  font-size: 11px;
}

input.nom-groupe {
  width: auto;
  min-width: 180px;
  padding: 5px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texte);
  font-size: 12px;
  font-weight: 600;
}

input.nom-groupe:hover {
  border-color: var(--bordure);
}

input.nom-groupe:focus {
  border-color: var(--accent);
  background: var(--fond-champ);
  box-shadow: none;
}

.ajout-groupe {
  margin: 4px 0 16px;
}

.ajout-groupe input {
  width: 320px;
  padding: 6px 10px;
  border: 1px dashed var(--bordure-nette);
  background: transparent;
  font-size: 12px;
}

.ajout-groupe input:focus {
  border-style: solid;
  background: var(--fond-champ);
}

.bouton-discret {
  margin: 4px 0 14px;
  padding: 5px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--texte-doux);
  font-size: 11px;
}

.bouton-discret:hover {
  border-color: var(--bordure-nette);
  color: var(--texte);
}

.lecture-seule {
  color: var(--texte-doux);
  cursor: help;
}

.grille td input::placeholder {
  color: var(--texte-faible);
  opacity: 0.7;
}

.section-phase .col-actions button {
  padding: 2px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--texte-faible);
  font-size: 14px;
  line-height: 1;
}

.section-phase tr:hover .col-actions button {
  color: var(--erreur);
}

/* --- Écran Réglages ------------------------------------------------------ */

.titre-section {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
}

.col-actif {
  width: 60px;
  text-align: center;
}

.grille td.col-actif {
  padding: var(--pad-cellule);
  text-align: center;
}

.col-actif input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Un poste désactivé reste visible — il sert encore dans les projets passés. */
tr.inactive td input,
tr.inactive td {
  color: var(--texte-faible);
}

/* Six cents paliers par barème : on défile plutôt que d'étirer la page. */
.cadre-defilant {
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}

.cadre-defilant .grille {
  border: none;
}

.cadre-defilant thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--fond-panneau);
}

.note-ok {
  max-width: 620px;
  margin: 0 0 10px;
  color: var(--succes);
  font-size: 11px;
}

.grille td.lecture-seule {
  padding: var(--pad-cellule);
  color: var(--texte-doux);
  font-family: var(--police-chiffres);
}

.aide-bloc {
  max-width: 900px;
  margin: 8px 0 22px;
  color: var(--texte-faible);
  font-size: 11px;
}

/* Les tables étroites de Réglages n'ont pas à s'étirer sur toute la largeur. */
.grille.table-etroite {
  max-width: 520px;
}

/* --- Identité des sociétés pour le devis PDF --- */
.sous-titre-reglages {
  margin: 30px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.identite-societe {
  max-width: 620px;
  margin: 10px 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
}

.identite-societe > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
}

.grille-identite {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 14px;
  align-items: center;
  padding: 4px 14px 16px;
}

.grille-identite .label-identite {
  color: var(--texte-doux);
  font-size: 12px;
}

.grille-identite input[type="text"] {
  padding: 5px 8px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-champ);
  color: var(--texte);
  font: inherit;
}

.ligne-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.apercu-logo {
  max-height: 44px;
  max-width: 160px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  /* Backing clair volontaire dans les deux thèmes : un logo transparent
     pensé pour du papier blanc doit rester lisible ici comme sur le PDF. */
  background: #fff;
}

.titre-section {
  margin-top: 22px;
}

.entete-ecran-parametres + .titre-section,
main > .titre-section:first-child {
  margin-top: 0;
}

/* --- Mention navigateur, page de connexion ------------------------------- */

.mention-navigateur {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 22px 0 0;
  color: var(--texte-faible);
  font-size: 11px;
}

.mention-navigateur img {
  opacity: 0.85;
}

/* --- Durée propre à chaque groupe de matériel ---------------------------- */

.duree-groupe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--bordure);
}

.etiquette-duree {
  color: var(--texte-faible);
  font-size: 11px;
}

input.champ-duree {
  width: 56px;
  padding: 4px 6px;
  border: 1px solid var(--bordure);
  background: var(--fond-champ);
  font-size: 12px;
}

input.champ-duree:focus {
  border-color: var(--accent);
}

.valeur-coefficient {
  color: var(--accent);
  font-family: var(--police-chiffres);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- Barre d'application : navigation et identité ------------------------ */

.barre-appli .marque {
  margin-right: auto;
}

.navigation-appli {
  display: flex;
  gap: 6px;
}

.bouton-nav {
  padding: 6px 13px;
  border: 1px solid var(--bordure-nette);
  border-radius: var(--rayon);
  background: var(--fond-survol);
  color: var(--texte-doux);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.bouton-nav:hover {
  border-color: var(--accent);
  color: var(--texte);
}

.bouton-nav.actif {
  border-color: var(--accent-sombre);
  background: var(--accent-sombre);
  color: #fff;
}

/* Une séparation nette entre la navigation et l'identité de la session. */
.barre-appli .utilisateur {
  padding-left: 16px;
  margin-left: 4px;
  border-left: 1px solid var(--bordure);
}

/* --- Page d'aide ---------------------------------------------------------- */

.page-aide {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  max-width: 1100px;
}

.sommaire {
  position: sticky;
  top: 20px;
  display: flex;
  flex: 0 0 200px;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-right: 1px solid var(--bordure);
}

.sommaire a {
  padding: 5px 14px 5px 0;
  color: var(--texte-doux);
  font-size: 12px;
  text-decoration: none;
}

.sommaire a:hover {
  color: var(--accent);
}

.article-aide {
  max-width: 680px;
  padding-bottom: 60px;
  color: var(--texte-doux);
  font-size: 13px;
  line-height: 1.7;
}

.article-aide section {
  margin-bottom: 38px;
  scroll-margin-top: 20px;
}

.article-aide h2 {
  margin: 0 0 12px;
  color: var(--texte);
  font-size: 15px;
  letter-spacing: -0.01em;
}

.article-aide h3 {
  margin: 22px 0 8px;
  color: var(--texte);
  font-size: 13px;
}

.article-aide p {
  margin: 0 0 12px;
}

.article-aide strong {
  color: var(--texte);
  font-weight: 600;
}

.article-aide em {
  color: var(--texte);
  font-style: italic;
}

.encadre {
  padding: 11px 14px;
  border: 1px solid var(--bordure);
  border-left: 2px solid var(--accent);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
}

.formule-aide {
  padding: 10px 14px;
  border-radius: var(--rayon);
  background: var(--fond-panneau);
  color: var(--texte);
  font-family: var(--police-chiffres);
  font-size: 12px;
}

.liste-simple {
  margin: 0 0 12px;
  padding-left: 20px;
}

.liste-simple li,
.etapes li {
  margin-bottom: 7px;
}

.etapes {
  margin: 0 0 12px;
  padding-left: 20px;
}

.liste-definitions {
  margin: 0;
}

.liste-definitions dt {
  margin-top: 14px;
  color: var(--texte);
  font-weight: 600;
}

.liste-definitions dd {
  margin: 3px 0 0;
}

kbd {
  padding: 1px 6px;
  border: 1px solid var(--bordure-nette);
  border-radius: 3px;
  background: var(--fond-champ);
  color: var(--texte);
  font-family: var(--police-chiffres);
  font-size: 11px;
}

.poignee-exemple {
  color: var(--texte-faible);
}

/* --- Page publique de résumé partagé ------------------------------------- */

.page-partage {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: var(--espace);
}

.carte-partage {
  width: 540px;
  max-width: 100%;
  padding: 38px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
}

.carte-partage[hidden] {
  display: none;
}

.entete-partage {
  margin-bottom: 24px;
}

.emetteur {
  margin: 0 0 10px;
  color: var(--texte-faible);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.entete-partage h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.entete-partage .client {
  margin: 4px 0 0;
  color: var(--texte-doux);
  font-size: 13px;
}

.table-partage {
  border: none;
  background: transparent;
}

.table-partage th {
  border-bottom: 1px solid var(--bordure);
}

.grille td.libelle-partage {
  padding: 10px;
}

/* Le détail d'une rubrique : libellés seuls, en retrait, sous le nom. */
.detail-partage {
  margin-top: 5px;
  color: var(--texte-faible);
  font-size: 11px;
  line-height: 1.55;
}

/* Le montant s'aligne sur le nom de la rubrique, pas au milieu du détail. */
.table-partage tbody td.col-montant {
  vertical-align: top;
  padding-top: 10px;
}

.table-partage tbody tr:hover {
  background: transparent;
}

/* Le pied du résumé : la cellule « Total » et sa valeur reçoivent le même
   cadre. Le sélecteur cite .col-montant pour l'emporter sur .grille td.col-montant. */
.table-partage tfoot td,
.table-partage tfoot td.col-montant {
  padding: 16px 14px 4px;
  border-top: 1px solid var(--bordure-nette);
  border-bottom: none;
}

.grille tbody tr.ligne-soustotal-partage td {
  padding-top: 12px;
  border-top: 1px solid var(--bordure);
  font-weight: 600;
}

.grille tbody tr.ligne-rabais-partage td {
  color: var(--accent);
  font-weight: 600;
}

.libelle-total-partage {
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.total-partage {
  font-size: 19px;
  font-weight: 600;
}

.mention-partage {
  margin: 26px 0 0;
  color: var(--texte-faible);
  font-size: 11px;
  line-height: 1.6;
}

.message-partage {
  color: var(--texte-doux);
  font-size: 13px;
}

.message-partage[hidden] {
  display: none;
}

/* --- Page publique du détail, protégée par un code ----------------------- */

.page-detail {
  min-height: 100%;
}

.carte-code {
  width: 400px;
  max-width: calc(100% - 24px);
  margin: 10vh auto;
  padding: 34px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
}

.carte-code[hidden] {
  display: none;
}

.carte-code h1 {
  margin: 0;
  font-size: 17px;
}

.sous-titre-code {
  margin: 8px 0 22px;
  color: var(--texte-doux);
  font-size: 12px;
  line-height: 1.6;
}

#code {
  font-family: var(--police-chiffres);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.carte-code button {
  width: 100%;
  margin-top: 18px;
}

.contenu-detail {
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.contenu-detail[hidden] {
  display: none;
}

.entete-detail {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bordure);
}

.entete-detail h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.entete-detail .client {
  margin: 5px 0 0;
  color: var(--texte-doux);
  font-size: 12px;
}

.bloc-detail {
  margin-bottom: 34px;
}

.bloc-detail h2 {
  margin: 0 0 10px;
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.bloc-detail h3.titre-section {
  margin: 18px 0 6px;
  color: var(--texte);
  font-size: 12px;
}

.contenu-detail .grille td {
  padding: var(--pad-cellule);
}

.contenu-detail .col-taux {
  color: var(--texte-faible);
  font-size: 11px;
  white-space: nowrap;
}

/* --- Icônes -------------------------------------------------------------- */

.icone {
  width: 15px;
  height: 15px;
  flex: none;
  /* Les tracés sont dessinés sur une grille de 24 : ce léger décalage aligne
     l'icône sur la ligne de base du texte qui l'accompagne. */
  vertical-align: -2px;
}

button .icone,
a .icone {
  pointer-events: none;
}

/* Un bouton qui ne porte qu'une icône reste carré et cliquable. */
.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--texte-doux);
}

.bouton-icone:hover:not(:disabled) {
  border-color: var(--bordure-nette);
  background: var(--fond-survol);
  color: var(--texte);
}

.bouton-icone.danger:hover:not(:disabled) {
  border-color: var(--erreur-bordure);
  background: var(--erreur-fond);
  color: var(--erreur);
}

/* Texte et icône dans un même bouton */
button,
.bouton-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.actions button {
  gap: 6px;
}

.bascule-flottante {
  position: fixed;
  top: 18px;
  right: 18px;
}

/* Les actions de ligne : icône seule au repos, libellé au survol de la ligne. */
.col-ouvrir a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.actions button.danger:hover:not(:disabled) {
  border-color: var(--erreur-bordure);
  background: var(--erreur-fond);
  color: var(--erreur);
}

/* Suppression de ligne : discrète tant qu'on ne survole pas la ligne. */
.grille tr:hover .bouton-icone {
  opacity: 1;
}

.col-actions .bouton-icone {
  opacity: 0.45;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.col-actions .bouton-icone:hover {
  opacity: 1;
  border-color: var(--erreur-bordure);
  color: var(--erreur);
}

/* --- Liste des projets ---------------------------------------------------
   Un bloc par propriétaire, et chaque projet sur deux lignes.

   Le tableau d'origine alignait neuf colonnes sur une seule ligne : en dessous
   d'un grand écran, les montants se retrouvaient hors champ et les séparateurs
   de propriétaire se confondaient avec les lignes de projet. Ici la frontière
   entre deux personnes est un bloc, et chaque projet met en avant ce qu'on
   cherche du regard — nom, client, montants — en repoussant sur une seconde
   ligne ce qu'on manipule plus rarement. */

.groupe-projets {
  margin-bottom: 30px;
}

.groupe-projets .marque-vous {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-voile-fort);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.apres-titre-groupe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
}

/* Le décompte se cale toujours à droite, que le badge « vous » soit là ou
   non : sans cela il sautait d'un bord à l'autre d'un bloc au suivant. */
.apres-titre-groupe .pliable-resume {
  margin-left: auto;
}

.liste-projets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carte-projet {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-panneau);
  box-shadow: var(--ombre-carte);
}

.carte-projet:hover {
  border-color: var(--bordure-nette);
}

/* Le bloc du propriétaire connecté se distingue par un liseré, pas par une
   couleur de fond : la liste doit rester lisible même avec six blocs. */
.groupe-projets.mien .carte-projet {
  border-left: 2px solid var(--accent);
}

.ligne-principale,
.ligne-secondaire {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 18px;
  padding: 12px var(--pad-panneau);
}

.ligne-secondaire {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--bordure);
  background: var(--accent-voile-leger);
  border-radius: 0 0 var(--rayon) var(--rayon);
}

.champ-etiquete {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.champ-etiquete .etiquette {
  color: var(--texte-faible);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.champ-etiquete .valeur {
  font-size: 13px;
}

.champ-etiquete input,
.champ-etiquete select {
  width: 100%;
}

/* Le nom prend la place disponible, le client s'en contente d'un peu moins :
   c'est le nom qu'on lit en premier. Les deux sont plafonnés : sur un grand
   écran, laisser un champ texte s'étirer sur 900 px repousse les montants hors
   du regard sans rien apporter. */
.champ-nom {
  flex: 3 1 220px;
  max-width: 400px;
}

.champ-client {
  flex: 2 1 150px;
  max-width: 280px;
}

/* Les deux montants forment un couple et se replient ensemble : séparés, le
   second se retrouverait seul sur une ligne, aligné à gauche. */
.bloc-montants {
  display: flex;
  gap: 24px;
  margin-left: auto;
}

.champ-montant {
  flex: 0 0 auto;
  min-width: 130px;
  text-align: right;
}

.champ-montant .valeur {
  font-family: var(--police-chiffres);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.champ-montant.montant-fort .valeur {
  font-weight: 600;
}

.champ-montant.inactif .valeur {
  color: var(--texte-faible);
}

.champ-montant.avertissement .valeur {
  color: var(--alerte);
}

.champ-statut {
  flex: 0 1 130px;
}

.champ-proprietaire {
  flex: 0 1 180px;
}

.champ-date .valeur {
  font-family: var(--police-chiffres);
  font-size: 12px;
  color: var(--texte-doux);
  white-space: nowrap;
}

.ligne-secondaire .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.ouvrir-projet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  color: var(--texte-doux);
  text-decoration: none;
}

.ouvrir-projet:hover {
  border-color: var(--accent);
  background: var(--accent-voile);
  color: var(--accent);
}

/* --- Création d'un projet ------------------------------------------------ */

.panneau-ajout {
  max-width: 640px;
  padding: var(--pad-panneau);
  border: 1px dashed var(--bordure-nette);
  border-radius: var(--rayon);
}

.panneau-ajout h2 {
  margin: 0 0 12px;
  color: var(--texte-doux);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

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

.champs-ajout input {
  flex: 1 1 180px;
}

/* --- Écrans étroits ------------------------------------------------------ */

@media (max-width: 780px) {
  .bloc-montants {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .champ-montant {
    min-width: 0;
    flex: 1 1 0;
    text-align: left;
  }

  .ligne-secondaire .actions {
    width: 100%;
    margin-left: 0;
  }
}

/* --- Blocs pliables ------------------------------------------------------
   Voir public/pliage.js. L'état est mémorisé par bloc : la page se redessine
   à chaque enregistrement, un pli qui ne survivrait pas au redessin ne
   servirait à rien. */

.pliable-entete {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pliable-bascule {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px 6px 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
}

.pliable-bascule:hover {
  border-color: transparent;
  background: var(--fond-survol);
  color: var(--texte);
}

.pliable-chevron {
  flex: 0 0 auto;
  color: var(--texte-faible);
  transition: transform 0.15s ease;
}

/* Replié, le chevron pointe vers la droite : la direction indique où va le
   contenu, pas où il est. */
.pliable.replie .pliable-chevron {
  transform: rotate(-90deg);
}

.pliable-titre {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pliable-resume {
  color: var(--texte-faible);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

/* --- Colonne de déplacement dans les catalogues -------------------------- */

.grille th.col-deplacer,
.col-deplacer {
  width: 1%;
  padding: 4px 2px 4px 8px;
  white-space: nowrap;
}

.col-deplacer .bouton-icone {
  padding: 3px 4px;
  border-color: transparent;
  background: transparent;
  opacity: 0.4;
}

.grille tr:hover .col-deplacer .bouton-icone:not(:disabled) {
  opacity: 0.85;
}

.col-deplacer .bouton-icone:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-voile);
  color: var(--accent);
  opacity: 1;
}

/* Une flèche inutilisable reste visible mais éteinte : la faire disparaître
   décalerait la seconde et ferait sauter la colonne d'une ligne à l'autre. */
.col-deplacer .bouton-icone:disabled {
  opacity: 0.12;
  cursor: default;
}

/* Les sections de catalogue sont pliables : leur en-tête porte le chevron. */
.section-phase.pliable {
  margin-bottom: 22px;
}

.section-phase.pliable .pliable-entete {
  border-bottom: 1px solid var(--bordure);
}

/* Renommage d'un groupe de catalogue : le nom figure déjà dans l'en-tête du
   bloc pliable, ce champ doit donc dire ce qu'il fait. */
.etiquette-renommage {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texte-faible);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.etiquette-renommage .nom-groupe {
  width: 240px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

/* Numéro de version, à côté de la marque. Discret : c'est une information de
   maintenance, pas un élément de navigation. */
.version-appli {
  margin-left: 7px;
  color: var(--texte-faible);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  vertical-align: 2px;
}

/* --- Droits par onglet (écran Comptes) ------------------------------------
   Panneau replié par défaut sous la ligne du compte : la table reste lisible
   même avec plusieurs membres à configurer. */

.lien-droits {
  padding: 4px 10px;
  font-size: 12px;
}

tr.ligne-droits td {
  padding: var(--pad-cellule);
  background: var(--fond-survol);
  border-top: none;
}

.panneau-droits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
}

.case-droit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}

.case-droit input:disabled {
  cursor: not-allowed;
}

.separateur-droits {
  width: 1px;
  align-self: stretch;
  background: var(--bordure-nette);
}


/* ======================================================================
   Module « Budget annuel » (budget.html)
   ====================================================================== */

.selecteurs-budget {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.selecteurs-budget select {
  padding: 4px 8px;
  border: 1px solid var(--bordure-nette);
  border-radius: 6px;
  background: var(--fond-champ);
  color: var(--texte);
  font-size: 13px;
}

.titre-budget {
  font-size: 14px;
  margin: 22px 0 8px;
  color: var(--texte-doux);
}
.ligne-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}

.bandeau-taux {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: 8px;
  font-size: 13px;
}
.bandeau-taux .champ-taux {
  width: 72px;
  text-align: right;
  padding: 4px 6px;
  border: 1px solid var(--bordure-nette);
  border-radius: 6px;
  background: var(--fond-champ);
  color: var(--texte);
}

/* --- Accordéon des charges d'entreprise --- */
.pliable.groupe-charge {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.pliable.groupe-charge > .pliable-entete {
  background: var(--fond-survol);
}
.pliable.ligne-charge {
  border-top: 1px solid var(--bordure);
}
.pliable.groupe-charge .pliable-contenu {
  padding: 4px 8px 8px;
}
.pliable.ligne-charge > .pliable-entete .pliable-bascule {
  padding-left: 6px;
  font-weight: 400;
}
.pliable.ligne-charge.calculee .pliable-titre,
.pliable-resume.calcule {
  color: var(--texte-doux);
  font-style: italic;
}
.pliable-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pliable-actions button {
  font-size: 11px;
  padding: 3px 8px;
}

/* Champs de mois : petites cartes qui remplissent la largeur disponible. */
.mois-vertical {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  padding: 14px 16px 18px;
}
.mois-ligne {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: var(--fond-panneau);
}
.mois-nom {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.mois-champ {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mois-vertical input.mois-champ {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond-champ);
  color: var(--texte);
}
.mois-vertical input.mois-champ:hover { border-color: var(--bordure-nette); }
.mois-vertical input.mois-champ:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-halo);
}
.mois-vertical.lecture-seule .mois-ligne { background: var(--fond-survol); }
.mois-vertical.lecture-seule .mois-champ { color: var(--texte-doux); padding: 4px 0; }

/* --- Fiches de production --- */
.pliable.fiche-prod {
  border: 1px solid var(--bordure);
  border-radius: 8px;
  margin-bottom: 10px;
}
.pliable.fiche-prod > .pliable-contenu {
  padding: 4px 0 12px;
  border-top: 1px solid var(--bordure);
}
.fiche-entete {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 16px 6px;
}
.champ-fiche {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--texte-doux);
  flex: 1;
  min-width: 200px;
}
.champ-fiche input {
  padding: 7px 10px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--fond-champ);
  color: var(--texte);
  font-size: 13px;
}
.fiche-mois {
  padding: 6px 16px 0;
}
.grille-prod {
  margin: 8px 0 6px;
}
.grille-prod th,
.grille-prod td {
  padding: 8px 12px;
}
.grille-prod td.mois-libelle {
  color: var(--texte-doux);
  white-space: nowrap;
}
.grille-prod td.cellule-nombre input[type='number'] {
  width: 100%;
  min-width: 90px;
  text-align: right;
  padding: 6px 8px;
}
.grille-prod td.col-actions { width: 40px; text-align: center; }
.fiche-mois .ligne-actions { margin: 6px 0 2px; }
.fiche-mois .select-inline { width: auto; min-width: 170px; }

/* --- Grilles Offres / Vue d'ensemble / accueil / vue membre --- */
.grille-defilante { overflow-x: auto; }
.grille-budget { margin-bottom: 14px; }
.grille-budget th { padding: 12px 16px; }
.grille-budget td { padding: 10px 16px; white-space: nowrap; }
.grille-budget td:has(input),
.grille-budget td:has(select),
.grille-budget td:has(button) { padding: 0 8px; }
.grille-budget td.col-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.grille-budget td.cellule-nombre { font-variant-numeric: tabular-nums; }
.grille-budget .col-type { width: 160px; }
.grille-budget .col-type select { width: 100%; }
.grille-budget td.col-actions { display: flex; gap: 4px; align-items: center; padding: 6px 10px; }
.grille tbody tr.ligne-agregee td { font-style: italic; color: var(--texte-doux); }
.grille tbody tr.ligne-soustotal td {
  font-weight: 600;
  border-top: 1px solid var(--bordure);
  background: var(--fond-survol);
}
.grille tr.ligne-totaux td {
  font-weight: 700;
  border-top: 2px solid var(--bordure-nette);
  background: var(--fond-survol);
}
.cellule-nombre.resultat-negatif, td.resultat-negatif { color: var(--erreur); }

.entete-ensemble {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.entete-ensemble h2 { margin: 0; font-size: 17px; }
.apercu-detail { margin-top: 22px; }
.apercu-detail h3 { font-size: 13px; color: var(--texte-doux); margin-bottom: 6px; }

/* --- Barre d'outils Production (recherche · tri · vue) --- */
.barre-outils {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.champ-recherche {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  padding: 7px 10px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-champ);
  color: var(--texte);
  font-size: 13px;
}
.segments { display: inline-flex; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.segment {
  padding: 7px 12px;
  border: none;
  border-radius: 0;
  background: var(--fond-panneau);
  color: var(--texte-doux);
  font-size: 12px;
}
.segment + .segment { border-left: 1px solid var(--bordure); }
.segment:hover:not(.actif) { color: var(--texte); }
.segment.actif { background: var(--accent); color: #fff; font-weight: 600; }
.liste-fiches > [hidden] { display: none; }
.grille td.cellule-active { background: var(--fond-survol); font-variant-numeric: tabular-nums; }

/* --- Calendrier de facturation --- */
.calendrier-facturation {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.mois-facturation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond-panneau);
}
.mois-facturation.vide { opacity: 0.5; }
.mois-facturation-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bordure);
}
.mois-facturation-nom { font-weight: 600; font-size: 13px; }
.mois-facturation-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.mois-facturation-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mois-facturation-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}
.mois-facturation-actions { display: flex; align-items: center; gap: 8px; }
.mois-facturation-montant {
  font-variant-numeric: tabular-nums;
  color: var(--texte-doux);
  white-space: nowrap;
}
.mois-facturation-rien { margin: 0; color: var(--texte-faible); }
.lien-inline {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--accent);
  cursor: pointer;
}
.lien-inline:hover { text-decoration: underline; }

/* --- Modale : reporter un devis vers le budget annuel --- */
.dialogue-report {
  width: min(480px, 92vw);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 20px;
  background: var(--fond-panneau);
  color: var(--texte);
}
.dialogue-report::backdrop { background: rgba(0, 0, 0, 0.4); }
.dialogue-report h2 { margin: 0 0 12px; font-size: 15px; }
.recap-report { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 12px; }
.recap-report td { padding: 3px 0; }
.recap-report td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; }
.recap-report td:nth-child(3) { color: var(--texte-doux); }
.dialogue-report fieldset {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 8px 10px;
  margin: 0 0 12px;
}
.dialogue-report legend { padding: 0 4px; color: var(--texte-doux); font-size: 11px; }
.dialogue-report fieldset label { display: block; padding: 3px 0; font-size: 13px; }
.dialogue-report .ligne-champ { margin-bottom: 12px; font-size: 13px; }
.dialogue-report .ligne-champ.avis { color: var(--erreur); font-size: 12px; }
.dialogue-report select, .dialogue-report input[type='number'] {
  padding: 5px 8px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-champ);
  color: var(--texte);
  font-size: 13px;
}
.bloc-echeancier .aide { margin: 0 0 6px; }
.echeancier { display: flex; flex-direction: column; gap: 6px; }
.ligne-echeance { display: flex; gap: 6px; align-items: center; }
.ligne-echeance select { flex: 1; }
.ligne-echeance input[type='number'] { width: 70px; }
.ligne-echeance button { border: none; background: none; color: var(--texte-doux); cursor: pointer; padding: 4px 6px; }
.total-echeancier { margin: 8px 0 0; font-size: 12px; font-weight: 600; }
.total-echeancier.ok { color: var(--succes, #2a7); }
.total-echeancier.ko { color: var(--erreur); }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.dialogue-actions button { padding: 8px 14px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond-champ); color: var(--texte); font-size: 13px; cursor: pointer; }
.dialogue-actions button.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.dialogue-actions button:disabled { opacity: 0.5; cursor: default; }

/* --- Impression : la vue d'ensemble seule --- */
@media print {
  .barre-appli,
  .entete-projet .selecteurs-budget,
  .entete-projet .retour,
  .onglets,
  .indicateur,
  .bouton-pdf,
  .bouton-export,
  #erreur {
    display: none !important;
  }
  body { background: #fff; color: #000; }
  main { margin: 0; padding: 0; }
  .entete-ensemble { justify-content: flex-start; }
  .grille th, .grille td { border-color: #bbb !important; color: #000 !important; }
  .grille tr.ligne-totaux td { background: #eee !important; }
  .cellule-nombre.resultat-negatif, td.resultat-negatif { color: #b00 !important; }
  .apercu-detail { break-inside: avoid; }
  @page { size: A4 landscape; margin: 12mm; }
}