/* ============================================================
   NTROPYX · Simulateurs — feuille commune aux 4 langues, 27.10.2026.
   Autonome, entierement prefixee .sim- : elle ne redefinit aucune
   regle de styles.css (en-tete, pied et navigation du site gardes).
   Aucune contre-regle, aucun marqueur de priorite forcee.
   Valeurs Apple mesurees : configurateur d'achat de l'iPhone 18 Pro
   (27.10.2026) et audit du site du 26.10.2026.
   ============================================================ */

.sim-local,
.sim {
  --sim-noir: #000;
  --sim-encre: #1d1d1f;
  --sim-encre-2: #6e6e73;          /* texte secondaire, 5,1:1 sur blanc */
  --sim-gris: #86868b;             /* questions grises en 24 px, marques ; 3,5:1 sur blanc */
  --sim-clair: #f5f5f7;
  --sim-clair-2: #a1a1a6;          /* texte secondaire sur noir, 7,9:1 */
  --sim-blanc: #fff;
  --sim-fond: #f5f5f7;
  --sim-piste: #e8e8ed;
  --sim-trait: #d2d2d7;
  --sim-trait-noir: #424245;
  --sim-tuile-noire: #1d1d1f;
  --sim-bleu: #0071e3;
  --sim-bleu-survol: #0077ed;
  --sim-bleu-lien: #0066cc;
  --sim-bleu-nuit: #2997ff;
  --sim-perte: #e34948;            /* marques de perte (grille), jamais du texte */
  --sim-erreur: #d70015;           /* texte d'erreur, 5,6:1 sur blanc */
  --sim-attention: #b25000;        /* texte « au-dela du banc », 5,2:1 sur blanc */
  --sim-erreur-nuit: #ff453a;      /* texte d'erreur sur noir (rouge systeme Apple, sombre) */
  /* Chiffres spectacle : couleurs systeme Apple, variantes sombres, une par sens */
  --sim-sys-bleu: #0a84ff;
  --sim-sys-cyan: #64d2ff;
  --sim-sys-vert: #30d158;
  --sim-sys-menthe: #66d4cf;
  --sim-sys-orange: #ff9f0a;
  --sim-sys-jaune: #ffd60a;
  --sim-degrade-gain: linear-gradient(92deg, #64d2ff 0%, #0a84ff 55%, #5e8bff 100%);
  /* Matiere : verre clair sur noir, jamais pose sur un autre verre (Apple §12) */
  --sim-verre: rgba(255, 255, 255, .06);
  --sim-verre-bord: rgba(255, 255, 255, .12);
  --sim-nuit: #0a0c11;
  --sim-courbe-sortie: cubic-bezier(.23, 1, .32, 1);
  --sim-r-tuile: 28px;
  --sim-r-carte: 18px;
  --sim-r-champ: 12px;
  --sim-r-pilule: 980px;
  --sim-courbe: cubic-bezier(.4, 0, .6, 1);
  --sim-duree: .32s;
  --sim-marge: max(6.25%, calc((100% - 1260px) / 2));
  --sim-section: 144px;
  --sim-local-h: 52px;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 734px) {
  .sim-local,
  .sim { --sim-section: 112px; }
}

.sim *,
.sim *::before,
.sim *::after { box-sizing: border-box; }
.sim [hidden] { display: none; }
/* Ancres (barre locale, « Faire mon calcul », « Detail ») : la cible s'arrete sous la barre collee. */
.sim > section[id],
.sim-resultat { scroll-margin-top: calc(var(--sim-local-h) + 24px); }

.sim a:focus-visible,
.sim button:focus-visible,
.sim td:focus-visible,
.sim-local a:focus-visible {
  outline: 2px solid var(--sim-bleu);
  outline-offset: 2px;
}

/* ---- Barre locale : collee en haut, matiere claire (l'en-tete du site part au defilement) ---- */
.sim-local {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(251, 251, 253, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16);
}
.sim-local__rang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--sim-local-h);
  padding: 0 var(--sim-marge);
}
.sim-local__titre {
  margin: 0;
  color: var(--sim-encre);
  font: 600 21px/1.14 var(--font);
  letter-spacing: .231px;
  white-space: nowrap;
}
.sim-local__liste {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.sim-local__liste::-webkit-scrollbar { display: none; }
/* Chaque lien garde sa largeur : sur mobile la liste defile au lieu de chevaucher. */
.sim-local__liste li { flex: none; }
.sim-local__liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--sim-encre);
  font-size: 12px;
  letter-spacing: -.12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--sim-duree) var(--sim-courbe);
}
.sim-local__liste a:hover { color: var(--sim-bleu-lien); }
.sim-local__liste a[aria-current="true"] { color: var(--sim-encre-2); }

