/* ==========================================================================
   MutuCash — Comparer les mutuelles (onglet de l'espace, 6 novembre 2026)
   Variables : tokens.css. Toute couleur passe par un jeton --mc-* ou par une
   classe (jamais var() dans un attribut SVG : c'est invalide, on colore les
   tracés par la propriété CSS stroke/fill, qui prime sur l'attribut).
   ========================================================================== */

.cmp-main { gap: 22px; }
.cmp-main h1 { font: 700 40px/1.1 var(--mc-font-titre); letter-spacing: -0.7px; margin: 0; }

/* Couleurs de données propres au comparatif (clair / sombre). Déclarées sur
   :root SEULEMENT : redéclarées sur .mc, elles masqueraient la surcharge du
   thème sombre posée sur <html>. */
:root {
  --cmp-org: #4F7D66;          /* barres des organismes */
  --cmp-moi-mut: var(--mc-vert);
  --cmp-nat: var(--mc-texte-3);
  --cmp-vous: var(--mc-terracotta);
  --cmp-ocre: #C98A2E;
  --cmp-ardoise: #6F82A8;
  --cmp-prune: #9A6A8E;
  --cmp-sable-fonce: #C9C2AE;
}
:root[data-theme="dark"] {
  --cmp-org: #7FB59A;
  --cmp-ocre: #E2B062;
  --cmp-ardoise: #9DB0D8;
  --cmp-prune: #C79BBB;
  --cmp-sable-fonce: #5A665E;
}

/* ---- Bascule moyennes / mes statistiques -------------------------------- */
.cmp-switch {
  display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px;
  background: var(--mc-sable); border-radius: 12px;
}
.cmp-switch-btn {
  border: none; background: transparent; cursor: pointer;
  font: 600 15px var(--mc-font-texte); color: var(--mc-texte-2);
  padding: 10px 18px; border-radius: 9px;
}
.cmp-switch-btn:hover { color: var(--mc-sapin); }
.cmp-switch-btn[aria-pressed="true"] {
  background: var(--mc-blanc-chaud); color: var(--mc-sapin);
  box-shadow: 0 2px 8px -4px rgba(16, 23, 17, .25);
}
.cmp-switch-btn:focus-visible, .cmp-seg-btn:focus-visible, .cmp-row:focus-visible {
  outline: 2px solid var(--mc-vert); outline-offset: 2px;
}

.cmp-chargement { font: 500 15px var(--mc-font-texte); color: var(--mc-texte-3); margin: 0; }
.alerte-cmp {
  border-radius: 12px; padding: 14px 18px; font: 500 14.5px/1.5 var(--mc-font-texte);
  background: var(--mc-terracotta-pastel); color: var(--mc-terracotta-texte);
}

/* ---- Cartes ---------------------------------------------------------------- */
.cmp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cmp-sub { font: 400 13.5px/1.5 var(--mc-font-texte); color: var(--mc-texte-3); margin: 2px 0 14px; }
.cmp-note { font: 400 13px/1.55 var(--mc-font-texte); color: var(--mc-texte-3); margin: 12px 0 0; }
.cmp-controles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cmp-select { width: auto; min-width: 200px; }
.cmp-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--mc-sable); border-radius: 10px; }
.cmp-seg-btn {
  border: none; background: transparent; cursor: pointer; white-space: nowrap;
  font: 600 13.5px var(--mc-font-texte); color: var(--mc-texte-2);
  padding: 7px 12px; border-radius: 8px;
}
.cmp-seg-btn:hover { color: var(--mc-sapin); }
.cmp-seg-btn[aria-pressed="true"] { background: var(--mc-blanc-chaud); color: var(--mc-sapin); box-shadow: 0 2px 6px -4px rgba(16, 23, 17, .3); }
.cmp-seg-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Mes statistiques ------------------------------------------------------ */
.cmp-moi-tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
.cmp-moi-phrase { font: 500 16px/1.55 var(--mc-font-texte); color: var(--mc-encre); margin: 16px 0 0; }
.cmp-moi-phrase strong { font-family: var(--mc-font-titre); }
.cmp-moi-choix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.cmp-moi-vide p { margin: 0 0 12px; font: 400 15px/1.6 var(--mc-font-texte); color: var(--mc-texte-2); }
.cmp-moi-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cmp-tuile-v--vous { color: var(--cmp-vous); }
@media (max-width: 760px) { .cmp-moi-tuiles { grid-template-columns: 1fr; } }

