@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/cormorant-700.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-600.woff2') format('woff2')}

:root{
  /* Charte La Couronne : parme et or de la couronne */
  --bg:#f5f3f7;
  --surface:#ffffff;
  --ink:#2a2331;
  --muted:#655a70;
  --parme:#443951;
  --parme-2:#3a3046;
  --gold:#d4b476;
  --gold-press:#c6a462;
  --gold-ink:#8a6a2c;      /* or lisible sur fond clair */
  --on-parme:#f4f1f6;
  --accent:#443951;
  --accent-press:#2f2639;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;

  --t-display:clamp(36px,6vw,96px);
  --t-h2:clamp(28px,3vw,46px);
  --t-lg:clamp(22px,2.2vw,32px);
  --t-body:17px;
  --t-small:14px;

  --m:clamp(16px,3vw,48px);
  --gap:clamp(16px,2.2vw,32px);
  --section:clamp(110px,12vw,190px);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms;--t-hover:180ms;--t-ui:240ms;--t-reveal:800ms;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd,figure{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
::selection{background:var(--parme);color:var(--on-parme)}

/* Titres façon Couronne : capitales serif, seconde ligne dorée */
.h2{font:600 var(--t-h2)/1.02 var(--serif);text-transform:uppercase;letter-spacing:.01em;color:var(--parme)}
.h2 .l2{display:block;color:var(--gold-ink)}
.sombre .h2{color:var(--on-parme)}
.sombre .h2 .l2{color:var(--gold)}
footer .h2{color:var(--on-parme)}
footer .h2 .l2{color:var(--gold)}
.op55{object-position:55% 50%}
.op60{object-position:60% 50%}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;padding:0 28px;border:0;border-radius:0;background:var(--gold);color:var(--parme);font:500 var(--t-body)/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background var(--t-hover) var(--ease-out),transform var(--t-press) var(--ease-out)}
.btn:hover{background:var(--gold-press)}
.btn:active{transform:scale(.98)}
.btn .fl{transition:transform var(--t-ui) var(--ease-out)}
.btn:hover .fl{transform:translateX(4px)}
.btn.parme{background:var(--parme);color:var(--on-parme)}
.btn.parme:hover{background:var(--accent-press)}
.lien{font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px;transition:color var(--t-hover)}
.lien:hover{color:var(--gold-ink)}

/* Bandeau information */
.info{background:var(--parme-2);color:var(--on-parme);text-align:center;font-size:var(--t-small);padding:9px var(--m)}
.info a{color:var(--gold);font-weight:500}

/* ---------- Héros ---------- */
.hero{position:relative;min-height:calc(100svh - 160px);display:flex;flex-direction:column;color:#fff;overflow:hidden}
.hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 45%;animation:zoom 24s var(--ease-soft) forwards}
.hero::after{content:"";position:absolute;inset:0;background:rgba(28,22,34,.5)}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--m) 0}
.logo{flex:none;display:block}
.logo img{height:120px;width:auto}
.nav > ul{display:flex;align-items:center;gap:30px}
.nav > ul a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;font-weight:500;transition:text-decoration-color var(--t-ui)}
.nav > ul a:hover{text-decoration-color:var(--gold)}
.nav .btn{min-height:46px;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.marque{display:flex;flex-wrap:nowrap;align-items:center;gap:24px}
.drapeaux{display:flex;align-items:center;gap:4px}
.drapeaux a,.drapeaux .cur{display:inline-flex;padding:8px;line-height:0}
.drapeaux svg{display:block;width:30px;height:20px;border-radius:2px}
.drapeaux a svg{opacity:.78;transition:opacity var(--t-hover),transform var(--t-ui) var(--ease-out)}
.drapeaux a:hover svg,.drapeaux a:focus-visible svg{opacity:1;transform:translateY(-2px)}
.drapeaux .cur svg{outline:2px solid var(--gold);outline-offset:3px}
.hero-txt{position:relative;z-index:2;margin:auto;text-align:center;padding:24px var(--m) 140px}
.hero h1{font:600 var(--t-display)/1 var(--serif);text-transform:uppercase;letter-spacing:.01em}
.hero h1 .l2{display:block;color:var(--gold)}
.hero-txt p{font:500 var(--t-lg)/1.3 var(--serif);margin:28px auto 0;max-width:36ch}

/* Module de réservation, posé à cheval sur le héros */
.booking{position:relative;z-index:5;margin:-96px var(--m) 0;display:flex;justify-content:center}
/* ---------- Module de réservation ---------- */
.resa{background:#e3dee9;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.resa > .f{background:var(--surface)}
.f{appearance:none;border:0;background:none;text-align:left;padding:16px 18px;cursor:pointer;min-height:76px;transition:background var(--t-hover) var(--ease-out)}
.resa > .f:hover,.resa > .f.on{background:#f0edf4}
.f .k{display:block;font-size:var(--t-small);color:var(--muted)}
.f .v{display:block;font:600 22px/1.2 var(--serif);color:var(--parme);margin-top:4px;white-space:nowrap}
.f .v.vide{color:#76637a;font-weight:500}
.ad{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#f5f3f7}
.ad .k{font-size:var(--t-small);color:var(--muted)}
.step{display:flex;align-items:center;gap:14px}
.step button{width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:var(--parme);font-size:22px;line-height:1;cursor:pointer;transition:background var(--t-hover),transform var(--t-press)}
.step button:hover{background:#e6e1ec}.step button:active{transform:scale(.92)}
.step button:disabled{opacity:.35;cursor:default}
.step output{font:600 22px/1 var(--serif);color:var(--parme);min-width:4.6em;text-align:center}
.resa .btn{grid-column:1/-1;min-height:60px;justify-content:space-between}
.resa .btn small{font-size:var(--t-small);font-weight:400;opacity:.85}

.cal{position:absolute;right:0;bottom:calc(100% + 12px);z-index:10;background:#fff;padding:22px 24px 16px;box-shadow:0 24px 60px rgba(42,26,44,.28);display:none} /* taste-skill-ignore : dialogue flottant */
.cal.ouvert{display:block;animation:pop var(--t-ui) var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cal-h button{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);color:var(--parme);font-size:22px;cursor:pointer}
.cal-h button:disabled{opacity:.3;cursor:default}
.cal-m{display:flex;gap:32px}
.mois h3{font:600 22px/1.2 var(--serif);color:var(--parme);text-align:center;margin:-34px 0 12px;text-transform:capitalize}
.g{display:grid;grid-template-columns:repeat(7,42px);row-gap:2px}
.dn{font-size:var(--t-small);color:var(--muted);text-align:center;padding-bottom:6px;text-transform:capitalize}
.d{position:relative;height:42px;border:0;background:none;padding:0;cursor:pointer;font:400 var(--t-small) var(--sans);color:var(--ink)}
.d span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:auto;border-radius:50%;transition:background var(--t-hover)}
.d:hover:not(:disabled) span{background:#ece8f1}
.d:disabled{color:#c9bfca;cursor:default}
.d.auj span{font-weight:600;color:var(--accent)}
.d.pl{background:#ece8f1}
.d.db::before,.d.fn::before{content:"";position:absolute;top:0;bottom:0;width:50%;background:#ece8f1}
.d.db::before{right:0}.d.fn::before{left:0}
.d.db.seul::before{display:none}
.d span{position:relative}
.d.db span,.d.fn span{background:var(--parme)!important;color:#fff;font-weight:600}
.cal-p{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;padding-top:4px;font-size:var(--t-small);color:var(--muted)}
.cal-p strong{color:var(--parme);font-weight:600}
.cal-p button{border:0;background:none;color:var(--accent);font-weight:500;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- La maison ---------- */

.resa{width:min(1100px,100%);grid-template-columns:1fr 1fr 1.1fr 1.3fr;gap:2px;background:#e3dee9;position:relative}
.resa > .f{background:var(--surface)}
.ad{grid-column:auto;background:var(--surface);flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.resa .btn{grid-column:auto;min-height:96px;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:0 28px;font-size:18px}
.resa .btn small{color:var(--parme)}
.f{min-height:96px;padding:18px 24px}
.ad{padding:14px 24px}

/* ---------- Bienvenue ---------- */
section{padding:var(--section) var(--m)}
.bienvenue{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
.bienvenue .txt{grid-column:1/6;grid-row:1;padding-top:20px}
.stat{font:500 var(--t-lg)/1.25 var(--serif);color:var(--ink);margin:28px 0 24px;max-width:26ch}
.txt p + p{margin-top:16px}
.txt .lien{display:inline-block;margin-top:32px}
.bienvenue .p1{grid-column:7/11;grid-row:1;aspect-ratio:4/5;overflow:hidden}
.bienvenue .p2{grid-column:9/13;grid-row:1;aspect-ratio:4/3;margin-top:58%;overflow:hidden;position:relative;outline:var(--gap) solid var(--bg);z-index:1}
.bienvenue figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-soft)}
.bienvenue figure:hover img{transform:scale(1.04)}
.cap{font-size:var(--t-small);margin-top:10px}
.bienvenue .caps{grid-column:7/13;grid-row:2;margin-top:14px;font-size:var(--t-small);display:flex;justify-content:space-between;gap:var(--gap)}

/* ---------- L'hôtel (parme) ---------- */
.sombre{background:var(--parme);color:var(--on-parme)}
.hotel{display:grid;grid-template-columns:5fr 7fr;column-gap:calc(var(--gap)*2);align-items:start}
.hotel .sous{font:500 var(--t-lg)/1.2 var(--serif);color:var(--gold);margin:20px 0 28px}
.cadre{position:relative;aspect-ratio:16/10;overflow:hidden}
.cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:fondu 16s infinite}
.cadre img:nth-child(2){animation-delay:4s}.cadre img:nth-child(3){animation-delay:8s}.cadre img:nth-child(4){animation-delay:12s}
@keyframes fondu{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
.cadre-cap{position:relative;height:1.6em;margin-top:10px;font-size:var(--t-small)}
.cadre-cap span{position:absolute;left:0;opacity:0;animation:fondu 16s infinite}
.cadre-cap span:nth-child(2){animation-delay:4s}.cadre-cap span:nth-child(3){animation-delay:8s}.cadre-cap span:nth-child(4){animation-delay:12s}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:26px var(--gap);margin-top:44px}
.services h3{font:600 22px/1.2 var(--serif);color:var(--gold)}
.services p{font-size:var(--t-small);margin-top:2px}

/* ---------- Bande or ---------- */
.bande{background:var(--gold);color:var(--parme);padding:72px var(--m);text-align:center}
.bande p{font:600 var(--t-lg)/1.3 var(--serif);max-width:44ch;margin:0 auto}

/* ---------- Chambres ---------- */
.chambres{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
.chambres .vis{grid-column:1/6;position:sticky;top:40px}
.chambres .vis .a{aspect-ratio:4/5;overflow:hidden}
.chambres .vis .a img{width:100%;height:100%;object-fit:cover;object-position:28% 50%}
.chambres .vis .b{width:52%;aspect-ratio:1;overflow:hidden;margin:-30% -6% 0 auto;position:relative;outline:var(--gap) solid var(--bg)}
.chambres .vis .b img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.chambres .liste{grid-column:7/13}
.ch-intro{margin:24px 0 36px;max-width:48ch}
.rows li + li{margin-top:4px}
.rows .r{display:grid;grid-template-columns:1fr auto;column-gap:24px;row-gap:2px;padding:20px 22px;margin:0 -22px;text-decoration:none;transition:background var(--t-hover)}
.rows .n{font:600 var(--t-lg)/1.1 var(--serif);color:var(--parme);transition:transform var(--t-ui) var(--ease-out)}
.rows .p{font:600 var(--t-lg)/1.1 var(--serif);color:var(--gold-ink);font-variant-numeric:tabular-nums;text-align:right}
.rows .ds{font-size:var(--t-body)}
.rows .live{font-size:var(--t-small);text-align:right;color:var(--muted)}
.ch-note{margin-top:28px;font-size:var(--t-small);color:var(--muted);max-width:56ch}

/* ---------- Pourquoi ---------- */
.pourquoi{display:grid;grid-template-columns:5fr 7fr;column-gap:calc(var(--gap)*2);align-items:start}
.pourquoi figure{position:sticky;top:40px;aspect-ratio:4/5;overflow:hidden}
.pourquoi figure img{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.pourquoi .tag{font:600 var(--t-lg)/1 var(--serif);color:var(--gold);margin-top:18px}
.raisons{display:grid;grid-template-columns:1fr 1fr;gap:34px var(--gap);margin-top:48px}
.raisons h3{font:600 22px/1.2 var(--serif);color:var(--gold);margin-bottom:6px}
.raisons p{font-size:var(--t-body)}

/* ---------- Riquewihr ---------- */
.riq{display:grid;grid-template-columns:1fr 1fr;padding:0;background:var(--surface)}
.riq figure{min-height:88svh;overflow:hidden}
.riq figure img{width:100%;height:100%;object-fit:cover;object-position:40% 50%}
.riq .txt{align-self:center;padding:80px var(--m) 80px calc(var(--m)*1.4);max-width:720px}

/* ---------- Pied de page ---------- */
footer{background:var(--parme);color:var(--on-parme);padding:var(--section) var(--m) 32px}
.sejour{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start}
.sejour .gauche{grid-column:1/6}
.sejour address{font-style:normal;margin:28px 0 24px}
.sejour dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;max-width:420px}
.sejour dt{color:var(--gold)}
.sejour dd a{text-decoration:none;font-weight:500}
.sejour dd a:hover{text-decoration:underline}
.liens{grid-column:7/13}
.liens li + li{margin-top:8px}
.liens a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;background:var(--parme-2);text-decoration:none;font:600 var(--t-lg)/1.1 var(--serif);transition:background var(--t-hover),color var(--t-hover)}
.liens a .fl{color:var(--gold);transition:transform var(--t-ui) var(--ease-out)}
.liens a:hover{background:#2f2639}
.liens a:hover .fl{transform:translateX(6px)}
.fin{margin-top:var(--section);display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.fin img{width:280px;height:auto}
.legal{font-size:var(--t-small);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px}
.legal a{color:var(--on-parme)}

/* Bouton Réserver toujours visible */
.barre{position:fixed;right:24px;bottom:24px;z-index:30;min-height:56px;padding:0 26px}

/* Entrées */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity var(--t-reveal) var(--ease-expo),transform var(--t-reveal) var(--ease-expo);transition-delay:calc(var(--i,0)*80ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-img{clip-path:inset(10% 0 0 0);transition:clip-path 1.2s var(--ease-expo)}
.js .rv-img.in{clip-path:inset(0)}
.js .rows li{opacity:0;transform:translateY(16px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.js .rows.in li{opacity:1;transform:none}

/* Tablette */
@media (max-width:1100px){
  .nav > ul li.opt{display:none}
  .resa{grid-template-columns:1fr 1fr}
  .resa .btn{min-height:72px}
  .services{grid-template-columns:1fr 1fr}
  .raisons{grid-template-columns:1fr}
  .hotel,.pourquoi{grid-template-columns:1fr}
  .hotel .vis{margin-top:48px}
  .pourquoi figure{position:static;aspect-ratio:16/10;margin-bottom:48px}
  .bienvenue .txt{grid-column:1/-1;margin-bottom:56px}
  .bienvenue .p1{grid-column:1/8;grid-row:2}
  .bienvenue .p2{grid-column:6/13;grid-row:3;margin-top:-30%}
  .bienvenue .caps{grid-column:1/-1;grid-row:4}
  .riq{display:block}
  .riq figure{min-height:0;height:60svh}
  .riq .txt{padding:72px var(--m);max-width:none}
}
/* Téléphone */
@media (max-width:760px){
  :root{--section:96px;--t-h2:26px}
  .info{text-align:left}
  .hero{min-height:88svh}
  .logo img{height:84px}
  .nav > ul li:not(.tel){display:none}
  .marque{gap:10px}
  .drapeaux{gap:0}
  .drapeaux a,.drapeaux .cur{padding:9px 7px}
  .drapeaux svg{width:27px;height:18px}
  .nav > ul{display:none}
  .nav{align-items:flex-start}
  .nav > ul{padding-top:14px}
  .hero-txt{padding:40px var(--m) 80px}
  .hero h1{font-size:9vw}
  .hero-txt p{font-size:22px}
  .booking{margin:-40px var(--m) 0}
  .resa{grid-template-columns:1fr 1fr}
  .ad{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}
  .resa .btn{grid-column:1/-1;min-height:64px;flex-direction:row;justify-content:space-between;align-items:center}
  .f{min-height:76px;padding:14px 16px}
  .cal{position:fixed;left:0;right:0;bottom:0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));max-height:88svh;overflow:auto;z-index:40}
  .cal-m{display:block}
  .g{grid-template-columns:repeat(7,1fr)}
  .bienvenue,.chambres,.sejour{display:block}
  .bienvenue .p1{width:78%;margin:48px 0 0 auto}
  .bienvenue .p2{width:58%;margin-top:-26%;outline-width:12px}
  .bienvenue .caps{display:block;margin-top:12px}
  .bienvenue .caps span{display:block}
  .hotel,.pourquoi{display:block}
  .hotel .vis{margin-top:40px}
  .services{grid-template-columns:1fr;margin-top:36px}
  .chambres .vis{position:static}
  .chambres .vis .a{aspect-ratio:16/10}
  .chambres .vis .b{display:none}
  .chambres .liste{margin-top:44px}
  .rows .r{margin:0 -12px;padding:18px 12px}
  .rows .ds,.rows .live{grid-column:1/-1;text-align:left}
  .pourquoi figure{position:static;aspect-ratio:16/11;margin-bottom:44px}
  .riq{display:block}
  .riq figure{min-height:0;height:60svh}
  .riq .txt{padding:64px var(--m)}
  .liens{margin-top:48px}
  .barre{left:0;right:0;bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  footer{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .rows li{opacity:1;transform:none}
  .js .rv-img{clip-path:none}
  .cadre img:first-child,.cadre-cap span:first-child{opacity:1}
  html{scroll-behavior:auto}
}