/* =================================================================
   Martin BTC — Rubrique Outils (/outils/, convertisseur-bitcoin,
   calculateur-interets-composes, rarete-bitcoin)
   Feuille chargee APRES style.css, et seulement par les pages de la
   rubrique. Elle ne redefinit aucune regle existante : tout est prefixe
   .cv-, .ic-, .rt- ou .tools-, et reprend les variables de style.css (couleurs,
   polices, rayons). Separee expres : toucher style.css aurait oblige a
   changer le ?v= de toutes les pages du site (cache immuable d'un an).
   ================================================================= */

/* ---- 1. En-tete de page, plus compact que .page-hero ----
   Le convertisseur doit apparaitre des le premier ecran, telephone compris :
   on gagne de la hauteur sur le titre et les marges, pas sur l'outil. */
.cv-hero { padding-block: clamp(1.8rem, 4.5vw, 3.2rem) clamp(1.1rem, 2.5vw, 1.8rem); }
.cv-hero h1 { font-size: clamp(1.75rem, 4.6vw, 2.9rem); margin-top: 0.8rem; max-width: 22ch; }
.cv-hero .lead { margin-top: 0.8rem; font-size: clamp(1rem, 1.8vw, 1.15rem); }
.cv-wrap { max-width: 860px; }
/* Sections qui suivent l'outil : plus serrees que .section, le lecteur
   vient de faire un calcul, pas de changer de sujet. */
.cv-section { padding-block: clamp(2.2rem, 5vw, 3.6rem) 0; }
.cv-section:last-of-type { padding-bottom: clamp(3rem, 7vw, 5rem); }
.cv-section .prose { max-width: 680px; }
.cv-intro { max-width: 60ch; }

/* ---- 2. Le convertisseur ---- */
.cv {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3.5vw, 2rem); box-shadow: var(--shadow);
}
.cv-champs { display: grid; gap: 0.2rem; }
.cv-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--text); margin-bottom: 0.45rem; }

/* Un seul cadre pour le montant et son unite : on lit « 100 | CHF » comme
   une seule valeur. Le cadre porte l'etat de focus (anneau orange de 2 px),
   l'unite se distingue en plus quand c'est elle qui a le focus clavier. */
.cv-saisie {
  display: flex; align-items: stretch;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.cv-saisie:focus-within { border-color: var(--orange); background: rgba(247, 147, 26, 0.05); box-shadow: 0 0 0 1px var(--orange); }
.cv-rangee.is-err .cv-saisie { border-color: #ff8a7a; box-shadow: 0 0 0 1px #ff8a7a; }
.cv-saisie input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: transparent; border: 0; border-radius: 14px 0 0 14px;
  padding: 0.75rem 1rem; min-height: 60px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 4.4vw, 1.8rem); line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.cv-saisie input::placeholder { color: var(--muted-2); opacity: 1; }
.cv-saisie select {
  flex: 0 0 auto; width: 6.9rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  border: 0; border-left: 1px solid var(--line-2); border-radius: 0 14px 14px 0;
  padding: 0 2.3rem 0 1rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23A7A9B0' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
  transition: background-color 0.2s, color 0.2s;
}
.cv-saisie select option { background: var(--surface); color: var(--text); }
/* L'anneau du cadre remplace le contour propre a chaque champ : la regle
   globale :focus-visible (contour decale de 3 px, coins a 4 px) dessinerait
   un rectangle a cheval sur le cadre. */
.cv-saisie input:focus, .cv-saisie select:focus { outline: none; }
.cv-saisie select:focus-visible { background-color: var(--orange-soft); color: var(--orange-2); border-radius: 0 14px 14px 0; }
.cv-saisie select:hover { color: var(--orange-2); }

.cv-err { color: #ff8a7a; font-size: 0.86rem; margin-top: 0.45rem; }
.cv-err[hidden] { display: none; }

/* Bouton d'inversion, entre les deux rangees */
.cv-inverser { display: flex; justify-content: center; padding-block: 0.55rem 0.2rem; }
.cv-inverser button {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--orange-2);
  transition: transform 0.35s var(--ease), border-color 0.2s, background 0.2s;
}
.cv-inverser button:hover { border-color: var(--orange-line); background: var(--orange-soft); transform: rotate(180deg); }
.cv-inverser button svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .cv-inverser button:hover { transform: none; } }

