/* ============================================================
* Personal OS — Design System v6 « Précision sombre »
* Instrument-grade dark glass · Rouge Guards (#D5001C)
* Archivo Expanded (display/chiffres) + Hanken Grotesk (corps)
* OKLCH · neutres tintés chaud · hairlines machinées · verre purposeful
*
* Usage dans le d'une page module :
*
*
*
* Thème : SOMBRE par défaut (:root).
* Clair via (toggle géré par le JS).
*
* Compat : tous les anciens tokens --pos-* et classes .pos-* sont
* conservés → les modules existants se mettent à niveau sans toucher
* à leur markup.
* ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');
/* ─── Tokens — SOMBRE (défaut) ───────────────────────────────── */
:root{
color-scheme: dark;
/* Surfaces — quasi-noir tinté chaud (vers le rouge Guards) */
--pos-bg:oklch(0.160 0.006 30);
--pos-bg-soft:oklch(0.195 0.007 30);
--pos-surface:oklch(0.215 0.008 32);
--pos-surface-2:oklch(0.255 0.009 32);
--pos-overlay:oklch(0.10 0.012 30 / .62);
/* Encre — blanc cassé chaud (jamais #fff pur) */
--pos-ink:oklch(0.965 0.004 75);
--pos-ink-soft:oklch(0.800 0.006 65);
--pos-ink-mute:oklch(0.645 0.008 55);
--pos-ink-faint:oklch(0.500 0.009 50);
--pos-on-accent:oklch(0.99 0 0);
/* Lignes — hairlines machinées */
--pos-rule:oklch(0.300 0.008 33);
--pos-rule-2:oklch(0.375 0.010 33);
--pos-rule-strong:oklch(0.620 0.012 45);
/* Accent — Rouge Guards (l'aiguille des secondes) */
--pos-accent:oklch(0.605 0.222 27);
--pos-accent-hover:oklch(0.665 0.225 28);
--pos-accent-soft:oklch(0.340 0.100 27);
--pos-accent-ink:oklch(0.740 0.190 27);
/* Signaux */
--pos-ok:oklch(0.740 0.150 158);
--pos-warn:oklch(0.800 0.135 80);
--pos-err:oklch(0.640 0.205 27);
--pos-ok-soft:oklch(0.300 0.060 158);
--pos-warn-soft:oklch(0.320 0.060 80);
/* Verre & matière (transparence PURPOSEFUL) */
--pos-glass:color-mix(in oklch, var(--pos-surface) 60%, transparent);
--pos-glass-2:color-mix(in oklch, var(--pos-surface-2) 70%, transparent);
--pos-glass-blur:16px;
--pos-bevel:inset 0 1px 0 oklch(1 0 0 / .06);
--pos-bevel-strong:inset 0 1px 0 oklch(1 0 0 / .10);
--pos-ring:0 0 0 3px color-mix(in oklch, var(--pos-accent) 38%, transparent);
/* Typo */
--pos-display:'Archivo Expanded','Archivo',system-ui,sans-serif;
--pos-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
--pos-mono:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',monospace;
/* Rayons */
--pos-r-xs:5px; --pos-r:8px; --pos-r-md:12px; --pos-r-lg:18px; --pos-r-pill:999px;
/* Ombres — sombres, en couches */
--pos-shadow-sm:0 1px 2px oklch(0 0 0 / .40);
--pos-shadow:0 2px 8px oklch(0 0 0 / .34), 0 18px 44px oklch(0 0 0 / .46);
--pos-shadow-lg:0 36px 90px oklch(0 0 0 / .62);
--pos-glow:0 10px 36px color-mix(in oklch, var(--pos-accent) 26%, transparent);
/* Mouvement */
--pos-ease:cubic-bezier(.22,.61,.20,1);
--pos-ease-out:cubic-bezier(.16,1,.30,1);
--pos-fast:140ms; --pos-base:240ms; --pos-slow:560ms;
/* Échelle d'espacement (4pt, sémantique) */
--pos-space-2xs:4px; --pos-space-xs:8px; --pos-space-sm:12px; --pos-space-md:16px;
--pos-space-lg:24px; --pos-space-xl:32px; --pos-space-2xl:48px; --pos-space-3xl:64px; --pos-space-4xl:96px;
/* Métriques */
--pos-nav-h:56px;
--pos-maxw:1120px;
}
/* ─── Tokens — CLAIR (via data-theme="light") ────────────────── */
html[data-theme="light"]{
color-scheme: light;
--pos-bg:oklch(0.985 0.004 75);
--pos-bg-soft:oklch(0.963 0.005 70);
--pos-surface:oklch(0.998 0.002 75);
--pos-surface-2:oklch(0.975 0.004 70);
--pos-overlay:oklch(0.20 0.010 30 / .32);
--pos-ink:oklch(0.230 0.012 40);
--pos-ink-soft:oklch(0.400 0.010 42);
--pos-ink-mute:oklch(0.550 0.009 46);
--pos-ink-faint:oklch(0.700 0.008 50);
--pos-on-accent:oklch(0.99 0 0);
--pos-rule:oklch(0.905 0.006 60);
--pos-rule-2:oklch(0.850 0.007 55);
--pos-rule-strong:oklch(0.300 0.012 40);
--pos-accent:oklch(0.515 0.224 27);
--pos-accent-hover:oklch(0.455 0.215 27);
--pos-accent-soft:oklch(0.930 0.050 25);
--pos-accent-ink:oklch(0.515 0.224 27);
--pos-ok:oklch(0.520 0.130 158);
--pos-warn:oklch(0.580 0.120 70);
--pos-err:oklch(0.515 0.224 27);
--pos-ok-soft:oklch(0.930 0.050 158);
--pos-warn-soft:oklch(0.940 0.050 80);
--pos-glass:color-mix(in oklch, var(--pos-surface) 66%, transparent);
--pos-glass-2:color-mix(in oklch, white 72%, transparent);
--pos-bevel:inset 0 1px 0 oklch(1 0 0 / .70);
--pos-bevel-strong:inset 0 1px 0 oklch(1 0 0 / .90);
--pos-ring:0 0 0 3px color-mix(in oklch, var(--pos-accent) 22%, transparent);
--pos-shadow-sm:0 1px 2px oklch(0.30 0.02 40 / .06);
--pos-shadow:0 2px 6px oklch(0.30 0.02 40 / .06), 0 16px 36px oklch(0.30 0.02 40 / .09);
--pos-shadow-lg:0 30px 70px oklch(0.30 0.02 40 / .16);
--pos-glow:0 10px 30px color-mix(in oklch, var(--pos-accent) 20%, transparent);
}
/* ─── Reset léger ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--pos-bg);
color:var(--pos-ink);
font-family:var(--pos-sans);
font-size:15px;
line-height:1.6;
letter-spacing:-.006em;
font-feature-settings:'kern','liga','cv11','ss01';
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
transition:background var(--pos-base) var(--pos-ease), color var(--pos-base) var(--pos-ease);
}
/* Ambiance radiale — braise rouge + lumière acier (niveau murmure) */
body::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 48% at 86% -6%, color-mix(in oklch, var(--pos-accent) 13%, transparent), transparent 62%),
radial-gradient(52% 40% at 8% -2%, color-mix(in oklch, var(--pos-rule-strong) 9%, transparent), transparent 58%);
}
::selection{background:var(--pos-accent);color:var(--pos-on-accent)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pos-accent);outline-offset:2px;border-radius:var(--pos-r-xs)}
/* Scrollbars discrètes (premium) */
*{scrollbar-width:thin;scrollbar-color:var(--pos-rule-2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--pos-rule-2);border-radius:99px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--pos-ink-faint);background-clip:padding-box}
/* Chiffres tabulaires — l'OS se lit comme un cadran */
.pos-num,.tabular,[data-num]{
font-variant-numeric:tabular-nums;
font-feature-settings:'tnum' 1,'kern' 1;
letter-spacing:-.01em;
}
/* ─── Layout ──────────────────────────────────────────────────── */
.pos-container{width:100%;max-width:var(--pos-maxw);margin:0 auto;padding:0 var(--pos-space-lg)}
.pos-section{padding:var(--pos-space-2xl) 0}
.pos-rule-line{height:1px;background:var(--pos-rule);border:0;margin:0}
.pos-stack{display:flex;flex-direction:column;gap:var(--pos-space-md)}
/* ─── Eyebrow / labels — voix « instrument » ─────────────────── */
.pos-eyebrow{
font-family:var(--pos-display);
font-size:.66rem;font-weight:600;letter-spacing:.20em;text-transform:uppercase;
color:var(--pos-ink-mute);
}
.pos-eyebrow--accent{color:var(--pos-accent)}
/* ─── Titrage ─────────────────────────────────────────────────── */
.pos-display{
font-family:var(--pos-display);
font-weight:700;letter-spacing:-.02em;line-height:1.0;
font-size:clamp(2.6rem,6vw,4.4rem);
color:var(--pos-ink);
}
.pos-h1{
font-family:var(--pos-display);
font-weight:600;letter-spacing:-.015em;line-height:1.08;
font-size:clamp(1.7rem,3.5vw,2.4rem);color:var(--pos-ink);
}
.pos-h2{font-weight:700;letter-spacing:-.018em;font-size:1.3rem;color:var(--pos-ink)}
.pos-h3{font-weight:600;letter-spacing:-.01em;font-size:1rem;color:var(--pos-ink)}
.pos-lead{color:var(--pos-ink-soft);font-size:1.06rem;font-weight:400;max-width:65ch}
.pos-muted{color:var(--pos-ink-mute)}
.pos-accent{color:var(--pos-accent)}
/* ─── Cartes ──────────────────────────────────────────────────── */
.pos-card{
position:relative;
background:var(--pos-surface);
border:1px solid var(--pos-rule);
border-radius:var(--pos-r-md);
padding:var(--pos-space-lg);
box-shadow:var(--pos-bevel),var(--pos-shadow-sm);
transition:border-color var(--pos-base) var(--pos-ease),
transform var(--pos-base) var(--pos-ease-out),
box-shadow var(--pos-base) var(--pos-ease);
}
a.pos-card:hover,.pos-card--link:hover{
border-color:var(--pos-rule-2);
transform:translateY(-3px);
box-shadow:var(--pos-bevel-strong),var(--pos-shadow);
}
/* Verre dépoli — réservé aux surfaces qui flottent (hero, panneaux) */
.pos-card--glass{
background:var(--pos-glass);
-webkit-backdrop-filter:blur(var(--pos-glass-blur)) saturate(150%);
backdrop-filter:blur(var(--pos-glass-blur)) saturate(150%);
border-color:color-mix(in oklch, var(--pos-rule-strong) 28%, transparent);
}
.pos-card--raised{box-shadow:var(--pos-bevel-strong),var(--pos-shadow)}
/* Filet rouge animé en haut de carte au survol/actif */
.pos-card--accent::after{
content:"";position:absolute;left:0;top:0;height:2px;width:0;
background:var(--pos-accent);border-radius:var(--pos-r-md) var(--pos-r-md) 0 0;
box-shadow:var(--pos-glow);
transition:width var(--pos-base) var(--pos-ease-out);
}
a.pos-card--accent:hover::after,.pos-card--accent.is-active::after{width:100%}
/* ─── Statistiques / chiffres clés — cadran ──────────────────── */
.pos-stat{display:flex;flex-direction:column;gap:var(--pos-space-2xs)}
.pos-stat__num{
font-family:var(--pos-display);
font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;letter-spacing:-.01em;
font-variant-numeric:tabular-nums;line-height:1;color:var(--pos-ink);
}
.pos-stat__num--accent{color:var(--pos-accent)}
.pos-stat__label{
font-family:var(--pos-display);
font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--pos-ink-mute);
}
.pos-stat__delta{font-size:.82rem;font-variant-numeric:tabular-nums;font-weight:500}
.pos-stat__delta--up{color:var(--pos-ok)}
.pos-stat__delta--down{color:var(--pos-err)}
/* ─── Boutons ─────────────────────────────────────────────────── */
.pos-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:10px 18px;border-radius:var(--pos-r);border:1px solid transparent;
font-family:var(--pos-sans);font-size:.9rem;font-weight:600;letter-spacing:.005em;cursor:pointer;
background:var(--pos-ink);color:var(--pos-bg);
box-shadow:var(--pos-bevel),var(--pos-shadow-sm);
transition:background var(--pos-fast) var(--pos-ease),
border-color var(--pos-fast) var(--pos-ease),
box-shadow var(--pos-fast) var(--pos-ease),
transform var(--pos-fast) var(--pos-ease-out), opacity var(--pos-fast);
}
.pos-btn:hover{transform:translateY(-1px);box-shadow:var(--pos-bevel-strong),var(--pos-shadow)}
.pos-btn:active{transform:translateY(0)}
.pos-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.pos-btn--accent{background:var(--pos-accent);color:var(--pos-on-accent)}
.pos-btn--accent:hover{background:var(--pos-accent-hover);box-shadow:var(--pos-bevel-strong),var(--pos-glow)}
.pos-btn--ghost{background:transparent;color:var(--pos-ink);border-color:var(--pos-rule-2);box-shadow:none}
.pos-btn--ghost:hover{border-color:var(--pos-rule-strong);background:color-mix(in oklch, var(--pos-ink) 6%, transparent)}
.pos-btn--glass{
background:var(--pos-glass-2);color:var(--pos-ink);border-color:var(--pos-rule-2);
-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:var(--pos-bevel)}
.pos-btn--glass:hover{border-color:var(--pos-rule-strong)}
.pos-btn--sm{padding:7px 13px;font-size:.82rem}
/* ─── Tags / badges / points d'état ──────────────────────────── */
.pos-tag{
display:inline-flex;align-items:center;gap:6px;
padding:3px 10px;border-radius:var(--pos-r-pill);
font-size:.72rem;font-weight:600;letter-spacing:.01em;
background:var(--pos-bg-soft);color:var(--pos-ink-soft);border:1px solid var(--pos-rule);
}
.pos-tag--accent{background:var(--pos-accent-soft);color:var(--pos-accent-ink);border-color:transparent}
.pos-tag--ok{background:var(--pos-ok-soft);color:var(--pos-ok);border-color:transparent}
.pos-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--pos-ink-faint)}
.pos-dot--ok{background:var(--pos-ok);box-shadow:0 0 0 3px color-mix(in oklch,var(--pos-ok) 22%,transparent)}
.pos-dot--err{background:var(--pos-err);box-shadow:0 0 0 3px color-mix(in oklch,var(--pos-err) 22%,transparent)}
.pos-dot--warn{background:var(--pos-warn);box-shadow:0 0 0 3px color-mix(in oklch,var(--pos-warn) 22%,transparent)}
/* ─── Grilles utilitaires ─────────────────────────────────────── */
.pos-grid{display:grid;gap:var(--pos-space-md)}
.pos-grid--auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.pos-grid--2{grid-template-columns:repeat(2,1fr)}
.pos-grid--3{grid-template-columns:repeat(3,1fr)}
.pos-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:780px){
.pos-grid--2,.pos-grid--3,.pos-grid--4{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
.pos-grid--2,.pos-grid--3,.pos-grid--4{grid-template-columns:1fr}
}
/* ─── Listes simples (lignes à filet) ────────────────────────── */
.pos-rows{display:flex;flex-direction:column}
.pos-row{
display:flex;align-items:center;gap:14px;padding:14px 2px;
border-bottom:1px solid var(--pos-rule);
transition:background var(--pos-fast) var(--pos-ease);
}
.pos-row:last-child{border-bottom:0}
.pos-row--link{margin:0 -10px;padding:14px 10px;border-radius:var(--pos-r)}
.pos-row--link:hover{background:var(--pos-bg-soft)}
.pos-row__main{flex:1;min-width:0}
.pos-row__time{
font-family:var(--pos-mono);
font-variant-numeric:tabular-nums;color:var(--pos-ink-mute);font-size:.85rem;
min-width:48px;
}
/* ─── Inputs ──────────────────────────────────────────────────── */
.pos-input,.pos-textarea,.pos-select{
width:100%;padding:11px 14px;border:1px solid var(--pos-rule-2);
border-radius:var(--pos-r);background:var(--pos-surface);color:var(--pos-ink);
font-family:var(--pos-sans);
transition:border-color var(--pos-fast) var(--pos-ease),box-shadow var(--pos-fast) var(--pos-ease);
}
.pos-input:focus,.pos-textarea:focus,.pos-select:focus{outline:0;border-color:var(--pos-accent);box-shadow:var(--pos-ring)}
.pos-input::placeholder,.pos-textarea::placeholder{color:var(--pos-ink-faint)}
.pos-textarea{min-height:120px;resize:vertical;line-height:1.6}
/* ─── Barre de progression ────────────────────────────────────── */
.pos-bar{height:6px;border-radius:var(--pos-r-pill);background:var(--pos-bg-soft);overflow:hidden;border:1px solid color-mix(in oklch,var(--pos-rule) 60%,transparent)}
.pos-bar__fill{height:100%;background:var(--pos-ink);border-radius:inherit;transition:width var(--pos-base) var(--pos-ease-out)}
.pos-bar__fill--accent{background:var(--pos-accent)}
.pos-bar__fill--over{background:var(--pos-err)}
/* ─── Verre, séparateurs, touches ────────────────────────────── */
.pos-glass{
background:var(--pos-glass);
-webkit-backdrop-filter:blur(var(--pos-glass-blur)) saturate(150%);
backdrop-filter:blur(var(--pos-glass-blur)) saturate(150%);
border:1px solid color-mix(in oklch, var(--pos-rule-strong) 26%, transparent);
box-shadow:var(--pos-bevel),var(--pos-shadow);
}
.pos-divider{width:1px;align-self:stretch;background:var(--pos-rule)}
.pos-kbd{
font-family:var(--pos-mono);font-size:.72rem;line-height:1;
padding:3px 6px;border-radius:6px;color:var(--pos-ink-soft);
background:var(--pos-bg-soft);border:1px solid var(--pos-rule);
box-shadow:var(--pos-bevel);
}
/* ─── Skeleton (états de chargement) ─────────────────────────── */
.pos-skeleton{
background:linear-gradient(100deg,var(--pos-bg-soft) 30%,var(--pos-surface-2) 50%,var(--pos-bg-soft) 70%);
background-size:200% 100%;border-radius:var(--pos-r);animation:posShimmer 1.4s linear infinite;
}
@keyframes posShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* ─── Reveal orchestré au chargement (staggered) ─────────────── */
.pos-reveal{opacity:0;transform:translateY(12px);animation:posReveal .62s var(--pos-ease-out) forwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes posReveal{to{opacity:1;transform:none}}
/* ─── Accessibilité ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
.pos-reveal{opacity:1;transform:none}
}