/* ---- Hero vivant (decisions 21, 22) ---- */
.sim-hero {
  padding: 120px var(--sim-marge) var(--sim-section);
  background: radial-gradient(120% 80% at 50% 0%, #10131a 0%, var(--sim-noir) 60%);
  color: var(--sim-clair);
  text-align: center;
}
.sim-hero__titre {
  margin: 0;
  font: 600 80px/84px var(--font);
  letter-spacing: -1.2px;
  text-wrap: balance;
}
.sim-hero__sous {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--sim-clair-2);
  font: 400 21px/1.38 var(--font);
  letter-spacing: .231px;
}
.sim-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 0 40px;
  max-width: 820px;
  margin: 64px auto 0;
  padding: 36px 44px 40px;
  border: 1px solid var(--sim-verre-bord);
  border-radius: var(--sim-r-tuile);
  background: var(--sim-verre);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 30px 80px rgba(0, 0, 0, .6);
  text-align: left;
}
/* Halo discret derriere le chiffre : il s'allume quand l'exemple joue, une seule fois.
   Conteneur : le chiffre suit la largeur de sa colonne, a toutes les largeurs d'ecran. */
.sim-demo > div:first-child { position: relative; isolation: isolate; container-type: inline-size; }
.sim-demo > div:first-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -10%;
  background: radial-gradient(closest-side, rgba(10, 132, 255, .28), rgba(10, 132, 255, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--sim-courbe-sortie);
}
.sim-demo.est-joue > div:first-child::before { opacity: 1; }
.sim-demo__tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--sim-trait-noir);
  border-radius: var(--sim-r-pilule);
  color: var(--sim-clair-2);
  font-size: 12px;
  letter-spacing: -.12px;
}
.sim-demo__chiffre {
  margin: 18px 0 10px;
  background: var(--sim-degrade-gain);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 600 min(80px, 20cqi)/1 var(--font);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sim-demo__lib {
  margin: 0;
  color: var(--sim-clair-2);
  font-size: 17px;
  letter-spacing: -.374px;
}
.sim-demo__barre {
  display: flex;
  gap: 2px;
  height: 20px;
  margin-top: 28px;
}
.sim-demo__barre i {
  display: block;
  width: var(--part);
  height: 100%;
  transform-origin: left center;
}
.sim-demo__cout { border-radius: 4px 0 0 4px; background: var(--sim-gris); }
.sim-demo__gain { border-radius: 0 4px 4px 0; background: var(--sim-bleu); }
.sim-demo__rep {
  margin: 0;
  color: var(--sim-clair-2);
  font-size: 14px;
  letter-spacing: -.224px;
}
.sim-demo__rep div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--sim-trait-noir);
}
.sim-demo__rep dt,
.sim-demo__rep dd { margin: 0; }
.sim-demo__rep dd {
  color: var(--sim-clair);
  font-weight: 600;
  text-align: right;
}
.sim-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 48px 0 0;
}
/* Etat de depart de l'animation : seulement avec JS et sans reduction des animations. */
@media (prefers-reduced-motion: no-preference) {
  .js .sim-demo:not(.est-joue) .sim-demo__rep > div { opacity: 0; transform: translateY(8px); }
  .js .sim-demo:not(.est-joue) .sim-demo__barre i { transform: scaleX(0); }
}

