/* ==========================================================================
   OBJECTIF NATUREL — budget.css
   Styles propres à la page budget.html (et en/budget.html).
   Tout est préfixé « bu- » pour ne jamais entrer en collision avec style.css.
   Les couleurs viennent de la charte (variables de style.css).
   ========================================================================== */

:root {
  --bu-surface:   var(--blanc);
  --bu-surface-2: var(--creme-fonce);
  --bu-ligne:     var(--bordure);
  --bu-ligne-forte: #CFC2A8;
  --bu-vert:      var(--vert-on);
  --bu-vert-lavis: rgba(0, 94, 0, 0.055);
  --bu-sable-lavis: rgba(186, 140, 52, 0.10);
  --bu-jaune-lavis: rgba(250, 187, 0, 0.12);
  --bu-alerte:    #9A4A06;
  --bu-alerte-lavis: rgba(214, 120, 30, 0.13);
  --bu-barre:     var(--vert-on);
  --bu-bande:     rgba(0, 94, 0, 0.16);
  /* Couleurs des huit parties (3 octobre 2026). Choisies pour rester
     distinctes côte à côte, y compris pour les daltoniens (vérifiées avec
     l'outil du skill dataviz, dans l'ordre des parties, anneau compris).
     La couleur suit la partie partout : pastilles, anneau, bande. */
  --bu-p-vehicule: #2E7D32; --bu-p-vie: #5B4A9E;   --bu-p-energie: #C9573A; --bu-p-image: #2F6FB0;
  --bu-p-admin: #D98227;    --bu-p-sante: #1E9C80; --bu-p-route: #E0A41C;   --bu-p-imprevus: #D97098;
  --bu-e1: #3D9A3D; --bu-e2: #9AAE22; --bu-e3: #E0901F; --bu-e4: #D0402B; --bu-e0: #D8D0BC;
}

.bu-chargement, .bu-erreur { padding: 2rem 0; color: var(--texte-doux); }
.bu-erreur { color: var(--bu-alerte); }
.bu-num { font-variant-numeric: tabular-nums; }
.bu-doux { color: var(--texte-doux); }

/* --- Synthèse --- */
.bu-synthese { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.bu-total {
  background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon);
  padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--ombre); display: grid; gap: 0.5rem; min-width: 0;
}
.bu-total-chiffre {
  font-family: var(--titre); font-weight: 700; color: var(--vert-on);
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; letter-spacing: -0.01em;
}
.bu-total-chiffre small { font-size: 0.5em; color: var(--texte-doux); margin-right: 0.2em; font-weight: 600; }
.bu-total-fourchette { font-size: var(--t-s); color: var(--texte); }
.bu-total-note { font-size: var(--t-xs); color: var(--texte-doux); margin: 0.3rem 0 0; max-width: 62ch; }
.bu-scenario { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.6rem; }
.bu-scenario-note { font-size: var(--t-xs); color: var(--texte-doux); }
.bu-scenario-note a { font-weight: 600; }
.bu-segment { display: inline-flex; border: 1px solid var(--bu-ligne-forte); border-radius: 999px; padding: 2px; background: var(--bu-surface); }
.bu-segment button {
  border: 0; background: none; font: inherit; font-size: var(--t-xs); font-weight: 600;
  padding: 0.38rem 0.85rem; border-radius: 999px; color: var(--texte-doux); cursor: pointer; white-space: nowrap;
}
.bu-segment button[aria-pressed="true"] { background: var(--vert-on); color: var(--blanc); }

.bu-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-content: start; }
.bu-tuile {
  background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon);
  padding: 0.9rem 1rem; display: grid; gap: 0.15rem; align-content: start; min-width: 0;
}
.bu-tuile span { font-size: var(--t-xs); color: var(--texte-doux); }
.bu-tuile b { font-family: var(--titre); font-size: 1.35rem; line-height: 1.2; }
.bu-tuile.reste b { color: var(--bu-alerte); }
.bu-tuile.option { background: var(--bu-jaune-lavis); border-color: var(--jaune-on); }

