/* ========== Nova Fide — Style global unifié ========== */
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;800&family=Inter:wght@400;500;600;700&display=swap");

/* Thème */
:root{
  --bg:#F5F7FB; --panel:#FFFFFF; --ink:#0F172A; --muted:#5B6B83;
  --primary:#0F1B33; --accent:#3557FF; --gold:#C8A951;
  --ring:#A5B4FC;
  --shadow:0 12px 30px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.06);
  --radius:18px; --radius-lg:26px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 10% -10%, #ECF1FF 0%, transparent 60%), var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:Poppins,Inter,ui-sans-serif; margin:0 0 .5rem}
h1{font-size:clamp(32px,5vw,52px); line-height:1.08}
h2{font-size:clamp(24px,3.2vw,34px)}
h3{font-size:20px}
p{line-height:1.75; margin:.2rem 0 1rem}
a{color:inherit; text-decoration:none}
.lead{color:var(--muted); max-width:72ch}

/* Layout */
.container{max-width:1180px; margin:0 auto; padding:0 20px}
.section{padding:20px 0 40px}
.grid{display:grid; gap:20px; grid-template-columns:repeat(12,1fr)}
.col-12{grid-column:span 12} .col-8{grid-column:span 8} .col-6{grid-column:span 6} .col-4{grid-column:span 4}
@media(max-width:980px){.col-8,.col-6,.col-4{grid-column:span 12}}