/* ---- Boutons et liens ---- */
.sim-pilule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--sim-r-pilule);
  background: var(--sim-bleu);
  color: #fff;
  font: 400 17px/1.18 var(--font);
  letter-spacing: -.374px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sim-duree) var(--sim-courbe), transform .1s ease-out;
}
.sim-pilule:hover { background: var(--sim-bleu-survol); }
.sim-pilule:active { transform: scale(.97); }
.sim-pilule--creuse {
  background: transparent;
  color: var(--sim-bleu-lien);
  box-shadow: inset 0 0 0 1px var(--sim-bleu-lien);
}
.sim-pilule--creuse:hover { background: rgba(0, 102, 204, .06); }
.sim-lien {
  color: var(--sim-bleu-lien);
  font-size: 17px;
  letter-spacing: -.374px;
  text-decoration: none;
}
.sim-lien::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .3em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(-.08em) rotate(45deg);
}
.sim-lien:hover { text-decoration: underline; }
.sim-hero .sim-lien,
.sim-resultat .sim-lien,
.sim-dose .sim-lien { color: var(--sim-bleu-nuit); }

.sim-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Configurateur (decisions 12, 14, 15, 16) ---- */
.sim-calcul {
  padding: var(--sim-section) var(--sim-marge);
  background: var(--sim-blanc);
  color: var(--sim-encre);
}
.sim-calcul__titre {
  margin: 0 0 48px;
  font: 600 48px/52px var(--font);
  letter-spacing: -.144px;
}
.sim-calcul__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  gap: 0 64px;
  align-items: start;
}

/* Resultat : panneau noir eclaire d'en haut, colle sous la barre locale pendant que l'on repond. */
.sim-resultat {
  position: sticky;
  top: calc(var(--sim-local-h) + 24px);
  padding: 44px 56px;
  border-radius: var(--sim-r-tuile);
  background: radial-gradient(90% 70% at 30% 0%, #141a26 0%, var(--sim-nuit) 70%);
  color: var(--sim-clair);
  color-scheme: dark;
  /* Conteneur : chiffre, jauge et tuiles suivent la largeur reelle du panneau, a toutes les largeurs d'ecran. */
  container-type: inline-size;
}
.sim-resultat__lib {
  margin: 30px 0 0;
  color: var(--sim-clair-2);
  font-size: 17px;
  letter-spacing: -.374px;
}
/* Chiffre spectacle : degrade dans la lettre, chiffres tabulaires pour que le compteur ne bouge pas en largeur. */
.sim-resultat__chiffre {
  margin: 8px 0 14px;
  background: var(--sim-degrade-gain);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 600 min(80px, 16cqi)/1 var(--font);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sim-resultat__chiffre.est-vide,
.sim-resultat__chiffre.est-perte { color: var(--sim-gris); }
.sim-resultat__phrase {
  max-width: 720px;
  margin: 0;
  color: var(--sim-clair-2);
  font: 400 21px/1.38 var(--font);
  letter-spacing: .231px;
}
.sim-resultat__phrase b { color: var(--sim-clair); font-weight: 600; }
.sim-resultat .sim-segment { background: rgba(255, 255, 255, .10); }
.sim-resultat .sim-segment span { color: var(--sim-clair); }
.sim-resultat .sim-segment input:checked + span { background: rgba(255, 255, 255, .22); box-shadow: none; }

.sim-coches { margin: 34px 0 0; padding: 0; list-style: none; }
.sim-coches li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--sim-trait-noir);
  color: var(--sim-clair-2);
  font-size: 17px;
  letter-spacing: -.374px;
}
.sim-coches li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--sim-gris);
  border-radius: 50%;
  transition: background-color var(--sim-duree) var(--sim-courbe), border-color var(--sim-duree) var(--sim-courbe);
}
.sim-coches li.est-courant,
.sim-coches li.est-fait { color: var(--sim-clair); }
.sim-coches li.est-courant::before {
  border-color: var(--sim-bleu);
  box-shadow: inset 0 0 0 4px var(--sim-nuit), inset 0 0 0 11px var(--sim-bleu);
}
.sim-coches li.est-fait::before {
  border-color: var(--sim-bleu);
  background: var(--sim-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2 4.3 8.4 11 1.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Partage de chaque franc economise : forme « emphase » (gris = contexte, bleu = le point). */
.sim-partage { margin-top: 34px; }
.sim-partage__barre { display: flex; gap: 2px; height: 24px; }
.sim-partage__barre i { display: block; height: 100%; }
.sim-partage__cout { width: var(--part-cout); border-radius: 4px 0 0 4px; background: var(--sim-gris); }
.sim-partage__gain { flex: 1; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--sim-sys-bleu), var(--sim-sys-cyan)); }
.sim-partage__cles {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 0;
  color: var(--sim-clair-2);
  font-size: 17px;
  letter-spacing: -.374px;
}
.sim-partage__cles b { color: var(--sim-clair); font-weight: 600; }
.sim-cle {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: 1px;
}
.sim-cle--cout { background: var(--sim-gris); }
.sim-cle--gain { background: var(--sim-sys-bleu); }

