/* Thème de la page publique d'une commune (réglé dans « Éditer ma page publique »).
   Les valeurs ne viennent JAMAIS d'un CSS saisi : public/js/page-theme.js ne pose que
   des attributs data-pp-* tirés de listes fermées (validées côté serveur) et des
   variables de couleur #RRGGBB. Ce fichier est la seule traduction clé → style.
   Polices : hébergées chez nous (/vendor/fonts) ou pile système, aucun CDN. */

/* ── Polices ───────────────────────────────────────────────────────────── */
html[data-pp-font="editorial"]  { --pp-font-head: 'Lora', Georgia, 'Times New Roman', serif; --pp-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
html[data-pp-font="systeme"]    { --pp-font-head: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --pp-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
html[data-pp-font="classique"]  { --pp-font-head: Georgia, 'Times New Roman', Times, serif; --pp-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
html[data-pp-font="editorial"], html[data-pp-font="systeme"], html[data-pp-font="classique"] {
  --serif: var(--pp-font-head);
  --sans: var(--pp-font-body);
}
html[data-pp-font="editorial"] body, html[data-pp-font="systeme"] body, html[data-pp-font="classique"] body { font-family: var(--pp-font-body); }
html[data-pp-font="editorial"] :is(h1, h2, h3), html[data-pp-font="systeme"] :is(h1, h2, h3), html[data-pp-font="classique"] :is(h1, h2, h3) { font-family: var(--pp-font-head); }
html[data-pp-font="editorial"] :is(button, input, select, textarea), html[data-pp-font="systeme"] :is(button, input, select, textarea), html[data-pp-font="classique"] :is(button, input, select, textarea) { font-family: inherit; }
/* Les sur-titres restent dans la police du texte, comme dans la maquette d'origine. */
html[data-pp-font] .section-eyebrow, html[data-pp-font] .h1-subline { font-family: var(--pp-font-body); }

/* ── Arrondis ──────────────────────────────────────────────────────────── */
html[data-pp-radius="net"]     { --radius: 2px;  --radius-lg: 4px;  --radius-sm: 2px; }
html[data-pp-radius="arrondi"] { --radius: 20px; --radius-lg: 32px; --radius-sm: 12px; }

/* ── Densité ───────────────────────────────────────────────────────────── */
html[data-pp-density="compacte"] .section { padding-top: 40px; padding-bottom: 40px; }
html[data-pp-density="aeree"]    .section { padding-top: 104px; padding-bottom: 104px; }
@media (max-width: 780px) {
  html[data-pp-density="compacte"] .section { padding-top: 28px; padding-bottom: 28px; }
  html[data-pp-density="aeree"]    .section { padding-top: 72px; padding-bottom: 72px; }
}

/* ── Bandeau ───────────────────────────────────────────────────────────── */
html[data-pp-banner="uni"] .hero { background: var(--primary); }
/* Couleur de bandeau choisie (facultative) : remplace l'accent pour le fond du bandeau seulement. */
html[data-pp-herocolor]:not([data-pp-banner="clair"]) .hero { background: linear-gradient(160deg, var(--pp-hero-color) 0%, var(--pp-hero-light) 65%, var(--pp-hero-color) 100%); }
html[data-pp-herocolor][data-pp-banner="uni"] .hero { background: var(--pp-hero-color); }
html[data-pp-banner="uni"] .pp-section-hero { background: var(--pp-commune-color); }
html[data-pp-banner="clair"] .hero {
  background: color-mix(in srgb, var(--primary) 9%, var(--bg-alt, #fff));
  color: var(--primary);
}
html[data-pp-banner="clair"] .hero::after { background: none; }
html[data-pp-banner="clair"] .hero h1,
html[data-pp-banner="clair"] .hero .subtitle,
html[data-pp-banner="clair"] .hero h1 .h1-subline { color: var(--primary); text-shadow: none; }
html[data-pp-banner="clair"] .hero .subtitle { opacity: .9; }
html[data-pp-banner="clair"] .hero-eyebrow { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); color: var(--primary); }
html[data-pp-banner="clair"] .hero-blason,
html[data-pp-banner="clair"] .hero-logo-watermark { color: var(--primary); opacity: .1; }

/* ── Fond de page ──────────────────────────────────────────────────────── */
html[data-pp-fond="blanc"]:not([data-pp-mode="sombre"])   { --bg: #ffffff; --paper: #ffffff; --bg-alt: #f6f8fa; }
html[data-pp-fond="ardoise"]:not([data-pp-mode="sombre"]) { --bg: #eef1f5; --paper: #eef1f5; --bg-alt: #ffffff; }
html[data-pp-fond="points"]:not([data-pp-mode="sombre"]) body {
  background-image: radial-gradient(color-mix(in srgb, var(--primary, var(--pp-commune-color)) 14%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ── Mode sombre (pages qui le déclarent avec data-pp-modes) ──────────── */
html[data-pp-mode="sombre"] {
  color-scheme: dark;
  --bg: #11161c; --paper: #11161c; --bg-alt: #1a2129; --white: #1a2129;
  --text: #e9eef3; --text-light: #b9c4cf; --text-muted: #9aa7b4;
  --border: #2c3641; --border-strong: #3b4755;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.5);
}
html[data-pp-mode="sombre"] .section-eyebrow { color: var(--pp-commune-ink, var(--accent)); }
html[data-pp-mode="sombre"] .hero-wave path { fill: var(--bg); }

@media (prefers-reduced-motion: reduce) { html[data-pp-edit] * { scroll-behavior: auto !important; } }

/* ── Blocs masqués par la mairie (hors mode édition) ──────────────────── */
[data-pp-hidden] { display: none !important; }