/* Réglo — Scène animée du héros — décor 3D, courant, phases jour/nuit, Solari, confirmations
   Extrait de pages.css (1 455 lignes, au-dessus du plafond de 800 du projet).
   DÉCOUPAGE CONTIGU : les règles gardent leur ordre d'origine et les trois
   fichiers sont chargés dans cet ordre par views/layouts/main.php. La cascade
   est donc inchangée — ne pas réordonner les <link> sans revérifier. */

/* ══ Scène vivante (pales, nuages, soleil) ══ */
.tb {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: turbine-spin 11s linear infinite;
}
.tb--slow { animation-duration: 17s; }
@keyframes turbine-spin { to { transform: rotate(360deg); } }
.cloud { animation: cloud-drift 46s ease-in-out infinite alternate; }
.cloud--slow { animation-duration: 70s; }
@keyframes cloud-drift {
  from { transform: translateX(-46px); }
  to   { transform: translateX(46px); }
}
.sun-glow { animation: sun-breathe 7s ease-in-out infinite; }
@keyframes sun-breathe {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.32; }
}
@media (prefers-reduced-motion: reduce) {
  .tb, .cloud, .sun-glow { animation: none; }
}

/* ══ Héros vidéo (activé par le réglage hero_video_url) ══ */
.hero--video { color: var(--ink-on-dark-soft); }
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(7 22 15 / 0.82) 0%, rgb(7 22 15 / 0.55) 48%, rgb(7 22 15 / 0.30) 100%),
    linear-gradient(180deg, transparent 55%, rgb(7 22 15 / 0.55) 100%);
}
.hero--video::before, .hero--video::after { display: none; }
.hero--video .hero__grid { position: relative; z-index: 1; }
.hero--video .hero__horizon { display: none; }
.hero--video h1 { color: var(--ink-on-dark); }
.hero--video .lead { color: rgb(241 246 238 / 0.88); }
.hero--video .hero__trust { color: rgb(241 246 238 / 0.75); }
.hero--video .hero__trust strong { color: var(--ink-on-dark); }
.hero--video .eyebrow { color: var(--sun-400); }
.hero--video .eyebrow::before { background: var(--sun-400); }
.hero--video .hero__em::after { background: rgb(244 180 26 / 0.35); }
.hero--video .fr-chip { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); color: var(--ink-on-dark-soft); }
.hero--video .btn--ghost { background: rgb(255 255 255 / 0.10); color: var(--ink-on-dark); border-color: rgb(255 255 255 / 0.4); }
.hero--video .btn--ghost:hover { background: rgb(255 255 255 / 0.2); color: var(--ink-on-dark); }

/* ══ Cartes inclinables : reflet + flottement des illustrations ══ */
.has-tilt {
  position: relative;
  will-change: transform;
  transform-style: preserve-3d;
}
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 50%),
              rgb(255 255 255 / 0.5), transparent 55%);
  opacity: 0;
  transition: opacity 0.25s;
  mix-blend-mode: soft-light;
}
.has-tilt:hover .tilt-glare { opacity: 1; }

