/* =========================================================================
   VILLA MUSEUM MOGADOR — feuille de style unique
   DA : musée · galerie · livre d'art · maison d'architecte.
   La photographie domine ; le texte accompagne ; le blanc respire.
   Deux familles : Cormorant Garamond (serif d'édition) + Inter (utilitaire).
   ========================================================================= */

:root{
  --paper:#F5F2EC;        /* blanc architectural / chaux */
  --paper-2:#EFEBE2;      /* variante sourde */
  --ink:#1B1714;          /* noir photographique chaud */
  --ink-soft:#57504733;   /* voiles */
  --prose:#413B33;        /* texte courant */
  --muted:#6B6257;      /* AA sur chaux (4.6:1) */
  --thuya-text:#7A5F38; /* thuya lisible en texte (AA) */        /* galet — légendes, méta */
  --line:#E1DACC;         /* filets */
  --thuya:#9A7B4F;        /* miel / thuya — accent chaud rare */
  --bleu:#26485C;         /* bleu d'Essaouira — accent froid */
  --bleu-deep:#1C3646;

  --serif:"Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --container:1320px;
  --gutter:clamp(1.25rem, 5vw, 5rem);
  --reading:64ch;

  --step--1:clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.7rem, 1.5rem + 1vw, 2.4rem);
  --step-3: clamp(2.3rem, 1.9rem + 2vw, 3.6rem);
  --step-4: clamp(3rem, 2.2rem + 4vw, 6rem);
  --step-5: clamp(3.6rem, 2.4rem + 6vw, 8.5rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}   /* l'<img> participe à la mise en page comme enfant direct */
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:400;line-height:1.08;margin:0;letter-spacing:.005em}

/* utilitaire / labels : la linéale discrète */
.kicker,.nav a,.btn,.lang,.credit,.cartel__meta,.field label,.footer *,
.pager__lbl,.eyebrow{font-family:var(--sans)}
.eyebrow,.kicker{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.reading{max-width:var(--reading)}
.center{text-align:center}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink)}
.prose{color:var(--prose)}
.prose p{margin:0 0 1.1em}
.dim{color:var(--muted)}
.rule{width:44px;height:1px;background:var(--thuya);border:0;margin:2rem 0}
.center .rule{margin-inline:auto}

/* ---- header / navigation --------------------------------------------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem var(--gutter);
  color:var(--paper);
  transition:background .5s var(--ease),color .5s var(--ease),padding .4s var(--ease);
}
.site-head.is-static{position:sticky}
.site-head.is-solid{
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  color:var(--ink);
  border-bottom:1px solid var(--line);
  padding-block:.8rem;backdrop-filter:saturate(1.2) blur(6px);
}
/* monogramme officiel VMM (dessin de Rachid Haloui) */
.mark{display:block;height:1.55rem;width:auto;fill:currentColor;margin-bottom:.5rem}
.mark--foot{height:2.4rem;margin-bottom:.9rem}
.foot-slogan{display:block;font-family:var(--serif);font-style:italic;
  font-size:1.02rem;opacity:.75;margin-top:.5rem}
.hero__slogan{margin-top:1.5rem;font-family:var(--serif);font-style:italic;
  font-size:var(--step-1);font-weight:300;opacity:.95;letter-spacing:.01em}

.brand{display:flex;flex-direction:column;line-height:1;letter-spacing:.02em}
.brand b{font-family:var(--serif);font-weight:500;font-size:1.32rem}
.brand span{font-family:var(--sans);font-size:.56rem;letter-spacing:.42em;
  text-transform:uppercase;margin-top:.42rem;opacity:.85}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{font-size:.78rem;letter-spacing:.06em;position:relative;opacity:.92}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:currentColor;transition:width .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.head-right{display:flex;align-items:center;gap:1.15rem}
.lang{display:flex;gap:.45rem;font-size:.72rem;letter-spacing:.1em}
.lang a{opacity:.5}.lang a.on{opacity:1;font-weight:600}
.btn{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;padding:.62rem 1.15rem;border-radius:999px;
  transition:background .35s var(--ease),color .35s var(--ease);white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.site-head:not(.is-solid) .btn:hover{background:var(--paper);color:var(--ink)}
.burger{display:none;background:none;border:0;color:inherit;cursor:pointer;
  width:34px;height:24px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1.4px;background:currentColor;transition:.35s var(--ease)}
.burger span:nth-child(1){top:3px}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:19px}