/* Grand ecran : les deux montants cote a cote, l'inversion au milieu, pour
   que le resultat tienne dans le premier ecran (720 px de haut compris).
   Le bouton est aligne sur le centre des champs : hauteur du libelle
   (0.86rem x interligne 1.65 + marge 0.45rem) plus la moitie de l'ecart
   entre le champ (62 px avec sa bordure) et le bouton (46 px). Les
   rangees gardent leur ordre dans le DOM, donc l'inversion les echange
   aussi a l'ecran. */
@media (min-width: 900px) {
  .cv-champs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; column-gap: 0.8rem; }
  .cv-inverser { padding: 0; margin-top: calc(0.86rem * 1.65 + 0.45rem + 8px); }
  .cv-inverser button svg { transform: rotate(90deg); }
  .cv-saisie input { font-size: 1.6rem; }
  .cv-saisie select { width: 6.3rem; padding-left: 0.9rem; }
}

/* Montants rapides */
.cv-rapides { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.cv-rapides-titre {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2); margin-right: 0.3rem;
}
.cv-rapide {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.45rem 0.95rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono); font-size: 0.84rem; color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.cv-rapide:hover { border-color: var(--orange-line); background: var(--orange-soft); color: var(--orange-2); }
/* Au telephone : titre sur sa ligne, puis les quatre boutons sur une seule
   ligne a largeur egale, cibles de 44 px. */
@media (max-width: 700px) {
  .cv-rapides-titre { flex-basis: 100%; }
  .cv-rapide { min-height: 44px; flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 0.4rem; }
}

/* Resultat. Hauteur reservee : l'arrivee des cours ne fait pas sauter la page. */
.cv-resultat { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.cv-principal {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 3.6vw, 1.95rem); line-height: 1.3; min-height: 2.6em;
  font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere;
}
.cv-principal .cv-op { color: var(--muted-2); font-weight: 500; }
.cv-principal .cv-vers { color: var(--orange-2); }
.cv-secondaire { color: var(--muted); font-size: 0.95rem; margin-top: 0.4rem; min-height: 1.6em; font-variant-numeric: tabular-nums; }
.cv-resultat.is-load .cv-principal { color: var(--muted); font-size: 1.05rem; font-weight: 500; font-family: var(--font-body); letter-spacing: 0; }
.cv-resultat.is-err .cv-principal { color: #ff8a7a; font-size: 1.02rem; font-weight: 500; font-family: var(--font-body); letter-spacing: 0; line-height: 1.5; }
.cv-retry { margin-top: 0.4rem; }

.cv-alerte {
  margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 12px;
  border: 1px solid var(--orange-line); background: var(--orange-soft);
  color: var(--text); font-size: 0.9rem; line-height: 1.5;
}
.cv-alerte[hidden] { display: none; }
.cv-meta { margin-top: 1rem; font-size: 0.85rem; color: var(--muted-2); line-height: 1.55; }
.cv-meta p + p { margin-top: 0.2rem; }
.cv-meta .cv-mention { color: var(--muted); }
.cv-meta a.text-orange { color: var(--orange-2); }

/* ---- 3. Cartes 1 BTC = ... ---- */
.cv-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cv-carte {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; min-width: 0;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.cv-carte.is-active { border-color: var(--orange-line); box-shadow: 0 0 0 1px var(--orange-line); }
.cv-carte-titre {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2); line-height: 1.3;
}
.cv-carte-prix {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2; margin-top: 0.4rem;
  font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.cv-carte.is-active .cv-carte-prix { color: var(--orange-2); }
.cv-carte-sats { color: var(--muted); font-size: 0.86rem; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
/* Au telephone, trois colonnes font des cartes de 100 px ou le prix ne tient
   plus : on passe a une carte par ligne, titre a gauche, prix a droite. */
@media (max-width: 620px) {
  .cv-cartes { grid-template-columns: 1fr; gap: 0.7rem; }
  .cv-carte { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 1rem; padding: 1rem 1.1rem; }
  .cv-carte-prix { margin-top: 0; grid-column: 2; grid-row: 1; text-align: right; }
  .cv-carte-titre { grid-column: 1; grid-row: 1; }
  .cv-carte-sats { grid-column: 1 / -1; }
}

/* ---- 4. Tres petits ecrans (320 px) ----
   « 1 234 567,89 » doit tenir dans le champ sans defiler. La taille des
   chiffres reste au-dessus de 16 px : en dessous, Safari sur iPhone zoome
   la page a chaque fois qu'on touche le champ. */
@media (max-width: 380px) {
  .cv-hero { padding-top: 1.3rem; }
  .cv-hero h1 { font-size: 1.6rem; }
  .cv-hero .lead { font-size: 0.97rem; line-height: 1.55; }
  .cv-saisie input { padding-inline: 0.75rem; font-size: 1.2rem; }
  .cv-saisie select { width: 5.3rem; padding: 0 1.7rem 0 0.7rem; background-position: right 0.55rem center; }
}

/* ---- 5. Page d'accueil des outils ---- */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gap); }
.tools-card { display: flex; flex-direction: column; }
.tools-card p { margin-top: 0.2rem; }
.tools-card .btn-row { margin-top: auto; padding-top: 1.4rem; }
/* Pas de soulevement au survol : la carte n'est pas cliquable en entier,
   seul son bouton l'est. */
.tools-card:hover { transform: none; }

/* =================================================================
   6. Calculateur d'interets composes (.ic-)
   DOM : [sortie = resultat + tuiles] puis [parametres].
   Au telephone, .ic-sortie s'efface (display: contents) et l'ordre
   devient resultat, parametres, tuiles : le chiffre principal bouge sous
   le doigt quand on regle un curseur, sans masquer les champs.
   Sur grand ecran : parametres a gauche, resultats a droite, colles en
   haut de l'ecran pendant qu'on descend dans les parametres.
   ================================================================= */
.ic-hero .container, .ic-section-outil .container { max-width: var(--maxw); }
.ic-accroche {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); color: var(--orange-2); margin-top: 0.7rem;
}
.ic-hero .lead { max-width: 62ch; }
/* Telephone : en-tete et phrase resserres, pour que le premier champ
   apparaisse dans le premier ecran sous le resultat. */