/* --- Titres internes --- */
.bu-bloc { margin-top: clamp(2.4rem, 6vw, 3.6rem); }
.bu-bloc-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.2rem; margin-bottom: 1rem; }
.bu-bloc-tete h2 { font-size: var(--t-l); margin: 0; }
.bu-bloc-tete p { margin: 0; color: var(--texte-doux); font-size: var(--t-s); max-width: 62ch; }

/* --- Répartition --- */
.bu-graphe { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); padding: 0.8rem 1rem; display: grid; gap: 0.2rem; position: relative; }
.bu-barre {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 132px; gap: 0.9rem; align-items: center;
  padding: 0.45rem 0.35rem; border: 0; background: none; text-align: left; border-radius: var(--rayon);
  width: 100%; font: inherit; color: inherit; cursor: pointer;
}
.bu-barre:hover, .bu-barre:focus-visible { background: var(--bu-surface-2); }
.bu-barre-nom { display: flex; align-items: center; gap: 0.55rem; font-size: var(--t-s); min-width: 0; }
.bu-barre-nom span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bu-pastille { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.bu-piste { position: relative; height: 14px; border-bottom: 1px solid var(--bu-ligne); }
.bu-bande { position: absolute; top: 2px; height: 10px; background: var(--bu-bande); border-radius: 2px; }
.bu-plein { position: absolute; left: 0; top: 2px; height: 10px; background: var(--bu-barre); border-radius: 0 4px 4px 0; }
.bu-barre-val { text-align: right; font-weight: 700; font-size: var(--t-s); white-space: nowrap; }
.bu-barre-val small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--texte-doux); }
.bu-bulle {
  position: absolute; z-index: 5; pointer-events: none; background: var(--texte); color: var(--creme);
  font-size: var(--t-xs); padding: 0.45rem 0.6rem; border-radius: var(--rayon); max-width: 280px; box-shadow: var(--ombre-forte);
}

/* --- Outils --- */
.bu-outils { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; margin-bottom: 0.9rem; }
.bu-puces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bu-puce, .bu-lien-outil {
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); border-radius: 999px;
  padding: 0.32rem 0.8rem; font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--texte); cursor: pointer;
}
.bu-puce[aria-pressed="true"] { background: var(--texte); color: var(--creme); border-color: var(--texte); }
.bu-lien-outil { background: none; border-style: dashed; color: var(--texte-doux); }
.bu-telecharger { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.bu-telecharger svg { flex: none; }
.bu-telecharger[disabled] { opacity: 0.6; cursor: progress; }
.bu-recherche {
  flex: 1 1 180px; max-width: 300px; min-width: 0; border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface);
  border-radius: 999px; padding: 0.38rem 0.9rem; font: inherit; font-size: var(--t-xs);
}