/* overlay mobile */
.drawer{position:fixed;inset:0;z-index:80;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:2rem var(--gutter);
  transform:translateY(-100%);transition:transform .6s var(--ease);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer a{font-family:var(--serif);font-size:clamp(1.9rem,9vw,3rem);padding:.35rem 0;opacity:.9}
.drawer .lang{margin-top:2rem;font-size:.85rem}
.drawer__close{position:absolute;top:1.4rem;right:var(--gutter);background:none;border:0;color:var(--paper);
  font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}

/* ---- hero ------------------------------------------------------------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;
  align-items:flex-end;color:var(--paper);
  background:var(--ink)}   /* pré-peinture élégante : jamais un blanc vide avant décodage */
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;animation:slowzoom 24s var(--ease) both}
@keyframes slowzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(10,8,6,.62) 0%, rgba(10,8,6,.12) 42%, rgba(10,8,6,.28) 100%)}
.hero__in{position:relative;z-index:2;width:100%;padding:0 var(--gutter) clamp(2.4rem,7vh,5rem)}
.hero__sig{font-size:var(--step-5);line-height:.98;font-weight:300;max-width:16ch;
  letter-spacing:-.01em}
.hero__sub{font-family:var(--sans);font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;
  margin:0 0 1.4rem;opacity:.9}
.hero__base{margin-top:1.6rem;font-size:var(--step-1);font-weight:300;max-width:34ch;opacity:.95}
.scrollcue{position:absolute;left:50%;bottom:1.4rem;z-index:2;transform:translateX(-50%);
  font-family:var(--sans);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8}

/* ---- sections génériques --------------------------------------------- */
section{position:relative}
.band{padding-block:clamp(4.5rem,11vh,9rem)}
.band--tight{padding-block:clamp(3rem,7vh,5.5rem)}
.band--paper2{background:var(--paper-2)}
.sec-head{margin-bottom:clamp(2rem,5vh,3.5rem)}
.sec-head h2{font-size:var(--step-3);font-weight:300;margin-top:.5rem}
.sec-head p{margin:.9rem 0 0}

/* concept / texte + citation */
.statement{font-size:var(--step-2);line-height:1.28;font-weight:300;max-width:22ch}
.pull{font-size:var(--step-2);font-weight:300;line-height:1.3;max-width:26ch;color:var(--ink)}

/* trois portes */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.5vw,1.4rem)}
.door{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;background:var(--paper-2)}
.door img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.door:hover img{transform:scale(1.05)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,8,6,.6),rgba(10,8,6,0) 55%)}
.door__cap{position:absolute;left:0;bottom:0;z-index:2;padding:1.3rem 1.4rem;color:var(--paper)}
.door__cap .n{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;font-family:var(--sans);opacity:.85}
.door__cap h3{font-size:var(--step-2);font-weight:300;margin-top:.3rem}

/* image pleine largeur / panorama */
.full{position:relative}
.full img{width:100%;height:clamp(320px,72svh,760px);object-fit:cover}
.full--pano img{height:clamp(300px,60svh,620px)}
.full__cap{position:absolute;left:var(--gutter);bottom:1.1rem;color:var(--paper);
  font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;
  text-shadow:0 1px 20px rgba(0,0,0,.5)}

/* duo image + texte */
.duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,4rem);align-items:center}
.duo--rev .duo__txt{order:-1}
.duo__img{overflow:hidden}
.duo__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__img--land img{aspect-ratio:4/3}

/* galerie mosaïque */
.mosaic{columns:3;column-gap:clamp(.6rem,1.4vw,1.1rem)}
.mosaic figure{break-inside:avoid;margin:0 0 clamp(.6rem,1.4vw,1.1rem)}
.mosaic img{width:100%}
.figcap,.cartel__meta{font-family:var(--sans);font-size:.68rem;letter-spacing:.02em;color:var(--muted);
  margin-top:.5rem}

/* cartel muséal */
.cartel{border-left:1px solid var(--thuya);padding-left:1.1rem}
.cartel h3{font-size:var(--step-1);font-weight:400}
.cartel__meta{margin-top:.4rem;text-transform:uppercase;letter-spacing:.16em;font-size:.62rem}

