/* Citoyenet site — shared component styling for the JS-generated parts
   (teaser quiz, FAQ, waitlist form, buttons). Each direction sets the
   theme variables below, so these components match its look automatically.

   Theme contract (set on :root in each dir-*.css):
   --c-bg, --c-card, --c-ink, --c-muted, --c-line, --c-accent,
   --c-accent-ink, --c-primary, --c-primary-ink, --radius, --radius-sm */

:root {
  --c-bg:#FCF9F2; --c-card:#FFFFFF; --c-ink:#131A33; --c-muted:#5E6885;
  --c-line:#E2E6EF; --c-accent:#E9B23C; --c-accent-ink:#0E1430;
  --c-primary:#2E5CC7; --c-primary-ink:#FFFFFF; --radius:16px; --radius-sm:10px;
}

/* ---- buttons ---- */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.85em 1.5em; border:none; border-radius:999px;
  background:var(--c-primary); color:var(--c-primary-ink); cursor:pointer;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover { transform:translateY(-1px); }
.btn-gold { background:linear-gradient(135deg,var(--gold-400),var(--gold-500)); color:var(--navy-900); }

/* ---- theme toggle (structure; colors set per direction) ---- */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid var(--c-line); background:transparent; color:var(--c-muted); transition:color .15s, border-color .15s, background .15s; }
.theme-toggle svg { width:18px; height:18px; }
html[data-theme="dark"] .theme-toggle .ico-moon { display:none; }
html[data-theme="light"] .theme-toggle .ico-sun { display:none; }

/* ---- header theming, keyed on data-theme ----
   Authoritative header colors for both modes. Higher specificity than the
   single-class header rules in dir-a.css / dir-b.css, so the header is always
   legible no matter which direction stylesheet is active. */
