:root {

  --bg: #040404;

  --bg-2: #0b0b0d;

  --panel: rgba(12, 12, 14, .74);

  --panel-strong: rgba(9, 9, 11, .90);

  --text: #f3f1ee;

  --muted: #b9b3ad;

  --line: rgba(255,255,255,.08);

  --accent: #e42226;

  --accent-2: #ff4747;

  --accent-soft: rgba(228, 34, 38, .12);

  --header-h: 88px;

  --max: 1280px;

}



* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--bg); }

body {

margin: 0;

background: var(--bg);

color: var(--text);

font-family: "Raleway", sans-serif;

font-weight: 400;

overflow-x: hidden;

}

body.menu-open { overflow: hidden; }

a { color: inherit; }

img { display: block; max-width: 100%; }

button, a { -webkit-tap-highlight-color: transparent; }



.section-shell,

.hero-inner {

width: min(calc(100% - 88px), var(--max));

margin: 0 auto;

position: relative;

z-index: 3;

}



.site-header {

position: fixed;

inset: 0 0 auto 0;

height: var(--header-h);

z-index: 1000;

display: grid;

grid-template-columns: auto 1fr auto;

align-items: center;

gap: 22px;

padding: 0 clamp(26px, 4vw, 58px);

background: rgba(6, 6, 7, .68);

backdrop-filter: blur(14px);

-webkit-backdrop-filter: blur(14px);

border-bottom: 1px solid rgba(255,255,255,.07);

}



.brand {

display: inline-flex;

align-items: center;

gap: 12px;

text-decoration: none;

min-width: 0;

}

.brand-mark {

font-size: 23px;

font-weight: 850;

letter-spacing: -.07em;

line-height: 1;

color: #5cc2ff;

}

.brand-copy { display: grid; gap: 2px; }

.brand-copy strong,

.footer-brand strong {

font-size: 11px;

letter-spacing: .18em;

font-weight: 760;

}

.brand-copy small,

.footer-brand small {

font-size: 7px;

letter-spacing: .22em;

color: rgba(255,255,255,.55);

}



.desktop-nav {

justify-self: center;

display: flex;

align-items: center;

justify-content: center;

gap: clamp(24px, 2.2vw, 40px);

}

.desktop-nav a {

position: relative;

text-decoration: none;

text-transform: uppercase;

font-size: 10px;

letter-spacing: .21em;

color: #e5ddd5;

transition: color .2s ease;

}

.desktop-nav a::after {

content: "";

position: absolute;

left: 0;

right: 100%;

bottom: -10px;

height: 1px;

background: var(--accent);

transition: right .25s ease;

}

.desktop-nav a:hover { color: #fff; }

.desktop-nav a:hover::after { right: 0; }



.header-cta-wrap { justify-self: end; }

.nav-cta,

.mobile-cta,

.btn-primary {

text-decoration: none;

text-transform: uppercase;

font-size: 10px;

letter-spacing: .16em;

font-weight: 760;

border: 1px solid rgba(255,255,255,.1);

background: linear-gradient(180deg, #ff3136 0%, #de161b 100%);

box-shadow: 0 12px 34px rgba(223, 22, 28, .22);

}

.nav-cta {

display: inline-flex;

align-items: center;

justify-content: center;

min-height: 43px;

padding: 0 21px;

transition: transform .22s ease, box-shadow .22s ease;

}

.nav-cta:hover,

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(223, 22, 28, .32); }



.menu-toggle {

display: none;

width: 42px;

height: 42px;

border: 0;

background: transparent;

place-items: center;

align-content: center;

gap: 5px;

padding: 10px;

cursor: pointer;

z-index: 1200;

justify-self: end;

}

.menu-toggle span {

width: 21px;

height: 1px;

display: block;

background: #fff;

transition: transform .3s ease, opacity .3s ease;

}

.menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }

.menu-toggle.is-open span:nth-child(2) { opacity: 0; }

.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }



.mobile-menu {

position: fixed;

inset: 0;

z-index: 900;

display: grid;

place-items: center;

background: radial-gradient(circle at 64% 34%, rgba(228,34,38,.14), transparent 28rem), rgba(4,4,4,.985);

opacity: 0;

visibility: hidden;

transition: opacity .32s ease, visibility .32s ease;

}

.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu nav { display: grid; gap: 22px; text-align: center; }

.mobile-menu a {

text-decoration: none;

text-transform: uppercase;

font-size: clamp(20px, 6vw, 34px);

font-weight: 650;

letter-spacing: .1em;

opacity: 0;

transform: translateY(12px);

transition: opacity .32s ease, transform .32s ease, color .2s ease;

}

.mobile-menu.is-open a { opacity: 1; transform: none; }

.mobile-menu.is-open a:nth-child(1) { transition-delay: .08s; }

.mobile-menu.is-open a:nth-child(2) { transition-delay: .13s; }

.mobile-menu.is-open a:nth-child(3) { transition-delay: .18s; }

.mobile-menu.is-open a:nth-child(4) { transition-delay: .23s; }

.mobile-menu.is-open a:nth-child(5) { transition-delay: .28s; }

.mobile-menu a:hover { color: var(--accent-2); }

.mobile-cta { display: inline-flex; justify-content: center; align-items: center; margin-top: 10px; min-height: 48px; padding: 0 22px; font-size: 12px !important; }



.hero,

.immersive-section,

.gallery-section,

