/* Shulman Judaica — site styles
   Palette « Nuit de Jerusalem » (essai du 08/10, branche test/palette-nuit-jerusalem) :
   bleu nuit a la place du noir pur, pierre de Jerusalem pour les fonds clairs,
   or plus chaud. Les transparences ecrites en dur suivent les memes valeurs. */
:root {
  --ivory: #EFE7D8;
  --cream: #F7F2E9;
  --ink: #141A27;
  --ink-2: #2A3142;
  --gold: #C9A45E;
  --gold-light: #E6D29C;
  /* l'or de marque ne tient pas le contraste sur fond clair (2:1) : cette
     declinaison foncee sert au TEXTE sur ivoire/creme (4,5:1). */
  --gold-deep: #7A5B26;
  --champagne: #D4BC92;
  /* ton parchemin soutenu, entre l'ivoire klaf et le champagne du brief :
     donne le rythme entre les sections sans passer par le noir. */
  --parchment: #E8DFCD;
  --wine: #4A1F24;
  --grey: #565C69;
  --line: rgba(20, 26, 39, 0.12);
  --line-gold: rgba(201, 164, 94, 0.45);
  --serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hebrew: 'Bellefair', 'Cormorant Garamond', serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* ---------- BANDE TRANSPARENCE (home, section 08) ---------- */
.studio { background: var(--parchment); color: var(--ink); }
.studio__grid { display: grid; gap: 22px; justify-items: start; max-width: 760px; }
.studio__grid strong { font-weight: 500; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }

img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
/* Le curseur du systeme fait foi. Il doit rester INFORMATIF : main sur ce qui se
   clique, barre de saisie sur le texte, fleche ailleurs. Les commandes du site
   sont presque toutes des <button> remis a plat juste au-dessus (background: none,
   border: 0) : sans cette ligne elles gardent la fleche et ne se signalent plus. */
button, summary, select, [role="button"], label.check { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Grain overlay: the parchment texture on every surface */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 60; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -4%); }
  30% { transform: translate(4%, 2%); }
  50% { transform: translate(-2%, 5%); }
  70% { transform: translate(5%, -3%); }
  90% { transform: translate(-4%, 1%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* Typography */
.eyebrow {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep); font-weight: 600;
}
.display {
  font-family: var(--serif); font-weight: 400; line-height: 1.02;
  letter-spacing: -0.01em; text-wrap: balance; margin: 0;
}
.display--xl { font-size: clamp(44px, 7.5vw, 112px); }
.display--l { font-size: clamp(36px, 5.2vw, 76px); }
.display--m { font-size: clamp(28px, 3.4vw, 48px); }
.display i, .display em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
/* sur fond sombre, l'or clair reprend la main */
.on-dark .display i, .on-dark .display em { color: var(--gold-light); }
.lede { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.4; max-width: var(--measure); margin: 0; color: var(--ink-2); }
.body { max-width: var(--measure); color: var(--ink-2); }
.hebrew { font-family: var(--hebrew); direction: rtl; unicode-bidi: isolate; }

/* Layout */
.section { position: relative; padding: clamp(96px, 12vw, 180px) var(--gutter); }
.section--tight { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
.section-head { display: grid; gap: 18px; max-width: 900px; margin-bottom: clamp(40px, 6vw, 88px); }
.rule { height: 1px; background: linear-gradient(90deg, var(--gold), transparent); width: 96px; border: 0; margin: 0; }

/* ---------- BOUTONS ----------
   Trois niveaux : --gold (action principale), --solid (action forte sur fond clair),
   nu (action secondaire). Le survol inverse, sans animation de remplissage. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  padding: 17px 30px; border: 1px solid rgba(20, 26, 39,.28); color: var(--ink); background: transparent;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap;
}
.btn .arrow { width: 18px; height: 10px; transition: transform .35s var(--ease); }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(5px); }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--ink { border-color: var(--ink); }
.btn--solid { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--wide { width: 100%; }
.btn--sm { padding: 12px 20px; font-size: 11.5px; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.on-dark .btn { border-color: rgba(239, 231, 216,.4); color: var(--ivory); }
.on-dark .btn:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.on-dark .btn--gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--solid::after { background: var(--gold); }
.btn .arrow { width: 18px; height: 10px; }

/* Preloader */
.preloader {
  position: fixed; inset: 0; z-index: 100; background: var(--ivory);
  display: grid; place-items: center; transition: transform 1.1s var(--ease-io);
}
.preloader.is-done { transform: translateY(-100%); pointer-events: none; }
.preloader__inner { text-align: center; display: grid; gap: 14px; justify-items: center; }
.preloader__name {
  font-family: var(--serif); font-size: clamp(40px, 8vw, 96px); line-height: 1; letter-spacing: 0.04em;
  background: linear-gradient(90deg, var(--ink) 0 45%, var(--gold) 50%, var(--ink) 55% 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ink-write 1.6s var(--ease) forwards;
}
.preloader__name span { display: inline-block; opacity: 0; transform: translateY(0.35em); animation: letter-in .9s var(--ease) forwards; }
@keyframes letter-in { to { opacity: 1; transform: none; } }
@keyframes ink-write { from { background-position: 100% 0; } to { background-position: 0 0; } }
.preloader__line { width: 0; height: 1px; background: var(--gold); animation: line-grow 1.3s .3s var(--ease) forwards; }
@keyframes line-grow { to { width: min(50vw, 320px); } }
.preloader__hebrew { font-family: var(--hebrew); font-size: clamp(16px, 2vw, 22px); color: var(--grey); letter-spacing: 0.1em; opacity: 0; animation: letter-in 1s .7s var(--ease) forwards; }
.preloader__logo { width: min(440px, 72vw); height: auto; display: block;
  clip-path: inset(0 100% 0 0); animation: logo-draw 1.5s .15s var(--ease) forwards; filter: drop-shadow(0 6px 18px rgba(120,86,20,.18)); }
@keyframes logo-draw { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .preloader__logo { animation: none; clip-path: none; } }
.preloader__skip { position: absolute; bottom: 28px; right: 28px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); }

/* Header
   L'en-tete traverse TOUS les fonds du site : parchemin, ivoire, creme, la
   photographie du hero, la video de la section matiere et le noir d'encre de
   .exclusive. Il ne peut donc pas dependre de ce qu'il survole.
   Ancienne approche : mix-blend-mode: difference. Elle tient sur un aplat, mais
   elle s'effondre sur l'imagerie (mesure : 1,1 a 2,1:1 sur le hero et la matiere)
   et elle INVERSE le lien de la page courante — --ink #111 en difference sur
   --cream #FAFAF8 rendait rgb(233,233,231), soit 1,14:1 : invisible.
   Nouvelle approche : l'en-tete porte son propre fond clair. Voile degrade en
   haut de page (on garde l'immersion du hero), barre depolie des que ca defile.
   L'encre est ecrite en dur, elle ne se calcule plus sur le decor. */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter); color: var(--ink);
  transition: padding .45s var(--ease);
}
/* voile de haut de page : s'eteint vers le bas, aucune arete visible sur le hero */
.header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% + 38px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(247, 242, 233,.94) 0%,
    rgba(247, 242, 233,.88) 44%,
    rgba(247, 242, 233,.52) 74%,
    rgba(247, 242, 233,0) 100%);
  transition: opacity .5s var(--ease);
}
/* barre depolie au defilement : elle prend le ton de ce qui passe dessous
   (backdrop-filter) tout en garantissant un fond clair, meme sur .exclusive. */
.header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(247, 242, 233,.92);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  backdrop-filter: blur(16px) saturate(118%);
  border-bottom: 1px solid var(--line-gold);
  opacity: 0; transition: opacity .5s var(--ease);
}
/* core.js pose deja body.is-scrolled au-dela de 40px ; aucune ligne de JS ajoutee. */
body.is-scrolled .header { padding-top: 14px; padding-bottom: 14px; }
body.is-scrolled .header::before { opacity: 0; }
body.is-scrolled .header::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .header, .header::before, .header::after { transition: none; }
}

/* Sur la page d'accueil, tant que le hero occupe l'ecran, la barre est
   entierement transparente : ni voile clair, ni barre depolie. Les libelles
   passent en ivoire et recoivent une ombre discrete, car le deroule du klaf
   traverse des images tres sombres puis tres lumineuses. home.js pose
   body.is-on-hero ; les autres pages n'ont pas cette classe et ne bougent pas. */
body.is-on-hero .header::after { opacity: 0; }
/* Le voile clair de haut de page devient un degrade sombre qui s'eteint vers le
   bas. Mesure : sans lui, les onglets tombent a 1,65:1 sur les images les plus
   lumineuses du deroule — illisibles. On garde la transparence : l'image reste
   visible a travers, seule la lisibilite est garantie. */
body.is-on-hero .header::before {
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(20, 26, 39,.74) 0%,
    rgba(20, 26, 39,.58) 45%,
    rgba(20, 26, 39,.24) 76%,
    rgba(20, 26, 39,0) 100%);
}
body.is-on-hero .header__brand,
body.is-on-hero .header__cart,
body.is-on-hero .header__burger { color: var(--ivory); text-shadow: 0 1px 12px rgba(20, 26, 39,.6); }
body.is-on-hero .header__brand .hebrew { color: var(--gold-light); }
body.is-on-hero .header__nav a { color: rgba(239, 231, 216,.88); text-shadow: 0 1px 12px rgba(20, 26, 39,.6); }
body.is-on-hero .header__nav a:hover { color: var(--ivory); }


.header__brand { font-family: var(--serif); font-size: 22px; letter-spacing: 0.08em; display: flex; align-items: baseline; gap: 14px; color: var(--ink); }
.header__brand .hebrew { font-size: 16px; opacity: .8; }
/* logo officiel : dore, lisible sur clair comme sur sombre ; ombre portee legere */
.header__logo { height: clamp(34px, 3.4vw, 46px); width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(20, 26, 39,.18)); }
.header__nav { display: flex; gap: 28px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
/* --ink-2 plutot que --ink : la page courante garde le noir plein pour elle. */
.header__nav a { position: relative; padding: 4px 0; color: var(--ink-2); font-weight: 500; transition: color .3s; }
.header__nav a:hover { color: var(--ink); }
.header__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.header__nav a:hover::after { transform: scaleX(1); }
@media (max-width: 900px) { .header__nav { display: none; } }

.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 55; background: transparent; }
.progress__bar { height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform: scaleX(0); transform-origin: left; }

/* Floating CTA */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 52;
  background: var(--ink); color: var(--ivory); border: 1px solid var(--gold);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  padding: 14px 20px; display: inline-flex; align-items: center; gap: 10px;
  transform: translateY(120%); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), background .4s;
}
.fab.is-visible { transform: none; opacity: 1; }
.fab:hover { background: var(--wine); }
.fab .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201, 164, 94,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(201, 164, 94,.6); } 70% { box-shadow: 0 0 0 10px rgba(201, 164, 94,0); } 100% { box-shadow: 0 0 0 0 rgba(201, 164, 94,0); } }

/* Echelle d'empilement : header 50 / FAB 52 / progress 55 / grain 60 /
   overlays 100 (prechargeur, tiroir) / toast 110.
   Le toast passe AU-DESSUS des overlays : c'est lui qui annonce « Added to your
   order », donc pendant que le tiroir est ouvert. A 95 il se peignait derriere
   le voile, assombri. Il porte aria-live et ne capte aucun clic. */

/* ---------- 01 HERO: the klaf unrolled by the scroll ---------- */
/* Accueil : le hero dure 420vh pour donner sa course au deroule du klaf.
   Les pages interieures utilisent .phero, contraint a 100svh (decision D11). */
.hero { position: relative; height: 420vh; background: radial-gradient(ellipse 60% 70% at 66% 50%, #2a2219 0%, var(--ink) 70%); color: var(--ivory); }
.hero__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero__canvas, .hero__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__still { display: none; }
/* Le film du deroule n'est jamais affiche tel quel : home.js en peint les
   images dans le canvas, au meme cadrage que le dessin de repli. */
.hero__film { display: none; }
.hero.has-film { background: var(--ink); }
/* voile clair : l'oeuvre reste lumineuse, le texte se pose sur du creme */
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 26, 39,.35), rgba(20, 26, 39,0) 35%, rgba(20, 26, 39,0) 65%, rgba(20, 26, 39,.55)); pointer-events: none; }
.hero__content {
  position: absolute; inset: 0; display: grid; align-content: end; gap: 28px;
  padding: 0 var(--gutter) clamp(48px, 8vh, 96px);
}
.hero__title { display: grid; gap: 6px; }
.hero__title .hebrew { font-size: clamp(20px, 2.4vw, 30px); color: var(--gold-light); letter-spacing: .12em; width: max-content; max-width: 100%; text-shadow: 0 1px 12px rgba(20, 26, 39,.5); opacity: 0; transform: translateY(12px); transition: opacity 1.2s .3s var(--ease), transform 1.2s .3s var(--ease); }
.hero__title .display { color: var(--ivory); }
/* padding lateral + marge negative : elargit le masque pour les jambages de l'italique
   sans decaler la mise en page ; le masque vertical de l'animation reste intact. */
