/* Les calculateurs dans la DA daf. (BRIEF-MAQUETTE-21), pour les deux pilotes : burn-rate-runway.html et seuil-rentabilite.html, produits par
   outils/calculateurs.mjs depuis les originaux du site. Remplace leur feuille d'origine, classe par classe ; le code de calcul n'est pas touché.
   Sur le site : jetons de tokens.css (copie du design system, même dossier ; thème daf. sur <html>), police DM Sans auto-hébergée. Champs et boutons du design system ; résultats en cartes
   au style des aperçus trend. (blanc vers sauge, chiffres en sauge foncé) ; graphiques aux couleurs de la vague (prune).
   Seul, le calculateur se pose sur la crème ; dans sa carte (page /outils/:slug, :root[data-integre]), il prend le fond de la carte. */

/* ---------- Les noms de couleur de l'outil d'origine (styles en ligne, couleurs posées par le code) : ceux de la DA ---------- */
:root {
  --bg: var(--fond-page); --carte: var(--fond-champ); --ligne: var(--bordure-defaut); --ligne-fine: var(--bordure-defaut); --ligne-douce: var(--bordure-defaut);
  --noir: var(--p-prune-900); --encre: var(--texte-principal); --texte: var(--texte-secondaire); --gris: var(--texte-secondaire);
  --lime: var(--p-prune-450); --lime-fonce: var(--p-prune-700); --vert: var(--texte-succes); --rouge: var(--texte-erreur); --ambre: var(--p-prune-700);
  --sans: var(--police); --mono: var(--police); --gotham: var(--police);
  --text-data-sm: var(--taille-legende);
  /* Les états des résultats : bon, à surveiller, critique */
  --etat-bon: var(--p-foret-600); --etat-vigilance: var(--p-prune-700); --etat-critique: var(--texte-erreur);
  color-scheme: light;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--fond-page); }
body { font: var(--graisse-normale) 15px / 1.6 var(--police); color: var(--texte-principal); background: var(--fond-page); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
:root[data-integre], :root[data-integre] body { background: transparent; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus-epaisseur) solid var(--bordure-focus); outline-offset: 2px; }

/* Ce que la page du site ne montre pas dans la DA : la navigation par pastilles, la barre de progression */
.sidenav, .progress, .type-legend, .bloc-tag { display: none !important; }

/* ---------- Les étapes ---------- */
.deck { width: 100%; max-width: 1120px; margin: 0 auto; }
:root[data-integre] .deck { max-width: none; }
.slide { padding: var(--espace-800) var(--espace-600); }
:root[data-integre] .slide { padding: var(--espace-600); }
.slide + .slide { border-top: 1px solid var(--bordure-defaut); }
.eyebrow { display: flex; align-items: center; gap: var(--espace-150); margin-bottom: var(--espace-150); font-size: var(--taille-controle); font-weight: var(--graisse-moyenne); color: var(--p-prune-700); }
.eyebrow__n { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 var(--espace-100); border-radius: var(--rayon-controle);
  font-size: var(--taille-legende); font-weight: var(--graisse-grasse); color: var(--p-prune-700); background: var(--fond-bande); }
h1, h2 { font-weight: var(--graisse-moyenne); color: var(--texte-principal); text-wrap: balance; }
h2 { font-size: var(--taille-titre-2); line-height: 1.2; letter-spacing: -0.02em; margin-bottom: var(--espace-150); }
.lead { max-width: 720px; font-size: var(--taille-corps); line-height: 1.6; color: var(--texte-secondaire); text-wrap: pretty; }

/* ---------- Les grilles ---------- */
.g2, .g3, .g4 { display: grid; gap: var(--espace-200); margin-top: var(--espace-200); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Les blocs de saisie : des panneaux clairs sur la carte ---------- */
.bloc { margin-top: var(--espace-300); padding: var(--espace-400); border: 1px solid var(--bordure-defaut); border-radius: var(--rayon-carte); background: var(--fond-champ); }
.bloc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-150); flex-wrap: wrap; margin-bottom: var(--espace-200); }
.bloc-titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--espace-100) var(--espace-200); margin-bottom: var(--espace-200); font-size: 17px; font-weight: var(--graisse-moyenne); letter-spacing: -0.01em; color: var(--texte-principal); }
.bloc-head .bloc-titre { margin-bottom: 0; }
.bloc-titre .suff, #bd-cap { margin-left: 0 !important; font-size: var(--taille-controle) !important; font-weight: var(--graisse-normale) !important; color: var(--texte-secondaire) !important; letter-spacing: 0; }
.bloc-note, .bloc-sub { max-width: 760px; margin: 0 0 var(--espace-200); font-size: var(--taille-controle); line-height: 1.55; color: var(--texte-secondaire); }
/* Hors bloc (titres des résultats) */
.slide > .bloc-head { margin-top: var(--espace-600) !important; }

