/* IMPORTATION DES FONTS ---------------------------------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    line-height: 24px;
}

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

.align-left{
    text-align:left;
}

/* SCROLL TO TOP & CHAT BOT ----------------------------------------------------------------------------------------------------- */
#scroll-to-top, #open-chatbot {
    font-size: 25px;
    width: 50px;
    height: 50px;
    display: none;
    position: fixed;
    z-index: 99;
    background-color: #244952;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
}

#scroll-to-top:hover, #open-chatbot:hover {
    background-color: #025a6b;
}

/* CHAT BOT ------------------------------------------------------------------------------------------------------------------ */


/* Bouton edit vue ------------------------------------------------------------------------------------------------------------ */
#edit {
    display: block;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #244952;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    font-size: 25px;
}

#edit:hover {
    background-color: #025a6b;
}

/* ____________________________________________________ SECTIONS ____________________________________________________________*/

/* SECTION HEADER ----------------------------------------------------------------------------------------------------------- */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 70px;
    font-family: 'Be Vietnam Pro';
    font-weight: bold;
    font-size: 16px;
    color: #323F45;
    position: fixed;
    z-index: 1000;
    background: white;
    -webkit-box-shadow: 0px 1px 15px -5px rgba(0,0,0,0.95);
    box-shadow: 0px 1px 15px -5px rgba(0,0,0,0.95);
}

/* SOCIAL MEDIAS */
.bxl-youtube:before {
    font-size: 40px;
}

#social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 10%;
    height: 100%;
}

#social-media i {
    font-size: 30px;
    transition: 0.5s;
}

#youtube:hover {
    color: #FF0000;
}

#facebook:hover {
    color: #1877F2;
}

#instagram{
    border-radius: 10px;
}

#instagram:hover {
    color: #FFFFFF;
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
    border-radius: 10px;
}



/* LIENS */
#links {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 100%;
    gap: 25px;
    position: relative;
}

#links a {
    position: relative;
    text-decoration: none;
}

#links a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #323F45;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

#links a:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

/* CONNEXION */
#connection {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10%;
    height: 100%;
}

#connection a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#connection i {
    font-size: 25px;
}

#burger-menu {
    display: none;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

#burger-menu i {
    font-size: 30px;
    transition: 0.5s;
}

@media (max-width: 1200px) {
    nav {
        justify-content: space-between;
    }

    #social-media i {
        font-size: 35px;
    }
    .bxl-youtube:before {
        font-size: 35px;
    }

    #burger-menu {
        display: flex;
    }

    #connection{
        margin-right: 50px;
    }

    #connection a{
        font-size: 15px;
    }

    #connection i{
        font-size: 20px;
    }


    #links {
        display: none;
        flex-direction: column;
        width: 100%;
        height: auto;
        background: white;
        position: absolute;
        top: 70px;
        left: 0;
        box-shadow: 0px 1px 15px -5px rgba(0,0,0,0.95);
    }

    #links a {
        padding: 15px 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }

    #links a::before {
        display: none;
    }
}

@media (max-width: 768px) {
    #social-media i {
        font-size: 25px;
    }
    .bxl-youtube:before {
        font-size: 25px;
    }
}

/* SHOW MENU */
#links.show {
    display: flex;
}

/* SECTION FOOTER ----------------------------------------------------------------------------------------------------------- */
#footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #244952;
    width: 100%;
    color: white;
    font-family: 'Be Vietnam Pro';
    font-weight: bold;
    font-size: 16px;
    gap: 25px;
    padding: 25px 0px;
}

/* IMAGES */
#img-footer {
    display: flex;
    width: 156px;
    height: 260px;
}

#img-footer img {
    width: 100%;
    height: 100%;
}

/* LIENS */
#footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 25px;
    position: relative;
}

#footer-links a{
    color:white;
}

#informations {
    display: flex;
    flex-wrap: wrap;
    color:white;
}

#informations p {
    text-align: center;
    width: 100%;
    color:white;
}

#informations p a {
    display: block;
    color:white;
}

/* SOCIAL MEDIAS */
#footer-social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    color:white;
    margin-top:10px;
}

#footer-social-media i {
    font-size: 35px;
    transition: 0.5s;
    color:white;
}

/* SECTION SMALL-BANNER ----------------------------------------------------------------------------------------------------- */
.smallbanner {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    background-color: black;
}

.smallbanner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.9s ease-in-out;
}

.smallbanner:hover::before {
    transform: scale(1.1);
}

