/* Cristal — visual polish layer: softer radii, motion, hover states.
   Layered over the inline desktop styles from the design (attribute
   selectors + !important), loaded on every page after mobile.css.
   Motion is disabled for people who ask for reduced motion. */

html { scroll-behavior: smooth; }

/* ---------- Rounder shapes ---------- */
[style*="border-radius: 4px"] { border-radius: 8px !important; }
[style*="border-radius: 6px"] { border-radius: 12px !important; }
[style*="border-radius: 8px"] { border-radius: 18px !important; }
.devis-choice-box, #devis input, #devis textarea, #devis-recap, #devis-error { border-radius: 12px !important; }
input, select, textarea { border-radius: 12px !important; }

/* Hero decorative frame: concentric halo around the illustration instead of
   the design's offset frame (feedback rep_c776e0a76b544df8). */
[style*="position: absolute; right: -24px"] { inset: -14px !important; width: auto !important; height: auto !important; border-radius: 28px !important; border-color: rgba(201, 162, 74, 0.7) !important; }

/* ---------- Transitions & hover ---------- */
a, button, .devis-choice-box, input, select, textarea {
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background-color .22s ease,
              border-color .22s ease, color .22s ease, opacity .22s ease;
}

/* Buttons: any link/button with a solid fill lifts on hover. */
a[style*="background: #c9a24a"], button[style*="background: #c9a24a"],
a[style*="background: #1e2d5a"], button[style*="background: #1e2d5a"] {
  box-shadow: 0 1px 0 rgba(22, 34, 74, 0.08);
}
a[style*="background: #c9a24a"]:hover, button[style*="background: #c9a24a"]:hover {
  background: #d4ad57 !important; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(201, 162, 74, 0.7);
}
a[style*="background: #1e2d5a"]:hover, button[style*="background: #1e2d5a"]:hover {
  background: #26396f !important; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(30, 45, 90, 0.6);
}
a[style*="background: #c9a24a"]:active, button[style*="background: #c9a24a"]:active,
a[style*="background: #1e2d5a"]:active, button[style*="background: #1e2d5a"]:active { transform: translateY(0); box-shadow: none; }

/* Outlined buttons and pills. */
a[style*="border: 1.5px solid #c8cbd6"]:hover, button[style*="border: 1.5px solid #c8cbd6"]:hover {
  border-color: #1e2d5a !important; background: #f6f6f8 !important; transform: translateY(-2px);
}
a[style*="border: 1.5px solid #5a6a99"]:hover { border-color: #c9a24a !important; background: rgba(201, 162, 74, 0.12) !important; transform: translateY(-2px); }

/* Cards: service tiles, process steps, contact cards. */
a[style*="border: 1px solid #e3e5ec"], div[style*="border: 1px solid #e3e5ec"][style*="padding: 24px 28px"],
div[style*="background: #f6f6f8; border-radius: 8px"] {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease;
}
a[style*="border: 1px solid #e3e5ec"]:hover, a[style*="padding: 24px 28px"]:hover {
  transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(22, 34, 74, 0.35); border-color: #c9a24a !important;
}
a[style*="border: 1px solid #e3e5ec"]:hover svg { transform: scale(1.08); }
a[style*="border: 1px solid #e3e5ec"] svg { transition: transform .28s cubic-bezier(.2,.7,.2,1); }

/* Nav links: animated underline instead of a hard border. */
header nav > a:not([style*="background"]) { position: relative; border-bottom: 0 !important; }
header nav > a:not([style*="background"])::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #c9a24a; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
header nav > a:not([style*="background"]):hover::after, header nav > a[style*="color: #b8902e"]::after { transform: scaleX(1); }

/* Footer links slide slightly. */
footer a { transition: color .2s ease, transform .2s ease; display: inline-block; }
footer a:hover { color: #ffffff !important; transform: translateX(3px); }

/* Inputs: gold focus ring. */
#devis input:focus, #devis textarea:focus, #devis select:focus, input:focus, textarea:focus, select:focus {
  outline: none; border-color: #c9a24a !important; box-shadow: 0 0 0 4px rgba(201, 162, 74, 0.18);
}
.devis-choice-box:hover { transform: translateY(-1px); }
.devis-choice input:checked + .devis-choice-box { transform: translateY(-1px); box-shadow: inset 0 0 0 1px #c9a24a, 0 8px 18px -12px rgba(201, 162, 74, 0.8); }

/* Illustrations: slow zoom on hover of the card. */
svg[role="img"] { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); transform-origin: center; }
div:hover > svg[role="img"] { transform: scale(1.04); }

/* Header: sticky with a shadow once the page scrolls. */
@media (min-width: 901px) { header { position: sticky; top: 0; z-index: 50; } }
header { transition: box-shadow .3s ease; }
header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(22, 34, 74, 0.28); }

/* ---------- Scroll reveal (only when polish.js runs) ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal > * { transition-delay: inherit; }

/* Trust strip words drift in one after the other. */
html.js section[style*="height: 76px"] > span { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
html.js section[style*="height: 76px"].is-visible > span { opacity: 1; transform: none; }
html.js section[style*="height: 76px"].is-visible > span:nth-child(2) { transition-delay: .08s; }
html.js section[style*="height: 76px"].is-visible > span:nth-child(3) { transition-delay: .16s; }
html.js section[style*="height: 76px"].is-visible > span:nth-child(4) { transition-delay: .24s; }
html.js section[style*="height: 76px"].is-visible > span:nth-child(5) { transition-delay: .32s; }

/* Hero entrance. */
html.js .hero-in > * { opacity: 0; transform: translateY(14px); animation: cristal-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
html.js .hero-in > *:nth-child(2) { animation-delay: .08s; }
html.js .hero-in > *:nth-child(3) { animation-delay: .16s; }
html.js .hero-in > *:nth-child(4) { animation-delay: .24s; }
html.js .hero-in > *:nth-child(5) { animation-delay: .32s; }
@keyframes cristal-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .reveal, html.js section[style*="height: 76px"] > span, html.js .hero-in > * { opacity: 1 !important; transform: none !important; }
}