/* Har Makân — encre sur papier crème. La seule couleur de la page vient des jus. */
:root{
  --encre:#17150F;
  --encre-2:#221E16;
  --creme:#F2EBDD;
  --creme-2:#E9E0CC;
  --trait:#D6CBB2;
  --trait-nuit:#3A342A;
  --gris:#6A6355;
  --gris-nuit:#A39B89;
  --or:#A87800;
  --serif:'Bodoni Moda','Didot','Times New Roman',serif;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Menlo,monospace;
  --gout:22px;
  --max:1240px;
  --sortie:cubic-bezier(.2,.8,.25,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--creme);color:var(--encre);
  font-family:var(--sans);font-size:16.5px;line-height:1.72;
  padding-inline:var(--gout);overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

.mention{
  margin:0 calc(-1*var(--gout));padding:.55rem var(--gout);
  background:var(--encre);color:var(--gris-nuit);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-align:center;line-height:1.5;
}
.mention b{color:var(--creme);font-weight:400}

/* entête, volontairement non collante */
.tete{
  max-width:var(--max);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 2rem;
  padding-block:1.7rem 1.2rem;
}
.sceau{display:block;line-height:0}
.sceau img{width:150px}
.liens{display:flex;flex-wrap:wrap;gap:.2rem 1.8rem}
.liens a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding-block:.2rem;border-bottom:1px solid transparent;transition:border-color .3s;
}
.liens a:hover{border-bottom-color:var(--encre)}

/* ouverture */
.ouverture{
  max-width:var(--max);margin-inline:auto;
  display:grid;gap:2.4rem;align-items:center;padding-block:2.2rem 4.2rem;
}
.marque{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.marque span{color:var(--or);padding-inline:.15rem}
.ouverture h1{margin:1.5rem 0 0;font-size:clamp(3rem,10.6vw,7.4rem);line-height:.92;letter-spacing:-.025em}
.ouverture h1 .v{display:block}
.ouverture h1 .it{font-style:italic}
.filet{height:1px;background:var(--trait);margin:2rem 0 1.5rem;max-width:22rem}
.accroche{font-size:1.1rem;color:var(--gris);max-width:36ch}
.actes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2.2rem}

.etal{
  margin:0;justify-self:center;width:100%;max-width:400px;aspect-ratio:4/5;
  background:var(--creme-2);border:1px solid var(--trait);
  display:flex;flex-direction:column;
}
.etal img{
  flex:1;min-height:0;width:100%;object-fit:contain;
  padding:2.4rem 2.4rem 1.4rem;filter:drop-shadow(0 22px 26px rgba(23,21,15,.2));
}
.etal figcaption{
  padding:.85rem 1rem;border-top:1px solid var(--trait);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);text-align:center;
}
@media (min-width:980px){
  .ouverture{grid-template-columns:1.1fr .9fr;gap:4.6rem;padding-block:3rem 6rem}
  .etal{max-width:430px}
}

.rail{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris);
  padding-bottom:.6rem;border-bottom:1px solid var(--trait);
}
.rail-nuit{color:var(--gris-nuit);border-bottom-color:var(--trait-nuit)}

/* la maison */
.maison{margin:0 calc(-1*var(--gout));padding:4.6rem var(--gout) 5rem;background:var(--creme-2)}
.maison-zone{max-width:var(--max);margin-inline:auto;display:grid;gap:2rem}
.maison h2{font-size:clamp(2rem,4.4vw,3.3rem);margin-bottom:1.5rem}
.colonne{display:grid;gap:1.15rem}
.colonne p{max-width:58ch;color:var(--gris)}
.colonne b{color:var(--encre);font-weight:600}
.constat{list-style:none;margin:2.1rem 0 0;padding:0;border-top:1px solid var(--trait);max-width:33rem}
.constat li{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;padding:.9rem 0;border-bottom:1px solid var(--trait)}
@media (min-width:900px){
  .maison{padding-block:6.4rem}
  .maison-zone{grid-template-columns:190px 1fr;gap:4.4rem;align-items:start}
}

/* la gamme */
.gamme{max-width:var(--max);margin-inline:auto;padding-block:5rem 4rem}
.gamme-tete{margin-bottom:2.6rem;display:grid;gap:1.5rem}
.gamme-tete .rail{max-width:190px}
.gamme-tete h2{font-size:clamp(2rem,4.4vw,3.3rem)}
.fiche{display:grid;gap:1.8rem;padding-block:3rem;border-top:1px solid var(--trait);align-items:center}
.fiche-image{position:relative;overflow:hidden}
.fiche-image img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .9s var(--sortie)}
.fiche:hover .fiche-image img{transform:scale(1.02)}
.fiche-objet .fiche-image{background:var(--creme-2);aspect-ratio:4/5;display:flex;padding:2.6rem}
.fiche-objet .fiche-image img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;filter:drop-shadow(0 20px 24px rgba(23,21,15,.2))}
.fiche-texte{display:grid;gap:.85rem;align-content:start}
.signe{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.fiche h3{font-size:clamp(2.4rem,6.2vw,3.9rem)}
.promesse{font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.35;max-width:24ch}
.ingredients{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding-block:.9rem;border-block:1px solid var(--trait);max-width:30rem}
.detail{color:var(--gris);max-width:40ch}
.fiche-pied{display:flex;align-items:center;gap:1.4rem;margin-top:.4rem}
.format{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;border:1px solid var(--encre);border-radius:3px;padding:.4rem .7rem;white-space:nowrap}
.commande{font-family:var(--mono);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--encre);padding-bottom:.18rem;cursor:pointer;transition:color .25s,border-color .25s}
.commande:hover{color:var(--or);border-bottom-color:var(--or)}
.service{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--trait);font-family:var(--mono);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
@media (min-width:860px){
  .fiche{grid-template-columns:.82fr 1.18fr;gap:4rem;padding-block:4.2rem}
  .fiche-image{grid-column:1;grid-row:1}
  .fiche-texte{grid-column:2;grid-row:1}
  .renverse{grid-template-columns:1.18fr .82fr}
  .renverse .fiche-image{grid-column:2;grid-row:1}
  .renverse .fiche-texte{grid-column:1;grid-row:1}
}