/* SECTION BANNER-GREEN ----------------------------------------------------------------------------------------------------- */
.bannerGreen {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    background-image: url("../../public/imgs/bannerVert/01.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
}

.milieu-bannerGreen {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.milieu-bannerGreen h1 {
    font-size: 40px;
    z-index: 1;
}

.milieu-bannerGreen .blue-button {
    z-index: 1;
    font-size: 20px;
}

.bannerGreen::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.6s ease-in-out;
}

.bannerGreen:hover::before {
    background-color: rgba(0, 0, 0, 0.5);
}

/* SECTION BANNER-ORANGE ---------------------------------------------------------------------------------------------------- */
.bannerOrange {
    position: relative;
    width: auto;
    height: 400px;
    overflow: hidden;
    background-image: url("../../public/imgs/bannerOrange/1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
}

.milieu-bannerOrange {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.milieu-bannerOrange h1 {
    font-size: 40px;
    z-index: 1;
}

.milieu-bannerOrange .blue-button {
    z-index: 1;
    font-size: 20px;
}

.bannerOrange::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.6s ease-in-out;
}

.bannerOrange:hover::before {
    background-color: rgba(0, 0, 0, 0.5);
}

/* SECTION CONTACT ---------------------------------------------------------------------------------------------------------- */
.text-contact {
    width: 100%;
}

.img-contact {
    width: 50%;
    justify-content: center;
    align-items: end;
    padding-left:5%;
}

.img-contact img{
    width:100%;
}

.form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 15px;
    padding-top: 20px;
}

.form-group label {
    margin-right: 10px;
}

.form-group input[type="text"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.form-group input[type="email"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.form-group textarea {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
    box-sizing: border-box;
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.row-contact {
    margin-top:80px;
    margin-bottom:30px;
}

#prenom {
    margin-left: 30px;
}

/* SECTION NEWSLETTER ------------------------------------------------------------------------------------------------------- */

.col-newsletter {
    display: flex;
    flex-direction: column;
    text-align: start;
    padding-bottom:25px;
    padding-top:25px;
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 100%;
    border:none;
}

.text-newsletter, .text-newsletter p {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#newsform{
    padding-top:0px;
}

/* ____________________________________________________ PAGE A PROPOS _______________________________________________________*/

/* SECTION ENGAGEMENT ------------------------------------------------------------------------------------------------------- */
.engagement {
    margin-top: 50px;
    padding: 20px 0;
    letter-spacing: 9%;
    line-height: 30px;
    text-align: justify;
    padding-top:50px;
    padding-bottom:50px;
}

.engagement p{
    text-align:justify;
}

/* SECTION HISTORY ---------------------------------------------------------------------------------------------------------- */
.history{
    padding-bottom:5px;
}

.gallery-history-1 img {
    width:75%;
}

.texte-history {
    width: 60%;
    align-items: flex-start;
    justify-content: center;
    letter-spacing: 9%;
    line-height: 30px;
}

.texte-history p{
    text-align:left;
}

.gallery-history-1 {
    width: 40%;
    align-items: end;
}

/* ____________________________________________________ PAGE FAQ ____________________________________________________________*/

.faq-container {
    margin: 0 auto;
    padding: 20px;
    padding-top:30px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

.faq-title {
    text-align: center;
    font-size: 2.5em;
    color: #244952;
    margin-bottom: 20px;
}

.highlight {
    color: #244952;
}

.faq-section {
    margin-bottom: 30px;
}

.faq-subtitle {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: #244952;
    border-bottom: 2px solid #244952;
    padding-bottom: 5px;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    font-weight: bold;
    font-size: 1.2em;
    color: #244952;
}

.faq-answer {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
    text-align:left;
}

.testimonial{
    text-align: left;
}

/* ____________________________________________________ PAGE MENTIONS LEGALES _______________________________________________*/
.legal-notice-container {
    width: auto;
    overflow: hidden;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.legal-notice-title {
    text-align: center;
    color: #2c3e50;
}

.highlight {
    color: #244952;
}

.legal-notice-section {
    margin: 50px 0;
}

.legal-notice-subtitle {
    font-weight: bold;
    color: #244952;
    margin-bottom: 10px;
    margin-top: 5px;
}

.legal-notice-section p, .legal-notice-section ul li{
    margin-left: 20px;
    text-align: left;
}


/* ____________________________________________________ PAGE 404 ____________________________________________________________*/

.main {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.main img {
    width: 50%;
}

.main a, .main h1 {
    padding-top: 30px;
}

/* ____________________________________________________ PAGE ACCUEIL ________________________________________________________*/

/* SECTION PRESENTATION ----------------------------------------------------------------------------------------------------- */
#presentation {
    height: 100vh;
    color: #fff;
    background-image: url(../imgs/accueil/header/1.webp);
    background-position: center;
    background-repeat: no-repeat;
    width:100%;
    background-size: cover;
    gap: 100px;
}

#titrePresentation{
    transform:translateY(190%);
}

#top-presentation {
    width: 100%;
    gap: 10px;
}

#img-presentation {
    width: 143px;
    height: 175px;
}

#img-presentation img {
    width: 100%;
    height: 100%;
}

#bottom-presentation {
    width: 100%;
    gap: 10px;
}

#p-presentation {
    width: 55%;
    text-align: center;
    color:white;
}