/* Jauge : votre taux sur l'arc 0 a 15 % (banc), repere au seuil de rentabilite. */
.sim-jauge {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-top: 28px;
  padding: 22px 26px;
  border: 1px solid var(--sim-verre-bord);
  border-radius: 22px;
  background: var(--sim-verre);
}
.sim-jauge__arc { display: block; width: 100%; height: auto; overflow: visible; }
.sim-jauge__piste,
.sim-jauge__valeur { fill: none; stroke-width: 14; stroke-linecap: round; }
.sim-jauge__piste { stroke: rgba(255, 255, 255, .12); }
.sim-jauge__valeur {
  stroke: url(#sim-jauge-degrade);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .8s var(--sim-courbe-sortie);
}
.sim-jauge.est-perte .sim-jauge__valeur { stroke: var(--sim-gris); }
.sim-jauge__seuil { stroke: var(--sim-clair); stroke-width: 2; }
.sim-jauge text { fill: var(--sim-clair-2); font: 400 15px var(--font); }
.sim-jauge .sim-jauge__taux { fill: var(--sim-clair); font: 600 40px var(--font); letter-spacing: -.4px; }
.sim-jauge__texte { margin: 0; color: var(--sim-clair-2); font-size: 17px; line-height: 1.45; letter-spacing: -.374px; }

/* Tuiles : une couleur systeme Apple par sens ; le libelle dit le sens, jamais la couleur seule. */
.sim-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 28px;
}
.sim-liste div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--sim-verre-bord);
  border-radius: 22px;
  background: var(--sim-verre);
}
.sim-liste div:has([data-sortie="budget"]) { order: 1; grid-column: 1 / -1; }
.sim-liste dt { margin: 0; color: var(--sim-clair-2); font-size: 14px; line-height: 1.3; letter-spacing: -.224px; }
.sim-liste dd {
  margin: auto 0 0;
  color: var(--sim-clair);
  font: 600 21px/1.1 var(--font);
  letter-spacing: .231px;
  font-variant-numeric: tabular-nums;
}
.sim-liste [data-sortie="litres"],
.sim-liste [data-sortie="couverture"],
.sim-liste [data-sortie="co2"] {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: min(32px, 12cqi);
  letter-spacing: -.02em;
}
.sim-liste [data-sortie="litres"] { background-image: linear-gradient(92deg, var(--sim-sys-cyan), var(--sim-sys-bleu)); }
.sim-liste [data-sortie="couverture"] { background-image: linear-gradient(92deg, var(--sim-sys-jaune), var(--sim-sys-orange)); }
.sim-liste [data-sortie="co2"] { background-image: linear-gradient(92deg, var(--sim-sys-menthe), var(--sim-sys-vert)); }
/* Panneau etroit (colonne entre 834 et 1100 px, mobile) : tuiles empilees, jauge au-dessus de sa phrase. */
@container (max-width: 680px) {
  .sim-liste { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
  .sim-jauge { grid-template-columns: minmax(0, 1fr); }
  .sim-jauge__arc { max-width: 260px; margin: 0 auto; }
}

/* ---- Questions ---- */
.sim-etapes { min-width: 0; }
.sim-etape {
  min-width: 0;
  margin: 0 0 40px;
  padding: 0;
  border: 0;
  transition: opacity var(--sim-duree) var(--sim-courbe);
}
.sim-etape[inert] { opacity: .4; }
.sim-etape__titre {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  color: var(--sim-encre);
  font: 600 24px/28px var(--font);
  letter-spacing: .216px;
}
.sim-etape__titre em { color: var(--sim-gris); font-style: normal; }

.sim-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-tuile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 96px;
  padding: 15px;
  border: 1px solid var(--sim-gris);
  border-radius: var(--sim-r-champ);
  background: rgba(255, 255, 255, .8);
  color: var(--sim-encre);
  font-size: 17px;
  line-height: 1.24;
  letter-spacing: -.374px;
  cursor: pointer;
  transition: border-color var(--sim-duree) var(--sim-courbe), box-shadow var(--sim-duree) var(--sim-courbe);
}
.sim-tuile input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sim-tuile svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sim-tuile:has(input:checked) { border-color: var(--sim-bleu); box-shadow: inset 0 0 0 1px var(--sim-bleu); }
.sim-tuile:has(input:checked) svg { stroke: var(--sim-bleu); }
.sim-tuile:has(input:focus-visible) { outline: 2px solid var(--sim-bleu); outline-offset: 2px; }

