@font-face { font-family: Roboto; src: url(/assets/polices/roboto-latin-wght.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
[data-peau="sombre"] {
  --fond: #150f0b;
  --surface: #211a15;
  --surface-2: #2c251f;
  --surface-3: #352c25;
  --trait: rgba(255, 235, 210, .08);
  --trait-fort: rgba(255, 235, 210, .15);
  --trait-champ: oklch(0.60 0.02 60);
  --encre: #eef1f6;
  --encre-2: #a4adbb;
  --encre-3: #99a2ae;
  --accent: oklch(0.80 0.13 60);
  --accent-fond: color-mix(in oklch, var(--accent) 19%, transparent);
  --sur-accent: #0b0e13;
  --sur-douce: var(--accent);
  --vert: oklch(0.80 0.13 162);
  --vert-fond: oklch(0.34 0.07 162);
  --ambre: oklch(0.84 0.13 78);
  --ambre-fond: oklch(0.36 0.07 78);
  --rouge: oklch(0.74 0.14 20);
  --rouge-fond: oklch(0.35 0.08 20);
  --ombre: none;
  --ombre-forte: 0 2px 8px rgba(0, 0, 0, .5), 0 20px 44px -18px rgba(0, 0, 0, .8);
  --lueur: rgba(255, 255, 255, .04);
}
[data-peau="clair"], :root:not([data-peau]) {
  --fond: #f6efe6;
  --surface: #fefcf9;
  --surface-2: #f2e8da;
  --surface-3: #f1e5d6;
  --trait: rgba(60, 35, 0, .09);
  --trait-fort: rgba(60, 35, 0, .16);
  --trait-champ: oklch(0.58 0.02 75);
  --encre: #12161d;
  --encre-2: #55504a;
  --encre-3: #5f5a53;
  --accent: oklch(0.62 0.14 60);
  --accent-fond: color-mix(in oklch, var(--accent) 18%, transparent);
  --sur-accent: #12161d;
  --sur-douce: color-mix(in oklch, var(--accent) 62%, #0b0e13);
  --vert: oklch(0.48 0.12 162);
  --vert-fond: oklch(0.95 0.04 162);
  --ambre: oklch(0.50 0.12 78);
  --ambre-fond: oklch(0.95 0.05 78);
  --rouge: oklch(0.52 0.17 20);
  --rouge-fond: oklch(0.95 0.03 20);
  --ombre: none;
  --ombre-forte: 0 8px 28px -8px rgba(40, 20, 0, .28);
  --lueur: rgba(16, 20, 28, .02);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-peau]) {
    --fond: #150f0b;
    --surface: #211a15;
    --surface-2: #2c251f;
    --surface-3: #352c25;
    --trait: rgba(255, 235, 210, .08);
    --trait-fort: rgba(255, 235, 210, .15);
    --trait-champ: oklch(0.60 0.02 60);
    --encre: #eef1f6;
    --encre-2: #a4adbb;
    --encre-3: #99a2ae;
    --accent: oklch(0.80 0.13 60);
    --accent-fond: color-mix(in oklch, var(--accent) 19%, transparent);
    --sur-accent: #0b0e13;
    --sur-douce: var(--accent);
    --vert: oklch(0.80 0.13 162);
    --vert-fond: oklch(0.34 0.07 162);
    --ambre: oklch(0.84 0.13 78);
    --ambre-fond: oklch(0.36 0.07 78);
    --rouge: oklch(0.74 0.14 20);
    --rouge-fond: oklch(0.35 0.08 20);
    --ombre: none;
    --ombre-forte: 0 2px 8px rgba(0, 0, 0, .5), 0 20px 44px -18px rgba(0, 0, 0, .8);
    --lueur: rgba(255, 255, 255, .04);
  }
}
:root { color-scheme: light dark; }
:root[data-peau="clair"] { color-scheme: light; }
:root[data-peau="sombre"] { color-scheme: dark; }
:root {
  --encre-douce: var(--encre-2);
  --encre-tenue: var(--encre-3);
  --carte: var(--surface);
  --carte-douce: var(--surface-3);
  --accent-doux: var(--accent-fond);
  --accent-encre: var(--sur-accent);
  --accent-vif: color-mix(in oklch, var(--accent) 78%, var(--rouge));
}
:root {
  --marque: #fba962;
  --accent-fond-doux: color-mix(in oklch, var(--accent) 8%, var(--surface));
  --encre-4: color-mix(in oklch, var(--encre-3) 70%, var(--surface));
  --lateral: color-mix(in oklch, var(--accent) 10%, var(--surface-2));
  --survol-lateral: color-mix(in oklch, var(--encre) 8%, transparent);
  --r-pastille: 999px;
  --r-carte: 28px;
  --r-vignette: 24px;
  --r-tuile: 20px;
  --r-champ: 16px;
  --r-petit: 10px;
  --r-ilot: 36px;
  --h-saisie: 44px;
  --h-chrome: 37px;
  --h-coque: 3rem;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --d-pression: .12s;
  --d-survol: .18s;
  --d-toast: .26s;
  --d-ecran: .3s;
  --d-barre: .4s;
  --d-recalcul: .5s;
  --courbe-emphase: cubic-bezier(.2, 0, 0, 1);
  --courbe-sortie: cubic-bezier(.3, 0, .8, .15);
  --t-1: .75rem;
  --t-2: .8125rem;
  --t-3: .875rem;
  --t-4: .9375rem;
  --t-5: 1.125rem;
  --t-6: 1.375rem;
  --t-7: 1.75rem;
  --pile: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --lat: 292px;
  --topbar: 62px;
  --colonne-laterale: 300px;
}
.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre);
}
.icone { line-height: 1; flex: none; }
@keyframes arrivee { from { opacity: 0; transform: translateY(var(--dy, .5rem)); } }
@keyframes tourne { to { transform: rotate(360deg); } }