:root {
  --or: #C58A3C;
  --or-clair: #E3B66E;
  --noir: #080808;
  --fond: #101010;
  --surface: #171717;
  --surface-2: #202020;
  --texte: #F5F1E8;
  --gris: #A6A198;
  --bordure: rgba(197,138,60,.25);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--noir);color:var(--texte);font-family:'DM Sans',sans-serif}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
::selection{background:var(--or);color:#000}

/* NAVIGATION */
.topbar{
  min-height:88px;padding:12px 6.5%;display:flex;align-items:center;
  justify-content:space-between;gap:22px;border-bottom:1px solid #29251f;
  background:rgba(8,8,8,.96);position:sticky;top:0;z-index:100;
  backdrop-filter:blur(16px)
}
.brand{display:flex;align-items:center;gap:12px;font-family:Manrope,sans-serif;
  font-size:15px;letter-spacing:1.6px;flex-shrink:0}
.brand-logo{display:block;width:58px;height:58px;object-fit:contain;border-radius:50%}
.brand b{color:var(--or)}
.brand small{display:block;font:9px 'DM Sans';letter-spacing:2px;color:#999;margin-top:5px}
nav{display:flex;gap:30px;color:#c7c1b5;font-size:12px}
nav a{transition:color .2s}
nav a:hover{color:var(--or-clair)}
.whatsapp-header,.nav-cta{display:inline-flex;align-items:center;justify-content:center;
  padding:13px 16px;font-size:11px;font-weight:700;white-space:nowrap}
.whatsapp-header{background:var(--or);color:#080808}
.nav-cta{border:1px solid var(--or);color:var(--or-clair)}
.menu{display:none;background:none;color:var(--or);border:0;font-size:25px}

/* BANNIÈRE PRINCIPALE */
.hero{
  min-height:650px;padding:90px 8% 85px;display:grid;
  grid-template-columns:1fr 1.08fr;gap:5%;align-items:center;
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 78% 48%,rgba(151,99,34,.22),transparent 43%),
    linear-gradient(110deg,#080808 0%,#11100e 55%,#17130e 100%)
}
.hero:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--or),transparent)}
.hero-copy{position:relative;z-index:2;max-width:590px}
.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--or-clair);font-weight:700}
.eyebrow i,.dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--or);margin-right:9px}
.hero h1,.section h2,.process h2,.closing h2{
  font:800 clamp(44px,5.4vw,76px)/1.04 Manrope,sans-serif;
  letter-spacing:-3px;margin:25px 0
}
.hero h1 em,.section h2 em,.process h2 em,.closing h2 em{
  color:var(--or-clair);font-style:normal
}
.hero-copy>p{max-width:500px;color:#b5b0a6;line-height:1.9;font-size:14px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:32px}
.gold-btn{display:inline-flex;align-items:center;justify-content:center;gap:25px;
  background:linear-gradient(110deg,#d5a354,#b87b2d);color:#100d08;
  padding:16px 22px;font-weight:800;font-size:12px;border:0;cursor:pointer;
  transition:transform .2s,filter .2s}
.gold-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.gold-btn span{font-size:18px}
.whatsapp-hero{color:var(--or-clair);font-size:12px;font-weight:700}
.text-link{font-size:11px;color:#c8c0b2}
.trust{display:flex;flex-wrap:wrap;gap:20px;margin-top:38px;color:#aaa49a;font-size:10px}
.trust span:first-letter{color:var(--or)}
.hero-art{position:relative;max-width:650px;justify-self:end;width:100%;min-height:390px;
  display:grid;place-items:center}
.hero-art img{width:78%;max-height:360px;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 20px 35px #000)}
.art-glow{position:absolute;inset:15%;border-radius:50%;
  background:radial-gradient(circle,rgba(197,138,60,.34),transparent 68%);filter:blur(28px)}
.floating-note{position:absolute;z-index:2;bottom:12px;left:0;background:#171717;
  border:1px solid var(--bordure);padding:16px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:0 15px 35px #0008}
.floating-note b,.floating-note small{display:block;font-size:11px}
.floating-note small{color:#aaa;margin-top:5px}
.vertical-label{position:absolute;right:0;top:20px;writing-mode:vertical-rl;
  color:#a88753;font-size:9px;letter-spacing:2px}

/* BANDEAU DES 3 ÉTAPES */
.strip{display:flex;justify-content:space-around;align-items:center;gap:25px;
  padding:27px 7%;background:linear-gradient(100deg,#b77b30,#d2a252,#bd873d);color:#100d08}
.strip div{display:flex;align-items:center;gap:15px;font-size:12px;font-weight:700}
.strip strong{font:800 25px Manrope;opacity:.58}

/* CATÉGORIES */
.section{padding:105px 8%}
.categories{background:#0b0b0b}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:45px}
.section h2,.process h2,.closing h2{font-size:clamp(36px,4vw,52px);letter-spacing:-2px;margin:15px 0 0}
.section-head>p{max-width:410px;color:var(--gris);font-size:12px;line-height:1.9;margin:0}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.category{background:linear-gradient(145deg,#1b1b1b,#111);border:1px solid #30291f;
  transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}
.category:hover{transform:translateY(-5px);border-color:var(--or);
  box-shadow:0 15px 35px #0007}
.category img{display:block;width:100%;aspect-ratio:1.65;object-fit:contain;
  padding:18px;background:radial-gradient(ellipse at center,#292116,#141414 72%);
  border-bottom:1px solid #30291f}
.category>div{padding:22px 22px 25px}
.category small{color:var(--or-clair);font-size:9px;letter-spacing:1.8px}
.category h3{font:700 18px Manrope;margin:11px 0}
.category p{color:#a7a197;font-size:11px;line-height:1.8;margin:0}

/* COMMENT ÇA MARCHE */
.process{padding:95px 11%;background:
  radial-gradient(ellipse at 15% 50%,rgba(197,138,60,.10),transparent 45%),#171613;
  display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.process-inner>p{color:#aaa49a;line-height:1.9;font-size:13px;max-width:430px;margin:25px 0}
.process-side{border-left:1px solid #6a502b;padding-left:40px}
.step{display:flex;gap:22px;padding:22px 0;border-bottom:1px solid #37332b}
.step:last-child{border:0}
.step>b{font:800 23px Manrope;color:var(--or)}
.step h3{font:700 15px Manrope;margin:0 0 8px}
.step p{margin:0;color:#aaa49a;font-size:11px;line-height:1.7}

/* FORMULAIRE */
.request{display:grid;grid-template-columns:.75fr 1.25fr;gap:8%;background:#0b0b0b}
.request-intro>p{color:#aaa49a;line-height:1.9;font-size:13px;max-width:340px}
.contact-card{margin-top:42px;border-left:2px solid var(--or);padding:8px 0 8px 18px}
.contact-card>*{display:block}
.contact-card small{font-size:9px;color:var(--or-clair);letter-spacing:1.6px;margin-bottom:12px}
.contact-card a{font:600 15px Manrope;margin:8px 0}
.contact-card span{color:#999;font-size:11px;margin-top:12px}
.request-form{background:linear-gradient(145deg,#1c1b19,#131313);
  border:1px solid #493923;padding:32px}
.form-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:25px;
  padding-bottom:18px;border-bottom:1px solid #38332a}
.form-title span{font:700 12px Manrope;letter-spacing:1px;color:var(--or-clair)}
.form-title small,.privacy{color:#999187;font-size:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid label{font-size:11px;color:#d0c9bc}
.form-grid input,.form-grid select,.form-grid textarea{
  display:block;width:100%;margin-top:9px;padding:14px;background:#0c0c0c;
  border:1px solid #403a30;color:#f4f0e8;font:12px 'DM Sans';outline:none;border-radius:2px
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  border-color:var(--or);box-shadow:0 0 0 2px #c58a3c20
}
.form-grid input[type=file]{font-size:10px;padding:11px}
.form-grid input[type=file]::file-selector-button{
  background:#30271b;color:#e4bb78;border:1px solid #6b502c;padding:8px 10px;
  margin-right:10px;cursor:pointer
}
.form-grid label small{display:block;margin-top:7px;color:#938c80;font-size:10px}
.form-grid .wide{grid-column:1/-1}
.form-grid textarea{resize:vertical;min-height:85px}
.consent{display:flex;gap:9px;align-items:flex-start;margin:22px 0;color:#aaa;
  font-size:10px;line-height:1.6}
.consent input{accent-color:var(--or)}
.submit{width:100%;justify-content:space-between}
.form-feedback{font-size:12px;line-height:1.5;color:var(--or-clair)}
.privacy{display:block;margin-top:12px;line-height:1.6}

/* FIN DE PAGE ET PIED DE PAGE */
.closing{text-align:center;padding:95px 20px;
  background:radial-gradient(ellipse at center,rgba(111,75,31,.34),transparent 62%),#15130f}
.closing h2{font-size:clamp(34px,4vw,48px);margin:20px 0 30px}
.closing .gold-btn{margin:auto}
footer{padding:50px 8% 28px;display:grid;grid-template-columns:1.2fr 1fr 1fr;
  gap:30px;background:#060606;border-top:1px solid #302719}
footer>div:not(.brand)>*{display:block;margin:9px 0;color:#aaa;font-size:11px;line-height:1.7}
footer>div:not(.brand)>b{color:var(--or-clair);margin-bottom:14px}
.copyright{grid-column:1/-1;border-top:1px solid #292929;padding-top:20px;
  color:#777;font-size:10px;margin-top:20px}
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:1000;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#C58A3C;color:#080808;border:1px solid #D5A354;padding:14px 19px;
  border-radius:30px;font-size:12px;font-weight:800;box-shadow:0 5px 25px #0009}

/* TABLETTES */
@media(max-width:1050px){
  .topbar{padding-left:4%;padding-right:4%}
  nav{gap:17px}
  .hero{padding-left:6%;padding-right:6%;gap:3%}
  .hero h1{font-size:clamp(42px,5.4vw,62px)}
  .section{padding-left:6%;padding-right:6%}
  .request{gap:5%}
}

/* MOBILES */
@media(max-width:850px){
  nav,.nav-cta{display:none}
  .menu{display:block}
  .topbar{min-height:72px}
  .brand-logo{width:48px;height:48px}
  .whatsapp-header{display:none}
  .hero{grid-template-columns:1fr;padding:65px 7% 55px;min-height:auto}
  .hero-art{justify-self:center;margin-top:35px;max-width:620px;min-height:300px}
  .hero-art img{max-height:300px}
  .floating-note{left:5px;bottom:0}
  .strip{gap:18px;flex-wrap:wrap;padding:23px 7%}
  .strip div{flex:1 1 220px}
  .section{padding:75px 7%}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .process{padding:70px 8%;gap:35px}
  .request{grid-template-columns:1fr;gap:35px}
  .contact-card{margin-top:25px}
}
@media(max-width:560px){
  .brand{font-size:12px;letter-spacing:1px}
  .brand small{font-size:8px}
  .hero{padding:52px 6% 45px}
  .hero h1{font-size:46px;letter-spacing:-2px}
  .hero-copy>p{font-size:13px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:17px}
  .trust{flex-direction:column;gap:10px}
  .hero-art{min-height:235px}
  .hero-art img{max-height:230px}
  .floating-note{padding:12px}
  .floating-note b,.floating-note small{font-size:9px}
  .vertical-label{right:-8px}
  .strip{justify-content:flex-start;padding:22px 7%;gap:14px}
  .strip div{width:100%;flex:auto;font-size:11px}
  .section-head{display:block}
  .section-head>p{margin-top:20px}
  .section h2,.process h2{font-size:37px}
  .category-grid{grid-template-columns:1fr}
  .category img{aspect-ratio:1.8}
  .process{grid-template-columns:1fr;padding:65px 7%}
  .process-side{padding-left:20px}
  .request-form{padding:20px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .wide{grid-column:auto}
  .form-title{display:block}
  .form-title small{display:block;margin-top:8px}
  .closing h2{font-size:34px}
  footer{grid-template-columns:1fr;gap:25px}
  .copyright{grid-column:auto}
  .whatsapp-float{right:13px;bottom:13px;padding:12px 15px}
}

/* ACCES DE RECHERCHE SUR LA BANNIERE */
.hero-shortcuts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:30px;
  max-width:720px;
}
.hero-shortcuts a{
  min-height:92px;
  padding:13px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:linear-gradient(145deg,#201b14,#111);
  border:1px solid rgba(197,138,60,.45);
  transition:.2s;
}
.hero-shortcuts a:hover{
  background:#2a2115;
  border-color:#e0b36d;
  transform:translateY(-3px);
}
.hero-shortcuts span{color:#d5a354;font:700 10px Manrope}
.hero-shortcuts b{font:700 11px Manrope;color:#f5e8d2}
.hero-shortcuts small{font-size:9px;color:#aaa197;line-height:1.4}
.hero-art img{width:100%;max-height:440px;object-fit:contain}
@media(max-width:850px){
  .hero-shortcuts{max-width:100%}
}
@media(max-width:560px){
  .hero-shortcuts{grid-template-columns:1fr;gap:8px;margin-top:25px}
  .hero-shortcuts a{min-height:68px;padding:12px 15px}
}

/* CORRECTION VISIBILITE DE LA BERLINE */
.hero-art{
  width:100%;
  min-height:450px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:visible;
}

.hero-art img{
  display:block;
  width:115%;
  max-width:none;
  max-height:none;
  height:auto;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:brightness(1.3) contrast(1.12)
         drop-shadow(0 18px 32px rgba(197,138,60,.42));
}

.hero-art .art-glow{
  inset:10%;
  background:radial-gradient(ellipse,rgba(197,138,60,.42),transparent 70%);
}

@media(max-width:850px){
  .hero-art{
    min-height:340px;
    width:100%;
  }
  .hero-art img{
    width:100%;
    max-width:650px;
  }
}

@media(max-width:560px){
  .hero-art{
    min-height:250px;
  }
  .hero-art img{
    width:110%;
  }
}


/* Bouton rouge : transmettre la demande enregistrée sur WhatsApp */
.whatsapp-confirmation-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 0 8px;
  padding: 12px 18px;
  border-radius: 8px;
  background: #c62828;
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #a91f1f;
}
.whatsapp-confirmation-link:hover {
  background: #a91f1f;
}
