*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:#1a1a1a;line-height:1.6;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#0a66c2;text-decoration:none}a:hover{text-decoration:underline}
.container{width:min(1100px,92%);margin-inline:auto}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:.6rem;background:#111;color:#fff;font-weight:700;text-decoration:none;transition:filter .15s ease, transform .05s ease, background .2s ease}
.btn:hover,.btn:focus{filter:brightness(1.03);background-image:linear-gradient(90deg,#111 0%,#f5c84c 50%,#111 100%);background-size:200% 100%;background-position:100% 0}
.btn:active{transform:translateY(1px)}
.header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid #eee;z-index:50}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;gap:1rem;flex-wrap:wrap}
.brand{display:flex;flex-direction:column}
.brand-main{display:flex;align-items:center;gap:.6rem;font-weight:900}
.brand .logo{width:40px;height:40px;background:linear-gradient(135deg,#f7b500,#ffec99);border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid #dba900}
.brand .tagline{font-size:.9rem;color:#b58900;font-weight:600;margin-left:2.4rem}
nav a{padding:.5rem .7rem;border-radius:.5rem}nav a:hover{background:#f6f6f6}
.hero{padding:2rem 0;border-bottom:1px solid #eee}
.hero h1{margin:0 0 .6rem;font-size:clamp(1.8rem,3.5vw,2.6rem)}
.hero .lead{font-size:1.1rem;color:#333}
.hero-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.badges{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.badge{background:#111;color:#fff;padding:.35rem .6rem;border-radius:999px;font-size:.85rem;white-space:nowrap}
.section{padding:2.2rem 0}
.grid-2{display:grid;gap:1.2rem;grid-template-columns:1fr}
.card{padding:1rem;border:1px solid #eee;border-radius:12px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.05)}
.card h2{margin-top:0}
.list{display:grid;gap:.5rem}
.list li{display:flex;gap:.6rem;align-items:flex-start}
.list li::before{content:"✔";margin-top:.15rem}
.cta-band{background:#111;color:#fff;padding:1.6rem 0}
.cta-band .row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.reviews{display:grid;gap:1rem;grid-template-columns:1fr}
.review{border:1px solid #eee;border-radius:12px;padding:1rem;background:#fff}
.stars{font-size:1.1rem}
footer{border-top:1px solid #eee;padding:1.2rem 0;font-size:.95rem;color:#333}
.small{font-size:.9rem;color:#555}
.legal{font-size:.9rem;color:#555;margin-top:.4rem}
@media(min-width:840px){.grid-2{grid-template-columns:1fr 1fr}.reviews{grid-template-columns:1fr 1fr 1fr}}

/* Background photo + golden overlay */
body{background-image:linear-gradient(to bottom, rgba(255,255,255,0.78), rgba(255,255,255,0.62)),linear-gradient(to bottom, rgba(247,181,0,0.30), rgba(247,181,0,0.30)),url('https://www.francethisway.com/images/places/hyeres.jpg');background-size:auto,auto,cover;background-position:top left,top left,center;background-repeat:repeat,repeat,no-repeat}
.section .container, .hero .container{background:rgba(255,255,255,0.30);border-radius:12px;padding:.8rem}

/* Airport/long-distance cards: gold bg + blue text */
.airport-links{display:grid;gap:.6rem;grid-template-columns:1fr}
.airport-links a{display:block;padding:.9rem 1rem;border:1px solid #e0b83a;border-radius:12px;background:#f5c84c;box-shadow:0 2px 6px rgba(0,0,0,.06);text-decoration:none;color:#0a3a7a}
.airport-links a strong{display:block;color:#0a3a7a}
.airport-links a span{color:#0a3a7a;opacity:.95}
@media(min-width:760px){.airport-links{grid-template-columns:1fr 1fr 1fr 1fr}}

/* Anthracite highlight cards */
#services .card, #zones .card:first-of-type{background:#222;color:#fff;border-color:#111;box-shadow:0 8px 18px rgba(0,0,0,.25)}
#services .card h2, #services .card h3, #zones .card:first-of-type h2, #zones .card:first-of-type h3{color:#fff}
#services .card .list li::before, #zones .card:first-of-type .list li::before{content:"✔";color:#f5c84c}
#services .card a, #zones .card:first-of-type a{color:#fff}