/* Gestion Physalis : 20 designs (généré par scratchpad/gen_designs.py). Chacun ne fait que changer des variables,
   plus quelques règles propres à son ambiance. Le design 1 est le design actuel (aucun attribut). */

@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/space-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/source-serif-4-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/outfit-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/outfit-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/manrope-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/sora-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/sora-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/bricolage-grotesque-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}

html[data-design] h1, html[data-design] h2, html[data-design] h3 { font-family: var(--police-titre, var(--police)); }
html[data-design] .panneau, html[data-design] .chiffres { border-width: var(--bw, 1px); border-color: var(--trait); }
html[data-design] .panneau > .tete { padding-top: 16px; }
html[data-design] input[type=text], html[data-design] input[type=email], html[data-design] input[type=password], html[data-design] input[type=search], html[data-design] input[type=number], html[data-design] input[type=date], html[data-design] select, html[data-design] textarea { background-color: var(--blanc); color: var(--encre); border-color: var(--trait-fort); border-radius: var(--r-champ); }
html[data-design] .bouton { border-radius: var(--r-champ); background: var(--blanc); border-color: var(--trait-fort); }
html[data-design] .bouton:hover { background: var(--discret-2); }
html[data-design] .bouton.principal { background: var(--vert); border-color: var(--vert); }
html[data-design] .menu { border-right-color: var(--beige-trait); }
html[data-design] .liste th, html[data-design] .liste td { border-bottom-color: var(--trait); }
html[data-design] .puce { background: var(--blanc); border-color: var(--trait-fort); }
html[data-design] .puce[aria-current="page"], html[data-design] .puce[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: var(--sur-accent); }
html[data-design][data-ton="sombre"] { color-scheme: dark; --bon: #5fd68f; --bon-doux: color-mix(in srgb, #5fd68f 16%, var(--blanc)); --alerte: #f5b94a; --alerte-doux: color-mix(in srgb, #f5b94a 16%, var(--blanc)); --danger: #ff7b7b; --danger-doux: color-mix(in srgb, #ff7b7b 16%, var(--blanc)); --info-doux: color-mix(in srgb, #6ea8fe 16%, var(--blanc)); }
html[data-design][data-ton="sombre"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c8cdd6' stroke-width='1.6'/%3E%3C/svg%3E"); }
html[data-design][data-ton="sombre"] .note, html[data-design][data-ton="sombre"] .etat.info { color: var(--encre); }
html[data-design][data-ton="sombre"] .courriel-html { color-scheme: light; }
html[data-design] .note { background: var(--info-doux); }
html[data-design] .note.alerte { background: var(--alerte-doux); }
html[data-design] .note.danger { background: var(--danger-doux); }
html[data-design] .barres .rail { background: var(--discret); }
html[data-design] .interrupteur i { background: var(--trait-fort); }
html[data-design] .interrupteur input:checked + i { background: var(--vert); }
html[data-design] .st-carte-svg { background: var(--discret); }
html[data-design] .anneau-total { fill: var(--encre); }

/* Sélecteur de designs (flèche précédent / suivant) */
.designs-fleche { position: fixed; z-index: 90; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: #1f1c14; color: #fff; box-shadow: 0 8px 26px rgba(0, 0, 0, .35); font: 700 .8125rem/1 system-ui, sans-serif; }
.designs-fleche button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.25rem; cursor: pointer; display: grid; place-items: center; }
.designs-fleche button:hover { background: rgba(255, 255, 255, .26); }
.designs-fleche .nom { min-width: 9.5em; text-align: center; padding: 0 6px; white-space: nowrap; }
.designs-fleche .nom small { display: block; font-weight: 400; opacity: .7; margin-top: 3px; font-size: .6875rem; }
@media print { .designs-fleche { display: none; } }

/* 2. Ardoise */
html[data-design="2"] { --papier:#12161d; --blanc:#1b212b; --encre:#e7ebf1; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#5ac8fa; --vert-2:#8fdcff; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#5ac8fa; --fruit-clair:#8fdcff; --sur-accent:#06131c; --beige:#0e1218; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#5ac8fa; --s2:#ff9f43; --s3:#7bd88f; --s4:#c792ea; --s5:#ffd166; --s6:#ff6b81; --s7:#4dd0c8; --s8:#9aa5b1; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#5ac8fa; --serie-2:#ff9f43; --serie-3:#7bd88f; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:12px; --r-champ:8px; --bw:1px; --ombre:0 1px 0 rgba(255,255,255,.03); }
html[data-design="2"] body { background-color: var(--papier); color: var(--encre); }

/* 3. Journal */
html[data-design="3"] { --papier:#f2ece0; --blanc:#fffdf7; --encre:#1b1b1b; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#9b1c1c; --vert-2:#7a1414; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#9b1c1c; --fruit-clair:#7a1414; --sur-accent:#fff; --beige:#e8e0cf; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#9b1c1c; --s2:#1f4e79; --s3:#6b5b2a; --s4:#4a6741; --s5:#a15c00; --s6:#5b3a6e; --s7:#2a2a2a; --s8:#7d7d7d; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#9b1c1c; --serie-2:#1f4e79; --serie-3:#6b5b2a; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Source Serif 4", Georgia, "Times New Roman", serif; --police-titre:"Source Serif 4", Georgia, "Times New Roman", serif; --r-panneau:2px; --r-champ:2px; --bw:1px; --ombre:none; }
html[data-design="3"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="3"] h1 { font-size:2.1rem;letter-spacing:-.02em}
html[data-design="3"] .panneau>.tete { border-bottom:3px double var(--encre);padding-bottom:10px}
html[data-design="3"] .panneau>.tete h2 { text-transform:uppercase;letter-spacing:.08em;font-size:.9rem}
html[data-design="3"] .chiffre .valeur { font-weight:400}

/* 4. Terminal */
html[data-design="4"] { --papier:#070b07; --blanc:#0c130c; --encre:#b8ffb8; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#39ff6a; --vert-2:#8dffa9; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#39ff6a; --fruit-clair:#8dffa9; --sur-accent:#021002; --beige:#050805; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#39ff6a; --s2:#ffb000; --s3:#00e5ff; --s4:#ff5f56; --s5:#c3ff00; --s6:#ff79c6; --s7:#8be9fd; --s8:#6b8f6b; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#39ff6a; --serie-2:#ffb000; --serie-3:#00e5ff; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --police-titre:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --r-panneau:0px; --r-champ:0px; --bw:1px; --ombre:none; }
html[data-design="4"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="4"] body { font-size:14.5px}
html[data-design="4"] h1, html[data-design="4"] h2, html[data-design="4"] h3 { font-weight:700}
html[data-design="4"] h1::before { content:"> ";color:var(--vert)}
html[data-design="4"] .panneau, html[data-design="4"] .chiffres { border-style:dashed}
html[data-design="4"] .bouton { text-transform:lowercase}

/* 5. Néon */
html[data-design="5"] { --papier:#0c0a1d; --blanc:#16132d; --encre:#f0ebff; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#ff3ea5; --vert-2:#ff7ac4; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#ff3ea5; --fruit-clair:#ff7ac4; --sur-accent:#1a0212; --beige:#090717; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#ff3ea5; --s2:#22e1ff; --s3:#a78bfa; --s4:#ffe14d; --s5:#4dffb8; --s6:#ff8a3d; --s7:#7aa2ff; --s8:#9b93c9; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#ff3ea5; --serie-2:#22e1ff; --serie-3:#a78bfa; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:16px; --r-champ:10px; --bw:1px; --ombre:0 0 0 1px rgba(255,62,165,.18), 0 10px 34px rgba(255,62,165,.10); }
html[data-design="5"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="5"] .panneau, html[data-design="5"] .chiffres { border-color:rgba(255,62,165,.28)}
html[data-design="5"] .chiffre.vedette .valeur, html[data-design="5"] .st-direct-nb .valeur { text-shadow:0 0 18px rgba(255,62,165,.55)}

/* 6. Océan */
html[data-design="6"] { --papier:#eaf3f8; --blanc:#ffffff; --encre:#0e2a3b; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#0a6c9e; --vert-2:#08577f; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#0a6c9e; --fruit-clair:#08577f; --sur-accent:#fff; --beige:#d8e9f2; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#0a6c9e; --s2:#f28f3b; --s3:#2a9d8f; --s4:#7b61ff; --s5:#e9c46a; --s6:#e76f51; --s7:#264653; --s8:#8aa0ad; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#0a6c9e; --serie-2:#f28f3b; --serie-3:#2a9d8f; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:20px; --r-champ:12px; --bw:1px; --ombre:0 6px 24px rgba(10,80,120,.08); }
html[data-design="6"] body { background-color: var(--papier); color: var(--encre); }

/* 7. Forêt */
html[data-design="7"] { --papier:#0e1913; --blanc:#15251d; --encre:#e8efe6; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#d9b44a; --vert-2:#ecca6a; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#d9b44a; --fruit-clair:#ecca6a; --sur-accent:#1a1405; --beige:#0a130e; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#d9b44a; --s2:#7fc8a0; --s3:#e07a5f; --s4:#8ab4f8; --s5:#c9a0dc; --s6:#f2cc8f; --s7:#81b29a; --s8:#a3b1a6; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#d9b44a; --serie-2:#7fc8a0; --serie-3:#e07a5f; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Newsreader", Georgia, "Times New Roman", serif; --police-titre:"Newsreader", Georgia, "Times New Roman", serif; --r-panneau:8px; --r-champ:6px; --bw:1px; --ombre:0 2px 12px rgba(0,0,0,.25); }
html[data-design="7"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="7"] body { font-size:17px}
html[data-design="7"] h1 { font-size:2rem;font-weight:700}

/* 8. Brutaliste */
html[data-design="8"] { --papier:#f1f0ea; --blanc:#ffffff; --encre:#000000; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#ffd400; --vert-2:#0036d6; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#ffd400; --fruit-clair:#0036d6; --sur-accent:#000; --beige:#ffd400; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#ff3b30; --s2:#0050ff; --s3:#00a86b; --s4:#ff9500; --s5:#7a00ff; --s6:#000000; --s7:#00b8d9; --s8:#777777; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#ff3b30; --serie-2:#0050ff; --serie-3:#00a86b; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:0px; --r-champ:0px; --bw:3px; --ombre:6px 6px 0 #000; }
html[data-design="8"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="8"] .panneau, html[data-design="8"] .chiffres, html[data-design="8"] .bouton, html[data-design="8"] input, html[data-design="8"] select, html[data-design="8"] textarea, html[data-design="8"] .puce { border-color:#000!important}
html[data-design="8"] .bouton.principal, html[data-design="8"] .puce[aria-current=page], html[data-design="8"] .puce[aria-pressed=true] { color:#000;box-shadow:3px 3px 0 #000}
html[data-design="8"] .menu { border-right:3px solid #000}
html[data-design="8"] h1, html[data-design="8"] h2, html[data-design="8"] h3 { font-weight:700;text-transform:uppercase;letter-spacing:.02em}
html[data-design="8"] .lien[aria-current=page] { box-shadow:3px 3px 0 #000;border:2px solid #000}
html[data-design="8"] .chiffre.vedette .valeur, html[data-design="8"] .st-direct-nb .valeur, html[data-design="8"] .lien[aria-current=page], html[data-design="8"] .menu-pied a, html[data-design="8"] .menu-pied button { color:#000}
html[data-design="8"] .liste .principal:hover { color:#0036d6}
html[data-design="8"] .st-empile span { outline:2px solid #000}

/* 9. Pastel */
html[data-design="9"] { --papier:#f6f1fb; --blanc:#ffffff; --encre:#3b3350; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#7b5cc4; --vert-2:#6446ad; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#7b5cc4; --fruit-clair:#6446ad; --sur-accent:#fff; --beige:#ece3f8; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#7b5cc4; --s2:#ff8fab; --s3:#5ec4b6; --s4:#ffc857; --s5:#6fa8ff; --s6:#ff9f7a; --s7:#b08fe0; --s8:#a39bb5; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#7b5cc4; --serie-2:#ff8fab; --serie-3:#5ec4b6; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:26px; --r-champ:14px; --bw:1px; --ombre:0 8px 26px rgba(123,92,196,.10); }
html[data-design="9"] body { background-color: var(--papier); color: var(--encre); }

/* 10. Minimal */
html[data-design="10"] { --papier:#fafafa; --blanc:#ffffff; --encre:#111111; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#2563eb; --vert-2:#1d4ed8; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#2563eb; --fruit-clair:#1d4ed8; --sur-accent:#fff; --beige:#fafafa; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#2563eb; --s2:#f59e0b; --s3:#10b981; --s4:#8b5cf6; --s5:#ef4444; --s6:#06b6d4; --s7:#111111; --s8:#9ca3af; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#2563eb; --serie-2:#f59e0b; --serie-3:#10b981; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:6px; --r-champ:6px; --bw:1px; --ombre:none; }
html[data-design="10"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="10"] .panneau, html[data-design="10"] .chiffres { border-color:#ececec}
html[data-design="10"] .contenu { padding-top:40px}
html[data-design="10"] h1 { font-weight:700;font-size:1.5rem}

/* 11. Contraste */
html[data-design="11"] { --papier:#ffffff; --blanc:#ffffff; --encre:#000000; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#0000cc; --vert-2:#000099; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#0000cc; --fruit-clair:#000099; --sur-accent:#fff; --beige:#f0f0f0; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#0000cc; --s2:#d55e00; --s3:#009e73; --s4:#cc79a7; --s5:#e69f00; --s6:#56b4e9; --s7:#000000; --s8:#666666; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#0000cc; --serie-2:#d55e00; --serie-3:#009e73; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:4px; --r-champ:4px; --bw:2px; --ombre:none; }
html[data-design="11"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="11"] .panneau, html[data-design="11"] .chiffres { border-color:#000}
html[data-design="11"] body { font-size:17px}
html[data-design="11"] a { text-decoration-thickness:2px}

/* 12. Sable */
html[data-design="12"] { --papier:#f1e7d8; --blanc:#fbf5ea; --encre:#3a2a1d; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#b4532a; --vert-2:#8f3f1d; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#b4532a; --fruit-clair:#8f3f1d; --sur-accent:#fff; --beige:#e7d7c0; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#b4532a; --s2:#4a6c6f; --s3:#c79a3b; --s4:#7a5c8c; --s5:#6b8e4e; --s6:#c75d6b; --s7:#8c6d4f; --s8:#9a8b7a; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#b4532a; --serie-2:#4a6c6f; --serie-3:#c79a3b; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Newsreader", Georgia, "Times New Roman", serif; --police-titre:"Newsreader", Georgia, "Times New Roman", serif; --r-panneau:10px; --r-champ:8px; --bw:1px; --ombre:0 2px 8px rgba(80,50,20,.08); }
html[data-design="12"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="12"] body { font-size:17px}

/* 13. Corail */
html[data-design="13"] { --papier:#fff3ec; --blanc:#ffffff; --encre:#3d2321; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#f0553c; --vert-2:#cc3f28; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#f0553c; --fruit-clair:#cc3f28; --sur-accent:#fff; --beige:#ffe0d1; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#f0553c; --s2:#2b7a9b; --s3:#f4a259; --s4:#5b8e7d; --s5:#8e5572; --s6:#ffbc42; --s7:#d1495b; --s8:#a58b86; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#f0553c; --serie-2:#2b7a9b; --serie-3:#f4a259; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:30px; --r-champ:16px; --bw:1px; --ombre:0 10px 30px rgba(240,85,60,.10); }
html[data-design="13"] body { background-color: var(--papier); color: var(--encre); }

/* 14. Aurore */
html[data-design="14"] { --papier:#eef2ff; --blanc:rgba(255,255,255,.66); --encre:#1d2340; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#5b6cff; --vert-2:#4453e6; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#5b6cff; --fruit-clair:#4453e6; --sur-accent:#fff; --beige:rgba(255,255,255,.55); --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#5b6cff; --s2:#ff7ab6; --s3:#22c1a4; --s4:#ffb347; --s5:#a06bff; --s6:#3bb2ff; --s7:#ff6b6b; --s8:#8a93b8; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#5b6cff; --serie-2:#ff7ab6; --serie-3:#22c1a4; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:22px; --r-champ:12px; --bw:1px; --ombre:0 10px 40px rgba(91,108,255,.12); }
html[data-design="14"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="14"] body { background:linear-gradient(135deg,#e5eeff 0%,#f4e8ff 48%,#e2fbf1 100%) fixed}
html[data-design="14"] .panneau, html[data-design="14"] .chiffres, html[data-design="14"] .menu { backdrop-filter:blur(16px) saturate(1.3);border-color:rgba(255,255,255,.7)}
html[data-design="14"] .lien[aria-current=page] { background:rgba(255,255,255,.85)}

/* 15. Console */
html[data-design="15"] { --papier:#d4d0c8; --blanc:#f6f4ef; --encre:#000000; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#000080; --vert-2:#0000aa; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#000080; --fruit-clair:#0000aa; --sur-accent:#fff; --beige:#c9c5bc; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#000080; --s2:#a00000; --s3:#007a00; --s4:#808000; --s5:#800080; --s6:#008080; --s7:#000000; --s8:#808080; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#000080; --serie-2:#a00000; --serie-3:#007a00; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:Tahoma, "Segoe UI", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:Tahoma, "Segoe UI", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:0px; --r-champ:0px; --bw:2px; --ombre:none; }
html[data-design="15"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="15"] body { font-size:14px}
html[data-design="15"] .panneau, html[data-design="15"] .chiffres, html[data-design="15"] input, html[data-design="15"] select, html[data-design="15"] textarea { border:2px solid;border-color:#808080 #fff #fff #808080}
html[data-design="15"] .bouton { border:2px solid;border-color:#fff #404040 #404040 #fff;background:#d4d0c8}
html[data-design="15"] .bouton:active { border-color:#404040 #fff #fff #404040}
html[data-design="15"] .panneau>.tete { background:#000080;color:#fff;padding:5px 10px;margin:0}
html[data-design="15"] .panneau>.tete h2, html[data-design="15"] .panneau>.tete p { color:#fff;font-size:.9rem}
html[data-design="15"] .puces .puce { border-radius:0}

/* 16. Menthe */
html[data-design="16"] { --papier:#edf9f3; --blanc:#ffffff; --encre:#12342a; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#0f9d78; --vert-2:#0b7a5c; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#0f9d78; --fruit-clair:#0b7a5c; --sur-accent:#fff; --beige:#d6f0e5; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#0f9d78; --s2:#f08a4b; --s3:#3b82c4; --s4:#b9689e; --s5:#d9b23a; --s6:#e0566c; --s7:#2d5f52; --s8:#8fa89f; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#0f9d78; --serie-2:#f08a4b; --serie-3:#3b82c4; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:14px; --r-champ:10px; --bw:1px; --ombre:0 2px 10px rgba(15,157,120,.07); }
html[data-design="16"] body { background-color: var(--papier); color: var(--encre); }

/* 17. Crépuscule */
html[data-design="17"] { --papier:#0e142e; --blanc:#171f44; --encre:#eaeefc; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#ffb454; --vert-2:#ffc983; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#ffb454; --fruit-clair:#ffc983; --sur-accent:#1a1204; --beige:#0a0f26; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#ffb454; --s2:#6ea8fe; --s3:#ff6e9c; --s4:#7ee0b0; --s5:#b79bff; --s6:#ffd86e; --s7:#5ad1e6; --s8:#9aa3c7; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#ffb454; --serie-2:#6ea8fe; --serie-3:#ff6e9c; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:14px; --r-champ:10px; --bw:1px; --ombre:0 8px 28px rgba(0,0,0,.28); }
html[data-design="17"] body { background-color: var(--papier); color: var(--encre); }

/* 18. Fraise */
html[data-design="18"] { --papier:#fff0f3; --blanc:#ffffff; --encre:#4a1424; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#d6204a; --vert-2:#aa1538; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#d6204a; --fruit-clair:#aa1538; --sur-accent:#fff; --beige:#ffdbe3; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#d6204a; --s2:#2d6a4f; --s3:#f4a261; --s4:#4361ee; --s5:#9d4edd; --s6:#e9c46a; --s7:#0096c7; --s8:#9a7b84; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#d6204a; --serie-2:#2d6a4f; --serie-3:#f4a261; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --police-titre:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --r-panneau:16px; --r-champ:10px; --bw:1px; --ombre:0 6px 20px rgba(214,32,74,.08); }
html[data-design="18"] body { background-color: var(--papier); color: var(--encre); }

/* 19. Plan bleu */
html[data-design="19"] { --papier:#103475; --blanc:#15408a; --encre:#e9f1ff; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#ffe066; --vert-2:#ffec99; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#ffe066; --fruit-clair:#ffec99; --sur-accent:#0a2250; --beige:#0c2a60; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#ffe066; --s2:#7fd6ff; --s3:#ff9bb3; --s4:#9be59b; --s5:#ffb86b; --s6:#d0b3ff; --s7:#ffffff; --s8:#9fb7e6; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#ffe066; --serie-2:#7fd6ff; --serie-3:#ff9bb3; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --police-titre:"JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; --r-panneau:0px; --r-champ:0px; --bw:1px; --ombre:none; }
html[data-design="19"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="19"] body { background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:28px 28px;font-size:14.5px}
html[data-design="19"] .panneau, html[data-design="19"] .chiffres { border-color:rgba(255,255,255,.55)}

/* 20. Or et noir */
html[data-design="20"] { --papier:#0b0a08; --blanc:#14120e; --encre:#efe6d2; --ardoise:color-mix(in srgb, var(--encre) 72%, var(--papier)); --brume:color-mix(in srgb, var(--encre) 55%, var(--papier)); --trait:color-mix(in srgb, var(--encre) 11%, var(--blanc)); --trait-fort:color-mix(in srgb, var(--encre) 24%, var(--blanc)); --discret:color-mix(in srgb, var(--encre) 6%, var(--blanc)); --discret-2:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --survol:color-mix(in srgb, var(--encre) 4%, var(--blanc)); --selection:color-mix(in srgb, var(--vert) 12%, var(--blanc)); --vert:#c9a24b; --vert-2:#e0bf6a; --vert-doux:color-mix(in srgb, var(--vert) 14%, var(--blanc)); --fruit:#c9a24b; --fruit-clair:#e0bf6a; --sur-accent:#120d02; --beige:#080706; --beige-2:color-mix(in srgb, var(--encre) 9%, var(--beige)); --beige-trait:color-mix(in srgb, var(--encre) 14%, var(--beige)); --grille:color-mix(in srgb, var(--encre) 8%, var(--blanc)); --s1:#c9a24b; --s2:#7aa6c2; --s3:#c4716b; --s4:#8aab8a; --s5:#b497d6; --s6:#e3d3a0; --s7:#d98e4a; --s8:#8d8576; --sg:color-mix(in srgb, var(--encre) 45%, var(--blanc)); --serie-1:#c9a24b; --serie-2:#7aa6c2; --serie-3:#c4716b; --carte-vide:color-mix(in srgb, var(--encre) 10%, var(--blanc)); --chaleur-vide:color-mix(in srgb, var(--encre) 7%, var(--blanc)); --police:"Newsreader", Georgia, "Times New Roman", serif; --police-titre:"Newsreader", Georgia, "Times New Roman", serif; --r-panneau:3px; --r-champ:3px; --bw:1px; --ombre:none; }
html[data-design="20"] body { background-color: var(--papier); color: var(--encre); }
html[data-design="20"] body { font-size:17px}
html[data-design="20"] .panneau, html[data-design="20"] .chiffres { border-color:rgba(201,162,75,.35)}
html[data-design="20"] h1, html[data-design="20"] h2 { letter-spacing:.03em}
html[data-design="20"] h1 { font-weight:400;font-size:2.1rem}
html[data-design="20"] .chiffre .valeur { font-weight:400}