/* ==========================================================================
   MutuCash — Espace connecté (façon La Pince). Variables : tokens.css
   ========================================================================== */

.esp-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: var(--mc-voile);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mc-brume);
}
.esp-head .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.esp-head .word { font: 700 21px var(--mc-font-titre); letter-spacing: -0.3px; }
.esp-head-right { display: flex; align-items: center; gap: 14px; }
.esp-user { font: 600 14.5px var(--mc-font-texte); color: var(--mc-texte-2); }

/* Onglets : Mon espace / Tableau de bord / Projet futur / Paramètres */
.esp-tabs { display: flex; gap: 4px; background: var(--mc-sable); padding: 4px; border-radius: 12px; margin: 0 auto 0 24px; }
.esp-tab { flex: none; white-space: nowrap; font: 600 14px var(--mc-font-texte); color: var(--mc-texte-2); text-decoration: none; padding: 8px 16px; border-radius: 8px; }
.esp-tab:hover { color: var(--mc-sapin); }
.esp-tab.active { background: var(--mc-blanc-chaud); color: var(--mc-sapin); box-shadow: 0 2px 8px -4px rgba(16,23,17,.25); }
@media (max-width: 1080px) { .esp-tabs { margin: 0 auto 0 16px; } .esp-tab { padding: 8px 12px; font-size: 13.5px; } }
/* Quatre onglets ne tiennent plus sur une ligne étroite : la barre passe sous
   l'en-tête et se répartit sur deux lignes — tous les onglets restent visibles
   (un défilement horizontal cacherait « Paramètres »). */
@media (max-width: 820px) {
  .esp-head { flex-wrap: wrap; }
  .esp-tabs { margin: 0; order: 3; width: 100%; flex-wrap: wrap; }
  .esp-tab { flex: 1 1 auto; text-align: center; }
}

/* Haut du tableau de bord */
.dash-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-banner { font: 500 16px var(--mc-font-texte); color: var(--mc-vert-texte); background: var(--mc-vert-pastel); border: 1px solid var(--mc-bordure-verte); border-radius: 12px; padding: 12px 18px; }
.dash-banner strong { font-family: var(--mc-font-titre); color: var(--mc-sapin); }
/* flex-wrap indispensable : sans lui, les deux sélecteurs (min-width 180px)
   et le bouton d'export totalisent 510px incompressibles et faisaient déborder
   la page horizontalement dès 390px de viewport (document large de 538px). */
.dash-top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.dash-top-actions .esp-select { width: auto; min-width: 180px; }

/* Tuiles de stats : 3 colonnes, 3 lignes (actes/coût/taux, puis les totaux,
   puis les moyennes). L'en-tête porte le sélecteur de période propre aux
   tuiles — il ne concerne ni les graphiques ni le détail. */
.dash-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; }
.dash-stats-title { font: 700 18px var(--mc-font-titre); color: var(--mc-encre); margin: 0; }
.dash-stats-head .esp-select { width: auto; min-width: 190px; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stat-tile { background: var(--mc-blanc-chaud); border: 1px solid var(--mc-brume); border-radius: 14px; padding: 16px 18px; }
.stat-k { font: 500 12.5px/1.35 var(--mc-font-texte); color: var(--mc-texte-3); min-height: 34px; }
.stat-v { font: 700 24px var(--mc-font-titre); color: var(--mc-encre); margin-top: 6px; }
.stat-v.pos { color: var(--mc-vert-texte); }
.stat-v.neg { color: var(--mc-terracotta-texte); }
.stat-sub { font: 500 11.5px/1.35 var(--mc-font-texte); color: var(--mc-texte-3); margin-top: 6px; }
/* La source (DREES) est désormais dans la tuile elle-même, plus sous la grille. */
.stat-sub a { color: var(--mc-vert-texte); font-weight: 700; text-decoration: underline; }
@media (max-width: 900px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dash-stats { grid-template-columns: 1fr; } }

/* Corps du tableau de bord : espacement entre sections */
#dash-body { display: flex; flex-direction: column; gap: 18px; }

/* Retour d'un dépôt de relevés PDF : ce qui vient d'être importé, et le geste
   attendu ensuite. Même vert pastel que le bandeau « extension détectée » de
   l'espace, pour que les deux se lisent comme une confirmation.
   Le `display: flex` est neutralisé par `[hidden] { display: none !important }`
   (tokens.css) : le bloc part bien masqué. */
.dash-flash {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--mc-vert-pastel); border: 1px solid var(--mc-bordure-verte);
  border-radius: 12px; padding: 14px 18px;
}
.dash-flash-txt {
  flex: 1; min-width: 240px; margin: 0;
  font: 400 14.5px/1.55 var(--mc-font-texte); color: var(--mc-vert-texte);
}
.dash-flash-txt strong { font-family: var(--mc-font-titre); color: var(--mc-sapin); }
/* Sur petit écran le lien passe sous le texte et prend toute la largeur :
   c'est le parcours principal du téléphone, il doit rester atteignable au pouce. */
