/* MÙJA Djerba, feuille de style */
@font-face{font-family:"TAY Maka";src:url("../fonts/TAYMaka.woff2") format("woff2");font-display:swap}
@font-face{font-family:"TAY Misprint";src:url("../fonts/TAYMisprint.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/Newsreader-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
/* Layout: classic mobile-first one-column page. Sticky header with Réserver, hero, 4 quick actions, 3 experience cards, swipe gallery, menu, practical info, closing. Bottom bar on phones once the hero is passed. Widens to a centred grid on desktop. */
:root{
  --muja-background:#F5EFE4; --muja-surface:#EADFCA;
  --muja-dark:#382A19; --muja-brown:#5B4126;
  --muja-accent:#987651; --muja-taupe:#AB9377;
  --muja-sand:#C5AD8E; --muja-sand-light:#DDC6A6; --muja-white:#FFFDF8;
  --bg:#F7F3EC; --panel:#F0E3CB; --ink:var(--muja-dark); --ink-soft:var(--muja-brown);
  --line:color-mix(in srgb,var(--muja-taupe) 45%,transparent);
  --font-display:"TAY Maka","Iowan Old Style",Georgia,serif;
  --font-label:"TAY Misprint","Courier New",monospace;
  --font-body:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  /* linen tiles are pre-blended with their background: no runtime blur or blend */
  --linen-bg:url("../img/linen-bg.webp");
  --linen-panel:url("../img/linen-panel.webp");
  /* motion: slow ease-out, like a wave settling back */
  --ease-tide:cubic-bezier(0.23,1,0.32,1);
  --tide:1100ms;
  --wrap:1120px;
  color-scheme:light;
  accent-color:var(--muja-accent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg) var(--linen-bg) 0 0/520px 520px repeat;color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--muja-sand-light);color:var(--ink)}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--muja-taupe)}
img{display:block;max-width:100%;height:auto}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.25rem}
.label{font-family:var(--font-label);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(26px,6.5vw,40px);line-height:1.05;margin:0;text-wrap:balance}
h2 em{font-style:normal;color:var(--muja-accent)}
.lead{color:var(--ink-soft);margin:0;max-width:40ch}
:focus-visible{outline:2px solid var(--muja-brown);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:0 1.4rem;border-radius:2px;text-decoration:none;font-family:var(--font-label);font-size:.9rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--ease-tide)}
.btn:active{transform:scale(.97)}
.btn-dark{background:var(--ink);color:var(--muja-white)}
.btn-line{background:transparent;color:var(--ink)}
.btn-light{background:var(--muja-white);color:var(--ink);border-color:var(--muja-white)}
@media (hover:hover) and (pointer:fine){
  .btn-dark:hover{background:var(--muja-brown)}
  .btn-line:hover{background:var(--ink);color:var(--muja-white)}
  .btn-light:hover{background:var(--muja-sand-light);border-color:var(--muja-sand-light)}
}

/* header */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.logo{display:flex;align-items:center;width:104px;min-height:44px;color:var(--ink)}
.logo svg,.endlogo svg{display:block;width:100%;height:auto}
.head nav{display:none;gap:1.75rem}
.head nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-label);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink-soft);transition:color 200ms ease}
.head nav a:hover{color:var(--ink)}
.head .btn{min-height:44px;padding:0 1rem;font-size:.8rem}

/* hero */
.hero{position:relative;color:var(--muja-white);overflow:hidden;background:var(--muja-dark)}
.hero picture{display:block}
.hero img{width:100%;height:min(78vh,640px);object-fit:cover;object-position:50% 40%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(56,42,25,0) 30%,rgba(56,42,25,.72) 100%);pointer-events:none}
.hero .txt{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-block:1.75rem}
.hero h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(30px,8vw,56px);line-height:1;margin:.4rem 0 .6rem}
.hero h1 em{font-style:normal;color:var(--muja-sand-light)}
.hero p{margin:0 0 1.25rem;font-size:1.1rem;max-width:32ch}
.hero .label{color:var(--muja-sand-light)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.6rem}

