/* Fonts self-hosted sur R2 (cf. site/scripts/self-host-fonts.js).
Familles : Spectral, Inter, Frank Ruhl Libre, JetBrains Mono — sous-ensembles
latin + latin-ext. Aucun appel à fonts.googleapis.com/gstatic.com. */
@import url('https://assets.moncoachbm.fr/assets/fonts/_fonts.css');
/* ════════════════════════════════════════════════════════════════════
Mon Coach Tefila — V4 Design tokens (direction « Warm Textile / Parchemin »)
Fondation partagée — issue du handoff Claude Design.
Chargée AVANT les CSS de page. Ne contient que des variables + helpers.
════════════════════════════════════════════════════════════════════ */
:root {
/* Identité */
--mcbm-navy: #031f51;
--mcbm-navy-700: #0a2d6b;
--mcbm-navy-300: #5b6e9a;
--mcbm-gold: #c9a253;
--mcbm-gold-dark: #a17e30;
--mcbm-gold-soft: #e8d49a;
/* Échelle parchemin (crème chaude → vieilli) */
--mcbm-cream: #faf3e3;
--mcbm-cream-2: #f3ead4;
--mcbm-parchment: #ede2c8;
--mcbm-parchment-2: #d9cba6;
--mcbm-ink: #2a2417;
--mcbm-ink-mid: #6b5e44;
--mcbm-ink-light: #9d8c6a;
/* Accents */
--mcbm-rose: #c0633b; /* haftara / alerte */
--mcbm-olive: #6f7a3a; /* paracha */
--mcbm-success: #5a7a3a;
/* Géométrie */
--mcbm-r-sm: 8px;
--mcbm-r-md: 14px;
--mcbm-r-lg: 22px;
--mcbm-r-pill: 999px;
/* Ombres */
--mcbm-shadow-soft: 0 1px 2px rgba(42,36,23,.06), 0 8px 24px -12px rgba(42,36,23,.14);
--mcbm-shadow-card: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(42,36,23,.08), 0 12px 32px -16px rgba(42,36,23,.25);
--mcbm-shadow-lift: 0 24px 60px -28px rgba(3,31,81,.45);
/* Typographie */
--mcbm-font-display: "Spectral", "Cormorant Garamond", Georgia, serif;
--mcbm-font-ui: "Inter", "Helvetica Neue", system-ui, sans-serif;
--mcbm-font-heb: "Frank Ruhl Libre", "David Libre", "Spectral", serif;
--mcbm-font-mono: "JetBrains Mono", ui-monospace, monospace;
}
/* ── Textures parchemin réutilisables (bruit SVG + lavis chaud) ──────── */
.mcbm-bg-cream { background-color: var(--mcbm-cream); }
.mcbm-bg-parchment {
background-color: var(--mcbm-parchment);
background-image:
radial-gradient(1200px 600px at 10% 0%, rgba(201,162,83,.10), transparent 60%),
radial-gradient(900px 700px at 100% 100%, rgba(3,31,81,.05), transparent 60%),
url("data:image/svg+xml;utf8,");
}
.mcbm-bg-navy {
background-color: var(--mcbm-navy);
background-image:
radial-gradient(800px 500px at 80% -10%, rgba(201,162,83,.22), transparent 70%),
radial-gradient(700px 600px at 0% 110%, rgba(3,31,81,.6), transparent 60%),
url("data:image/svg+xml;utf8,");
}
/* ── Helpers universels ─────────────────────────────────────────────── */
.mcbm-card {
background: var(--mcbm-cream);
border: 1px solid rgba(201,162,83,.35);
border-radius: var(--mcbm-r-md);
box-shadow: var(--mcbm-shadow-card);
}
.mcbm-rule {
height: 1px;
background: linear-gradient(90deg, transparent, var(--mcbm-gold), transparent);
border: 0;
}
.mcbm-rule-dotted {
border: 0;
border-top: 2px dotted rgba(201,162,83,.55);
}
.mcbm-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: var(--mcbm-r-pill);
background: rgba(201,162,83,.16);
color: var(--mcbm-gold-dark);
font: 600 11px/1 var(--mcbm-font-ui);
letter-spacing: .04em;
text-transform: uppercase;
}
.mcbm-tag-navy {
background: rgba(3,31,81,.08);
color: var(--mcbm-navy);
}
/* Texte hébreu UI (labels, titres) — distinct du texte de prière vocalisé */
.mcbm-heb {
font-family: var(--mcbm-font-heb);
direction: rtl;
font-feature-settings: "kern";
color: var(--mcbm-navy);
}
/* Losange décoratif */
.mcbm-diamond {
width: 8px; height: 8px; transform: rotate(45deg);
background: var(--mcbm-gold);
display: inline-block;
}
/* Ornement « filet + label » */
.mcbm-ornament {
display: inline-flex;
align-items: center;
gap: 12px;
font: 600 10px/1 var(--mcbm-font-ui);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--mcbm-gold-dark);
}
.mcbm-ornament::before,
.mcbm-ornament::after {
content: "";
height: 1px; width: 28px;
background: var(--mcbm-gold);
}
/* ── Barres de défilement discrètes ─────────────────────────────────── */
.mcbm-scroll { scrollbar-width: thin; scrollbar-color: var(--mcbm-parchment-2) transparent; }
.mcbm-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.mcbm-scroll::-webkit-scrollbar-thumb {
background: var(--mcbm-parchment-2);
border-radius: 999px;
}
.mcbm-scroll::-webkit-scrollbar-track { background: transparent; }
/* ── Animations partagées ───────────────────────────────────────────── */
@keyframes mcbm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcbm-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mcbm-pop-in { from { opacity: 0; transform: scale(.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes mcbm-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes mcbm-spin { to { transform: rotate(360deg); } }
@keyframes mcbm-bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mcbm-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* A11y v5.0.x — classe utilitaire pour textes lus uniquement par lecteur d'écran. */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* A11y — focus visible plus marqué (WCAG 2.4.7). */
:focus-visible {
outline: 2px solid var(--mcbm-gold);
outline-offset: 2px;
}
/* A11y v5.0.x — tokens "texte" à contraste WCAG AA conformes.
Les variants existants (--mcbm-gold, --mcbm-rose, --mcbm-gold-dark)
sont préservés pour les usages décoratifs (bordures, badges, fills).
Pour du texte affiché, utiliser ces nouveaux tokens. */
:root {
--mcbm-gold-text: #7a5f25; /* gold-dark assombri → 4.5:1 sur cream ✅ */
--mcbm-rose-text: #a04a26; /* rose assombri → 4.5:1 sur cream ✅ */
--mcbm-ink-mid-text: #5a4f3a; /* inkMid assombri → 4.5:1 sur cream ✅ */
}