/* ============ GARRY DAHAN — thème éditorial blanc (esprit Finck) ============ */
:root{
  --bg:#FFFFFF; --ink:#2C2C28; --soft:#6E6E66; --faint:#9C9C93; --hair:#E8E8E3;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
  --gut:clamp(1.2rem,4vw,3.5rem);
}
html[lang="he"]{ --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Assistant',system-ui,sans-serif }
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300;
  line-height:1.7; -webkit-font-smoothing:antialiased; font-size:1rem }
img{ display:block; max-width:100% }
a{ color:inherit }

/* ---------- header ---------- */
.hdr{ padding:2.2rem var(--gut) 1.6rem; text-align:center }
.hdr .logo img{ height:44px; margin-inline:auto }
.hdr nav{ margin-top:1.6rem; display:flex; justify-content:center; align-items:center; gap:2.2rem; flex-wrap:wrap }
.hdr nav a{ font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; text-decoration:none; color:var(--soft);
  padding-bottom:.25rem; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; white-space:nowrap }
.hdr nav a:hover{ color:var(--ink) }
.hdr nav a.active{ color:var(--ink); border-bottom-color:var(--ink) }
html[lang="he"] .hdr nav a{ letter-spacing:.06em; font-size:.86rem; text-transform:none }
.langs{ position:absolute; top:1.2rem; inset-inline-end:var(--gut); display:flex; gap:.15rem }
.langs button{ background:none; border:none; color:var(--faint); font:inherit; font-size:.66rem; letter-spacing:.14em;
  padding:.3rem .45rem; cursor:pointer }
.langs button[aria-pressed="true"]{ color:var(--ink); text-decoration:underline; text-underline-offset:3px }
.hdr{ position:relative }

/* ---------- fil éditorial ---------- */
.feed{ padding-block:2.5rem 0 }
.block{ margin:0 auto 6.5rem; max-width:1180px; padding-inline:var(--gut) }
.block.full{ max-width:1380px }
.block a.ph{ text-decoration:none; display:block }
.block .ph img{ width:100%; height:auto; object-fit:cover }
.block.full .ph img{ aspect-ratio:3/2; max-height:88vh }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,3vw,2.6rem); align-items:start }
.pair .ph img{ aspect-ratio:4/5 }
.cap{ text-align:center; margin-top:1.4rem }
.cap .names{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.55rem; letter-spacing:.02em; color:var(--ink) }
.cap .place{ display:block; margin-top:.35rem; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faint) }
html[lang="he"] .cap .place{ letter-spacing:.08em; font-size:.8rem; text-transform:none }
.ph:hover .names{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px }

/* ---------- blocs de texte centrés ---------- */
.statement{ text-align:center; max-width:680px; margin:8rem auto; padding-inline:var(--gut) }
.statement .eyebrow{ font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--faint); margin:0 0 1.6rem }
html[lang="he"] .statement .eyebrow{ letter-spacing:.1em; font-size:.8rem; text-transform:none }
.statement h2{ font-family:var(--serif); font-weight:500; font-style:italic; font-size:clamp(1.9rem,4vw,2.7rem);
  line-height:1.25; margin:0 0 1.4rem; letter-spacing:.01em }
.statement p{ color:var(--soft); font-size:1.02rem; margin:0 0 2rem }
.lnk{ font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:.3rem; transition:opacity .2s }
.lnk:hover{ opacity:.6 }
html[lang="he"] .lnk{ letter-spacing:.08em; font-size:.86rem; text-transform:none }

/* ---------- pages internes ---------- */
.page-title{ text-align:center; margin:3.5rem auto 4.5rem; padding-inline:var(--gut) }
.page-title h1{ font-family:var(--serif); font-weight:500; font-style:italic; font-size:clamp(2.1rem,5vw,3rem); margin:0 0 .8rem }
.page-title p{ color:var(--soft); max-width:560px; margin:0 auto }

.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.8rem clamp(1rem,2vw,1.8rem); max-width:1400px;
  margin:0 auto 6rem; padding-inline:var(--gut) }
.grid .cap{ margin-top:1rem }
.grid .cap .names{ font-size:1.18rem }
.grid .cap .place{ font-size:.58rem; letter-spacing:.24em; margin-top:.3rem }
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3,1fr) } }
.grid .ph img{ aspect-ratio:4/5; width:100%; object-fit:cover }
.grid a.ph{ text-decoration:none }

