/*
################################################################################################################
CSS du spinner de chargement.
################################################################################################################
*/
  

/* ===================================================================
VARIABLES CSS PERSONNALISABLES
- --loader-duration : durée totale de l'animation de chargement.
- --loader-size     : diamètre total du cercle (largeur = hauteur).
- --thickness       : Epaisseur du trait.
- --start-angle     : angle de départ du spinner.
=================================================================== */
:root {
--loader-duration: 1800ms; /* Valeur par défaut, surchargée en JS par VIDEO_WAIT_BEFORE_START */
--loader-size: 150px;
--thickness: 10px;
--start-angle: 0deg;
}

/* ---------------------------------------------------------------------
Déclaration de la propriété CSS personnalisée --p (pourcentage de
remplissage, de 0 à 100). Cette déclaration est INDISPENSABLE pour
que le navigateur sache interpoler la valeur numériquement pendant
l'animation (sans @property, --p passerait de 0 à 100 sans transition
fluide, car les custom properties sont traitées comme du texte par défaut).
--------------------------------------------------------------------- */
@property --p {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}


/* Conteneur principal : sert de repère de positionnement (position: relative)
    pour superposer les deux anneaux (gris et blanc) l'un sur l'autre. */
.jauge {
position: relative;
width: var(--loader-size);
height: var(--loader-size);
}

/* -----------------------------------------------------------------
ANNEAU GRIS DE FOND (le "rail")
Il s'agit uniquement d'un trait (border), la surface intérieure
reste transparente : on ne remplit donc pas le disque entier,
seulement son contour.
----------------------------------------------------------------- */
.jauge__fond {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: var(--thickness) solid rgba(255, 255, 255, 0.25); /* gris translucide */
    box-sizing: border-box;
}

/* -----------------------------------------------------------------
ANNEAU BLANC DE PROGRESSION
Technique : on génère un disque plein via conic-gradient (blanc
jusqu'à l'angle --p%, puis transparent), puis on le "perce" au
centre à l'aide d'un mask-image en radial-gradient afin de ne
conserver que la couronne extérieure (effet anneau/donut).
----------------------------------------------------------------- */
.jauge__progression {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-sizing: border-box;

    /* Le dégradé conique dessine un "camembert" blanc dont l'angle
        dépend de --p (0% = rien, 100% = disque plein). */
    background: conic-gradient(
        #ffffff calc(var(--p) * 1%),
        transparent calc(var(--p) * 1% + 0.5deg)
    );

    /* Le masque radial évide le centre : tout ce qui est à moins de
        (rayon - épaisseur du trait) du centre devient transparent,
        ne laissant visible que la couronne de 6px, identique à l'anneau gris. */
    -webkit-mask-image: radial-gradient(
        closest-side,
        transparent calc(100% - var(--thickness)),
        #000 calc(100% - var(--thickness))
    );
    mask-image: radial-gradient(
        closest-side,
        transparent calc(100% - var(--thickness)),
        #000 calc(100% - var(--thickness))
    );

    /* On fait partir le remplissage du haut du cercle (comme sur
        Dailymotion) plutôt que de la droite (position par défaut du
        conic-gradient), et on anime --p de 0 à 100. */
    transform: rotate(var(--start-angle));
    animation: chargement var(--loader-duration) linear forwards;
}

@keyframes chargement {
    from { --p: 0; }
    to   { --p: 100; }
}