:root{
    --noir:#231C1E;
    --noir-soft:#3D3236;
    --creme:#FBF4EF;
    --creme-pure:#FFFBF8;
    --poudre:#E7C9C3;
    --rose:#C9697A;
    --rose-d:#A84A5C;
    --terracotta:#C98A6B;
    --brume:#9D9089;
    --line:rgba(35,28,30,.12);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--creme);color:var(--noir);
    font-family:'Sora',system-ui,sans-serif;font-weight:300;
    line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  ::selection{background:var(--rose);color:#fff}
  img{display:block}
  .serif{font-family:'Literata',Georgia,serif}
  .eyebrow{font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;
    color:var(--rose-d);font-weight:400}
  a{color:inherit}

  /* NAV */
  nav{position:fixed;top:0;left:0;right:0;z-index:60;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.1rem clamp(1.1rem,4vw,3rem);
    transition:background .4s,border-color .4s,box-shadow .4s;border-bottom:1px solid transparent}
  nav.scrolled{background:rgba(251,244,239,.92);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)}
  nav .mark{font-family:'Literata',serif;font-weight:400;font-size:1.05rem;
    letter-spacing:.06em;display:flex;align-items:baseline;gap:.35rem}
  nav .mark b{font-style:italic;font-weight:400;color:var(--rose-d)}
  nav ul{display:flex;gap:1.7rem;list-style:none;align-items:center}
  nav a{text-decoration:none;font-size:.7rem;letter-spacing:.2em;
    text-transform:uppercase;opacity:.78;transition:opacity .3s}
  nav a:hover{opacity:1}
  nav .navcta{background:var(--rose);color:#fff;padding:.6rem 1.2rem;border-radius:999px;
    opacity:1;transition:background .3s,transform .3s}
  nav .navcta:hover{background:var(--rose-d);transform:translateY(-2px)}
  @media(max-width:900px){nav ul li:not(.navcta-li){display:none}}

  /* HERO */
  header{position:relative;min-height:100svh;display:grid;
    grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(1rem,4vw,3rem);
    padding:6rem clamp(1.1rem,5vw,5rem) 3rem;overflow:hidden}
  header::before{content:"";position:absolute;top:-20%;right:-10%;width:55%;height:80%;
    background:radial-gradient(circle,rgba(201,105,122,.16),transparent 65%);z-index:0}
  .hero-copy{position:relative;z-index:2;max-width:620px}
  .hero-copy .eyebrow{opacity:0;animation:fade .9s .1s forwards}
  .hero-copy h1{font-family:'Literata',serif;font-weight:300;
    font-size:clamp(2.6rem,6.5vw,5.4rem);line-height:1.02;letter-spacing:-.015em;margin:1.2rem 0 .4rem}
  .hero-copy h1 em{font-style:italic;color:var(--rose-d)}
  .type-line{font-family:'Literata',serif;font-style:italic;font-weight:300;
    font-size:clamp(1.15rem,2.6vw,1.7rem);color:var(--noir-soft);min-height:2.2em;
    margin:.6rem 0 1.4rem}
  .type-line .cursor{display:inline-block;width:2px;background:var(--rose);
    margin-left:2px;animation:blink 1s step-end infinite;vertical-align:-.1em}
  .hero-copy p.intro{max-width:46ch;color:var(--noir-soft);font-size:1.05rem;
    opacity:0;animation:fade .9s 1s forwards}
  .hero-acts{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;
    opacity:0;animation:fade .9s 1.2s forwards}
  .btn{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
    font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
    padding:1rem 2rem;border-radius:999px;transition:all .3s}
  .btn-fill{background:var(--rose);color:#fff}
  .btn-fill:hover{background:var(--rose-d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(168,74,92,.3)}
  .btn-line{border:1px solid var(--noir);color:var(--noir)}
  .btn-line:hover{background:var(--noir);color:var(--creme)}
  .hero-art{position:relative;z-index:2;justify-self:end;width:100%;max-width:480px}
  .hero-art .frame{position:relative;border-radius:240px 240px 14px 14px;overflow:hidden;
    aspect-ratio:3/4;box-shadow:0 30px 70px rgba(35,28,30,.2);
    opacity:0;transform:translateY(40px) scale(.97);animation:rise2 1.2s .4s cubic-bezier(.19,1,.22,1) forwards}
  .hero-art .frame img{width:100%;height:100%;object-fit:cover}
  .hero-art .badge{position:absolute;bottom:1.4rem;left:-1.4rem;background:var(--creme-pure);
    padding:1rem 1.3rem;border-radius:14px;box-shadow:0 14px 34px rgba(35,28,30,.16);
    font-family:'Literata',serif;font-style:italic;font-size:1rem;z-index:3;
    opacity:0;animation:fade .9s 1.4s forwards}
  .hero-art .badge b{display:block;font-style:normal;font-weight:400;font-size:1.7rem;color:var(--rose-d)}
  @media(max-width:900px){header{grid-template-columns:1fr;min-height:auto;padding-top:7rem;text-align:left}
    .hero-art{display:none}}

  /* TICKER */
  .ticker{background:var(--noir);color:var(--creme);overflow:hidden;padding:.9rem 0}
  .ticker div{display:flex;gap:2.4rem;white-space:nowrap;width:max-content;
    animation:scrollx 32s linear infinite}
  .ticker span{font-family:'Literata',serif;font-style:italic;font-size:1.15rem;
    display:flex;align-items:center;gap:2.4rem;opacity:.92}
  .ticker span::after{content:"\2665";font-style:normal;color:var(--rose);font-size:.7rem}

  .wrap{padding:clamp(4rem,9vw,7.5rem) clamp(1.1rem,5vw,5rem)}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;
    flex-wrap:wrap;gap:1rem;margin-bottom:3rem}
  .sec-head .ttl{font-family:'Literata',serif;font-weight:300;
    font-size:clamp(2rem,5vw,3.4rem);line-height:1.04;letter-spacing:-.01em;max-width:18ch}
  .sec-head .ttl em{font-style:italic;color:var(--rose-d)}
  .sec-head .num{font-family:'Literata',serif;font-style:italic;font-size:1rem;color:var(--brume)}

  /* UNIVERS / CATEGORIES */
  .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.5vw,1.1rem)}
  .cat{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/4;
    background:var(--noir);display:block;text-decoration:none}
  .cat img{width:100%;height:100%;object-fit:cover;
    transition:transform 1.2s cubic-bezier(.19,1,.22,1);filter:brightness(.82)}
  .cat:hover img{transform:scale(1.07)}
  .cat::after{content:"";position:absolute;inset:0;
    background:linear-gradient(transparent 40%,rgba(35,28,30,.78))}
  .cat .lbl{position:absolute;inset:auto 0 0 0;padding:1.4rem;z-index:2;color:var(--creme)}
  .cat .lbl .k{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--poudre)}
  .cat .lbl h3{font-family:'Literata',serif;font-weight:400;font-size:1.5rem;margin-top:.2rem}
  @media(max-width:760px){.cats{grid-template-columns:1fr 1fr}}

  /* ARTICLES */
  .articles{background:var(--creme-pure);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .feat{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(1.5rem,4vw,3rem);
    align-items:center;margin-bottom:3rem}
  .feat .pic{border-radius:14px;overflow:hidden;aspect-ratio:16/11}
  .feat .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
  .feat:hover .pic img{transform:scale(1.04)}
  .feat .k{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--rose-d)}
  .feat h3{font-family:'Literata',serif;font-weight:300;
    font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.12;margin:.7rem 0 .8rem}
  .feat p{color:var(--noir-soft);max-width:46ch;font-size:.98rem}
  .feat .more{display:inline-block;margin-top:1.2rem;font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--rose-d);text-decoration:none;border-bottom:1px solid var(--rose-d);padding-bottom:2px}
  @media(max-width:760px){.feat{grid-template-columns:1fr}.feat .pic{order:-1}}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2rem)}
  .acard{text-decoration:none;display:block}
  .acard .pic{border-radius:12px;overflow:hidden;aspect-ratio:4/3;margin-bottom:1rem}
  .acard .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
  .acard:hover .pic img{transform:scale(1.05)}
  .acard .k{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--rose-d)}
  .acard h4{font-family:'Literata',serif;font-weight:400;font-size:1.25rem;line-height:1.2;margin-top:.35rem}
  @media(max-width:760px){.grid3{grid-template-columns:1fr;gap:2rem}}

  /* ABOUT */
  .about{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
  .about .pic{position:relative;border-radius:200px 14px 200px 14px;overflow:hidden;aspect-ratio:4/5}
  .about .pic img{width:100%;height:100%;object-fit:cover}
  .about .lead{font-family:'Literata',serif;font-weight:300;
    font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25}
  .about .lead em{font-style:italic;color:var(--rose-d)}
  .about p{color:var(--noir-soft);margin-top:1.3rem;max-width:48ch;font-size:.98rem}
  .about .sign{margin-top:1.8rem;font-family:'Literata',serif;font-style:italic;font-size:1.4rem}
  .about .role{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brume);margin-top:.3rem}
  @media(max-width:820px){.about{grid-template-columns:1fr}.about .pic{order:-1;max-width:420px}}

  /* NEWSLETTER */
  .news{background:var(--noir);color:var(--creme);text-align:center}
  .news h2{font-family:'Literata',serif;font-weight:300;
    font-size:clamp(2rem,5.5vw,3.8rem);line-height:1.05;letter-spacing:-.01em}
  .news h2 em{font-style:italic;color:var(--poudre)}
  .news p{color:rgba(251,244,239,.7);max-width:42ch;margin:1.2rem auto 2.2rem;font-size:1rem}
  .news form{display:flex;gap:.6rem;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .news input{flex:1;min-width:220px;background:transparent;border:1px solid rgba(251,244,239,.3);
    color:var(--creme);padding:1rem 1.1rem;border-radius:999px;font-family:'Sora';font-size:.95rem}
  .news input:focus{outline:none;border-color:var(--poudre)}
  .news button{background:var(--rose);color:#fff;border:none;cursor:pointer;
    padding:1rem 2rem;border-radius:999px;font-family:'Sora';font-size:.74rem;
    letter-spacing:.18em;text-transform:uppercase;transition:background .3s}
  .news button:hover{background:var(--rose-d)}

  /* FOOTER */
  footer{padding:3rem clamp(1.1rem,5vw,5rem) 2.4rem;background:var(--creme-pure);border-top:1px solid var(--line)}
  .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;margin-bottom:2.4rem}
  .foot-top .mark{font-family:'Literata',serif;font-size:1.4rem}
  .foot-top .mark em{font-style:italic;color:var(--rose-d)}
  .foot-cols{display:flex;gap:clamp(2rem,6vw,5rem);flex-wrap:wrap}
  .foot-cols .col h5{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brume);margin-bottom:.9rem}
  .foot-cols .col a{display:block;text-decoration:none;color:var(--noir-soft);font-size:.88rem;margin-bottom:.5rem;transition:color .3s}
  .foot-cols .col a:hover{color:var(--rose-d)}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
    border-top:1px solid var(--line);padding-top:1.6rem}
  .foot-bot .socials{display:flex;gap:1.2rem}
  .foot-bot a{text-decoration:none;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brume);transition:color .3s}
  .foot-bot a:hover{color:var(--rose-d)}
  .foot-bot small{color:var(--brume);font-size:.64rem}

  /* ANIM */
  @keyframes fade{to{opacity:1}}
  @keyframes rise2{to{opacity:1;transform:none}}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
  @keyframes scrollx{to{transform:translateX(-50%)}}
  .reveal{opacity:0;transform:translateY(34px);
    transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
  .reveal.in{opacity:1;transform:none}
  .stagger>*{opacity:0;transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1)}
  .stagger.in>*{opacity:1;transform:none}
  .stagger.in>*:nth-child(2){transition-delay:.08s}
  .stagger.in>*:nth-child(3){transition-delay:.16s}
  .stagger.in>*:nth-child(4){transition-delay:.24s}
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .hero-copy .eyebrow,.hero-copy p.intro,.hero-acts,.hero-art .frame,.hero-art .badge{opacity:1!important;transform:none!important}
    .reveal,.stagger>*{opacity:1;transform:none}
    .type-line .cursor{display:none}
  }