.hero__title .display .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .1em; margin: 0 -.1em; }
/* masque leve une fois l'entree terminee : sans cela il tranche la descendante
   du g italique de "gold". */
.hero.is-titled .hero__title .display .word { overflow: visible; }
.hero__title .display .word > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.hero.is-ready .hero__title .display .word > span { transform: none; }
.hero.is-ready .hero__title .hebrew { opacity: 1; transform: none; }
.hero__title .display .word:nth-child(2) > span { transition-delay: .08s; }
.hero__title .display .word:nth-child(3) > span { transition-delay: .16s; }
.hero__title .display i { color: var(--gold-deep); }
.hero__sub { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: end; justify-content: space-between; }
.hero__lede { font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; max-width: 46ch; color: rgba(239, 231, 216,.85); margin: 0; }
.hero__cta { display: flex; align-items: center; gap: 24px; }

.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(239, 231, 216,.6); transition: opacity .5s; }
.hero__scroll .quill { width: 14px; height: 40px; }
.hero__scroll .quill path { stroke: var(--gold-deep); stroke-width: 1; fill: none; stroke-dasharray: 90; stroke-dashoffset: 90; animation: quill 2.6s var(--ease-io) infinite; }
@keyframes quill { 0% { stroke-dashoffset: 90; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -90; } }
.hero.is-scrolled .hero__scroll { opacity: 0; }
.hero__progress { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: 1px; height: 160px; background: rgba(239, 231, 216,.2); }
.hero__progress span { position: absolute; top: 0; left: -1px; width: 3px; height: 0; background: linear-gradient(180deg, var(--gold-light), var(--gold)); }
.hero__stage { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(239, 231, 216,.55); display: grid; gap: 6px;
  text-shadow: 0 1px 10px rgba(20, 26, 39,.55); }
.hero__stage b { font-weight: 400; color: var(--gold-light); display: block; font-size: 22px; letter-spacing: .02em; text-transform: none; transition: opacity .4s; }
@media (max-width: 900px) { .hero__stage, .hero__progress { display: none; } }
/* v3 : plus de video mobile, le deroule est dessine en code partout. Course
   raccourcie sur mobile, ou 420vh de pouce seraient une corvee. */
@media (max-width: 900px) { .hero { height: 300vh; } }
/* Telephone (12/10) : le film 9:16 tourne seul, un seul ecran de haut. Aucun voile
   plein cadre (D55) : un degrade en haut sous les onglets, un autre en bas sous
   le texte, qui reste ivoire. */
.hero__loop { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.is-loop { height: 100vh; height: 100svh; background: var(--ink); }
.hero.is-loop .hero__canvas, .hero.is-loop .hero__scroll { display: none; }
.hero.is-loop .hero__loop { display: block; }
.hero--light.is-loop .hero__veil { display: block; background: linear-gradient(180deg, rgba(20, 26, 39,.5) 0%, rgba(20, 26, 39,0) 16%, rgba(20, 26, 39,0) 30%, rgba(20, 26, 39,.72) 54%, rgba(20, 26, 39,.88) 100%); }
/* Mouvement reduit : l'oeuvre entiere, fixe, sans recadrage. */
.hero.is-static { height: 100vh; height: 100svh; }
.hero.is-static .hero__canvas { display: none; }
.hero.is-static .hero__stage, .hero.is-static .hero__progress { display: none; }
.hero.is-static .hero__still { display: block; object-fit: contain; padding: 10vh 6vw 30vh; box-sizing: border-box; }

/* ---------- Hero clair (v3) : Kriat Yam Souf en pleine lumiere ---------- */
/* Fond clair : le texte passe a l'encre, le voile devient creme (a gauche et en
   bas, la ou le texte se pose), la barre de navigation reste lisible en sombre. */
.hero--light { background: var(--cream); color: var(--ink); }
/* Plus de voile sur l'image (il la rendait floue et laiteuse) : la lisibilite
   tient a un halo creme serre autour des lettres, l'image reste nette. */
.hero--light .hero__veil { display: none; }
/* home.js pose .is-dark-bg quand l'image est sombre sous le texte : ivoire.
   Sinon encre. Ombre portee legere seulement, pour detacher sans voiler. */
.hero--light .hero__title .display, .hero--light .hero__lede, .hero--light .hero__title .hebrew,
.hero--light .hero__stage { transition: color .45s var(--ease), text-shadow .45s; text-shadow: 0 0 6px rgba(250,248,242,.55), 0 1px 12px rgba(250,248,242,.35); }
.hero--light.is-dark-bg .hero__title .display, .hero--light.is-dark-bg .hero__lede { color: var(--ivory); text-shadow: 0 1px 14px rgba(20, 26, 39,.45); }
.hero--light.is-dark-bg .hero__title .display i, .hero--light.is-dark-bg .hero__title .hebrew, .hero--light.is-dark-bg .hero__stage b { color: var(--gold-light); text-shadow: 0 1px 14px rgba(20, 26, 39,.45); }
.hero--light.is-dark-bg .hero__stage, .hero--light.is-dark-bg .hero__scroll { color: rgba(239, 231, 216,.75); }
.hero--light .hero__title .display { color: var(--ink); }
.hero--light .hero__title .display i { color: var(--gold-deep); }
.hero--light .hero__title .hebrew { color: var(--ink-2); }
.hero--light .hero__lede { color: var(--ink-2); }
.hero--light .hero__stage { color: var(--ink-2); }
.hero--light .hero__stage b { color: var(--ink); }
.hero--light .hero__progress { background: rgba(20, 26, 39,.14); }
.hero--light .hero__scroll { color: var(--grey); }
/* home.js fait descendre --hero-text de 1 a 0 en fin de course */
.hero--light .hero__content, .hero--light .hero__veil, .hero--light .hero__stage { opacity: var(--hero-text, 1); }
.hero--light.is-text-off .hero__content { pointer-events: none; }
/* voile creme sous les onglets : la macro du debut est d'un bleu profond, il
   faut tenir 4,5:1 au pire pixel (verif-nav-galerie) */
/* Pas de bandeau sur l'image : un degrade court qui suit la tonalite du haut
   du film (home.js pose body.is-hero-dark-top). */
body:has(.hero--light).is-on-hero .header::before { opacity: 1; transition: background .45s;
  background: linear-gradient(180deg, rgba(250,248,242,.88) 0%, rgba(250,248,242,.6) 55%, rgba(250,248,242,0) 100%); }
body:has(.hero--light).is-on-hero.is-hero-dark-top .header::before {
  background: linear-gradient(180deg, rgba(20, 26, 39,.72) 0%, rgba(20, 26, 39,.4) 55%, rgba(20, 26, 39,0) 100%); }
body:has(.hero--light).is-on-hero.is-hero-dark-top .header__brand,
body:has(.hero--light).is-on-hero.is-hero-dark-top .header__cart,
body:has(.hero--light).is-on-hero.is-hero-dark-top .header__burger,
body:has(.hero--light).is-on-hero.is-hero-dark-top .header__nav a { color: var(--ivory); text-shadow: 0 1px 10px rgba(20, 26, 39,.5); }
body:has(.hero--light).is-on-hero.is-hero-dark-top .header__brand .hebrew { color: var(--gold-light); }
body:has(.hero--light).is-on-hero .header__brand,
body:has(.hero--light).is-on-hero .header__cart,
body:has(.hero--light).is-on-hero .header__burger,
body:has(.hero--light).is-on-hero .header__nav a { color: var(--ink); text-shadow: none; }
body:has(.hero--light).is-on-hero .header__brand .hebrew { color: var(--gold-deep); }

/* ---------- 02 MATERIAL ---------- */
.material { background: var(--ink); color: var(--ivory); overflow: hidden; }
.material__bg { position: absolute; inset: 0; overflow: hidden; }
.material__bg video, .material__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.material__bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 15% 50%, rgba(20, 26, 39,.82), rgba(20, 26, 39,.62) 45%, rgba(20, 26, 39,.88)); }
.material__inner { position: relative; display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
@media (max-width: 900px) { .material__inner { grid-template-columns: 1fr; } }
.reveal-words .w { display: inline-block; opacity: .12; transform: translateY(.2em); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-words .w.is-on { opacity: 1; transform: none; }
.material__figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.material__figure img, .material__figure video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.material__figure.is-in img, .material__figure.is-in video { transform: scale(1); }
/* figure du deroule : portrait, dessinee dans le canvas, sans fond ; l'image fixe ne sert
   qu'en mouvement reduit (.is-static) */
.material__figure--unroll { aspect-ratio: 4 / 5; overflow: visible; }
.material__figure--unroll .unroll__canvas { filter: drop-shadow(0 34px 42px rgba(0,0,0,.5)); }
/* sans fond, la legende se pose sous l'oeuvre, sans degrade */
.material__figure.material__figure--unroll figcaption { background: none; text-align: center; padding: 0 0 4px; text-shadow: 0 1px 10px rgba(20, 26, 39,.7); }
.unroll__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.material__figure--unroll .unroll__still { display: none; }
.material__figure--unroll.is-static .unroll__canvas { display: none; }
.material__figure--unroll.is-static .unroll__still { display: block; object-fit: contain; transform: none; padding: 6% 8% 14%; }
/* Le degrade s'arretait trop bas : la legende, en or clair sur une photo doree,
   tombait a 1,00:1. On l'assombrit franchement sous le texte, en le laissant
   s'eteindre vers le haut pour ne pas couper l'image. */
.material__figure figcaption { position: absolute; left: 0; bottom: 0; padding: 26px 18px 14px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light);
  background: linear-gradient(0deg, rgba(20, 26, 39,.94) 0%, rgba(20, 26, 39,.86) 48%, rgba(20, 26, 39,.42) 78%, rgba(20, 26, 39,0) 100%); width: 100%; }
.material__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; border-top: 1px solid rgba(239, 231, 216,.15); padding-top: 28px; }
.material__facts div { display: grid; gap: 6px; }
.material__facts b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--gold-light); }
.material__facts span { font-size: 12px; letter-spacing: .08em; color: rgba(239, 231, 216,.8); text-transform: uppercase; }
@media (max-width: 600px) { .material__facts { grid-template-columns: 1fr; } }

/* ---------- 03 GESTURE (pinned) ---------- */
.gesture { background: var(--parchment); color: var(--ink); }
.gesture__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.gesture__media { position: sticky; top: 110px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
/* Une seule colonne : l'image ne colle plus. Collee, elle recouvrait les etapes
   qui defilaient dessous (mesure a 390 px, 12/10). */
@media (max-width: 900px) { .gesture__grid { grid-template-columns: 1fr; } .gesture__media { position: relative; top: auto; } }
.gesture__media video, .gesture__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gesture__media img { transition: opacity .8s var(--ease); }
.gesture__media.has-video img { opacity: 0; }
.gesture__media .lens { position: absolute; width: 180px; height: 180px; border-radius: 50%; border: 1px solid var(--gold-light); box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s; transform: translate(-50%, -50%); }
.gesture__media.is-hover .lens { opacity: 1; }
.gesture__media .lens img { position: absolute; width: 300%; height: 300%; max-width: none; object-fit: cover; }
.gesture__caption { position: absolute; left: 0; bottom: 0; padding: 14px 18px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.steps { display: grid; gap: 0; }
.step { padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 64px 1fr; gap: 20px; opacity: .35; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.step.is-on { opacity: 1; transform: none; }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { font-family: var(--serif); font-size: 30px; color: var(--gold-deep); line-height: 1; padding-top: 4px; }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 10px; line-height: 1.1; }
.step p { margin: 0; color: var(--ink-2); max-width: 44ch; }
.step__tag { display: inline-block; margin-top: 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--wine); border: 1px solid rgba(74,31,36,.35); padding: 6px 10px; }

/* ---------- 04 WORKS : galerie laterale epinglee ----------
   Effet repris de la V1 validee par le client : la piste avance
   horizontalement a mesure que l'on defile verticalement. */




/* ---------- 05 PIECES FINIES (v3) : pile de cartes ---------- */
/* Sans JavaScript : grille de cartes. Avec : bloc epingle ; home.js pose
   transform/opacite de chaque carte (la carte du dessus s'envole). */
.becoming { background: var(--ink); padding: 0; }
.becoming__sticky { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 80px);
  align-items: center; padding: clamp(90px, 12vh, 130px) var(--gutter); }
.becoming__text { display: grid; gap: 16px; align-content: center; }
.becoming__text .display i { color: var(--gold-light); }
.deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.deck__card { margin: 0; background: #f4eee2; color: var(--ink); padding: 16px 16px 20px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.7); display: grid; gap: 14px; }
.deck__img { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--parchment); overflow: hidden; }
.deck__img img { width: 100%; height: 100%; object-fit: contain; padding: 4%; box-sizing: border-box; }
.deck__card figcaption { display: grid; gap: 4px; }
.deck__card figcaption b { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.deck__card .hebrew { color: var(--gold-deep); font-size: 15px; }
.deck__line { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 16px; }
.becoming.on-dark .deck__card p, .becoming.on-dark .deck__line { color: var(--ink-2); }
.becoming__pin:has(.deck.is-live) { height: 380vh; }
.becoming__pin:has(.deck.is-live) .becoming__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: hidden; }
.deck.is-live { display: block; position: relative; height: min(74svh, 720px); margin-top: 6svh; }
.deck.is-live .deck__card { position: absolute; inset: 0; margin: auto; width: min(100%, 520px, 62svh); height: fit-content; max-height: 100%;
  transform-origin: 50% 120%; will-change: transform, opacity; }
