/* ================= Couche « électrique » LF 2027 =================
   Intro de mise sous tension, circuit vivant dans le hero, bordures
   parcourues de courant, décryptage des titres, étincelles. */

/* ---------- Intro : mise sous tension ---------- */
.intro-screen { display: none; }
html.intro .intro-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(700px 420px at 50% 45%, #0F4A5C 0%, #0B2E3F 55%, #071F2B 100%); color: #fff;
  box-shadow: 0 2px 0 #22C3DD, 0 0 40px 6px rgba(34,195,221,.55); }
html.intro .intro-screen { animation: introOut .7s 1.5s cubic-bezier(.75, 0, .2, 1) forwards; }
@keyframes introOut { to { transform: translateY(-102%); } }
.intro-screen::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(34,195,221,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,195,221,.07) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%); animation: gridPulse 1.4s ease-in-out infinite alternate; }
@keyframes gridPulse { from { opacity: .35; } to { opacity: 1; } }
.intro-in { position: relative; text-align: center; width: min(560px, 100% - 48px); }
.intro-in .k { font: 700 .72rem var(--f-head); letter-spacing: .36em; text-transform: uppercase; color: #9BEFFC; opacity: 0; animation: introTxt .5s .1s forwards; }
.intro-in svg { display: block; width: 100%; height: auto; margin: 6px 0 2px; overflow: visible; }
.intro-in svg text { font-family: var(--f-head); font-weight: 900; font-size: 150px; fill: transparent; stroke: #22C3DD; stroke-width: 2; stroke-dasharray: 700; stroke-dashoffset: 700; filter: drop-shadow(0 0 8px rgba(34,195,221,.9)); animation: introDraw 1s .15s cubic-bezier(.6, 0, .3, 1) forwards, introFill .35s 1.05s forwards; }
@keyframes introTxt { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introFill { to { fill: #fff; stroke: #fff; } }
.intro-in .t { font: 800 clamp(.8rem, 2.4vw, 1rem) var(--f-head); letter-spacing: .22em; text-transform: uppercase; margin: 0 0 22px; opacity: 0; animation: introTxt .5s .45s forwards; }
.intro-bar { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); }
.intro-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, #0E6B80, #22C3DD, #fff); box-shadow: 0 0 14px #22C3DD; animation: charge 1.25s .05s cubic-bezier(.5, 0, .2, 1) forwards; }
.intro-bar i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 4px #22C3DD, 0 0 24px 8px rgba(34,195,221,.6); }
@keyframes charge { 60% { width: 72%; } to { width: 100%; } }
@property --pct { syntax: "<integer>"; inherits: false; initial-value: 0; }
.intro-pct { margin-top: 10px; font: 700 .75rem var(--f-head); letter-spacing: .2em; color: #9BEFFC; counter-reset: p var(--pct); animation: pct 1.25s .05s cubic-bezier(.5, 0, .2, 1) forwards; }
.intro-pct::before { content: "MISE SOUS TENSION · " counter(p) " %"; }
@keyframes pct { 60% { --pct: 72; } to { --pct: 100; } }
/* Le hero attend la fin de l'intro pour jouer son entrée. */
html.intro:not(.intro-out) .hero, html.intro:not(.intro-out) .hero * { animation-play-state: paused !important; }

/* ---------- Hero : circuit vivant ---------- */
.circuit { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: fadeIn 1.6s .4s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.glow-year { animation: glow 3s ease-in-out infinite alternate, neon 7s 3.2s infinite; }
@keyframes neon { 0%, 89%, 100% { opacity: 1; } 90% { opacity: .35; } 91% { opacity: 1; } 92.5% { opacity: .5; } 94% { opacity: 1; } }
.title-card { box-shadow: 0 30px 60px -30px rgba(11, 46, 63, .7), 0 0 0 1px rgba(34,195,221,.25); }
.title-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--ang), transparent 0 62%, rgba(34,195,221,.9) 78%, #fff 82%, transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 4.5s linear infinite; filter: drop-shadow(0 0 6px #22C3DD); }

/* CTA principal : impulsion d'énergie */
.btn.magnetic, #submit { animation: energy 2.8s 2.4s ease-out infinite; }
@keyframes energy { 0% { box-shadow: 0 0 0 0 rgba(34,195,221,.6), 0 12px 24px -12px rgba(14,107,128,.9); } 70%, 100% { box-shadow: 0 0 0 18px rgba(34,195,221,0), 0 12px 24px -12px rgba(14,107,128,.9); } }
.btn:not(.btn-ghost):not(.btn-light)::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s cubic-bezier(.2, .8, .2, 1); }
.btn:not(.btn-ghost):not(.btn-light):hover::after { left: 120%; }
#submit.loading::after { position: static; width: 16px; transform: none; background: none; }

/* Étincelles au clic */
.spark { position: fixed; z-index: 120; width: 2px; height: 14px; border-radius: 2px; pointer-events: none; background: linear-gradient(#fff, #22C3DD); box-shadow: 0 0 6px #22C3DD; transform-origin: 50% 0; animation: spark .55s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes spark { from { opacity: 1; transform: rotate(var(--a)) translateY(4px) scaleY(1); } to { opacity: 0; transform: rotate(var(--a)) translateY(var(--r)) scaleY(.2); } }

/* ---------- Bordures parcourues de courant ---------- */
.volt { position: relative; }
.volt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--ang), transparent 0 68%, rgba(34,195,221,.85) 84%, #fff 87%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s; filter: drop-shadow(0 0 5px #22C3DD); }
.volt:hover::after, .volt.zap::after { opacity: 1; animation: spin-border 2.2s linear infinite; }
.volt.zap::after { animation-iteration-count: 1; animation-fill-mode: forwards; }

/* Chiffres clés : flash de charge à la fin du comptage */
.stat.zap b { animation: statZap .9s ease-out; }
@keyframes statZap { 0% { filter: drop-shadow(0 0 0 rgba(34,195,221,0)); } 20% { filter: drop-shadow(0 0 14px rgba(34,195,221,1)) brightness(1.5); } 100% { filter: drop-shadow(0 0 0 rgba(34,195,221,0)); } }
.stat { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.stat:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -26px rgba(11,46,63,.6); }

/* ---------- Ligne électrique à l'entrée des sections ---------- */
.zapline { position: absolute; left: 0; top: 0; height: 2px; width: 100%; pointer-events: none; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, transparent, #0E6B80 20%, #22C3DD 70%, #fff 99%, transparent); box-shadow: 0 0 10px rgba(34,195,221,.9); opacity: 0; }
.zapline.go { animation: zapline 1.2s cubic-bezier(.7, 0, .2, 1) forwards; }
@keyframes zapline { 0% { opacity: 1; transform: scaleX(0); } 70% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
.section { position: relative; }

/* Titres décryptés */
.decode { font-variant-numeric: tabular-nums; }
.decode .g { color: var(--cyan); text-shadow: 0 0 8px rgba(34,195,221,.8); }

/* ---------- Détails électrisés ---------- */
.countdown b.tick { animation: tick .45s cubic-bezier(.2, .8, .2, 1), zapText .7s ease-out; }
@keyframes zapText { 0% { text-shadow: 0 0 12px rgba(34,195,221,1); color: var(--teal-500); } 100% { text-shadow: none; } }
.ticker-track span::after { animation: diamond 2.4s ease-in-out infinite; text-shadow: 0 0 8px #22C3DD; }
.ticker-track span:nth-child(3n+1)::after { animation-delay: -.8s; }
.ticker-track span:nth-child(3n+2)::after { animation-delay: -1.6s; }
@keyframes diamond { 50% { color: #fff; text-shadow: 0 0 14px #22C3DD, 0 0 4px #fff; } }
.stepbar { overflow: visible; }
.stepbar span::before { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px #22C3DD; animation: headPulse 1.2s ease-in-out infinite alternate; }
@keyframes headPulse { to { box-shadow: 0 0 14px 6px rgba(34,195,221,.7); } }
.stepbar span::after { border-radius: 999px; }
.timeline li.mod::before { animation: node 2.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .25s); }
@keyframes node { 0%, 100% { box-shadow: 0 0 0 4px rgba(34,195,221,.2); } 50% { box-shadow: 0 0 0 7px rgba(34,195,221,.12), 0 0 12px rgba(34,195,221,.9); } }
.footer { position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #22C3DD, transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: rail 4s linear infinite; }
@keyframes rail { from { background-position: -40% 0; } to { background-position: 140% 0; } }

@media (prefers-reduced-motion: reduce) {
  html.intro .intro-screen { display: none; }
  .circuit { opacity: .6; }
  *, *::before, *::after { animation-delay: 0s !important; }
}

/* Le ruban « Offre spéciale » dépasse de la carte : ne pas le rogner. */
.price.featured.spot { overflow: visible; }
.price.spot::before { border-radius: inherit; }