/* l'atelier */
.atelier{margin:0 calc(-1*var(--gout));padding:5rem var(--gout) 5.4rem;background:var(--encre);color:var(--creme)}
.atelier-tete,.planche{max-width:var(--max);margin-inline:auto}
.atelier-tete{display:grid;gap:1.4rem}
.atelier-tete .rail{max-width:190px}
.atelier h2{font-size:clamp(2rem,4.4vw,3.3rem);color:var(--creme)}
.accroche-nuit{color:var(--gris-nuit);max-width:62ch}
.planche{display:grid;gap:1.6rem;margin-top:3.4rem}
.planche figure{margin:0}
.duo{position:relative;isolation:isolate;background:var(--encre);overflow:hidden}
.duo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.22) brightness(.95);mix-blend-mode:screen}
.duo::after{content:"";position:absolute;inset:0;background:var(--creme);mix-blend-mode:multiply;pointer-events:none}
.planche figcaption{margin-top:.85rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-nuit)}
@media (min-width:820px){.planche{grid-template-columns:repeat(3,1fr);gap:1.8rem}}

/* l'école */
.ecole{max-width:var(--max);margin-inline:auto;display:grid;gap:2.6rem;padding-block:5rem;align-items:center}
.ecole-image{position:relative;background:var(--creme-2);overflow:hidden}
.ecole-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
.legende{position:absolute;left:0;bottom:0;background:var(--encre);color:var(--creme);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem .8rem}
.ecole-texte{display:grid;gap:1.1rem;align-content:start}
.ecole-texte .rail{max-width:190px}
.ecole-texte h2{font-size:clamp(2rem,4.4vw,3.1rem);margin:.4rem 0 .3rem}
.ecole-texte p{color:var(--gris);max-width:46ch}
.ecole-texte b{color:var(--encre);font-weight:600}
.devise{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--encre);margin-top:.5rem}
.ecole-texte .bouton{justify-self:start;margin-top:.9rem}
@media (min-width:900px){.ecole{grid-template-columns:1fr 1fr;gap:4.4rem;padding-block:6.5rem}}

/* nous joindre */
.commander{margin:0 calc(-1*var(--gout));padding:5rem var(--gout) 5.4rem;background:var(--encre);color:var(--creme)}
.commander-tete,.voies{max-width:var(--max);margin-inline:auto}
.commander-tete{display:grid;gap:1.5rem}
.commander-tete .rail{max-width:190px}
.commander h2{font-size:clamp(2rem,4.4vw,3.3rem);color:var(--creme)}
.voies{display:grid;gap:3rem;margin-top:3.4rem}
.voie{display:grid;gap:1rem;align-content:start;padding-top:1.8rem;border-top:1px solid var(--trait-nuit)}
.voie h3{font-size:2rem;color:var(--creme)}
.voie p{color:var(--gris-nuit);max-width:38ch}
.voie .bouton{justify-self:start;margin-top:.5rem}
.plaques{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
@media (min-width:820px){.voies{grid-template-columns:1fr 1fr;gap:4.4rem}}

/* boutons et plaques d'étiquette */
.bouton{
  display:inline-block;background:var(--encre);color:var(--creme);
  padding:1.02rem 1.7rem;font-family:var(--mono);font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--encre);cursor:pointer;transition:background .3s,color .3s;
}
.bouton:hover{background:transparent;color:var(--encre)}
.bouton-clair{background:var(--creme);color:var(--encre);border-color:var(--creme)}
.bouton-clair:hover{background:transparent;color:var(--creme)}
.plaque{
  display:inline-block;background:var(--creme);color:var(--encre);
  border:1px solid var(--encre);border-radius:3px;padding:.44rem .72rem;
  font-family:var(--mono);font-size:.77rem;text-decoration:none;white-space:nowrap;
  transition:background .25s,color .25s;
}
.plaque:hover{background:var(--encre);color:var(--creme)}
.plaque-nuit{border-color:var(--creme)}
.plaque-nuit:hover{background:transparent;color:var(--creme)}

/* pied */
.pied{margin:0 calc(-1*var(--gout));padding:4rem var(--gout) 1.6rem;background:var(--encre-2);color:var(--gris-nuit)}
.pied-zone{max-width:var(--max);margin-inline:auto}
.pied-logo{width:158px;filter:brightness(1.28) saturate(1.05)}
.pied-devise{font-family:var(--serif);font-style:italic;font-size:1.45rem;color:var(--creme);margin-top:1.2rem}
.pied-bas{
  display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.3rem;border-top:1px solid var(--trait-nuit);font-family:var(--mono);font-size:.72rem;
}

/* mouvement : une seule fois, à l'ouverture */
@keyframes monte{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes parait{from{opacity:0}to{opacity:1}}
.ouverture .marque{animation:parait .9s var(--sortie) .05s both}
.ouverture h1 .v{animation:monte 1s var(--sortie) both;animation-delay:calc(.16s + var(--n)*.13s)}
.ouverture .filet{animation:parait 1s var(--sortie) .72s both}
.ouverture .accroche{animation:monte .9s var(--sortie) .78s both}
.ouverture .actes{animation:monte .9s var(--sortie) .9s both}
.etal{animation:parait 1.1s var(--sortie) .45s both}
.etal img{animation:monte 1.3s var(--sortie) .6s both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}