/********** Template CSS **********/
:root {
    --primary: #EB1616;
    --secondary: #191C24;
    --light: #1324ed;
    --dark: #e5dcdc;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}



/**Le css flip**/
.cont {
    display: flex;
    justify-content: center;
    align-items: center;
    height:auto;
    font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}

.flip-card {
    background-color: transparent;
    width:100%;
    height: 130px;
    perspective: 1000px;
    
    .inner

{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    .front,.front2,.front3,.front4,.front5,.front6,.back{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align:center;
}

.front {
    background-color:#d6222e;
}
.front2 {
    background-color: #900C3F;
}
.front3 {
    background-color: #786e10;
}
.front4 {
    background-color: #FF5733;
}
.front5 {
    background-color: #37915e;
}
.front5 {
    background-color: #37915e;
}
.front6 {
    background-color: #4d69e8;
}
.back {
    background-color: teal;
    color: white;
    transform: rotateX(180deg);
}

}

&:hover {
    .inner

{
    transform: rotateX(180deg);
}

}
}
/**Fin*/
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    transition: .5s;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}


/*** Layout ***/
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    height: 100vh;
    overflow-y: auto;
    background: var(--secondary);
    transition: 0.5s;
    z-index: 999;
}

.content {
    margin-left: 250px;
    min-height: 100vh;
    background: var(--dark);
    transition: 0.5s;
}
#encart1, #encart2, #encart3, #encart4, #encart5, #encart6 {
border:3px solid #000;
}
#textelection, #typeelect {
    font-size:15px;
    color: #fff;
}
#divdumap {
    height:890px;
}
@media (min-width: 992px) {
    #blocFiltre p{
     font-size:0.7vw;
    }
    h1.leh1 {
        font-size: 1rem !important;
        text-transform: uppercase;
    }
    #hautcard1 {
        height: 314px;
    }
    #hautcard2{
    height:312px;
    }
    #hautcard3{
     height:312px;
    }
    #divdumap {
        height: 740px;
    }
    #textelection, #typeelect {
        font-size: 1.5vw;
        color: #fff;
    }
   .dropdown-item h6{
    font-size:1.5vw;
    color:#fff;
    }
    #encart1, #encart2, #encart3, #encart4, #encart5, #encart6 {
        border: 0.2vw solid #000;
    }
    #taux_suffrages, #taux_bulletin_nuls, #pourcentage_bureaux_depouilles, #taux_participation {
        font-size: 1.2vw;
    }
    #Partivainqueur{
    font-size:1.4vw;
    }
    #textecn4, #textecn5, #textecn6, #PartiSecond, #pourcentVainqueur,
    #pourcentSecond, #textecn1, #textecn3, #textecn2 {
        font-size: 1vw;
    }
   
    #nomSecond, #nomVainqueur {
        font-size: 0.8vw;
    }
    .fa.fa-chart-line, .fa.fa-user, .fa.fa-chart-bar, .fa.fa-chart-area, .fa.fa-chart-pie {
    font-size:2.7vw!important;
    }
    .sidebar {
        margin-left: 0;
    }

    .sidebar.open {
        margin-left: -250px;
    }

    .content {
        width: calc(100% - 250px);
    }

    .content.open {
        width: 100%;
        margin-left: 0;
        overflow-y:scroll;

    }
}

@media (max-width: 991.98px) {
    .sidebar {
        margin-left: -250px;
    }

    .sidebar.open {
        margin-left: 0;
    }

    .content {
        width: 100%;
        margin-left: 0;
    }

    /* #divdumap est fixe a 890px plus haut : une hauteur pensee pour le bureau,
       qui occupe plusieurs ecrans sur telephone et repousse tout le reste hors
       de vue. Concerne les 17 vues cartographiques. */
    #divdumap, #hautcard1, #hautcard2, #hautcard3 {
        height: auto !important;
        min-height: 340px;
    }

    #map {
        min-height: 340px;
    }

    /* Tout tableau large defile dans son conteneur au lieu d'elargir la page. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    #divdumap, #map {
        min-height: 260px;
    }
}


/*** Navbar ***/
.sidebar .navbar .navbar-nav .nav-link {
    /*padding: 7px 20px;*/
    color: var(--light);
    font-weight: 500;
    border-left: 3px solid var(--secondary);
    border-radius: 0 30px 30px 0;
    outline: none;
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active {
    color: var(--primary);
    background: var(--dark);
    border-color: var(--primary);
}

.sidebar .navbar .navbar-nav .nav-link i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eb1616;
    border-radius: 40px;
}

