﻿
*,*::before,*::after {
box-sizing:border-box;
margin:0;
padding:0}

:root {
--gold:#C9A84C;
--gold-l:#E8C97A;
--gold-d:rgba(201,168,76,.13);
--gold-b:rgba(201,168,76,.25);
--dk:#080808;
--dk2:#0F0F0F;
--dk3:#161616;
--dk4:#1E1E1E;
--tx:#E2E2E2;
--mu:#777;
--wh:#fff}

html {
scroll-behavior:smooth}

body {
font-family:'Outfit',sans-serif;
background:var(--dk);
color:var(--tx);
overflow-x:hidden}

nav {
position:fixed;
top:0;
width:100%;
z-index:200;
background:rgba(8,8,8,.96);
backdrop-filter:blur(16px);
border-bottom:1px solid var(--gold-b);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 5%;
height:68px}

.nav-logo img {
height:46px;
width:auto;
cursor:pointer}

.nav-links {
display:flex;
gap:1.8rem;
list-style:none;
align-items:center}

.nav-links a,.nav-links button {
color:var(--mu);
text-decoration:none;
font-size:.87rem;
font-weight:500;
background:none;
border:none;
cursor:pointer;
font-family:'Outfit',sans-serif;
padding:0;
transition:color .3s}

.nav-links a:hover,.nav-links button:hover {
color:var(--gold)}

.dropdown {
position:relative}

.dropdown-menu {
position:absolute;
top:100%;
left:0;
background:#111;
border:1px solid var(--gold-b);
border-radius:8px;
padding:.5rem 0;
min-width:210px;
visibility:hidden;
opacity:0;
pointer-events:none;
z-index:300;
margin-top:0;
padding-top:8px;
transition:opacity .2s ease, visibility 0s linear .8s}

.dropdown:hover .dropdown-menu {
visibility:visible;
opacity:1;
pointer-events:auto;
transition:opacity .2s ease, visibility 0s linear 0s}

.dropdown-menu a {
display:block;
padding:.65rem 1.2rem;
color:var(--mu);
text-decoration:none;
font-size:.85rem;
transition:all .2s;
cursor:pointer}

.dropdown-menu a:hover {
color:var(--gold);
background:var(--gold-d);
padding-left:1.5rem}

.nav-cta {
background:var(--gold);
color:var(--dk);
padding:.5rem 1.4rem;
border-radius:4px;
font-weight:700;
font-size:.84rem;
text-decoration:none;
transition:all .3s}

.nav-cta:hover {
background:var(--gold-l);
transform:translateY(-1px)}

.hamburger {
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
background:none;
border:none;
padding:4px}

.hamburger span {
display:block;
width:24px;
height:2px;
background:var(--tx)}

.mobile-menu {
display:none;
position:fixed;
top:68px;
left:0;
right:0;
background:#0D0D0D;
border-bottom:1px solid var(--gold-b);
padding:1.5rem 5%;
z-index:190;
flex-direction:column;
gap:.8rem}

.mobile-menu a,.mobile-menu button {
color:var(--tx);
text-decoration:none;
font-size:.95rem;
font-weight:500;
background:none;
border:none;
cursor:pointer;
font-family:'Outfit',sans-serif;
text-align:left;
padding:.3rem 0;
border-bottom:1px solid rgba(255,255,255,.04)}

.mobile-menu.open {
display:flex}

.page {
display:none}
.page.active {
display:block}

.hero {
min-height:100vh;
display:flex;
align-items:center;
padding:100px 5% 60px;
position:relative;
overflow:hidden}

.hero-bg {
position:absolute;
inset:0;
background:radial-gradient(ellipse 55% 60% at 72% 50%,rgba(201,168,76,.07) 0%,transparent 65%),linear-gradient(160deg,#090909,#080808)}

.hero-grid {
position:absolute;
inset:0;
opacity:.025;
background-image:linear-gradient(var(--gold) 1px,transparent 1px),linear-gradient(90deg,var(--gold) 1px,transparent 1px);
background-size:80px 80px}

.hero-glow {
position:absolute;
right:-5%;
top:15%;
width:500px;
height:500px;
background:radial-gradient(circle,rgba(201,168,76,.06) 0%,transparent 70%);
pointer-events:none}

.hero-content {
position:relative;
max-width:660px}

.hero-logo {
margin-bottom:2rem}
.hero-logo img {
height:110px;
width:auto;
filter:drop-shadow(0 4px 24px rgba(201,168,76,.3))}

.hero-tag {
display:inline-flex;
align-items:center;
gap:8px;
background:var(--gold-d);
border:1px solid var(--gold-b);
padding:5px 16px;
border-radius:100px;
font-size:.73rem;
font-weight:600;
color:var(--gold);
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:1.6rem}

.dot {
width:6px;
height:6px;
background:var(--gold);
border-radius:50%;
animation:blink 2s infinite}

h1 {
font-family:'Cormorant Garamond',serif;
font-size:clamp(2.8rem,6vw,4.6rem);
font-weight:800;
line-height:1.08;
margin-bottom:1.2rem}

h1 em {
color:var(--gold);
font-style:normal}

.hero-sub {
font-size:1rem;
color:var(--mu);
line-height:1.75;
max-width:490px;
margin-bottom:2.5rem;
font-weight:300}

.hero-btns {
display:flex;
gap:1rem;
flex-wrap:wrap}

.btn-gold {
background:var(--gold);
color:var(--dk);
padding:.9rem 2.2rem;
border-radius:5px;
font-weight:700;
font-size:.93rem;
text-decoration:none;
letter-spacing:.5px;
transition:all .3s;
display:inline-block;
border:none;
cursor:pointer;
font-family:'Outfit',sans-serif}

.btn-gold:hover {
background:var(--gold-l);
transform:translateY(-2px);
box-shadow:0 10px 30px rgba(201,168,76,.3)}

.btn-ghost {
border:1px solid var(--gold-b);
color:var(--gold);
padding:.9rem 2.2rem;
border-radius:5px;
font-weight:500;
font-size:.93rem;
text-decoration:none;
transition:all .3s;
display:inline-block;
cursor:pointer;
background:none;
font-family:'Outfit',sans-serif}

.btn-ghost:hover {
background:var(--gold-d)}

.hero-trust {
display:flex;
gap:2rem;
margin-top:3.5rem;
padding-top:2rem;
border-top:1px solid rgba(255,255,255,.05);
flex-wrap:wrap}

.ti {
display:flex;
align-items:center;
gap:9px}
.ti-icon {
font-size:1.2rem}

.ti-text {
font-size:.8rem;
color:var(--mu);
line-height:1.3}
.ti-text strong {
color:var(--tx);
display:block;
font-weight:600}

.strip {
background:var(--gold);
padding:.9rem 5%;
display:flex;
align-items:center;
justify-content:center;
gap:2.5rem;
flex-wrap:wrap}

.strip-i {
display:flex;
align-items:center;
gap:7px;
color:var(--dk);
font-weight:600;
font-size:.82rem}

section {
padding:80px 5%}

.s-label {
font-size:.7rem;
letter-spacing:3px;
text-transform:uppercase;
color:var(--gold);
font-weight:600;
margin-bottom:.6rem}

.s-title {
font-family:'Cormorant Garamond',serif;
font-size:clamp(2rem,4vw,3rem);
font-weight:800;
line-height:1.15;
margin-bottom:.9rem}

.s-sub {
color:var(--mu);
font-size:.93rem;
font-weight:300;
line-height:1.75;
max-width:520px;
margin-bottom:3rem}

.s-center {
text-align:center}
.s-center .s-sub {
margin-left:auto;
margin-right:auto}

.ba-section {
background:var(--dk2)}

.ba-tabs {
display:flex;
gap:.5rem;
margin-bottom:2rem;
flex-wrap:wrap}

.ba-tab {
padding:.5rem 1.2rem;
border-radius:100px;
border:1px solid var(--gold-b);
color:var(--mu);
font-size:.82rem;
font-weight:500;
cursor:pointer;
transition:all .3s;
background:none;
font-family:'Outfit',sans-serif}

.ba-tab.active {
background:var(--gold);
color:var(--dk);
border-color:var(--gold);
font-weight:700}

.ba-grid {
display:none;
grid-template-columns:1fr 1fr;
gap:3px;
border-radius:12px;
overflow:hidden}

.ba-grid.active {
display:grid}

.ba-col {
position:relative}
.ba-col img {
width:100%;
height:400px;
object-fit:cover;
display:block}

.ba-label {
position:absolute;
bottom:1rem;
left:1rem;
background:rgba(0,0,0,.75);
color:var(--wh);
font-size:.72rem;
font-weight:700;
letter-spacing:1.5px;
text-transform:uppercase;
padding:.3rem .9rem;
border-radius:100px}

.ba-label.after {
background:var(--gold);
color:var(--dk)}

.svc-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2px;
background:rgba(201,168,76,.08);
border-radius:14px;
overflow:hidden;
border:1px solid var(--gold-b)}

.svc-card {
background:var(--dk3);
padding:2.5rem;
position:relative;
overflow:hidden;
transition:background .3s;
cursor:pointer}

.svc-card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:2px;
background:linear-gradient(90deg,transparent,var(--gold),transparent);
opacity:0;
transition:opacity .4s}

.svc-card:hover {
background:#1A1A1A}
.svc-card:hover::before {
opacity:1}

.svc-num {
font-family:'Cormorant Garamond',serif;
font-size:4rem;
font-weight:800;
color:rgba(201,168,76,.07);
position:absolute;
top:.8rem;
right:1.2rem;
line-height:1}

.svc-icon {
font-size:2.2rem;
margin-bottom:1rem;
display:block}

.svc-card h3 {
font-family:'Cormorant Garamond',serif;
font-size:1.5rem;
font-weight:700;
margin-bottom:.7rem;
color:var(--wh)}

.svc-card p {
color:var(--mu);
font-size:.87rem;
line-height:1.7;
margin-bottom:1.2rem;
font-weight:300}

.svc-link {
color:var(--gold);
font-size:.82rem;
font-weight:600;
letter-spacing:.5px;
display:inline-flex;
align-items:center;
gap:6px}

.avis-section {
background:var(--dk)}

.avis-header {
display:flex;
align-items:center;
gap:1.5rem;
margin-bottom:2.5rem;
flex-wrap:wrap}

.google-badge {
display:flex;
align-items:center;
gap:10px;
background:var(--dk3);
border:1px solid var(--gold-b);
border-radius:10px;
padding:1rem 1.5rem}

.g-stars {
color:#F9C74F;
font-size:1.2rem;
letter-spacing:2px}

.g-score {
font-family:'Cormorant Garamond',serif;
font-size:2.2rem;
font-weight:800;
color:var(--gold);
line-height:1}

.g-label {
font-size:.75rem;
color:var(--mu)}

.g-link {
display:inline-flex;
align-items:center;
gap:6px;
background:var(--dk4);
border:1px solid rgba(255,255,255,.06);
padding:.6rem 1.2rem;
border-radius:6px;
color:var(--tx);
text-decoration:none;
font-size:.82rem;
transition:all .3s}

.g-link:hover {
border-color:var(--gold);
color:var(--gold)}

.avis-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:1.2rem}

.avis-card {
background:var(--dk3);
border:1px solid rgba(255,255,255,.05);
border-radius:12px;
padding:1.8rem;
transition:transform .3s,border-color .3s}

.avis-card:hover {
transform:translateY(-3px);
border-color:var(--gold-b)}

.avis-top {
display:flex;
align-items:center;
gap:12px;
margin-bottom:1rem}

.avis-avatar {
width:42px;
height:42px;
border-radius:50%;
background:linear-gradient(135deg,var(--gold),#a07830);
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:1rem;
color:var(--dk);
flex-shrink:0}

.avis-name {
font-weight:600;
font-size:.92rem;
color:var(--wh)}

.avis-date {
font-size:.75rem;
color:var(--mu);
margin-top:2px}

.avis-stars {
color:#F9C74F;
font-size:.9rem;
margin-bottom:.8rem}

.avis-text {
color:var(--mu);
font-size:.87rem;
line-height:1.7;
font-weight:300;
font-style:italic}

.avis-placeholder {
background:var(--dk3);
border:2px dashed var(--gold-b);
border-radius:12px;
padding:2rem;
text-align:center;
color:var(--mu);
font-size:.88rem}

.faq-list {
max-width:760px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:.8rem}

.faq-item {
background:var(--dk3);
border:1px solid rgba(255,255,255,.05);
border-radius:10px;
overflow:hidden;
transition:border-color .3s}

.faq-item.open {
border-color:var(--gold-b)}

.faq-q {
width:100%;
text-align:left;
padding:1.3rem 1.5rem;
background:none;
border:none;
color:var(--tx);
font-size:.93rem;
font-weight:500;
font-family:'Outfit',sans-serif;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
transition:color .3s}

.faq-q:hover,.faq-item.open .faq-q {
color:var(--gold)}

.faq-icon {
flex-shrink:0;
font-size:1.2rem;
transition:transform .3s;
color:var(--gold)}

.faq-item.open .faq-icon {
transform:rotate(45deg)}

.faq-a {
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
padding:0 1.5rem}

.faq-item.open .faq-a {
max-height:200px;
padding-bottom:1.3rem}

.faq-a p {
color:var(--mu);
font-size:.88rem;
line-height:1.75;
font-weight:300}

.gal-filter {
display:flex;
gap:.5rem;
margin-bottom:2rem;
flex-wrap:wrap}

.gal-btn {
padding:.45rem 1.1rem;
border-radius:100px;
border:1px solid var(--gold-b);
color:var(--mu);
font-size:.8rem;
font-weight:500;
cursor:pointer;
transition:all .3s;
background:none;
font-family:'Outfit',sans-serif}

.gal-btn.active {
background:var(--gold);
color:var(--dk);
border-color:var(--gold);
font-weight:700}

.gal-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:1rem}

.gal-item {
border-radius:10px;
overflow:hidden;
position:relative;
cursor:pointer;
aspect-ratio:4/3}

.gal-item img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .4s}

