/* Pâtisserie Al Afrah 1978 — 33 rue de la Kasbah, Tanger
   Palette « cramoisi & crème » : crème chaude + encre + un seul chroma,
   le cramoisi de leur logo. L'or et le miel des pâtisseries ne vivent QUE
   dans les photographies, jamais dans l'interface.
   Archétype : « l'étiquette 1978 » — un cartouche à double filet cramoisi. */

@font-face{font-family:"Bitter";src:url(../fonts/bitter.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bitter";src:url(../fonts/bitter.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrumentsans-var.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrumentsans-var.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrumentsans-var.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --creme:#f5efe3;
  --creme-2:#efe6d5;
  --encre:#2a1c14;
  --encre-2:#6a5648;
  --encre-3:#8a7460;
  --cramoisi:#ad212f;
  --cramoisi-fonce:#8f1a26;
  --filet:#dccfba;
  --filet-2:#e7ddcc;
  --wrap:1180px;
  --pad:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--creme);color:var(--encre);
  font-family:"Instrument Sans",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:"Bitter",Georgia,serif;font-weight:600;margin:0;line-height:1.08}
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}

/* ── Double filet cramoisi — le motif de l'étiquette ───────────────────── */
.filet2{width:46px;height:0;border-top:1.5px solid var(--cramoisi);position:relative;margin:0 0 16px}
.filet2::after{content:"";position:absolute;top:4px;left:0;width:46px;border-top:1.5px solid var(--cramoisi)}
.filet2--c{margin-left:auto;margin-right:auto}

/* ── Bandeau ───────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:clamp(12px,3vw,30px);
  padding:11px var(--pad);
  background:color-mix(in srgb,var(--creme) 92%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--filet-2);
}
.brand{
  font-family:"Bitter",Georgia,serif;font-size:21px;letter-spacing:.005em;
  text-decoration:none;flex:0 0 auto;color:var(--encre);
}
.brand b{color:var(--cramoisi);font-weight:400}
.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(--cramoisi);border-bottom-color:var(--cramoisi)}

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

/* ── Hero « l'étiquette 1978 » ─────────────────────────────────────────── */
.hero{padding:clamp(40px,6vw,72px) 0 0}
.cartouche{
  position:relative;max-width:640px;margin:0 auto;text-align:center;
  border:1.5px solid var(--cramoisi);padding:clamp(30px,5vw,50px) clamp(24px,5vw,56px);
  background:color-mix(in srgb,var(--creme) 55%,#fff);
}
.cartouche::before{
  content:"";position:absolute;inset:6px;border:1px solid var(--cramoisi);
  pointer-events:none;
}
.cartouche-sur{
  font-size:12.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cramoisi);margin:0 0 .85em;
}
h1{font-size:clamp(40px,7.4vw,76px);letter-spacing:-.012em;color:var(--encre);margin:0}
h1 .h1-l1{display:block}
h1 .h1-l2{display:block}
.cartouche-ar{
  font-size:clamp(21px,3vw,28px);color:var(--cramoisi);margin:.35em 0 .55em;
  line-height:1;direction:rtl;
}
.cartouche-devise{
  font-family:"Bitter",Georgia,serif;font-size:clamp(16px,2vw,20px);
  color:var(--encre-2);margin:0;letter-spacing:.02em;
}
.cartouche-etoile{
  display:block;margin-top:1.1em;font-size:13.5px;color:var(--encre-3);
  letter-spacing:.01em;
}
.cartouche-etoile b{color:var(--cramoisi);font-weight:600}

.hero-photo{margin-top:clamp(30px,5vw,54px)}
.hero-photo img{width:100%;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.hero-cap{
  max-width:var(--wrap);margin:10px auto 0;padding:0 var(--pad);
  font-size:13px;color:var(--encre-3);text-align:center;
}

/* ── Cartel de galerie ─────────────────────────────────────────────────── */
.cartel{display:block;margin:10px 0 0;max-width:36ch}
.cartel-t{
  display:block;font-size:12px;font-weight:600;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,90px) 0}
.sec--alt{background:var(--creme-2)}
.sec-head{margin:0 0 clamp(26px,3.6vw,44px)}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cramoisi);margin:0 0 .5em;
}
h2{font-size:clamp(30px,4.4vw,48px);letter-spacing:-.01em;margin:0 0 .35em}
.chapo{font-size:16.5px;color:var(--encre-2);max-width:60ch;margin:.7em 0 0}

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

