/* Pro Nettoyage 85 : styles communs en complement de Tailwind (animations, composants). */

:root {
  --brand-50: #eef6fc;
  --brand-500: #2a80c8;
  --brand-600: #1d72b6;
  --brand-700: #195c94;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --nav-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

html { scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
/* Fond du header garanti meme si Tailwind (CDN) ne se charge pas : le logo est blanc */
body > header { background-color: #1e293b; }

/* Focus visibles */
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }
.bg-slate-800 :focus-visible, .bg-slate-900 :focus-visible, .on-dark :focus-visible { outline-color: #85bbe6; }

/* Lien d'evitement */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: #fff; color: var(--slate-800); padding: .75rem 1rem; border-radius: .75rem;
  font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.skip-link:focus { top: 1rem; }

/* Navigation : lien actif */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px;
  background: var(--brand-500); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after, .nav-link.is-section::after { transform: scaleX(1); }

/* ---------- Micro-interactions ---------- */
.btn-lift { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s ease; }
.btn-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(29, 114, 182, .55); }
.btn-lift:active { transform: translateY(0); }
.faq-icon { transition: transform .3s var(--ease-out); }
/* Sans JS, les reponses de la FAQ restent lisibles */
html:not(.js) .faq-answer.hidden { display: block !important; }
html:not(.js) .faq-icon { display: none; }
/* Sans JS, le menu mobile est affiche deplie */
@media (max-width: 1023px) {
  html:not(.js) #mobile-menu.hidden { display: block !important; }
  html:not(.js) #menu-toggle { display: none !important; }
}
.arrow-nudge svg { transition: transform .3s var(--ease-out); }
.arrow-nudge:hover svg { transform: translateX(4px); }

/* Bouton d'appel flottant : l'icone "sonne" toutes les 8 s */
.call-fab-icon { animation: ring 8s ease-in-out 3s infinite; transform-origin: 50% 50%; }
@keyframes ring {
  0%, 88%, 100% { transform: rotate(0); }
  90% { transform: rotate(-14deg); }
  92% { transform: rotate(12deg); }
  94% { transform: rotate(-10deg); }
  96% { transform: rotate(8deg); }
  98% { transform: rotate(-4deg); }
}

/* ---------- Reveal au scroll (uniquement si JS + motion autorise) ---------- */
.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .6s var(--ease-out) var(--reveal-delay, 0ms), transform .6s var(--ease-out) var(--reveal-delay, 0ms);
}
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.motion [data-reveal="right"] { transform: translate3d(28px, 0, 0); }
.motion [data-reveal="scale"] { transform: scale(.96); }
.motion [data-reveal].is-visible { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  .motion [data-reveal="left"]:not(.is-visible), .motion [data-reveal="right"]:not(.is-visible) { transform: translate3d(0, 24px, 0); }
}
/* Les elements en attente de reveal ne doivent jamais creer de defilement horizontal (clip ne casse pas sticky) */
main { overflow-x: clip; }

/* ---------- Tilt 3D des cartes prestations ---------- */
.tilt-wrap { perspective: 900px; }
.tilt-card { position: relative; transform-style: preserve-3d; }
.tilt-card.tilt-on {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease-out), box-shadow .3s ease;
  will-change: transform;
}
.tilt-card.tilt-on.is-tilting { transition: transform .12s linear, box-shadow .3s ease; }
.tilt-card.tilt-on::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.16), transparent 55%);
  opacity: 0; transition: opacity .3s ease;
}
.tilt-card.tilt-on.is-tilting::after { opacity: 1; }
.tilt-depth { transform: translateZ(28px); }

/* ---------- Comparateur avant / apres ---------- */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.ba { --pos: 50%; }
.ba-frame { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: #e2e8f0; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.15), 0 0 12px rgba(0,0,0,.35); pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 999px; background: #fff; color: var(--brand-600); display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(15,23,42,.35); transition: transform .25s var(--ease-out);
}
.ba.is-dragging .ba-knob { transform: translate(-50%, -50%) scale(1.08); }
.ba-label {
  position: absolute; top: .75rem; padding: .25rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(15, 23, 42, .72); color: #fff; pointer-events: none;
}
.ba-label--before { left: .75rem; }
.ba-label--after { right: .75rem; background: var(--brand-600); }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-enhanced .ba-frame { cursor: ew-resize; }
.ba-enhanced .ba-range { pointer-events: none; }
.ba:focus-within .ba-frame { outline: 3px solid var(--brand-500); outline-offset: 3px; }