/* Flottement paisible des scènes d'en-tête (visible sans interaction) */
.page-hero__illus svg { animation: illus-float 7s ease-in-out infinite alternate; }
@keyframes illus-float {
  from { translate: 0 -6px; }
  to   { translate: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__illus svg { animation: none; }
}

/* ══ Scène 3D du héros ══
   Vraie profondeur : couches placées en translateZ derrière une caméra en
   perspective. Chaque couche compense son recul par un scale
   ((P − z) / P avec P = 1200) pour paraître à taille normale au repos.
   Le défilement fait avancer la caméra DANS la scène (dolly). */
.hero--scene {
  /* Hauteur étendue : l'excédent au-delà d'un écran est la « distance de
     voyage » pendant laquelle la scène reste épinglée et la caméra avance. */
  height: 185dvh;
  padding-block: 0;
  overflow: visible;
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 920px) {
  .hero--scene { height: 150dvh; }
}
.hero--scene::before, .hero--scene::after { display: none; }
.hero--scene .hero__grid { position: relative; z-index: 2; width: 100%; }

.scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  perspective: 1200px;
  perspective-origin: 50% 42%;
}
.scene__cam {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.scene__layer {
  position: absolute;
  inset: -12% -10%;
  transform-style: preserve-3d;
}
.scene__layer svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Profondeurs (P = 1200) */
.scene__layer--video      { transform: translateZ(-950px) scale(1.80); }
.scene__layer--sun        { transform: translateZ(-900px) scale(1.75); }
.scene__layer--clouds     { transform: translateZ(-680px) scale(1.57); }
.scene__layer--hills-far  { transform: translateZ(-480px) scale(1.40); filter: saturate(0.72) brightness(1.07); }
.scene__layer--turbines   { transform: translateZ(-300px) scale(1.25); filter: saturate(0.88); }
.scene__layer--hills-near { transform: translateZ(-120px) scale(1.10); }
.scene__layer--fg         { transform: translateZ(90px)  scale(0.925); }

.scene__layer--video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene__layer--clouds-ghost { opacity: 0.5; }

.hero--scene .hero__scrim { z-index: 1; }

/* Invitation à plonger */
.scene-hint {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  color: var(--ink-soft);
  opacity: 0.7;
  animation: hint-bounce 2s ease-in-out infinite;
}
.hero--video .scene-hint { color: var(--ink-on-dark-soft); }
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-hint { animation: none; }
}

/* ══ Le courant — câble central entre les sections ══
   Segments strictement limités aux espaces vides entre sections.
   Sobriété : trait fin, lueur discrète, éclat mesuré aux nœuds.
   L'état « éteint » est un voile sombre (sur thème clair, une simple
   baisse d'opacité éclaircit au lieu d'éteindre). */