/* liste appartements */
.apts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.5vw,2rem)}
.apt{border-top:1px solid var(--line);padding-top:1.3rem}
.apt .lvl{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--thuya-text)}
.apt h3{font-size:var(--step-2);font-weight:300;margin:.3rem 0 .5rem}

/* liste features / rituels */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.feat h3{font-size:var(--step-1);font-weight:400;margin-bottom:.4rem}
.feat .kicker{display:block;margin-bottom:.9rem}

/* sous-titre de page (ex. « L'architecte derrière la maison ») */
.page-sub{font-size:var(--step-1);font-weight:300;color:var(--thuya-text);
  margin:.6rem 0 1.4rem;letter-spacing:.005em}

/* textes scandés : plusieurs paragraphes dans un même bloc */
.statement p{margin:0 0 .7em}
.statement p:last-child{margin-bottom:0}
.pull p{margin:0 0 .55em}
.pull p:last-child{margin-bottom:0}
.lead p{margin:0 0 .8em}
.lead p:last-child{margin-bottom:0}

/* informations pratiques : séparées du récit culturel (règle éditoriale) */
.apt__prat{margin-top:1.1rem;padding-top:.9rem;border-top:1px dotted var(--line)}
.prat__lbl{font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.prat__wait{font-family:var(--sans);font-size:.78rem;line-height:1.55;
  color:var(--muted);margin-top:.45rem}

/* note honnête (contenu à enrichir en septembre) */
.soon{font-family:var(--sans);font-size:.72rem;letter-spacing:.02em;color:var(--muted);
  border:1px dashed var(--line);padding:.7rem .9rem;border-radius:4px;display:inline-block}

/* CTA bande réservation */
.invite{text-align:center}
.invite h2{font-size:var(--step-4);font-weight:300;max-width:18ch;margin-inline:auto}
.link-lg{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-top:1.6rem;
  border-bottom:1px solid currentColor;padding-bottom:.4rem}
.link-lg .arw{transition:transform .4s var(--ease)}
.link-lg:hover .arw{transform:translateX(6px)}

/* formulaire réserver */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.6rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--sans);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font-family:var(--serif);font-size:1.05rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:.55rem 0;border-radius:0}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--thuya)}
.btn-submit{grid-column:1/-1;justify-self:start;font-family:var(--sans);font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--paper);
  border:0;padding:.95rem 2rem;border-radius:999px;cursor:pointer;transition:opacity .3s}
.btn-submit:hover{opacity:.85}
.contact-alt{font-family:var(--sans);font-size:.82rem;color:var(--prose)}

/* pager bas de page (le musée appelle la salle suivante) */
.pager{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;
  padding-block:2.2rem}
.pager a{font-family:var(--serif);font-size:var(--step-1)}
.pager__lbl{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.pager .next{text-align:right;margin-left:auto}

/* ---- footer ----------------------------------------------------------- */
.site-foot{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,7vh,5rem);margin-top:2rem}
.site-foot .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.site-foot a{opacity:.8}.site-foot a:hover{opacity:1}
.foot-brand b{font-family:var(--serif);font-size:1.5rem;font-weight:500;display:block}
.foot-base{font-family:var(--serif);font-size:1.15rem;font-weight:300;opacity:.85;max-width:24ch;margin-top:.8rem}
.foot-col h4{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin-bottom:1rem}
.foot-col a,.foot-col p{display:block;font-family:var(--sans);font-size:.86rem;margin-bottom:.55rem;opacity:.85}
.credit{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid #ffffff1a;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.04em;opacity:.6}

/* focus clavier + lien d'evitement */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--bleu);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:.7rem 1.2rem;font-family:var(--sans);font-size:.8rem}
.skip:focus{left:0}

/* ---- reveal ----------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero__media img{animation:none}
}

/* ---- responsive ------------------------------------------------------- */
@media (max-width:900px){
  .nav,.head-right .lang,.head-right .btn{display:none}
  .burger{display:block}
  .doors{grid-template-columns:1fr;gap:1rem}
  .duo{grid-template-columns:1fr;gap:1.4rem}
  .duo--rev .duo__txt{order:0}
  .mosaic{columns:2}
  .apts{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .site-foot .foot-grid{grid-template-columns:1fr;gap:2.2rem}
}
@media (max-width:520px){
  .mosaic{columns:1}
  .hero__sig{font-size:clamp(3rem,15vw,4.4rem)}
}