.contact-section {

position: relative;

overflow: hidden;

isolation: isolate;

}



.hero {

min-height: 100svh;

display: flex;

align-items: center;

}

.hero-bg,

.section-bg {

position: absolute;

inset: 0;

z-index: -3;

background-position: center center;

background-size: cover;

background-repeat: no-repeat;

}

.hero-bg {

background-image: url("../images/hero-interior-v4.webp");

transform: scale(1.04);

}

.hero-overlay,

.section-shade {

position: absolute;

inset: 0;

z-index: -2;

}

.hero-overlay {

background:

    linear-gradient(90deg, rgba(3,3,4,.92) 0%, rgba(3,3,4,.75) 35%, rgba(3,3,4,.45) 58%, rgba(3,3,4,.72) 100%),

    linear-gradient(180deg, rgba(3,3,4,.28) 0%, rgba(3,3,4,.14) 48%, rgba(3,3,4,.78) 100%);

}

.hero::after,

.immersive-section::after {

content: "";

position: absolute;

inset: 0;

z-index: -1;

background: radial-gradient(circle at 28% 60%, rgba(228,34,38,.13), transparent 28rem);

pointer-events: none;

}



.hero-inner {

padding: calc(var(--header-h) + 86px) 0 74px;

}

.section-kicker {

margin: 0 0 18px;

display: inline-flex;

align-items: center;

gap: 12px;

text-transform: uppercase;

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

font-size: 10px;

letter-spacing: .28em;

color: #45d7ff;

font-weight: 600;



text-shadow:

    0 0 6px rgba(69, 215, 255, .45),

    0 0 12px rgba(69, 215, 255, .20);

}



.section-kicker span {

width: 22px;

height: 1px;

background: #45d7ff;

flex: 0 0 auto;



box-shadow:

    0 0 6px rgba(69, 215, 255, .55);

}



h1, h2, h3 { margin-top: 0; }

h1 {

width: auto;

max-width: none;

margin-bottom: 22px;

font-size: clamp(42px, 4.2vw, 64px);

line-height: .98;

letter-spacing: -.04em;

font-weight: 760;

}



h1 span {

display: block;

white-space: nowrap;

}

.hero-intro {

max-width: 620px;

margin: 0;

color: rgba(255,255,255,.82);

font-size: clamp(14px, 1vw, 15.5px);

line-height: 1.78;

}

.hero-actions {

margin-top: 30px;

display: flex;

align-items: center;

gap: 24px;

flex-wrap: wrap;

}

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

text-decoration: none;

transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease;

}

.btn-primary {

min-height: 48px;

padding: 0 24px;

}

.btn-link {

position: relative;

gap: 10px;

padding: 9px 0;

color: #ede5de;

font-size: 11px;

letter-spacing: .08em;

text-transform: uppercase;

}

.btn-link::before {

content: "";

width: 34px;

height: 1px;

margin-right: 2px;

background: rgba(255,255,255,.55);

}

