/* ═══════════════════════════════════════════════════════════════
   app.css — OpenSpeedTest v2.5.4 — Edition personnalisée
   • Styles SVG originaux préservés intégralement (lignes 1–220)
   • Section LAYOUT en bas : overrides pour le mode multi-colonnes
═══════════════════════════════════════════════════════════════ */

/* ── Polices Roboto (utilisées par le SVG interne) ───────── */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-v30-latin-regular.eot");
  src: local(""),
    url("../fonts/roboto-v30-latin-regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/roboto-v30-latin-regular.woff2")      format("woff2"),
    url("../fonts/roboto-v30-latin-regular.woff")       format("woff"),
    url("../fonts/roboto-v30-latin-regular.ttf")        format("truetype"),
    url("../fonts/roboto-v30-latin-regular.svg#Roboto") format("svg");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-v30-latin-500.eot");
  src: local(""),
    url("../fonts/roboto-v30-latin-500.eot?#iefix") format("embedded-opentype"),
    url("../fonts/roboto-v30-latin-500.woff2")      format("woff2"),
    url("../fonts/roboto-v30-latin-500.woff")       format("woff"),
    url("../fonts/roboto-v30-latin-500.ttf")        format("truetype"),
    url("../fonts/roboto-v30-latin-500.svg#Roboto") format("svg");
}

/* ── Base ────────────────────────────────────────────────── */
body  { margin: 0; padding: 0; display: block; }
::-webkit-scrollbar { display: none; }
html  { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Crédits ─────────────────────────────────────────────── */
.Credits {
  color: rgb(125 119 119);
  text-align: center;
  font-size: 14px;
  font-family: Roboto-Medium, Roboto;
  font-weight: 500;
}
.Credits a { text-decoration: none; color: rgb(113,113,113); }
.Credits a:hover { color: #14b0fe; }

/* ── Erreur réseau ───────────────────────────────────────── */
.ConnectError { display: none; }

/* ── Conteneur SVG ───────────────────────────────────────── */
.openSpeedtestApp { height: 100vh; width: 100vw; display: none; overflow: hidden; }

/* ── Jauge principale ────────────────────────────────────── */
.main-Gaugebg {
  fill: none; stroke: rgb(231,231,232); stroke-linecap: round;
  stroke-linejoin: round; stroke-width: 22px; stroke-dasharray: 681;
}
.main-GaugeBlue {
  fill: none; stroke: url(#gradient); stroke-linecap: round;
  stroke-linejoin: round; stroke-width: 22px; stroke-dasharray: 681; stroke-opacity: 0;
}
.main-GaugeWhite {
  fill: none; stroke: rgb(255,255,255); stroke-linecap: round;
  stroke-linejoin: round; stroke-width: 15px;
  stroke-dasharray: 0,681; stroke-dashoffset: 1; stroke-opacity: 0;
}

/* ── Typographie SVG ─────────────────────────────────────── */
.oDo-Meter {
  font-size: 16.633283615112305px; fill: gray;
  font-family: Roboto-Medium, Roboto; font-weight: 500;
}
.oDoLive-Speed {
  font-size: 28px; fill: #201e1e;
  font-family: Roboto-Medium, Roboto; font-weight: 500; text-anchor: middle;
}
.oDoLive-Status {
  font-size: 10px; fill: #d2d1d2;
  font-family: Roboto-Medium, Roboto; font-weight: 500; text-anchor: middle;
}
.uiBg { fill: #d2d1d2; }
.progressbg {
  stroke: rgb(231,231,232); stroke-width: 8px; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0;
}
.Cards  { fill: #f2f2f2; }
.Symbol { fill: url(#gradient); }
.rtext {
  font-size: 12px; fill: #333;
  font-family: Roboto-Medium, Roboto; font-weight: 500;
}
.rtextnum {
  font-size: 23px; fill: #201e1e;
  font-family: Roboto-Medium, Roboto; font-weight: 500; text-anchor: middle;
}
.rtextmbms {
  font-size: 12px; fill: #5f5f5f;
  font-family: Roboto-Medium, Roboto; font-weight: 500; text-anchor: middle;
}
.jitter-Mob {
  font-size: 9px; fill: #5f5f5f;
  font-family: Roboto-Medium, Roboto; font-weight: 500; text-anchor: middle;
}

/* ── Boutons SVG ─────────────────────────────────────────── */
.startButton {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; pointer-events: visible;
}
.buttonTxt {
  font-size: 40px; fill: #ffffff;
  font-family: Roboto-Medium, Roboto; font-weight: 500; text-anchor: middle;
}

/* ── Barres de progression ───────────────────────────────── */
.intro-Progress {
  stroke: #56c4fb; stroke-width: 8px; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0;
}
.progressElmstart {
  stroke: #56c4fb; stroke-width: 8px; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0; display: block;
}
.Startsettings {
  fill: url(#RadialGradient1);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; pointer-events: visible;
  opacity: 0.1; transition: opacity 1s ease-in-out;
}
.Startsettings:hover { opacity: 1; }
.deskStart {
  fill: none; stroke: url(#gradient); stroke-linecap: round;
  stroke-linejoin: round; stroke-width: 22px; stroke-dasharray: 681;
}

/* ── IDs contrôlés par app.js ────────────────────────────── */
#UI-Desk { display: none; }
#UI-Mob  { display: none; }
.oDoTop-Speed {
  font-size: 16.96px; fill: gray;
  font-family: Roboto-Medium, Roboto; font-weight: 500; text-anchor: end;
}
#upSymbolDesk   { fill: #14b0fe; display: none; }
#downSymbolDesk { fill: #14b0fe; display: none; }
#upSymbolMob    { fill: #14b0fe; display: none; }
#downSymbolMob  { fill: #14b0fe; display: none; }
#ipMob {
  font-size: 15px; fill: #201e1e;
  font-family: Roboto-Medium, Roboto; font-weight: 500;
  text-anchor: middle; display: none;
}
#ipDesk {
  font-size: 15px; fill: #201e1e;
  font-family: Roboto-Medium, Roboto; font-weight: 500;
  text-anchor: middle; display: none;
}

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
  position: absolute; z-index: 999; top: 50vh; left: 50vw; text-align: center;
}
.spinner > div {
  width: 20px; height: 20px; background-color: #2196f3;
  border-radius: 100%; display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 { -webkit-animation-delay: -.32s; animation-delay: -.32s; }
.spinner .bounce2 { -webkit-animation-delay: -.16s; animation-delay: -.16s; }
@-webkit-keyframes sk-bouncedelay {
  0%,80%,100%{-webkit-transform:scale(0)} 40%{-webkit-transform:scale(1)}
}
@keyframes sk-bouncedelay {
  0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)} 40%{-webkit-transform:scale(1);transform:scale(1)}
}

/* ── Dark mode icons ─────────────────────────────────────── */
.darkmode { margin-bottom: -15px; fill: #75757a99; padding-top: 16px; display: none; cursor: pointer; margin-right: 30px; }
#daymode  { margin-right: 40px; }
.darkmode:hover { fill: #000; }

/* ── Tailles SVG par défaut (Mobile / Desktop) ───────────── */
.Mobile,
.Desktop {
  visibility: hidden;
  width:  100vw;
  height: 100vh;
}

/* ── Orientation ─────────────────────────────────────────── */
@media only screen and (orientation: landscape) {
  .Mobile  { visibility: hidden; }
  .Desktop { visibility: visible; }
}
@media only screen and (orientation: portrait) {
  .spinner { top: 42vh; left: 42vw; }
  .Mobile  { visibility: visible; }
  .Desktop { visibility: hidden; }
}
@media only screen and (max-width: 300px) { .Credits { display: none; } }


/* ═══════════════════════════════════════════════════════════
   SECTION LAYOUT — overrides pour le mode multi-colonnes
   ─────────────────────────────────────────────────────────
   PROBLÈME SANS CES RÈGLES :
   Le SVG (inliné par app.js via les classes .Mobile/.Desktop)
   hérite de width:100vw / height:100vh.
   Dans un layout multi-colonnes, le SVG déborde hors de son
   conteneur #st-wrap et rien n'est visible (spinner infini).

   SOLUTION :
   On force 100% du conteneur parent. Le viewBox du SVG
   (586×346 desktop, 295.9×363.3 mobile) se charge du scaling.
═══════════════════════════════════════════════════════════ */

#st-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Les classes assignées par app.js au SVG inline */
#st-wrap .Mobile,
#st-wrap .Desktop {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width:  100% !important;
  height: 100% !important;
  max-width:  100% !important;
  max-height: 100% !important;
}

/* Le SVG racine lui-même (remplace l'<object> au chargement) */
#st-wrap > svg {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width:  100% !important;
  height: 100% !important;
}

/* Spinner : était en 50vh/50vw → recentré dans son conteneur */
#st-wrap #loading_app.spinner {
  position: absolute !important;
  top:  50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 50;
}