/* ============================================================
   EURHEKA CONSEIL — Design System
   Couleurs de marque : #a3ab92 (sauge) / #3c3c3b (anthracite)
   Police : Montserrat
   ============================================================ */

:root{
  /* Couleurs de marque */
  --sage: #a3ab92;
  --sage-light: #c3c9b8;
  --sage-dark: #7d8570;
  --anthracite: #3c3c3b;
  --noir: #161615;
  --creme: #f7f6f2;
  --blanc: #ffffff;

  /* Accents additionnels (libertés créatives) */
  --terracotta: #c98b5e;
  --or: #d8c190;

  --ink: var(--anthracite);
  --bg: var(--creme);

  /* Typo */
  --font: 'Montserrat', -apple-system, sans-serif;

  /* Échelle typographique volontairement contrastée / dynamique */
  --fs-display: clamp(3.2rem, 10vw, 9.5rem);
  --fs-h1: clamp(2.6rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.6rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.6vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.82rem;
  --fs-micro: 0.68rem;

  --container: 1320px;
  --radius: 22px;
  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html{ overflow-x: hidden; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width: var(--container); margin:0 auto; padding:0 6vw; }

::selection{ background: var(--sage); color:#fff; }

/* Scrollbar discrète */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--creme); }
::-webkit-scrollbar-thumb{ background: var(--sage); border-radius:10px; }

/* ---------- Lenis-like smooth wrapper ---------- */
.page-wrap{ position:relative; }

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  background: var(--anthracite);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#loader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#loader .loader-mark{
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--sage-light);
  letter-spacing:.3em;
  text-transform:uppercase;
  font-weight:600;
  display:flex; gap:.6rem; overflow:hidden;
}
#loader .loader-mark span{ display:inline-block; transform: translateY(110%); animation: riseUp .7s var(--ease) forwards; }
#loader .loader-mark span:nth-child(2){ animation-delay:.06s; }
#loader .loader-mark span:nth-child(3){ animation-delay:.12s; }
#loader .loader-mark span:nth-child(4){ animation-delay:.18s; }
#loader .loader-mark span:nth-child(5){ animation-delay:.24s; }
#loader .loader-mark span:nth-child(6){ animation-delay:.30s; }
#loader .loader-mark span:nth-child(7){ animation-delay:.36s; }
@keyframes riseUp{ to{ transform: translateY(0); } }