.btn-link:hover { color: #fff; }



.hero-proof {

margin-top: 46px;

display: flex;

gap: 36px;

flex-wrap: wrap;

}

.hero-proof div {

min-width: 170px;

padding-top: 10px;

border-top: 1px solid rgba(255,255,255,.16);

display: grid;

gap: 5px;

}

.hero-proof strong {

font-size: 11px;

letter-spacing: .02em;

text-transform: uppercase;

}

.hero-proof small {

font-size: 10px;

line-height: 1.45;

color: rgba(255,255,255,.62);

}

.hero-signature {

position: absolute;

right: clamp(28px, 5vw, 72px);

bottom: 40px;

font-size: 11px;

letter-spacing: .18em;

text-transform: uppercase;

color: rgba(255,255,255,.44);

}



.formules,

.gallery-section,

.approach,

.contact-section {

border-top: 1px solid rgba(255,255,255,.05);

}

.formules,

.approach,

.contact-section { padding: 128px 0; }

.gallery-section { padding: 120px 0 132px; }

.formules-bg,

.gallery-bg,

.approach-bg,

.contact-bg {

background-image: url("../images/hero-interior-v4.webp");

background-attachment: fixed;

}

.formules-bg { background-position: center center; }

.gallery-bg { background-position: center 32%; }

.approach-bg { background-position: center 58%; }

.contact-bg { background-position: center 44%; }

.section-shade {

background: linear-gradient(90deg, rgba(3,3,4,.94) 0%, rgba(3,3,4,.80) 46%, rgba(3,3,4,.56) 72%, rgba(3,3,4,.82) 100%);

}

.gallery-shade { background: linear-gradient(180deg, rgba(3,3,4,.84), rgba(3,3,4,.78)); }

.contact-shade { background: linear-gradient(90deg, rgba(3,3,4,.94), rgba(3,3,4,.70)); }



.section-head {

max-width: 820px;

margin-bottom: 42px;

}

.section-head h2,

.approach-copy h2,

.contact-inner h2 {

margin-bottom: 18px;

font-size: clamp(34px, 3.5vw, 56px);

line-height: .98;

letter-spacing: -.042em;

font-weight: 730;

}

.section-head > p:last-child,

.contact-inner > div > p:last-child,

.approach-copy > p {

color: rgba(255,255,255,.74);

font-size: 14px;

line-height: 1.76;

max-width: 760px;

}



.formula-grid {

display: grid;

gap: 18px;

}

.formula-grid-3 {

grid-template-columns: repeat(3, minmax(0, 1fr));

max-width: 1120px;

}

.formula-card {

position: relative;

min-height: 520px;

padding: 32px 30px 28px;

background: rgba(8,8,10,.68);

border: 1px solid rgba(255,255,255,.09);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

box-shadow: 0 24px 70px rgba(0,0,0,.2);

}

.formula-card::after {

content: "";

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 2px;

background: linear-gradient(90deg, var(--accent), transparent);

opacity: .85;

}

.formula-card-featured {

background: linear-gradient(180deg, rgba(227,24,31,.92) 0%, rgba(186,18,23,.88) 100%);

border-color: rgba(255,255,255,.14);

}

.formula-card-featured::after { background: rgba(255,255,255,.65); }

.formula-badge {

position: absolute;

left: 30px;

top: 16px;

font-size: 8px;

letter-spacing: .18em;

color: rgba(255,255,255,.78);

}

.formula-topline {

margin-bottom: 16px;

color: var(--accent-2);

font-size: 9px;

letter-spacing: .20em;

text-transform: uppercase;

}

.formula-card-featured .formula-topline,

.formula-card-featured .formula-badge { color: rgba(255,255,255,.9); }

.formula-card h3 {

margin-bottom: 12px;

max-width: 220px;

font-size: 38px;

line-height: .98;

letter-spacing: -.04em;

font-weight: 720;

}

.formula-meta {

display: flex;

align-items: baseline;

gap: 12px;

margin-bottom: 18px;

flex-wrap: wrap;

}

.formula-meta strong {

font-size: 31px;

font-weight: 720;

}

.formula-meta span {

font-size: 10px;

color: rgba(255,255,255,.62);

text-transform: uppercase;

letter-spacing: .12em;

}

.formula-card-featured .formula-meta span { color: rgba(255,255,255,.76); }

.formula-card > p {

margin: 0 0 24px;

color: rgba(255,255,255,.76);

font-size: 13px;

line-height: 1.68;

}

.formula-card ul {

margin: 0 0 30px;

padding: 0;

list-style: none;

display: grid;

gap: 12px;

}

.formula-card li {

padding-bottom: 10px;

border-bottom: 1px solid rgba(255,255,255,.08);

font-size: 12px;

color: #f0ece7;

line-height: 1.55;

}

.formula-card li::before {

content: "✓";

margin-right: 10px;

color: var(--accent-2);

}

.formula-card-featured li::before { color: #fff; }

.card-link {

display: inline-flex;

align-items: center;

gap: 10px;

text-decoration: none;

text-transform: uppercase;

font-size: 9px;

letter-spacing: .16em;

font-weight: 700;

color: #fbf7f3;

}

.card-link:hover { color: rgba(255,255,255,.74); }



.gallery-shell .section-head { margin-bottom: 34px; }

.gallery-slider {

position: relative;

width: min(100%, 980px);

min-height: 590px;

background: rgba(8,8,10,.56);

border: 1px solid rgba(255,255,255,.1);

overflow: hidden;

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

}

.slides { position: relative; min-height: 590px; }

.slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .55s ease, transform .8s ease; pointer-events: none; }

.slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

.slide img { width: 100%; height: 100%; min-height: 590px; object-fit: cover; }

.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 62%,rgba(8,8,10,.82)); pointer-events: none; }

.slide-caption {

position: absolute;

left: 28px;

bottom: 26px;

z-index: 2;

display: flex;

align-items: center;

gap: 12px;

}

.slide-caption span { color: var(--accent-2); font-size: 9px; letter-spacing: .18em; }

.slide-caption p { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.slider-btn {

position: absolute;

top: 50%;

z-index: 5;

width: 44px;

height: 44px;

border: 1px solid rgba(255,255,255,.16);

background: rgba(8,8,10,.82);

color: #fff;

font-size: 24px;

cursor: pointer;

transform: translateY(-50%);

transition: border-color .2s ease, background .2s ease;

}

.slider-btn:hover { border-color: rgba(255,255,255,.34); background: rgba(25,25,28,.92); }

.slider-btn.prev { left: 18px; }

.slider-btn.next { right: 18px; }

.slider-dots { position: absolute; right: 24px; bottom: 28px; z-index: 6; display: flex; gap: 8px; }

.dot { width: 22px; height: 2px; padding: 0; border: 0; background: rgba(255,255,255,.28); cursor: pointer; }

.dot.is-active { background: var(--accent); }



.approach-head {

max-width: 820px;

margin-bottom: 42px;

}



.approach-head h2 {

margin: 0;

font-size: clamp(34px, 3.5vw, 56px);

line-height: .98;

letter-spacing: -.042em;

font-weight: 730;

}



.approach-layout {

display: grid;

grid-template-columns: minmax(0, 760px) 380px;

justify-content: space-between;

align-items: center;

gap: 70px;

}

.approach-image {

position: relative;

max-width: 380px;

justify-self: end;

margin-top: 40px;

background: rgba(8,8,10,.55);

padding: 0;

border: 1px solid rgba(255,255,255,.08);

}

.approach-image img {

display: block;

width: 100%;

height: auto;

}

.approach-image::before {

content: "";

position: absolute;

left: -14px;

top: -14px;

width: 78px;

height: 78px;

border-left: 2px solid var(--accent);

border-top: 2px solid var(--accent);

z-index: 2;

}

.approach-image::after {

content: "";

position: absolute;

right: -14px;

bottom: -14px;

width: 92px;

height: 92px;

border-right: 1px solid rgba(255,255,255,.35);

border-bottom: 1px solid rgba(255,255,255,.35);

z-index: 2;

}

.approach-image img { width: 100%; aspect-ratio: .82; object-fit: cover; border: 1px solid rgba(255,255,255,.08); }

.approach-copy { max-width: 760px; }

.approach-copy > p { margin: 0 0 15px; }

.approach-tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 9px; }

