/* Feuille de styles commune — accueil + pages villes.
   Placee a la RACINE (pas dans /assets/) : netlify.toml met /assets/* en cache immutable 1 an.
*/
  :root{
    /* encre / titres */
    --ink:#20302F; --head:#16242B;
    /* vert-bleu profond */
    --deep:#0E3A3F; --deep-2:#0E2224; --deep-3:#091C1F;
    /* fonds */
    --cream:#F8F5EE; --beige:#EFE9DA;
    /* accents */
    --brass:#96733B; --champ:#D8C9A3;
    /* filets */
    --line:#C9BE9E; --line-2:#DAD1B8; --line-3:#E4DCC8;
    /* textes secondaires */
    --muted:#526260; --muted-2:#7C8C89;
    /* sur fond sombre */
    --on-dark:#9FB3B0; --on-dark-2:#B9CBC8;
    --radius:2px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:96px;}
  body{margin:0; font-family:'Inter',-apple-system,Segoe UI,Roboto,sans-serif; font-weight:400; color:var(--ink); background:var(--cream); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:440; margin:0; letter-spacing:-.005em; line-height:1.2;}
  a{color:inherit;}
  img{max-width:100%;}
  ::selection{background:var(--brass); color:#fff;}
  :focus-visible{outline:2px solid var(--brass); outline-offset:3px;}
  .skip{position:absolute; left:-999px; top:0; z-index:200; background:var(--deep); color:var(--cream); padding:12px 18px; font-weight:500; text-decoration:none;}
  .skip:focus{left:0;}
  .wrap{max-width:1280px; margin:0 auto; padding:0 32px;}

  /* ===== nav ===== */
  nav{position:sticky; top:0; z-index:100; background:rgba(248,245,238,.82); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid rgba(32,48,47,.08);}
  nav .row{display:flex; align-items:center; justify-content:space-between; height:88px;}
  .logo{font-family:'Fraunces',serif; font-weight:440; font-size:20px; color:var(--deep); display:flex; align-items:center; gap:11px; text-decoration:none; letter-spacing:.01em;}
  .logo .dot{width:7px; height:7px; border-radius:50%; background:var(--brass); flex:none;}
  .logo .sub{font-family:'Inter',sans-serif; font-weight:300; color:var(--muted-2); font-size:14px; padding-left:2px;}
  @media(max-width:1040px){ .logo .sub{display:none;} }
  .links{display:flex; align-items:center; gap:2px;}
  .links a:not(.btn){white-space:nowrap; text-decoration:none; font-size:13.5px; color:#3A4A48; font-weight:500; padding:10px 16px; letter-spacing:.01em; transition:color .2s;}
  .links a:not(.btn):hover{color:var(--deep);}
  .links a.active{color:var(--deep); box-shadow:inset 0 -1px 0 var(--brass);}
  /* border transparent (et non `none`) : le filet du variant .ghost s'ajoute sinon à sa hauteur
     et les deux CTA du hero ne s'alignent plus. */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--deep); color:var(--cream); text-decoration:none; padding:11px 24px; border-radius:var(--radius); font-weight:500; font-size:13px; letter-spacing:.03em; border:1px solid transparent; cursor:pointer; font-family:inherit; transition:background .2s, transform .15s, border-color .2s;}
  .btn:hover{background:#0a2b2f; transform:translateY(-1px);}
  .btn:active{transform:none;}
  .btn.lg{padding:16px 32px; font-size:14.5px; letter-spacing:.02em;}
  .btn.cream{background:var(--cream); color:var(--deep);} .btn.cream:hover{background:#fff;}
  /* CTA secondaire du hero : meme gabarit que le bouton plein, mais en filet — pas d'ombre, coins carres */
  .btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45);}
  .btn.ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-1px);}
  .btn .arw{display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1);}
  .btn.ghost:hover .arw{transform:translateY(4px);}
  @media(prefers-reduced-motion:reduce){ .btn .arw{transition:none;} .btn.ghost:hover .arw{transform:none;} }
  .links .btn{margin-left:16px;}
  .burger{display:none; background:none; border:none; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer;}
  .mobmenu{display:none; padding:8px 32px 24px; flex-direction:column; gap:2px; border-top:1px solid rgba(32,48,47,.08);}
  .mobmenu a{text-decoration:none; color:var(--ink); font-weight:500; padding:13px 4px;}
  .mobmenu.open{display:flex;}
  @media(max-width:900px){ .links{display:none;} .burger{display:flex;} }

  /* ===== hero ===== */
  .hero{position:relative; min-height:96vh; display:flex; align-items:flex-end; color:#fff; overflow:hidden;}
  .hero .bg{position:absolute; inset:-8% 0; will-change:transform;}
  .hero .bg img{width:100%; height:100%; object-fit:cover; display:block;}
  .hero .grad{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(9,28,31,.22) 0%,rgba(9,28,31,.34) 50%,rgba(7,20,22,.95) 100%);}
  /* padding-bas = 120px (et non 100) pour que la rangée de chiffres clés dégage
     la pastille « Découvrir » centrée : max-width 640 + 32 de gouttière dépasse le centre. */
  .hero .inner{position:relative; z-index:2; width:100%; padding-bottom:120px;}
  .eyebrow-hero{font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--champ); margin-bottom:28px;}
  .hero h1{font-size:clamp(38px,6vw,68px); max-width:820px; line-height:1.1;}
  .hero p.sub{font-size:clamp(16px,1.6vw,18px); color:#E3ECEA; max-width:560px; margin:26px 0 40px; line-height:1.75; font-weight:300;}
  .hero .cta{display:flex; gap:20px; flex-wrap:wrap; align-items:center;}
  .keyfacts{display:flex; flex-wrap:wrap; margin-top:56px; border-top:1px solid rgba(255,255,255,.2); padding-top:26px; max-width:640px;}
  .keyfacts div{flex:1; min-width:120px; padding-right:20px;}
  .keyfacts div + div{border-left:1px solid rgba(255,255,255,.15); padding-left:20px;}
  .keyfacts b{font-family:'Fraunces',serif; font-weight:440; font-size:26px; color:#fff; display:block; line-height:1;}
  .keyfacts span{font-size:12.5px; color:var(--on-dark-2); letter-spacing:.02em;}

  /* ===== sections ===== */
  section{padding:150px 0;}
  .eyebrow{display:block; color:var(--brass); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px;}
  h2.title{font-size:clamp(28px,3.2vw,38px); color:var(--head);}
  .lead{color:var(--muted); font-size:16px; line-height:1.8; font-weight:300; margin:16px 0 0;}
  .head-block{max-width:600px; margin-bottom:56px;}
  .split{display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center;}
  @media(max-width:860px){ .split{grid-template-columns:1fr !important; gap:48px;} }
  @media(max-width:760px){ section{padding:96px 0;} .wrap{padding:0 22px;} }

  /* reveal */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
  .reveal.in{opacity:1; transform:none;}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    .hero .bg{inset:0;}
  }

  /* ===== présentation ===== */
  .pres-img{position:relative;}
  .pres-img .frame{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5;}
  .pres-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .pres-img .cap{position:absolute; bottom:-1px; left:-1px; right:40%; background:var(--deep); color:#fff; padding:20px 24px;}
  .pres-img .cap b{font-family:'Fraunces',serif; font-size:15px; font-weight:440; display:block; margin-bottom:3px;}
  .pres-img .cap span{font-size:12px; color:var(--on-dark-2);}
  .pres-split{grid-template-columns:0.9fr 1.1fr;}
  .pres-stats{display:flex; gap:48px; flex-wrap:wrap; border-top:1px solid var(--line-3); padding-top:32px; margin-top:44px;}
  .pres-stats .n{font-family:'Fraunces',serif; font-size:26px; color:var(--deep); font-weight:440;}
  .pres-stats .k{font-size:12.5px; color:var(--muted-2); margin-top:6px; max-width:140px;}
  .credit{font-size:11.5px; color:var(--muted-2); margin:10px 0 0; font-weight:300;}
  .credit a{color:inherit;}

  /* ===== bateau ===== */
  .s-beige{background:var(--beige);}
  .gal5{display:grid; grid-template-columns:1.4fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:14px; height:600px; margin-bottom:64px;}
  .gal5 figure{margin:0; border-radius:var(--radius); overflow:hidden; background:var(--deep);}
  .gal5 figure:first-child{grid-row:1/3;}
  .gal5 img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.16,1,.3,1);}
  .gal5 figure:hover img{transform:scale(1.04);}
  @media(max-width:760px){ .gal5{grid-template-columns:1fr 1fr; grid-template-rows:none; height:auto;} .gal5 figure{height:260px;} .gal5 figure:first-child{grid-row:auto; grid-column:1/3; height:340px;} }
  .grid-rule{display:grid; gap:1px; background:var(--line-2);}
  .cols4{grid-template-columns:repeat(4,1fr);}
  @media(max-width:760px){ .cols4{grid-template-columns:1fr 1fr;} }
  .cell-beige{background:var(--beige); padding:32px 24px; text-align:center;}
  .cell-beige .n{font-family:'Fraunces',serif; font-size:32px; font-weight:440; color:var(--deep);}
  .cell-beige .k{font-size:11.5px; color:var(--muted-2); font-weight:500; text-transform:uppercase; letter-spacing:.08em; margin-top:10px;}
  .tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:48px;}
  .tags span{border:1px solid var(--line); border-radius:var(--radius); padding:9px 18px; font-size:13px; color:#3A4A48; font-weight:500;}

  /* ===== tarifs ===== */
  .s-dark{background:var(--deep-2); color:var(--cream);}
  .s-dark .eyebrow{color:var(--champ);}
  .s-dark h2.title{color:#fff;}
  .s-dark .lead{color:var(--on-dark);}
  .price-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:1px; background:rgba(255,255,255,.14);}
  @media(max-width:860px){ .price-grid{grid-template-columns:1fr;} }
  .price-cell{background:var(--deep-2); padding:44px;}
  @media(max-width:520px){ .price-cell{padding:32px 24px;} }
  .kicker{font-size:12px; color:var(--champ); letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px;}
  .price-big{font-family:'Fraunces',serif; font-size:clamp(40px,5vw,52px); font-weight:440; color:#fff;}
  .price-big small{font-size:16px; font-weight:300; color:var(--on-dark); font-family:'Inter',sans-serif;}
  .price-cell ul{list-style:none; padding:0; margin:32px 0 0;}
  .price-cell li{padding:15px 0; border-top:1px solid rgba(255,255,255,.12); font-size:14.5px; display:flex; gap:14px; align-items:flex-start; font-weight:300;}
  .price-cell li em{color:var(--champ); font-style:normal; flex:none;}
  .price-col{display:flex; flex-direction:column; gap:1px; background:rgba(255,255,255,.14);}
  .price-col > div{background:var(--deep-2); padding:36px 44px; flex:1;}
  @media(max-width:520px){ .price-col > div{padding:32px 24px;} }
  .price-mid{font-family:'Fraunces',serif; font-size:clamp(30px,4vw,38px); font-weight:440; color:#fff;}
  .price-mid small{font-size:14px; font-weight:300; color:var(--on-dark); font-family:'Inter',sans-serif;}
  .price-col p{font-size:13.5px; color:var(--on-dark); font-weight:300; line-height:1.75; margin:14px 0 0;}
  .price-col strong{color:#fff; font-weight:500;}
  .price-note{font-size:13px; color:var(--on-dark); font-weight:300; margin:26px 0 0;}

  /* ===== accès ===== */
  .rows{border-top:1px solid var(--line); margin-top:36px;}
  .rows .r{display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line);}
  .rows .r strong{color:var(--head); font-size:14px; font-weight:500;}
  .rows .r span{font-size:13.5px; color:var(--muted-2); text-align:right;}
  .loc-media{display:flex; flex-direction:column; gap:1px;}
  .loc-img{border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;}
  .loc-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .loc-2up{display:grid; grid-template-columns:1fr 1fr; gap:1px;}
  .loc-2up .cell{overflow:hidden; aspect-ratio:3/2; border-radius:var(--radius);}
  .loc-2up img{width:100%; height:100%; object-fit:cover; display:block;}

  /* bandeau photo pleine largeur (respiration entre deux sections) */
  .band{position:relative; margin:0; height:clamp(300px,40vw,520px); overflow:hidden;}
  .band img{width:100%; height:100%; object-fit:cover; display:block;}
  .band .cap{position:absolute; left:0; bottom:0; background:var(--deep); color:#fff; padding:16px 24px; font-size:12.5px; font-weight:300; letter-spacing:.02em; max-width:min(90%,560px);}

  /* ===== dispos ===== */
  .cal2{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-3); max-width:760px;}
  @media(max-width:680px){ .cal2{grid-template-columns:1fr;} }
  .calm{background:var(--cream); padding:28px;}
  .calm h3{font-family:'Fraunces',serif; color:var(--deep); font-size:17px; font-weight:500; margin:0 0 16px; text-transform:capitalize;}
  .calg{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
  .calg .dw{font-size:10.5px; color:var(--muted-2); text-align:center; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding-bottom:4px;}
  .calg .cd{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:13px; border-radius:var(--radius); border:1px solid var(--line-3); color:var(--ink);}
  .calg .cd.blank{border-color:transparent;}
  .calg .cd.busy{background:var(--deep); border-color:var(--deep); color:var(--cream); font-weight:500;}
  .calg .cd.free{background:#fff; border-color:var(--line-2);}
  .calg .cd.past{color:#B7C2C0; border-color:transparent;}
  .cal-legend{display:flex; gap:26px; font-size:13px; color:var(--muted-2); margin-top:22px; flex-wrap:wrap;}
  .cal-legend .sw{display:inline-block; width:12px; height:12px; border-radius:var(--radius); vertical-align:-1px; margin-right:8px;}
  .dispo-note{font-size:12.5px; color:var(--muted-2); margin-top:16px; font-weight:300;}

  /* ===== étapes ===== */
  .cols5{grid-template-columns:repeat(5,1fr);}
  @media(max-width:900px){ .cols5{grid-template-columns:1fr 1fr;} }
  @media(max-width:520px){ .cols5{grid-template-columns:1fr;} }
  .grid-rule.light{background:var(--line-3);}
  .cell-cream{background:var(--cream); padding:36px 28px;}
  .cell-cream .n{font-family:'Fraunces',serif; font-size:26px; color:var(--line); font-weight:440; margin-bottom:20px;}
  .cell-cream h3{font-size:16px; margin:0 0 10px; color:var(--deep); font-weight:500;}
  .cell-cream p{margin:0; font-size:13.5px; color:var(--muted-2); line-height:1.7; font-weight:300;}
  .cell-cream p strong{color:var(--muted); font-weight:500;}
  .cta-band{background:var(--deep); padding:56px; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; margin:64px 0;}
  @media(max-width:520px){ .cta-band{padding:36px 24px;} }
  .cta-band h3{font-size:24px; color:#fff; margin:0 0 10px;}
  .cta-band p{color:var(--on-dark); font-size:14.5px; margin:0; font-weight:300;}

  /* ===== formulaire ===== */
  .resa-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:1px; background:var(--line-3);}
  @media(max-width:860px){ .resa-grid{grid-template-columns:1fr;} }
  form.book{background:var(--cream); padding:44px;}
  @media(max-width:520px){ form.book{padding:32px 24px;} }
  .fg{margin-bottom:16px;} .fg2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  @media(max-width:480px){ .fg2{grid-template-columns:1fr;} }
  label{display:block; font-size:11.5px; color:var(--muted-2); font-weight:500; text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px;}
  input,select,textarea{width:100%; padding:13px 14px; border:1px solid var(--line-2); border-radius:var(--radius); font-size:15px; font-family:inherit; font-weight:300; background:#fff; color:var(--ink); transition:border-color .2s;}
  input:focus,select:focus,textarea:focus{outline:none; border-color:var(--deep);}
  textarea{min-height:96px; resize:vertical;}
  .contact-card{background:var(--deep); color:#DCE7E5; padding:44px;}
  @media(max-width:520px){ .contact-card{padding:32px 24px;} }
  .contact-card h3{font-size:21px; margin:0 0 22px; color:#fff;}
  .contact-row{display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid rgba(255,255,255,.12); font-size:14.5px; font-weight:300;}
  .contact-row:first-of-type{border-top:none;}
  .contact-row .ic{width:36px; height:36px; border-radius:var(--radius); background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none;}
  .contact-row a{color:#fff; text-decoration:none; font-weight:500; border-bottom:1px solid rgba(255,255,255,.3);}
  .contact-row a:hover{color:var(--champ); border-color:var(--champ);}
  .channels{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
  .channels a{font-size:13px; text-decoration:none; border:1px solid rgba(255,255,255,.25); border-radius:var(--radius); padding:9px 15px; color:#DCE7E5; transition:background .2s, color .2s;}
  .channels a:hover{background:var(--cream); color:var(--deep);}
  .msg{display:none; margin-top:16px; padding:14px 16px; border-radius:var(--radius); font-size:14px;}
  .msg.ok{display:block; background:#E8EFE9; color:#1d5540; border:1px solid #C6D8CB;}
  .msg.err{display:block; background:#F5E7E2; color:#8C3D2A; border:1px solid #E2C5B9;}
  .disclaim{font-size:12.5px; color:var(--muted-2); margin-top:16px; font-weight:300;}

  /* ===== faq ===== */
  .faq{max-width:760px; margin:0 auto; border-top:1px solid var(--line);}
  .faq details{border-bottom:1px solid var(--line);}
  .faq summary{list-style:none; cursor:pointer; padding:24px 0; font-family:'Fraunces',serif; font-size:16.5px; color:var(--deep); font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:14px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+"; font-family:'Inter',sans-serif; font-size:22px; font-weight:300; color:var(--brass); line-height:1; flex:none; transition:transform .25s;}
  .faq details[open] summary::after{transform:rotate(45deg);}
  .faq p{margin:0 0 24px; color:var(--muted); font-size:14.5px; line-height:1.8; font-weight:300;}
  .faq p strong{color:var(--head); font-weight:500;}
  .faq-head{max-width:760px; margin:0 auto 48px;}

  /* ===== footer ===== */
  footer{background:var(--deep-3); color:var(--on-dark); padding:64px 0 40px; font-size:13.5px; font-weight:300;}
  footer a{color:var(--on-dark); text-decoration:none;} footer a:hover{color:#fff;}
  footer .frow{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:40px;}
  footer .flogo{font-family:'Fraunces',serif; font-weight:440; font-size:18px; color:#fff; display:flex; align-items:center; gap:10px;}
  footer .flogo .dot{width:7px; height:7px; border-radius:50%; background:var(--brass); flex:none;}
  footer h4{font-family:'Inter',sans-serif; font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#fff; margin:0 0 14px;}
  footer .fcol p{margin:8px 0;}
  footer .small{font-size:12px; color:#4E6260; margin-top:24px;}
  footer .small a{color:#6E8280;}

  /* ===== pages villes ===== */
  .page-head{background:var(--beige); border-bottom:1px solid var(--line-3); padding:clamp(48px,7vw,88px) 0 clamp(40px,5vw,64px); margin-top:0;}
  .crumb{font-size:12.5px; color:var(--muted-2); margin:0 0 18px; font-weight:300;}
  .crumb a{color:var(--brass); text-decoration:none;}
  .crumb a:hover{text-decoration:underline;}
  .page-head h1{font-size:clamp(30px,4.4vw,48px); color:var(--head); max-width:900px; line-height:1.15;}
  .page-head h1 em{font-style:normal; color:var(--deep); display:block;}
  .page-head .lead{max-width:640px; font-size:16.5px;}
  .city-grid{display:grid; grid-template-columns:1.55fr .9fr; gap:64px; align-items:start;}
  @media(max-width:900px){ .city-grid{grid-template-columns:1fr; gap:40px;} }
  .prose h2{font-size:clamp(22px,2.4vw,28px); color:var(--head); margin:44px 0 14px;}
  .prose h2:first-child{margin-top:0;}
  .prose h2 em{font-style:normal; color:var(--deep);}
  .prose h3{font-family:'Fraunces',serif; font-weight:500; font-size:17px; color:var(--deep); margin:28px 0 8px;}
  .prose p{color:var(--muted); font-size:16px; line-height:1.85; font-weight:300; margin:0 0 16px;}
  .prose strong{color:var(--head); font-weight:500;}
  .prose a{color:var(--deep); text-decoration:none; border-bottom:1px solid var(--line);}
  .prose a:hover{border-color:var(--deep);}
  .prose ul{margin:0 0 16px; padding:0; list-style:none;}
  .prose li{color:var(--muted); font-size:15.5px; line-height:1.8; font-weight:300; padding:11px 0 11px 22px; border-bottom:1px solid var(--line-3); position:relative;}
  .prose li::before{content:"—"; position:absolute; left:0; color:var(--brass);}
  .city-aside{background:var(--beige); border:1px solid var(--line-3); border-radius:var(--radius); padding:32px; position:sticky; top:112px;}
  @media(max-width:900px){ .city-aside{position:static;} }
  .city-aside .amt{font-family:'Fraunces',serif; font-size:34px; font-weight:440; color:var(--deep); line-height:1.1;}
  .city-aside .amt small{display:block; font-family:'Inter',sans-serif; font-size:13px; font-weight:300; color:var(--muted-2); margin-top:6px;}
  .city-aside .row{font-size:13.5px; color:var(--muted); font-weight:300; padding:13px 0; border-top:1px solid var(--line-3);}
  .city-aside .row:first-of-type{margin-top:18px;}
  .city-aside .btn{width:100%; margin-top:18px;}
  .city-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .city-links a{border:1px solid var(--line); border-radius:var(--radius); padding:9px 18px; font-size:13px; color:#3A4A48; font-weight:500; text-decoration:none; transition:background .2s, color .2s;}
  .city-links a:hover{background:var(--deep); border-color:var(--deep); color:var(--cream);}


  /* ===== mobile : hero ===== */
  /* L'image du hero est en paysage (768x576) : sur un ecran portrait, object-fit:cover n'en garde
     qu'une bande verticale (~35 % de la largeur). Le bateau, au centre, se retrouvait DERRIERE le
     texte, sur la partie claire de l'eau (contraste illisible). On libere donc le haut de l'image
     pour le bateau et on compacte le texte en bas, sur le degrade sombre. */
  .sm-hide{display:inline;}
  @media(max-width:760px){
    .sm-hide{display:none;}                 /* sous-titre raccourci : 6 lignes -> 3 */
    .hero{min-height:100svh;}               /* svh : evite que la barre Safari mange le bas */
    /* cover ne rogne QUE horizontalement (image bien plus large que haute) : toute la hauteur
       reste affichee, donc tout le ciel. On remonte le cadre pour couper le ciel et faire
       monter le bateau au-dessus du texte. Le bas garde -8% de marge pour le parallax. */
    .hero .bg{top:-30%; bottom:-8%;}
    .hero .bg img{object-position:62% center;}
    /* degrade repousse vers le bas : haut clair (on voit le bateau), bas franchement sombre (texte lisible) */
    .hero .grad{background:linear-gradient(180deg,rgba(9,28,31,.10) 0%,rgba(9,28,31,.14) 34%,rgba(7,20,22,.62) 56%,rgba(7,20,22,.93) 78%,rgba(7,20,22,.98) 100%);}
    .hero .inner{padding-top:0; padding-bottom:44px;}
    .eyebrow-hero{font-size:10.5px; letter-spacing:.1em; margin-bottom:12px;}
    .hero h1{font-size:clamp(27px,7.4vw,36px); line-height:1.15;}
    .hero p.sub{font-size:14.5px; line-height:1.55; margin:14px 0 22px;}
    .hero .cta{gap:10px; width:100%;}
    .hero .cta .btn{width:100%;}
    .hero .cta .btn.lg{padding:14px 24px;}
    .keyfacts{margin-top:26px; padding-top:18px;}
    .keyfacts div{flex:0 0 50%; min-width:0; padding-right:12px; margin-bottom:14px;}
    .keyfacts div + div{border-left:none; padding-left:0;}
    .keyfacts div:nth-child(even){border-left:1px solid rgba(255,255,255,.15); padding-left:16px;}
    .keyfacts div:nth-last-child(-n+2){margin-bottom:0;}
    .keyfacts b{font-size:20px;}
    .keyfacts span{font-size:11.5px;}
  }