.bloc-agenda 
{
    display: flex; /* Déclare que c'est une flexbox */
    /* flex-direction = row par défaut => alignement horizontale donc */
    align-items: flex-start; /* Aligement au début de la box donc à gauche dans notre cas */
    justify-content: space-around; /* On veut de l'espace entre chaque éléments de la box */
    flex-wrap: wrap; /* Si il y a pas assez de place à l'écran ça va renvoyer les éléments en dessous */
}

.bloc-jour
{
    display: flex; 
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top:5px;
}

/* Au survole de bloc-jour */
/* .bloc-jour:hover 
{
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
} */

.jour
{
    color: #e6dee300;
}

.apadelili-logo  {
    width : 550px;
}

.bg-lili {
    background-color: #7f201f !important;
}

#user-login-conteneur  {
    display : flex;
    justify-content: center;
    border: 2px solid rgba(255, 0, 21, 0.76);
    border-radius: 25px;
    background-color:white;
    max-width : 400px;
}

#user-login  {
    width : 350px;
    /* height: 350px; */
    /* border: 2px solid rgba(255, 0, 21, 0.76); */
    /* border-radius: 25px; */
    align-content: center;
    /* margin-top: 5px; */
}

.flex-center {
    display : flex;
    justify-content: center;

}

/* style="width:50%;margin:auto;" */

.margin5 {
    margin-left: 5px;
    margin-right: 5px;
}

#runner {
    /* width: 100px;
    height: 100px; */
    max-width: 300px;
    width: max-content;
    position: relative;
    animation: mymove 25s infinite;
}

@keyframes mymove {
    from {left: 80%;}
    to {left: 0%;}
}

#active-hha {
    color : black;
}

#homebackground {
    background-image:url('http://localhost/bienvenue.png');
    /* margin-left: 200px; */
    /* margin-right: 200px; */
    margin-left: 0px;
    margin-right: 0px;
    background-position: 200px 0px;
    background-size: cover;
    background-repeat: no-repeat;
}

#defautfooter {
    /* background-image:url('http://localhost/bienvenue.png'); */
    background-color: #dda3a3;
    position: relative;
    bottom: 0;
    width:100%;
    line-height: 2;
    margin-bottom: 0px;
}

.footer-block {
    display:flex;
    /* background-color: #6d65655b; */
    align-content: space-around;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    margin: 0px;
    padding-left: 150px;
    padding-right: 150px;
}

.footer-block-element {
    display:flex;
    background-color: #f1f1f15b;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: left;
    font-size: 14px;
    width: 200px;
    height: 80px;
    border-radius: 25px;
    align-items: center;
}

@media (max-width: 991.98px) {
    #homebackground {
        margin-left: 0px;
        margin-right: 0px;
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }
    .apadelili-logo  {
        width : 200px;
    }
    #user-login  {
        width : 250px;
    }
    #user-edit {
        width:100%;
        margin:auto;
    }
    #user-add {
        width:100%;
        margin:auto;
    }
    .footer-block {
        flex-direction: column;
        padding: 0px;
    }
}
  
@media (min-width: 992px) {
    #homebackground {
        margin-left: 200px;
        margin-right: 200px;
    }

    #user-edit {
        width:50%;
        margin:auto;
    }

    #user-add {
        width:50%;
        margin:auto;
    }
}

/* inutile si j'arrive pas à régler la position sur un écran d'ordi */
/* @media (max-width: 991.98px) {

    #defautfooter {
        background-image:url('http://localhost/bienvenue.png');
        background-size:cover;
        background-repeat: no-repeat;
        max-height: 700px;
        min-height: 180px;
        position:relative;
        bottom:0;
        width:100%;
    }
}

@media (max-height: 620px) {

    #defautfooter {
        background-image:url('http://localhost/bienvenue.png');
        background-size:cover;
        background-repeat: no-repeat;
        max-height: 700px;
        min-height: 180px;
        position:relative;
        bottom:0;
        width:100%;
    }
} */