@media (max-width: 560px) {
  .dash-flash { align-items: stretch; }
  .dash-flash .mc-btn { width: 100%; text-align: center; }
}
/* Bandeau de la démonstration (/dashboard?demo=1).
   TERRACOTTA, la couleur d'alerte de la charte — jamais décorative : ce
   bandeau dit « ces chiffres ne sont pas les vôtres », et cela doit se voir
   avant le premier graphique. Il est COLLANT en haut de la fenêtre : on peut
   parcourir tout le bilan, il ne quitte pas l'écran, et une capture d'écran
   prise n'importe où le porte encore.
   Il se cale SOUS l'en-tête, lui aussi collant : d'où le `top` égal à la
   hauteur de `.esp-head` (69,6 px mesurés ; 98 px quand les onglets passent à
   la ligne sous 820 px) et un `z-index` INFÉRIEUR au sien — si la hauteur
   change un jour, le bandeau glisse derrière l'en-tête au lieu de le recouvrir.
   Le `display: flex` est neutralisé par `[hidden] { display: none !important }`
   (tokens.css) : hors démonstration, le bloc reste bien masqué. */
.dash-demo {
  position: sticky; top: 70px; z-index: 9;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: var(--mc-terracotta-pastel);
  border: 1.5px solid var(--mc-terracotta);
  border-radius: 12px; padding: 14px 18px;
  box-shadow: var(--mc-ombre-chip);
}
.dash-demo-txt {
  flex: 1; min-width: 240px; margin: 0;
  font: 400 14.5px/1.55 var(--mc-font-texte); color: var(--mc-terracotta-texte);
}
.dash-demo-txt strong { font-family: var(--mc-font-titre); font-weight: 700; }
.dash-demo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Sur petit écran, les deux actions passent sous le texte et se partagent la
   largeur : le retour vers ses vrais relevés doit rester atteignable au pouce. */
@media (max-width: 820px) { .dash-demo { top: 98px; } }
@media (max-width: 560px) {
  .dash-demo { align-items: stretch; }
  .dash-demo-actions { width: 100%; }
  .dash-demo-actions .mc-btn { flex: 1 1 auto; text-align: center; }
}

/* Le bloc de résultats reprend le même rythme vertical que le corps. */
#resultats { display: flex; flex-direction: column; gap: 18px; }

/* Comparatif par poste de soins.
   Deux lectures dans une seule barre : sa LONGUEUR compare les postes entre
   eux (100 % = le poste le plus lourd), ses SEGMENTS montrent qui a payé
   (Sécu / mutuelle / vous). Les montants sont écrits en toutes lettres
   au-dessus et en dessous : la barre reste décorative pour un lecteur d'écran. */
/* Légende des graphiques. Retravaillée le 3 août 2026 : en 12,5 px gris sur
   fond crème, avec des pastilles de 10 px, elle se lisait mal — or c'est elle
   qui donne son sens à chaque couleur de barre. Chaque entrée devient une
   pastille de fond discrète, le texte passe en 13,5 px encre, et le carré de
   couleur gagne en taille. Les entrées sont centrées verticalement plutôt
   qu'alignées à l'oeil près sur la ligne de base. */
.poste-legende { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 16px; }
.poste-legende > span {
  display: inline-flex; align-items: center;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  background: var(--mc-sable); border: 1px solid var(--mc-brume);
  font: 600 13.5px var(--mc-font-texte); color: var(--mc-encre); white-space: nowrap;
}
.poste-puce { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; vertical-align: 0; flex: none; }
.poste-puce--secu { background: var(--mc-sapin); }
.poste-puce--mut { background: var(--mc-vert); }
.poste-puce--rac { background: var(--mc-terracotta); }
.poste-list { display: flex; flex-direction: column; gap: 16px; }
.poste-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.poste-nom { font: 600 15px var(--mc-font-texte); color: var(--mc-encre); }
.poste-val { font: 700 16px var(--mc-font-titre); color: var(--mc-encre); white-space: nowrap; }
.poste-track { height: 12px; border-radius: var(--mc-r-pastille); background: var(--mc-sable); margin-top: 7px; overflow: hidden; }
.poste-bar { display: flex; height: 100%; min-width: 4px; border-radius: var(--mc-r-pastille); overflow: hidden; }
.poste-seg { display: block; height: 100%; }
.poste-seg--secu { background: var(--mc-sapin); }
.poste-seg--mut { background: var(--mc-vert); }
.poste-seg--rac { background: var(--mc-terracotta); }
.poste-sub { font: 500 12.5px/1.5 var(--mc-font-texte); color: var(--mc-texte-3); margin-top: 6px; }
.poste-sub strong { color: var(--mc-vert-texte); }
@media (max-width: 520px) {
  .poste-head { flex-direction: column; gap: 2px; }
  .poste-val { font-size: 15px; }
}