@media (max-width: 900px) {
  .becoming__sticky { grid-template-columns: 1fr; gap: 20px; }
  .deck.is-live { height: 64svh; }
  .deck__img { aspect-ratio: 4 / 3; }
}

/* ============================================================
   THEME SOMBRE — applique aux sections .on-dark (hero, gesture,
   exclusive, story, from). Evite de dupliquer les composants :
   une seule source pour les champs, chips, filets et textes.
   ============================================================ */
.on-dark { color: var(--ivory); }
.on-dark .display, .on-dark h3, .on-dark h4, .on-dark label { color: var(--ivory); }
.on-dark .eyebrow { color: var(--gold-light); }
.on-dark .lede, .on-dark .body, .on-dark p { color: rgba(239, 231, 216,.80); }
.on-dark .note, .on-dark .hint { color: rgba(239, 231, 216,.58); }
.on-dark .hebrew { color: var(--gold-light); }

/* filets */
.on-dark .step, .on-dark .form__nav { border-color: rgba(239, 231, 216,.16); }


/* formulaire */
.on-dark .form { background: rgba(239, 231, 216,.045); border-color: rgba(239, 231, 216,.16); }
.on-dark .field input, .on-dark .field textarea, .on-dark .field select {
  background: rgba(239, 231, 216,.06); border-color: rgba(239, 231, 216,.22); color: var(--ivory);
}
.on-dark .field input::placeholder, .on-dark .field textarea::placeholder { color: rgba(239, 231, 216,.42); }
.on-dark .field input:focus, .on-dark .field textarea:focus, .on-dark .field select:focus { border-color: var(--gold); }
.on-dark .field select option { background: var(--ink); color: var(--ivory); }
.on-dark .summary { background: rgba(239, 231, 216,.05); border-color: rgba(239, 231, 216,.16); color: rgba(239, 231, 216,.85); }

/* chips (profil, preferences, options) */
.on-dark .chip { background: rgba(239, 231, 216,.06); border-color: rgba(239, 231, 216,.22); color: var(--ivory); }
.on-dark .chip small { color: rgba(239, 231, 216,.6); }
.on-dark .chip:hover { border-color: var(--gold); }
.on-dark .chip.is-selected, .on-dark .chip[aria-pressed="true"] {
  background: var(--gold); color: var(--ink); border-color: var(--gold);
}
.on-dark .chip.is-selected small, .on-dark .chip[aria-pressed="true"] small { color: rgba(20, 26, 39,.72); }

/* boutons */
.on-dark .btn { border-color: var(--gold); color: var(--ivory); }
.on-dark .btn:hover { background: var(--gold); color: var(--ink); }
.on-dark .btn--solid { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.on-dark .btn--solid:hover { background: var(--gold-light); border-color: var(--gold-light); }
.on-dark .link-btn { color: rgba(239, 231, 216,.75); }
.on-dark .link-btn:hover { color: var(--gold-light); }

/* divers */
.on-dark .voice { background: rgba(239, 231, 216,.05); border-color: rgba(239, 231, 216,.16); }
.on-dark .voice__status { color: rgba(239, 231, 216,.6); }
.on-dark .step__tag { border-color: var(--gold); color: var(--gold-light); }
.on-dark .error { color: #E9A6A6; }

/* .note reste : elle sert sur 7 emplacements ailleurs. Le bloc « 05 EXCLUSIVE »
   (.exclusive*, .piece*) est parti le 07/09/2026 avec sa section. */
.note { font-size: 12px; color: var(--grey); }

/* ---------- 06 LES TROIS VOIES — cartes claires, tout est lisible sans survol ---------- */
.doors { background: var(--cream); }
.doors__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) { .doors__row { grid-template-columns: 1fr; } }
.door {
  position: relative; display: grid; align-content: start; background: var(--ivory); color: var(--ink);
  border: 1px solid var(--line); overflow: hidden; transition: border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.door:hover, .door:focus-visible { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20, 26, 39,.08); }
.door img { position: static; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; opacity: 1; z-index: 0; transition: transform 1.2s var(--ease); display: block; }
.door:hover img { transform: scale(1.04); }
.door__n { position: absolute; top: 16px; left: 18px; z-index: 2; font-family: var(--serif); font-size: 13px; letter-spacing: .18em;
  color: var(--ink); background: rgba(247, 242, 233,.9); padding: 5px 11px; }
.door h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.1vw, 28px); margin: 0; line-height: 1.2; padding: 24px 24px 0; }
.door__body { max-height: none; opacity: 1; overflow: visible; display: grid; gap: 14px; padding: 12px 24px 26px; }
.door__body p { margin: 0; color: var(--ink-2); max-width: none; font-size: 14.5px; }
.door__regime { border-top: 1px solid var(--line); padding-top: 13px; font-size: 12px; letter-spacing: .04em; color: var(--gold-deep); font-weight: 600; }
.door__link { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 10px; align-items: center; }
.door:hover .door__link { color: var(--gold-deep); }

/* ---------- FORMULAIRES A ETAPES (tunnels sur-mesure et klaf) ---------- */
.form { background: var(--ivory); border: 1px solid var(--line); padding: clamp(24px, 4vw, 48px); display: grid; gap: 28px; position: relative; }
/* ---------- ETAPES NUMEROTEES ---------- */
.form__steps { display: flex; list-style: none; margin: 0 0 4px; padding: 0; gap: 0; counter-reset: s; }
.form__steps li { flex: 1; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; position: relative; padding-right: 12px; }
.form__steps li::before {
  content: counter(s); counter-increment: s; grid-column: 1; position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--ivory); color: var(--grey);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .35s, color .35s, border-color .35s;
}
.form__steps li > span { grid-column: 2; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); line-height: 1.25; }
.form__steps li::after { content: ""; position: absolute; left: 30px; right: 0; top: 15px; height: 1px; background: var(--line); z-index: 0; }
.form__steps li:last-child { flex: 0 0 auto; padding-right: 0; }
.form__steps li:last-child::after { display: none; }
.form__steps li.is-done::before { background: var(--gold); border-color: var(--gold); color: var(--ink); content: "\2713"; }
.form__steps li.is-active::before { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.form__steps li.is-done::after { background: var(--gold); }
.form__steps li.is-active > span { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  /* masques a l'oeil, conserves pour le lecteur d'ecran : sous 760 px la barre
     ne doit pas se reduire a une suite de numeros sans nom. */
  .form__steps li > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .form__steps li { flex: 0 0 auto; grid-template-columns: 30px; padding-right: 0; }
  .form__steps { gap: 34px; }
  .form__steps li::after { left: 30px; right: -34px; }
}
.form__step { display: none; gap: 22px; animation: fade-up .6s var(--ease); }
.form__step.is-active { display: grid; }
/* [data-required-one-of] : simple regroupement logique (le recit OU le vocal).
   Il reprend la gouttiere de l'ecran, donc la mise en page ne bouge pas. */
.oneof { display: grid; gap: 22px; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.form h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); margin: 0; line-height: 1.1; }
.form .hint { font-size: 13px; color: var(--grey); margin: -10px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid var(--line); padding: 12px 16px; font-size: 13px; background: var(--cream); transition: border-color .3s, background .3s, color .3s; text-align: left; }
.chip:hover { border-color: var(--gold); }
.chip.is-selected, .chip[aria-pressed="true"] { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.chip small { display: block; font-size: 11px; color: var(--grey); margin-top: 2px; }
.chip.is-selected small { color: rgba(239, 231, 216,.7); }
.chips--group { gap: 8px; }
.chips--group .chip { padding: 9px 14px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--cream); border: 1px solid var(--line); padding: 14px 16px; width: 100%; border-radius: 0; appearance: none;
  transition: border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold-deep); }
/* focus clavier : --gold plafonne a 2,3:1 sur le creme du champ ; --gold-deep tient le 3:1
   exige pour un indicateur de focus (WCAG 1.4.11 / 2.4.11). L'outline systeme est conserve. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.field textarea { min-height: 110px; resize: vertical; }
.field .error { font-size: 12px; color: var(--wine); display: none; }
.field.is-invalid .error { display: block; }
/* Neuf champs requis ne vivent pas dans un .field : groupes de chips, cases a
   cocher, depot de fichiers. Sans ces regles leur erreur n'a nulle part ou
   s'ecrire, et le seul signal reste la couleur (WCAG 1.4.1 / 3.3.1). */
.form__group > .error, .check > .error, .upload > .error { font-size: 12px; color: var(--wine); display: none; }
.field .error.is-on, .form__group > .error.is-on, .check > .error.is-on, .upload > .error.is-on { display: block; }
.check > .error { grid-column: 2; }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--wine); }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .fields-2 { grid-template-columns: 1fr; } }
/* brouillon restaure : on dit ce qui a ete retrouve, et ce qui ne pouvait pas l'etre */
.form__draft { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px;
  margin: 0; padding: 12px 16px; background: rgba(201, 164, 94,.10); border-left: 2px solid var(--gold-deep);
  font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.form__draft [data-draft-text] { flex: 1 1 22ch; }
.form__draft .link-btn { flex: none; }
.form__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 8px; border-top: 1px solid var(--line); }
.link-btn { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); padding: 10px 0; }
.link-btn:hover { color: var(--ink); }
.voice { display: grid; gap: 14px; border: 1px dashed var(--line-gold); padding: 20px; }
.voice__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.voice__btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); padding: 12px 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.voice__btn .rec { width: 10px; height: 10px; border-radius: 50%; background: var(--wine); }
.voice__btn.is-recording .rec { animation: pulse 1.2s infinite; }
.voice__status { font-size: 13px; color: var(--grey); }
.voice audio { width: 100%; }
.summary { display: grid; gap: 10px; background: var(--cream); border: 1px solid var(--line); padding: 20px; font-size: 14px; }
.summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.summary dt { color: var(--grey); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; }
.summary dd { margin: 0; }
.form__done { display: none; gap: 16px; text-align: left; }
.form__done.is-active { display: grid; }
.form__done .display { color: var(--ink); }
/* un envoi rate n'est pas un envoi reussi : le panneau le montre */
.form__done.is-failed .display { color: var(--wine); }
.form__done:focus { outline: none; }
.form__done:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 6px; }

/* ---------- 08 VOICES (marquee) ---------- */
.voices { background: var(--cream); color: var(--ink); padding-left: 0; padding-right: 0; overflow: hidden; }
.voices .section-head { padding: 0 var(--gutter); }
/* mur de temoignages : defilement continu, la piste est dupliquee dans le HTML
   pour boucler sans couture. Pause au survol, arret complet en reduced-motion. */
.tmarquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tmarquee__track { display: flex; width: max-content; animation: tmarquee 64s linear infinite; }
.tmarquee__row { display: flex; gap: clamp(18px, 2vw, 28px); padding-right: clamp(18px, 2vw, 28px); }
.voices:hover .tmarquee__track { animation-play-state: paused; }
@keyframes tmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tmarquee { -webkit-mask-image: none; mask-image: none; }
  .tmarquee__track { animation: none; flex-wrap: wrap; width: auto; }
  .tmarquee__row[aria-hidden="true"] { display: none; }
  .tmarquee__row { flex-wrap: wrap; }
}

.tcard {
  flex: 0 0 auto; width: min(78vw, 400px); margin: 0;
  display: grid; gap: 20px; align-content: space-between;
  padding: clamp(26px, 2.6vw, 34px); background: var(--ivory);
  border: 1px solid rgba(20, 26, 39,.10);
  box-shadow: 0 18px 40px -28px rgba(20, 26, 39,.35);
  position: relative; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.tcard::before {
  content: "\201C"; position: absolute; top: 6px; right: 18px;
  font-family: var(--serif); font-size: 84px; line-height: 1; color: var(--gold-deep); opacity: .22; pointer-events: none;
}
.tcard:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -26px rgba(20, 26, 39,.42); border-color: var(--line-gold); }
.tcard blockquote {
  margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.55vw, 22px); line-height: 1.42;
  color: var(--ink); position: relative; z-index: 1;
}
.tcard figcaption { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid rgba(20, 26, 39,.10); }
.tcard__ini {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--gold-light);
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .06em;
}
.tcard__who { display: grid; gap: 2px; min-width: 0; }
.tcard__who b { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); }
.tcard__who small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); color: var(--ivory); padding: clamp(64px, 8vw, 120px) var(--gutter) 40px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 16px; font-weight: 600; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; color: rgba(239, 231, 216,.8); }
.footer a:hover { color: var(--gold-light); }
.footer__brand { display: grid; gap: 14px; }
.footer__brand .display { color: var(--ivory); font-size: 40px; }
.footer__brand .hebrew { color: var(--gold-light); font-size: 20px; }
.footer__brand p { margin: 0; color: rgba(239, 231, 216,.7); max-width: 34ch; font-size: 14px; }
.lang { display: flex; gap: 14px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.lang button { color: rgba(239, 231, 216,.55); padding: 4px 0; border-bottom: 1px solid transparent; }
.lang button.is-active { color: var(--ivory); border-bottom-color: var(--gold); }
.lang button:hover { color: var(--gold-light); }
.footer__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(239, 231, 216,.15); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 12px; color: rgba(239, 231, 216,.55); }
.footer__halakha { max-width: 70ch; font-size: 12.5px; line-height: 1.55; color: rgba(239, 231, 216,.6); margin: 32px 0 0; }

