/* ─────────────────────────────────────────
   JN STUDIO — Base stylesheet
   Shared across pages: tokens, typography, header, menu, footer, atoms.
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   JN STUDIO — Home
   Direction artistique validée — palette crème
   ───────────────────────────────────────── */

:root{
  --creme:        #F2EBD9;
  --creme-soft:   #EDE4D0;
  --creme-alt:    #FAF6EC;
  --noir:         #161513;
  --noir-soft:    #2A2825;
  --gris:         #3A342C;
  --gris-l:       #6F665A;
  --bleu-klein:   #1F3FA8;
  --bleu-nuit:    #060F2C;
  --or:           #B89254;
  --or-soft:      #C9A961;
  --terracotta:   #B85537;
  --vert-feuille: #2B4F35;

  --ease: cubic-bezier(.77, 0, .175, 1);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
html{ background: var(--creme); scroll-behavior:smooth; }
body{
  font-family:"DM Sans", system-ui, sans-serif;
  font-weight:400;
  color: var(--noir);
  background: var(--creme);
  overflow-x: hidden;
  font-size:16px;
  line-height:1.5;
}
img{ display:block; max-width:100%; height:auto; }
button, a{ font-family:inherit; color:inherit; }

/* ── golden cursor dot (decoration) ── */
.cursor-dot{
  position:fixed; top:0; left:0;
  width:8px; height:8px; border-radius:50%;
  background: var(--or);
  pointer-events:none;
  z-index:9999;
  transform: translate(-50%,-50%);
  transition: transform .25s var(--ease), opacity .3s;
  mix-blend-mode: multiply;
  opacity:.0;
}
@media (hover: hover){
  .cursor-dot{ opacity:.8; }
}
@media (hover: none), (pointer: coarse), (max-width: 760px){
  .cursor-dot{ display:none !important; }
}

/* ── shared typography atoms ── */
.display{
  font-family:"Cormorant Garamond", "Times New Roman", serif;
  font-weight:300;
  letter-spacing:-.01em;
  color: var(--noir);
}
.display em{ font-style:italic; font-weight:300; }

.mono{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.04em;
}
.eyebrow{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--gris-l);
}
.eyebrow .num{ color: var(--or); }
.eyebrow .sep{ color: var(--or); margin: 0 10px; }

.btn-text{
  font-family:"DM Sans", sans-serif;
  font-size:13.5px;
  color: var(--noir);
  text-decoration:none;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--or);
  display:inline-block;
  letter-spacing:.02em;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.btn-text:hover{ color: var(--bleu-klein); border-color: var(--bleu-klein); }

.btn-solid{
  display:inline-flex; align-items:center; gap:14px;
  padding: 16px 28px;
  background: var(--noir);
  color: var(--creme);
  text-decoration:none;
  font-family:"DM Sans", sans-serif;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  border:0; cursor:pointer;
  position:relative; overflow:hidden;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn-solid::after{
  content:""; position:absolute; right:24px; top:50%;
  width:14px; height:1px; background: var(--or);
  transform: translateY(-50%);
  transition: width .35s var(--ease);
}
.btn-solid:hover{ background: var(--bleu-klein); }
.btn-solid:hover::after{ width:20px; }
.btn-solid .arrow{ width:14px; height:1px; background: var(--or); display:inline-block; }

/* ── gold rule, the signature element ── */
.gold-rule{
  display:block; height:1px; background: var(--or);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease);
}
.in-view .gold-rule,
.gold-rule.in{
  transform: scaleX(1);
}
.gold-rule.short{ width:56px; }
.gold-rule.tiny { width:32px; }

