:root{
    --ivoire:#F6F2EB;
    --grege:#E7DECF;
    --sauge:#8F9C84;
    --sauge-fonce:#5E6B55;
    --rose:#C9A39A;
    --encre:#2C2A26;
    --plume:#7B756B;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--ivoire);
    color:var(--encre);
    font-family:'Hanken Grotesk',system-ui,sans-serif;
    font-weight:300;
    line-height:1.6;
    overflow-x:hidden;
  }
  ::selection{background:var(--rose);color:#fff}
  .serif{font-family:'Faustina',Georgia,serif}
  .eyebrow{
    font-size:.72rem;
    letter-spacing:.42em;
    text-transform:uppercase;
    color:var(--sauge-fonce);
    font-weight:400;
  }

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:1.4rem clamp(1.2rem,5vw,4rem);
    mix-blend-mode:difference;color:#fff;
  }
  nav .mark{
    font-family:'Faustina',serif;font-weight:400;
    font-size:1.5rem;letter-spacing:.08em;
  }
  nav ul{display:flex;gap:2.2rem;list-style:none}
  nav a{
    color:inherit;text-decoration:none;font-size:.8rem;
    letter-spacing:.18em;text-transform:uppercase;font-weight:300;
    opacity:.85;transition:opacity .3s;
  }
  nav a:hover{opacity:1}
  nav.scrolled{mix-blend-mode:normal;color:var(--encre);
    background:rgba(246,242,235,.92);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(44,42,38,.08)}
  nav.scrolled a{opacity:.7}
  nav.scrolled a:hover{opacity:1;color:var(--sauge-fonce)}
  @media(max-width:760px){nav ul{display:none}
    nav{mix-blend-mode:normal;color:var(--encre);
      background:rgba(246,242,235,.92);backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(44,42,38,.08)}}

  /* ---------- HERO ---------- */
  /* =========================================================
     Ouverture : la grille du parc
     Deux battants ivoire fermes, le nom de la maison apparait dessus, puis
     ils s'ecartent et decouvrent la photo. Le texte du bandeau n'entre
     qu'APRES, par la gauche : c'est l'ordre demande (photo d'abord).
     ⚠️ Uniquement transform + opacity. Jamais de clip-path : un reveal
     clippe qui ne se declenche pas laisse l'element invisible pour toujours.
     ========================================================= */
  #grille{position:fixed;inset:0;z-index:200;pointer-events:none}
  #grille .battant{
    position:absolute;top:0;height:100%;width:50.5%;
    background:var(--ivoire);
    transition:transform 1.2s cubic-bezier(.7,0,.2,1) .15s;
  }
  #grille .battant.gauche{left:0;border-right:1px solid var(--grege)}
  #grille .battant.droite{right:0}
  #grille .nom{
    position:absolute;inset:0;display:grid;place-content:center;
    font-family:'Faustina',Georgia,serif;font-weight:300;
    font-size:clamp(1.9rem,5.5vw,3.6rem);letter-spacing:.06em;
    color:var(--encre);opacity:0;transition:opacity .7s ease;
  }
  #grille .nom span,#grille .nom em{display:block;text-align:center;line-height:1.18}
  #grille .nom em{font-style:italic;color:var(--sauge-fonce)}
  #grille .nom.on{opacity:1}
  body.ouvert #grille .battant.gauche{transform:translateX(-101%)}
  body.ouvert #grille .battant.droite{transform:translateX(101%)}
  body.ouvert #grille .nom{opacity:0;transition-duration:.35s}
  /* on retire la couche du flux une fois l'animation finie */
  body.ouvert #grille{transition:visibility 0s 1.9s;visibility:hidden}

  header{
    position:relative;min-height:100svh;
    display:grid;grid-template-columns:1.05fr .95fr;
    align-items:stretch;
  }
  .hero-text{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(2rem,6vw,6rem);position:relative;z-index:2;
  }
  .hero-text .eyebrow{margin-bottom:2rem;opacity:0;transform:translateX(-28px)}
  body.ouvert .hero-text .eyebrow{animation:glisse .8s cubic-bezier(.2,.7,.2,1) .35s forwards}
  .hero-title{
    font-family:'Faustina',serif;font-weight:300;
    font-size:clamp(3rem,7.5vw,6.6rem);
    line-height:.95;letter-spacing:-.02em;
  }
  .hero-title em{font-style:italic;color:var(--sauge-fonce)}
  .hero-title span{display:block;overflow:hidden}
  .hero-title span i{display:block;font-style:inherit;transform:translateX(-104%)}
  body.ouvert .hero-title span i{animation:entre 1s cubic-bezier(.2,.7,.2,1) .5s forwards}
  body.ouvert .hero-title span:nth-child(2) i{animation-delay:.62s}
  body.ouvert .hero-title span:nth-child(3) i{animation-delay:.74s}
  .hero-sub{
    max-width:34ch;margin-top:2.2rem;color:var(--plume);
    font-size:1.05rem;opacity:0;transform:translateX(-28px);
  }
  .hero-cta{
    display:inline-flex;align-items:center;gap:.8rem;width:fit-content;
    margin-top:2.6rem;text-decoration:none;color:var(--encre);
    font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
    padding-bottom:.4rem;border-bottom:1px solid var(--encre);
    opacity:0;transform:translateX(-28px);transition:gap .3s,color .3s,border-color .3s;
  }
  .hero-cta:hover{gap:1.4rem;color:var(--rose);border-color:var(--rose)}
  .hero-media{position:relative;overflow:hidden;background:var(--grege)}
  .hero-media img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 30%;
    transform:scale(1.12);
  }
  /* Chronologie apres l'ouverture des battants : la PHOTO d'abord (elle est
     deja decouverte), puis le texte qui entre par la gauche, dans l'ordre. */
  body.ouvert .hero-sub{animation:glisse .9s cubic-bezier(.2,.7,.2,1) 1s forwards}
  body.ouvert .hero-cta{animation:glisse .9s cubic-bezier(.2,.7,.2,1) 1.2s forwards}
  body.ouvert .scroll-hint{animation:fade 1s 1.5s forwards}
  body.ouvert .hero-media img{animation:zoom 6s cubic-bezier(.2,.7,.2,1) .2s forwards}
  .hero-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(110deg,var(--ivoire) 0%,transparent 18%);
  }
  .scroll-hint{
    position:absolute;bottom:1.8rem;left:clamp(2rem,6vw,6rem);z-index:3;
    font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--plume);
    display:flex;align-items:center;gap:.7rem;opacity:0;
  }
  .scroll-hint::before{content:"";width:42px;height:1px;background:var(--plume);animation:line 2s ease-in-out infinite}
  @media(max-width:860px){
    header{grid-template-columns:1fr;grid-template-rows:auto 56svh}
    .hero-media{order:-1}
    .hero-media img{object-position:center 25%}
    .scroll-hint{display:none}
  }

  /* ---------- MARQUEE ---------- */
  .marquee{
    border-top:1px solid var(--grege);border-bottom:1px solid var(--grege);
    overflow:hidden;padding:1.1rem 0;background:var(--ivoire);
  }
  .marquee div{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:scrollx 32s linear infinite}
  .marquee span{
    font-family:'Faustina',serif;font-style:italic;font-weight:300;
    font-size:1.5rem;color:var(--sauge-fonce);display:flex;align-items:center;gap:3rem;
  }
  .marquee span::after{content:"✦";font-style:normal;color:var(--rose);font-size:.8rem}

  /* ---------- INTRO ---------- */
  .intro{
    display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,6vw,6rem);
    align-items:center;padding:clamp(4rem,10vw,9rem) clamp(1.2rem,6vw,6rem);
  }
  .intro .eyebrow{margin-bottom:1.4rem}
  .intro h2{
    font-family:'Faustina',serif;font-weight:300;
    font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.15;letter-spacing:-.01em;
  }
  .intro h2 em{font-style:italic;color:var(--rose)}
  .intro p{margin-top:1.6rem;color:var(--plume);max-width:50ch}
  .intro-img{position:relative}
  .intro-img img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
  .intro-img figcaption{
    position:absolute;bottom:-1px;right:-1px;background:var(--ivoire);
    padding:1rem 1.4rem;font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--sauge-fonce);
  }
  @media(max-width:860px){.intro{grid-template-columns:1fr}.intro-img{order:-1}}

  /* ---------- GALLERY ---------- */
  .gallery-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    padding:0 clamp(1.2rem,6vw,6rem) 2.6rem;flex-wrap:wrap;gap:1rem;
  }
  .gallery-head h2{font-family:'Faustina',serif;font-weight:300;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.01em}
  .gallery-head h2 em{font-style:italic;color:var(--sauge-fonce)}
  .gallery-head p{color:var(--plume);max-width:30ch;font-size:.95rem}
  .grid{
    display:grid;grid-template-columns:repeat(12,1fr);
    gap:clamp(.6rem,1.4vw,1.1rem);
    padding:0 clamp(1.2rem,6vw,6rem) clamp(4rem,9vw,8rem);
  }
  figure.card{position:relative;overflow:hidden;background:var(--grege);margin:0}
  figure.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
  figure.card:hover img{transform:scale(1.06)}
  figure.card figcaption{
    position:absolute;inset:auto 0 0 0;padding:1.2rem;
    background:linear-gradient(transparent,rgba(44,42,38,.7));
    color:#fff;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
    transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  figure.card:hover figcaption{transform:translateY(0)}
  .c-tall{grid-column:span 4;aspect-ratio:2/3}
  .c-wide{grid-column:span 8;aspect-ratio:16/10}
  .c-half{grid-column:span 6;aspect-ratio:4/5}
  .c-sq{grid-column:span 4;aspect-ratio:1}
  .c-full{grid-column:span 12;aspect-ratio:21/9}
  @media(max-width:860px){
    .c-tall,.c-wide,.c-half,.c-sq{grid-column:span 6}
    .c-full{grid-column:span 12;aspect-ratio:4/3}
  }
  @media(max-width:520px){.c-tall,.c-wide,.c-half,.c-sq,.c-full{grid-column:span 12}}

  /* ---------- QUOTE ---------- */
  .quote{
    position:relative;padding:clamp(5rem,12vw,11rem) clamp(1.2rem,6vw,6rem);
    text-align:center;color:#fff;overflow:hidden;
  }
  .quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(.2)}
  .quote::after{content:"";position:absolute;inset:0;background:rgba(44,42,38,.5)}
  .quote blockquote{position:relative;z-index:2;max-width:24ch;margin:0 auto;
    font-family:'Faustina',serif;font-weight:300;font-style:italic;
    font-size:clamp(1.8rem,4.5vw,3.4rem);line-height:1.2;letter-spacing:-.01em}
  .quote cite{position:relative;z-index:2;display:block;margin-top:2rem;
    font-style:normal;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;opacity:.85}

  /* ---------- ATELIER ---------- */
  .atelier{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(.6rem,1.4vw,1.1rem);
    padding:0 clamp(1.2rem,6vw,6rem);align-items:stretch;
  }
  .atelier .panel{padding:clamp(2.5rem,6vw,5rem) clamp(1rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}
  .atelier .eyebrow{margin-bottom:1.4rem}
  .atelier h3{font-family:'Faustina',serif;font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15;margin-bottom:1.2rem}
  .atelier p{color:var(--plume);max-width:42ch}
  .atelier ul{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:.9rem}
  .atelier li{display:flex;gap:1rem;align-items:baseline;font-size:.95rem;border-bottom:1px solid var(--grege);padding-bottom:.9rem}
  .atelier li b{font-family:'Faustina',serif;font-weight:400;color:var(--sauge-fonce);font-size:.85rem;letter-spacing:.05em}
  .atelier .imgcol{position:relative;min-height:340px;overflow:hidden}
  .atelier .imgcol img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  @media(max-width:760px){.atelier{grid-template-columns:1fr}.atelier .imgcol{min-height:60vw}}

  /* ---------- CTA ---------- */
  .closing{padding:clamp(5rem,12vw,11rem) clamp(1.2rem,6vw,6rem);text-align:center}
  .closing .eyebrow{margin-bottom:1.6rem}
  .closing h2{font-family:'Faustina',serif;font-weight:300;font-size:clamp(2.4rem,6vw,5rem);line-height:1.05;letter-spacing:-.02em}
  .closing h2 em{font-style:italic;color:var(--rose)}
  .closing a.btn{
    display:inline-block;margin-top:2.8rem;background:var(--sauge-fonce);color:var(--ivoire);
    text-decoration:none;padding:1.1rem 2.6rem;border-radius:999px;
    font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
    transition:background .3s,transform .3s;
  }
  .closing a.btn:hover{background:var(--rose);transform:translateY(-3px)}
  /* Frappe a la machine. Par defaut le titre est ENTIEREMENT VISIBLE :
     c'est le script qui pose .frappe--on avant de cacher les lettres. Si le
     JS ne tourne pas, on lit le titre normalement au lieu d'un titre vide. */
  .frappe--on .ch{visibility:hidden}
  .frappe--on .ch.vu{visibility:visible}
  .frappe--on .ch.curseur::after{
    content:"";display:inline-block;vertical-align:-.06em;
    width:2px;height:.86em;margin-left:.06em;background:var(--rose);
    animation:clignote .9s steps(1,end) infinite;
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--grege);
    padding:clamp(2.5rem,6vw,4rem) clamp(1.2rem,6vw,6rem);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;
  }
  footer .mark{font-family:'Faustina',serif;font-size:1.6rem;letter-spacing:.06em}
  footer .links{display:flex;gap:1.8rem}
  footer a{color:var(--plume);text-decoration:none;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;transition:color .3s}
  footer a:hover{color:var(--encre)}
  footer small{color:var(--plume);font-size:.72rem;letter-spacing:.08em}

  /* ---------- ANIM ---------- */
  @keyframes rise{to{transform:translateY(0)}}
  @keyframes fade{to{opacity:1}}
  @keyframes glisse{to{opacity:1;transform:none}}
  @keyframes entre{to{transform:translateX(0)}}
  @keyframes clignote{0%,45%{opacity:1}55%,100%{opacity:0}}
  @keyframes zoom{to{transform:scale(1)}}
  @keyframes scrollx{to{transform:translateX(-50%)}}
  @keyframes line{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.4);opacity:.4}}
  .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    /* la grille ne s'ouvre pas en fondu : elle n'existe pas du tout */
    #grille{display:none!important}
    .hero-title span i,.hero-text .eyebrow,.hero-sub,.hero-cta,.scroll-hint{opacity:1!important;transform:none!important}
    .reveal{opacity:1;transform:none}
    .hero-media img{transform:none}
    .frappe--on .ch{visibility:visible!important}
    .frappe--on .ch.curseur::after{display:none}
  }