/* Scroll reveal */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.fade-in.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .reveal-words .w { opacity: 1; transform: none; }
  .step { opacity: 1; transform: none; }
  .preloader { display: none; }
  .btn::after, .door, .door img { transition: none; }
}
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 200%); visibility: hidden; background: var(--ink); color: var(--ivory); padding: 12px 18px; font-size: 13px; border: 1px solid var(--gold); z-index: 110; pointer-events: none; transition: transform .5s var(--ease), visibility 0s .5s; }
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
/* Telephone, modale ouverte : la feuille monte du bas et y pose ses boutons. Le message
   descend du haut pour ne pas couvrir « Request a quote » juste apres un ajout. */
@media (max-width: 860px) {
  body:has(.drawer.is-on) .toast { bottom: auto; top: 16px; transform: translate(-50%, -200%); width: max-content; max-width: calc(100% - 32px); }
  body:has(.drawer.is-on) .toast.is-on { transform: translate(-50%, 0); }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================
   PAGES INTERIEURES — composants partages par sur-mesure, catalogue,
   klaf, atelier, oeuvres et les trois tunnels.
   ================================================================ */

/* ---------- 05 WHO WE ARE (home) ---------- */
/* ---------- 01 WHO WE ARE (v3) : phrase cinetique, chapitres, ruban ---------- */
.house { background: var(--cream); color: var(--ink); }
.house__sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 110px);
  align-items: center; padding: clamp(110px, 14vh, 150px) var(--gutter) clamp(60px, 8vh, 90px); }
.house__lead { display: grid; gap: 22px; align-content: center; justify-items: start; }
.house__statement { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.08; margin: 0; letter-spacing: -.01em; }
.house__statement .w { transition: color .5s var(--ease); }
.house.is-live .house__statement .w, .house__pin.is-live .house__statement .w { color: rgba(20, 26, 39,.16); }
.house__pin.is-live .house__statement .w.is-on { color: var(--ink); }
.house__cta { margin-top: 8px; }
.house__chapters { position: relative; display: grid; gap: 18px; }
.house__ch { margin: 0; display: grid; grid-template-columns: 34% 1fr; gap: 20px; align-items: center; background: var(--ivory);
  border: 1px solid var(--line); padding: 14px; box-shadow: 0 30px 60px -40px rgba(20, 26, 39,.35); }
.house__ch img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.house__k { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; margin-bottom: 8px; }
.house__txt p { margin: 0; font-family: var(--serif); font-size: clamp(19px, 1.55vw, 24px); line-height: 1.3; }
.house__ch--quote { grid-template-columns: 1fr; padding: clamp(22px, 2.4vw, 34px); background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.house__ch--quote blockquote { margin: 0 0 14px; font-family: var(--serif); font-style: italic; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.3; }
.house__ch--quote .house__k { color: var(--gold-light); margin: 0; }
/* epingle : chaque chapitre s'ouvre par le bas (clip-path) avec un leger zoom (--t pose par home.js) */
.house__pin.is-live { height: 300vh; }
.house__pin.is-live .house__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; }
.house__pin.is-live .house__ch { --t: 0; clip-path: inset(calc((1 - var(--t)) * 100%) 0 0 0); transform: translateY(calc((1 - var(--t)) * 40px)) scale(calc(.96 + var(--t) * .04)); }
.house__pin.is-live .house__ch img { transform: scale(calc(1.15 - var(--t) * .15)); }
/* ruban de faits, en continu */
.house__marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; background: var(--ivory); }
.house__track { display: flex; width: max-content; gap: 0; animation: marquee 32s linear infinite; }
.house__track span { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px); padding: 0 34px; white-space: nowrap; display: flex; align-items: center; gap: 34px; }
.house__track span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); display: inline-block; margin-left: 34px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 900px) {
  .house__sticky { grid-template-columns: 1fr; padding-top: 90px; }
  .house__pin.is-live { height: auto; }
  .house__pin.is-live .house__sticky { position: static; height: auto; }
  .house__pin.is-live .house__statement .w { color: var(--ink); }
  .house__pin.is-live .house__ch { clip-path: none; transform: none; }
  .house__pin.is-live .house__ch img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .house__track { animation: none; flex-wrap: wrap; width: auto; } }

/* ---------- en-tete de page interieure ---------- */
/* ---------- EN-TETE DE PAGE : clair, en deux volets ----------
   L'image n'est plus assombrie en fond : elle occupe son propre volet, en pleine lumiere.

   HAUTEUR — une fenetre, jamais plus. Meme patron que le hero de l'accueil
   (.hero, plus haut) : `svh` et non `vh`, pour que la barre d'adresse mobile ne
   fasse pas deborder la page. Trois choix a expliquer :

   1. `min-height` plutot que `height`. Un titre plus long, une traduction
      hebreue, un zoom navigateur a 150 % : avec `height` le texte serait coupe,
      avec `min-height` la page s'allonge. La regle « 100svh et pas plus » est
      tenue par la MESURE (les trois pages tombent a 100,0 % en 1280x800,
      1280x600 et 390x844), pas par un debordement cache.
   2. La colonne image est pilotee par la HAUTEUR, pas par la largeur. Avec
      `aspect-ratio: 3/4` seul, une colonne de 539 px produisait une image de
      719 px : c'est elle qui faisait deborder le hero. Desormais sa hauteur se
      lit sur la fenetre et sa largeur en decoule.
   3. Le titre est plafonne par la plus petite des deux dimensions de la fenetre
      (`min(5.6vw, 8.6svh)`) : dans une fenetre basse — 1280x600 — il redescend
      tout seul au lieu de manger l'ecran. */
.phero {
  position: relative; background: var(--cream); color: var(--ink);
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center;
  padding: clamp(88px, 12svh, 132px) 0 clamp(24px, 4svh, 56px);
}
/* fin de fenetre : la meme regle d'or que .rule, pour dire ou le hero s'arrete */
.phero::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), rgba(201, 164, 94, 0) 62%); pointer-events: none;
}
.phero__wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: 0 var(--gutter); }
@media (max-width: 900px) { .phero__wrap { grid-template-columns: 1fr; gap: clamp(16px, 2.4svh, 30px); } }
.phero__text { display: grid; gap: clamp(13px, 2.2svh, 20px); align-content: center; justify-items: start; }
.phero .display--xl { font-size: clamp(34px, min(5.6vw, 8.6svh), 84px); }
.phero .lede { color: var(--ink-2); }
.phero__regime { display: inline-flex; align-items: center; gap: 10px; align-self: start;
  border: 1px solid var(--line-gold); background: rgba(201, 164, 94,.09); color: var(--gold-deep);
  padding: 9px 16px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.phero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.phero__media {
  position: relative; overflow: hidden; background: var(--parchment);
  aspect-ratio: 3 / 4; height: clamp(210px, 64svh, 620px);
  width: auto; max-width: 100%; justify-self: center;
}
.phero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phero__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(201, 164, 94,.35); pointer-events: none; }
/* En une colonne l'image devient une bande : la place va au texte, qui doit
   tenir en entier dans la meme fenetre. */
@media (max-width: 900px) {
  .phero { padding: clamp(80px, 10.5svh, 112px) 0 clamp(18px, 3svh, 40px); }
  .phero__media { aspect-ratio: auto; height: clamp(120px, 20svh, 240px); width: 100%; }
}


/* ---------- prose ---------- */
.prose { display: grid; gap: 18px; max-width: var(--measure); }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); margin: 18px 0 0; line-height: 1.15; }
.prose p { margin: 0; color: var(--ink-2); }
.prose ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--ink-2); }

/* ---------- grille de cartes ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.card { border: 1px solid var(--line); background: var(--cream); padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 10px; align-content: start; transition: border-color .35s, transform .5s var(--ease); }
a.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card__k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 27px); margin: 0; line-height: 1.15; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.card__price { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-variant-numeric: tabular-nums; }
.card__price small { font-size: .5em; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }

/* ---------- carte illustree par une PHOTO REELLE ----------
   L'image occupe toute la largeur, le texte reprend le retrait de .card. Pas
   d'effet au survol : ces cartes ne sont pas des liens, un zoom au passage de
   la souris promettrait un clic qui n'existe pas. Le seul ornement est le filet
   d'or qui separe la photo du texte — le meme que le cadre de .phero__media. */
/* Grille a trois colonnes : six sujets illustres se lisent en 3x2, pas en 4+2.
   Les photos meritent aussi plus de largeur que les cartes de texte. */
.cards--photo { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.card--photo { padding: 0; overflow: hidden; }
/* `height: auto` est obligatoire : les attributs width/height du <img> (poses
   pour reserver la place et eviter le saut de mise en page) donnent une hauteur
   definie qui neutraliserait aspect-ratio. */
.card--photo .card__img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  background: var(--parchment); border-bottom: 1px solid var(--line-gold);
}
.card--photo .card__k { padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 30px) 0; }
.card--photo h3 { padding: 0 clamp(20px, 2.4vw, 30px); }
.card--photo p { padding: 0 clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px); }

/* ---------- « How it works » EPINGLE (sur-mesure, klaf) — refait le 08/10 ----------
   A gauche, colle sous l'en-tete : « Step 02 / 05 », une barre fine, le titre de
   l'etape courante en grand. A droite, une frise verticale : un fil clair, un fil
   d'or qui se remplit en continu (--fill, pose par js/process.js), un noeud
   numerote par etape, qui se dore une fois atteint ; halo sur l'etape courante.
   Reutilise .steps / .step / .step__n de la section « Le geste » de l'accueil,
   mais tout est porte par .process--pinned : l'accueil n'est pas touche.

   Regle d'or : l'effacement des etapes a venir est PORTE PAR .is-live, que
   js/process.js ne pose que si le script tourne et si le mouvement est accepte.
   Par defaut — sans JS, en reduced-motion — toutes les etapes sont lisibles. */
.process--pinned { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 100px); align-items: start; }

/* la frise */
.process--pinned .steps { --fill: 0; position: relative; padding-left: 0; }
.process--pinned .steps::before, .process--pinned .steps::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 46px; width: 1px; }
.process--pinned .steps::before { background: var(--line); }
.process--pinned .steps::after { background: linear-gradient(180deg, var(--gold-light), var(--gold-deep)); transform-origin: top; transform: scaleY(var(--fill)); }
.process--pinned .step { position: relative; opacity: 1; transform: none; grid-template-columns: 40px 1fr; gap: clamp(20px, 3vw, 40px);
  border-top: 0; padding: clamp(26px, 3.4vw, 42px) 0; }