main { position: relative; }
#powerline-svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}
.powerline__wire {
  fill: none;
  stroke: var(--line-mid);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.powerline__flow {
  fill: none;
  stroke: var(--sun-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgb(244 180 26 / 0.55));
  transition: stroke-width 0.3s;
}
.powerline__flow--strike {
  stroke: #fffbe9;
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgb(255 250 220 / 1)) drop-shadow(0 0 20px rgb(244 180 26 / 0.85));
}
.pw-bolt {
  fill: var(--sun-400);
  stroke: #fffdf0;
  stroke-width: 0.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgb(244 180 26 / 0.9));
  pointer-events: none;
}
.pw-bolt--flash {
  animation: bolt-flash 0.5s ease-out;
}
@keyframes bolt-flash {
  0%   { opacity: 0; scale: 0.4; }
  10%  { opacity: 1; scale: 1.25; }
  22%  { opacity: 0.55; scale: 1.05; }
  34%  { opacity: 1; scale: 1.1; }
  60%  { opacity: 0.9; scale: 1; }
  100% { opacity: 0; scale: 0.85; }
}
.pw-node {
  fill: var(--surface);
  stroke: var(--line-mid);
  stroke-width: 1.5;
  transition: fill 0.4s, stroke 0.4s;
}
.pw-node--lit {
  fill: var(--sun-500);
  stroke: #fffdf4;
  filter: drop-shadow(0 0 5px rgb(244 180 26 / 0.8));
  transition-delay: 0.12s;
}
.pw-ring {
  fill: none;
  stroke: var(--sun-400);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: none;
}
.pw-ring--burst {
  animation: ring-burst 0.55s ease-out forwards;
}
@keyframes ring-burst {
  0%   { opacity: 0.7; transform: scale(0.55); }
  100% { opacity: 0;   transform: scale(2.4); stroke-width: 0.4; }
}
.pw-ring--burst { animation-duration: 0.75s; }
.pw-pulse {
  fill: #fff8e1;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgb(255 244 205 / 0.9)) drop-shadow(0 0 10px rgb(244 180 26 / 0.7));
  transition: opacity 0.3s;
  animation: pulse-throb 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pulse-throb {
  50% { transform: scale(1.2); }
}

/* Sections éteintes → allumées.
   Le voile sombre (::before) rend l'extinction lisible sur fond clair ;
   la désaturation fait le reste. Pas de fondu d'opacité (contre-productif). */
.pw-section {
  position: relative;
  transition: filter 0.9s ease, transform 0.9s var(--ease-out);
}
.pw-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  /* Plus sombre en bas : la lumière viendra du câble, en haut */
  background: linear-gradient(180deg, rgb(9 20 14 / 0.68), rgb(9 20 14 / 0.8));
  opacity: 0;
  transition: opacity 0.9s ease;
}
.pw-section.is-off {
  filter: grayscale(0.95) brightness(0.85);
  transform: translateY(16px);
  animation: none; /* réarme section-bloom pour la prochaine frappe */
}
.pw-section.is-off::before {
  opacity: 1;
  animation: none; /* réarme veil-lift */
  transition: opacity 0.55s ease;
}
.pw-section.is-on, .pw-section.is-on-static {
  filter: none;
  transform: none;
}
.pw-section.is-on {
  animation: section-bloom 1.15s ease-out;
}
.pw-section.is-on::before {
  opacity: 0;
  animation: veil-lift 1.1s ease-out;
}
/* Physique d'un éclair : flash sec, rebond sombre, second flash, rémanence */
@keyframes veil-lift {
  0%   { opacity: 1; }
  4%   { opacity: 0; }
  9%   { opacity: 0.85; }
  13%  { opacity: 0; }
  22%  { opacity: 0.5; }
  34%  { opacity: 0.05; }
  100% { opacity: 0; }
}
/* Surtension lumineuse de la frappe, puis retour au calme */
@keyframes section-bloom {
  0%   { filter: grayscale(0.95) brightness(0.85); }
  5%   { filter: grayscale(0) brightness(1.22); }
  13%  { filter: grayscale(0.3) brightness(0.92); }
  22%  { filter: grayscale(0) brightness(1.1); }
  40%  { filter: grayscale(0) brightness(1.03); }
  100% { filter: none; }
}
/* Halo doré bref au point d'entrée du courant */
.pw-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(244 180 26 / 0.16), transparent 40%);
  opacity: 0;
}
.pw-section.is-on::after {
  animation: power-glow 1s ease-out;
}
@keyframes power-glow {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
/* ══ Tableau Solari ══ */
.solari-band { background: var(--forest-900); border-block: 1px solid rgb(255 255 255 / 0.1); }
.solari-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  text-align: center;
}
.solari-item { display: grid; gap: var(--space-2); justify-items: center; }
.solari-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}
.flapline {
  display: inline-flex;
  gap: 4px;
  perspective: 320px;
}
.flap {
  display: inline-grid;
  place-items: center;
  min-width: 1.35ch;
  padding: 0.14em 0.1em;
  background: linear-gradient(180deg, #1c3527 0 49%, #142719 51% 100%);
  color: var(--sun-400);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-variant-numeric: tabular-nums;
  border-radius: 6px;
  position: relative;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 3px 8px rgb(0 0 0 / 0.35);
  transform-origin: center;
  transition: transform 42ms ease-in;
  white-space: pre;
}
.flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.5px;
  background: rgb(0 0 0 / 0.55);
}
.flap--tick { transform: rotateX(78deg); }

/* ── Palette de SCÈNE (illustration), littérale et assumée ──────────────
   Les couleurs qui suivent — dégradés de ciel, rayons, astres — peignent un
   lever, un coucher et une nuit. Ce sont des teintes d'ILLUSTRATION, pas des
   rôles d'interface : les promouvoir en jetons laisserait croire qu'un
   composant peut s'en servir. Elles ne portent aucun texte, donc aucun seuil
   de contraste ne s'y applique — seul le texte POSÉ dessus est tokenisé
   (--ink-on-dark, --ink-on-dark-soft, --muted-on-dark).
   C'est le seul endroit du projet où du hex en dur est volontaire. */