/* BARRE DE RECHERCHE */
#search-form {
    display: flex;
    width: 70%;
    height: 50px;
    gap: 25px;
    vertical-align: center;
    align-items: center;
}

#search-bar {
    display: flex;
    width: 70%;
    height: 84%;
    border: none;
    border-radius: 10px;
    padding-left: 20px;
}

#search-bar::placeholder {
    font-family: "Be Vietnam Pro";
}

#search-form button {
    display: flex;
    width: auto;
    height: 92%;
    font-family: "Be Vietnam Pro";
    font-weight: bold;
    font-size: 15px;
    gap: 10px;
    background-color: #244952;
    border: none;
    border-radius: 10px;
    color: #fff;
    padding: 10px;
}

/* SECTION SLIDER ----------------------------------------------------------------------------------------------------------- */
#slider {
    width: 100%;
    padding:0px;
}

#text-slider {
    width: 100%;
    height: 25%;
    text-align: center;
}

#card-slider {
    display: flex;
    width: 100%;
    height: 75%;
    gap: 25px;
    margin-top:20px;
}

.cards {
    display: flex;
    align-items: end;
    width: 300px;
    height: 500px;
    position: relative;
}

.cards::before {
    content: "";
    background: #000000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    transition: 0.3s;
}

.cards:hover::before {
    opacity: 0.1;
}

.cards h3 {
    color: #FFF;
    margin: 0px 0px 15px 15px;
}

.down {
    margin-top: 5%;
}

#evasion {
    background-image: url(../imgs/accueil/sliderDebut/01.webp);
    background-size: cover;
    background-position: center;
}

#aventure {
    background-image: url(../imgs/accueil/sliderDebut/02.webp);
    background-size: cover;
    background-position: center;
}

#nature {
    background-image: url(../imgs/accueil/sliderDebut/03.webp);
    background-size: cover;
    background-position: center;
}

#communaute {
    background-image: url(../imgs/accueil/sliderDebut/04.webp);
    background-size: cover;
    background-position: center;
}

.card {
    position: relative;
    width: 300px;
    height: 400px;
    background-color: #f2f2f2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px;
    box-shadow: 0 0 0 5px #ffffff80;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card img{
    max-width: none;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
}

.card__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f2f2f2;
    transform: rotateX(-90deg);
    transform-origin: bottom;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover .card__content {
    transform: rotateX(0deg);
}

.card__title {
    margin: 0;
    font-size: 24px;

    font-weight: 700;
}

.card:hover svg {
    scale: 0;
}

.card__description {
    margin: 10px 0 0;
    font-size: 14px;
    color: #777;
    line-height: 1.4;
}

/* SECTION WEATHER ---------------------------------------------------------------------------------------------------------- */
.weather-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(197px, 1fr));
    grid-gap: 15px;
    justify-content: center;
    align-items: center;
    margin-top:15px;
    margin-bottom: 25px;
    margin-left:3%;
}

/* SECTION SERVICES --------------------------------------------------------------------------------------------------------- */
#services {
    width: 100%;
    padding: 50px 0px;
    background: #F5F5F5;
}

#left-services {
    width: 40%;
    height: 100%;
}

#left-services img {
    width: 70%;
}

#right-services {
    justify-content: center;
    align-items: start;
    width: 60%;
    height: 100%;
}

#right-services h2 {
    color: #244952;
}

#right-services p {
    text-align:left;
    line-height: 30px;
}

#right-services a {
    padding: 12px;
    font-size:16px;
}

/* SECTION MOUTAINS ------------------------------------------------------------------------------------------------------- */
#mountains {
    display: flex;
    width: 100%;
    padding: 0px;
    gap: 25px;
}

#top-mountains {
    text-align: center;
}

#bottom-mountains {
    display: flex;
    gap: 25px;
}

.cards-mountains {
    display: flex;
    align-items: end;
    width: 100%;
    height: 400px;
    position: relative;
}

.cards-mountains:hover {
    transform: scale(1);
    position: absolute;
    z-index: 1000;
}


.title-mountains {
    display: flex;
    width: 100%;
    height: 10%;
    color: #FFF;
    background: #00000080;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
}

/* Exemple pour chaque montagne */
.accordion{
    max-width: 100%;
    height: 400px;
    display: flex;
    overflow: hidden;
    margin: 50px auto;
}

.tab-montains{
    position: relative;
    width: 20%;
    height: 400px;
    padding: 20px;
    background: #000;
    color: #FFF;
    cursor: pointer;
    transition: width .5s ease;
    margin: 0;
}

.tab-montains img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease;
}

.caption{
    position: absolute;
    z-index: 2;
    white-space: nowrap;
    top: 150px;
    opacity: 0;
}

.caption h2{
    margin-bottom: 2px;
    text-overflow:clip;
    font-size:24px;
    text-transform:uppercase;
}