.approach-tags span {

padding: 9px 12px;

border: 1px solid rgba(255,255,255,.10);

background: rgba(8,8,10,.48);

font-size: 9px;

letter-spacing: .14em;

text-transform: uppercase;

color: #e6dfd8;

}

.approach-link { margin-top: 24px; }



.contact-inner {

display: flex;

align-items: end;

justify-content: space-between;

gap: 46px;

}

.contact-inner h2 { margin-bottom: 12px; }

.contact-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }



.site-footer {

display: flex;

align-items: center;

justify-content: center;

padding: 8px 24px;

border-top: 1px solid rgba(255,255,255,.06);

background: #060607;

}



.footer-logo-link {

display: inline-flex;

align-items: center;

justify-content: center;

}



.footer-logo {

display: block;

width: 240px;

height: auto;

max-width: 80vw;

object-fit: contain;

}

.footer-links a:hover { color: #fff; }



.reveal { opacity: 0; transform: translateY(24px); transition: opacity .72s ease, transform .72s ease; }

.reveal.is-visible { opacity: 1; transform: none; }



.cursor-dot,

.cursor-ring {

position: fixed;

left: -100px;

top: -100px;

border-radius: 50%;

pointer-events: none;

transform: translate(-50%,-50%);

z-index: 2000;

}

.cursor-dot { width: 6px; height: 6px; background: var(--accent-2); box-shadow: 0 0 12px rgba(255,71,71,.7); }

.cursor-ring { width: 32px; height: 32px; border: 1px solid rgba(228,34,38,.5); transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease; }

.cursor-ring.is-hovering { width: 48px; height: 48px; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.03); }



@media (pointer: fine) and (min-width: 901px) {

  body { cursor: none; }

  a, button { cursor: none; }

}



@media (max-width: 1080px) {

  .formula-grid-3 { grid-template-columns: 1fr; max-width: 670px; }

  .formula-card { min-height: 0; }

}



@media (max-width: 980px) {

  .desktop-nav, .header-cta-wrap { display: none; }

  .menu-toggle { display: grid; }

  .site-header { grid-template-columns: auto 1fr auto; }

  .section-shell, .hero-inner { width: min(calc(100% - 46px), var(--max)); }

  h1 { width: min(780px, 90vw); }

  .approach-layout { grid-template-columns: 1fr; }

  .approach-image { max-width: 430px; }

  .contact-inner { align-items: flex-start; flex-direction: column; }

  .contact-actions { justify-content: flex-start; }

}



@media (max-width: 760px) {

  .formules, .gallery-section, .approach, .contact-section { padding: 92px 0; }

  .gallery-slider, .slides { min-height: 450px; }

  .slide img { min-height: 450px; }

}



@media (max-width: 680px) {

  :root { --header-h: 76px; }

  .site-header { padding: 0 20px; }

  .brand-copy strong { font-size: 10px; }

  .brand-copy small { font-size: 6.5px; }

  .section-shell, .hero-inner { width: calc(100% - 36px); }

  .hero-inner { padding: calc(var(--header-h) + 76px) 0 60px; }

  h1 { width: 100%; font-size: clamp(38px, 13vw, 56px); }

  .hero-intro { font-size: 14px; }

  .hero-proof { gap: 14px; }

  .hero-proof div { min-width: calc(50% - 8px); }

  .hero-signature { display: none; }

  .section-head h2, .approach-copy h2, .contact-inner h2 { font-size: clamp(30px, 9vw, 42px); }

  .formula-card { padding: 24px 20px; }

  .formula-badge {

position: static;

display: block;

margin-bottom: 12px;

  }

  .formula-topline {

margin-top: 0;

  }

  .formula-card h3 { font-size: 32px; }

  .gallery-slider, .slides { min-height: 380px; }

  .slide img { min-height: 380px; }

  .approach-image { max-width: 84%; margin-left: 5%; }

  .site-footer { flex-direction: column; align-items: flex-start; }

}



/* =========================================================

   V5 CORRIGÉE — UNIQUEMENT LES 4 CORRECTIONS VALIDÉES

   1. Palette Auto Brillance 80

   2. Logo de référence en haut à gauche

   3. Navigation décalée à droite

   4. Fond photo continu sans rupture visuelle entre sections

   ========================================================= */



:root {

  --bg: #020610;

  --bg-2: #07101b;

  --panel: rgba(8, 14, 24, .78);

  --panel-strong: rgba(6, 12, 22, .92);

  --text: #f4f6fa;

  --muted: #9aa8ba;

  --line: rgba(121, 198, 255, .18);

  --accent: #45d7ff;

  --accent-2: #9c55f7;

  --accent-soft: rgba(108, 60, 255, .14);

}



/* 1 — Palette Auto Brillance 80 */

.nav-cta,

.mobile-cta,