/* ---- Classement (lecture Doctomètre : nom | barre | valeur) ------------------ */
.cmp-axis, .cmp-row { display: grid; grid-template-columns: 250px 1fr 76px; gap: 10px; }
.cmp-axis { color: var(--mc-texte-3); font: 500 11.5px var(--mc-font-texte); margin-bottom: 6px; }
.cmp-axis > * { min-width: 0; }
.cmp-ticks { display: flex; justify-content: space-between; border-left: 2px solid transparent; }
.cmp-chart { display: flex; flex-direction: column; }
.cmp-row { align-items: center; padding: 3px 0; border-radius: 6px; cursor: pointer; }
.cmp-row:hover { background: var(--mc-survol-sapin); }
.cmp-name {
  font: 500 13.5px var(--mc-font-texte); color: var(--mc-encre); text-align: right;
  display: flex; justify-content: flex-end; align-items: baseline; min-width: 0; white-space: nowrap;
}
/* Seul le nom se tronque : l'année (« publ. 2024 ») reste toujours lisible. */
.cmp-nom { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cmp-an { flex: none; font-size: 11.5px; color: var(--mc-texte-3); margin-left: 5px; font-weight: 500; }
.cmp-tag {
  display: inline-block; font: 700 10.5px var(--mc-font-texte); letter-spacing: .2px; text-transform: uppercase;
  color: var(--mc-vert-texte); background: var(--mc-vert-pastel); border-radius: 99px; padding: 2px 7px; margin-right: 6px;
  vertical-align: 1px; flex: none;
}
.cmp-track { position: relative; height: 18px; border-left: 2px solid var(--mc-brume); }
.cmp-bar { position: absolute; top: 2px; bottom: 2px; left: 0; background: var(--cmp-org); border-radius: 0 4px 4px 0; min-width: 2px; }
.cmp-ref { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px dashed var(--cmp-nat); pointer-events: none; }
.cmp-val { font: 600 12.5px var(--mc-font-texte); font-variant-numeric: tabular-nums; color: var(--mc-texte-2); white-space: nowrap; }
.cmp-row--nat { cursor: default; }
.cmp-row--nat:hover { background: none; }
.cmp-row--nat .cmp-name { font-weight: 700; color: var(--mc-texte-2); }
.cmp-row--nat .cmp-bar { background: var(--cmp-nat); }
.cmp-row--mamut .cmp-name { font-weight: 700; }
.cmp-row--mamut .cmp-bar { background: var(--cmp-moi-mut); }
/* Chiffre repris par la presse (source secondaire) : barre claire. */
.cmp-row--sec .cmp-bar { opacity: .5; }
.cmp-puce--sec { background: var(--cmp-org); opacity: .5; }
.cmp-row--vous { cursor: default; }
.cmp-row--vous:hover { background: none; }
.cmp-row--vous .cmp-name { font-weight: 700; color: var(--cmp-vous); }
.cmp-row--vous .cmp-bar { background: repeating-linear-gradient(135deg, var(--cmp-vous) 0 6px, transparent 6px 9px); border: 1px solid var(--cmp-vous); }
.cmp-row.is-ouvert { background: var(--mc-survol-sapin); }
.cmp-legende-classement { font: 400 12.5px/1.55 var(--mc-font-texte); color: var(--mc-texte-3); margin: 12px 0 0; }
.cmp-legende-classement .cmp-puce { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin: 0 5px 0 10px; }
.cmp-legende-classement .cmp-puce:first-child { margin-left: 0; }
.cmp-puce--org { background: var(--cmp-org); }
.cmp-puce--mamut { background: var(--cmp-moi-mut); }
.cmp-puce--nat { background: var(--cmp-nat); }
.cmp-puce--vous { background: var(--cmp-vous); }
.cmp-vide { font: 400 14px var(--mc-font-texte); color: var(--mc-texte-3); padding: 10px 0; }

@media (max-width: 640px) {
  /* Nom sur sa ligne, barre pleine largeur dessous : rien n'est tronqué. */
  .cmp-axis, .cmp-row { grid-template-columns: minmax(0, 1fr) 62px; column-gap: 8px; }
  .cmp-axis { padding: 0 4px; }
  .cmp-axis > :first-child { display: none; }
  .cmp-row { grid-template-areas: "nom nom" "barre val"; row-gap: 3px; padding: 6px 4px; }
  .cmp-row .cmp-name { grid-area: nom; justify-content: flex-start; text-align: left; font-size: 13px; }
  .cmp-row .cmp-track { grid-area: barre; }
  .cmp-row .cmp-val { grid-area: val; }
  .cmp-main h1 { font-size: 30px; }
  .cmp-switch { align-self: stretch; }
  .cmp-switch-btn { flex: 1 1 0; padding: 10px 8px; font-size: 14px; }
  .cmp-controles .cmp-seg { width: 100%; }
  .cmp-controles .cmp-seg-btn { flex: 1 1 0; white-space: normal; }
  .cmp-select { width: 100%; }
}

/* ---- Détail d'un organisme ---------------------------------------------------- */
.cmp-detail { margin-top: 18px; border-top: 1px solid var(--mc-brume); padding-top: 16px; }
.cmp-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cmp-detail-head h3 { font: 700 18px var(--mc-font-titre); color: var(--mc-encre); margin: 0; }
.cmp-fermer {
  border: 1px solid var(--mc-brume); background: none; color: var(--mc-texte-2);
  border-radius: 8px; padding: 4px 12px; cursor: pointer; font: 600 13px var(--mc-font-texte);
}
.cmp-detail-meta { font: 400 13.5px var(--mc-font-texte); color: var(--mc-texte-3); margin: 4px 0 12px; }

/* ---- Tableaux ------------------------------------------------------------------ */
.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font: 400 13px var(--mc-font-texte); color: var(--mc-texte-2); }
.cmp-table th, .cmp-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--mc-brume); vertical-align: top; }
.cmp-table th { font-weight: 700; color: var(--mc-encre); white-space: nowrap; }
.cmp-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-table th.num { text-align: right; }
.cmp-moi-repere { margin: 12px 0 0; }
.cmp-table a { word-break: break-word; }
.cmp-secondaire { font-size: 11.5px; color: var(--mc-texte-3); }
/* Les notes citent parfois de longues adresses : elles se coupent au lieu d'élargir le tableau. */
.cmp-table .cmp-secondaire { overflow-wrap: anywhere; }
.cmp-table td[data-lib="Source"] { min-width: 110px; }
@media (max-width: 640px) {
  /* Une ligne du tableau = un bloc, chaque valeur précédée de son libellé. */
  .cmp-table thead { display: none; }
  .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display: block; width: auto; }
  .cmp-table tr { border-bottom: 1px solid var(--mc-brume); padding: 10px 0; }
  .cmp-table td { border: 0; padding: 2px 0; }
  .cmp-table td.num { text-align: left; white-space: normal; }
  .cmp-table td.cmp-td-titre { font-weight: 700; color: var(--mc-encre); }
  .cmp-table td[data-lib]::before { content: attr(data-lib) "\00a0: "; color: var(--mc-texte-3); }
  .cmp-table td[data-lib="Source"] { min-width: 0; }
}

