/* Restaurant Hamadi — « sépia d'archive » : deux encres, toute couleur vit dans les photographies.
   Cinzel + Spectral + Amiri (arabe). Kasbah cluster → zéro chroma d'interface. */

@font-face{font-family:Cinzel;src:url(../fonts/cinzel-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Cinzel;src:url(../fonts/cinzel-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(../fonts/spectral-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(../fonts/spectral-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Spectral;src:url(../fonts/spectral-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Amiri;src:url(../fonts/amiri-ar-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --ivory:#e9dfcd;      /* plâtre — ground */
  --paper:#f3ecdd;      /* highlight paper */
  --ink:#231a13;        /* encre sépia — l'unique "couleur" */
  --ink-2:#584839;      /* soft ink */
  --ink-3:#8a7a66;      /* faint */
  --line:#c3b39a;       /* hairline */
  --shadow:rgba(35,26,19,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);color:var(--ink);
  font-family:Spectral,Georgia,serif;font-weight:400;line-height:1.62;
  font-size:clamp(16px,1.05vw,18px);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:min(1160px,92vw);margin-inline:auto}
.eyebrow{
  font-family:Cinzel;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  font-size:.66rem;color:var(--ink-2);
}
h1,h2,h3{font-family:Cinzel;font-weight:600;line-height:1.08;letter-spacing:.02em}
.rule{height:1px;background:var(--line);border:0}
.filet{display:flex;align-items:center;gap:.9rem;color:var(--ink-3)}
.filet::before,.filet::after{content:"";height:1px;background:var(--line);flex:1}
.filet span{font-family:Cinzel;letter-spacing:.3em;text-transform:uppercase;font-size:.6rem}

/* ---------- top bar ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:5;padding:1.4rem 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between}
.top .mk{font-family:Cinzel;font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:1.2rem;color:var(--ink)}
.top nav{display:flex;gap:1.6rem;font-family:Cinzel;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.top nav a{opacity:.86;transition:opacity .25s}
.top nav a:hover{opacity:1}
@media(max-width:720px){.top nav{display:none}.top{padding:1rem 0}}

/* ---------- hero « l'arc » ---------- */
.hero{position:relative;padding:6.4rem 0 4.2rem;text-align:center}
.hero .kick{color:var(--ink-2);margin-bottom:1.2rem}
.arabe{font-family:Amiri,serif;font-size:1.5rem;color:var(--ink-2);direction:rtl;margin:.1rem 0 .5rem}
.wordmark{
  font-family:Cinzel;font-weight:600;letter-spacing:.06em;
  font-size:clamp(3.1rem,10vw,6.4rem);line-height:.96;margin:.1rem 0 .7rem;
}
.since{font-family:Spectral;font-style:italic;color:var(--ink-2);font-size:1.05rem;letter-spacing:.01em}
.tagline{max-width:36ch;margin:1.6rem auto 0;color:var(--ink-3);font-family:Cinzel;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;line-height:1.7}

.arch-frame{
  position:relative;width:min(560px,86vw);margin:2.6rem auto 0;
  aspect-ratio:300/336;
}
.arch-frame .ph{
  position:absolute;inset:0;clip-path:url(#hamArch);
  background:#cdbfa8;box-shadow:0 20px 44px -20px var(--shadow);
}
.arch-frame img{width:100%;height:100%;object-fit:cover}
.arch-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arch-svg path{fill:none;stroke:var(--ink);stroke-opacity:.55}
.arch-cap{
  position:absolute;left:50%;bottom:-.2rem;transform:translate(-50%,50%);
  background:var(--ivory);padding:0 .9rem;font-family:Cinzel;font-size:.56rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.cta{display:inline-flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:3.4rem}
.btn{
  font-family:Cinzel;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.66rem;
  padding:.95rem 1.7rem;border:1px solid var(--ink);transition:.28s;color:var(--ink);
}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- generic section ---------- */
section{padding:5.2rem 0}
.sec-head{text-align:center;max-width:52ch;margin:0 auto 3rem}
.sec-head .eyebrow{display:block;margin-bottom:1rem}
.sec-head h2{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.sec-head p{margin-top:1.1rem;color:var(--ink-2)}

/* maison / heritage */
.maison{background:var(--paper)}
.maison .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.4rem);align-items:center}
.maison .lead{font-size:1.24rem;line-height:1.5;font-weight:500}
.maison p+p{margin-top:1.1rem;color:var(--ink-2)}
.maison figure{position:relative}
.maison figure img{width:100%;filter:grayscale(1) sepia(.28) contrast(1.02)}
.maison figcaption{font-family:Cinzel;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:.8rem;text-align:center}
@media(max-width:820px){.maison .grid{grid-template-columns:1fr;gap:2.4rem}.maison figure{order:-1}}

/* salons — interior gallery */
.salons .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:1.4rem}
.salons figure{position:relative;overflow:hidden;background:#cdbfa8}
.salons figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s ease}
.salons figure:hover img{transform:scale(1.04)}
.salons .tall{grid-row:span 2}
.cap{position:absolute;left:1rem;bottom:.9rem;color:var(--paper);font-family:Cinzel;
  font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.salons .stack{display:grid;gap:1.4rem}
@media(max-width:820px){.salons .cols{grid-template-columns:1fr}.salons .tall{grid-row:auto}}

/* carte */
.carte{background:var(--paper)}
.carte .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.carte h3{font-size:.82rem;letter-spacing:.2em;color:var(--ink-2);margin:2rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.carte h3:first-child{margin-top:0}
.dish{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.42rem 0}
.dish .n{font-weight:500}
.dish .d{font-family:Spectral;font-style:italic;color:var(--ink-3);font-size:.9rem}
.dish .leader{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.28em);margin:0 .2rem}
.dish .p{font-family:Cinzel;font-size:.82rem;color:var(--ink-2);white-space:nowrap}
.carte .note{grid-column:1/-1;text-align:center;color:var(--ink-3);font-style:italic;font-size:.86rem;margin-top:2rem}
.plate-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.6rem}
.plate-duo figure{position:relative;overflow:hidden}
.plate-duo img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
@media(max-width:720px){.carte .cols{grid-template-columns:1fr}}

/* visit / footer */
.visit{text-align:center}
.visit .lines{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem 3.4rem;margin:2.4rem 0}
.visit .lines .it .eyebrow{display:block;margin-bottom:.55rem}
.visit .lines .it p{color:var(--ink-2)}
.visit .lines a.it p:hover{color:var(--ink)}
footer{background:var(--ink);color:var(--paper);padding:3.4rem 0;text-align:center}
footer .mk{font-family:Cinzel;font-weight:600;letter-spacing:.2em;font-size:1.2rem}
footer .ar{font-family:Amiri;color:#c9bba6;margin:.3rem 0 1rem;font-size:1.1rem}
footer nav{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;font-family:Cinzel;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#cdbfa8;margin-bottom:1.4rem}
footer nav a:hover{color:var(--paper)}
footer .fine{color:#9c8d78;font-size:.74rem;max-width:60ch;margin:1rem auto 0;line-height:1.7}
footer .fine a{text-decoration:underline;text-underline-offset:2px}

/* reveal — progressive enhancement: content visible by default, hidden only when JS is active */
.reveal{transition:opacity .9s ease,transform .9s ease}
html.js .reveal{opacity:0;transform:translateY(18px)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}.salons figure:hover img{transform:none}}