.bu-recherche-boite { position: relative; flex: 1 1 220px; max-width: 340px; min-width: 0; }
.bu-recherche-boite .bu-recherche { width: 100%; max-width: none; }
.bu-suggestions {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; width: max(100%, min(380px, calc(100vw - 2rem)));
  list-style: none; margin: 0; padding: 0.3rem; background: var(--bu-surface); border: 1px solid var(--bu-ligne-forte);
  border-radius: var(--rayon); box-shadow: var(--ombre-forte);
}
.bu-sug { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.7rem; align-items: center; padding: 0.45rem 0.6rem; border-radius: calc(var(--rayon) - 2px); cursor: pointer; }
.bu-sug:hover, .bu-sug[aria-selected="true"] { background: var(--bu-surface-2); }
.bu-sug-nom { font-weight: 600; font-size: 0.86rem; overflow-wrap: anywhere; }
.bu-sug-lieu { grid-column: 1; font-size: 0.74rem; color: var(--texte-doux); }
.bu-sug-montant { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.bu-sug mark { background: var(--bu-jaune-lavis); color: inherit; border-radius: 2px; padding: 0 1px; }
.bu-sug-tous { display: block; margin-top: 0.2rem; border-top: 1px solid var(--bu-ligne); border-radius: 0; font-size: 0.8rem; font-weight: 600; color: var(--vert-on); }
.bu-sug-vide { padding: 0.5rem 0.6rem; font-size: 0.82rem; color: var(--texte-doux); }
/* La ligne trouvée reste marquée quelques secondes (sans animation). */
#budget-app .bu-ligne.bu-repere { background: var(--bu-jaune-lavis); box-shadow: inset 4px 0 0 var(--jaune-on); }

/* --- Parties et sous-parties --- */
.bu-partie { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); margin-bottom: 0.6rem; overflow: hidden; }
.bu-partie-tete {
  width: 100%; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center;
  padding: 0.85rem 1rem; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--pc) 8%, var(--bu-surface));
}
.bu-partie-tete:hover { background: color-mix(in srgb, var(--pc) 14%, var(--bu-surface)); }
.bu-partie-nom { font-family: var(--titre); font-weight: 700; font-size: 1.02rem; min-width: 0; }
.bu-partie-meta { font-size: var(--t-xs); color: var(--texte-doux); white-space: nowrap; }
.bu-partie-total { font-family: var(--titre); font-weight: 700; text-align: right; white-space: nowrap; }
.bu-partie-total small { display: block; font-family: var(--corps); font-weight: 400; font-size: 0.74rem; color: var(--texte-doux); }
.bu-chevron { width: 16px; height: 16px; color: var(--texte-doux); transition: transform var(--transition); flex: none; }
[aria-expanded="true"] > .bu-chevron { transform: rotate(90deg); }
.bu-sous-tete {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center;
  padding: 0.6rem 1rem 0.6rem 1.4rem; border: 0; border-top: 1px solid var(--bu-ligne); background: var(--bu-surface);
  font: inherit; font-size: var(--t-s); color: inherit; text-align: left; cursor: pointer;
}
.bu-sous-tete:hover { background: var(--bu-surface-2); }
.bu-sous-tete b { font-weight: 600; }
.bu-sous-total { font-weight: 600; white-space: nowrap; }
.bu-sous-total small { color: var(--texte-doux); font-weight: 400; margin-left: 0.4rem; }
.bu-ajouts { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid var(--bu-ligne); }