#newbackground {
    background-color:white;
    padding:0px; /* Obligatoire pour supprimer le padding hérité de body */
}

#newdiv {
    background-color:white;
}

#bloc_principal
{
    /* max-width:1200px; */
    /* width: 90%; */
    margin:auto;
}

#top-bar
{ 
    display:flex; 
    justify-content:center;
    background-color:white;
    color:#f7f2f2;
    max-width:1200px;
    margin:auto;
    margin-top:0px;
}

.pasapas-logo
{
    width:300px;
    margin:auto;
    margin-left:0px;
    margin-top:5px;
}

#test1 
{
    display:flex; 
    justify-content:end;
    align-items: center;
    flex-basis: auto;
    background-color:white;
}

.lieux_descr
{
    width:50%;
}

.buttonplus
{
    /* display:flex; */
    /* justify-content:center; */
    /* align-items: center; */
    background-color:white;
    border: 1px solid black;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    white-space: nowrap; /* pas de retour à la ligne si il y a un espace dans le contenu */
    border-radius: 25px;
    margin-left:26px;
    padding:10px;
    color:black;
    font-family: fantasy; 
    font-size: 15px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 700; 
}

.buttonplus:hover
{
    display:flex;
    justify-content:center;
    align-items: center;
    background-color:black;
    border: 1px solid black; 
    border-radius: 25px;
    margin-left:26px;
    padding:20px;
    color:white;
    font-family: fantasy; 
    font-size: 15px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 700; 
}

.home_title
{
    scroll-margin-top: 50px; /* on scroll vers le haut de 50px lorsqu'on href dessus */
}

.home_title::-webkit-full-page-media, .home_title:future, .home_title:root .safari_only 
{
    padding-top : 50px;
    /*scroll-margin-top: 50px; *//* on scroll vers le haut de 50px lorsqu'on href dessus */
    /* scroll-snap-margin-top : 50px; */
    background-color: blue;
}

.lieu_btn
{
    display:flex; 
    justify-content:center;
    align-items: center;
    /* background-color:white; */
    background-color: #f8e4e6;
    /* border: 2px solid #ec93a2; */
    cursor:pointer;
    border-radius: 25px;
    padding:5px;
    margin:10px;
    /* color : #ec93a2; */
    color : #7e1f1e;
    font-family: fantasy; 
    font-size: 20px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 700; 
}
.lieu_btn:hover
{
    display:flex;
    justify-content:center;
    align-items: center;
    /* background-color:#ec93a2; */
    background-color : #7e1f1e;
    /* border: 2px solid #ec93a2;  */
    border-radius: 25px;
    padding:5px;
    margin:10px;
    color:white;
    font-family: fantasy; 
    font-size: 20px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 700;
}
.lieu_btn_actif
{
    display:flex;
    justify-content:center;
    align-items: center;
    background-color:grey;
    border: 1px solid grey; 
    border-radius: 25px;
    padding:5px;
    margin:10px;
    color:white;
    font-family: fantasy; 
    font-size: 30px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 700;
    height : 50px;
}

#lilinav
{
    background-color:white;
    /* max-width:1200px; */
    margin:auto;
    display:flex;
    justify-content: center;
    position: -webkit-sticky; /* Pour que l'élément reste toujours dans l'image */
    position: sticky;
    top: 0;
    z-index: 10;
}

.lilinavelm
{
    color:black;
    margin:10px;
    margin-left:20px;
    margin-left:20px;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    font-family: fantasy; 
    font-size: 15px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 100; 
}

.lilinavelm:hover
{
    color:black;
    margin:10px;
    margin-left:20px;
    margin-left:20px;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    font-family: fantasy; 
    font-size: 15px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 700; 
}

.lilinavelm_selected
{
    color:#dda3a3;;
    margin:10px;
    margin-left:20px;
    margin-left:20px;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    font-family: fantasy; 
    font-size: 15px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 900; 
}