/* ================= un seul bouton : menu plein ecran =================
   Meme geste que le reste du catalogue, pose NATIVEMENT (le modele avait le
   bloc commun flottant, qui masquait sa barre : plus de marque visible, un
   bouton fantome, et un menu qui ne tenait pas la page sur mobile).
   Ici la barre reste : marque a gauche, bouton a droite, a toutes les
   tailles. Les rubriques vivent dans le panneau qui descend du haut.

   ⚠️ Tout est gate par `html.js`, pose par un script inline du <head> :
   si le script tombe, la barre d ORIGINE reprend sa place (rubriques sur
   desktop, Newsletter sur mobile) - on ne degrade jamais une page qui a
   deja sa navigation. */
.js nav ul{display:none}
.js nav .mark{margin-right:auto}
.burger{display:none}
.js .burger{
  display:grid;place-content:center;gap:7px;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
}
.burger span{
  display:block;width:22px;height:2px;background:var(--noir);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.js body.menu-ouvert .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.js body.menu-ouvert .burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
body.menu-ouvert{overflow:hidden}

.panneau-noces{
  position:fixed;inset:0;z-index:55;
  background:var(--creme-pure);
  display:flex;flex-direction:column;
  padding:16vh 8vw 9vh;overflow-y:auto;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .5s cubic-bezier(.4,0,.2,1),visibility 0s .5s;
  pointer-events:none;
}
.panneau-noces.ouvert{transform:none;visibility:visible;pointer-events:auto;transition:transform .5s cubic-bezier(.4,0,.2,1),visibility 0s}
/* z 55 < z 60 de la barre : le panneau passe SOUS la barre, la marque et le
   bouton restent visibles par-dessus et servent a refermer. */
.panneau-noces nav{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(2px,1.4vh,12px);margin-block:auto;
}
.panneau-noces nav a{
  font-family:'Literata',Georgia,serif;font-weight:500;
  font-size:clamp(2rem,7.2vw,3.9rem);line-height:1.06;letter-spacing:-.015em;
  color:var(--noir);text-decoration:none;
  opacity:0;transform:translateY(20px);
  transition:opacity .35s ease,transform .35s ease,color .25s ease;
}
.panneau-noces.ouvert nav a{opacity:1;transform:none;transition-delay:calc(.045s * var(--i) + .1s)}
.panneau-noces nav a:hover{color:var(--rose-d)}
.panneau-noces nav a.panneau-noces__cta{
  font-family:'Sora',system-ui,sans-serif;font-weight:400;font-size:.68rem;
  letter-spacing:.24em;text-transform:uppercase;
  background:var(--rose);color:#fff;border-radius:999px;
  padding:1.05em 1.9em;margin-top:clamp(12px,2.6vh,26px);
}
.panneau-noces nav a.panneau-noces__cta:hover{background:var(--rose-d);color:#fff}
.panneau-noces__pied{margin:clamp(3vh,5vh,44px) 0 0;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brume)}