/* --- Lignes --- */
.bu-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) 165px 195px 140px 30px; gap: 0.7rem; align-items: center;
  padding: 0.65rem 1rem 0.65rem 1.4rem; border-top: 1px solid var(--bu-ligne);
}
.bu-equipe .bu-ligne { grid-template-columns: 64px minmax(0, 1fr) 165px 195px 126px 140px 30px; }
.bu-ligne.acquis { background: var(--bu-vert-lavis); }
.bu-ligne.sur-place { background: var(--bu-sable-lavis); }
.bu-ligne.synthese { background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(43,33,24,0.025) 8px 16px); }
.bu-nom { min-width: 0; }
.bu-nom .n { font-weight: 600; font-size: 0.95rem; line-height: 1.35; }
.bu-nom .c { font-size: var(--t-xs); color: var(--texte-doux); margin-top: 0.15rem; line-height: 1.45; }
.bu-drapeau {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.05rem 0.4rem;
  border-radius: 3px; margin-left: 0.4rem; vertical-align: 1px; background: var(--bu-surface-2); color: var(--texte-doux);
}
.bu-drapeau.alerte { background: var(--bu-alerte-lavis); color: var(--bu-alerte); }
.bu-drapeau.perso { background: var(--vert-clair); color: var(--vert-on); }
.bu-montant { text-align: right; font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.bu-montant .alerte { color: var(--bu-alerte); }
.bu-montant .doux { color: var(--texte-doux); font-weight: 400; }
.bu-etoiles { display: flex; gap: 1px; }
.bu-etoiles button, .bu-etoiles span { border: 0; background: none; padding: 1px; line-height: 0; cursor: pointer; }
.bu-etoiles span { cursor: default; }
.bu-etoiles svg { width: 14px; height: 14px; }
.bu-pilule {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; padding: 0.18rem 0.6rem; border-radius: 999px;
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); max-width: 100%; white-space: nowrap; font-weight: 600; color: var(--texte);
}
.bu-pilule::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--point, var(--texte-doux)); flex: none; }
select.bu-pilule {
  appearance: none; -webkit-appearance: none; width: 100%; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  padding: 0.24rem 1.5rem 0.24rem 0.7rem; box-shadow: inset 4px 0 0 var(--point, transparent); text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%), linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position: calc(100% - 12px) 52%, calc(100% - 8px) 52%; background-size: 4px 4px; background-repeat: no-repeat;
}
select.bu-pilule::before { display: none; }
.st-a_acheter { --point: var(--texte-doux); } .st-sur_place { --point: var(--bu-p-route); } .st-achete { --point: var(--bu-e1); }
.st-possede { --point: var(--vert-on); } .st-donne { --point: var(--jaune-on); } .st-prete { --point: var(--bu-p-image); }
.be-indispensable { --point: var(--texte); border-color: var(--texte-doux); }
.be-important { --point: var(--texte-doux); }
.be-option { --point: var(--jaune-on); background: var(--bu-jaune-lavis); border-color: var(--jaune-on); }
.bu-date input { width: 100%; border: 1px solid var(--bu-ligne); background: var(--bu-surface); border-radius: var(--rayon); padding: 0.18rem 0.4rem; font: inherit; font-size: 0.78rem; }
.bu-date span { font-size: 0.78rem; color: var(--texte-doux); }
.bu-plus { border: 0; background: none; padding: 0.3rem; border-radius: var(--rayon); color: var(--texte-doux); line-height: 0; cursor: pointer; }
.bu-plus:hover { background: var(--bu-surface-2); color: var(--texte); }

/* --- Détail d'une ligne --- */
.bu-detail { grid-column: 1 / -1; background: var(--bu-surface-2); border-radius: var(--rayon); padding: 1rem; margin-top: 0.3rem; display: grid; gap: 1rem; font-size: var(--t-xs); }
.bu-detail h4 { margin: 0 0 0.4rem; font-family: var(--titre); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texte-doux); }
.bu-detail ul { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 1.8rem; }
.bu-detail li { break-inside: avoid; margin-bottom: 0.15rem; }
.bu-alts { display: grid; gap: 0.5rem; }
.bu-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.8rem; background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); padding: 0.6rem 0.75rem; }
.bu-alt .c { color: var(--texte-doux); }
.bu-alt-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bu-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.7rem; }
.bu-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.74rem; color: var(--texte-doux); font-weight: 600; min-width: 0; }
.bu-form label.large { grid-column: 1 / -1; }
.bu-form input, .bu-form select, .bu-form textarea {
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); border-radius: var(--rayon);
  padding: 0.4rem 0.55rem; font: inherit; font-size: 0.86rem; font-weight: 400; color: var(--texte); width: 100%;
}
.bu-form textarea { min-height: 70px; resize: vertical; }
.bu-form .case { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--texte); }
.bu-form .case input { width: auto; }
.bu-form .prive { background: var(--bu-jaune-lavis); }
.bu-aide { font-size: 0.74rem; color: var(--texte-doux); margin: 0; }
.bu-detail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; }
.bu-bouton {
  border: 1px solid var(--bu-ligne-forte); background: var(--bu-surface); border-radius: 999px; padding: 0.35rem 0.85rem;
  font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--texte); cursor: pointer; white-space: nowrap;
}
.bu-bouton:hover { border-color: var(--vert-on); }
.bu-bouton.pointille { background: none; border-style: dashed; }
.bu-bouton.danger { color: var(--bu-alerte); border-color: var(--bu-alerte); }
.bu-bouton.plein { background: var(--vert-on); border-color: var(--vert-on); color: var(--blanc); }