/* LIGHT (Direction B — header over cream): dark text, light chrome */
html[data-theme="light"] .brand-name { color:#13193A; }
html[data-theme="light"] .brand-name b { color:#9E7613; }
html[data-theme="light"] .site-nav a { color:#5E6885; }
html[data-theme="light"] .site-nav a:hover { color:#13193A; }
html[data-theme="light"] .lang-switch { border-color:#EAE3D4; background:#fff; }
html[data-theme="light"] .lang-switch button { color:#5E6885; }
html[data-theme="light"] .lang-switch button[aria-pressed="true"] { background:#13193A; color:#fff; }
html[data-theme="light"] .theme-toggle { color:#5E6885; border-color:#EAE3D4; background:#fff; }
html[data-theme="light"] .theme-toggle:hover { color:#13193A; }
html[data-theme="light"] .site-nav a.header-cta { background:#13193A; color:#fff; }
html[data-theme="light"] .nav-toggle span { background:#13193A; }
/* DARK (Direction A — header over navy): light text, gold accents */
/* Header needs its own dark background: the sticky header sits above the dark
   hero in flow, so a transparent background would reveal the cream body band
   and make the white logo/nav invisible. Tint it to blend with the hero. */
/* Solid at rest: the header sits in flow above the hero, so anything translucent
   shows the cream body through it and reads as grey. */
html[data-theme="dark"] .site-header { background:#0E1430; }
/* The frosted blur lives on a pseudo-element, never on .site-header itself:
   backdrop-filter makes an element the containing block for its position:fixed
   descendants, so the mobile menu drawer would size to the header (opening as a
   ~120px strip with links spilling over the page) and, closed, hang off the right
   edge and let the page scroll sideways. */
.site-header::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
html[data-theme="dark"] .site-header.scrolled { background:rgba(14,20,48,.96); border-bottom:1px solid rgba(255,255,255,.1); box-shadow:0 8px 30px rgba(0,0,0,.18); }
html[data-theme="dark"] .brand-name { color:#fff; }
html[data-theme="dark"] .brand-name b { color:#F5C84B; }
html[data-theme="dark"] .site-nav a { color:#A9B4D6; }
html[data-theme="dark"] .site-nav a:hover { color:#fff; }
html[data-theme="dark"] .lang-switch { border-color:rgba(255,255,255,.22); background:transparent; }
html[data-theme="dark"] .lang-switch button { color:#A9B4D6; }
html[data-theme="dark"] .lang-switch button[aria-pressed="true"] { background:#F5C84B; color:#0E1430; }
html[data-theme="dark"] .theme-toggle { color:#A9B4D6; border-color:rgba(255,255,255,.22); background:transparent; }
html[data-theme="dark"] .theme-toggle:hover { color:#fff; background:rgba(255,255,255,.08); }
html[data-theme="dark"] .site-nav a.header-cta { background:linear-gradient(135deg,#F5C84B,#E9B23C); color:#0E1430; }
html[data-theme="dark"] .nav-toggle span { background:#fff; }

/* ---- teaser quiz ---- */
.tq-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.tq-cat { font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--cat-valeurs); padding:.4em .8em; border-radius:999px; }
.tq-cat[data-cat="Europe"]{ background:var(--cat-europe); }
.tq-cat[data-cat="laicite"]{ background:var(--cat-laicite); }
.tq-cat[data-cat="valeurs"]{ background:var(--cat-valeurs); }
.tq-cat[data-cat="institutions"]{ background:var(--cat-institutions); }
.tq-count { font-family:var(--font-display); font-weight:500; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-muted); }
.tq-q { font-family:var(--font-display); font-weight:600; font-size:clamp(1.25rem,3vw,1.7rem); line-height:1.18; color:var(--c-ink); margin:0 0 22px; text-wrap:balance; }
.tq-opts { display:flex; flex-direction:column; gap:11px; }
.tq-opt { display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px 18px; border:2px solid var(--c-line); border-radius:var(--radius-sm); background:var(--c-card);
  font-family:var(--font-body); font-size:1.05rem; color:var(--c-ink); transition:border-color .15s, background .15s, transform .1s; }
.tq-opt:hover:not(.done) { border-color:var(--c-primary); transform:translateX(2px); }
.tq-opt-mark { flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--c-line); position:relative; transition:.15s; }
.tq-opt.correct { border-color:var(--green-500); background:var(--green-100); }
.tq-opt.correct .tq-opt-mark { border-color:var(--green-500); background:var(--green-500); }
.tq-opt.correct .tq-opt-mark::after { content:""; position:absolute; left:7px; top:3px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.tq-opt.wrong { border-color:var(--red-500); background:#FCE3E1; }
.tq-opt.wrong .tq-opt-mark { border-color:var(--red-500); background:var(--red-500); }
.tq-opt.wrong .tq-opt-mark::after { content:""; position:absolute; inset:0; }
.tq-opt.done { cursor:default; }
.tq-feedback { margin-top:18px; padding:15px 17px; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:.98rem; line-height:1.5; color:var(--c-ink); }
.tq-feedback.good { background:var(--green-100); border-left:4px solid var(--green-500); }
.tq-feedback.bad { background:#FCE3E1; border-left:4px solid var(--red-500); }
.tq-feedback strong { font-weight:700; }
.tq-actions { margin-top:20px; display:flex; justify-content:flex-end; }
.tq-result { text-align:center; padding:10px 0; }
.tq-score { display:inline-flex; align-items:baseline; gap:6px; }
.tq-score-num { font-family:var(--font-display); font-weight:700; font-size:4rem; line-height:1; color:var(--c-accent); }
.tq-score-den { font-family:var(--font-display); font-weight:600; font-size:1.6rem; color:var(--c-muted); }
.tq-res-label { font-family:var(--font-display); font-weight:500; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem; color:var(--c-muted); margin:8px 0 4px; }
.tq-res-title { font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,3.4vw,2rem); line-height:1.12; color:var(--c-ink); margin:6px 0 12px; text-wrap:balance; }
.tq-res-body { font-family:var(--font-body); font-size:1.02rem; line-height:1.55; color:var(--c-muted); max-width:46ch; margin:0 auto 24px; }
.tq-res-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; }
.tq-retry { background:none; border:none; font-family:var(--font-display); font-weight:600; letter-spacing:.04em; text-transform:uppercase; font-size:.9rem; color:var(--c-muted); text-decoration:underline; text-underline-offset:3px; }
.tq-retry:hover { color:var(--c-ink); }

/* ---- FAQ ---- */
.faq-item { border-bottom:1px solid var(--c-line); }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left;
  background:none; border:none; padding:22px 4px; font-family:var(--font-display); font-weight:600; font-size:clamp(1.05rem,2.2vw,1.25rem); color:var(--c-ink); }
.faq-q .faq-ico { flex:0 0 auto; width:26px; height:26px; position:relative; transition:transform .25s; }
.faq-q .faq-ico::before, .faq-q .faq-ico::after { content:""; position:absolute; background:var(--c-accent); border-radius:2px; }
.faq-q .faq-ico::before { left:3px; right:3px; top:11px; height:3px; }
.faq-q .faq-ico::after { top:3px; bottom:3px; left:11px; width:3px; transition:opacity .2s, transform .25s; }
.faq-item.open .faq-ico::after { opacity:0; transform:rotate(90deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-a { max-height:340px; }
.faq-a-inner { padding:0 4px 24px; font-family:var(--font-body); font-size:1.04rem; line-height:1.6; color:var(--c-muted); max-width:68ch; }

/* ---- waitlist form ---- */
.waitlist-form { display:flex; gap:10px; flex-wrap:wrap; }
.waitlist-form input[type=email] {
  flex:1 1 240px; min-width:0; padding:.95em 1.1em; border:2px solid var(--c-line); border-radius:999px;
  font-family:var(--font-body); font-size:1.02rem; color:var(--c-ink); background:var(--c-card); }
.waitlist-form input[type=email]:focus { outline:none; border-color:var(--c-primary); }
.waitlist-form button { flex:0 0 auto; }
.waitlist-done { font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--green-600);
  display:flex; align-items:center; gap:10px; }
.waitlist-done::before { content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--green-500); color:#fff; font-size:1rem; }
/* the hint and any error take their own row under the field + button */
.waitlist-form .hint, .waitlist-form .waitlist-error { flex:1 0 100%; }
.waitlist-error { margin:12px 2px 0; font-size:.92rem; font-weight:600; color:var(--red-500); }
.waitlist-form button[disabled] { opacity:.65; cursor:progress; }
/* honeypot: off-screen for people, filled in by bots */
.cta-actions { position:relative; }
.waitlist-form .hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; opacity:0; }