.process--pinned .step__n { position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--grey);
  background: var(--cream); border: 1px solid var(--line); padding: 0;
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .6s var(--ease); }
.process--pinned .step h3 { margin-top: 6px; }
.process--pinned.is-live .step > div:last-child { opacity: .38; transform: translateX(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.process--pinned.is-live .step.is-on > div:last-child { opacity: .62; transform: none; }
.process--pinned.is-live .step.is-current > div:last-child { opacity: 1; }
.process--pinned .step.is-on .step__n { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.process--pinned .step.is-current .step__n { box-shadow: 0 0 0 6px rgba(201, 164, 94,.18), 0 0 0 13px rgba(201, 164, 94,.08); }

/* le panneau colle */
.process__rail { position: sticky; top: 132px; display: grid; gap: 18px; justify-items: start; padding-top: 34px; }
.process__k { font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.process__k b { color: var(--gold-deep); font-variant-numeric: tabular-nums; font-weight: 600; }
.process__of { color: var(--grey); font-variant-numeric: tabular-nums; }
.process__bar { --p: 0; position: relative; display: block; width: min(100%, 220px); height: 2px; background: var(--line); overflow: hidden; }
.process__bar span { position: absolute; inset: 0; background: var(--gold-deep); transform-origin: left; transform: scaleX(var(--p)); transition: transform .7s var(--ease); }
.process__now { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 54px); line-height: 1.02; color: var(--ink); max-width: 11ch; }
.process__now.is-turn { animation: turnN .6s var(--ease); }
@keyframes turnN { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Sous 900 px : le panneau disparait (il est redondant, chaque etape porte son
   numero) ; la frise reste, en une colonne. */
@media (max-width: 900px) {
  .process--pinned { grid-template-columns: 1fr; gap: 0; }
  .process__rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .process__now.is-turn { animation: none; }
  .process__bar span, .process--pinned .step__n, .process--pinned.is-live .step > div:last-child { transition: none; }
}

/* ---------- charte de contenu (klaf) ---------- */
.charter { border: 1px solid var(--gold); background: var(--ivory); padding: clamp(24px, 3.2vw, 44px); display: grid; gap: 22px; }
.charter__head { display: grid; gap: 10px; }
.charter__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
@media (max-width: 720px) { .charter__cols { grid-template-columns: 1fr; } }
.charter__col h4 { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px; font-weight: 600; }
.charter__col--yes h4 { color: var(--gold-deep); }
.charter__col--no h4 { color: var(--wine); }
.charter__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
.charter__col li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.charter__col li::before { content: "—"; color: var(--grey); }
.charter__col--no li::before { content: "×"; color: var(--wine); }
.charter__halakha { border-top: 1px solid var(--line); padding-top: 18px; font-size: 14.5px; color: var(--ink-2); margin: 0; }
.charter__halakha strong { font-weight: 500; color: var(--ink); }

/* ---------- niveaux tarifes (option graphiste) ---------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; border: 1px solid var(--line); }
.tier { padding: clamp(20px, 2.4vw, 30px); display: grid; gap: 10px; align-content: start; background: var(--cream); outline: 1px solid var(--line); }
.tier__k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.tier h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 27px); margin: 0; }
.tier__p { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 32px); font-variant-numeric: tabular-nums; }
.tier p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- depot de fichiers (tunnels) ---------- */
.upload { display: grid; gap: 14px; border: 1px dashed var(--line-gold); padding: 20px; transition: border-color .3s, background .3s; }
.upload.is-drop { border-color: var(--gold); background: rgba(201, 164, 94,.06); }
.upload.is-invalid { border-color: var(--wine); }
.upload__drop { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.upload__btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); padding: 12px 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
.upload__btn:hover { background: var(--ink); color: var(--ivory); }
.upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Le champ mesure 1x1 px en opacity 0 : son anneau de focus se dessine sur un point
   invisible et l'utilisateur au clavier ne sait pas ou il est (WCAG 2.4.7). On reporte
   donc l'etat sur le libelle qui l'englobe, seul element visible du couple. --gold-deep
   comme pour les champs : --gold plafonne a 2,3:1 sur le creme et ne tient pas le 3:1. */
.upload__btn:has(input:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.upload__status { font-size: 13px; color: var(--grey); }
/* un fichier ecarte (type, poids, doublon, nombre) est nomme ici, pas jete en silence */
.upload__rejected { display: grid; gap: 4px; font-size: 12px; color: var(--wine); }
/* le champ fichier est masque (1x1, opacite 0) : sans cela le focus clavier serait invisible */
.upload:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.upload__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.upload__item { position: relative; display: grid; gap: 6px; width: 104px; }
.upload__item img { width: 104px; height: 104px; object-fit: cover; border: 1px solid var(--line); }
.upload__doc { display: grid; place-items: center; width: 104px; height: 104px; border: 1px solid var(--line); background: var(--cream); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.upload__name { font-size: 11.5px; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--ivory); font-size: 15px; line-height: 1; display: grid; place-items: center; }

/* ---------- bandeau de rappel en bas de page ---------- */
.callout { background: var(--parchment); color: var(--ink); padding: clamp(48px, 7vw, 96px) var(--gutter); display: grid; gap: 20px; justify-items: start; border-top: 1px solid var(--line-gold); }
.callout p { max-width: 60ch; color: var(--ink-2); margin: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; max-width: 900px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-family: var(--serif); font-size: clamp(18px, 1.8vw, 23px); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-deep); font-family: var(--sans); font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 22px; color: var(--ink-2); max-width: 68ch; }
/* focus clavier : --gold plafonne a 2:1 sur creme/ivoire, --gold-deep tient 4,5:1.
   offset negatif pour que le lisere ne morde pas sur les filets voisins. */
.faq summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -4px; }
/* l'indicateur +/- garde une largeur fixe : la question ne bouge pas a l'ouverture */
.faq summary::after { flex: none; width: 1em; text-align: center; line-height: 1; }
@media (max-width: 560px) {
  /* sous 560px la question passe sur deux ou trois lignes : on rend l'air a la colonne
     de texte et on garde l'indicateur en haut, en face de la premiere ligne. */
  .faq summary { align-items: flex-start; gap: 14px; padding: 18px 0; }
  .faq summary::after { line-height: 1.35; }
  .faq p { margin-bottom: 18px; font-size: 15px; }
}

/* ---------- enveloppe d'un tunnel ---------- */
.funnel { max-width: 880px; margin: 0 auto; }
.funnel .form { background: var(--cream); }
.funnel__head { max-width: 880px; margin: 0 auto clamp(28px, 4vw, 48px); display: grid; gap: 14px; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--ink-2); }
.check input { width: 18px; height: 18px; accent-color: var(--gold-deep); margin-top: 2px; }
/* la classe atterrit desormais sur le label ET sur l'input : le libelle vire au
   vin, la case garde son lisere. */
.check.is-invalid { color: var(--wine); }
.check.is-invalid > span { color: var(--wine); }
/* Page courante : elle doit etre PLUS lisible que ses voisines, jamais moins.
   Trois marqueurs qui s'additionnent — noir plein contre --ink-2, graisse, et
   un filet d'or permanent. Sous mix-blend-mode ce meme --ink virait au gris
   clair et le lien disparaissait (1,14:1 mesure sur les trois sous-pages). */
.header__nav a.is-active { color: var(--ink); font-weight: 700; }
.header__nav a.is-active::after { transform: scaleX(1); height: 2px; background: var(--gold-deep); }
.chips.is-invalid .chip { border-color: var(--wine); }
.voice.is-invalid { border-color: var(--wine); }
input.is-invalid, textarea.is-invalid, select.is-invalid { outline: 2px solid var(--wine); outline-offset: 1px; }
.form__group { display: grid; gap: 10px; }
.form__group > .glabel { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); font-weight: 600; }

/* ---------- lien panier dans l'en-tete ---------- */
.header__cart { position: relative; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 4px 0; margin-left: 8px; color: var(--ink-2); font-weight: 600; transition: color .3s; }
.header__cart:hover { color: var(--ink); }
/* La pastille se pose toujours sur le fond clair de l'en-tete : encre pleine,
   chiffre ivoire. Les deux regles .on-dark / .hero qui la repeignaient en or
   sont retirees — elles ne pouvaient pas s'appliquer (l'en-tete est un frere de
   <main>, jamais un descendant de .on-dark ni de .hero) et, sous l'ancienne
   difference, la pastille tombait a 1,3:1 sur l'imagerie. */
.header__badge { display: none; margin-left: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--ivory); font-size: 10px; line-height: 18px; text-align: center; letter-spacing: 0; font-weight: 600; }
.header__badge.is-on { display: inline-block; }
/* Exception : la barre transparente posee sur un hero sombre (body.is-on-hero). La pastille
   encre y disparaissait ; elle passe en ivoire, chiffre encre. Hero clair de l'accueil :
   elle reste encre tant que le haut du film est clair. */
body.is-on-hero .header__badge { background: var(--ivory); color: var(--ink); }
body:has(.hero--light).is-on-hero:not(.is-hero-dark-top) .header__badge { background: var(--ink); color: var(--ivory); }

/* ---------- catalogue ---------- */
.shopgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(16px, 2vw, 28px); }
.pcard { border: 1px solid var(--line); background: var(--cream); display: grid; align-content: start; cursor: pointer;
  transition: border-color .35s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 26, 39,.07); }
/* les oeuvres sont montrees entieres : on ne recadre pas une piece d'art */
/* Visuels du catalogue (assets/catalogue/) : chaque oeuvre detouree, posee sur
   le meme fond studio 4:5 avec la meme marge et la meme ombre. Plus de liseré. */
.pcard__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--parchment); }
.pcard__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcard__b { padding: 20px; display: grid; gap: 8px; }
.pcard__k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.pcard__h { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.15; }

/* ---------- lignes de commande ---------- */
.lines { list-style: none; margin: 0; padding: 0; display: grid; }
.line { display: grid; grid-template-columns: 1fr auto 28px; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.line:last-child { border-bottom: 1px solid var(--line); }
.line__b h4 { font-family: var(--serif); font-weight: 400; font-size: 20px; margin: 0 0 3px; }
.line__b p { margin: 0; font-size: 13px; color: var(--grey); }
.line__q { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.line__q button { width: 34px; height: 34px; font-size: 16px; }
.line__q button:hover { background: var(--ink); color: var(--ivory); }
.line__q span { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.line__x { color: var(--grey); font-size: 20px; }
.line__x:hover { color: var(--wine); }
@media (max-width: 640px) { .line { grid-template-columns: 1fr auto; grid-template-areas: "b x" "q ."; } .line__b { grid-area: b; } .line__q { grid-area: q; justify-self: start; } .line__x { grid-area: x; } }
.review { display: grid; gap: 8px; background: var(--cream); border: 1px solid var(--line); padding: 20px; font-size: 14px; }
.review > div { display: flex; justify-content: space-between; gap: 16px; }
.pay { border: 1px solid var(--gold); background: var(--ivory); padding: clamp(20px, 3vw, 34px); display: grid; gap: 14px; }
.pay__k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }

/* ---------- carte selectionnee dans le catalogue ---------- */


/* ================================================================
   LISTE PRODUITS (PLP) — filtres a gauche, barre d'outils, grille.
   Filtres appliques rappeles en haut et retirables un a un.
   ================================================================ */
.plp { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 56px); align-items: start; }
@media (max-width: 900px) { .plp { grid-template-columns: 1fr; } }

.facets { display: grid; gap: 26px; position: sticky; top: 104px; }
@media (max-width: 900px) {
  .facets { position: static; display: none; border: 1px solid var(--line); padding: 22px; background: var(--cream); }
  .facets.is-open { display: grid; }
}
.facet { display: grid; gap: 10px; }
.facet__h { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.facet__list { display: grid; gap: 2px; }
.facet__o { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: var(--ink-2); text-align: left; width: 100%; }
.facet__o:hover { color: var(--ink); }
.facet__box { width: 15px; height: 15px; border: 1px solid var(--line); display: grid; place-items: center; flex: none; transition: background .2s, border-color .2s; }
.facet__o.is-on .facet__box { background: var(--ink); border-color: var(--ink); }
.facet__o.is-on .facet__box::after { content: "\2713"; color: var(--ivory); font-size: 10px; line-height: 1; }
.facet__o.is-on { color: var(--ink); font-weight: 600; }
.facet__n { margin-left: auto; font-size: 12px; color: var(--grey); font-variant-numeric: tabular-nums; }

.plp__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.plp__count { font-size: 13.5px; color: var(--grey); }
.plp__count b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.plp__tools { display: flex; align-items: center; gap: 12px; }
.plp__sort { font: inherit; font-size: 13.5px; padding: 10px 34px 10px 14px; border: 1px solid var(--line); background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 13px center; appearance: none; border-radius: 0; color: var(--ink); }
.plp__filterbtn { display: none; }
@media (max-width: 900px) { .plp__filterbtn { display: inline-flex; } }

.applied { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.applied:empty { display: none; }
.applied__t { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin-right: 4px; }
.applied__x { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--ink); background: var(--ink); color: var(--ivory); padding: 7px 12px; font-size: 12px; }
.applied__x span { font-size: 14px; line-height: 1; }
.applied__x:hover { background: var(--wine); border-color: var(--wine); }
.applied__clear { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.applied__clear:hover { color: var(--ink); }

/* ================================================================
   MODALE DU CATALOGUE — deux volets : la piece choisie, puis la commande.
   (Ancien tiroir lateral : les classes .drawer* sont gardees, le JS aussi.)
   Centree a l'ecran ; sa largeur suit le volet montre (#drawer[data-pane]).
   ================================================================ */
.drawer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); }
.drawer[hidden] { display: none !important; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(20, 26, 39,.42); backdrop-filter: blur(2px); opacity: 0; transition: opacity .35s var(--ease); }
.drawer.is-on .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: relative; width: min(560px, 100%); max-height: min(92vh, 940px); max-height: min(92svh, 940px);
  background: var(--cream); color: var(--ink); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .35s var(--ease), transform .42s var(--ease), width .35s var(--ease);
  box-shadow: 0 40px 120px -30px rgba(20, 26, 39,.45), 0 0 0 1px rgba(201, 164, 94,.25);
}
.drawer.is-on .drawer__panel { opacity: 1; transform: none; }
.drawer[data-pane="product"] .drawer__panel { width: min(1180px, 100%); }
/* Le panneau porte tabindex=-1 : il recoit le focus en dernier recours, quand le volet
   n'a aucune commande. Il n'est pas une commande, il ne prend donc pas l'anneau ; les
   boutons et les puces du tiroir gardent le leur (regle :focus-visible generale). */
