/* =========================================================
   GUILLAUME. — design tokens (inspiré shubham-sharma.fr)
   Fond clair + accents camel
   ========================================================= */
:root{
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --elevated:#F5F4F0;
  --surface-dark:#1C1914;

  --ink:#1C1914;
  --ink-soft:#5C5649;
  --ink-muted:#7B766C;

  --accent:#BB6600;
  --accent-hover:#A56639;
  --camel:#AF8751;
  --camel-soft:#C1AA91;
  --camel-light:#CAAD87;
  --camel-dark:#553300;

  --border:#E5E2DC;
  --border-strong:#DCD9D2;

  --font-display:'Outfit', -apple-system, sans-serif;
  --font-body:'DM Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --radius:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --ease-out-expo:cubic-bezier(.16, 1, .3, 1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container-fluid{max-width:1320px;}
::selection{background:var(--accent);color:#fff;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--accent);
  display:inline-block;
}

h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  letter-spacing:-.025em;
}
.text-accent{color:var(--accent)!important;}
.text-soft{color:var(--ink-soft)!important;}
.bg-surface{background:var(--surface)!important;}
.bg-elevated{background:var(--elevated)!important;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:16px 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(250,250,248,.92);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.15rem;
  color:var(--ink);
  white-space:nowrap;
}
.brand .dot {
  font-weight:2.5rem;
  color: var(--accent);
}
.main-nav{display:flex;align-items:center;gap:1.75rem;}
.nav-link-custom{
  font-family:var(--font-body);
  font-size:.9rem;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
.nav-link-custom::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--accent);transition:width .25s ease;border-radius:2px;
}
.nav-link-custom:hover, .nav-link-custom.active{color:var(--ink);}
.nav-link-custom:hover::after, .nav-link-custom.active::after{width:100%;}

.nav-actions{display:flex;align-items:center;gap:14px;}
.btn-contact{
  font-family:var(--font-body);
  font-size:.875rem;
  font-weight:600;
  background:var(--accent);
  color:#fff!important;
  padding:.55rem 1rem;
  border-radius:var(--radius);
  display:inline-flex;align-items:center;gap:.45rem;
  transition:background .2s ease, transform .2s ease;
  border:1px solid var(--accent);
}
.btn-contact:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;
}
.nav-toggle span{display:block;height:1.5px;width:100%;background:var(--ink);transition:.3s;}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 0 60px;
  position:relative;
}
.hero-title{
  font-size:clamp(2rem, 5.5vw, 3.75rem);
  font-weight:800;
  line-height:1.08;
  margin:1.2rem 0 1.8rem;
  max-width:22ch;
  color:var(--ink-soft);
}
.hero-line{display:block;}
.hero-line + .hero-line{margin-top:.35em;}
.hero-line-soft{color:var(--ink-soft);font-weight:600;}
.hero-line-cta{color:var(--ink-soft);font-weight:800;}

.gooey-wrapper{
  display:inline-block;
  position:relative;
  filter:url("#gooey-threshold");
  color:var(--accent);
}
.gooey-word{
  display:inline-block;
  white-space:nowrap;
  color:var(--accent);
}
#gooey-text1{
  position:absolute;left:0;top:0;
  opacity:0;
}
#gooey-text2{
  position:relative;
  opacity:1;
}

.hero-sub{
  font-size:clamp(1rem,1.5vw,1.125rem);
  color:var(--ink-soft);
  max-width:48ch;
  margin-bottom:2rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:3rem;}
.btn-primary-cacao{
  background:var(--accent);color:#fff;
  padding:.75rem 1.25rem;border-radius:var(--radius);
  font-family:var(--font-body);font-size:.875rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.5rem;
  transition:background .2s ease, transform .2s ease;
  border:1px solid var(--accent);
}
.btn-primary-cacao:hover{background:var(--accent-hover);transform:translateY(-1px);color:#fff;}
.btn-outline-cacao{
  padding:.75rem 1.25rem;border-radius:var(--radius);
  font-family:var(--font-body);font-size:.875rem;font-weight:600;
  border:1px solid var(--border-strong);color:var(--ink);
  background:var(--surface);
  transition:border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn-outline-cacao:hover{border-color:var(--ink);transform:translateY(-1px);}

.scroll-cue{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-muted);
}
.scroll-cue .line{width:1px;height:38px;background:var(--border-strong);position:relative;overflow:hidden;}
.scroll-cue .line::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--accent);animation:scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{0%{top:-100%;}50%{top:0;}100%{top:100%;}}