/* ---------- Les champs du design system ---------- */
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f label { display: block; font-size: var(--taille-controle); font-weight: var(--graisse-moyenne); line-height: 1.35; color: var(--texte-principal); }
.f label abbr { text-decoration: none; color: var(--texte-erreur); }
.facultatif, .suffixe { font-size: var(--taille-legende); font-weight: var(--graisse-normale); color: var(--texte-secondaire); }
.facultatif::before { content: " · "; }
input[type=text], input[type=number], input[type=date], select, textarea {
  width: 100%; min-height: var(--bouton-normal); padding: 10px 12px; border: 1px solid var(--bordure-champ); border-radius: var(--rayon-champ);
  background: var(--fond-champ); color: var(--texte-principal); font: var(--graisse-normale) var(--taille-corps) / 1.3 var(--police); outline: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color var(--duree-rapide) var(--courbe-douce), box-shadow var(--duree-rapide) var(--courbe-douce); }
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--texte-secondaire); opacity: 1; }
input[inputmode=numeric] { text-align: right; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { :is(input, select, textarea):hover:not(:focus, [readonly]) { border-color: var(--texte-secondaire); } }
:is(input, select, textarea):focus-visible { border-color: var(--bordure-focus); }
input[readonly] { background: var(--fond-bande); color: var(--texte-secondaire); border-color: var(--bordure-defaut); }
input[aria-invalid="true"] { border-color: var(--bordure-erreur); box-shadow: inset 0 0 0 1px var(--bordure-erreur); }
select { padding-right: 36px; cursor: pointer;
  background: var(--fond-champ) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23704572' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
/* Le message d'un montant mal saisi (calculateur-acces.js) */
.erreur-champ { font-size: var(--taille-legende); line-height: 1.4; color: var(--texte-erreur); }
/* Repères sectoriels indisponibles : le message sous le choix du secteur (calculateur-acces.js, tdmReperes) */
.reperes-echec { margin: var(--espace-100) 0 0; font-size: var(--taille-legende); line-height: 1.4; color: var(--texte-secondaire); }

/* ---------- Les pastilles : le choix du mode et la catégorie d'une charge (les filtres de la page Ressources) ---------- */
.mode-row, .cat-row { display: flex; flex-wrap: wrap; gap: var(--espace-100); }
.mode-row { margin: 0 0 var(--espace-300); }
.cat-row { margin-top: var(--espace-100); }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--espace-200); border: 1px solid var(--bordure-controle); border-radius: var(--rayon-controle);
  font-size: var(--taille-controle); font-weight: var(--graisse-moyenne); line-height: 1.2; white-space: nowrap; color: var(--texte-principal); background: transparent; cursor: pointer; user-select: none;
  transition: background-color var(--duree-rapide) var(--courbe-douce), color var(--duree-rapide) var(--courbe-douce), border-color var(--duree-rapide) var(--courbe-douce); }
.cat-row .pill { min-height: 30px; padding: 0 var(--espace-150); font-size: var(--taille-legende); }
@media (hover: hover) and (pointer: fine) { .pill:hover:not(.actif) { background: var(--fond-discret-survol); } }
.pill.actif { border-color: var(--fond-action-repos); color: var(--texte-sur-action); background: var(--fond-action-repos); }
td .pill { min-height: 26px; font-size: var(--taille-legende) !important; cursor: default !important; }

/* ---------- Les lignes de charges et de postes ---------- */
.ch-hdr, .ps-hdr, .pm-hdr { display: grid; gap: var(--espace-150); padding: 0 0 var(--espace-100); margin-bottom: var(--espace-050); border-bottom: 1px solid var(--bordure-controle); }
.ch-hdr, .ch-row { grid-template-columns: minmax(0, 1fr) 160px 32px; }
.ps-hdr, .ps-row { grid-template-columns: minmax(0, 1fr) 160px 78px 32px; }
.ch-hdr span, .ps-hdr span, .pm-hdr span { font-size: var(--taille-legende); font-weight: var(--graisse-moyenne); color: var(--texte-secondaire); text-align: right; }
:is(.ch-hdr, .ps-hdr, .pm-hdr) span:first-child { text-align: left; }
.ch-row, .ps-row { display: grid; gap: var(--espace-150); align-items: end; padding: var(--espace-200) 0; border-bottom: 1px solid var(--bordure-defaut); }
.ps-row { align-items: center; }
.ch-row:last-of-type, .ps-row:last-of-type { border-bottom: 0; }
.ch-row .f label { font-size: var(--taille-legende); color: var(--texte-secondaire); }
.nom-wrap { display: flex; flex-direction: column; gap: var(--espace-050); min-width: 0; }
.nom-input { width: 100%; min-height: 40px; padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid var(--bordure-controle) !important; border-radius: 0 !important; background: transparent !important;
  font: var(--graisse-moyenne) var(--taille-corps) / 1.3 var(--police) !important; color: var(--texte-principal); outline: none; box-shadow: none !important; }
