/* ==========================================================================
   THE ICON MARKETING : page outil « Ce que la publicité peut me rapporter »
   Chargée APRÈS style.css et service.css, dont elle reprend les tokens, la
   grille, les boutons et les champs de formulaire (.field, .form-row).
   Aucune règle des deux autres feuilles n'est modifiée : tout ce qui suit est
   soit une classe nouvelle, soit une surcharge portée par body.page-tool.

   La page réutilise le gabarit des pages « Digital » (body.page-service) :
   même en-tête, même pied de page. Ce qui change tient en deux points : il
   n'y a pas de hero, et la page entière est un outil.
   ========================================================================== */

body.page-tool {
  --calc-line: rgba(191, 192, 199, 0.14);
}

/* ==========================================================================
   TITRE DE PAGE
   Pas de hero : la page ne sert que l'outil, et un hero le pousserait sous la
   ligne de flottaison. Deux lignes au-dessus des champs suffisent à situer.
   ========================================================================== */
.calc { padding-top: var(--page-top); }
.calc-top { margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.calc-top .svc-crumb { margin-bottom: 1.1rem; }
.calc-h1 {
  max-width: 18ch;
}
.calc-h1 .hl { color: var(--champagne); }
.calc-sub { margin-top: 0.9rem; color: var(--silver); font-size: 0.95rem; max-width: 52ch; }

/* ==========================================================================
   LE CALCULATEUR
   ========================================================================== */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* ---------- Les saisies ----------
   Carte blanche posée sur l'onyx de la section. C'est le seul bloc clair de
   la page, et c'est voulu : il désigne l'endroit où l'on agit. Tout ce qui
   suit (labels, champs, aide) inverse donc les couleurs du reste du fichier.
   ========================================================================== */
.calc-inputs {
  background: var(--white);
  color: var(--onyx);
  border-radius: var(--card-radius);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.calc-card-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-light);
  width: 100%;
}

/* Deux colonnes : quatre questions courtes tiennent en deux rangs, et la
   carte reste dans le premier écran. Le cinquième champ, l'estimation, prend
   toute la largeur en dessous : c'est le seul qui a besoin d'être lu. */
.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem clamp(1rem, 2.5vw, 1.8rem);
}
.roi-field { border: 0; }

/* ---------- Le champ à part : la seule inconnue ----------
   Les quatre premiers champs demandent des chiffres que le dirigeant connaît.
   Celui-ci demande une estimation, et l'outil ne doit pas faire semblant du
   contraire : filet champagne, fond légèrement retiré, étiquette qui le dit.
   Sans cette distinction, un visiteur croit avoir déclaré cinq faits alors
   qu'il en a supposé un, et c'est celui qui décide de tout le résultat. */
.roi-field-guess {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--paper);
  border-left: 2px solid var(--champagne);
  border-radius: 0 2px 2px 0;
}
.roi-field-guess .roi-input { background: var(--white); }
.roi-guess-tag {
  display: block;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 0.45rem;
}
.roi-field-guess .roi-help { max-width: 62ch; }
.roi-field-guess .roi-help b { color: var(--onyx); font-weight: 700; }
.roi-field > label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.45rem;
  color: var(--onyx);
}
.roi-help {
  margin-top: 0.4rem;
  color: var(--steel);
  font-size: 0.72rem;
  line-height: 1.45;
}

/* Champ et unité forment un seul objet. L'unité est grande et lisible : sur
   un formulaire chiffré, savoir si l'on saisit des euros ou des pourcents
   compte autant que la valeur elle-même. */
.roi-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.roi-input:focus-within { border-color: var(--onyx); background: var(--white); }
.roi-num {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--onyx);
  background: none;
  border: 0;
  padding: 0.6rem 0.75rem;
  width: 100%;
}
.roi-num:focus { outline: none; }
/* Les flèches natives rétrécissent le champ et n'ont aucun intérêt ici. */
.roi-num::-webkit-outer-spin-button,
.roi-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi-num[type=number] { -moz-appearance: textfield; appearance: textfield; }