/* à propos */
.about{ max-width:980px; margin:0 auto 6rem; padding-inline:var(--gut);
  display:grid; grid-template-columns:5fr 6fr; gap:clamp(2rem,5vw,4.5rem); align-items:start }
.about .pic img{ width:100% }
.about h2{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.9rem; margin:0 0 1.2rem }
.about p{ color:var(--soft); margin:0 0 1.2rem }
.about .sig{ height:40px; margin-top:1.6rem }
.partner{ max-width:980px; margin:0 auto 7rem; padding:3.5rem var(--gut) 0; border-top:1px solid var(--hair);
  display:grid; grid-template-columns:6fr 5fr; gap:clamp(2rem,5vw,4.5rem); align-items:center }
.partner .pic img{ width:100% }

/* contact */
.contact-wrap{ text-align:center; max-width:640px; margin:4rem auto 7rem; padding-inline:var(--gut) }
.contact-wrap h1{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2rem,5vw,2.8rem); margin:0 0 1.2rem }
.contact-wrap .sub{ color:var(--soft); margin:0 0 3rem }
.cbtns{ display:flex; flex-direction:column; gap:.9rem; max-width:340px; margin-inline:auto }
.cbtns a{ display:block; text-decoration:none; font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  padding:1.05rem 1rem; border:1px solid var(--ink); color:var(--ink); transition:background .25s,color .25s }
.cbtns a:hover{ background:var(--ink); color:#fff }
.cbtns a.solid{ background:var(--ink); color:#fff }
.cbtns a.solid:hover{ opacity:.85 }
html[lang="he"] .cbtns a{ letter-spacing:.08em; font-size:.9rem; text-transform:none }
.reassure{ margin-top:2.6rem; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--soft) }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--hair); margin-top:2rem; padding:3.5rem var(--gut) 2.8rem; text-align:center }
footer .flinks{ display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:2rem }
footer .flinks a{ font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; text-decoration:none; color:var(--soft) }
footer .flinks a:hover{ color:var(--ink) }
html[lang="he"] footer .flinks a{ letter-spacing:.08em; font-size:.84rem; text-transform:none }
footer .mark img{ height:30px; margin:0 auto 1.4rem; opacity:.85 }
footer .legal{ font-size:.66rem; letter-spacing:.12em; color:var(--faint) }

/* ---------- révélation douce ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s ease }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none } }

/* ---------- mobile ---------- */
@media (max-width:720px){
  .hdr .logo img{ height:36px }
  .hdr nav{ gap:1.1rem }
  .hdr nav a{ font-size:.6rem; letter-spacing:.18em }
  html[lang="he"] .hdr nav a{ font-size:.8rem }
  .pair{ grid-template-columns:1fr; gap:4.5rem }
  .block{ margin-bottom:4.5rem }
  .statement{ margin:5.5rem auto }
  .grid{ grid-template-columns:repeat(2,1fr); gap:2.2rem 1rem }
  .about, .partner{ grid-template-columns:1fr }
  .langs{ position:static; justify-content:center; margin-top:1rem }
}

/* WhatsApp flottant */
.wa-float{ position:fixed; bottom:1.3rem; inset-inline-end:1.3rem; z-index:60; width:52px; height:52px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22); transition:transform .2s }
.wa-float:hover{ transform:scale(1.07) }

/* ---------- pop-up promo ---------- */
.promo-ov{ position:fixed; inset:0; z-index:90; background:rgba(20,20,18,.55); display:none;
  align-items:center; justify-content:center; padding:1.2rem }
.promo-ov.on{ display:flex }
.promo{ background:#fff; max-width:760px; width:100%; display:grid; grid-template-columns:5fr 6fr;
  position:relative; box-shadow:0 30px 80px rgba(0,0,0,.35) }
