:root{--wine:#681a25;--dark:#411017;--brown:#3b2416;--cream:#f3eadb;--paper:#fbf5ea;--gold:#d7aa53;--ink:#2b1b15}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.site-header{position:absolute;z-index:10;inset:0 0 auto;height:92px;display:flex;align-items:center;gap:42px;padding:0 5vw;color:var(--cream);border-bottom:1px solid #efd6a340}.brand{display:flex;align-items:center;gap:11px;font:24px Georgia,serif;letter-spacing:.08em}.brand img{width:42px;height:42px;object-fit:contain}nav{display:flex;gap:30px;margin-left:auto;font-size:13px}nav a{opacity:.76}nav a:hover{opacity:1;color:var(--gold)}.navCta{border:1px solid #d7aa53b3;padding:12px 18px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.langSwitch{border:1px solid #d7aa5373;padding:8px 12px;font-size:11px;letter-spacing:.12em;color:var(--gold);transition:.2s}
.langSwitch:hover{background:#d7aa531f;border-color:#d7aa53b3}
.hero{min-height:760px;height:100vh;display:grid;grid-template-columns:1.05fr .95fr;position:relative;overflow:hidden;color:var(--cream);background:radial-gradient(circle at 72% 45%,#842b32,#681a25 32%,#50151e 66%,#391014)}.hero:before{content:"";position:absolute;inset:0;opacity:.15;background:linear-gradient(105deg,transparent 0 46%,#ffffff30 46.2%,transparent 46.5%)}.heroCopy{z-index:2;align-self:center;padding:130px 5vw 80px 10vw}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.25em;font-size:11px;font-weight:bold;margin:0 0 22px}h1,h2,h3{font-family:Georgia,serif;font-weight:400;margin:0}h1{font-size:clamp(68px,8vw,124px);line-height:.84;letter-spacing:-.055em}.lead{max-width:590px;margin:32px 0;font:18px/1.7 Georgia,serif;opacity:.84}.actions{display:flex;align-items:center;gap:32px;margin-top:38px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:0 24px;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:bold;transition:.2s}.gold{color:#321d12;background:var(--gold)}.gold:hover{background:#edc874;transform:translateY(-2px)}.under{font-size:12px;border-bottom:1px solid #ffffff66;padding-bottom:5px}.heroArt{position:relative;display:grid;place-items:center}.heroArt:after{content:"";position:absolute;width:430px;height:80px;bottom:14%;background:#1c080b70;filter:blur(24px);border-radius:50%}.orb{position:absolute;width:390px;height:390px;border-radius:50%;opacity:.68;background:radial-gradient(circle at 35% 30%,#d07679,#56111b 55%,transparent 72%)}.bottle{position:absolute;z-index:2;width:174px;height:390px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:70px 70px 18px 18px;border:1px solid #edcb896b;background:linear-gradient(110deg,#ffffff24,#32100a99 30%,#130805e0 67%,#ffffff14);box-shadow:0 50px 80px #14000075,inset 12px 0 28px #ffffff14}.bottle:before{content:"";position:absolute;top:-83px;width:74px;height:98px;background:linear-gradient(90deg,#19110f,#6d4a2a,#21140f);border-radius:6px 6px 0 0}.bottle span{width:98px;height:122px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold);font:65px Georgia,serif}.bottle i{font-family:Georgia,serif;color:var(--gold);margin-top:18px}.back{transform:translate(95px,-45px) rotate(7deg);opacity:.53;scale:.92}.front{transform:translate(-35px,30px) rotate(-4deg)}.heroArt p{position:absolute;right:7%;bottom:12%;color:#ffffff61;font:italic 22px Georgia,serif}
.house{min-height:670px;display:grid;grid-template-columns:.9fr 1.1fr;background:var(--cream)}.houseMark{display:grid;place-items:center;position:relative;overflow:hidden;background:var(--brown)}.houseMark:before{content:"";position:absolute;width:65%;aspect-ratio:1;border:1px solid #d7aa534d;border-radius:50%}.houseMark img{width:min(55%,360px);position:relative;filter:drop-shadow(0 15px 20px #0005)}.copy{align-self:center;padding:80px 9vw;max-width:780px}.copy h2,.heading h2,.waiting h2,.contact h2{font-size:clamp(48px,5.5vw,82px);line-height:.95;letter-spacing:-.04em}.copy>p:not(.eyebrow),.waiting>div>p:not(.eyebrow),.contact>div>p:not(.eyebrow){font:18px/1.75 Georgia,serif;opacity:.76;margin:32px 0}blockquote{border-left:1px solid var(--gold);margin:35px 0 0;padding-left:24px;color:var(--wine);font:italic 25px Georgia,serif}
.collection{padding:130px 6vw;background:#f8f0e3}.heading{display:flex;justify-content:space-between;gap:50px;align-items:end;max-width:1250px;margin:0 auto 70px}.heading>p{width:360px;font:16px/1.7 Georgia,serif;opacity:.65}.grid{max-width:1400px;margin:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:22px}.card{grid-column:span 2;background:#fffaf2;border:1px solid #e6d7c1;min-height:550px;overflow:hidden;transition:.25s}.card:nth-child(4){grid-column:2/span 2}.card:nth-child(5){grid-column:4/span 2}.card:hover{transform:translateY(-8px);box-shadow:0 25px 50px #4528171f}.stage{height:320px;position:relative;display:grid;place-items:center;background:radial-gradient(circle,var(--glow),transparent 58%),linear-gradient(145deg,#261712,var(--gem))}.stage b{position:absolute;left:22px;top:20px;color:#ffffff8c;font:13px Georgia,serif}.gem{width:150px;height:205px;display:grid;place-items:center;clip-path:polygon(50% 0,91% 22%,100% 69%,50% 100%,0 69%,9% 22%);background:linear-gradient(135deg,#ffffff8c,var(--gem) 36%,#180c09 88%);filter:drop-shadow(0 20px 25px var(--gem))}.gem span{color:#ffffffd1;font:72px Georgia,serif;text-shadow:0 2px 5px #0005}.cardCopy{padding:28px}.cardCopy small{color:#9b7739;text-transform:uppercase;letter-spacing:.13em;font-size:9px}.cardCopy h3{font-size:33px;margin:13px 0}.cardCopy p{font:14px/1.65 Georgia,serif;opacity:.68}
.ritual{display:grid;grid-template-columns:1fr 1fr;min-height:690px;background:var(--wine);color:var(--cream)}.ritual .copy{padding:110px 8vw}.chips{display:flex;flex-wrap:wrap;gap:12px}.chips span{border:1px solid #d7aa5373;padding:10px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.ritualArt{position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle,#713421,#26150f 68%)}.ritualArt:before,.ritualArt:after{content:"";position:absolute;width:410px;height:410px;border:1px solid #d7aa5359;transform:rotate(45deg)}.ritualArt:after{width:260px;height:260px}.ritualArt span{z-index:2;color:var(--gold);font:190px Georgia,serif;text-shadow:0 20px 45px #000}
.waiting{display:grid;grid-template-columns:1.1fr .9fr;gap:10vw;padding:130px 10vw;background:var(--brown);color:var(--cream)}.waiting form,.contact form{display:grid;gap:10px;align-content:center}label{margin-top:8px;color:var(--gold);text-transform:uppercase;letter-spacing:.15em;font-size:9px}input,textarea{width:100%;padding:14px 2px;color:inherit;background:transparent;border:0;border-bottom:1px solid #d7aa5373;outline:none}input:focus,textarea:focus{border-color:var(--gold)}.waiting form button{margin-top:18px}.waiting small{opacity:.45}.contact{display:grid;grid-template-columns:1fr 1fr;gap:12vw;padding:120px 10vw;background:var(--cream)}.contact>div>a{display:block;color:var(--wine);margin:9px 0;font:18px Georgia,serif}.outline{justify-self:start;color:var(--wine);background:transparent;border:1px solid var(--wine);margin-top:15px}.outline:hover{background:var(--wine);color:white}.toast{position:fixed;z-index:30;right:25px;bottom:25px;max-width:420px;padding:18px 50px 18px 20px;background:var(--gold);color:#321d12;box-shadow:0 14px 40px #0004;font-size:14px}.toast button{position:absolute;right:12px;top:8px;background:none;border:0;font-size:24px}footer{min-height:150px;padding:35px 6vw;background:#1f120d;color:#ffffff94;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px}
@media(max-width:900px){.site-header{height:76px;padding:0 20px}.site-header nav{display:none}.langSwitch{margin-left:auto;padding:6px 10px}.navCta{padding:10px 12px}.brand span{display:none}.hero{min-height:850px;height:auto;grid-template-columns:1fr}.heroCopy{padding:150px 7vw 40px}.heroArt{min-height:430px}.bottle{width:130px;height:285px;border-radius:50px 50px 14px 14px}.bottle:before{top:-60px;width:55px;height:70px}.bottle span{width:72px;height:90px;font-size:48px}.back{transform:translate(70px,-30px) rotate(7deg)}.front{transform:translate(-28px,20px) rotate(-4deg)}.house,.ritual,.waiting,.contact{grid-template-columns:1fr}.houseMark{min-height:430px}.copy,.waiting,.contact{padding:80px 7vw}.ritualArt{min-height:470px}.grid{grid-template-columns:1fr 1fr}.card,.card:nth-child(4),.card:nth-child(5){grid-column:span 1}.heading{align-items:start;flex-direction:column}.heading>p{width:auto}footer{flex-direction:column;text-align:center;padding:40px 20px}}
@media(max-width:560px){h1{font-size:60px}.actions{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.collection{padding:85px 5vw}.heading h2,.copy h2,.waiting h2,.contact h2{font-size:48px}.site-header .navCta{display:none}.heroArt p{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.button{transition:none}}

.manifesto{display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw;padding:115px 10vw;background:#fffaf1}.manifesto h2,.brands h2{font-size:clamp(48px,5.5vw,82px);line-height:.95;letter-spacing:-.04em}.manifestoCopy{border-left:1px solid #d7aa5370;padding-left:5vw}.manifestoCopy p{margin:0 0 24px;font:19px/1.75 Georgia,serif;opacity:.76}
.productShowcase{max-width:1400px;margin:0 auto 90px;display:grid;gap:24px}.showcaseHero{margin:0;position:relative;aspect-ratio:1672/941;overflow:hidden;background:#23130e}.showcaseHero img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;transition:transform .7s ease}.showcaseHero:hover img{transform:scale(1.015)}.showcaseHero:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#160b08d9)}.showcaseHero figcaption{position:absolute;z-index:2;left:48px;bottom:42px;color:var(--cream)}.showcaseHero figcaption span{display:block;margin-bottom:10px;color:var(--gold);font-size:10px;font-weight:bold;letter-spacing:.2em;text-transform:uppercase}.showcaseHero figcaption strong{font:38px Georgia,serif}.showcaseHero.reverse figcaption{left:auto;right:48px;text-align:right}
.brands{display:grid;grid-template-columns:.9fr 1.1fr;gap:10vw;padding:125px 10vw;background:#24150f;color:var(--cream)}.brandsIntro>p:not(.eyebrow){max-width:560px;margin-top:30px;font:18px/1.75 Georgia,serif;opacity:.7}.brandLines{display:grid;align-content:center}.brandLines article{padding:34px 0;border-top:1px solid #d7aa5355}.brandLines article:last-child{border-bottom:1px solid #d7aa5355}.brandLines small{color:var(--gold);font-size:9px;letter-spacing:.17em;text-transform:uppercase}.brandLines h3{font-size:38px;margin:11px 0}.brandLines p{max-width:640px;font:16px/1.65 Georgia,serif;opacity:.68}.brandLines a{display:inline-block;margin-top:10px;color:var(--gold);font-size:12px;border-bottom:1px solid #d7aa5370;padding-bottom:4px}.brandLines .future{opacity:.62}
@media(max-width:900px){.manifesto,.brands{grid-template-columns:1fr;padding:80px 7vw}.manifestoCopy{padding-left:0;border-left:0;border-top:1px solid #d7aa5370;padding-top:32px}}
@media(max-width:560px){.manifesto h2,.brands h2{font-size:48px}.showcaseHero{min-height:0;aspect-ratio:1672/941}.showcaseHero img{object-fit:contain}.showcaseHero figcaption,.showcaseHero.reverse figcaption{left:20px;right:20px;bottom:18px;text-align:left}.showcaseHero figcaption strong{font-size:25px}}

/* Kimélém Parfum leads the collection experience; Yahudah remains the house signature. */
.kimelemBrand{gap:13px;letter-spacing:0}.kimelemBrand>span:last-child{display:grid;line-height:1}.kimelemBrand strong{font-weight:400;font-size:25px}.kimelemBrand small{margin-top:5px;color:var(--gold);font:8px Arial,sans-serif;text-transform:uppercase;letter-spacing:.34em}.brandGem{color:var(--gold);font-size:24px;text-shadow:0 0 18px #d7aa5388}
.houseMark:before{display:none}
.heroArt p{z-index:3;color:#ffffff9c}.heroArt p small{font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.2em;color:var(--gold)}
.stage{overflow:hidden;background:radial-gradient(circle at 50% 45%,#7a3e225c,transparent 58%),linear-gradient(145deg,#261712,#4a2116)}
.stage img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 18px 18px #0009);transition:transform .35s ease}.card:hover .stage img{transform:scale(1.035)}
.footerBrand{display:grid;gap:7px;color:var(--cream)}.footerBrand strong{font:25px Georgia,serif;font-weight:400}.footerBrand small{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:8px}
@media(max-width:900px){.kimelemBrand strong{font-size:20px}.kimelemBrand small{font-size:7px}}

/* HERO — recomposé le 2026-08-08 à la demande de Jean-Luc : le flacon doit
   être plus proche du texte de gauche (et aligné avec lui), et la table doit
   apparaître dès la zone du texte plutôt que tout en bas d'un hero 100vh
   majoritairement vide (mur). Solution : hero moins haut (85vh au lieu de
   100vh, donc moins d'espace "mur" avant que la table n'apparaisse — la
   photo n'étant pas recadrée verticalement par `cover`, réduire la hauteur
   du hero suffit à faire remonter la table dans le cadre) + flacon/ombre/
   légende ancrés à 40% (plus près de heroCopy) au lieu de 50% (centré dans
   toute la colonne droite) + flacon remonté (bottom:12% au lieu de 5%) pour
   laisser de l'espace à la légende sans chevaucher l'étiquette du produit. */
.hero{height:85vh;min-height:640px;background:#24130d url('../images/hero-rubis-dor-background.webp?v=1') center center/cover no-repeat}
.hero:before{
  opacity:1;
  background:linear-gradient(180deg,rgba(104,26,37,.88) 0,rgba(104,26,37,.30) 10%,transparent 25%);
}
header{background:linear-gradient(90deg,#50151e,#681a25 58%,#5a1820)}
.kimelemBrand{height:70px;letter-spacing:0}
.kimelemBrand img{width:174px;height:66px;object-fit:contain;object-position:left center;filter:drop-shadow(0 5px 15px #1d03065c)}
.ritualArt img{position:relative;z-index:2;width:min(54%,360px);height:auto;object-fit:contain;filter:drop-shadow(0 24px 38px #0009)}
.ritualArt:before,.ritualArt:after{display:none}
.stage{padding:34px 62px}
.stage img{width:100%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 18px 18px #0009)}

.heroArt{position:relative;display:grid;place-items:center;isolation:isolate}
.heroArt:before{display:none}
.orb{display:none}
.heroProduct{position:absolute;z-index:2;top:auto;left:40%;right:auto;bottom:12%;width:min(63%,460px);height:min(72%,555px);object-fit:contain;object-position:center bottom;transform:translateX(-50%);filter:drop-shadow(0 11px 9px rgba(18,6,2,.82)) drop-shadow(0 27px 31px rgba(19,7,3,.42));-webkit-mask-image:none;mask-image:none}
.heroArt:after{content:"";display:block;position:absolute;z-index:1;left:40%;right:auto;bottom:11.6%;width:min(52%,340px);height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(236,169,88,.30) 0,rgba(112,48,18,.28) 38%,rgba(19,7,3,.50) 68%,transparent 81%);filter:blur(7px);transform:translateX(-50%) scaleY(.45);pointer-events:none}
.heroArt p{position:absolute;z-index:4;left:40%;right:auto;bottom:3%;transform:translateX(-50%);text-align:center;color:#ffffff9c}

@media(max-width:900px){
  .kimelemBrand{height:58px}
  .kimelemBrand img{width:142px;height:54px}
  .hero{height:auto;min-height:850px}
  .hero:before{background:linear-gradient(180deg,#681a25 0,rgba(104,26,37,.58) 9%,transparent 25%)}
  .heroArt:after{left:50%;right:auto;bottom:3.7%;width:60%;height:30px}
  .heroProduct{top:auto;right:13%;bottom:4%;left:13%;width:74%;height:80%;object-position:center bottom;transform:none;filter:drop-shadow(0 9px 7px rgba(18,6,2,.82)) drop-shadow(0 21px 23px rgba(19,7,3,.40));-webkit-mask-image:none;mask-image:none}
  .heroArt p{display:none}
}

/* ============================================================
   FOND UNIFORME — la même photo de table (hero-rubis-dor-background.webp)
   habille maintenant toutes les sections principales, pas seulement le
   hero, pour une identité visuelle cohérente sur toute la page. Chaque
   section garde un voile de couleur qui lui est propre (chaud/brun,
   ou vin pour le rituel) pour la lisibilité et pour garder un peu de
   rythme entre les sections — mais la photo de fond est partout la même.
   Le ?v=1 dans les deux url() ci-dessous est volontaire : cet hébergement
   met les images en cache 1 an dans chaque navigateur visiteur. Si cette
   photo est un jour remplacée, il FAUT incrémenter ce numéro (?v=2, etc.)
   sinon les visiteurs qui l'ont déjà vue continueront d'afficher l'ancienne
   version indéfiniment, même après un nouveau déploiement du thème.

   Le pied de page reste en couleur unie : à sa hauteur réduite, la photo
   n'y serait qu'un minuscule fragment à peine reconnaissable.
   ============================================================ */
.house,.manifesto,.collection,.ritual,.waiting,.contact,.brands{
  position:relative;
  overflow:hidden;
  background:#24130d url('../images/hero-rubis-dor-background.webp?v=1') center bottom/cover no-repeat;
}
.house:before,.manifesto:before,.collection:before,.ritual:before,.waiting:before,.contact:before,.brands:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.house>*,.manifesto>*,.collection>*,.ritual>*,.waiting>*,.contact>*,.brands>*{position:relative;z-index:1}

.house:before,.collection:before,.contact:before{background:rgba(43,26,17,.82)}
.ritual:before,.manifesto:before{background:rgba(104,26,37,.62)} /* le rouge du "geste Kimélém" repris ici, dans la philosophie */
.waiting:before{background:rgba(59,36,22,.74)}
.brands:before{background:rgba(30,17,11,.72)}

.house,.manifesto,.collection,.contact{color:var(--cream)}
.house .copy>p:not(.eyebrow),.manifesto .manifestoCopy p,.collection .heading>p{opacity:.82}
.house blockquote{color:var(--gold)}
.contact>div>a{color:var(--gold)}
.outline{color:var(--cream);border-color:#f3eadb8c}
.outline:hover{background:#f3eadb1a;color:var(--cream)}
.collection .heading h2,.house .copy h2,.manifesto h2{color:var(--cream)}
.houseMark{background:var(--brown)} /* panneau distinct, volontairement laissé en brun uni */

/* Les cartes produits restent des panneaux clairs pour la lisibilité des
   notes olfactives — elles ne doivent pas hériter du texte clair (cream)
   du fond photo de .collection, sinon le texte devient illisible sur
   fond blanc. Couleurs explicites, indépendantes de la section. */
.cardCopy h3{color:var(--ink)}
.cardCopy p{color:var(--ink);opacity:.68}
.cardCopy small{color:#9b7739}

/* Sept Joyaux : la carte conserve exactement la présentation V3.10, avec
   uniquement le recto. La septième carte est centrée sur la dernière rangée. */
.grid .card:nth-child(4),.grid .card:nth-child(5),.grid .card:nth-child(6){grid-column:span 2}
.grid .card:nth-child(7){grid-column:3/span 2}
@media(max-width:900px){.grid .card:nth-child(4),.grid .card:nth-child(5),.grid .card:nth-child(6),.grid .card:nth-child(7){grid-column:span 1}}

/* Menu mobile/tablette (<=900px) : la nav (Maison, Joyaux, Lumières, Liste
   d'attente, Contact) était réglée display:none sur petit écran sans aucun
   moyen de la rouvrir — personne ne pouvait atteindre /bougies/ ni les autres
   sections depuis un téléphone ou une tablette. Bouton hamburger ajouté pour
   déplier la nav en tiroir; caché sur desktop où la nav reste visible en ligne. */
.navToggle{display:none;background:none;border:0;padding:0;width:30px;height:22px;position:relative;cursor:pointer;flex-shrink:0}
.navToggle span,.navToggle span:before,.navToggle span:after{content:"";position:absolute;left:0;width:100%;height:1px;background:var(--cream);transition:transform .2s,opacity .2s}
.navToggle span{top:10px}
.navToggle span:before{top:-9px}
.navToggle span:after{top:9px}
.site-header.navOpen .navToggle span{opacity:0}
.site-header.navOpen .navToggle span:before{transform:translateY(9px) rotate(45deg)}
.site-header.navOpen .navToggle span:after{transform:translateY(-9px) rotate(-45deg)}
@media(max-width:900px){
  .navToggle{display:block;margin-left:auto}
  .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#1c0f0af2;padding:8px 7vw 20px;border-bottom:1px solid #efd6a340}
  .site-header.navOpen nav{display:flex}
  .site-header nav a{padding:16px 0;border-bottom:1px solid #ffffff17;opacity:.85;width:100%}
  .langSwitch{margin-left:16px}
}