html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:root{
  --argile:#E8E3DC;
  --ivoire:#F6ECE6;
  --graphite:#3E3A36;
  --bleu:#A5B4C4;
  --dore:#C8B890;

  /* polices */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-serif: 'Spectral', serif;
}

/* ✅ Base */
body{
  margin:0;
  background:var(--argile);
  color:var(--graphite);
  font-family: var(--font-sans);
  font-weight:300;
  line-height:1.7;
}

/* ✅ Header & logos */
header.site-header{
  position:fixed; inset:0 0 auto 0; height:84px; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:0 32px;
  background: var(--argile);
}

.brand .mc-monogram { height:82px; }
.brand .mc-wordmark { height:68px; }

@media (min-width:1000px){
  .brand .mc-monogram { height:98px; }
  .brand .mc-wordmark { height:80px; }
}

.nav a{
  text-decoration:none; color:var(--graphite);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  padding:10px 12px; border-radius:8px; opacity:.9;
}
.nav a:hover{ text-shadow:0 0 1px var(--dore) }

/* ✅ Hero */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden;
  padding:140px 28px 64px;
  background:
    linear-gradient(180deg, rgba(165,180,196,.40) 0%, rgba(165,180,196,.00) 42%),
    radial-gradient(1100px 520px at 72% 18%, rgba(200,184,144,.40), transparent 60%),
    linear-gradient(160deg, #F1E7DA 0%, #E6DFD5 60%, #E0D8CD 100%);
}
.hero::after{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background: radial-gradient(600px 300px at 65% 0%, rgba(165,180,196,.25), transparent 60%);
  animation: slowSweep 18s linear infinite;
}
.hero .content{max-width:1024px; margin:0 auto; text-align:center}

/* ✅ Titres éditoriaux — GLOBAL (corrige Journal, Contact, etc) */
h1, h2, h3,
.page-title{
  font-family: var(--font-serif);
  font-weight:400;
  letter-spacing:.02em;
}

/* hiérarchie typographique */
h1{font-size:56px; line-height:1.1; margin:0 0 .6em}
h2{font-size:36px; line-height:1.2; margin:0 0 .5em}
h3{font-size:24px; line-height:1.3; margin:0 0 .4em}

/* ✅ Titres dans les sections existantes */
.hero .tagline,
.hero h1,
.univers h2,
.journal h2,
.videos h2,
.shop h2,
.about h2,
.card .title,
.teaser h3{
  font-family: var(--font-serif);
  font-weight:400;
  letter-spacing:.02em;
}

.hero .tagline{
  text-transform:uppercase;
  font-weight:300;
  letter-spacing:.18em;
  font-size:18px;
  color:#6f6861;
}

.hero h1{
  font-size:58px; line-height:1.15; margin:.35em 0 .35em;
}

.hero .lead{
  max-width:760px; margin:0 auto 24px; color:#5a554f;
}

.hero .scroll{
  margin-top:28px; color:var(--dore); letter-spacing:.3em; text-transform:uppercase; font-size:12px; opacity:.8;
}

/* ✅ Sections */
.section{padding:96px 28px; position:relative}
.section + .section{border-top:1px solid rgba(200,184,144,.55)}

/* ✅ Univers */
.grid{display:grid; gap:16px}
.grid.cols-5{grid-template-columns:repeat(5, 1fr)}
.grid.cols-4{grid-template-columns:repeat(4, 1fr)}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
@media (max-width:1200px){ .grid.cols-5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .grid.cols-3,.grid.cols-4,.grid.cols-5{grid-template-columns:1fr} }

.card{
  position:relative; border-radius:18px; overflow:hidden; min-height:240px; background:#fff;
  box-shadow:0 10px 30px rgba(62,58,54,.08);
  transform:translateZ(0); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(62,58,54,.12) }
.card .overlay{position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(62,58,54,.08), rgba(62,58,54,.08)),
              linear-gradient(180deg, rgba(200,184,144,.25), rgba(165,180,196,.14));}
.card .title{position:absolute; left:16px; bottom:14px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.25); font-size:20px}

/* ✅ Teasers */
.teaser{background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(62,58,54,.08); transform:translateY(12px); opacity:.001}
.teaser img{display:block; width:100%; height:180px; object-fit:cover}
.teaser .txt{padding:14px}
.teaser p{margin:0; color:#5a554f; font-size:14px}
.teaser.reveal{animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards}

/* ✅ Footer */
.footer{padding:48px 28px; background:var(--ivoire); border-top:1px solid rgba(200,184,144,.55)}
.footer .cols{display:grid; grid-template-columns: 2fr 1fr 1fr; gap:18px}
.footer .mc{display:flex; align-items:center; gap:12px; color:#7a736b}
.footer .mc img{height:40px}
.footer a{color:var(--graphite); text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ✅ Animations */ @keyframes slowSweep {0%{transform:translateY(0)} 50%{transform:translateY(14px)} 100%{transform:translateY(0)}} @keyframes glassPulse {0%,100%{background:rgba(255,255,255,.12)} 50%{background:rgba(255,255,255,.18)}} @keyframes rise {to{opacity:1; transform:translateY(0)}} } /* ✅ Fix mobile uniquement */ @media(max-width: 650px){
}
/* ✅ Fix iPhone "notch" / safe-area issue */
header.site-header {
  padding-top: env(safe-area-inset-top);
  padding-bottom: 4px;
}
@supports(padding: env(safe-area-inset-top)) {
  header.site-header {
    padding-top: env(safe-area-inset-top);
  }

.teaser-link article {
  transition: 0.25s ease;
}

.teaser-link:hover article {
  transform: translateY(-4px);
}