/* ── Reset & Variables ───────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

:root {
  --ivory:        #F4F1EB;
  --ivory-50:     rgba(244,241,235,0.5);
  --ink:          #1A1917;
  --ink-mid:      #3A3835;
  --ink-soft:     #7A7670;
  --velvet:       #2D3B28;
  --velvet-mid:   #4A5E42;
  --velvet-light: #8A9E7E;
  --rule:         rgba(26,25,23,0.12);
  --header-h:     52px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  overflow-x: hidden;
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: var(--header-h);
  background: var(--ivory);
  border-bottom: 0.5px solid var(--rule);
}

.logo-group { display:flex; align-items:baseline; gap:1.25rem }

.cv-logo {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}

.cv-tagline {
  font-family: 'Courier Prime', monospace;
  font-size: 8px; letter-spacing: 0.18em;
  color: var(--ink-soft); white-space: nowrap;
}

.header-nav { display:flex; gap:1.75rem; align-items:center }

.nav-btn {
  text-decoration: none; display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer;
  transition: color 0.2s;
  position: relative; padding: 4px 0;
  background: none; border: none;
}
.nav-btn--back { display: none } /* mobile uniquement via media query */

.nav-btn::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 0.5px;
  background: var(--velvet); transition: width 0.3s;
}
.nav-btn:focus-visible      { outline: 1.5px solid var(--velvet); outline-offset: 3px }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none; border: none;
  cursor: pointer; padding: 4px;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.nav-toggle:focus-visible { outline: 1.5px solid var(--velvet); outline-offset: 3px }

/* Animation hamburger → X pilotée par aria-expanded */
.hamburger .line {
  transform-origin: center;
  transition:
    y 300ms ease-in 300ms,
    rotate 300ms ease-in,
    opacity 0ms 300ms;
}
.nav-toggle[aria-expanded="true"] .line {
  transition:
    y 300ms ease-in,
    rotate 300ms ease-in 300ms,
    opacity 0ms 300ms;
}
.nav-toggle[aria-expanded="true"] :is(.top, .bottom) { y: 45 }
.nav-toggle[aria-expanded="true"] .top               { rotate: 45deg }
.nav-toggle[aria-expanded="true"] .middle             { opacity: 0 }
.nav-toggle[aria-expanded="true"] .bottom             { rotate: -45deg }

/* ── Overlay ─────────────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 98;
  background: transparent; pointer-events: none; transition: background 0.4s;
}
.overlay.active { background: rgba(26,25,23,0.15); pointer-events: auto }

/* ── Side panels ─────────────────────────────────────────────────────────── */
.side-panel {
  position: fixed; top: 0; right: 0;
  width: 420px;
  height: 100vh;
  height: 100dvh;
  background: var(--ivory); border-left: 0.5px solid var(--rule);
  z-index: 99;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto; display: flex; flex-direction: column;
  padding: 7rem 2.5rem 3rem;
}
.side-panel.open { transform: translateX(0) }

.panel-ref {
  font-family: 'Courier Prime', monospace;
  font-size: 8px; letter-spacing: 0.25em;
  color: var(--velvet-mid); margin-bottom: 2rem;
}

.panel-close {
  position: absolute; top: 5.2rem; right: 2.5rem;
  font-family: 'Courier Prime', monospace;
  font-size: 8px; letter-spacing: 0.18em;
  color: var(--ink-soft); cursor: pointer;
  transition: color 0.2s; background: none; border: none;
}
.panel-close:focus-visible { outline: 1.5px solid var(--velvet); outline-offset: 3px }

.panel-portrait  { width:100%; height:auto; display:block; margin-bottom:2rem }

.panel-logo-block {
  padding-bottom: 1.75rem; margin-bottom: 1.75rem;
  border-bottom: 0.5px solid var(--rule);
}
.panel-brand {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: 34px; line-height: 1;
  color: var(--ink); white-space: nowrap;
}
.panel-body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-size: 15px; line-height: 1.85;
  color: var(--ink-mid); margin-bottom: 1.2rem;
}

