@font-face {
  font-family: 'Teleindicadore';
  src: url('polices/Teleindicadores1.ttf')
}

/* ── Variables neumorphiques ───────────────────────────────────────── */
:root {
  --bg:        #eef0f3;
  --btn:       #2d3748;
  --shadow-l:  #ffffff;
  --shadow-d:  #c8ccd2;
}

* {
  user-select: none;
}

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body {
  padding: 5%;
  margin: 0;
}

.milieu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#horloge {
  width: 71vmin;
  height: 71vmin;
  transform: scaleX(-1);
}

#cercle {
  width: 80vmin;
  height: 80vmin;
}

#cercle-secondes {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) scaleX(-1);
}

#minutes, #sbb-clock {
  width: 95vmin;
  height: 95vmin;
}

#sbb-clock:not(.hide) ~ #cercle,
#sbb-clock:not(.hide) ~ #cercle-secondes,
body.sbb-mode #poignee {
  display: none !important;
}

#clock-wrapper {
  width: 95vmin;
  height: 95vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#clock-wrapper > * {
  position: absolute;
}

#horloge {
  width: 71vmin;
  height: 71vmin;
  opacity: 0.9;
  z-index: 1;
  transform: none; /* Crucial: on retire l'inversion par défaut */
}

#sbb-clock-bg {
  width: 71vmin;
  height: 71vmin;
  background: white;
  border-radius: 50%;
  z-index: 0;
}

#sbb-clock {
  width: 71vmin;
  height: 71vmin;
  z-index: 5;
  transform: none;
  position: relative; /* Pour que les enfants absolus se basent dessus */
}

#minutes {
  width: 95vmin;
  height: 95vmin;
  z-index: 2;
}

#cercle, #cercle-secondes {
  width: 80vmin;
  height: 80vmin;
}

/* Masquage propre */
.hide {
  display: none !important;
}

#sons, #musique-pendant {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1000;
}

/* ── Carte de contrôles centrale ───────────────────────────────────── */
#zone-compteur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  display: none;
  padding: 1.5vmin 2.5vmin;
  white-space: nowrap;
}

#zone-affichage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 95vmin;
  height: 95vmin;
  z-index: 10;
}

#zone-affichage:hover #zone-compteur {
  display: block;
}

/* En mode SBB, on place le compteur au sommet, hors du cadran */
#sbb-clock:not(.hide) ~ #zone-affichage #zone-compteur,
body.sbb-mode #compteur-bis {
  top: 5%;
}

#zone-affichage.sons-actifs:hover #zone-compteur,
#zone-affichage.sons-actifs:hover #logo,
#zone-affichage.sons-actifs:hover #bouton-a-propos,
#zone-affichage.sons-actifs:hover #bouton-options,
#zone-affichage.sons-actifs:hover #bouton-musique {
  display: none !important;
}

#zone-compteur button {
  vertical-align: middle;
  text-align: center;
  font-size: 6vmin;
  width: 11vmin;
  height: 11vmin;
}

/* ── Boutons play / stop ────────────────────────────────────────────── */
button#start,
button#stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11vmin;
  height: 11vmin;
  margin-bottom: 2%;
  border: none;
  outline: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
  transition: box-shadow 0.15s, transform 0.1s;
}

button#start { background-color: #3BA228; margin-right: 3vmin; border: 5px solid #2d8a1e; }
button#start.en-cours + button#stop { background-color: #cc2222; border-color: #991a1a; }
button#stop  { background-color: #d0d4da; border: 5px solid #a0a8b0; }

button#start svg,
button#stop svg {
  width: 62%;
  height: 62%;
  pointer-events: none;
}

button#start .icon-pause { display: none; }
button#start.en-cours .icon-play  { display: none; }
button#start.en-cours .icon-pause { display: block; }

button#start:hover,
button#stop:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.33);
  transform: scale(1.06);
}

button#start:active,
button#stop:active {
  transform: scale(0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}

/* ── Bouton couleur + bouton sons (taille commune) ──────────────────── */
#bouton-sons {
  margin-top: 2%;
  vertical-align: middle;
  width: 11vmin;
  height: 11vmin;
  border-radius: 50%;
}

/* ── Bouton couleur : rond sans fond visible ────────────────────────── */
#bouton-couleur {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: none;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.30);
  transition: box-shadow 0.15s, transform 0.1s;
}

#bouton-couleur:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.38);
  transform: scale(1.06);
}

#bouton-couleur::-webkit-color-swatch-wrapper {
  padding: 0;
}

#bouton-couleur::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

#bouton-couleur::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

/* ── Bouton sons ────────────────────────────────────────────────────── */
.bouton-sons {
  width: 14vmin;
  height: 14vmin;
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.bouton-son {
  width: 11vmin;
  height: 11vmin;
  background-size: 55%;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

#bouton-sons {
  background-image: url(images/cloche.svg);
  background-color: #ffffff;
  background-blend-mode: normal;
  border: 4px solid #c8ccd2;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
  transition: box-shadow 0.15s, transform 0.1s;
}

#bouton-sons:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.38);
  transform: scale(1.06);
}