/* --- Options, recettes, apports --- */
.bu-options .bu-partie { background: color-mix(in srgb, var(--jaune-on) 5%, var(--bu-surface)); }
.bu-groupe { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); margin-bottom: 0.6rem; overflow: hidden; }
.bu-groupe-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.75rem 1rem; background: var(--bu-surface-2); }
.bu-groupe-tete h3 { font-size: 1rem; margin: 0; }
.bu-groupe-tete span { font-size: var(--t-xs); color: var(--texte-doux); }
.bu-groupe-tete b { font-family: var(--titre); white-space: nowrap; }
.bu-recette { display: grid; grid-template-columns: minmax(0, 1fr) 140px 30px; gap: 0.7rem; align-items: center; padding: 0.65rem 1rem; border-top: 1px solid var(--bu-ligne); }
.bu-equipe .bu-recette { grid-template-columns: minmax(0, 1fr) 130px 140px 126px 140px 30px; }
.bu-recette.acquis { background: var(--bu-vert-lavis); }
.bu-vide { padding: 0.8rem 1rem; color: var(--texte-doux); font-size: var(--t-xs); margin: 0; }
.bu-nature { background: var(--bu-surface); border: 1px solid var(--bu-ligne); border-radius: var(--rayon); overflow: hidden; }
.bu-nature-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem; padding: 0.65rem 1rem; border-top: 1px solid var(--bu-ligne); }
.bu-nature-ligne:first-child { border-top: 0; }
.bu-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--t-xs); color: var(--texte-doux); margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--bu-ligne); }
.bu-bandeau-info { margin-bottom: 1rem; padding: 0.7rem 1rem; border-radius: var(--rayon); background: var(--bu-alerte-lavis); font-size: var(--t-s); }

/* L'attribut hidden doit toujours l'emporter : sans cette règle, le display:flex
   de la barre d'édition la laissait visible après « Quitter l'édition ». */
[hidden] { display: none !important; }

/* --- Bouton rond « modifier » et barre d'édition --- */
.bu-crayon {
  position: fixed; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index: 900;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--vert-on); color: var(--blanc); display: grid; place-items: center; box-shadow: var(--ombre-forte);
  transition: transform var(--transition), background var(--transition);
}
.bu-crayon:hover { background: var(--vert-fonce); transform: translateY(-2px); }
.bu-crayon svg { width: 22px; height: 22px; }
.bu-barre-edition {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; max-width: calc(100% - 2rem);
  background: var(--texte); color: var(--creme); padding: 0.55rem 0.7rem 0.55rem 1rem; border-radius: 999px; box-shadow: var(--ombre-forte);
  font-size: var(--t-xs);
}
.bu-barre-edition strong { color: var(--creme); }
.bu-barre-edition .bu-bouton { background: transparent; color: var(--creme); border-color: rgba(253, 248, 238, 0.4); }
.bu-barre-edition .bu-bouton.plein { background: var(--jaune-on); border-color: var(--jaune-on); color: var(--texte); }
.bu-etat { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.bu-etat i { width: 8px; height: 8px; border-radius: 50%; background: var(--bu-e1); display: inline-block; }
.bu-etat.bu-e-attente i { background: var(--bu-e3); }
.bu-etat.bu-e-envoi i { background: var(--jaune-on); }
.bu-etat.bu-e-erreur i { background: var(--bu-e4); }
.bu-equipe-espace { height: 5rem; }

/* --- Fenêtre du mot de passe (réutilise .modale de style.css) --- */
.bu-connexion .modale-boite { max-width: 440px; }
.bu-connexion h2 { font-size: var(--t-l); margin-top: 0; }
.bu-connexion .champ { margin: 1.2rem 0 0.8rem; }
.bu-connexion-message { min-height: 1.4em; font-size: var(--t-s); color: var(--bu-alerte); margin: 0 0 0.8rem; }

/* --- Encart budget sur soutenir.html et l'accueil --- */
.bu-encart { display: grid; gap: 0.3rem; }
.bu-encart-chiffre { font-family: var(--titre); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--vert-on); line-height: 1.1; }
.bu-encart-chiffre small { font-size: 0.55em; color: var(--texte-doux); margin-right: 0.15em; }