/* marquee */
.marquee-wrap{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:22px 0;overflow:hidden;background:var(--surface);
}
.marquee-track{
  display:flex;gap:0;width:max-content;
  animation:marquee 32s linear infinite;
}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-muted);display:flex;align-items:center;gap:.6rem;
  padding:0 2.4rem;border-right:1px solid var(--border);white-space:nowrap;
}
.marquee-item i{color:var(--accent);font-size:1rem;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =========================================================
   CHAPTERS
   ========================================================= */
.chapter{
  padding:100px 0;
  border-top:1px solid var(--border);
  position:relative;
}
.chapter:nth-of-type(even){background:var(--surface);}
.tab-chip{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;
  background:var(--accent);
  padding:.4rem .85rem;
  border-radius:var(--radius);
  display:inline-flex;align-items:center;gap:.5rem;
  margin-bottom:1.4rem;
}
.chapter-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;margin-bottom:2.4rem;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  padding-bottom:1.6rem;
}
.chapter-title{
  font-size:clamp(1.75rem,3.2vw,2.75rem);
  font-weight:700;
  max-width:18ch;
  color:var(--ink);
}
.chapter-desc{max-width:40ch;color:var(--ink-soft);font-size:.975rem;}
.chapter-link{
  font-family:var(--font-body);font-size:.875rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);
  white-space:nowrap;
  transition:color .2s ease;
}
.chapter-link:hover{color:var(--accent-hover);}
.chapter-link i{transition:transform .25s ease;}
.chapter-link:hover i{transform:translateX(3px);}

/* section visual (image pleine largeur) */
.section-visual{
  display:block;
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  aspect-ratio:21/9;
  transition:transform .35s var(--ease-out-expo), box-shadow .35s ease;
}
.section-visual:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px -20px rgba(28,25,20,.18);
}
.section-visual img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out-expo);
}
.section-visual:hover img{transform:scale(1.03);}
.section-visual-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(28,25,20,.72) 0%, rgba(28,25,20,.08) 55%, transparent 100%);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:1.75rem 2rem;
  color:#fff;
}
.section-visual-label{
  font-family:var(--font-display);
  font-size:clamp(1.25rem,2.5vw,1.75rem);
  font-weight:700;
}
.section-visual-cta{
  font-family:var(--font-body);
  font-size:.875rem;font-weight:600;
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  padding:.55rem 1rem;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.22);
  transition:background .2s ease;
}
.section-visual:hover .section-visual-cta{background:rgba(187,102,0,.85);border-color:var(--accent);}

/* preview / index cards (sub-pages) */
.idx-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:100%;
  display:flex;flex-direction:column;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.chapter:nth-of-type(even) .idx-card{background:var(--bg);}
.idx-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px -20px rgba(28,25,20,.15);
  border-color:var(--border-strong);
}
.idx-card-media{
  aspect-ratio:4/3;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;color:#fff;
  overflow:hidden;
}
.idx-card-media img{width:100%;height:100%;object-fit:cover;}
.idx-card-media i{position:relative;z-index:2;}
.idx-card-body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;flex:1;}
.idx-card-meta{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:.5rem;
}
.idx-card-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;margin-bottom:.5rem;}
.idx-card-text{color:var(--ink-soft);font-size:.9rem;flex:1;}
.idx-card-arrow{
  margin-top:1rem;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  color:var(--accent);
}

/* =========================================================
   PAGE HERO (sub-pages)
   ========================================================= */
.page-hero{padding:140px 0 60px;border-bottom:1px solid var(--border);}
.page-hero .eyebrow{margin-bottom:1rem;}
.page-hero h1{font-size:clamp(2rem,4.5vw,3.5rem);font-weight:800;max-width:20ch;margin-bottom:1rem;color:var(--ink);}
.page-hero p{max-width:52ch;color:var(--ink-soft);font-size:1.05rem;}

