/* Restaurant Basidi — « bleu de Fès & faïence » : bleu Fassi + plâtre + encre.
   La couleur polychrome (faïence de Safi, safran) vit dans les photographies.
   Gloock + Space Grotesk. Hero « le mur d'assiettes ». */

@font-face{font-family:Gloock;src:url(../fonts/gloock-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/spacegrotesk-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/spacegrotesk-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url(../fonts/spacegrotesk-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --blue:#213a54;        /* bleu Fassi profond — ground sombre */
  --blue-2:#2b4a68;
  --plaster:#f3ecde;     /* plâtre — ground clair */
  --plaster-2:#eae1cf;
  --ink:#1a2735;
  --ink-soft:#4a5a6b;
  --cream:#f3ecde;
  --line:rgba(243,236,222,.22);
  --line-d:#d8cdb6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--plaster);color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.6;
  font-size:clamp(15.5px,1.02vw,17.5px);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92vw);margin-inline:auto}
h1,h2,h3{font-family:Gloock,Georgia,serif;font-weight:400;line-height:1.06}
.eyebrow{font-family:'Space Grotesk';font-weight:500;letter-spacing:.28em;text-transform:uppercase;font-size:.66rem}
.btn{
  display:inline-block;font-family:'Space Grotesk';font-weight:500;letter-spacing:.05em;
  font-size:.82rem;padding:.9rem 1.6rem;border-radius:2px;transition:.26s;
}
.btn.cream{background:var(--cream);color:var(--blue)}
.btn.cream:hover{background:#fff}
.btn.line{border:1px solid var(--line-d);color:var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.line-c{border:1px solid rgba(243,236,222,.5);color:var(--cream)}
.btn.line-c:hover{background:var(--cream);color:var(--blue)}

/* ---------- top ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:6;padding:1.5rem 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between}
.top .mk{font-family:Gloock;font-size:1.5rem;color:var(--cream);letter-spacing:.01em}
.top nav{display:flex;gap:1.7rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream)}
.top nav a{opacity:.82;transition:.2s}.top nav a:hover{opacity:1}
@media(max-width:760px){.top nav{display:none}}

/* ---------- hero « mur d'assiettes » ---------- */
.hero{background:var(--blue);color:var(--cream);position:relative;overflow:hidden;padding:8.4rem 0 4.6rem;text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 8%,rgba(255,255,255,.06),transparent 60%);pointer-events:none}
.hero .eyebrow{color:rgba(243,236,222,.72);margin-bottom:1.3rem}
.hero h1{font-size:clamp(3.4rem,12vw,7.6rem);letter-spacing:.005em;margin-bottom:.4rem}
.hero .sub{max-width:40ch;margin:.4rem auto 0;color:rgba(243,236,222,.82);font-size:1.05rem}
.hero .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem;position:relative;z-index:3}

.plates{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(.6rem,3.4vw,2.6rem);margin-top:3.4rem}
.plate{border-radius:50%;overflow:hidden;background:var(--blue-2);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.55);
  outline:1px solid rgba(243,236,222,.34);outline-offset:6px}
.plate img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.plate.a{width:clamp(120px,20vw,190px);margin-top:2.4rem}
.plate.b{width:clamp(150px,26vw,250px)}
.plate.c{width:clamp(120px,20vw,190px);margin-top:3.4rem}
@media(max-width:520px){.plates{gap:.5rem}.plate.a,.plate.c{margin-top:1.4rem}}

/* ---------- sections ---------- */
section{padding:5.4rem 0}
.head{max-width:56ch}
.head.center{margin-inline:auto;text-align:center}
.head .eyebrow{color:var(--ink-soft);display:block;margin-bottom:1rem}
.head h2{font-size:clamp(2rem,5vw,3.2rem)}
.head p{margin-top:1.1rem;color:var(--ink-soft)}

/* table / gallery — photography leads */
.table .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:3rem}
.card{position:relative;overflow:hidden;border-radius:3px;background:var(--blue-2)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.card:hover img{transform:scale(1.045)}
.card .lab{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.1rem .9rem;
  background:linear-gradient(transparent,rgba(20,30,42,.82));color:var(--cream)}
.card .lab .n{font-family:Gloock;font-size:1.02rem;line-height:1.15}
.card.big{grid-row:span 2}
.card.big img{height:100%}
@media(max-width:820px){.table .grid{grid-template-columns:repeat(2,1fr)}.card.big{grid-row:auto}}
@media(max-width:520px){.table .grid{grid-template-columns:1fr}}

/* salle — interior, dark band */
.salle{background:var(--blue);color:var(--cream)}
.salle .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
.salle .head .eyebrow{color:rgba(243,236,222,.66)}
.salle .head p{color:rgba(243,236,222,.8)}
.salle figure{overflow:hidden;border-radius:3px}
.salle .imgs{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.salle .imgs figure:first-child{grid-column:1/-1}
@media(max-width:820px){.salle .grid{grid-template-columns:1fr}}

/* trouver */
.trouver{text-align:center}
.trouver .lines{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem 3.4rem;margin:2.4rem 0}
.trouver .it .eyebrow{display:block;color:var(--ink-soft);margin-bottom:.5rem}
.trouver .note{color:var(--ink-soft);font-size:.88rem;max-width:52ch;margin:1.4rem auto 0}

footer{background:var(--ink);color:var(--cream);padding:3.4rem 0;text-align:center}
footer .mk{font-family:Gloock;font-size:1.7rem}
footer nav{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin:1.3rem 0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,236,222,.72)}
footer nav a:hover{color:var(--cream)}
footer .fine{color:rgba(243,236,222,.5);font-size:.74rem;max-width:60ch;margin:.8rem auto 0;line-height:1.7}
footer .fine a{text-decoration:underline;text-underline-offset:2px}

.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}.card:hover img{transform:none}}