.roi-suffix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 0.8rem;
  border-left: 1px solid var(--line-light);
  background: var(--white);
  color: var(--onyx);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.calc-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-light);
}
.calc-actions .btn { flex-shrink: 0; }
.roi-reset {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-light);
  padding: 0 0 3px;
  color: var(--steel);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.roi-reset:hover { color: var(--onyx); border-bottom-color: var(--onyx); }

/* ==========================================================================
   RÉSULTATS, APRÈS LE CALCUL
   ========================================================================== */
.calc-results { position: sticky; top: 6.5rem; display: grid; gap: 1.2rem; }

.roi-preview {
  background: var(--anthracite);
  border: 1px solid var(--calc-line);
  border-radius: var(--card-radius);
  padding: 1.5rem 1.4rem 1.6rem;
  /* --steel sur anthracite tombe à 3,4:1, sous le seuil AA de 4,5:1 : même
     surcharge que .dark dans style.css, répétée ici car ce n'est pas la
     même teinte de fond sombre. */
  --steel: var(--silver-dark);
}

/* Le verdict est la première chose lue : il tranche, en un mot. */
.roi-verdict { padding-bottom: 1.2rem; border-bottom: 1px solid var(--calc-line); margin-bottom: 1.2rem; }
.roi-verdict-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 0.25rem 0.6rem;
  margin-bottom: 0.7rem;
  background: var(--champagne);
  color: var(--onyx);
}
.roi-verdict-line { font-size: 0.92rem; line-height: 1.5; color: var(--silver-light); }
/* Trois états, trois traitements. Le rouge n'est pas dans la charte : il est
   introduit ici, et nulle part ailleurs, parce qu'un verdict de perte ne peut
   pas se dire en champagne. */
.roi-verdict[data-state="edge"] .roi-verdict-tag { background: var(--silver); }
.roi-verdict[data-state="bad"] .roi-verdict-tag { background: #C86F5A; color: var(--white); }

.roi-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--calc-line); border: 1px solid var(--calc-line); border-radius: 2px; overflow: hidden; }
.roi-kpis > div { background: var(--anthracite); padding: 0.85rem 0.9rem; }
.roi-kpis dt {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
  line-height: 1.35;
}
.roi-kpis dd { display: flex; align-items: baseline; gap: 0.35rem; }
.roi-kpis b {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.roi-kpis dd span { color: var(--steel); font-size: 0.58rem; letter-spacing: 0.08em; }

/* La jauge : coût d'acquisition rapporté au plafond que le visiteur vient
   lui-même de saisir (sa marge brute par client). Aucune moyenne de marché
   n'intervient, et c'est voulu : un repère inventé se retiendrait mieux que
   le sien, et ce serait le problème. */
.roi-gauge { margin-top: 1.2rem; }
.roi-gauge-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--steel);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.roi-gauge-head b { color: var(--silver-light); font-variant-numeric: tabular-nums; }
.roi-gauge-track {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.roi-gauge-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--champagne);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
}
/* Le trait du plafond tombe aux trois quarts de la piste : la jauge garde
   ainsi un quart de course visible au-delà, sinon un dépassement se lirait
   comme un remplissage complet. */
.roi-gauge-mark { position: absolute; top: 0; bottom: 0; left: 75%; width: 1px; background: var(--silver); opacity: 0.75; }
.roi-gauge[data-over="1"] .roi-gauge-fill { background: #C86F5A; }
.roi-gauge-note { margin-top: 0.55rem; color: var(--steel); font-size: 0.72rem; line-height: 1.5; }

/* ==========================================================================
   AVANT LE CALCUL
   L'aperçu ne montre rien tant que le calcul n'a pas été demandé : afficher
   des nombres en attendant reviendrait à mentir sur ce qui est déjà calculé.

   Une version précédente posait ici six barres floutées, héritées du temps où
   ce panneau était un verrou masquant un résultat déjà calculé. Le flou disait
   « il y a quelque chose dessous ». Ce n'est plus vrai : rien n'est calculé
   avant le clic, et un flou qui ne cache rien promet un contenu qui n'existe
   pas. Ne pas le remettre.
   ========================================================================== */
.roi-intro { position: relative; }
.roi-intro[hidden] { display: none; }
.roi-intro-card {
  position: relative;
  background: var(--anthracite);
  --steel: var(--silver-dark);
  border: 1px solid var(--calc-line);
  border-radius: var(--card-radius);
  padding: 1.5rem 1.4rem 1.6rem;
}
/* Filet champagne en tête de carte : le même repère visuel que la carte de
   preuve du hero des pages de service. */
.roi-intro-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--champagne);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.roi-lock-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--champagne);
  border-radius: 2px;
  padding: 0.22rem 0.55rem;
  margin-bottom: 1rem;
}
.roi-lock-list { border-top: 1px solid var(--calc-line); }
/* Une ligne, un filet. Pas de puce devant : la liste annonce trois résultats,
   elle n'a pas besoin d'un signe de plus pour se lire. */
