/* OVERFLOW FIX */
html, body {
overflow-x: hidden;
max-width: 100vw;
width: 100%;
}
.layout {
overflow-x: hidden;
max-width: 100vw;
}
/* GLOBAL PRAXIS EVENTS CSS */
/* FROM velvet.html */
/* Variables (light Mode) */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
--panel-bg: rgba(17, 17, 17, 0.02);
}
/* Variables (dark Mode) */
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
/* Détection auto OS */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
/* SVG ROTATIF EN FILIGRANE */
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.graphic-score { width: 100%; height: 100%; animation: spin 50s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
/* GRILLE PRINCIPALE */
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
/* HEADER */
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 4vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.back-link, .header-brand, .nav-controls { white-space: nowrap; }
.back-short, .brand-short { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
.back-link { color: var(--accent); font-weight: bold; }
/* STRUCTURE FICHE TECHNIQUE (2 COLONNES) */
.datasheet {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 3vw;
border-top: 1px solid var(--text);
padding-top: 3vh;
margin-bottom: 5vh;
}
/* COLONNE GAUCHE (DATA TECHNIQUE) */
.col-tech {
border-right: 1px solid var(--grid-line);
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.module-badge {
font-family: monospace;
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: clamp(2.4rem, 4vw, 4.2rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
}
.tagline {
font-family: monospace;
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--grid-line);
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-family: monospace;
font-size: 0.85rem;
margin-bottom: 2.5rem;
}
.spec-table tr {
border-bottom: 1px dashed var(--grid-line);
}
.spec-table td {
padding: 0.9rem 0;
vertical-align: top;
}
.spec-table td.label {
color: var(--text);
opacity: 0.5;
width: 38%;
text-transform: uppercase;
}
.spec-table td.val {
font-weight: 500;
}
/* BOUTON CTA */
.btn-cta {
display: inline-block;
font-family: monospace;
font-size: 0.95rem;
text-transform: uppercase;
padding: 1.1rem 1.6rem;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-weight: bold;
transition: all 0.2s ease;
text-align: center;
letter-spacing: 0.05em;
margin-top: auto;
}
.btn-cta:hover {
background-color: var(--accent);
color: var(--bg);
}
/* COLONNE DROITE (ARTISTIQUE & MÉDIAS) */
.col-artistic {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
h2 {
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0 0 1rem 0;
color: var(--text);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
}
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.editorial-text {
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.65;
color: var(--text);
margin: 0;
}
.editorial-text p {
margin: 0 0 1.2rem 0;
}
/* SECTION EXTRAITS & LECTEUR */
.audio-section {
background: var(--panel-bg);
border: 1px solid var(--grid-line);
padding: 1.5rem;
}
.audio-header {
font-family: monospace;
font-size: 0.85rem;
text-transform: uppercase;
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.live-indicator {
color: var(--accent);
animation: blink 2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.links-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.link-pill {
font-family: monospace;
font-size: 0.85rem;
border: 1px solid var(--text);
padding: 0.5rem 1rem;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.link-pill:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--hover-bg);
}
/* CITATION PRESSE */
.press-quote {
border-left: 2px solid var(--accent);
padding-left: 1.5rem;
font-family: monospace;
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.85;
margin: 1rem 0;
}
/* LECTEUR AUDIO AUTONOME SWISS STYLE */
.swiss-player {
background: var(--bg);
border: 1px solid var(--text);
padding: 1.2rem;
margin: 1.2rem 0;
font-family: monospace;
}
.player-header {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
margin-bottom: 0.8rem;
font-weight: 500;
flex-wrap: wrap;
gap: 0.4rem;
}
.player-scrubber {
width: 100%;
height: 6px;
background: var(--grid-line);
position: relative;
cursor: pointer;
margin-bottom: 1rem;
}
.player-progress {
width: 0%;
height: 100%;
background: var(--accent);
transition: width 0.1s linear;
}
.player-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
}
.player-btn {
background: none;
border: 1px solid var(--accent);
color: var(--accent);
font-family: inherit;
font-size: 0.85rem;
font-weight: bold;
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.2s;
}
.player-btn:hover {
background: var(--accent);
color: var(--bg);
}
.player-vu {
font-size: 0.8rem;
color: var(--accent);
letter-spacing: 0.05em;
}
/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 0.8rem;
padding-bottom: 0.75rem;
margin-bottom: 3vh;
font-size: 0.8rem;
align-items: center;
}
.back-link {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
}
.header-brand {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
opacity: 0.75;
font-size: 0.78rem;
}
.nav-controls {
grid-column: 1 / 3;
grid-row: 2 / 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.datasheet {
grid-template-columns: 1fr;
gap: 4vh;
}
.col-tech {
border-right: none;
border-bottom: 1px solid var(--grid-line);
padding-right: 0;
padding-bottom: 4vh;
}
h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.back-full { display: none; }
.back-short { display: inline; }
.brand-full { display: none; }
.brand-short { display: inline; }
}
/* FROM sur-mesure.html */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
--panel-bg: rgba(17, 17, 17, 0.02);
}
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.graphic-score { width: 100%; height: 100%; animation: spin 45s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 4vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.back-link, .header-brand, .nav-controls { white-space: nowrap; }
.back-short, .brand-short { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
.back-link { color: var(--accent); font-weight: bold; }
.datasheet {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 3vw;
border-top: 1px solid var(--text);
padding-top: 3vh;
margin-bottom: 5vh;
}
.col-tech {
border-right: 1px solid var(--grid-line);
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.module-badge {
font-family: monospace;
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: clamp(2.4rem, 4vw, 4.2rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
color: var(--accent);
}
.tagline {
font-family: monospace;
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--grid-line);
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-family: monospace;
font-size: 0.85rem;
margin-bottom: 2.5rem;
}
.spec-table tr {
border-bottom: 1px dashed var(--grid-line);
}
.spec-table td {
padding: 0.9rem 0;
vertical-align: top;
}
.spec-table td.label {
color: var(--text);
opacity: 0.5;
width: 38%;
text-transform: uppercase;
}
.spec-table td.val {
font-weight: 500;
}
.btn-cta {
display: inline-block;
font-family: monospace;
font-size: 0.95rem;
text-transform: uppercase;
padding: 1.1rem 1.6rem;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-weight: bold;
transition: all 0.2s ease;
text-align: center;
letter-spacing: 0.05em;
margin-top: auto;
}
.btn-cta:hover {
background-color: var(--accent);
color: var(--bg);
}
.col-artistic {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
h2 {
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0 0 1rem 0;
color: var(--text);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
}
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.heading-short { display: none; }
.editorial-text {
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.65;
color: var(--text);
margin: 0;
}
.editorial-text p {
margin: 0 0 1.2rem 0;
}
.quote-box {
background: var(--panel-bg);
border-left: 2px solid var(--accent);
padding: 1.5rem;
font-family: monospace;
font-size: 0.95rem;
line-height: 1.6;
margin: 1.5rem 0;
}
.steps-list {
list-style: none;
padding: 0;
margin: 0;
font-family: monospace;
font-size: 0.85rem;
line-height: 1.65;
}
.steps-list li {
padding: 0.75rem 0;
border-bottom: 1px dashed var(--grid-line);
}
.step-num {
color: var(--accent);
font-weight: bold;
margin-right: 0.5rem;
}
/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 0.8rem;
padding-bottom: 0.75rem;
margin-bottom: 3vh;
font-size: 0.8rem;
align-items: center;
}
.back-link {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
}
.header-brand {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
opacity: 0.75;
font-size: 0.78rem;
}
.nav-controls {
grid-column: 1 / 3;
grid-row: 2 / 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.datasheet {
grid-template-columns: 1fr;
gap: 4vh;
}
.col-tech {
border-right: none;
border-bottom: 1px solid var(--grid-line);
padding-right: 0;
padding-bottom: 4vh;
}
h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 480px) {
.heading-full { display: none; }
.heading-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.back-full { display: none; }
.back-short { display: inline; }
.brand-full { display: none; }
.brand-short { display: inline; }
}
/* SECTION EXTRAITS & LECTEUR */
.audio-section {
background: var(--panel-bg);
border: 1px solid var(--grid-line);
padding: 1.5rem;
margin-top: 2rem;
}
.audio-header {
font-family: monospace;
font-size: 0.85rem;
text-transform: uppercase;
margin-bottom: 1.2rem;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.8rem;
display: flex;
justify-content: space-between;
}
.live-indicator { color: var(--accent); }
/* LECTEUR AUDIO AUTONOME SWISS STYLE */
.swiss-player {
background: var(--bg);
border: 1px solid var(--text);
padding: 1.2rem;
margin: 1.2rem 0;
font-family: monospace;
}
.player-header {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
margin-bottom: 0.8rem;
font-weight: 500;
flex-wrap: wrap;
gap: 0.4rem;
}
.player-scrubber {
width: 100%;
height: 6px;
background: var(--grid-line);
position: relative;
cursor: pointer;
margin-bottom: 1rem;
}
.player-progress {
width: 0%;
height: 100%;
background: var(--accent);
transition: width 0.1s linear;
}
.player-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
}
.player-btn {
background: none;
border: 1px solid var(--accent);
color: var(--accent);
font-family: inherit;
font-size: 0.85rem;
font-weight: bold;
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.2s;
}
.player-btn:hover {
background: var(--accent);
color: var(--bg);
}
.player-vu {
font-size: 0.8rem;
color: var(--accent);
letter-spacing: 0.05em;
}
/* FROM index.html */
/* Variables (light Mode) */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
}
/* Variables (dark Mode) */
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
}
/* Détection automatique du thème de l'OS */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
/* --- PARTITION GRAPHIQUE (SVG) --- */
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.25;
}
.graphic-score { width: 100%; height: 100%; animation: spin 45s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
/* --- GRILLE PRINCIPALE --- */
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
/* HEADER & NAVIGATION */
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 5vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.header-brand { white-space: nowrap; }
.header-brand .brand-short { display: none; }
.header-tag { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; white-space: nowrap; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
/* HERO SECTION */
.hero { grid-column: 1 / 10; margin-bottom: 15vh; margin-top: 5vh; }
h1 {
font-size: clamp(3.5rem, 8vw, 8.5rem);
line-height: 0.85; margin: 0 0 2rem 0;
text-transform: uppercase;
letter-spacing: -0.04em;
display: inline-block;
padding-right: 1rem;
}
.hero-desc {
font-size: clamp(1rem, 1.2vw, 1.2rem);
max-width: 650px;
line-height: 1.5;
font-family: monospace;
color: var(--text);
opacity: 0.8;
}
/* --- TABLEAU DE BORD --- */
.data-section {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1.1fr 1.1fr 1.8fr;
border-top: 1px solid var(--text);
}
.data-col { border-right: 1px solid var(--grid-line); padding: 2rem 1.5rem 2rem 0; }
.data-col:first-child { padding-left: 0; }
.data-col:nth-child(2) { padding-left: 1.5rem; }
.data-col:last-child { border-right: none; padding-right: 0; padding-left: 1.5rem; }
h2 { font-family: monospace; font-size: 0.9rem; text-transform: uppercase; margin: 0 0 2rem 0; color: var(--text); display: flex; flex-direction: column; gap: 0.5rem; }
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.heading-short { display: none; }
/* LISTES CAPACITÉS & CONTEXTES */
ul.data-list { list-style: none; padding: 0; margin: 0; font-family: monospace; font-size: 0.85rem; line-height: 2.2; }
ul.data-list li { display: flex; align-items: baseline; }
ul.data-list li .sys-id { color: var(--text); opacity: 0.5; margin-right: 0.5rem; min-width: 3.5rem; font-size: 0.75rem; flex-shrink: 0; }
/* Textes et liens insécables pour éviter les coupures disgracieuses */
ul.data-list li .item-text { white-space: normal; }
ul.data-list li a { transition: color 0.2s; white-space: normal; display: inline-block; }
ul.data-list li a:hover { color: var(--accent); }
ul.data-list li a .plus-icon { color: var(--accent); margin-left: 0.3rem; font-size: 0.85rem; display: inline-block; }
/* TABLEAU CONFIGURATIONS */
.preset-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 0.85rem; }
.preset-table th, .preset-table td { text-align: left; padding: 1.2rem 0; border-bottom: 1px dashed var(--grid-line); }
.preset-table th { text-transform: uppercase; color: var(--text); opacity: 0.5; font-weight: normal; padding-bottom: 0.5rem; font-size: 0.8rem; }
.preset-table td.col-action { text-align: right; color: var(--accent); white-space: nowrap; }
.preset-table tr { cursor: pointer; transition: background-color 0.2s; }
.preset-table tr:hover { background-color: var(--hover-bg); backdrop-filter: blur(2px); }
.preset-table tr:hover td { color: var(--accent); }
/* MOBILE */
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.score-wrapper { width: 150vw; height: 150vw; right: -50vw; top: 30%; opacity: 0.15; }
.header {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-bottom: 0.75rem;
margin-bottom: 3.5vh;
font-size: 0.8rem;
}
.header-brand {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.header-tag {
display: inline;
font-size: 0.75rem;
color: var(--accent);
opacity: 0.85;
}
.nav-controls {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.hero { grid-column: 1 / 13; margin-top: 2vh; margin-bottom: 8vh; }
h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); }
.data-section { grid-template-columns: 1fr; }
.data-col, .data-col:nth-child(2) { border-right: none; border-bottom: 1px solid var(--grid-line); padding: 2rem 0; }
.data-col:last-child { padding: 2rem 0 0 0; }
.preset-table tr { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--grid-line); padding: 1rem 0; }
.preset-table td { display: block; width: auto !important; padding: 0; border: none; }
/* .hide-mobile handled by grid */
.preset-table thead { display: none; }
h2 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
margin: 0 0 1.2rem 0;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 480px) {
.heading-full { display: none; }
.heading-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.header-brand .brand-full { display: none; }
.header-brand .brand-short { display: inline; }
.header-tag { font-size: 0.7rem; }
}
/* FROM contact.html */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
--panel-bg: rgba(17, 17, 17, 0.02);
}
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.graphic-score { width: 100%; height: 100%; animation: spin 45s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 4vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.back-link, .header-brand, .nav-controls { white-space: nowrap; }
.back-short, .brand-short { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
.back-link { color: var(--accent); font-weight: bold; }
.contact-container {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1.1fr 1.9fr;
gap: 4vw;
border-top: 1px solid var(--text);
padding-top: 3vh;
margin-bottom: 5vh;
}
/* COLONNE GAUCHE : COORDONNÉES */
.col-info {
border-right: 1px solid var(--grid-line);
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.sys-badge {
font-family: monospace;
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: clamp(2.4rem, 4vw, 4.2rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
}
.intro-text {
font-family: monospace;
font-size: 0.95rem;
opacity: 0.85;
line-height: 1.6;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--grid-line);
}
.info-block {
font-family: monospace;
font-size: 0.9rem;
line-height: 1.8;
margin-bottom: 2rem;
}
.info-block h3 {
font-size: 0.85rem;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 0.8rem 0;
font-weight: bold;
}
.info-block p {
margin: 0 0 1rem 0;
}
.info-item {
display: flex;
align-items: center;
margin-bottom: 0.6rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.info-item .label {
opacity: 0.5;
min-width: 6.5rem;
text-transform: uppercase;
}
.info-item .val {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.info-item .val a {
transition: color 0.2s;
font-weight: bold;
}
.info-item .val a:hover {
color: var(--accent);
}
.btn-copy {
background: transparent;
border: 1px solid var(--grid-line);
color: var(--text);
font-family: monospace;
font-size: 0.7rem;
padding: 0.15rem 0.45rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.2s;
}
.btn-copy:hover {
border-color: var(--accent);
color: var(--accent);
}
.geo-box {
background: var(--panel-bg);
border: 1px dashed var(--grid-line);
padding: 1.2rem;
font-family: monospace;
font-size: 0.85rem;
line-height: 1.5;
margin-top: auto;
}
/* COLONNE DROITE : FORMULAIRE */
.col-form {
display: flex;
flex-direction: column;
}
h2 {
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0 0 2rem 0;
color: var(--text);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
}
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.heading-short { display: none; }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-group.full-width {
grid-column: 1 / 3;
}
label {
font-family: monospace;
font-size: 0.8rem;
text-transform: uppercase;
color: var(--text);
opacity: 0.7;
}
input, select, textarea {
background: transparent;
border: 1px solid var(--grid-line);
color: var(--text);
font-family: monospace;
font-size: 0.9rem;
padding: 0.8rem 1rem;
outline: none;
transition: border-color 0.2s, background-color 0.2s;
box-sizing: border-box;
width: 100%;
}
input:focus, select:focus, textarea:focus {
border-color: var(--accent);
background-color: var(--hover-bg);
}
select {
cursor: pointer;
}
select option {
background-color: var(--bg);
color: var(--text);
}
textarea {
resize: vertical;
min-height: 140px;
}
.btn-submit {
grid-column: 1 / 3;
font-family: monospace;
font-size: 0.95rem;
text-transform: uppercase;
padding: 1.2rem 2rem;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
margin-top: 1rem;
letter-spacing: 0.05em;
}
.btn-submit:hover {
background-color: var(--accent);
color: var(--bg);
}
.status-msg {
grid-column: 1 / 3;
font-family: monospace;
font-size: 0.85rem;
line-height: 1.6;
padding: 1.2rem;
border: 1px solid var(--grid-line);
display: none;
margin-top: 1rem;
background: var(--panel-bg);
}
.status-msg.active {
display: block;
border-color: var(--accent);
}
.status-msg h4 {
margin: 0 0 0.5rem 0;
color: var(--accent);
font-size: 0.9rem;
}
.status-actions {
margin-top: 1rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 0.8rem;
padding-bottom: 0.75rem;
margin-bottom: 3vh;
font-size: 0.8rem;
align-items: center;
}
.back-link {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
}
.header-brand {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
opacity: 0.75;
font-size: 0.78rem;
}
.nav-controls {
grid-column: 1 / 3;
grid-row: 2 / 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.contact-container {
grid-template-columns: 1fr;
gap: 4vh;
}
.col-info {
border-right: none;
border-bottom: 1px solid var(--grid-line);
padding-right: 0;
padding-bottom: 4vh;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-group.full-width, .btn-submit, .status-msg {
grid-column: 1 / 2;
}
h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 480px) {
.heading-full { display: none; }
.heading-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.back-full { display: none; }
.back-short { display: inline; }
.brand-full { display: none; }
.brand-short { display: inline; }
}
/* FROM noesis.html */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
--panel-bg: rgba(17, 17, 17, 0.02);
}
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.graphic-score { width: 100%; height: 100%; animation: spin 45s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 4vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.back-link, .header-brand, .nav-controls { white-space: nowrap; }
.back-short, .brand-short { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
.back-link { color: var(--accent); font-weight: bold; }
.datasheet {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 3vw;
border-top: 1px solid var(--text);
padding-top: 3vh;
margin-bottom: 5vh;
}
.col-tech {
border-right: 1px solid var(--grid-line);
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.module-badge {
font-family: monospace;
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: clamp(2.4rem, 4vw, 4.2rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
}
.tagline {
font-family: monospace;
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--grid-line);
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-family: monospace;
font-size: 0.85rem;
margin-bottom: 2.5rem;
}
.spec-table tr {
border-bottom: 1px dashed var(--grid-line);
}
.spec-table td {
padding: 0.9rem 0;
vertical-align: top;
}
.spec-table td.label {
color: var(--text);
opacity: 0.5;
width: 38%;
text-transform: uppercase;
}
.spec-table td.val {
font-weight: 500;
}
.btn-cta {
display: inline-block;
font-family: monospace;
font-size: 0.95rem;
text-transform: uppercase;
padding: 1.1rem 1.6rem;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-weight: bold;
transition: all 0.2s ease;
text-align: center;
letter-spacing: 0.05em;
margin-top: auto;
}
.btn-cta:hover {
background-color: var(--accent);
color: var(--bg);
}
.col-artistic {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
h2 {
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0 0 1rem 0;
color: var(--text);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
}
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.heading-short { display: none; }
.editorial-text {
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.65;
color: var(--text);
margin: 0;
}
.editorial-text p {
margin: 0 0 1.2rem 0;
}
.code-snippet {
background: var(--panel-bg);
border-left: 2px solid var(--accent);
padding: 1rem 1.2rem;
font-family: monospace;
font-size: 0.85rem;
color: var(--text);
line-height: 1.6;
margin: 1rem 0;
}
.audio-section {
background: var(--panel-bg);
border: 1px solid var(--grid-line);
padding: 1.5rem;
}
.audio-header {
font-family: monospace;
font-size: 0.85rem;
text-transform: uppercase;
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.live-indicator {
color: var(--accent);
animation: blink 2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.links-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.link-pill {
font-family: monospace;
font-size: 0.85rem;
border: 1px solid var(--text);
padding: 0.5rem 1rem;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.link-pill:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--hover-bg);
}
.press-quote {
border-left: 2px solid var(--accent);
padding-left: 1.5rem;
font-family: monospace;
font-size: 0.95rem;
line-height: 1.6;
opacity: 0.85;
margin: 1rem 0;
}
/* LECTEUR AUDIO AUTONOME SWISS STYLE */
.swiss-player {
background: var(--bg);
border: 1px solid var(--text);
padding: 1.2rem;
margin: 1.2rem 0;
font-family: monospace;
}
.player-header {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
margin-bottom: 0.8rem;
font-weight: 500;
flex-wrap: wrap;
gap: 0.4rem;
}
.player-scrubber {
width: 100%;
height: 6px;
background: var(--grid-line);
position: relative;
cursor: pointer;
margin-bottom: 1rem;
}
.player-progress {
width: 0%;
height: 100%;
background: var(--accent);
transition: width 0.1s linear;
}
.player-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
}
.player-btn {
background: none;
border: 1px solid var(--accent);
color: var(--accent);
font-family: inherit;
font-size: 0.85rem;
font-weight: bold;
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.2s;
}
.player-btn:hover {
background: var(--accent);
color: var(--bg);
}
.player-vu {
font-size: 0.8rem;
color: var(--accent);
letter-spacing: 0.05em;
}
/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 0.8rem;
padding-bottom: 0.75rem;
margin-bottom: 3vh;
font-size: 0.8rem;
align-items: center;
}
.back-link {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
}
.header-brand {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
opacity: 0.75;
font-size: 0.78rem;
}
.nav-controls {
grid-column: 1 / 3;
grid-row: 2 / 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.datasheet {
grid-template-columns: 1fr;
gap: 4vh;
}
.col-tech {
border-right: none;
border-bottom: 1px solid var(--grid-line);
padding-right: 0;
padding-bottom: 4vh;
}
h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 480px) {
.heading-full { display: none; }
.heading-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.back-full { display: none; }
.back-short { display: inline; }
.brand-full { display: none; }
.brand-short { display: inline; }
}
/* FROM itrio.html */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
--panel-bg: rgba(17, 17, 17, 0.02);
}
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.graphic-score { width: 100%; height: 100%; animation: spin 45s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 4vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.back-link, .header-brand, .nav-controls { white-space: nowrap; }
.back-short, .brand-short { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
.back-link { color: var(--accent); font-weight: bold; }
.datasheet {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 3vw;
border-top: 1px solid var(--text);
padding-top: 3vh;
margin-bottom: 5vh;
}
.col-tech {
border-right: 1px solid var(--grid-line);
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.module-badge {
font-family: monospace;
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: clamp(2.4rem, 4vw, 4.2rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
}
.tagline {
font-family: monospace;
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--grid-line);
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-family: monospace;
font-size: 0.85rem;
margin-bottom: 2.5rem;
}
.spec-table tr {
border-bottom: 1px dashed var(--grid-line);
}
.spec-table td {
padding: 0.9rem 0;
vertical-align: top;
}
.spec-table td.label {
color: var(--text);
opacity: 0.5;
width: 38%;
text-transform: uppercase;
}
.spec-table td.val {
font-weight: 500;
}
.btn-cta {
display: inline-block;
font-family: monospace;
font-size: 0.95rem;
text-transform: uppercase;
padding: 1.1rem 1.6rem;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-weight: bold;
transition: all 0.2s ease;
text-align: center;
letter-spacing: 0.05em;
margin-top: auto;
}
.btn-cta:hover {
background-color: var(--accent);
color: var(--bg);
}
.col-artistic {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
h2 {
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0 0 1rem 0;
color: var(--text);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
}
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.editorial-text {
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.65;
color: var(--text);
margin: 0;
}
.editorial-text p {
margin: 0 0 1.2rem 0;
}
.press-quote {
border-left: 2px solid var(--accent);
padding-left: 1.5rem;
font-family: monospace;
font-size: 0.9rem;
line-height: 1.6;
opacity: 0.9;
margin: 1rem 0;
}
.press-quote .source {
display: block;
margin-top: 0.5rem;
color: var(--accent);
font-size: 0.8rem;
text-transform: uppercase;
}
.audio-section {
background: var(--panel-bg);
border: 1px solid var(--grid-line);
padding: 1.5rem;
}
.audio-header {
font-family: monospace;
font-size: 0.85rem;
text-transform: uppercase;
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.live-indicator {
color: var(--accent);
animation: blink 2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.links-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1rem;
}
.link-pill {
font-family: monospace;
font-size: 0.85rem;
border: 1px solid var(--text);
padding: 0.5rem 1rem;
transition: all 0.2s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.link-pill:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--hover-bg);
}
/* LECTEUR AUDIO AUTONOME SWISS STYLE */
.swiss-player {
background: var(--bg);
border: 1px solid var(--text);
padding: 1.2rem;
margin: 1.2rem 0;
font-family: monospace;
}
.player-header {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
margin-bottom: 0.8rem;
font-weight: 500;
flex-wrap: wrap;
gap: 0.4rem;
}
.player-scrubber {
width: 100%;
height: 6px;
background: var(--grid-line);
position: relative;
cursor: pointer;
margin-bottom: 1rem;
}
.player-progress {
width: 0%;
height: 100%;
background: var(--accent);
transition: width 0.1s linear;
}
.player-footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.6rem;
}
.player-btn {
background: none;
border: 1px solid var(--accent);
color: var(--accent);
font-family: inherit;
font-size: 0.85rem;
font-weight: bold;
padding: 0.5rem 1rem;
cursor: pointer;
transition: all 0.2s;
}
.player-btn:hover {
background: var(--accent);
color: var(--bg);
}
.player-vu {
font-size: 0.8rem;
color: var(--accent);
letter-spacing: 0.05em;
}
/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 0.8rem;
padding-bottom: 0.75rem;
margin-bottom: 3vh;
font-size: 0.8rem;
align-items: center;
}
.back-link {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
}
.header-brand {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
opacity: 0.75;
font-size: 0.78rem;
}
.nav-controls {
grid-column: 1 / 3;
grid-row: 2 / 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.datasheet {
grid-template-columns: 1fr;
gap: 4vh;
}
.col-tech {
border-right: none;
border-bottom: 1px solid var(--grid-line);
padding-right: 0;
padding-bottom: 4vh;
}
h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.back-full { display: none; }
.back-short { display: inline; }
.brand-full { display: none; }
.brand-short { display: inline; }
}
/* FROM jam-sessions.html */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
--panel-bg: rgba(17, 17, 17, 0.02);
}
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.graphic-score { width: 100%; height: 100%; animation: spin 45s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 4vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.back-link, .header-brand, .nav-controls { white-space: nowrap; }
.back-short, .brand-short { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
.back-link { color: var(--accent); font-weight: bold; }
.datasheet {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 3vw;
border-top: 1px solid var(--text);
padding-top: 3vh;
margin-bottom: 5vh;
}
.col-tech {
border-right: 1px solid var(--grid-line);
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.module-badge {
font-family: monospace;
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: clamp(2.4rem, 4vw, 4.2rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
}
.tagline {
font-family: monospace;
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--grid-line);
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-family: monospace;
font-size: 0.85rem;
margin-bottom: 2.5rem;
}
.spec-table tr {
border-bottom: 1px dashed var(--grid-line);
}
.spec-table td {
padding: 0.9rem 0;
vertical-align: top;
}
.spec-table td.label {
color: var(--text);
opacity: 0.5;
width: 38%;
text-transform: uppercase;
}
.spec-table td.val {
font-weight: 500;
}
.btn-cta {
display: inline-block;
font-family: monospace;
font-size: 0.95rem;
text-transform: uppercase;
padding: 1.1rem 1.6rem;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-weight: bold;
transition: all 0.2s ease;
text-align: center;
letter-spacing: 0.05em;
margin-top: auto;
}
.btn-cta:hover {
background-color: var(--accent);
color: var(--bg);
}
.col-artistic {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
h2 {
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0 0 1rem 0;
color: var(--text);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
}
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.editorial-text {
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.65;
color: var(--text);
margin: 0;
}
.editorial-text p {
margin: 0 0 1.2rem 0;
}
.highlight-box {
background: var(--panel-bg);
border-left: 2px solid var(--accent);
padding: 1.5rem;
font-family: monospace;
font-size: 0.95rem;
line-height: 1.6;
margin: 1.5rem 0;
}
.ref-list {
list-style: none;
padding: 0;
margin: 1rem 0;
font-family: monospace;
font-size: 0.9rem;
line-height: 2;
}
.ref-list li {
padding-left: 1.2rem;
position: relative;
}
.ref-list li::before {
content: "■";
color: var(--accent);
position: absolute;
left: 0;
font-size: 0.65rem;
top: -0.1rem;
}
/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 0.8rem;
padding-bottom: 0.75rem;
margin-bottom: 3vh;
font-size: 0.8rem;
align-items: center;
}
.back-link {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
}
.header-brand {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
opacity: 0.75;
font-size: 0.78rem;
}
.nav-controls {
grid-column: 1 / 3;
grid-row: 2 / 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.datasheet {
grid-template-columns: 1fr;
gap: 4vh;
}
.col-tech {
border-right: none;
border-bottom: 1px solid var(--grid-line);
padding-right: 0;
padding-bottom: 4vh;
}
h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.back-full { display: none; }
.back-short { display: inline; }
.brand-full { display: none; }
.brand-short { display: inline; }
}
/* FROM karaoke-luxe.html */
:root {
--bg: #f4f4f2;
--text: #111111;
--accent: #d32f2f;
--grid-line: rgba(17, 17, 17, 0.15);
--hover-bg: rgba(17, 17, 17, 0.04);
--panel-bg: rgba(17, 17, 17, 0.02);
}
[data-theme="dark"] {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0c0c0c;
--text: #f0f0f0;
--accent: #ff3333;
--grid-line: rgba(255, 255, 255, 0.15);
--hover-bg: rgba(255, 255, 255, 0.05);
--panel-bg: rgba(255, 255, 255, 0.02);
}
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
transition: background-color 0.3s, color 0.3s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.score-wrapper {
position: fixed;
top: 50%;
right: -25vw;
width: 85vw;
height: 85vw;
max-width: 1200px;
max-height: 1200px;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
opacity: 0.18;
}
.graphic-score { width: 100%; height: 100%; animation: spin 45s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.layout {
display: grid;
grid-template-columns: repeat(12, 1fr);
min-height: 100vh;
padding: 2vw;
box-sizing: border-box;
position: relative;
z-index: 10;
}
.header {
grid-column: 1 / 13;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 2px solid var(--text);
padding-bottom: 1rem;
margin-bottom: 4vh;
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
white-space: nowrap;
}
.back-link, .header-brand, .nav-controls { white-space: nowrap; }
.back-short, .brand-short { display: none; }
.nav-controls { display: flex; gap: 2rem; align-items: baseline; }
.nav-controls button { background: none; border: none; color: var(--text); font-family: inherit; font-size: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.nav-controls button:hover { color: var(--accent); }
.lang-switch .active { font-weight: bold; color: var(--accent); }
.back-link { color: var(--accent); font-weight: bold; }
.datasheet {
grid-column: 1 / 13;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 3vw;
border-top: 1px solid var(--text);
padding-top: 3vh;
margin-bottom: 5vh;
}
.col-tech {
border-right: 1px solid var(--grid-line);
padding-right: 3vw;
display: flex;
flex-direction: column;
}
.module-badge {
font-family: monospace;
font-size: 0.85rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
}
h1 {
font-size: clamp(2.2rem, 3.8vw, 3.8rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
}
.tagline {
font-family: monospace;
font-size: 0.95rem;
opacity: 0.8;
line-height: 1.5;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--grid-line);
}
.spec-table {
width: 100%;
border-collapse: collapse;
font-family: monospace;
font-size: 0.85rem;
margin-bottom: 2.5rem;
}
.spec-table tr {
border-bottom: 1px dashed var(--grid-line);
}
.spec-table td {
padding: 0.9rem 0;
vertical-align: top;
}
.spec-table td.label {
color: var(--text);
opacity: 0.5;
width: 38%;
text-transform: uppercase;
}
.spec-table td.val {
font-weight: 500;
}
.btn-cta {
display: inline-block;
font-family: monospace;
font-size: 0.95rem;
text-transform: uppercase;
padding: 1.1rem 1.6rem;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-weight: bold;
transition: all 0.2s ease;
text-align: center;
letter-spacing: 0.05em;
margin-top: auto;
}
.btn-cta:hover {
background-color: var(--accent);
color: var(--bg);
}
.col-artistic {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
h2 {
font-family: monospace;
font-size: 0.9rem;
text-transform: uppercase;
margin: 0 0 1rem 0;
color: var(--text);
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--grid-line);
padding-bottom: 0.5rem;
}
.vu-meter { color: var(--accent); font-weight: normal; letter-spacing: 0.1em; white-space: nowrap; }
.vu-short { display: none; }
.editorial-text {
font-size: clamp(1rem, 1.1vw, 1.15rem);
line-height: 1.65;
color: var(--text);
margin: 0;
}
.editorial-text p {
margin: 0 0 1.2rem 0;
}
.highlight-box {
background: var(--panel-bg);
border-left: 2px solid var(--accent);
padding: 1.5rem;
font-family: monospace;
font-size: 0.95rem;
line-height: 1.6;
margin: 1.5rem 0;
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-top: 1rem;
}
.feature-item {
background: var(--panel-bg);
border: 1px solid var(--grid-line);
padding: 1.2rem;
font-family: monospace;
font-size: 0.85rem;
line-height: 1.5;
}
.feature-item strong {
color: var(--accent);
display: block;
margin-bottom: 0.5rem;
}
/* RESPONSIVE MOBILE */
@media (max-width: 900px) {
.layout { padding: 1.5rem 1.2rem 6rem 1.2rem; }
.header {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem 0.8rem;
padding-bottom: 0.75rem;
margin-bottom: 3vh;
font-size: 0.8rem;
align-items: center;
}
.back-link {
grid-column: 1 / 2;
grid-row: 1 / 2;
justify-self: start;
}
.header-brand {
grid-column: 2 / 3;
grid-row: 1 / 2;
justify-self: end;
opacity: 0.75;
font-size: 0.78rem;
}
.nav-controls {
grid-column: 1 / 3;
grid-row: 2 / 2;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
gap: 0.5rem;
border-top: 1px dashed var(--grid-line);
padding-top: 0.6rem;
}
.nav-controls > * {
white-space: nowrap;
}
.datasheet {
grid-template-columns: 1fr;
gap: 4vh;
}
.col-tech {
border-right: none;
border-bottom: 1px solid var(--grid-line);
padding-right: 0;
padding-bottom: 4vh;
}
.features-grid {
grid-template-columns: 1fr;
}
h2 {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 0.5rem;
font-size: 0.82rem;
}
.vu-meter {
font-size: 0.72rem;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.vu-full { display: none; }
.vu-short { display: inline; }
}
@media (max-width: 420px) {
.layout { padding: 1rem 0.8rem 6rem 0.8rem; }
.header { font-size: 0.74rem; }
.back-full { display: none; }
.back-short { display: inline; }
.brand-full { display: none; }
.brand-short { display: inline; }
}
.player-vu, .vu-meter {
display: inline-block;
height: 1.4em;
line-height: 1.4em;
vertical-align: middle;
overflow: hidden;
}
@media (max-width: 900px) {
h2 {
flex-wrap: wrap;
}
.preset-table tr {
flex-wrap: wrap;
gap: 0.2rem;
}
.preset-table td {
white-space: normal !important; /* Allow wrapping inside td */
}
.preset-table td.col-action {
white-space: nowrap !important; /* Keep the [+] together */
}
}
@media (max-width: 900px) {
/* Allow text wrapping */
.vu-meter { white-space: normal; word-break: break-all; }
.preset-table td {
display: block !important;
white-space: normal !important;
padding: 0 !important;
line-height: 1.4 !important;
}
}
@media (max-width: 900px) {
@media (max-width: 900px) {
/* Safe Flex table for mobile */
.preset-table, .preset-table tbody {
display: block !important;
width: 100% !important;
}
.preset-table tr {
display: flex !important;
flex-wrap: wrap !important;
width: 100% !important;
padding: 1rem 0 !important;
border-bottom: 1px dashed var(--grid-line) !important;
position: relative !important;
align-items: baseline !important;
}
.preset-table td {
display: block !important;
padding: 0 !important;
border: none !important;
line-height: 1.4 !important;
white-space: normal !important;
text-align: left !important;
}
.preset-table td:nth-child(1) {
flex: 0 0 auto !important;
margin-right: 0.5rem !important;
}
.preset-table td:nth-child(2) {
flex: 1 1 auto !important;
}
.preset-table td:nth-child(3) {
flex: 0 0 100% !important;
font-size: 0.9em !important;
opacity: 0.8 !important;
margin-top: 0.2rem !important;
padding-right: 3rem !important; /* space for the plus icon */
box-sizing: border-box !important;
}
.preset-table td:nth-child(4) {
position: absolute !important;
right: 0 !important;
bottom: 1rem !important;
width: auto !important;
text-align: right !important;
}
}