/* ═══════════════════════════════════════════════════════════════
   MAISON OLIVIER — HABILLAGE COMMUN (nov. 2026)
   Chargé après le style propre de chaque page : il impose la même
   allure partout (couleurs, lettres, menu, pied de page, boutons).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --fond:#F5F2EC; --blanc:#FBFAF7; --encre:#0A2240; --nuit:#071833;
  --gris:#5D6574; --trait:#D8D1C4; --or:#A8864A; --fondu:#F3C557;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* anciens noms, remappés */
  --creme:var(--fond); --papier:var(--blanc); --kraft:var(--or);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Futura','Century Gothic',sans-serif;
  --corps:'Jost','Futura','Century Gothic',sans-serif;
}
body{font-family:var(--sans);font-weight:300;background:var(--fond);color:var(--encre);letter-spacing:.005em}
body.sans-hero{padding-top:96px}
.wrap{max-width:1320px;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}

/* grain de papier ancien */
body::after{content:"";position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:mo-grain 1.2s steps(6) infinite}
@keyframes mo-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ───────── Lettres ───────── */
.kicker,.eyebrow,.label{font-family:var(--sans)!important;font-weight:400;font-size:.66rem!important;letter-spacing:.3em!important;text-transform:uppercase;color:var(--or)}
h1,h2,h3,.titre{font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
.page-intro{padding-top:clamp(70px,10vw,130px)!important;padding-bottom:clamp(40px,6vw,70px)!important}
.page-intro h1,.art-head h1,.hero h1{font-family:var(--serif)!important;font-weight:300!important;font-size:clamp(2.6rem,6.2vw,5.2rem)!important;line-height:1.02!important;letter-spacing:-.02em}
.page-intro .lead,.page-intro > p:not(.kicker){font-size:1.02rem;color:var(--gris)}
.sec-head h2,.g-head h2,section h2:not(.titre){font-family:var(--serif)!important;font-weight:300!important;font-size:clamp(2.1rem,4.6vw,3.6rem)!important;line-height:1.05}
h3{font-weight:400}
.sec{padding-top:clamp(90px,11vw,150px)!important;padding-bottom:clamp(90px,11vw,150px)!important}
.sec-head{margin-bottom:clamp(36px,5vw,64px)!important}
p{font-weight:300}
em{font-style:italic}

/* ───────── Boutons : sobres, à angle droit ───────── */
.btn,.btn-solid,.btn-ghost,.band-btn,.btn-mail,.btn-dl,.btn-cream,.form-card button,.cta-row a{
  border-radius:0!important;font-family:var(--sans)!important;font-weight:400!important;font-size:.66rem!important;letter-spacing:.28em!important;text-transform:uppercase;padding:17px 34px!important;box-shadow:none!important}
.btn-solid,.form-card button,.band-btn,.btn-mail,.btn-dl{background:var(--encre);color:var(--fond)}
.btn-ghost{background:transparent;border:1px solid currentColor}

/* ───────── Cartes : papier, filet fin, pas d'ombre ───────── */
.idee,.formule,.coffret,.prat,.canal,.form-card,.etape,.card,.acard{border-radius:0!important;box-shadow:none!important}
.idee,.formule,.grille > .coffret:not(.prestige),.prat,.form-card{background:var(--blanc)!important;border:1px solid var(--trait)!important}
.idee h3,.formule h3,.coffret h3,.prat h3{font-family:var(--serif);font-weight:400}
img{border-radius:0!important}
input,select,textarea{border-radius:0!important;font-family:var(--sans)!important}

/* ───────── Apparitions plus lentes, plus douces ───────── */
.reveal{transition:opacity 1.2s ease,transform 1.2s var(--ease)!important}

/* ───────── MENU ───────── */
#topnav,.ancien-menu{display:none!important}
#mo-nav{position:fixed;inset:0 0 auto;z-index:600;height:96px;transition:background .5s,height .5s,border-color .5s,transform .6s var(--ease);border-bottom:1px solid transparent}
#mo-nav.cache{transform:translateY(-100%)}
#mo-nav .nav-in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
#mo-nav .nav-g,#mo-nav .nav-d{display:flex;gap:clamp(18px,2vw,30px)}
#mo-nav .nav-d{justify-content:flex-end}
#mo-nav .nav-g a,#mo-nav .nav-d a{white-space:nowrap;font-family:var(--sans);font-size:.64rem;font-weight:400;letter-spacing:.28em;text-transform:uppercase;color:#fff;transition:opacity .3s,color .5s}
#mo-nav a.actif{border-bottom:1px solid currentColor;padding-bottom:4px}
#mo-nav .nav-g a:hover,#mo-nav .nav-d a:hover{opacity:.55}
#mo-nav .logo-img{height:62px;width:auto;transition:height .5s;display:block}
#mo-nav .logo-dark{display:none}
#mo-nav.scrolled{background:rgba(245,242,236,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);height:74px;border-bottom-color:var(--trait)}
#mo-nav.scrolled .logo-img{height:48px}
#mo-nav.scrolled .logo-light{display:none}
#mo-nav.scrolled .logo-dark{display:block}
#mo-nav.scrolled a,#mo-nav.scrolled .burger{color:var(--encre)}
body.sans-hero #mo-nav:not(.scrolled){background:var(--fond)}
body.sans-hero #mo-nav:not(.scrolled) .logo-light{display:none}
body.sans-hero #mo-nav:not(.scrolled) .logo-dark{display:block}
body.sans-hero #mo-nav:not(.scrolled) a,body.sans-hero #mo-nav:not(.scrolled) .burger{color:var(--encre)}
#mo-nav .burger{display:none;background:none;border:0;color:#fff;cursor:pointer;font-family:var(--sans);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase}
#mo-menu{display:none}
@media(max-width:1180px){
  #mo-nav .nav-g,#mo-nav .nav-d{display:none}
  #mo-nav .burger{display:block;justify-self:start}
  #mo-menu{position:fixed;inset:0;z-index:800;background:var(--encre);color:var(--fond);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;clip-path:circle(0 at 30px 40px);transition:clip-path .8s var(--ease)}
  #mo-menu.ouvert{clip-path:circle(150% at 30px 40px)}
  #mo-menu a{font-family:var(--serif);font-size:2.1rem;font-weight:300}
  #mo-menu .fermer{position:absolute;top:34px;left:22px;background:none;border:0;font-family:var(--sans);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--fond);cursor:pointer}
  body.sans-hero{padding-top:84px}
  #mo-nav{height:84px}
}

/* ───────── PIED DE PAGE ───────── */
footer.mo-pied{padding:80px 0 44px;text-align:center;background:var(--fond);border-top:1px solid var(--trait)}
footer.mo-pied .foot-logo{height:84px;width:auto;margin:0 auto 28px;display:block}
footer.mo-pied .cols{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;margin:0 20px 26px}
footer.mo-pied .cols a{font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;font-weight:400;color:var(--encre)}
footer.mo-pied small{display:block;color:var(--gris);font-size:.78rem;margin-top:4px}
footer.mo-pied .adresses{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 30px;margin-bottom:18px;font-size:.84rem;color:var(--gris)}

/* ───────── Curseur (ordinateur) ───────── */
.mo-curseur{position:fixed;left:0;top:0;z-index:9500;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease);display:none}
.mo-curseur span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .3s}
.mo-curseur.grand{width:86px;height:86px;margin:-43px 0 0 -43px}
.mo-curseur.grand span{opacity:1}
@media(pointer:fine){.mo-curseur{display:block}}

/* ───────── Mots qui se lèvent ───────── */
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .2em;margin:0 -.02em -.2em}
.mot > span{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.mots.vu .mot > span{transform:none}

@media(prefers-reduced-motion:reduce){body::after{animation:none}.mot > span{transform:none!important;transition:none}}