/* Toutes les animations décoratives sont sous .anim (ajoutée par js/boot.js
   seulement si prefers-reduced-motion n'est pas demandé). */
@property --amb1 { syntax: '<color>'; inherits: true; initial-value: #3DD6F5; }
@property --amb2 { syntax: '<color>'; inherits: true; initial-value: #8F7DFF; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 40% { transform: scale(1.14); } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .55; } }
@keyframes flow { to { background-position: 200% 0; } }

/* ============ Intro « démarrage moteur » ============ */
.intro { display: none; }
.intro-on .intro { display: grid; }
html.intro-on { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; place-items: center; }
.intro-half { position: absolute; left: 0; right: 0; height: 50.5%; transition: transform .8s var(--ease-io); }
.intro-half.ih-top { top: 0; background: linear-gradient(180deg, var(--night-deep), var(--night)); }
.intro-half.ih-bot { bottom: 0; background: linear-gradient(0deg, var(--night-deep), var(--night)); }
.intro.open { pointer-events: none; }
.intro.open .intro-half.ih-top { transform: translateY(-100%); }
.intro.open .intro-half.ih-bot { transform: translateY(100%); }
.intro-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; transition: opacity .3s, transform .6s var(--ease-io); }
.intro.open .intro-core { opacity: 0; transform: scale(1.08); }
.gauge-box { position: relative; width: min(64vw, 260px); }
.gauge { width: 100%; height: auto; overflow: visible; animation: fadeIn .4s ease both; }
.g-track { fill: none; stroke: #1F2732; stroke-width: 5; stroke-linecap: round; }
.g-fill { fill: none; stroke: url(#gl); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 452.4; stroke-dashoffset: 452.4; filter: drop-shadow(0 0 6px rgba(61, 214, 245, .75)); }
.g-tick { stroke: #36414F; stroke-width: 1.5; }
.g-tick.maj { stroke: #AEB9C6; stroke-width: 2.5; }
.g-tick.red { stroke: #E5533D; }
.g-num { fill: #7C8896; font: 600 12px var(--body); text-anchor: middle; }
.g-unit { fill: #55606D; font: 500 10px var(--body); text-anchor: middle; }
.g-needle { transform-box: view-box; transform-origin: 120px 120px; transform: rotate(-135deg); }
.g-needle path { fill: #fff; filter: drop-shadow(0 0 4px rgba(61, 214, 245, .9)); }
.g-needle circle { fill: #1A212B; stroke: var(--led); stroke-width: 2; }
.intro.run .g-needle { animation: needle 1.6s .2s both; }
.intro.run .g-fill { animation: gfill 1.6s .2s both; }
@keyframes needle {
  0% { transform: rotate(-135deg); animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  48% { transform: rotate(130deg); animation-timing-function: cubic-bezier(.5, 0, .4, 1); }
  80% { transform: rotate(-135deg); animation-timing-function: ease-out; }
  91% { transform: rotate(-98deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(-112deg); }
}
@keyframes gfill {
  0% { stroke-dashoffset: 452.4; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  48% { stroke-dashoffset: 8; animation-timing-function: cubic-bezier(.5, 0, .4, 1); }
  80% { stroke-dashoffset: 452.4; animation-timing-function: ease-out; }
  91% { stroke-dashoffset: 390; animation-timing-function: ease-in-out; }
  100% { stroke-dashoffset: 413; }
}
/* Bouton Start/Stop au centre du compte-tours */
.start { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 2px; color: #fff; background: radial-gradient(circle at 50% 35%, #2A3442, #151A22 70%); box-shadow: 0 0 0 2px #2C3644, 0 0 0 6px #0E1218, 0 0 0 8px color-mix(in srgb, var(--led) 70%, transparent), 0 0 34px 4px color-mix(in srgb, var(--led) 35%, transparent), inset 0 2px 6px rgba(255, 255, 255, .08); transition: opacity .35s, transform .35s var(--ease); animation: startPulse 2.2s ease-in-out infinite; font: inherit; }
.start b { font-family: var(--display); font-weight: 700; font-size: clamp(1rem, 4.2vw, 1.2rem); letter-spacing: .02em; }
.start small { font-size: .7rem; color: var(--mute-dark); }
.start:active { transform: translate(-50%, -50%) scale(.95); }
.start:focus-visible { outline: 3px solid var(--led); outline-offset: 10px; border-radius: 50%; }
@keyframes startPulse {
  50% { box-shadow: 0 0 0 2px #2C3644, 0 0 0 6px #0E1218, 0 0 0 8px var(--led), 0 0 48px 10px color-mix(in srgb, var(--led) 45%, transparent), inset 0 2px 6px rgba(255, 255, 255, .08); }
}
.intro.run .start { opacity: 0; transform: translate(-50%, -50%) scale(.85); pointer-events: none; animation: none; }
.intro { cursor: pointer; }
.intro-hint { margin-top: 26px; color: var(--mute-dark); font: 500 .95rem var(--body); transition: opacity .3s; }
.intro.run .intro-hint { opacity: 0; }
/* Logo « éteint » avant le démarrage, puis allumé */
.intro-logo { width: min(70vw, 300px); height: auto; margin-top: 6px; opacity: .22; filter: grayscale(.8) brightness(.6); }
.intro.run .intro-logo { animation: logoIn .7s var(--ease) 1.05s forwards; }
@keyframes logoIn { from { opacity: .22; transform: scale(1.06); filter: grayscale(.8) brightness(.6) blur(4px); } to { opacity: 1; transform: none; filter: grayscale(0) brightness(1) blur(0); } }
.intro-sub { color: var(--mute-dark); margin-top: 6px; opacity: 0; }
.intro.run .intro-sub { animation: fadeUp .5s var(--ease) 1.3s forwards; }
.intro-led { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, transparent, var(--led) 18%, var(--led-2) 82%, transparent); box-shadow: 0 0 18px var(--led), 0 0 46px rgba(143, 125, 255, .6); transform: scaleX(0); }
.intro.run .intro-led { animation: ledline .45s var(--ease) 1.7s forwards; }
@keyframes ledline { to { transform: scaleX(1); } }
.intro.open .intro-led { opacity: 0; transition: opacity .5s .25s; }

/* ============ En-tête ============ */
.top { transition: background .3s, transform .7s var(--ease); }
.top .wrap { transition: height .35s var(--ease); }
.top.scrolled { background: rgba(14, 18, 24, .96); }
@media (min-width: 761px) { .top.scrolled .wrap { height: 58px; } }
.scroll-led { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--led), var(--led-2)); box-shadow: 0 0 10px rgba(61, 214, 245, .7); pointer-events: none; }
.top nav a { position: relative; transition: color .2s; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--led); box-shadow: 0 0 8px var(--led); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top nav a:hover::after { transform: scaleX(1); }
.anim.intro-on .top { transform: translateY(-100%); }
.anim.ready .top { transition-delay: .1s; }

/* ============ Hero : couleur d'ambiance ============ */
.hero { --amb1: #3DD6F5; --amb2: #8F7DFF; position: relative; transition: --amb1 .7s ease, --amb2 .7s ease; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px 380px at 76% 52%, color-mix(in srgb, var(--amb1) 16%, transparent), transparent 70%); }
@media (max-width: 960px) { .hero::before { background: radial-gradient(440px 320px at 50% 80%, color-mix(in srgb, var(--amb1) 16%, transparent), transparent 70%); } }
.hero .wrap { position: relative; z-index: 1; }
.t-map .route { stroke: var(--amb1); stroke-dasharray: 420; stroke-dashoffset: 0; }
.t-map .dest { fill: var(--amb2); }
.t-map .origin { stroke: var(--amb1); }
.anim .bar i { animation: prog 40s linear infinite; }
@keyframes prog { from { width: 28%; } to { width: 96%; } }
.anim .ambient { animation: flow 8s linear infinite; }
.anim .dash-hint i { animation: pulse 1.8s ease-in-out infinite; }
.amb-badge.show { animation: badge 1.7s var(--ease) forwards; }
@keyframes badge { 0% { opacity: 0; transform: translate(-50%, -8px); } 15%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 0); } }
.amb-wave { position: absolute; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none; border: 2px solid var(--amb1); box-shadow: 0 0 22px var(--amb1), inset 0 0 12px var(--amb1); animation: wave .85s var(--ease) forwards; }
@keyframes wave { to { transform: scale(20); opacity: 0; } }

/* Hero : entrée après l'intro.
   Le texte reste rendu derrière les portes (bon pour le LCP) ; l'animation part
   de son état initial au moment où .ready est posé, quand les portes couvrent encore l'écran. */
@keyframes wordUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.anim .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.anim .hero h1 .w > span { display: inline-block; }
.anim.ready .hero h1 .w > span { animation: wordUp .85s var(--ease) calc(var(--i) * 55ms) both; }
.anim.ready .hero .lead { animation: heroIn .8s var(--ease) .4s both; }
.anim.ready .hero .ctas { animation: heroIn .8s var(--ease) .55s both; }
.anim.ready .hero .facts li { animation: heroIn .8s var(--ease) calc(.7s + var(--i) * .1s) both; }
.anim.ready .dash-hint { animation: heroIn .6s var(--ease) 1.7s both; }
.anim .dash .screen { opacity: 0; transform: perspective(1400px) rotateY(-30deg) rotateX(10deg) translateY(30px) scale(.9); }
.anim.ready .dash .screen { opacity: 1; transform: perspective(1400px) rotateY(calc(-9deg + var(--ty, 0deg))) rotateX(calc(3deg + var(--tx, 0deg))); transition: opacity .8s ease .15s, transform 1.3s var(--ease) .15s; }
.anim.ready .dash.live .screen { transition: transform .3s ease-out; }
@media (max-width: 960px) { .anim .dash .screen { transform: translateY(26px) scale(.94); } .anim.ready .dash .screen, .anim.ready .dash.live .screen { transform: none; } }
.anim .tile { opacity: 0; transform: scale(.96); }
.anim.ready .tile { opacity: 1; transform: none; transition: opacity .5s ease calc(.75s + var(--i) * .15s), transform .6s var(--ease) calc(.75s + var(--i) * .15s); }
.anim .t-map .route { stroke-dashoffset: 420; }
.anim.ready .t-map .route { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) 1.1s, stroke .7s; }
.anim .ambient { transform: scaleX(0); }
.anim.ready .ambient { transform: scaleX(1); transition: transform 1.1s var(--ease) 1s; }

/* ============ Apparition au scroll ============ */
.anim [data-reveal] { opacity: 0; transform: translateY(28px); }
.anim [data-reveal].in { opacity: 1; transform: none; transition: opacity .7s ease calc(var(--d, 0) * 1ms), transform .9s var(--ease) calc(var(--d, 0) * 1ms); }
.anim .how ol::before { transform: scaleX(0); }
.anim .how ol.in::before { transform: scaleX(1); transition: transform 1.3s var(--ease); }
.anim .how li::before { transform: translateY(18px); opacity: 0; }
.anim .how li.in::before { transform: none; opacity: 1; transition: transform .7s var(--ease) calc(var(--d, 0) * 1ms + 150ms), opacity .5s ease calc(var(--d, 0) * 1ms + 150ms); }

/* ============ Boutons : onde au clic ============ */
.btn { position: relative; overflow: hidden; isolation: isolate; transition: background .15s, border-color .15s, color .15s, scale .12s; }
.btn:active { scale: .97; }
.ripple { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .26; transform: scale(0); animation: ripple .65s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.btn.added { background: var(--ok); border-color: var(--ok); color: #fff; }

/* ============ Cartes prestations : halo ============ */
.offer { transition: translate .4s var(--ease), box-shadow .4s, border-color .4s; }
.offer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 214, 245, .13), transparent 60%); }
.offer .ph img { transition: transform .8s var(--ease); }
@media (hover: hover) {
  .offer:hover { translate: 0 -5px; box-shadow: 0 26px 44px -26px rgba(0, 0, 0, .8); border-color: #3A4657; }
  .offer:hover::after { opacity: 1; }
  .offer:hover .ph img { transform: scale(1.05); }
  .gallery button:hover img { transform: scale(1.05); }
}

/* ============ Configurateur ============ */
form[data-dir="fwd"] .step.active { animation: stepFwd .5s var(--ease); }
form[data-dir="back"] .step.active { animation: stepBack .5s var(--ease); }
@keyframes stepFwd { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
.svc.sweep::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(61, 214, 245, .26) 50%, transparent 70%); animation: sweep .85s var(--ease) forwards; }
.anim .svc.on .check { animation: pop .35s var(--ease); }
.chip:active span, .day:active span { transform: scale(.94); }
.anim .chip input:checked + span, .anim .day input:checked + span { animation: pop .3s var(--ease); }
.place label:active { transform: scale(.98); }
.anim .pack-note.show { animation: fadeUp .45s var(--ease); }
.anim .pack-note.show::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(61, 214, 245, .35) 50%, transparent 65%); transform: translateX(-100%); animation: sweep 1.1s var(--ease) .2s forwards; }
.anim .pack-note i { animation: pulse 1.6s ease-in-out infinite; }
.anim .done-panel.show, .anim .fail { animation: fadeUp .35s var(--ease); }
#next.loading { opacity: 1; cursor: progress; }
#next.loading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--led), var(--led-2)); box-shadow: 0 0 10px var(--led); transform-origin: left; animation: charge 2.4s var(--ease) forwards; }
@keyframes charge { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
.anim .done-panel.show .dc { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s var(--ease) .1s forwards; }
.anim .done-panel.show .dp { stroke-dasharray: 32; stroke-dashoffset: 32; animation: draw .4s var(--ease) .6s forwards; }
.anim .done-panel.show .ticket { animation: print .9s var(--ease) .3s both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.anim .done-panel.show .ticket dt, .anim .done-panel.show .ticket dd { animation: fadeUp .45s var(--ease) both; animation-delay: calc(.55s + var(--i) * 80ms); }
.spark { position: fixed; z-index: 60; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 8px currentColor; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* Nouvelles cartes (réalisations ajoutées) */
.anim .gallery li { animation: cardIn .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.anim .lightbox:not([hidden]) { animation: fadeIn .25s ease; }

/* ============ Carte zone : radar ============ */
.anim .map .zone-c { transform: scale(0); opacity: 0; }
.anim .map.in .zone-c { transform: scale(1); opacity: 1; transition: transform 1.3s var(--ease) .2s, opacity .6s ease .2s; }
.anim .map.in .zone-c.inner { transition-delay: .45s; }
.anim .map .radar { opacity: 0; }
.anim .map.in .radar { opacity: 1; transition: opacity .8s ease 1s; animation: radar 6s linear infinite; }
@keyframes radar { to { transform: rotate(360deg); } }
.anim .map.in .ping { animation: ping 3s ease-out 1.2s infinite; }
.anim .map.in .ping.p2 { animation-delay: 2.7s; }
@keyframes ping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(9); opacity: 0; } }
.anim .map .town { opacity: 0; transform: translateY(8px); }
.anim .map.in .town { opacity: 1; transform: none; transition: opacity .45s ease calc(.6s + var(--i) * 90ms), transform .55s var(--ease) calc(.6s + var(--i) * 90ms); }

/* ============ Mouvement réduit : site complet, sans décor ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .screen { transform: none !important; }
}