/* ============================================================
   DIRECTION A — "Le Bleu République"
   Institutional / editorial. Navy-dominant, sober, structured,
   tricolore accents. Feels semi-governmental and trustworthy.
   ============================================================ */

:root {
  --c-bg:#FCF9F2; --c-card:#FFFFFF; --c-ink:#131A33; --c-muted:#5E6885;
  --c-line:#E2E6EF; --c-accent:#C2941F; --c-accent-ink:#0E1430;
  --c-primary:#16204A; --c-primary-ink:#FFFFFF; --radius:14px; --radius-sm:9px;
  --maxw:1180px;
}
body { font-family:var(--font-body); color:var(--c-ink); background:var(--c-bg); line-height:1.55; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.eyebrow { font-family:var(--font-display); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }

/* tricolore rule used as an official accent */
.tricolore { display:inline-block; height:4px; width:54px; border-radius:2px;
  background:linear-gradient(90deg,var(--flag-blue) 0 33.3%,#fff 33.3% 66.6%,var(--flag-red) 66.6% 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.06); }

/* ---------- header ---------- */
.site-header { position:sticky; top:0; z-index:50; transition:background .3s, box-shadow .3s, border-color .3s;
  background:rgba(8,12,30,0); border-bottom:1px solid transparent; }
.site-header.scrolled { background:rgba(14,20,48,.96); border-bottom-color:rgba(255,255,255,.1); box-shadow:0 8px 30px rgba(0,0,0,.18); }
.header-inner { display:flex; align-items:center; gap:24px; height:74px; }
.brand { display:flex; align-items:center; gap:11px; }
.brand img { width:38px; height:38px; }
.brand-name { font-family:var(--font-display); font-weight:700; letter-spacing:.06em; font-size:1.35rem; color:#fff; }
.brand-name b { color:var(--gold-400); font-weight:700; }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:30px; }
.site-nav a { font-family:var(--font-display); font-weight:500; letter-spacing:.03em; font-size:.95rem; color:var(--on-navy-muted); transition:color .15s; }
.site-nav a:hover { color:#fff; }
.lang-switch { display:inline-flex; border:1px solid rgba(255,255,255,.22); border-radius:999px; overflow:hidden; }
.lang-switch button { background:none; border:none; color:var(--on-navy-muted); font-family:var(--font-display); font-weight:600; font-size:.8rem; letter-spacing:.05em; padding:.4em .8em; }
.lang-switch button[aria-pressed=true] { background:var(--gold-400); color:var(--navy-900); }
.header-cta { font-family:var(--font-display); font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size:.82rem;
  padding:.6em 1.15em; border-radius:999px; background:var(--gold-400); color:var(--navy-900); }
.theme-toggle { border:1px solid rgba(255,255,255,.22); color:var(--on-navy-muted); }
.theme-toggle:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-toggle { display:none; }

/* ---------- hero ---------- */
.hero { position:relative; background:radial-gradient(120% 90% at 80% -10%,#1B2550,#080C1E 72%); color:var(--on-navy-strong); overflow:hidden; padding-top:34px; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpath d='M30 2 90 2 120 52 90 102 30 102 0 52Z' fill='none' stroke='%23F5C84B' stroke-opacity='0.05' stroke-width='1.5'/%3E%3C/svg%3E"); background-size:240px 208px; opacity:.6; }
.hero-grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding:48px 0 70px; }
.hero-eyebrow { display:flex; align-items:center; gap:14px; color:var(--gold-400); margin-bottom:22px; }
.hero h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5.2vw,4rem); line-height:1.04; letter-spacing:.005em; margin:0 0 20px; text-wrap:balance; }
.hero h1 .hl { color:var(--gold-400); }
.hero-sub { font-size:clamp(1.05rem,2vw,1.22rem); line-height:1.55; color:var(--on-navy-muted); max-width:50ch; margin:0 0 30px; }
.hero-form { max-width:480px; }
.hero-form .hint { font-size:.86rem; color:var(--on-navy-faint); margin:12px 2px 0; display:flex; align-items:center; gap:8px; }
.hero-trust { display:flex; flex-wrap:wrap; gap:26px; margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); }
.hero-trust .t { display:flex; flex-direction:column; gap:2px; }
.hero-trust .t b { font-family:var(--font-display); font-weight:700; font-size:1.7rem; color:#fff; }
.hero-trust .t span { font-size:.82rem; color:var(--on-navy-muted); }

/* hero phones */
.hero-art { position:relative; justify-self:center; }
.phone { border-radius:34px; background:#0A0E1F; box-shadow:0 0 0 9px #0A0E1F, 0 0 0 11px #2A3358, 0 40px 80px rgba(0,0,0,.5); overflow:hidden; width:264px; }
.phone img { display:block; width:100%; }
.hero-art .phone.front { position:relative; z-index:2; }
.hero-art .phone.back { position:absolute; width:212px; right:-46px; bottom:46px; z-index:1; opacity:.92; transform:rotate(5deg); box-shadow:0 30px 60px rgba(0,0,0,.45); }
.hero-badge { position:absolute; z-index:3; left:-34px; top:40px; background:#fff; color:var(--navy-900); border-radius:14px; padding:12px 15px; box-shadow:0 20px 40px rgba(0,0,0,.3); display:flex; align-items:center; gap:11px; }
.hero-badge .ico { width:38px; height:38px; border-radius:9px; background:var(--green-100); color:var(--green-600); display:flex; align-items:center; justify-content:center; }
.hero-badge b { font-family:var(--font-display); font-weight:700; font-size:1.05rem; display:block; line-height:1.1; }
.hero-badge span { font-size:.74rem; color:var(--c-muted); }

/* ---------- section scaffolding ---------- */
.section { padding:88px 0; }
.section-head { max-width:62ch; margin-bottom:46px; }
.section-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow { color:var(--c-accent); display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.section-head.center .eyebrow { justify-content:center; }
.section-head h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4vw,3rem); line-height:1.08; margin:0 0 14px; letter-spacing:.005em; text-wrap:balance; }
.section-head p { font-size:1.1rem; color:var(--c-muted); margin:0; line-height:1.6; }

/* ---------- themes ---------- */
.themes-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.theme-card { background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); padding:22px; position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.theme-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(19,26,51,.1); border-color:transparent; }
.theme-card .bar { position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--tc,#2E5CC7); }
.theme-card .tnum { font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--c-muted); letter-spacing:.05em; }
.theme-card h3 { font-family:var(--font-display); font-weight:600; font-size:1.18rem; margin:6px 0 6px; color:var(--c-ink); }
.theme-card p { font-size:.92rem; color:var(--c-muted); margin:0; line-height:1.45; }

/* ---------- exam guide ---------- */
.guide { background:var(--navy-900); color:var(--on-navy-strong); }
.guide .section-head h2 { color:#fff; }
.guide .section-head .eyebrow { color:var(--gold-400); }
.guide .section-head p { color:var(--on-navy-muted); }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.guide-step { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:28px 26px; }
.guide-step .gn { font-family:var(--font-display); font-weight:700; font-size:2.4rem; color:var(--gold-400); line-height:1; }
.guide-step h3 { font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin:14px 0 10px; color:#fff; }
.guide-step p { font-size:1rem; color:var(--on-navy-muted); margin:0; line-height:1.55; }
.guide-note { margin-top:34px; display:flex; gap:14px; align-items:flex-start; background:rgba(245,200,75,.08); border:1px solid rgba(245,200,75,.25); border-radius:var(--radius); padding:20px 22px; }
.guide-note .ico { flex:0 0 auto; color:var(--gold-400); }
.guide-note p { margin:0; font-size:.98rem; color:var(--on-navy-strong); line-height:1.55; }
.guide-note a { color:var(--gold-400); text-decoration:underline; text-underline-offset:2px; }

/* ---------- quiz section ---------- */
.quiz-section { background:linear-gradient(180deg,var(--cream-100),var(--cream-50)); }
.quiz-card { background:var(--c-card); border:1px solid var(--c-line); border-radius:22px; padding:40px; max-width:720px; margin:0 auto; box-shadow:0 30px 70px rgba(19,26,51,.1); }

/* ---------- modes strip ---------- */
.modes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mode { display:flex; gap:15px; padding:24px; background:var(--c-card); border:1px solid var(--c-line); border-radius:var(--radius); }
.mode .ico { flex:0 0 auto; width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--blue-50); color:var(--blue-500); }
.mode h3 { font-family:var(--font-display); font-weight:600; font-size:1.12rem; margin:2px 0 5px; }
.mode p { font-size:.92rem; color:var(--c-muted); margin:0; line-height:1.45; }
.mode-feature { grid-column:1 / -1; align-items:center; background:linear-gradient(120deg,#fff,#FCF6E6); border-color:rgba(201,148,31,.34); }
.mode-feature .ico { width:56px; height:56px; background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); color:var(--navy-900); }
.mode-feature h3 { font-size:1.45rem; }
.mode-feature p { font-size:1.02rem; }

/* ---------- faq ---------- */
.faq-wrap { max-width:820px; margin:0 auto; }

/* ---------- final cta ---------- */
.cta { background:radial-gradient(120% 120% at 50% 0,#1B2550,#080C1E 72%); color:var(--on-navy-strong); text-align:center; }
.cta h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.08; margin:0 auto 16px; max-width:18ch; }
.cta p { font-size:1.15rem; color:var(--on-navy-muted); max-width:52ch; margin:0 auto 32px; }
.cta .waitlist-form { max-width:480px; margin:0 auto; }
.cta .hint { font-size:.86rem; color:var(--on-navy-faint); margin-top:14px; }

/* ---------- footer ---------- */
.site-footer { background:#070A18; color:var(--on-navy-muted); padding:60px 0 34px; }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand .brand-name { font-size:1.4rem; }
.footer-brand p { margin:16px 0 0; font-size:.95rem; max-width:38ch; line-height:1.6; }
.footer-col h4 { font-family:var(--font-display); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; color:#fff; margin:0 0 16px; }
.footer-col a { display:block; font-size:.95rem; padding:6px 0; color:var(--on-navy-muted); }
.footer-col a:hover { color:#fff; }
.footer-legal { margin-top:30px; display:flex; flex-direction:column; gap:14px; }
.footer-disclaimer { font-size:.86rem; line-height:1.6; color:var(--on-navy-faint); max-width:80ch; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:16px 18px; }
.footer-base { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.85rem; color:var(--on-navy-faint); }

/* ---------- responsive ---------- */
@media (max-width:920px) {
  .hero-grid { grid-template-columns:1fr; gap:10px; padding-bottom:50px; }
  .hero-art { margin-top:30px; }
  .themes-grid { grid-template-columns:repeat(2,1fr); }
  .guide-grid, .modes { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:680px) {
  .site-nav { position:fixed; inset:0 0 0 auto; width:min(82vw,330px); flex-direction:column; align-items:flex-start; gap:8px;
    background:#0E1430; padding:90px 28px 28px; transform:translateX(100%); transition:transform .3s; z-index:45; }
  .site-nav.open { transform:none; box-shadow:-20px 0 50px rgba(0,0,0,.4); }
  .site-nav a { font-size:1.1rem; padding:8px 0; }
  .nav-toggle { display:inline-flex; flex-direction:column; gap:5px; margin-left:auto; background:none; border:none; padding:8px; z-index:46; }
  .nav-toggle span { width:24px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
  .header-cta { display:none; }
  .quiz-card { padding:26px 20px; }
  .section { padding:62px 0; }
  .wrap { padding:0 20px; }
}