.gal-item:hover img {
transform:scale(1.06)}

.gal-overlay {
position:absolute;
inset:0;
background:rgba(0,0,0,0);
transition:background .3s;
display:flex;
align-items:flex-end;
padding:1rem}

.gal-item:hover .gal-overlay {
background:rgba(0,0,0,.4)}

.gal-tag {
background:var(--gold);
color:var(--dk);
font-size:.68rem;
font-weight:700;
letter-spacing:1px;
padding:.25rem .7rem;
border-radius:100px;
text-transform:uppercase;
opacity:0;
transform:translateY(4px);
transition:all .3s}

.gal-item:hover .gal-tag {
opacity:1;
transform:translateY(0)}

.lightbox {
position:fixed;
inset:0;
background:rgba(0,0,0,.93);
z-index:500;
display:none;
align-items:center;
justify-content:center;
padding:2rem}

.lightbox.open {
display:flex}

.lb-img {
max-width:90vw;
max-height:85vh;
border-radius:8px;
object-fit:contain}

.lb-close {
position:absolute;
top:1.5rem;
right:1.5rem;
background:rgba(255,255,255,.1);
border:none;
color:var(--wh);
font-size:1.5rem;
width:44px;
height:44px;
border-radius:50%;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center}

.lb-close:hover {
background:rgba(255,255,255,.25)}