.nom-input:focus-visible { border-bottom-color: var(--bordure-focus) !important; outline: var(--focus-epaisseur) solid var(--bordure-focus); outline-offset: 2px; }
.ps-pct { font-size: var(--taille-controle); color: var(--texte-secondaire); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-total-row, .ps-total-row { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--espace-200) var(--espace-600); padding-top: var(--espace-200); margin-top: var(--espace-050); border-top: 1px solid var(--bordure-controle); }
:is(.ch-total-row, .ps-total-row) .tl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
:is(.ch-total-row, .ps-total-row) .tl span { font-size: var(--taille-legende); color: var(--texte-secondaire); }
:is(.ch-total-row, .ps-total-row) .tl strong { font-size: 19px; font-weight: var(--graisse-grasse); letter-spacing: -0.02em; color: var(--texte-principal); }
.vide-msg { padding: var(--espace-200) 0; font-size: var(--taille-controle); color: var(--texte-secondaire); }

/* Le plan mensuel : défile dans son cadre sur écran étroit */
.pm-scroll { overflow-x: auto; }
.pm-inner { min-width: 560px; }
.pm-hdr, .pm-row { grid-template-columns: 90px 1fr 1fr 96px 116px; }
.pm-row { display: grid; gap: var(--espace-150); align-items: center; padding: var(--espace-100) 0; border-bottom: 1px solid var(--bordure-defaut); }
.pm-row:last-child { border-bottom: 0; }
.pm-mois { font-size: var(--taille-controle); font-weight: var(--graisse-moyenne); color: var(--texte-principal); }
.pm-mois small { display: block; font-size: var(--taille-legende); font-weight: var(--graisse-normale); color: var(--texte-secondaire); }
.pm-calc { font-size: var(--taille-controle); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Les boutons du design system ---------- */
.btn-lime, .btn-outline, .btn-print { display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-100); min-height: 40px; padding: 0 var(--espace-300);
  border: 1px solid var(--bordure-controle); border-radius: var(--rayon-controle); background: transparent; color: var(--texte-principal);
  font: var(--graisse-grasse) var(--taille-controle) / 1.2 var(--police); white-space: nowrap; cursor: pointer;
  transition: background-color var(--duree-rapide) var(--courbe-douce), transform var(--duree-rapide) var(--courbe-vive); }
.btn-outline { border-color: transparent; padding: 0 var(--espace-150); color: var(--texte-lien-repos); }
@media (hover: hover) and (pointer: fine) {
  :is(.btn-lime, .btn-print):hover { background: var(--fond-secondaire-survol); }
  .btn-outline:hover { background: var(--fond-discret-survol); }
}
:is(.btn-lime, .btn-outline, .btn-print):active { transform: scale(var(--appui-echelle)); background: var(--fond-secondaire-appuye); }
/* « Imprimer en PDF » : à sa place, en fin de calculateur ; plus de bouton flottant */
.btn-print { position: static; margin: 0 var(--espace-600) var(--espace-800); box-shadow: none; }
:root[data-integre] .btn-print { margin: 0 var(--espace-600) var(--espace-600); }
.btn-print svg { width: 16px; height: 16px; }
.btn-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--rayon-controle); background: transparent;
  color: var(--texte-secondaire); font: 400 20px / 1 var(--police); cursor: pointer; margin-bottom: 4px !important;
  transition: background-color var(--duree-rapide) var(--courbe-douce), color var(--duree-rapide) var(--courbe-douce); }
@media (hover: hover) and (pointer: fine) { .btn-x:hover { color: var(--texte-erreur); background: var(--fond-discret-survol); } }

/* ---------- Les résultats : les cartes des aperçus trend. ---------- */
.kpi-box { display: grid; align-content: start; gap: var(--espace-050); min-width: 0; padding: var(--espace-300); border-radius: var(--rayon-carte); color: var(--p-sauge-900);
  background: linear-gradient(180deg, var(--p-blanc) 40%, color-mix(in srgb, var(--p-sauge-100) 55%, var(--p-blanc)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--p-blanc) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--p-sauge-400) 70%, transparent),
    0 1px 1px color-mix(in srgb, var(--p-prune-900) 6%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--p-prune-900) 10%, transparent); }