.drawer__panel:focus { outline: none; }
.drawer__head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.drawer__title { font-family: var(--serif); font-size: 21px; font-weight: 400; flex: 1; }
.drawer__back, .drawer__x { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.drawer__back:hover, .drawer__x:hover { color: var(--ink); }
.drawer__x { font-size: 24px; line-height: 1; letter-spacing: 0; }
.drawer__body { overflow-y: auto; padding: 24px; display: grid; gap: 22px; align-content: start; }
.drawer__foot { padding: 20px 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; background: var(--ivory); }
.drawer__note { font-size: 12.5px; color: var(--grey); text-align: center; margin: 0; }
/* Galerie de la piece dans le tiroir : une scene 4:5, des vignettes, une loupe au survol. */
.pgal { display: grid; gap: 10px; }
/* largeur tiree de la hauteur maxi : avec width:100% + max-height, le 4:5 cassait et l'image flottait dans des bandes */
.pgal__stage { position: relative; display: block; width: min(100%, 52vh * .8); justify-self: center; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--parchment); cursor: zoom-in; padding: 0; border: 0; }
.pgal__stage img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s var(--ease), opacity .25s; }
.pgal__stage.is-zoom img { transform: scale(2.2); transition: transform .2s ease-out, opacity .25s; }
.pgal__stage.is-swap img { opacity: 0; }
.pgal__hint { position: absolute; right: 10px; bottom: 10px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  padding: 6px 9px; background: rgba(20, 26, 39,.62); color: var(--ivory); pointer-events: none; transition: opacity .25s; }
.pgal__stage.is-zoom .pgal__hint { opacity: 0; }
.pgal__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pgal__thumb { aspect-ratio: 4 / 5; padding: 0; border: 1px solid transparent; background: var(--parchment); overflow: hidden; opacity: .62; transition: opacity .2s, border-color .2s; }
.pgal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal__thumb:hover { opacity: 1; }
.pgal__thumb[aria-current="true"] { opacity: 1; border-color: var(--gold-deep); }

/* Vue agrandie : posee dans le panneau du tiroir mais fixee a la fenetre. */
.lightbox { position: fixed; inset: 0; z-index: 3; background: rgba(20, 26, 39,.94); display: grid;
  grid-template-columns: 64px 1fr 64px; grid-template-rows: 1fr auto; align-items: center; padding: 24px 12px 18px;
  opacity: 0; transition: opacity .3s var(--ease); }
.lightbox.is-on { opacity: 1; }
/* image en absolu : un max-height en % est ignore dans une piste de grille non definie */
.lightbox__stage { grid-column: 2; grid-row: 1; margin: 0; height: 100%; position: relative; overflow: hidden; cursor: zoom-in; }
.lightbox__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .3s var(--ease); }
.lightbox__stage.is-zoom { cursor: zoom-out; }
.lightbox__stage.is-zoom img { transform: scale(2.5); transition: transform .15s ease-out; }
.lightbox__nav { grid-row: 1; font-size: 26px; color: var(--ivory); width: 48px; height: 48px; justify-self: center;
  border: 1px solid rgba(239, 231, 216,.3); border-radius: 50%; }
.lightbox__nav:hover { background: var(--ivory); color: var(--ink); }
.lightbox__nav--prev { grid-column: 1; } .lightbox__nav--next { grid-column: 3; }
.lightbox__x { position: absolute; top: 14px; right: 18px; font-size: 32px; line-height: 1; color: var(--ivory); z-index: 1; }
.lightbox__cap { grid-column: 1 / -1; grid-row: 2; text-align: center; margin: 12px 0 0; font-family: var(--serif); font-size: 17px; color: rgba(239, 231, 216,.85); }
.lightbox__count { color: rgba(239, 231, 216,.5); font-size: 13px; margin-left: 10px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto; padding: 56px 8px 14px; }
  .lightbox__stage { grid-column: 1 / -1; }
  .lightbox__nav { grid-row: 3; margin-top: 10px; }
  .lightbox__nav--prev { grid-column: 1; } .lightbox__nav--next { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .pgal__stage img, .lightbox__stage img, .lightbox { transition: none; } }
/* --- fiche de la piece : la galerie a gauche, a droite le nom, le texte, l'ajout ---
   12/10 : les vignettes vivaient a droite, sous le texte ; on cliquait, puis on
   remontait voir la photo. Elles sont desormais COLLEES a la grande photo : bande
   verticale a sa gauche sur grand ecran, bande horizontale dessous sur telephone.
   La photo tient toujours dans la hauteur de la modale : rien a faire defiler. */
.drawer[data-pane="product"] .drawer__body { padding: 0; }
.pview { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); min-height: 0; }
.pview[hidden] { display: none; }
.pview__stage { background: var(--parchment); padding: clamp(16px, 2vw, 32px); grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; }
.pview .pgal__thumbs { grid-template-columns: 1fr; align-content: start; max-height: calc(min(92svh, 940px) - 150px); overflow-y: auto; scrollbar-width: none; padding: 2px; }
.pview .pgal__thumbs::-webkit-scrollbar { display: none; }
.pgal__main { position: relative; display: grid; place-items: center; min-width: 0; }
.pview .pgal__stage { width: 100%; max-width: calc((min(92svh, 940px) - 150px) * .8); background: transparent; }
/* fleches et compteur poses sur la photo : discrets, ils se montrent au survol (toujours au doigt) */
.pgal__arrow { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; font-size: 18px;
  background: rgba(247, 242, 233,.92); color: var(--ink); box-shadow: 0 6px 20px rgba(20, 26, 39,.14); opacity: 0; transition: opacity .25s, background .2s; }
.pgal__arrow--prev { inset-inline-start: 8px; } .pgal__arrow--next { inset-inline-end: 8px; }
.pgal__arrow:hover { background: var(--ink); color: var(--ivory); }
.pgal__main:hover .pgal__arrow, .pgal__arrow:focus-visible { opacity: 1; }
.pgal__count { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 11px; letter-spacing: .14em; padding: 5px 9px;
  background: rgba(20, 26, 39,.62); color: var(--ivory); font-variant-numeric: tabular-nums; pointer-events: none; }
[dir="rtl"] .pgal__arrow { transform: scaleX(-1); }
@media (pointer: coarse) { .pgal__arrow { opacity: 1; } }
.pview__side { padding: clamp(24px, 3vw, 44px); display: grid; gap: 14px; align-content: start; }
.pview__name { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3vw, 46px); line-height: 1.02; margin: 0; }
.pview__desc { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink-2); }
.pview__add { margin-top: 10px; }
.pview .drawer__note { text-align: start; }
/* demande de devis : le formulaire des tunnels, sans son cadre, dans la modale */
.form--quote { background: none; border: 0; padding: 0; gap: 22px; }
.form__intro { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--ink-2); }
.form--quote .form__nav { flex-wrap: wrap; }
.form--quote [data-next] { flex: 1; }
@media (max-width: 860px) {
  .drawer { padding: 0; place-items: end stretch; }
  .drawer__panel, .drawer[data-pane="product"] .drawer__panel { width: 100%; max-height: 94svh; }
  .drawer:not(.is-on) .drawer__panel { transform: translateY(40px); }
  .pview { grid-template-columns: 1fr; }
  /* telephone : la photo, puis sa bande de vignettes juste dessous, qui defile au doigt */
  .pview__stage { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 14px 12px; }
  .pview .pgal__thumbs { order: 2; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 58px; max-height: none; overflow-x: auto; overflow-y: hidden; }
  .pview .pgal__stage { max-width: min(100%, 46svh * .8); }
  /* le bouton d'ajout reste sous le pouce pendant qu'on lit la fiche */
  .pview__add { position: sticky; bottom: 12px; z-index: 1; box-shadow: 0 10px 30px rgba(20, 26, 39,.18); }
}
.drawer__empty { display: grid; gap: 14px; justify-items: start; color: var(--grey); }

/* La CAISSE a ete supprimee le 07/09/2026 : coordonnees, adresse, port et taxes sont
   collectes par le prestataire de paiement, sur sa page. Les regles .checkout* et
   .totals .grand qui vivaient ici sont parties avec le balisage qu'elles habillaient.
   .fields-2, elle, reste utilisee par sur-mesure.html et klaf.html. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pcard:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ============================================================
   PAGE SUR-MESURE (v3) — hero avant/apres, trois commandes,
   engagements, appels a l'action partout. js/commission.js.
   ============================================================ */
.btn--lg { padding: 20px 34px; font-size: 13px; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding: 10px 0; border-bottom: 1px solid var(--gold); }
.link-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.link-arrow:hover::after { transform: translateX(5px); }
.cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: clamp(36px, 5vw, 64px) 0 0; }
.cta-row__note { font-family: var(--serif); font-style: italic; color: var(--grey); font-size: 17px; }

/* --- hero --- */
.chero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--cream); display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 72px); align-items: center;
  padding: clamp(96px, 12svh, 128px) var(--gutter) clamp(36px, 6svh, 64px); overflow: hidden; }
.chero::before { content: ""; position: absolute; right: -10%; top: 8%; width: 60vw; height: 60vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 164, 94,.16), rgba(201, 164, 94,0)); pointer-events: none; }
.chero__text { position: relative; display: grid; gap: clamp(16px, 2.4svh, 26px); justify-items: start; }
.chero__title { font-family: var(--serif); font-weight: 400; margin: 0; font-size: clamp(46px, min(6.6vw, 11svh), 112px); line-height: .98; letter-spacing: -.015em; color: var(--ink); }
.chero__title .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.chero__title .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.chero__title i { color: var(--gold-deep); }
.chero.is-in .chero__title .ln > span { transform: none; }
.chero.is-in .chero__title .ln:nth-child(2) > span { transition-delay: .1s; }
.chero.is-in .chero__title .ln:nth-child(3) > span { transition-delay: .2s; }
.chero__lede, .chero__cta, .chero__facts { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease) .45s, transform .9s var(--ease) .45s; }
.chero.is-in .chero__lede, .chero.is-in .chero__cta, .chero.is-in .chero__facts { opacity: 1; transform: none; }
.chero.is-in .chero__cta { transition-delay: .6s; } .chero.is-in .chero__facts { transition-delay: .75s; }
.chero__lede { max-width: 40ch; }
/* Telephone : le chapeau est souvent le plus grand bloc a l'ecran (LCP). Son fondu
   retardait l'affichage mesure de 1,3 s en 4G lente ; il garde la montee, pas le fondu. */
@media (max-width: 900px) { .chero__lede { opacity: 1; } }
.chero__cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.chero__facts { list-style: none; margin: 8px 0 0; padding: 18px 0 0; display: flex; gap: clamp(20px, 3vw, 44px); border-top: 1px solid var(--line); }
.chero__facts li { display: grid; gap: 2px; }
.chero__facts b { font-family: var(--serif); font-weight: 400; font-size: 21px; }
.chero__facts span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.chero__art { position: relative; margin: 0; display: grid; gap: 12px; justify-items: center;
  opacity: 0; transform: translateY(30px) scale(.97); transition: opacity 1.2s var(--ease) .2s, transform 1.4s var(--ease) .2s; }
.chero.is-in .chero__art { opacity: 1; transform: none; }
.chero__art figcaption { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--grey); text-align: center; }
.chero__art figcaption .hebrew { font-style: normal; color: var(--gold-deep); margin-right: 8px; }

/* --- curseur avant / apres --- */
.compare { --x: 50%; position: relative; overflow: hidden; background: var(--parchment); user-select: none; touch-action: pan-y;
  box-shadow: 0 50px 90px -50px rgba(60,40,10,.55), 0 0 0 1px rgba(201, 164, 94,.35); }
.compare img, .compare canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.compare__before img, .compare__before canvas { position: absolute; inset: 0; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--gold-light);
  box-shadow: 0 0 0 1px rgba(20, 26, 39,.12); pointer-events: none; display: none; }
.compare__handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--cream); border: 1px solid var(--gold); box-shadow: 0 8px 24px rgba(20, 26, 39,.2); }
.compare__handle span::before, .compare__handle span::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: solid var(--ink); border-width: 0 0 1.5px 1.5px; }
.compare__handle span::before { left: 12px; transform: translateY(-50%) rotate(45deg); }
.compare__handle span::after { right: 12px; transform: translateY(-50%) rotate(-135deg); }
.compare__tag { position: absolute; top: 14px; padding: 6px 11px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(247, 242, 233,.9); color: var(--ink); pointer-events: none; display: none; transition: opacity .3s; }
.compare__tag--a { left: 14px; } .compare__tag--b { right: 14px; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; display: none; }
.compare.is-live .compare__handle, .compare.is-live .compare__tag, .compare.is-live .compare__range { display: block; }
.compare__range:focus-visible + * , .compare:has(.compare__range:focus-visible) { outline: 2px solid var(--gold); outline-offset: 4px; }
.compare--hero { width: min(100%, calc((100svh - 230px) * 873 / 1309)); aspect-ratio: 873 / 1309; }

