:root{--navy:#073746;--teal:#0f8586;--green:#176a5b;--gold:#c89a35;--cream:#faf8f1;--muted:#536b72;--line:#dce6e3;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:var(--navy);background:#fff}a{text-decoration:none;color:inherit}.wrap{max-width:1400px;margin:auto;padding:0 38px}
.topline{height:42px;background:#faf9f5;font-size:11px;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;color:#52635d;font-weight:800}
header{background:#fff;border-bottom:1px solid #e5ebe8}.nav{height:96px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:15px;min-width:285px}.mark{width:58px;height:58px;position:relative;border:5px solid var(--green);border-radius:10px 10px 16px 16px;transform:rotate(0deg)}.mark:before{content:"";position:absolute;width:24px;height:34px;background:var(--green);border-radius:100% 0 100% 0;left:15px;top:11px;transform:rotate(-25deg)}.mark:after{content:"";position:absolute;width:30px;height:5px;background:var(--gold);right:-10px;top:5px;transform:rotate(45deg);border-radius:4px}.brandtxt b{display:block;font-size:22px;letter-spacing:.04em;line-height:1.08}.brandtxt small{display:block;font-size:10px;letter-spacing:.08em;margin-top:7px;color:#687a79;font-weight:800}.menu{display:flex;align-items:center;gap:29px;font-size:14px;font-weight:800}.goldbtn{display:inline-flex;align-items:center;gap:18px;background:linear-gradient(100deg,#c18e2c,#d4aa4c);color:#fff;padding:17px 25px;border-radius:28px;font-weight:900}
.hero{background:var(--cream);overflow:hidden}.hero-grid{min-height:610px;display:grid;grid-template-columns:.86fr 1.14fr;align-items:stretch}.copy{padding:72px 30px 58px 0;display:flex;flex-direction:column;justify-content:center}.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:900;color:#686850}.eyebrow:before{content:"";display:inline-block;width:32px;height:2px;background:var(--gold);vertical-align:middle;margin-right:15px}.copy h1{font-family:Georgia,serif;font-size:57px;line-height:1.04;letter-spacing:-1.2px;margin:23px 0 20px}.copy h1 span{color:var(--teal)}.lead{font-size:18px;line-height:1.5;color:#3e5962;max-width:590px}.hero-btn{align-self:flex-start;margin-top:21px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}.benefit{display:grid;grid-template-columns:36px 1fr;gap:10px}.ico{font-size:27px;color:var(--green)}.benefit b{font-size:13px}.benefit p{font-size:11px;line-height:1.45;color:#50666d;margin:5px 0 0}
.photo{position:relative;min-height:610px;background-image:linear-gradient(90deg,var(--cream) 0%,rgba(250,248,241,.15) 20%,rgba(250,248,241,0) 40%),url('hero-reference.png');background-size:cover;background-position:68% 48%}.quote{position:absolute;right:7%;top:23%;color:#fff;font-family:Georgia,serif;font-style:italic;font-size:22px;text-align:center;line-height:1.3;text-shadow:0 2px 10px #0005}.float{position:absolute;right:4%;bottom:7%;background:#fff;border-radius:14px;padding:19px 22px;width:265px;box-shadow:0 18px 45px #173c4240}.float div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #e4e8e5;font-size:12px;font-weight:800;line-height:1.35}.float div:last-child{border:0}.float i{font-style:normal;font-size:23px;color:var(--green)}
.band{background:#fff;border-bottom:1px solid var(--line)}.bandgrid{height:102px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center}.banditem{display:grid;grid-template-columns:48px 1fr;align-items:center;padding:0 28px;border-right:1px solid var(--line)}.banditem:last-child{border:0}.banditem i{font-style:normal;font-size:28px;color:var(--green)}.banditem b{font-size:17px}.banditem small{display:block;color:#667a80;margin-top:5px}
section{padding:72px 0}.title{text-align:center}.title h2{font-size:36px;margin:18px 0 10px}.title h2 span{color:var(--teal)}.title p{color:#687c81}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}.card{border:1px solid var(--line);border-radius:16px;padding:26px}.card h3{margin:10px 0}.card p{font-size:14px;line-height:1.55;color:#657a80}.compare{background:#073746}.compare .title h2,.compare .title p{color:#fff}.compare .eyebrow{color:#d4bd7b}.frame{height:800px;background:#fff;border-radius:18px;overflow:hidden;margin-top:34px}.frame iframe{width:100%;height:100%;border:0}.legalnote{text-align:center;color:#b9c8ca;font-size:11px;line-height:1.5;margin-top:15px}footer{background:#052a35;color:#c5d0d2;padding:42px 0}.foot{display:flex;justify-content:space-between;gap:30px;font-size:12px;line-height:1.7}.foot b{color:#fff}
@media(max-width:950px){.topline{display:none}.menu a:not(.goldbtn){display:none}.hero-grid{grid-template-columns:1fr}.copy{padding:50px 0}.copy h1{font-size:44px}.photo{min-height:480px}.benefits{grid-template-columns:1fr}.bandgrid{height:auto;grid-template-columns:1fr 1fr}.banditem{padding:22px}.cards{grid-template-columns:1fr}.frame{height:900px}.wrap{padding:0 22px}}

/* V3.3 HARD FIX — no screenshot or nested-site image in hero */
.photo{
  position:relative !important;
  min-height:610px !important;
  background-image:none !important;
  background:
    radial-gradient(circle at 70% 25%,rgba(255,255,255,.18),transparent 27%),
    linear-gradient(135deg,#0b5860 0%,#168985 58%,#55b9aa 100%) !important;
  overflow:hidden !important;
}
.photo::before{
  content:"";
  position:absolute;
  width:430px;height:430px;
  right:-100px;top:-100px;
  border:2px solid rgba(255,255,255,.14);
  border-radius:50%;
}
.photo::after{
  content:"⌂";
  position:absolute;
  right:15%;top:21%;
  font:220px/1 Arial,sans-serif;
  color:rgba(255,255,255,.12);
}
.quote{display:none !important}

/* V3.5 — reproduction fidèle de la maquette validée */
.topline{position:relative;height:42px}
.topline>span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.top-contact{position:absolute;right:max(38px,calc((100vw - 1400px)/2 + 38px));display:flex;gap:22px;align-items:center;letter-spacing:0;text-transform:none;font-size:12px;color:#173b45}
.top-contact a:last-child{font-weight:900;font-size:14px}
.nav{height:100px}
.brand{min-width:300px}
.mark{width:64px;height:64px}
.brandtxt b{font-size:24px}
.menu{gap:32px;font-size:14px}
.hero-grid{min-height:617px;grid-template-columns:588fr 948fr;padding-left:0;padding-right:0;max-width:1536px}
.copy{padding:46px 30px 32px 68px;background:linear-gradient(90deg,#faf8f1 0%,#faf8f1 88%,rgba(250,248,241,.96) 94%,rgba(250,248,241,.78) 100%);z-index:2}
.copy h1{font-size:55px;line-height:1.03;margin:22px 0 20px;letter-spacing:-1.3px}
.lead{font-size:18px;max-width:560px;margin:0}
.hero-btn{margin-top:24px;padding:18px 36px;border-radius:32px;font-size:17px}
.benefits{margin-top:38px;gap:18px}
.benefit{grid-template-columns:38px 1fr}
.benefit b{font-size:13px}.benefit p{font-size:11px}
.photo{min-height:617px!important;background:url('hero-maquette-exacte.png') center center/cover no-repeat!important;position:relative!important;overflow:hidden!important}
.photo::before,.photo::after{display:none!important}.quote,.float{display:none!important}
.bandgrid{height:102px}
section{padding:58px 0}.title h2{font-family:Georgia,serif;font-size:36px}
@media(max-width:950px){
 .top-contact{display:none}.hero-grid{display:block;min-height:0}.copy{padding:44px 22px 36px}.copy h1{font-size:43px}.photo{min-height:430px!important;background-position:center!important}.benefits{grid-template-columns:1fr}.brand{min-width:0}.mark{width:52px;height:52px}.brandtxt b{font-size:18px}
}
/* V3.6 — desktop viewport fit + exact right-side crop from validated mockup */
@media(min-width:951px){
  .wrap{max-width:1480px;padding-left:32px;padding-right:32px}
  .topline{height:34px;font-size:10px}
  .nav{height:82px;gap:18px}
  .brand{min-width:275px;gap:12px}
  .mark{width:52px;height:52px}
  .brandtxt b{font-size:20px}
  .brandtxt small{font-size:9px;margin-top:5px}
  .menu{gap:22px;font-size:13px;white-space:nowrap}
  .menu .goldbtn{padding:14px 22px}
  .hero-grid{min-height:550px;grid-template-columns:.82fr 1.18fr}
  .copy{padding:48px 28px 34px 0;justify-content:center}
  .copy h1{font-size:51px;line-height:1.02;margin:18px 0 16px}
  .lead{font-size:16px;line-height:1.42;max-width:560px;margin:0}
  .hero-btn{margin-top:18px;padding:15px 24px}
  .benefits{gap:18px;margin-top:27px}
  .benefit{grid-template-columns:30px 1fr;gap:8px}
  .ico{font-size:23px}
  .benefit b{font-size:12px}
  .benefit p{font-size:10px;margin-top:4px}
  .photo{min-height:550px!important;background-image:url('hero-right-exact.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important}
  .photo::before,.photo::after,.photo .quote,.photo .float{display:none!important}
  .bandgrid{height:86px}
  .banditem{padding:0 24px;grid-template-columns:42px 1fr}
  .banditem i{font-size:25px}
  .banditem b{font-size:15px}
  .banditem small{font-size:11px;margin-top:3px}
  section{padding:58px 0}
}

/* V3.7 — masque définitif des éléments de la maquette incrustés à gauche */
@media(min-width:951px){
  .photo{
    min-height:550px!important;
    background-image:url('hero-right-exact.png')!important;
    background-size:cover!important;
    background-position:center center!important;
    position:relative!important;
    overflow:hidden!important;
  }
  /* La source graphique contient quelques pixels/textes de la colonne gauche.
     On les masque par le même fondu crème que la jonction de la maquette. */
  .photo::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:3!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:105px!important;
    height:auto!important;
    border:0!important;
    border-radius:0!important;
    background:linear-gradient(90deg,#faf8f1 0%,rgba(250,248,241,.98) 35%,rgba(250,248,241,.78) 68%,rgba(250,248,241,0) 100%)!important;
    pointer-events:none!important;
  }
  .photo::after{display:none!important}
}