/* ── Contact panel ───────────────────────────────────────────────────────── */
.c-block { padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:0.5px solid var(--rule) }
.c-block:last-child { border-bottom:none; margin-bottom:0 }
.c-label {
  font-family: 'Courier Prime', monospace;
  font-size: 8px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--velvet-mid); margin-bottom: 0.4rem;
}
.c-value {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--ink);
}
.c-value a       { color:var(--ink); text-decoration:none; transition:color 0.2s }
.c-sub {
  font-family: 'Courier Prime', monospace;
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--ink-soft); display: block; margin-top: 2px;
}
.contact-portrait { width:100%; height:auto; display:block; margin-top:1.5rem }

/* ── Prices panel ────────────────────────────────────────────────────────── */
.t-section { margin-bottom: 2rem }
.t-section-title {
  font-family: 'Courier Prime', monospace;
  font-size: 8px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--velvet-mid);
  padding-bottom: 0.6rem; margin-bottom: 0.2rem;
  border-bottom: 0.5px solid var(--rule);
}
.t-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.55rem 0; border-bottom: 0.5px solid rgba(26,25,23,0.05);
}
.t-label  { font-size:12px; color:var(--ink-mid); font-weight:300; flex:1 }
.t-price  { font-family:'Courier Prime',monospace; font-size:10px; color:var(--ink); letter-spacing:0.05em; white-space:nowrap; margin-left:1rem }
.t-note   { margin-top:1.5rem; padding-top:1.25rem; border-top:0.5px solid var(--rule); font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.08em; color:var(--ink-soft); line-height:2 }

/* ── News panel ──────────────────────────────────────────────────────────── */
.actu-flyer  { width:100%; height:auto; display:block; margin-bottom:2rem }
.actu-date   { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.2em; color:var(--velvet-mid); margin-bottom:1.5rem }
.actu-title  { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:20px; line-height:1.25; color:var(--ink); margin-bottom:1.25rem }
.actu-body   { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:14px; line-height:1.85; color:var(--ink-mid) }
.actu-body p { margin-bottom:1rem }
.actu-body p:last-child { margin-bottom:0 }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  padding-top: var(--header-h);
  min-height: 100dvh;
  display: grid; grid-template-columns: 3fr 2fr;
}
.hero-left {
  padding: 4.5rem 3rem 4.5rem 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 0.5px solid var(--rule);
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400; font-size: clamp(46px,6vw,82px);
  line-height: 0.95; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
}
.hero-desc {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px; font-weight: 300; line-height: 1.65;
  color: var(--ink-mid); margin-top: 2.5rem; max-width: 420px;
}
.hero-acts      { margin-top: 3rem }
.hero-act-label { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.2em; text-transform:uppercase; color:var(--velvet-mid); margin-bottom:0.6rem }
.hero-act-list  { font-family:'Inter',sans-serif; font-weight:300; font-size:11px; color:var(--ink-soft); line-height:1.9; letter-spacing:0.02em }

