/* Kasb'art — 16 rue de la Kasbah, Tanger
   Palette « bougainvillier & encre » : chaux + encre de trait + un seul chroma,
   le magenta du bougainvillier de leur terrasse. Toute autre couleur (le bleu du
   parapet, le safran des jus, le rouge du mural) ne vit QUE dans les photographies.
   Archétype : « la cimaise » — une tringle d'accrochage, des fils, des cartels. */

@font-face{font-family:Zodiak;src:url(../fonts/zodiak-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Zodiak;src:url(../fonts/zodiak-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(../fonts/switzer-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(../fonts/switzer-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Switzer;src:url(../fonts/switzer-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --chaux:#f2ece2;
  --chaux-2:#eae2d4;
  --encre:#191512;
  --encre-2:#4e453b;
  --encre-3:#685e50;
  --boug:#8a1a63;
  --boug-fonce:#6d1550;
  --filet:#cbbfab;
  --filet-2:#ded4c3;
  --wrap:1180px;
  --pad:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--chaux);color:var(--encre);
  font-family:Switzer,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:Zodiak,Georgia,serif;font-weight:400;margin:0;line-height:1.06}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative}

/* ── La tringle ────────────────────────────────────────────────────────── */
.rail{
  position:absolute;left:var(--pad);right:var(--pad);top:0;height:0;
  border-top:1px solid var(--encre);
}
.rail::before,.rail::after{
  content:"";position:absolute;top:-3px;width:5px;height:5px;border-radius:50%;
  background:var(--encre);
}
.rail::before{left:-2px}
.rail::after{right:-2px}
.rail--sec{border-top-color:var(--filet)}
.rail--sec::before,.rail--sec::after{background:var(--filet)}
.rail--pied{border-top-color:var(--filet)}
.rail--pied::before,.rail--pied::after{background:var(--filet)}

/* Les fils relient la tringle au bloc suspendu : ils remontent, ils ne descendent pas. */
.fil{
  position:absolute;top:calc(-1 * var(--drop));left:7px;
  width:1px;height:var(--drop);background:var(--encre);opacity:.45;
}
.fil--d{left:auto;right:7px}

/* ── Bandeau ───────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:clamp(12px,3vw,32px);
  padding:12px var(--pad);
  background:color-mix(in srgb,var(--chaux) 92%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--filet-2);
}
.brand{
  font-family:Zodiak,Georgia,serif;font-size:22px;letter-spacing:.005em;
  text-decoration:none;flex:0 0 auto;
}
.mast-nav{display:flex;gap:clamp(10px,2vw,22px);margin-left:auto;flex-wrap:wrap}
.mast-nav a{
  font-size:14.5px;font-weight:500;text-decoration:none;color:var(--encre-2);
  padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;
}
.mast-nav a:hover{color:var(--boug);border-bottom-color:var(--boug)}

/* ── Action ────────────────────────────────────────────────────────────── */
.act{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--boug);color:#fff;text-decoration:none;
  font-weight:500;font-size:15.5px;letter-spacing:.005em;
  padding:11px 20px;border-radius:2px;flex:0 0 auto;
}
.act:hover{background:var(--boug-fonce)}
.act--sm{font-size:14px;padding:8px 14px}
.act svg{flex:0 0 auto}

/* ── Hero « la cimaise » ───────────────────────────────────────────────── */
.hero{padding:clamp(46px,7vw,84px) 0 clamp(40px,6vw,64px)}
.hero .wrap{padding-top:0}
.cimaise{
  --drop:38px;
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;padding-top:var(--drop);
}
.hang{position:relative;margin:0}
.hang-corps{padding-top:2px}

.kicker{
  font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--boug);margin:0 0 .85em;
}
h1{font-size:clamp(58px,11vw,116px);letter-spacing:-.018em;margin:0 0 .16em}
.devise{
  font-family:Zodiak,Georgia,serif;font-size:clamp(18px,2.3vw,24px);
  color:var(--encre-2);margin:0 0 1.05em;
}
.lede{font-size:clamp(16.5px,1.55vw,18.5px);color:var(--encre-2);max-width:52ch;margin:0 0 1.7em}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.note{font-size:14px;color:var(--encre-3)}
.note--bloc{margin-top:.6em}

.hang--toile img{width:100%;border:1px solid var(--filet)}

/* ── Cartel de galerie ─────────────────────────────────────────────────── */
.cartel{display:block;margin:10px 0 0;max-width:34ch}
.cartel-t{
  display:block;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--encre);
}
.cartel-d{display:block;font-size:13.5px;line-height:1.5;color:var(--encre-3);margin-top:2px}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sec{padding:clamp(48px,7vw,88px) 0}
.sec--murs,.sec--infos{background:var(--chaux-2)}
.hang-h2{
  font-size:clamp(32px,4.6vw,50px);letter-spacing:-.012em;
  padding-top:30px;margin:0 0 .7em;position:relative;
}
.hang-h2::before{
  content:"";position:absolute;top:0;left:16px;width:1px;height:22px;
  background:var(--filet);
}
.chapo{font-size:16.5px;color:var(--encre-2);max-width:62ch;margin:0 0 2.1em}