/* ---- Camembert ------------------------------------------------------------------ */
.cmp-donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cmp-donut { flex: none; width: 220px; max-width: 100%; }
.cmp-donut svg { display: block; width: 100%; height: auto; }
.cmp-donut-fond { stroke: var(--mc-sable); }
.cmp-donut-v { font: 700 30px var(--mc-font-titre); fill: var(--mc-encre); }
.cmp-donut-k { font: 500 12px var(--mc-font-texte); fill: var(--mc-texte-3); }
.cmp-donut-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; min-width: 0; }
.cmp-donut-legende li { display: grid; grid-template-columns: 14px 1fr auto; align-items: baseline; gap: 10px; font: 500 14px var(--mc-font-texte); color: var(--mc-encre); }
.cmp-donut-legende .cmp-l-puce { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.cmp-donut-legende .cmp-l-val { font: 700 14.5px var(--mc-font-titre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-donut-legende .cmp-l-detail { grid-column: 2 / 4; font: 400 12px/1.4 var(--mc-font-texte); color: var(--mc-texte-3); margin-top: -4px; }
@media (max-width: 560px) { .cmp-donut { margin: 0 auto; } }

/* Palette des postes (segments et pastilles partagent la même classe) */
.cmp-c-prestations { stroke: var(--mc-vert); background: var(--mc-vert); }
.cmp-c-acquisition { stroke: var(--cmp-ocre); background: var(--cmp-ocre); }
.cmp-c-administration { stroke: var(--cmp-prune); background: var(--cmp-prune); }
.cmp-c-sinistres { stroke: var(--cmp-ardoise); background: var(--cmp-ardoise); }
.cmp-c-gestion { stroke: var(--cmp-ocre); background: var(--cmp-ocre); }
.cmp-c-services { stroke: var(--cmp-ardoise); background: var(--cmp-ardoise); }
.cmp-c-solidarite { stroke: var(--cmp-prune); background: var(--cmp-prune); }
.cmp-c-resultat { stroke: var(--mc-texte-3); background: var(--mc-texte-3); }
.cmp-c-autres { stroke: var(--mc-texte-3); background: var(--mc-texte-3); }
.cmp-c-taxes { stroke: var(--cmp-sable-fonce); background: var(--cmp-sable-fonce); }
.cmp-c-nonrembourse { stroke: var(--mc-terracotta); background: var(--mc-terracotta); }
.cmp-donut circle.cmp-seg-arc { fill: none; }

/* ---- Évolution -------------------------------------------------------------------- */
.cmp-evolution svg { display: block; width: 100%; height: auto; overflow: visible; }
.cmp-ev-grille { stroke: var(--mc-brume); stroke-width: 1; }
.cmp-ev-axe { fill: var(--mc-texte-3); font: 500 11px var(--mc-font-texte); }
.cmp-ev-ligne { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cmp-ev-point { stroke-width: 2; fill: var(--mc-blanc-chaud); }
.cmp-s-ensemble { stroke: var(--mc-sapin); }
.cmp-s-individuel { stroke: var(--cmp-ocre); }
.cmp-s-collectif { stroke: var(--cmp-ardoise); }
.cmp-s-organisme { stroke: var(--mc-vert); }
.cmp-s-vous { stroke: var(--mc-terracotta); }
.cmp-ev-ligne.cmp-s-individuel, .cmp-ev-ligne.cmp-s-collectif { stroke-dasharray: 7 5; stroke-width: 2; }
.cmp-ev-ligne.cmp-s-vous { stroke-dasharray: 2 5; stroke-width: 2.5; }
.cmp-evolution-legende { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 13px var(--mc-font-texte); color: var(--mc-texte-2); }
.cmp-evolution-legende li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-evolution-legende .cmp-l-trait { width: 22px; height: 0; border-top: 3px solid; }
.cmp-l-trait.cmp-s-ensemble { border-color: var(--mc-sapin); }
.cmp-l-trait.cmp-s-individuel { border-color: var(--cmp-ocre); border-top-style: dashed; }
.cmp-l-trait.cmp-s-collectif { border-color: var(--cmp-ardoise); border-top-style: dashed; }
.cmp-l-trait.cmp-s-organisme { border-color: var(--mc-vert); }
.cmp-l-trait.cmp-s-vous { border-color: var(--mc-terracotta); border-top-style: dotted; }

/* ---- Méthode ------------------------------------------------------------------------ */
.cmp-methode-liste { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font: 400 14.5px/1.6 var(--mc-font-texte); color: var(--mc-texte-2); }
.cmp-sources { margin-top: 16px; }
.cmp-sources summary { cursor: pointer; font: 600 14.5px var(--mc-font-texte); color: var(--mc-sapin); }
.cmp-sources[open] summary { margin-bottom: 8px; }