/* SmartLocal — effet WOW sur le thème bleu et blanc de la V23 (les couleurs ne changent pas).
   Ajoute : filigrane guilloché bleu (assets/filigree-*-blue|ice.svg), serif italique, profondeur, mouvement doux.
   Chargé APRÈS v17-blue.css. La variante noir et or est gardée à côté : sl-wow-gold.css (non chargée). */

:root { --serif: 'Cormorant Garamond', 'Times New Roman', serif; --blue-grad: linear-gradient(100deg, #1747b8 0%, #3a78ec 55%, #1b52c9 100%); }

/* ── Mots en italique : serif bleu dégradé ── */
.hero h1 em, .section-h em, .sector-heading h2 em, .local-hero h1 em {
  font-style: normal;
  background: var(--blue-grad); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.impact-tease .section-h em { font-style: normal; background: linear-gradient(100deg, #cfe4ff, #8fc0ff 60%, #d9eaff); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.v21-sitecopy h3 em { font-style: normal; }

/* ── Hero : filigrane bleu ── */
.hero .sl-bgvid { display: none; }
.hero { isolation: isolate; min-height: 800px !important; }
.hero-aurora:before { content: ""; position: absolute; right: -14vw; top: -10vw; width: min(80vw, 1120px); aspect-ratio: 1; background: url(assets/filigree-rosette-blue.svg) center / contain no-repeat; opacity: .5; animation: sl-rosette 240s linear infinite; }
.hero-aurora:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: url(assets/filigree-weave-blue.svg) center bottom / 1100px auto repeat-x; opacity: .38; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
@keyframes sl-rosette { to { transform: rotate(360deg); } }
.entry { box-shadow: 0 22px 60px #1d4fa626, 0 0 0 1px #ffffffcc inset !important; backdrop-filter: blur(14px); }
.entry:focus-within { box-shadow: 0 0 0 4px #245fd51f, 0 22px 60px #1d4fa633 !important; }
.v21-showcase { box-shadow: 0 50px 120px #12348a33, 0 0 0 1px #ffffff99 inset, 0 0 90px #3a78ec1f !important; }
/* Petit mot manuscrit sous le cadre, comme sur la maquette */
.hero-aside { position: relative; }
.hero-aside:after { content: "Une voix, pas un formulaire."; position: absolute; right: 2%; bottom: -36px; font: 500 30px/1.05 'Caveat', cursive; color: #1d54c7; transform: rotate(-5deg); pointer-events: none; }

/* ── Moins de blanc plat : fonds teintés + filigrane ── */
.sector-section, .process, .dual-section, .benefits, .closing, .local-method { position: relative; overflow: hidden; isolation: isolate; }
.sector-section > *, .process > *, .dual-section > *, .benefits > *, .closing > * { position: relative; z-index: 1; }
.sector-section { background: linear-gradient(180deg, #f2f7ff 0%, #e6f0ff 100%) !important; }
.sector-section:before { content: ""; position: absolute; left: -18vw; top: -12vw; width: min(60vw, 800px); aspect-ratio: 1; background: url(assets/filigree-rosette-blue.svg) center / contain no-repeat; opacity: .28; z-index: 0; animation: sl-rosette 300s linear infinite reverse; pointer-events: none; }
.process { background: linear-gradient(180deg, #ffffff 0%, #eaf2ff 100%) !important; }
.process:before { content: ""; position: absolute; inset: auto 0 0 0; height: 280px; background: url(assets/filigree-weave-blue.svg) center bottom / 1100px auto repeat-x; opacity: .34; z-index: 0; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); pointer-events: none; }
.dual-section { background: linear-gradient(180deg, #f8faff 0%, #edf4ff 100%) !important; }
.dual-section:before { content: ""; position: absolute; right: -20vw; top: -10vw; width: min(60vw, 800px); aspect-ratio: 1; background: url(assets/filigree-rosette-blue.svg) center / contain no-repeat; opacity: .22; z-index: 0; pointer-events: none; }
.benefits:before { content: ""; position: absolute; inset: 0 0 auto 0; height: 260px; background: url(assets/filigree-weave-blue.svg) center top / 1100px auto repeat-x; opacity: .26; z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); pointer-events: none; }

/* ── Sections bleu profond : filigrane glace ── */
.impact-tease { position: relative; overflow: hidden; isolation: isolate; }
.impact-tease:before { content: ""; position: absolute; left: -22vw; top: -14vw; width: min(72vw, 920px); aspect-ratio: 1; background: url(assets/filigree-rosette-ice.svg) center / contain no-repeat; opacity: .4; animation: sl-rosette 260s linear infinite reverse; pointer-events: none; z-index: 0; }
.impact-tease:after { content: ""; position: absolute; inset: auto 0 0 0; height: 260px; background: url(assets/filigree-weave-ice.svg) center bottom / 1100px auto repeat-x; opacity: .3; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
.impact-tease .container { position: relative; z-index: 1; }
.dual-card.owner { position: relative; overflow: hidden; isolation: isolate; }
.dual-card.owner:before { content: ""; position: absolute; right: -90px; bottom: -110px; width: 420px; aspect-ratio: 1; background: url(assets/filigree-rosette-ice.svg) center / contain no-repeat; opacity: .38; z-index: -1; pointer-events: none; }
.sector-detail { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 30px 80px #0b2a6a40; }
.sector-detail:before { content: ""; position: absolute; right: -80px; top: -120px; width: 380px; aspect-ratio: 1; background: url(assets/filigree-rosette-ice.svg) center / contain no-repeat; opacity: .32; z-index: -1; pointer-events: none; }

/* ── Clôture claire : trame bleue + grand mot en filigrane ── */
.closing { background: linear-gradient(180deg, #e9f3ff 0%, #dbe9ff 100%) !important; }
.closing:before { content: ""; position: absolute; inset: auto 0 0 0; height: 300px; background: url(assets/filigree-weave-blue.svg) center bottom / 1100px auto repeat-x; opacity: .4; z-index: 0; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); pointer-events: none; }
.closing:after { content: "smartlocal"; position: absolute; left: 50%; bottom: -3vw; transform: translateX(-50%); font: 800 21vw/1 Manrope, sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px #245fd533; z-index: 0; white-space: nowrap; pointer-events: none; }
.footer { position: relative; overflow: hidden; isolation: isolate; }
.footer:before { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; background: url(assets/filigree-weave-ice.svg) center top / 1100px auto repeat-x; opacity: .2; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.footer > * { position: relative; z-index: 1; }

/* ── Cartes : relief au survol ── */
.step, .benefit, .sector-card, .dual-card, .method-card { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, border-color .35s; }
.step:hover, .benefit:hover, .method-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px #1d4fa626; border-color: #7aa7ee; }
.dual-card:hover { transform: translateY(-4px); }
.step-number { background: linear-gradient(135deg, #3a78ec, #1747b8) !important; color: #fff !important; box-shadow: 0 10px 24px #245fd540; }

@media (max-width: 900px) {
  .hero { min-height: 0 !important; }
  .hero-aurora:before { right: -42vw; top: 0; width: 120vw; opacity: .32; }
  .hero-aside:after { position: static; display: block; margin-top: 14px; text-align: center; transform: rotate(-2deg); }
  .closing:after { font-size: 26vw; }
}
@media (prefers-reduced-motion: reduce) { .hero-aurora:before, .impact-tease:before, .sector-section:before { animation: none !important; } }

/* ── Carte d'exemple de la section Google : bleue (le vert venait de la V16) ── */
.local-demo-map { background-color: #1b4797 !important; background-image: linear-gradient(25deg, transparent 44%, #ffffff30 45%, #ffffff30 53%, transparent 54%), linear-gradient(115deg, transparent 38%, #ffffff30 39%, #ffffff30 47%, transparent 48%), linear-gradient(#ffffff14 1px, transparent 1px), linear-gradient(90deg, #ffffff14 1px, transparent 1px) !important; }
.local-display::before, .local-display::after { filter: hue-rotate(95deg) saturate(.9); }

/* ── Carte de la section Google (accueil) : même bleu que le reste ── */
.impact-tease div:has(> .tease-map) { background: #0f2f6b !important; border-color: #4a78d0 !important; box-shadow: 0 30px 80px #061a4a66 !important; }
.tease-map { background: #dbe8fb !important; }
.tease-map svg { filter: hue-rotate(105deg) saturate(1.15); }
.tease-pin { background: #1d4fb8 !important; }
.tease-pin.you { background: #f2c26b !important; color: #1a1a1a !important; }

/* ── « La technologie disparaît » : bleu nuit + verre + filigrane glace (moins de blanc plat) ── */
.benefits { background: radial-gradient(ellipse 60% 70% at 85% 0%, #2a62c866, transparent 62%), linear-gradient(180deg, #0b2860 0%, #0f3374 100%) !important; color: #fff; }
.benefits:before { background-image: url(assets/filigree-weave-ice.svg) !important; opacity: .3 !important; }
.benefits:after { content: ""; position: absolute; right: -14vw; bottom: -18vw; width: min(52vw, 700px); aspect-ratio: 1; background: url(assets/filigree-rosette-ice.svg) center / contain no-repeat; opacity: .3; z-index: 0; animation: sl-rosette 280s linear infinite; pointer-events: none; }
.benefits .section-h { color: #fff !important; } .benefits .section-lead, .benefits .eyebrow { color: #c7dbfb !important; }
.benefits .section-h em { background: linear-gradient(100deg, #cfe4ff, #8fc0ff 60%, #d9eaff); -webkit-background-clip: text; background-clip: text; }
.benefit { background: #ffffff12 !important; border: 1px solid #ffffff2a !important; backdrop-filter: blur(14px); box-shadow: 0 20px 50px #04143a40 !important; }
.benefit:hover { border-color: #9cc4ff !important; box-shadow: 0 28px 70px #04143a66 !important; background: #ffffff1a !important; }
.benefit h3 { color: #fff !important; } .benefit p { color: #cfdcf4 !important; }
.benefit-icon { background: #ffffff1f !important; color: #bcd8ff !important; }
.preview-toggle { display: none !important; }