/* =============================================================================
MAISON SAYWA — couche de marque partagee, agnostique du framework.
v0.1.0 · 2026-08-20
Principe : une seule colonne neutre, un spectre d'accents, une voix typo.
Chaque produit garde SA couleur — il pose --m-accent sur un scope, et tout
composant .m-* se teinte. On unifie sans uniformiser.
Usage statique :
(ou --m-saywa, --m-aura, ...)
Themes : clair par defaut, sombre suivi via prefers-color-scheme, et forçable
par [data-theme="dark"|"light"] sur .
============================================================================= */
:root {
/* --- colonne neutre : papier chaud, encre chaude --- */
--m-paper: #F6F3EC;
--m-surface: #FFFFFF;
--m-surface-2: #FBF8F1;
--m-ink: #1C1714;
--m-ink-soft: #433C34;
--m-muted: #6E655A;
--m-line: #E4DDCF;
--m-line-2: #EFE9DE;
/* --- spectre produits : un seul spectre accorde --- */
--m-saywa: #2F5BFF;
--m-leszaffaires: #2AA3DC;
--m-aura: #12B29C;
--m-ordo: #1E9E6A;
--m-voyage: #ED7A28;
--m-vivant: #B4732A;
--m-autoia: #A06B3A;
--m-buildlink: #B08A50;
--m-phimetra: #B98F45;
--m-secretaria: #7B61FF;
--m-babysense: #7BA486;
--m-learnbot: #2B2620;
/* --- semantique (distincte de l'accent) --- */
--m-ok: #1E9E6A;
--m-warn: #E08324;
--m-crit: #D2483C;
/* --- accent actif (surchargeable par scope) --- */
--m-accent: var(--m-saywa);
--m-house: #2F5BFF; /* marque de la maison, invariant */
/* --- rayons / espace / typo / mouvement --- */
--m-r-xs: 7px; --m-r-sm: 11px; --m-r-md: 16px; --m-r-lg: 22px; --m-r-pill: 999px;
--m-sp-1: 8px; --m-sp-2: 16px; --m-sp-3: 24px; --m-sp-4: 40px; --m-sp-5: 64px;
--m-font-display: "Fraunces", Georgia, "Times New Roman", serif;
--m-font-text: "Schibsted Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
--m-font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
--m-ease: cubic-bezier(.22,.61,.36,1);
--m-dur-micro: 160ms; --m-dur-reveal: 600ms;
--m-shadow-sm: 0 1px 2px rgba(28,23,20,.06);
--m-shadow: 0 1px 2px rgba(28,23,20,.05), 0 12px 34px -18px rgba(28,23,20,.22);
}
/* themes — on ne redefinit QUE les jetons, jamais les composants */
:root:not([data-theme="light"]) {
@media (prefers-color-scheme: dark) {
--m-paper: #15120E; --m-surface: #1E1914; --m-surface-2: #241E17;
--m-ink: #EDE6D9; --m-ink-soft: #C8BFB0; --m-muted: #968C7D;
--m-line: #322B22; --m-line-2: #3B3327;
--m-house: #6E8CFF; --m-saywa: #6E8CFF;
--m-phimetra: #D2A85E; --m-buildlink: #C79E5E; --m-vivant: #CD8A3E; --m-learnbot: #E7E0D3;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
--m-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6);
}
}
:root[data-theme="dark"] {
--m-paper: #15120E; --m-surface: #1E1914; --m-surface-2: #241E17;
--m-ink: #EDE6D9; --m-ink-soft: #C8BFB0; --m-muted: #968C7D;
--m-line: #322B22; --m-line-2: #3B3327;
--m-house: #6E8CFF; --m-saywa: #6E8CFF;
--m-phimetra: #D2A85E; --m-buildlink: #C79E5E; --m-vivant: #CD8A3E; --m-learnbot: #E7E0D3;
--m-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
--m-shadow: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.6);
}
/* =========================== primitives ==================================== */
.m-root, .m-scope { color: var(--m-ink); font-family: var(--m-font-text); }
.m-display { font-family: var(--m-font-display); font-weight: 600; line-height: 1.06;
letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.m-display em { font-style: italic; font-weight: 500; color: var(--m-accent); }
.m-eyebrow { font-family: var(--m-font-mono); font-size: 12px; letter-spacing: .16em;
text-transform: uppercase; color: var(--m-muted); }
.m-mono { font-family: var(--m-font-mono); }
.m-lede { color: var(--m-ink-soft); font-size: clamp(16px, 2vw, 19px); line-height: 1.55; max-width: 62ch; }
/* --------------------------------- badge ---------------------------------- */
.m-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px;
border-radius: var(--m-r-pill); font-size: 13px; font-weight: 500;
background: color-mix(in srgb, var(--m-accent) 12%, var(--m-surface));
border: 1px solid color-mix(in srgb, var(--m-accent) 28%, transparent);
color: color-mix(in srgb, var(--m-accent) 62%, var(--m-ink)); }
.m-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--m-accent); }
.m-badge--plain::before { display: none; }
/* -------------------------------- buttons --------------------------------- */
.m-btn { font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
padding: 12px 22px; border-radius: var(--m-r-sm); cursor: pointer;
border: 1px solid transparent; transition: transform var(--m-dur-micro), filter var(--m-dur-micro);
display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.m-btn:hover { transform: translateY(-1px); }
.m-btn--primary { background: var(--m-accent); color: #fff;
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--m-accent) 60%, transparent); }
.m-btn--primary:hover { filter: brightness(1.05); }
.m-btn--ghost { background: var(--m-surface); border-color: var(--m-line); color: var(--m-ink); }
.m-btn--ghost:hover { border-color: var(--m-muted); }
/* --------------------------------- card ----------------------------------- */
.m-card { background: var(--m-surface); border: 1px solid var(--m-line);
border-radius: var(--m-r-md); box-shadow: var(--m-shadow-sm);
transition: transform .22s var(--m-ease), box-shadow .22s; overflow: hidden; }
.m-card--hover:hover { transform: translateY(-3px); box-shadow: var(--m-shadow); }
.m-card__accent { height: 3px; background: var(--m-accent); }
.m-card__body { padding: 16px 18px 18px; }
/* -------------------------------- trust row -------------------------------- */
.m-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--m-muted); margin: 0; padding: 0; list-style: none; }
.m-trust li, .m-trust span { display: inline-flex; align-items: center; gap: 7px; }
.m-trust li::before, .m-trust span::before { content: "✓"; color: var(--m-accent); font-weight: 700; }
/* ----------------------------- cockpit mock -------------------------------- */
.m-mock { border: 1px solid var(--m-line); border-radius: var(--m-r-md);
background: var(--m-surface); padding: 18px; box-shadow: var(--m-shadow-sm); }
.m-mock__head { display: flex; align-items: center; justify-content: space-between; }
.m-mock__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--m-accent); }
.m-mock__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--m-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-accent) 22%, transparent); }
.m-mock__label { font-family: var(--m-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); }
.m-mock__big { font-family: var(--m-font-display); font-size: 34px; font-weight: 600; margin: 12px 0 2px; }
/* ---------------------------------- nav ----------------------------------- */
.m-nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--m-line);
backdrop-filter: saturate(1.4) blur(12px);
background: color-mix(in srgb, var(--m-paper) 82%, transparent); }
.m-nav__in { display: flex; align-items: center; gap: 20px; height: 64px; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.m-mark { display: flex; align-items: center; gap: 11px; font-family: var(--m-font-text);
font-weight: 700; letter-spacing: -.02em; font-size: 17px; color: var(--m-ink); text-decoration: none; }
.m-mark__glyph { width: 30px; height: 30px; border-radius: 9px; flex: none; background: var(--m-accent);
color: #fff; display: grid; place-items: center; font-family: var(--m-font-display); font-weight: 600; font-size: 16px;
box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--m-accent) 55%, transparent); }
.m-nav__links { display: flex; gap: 4px; margin-left: auto; }
.m-nav__links a { text-decoration: none; color: var(--m-ink-soft); font-size: 14px; font-weight: 500;
padding: 8px 12px; border-radius: var(--m-r-sm); transition: background var(--m-dur-micro), color var(--m-dur-micro); }
.m-nav__links a:hover { background: var(--m-surface-2); color: var(--m-ink); }
/* --------------------------------- hero ----------------------------------- */
.m-hero { max-width: 1120px; margin: 0 auto; padding: 74px 24px 40px; }
.m-hero .m-eyebrow { display: block; margin-bottom: 20px; }
.m-hero__title { font-family: var(--m-font-display); font-weight: 600;
font-size: clamp(38px, 6vw, 74px); letter-spacing: -.025em; line-height: 1.04; text-wrap: balance; margin: 0; }
.m-hero__title em { font-style: italic; font-weight: 500; color: var(--m-accent); }
.m-hero .m-lede { margin-top: 22px; }
.m-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
/* -------------------------------- section --------------------------------- */
.m-section { max-width: 1120px; margin: 0 auto; padding: 66px 24px; border-top: 1px solid var(--m-line); }
/* ------------------------------ utilitaires -------------------------------- */
.m-ground { background: var(--m-paper); }
:where(.m-scope) :focus-visible, .m-focus:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
.m-btn, .m-card, .m-nav__links a { transition: none; }
}