/* Maison Citron — 12 rue Assad Ibn al Farrat, Marshan, Tanger
   Palette « citron & émeraude » : un fond de crème citronnée, l'encre verte de
   sa signature sur les assiettes, et un système de carreaux pastel prélevé sur
   son mur en damier (corail, menthe, beurre). Toute la couleur des fruits —
   caramel, framboise, chocolat — ne vit QUE dans les photographies.
   Archétype : « le carrelage » — un damier pastel porte le titre, une frise de
   carreaux sépare les sections, les pâtisseries sont posées comme sur le comptoir. */

@font-face{font-family:Parisienne;src:url(../fonts/parisienne-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url(../fonts/dmserif-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url(../fonts/dmserif-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dmsans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(../fonts/dmsans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --cream:#f7edcf;
  --cream-2:#f1e6c2;
  --citron:#f2d970;
  --emerald:#2b573e;
  --emerald-d:#20362a;
  --ink:#20362a;
  --ink-soft:#4a6551;
  --ink-mute:#6a7f6f;
  --coral:#d49c83;
  --mint:#cfe0c8;
  --butter:#ddcc95;
  --filet:#d9cfa8;
  --filet-2:#e6dcbc;
  --wrap:1140px;
  --pad:clamp(20px,4.5vw,44px);
  --tuiles:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Crect%20width%3D%27240%27%20height%3D%27240%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23d49c83%27%2F%3E%3Crect%20x%3D%2760%27%20y%3D%270%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%27120%27%20y%3D%270%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23ddcc95%27%2F%3E%3Crect%20x%3D%27180%27%20y%3D%270%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%2760%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%2760%27%20y%3D%2760%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23cfe0c8%27%2F%3E%3Crect%20x%3D%27120%27%20y%3D%2760%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%27180%27%20y%3D%2760%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23d49c83%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27120%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23ddcc95%27%2F%3E%3Crect%20x%3D%2760%27%20y%3D%27120%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%27120%27%20y%3D%27120%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23cfe0c8%27%2F%3E%3Crect%20x%3D%27180%27%20y%3D%27120%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%270%27%20y%3D%27180%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%2760%27%20y%3D%27180%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23d49c83%27%2F%3E%3Crect%20x%3D%27120%27%20y%3D%27180%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23f7edcf%27%2F%3E%3Crect%20x%3D%27180%27%20y%3D%27180%27%20width%3D%2760%27%20height%3D%2760%27%20fill%3D%27%23ddcc95%27%2F%3E%3C%2Fsvg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:'DM Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.64;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
h2,h3{font-family:'DM Serif Display',Georgia,serif;color:var(--emerald);line-height:1.1}
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}

/* ── Frise de carreaux ─────────────────────────────────────────────────── */
.tuiles{
  height:40px;border:0;margin:0;
  background:var(--tuiles) center/80px 80px;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  opacity:.9;
}

/* ── Bandeau ───────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:clamp(12px,3vw,32px);
  padding:11px var(--pad);
  background:color-mix(in srgb,var(--cream) 90%,transparent);
  backdrop-filter:saturate(1.15) blur(9px);
  border-bottom:1px solid var(--filet-2);
}
.brand{
  font-family:Parisienne,cursive;font-size:30px;line-height:1;
  color:var(--emerald);text-decoration:none;flex:0 0 auto;
  padding-top:3px;
}
.mast-nav{display:flex;gap:clamp(12px,2.2vw,26px);margin-left:auto;flex-wrap:wrap}
.mast-nav a{
  font-size:14.5px;font-weight:500;letter-spacing:.01em;text-decoration:none;
  color:var(--ink-soft);padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;
}
.mast-nav a:hover{color:var(--emerald);border-bottom-color:var(--emerald)}

/* ── Actions ───────────────────────────────────────────────────────────── */
.act{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--emerald);color:var(--cream);text-decoration:none;
  font-weight:500;font-size:15.5px;letter-spacing:.006em;
  padding:12px 22px;border-radius:999px;flex:0 0 auto;
  border:1px solid var(--emerald);transition:background .2s,border-color .2s;
}
.act:hover{background:var(--emerald-d);border-color:var(--emerald-d)}
.act--sm{font-size:14px;padding:8px 16px}
.act--ghost{background:transparent;color:var(--emerald)}
.act--ghost:hover{background:color-mix(in srgb,var(--emerald) 8%,transparent);color:var(--emerald)}
.act svg{flex:0 0 auto}

/* ── Hero « le carrelage » ─────────────────────────────────────────────── */
.hero{
  position:relative;text-align:center;
  padding:clamp(52px,8vw,104px) 0 clamp(40px,6vw,72px);
  background-color:var(--cream);
  background-image:
    linear-gradient(rgba(247,237,207,.80),rgba(247,237,207,.66)),
    var(--tuiles);
  background-size:auto, 128px 128px;
  background-position:center, center;
  border-bottom:1px solid var(--filet);
}
.hero .wrap{max-width:900px}
.kicker{
  font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 clamp(18px,2.4vw,26px);
}
.wordmark{
  font-family:Parisienne,cursive;font-weight:400;color:var(--emerald);
  font-size:clamp(74px,15vw,150px);line-height:.86;letter-spacing:.01em;
  margin:0;
}
.wordmark .l2{display:block;margin-top:-.04em}
.devise{
  font-family:'DM Serif Display',Georgia,serif;font-style:italic;
  font-size:clamp(19px,2.5vw,27px);color:var(--emerald);
  margin:clamp(22px,3vw,34px) auto 0;max-width:22ch;
}
.etoiles{
  display:inline-flex;align-items:center;gap:9px;
  margin:clamp(18px,2.4vw,26px) 0 0;font-size:15px;color:var(--ink-soft);
}
.etoiles .st{color:var(--citron);font-size:17px;letter-spacing:.06em;
  -webkit-text-stroke:.4px var(--butter)}
.etoiles b{color:var(--emerald);font-weight:500}
.hero-cta{
  display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(26px,3.4vw,38px);
}

/* Les assiettes du comptoir */
.comptoir{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(14px,2.6vw,30px);
  margin-top:clamp(40px,5.5vw,68px);
}
.assiette{margin:0;width:clamp(120px,17vw,176px);text-align:center}
.assiette img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:1px solid var(--filet);
  box-shadow:0 10px 26px -14px rgba(32,54,42,.45);
  background:#fff;
}
.assiette figcaption{
  font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--ink-soft);
  margin-top:11px;line-height:1.4;
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sec{padding:clamp(56px,8vw,108px) 0}
.sec--alt{background:var(--cream-2)}
.sec-tete{max-width:60ch;margin:0 0 clamp(34px,4.5vw,54px)}
.eyebrow{
  font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--coral);margin:0 0 .9em;
}
.sec h2{font-size:clamp(31px,4.6vw,48px);letter-spacing:-.008em}
.chapo{
  font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink-soft);
  max-width:60ch;margin:1.05em 0 0;line-height:1.62;
}

