/* Thème commun des overlays : noir, braise, LCD ambré. Polices embarquées (aucune connexion requise). */
@font-face { font-family: "LCD"; src: url("polices/DSEG7Classic-Bold.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "Rajdhani"; src: url("polices/rajdhani-latin-500-normal.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Rajdhani"; src: url("polices/rajdhani-latin-600-normal.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Rajdhani"; src: url("polices/rajdhani-latin-700-normal.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "Cormorant"; src: url("polices/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Cormorant"; src: url("polices/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Cormorant"; src: url("polices/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; }
@font-face { font-family: "Cormorant"; src: url("polices/cormorant-garamond-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; }

:root {
  --noir: #090706;
  --noir-2: #120d0b;
  --noir-3: #1b1310;
  --braise: #ff5a1f;
  --braise-vive: #ff8a3d;
  --rouge: #d7261e;
  --sang: #7d0d10;
  --ambre: #ffb347;
  --os: #efe6d8;
  --cendre: #8a7f74;
  --cendre-2: #4a413a;
  --froid: #9fd3ff;
  --c: 14px; /* taille des chanfreins */
}

html, body { margin: 0; background: transparent; overflow: hidden; }
* { box-sizing: border-box; }

/* Panneau chanfreiné avec liseré : .panneau > .panneau-int */
.panneau {
  position: absolute; inset: 0;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background: linear-gradient(135deg, rgba(255,90,31,.85), rgba(125,13,16,.55) 40%, rgba(255,90,31,.25) 75%, rgba(255,138,61,.7));
  padding: 1.5px;
}
.panneau-int {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  clip-path: polygon(calc(var(--c) - 1px) 0, 100% 0, 100% calc(100% - var(--c) + 1px), calc(100% - var(--c) + 1px) 100%, 0 100%, 0 calc(var(--c) - 1px));
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,90,31,.10), transparent 55%),
    linear-gradient(180deg, rgba(20,14,11,.94), rgba(8,6,5,.96));
}
/* grain de pellicule */
.grain::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .8  0 0 0 0 .7  0 0 0 1.4 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -3%); }
  60% { transform: translate(-3%, -6%); } 80% { transform: translate(6%, 5%); } 100% { transform: translate(0, 0); }
}
/* lignes de balayage discrètes */
.balayage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}

/* Étiquettes */
.etiq {
  font-family: "Rajdhani", sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; color: var(--cendre); line-height: 1;
}

/* Chiffres LCD avec segments fantômes : <span class="lcd"><span class="fantome">88:88</span><span class="allume">12:34</span></span> */
.lcd { position: relative; display: inline-block; font-family: "LCD", monospace; font-weight: 700; line-height: 1; white-space: nowrap; }
.lcd .fantome { color: rgba(255,179,71,.07); }
.lcd .allume {
  position: absolute; right: 0; top: 0; color: var(--ambre);
  text-shadow: 0 0 6px rgba(255,140,40,.75), 0 0 18px rgba(255,90,31,.45);
}
.lcd.rouge .allume { color: #ff4a3a; text-shadow: 0 0 6px rgba(255,40,30,.8), 0 0 20px rgba(215,38,30,.5); }
.lcd.eteint .allume { color: var(--cendre-2); text-shadow: none; }

/* Pastille d'état */
.puce {
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: 3px 8px 2px; border: 1px solid currentColor; color: var(--cendre);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: rgba(0,0,0,.35); white-space: nowrap;
}
.puce.braise { color: var(--braise-vive); }
.puce.rouge { color: #ff4a3a; background: rgba(125,13,16,.45); }
.puce.froid { color: var(--froid); }
.clignote { animation: clignote 1s steps(2, jump-none) infinite; }
@keyframes clignote { 50% { opacity: .25; } }
.pulse { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ======================================================================
   Barres au style des overlays existants de doOk
   (fond anthracite, équerre orange à gauche, emblème flamme, libellé italique
   en petites capitales, valeur orange dans un cartouche creusé, tirets orange)
   ====================================================================== */
:root {
  --dk-orange: #e4612f;
  --dk-orange-vif: #ff7a3c;
  --dk-fond-haut: #3a3939;
  --dk-fond-bas: #232222;
  --dk-cartouche: #1c1b1b;
  --dk-texte: #ececec;
}
.dk-barre {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 0 14px 0 var(--dk-retrait, 64px);
  background: linear-gradient(180deg, var(--dk-fond-haut), var(--dk-fond-bas));
  border-radius: 3px 10px 3px 3px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.35);
}
/* équerre orange sur la gauche, avec encoche */
.dk-barre::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 46px;
  background: linear-gradient(180deg, var(--dk-orange-vif), var(--dk-orange));
  clip-path: polygon(0 0, 6px 0, 6px calc(100% - 9px), 100% calc(100% - 9px), 100% calc(100% - 4px), 30% calc(100% - 4px), 24% 100%, 0 100%);
}
/* tirets orange sous le libellé */
.dk-barre::after {
  content: ""; position: absolute; left: calc(var(--dk-retrait, 64px) + 6px); bottom: 2px; width: 64px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--dk-orange) 0 26px, transparent 26px 32px);
  opacity: .9;
}
.dk-embleme {
  position: absolute; left: 4px; bottom: 10px; width: 56px; height: auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.7));
}
.dk-libelle {
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-variant: small-caps; font-style: italic;
  color: var(--dk-texte); letter-spacing: .02em; white-space: nowrap; line-height: 1;
  transform: skewX(-6deg);
  text-shadow: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.dk-libelle::after { content: " :"; }
.dk-cartouche {
  position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--dk-cartouche); border-radius: 2px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.05);
  color: var(--dk-orange-vif); white-space: nowrap; overflow: hidden;
}
.dk-valeur { font-family: "Rajdhani", sans-serif; font-weight: 600; color: var(--dk-orange-vif); line-height: 1; }
/* LCD lisible sur le stream : chiffres pleins, segments fantômes à peine visibles */
.dk-cartouche .lcd .fantome { color: rgba(228,97,47,.06); }
.dk-cartouche .lcd .allume { color: var(--dk-orange-vif); text-shadow: 0 0 8px rgba(255,100,40,.45); }
.dk-cartouche .lcd.rouge .allume { color: #ff3b2f; }
.dk-cartouche .lcd.eteint .allume { color: #6b625b; text-shadow: none; }
.dk-etat {
  font-family: "Rajdhani", sans-serif; font-weight: 700; font-style: italic; font-variant: small-caps;
  font-size: 17px; letter-spacing: .03em; color: var(--dk-texte); white-space: nowrap;
  text-shadow: 0 0 2px #000, 1px 1px 0 #000;
}
.dk-etat.rouge { color: #ff4a3a; }
.dk-etat.orange { color: var(--dk-orange-vif); }
.dk-etat.froid { color: #a9dcff; }