.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:2.2rem 0 2.6rem;}
.filter-chip{
  font-family:var(--font-body);font-size:.8rem;font-weight:500;
  padding:.5rem 1rem;border-radius:var(--radius);border:1px solid var(--border-strong);
  color:var(--ink-soft);cursor:pointer;transition:all .2s ease;background:var(--surface);
}
.filter-chip:hover{border-color:var(--accent);color:var(--accent);}
.filter-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.listing-grid{padding-bottom:110px;}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-wrap{padding:140px 0 110px;}
.contact-info-item{
  display:flex;gap:1rem;align-items:flex-start;padding:1.3rem 0;
  border-bottom:1px solid var(--border);
}
.contact-info-item i{color:var(--accent);font-size:1.1rem;margin-top:.15rem;}
.contact-info-item h4{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:.25rem;}
.contact-info-item p, .contact-info-item a{font-size:1rem;}

.form-floating-custom label{
  font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-muted);margin-bottom:.45rem;display:block;
}
.form-control-custom{
  width:100%;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius);padding:.85rem 1rem;font-family:var(--font-body);
  color:var(--ink);transition:border-color .2s ease, background .2s ease;
}
.form-control-custom:focus{outline:none;border-color:var(--accent);background:#fff;}
textarea.form-control-custom{min-height:150px;resize:vertical;}
.form-group{margin-bottom:1.4rem;}
.btn-submit{
  background:var(--accent);color:#fff;border:1px solid var(--accent);
  padding:.75rem 1.5rem;border-radius:var(--radius);font-family:var(--font-body);
  font-size:.875rem;font-weight:600;cursor:pointer;
  transition:background .2s ease, transform .2s ease;
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn-submit:hover{background:var(--accent-hover);transform:translateY(-1px);}
.form-success{
  display:none;background:var(--elevated);border:1px solid var(--camel-light);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin-top:1.2rem;
  font-family:var(--font-mono);font-size:.82rem;color:var(--camel-dark);
}
.form-success.show{display:flex;align-items:center;gap:.65rem;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--surface-dark);color:rgba(255,255,255,.65);
  padding:80px 0 28px;
}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
  flex-wrap:wrap;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:48px;
}
.footer-brand{font-family:var(--font-display);color:#fff;font-size:2.25rem;font-weight:700;}
.footer-brand .dot{color:var(--accent);}
.footer-tag{font-family:var(--font-body);font-size:.875rem;max-width:32ch;text-align:right;color:rgba(255,255,255,.55);}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-bottom:60px;}
.footer-col h5{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.footer-col a{
  display:block;color:rgba(255,255,255,.65);font-size:.9rem;padding:.35rem 0;
  transition:color .2s ease; width:fit-content;
}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.02em;
  color:rgba(255,255,255,.4);
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:991px){
  .main-nav{
    position:fixed;top:0;right:-100%;height:100vh;width:min(78vw,340px);
    background:var(--surface);flex-direction:column;justify-content:center;align-items:flex-start;
    gap:1.4rem;padding:2.5rem;transition:right .35s ease;box-shadow:-16px 0 40px rgba(0,0,0,.1);
  }
  .main-nav.open{right:0;}
  .nav-link-custom{font-size:1.05rem;}
  .nav-toggle{display:flex;}
  .footer-cols{grid-template-columns:repeat(2,1fr);}
  .footer-tag{text-align:left;}
  .section-visual{aspect-ratio:16/10;}
  .section-visual-overlay{padding:1.25rem 1.4rem;flex-direction:column;align-items:flex-start;gap:.75rem;}
}
@media (max-width:576px){
  .hero{padding-top:120px;}
  .chapter{padding:72px 0;}
  .footer-cols{grid-template-columns:1fr;}
  .footer-top{flex-direction:column;align-items:flex-start;}
  .footer-tag{text-align:left;}
  .hero-title{max-width:none;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .gooey-wrapper, .gooey-word{filter:none!important;}
}