/* Graphiques : un par ligne, pleine largeur */
.dash-charts { display: grid; grid-template-columns: 1fr; gap: 18px; }
.chart-card { display: flex; flex-direction: column; }
.chart-title { font: 700 18px var(--mc-font-titre); color: var(--mc-encre); margin: 0 0 14px; }
.chart-box { position: relative; height: 420px; min-width: 0; }
.chart-box canvas { max-width: 100%; }
@media (max-width: 820px) { .chart-box { height: 320px; } }

/* ---- Graphiques annuels en barres CSS -----------------------------------
   Même langage que « Vos dépenses par poste » : pistes fines, coins ronds,
   montants écrits en toutes lettres. Aucun canvas, aucune bibliothèque. */
/* Les graphiques annuels réutilisent `.poste-legende` : mêmes pastilles, même
   taille de carré, pour que les deux familles de graphes se lisent pareil. */
.an-puce { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; vertical-align: 0; flex: none; }
.an-puce--cot { background: var(--mc-terracotta); }
.an-puce--emp { background: #E9A88F; }
.an-puce--mut { background: var(--mc-vert); }
.an-puce--secu { background: var(--mc-sapin); }
/* Reste à charge : même terracotta que « Vos dépenses par poste ». Il ne peut
   pas être confondu avec la cotisation, qui partage cette couleur : les deux
   ne se croisent jamais dans un même graphe. */
.an-puce--rac { background: var(--mc-terracotta); }

.an-list { display: flex; flex-direction: column; gap: 20px; }
.an-row { display: flex; flex-direction: column; gap: 8px; }
.an-an { font: 700 15px var(--mc-font-titre); color: var(--mc-encre); }
/* Colonne de libellé élargie le 3 août 2026 : « La mutuelle vous rembourse »
   et « Vous versez à la mutuelle » ne tenaient pas dans les 148 px d'origine,
   prévus pour « Vous versez » / « On vous rembourse ». */
.an-ligne { display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 12px; }
.an-lbl { font: 500 13px var(--mc-font-texte); color: var(--mc-texte-3); }
.an-track { height: 12px; border-radius: var(--mc-r-pastille); background: var(--mc-sable); overflow: hidden; }
.an-bar { display: flex; height: 100%; min-width: 4px; border-radius: var(--mc-r-pastille); overflow: hidden; }
.an-seg { display: block; height: 100%; }
.an-seg--cot { background: var(--mc-terracotta); }
.an-seg--emp { background: #E9A88F; }
.an-seg--mut { background: var(--mc-vert); }
.an-seg--secu { background: var(--mc-sapin); }
.an-seg--rac { background: var(--mc-terracotta); }
.an-val { font: 600 13.5px var(--mc-font-texte); color: var(--mc-encre); white-space: nowrap; }
/* Détail chiffré sous la barre (« Dépenses de santé ») : la légende dit les
   couleurs, cette ligne dit les montants. Décalée de la largeur de la colonne
   de libellé + son écart, pour tomber à l'aplomb de la piste. */
.an-sub { font: 500 12.5px/1.5 var(--mc-font-texte); color: var(--mc-texte-3); margin: 6px 0 0 202px; }
.an-sub strong { color: var(--mc-vert-texte); }
@media (max-width: 560px) {
  .an-ligne { grid-template-columns: 1fr auto; grid-template-areas: "lbl val" "track track"; row-gap: 5px; }
  .an-lbl { grid-area: lbl; }
  .an-val { grid-area: val; }
  .an-track { grid-area: track; }
  /* Sous ce seuil la colonne de libellé disparaît : le décalage de 202 px
     n'aurait plus rien à quoi s'aligner. */
  .an-sub { margin-left: 0; }
}

/* Bilan : barres divergentes de part et d'autre d'un axe central. */
.bil-list { display: flex; flex-direction: column; gap: 14px; }
.bil-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; }
.bil-an { font: 700 15px var(--mc-font-titre); color: var(--mc-encre); }
.bil-track { position: relative; height: 16px; border-radius: var(--mc-r-pastille); background: var(--mc-sable); }
/* Axe du zéro. Renforcé le 3 août 2026 : en 1,5 px de brume il disparaissait
   contre le sable de la piste, alors que c'est LUI qui donne son sens au
   graphe — à droite la mutuelle rapporte, à gauche elle coûte. */
.bil-zero { position: absolute; left: 50%; top: -7px; bottom: -7px; width: 3px; background: var(--mc-sapin); transform: translateX(-50%); border-radius: 2px; }
.bil-bar { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: var(--mc-r-pastille); }
.bil-bar--pos { background: var(--mc-vert); }
.bil-bar--neg { background: var(--mc-terracotta); }
.bil-val { font: 700 14px var(--mc-font-titre); white-space: nowrap; min-width: 96px; text-align: right; }
.bil-val.pos { color: var(--mc-vert-texte); }
.bil-val.neg { color: var(--mc-terracotta-texte); }
@media (max-width: 560px) {
  .bil-row { grid-template-columns: 44px 1fr; grid-template-areas: "an val" "track track"; row-gap: 6px; }
  .bil-an { grid-area: an; }
  .bil-val { grid-area: val; min-width: 0; }
  .bil-track { grid-area: track; }
}

.esp-main { max-width: 900px; margin: 0 auto; padding: 40px 28px 80px; display: flex; flex-direction: column; gap: 26px; }

.esp-hero { display: flex; flex-direction: column; gap: 10px; }
.esp-hero h1 { font: 700 40px/1.1 var(--mc-font-titre); letter-spacing: -0.7px; }
.esp-sub { font: 400 16.5px/1.6 var(--mc-font-texte); color: var(--mc-texte-2); max-width: 620px; }

/* Bandeau statut extension */
.esp-extbanner { border-radius: 12px; padding: 14px 18px; font: 500 14.5px/1.5 var(--mc-font-texte); display: none; }
.esp-extbanner.ok { display: block; background: var(--mc-vert-pastel); color: var(--mc-vert-texte); border: 1px solid var(--mc-bordure-verte); }
.esp-extbanner.ko { display: block; background: var(--mc-sable); color: var(--mc-texte-2); border: 1px solid var(--mc-brume); }

/* ==========================================================================
   Parcours téléphone vs parcours ordinateur
   --------------------------------------------------------------------------
   espace.js pose la classe `mc-sans-extension` sur <html> quand l'appareil ne
   peut accueillir aucune extension (Chrome Android, Safari iOS…). Par défaut —
   donc aussi si le script ne tourne pas — c'est le parcours ordinateur, complet,
   qui s'affiche : c'est le repli le plus sûr.
   ========================================================================== */

.esp-sub-mobile { display: none; }
.mc-sans-extension .esp-sub-ordi { display: none; }
.mc-sans-extension .esp-sub-mobile { display: inline; }

/* Carte principale du parcours téléphone */
.esp-mobile-card { display: none; }
.mc-sans-extension .esp-mobile-card {
  display: flex; gap: 18px;
  background: var(--mc-blanc-chaud);
  border: 1px solid var(--mc-bordure-verte);
  border-left: 3px solid var(--mc-vert);
  border-radius: var(--mc-r-carte);
  padding: 24px;
}
.esp-mobile-ic { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--mc-vert-pastel); border: 1px solid var(--mc-bordure-verte); display: flex; align-items: center; justify-content: center; }
.esp-mobile-txt { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.esp-mobile-txt h3 { font: 700 20px var(--mc-font-titre); color: var(--mc-encre); }
.esp-mobile-txt > p { font: 400 15px/1.6 var(--mc-font-texte); color: var(--mc-texte-2); margin: 0; }
.esp-mobile-note { font: 400 13.5px/1.55 var(--mc-font-texte); color: var(--mc-texte-3); margin: 2px 0 0; border-top: 1px dashed var(--mc-brume); padding-top: 10px; }
@media (max-width: 620px) { .mc-sans-extension .esp-mobile-card { flex-direction: column; gap: 12px; } }

/* Parcours ordinateur : conteneur transparent par défaut (rendu identique à
   l'affichage habituel), bloc repliable quand l'extension est hors de portée. */
.esp-desktop-flow > summary { display: none; }
.esp-desktop-flow-body { display: flex; flex-direction: column; gap: 16px; }
.mc-sans-extension .esp-desktop-flow > summary {
  display: flex; align-items: center; gap: 14px;
  background: var(--mc-blanc-chaud);
  border: 1px solid var(--mc-brume);
  border-radius: var(--mc-r-carte);
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.mc-sans-extension .esp-desktop-flow > summary::-webkit-details-marker { display: none; }
.mc-sans-extension .esp-desktop-flow > summary:hover { border-color: var(--mc-bordure-verte); }
.esp-desktop-flow-lbl { flex: 1; font: 400 13.5px/1.5 var(--mc-font-texte); color: var(--mc-texte-3); min-width: 0; }
.esp-desktop-flow-lbl strong { display: block; font: 700 16px var(--mc-font-titre); color: var(--mc-encre); margin-bottom: 2px; }
.esp-fold-ic { flex: none; font-size: 20px; line-height: 1; color: var(--mc-vert); transition: transform 0.2s ease; }
.mc-sans-extension .esp-desktop-flow[open] > summary .esp-fold-ic { transform: rotate(90deg); }
.mc-sans-extension .esp-desktop-flow[open] .esp-desktop-flow-body { margin-top: 16px; }

/* Étapes */
.esp-steps { display: flex; flex-direction: column; gap: 16px; }
.esp-step {
  display: flex; gap: 18px;
  background: var(--mc-blanc-chaud);
  border: 1px solid var(--mc-brume);
  border-radius: var(--mc-r-carte);
  padding: 26px;
}
.esp-step.done { border-color: var(--mc-bordure-verte); }
.esp-step-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mc-sapin); color: var(--mc-papier);
  display: flex; align-items: center; justify-content: center;
  font: 700 16px var(--mc-font-titre);
}
.esp-step.done .esp-step-num { background: var(--mc-vert); }
.esp-step-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.esp-step-body h3 { font: 700 20px var(--mc-font-titre); color: var(--mc-encre); }
.esp-step-body > p { font: 400 15px/1.6 var(--mc-font-texte); color: var(--mc-texte-2); margin: 0; }
.esp-step-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.esp-hint { font: 500 13px var(--mc-font-texte); color: var(--mc-texte-3); }