.kpi-box .kl { font-size: var(--taille-legende); font-weight: var(--graisse-moyenne); line-height: 1.4; color: var(--p-sauge-700); }
.kpi-box .kv { font-size: 26px; font-weight: var(--graisse-moyenne); line-height: 1.15; letter-spacing: -0.03em; color: var(--p-sauge-900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-box .kv.good { color: var(--etat-bon); } .kpi-box .kv.warn { color: var(--etat-vigilance); } .kpi-box .kv.bad { color: var(--etat-critique); }
.kpi-box .ks { font-size: var(--taille-legende); line-height: 1.45; color: var(--p-sauge-700); }

/* Le diagnostic en une phrase : un filet de la couleur de l'état ; le pictogramme d'origine n'est pas repris */
.alert { display: none; gap: var(--espace-150); margin-top: var(--espace-300); padding: var(--espace-200) var(--espace-300); border-radius: var(--rayon-champ);
  border: 1px solid var(--bordure-defaut); border-left: 3px solid var(--_etat, var(--bordure-controle)); background: var(--fond-champ);
  font-size: var(--taille-controle); line-height: 1.55; color: var(--texte-principal); }
.alert.show { display: flex; }
.alert .ico { display: none; }
.alert.ok { --_etat: var(--etat-bon); } .alert.warn { --_etat: var(--etat-vigilance); } .alert.danger { --_etat: var(--etat-critique); }

.chips { gap: var(--espace-100) var(--espace-400); flex-wrap: wrap; margin-top: var(--espace-300); padding: var(--espace-150) var(--espace-300); border-radius: var(--rayon-champ); background: var(--fond-bande); }
.chips span { font-size: var(--taille-controle); color: var(--texte-secondaire); }
.chips b { font-weight: var(--graisse-grasse); color: var(--texte-principal); }

/* ---------- Les tableaux ---------- */
.tbl-wrap { margin-top: var(--espace-200); overflow-x: auto; border: 1px solid var(--bordure-defaut); border-radius: var(--rayon-champ); background: var(--fond-champ); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--taille-controle); font-variant-numeric: tabular-nums; }
table.data :is(th, td) { padding: var(--espace-100) var(--espace-200); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--bordure-defaut); }
table.data :is(th, td):first-child { text-align: left; }
table.data thead th { font-size: var(--taille-legende); font-weight: var(--graisse-moyenne); color: var(--texte-secondaire); background: var(--fond-bande); border-bottom-color: var(--bordure-controle); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tr:is(.sum, .actuel) td { background: var(--fond-bande); font-weight: var(--graisse-grasse); }
table.data tr.sum-dark td { background: var(--p-prune-800); color: var(--p-ivoire-050); font-weight: var(--graisse-grasse); }
table.data tr.sum-dark td:is(.t-pos, .t-neg) { color: var(--p-ivoire-050); }
.t-neg { color: var(--texte-erreur); } .t-pos { color: var(--texte-succes); }
.note-bas { max-width: 900px; margin-top: var(--espace-400); padding-top: var(--espace-200); border-top: 1px solid var(--bordure-defaut); font-size: var(--taille-controle); line-height: 1.6; color: var(--texte-secondaire); }

/* ---------- Les graphiques, aux couleurs de la vague ---------- */
/* Le code pose ses couleurs en attributs ; la feuille les remplace (une propriété CSS passe devant un attribut de présentation) */
.legend { display: flex; flex-wrap: wrap; gap: var(--espace-100) var(--espace-300); margin: var(--espace-100) 0; font-size: var(--taille-controle); color: var(--texte-secondaire); }
.legend i { display: inline-block; width: 18px; height: 3px; margin-right: var(--espace-100); vertical-align: middle; border-radius: 2px; }
.legend i[style*="--encre"] { background: var(--p-prune-500) !important; }
.legend i[style*="--vert"] { background: var(--p-prune-200) !important; }
.legend i[style*="--rouge"] { background: color-mix(in srgb, var(--texte-erreur) 45%, transparent) !important; }
#chartTreso, #chartSeuil { display: block; height: auto; overflow: visible; }
svg text { font-family: var(--police); }
svg [fill="#A8AEA8"], svg [fill="#8A938C"] { fill: var(--texte-secondaire); }
svg text[fill="#15201A"] { fill: var(--texte-principal); }
svg line[stroke="#ECECE8"] { stroke: var(--bordure-defaut); }
svg line[stroke="#15201A"] { stroke: var(--texte-secondaire); }
svg path[stroke="#15201A"] { stroke: var(--p-prune-500); stroke-width: 2.5; }
svg path[fill="rgba(46,125,91,0.15)"] { fill: var(--p-prune-200); fill-opacity: .7; }
svg path[fill="rgba(229,72,77,0.15)"] { fill: var(--texte-erreur); fill-opacity: .12; }
#chartTreso circle[fill="#2E7D5B"] { fill: var(--p-prune-700); }
#chartSeuil circle[fill="#2E7D5B"], #chartSeuil text[fill="#2E7D5B"] { fill: var(--texte-succes); }
svg [fill="#E5484D"] { fill: var(--texte-erreur); }
svg [stroke="#E5484D"] { stroke: var(--texte-erreur); }
svg [stroke="#fff"] { stroke: var(--fond-champ); }
svg line[stroke="#9DB511"] { stroke: var(--p-prune-500); }
svg circle[fill="#CDE32E"] { fill: var(--p-prune-450); }
svg circle[stroke="#15201A"] { stroke: var(--p-prune-900); }
svg line[stroke="#8A938C"] { stroke: var(--texte-secondaire); }
/* La palette du code des huit autres outils (BRIEF-MAQUETTE-22), quel que soit le graphique : cascades, barres, jauges, repères.
   Les règles des pilotes ci-dessus, plus précises, passent devant. */
svg :is(rect, circle, polygon, path)[fill="#15201A"] { fill: var(--p-prune-800); }
svg [fill="#2E7D5B"] { fill: var(--etat-bon); } svg [stroke="#2E7D5B"] { stroke: var(--etat-bon); }
svg [fill="#E0862E"] { fill: var(--etat-vigilance); } svg [stroke="#E0862E"] { stroke: var(--etat-vigilance); }
svg [fill="#9DB511"] { fill: var(--p-prune-700); } svg [stroke="#9DB511"] { stroke: var(--p-prune-500); }
svg [fill="#CDE32E"] { fill: var(--p-prune-450); } svg [fill="#4A580A"] { fill: var(--p-prune-800); }
svg [fill^="rgba(46,125,91"] { fill: var(--etat-bon); fill-opacity: .3; }
svg [fill^="rgba(229,72,77"] { fill: var(--etat-critique); fill-opacity: .22; }
svg [fill^="rgba(224,134,46"] { fill: var(--etat-vigilance); fill-opacity: .25; }
svg :is([fill^="rgba(205,227,46"], [fill^="rgba(157,181,17"]) { fill: var(--p-prune-450); fill-opacity: .3; }
svg [fill^="rgba(21,32,26"] { fill: var(--texte-principal); fill-opacity: .05; }
svg :is([stroke="#E7E7E2"], [stroke="#ECECE8"]) { stroke: var(--bordure-defaut); }
svg :is([fill="#E7E7E2"], [fill="#ECECE8"], [fill="#F1F1EC"]) { fill: var(--fond-bande); }
svg :is([stroke="#C7CBC4"], [stroke="#C9C9C2"], [stroke="#D7D7D0"], [stroke="#C9CDC6"], [stroke="#B6BBB4"], [stroke="#8A938C"]) { stroke: var(--bordure-controle); }
svg :is(rect, circle, path)[fill]:is([fill="#C7CBC4"], [fill="#C9C9C2"], [fill="#D7D7D0"], [fill="#C9CDC6"]) { fill: var(--bordure-controle); }
svg text:is([fill="#B6BBB4"], [fill="#6B756D"], [fill="#3C463F"]) { fill: var(--texte-secondaire); }
svg text[fill="#F2F4F0"] { fill: var(--p-ivoire-050); }
svg [fill="#fff"] { fill: var(--fond-champ); }
/* Les composants propres repris des outils (outils/regles-propres.mjs) : ce que leur palette d'origine laisse sous le seuil AA */
.ebitda-hero :is(.eh-label, .eh-formula) { color: color-mix(in srgb, var(--p-ivoire-050) 85%, transparent) !important; }
.ebitda-hero .eh-norm { color: var(--p-prune-200) !important; }
.decomp .step:last-child :is(.sv, .sl) { color: var(--p-ivoire-050) !important; }
:is(.lev .num, .lev .ln, .def-card .num) { background: var(--fond-bande) !important; color: var(--p-prune-700) !important; }
/* Les tailles écrites en style en ligne par les outils : jamais sous 12 px à l'écran (l'impression garde les siennes) */
:is(#deck, .page) :is([style*="font-size:8px"], [style*="font-size:9px"], [style*="font-size:9.5px"], [style*="font-size:10px"], [style*="font-size:10.5px"], [style*="font-size:11px"], [style*="font-size:11.5px"]) { font-size: var(--taille-legende) !important; }

/* Les zones de repère posées en style en ligne (barres de positionnement, légendes) */
[style*="background:rgba(229,72,77"] { background: color-mix(in srgb, var(--etat-critique) 25%, transparent) !important; }
[style*="background:rgba(224,134,46"] { background: color-mix(in srgb, var(--etat-vigilance) 25%, transparent) !important; }
[style*="background:rgba(46,125,91"] { background: color-mix(in srgb, var(--etat-bon) 30%, transparent) !important; }
:is([style*="background:rgba(205,227,46"], [style*="background:rgba(157,181,17"]) { background: color-mix(in srgb, var(--p-prune-450) 35%, transparent) !important; }

/* ---------- Écran étroit (la largeur du calculateur, dans sa carte comme seul) ---------- */
@media (max-width: 900px) {
  .slide, :root[data-integre] .slide { padding: var(--espace-600) var(--espace-300); }
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc { padding: var(--espace-300); }
  .ch-hdr, .ch-row { grid-template-columns: minmax(0, 1fr) 112px 32px; }
  .ps-hdr, .ps-row { grid-template-columns: minmax(0, 1fr) 112px 58px 32px; }
  .btn-print, :root[data-integre] .btn-print { margin: 0 var(--espace-300) var(--espace-600); }
  .kpi-box { padding: var(--espace-200); }
  .kpi-box .kv { font-size: 22px; }
}
/* Téléphone : la désignation du poste prend toute la ligne, le montant et ce qui l'accompagne passent dessous */
@media (max-width: 420px) {
  .g4 { grid-template-columns: minmax(0, 1fr); }
  .ch-hdr, .ch-row { grid-template-columns: minmax(0, 1fr) 32px; }
  .ps-hdr, .ps-row { grid-template-columns: minmax(0, 1fr) 64px 32px; }
  :is(.ch-hdr, .ps-hdr) span:first-child { display: none; }
  .ch-row .nom-wrap, .ps-row .nom-input { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =========================================================================================================================
   Le simulateur « Performance & devis » (tandem-performance-simulateur.html, BRIEF-MAQUETTE-22) : une autre construction (onglets, tableaux
   de saisie, devis). Sa feuille d'origine reste pour la disposition ; ici, ses variables passent aux jetons et ses composants à la DA,
   avec les partis des autres calculateurs : champs du design system, onglets comme les filtres, résultats en cartes trend., graphiques prune.
   Le bouton « Parler à un expert » est retiré du calculateur (le bouton fixe du site est le seul rendez-vous) ; « Imprimer » se pose en fin de page.
   ========================================================================================================================= */
:root[data-calculateur="simulateur"] {
  --ink: var(--texte-principal); --soft: var(--texte-secondaire); --accent: var(--p-prune-700); --accent-l: var(--fond-bande);
  --warn: var(--etat-vigilance); --warn-l: color-mix(in srgb, var(--etat-vigilance) 10%, var(--fond-champ));
  --bad: var(--etat-critique); --bad-l: color-mix(in srgb, var(--etat-critique) 8%, var(--fond-champ));
  --ok: var(--etat-bon); --ok-l: color-mix(in srgb, var(--etat-bon) 12%, var(--fond-champ)); --line: var(--bordure-defaut); --bg: var(--fond-page);
}
[data-calculateur="simulateur"] body { font: var(--graisse-normale) 15px / 1.55 var(--police); color: var(--texte-principal); background: var(--fond-page); }
[data-calculateur="simulateur"] .page { max-width: 1120px; padding: var(--espace-800) var(--espace-600); }
[data-calculateur="simulateur"][data-integre] .page { max-width: none; padding: var(--espace-600); }
[data-calculateur="simulateur"] header { border-bottom: 1px solid var(--bordure-defaut); padding-bottom: var(--espace-300); margin-bottom: var(--espace-300); }
[data-calculateur="simulateur"] .kicker { text-transform: none; letter-spacing: 0; font-size: var(--taille-controle); font-weight: var(--graisse-moyenne); color: var(--p-prune-700); }
[data-calculateur="simulateur"] h1 { margin: var(--espace-100) 0 var(--espace-200); font-size: var(--taille-titre-2); font-weight: var(--graisse-moyenne); letter-spacing: -0.02em; line-height: 1.2; }
[data-calculateur="simulateur"] h1 small { margin-top: var(--espace-100); font-size: var(--taille-corps); line-height: 1.55; color: var(--texte-secondaire); letter-spacing: 0; }
[data-calculateur="simulateur"] h2 { font-size: 19px; font-weight: var(--graisse-moyenne); letter-spacing: -0.01em; margin-bottom: var(--espace-100); }
[data-calculateur="simulateur"] h3 { font-size: var(--taille-corps) !important; font-weight: var(--graisse-moyenne); }
[data-calculateur="simulateur"] p.note, [data-calculateur="simulateur"] .note { font-size: var(--taille-controle); line-height: 1.55; color: var(--texte-secondaire); }

/* Les boutons du design system ; le rendez-vous du calculateur ne s'affiche pas */
[data-calculateur="simulateur"] .btn { display: inline-flex; align-items: center; gap: var(--espace-100); min-height: 40px; padding: 0 var(--espace-300); margin: var(--espace-100) var(--espace-100) 0 0;
  border: 1px solid var(--fond-action-repos); border-radius: var(--rayon-controle); background: var(--fond-action-repos); color: var(--texte-sur-action);
  font: var(--graisse-grasse) var(--taille-controle) / 1.2 var(--police); box-shadow: none; transition: background-color var(--duree-rapide) var(--courbe-douce), transform var(--duree-rapide) var(--courbe-vive); }
[data-calculateur="simulateur"] .btn.sec, [data-calculateur="simulateur"] .btn.print { border-color: var(--bordure-controle); background: transparent !important; color: var(--texte-principal) !important; }
@media (hover: hover) and (pointer: fine) { [data-calculateur="simulateur"] .btn:is(.sec, .print):hover { background: var(--fond-secondaire-survol) !important; } }
[data-calculateur="simulateur"] .btn:active { transform: scale(var(--appui-echelle)); }
[data-calculateur="simulateur"] .btn.del { min-height: 32px; padding: 0 var(--espace-100); margin: 0; border: 0; background: transparent; color: var(--texte-secondaire); font-size: 18px; }
@media (hover: hover) and (pointer: fine) { [data-calculateur="simulateur"] .btn.del:hover { color: var(--texte-erreur); background: var(--fond-discret-survol); } }
[data-calculateur="simulateur"] .fixed-actions { position: static; display: flex; justify-content: flex-start; margin-top: var(--espace-600); }
[data-calculateur="simulateur"] .fixed-actions .btn { box-shadow: none; padding: 0 var(--espace-300); }

/* Les résultats : les cartes des aperçus trend., comme les autres calculateurs */
[data-calculateur="simulateur"] .kpis { gap: var(--espace-200); }
[data-calculateur="simulateur"] .kpi { padding: var(--espace-200) var(--espace-300); border: 0; border-radius: var(--rayon-carte); color: var(--p-sauge-900);
  background: linear-gradient(180deg, var(--p-blanc) 40%, color-mix(in srgb, var(--p-sauge-100) 55%, var(--p-blanc)));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--p-blanc) 80%, transparent), 0 0 0 1px color-mix(in srgb, var(--p-sauge-400) 70%, transparent),
    0 1px 1px color-mix(in srgb, var(--p-prune-900) 6%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--p-prune-900) 10%, transparent); }
[data-calculateur="simulateur"] .kpi .lab { text-transform: none; letter-spacing: 0; font-size: var(--taille-legende); font-weight: var(--graisse-moyenne); color: var(--p-sauge-700); }
[data-calculateur="simulateur"] .kpi .val { font-size: 22px; font-weight: var(--graisse-moyenne); letter-spacing: -0.03em; color: var(--p-sauge-900); }
[data-calculateur="simulateur"] .kpi .sub { font-size: var(--taille-legende); color: var(--p-sauge-700); }
[data-calculateur="simulateur"] .kpi.hero { background: linear-gradient(180deg, var(--p-blanc) 10%, var(--p-sauge-200)); }
[data-calculateur="simulateur"] .kpi.hero .val { color: var(--p-foret-600); }

/* Les onglets : comme les filtres de la page Ressources ; le panneau, une carte claire */
[data-calculateur="simulateur"] .tabs { gap: var(--espace-100); margin: var(--espace-400) 0 var(--espace-200); }
[data-calculateur="simulateur"] .tab { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--espace-200); border: 1px solid var(--bordure-controle); border-radius: var(--rayon-controle);
  background: transparent; color: var(--texte-principal); font-size: var(--taille-controle); font-weight: var(--graisse-moyenne);
  transition: background-color var(--duree-rapide) var(--courbe-douce), color var(--duree-rapide) var(--courbe-douce); }
