/* ─────────────────────────────────────────────
   main.css — Styles partagés maximesciare.com
   ───────────────────────────────────────────── */

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

/* ── VARIABLES ── */
:root {
  --bg:      #F8F6F2;
  --bg-alt:  #FFFFFF;
  --dark:    #0A0A0A;
  --mid:     #2E2E2E;
  --light:   #4A4A4A;
  --border:  #E2DBD2;
  --accent:  #2D7C5C;
  --white-t: rgba(248,246,242,0.93);
  --pad:     80px;
  --pad-h:   72px;

  /* ── TYPOGRAPHIE (échelle générée depuis les valeurs existantes du site) ── */
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-12-5: 12.5px;
  --fs-13: 13px;
  --fs-14-5: 14.5px;
  --fs-15: 15px;
  --fs-15-5: 15.5px;
  --fs-16: 16px;
  --fs-16-5: 16.5px;
  --fs-17: 17px;
  --fs-17-5: 17.5px;
  --fs-18: 18px;
  --fs-18-5: 18.5px;
  --fs-19: 19px;
  --fs-19-5: 19.5px;
  --fs-20: 20px;
  --fs-21: 21px;
  --fs-22: 22px;
  --fs-23: 23px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-30: 30px;
  --fs-42: 42px;
  --fs-46: 46px;
  --fs-50: 50px;
  --fs-66: 66px;
  --fs-18-8: 18.8px;
  --fs-30-8: 30.8px;

  --fs-fluid-01: clamp(15px, 1.1vw, 17px);
  --fs-fluid-02: clamp(18px, 1.8vw, 22px);
  --fs-fluid-03: clamp(20px, 2vw, 24px);
  --fs-fluid-04: clamp(19px, 1.7vw, 26px);
  --fs-fluid-05: clamp(22px, 2.2vw, 28px);
  --fs-fluid-06: clamp(20px, 2vw, 30px);
  --fs-fluid-07: clamp(22px, 2.2vw, 30px);
  --fs-fluid-08: clamp(24px, 2.5vw, 32px);
  --fs-fluid-09: clamp(24px, 2vw, 34px);
  --fs-fluid-10: clamp(24px, 2.5vw, 34px);
  --fs-fluid-11: clamp(24px, 3vw, 38px);
  --fs-fluid-12: clamp(26px, 2.5vw, 38px);
  --fs-fluid-13: clamp(26px, 3vw, 38px);
  --fs-fluid-14: clamp(26px, 2.8vw, 38px);
  --fs-fluid-15: clamp(28px, 2.4vw, 38px);
  --fs-fluid-16: clamp(28px, 3vw, 40px);
  --fs-fluid-17: clamp(28px, 2.8vw, 40px);
  --fs-fluid-18: clamp(28px, 3vw, 42px);
  --fs-fluid-19: clamp(30px, 3vw, 42px);
  --fs-fluid-20: clamp(30px, 2.8vw, 42px);
  --fs-fluid-21: clamp(28px, 3vw, 44px);
  --fs-fluid-22: clamp(30px, 3vw, 44px);
  --fs-fluid-23: clamp(32px, 3vw, 44px);
  --fs-fluid-24: clamp(28px, 3.5vw, 46px);
  --fs-fluid-25: clamp(30px, 3vw, 46px);
  --fs-fluid-26: clamp(34px, 3vw, 46px);
  --fs-fluid-27: clamp(28px, 3.2vw, 48px);
  --fs-fluid-28: clamp(30px, 3.5vw, 50px);
  --fs-fluid-29: clamp(34px, 3.5vw, 50px);
  --fs-fluid-30: clamp(34px, 3.2vw, 52px);
  --fs-fluid-31: clamp(34px, 3.5vw, 52px);
  --fs-fluid-32: clamp(38px, 3.5vw, 52px);
  --fs-fluid-33: clamp(30px, 3.5vw, 54px);
  --fs-fluid-34: clamp(32px, 4vw, 54px);
  --fs-fluid-35: clamp(38px, 4vw, 54px);
  --fs-fluid-36: clamp(38px, 4vw, 56px);
  --fs-fluid-37: clamp(38px, 4vw, 58px);
  --fs-fluid-38: clamp(34px, 4vw, 60px);
  --fs-fluid-39: clamp(34px, 4.5vw, 60px);
  --fs-fluid-40: clamp(34px, 4.5vw, 62px);
  --fs-fluid-41: clamp(38px, 4.5vw, 62px);
  --fs-fluid-42: clamp(38px, 5vw, 66px);
  --fs-fluid-43: clamp(38px, 4.5vw, 66px);
  --fs-fluid-44: clamp(42px, 4.8vw, 70px);
  --fs-fluid-45: clamp(42px, 4.8vw, 72px);
  --fs-fluid-46: clamp(46px, 5.2vw, 78px);
  --fs-fluid-47: clamp(50px, 7vw, 98px);
  --fs-fluid-48: clamp(102px, 20vw, 222px);
  --fs-fluid-49: clamp(50px, 7vw, 82px);
  --fs-fluid-50: clamp(40.4px, 6vw, 74px);
}

