/* On supprime le décalage sur les bords */

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #fffff9;
}

/* On fait en sorte que l'image prenne toute la largeur de la page */

header img {
    width: 100%;
    display: flex;
}

/* On défini le style pour la barre de navigation */

.topnav {
    overflow: hidden;
    background-color: #424242;
    display: flex;
    justify-content: center;
}

/* On défini le style pour chaque liens de la barre de navigation */

.topnav a {
    float: left;
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 18px 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 300;
}

/* On empêche l'apparation du symbole permettant la barre de navigation en format mobile */

.topnav .icon {
    display: none;
}

/* On défini le style pour les boutons de la barre de navigation */

.dropdown .dropbtn {
    border: none;
    outline: none;
    color: #FFFFFF;
    padding: 18px 20px;
    background-color: inherit;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
}

/* On défini le style pour les onglets de la barre de navigation */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #F3EDB2;
    min-width: 160px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* On défini le style pour chaque liens des onglets de la barre de navigation */

.dropdown-content a {
    float: none;
    color: #525252;
    padding: 6px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-weight: 400;
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #525252;
    color: #F3EDB2;
}

.dropdown-content a:hover {
    background-color: #525252;
    color: #F3EDB2;
}

.dropdown:hover .dropdown-content {
    display: block;
}

a.accueil {
    background-color: #525252;
    color: #F3EDB2;
    justify-content: left;
}

.topnav input {
    height: 25px;
    width: 15%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 3.33%;
}

a img.menuIcon {
    width: 30px;
}

@media screen and (max-width: 1024px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
        text-align: left;
    }
    a.accueil {
        font-size: 0;
        margin-top: 2px;
        background-color: #424242;
        color: #FFFFFF;
    }
    a.accueil::after {
        content: "Menu";
        font-size: 20px;
    }
    .topnav.responsive a.accueil::after {
        content: "Accueil";
    }
    .topnav.responsive a.accueil {
        margin-top: 0;
    }
    .topnav.responsive {
        position: relative;
        padding-left: 0;
        display: block;
        padding-top: 18%;
    }
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .topnav.responsive .dropdown {
        float: none;
    }
    .topnav.responsive .dropdown-content {
        position: relative;
    }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
    .disabled {
        pointer-events: none;
        cursor: default;
    }
    .dropdown-content a {
        padding: 16px 20px;
    }
    /* On défini un style différent quand on est sur l'onglet de la page active */
    .topnav.responsive #accueil2 {
        background-color: #525252;
        color: #F3EDB2;
        justify-content: left;
    }
}

.intro-site {
    position: relative;
    text-align: center;
    width: auto;
    height: auto;
    max-width: 60%;
    margin: 50px auto 100px auto;
}

.intro-site p {
    font-size: 25px;
}

.intro-site p span {
    font-size: 20px;
}