.sidebar .navbar .navbar-nav .nav-link:hover i,
.sidebar .navbar .navbar-nav .nav-link.active i {
    background: var(--secondary);
}

/*** Fenetre d'information au clic sur une alerte de la carte ***/
/* Infowindow.js fixe 240 px en style inline sur le titre et le contenu : sur
   une fenetre aussi etroite, « Assainissement » se coupait en deux. La largeur
   est portee sur le conteneur, titre et contenu s'y adaptant. */
.sgInfoWindow {
    width: 340px !important;
    max-width: 92vw !important;
    /* Surtout PAS d'overflow ici. Les fleches sont des enfants places hors du
       cadre (top: -30px pour celle du haut) : donner un overflow a la fenetre
       en fait un conteneur defilant, qui ramene la fleche a l'interieur,
       par-dessus le titre. Le defilement se fait dans la description, dont la
       hauteur est deja plafonnee. */
    overflow: visible !important;
}

    .sgInfoWindow .content,
    .sgInfoWindow .title {
        width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* La hauteur suit le contenu. Les vues portaient un
       .content.open { min-height: 12vw } herite du gabarit : sur un ecran de
       1920 px cela imposait 230 px de haut quel que soit le texte, d'ou un
       grand vide sous les rubriques. Ces regles ont ete retirees des vues ;
       celle-ci garantit le comportement meme s'il en subsiste ailleurs. */
    /* .content.open est cible explicitement : c'est sous cette forme que les
       vues declaraient le min-height, et une regle de vue est evaluee apres
       cette feuille. A specificite egale elle l'emporterait ; en nommant les
       deux classes, celle-ci reste prioritaire ou qu'il en subsiste. */
    .sgInfoWindow .content,
    .sgInfoWindow .content.open {
        min-height: 0 !important;
        height: auto !important;
        /* Le contenu ne doit jamais depasser la largeur de la fenetre : les
           lignes de description se retrouvaient coupees sur la droite. */
        overflow-x: hidden !important;
    }

    /* La fleche reliant la fenetre au point cliquee etait blanche bordee de
       gris clair, indiscernable sur un fond de carte lui-meme clair. Elle
       reprend la teinte du bandeau et se lit comme la pointe d'une bulle. */
    .sgInfoWindow .pointer {
        background-color: #338833 !important;
        border-color: #1d5c1d !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 3px 3px 8px rgba(0, 0, 0, .45) !important;
    }

.popup-alerte-entete {
    margin: 0;
    padding: 0 4px;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.popup-alerte {
    padding: 10px 12px 12px;
    font-family: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;
    color: #2b3446;
    border-left: 4px solid var(--couleur-thematique, #6c7a92);
    /* Le rembourrage et le filet doivent tenir DANS la largeur de la fenetre,
       sans quoi le texte deborde sur la droite. */
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
}

    .popup-alerte + .popup-alerte {
        border-top: 1px solid #e3e8f0;
    }

.popup-alerte--vide {
    color: #6c7a92;
    font-style: italic;
}

.popup-alerte-bandeau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.popup-alerte-thematique {
    background: var(--couleur-thematique, #6c7a92);
    color: #fff;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.popup-alerte-statut {
    border-radius: 3px;
    padding: 3px 8px;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

    .popup-alerte-statut.est-verifiee {
        background: #e3f5ea;
        color: #1c7a45;
    }

    .popup-alerte-statut.est-attente {
        background: #fdeaea;
        color: #b02a2a;
    }

.popup-alerte-titre {
    margin: 0 0 8px;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1c2536;
}

.popup-alerte-champs {
    margin: 0;
}

    /* Intitule de rubrique : petites capitales grasses, soulignees sur toute
       la largeur. Le filet separe nettement chaque rubrique de sa valeur et
       des rubriques suivantes — sans lui, les deux se confondaient. */
    .popup-alerte-champs dt {
        margin: 12px 0 0;
        padding-bottom: 3px;
        border-bottom: 1px solid #d4dbe6;
        font-size: .63rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #5d6880;
    }

        .popup-alerte-champs dt:first-child {
            margin-top: 0;
        }

    /* Valeur : plus grande, plus foncee et de graisse normale — l'ecart de
       taille, de couleur et de casse suffit a la distinguer de l'intitule. */
    .popup-alerte-champs dd {
        margin: 6px 0 0;
        font-size: .88rem;
        font-weight: 400;
        line-height: 1.45;
        color: #1c2536;
        overflow-wrap: anywhere; /* un mot tres long ne doit pas elargir la fenetre */
    }

/* Une description de plusieurs paragraphes rendait la fenetre plus haute que
   la carte : elle defile desormais dans son propre cadre. */
.popup-alerte-description {
    max-height: 8.5rem;
    overflow-y: auto;
    padding-right: 4px;
    text-align: justify;
}

/*** Sous-menu de la barre laterale (element <details> natif) ***/
.sidebar .navbar .navbar-nav .sous-menu {
    width: 100%;
}

    /* Le summary reprend l'apparence d'une entree de menu ordinaire. */
    .sidebar .navbar .navbar-nav .sous-menu > summary {
        display: flex;
        align-items: center;
        cursor: pointer;
        list-style: none;
        position: relative;
        padding-right: 34px;
    }

        /* Retire le triangle par defaut, remplace par un chevron a droite. */
        .sidebar .navbar .navbar-nav .sous-menu > summary::-webkit-details-marker {
            display: none;
        }

        .sidebar .navbar .navbar-nav .sous-menu > summary::after {
            content: "\f107"; /* chevron bas, Font Awesome */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            position: absolute;
            right: 14px;
            transition: transform .25s;
        }

    .sidebar .navbar .navbar-nav .sous-menu[open] > summary::after {
        transform: rotate(-180deg);
    }

/* Bloc des sous-entrees : legerement en retrait et sur un fond plus sombre,
   pour se distinguer nettement des entrees de premier niveau. */
.sidebar .sous-menu > .sous-menu-corps {
    display: flex;
    flex-direction: column;
    padding: 4px 0 6px;
    margin: 2px 0 6px;
    background: rgba(0, 0, 0, .28);
    border-left: 2px solid rgba(255, 255, 255, .12);
}

/* Entrees du sous-menu. Selecteur volontairement court : les regles du
   gabarit ciblent .nav-link, que ces liens ne portent pas, il n'y a donc pas
   de conflit de specificite a arbitrer. */
.sidebar .sous-menu-lien {
    display: block;
    width: 100%;
    padding: 8px 16px 8px 46px;
    font-size: .82rem;
    line-height: 1.25;
    color: #c9d2e3;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: .2s;
    position: relative;
}

    /* Puce discrete : marque le debut de chaque entree quand le libelle passe
       sur deux lignes. */
    .sidebar .sous-menu-lien::before {
        content: "";
        position: absolute;
        left: 30px;
        top: 14px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .35);
    }

    .sidebar .sous-menu-lien:hover {
        color: #fff;
        background: rgba(255, 255, 255, .07);
    }

    /* Page courante : fond clair et filet colore, comme les entrees de premier
       niveau, pour qu'on sache dans quel sous-module on se trouve. */
    .sidebar .sous-menu-lien.active {
        color: var(--primary);
        background: var(--dark);
        border-left-color: var(--primary);
        font-weight: 700;
    }

        .sidebar .sous-menu-lien.active::before {
            background: var(--primary);
        }

.sidebar .navbar .dropdown-toggle::after {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.sidebar .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

.sidebar .navbar .dropdown-item {
    padding-left: 25px;
    border-radius: 0 30px 30px 0;
    color: var(--light);
}

.sidebar .navbar .dropdown-item:hover,
.sidebar .navbar .dropdown-item.active {
    background: var(--dark);
}

.content .navbar .navbar-nav .nav-link {
    margin-left: 1.30vw;
    padding: 0.6vw 0;
    color: var(--light);
    outline: none;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dark);
    border-radius: 40px;
}

.content .navbar .dropdown-item {
    color: var(--light);
}

.content .navbar .dropdown-item:hover,
.content .navbar .dropdown-item.active {
    background: var(--dark);
}

.content .navbar .dropdown-toggle::after {
    margin-left: 6px;
    vertical-align: middle;
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: .5s;
}

.content .navbar .dropdown-toggle[aria-expanded=true]::after {
    transform: rotate(-180deg);
}

@media (max-width: 575.98px) {
    .content .navbar .navbar-nav .nav-link {
        margin-left: 15px;
    }
}
@media(min-width:1500px) {
    #nameAlerte {
        font-size: 1.3vw !important;
        display: flex;
        justify-content: center;
    }
    .sidebar .navbar .navbar-nav .nav-link {
        font-size: 0.8vw; /* Modifiez la taille de police comme vous le souhaitez */
        color: white;
    }
}
@media (min-width:1200px) and (max-width: 1500px) {
    #nameAlerte {
        font-size: 1vw !important;
        display: flex;
        justify-content: center;
    }
    .sidebar .navbar .navbar-nav .nav-link {
        font-size: 1.2vw!important; /* Modifiez la taille de police comme vous le souhaitez */
        color: white;
    }
   
}
@media (min-width:992px) and (max-width: 1199px) {
    #nameAlerte {
        font-size: 1.1vw !important;
        display: flex;
        justify-content: center;
    }
    .sidebar .navbar .navbar-nav .nav-link {
        font-size: 14px!important; /* Modifiez la taille de police comme vous le souhaitez */
        color: white;
    }
    .labelregion, .labeldep, .labelsp, .labelthema, .labelsousthe {
        font-size: 11px;
    }
}
@media (min-width:320px) and (max-width:991px) {
    #nameAlerte {
        font-size: 10px !important;
        display: flex;
        justify-content: center;
    }

    .sidebar .navbar .navbar-nav .nav-link {
        font-size: 14px!important; /* Modifiez la taille de police comme vous le souhaitez */
        color: white;
    }
}
/*** Date Picker ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Testimonial ***/
.progress .progress-bar {
    width: 0px;
    transition: 2s;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 5px solid var(--primary);
    border-radius: 15px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--dark);
    border-color: var(--primary);
}