@media (hover: hover) and (pointer: fine) { [data-calculateur="simulateur"] .tab:hover:not(.active) { background: var(--fond-discret-survol); } }
[data-calculateur="simulateur"] .tab.active { border-color: var(--fond-action-repos); background: var(--fond-action-repos); color: var(--texte-sur-action); }
[data-calculateur="simulateur"] .panel { padding: var(--espace-400); border: 1px solid var(--bordure-defaut); border-radius: var(--rayon-carte); background: var(--fond-champ); overflow-x: auto; }

/* Les tableaux de saisie */
[data-calculateur="simulateur"] table { font-size: var(--taille-controle); }
[data-calculateur="simulateur"] th { padding: var(--espace-100) var(--espace-150); background: var(--fond-bande); color: var(--texte-secondaire); font-size: var(--taille-legende); font-weight: var(--graisse-moyenne); border-bottom: 1px solid var(--bordure-controle); }
[data-calculateur="simulateur"] th.colB { background: var(--p-prune-200); color: var(--texte-principal); }
[data-calculateur="simulateur"] .thgroup th { text-transform: none; letter-spacing: 0; font-size: var(--taille-legende); background: var(--fond-champ); color: var(--texte-secondaire); }
[data-calculateur="simulateur"] .thgroup th.gInt { background: var(--fond-bande); color: var(--p-prune-700); }
[data-calculateur="simulateur"] td { border-top-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] tr:nth-child(even) td { background: transparent; }
[data-calculateur="simulateur"] td.colI { background: var(--p-prune-050) !important; }
[data-calculateur="simulateur"] td.colI:first-of-type { border-left-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] td.colB { background: var(--fond-bande) !important; border-color: var(--bordure-controle); }
[data-calculateur="simulateur"] :is(input[type=text], input[type=number], select, textarea) { min-height: 40px; padding: 8px 10px; border: 1px solid var(--bordure-champ); border-radius: var(--rayon-champ);
  background: var(--fond-champ); color: var(--texte-principal); font: var(--graisse-normale) var(--taille-controle) / 1.3 var(--police); }