.esp-help { margin-top: 6px; }
.esp-help summary { font: 600 14px var(--mc-font-texte); color: var(--mc-sapin); cursor: pointer; }
.esp-help ol { margin: 10px 0 0; padding-left: 20px; color: var(--mc-texte-2); font: 400 14px/1.7 var(--mc-font-texte); }
.esp-help code { background: var(--mc-sable); border-radius: 5px; padding: 1px 6px; font-size: 0.92em; }

/* Sélecteur d'organisme */
.esp-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.esp-picker-label { font: 600 12px var(--mc-font-texte); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mc-texte-3); margin-top: 8px; }
.esp-mini-list { display: flex; flex-direction: column; gap: 10px; }
.esp-select {
  /* Même défaut que `.esp-field input` : sans `box-sizing`, la largeur de
     100 % s'ajoute au rembourrage et à la bordure. Les sélecteurs du tableau
     de bord y échappaient par chance (ils passent en `width: auto`), pas ceux
     posés en pleine largeur. */
  box-sizing: border-box;
  width: 100%;
  background: var(--mc-blanc-chaud);
  border: 1.5px solid var(--mc-bordure-champ);
  border-radius: var(--mc-r-input);
  color: var(--mc-encre);
  font: 500 15px var(--mc-font-texte);
  padding: 12px 14px;
  cursor: pointer;
}
.esp-select:focus { outline: 2px solid var(--mc-vert); outline-offset: 1px; }

