/* Le cadre : barre de navigation, onglet du bien ouvert, compte, infobulles.
   Extrait tel quel de index.html (découpage du front). */

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: #111827;
  color: #fff;
  padding: .75rem 1rem;
  border-radius: .75rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  opacity: .95
}
/* Indicateur de sauvegarde auto : pastille verte en bas à droite, fondu. */
.save-indicator {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: #15803d;
  color: #fff;
  padding: .55rem .9rem;
  border-radius: .75rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .15);
  font-size: 14px;
  font-weight: 700;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
}
.save-indicator.show {
  opacity: 1;
  transform: translateY(0);
}
.save-indicator[data-state="modified"], .save-indicator[data-state="saving"] { background: #334155; color: #fff; }
.save-indicator[data-state="failed"] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: calc(100vw - 2rem); background: #991b1b; color: #fff; pointer-events: auto; }
.save-indicator .save-error-detail { flex:1 1 100%; overflow-wrap:anywhere; font-size:12px; font-weight:400; }
.save-indicator[data-state="failed"] button { min-height: 44px; padding: 6px 12px; border: 1px solid #fff; border-radius: 8px; background: transparent; color: #fff; font: inherit; cursor: pointer; }
.save-indicator[data-state="failed"] button:focus-visible { outline-color: #fff; }
.save-indicator[data-state="saved"] { background: #15803d; color: #fff; }

.progress {
  height: 10px;
  border-radius: 9999px;
  background: #e5e7eb;
  overflow: hidden
}

.progress>div {
  height: 10px;
  width: 0%;
  background: #16a34a;
  transition: width .4s ease
}

/* LA BARRE EST LE CADRE, PAS UN CONTENU. Marché, Portefeuille et le bien
   ouvert ne sont pas trois onglets d'une même page : ce sont trois lieux, et
   changer de lieu remplace tout l'écran. Une commande qui remplace l'écran se
   tient au-dessus de lui, à une place qui ne dépend d'aucune vue — et elle y
   reste quand on descend, sinon on ne peut plus changer de lieu sans remonter.
   Même traitement de verre que la barre de rappel du dossier : même rôle,
   même composant. */
.workspace-shell {
  display: flex;
  justify-content: flex-start;
  position: sticky; top: 0; z-index: 45;
  padding: 8px 0;
}
/* Le verre traverse toute la fenêtre, pas seulement la colonne de contenu :
   borné à max-w-7xl, il laissait deux bandes où la page défilait à nu. */
.workspace-shell::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%); width: 100vw; z-index: -1;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0; box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}
html[data-theme="dark"] .workspace-shell::before {
  background: rgba(15, 23, 42, .92); border-bottom-color: var(--hairline);
}

/* LE BIEN OUVERT EST LE TROISIÈME ONGLET : il dit où l'on est et il y ramène.
   Il porte donc l'encre de l'onglet. Il la contredisait : héritée du temps où
   ce n'était qu'une étiquette grise collée à une pastille « Gestion », elle
   peignait le titre en #475569 — illisible dès que la pastille passait en
   sombre. Le reste du bloc (fond, filet, coins droits, marge négative,
   curseur par défaut, variante .on-dark, .has-case) servait ce collage.
   La ville reste en retrait par l'opacité, qui tient sur les deux fonds. */
.active-case-label {
  opacity: 0;
  transition: opacity .22s ease, background .18s, color .18s, box-shadow .18s;
}
.active-case-label[hidden] { display: none; }
.active-case-label.shown { opacity: 1; }

.workspace-tabbar {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .4rem;
  border-radius: 9999px;
  background: var(--surface);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: none;
}

.workspace-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.15rem;
  border-radius: 9999px;
  font-size: .95rem;
  font-weight: 700;
  color: #475569;
  transition: background .18s, color .18s, box-shadow .18s;
}

.workspace-tab-btn:hover {
  color: #0f172a;
  background: rgba(241, 245, 249, .92);
}

.workspace-panel {
  min-height: 65vh;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: .9rem;
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, .92);
  color: #1e293b;
  font-weight: 600;
  transition: border-color .18s, background .18s;
}
.settings-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .5rem .75rem;
  font-size: .875rem;
  color: #1e293b;
  background: transparent;
}
.settings-item:hover { background: #f1f5f9; }
.settings-item[hidden] { display: none; }
.settings-bascule { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.settings-bascule input { margin-top: 3px; flex: 0 0 auto; }
.settings-note { padding: 0 12px 6px 34px; font-size: 11px; color: var(--ink-3); }

.ghost-btn:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.lang-btn { color: #64748b; background: #fff; cursor: pointer; transition: all .15s; }
.lang-btn:hover { color: #0f172a; }

/* Infobulles : le delai des `title` natifs (~1 s) est impose par le navigateur
   et non reglable. On les remplace par une bulle maison, identique partout et
   affichee en 120 ms. Les attributs `title` existants restent la source. */
#tip {
  position: fixed;
  z-index: 9999;
  max-width: 320px;
  padding: .35rem .55rem;
  border-radius: .4rem;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
}

#tip.show { opacity: 1; }
/* UNE COMMANDE NE BOUGE PAS QUAND ON CLIQUE DESSUS. Le panneau ouvert prenait
   toute la largeur : Catégories sautait de 229 px vers la gauche et Valeurs de
   281 px vers le bas, à chaque ouverture. Les pastilles gardent donc leur
   place, et le panneau se déplie EN DESSOUS de la barre, comme un menu. */
/* L'ONGLET DU BIEN OUVERT. Il était posé en étiquette grise, non cliquable :
   on ne savait ni à quoi il servait, ni qu'on pouvait y revenir. C'est un
   onglet, il se clique, et son nom porte sa ville en second. */
.workspace-tab-btn.active-case-label { display: inline-flex; align-items: baseline; gap: .45rem; max-width: 22rem; }
.active-case-label .acl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-case-label .acl-city { font-weight: 500; opacity: .62; white-space: nowrap; }
/* AU TÉLÉPHONE, la barre des lieux tient sur une ligne : sur deux, elle couvrait
   un quart de l'écran à chaque défilement. Boutons plus serrés ; le bien ouvert
   garde son nom, coupé si besoin, et laisse sa ville. */
@media (max-width: 640px) {
  .workspace-shell > div { min-width: 0; width: 100%; }
  .workspace-tabbar { flex-wrap: nowrap; min-width: 0; max-width: 100%; gap: .25rem; padding: .3rem; }
  .workspace-tab-btn { padding: .5rem .8rem; font-size: .9rem; white-space: nowrap; flex: none; }
  .workspace-tab-btn.active-case-label { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .active-case-label .acl-name { min-width: 0; }
  .active-case-label .acl-city { display: none; }
}
/* Les contributions, dans le menu du compte. */
.settings-contrib { margin: 4px 12px 6px; padding: 8px 10px; border-radius: 10px; background: #f8fafc; cursor: help; }
.settings-contrib[hidden] { display: none; }
.contrib-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.contrib-niveau { font-size: 13px; font-weight: 700; color: var(--ink); }
.contrib-points { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.contrib-detail { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
html[data-theme="dark"] .settings-contrib { background: var(--surface-2); }
.contrib-formule { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--ink); }
.contrib-lien { margin-left: auto; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-2); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }

/* Mode dev : le choix de la formule, sur deux lignes dans le menu du compte. */
.settings-dev { display: grid; gap: 4px; font-size: 12.5px; }
.settings-dev select { font: inherit; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink); }

/* Menu du compte : des groupes séparés par un filet, comme un menu standard. */
.settings-groupe { border-top: 1px solid #f1f5f9; margin-top: 6px; padding-top: 4px; }
html[data-theme="dark"] .settings-groupe { border-color: var(--hairline); }
.settings-dev { padding: 8px 12px 6px; }
.contrib-formule-nom { font-size: 13px; }
.contrib-jauge { height: 5px; border-radius: 999px; background: var(--hairline); margin-top: 6px; overflow: hidden; }
.contrib-jauge i { display: block; height: 100%; border-radius: inherit; background: var(--veille-baisse); }
.settings-contrib .contrib-ligne { margin-top: 8px; }

/* La fenêtre des préférences. */
.preferences-dialogue { border: 1px solid var(--hairline); border-radius: 20px; padding: 22px 24px; width: min(480px, 92vw);
  background: var(--surface); color: var(--ink); }
.preferences-dialogue::backdrop { background: rgba(15, 23, 42, .55); }
.preferences-entete { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.preferences-entete h2 { font-size: 18px; font-weight: 800; margin: 0; }
.preferences-section { margin-top: 18px; }
.preferences-section + .preferences-section { padding-top: 14px; border-top: 1px solid var(--hairline); }
.preferences-section h3 { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 0 0 4px; }
.preferences-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; cursor: pointer; }
.preferences-ligne + .preferences-ligne { border-top: 1px solid var(--hairline); }
.preferences-libelle { font-size: 15px; font-weight: 500; color: var(--ink); }
.preferences-info { width: 16px; height: 16px; font-size: 11px; vertical-align: 5px; margin-left: 3px; }
.preferences-info[hidden] { display: none; }
/* L'INTERRUPTEUR : une case à cocher (role="switch") dessinée comme un réglage. */
.interrupteur { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; margin: 0; border-radius: 999px;
  background: #cbd5e1; cursor: pointer; transition: background .15s ease; }
.interrupteur::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .15s ease; }
.interrupteur:checked { background: var(--selection-ink); }
.interrupteur:checked::after { transform: translateX(18px); }
.interrupteur:disabled { opacity: .45; cursor: default; }
.interrupteur:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
html[data-theme="dark"] .interrupteur:not(:checked) { background: #475569; }
html[data-theme="dark"] .interrupteur::after { background: #0f172a; }

/* AU TÉLÉPHONE, l'en-tête du site tient sur deux lignes à côté de ses boutons :
   empilé, le titre en 30 px et les boutons dessous prenaient 140 px. */
@media (max-width: 640px) {
  /* Doublé : flex-col de Tailwind, chargé après, l'emportait. */
  .entete-site.entete-site { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .entete-site > div:first-child { min-width: 0; }
  .entete-site h1 { font-size: 1.05rem; line-height: 1.25; }
  .entete-site > div:last-child { gap: 6px; flex-shrink: 0; }
  .entete-site .ghost-btn { padding: .4rem .45rem !important; }
}

/* LES CONDITIONS D'UTILISATION (cadre/conditions.js) : la fenêtre du démarrage. */
.conditions-texte { margin: 10px 0 14px; color: var(--ink-2); line-height: 1.5; }
.conditions-case { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.conditions-case input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.conditions-case a { text-decoration: underline; }
.conditions-erreur { margin: 10px 0 0; color: #b91c1c; font-weight: 600; }
html[data-theme="dark"] .conditions-erreur { color: #fca5a5; }
.conditions-bouton { margin-top: 16px; width: 100%; padding: 10px 14px; border: 0; border-radius: 10px; font-weight: 700; cursor: pointer; }
.conditions-bouton:disabled { opacity: .45; cursor: not-allowed; }

/* LE PIED DE PAGE : l'avertissement sur les estimations et les textes juridiques. */
.pied-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 18px 16px 28px;
  font-size: 12px; color: var(--ink-3); text-align: center; }
.pied-legal a { color: inherit; text-decoration: underline; }