.promo .pimg img{ width:100%; height:100%; object-fit:cover; display:block }
.promo .ptxt{ padding:2.6rem 2.4rem; display:flex; flex-direction:column; justify-content:center; text-align:center }
.promo .eyebrow{ font-size:.6rem; letter-spacing:.32em; text-transform:uppercase; color:var(--faint); margin:0 0 1.1rem }
html[lang="he"] .promo .eyebrow{ letter-spacing:.08em; font-size:.78rem; text-transform:none }
.promo h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.75rem; line-height:1.25; margin:0 0 1rem }
.promo p{ color:var(--soft); font-size:.96rem; line-height:1.7; margin:0 0 1.8rem }
.promo .lnk{ align-self:center }
.promo-x{ position:absolute; top:.6rem; inset-inline-end:.8rem; background:none; border:none; font-size:1.7rem;
  line-height:1; color:var(--faint); cursor:pointer; padding:.3rem; z-index:2 }
.promo-x:hover{ color:var(--ink) }
.promo .ptxt{ position:relative }
.promo .orn{ position:absolute; opacity:.95; pointer-events:none }
.promo .orn-tl{ top:.7rem; inset-inline-start:.9rem; width:128px }
.promo .orn-br{ bottom:.6rem; inset-inline-end:.7rem; width:118px }
.promo .eyebrow, .promo h3, .promo p, .promo .lnk{ position:relative; z-index:1 }
@media (max-width:640px){ .promo .orn-tl{ width:74px } .promo .orn-br{ width:66px } }
@media (max-width:640px){
  .promo{ grid-template-columns:1fr; max-width:400px }
  .promo .pimg img{ aspect-ratio:4/3 }
  .promo .ptxt{ padding:1.9rem 1.5rem 2.2rem }
}

.promo .ptxt{ padding:2rem 2rem 1.8rem }
.promo .pname{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:1.55rem; margin:0 0 .2rem }
.promo .pcrew{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); margin:0 0 .9rem }
html[lang="he"] .promo .pcrew{ letter-spacing:.05em; font-size:.85rem; text-transform:none }
.promo .pprice{ font-family:var(--serif); font-weight:500; font-size:3.1rem; line-height:1; margin:0 0 .7rem; color:var(--ink) }
.promo .pgift{ display:inline-block; align-self:center; border:1px solid #A07E3B; color:#8a6a2e; padding:.5rem 1rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.1rem }
html[lang="he"] .promo .pgift{ letter-spacing:.04em; font-size:.9rem; text-transform:none }
.promo .pincl{ text-align:start; margin:0 0 1.3rem }
.promo .pincl-t{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin:0 0 .5rem }
html[lang="he"] .promo .pincl-t{ letter-spacing:.05em; font-size:.85rem; text-transform:none }
.promo .pincl ul{ list-style:none; margin:0; padding:0 }
.promo .pincl li{ font-size:.86rem; color:var(--soft); line-height:1.55; padding-inline-start:1.1em; position:relative; margin-bottom:.28rem }
.promo .pincl li::before{ content:"—"; position:absolute; inset-inline-start:0; color:#A07E3B }
@media (max-width:640px){ .promo .pprice{ font-size:2.5rem } .promo .ptxt{ padding:1.6rem 1.4rem 1.7rem } }

/* lead magnet checklist */
.lead{ border-top:1px solid var(--hair); margin:0 auto; padding:4.5rem var(--gut) 5rem; text-align:center }
.lead-in{ max-width:640px; margin:0 auto }
.lead-eyebrow{ font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--faint); margin:0 0 1rem }
html[lang="he"] .lead-eyebrow{ letter-spacing:.08em; font-size:.8rem; text-transform:none }
.lead-title{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:2rem; margin:0 0 .9rem }
.lead-sub{ color:var(--soft); margin:0 auto 1.8rem; max-width:56ch }
.lead-form{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap }
.lead-form input[type="email"]{ flex:1 1 260px; max-width:320px; padding:.85rem 1rem; border:1px solid var(--hair); background:transparent; font:inherit; color:var(--ink) }
.lead-form input[type="email"]:focus{ outline:none; border-color:var(--ink) }
.lead-form button{ padding:.85rem 1.6rem; border:1px solid var(--ink); background:var(--ink); color:var(--bg); font:inherit; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer }
.lead-form button:hover{ background:transparent; color:var(--ink) }
html[lang="he"] .lead-form button{ letter-spacing:.05em; font-size:.9rem; text-transform:none }
.lead-ok{ font-size:1.05rem; margin:1.4rem 0 0 }
.lead-ok a{ color:var(--ink) }
.lead-note{ font-size:.75rem; color:var(--faint); margin:1.1rem 0 0 }