.caption p{
    margin: 0;
    font-family: 'Open Sans';
    font-size: .9rem;
}

.tab-montains:hover img{
    opacity: .6;
}

.tab-montains:hover{
    width: 80%;
}

.tab-montains:hover .caption{
    transition: all .5s ease;
    opacity: 1;
}
/* SECTION GALERIE ---------------------------------------------------------------------------------------------------------- */
.gallery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    gap: 20px; /* Espacement entre les éléments */
    margin: 0 auto;
}

.image-gallery {
    display: flex;
    justify-content: center;
    height: 250px;
    position: relative;
    overflow: hidden;
    object-fit: cover;
}

.image-gallery::before,
.image-gallery::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.image-gallery:hover::before {
    width: 100%;
    height: 100%;
}

.image-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 0;
}

/* ____________________________________________________ PAGE TRAILS _________________________________________________________*/

.delete-color{
    color: red;
    text-align:left;
    text-decoration: underline;
    font-family:"Be Vietnam Pro", sans-serif;
    font-size: 14px;
    font-weight: 400;
}
button.favorite-fav {
    padding: 0;
}

/* ____________________________________________________ PAGE COMPTE _________________________________________________________*/

/* SECTION OLD-TRAILS ------------------------------------------------------------------------------------------------------- */
.simple-oldTrails {
    background-color: #F7FCE9;
    border-radius: 10px;
    margin-bottom: 50px;

}

.img-old {
    padding: 10px;
}

.img-old img {
    width: 280px;
    height: 200px;
    border-radius: 10px;
}

.texte-old {
    padding: 10px;
    width: 60%;
}

.fiche-icons {
    width: 25%;
    justify-content: center;
    align-items: center;
    background-color: #E0EEB9;
    flex: auto;
    border-radius: 10px;
}

.fiche-icons i {
    font-size: 30px;
}

/* ____________________________________________________ PAGE ACTUALITES ____________________________________________________*/

/* SECTION NOUVEAUX ARTICLES ---------------------------------------------------------------------------------------------- */
.last-news {
    margin-top: 50px;
    margin-bottom: 50px;
}

.last-news .title-last-news {
    margin-bottom: 20px;
}

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    gap: 20px;
}

.div-last-news-0 {
    grid-area: 1 / 1 / 3 / 4;
    position: relative;
}

.div-last-news-0 .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 20px);
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px 10px;
}

.div-last-news-1 .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 20px);
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px 10px;
}

.div-last-news-2 .title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 20px);
    color: white;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px 10px;
}

.div-last-news-0 img {
    height: 100%;
    width:100%;
}

.div-last-news-1 {
    grid-area: 1 / 4 / 2 / 6;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.div-last-news-0 a{
    width: 100%;
    height: 100%;
}

.div-last-news-0 a img{
    width: 100%;
    height: 100%;
}

.div-last-news-1 a{
    width: 100%;
    height: 100%;
}

.div-last-news-1 a img{
    width: 100%;
    height: 100%;
}

.div-last-news-2 a{
    width: 100%;
    height: 100%;
}

.div-last-news-2 a img{
    width: 100%;
    height: 100%;
}

.div-last-news-2 {
    grid-area: 2 / 4 / 3 / 6;

    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* SECTION ARTICLES EPINGLES ---------------------------------------------------------------------------------------------- */
.sous-bloc-pinned {
    padding: 20px;
}

.sous-bloc-pinned p {
    word-wrap: break-word;
    text-align:justify;
}

.col-pinned-news {
    width: 32%;
    border: solid 1px #e0e0e0;
    background-color: #F5F5F5;
}

.col.col-pinned-news img {
    height: 250px;
}

.col-pinned-news a {
    display: block;
    margin-top: 20px;
}

.col-pinned-news-1, .col-pinned-news-2 {
    margin-left: 20px;
}

.line-article {
    border-top: 1px solid #ccc;
    margin: 10px 0;
}

.pinned-news {
    padding-top: 20px;
}

/* SECTION OLD-NEWS ------------------------------------------------------------------------------------------------------- */
.col.img-news {
    width: 25%;
}

.img-news img {
    width: 300px;
    height: 200px;
    border-radius: 10px;
}

.text-old-news {
    width: 70%;
    margin-left:20px;
}

.text-old-news p{
    text-align:left;
    margin-top:8px;
    margin-bottom:10px;
}

.old-news-row {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #f1f1f1;
    border-radius: 20px;
}

.old-news-row:hover {
    background-color: #f1f1f1;
    border-radius: 20px;
}

.old-news-container {
    margin-top: 50px;
    margin-bottom: 50px;
}

.old-news-container h2 {
    margin-bottom: 50px;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-family: "Be Vietnam Pro", sans-serif;
}

.pagination-box {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #025a6b;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

.pagination-box:hover {
    background-color: #e7e7e7;
}

.pagination-box.active {
    background-color: #025a6b;
    color: #fff;
    border-color: #025a6b;
}
/* ____________________________________________________ PAGE SINGLE ACTUALITE ______________________________________________*/

.description-singleNews p {
    word-wrap: break-word;
    text-align: justify;
}

.first-row-singleNews {
    padding-top: 40px;
}

.img-singleNews {
    width: 50%;
    height:auto;
}

.img-singleNews img{
    object-fit: cover;
    height:100%;
}

.description-singleNews {
    width: 50%;
    padding-left: 20px;
}

.date-singleNews {
    font-style: italic;
    text-align: right;
}

.contenu-singleNews {
    padding-top: 40px;
}

.contenu-singleNews p{
    text-align: justify;
}

#tagActu{
    color:#77A7FF;
    text-decoration: underline;
}

/* ____________________________________________________ PAGE RANDONNEES ____________________________________________________*/

/* SECTION INTRODUCTION --------------------------------------------------------------------------------------------------- */
#introduction {
    position: relative;
    transform: translateY(-150px);
    margin-bottom:-8%;
}

#left-introduction {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
}