.svc-page-hero {
background:var(--dk2);
padding:120px 5% 60px;
border-bottom:1px solid var(--gold-b)}

.svc-page-hero h1 {
font-family:'Cormorant Garamond',serif;
font-size:clamp(2.5rem,5vw,4rem);
font-weight:800;
line-height:1.1;
margin-bottom:1rem}

.svc-page-hero p {
color:var(--mu);
font-size:1rem;
font-weight:300;
line-height:1.75;
max-width:560px;
margin-bottom:2rem}

.process-steps {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:1.5rem;
margin-top:1rem}

.step {
background:var(--dk3);
border:1px solid rgba(255,255,255,.05);
border-radius:10px;
padding:1.8rem;
text-align:center;
transition:border-color .3s}

.step:hover {
border-color:var(--gold-b)}

.step-num {
font-family:'Cormorant Garamond',serif;
font-size:2.5rem;
font-weight:800;
color:var(--gold);
line-height:1;
margin-bottom:.5rem}

.step h4 {
font-weight:600;
font-size:.95rem;
margin-bottom:.4rem;
color:var(--wh)}

.step p {
color:var(--mu);
font-size:.82rem;
line-height:1.6;
font-weight:300}

.price-box {
background:linear-gradient(135deg,var(--dk3),#1A1A0A);
border:1px solid var(--gold);
border-radius:14px;
padding:2.5rem;
text-align:center;
max-width:360px;
margin:2.5rem auto 0}

.price-box .price {
font-family:'Cormorant Garamond',serif;
font-size:3.2rem;
font-weight:800;
color:var(--gold);
line-height:1}

.price-box .from {
font-size:.8rem;
color:var(--mu);
margin-bottom:.3rem}

.price-box p {
color:var(--mu);
font-size:.83rem;
margin-top:.8rem;
line-height:1.6}

.contact-section {
background:var(--dk2);
text-align:center}

.contact-box {
max-width:560px;
margin:0 auto;
background:var(--dk3);
border:1px solid var(--gold-b);
border-radius:16px;
padding:3rem}

.contact-cards {
display:flex;
gap:.8rem;
justify-content:center;
flex-wrap:wrap;
margin:2rem 0}

.cc {
display:flex;
align-items:center;
gap:9px;
background:var(--dk4);
border:1px solid rgba(255,255,255,.06);
border-radius:9px;
padding:.85rem 1.4rem;
text-decoration:none;
color:var(--tx);
font-size:.88rem;
font-weight:500;
transition:all .3s}

.cc:hover {
border-color:var(--gold);
color:var(--gold);
transform:translateY(-2px)}

.contact-rdv {
display:inline-block;
background:var(--gold);
color:var(--dk);
padding:1rem 2.8rem;
border-radius:6px;
font-weight:800;
font-size:.95rem;
text-decoration:none;
letter-spacing:.5px;
transition:all .3s;
margin-bottom:1.2rem}

.contact-rdv:hover {
background:var(--gold-l);
box-shadow:0 10px 35px rgba(201,168,76,.3);
transform:translateY(-2px)}

footer {
background:var(--dk);
border-top:1px solid rgba(255,255,255,.04);
padding:2.2rem 5%}

.footer-top {
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:1rem;
margin-bottom:1.2rem}

footer img {
height:38px;
width:auto;
filter:brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(5deg) opacity(.65)}

.footer-nav {
display:flex;
gap:1.5rem;
flex-wrap:wrap}

.footer-nav a,.footer-nav button {
color:var(--mu);
text-decoration:none;
font-size:.8rem;
transition:color .3s;
background:none;
border:none;
cursor:pointer;
font-family:'Outfit',sans-serif}

.footer-nav a:hover,.footer-nav button:hover {
color:var(--gold)}

.footer-seo {
font-size:.72rem;
color:#2A2A2A;
line-height:1.7;
padding-top:1.2rem;
border-top:1px solid rgba(255,255,255,.03)}

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

.reveal.on {
opacity:1;
transform:translateY(0)}

@keyframes blink {
0%,100% {
opacity:1}
50% {
opacity:.2}
}

@media(max-width:768px) {

 .nav-links {
display:none}
.hamburger {
display:flex}

 .ba-col img {
height:220px}
.ba-grid {
grid-template-columns:1fr}

 .hero-trust {
gap:1rem}
.contact-box {
padding:2rem 1.2rem}

 .footer-top {
flex-direction:column;
text-align:center}

}