/* ── Carousel ────────────────────────────────────────────────────────────── */
.hero-carousel  { position:relative; overflow:hidden; background:var(--ivory); height:100%; display:flex; flex-direction:column }
.carousel-meta  { position:relative; z-index:3; padding:1rem 1.5rem 0.5rem }
.carousel-track { display:flex; flex:1; min-height:0; transition:transform 0.7s cubic-bezier(0.25,0.1,0.25,1) }
.carousel-slide { min-width:100%; height:100%; position:relative; flex-shrink:0; background:var(--ivory); display:flex; align-items:center; justify-content:center }
.carousel-slide img { width:100%; height:100%; object-fit:contain; display:block; position:absolute; inset:0 }
.slide-num { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.2em; color:rgba(26,25,23,0.42) }
.carousel-dots {
  position:relative;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:3;
  flex-shrink:0;
  padding:0.75rem 1rem 1rem;
  background:linear-gradient(to bottom, rgba(244,241,235,0.94), rgba(244,241,235,1));
}
.carousel-dot  { width:4px; height:4px; border-radius:50%; background:rgba(26,25,23,0.18); cursor:pointer; transition:background 0.3s; border:none; padding:0 }
.carousel-dot.active { background:rgba(26,25,23,0.6) }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section        { border-top: 0.5px solid var(--rule) }
.section-header { display:flex; align-items:baseline; justify-content:space-between; padding:1.1rem 2.5rem; border-bottom:0.5px solid var(--rule) }
.s-num, .s-label { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.25em; color:var(--ink-soft) }
.s-label { text-transform: uppercase }

.activites-grid { display:grid; grid-template-columns:1fr 1fr }
.act-item       { padding:3rem 2.5rem; border-right:0.5px solid var(--rule); border-bottom:0.5px solid var(--rule) }
.act-item:nth-child(2n)          { border-right: none }
.act-item:nth-child(3),
.act-item:nth-child(4)           { border-bottom: none }

.act-ref   { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.2em; color:var(--velvet-mid); display:block; margin-bottom:1.25rem }
.act-title { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:22px; line-height:1.15; color:var(--ink); margin-bottom:1rem }
.act-body  { font-size:12.5px; line-height:1.85; color:var(--ink-soft); font-weight:300 }
.act-body em { font-style:italic; font-family:'Cormorant Garamond',serif; font-size:14px; color:var(--ink-mid); display:block; margin-top:0.9rem; line-height:1.65 }

/* ── Manifeste ───────────────────────────────────────────────────────────── */
.manifeste { background:var(--ink); padding:5.5rem 2.5rem; display:grid; grid-template-columns:140px 1fr; gap:3rem; align-items:start }
.m-left    { padding-top:0.3rem; border-right:0.5px solid rgba(255,255,255,0.07); padding-right:2.5rem }
.m-label   { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.3em; text-transform:uppercase; color:var(--velvet-light); display:block; margin-bottom:1.5rem }
.m-ref     { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.12em; color:rgba(255,255,255,0.12); line-height:2 }
.m-quote   { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:clamp(20px,2.5vw,32px); line-height:1.35; color:var(--ivory); letter-spacing:-0.01em; margin-bottom:2rem }
.m-quote em { font-style:italic; color:var(--velvet-light) }
.m-body    { font-family:'Cormorant Garamond',serif; font-weight:300; font-size:16px; line-height:1.8; color:var(--ivory-50) }
.m-body p  { margin-bottom:1rem }
.m-body p:last-child { margin-bottom:0 }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { background:var(--ink); border-top:0.5px solid rgba(255,255,255,0.06); padding:2.5rem 2.5rem 1.5rem; margin-top: auto }
.footer-intro { margin-bottom: 1.5rem }
.footer-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; column-gap:8%; padding-bottom:1.5rem; border-bottom:0.5px solid rgba(255,255,255,0.06); align-items:start }
.footer-logo    { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:26px; color:var(--ivory); white-space:nowrap }
.footer-tagline { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.12em; color:rgba(255,255,255,0.18); margin-top:0.6rem; line-height:1.9 }
.f-label  { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.25em; text-transform:uppercase; color:var(--velvet-light); margin-bottom:0.9rem; display:block }
.f-body   { font-family:'Courier Prime',monospace; font-size:9px; letter-spacing:0.06em; line-height:2; color:rgba(255,255,255,0.35) }
.f-body a       { color:rgba(255,255,255,0.35); text-decoration:none; transition:color 0.2s }