.btn-primary {

background: linear-gradient(100deg, #6131ea, #9849ef);

border-color: rgba(255,255,255,.08);

box-shadow: 0 12px 34px rgba(113,56,240,.22);

}

.nav-cta:hover,

.btn-primary:hover {

box-shadow: 0 14px 36px rgba(113,56,240,.34);

}

.mobile-menu {

background: radial-gradient(circle at 64% 34%, rgba(60,126,255,.12), transparent 28rem), rgba(2,6,15,.985);

}

.formula-card-featured {

border-color: rgba(124,83,247,.55);

background: linear-gradient(160deg, rgba(55,27,94,.80), rgba(6,12,22,.90) 56%);

}

.formula-topline,

.slide-caption span { color: var(--accent); }

.formula-card li::before { color: var(--accent); }

.formula-card-featured li::before { color: #fff; }

.dot.is-active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.approach-image::before {

border-left-color: var(--accent-2);

border-top-color: var(--accent-2);

}

.cursor-dot {

background: var(--accent);

box-shadow: 0 0 12px rgba(69,215,255,.70);

}

.cursor-ring { border-color: rgba(151,93,247,.58); }

.cursor-ring.is-hovering {

border-color: rgba(69,215,255,.66);

background: rgba(69,215,255,.04);

}



/* 2 — Bloc logo Auto Brillance 80 du visuel de référence */

.brand {

display: inline-flex;

align-items: center;

gap: 0;

text-decoration: none;

flex: 0 0 auto;

}

.brand-logo {

display: block;

width: 380px;

height: auto;

max-width: none;

object-fit: contain;

object-position: left center;

}



/* 3 — Navigation regroupée sur la partie droite */

.site-header {

display: flex;

align-items: center;

}

.desktop-nav {

margin-left: auto;

justify-self: auto;

justify-content: flex-end;

}

.header-cta-wrap {

margin-left: clamp(24px, 2.6vw, 42px);

justify-self: auto;

}



/* 4 — Une seule photo de fond continue sur toute la page */

body {

background-color: #020610;

background-image:

    linear-gradient(90deg, rgba(2,6,15,.91) 0%, rgba(2,6,15,.74) 36%, rgba(2,6,15,.44) 61%, rgba(2,6,15,.68) 100%),

    linear-gradient(180deg, rgba(2,6,15,.18) 0%, rgba(2,6,15,.10) 44%, rgba(2,6,15,.40) 100%),

    url("../images/hero-interior-v4.webp");

background-position: center center, center center, center center;

background-size: cover, cover, cover;

background-repeat: no-repeat, no-repeat, no-repeat;

background-attachment: fixed, fixed, fixed;

}

.hero-bg,

.section-bg { display: none; }

.hero-overlay,

.section-shade,

.gallery-shade,

.contact-shade { background: transparent; }

.hero::after,

.immersive-section::after { display: none; }

.formules,

.gallery-section,

.approach,

.contact-section { border-top: 0; }



@media (max-width: 980px) {

  .brand-logo {

width: auto;

height: 64px;

max-width: 210px;

  }

}



@media (max-width: 680px) {

  .brand-logo {

width: auto;

height: 54px;

max-width: 180px;

  }

}



/* =========================================================

   GALERIE AVANT / APRÈS — Auto Brillance 80

   Version côte à côte : AVANT à gauche / APRÈS à droite.

   Les autres parties du site ne sont pas modifiées.

   ========================================================= */

.gallery-slider {

position: relative;

width: min(100%, 1240px);

min-height: 790px;

margin-top: 8px;

background: rgba(3, 8, 18, .58);

border: 1px solid rgba(56, 217, 255, .28);

box-shadow:

    0 28px 80px rgba(0, 0, 0, .38),

    inset 0 0 0 1px rgba(156, 85, 247, .05);

overflow: hidden;

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

}



.gallery-slider::before {

content: "";

position: absolute;

inset: 0;

z-index: 1;

pointer-events: none;

border: 1px solid transparent;

background: linear-gradient(

    135deg,

    rgba(56,217,255,.32),

    transparent 28%,

    transparent 72%,

    rgba(156,85,247,.30)

  ) border-box;

-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);

mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);

-webkit-mask-composite: xor;

mask-composite: exclude;

}



.gallery-slider .slides {

position: relative;

min-height: 790px;

}



.gallery-slider .slide {

position: absolute;

inset: 0;

padding: 18px 18px 58px;

opacity: 0;

transform: scale(1.012);

transition: opacity .5s ease, transform .75s ease;

pointer-events: none;

}



.gallery-slider .slide.is-active {

opacity: 1;

transform: scale(1);

pointer-events: auto;

}



.gallery-slider .slide::after {

display: none;

}



/* AVANT à gauche / APRÈS à droite */

.before-after-card {

position: relative;

display: grid;

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

grid-template-rows: 1fr;

column-gap: 18px;

height: 714px;

}



.before-after-card::after {

content: "";

position: absolute;

top: 38px;

bottom: 38px;

left: 50%;

width: 1px;

transform: translateX(-50%);

background: linear-gradient(

    180deg,

    transparent,

    rgba(56, 217, 255, .42) 25%,

    rgba(156, 85, 247, .42) 75%,

    transparent

  );

pointer-events: none;

}



.photo-panel {

position: relative;

overflow: hidden;

background: #030711;

border: 1px solid rgba(255,255,255,.07);

isolation: isolate;

}



