/* =============================================================================
   COMPARATEUR COURTIER — PHASE RÉSULTATS « Cockpit Liquid Glass »
   Spec : docs/superpowers/specs/2026-08-23-comparateur-resultats-cockpit-design.md
   Chargé APRÈS comparator-react-theme.css. Préfixe .cr-*.
   Règles : blur sur les fonds jamais sur le texte ; encre pleine ; bordures 1px ;
   zéro hex de marque en dur (tokens --cmp-* et --em-* + color-mix).
   NB : jamais de « étoile-slash » dans un commentaire (il fermerait celui-ci).
============================================================================= */

/* ── 0. Tokens ── */
:root {
  --cr-ink:      var(--cmp-text, var(--em-ink, #0E2A3D));
  --cr-ink-2:    var(--em-ink-2, #3E647D);
  --cr-muted:    var(--cmp-muted, var(--em-muted, #64748B));
  --cr-primary:  var(--cmp-primary, var(--em-primary, #F27A54));
  --cr-primary-dark: var(--cmp-primary-dark, var(--em-primary-dark, #D65A3B));
  --cr-primary-deep: var(--em-primary-deep, #B04225);
  --cr-accent:   var(--em-accent, #E9C46A);
  --cr-ok:       var(--em-success, #16A34A);
  /* Vert « économie » dédié au badge vs banque : plus vif que --cr-ok (réservé aux
     statuts « retenue »/ok), façon accent WhatsApp — pour que le chiffre d'économie
     saute aux yeux sans reprendre le vert institutionnel déjà utilisé ailleurs. */
  --cr-eco:      var(--cmp-eco, var(--em-eco, #25D366));
  /* Vert « pharmacie » : la croix verte, franche et lumineuse — même famille que le
     bouton « Retenir », juste un cran plus clair. (Avant : un mélange vert+bleu
     qui virait au teal terne et n'appartenait plus à la famille du vert.) */
  --cr-med:      color-mix(in srgb, var(--cr-ok) 62%, #4ADE80 38%);
  /* Palette des FAMILLES de garanties — une teinte par famille, car elles se
     souscrivent groupées (DC+PTIA, ITT+IPT). Teintes sourdes, appliquées en
     vignette (fond lavé + texte teinté), jamais en aplat saturé : la carte doit
     rester lisible avec six vignettes côte à côte. Aucune ne concurrence le
     corail de marque, réservé au prix et aux actions. */
  /* Beige-gris chaud dédié (pas --em-ink-2, trop bleu-slate/froid dans ce badge) —
     DC/PTIA/ITT/IPT, quasi systématiques, doivent s'effacer derrière IPP/MNO. */
  --cr-g-neutre: #8C8375;
  --cr-g-ipp:    #0EA5E9; /* bleu clair — IPP, à faire ressortir */
  --cr-g-mno:    var(--cr-eco); /* vert WhatsApp — MNO / dos-psy, à faire ressortir */
  --cr-warn:     var(--em-warn, #F59E0B);
  --cr-danger:   var(--em-danger, #DC2626);
  --cr-line:     rgba(255,255,255,.62);
  --cr-spec:     inset 0 1px 0 rgba(255,255,255,.85); /* arête de lumière */
  --cr-r:        16px;
  --cr-r-lg:     20px;
  --cr-ease:     var(--em-ease, cubic-bezier(.22,1,.36,1));
}

/* ── 1. Les trois niveaux de verre (spec §7.1) ── */
.cr-glass-chrome {
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--cr-line);
  box-shadow: var(--cr-spec), 0 12px 30px -14px rgba(14,42,61,.26), 0 2px 6px rgba(14,42,61,.05);
}
.cr-glass-content {
  background: rgba(255,255,255,.68);
  -webkit-backdrop-filter: blur(17px) saturate(155%);
  backdrop-filter: blur(17px) saturate(155%);
  border: 1px solid var(--cr-line);
  box-shadow: var(--cr-spec), 0 10px 30px -12px rgba(14,42,61,.16), 0 2px 6px rgba(14,42,61,.05);
}
@supports not (backdrop-filter: blur(1px)) { .cr-glass-chrome, .cr-glass-content { background: rgba(255,255,255,.94); } }

/* ── 2. Layout colonne unique ── */
#phaseResults .cr-col { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* ── 3. Chips génériques (verre) ── */
.cr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(14,42,61,.06);
  font-size: 12px; font-weight: 800; color: var(--cr-ink-2);
  cursor: pointer; white-space: nowrap; transition: all .16s var(--cr-ease);
}
.cr-chip:hover { background: rgba(255,255,255,.85); color: var(--cr-primary-deep); }
.cr-chip:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; }
.cr-chip.is-on {
  background: color-mix(in srgb, var(--cr-primary) 12%, #fff);
  border-color: color-mix(in srgb, var(--cr-primary) 45%, #fff);
  color: var(--cr-primary-deep);
}
.cr-chip-n {
  font-size: 11px; font-weight: 800; color: var(--cr-muted);
  background: rgba(14,42,61,.07); border-radius: 999px; padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.cr-chip.is-on .cr-chip-n { background: color-mix(in srgb, var(--cr-primary) 22%, #fff); color: var(--cr-primary-deep); }
.cr-chip-logo { height: 15px; max-width: 54px; object-fit: contain; }

/* Monogramme de secours (compagnie sans logo) */
.cr-mono {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--cr-ink), color-mix(in srgb, var(--cr-ink) 60%, #4A7EA5));
  color: #fff; font-family: var(--em-font-display, 'Bricolage Grotesque', sans-serif);
  font-weight: 800; letter-spacing: .02em; border-radius: 8px;
}
.cr-chip .cr-mono { width: 20px; height: 20px; font-size: 9px; }

/* ── 4. Panneau dépliable (pattern .wz-restore-slot, grid-rows 0fr→1fr) ── */
.cr-slot { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--cr-ease); }
.cr-slot.is-open { grid-template-rows: 1fr; }
.cr-slot-in { overflow: hidden; min-height: 0; }
/* Marge intérieure du volet : sans elle, le overflow:hidden ci-dessus tranchait au
   carré l'ombre portée arrondie du panneau — les coins paraissaient équerrés. */
.cr-slot-pad { padding: 3px 14px 16px; }

/* ── 5. Titre de page : dernier écart typographique résorbé ── */
.page-title { font-family: var(--em-font-display, 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif); font-weight: 800; }

/* ── 6. Mesh amplifié derrière la phase résultats (le verre a besoin de matière) ── */
#phaseResults { position: relative; }
#phaseResults::before {
  /* inset horizontal 0 : une valeur négative étendrait le scrollWidth (scroll horizontal mobile) */
  content: ""; position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 34% at 10% 0%, color-mix(in srgb, var(--cr-primary) 13%, transparent), transparent 62%),
    radial-gradient(40% 30% at 92% 6%, color-mix(in srgb, var(--cr-accent) 15%, transparent), transparent 60%),
    radial-gradient(52% 40% at 50% 104%, rgba(62,146,204,.10), transparent 58%);
}

/* ── 7. Mouvement ── */
@media (prefers-reduced-motion: reduce) {
  .cr-slot { transition: none; }
}

/* ── 8. Carte d'offre v2 ──
   Fond BLANC franc (lisibilité maximale des données) : le verre reste au chrome
   (bandeau, barre d'outils, panneaux flottants), jamais sous les chiffres. */
#phaseResults .tarif-card {
  position: relative; border-radius: var(--cr-r-lg); overflow: hidden;
  background: #fff;
  border: 1px solid rgba(14,42,61,.09);
  box-shadow: 0 1px 2px rgba(14,42,61,.04), 0 8px 24px -14px rgba(14,42,61,.20);
  transition: transform .22s var(--cr-ease), box-shadow .22s var(--cr-ease), border-color .22s;
}
#phaseResults .tarif-card:hover {
  transform: translateY(-2px); border-color: rgba(14,42,61,.14);
  box-shadow: 0 2px 4px rgba(14,42,61,.05), 0 18px 40px -16px rgba(14,42,61,.26);
}
/* Meilleure offre : pas de lavis coloré — le rail + le badge TOP suffisent. */
#phaseResults .tarif-card.best { border-color: color-mix(in srgb, var(--cr-primary) 32%, #fff); }
#phaseResults .tarif-card.is-retenue { border-color: color-mix(in srgb, var(--cr-ok) 45%, #fff); }
.cr-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 0;
  background: linear-gradient(180deg, var(--cr-primary), var(--cr-primary-dark)); }
.tarif-card.best .cr-rail { opacity: 1; }
.tarif-card.is-retenue .cr-rail { opacity: 1; background: var(--cr-ok); }
/* En-tête de carte, en trois temps :
   [case] [rail d'identité : logo assureur + « by grossiste »] ┊ [bloc principal]
   Le rail ne porte QUE la marque ; tout le reste (assureur, produit, badges, coût
   dans le temps, économie) vit dans le bloc de droite, séparé par un tireté. */
.cr-in { display: grid; grid-template-columns: auto auto minmax(0,1fr);
  grid-template-areas: "chk logo main"; align-items: stretch; column-gap: 13px; padding: 13px 18px 12px; }
#phaseResults .cr-in > .tc-select { grid-area: chk; align-self: start; margin-top: 5px; }
/* Rail : logo assureur SANS cadre + « by {grossiste} » dessous, centré verticalement.
   width:auto — la pile doit pouvoir s'élargir jusqu'au wordmark du grossiste, plus
   large que le logo de la compagnie. */
/* Largeur FIXE : sans elle le rail s'élargissait sur les cartes portant une vignette
   d'économie, et le tireté ne tombait plus au même x d'une carte à l'autre — or
   c'est cet alignement qui fait la colonne de comparaison. Le gabarit reste juste
   assez large pour l'économie afin de rendre le maximum de place aux tarifs. */
.cr-idlogo { grid-area: logo; align-self: start; display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px; flex-shrink: 0; width: 152px; padding: 0 4px; }
.cr-logo { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 26px; }
.cr-logo .cr-logo-img { max-width: 100%; max-height: 26px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(14,42,61,.12)); }
/* Le logo du grossiste reste volontairement plus petit que celui de la compagnie :
   c'est la compagnie qui porte le risque, le grossiste n'est que la plateforme. */
.cr-logo .cr-mono { width: 34px; height: 24px; font-size: 11px; border-radius: 8px; }
.cr-by { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--cr-muted); font-style: italic; line-height: 1; max-width: 100%; }
.cr-by-prefix { font-size: 9.5px; opacity: .82; flex-shrink: 0; }
/* Logos OFFICIELS des grossistes : ce sont des wordmarks très allongés (jusqu'à
   6:1), donc on borne la LARGEUR et on laisse object-fit régler la hauteur. */
.cr-by-logo { height: 20px; max-width: 98px; object-fit: contain; object-position: left center; }
/* Les fichiers officiels des grossistes n'ont pas le même vide interne autour du
   tracé (marge dans le viewBox) : à hauteur de boîte égale, Assurea (texte gras,
   peu de marge) paraît plus imposant et SimulAssur (grand vide sous le mot-symbole)
   plus chétif. On corrige donc la hauteur par grossiste pour un gabarit perçu
   équivalent, sans retoucher les fichiers eux-mêmes. */
.cr-by-logo[data-slug="exade"] { height: 15px; }
.cr-by-logo[data-slug="simulassur"] { height: 28px; max-width: 108px; }
/* Bloc principal : en-tête (assureur · produit | badges), filet, chronologie, économie. */
.cr-main { grid-area: main; position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding-left: 20px; }
/* Le tireté est dessiné à la main plutôt qu'en border-left, pour pouvoir le faire
   se dissoudre vers le bas : sous le logo, la colonne de marque est vide et un
   filet plein jusqu'en bas donnerait l'impression d'une colonne inachevée. */
.cr-main::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background-image: linear-gradient(to bottom, rgba(14,42,61,.24) 0 5px, transparent 5px 11px);
  background-size: 1px 11px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 58%, transparent 100%); }
.cr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding-bottom: 7px; border-bottom: 1px solid rgba(14,42,61,.07); }
.cr-who { min-width: 0; }
.cr-assureur { font-family: var(--em-font-display,'Bricolage Grotesque',sans-serif); font-size: 16.5px; font-weight: 800; color: var(--cr-ink); letter-spacing: -.015em; line-height: 1.15; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-produit { font-size: 12.5px; font-weight: 600; color: var(--cr-ink-2); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Badges alignés à droite du nom de l'assureur : TOP, CI/CRD, Retenue et plafond
   de commission tiennent côte à côte, jamais empilés. */
.cr-badges { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; flex-shrink: 0; }
.cr-badges:empty { display: none; }
.cr-b { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 800; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 1.5px 7px; }
.cr-b-top { background: linear-gradient(135deg, var(--cr-primary), var(--cr-primary-dark)); color: #fff; }
.cr-b-type { background: rgba(255,255,255,.7); color: var(--cr-ink-2); border: 1px solid rgba(14,42,61,.14); }
.cr-b-ret { background: color-mix(in srgb, var(--cr-ok) 13%, #fff); color: var(--cr-ok); border: 1px solid color-mix(in srgb, var(--cr-ok) 32%, #fff); }
.cr-b-max { background: color-mix(in srgb, var(--cr-warn) 14%, #fff); color: color-mix(in srgb, var(--cr-warn) 75%, black); border: 1px solid color-mix(in srgb, var(--cr-warn) 36%, #fff); }
/* Colonne droite de l'en-tête : badges (TOP, CI/CRD, Retenue) au-dessus, TAEA
   juste dessous — les deux restent alignés à droite, sur la ligne du produit. */
.cr-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.cr-taea { display: inline-flex; align-items: center; gap: 3px; margin: 0; font-size: 9.5px; font-weight: 700; line-height: 1.35;
  color: var(--cr-muted); white-space: nowrap; border-radius: 999px; padding: 1.5px 8px;
  background: color-mix(in srgb, var(--cr-ink-2) 8%, #fff); }
.cr-taea b { font-size: 11px; font-weight: 800; color: var(--cr-ink); font-variant-numeric: tabular-nums; }
/* Ligne de comparaison (pied de carte, à gauche des actions) :
   garanties en TAGS colorés par famille + formalités médicales */
.cr-gar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0; }
/* Vignettes de garanties : fond lavé, filet et texte de la même teinte, coins
   légèrement arrondis (pas d'ovale). Une couleur par FAMILLE — DC+PTIA, ITT+IPT,
   IPP, MNO/dos-psy — parce que ces garanties se souscrivent groupées : deux
   vignettes de même couleur se lisent d'un coup comme un même bloc de couverture. */
.cr-tag {
  --cr-g: var(--cr-ink-2);
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 7px; padding: 4px 9px; line-height: 1.15;
  color: color-mix(in srgb, var(--cr-g) 92%, #000);
  background: color-mix(in srgb, var(--cr-g) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--cr-g) 32%, #fff);
  transition: background .18s, border-color .18s;
}
.cr-tag:hover { background: color-mix(in srgb, var(--cr-g) 15%, #fff);
  border-color: color-mix(in srgb, var(--cr-g) 34%, #fff); }
/* Contour très adouci (au lieu des 32% des autres familles) : perçu comme
   « sans contour », le badge se pose en aplat clair plutôt qu'en pastille cerclée. */
.cr-tag-neutre {
  --cr-g: var(--cr-g-neutre);
  background: color-mix(in srgb, var(--cr-g) 9%, #fff);
  border-color: color-mix(in srgb, var(--cr-g) 16%, #fff);
}
.cr-tag-neutre:hover {
  background: color-mix(in srgb, var(--cr-g) 12%, #fff);
  border-color: color-mix(in srgb, var(--cr-g) 20%, #fff);
}
.cr-tag-ipp    { --cr-g: var(--cr-g-ipp); }
.cr-tag-mno    { --cr-g: var(--cr-g-mno); }
/* Entrée en cascade : la ligne de garanties « se remplit » à l'arrivée de la carte. */
.cr-gar .cr-tag { animation: cr-tag-pop .3s var(--cr-ease) both; }
.cr-gar .cr-tag:nth-child(1) { animation-delay: .02s; }
.cr-gar .cr-tag:nth-child(2) { animation-delay: .05s; }
.cr-gar .cr-tag:nth-child(3) { animation-delay: .08s; }
.cr-gar .cr-tag:nth-child(4) { animation-delay: .11s; }
.cr-gar .cr-tag:nth-child(5) { animation-delay: .14s; }
.cr-gar .cr-tag:nth-child(6) { animation-delay: .17s; }
.cr-gar .cr-tag:nth-child(n+7) { animation-delay: .2s; }
@keyframes cr-tag-pop { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .cr-gar .cr-tag { animation: none; } }
/* Formalités médicales : même gabarit de vignette que les garanties (coins
   arrondis, pas d'ovale), fond vert lavé tirant sur le gris, texte et icône dans
   le même vert pharmacie. */
.cr-meta-ok, .cr-meta-warn { display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 11.5px; font-weight: 700; line-height: 1.2; border-radius: 7px; padding: 4px 9px; }
.cr-meta-ok i, .cr-meta-warn i { font-size: 11px; opacity: .8; }
/* Sans formalité : vert pharmacie, la même famille que le bouton « Retenir ». */
.cr-meta-ok {
  color: color-mix(in srgb, var(--cr-med) 85%, #000);
  background: color-mix(in srgb, var(--cr-med) 7%, #F9FBFA);
  border: 1px solid color-mix(in srgb, var(--cr-med) 20%, #fff); }
/* Formalité requise : teinte neutre — c'est une information, pas une alerte
   (la plupart des offres en demandent une, l'amber/rouge surchargerait la carte). */
.cr-meta-warn {
  color: color-mix(in srgb, var(--cr-ink-2) 88%, #000);
  background: color-mix(in srgb, var(--cr-ink-2) 7%, #F8FAFC);
  border: 1px solid color-mix(in srgb, var(--cr-ink-2) 22%, #fff); }
.cr-meta-zap { color: var(--cr-muted); font-size: 12px; font-weight: 700; }
/* ── Ligne chronologique du coût (zone 2/3) ──────────────────────────────────
   Séparée de l'identité par un tireté gris clair, elle raconte le prix dans le
   temps : d'abord la période où les frais de dossier sont lissés (12 ou 24 mois),
   puis le reste du prêt. Chaque segment détaille assuré par assuré, avec les
   frais en tuile distincte — ils restent un montant GLOBAL, jamais réparti. */
.cr-time { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cr-time-segs { display: grid; grid-template-columns: minmax(0,.9fr) auto minmax(0,1.35fr); align-items: stretch; gap: 9px; }
.cr-time.is-solo .cr-time-segs { grid-template-columns: minmax(0,1fr); }
.cr-time-seg { display: flex; flex-direction: column; gap: 5px; min-width: 0; border-radius: 13px; padding: 7px 9px 8px; }
.cr-time-seg-a { background: color-mix(in srgb, var(--cr-accent) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--cr-accent) 36%, #fff); }
.cr-time-seg-b { background: color-mix(in srgb, var(--cr-primary) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--cr-primary) 20%, #fff); }
.tarif-card.best .cr-time-seg-b { background: color-mix(in srgb, var(--cr-primary) 11%, #fff);
  border-color: color-mix(in srgb, var(--cr-primary) 34%, #fff); }
.tarif-card.is-retenue .cr-time-seg-b { background: color-mix(in srgb, var(--cr-ok) 8%, #fff);
  border-color: color-mix(in srgb, var(--cr-ok) 28%, #fff); }
.cr-time-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: 0; font-size: 10px; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase; color: var(--cr-muted); }
.cr-time-h-lbl { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
.cr-time-h i { font-size: 9.5px; }
.cr-time-seg-a .cr-time-h { color: color-mix(in srgb, var(--cr-accent) 46%, #6B4E12); }
.cr-time-seg-b .cr-time-h { color: var(--cr-primary-deep); }
/* Mensualité globale du segment « premiers mois », alignée sur la même ligne que
   le titre — c'est ce qui garde le bloc fin malgré l'info en plus. */
.cr-time-h-total { flex-shrink: 0; font-size: 12.5px; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: var(--cr-primary-dark); font-variant-numeric: tabular-nums; }
.cr-time-h-total small { font-size: 9px; font-weight: 700; color: var(--cr-muted); margin-left: 2px; }
.cr-time-l { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cr-time-l li { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 3px 9px; border-radius: 8px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(14,42,61,.05); }
.cr-time-l em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cr-muted); line-height: 1.1; white-space: nowrap; }
.cr-time-l b { font-size: 12.5px; font-weight: 800; color: var(--cr-ink); line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-time-l .is-fee { background: color-mix(in srgb, var(--cr-accent) 20%, #fff); border-color: color-mix(in srgb, var(--cr-accent) 40%, #fff); }
.cr-time-l .is-fee em { color: color-mix(in srgb, var(--cr-accent) 40%, #6B4E12); }
.cr-time-l .is-fee b  { color: color-mix(in srgb, var(--cr-accent) 30%, #5A4110); }
/* Tuile « Mensualité » du segment solo (pas de lissage, donc pas de header-total
   à côté) : mise en avant (teinte primaire). Quand un segment A existe, cette
   mensualité rejoint plutôt le header du segment B (cf. .cr-time-h-total) et
   cette tuile n'est pas générée. */
.cr-time-l .is-total { background: color-mix(in srgb, var(--cr-primary) 15%, #fff); border-color: color-mix(in srgb, var(--cr-primary) 36%, #fff); }
.cr-time-l .is-total em { color: var(--cr-primary-deep); }
.cr-time-l .is-total b  { color: var(--cr-primary-dark); }
.cr-time-go { display: flex; align-items: center; justify-content: center; color: rgba(14,42,61,.3); font-size: 13px; }
/* Colonne de droite : segment « mois restants » + filet + synthèse (mensualité
   en régime normal, coût 8 ans, coût total) — cf. .cr-time-summary plus bas. */
.cr-time-right { display: flex; align-items: stretch; gap: 15px; min-width: 0; }
.cr-time-right .cr-time-seg-b { flex: 1 1 auto; min-width: 0; }
.cr-time-sep { width: 1px; flex-shrink: 0; align-self: stretch; background: rgba(14,42,61,.14); }
/* Largeur FIXE (flex-shrink:0) plutôt qu'un simple min-width : la synthèse est la
   lecture la plus importante de la carte, elle ne doit jamais être la variable
   d'ajustement qui se fait comprimer par le segment de gauche. */
.cr-time-summary { flex: 0 0 128px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 2px 2px 2px 1px; }
.cr-time-summary-row { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.cr-time-summary-row em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--cr-muted); line-height: 1.1; white-space: nowrap; }
.cr-time-summary-row b { font-size: 13px; font-weight: 800; color: var(--cr-ink); line-height: 1.3; white-space: nowrap; }
/* Texte nu (pas de tag/pastille) : le vert vif suffit à faire ressortir l'économie
   sans ajouter un contour de plus dans une carte déjà chargée en badges. */
/* Économie vs banque : vignette du rail de marque (icône encadrée + libellé +
   montant), sous le logo du grossiste. Elle occupe toute la largeur du rail, ce qui
   la cale sur le logo au-dessus et referme la colonne. */
.cr-eco { display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 14px;
  padding: 5px 8px 5px 4px; border-radius: 10px;
  background: color-mix(in srgb, var(--cr-eco) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--cr-eco) 26%, #fff); }
.cr-eco-ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 6px; flex-shrink: 0; font-size: 9px;
  background: color-mix(in srgb, var(--cr-eco) 17%, #fff); color: color-mix(in srgb, var(--cr-eco) 74%, #000); }
.cr-eco-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.12; min-width: 0; }
.cr-eco-txt em { font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: 0;
  text-transform: uppercase; color: var(--cr-muted); line-height: 1.2; white-space: nowrap; }
.cr-eco-txt b { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--cr-eco) 72%, #000); }
.cr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 8px 18px 10px 18px; border-top: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 1px 0 rgba(14,42,61,.04); }
.cr-foot-info { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.cr-foot-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
/* Garanties, formalité santé et bouton Détails tiennent sur UNE ligne, séparés
   par un filet élégant plutôt que d'être empilés sur deux rangées. */
.cr-foot-sep { width: 1px; height: 16px; flex-shrink: 0; background: rgba(14,42,61,.14); }
.cr-foot-actions { display: flex; align-items: center; gap: 15px; margin-left: auto; flex-shrink: 0; }
.cr-foot-icons { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cr-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 8px 15px; border: none; cursor: pointer; min-width: 128px;
  background: linear-gradient(180deg, var(--cr-primary), var(--cr-primary-dark)); color: #fff;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cr-primary) 55%, transparent); transition: transform .16s var(--cr-ease), box-shadow .16s; }
.cr-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--cr-primary) 65%, transparent); }
.cr-cta:focus-visible, .cr-icbtn:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; }
.cr-icbtn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(14,42,61,.06); color: var(--cr-ink-2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; transition: all .16s; }
.cr-icbtn:hover { color: var(--cr-primary-deep); background: rgba(255,255,255,.85); }
/* « Retenir » réduit à son icône : le signet suffit, et l'état retenu se lit au vert. */
.cr-keep:hover { color: var(--cr-ok); background: color-mix(in srgb, var(--cr-ok) 7%, #fff); }
.cr-keep.is-on { color: var(--cr-ok); background: color-mix(in srgb, var(--cr-ok) 11%, #fff);
  border-color: color-mix(in srgb, var(--cr-ok) 42%, #fff); }
/* « Analyser avec Lia » : sa photo, cerclée d'un anneau dégradé qui brille (rotation douce) */
.cr-icbtn-lia { position: relative; width: 36px; height: 36px; border-radius: 50%; border: none; padding: 0;
  background: transparent; cursor: pointer; flex-shrink: 0; transition: transform .16s var(--cr-ease); }
.cr-icbtn-lia::before { content: ""; position: absolute; inset: -2.5px; border-radius: 50%;
  background: conic-gradient(var(--cr-primary), var(--cr-accent), #fff, var(--cr-primary-dark), var(--cr-primary));
  animation: cr-lia-shine 2.8s linear infinite; }
.cr-icbtn-lia:hover { transform: scale(1.08); }
.cr-lia-mini { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: inset 0 0 0 2px #fff; border: 2px solid #fff; box-sizing: border-box; }
@keyframes cr-lia-shine { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cr-icbtn-lia::before { animation: none; } }
/* Sélection : compat .tc-select conservée (révélée au survol), recadrée */
#phaseResults .tc-select { align-self: flex-start; margin-top: 4px; }
#phaseResults .pdf-cb { width: 19px; height: 19px; accent-color: var(--cr-primary-dark); cursor: pointer; }
/* Accordéon incompatibles */
.cr-incompat > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; color: color-mix(in srgb, var(--cr-warn) 75%, black);
  background: color-mix(in srgb, var(--cr-warn) 12%, #fff); border: 1px solid color-mix(in srgb, var(--cr-warn) 32%, #fff);
  border-radius: 999px; padding: 7px 15px; user-select: none; }
.cr-incompat > summary::-webkit-details-marker { display: none; }
.cr-incompat[open] > summary .tc-chev { transform: rotate(180deg); }
.cr-incompat .cr-dim { opacity: .72; }
.cr-list { display: flex; flex-direction: column; gap: 12px; }
/* Pile mobile */
@media (max-width: 1023px) {
  /* Le rail d'identité passe au-dessus ; le tireté devient un filet horizontal. */
  .cr-in { grid-template-columns: auto minmax(0,1fr); grid-template-areas: "chk logo" "main main";
           row-gap: 12px; column-gap: 12px; padding: 14px; }
  .cr-idlogo { align-self: start; align-items: flex-start; padding: 0; }
  .cr-main { padding-left: 0; padding-top: 13px; border-top: 1px dashed rgba(14,42,61,.17); }
  .cr-main::before { display: none; }
  .cr-head { flex-wrap: wrap; gap: 8px; }
  .cr-time-segs { grid-template-columns: minmax(0,1fr); }
  .cr-time-go { transform: rotate(90deg); }
  /* La synthèse passe sous le segment « mois restants », filet horizontal. */
  .cr-time-right { flex-direction: column; gap: 10px; }
  .cr-time-sep { width: auto; height: 1px;
    background: linear-gradient(to right, transparent, rgba(14,42,61,.14) 12%, rgba(14,42,61,.14) 88%, transparent); }
  .cr-time-summary { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; gap: 12px; min-width: 0; }
  .cr-foot { padding: 10px 14px 13px; }
  .cr-foot-info { flex-basis: 100%; }
  .cr-foot-actions { width: 100%; margin-left: 0; flex-wrap: wrap; row-gap: 8px; }
  .cr-foot-actions .cr-foot-sep { display: none; }
  .cr-foot-actions .cr-cta { flex: 1; justify-content: center; min-height: 44px; }
  .cr-foot-icons { flex-basis: 100%; justify-content: flex-end; }
  .cr-icbtn { min-width: 44px; min-height: 44px; }
  .cr-assureur { font-size: 16.5px; }
  .cr-badges { flex-wrap: wrap; }
}

/* ── 9. Bandeau dossier ── */
.cr-dossier { border-radius: var(--cr-r); padding: 11px 15px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.cr-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cr-primary), var(--cr-primary-dark)); color: #fff;
  font-family: var(--em-font-display,sans-serif); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cr-primary) 50%, transparent); }
.cr-dossier-who { min-width: 0; flex: 0 1 auto; }
.cr-dossier-nom { font-family: var(--em-font-display,sans-serif); font-size: 15px; font-weight: 800; color: var(--cr-ink); line-height: 1.2; margin: 0; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cr-dossier-ref { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--cr-primary-deep);
  background: color-mix(in srgb, var(--cr-primary) 10%, #fff); border: 1px solid color-mix(in srgb, var(--cr-primary) 30%, #fff);
  border-radius: 999px; padding: 2px 9px; cursor: pointer; }
/* Résumé structuré : icône + valeur par info, séparées par des points médians */
.cr-dossier-resume { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 0; margin: 2px 0 0;
  font-size: 12.5px; color: var(--cr-ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-ri { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cr-ri i { color: var(--cr-primary-deep); font-size: 11px; width: 14px; text-align: center; }
.cr-ri + .cr-ri::before { content: "·"; color: rgba(14,42,61,.28); margin: 0 9px; font-weight: 600; }
.cr-ri b { font-weight: 800; color: var(--cr-ink); }
.cr-ri-bank { height: 17px; max-width: 84px; object-fit: contain; }
.cr-ri-more { width: 26px; height: 26px; margin-left: 10px; border-radius: 8px; flex-shrink: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
  color: var(--cr-ink-2); background: rgba(14,42,61,.06); border: none; transition: all .16s var(--cr-ease); }
.cr-ri-more:hover { background: color-mix(in srgb, var(--cr-primary) 14%, #fff); color: var(--cr-primary-deep); }
.cr-ri-more:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; }
.cr-ri-more i { transition: transform .25s var(--cr-ease); }
.cr-ri-more[aria-expanded="true"] i { transform: rotate(180deg); }
.cr-sp { flex: 1; }
.cr-der.is-todo { background: color-mix(in srgb, var(--cr-warn) 15%, #fff); border-color: color-mix(in srgb, var(--cr-warn) 40%, #fff); color: color-mix(in srgb, var(--cr-warn) 75%, black); animation: cr-pulse 2.4s ease-in-out infinite; }
.cr-der.is-done { background: color-mix(in srgb, var(--cr-ok) 11%, #fff); border-color: color-mix(in srgb, var(--cr-ok) 32%, #fff); color: var(--cr-ok); }
@keyframes cr-pulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 0 color-mix(in srgb, var(--cr-warn) 35%, transparent); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 6px transparent; } }
@media (prefers-reduced-motion: reduce) { .cr-der.is-todo { animation: none; } }
.cr-recap-panel { border-radius: var(--cr-r-lg); padding: 16px 18px; }
.cr-recap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 22px; }
/* Restyle des lignes générées par buildRecap() (classes conservées) */
.cr-recap-grid .recap-row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; border-bottom: 1px solid rgba(14,42,61,.06); }
.cr-recap-grid .recap-icon { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--cr-primary) 9%, #fff); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cr-recap-grid .recap-icon i { color: var(--cr-primary-deep) !important; font-size: 11px !important; }
.cr-recap-grid .recap-label { font-size: 11px; color: var(--cr-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.cr-recap-grid .recap-val { font-size: 13px; color: var(--cr-ink); font-weight: 700; }
/* Mini-fenêtre flottante (DER) : par-dessus la page, ne pousse aucun contenu */
.cr-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cr-modal.hidden { display: none; }
.cr-modal-veil { position: absolute; inset: 0; background: rgba(14,42,61,.28);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cr-veil-in .18s ease both; }
@keyframes cr-veil-in { from { opacity: 0; } }
.cr-modal-box { position: relative; width: min(430px, 100%); border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid rgba(14,42,61,.10); box-shadow: 0 32px 80px -24px rgba(14,42,61,.5), 0 6px 16px rgba(14,42,61,.1);
  animation: cr-modal-in .22s var(--cr-ease) both; }
@keyframes cr-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.cr-modal-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cr-primary) 55%, #fff), var(--cr-primary), var(--cr-primary-dark)); }
/* Modale « large » (courbe de coût) : verre FLOTTANT (spec §7.1, niveau max) — même
   recette que le drawer Lia (.res-chat), assez opaque (85%) pour rester lisible
   par-dessus un graphique dense. */
.cr-modal-box.cr-modal-lg { width: min(680px, 100%);
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 34px 80px -22px rgba(14,42,61,.5), 0 8px 22px rgba(14,42,61,.12); }
@supports not (backdrop-filter: blur(1px)) { .cr-modal-box.cr-modal-lg { background: rgba(255,255,255,.98); } }
.cr-modal-head { display: flex; align-items: flex-start; gap: 11px; padding: 16px 16px 12px; border-bottom: 1px solid rgba(14,42,61,.07); }
.cr-modal-ico { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--cr-primary) 10%, #fff); color: var(--cr-primary-deep); font-size: 14px; }
.cr-modal-ttl { flex: 1; min-width: 0; }
.cr-modal-t { margin: 0; font-family: var(--em-font-display,sans-serif); font-size: 14.5px; font-weight: 800; color: var(--cr-ink); }
#crCourbePop .cr-modal-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-modal-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted); margin-left: 4px; }
.cr-modal-s { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--cr-muted); }
.cr-modal-x { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; border: none; cursor: pointer;
  background: rgba(14,42,61,.05); color: var(--cr-ink-2); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.cr-modal-x:hover { background: rgba(14,42,61,.1); color: var(--cr-ink); }
.cr-modal-body { padding: 14px 16px 16px; }
.cr-fld-lbl { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted); margin-bottom: 6px; }
.cr-pop-err { font-size: 12.5px; font-weight: 700; color: var(--cr-danger); margin: 8px 0 0; }
.cr-der-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-input { flex: 1 1 200px; padding: 9px 12px; background: #fff; border: 1.5px solid rgba(14,42,61,.14); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--cr-ink); outline: none; }
.cr-input:focus { border-color: var(--cr-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .cr-modal-veil, .cr-modal-box { animation: none; } }
@media (max-width: 1023px) { .cr-chip-lbl-txt { display: none; } .cr-chip { min-height: 40px; } }

/* ── 10c. Courbe de coût (modale) ── */
/* Identité assureur dans l'en-tête : même bloc que la carte (.cr-idlogo), recadré
   plus compact pour l'en-tête de modale. */
.cr-courbe-idlogo { width: 68px; min-width: 0; }
.cr-courbe-idlogo .cr-logo { width: 68px; height: 32px; }
.cr-courbe-idlogo .cr-logo-img { max-height: 32px; }
.cr-courbe-idlogo .cr-mono { width: 40px; height: 32px; font-size: 13px; }
#crCourbeSub .cr-by { margin-left: 2px; }
#crCourbeSub .cr-by-logo { height: 15px; max-width: 74px; }
#crCourbeSub .cr-by-logo[data-slug="exade"] { height: 11px; }
#crCourbeSub .cr-by-logo[data-slug="simulassur"] { height: 21px; max-width: 82px; }

.cr-courbe-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 12px; }
.cr-courbe-leg-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cr-ink-2); }
.cr-courbe-leg-dot { width: 14px; height: 4px; border-radius: 2px; flex-shrink: 0; }
.cr-courbe-leg-dash { background: repeating-linear-gradient(90deg, #0B1120 0 6px, transparent 6px 10px); }
/* Panneau « verre contenu » imbriqué dans le verre flottant de la modale : garde
   la grille/les axes lisibles quel que soit ce qui transparaît en arrière-plan. */
.cr-courbe-canvas-wrap { position: relative; height: 260px; padding: 10px 8px 2px; border-radius: 14px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.cr-courbe-eco { margin-top: 12px; padding: 10px 12px; border-radius: 12px; display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; font-weight: 700; line-height: 1.4;
  background: color-mix(in srgb, var(--cr-ok) 10%, #fff); border: 1px solid color-mix(in srgb, var(--cr-ok) 28%, #fff);
  color: color-mix(in srgb, var(--cr-ok) 60%, black); }
.cr-courbe-eco.cr-courbe-eco-warn { background: color-mix(in srgb, var(--cr-muted) 10%, #fff);
  border-color: color-mix(in srgb, var(--cr-muted) 28%, #fff); color: var(--cr-ink-2); }
.cr-courbe-eco i { margin-top: 1px; flex-shrink: 0; }
.cr-courbe-note { margin: 10px 0 0; font-size: 11px; font-weight: 500; color: var(--cr-muted); line-height: 1.4; }
@media (max-width: 640px) { .cr-courbe-canvas-wrap { height: 220px; } }

/* ── 10. Barre d'outils sticky ── */
.cr-toolbar { position: sticky; top: 10px; z-index: 40; border-radius: var(--cr-r); padding: 10px 14px; margin-bottom: 28px; }
.cr-toolbar::after { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cr-primary) 55%, transparent), color-mix(in srgb, var(--cr-accent) 50%, transparent), transparent); }
.cr-tb-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cr-tb-gap { flex: 1 1 0; min-width: 0; }
.cr-seg { display: flex; background: rgba(14,42,61,.06); border-radius: 999px; padding: 3px; box-shadow: inset 0 1px 2px rgba(14,42,61,.08); flex-shrink: 0; }
.cr-seg .filter-type-btn { font-size: 12px; font-weight: 800; padding: 7px 15px; border-radius: 999px; border: none; background: transparent; color: var(--cr-ink-2); cursor: pointer; transition: all .16s; }
.cr-seg .filter-type-btn.active { background: #fff; color: var(--cr-primary-deep); box-shadow: 0 2px 6px rgba(14,42,61,.12); }
.cr-count { font-size: 12px; font-weight: 800; color: var(--cr-primary-deep); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Bouton icône neutre (Relancer, Modifier, Réinitialiser) */
.cr-iconbtn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
  color: var(--cr-ink-2); background: rgba(255,255,255,.7); border: 1px solid rgba(14,42,61,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: all .16s var(--cr-ease); }
.cr-iconbtn:hover { color: var(--cr-primary-deep); border-color: color-mix(in srgb, var(--cr-primary) 40%, #fff);
  background: #fff; transform: translateY(-1px); }
.cr-iconbtn:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; }
/* Calé à l'extrême droite de .cr-tb-row indépendamment de .cr-tb-gap (utile si la ligne wrap). */
.cr-tb-reset { margin-left: auto; }

/* ── 10b. Dropdowns maison (compagnies · grossistes · tri · commission) ── */
.cr-dd { position: relative; flex-shrink: 0; }
.cr-dd-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(14,42,61,.10); background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: all .16s var(--cr-ease); max-width: 260px; }
.cr-dd-btn:hover { background: #fff; border-color: rgba(14,42,61,.18); }
.cr-dd-btn:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; }
.cr-dd.is-open .cr-dd-btn { background: #fff; border-color: color-mix(in srgb, var(--cr-primary) 45%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 12%, transparent); }
.cr-dd.is-active .cr-dd-btn { border-color: color-mix(in srgb, var(--cr-primary) 40%, #fff);
  background: color-mix(in srgb, var(--cr-primary) 7%, #fff); }
.cr-dd-ico { font-size: 13px; color: var(--cr-muted); flex-shrink: 0; }
.cr-dd.is-active .cr-dd-ico { color: var(--cr-primary-deep); }
.cr-dd-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.cr-dd-txt em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--cr-muted); }
.cr-dd-txt b { font-size: 12.5px; font-weight: 800; color: var(--cr-ink); max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-dd-chev { font-size: 9px; color: var(--cr-muted); flex-shrink: 0; transition: transform .2s var(--cr-ease); }
.cr-dd.is-open .cr-dd-chev { transform: rotate(180deg); }
/* Face du bouton : logos empilés légèrement */
.cr-dd-face { display: inline-flex; align-items: center; flex-shrink: 0; }
.cr-dd-face-logo { height: 17px; max-width: 44px; object-fit: contain; }
.cr-dd-face .cr-dd-face-logo + .cr-dd-face-logo { margin-left: -5px; }
.cr-dd-face .cr-mono { width: 20px; height: 20px; font-size: 8px; border-radius: 6px; }
.cr-dd-face .cr-mono + .cr-mono { margin-left: -5px; }

/* Panneau : OPAQUE (jamais de texte sur du contenu qui transparaît) */
.cr-dd-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: 300px; max-height: 60vh; overflow-y: auto;
  border-radius: 16px; padding: 7px; background: #fff; border: 1px solid rgba(14,42,61,.10);
  box-shadow: 0 24px 60px -20px rgba(14,42,61,.35), 0 4px 12px rgba(14,42,61,.08);
  animation: cr-dd-in .16s var(--cr-ease) both; }
.cr-dd-pop-sm { width: 250px; }
.cr-dd-pop[hidden] { display: none; }
@keyframes cr-dd-in { from { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .cr-dd-pop { animation: none; } }
.cr-dd-list { display: flex; flex-direction: column; }
.cr-dd-sep { height: 1px; background: rgba(14,42,61,.08); margin: 5px 3px; }
.cr-dd-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 10px;
  border: none; background: transparent; cursor: pointer; text-align: left; transition: background .13s; }
.cr-dd-opt:hover { background: rgba(14,42,61,.05); }
.cr-dd-opt.is-on { background: color-mix(in srgb, var(--cr-primary) 8%, #fff); }
.cr-dd-box { width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px; border: 1.5px solid rgba(14,42,61,.22);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; transition: all .13s; }
.cr-dd-box i { opacity: 0; transform: scale(.6); transition: all .13s; }
.cr-dd-opt.is-on .cr-dd-box { background: var(--cr-primary-dark); border-color: var(--cr-primary-dark); }
.cr-dd-opt.is-on .cr-dd-box i { opacity: 1; transform: none; }
.cr-dd-logo { height: 20px; max-width: 78px; object-fit: contain; object-position: left center; flex-shrink: 0; }
.cr-dd-logo[data-slug="simulassur"] { height: 28px; max-width: 86px; }
/* Grossistes : les logos officiels sont des logotypes (le nom y est déjà écrit).
   Le libellé texte reste — il porte le nom complet et sert de repli si l'image
   ne charge pas — mais il passe au second plan pour laisser la marque devant. */
#filterGrossisteBtns .cr-dd-nm { font-weight: 700; font-size: 12px; color: var(--cr-muted); }
#filterGrossisteBtns .cr-dd-all .cr-dd-nm { font-weight: 800; font-size: 12.5px; color: var(--cr-ink); }
.cr-dd-opt .cr-mono { width: 24px; height: 18px; font-size: 8.5px; border-radius: 5px; flex-shrink: 0; }
.cr-dd-nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--cr-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-dd-opt.is-on .cr-dd-nm { color: var(--cr-primary-deep); }
.cr-dd-n { font-size: 11px; font-weight: 800; color: var(--cr-muted); background: rgba(14,42,61,.07);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cr-dd-all .cr-dd-nm { font-weight: 800; }
/* Options simples (tri) : icône + libellé + coche */
.cr-dd-opt > .fa-solid:first-child { width: 16px; text-align: center; color: var(--cr-muted); font-size: 12px; flex-shrink: 0; }
.cr-dd-opt.is-on > .fa-solid:first-child { color: var(--cr-primary-deep); }
.cr-dd-opt > span:not([class]) { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--cr-ink); }
.cr-dd-tick { opacity: 0; color: var(--cr-primary-dark); font-size: 11px; }
.cr-dd-opt.is-on .cr-dd-tick { opacity: 1; }
.cr-dd-head { padding: 10px 11px 9px; border-bottom: 1px solid rgba(14,42,61,.08); margin-bottom: 6px; }
.cr-dd-head-t { margin: 0; font-family: var(--em-font-display,sans-serif); font-size: 14px; font-weight: 800; color: var(--cr-ink); }
.cr-dd-head-s { margin: 2px 0 0; font-size: 11.5px; font-weight: 600; color: var(--cr-muted); line-height: 1.4; }
.cr-dd-foot { display: flex; align-items: center; gap: 10px; padding: 10px 11px 4px; margin-top: 6px; border-top: 1px solid rgba(14,42,61,.08); }
.cr-sw-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cr-sw-txt b { font-size: 12px; font-weight: 800; color: var(--cr-ink); }
.cr-sw-txt em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--cr-muted); }

/* Budget max */
.cr-budget { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; flex-shrink: 0;
  border-radius: 12px; border: 1px solid rgba(14,42,61,.10); background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9); cursor: text; transition: all .16s var(--cr-ease); }
.cr-budget:hover { background: #fff; }
.cr-budget:focus-within { background: #fff; border-color: color-mix(in srgb, var(--cr-primary) 45%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 12%, transparent); }
.cr-budget > i { font-size: 13px; color: var(--cr-muted); }
.cr-budget-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.cr-budget-txt em { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--cr-muted); }
.cr-budget-in { display: inline-flex; align-items: baseline; gap: 2px; }
.cr-budget-in input { width: 46px; border: none; background: transparent; outline: none; padding: 0;
  font-size: 12.5px; font-weight: 800; color: var(--cr-ink); font-variant-numeric: tabular-nums; }
.cr-budget-in input::-webkit-outer-spin-button, .cr-budget-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-budget-in input[type=number] { -moz-appearance: textfield; }
.cr-budget-in b { font-size: 11px; font-weight: 700; color: var(--cr-muted); }

/* ── 11. Commission ── */
.cr-com .cr-dd-pop { width: 340px; left: auto; right: 0; padding: 0 7px 7px; }
.cr-com-body { display: flex; flex-direction: column; gap: 11px; padding: 2px 4px 0; }
.cr-com-sec { display: flex; flex-direction: column; gap: 7px; }
.cr-com-grp { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 11px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cr-ink-2); }
.cr-com-grp em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--cr-muted); font-size: 11px; }
.cr-com-grp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cr-primary); flex-shrink: 0; }
.cr-com-grp-dot.is-alt { background: var(--cr-accent); }
.cr-com-codes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.cr-com-codes .com-btn { font-size: 12px; font-weight: 800; border: 1px solid rgba(14,42,61,.12); border-radius: 9px;
  padding: 8px 0; color: var(--cr-ink-2); cursor: pointer; background: #fff; font-variant-numeric: tabular-nums; transition: all .14s; }
.cr-com-codes .com-btn:hover { border-color: color-mix(in srgb, var(--cr-primary) 45%, #fff); color: var(--cr-primary-deep); }
.cr-com-codes .com-btn.active { border-color: var(--cr-primary-dark); background: color-mix(in srgb, var(--cr-primary) 12%, #fff);
  color: var(--cr-primary-deep); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cr-primary) 16%, transparent); }
.cr-com-apply { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 11px 4px 0;
  padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--cr-warn) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--cr-warn) 30%, #fff); }
.cr-btn-block { width: 100%; justify-content: center; }
.cr-com-note { font-size: 11px; color: var(--cr-muted); font-weight: 600; text-align: center; }
.cr-com .cr-dd-foot { margin: 8px 4px 0; }
.cr-sw { width: 36px; height: 21px; border-radius: 999px; background: rgba(14,42,61,.18); border: none; position: relative; flex-shrink: 0; cursor: pointer; transition: background .2s; }
.cr-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--cr-ease); }
.cr-sw[aria-checked="true"] { background: var(--cr-primary); }
.cr-sw[aria-checked="true"]::after { transform: translateX(15px); }
.cr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cr-warn); flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-warn) 25%, transparent); }
/* Mode présentation : toute mention de commission disparaît */
#phaseResults.cr-hide-com .cr-com-body,
#phaseResults.cr-hide-com .cr-com-apply { display: none; }
#phaseResults.cr-hide-com .cr-dd-opt-com { display: none; }
/* Le déclencheur n'a plus rien à faire sélectionner (code masqué) : il redevient
   une simple icône carrée, au même gabarit que le bouton réinitialiser — plus
   aucune trace du mot « commission » à l'écran. Cliquer l'ouvre toujours, pour
   retrouver le switch et repasser en mode « voir ». */
#phaseResults.cr-hide-com #crComBtn { width: 36px; height: 36px; padding: 0; gap: 0; justify-content: center; }
#phaseResults.cr-hide-com #crComBtn .cr-dd-txt,
#phaseResults.cr-hide-com #crComBtn .cr-dd-chev { display: none; }
/* Corps et bouton « Retarifer » masqués : un seul filet doit séparer le texte
   d'intro du switch, pas deux collés l'un à l'autre. */
#phaseResults.cr-hide-com .cr-com .cr-dd-head { border-bottom: none; margin-bottom: 0; }

/* ── 12. Lia ──
   La bulle de Lia = sa photo (lia-avatar.png), cerclée d'un anneau dégradé marque. */
.cr-lia-face { border-radius: 50%; object-fit: cover; flex-shrink: 0;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--cr-primary) 55%, #fff), 0 6px 16px -4px color-mix(in srgb, var(--cr-primary) 45%, transparent); }
.cr-lia-face-head { width: 34px; height: 34px; }
.cr-lia-face-fab { width: 100%; height: 100%; }
#chatFab { position: fixed; right: 18px; bottom: 22px; z-index: 61; width: 56px; height: 56px;
  padding: 0; border: none; border-radius: 50%; cursor: pointer; background: transparent;
  transition: transform .18s var(--cr-ease); }
#chatFab:hover { transform: scale(1.07); }
#chatFab:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 3px; border-radius: 50%; }
body.cr-bulk-open #chatFab { bottom: 92px; }
@media (prefers-reduced-motion: reduce) { #chatFab { transition: none; } }
.res-chat { position: fixed; z-index: 70; }
.res-chat > .card-section { height: 100%; border-radius: var(--cr-r-lg); overflow: hidden;
  background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 70px -22px rgba(14,42,61,.5); }
@supports not (backdrop-filter: blur(1px)) { .res-chat > .card-section { background: rgba(255,255,255,.98); } }
@media (min-width: 1024px) {
  .res-chat { top: 14px; right: 14px; bottom: 14px; width: 400px; transform: translateX(112%); transition: transform .3s var(--cr-ease); }
  .res-chat.is-open { transform: none; }
}
@media (max-width: 1023px) {
  .res-chat { left: 0; right: 0; bottom: 0; transform: translateY(100%); transition: transform .28s var(--cr-ease); padding: 0 8px 8px; }
  .res-chat.is-open { transform: none; }
  .res-chat > .card-section { height: min(72vh, 560px); border-radius: var(--cr-r-lg) var(--cr-r-lg) 0 0; }
}
img.bot-av { width: 1.9rem; height: 1.9rem; }
/* Suggestions : discrètes, en retour à la ligne — jamais de scroll horizontal */
.cr-sugg-row { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0; }
.cr-sugg-chip { font-size: 11.5px; font-weight: 600; color: var(--cr-muted); cursor: pointer; text-align: left;
  background: transparent; border: 1px solid rgba(14,42,61,.13); border-radius: 999px; padding: 4px 11px; line-height: 1.35; transition: all .15s; }
.cr-sugg-chip:hover { color: var(--cr-primary-deep); border-color: color-mix(in srgb, var(--cr-primary) 40%, #fff); background: color-mix(in srgb, var(--cr-primary) 6%, #fff); }
@media (prefers-reduced-motion: reduce) { .res-chat { transition: none; } }

/* ── 13. Écran de tarification : bandeau de progression, discret et sans carte ── */
.cr-load { padding: 0 2px; margin: 22px 0 16px; }
.cr-load-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.cr-load-spin { width: 11px; height: 11px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--cr-primary) 16%, #fff);
  border-top-color: color-mix(in srgb, var(--cr-primary-dark) 70%, var(--cr-muted)); animation: cr-spin .9s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-load-s { flex: 1; min-width: 0; margin: 0; font-size: 12px; font-weight: 600; color: var(--cr-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-load-pct { font-style: normal; flex-shrink: 0; font-size: 11px; font-weight: 700;
  color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.cr-load-bar { height: 3px; border-radius: 999px; background: rgba(14,42,61,.06); overflow: hidden; }
.cr-load-fill { height: 100%; border-radius: 999px; transition: width .7s var(--cr-ease);
  background: linear-gradient(90deg, var(--cr-primary), var(--cr-primary-dark)); }
@media (prefers-reduced-motion: reduce) { .cr-load-spin { animation: none; } }

/* ── 14. Bulkbar (sélection multi-offres) ── */
.cr-bulkbar { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 140%); z-index: 50;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  width: min(880px, calc(100vw - 24px)); border-radius: 18px; padding: 12px 18px;
  background: color-mix(in srgb, var(--cr-ink) 86%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 50px -16px rgba(14,42,61,.6);
  color: #fff; font-size: 13.5px; transition: transform .3s var(--cr-ease); }
.cr-bulkbar.is-open { transform: translate(-50%, 0); }
@supports not (backdrop-filter: blur(1px)) { .cr-bulkbar { background: var(--cr-ink); } }
.cr-bulk-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .15s; }
.cr-bulk-btn:hover { background: rgba(255,255,255,.2); }
@media (prefers-reduced-motion: reduce) { .cr-bulkbar { transition: none; } }

/* ── 15. Onglets emprunteurs ── */
#borrowerTabsContainer { border: none; }
.cr-tab { font-size: 13px; font-weight: 800; color: var(--cr-muted); background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 6px 2px 8px; cursor: pointer; transition: color .15s, border-color .15s; }
.cr-tab.is-on { color: var(--cr-primary-deep); border-bottom-color: var(--cr-primary); }

/* ── 16. Bannière « Simulation chargée en lecture » ── */
.cr-restore { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 11px 15px;
  border-radius: var(--cr-r); background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 8px 22px -12px rgba(14,42,61,.2); }
.cr-restore-ico { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--em-info, #3B82F6) 13%, #fff); color: color-mix(in srgb, var(--em-info, #3B82F6) 70%, black); font-size: 13px; }
.cr-restore-txt { flex: 1; min-width: 0; }
.cr-restore-t { margin: 0; font-size: 13px; font-weight: 800; color: var(--cr-ink); font-family: var(--em-font-display,sans-serif); }
.cr-restore-s { margin: 0; font-size: 12px; font-weight: 600; color: var(--cr-muted); font-variant-numeric: tabular-nums; }
@supports not (backdrop-filter: blur(1px)) { .cr-restore { background: rgba(255,255,255,.95); } }

/* ── 17. Blindage de cascade ──
   Le CDN Tailwind injecte .hidden{display:none} de façon asynchrone : tout
   composant .cr-* qui pose lui-même un display doit lui céder la priorité
   (sélecteur composé = spécificité supérieure, pas de !important). */
.cr-com-apply.hidden,
.cr-dd.hidden,
.cr-modal.hidden,
.cr-toolbar.hidden,
.cr-load.hidden,
.cr-restore.hidden,
.cr-courbe-eco.hidden { display: none; }

/* ── 17b. Panneau de filtres mobile : neutre en desktop ──
   Un SEUL markup pour les deux tailles d'écran. En desktop, .cr-tb-filters est
   en display:contents : ses enfants restent des enfants directs de .cr-tb-row,
   donc la ligne d'outils est rigoureusement celle d'avant. Sous 767px (§18) il
   redevient une vraie boîte et se transforme en panneau déroulant. */
.cr-tb-filters { display: contents; }
.cr-tb-more, .cr-sheet-head, .cr-sheet-foot, .cr-more { display: none; }
/* Blindage de cascade (cf. §17) : .hidden de Tailwind doit l'emporter. */
.cr-tb-more-n.hidden, .cr-tb-filters.hidden { display: none; }

/* =============================================================================
   18. MOBILE (≤ 767px) — « cockpit compact »
   -----------------------------------------------------------------------------
   Le desktop n'est PAS touché : tout ce qui suit vit dans la media query, et les
   seuls ajouts de markup (.cr-tb-filters, .cr-tb-more, .cr-sheet-*) sont neutres
   au-dessus de 767px (display:contents / display:none).

   Principe : rien n'est retiré, tout est re-densifié. Le mobile n'a pas de
   largeur à dépenser, donc chaque bloc qui, en desktop, gagnait de la place
   horizontalement (rail d'identité, colonne de synthèse) est ici replié en
   LIGNES à deux ancres : libellé à gauche, valeur à droite, toujours au même x.
   C'est cet alignement qui rend la pile d'offres scannable au pouce.
============================================================================= */
@media (max-width: 767px) {

  /* ── 18.0 Rythme de la colonne ─────────────────────────────────────────── */
  #phaseResults .cr-col { gap: 9px; }
  .cr-list { gap: 9px; }
  /* Une liste de tuiles vide (segment « mois restants » mono-assuré) ne doit pas
     consommer le gap de son conteneur. */
  .cr-time-l:empty { display: none; }

  /* ── 18.1 Bandeau dossier : une ligne d'identité + une rangée d'actions ──
     Le résumé du prêt (montant · durée · taux · banque · frais) répétait mot pour
     mot ce que déplie déjà le chevron : deux lignes de doublon en haut de chaque
     écran. Il disparaît donc au profit du seul chevron, replacé juste à droite du
     numéro de dossier. Rien n'est perdu — le panneau récapitulatif en dit même
     plus (projet, situation, franchise ITT, quotités).
     .cr-dossier-who et .cr-dossier-resume passent en display:contents pour que le
     nom et le chevron deviennent des enfants directs de la ligne flex. */
  .cr-dossier { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 8px; padding: 9px 11px; }
  .cr-dossier-who, .cr-dossier-resume { display: contents; }
  .cr-avatar { width: 31px; height: 31px; font-size: 12px; }
  /* flex-basis:0 (au lieu de auto) : le nom ne compte pour rien dans le calcul
     de repli de ligne, ce qui laisse toujours de la place au chevron sur la
     même rangée — le nom se contente de l'espace restant et tronque en ellipse. */
  .cr-dossier-nom { flex: 1 1 0; min-width: 0; font-size: 13.5px; gap: 6px; flex-wrap: nowrap; }
  #crClientNomTxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cr-dossier-ref { flex-shrink: 0; font-size: 10px; padding: 1.5px 7px; gap: 4px; }
  .cr-dossier .cr-ri { display: none; }
  /* Seul chemin vers le détail du prêt depuis que le résumé est replié : le
     chevron gagne en surface de touche et en présence (teinte de marque). */
  .cr-ri-more {
    width: 28px; height: 28px; margin-left: 0; font-size: 10px; flex-shrink: 0; border-radius: 9px;
    color: var(--cr-primary-deep);
    background: color-mix(in srgb, var(--cr-primary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--cr-primary) 26%, #fff);
  }
  .cr-dossier .cr-iconbtn { width: 31px; height: 31px; border-radius: 10px; font-size: 12px; }
  /* .cr-sp force le retour à la ligne : les actions occupent la rangée du bas. */
  .cr-sp { flex: 0 0 100%; height: 0; margin: 0; }
  /* Le DER est une action à faire : il prend la largeur, jamais tronqué. */
  #derBanner { flex: 1 1 auto; min-width: 0; }
  #derBanner .cr-chip { width: 100%; justify-content: center; min-height: 36px; font-size: 12px; }
  /* Sans DER à envoyer, les deux boutons se calent à droite de leur rangée. */
  #derBanner.hidden + .cr-iconbtn { margin-left: auto; }

  /* Mode client (jamais de DER à afficher) : retarifer + modifier reviennent sur
     la ligne du nom, à droite du chevron, au lieu de descendre sur une rangée à
     eux seuls — un écran déjà serré gagne une ligne pleine de hauteur. Le chevron
     reste collé à ces deux boutons (pas à un nom court) : c'est l'espaceur qui se
     réordonne juste après le nom, via `order`, pour se placer avant le groupe
     chevron + actions plutôt qu'entre le chevron et les actions — mais il
     n'absorbe plus l'espace disponible (flex-grow:0) : c'est le nom qui le
     prend, pour s'écrire aussi long que possible avant de tronquer/défiler.
     Sans cet espaceur qui grandissait autant que le nom, la moitié de la place
     libre restait vide entre un nom court et le groupe chevron/actions. */
  .emc-page .cr-sp { order: 1; flex: 0 0 auto; width: 0; height: auto; margin: 0; }
  .emc-page .cr-ri-more { order: 2; }
  .emc-page .cr-dossier .cr-iconbtn { order: 3; }

  /* Deux emprunteurs : prénoms seuls (cf. buildRecap()) et, si ça déborde
     quand même, un défilement plutôt qu'une ellipse qui avale le 2e prénom. */
  .cr-nom-slide { display: inline-block; white-space: nowrap; }
  #crClientNomTxt.is-overflowing .cr-nom-slide {
    animation: cr-nom-slide 5s ease-in-out infinite;
  }
  @keyframes cr-nom-slide {
    0%, 15%  { transform: translateX(0); }
    50%, 65% { transform: translateX(var(--cr-nom-slide, 0px)); }
    100%     { transform: translateX(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    #crClientNomTxt.is-overflowing .cr-nom-slide { animation: none; }
  }

  /* ── 18.2 Barre d'outils : UNE ligne sticky + panneau de filtres ────────── */
  /* La barre passait sous le bandeau mobile fixe (56px) : elle s'y collait au
     scroll et recouvrait la carte du dessous. Elle s'arrête maintenant dessous. */
  .cr-toolbar { top: 64px; padding: 7px 8px; margin-bottom: 10px; border-radius: 14px; }
  .cr-toolbar::after { left: 10px; right: 10px; }
  .cr-tb-row { flex-wrap: nowrap; gap: 8px; }
  .cr-tb-gap { display: none; }
  .cr-seg { padding: 2.5px; min-width: 0; }
  .cr-seg .filter-type-btn { font-size: 11.5px; font-weight: 800; padding: 6px 11px; }

  .cr-tb-more {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    height: 36px; padding: 0 12px; border-radius: 12px; cursor: pointer;
    font-size: 12px; font-weight: 800; color: var(--cr-ink-2);
    background: rgba(255,255,255,.72); border: 1px solid rgba(14,42,61,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: all .16s var(--cr-ease);
  }
  .cr-tb-more i { font-size: 12px; color: var(--cr-muted); }
  .cr-tb-more.is-active {
    color: var(--cr-primary-deep);
    border-color: color-mix(in srgb, var(--cr-primary) 40%, #fff);
    background: color-mix(in srgb, var(--cr-primary) 8%, #fff);
  }
  .cr-tb-more.is-active i { color: var(--cr-primary-deep); }
  .cr-tb-more:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; }
  .cr-tb-more-n {
    min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums;
    background: var(--cr-primary-dark); color: #fff;
  }
  .cr-tb-reset { width: 36px; height: 36px; }

  /* Le panneau : ancré sous la barre sticky (donc toujours à portée de pouce et
     visuellement rattaché au bouton qui l'ouvre), opaque, défilable. */
  .cr-tb-filters {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 60;
    padding: 11px; border-radius: 16px; background: #fff;
    border: 1px solid rgba(14,42,61,.10);
    box-shadow: 0 28px 64px -20px rgba(14,42,61,.42), 0 4px 12px rgba(14,42,61,.08);
    max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain;
    animation: cr-dd-in .16s var(--cr-ease) both;
  }
  .cr-tb-filters.is-open { display: block; }
  .cr-tb-filters > * + * { margin-top: 7px; }
  .cr-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 1px 1px 9px; margin: 0 0 9px; border-bottom: 1px solid rgba(14,42,61,.08);
  }
  .cr-sheet-t { margin: 0; font-family: var(--em-font-display,sans-serif); font-size: 14px; font-weight: 800; color: var(--cr-ink); }
  .cr-sheet-foot { display: block; margin-top: 11px; }
  .cr-sheet-done {
    width: 100%; min-height: 42px; border: none; border-radius: 999px; cursor: pointer;
    font-size: 13px; font-weight: 800; color: #fff;
    background: linear-gradient(180deg, var(--cr-primary), var(--cr-primary-dark));
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cr-primary) 55%, transparent);
  }
  .cr-sheet-done:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; }

  /* Contrôles du panneau : pleine largeur, empilés, même gabarit pour tous. */
  .cr-tb-filters .cr-dd { display: block; width: 100%; }
  .cr-tb-filters .cr-dd-btn,
  .cr-tb-filters .cr-budget { display: flex; width: 100%; max-width: none; height: 44px; padding: 0 13px; }
  .cr-tb-filters .cr-dd-txt { flex: 1 1 auto; min-width: 0; }
  .cr-tb-filters .cr-dd-txt b { max-width: none; }
  .cr-tb-filters .cr-budget-txt { flex: 1 1 auto; }
  .cr-tb-filters .cr-budget-in input { width: 62px; }
  /* Les sous-panneaux ne flottent plus : ils se déplient EN PLACE, sinon un
     panneau absolu s'échapperait du conteneur défilable. */
  .cr-tb-filters .cr-dd .cr-dd-pop,
  .cr-tb-filters .cr-com .cr-dd-pop {
    position: static; width: auto; max-width: none; max-height: none;
    margin: 6px 0 0; padding: 5px; border-radius: 12px;
    background: color-mix(in srgb, var(--cr-ink) 3%, #fff);
    border: 1px solid rgba(14,42,61,.08); box-shadow: none; animation: none;
  }
  .cr-tb-filters .cr-dd-opt { padding: 9px 10px; }
  .cr-tb-filters .cr-com-codes { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .cr-tb-filters .cr-com-codes .com-btn { padding: 10px 0; }
  /* Mode présentation client : le déclencheur redevient carré en desktop, mais
     dans le panneau mobile il garde sa pleine largeur (il est étiqueté par la
     ligne du panneau, pas par une icône isolée). */
  #phaseResults.cr-hide-com .cr-tb-filters #crComBtn { width: 100%; height: 44px; padding: 0 13px; gap: 9px; justify-content: flex-start; }
  #phaseResults.cr-hide-com .cr-tb-filters #crComBtn .cr-dd-chev { display: inline-block; }

  /* Compteur d'offres : collé à la liste plutôt qu'isolé sur sa propre bande. */
  #borrowerTabsContainer { margin-bottom: 5px; }
  .cr-count { font-size: 11.5px; }

  /* ── 18.3 Bannière « simulation chargée » ──────────────────────────────── */
  .cr-restore { gap: 9px; margin: 0 0 2px; padding: 8px 10px; border-radius: 14px; }
  .cr-restore-ico { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
  .cr-restore-t { font-size: 12px; line-height: 1.25; }
  .cr-restore-s { font-size: 10px; line-height: 1.3; }
  .cr-restore .cr-cta { flex-shrink: 0; min-width: 0; min-height: 34px; padding: 7px 11px; font-size: 11.5px; gap: 5px; }

  /* ── 18.4 Carte d'offre ────────────────────────────────────────────────── */
  #phaseResults .tarif-card { border-radius: 15px; }
  #phaseResults .tarif-card:hover { transform: none; }

  /* Ligne 1 — identité : case, logo compagnie, « by grossiste », économie.
     Le rail vertical du desktop devient une seule ligne : les trois marques
     tiennent côte à côte, l'économie est poussée à droite (elle se replie
     d'elle-même sous les logos sur les très petits écrans). */
  .cr-in {
    grid-template-columns: auto minmax(0,1fr); grid-template-areas: "chk logo" "main main";
    align-items: center; column-gap: 9px; row-gap: 7px; padding: 9px 12px 8px;
  }
  /* La case reste calée EN HAUT : quand la vignette d'économie passe à la ligne
     (logo de compagnie large), un alignement centré la faisait flotter au milieu
     d'un bloc de deux lignes, décalée par rapport aux cartes voisines. */
  #phaseResults .cr-in > .tc-select { align-self: start; margin-top: 2px; }
  #phaseResults .pdf-cb { width: 17px; height: 17px; }
  .cr-in .cr-idlogo {
    width: auto; min-width: 0; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 7px 9px; padding: 0;
  }
  /* Hauteur imposée + largeur auto, et un max-width en PIXELS (pas en %) : avec
     `width:auto` sur le conteneur, un `max-width:100%` sur l'image crée une
     dépendance circulaire que Chrome résout parfois à zéro — le logo Gan
     (SVG) disparaissait purement et simplement de la carte. */
  .cr-in .cr-logo { width: auto; max-width: 88px; height: 20px; flex: 0 0 auto; }
  .cr-in .cr-logo .cr-logo-img { width: auto; height: 20px; max-width: 88px; max-height: 20px; }
  .cr-in .cr-by { flex-shrink: 0; font-size: 10px; gap: 5px; }
  .cr-in .cr-by-prefix { font-size: 8.5px; }
  .cr-in .cr-by-logo { height: 15px; max-width: 70px; }
  .cr-in .cr-by-logo[data-slug="exade"] { height: 11px; }
  .cr-in .cr-by-logo[data-slug="simulassur"] { height: 20px; max-width: 76px; }
  .cr-in .cr-eco { width: auto; margin: 0 0 0 auto; padding: 3px 8px 3px 3px; border-radius: 9px; gap: 5px; flex-shrink: 0; }
  .cr-in .cr-eco-ico { width: 18px; height: 18px; border-radius: 6px; font-size: 8.5px; }
  .cr-in .cr-eco-txt em { font-size: 7.5px; letter-spacing: 0; }
  .cr-in .cr-eco-txt b { font-size: 12.5px; }

  /* Le filet tireté horizontal remplace le tireté vertical du desktop. */
  .cr-main { padding-top: 8px; gap: 8px; border-top: 1px dashed rgba(14,42,61,.15); }

  /* En-tête : 2 colonnes × 2 lignes — nom / badges, produit / TAEA.
     .cr-who et .cr-head-right passent en display:contents pour que les quatre
     éléments deviennent les quatre cases de cette grille : les badges et le TAEA
     ne s'empilent donc plus sur deux lignes à eux seuls. */
  .cr-head {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    column-gap: 8px; row-gap: 2px; align-items: center; padding-bottom: 7px;
  }
  .cr-who, .cr-head-right { display: contents; }
  .cr-assureur { grid-column: 1; grid-row: 1; font-size: 15px; }
  .cr-badges   { grid-column: 2; grid-row: 1; justify-self: end; flex-wrap: nowrap; gap: 4px; }
  .cr-produit  { grid-column: 1; grid-row: 2; font-size: 11px; margin: 0; }
  .cr-taea     { grid-column: 2; grid-row: 2; justify-self: end; font-size: 9.5px; padding: 1.5px 8px; gap: 3px; line-height: 1.35; }
  .cr-taea b   { font-size: 11px; }
  .cr-b { font-size: 9.5px; padding: 1.5px 7px; letter-spacing: .04em; gap: 3px; line-height: 1.35; }

  /* Chronologie : chaque segment est une LIGNE « libellé … prix », les tuiles
     passent en pastilles horizontales (libellé et montant sur la même ligne)
     au lieu de deux étages. */
  .cr-time { gap: 2px; }
  .cr-time-segs { gap: 2px; }
  .cr-time-seg { border-radius: 10px; padding: 5px 9px 6px; gap: 4px; }
  .cr-time-h { font-size: 9px; letter-spacing: .05em; }
  .cr-time-h i { font-size: 8.5px; }
  .cr-time-h-total { font-size: 12.5px; line-height: 1.25; }
  .cr-time-h-total small { font-size: 8.5px; }
  .cr-time-l { gap: 3px 4px; }
  .cr-time-l li { flex-direction: row; align-items: baseline; gap: 5px; padding: 1.5px 7px; border-radius: 7px; }
  .cr-time-l em { font-size: 8.5px; }
  .cr-time-l b { font-size: 11.5px; line-height: 1.3; }
  /* C'est la FLÈCHE qu'on tourne, pas sa boîte : en pivotant le <span> (règle
     tablette), sa boîte englobante devenait une bande invisible de 340px de haut
     en travers de la carte, qui interceptait le survol des tuiles au-dessus. */
  .cr-time-go { transform: none; height: 11px; font-size: 10px; }
  .cr-time-go i { transform: rotate(90deg); }
  .cr-time-right { gap: 4px; }
  .cr-time-summary { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; padding: 0 3px; }
  .cr-time-summary-row { flex-direction: row; align-items: baseline; gap: 6px; }
  .cr-time-summary-row em { font-size: 8.5px; }
  .cr-time-summary-row b { font-size: 12px; }

  /* Pied : garanties sur une à deux lignes, puis actions et CTA sur la MÊME
     ligne (les icônes occupaient auparavant une rangée pleine à elles seules). */
  .cr-foot { flex-direction: column; align-items: stretch; gap: 7px; padding: 7px 12px 9px; }
  .cr-foot-info { flex: 0 0 auto; gap: 0; }
  .cr-foot-row { gap: 4px 7px; }
  .cr-gar { gap: 4px; }
  .cr-tag { font-size: 9px; letter-spacing: .04em; padding: 3px 6px; border-radius: 6px; }
  .cr-meta-ok, .cr-meta-warn { font-size: 10px; padding: 3px 7px; gap: 5px; }
  .cr-meta-ok i, .cr-meta-warn i { font-size: 9.5px; }
  .cr-foot-sep { height: 14px; }
  /* Le CTA garde une largeur IDENTIQUE d'une carte à l'autre (flex:1) — c'est ce
     qui fait la colonne d'action — mais il rendait toute la place restante, donc
     un bouton démesuré pour deux mots. Un filet, entouré d'air, le décolle de la
     bulle de Lia ; le groupe d'icônes reste ancré à gauche, donc Lia ne bouge pas. */
  .cr-foot-actions { width: 100%; margin-left: 0; flex-wrap: nowrap; gap: 12px; }
  .cr-foot-icons { flex: 0 0 auto; gap: 7px; }
  .cr-foot-actions .cr-foot-sep { display: block; width: 1px; height: 22px; margin: 0; }
  .cr-icbtn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 13px; }
  /* La bulle de Lia se mesure anneau compris : 34 + 2×2 = 38px, soit exactement
     la hauteur du CTA d'à côté. Sinon son halo la faisait dépasser de 3px et
     rompait la ligne d'appui de la rangée d'actions. */
  .cr-icbtn-lia { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  .cr-icbtn-lia::before { inset: -2px; }
  .cr-foot-actions .cr-cta { flex: 1 1 auto; min-width: 0; min-height: 38px; margin-right: 4px; padding: 8px 12px; font-size: 12.5px; gap: 6px; }
  /* Mode client, mobile : la mensualité moyenne (3e tuile de .emc-figs sur
     ordinateur) repasse en pleine largeur SOUS Coût 8 ans / Coût total —
     trop de texte pour tenir à trois par ligne sous 767px — avec le gabarit
     « barre » (libellé à gauche, tarif en évidence à droite) plutôt que la
     tuile empilée des deux autres. */
  /* .emc-figs li.emc-figs-mens (2 classes + tag), pas .emc-figs-mens seul :
     il faut au moins la spécificité de .emc-figs li (comparateur.php) pour
     que flex/padding l'emportent sur le gabarit tuile empilée. */
  .emc-figs li.emc-figs-mens {
    flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between;
    gap: .5rem; padding: 6px 11px; margin-bottom: 1px;
  }
  .emc-figs li.emc-figs-mens em { font-size: 10px; }
  .emc-figs li.emc-figs-mens b { font-size: 15px; }
  .emc-figs li.emc-figs-mens b small { font-size: 11px; }

  /* ── 18.4b Carte « au repos » : l'essentiel, le reste à un doigt ────────
     Tout est là — rien n'est retiré — mais la carte au repos ne montre que ce qui
     sert à TRANCHER entre 22 offres : la marque, le produit, le TAEA, l'économie
     et les deux mensualités. Le détail (cotisation par assuré, frais de dossier,
     coûts sur la durée, garanties, formalités) se déplie carte par carte.
     Au repos, les segments perdent leur pastille colorée et redeviennent deux
     lignes « libellé … prix » : c'est la teinte du texte, pas le fond, qui
     distingue la période de lissage du régime normal. */
  .tarif-card:not(.is-detail) .cr-time-l,
  .tarif-card:not(.is-detail) .cr-time-sep,
  .tarif-card:not(.is-detail) .cr-time-summary,
  .tarif-card:not(.is-detail) .cr-time-go,
  .tarif-card:not(.is-detail) .cr-foot-info { display: none; }
  .tarif-card:not(.is-detail) .cr-time-seg { background: none; border: none; padding: 0 2px; gap: 0; }
  .tarif-card:not(.is-detail) .cr-time-segs { gap: 4px; }
  .tarif-card:not(.is-detail) .cr-time-h-total { font-size: 14.5px; }
  .tarif-card:not(.is-detail) .cr-time-seg-b .cr-time-h-total { color: var(--cr-ink-2); }

  /* Le déclencheur : un filet discret qui NOMME ce qu'il cache (jamais un « … »
     muet). Il vit tout en bas de la carte — l'action principale reste haute, et
     tout ce qui se déplie apparaît AU-DESSUS de lui, jamais en dessous. */
  .cr-foot-info    { order: 1; }
  .cr-foot-actions { order: 2; }
  .cr-more         { order: 3; }
  .cr-more {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; margin-top: 1px; padding: 9px 8px 1px; border: none; background: none; cursor: pointer;
    font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cr-muted); transition: color .15s;
  }
  .cr-more:hover { color: var(--cr-primary-deep); }
  .cr-more:focus-visible { outline: 2px solid var(--cr-primary-dark); outline-offset: 2px; border-radius: 8px; }
  .cr-more-chev { font-size: 9px; transition: transform .25s var(--cr-ease); }
  .cr-more-b { display: none; }
  .tarif-card.is-detail .cr-more-chev { transform: rotate(180deg); }
  .tarif-card.is-detail .cr-more-a { display: none; }
  .tarif-card.is-detail .cr-more-b { display: inline; }
  .tarif-card.is-detail .cr-more { color: var(--cr-primary-deep); }
  @media (prefers-reduced-motion: reduce) { .cr-more-chev { transition: none; } }
  /* Le détail apparaît d'un bloc, sans pousser brutalement la carte suivante. */
  .tarif-card.is-detail .cr-time-l,
  .tarif-card.is-detail .cr-foot-info { animation: cr-detail-in .22s var(--cr-ease) both; }
  @keyframes cr-detail-in { from { opacity: 0; transform: translateY(-3px); } }
  @media (prefers-reduced-motion: reduce) {
    .tarif-card.is-detail .cr-time-l, .tarif-card.is-detail .cr-foot-info { animation: none; }
  }

  /* ── 18.5 Divers ───────────────────────────────────────────────────────── */
  .cr-incompat > summary { font-size: 11.5px; padding: 7px 13px; }
  .cr-recap-panel { padding: 12px 13px; border-radius: 15px; }
  .cr-recap-grid { grid-template-columns: 1fr; gap: 0; }
  .cr-slot-pad { padding: 2px 0 10px; }
  .cr-bulkbar { width: calc(100vw - 16px); padding: 10px 13px; gap: 9px; font-size: 12.5px; }
  #chatFab { width: 50px; height: 50px; right: 14px; bottom: 16px; }
}

/* Très petits écrans (≤ 359px) : l'économie prend sa propre ligne sous les
   logos plutôt que de comprimer le wordmark du grossiste. */
@media (max-width: 359px) {
  .cr-in .cr-eco { margin-left: 0; width: 100%; }
  /* Sous 360px, nom + n° de dossier + chevron ne tiennent plus à leur taille
     naturelle et le chevron passait à la ligne : le nom repart d'une base nulle,
     s'étire dans la place restante et se tronque — la ligne reste une ligne. */
  .cr-dossier-nom { flex: 1 1 0; }
  .cr-seg .filter-type-btn { padding: 6px 8px; }
  .cr-tb-more span { display: none; }
}