:root{
  --orange:#e65002;
  --orange-dark:#c14501;
  --orange-soft:#fdece1;
  --ink:#171412;
  --gray:#6b6660;
  --line:#e9e4dc;
  --paper:#ffffff;
  --cream:#fbf8f3;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
  line-height:0.98;
  color:var(--ink);
}
p{margin:0 0 14px;}
a{color:inherit;}
img{display:block; max-width:100%;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}

/* ---- Cookie / LPD bar ---- */
.lpd-bar{
  background:var(--ink);
  color:#fff;
  font-size:13px;
  padding:9px 0;
}
.lpd-bar .wrap{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.lpd-bar a{color:#fff; text-decoration:underline;}
.lpd-bar button{
  background:var(--orange);
  color:#fff;
  border:none;
  padding:6px 16px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
}

/* ---- Utility bar ---- */
.utility-bar{
  background:var(--ink);
  color:#fff;
}
.utility-bar .wrap{
  padding:8px 28px;
  font-size:13.5px;
  text-align:center;
}
.utility-bar a{
  color:#fff;
  font-weight:700;
  text-decoration:none;
  margin-left:6px;
}

/* ---- Header ---- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 28px;
  gap:20px;
}
header.site img.logo{height:112px; width:auto; aspect-ratio:1200/428; object-fit:contain;}
nav.main{display:flex; gap:26px; flex-wrap:wrap;}
nav.main a{
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  color:var(--ink);
}
nav.main a:hover{color:var(--orange);}

/* ---- Hero ---- */
.hero{padding:64px 0 0;}
.hero-banner{
  margin:44px auto 0;
  border:1px solid var(--line);
  max-width:420px;
}
.hero-banner img{width:100%;}
.hero-app-photos{
  display:flex;
  gap:16px;
  align-items:flex-end;
  margin:20px 0 4px;
}
.hero-app-photos .app-photo{
  border:1px solid var(--line);
  margin:0;
}
.hero-app-photos .app-photo img{width:100%; display:block;}
.hero-app-photos .app-photo.tablet{max-width:460px;}
.hero-app-photos .app-photo.phone{max-width:270px;}
@media (max-width:600px){
  .hero-app-photos{flex-wrap:wrap;}
  .hero-app-photos .app-photo.tablet{max-width:280px;}
  .hero-app-photos .app-photo.phone{max-width:170px;}
}
.hero h1{
  font-size:clamp(26px,4vw,40px);
  max-width:820px;
}
.hero-kicker{
  color:var(--orange);
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:clamp(18px,2.4vw,24px);
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin-bottom:8px;
}
.hero .app-title{
  font-size:clamp(28px,4.2vw,42px);
  max-width:780px;
  color:var(--ink);
  margin-bottom:14px;
}
.hero p.lede{
  max-width:560px;
  color:var(--gray);
  font-size:18px;
  margin-top:20px;
}

.hero-cta{
  display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  margin-top:28px;
}
.btn{
  display:inline-block;
  padding:14px 28px;
  font-weight:700;
  text-decoration:none;
  font-size:16px;
  border:2px solid var(--orange);
}
.btn.primary{background:var(--orange); color:#fff;}
.btn.primary:hover{background:var(--orange-dark); border-color:var(--orange-dark);}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line);}
.btn.ghost:hover{border-color:var(--ink);}
.wa-icon{display:inline-block; vertical-align:-3px; margin-right:6px;}
.hero-note{
  margin-top:18px;
  font-size:14.5px;
  color:var(--gray);
}

/* ---- Scrolling ticker ---- */
.ticker{
  margin-top:48px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
  background:var(--cream);
}
.ticker-track{
  display:inline-block;
  padding:14px 0;
  animation:scroll-left 16s linear infinite;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--gray);
}
.ticker-track span{margin:0 22px;}
.ticker-track span::after{content:"·"; margin-left:22px; color:var(--orange);}
@keyframes scroll-left{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none;}
}

/* ---- Section headers ---- */
.eyebrow{
  color:var(--orange);
  font-weight:600;
  font-size:14px;
  margin-bottom:8px;
}
section{padding:76px 0;}
section h2{font-size:clamp(26px,3.4vw,38px); max-width:640px;}
section p.section-lede{max-width:560px; color:var(--gray); margin-top:16px; font-size:16.5px;}

.alt{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.app-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.app-photo{
  border:1px solid var(--line);
  margin:0 auto;
}
.app-photo img{width:100%; display:block;}
.app-photo.phone{max-width:300px;}
.app-photo.tablet{max-width:280px; margin:26px 0 0;}

/* ---- Cards grid ---- */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line);
  margin-top:40px;
  border:1px solid var(--line);
}
.grid .card{
  background:#fff; padding:28px 26px;
}
.grid .card h3{
  font-size:21px; text-transform:none; margin-bottom:8px;
}
.grid .card p{color:var(--gray); font-size:15px; margin:0;}