/*** Legende de la carte ***********************************************

   Panneau ancre en bas a droite du bloc #divdumap, au-dessus de la carte.
   Le comportement est dans Scripts/legende-carte.js, dont l'en-tete explique
   pourquoi les couches Region / Departement / Sous-prefecture n'y figurent
   pas : elles sont dessinees en alpha 0 et ne servent qu'aux clics.

   Le panneau est un frere de #map, pas un enfant : chargementCarte() vide
   #map a chaque construction de la carte.
 ***********************************************************************/
.legende-carte {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 5;
    width: 208px;
    max-width: calc(100% - 24px);
    background: #fff;
    border: 1px solid #d9e0ec;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(20, 30, 55, .18);
    font-family: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;
    color: #2b3446;
    overflow: hidden;
}

.legende-carte__bascule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    background: #f4f7fb;
    border: 0;
    border-bottom: 1px solid #e3e8f0;
    cursor: pointer;
    text-align: left;
}

    .legende-carte__bascule:hover {
        background: #eaf0f8;
    }

    .legende-carte__bascule:focus-visible {
        outline: 2px solid #f5871f;
        outline-offset: -2px;
    }

.legende-carte__titre {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #46536b;
}

/* Chevron trace en CSS : pointe vers le bas panneau ouvert, vers le haut
   panneau replie. Aucune police d'icones n'est requise. */