/* ══ Phases jour / nuit de la scène ══ */
.scene__layer--skybg {
  transform: translateZ(-1000px) scale(1.84);
  transition: background 1.4s ease, opacity 1.4s ease;
  background: transparent;
}
.hero--scene[data-phase="dawn"] .scene__layer--skybg {
  background: linear-gradient(180deg, #fce6c6 0%, #f8d7ae 38%, rgb(252 230 198 / 0) 78%);
}
.hero--scene[data-phase="day"] .scene__layer--skybg {
  background: linear-gradient(180deg, #def0f6 0%, rgb(222 240 246 / 0) 70%);
}
.hero--scene[data-phase="dusk"] .scene__layer--skybg {
  background: linear-gradient(180deg, #f7cf95 0%, #efab7d 42%, rgb(247 207 149 / 0) 82%);
}
.hero--scene[data-phase="night"] .scene__layer--skybg {
  background: linear-gradient(180deg, #0c1c2e 0%, #103048 48%, #16352a 100%);
}

.celest { transition: opacity 1.2s ease; }
.celest--moon, .celest--stars { opacity: 0; }
.hero--scene[data-phase="night"] .celest--sun { opacity: 0; }
.hero--scene[data-phase="night"] .celest--moon { opacity: 1; }
.hero--scene[data-phase="night"] .celest--stars { opacity: 1; }
.star-tw { animation: star-twinkle 2.6s ease-in-out infinite; }
@keyframes star-twinkle { 50% { opacity: 0.25; } }

.win { transition: fill 1s ease; }
.hero--scene[data-phase="night"] .win {
  fill: #ffd166;
  filter: drop-shadow(0 0 5px rgb(255 209 102 / 0.85));
}
.tb-light { opacity: 0; transition: opacity 1s; }
.hero--scene[data-phase="night"] .tb-light {
  opacity: 1;
  animation: tb-blink 2.4s steps(1) infinite;
}
@keyframes tb-blink { 50% { opacity: 0.15; } }

/* Lisibilité du texte la nuit (mode illustré) */
.hero--scene[data-phase="night"]:not(.hero--video) { color: var(--ink-on-dark-soft); }
.hero--scene[data-phase="night"]:not(.hero--video) h1 { color: var(--ink-on-dark); }
.hero--scene[data-phase="night"]:not(.hero--video) .lead { color: rgb(238 244 238 / 0.85); }
.hero--scene[data-phase="night"]:not(.hero--video) .hero__trust { color: rgb(238 244 238 / 0.7); }
.hero--scene[data-phase="night"]:not(.hero--video) .hero__trust strong { color: var(--ink-on-dark); }
.hero--scene[data-phase="night"]:not(.hero--video) .eyebrow { color: var(--sun-400); }
.hero--scene[data-phase="night"]:not(.hero--video) .eyebrow::before { background: var(--sun-400); }
.hero--scene[data-phase="night"]:not(.hero--video) .hero__em::after { background: rgb(244 180 26 / 0.3); }
.hero--scene[data-phase="night"]:not(.hero--video) .fr-chip { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); color: var(--ink-on-dark-soft); }
.hero--scene[data-phase="night"]:not(.hero--video) .btn--ghost { background: rgb(255 255 255 / 0.1); color: var(--ink-on-dark); border-color: rgb(255 255 255 / 0.4); }
.hero--scene[data-phase="night"]:not(.hero--video) .scene-hint { color: var(--ink-on-dark-soft); }

/* Mode vidéo : teinte du voile selon la phase */
.hero--video[data-phase="night"] .hero__scrim {
  background:
    linear-gradient(100deg, rgb(8 16 30 / 0.88) 0%, rgb(8 16 30 / 0.62) 48%, rgb(8 16 30 / 0.38) 100%),
    linear-gradient(180deg, transparent 55%, rgb(8 16 30 / 0.6) 100%);
}
.hero--video[data-phase="dusk"] .hero__scrim {
  background:
    linear-gradient(100deg, rgb(46 26 10 / 0.78) 0%, rgb(46 26 10 / 0.5) 48%, rgb(46 26 10 / 0.28) 100%),
    linear-gradient(180deg, transparent 55%, rgb(46 26 10 / 0.5) 100%);
}

/* Bouton soleil/lune (démonstration + préférence) */
.scene-phase {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-mid);
  background: var(--glass);
  color: var(--ink-soft);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.scene-phase:hover { transform: rotate(18deg); background: var(--glass-hover); color: var(--ink); }
.hero--video .scene-phase,
.hero--scene[data-phase="night"] .scene-phase { color: var(--ink-on-dark-soft); border-color: rgb(255 255 255 / 0.35); }
.scene-phase .sp-moon { display: none; }
.hero--scene[data-phase="night"] .scene-phase .sp-sun { display: none; }
.hero--scene[data-phase="night"] .scene-phase .sp-moon { display: block; }

/* ══ Mobile : la scène ne se traverse pas, elle sert de décor ══
   Sur petit écran, l'épinglage tronquait le contenu du héros (l'estimateur
   et les boutons disparaissaient). On déroule le héros normalement ; la
   scène reste en fond animé, et le récit du courant prend le relais. */
@media (max-width: 920px) {
  /* Le héros tient dans l'écran et n'est JAMAIS rogné : seul le décor
     (couches 3D surdimensionnées) est découpé, via .scene. */
  /* Flux en bloc : la boîte contient toujours son contenu (le centrage
     flex faisait déborder le contenu hors du héros quand il dépassait). */
  .hero--scene {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .hero__pin {
    position: relative;
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding-block: var(--space-5) var(--space-4);
  }
  .scene { perspective: 900px; overflow: hidden; }
  .scene-hint { display: none; }
  .scene-phase { bottom: 0.8rem; right: 0.8rem; }

  /* Compactage : tout le héros doit tenir sur un écran de téléphone */
  .hero__grid { gap: var(--space-4); }
  .hero--scene h1 { font-size: clamp(2rem, 1.1rem + 5.2vw, 2.9rem); }
  .hero--scene .lead { font-size: var(--text-sm); line-height: 1.55; }
  .hero__actions { margin-block: var(--space-3) var(--space-2); gap: var(--space-2); }
  .hero__actions .btn--lg { padding: 0.8em 1.5em; font-size: var(--text-sm); }
  .hero__trust { gap: var(--space-1) var(--space-2); font-size: var(--text-xs); }
  .hero__widget { gap: var(--space-2); padding: var(--space-3); }
  .hero--scene h1 { margin-bottom: var(--space-2); }
  .hero--scene .lead { margin-bottom: var(--space-2); }
  .hero__widget-amount span:first-child { font-size: clamp(2.1rem, 1.4rem + 3.4vw, 2.8rem); }
  .hero__widget-foot { display: none; }
  .hero__widget input[type="range"] { height: 26px; }

  /* Mode illustré : voile clair pour garder le texte lisible sur les collines */
  .hero--scene:not(.hero--video) .hero__pin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(245 247 240 / 0.88), rgb(245 247 240 / 0.66));
  }
  .hero--scene:not(.hero--video)[data-phase="night"] .hero__pin::before {
    background: linear-gradient(180deg, rgb(9 20 30 / 0.72), rgb(9 20 30 / 0.5));
  }
}

/* Câble : plus discret sur petit écran */
@media (max-width: 920px) {
  .powerline__wire { stroke-width: 1.2; }
  .powerline__flow { stroke-width: 2; }
  .pw-bolt { display: none; } /* le glyphe surchargerait un écran étroit */
}

/* ══ Parcours de conversion : retours visuels du formulaire ══ */
.field input, .field select, .field textarea {
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast);
}
.field.is-valid input {
  border-color: var(--save);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e8a5f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85em center;
  padding-right: 2.4em;
}
.field.has-error input {
  border-color: var(--danger);
  animation: field-shake 0.32s ease-out;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  60%      { transform: translateX(4px); }
}
.field .error {
  display: flex;
  align-items: center;
  gap: 0.35em;
  animation: error-in 0.25s ease-out;
}
@keyframes error-in {
  from { opacity: 0; transform: translateY(-4px); }
}

/* Bouton d'envoi : état occupé */
.btn.is-busy { pointer-events: none; opacity: 0.85; }
.btn.is-busy::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ══ Moment de confirmation ══ */
.lead-success__icon {
  position: relative;
  animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lead-success__icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--save);
  opacity: 0;
  animation: success-ring 0.9s ease-out 0.15s;
}
@keyframes success-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes success-ring {
  0%   { opacity: 0.9; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.5); }
}
.lead-success__icon svg {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: check-draw 0.45s ease-out 0.25s forwards;
}
@keyframes check-draw { to { stroke-dashoffset: 0; } }
.lead-success h2, .lead-success p, .lead-success .btn {
  animation: success-rise 0.45s ease-out backwards;
}
.lead-success h2 { animation-delay: 0.2s; }
.lead-success p  { animation-delay: 0.3s; }
.lead-success .btn { animation-delay: 0.4s; }
@keyframes success-rise {
  from { opacity: 0; transform: translateY(10px); }
}