/* --- trois commandes --- */
.showcase { background: var(--ivory); }
.case { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 90px); align-items: center; margin-top: clamp(48px, 7vw, 110px); }
.case--flip .compare { order: 2; }
.case .compare { aspect-ratio: var(--ar, 3 / 2); }
.case:nth-of-type(2) .compare { --ar: 1077 / 1500; width: min(100%, calc(78svh * 1077 / 1500)); justify-self: start; }
.case:nth-of-type(3) .compare { --ar: 1500 / 718; }
.case:nth-of-type(1) .compare { --ar: 1420 / 920; }
.case__text { display: grid; gap: 12px; justify-items: start; max-width: 42ch; }
.case__text h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 50px); margin: 0; line-height: 1.02; }
.case__text .hebrew { color: var(--gold-deep); font-size: 18px; }
.case__text p { font-family: var(--serif); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.4; color: var(--ink-2); margin: 0 0 6px; }
.case .compare { clip-path: inset(12% 0 12% 0); transition: clip-path 1.3s var(--ease); }
.case .case__text { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease) .25s, transform 1s var(--ease) .25s; }
.case.is-in .compare { clip-path: inset(0 0 0 0); }
.case.is-in .case__text { opacity: 1; transform: none; }

/* --- engagements --- */
.receive__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); counter-reset: r; }
.receive__list li { counter-increment: r; padding: 28px 24px 8px 0; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--line); margin-right: 24px;
  opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.receive__list li:last-child { border-right: 0; }
.receive__list li::before { content: "0" counter(r); font-family: var(--serif); font-size: 44px; color: var(--gold); line-height: 1; }
.receive__list li:nth-child(2) { transition-delay: .1s; } .receive__list li:nth-child(3) { transition-delay: .2s; } .receive__list li:nth-child(4) { transition-delay: .3s; }
.receive__list li.is-in { opacity: 1; transform: none; }
.receive__list b { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.15; }
.receive__list p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.receive .display i { color: var(--gold-deep); }
.cta-row { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.cta-row.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .chero { grid-template-columns: 1fr; min-height: 0; padding-top: 92px; gap: 26px; }
  .chero__title { font-size: clamp(44px, 12vw, 64px); }
  .chero__facts { gap: 18px; }
  .chero__facts b { font-size: 17px; white-space: nowrap; }
  .compare--hero { width: min(100%, 420px); }
  .case, .case--flip { grid-template-columns: 1fr; gap: 22px; }
  .case--flip .compare { order: 0; }
  .receive__list { grid-template-columns: 1fr 1fr; }
  .receive__list li:nth-child(2) { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chero__title .ln > span, .chero__lede, .chero__cta, .chero__facts, .chero__art, .case .compare, .case .case__text, .receive__list li, .cta-row { transition: none; transform: none; opacity: 1; clip-path: none; }
}

/* ============================================================
   PAGE KLAF (v3) — apercu sur vrai klaf, etapes epinglees,
   option design sans prix, formats a l'echelle. js/klaf.js.
   Reutilise .chero, .compare, .receive__list et .cta-row (sur-mesure).
   ============================================================ */
/* --- hero video : la presse en plein ecran, texte ivoire sur un voile LOCAL
   (degrade du bas-gauche, la ou le texte se pose ; jamais un voile plein cadre) --- */
.chero--full { grid-template-columns: minmax(0, 1fr); align-items: end; background: var(--ink); color: var(--ivory);
  padding-bottom: clamp(48px, 9svh, 96px); }
.chero--full::before { content: ""; position: absolute; inset: 0; right: auto; top: auto; width: 100%; height: 100%; border-radius: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20, 26, 39,.78) 0%, rgba(20, 26, 39,.35) 16%, rgba(20, 26, 39,0) 30%),
              linear-gradient(90deg, rgba(20, 26, 39,.9) 0%, rgba(20, 26, 39,.78) 36%, rgba(20, 26, 39,.25) 58%, rgba(20, 26, 39,0) 74%),
              linear-gradient(0deg, rgba(20, 26, 39,.6) 0%, rgba(20, 26, 39,0) 45%); }
.chero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.chero--full .chero__text { z-index: 2; max-width: 680px; }
.chero--full .chero__title { color: var(--ivory); }
.chero--full .chero__title i { color: var(--gold-light); }
.chero--full .lede { color: rgba(239, 231, 216,.9); }
.chero--full .link-arrow { color: var(--ivory); border-color: var(--gold-light); }
.chero--full .chero__facts { border-top-color: rgba(239, 231, 216,.25); }
.chero--full .chero__facts span { color: rgba(239, 231, 216,.7); }

/* --- variante photo (catalogue) : fond = la meme photo tres floue, l'oeuvre nette
   a droite sur grand ecran ; sur mobile la photo nette remplit le cadre --- */
.chero--photo .chero__figure { position: absolute; z-index: 1; top: 0; bottom: 0; right: var(--gutter); margin: 0;
  width: min(42vw, calc((100svh - 200px) * .83)); display: grid; align-items: center; padding: clamp(100px, 13svh, 130px) 0 clamp(40px, 7svh, 72px); }
.chero--photo .chero__figure img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease) .2s, transform 1.4s var(--ease) .2s; }
.chero--photo.is-in .chero__figure img { opacity: 1; transform: none; }
.chero--photo .chero__media { transform: scale(1.08); }
button.link-arrow { background: none; border-width: 0 0 1px; border-style: solid; font-family: inherit; cursor: pointer; }
@media (max-width: 900px) {
  .chero--photo .chero__figure { inset: 0; width: 100%; padding: 0; z-index: 0; }
  .chero--photo .chero__figure img { object-fit: cover; object-position: center 35%; filter: none; }
}
@media (prefers-reduced-motion: reduce) { .chero--photo .chero__figure img { transition: none; opacity: 1; transform: none; } }

/* --- 01 · l'apercu --- */
.ktry { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.ktry__text { display: grid; gap: 18px; justify-items: start;
  opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.ktry__text.is-in { opacity: 1; transform: none; }
.ktry__text .cta-row { margin-top: 6px; }
.ktry__rule { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); max-width: 52ch; }
.kprev { margin: 0; display: grid; gap: 12px; justify-items: center;
  opacity: 0; transform: translateY(30px) scale(.97); transition: opacity 1.2s var(--ease) .15s, transform 1.4s var(--ease) .15s; }
.kprev.is-in { opacity: 1; transform: none; }
.kprev figcaption { display: grid; gap: 10px; justify-items: center; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--grey); text-align: center; }
.kprev figcaption .hebrew { font-style: normal; color: var(--gold-deep); margin-right: 8px; }
@media (max-width: 900px) {
  .ktry { grid-template-columns: 1fr; }
  .chero--full { min-height: 100svh; }
  .chero--full::before { background: linear-gradient(180deg, rgba(20, 26, 39,.75) 0%, rgba(20, 26, 39,0) 18%),
    linear-gradient(0deg, rgba(20, 26, 39,.9) 0%, rgba(20, 26, 39,.72) 60%, rgba(20, 26, 39,.35) 100%); }
}
@media (prefers-reduced-motion: reduce) { .ktry__text, .kprev { transition: none; opacity: 1; transform: none; } }
/* --- 01 · l'action unique : essayer avec sa propre image --- */
.ktry__go { display: grid; gap: 10px; justify-items: start; margin-top: 6px; }
.ktry__safe { font-size: 12.5px; color: var(--grey); letter-spacing: .02em; }
.kprev__frame { position: relative; }
.kprev__again { font-family: var(--sans); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  background: none; border: 0; border-bottom: 1px solid var(--gold); padding: 10px 0; cursor: pointer; }
.kprev__again:hover { color: var(--gold-deep); }

/* --- invitation animee posee sur l'apercu (motion design) ---
   Boucle de 3,6 s : la carte-image descend, se pose dans l'emplacement, rebondit,
   puis prend la teinte du parchemin ; le pointille se dessine en continu. */
.kdrop { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 8%;
  background: radial-gradient(closest-side, rgba(247, 242, 233,.94), rgba(247, 242, 233,.82));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .45s var(--ease); }
.kdrop.is-on { opacity: 1; }
.kdrop[hidden] { display: none; }
.kdrop__zone { position: relative; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer; color: var(--ink); padding: 24px; transition: transform .35s var(--ease); }
.kdrop__zone:hover { transform: scale(1.015); }
.kdrop__zone:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.kdrop__dash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kdrop__dash rect { fill: none; stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 10 8; animation: kdrop-dash 1.6s linear infinite; }
.kdrop__stage { position: relative; width: 120px; height: 104px; margin-bottom: 6px; }
.kdrop__slot { position: absolute; left: 22px; right: 22px; bottom: 0; height: 58px; border-radius: 4px;
  border: 1.5px dashed rgba(122, 91, 38,.55); animation: kdrop-slot 3.6s var(--ease) infinite; }
.kdrop__card { position: absolute; left: 30px; width: 60px; height: 45px; bottom: 6px; border-radius: 4px; background: #fff;
  box-shadow: 0 14px 26px -12px rgba(20, 26, 39,.45); display: grid; place-items: center; animation: kdrop-card 3.6s var(--ease) infinite; }