/* Le comptoir — duo texte / détail */
.duo{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,64px);align-items:center;
}
.duo-txt p{color:var(--ink);max-width:56ch}
.duo-txt p+p{margin-top:1.05em}
.signe{
  font-family:Parisienne,cursive;font-size:30px;color:var(--emerald);
  margin-top:.6em;line-height:1;
}
.duo-fig{margin:0}
.duo-fig img{
  width:100%;border-radius:6px;border:1px solid var(--filet);
  box-shadow:0 16px 36px -22px rgba(32,54,42,.5);
}

/* ── Cartel ────────────────────────────────────────────────────────────── */
.cartel{display:block;margin:12px 2px 0}
.cartel-t{
  display:block;font-family:'DM Serif Display',Georgia,serif;
  font-size:18px;color:var(--emerald);line-height:1.2;
}
.cartel-d{
  display:block;font-size:13.5px;line-height:1.5;color:var(--ink-mute);margin-top:4px;
}

/* ── Nos pâtisseries ───────────────────────────────────────────────────── */
.grille{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.8vw,34px);
}
.piece{margin:0}
.piece img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:6px;border:1px solid var(--filet);
  box-shadow:0 12px 30px -20px rgba(32,54,42,.5);
}

/* ── Nous trouver ──────────────────────────────────────────────────────── */
.infos-grid{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(30px,5vw,66px);align-items:start;
}
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.info-bloc h3{font-size:20px;margin:0 0 .7em}
.info-bloc p{color:var(--ink-soft);margin:0 0 .6em}
.info-bloc .act{margin-top:.6em}
.lien{
  color:var(--emerald);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--emerald);
}
.lien:hover{color:var(--emerald-d);border-bottom-color:var(--emerald-d)}
.note{font-size:14px;color:var(--ink-mute)}
.note .st{color:var(--citron);-webkit-text-stroke:.4px var(--butter)}
.info-fig{margin:0}
.info-fig img{
  width:100%;border-radius:6px;border:1px solid var(--filet);
  box-shadow:0 16px 36px -22px rgba(32,54,42,.5);
}

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied{padding:clamp(46px,6vw,76px) 0 clamp(34px,4vw,52px);text-align:center}
.pied-nom{font-family:Parisienne,cursive;font-size:44px;color:var(--emerald);margin:0 0 .18em;line-height:1}
.pied-l{font-size:14px;color:var(--ink-mute);margin:0 0 .3em}
.pied-devise{
  font-family:'DM Serif Display',Georgia,serif;font-style:italic;
  font-size:16.5px;color:var(--ink-soft);margin-top:.7em;
}
.gloss{font-family:'DM Sans',sans-serif;font-style:normal;font-size:.82em;color:var(--ink-mute)}

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

/* ── Adaptatif ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:32px}
  .duo-fig{max-width:520px}
  .grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .infos-grid{grid-template-columns:1fr;gap:38px}
  .info-fig{max-width:560px}
}
@media (max-width:600px){
  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:16px}
  .mast-nav a{font-size:13.5px}
  .brand{font-size:26px}
  .act--sm{margin-left:auto}
  .comptoir{gap:16px 12px}
  .assiette{width:clamp(104px,40vw,150px)}
  .info-cols{grid-template-columns:1fr;gap:26px}
}
@media (max-width:400px){
  .grille{grid-template-columns:1fr;gap:24px}
  .piece img{aspect-ratio:5/4}
}

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