/* ── fade-up reveal ── */
.fade-up{
  opacity:0; transform: translateY(20px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.fade-up.in{ opacity:1; transform: translateY(0); }
.fade-up.delay-1{ transition-delay:.12s; }
.fade-up.delay-2{ transition-delay:.24s; }
.fade-up.delay-3{ transition-delay:.36s; }

/* ─────────────────────────────────────────
   Header — sticky, signature + burger
   ───────────────────────────────────────── */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  padding: 0 40px;
  display:flex; align-items:center; justify-content:space-between;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease), opacity .55s var(--ease), transform .55s var(--ease);
  border-bottom: 1px solid transparent;
  pointer-events:none;
  opacity: 0;
  transform: translateY(-12px);
}
.site-header > *{ pointer-events:auto; }
.site-header.past-hero{
  opacity: 1;
  transform: translateY(0);
}
.site-header.scrolled{
  background: rgba(242,235,217,.92);
  backdrop-filter: blur(14px);
  padding: 0 40px;
  border-bottom-color: rgba(184,146,84,.25);
}
.site-header.on-dark .brand img{ filter: none; }
/* Right controls (FR/EN switch + burger) stay constant across hero and sticky states —
   only the logo changes size/position between the two. */

.brand{ display:flex; align-items:center; gap:14px; }
.brand img{
  height: 110px; width:auto;
  display:block;
  transition: filter .4s var(--ease), opacity .5s var(--ease), height .4s var(--ease);
  opacity: 0;
}
.site-header.scrolled .brand img{ height: 40px; }
.site-header.past-hero .brand img{
  opacity: 1;
}

/* hide-logo used by pages with a centered page-title at top */
.site-header.hide-logo .brand img{ opacity: 0; transform: translateY(-4px); }

.header-right{ display:flex; align-items:center; gap:36px; }

/* ── Inline navigation (visible only in reduced/sticky state) ── */
.header-nav{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center;
  gap: 22px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.site-header.scrolled .header-nav{
  opacity: 1;
  pointer-events: auto;
}
.header-nav a{
  font-family: "Cormorant Garamond", serif;
  font-style: italic; font-weight: 400;
  font-size: 22px; line-height: 1;
  letter-spacing: -.005em;
  color: var(--noir);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.header-nav a:hover{ color: var(--or); }
.header-nav .dot{
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--or);
  opacity: .6;
  display: inline-block;
}

/* Page-title (on Oeuvres / Commandes / Atelier / Oracle) fades out when sticky nav takes over */
.site-header.scrolled ~ * .page-title h1,
.site-header.scrolled ~ * .commandes-title h1,
.site-header.scrolled ~ * .atelier-title h1,
.site-header.scrolled ~ * .oracle-title h1{
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lang{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--noir);
  white-space: nowrap;
}
.lang .on{ color: var(--or); }
.lang span{ cursor:pointer; }

.burger-btn{
  background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  color: var(--noir);
  padding: 6px 0;
}
.burger-btn .lbl{
  font-family:"DM Sans", sans-serif;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.burger-btn .lines{ display:flex; flex-direction:column; gap:4px; }
.burger-btn .line{
  display:block; width:24px; height:1px;
  background: var(--noir);
  transition: transform .3s var(--ease), width .3s var(--ease), background .3s var(--ease);
}
.burger-btn .line:nth-child(2){ width:16px; align-self:flex-end; }

/* ── Menu ouvert : aucune croix. Le burger (deux traits) reste en haut à
   droite et referme le menu au clic (bascule). On masque le logo + FR/EN
   pour ne garder que les traits, en crème sur le fond sombre. */
.site-header.menu-open .brand,
.site-header.menu-open .lang{ opacity:0; pointer-events:none; }
.site-header.menu-open .burger-btn .lbl{ display:none; }
.site-header.menu-open .burger-btn .line{ background: var(--creme) !important; }

/* ── Burger menu, full overlay ── */
.menu-overlay{
  position:fixed; inset:0; z-index:90;
  background: var(--noir);
  color: var(--creme);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  pointer-events:none;
  opacity:0;
  transition: opacity .5s var(--ease);
}
.menu-overlay.open{ pointer-events:auto; opacity:1; }
.menu-overlay::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(45% 50% at 18% 30%, rgba(31,63,168,.22), transparent 70%),
    radial-gradient(40% 40% at 88% 75%, rgba(184,146,84,.1), transparent 70%);
  pointer-events:none;
}
.menu-overlay .menu-content{
  position:relative; z-index:1;
  padding: 120px 80px 60px;
  display:flex; flex-direction:column;
}
.menu-overlay .menu-side{
  position:relative;
  background: url('../assets/atelier/atelier-96.webp') center/cover no-repeat;
  background-color: var(--bleu-nuit);
}
.menu-overlay .menu-side::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,15,44,.55), rgba(6,15,44,.85));
}
.menu-overlay .menu-side .side-caption{
  position:absolute; left:36px; bottom:36px; right:36px; z-index:1;
  color: var(--creme);
}
.menu-overlay .menu-side .side-caption .quote{
  font-family:"Cormorant Garamond", serif;
  font-style:italic; font-weight:300;
  font-size:30px; line-height:1.2;
  margin:0 0 24px; max-width:24ch;
}
.menu-overlay .menu-side .side-caption .meta{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color: rgba(242,235,217,.6);
}
.menu-overlay nav.primary{
  flex: 1 1 auto;
  display:flex; flex-direction:column; gap:8px;
}
.menu-overlay nav.primary a{
  font-family:"Cormorant Garamond", serif;
  font-weight:300; font-style:italic;
  font-size:64px; line-height:1.1;
  text-decoration:none;
  color: var(--creme);
  display:flex; align-items:baseline; gap:18px;
  letter-spacing:-.01em;
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.menu-overlay nav.primary a .num{
  font-family:"JetBrains Mono", monospace;
  font-style:normal;
  font-size:11px; letter-spacing:.22em; color: var(--or);
  position:relative; top:-6px;
}
.menu-overlay nav.primary a:hover{ color: var(--or); padding-left:14px; }
.menu-overlay nav.primary .sub{
  font-family:"DM Sans", sans-serif; font-style:normal;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: rgba(242,235,217,.5);
  padding-left:62px; margin:-2px 0 14px;
}
.menu-overlay .menu-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-top:30px; border-top: 1px solid rgba(184,146,84,.35);
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(242,235,217,.6);
}
.menu-overlay .menu-foot a{ color: var(--creme); text-decoration:none; margin-right:24px; }
.menu-overlay .menu-foot a:hover{ color: var(--or); }
.menu-overlay .close-btn{
  position:absolute; top:30px; right:40px; z-index:2;
  background:transparent; border:0; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  color: var(--creme);
  font-family:"DM Sans", sans-serif;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
}
.menu-overlay .close-btn .x{ position:relative; width:18px; height:18px; }
.menu-overlay .close-btn .x::before,
.menu-overlay .close-btn .x::after{
  content:""; position:absolute; top:50%; left:0;
  width:18px; height:1px; background: var(--creme);
}
.menu-overlay .close-btn .x::before{ transform: rotate(45deg); }
.menu-overlay .close-btn .x::after{ transform: rotate(-45deg); }

