/* ============================================================
   DIRECTION ARTISTIQUE — quiet luxury, deux tons (noir / gris)
   Police unique : IBM Plex Sans (Light). Écrit une seule fois.
   ============================================================ */
:root{
  --bg:#ffffff;
  --ink:#161513;
  --grey:#8f8c87;
  --grey-d:#56544f;
  --line:#ececea;
  --line-d:#d9d8d4;
  --maxw:640px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"IBM Plex Sans",-apple-system,system-ui,Segoe UI,Roboto,sans-serif;
  font-weight:300;font-size:16px;line-height:1.72;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
a{color:var(--ink);text-decoration:none}
::selection{background:#eceae5}

/* ---- top bar ---- */
.bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:54px}
.bar .word{font-weight:500;letter-spacing:4px;font-size:14px;text-transform:uppercase}
.bar .back{font-size:12px;letter-spacing:1px;color:var(--grey-d)}
.bar .back:hover{color:var(--ink)}
.langs{display:flex}
.langs button{background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:11px;letter-spacing:1.5px;color:var(--grey);padding:0 9px;font-weight:400}
.langs button+button{border-left:1px solid var(--line-d)}
.langs button.active{color:var(--ink)}
.langs button:hover{color:var(--ink)}

/* ---- hero (pleine largeur) ---- */
.hero{display:block;width:100%;height:48vh;min-height:280px;max-height:480px;object-fit:cover}

/* ---- home ---- */
.home-head{padding:42px 0 0;text-align:center}
.kicker{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--grey);font-weight:400}
.nom{font-size:clamp(30px,8vw,40px);font-weight:300;letter-spacing:.3px;line-height:1.08;margin:16px 0 0}
.bienvenue{text-align:center;font-size:16px;color:var(--grey-d);max-width:46ch;margin:22px auto 0}

.ess{margin:38px 0 0;border-top:1px solid var(--line)}
.ess .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 2px;border-bottom:1px solid var(--line)}
.ess .k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--grey)}
.ess .v{font-size:17px;font-weight:300;text-align:right}
.ess .v a{border-bottom:1px solid var(--line-d)}
.ess .v a:hover{border-color:var(--ink)}

.navlist{margin:34px 0 0}
.navlist a{display:flex;justify-content:space-between;align-items:center;
  padding:18px 2px;border-bottom:1px solid var(--line);font-size:19px;font-weight:300;letter-spacing:.2px}
.navlist a:first-child{border-top:1px solid var(--line)}
.navlist .lbl{display:flex;align-items:baseline;gap:16px}
.navlist .idx{font-size:12px;color:var(--grey);letter-spacing:1px;font-variant-numeric:tabular-nums;min-width:20px}
.navlist .chev{color:var(--grey);font-size:14px}
.navlist a:hover .chev{color:var(--ink)}
.navlist a:hover .idx{color:var(--ink)}

/* ---- section ---- */
.sec-head{padding:38px 0 0;text-align:center}
.kicker-chip{display:inline-block;border:1px solid var(--line-d);border-radius:999px;
  padding:6px 15px;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--grey-d)}
.sec-title{font-size:clamp(26px,7vw,32px);font-weight:300;letter-spacing:.2px;line-height:1.1;margin:16px 0 0}
.sec-intro{font-size:16px;color:var(--grey-d);max-width:44ch;margin:14px auto 0}
.sec-body{padding:34px 0 10px}
.sec-body p{margin:12px 0}
.sec-body .small{font-size:12.5px;color:var(--grey)}
.sec-body ul,.sec-body ol{padding-left:20px;margin:12px 0}
.sec-body li{margin:7px 0}
.sec-body strong{font-weight:500}
.sec-body a.ln,.sec-body a{border-bottom:1px solid var(--line-d)}
.sec-body a:hover{border-color:var(--ink)}

.bh{font-size:21px;font-weight:300;letter-spacing:.2px;margin:32px 0 4px}
.bhh{font-size:15px;font-weight:500;margin:20px 0 2px;color:var(--grey-d)}
.ph{display:block;width:auto;max-width:100%;max-height:460px;height:auto;margin:20px auto;border:1px solid var(--line)}
.note{border-left:1px solid var(--line-d);padding:3px 0 3px 16px;margin:20px 0}
.note .lab{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.note.key{border-left-color:var(--ink)}
.note.key .lab{color:var(--ink)}
.code{font-size:30px;font-weight:300;letter-spacing:7px}
.hr{height:1px;background:var(--line);margin:34px 0}
/* étapes en cartes */
.step-card{border:1px solid var(--line-d);border-radius:16px;padding:20px 18px 22px;margin:20px 0;background:#fff}
.step-card .ph{margin:14px auto;border-radius:8px}
.step-card>*:last-child{margin-bottom:0}
.step-head{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.step-head .badge{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:400}
.step-head .stitle{font-size:20px;font-weight:300;letter-spacing:.2px;line-height:1.2}
.btnwrap{text-align:center;margin:26px 0 6px}
.btn{display:inline-block;border:1px solid var(--ink);background:none;cursor:pointer;
  font-family:inherit;color:var(--ink);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:400;padding:13px 24px}
.btn:hover{background:var(--ink);color:#fff}

.checklist{margin-top:6px;border-top:1px solid var(--line)}
.ck{padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55}

/* wifi */
.wifi{margin-top:10px}
.field{text-align:center;padding:16px 0}
.field .lab{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--grey)}
.field .val{font-size:23px;font-weight:300;letter-spacing:.5px;word-break:break-all;margin-top:5px}
.field .btn{margin-top:14px}

/* equip */
.equip-row{display:flex;justify-content:space-between;align-items:center;
  padding:19px 2px;border-bottom:1px solid var(--line);font-size:18px;font-weight:300}
.equip-row:first-of-type{border-top:1px solid var(--line)}
.equip-row .chev{color:var(--grey);font-size:14px}
.equip-row:hover .chev{color:var(--ink)}

/* quartier */
.filters{display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;margin:6px 0 4px}
.filters button{background:none;border:0;border-bottom:1px solid transparent;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--grey);padding:3px 0;font-weight:400}
.filters button.active{color:var(--ink);border-bottom-color:var(--ink)}
.filters button:hover{color:var(--ink)}
.place{padding:22px 0;border-top:1px solid var(--line)}
.place:last-child{border-bottom:1px solid var(--line)}
.pn{font-size:20px;font-weight:300;letter-spacing:.2px}
.pmeta{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--grey);margin:4px 0 7px}
.pnote{font-size:14px;color:var(--grey-d);margin-bottom:9px}
.place a{font-size:13px;border-bottom:1px solid var(--line-d)}
.place a:hover{border-color:var(--ink)}

/* footer + contact */
.foot{text-align:center;padding:54px 0 46px;color:var(--grey)}
.foot .line{width:34px;height:1px;background:var(--line-d);margin:0 auto 16px}
.foot .msg{font-size:14px;letter-spacing:.3px}
.foot .msg a{color:var(--grey-d);border-bottom:1px solid var(--line-d)}
.foot .msg a:hover{color:var(--ink)}
.contact{position:fixed;right:18px;bottom:18px;z-index:60;background:var(--ink);color:#fff;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:400;
  padding:13px 19px;border-radius:999px;box-shadow:0 10px 28px -12px rgba(0,0,0,.5)}
.contact:hover{background:#000}