/* Champ : libelle visible dans le cadre, comme les champs d'apple.com. */
.sim-champ {
  position: relative;
  margin-bottom: 10px;
  border: 1px solid var(--sim-gris);
  border-radius: var(--sim-r-champ);
  background: var(--sim-blanc);
  transition: border-color var(--sim-duree) var(--sim-courbe);
}
.sim-champ:focus-within { outline: 2px solid var(--sim-bleu); outline-offset: 2px; }
.sim-champ.est-erreur { border-color: var(--sim-erreur); }
.sim-champ label {
  display: block;
  padding: 9px 15px 0;
  color: var(--sim-encre-2);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -.12px;
}
.sim-champ input,
.sim-champ select {
  display: block;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 2px 15px 9px;
  border: 0;
  border-radius: var(--sim-r-champ);
  background: transparent;
  color: var(--sim-encre);
  font: 400 17px/1.4 var(--font);
  letter-spacing: -.374px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.sim-champ--liste select { padding-right: 40px; cursor: pointer; }
.sim-champ--liste::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 21px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--sim-encre-2);
  border-bottom: 1.5px solid var(--sim-encre-2);
  transform: rotate(45deg);
  pointer-events: none;
}
.sim-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sim-erreur {
  margin: -4px 0 10px;
  color: var(--sim-erreur);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -.224px;
}
.sim-aide {
  margin: 2px 0 0;
  color: var(--sim-encre-2);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -.224px;
}
.sim-aide b { color: var(--sim-encre); font-weight: 600; }
.sim-aide .sim-lien { font-size: 14px; }
.sim-avertissement {
  margin: 8px 0 0;
  color: var(--sim-attention);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: -.224px;
}

/* Controle segmente (periode, monnaie) */
.sim-segment {
  display: inline-flex;
  gap: 2px;
  min-width: 0;
  margin: 0 0 10px;
  padding: 2px;
  border: 0;
  border-radius: 9px;
  background: var(--sim-piste);
}
.sim-segment label { position: relative; display: flex; }
.sim-segment input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sim-segment span {
  display: block;
  min-width: 64px;
  padding: 6px 16px;
  border-radius: 7px;
  color: var(--sim-encre);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -.224px;
  text-align: center;
  transition: background-color var(--sim-duree) var(--sim-courbe), box-shadow var(--sim-duree) var(--sim-courbe);
}
.sim-segment input:checked + span {
  background: var(--sim-blanc);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06);
}
.sim-segment input:focus-visible + span { outline: 2px solid var(--sim-bleu); outline-offset: 1px; }
.sim-segment--plein { display: flex; }
.sim-segment--plein label { flex: 1; }
.sim-segment--plein span { width: 100%; min-width: 0; padding: 6px 0; }

/* Barre de resume collee en bas : mobile seulement (decision 14). */
.sim-resume { display: none; }