/* ─────────────────────────────────────────
   7. FOOTER
   ───────────────────────────────────────── */
.site-footer{
  background: var(--noir);
  color: var(--creme);
  padding: 68px 40px 24px;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 60% at 90% 10%, rgba(31,63,168,.18), transparent 70%),
    radial-gradient(30% 40% at 10% 90%, rgba(184,146,84,.08), transparent 70%);
  pointer-events:none;
}
.site-footer .footer-inner{
  position:relative; z-index:1;
  max-width: 1640px; margin: 0 auto;
}
.site-footer .footer-top{
  display:grid; grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  padding-bottom: 40px; margin-bottom: 32px;
  border-bottom: 1px solid rgba(184,146,84,.25);
}
.site-footer h3.display{
  font-family:"Cormorant Garamond", serif;
  font-weight:300; font-style:italic;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height:1; margin: 0 0 22px;
  color: var(--creme);
}
.site-footer h3.display em{ color: var(--or); font-style:italic; }
.site-footer .footer-left p{
  font-size: 15px; line-height: 1.6; color: rgba(242,235,217,.75);
  max-width: 44ch; margin: 0 0 22px;
}
.site-footer .footer-left .eyebrow{ color: rgba(242,235,217,.55); margin-bottom:18px; }
.site-footer .footer-left .gold-rule{ width:48px; margin-bottom:24px; }
/* ── Formulaire de contact — direction éditoriale / arty ── */
.site-footer .quick-form{
  display:grid; gap: 2px;
  counter-reset: qf;
}
.site-footer .quick-form .eyebrow{
  margin-bottom: 20px; color: var(--or);
}
.site-footer .quick-form .row{
  position: relative;
  display:flex; flex-direction:column; align-items:stretch; gap:7px;
  padding: 15px 0 11px;
  border-bottom: 1px solid rgba(242,235,217,.15);
}
.site-footer .quick-form .row::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--bleu-klein, #21409a);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.site-footer .quick-form .row:focus-within::after{ transform: scaleX(1); }
.site-footer .quick-form label{
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color: rgba(242,235,217,.5);
  display:flex; align-items:baseline; gap:11px; padding:0 !important;
}
.site-footer .quick-form .row label::before{
  counter-increment: qf;
  content: counter(qf, decimal-leading-zero);
  color: var(--or); letter-spacing:.08em;
}
.site-footer .quick-form input,
.site-footer .quick-form textarea{
  width:100%;
  background: transparent; border:0; outline:0;
  color: var(--creme);
  font-family:"Cormorant Garamond", serif;
  font-size: 25px; font-weight:300; line-height:1.25;
  padding: 1px 0;
}
.site-footer .quick-form textarea{ resize:none; height: 64px; }
.site-footer .quick-form input::placeholder,
.site-footer .quick-form textarea::placeholder{
  color: rgba(242,235,217,.32); font-style: italic;
}
.site-footer .quick-form .submit{ margin-top: 24px; }
.site-footer .quick-form button{
  position: relative; overflow: hidden;
  width:100%; cursor:pointer;
  background: transparent;
  border:1px solid var(--or); color: var(--creme);
  padding: 18px 22px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:space-between;
  transition: color .4s var(--ease), border-color .4s var(--ease);
  z-index:0;
}
.site-footer .quick-form button::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: var(--bleu-klein, #21409a);
  transform: translateX(-101%);
  transition: transform .55s var(--ease);
}
.site-footer .quick-form button::after{
  content:"→"; font-size:15px; transition: transform .4s var(--ease);
}
.site-footer .quick-form button:hover{ color: var(--creme); border-color: var(--bleu-klein, #21409a); }
.site-footer .quick-form button:hover::before{ transform: translateX(0); }
.site-footer .quick-form button:hover::after{ transform: translateX(7px); }
.site-footer .quick-form .small{
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color: rgba(242,235,217,.4); max-width: 22ch;
}

.site-footer .footer-bot{
  display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:48px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(184,146,84,.18);
}
.site-footer .footer-bot .col-brand img{
  height:48px; filter: invert(1) brightness(2.4); margin-bottom: 22px;
}
.site-footer .footer-bot .col-brand p{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.04em;
  color: rgba(242,235,217,.55);
  line-height:1.7; margin: 0;
}
.site-footer .footer-bot .col-brand p b{ color: var(--creme); font-weight:500; }
.site-footer .footer-bot .col-brand p a{
  color: rgba(242,235,217,.55);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.site-footer .footer-bot .col-brand p a:hover{
  color: var(--or);
  border-bottom-color: var(--or);
}
.site-footer .footer-bot .col-brand .ig-link{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top: 18px;
  color: rgba(242,235,217,.6);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.site-footer .footer-bot .col-brand .ig-link:hover{ color: var(--or); transform: translateY(-1px); }
.site-footer .footer-bot h4{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color: var(--or);
  margin: 0 0 18px;
}
.site-footer .footer-bot ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.site-footer .footer-bot ul a{
  color: rgba(242,235,217,.8); text-decoration:none;
  font-size:14px;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.site-footer .footer-bot ul a:hover{ color: var(--or); padding-left:6px; }

.site-footer .footer-credits{
  padding-top: 22px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(242,235,217,.45);
}
.site-footer .footer-credits .footer-maker a{
  color: inherit; text-decoration: none;
  transition: color .25s var(--ease);
}
.site-footer .footer-credits .footer-maker a:hover{ color: var(--or); }
.site-footer .footer-credits .signature-final img{
  height:34px; filter: invert(1) brightness(2.4); opacity:.6;
}


/* ─────────────────────────────────────────
   RESPONSIVE — shared chrome (header, menu, footer)
   ───────────────────────────────────────── */
/* ─────────────────────────────────────────
   RESPONSIVE — mobile rewrite (not degradation)
   ───────────────────────────────────────── */
@media (max-width: 900px) {
  .site-header{ padding: 14px 20px; }
  .site-header.scrolled{ padding: 10px 20px; }
  .header-right{ gap:18px; }
  /* Mobile : on retire le libellé « Menu » (l'icône suffit) et on aère le FR/EN */
  .site-header .burger-btn .lbl{ display:none; }
  .site-header .lang{ margin-right:4px; }

  /* Logo scaled down for phone — 110px is desktop-only */
  .site-header .brand img{ height: 60px; }
  .site-header.scrolled .brand img{ height: 34px; }

  /* Mobile: l'ancienne nav inline était masquée (burger seul). On la fait
     réapparaître comme une seconde ligne centrée, révélée quand l'en-tête se
     condense au scroll — mêmes liens que sur ordinateur. */
  .site-header{ flex-wrap: wrap; row-gap: 0; }
  .header-nav{
    position: static;
    transform: none;
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: 18px;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s var(--ease), max-height .3s var(--ease), padding .3s var(--ease);
  }
  .header-nav a{ font-size: 16px; padding: 5px 3px; }
  .site-header.scrolled .header-nav{
    max-height: 72px;
    opacity: 1;
    padding: 7px 0 3px;
    pointer-events: auto;
  }

  .hero{ height: 70vh; min-height: 480px; }

  section.section{ padding: 68px 22px; }
  .about{ grid-template-columns: 1fr; gap: 44px; }
  .about .content{ padding-top: 0; }

  .recent{ padding: 68px 0; }
  .recent .head{ padding: 0 22px; flex-direction:column; align-items:flex-start; gap:20px; margin-bottom: 30px; }
  .recent .head .right{ text-align:left; }
  .slider{ padding-left: 22px; gap: 22px; }
  .slider::after{ flex-basis: 22px; }
  .slide{ flex-basis: 280px; }
  .slider-controls{ padding: 22px 22px 0; }

  .process{ padding: 68px 22px; grid-template-columns: 1fr; gap: 44px; }
  .process .right{ aspect-ratio: 4/5; }
  .oracle-card{ width: 65%; }

  .atelier{ min-height: 60vh; }
  .atelier .inner{ grid-template-columns: 1fr; gap: 32px; padding: 56px 22px; }

  .instagram{ padding: 68px 22px; }
  .instagram .head{ flex-direction:column; align-items:flex-start; gap:18px; margin-bottom: 30px; }
  .ig-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .site-footer{ padding: 56px 22px calc(22px + env(safe-area-inset-bottom)); }
  .site-footer .footer-top{ grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; margin-bottom: 28px; }
  .site-footer .footer-bot{ grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 36px; }
  .site-footer .footer-credits{ flex-direction:column; align-items:flex-start; gap:14px; }

  .menu-overlay{ grid-template-columns: 1fr; }
  .menu-overlay .menu-side{ display:none; }
  .menu-overlay .menu-content{ padding: 96px 26px 44px; justify-content: center; }
  .menu-overlay nav.primary{ flex: 0 0 auto; justify-content:center; gap: 2px; }
  .menu-overlay nav.primary a{ font-size: 44px; line-height: 1.18; padding: 6px 0; }
  .menu-overlay nav.primary a .num{ font-size: 10px; top: -4px; }
  .menu-overlay nav.primary .sub{ font-size: 10px; padding-left: 4px; margin: -2px 0 12px; }
  .menu-overlay .menu-foot{ flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 40px; }
  .menu-overlay .menu-foot > div{ line-height: 2; }
  .menu-overlay .close-btn{ top:20px; right:20px; }
}

/* ── very small phones ── */
@media (max-width: 380px){
  .menu-overlay nav.primary a{ font-size: 38px; }
  .site-header .brand img{ height: 52px; }
}