/* Analyse */
.esp-empty { color: var(--mc-texte-3); font: 400 15px var(--mc-font-texte); padding: 6px 0; }

.esp-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.esp-stat { flex: 1; min-width: 130px; background: var(--mc-sable); border-radius: 12px; padding: 14px 16px; }
.esp-stat .k { font: 500 12px var(--mc-font-texte); color: var(--mc-texte-3); text-transform: uppercase; letter-spacing: 0.05em; }
.esp-stat .v { font: 700 22px var(--mc-font-titre); color: var(--mc-encre); margin-top: 4px; }
.esp-stat .v.pos { color: var(--mc-vert-texte); }
.esp-stat .v.neg { color: var(--mc-terracotta-texte); }

.esp-table { width: 100%; border-collapse: collapse; }
.esp-table th, .esp-table td { text-align: right; padding: 10px 8px; font: 500 14px var(--mc-font-texte); border-bottom: 1px solid var(--mc-brume); white-space: nowrap; }
.esp-table th { font-weight: 600; color: var(--mc-texte-3); text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.04em; }
.esp-table th:first-child, .esp-table td:first-child { text-align: left; }
.esp-table input {
  width: 92px; text-align: right;
  border: 1.5px solid var(--mc-bordure-champ); border-radius: 8px;
  padding: 6px 8px; font: 500 14px var(--mc-font-texte); color: var(--mc-encre);
  background: var(--mc-blanc-chaud);
}
.esp-table input:focus { outline: 2px solid var(--mc-vert); outline-offset: 1px; }
.esp-table td .verdict-cell { display: inline-flex; }
/* Colonne « Soin » : peut être longue -> on autorise le retour à la ligne et
   on plafonne la largeur pour ne pas déborder sur les colonnes de montants. */
