@font-face{font-family:"Familjen Grotesk"; font-style:normal; font-weight:400; font-display:swap; src:url("familjen-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Familjen Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url("familjen-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Familjen Grotesk"; font-style:normal; font-weight:600; font-display:swap; src:url("familjen-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Familjen Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("familjen-grotesk-latin-700-normal.woff2") format("woff2")}
:root{
  --soleil:#F4B63F; --soleil-h:#F7C566; --soleil-clair:#FCE9BC; --marine:#1E3F5A; --nuit:#152E43; --fleuve:#2E8FB3; --montagne:#4E6A62;
  --brume:#EEF4F6; --line:#D9E2E6; --ink:#17283A; --mute:#7D8C94; --white:#fff;
  --f:"Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --gut:16px; --head-h:72px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important; scroll-behavior:auto!important} html{scroll-behavior:auto} }
body{margin:0; background:var(--white); color:var(--ink); font:400 17px/1.55 var(--f); overflow-x:hidden; font-variant-numeric:tabular-nums}
img{max-width:100%; display:block; height:auto}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--fleuve); outline-offset:2px; border-radius:6px}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0; padding:0}
ul{list-style:none}
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--gut)}
.narrow{max-width:820px}
[hidden]{display:none!important}

.mock-switch{position:fixed; left:8px; bottom:86px; z-index:90; display:flex; gap:2px; align-items:center; background:rgba(21,46,67,.9); color:#fff; font:12px/1 var(--f); padding:4px; border-radius:8px}
.mock-switch span{padding:0 6px; opacity:.7}
.mock-switch a{color:#fff; text-decoration:none; padding:6px 8px; border-radius:6px}
.mock-switch a.on{background:var(--fleuve)}
body.capture .mock-switch{display:none}

/* boutons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 24px; border-radius:12px; font:700 17px/1.1 var(--f); text-decoration:none; border:0; cursor:pointer; transition:background-color .15s}
.btn-sun{background:var(--soleil); color:var(--nuit)}
.btn-sun:hover{background:var(--soleil-h)}
.btn-navy{background:var(--marine); color:#fff}
.btn-navy:hover{background:var(--nuit)}
.btn-sm{min-height:44px; padding:10px 18px; font-size:15px}
.center{display:flex; width:max-content; margin:36px auto 0}
.link-btn{background:none; border:0; padding:10px 4px; font-weight:600; color:var(--marine); text-decoration:underline; text-underline-offset:4px; cursor:pointer}

/* en-tête jaune soleil */
.site-head{position:sticky; top:0; z-index:50; height:var(--head-h); background:var(--soleil); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--gut); box-shadow:0 1px 0 rgba(21,46,67,.14)}
.brand{display:block; flex:none; border:1px solid rgba(21,46,67,.4); border-radius:9px; overflow:hidden; line-height:0}
.brand img{height:52px; width:auto}
.menu-btn{appearance:none; flex:none; border:1.5px solid rgba(21,46,67,.45); background:transparent; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; cursor:pointer}
.burger,.burger::before,.burger::after{display:block; width:22px; height:2px; background:var(--nuit); border-radius:2px; position:relative; transition:transform .2s}
.burger::before,.burger::after{content:""; position:absolute; left:0}
.burger::before{top:-7px} .burger::after{top:7px}
.menu-btn[aria-expanded="true"] .burger{background:transparent}
.menu-btn[aria-expanded="true"] .burger::before{transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .burger::after{transform:translateY(-7px) rotate(-45deg)}
.site-nav{position:fixed; inset:var(--head-h) 0 auto 0; background:var(--nuit); padding:6px var(--gut) 20px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s, transform .18s, visibility .18s}
.site-nav.open{opacity:1; visibility:visible; transform:none}
.site-nav a{display:block; padding:13px 2px; color:#fff; text-decoration:none; font-size:19px; border-bottom:1px solid rgba(255,255,255,.12)}
.site-nav a[aria-current]{color:var(--soleil)}
@media (min-width: 1100px){
  :root{--head-h:96px; --gut:32px}
  .brand img{height:72px}
  .menu-btn{display:none}
  .site-nav{position:static; opacity:1; visibility:visible; transform:none; background:none; padding:0}
  .site-nav ul{display:flex; gap:2px; align-items:center}
  .site-nav a{border:0; font-size:16px; font-weight:500; padding:10px 11px; border-radius:10px; color:var(--nuit)}
  .site-nav a:hover{background:rgba(21,46,67,.08)}
  .site-nav a[aria-current]{color:var(--nuit); font-weight:700; box-shadow:inset 0 -3px 0 var(--nuit); border-radius:0}
  .site-nav a.nav-cta{background:var(--marine); color:#fff; padding:11px 18px; margin:0 6px; border-radius:10px; font-weight:700}
  .site-nav a.nav-cta[aria-current]{box-shadow:none; background:var(--nuit)}
}

/* héros */
.hero{padding:0 0 8px}
.hero-photo{position:relative; min-height:58svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--marine)}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 68%}
.hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,46,67,0) 35%, rgba(21,46,67,.78) 100%)}
.hero-txt{position:relative; z-index:1; padding:0 var(--gut) 76px; color:#fff; width:100%; max-width:1180px; margin:0 auto}
.hero h1{font-size:clamp(44px, 11vw, 88px); line-height:.94; letter-spacing:-.03em}
.hero h1 span{display:block; font-size:.4em; letter-spacing:0; font-weight:500; margin-top:12px; color:var(--soleil)}
.lead{font-size:19px; margin-top:12px; max-width:34ch; color:#EEF3F6}
@media (min-width: 900px){
  .hero{padding:24px var(--gut) 8px}
  .hero-photo{min-height:min(72vh, 700px); border-radius:24px; max-width:1180px; margin:0 auto}
  .hero-txt{padding:0 56px 120px}
}

/* barre de réservation */
.book{position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; background:var(--white); border-radius:20px; padding:16px; margin:-52px var(--gut) 0}
.book-hero{box-shadow:0 22px 44px -18px rgba(21,46,67,.45), 0 0 0 1px rgba(21,46,67,.06); animation:rise .55s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.bk-f{appearance:none; display:grid; gap:2px; align-content:center; text-align:left; min-width:0; min-height:62px; padding:9px 14px; background:#fff; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s, box-shadow .15s}
.bk-f:hover{border-color:var(--marine)}
.bk-f[aria-expanded="true"]{border-color:var(--marine); box-shadow:0 0 0 3px var(--soleil-clair)}
.bk-g{grid-column:1 / -1}
.bk-lab{font-size:13px; font-weight:600; color:var(--montagne)}
.bk-val{font-size:17px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.is-empty .bk-val{font-weight:500; color:var(--mute)}
.bk-go{grid-column:1 / -1; min-height:56px; font-size:19px}
.bk-note{grid-column:1 / -1; text-align:center; font-size:15px; color:var(--montagne)}
.bk-note a{color:var(--marine); font-weight:700; white-space:nowrap}
@media (min-width: 900px){
  .book{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; align-items:stretch; max-width:1060px; margin:-76px auto 0; padding:14px; gap:8px}
  .bk-g{grid-column:auto}
  .bk-go{grid-column:auto; padding-inline:34px; min-height:62px}
  .bk-note{padding-top:2px}
}
.book-inline{margin:28px var(--gut) 0; border:1.5px solid var(--line)}
@media (min-width: 900px){ .book-inline{max-width:1060px; margin:36px auto 0} }

/* calendrier et voyageurs */
.pop{position:absolute; z-index:120; background:#fff; border-radius:18px; box-shadow:0 26px 60px -22px rgba(21,46,67,.5), 0 0 0 1px rgba(21,46,67,.08); padding:18px 22px 16px; width:min(700px, calc(100vw - 32px))}
.pop.pop-g{width:360px}
.sheet-bg{position:fixed; inset:0; z-index:110; background:rgba(21,46,67,.45)}
@media (max-width: 759px){
  .pop,.pop.pop-g{position:fixed; left:0; right:0; bottom:0; top:auto!important; width:auto; border-radius:22px 22px 0 0; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); max-height:90svh; overflow:auto; animation:sheet .22s ease-out}
  @keyframes sheet{from{transform:translateY(24px); opacity:.6} to{transform:none; opacity:1}}
  .pop::before{content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--line); margin:0 auto 10px}
}
@media (min-width: 760px){ .sheet-bg{background:transparent} }
.pop-head{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:2px 12px; margin-bottom:12px}
.pop-t{font-size:21px; font-weight:700; color:var(--marine)}
.pop-sum{grid-column:1; font-size:15px; color:var(--montagne)}
.pop-sum b{color:var(--ink)}
.pop-x{grid-column:2; grid-row:1 / span 2; width:40px; height:40px; border-radius:10px; border:0; background:var(--brume); font-size:22px; line-height:1; cursor:pointer}
.cal-wrap{position:relative}
.cal-arr{position:absolute; top:-6px; width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line); background:#fff; font-size:20px; cursor:pointer; z-index:1}
.cal-arr:disabled{opacity:.35; cursor:default}
.cal-prev{left:0} .cal-next{right:0}
.cal-months{display:grid; gap:28px}
@media (min-width: 760px){ .cal-months.two{grid-template-columns:1fr 1fr} }
.cal-mt{text-align:center; font-weight:700; font-size:17px; color:var(--marine); line-height:28px; margin-bottom:10px}
.cal-grid{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); row-gap:2px}
.cal-wd{font-size:12px; font-weight:600; color:var(--mute); text-align:center; padding-bottom:6px}
.cal-d{appearance:none; border:0; background:none; aspect-ratio:1; min-height:40px; border-radius:10px; font:500 16px/1 var(--f); color:var(--ink); cursor:pointer; position:relative}
.cal-d:hover:not(:disabled){background:var(--brume)}
.cal-d:disabled{color:#BCC7CD; cursor:default}
.cal-d.today::after{content:""; position:absolute; left:50%; bottom:6px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--fleuve)}
.cal-d.range,.cal-d.range:hover:not(:disabled){background:var(--soleil-clair); border-radius:0}
.cal-d.start,.cal-d.end,.cal-d.start:hover:not(:disabled),.cal-d.end:hover:not(:disabled){background:var(--marine); color:#fff; font-weight:700}
.cal-d.start{border-radius:10px 0 0 10px} .cal-d.end{border-radius:0 10px 10px 0} .cal-d.start.end{border-radius:10px}
.cal-d.start.solo{border-radius:10px}
.pop-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.stepper{display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:12px; padding:6px 0}
.stepper b{display:block; font-size:17px}
.stepper small{display:block; font-size:14px; color:var(--montagne)}
.st-b{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:#fff; font-size:22px; line-height:1; cursor:pointer}
.st-b:hover:not(:disabled){border-color:var(--marine)}
.st-b:disabled{opacity:.35; cursor:default}
.stepper output{min-width:2ch; text-align:center; font-size:21px; font-weight:700}
.pop-hint{font-size:14px; color:var(--montagne); margin-top:8px}

/* bouton collant */
.sticky-book{position:fixed; z-index:60; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; min-height:56px; border-radius:14px; background:var(--marine); color:#fff; font:700 18px/1 var(--f); text-decoration:none; box-shadow:0 10px 24px -6px rgba(21,46,67,.5); transition:opacity .2s, transform .2s}
.sticky-book.hide{opacity:0; transform:translateY(20px); pointer-events:none}
@media (min-width: 900px){ .sticky-book{left:auto; right:24px; bottom:24px; padding:0 26px} }

/* sections */
.sec{padding:60px 0}
.sec h2{font-size:clamp(32px, 7.5vw, 44px); line-height:1.05; color:var(--marine)}
.sec-head{display:grid; gap:12px; margin-bottom:26px}
.sec-head p{font-size:18px; color:var(--montagne); max-width:52ch}
.two{display:grid; gap:16px}
.kind{position:relative; display:block; border-radius:18px; overflow:hidden; text-decoration:none; color:#fff; background:var(--marine)}
.kind img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s}
.kind:hover img{transform:scale(1.03)}
.kind::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,46,67,0) 45%, rgba(21,46,67,.85) 100%)}
.k-body{position:absolute; z-index:1; left:20px; right:20px; bottom:18px; display:grid; gap:4px}
.k-name{font-size:27px; font-weight:700; line-height:1.1}
.k-meta{font-size:15px; color:#FDF0D2}
@media (min-width: 800px){ .two{grid-template-columns:1fr 1fr; gap:22px} .sec-head{grid-template-columns:1fr 1fr; align-items:end; column-gap:40px} }

/* rangée de portes */
.doors{margin-top:30px; padding:22px 0 0; border-top:1px solid var(--line)}
.doors-t{font-size:17px; font-weight:600; color:var(--marine); margin-bottom:14px}
.door-cards{display:grid; grid-auto-flow:column; grid-auto-columns:62%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 12px; margin:0 -2px; scrollbar-width:thin}
.door-cards li{scroll-snap-align:start}
@media (min-width: 700px){ .door-cards{grid-auto-columns:31%} }
@media (min-width: 1050px){ .door-cards{grid-auto-flow:row; grid-template-columns:repeat(6,minmax(0,1fr)); overflow:visible; padding:0; margin:0} }
.door-card{display:grid; gap:2px; text-decoration:none; color:var(--ink)}
.dc-media{position:relative; display:block; margin-bottom:8px}
.dc-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; transition:transform .3s}
.door-card:hover .dc-media img{transform:translateY(-2px)}
.dc-media .door{position:absolute; left:8px; top:8px; min-width:40px; height:40px; font-size:18px}
.dc-name{font-weight:700; color:var(--marine)}
.dc-cap{font-size:14px; color:var(--montagne)}
.door{display:grid; place-items:center; min-width:48px; height:48px; padding:0 8px; border-radius:10px; background:var(--soleil); color:var(--nuit); font:700 21px/1 var(--f); text-decoration:none; border:2px solid var(--nuit); box-shadow:0 2px 0 var(--nuit); transition:transform .12s}
.door.condo{background:var(--marine); color:var(--soleil); border-color:var(--soleil); box-shadow:0 2px 0 var(--nuit)}
.more{display:inline-block; margin-top:24px; font-weight:700; color:var(--marine); text-decoration-color:var(--soleil); text-decoration-thickness:3px; text-underline-offset:6px}

.berge{background:var(--brume)}
.berge-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.berge-txt p{margin-top:14px; font-size:18px; max-width:46ch}
.berge-pics{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
.berge-pics img{width:100%; height:100%; object-fit:cover; border-radius:14px; aspect-ratio:1}
.berge-pics .bp1{grid-column:1 / -1; aspect-ratio:3/2}
@media (min-width: 900px){ .berge-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:56px} }

.quotes h2{margin-bottom:24px}
.q-grid{display:grid; gap:14px}
.q-grid blockquote{margin:0; padding:24px 24px 24px 26px; border-left:6px solid var(--soleil); background:var(--soleil-clair); border-radius:0 16px 16px 0; font-size:21px; line-height:1.35; font-weight:500; color:var(--nuit)}
@media (min-width: 900px){ .q-grid{grid-template-columns:repeat(3,1fr)} }

.cta-band{background:var(--soleil)}
.cta-band h2{color:var(--nuit)}
.cta-in{display:grid; gap:18px; align-items:center}
.cta-in p{font-size:19px; margin-top:8px; color:var(--nuit)}
@media (min-width: 800px){ .cta-in{grid-template-columns:1fr auto} }

.l3{display:grid; gap:0}
.l3 a{display:grid; gap:4px; padding:20px 0; border-bottom:1px solid var(--line); text-decoration:none}
.l3 a:first-child{border-top:1px solid var(--line)}
.l3-t{font-size:24px; font-weight:700; color:var(--marine)}
.l3-d{color:var(--montagne)}
.l3 a:hover .l3-t{text-decoration:underline; text-decoration-color:var(--soleil); text-decoration-thickness:3px; text-underline-offset:5px}
@media (min-width: 800px){ .l3{grid-template-columns:repeat(3,1fr); gap:32px} .l3 a,.l3 a:first-child{border:0; border-top:3px solid var(--soleil)} }

/* nos habitations */
.intro{padding-top:40px; background:var(--brume)}
.intro h1,.res-top h1{font-size:clamp(38px, 9.5vw, 64px); line-height:1; color:var(--marine)}
.lead-p{margin-top:16px; font-size:18px; line-height:1.6}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:22px 0 4px}
.facts li{background:#fff; border-radius:12px; padding:12px 14px; display:grid; gap:2px; align-content:start}
.f-k{font-size:13px; font-weight:600; color:var(--montagne)}
.f-v{font-weight:700; color:var(--marine)}
@media (min-width: 800px){ .facts{grid-template-columns:repeat(4,1fr)} }
.block h2{margin-bottom:22px}
.block.alt{background:var(--brume)}
.gal3{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
.gal3 img{width:100%; height:100%; object-fit:cover; border-radius:14px; aspect-ratio:4/3}
.gal3 img:first-child{grid-column:1 / -1; aspect-ratio:16/10}
@media (min-width: 900px){ .gal3{grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr} .gal3 img:first-child{grid-row:1 / span 2; grid-column:1; aspect-ratio:auto} }
.cols3{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 14px}
.cols3 h3{font-size:16px; font-weight:600; background:var(--soleil-clair); color:var(--nuit); padding:8px 12px; border-radius:10px}
.cols3-txt{display:grid; gap:18px}
.cols3-txt h3{display:inline-block; margin-bottom:8px}
@media (min-width: 900px){ .cols3-txt{grid-template-columns:repeat(3,1fr)} }
.body-p{font-size:18px; max-width:70ch}

/* réserver */
.res-top{padding-top:40px; padding-bottom:40px; background:var(--brume)}
.res-bar{position:sticky; top:var(--head-h); z-index:40; background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(1.4) blur(8px); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line)}
.rb-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding-top:10px; padding-bottom:10px}
.rb-sum{appearance:none; display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 8px 8px 16px; border:0; border-radius:12px; background:var(--brume); font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; max-width:100%}
.rb-sum span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rb-edit{flex:none; background:var(--soleil); color:var(--nuit); border-radius:8px; padding:6px 10px; font-weight:700}
.rb-filter{display:flex; border:1.5px solid var(--line); border-radius:12px; padding:3px; gap:2px; background:#fff}
.rb-filter button{appearance:none; border:0; background:none; border-radius:9px; padding:8px 14px; font-size:15px; font-weight:600; color:var(--marine); cursor:pointer}
.rb-filter button[aria-pressed="true"]{background:var(--marine); color:#fff}
.units{padding-top:28px}
.u-head{margin:12px 0 18px; padding-top:12px; scroll-margin-top:calc(var(--head-h) + 80px)}
.unit{scroll-margin-top:calc(var(--head-h) + 80px)}
.u-group{font-size:clamp(28px, 6.5vw, 36px)!important}
.u-group span{display:block; font-size:16px; font-weight:500; color:var(--montagne); letter-spacing:0; margin-top:6px}
.u-grid{display:grid; gap:26px; margin-bottom:44px}
@media (min-width: 700px){ .u-grid{grid-template-columns:1fr 1fr} }
@media (min-width: 1050px){ .u-grid{grid-template-columns:repeat(3,1fr)} }
.unit{display:flex; flex-direction:column}
.u-media{position:relative}
.u-media img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px; transition:filter .2s}
.plate{position:absolute; left:12px; top:12px; min-width:54px; height:54px; padding:0 10px; display:grid; place-items:center; border-radius:10px; background:var(--soleil); color:var(--nuit); font:700 28px/1 var(--f); border:2px solid var(--nuit); box-shadow:0 2px 0 var(--nuit)}
.u-condo .plate{background:var(--marine); color:var(--soleil); border-color:var(--soleil); box-shadow:0 2px 0 var(--nuit)}
.u-full{position:absolute; right:12px; bottom:12px; background:rgba(21,46,67,.9); color:#fff; font-size:14px; font-weight:600; padding:7px 11px; border-radius:9px}
.u-body{display:flex; flex-direction:column; gap:8px; padding-top:14px; flex:1}
.u-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.unit .u-name{font-size:24px; color:var(--marine)}
.u-cap{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:600; color:var(--montagne)}
.u-cap svg{width:19px; height:19px; fill:none; stroke:var(--fleuve); stroke-width:1.8; stroke-linecap:round}
.u-feat{display:flex; flex-wrap:wrap; gap:6px}
.u-feat li{font-size:14px; padding:5px 10px; border-radius:8px; background:var(--brume); color:var(--ink)}
.u-go{margin-top:auto; width:100%}
.unit.too-small .u-media img{filter:grayscale(.7) brightness(.82)}
.unit.too-small .u-body{opacity:.5}
.unit.too-small .u-go{background:var(--brume); color:var(--montagne)}
.steps{background:var(--brume)}
.steps h2{margin-bottom:20px}
.step-list{list-style:none; counter-reset:s; display:grid; gap:12px}
.step-list li{counter-increment:s; position:relative; padding:16px 16px 16px 62px; background:#fff; border-radius:12px; font-size:17px}
.step-list li::before{content:counter(s); position:absolute; left:14px; top:14px; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:var(--soleil); color:var(--nuit); font-weight:700}
.note{margin-top:18px; color:var(--montagne)}
.note a{color:var(--marine); font-weight:700}

/* pied */
.site-foot{background:var(--nuit); color:#DCE6EC; padding:52px 0 calc(100px + env(safe-area-inset-bottom)); font-size:16px}
.foot-in{max-width:1180px; margin:0 auto; padding:0 var(--gut); display:grid; gap:24px}
.foot-logo{width:220px; border:1px solid rgba(244,182,63,.55); border-radius:9px}
.social{display:flex; gap:16px; margin-top:14px}
.foot-col{display:grid; gap:8px; align-content:start}
.foot-col a{color:#fff; text-underline-offset:3px}
.foot-col .btn{color:var(--nuit); text-decoration:none; width:max-content}
.foot-gs{display:flex; gap:16px; align-items:center; border-top:1px solid rgba(255,255,255,.12); padding-top:22px}
.foot-gs img{width:110px}
.foot-gs a{color:#fff}
@media (min-width: 900px){ .foot-in{grid-template-columns:auto 1fr 1fr; column-gap:56px} .foot-gs{grid-column:1 / -1} .site-foot{padding-bottom:52px} }


/* page accommodations */
.cols3-txt p + p{margin-top:4px}
.kit-list{list-style:disc; padding-left:20px; display:grid; gap:2px; margin-bottom:6px}

/* page à propos / about us */
.story{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:center}
.story img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px}
.story .body-p + .body-p{margin-top:14px}
.sig{margin-top:20px; padding-top:14px; border-top:3px solid var(--soleil); width:max-content; max-width:100%; font-weight:600; color:var(--marine)}
@media (min-width: 900px){ .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px} .story.flip img{order:-1} }


/* page faq */
.faq-intro{padding-bottom:44px}
.faq-intro .lead-p{max-width:60ch}
.faq-toc{margin-top:22px}
.faq-toc ul{display:flex; flex-wrap:wrap; gap:8px}
.faq-toc a{display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:10px; background:var(--soleil-clair); color:var(--nuit); font-weight:600; font-size:16px; text-decoration:none}
.faq-toc a:hover{background:var(--soleil)}
.faq-sec{scroll-margin-top:var(--head-h)}
.faq-cat{font-size:clamp(28px, 6.5vw, 36px); font-weight:700; line-height:1.1; letter-spacing:-.015em; color:var(--marine); margin-bottom:18px}
.faq-list{background:var(--white); border-radius:12px; border:1px solid var(--line); overflow:hidden}
.faq-q + .faq-q{border-top:1px solid var(--brume)}
.faq-q summary{display:flex; align-items:center; gap:16px; padding:16px 18px; min-height:56px; cursor:pointer; list-style:none}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::marker{content:""}
.faq-q summary:hover{background:var(--brume)}
.faq-q summary:focus-visible{outline-offset:-3px; border-radius:12px}
.faq-q summary h2{flex:1; margin:0; font-size:18px; line-height:1.35; font-weight:700; letter-spacing:0; color:var(--marine)}
.faq-q summary::after{content:"+"; flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; border:1.5px solid var(--marine); color:var(--marine); font:700 22px/1 var(--f)}
.faq-q[open] summary::after{content:"\2212"}
.faq-a{padding:0 18px 18px; font-size:17px; line-height:1.6; max-width:70ch}
.faq-a p + p, .faq-a p + ul{margin-top:10px}
.faq-a a{color:var(--marine); font-weight:700; overflow-wrap:anywhere}
.cta-band .book-inline{margin-top:28px}
@media (min-width: 800px){ .faq-q summary{padding:18px 22px} .faq-a{padding:0 22px 20px} .faq-q summary h2{font-size:19px} }

/* page contact */
.ct-intro{padding-bottom:48px}
.intro .ct-name{margin-top:12px; font-size:18px; line-height:1.35; font-weight:600; color:var(--montagne); letter-spacing:0}
.ct-card{display:grid; margin-top:24px; background:var(--white); border-radius:16px; border-top:4px solid var(--soleil); overflow:hidden}
.ct-card li{display:grid; gap:4px; align-content:start; padding:18px 20px}
.ct-card li + li{border-top:1px solid var(--brume)}
.ct-card .f-v{font-size:18px; line-height:1.4; overflow-wrap:anywhere}
.ct-card a{color:var(--marine); text-underline-offset:4px; text-decoration-thickness:2px}
.ct-card a:hover{text-decoration-color:var(--soleil)}
.f-more{font-size:15px; overflow-wrap:anywhere}
.f-more a{font-weight:600}
.f-go{display:inline-flex; align-items:center; min-height:44px; margin-bottom:-10px; font-weight:700; font-size:16px}
@media (min-width: 800px){
  .ct-card{grid-template-columns:1.15fr .85fr 1.1fr}
  .ct-card li{padding:22px 26px}
  .ct-card li + li{border-top:0; border-left:1px solid var(--brume)}
}
.ct-list{list-style:disc; padding-left:22px; display:grid; gap:4px; margin:12px 0; font-size:18px}
.ct-mail{margin-top:14px; font-size:18px}
.ct-mail a{color:var(--marine); font-weight:700; overflow-wrap:anywhere; text-underline-offset:4px}
.ct-help{margin-top:28px}
.ct-help .l3-d{font-size:16px; line-height:1.5}
.ct-end{margin-top:28px; font-size:18px; max-width:70ch}
.ct-end + .ct-end{margin-top:6px}
.ct-end a{color:var(--marine); font-weight:700; overflow-wrap:anywhere; text-underline-offset:4px}
.ct-avant .body-p + .body-p{margin-top:14px}
.ct-groups h2{font-size:clamp(26px, 5.5vw, 34px); line-height:1.15; color:var(--marine); max-width:22ch}
.ct-groups h2 + .body-p{margin-top:16px}
#sejour .story img, .ct-groups .story img{aspect-ratio:3/2}
.ct-sub{margin:26px 0 8px; font-size:21px; line-height:1.25; color:var(--marine)}
#sejour h2 + .ct-sub{margin-top:18px}
.ct-in{color:var(--marine); font-weight:700; overflow-wrap:anywhere; text-underline-offset:4px}
.ct-note{margin-top:22px; padding:14px 16px; border-radius:12px; background:var(--soleil-clair); color:var(--nuit); font-size:16px; line-height:1.5; max-width:60ch}
.ct-col{max-width:760px}

/* page spa des neiges */
.spa-intro .wrap,#services .wrap{max-width:1100px}
.spa-intro .lead-p{max-width:none}
.spa-offer{display:grid; gap:12px; margin-top:24px; padding:20px 22px; background:var(--soleil-clair); border-radius:16px; align-items:center}
.spa-num{margin:0; font-weight:700; color:var(--marine); font-variant-numeric:tabular-nums; font-size:clamp(56px, 14vw, 88px); line-height:1; letter-spacing:-.02em; white-space:nowrap}
.spa-txt p{font-size:18px; line-height:1.45; font-weight:600; color:var(--nuit)}
.spa-txt .spa-cond{margin-top:6px; font-size:17px; font-weight:400}
@media (min-width: 800px){ .spa-offer{grid-template-columns:auto minmax(0,1fr); gap:28px; padding:22px 28px} }
#services{padding-top:72px; padding-bottom:72px}
.spa-sub{font-size:clamp(26px, 5.5vw, 34px); line-height:1.15; font-weight:700; color:var(--marine)}
.spa-list{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.spa-list li{padding:14px 20px; border-radius:12px; background:var(--brume); color:var(--nuit); font-weight:600; font-size:19px}
.spa-more{display:grid; gap:14px; justify-items:start; margin-top:40px; padding-top:32px; border-top:1px solid var(--line)}
.spa-more p{font-size:19px}
.spa-site{font-size:clamp(20px, 4.6vw, 24px); padding:18px 28px; overflow-wrap:anywhere}
@media (min-width: 900px){ #services{padding-top:96px; padding-bottom:96px} .spa-more{grid-template-columns:auto auto; align-items:center; justify-content:start; gap:24px} }

/* page politique de confidentialité */
.pol-intro{padding-bottom:44px}
.pol-date{margin-top:14px; font-size:17px; font-weight:600; color:var(--montagne)}
.pol-toc{margin-top:26px; background:var(--white); border-radius:14px; padding:18px 20px 10px}
.pol-toc-t{font-size:18px; font-weight:700; color:var(--marine); margin-bottom:4px}
.pol-toc a{display:flex; align-items:center; min-height:44px; padding:8px 0; border-bottom:1px solid var(--brume); color:var(--marine); font-weight:600; font-size:16px; line-height:1.3; text-decoration:none}
.pol-toc li:last-child a{border-bottom:0}
.pol-toc a:hover{text-decoration:underline; text-decoration-color:var(--soleil); text-decoration-thickness:3px; text-underline-offset:5px}
@media (min-width: 800px){ .pol-toc{padding:22px 26px 14px} .pol-toc ul{columns:2; column-gap:32px} .pol-toc li{break-inside:avoid} }
.pol p,.pol-list{font-size:18px; line-height:1.6; max-width:70ch}
.pol p + p,.pol-list + p{margin-top:14px}
.pol-pre{padding-bottom:8px}
.pol-sec{padding-top:44px; scroll-margin-top:calc(var(--head-h) + 12px)}
.pol .pol-sec h2{font-size:clamp(26px, 5.5vw, 34px); line-height:1.15; color:var(--marine); margin-bottom:16px}
.pol h3{font-size:20px; line-height:1.3; color:var(--marine); margin:28px 0 10px}
.pol-list{list-style:disc; padding-left:24px; display:grid; gap:6px; margin:12px 0 0}
.pol-list li::marker{color:var(--marine)}
.pol a{color:var(--marine); font-weight:700; overflow-wrap:anywhere; text-underline-offset:4px}
.pol-addr{font-style:normal; margin:16px 0; padding:18px 20px; background:var(--brume); border-radius:14px; border-left:6px solid var(--soleil)}
.pol-addr p + p{margin-top:8px}
.pol .pol-back{display:flex; width:max-content; margin-top:48px; color:#fff; text-decoration:none}

/* accueil v2 (15 oct. 2026) */
:root{--head-h:78px}
.brand img{height:58px}
.hero-photo::after{background:linear-gradient(180deg, rgba(21,46,67,0) 55%, rgba(21,46,67,.72) 100%)}
.hero-txt{padding-bottom:68px}
.bk-f{min-height:68px; padding:10px 16px}
.bk-lab{font-size:14px}
.bk-val{font-size:18.5px}
.bk-go{font-size:20px}
.q-grid{align-items:stretch}
.q-card{margin:0; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:var(--soleil-clair)}
.q-card img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.q-card blockquote{flex:1; border-radius:0}
.sec.cta-band{padding:34px 0}
.cta-band h2{font-size:clamp(28px, 6vw, 36px)}
.cta-in{gap:14px}
.cta-in p{font-size:18px; margin-top:4px}
@media (min-width: 900px){
  .hero-txt{padding-bottom:104px}
  .bk-go{min-height:68px}
}
@media (min-width: 1100px){
  :root{--head-h:108px}
  .brand img{height:82px}
  .site-nav a{font-size:17.5px; padding:11px 13px}
  .site-nav a.nav-cta{padding:12px 20px}
}

/* page faq : photos */
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:22px}
.faq-pic{margin:0}
.faq-pic img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px}
.faq-body{min-width:0}
@media (min-width: 900px){
  .faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:start}
  .faq-grid.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .faq-grid.flip .faq-pic{order:2}
  .faq-pic img{aspect-ratio:4/5}
}
.intro-slim{padding:28px 0 32px}
.intro-slim .book-inline{margin-top:18px}
@media (min-width: 900px){ .intro-slim{padding:32px 0 36px} .intro-slim .book-inline{margin-top:20px} .intro-slim .wrap.narrow{max-width:1060px; padding:0} }

/* popup infolettre */
.foot-news{margin-top:14px}
.foot-news a{color:var(--soleil); font-weight:700; text-underline-offset:4px}
.news{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:16px}
.news-bg{position:absolute; inset:0; background:rgba(21,46,67,.62)}
.news-box{position:relative; width:100%; max-width:440px; max-height:calc(100dvh - 32px); overflow:auto; background:var(--white); border-radius:18px; border-top:4px solid var(--soleil)}
.news-img{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:0% 0%}
.news-body{padding:22px 22px 20px}
.news-t{font-size:clamp(24px, 6vw, 28px); font-weight:700; line-height:1.15; letter-spacing:-.015em; color:var(--marine)}
.news-p{margin-top:10px; font-size:17px; line-height:1.5}
.news-form{margin-top:18px}
.news-lab{display:block; font-size:15px; font-weight:600; color:var(--marine); margin-bottom:6px}
.news-row{display:grid; gap:10px}
.news-row input{width:100%; min-height:52px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; font:400 17px/1.4 var(--f); color:var(--ink); background:var(--white)}
.news-row input:focus-visible{outline:3px solid var(--fleuve); outline-offset:1px; border-color:var(--fleuve)}
.news-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.news-msg{margin-top:16px; padding:12px 14px; border-radius:12px; font-weight:600; line-height:1.4}
.news-msg.is-ok{background:var(--soleil-clair); color:var(--nuit)}
.news-msg.is-ko{background:var(--brume); color:var(--marine)}
.news-fine{margin-top:12px; font-size:14px; color:var(--montagne)}
.news-fine a{color:var(--marine)}
.news-x{position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:12px; border:0; background:rgba(255,255,255,.92); color:var(--nuit); font:700 26px/1 var(--f); cursor:pointer}
html.news-on{overflow:hidden}
@media (min-width: 760px){
  .news-box{max-width:880px; display:grid; grid-template-columns:1.2fr 1fr}
  .news-img{height:100%; aspect-ratio:auto; object-position:22% 0%}
  .news-body{padding:36px 32px 28px; align-self:center}
  .news-row{grid-template-columns:1fr auto}
}

/* berge, mise en page équilibrée */
.berge-head{display:grid; gap:12px; margin-bottom:26px}
.berge-head h2{font-size:clamp(34px, 7vw, 52px)}
.berge-head p{font-size:19px; line-height:1.55; max-width:52ch}
.berge-row{display:grid; gap:22px}
.berge-row li{display:grid; gap:4px}
.berge-row img{width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:16px; margin-bottom:8px}
.berge-row .bc-bbq{object-position:50% 45%}
.bc-t{font-size:20px; font-weight:700; color:var(--marine)}
.bc-d{color:var(--montagne)}
@media (min-width: 800px){
  .berge-head{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:end; column-gap:48px; margin-bottom:34px}
  .berge-row{grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
}

/* animations d'apparition (accueil) */
html.anim [data-anim]{opacity:0; transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s)}
html.anim [data-anim="up"]{transform:translateY(32px)}
html.anim [data-anim="left"]{transform:translateX(-56px)}
html.anim [data-anim="right"]{transform:translateX(56px)}
html.anim [data-anim].in{opacity:1; transform:none}
html.anim .hero-img{transform:scale(1.08); transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
html.anim-go .hero-img{transform:scale(1)}
.q-card img{transition:transform .6s ease}
.q-card:hover img{transform:scale(1.03)}
/* dévoilement des photos */
html.anim .kind[data-anim] img, html.anim .berge-row [data-anim] img, html.anim .q-card[data-anim] img, html.anim .door-cards [data-anim] img{clip-path:inset(18% 0 0 0); transform:scale(1.08); transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d, 0s)}
html.anim .in img{clip-path:inset(0 0 0 0)!important; transform:none!important}
.sec, .hero{overflow-x:clip}
@media (max-width: 799px){
  html.anim [data-anim="left"]{transform:translateX(-36px)}
  html.anim [data-anim="right"]{transform:translateX(36px)}
  html.anim .berge-row li:nth-child(odd), html.anim .q-grid .q-card:nth-child(odd){transform:translateX(-40px) rotate(-1.5deg)}
  html.anim .berge-row li:nth-child(even), html.anim .q-grid .q-card:nth-child(even){transform:translateX(40px) rotate(1.5deg)}
  html.anim .door-cards li[data-anim]{transform:translateX(60px)}
  html.anim .berge-row li, html.anim .q-card{--d:0s!important}
  html.anim [data-anim].in, html.anim .berge-row li.in:nth-child(n), html.anim .q-grid .q-card.in:nth-child(n), html.anim .door-cards li[data-anim].in{transform:none}
}
@media (prefers-reduced-motion: reduce){ html.anim [data-anim]{opacity:1; transform:none} }

/* version plus mince : berge, citations, bas de page */
.berge-head{display:block; margin-bottom:22px}
.berge-head p{margin-top:10px; max-width:62ch}
@media (min-width: 800px){ .berge-head{display:block; margin-bottom:28px} .berge-head p{font-size:19px} }
.q-card img{aspect-ratio:16/10}
.q-grid blockquote{padding:14px 18px 15px 18px; border-left-width:5px; font-size:18px; line-height:1.35}
.q-grid{gap:16px}
.site-foot{padding:30px 0 calc(92px + env(safe-area-inset-bottom)); font-size:15px}
.foot-in{gap:16px}
.foot-logo{width:150px}
.social{flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:10px}
.foot-news{margin-top:0}
.foot-col{gap:4px}
.foot-col .btn{margin-bottom:4px}
.foot-gs{padding-top:14px; font-size:14px}
@media (min-width: 900px){ .site-foot{padding-bottom:26px} .foot-in{column-gap:48px; row-gap:18px; align-items:start} }
@media (max-width: 899px){ .foot-in > .foot-col:nth-child(3){display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px} .foot-col .btn{margin-bottom:0} .site-foot{padding-bottom:calc(84px + env(safe-area-inset-bottom))} }

/* ---- lot 15 oct. : pages plus minces ---- */
/* Nos habitations */
.block{padding:40px 0}
.block h2{margin-bottom:16px}
.block .body-p{margin-top:18px}
.incl{display:grid; gap:6px 28px; margin-top:12px; max-width:900px}
.incl li{display:flex; gap:10px; align-items:baseline; font-size:17px; line-height:1.4}
.incl li span{flex:0 0 1.4em; text-align:center}
@media (min-width: 760px){ .incl{grid-template-columns:1fr 1fr} }
.cols3{margin:16px 0 10px}
.cols3-txt{gap:12px}
#berge .btn.center{margin-top:18px}
@media (min-width: 900px){ .gal3{grid-template-rows:repeat(2,215px)} .gal3 img{aspect-ratio:auto!important; height:100%} .block{padding:48px 0} }
/* Réserver : titre sur une ligne */
.res-top h1{font-size:clamp(32px, 6vw, 52px)}
.res-top .wrap{max-width:1180px}
@media (min-width: 900px){ .res-top h1{white-space:nowrap} }
.step-key{display:block; margin-top:6px; color:var(--nuit)}
/* Spa : liste sur une ligne, sections plus serrées */
.spa-list{gap:8px; margin-top:16px}
.spa-list li{padding:9px 14px; font-size:16px; white-space:nowrap}
@media (min-width: 900px){ #services{padding-top:44px; padding-bottom:44px} #services .wrap{max-width:1180px} }
.spa-more{margin-top:24px; padding-top:20px}
.spa-offer{margin-top:18px}
/* À propos : Groupe Séjour */
.gs-band .body-p{margin-top:10px}
.gs-logos{display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:14px; margin:22px 0 18px; max-width:900px}
.gs-logos a{display:grid; justify-items:center; gap:8px; text-decoration:none; color:var(--marine); font-weight:600; font-size:15px; text-align:center; line-height:1.25}
.gs-logos img{width:88px; height:88px; border-radius:18px; border:1px solid var(--line); transition:transform .25s}
.gs-logos a:hover img{transform:translateY(-3px)}
/* FAQ : photos moins zoomées */
.faq-pic.dezoom img{aspect-ratio:auto!important; height:auto; object-fit:contain}
/* Contact : présentation en liste, même grosseur de police */
.ct-card{grid-template-columns:1fr!important}
.ct-card li{grid-template-columns:110px minmax(0,1fr); column-gap:16px; align-items:baseline; padding:14px 20px!important; border-left:0!important}
.ct-card li + li{border-top:1px solid var(--brume)!important}
.ct-card .f-k{font-size:15px}
.ct-card .f-v{font-size:17px}
.ct-card .f-go{grid-column:2; min-height:0; margin:2px 0 0; font-size:16px}
.ct-intro{padding-bottom:36px}
.ct-help{display:grid!important; grid-template-columns:1fr!important; gap:0!important; margin-top:18px; max-width:760px}
.ct-help a, .ct-help a:first-child{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; padding:14px 0; border:0!important; border-bottom:1px solid var(--line)!important}
.ct-help a:first-child{border-top:1px solid var(--line)!important}
.ct-help a::after{content:"›"; grid-column:2; grid-row:1 / span 2; align-self:center; font-size:28px; color:var(--marine)}
.ct-help .l3-t{font-size:19px}
.ct-help .l3-d{font-size:16px}
.ct-end{margin-top:18px; font-size:17px}
@media (max-width: 599px){ .ct-card li{grid-template-columns:72px minmax(0,1fr); column-gap:12px; padding:12px 16px!important} .ct-card .f-v{font-size:16px} }

/* Pied de page : icônes des établissements sur la ligne Groupe Séjour */
.foot-gs{flex-wrap:wrap; gap:10px 18px}
.foot-gs p{margin:0}
.foot-gs .foot-icons{display:flex; gap:10px; list-style:none; margin:0; padding:0}
.foot-gs .foot-icons li{margin:0; padding:0}
.foot-gs .foot-icons a{display:block; line-height:0; border-radius:9px; transition:transform .15s ease, opacity .15s ease; opacity:.92}
.foot-gs .foot-icons a:hover,.foot-gs .foot-icons a:focus-visible{transform:translateY(-2px); opacity:1}
.foot-gs .foot-icons img{width:36px; height:36px; border-radius:9px; display:block; border:1px solid rgba(255,255,255,.25)}
@media (max-width: 599px){ .foot-gs .foot-icons img{width:34px; height:34px} .foot-gs .foot-icons{gap:8px} }