/* ============================================================
   INTUITION — Product Design Agency
   Charte graphique → tokens, type, base
   ============================================================ */

/* Fonts — self-hosted (charte Intuition) */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Grotesk Variable";
  src: url("fonts/ClashGrotesk-Variable.ttf") format("truetype");
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans Variable";
  src: url("fonts/GeneralSans-Variable.ttf") format("truetype");
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans Variable";
  src: url("fonts/GeneralSans-VariableItalic.ttf") format("truetype");
  font-weight: 200 700; font-style: italic; font-display: swap;
}

:root {
  /* Brand core */
  --green:        #02241C;   /* primary dark green */
  --green-90:     #0a2c24;
  --paper:        #F0F0F0;   /* off-white background */
  --paper-warm:   #f4f4f1;
  --white:        #FFFFFF;
  --ink:          #02241C;

  /* Accents (brand) */
  --lime:         #D8FF79;
  --purple:       #B19BFF;
  --peach:        #FFA87F;
  --whatsapp:     #27D366;

  /* Muted greens / lines */
  --green-soft:   #5B716B;
  --line:         rgba(2,36,28,0.12);
  --line-soft:    rgba(2,36,28,0.07);
  --green-04:     rgba(2,36,28,0.04);
  --green-06:     rgba(2,36,28,0.06);

  /* The "active" accent — overridden by Tweaks */
  --accent:       var(--lime);
  --accent-ink:   var(--green);   /* text/icon color on top of accent */

  /* Type */
  --serif:  "Instrument Serif", Georgia, serif;
  --grotesk:"Clash Grotesk Variable", "Clash Grotesk", system-ui, sans-serif;
  --sans:   "General Sans Variable", "General Sans", system-ui, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(2,36,28,0.04), 0 2px 8px rgba(2,36,28,0.04);
  --shadow-md: 0 4px 24px rgba(2,36,28,0.08), 0 1px 3px rgba(2,36,28,0.05);
  --shadow-lg: 0 24px 64px -16px rgba(2,36,28,0.20), 0 6px 18px rgba(2,36,28,0.08);

  --radius:   18px;
  --radius-lg:28px;
  --maxw:     1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Clash Grotesk variable fallback to non-variable name */
@supports not (font-variation-settings: normal) {
  :root { --grotesk: "Clash Grotesk", system-ui, sans-serif; }
}

/* ---------- Typographic primitives ---------- */
.serif   { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.grotesk { font-family: var(--grotesk); }
.sans    { font-family: var(--sans); }

.eyebrow {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .num {
  font-family: var(--grotesk);
  font-weight: 700;
  opacity: 0.45;
}

/* Section tag like "(01) Constat" used in margins */
.sec-index {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--green);
}

.lead {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(2,36,28,0.78);
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 120px 0; position: relative; }
@media (max-width: 760px){ .section { padding: 72px 0; } }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 15px 26px;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .2s, color .2s, box-shadow .2s;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: #0c3329; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary .arrow {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; flex: 0 0 30px;
  transition: transform .2s;
}
.btn-primary:hover .arrow { transform: translateX(3px) rotate(0deg); }

.btn-outline {
  background: transparent; color: var(--green);
  border: 1.5px solid rgba(2,36,28,0.25);
  padding: 14px 26px;
}
.btn-outline:hover { border-color: var(--green); background: rgba(2,36,28,0.03); transform: translateY(-2px); }

.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.03); }
.btn-accent .arrow {
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--green); color: var(--accent);
  display: grid; place-items: center; flex: 0 0 30px;
  transition: transform .2s;
}
.btn-accent:hover .arrow { transform: translateX(3px); }

.btn-lg { font-size: 18px; padding: 18px 20px 18px 30px; }
.btn-lg .arrow { width: 36px; height: 36px; flex-basis: 36px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Pills / chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  color: var(--green);
}
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }

/* ---------- Form fields ---------- */
.field{width:100%;padding:14px 16px;border-radius:12px;font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--green);background:var(--white);border:1.5px solid var(--line);outline:none;transition:border-color .15s ease}
.field::placeholder{color:rgba(2,36,28,0.42)}
.field:hover{border-color:rgba(2,36,28,0.28)}
.field:focus-visible,.field:focus{border-color:var(--green);outline:3px solid rgba(2,36,28,0.22);outline-offset:1px}
.field.is-error{border-color:var(--peach)}
.field-label{display:block;font-family:var(--sans);font-weight:600;font-size:13.5px;color:rgba(2,36,28,0.75);margin-bottom:7px}

/* ---------- Question titles (diag + qualif) ---------- */
.q-title{font-family:var(--grotesk);font-weight:400;font-size:30px;line-height:1.18;letter-spacing:-0.015em;color:var(--green);margin:0}
.q-title-sm{font-family:var(--grotesk);font-weight:500;font-size:20px;line-height:1.28;letter-spacing:-0.01em;color:var(--green);margin:0}
@media (max-width:600px){.q-title{font-size:25px}}

/* ---------- Panneaux du simulateur ---------- */
.sim-pane{padding:30px 34px 32px;position:relative}
.sim-pane.narrow{max-width:460px;margin:0 auto}
.sim-pane.mid{max-width:620px;margin:0 auto}
@media (max-width:600px){.sim-pane{padding:24px 20px 28px}}

/* ---------- Quiz plein écran ---------- */
body.quiz-locked{overflow:hidden}
.quiz-overlay{position:fixed;inset:0;z-index:900;background:rgba(2,36,28,0.58);backdrop-filter:blur(6px);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;padding:34px 20px;animation:quizFadeIn .3s ease both}
.quiz-overlay .sim-card{width:100%;max-width:680px;margin:auto;animation:quizCardIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes quizFadeIn{from{opacity:0}to{opacity:1}}
@keyframes quizCardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:760px){.quiz-overlay{padding:0}.quiz-overlay .sim-card{max-width:none;min-height:100%;border-radius:0;box-shadow:none}}

/* ---------- Actions grid ---------- */
.act-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.act-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.act-grid.two{grid-template-columns:1fr}}

/* ---------- Hero diagnostic ---------- */
.hero-diag{display:grid;grid-template-columns:1fr;gap:26px}
.hero-diag.wide{grid-template-columns:minmax(260px,340px) 1fr;gap:44px;align-items:center}
@media (max-width:900px){.hero-diag.wide{grid-template-columns:1fr;gap:26px}}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: 0; }
.muted { color: rgba(2,36,28,0.6); }

::selection { background: var(--accent); color: var(--green); }

/* Reveal — contenu toujours visible (pas d'animation gélable qui risquerait de masquer) */
.reveal { opacity: 1; transform: none; }

/* number count animation helper */
.tnum { font-variant-numeric: tabular-nums; }

/* hide scrollbars in marquee */
.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { animation: marquee 34s linear infinite; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

a { color: inherit; }