.lilinavelm_selected:hover
{
    color:#dda3a3;;
    margin:10px;
    margin-left:20px;
    margin-left:20px;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    font-family: fantasy; 
    font-size: 15px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 900; 
}

#mini-menu {
    display:none;
    flex-direction:column;
    position: -webkit-sticky; 
    position: sticky;
    top: 0;
    z-index:1000;
    margin-top:5px;
}

#bottom_bar {
    display: flex;
    justify-content:center;
    align-items: center;
    position:fixed;
    background-color: #f8e4e6;
    bottom:0;
    width: 100%;
    height : 8%;
    z-index:1000;
}

/* .red_1 {
    color:#7e1f1e;
}

.red_2 {
    color:#c5332d;
}

.red_3 {
    color:#e53d36;
} */

.bottom_button
{
    display:flex;
    justify-content:center;
    align-items: center;
    /* background-color:#f8e4e6; */
    background-color:#7e1f1e;
    /* border: 1px solid black; */
    color:white;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    white-space: nowrap; /* pas de retour à la ligne si il y a un espace dans le contenu */
    border-radius: 25px;
    margin-left:26px;
    padding:10px;
    /* height : 90%; */
    height : 90%;
    font-family: Copperplate; 
    /* font-size: 10px;  */
    /* font-size: 1.3em;  */
    font-size: 1.3em; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 600; 
}

.bottom_button:hover
{
    display:flex;
    justify-content:center;
    align-items: center;
    /* background-color:#f8e4e6; */
    background-color:white;
    /* border: 1px solid black; */
    color:#7e1f1e;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    white-space: nowrap; /* pas de retour à la ligne si il y a un espace dans le contenu */
    border-radius: 25px;
    margin-left:26px;
    padding:10px;
    /* height : 90%; */
    height : 90%;
    font-family: Copperplate; 
    /* font-size: 10px;  */
    /* font-size: 1.3em;  */
    font-size: 1.3em; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 600; 
}

.feet {
    margin:auto;
    width:50px;
    display:none;
    transform: rotate(180deg);
    position:fixed;
}

#mes-rdv {
    display:flex;
    background-color:white;
}

.popover_elt {
    margin-left: 5px;
}

.perso_title {
    scroll-margin-top: 50px; /* on scroll vers le haut de 50px lorsqu'on href dessus */
}

.lieu_txt
{
    background-color:white;
    /* color : #d6cfcff1; */
    /* border-radius:25%; */
    margin:auto;
    color:black;
    text-align: justify;
    /* font-family: fantasy; 
    font-size: 15px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 200;  */
}

.bons-plans {
    border: 3px solid red; 
    border-radius:25px; 
    margin:auto;
    margin-top:20px;
    padding:2%;
    width:70%;
}

#lieux_global {
    display:flex;
    justify-content: center;
    align-items: center;
}

.lieux_descr_element {
    background-color:white;
    text-align:left;
    align-items:center;
    margin:auto;
    margin-left:5px; 
}

.colonne_agenda {
    display:flex;
    justify-content:flex-start;
    flex-direction:column;
    background-color:white;
    width:13%;
}

.agenda_button_valid {
    width:100%;
    height:100%;
    padding:5%;
    border-radius : 10px;
    border : 1px solid #7e1f1e;
    background-color : white;
    color : #7e1f1e;
    cursor : pointer;
    text-align: center;
    margin-bottom:5%;
}

.agenda_button_valid:hover, .agenda_button_valid.active {
    border-color : #7e1f1e;
    background-color : #7e1f1e;
    color : white;
}

.agenda_button_none {
    width:100%;
    height:100%;
    padding:5%;
    border-radius : 10px;
    border : 1px solid white;
    background-color : white;
    color : grey;
    text-align: center;
    margin-bottom:5%;
}

