/* =========================
   THEMES
========================= */

body.dark .gauge-title,

body.dark .gauge-value{

  color:#ffffff;

}

body.dark{

  --gauge-bg-1:#172033;
  --gauge-bg-2:#0c1527;
  --gauge-bg-3:#08101d;

  --gauge-border:rgba(255,255,255,0.35);

  --gauge-ticks:rgba(255,255,255,0.28);

  --gauge-labels:#ffffff;

  --gauge-secondary:rgba(255,255,255,0.58);

  --gauge-center:#f3f4f6;

  --gauge-needle:#ff5252;
}

body.light{

  --gauge-bg-1:#ffffff;
  --gauge-bg-2:#f8fafc;
  --gauge-bg-3:#f1f5f9;
  --gauge-border:rgba(15,23,42,0.14);
  --gauge-ticks:rgba(15,23,42,0.30);
  --gauge-labels:#0f172a;
  --gauge-secondary:rgba(15,23,42,0.72);
  --gauge-center:#0f172a;
  --gauge-needle:#ff0000;
  --gauge-needle-glow:
    rgba(239,68,68,0.25);
}




/* =========================
   CADRAN
========================= */

.gauge{

  --size:120px;
  position:relative;
  overflow:hidden;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  border:1px solid var(--gauge-border);
  background:
    radial-gradient(
      circle at center,
      var(--gauge-bg-1) 0%,
      var(--gauge-bg-2) 70%,
      var(--gauge-bg-3) 100%
    );
font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

box-shadow:
  inset 0 2px 10px rgba(255,255,255,0.10),
  inset 0 -8px 18px rgba(0,0,0,0.55),
  0 2px 8px rgba(0,0,0,0.35),
  0 0 0 1px rgba(255,255,255,0.05);
}

/* =========================
   RING WIND
========================= */

.gauge-wind::before{

  content:"";

  position:absolute;

  width:118px;
  height:118px;

  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%);

  border-radius:50%;

  pointer-events:none;

  background:
    conic-gradient(
      transparent 0deg,
      transparent 108deg,
      #ff0000 108deg,
      #ff0000 144deg,
      transparent 144deg,
      transparent 360deg
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      white calc(100% - 2px)
    );

  opacity:0.95;

  z-index:1;
}


/* =========================
   RING CROSSWIND
========================= */

.gauge-crosswind::before{

  content:"";

  position:absolute;

  width:118px;
  height:118px;

  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%);

  border-radius:50%;

  pointer-events:none;

  background:
    conic-gradient(
      transparent 0deg,
      transparent 144deg,
      #ff0000 144deg,
      #ff0000 216deg,
      transparent 216deg,
      transparent 360deg
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      white calc(100% - 2px)
    );

  opacity:0.95;

  z-index:1;
}

/* =========================
   RING GUST
========================= */

.gauge-gust::before{

  content:"";

  position:absolute;

  width:118px;
  height:118px;

  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%);

  border-radius:50%;

  pointer-events:none;

  background:
    conic-gradient(
      transparent 0deg,
      transparent 144deg,
      #ff0000 144deg,
      #ff0000 216deg,
      transparent 216deg,
      transparent 360deg
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      white calc(100% - 2px)
    );

  opacity:0.95;

  z-index:1;
}

/* =========================
   RING WIND100
========================= */

.gauge-wind100::before{

  content:"";

  position:absolute;

  width:118px;
  height:118px;

  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%);

  border-radius:50%;

  pointer-events:none;

  background:
    conic-gradient(
      transparent 0deg,
      transparent 162deg,
      #ff0000 162deg,
      #ff0000 216deg,
      transparent 216deg,
      transparent 360deg
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      white calc(100% - 2px)
    );

  opacity:0.95;

  z-index:1;
}

/* =========================
   RING HUMIDITY
========================= */

.gauge-humidity::before{

  content:"";

  position:absolute;

  width:118px;
  height:118px;

  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%);

  border-radius:50%;

  pointer-events:none;

  background:
    conic-gradient(
      transparent 0deg,
      transparent 252deg,
      #ff0000 252deg,
      #ff0000 324deg,
      transparent 324deg,
      transparent 360deg
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      white calc(100% - 2px)
    );

  opacity:0.95;

  z-index:1;
}


/* =========================
   RING TURBULENCE
========================= */

.gauge-turbulence::before{

  content:"";

  position:absolute;

  width:118px;
  height:118px;

  left:50%;
  top:50%;

  transform:
    translate(-50%, -50%);

  border-radius:50%;

  pointer-events:none;

  background:
    conic-gradient(
      transparent 0deg,
      transparent 216deg,
      #ff0000 216deg,
      #ff0000 288deg,
      transparent 288deg,
      transparent 360deg
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent calc(100% - 2px),
      white calc(100% - 2px)
    );

  opacity:0.95;

  z-index:1;
}


/* =========================
   GRADUATIONS
========================= */

.ticks{

  position:absolute;

  inset:0;

  border-radius:50%;
}

/* Petites graduations */

.ticks::before{

  content:"";

  position:absolute;

  inset:1px;

  border-radius:50%;

  background:
    repeating-conic-gradient(
      from -90deg,
      var(--gauge-ticks) 0deg 1deg,
      transparent 1deg 6deg
    );

  clip-path:circle(50%);

  opacity:0.9;
}

/* Cache le centre pour ne garder
   qu’un anneau */

.ticks::after{

  content:"";

  position:absolute;
  
  inset:5px;
  opacity:0.92;

  border-radius:50%;

  background:var(--gauge-bg-3);
}

/* =========================
   LABELS
========================= */

.label{

  position:absolute;

  color:var(--gauge-labels);

  font-size:11px;

  font-weight:400;

  transform:translate(-50%, -50%);
}

.label-0{
  top:10%;
  left:50%;
}

.label-25{
  top:50%;
  left:90%;
}

.label-50{
  top:90%;
  left:50%;
}

.label-75{
  top:50%;
  left:10%;
}

/* =========================
   AIGUILLE
========================= */

.needle{

  position:absolute;

  width:1.5px;

  height:34%;

  background:var(--gauge-needle);

  left:50%;
  top:50%;

transform:
  translateX(-50%)
  translateY(-100%)
  rotate(00deg);

  transform-origin:bottom center;

  border-radius:999px;

  box-shadow:
    0 0 5px rgba(255,82,82,0.45);
}

/* =========================
   CENTRE
========================= */

.center-dot{

  position:absolute;

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--gauge-center);

  left:50%;
  top:50%;

  transform:translate(-50%, -50%);
}

/* =========================
   TITRE
========================= */

.gauge-title{

  position:absolute;

  top:22%;

  left:50%;

  transform:translateX(-50%);

  font-size:8px;

  color:var(--gauge-secondary);

  letter-spacing:1px;
  font-weight:700;
  text-transform:uppercase;
  text-align:center;
line-height:1.2;
}

/* =========================
   VALEUR
========================= */

.gauge-value{

  position:absolute;
  font-weight:700 !important;
  bottom:22%;

  left:50%;

  transform:translateX(-50%);

  font-size:8px;

  color:var(--gauge-secondary);
}

/* =========================
   GRID CADRANS
========================= */

.gauges-grid{
  display:grid;
  grid-template-columns:
    repeat(3, 120px);
  justify-content:center;
  gap:5px;
}

.temp-gauge .needle {

  transform-origin: center;

}

.temp-gauge .ticks,

.temp-gauge .labels {

  transform: rotate(-90deg);

}