/* quick actions */
.quick{background:var(--panel) var(--linen-panel) 0 0/520px 520px repeat;border-bottom:1px solid var(--line)}
.quick ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.quick li+li{border-left:1px solid var(--line)}
.quick a{display:grid;justify-items:center;gap:.45rem;min-height:72px;padding:1rem .15rem;text-decoration:none;text-align:center;transition:background-color 200ms ease}
.quick a:active{background:color-mix(in srgb,var(--muja-sand) 25%,transparent)}
.quick svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.4}
.quick span{font-family:var(--font-label);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);max-width:100%}
@media (hover:hover) and (pointer:fine){.quick a:hover span{color:var(--ink)}}

/* sections */
section{padding-block:3.5rem}
.shead{display:grid;gap:.75rem;margin-bottom:1.75rem}
.cards{display:grid;gap:2.25rem}
.card{display:grid;gap:.9rem}
.card .ph{overflow:hidden;border-radius:2px;aspect-ratio:4/3;background:var(--muja-surface)}
.card .ph picture,.gallery picture{display:block;width:100%;height:100%}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:1.35rem;letter-spacing:.03em;margin:0}
.card p{margin:0;color:var(--ink-soft)}
.card .meta{font-family:var(--font-label);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* gallery */
.gallery-wrap{position:relative;max-width:var(--wrap);margin-inline:auto}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:1.25rem;scroll-padding-inline:1.25rem;padding-bottom:.75rem;scrollbar-width:none;overscroll-behavior-x:contain}
.gallery::-webkit-scrollbar{display:none}
.gallery figure{margin:0;scroll-snap-align:center;aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--muja-surface)}
.gallery img{width:100%;height:100%;object-fit:cover}
.hint{font-family:var(--font-label);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);text-align:center;margin:.5rem 0 0}
.gnav{display:none}

/* band: menu */
.band{background:var(--panel) var(--linen-panel) 0 0/520px 520px repeat;border-block:1px solid var(--line);text-align:center}
.band .wrap{display:grid;justify-items:center;gap:1.1rem}
.seal{width:72px;color:var(--muja-accent)}
.seal svg{width:100%;height:auto;display:block}

/* infos */
.infos{display:grid;gap:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding-block:1.1rem;border-bottom:1px solid var(--line);align-items:start}
.row .label{padding-top:.2rem}
.row p{margin:0;min-width:0;overflow-wrap:anywhere}
.row .it{font-style:italic;color:var(--ink-soft)}
.row a{position:relative}
.row a::after,.copy::after,footer a::after{content:"";position:absolute;inset:-12px -4px}
.copy{position:relative;margin-left:.6rem;font-family:var(--font-label);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--ink-soft);padding:.3rem .6rem;border-radius:2px;cursor:pointer;vertical-align:middle;transition:border-color 200ms ease,color 200ms ease}
@media (hover:hover) and (pointer:fine){.copy:hover{border-color:var(--ink-soft);color:var(--ink)}}
.infos-actions{display:grid;gap:.6rem;margin-top:1.5rem}

/* closing */
.closing{text-align:center;padding-block:4rem 3rem}
.closing .wrap{display:grid;justify-items:center;gap:1.4rem}
.endlogo{width:150px;color:var(--ink)}
.frieze{overflow:hidden;color:var(--muja-sand);width:100%;max-width:420px}
.frieze .track{display:flex;width:max-content;animation:drift 40s linear infinite}
.frieze svg{height:18px;width:auto;flex:none;margin-right:10px}
@keyframes drift{to{transform:translateX(-50%)}}

footer{border-top:1px solid var(--line);padding-block:1.5rem calc(6rem + env(safe-area-inset-bottom,0px))}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem 1.5rem;font-family:var(--font-label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
footer a{position:relative;text-decoration:none}

/* bottom bar (phones): rises once the hero is passed */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);transition:transform 520ms var(--ease-tide),opacity 320ms ease}
.mbar .btn{min-height:50px}
.js .mbar:not(.on){transform:translateY(110%);opacity:0;pointer-events:none}

.toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;background:var(--ink);color:var(--muja-white);font-size:.9rem;padding:.6rem 1rem;border-radius:2px;transition:transform 260ms var(--ease-tide),opacity 200ms ease;pointer-events:none;z-index:40}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- motion: ressac ---------- */
/* 1. Hero: the photo settles like water drawing back; text arrives just after. Visible by default if animations are unavailable. */
@keyframes tide-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes tide-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero img{animation:tide-settle 2600ms var(--ease-tide) both}
.hero .txt .label,.hero h1,.hero p,.hero .ctas{animation:tide-rise 1200ms var(--ease-tide) both}
.hero h1{animation-delay:120ms}
.hero p{animation-delay:240ms}
.hero .ctas{animation-delay:360ms}
/* 2. Scroll reveals: only below-the-fold blocks, armed by JS (.js), released by .in */
.js [data-tide]{opacity:0;transform:translateY(22px);transition:opacity var(--tide) var(--ease-tide),transform var(--tide) var(--ease-tide);transition-delay:var(--d,0ms)}
.js [data-tide].in{opacity:1;transform:none}
.js [data-tide] .ph img,.js [data-tide] figure img{transform:scale(1.045);transition:transform 1800ms var(--ease-tide);transition-delay:var(--d,0ms)}
.js [data-tide].in .ph img,.js [data-tide].in figure img{transform:none}

/* les espaces: illustrated plan + legend */
.spaces{padding-top:0}
.spaces-grid{display:grid;gap:1.75rem}
.plan{margin:0;display:grid;gap:.5rem}
.plan a{display:block;border-radius:2px;overflow:hidden;background:var(--bg) var(--linen-bg) 0 0/520px 520px repeat}
.plan img{width:100%;height:auto;mix-blend-mode:multiply}
.legend{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.25rem;align-content:start}
.legend li{display:flex;align-items:center;gap:.6rem;min-width:0;font-size:1rem;line-height:1.3}
.legend .n{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border:1px solid var(--ink);border-radius:50%;font-family:var(--font-label);font-size:.78rem;font-variant-numeric:tabular-nums}
.legend .it{font-style:italic;color:var(--ink-soft)}
.legend .q{margin-left:auto;padding-left:.4rem;font-family:var(--font-label);font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.season{font-weight:400;font-family:var(--font-label);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
@media (min-width:900px){
  .spaces-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:3rem;align-items:center}
  .legend{grid-template-columns:1fr;gap:1rem}
  .plan .hint{display:none}
}
@media (max-width:420px){.legend{grid-template-columns:1fr;gap:.7rem}}

/* tablet / desktop */
@media (min-width:760px){
  .wrap{padding-inline:2rem}
  .cards{grid-template-columns:repeat(3,1fr);gap:1.75rem}
  .card .ph{aspect-ratio:3/4}
  .gallery{grid-auto-columns:calc((100% - 4rem - 2.25rem)/4);padding-inline:2rem;scroll-padding-inline:2rem}
  .gallery figure{scroll-snap-align:start}
  .hint{display:none}
  .gnav{display:flex;justify-content:flex-end;gap:.5rem;padding:1rem 2rem 0}
  .gnav button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:2px;cursor:pointer;transition:border-color 200ms ease,opacity 200ms ease,transform 160ms var(--ease-tide)}
  .gnav button:hover{border-color:var(--ink)}
  .gnav button:active{transform:scale(.97)}
  .gnav button:disabled{opacity:.35;cursor:default;border-color:var(--line)}
  .gnav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4}
  .infos-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
  .infos-actions{margin-top:0}
  section{padding-block:5rem}
}
@media (min-width:960px){
  .head nav{display:flex}
  .logo{width:120px}
  .hero img{height:min(82vh,760px);object-position:50% 72%}
  .hero .txt{padding-block:3rem}
  .mbar{display:none}
  footer{padding-bottom:1.5rem}
  .toast{bottom:2rem}
}
@media (max-width:389px){.quick span{font-size:11px;letter-spacing:0}}

/* reduced motion: keep gentle fades that show state, drop all movement */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .frieze .track{animation:none}
  .hero img{animation:none}
  .hero .txt .label,.hero h1,.hero p,.hero .ctas{animation:none}
  .js [data-tide]{transform:none;transition:opacity 300ms ease;transition-delay:0ms}
  .js [data-tide] .ph img,.js [data-tide] figure img{transform:none;transition:none}
  .mbar{transition:opacity 200ms ease}
  .js .mbar:not(.on){transform:none}
  .btn:active,.gnav button:active{transform:none}
}
@media (max-width:339px){
  .quick ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick li:nth-child(3){border-left:0}
  .quick li:nth-child(n+3){border-top:1px solid var(--line)}
}