.maps-n-chiffres {
    position: relative;
    margin: auto;
    width: 67em;
    height: 450px;
    opacity: 0;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.maps {
    float: left;
    border-radius: 10px;
}

.chiffres {
    float: left;
    margin-left: 30px;
}

.nom {
    font-weight: 500;
    font-size: 40px;
    margin-top: 0;
}

.subnom {
    font-weight: normal;
}

.actitre {
    font-size: 20px !important;
    max-width: 320px;
    min-height: 48px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
}

.actu:hover .actitre {
    color: #424242;
    font-weight: 500;
}

.num {
    margin-top: 0;
    font-size: 65px;
    font-weight: 500;
    display: inline-block;
}

.subnum {
    font-size: 30px;
    font-weight: normal;
    color: #525252;
    margin-left: 10px
}

/* FOOTER */

.bas {
    background-color: #424242;
    margin-top: 100px;
    width: 100%;
    display: flex;
    height: 138px;
    justify-content: space-around;
}

.bas h1 {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 25px;
    color: #F3EDB2;
}

.coord p {
    margin: 0;
    margin-bottom: 5px;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 13px;
}

.hora p {
    margin: 0;
    margin-top: 5px;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 13px;
}

/* ML */

.bas2 {
    background-color: #303030;
    display: flex;
    justify-content: center;
    font-weight: 300;
    font-size: 14px;
}

.bas2 p {
    color: #707070;
}

.bas2 a {
    text-decoration: none;
    color: #8A8A8A;
}

.bas2 a:hover {
    color: #AAAAAA;
}

@media screen and (max-width: 800px) {
    .bas {
        position: relative;
        padding-left: 0;
        display: flex;
    }
    .bas p {
        float: none;
        display: block;
        margin-left: 5px;
    }
    .coord {
        margin-left: 0;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 650px) {
    .bas {
        flex-direction: column;
        height: 100%;
    }
    .coord h1 {
        margin: 10px 0 10px 5px;
    }
    .hora {
        margin-bottom: 10px;
        padding-left: 0;
    }
    .hora h1 {
        margin: 30px 0 10px 5px;
    }
}

/* FIN FOOTER */

/* FAST ACC MOBILE*/

.fastAcc-Mobile {
    display: none;
    margin-top: 1.5em;
}

#acces {
    outline: none;
    background-color: #F3EDB2;
    color: #424242;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 1em;
    font-size: 1em;
    margin-left: 20px;
}

.accMobile {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 1500;
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.mobile {
    display: flex;
    flex-direction: column;
    background-color: #F3EDB2;
    border-radius: 10px;
    height: 190px;
    text-align: center;
    padding: 10px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.mobile .close {
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    width: 48px;
    border: none;
}

.mobile h1 {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 28px;
    color: #303030;
    margin: 10px;
}

.mobile a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
    font-size: 17px;
    color: #424242;
    line-height: 2em;
    width: 100%;
}

.mobile a:hover {
    background-color: #525252;
    color: #F3EDB2;
}

/* FIN FAST ACC MOBILE*/

.fastAcc {
    background-color: #F3EDB2;
    border-radius: 15px;
    width: 250px;
    height: 250px;
    text-align: center;
    margin-top: 75px;
    margin-left: 50px;
    padding-top: 5px;
    padding-bottom: 1px;
    margin-bottom: 50px;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.fastAcc h1 {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: #303030;
}

.fastAcc a {
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: #424242;
    display: block;
    padding: 6px;
}

.fastAcc a:hover {
    background-color: #525252;
    color: #F3EDB2;
}

.bingus {
    display: none;
}

.actulist {
    padding: 0;
}

.actulist li img {
    border-radius: 7px;
}

.actulist li p {
    margin-bottom: 2em;
}

.tousActu {
    border-radius: 7px;
    font-size: 20px;
    display: none;
}

.carousel-wrapper {
    overflow: hidden;
    margin-left: 2%;
    margin-right: auto;
}

.carousel-wrapper * {
    box-sizing: border-box;
}

.carousel-wrapper h1 {
    text-align: left;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: #303030;
}

@media screen and (max-width: 800px) {
    .carousel-wrapper {
        width: 90%;
    }
}

.all {
    display: flex;
}

.column {
    float: left;
    margin-right: 30px;
    padding: 5px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.carousel {
    transform-style: preserve-3d;
    /*box-shadow: -60px 0px 100px -90px #000000, 60px 0px 100px -90px #000000;*/
    display: inline-block;
    padding-left: 30px;
}

.carousel li p {
    margin-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 15px;
}

.carousel__photo {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    margin: auto;
    /*padding: 1rem 4rem;*/
    z-index: 100;
    transition: transform .5s, opacity .5s, z-index .5s;
    text-align: center;
}

.carousel__photo.initial, .carousel__photo.active {
    opacity: 1;
    position: relative;
    z-index: 900;
}

.carousel__photo.prev, .carousel__photo.next {
    z-index: 800;
}

.carousel__photo.prev {
    transform: translateX(-100%);
    /* déplace l'article précédent vers la gauche */
}

.carousel__photo.next {
    transform: translateX(100%);
    /* déplace l'article précédent vers la droite */
}

.carousel__button--prev, .carousel__button--next {
    position: relative;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0);
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 1001;
    /* les boutons restent toujours au premier plan */
    border: none;
    outline: none;
    margin-top: 10%;
}

.carousel__button--prev {
    float: left;
    left: 10px;
    transition: .3s;
}

.carousel__button--next {
    float: right;
    right: 10px;
    transition: .3s;
}

.carousel__button--next::after {
    left: 47%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.carousel__button--prev:hover {
    left: 0;
}

.carousel__button--next:hover {
    right: 0;
}

.actu img {
    border-radius: 15px;
    object-fit: cover;
}

.actu {
    transition: all .2s ease-in-out;
}

.actu:hover {
    background-color: #F3EDB2;
    cursor: pointer;
    border-radius: 15px;
    transform: scale(1.05);
    box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%);
}

.center {
    text-align: center;
}

@media screen and (max-width: 1594px) {
    .all {
        flex-direction: column;
    }
    .fastAcc-Mobile {
        display: block;
    }
    /* Supprime l'accès rapide sur mobile */
    .fastAcc {
        display: none;
        width: 0;
        height: 0;
    }
    .carousel-wrapper {
        margin-left: auto;
    }
}

@media screen and (max-width: 1311px) {
    .carousel-wrapper {
        min-width: 1262px;
    }
}

/* Fin accès rapide */

/*.carousel-wrapper button {
    padding: 0;
    background-color: #FFFFFF;
    cursor: pointer;
    height: 64px;
    margin-top: 160px;
    border: 0px;
}
.carousel-wrapper button:focus {
    outline: #FFFFFF;
}
.carousel-wrapper button.back {
    margin-left: -868px;
}*/

.carousel-wrapper li {
    display: block;
    list-style: none;
}

.popactu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    z-index: 1500;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease-in-out;
}

.closeBtn {
    width: 35px;
    height: 35px;
    float: right;
    cursor: pointer;
}

.closeBtn:hover {
    filter: brightness(0);
}

.popactu-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 5%;
    background-color: #fff;
    padding: 20px;
    max-width: 65%;
    border-radius: 7px;
    overflow-y: auto;
    box-sizing: border-box;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
}

.popactu-content::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background-color: #707070;
}