@media (min-width: 900px) {
  .bu-synthese { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (max-width: 1020px) {
  .bu-ligne, .bu-equipe .bu-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; row-gap: 0.4rem; }
  .bu-ligne > .bu-etoiles { grid-column: 1; grid-row: 1; }
  .bu-ligne > .bu-montant { grid-column: 2; grid-row: 1; }
  .bu-ligne > .bu-plus { grid-column: 3; grid-row: 1; }
  .bu-ligne > .bu-nom { grid-column: 1 / -1; grid-row: 2; }
  .bu-ligne > .bu-st { grid-column: 1; grid-row: 3; }
  .bu-ligne > .bu-be { grid-column: 2 / 4; grid-row: 3; }
  .bu-ligne > .bu-date { grid-column: 1; grid-row: 4; }
  .bu-ligne > .bu-detail { grid-row: 5; }
  .bu-public .bu-ligne > .bu-nom { grid-column: 1; grid-row: 1; }
  .bu-public .bu-ligne > .bu-st, .bu-public .bu-ligne > .bu-be { grid-row: 2; }
  .bu-public .bu-ligne > .bu-detail { grid-row: 3; }
  .bu-recette, .bu-equipe .bu-recette { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px; row-gap: 0.4rem; }
  .bu-recette > .bu-nom { grid-column: 1 / 3; grid-row: 1; }
  .bu-recette > .bu-plus { grid-column: 3; grid-row: 1; }
  .bu-recette > .bu-montant { grid-column: 1 / 3; grid-row: 2; text-align: left; }
  .bu-recette > .r-porte { grid-column: 1; grid-row: 3; }
  .bu-recette > .r-groupe { grid-column: 2 / 4; grid-row: 3; }
  .bu-recette > .bu-date { grid-column: 1; grid-row: 4; }
  .bu-recette > .bu-detail { grid-row: 5; }
  .bu-barre { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 110px; gap: 0.6rem; }
  .bu-detail ul { columns: 1; }
  /* Sur écran étroit, une étiquette longue passe à la ligne au lieu de déborder de son cadre. */
  span.bu-pilule { white-space: normal; line-height: 1.25; border-radius: 0.8rem; }
}
@media (max-width: 560px) {
  .bu-tuiles { grid-template-columns: minmax(0, 1fr); }
  .bu-partie-tete { grid-template-columns: auto auto minmax(0, 1fr) auto; padding: 0.8rem; }
  .bu-partie-meta { display: none; }
  .bu-ligne, .bu-recette, .bu-sous-tete { padding-left: 0.8rem; padding-right: 0.8rem; }
  .bu-barre { grid-template-columns: minmax(0, 1fr) 104px; }
  .bu-barre .bu-piste { grid-column: 1 / -1; grid-row: 2; }
  .bu-barre-edition { border-radius: var(--rayon); left: 0.6rem; right: 0.6rem; transform: none; max-width: none; justify-content: space-between; }
  /* Mode équipe sur téléphone : statut et besoin prennent chacun toute la largeur,
     une liste déroulante ne pouvant pas passer à la ligne. */
  .bu-equipe .bu-ligne > .bu-st { grid-column: 1 / -1; grid-row: 3; }
  .bu-equipe .bu-ligne > .bu-be { grid-column: 1 / -1; grid-row: 4; }
  .bu-equipe .bu-ligne > .bu-date { grid-column: 1 / -1; grid-row: 5; }
  .bu-equipe .bu-ligne > .bu-detail { grid-row: 6; }
}
@media print {
  .bu-crayon, .bu-barre-edition, .bu-outils { display: none !important; }
}

/* Le chiffre du budget remonte sous le bandeau : visible sans défiler sur un écran de 1366 × 768. */
section#budget { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

/* Audit du 2 octobre 2026 — place réservée pendant le chargement.
   Le budget arrive par JavaScript une fraction de seconde après la page :
   sans place réservée, la section verte « Votre part » apparaissait d'abord
   en haut de l'écran puis sautait de plusieurs écrans vers le bas
   (décalage mesuré : 0,24, il faut rester sous 0,1). La hauteur réservée
   disparaît dès que le budget est affiché. */
.js #budget-app:not(:has(.bu-bloc, .bu-erreur)) { min-height: 110svh; }


/* ==========================================================================
   Où va l'argent : choix de la vue, anneau et bande de répartition
   (3 octobre 2026). Légers : un SVG et quelques div, aucune bibliothèque.
   ========================================================================== */
.bu-vues { margin: 0 0 0.8rem; }
.bu-bloc-rep .bu-bloc-tete { margin-bottom: 0.6rem; }

/* Anneau */
.bu-camembert { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.2rem; padding: 1.2rem; }
.bu-anneau { width: min(100%, 230px); height: auto; overflow: visible; }
.bu-anneau path { stroke: var(--bu-surface); stroke-width: 2; cursor: pointer; transition: opacity 160ms ease; }
.bu-anneau-total { font-family: var(--titre); font-weight: 700; font-size: 17px; fill: var(--texte); font-variant-numeric: tabular-nums; }
.bu-anneau text { pointer-events: none; }
.bu-anneau-sous { font-size: 9.5px; fill: var(--texte-doux); letter-spacing: 0.04em; }

/* Bande de répartition : une seule barre, découpée en parts */
.bu-repartition { padding: 1.2rem; gap: 1.1rem; }
.bu-bande-totale { display: flex; gap: 2px; height: 26px; width: 100%; }
.bu-segment-bande { display: block; min-width: 3px; height: 100%; cursor: pointer; transition: opacity 160ms ease; }
.bu-segment-bande:first-child { border-radius: 4px 0 0 4px; }
.bu-segment-bande:last-child { border-radius: 0 4px 4px 0; }

/* Légende commune : nom, part, montant. Le texte reste dans les couleurs
   de texte ; la pastille porte la couleur. */
.bu-legende { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0.1rem; max-width: none; }
.bu-legende li { margin: 0; }
.bu-leg {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) 3.4rem auto; align-items: center; gap: 0.6rem;
  border: 0; background: none; font: inherit; font-size: var(--t-s); color: var(--texte); text-align: left;
  padding: 0.42rem 0.5rem; border-radius: var(--rayon); cursor: pointer; min-height: 40px;
}
.bu-leg:hover, .bu-leg:focus-visible { background: var(--bu-surface-2); }
.bu-leg-nom { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.bu-leg-pc { color: var(--texte-doux); text-align: right; }
.bu-leg-val { font-weight: 700; text-align: right; white-space: nowrap; }

/* Survol d'une partie : les autres s'effacent un peu */
.bu-graphe[data-actif] :where(.bu-anneau path, .bu-segment-bande) { opacity: 0.35; }
.bu-graphe[data-actif="vehicule"] [data-partie="vehicule"], .bu-graphe[data-actif="vie"] [data-partie="vie"],
.bu-graphe[data-actif="energie"] [data-partie="energie"], .bu-graphe[data-actif="image"] [data-partie="image"],
.bu-graphe[data-actif="admin"] [data-partie="admin"], .bu-graphe[data-actif="sante"] [data-partie="sante"],
.bu-graphe[data-actif="route"] [data-partie="route"], .bu-graphe[data-actif="imprevus"] [data-partie="imprevus"] { opacity: 1; }

@media (min-width: 760px) {
  .bu-camembert { grid-template-columns: 230px minmax(0, 1fr); justify-items: stretch; align-items: center; gap: 2rem; padding: 1.4rem 1.6rem; }
  .bu-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.4rem; }
  .bu-camembert .bu-legende { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .bu-camembert .bu-legende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}