.adresses{margin-top:1.7em;border-top:1px solid var(--filet);padding-top:1.2em}
.adresses-lab{font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--cramoisi);margin:0 0 .8em}
.adresses-liste{display:flex;flex-wrap:wrap;gap:8px 10px}
.adresses-liste li{
  font-size:14.5px;border:1px solid var(--filet);border-radius:2px;
  padding:6px 13px;color:var(--encre);background:color-mix(in srgb,var(--creme) 50%,#fff);
}

.ph{margin:0}
.ph img{width:100%;border:1px solid var(--filet)}
.ph--tall img{aspect-ratio:3/4;object-fit:cover}

.grille{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,32px);margin-top:clamp(28px,3.6vw,46px);
}
.grille .ph img{aspect-ratio:4/5;object-fit:cover}
.grille--wide .ph img{aspect-ratio:4/5}

/* ── Sur commande ──────────────────────────────────────────────────────── */
.commande{
  margin-top:clamp(34px,4.6vw,60px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,56px);align-items:center;
}
.commande-carte{
  position:relative;border:1.5px solid var(--cramoisi);
  padding:clamp(26px,4vw,42px);background:color-mix(in srgb,var(--creme) 50%,#fff);
}
.commande-carte::before{content:"";position:absolute;inset:6px;border:1px solid var(--cramoisi);pointer-events:none}
.commande-carte h3{font-size:clamp(23px,3vw,30px);margin:0 0 .5em;color:var(--encre)}
.commande-carte p{color:var(--encre-2);font-size:15.5px;margin:0 0 1.3em}
.checklist{margin:0 0 1.6em}
.checklist li{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-bottom:1px dotted var(--filet);
}
.checklist li:last-child{border-bottom:0}
.check-ic{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--cramoisi);color:var(--cramoisi);
  display:grid;place-items:center;margin-top:1px;
}
.check-ic svg{display:block}
.check-t{font-weight:600;font-size:15px;color:var(--encre)}
.check-t span{display:block;font-weight:400;font-size:13.5px;color:var(--encre-3);margin-top:1px}
.commande-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.commande-note{font-size:12.5px;color:var(--encre-3);margin:1.2em 0 0;line-height:1.5}

.commande-imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
.commande-imgs .ph img{aspect-ratio:4/5;object-fit:cover}

/* ── 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;color:var(--encre)}
.info-bloc p{color:var(--encre-2)}
.horaires{border-collapse:collapse;width:100%;max-width:300px}
.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 tr:last-child th,.horaires tr:last-child td{border-bottom:0}
.tous{font-size:13.5px;color:var(--encre-3);margin:.7em 0 0}
.lien{color:var(--cramoisi);font-weight:500;text-decoration:none;border-bottom:1px solid var(--cramoisi)}
.lien:hover{color:var(--cramoisi-fonce)}
.note--bloc{font-size:14px;color:var(--encre-3);margin-top:.6em}
.note--bloc b{color:var(--cramoisi);font-weight:600}

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied{padding:clamp(40px,5vw,64px) 0 clamp(30px,4vw,48px);border-top:1px solid var(--filet)}
.pied-nom{font-family:"Bitter",Georgia,serif;font-weight:600;font-size:28px;margin:0 0 .1em;color:var(--encre)}
.pied-nom b{color:var(--cramoisi);font-weight:400}
.pied-ar{color:var(--cramoisi);font-size:19px;margin:0 0 .5em;direction:rtl}
.pied-l{font-size:14.5px;color:var(--encre-3);margin:0 0 .25em}
.pied-devise{font-family:"Bitter",Georgia,serif;font-size:15px;color:var(--encre-2);margin-top:.6em}

/* ── 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){
  .duo{grid-template-columns:1fr;gap:30px}
  .ph--maison{max-width:460px}
  .grille{grid-template-columns:1fr 1fr}
  .commande{grid-template-columns:1fr;gap:32px}
  .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}
  .cartouche{padding:30px 22px}
  .grille{grid-template-columns:1fr;gap:24px}
  .grille .ph img{aspect-ratio:5/4}
  .commande-imgs .ph img{aspect-ratio:4/5}
  .ph--maison{max-width:100%}
  .infos-grid{grid-template-columns:1fr;gap:30px}
  .cartel{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .rvl,.rvl.vu{opacity:1;transform:none;transition:none}
}