@media (max-width: 833px) {
  .sim-calcul__grille { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sim-resultat { position: static; padding: 32px 24px; }
  .sim-resultat__phrase { font-size: 19px; letter-spacing: .228px; }
  .sim-resume {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px var(--sim-marge) calc(12px + env(safe-area-inset-bottom));
    background: rgba(251, 251, 253, .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .16);
    transform: translateY(100%);
    transition: transform var(--sim-duree) var(--sim-courbe);
  }
  .sim-resume.est-visible { transform: none; }
  .sim-resume p { margin: 0; color: var(--sim-encre-2); font-size: 12px; letter-spacing: -.12px; }
  .sim-resume strong { display: block; color: var(--sim-encre); font: 600 24px/1.1 var(--font); letter-spacing: .216px; }
}
@media (max-width: 734px) {
  .sim-calcul__titre { margin-bottom: 32px; font-size: 32px; line-height: 36px; letter-spacing: 0; }
}

/* ---- Analyse detaillee (decisions 18 a 20) ---- */
.sim-analyse {
  padding: 0 var(--sim-marge) var(--sim-section);
  background: var(--sim-blanc);
  color: var(--sim-encre);
}
.sim-analyse__titre,
.sim-dose__titre,
.sim-methode__titre,
.sim-app__titre {
  margin: 0;
  font: 600 48px/52px var(--font);
  letter-spacing: -.144px;
  text-wrap: balance;
}
.sim-analyse__titre { max-width: 900px; }
.sim-analyse__titre em,
.sim-methode__titre em { color: var(--sim-encre-2); font-style: normal; }
.sim-dose__titre em { color: var(--sim-clair-2); font-style: normal; }
.sim-analyse__annonce {
  margin: 24px 0 0;
  color: var(--sim-encre-2);
  font: 400 21px/1.38 var(--font);
  letter-spacing: .231px;
}
.sim-bloc {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 40px;
  padding: 44px 0;
  border-top: 1px solid var(--sim-trait);
}
.sim-bloc:first-child { margin-top: 48px; }
.sim-bloc__titre { margin: 0; font: 600 24px/28px var(--font); letter-spacing: .216px; }
.sim-bloc__titre em {
  display: block;
  margin-top: 8px;
  color: var(--sim-encre-2);
  font: 400 17px/1.4 var(--font);
  font-style: normal;
  letter-spacing: -.374px;
}
.sim-table { width: 100%; border-collapse: collapse; font-size: 17px; letter-spacing: -.374px; }
.sim-table th {
  padding: 0 0 10px 16px;
  color: var(--sim-encre-2);
  font-size: 14px;
  font-weight: 400;
  text-align: right;
}
.sim-table td {
  padding: 12px 0 12px 16px;
  border-top: 1px solid var(--sim-trait);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sim-table th:first-child,
.sim-table td:first-child { padding-left: 0; text-align: left; }
.sim-table tr.est-fort td { font-weight: 600; }
.sim-note {
  margin: 14px 0 0;
  color: var(--sim-encre-2);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.224px;
}
.sim-note b { color: var(--sim-encre); font-weight: 600; }

.sim-scenario {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 130px;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--sim-trait);
  font-size: 17px;
  letter-spacing: -.374px;
}
.sim-scenario small { display: block; color: var(--sim-encre-2); font-size: 14px; }
.sim-scenario__piste { position: relative; height: 24px; }
.sim-scenario__piste::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 1px;
  background: var(--sim-trait);
}
.sim-scenario__piste i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--long, 0%);
  border-radius: 0 4px 4px 0;
  background: var(--sim-gris);
}
.sim-scenario.est-choisi .sim-scenario__piste i { background: var(--sim-bleu); }
.sim-scenario b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.sim-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sim-chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 16px 0 26px; }
.sim-chiffre { padding: 22px 24px; border-radius: var(--sim-r-carte); background: var(--sim-fond); }
.sim-chiffre small { display: block; color: var(--sim-encre-2); font-size: 14px; letter-spacing: -.224px; }
.sim-chiffre strong { display: block; margin-top: 6px; font: 600 40px/1.1 var(--font); letter-spacing: -.2px; }
.sim-chiffre p { margin: 8px 0 0; color: var(--sim-encre-2); font-size: 14px; line-height: 1.45; letter-spacing: -.224px; }
.sim-graphe { margin: 0 0 18px; }
.sim-graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.sim-graphe text { fill: var(--sim-encre-2); font-family: var(--font); font-size: 12px; }
.sim-graphe .est-valeur { fill: var(--sim-encre); font-size: 14px; font-weight: 600; }
.sim-graphe .sim-axe { stroke: var(--sim-gris); stroke-width: 1; }
.sim-graphe .sim-repere { stroke: var(--sim-trait); stroke-width: 1; }
.sim-graphe .sim-colonne { fill: var(--sim-bleu); }