.kdrop__card svg { width: 42px; height: 32px; fill: var(--gold-deep); }
.kdrop__card .kdrop__pic { fill: none; stroke: var(--gold-deep); stroke-width: 1.6; }
.kdrop__title { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; }
.kdrop__sub { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.kdrop__skip { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1; background: none; border: 0;
  font-size: 12px; color: var(--grey); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kdrop__skip:hover { color: var(--ink); }
/* fichier qui survole le cadre : tout s'allume */
.kprev__frame.is-drag .kdrop { opacity: 1; background: radial-gradient(closest-side, rgba(239, 231, 216,.97), rgba(230, 210, 156,.85)); }
.kprev__frame.is-drag .kdrop__dash rect { stroke-width: 2.4; stroke: var(--gold-deep); }
.kprev__frame.is-drag .kdrop__zone { transform: scale(1.03); }
@keyframes kdrop-dash { to { stroke-dashoffset: -36; } }
@keyframes kdrop-card {
  0%   { transform: translateY(-70px) rotate(-8deg); opacity: 0; background: #fff; }
  18%  { opacity: 1; }
  42%  { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-7px) rotate(0); }
  58%  { transform: translateY(0); background: #fff; }
  78%  { transform: translateY(0); background: #e8dcc0; }
  92%  { transform: translateY(0); opacity: 1; background: #e8dcc0; }
  100% { transform: translateY(0); opacity: 0; background: #e8dcc0; }
}
@keyframes kdrop-slot { 0%, 38% { border-color: rgba(122, 91, 38,.55); } 46% { border-color: var(--gold); transform: scale(1.06); } 60%, 100% { border-color: rgba(122, 91, 38,.25); transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .kdrop__card, .kdrop__slot, .kdrop__dash rect { animation: none; }
  .kdrop__card { background: #e8dcc0; }
}
.kprev__tools { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; font-style: normal; }
.kprev__try { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--sans); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink); padding: 11px 18px; border: 1px solid var(--gold); background: rgba(247, 242, 233,.7);
  transition: background .3s var(--ease), color .3s var(--ease); }
.kprev__try::before { content: "+"; font-size: 16px; line-height: 1; color: var(--gold-deep); }
.kprev__try:hover { background: var(--ink); color: var(--ivory); }
.kprev__try input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.kprev__try:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.kprev__use { font-family: var(--sans); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; background: var(--gold); color: var(--ink);
  border: 1px solid var(--gold); padding: 11px 18px; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
.kprev__use:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.kprev__note { font-family: var(--sans); font-style: normal; font-size: 12px; color: var(--grey); max-width: 44ch; }

/* --- option design : quatre niveaux, une ligne d'or qui se remplit --- */
.kdesign { background: var(--ivory); }
.kdesign__levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px); }
.kdesign__levels li { position: relative; padding: 30px 26px 30px; background: var(--cream); display: grid; gap: 10px; align-content: start;
  opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.kdesign__levels li::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--line); }
.kdesign__levels li::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: var(--fill, 0%); background: var(--gold);
  transition: width 1.2s var(--ease) .35s; }
.kdesign__levels li:nth-child(1) { --lvl: 8%; } .kdesign__levels li:nth-child(2) { --lvl: 34%; transition-delay: .1s; }
.kdesign__levels li:nth-child(3) { --lvl: 67%; transition-delay: .2s; } .kdesign__levels li:nth-child(4) { --lvl: 100%; transition-delay: .3s; }
.kdesign__levels li.is-in { opacity: 1; transform: none; --fill: var(--lvl); }
.kdesign__k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.kdesign__levels h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 2.6vw, 40px); margin: 0; line-height: 1; }
.kdesign__levels p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* --- formats a l'echelle, sur la vraie peau --- */
.ksizes { --u: clamp(5px, .62vw, 9px); display: flex; align-items: flex-end; justify-content: center; gap: clamp(22px, 5vw, 80px);
  margin: clamp(48px, 7vw, 96px) 0 0; flex-wrap: wrap; }
.ksize { display: grid; justify-items: center; gap: 4px; text-align: center; max-width: 30ch;
  opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.ksize:nth-child(2) { transition-delay: .12s; } .ksize:nth-child(3) { transition-delay: .24s; }
.ksize.is-in { opacity: 1; transform: none; }
.ksize__sheet { display: block; width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); margin-bottom: 14px;
  background: url("../assets/img/klaf-texture.jpg") center / cover, var(--parchment);
  box-shadow: 0 30px 60px -30px rgba(60,40,10,.5), 0 0 0 1px rgba(201, 164, 94,.3); transition: transform .6s var(--ease); }
.ksize:hover .ksize__sheet { transform: translateY(-6px) rotate(-1deg); }
.ksize b { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1; }
.ksize > span:not(.ksize__sheet) { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.ksize small { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--grey); }
.kfile__finish { max-width: 70ch; margin: clamp(36px, 5vw, 60px) auto 0; text-align: center; color: var(--ink-2); }
.kfile .cta-row { justify-content: center; }

@media (max-width: 900px) {
  .kdesign__levels { grid-template-columns: 1fr 1fr; }
  .ksizes { --u: clamp(4px, 1.6vw, 7px); gap: 18px; }
  .ksize small { display: none; }
}
@media (max-width: 520px) { .kdesign__levels { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .kdesign__levels li, .ksize { transition: none; transform: none; opacity: 1; }
  .kdesign__levels li { --fill: var(--lvl); }
}

/* --- la presse : vraies photos, une grande, une verticale, un detail --- */
.kpress__grid { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto auto; gap: clamp(12px, 1.6vw, 22px); }
.kpress__grid figure { position: relative; margin: 0; overflow: hidden; background: var(--ink);
  opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.kpress__grid figure.is-in { opacity: 1; transform: none; }
.kpress__grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.kpress__grid figure:hover img { transform: scale(1.04); }
.kpress__a { aspect-ratio: 16 / 9; }
.kpress__b { grid-row: span 2; transition-delay: .12s; }
/* la verticale ne dicte pas la hauteur : elle remplit celle des deux paysages */
.kpress__b img { position: absolute; inset: 0; object-position: 50% 78%; }
.kpress__c { aspect-ratio: 16 / 9; transition-delay: .24s; }
.kpress__grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ivory); background: linear-gradient(transparent, rgba(20, 26, 39,.78)); }
@media (max-width: 760px) {
  .kpress__grid { grid-template-columns: 1fr; }
  .kpress__b { grid-row: auto; aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) { .kpress__grid figure { transition: none; opacity: 1; transform: none; } }

/* ============================================================
   LANGUES (js/i18n.js) — francais, hebreu (RTL)
   ============================================================ */
/* le temps de traduire, la page ne montre pas l'anglais (une fraction de seconde) */
html.i18n-pending body { visibility: hidden; }

/* selecteur de langue de l'en-tete */
/* langue + panier forment un seul bloc : le menu reste centre */
.header__end { display: flex; align-items: center; gap: 12px; }
.header__lang { display: flex; align-items: center; gap: 2px; }
.header__lang button { font: 600 11px/1 var(--sans); letter-spacing: .08em; color: var(--grey); background: none; border: 0; padding: 8px 6px; cursor: pointer; transition: color .3s; }
.header__lang button:hover { color: var(--ink); }
.header__lang button.is-active { color: var(--gold-deep); }
.header__lang button[lang="he"] { font-family: 'Heebo', var(--sans); font-size: 13px; letter-spacing: 0; }
body.is-on-hero .header__lang button { color: rgba(239, 231, 216,.8); text-shadow: 0 1px 10px rgba(20, 26, 39,.6); }
body.is-on-hero .header__lang button.is-active { color: var(--gold-light); }
body:has(.hero--light).is-on-hero:not(.is-hero-dark-top) .header__lang button { color: var(--ink-2); text-shadow: none; }
body:has(.hero--light).is-on-hero:not(.is-hero-dark-top) .header__lang button.is-active { color: var(--gold-deep); }
.lang button[lang="he"] { font-family: 'Heebo', var(--sans); }

/* --- hebreu : polices, et ni italique ni espacement de lettres (inexistants en hebreu) --- */
/* Bellefair (titres) : fine, contrastee, moderne ; Heebo (texte) : le sans-serif hebreu de reference */
html[lang="he"] { --serif: 'Bellefair', 'Times New Roman', serif; --sans: 'Heebo', 'Arial Hebrew', system-ui, sans-serif; }
html[lang="he"] body * { letter-spacing: 0 !important; }
html[lang="he"] i, html[lang="he"] em { font-style: normal; }
html[lang="he"] .display, html[lang="he"] .chero__title, html[lang="he"] .process__now { line-height: 1.12; }

/* --- RTL : ce qui ne se retourne pas tout seul --- */
/* fleches : elles indiquent le sens de lecture */
[dir="rtl"] .btn .arrow, [dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .link-arrow::after { content: "←"; }
[dir="rtl"] .link-arrow:hover::after { transform: translateX(-5px); }
/* en-tete, bouton flottant */
[dir="rtl"] .header__cart { margin-left: 0; }
[dir="rtl"] .fab { right: auto; left: 24px; }
/* curseurs avant/apres : l'image ne se lit pas, elle se compare — toujours gauche -> droite */
[dir="rtl"] .compare, [dir="rtl"] .compare__range { direction: ltr; }
/* heros plein cadre : le voile suit le texte, qui est maintenant a droite */
[dir="rtl"] .chero--full::before {
  background: linear-gradient(180deg, rgba(20, 26, 39,.78) 0%, rgba(20, 26, 39,.35) 16%, rgba(20, 26, 39,0) 30%),
              linear-gradient(270deg, rgba(20, 26, 39,.9) 0%, rgba(20, 26, 39,.78) 36%, rgba(20, 26, 39,.25) 58%, rgba(20, 26, 39,0) 74%),
              linear-gradient(0deg, rgba(20, 26, 39,.6) 0%, rgba(20, 26, 39,0) 45%); }
[dir="rtl"] .chero--photo .chero__figure { right: auto; left: var(--gutter); }
/* frise des etapes : le fil passe a droite, du cote des noeuds */
[dir="rtl"] .process--pinned .steps::before, [dir="rtl"] .process--pinned .steps::after { left: auto; right: 19px; }
[dir="rtl"] .process--pinned.is-live .step > div:last-child { transform: translateX(-10px); }
[dir="rtl"] .process--pinned.is-live .step.is-on > div:last-child { transform: none; }
[dir="rtl"] .process__bar span { transform-origin: right; }
/* etapes du formulaire : le trait part du cercle vers la gauche */
[dir="rtl"] .form__steps li { padding-right: 0; padding-left: 12px; }
[dir="rtl"] .form__steps li::after { left: 0; right: 30px; }
[dir="rtl"] .form__steps li:last-child { padding-left: 0; }
/* listes a filets verticaux */
[dir="rtl"] .receive__list li { border-right: 0; border-left: 1px solid var(--line); margin-right: 0; margin-left: 24px; padding: 28px 0 8px 24px; }
[dir="rtl"] .receive__list li:last-child { border-left: 0; }
@media (max-width: 900px) {
  [dir="rtl"] .chero--full::before { background: linear-gradient(180deg, rgba(20, 26, 39,.75) 0%, rgba(20, 26, 39,0) 18%),
    linear-gradient(0deg, rgba(20, 26, 39,.9) 0%, rgba(20, 26, 39,.72) 60%, rgba(20, 26, 39,.35) 100%); }
  [dir="rtl"] .receive__list li:nth-child(2) { border-left: 0; }
}
@media (max-width: 760px) { .header__end { gap: 6px; } .header__lang button { padding: 8px 4px; } }

/* petits ecrans : un bouton peut passer sur deux lignes plutot que deborder
   (en francais, « Commencer avec votre fichier » depassait a 360 px) */
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; line-height: 1.35; } }

/* ============================================================
   MENU MOBILE (moins de 900 px) — bouton dans l'en-tete, panneau plein ecran
   ============================================================ */
.header__burger { display: none; width: 40px; height: 40px; margin-inline-end: -8px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; color: inherit; }
.header__burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.header__burger span:nth-child(1) { top: 16px; }
.header__burger span:nth-child(2) { top: 23px; }
.header__burger[aria-expanded="true"] span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }
.header__cart { color: inherit; }

.mnav { position: fixed; inset: 0; z-index: 49; background: var(--ink); color: var(--ivory); display: grid; grid-template-rows: 1fr auto;
  padding: 110px var(--gutter) 34px; opacity: 0; transition: opacity .38s var(--ease); }
.mnav[hidden] { display: none; }
.mnav.is-on { opacity: 1; }
.mnav__links { display: grid; align-content: start; gap: 4px; }
.mnav__links a { font-family: var(--serif); font-size: clamp(34px, 9vw, 46px); line-height: 1.15; color: var(--ivory); padding: 10px 0; border-bottom: 1px solid rgba(239, 231, 216,.12);
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s; }
.mnav.is-on .mnav__links a { opacity: 1; transform: none; }
.mnav.is-on .mnav__links a:nth-child(2) { transition-delay: .05s; } .mnav.is-on .mnav__links a:nth-child(3) { transition-delay: .1s; } .mnav.is-on .mnav__links a:nth-child(4) { transition-delay: .15s; }
.mnav__links a[aria-current="page"] { color: var(--gold-light); }
.mnav__foot { display: grid; gap: 22px; }
.mnav__order { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.mnav__lang { display: flex; gap: 18px; }
.mnav__lang button { background: none; border: 0; padding: 6px 0; font: 500 14px/1 var(--sans); color: rgba(239, 231, 216,.7); cursor: pointer; border-bottom: 1px solid transparent; }
.mnav__lang button[lang="he"] { font-family: 'Heebo', var(--sans); }
.mnav__lang button.is-active { color: var(--gold-light); border-bottom-color: var(--gold-light); }
/* panneau ouvert : l'en-tete passe en ivoire sur l'encre, sans voile */
body.is-mnav-open .header::before, body.is-mnav-open .header::after { opacity: 0 !important; }
body.is-mnav-open .header { color: var(--ivory); }
body.is-mnav-open .header__cart, body.is-mnav-open .header__burger { color: var(--ivory); text-shadow: none; }

@media (max-width: 900px) {
  .header__burger { display: block; }
  .header__lang { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mnav, .mnav__links a, .header__burger span { transition: none; } }


/* ==========================================================================
   Version francaise (D107) : des phrases a la place des mots isoles.
   data-only-fr : n'existe qu'en francais. data-not-fr : masque en francais.
   Anglais et hebreu ne changent pas.
   ========================================================================== */
html:not([lang="fr"]) [data-only-fr] { display: none !important; }
html[lang="fr"] [data-not-fr] { display: none !important; }

.material__phrases { list-style: none; margin: 40px 0 0; padding: 24px 0 0; display: grid; gap: 12px; border-top: 1px solid rgba(239, 231, 216,.15); font-size: 16px; line-height: 1.5; color: rgba(239, 231, 216,.86); }
.chero__assure { margin: 8px 0 0; padding: 16px 0 0; max-width: 52ch; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; opacity: 0; transition: opacity .9s var(--ease) .75s; }
.chero.is-in .chero__assure { opacity: 1; }

/* Les titres francais sont de vraies phrases : plus longues, donc plus petites. */
html[lang="fr"] .hero__title .display--xl { font-size: clamp(34px, min(4.6vw, 8svh), 72px); line-height: 1.04; }
html[lang="fr"] .hero__title .display--xl .word { display: block; width: fit-content; max-width: 100%; }
html[lang="fr"] .chero__title { font-size: clamp(32px, min(3.7vw, 7svh), 62px); line-height: 1.06; }
html[lang="fr"] .chero__lede { max-width: 52ch; }
html[lang="fr"] .house__statement { font-size: clamp(26px, 2.9vw, 44px); line-height: 1.16; }
html[lang="fr"] .house__txt p { font-size: 15px; line-height: 1.5; }
html[lang="fr"] .display--l { font-size: clamp(30px, 3.6vw, 56px); line-height: 1.1; }
/* Le chapeau francais est plus long : il traverse les zones les plus claires du film. */
html[lang="fr"] .hero--light.is-dark-bg .hero__title .display, html[lang="fr"] .hero--light.is-dark-bg .hero__lede { text-shadow: 0 1px 3px rgba(20, 26, 39,.7), 0 0 20px rgba(20, 26, 39,.65), 0 0 44px rgba(20, 26, 39,.4); }
/* Ecran peu haut : les chapitres francais ne tiennent plus dans un bloc epingle.
   Meme lecture que sur telephone : la section defile normalement. */
@media (min-width: 901px) and (max-height: 820px) {
  html[lang="fr"] .house__pin.is-live { height: auto; }
  html[lang="fr"] .house__pin.is-live .house__sticky { position: static; height: auto; }
  html[lang="fr"] .house__pin.is-live .house__statement .w { color: var(--ink); }
  html[lang="fr"] .house__pin.is-live .house__ch { clip-path: none; transform: none; }
  html[lang="fr"] .house__pin.is-live .house__ch img { transform: none; }
}