.popactu-content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    background-color: #F5F5F5;
    border-radius: 7px;
}

.popactu-content::-webkit-scrollbar {
    height: 14px;
    width: 12px;
}

@media screen and (max-width: 750px) {
    .chungus {
        display: none;
    }
    .bingus {
        display: block;
    }
    .maps-n-chiffres, .maps {
        width: 100%;
    }
    .maps-n-chiffres {
        height: 100%;
    }
    .chiffres {
        margin-top: 10%;
    }
    .nom, .subnom {
        font-size: 30px;
    }
    .num {
        font-size: 55px;
    }
    .subnum {
        font-size: 20px;
    }
    .maps {
        border-radius: 0;
    }
    .popactu-content {
        max-width: none;
        height: 100%;
        margin-top: 250%;
        transition: all .7s ease;
        margin-left: 0;
        margin-right: 0;
        border-radius: 20px;
    }
    .popactu-content::-webkit-scrollbar {
        display: none;
    }
    .para {
        padding-bottom: 40px;
    }
    .intro-site {
        max-width: 90%;
    }
    .actu {
        padding-top: 10px;
        margin-bottom: 10px;
    }
    .carousel-wrapper {
        min-width: 0;
    }
}

.popactu-content p {
    text-align: justify;
    font-size: 20px;
}

.popactu-content h1 {
    color: #303030;
    font-weight: 500;
}

/*
* A remplir afin d'alimenter les articles
* Par défaut ce sont des articles du site de la ville de Pont-du-Casse (dé-commenter pour voir le rendu)
*/