/* ---- Photo gallery ---- */
.gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-top:40px;
}
.gallery figure{margin:0; position:relative; aspect-ratio:4/3; overflow:hidden;}
.gallery img{width:100%; height:100%; object-fit:cover;}
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(0deg, rgba(23,20,18,0.75), rgba(23,20,18,0));
  color:#fff; font-size:15px; padding:10px 12px;
}

/* ---- Pricing card ---- */
.tarif-layout{
  display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start;
  max-width:1000px;
}
.price-card{
  margin-top:40px;
  border:2px solid var(--orange);
  background:#fff;
  padding:36px;
}
.price-card .amount{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:44px;
  color:var(--orange);
}
.price-card .amount span{font-size:18px; color:var(--gray); font-family:'Inter',sans-serif; font-weight:500;}
.price-card ul{list-style:none; margin:20px 0 0; padding:0;}
.price-card li{
  padding:10px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; font-size:15px; color:var(--ink);
}
.price-card li span.v{color:var(--gray);}

.travel-card{
  margin-top:40px;
  border:1px solid var(--line);
  background:var(--cream);
  padding:36px;
}
.travel-card h3{
  font-size:22px; text-transform:none; margin-bottom:16px; color:var(--ink);
}
.travel-card ul{list-style:none; margin:0; padding:0;}
.travel-card li{
  padding:10px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; font-size:14.5px; color:var(--ink);
}
.travel-card li:first-child{border-top:none;}
.travel-card li span.z{color:var(--ink); font-weight:500;}
.travel-card li span.v{color:var(--orange); font-weight:600; white-space:nowrap;}

/* ---- Zone radar ---- */
.zone-layout{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:40px;}
.radar{
  position:relative;
  width:100%; max-width:460px; aspect-ratio:1/1; margin:0 auto;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle closest-side, transparent 0 39%, var(--line) 39% 40%, transparent 40% 71%, var(--line) 71% 72%, transparent 72% 91%, var(--line) 91% 92%, transparent 92% 100%),
    var(--cream);
}
.radar::before{
  content:"";
  position:absolute; inset:0;
  background:conic-gradient(rgba(230,80,2,0.4) 0deg, rgba(230,80,2,0.4) 10deg, transparent 10deg 360deg);
  animation:radar-sweep 5s linear infinite;
}
@keyframes radar-sweep{ to{ transform:rotate(360deg); } }
.radar .center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:50%; background:var(--orange);
  box-shadow:0 0 0 6px rgba(230,80,2,0.15);
  z-index:2;
}
.radar .home{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, 11px);
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:9.5px;
  color:var(--ink);
  text-align:center;
  z-index:2;
  white-space:nowrap;
}
.radar .label{
  position:absolute;
  z-index:2;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size:10px;
  color:var(--gray);
  transform:translate(-50%,-50%);
  text-align:center;
  line-height:1.25;
  max-width:118px;
  background:rgba(255,255,255,0.82);
  padding:2px 5px;
  border-radius:4px;
}
.radar .label b{
  display:block;
  font-size:11.5px;
  color:var(--ink);
  font-weight:700;
}
.radar .label span{
  display:block;
  font-size:8.5px;
  color:var(--orange);
  font-weight:600;
}
.radar .point{
  position:absolute;
  z-index:2;
  transform:translate(-50%,-2.5px);
  text-align:center;
}
.radar .point i{
  display:block;
  width:5px; height:5px; border-radius:50%;
  background:var(--gray);
  margin:0 auto 3px;
}
.radar .point span{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size:9.5px;
  color:var(--ink);
  white-space:nowrap;
  background:rgba(255,255,255,0.82);
  padding:1px 5px;
  border-radius:4px;
  position:relative; display:inline-block;
}
@media (prefers-reduced-motion: reduce){
  .radar::before{animation:none;}
}
.communes-ticker{
  margin-top:52px;
  border-top:1px solid var(--line);
}
.communes-ticker .ticker-track{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  padding:12px 0;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:600;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--gray);
  border-bottom:1px solid var(--line);
  animation:scroll-left 20s linear infinite;
}
.communes-ticker .ticker-track.reverse{
  animation-name:scroll-right;
  animation-duration:17s;
}
.communes-ticker .ticker-track span{margin:0 22px;}
.communes-ticker .ticker-track span::after{content:"·"; margin-left:22px; color:var(--orange);}
@keyframes scroll-right{
  0%{transform:translateX(-50%);}
  100%{transform:translateX(0);}
}
.canton-badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.canton-badges span{
  border:1px solid var(--line); padding:6px 12px; font-size:13px; font-weight:600; color:var(--ink);
}
.communes-list{font-size:14.5px; color:var(--gray); line-height:1.9; margin-top:16px;}
.communes-list b{color:var(--ink); font-weight:600;}

