:root{
  --primary: #0B3A56;    /* Bleu piscine profond */
  --accent: #06B6D4;     /* Turquoise eau cristalline */
  --ink: #111111;
  --text: #333333;
  --text-soft: #666666;
  --bg: #FFFFFF;
  --bg-tint: #F4F7F5;
  --border: #E0E0E0;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box; scroll-behavior: smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); line-height:1.6; -webkit-font-smoothing: antialiased;}

h1, h2, h3, h4 { color: var(--primary); font-weight: 800; margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.6rem; }

.wrap{max-width:1200px; margin:0 auto; padding:0 2rem;}
.prose-wrap{max-width:800px; margin:0 auto; padding:0 2rem;}
img,video{max-width:100%; height:auto; display:block;}
a{color:inherit;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto;} }

header.site{background:rgba(255,255,255,0.98); border-bottom: 1px solid var(--border); position: sticky; top:0; z-index: 100; padding: 0.6rem 0;}
.header-row{display:flex; align-items:center; justify-content:space-between; gap: 2rem;}
.logo{text-decoration:none; color: var(--primary); font-weight: 900; font-size: 1.4rem; letter-spacing: -1px; line-height: 1;}
.logo small{display:block; font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; font-weight:700;}

nav.primary{display:flex; gap: 1.8rem;}
nav.primary a{text-decoration:none; color: var(--text); font-weight: 600; font-size: 0.9rem;}
nav.primary a:hover{color:var(--accent);}

.nav-toggle{display:none;}
.nav-burger{display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; cursor:pointer;}
.nav-burger span{display:block; width:26px; height:3px; background:var(--primary); border-radius:2px; transition:.2s;}

@media (max-width:960px){
  .header-row{flex-wrap:wrap;}
  .logo{order:1;}
  .nav-burger{display:flex; order:2; margin-left:auto;}
  .header-row > .btn{display:none;}
  nav.primary{display:none; order:4; width:100%; flex-direction:column; gap:0; border-top:1px solid var(--border); margin-top:1rem; padding-top:.5rem;}
  nav.primary a{padding:.85rem 0; border-bottom:1px solid var(--border);}
  .nav-toggle:checked ~ nav.primary{display:flex;}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
}
@media (max-width:900px){ header.site{padding:0.4rem 0;} }

/* Trust badges strip */
.trust-strip{background:var(--bg); border-bottom:1px solid var(--border); padding:1rem 0;}
.trust-row{display:flex; justify-content:center; align-items:center; gap:.8rem; flex-wrap:wrap;}
.trust-badge{
  border:1px solid var(--border); border-radius:4px; padding:.55rem 1.1rem;
  font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--primary); white-space:nowrap; transition:.2s;
}
.trust-badge:hover{border-color:var(--accent); color:var(--accent);}
@media (max-width:600px){ .trust-row{gap:.6rem;} .trust-badge{padding:.5rem .9rem; font-size:.72rem;} }