[data-calculateur="simulateur"] td :is(input[type=text], input[type=number], select) { min-height: 34px; border-color: transparent; background: transparent; }
[data-calculateur="simulateur"] td :is(input, select):is(:hover, :focus) { border-color: var(--bordure-controle); background: var(--fond-champ); }
[data-calculateur="simulateur"] :is(input, select, textarea):focus { outline: var(--focus-epaisseur) solid var(--bordure-focus); outline-offset: 1px; border-color: var(--bordure-focus); }
[data-calculateur="simulateur"] .field label { font-size: var(--taille-controle); font-weight: var(--graisse-moyenne); color: var(--texte-principal); }
[data-calculateur="simulateur"] .calc { color: var(--p-prune-700); }

/* Les cartes, les états, les formules */
[data-calculateur="simulateur"] .card { padding: var(--espace-300); border: 1px solid var(--bordure-defaut); border-radius: var(--rayon-carte); background: var(--fond-champ); }
[data-calculateur="simulateur"] .card.accent { background: var(--fond-bande); border-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] .card:is(.warn, .bad, .ok) { border-left: 3px solid var(--_etat); }
[data-calculateur="simulateur"] .card.warn { --_etat: var(--etat-vigilance); background: var(--fond-champ); border-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] .card.bad { --_etat: var(--etat-critique); background: var(--fond-champ); border-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] .card.ok { --_etat: var(--etat-bon); background: var(--fond-champ); border-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] .badge { font-size: var(--taille-legende); font-weight: var(--graisse-grasse); }
[data-calculateur="simulateur"] .b-ok { background: color-mix(in srgb, var(--etat-bon) 14%, var(--fond-champ)); color: var(--etat-bon); }
[data-calculateur="simulateur"] .b-warn { background: var(--fond-bande); color: var(--p-prune-700); }
[data-calculateur="simulateur"] .b-bad { background: color-mix(in srgb, var(--etat-critique) 10%, var(--fond-champ)); color: var(--etat-critique); }
[data-calculateur="simulateur"] .b-info { background: var(--fond-bande); color: var(--texte-principal); }
[data-calculateur="simulateur"] .bar { background: var(--bordure-defaut); }
[data-calculateur="simulateur"] .bar > div { background: var(--p-prune-500); }
[data-calculateur="simulateur"] .formula { font-family: var(--police); background: var(--fond-bande); border-left-color: var(--p-prune-500); }
[data-calculateur="simulateur"] .math { border-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] summary { color: var(--p-prune-700); }
[data-calculateur="simulateur"] .devis-box { background: var(--fond-champ); border-color: var(--bordure-defaut); }
[data-calculateur="simulateur"] .devis-box .lab { text-transform: none; letter-spacing: 0; font-size: var(--taille-legende); font-weight: var(--graisse-moyenne); }
[data-calculateur="simulateur"] #devisDoc h2 { letter-spacing: 0; }
[data-calculateur="simulateur"] .dot[style*="#ecc98b"] { background: var(--p-prune-450) !important; }
[data-calculateur="simulateur"] .dot[style*="#e9a3a3"] { background: color-mix(in srgb, var(--etat-critique) 55%, var(--fond-champ)) !important; }
[data-calculateur="simulateur"] .dot[style*="#93d1ae"] { background: color-mix(in srgb, var(--etat-bon) 55%, var(--fond-champ)) !important; }