.photo-panel::before {

content: "";

position: absolute;

inset: -22px;

z-index: -2;

background-image: var(--photo);

background-size: cover;

background-position: center;

filter: blur(22px) brightness(.34) saturate(.85);

transform: scale(1.08);

}



.photo-panel::after {

content: "";

position: absolute;

inset: 0;

z-index: -1;

background:

    linear-gradient(

      90deg,

      rgba(2,6,15,.48),

      rgba(2,6,15,.03) 28%,

      rgba(2,6,15,.03) 72%,

      rgba(2,6,15,.48)

    );

}



.before-after-card .photo-panel img {

position: relative;

z-index: 1;

width: 100%;

height: 100%;

min-height: 0 !important;

object-fit: contain;

object-position: center;

}



.photo-label {

position: absolute;

top: 16px;

left: 16px;

z-index: 4;

padding: 7px 11px 6px;

background: rgba(3,8,18,.76);

border: 1px solid rgba(56,217,255,.48);

color: #7bdfff;

font-size: 9px;

font-weight: 600;

letter-spacing: .22em;

text-transform: uppercase;

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

}



.photo-label-after {

border-color: rgba(156,85,247,.62);

color: #c9a8ff;

}



/* Séparateur vertical central */

.pair-divider {

position: absolute;

left: 50%;

bottom: -28px;

transform: translateX(-50%);

z-index: 5;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

width: max-content;

padding: 0 14px;

background: rgba(3, 8, 18, .90);

border: 0;

}



.pair-divider::before,

.pair-divider::after {

display: none;

}



.pair-divider::before {

background: linear-gradient(

    180deg,

    transparent,

    rgba(56,217,255,.48)

  );

}



.pair-divider::after {

background: linear-gradient(

    180deg,

    rgba(156,85,247,.48),

    transparent

  );

}



.pair-divider span {

color: #38d9ff;

font-size: 9px;

font-weight: 600;

letter-spacing: .16em;

}



.pair-divider p {

position: static;

margin: 0;

transform: none;

color: rgba(244, 246, 250, .72);

font-size: 9px;

line-height: 1.4;

letter-spacing: .14em;

text-transform: uppercase;

text-align: center;

writing-mode: horizontal-tb;

white-space: nowrap;

}



.gallery-slider .slider-btn {

top: 50%;

width: 42px;

height: 42px;

border-color: rgba(56,217,255,.32);

background: rgba(2,6,15,.86);

color: #fff;

box-shadow: 0 8px 24px rgba(0,0,0,.30);

}



.gallery-slider .slider-btn:hover {

border-color: rgba(156,85,247,.72);

background: rgba(14,20,38,.94);

}



.gallery-slider .slider-dots {

left: 50%;

right: auto;

bottom: 6px;

transform: translateX(-50%);

gap: 7px;

}



.gallery-slider .dot {

width: 24px;

height: 2px;

background: rgba(255,255,255,.24);

}



.gallery-slider .dot.is-active {

background: linear-gradient(90deg, #38d9ff, #9c55f7);

box-shadow: 0 0 8px rgba(56,217,255,.35);

}



/* Tablette : on garde côte à côte mais plus compact */

@media (max-width: 900px) {

  .gallery-slider,

  .gallery-slider .slides {

min-height: 650px !important;

  }



  .gallery-slider .slide {

padding: 12px 12px 52px;

  }



  .before-after-card {

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

height: 588px;

  }



  .pair-divider {

gap: 10px;

padding: 12px 6px;

  }



  .pair-divider p {

font-size: 8px;

letter-spacing: .08em;

  }



  .photo-label {

top: 10px;

left: 10px;

padding: 6px 9px 5px;

  }

}



/* Mobile : retour en pile verticale pour préserver la lisibilité */

@media (max-width: 620px) {

  .gallery-slider,

  .gallery-slider .slides {

min-height: 660px !important;

  }



  .before-after-card {

grid-template-columns: 1fr;

grid-template-rows: 275px 44px 275px;

column-gap: 0;

height: 594px;

  }



  .before-after-card::after {

display: none !important;

  }



  .pair-divider {

position: static;

transform: none;

width: auto;

flex-direction: row;

padding: 0 12px;

  }



  .pair-divider::before,

  .pair-divider::after {

background: linear-gradient(

      90deg,

      rgba(156,85,247,.48),

      transparent

    );

  }



  .pair-divider::before {

background: linear-gradient(

      90deg,

      transparent,

      rgba(56,217,255,.48)

    );

  }



  .pair-divider::after {

background: linear-gradient(

      90deg,

      rgba(156,85,247,.48),

      transparent

    );

  }



  .pair-divider p {

position: static;

writing-mode: horizontal-tb;

transform: none;

white-space: nowrap;

  }



  .gallery-slider .slider-btn {

width: 36px;

height: 36px;

top: 309px;

  }

}

@media (max-width: 680px) {



  .hero h1 {

width: 100%;

max-width: 100%;

font-size: clamp(34px, 10vw, 46px);

line-height: 1.02;

letter-spacing: -.035em;

  }



  .hero h1 span {

display: block;

white-space: normal;

  }



}

.phone-btn {

display: inline-flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 3px;

min-width: 210px;

padding: 14px 24px;

text-align: center;

}



.contact-actions .phone-btn {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 6px;

min-width: 220px;

padding: 13px 24px;

text-align: center;

}



.contact-actions .phone-btn .phone-number {

display: block;

width: 100%;

font-size: 19px;

font-weight: 700;

line-height: 1;

letter-spacing: .10em;

white-space: nowrap;

}



.contact-actions .phone-btn .phone-label {

display: block;

width: 100%;

font-size: 8px;

font-weight: 300;

line-height: 1;

letter-spacing: .28em;

opacity: .72;

white-space: nowrap;

}

#approche .approach-image {

max-width: 380px !important;

margin-top: 0 !important;

position: relative;

top: -100px;

transform: none;

}