@media (max-width: 600px) {
  .ic-accroche { font-size: 1.05rem; margin-top: 0.5rem; }
  .ic-hero .lead { font-size: 0.96rem; line-height: 1.55; margin-top: 0.6rem; }
  .ic-phrase { font-size: 0.93rem; line-height: 1.55; margin-top: 0.6rem; }
}

.ic { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.ic-sortie { display: contents; }
.ic-resume { order: 1; }
.ic-params { order: 2; }
.ic-tuiles { order: 3; }
@media (min-width: 980px) {
  .ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; }
  .ic-params { grid-column: 1; grid-row: 1; }
  .ic-sortie { display: grid; gap: 0.8rem; grid-column: 2; grid-row: 1; }
}
/* Colle sous l'en-tete fixe (70 px) seulement si l'ecran est assez haut
   pour que la colonne tienne. */
@media (min-width: 980px) and (min-height: 700px) {
  .ic-sortie { position: sticky; top: 88px; }
}

/* Resultat principal */
.ic-resume {
  border: 1px solid var(--orange-line); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.14), rgba(247, 147, 26, 0.03));
  padding: clamp(1.2rem, 3.5vw, 1.9rem);
}
.ic-resume-label {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
/* Chiffres proportionnels (pas de tabular-nums) : c'est un grand nombre isole. */
.ic-final {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.05; margin-top: 0.4rem;
  color: var(--orange-2); overflow-wrap: anywhere;
}
.ic-phrase { color: var(--text); margin-top: 0.8rem; font-size: 1rem; line-height: 1.6; max-width: 60ch; }
.ic-attente {
  margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font-size: 0.9rem;
}
.ic-attente[hidden] { display: none; }
/* Un champ vide ou faux : le dernier resultat valide reste, en retrait. */
.ic.is-attente .ic-final, .ic.is-attente .ic-phrase, .ic.is-attente .ic-tuiles,
.ic-graph-bloc.is-attente .ic-graphe, .ic-graph-bloc.is-attente .ic-tableau { opacity: 0.45; }

/* Parametres */
.ic-params {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3.5vw, 1.8rem); display: grid; gap: 1.1rem; min-width: 0;
}
.ic-devise-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.ic-devise select {
  appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 44px;
  border: 1px solid var(--line-2); border-radius: 12px; padding: 0 2.3rem 0 1rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text);
  background: rgba(255, 255, 255, 0.03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23A7A9B0' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
}
.ic-devise select:focus { border-color: var(--orange); }
.ic-devise select option { background: var(--surface); color: var(--text); }
.ic-note { font-size: 0.84rem; color: var(--muted-2); line-height: 1.5; }

