/* ── Le mode édition des libellés ──────────────────────────────────────────
   Rien de tout ceci n'existe hors du mode : les règles sont toutes préfixées par
   « .lb-edit » sur la racine, pour qu'un oubli ne puisse pas repeindre une page
   normale. Seule exception : la couleur des tuiles, qui est justement faite pour
   rester visible. */

/* ── La couleur d'une tuile, hors mode édition ─────────────────────────── */
/* Une seule règle pour toutes les familles (tile, dash-tuile, stat, fr-card,
   fd-tuile…) : elles n'ont pas de classe commune, mais elles ont toutes cette
   variable dès qu'une couleur est posée.

   ## Thème CLAIR seulement

   Décision de Romain, 06/08/2026 : en thème sombre, la personnalisation est
   désactivée, la tuile garde son aspect d'origine. Sur fond sombre une teinte
   ÉCLAIRCIT la carte au lieu de la colorer - elle rapproche le fond du texte
   secondaire (mesuré : 6,49:1 sans couleur, 3,98 à 4,75 à 26 %) et un blanc y
   donne un gris pâle qui saute aux yeux au lieu de s'effacer. Plutôt que
   d'appliquer puis de défaire, tout le bloc est CANTONNÉ au thème clair :
   « data-theme » est toujours écrit sur la balise « html », et une règle qui
   n'existe pas ne peut pas fuir.

   ## Le fond est REMPLACÉ, pas voilé

   Les versions à calque translucide marchaient tant que la tuile était neutre,
   et pas du tout dès qu'elle portait son propre fond (« t-terra », « t-sable »
   sur Pilotage revenus) : du blanc à 32 % sur du terracotta l'éclaircit sans
   jamais le blanchir. Un voile ne peut pas retirer une couleur ; seul un fond
   opaque le peut. La teinte est donc mélangée à la surface du thème et posée en
   « !important » sur l'élément.

   Reste un dégradé et non un aplat : une tuile parfaitement plate perdrait le
   relief qu'ont toutes les autres. */
html[data-theme="clair"] [style*="--lb-c"] {
  position: relative;
  /* « isolation » enferme les pseudo-éléments DANS la tuile : sans elle, un
     pseudo-élément positionné concourt avec le reste de la page. */
  isolation: isolate;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--lb-c) 32%, var(--solid)),
    color-mix(in srgb, var(--lb-c) 14%, var(--solid))) !important;
}

/* L'ICÔNE revient à sa valeur STANDARD, celle d'une tuile sans famille.
   Demande de Romain, 06/08/2026. Deux choses la coloraient : la teinte choisie
   - retirée le matin même - et, surtout, la couleur de FAMILLE de la tuile
   (« --tl-terra » sur une t-terra, « --tl-sable » sur une t-sable), qui
   subsistait et donnait des icônes terracotta ou olive sur des tuiles qu'il
   venait de passer en blanc. Dès qu'une couleur est posée, la tuile n'est plus
   celle de sa famille : son icône ne doit pas continuer de l'annoncer.

   Le FOND de la pastille, lui, se mélange à « --chip », le gris des pastilles
   neutres, et non à la surface : sinon le blanc la faisait disparaître, fond
   blanc sur tuile blanche, là où une tuile ordinaire montre bien son carré. */
html[data-theme="clair"] [style*="--lb-c"] .ic {
  background: color-mix(in srgb, var(--lb-c) 55%, var(--chip)) !important;
  color: var(--teal-bright) !important;
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  /* Repli sobre : un liseré, qui ne dépend d'aucune fonction récente. */
  html[data-theme="clair"] [style*="--lb-c"] {
    background: none !important;
    border-left: 4px solid var(--lb-c) !important;
  }
}

/* ── Le bouton de la barre du haut ─────────────────────────────────────── */
/* Réduit à son icône : la barre du haut est déjà chargée, et l'infobulle dit
   ce qu'il fait. */
#lb-bouton.lb-pastille { padding-left: 9px; padding-right: 9px; }
#lb-bouton.on {
  color: var(--gold-fg);
  border-color: var(--gold-fg);
  background: color-mix(in srgb, var(--gold-fg) 14%, transparent);
}