.nl-form-subscription {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}
.nl-form-subscription .f-body p {
  margin-bottom: 0.55rem;
  line-height: 1.5;
}
.nl-form-subscription .nl-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
  width: 100%;
  max-width: 27.3rem;
}
.nl-form-subscription .nl-input {
  min-width: 0;
  width: 100%;
  padding: 0.6rem 0.85rem 0.6rem 0;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--ink-mid);
  color: var(--ivory);
  line-height: 1.2;
  outline: none;
  transition: border-color 0.2s, border-width 0.2s;
}
.nl-form-subscription .nl-input::placeholder {
  color: rgba(255,255,255,0.22);
  background: transparent;
}
.nl-form-subscription .nl-input:focus {
  border: none;
  border-bottom: 0.5px solid var(--ink-soft);
  outline: none;
  box-shadow: none;
}
.nl-form-subscription .nl-submit {
  font-family: 'Courier Prime', monospace; font-size: 0.45rem; letter-spacing: 0.125em; text-transform: uppercase;
  white-space: nowrap;
  align-self: end;
  line-height: 1;
  color: var(--ivory);
  background: var(--velvet);
  border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0.4rem 0.58rem;
}
.nl-form-subscription .nl-confirm {
  margin-top: 0.6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8rem;
  color: var(--velvet-light);
}
.footer-bottom  { display:flex; justify-content:space-between; align-items:center; padding-top:1.25rem }
.f-mentions { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.1em; color:rgba(255,255,255,0.15) }
.f-top { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.18em; color:rgba(255,255,255,0.2); cursor:pointer; transition:color 0.2s; background:none; border:none }
.f-top:focus-visible { outline:1.5px solid var(--velvet-light); outline-offset:3px }

