@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Montserrat:wght@500;600;700;800&display=swap');
:root{
 --black:#060606; --black2:#0c0c0c; --gold:#d8a13b; --gold2:#f0c269;
 --cream:#f6f1e8; --white:#fff; --ink:#171717; --muted:#777269;
 --line:#dfd5c5; --shadow:0 22px 60px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:var(--ink);background:var(--black)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 48px));margin:auto}
.topbar{background:#030303;color:#cfcfcf;border-bottom:1px solid #292113;font-size:12px}
.topbar .container{height:38px;display:flex;align-items:center;justify-content:space-between}
.topbar a{color:var(--gold2)}
.header{position:sticky;top:0;z-index:100;background:rgba(6,6,6,.96);backdrop-filter:blur(12px);border-bottom:1px solid #302511}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;width:245px;height:58px;overflow:hidden}
.brand img{width:245px;height:auto;max-height:58px;object-fit:contain;display:block}
.nav-links{display:flex;align-items:center;gap:24px;font-size:11px;font-weight:700;letter-spacing:.2px}
.nav-links a{color:#eee;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--gold2)}
.nav-cta{border:1px solid #9d711f;padding:13px 16px;color:var(--gold2)!important}
.nav-cta span{font-size:16px;margin-left:13px}
.menu{display:none;background:none;border:0;color:#fff;font-size:28px}
.hero{position:relative;overflow:hidden;background:#050505;color:#fff}
.hero:before{content:"";position:absolute;inset:0;background:
 radial-gradient(circle at 76% 42%,rgba(216,161,59,.20),transparent 27%),
 radial-gradient(circle at 58% 100%,rgba(216,161,59,.08),transparent 32%)}
.hero-grid{position:relative;display:grid;grid-template-columns:48% 52%;min-height:620px;align-items:center}
.hero-copy{padding:70px 0 78px}
.kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);font-weight:800}
.kicker:before{content:"";display:inline-block;width:32px;height:2px;background:var(--gold);vertical-align:middle;margin-right:12px}
.hero h1{font-family:Montserrat,Arial,sans-serif;font-size:56px;line-height:1.02;letter-spacing:-2.5px;margin:24px 0 20px}
.hero h1 strong{color:var(--gold2)}
.hero h1 em{color:var(--gold2);font-style:normal}
.gold-line{height:2px;width:45px;background:var(--gold);margin:24px 0}
.hero .lead{font-size:16px;line-height:1.7;color:#ddd;max-width:560px}
.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:15px 19px;font-size:10px;letter-spacing:.7px;font-weight:800;text-transform:uppercase;border:1px solid var(--gold);transition:.25s}
.btn.gold{background:linear-gradient(135deg,#edb34c,#bd7d16);color:#080808;border-color:transparent}
.btn.dark{color:var(--gold2);background:transparent}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.point{border-top:1px solid #43361e;padding-top:13px}
.point b{display:block;font-size:10px;letter-spacing:.6px;margin-bottom:5px;color:#fff}
.point span{font-size:9px;line-height:1.5;color:#999}
.hero-image{height:620px;position:relative;overflow:hidden;background:
 linear-gradient(90deg,rgba(6,6,6,.15),rgba(6,6,6,.02)),
 linear-gradient(135deg,#18130c,#080808 65%)}
.hero-image:before{content:"";position:absolute;inset:9% 8% 17% 8%;
 background:
 linear-gradient(90deg,transparent 0 45%,rgba(255,194,77,.08) 46%,transparent 47%),
 repeating-linear-gradient(90deg,#12100d 0 45px,#262016 46px 48px);
 box-shadow:inset 0 0 70px #000}
.hero-image:after{content:"";position:absolute;right:0;bottom:0;width:78%;height:34%;
 background:linear-gradient(165deg,#3a2d20,#0a0a0a);transform:skewX(-13deg);box-shadow:0 20px 50px #000}
.office-brand{position:absolute;z-index:2;right:13%;top:18%;width:310px;height:250px;display:grid;place-items:center}
.office-brand img{width:350px;height:350px;object-fit:contain;opacity:.9}
.hero-contact{position:absolute;z-index:4;bottom:20px;left:25px;right:25px;display:grid;grid-template-columns:1fr 1.4fr 1.25fr;background:rgba(3,3,3,.92);border:1px solid #77561c}
.hero-contact a{display:flex;gap:10px;align-items:center;padding:14px 16px;border-right:1px solid #513d1b;color:#eee;font-size:10px}
.hero-contact a:last-child{border:0}
.hero-contact i{font-style:normal;color:var(--gold2);font-size:17px}
.hero-contact small{display:block;color:#888;font-size:8px;margin-top:2px}
.section{padding:82px 0}
.cream{background:var(--cream)}
.section-head{text-align:center;margin-bottom:38px}
.section-head .kicker{color:#ad771b}
.section-head h2,.dark-head h2{font-family:Montserrat,Arial,sans-serif;font-size:36px;line-height:1.1;letter-spacing:-1.4px;margin:12px 0}
.section-head h2 em,.dark-head h2 em{font-style:normal;color:#b77b18}
.section-head p{max-width:680px;margin:12px auto 0;color:#6e695f;font-size:13px;line-height:1.7}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.product{background:#fff;border:1px solid var(--line);padding:26px;min-height:265px;position:relative;overflow:hidden;transition:.25s}
.product:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.product:after{content:"";position:absolute;right:-30px;bottom:-35px;width:130px;height:130px;border:1px solid #e3c17f;transform:rotate(30deg)}
.icon{width:58px;height:54px;display:grid;place-items:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:#080808;color:var(--gold2);font-size:23px;margin-bottom:19px}
.product h3{font-family:Montserrat,Arial,sans-serif;font-size:14px;margin:0 0 9px}
.product p{font-size:11px;line-height:1.65;color:#777269;max-width:270px}
.product a{position:absolute;bottom:22px;left:26px;color:#a66e10;font-size:9px;font-weight:800;letter-spacing:.4px}
.band{background:#070707;color:#fff;padding:35px 0;border-top:1px solid #211a0f;border-bottom:1px solid #211a0f}
.stats{display:grid;grid-template-columns:repeat(5,1fr)}
.stat{text-align:center;border-right:1px solid #3b301c;padding:4px 12px}
.stat:last-child{border:0}
.stat b{display:block;color:var(--gold2);font-family:Montserrat;font-size:23px}
.stat span{display:block;color:#aaa;font-size:9px;margin-top:5px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{text-align:center;position:relative}
.step .num{color:var(--gold);font-family:Montserrat;font-weight:800;font-size:11px}
.step .circle{width:80px;height:80px;border:1px solid #d6c8b4;border-radius:50%;display:grid;place-items:center;margin:12px auto;color:#b97c17;font-size:26px;background:#fff}
.step h3{font-size:11px;margin:7px 0}
.step p{font-size:10px;line-height:1.6;color:#777269;max-width:210px;margin:auto}
.dark{background:#070707;color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}
.dark .lead-text{color:#aaa;font-size:13px;line-height:1.8}
.pro-list{border:1px solid #302719}
.pro-list div{padding:20px 22px;border-bottom:1px solid #2b2418}
.pro-list div:last-child{border:0}
.pro-list b{display:block;color:var(--gold2);font-size:10px;letter-spacing:.5px}
.pro-list span{display:block;color:#969696;font-size:10px;margin-top:6px}
.risk{background:var(--cream)}
.risk-box{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.risk-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.risk-card{background:#fff;border:1px solid var(--line);padding:18px}
.risk-card b{font-size:10px}
.risk-card span{display:block;font-size:9px;color:#777;margin-top:6px;line-height:1.5}
.about{background:#0a0a0a;color:#fff}
.about-grid{display:grid;grid-template-columns:320px 1fr;gap:85px;align-items:center}
.monogram{height:300px;border:1px solid #60491f;display:grid;place-items:center;background:radial-gradient(circle,rgba(216,161,59,.15),transparent 65%);font-family:Montserrat;font-weight:800;font-size:86px;color:var(--gold2)}
.about p{font-size:13px;color:#aaa;line-height:1.85;max-width:650px}
.quote{background:linear-gradient(110deg,#0b0b0b,#16120b);color:#fff;padding:52px 0;border-top:1px solid #302512;border-bottom:1px solid #302512}
.quote-grid{display:flex;align-items:center;justify-content:space-between;gap:35px}
.quote h2{font-family:Montserrat;font-size:31px;line-height:1.1;margin:9px 0}
.contact{background:var(--cream);padding:82px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact h2{font-family:Montserrat;font-size:38px;line-height:1.08;margin:12px 0}
.contact-intro{color:#6f6a62;font-size:13px;line-height:1.7;max-width:510px}
.contact-info{display:grid;gap:12px;margin-top:30px}
.contact-info a,.contact-info div{border-left:2px solid #b67a17;padding:10px 14px}
.contact-info small{display:block;color:#888;font-size:8px;font-weight:700}
.contact-info b{display:block;font-size:11px;margin-top:4px}
.form{background:#080808;color:#fff;padding:30px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:block;font-size:8px;font-weight:800;letter-spacing:.7px;margin-bottom:13px}
.form input,.form select,.form textarea{width:100%;margin-top:6px;border:1px solid #353535;background:#141414;color:#fff;padding:12px;font-family:inherit;font-size:10px;outline:none}
.form input:focus,.form select:focus,.form textarea:focus{border-color:#b98425}
.form .btn{width:100%;cursor:pointer}
footer{background:#050505;color:#fff;padding-top:48px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:55px;padding-bottom:42px}
.footer-logo{color:var(--gold2);font-family:Montserrat;font-size:20px;font-weight:800;letter-spacing:1px}
.footer-grid p,.footer-grid a,.footer-grid span{display:block;font-size:10px;color:#999;line-height:1.7;margin:7px 0}
.footer-grid small{font-size:8px;letter-spacing:1.2px;color:var(--gold2);font-weight:800}
.copyright{border-top:1px solid #222;text-align:center;color:#555;font-size:8px;padding:16px}
.cookie{position:fixed;left:18px;right:18px;bottom:18px;z-index:200;background:#111;color:#ddd;border:1px solid #3e321e;box-shadow:0 15px 40px rgba(0,0,0,.45);padding:14px 17px;display:flex;gap:18px;align-items:center;justify-content:space-between;font-size:9px}
.cookie button{border:1px solid #a8751d;background:transparent;color:var(--gold2);padding:9px 13px;font-size:9px;font-weight:800;cursor:pointer}
.reveal{opacity:0;transform:translateY(18px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){
 .nav-links{gap:13px;font-size:9px}.hero-grid{grid-template-columns:1fr}.hero-copy{padding:65px 0 45px}.hero-image{height:450px}.products{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(3,1fr);gap:18px}.stat{border:0}.split,.risk-box,.contact-grid{gap:45px}
}
@media(max-width:720px){
 .container{width:calc(100% - 30px)}.topbar{display:none}.nav{height:70px}.brand{width:175px;height:60px}.brand img{width:190px;height:190px}.menu{display:block}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:#050505;padding:20px 22px;flex-direction:column;align-items:flex-start;gap:18px;border-bottom:1px solid #3a2b11}.nav-links.open{display:flex}.nav-cta{width:100%}.hero h1{font-size:42px}.hero-points{grid-template-columns:1fr 1fr}.hero-image{height:350px}.office-brand{right:6%;top:14%;width:250px}.office-brand img{width:280px;height:280px}.hero-contact{left:12px;right:12px;grid-template-columns:1fr;height:auto}.hero-contact a{border-right:0;border-bottom:1px solid #4d3a1a}.hero-contact a:last-child{border-bottom:0}.section{padding:60px 0}.section-head h2,.contact h2{font-size:29px}.products{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.split,.risk-box,.contact-grid,.about-grid{grid-template-columns:1fr}.monogram{height:200px}.quote-grid{display:grid}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.cookie{flex-direction:column;align-items:flex-start}
}
@media(max-width:430px){
 .hero h1{font-size:35px}.hero-points{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.hero-actions .btn{width:100%}
}


/* VANNY ASSUR — clean logo integration */
.brand {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.brand img {
  width: 210px;
  height: auto;
  display: block;
  object-fit: contain;
  mix-blend-mode: screen;
}
@media (max-width: 700px) {
  .brand img { width: 165px; }
}

/* Automobile icon — clean vector, no emoji */
.product .icon img {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: contain;
}

/* VANNY ASSUR — homepage hero visual integration */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-generated-visual {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-vanny-assur.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}
.hero > *:not(.hero-generated-visual) {
  position: relative;
  z-index: 1;
}

/* FINAL HOMEPAGE HERO — one validated office visual */
.hero-single{
  position:relative;
  overflow:hidden;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1774 / 771;
  background:#050505;
}
.hero-single:before,.hero-single:after{display:none !important;}
.hero-single-visual{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
@media (max-width:900px){
  .hero-single{height:auto;min-height:0;aspect-ratio:1774/771;}
  .hero-single-visual{position:absolute;inset:0;object-fit:cover;object-position:center;}
}
@media (max-width:600px){
  .hero-single{aspect-ratio:auto;height:520px;min-height:520px;}
  .hero-single-visual{object-position:68% center;}
}

/* FINAL BRAND MARK — validated horizontal VANNY ASSUR logo */
.footer-logo img {
  width: 205px;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Correction demandée — logo VANNY ASSUR réel dans la section philosophie */
.philosophy-logo,
.about-logo,
.brand-mark {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.philosophy-logo img,
.about-logo img,
.brand-mark img {
  display: block;
  width: min(320px, 80%);
  height: auto;
  object-fit: contain;
}

/* VANNY ASSUR — philosophie section requested by client */
.philosophy-section{
  background:#090909;
  color:#f5f1e9;
  padding:82px 0 88px;
  position:relative;
  overflow:hidden;
}
.philosophy-inner{
  width:min(1110px, calc(100% - 64px));
  margin:0 auto;
  display:grid;
  grid-template-columns:360px 1fr;
  gap:84px;
  align-items:center;
}
.philosophy-brand-frame{
  height:300px;
  border:1px solid rgba(190,137,36,.58);
  background:radial-gradient(circle at 50% 50%, rgba(176,116,21,.13), rgba(0,0,0,0) 62%), #0b0b0b;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px;
}
.philosophy-brand-frame img{
  width:100%;
  max-width:285px;
  height:auto;
  display:block;
}
.philosophy-copy{max-width:720px}
.philosophy-kicker{
  color:#d79b2a;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.7px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:14px;
}
.philosophy-kicker span{
  display:inline-block;
  width:34px;
  height:2px;
  background:#d79b2a;
}
.philosophy-copy h2{
  margin:0 0 18px;
  font-size:36px;
  line-height:1.1;
  letter-spacing:-1.4px;
  font-weight:800;
}
.philosophy-copy h2 b{
  color:#d79b2a;
  font-weight:700;
}
.philosophy-copy h2 em{
  color:#b97918;
  font-style:normal;
}
.philosophy-copy p{
  color:#cfcac1;
  font-size:14px;
  line-height:1.8;
  margin:0 0 14px;
}
.philosophy-btn{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-width:208px;
  padding:16px 20px;
  background:#dfa52d;
  color:#080808;
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
  transition:transform .2s ease, background .2s ease;
}
.philosophy-btn span{font-size:18px}
.philosophy-btn:hover{
  transform:translateY(-2px);
  background:#efb83c;
}
@media (max-width:900px){
  .philosophy-inner{
    grid-template-columns:1fr;
    gap:42px;
  }
  .philosophy-brand-frame{
    max-width:420px;
    margin:auto;
  }
}
@media (max-width:600px){
  .philosophy-section{padding:58px 0}
  .philosophy-inner{width:min(100% - 36px, 520px)}
  .philosophy-brand-frame{height:230px;padding:28px}
  .philosophy-copy h2{font-size:28px}
}


/* HOMEPAGE FINAL — clean single hero + responsive image */
.hero-single {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1774 / 771;
  background: #050505;
  overflow: hidden;
}
.hero-single-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .hero-single { aspect-ratio: 1774 / 771; }
  .hero-single-visual { object-fit: cover; object-position: center; }
}
@media (max-width: 600px) {
  .hero-single { aspect-ratio: 1774 / 771; }
  .hero-single-visual { object-fit: contain; object-position: center top; background: #050505; }
}

/* ===== À PROPOS — modification demandée uniquement ===== */
.about-only-update{background:#030303!important;color:#fff!important;padding:88px 0!important}
.about-modern-grid{display:grid;grid-template-columns:minmax(360px,560px) minmax(0,1fr);gap:70px;align-items:center}
.about-modern-logo{display:flex;justify-content:center;align-items:center}
.about-modern-logo img{display:block;width:min(100%,560px);height:auto;object-fit:contain}
.about-modern-copy{max-width:1050px}
.about-modern-kicker{display:flex;align-items:center;gap:18px;color:#e7aa27;font-size:13px;letter-spacing:2.5px;font-weight:800;margin-bottom:24px}
.about-modern-kicker span{width:52px;height:2px;background:#e7aa27;display:inline-block}
.about-modern-copy h2{font-size:clamp(34px,3.35vw,60px);line-height:1.08;margin:0 0 30px;font-weight:900;letter-spacing:-1px}
.about-modern-copy h2 b{font-weight:900;color:#d9991c}
.about-modern-copy h2 em{font-style:normal;color:#d9991c}
.about-modern-copy p{font-size:17px;line-height:1.8;color:#e5e2dc;max-width:980px;margin:0 0 24px}
.about-modern-copy .btn{margin-top:10px}
@media(max-width:1050px){.about-modern-grid{grid-template-columns:1fr;gap:30px}.about-modern-logo img{max-width:520px}.about-modern-copy{max-width:900px;margin:auto}}
@media(max-width:760px){.about-only-update{padding:55px 0!important}.about-modern-grid{gap:28px}.about-modern-logo img{max-width:430px;width:100%}.about-modern-kicker{font-size:11px;gap:12px}.about-modern-kicker span{width:38px}.about-modern-copy h2{font-size:31px;letter-spacing:-.5px}.about-modern-copy p{font-size:15px;line-height:1.7}.about-modern-copy .btn{width:100%;max-width:320px}}

/* À PROPOS — modification uniquement de cette page */
.about-page-final{min-height:calc(100vh - 78px);background:#030303!important;color:#fff;padding:70px 0!important;display:flex;align-items:center}
.about-final-inner{width:min(1420px,calc(100% - 80px));margin:0 auto;display:grid;grid-template-columns:minmax(420px,600px) minmax(0,1fr);gap:70px;align-items:center}
.about-final-logo{display:flex;justify-content:center;align-items:center}
.about-final-logo img{display:block;width:min(100%,570px);height:auto}
.about-final-copy{max-width:1050px}
.about-final-copy h1{font-size:clamp(38px,3.25vw,62px);line-height:1.08;margin:0 0 28px;font-weight:900;letter-spacing:-1.2px}
.about-final-copy h1 b{font-weight:900;color:#d9991c}.about-final-copy h1 em{font-style:normal;color:#d9991c}
.about-final-copy p{font-size:18px;line-height:1.8;color:#e5e2dc;max-width:1000px;margin:0 0 25px}
@media(max-width:1050px){.about-final-inner{grid-template-columns:1fr;gap:35px}.about-final-logo img{max-width:520px}.about-final-copy{max-width:900px;margin:auto}}
@media(max-width:760px){.about-page-final{min-height:calc(100vh - 68px);padding:45px 0!important}.about-final-inner{width:min(100% - 36px,600px);gap:28px}.about-final-logo img{max-width:430px}.about-final-copy h1{font-size:31px;letter-spacing:-.5px}.about-final-copy p{font-size:15px;line-height:1.7}.about-final-copy .btn{width:100%;max-width:320px}}