/* ==========================================================================
   RIBALTA — le thème Linéa Studio
   ---------------------------------------------------------------------------
   Chargé APRÈS main.css : il ne modifie aucun fichier d'origine, il les
   recouvre. Les mises à jour de ScreenTinker restent donc faciles à reprendre.

   La direction artistique est celle de lineastudio.fr :
   - fond papier, texte encre, boutons noirs à angles vifs ;
   - les quatre couleurs du logo (bleu, rouge, jaune, vert), au code près ;
   - Archivo pour les titres (en large, comme le site), IBM Plex Mono pour ce
     qui se mesure : durées, identifiants, statistiques ;
   - les codes de l'épreuve d'imprimeur : bande de couleurs, repères.

   Polices hébergées dans /fonts (licence SIL OFL, voir fonts/OFL-*.txt) :
   la politique de sécurité de l'interface n'autorise que le serveur lui-même.
   ========================================================================== */

@font-face {
  font-family: "Archivo Ribalta";
  src: url("/fonts/archivo-latin-wdth.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Ribalta";
  src: url("/fonts/archivo-latin-ext-wdth.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Plex Ribalta"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Ribalta"; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Les jetons ----------
   Les quatre couleurs du logo, puis leurs déclinaisons lisibles sur papier
   (mêmes valeurs que global.css de lineastudio.fr). */
:root {
  --rb-papier: #fafafa;
  --rb-encre: #121212;
  --rb-bleu: #648dcb;
  --rb-rouge: #df3821;
  --rb-jaune: #fbeb78;
  --rb-vert: #b9e185;
  --rb-rouge-deep: #c4301b;   /* texte rouge lisible, aplat + texte blanc */
  --rb-vert-ink: #4a7a12;     /* texte vert lisible sur blanc */
  --rb-jaune-ink: #7a6200;    /* texte « attention » lisible sur blanc */

  --font-texte: "Archivo Ribalta", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mesure: "Plex Ribalta", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Variables de l'interface d'origine, réaffectées. */
  --bg-primary: var(--rb-papier);
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f2f2ef;
  --bg-input: #ffffff;
  --accent: var(--rb-encre);
  --accent-hover: #000000;
  --accent-dim: #3a3a3a;
  --accent-2: var(--rb-encre);
  --accent-3: var(--rb-encre);
  --grad-accent: linear-gradient(90deg, var(--rb-bleu), var(--rb-rouge), var(--rb-jaune), var(--rb-vert));
  --grad-bar: linear-gradient(90deg, var(--rb-bleu) 0 25%, var(--rb-rouge) 25% 50%, var(--rb-jaune) 50% 75%, var(--rb-vert) 75% 100%);
  --text-primary: var(--rb-encre);
  --text-secondary: #555555;    /* 7,4:1 sur papier */
  --text-muted: #6b6b6b;        /* 5,3:1 sur papier */
  --success: var(--rb-vert-ink);
  --success-dim: #e6f3d3;
  --danger: var(--rb-rouge-deep);
  --danger-dim: #fbe0dc;
  --warning: var(--rb-jaune-ink);
  --warning-dim: #fdf6c4;
  --border: rgba(18, 18, 18, 0.14);
  --border-light: rgba(18, 18, 18, 0.28);
  --radius: 2px;
  --radius-lg: 2px;
  --shadow: 0 1px 0 rgba(18, 18, 18, 0.06), 0 12px 32px -16px rgba(18, 18, 18, 0.25);
  --shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.08);
  color-scheme: light;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-texte);
  font-stretch: 100%;
}
body { -webkit-font-smoothing: antialiased; }

/* La bande de contrôle : les quatre couleurs du logo, en haut de chaque page —
   la signature de l'épreuve d'imprimeur, comme sur lineastudio.fr. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  z-index: 10000;
  pointer-events: none;
  background: var(--grad-bar);
}

h1, h2, h3, .page-title, .page-header h1, .card-title, .section-title {
  font-family: var(--font-texte);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
h1, .page-title, .page-header h1 { font-stretch: 112%; letter-spacing: -0.025em; }

/* Ce qui se mesure se lit en chiffres alignés. */
code, kbd, pre, samp, .mono, .monospace, [class*="pairing-code"], [class*="device-id"], [class*="uptime"] {
  font-family: var(--font-mesure);
}
table { font-variant-numeric: tabular-nums; }

::selection { background: var(--rb-jaune); color: var(--rb-encre); }
:focus-visible { outline: 2px solid var(--rb-bleu); outline-offset: 2px; }
a { color: var(--rb-encre); text-underline-offset: 0.2em; }
html { scrollbar-color: rgba(18, 18, 18, 0.35) transparent; }

/* ---------- Le logo dessiné ----------
   Même construction que celui de Linéa Studio : le mot, et les quatre formes
   accrochées aux lettres. Tout est en em : il tient à toutes les tailles. */
.rb {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  isolation: isolate;
  font-family: var(--font-texte);
  color: var(--rb-encre);
  line-height: 1;
}
.rb__mot { position: relative; font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; white-space: nowrap; }
.rb__mot > span { position: relative; display: inline-block; }
.rb__mot > span::before { content: ""; position: absolute; z-index: -1; }
.rb-R::before { background: var(--rb-jaune); width: 0.52em; height: 0.8em; left: -0.13em; top: 0.42em; }
.rb-i::after { content: ""; position: absolute; background: var(--rb-bleu); border-radius: 50%; width: 0.25em; height: 0.25em; left: 50%; top: -0.06em; transform: translateX(-50%); }
.rb-a1::before { background: var(--rb-rouge); border-radius: 50%; width: 0.44em; height: 0.54em; left: -0.27em; top: 0.22em; }
.rb-a2::before { background: var(--rb-vert); width: 0.54em; height: 0.54em; right: -0.24em; top: 0.1em; }
.rb__sous { font-weight: 400; font-size: 0.22em; letter-spacing: 0.04em; text-transform: uppercase; color: #2a2a2a; margin-top: 0.14em; margin-right: 0.5em; }

/* ---------- Barre latérale ---------- */
.sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);
}
.sidebar-header { padding-top: 22px; }
.sidebar-header .logo { gap: 0; }
.sidebar-header .logo .rb { font-size: 42px; margin: 4px 0 6px 6px; }
.sidebar-header .logo .marque-texte { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.sidebar a, .sidebar button { font-family: var(--font-texte); }
/* Le survol prenait la couleur des cartes — blanche désormais, comme la barre :
   il serait devenu invisible. L'élément actif reste en encre, texte blanc. */
.nav-link:hover, .nav-group-toggle:hover { background: var(--bg-card-hover); }
.nav-link.active { background: var(--rb-encre); color: #ffffff; }
.nav-group-label { font-family: var(--font-mesure); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- Boutons : noirs, angles vifs, comme sur le site ---------- */
.btn, button.btn, .button {
  border-radius: var(--radius);
  font-family: var(--font-texte);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.btn-primary, .btn.primary, button.primary {
  background: var(--rb-encre);
  border-color: var(--rb-encre);
  color: #ffffff;
}
.btn-primary:hover, .btn.primary:hover, button.primary:hover { background: #000000; }
.btn-secondary, .btn.secondary {
  background: #ffffff;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}
.btn-secondary:hover, .btn.secondary:hover { background: var(--bg-card-hover); }
.btn-danger, .btn.danger { background: var(--rb-rouge-deep); border-color: var(--rb-rouge-deep); color: #ffffff; }

/* ---------- Champs ---------- */
.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], select, textarea {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  font-family: var(--font-texte);
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--rb-encre);
  box-shadow: 0 0 0 3px rgba(100, 141, 203, 0.25);
  outline: none;
}
::placeholder { color: #8a8a8a; }

/* ---------- Cartes et tableaux ---------- */
.modal, .device-card, .content-item, .ds-card, .ds-tile, .platform-stat {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
table th {
  font-family: var(--font-mesure);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
table td, table th { border-color: var(--border); }
tbody tr:hover { background: var(--bg-card-hover); }

/* ---------- États des écrans : les couleurs du logo ----------
   L'original écrivait le texte « hors ligne » en rose pâle, prévu pour un fond
   sombre : illisible sur papier. */
.device-status-badge { border-radius: var(--radius); font-family: var(--font-mesure); font-weight: 500; }
.device-status-badge.offline { color: var(--rb-rouge-deep); }
.status-dot.online, .dot-online { background: var(--rb-vert-ink); }
.status-dot.offline, .dot-offline { background: var(--rb-rouge-deep); }

/* Voiles blancs prévus pour le sombre : ils deviennent des voiles d'encre. */
[style*="rgba(255,255,255,0.04)"], [style*="rgba(255,255,255,0.05)"] { background-color: rgba(18, 18, 18, 0.03) !important; }

/* ---------- Écran de connexion : la feuille d'épreuve ----------
   Traits de coupe aux quatre coins de la page, comme sur lineastudio.fr. */
.rb-connexion {
  position: relative;
  min-height: 100vh;
}
.rb-connexion::before, .rb-connexion::after {
  content: "";
  position: fixed;
  width: 28px;
  height: 28px;
  pointer-events: none;
  border-color: var(--rb-encre);
  border-style: solid;
}
.rb-connexion::before { top: 22px; left: 22px; border-width: 0 1px 1px 0; }
.rb-connexion::after { bottom: 22px; right: 22px; border-width: 1px 0 0 1px; }
.rb-connexion .rb { font-size: 64px; margin: 0 auto 18px; }

/* ── Logo sur mobile (à côté du bouton de menu) ─────────────────────────── */
.rb-mobile-marque { display: none; }
@media (max-width: 768px) {
  .rb-mobile-marque {
    display: flex;
    align-items: center;
    position: absolute;
    top: 12px;
    left: 68px;
    height: 44px;
    font-size: 22px;
    color: var(--rb-encre);
    text-decoration: none;
    z-index: 5;
  }
  .rb-mobile-marque .marque-texte { font-weight: 800; letter-spacing: -0.02em; }
  /* Menu ouvert : le bouton fixe recouvrirait le logo de la barre latérale. */
  .sidebar-header .logo { padding-left: 52px; }
  .sidebar-header .logo .rb { font-size: 32px; margin-top: 10px; }
}

/* ── Onglet Musique d'un écran ─────────────────────────────────────────── */
.ambiance { max-width: 720px; }
.ambiance-corps { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; transition: opacity .15s; }
.ambiance-bloc { padding: 14px 0; border-top: 1px solid var(--border); }
.ambiance-label { display: block; font-family: var(--font-mesure); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.ambiance-ligne { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ambiance-choix, .ambiance-jours { display: flex; gap: 16px; flex-wrap: wrap; }
.ambiance-choix label, .ambiance-jours label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ambiance-liste { display: grid; gap: 6px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--border); background: #fff; margin-bottom: 10px; }
.ambiance-liste label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; word-break: break-all; }
.ambiance-aide { color: var(--text-muted); font-size: 12px; margin-top: 6px; line-height: 1.5; }

/* Libellé posé en CSS par main.css (content: "Workspace") : traduit ici. */
.workspace-switcher-static::before { content: "Espace de travail"; }
/* Curseurs, cases et boutons radio à l'encre plutôt qu'au bleu du navigateur. */
input[type="range"], input[type="checkbox"], input[type="radio"] { accent-color: var(--rb-encre); }