/* ── Newsletter popup ────────────────────────────────────────────────────── */
.nl-popup {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 200;
  width: min(480px, calc(100vw - 3rem));
  background: var(--ivory); border: 0.5px solid var(--rule);
  padding: 2rem 2.5rem 2rem 2rem;
  box-shadow: 0 8px 32px rgba(26,25,23,0.1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nl-close {
  position: absolute; top: 1rem; right: 1rem;
  font-family: 'Courier Prime', monospace; font-size: 10px; letter-spacing: 0.15em;
  color: var(--ink-soft); background: none; border: none;
  cursor: pointer; line-height: 1; padding: 2px; transition: color 0.2s;
}
.nl-close:focus-visible { outline: 1.5px solid var(--velvet); outline-offset: 3px }
.nl-label { font-family:'Courier Prime',monospace; font-size:8px; letter-spacing:0.25em; text-transform:uppercase; color:var(--velvet-mid); margin-bottom:0.75rem }
.nl-title { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:20px; line-height:1.2; color:var(--ink); margin-bottom:0.6rem }
.nl-desc  { font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic; font-size:14px; line-height:1.65; color:var(--ink-mid); margin-bottom:1.5rem }
.nl-popup .nl-form  { display:flex; gap:0.5rem; align-items:stretch }
.nl-popup .nl-input {
  flex: 1; font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink); background: transparent;
  border: 0.5px solid var(--ink-soft); padding: 0.6rem 0.9rem 0.6rem 0;
  outline: none; transition: border-color 0.2s;
}
.nl-popup .nl-input:focus { border-color: var(--ink-soft); color: var(--ink) }
.nl-popup .nl-submit {
  font-family: 'Courier Prime', monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); background: var(--velvet-mid); border: none;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0.58rem 0.58rem; cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.nl-popup .nl-submit:focus-visible { outline: 1.5px solid var(--velvet-light); outline-offset: 3px }
.nl-popup .nl-confirm { display:none; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--velvet-mid); margin-top:1rem }
.nl-confirm.is-error { color:#7a2f2f }
.nl-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Page layouts ────────────────────────────────────────────────────────── */
.page-view {
  padding: calc(var(--header-h) + 3rem) 2.5rem 4rem;
  max-width: 480px;
  margin: 0 auto;
}
.page-placeholder {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.page-placeholder-label {
  font-family: 'Courier Prime', monospace;
  font-size: 10px; letter-spacing: 0.25em; color: var(--ink-soft);
}

/* ── Animations ──────────────────────────────────────────────────────────── */
.reveal         { opacity:0; transform:translateY(14px); transition:opacity 0.7s ease,transform 0.7s ease }
.reveal.visible { opacity:1; transform:none }

/* ── Hover (souris uniquement — évite les états collants sur tactile) ───── */
@media (hover: hover) {
  .nav-btn:hover              { color: var(--ink-mid) }
  .nav-btn:hover::after       { width: 100% }
  .nav-toggle:hover           { color: var(--ink-mid) }
  .panel-close:hover          { color: var(--ink) }
  .c-value a:hover            { color: var(--velvet) }
  .f-body a:hover             { color: var(--ivory) }
  .f-top:hover                { color: var(--ivory) }
  .nl-close:hover             { color: var(--ink) }
  .nl-submit:hover            { background: var(--velvet-mid); cursor: pointer}
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (width <= 768px) {
  header          { padding: 0 1.25rem }
  .logo-group     { flex-direction:column; gap:2px; align-items:flex-start }
  .cv-tagline     { font-size:7px; letter-spacing:0.14em }
  .header-nav {
    display: none;
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: var(--ivory);
    border-bottom: 0.5px solid var(--rule);
    box-shadow: 0 8px 20px rgba(58,56,53,0.1);
    flex-direction: column;
    gap: 0;
    padding: 0;
    z-index: 99;
  }
  .header-nav.open { display: flex }
  .nav-btn {
    padding: 1rem 1.25rem;
    border-bottom: 0.5px solid var(--rule);
    width: 100%;
  }
  .nav-btn:last-child { border-bottom: none }
  .nav-btn--back {
    display: block;
    color: var(--ink-mid);
    border-bottom: 0.5px solid var(--rule);
  }
  .nav-btn--back::after { display: none }  /* pas d'underline sur le retour */

  .nav-toggle { display: flex }

  /* Feedback tactile au tap (équivalent mobile du hover) */
  .nav-btn:active { color: var(--ink-mid) }

  .hero           { grid-template-columns:1fr; min-height:auto }
  .hero-left      { padding:2.5rem 1.5rem 3rem; border-right:none; border-bottom:0.5px solid var(--rule) }
  .hero-title     { font-size:clamp(38px,11vw,58px); white-space:normal }
  .hero-carousel  { height:100vw; min-height:300px }
  .carousel-meta  { padding:0.9rem 1rem 0.4rem }
  .slide-num      { font-size:9px; color:var(--ink-soft) }
  .carousel-dots  { padding:0.65rem 0.9rem 0.9rem }

  .side-panel     { width:100%; padding:6rem 1.5rem 2.5rem; transition:none; height:100dvh }
  .panel-close    { right:1.5rem }

  .activites-grid { grid-template-columns: 1fr }
  .act-item       { border-right: none }
  .activites-grid .act-item          { border-bottom: 0.5px solid var(--rule) }
  .activites-grid .act-item:last-child { border-bottom: none }
  .section-header { padding:1rem 1.5rem }
  .act-item       { padding:2.5rem 1.5rem }

  .manifeste      { grid-template-columns:1fr; gap:1.5rem; padding:3.5rem 1.5rem }
  .m-left         { border-right:none; border-bottom:0.5px solid rgba(255,255,255,0.06); padding-right:0; padding-bottom:1.5rem }

  .footer-intro   { margin-bottom: 1.25rem }
  .footer-grid    { grid-template-columns:1fr; gap:1.5rem }

  .nl-form-subscription .nl-form {
    gap: 0.45rem;
  }
  .nl-form-subscription .nl-input {
    padding: 0.58rem 0.75rem 0.58rem 0;
    font-size: 10px;
  }
  .nl-form-subscription .nl-submit {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    line-height: 1;
  }
}