/* ===========================================================
   Lamy du Clic — style.css
   Tokens: nuit (vigilance) -> jour (proximité), motif pixel-dissolve
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --ink: #0D2036;        /* fond nuit (hero, footer) */
  --navy: #143251;       /* marque, texte sur clair */
  --navy-soft: #2C4A6E;
  --gold: #CB9032;
  --gold-light: #E3B65C;
  --cream: #F6F1E4;      /* fond jour */
  --paper: #FFFFFF;
  --ink-text: #23303D;
  --stone: #DED5BE;
  --mist: #9FB3C8;

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink-text);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; display:block; }
a { color: inherit; text-decoration:none; }
ul { list-style:none; }
.wrap { max-width: 1120px; margin:0 auto; padding: 0 32px; }

h1,h2,h3 { font-family: var(--display); color: var(--navy); font-weight:700; line-height:1.15; letter-spacing:-0.01em; }
h2 { font-size: 34px; }
h3 { font-size: 21px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.eyebrow::before { content:""; width:8px; height:8px; background: var(--gold); display:inline-block; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:10px; font-family: var(--display); font-weight:600; font-size:15px; padding: 14px 26px; border-radius: 8px; transition: transform .15s ease, box-shadow .15s ease; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-outline { border: 2px solid var(--mist); color: var(--paper); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); transform: translateY(-2px); }

/* ---------- Header ---------- */
header.site { background: var(--cream); border-bottom: 1px solid var(--stone); position: sticky; top:0; z-index: 50; }
header.site .bar { display:flex; align-items:center; justify-content:space-between; padding: 16px 32px; max-width:1120px; margin:0 auto; }
header.site .brand { display:flex; align-items:center; gap:12px; }
.brand-icon { height:52px; width:auto; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-word { font-family: var(--display); font-size:22px; font-weight:700; }
.brand-word .navy { color: var(--navy); }
.brand-word .gold { color: var(--gold); margin-left:0.1em; }
.brand-tag { font-family: var(--mono); font-size:10.5px; letter-spacing:0.08em; color:#8a7648; text-transform:uppercase; margin-top:3px; }
nav.main { display:flex; align-items:center; gap: 30px; }
nav.main a { font-family: var(--display); font-size:14px; font-weight:600; color: var(--navy); display:flex; align-items:center; gap:8px; padding: 6px 0; }
nav.main a .px { width:6px; height:6px; background: var(--gold); opacity:0; transition: opacity .15s; }
nav.main a.active .px, nav.main a:hover .px { opacity:1; }
nav.main a.active, nav.main a:hover { color: var(--gold); }
.nav-cta { display:flex; align-items:center; gap:14px; }
.nav-cta .btn { padding: 10px 20px; font-size:14px; }
.burger { display:none; }

@media (max-width: 860px) {
  nav.main { position: fixed; inset: 64px 0 0 0; background: var(--cream); flex-direction:column; align-items:flex-start; padding: 30px 32px; gap:22px; transform: translateX(100%); transition: transform .25s ease; }
  nav.main.open { transform: translateX(0); }
  .burger { display:block; background:none; border:none; font-size:26px; color:var(--navy); }
  .nav-cta .btn-outline-header { display:none; }
}

/* ---------- Hero (nuit) ---------- */
.hero { background: var(--ink); color: #fff; position:relative; overflow:hidden; }
.hero .wrap { padding: 90px 32px 100px; display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items:center; }
.hero h1 { color:#fff; font-size: 52px; }
.hero h1 .gold { color: var(--gold-light); }
.hero p.lead { color: var(--mist); font-size:18px; margin-top:22px; max-width: 480px; }
.hero .ctas { display:flex; gap:16px; margin-top: 36px; flex-wrap:wrap; }
.hero .badges { display:flex; gap:22px; margin-top: 54px; flex-wrap:wrap; }
.hero .badges span { font-family: var(--mono); font-size:12px; color: var(--mist); border:1px solid rgba(159,179,200,0.3); padding:8px 14px; border-radius:20px; }
.hero .art { position:relative; }
.hero .art svg { width:100%; height:auto; }

/* ---------- Pixel divider (signature) ---------- */
.pixel-divider { height: 90px; position:relative; background: var(--cream); }
.pixel-divider svg { position:absolute; inset:0; width:100%; height:100%; }

/* ---------- Sections (jour) ---------- */
section { padding: 90px 0; }
section.tight { padding: 60px 0; }
.section-head { max-width: 640px; margin-bottom: 54px; }
.section-head p { color:#4a5a6a; font-size:17px; margin-top:14px; }

.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:center; }

.card { background: var(--paper); border:1px solid var(--stone); border-radius: 14px; padding: 34px 30px; }
.card .num { font-family: var(--mono); font-size:13px; color: var(--gold); margin-bottom:16px; display:block; }
.card h3 { margin-bottom:12px; }
.card p { color:#4a5a6a; font-size:15px; }
.card ul { margin-top:16px; }
.card ul li { font-size:14px; color:#3a4552; padding-left:20px; position:relative; margin-bottom:8px; }
.card ul li::before { content:"→"; position:absolute; left:0; color:var(--gold); }

/* ---------- Dark band ---------- */
.band-dark { background: var(--navy); color:#fff; }
.band-dark h2, .band-dark h3 { color:#fff; }
.band-dark .section-head p { color: var(--mist); }

/* ---------- Stat / credential strip ---------- */
.stats { display:flex; gap:0; border-top:1px solid var(--stone); border-bottom:1px solid var(--stone); }
.stats .stat { flex:1; padding: 30px 20px; border-right:1px solid var(--stone); }
.stats .stat:last-child { border-right:none; }
.stats .stat .n { font-family: var(--display); font-size:28px; color:var(--navy); font-weight:700; }
.stats .stat .l { font-family: var(--mono); font-size:12px; color:#6b7580; margin-top:6px; letter-spacing:0.03em; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--gold); text-align:center; padding: 70px 32px; }
.cta-band h2 { color: var(--ink); }
.cta-band p { color:#4a3a10; margin-top:12px; font-size:17px; }
.cta-band .ctas { margin-top: 30px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
footer.site { background: var(--ink); color: var(--mist); padding: 60px 0 30px; }
footer.site .fgrid { display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.fbrand-card { display:inline-block; background:#ffffff; border-radius:12px; padding:8px 14px; margin-bottom:18px; }
.fbrand-classic { height:120px; width:auto; display:block; }
footer.site .fbrand p { font-size:14px; max-width:280px; }
footer.site h4 { font-family: var(--display); color:#fff; font-size:14px; margin-bottom:16px; letter-spacing:0.02em; }
footer.site ul li { margin-bottom:10px; font-size:14px; }
footer.site ul li a:hover { color: var(--gold-light); }
footer.site .fbottom { border-top:1px solid rgba(159,179,200,0.2); padding-top:24px; font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; color:#6b7f96; }
.ph { color:#e3a4a4; font-style:italic; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 20px; }
.form-field label { display:block; font-family: var(--display); font-size:13px; font-weight:600; color: var(--navy); margin-bottom:8px; }
.form-field input, .form-field textarea { width:100%; padding: 13px 16px; border:1.5px solid var(--stone); border-radius:8px; font-family:var(--body); font-size:15px; background:#fff; color:var(--ink-text); }
.form-field input:focus, .form-field textarea:focus { outline:none; border-color: var(--gold); }
.form-note { font-size:13px; color:#6b7580; margin-top: 18px; }

/* Accessibility: visible focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset:2px; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; padding-top:50px; }
  .hero h1 { font-size: 38px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { flex-direction:column; }
  .stats .stat { border-right:none; border-bottom:1px solid var(--stone); }
  footer.site .fgrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior:auto !important; }
}

/* ---------- Scroll reveal ---------- */
/* Visible by default — JS adds .reveal-armed only once it's ready to animate, so content never depends on JS to be visible. */
.reveal.reveal-armed { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.reveal-armed.in { opacity: 1; transform: translateY(0); }
.reveal-1.in { transition-delay: .08s; }
.reveal-2.in { transition-delay: .16s; }
.reveal-3.in { transition-delay: .24s; }
.grid-3 .reveal:nth-child(2) { transition-delay: .1s; }
.grid-3 .reveal:nth-child(3) { transition-delay: .2s; }

/* ---------- Owl eye tracking ---------- */
.owl-eye { transition: transform .05s linear; transform-box: fill-box; transform-origin: center; }

/* ---------- Password meter ---------- */
.pw-tool { background: var(--paper); border:1px solid var(--stone); border-radius:14px; padding:32px; }
.pw-tool input { width:100%; padding:14px 16px; border:1.5px solid var(--stone); border-radius:8px; font-family:var(--mono); font-size:16px; letter-spacing:0.02em; }
.pw-tool input:focus { outline:none; border-color:var(--gold); }
.pw-meter { height:8px; background:#EDE7D8; border-radius:4px; margin-top:16px; overflow:hidden; }
.pw-meter-fill { height:100%; width:0%; border-radius:4px; transition: width .3s ease, background .3s ease; }
.pw-verdict { font-family:var(--display); font-weight:600; font-size:15px; margin-top:12px; color:var(--navy); }
.pw-tips { margin-top:14px; font-size:13.5px; color:#6b7580; }
.pw-tips li { padding-left:18px; position:relative; margin-bottom:6px; }
.pw-tips li::before { content:"—"; position:absolute; left:0; color:var(--gold); }
.pw-time { font-family:var(--mono); font-size:13px; color:#6b7580; margin-top:6px; }

/* ---------- Quiz ---------- */
.quiz-card { background: var(--paper); border:1px solid var(--stone); border-radius:14px; padding:30px; }
.quiz-progress { font-family:var(--mono); font-size:12px; color:#6b7580; letter-spacing:0.05em; margin-bottom:14px; }
.quiz-msg { background:#fdf6e8; border:1px solid var(--stone); border-radius:10px; padding:16px 20px; margin-bottom:20px; font-size:15px; line-height:1.55; }
.quiz-options { display:flex; gap:14px; flex-wrap:wrap; }
.quiz-btn { font-family:var(--display); font-weight:600; font-size:14px; padding:12px 22px; border-radius:8px; border:2px solid var(--navy); color:var(--navy); background:none; cursor:pointer; transition: background .15s, color .15s; }
.quiz-btn:hover { background:var(--navy); color:#fff; }
.quiz-feedback { margin-top:18px; padding:14px 18px; border-radius:10px; font-size:14.5px; display:none; }
.quiz-feedback.show { display:block; }
.quiz-feedback.correct { background:#e9f5ec; color:#1e6b3a; border:1px solid #b7e0c3; }
.quiz-feedback.wrong { background:#fbeaea; color:#a02a2a; border:1px solid #f0c2c2; }
.quiz-score { text-align:center; padding:30px; }
.quiz-score .big { font-family:var(--display); font-size:48px; font-weight:700; color:var(--navy); }
.quiz-restart { margin-top:18px; }

/* ---------- Map ---------- */
#map { height:340px; border-radius:14px; border:1px solid var(--stone); }
.leaflet-popup-content { font-family: var(--body); font-size:14px; }