/* ---- Contact ---- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:40px;}
.contact-card{border:1px solid var(--line); padding:32px;}
.contact-card .field{padding:12px 0; border-top:1px solid var(--line);}
.contact-card .field:first-child{border-top:none; padding-top:0;}
.contact-card .label{display:block; font-size:12.5px; color:var(--gray); margin-bottom:3px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;}
.contact-card .value{font-size:16.5px;}
.contact-card .value a{text-decoration:none; border-bottom:1px solid var(--orange-soft);}
.map-frame{border:1px solid var(--line); overflow:hidden; height:100%; min-height:280px;}
.map-frame iframe{width:100%; height:100%; min-height:280px; border:0;}

/* ---- CTA band ---- */
.cta-band{
  background:var(--orange);
  color:#fff;
  text-align:center;
  padding:64px 0;
}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,0.85); max-width:520px; margin:16px auto 26px;}
.cta-band .btn.primary{background:#fff; color:var(--orange); border-color:#fff;}
.cta-band .btn.primary:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.cta-band .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,0.6);}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,0.15); border-color:#fff;}
.cta-band .site-link{
  display:block; margin-top:18px; font-size:13.5px; color:rgba(255,255,255,0.9); text-decoration:underline;
}

/* ---- Footer ---- */
footer.site{padding:52px 0 36px; border-top:1px solid var(--line);}
footer.site .wrap{display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap;}
footer.site img.logo{height:76px; margin-bottom:14px;}
footer.site address{font-style:normal; color:var(--gray); font-size:14.5px; line-height:1.8;}
footer.site address b{color:var(--ink);}
footer.site .netlist{
  font-size:12px; color:var(--gray); max-width:340px; line-height:2.1;
}
footer.site .netlist a{text-decoration:none; border-bottom:1px dotted var(--line);}
.copyright{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--gray);}

@media (max-width:860px){
  .grid{grid-template-columns:1fr 1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .zone-layout, .contact-grid, .app-layout, .tarif-layout{grid-template-columns:1fr;}
  nav.main{display:flex; order:3; flex:0 0 100%; justify-content:center; gap:18px; flex-wrap:nowrap; overflow-x:auto; padding:2px 0 4px; white-space:nowrap;}
  nav.main a{font-size:14px;}
  footer.site .wrap{flex-direction:column;}
  header.site img.logo{height:auto; width:200px; max-width:none; aspect-ratio:1200/428; object-fit:contain; flex-shrink:0;}
  header.site .wrap > a:first-child{flex-shrink:0; min-width:0;}
  header.site .wrap{flex-wrap:wrap; justify-content:center; gap:0;}
  .utility-bar .wrap{font-size:12px; padding:7px 14px;}
  footer.site img.logo{height:auto; width:200px; aspect-ratio:1200/428; object-fit:contain;}
  h1,h2,h3{font-weight:500; letter-spacing:0.02em;}
  .hero h1{font-size:clamp(22px,6.5vw,30px);}
  .hero .app-title{font-size:clamp(18px,5vw,24px);}
  section h2{font-size:clamp(20px,5.5vw,26px);}
  .grid .card h3{font-size:18px;}
}
@media (max-width:400px){
  header.site img.logo{width:150px;}
}

/* ---- Cantons desservis ---- */
.cantons-served{margin-top:56px;}
.cantons-served h3{
  font-size:26px; text-transform:none; margin-bottom:8px; color:var(--ink);
}
.cantons-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:0 28px;
  border-bottom:1px solid var(--line);
}
.canton{
  padding:12px 0;
  border-top:1px solid var(--line);
}
.canton b{
  display:block;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--orange);
  text-transform:uppercase;
}
.canton span{
  display:block;
  font-size:13.5px;
  line-height:1.5;
  color:var(--gray);
  margin-top:2px;
}
@media (max-width:560px){
  .radar .point span{font-size:8px; padding:1px 3px;}
  .radar .home{font-size:8.5px;}
}
.hero .hero-one-line{max-width:none; text-align:center; margin-left:auto; margin-right:auto;}
@media (min-width:1100px){
  .hero h2.hero-one-line{white-space:nowrap; font-size:clamp(20px,1.9vw,28px); text-transform:none; letter-spacing:0;}
  .hero p.hero-one-line{white-space:nowrap; font-size:16px;}
}
html{scroll-behavior:smooth; scroll-padding-top:150px;}