/* Header */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  border-bottom:1px solid rgba(15,23,42,.06)
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--primary)}
.brand-badge{width:36px; height:36px; border-radius:12px; background:#fff; box-shadow:var(--shadow); display:grid; place-items:center}
.menu{display:flex; gap:24px; align-items:center}
.menu a{opacity:.92}
.menu a.active{font-weight:700; color:var(--primary)}
.btn-don{padding:10px 16px; border-radius:999px; background:var(--primary); color:#fff; font-weight:700}

/* Hero */
.hero{padding:44px 0 18px}

/* Cards */
.card{
  background:var(--panel);
  border:1px solid rgba(15,23,42,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:20px;
  display:flex; flex-direction:column; gap:10px;
}
.card h3{color:var(--primary)}
.card p{color:var(--ink)}
.card .muted{color:var(--muted)}

/* Tags & Pills */
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{font-size:12px; padding:4px 8px; border-radius:999px; background:#F8FAFF; border:1px solid rgba(15,23,42,.12); font-weight:700}
.pill{
  border:1px solid rgba(15,23,42,.12); background:#fff; padding:9px 13px;
  border-radius:999px; font-weight:700; cursor:pointer; box-shadow:var(--shadow);
  transition:transform .18s ease, background .18s ease;
}
.pill:hover{transform:translateY(-2px)}
.pill.active{background:var(--accent); color:#fff; border-color:transparent}

/* Buttons */
.btn{
  display:inline-block; padding:12px 16px; border-radius:14px; font-weight:700;
  background:#fff; border:1px solid rgba(15,23,42,.12); box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent}
.btn.link{background:transparent; border-color:transparent; box-shadow:none; padding:0}

/* Inputs / Search */
.search{flex:1 1 280px; display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-radius:999px; background:#fff; box-shadow:var(--shadow); border:1px solid rgba(15,23,42,.08)}
.search input{border:none; outline:none; flex:1; font-size:15px; background:transparent}
input,textarea,select{
  width:100%; padding:12px; border-radius:12px; border:1px solid rgba(15,23,42,.12); font:inherit; background:#fff;
}
textarea{min-height:110px; resize:vertical}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* Accordéons */
.acc{border:1px solid rgba(15,23,42,.1); border-radius:14px; background:#fff}
.acc + .acc{margin-top:10px}
.acc-h{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; cursor:pointer; font-weight:800; color:var(--primary)}
.acc-h:hover{background:#F6F8FF}
.acc-c{max-height:0; overflow:hidden; border-top:1px dashed rgba(15,23,42,.12); padding:0 14px;
  transition:max-height .25s ease, padding .25s ease, opacity .25s ease; opacity:.6}
.acc.open .acc-c{max-height:700px; padding:12px 14px; opacity:1}
.chev{width:12px; height:12px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .25s}
.acc.open .chev{transform:rotate(-135deg)}

/* Helpers */
.kicker{font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:#6b7280}
.quick{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
.quick a{background:#fff; border:1px solid rgba(15,23,42,.12); border-radius:999px; padding:6px 10px; font-weight:700; box-shadow:var(--shadow)}
.hr{height:1px; background:rgba(15,23,42,.09); margin:28px 0}
.center{text-align:center} .muted{color:var(--muted)}
.hidden{display:none!important}

/* Découvrir (petits réglages spécifiques) */
.discover .toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:22px 0 8px}
.discover .section-title{margin:28px 0 10px; color:var(--primary)}
.discover .card .more{margin-top:6px; padding-top:8px; border-top:1px dashed rgba(15,23,42,.12)}

/* ===================== THEME SOMBRE ===================== */
/* Palette sombre (variables) */
:root{
  --bg-dark:#0B1220;
  --panel-dark:#0F172A;
  --ink-dark:#E6EAF6;
  --muted-dark:#9AA5BD;

  --primary-dark:#DDE5FF;   /* titres/boutons dans le sombre */
  --accent-dark:#7C99FF;    /* accent doux sombre */
  --ring-dark:#6A8DFF;

  --shadow-dark:0 8px 24px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.45);
}

/* Thème auto : si l’utilisateur a un OS en sombre et qu’aucun choix manuel n’a été fait */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    color-scheme: dark;
    --bg:var(--bg-dark);
    --panel:var(--panel-dark);
    --ink:var(--ink-dark);
    --muted:var(--muted-dark);
    --primary:var(--primary-dark);
    --accent:var(--accent-dark);
    --ring:var(--ring-dark);
    --shadow:var(--shadow-dark);
  }
}

/* Thème sombre forcé (bouton) */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:var(--bg-dark);
  --panel:var(--panel-dark);
  --ink:var(--ink-dark);
  --muted:var(--muted-dark);
  --primary:var(--primary-dark);
  --accent:var(--accent-dark);
  --ring:var(--ring-dark);
  --shadow:var(--shadow-dark);
}

/* Ajustements visuels en sombre */
:root[data-theme="dark"] body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(80,105,200,.18) 0%, transparent 60%),
    var(--bg);
}
:root[data-theme="dark"] header{
  background:linear-gradient(180deg, rgba(15,23,42,.80), rgba(15,23,42,.60));
  border-bottom-color:rgba(255,255,255,.06);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel{
  background:var(--panel);
  border-color:rgba(255,255,255,.06);
  box-shadow:var(--shadow);
}
:root[data-theme="dark"] .tag{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:var(--ink);
}
:root[data-theme="dark"] .pill{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}
:root[data-theme="dark"] .pill.active{
  background:var(--accent);
  color:#0B1220;
}
:root[data-theme="dark"] .btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:var(--ink);
}
:root[data-theme="dark"] .btn.primary{
  background:var(--primary);
  color:#0B1220;
  border-color:transparent;
}
:root[data-theme="dark"] .acc{
  background:var(--panel);
  border-color:rgba(255,255,255,.10);
}
:root[data-theme="dark"] .acc-h:hover{ background:rgba(255,255,255,.04) }
:root[data-theme="dark"] .hr{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent) }

/* Petites transitions douces entre thèmes */
body, header, .card, .panel, .btn, .pill, .tag, .acc, .acc-h, .hr{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ===== Bouton de thème (compact) ===== */
.theme-toggle{
  width:40px;height:40px;padding:0;border-radius:12px;
  display:grid;place-items:center;font-size:18px;line-height:1;
																																		
																																		/* ---------- Footer ---------- */
.site-footer{
  margin-top: var(--space-9);
  padding: var(--space-8) 0;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  border-top: 1px solid rgba(17,24,39,.08);
}
.footer-grid{
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  align-items: start;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap: var(--space-3);
}
.footer-brand .brand-badge{
  width:36px; height:36px; border-radius:12px;
  background: linear-gradient(180deg,var(--gold),var(--gold-600));
  color:#1C1605; font-weight:900;
  display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(212,175,55,.25);
}
.footer-brand .brand-name{
  font-weight:800;
  color:var(--primary);
  font-size:1.1rem;
}
.footer-nav{
  display:flex;
  flex-direction:column;
  gap: var(--space-2);
}
.footer-nav a{
  color:var(--ink);
  font-weight:500;
  opacity:.85;
  transition:opacity .2s ease;
}
.footer-nav a:hover{ opacity:1 }

.footer-extra{
  font-size:.9rem;
  color:var(--muted);
}
.footer-extra .small{ font-size:.8rem }

:root[data-theme="dark"] .site-footer{
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  border-top-color: rgba(255,255,255,.08);
}
:root[data-theme="dark"] .footer-nav a{ color: var(--ink-dark); }

}