.agenda_button_invalid {
    width:100%;
    height:100%;
    padding:5%;
    border-radius : 10px;
    border : 1px solid white;
    background-color : white;
    color : white;
    text-align: center;
    margin-bottom:5%;
}

.agenda_button_dispo {
    width:100%;
    padding:5%;
    border-radius : 5px;
    /* border : 1px solid #347e1e; */
    background-color : rosybrown;
    color : white;
    text-align: center;
}

#new_agenda {
    display:flex;
    flex-direction: row;
    justify-content:stretch;
    background-color:white;
}

#new_agenda_h1 {
    display:flex;
    justify-content:space-around;
    max-width:700px;
    /* width:100%; */
    background-color:#7e1f1e;
    color:white;
    padding:2%;
    /* margin:auto; */
    border-radius: 15px 15px 0px 0px;
}

#new_agenda_h1_date {
    max-width:700px;
    background-color:#7e1f1e;
    color:white;
    font-size:2rem;
}

#new_agenda_h2 {
    display:flex;
    justify-content:space-around;
    max-width:700px;
    background-color:#7e1f1e
}

.new_agenda_h2_date {
    margin-bottom:8px;
    text-align:center;
    color:white;
    background-color:#7e1f1e
}

#new_agenda_content {
    display:flex;
    justify-content:space-around;
    width:100%;
    max-width:700px;
    padding:5px;
    background-color:white;
    border-radius: 0px 0px 15px 15px;
    border-style: dotted;
    border-top-style: none;
    border-color:#7e1f1e;
}

#new_agenda_jour_h1 {
    display:flex;
    justify-content:center;
    max-width:700px;
    margin:auto;
    background-color:#7e1f1e;
    padding:2%;
    border-radius: 15px 15px 0px 0px;
    color:white;
    font-size:1.3rem;
}

#new_agenda_jour_content {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items: center;
    max-width:700px;
    margin:auto;
    background-color:white;
    border-radius: 0px 0px 15px 15px;
    padding:5px;
    border-style: dotted;
    border-top-style: none;
    border-color:grey
}

.new_agenda_jour_content_elt {
    /* width:50%; */
    margin:5px;
}

.hha_btn {
    width:50%;
    height:100%;
    line-height:2; /* Permet d'aligner le texte au milieu du coup */
    font-size: 1.1em;
    vertical-align:middle;
    /* padding:5%; */
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    border-radius : 5px;
    border : 1px solid black;
    cursor : pointer;
    text-align: center;
    margin-bottom:5%;
    margin-right:2%;
}

.hha_btn_red {
    border : 1px solid #7e1f1e;
    background-color : white;
    color : #7e1f1e;
}

.hha_btn_red:hover {
    background-color : #7e1f1e;
    color : white;
}

.hha_btn_grey {
    border : 1px solid grey;
    background-color : grey;
    color : white;
}

.hha_btn_grey:hover {
    background-color : grey;
    color : white;
}

#agenda_mois {
    width:70%;
    max-width: 700px;
    margin-right:1%;
}

#agenda_jour {
    width:30%;
    max-width: 300px;
}

@media (min-width: 1200px) {
    #bloc_principal {
        /* max-width:1000px; */
    }
    .table_big_screen {
        /* display:contents; */
    }
    .table_small_screen {
        display:none;
    }
}

