/* ============================================================
   KOMKOMBOX — SITE INTERNET
   Charte v1.0 · mobile-first · scroll storytelling
   ============================================================ */

:root {
  /* ---- BRAND (charte v1.0) ---- */
  --orange:      #F5A623;   /* CTA, progression */
  --orange-deep: #E8941A;
  --orange-soft: #FDEFD6;
  --anthracite:  #2D3436;   /* titres */
  --ink-2:       #4A5459;
  --ink-soft:    #6B757A;
  --ink-faint:   #97A0A4;
  --cream:       #FAF9F2;   /* fonds */
  --cream-2:     #F3F0E6;
  --white:       #FFFFFF;

  /* gold/amber pour les grands chiffres-stats (mockup) */
  --gold:        #F6AD1C;
  --gold-2:      #F8B400;

  /* fond « aurore » sage-crème (mockup d'accueil) */
  --aurore-1:    #EAF4E0;
  --aurore-2:    #EEF1DD;
  --aurore-3:    #F1EFE0;
  --aurore-blue: #E6E9E6;
  --app-bg: linear-gradient(170deg, #E9F4DF 0%, #EEF1DC 38%, #F1EEDE 64%, #E8E9E4 100%);
  --peach-card:  linear-gradient(155deg, #FFF6E9 0%, #FDEFD8 100%);
  --peach-soft:  linear-gradient(160deg, #FFF8EE 0%, #FCEEDA 100%);

  /* secondaires */
  --corail:      #E84C3D;
  --vert:        #7CB342;
  --bleu:        #1E88E5;
  --turquoise:   #16B6C2;
  --violet:      #8E6FC4;
  --rose:        #E8689B;

  --corail-bg:   #FCEAE8;
  --vert-bg:     #EDF5E4;
  --bleu-bg:     #E4F0FB;
  --turquoise-bg:#E0F4F6;
  --violet-bg:   #EFE9F7;
  --orange-bg:   #FDEFD6;

  --line:        #E9E5D8;
  --line-soft:   #F0ECE0;
  --peach-line:  #F3DcB6;

  /* type */
  --display: "DM Sans", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;

  /* radii (charte: cartes 16, boutons 28) */
  --r-card: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-btn: 28px;
  --r-pill: 999px;

  /* shadow — soft, natural, never glowy */
  --sh-1: 0 2px 8px rgba(45,52,54,.05);
  --sh-2: 0 8px 24px rgba(45,52,54,.07);
  --sh-3: 0 18px 44px rgba(45,52,54,.10);

  /* layout */
  --maxw: 1180px;
  --pad: 22px;
  --nav-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--body); color: var(--ink-2);
  background: var(--app-bg); background-attachment: fixed; font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--anthracite); margin: 0;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
p { margin: 0; }
::selection { background: var(--orange); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: 72px 0; }
.center { text-align: center; }

/* ---- TYPE SCALE (mobile-first) ---- */
.eyebrow { font-family: var(--body); font-weight: 800; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); }
.h1 { font-size: 34px; line-height: 1.08; }
.h2 { font-size: 27px; line-height: 1.12; }
.h3 { font-size: 20px; }
.lead { font-size: 18px; line-height: 1.6; color: var(--ink-soft); font-weight: 500; }
.kicker { font-size: 15px; color: var(--ink-soft); }
.accent { color: var(--orange); }
.balance { text-wrap: balance; }

@media (min-width: 760px) {
  body { font-size: 18px; }
  .section { padding: 104px 0; }
  .h1 { font-size: 60px; }
  .h2 { font-size: 42px; }
  .h3 { font-size: 23px; }
  .lead { font-size: 21px; }
}

/* ---- BUTTONS ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 800; font-size: 16px; cursor: pointer;
  border: 0; border-radius: var(--r-btn); padding: 0 26px; height: 54px;
  transition: transform .14s ease, background .16s, color .16s, border-color .16s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-deep); }
.btn--dark { background: var(--anthracite); color: #fff; }
.btn--dark:hover { background: #1d2224; }
.btn--outline { background: transparent; color: var(--anthracite); border: 1.6px solid var(--line); }
.btn--outline:hover { border-color: var(--orange); color: var(--orange); }
.btn--ghost-light { background: rgba(255,255,255,.1); color: #fff; border: 1.6px solid rgba(255,255,255,.32); }
.btn--ghost-light:hover { background: rgba(255,255,255,.18); }
.btn--block { width: 100%; }
.btn--sm { height: 46px; font-size: 15px; padding: 0 20px; }
.btn svg { width: 18px; height: 18px; }

/* ---- NAV (barre flottante en pilule) ---- */
.nav { position: sticky; top: 0; z-index: 100; height: 84px;
  display: flex; align-items: center; transition: padding .2s; }
.nav__row { display: flex; align-items: center; gap: 18px; width: 100%;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(140%) blur(14px);
  border-radius: var(--r-pill); padding: 12px 14px 12px 26px;
  box-shadow: 0 6px 22px rgba(45,52,54,.07), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: box-shadow .2s; }
.nav.is-scrolled .nav__row { box-shadow: 0 10px 30px rgba(45,52,54,.12); }
.nav__logo { height: 26px; }
.nav__links { display: none; gap: 30px; margin: 0 auto; }
.nav__links a { font-weight: 700; font-size: 15.5px; color: var(--ink-2); white-space: nowrap; }
.nav__links a:hover, .nav__links a.is-on { color: var(--orange); }
.nav__cta { display: none; }
.nav__burger { margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent;
  display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; }
.nav__burger span { width: 22px; height: 2.4px; background: var(--anthracite); border-radius: 2px; transition: .2s; }
@media (min-width: 940px) {
  .nav__links { display: flex; }
  .nav__burger { display: none; }
  .nav__cta { display: inline-flex; margin-left: 0; }
}

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 99; background: var(--cream);
  padding: calc(var(--nav-h) + 18px) var(--pad) 32px; display: flex; flex-direction: column; gap: 6px;
  transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .25s; }
.drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.drawer a { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--anthracite);
  padding: 14px 4px; border-bottom: 1px solid var(--line-soft); }
.drawer .btn { margin-top: 22px; }
@media (min-width: 940px) { .drawer { display: none; } }

/* ---- REVEAL ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- generic cards / chips ---- */
.card { background: var(--white); border-radius: var(--r-card); box-shadow: var(--sh-1); }
.chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px;
  padding: 7px 14px; border-radius: var(--r-pill); background: var(--white); color: var(--ink-2); box-shadow: var(--sh-1); }
.chip svg { width: 15px; height: 15px; }