.esp-table td.esp-td-lib {
  white-space: normal;
  max-width: 340px;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
/* Sur mobile, « Soin » est la seule colonne cassable : en table-layout auto,
   l'algorithme la comprimait jusqu'à 42px et le libellé se coupait caractère
   par caractère. Un plancher la garde lisible ; le surcroît de largeur est
   absorbé par .esp-table-scroll, qui fait défiler le tableau dans sa carte. */
@media (max-width: 620px) {
  .esp-table td.esp-td-lib { min-width: 148px; max-width: 190px; }
}
.esp-chart-wrap { margin-top: 22px; background: var(--mc-sable); border-radius: 12px; padding: 16px; }
.esp-total-line { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1.5px dashed var(--mc-brume); }
.esp-total-line .lbl { font: 400 14px var(--mc-font-texte); color: var(--mc-texte-2); }
.esp-total-line .amt { font: 700 30px var(--mc-font-titre); }
.esp-total-line .amt.pos { color: var(--mc-vert-texte); }
.esp-total-line .amt.neg { color: var(--mc-terracotta-texte); }

.esp-alt { background: var(--mc-blanc-chaud); border: 1px solid var(--mc-brume); border-left: 3px solid var(--mc-vert); border-radius: 12px; padding: 16px 20px; font: 400 15px/1.6 var(--mc-font-texte); color: var(--mc-texte-2); }

/* Carte alternative « sans extension » (mise en avant sous l'étape 2) */
.esp-alt-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--mc-vert-pastel);
  border: 1px solid var(--mc-bordure-verte);
  border-radius: var(--mc-r-carte);
  padding: 18px 22px;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.esp-alt-card:hover { border-color: var(--mc-vert); transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(16,23,17,.28); }
.esp-alt-ic { flex: none; width: 46px; height: 46px; border-radius: 11px; background: var(--mc-blanc-chaud); border: 1px solid var(--mc-bordure-verte); display: flex; align-items: center; justify-content: center; }
.esp-alt-txt { flex: 1; font: 400 14.5px/1.55 var(--mc-font-texte); color: var(--mc-vert-texte); }
.esp-alt-txt strong { display: block; font: 700 16px var(--mc-font-titre); color: var(--mc-sapin); margin-bottom: 2px; }
.esp-alt-go { flex: none; font: 600 14px var(--mc-font-texte); color: var(--mc-sapin); white-space: nowrap; }
@media (max-width: 620px) { .esp-alt-card { flex-direction: column; align-items: flex-start; } .esp-alt-go { align-self: stretch; } }

/* Tableau de bord */
.esp-dashboard { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; scroll-margin-top: 80px; }
.esp-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.esp-dash-head h2 { font: 700 30px var(--mc-font-titre); letter-spacing: -0.5px; margin-top: 6px; }