.ic-champ { min-width: 0; }
.ic-saisie {
  display: flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 12px;
  background: rgba(255, 255, 255, 0.03); transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.ic-saisie:focus-within { border-color: var(--orange); background: rgba(247, 147, 26, 0.05); box-shadow: 0 0 0 1px var(--orange); }
.ic-champ.is-err .ic-saisie { border-color: #ff8a7a; box-shadow: 0 0 0 1px #ff8a7a; }
.ic-saisie input {
  flex: 1 1 auto; min-width: 0; width: 100%; background: transparent; border: 0;
  border-radius: 12px 0 0 12px; padding: 0.6rem 0.9rem; min-height: 48px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ic-saisie input:focus { outline: none; }
.ic-unite {
  flex: none; display: flex; align-items: center; padding: 0 0.95rem;
  border-left: 1px solid var(--line-2); color: var(--muted); font-family: var(--font-mono); font-size: 0.86rem;
}
.ic-aide { font-size: 0.82rem; color: var(--muted-2); margin-top: 0.4rem; }

/* Curseur : piste fine, partie remplie en orange (--pct pose par le script),
   poignee de 22 px dans une zone de 36 px de haut pour le doigt. */
.ic-curseur {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px;
  margin: 0.3rem 0 -0.4rem; background: transparent; cursor: pointer; --pct: 0%;
}
.ic-curseur::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--orange) var(--pct), rgba(255, 255, 255, 0.12) var(--pct));
}
.ic-curseur::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.ic-curseur::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--orange); }
.ic-curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px;
  border-radius: 50%; background: var(--orange-2); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--orange);
}
.ic-curseur::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--orange-2);
  border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--orange);
}
.ic-curseur:focus { outline: none; }
/* Au doigt : la zone du curseur passe a 44 px, la piste reste fine. */
@media (max-width: 700px) {
  .ic-curseur { height: 44px; margin: 0.1rem 0 -0.5rem; }
}
.ic-curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--orange-2); }
.ic-curseur:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--orange-2); }

/* Interrupteur « Comparer trois scenarios » : une vraie case a cocher
   (role="switch"), seule l'apparence change. */
.ic-bascule { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; min-height: 44px; font-weight: 600; font-size: 0.95rem; }
.ic-bascule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ic-bascule-piste {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line-2); transition: background 0.2s, border-color 0.2s;
}
.ic-bascule-piste::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform 0.2s var(--ease), background 0.2s;
}
.ic-bascule input:checked + .ic-bascule-piste { background: var(--orange-soft); border-color: var(--orange); }
.ic-bascule input:checked + .ic-bascule-piste::after { transform: translateX(18px); background: var(--orange-2); }
.ic-bascule input:focus-visible + .ic-bascule-piste { outline: 2px solid var(--orange-2); outline-offset: 3px; }