/* ---------- Hero : scene avant / apres pilotee au scroll ---------- */
.hero-scene { --p: .5; }
.motion .hero-scene { --p: 0; }
.hero-frame { position: relative; overflow: hidden; background: #334155; }
.hero-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-after { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p) * 100%) 0 0); }
.hero-jet {
  position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 4px; margin-left: -2px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 20%, #bfe0ff 50%, #fff 80%, rgba(255,255,255,0));
  box-shadow: 0 0 18px 4px rgba(133, 187, 230, .7);
  opacity: calc(min(var(--p) * 20, 1) * min((1 - var(--p)) * 20, 1));
}
.hero-scene .hero-jet { opacity: 0; }
.motion .hero-scene .hero-jet { opacity: calc(min(var(--p) * 20, 1) * min((1 - var(--p)) * 20, 1)); }
.hero-tag-after { opacity: calc(var(--p) * 1.4 - .2); }
.hero-tag-before { opacity: calc(1.2 - var(--p) * 1.4); }
.hero-scene .hero-tag-after, .hero-scene .hero-tag-before { opacity: 1; }
.motion .hero-scene .hero-tag-after { opacity: calc(var(--p) * 1.4 - .2); }
.motion .hero-scene .hero-tag-before { opacity: calc(1.2 - var(--p) * 1.4); }
.hero-tag--left { left: .75rem; background: var(--brand-600); }
.hero-tag--right { right: .75rem; }
.scroll-hint { display: none; }
@media (min-width: 1024px) {
  .motion .hero-scene { height: calc(200vh - var(--nav-h)); }
  .motion .hero-scene .hero-pin { position: sticky; top: var(--nav-h); min-height: calc(100vh - var(--nav-h)); }
  .motion .hero-scene .scroll-hint { display: flex; opacity: calc(1 - var(--p) * 4); }
}
.scroll-hint-dot { animation: hint-bounce 1.8s var(--ease-in-out) infinite; }
@keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- Ligne de progression des etapes ---------- */
.progress-path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.progress-on .progress-path { stroke-dashoffset: 1; }
.step-dot { transition: background-color .4s var(--ease-out), color .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.progress-on [data-step] .step-dot { background: #fff; color: var(--brand-600); box-shadow: inset 0 0 0 2px #b6d7f1; }
.progress-on [data-step].is-active .step-dot,
[data-step] .step-dot { background: var(--brand-600); color: #fff; box-shadow: 0 0 0 6px var(--brand-50); }
.progress-on [data-step].is-active .step-dot { transform: scale(1.06); }

/* ---------- Effet perlant (page hydrofuge) ---------- */
.pearl-surface {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #475569, #1e293b 70%);
}
.pearl-drop {
  position: absolute; top: -10%; width: var(--s, 18px); height: calc(var(--s, 18px) * 1.12);
  border-radius: 50% 50% 48% 52% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 12%, rgba(207,232,252,.55) 22%, rgba(42,128,200,.25) 60%, rgba(29,114,182,.4) 100%);
  box-shadow: 0 4px 10px rgba(15,23,42,.35), inset 0 -3px 6px rgba(15,23,42,.25);
  animation: pearl-slide var(--d, 9s) cubic-bezier(.55,.05,.65,.95) var(--delay, 0s) infinite;
  opacity: .9;
}
@keyframes pearl-slide {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: .9; }
  45% { transform: translate3d(var(--dx, 6px), 220px, 0); }
  55% { transform: translate3d(var(--dx, 6px), 240px, 0); }
  92% { opacity: .9; }
  100% { transform: translate3d(calc(var(--dx, 6px) * 2), 520px, 0); opacity: 0; }
}

/* ---------- Grille de realisations : filtres ---------- */
.ba-grid { transition: opacity .18s ease; }
.ba-grid.is-filtering { opacity: 0; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease-out); }

/* ---------- Contenu d'article ---------- */
.prose-article { color: #334155; font-size: 1.0625rem; line-height: 1.75; }
.prose-article > * + * { margin-top: 1.15em; }
.prose-article h2 { font-size: 1.6rem; line-height: 1.25; font-weight: 800; color: var(--slate-800); margin-top: 2.2em; }
.prose-article h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: var(--slate-800); margin-top: 1.8em; }
.prose-article h2 + *, .prose-article h3 + * { margin-top: .6em; }
.prose-article ul { list-style: none; padding-left: 0; }
.prose-article ul li { position: relative; padding-left: 1.6rem; }
.prose-article ul li + li { margin-top: .55em; }
.prose-article ul li::before {
  content: ""; position: absolute; left: .2rem; top: .7em; width: .5rem; height: .5rem; border-radius: 999px; background: var(--brand-500);
}
.prose-article ol { list-style: decimal; padding-left: 1.4rem; }
.prose-article a { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose-article a:hover { color: var(--brand-600); }
.prose-article strong { color: var(--slate-800); font-weight: 700; }

/* ---------- Carte Leaflet ---------- */
.map-pin-hq { display: grid; place-items: center; }
.map-pin-hq span {
  display: block; width: 22px; height: 22px; border-radius: 999px; background: var(--brand-600);
  border: 4px solid #fff; box-shadow: 0 0 0 6px rgba(29,114,182,.3), 0 4px 10px rgba(0,0,0,.35);
}
.leaflet-container { font-family: inherit; }
.leaflet-container a.btn-map { color: #fff; }

/* ---------- Mouvement reduit : tout est visible, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .pearl-drop { animation: none !important; opacity: .9; top: var(--rest, 30%); }
  .call-fab-icon, .scroll-hint-dot { animation: none !important; }
}