.duo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:start}
.duo-txt p{color:var(--encre-2);max-width:58ch}

.enseigne-txt{margin-top:1.9em;border-top:1px solid var(--filet);padding-top:1.1em}
.enseigne-lab{font-size:13.5px;color:var(--encre-3);margin:0 0 .8em}
.enseigne-liste{display:flex;flex-wrap:wrap;gap:8px 10px}
.enseigne-liste li{
  font-family:Zodiak,Georgia,serif;font-size:16px;
  border:1px solid var(--filet);border-radius:2px;padding:5px 12px;color:var(--encre);
}
.gloss{font-family:Switzer,sans-serif;font-size:12.5px;color:var(--encre-3)}

.ph{margin:0}
.ph img{width:100%;border:1px solid var(--filet)}
.ph--large{margin-top:clamp(26px,3.4vw,40px);max-width:760px}
.ph--large img{max-height:420px;object-fit:cover}

.trio{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,32px);margin-top:clamp(30px,4vw,52px);
}
.trio .ph img{aspect-ratio:4/5;object-fit:cover}
.trio--plats{margin-top:clamp(34px,4.5vw,58px)}

/* ── La carte ──────────────────────────────────────────────────────────── */
.carte-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,46px);
}
.carte-bloc h3{
  font-size:24px;margin:0 0 1em;padding-bottom:.5em;
  border-bottom:1px solid var(--filet);
}
.plats li{
  display:grid;grid-template-columns:1fr auto;gap:2px 14px;
  padding:0 0 .95em;margin:0 0 .95em;border-bottom:1px dotted var(--filet);
}
.plats li:last-child{border-bottom:0}
.p-n{font-weight:500;font-size:16px;line-height:1.35}
.p-p{
  font-family:Zodiak,Georgia,serif;font-size:17px;color:var(--boug);
  white-space:nowrap;text-align:right;
}
.p-d{grid-column:1/-1;font-size:13.8px;line-height:1.5;color:var(--encre-3);margin-top:1px}
.carte-note{
  font-size:13.5px;line-height:1.55;color:var(--encre-3);
  font-style:italic;margin:1.2em 0 0;
}

/* ── Infos ─────────────────────────────────────────────────────────────── */
.infos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,50px)}
.info-bloc h3{font-size:21px;margin:0 0 .8em}
.info-bloc p{color:var(--encre-2)}
.horaires{border-collapse:collapse;width:100%;max-width:290px}
.horaires th,.horaires td{
  text-align:left;font-weight:400;font-size:15.5px;
  padding:6px 0;border-bottom:1px solid var(--filet);
}
.horaires th{color:var(--encre-2)}
.horaires td{text-align:right;color:var(--encre);font-variant-numeric:tabular-nums}
.horaires .ferme{color:var(--encre-3)}
.lien{color:var(--boug);font-weight:500;text-decoration:none;border-bottom:1px solid var(--boug)}
.lien:hover{color:var(--boug-fonce)}

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied{padding:clamp(38px,5vw,62px) 0 clamp(30px,4vw,48px)}
.pied .wrap{padding-top:30px}
.pied-nom{font-family:Zodiak,Georgia,serif;font-size:30px;margin:0 0 .3em}
.pied-l{font-size:14.5px;color:var(--encre-3);margin:0 0 .25em}
.pied-devise{font-family:Zodiak,Georgia,serif;font-size:16px;color:var(--encre-2);margin-top:.5em}

/* ── Apparition ────────────────────────────────────────────────────────── */
.rvl{opacity:0;transform:translateY(12px)}
.rvl.vu{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}

/* ── Adaptatif ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .cimaise{grid-template-columns:1fr;gap:34px}
  .hang--toile{max-width:420px}
  .duo{grid-template-columns:1fr;gap:30px}
  .ph--enseigne{max-width:460px}
  .trio{grid-template-columns:1fr 1fr}
  .carte-cols{grid-template-columns:1fr 1fr}
  .infos-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .mast{flex-wrap:wrap;row-gap:8px;padding:10px var(--pad)}
  .mast-nav{order:3;width:100%;margin-left:0;gap:14px;justify-content:flex-start}
  .mast-nav a{font-size:13.5px}
  .act--sm{margin-left:auto}
  .cimaise{--drop:28px}
  h1{font-size:clamp(48px,15vw,72px)}
  .hang--toile{max-width:100%}
  .trio{grid-template-columns:1fr;gap:26px}
  .trio .ph img{aspect-ratio:5/4}
  .ph--enseigne{max-width:100%}
  .carte-cols{grid-template-columns:1fr;gap:34px}
  .infos-grid{grid-template-columns:1fr;gap:30px}
  .ph--large img{max-height:none}
  .cartel{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .rvl,.rvl.vu{opacity:1;transform:none;transition:none}
}