/* /Components/Analytics/CarteStat.razor.rz.scp.css */
/* Cartes de tête affirmées : la valeur domine, le libellé et la variation se
   font discrets. « Un chiffre plutôt qu'un histogramme » commence ici.
   CSS isolé : la mise en forme de base reste dans app.css (refondue en
   parallèle sur une autre branche), on ne fait qu'appuyer la hiérarchie. */

.vigie-stat-affirmee[b-mugdupc6n4] {
    gap: 0.15rem;
    padding: 0.85rem 1rem 0.7rem;
}

.vigie-stat-affirmee .vigie-stat-valeur[b-mugdupc6n4] {
    font-size: 2.15rem;
    font-weight: 650;
    letter-spacing: -0.045em;
}

.vigie-stat-affirmee .vigie-stat-libelle[b-mugdupc6n4] {
    font-size: 0.6rem;
}

.vigie-stat-affirmee .vigie-stat-variation[b-mugdupc6n4] {
    font-size: 0.7rem;
}

/* En étroit, deux cartes par rangée : « 2 m 16 s » doit tenir sur une ligne,
   sinon la rangée entière grandit pour une seule carte. */
@media (max-width: 640px) {
    .vigie-stat-affirmee .vigie-stat-valeur[b-mugdupc6n4] {
        font-size: 1.6rem;
    }
}
/* /Components/Analytics/PanneauSerie.razor.rz.scp.css */
/* Panneau de série : chiffres à gauche, courbe compacte à droite. CSS isolé
   plutôt qu'ajouté à app.css — la feuille globale est en cours de refonte sur
   une autre branche, et rien ici n'a besoin d'être global. */

.vigie-serie[b-ccaml5hydn] {
    display: grid;
    /* La colonne des chiffres ne s'étire pas : c'est la courbe qui prend la
       place restante, jamais l'inverse. */
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    gap: 0.9rem 1.2rem;
    align-items: start;
    padding: 0.9rem 1rem;
}

.vigie-serie-chiffres[b-ccaml5hydn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.vigie-serie-tete[b-ccaml5hydn] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
}

.vigie-serie-valeur[b-ccaml5hydn] {
    font-family: var(--vigie-police-mono);
    font-size: 2.3rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--vigie-texte);
}

.vigie-serie-unite[b-ccaml5hydn] {
    font-family: var(--vigie-police-mono);
    font-size: 0.66rem;
    color: var(--vigie-texte-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.vigie-serie-reperes[b-ccaml5hydn],
.vigie-serie-points[b-ccaml5hydn] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
}

.vigie-serie-reperes li[b-ccaml5hydn],
.vigie-serie-points li[b-ccaml5hydn] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.12rem 0;
    border-bottom: 1px solid var(--vigie-bordure);
}

.vigie-serie-reperes li:last-child[b-ccaml5hydn],
.vigie-serie-points li:last-child[b-ccaml5hydn] {
    border-bottom: none;
}