.ic-scenarios { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1rem 1.1rem; margin: -0.4rem 0 0; min-width: 0; }
.ic-scenarios[hidden] { display: none; }
.ic-scenarios legend, .ic-moment legend { padding: 0 0.4rem; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.ic-scen-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.ic-scen-grille .cv-label { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.ic-scen-grille .ic-unite { padding: 0 0.6rem; }
.ic-scen-grille .ic-saisie input { font-size: 1.02rem; padding-inline: 0.7rem; }
@media (max-width: 420px) { .ic-scen-grille { grid-template-columns: 1fr; } }

/* Options avancees */
.ic-avance { border-top: 1px solid var(--line); padding-top: 0.2rem; }
.ic-avance summary, .ic-tableau summary {
  display: flex; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer;
  font-weight: 600; font-size: 0.95rem; list-style: none;
}
.ic-avance summary::-webkit-details-marker, .ic-tableau summary::-webkit-details-marker { display: none; }
.ic-avance summary::before, .ic-tableau summary::before {
  content: ""; width: 8px; height: 8px; flex: none; margin: 0 0.2rem 0 0.15rem;
  border-right: 2px solid var(--orange-2); border-bottom: 2px solid var(--orange-2);
  transform: rotate(-45deg); transition: transform 0.2s;
}
.ic-avance[open] summary::before, .ic-tableau[open] summary::before { transform: rotate(45deg); }
.ic-avance summary:hover, .ic-tableau summary:hover { color: var(--orange-2); }
.ic-avance-corps { display: grid; gap: 1.2rem; padding: 0.6rem 0 0.2rem; }
.ic-moment { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.ic-moment legend { padding: 0; margin-bottom: 0.4rem; width: 100%; }
.ic-moment label { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; cursor: pointer; font-size: 0.95rem; }
.ic-moment input { width: 18px; height: 18px; accent-color: var(--orange); margin: 0; }

.ic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }

/* Tuiles de detail */
.ic-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; align-content: start; min-width: 0; }
.ic-tuile {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0;
}
.ic-tuile--large { grid-column: 1 / -1; }
.ic-tuile--scenario { grid-column: auto; }
.ic-tuile-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); line-height: 1.35;
}
.ic-cle { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.ic-tuile-valeur {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.2; margin-top: 0.35rem; color: var(--text); overflow-wrap: anywhere;
}
.ic-tuile.is-pos .ic-tuile-valeur { color: #4cd784; }
.ic-tuile.is-neg .ic-tuile-valeur { color: #ff8a7a; }
.ic-tuile-sous { font-size: 0.84rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.5; }
/* Trois scenarios : une rangee de trois sur grand ecran, une colonne au telephone. */
.ic-tuiles:has(.ic-tuile--scenario) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ic-tuiles:has(.ic-tuile--scenario) .ic-tuile { grid-column: span 3; }
.ic-tuiles:has(.ic-tuile--scenario) .ic-tuile--large { grid-column: 1 / -1; }
.ic-tuiles:has(.ic-tuile--scenario) .ic-tuile--scenario { grid-column: span 2; }
@media (max-width: 520px) {
  .ic-tuiles:has(.ic-tuile--scenario) .ic-tuile--scenario { grid-column: 1 / -1; }
}

/* Graphique */
.ic-graph-bloc { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.ic-graphe { position: relative; }
.ic-graphe:focus { outline: none; }
.ic-graphe:focus-visible { outline: 2px solid var(--orange-2); outline-offset: 3px; }
.ic-svg { width: 100%; min-height: 250px; touch-action: pan-y; }
.ic-svg svg { display: block; overflow: visible; }
.ic-infobulle {
  position: absolute; top: clamp(1rem, 3vw, 1.8rem); z-index: 2; pointer-events: none;
  min-width: 170px; max-width: 250px; padding: 0.65rem 0.8rem; border-radius: 10px;
  background: #0d0f13; border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 0.84rem;
}
.ic-infobulle[hidden] { display: none; }
.ic-ib-titre { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.3rem; }
.ic-ib-ligne { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); line-height: 1.7; white-space: nowrap; }
.ic-ib-ligne i { width: 12px; height: 3px; border-radius: 2px; flex: none; }
.ic-ib-ligne strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Tableau annuel */
.ic-tableau { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.3rem 1rem; }
.ic-tableau[open] { padding-bottom: 1rem; }
.ic-table-wrap { overflow-x: auto; margin-top: 0.4rem; }
.ic-table-wrap:focus-visible { outline: 2px solid var(--orange-2); outline-offset: 2px; }
.ic-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ic-table caption { text-align: left; font-size: 0.82rem; color: var(--muted-2); padding: 0.2rem 0 0.7rem; }
.ic-table th, .ic-table td { padding: 0.55rem 0.7rem; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ic-table thead th { border-top: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: var(--text); background: var(--surface); position: sticky; top: 0; }
.ic-table th[scope="row"], .ic-table thead th:first-child { text-align: left; color: var(--text); }
.ic-table td { color: var(--muted); }
/* Colonne Annee figee : avec 7 colonnes au telephone, le tableau defile de
   cote et l'annee reste lisible. */
.ic-table th[scope="row"], .ic-table thead th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.ic-table thead th:first-child { z-index: 2; }

/* Formules dans la section Hypotheses */
.ic-formule {
  font-family: var(--font-mono); font-size: 0.9em; color: var(--text); white-space: nowrap;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 6px; padding: 0.05rem 0.4rem;
}

/* =================================================================
   7. Ta part des 21 millions (.rt-)
   Reprend le cadre du convertisseur (.cv, .cv-saisie, .cv-rapides) pour
   la saisie. Resultats en cartes : la part de l'offre maximale en grand,
   a cote de la saisie sur grand ecran, juste dessous au telephone.
   ================================================================= */
.rt-haut { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 900px) { .rt-haut { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rt-label-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin-bottom: 0.45rem; }
.rt-label-ligne .cv-label { margin-bottom: 0; }
/* Le montant de depart est une demonstration : pastille visible tant que
   le visiteur n'a rien tape ni choisi. */
.rt-demo {
  display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px;
  border: 1px dashed var(--orange-line); background: var(--orange-soft);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--orange-2);
}
.rt-demo[hidden] { display: none; }
/* Les montants rapides sont plus longs qu'au convertisseur (« 0,001 BTC ») :
   deux par ligne au telephone, jamais de texte qui deborde du bouton. */
@media (max-width: 700px) { .rt-entree .cv-rapide { flex: 1 1 40%; } }
.rt-prive { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 1.1rem; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.rt-prive svg { width: 18px; height: 18px; flex: none; color: var(--orange-2); margin-top: 0.1rem; }

.rt-hero {
  border: 1px solid var(--orange-line); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(247, 147, 26, 0.14), rgba(247, 147, 26, 0.03));
  padding: clamp(1.2rem, 3.5vw, 1.9rem); display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.rt-titre, .rt-label {
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
/* Grand nombre isole : chiffres proportionnels, et coupure autorisee pour
   les tres longs pourcentages (un satoshi = 16 decimales). */
.rt-hero-valeur {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(1.9rem, 5.6vw, 3rem); line-height: 1.1; margin-top: 0.5rem;
  color: var(--orange-2); overflow-wrap: anywhere;
}
.rt-hero-sous { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--text); margin-top: 0.35rem; }
.rt-expl { font-size: 0.86rem; color: var(--muted); margin-top: 0.8rem; line-height: 1.5; }

.rt-cartes { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-top: var(--gap); }
.rt-carte {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; min-width: 0;
}
/* La carte on-chain se distingue des cartes fondees sur les 21 millions :
   cadre en pointilles et etiquette, pas seulement une couleur. */
.rt-carte--f { border-style: dashed; border-color: var(--line-2); }
.rt-etiquette {
  display: inline-block; margin-bottom: 0.5rem; padding: 0.15rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted);
}
.rt-valeur {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 3vw, 1.65rem); line-height: 1.2; margin-top: 0.45rem; color: var(--text); overflow-wrap: anywhere;
}
.rt-sous { font-size: 0.9rem; color: var(--text); margin-top: 0.25rem; }
.rt-phrase, .rt-source, .rt-note { font-size: 0.88rem; color: var(--muted); margin-top: 0.6rem; line-height: 1.55; }
.rt-exact { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted-2); margin-top: 0.5rem; overflow-wrap: anywhere; }
.rt-precision {
  display: flex; align-items: flex-start; gap: 0.45rem; margin-top: 0.55rem; padding: 0.5rem 0.7rem;
  border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  font-size: 0.84rem; color: var(--text); line-height: 1.45;
}
.rt-precision svg { width: 16px; height: 16px; flex: none; margin-top: 0.12rem; color: var(--orange-2); }
.rt-alerte {
  margin-top: 0.7rem; padding: 0.55rem 0.75rem; border-radius: 10px;
  border: 1px solid var(--orange-line); background: var(--orange-soft); font-size: 0.84rem; color: var(--text);
}
.rt-alerte[hidden], [data-rt-emis-corps][hidden], [data-rt-emis-msg][hidden] { display: none; }
/* Pas de montant (champ vide ou refuse) : les cartes se mettent en retrait. */
.rt-carte.is-vide .rt-valeur, .rt-hero.is-vide .rt-hero-valeur { color: var(--muted); font-size: 1.05rem; font-weight: 500; font-family: var(--font-body); letter-spacing: 0; }

/* Pourquoi pas de classement */
.rt-classement {
  border: 1px solid var(--line-2); border-left: 3px solid var(--orange); border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255, 255, 255, 0.02); padding: clamp(1.1rem, 3vw, 1.6rem); max-width: 860px;
}
.rt-classement p { color: var(--muted); margin-top: 0.7rem; }
.rt-classement ul { list-style: disc; padding-left: 1.3rem; margin-top: 0.6rem; color: var(--muted); }
.rt-classement li + li { margin-top: 0.35rem; }
.rt-classement li::marker { color: var(--orange); }

/* Scenarios : de vrais boutons radio, habilles en pastilles. */
.rt-scen { max-width: 860px; }
.rt-scen-choix { border: 0; padding: 0; margin: 0; min-width: 0; }
.rt-scen-choix legend { padding: 0; margin-bottom: 0.6rem; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.rt-pastilles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rt-pastille { position: relative; }
.rt-pastille input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rt-pastille span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 64px; padding: 0.4rem 0.9rem;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono); font-size: 0.86rem; color: var(--text); transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.rt-pastille:hover span { border-color: var(--orange-line); color: var(--orange-2); }
.rt-pastille input:checked + span { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-2); font-weight: 600; box-shadow: 0 0 0 1px var(--orange); }
.rt-pastille input:focus-visible + span { outline: 2px solid var(--orange-2); outline-offset: 3px; }
@media (max-width: 700px) { .rt-pastille span { min-height: 44px; min-width: 58px; } }
.rt-scen-res { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-top: 1.2rem; }
.rt-scen-res > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.02); min-width: 0; }