/* ── Ce que le mode édition révèle ─────────────────────────────────────── */
.lb-edit [data-lb], .lb-edit [data-lb-t], .lb-edit [data-lb-p], .lb-edit [data-lbb] {
  outline: 1px dashed color-mix(in srgb, var(--gold-fg) 45%, transparent);
  outline-offset: 2px;
  cursor: text;
  border-radius: 3px;
}
.lb-edit [data-lbb] { cursor: pointer; outline-style: dotted; }
.lb-edit [data-lb]:hover, .lb-edit [data-lb-t]:hover,
.lb-edit [data-lb-p]:hover, .lb-edit [data-lbb]:hover {
  outline: 1px solid var(--gold-fg);
  background: color-mix(in srgb, var(--gold-fg) 9%, transparent);
}
.lb-edit .lb-vise {
  outline: 2px solid var(--gold-fg) !important;
  background: color-mix(in srgb, var(--gold-fg) 14%, transparent) !important;
}
/* En mode édition, un clic édite : il ne suit pas le lien et ne trie pas la
   colonne. Le curseur doit le dire avant le clic, pas après. */
.lb-edit a[data-lb], .lb-edit button[data-lb], .lb-edit th[data-lb] { cursor: text; }

.lb-souffle {
  position: fixed; z-index: 4100; pointer-events: none;
  font-size: 11.5px; padding: 4px 9px; border-radius: 7px;
  background: var(--solid); color: var(--muted);
  border: 1px solid var(--glass-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  animation: lb-fondu 1.6s ease forwards;
}
@keyframes lb-fondu { 0% { opacity: 0 } 12% { opacity: 1 } 72% { opacity: 1 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .lb-souffle { animation: none } }

/* ── Le panneau ────────────────────────────────────────────────────────── */
#lb-panneau {
  position: fixed; right: 18px; bottom: 18px; z-index: 4000;
  width: min(400px, calc(100vw - 36px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--solid); color: var(--ink);
  border: 1px solid var(--glass-line); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
  font-size: 13px;
}
#lb-panneau[hidden] { display: none; }
.lb-tete {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-bottom: 1px solid var(--glass-line);
}
.lb-tete b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-fg); }
.lb-role { color: var(--muted); font-size: 11.5px; flex: 1; }
.lb-x {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  font-size: 19px; line-height: 1; padding: 0 2px;
}
.lb-x:hover { color: var(--ink); }
.lb-corps { padding: 12px 13px 14px; overflow: auto; display: flex; flex-direction: column; gap: 15px; }
.lb-champ { display: flex; flex-direction: column; gap: 6px; }
.lb-champ > label {
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.lb-champ input[type=text], .lb-champ textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 7px 9px; color: var(--ink); background: var(--chip);
  border: 1px solid var(--glass-line); border-radius: 8px; resize: vertical;
}
.lb-champ input[type=text]:focus, .lb-champ textarea:focus {
  outline: none; border-color: var(--gold-fg);
}
.lb-barre { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lb-b {
  font: inherit; font-size: 12px; padding: 4px 11px; cursor: pointer;
  border: 1px solid var(--glass-line); border-radius: 7px;
  background: transparent; color: var(--ink);
}
.lb-b:hover { border-color: var(--gold-fg); color: var(--gold-fg); }
.lb-b.plein { background: var(--gold-fg); border-color: var(--gold-fg); color: #1b1710; font-weight: 600; }
.lb-b.plein:hover { filter: brightness(1.08); color: #1b1710; }
.lb-orig { font-size: 11px; color: var(--muted); flex-basis: 100%; }
.lb-erreur {
  font-size: 12px; color: var(--red-fg);
  border: 1px solid var(--red-fg); border-radius: 8px; padding: 6px 9px;
}

/* ── Le nuancier ───────────────────────────────────────────────────────── */
.lb-nuancier { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lb-teinte {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(127, 127, 127, .35); padding: 0;
}
.lb-teinte:hover { transform: scale(1.12); }
.lb-teinte.choisi { box-shadow: 0 0 0 2px var(--solid), 0 0 0 4px var(--gold-fg); }
.lb-libre {
  width: 28px; height: 24px; padding: 0; cursor: pointer;
  border: 1px solid var(--glass-line); border-radius: 7px; background: transparent;
}
.lb-raz { margin-left: auto; }
.lb-avis {
  flex-basis: 100%; font-size: 11px; color: var(--amber-fg);
  border-left: 2px solid var(--amber-fg); padding-left: 8px;
}
.lb-avis[hidden] { display: none; }