/*
.popactu-content p span, .popactu-content h1 span {
    display: none;
}

.a1 p span, .a2 p span, .a3 p span, .heure-n-date span {
    display: none;
}

.popactu-content.a1 h1::after, .a1 p.actitre::after {
    content: 'Un transport à la demande avec le CCAS';
}

.popactu-content.a2 h1::after, .a2 p.actitre::after {
    content: 'Accès modifié pour le marché du mardi';
}

.popactu-content.a3 h1::after, .a3 p.actitre::after {
    content: 'Une boule de Noël pour chaque écolier';
}

.popactu-content.a1 p.heure-n-date::after {
    content: '10h56 - Vendredi 15 janvier';
}

.popactu-content.a2 p.heure-n-date::after {
    content: '17h02 - Mardi 5 janvier';
}

.popactu-content.a3 p.heure-n-date::after {
    content: '13h25 - Mercredi 23 décembre';
}

.popactu-content.a1 .p1::after {
    content: "Le centre communal d’action sociale (CCAS) a pour mission d’orienter, recevoir, accompagner et conseiller le public dans ses démarches sociales, mais aussi de venir en aide aux personnes en difficulté. Ses membres sont à l’écoute de la population fragilisée, des jeunes aux plus âgés. Le CCAS travaille en partenariat avec les partenaires sociaux.";
}

.popactu-content.a1 .p2::after {
    content: "Des permanences permettent de recevoir les personnes sur rendez-vous et en toute discrétion. Pour Pont-du-Casse, il suffit de téléphoner à la mairie au 05 53 96 41 pour caler un rendez-vous lors de permanences tenues par des élus (es).";
}

.popactu-content.a1 .p3::after {
    content: "L’action sociale englobe aussi la demande de logement et la gestion de la qualité de vie de la Maison d’accueil rural pour personnes âgées plus communément appelée la Marpa.";
}

.popactu-content.a1 .p4::after {
    content: "À la fin du premier trimestre 2021, le CCAS, sous la houlette du vice-président Émile Gonzalès et du président Christian Delbrel, proposera le transport à la demande, en partenariat avec l’ADMR. C’est un dispositif de navette pour les plus de 65 ans ayant des difficultés de mobilité. Pour l’instant, il sera mis en place sur une base de deux demi-journées par semaine (mardi matin et jeudi après-midi).";
}

.popactu-content.a2 .p1::after {
    content: "À partir du 12 janvier, par mesure de sécurité, la circulation des véhicules sera modifiée sur la place du centre commercial où se déroule le marché de plein vent le mardi matin. Désormais, les automobilistes devront passer par le parking d’Intermarché pour accéder aux commerces, et ce uniquement le mardi matin.";
}

.popactu-content.a3 .p1::after {
    content: 'A l’initiative de l’Association des Parents d’Élèves (APE) et en collaboration avec le CLAE de la commune, un kit pour fabriquer une boule de Noël a été offert à chaque enfant. Ceux qui fréquentent le CLAE ont réalisé leur création lors des activités, les autres pourront finaliser leur boule noël à la maison. Super initiative de coopération des Parents et du CLAE municipal ! Également, formidable implication des enfants ravis de leur réalisation pour patienter jusqu’à l’arrivée du père Noël !';
}

.popactu-content.a1 img, .a1 img {
    content: url("https://www.ville-pontducasse.fr/wp-content/uploads/2021/01/REUNION-CCAS-21-12-2020-2.jpg");
}

.popactu-content.a2 img, .a2 img {
    content: url("https://www.ville-pontducasse.fr/wp-content/uploads/2021/01/MARCHE-MARDI-ACCES.jpg");
}

.popactu-content.a3 img, .a3 img {
    content: url("https://www.ville-pontducasse.fr/wp-content/uploads/2020/12/CLAE-KIT-BOULE-DE-NOEL-1.jpg");
}
*/

.en-tête {
    position: relative;
    padding-top: 20px;
}

.en-tête h1 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.en-tête p {
    margin-top: 5px;
    color: #757575;
}

.popactu-content img {
    object-fit: cover;
    height: 400px;
    width: 100%;
    border-radius: 15px;
}

.is-open, .is-open-mobile {
    visibility: visible;
    opacity: 1;
}

.is-open-mobile .popactu-content {
    margin-top: 15%;
}

.is-shown {
    animation: fadein 2s;
    opacity: 1;
}

.no-scroll {
    overflow: hidden;
}