/* ============== HEADER ============== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem 5vw;
  background: rgba(22,22,21,.4);
  backdrop-filter: blur(10px);
  transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.solid{
  padding: 1rem 5vw;
  background: rgba(22,22,21,.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.brand{ display:flex; align-items:center; gap:.7rem; z-index:2; }
.brand img{ width:46px; height:46px; border-radius:50%; }
.brand .brand-name{
  color:var(--blanc);
  font-weight:700; letter-spacing:.02em;
  font-size: 1.05rem;
}
.brand-name b{ color: var(--sage-light); font-weight:800; }

.header-right{ display:flex; align-items:center; gap:1.6rem; z-index:2; }
.socials{ display:flex; align-items:center; gap:1.05rem; }
.social-ico{ width:19px; height:19px; opacity:.92; color:#fff; transition: transform .35s var(--ease), opacity .3s; }
.social-ico svg{ width:100%; height:100%; display:block; }
.social-ico:hover{ transform: translateY(-3px) scale(1.12); opacity:1; }

.burger{
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,.45);
  background: transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition: border-color .4s, background .4s, transform .4s var(--ease);
}
.burger:hover{ transform: scale(1.07); background: rgba(255,255,255,.08); }
.burger span{ width:18px; height:2px; background:#fff; border-radius:2px; transition: background .4s var(--ease); }

/* ============== Boutons & étiquettes ============== */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding: 1rem 1.9rem;
  border-radius: 100px;
  font-weight:600; font-size:.92rem; letter-spacing:.02em;
  border: 1.5px solid var(--anthracite);
  background: transparent; color: var(--anthracite);
  transition: all .45s var(--ease);
  position:relative; overflow:hidden;
}
.btn.primary{ background: var(--anthracite); color:#fff; }
.btn .arrow{ transition: transform .45s var(--ease); }
.btn:hover{ background: var(--anthracite); color:#fff; border-color: var(--anthracite); }
.btn:hover .arrow{ transform: translateX(6px); }
.btn.primary:hover{ background: var(--sage-dark); border-color: var(--sage-dark); }
.btn.ghost{ border-color: rgba(255,255,255,.55); color:#fff; }
.btn.ghost:hover{ background:#fff; color: var(--anthracite); }

.tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size: var(--fs-lead); text-transform:uppercase; letter-spacing:.22em;
  font-weight:700; color: var(--sage-dark);
}
.tag::before{ content:''; width:28px; height:1.5px; background: var(--sage-dark); }

/* ============== Footer ============== */
.site-footer{
  background: var(--anthracite); color: var(--creme);
  padding: 5.5rem 0 2rem;
}
.footer-top{
  display:flex; flex-wrap:wrap; gap:3rem; justify-content:space-between;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand{ max-width:340px; }
.footer-brand img{ width:52px; margin-bottom:1.2rem; border-radius:50%; }
.footer-brand p{ color: rgba(247,246,242,.65); font-size:.94rem; line-height:1.7; }
.footer-cols{ display:flex; gap:4rem; flex-wrap:wrap; }
.footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.18em; color: var(--sage-light); margin:0 0 1.1rem; }
.footer-col a{ display:block; font-size:.96rem; color: rgba(247,246,242,.78); margin-bottom:.7rem; transition: color .3s, transform .3s; }
.footer-col a:hover{ color:#fff; transform: translateX(4px); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2rem; font-size:.78rem; color: rgba(247,246,242,.45); }

/* ============== Reveal utilities (JS-driven) ============== */
[data-reveal]{ opacity:0; transform: translateY(46px); }
[data-reveal].is-in{ opacity:1; transform:none; transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal-scale]{ opacity:0; transform: scale(.9); }
[data-reveal-scale].is-in{ opacity:1; transform:scale(1); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }

/* Le déclencheur ([data-reveal-left/right]) reste fixe (sa position sert à l'IntersectionObserver) :
   c'est l'enfant .reveal-slide qui porte le vrai décalage hors-écran, pour que la détection
   de visibilité ne soit jamais faussée par la transform. */
[data-reveal-left] .reveal-slide,
[data-reveal-right] .reveal-slide{ display:block; width:100%; height:100%; transition: transform 1.3s var(--ease); }
[data-reveal-left] .reveal-slide{ transform: translateX(-140vw); }
[data-reveal-right] .reveal-slide{ transform: translateX(140vw); }
[data-reveal-left].is-in .reveal-slide,
[data-reveal-right].is-in .reveal-slide{ transform:none; }

/* ============== Lien souligné avec flèche (CTA discret) ============== */
.link-arrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  border-bottom: 1.5px solid currentColor;
  padding-bottom:.2rem;
  transition: gap .35s var(--ease), opacity .3s;
}
.link-arrow .arrow{ transition: transform .4s var(--ease); }
.link-arrow:hover{ gap:1rem; }
.link-arrow:hover .arrow{ transform: translateX(4px); }

.split-line{ overflow:hidden; }
.split-line > span{ display:inline-block; transform: translateY(115%); transition: transform 1s var(--ease); }
.split-line.is-in > span{ transform: translateY(0); }

/* ============== 3D scroll depth (bonus consigne) ============== */
.depth-stage{ perspective: 1400px; }
.depth-layer{ transform-style: preserve-3d; will-change: transform; }

/* ============== Sections communes ============== */
.section{ padding: clamp(5rem, 9vw, 9rem) 0; position:relative; }
.section-head{ max-width:760px; margin-bottom: 3.4rem; }
.section-head h2{ font-size: var(--fs-h2); font-weight:700; line-height:1.04; margin:.6rem 0 0; letter-spacing:-.01em; }
.section-head h2 em{ font-style:normal; color: var(--sage-dark); }

@media (max-width: 860px){
  .site-header{ padding: 1.1rem 5.5vw; }
  .header-right{ gap:.9rem; }
  .footer-cols{ gap:2.4rem; }
  .tag{ letter-spacing: .14em; }
}
@media (max-width: 640px){
  .socials{ display:flex; gap:.5rem; }
  .social-ico{ width:14px; height:14px; }
  .header-right{ gap:.6rem; }
  .container{ padding: 0 2rem; }
  .tag{ letter-spacing: .12em; font-size: .88rem; }
  .tag::before{ width: 22px; }
  .section{ padding: clamp(1.8rem, 4.5vw, 2.8rem) 0; }
  .section-head{ margin-bottom: 1.2rem; }
  .section-head h2{ font-size: clamp(1.3rem, 6vw, 1.9rem); }
  .btn{ padding: .85rem 1.5rem; font-size:.88rem; }
  .footer-top{ flex-direction:column; gap:2.2rem; }
  .footer-cols{ flex-direction:column; gap:1.6rem; }
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; gap:.6rem; }
  .footer-brand{ max-width:100%; }
  .footer-col a{ word-break: break-all; font-size: .82rem; }
  .site-footer{ padding: 3.5rem 0 1.8rem; }
}
@media (max-width: 480px){
  .tag{ font-size: .78rem; letter-spacing: .1em; }
  .tag::before{ width: 16px; }
  .section-head h2{ font-size: clamp(1.1rem, 5.5vw, 1.6rem); }
  .section-head{ margin-bottom: .9rem; }
  .section{ padding: clamp(1.2rem, 3.5vw, 1.8rem) 0; }
}