.esp-connect-how { margin: 4px 0 20px; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.esp-connect-how li { font: 400 14.5px/1.55 var(--mc-font-texte); color: var(--mc-texte-2); padding-left: 4px; }
.esp-connect-how li::marker { color: var(--mc-vert); font-weight: 700; }

/* Précision secondaire dans une étape (ex. mutuelles sans cotisation en ligne) */
.esp-inline-note { display: block; margin-top: 7px; background: var(--mc-sable); border-left: 3px solid var(--mc-vert); border-radius: 0 9px 9px 0; padding: 9px 13px; font-size: 13.5px; line-height: 1.55; color: var(--mc-texte-2); }
.esp-inline-note strong { color: var(--mc-sapin); }

/* Schéma explicatif (où cliquer dans Chrome) */
.esp-figure { margin: 12px 0 4px; background: var(--mc-sable); border: 1px solid var(--mc-brume); border-radius: 14px; padding: 14px 14px 10px; }
.esp-figure svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
.esp-figcaption { margin-top: 10px; text-align: center; font: 400 12.5px/1.5 var(--mc-font-texte); color: var(--mc-texte-3); }
.esp-figcaption strong { display: inline-block; min-width: 17px; height: 17px; line-height: 17px; border-radius: 50%; background: var(--mc-vert); color: #fff; font-size: 11px; text-align: center; margin-right: 2px; }

/* Formulaires de la page Paramètres */
.esp-form { display: flex; flex-direction: column; gap: 18px; }
.esp-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .esp-form-grid { grid-template-columns: 1fr; } }
.esp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.esp-field--full { grid-column: 1 / -1; }
.esp-field label { font: 600 12px var(--mc-font-texte); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mc-texte-3); }
.esp-field input {
  /* `box-sizing` est INDISPENSABLE ici : `style.css` pose la règle globale,
     mais l'espace connecté ne le charge pas (il vit sur tokens.css +
     connexions.css + espace.css). Sans elle, `width: 100%` s'ajoute aux 28 px
     de rembourrage et aux 3 px de bordure — le champ « Prénom » débordait de
     31 px sur la colonne « Nom ». */
  box-sizing: border-box;
  width: 100%;
  background: var(--mc-blanc-chaud);
  border: 1.5px solid var(--mc-bordure-champ);
  border-radius: var(--mc-r-input);
  color: var(--mc-encre);
  font: 500 15px var(--mc-font-texte);
  padding: 12px 14px;
}
.esp-field input:focus { outline: 2px solid var(--mc-vert); outline-offset: 1px; }
.esp-field input[readonly] { background: var(--mc-sable); color: var(--mc-texte-2); cursor: not-allowed; }
.esp-field-note { margin: 2px 0 0; font: 400 12.5px/1.55 var(--mc-font-texte); color: var(--mc-texte-3); }
.esp-field-note a { color: var(--mc-vert-texte); font-weight: 600; }
.esp-form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.esp-hint.is-error { color: var(--mc-terracotta-texte); font-weight: 600; }

/* Récapitulatif en lecture seule du profil « Projet futur » */
.esp-recap { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 0; margin: 0 0 4px; }
.esp-recap dt { font: 600 12px var(--mc-font-texte); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mc-texte-3); padding: 11px 14px 11px 0; border-top: 1px solid var(--mc-brume); align-self: center; }
.esp-recap dd { margin: 0; font: 500 15px var(--mc-font-texte); color: var(--mc-encre); padding: 11px 0; border-top: 1px solid var(--mc-brume); }
.esp-recap dt:first-of-type, .esp-recap dt:first-of-type + dd { border-top: none; }
@media (max-width: 520px) {
  .esp-recap { grid-template-columns: 1fr; }
  .esp-recap dt { padding-bottom: 0; }
  .esp-recap dd { padding-top: 4px; border-top: none; }
  .esp-recap dt:first-of-type + dd { border-top: none; }
}

.esp-card { background: var(--mc-blanc-chaud); border: 1px solid var(--mc-brume); border-radius: var(--mc-r-carte); padding: 24px; }
.esp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.esp-card-head .esp-card-title { margin: 0; }
.esp-card-head .esp-select { width: auto; min-width: 210px; }

/* Section repliable (ex. « Détail de vos remboursements ») */
.esp-collapse { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.esp-collapse .esp-card-title { margin: 0; }
/* Chevron d'ouverture : cible de clic confortable (36 px) et flèche bien
   visible — la version 20 px passait inaperçue. */
.esp-collapse-ic {
  font-size: 26px;
  line-height: 1;
  color: var(--mc-vert);
  transition: transform 0.2s ease;
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--mc-vert-pastel);
}
.esp-collapse:hover .esp-collapse-ic { filter: brightness(0.96); }
.esp-collapse[aria-expanded="true"] .esp-collapse-ic { transform: rotate(90deg); }
.esp-collapse-body { margin-top: 16px; }
.esp-collapse-tools { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.esp-collapse-tools .esp-select { width: auto; min-width: 210px; }
.esp-card-title { font: 700 18px var(--mc-font-titre); color: var(--mc-encre); margin: 0 0 6px; }
.esp-card-sub { font: 400 14px/1.55 var(--mc-font-texte); color: var(--mc-texte-2); margin: 0 0 16px; }
.esp-note { font: 400 12.5px/1.5 var(--mc-font-texte); color: var(--mc-texte-3); margin: 12px 0 0; }

.esp-table-scroll { overflow-x: auto; }
.esp-auto-badge { display: inline-block; font: 700 10px var(--mc-font-texte); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mc-vert-texte); background: var(--mc-vert-pastel); border: 1px solid var(--mc-bordure-verte); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
/* Année dont la cotisation est connue mais qui n'a aucun remboursement :
   affichée pour que la lecture automatique soit visible, mais hors calcul. */
.esp-hors-badge { display: inline-block; font: 700 10px var(--mc-font-texte); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mc-texte-3); background: var(--mc-brume); border: 1px solid var(--mc-brume); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }

/* En-têtes de colonnes triables du détail des remboursements. */
.esp-table--triable th { padding: 0; }
.esp-th-tri {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  justify-content: flex-end; background: none; border: none; cursor: pointer;
  padding: 10px 8px; font: inherit; color: inherit; text-transform: inherit;
  letter-spacing: inherit; text-align: inherit;
}
.esp-table--triable th:first-child .esp-th-tri { justify-content: flex-start; }
.esp-th-tri:hover { color: var(--mc-encre); }
.esp-th-tri:focus-visible { outline: 2px solid var(--mc-vert); outline-offset: -2px; }
.esp-th-fleche { font-size: 10px; opacity: 0.45; }
.esp-th-tri.is-actif { color: var(--mc-vert-texte); }
.esp-th-tri.is-actif .esp-th-fleche { opacity: 1; }
.esp-td-lib { max-width: 220px; white-space: normal; }
.esp-td-pos { color: var(--mc-vert-texte); font-weight: 600; }
.esp-td-neg { color: var(--mc-terracotta-texte); font-weight: 600; }
.esp-table tfoot td, .esp-tr-total td { border-top: 2px solid var(--mc-brume); font-weight: 600; color: var(--mc-encre); }
.esp-drees { margin-top: 18px; background: var(--mc-sable); border-radius: 12px; padding: 14px 18px; font: 400 13.5px/1.6 var(--mc-font-texte); color: var(--mc-texte-2); }
.esp-drees strong { color: var(--mc-encre); }

@media (max-width: 620px) {
  .esp-step { flex-direction: column; gap: 12px; }
  .esp-hero h1 { font-size: 32px; }
  .esp-table th, .esp-table td { padding: 8px 5px; font-size: 12.5px; }
}

/* ==========================================================================
   Débordement horizontal — correctifs (mobile)
   --------------------------------------------------------------------------
   Un élément de flex ou de grid a `min-width: auto` par défaut : il refuse de
   rétrécir sous la largeur min-content de son contenu. Un canvas Chart.js ou
   un tableau large suffit alors à pousser sa carte hors du cadre, et c'est
   toute la page qui défile latéralement. `min-width: 0` lève ce plancher ;
   les contenus réellement larges restent lisibles grâce à .esp-table-scroll,
   qui les fait défiler dans leur propre conteneur.
   ========================================================================== */
.esp-main > *,
#dash-body > *,
.dash-charts > *,
.dash-stats > * { min-width: 0; }

@media (max-width: 620px) {
  /* Les sélecteurs cessent d'imposer un plancher de 180/210px et prennent la
     largeur disponible ; le bouton d'export passe sous eux plutôt que de
     forcer la ligne à s'allonger. */
  .dash-top-actions { width: 100%; }
  .dash-top-actions .esp-select,
  .esp-card-head .esp-select,
  .dash-stats-head .esp-select,
  .esp-collapse-tools .esp-select { min-width: 0; width: 100%; }
  .dash-stats-head { display: block; }
  .dash-stats-head .esp-select { margin-top: 10px; }
  .dash-top-actions .mc-btn { width: 100%; }
  .esp-collapse-tools { display: block; }
}

/* Liste des mutuelles connectées (Paramètres) : état de chaque connexion
   établie par l'extension, avec le nombre de relevés récupérés. */
.esp-conn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esp-conn-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--mc-blanc-chaud);
  border: 1px solid var(--mc-brume);
  border-radius: 12px;
  padding: 12px 16px;
}
.esp-conn-logo {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px var(--mc-font-titre); color: #fff;
}
.esp-conn-txt { flex: 1; min-width: 0; font: 600 15px var(--mc-font-texte); color: var(--mc-encre); }
.esp-conn-txt small { display: block; margin-top: 2px; font: 400 13px var(--mc-font-texte); color: var(--mc-texte-2); }
.esp-conn-item .status { flex: none; }

/* Effacer les mutuelles connectées : discret par défaut (c'est une action
   destructrice, elle ne doit pas attirer l'œil), franchement rouge une fois
   armée pour le second clic. */
.esp-oubli { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.esp-oubli-btn { background:none; border:1px solid var(--mc-brume); color:var(--mc-texte-2);
  font:500 13px var(--mc-font-texte); padding:7px 14px; border-radius:9px; cursor:pointer; }
.esp-oubli-btn:hover { border-color:var(--mc-terracotta); color:var(--mc-terracotta-texte); }
.esp-oubli-btn.armed { background:var(--mc-terracotta); border-color:var(--mc-terracotta); color:#FAF6EE; }