.roi-lock-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--calc-line);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--silver-light);
}
.roi-intro-foot { margin-top: 1.1rem; color: var(--steel); font-size: 0.78rem; line-height: 1.6; }

/* Les saisies ont bougé depuis le dernier calcul. */
.roi-stale {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--calc-line);
  color: var(--champagne);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.roi-stale[hidden] { display: none; }
.roi-preview[hidden] { display: none; }

/* ==========================================================================
   LA FENÊTRE DE CAPTURE
   <dialog> natif : focus capturé, fermeture à Échap et voile d'arrière-plan
   sont gérés par le navigateur. Ne rien réimplémenter par-dessus.
   ========================================================================== */
.roi-modal {
  /* Le reset global (*, margin: 0) écrase le margin: auto que le navigateur
     pose sur <dialog> : sans ces deux lignes, la fenêtre se colle en haut à
     gauche de l'écran au lieu d'être centrée. */
  inset: 0;
  margin: auto;
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  overflow: visible;
}
.roi-modal::backdrop {
  background: rgba(6, 6, 6, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.roi-modal[open] { animation: roi-modal-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes roi-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.roi-modal-card {
  position: relative;
  background: var(--anthracite);
  --steel: var(--silver-dark);
  border: 1px solid var(--calc-line);
  border-top: 2px solid var(--champagne);
  border-radius: var(--card-radius);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
/* Le signe est un plus tourné, comme le réticule et l'accordéon de la FAQ :
   la croix de fermeture n'a pas besoin d'un glyphe à elle. */
.roi-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transform: rotate(45deg);
  transition: color 0.25s ease;
}
.roi-modal-close:hover { color: var(--champagne); }
.roi-modal-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--champagne);
  border-radius: 2px;
  padding: 0.22rem 0.55rem;
  margin-bottom: 1rem;
}
.roi-modal-title {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 0.7rem;
}
.roi-modal-lede { color: var(--silver); font-size: 0.92rem; line-height: 1.6; max-width: 46ch; margin-bottom: 1.6rem; }
.roi-opt { color: var(--steel); font-size: 0.55rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.roi-modal-privacy {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--calc-line);
  color: var(--steel);
  font-size: 0.66rem;
  line-height: 1.6;
}

/* ==========================================================================
   L'ANALYSE
   Hors de la grille, sur toute la largeur : le tableau avant / après a besoin
   de ses quatre colonnes.
   ========================================================================== */
.roi-report { margin-top: clamp(2.5rem, 5vw, 4rem); }
.roi-report[hidden] { display: none; }
.roi-report.is-in { animation: roi-unveil 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes roi-unveil {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.roi-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--champagne);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.roi-report-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
}
.roi-print {
  background: none;
  border: 1px solid var(--calc-line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  color: var(--silver);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.roi-print:hover { color: var(--champagne); border-color: var(--champagne); }

.roi-block { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.roi-block:last-of-type { margin-bottom: 2rem; }
.roi-block-title {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}
.roi-figs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--calc-line);
  border: 1px solid var(--calc-line);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.roi-figs > div { background: var(--anthracite); --steel: var(--silver-dark); padding: 1.1rem 1.1rem 1.2rem; }
.roi-figs dt {
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
  line-height: 1.35;
}
.roi-figs dd {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.roi-fig-strong { color: var(--champagne); }

.roi-note {
  margin-top: 1rem;
  color: var(--steel);
  font-size: 0.68rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  max-width: 88ch;
}

/* ---------- Les trois leviers ----------
   Trois lignes, une seule unité : des euros de marge par mois. La barre
   compare chaque gain au meilleur des trois, pas à une échelle absolue :
   c'est le rapport entre les leviers qui décide de celui qu'on actionne. */
.roi-levers { border-top: 1px solid var(--calc-line); }
.roi-levers li {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  padding: 1.05rem 0.3rem;
  border-bottom: 1px solid var(--calc-line);
}
.roi-levers .lv-name { font-size: 0.95rem; font-weight: 700; }
/* display: block indispensable : .lv-bar est un <span>, donc inline par
   défaut, et sa hauteur de 6px serait ignorée. */
.roi-levers .lv-bar {
  display: block;
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.roi-levers .lv-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  background: var(--champagne);
  border-radius: 999px;
  transform-origin: 0 50%;
  animation: lv-grow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes lv-grow { from { transform: scaleX(0); } to { transform: none; } }
.roi-levers .lv-gain {
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
/* Le premier de la liste est celui qu'on actionne : seul son montant est en
   clair, le classement se lit sans avoir à comparer les barres. */
.roi-levers li:first-child .lv-gain { color: var(--champagne); }

/* ---------- Le diagnostic ----------
   La partie qui justifie l'outil : un calculateur rend des nombres, celui-ci
   nomme le maillon à réparer et donne les trois gestes. */
.roi-diag {
  background: var(--anthracite);
  --steel: var(--silver-dark);
  border: 1px solid var(--calc-line);
  border-left: 2px solid var(--champagne);
  border-radius: var(--card-radius);
  padding: 1.6rem 1.6rem 1.7rem;
}
.roi-diag-tag {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onyx);
  background: var(--champagne);
  border-radius: 2px;
  padding: 0.22rem 0.6rem;
  margin-bottom: 1rem;
}
.roi-diag-line {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 70ch;
  margin-bottom: 1.5rem;
}
.roi-diag-line b { font-weight: 800; }
.roi-actions { counter-reset: ac; border-top: 1px solid var(--calc-line); }
/* Retrait négatif plutôt qu'une grille : la ligne mêle un <b> et du texte
   courant, et une grille en ferait deux cellules distinctes, l'une sous
   l'autre. Ici le numéro sort dans la marge et la phrase reste d'un bloc. */
.roi-actions li {
  counter-increment: ac;
  position: relative;
  padding: 0.95rem 0 0.95rem 2.6rem;
  border-bottom: 1px solid var(--calc-line);
  color: var(--silver-light);
  font-size: 0.92rem;
  line-height: 1.55;
}
.roi-actions li::before {
  content: '0' counter(ac);
  position: absolute;
  left: 0;
  top: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--champagne);
}
.roi-actions b { color: var(--white); font-weight: 700; }

/* ---------- Rappel des hypothèses ----------
   Sur la version imprimée, un tableau de résultats sans ses entrées ne vaut
   rien : c'est ce bloc qui rend le PDF relisible dans six mois. */
.roi-recap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--calc-line);
  border: 1px solid var(--calc-line);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.roi-recap > div {
  background: var(--anthracite);
  --steel: var(--silver-dark);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.72rem 0.95rem;
}
.roi-recap dt { color: var(--steel); font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.roi-recap dd { font-weight: 700; font-size: 0.84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.roi-report-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  flex-wrap: wrap;
  padding-top: 1.8rem;
  border-top: 1px solid var(--calc-line);
}
.roi-report-cta p { color: var(--silver); font-size: 0.92rem; line-height: 1.6; max-width: 62ch; }
.roi-report-cta .btn { flex-shrink: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  /* La colonne de résultats cesse d'être collante : empilée, elle suivrait
     le défilement en masquant les champs qu'elle est censée refléter. */
  .calc-grid { grid-template-columns: 1fr; }
  .calc-results { position: static; }
  /* service.css réserve 4,5 rem sous les mentions pour la barre d'action
     collante des pages de service. Cette page n'en a pas : elle récupère sa
     marge normale. */
  body.page-tool .footer-legal { padding-bottom: 1.2rem; }
  .roi-figs { grid-template-columns: repeat(2, 1fr); }
  .roi-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .roi-report-cta { flex-direction: column; align-items: flex-start; }
  /* La barre n'a plus la place d'être lisible : le nom et le gain suffisent,
     le classement reste porté par l'ordre des lignes. */
  .roi-levers li { grid-template-columns: minmax(0, 1fr) auto; }
  .roi-levers .lv-bar { display: none; }
}

@media (max-width: 520px) {
  .calc-fields { grid-template-columns: 1fr; }
  .calc-actions { flex-direction: column-reverse; align-items: stretch; }
  .calc-actions .btn { justify-content: center; }
  .roi-kpis, .roi-figs, .roi-recap { grid-template-columns: 1fr; }
  .roi-recap > div { flex-direction: column; gap: 0.15rem; }
  .roi-recap dd { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .roi-report.is-in { animation: none; }
  .roi-levers .lv-bar i { animation: none; }
  .roi-modal[open] { animation: none; }
  .roi-gauge-fill { transition: none; }
}

/* ==========================================================================
   IMPRESSION
   Le bouton « Enregistrer en PDF » n'ouvre pas un fichier : il imprime cette
   feuille. L'analyse devient alors un document noir sur blanc, avec ses
   hypothèses, qu'un dirigeant peut poser sur une table. C'est le livrable de
   l'outil, il mérite d'être mis en pages.
   ========================================================================== */
@media print {
  @page { margin: 14mm; }

  /* Tout ce qui sert à naviguer ou à convertir sort de la page imprimée. */
  .header, .drawer, .scroll-progress, .cursor-ring, .footer,
  .calc-top, .calc-inputs, .roi-intro, .roi-modal, .roi-stale,
  .roi-print, .roi-report-cta { display: none !important; }

  body, body.page-tool { background: #fff !important; color: #000 !important; }
  .calc, .section.dark { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .calc-grid { display: block !important; }
  .calc-results { position: static !important; display: block !important; }

  /* En-tête du document : sans elle, la page imprimée ne dit pas d'où elle
     vient ni ce qu'elle mesure. Le texte vient de data-print-head sur
     .roi-report : deux outils partagent cette feuille, chacun imprime son
     propre titre. */
  .roi-report::before {
    content: attr(data-print-head);
    display: block;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: 6pt;
    border-bottom: 1pt solid #000;
    margin-bottom: 14pt;
  }
  .roi-report { display: block !important; margin: 0 !important; }
  .roi-report-head { display: none !important; }

  .roi-preview, .roi-diag, .roi-figs > div, .roi-recap > div,
  .roi-kpis > div {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
  .roi-preview { margin-bottom: 14pt; page-break-inside: avoid; }
  .roi-block { page-break-inside: avoid; margin-bottom: 14pt !important; }
  .roi-verdict-tag, .roi-diag-tag {
    background: transparent !important;
    color: #000 !important;
    border: 1pt solid #000;
  }
  .roi-block-title, .roi-diag-line, .roi-figs dd, .roi-kpis b, .roi-actions b { color: #000 !important; }
  .roi-note, .roi-actions li, .roi-verdict-line, .roi-gauge-note,
  .roi-figs dt, .roi-kpis dt, .roi-recap dt { color: #333 !important; }
  .roi-recap dd, .roi-fig-strong { color: #000 !important; }
  .roi-gauge-fill { background: #000 !important; }
  .roi-levers li { border-bottom-color: #999 !important; }
  .roi-levers .lv-name, .roi-levers .lv-gain,
  .roi-levers li:first-child .lv-gain { color: #000 !important; }
  .roi-levers .lv-bar { background: #ddd !important; }
  .roi-levers .lv-bar i { background: #000 !important; animation: none !important; }

  /* Mention de bas de document : une analyse imprimée circule, elle doit
     porter avec elle ce qu'elle est. */
  .roi-report::after {
    content: attr(data-print-foot);
    display: block;
    padding-top: 8pt;
    border-top: 1pt solid #999;
    font-size: 7.5pt;
    line-height: 1.5;
    color: #555;
  }
}