/* Les graphiques du simulateur : sa palette (vert, rouge, piste, clair) vers la vague prune et les états */
[data-calculateur="simulateur"] .viz { --viz-dec: var(--p-prune-450); --viz-good: var(--etat-bon); --viz-bad: var(--etat-critique); --viz-track: var(--bordure-defaut);
  --viz-light: var(--p-prune-200); --viz-ink: var(--texte-principal); --viz-muted: var(--texte-secondaire); }
[data-calculateur="simulateur"] .viz .vlab { font-size: var(--taille-legende); }
[data-calculateur="simulateur"] svg [fill="#0d5c4f"] { fill: var(--p-prune-700); } [data-calculateur="simulateur"] svg [stroke="#0d5c4f"] { stroke: var(--p-prune-700); }
[data-calculateur="simulateur"] svg [fill="#4a9384"] { fill: var(--p-prune-450); } [data-calculateur="simulateur"] svg [stroke="#4a9384"] { stroke: var(--p-prune-450); }
[data-calculateur="simulateur"] svg [fill="#8fbdb2"] { fill: var(--p-prune-200); }
[data-calculateur="simulateur"] svg [fill="#dfece8"] { fill: var(--p-prune-100); }
[data-calculateur="simulateur"] svg :is([fill="#c3c2b7"], [fill="#e1e0d9"]) { fill: var(--bordure-defaut); } [data-calculateur="simulateur"] svg [stroke="#c3c2b7"] { stroke: var(--bordure-controle); }
[data-calculateur="simulateur"] svg [fill="#c05a55"] { fill: var(--etat-critique); } [data-calculateur="simulateur"] svg [fill="#e9a3a3"] { fill: color-mix(in srgb, var(--etat-critique) 35%, var(--fond-champ)); }
[data-calculateur="simulateur"] svg [fill="#f7e6e5"] { fill: color-mix(in srgb, var(--etat-critique) 10%, var(--fond-champ)); }
[data-calculateur="simulateur"] svg [fill="#ecc98b"] { fill: var(--p-prune-300); } [data-calculateur="simulateur"] svg [fill="#f8eedb"] { fill: var(--p-prune-100); }
[data-calculateur="simulateur"] svg [fill="#93d1ae"] { fill: color-mix(in srgb, var(--etat-bon) 40%, var(--fond-champ)); }
[data-calculateur="simulateur"] svg text[fill="#898781"] { fill: var(--texte-secondaire); }
@media (max-width: 760px) {
  [data-calculateur="simulateur"] .page, [data-calculateur="simulateur"][data-integre] .page { padding: var(--espace-400) var(--espace-300); }
  [data-calculateur="simulateur"] .panel { padding: var(--espace-300) var(--espace-200); }
}