#np_calendar_container {
        /* --largeur: 240px; */
        --largeur_jour: 2em;
        --hauteur_jour: 1.5em;
        /*1.3*/
        --couleur_période1: green;
        --couleur_période2: orange;
        --épaisseur_période: 3px;
        --taille_nom_jour: .8em;
        --taille_jour: .9em;
        --taille_chevron: 1em;
        --taille_mois: 1.1em;
        --taille_gap: 0px;

        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin: 0px;
        flex-direction: column;
        padding-top: 1em;
        /* border: solid green 1px; */
    }

    #a0408av,
    #a0408ap,
    #a0408today {
        cursor: pointer;
        text-align: center;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        text-decoration: none;
        padding: 0 10px 0 10px;
    }


    #a0408av:hover,
    #a0408ap:hover,
    #a0408today:hover {
        background-color: rgba(199, 199, 199, 0.637);
    }

    #a0408today {
        cursor: pointer;
    }

    .calendrier {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        max-width: var(--largeur);
        border: rgb(129, 129, 216) solid 1px;
        font-family: 'arial';
        font-size: var(--taille_jour);
        margin: 0;
        padding: 5px;
        gap: var(--taille_gap);
    }

    .mois {
        grid-column: 2 / 7;
        font-size: var(--taille_mois);
        text-align: center;
        font-weight: bold;
        /* border: solid red 1px; */
    }

    .autremois {
        color: #a4a6c5b0;
    }

    .jour-lettre {
        /* width: var(--largeur_jour); */
        /* margin: 1px; */
        font-size: var(--taille_nom_jour);
        background-color: honeydew;
        text-align: center;
    }

    .jour {
        text-align: center;
        position: relative;
        height: var(--hauteur_jour);
        width: var(--largeur_jour);
        /* border: solid rgb(212, 0, 255) 1px; */
        /* overflow: hidden;  */
    }

    .per1 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 10;
    }

    .per2 {
        position: absolute;
        top: var(--épaisseur_période);
        left: 0px;
        width: 100%;
        z-index: 10;
    }

    .per2Activate {
        border-bottom: solid var(--épaisseur_période) var(--couleur_période2);
    }

    .per1Activate {
        border-bottom: solid var(--épaisseur_période) var(--couleur_période1);
    }

    .textJour {
        position: absolute;
        /* width: calc(100% - 0px); */
        width: 100%;
        /* border: solid blue 1px; */
        top: var(--épaisseur_période);
        text-align: center;
        z-index: 1;
    }

    #la_legende_container {
        /* border: solid 1px blue; */
        padding-top: 1em;
        max-width: var(--largeur);
        width: 100%;
        font-size: 0.85em;
    }

    .cal_officiel {
        display: block;
        text-align: left;
        width: var(--largeur);
        font-size: 0.85em;
        padding-top: 0em;
    }

    .lien_calendriers {
        border-top: solid grey 1px;
        padding-top: .5em;
        margin-top: 1em;
    }


    .legende {
        color: red;
    }

    .legende_rouge {
        background-color: rgba(228, 15, 58, 0.507);
        ;
        padding-left: 5px;
        padding-right: 5px;
        color: black;
    }

    .lJS {
        background-color: rgba(247, 210, 6, 0.507);
        color: black;
        padding-left: 5px;
        padding-right: 5px;
    }

    .legende_noire {
        color: black;

    }

    .legende_PR {
        background-color: #00B050;
        color: white;
        padding-left: 5px;
        padding-right: 5px;
    }

    .PR {
        position: relative;
        background-color: #00B050;
        color: white;
        height: fit-content;
        z-index: 1;
    }

    /* Bac + vert */
    .BCV {
        background-color: #00B050;
        color: red;
        font-weight: bold;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* BAC */
    .BC {
        /* background-color: #00B050; */
        color: red;
        font-weight: bold;
        padding-left: 5px;
        padding-right: 5px;
    }

    #la_legende div {
        border-top: solid lightgray 1px;

    }

    #la_legende {
        --espace_entre_ligne: 2px;
        --épaisseur_périodeL: 5px;
        display: grid;
        max-width: 100%;
        box-sizing: border-box;
        grid-template-columns: 1.7em 1fr;
        font-family: 'arial';
        font-size: var(--taille_jour);
        gap: var(--espace_entre_ligne);
        border-left: gainsboro solid 1px;
        border-right: gainsboro solid 1px;
        border-bottom: gainsboro solid 1px;
        ;
    }

    .jour_legende {
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: solid red 1px; */
    }

    #periodeContainer {
        font-family: 'arial';
        font-size: var(--taille_jour);
        display: grid;
        grid-template-columns: 1.7em 1fr;

        /* border:solid blue 1px; */
    }


    .jourPLegend {
        border: solid red 1px;

    }

    .text_legende {
        word-break: break-word;
        box-sizing: border-box;
        padding-left: 2px;


    }

    .textPerlegende {
        word-break: break-word;
        box-sizing: border-box;
        padding-left: 2px;
        border-left: gainsboro solid 1px;
        border-right: gainsboro solid 1px;
        border-bottom: gainsboro solid 1px;

    }

    .myPer1 {
        border-top: solid 5px var(--couleur_période1);
        border-left: gainsboro solid 1px;
        border-bottom: gainsboro solid 1px;


    }

    .myPer2 {
        border-top: solid 5px var(--couleur_période2);
        border-left: gainsboro solid 1px;
        border-bottom: gainsboro solid 1px;
    }

    /* .per1Legende {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 10;
}

.per2Legende {
  position: absolute;
  top: var(--épaisseur_périodeL);
  left: 0px;
  width: 100%;
  z-index: 10;
} */

    .per2LegendeActivate {
        border-bottom: solid var(--épaisseur_périodeL) var(--couleur_période2);
    }

    .per1LegendeActivate {
        border-bottom: solid var(--épaisseur_périodeL) var(--couleur_période1);
    }



    /* ------------------------------------- */
    .JF {
        background-color: rgba(228, 15, 58, 0.507);
        color: black;
    }

    /* .férie{
                        background-color: rgba(228, 15, 58, 0.507);
                        color:black;
                        } */
    /* .vacances{
                        background-color: rgba(195, 174, 219, 0.507);
                        color:black;
                        } */
    .JV {
        background-color: rgba(195, 174, 219, 0.507);
        color: black;
    }

    .JS {
        background-color: rgba(247, 210, 6, 0.507);
        color: black;
    }

    /* -------------------------------------- */
    .today {
        box-shadow: 0 0 7px 5px #0011ff83;
    }

    .Av {
        box-shadow: 0 0 7px 5px #0011ff83;
        background-color: rgba(204, 192, 218, 0.507);
        color: black;
    }

    .Af {
        box-shadow: 0 0 7px 5px #0011ff83;
        background-color: rgba(228, 15, 58, 0.507);
        color: black;
    }

    .As {
        box-shadow: 0 0 7px 5px #0011ff83;
        background-color: rgba(247, 210, 6, 0.507);
        color: black;
    }

    .Ap {
        box-shadow: 0 0 7px 5px #0011ff83;
        background-color: #00B050;
        color: white;
    }

    .An {
        position: relative;
        box-shadow: 0 0 7px 5px #0011ff83;
        z-index: -1;
    }

    .maj {
        font-size: .8em;
    }

    @media screen and (max-width:243px) {

        .mois,
        .jour,
        .jour-lettre {
            font-size: x-small;
        }

        .jour-lettre {
            max-width: 20px;
        }
    }