@media (max-width: 1200px) {
    #bloc_principal {
        /* max-width:800px; */
    }
    .table_big_screen {
        display:contents;
    }
    .table_small_screen {
        display:none;
    }
}
@media (max-width: 1000px) {
    #bloc_principal {
        /* max-width:600px; */
    }
    #lieux_global {
        flex-direction: column;
    }
    .lieux_descr
    {
        width:100%;
    }
    .bons-plans {
        margin-top:20px;
        padding:2%;
        width:100%;
    }
    #new_agenda {
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    #new_agenda_jour_content {
        flex-direction:row;
        flex-wrap: wrap;
        justify-content:start;
    }
    .agenda_button_valid {
        line-height: 2em;
    }
    .agenda_button_none{
        line-height: 2em;
    }
    .agenda_button_invalid {
        line-height: 2em;
    }
    .agenda_button_dispo {
        display:none;
    }
    .hha_btn {
        width:15%;
    }
    #agenda_mois {
        width:100%;
        max-width: none;
        margin-right:none;
        margin-bottom:20px;
    }
    
    #agenda_jour {
        width:100%;
        max-width: none;
        margin-right:none;
    }
}
@media (max-width: 800px) {
    #bloc_principal {
        /* max-width:400px; */
        width: 100%;
    }
    #lilinav {
        display:none;
    }

    #top-bar {
        display:none;
    }

    #mini-menu {
        display: flex;
    }
    .lieu_txt
    {
        background-color:white;
        margin-left : 10px;
        margin-right: 10px;
    }
    .bons-plans {
        margin-top:20px;
        padding:2px;
        width:100%;
    }
}

@media (max-width: 600px) {
    .table_big_screen {
        display:none;
    }
    .table_small_screen {
        display:contents;
    }
    h1,h2,h3,h4,h5 {
        text-align: center;
    }
    #mes-rdv {
        flex-direction:column;
        justify-content:center;
        align-items: center;
    }
    .popover_elt {
        margin-top: 5px;
        margin-left: 0px;
    }
    #runner {
        animation: none;
        margin:auto;
        text-align:center
    }
    #bloc_principal {
        /* max-width:auto; */
    }
    #top-bar {
        flex-direction: column;
    }
    #test1 {
        justify-content:center;
    }
    .pasapas-logo {
        width: 200px;
        margin-left:auto;
        margin-top:auto;
    }
    .buttonplus {
        font-size: 10px; 
        margin-left:5px;
        margin-top:5px;
        padding:5px;
    }
    .buttonplus:hover {
        font-size: 10px; 
        margin-left:5px;
        margin-top:5px;
        padding:5px;
    }
    .home_title {
        font-size: 15px; 
    }
    .lieu_btn
    {
        font-size: 15px;
        margin:1px;
    }
    .lieu_btn:hover
    {
        font-size: 15px; 
        margin:1px;
    }
    .lieu_btn_actif
    {
        font-size: 20px; 
        margin:1px;
    }
    .bons-plans {
        margin-top:20px;
        margin-bottom:20px;
        padding:2px;
        padding-bottom:20px;
    }

    #user-login-conteneur  {
        width:96%;
        margin:auto;
    }
}
@media (max-width: 250px) {
    #test1 {
        flex-direction: column;
        justify-content:center;
    }
    .pasapas-logo {
        width: 200px;
        margin-left:auto;
        margin-top:auto;
    }
}

.lieu_description
{
    display:flex;
    /* max-width: 1000px; */
    /* margin : auto; */
    background-color:white;
    justify-content:space-around;
    /* align-items: center; */
}

#mini_menu_titre
{
    justify-content:space-between;
    align-items:center;
    text-align:left;
    color:white;
    /* border: 2px solid white; */
    background-color:white;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    cursor:pointer;
    font-family: fantasy; 
    font-size: 10px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 900; 
}

#mini_menu_titre:hover
{
    justify-content:space-between;
    align-items:center;
    text-align:center;
    color:white;
    /* border: 2px solid white; */
    background-color:white;
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    cursor:pointer;
    font-family: fantasy; 
    font-size: 10px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 900; 
}

.mm_elt
{
    justify-content:space-around;
    align-items: center;
    text-align:center;
    color:rgb(65, 63, 63);
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    font-family: Copperplate; 
    /* font-size: 10px;  */
    font-size: 1.4em; 
    line-height: 30px;
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 500; 
}