/* ── Boutons de son (roue) ──────────────────────────────────────────── */
.bouton-son {
  position: absolute;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #ffffff;
  border: 4px solid #c8ccd2;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
  transition: box-shadow 0.15s, transform 0.1s;
}

.bouton-son:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.38);
  transform: translateX(-50%) translateY(-50%) scale(1.10);
}

#bouton-a { left: 50%; top: 15%; }
#bouton-b { left: 80%; top: 25%; }
#bouton-c { left: 80%; top: 75%; }
#bouton-d { left: 50%; top: 85%; }
#bouton-e { left: 20%; top: 75%; }
#bouton-f { left: 20%; top: 25%; }
#bouton-g { left: 15%; top: 50%; }

/* ── Boutons coin (?, ⚙, ♪) ────────────────────────────────────────── */
#bouton-a-propos, #bouton-options, #bouton-musique {
  border: 3px solid #a0a8b0;
  width: 11vmin;
  height: 11vmin;
  top: 50%;
  transform: translateY(-50%);
}
#bouton-a-propos {
  position: absolute;
  z-index: 5000;
  border-radius: 50%;
  left: calc(50% - 49.5vmin);
  background-color: #d0d4da;
  cursor: pointer;
  display: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.30);
  transition: box-shadow 0.15s, transform 0.1s;
  color: #2d3748;
  font-size: 7vmin;
  font-weight: bold;
}

#bouton-a-propos:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.38);
  transform: translateY(-50%) scale(1.06);
}

#bouton-options {
  position: absolute;
  z-index: 5001;
  border-radius: 50%;
  left: calc(50% - 49.5vmin);
  background-color: #d0d4da;
  cursor: pointer;
  display: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.30);
  transition: box-shadow 0.15s, transform 0.1s;
}

#bouton-options::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url(images/options.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 55%;
  filter: invert(1) brightness(0.25);
}

#bouton-options:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.38);
  transform: translateY(-50%) scale(1.06);
}

/* ── Panneaux (lightbox) ────────────────────────────────────────────── */
.lightbox {
  position: absolute;
  z-index: 2000;
  top: 50%;
  left: 50%;
  width: 85vmin;
  height: 85vmin;
  border: 3px solid #d0d4da;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--bg);
  border-radius: 25px;
  overflow-y: auto;
  padding: 30px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

#div-options {
  background-color: var(--bg);
  text-align: center;
}

#div-options h2 {
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #777;
  border-bottom: 2px solid #dde0e6;
  padding-bottom: 10px;
  margin: 25px 0 15px;
}

/* ── Boutons de rotation ────────────────────────────────────────────── */
.bouton-horaire {
  width: 30vmin;
  height: 30vmin;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: var(--bg);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: -4px -4px 10px var(--shadow-l), 4px 4px 10px var(--shadow-d);
  transition: box-shadow 0.15s;
}

.bouton-horaire:hover {
  box-shadow: -5px -5px 14px var(--shadow-l), 5px 5px 14px var(--shadow-d);
}

#sens-horaire {
  background-image: url(images/horaire.jpg);
}

#sens-anti-horaire {
  background-image: url(images/anti-horaire.jpg);
}

/* Sélectionné : contour lumineux */
.select {
  box-shadow: 0 0 0 3px #4F86F7, 0 3px 10px rgba(0,0,0,0.30) !important;
}

#zone-affichage:hover #logo, #zone-affichage:hover #bouton-a-propos, #zone-affichage:hover #bouton-options, #zone-affichage:hover #bouton-musique {
  display: inline-block;
}

.lightbox * {
  user-select: text !important;
}

/* ── Compteur digital ───────────────────────────────────────────────── */
#compteur, #compteur-bis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 11vmin;
  font-size: 11vmin;
  border-radius: 3vmin;
  text-align: center;
  border: none;
  font-family: Teleindicadore;
  background-color: #111111;
  color: #00e50f;
  vertical-align: middle;
  box-shadow: inset -2px -2px 5px rgba(255,255,255,0.05), inset 2px 2px 8px rgba(0,0,0,0.6);
}

#compteur-bis {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#compteur-minutes {
  user-select: text;
}

/* ── Boutons +/− ────────────────────────────────────────────────────── */
.bouton-compteur {
  border-radius: 3vmin;
  background: var(--btn);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.30);
  transition: box-shadow 0.15s, transform 0.1s;
}

.bouton-compteur:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.38);
  transform: scale(1.06);
}

.bouton-compteur:active {
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
  transform: scale(0.95);
}

#poignee {
  position: absolute;
  z-index: 1000;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 5vmin;
}

.hide {
  display: none !important;
}