@media (max-width: 900px) {

  #approche .approach-image {

margin-top: 0 !important;

transform: none;

  }

}

/* =========================================================

   AVIS GOOGLE — CARROUSEL

   ========================================================= */



.reviews-section {

padding: 110px 0;

}



.reviews-head {

margin-bottom: 44px;

}



.reviews-title-row {

display: flex;

align-items: flex-end;

justify-content: space-between;

gap: 50px;

}



.reviews-head h2 {

margin: 0 0 18px;

font-size: clamp(34px, 3.5vw, 56px);

line-height: .98;

letter-spacing: -.042em;

font-weight: 730;

}



.reviews-intro {

max-width: 650px;

margin: 0;

color: rgba(255,255,255,.68);

font-size: 13px;

line-height: 1.7;

}



.google-rating {

flex: 0 0 auto;

text-align: right;

padding-bottom: 4px;

}



.google-rating-score {

color: #fff;

font-size: 38px;

line-height: 1;

font-weight: 750;

}



.google-rating-score span {

margin-left: 4px;

color: rgba(255,255,255,.55);

font-size: 16px;

font-weight: 500;

}



.google-stars,

.review-stars {

color: #fbbc04;

letter-spacing: .08em;

}



.google-stars {

margin-top: 8px;

font-size: 17px;

}



.google-rating-count {

margin-top: 6px;

color: rgba(255,255,255,.56);

font-size: 10px;

letter-spacing: .12em;

text-transform: uppercase;

}





/* CARROUSEL */



.reviews-carousel {

position: relative;

max-width: 920px;

min-height: 300px;

padding: 0 72px 42px;

margin: 0 auto;

}



.reviews-track {

position: relative;

min-height: 250px;

}



.review-slide {

position: absolute;

inset: 0;

display: flex;

flex-direction: column;

min-height: 250px;

padding: 34px 38px;

background: rgba(4, 10, 20, .70);

border: 1px solid rgba(69, 215, 255, .18);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

opacity: 0;

visibility: hidden;

transform: translateX(18px);

transition:

    opacity .55s ease,

    transform .55s ease,

    visibility .55s ease;

}



.review-slide.is-active {

opacity: 1;

visibility: visible;

transform: translateX(0);

}



.review-stars {

margin-bottom: 20px;

font-size: 15px;

}



.review-slide p {

margin: 0;

color: rgba(255,255,255,.82);

font-size: 14px;

line-height: 1.8;

}



.review-author {

margin-top: auto;

padding-top: 24px;

display: flex;

flex-direction: column;

gap: 4px;

border-top: 1px solid rgba(255,255,255,.07);

}



.review-author strong {

color: #fff;

font-size: 13px;

}



.review-author span {

color: #45d7ff;

font-size: 9px;

letter-spacing: .13em;

text-transform: uppercase;

}





/* FLÈCHES */



.review-arrow {

position: absolute;

top: 50%;

z-index: 5;

width: 42px;

height: 42px;

border: 1px solid rgba(69, 215, 255, .28);

background: rgba(2,6,15,.88);

color: #fff;

font-size: 28px;

line-height: 1;

cursor: pointer;

transform: translateY(-50%);

transition:

    border-color .2s ease,

    background .2s ease,

    transform .2s ease;

}



.review-arrow:hover {

border-color: rgba(156,85,247,.72);

background: rgba(14,20,38,.96);

}



.review-prev {

left: 8px;

}



.review-next {

right: 8px;

}





/* POINTS */



.review-dots {

position: absolute;

left: 50%;

bottom: 8px;

display: flex;

gap: 8px;

transform: translateX(-50%);

}



.review-dot {

width: 24px;

height: 2px;

padding: 0;

border: 0;

background: rgba(255,255,255,.24);

cursor: pointer;

}



.review-dot.is-active {

background: linear-gradient(

    90deg,

    #38d9ff,

    #9c55f7

  );

box-shadow: 0 0 8px rgba(56,217,255,.35);

}





/* MOBILE */



@media (max-width: 760px) {



  .reviews-section {

padding: 90px 0;

  }



  .reviews-title-row {

flex-direction: column;

align-items: flex-start;

gap: 28px;

  }



  .google-rating {

text-align: left;

  }



  .reviews-carousel {

min-height: 350px;

padding: 0 0 46px;

  }



  .reviews-track {

min-height: 300px;

  }



  .review-slide {

min-height: 300px;

padding: 26px 24px;

  }



  .review-slide p {

font-size: 13px;

line-height: 1.72;

  }



  .review-arrow {

top: auto;

bottom: 0;

width: 36px;

height: 36px;

transform: none;

  }



  .review-prev {

left: 0;

  }



  .review-next {

right: 0;

  }



  .review-dots {

bottom: 17px;

  }



}

/* =========================================================

   SONDAGE OZONE

   ========================================================= */



.survey-section {

padding: 110px 0;

}