.vigie-serie-cle[b-ccaml5hydn] {
    font-family: var(--vigie-police-mono);
    font-size: 0.66rem;
    color: var(--vigie-texte-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.vigie-serie-note[b-ccaml5hydn] {
    margin: 0;
    font-size: 0.7rem;
}

.vigie-serie-graphe[b-ccaml5hydn] {
    min-width: 0;
}

/* Le conteneur du graphe vit dans le composant enfant : il perd sa surface et
   ses marges ici, le panneau en fournit déjà une. */
.vigie-serie-graphe[b-ccaml5hydn]  .vigie-graphe-serie {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.vigie-serie-maigre[b-ccaml5hydn] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

@media (max-width: 780px) {
    .vigie-serie[b-ccaml5hydn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .vigie-serie-valeur[b-ccaml5hydn] {
        font-size: 2rem;
    }
}
/* /Components/Analytics/TableClassement.razor.rz.scp.css */
/* Variation collée au compte : petite, tabulaire, jamais assez large pour
   pousser la colonne. CSS isolé pour ne pas toucher app.css. */

.vigie-classement-variation[b-kd1ivbggex] {
    display: inline-block;
    margin-left: 0.35rem;
    font-family: var(--vigie-police-mono);
    font-size: 0.64rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

/* Sur un classement de contenus, monter est une bonne nouvelle : pas
   d'inversion à prévoir comme pour le taux de rebond. */
.vigie-variation-hausse[b-kd1ivbggex] {
    color: var(--vigie-ok);
}

.vigie-variation-baisse[b-kd1ivbggex] {
    color: var(--vigie-ko);
}

.vigie-variation-neutre[b-kd1ivbggex] {
    color: var(--vigie-texte-3);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-2iraiwy7wd],
.components-reconnect-repeated-attempt-visible[b-2iraiwy7wd],
.components-reconnect-failed-visible[b-2iraiwy7wd],
.components-pause-visible[b-2iraiwy7wd],
.components-resume-failed-visible[b-2iraiwy7wd],
.components-rejoining-animation[b-2iraiwy7wd] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-retrying[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-failed[b-2iraiwy7wd],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-2iraiwy7wd] {
    display: block;
}


#components-reconnect-modal[b-2iraiwy7wd] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-2iraiwy7wd 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-2iraiwy7wd 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-2iraiwy7wd 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-2iraiwy7wd]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-2iraiwy7wd 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-2iraiwy7wd {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-2iraiwy7wd {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-2iraiwy7wd {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-2iraiwy7wd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-2iraiwy7wd] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-2iraiwy7wd] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-2iraiwy7wd] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-2iraiwy7wd] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-2iraiwy7wd] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-2iraiwy7wd] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-2iraiwy7wd 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-2iraiwy7wd] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-2iraiwy7wd {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* ── Mouvement réduit ────────────────────────────────────────────────────────
   Ce modal est la SEULE interface de La Vigie qui n'apparaisse que sur panne :
   le circuit tombe, le dialogue s'ouvre, un anneau tourne en boucle jusqu'au
   retour de la connexion. Il n'y avait aucune garde ici — le fichier était celui
   du gabarit Blazor, repris tel quel — et la garde globale de app.css ne le
   couvre pas : ces règles vivent dans un CSS isolé de composant.

   Trois animations à couper, et la boucle infinie est celle qui compte : WCAG
   2.2.2 vise le mouvement automatique de plus de cinq secondes qu'on ne peut pas
   arrêter, ce qu'une reconnexion qui dure EST par définition. Le dialogue reste
   pleinement visible et lisible, il cesse simplement de bouger.

   Trouvé par la porte e2e (tests/e2e), qui force ce modal visible plutôt que
   d'attendre une vraie coupure : axe-core n'a de règle ni pour 2.2.2 ni pour
   2.3.3, et un audit ordinaire ne verrait jamais un dialogue en display:none. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-2iraiwy7wd],
    #components-reconnect-modal[open][b-2iraiwy7wd],
    #components-reconnect-modal[b-2iraiwy7wd]::backdrop {
        animation: none;
        transition: none;
        opacity: 1;
    }

    /* L'anneau s'arrête MAIS RESTE UN ANNEAU. Couper l'animation sans rien
       d'autre laisserait deux disques de 0 × 0 px (les dimensions sont portées
       par les keyframes, pas par la règle de base) : un point bleu de trois
       pixels au milieu du dialogue, qui ressemble à un défaut d'affichage. On
       fige donc le cercle à sa taille pleine, et on retire le second, qui
       n'existait que pour le décalage de phase. */
    .components-rejoining-animation div[b-2iraiwy7wd] {
        animation: none;
        top: 0;
        left: 0;
        width: 74px;
        height: 74px;
        opacity: 1;
    }

    .components-rejoining-animation div:nth-child(2)[b-2iraiwy7wd] {
        display: none;
    }
}
/* /Components/Pages/VueAnalytics.razor.rz.scp.css */
/* CSS isolé de la vue Analytics. Le groupe « fenêtre » a disparu avec la barre
   de sélection (lot 5) : il réunissait la période et le pas sous un même mot
   alors qu'ils ne portent pas sur la même chose — la période est un réglage qui
   vaut pour toute vue capable de la lire (zone D de la verrière), le pas ne
   commande qu'une courbe. */

/* Le PAS, dans la zone d'actions du cartouche de sa courbe. Il ne défile plus
   horizontalement : il n'a jamais plus de trois entrées, et à la place où il est
   maintenant c'est l'en-tête de section qui passe à la ligne s'il le faut. */
.vigie-analytics-pas[b-jj9bril4zc] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    /* Le liseré de focus d'un onglet ne doit pas être rogné. */
    padding: 2px;
}

.vigie-analytics-pas-titre[b-jj9bril4zc] {
    font-family: var(--vigie-police-mono);
    font-size: 0.6rem;
    color: var(--vigie-texte-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* Cartes de tête : colonnes un peu plus larges que la grille générique, parce
   que les valeurs y sont plus grandes. Sous 11 rem, « 2 m 16 s » se casse en
   deux lignes et la rangée entière grandit pour une seule carte. */
.vigie-stats[b-jj9bril4zc] {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Bornes exactes de la fenêtre, sous le titre de section : « aujourd'hui » doit
   pouvoir se vérifier d'un coup d'œil, c'est ce qui manquait le plus. Et depuis
   que le sélecteur de période a quitté la page pour la verrière, c'est ICI que
   se lit en toutes lettres la fenêtre choisie — le titre de la section (« Sur
   30 jours ») et cette ligne portent à eux deux ce que le libellé abrégé de la
   bande ne dit pas. */
.vigie-analytics-fenetre-dite[b-jj9bril4zc] {
    margin: -0.4rem 0 0.6rem;
    font-family: var(--vigie-police-mono);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    /* Deux colonnes imposées : à cette largeur, auto-fit n'en tiendrait qu'une
       et la rangée de chiffres occuperait tout l'écran avant la moindre courbe. */
    .vigie-stats[b-jj9bril4zc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}