/* ── Bouton musique ─────────────────────────────────────────────────── */
#bouton-musique {
  position: absolute;
  z-index: 5002;
  border-radius: 50%;
  right: calc(50% - 49.5vmin);
  background-color: #d0d4da;
  color: #2d3748;
  font-size: 6vmin;
  cursor: pointer;
  display: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.30);
  transition: box-shadow 0.15s, transform 0.1s;
}

#bouton-musique:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.38);
  transform: translateY(-50%) scale(1.06);
}

/* ── Fichier musique ────────────────────────────────────────────────── */
#fichierMusique {
  display: none;
}

#fichier-musique-info {
  position: absolute;
  bottom: 5vmin;
  left: 90%;
  transform: translateX(-50%);
  z-index: 15;
  display: none;
}

#fichier-musique-info div {
  padding: 1vmin 2vmin;
  background: var(--bg);
  border-radius: 3vmin;
  font-size: 2.5vmin;
  color: #555;
  white-space: nowrap;
  box-shadow: -3px -3px 7px var(--shadow-l), 3px 3px 7px var(--shadow-d);
  border: none;
  font-family: Arial, Helvetica, sans-serif;
}

#fichier-musique-info .note-musique {
  color: #e83e8c;
  margin-right: 1vmin;
}

#effacer-fichier {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  margin-left: 1vmin;
  font-size: 3vmin;
  padding: 0;
}

/* ── Dialogue musique ───────────────────────────────────────────────── */
#dialog-musique {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 3000;
}

.dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 4vmin;
  border-radius: 20px;
  border: 3px solid #d0d4da;
  box-shadow: none;
  min-width: 50vmin;
  font-family: Arial, Helvetica, sans-serif;
}

.dialog-header {
  text-align: center;
  margin-bottom: 3vmin;
  font-size: 3.5vmin;
  font-weight: bold;
  color: #333;
}

.dialog-buttons {
  text-align: center;
  margin-top: 3vmin;
  display: flex;
  gap: 2vmin;
  justify-content: center;
}

.dialog-buttons button {
  padding: 1vmin 3vmin;
  border-radius: 10px;
  border: none;
  background: var(--bg);
  cursor: pointer;
  font-size: 2.5vmin;
  color: #444;
  box-shadow: -3px -3px 7px var(--shadow-l), 3px 3px 7px var(--shadow-d);
  transition: box-shadow 0.15s;
}

.dialog-buttons button:active {
  box-shadow: inset -2px -2px 5px var(--shadow-l), inset 2px 2px 5px var(--shadow-d);
}

#btn-confirmer {
  background: #4F86F7 !important;
  color: white !important;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.4), 3px 3px 7px rgba(0,0,0,0.25) !important;
}

#btn-confirmer:active {
  box-shadow: inset -2px -2px 5px rgba(255,255,255,0.3), inset 2px 2px 5px rgba(0,0,0,0.2) !important;
}

.file-select-btn {
  display: block;
  margin: 0 auto 2vmin;
  padding: 1.5vmin 3vmin;
  background: #4F86F7;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 2.5vmin;
  cursor: pointer;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.4), 3px 3px 7px rgba(0,0,0,0.22);
  transition: box-shadow 0.15s;
}

.file-select-btn:active {
  box-shadow: inset -2px -2px 5px rgba(255,255,255,0.3), inset 2px 2px 5px rgba(0,0,0,0.2);
}

#fichierSelectionneInfo {
  margin: 2vmin 0;
  padding: 2vmin;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: inset -2px -2px 5px var(--shadow-l), inset 2px 2px 5px var(--shadow-d);
  display: none;
}

/* ── Options zones de couleur ───────────────────────────────────────── */
.zone-seuil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  margin: 1vmin 0;
}

.zone-seuil input[type="number"] {
  width: 4em;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  padding: 3px 6px;
  background: var(--bg);
  color: #444;
  box-shadow: inset -2px -2px 5px var(--shadow-l), inset 2px 2px 5px var(--shadow-d);
}

.zone-seuil input[type="color"] {
  width: 4vmin;
  height: 4vmin;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  overflow: hidden;
  box-shadow: -2px -2px 5px var(--shadow-l), 2px 2px 5px var(--shadow-d);
}

.zone-seuil input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.zone-seuil input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.zone-seuil input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }

#bouton-reset-couleurs {
  margin-top: 1vmin;
  font-size: 13px;
  cursor: pointer;
  background: var(--bg);
  border: none;
  border-radius: 10px;
  padding: 6px 16px;
  color: #555;
  box-shadow: -3px -3px 7px var(--shadow-l), 3px 3px 7px var(--shadow-d);
  transition: box-shadow 0.15s;
}

#bouton-reset-couleurs:active {
  box-shadow: inset -2px -2px 5px var(--shadow-l), inset 2px 2px 5px var(--shadow-d);
}