.survey-wrap {

display: grid;

grid-template-columns: minmax(0, 1.2fr) minmax(0, .72fr);

gap: 56px;

align-items: center;

}



.survey-copy h2 {

margin: 0 0 22px;

font-size: clamp(34px, 3.6vw, 58px);

line-height: .98;

letter-spacing: -.045em;

font-weight: 730;

}



.survey-intro {

max-width: 650px;

margin: 0;

color: rgba(255,255,255,.68);

font-size: 13px;

line-height: 1.75;

}



.survey-card {

position: relative;

padding: 22px 28px;

background: rgba(4, 10, 20, .72);

border: 1px solid rgba(69, 215, 255, .18);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

}



.survey-card::before {

content: "";

position: absolute;

inset: 0;

pointer-events: none;

border: 1px solid rgba(156, 85, 247, .10);

}



.survey-question {

margin: 0 0 18px;

color: #fff;

font-size: 15px;

line-height: 1.4;

font-weight: 650;

}



#ozone-survey {

display: flex;

flex-direction: column;

gap: 8px;

}



.survey-choice {

position: relative;

display: flex;

align-items: center;

gap: 12px;

min-height: 46px;

padding: 10px 14px;

border: 1px solid rgba(255,255,255,.10);

background: rgba(255,255,255,.025);

cursor: pointer;

transition:

    border-color .2s ease,

    background .2s ease,

    transform .2s ease;

}



.survey-choice:hover {

border-color: rgba(69, 215, 255, .34);

background: rgba(69, 215, 255, .045);

}



.survey-choice input {

width: 16px;

height: 16px;

margin: 0;

accent-color: #38d9ff;

cursor: pointer;

}



.survey-choice span {

color: rgba(255,255,255,.82);

font-size: 13px;

line-height: 1.45;

}



.survey-choice:has(input:checked) {

border-color: rgba(156, 85, 247, .56);

background:

    linear-gradient(

      90deg,

      rgba(56,217,255,.08),

      rgba(156,85,247,.08)

    );

}



.survey-choice:has(input:checked) span {

color: #fff;

}



.survey-submit {

width: 100%;

min-height: 44px;

margin-top: 6px;

border: 1px solid rgba(156, 85, 247, .60);

background:

    linear-gradient(

      90deg,

      rgba(56,217,255,.14),

      rgba(156,85,247,.28)

    );

color: #fff;

font-family: inherit;

font-size: 10px;

font-weight: 700;

letter-spacing: .14em;

text-transform: uppercase;

cursor: pointer;

transition:

    border-color .2s ease,

    background .2s ease,

    transform .2s ease;

}



.survey-submit:hover {

border-color: rgba(69, 215, 255, .72);

background:

    linear-gradient(

      90deg,

      rgba(56,217,255,.24),

      rgba(156,85,247,.36)

    );

transform: translateY(-1px);

}



.survey-success {

padding: 22px;

border: 1px solid rgba(69, 215, 255, .24);

background: rgba(69, 215, 255, .055);

}



.survey-success strong {

display: block;

margin-bottom: 6px;

color: #fff;

font-size: 14px;

}



.survey-success span {

color: rgba(255,255,255,.68);

font-size: 12px;

line-height: 1.6;

}



.survey-note {

margin: 10px 0 0;

color: rgba(255,255,255,.38);

font-size: 9px;

letter-spacing: .10em;

text-transform: uppercase;

}





/* MOBILE */



@media (max-width: 760px) {



  .survey-section {

padding: 90px 0;

  }



  .survey-wrap {

grid-template-columns: 1fr;

gap: 36px;

  }



  .survey-card {

padding: 26px 22px;

  }



  .survey-question {

font-size: 15px;

  }



  .survey-choice {

min-height: 40px;

padding: 8px 14px;

  }



  .survey-choice span {

font-size: 12.5px;

  }



}

/* Optimisation LCP mobile — animation immédiate du texte d'accueil */

@keyframes ab80-hero-entrance {

  from {

opacity: 0;

transform: translateY(24px);

  }

  to {

opacity: 1;

transform: translateY(0);

  }

}



@media (max-width: 900px) {

  .hero-inner.reveal {

opacity: 1;

transform: none;

transition: none;

animation: ab80-hero-entrance .72s ease both;

  }

}



@media (max-width: 900px) and (prefers-reduced-motion: reduce) {

  .hero-inner.reveal {

animation: none;

  }

}

/* =========================================================
   RÉSEAUX SOCIAUX — PIED DE PAGE (ajout ciblé)
   ========================================================= */
.site-footer {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
}

.footer-socials {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-socials-title {
  margin: 0;
  color: rgba(229, 241, 255, .76);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(69, 215, 255, .22);
  border-radius: 999px;
  background: rgba(8, 14, 24, .72);
  color: #f0f7ff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.footer-social-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: currentColor;
}

.footer-social-link:hover {
  transform: translateY(-2px);
  border-color: rgba(156, 85, 247, .75);
  box-shadow: 0 5px 20px rgba(69, 215, 255, .10);
}

.footer-social-link:focus-visible {
  outline: 2px solid #45d7ff;
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .site-footer { align-items: center; }
}

@media (max-width: 420px) {
  .footer-social-link {
    width: 44px;
    padding: 0;
  }
  .footer-social-link span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .footer-social-link { transition: none; }
  .footer-social-link:hover { transform: none; }
}