:root {
  --blue-950: #031b42;
  --blue-900: #063b80;
  --blue-700: #0b5bb0;
  --blue-100: #eaf2fb;
  --ink: #102238;
  --muted: #5b6878;
  --line: #dbe4ee;
  --paper: #ffffff;
  --soft: #f5f8fc;
  --accent: #f0a128;
  --danger: #aa2535;
  --radius: 18px;
  --shadow: 0 16px 40px rgba(6, 59, 128, .11);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: #fff; color: var(--blue-900); font-weight: 800; }
.skip-link:focus { top: 1rem; }
.topbar { background: var(--blue-950); color: rgba(255,255,255,.82); font-size: .82rem; }
.topbar-inner { display: flex; gap: 1.6rem; justify-content: flex-end; padding: .48rem 0; }
.topbar a { color: #fff; font-weight: 700; text-decoration: none; }
.site-header { background: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(3,27,66,.08); }
.navigation { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { width: 128px; height: 68px; object-fit: cover; object-position: center 52%; border-radius: 8px; box-shadow: 0 4px 10px rgba(3,27,66,.12); }
.main-menu { display: flex; gap: 1.7rem; align-items: center; }
.main-menu > a:not(.button) { color: var(--ink); font-size: .9rem; font-weight: 750; text-decoration: none; position: relative; white-space: nowrap; }
.main-menu > a:not(.button)::after { content: ""; position: absolute; height: 2px; inset: auto 0 -9px; background: var(--blue-700); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.main-menu > a:not(.button):hover::after, .main-menu > a.is-active::after { transform: scaleX(1); }
.menu-toggle { display: none; background: transparent; border: 0; color: var(--blue-900); font: inherit; font-weight: 800; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 48px; padding: .72rem 1.08rem; border: 1px solid var(--blue-900); border-radius: 5px; background: var(--blue-900); color: #fff; font-weight: 800; font-size: .92rem; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, border .2s; }
.button:hover { transform: translateY(-2px); background: var(--blue-700); border-color: var(--blue-700); }
.button-small { min-height: 40px; padding: .53rem .8rem; }
.button-ghost { background: transparent; border-color: rgba(255,255,255,.65); color: #fff; }
.button-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.button-light { background: #fff; color: var(--blue-900); border-color: #fff; }
.button-light:hover { color: #fff; }
.hero { color: #fff; overflow: hidden; background: radial-gradient(circle at 82% 10%, #135eb0 0, #063b80 34%, #031b42 90%); position: relative; }
.hero::before { content: ""; position: absolute; width: 50vw; height: 50vw; min-width: 500px; min-height: 500px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; right: -15vw; top: -25vw; }
.hero-grid { min-height: 535px; display: grid; grid-template-columns: minmax(0, 1.18fr) .82fr; align-items: center; gap: 3rem; position: relative; }
.hero-content { padding: 5.7rem 0; }
.eyebrow { margin: 0 0 .8rem; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--blue-700); font-weight: 900; }
.eyebrow-light { color: rgba(255,255,255,.7); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Arial Narrow", Impact, Inter, sans-serif; letter-spacing: .01em; line-height: 1.08; }
h1 { max-width: 760px; margin-bottom: 1.25rem; font-size: clamp(2.7rem, 5vw, 5rem); }
h2 { font-size: clamp(1.95rem, 3vw, 3rem); margin-bottom: 1rem; }
h3 { font-size: 1.3rem; margin-bottom: .7rem; }
.lead { max-width: 670px; color: rgba(255,255,255,.86); font-size: 1.12rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2rem 0 1.1rem; }
.hero-note { color: rgba(255,255,255,.65); font-size: .87rem; }
.hero-mark { justify-self: end; width: 100%; max-width: 310px; min-height: 330px; padding: 2rem; border: 1px solid rgba(255,255,255,.26); background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.01)); display: flex; align-items: flex-end; position: relative; overflow: hidden; }
.hero-mark p { color: rgba(255,255,255,.8); font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.22; letter-spacing: .06em; font-weight: 300; margin: 0; z-index: 1; }.hero-mark strong { color: #fff; font-size: 1.35em; }
.electric-line { position: absolute; width: 130%; height: 1px; background: var(--accent); transform: rotate(-44deg); top: 48%; left: -15%; box-shadow: 0 0 22px var(--accent); }
.trust-bar { border-bottom: 1px solid var(--line); background: #fff; }.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }.trust-grid div { padding: 1.5rem 1rem; display: flex; align-items: baseline; gap: .65rem; border-right: 1px solid var(--line); }.trust-grid div:first-child { border-left: 1px solid var(--line); }.trust-grid strong { color: var(--blue-900); font-size: 1.25rem; }.trust-grid span { color: var(--muted); font-size: .82rem; }
.section { padding: clamp(4.2rem, 7vw, 6.7rem) 0; }.section-soft { background: var(--soft); }.section-heading { margin-bottom: 2.8rem; }.split-heading { display: grid; grid-template-columns: 1fr .66fr; align-items: end; gap: 4rem; }.split-heading > p { color: var(--muted); max-width: 400px; margin-bottom: 0; }.section-heading-center { text-align: center; }.section-heading-center h2 { margin-inline: auto; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }.service-card { padding: 2.1rem 1.6rem; background: #fff; min-height: 295px; display: flex; flex-direction: column; }.service-icon { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--blue-100); color: var(--blue-900); margin-bottom: 1.5rem; }.service-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }.service-card p { color: var(--muted); font-size: .92rem; }.service-card a { color: var(--blue-900); font-weight: 800; font-size: .9rem; text-decoration: none; margin-top: auto; }.service-card a span, .text-link span { margin-left: .4rem; transition: margin .2s; }.service-card a:hover span, .text-link:hover span { margin-left: .7rem; }
.callout { background: var(--blue-900); color: #fff; }.callout-grid { display: flex; align-items: center; justify-content: space-between; gap: 3rem; padding: 4rem 0; }.callout h2 { max-width: 750px; margin: 0; }.callout .button { flex-shrink: 0; }
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }.project-card { background: #fff; box-shadow: 0 4px 18px rgba(16,34,56,.07); }.project-image { overflow: hidden; display: block; aspect-ratio: 1.33; }.project-image img { height: 100%; width: 100%; object-fit: cover; transition: transform .45s; }.project-card:hover img { transform: scale(1.045); }.project-content { padding: 1.2rem 1.25rem 1.35rem; }.project-content p, .gallery-card-content > p { margin-bottom: .35rem; color: var(--blue-700); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 800; }.project-content h3 { margin: 0; font-size: 1.12rem; }.center-link { text-align: center; margin: 2.2rem 0 0; }.text-link { color: var(--blue-900); font-weight: 850; text-decoration: none; }.contact-banner { margin-block: 0; padding-block: 3rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }.contact-banner h2 { margin: 0; }.contact-banner p { color: var(--muted); }.contact-banner .button { margin-top: .5rem; }
.page-hero { color: #fff; background: linear-gradient(120deg, var(--blue-950), var(--blue-900)); padding: 5rem 0; }.page-hero h1 { max-width: 920px; font-size: clamp(2.5rem, 4.6vw, 4.5rem); margin-bottom: 1rem; }.page-hero p:not(.eyebrow) { max-width: 750px; color: rgba(255,255,255,.78); font-size: 1.08rem; }.page-hero .eyebrow { color: rgba(255,255,255,.62); }.page-hero-compact { padding: 3.5rem 0; }
.service-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }.service-detail { display: grid; grid-template-columns: 75px 88px 1fr; align-items: start; gap: 1.3rem; padding: 2.6rem; background: #fff; }.service-detail-number { color: var(--blue-100); font-size: 3rem; line-height: 1; font-family: Impact, sans-serif; }.service-icon-large { width: 64px; height: 64px; padding: 16px; margin: 0; }.service-detail p { max-width: 720px; color: var(--muted); }.service-detail-note { color: var(--blue-900) !important; font-size: .9rem; font-weight: 750; }.checklist-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; }.steps-list { margin: 0; padding: 0; list-style: none; counter-reset: steps; display: grid; gap: 1.2rem; }.steps-list li { counter-increment: steps; position: relative; padding-left: 3.5rem; color: var(--muted); }.steps-list li::before { content: "0" counter(steps); position: absolute; left: 0; top: -.15rem; color: var(--blue-900); font-family: Impact, sans-serif; font-size: 1.6rem; }.steps-list strong { color: var(--ink); }.cta-simple { display: flex; align-items: center; justify-content: space-between; gap: 3rem; }.cta-simple h2 { margin-bottom: .5rem; }.cta-simple p { margin: 0; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }.gallery-card { box-shadow: var(--shadow); background: #fff; }.gallery-trigger { border: 0; padding: 0; position: relative; width: 100%; cursor: zoom-in; display: block; overflow: hidden; aspect-ratio: 1.32; }.gallery-trigger img { height: 100%; width: 100%; object-fit: cover; transition: transform .4s; }.gallery-card:hover .gallery-trigger img { transform: scale(1.04); }.gallery-zoom { position: absolute; right: 1rem; bottom: 1rem; width: 35px; height: 35px; display: grid; place-content: center; color: #fff; background: var(--blue-900); border-radius: 50%; font-size: 1.5rem; }.gallery-card-content { padding: 1.35rem; }.gallery-card-content h2 { font-size: 1.25rem; margin-bottom: .65rem; }.gallery-excerpt { color: var(--muted); font-size: .9rem; margin-bottom: 0; }.lightbox { position: fixed; z-index: 100; inset: 0; background: rgba(3,27,66,.92); padding: 4rem 1rem; place-items: center; }.lightbox:not([hidden]) { display: grid; }.lightbox figure { max-width: min(100%, 1050px); max-height: 100%; margin: 0; color: #fff; }.lightbox figure img { max-height: calc(100vh - 8rem); width: auto; margin: auto; }.lightbox figcaption { padding-top: .8rem; text-align: center; font-weight: 800; }.lightbox-close { position: fixed; top: 1.2rem; right: 1.5rem; background: transparent; border: 0; color: #fff; font-size: 2.4rem; cursor: pointer; }
.contact-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 4rem; align-items: start; }.contact-details { padding: 2.2rem; background: var(--blue-950); color: #fff; }.contact-details .eyebrow { color: rgba(255,255,255,.58); }.contact-details h2 { font-size: 2rem; }.contact-details dl { margin: 2rem 0; }.contact-details dl > div { border-top: 1px solid rgba(255,255,255,.17); padding: 1rem 0; }.contact-details dt { color: rgba(255,255,255,.57); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 900; }.contact-details dd { margin: .35rem 0 0; }.contact-details a { color: #fff; }.contact-tip { margin: 0; color: rgba(255,255,255,.75); font-size: .9rem; }.contact-form-wrap { padding: .3rem 0; }.contact-form-wrap h2 { font-size: 2.1rem; }label { display: inline-block; margin-bottom: .4rem; font-weight: 800; font-size: .87rem; }input, textarea { width: 100%; border: 1px solid #c4d1df; border-radius: 4px; background: #fff; color: var(--ink); padding: .75rem .8rem; font: inherit; line-height: 1.4; }textarea { resize: vertical; }.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }.check-field { display: flex; gap: .7rem; align-items: flex-start; }.check-field input { width: 18px; height: 18px; flex-shrink: 0; margin-top: .22rem; }.check-field label { color: var(--muted); font-weight: 500; }.form-legal { color: var(--muted); font-size: .78rem; margin-top: 1rem; }.form-honeypot { position: absolute; left: -9999px; }.alert { padding: 1rem 1.1rem; margin-bottom: 1.3rem; border-left: 4px solid; }.alert p, .alert ul { margin-bottom: 0; }.alert-success { color: #1a6035; background: #eefaf1; border-color: #228b49; }.alert-error { color: #8a2431; background: #fff0f2; border-color: var(--danger); }.alert-error ul { padding-left: 1.2rem; }
.legal-content { max-width: 850px; }.legal-content h2 { margin-top: 2.6rem; font-size: 1.6rem; }.legal-content p { color: var(--muted); }.legal-list { margin: 1.5rem 0; border-top: 1px solid var(--line); }.legal-list > div { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }.legal-list dt { font-weight: 800; }.legal-list dd { margin: 0; color: var(--muted); }
.site-footer { background: var(--blue-950); color: rgba(255,255,255,.75); padding: 4rem 0 1.1rem; }.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 4rem; }.site-footer h2 { color: #fff; font-size: 1.25rem; margin-bottom: 1rem; }.site-footer p { font-size: .9rem; }.site-footer a { display: block; color: rgba(255,255,255,.82); font-size: .9rem; margin-bottom: .45rem; }.footer-link { color: #fff !important; font-weight: 750; }.site-footer address { font-style: normal; font-size: .9rem; margin-bottom: .45rem; }.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .78rem; }.footer-bottom a { margin: 0; }
@media (max-width: 900px) { .main-menu { gap: 1rem; }.hero-grid { grid-template-columns: 1fr .55fr; }.service-grid { grid-template-columns: repeat(2, 1fr); }.gallery-grid { grid-template-columns: repeat(2, 1fr); }.split-heading, .contact-grid, .checklist-grid { grid-template-columns: 1fr; gap: 2.5rem; }.footer-grid { gap: 2rem; }.contact-banner { gap: 2rem; } }
@media (max-width: 720px) { .container { width: min(100% - 32px, 1160px); }.topbar-inner { justify-content: space-between; gap: .6rem; font-size: .7rem; }.navigation { min-height: 72px; }.brand img { width: 108px; height: 56px; }.menu-toggle { display: inline-flex; }.main-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 1rem 16px 1.3rem; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 8px 15px rgba(3,27,66,.06); flex-direction: column; align-items: stretch; gap: 0; }.main-menu.is-open { display: flex; }.main-menu > a:not(.button) { padding: .8rem 0; }.main-menu > a:not(.button)::after { display: none; }.main-menu .button { margin-top: .6rem; }.hero-grid { min-height: auto; grid-template-columns: 1fr; }.hero-content { padding: 4rem 0 3rem; }.hero-mark { display: none; }.trust-grid { grid-template-columns: repeat(2, 1fr); }.trust-grid div:nth-child(odd) { border-left: 1px solid var(--line); }.trust-grid div { padding: 1rem .6rem; gap: .3rem; flex-direction: column; }.trust-grid span { font-size: .72rem; }.split-heading, .contact-banner { grid-template-columns: 1fr; }.callout-grid, .cta-simple { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }.service-detail { grid-template-columns: 54px 1fr; padding: 1.6rem; gap: 1rem; }.service-detail > :last-child { grid-column: 1 / -1; }.service-detail-number { font-size: 2.2rem; }.project-grid, .gallery-grid { grid-template-columns: 1fr; }.form-row { grid-template-columns: 1fr; }.footer-grid { grid-template-columns: 1fr; }.footer-bottom { margin-top: 2rem; flex-direction: column; gap: .5rem; }.legal-list > div { grid-template-columns: 1fr; gap: .2rem; } }

/* Direction artistique enrichie : photographie métier, profondeur et micro-interactions. */
.hero.hero-photo {
  background-image: linear-gradient(90deg, rgba(3, 27, 66, .98) 0%, rgba(3, 27, 66, .92) 40%, rgba(3, 27, 66, .48) 65%, rgba(3, 27, 66, .14) 100%), url("../images/hero-electrician.png");
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.hero.hero-photo::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(53vw, 780px);
  height: 1px;
  right: -8%;
  top: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), #f0a128, transparent);
  box-shadow: 0 0 25px rgba(240,161,40,.7);
  transform: rotate(-31deg);
  animation: electricSweep 8s ease-in-out infinite;
}
.hero-photo .hero-mark {
  backdrop-filter: blur(9px);
  box-shadow: 0 22px 55px rgba(0,0,0,.2);
  animation: floatMark 7s ease-in-out infinite;
}
.service-card, .project-card, .gallery-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(6,59,128,.13); position: relative; z-index: 1; }
.service-card:hover .service-icon { background: var(--blue-900); color: #fff; transform: rotate(-7deg) scale(1.06); }
.service-icon { transition: transform .25s ease, background .25s ease, color .25s ease; }
.project-card:hover, .gallery-card:hover { transform: translateY(-6px); box-shadow: 0 22px 45px rgba(6,59,128,.17); }
.callout { position: relative; overflow: hidden; }
.callout::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 87% 30%, rgba(255,255,255,.14) 0 1px, transparent 2px); background-size: 20px 20px; opacity: .35; }
.callout-grid { position: relative; z-index: 1; }
.contact-banner { position: relative; overflow: hidden; }
.contact-banner::before { content: ""; width: 200px; height: 200px; position: absolute; border: 1px solid rgba(11,91,176,.16); border-radius: 50%; right: 6%; top: 50%; transform: translateY(-50%); }
.js-motion .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes electricSweep { 0%, 100% { opacity: .35; transform: rotate(-31deg) translateX(-10%); } 50% { opacity: .9; transform: rotate(-31deg) translateX(10%); } }
@keyframes floatMark { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .hero.hero-photo::after, .hero-photo .hero-mark { animation: none; } .service-card, .project-card, .gallery-card, .service-icon, .js-motion .reveal { transition: none; } .js-motion .reveal { opacity: 1; transform: none; } }
@media (max-width: 720px) { .hero.hero-photo { background-position: 66% center; background-image: linear-gradient(90deg, rgba(3,27,66,.98) 0%, rgba(3,27,66,.92) 65%, rgba(3,27,66,.58) 100%), url("../images/hero-electrician.png"); } .contact-banner::before { right: -80px; } }

/* Univers photographique de chaque page publique. */
.page-hero { position: relative; overflow: hidden; background-size: cover; background-position: center; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(112deg, transparent 0 47%, rgba(255,255,255,.08) 47.2% 47.35%, transparent 47.55% 100%); opacity: .75; animation: pageLineDrift 13s ease-in-out infinite; }
.page-hero::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; right: -190px; top: -270px; box-shadow: 0 0 0 35px rgba(255,255,255,.025), 0 0 0 70px rgba(255,255,255,.02); }
.page-hero-services { background-image: linear-gradient(90deg, rgba(3,27,66,.98) 0%, rgba(3,27,66,.92) 42%, rgba(3,27,66,.45) 68%, rgba(3,27,66,.12) 100%), url("../images/services-electrician.png"); }
.page-hero-projects { background-image: linear-gradient(90deg, rgba(3,27,66,.98) 0%, rgba(3,27,66,.92) 42%, rgba(3,27,66,.44) 69%, rgba(3,27,66,.1) 100%), url("../images/projects-cabinet.png"); }
.page-hero-contact { background-image: linear-gradient(90deg, rgba(3,27,66,.98) 0%, rgba(3,27,66,.91) 42%, rgba(3,27,66,.42) 70%, rgba(3,27,66,.08) 100%), url("../images/contact-home.png"); }
.page-hero-legal { background-image: linear-gradient(90deg, rgba(3,27,66,.98) 0%, rgba(3,27,66,.93) 42%, rgba(3,27,66,.44) 70%, rgba(3,27,66,.08) 100%), url("../images/legal-blueprint.png"); }
.page-hero-services .eyebrow, .page-hero-projects .eyebrow, .page-hero-contact .eyebrow, .page-hero-legal .eyebrow { color: rgba(255,255,255,.62); }
.service-detail { position: relative; overflow: hidden; transition: background .3s ease, transform .3s ease; }
.service-detail::after { content: ""; width: 170px; height: 170px; position: absolute; right: -92px; bottom: -92px; border: 1px solid rgba(11,91,176,.13); border-radius: 50%; box-shadow: 0 0 0 20px rgba(11,91,176,.035), 0 0 0 40px rgba(11,91,176,.025); transition: transform .55s ease; }
.service-detail:hover { background: linear-gradient(100deg, #fff, #f7fbff); transform: translateX(7px); }
.service-detail:hover::after { transform: scale(1.22); }
.service-detail > * { position: relative; z-index: 1; }
.steps-list li { padding-top: .1rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(219,228,238,.8); transition: padding-left .28s ease, color .28s ease; }
.steps-list li:hover { padding-left: 3.9rem; color: var(--blue-900); }
.gallery-card { position: relative; overflow: hidden; }
.gallery-card::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 1px solid rgba(255,255,255,.42); transform: scale(.96); opacity: 0; transition: transform .3s ease, opacity .3s ease; }
.gallery-card:hover::before { transform: scale(.985); opacity: 1; }
.gallery-card:nth-child(3n+2) { margin-top: 2rem; }
.gallery-card:nth-child(3n) { margin-top: .7rem; }
.contact-details { position: relative; overflow: hidden; background-image: linear-gradient(160deg, rgba(3,27,66,.96), rgba(3,27,66,.78)), url("../images/contact-home.png"); background-size: cover; background-position: right center; box-shadow: var(--shadow); }
.contact-details::after { content: ""; position: absolute; width: 240px; height: 240px; left: -140px; bottom: -140px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 0 25px rgba(255,255,255,.04); }
.contact-details > * { position: relative; z-index: 1; }
.contact-form-wrap { position: relative; padding: 2rem; background: #fff; box-shadow: 0 14px 42px rgba(6,59,128,.09); }
.contact-form-wrap::before { content: ""; position: absolute; width: 54px; height: 3px; left: 2rem; top: 0; background: var(--accent); }
.legal-content { position: relative; }
.legal-content::before { content: ""; position: absolute; z-index: -1; left: -18vw; top: 13rem; width: 38vw; height: 38vw; border-radius: 50%; background: radial-gradient(circle, rgba(11,91,176,.06), transparent 65%); }
@keyframes pageLineDrift { 0%,100% { transform: translateX(-7%); opacity: .35; } 50% { transform: translateX(7%); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .page-hero::before { animation: none; } .service-detail, .service-detail::after, .steps-list li, .gallery-card::before { transition: none; } }
@media (max-width: 720px) { .page-hero-services { background-position: 65% center; } .page-hero-projects { background-position: 67% center; } .page-hero-contact { background-position: 62% center; } .page-hero-legal { background-position: 66% center; } .gallery-card:nth-child(3n+2), .gallery-card:nth-child(3n) { margin-top: 0; } .contact-form-wrap { padding: 1.5rem; } .contact-form-wrap::before { left: 1.5rem; } .service-detail:hover { transform: none; } }

.hero::before, .hero::after, .hero-photo .hero-mark, .page-hero::after { transition: transform .45s ease-out; }
.hero::before { transform: translate(var(--hero-x, 0px), var(--hero-y, 0px)); }
.hero::after { transform: rotate(-31deg) translate(var(--hero-x, 0px), var(--hero-y, 0px)); }
.hero-photo .hero-mark { transform: translate(calc(var(--hero-x, 0px) * -.55), calc(var(--hero-y, 0px) * -.55)); }
.page-hero::after { transform: translate(calc(var(--hero-x, 0px) * -.45), calc(var(--hero-y, 0px) * -.45)); }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after, .hero-photo .hero-mark, .page-hero::after { transition: none; } }

/* Expérience connectée : domotique, supervision et réseau informatique. */
:root { --cyan: #39d6ff; --cyan-soft: #b6f2ff; --connected-ink: #06152e; }
.eyebrow-cyan { color: var(--cyan); }
.button-cyan { background: var(--cyan); border-color: var(--cyan); color: #03204a; }.button-cyan:hover { background: #84e8ff; border-color: #84e8ff; color: #03204a; }
.page-hero-smart { background-image: linear-gradient(90deg, rgba(2,13,35,.99) 0%, rgba(2,13,35,.94) 42%, rgba(2,13,35,.48) 68%, rgba(2,13,35,.11) 100%), url("../images/smart-home-futuristic.png"); }
.page-hero-smart .eyebrow { color: var(--cyan-soft); }.page-hero-smart .button-ghost { border-color: rgba(57,214,255,.75); color: var(--cyan-soft); }.page-hero-smart .button-ghost:hover { background: rgba(57,214,255,.13); border-color: var(--cyan); }
.smart-teaser { overflow: hidden; background: #041630; color: #fff; position: relative; }.smart-teaser::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(57,214,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(57,214,255,.12) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, #000, transparent 73%); }.smart-teaser-grid { min-height: 520px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; position: relative; }.smart-teaser-copy { padding: 5rem 0; position: relative; z-index: 1; }.smart-teaser-copy h2 { max-width: 650px; }.smart-teaser-copy > p:not(.eyebrow) { max-width: 570px; color: rgba(255,255,255,.76); }.smart-teaser-image { height: 100%; min-height: 430px; position: relative; overflow: hidden; display: block; }.smart-teaser-image::before { content:""; position:absolute; z-index:1; inset:0; background: linear-gradient(90deg, #041630 0%, rgba(4,22,48,0) 28%); }.smart-teaser-image img { height: 100%; width: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }.smart-teaser-image:hover img { transform: scale(1.055); }.smart-image-label { position: absolute; z-index: 2; right: 2rem; bottom: 2rem; color: rgba(255,255,255,.72); font-size: .76rem; line-height: 1.3; letter-spacing: .16em; }.smart-image-label strong { color: var(--cyan); font-size: 1.25em; }
.connected-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5.5rem; align-items: center; }.connected-intro-copy p:not(.eyebrow) { color: var(--muted); }.connected-visual { position: relative; min-height: 370px; overflow: hidden; background: #041630; box-shadow: 0 25px 55px rgba(2,13,35,.18); }.connected-visual::before { content:""; position:absolute; z-index:1; inset:0; background: linear-gradient(90deg, rgba(4,22,48,.4), transparent 60%); }.connected-visual img { width:100%; height:100%; min-height:370px; object-fit:cover; transition: transform .8s ease; }.connected-visual:hover img { transform:scale(1.04); }.visual-caption { position:absolute; z-index:2; left:1.5rem; bottom:1.3rem; margin:0; color:#fff; font-size:.73rem; letter-spacing:.13em; font-weight:800; text-transform:uppercase; }.signal-node { position:absolute; z-index:2; width:11px; height:11px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 7px rgba(57,214,255,.12), 0 0 22px var(--cyan); animation:signalPulse 2.7s ease-in-out infinite; }.signal-node-one { top:29%; right:33%; }.signal-node-two { top:48%; right:20%; animation-delay:.8s; }.signal-node-three { bottom:23%; right:42%; animation-delay:1.6s; }
.section-connected { background: radial-gradient(circle at 5% 30%, rgba(57,214,255,.14), transparent 27%), #06152e; color:#fff; position:relative; overflow:hidden; }.section-connected::before { content:""; position:absolute; inset:0; opacity:.38; background-image: radial-gradient(circle, rgba(57,214,255,.6) 0 1px, transparent 1.7px); background-size:30px 30px; mask-image:linear-gradient(90deg, #000, transparent 85%); }.section-connected .split-heading > p { color:rgba(255,255,255,.68); }.section-connected .container { position:relative; z-index:1; }.connected-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.15); }.connected-card { background:rgba(4,22,48,.85); padding:2rem 1.55rem; min-height:310px; position:relative; overflow:hidden; transition:background .3s ease, transform .3s ease; }.connected-card::after { content:""; position:absolute; width:150px; height:150px; border:1px solid rgba(57,214,255,.19); border-radius:50%; right:-86px; bottom:-88px; transition:transform .45s ease, border-color .45s ease; }.connected-card:hover { transform:translateY(-8px); background:#0a2853; }.connected-card:hover::after { transform:scale(1.5); border-color:var(--cyan); }.connected-card-icon { color:var(--cyan); font-size:2rem; line-height:1; margin-bottom:1.9rem; }.connected-card-index { color:rgba(255,255,255,.32); font-weight:800; letter-spacing:.13em; font-size:.72rem; margin-bottom:.5rem; }.connected-card h3 { font-size:1.35rem; }.connected-card > p:not(.connected-card-index) { color:rgba(255,255,255,.72); font-size:.9rem; }.connected-card span { position:absolute; left:1.55rem; bottom:1.8rem; color:var(--cyan-soft); font-size:.7rem; text-transform:uppercase; font-weight:900; letter-spacing:.12em; }
.network-band { background:#020b1c; color:#fff; overflow:hidden; }.network-band-grid { min-height:520px; display:grid; grid-template-columns:.86fr 1.14fr; gap:3rem; align-items:center; }.network-band-grid > div:first-child { padding:4.5rem 0; position:relative; z-index:1; }.network-band-grid h2 { max-width:570px; }.network-band-grid p:not(.eyebrow) { max-width:520px; color:rgba(255,255,255,.72); }.network-image { height:100%; min-height:430px; overflow:hidden; position:relative; }.network-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#020b1c 0%, rgba(2,11,28,.2) 25%, transparent 60%); }.network-image img { width:100%; height:100%; object-fit:cover; transition:transform .9s ease; }.network-band:hover .network-image img { transform:scale(1.045); }.network-pulse { position:absolute; z-index:2; width:9px; height:9px; background:var(--cyan); border-radius:50%; box-shadow:0 0 0 8px rgba(57,214,255,.11), 0 0 22px var(--cyan); animation:signalPulse 2.9s infinite; }.pulse-a { top:27%; right:21%; }.pulse-b { top:50%; right:37%; animation-delay:1.1s; }.pulse-c { bottom:28%; right:16%; animation-delay:2s; }
.pathway-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; counter-reset:pathway; }.pathway-grid article { position:relative; padding:1.7rem 1.2rem 0 0; }.pathway-grid article:not(:last-child)::after { content:""; position:absolute; height:1px; width:calc(100% - 2.5rem); top:2rem; left:4.5rem; background:linear-gradient(90deg, var(--cyan), rgba(57,214,255,.12)); }.pathway-grid span { display:grid; place-items:center; width:4rem; height:4rem; border:1px solid rgba(11,91,176,.18); border-radius:50%; color:var(--blue-900); font-family:Impact,sans-serif; font-size:1.25rem; margin-bottom:2rem; background:#fff; box-shadow:0 8px 20px rgba(6,59,128,.08); }.pathway-grid p { color:var(--muted); }.connected-cta { background:linear-gradient(105deg,#041630,#0a2c5a); color:#fff; position:relative; overflow:hidden; }.connected-cta::before { content:""; position:absolute; width:480px; height:480px; border:1px solid rgba(57,214,255,.18); border-radius:50%; left:5%; top:-330px; box-shadow:0 0 0 50px rgba(57,214,255,.025),0 0 0 100px rgba(57,214,255,.02); }.connected-cta-inner { min-height:280px; display:flex; align-items:center; justify-content:space-between; gap:3rem; position:relative; z-index:1; }.connected-cta h2 { max-width:680px; margin:0; }
@keyframes signalPulse { 0%,100% { transform:scale(1); opacity:.5; } 50% { transform:scale(1.25); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .signal-node,.network-pulse { animation:none; } .smart-teaser-image img,.connected-visual img,.network-image img,.connected-card,.connected-card::after { transition:none; } }
@media (max-width:900px) { .smart-teaser-grid,.connected-intro,.network-band-grid { grid-template-columns:1fr; gap:0; }.smart-teaser-image,.network-image { min-height:340px; }.smart-teaser-copy { padding-bottom:2rem; }.connected-grid { grid-template-columns:repeat(2,1fr); }.pathway-grid { gap:1rem; }.pathway-grid article:not(:last-child)::after { width:calc(100% - 3.6rem); left:4rem; } }
@media (max-width:720px) { .page-hero-smart { background-position:68% center; }.smart-teaser-grid { min-height:auto; }.smart-teaser-copy { padding:4rem 0 2.5rem; }.smart-teaser-image { min-height:270px; }.smart-teaser-image::before,.network-image::after { background:linear-gradient(180deg,#041630 0%, rgba(4,22,48,0) 50%); }.connected-grid,.pathway-grid { grid-template-columns:1fr; }.connected-card { min-height:270px; }.pathway-grid article { padding:1rem 0; }.pathway-grid article:not(:last-child)::after { width:1px; height:2rem; top:5rem; left:2rem; background:linear-gradient(var(--cyan),rgba(57,214,255,.12)); }.network-band-grid > div:first-child { padding:4rem 0 2rem; }.connected-cta-inner { min-height:260px; padding:3.5rem 0; display:grid; grid-template-columns:1fr; gap:1.5rem; } }

/* Chorégraphie globale : mouvements sobres, continus et accessibles. */
.scroll-progress { position:absolute; z-index:30; left:0; right:0; bottom:-2px; height:2px; overflow:hidden; background:rgba(6,59,128,.12); }.scroll-progress span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--blue-700),var(--cyan,#39d6ff),var(--accent)); box-shadow:0 0 14px rgba(57,214,255,.7); }
.button { position:relative; isolation:isolate; overflow:hidden; }.button::before { content:""; position:absolute; z-index:-1; top:-25%; bottom:-25%; width:36%; left:-48%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-22deg); transition:left .55s ease; }.button:hover::before { left:115%; }.button-cyan::before { background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); }
.site-header { transition:box-shadow .3s ease, background .3s ease; }.site-header:hover { box-shadow:0 5px 20px rgba(3,27,66,.08); }
.js-motion .reveal { opacity:0; transform:translateY(28px) scale(.985); transition:opacity .75s ease, transform .85s cubic-bezier(.2,.7,.2,1); }.js-motion .reveal.is-visible { opacity:1; transform:translateY(0) scale(1); }.js-motion .reveal-section { transition-duration:.9s; }
.js-motion .stagger-grid > * { opacity:0; transform:translateY(24px) scale(.97); transition:opacity .58s ease, transform .68s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--stagger-index, 0) * 85ms + 80ms); }.js-motion .stagger-grid.is-visible > *, .js-motion .is-visible .stagger-grid > * { opacity:1; transform:translateY(0) scale(1); }
.service-card, .project-card, .gallery-card, .connected-card, .pathway-grid article { background-image:radial-gradient(310px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(57,214,255,.12), transparent 46%); }.service-card::before { content:""; position:absolute; inset:0; pointer-events:none; border-top:2px solid transparent; border-image:linear-gradient(90deg,transparent,var(--cyan,#39d6ff),transparent) 1; opacity:0; transform:scaleX(.55); transition:opacity .3s ease, transform .35s ease; }.service-card:hover::before { opacity:1; transform:scaleX(1); }.service-card { position:relative; overflow:hidden; }
.project-card::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:linear-gradient(90deg,var(--blue-700),var(--cyan,#39d6ff)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }.project-card:hover::after { transform:scaleX(1); }.gallery-card .gallery-zoom { transition:transform .3s ease, background .3s ease; }.gallery-card:hover .gallery-zoom { transform:rotate(90deg) scale(1.08); background:var(--cyan); color:var(--blue-950); }
.trust-grid div { transition:background .3s ease, transform .3s ease; }.trust-grid div:hover { background:var(--blue-100); transform:translateY(-4px); }.trust-grid strong { position:relative; }.trust-grid div:hover strong::after { content:""; position:absolute; width:6px; height:6px; border-radius:50%; background:var(--cyan,#39d6ff); top:-2px; right:-10px; box-shadow:0 0 10px var(--cyan,#39d6ff); animation:statusBlink 1.5s ease-in-out infinite; }
.page-hero h1, .hero h1 { animation:titleBreath 6s ease-in-out infinite; }.hero .eyebrow, .page-hero .eyebrow { animation:eyebrowSlide .8s cubic-bezier(.2,.7,.2,1) both; }.hero .lead, .page-hero p:not(.eyebrow) { animation:contentFade 1s .12s ease both; }.hero-actions { animation:contentFade 1s .22s ease both; }
.connected-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 0 44%,rgba(57,214,255,.12) 49%,transparent 54%); transform:translateX(-120%); transition:transform .75s ease; }.connected-card:hover::before { transform:translateX(120%); }.network-image::before { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; opacity:.55; background:linear-gradient(90deg,transparent,rgba(57,214,255,.23),transparent); width:30%; transform:translateX(-150%) skewX(-18deg); animation:networkScan 5.8s ease-in-out infinite; }
.pathway-grid article { transition:transform .3s ease, background .3s ease; }.pathway-grid article:hover { transform:translateY(-7px); }.pathway-grid article:hover span { border-color:var(--cyan,#39d6ff); box-shadow:0 0 0 7px rgba(57,214,255,.11),0 9px 25px rgba(6,59,128,.13); color:var(--blue-700); }
@keyframes statusBlink { 0%,100% { opacity:.45; transform:scale(.8); } 50% { opacity:1; transform:scale(1.3); } } @keyframes networkScan { 0%,18% { transform:translateX(-150%) skewX(-18deg); } 58%,100% { transform:translateX(480%) skewX(-18deg); } } @keyframes titleBreath { 0%,100% { text-shadow:0 0 0 transparent; } 50% { text-shadow:0 8px 34px rgba(0,0,0,.16); } } @keyframes eyebrowSlide { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } } @keyframes contentFade { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }.js-motion .reveal, .js-motion .stagger-grid > * { opacity:1; transform:none; }.scroll-progress { display:none; } }

.project-card { position:relative; overflow:hidden; }

/* Introduction de marque : logo, signature et transition vers le site. */
body.intro-lock { overflow:hidden; }.intro-splash[hidden] { display:none; }.intro-splash { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; overflow:hidden; isolation:isolate; background:radial-gradient(circle at 72% 25%, #104b97 0%, #061a3c 39%, #020b1c 82%); color:#fff; opacity:1; transition:opacity .45s ease, visibility .45s ease; }.intro-splash::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(118deg, rgba(2,11,28,.92) 0 43%, rgba(2,11,28,.26) 75%, rgba(2,11,28,.7) 100%); }.intro-splash::after { content:""; width:74vw; height:1px; position:absolute; z-index:-1; top:46%; left:-15%; background:linear-gradient(90deg, transparent, var(--cyan,#39d6ff), var(--accent), transparent); box-shadow:0 0 30px rgba(57,214,255,.72); transform:rotate(-25deg); animation:introSweep 3.8s ease-in-out infinite; }.intro-splash.is-leaving { opacity:0; visibility:hidden; }.intro-grid { position:absolute; inset:0; z-index:-1; opacity:.28; background-image:linear-gradient(rgba(57,214,255,.13) 1px, transparent 1px),linear-gradient(90deg, rgba(57,214,255,.13) 1px, transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse at center, #000, transparent 72%); animation:introGrid 12s linear infinite; }.intro-orbit { position:absolute; z-index:-1; border:1px solid rgba(57,214,255,.21); border-radius:50%; animation:introOrbit 14s linear infinite; }.intro-orbit-one { width:min(70vw,850px); height:min(70vw,850px); right:-20vw; top:-33vw; }.intro-orbit-two { width:min(46vw,560px); height:min(46vw,560px); left:-18vw; bottom:-31vw; border-color:rgba(240,161,40,.22); animation-direction:reverse; animation-duration:18s; }.intro-content { width:min(90vw,610px); text-align:center; position:relative; }.intro-logo-wrap { width:220px; height:160px; margin:0 auto 1rem; border:1px solid rgba(255,255,255,.31); box-shadow:0 16px 42px rgba(0,0,0,.3); background:#fff; overflow:hidden; opacity:0; transform:scale(.82) translateY(22px); }.intro-logo-wrap img { width:100%; height:100%; object-fit:cover; object-position:center 51%; }.intro-kicker { margin:0 0 1rem; color:var(--cyan-soft,#b6f2ff); letter-spacing:.22em; font-size:.68rem; font-weight:900; opacity:0; transform:translateY(12px); }.intro-signature { display:flex; flex-direction:column; gap:.18rem; text-transform:uppercase; line-height:1; }.intro-signature span { color:rgba(255,255,255,.72); font-size:clamp(.8rem,1.8vw,1.08rem); font-weight:650; letter-spacing:.36em; opacity:0; transform:translateX(-26px); }.intro-signature strong { color:#fff; font-family:"Arial Narrow",Impact,Inter,sans-serif; font-size:clamp(2rem,5vw,4rem); letter-spacing:.045em; font-weight:900; text-shadow:0 0 28px rgba(57,214,255,.32); opacity:0; transform:translateY(18px); }.intro-loader { width:min(255px,64vw); height:2px; margin:2rem auto 0; overflow:hidden; background:rgba(255,255,255,.21); transform:scaleX(0); transform-origin:left; }.intro-loader span { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--cyan,#39d6ff),#fff,var(--accent)); transform:translateX(-100%); }.intro-skip { position:absolute; right:1.6rem; bottom:1.3rem; border:0; padding:.65rem .8rem; background:transparent; color:rgba(255,255,255,.76); font:inherit; font-size:.75rem; letter-spacing:.08em; font-weight:800; cursor:pointer; text-transform:uppercase; opacity:0; transition:color .2s ease, transform .2s ease; }.intro-skip:hover { color:#fff; transform:translateX(4px); }.intro-skip span { color:var(--cyan,#39d6ff); margin-left:.45rem; }.intro-splash.is-active .intro-logo-wrap { animation:introLogo .85s cubic-bezier(.2,.7,.2,1) .12s forwards; }.intro-splash.is-active .intro-kicker { animation:introRise .6s ease .75s forwards; }.intro-splash.is-active .intro-signature strong { animation:introRise .75s cubic-bezier(.2,.7,.2,1) .95s forwards; }.intro-splash.is-active .intro-signature span:first-child { animation:introSlide .65s ease 1.2s forwards; }.intro-splash.is-active .intro-signature span:last-child { animation:introSlide .65s ease 1.35s forwards; }.intro-splash.is-active .intro-loader { animation:introLoaderTrack 1.4s ease 1.65s forwards; }.intro-splash.is-active .intro-loader span { animation:introLoaderFill 1.35s cubic-bezier(.25,.75,.25,1) 1.68s forwards; }.intro-splash.is-active .intro-skip { animation:introSkip .45s ease 1.6s forwards; }
@keyframes introLogo { to { opacity:1; transform:scale(1) translateY(0); } } @keyframes introRise { to { opacity:1; transform:translateY(0); } } @keyframes introSlide { to { opacity:1; transform:translateX(0); } } @keyframes introLoaderTrack { to { transform:scaleX(1); } } @keyframes introLoaderFill { to { transform:translateX(0); } } @keyframes introSkip { to { opacity:1; } } @keyframes introSweep { 0%,100% { opacity:.32; transform:rotate(-25deg) translateX(-6%); } 50% { opacity:1; transform:rotate(-25deg) translateX(9%); } } @keyframes introGrid { from { transform:perspective(500px) rotateX(58deg) translateY(0); } to { transform:perspective(500px) rotateX(58deg) translateY(44px); } } @keyframes introOrbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (max-width:720px) { .intro-logo-wrap { width:178px; height:130px; }.intro-skip { right:.8rem; bottom:.8rem; }.intro-signature span { letter-spacing:.22em; }.intro-orbit-one { right:-45vw; top:-30vw; }.intro-orbit-two { left:-36vw; bottom:-24vw; } }
@media (prefers-reduced-motion:reduce) { .intro-splash::after,.intro-grid,.intro-orbit { animation:none !important; }.intro-logo-wrap,.intro-kicker,.intro-signature strong,.intro-signature span,.intro-loader,.intro-skip { opacity:1 !important; transform:none !important; animation:none !important; }.intro-loader { display:none; } }

/* Ouverture de marque non bloquante : le contenu arrive au premier plan. */
.intro-splash { z-index:45; pointer-events:none; background:radial-gradient(circle at 72% 25%, rgba(16,75,151,.92) 0%, rgba(6,26,60,.92) 39%, rgba(2,11,28,.92) 82%); }.intro-splash::before { background:linear-gradient(118deg, rgba(2,11,28,.67) 0 43%, rgba(2,11,28,.14) 75%, rgba(2,11,28,.5) 100%); }.intro-splash .intro-content { transform:scale(.88); opacity:.88; filter:drop-shadow(0 18px 38px rgba(0,0,0,.32)); }.intro-splash.is-active .intro-logo-wrap { animation:introLogo .48s cubic-bezier(.2,.7,.2,1) .04s forwards; }.intro-splash.is-active .intro-kicker { animation:introRise .34s ease .28s forwards; }.intro-splash.is-active .intro-signature strong { animation:introRise .44s cubic-bezier(.2,.7,.2,1) .46s forwards; }.intro-splash.is-active .intro-signature span:first-child { animation:introSlide .36s ease .6s forwards; }.intro-splash.is-active .intro-signature span:last-child { animation:introSlide .36s ease .68s forwards; }.intro-splash.is-active .intro-loader { animation:introLoaderTrack .7s ease .82s forwards; }.intro-splash.is-active .intro-loader span { animation:introLoaderFill .68s cubic-bezier(.25,.75,.25,1) .84s forwards; }
body.brand-opening .site-header { animation:brandPageReveal .78s cubic-bezier(.2,.7,.2,1) .08s both; } body.brand-opening main { animation:brandPageReveal .95s cubic-bezier(.2,.7,.2,1) .18s both; } body.brand-opening .site-footer { animation:brandPageReveal .9s cubic-bezier(.2,.7,.2,1) .26s both; } body.brand-opening .hero::after, body.brand-opening .page-hero::after { animation-duration:4.2s; }
@keyframes brandPageReveal { from { opacity:0; transform:translateY(24px) scale(.992); filter:blur(3px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@media (prefers-reduced-motion:reduce) { .intro-splash { display:none !important; } body.brand-opening .site-header, body.brand-opening main, body.brand-opening .site-footer { animation:none; } }

.intro-splash { background:radial-gradient(circle at 72% 25%, rgba(16,75,151,.76) 0%, rgba(6,26,60,.76) 39%, rgba(2,11,28,.78) 82%); }.intro-splash::before { background:linear-gradient(118deg, rgba(2,11,28,.5) 0 43%, rgba(2,11,28,.08) 75%, rgba(2,11,28,.34) 100%); }

/* Décor de marque persistant : présence visuelle discrète sur toutes les pages. */
.brand-ambient { position:fixed; z-index:10; inset:0; overflow:hidden; pointer-events:none; mix-blend-mode:multiply; }.brand-ambient-grid { position:absolute; inset:-25%; opacity:.14; background-image:linear-gradient(rgba(11,91,176,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(11,91,176,.12) 1px,transparent 1px); background-size:62px 62px; mask-image:radial-gradient(ellipse at 72% 48%,#000,transparent 60%); animation:ambientGridDrift 40s linear infinite; }.brand-ambient-glow { position:absolute; width:54vw; height:54vw; min-width:560px; min-height:560px; border-radius:50%; top:22%; right:-24vw; background:radial-gradient(circle,rgba(57,214,255,.13),rgba(57,214,255,.035) 38%,transparent 70%); animation:ambientGlow 14s ease-in-out infinite; }.brand-ambient-logo { position:absolute; width:min(325px,34vw); height:auto; right:-82px; top:41%; opacity:.065; filter:grayscale(1) contrast(1.5); transform:rotate(-8deg); animation:ambientLogoFloat 17s ease-in-out infinite; }.brand-circuit { position:absolute; height:1px; background:linear-gradient(90deg,transparent,rgba(57,214,255,.38),transparent); box-shadow:0 0 14px rgba(57,214,255,.2); transform-origin:left; animation:ambientCircuit 11s ease-in-out infinite; }.brand-circuit-one { width:44vw; top:24%; right:-7vw; transform:rotate(-28deg); }.brand-circuit-two { width:38vw; bottom:21%; left:-8vw; transform:rotate(27deg); animation-delay:4s; }.brand-signal { position:absolute; width:7px; height:7px; border-radius:50%; background:rgba(57,214,255,.76); box-shadow:0 0 0 7px rgba(57,214,255,.07),0 0 18px rgba(57,214,255,.45); animation:ambientSignal 4.7s ease-in-out infinite; }.brand-signal-one { top:31%; right:13%; }.brand-signal-two { bottom:28%; left:11%; animation-delay:2.1s; background:rgba(240,161,40,.7); box-shadow:0 0 0 7px rgba(240,161,40,.06),0 0 18px rgba(240,161,40,.4); }
@keyframes ambientGridDrift { from { transform:translate3d(0,0,0) rotate(-4deg); } to { transform:translate3d(62px,62px,0) rotate(-4deg); } } @keyframes ambientGlow { 0%,100% { opacity:.48; transform:scale(.92); } 50% { opacity:1; transform:scale(1.08); } } @keyframes ambientLogoFloat { 0%,100% { transform:rotate(-8deg) translate3d(0,0,0); } 50% { transform:rotate(-5deg) translate3d(-14px,-18px,0); } } @keyframes ambientCircuit { 0%,100% { opacity:.18; transform:scaleX(.72) rotate(var(--circuit-angle, -28deg)); } 50% { opacity:.66; transform:scaleX(1) rotate(var(--circuit-angle, -28deg)); } } @keyframes ambientSignal { 0%,100% { opacity:.25; transform:scale(.78); } 50% { opacity:.9; transform:scale(1.32); } }
.brand-circuit-two { --circuit-angle:27deg; }.brand-circuit-one { --circuit-angle:-28deg; }
@media (prefers-reduced-motion:reduce) { .brand-ambient-grid,.brand-ambient-glow,.brand-ambient-logo,.brand-circuit,.brand-signal { animation:none !important; } }
@media (max-width:720px) { .brand-ambient-grid { opacity:.1; background-size:50px 50px; }.brand-ambient-logo { width:220px; right:-96px; top:47%; opacity:.045; }.brand-circuit-one { width:70vw; right:-25vw; }.brand-circuit-two { width:65vw; left:-29vw; }.brand-signal-one { right:8%; }.brand-signal-two { left:6%; } }

/* Configurateur de projet électrique */
.page-hero-simulator { background:linear-gradient(90deg,rgba(3,27,66,.96) 0%,rgba(3,27,66,.83) 44%,rgba(3,27,66,.24) 100%),url('../images/connected-control.png') center/cover; }.sim-hero-points { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.65rem; }.sim-hero-points span { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .75rem; border:1px solid rgba(182,242,255,.32); border-radius:999px; background:rgba(4,31,71,.35); color:#fff; font-size:.8rem; font-weight:800; }.sim-hero-points span::before { content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--cyan,#39d6ff); box-shadow:0 0 10px var(--cyan,#39d6ff); }
.simulator-section { padding-top:5.5rem; padding-bottom:5.5rem; }.simulator-intro { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-bottom:2rem; }.simulator-intro > * { max-width:640px; }.simulator-intro h2 { margin:0; }.simulator-intro > p { margin:0; color:var(--muted,#58677a); line-height:1.7; }.simulator-alert { margin:0 0 1.5rem; }.simulator { position:relative; }.simulator-progress { display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; margin-bottom:1.5rem; border:1px solid var(--line,#d8e1ec); border-radius:1rem; background:#fff; box-shadow:0 10px 28px rgba(3,27,66,.06); }.simulator-progress span { padding:.85rem 1rem; color:var(--muted,#58677a); font-size:.79rem; font-weight:800; text-align:center; border-right:1px solid var(--line,#d8e1ec); }.simulator-progress span:last-child { border-right:0; }.simulator-progress .is-current { position:relative; color:var(--blue-950,#031b42); background:linear-gradient(100deg,rgba(57,214,255,.18),rgba(14,87,176,.12)); }.simulator-progress .is-current::after { content:""; position:absolute; inset:auto 12% 0; height:2px; background:var(--cyan,#39d6ff); box-shadow:0 0 12px var(--cyan,#39d6ff); }
.simulator-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,350px); gap:1.5rem; align-items:start; }.simulator-panels { display:grid; gap:1.25rem; }.sim-panel { min-width:0; margin:0; padding:1.65rem; border:1px solid var(--line,#d8e1ec); border-radius:1.2rem; background:rgba(255,255,255,.95); box-shadow:0 14px 35px rgba(3,27,66,.06); }.sim-panel legend { display:flex; align-items:center; gap:.8rem; padding:0; color:var(--blue-950,#031b42); font-size:1.18rem; font-weight:900; }.sim-panel legend span { display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:linear-gradient(135deg,var(--blue-700,#0e57b0),var(--cyan,#39d6ff)); color:#fff; font-size:.74rem; letter-spacing:.04em; box-shadow:0 6px 18px rgba(14,87,176,.2); }.sim-panel-lead { max-width:700px; margin:.7rem 0 1.35rem; color:var(--muted,#58677a); line-height:1.65; }.sim-equipment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }.sim-equipment-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.8rem; align-items:start; min-height:145px; padding:1rem; border:1px solid rgba(14,87,176,.12); border-radius:1rem; background:linear-gradient(145deg,#fff,rgba(238,248,255,.72)); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }.sim-equipment-card:focus-within,.sim-equipment-card:hover { transform:translateY(-3px); border-color:rgba(57,214,255,.72); box-shadow:0 12px 28px rgba(3,27,66,.09); }.sim-equipment-icon { display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:.75rem; background:var(--blue-950,#031b42); color:var(--cyan,#39d6ff); font-size:.72rem; font-weight:900; letter-spacing:.08em; }.sim-equipment-card h3 { margin:0 0 .3rem; color:var(--blue-950,#031b42); font-size:1rem; }.sim-equipment-card p { margin:0; color:var(--muted,#58677a); font-size:.82rem; line-height:1.45; }.sim-quantity { grid-column:1 / -1; display:flex; justify-content:flex-end; align-items:center; gap:.5rem; margin-top:auto; }.quantity-button { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(14,87,176,.2); border-radius:50%; background:#fff; color:var(--blue-700,#0e57b0); font-size:1.2rem; font-weight:800; cursor:pointer; transition:background .2s ease,color .2s ease,transform .2s ease; }.quantity-button:hover { background:var(--blue-700,#0e57b0); color:#fff; transform:scale(1.08); }.sim-quantity-input { width:3.4rem !important; min-height:2.1rem !important; padding:.25rem !important; text-align:center; font-weight:900; }.sim-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }.sim-option-card { position:relative; display:flex; gap:.8rem; align-items:flex-start; min-height:104px; padding:1rem; border:1px solid rgba(14,87,176,.14); border-radius:1rem; background:#fff; cursor:pointer; transition:border-color .24s ease,box-shadow .24s ease,transform .24s ease; }.sim-option-card:hover { transform:translateY(-3px); border-color:rgba(57,214,255,.75); box-shadow:0 12px 25px rgba(3,27,66,.07); }.sim-option-card input { position:absolute; opacity:0; pointer-events:none; }.sim-option-mark { display:grid; flex:0 0 auto; place-items:center; width:1.25rem; height:1.25rem; margin-top:.08rem; border:2px solid rgba(14,87,176,.38); border-radius:.35rem; background:#fff; transition:background .2s ease,border-color .2s ease; }.sim-option-card input:checked + .sim-option-mark { border-color:var(--blue-700,#0e57b0); background:var(--blue-700,#0e57b0); }.sim-option-card input:checked + .sim-option-mark::after { content:""; width:.52rem; height:.28rem; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); }.sim-option-card:has(input:checked) { border-color:var(--cyan,#39d6ff); background:linear-gradient(145deg,rgba(57,214,255,.1),#fff); box-shadow:0 8px 22px rgba(57,214,255,.11); }.sim-option-card strong { display:block; color:var(--blue-950,#031b42); font-size:.95rem; }.sim-option-card small { display:block; margin-top:.3rem; color:var(--muted,#58677a); line-height:1.4; font-size:.78rem; }.sim-summary { position:sticky; top:6.6rem; overflow:hidden; padding:1.35rem; border:1px solid rgba(57,214,255,.35); border-radius:1.2rem; background:linear-gradient(155deg,rgba(3,27,66,.98),rgba(7,62,134,.95)); color:#fff; box-shadow:0 20px 48px rgba(3,27,66,.22); }.sim-summary::before { content:""; position:absolute; inset:-45% -30% auto auto; width:280px; height:280px; border:1px solid rgba(57,214,255,.24); border-radius:50%; box-shadow:0 0 0 38px rgba(57,214,255,.035),0 0 0 76px rgba(57,214,255,.025); animation:simOrbit 14s linear infinite; }.sim-summary > * { position:relative; }.sim-summary .eyebrow { color:var(--cyan-soft,#b6f2ff); }.sim-summary h2 { margin:.25rem 0 1.2rem; color:#fff; font-size:1.45rem; }.sim-summary-project { display:flex; flex-direction:column; gap:.3rem; padding:.75rem; border-radius:.75rem; background:rgba(255,255,255,.08); font-size:.83rem; }.sim-summary-project span:last-child { color:var(--cyan-soft,#b6f2ff); }.sim-summary-list { display:grid; gap:.5rem; min-height:7.25rem; margin:1rem 0; padding:0; list-style:none; }.sim-summary-list li { display:flex; justify-content:space-between; gap:.5rem; align-items:baseline; padding-bottom:.42rem; border-bottom:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.92); font-size:.84rem; }.sim-summary-list li span:last-child { color:var(--cyan-soft,#b6f2ff); font-weight:800; white-space:nowrap; }.sim-summary-list .sim-summary-empty { display:block; padding:.5rem 0; border:0; color:rgba(255,255,255,.66); line-height:1.55; }.sim-summary-total { display:flex; align-items:center; gap:.6rem; margin-top:.6rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.18); }.sim-summary-total strong { color:var(--cyan,#39d6ff); font-size:2rem; line-height:1; }.sim-summary-total span { font-size:.82rem; line-height:1.25; }.sim-summary > p:last-child { margin:1rem 0 0; color:rgba(255,255,255,.67); font-size:.76rem; line-height:1.55; }.sim-submit { margin-top:.5rem; }.simulator-reassurance { border-top:1px solid var(--line,#d8e1ec); background:rgba(231,246,255,.48); }.simulator-reassurance .container { display:grid; grid-template-columns:1.2fr 1fr auto; gap:1.8rem; align-items:center; }.simulator-reassurance h2 { margin:0; }.simulator-reassurance p { margin:0; color:var(--muted,#58677a); line-height:1.65; }
@keyframes simOrbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@media (max-width:960px) { .simulator-layout { grid-template-columns:1fr; }.sim-summary { position:relative; top:auto; order:-1; }.simulator-reassurance .container { grid-template-columns:1fr; gap:1rem; }.simulator-reassurance .button { justify-self:start; } }
@media (max-width:700px) { .simulator-section { padding-top:3.5rem; padding-bottom:3.5rem; }.simulator-intro { display:block; }.simulator-intro > p { margin-top:1rem; }.simulator-progress { grid-template-columns:repeat(2,1fr); }.simulator-progress span:nth-child(2) { border-right:0; }.simulator-progress span:nth-child(-n+2) { border-bottom:1px solid var(--line,#d8e1ec); }.sim-panel { padding:1.2rem; }.sim-equipment-grid,.sim-option-grid { grid-template-columns:1fr; }.sim-equipment-card { min-height:0; }.sim-summary { padding:1.15rem; }.simulator-reassurance .container { padding-left:1.2rem; padding-right:1.2rem; } }
@media (prefers-reduced-motion:reduce) { .sim-summary::before { animation:none !important; } .sim-equipment-card,.sim-option-card,.quantity-button { transition:none; } }

.sim-equipment-card.is-selected { border-color:var(--cyan,#39d6ff); background:linear-gradient(145deg,rgba(57,214,255,.15),#fff); box-shadow:0 12px 28px rgba(57,214,255,.13); }.sim-equipment-card.is-selected .sim-equipment-icon { background:var(--blue-700,#0e57b0); color:#fff; }

/* Visualisation interactive de l’installation configurée */
.sim-visualizer { margin:0 0 1.7rem; padding:1.4rem; border:1px solid rgba(57,214,255,.33); border-radius:1.25rem; background:linear-gradient(145deg,rgba(238,249,255,.92),#fff); box-shadow:0 18px 40px rgba(3,27,66,.08); }.sim-visualizer-heading { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; margin-bottom:1.1rem; }.sim-visualizer-heading > div { max-width:720px; }.sim-visualizer-heading h2 { margin:.2rem 0 .5rem; color:var(--blue-950,#031b42); }.sim-visualizer-heading p { margin:0; color:var(--muted,#58677a); line-height:1.6; }.sim-visualizer-status { max-width:270px; padding:.75rem .9rem; border-left:3px solid var(--cyan,#39d6ff); background:rgba(57,214,255,.1); color:var(--blue-950,#031b42) !important; font-size:.82rem; font-weight:750; }.sim-scene { position:relative; height:420px; overflow:hidden; isolation:isolate; border:1px solid rgba(57,214,255,.24); border-radius:1rem; background:linear-gradient(180deg,#061d45 0%,#0b437e 60%,#497a8d 60.2%,#335a68 100%); box-shadow:inset 0 0 70px rgba(0,0,0,.28); }.sim-scene::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.95; background:radial-gradient(circle at 15% 26%,rgba(57,214,255,.19),transparent 18%),radial-gradient(circle at 82% 18%,rgba(240,161,40,.11),transparent 15%); }.sim-scene-stars { position:absolute; z-index:-1; inset:0 0 38%; opacity:.5; background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(rgba(182,242,255,.9) 1px,transparent 1.5px); background-size:42px 42px,68px 68px; background-position:8px 12px,26px 22px; }.sim-scene-orb { position:absolute; z-index:-1; right:10%; top:12%; width:60px; height:60px; border-radius:50%; background:#dff8ff; box-shadow:0 0 0 10px rgba(223,248,255,.07),0 0 48px rgba(182,242,255,.35); }.sim-scene-grid { position:absolute; z-index:-1; right:-9%; bottom:-36%; width:78%; height:77%; opacity:.23; background-image:linear-gradient(rgba(182,242,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(182,242,255,.5) 1px,transparent 1px); background-size:28px 28px; transform:perspective(420px) rotateX(62deg) rotateZ(-2deg); transform-origin:bottom; }.sim-scene-house { position:absolute; left:13%; bottom:15%; width:47%; height:46%; border:2px solid rgba(182,242,255,.32); border-bottom:0; background:linear-gradient(90deg,#18436e,#0e345c 52%,#153e69); box-shadow:0 0 22px rgba(57,214,255,.12); }.sim-roof { position:absolute; left:-7%; top:-29%; width:107%; height:38%; clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(150deg,#143a68,#061d45 68%); filter:drop-shadow(0 -3px 3px rgba(0,0,0,.16)); }.sim-chimney { position:absolute; right:13%; top:-25%; width:9%; height:26%; border-radius:3px 3px 0 0; background:#102f54; }.sim-window { position:absolute; width:16%; height:27%; overflow:hidden; border:4px solid #0a294b; border-radius:3px; background:#071d37; transition:background .6s ease,box-shadow .6s ease; }.sim-window::before,.sim-window::after { content:""; position:absolute; background:rgba(182,242,255,.36); }.sim-window::before { width:2px; inset:0 auto 0 50%; }.sim-window::after { height:2px; inset:50% 0 auto; }.sim-window-one { left:13%; top:24%; }.sim-window-two { left:39%; top:24%; }.sim-window i { position:absolute; z-index:2; inset:0; background:repeating-linear-gradient(0deg,#173f68 0 5px,#20517f 5px 7px); transform-origin:top; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }.sim-door { position:absolute; left:15%; bottom:0; width:17%; height:40%; border:3px solid #0a294b; background:#0b2d50; }.sim-door::after { content:""; position:absolute; right:13%; top:50%; width:5px; height:5px; border-radius:50%; background:#8feaff; box-shadow:0 0 9px #8feaff; }.sim-door i { position:absolute; left:50%; top:0; height:100%; width:1px; background:rgba(182,242,255,.2); }.sim-garage { position:absolute; right:8%; bottom:0; width:31%; height:41%; display:flex; flex-direction:column; gap:2px; padding:3px; overflow:hidden; border:3px solid #0a294b; background:#133b63; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); transform-origin:top; }.sim-garage i { flex:1; border:1px solid rgba(182,242,255,.18); background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.13),rgba(255,255,255,.05)); }.sim-network-wave { position:absolute; z-index:3; display:none; width:34px; height:34px; border:2px solid var(--cyan,#39d6ff); border-radius:50%; opacity:0; }.sim-network-one { left:43%; top:-12%; }.sim-network-two { left:38%; top:-20%; }.sim-scene-lamp { position:absolute; bottom:14%; width:7px; height:115px; background:#123956; }.sim-scene-lamp::before { content:""; position:absolute; top:-4px; left:-10px; width:27px; height:9px; border-radius:8px 8px 3px 3px; background:#0b2948; }.sim-scene-lamp i { position:absolute; left:50%; top:1px; width:13px; height:13px; border-radius:50%; background:#8ca0ae; transform:translateX(-50%); transition:background .5s ease,box-shadow .5s ease; }.sim-lamp-one { left:6%; }.sim-lamp-two { left:68%; height:98px; }.sim-scene-drive { position:absolute; z-index:-1; right:-10%; bottom:-3%; width:55%; height:25%; background:linear-gradient(130deg,transparent 14%,rgba(220,242,245,.18) 14% 48%,transparent 48%); transform:skewX(-23deg); }.sim-scene-gate { position:absolute; right:8%; bottom:14%; width:22%; height:23%; display:flex; align-items:end; gap:2px; border-bottom:3px solid #0d2d48; }.sim-scene-gate::before,.sim-scene-gate::after { content:""; width:8px; height:100%; border-radius:3px 3px 0 0; background:#0b2c4c; }.sim-scene-gate::after { margin-left:auto; }.sim-scene-gate span { width:calc(50% - 6px); height:78%; border:2px solid #1d5a82; background:repeating-linear-gradient(90deg,rgba(182,242,255,.15) 0 2px,transparent 2px 12px); transform-origin:bottom; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }.sim-scene-gate span:first-of-type { transform-origin:left bottom; }.sim-scene-gate span:last-of-type { transform-origin:right bottom; }.sim-scene-security { position:absolute; left:54%; top:26%; width:63px; height:63px; }.sim-camera { position:absolute; top:0; right:0; width:25px; height:13px; border-radius:4px; background:#12476b; transform:rotate(-18deg); transition:filter .4s ease; }.sim-camera::after { content:""; position:absolute; right:-7px; top:2px; border-left:8px solid #12476b; border-top:4px solid transparent; border-bottom:4px solid transparent; }.sim-alarm-ring { position:absolute; top:19px; left:1px; width:32px; height:32px; border:2px solid rgba(255,255,255,.35); border-radius:50%; opacity:.25; }.sim-shield { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:25px; height:28px; clip-path:polygon(50% 0,95% 17%,88% 75%,50% 100%,12% 75%,5% 17%); background:#17436a; color:rgba(255,255,255,.5); font-size:.72rem; font-weight:900; transition:background .45s ease,color .45s ease,filter .45s ease; }.sim-scene-caption { position:absolute; left:1rem; top:1rem; display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem; border:1px solid rgba(182,242,255,.24); border-radius:999px; background:rgba(3,27,66,.4); color:rgba(255,255,255,.78); font-size:.72rem; font-weight:800; backdrop-filter:blur(6px); }.scene-dot { width:.45rem; height:.45rem; border-radius:50%; background:rgba(182,242,255,.5); }
.sim-scene.has-lighting.is-lighting-on .sim-window,.sim-scene.has-lighting.is-lighting-on .sim-door { background:#f9d888; box-shadow:0 0 16px rgba(255,224,126,.8),0 0 48px rgba(255,207,73,.35); }.sim-scene.has-lighting.is-lighting-on .sim-scene-lamp i { background:#fff2b0; box-shadow:0 0 12px #fff2b0,0 0 32px rgba(255,216,111,.72); }.sim-scene.has-shutters.is-access-open .sim-window i { transform:scaleY(.07); }.sim-scene.has-garage.is-access-open .sim-garage { transform:scaleY(.18); }.sim-scene.has-gate.is-access-open .sim-scene-gate span:first-of-type { transform:rotate(-52deg); }.sim-scene.has-gate.is-access-open .sim-scene-gate span:last-of-type { transform:rotate(52deg); }.sim-scene.has-security.is-security-on .sim-shield { background:var(--cyan,#39d6ff); color:#063b80; filter:drop-shadow(0 0 9px var(--cyan,#39d6ff)); }.sim-scene.has-security.is-security-on .sim-alarm-ring { border-color:var(--cyan,#39d6ff); opacity:1; animation:scenePulse 1.45s ease-in-out infinite; }.sim-scene.has-security.is-security-on .sim-camera { filter:drop-shadow(0 0 8px var(--cyan,#39d6ff)); }.sim-scene.has-network .sim-network-wave { display:block; }.sim-scene.has-network.is-network-on .sim-network-wave { animation:sceneSignal 2.3s ease-out infinite; }.sim-scene.has-network.is-network-on .sim-network-two { animation-delay:.55s; }.sim-scene.is-playing .sim-scene-orb { animation:sceneMoon 3s ease-in-out infinite; }.sim-scene.is-playing .sim-scene-grid { animation:sceneGrid 5s linear infinite; }.sim-scene-caption.is-active .scene-dot { background:var(--cyan,#39d6ff); box-shadow:0 0 10px var(--cyan,#39d6ff); animation:scenePulse 1.2s ease-in-out infinite; }
.sim-scene-controls { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }.sim-scene-controls button { padding:.68rem .9rem; border:1px solid rgba(14,87,176,.25); border-radius:.65rem; background:#fff; color:var(--blue-950,#031b42); font:inherit; font-size:.82rem; font-weight:850; cursor:pointer; transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease; }.sim-scene-controls button:hover { transform:translateY(-2px); border-color:var(--cyan,#39d6ff); background:rgba(57,214,255,.1); }.sim-scene-controls button.is-primary { border-color:var(--blue-700,#0e57b0); background:var(--blue-700,#0e57b0); color:#fff; box-shadow:0 7px 18px rgba(14,87,176,.2); }.sim-scene-controls button.is-primary:hover { background:var(--blue-950,#031b42); }
@keyframes scenePulse { 0%,100% { transform:scale(.78); opacity:.42; } 50% { transform:scale(1.28); opacity:1; } } @keyframes sceneSignal { 0% { transform:scale(.25); opacity:.9; } 100% { transform:scale(2.6); opacity:0; } } @keyframes sceneMoon { 0%,100% { opacity:.75; transform:scale(.94); } 50% { opacity:1; transform:scale(1.06); } } @keyframes sceneGrid { from { transform:perspective(420px) rotateX(62deg) rotateZ(-2deg) translateY(0); } to { transform:perspective(420px) rotateX(62deg) rotateZ(-2deg) translateY(28px); } }
@media (max-width:760px) { .sim-visualizer { padding:1rem; }.sim-visualizer-heading { display:block; }.sim-visualizer-status { max-width:none; margin-top:1rem; }.sim-scene { height:310px; }.sim-scene-house { left:8%; width:56%; height:43%; }.sim-scene-gate { right:3%; width:26%; }.sim-lamp-one { left:3%; }.sim-lamp-two { left:70%; }.sim-scene-security { left:58%; top:22%; transform:scale(.8); }.sim-scene-controls button { flex:1 1 45%; }.sim-scene-controls button.is-primary { flex-basis:100%; } }
@media (prefers-reduced-motion:reduce) { .sim-scene *,.sim-scene::before { animation:none !important; transition:none !important; } }

/* Coupe en vue de dessus — niveaux de la maison */
.sim-floor-visualizer { margin:1.7rem 0; padding:1.4rem; border:1px solid rgba(57,214,255,.34); border-radius:1.25rem; background:linear-gradient(150deg,#fff,rgba(237,248,255,.82)); box-shadow:0 18px 40px rgba(3,27,66,.08); }.sim-floor-heading { display:flex; align-items:end; justify-content:space-between; gap:1.5rem; }.sim-floor-heading > div:first-child { max-width:760px; }.sim-floor-heading h2 { margin:.2rem 0 .5rem; color:var(--blue-950,#031b42); }.sim-floor-heading p { margin:0; color:var(--muted,#58677a); line-height:1.6; }.sim-floor-key { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; max-width:300px; }.sim-floor-key span { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .55rem; border-radius:999px; background:#fff; color:var(--blue-950,#031b42); font-size:.7rem; font-weight:850; box-shadow:0 5px 14px rgba(3,27,66,.06); }.sim-floor-key span::before { content:""; width:.55rem; height:.55rem; border-radius:50%; }.floor-key-light::before { background:#ffe37d; box-shadow:0 0 8px #ffe37d; }.floor-key-network::before { background:var(--cyan,#39d6ff); box-shadow:0 0 8px var(--cyan,#39d6ff); }.floor-key-security::before { background:#426a9b; }.sim-floor-tabs { display:inline-flex; gap:.35rem; margin:1.25rem 0 .9rem; padding:.3rem; border:1px solid rgba(14,87,176,.14); border-radius:.8rem; background:rgba(255,255,255,.75); }.sim-floor-tabs button { border:0; border-radius:.55rem; padding:.55rem .85rem; background:transparent; color:var(--muted,#58677a); font:inherit; font-size:.79rem; font-weight:850; cursor:pointer; transition:background .2s ease,color .2s ease,box-shadow .2s ease; }.sim-floor-tabs button:hover { color:var(--blue-700,#0e57b0); }.sim-floor-tabs button.is-active { background:var(--blue-700,#0e57b0); color:#fff; box-shadow:0 5px 12px rgba(14,87,176,.2); }.sim-floorplan { overflow:hidden; border:1px solid rgba(57,214,255,.28); border-radius:1rem; background:radial-gradient(circle at 76% 19%,rgba(57,214,255,.14),transparent 28%),linear-gradient(145deg,#061d45,#103f72); }.sim-floorplan-shell { position:relative; display:grid; grid-template-columns:1.25fr .9fr 1.05fr; grid-template-rows:1fr 1fr; gap:.35rem; min-height:445px; padding:3.4rem 2rem 2rem; background-image:linear-gradient(rgba(182,242,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(182,242,255,.06) 1px,transparent 1px); background-size:28px 28px; }.sim-floorplan-shell::before { content:""; position:absolute; inset:1rem; border:1px solid rgba(182,242,255,.28); border-radius:.75rem; pointer-events:none; }.floorplan-title { position:absolute; z-index:3; top:1.05rem; left:1.3rem; color:var(--cyan-soft,#b6f2ff); font-size:.75rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }.floorplan-compass { position:absolute; z-index:3; right:1.4rem; top:.95rem; display:grid; place-items:center; width:1.6rem; height:1.6rem; border:1px solid rgba(182,242,255,.42); border-radius:50%; color:var(--cyan-soft,#b6f2ff); font-size:.65rem; font-weight:900; }.floor-room { position:relative; overflow:hidden; min-height:110px; border:1px solid rgba(182,242,255,.4); border-radius:.35rem; background:linear-gradient(145deg,rgba(26,82,130,.78),rgba(8,38,72,.9)); box-shadow:inset 0 0 22px rgba(57,214,255,.05),0 5px 14px rgba(0,0,0,.12); transition:background .6s ease,box-shadow .6s ease,transform .35s ease; }.floor-room::after { content:""; position:absolute; right:9%; bottom:0; width:32%; height:4px; border-radius:2px 2px 0 0; background:rgba(182,242,255,.28); }.floor-room:hover { transform:translateY(-2px); }.floor-room-name { position:absolute; top:.7rem; left:.75rem; color:rgba(255,255,255,.86); font-size:.75rem; font-weight:850; letter-spacing:.02em; }.floor-living { grid-column:1 / 3; grid-row:1; }.floor-kitchen { grid-column:3; grid-row:1; }.floor-entry { grid-column:1; grid-row:2; }.floor-garage { grid-column:2 / 4; grid-row:2; }.floor-bedroom-one { grid-column:1 / 3; grid-row:1; }.floor-bedroom-two { grid-column:3; grid-row:1; }.floor-office { grid-column:1; grid-row:2; }.floor-bathroom { grid-column:2; grid-row:2; }.floor-landing { grid-column:3; grid-row:2; }.floor-light-node { position:absolute; z-index:2; width:13px; height:13px; border:2px solid rgba(255,255,255,.42); border-radius:50%; background:#193b60; transition:background .6s ease,box-shadow .6s ease,transform .6s ease; }.floor-light-a { left:30%; top:42%; }.floor-light-b { left:68%; top:52%; }.floor-light-c { left:52%; top:48%; }.floor-light-d { left:48%; top:42%; }.floor-light-e { left:62%; top:49%; }.floor-light-f { left:32%; top:46%; }.floor-light-g { left:53%; top:50%; }.floor-light-h { left:50%; top:44%; }.floor-light-i { left:52%; top:48%; }.floor-light-j { left:50%; top:45%; }.floor-network-node { position:absolute; right:12%; bottom:16%; width:12px; height:12px; border:2px solid rgba(57,214,255,.56); border-radius:3px; transition:background .55s ease,box-shadow .55s ease,transform .55s ease; }.floor-socket-node { position:absolute; left:12%; bottom:16%; width:12px; height:9px; border:1px solid rgba(182,242,255,.46); border-radius:2px; }.floor-socket-node::before,.floor-socket-node::after { content:""; position:absolute; top:2px; width:2px; height:3px; background:rgba(182,242,255,.72); }.floor-socket-node::before { left:3px; }.floor-socket-node::after { right:3px; }.floor-shutter-node { position:absolute; top:0; right:22%; width:31%; height:7px; background:repeating-linear-gradient(90deg,rgba(182,242,255,.67) 0 3px,transparent 3px 6px); transform-origin:right; transition:transform .9s cubic-bezier(.2,.8,.2,1),background .5s ease; }.floor-alarm-node { position:absolute; bottom:17%; right:14%; width:15px; height:15px; border:2px solid rgba(255,255,255,.32); border-radius:50%; transition:border-color .5s ease,box-shadow .5s ease,transform .5s ease; }.floor-door-node { position:absolute; bottom:0; left:28%; width:24%; height:6px; background:rgba(182,242,255,.28); transition:background .5s ease,box-shadow .5s ease; }.floor-garage-node { position:absolute; right:0; top:30%; width:7px; height:48%; background:repeating-linear-gradient(0deg,rgba(182,242,255,.56) 0 4px,transparent 4px 7px); transform-origin:top; transition:transform .9s cubic-bezier(.2,.8,.2,1),filter .5s ease; }.floor-gate-node { position:absolute; z-index:2; right:2rem; bottom:.72rem; display:flex; align-items:end; justify-content:center; width:23%; height:32px; border-top:3px solid rgba(182,242,255,.42); border-left:3px solid rgba(182,242,255,.42); border-right:3px solid rgba(182,242,255,.42); color:rgba(182,242,255,.72); font-size:.65rem; font-weight:850; transition:transform .9s cubic-bezier(.2,.8,.2,1),border-color .5s ease; }.floor-gate-node::before,.floor-gate-node::after { content:""; position:absolute; top:-3px; width:45%; height:3px; background:rgba(182,242,255,.42); transform-origin:center left; transition:transform .9s cubic-bezier(.2,.8,.2,1); }.floor-gate-node::before { left:0; }.floor-gate-node::after { right:0; transform-origin:center right; }.floor-network-line { position:absolute; z-index:2; height:1px; background:linear-gradient(90deg,transparent,var(--cyan,#39d6ff),transparent); opacity:.18; transform-origin:left; transition:opacity .5s ease; }.floor-network-line-one { left:23%; top:44%; width:52%; transform:rotate(12deg); }.floor-network-line-two { left:28%; top:70%; width:41%; transform:rotate(-18deg); }.floor-network-line-three { left:23%; top:54%; width:51%; transform:rotate(12deg); }.floor-signal-floor { position:absolute; z-index:3; width:28px; height:28px; border:1px solid var(--cyan,#39d6ff); border-radius:50%; opacity:0; }.floor-signal-rdc { left:44%; top:37%; }.floor-signal-etage { left:48%; top:36%; }.sim-floorplan-shell.has-lighting.is-lighting-on .floor-light-node { border-color:#fff3b4; background:#fff3b4; box-shadow:0 0 11px #fff3b4,0 0 25px rgba(255,213,83,.78); transform:scale(1.25); }.sim-floorplan-shell.has-lighting.is-lighting-on .floor-room { background:linear-gradient(145deg,rgba(62,100,137,.94),rgba(11,47,80,.95)); box-shadow:inset 0 0 42px rgba(255,222,122,.15),0 5px 14px rgba(0,0,0,.12); }.sim-floorplan-shell.has-network.is-network-on .floor-network-node { background:var(--cyan,#39d6ff); box-shadow:0 0 10px var(--cyan,#39d6ff); transform:rotate(45deg); }.sim-floorplan-shell.has-network.is-network-on .floor-network-line { opacity:.95; animation:floorData 2.1s linear infinite; }.sim-floorplan-shell.has-network.is-network-on .floor-signal-floor { animation:floorSignal 2.25s ease-out infinite; }.sim-floorplan-shell.has-shutters.is-access-open .floor-shutter-node { transform:scaleX(.1); background:var(--cyan,#39d6ff); }.sim-floorplan-shell.has-garage.is-access-open .floor-garage-node { transform:scaleY(.16); filter:drop-shadow(0 0 7px var(--cyan,#39d6ff)); }.sim-floorplan-shell.has-gate.is-access-open .floor-gate-node { border-color:var(--cyan,#39d6ff); }.sim-floorplan-shell.has-gate.is-access-open .floor-gate-node::before { transform:rotate(-34deg); }.sim-floorplan-shell.has-gate.is-access-open .floor-gate-node::after { transform:rotate(34deg); }.sim-floorplan-shell.has-security.is-security-on .floor-alarm-node { border-color:var(--cyan,#39d6ff); box-shadow:0 0 12px var(--cyan,#39d6ff); animation:floorSecurity 1.35s ease-in-out infinite; }.sim-floorplan-shell.has-security.is-security-on .floor-door-node { background:var(--cyan,#39d6ff); box-shadow:0 0 9px var(--cyan,#39d6ff); }.sim-floorplan-shell.is-playing .floor-room { animation:floorRoom 3.2s ease-in-out infinite; }.sim-floor-footer { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; margin-top:1rem; }.sim-floor-footer > p { margin:0; color:var(--muted,#58677a); font-size:.82rem; font-weight:700; }.sim-floor-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; }.sim-floor-actions button { padding:.62rem .75rem; border:1px solid rgba(14,87,176,.24); border-radius:.58rem; background:#fff; color:var(--blue-950,#031b42); font:inherit; font-size:.75rem; font-weight:850; cursor:pointer; transition:transform .2s ease,background .2s ease,color .2s ease; }.sim-floor-actions button:hover { transform:translateY(-2px); background:rgba(57,214,255,.12); }.sim-floor-actions button.is-primary { border-color:var(--blue-700,#0e57b0); background:var(--blue-700,#0e57b0); color:#fff; }
@keyframes floorData { 0% { transform:scaleX(.1); opacity:.3; } 55% { opacity:1; } 100% { transform:scaleX(1); opacity:.1; } } @keyframes floorSignal { 0% { transform:scale(.22); opacity:1; } 100% { transform:scale(2.8); opacity:0; } } @keyframes floorSecurity { 0%,100% { transform:scale(.8); opacity:.5; } 50% { transform:scale(1.25); opacity:1; } } @keyframes floorRoom { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.08); } }
@media (max-width:760px) { .sim-floor-visualizer { padding:1rem; }.sim-floor-heading { display:block; }.sim-floor-key { justify-content:flex-start; margin-top:1rem; }.sim-floorplan-shell { min-height:395px; padding:3rem 1rem 1.6rem; gap:.22rem; }.floor-room-name { top:.45rem; left:.45rem; font-size:.62rem; }.floor-gate-node { right:1rem; width:27%; }.sim-floor-footer { display:block; }.sim-floor-actions { justify-content:flex-start; margin-top:.75rem; }.sim-floor-actions button { flex:1 1 45%; }.sim-floor-actions button.is-primary { flex-basis:100%; } }
@media (max-width:480px) { .sim-floorplan-shell { grid-template-columns:1.15fr .9fr .95fr; min-height:335px; }.floor-room { min-height:84px; }.floor-light-node { transform:scale(.78); }.floor-network-node,.floor-socket-node,.floor-alarm-node { transform:scale(.76); }.sim-floor-key span { font-size:.62rem; } }
@media (prefers-reduced-motion:reduce) { .sim-floorplan-shell * { animation:none !important; transition:none !important; } }

.sim-floorplan-shell.has-sockets.is-lighting-on .floor-socket-node { border-color:#fff3b4; background:rgba(255,227,125,.52); box-shadow:0 0 9px rgba(255,227,125,.8); }