.sim-defile { overflow-x: auto; }
.sim-grille {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.sim-grille th { padding: 8px; color: var(--sim-encre-2); font-size: 13px; font-weight: 400; }
.sim-grille th[scope="row"] { font-size: 14px; text-align: left; }
.sim-grille td { padding: 12px 8px; border-radius: 4px; color: var(--sim-encre); text-align: center; }
.sim-grille td.est-ici { box-shadow: inset 0 0 0 2px var(--sim-encre); font-weight: 600; }
.sim-g-n3 { background: rgba(227, 73, 72, .55); }
.sim-g-n2 { background: rgba(227, 73, 72, .38); }
.sim-g-n1 { background: rgba(227, 73, 72, .2); }
.sim-g-0 { background: #f0efec; }
.sim-g-p1 { background: #cde2fb; }
.sim-g-p2 { background: #9ec5f4; }
.sim-g-p3 { background: #5598e7; }
.sim-g-p4 { background: #256abf; color: #fff; }
.sim-grille td.sim-g-p4.est-ici { box-shadow: inset 0 0 0 2px #fff; }
.sim-echelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--sim-encre-2);
  font-size: 13px;
}
.sim-echelle i {
  display: inline-block;
  width: 160px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(227, 73, 72, .55), #f0efec 40%, #cde2fb 55%, #256abf);
}
.sim-boutons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Dose exacte (decision 24) ---- */
.sim-dose {
  padding: var(--sim-section) var(--sim-marge);
  background: var(--sim-noir);
  color: var(--sim-clair);
  color-scheme: dark;
}
.sim-dose__titre { text-align: center; }
.sim-dose__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  gap: 56px;
  align-items: center;
  max-width: 1060px;
  margin: 52px auto 0;
}
.sim-dose__ecran {
  padding: 44px 48px;
  border: 1px solid var(--sim-verre-bord);
  border-radius: var(--sim-r-tuile);
  background: var(--sim-verre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  /* Conteneur : la dose suit la largeur de l'ecran de dose, meme pour une grande dose. */
  container-type: inline-size;
}
.sim-dose__ecran small { color: var(--sim-clair-2); font-size: 17px; letter-spacing: -.374px; }
.sim-dose__chiffre {
  display: block;
  margin: 12px 0 18px;
  background: var(--sim-degrade-gain);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 600 min(96px, 24cqi)/1 var(--font);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sim-dose__phrase { margin: 0; color: var(--sim-clair-2); font: 400 21px/1.38 var(--font); letter-spacing: .231px; }
.sim-dose__phrase b { color: var(--sim-clair); font-weight: 600; }
.sim-dose .sim-champ { border-color: var(--sim-encre-2); background: transparent; }
.sim-dose .sim-champ label,
.sim-dose .sim-aide { color: var(--sim-clair-2); }
.sim-dose .sim-champ input,
.sim-dose .sim-champ select { color: var(--sim-clair); }
.sim-dose .sim-champ--liste::after { border-color: var(--sim-clair-2); }
.sim-dose .sim-erreur { color: var(--sim-erreur-nuit); }

/* ---- Methode et sources (decision 25) ---- */
.sim-methode { padding: var(--sim-section) var(--sim-marge); background: var(--sim-fond); color: var(--sim-encre); }
.sim-methode__titre { text-align: center; }
.sim-formules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  max-width: 1060px;
  margin: 52px auto 0;
}
.sim-formules div { padding: 16px 0; border-top: 1px solid var(--sim-trait); font-size: 17px; line-height: 1.45; letter-spacing: -.374px; }
.sim-formules dt { margin: 0; font-weight: 600; }
.sim-formules dd { margin: 0; color: var(--sim-encre-2); }
.sim-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1060px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}
.sim-sources li { padding: 24px; border-radius: var(--sim-r-carte); background: var(--sim-blanc); font-size: 17px; line-height: 1.45; letter-spacing: -.374px; }
.sim-sources small { display: block; margin-bottom: 6px; color: var(--sim-encre-2); font-size: 14px; }
.sim-sources .sim-lien { display: inline-block; margin-top: 10px; font-size: 14px; }

/* ---- Application (decision 26) ---- */
.sim-app { padding: var(--sim-section) var(--sim-marge); background: var(--sim-blanc); color: var(--sim-encre); text-align: center; }
.sim-app__icone { display: block; width: 128px; height: 128px; margin: 0 auto 28px; border-radius: 28px; }
.sim-app__texte { max-width: 640px; margin: 22px auto 0; color: var(--sim-encre-2); font: 400 21px/1.38 var(--font); letter-spacing: .231px; }
.sim-app__actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 32px; }

/* ---- Apparition des titres : opacite 0 et 30 px, valeurs Apple du site ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .sim-revele {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--sim-duree) var(--sim-courbe), transform var(--sim-duree) var(--sim-courbe);
  }
  .js .sim-revele.est-vue { opacity: 1; transform: none; }
}

/* ---- 734 px et moins ---- */
@media (max-width: 734px) {
  .sim-local__titre { font-size: 17px; }
  .sim-local__liste a { padding: 0 8px; }
  .sim-hero { padding-top: 72px; }
  .sim-hero__titre { font-size: 48px; line-height: 52px; letter-spacing: -.144px; }
  .sim-hero__sous { font-size: 19px; letter-spacing: .228px; }
  .sim-demo { grid-template-columns: minmax(0, 1fr); margin-top: 40px; padding: 28px 24px 32px; }
  .sim-demo__rep { margin-top: 24px; }
  .sim-analyse__titre,
  .sim-dose__titre,
  .sim-methode__titre,
  .sim-app__titre { font-size: 32px; line-height: 36px; letter-spacing: 0; }
  .sim-bloc { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 0; }
  .sim-scenario { grid-template-columns: minmax(0, 1fr) auto; }
  .sim-scenario__piste { grid-column: 1 / -1; grid-row: 2; }
  .sim-trois,
  .sim-chiffres,
  .sim-dose__grille,
  .sim-formules,
  .sim-sources { grid-template-columns: minmax(0, 1fr); }
  .sim-trois { gap: 0; }
  .sim-dose__grille { gap: 32px; }
  .sim-dose__ecran { padding: 32px 24px; }
}

/* ---- Impression du rapport (decision 18, bloc Rapport) ---- */
@media print {
  .site-header,
  .sim-local,
  .sim-hero,
  .sim-dose,
  .sim-app,
  .sim-resume,
  .sim-boutons,
  .sim-segment,
  .sim-lien,
  .pd { display: none; }
  .sim-calcul,
  .sim-analyse,
  .sim-methode { padding: 24px 0; background: #fff; }
  /* Rapport imprime : noir sur blanc ; le panneau de resultat reprend les couleurs du papier. */
  .sim-resultat {
    --sim-clair: #1d1d1f;
    --sim-clair-2: #6e6e73;
    --sim-trait-noir: #d2d2d7;
    --sim-verre: transparent;
    --sim-verre-bord: #d2d2d7;
    position: static;
    background: #fff;
    color: #1d1d1f;
  }
  .sim-resultat__chiffre,
  .sim-liste dd { background: none; color: #1d1d1f; }
  .sim-etape[inert] { opacity: 1; }
  .sim-bloc,
  .sim-resultat { break-inside: avoid; }
  .js .sim-revele { opacity: 1; transform: none; }
}

/* ---- Preferences de l'usager ---- */
@media (prefers-reduced-motion: reduce) {
  .sim-pilule,
  .sim-tuile,
  .sim-champ,
  .sim-segment span,
  .sim-coches li::before,
  .sim-etape,
  .sim-local__liste a,
  .sim-resume,
  .sim-jauge__valeur,
  .sim-demo > div:first-child::before { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sim-local,
  .sim-resume { background: #fbfbfd; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sim-demo { background: var(--sim-tuile-noire); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .sim-champ,
  .sim-tuile { border-color: var(--sim-encre); }
  .sim-etape__titre em { color: var(--sim-encre-2); }
}