/* assets/styles/templates/theme.css
 * Tokens de la refonte Catho Hub.
 * Chargé après le composant SiteThemeVariables, avant header/footer/common.
 * Ne redéfinit aucune variable pilotée par l'admin : il les consomme.
 */

/* Polices auto-hébergées (woff2 variables, sous-ensemble latin) dans assets/fonts/ (Asset Mapper).
   Pas de Google Fonts : la PWA doit fonctionner hors connexion. */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url("../../fonts/instrument-sans-latin-wght-normal-1Ubqs2a.woff2") format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url("../../fonts/newsreader-latin-wght-normal-LG5YRnX.woff2") format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../../fonts/newsreader-latin-wght-italic-Zzg_uYg.woff2") format('woff2'); }

:root {
  /* Encres */
  --ch-ink: #111827;
  --ch-ink-soft: #1F2937;
  --ch-muted: #6B7280;
  --ch-faint: #9CA3AF;

  /* Surfaces */
  --ch-surface: #FFFFFF;
  --ch-bg: #F7F7F8;
  --ch-bg-subtle: #F9FAFB;

  /* Traits */
  --ch-line: rgba(17, 24, 39, .12);
  --ch-line-soft: rgba(17, 24, 39, .08);
  --ch-line-invert: rgba(255, 255, 255, .14);

  /* Erreurs de formulaire (contraste AA : 6,5:1 sur blanc, 5,9:1 sur --ch-danger-bg) */
  --ch-danger: #B91C1C;
  --ch-danger-line: #DC2626;
  --ch-danger-bg: #FEF2F2;

  /* Accent : TOUJOURS via SiteThemeVariables, jamais en dur */
  --ch-accent: var(--bs-primary);
  --ch-accent-dark: var(--bs-primary-dark);
  --ch-accent-soft: color-mix(in srgb, var(--bs-primary) 10%, white);

  /* Emplacement d'image manquante */
  --ch-placeholder: repeating-linear-gradient(135deg, #EEF0F4 0 7px, #F7F8FA 7px 14px);

  /* Rayons */
  --ch-radius-sm: 5px;
  --ch-radius: 7px;
  --ch-radius-lg: 10px;
  --ch-radius-xl: 12px;
  --ch-radius-hero: 16px;

  /* Ombres */
  --ch-shadow-sm: 0 4px 12px rgba(17, 24, 39, .05);
  --ch-shadow: 0 8px 16px rgba(17, 24, 39, .08);

  /* Typographie */
  --ch-font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ch-font-read: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Taille de lecture par défaut (surchargée par reader.js) */
  --reader-fs: 18px;
}

body {
  background: var(--ch-bg);
  color: var(--ch-ink);
  font-family: var(--ch-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Titres : interface, serrés. Les titres d'œuvre passent en Newsreader au cas par cas. */
h1, h2, h3, h4, h5, h6 { font-family: var(--ch-font-ui); letter-spacing: -.015em; }
h1 { font-weight: 600; letter-spacing: -.02em; }

p { text-wrap: pretty; }

a { color: var(--ch-accent); text-decoration: none; }
a:hover { color: var(--ch-accent-dark); }

/* ---- Utilitaires de la refonte -------------------------------------------- */

/* Carte : bordure au repos, ombre seulement si cliquable */
.ch-card {
  background: var(--ch-surface);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-xl);
}
.ch-card--list { border-radius: var(--ch-radius-lg); }
a.ch-card:hover, .ch-card--hover:hover { box-shadow: var(--ch-shadow); }

/* Liste de lignes : remplace les empilements de cartes */
.ch-list {
  background: var(--ch-surface);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
  overflow: hidden;
}
.ch-list__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8125rem 1.125rem;
  border-bottom: 1px solid var(--ch-line-soft);
  color: var(--ch-ink);
}
.ch-list__row:last-child { border-bottom: 0; }
a.ch-list__row:hover { background: var(--ch-bg-subtle); color: var(--ch-ink); }
.ch-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8125rem 1.125rem;
  border-bottom: 1px solid var(--ch-line);
  font-size: .9375rem;
  font-weight: 600;
}
.ch-list__group-head {
  padding: .75rem 1rem;
  background: var(--ch-bg-subtle);
  border-bottom: 1px solid var(--ch-line-soft);
  font-size: .90625rem;
  font-weight: 600;
}

/* Surtitre / label de bloc — gris et gras, PAS de majuscules espacées */
.ch-eyebrow {
  font-size: .90625rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ch-muted);
}
.ch-meta { font-size: .8125rem; color: var(--ch-faint); }

/* Badge */
.ch-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: var(--ch-radius-sm);
  font-size: .71875rem;
  font-weight: 600;
  line-height: 1.35;
}
.ch-badge--accent { background: var(--ch-accent-soft); color: var(--ch-accent); }
.ch-badge--muted { background: #F3F4F6; color: var(--ch-muted); }

/* Emplacement d'image */
.ch-placeholder {
  display: block;
  background: var(--ch-placeholder);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius-lg);
}
.ch-placeholder--cover { aspect-ratio: 3 / 4; }
.ch-placeholder--wide { aspect-ratio: 16 / 9; }

/* Barre de progression fine */
.ch-progress { height: 5px; border-radius: 999px; background: #EEF0F4; overflow: hidden; }
.ch-progress__bar { height: 100%; border-radius: 999px; background: var(--ch-accent); }

/* Texte de lecture (chapitre, prière, article) */
.ch-prose {
  font-family: var(--ch-font-read);
  font-size: var(--reader-fs);
  line-height: 1.75;
  color: var(--ch-ink-soft);
}

/* Boutons : on garde .btn de Bootstrap, on aligne seulement la géométrie */
.btn { border-radius: var(--ch-radius); font-family: var(--ch-font-ui); font-weight: 600; }
.btn-lg { min-height: 44px; }

/* Cibles tactiles : jamais moins de 44px sur mobile */
@media (max-width: 767.98px) {
  .btn, .ch-list__row, .nav-link { min-height: 44px; }
}