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

/* ---------- Variables & thème (clair par défaut) ---------- */
:root{
  /* Palette CLARTE : Blanc & Or (teinte adoucie, meilleure lisibilité) */
  --bg:#F9FAFC;                 /* fond app, très clair */
  --panel:#FFFFFF;              /* cartes / panneaux */
  --ink:#111827;                /* texte principal */
  --muted:#667085;              /* texte atténué */
  --primary:#1A1F2E;            /* titres / CTA texte foncé */

  /* Or & reflets (or moins “jaune”, + élégant) */
  --gold:#E6C65B;               /* or principal (ex-#D4AF37) */
  --gold-600:#DABA49;
  --gold-700:#C5A23A;
  --gold-soft:#FFF7E0;          /* halo très doux */
  --gold-wash:#FFF1C7;          /* lavis d’or hover léger */

  /* Accent secondaire (subtil) */
  --accent:#C2B48A;

  /* Liens (meilleur contraste) */
  --link:#2855D7;
  --link-hover:#1A3FB8;

  /* Accessibilité / interaction */
  --ring:#F1D17A;               /* focus visible */

  /* Effets & arrondis */
  --shadow:0 14px 36px rgba(17,24,39,.10), 0 6px 18px rgba(17,24,39,.06);
  --shadow-sm:0 8px 20px rgba(17,24,39,.08), 0 3px 10px rgba(17,24,39,.05);
  --radius:18px; 
  --radius-lg:26px;

  /* Conteneurs fluides */
  --container:1180px;
  --container-narrow:860px;

  /* Rythme vertical */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:28px; --space-8:36px; --space-9:48px;

  /* Breakpoints */
  --bp-sm:580px; 
  --bp-md:880px; 
  --bp-lg:1180px;
}

/* ---------- Reset léger ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Reflets or en clair (adoucis pour ne pas “laver” le contenu) */
  background:
    radial-gradient(1400px 700px at 15% -10%, rgba(230,198,91,.05) 0%, transparent 60%),
    radial-gradient(1200px 600px at 85% -8%, rgba(255,247,224,.45) 0%, transparent 55%),
    var(--bg);

  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block; height:auto}
a{color:var(--link); text-decoration:underline; text-underline-offset:3px}
a:hover{color:var(--link-hover)}
button{font:inherit}

/* ---------- Typo ---------- */
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; letter-spacing:-.01em}
h2{font-size:clamp(24px,3.2vw,34px); letter-spacing:-.01em}
h3{font-size:clamp(18px,2.2vw,22px)}
p{line-height:1.75; margin:.2rem 0 1rem}
.lead{color:var(--muted); max-width:72ch}
.kicker{font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:#8A8F9A}

/* ---------- Layout ---------- */
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.container.narrow{max-width:var(--container-narrow)}
.section{padding:var(--space-7) 0 var(--space-9)}
.hr{height:1px; background:linear-gradient(90deg,transparent,rgba(17,24,39,.12),transparent); margin:var(--space-8) 0}

/* Grille fluide (12 colonnes) */
.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}}

/* Auto-grid utilitaire (cartes responsives égales) */
.auto-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}

/* Stack utilitaire (espacement vertical cohérent) */
.stack > * + *{margin-top:var(--space-5)}

/* ---------- Header & navigation ---------- */
header{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(140%) blur(10px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)),
    radial-gradient(600px 120px at 50% 0, rgba(230,198,91,.08), transparent);
  border-bottom:1px solid rgba(17,24,39,.08)
}
@supports not (backdrop-filter: blur(10px)){
  header{background:rgba(255,255,255,.96)}
}
.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:linear-gradient(180deg,#FFE8A9,#F5D56F);
  border:1px solid rgba(181,146,36,.34);
  box-shadow:0 6px 18px rgba(230,198,91,.25), inset 0 1px 0 rgba(255,255,255,.7);
  display:grid; place-items:center; color:#6E5210; font-weight:900
}
.menu{display:flex; gap:24px; align-items:center}
.menu a{opacity:.95}
.menu a.active{font-weight:700; color:var(--primary)}
.btn-don{
  padding:10px 16px; border-radius:999px;
  background:linear-gradient(180deg,var(--gold), var(--gold-600));
  color:#1A1300; font-weight:800; border:1px solid rgba(181,146,36,.45);
  box-shadow:0 10px 24px rgba(230,198,91,.28), inset 0 1px 0 rgba(255,255,255,.65);
}