.mm_elt:hover
{
    justify-content:space-around;
    align-items: center;
    text-align:center;
    color:rgb(78, 41, 41);
    text-decoration: none; /* pour supprimer le souslignement des liens hypertext */
    font-family: Copperplate; 
    /* font-size: 10px;  */
    font-size: 1.5em; 
    line-height: 30px;
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 600; 
}

#mini_menu_liste {
    display:none;
    flex-direction:column;
    position:absolute;
    background-color:white;
    width:100%;
    top:0px;
}

/* ************************************ */
/* Pour un effet speciale avec anime.js */
.stagger-visualizer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 17rem;
  height: 17rem;
}

.stagger-visualizer div {
  /*position: absolute;*/
  width: 1rem;
  height: 1rem;
  border: 1px solid #FFF;
  background-color: red;
}

#demo-svg path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

body
{
    background: #cfd8dc;
}

/* *************************************************** */
/* Pour un effet speciale flip card-flip avec anime.js */

/* .card-flip-container {
    max-height: 1000px;
    background-color:black;
} */

.card-flip
{
    /* position: relative; */

    /* height: 100%; */
    /* width: 100%; */
    
    /* margin : margin-top, margin-right, margin-bottom, margin-left */
    margin : 40px auto 40px auto;
    /* margin:auto; */
    border-radius: 10px;
    /* max-width: 150px; */
    max-height: 600px;
    /* perspective: 1400px; */
    transform-style: preserve-3d;
    /* background-color:yellow; */
}

.card-hha {
    height:100%;
    background-color:white;
    border-radius: 10px;
}

.card-hha-body
{
    border-radius: 10px;
    /* background-color:#e93b3b; */
    background-color:white;
    /* min-height:60%; */
}

.card-hha-img {
    max-height:40%;
    /* background-color:blue; */
    object-fit: contain;
    border-radius: 10px;
    margin-top: 10px;
    max-height: 200px;
}