#right-introduction {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 55%;
    transform: translateY(75px);
}

/* SECTION TRAIL ---------------------------------------------------------------------------------------------------------- */
#trails-block{
    padding: 50px 0px;
}

#left-trails-block {
    width: 20%;
    margin-right:20px;
}

.text-rating {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#like {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: end;
    font-size: 30px;
}

#right-trails-block {
    width: 80%;
}

#favorite {
    border: none;
    background-color: transparent;
    font-size: 30px;
}

/* SECTION TRAILS --------------------------------------------------------------------------------------------------------- */
.trails-element-infos-head.row {
    width: 100%;
}

.trails-element-infos-head h2{
    text-align: left;
}

.star-trail-list {
    margin-left: 20px;
}

span.row.center.yellow-stars.star-trail-list {
    margin-left: 15px;
}

.icon-fiche-single-rando {
    margin-top: 10px;
}

.trails-element {
    display: flex;
    background: #F7FCE9;
    width: 90%;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.body-selected-filters{
    display: flex;
    justify-content: start;
    width: 90%;
}

.selected-filters{
    display: flex;
    width: 100%;
    gap: 25px;
    padding-bottom: 15px;
}

.trails-element-picture {
    padding: 10px;
    padding-bottom: 20px;
}

.trails-element-picture img {
    border: 5px solid #E0EEB9;
}

.trails-element-infos {
    justify-content: center;
    width: 70%;
    padding-left: 20px;
    padding-bottom: 25px;
}

.trails-element-infos-head {
    padding-top: 25px;
}

.trails-element-infos-body label {
    align-items: center;
    gap: 10px;
}

.trails-element-infos-body p {
    width: 90%;
    line-height: 30px;
    letter-spacing: 9%;
    text-align: start;
}
.row-options{
    height: 50px;
}

.trails-element-infos-footer {
    gap: 25px;
}

.trails-element-infos-footer-icons {
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #244952;
}

.trails-element-infos-footer-icons i{
    color: #244952;
}

.trails-element-button {
    justify-content: center;
    align-items: center;
    background: #E0EEB9;
    width: 10%;
    padding: 15px;
}

.trails-element-button label,
.trails-element-button span {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.trails-element-button label i,
.trails-element-button span i {
    font-size: 40px;
}

.trails-element-button label a,
.trails-element-button span p {
    font-weight: 700;
    letter-spacing: 9%;
    line-height: 18px;
    text-align: center;
}

.options-div{
    width: 20px;
    height: 20px;
}

/* SECTION FILTRES -------------------------------------------------------------------------------------------------------- */
#filters {
    justify-content: center;
    width: 80%;
    padding: 0px 0px 25px 25px;
    gap: 15px;
}

#filters-submit{
    margin-top:0px;
}

#filters-submit2{
    margin-top:15px;
}

.trails-container{
    width: auto;
    background-color: #E0EEB9;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.box-filters {
    justify-content: start;
    align-items: start;
    text-align: start;
    border: 1px solid #CCCCCC;
    padding: 10px;
}
.form-filters{
    width: 115%;
}

.box-filters p{
    text-align: start;
}

.options-filters{
    text-align: start;
    word-break:break-all;
}
.label-filters{
    margin-top: 10px;
}

#box-filters-input input {
    width: 100%;
}

#notation-filters i {
    color: #FFA500;
}

.notation-filters-label {
    justify-content: space-between;
    align-items: center;
}

.notations-size {
    font-size: 10px;
}

.checkbox-filters{
    accent-color: #2b545d;
    text-align: left;
    word-break: break-word;
}

/* SECTION PARTAGE RESEAUX -------------------------------------------------------------------------------------------------- */
.share-button {
    display: inline-block;
    width: 40px;
    height: 30px;
    margin-left: 5px;
    background-color: white;
    border:solid 1px #1E1E1E;
    border-radius:100%;
    text-align: center;
    color: #1E1E1E;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    padding-top:10px;
}
.share-button:hover {
    background-color: #1E1E1E;
    color: white;
}
.text{
    line-height:20px;
}