/* Menu mobile (optionnel) */
.nav-toggle{display:none}
@media (max-width: 820px){
  .menu{position:fixed; inset:64px 14px auto 14px; display:grid; gap:12px; padding:14px;
    background:var(--panel); border:1px solid rgba(17,24,39,.08); border-radius:16px; box-shadow:var(--shadow); transform:translateY(-12px); opacity:0; pointer-events:none}
  .menu.open{transform:none; opacity:1; pointer-events:auto}
  .nav-toggle{
    display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px;
    border:1px solid rgba(17,24,39,.12); background:#fff; box-shadow:var(--shadow-sm)
  }
}

/* ---------- Hero ---------- */
.hero{padding:44px 0 18px}
.center{text-align:center}

/* ---------- Cartes ---------- */
.card{
  background:var(--panel);
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:20px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.card h3{color:var(--primary)}
.card p{color:var(--ink)}
.card .muted{color:var(--muted)}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(230,198,91,.16), 0 8px 16px rgba(17,24,39,.08);
  border-color:rgba(230,198,91,.35)
}

/* ---------- Tags & Pills ---------- */
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:linear-gradient(180deg,#FFF9E6,#FFF2CE);
  border:1px solid rgba(181,146,36,.25); font-weight:700; color:#6E5210
}
.pill{
  border:1px solid rgba(17,24,39,.12); background:#fff; padding:9px 13px;
  border-radius:999px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.pill:hover{transform:translateY(-2px); background:#FFFAE9; border-color:rgba(230,198,91,.4)}
.pill.active{
  background:linear-gradient(180deg,var(--gold), var(--gold-600));
  color:#1A1300; border-color:rgba(181,146,36,.45);
  box-shadow:0 10px 22px rgba(230,198,91,.28), inset 0 1px 0 rgba(255,255,255,.65);
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; padding:12px 16px; border-radius:14px; font-weight:800;
  background:#fff; border:1px solid rgba(17,24,39,.12); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(180deg,var(--gold), var(--gold-600));
  color:#1A1300; border-color:rgba(181,146,36,.45);
  box-shadow:0 12px 26px rgba(230,198,91,.26), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn.ghost{background:transparent}
.btn.link{background:transparent; border-color:transparent; box-shadow:none; padding:0}
.theme-toggle{width:40px;height:40px;padding:0;border-radius:12px;display:grid;place-items:center;font-size:18px;line-height:1}

/* ---------- Search & Inputs ---------- */
.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(17,24,39,.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(17,24,39,.12); font:inherit; background:#fff;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  color:var(--ink);
}
textarea{min-height:110px; resize:vertical}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

/* ---------- Accordéons ---------- */
.acc{
  border:1px solid rgba(17,24,39,.10); border-radius:14px; background:#fff;
  box-shadow:0 8px 16px rgba(230,198,91,.06);
}
.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); user-select:none
}
.acc-h:hover{background:linear-gradient(180deg,#FFFAE9, #FFF4D6)}
.acc-c{
  max-height:0; overflow:hidden; border-top:1px dashed rgba(17,24,39,.12); padding:0 14px;
  transition:max-height .3s ease, padding .3s ease, opacity .25s ease; opacity:.6
}
.acc.open .acc-c{max-height:720px; 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 ---------- */
.quick{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0}
.quick a{
  background:linear-gradient(180deg,#FFF9E6,#FFF2CE);
  border:1px solid rgba(181,146,36,.25);
  border-radius:999px; padding:6px 10px; font-weight:800; box-shadow:var(--shadow-sm); color:#6E5210
}
.hidden{display:none!important}
.muted{color:var(--muted)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Découvrir : petits réglages ---------- */
.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(17,24,39,.12)}

/* ========================================================= */
/* ===================== THEME SOMBRE ====================== */
/* ========================================================= */
:root{
  /* Nuit dorée (plus lisible) */
  --bg-dark:#0B0D12;             /* noir bleuté profond */
  --panel-dark:#111522;          /* cartes sombres */
  --ink-dark:#F3F2EE;            /* texte ivoire doux (plus clair) */
  --muted-dark:#C4C0B6;          /* texte atténué */

  --primary-dark:#F6EED3;        /* titres en ivoire doré */
  --gold-dark:#EAD57F;           /* or doux pour sombre */
  --gold-dark-600:#DFC463;
  --gold-dark-700:#CFA84A;

  --accent-dark:#C6B27E;         
  --ring-dark:#F0DA8B;

  --shadow-dark:0 10px 34px rgba(0,0,0,.55), 0 3px 14px rgba(0,0,0,.45);
}

/* Thème auto si l’OS est 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);
    --gold:var(--gold-dark);
    --gold-600:var(--gold-dark-600);
    --gold-700:var(--gold-dark-700);
    --accent:var(--accent-dark);
    --ring:var(--ring-dark);
    --shadow:var(--shadow-dark);
    --shadow-sm:0 8px 22px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  }
}

/* Thème sombre forcé (via data-theme="dark") */
: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);
  --gold:var(--gold-dark);
  --gold-600:var(--gold-dark-600);
  --gold-700:var(--gold-dark-700);
  --accent:var(--accent-dark);
  --ring:var(--ring-dark);
  --shadow:var(--shadow-dark);
  --shadow-sm:0 8px 22px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
}

/* Ajustements visuels en sombre (reflets bien plus discrets) */
:root[data-theme="dark"] body{
  background:
    radial-gradient(1100px 540px at 12% -10%, rgba(234,213,127,.10) 0%, transparent 60%),
    radial-gradient(900px 420px at 85% -8%, rgba(86,74,38,.18) 0%, transparent 55%),
    var(--bg);
}
:root[data-theme="dark"] header{
  background:
    linear-gradient(180deg, rgba(17,21,34,.90), rgba(17,21,34,.74)),
    radial-gradient(600px 120px at 50% 0, rgba(234,213,127,.10), transparent);
  border-bottom-color:rgba(255,255,255,.06);
}
:root[data-theme="dark"] .brand-badge{
  background:linear-gradient(180deg,#8B6C20,#E6D077);
  color:#0C0A06;
  border-color:rgba(234,213,127,.48);
  box-shadow:0 10px 26px rgba(234,213,127,.28), inset 0 1px 0 rgba(255,255,255,.30);
}
:root[data-theme="dark"] a{ color:#BFD0FF }
:root[data-theme="dark"] a:hover{ color:#E4ECFF }

: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"] .card:hover{
  border-color:rgba(234,213,127,.32);
  box-shadow:0 16px 34px rgba(234,213,127,.12), 0 8px 16px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .tag{
  background:linear-gradient(180deg, rgba(234,213,127,.18), rgba(234,213,127,.12));
  border-color:rgba(234,213,127,.32);
  color:#1B1406;
}
:root[data-theme="dark"] .pill{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:var(--ink);
}
:root[data-theme="dark"] .pill:hover{
  background:rgba(234,213,127,.10);
  border-color:rgba(234,213,127,.32);
}
:root[data-theme="dark"] .pill.active{
  background:linear-gradient(180deg,var(--gold), var(--gold-600));
  color:#0C0A06; border-color:rgba(234,213,127,.48);
  box-shadow:0 10px 22px rgba(234,213,127,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
: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:linear-gradient(180deg,var(--gold), var(--gold-600));
  color:#0C0A06; border-color:rgba(234,213,127,.48);
  box-shadow:0 12px 26px rgba(234,213,127,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
:root[data-theme="dark"] .search{background:rgba(255,255,255,.06)}
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  color:var(--ink);
}
:root[data-theme="dark"] .acc{
  background:var(--panel);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 8px 16px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .acc-h:hover{ background:rgba(234,213,127,.08) }
:root[data-theme="dark"] .hr{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent) }

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

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

/* ---------- Petites classes utilitaires ---------- */
.mt-0{margin-top:0!important}
.mt-1{margin-top:var(--space-3)!important}
.mt-2{margin-top:var(--space-5)!important}
.mt-3{margin-top:var(--space-7)!important}
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:var(--space-3)!important}
.mb-2{margin-bottom:var(--space-5)!important}
.mb-3{margin-bottom:var(--space-7)!important}
.pad-0{padding:0!important}
.pad-1{padding:var(--space-4)!important}
.pad-2{padding:var(--space-6)!important}
.pad-3{padding:var(--space-8)!important}

/* ---------- Tables simples (si besoin) ---------- */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; box-shadow:var(--shadow); background:var(--panel)}
.table th,.table td{padding:12px 14px; border-bottom:1px solid rgba(17,24,39,.08); text-align:left}
.table th{font-weight:700; color:var(--primary)}
.table tr:last-child td{border-bottom:none}
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td{border-bottom-color:rgba(255,255,255,.08)}