/* ========= Musekai – Design System (Phase 2) Couleurs, typos, composants, thèmes par pôle ========= */ /* Base (hérite de styles.css) */ :root{ --radius:14px; --gap:1rem; --max:1200px; --shadow:0 8px 28px rgba(0,0,0,.12); --bg:#ffffff; --txt:#1c1c1c; --muted:#666; --surface:#fff; --stroke:#eaeaea; --brand:#B19768; /* doré = fallback */ --accent:#000000; } html{scroll-behavior:smooth} .body-ui{max-width:var(--max);margin:0 auto;padding:0 var(--gap)} /* Typo */ :root{ --font-title:Montserrat,system-ui,sans-serif; --font-body:Poppins,system-ui,sans-serif; } h1,h2,h3{font-family:var(--font-title);margin:.3em 0} p,li,small{font-family:var(--font-body)} .muted{color:var(--muted)} /* Grille & cartes */ .grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .card{ background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow); } .card h3{margin:.2rem 0} .badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;border:1px solid var(--stroke);font-size:.85rem} /* Boutons */ .btn{display:inline-block;padding:.8rem 1.1rem;border-radius:999px;font-weight:700} .btn-primary{background:var(--brand);color:#111} .btn-ghost{background:transparent;border:1px solid var(--brand);color:var(--brand)} /* Hero */ .hero{ min-height:52vh; display:grid; place-items:center; text-align:center; padding:5rem 1rem; color:#fff; border-radius:18px; margin:2rem 0; background:linear-gradient(120deg,#0a0a0a,#1e1e1e); } .hero h1{font-size:clamp(34px,6vw,64px)} .hero p{opacity:.9} /* Bandes de section */ .section{margin:3rem 0} .section .title{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem} .section .title .dot{width:10px;height:10px;border-radius:50%;background:var(--brand)} /* Listes de services */ .service{display:flex;align-items:flex-start;gap:.8rem} .service .icon{width:38px;height:38px;border-radius:10px;background:var(--brand);opacity:.15} /* ----- THÈMES PAR PÔLE (appliquer sur ou un grand conteneur) ----- */ /* Musekai — Doré / Noir */ .theme--musekai{ --brand:#B19768; --accent:#000; --bg:#0a0a0a; --txt:#f6f6f6; --surface:#121212; --stroke:#242424; --muted:#bdbdbd; } .theme--musekai .hero{background:radial-gradient(1000px 520px at 50% 0%,#2a2a2a,#0a0a0a)} .theme--musekai .card{background:#151515} /* Shinsekai — Doré clair / Beige */ .theme--shinsekai{ --brand:#CDB58C; --accent:#EDE3D0; --bg:#FAF7F1; --txt:#1c1c1c; --surface:#fff; --stroke:#eee; --muted:#6f6b65; } .theme--shinsekai .hero{color:#1b1b1b;background:linear-gradient(120deg,#EDE3D0,#ffffff)} /* Domuwari — Brun / Doré */ .theme--domuwari{ --brand:#A17856; --accent:#C8A46B; --bg:#F7F2EB; --txt:#1c1c1c; --surface:#fff; --stroke:#e9e2d8; --muted:#746356; } .theme--domuwari .hero{color:#2b1f17;background:linear-gradient(120deg,#C8A46B,#A17856)} /* Kosenkai — Rouge profond */ .theme--kosenkai{ --brand:#A1122D; --accent:#000; --bg:#0c0b0c; --txt:#f5f5f5; --surface:#151316; --stroke:#2a262a; --muted:#c7c3c7; } .theme--kosenkai .hero{background:linear-gradient(120deg,#1a1316,#A1122D)} /* Koorama — Noir / Magenta */ .theme--koorama{ --brand:#E40046; --accent:#000; --bg:#0a0a0a; --txt:#f5f5f5; --surface:#131013; --stroke:#231f23; --muted:#cfcfcf; } .theme--koorama .hero{background:linear-gradient(120deg,#0a0a0a,#E40046)} /* Primakademia — Bleu nuit / Doré */ .theme--primakademia{ --brand:#1A1D2E; --accent:#C8B377; --bg:#f6f7fb; --txt:#1b1e2c; --surface:#fff; --stroke:#e6e8f1; --muted:#70748a; } .theme--primakademia .hero{color:#fff;background:linear-gradient(120deg,#1A1D2E,#3b4062)} .btn-primary.theme-primakademia{background:#C8B377;color:#1b1e2c} /* Dailyhikari — Orange */ .theme--dailyhikari{ --brand:#E86C3A; --accent:#111; --bg:#FFF6F1; --txt:#231f1c; --surface:#fff; --stroke:#fde1d5; --muted:#8c6a5f; } .theme--dailyhikari .hero{color:#231f1c;background:linear-gradient(120deg,#FFE5DA,#FFF6F1)} /* Yumiterra — Vert matcha */ .theme--yumiterra{ --brand:#6C9A62; --accent:#2d3b2a; --bg:#F4F8F4; --txt:#1f2720; --surface:#fff; --stroke:#e1eee1; --muted:#6b7a6b; } .theme--yumiterra .hero{color:#1f2720;background:linear-gradient(120deg,#E6F1E6,#F8FCF8)} /* Utilitaires thèmes */ .bg{background:var(--bg);color:var(--txt)} .hr{height:1px;background:var(--stroke);margin:1.2rem 0} .kicker{letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--brand)} .link{color:var(--brand);text-decoration:underline} .tag{display:inline-block;font-size:.8rem;background:color-mix(in oklab,var(--brand) 12%, #fff);padding:.35rem .6rem;border-radius:999px} /* ========================================================= MUSK – Theme.css (extensions Phases 5–8) Accessibilité, perf, dark/print, utilitaires robustes ========================================================= */ /* Focus visible (AA) : contour lisible piloté par la couleur de marque */ :root { --focus: 2px solid var(--brand, #1b9768); } :focus { outline: none; } :focus-visible { outline: var(--focus); outline-offset: 2px; } /* États boutons cohérents (si pas déjà définis) */ .btn, .btn-primary, .btn-ghost { transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .btn:hover, .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); } .btn:active, .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0,0,0,.15); } .btn-ghost:hover { background: color-mix(in oklab, var(--brand) 10%, #fff); } /* Badges + pills génériques (si utilisés dans index/journal) */ .badge { display:inline-block; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--stroke,#e5e5e5); background:#fff; color:#111; } .pill { display:inline-block; padding:.4rem .9rem; border-radius:999px; background:color-mix(in oklab, var(--brand, #1b9768) 12%, #fff); } /* Grilles utilitaires réactives (DRY) */ .grid { display:grid; gap:var(--gap,1rem); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .split { display:grid; gap:var(--gap,1rem); grid-template-columns:1.2fr .8fr; } @media (max-width: 900px){ .split{ grid-template-columns:1fr; } } /* Accessibilité : cacher visuellement sans retirer du flux */ .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; } /* Liens : état focus/hover visible */ a:hover { text-decoration: underline; } a:focus-visible { outline: var(--focus); border-radius:4px; } /* Mode sombre auto (préférence système) – doux, non destructif */ @media (prefers-color-scheme: dark){ :root{ --surface:#121212; --txt:#f2f2f2; --stroke:#2a2a2a; } body { background:var(--surface); color:var(--txt); } .card { background:#181818; border-color:var(--stroke); } .site-header, .site-footer { background:#141414; border-color:#222; } } /* High Contrast (Windows HC/Forced Colors) */ @media (forced-colors: active){ * { forced-color-adjust: none; } body { background: Canvas; color: CanvasText; } .btn, .btn-primary, .btn-ghost { border: 1px solid ButtonText; } a { color: LinkText; } } /* Réduction animations (perf + confort) */ @media (prefers-reduced-motion: reduce){ * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .hero__video video, .hero-video video { display:none; } } /* Petits raffinements cartes/composants */ .card { border:1px solid var(--stroke,#e5e5e5); border-radius:12px; background:var(--surface,#fff); box-shadow:0 6px 24px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-2px); box-shadow:0 12px 36px rgba(0,0,0,.10); } .card h3 { margin:.2rem 0 .4rem; font-weight:700; } /* Skip link (accessibilité clavier) */ .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.6rem 1rem; background:#000; color:#fff; z-index:9999; border-radius:8px; } /* RTL minimal (si un jour contenu en arabe/hébreu) */ [dir="rtl"] { direction: rtl; } [dir="rtl"] .grid, [dir="rtl"] .split { direction: rtl; } [dir="rtl"] .btn, [dir="rtl"] .badge, [dir="rtl"] .pill { letter-spacing: .1px; } /* Impression propre (docs presse / pages infos) */ @media print{ .site-header, .site-footer, nav, .hero-video, .hero__video, .btn, .badge, .pill { display:none !important; } body { background:#fff; color:#000; } a::after{ content:" (" attr(href) ")"; font-size:.9em; } .card { box-shadow:none; border:1px solid #000; } } /* --- Renforts de thèmes : contrastes & CTA lisibles --- */ /* Si un thème n’a pas de .btn-primary spécifique, on le renforce ici */ .theme-musekai .btn-primary{ background:var(--brand); color:#111; } .theme-shinseka i .btn-primary{ background:var(--brand); color:#111; } .theme-domuwari .btn-primary{ background:var(--brand); color:#fff; } .theme-kosenkai .btn-primary{ background:var(--brand); color:#fff; } .theme-koorama .btn-primary{ background:var(--brand); color:#fff; } .theme-primakademia .btn-primary{ background:var(--brand); color:#fff; } .theme-dailyhikari .btn-primary{ background:var(--brand); color:#231f1c; } .theme-yumiterra .btn-primary{ background:var(--brand); color:#0f2b1a; } /* États hover/focus par thème (léger) */ [class^="theme-"] .btn-primary:hover{ filter: brightness(1.05); } [class^="theme-"] .btn-primary:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }