/* Bandeau "live" affiché sous la carte pendant l'étape du jour.
   Cf. Pages/Shared/j-1/jour_live.cshtml

   Deux polices d'icônes, récupérées depuis racecenter.letourfemmes.fr :
     "ddeav-icons"    fonts/icons-letourfemmes.*  -> icon-mmg, icon-speed, icon-bike, icon-wind…
     "ddeav-weather"  fonts/weather.woff2         -> wt-icon-sun, wt-icon-rain-1, wt-icon-storm…

   IMPORTANT : les sélecteurs sont volontairement préfixés par `.live`.
   Le CSS d'origine applique `[class^=icon-]{font-family:icons!important}` globalement,
   ce qui casserait toutes les autres icônes du site (icon-hotel-restaurant-235,
   icon-sport-134, icon-finance-256… de Line Icons Pro). */

@font-face {
    font-family: "ddeav-icons";
    src: url(../fonts/icons-letourfemmes.eot);
    src: url(../fonts/icons-letourfemmes.eot#iefix) format("embedded-opentype"),
         url(../fonts/icons-letourfemmes.woff) format("woff"),
         url(../fonts/icons-letourfemmes.ttf) format("truetype"),
         url(../fonts/icons-letourfemmes.svg#icons) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: "ddeav-weather";
    src: url(../fonts/weather.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

.live [class^="icon-"],
.live [class*=" icon-"] {
    font-family: "ddeav-icons" !important;
}

.live [class^="wt-icon-"],
.live [class*=" wt-icon-"] {
    font-family: "ddeav-weather" !important;
}

.live [class^="icon-"],
.live [class*=" icon-"],
.live [class^="wt-icon-"],
.live [class*=" wt-icon-"] {
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Glyphes utilisés (cf. fonts/icons-letourfemmes.svg pour la table complète) --- */

.live .icon-mmg:before   { content: "\e930"; }  /* profil / dénivelé */
.live .icon-route:before { content: "\e902"; }  /* distance (étape de plaine) */
.live .icon-speed:before { content: "\e903"; }
.live .icon-time:before  { content: "\e905"; }  /* alternative à icon-speed */
.live .icon-bike:before  { content: "\e90b"; }  /* vélo vu du dessus */
.live .icon-wind:before  { content: "\e908"; }

/* --- Météo : codes WMO mappés par OpenMeteoService.DescribeWeather --- */

.live .wt-icon-sun:before             { content: "\e916"; }
.live .wt-icon-sun-cloud:before       { content: "\e917"; }
.live .wt-icon-one-cloud:before       { content: "\e902"; }
.live .wt-icon-two-clouds:before      { content: "\e91e"; }
.live .wt-icon-p8:before              { content: "\e900"; }  /* brouillard */
.live .wt-icon-rain-1:before          { content: "\e903"; }
.live .wt-icon-rain-2:before          { content: "\e904"; }
.live .wt-icon-sun-rain:before        { content: "\e91a"; }
.live .wt-icon-rain-snow:before       { content: "\e905"; }
.live .wt-icon-snow-1:before          { content: "\e906"; }
.live .wt-icon-snow-2:before          { content: "\e907"; }
.live .wt-icon-snow-3:before          { content: "\e908"; }
.live .wt-icon-sun-snow:before        { content: "\e909"; }
.live .wt-icon-storm:before           { content: "\e915"; }
.live .wt-icon-rain-storm:before      { content: "\e90a"; }
.live .wt-icon-rain-storm-hail:before { content: "\e90b"; }
.live .wt-icon-hail:before            { content: "\e901"; }
.live .wt-icon-sun-hail:before        { content: "\e919"; }
.live .wt-icon-sun-storm:before       { content: "\e91c"; }
.live .wt-icon-sun-storm-rain:before  { content: "\e91d"; }
.live .wt-icon-sun-p5n:before         { content: "\e918"; }

/* --- Compte à rebours du départ (avant la première géoloc) --- */

.live__start {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    font-size: 1.05rem;
    color: #111;
}

.live__start__icon {
    width: 28px;
    height: 20px;
    flex: 0 0 auto;
    overflow: visible;
}

.live__start__label {
    color: #777;
}

.live__start__value {
    font-variant-numeric: tabular-nums; /* évite que la ligne tressaute à chaque seconde */
}

/* --- Mise en page --- */

.live__group {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Séparateur vertical entre les groupes, à partir du md */
@media (min-width: 768px) {
    .live__group + .live__group {
        border-left: 1px solid rgba(0, 0, 0, .08);
    }
}

.live__group__inner {
    margin: 0;
}

/* Base .q-icon reprise de vendor.bfeb8290.css, où elle tient en DEUX règles
   consécutives. La seconde est indispensable : sans `display:inline-flex` la
   boîte reste inline et width/height ne s'appliquent pas.
   Scopée à `.live` pour ne pas fuiter dans le reste du site. */
.live .q-icon {
    line-height: 1;
    width: 1em;
    height: 1em;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-align: center;
    position: relative;
    box-sizing: initial;
    fill: currentColor;

    user-select: none;
    cursor: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex: 0 0 auto;
}

.live .q-icon:after,
.live .q-icon:before {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.live .q-icon > img,
.live .q-icon > svg {
    width: 1em;
    height: 1em;
}

/* Tailles d'icônes : en rem et non en em.
   La référence les laisse hériter (1em), mais chez nous elles arrivent au bout
   d'une longue chaîne d'héritage depuis body et finissent trop petites. Le rem
   coupe cette chaîne et rend la taille prévisible. Les valeurs s'écartent donc
   volontairement de l'original, au profit de la lisibilité.
   Tout est réglable ici, en un seul endroit. */
.live {
    --live-icon-size: 1.75rem;       /* icônes dénivelé / distance / vitesse */
    --live-meteo-icon-size: 2.25rem; /* icône du temps qu'il fait */
    --live-bike-size: 2.8rem;       /* vélo vu du dessus */
    --live-wind-size: 1rem;          /* flèche de vent */
    --live-wind-radius: 2.25rem;     /* distance flèche <-> centre du vélo */
}

/* Équivalent de .label-icon dans le contexte de base de la référence : uniquement
   une couleur et une marge. La pastille grise ronde n'existe QUE sous
   `.groups--stats` / `.endbanner`, deux variantes que ce widget n'utilise pas. */
.live .live__icon {
    font-size: var(--live-icon-size);
    color: #000;
    margin-right: 10px;
}

.live .live__icon--meteo {
    font-size: var(--live-meteo-icon-size);
    margin-right: 10px;
}

.live__info {
    text-align: left;
}

.live__info__label {
    display: inline-block;
    font-size: .8em;
    line-height: 1.2;
    margin-bottom: 7px;
    color: #777;
}

.live__info__value {
    font-size: 1.2em;
    line-height: 1.2;
    color: #111;
}

/* Deuxième valeur sur une même ligne (température puis vent) */
.live__info__value.has-separator {
    position: relative;
    padding-left: 15px;
    margin-left: 10px;
}

.live__info__value.has-separator::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 1px;
    height: 16px;
    background: #bababa;
}

/* --- Rose des vents autour du vélo --- */

/* Marge de dégagement : la flèche de vent tourne à 360° autour du vélo et sort
   de sa boîte, il lui faut de la place pour ne pas chevaucher le texte voisin. */
.live__windDir {
    margin: 0 1.25rem;
}

/* La boîte du cadran fait exactement la taille du vélo, pas plus : c'est elle
   qui dicte la hauteur du bloc météo. La flèche de vent, placée à un rayon
   supérieur à sa demi-hauteur, déborde donc légèrement — c'est le comportement
   de la référence, et il faut se garder d'ajouter un overflow:hidden ici. */
.live__windDir__inner {
    position: relative;
    width: var(--live-bike-size);
    height: var(--live-bike-size);
    margin: 0 auto;
    overflow: visible;
}

/* ATTENTION à la spécificité : ces trois règles doivent battre `.live .q-icon`
   (deux classes), qui impose `position:relative` et `width/height:1em`. Un
   sélecteur à une seule classe perdrait, et le vélo se retrouverait décalé
   d'une demi-icône par le translate(-50%,-50%) appliqué en position relative. */
.live .live__windDir__bike {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--live-bike-size);
    line-height: 1;
    color: #000;
}

/* L'orbite occupe tout le carré et pivote autour de son centre : tourner
   l'orbite de θ place l'icône enfant à l'angle θ ET l'oriente d'autant.
   0° = vent de face (icône au-dessus du vélo), 180° = vent dans le dos. */
.live .live__windDir__orbit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform .6s ease;
}

.live .live__windDir__wind {
    position: absolute;
    top: 50%;
    left: 50%;
    /* -50%,-50% recentre l'icône, puis on la pousse au rayon voulu.
       rotate(90deg) redresse une icône dessinée pointe vers la droite. */
    transform: translate(-50%, -50%)
               translateY(calc(-1 * var(--live-wind-radius)))
               rotate(90deg);
    font-size: var(--live-wind-size);
    line-height: 1;
    color: #000;
}