/* Styles prêts à l'emploi (v1) : même gabarit, autres réglages. Activer : <html data-style="editorial">. Par défaut : « standard ».
   Une application peut aussi changer l'accent (--ac clair, --as sombre) et la police (data-police). Tout contraste texte est vérifié à 4,5:1 minimum. */
@font-face { font-family: "IBM Plex Sans Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Plus Jakarta Sans Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "DM Sans Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Source Serif 4 Variable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations"); }
:root[data-style="editorial"] { --font-titre: "Source Serif 4 Variable", Georgia, serif; --titre-poids: 600; --r-sm: 3px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --bg: #faf8f4; --surface: #ffffff; --surface-2: #f4f0e9; --surface-3: #ebe5d9; --border: #e7e1d6; --border-strong: #d3cab9; --text: #1c1917; --text-2: #44403c; --text-3: #6b6358; --ac: #9f1239; --sh-1: 0 1px 0 rgba(28,25,23,.04); --sh-2: 0 1px 2px rgba(28,25,23,.05), 0 6px 20px -10px rgba(28,25,23,.14); --sh-3: 0 4px 12px rgba(28,25,23,.08), 0 24px 48px -16px rgba(28,25,23,.24); }
@media (prefers-color-scheme: dark) { :root[data-style="editorial"]:not([data-theme="light"]) { --bg: #14110f; --surface: #1c1816; --surface-2: #241f1c; --surface-3: #2e2824; --border: #332c27; --border-strong: #463d36; --text: #f3eee7; --text-2: #cdc4b8; --text-3: #a89e90; --as: #fda4af; --sh-1: 0 1px 0 rgba(0,0,0,.4); --sh-2: 0 1px 3px rgba(0,0,0,.45), 0 10px 28px -12px rgba(0,0,0,.65); --sh-3: 0 4px 12px rgba(0,0,0,.5), 0 28px 56px -16px rgba(0,0,0,.8); } }
:root[data-style="editorial"][data-theme="dark"] { --bg: #14110f; --surface: #1c1816; --surface-2: #241f1c; --surface-3: #2e2824; --border: #332c27; --border-strong: #463d36; --text: #f3eee7; --text-2: #cdc4b8; --text-3: #a89e90; --as: #fda4af; --sh-1: 0 1px 0 rgba(0,0,0,.4); --sh-2: 0 1px 3px rgba(0,0,0,.45), 0 10px 28px -12px rgba(0,0,0,.65); --sh-3: 0 4px 12px rgba(0,0,0,.5), 0 28px 56px -16px rgba(0,0,0,.8); }
:root[data-style="compact"] { --font: "IBM Plex Sans Variable", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --t-md: 13px; --t-base: 14px; --t-sm: 12px; --ctl-h: 34px; --pad-carte: 16px; --pad-cell: 10px; --gap-page: 20px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --titre-poids: 600; --sidebar-w: 232px; --bg: #f2f4f7; --surface: #ffffff; --surface-2: #eef1f5; --surface-3: #e3e8ef; --border: #dbe1ea; --border-strong: #c2cbd8; --text: #0f172a; --text-2: #3b475b; --text-3: #55657c; --ac: #1d4ed8; }
@media (prefers-color-scheme: dark) { :root[data-style="compact"]:not([data-theme="light"]) { --bg: #0a0e15; --surface: #10151f; --surface-2: #151b27; --surface-3: #1c2434; --border: #212a3a; --border-strong: #313d52; --text: #e6ebf3; --text-2: #b0bbcd; --text-3: #8f9db3; --as: #8db4ff; } }
:root[data-style="compact"][data-theme="dark"] { --bg: #0a0e15; --surface: #10151f; --surface-2: #151b27; --surface-3: #1c2434; --border: #212a3a; --border-strong: #313d52; --text: #e6ebf3; --text-2: #b0bbcd; --text-3: #8f9db3; --as: #8db4ff; }
:root[data-style="studio"] { --font: "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --titre-poids: 700; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --ctl-h: 44px; --pad-carte: 28px; --pad-cell: 18px; --gap-page: 36px; --bg: #f5f4ff; --surface: #ffffff; --surface-2: #efedfd; --surface-3: #e4e1fa; --border: #e3e0f7; --border-strong: #cbc6ee; --text: #14112e; --text-2: #46426b; --text-3: #615d88; --ac: #4338ca; --sh-2: 0 1px 3px rgba(67,56,202,.08), 0 14px 34px -14px rgba(67,56,202,.26); }
@media (prefers-color-scheme: dark) { :root[data-style="studio"]:not([data-theme="light"]) { --bg: #0c0a1d; --surface: #141230; --surface-2: #1b1840; --surface-3: #25215a; --border: #2a2656; --border-strong: #3d3880; --text: #ecebff; --text-2: #bcb8e6; --text-3: #9a96cc; --as: #a5b4fc; } }
:root[data-style="studio"][data-theme="dark"] { --bg: #0c0a1d; --surface: #141230; --surface-2: #1b1840; --surface-3: #25215a; --border: #2a2656; --border-strong: #3d3880; --text: #ecebff; --text-2: #bcb8e6; --text-3: #9a96cc; --as: #a5b4fc; }
:root[data-style="nordique"] { --font: "DM Sans Variable", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --titre-poids: 600; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --pad-carte: 28px; --gap-page: 40px; --bg: #fbfcfd; --surface: #ffffff; --surface-2: #f3f5f8; --surface-3: #e9edf2; --border: #e8ecf1; --border-strong: #d3dae3; --text: #0f172a; --text-2: #3f4d61; --text-3: #5d6b80; --ac: #334155; --sh-1: none; --sh-2: 0 1px 2px rgba(15,23,42,.04); --sh-3: 0 12px 32px -12px rgba(15,23,42,.18); }
@media (prefers-color-scheme: dark) { :root[data-style="nordique"]:not([data-theme="light"]) { --bg: #0b0f14; --surface: #11161d; --surface-2: #161c25; --surface-3: #1d2531; --border: #1e2733; --border-strong: #2c3948; --text: #eef2f7; --text-2: #b4bfce; --text-3: #94a1b4; --as: #cbd5e1; --sh-1: none; --sh-2: 0 1px 2px rgba(0,0,0,.4); --sh-3: 0 16px 40px -12px rgba(0,0,0,.7); } }
:root[data-style="nordique"][data-theme="dark"] { --bg: #0b0f14; --surface: #11161d; --surface-2: #161c25; --surface-3: #1d2531; --border: #1e2733; --border-strong: #2c3948; --text: #eef2f7; --text-2: #b4bfce; --text-3: #94a1b4; --as: #cbd5e1; --sh-1: none; --sh-2: 0 1px 2px rgba(0,0,0,.4); --sh-3: 0 16px 40px -12px rgba(0,0,0,.7); }
:root[data-police="inter"] { --font: "Inter Variable", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:root[data-police="plex"] { --font: "IBM Plex Sans Variable", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:root[data-police="jakarta"] { --font: "Plus Jakarta Sans Variable", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:root[data-police="dm-sans"] { --font: "DM Sans Variable", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
:root[data-police="systeme"] { --font: ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* Particularités de mise en page par style (menu latéral) */
:root[data-style="studio"] .sidebar { background: linear-gradient(180deg, #1e1b4b, #0f0d2b); border-right: 0; }
:root[data-style="studio"] .sidebar .nav-item { color: #c9cbf3; }
:root[data-style="studio"] .sidebar .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
:root[data-style="studio"] .sidebar .nav-item[aria-current="page"] { background: rgba(255,255,255,.15); color: #fff; }
:root[data-style="studio"] .sidebar .nav-group__titre { color: #9a9ee0; }
:root[data-style="studio"] .sidebar__brand strong { color: #fff; }
:root[data-style="studio"] .sidebar__brand small { color: #aeb1e6; }
:root[data-style="studio"] .sidebar__brand img { background: #fff; border-radius: 12px; padding: 4px; }
:root[data-style="studio"] .sidebar__pied { border-top-color: rgba(255,255,255,.14); }
:root[data-style="studio"] .sidebar .pastille--accent { background: rgba(255,255,255,.16); color: #fff; }
:root[data-style="nordique"] .sidebar { background: transparent; border-right: 0; }
:root[data-style="nordique"] .topbar { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
:root[data-style="nordique"] .carte { border-color: var(--border); }
:root[data-style="editorial"] .page-entete h1 { font-size: 36px; letter-spacing: -.025em; }
:root[data-style="editorial"] .carte__titre, :root[data-style="editorial"] .stat__valeur { font-family: var(--font-titre); }
:root[data-style="compact"] .sidebar { padding: var(--s-3) var(--s-2); }
:root[data-style="compact"] .tableau th { letter-spacing: .02em; }