/* ____________________________________________________ PAGE RANDONNEE INDIVIDUELLE ________________________________________*/

/* SECTION TRAIL ----------------------------------------------------------------------------------------------------------- */
#trail-section {
    padding: 25px 25px;
}

#left-trail-section {
    height: 100%;
    padding-right: 50px;
}

#img-left-trail {
    display: grid;
    width: 800px;
    height: 700px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.first-grid {
    width: 100%;
    height: 100%;
    grid-area: 1 / 1 / 2 / 2;
    background-size: cover;
    background-position: center;
}

.second-grid {
    width: 100%;
    height: 100%;
    grid-area: 2 / 1 / 3 / 2;
    background-size: cover;
    background-position: center;
}

.third-grid {
    width: 100%;
    height: 100%;
    grid-area: 3 / 1 / 4 / 2;
    background-size: cover;
    background-position: center;
}

.fourth-grid {
    width: 100%;
    height: 100%;
    grid-area: 1 / 2 / 4 / 4;
    background-size: cover;
    background-position: center;
}

#right-trail-section {
    width: 50%;
    height: 100%;
    justify-content: center;
    align-items: start;
    gap: 10px;
}

#text-not {
    font-size: 12px;
}

.icons-element-body-line {
    gap: 25px;
}

.icons-element-body {
    gap: 10px;
    font-size: 20px;
}

.options-div img{
    object-fit: contain;
}

.link-trail {
    gap: 10px;
}

.link-trail-text {
    text-decoration: underline;
}

.paragraphe-details{
    margin: 5px;
}

/* SECTION POPUP CARTE ---------------------------------------------------------------------------------------------------- */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width:90vw;
    height:auto;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 2px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    text-align: center;
}

.popup img {
    width:40vw;
    max-width: 100%;
    max-height: 100%;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

#mountainFilters a{
    text-decoration: underline;
}

/* SECTION FORM FILTERS --------------------------------------------------------------------------------------------------- */
.input-filters, textarea {
    background: white;
    border: none;
    border: solid 1px #CCCCCC;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 1.01rem;
    transition: all 0.1s ease;
}

input:focus, textarea:focus {
    outline: none;
    border: solid 1px #244952;
}

span.bubble-post-filters {
    color: #00000075;
    font-size: 12px;
    background-color: #CCCCCC50;
    padding: 5px 10px;
    border-radius: 50px;
    font-family: "Be Vietnam Pro", sans-serif;
    border: 1px solid #CCCCCC;
}

#mountainFilters {
    display: block;
}

#difficultyFilters{
    display:block;
}

#localisation{
    display:block;
}

#options{
    display:block;
}

.filter-heading {
    position: relative;
    cursor: pointer;
}

.toggle-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #000 transparent transparent transparent;
    transition: transform 0.3s;
}

.filters-opened .toggle-icon {
    border-width: 8px 5px 0px 5px;
}

.rotate {
    transform: translateY(-50%) rotate(-180deg);
}

/* SECTION INFOTRAILS --------------------------------------------------------------------------------------------------- */
#buttons-trail {
    justify-content: start;
    align-items: center;
    gap: 25px;
    padding: 0px 0px 5px 50px;
    position: relative;
}

#buttons-trail button {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #1E1E1E;
    border: none;
    background: none;
    position: relative;
    text-decoration: none;
}

#buttons-trail button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #323F45;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}

#buttons-trail button:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

#buttons-trail button.active::before {
    visibility: visible;
    transform: scaleX(1);
}

.content-trail-2-line {
    align-items: center;
    gap: 10px;
}

.tab-content {
    display: none;
    padding: 50px 0px 25px 50px;
    background: #F5F5F5;
}

.tab-content.active {
    display: block;
}

.text-tab-content{
    text-align: start;
    width:90vw;
}

/* SECTION COMMENTAIRES --------------------------------------------------------------------------------------------------- */
#comments {
    background: #F5F5F5;
    padding: 50px;
}

#top-comments {
    width: 100%;
}

#bottom-comments {
    width: 100%;
    gap: 15px;
}

#top-bottom-comments {
    width: 100%;
}

#right-comments-section {
    width: 100%;
    height: 100%;
}

#notation-span {
    align-items: center;
    gap: 25px;
}

#form-comments-section {
    gap: 25px;
}

#form-comments-section img {
    border-radius: 100%;
    max-width:auto;
}

#form-comments-section form {
    width: 100%;
    gap: 15px;
}

.form-comments span {
    width: 100%;
}

#text-comments {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #244952;
    background: none;
    width: 100%;
}

.comments-bulles-section {
    gap: 25px;
}

.comments-bulles {
    width: 100%;
    gap: 15px;
}

.comments-bulles img {
    border-radius: 100px;
}

.notations-comments i {
    color: #FFA500;
}

.submit-comments {
    width: 125px;
}


.comments-bulles-right.col {
    align-items: flex-start;
}
button#delete-com-single{
    border:solid 1px #CCC;
    border-radius: 20px;
    padding:0px 8px 0px 8px;
    color:rgb(176, 0, 0);
    margin-top:12px;
}

.button-delete-comments{
    color: rgb(218, 3, 3);
    font-size: 13px;
    font-weight: bold;
    border: none;
    padding:0px;
    margin:6px;
}

/* SECTION APPRECIATED ---------------------------------------------------------------------------------------------------- */
#appreciated {
    padding: 50px;
    gap: 25px;
}

.all-cards-appreciated {
    gap: 50px;
}

.appreciated-description{
    text-align: start;
}

.cards-appreciated {
    width: 30%;
    gap: 25px;
}

.cards-appreciated img {
    border-radius: 30px;
}

.buttons-cards a{
    background-color: #F5F5F5;
    border: 1px solid #1E1E1E;
    padding: 10px;
    width: 100%;
    transition: 0.3s;
}


.buttons-cards a:hover {
    color: white;
    background: #244952;
    border: #244952;
}

/* ____________________________________________________ PAGE ACCOUNT _______________________________________________________*/

input[type="text"].input-for-account {
    border: none;
    border-bottom: 1px solid #CCCCCC;
    border-radius: 0px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    width: 100%;
    transition: 0.3s all ease-in-out;
}

input[type="text"].input-for-account:focus {
    border: none;
    border-bottom: 1px solid black;
    border-radius: 0px;
}

.input-for-account[type="date"] {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 8px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.account {
    line-height: 30px;
    margin-top:10px;
}

.tab {
    margin-left: 100px;
}

.informations-account {
    width: 80%;
    padding-left: 50px;
    text-align: justify;
    padding-right: 50px;
    margin-top:10px;
}

.informations-account p{
    text-align:justify;
}

.etiquettes {
    margin-top: 10px;
    margin-bottom:5px;
    border-radius: 5px;
    text-align:center;
    width:100%;
    padding:15px 0px;
    background-color: #edecec;
    transition: background-color 0.3s ease;
}

.etiquettes:hover{
    background-color:#CCC;
}

.etiquette-active {
    background-color: #CCCCCC;
    padding:0px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border-bottom: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
    padding: 18px;
    text-align: left;
}

.first {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    padding-top: 20px;
}

.blue-button-inverse {
    background-color: #FFFFFF;
    color: #244952;
    border: solid 1px #244952;
    padding: 10px 30px;
    text-decoration: none;
    margin-top: 20px;
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.contact-button{
    width:100%;
    margin-top:0px;
    background-color: #244952;
    color: #FFFFFF;
    padding: 10px 30px;
    text-decoration: none;
    margin-top: 20px;
    font-family: "Alegreya Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    border:none;
    transition: background-color 0.3s ease;
    cursor:pointer;
}

.contact-button:hover{
    background-color:#2b545d;
}

.photo-profil{
    transform:translateY(50px);
    align-items: center;
}

.photo-profil img{
    vertical-align: middle;
}

.upload-profil{
    transform:translateY(-10px);
}

.first img {
    height: 130px;
    width: 130px;
    border-radius: 100%;
    border:solid 1px #CCCCCC;
}

tbody {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.bloc2-account {
    margin-top: 50px;
}

.bloc3-account {
    margin-bottom: 50px;
}

.logout {
    padding: 0;
    width: 100%;
}

#tab {
    border: none;
    border: solid 1px red;
    padding: 15px;
    border-radius: 5px;
    margin-left: 0;
    color: red;
    width:100%;
    transition: background-color 0.3s ease;
}

#tab span{
    font-family: "Be Vietnam Pro";
    font-weight:400;
    font-style:normal;
    font-size:16px;
    text-align:center;
}

#deleteForm {
    border: none;
    border-radius: 5px;
    margin-left: 0;
    font-size: 16px;
    color: red;
    width:100%;
    padding:5px 0px;
    margin-bottom:5px;
}

#deleteForm input{
    padding:15px;
    margin:0px;
    text-align:center;
    width:100%;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    background-color: #edecec;
}

#deleteForm input:hover{
    background-color: red;
    color:white;
}

#deco_mobile{
    padding-left:10px;
}

.modifier-button{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#244952;
    color:white;
    font-size:14px;
    width:100%;
}

.modifier-button image{
    margin-top:-15px;
}

.supp{
    background-color:#F5F5F5;
    color:#1E1E1E;
    border:solid 1px #aaaaaa;
}

.modifier-button2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color:#1E1E1E;
    font-family: "Be Vietnam Pro";
    font-weight:400;
    font-style:normal;
    font-size:16px;
    text-align:center;
}