.front,
.back
{
    /* display: flex; */

    width: 100%;
    height: 100%;

    border-radius: 10px;
    cursor:pointer;
    
    /* justify-content:space-between; */
    align-items:center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

.front
{
    /* position: absolute;
    top: 0;
    left: 0; */
    /* color: #fff; */
    color: #e93b3b;
    /* background: #2196f3; */
    background: #fff;
}

.back
{
    position: absolute;
    top: 0;
    left: 0;

    transform: rotateY(180deg);

    /* color: #2196f3;
    background: #fff; */

    color: #fff;
    /* background: #e93b3b; */
}

.card-hha-title {
    color : #e53d36;
}

/****************/
/* TEST ELISA CARD */

.card-test-left
{
    width:100px;
    opacity:0.5;
}

.card-test
{
    width:200px;
}

.card-test-right
{
    width:100px;
    opacity:0.5;
}

/*
Optional styles
*/

  /* img {
    max-width: 100%;
  } */
  
  .splide__optional-button-container {
    margin-bottom: 1rem;
    margin-top: 1rem;
    text-align: center;
  }
  
  .splide__slide {
    min-height: 200px;
    text-align: center;
  }
  



/*************************/
/* Slidin' Slidey Things */
/*************************/
/* @import "bourbon"; */
/* @import url(https://fonts.googleapis.com/css?family=Lato:300|Oswald); */
.slides {
    position: relative;
}
.slides .slide {
    position: absolute;
    top: 0;
    width: calc(20% - 1em);
    max-height: 3.5em;
    margin: 0.5em;
    padding: 1em;
    /* background: #ad1f36; */
    background : #f8e4e6;
    text-align: justify;
    color: black;
    float: left;
    overflow: hidden;
    transition: max-height 0.25s ease-in-out, width 0.25s 0.25s ease-in-out, left 0.25s 0.5s ease-in-out, top 0.25s 0.75s ease-in-out;
}
.slides .slide:nth-child(1) {
    left: 0%;
}
.slides .slide:nth-child(2) {
    left: 20%;
}
.slides .slide:nth-child(3) {
    left: 40%;
}
.slides .slide:nth-child(4) {
    left: 60%;
}
.slides .slide:nth-child(5) {
    left: 80%;
}
.slides .slide > a {
    display: block;
    padding-bottom: 1em;
    /* font-family: 'Oswald'; */
    /* text-transform: uppercase; */
    text-decoration: none;
    color: #7e1f1e;
    transition: color 2s;
    font-family: fantasy; 
    font-size: 20px; 
    font-style: normal; 
    font-variant: small-caps; 
    font-weight: 700; 
    -webkit-font-smoothing: subpixel-antialiased;
}
.slides .slide.active {
    position: absolute;
    top: 4.5em;
    left: 0;
    width: 100%;
    max-height: 40em;
    float: none;
    transition: top 0.25s 1s ease-in-out, left 0.25s 1.25s ease-in-out, width 0.25s 1.5s ease-in-out, max-height 0.25s 1.75s ease-in-out;
}
.slides .slide.active a {
    /* color: white; */
    color : #7e1f1e;
    font-weight: 800;
}
/** PAGE STYLES **/
*, *:before, *:after {
    box-sizing: border-box;
}

.container-slider {
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    background-color: #fff;
    /* color: #e0dcdc; */
    /* height: max-content; */
    /* overflow:auto;  */
    /* overflow: overlay; */
    min-height: 400px;
}

/** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */
.cf:before, .slides:before, .cf:after, .slides:after {
    content: " ";
/* 1 */
    display: table;
/* 2 */
}
.cf:after, .slides:after {
    clear: both;
}
/** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.cf, .slides {
    *zoom: 1;
}

/* padding : padding-top, padding-right, padding-bottom, padding-left */
.grey-bloc
{
    /* background-color: #e0dcdc; */
    background-color: #f8e4e6;
    padding: 10px 10% 10px 10%;
}

.white-bloc
{
    background-color: #ffffff;
    padding: 10px 10% 10px 10%;
}

.white-bloc > h1, .grey-bloc > h1 {
    font-style: normal;
}

.white-bloc > h3, .grey-bloc > h3 {
    font-style: italic;
}

@media (max-width: 1600px) {
    .container-slider {
        min-height: 500px;
    }
}

@media (max-width: 1400px) {
    .container-slider {
        min-height: 600px;
    }
}

@media (max-width: 1200px) {
    .container-slider {
        min-height: 600px;
    }
}

@media (max-width: 800px) {
    .container-slider {
        min-height: 700px;
    }
}

@media (max-width: 600px) {
    .container-slider {
        min-height: 800px;
    }

    .slides .slide  {
        font-size:small;
        /* width: fit-content; */
        width: calc(20% - 1px);
        padding : 1px;
        /* padding: 1em; */
        /* transform: rotate(-90deg); */
        /* margin: 0.5em; */
        margin: 1px;
        /* margin-left:2px; */
        /* border-radius: 10%; */
        height:20px;
        max-height: 20px;
    }

    .slide.active  {
        font-size:small;
        /* width: fit-content; */
        width: calc(20% - 1px);
        padding : 1px;
        /* padding: 1em; */
        /* background-color:yellow; */
        /* transform: rotate(0deg); */
        /* margin: 0.5em; */
        margin: 1px;
        /* border-radius: 10%; */
        height:auto;
    }

    .slide > .content {
        font-size:medium;
        /* width: fit-content; */
        /* padding : 1px; */
        padding: 2px;
        /* background-color: rosybrown; */
        /* transform: rotate(0deg); */
        /* margin: 0.5em; */
        margin: 1px;
    }

    /* padding : padding-top, padding-right, padding-bottom, padding-left */
    .white-bloc 
    {
        padding: 10px 0 10px 0;
    }
    .grey-bloc
    {
        padding: 10px 0 10px 0;
    }

    .white-bloc > h1, .grey-bloc > h1 {
        font-size :xx-large;
    }
    
    .white-bloc > h3, .grey-bloc > h3 {
        font-size :large;
    }

    #view_global_container
    {
        margin-left: 5px;
        margin-right: 5px; 
    }
}

.red_1 {
    color:#7e1f1e;
}

.red_2 {
    color:#c5332d;
}

.red_3 {
    color:#e53d36;
}

/*****************/
/* Accordion hha */
/*****************/
.accordion-hha {
    /* margin : margin-top, margin-right, margin-bottom, margin-left */
    margin : 20px 5px 20px 5px;
}

.accordion-hha-button{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
    padding:1rem 1.25rem;
    font-size:1rem;
    color:#212529;
    background-color:transparent;
    border:1px solid rgba(0,0,0,.125);
    border-radius:0;
    overflow-anchor:none;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease
}
@media (prefers-reduced-motion:reduce){
    .accordion-hha-button{
        transition:none
    }
}
.accordion-hha-button.collapsed{
    border-bottom-width:0
}
.accordion-hha-button:not(.collapsed){
    /* color:#0c63e4; */
    color : #7e1f1e;
    /* background-color:#e7f1ff; */
    background-color: #f8e4e6;
    font-weight: bold;
}
.accordion-hha-button:not(.collapsed)::after{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    /* background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); */
    transform:rotate(180deg);
}
.accordion-hha-button::after{
    flex-shrink:0;
    width:1.25rem;
    height:1.25rem;
    margin-left:auto;
    content:"";
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-size:1.25rem;
    transition:transform .2s ease-in-out
}
@media (prefers-reduced-motion:reduce){
    .accordion-hha-button::after{
        transition:none
    }
}
.accordion-hha-button:hover{
    z-index:2
}
.accordion-hha-button:focus{
    z-index:3;
    /* border-color:#86b7fe; */
    border-color : #f7c6ca;
    outline:0;
    /* box-shadow:0 0 0 .25rem rgba(13,110,253,.25); */
    box-shadow:0 0 0 .25rem #f7c6ca;
}
.accordion-hha-header{
    margin-bottom:0
}
.accordion-hha-item:first-of-type .accordion-hha-button{
    border-top-left-radius:.25rem;
    border-top-right-radius:.25rem
}
.accordion-hha-item:last-of-type .accordion-hha-button.collapsed{
    border-bottom-width:1px;
    border-bottom-right-radius:.25rem;
    border-bottom-left-radius:.25rem
}
.accordion-hha-item:last-of-type .accordion-hha-collapse{
    border-bottom-width:1px;
    border-bottom-right-radius:.25rem;
    border-bottom-left-radius:.25rem
}
.accordion-hha-collapse{
    border:solid rgba(0,0,0,.125);
    border-width:0 1px
}
.accordion-hha-body{
    padding:1rem 1.25rem;
    text-align: justify;
}
.accordion-hha-flush .accordion-hha-button{
    border-right:0;
    border-left:0;
    border-radius:0
}
.accordion-hha-flush .accordion-hha-collapse{
    border-width:0
}
.accordion-hha-flush .accordion-hha-item:first-of-type .accordion-hha-button{
    border-top-width:0;
    border-top-left-radius:0;
    border-top-right-radius:0
}
.accordion-hha-flush .accordion-hha-item:last-of-type .accordion-hha-button.collapsed{
    border-bottom-width:0;
    border-bottom-right-radius:0;
    border-bottom-left-radius:0
}

/* IFRAME GOOGLE MAP */
.map-responsive {
    overflow:hidden;
    /* padding-bottom:56.25%; */
    padding-bottom:30%;
    position:relative;
    /* height:0; */
    max-width: 600px;
    margin:auto;
    margin-top:20px;
    margin-left:0px;
    background-color: #f7c6ca;
}
    
.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media (max-width: 600px) {
    .map-responsive {
        padding-bottom:100%;
    }
}