/* Sticky mobile call button */
.sticky-call{display:none;}
@media (max-width:760px){
  body{padding-bottom:66px;}
  .sticky-call{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:var(--accent); color:#fff; text-decoration:none;
    align-items:center; justify-content:center; gap:.6rem;
    padding:1rem; font-weight:800; font-size:1rem;
    box-shadow:0 -4px 16px rgba(0,0,0,.18);
  }
  .sticky-call:hover{background:var(--accent);}
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; padding: 1rem 2.2rem;
  background: var(--primary); color:#fff; text-decoration:none; font-weight: 700;
  border-radius: 4px; transition: 0.2s; border: none; cursor:pointer; font-size: 0.95rem;
}
.btn-accent{background: var(--accent);}
.btn-outline{background:transparent; border:2px solid #fff; color:#fff;}
.btn-outline-alt{background:transparent; border:2px solid var(--primary); color:var(--primary);}
.btn:hover{filter: brightness(1.2); transform: translateY(-1px);}
.btn-outline-alt:hover{background: var(--primary); color:#fff;}

.breadcrumb{font-size:.82rem; font-weight:600; color:var(--text-soft); padding:1.2rem 0 0;}
.breadcrumb a{color:var(--text-soft); text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}

.hero{position:relative; padding: 40px 0; background: #000; color:#fff; display: block;}
.hero.hero-sm{padding:32px 0;}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity: 0.75;}
.hero-overlay{position:absolute; inset:0; background: linear-gradient(70deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);}
.hero-inner{position:relative; max-width:850px;}
.hero h1{color:#fff; margin-bottom: 1.5rem;}
.hero-lede{font-size: 1.25rem; font-weight: 500; margin-bottom: 2.5rem; color: rgba(255,255,255,0.9); max-width: 650px;}
.hero-rating{font-weight:800; color:var(--accent); margin-bottom:1rem;}
.hero-actions{display:flex; gap:1.5rem; flex-wrap:wrap;}
.hero-offer{margin-top:2rem; color:rgba(255,255,255,.75); font-size:.9rem; font-weight:600;}
.hero-offer b{color:#fff;}

.hero-grid{position:relative; display:grid; grid-template-columns: 1.15fr 0.9fr; gap:3rem; align-items:center; max-width:1200px;}
.hero-copy{min-width:0;}
.hero-grid h1{font-size:clamp(1.6rem, 3vw, 2.4rem); margin-bottom:.6rem;}
.hero-grid .hero-lede{font-size:1rem; margin-bottom:1.25rem;}
.hero-grid .hero-actions{margin-bottom:0;}
.hero-grid .form-card{padding:1.25rem; box-shadow:12px 12px 0 var(--primary);}
.hero-grid .form-card h2{font-size:1.2rem; margin-bottom:.2rem;}
.hero-grid .form-card .form-note{margin-bottom:1rem;}
.hero-grid .field{margin-bottom:.75rem;}
.hero-grid .field input, .hero-grid .field textarea{padding:.55rem;}
.hero-grid .field textarea{min-height:2.2rem;}
.hero-grid .form-card button[type="submit"]{padding:.7rem 2rem;}
@media (max-width:900px){
  header.site{padding:.25rem 0;}
  .logo{font-size:1.05rem;}
  .logo small{font-size:.56rem; margin-top:0;}
  .hero{padding:4px 0;}
  .hero.hero-sm{padding:3px 0;}
  .hero-grid{grid-template-columns:1fr; gap:.15rem;}
  .hero-grid h1{font-size:1.1rem; margin-bottom:.15rem; line-height:1.15;}
  .hero-grid .hero-lede{font-size:.7rem; margin-bottom:.15rem; line-height:1.2;}
  .hero-grid .hero-rating{display:none;}
  .hero-grid .hero-offer{display:none;}
  .hero-grid .hero-actions{display:none;}
  .hero-grid .form-card{padding:.35rem;}
  .hero-grid .form-card h2{font-size:.82rem; margin-bottom:.04rem;}
  .hero-grid .form-card .form-note{margin-bottom:.12rem; font-size:.66rem;}
  .hero-grid .field{margin-bottom:.14rem;}
  .hero-grid .field label{margin-bottom:.04rem; font-size:.62rem;}
  .hero-grid .field input, .hero-grid .field textarea{padding:.28rem; font-size:16px;}
  .hero-grid .field textarea{height:2.1rem; min-height:2.1rem;}
  .hero-grid .form-card button[type="submit"]{padding:.4rem 1.2rem;}
}
/* Above-the-fold safety margin: the fixed bottom call bar (66px) covers
   the bottom of the viewport on mobile, so the hero form must clear that
   zone too, not just the raw viewport height. */
@media (max-width:760px){
  .hero-grid .form-card{margin-bottom:0;}
}

.usp-bar{background: var(--bg-tint); padding: 1.5rem 0; border-bottom: 1px solid var(--border);}
.usp-row{display:grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; text-align: center;}
@media (max-width:900px){ .usp-row{grid-template-columns: 1fr 1fr;} }
@media (max-width:760px){ .usp-row{grid-template-columns: 1fr; gap: 1rem; text-align: center;} }

section{padding: 100px 0;}
section.section-sm{padding:70px 0;}
.section-alt{background: var(--bg-tint);}
.eyebrow{color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; margin-bottom: 1rem; display: block;}
.section-intro{margin-bottom:4rem;}
.section-intro.center{text-align:center; max-width:700px; margin-left:auto; margin-right:auto;}
.section-note{color:var(--text-soft); font-weight:600; margin-top:1rem;}

.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;}
@media (max-width:900px){ .grid-2{grid-template-columns: 1fr;} }

.form-card{background: #fff; padding: 3rem; border: 1px solid var(--border); box-shadow: 20px 20px 0px var(--primary); color: var(--text);}
.form-card h2{margin-bottom:.5rem; color: var(--primary);}
.form-card .form-note{margin-bottom: 2.5rem; color: var(--text-soft); font-weight: 600;}
.field{margin-bottom: 1.5rem;}
.field label{display:block; font-weight: 700; font-size: 0.85rem; margin-bottom: 0.5rem; text-transform: uppercase; color: var(--primary);}
.field input, .field textarea{width:100%; padding: 1rem; border: 2px solid var(--border); font-family: inherit; font-size: 1rem; color: var(--text); background: #fff;}
.field input:focus, .field textarea:focus{border-color: var(--accent); outline: none;}

.form-msg{margin-top:1rem; font-size:.88rem; font-weight:700; padding:.4rem 0;}
.form-msg:empty{display:none;}
.form-msg-ok{color:#1a7a3c;}
.form-msg-error{color:#B00020;}

.check-list{list-style: none; padding: 0; margin:0;}
.check-list li{margin-bottom: 1.2rem; padding-left: 2rem; position: relative; font-weight: 500;}
.check-list li::before{content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 900;}
.check-list.two-col{display:grid; grid-template-columns:1fr 1fr; gap:0 2rem;}
@media (max-width:640px){ .check-list.two-col{grid-template-columns:1fr;} }

.svc-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; margin-top: 2rem;}
.svc-grid--3{grid-template-columns: repeat(3, 1fr);}
.svc-item{padding: 3rem; background: #fff; border: 1px solid var(--border); transition: 0.3s;}
.svc-item:hover{border-color: var(--primary); box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.svc-link{display: inline-block; margin-top: 1.5rem; font-weight: 800; color: var(--primary); text-decoration: none; border-bottom: 2px solid var(--accent);}
@media (max-width:900px){ .svc-grid--3{grid-template-columns: 1fr 1fr;} }
@media (max-width:760px){ .svc-grid, .svc-grid--3{grid-template-columns: 1fr;} }

.testi-grid{display:grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin-top: 2rem;}
.testi-card{padding: 2rem 1.5rem; background: #fff; border: 1px solid var(--border); border-radius: 6px;}
.testi-stars{color: #f5a623; font-size: 1rem; letter-spacing: 2px; margin-bottom: .9rem;}
.testi-quote{font-size: .92rem; line-height: 1.55; color: var(--text-soft); margin: 0 0 1.25rem;}
.testi-author{font-weight: 800; font-size: .9rem;}
.testi-city{opacity:.6; font-size: .8rem; font-weight: 600;}
@media (max-width:1100px){ .testi-grid{grid-template-columns: repeat(3, 1fr);} }
@media (max-width:760px){ .testi-grid{grid-template-columns: 1fr;} }

.minor-grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem;}
@media (max-width:760px){ .minor-grid{grid-template-columns:1fr;} }
.minor-item{padding:2rem; border:1px solid var(--border);}
.minor-item h4{font-size:1.15rem; margin-bottom:.6rem;}
.minor-item p{margin:0 0 1rem; color:var(--text-soft); font-weight:500;}

.gal-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;}
.gal-grid img{aspect-ratio: 4/5; object-fit: cover; width: 100%;}
.gal-grid figcaption{font-size: 0.75rem; font-weight: 700; margin-top: 0.8rem; text-transform: uppercase; color: var(--text-soft);}
@media (max-width:760px){ .gal-grid{grid-template-columns: 1fr 1fr;} }
.gal-grid figure{margin:0;}

.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3rem;}
@media (max-width:760px){ .video-grid{grid-template-columns:1fr;} }
.video-grid video{width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--border);}

.testi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;}
@media (max-width:1000px){ .testi-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .testi-grid{grid-template-columns:1fr;} }
.testi-item{padding:2rem; background:#fff; border:1px solid var(--border);}
.testi-item .stars{color:var(--accent); font-weight:800; margin-bottom:.8rem;}
.testi-item h4{font-size:1.05rem; margin-bottom:.6rem;}
.testi-item p{margin:0 0 1rem; color:var(--text-soft); font-weight:500; font-size:.92rem;}
.testi-who{font-weight:700; font-size:.85rem;}

table{width: 100%; border-collapse: collapse; margin-top: 2rem;}
th{text-align: left; padding: 1rem; background: var(--primary); color:#fff; font-size: 0.8rem; text-transform: uppercase;}
td{padding: 1rem; border-bottom: 1px solid var(--border); font-weight: 500;}
td:last-child{text-align: right; font-weight: 800; color: var(--accent);}
.price-block{margin-top:4rem;}
.price-block:first-child{margin-top:0;}
.price-factors-wrap{margin-top:4rem;}

.price-simple{text-align:center; max-width:640px; margin:0 auto;}
.price-tag{font-size:3.2rem; font-weight:900; color:var(--primary); margin:1rem 0 .5rem; line-height:1;}
.price-tag small{font-size:1.15rem; font-weight:700; color:var(--text-soft);}
.price-cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-top:3rem;}
.price-card{padding:2.5rem 2rem; background:#fff; border:1px solid var(--border); text-align:center;}
.price-card:hover{border-color:var(--primary); box-shadow:0 10px 30px rgba(0,0,0,0.05);}
.price-card .price-tag{font-size:2.2rem; margin:.75rem 0 .5rem;}
@media (max-width:760px){ .price-cards{grid-template-columns:1fr;} }

.callout{background: var(--bg-tint); padding: 2rem; border-left: 5px solid var(--accent); margin: 2.5rem 0;}
.callout p{margin:0; font-weight:600;}

.why2-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; margin-top:3rem;}
@media (max-width:820px){ .why2-grid{grid-template-columns:1fr;} }
.why2-item h3{font-size:1.25rem; margin-bottom:1rem;}
.why2-item p{color:var(--text-soft); font-weight:500; margin:0 0 .8rem;}

.faq-wrap{max-width: 800px; margin: 0 auto;}
details{border-bottom: 1px solid var(--border); padding: 1.5rem 0;}
summary{cursor: pointer; font-weight: 800; font-size: 1.2rem; list-style: none; display: flex; justify-content: space-between; gap:1rem; color:var(--primary);}
summary::-webkit-details-marker{display:none;}
summary::after{content: "+"; color: var(--accent); flex:none;}
details[open] summary::after{content:"–";}
details p{margin:1rem 0 0; color:var(--text-soft); font-weight:500;}

.zone-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 2.5rem;}
.zone-grid a{color: var(--text); font-weight: 600; text-decoration: none; display:flex; justify-content:space-between;}
.zone-grid a:hover{color:var(--accent);}
.zone-grid .cp{color:var(--text-soft); font-weight:500;}

footer{background: var(--primary); color: #fff; padding: 80px 0 40px;}
.foot-grid{display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: 4rem;}
footer h5{color: var(--accent); text-transform: uppercase; font-size: 0.85rem; margin-bottom: 2rem; letter-spacing: 1px; font-weight:800;}
footer ul{list-style: none; padding: 0; margin:0;}
footer ul li{margin-bottom: 1rem;}
footer a{color: rgba(255,255,255,0.7); text-decoration: none;}
footer a:hover{color: #fff;}
.zone-links{font-size: 0.8rem; opacity: 0.7; line-height: 2;}
.zone-links a{color:rgba(255,255,255,.7);}
.zone-links a:hover{color:#fff;}
@media (max-width:900px){ .foot-grid{grid-template-columns: 1fr 1fr;} }
@media (max-width:600px){ .foot-grid{grid-template-columns: 1fr;} }

.annot{max-width:1200px; margin:1rem auto; padding:0 2rem;}
.annot .box{font-size:.85rem; color:var(--text-soft); background:var(--bg-tint); border:1px dashed var(--border); padding:1rem 1.5rem; font-weight:500;}
.annot .box.warn{border-color:var(--accent); background:#FFF4EC; color:#7A2E00;}