#tab:hover {
    background-color: red;
    color: white;
}

/* ____________________________________________________ PAGE LOGIN _________________________________________________________*/

/* MESSAGE D'ERREUR */
.alert {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.input-error {
    border: 1px solid red;
}

.error-message {
    display: none;
    color: red;
    font-size: 14px;
    text-align:justify;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
}

/* MOT DE PASSE VISIBLE / CACHE */
.visible {
    display: inline-block;
    visibility: visible;
}

.hidden{
    visibility: hidden;
}

.password-icon{
    display:flex;
    align-items: center;
    position:absolute;
    top:62%;
    transform:translateY(-50%);
    width:20px;
    transition:all 0.2s;
    right:15px;
}

#password-info{
    margin-top:-36px;
    margin-bottom:20px;
    margin-left:85%;
}

.password-icon:hover{
    cursor:pointer;
    color:#244952;
}

/* INFO-BULLE MOT DE PASSE */
.info-bubble {
    position: absolute;
    font-size:11px;
    font-style:italic;
    text-align:center;
    color:#333333;
    background-color: #323F45;
    color: #fff;
    border-radius: 4px;
    padding: 5px 14px;
    width:calc(100% - 28px);
    top: calc(100% + 5px);
    left:calc(50%);
    white-space: normal;
    word-wrap: break-word;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.info-bubble::before {
    content: '';
    position: absolute;
    top: -10px;
    left: calc(50%);
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #323F45 transparent;
}

#password-info:hover + .info-bubble,
#password-info:focus + .info-bubble {
    opacity: 1;
}

.label-form {
    position:relative;
    justify-content: center;
    width: 100%;
    text-align:left;
}

.label-form:hover{
    z-index:3
}

#login-section {
    background-image: url(../imgs/pageConnexion/1.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    gap: 50px;
    padding-top:90px;
    padding-bottom:50px;
    align-items:center;
    vertical-align: center;
}

#left-top-login-section {
    padding-right: 75px;
    display:block;
}

#right-top-login-section {
    padding-left: 75px;
    border-left: 1px solid #fff;
    display:block;
}

#button-return {
    width: 350px;
    text-align: center;
}

.input-login {
    background: white;
    border: none;
    border: solid 1px #CCCCCC;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 1.01rem;
    transition: all 0.1s ease;
}

input:focus, textarea:focus {
    outline: none;
    border: solid 1px #244952;
}

#register-form {
    background: #D9D9D9B2;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    width: 400px;
    padding:25px;
}

#login-form {
    background: #D9D9D9B2;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    width: 400px;
    padding:25px;
}

.submit-register {
    width: 100%;
}

.mobile-only {
    display: none;
}

.switch-login{
    width:100%;
}

.switch-register{
    width:100%;
}

#forgot-email{
    width:99%;
    padding-top:10px;
    padding-bottom:10px;
}

#new-password, #confirm-password{
    width:98%;
    margin-top:10px;
    padding:10px 0px 10px 10px;
}

#confirm-password{
    margin-bottom:15px;
}

/* CHAT BOT */
#chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width:300px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 5px;
    overflow: hidden;
}

#chatbot {
    background: #fff;
    border: 1px solid #ddd;
}

#chatbot-header {
    background: #244952;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#close-chatbot{
    background-color: transparent;
    color:white;
    border:none;
}

#chatbot-content {
    height: 300px;
    overflow-y: auto;
    padding: 10px;
    background: #f9f9f9;
}

#chatbot-input {
    display: flex;
    border-top: 1px solid #ddd;
}

#user-input {
    flex: 1;
    border: none;
    padding: 10px;
}

#send-button {
    background: #244952;
    color: white;
    border: none;
    padding: 10px;
}

.chatbot-message {
    background: #e0e0e0;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size:12px;
}

.user-message {
    background: #244952;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    text-align: right;
    font-size:12px;
}

.chatbot-options button {
    display: block;
    margin: 5px 0;
    padding: 10px;
    width: 100%;
    border: none;
    background: #244952;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    font-size:12px;
}

.chatbot-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #244952;
    color: white;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    height: 30px;
    padding-right:45px;
}

.chatbot-bubble p {
    margin: 0;
    margin-right: 10px;
    color:white;
}

/* ____________________________________________ PAGE DESINSCRIPTION __________________________________________________ */
#titleNewsDes{
    color: #244952;
    margin-bottom: 30px;
}

#unsub-yes{
    background-color: #244952;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width:100%;
    margin-top:15px;
}

#unsub-no{
    color:white;
    border:none;
    background-color: #1E1E1E;
    padding: 10px 20px;
    font-size: 16px;
    width:100%;
}

#unsub-no a{
    color:white;
    text-decoration: none;
}

.unsubscribe-container{
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 70%;
    width: 100%;
}

.contentNews{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    width:100%;
    background-color: #f4f4f4;
}