/* Visualisation : un vrai tableau, les barres sont decoratives
   (aria-hidden) et doublees par le texte de chaque ligne. */
.rt-viz-cadre {
  border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface), var(--bg-2));
  padding: clamp(0.9rem, 3vw, 1.5rem); max-width: 980px;
}
.rt-viz-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.84rem; color: var(--muted); margin-bottom: 0.9rem; }
.rt-viz-legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.rt-viz-cle-pop { width: 0; height: 14px; border-left: 2px solid var(--text); }
.rt-viz-cle-toi { width: 14px; height: 6px; border-radius: 3px; background: var(--orange); }
.rt-viz { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rt-viz thead th {
  text-align: left; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted-2); padding: 0 0.6rem 0.5rem 0;
}
.rt-viz tbody th, .rt-viz tbody td { padding: 0.7rem 0.6rem 0.7rem 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.rt-viz tbody th { width: 30%; font-weight: 600; }
.rt-viz-montant { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rt-viz-toi { display: inline-block; margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--orange-2); letter-spacing: 0.04em; }
.rt-viz tr.is-toi th, .rt-viz tr.is-toi td { background: var(--orange-soft); }
.rt-viz tr.is-toi th { box-shadow: inset 3px 0 0 var(--orange); padding-left: 0.6rem; }
.rt-viz-valeur { font-size: 0.95rem; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.rt-viz-piste { position: relative; height: 12px; margin: 0.4rem 0; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.rt-viz-barre { height: 100%; border-radius: 6px; background: #8B8D95; }
.rt-viz tr.is-toi .rt-viz-barre { background: var(--orange); }
.rt-viz-repere { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--text); }
.rt-viz-cmp { font-size: 0.82rem; color: var(--muted); }
.rt-viz tfoot td { padding: 0 0.6rem 0 0; }
.rt-viz-axe { position: relative; height: 1.6rem; margin-top: 0.3rem; border-top: 1px solid var(--line-2); }
.rt-viz-graduation {
  position: absolute; top: 0.35rem; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted-2);
}
.rt-viz-graduation:first-child { transform: none; }
.rt-viz-graduation--pop { top: -0.45rem; height: 0.45rem; width: 0; border-left: 2px solid var(--text); transform: none; }
@media (max-width: 560px) {
  .rt-viz tbody th { width: 34%; }
  .rt-viz-graduation { font-size: 0.64rem; }
}

@media print {
  .cv-inverser, .cv-rapides, .cv-retry { display: none; }
  .cv { box-shadow: none; }
  .ic-curseur, .ic-actions, .ic-infobulle { display: none; }
  .rt-pastilles { display: none; }
}