/* ── BASE ── */
html { scroll-behavior: smooth; }
body { font-family: 'Urbanist', sans-serif; background: var(--bg); color: var(--dark); overflow-x: hidden; font-size: var(--fs-20); }
strong { font-weight: 600; }
em { font-style: italic; }

/* ── UTILITAIRES ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 22px;
}
.eyebrow::before { content:''; display:block; width:22px; height:1.5px; background:var(--accent); flex-shrink:0; }
.highlight { color: var(--accent); }

/* ── NAV ── */
nav {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; background: var(--white-t);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border); border-radius: 40px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06); z-index: 200;
  display: inline-flex; align-items: center; padding: 8px 9px 8px 22px;
}
.nav-logo { display:flex; align-items:center; text-decoration:none; margin-right:30px; }
.nav-logo img { height:30px; width:30px; filter:brightness(0); opacity:.8; }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; margin-right:18px; }
.nav-links a { font-size: var(--fs-16-5); font-weight:500; letter-spacing:0.02em; color:var(--mid); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--dark); }
.nav-links a.active { color:var(--dark); font-weight:600; }
.btn-nav {
  padding:9px 20px; background:var(--dark); color:#fff; border-radius:32px;
  font-size: var(--fs-15); font-weight:600; letter-spacing:0.03em; text-decoration:none;
  transition:background .2s, transform .15s;
}
.btn-nav:hover { background:var(--accent); transform:translateY(-1px); }
.nav-burger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
  margin-left:4px; width:34px; height:34px; flex-shrink:0;
}
.nav-burger span { display:block; width:20px; height:2px; background:var(--dark); border-radius:2px; transition:transform .3s, opacity .2s; transform-origin:center; }
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── BOUTONS ── */
.btn-primary,
.btn-accent {
  padding:14px 28px; background:var(--accent); color:#fff; border-radius:8px;
  font-family:'Urbanist', sans-serif; font-size: var(--fs-17); font-weight:600;
  letter-spacing:0.02em; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:opacity .2s, transform .15s;
}
.btn-primary:hover,
.btn-accent:hover { opacity:.88; transform:translateY(-2px); }
.btn-primary .arrow,
.btn-accent .arrow { transition:transform .2s; }
.btn-primary:hover .arrow,
.btn-accent:hover .arrow { transform:translateX(3px); }

.btn-secondary {
  padding:14px 28px; background:transparent; color:var(--dark);
  border:1.5px solid var(--border); border-radius:8px;
  font-family:'Urbanist', sans-serif; font-size: var(--fs-17); font-weight:500;
  letter-spacing:0.02em; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .2s, color .2s;
}
.btn-secondary:hover { border-color:var(--accent); color:var(--accent); }

/* ── FOOTER ── */
footer.footer-v2 {
  background: #0A0A0A; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 72px 40px; gap: 36px; text-align: center;
}
.footer-col-brand { display:flex; flex-direction:column; align-items:center; gap:24px; }
.footer-v2-brand { display:flex; align-items:center; gap:14px; }
.footer-v2-brand img { height:28px; filter:brightness(0) invert(1); opacity:.4; }
.footer-v2-brand-name { font-size: var(--fs-15); color:rgba(255,255,255,.35); letter-spacing:.02em; }
.footer-v2-social { display:flex; gap:18px; }
.footer-v2-social a { font-size: var(--fs-24); color:var(--accent); text-decoration:none; transition:color .2s; }
.footer-v2-social a:hover { color:#5CC996; }
.footer-col-nav { display:flex; flex-direction:column; align-items:center; gap:14px; }
.footer-nav-label { font-size: var(--fs-12); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.footer-v2-nav { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.footer-v2-nav a { font-size: var(--fs-15); color:rgba(255,255,255,.5); text-decoration:none; letter-spacing:.02em; border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:10px 18px; transition:color .2s, border-color .2s; }
.footer-v2-nav a:hover { color:var(--accent); border-color:var(--accent); }
.footer-v2-legal { display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:center; }
.footer-v2-legal a { font-size: var(--fs-13); color:rgba(255,255,255,.2); text-decoration:none; }
.footer-v2-legal a:hover { color:rgba(255,255,255,.5); }
.footer-v2-legal p { font-size: var(--fs-13); color:rgba(255,255,255,.2); }

/* ── ACCESSIBILITÉ ── */
.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; }

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.1s; }
.reveal-d2 { transition-delay:.2s; }

/* ── RESPONSIVE NAV + FOOTER ── */
@media (max-width: 900px) {
  nav { min-width: 220px; padding: 8px 14px; }
  .nav-links {
    display:none; position:fixed; top:72px; left:50%; transform:translateX(-50%);
    flex-direction:column; gap:2px; background:var(--white-t);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:16px;
    box-shadow:0 8px 28px rgba(0,0,0,.10); padding:8px; min-width:220px; z-index:199;
  }
  .nav-links.open { display:flex; }
  .nav-links li { width:100%; }
  .nav-links a { display:block; padding:11px 16px; border-radius:10px; font-size: var(--fs-17); }
  .nav-links a:hover { background:rgba(0,0,0,.04); }
  .nav-burger { display:flex; margin-left:auto; }
  .btn-nav { display:none; }
  footer.footer-v2 { padding:40px 24px; gap:28px; }
}