/* Récapitulatif du rappel dans la confirmation */
.lead-success__recap {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--save-soft);
  color: var(--save);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ══ Simulateur : progression et transitions d'étape ══ */
.sim-progress span.is-current::after {
  animation: seg-fill 0.45s var(--ease-out);
}
@keyframes seg-fill { from { transform: scaleX(0); } }
.sim-step.is-active { animation: sim-step-in 0.42s var(--ease-out); }
@keyframes sim-step-in {
  from { opacity: 0; transform: translateX(26px); }
}
.sim-step.is-leaving { animation: sim-step-out 0.2s ease-in forwards; }
@keyframes sim-step-out {
  to { opacity: 0; transform: translateX(-18px); }
}
.sim-live { animation: sim-live-in 0.5s var(--ease-snap); }
@keyframes sim-live-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
}

/* ══ Mouvement réduit : on garde l'information, on retire l'agitation ══ */
@media (prefers-reduced-motion: reduce) {
  .pw-section,
  .pw-section::before,
  .pw-section::after,
  .pw-ring, .pw-bolt, .pw-pulse,
  .flap,
  .lead-success__icon,
  .lead-success__icon::after,
  .lead-success h2, .lead-success p, .lead-success .btn,
  .sim-step.is-active, .sim-live,
  .field.has-error input,
  .field .error,
  .btn.is-busy::before,
  .sim-progress span.is-current::after,
  .scene-hint {
    animation: none !important;
    transition: none !important;
  }
  /* La coche de confirmation est dessinée par animation : l'afficher d'emblée */
  .lead-success__icon svg {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  /* Le voile ne doit jamais rester en place sans animation pour le lever */
  .pw-section::before { opacity: 0 !important; }
  .pw-section { filter: none !important; transform: none !important; }
}

/* Téléphones courts : ultime compactage pour que le héros tienne en entier */
@media (max-width: 920px) and (max-height: 900px) {
  .hero__pin { padding-block: var(--space-4) var(--space-3); }
  .hero--scene h1 { font-size: clamp(1.8rem, 1rem + 4.6vw, 2.4rem); }
  .hero--scene .lead { font-size: var(--text-xs); }
  .hero__widget { padding: var(--space-3); gap: var(--space-2); }
  .hero__widget-amount span:first-child { font-size: 2rem; }
  .hero__trust { font-size: 0.72rem; }
}
/* Écrans très courts (vieux téléphones) : l'estimateur se réduit à
   l'essentiel — le chiffre et l'accès au simulateur complet — pour que
   le héros tienne malgré tout en entier. */
@media (max-width: 920px) and (max-height: 700px) {
  .hero__widget .field,
  .hero__widget-heat { display: none; }
  .hero__widget-label { font-size: 0.68rem; }
  .hero__widget-amount span:first-child { font-size: 1.9rem; }
  .hero__trust { font-size: 0.68rem; }
  .hero--scene .lead { font-size: 0.78rem; }
  .hero__actions .btn--lg { padding: 0.7em 1.2em; }
  .hero__pin { padding-block: var(--space-3) var(--space-2); }
  .hero__actions { margin-block: var(--space-2) var(--space-1); }
  .hero--scene .eyebrow { margin-bottom: var(--space-2); }
  .hero__grid { gap: var(--space-3); }
}