.legende-carte__chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid #6c7a92;
    border-bottom: 2px solid #6c7a92;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}

.legende-carte--repliee .legende-carte__chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.legende-carte--repliee .legende-carte__bascule {
    border-bottom: 0;
}

.legende-carte--repliee .legende-carte__corps {
    display: none;
}

.legende-carte__corps {
    max-height: 44vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.legende-carte__groupe {
    padding: 8px 10px 9px;
}

    .legende-carte__groupe + .legende-carte__groupe {
        border-top: 1px solid #eef1f7;
    }

.legende-carte__intitule {
    margin: 0 0 6px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8a95a8;
}

.legende-carte__entree {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 3px 0;
    font-size: .76rem;
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
}

    .legende-carte__entree input[type="checkbox"] {
        flex: 0 0 auto;
        width: 13px;
        height: 13px;
        margin: 0;
        accent-color: #f5871f;
        cursor: pointer;
    }

.legende-carte__texte {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Vignette de symbole : l'image renvoyee par /GetLegend a une taille
   imposee par le serveur, on la contient sans la deformer. */
.legende-carte__symbole {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.legende-carte__symbole--marqueur {
    color: #46536b;
}

.legende-carte__symbole--repli {
    width: 12px;
    height: 12px;
    border: 1px solid #b6c0d2;
    border-radius: 2px;
    background: #dde4ef;
}

/* Ligne de thematique : le libelle « GOUVERNANCE ET DROITS DE L'HOMME »
   occupe deux a trois lignes dans un panneau de 208px. L'alignement se fait
   donc en haut, pour que l'icone reste en regard de la premiere ligne au lieu
   de flotter au milieu du bloc. */
.legende-carte__cle {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 3px 0;
    font-size: .72rem;
    line-height: 1.3;
    color: #46536b;
}

/* Pastille de teinte : rappelle le statut porte par la couleur du marqueur. */
.legende-carte__pastille {
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-top: 2px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(20, 30, 55, .18);
}

/* Les marqueurs sont poses sur la carte en 25x25 ; 18px suffit ici a les
   reconnaitre sans deborder sur le libelle. */
.legende-carte__icone {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: -1px;
    object-fit: contain;
}

/* Sur ecran etroit la carte est deja courte : le panneau se resserre pour ne
   pas en couvrir le quart. */
@media (max-width: 767.98px) {
    .legende-carte {
        right: 8px;
        bottom: 8px;
        width: 176px;
    }

    .legende-carte__corps {
        max-height: 38vh;
    }

    .legende-carte__entree,
    .legende-carte__cle {
        font-size: .72rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legende-carte__chevron {
        transition: none;
    }
}


/*** Clignotement des alertes ******************************************

   Les GIF d'origine etaient animes (2 a 3 images) : c'est ce qui faisait
   battre les alertes sur la carte. Les marqueurs sont desormais dessines en
   SVG et transmis en « data: », ou une animation ne serait pas rejouee de
   maniere fiable -- un SVG servant d'image est rendu comme une ressource
   externe, et son animation ne traverse pas le <pattern> par lequel la
   bibliotheque peint les marqueurs.

   On anime donc le groupe SVG de la couche, qui appartient au document et
   suit les regles CSS ordinaires. Un seul element anime pour 172 marqueurs :
   le navigateur compose, rien n'est redessine, contrairement a un minuteur
   qui reconstruirait les symboles.

   La classe est posee par RecalerCoucheAlertes (Scripts/carte-alertes.js),
   appelee apres chaque repeuplement de la couche.
 ***********************************************************************/
@keyframes cncmr-clignotement-alerte {
    0%, 62%   { opacity: 1; }
    62.01%, 100% { opacity: .3; }
}

.couche-alertes-clignote {
    /* steps(1,end) : un battement franc, comme le GIF, et non un fondu. */
    animation: cncmr-clignotement-alerte 1.2s steps(1, end) infinite;
}

/* Un clignotement permanent est penible, voire risque, pour qui y est
   sensible : on le neutralise si le systeme le demande. */
@media (prefers-reduced-motion: reduce) {
    .couche-alertes-clignote {
        animation: none;
    }
}