/* variables */

/* Voici la couleur rouge : #e0252e  */
/* Gris des gros titres et titres actualités : #c4b29c */
/* Typo : Monserrat */


/*****************************************************  */
/* global */
/*****************************************************  */


* {
    margin: 0;
    padding: 0;
    /* font-family: 'Lato', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    /* font-family: 'Ubuntu', sans-serif; */
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

main {
    min-height: 100vh;
    position: relative;
}

body.no-scrollable {
    overflow: hidden;
}

.container-fluid {
    width: 100%;
}

.mainContainer {
    padding-top: 120px;
    min-height: calc(100vh - 470px);
}

.lightTheme .mainContainer {
    padding-top: 0;
}

.container {
    width: min(1400px, 100vw);
    padding: 3%;
}
.lightHeroContainer{
    width: 100%;
    height: clamp(5vh, 450px, 500px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
}
.subtitled-title, .noSubtitledTitle {
    /*color:#656463; couleur de la graphiste*/
    color: #545C5C; /* couleur récupérée avec  Color Picker*/
    font-size: 1.8rem;
    position: relative;
    padding: 1rem;
    text-align: center;
    font-weight: 700;
    width: 100%;
}

.subtitled-title::after {
    position: absolute;
    content: "";
    bottom: -4px;
    right: 0;
    left: 0;
    margin: auto;
    height: 3px;
    width: 80px;
    background-color: #e0252e;
    opacity: 0.8;
}

.upperRed {
    color: #e0252e;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
}

.lowerRed {
    color: #e0252e;
    text-transform: capitalize;
    margin-bottom: 0.7rem;
    font-weight: 600;
}
.whiteTitle{
    font-size: 1.55rem;
    font-weight: 500;
}
.styled-tag::first-letter{
    text-transform: capitalize;
}
/* buttons and links */
.btn {
    background-color: #e0252e;
    text-decoration: none;
    text-align: center;
    padding: 0.6rem 0.4rem;
    color: white;
    transition: background-color 0.2s ease-in;
    margin-top: 1rem;
    font-size: 0.8rem;
    font-weight: 400;
}

.btn a {
    text-decoration: none;
    color: white;
}

.btn:hover {
    background-color: white;
    box-shadow: 1px 1px 5px #80808063;
    color: #e0252e;
}

.btn:hover a {

    color: #e0252e;
}

/* background colors*/
.beige {
    background-color: #F3EEE9;
}


/* ---card */
.card {
    width: 27%;
    margin: 1.5rem

}

.card .top iframe {
    max-width: 324px;
    max-height: 200px;
}
.card .top img {
    width: 100%;
    height: 200px;
    object-fit: cover;

}

.card .bottom {
    margin-top: 1rem;
}

.cardInfo {
    font-size: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    height: 30px;
    overflow-y: hidden;
}

.cardTitle {
    color: #545C5C;
    font-weight: 700;
    margin: 0.7rem 0;
    height: 38px;
    overflow: hidden;
}

.cardText {
    font-size: 0.8rem;
    line-height: 1.4rem;;
}
.cardText p{
    margin: 0!important;
    font-style: normal !important;
    font-weight: 400 !important;
}
.cardText strong{
    margin: 0!important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.cardTags .tag a {
    text-decoration: none;
    color: #e0252e;
}

.cardTags .tag {
    color: #e0252e;
}

.cardTags .tag:last-child {
    color: black;
}

.alignment-card{
    height: 0;
}
.readMore {
    max-width: 100px;
}
.cardText{
    height: 63px;
    overflow-y: hidden;
}
.noMedia{
    width: 100%;
    height: 200px;
    background-color: rgb(145, 145, 145);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("/storage/app/public/marie-pierre-monier-senat-logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 50%;
}
/**** no post ****/
.noPost{
    width: 100%;
    text-align: center;
    font-size:1.7rem;
    font-weight: 300;
}
/**** pagination ****/
.paginationContainer{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.paginationContainer nav{
    display: flex;
    width: 100%;
    justify-content: center;
    align-content: center;
}
.paginationContainer .pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.paginationContainer li a{
    text-decoration: none;
    color: inherit;
}
.paginationContainer li{
    color: black;
    width: 30px;
    list-style: none;
}
.paginationContainer li.disabled{
display: none;
}
.paginationContainer li.active{
    color: #e0252e;
}
/* social icons */
#facebook-icon,
#facebook-icon-3,
#instagram-icon,
#instagram-icon-3,
#twitter-icon,
#twitter-icon-3 {
    cursor: pointer;
}
#circle-icon-3,
#circle-icon,
#circle_2-icon-3,
#circle_2-icon,
#circle_3-icon-3 ,
#circle_3-icon {
    transition: all ease 1s;
    transform-origin: center;
    transform-box: fill-box;
}

#facebook-icon-3:hover #circle-icon-3,
#facebook-icon:hover #circle-icon
{
    fill: transparent;
    stroke: #e0252e;
    stroke-width: 2px;
    stroke-dasharray: 10;
    transform: rotate(360deg);
}
#facebook-icon-3:hover #facebook-vector-icon-3,
#facebook-icon:hover #facebook-vector-icon
{
    fill: #e0252e;
}
#instagram-icon-3:hover #circle_2-icon-3,
#instagram-icon:hover #circle_2-icon
{
    transform: scale(1.2);
    fill: #e0252e;
}
#instagram-icon-3:hover #objectif-icon-3,
#instagram-icon:hover #objectif-icon
{
    animation: insta 0.5s ease forwards;
}
@keyframes insta {
    0%,
    100% {
        d: path(
            "M224.056 40.2964C219.801 40.2964 216.349 43.7481 216.349 48.0029C216.349 52.2578 219.801 55.7095 224.056 55.7095C228.31 55.7095 231.762 52.2578 231.762 48.0029C231.762 43.7481 228.31 40.2964 224.056 40.2964ZM224.056 53.002C221.295 53.002 219.057 50.7633 219.057 48.0029C219.057 45.2425 221.295 43.0039 224.056 43.0039C226.816 43.0039 229.055 45.2425 229.055 48.0029C229.055 50.7633 226.816 53.002 224.056 53.002V53.002Z"
        );
    }
    50% {
        d: path(
            "M224 47C219.583 47 216 47.4479 216 48C216 48.5521 219.583 49 224 49C228.417 49 232 48.5521 232 48C232 47.4479 228.417 47 224 47ZM224 48.6487C221.135 48.6487 218.811 48.3582 218.811 48C218.811 47.6418 221.135 47.3513 224 47.3513C226.865 47.3513 229.189 47.6418 229.189 48C229.189 48.3582 226.865 48.6487 224 48.6487V48.6487Z"
        );
    }
}
#twitter-icon-3 #circle_3-icon-3 ,
#twitter-icon #circle_3-icon
{
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
#twitter-icon-3:hover #circle_3-icon-3,
#twitter-icon:hover #circle_3-icon
{
    fill: #e0252e;
    opacity: 1;
}

#vector_4-icon-3 ,
#vector_4-icon
{
    transform-origin: center;
    transform-box: fill-box;
}
#twitter-icon-3:hover #vector_4-icon-3,
#twitter-icon:hover #vector_4-icon
{
    animation: twitter 0.4s linear forwards;
}
@keyframes twitter {
    50% {
        transform: rotateY(180deg);
    }
    75% {
        d: path(
            "M295.591 57.4937C298.369 59.2562 301.601 60.1875 304.939 60.1875C309.826 60.1875 314.305 58.31 317.551 54.9012C320.657 51.6387 322.366 47.255 322.281 42.8062C323.459 41.7987 324.844 39.875 324.844 38C324.844 37.2813 324.064 36.825 323.431 37.1913C322.325 37.8413 321.316 38.0113 320.279 37.72C318.16 35.655 315.006 35.22 312.349 36.6525C310.026 37.9025 308.735 40.19 308.851 42.69C304.927 42.2112 301.302 40.2437 298.775 37.1863C298.36 36.6875 297.572 36.7463 297.242 37.3113C296.025 39.3962 296.037 41.8125 297.096 43.7637C296.592 43.8525 296.281 44.2762 296.281 44.735C296.281 46.6962 297.164 48.4987 298.585 49.7287C298.32 49.9837 298.232 50.3625 298.345 50.7C298.97 52.5775 300.385 54.045 302.154 54.78C300.23 55.6987 298.102 56.005 296.209 55.7725C295.229 55.64 294.745 56.9575 295.591 57.4937ZM305.195 55.1012C305.896 54.5625 305.524 53.44 304.644 53.4212C303.094 53.3887 301.682 52.625 300.804 51.4237C301.227 51.3962 304.226 49.8412 304.644 49.7287C305.595 49.4712 302.99 49.5887 302.024 49.395C300.27 49.0425 308.016 46.235 307.5 44.59C307.971 44.7062 299.329 46.3012 299.807 46.31C300.756 46.315 301.115 45.0987 300.341 44.59C298.597 43.4412 301.463 55.2075 301.956 53.3C305.001 56.385 302.13 58.79 306.5 59C307.126 59.0387 316.332 54.2025 316.195 53.6062C315.601 51.0325 314.651 49.8312 316.195 49C317.722 48.175 314.62 52.0275 316.5 54C317.059 54.5887 321.542 39.805 322.501 39.5812C322.071 40.3912 315.119 43.3312 314.5 43.7637C314.236 43.9487 320.376 42.085 320.392 42.4062C313.5 44.59 319.064 50.595 316.195 53.6062C319.5 40.5 309.309 58.3112 304.94 58.3112C303.202 58.3112 320 44.5 319 44C320.925 43.6275 303.642 56.2962 305.195 55.1012Z"
        );
        fill: #e0252e;
    }
    100% {
        transform: rotateY(180deg);
        d: path(
            "M295.591 57.4937C298.369 59.2562 301.601 60.1875 304.939 60.1875C309.826 60.1875 314.305 58.31 317.551 54.9012C320.657 51.6387 322.366 47.255 322.281 42.8062C323.459 41.7987 324.844 39.875 324.844 38C324.844 37.2813 324.064 36.825 323.431 37.1913C322.325 37.8413 321.316 38.0113 320.279 37.72C318.16 35.655 315.006 35.22 312.349 36.6525C310.026 37.9025 308.735 40.19 308.851 42.69C304.927 42.2112 301.302 40.2437 298.775 37.1863C298.36 36.6875 297.572 36.7463 297.242 37.3113C296.025 39.3962 296.037 41.8125 297.096 43.7637C296.592 43.8525 296.281 44.2762 296.281 44.735C296.281 46.6962 297.164 48.4987 298.585 49.7287C298.32 49.9837 298.232 50.3625 298.345 50.7C298.97 52.5775 300.385 54.045 302.154 54.78C300.23 55.6987 298.102 56.005 296.209 55.7725C295.229 55.64 294.745 56.9575 295.591 57.4937ZM305.195 55.1012C305.896 54.5625 305.524 53.44 304.644 53.4212C303.094 53.3887 301.682 52.625 300.804 51.4237C301.227 51.3962 304.226 49.8412 304.644 49.7287C305.595 49.4712 302.99 49.5887 302.024 49.395C300.27 49.0425 308.016 46.235 307.5 44.59C307.971 44.7062 299.329 46.3012 299.807 46.31C300.756 46.315 301.115 45.0987 300.341 44.59C298.597 43.4412 301.463 55.2075 301.956 53.3C305.001 56.385 302.13 58.79 306.5 59C307.126 59.0387 316.332 54.2025 316.195 53.6062C315.601 51.0325 314.651 49.8312 316.195 49C317.722 48.175 314.62 52.0275 316.5 54C317.059 54.5887 321.542 39.805 322.501 39.5812C322.071 40.3912 315.119 43.3312 314.5 43.7637C314.236 43.9487 320.376 42.085 320.392 42.4062C313.5 44.59 319.064 50.595 316.195 53.6062C319.5 40.5 309.309 58.3112 304.94 58.3112C303.202 58.3112 320 44.5 319 44C320.925 43.6275 303.642 56.2962 305.195 55.1012Z"
        );
        fill: white;
    }
}
/* scroll to Top */
.scrollTop{
    height: 50px;
    width: 50px;
    position: fixed;
    bottom: 2rem;
    right: 1rem;
    background-color: #e0252e;
    border-radius: 50%;
    box-shadow: 5px 5px 5px rgba(3, 3, 3, 0.23),-2px 2px 5px rgba(3, 3, 3, 0.23);
    background-image: url("/storage/app/public/arrowl.png");
    transform: rotate(90deg) translateX(100vh);
    background-size: contain;
    background-repeat: no-repeat;
    cursor:pointer;
    z-index: 1000;
    opacity:0;
    transition: transform 0.7s ease-in;
}
.scrollTop.visible{
    opacity:0.8;
    display: block;
    transform: rotate(90deg) translateY(-5px);
}
.scrollTop:hover{
    right: 1rem;
    opacity: 1;
    animation: bounce 1s ease forwards;
}
@keyframes bounce {
    0%{transform: translate(5px, 0px) rotate(90deg)}
    25%{transform: translate(5px, -5px) rotate(90deg)}
    50%{transform: translate(5px, 0px) rotate(90deg)}
    75%{transform: translate(5px,-5px) rotate(90deg)}
    100%{transform: translate(5px ,0px) rotate(90deg)}
}


/*****************************************************  */
/* navbar */
/*****************************************************  */

.navbar {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 999;
    position: absolute;
    top:0;
    right: 0;
    overflow: hidden;
}

.navbar .container {
    height: 120px;
    padding: 0px 50px 0px 0px;
    width: min(100%, 1600px);
    display: flex;
    align-items: start;
    justify-content: space-around;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar .item {
    flex: 1;
    display: flex;
    align-items: center;
}

.navbar .item:nth-child(1) {
    position: absolute;
    top: 40px;
    right: 30px;
    min-width: 70px;
    height: 31px;
    display: none;
    opacity: 1;
    transition: all 0.3s ease-in;
}

.navbar .item:nth-child(3) {
    flex: 3;
    display: flex;
    justify-content: end;
    transition: all 1s ease-in;
    opacity: 1;
}

.lightTheme .navbar .logo {
    background-image: url("/storage/app/public/marie-pierre-monier-senat-logo-engraisse.png");
    z-index: 100;
}

.navbar .logo, .lightTheme .navbar.fixed .logo {
    transition: transform 0.3s 0.3s ease-in-out;
    height: 120px;
    width: 343px;
    background-image: url("/storage/app/public/marie-pierre-monier-senat-logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 100;
}


.navbar.fixed .logo {

    transform: translateY(-9%) scale(0.7);
}

.hamburger {
    width: 40px;
    height: 31px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: #fffc;
    transform-origin: left;
    transition: all 2s ease;
    display: block;
}

.navbar .list {
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
    color: white;
    font-size: 0.9rem;
    margin-top: 1rem;;
}

.navbar .listItem {
    margin: 15px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    /* overflow-x: hidden; */
}

.navbar .listItem::after {
    position: absolute;
    content: "";
    bottom: -10px;
    right: 0;
    left: 0;
    margin: auto;
    height: 1px;
    background-color: white;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}


.navbar .listItem:hover::after {
    transform: scaleX(1);
    transform-origin: center;
}

.navbar .listItem.active::after, .navbar .listItem.active::before {
    display: none;
}

.navbar .listItem:last-child:hover::before, .navbar .listItem:last-child:hover::after {
    display: none;
}

.navbar .listItem a {
    text-decoration: none;
    color: inherit;
}

/* navbar dark */
.navbar {
    background-color: #e0252e;
}

/*  navbar light */
.lightTheme .navbar {
    background-color: transparent;
    transition: background-color 0.2s ease-in;
}

.lightTheme .navbar.fixed {
    background-color: #e0252e;
}

/* navbar active */
.navbar.active {
    background-color: #e0252e;
    color: white;
}

.navbar.active .hamburger span:first-child {
    transform: rotate(45deg);
    background-color: white;

}

.navbar.active .hamburger span:nth-child(2) {
    opacity: 0;

}

.navbar.active .hamburger span:last-child {
    transform: rotate(-45deg);
    background-color: white;

}

.navbar .listItem.active {
    background-color: white;
    color: #e0252e;
    padding: 0.5rem;
}

/*navbar searchBar*/
.navbar .item.searchBar {
    position: absolute;
    top: -100vh;
    width: 100%;
    transition: all 1s ease-in-out;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: end;
}
.navbar .item.searchBar .top{
    display: flex;
    justify-content: right;

}
.navbar .item.searchBar .bottom{
    display: flex;
    justify-content: right;
    margin-top: 5px;
}
.navbar .item.searchBar .bottom .tag{
    margin: 5px;
    background-color: white;
    border:1px solid white;
    color: #e0252e;
    /*color: #ffffff;*/
    cursor:pointer;
    padding: 5px;
    font-size: 13px;
    transition: all 0.3s ease-in;
}
.navbar .item.searchBar .bottom .tag:hover{
    background-color:  #e0252e;

    color:white;
}
.navbar .item.searchBar input {
    color: white;
    background-color: transparent;
    height: 30px;
    border: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.64);
    margin-right: 10px;
    font-size: 1rem;
    padding-left: 10px;
    width: min(78%,440px);
}
.navbar .item.searchBar input::placeholder {
    opacity: 1;
}
.navbar .item.searchBar input:focus {
    outline: none;
}

#closeSearchBar {
    color: rgba(255, 255, 255, 0.64);
    font-weight: 500;
    font-size: 24px;
    cursor: pointer;
}

.navbar.search .item.searchBar {
    top: 39px;
    opacity: 1;
    right: 25px;
}

.navbar.search .item:nth-child(3) {
    transform: translateY(50vh);
    opacity: 0;
}

.navbar.search .item:nth-child(1) {
    transform: translateY(50vh);
    opacity: 0;
}

.magnifying-glass {
    cursor: pointer;
    margin-right: 10px;
}

/*****************************************************  */
/* footer */
/*****************************************************  */

footer {
    display: flex;
    justify-content: end;
    flex-direction: column;

    width: 100%;
    bottom: 0;
    background-color: white;

}

/* - top */
footer .top {
    padding-top: 100px;
    background-image: url("/storage/app/public/marie-pierre-monier-illustr-senat.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
}

footer .top .itemsWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

footer .top .item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1.5rem;;
}

footer .top .item:nth-child(1) .itemWrapper {
    display: flex;
    align-items: flex-start;
}

footer .top .item:nth-child(1) img {
    width: 80px;
    object-fit: contain;
}


footer .top .item:nth-child(1) .infoWrapper {
    margin-left: 1rem;;
}

footer .top .socialContainer {
    flex-direction: column;
    justify-content: space-around;

}
footer .top .item:nth-child(4){
    display: none;
}


footer .top .item:nth-child(1) img {
    width: 80px;
    object-fit: contain;
}
.footerTitle {
    font-size: 1rem;
    color: #e0252e;
    margin-bottom: 1rem;
}

footer .address {
    font-size: 0.8rem;
    margin: 0.8rem 0;
    font-weight: 600;
    line-height: 1.7rem;
}

footer .tel {
    color: #e0252e;
    font-weight: 500;
    font-size: 0.8rem;
}
.tel a {
    color: inherit;
    text-decoration: none;
}

footer .top .item:nth-child(5) {
    justify-content: center;
}

footer input:focus {
    outline: none;
}

footer input {
    border-radius: 0;;
    border: 1px solid black;
    height: 30px;
    width: 100%;
    padding: 0 10px;
}

footer .btn {
    width: 160px;
    cursor: pointer;
}

/* - bottom */

footer .bottom {
    padding: 0.5rem;
    background-color: #C4B099;
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;

}

footer .bottom .navItem {
    text-align: center;
}

footer .bottom span {

}

footer .bottom span a {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
    word-spacing: 2px;
    transition: all 0.2s ease;;
    position: relative;
}

footer .bottom span.active a {
    font-weight: 800;
}


footer .bottom .navItem a::after {
    position: absolute;
    content: "";
    bottom: -4px;
    right: 0;
    left: 0;
    margin: auto;
    height: 1px;
    background-color: white;
    transition: transform 0.5s ease;
    transform: scale(0);

}

footer .bottom .navItem:hover a::after {
    transform: scaleX(1);
    transform-origin: center;
}

footer .bottom .navItem.active a::after {
    display: none;
}
footer .bottom .auberLogo{
    height: 33px;
    width: 173px;
    background-image: url("/storage/app/public/agnes-auber-logo.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0;;
}
/*****************************************************  */
/* smartMenu */
/*****************************************************  */
.smartMenu {
    width: 100vw;
    height: 100vh;
    background-color: #e0252e;
    position: fixed;
    top: 0px;
    right: -100vw;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 1s ease;
    color: white;
}

.smartMenu.active {
    right: 0;
}

.smartMenuWrapper {
    width: 95%;
    padding: 0.7rem;;

}

.smartMenu .list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 30px;
    font-weight: 300;
    width: 60%;
}

.smartMenu .listItem {
    margin-bottom: 25px;

}

.smartMenu .listItem a {
    font-size: 1.2rem;
    color: inherit;
    text-decoration: none;
}

.smartMenu .listItem.active {
    background-color: white;
    color: #e0252e;
    padding: 0.5rem;
}

/*****************************************************  */
/* Pages */
/*****************************************************  */

/*-----------  */
/* -home */
/*-----------  */


/* --hero container */

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

}

.homeHeroWrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /*width: min(100vw, 1400px);*/
    /*height: min(500px,80vh);*/
    width: 100vw;
    max-height: 540px;
}

.homeHeroWrapper img {
    /*max-height: 100%;*/
    max-width: 100%;


}

.portraitImg {
    flex: 1;
    max-width: 36vw !important;
    object-fit: cover !important;
    max-height: 100%;
}

.homeHeroWrapper .sliderContainer {
    flex: 5;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.sliderIndexes {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.sliderIndexes span {
    background-color: rgba(255, 255, 255, 0.45);
    width: 10px;
    height: 10px;
    margin: 0 0.5rem;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 1px 1px 1px #72727282, -1px 1px 1px #3b3b3b70, -1px -1px 1px white, 1px -1px 1px #ffffff94;;
}

.sliderTextWrapper {
    position: absolute;
    margin: auto;
    margin-top: inherit;
    top: 0;
    bottom: 30%;
    left: 0;
    right: 0;
    width: min(90%, 850px);
    max-height: 60%;
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.sliderText {

    font-size: clamp(1.3rem, 2.1vw, 2.3rem);
    color: white;
    text-shadow: 1px 1px 5px #4b4b4b69, -1px 1px 5px #4b4b4b8f, 1px -1px 5px rgba(91, 91, 91, 0.29), -1px -1px 5px rgba(75, 75, 75, 0.66);
    font-weight: 600;
    text-align: center;
    transform: translateY(-100vh);
    opacity: 0;
    transition: all 1s 0.5s ease-in-out;
}

.sliderText.appear {
    transform: translateY(0);
    opacity: 1;
}

.sliderIndexes span.active {
    background-color: white;
}

.arrowContainer {
    position: absolute;
    width: min(85px, 20%);
    height: 20%;
    top: 0;
    bottom: -55%;
    margin: auto;
    cursor: pointer;
    z-index: 2;
    opacity: 0.7;
}

.sliderWrapper {
    position: relative;
    height: 100%;
    display: flex;
    transition: all 1.5s ease-in-out;
}

.sliderImgContainer {
    width: 100%;
    max-height: 100%;
    position: relative;
    overflow-y: hidden;
}

.sliderImgContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}


/* --actus container */

.actusContainer {
    margin: 2rem 0;
    overflow-x: hidden;
    max-width: 99%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.actusWrapper {
    margin: 1rem 0;
    width: min(1200px, 100%);
    padding: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    justify-content: center;
    position: relative;
}

/* --counters container */

.countersContainer {
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("/storage/app/public/marie-pierre-monier-senat.jpg");
    background-position: 50%, 15%;
    background-repeat: no-repeat;
    flex-direction: column;
    color: white;
    padding: 2rem;
}

.countersContainer h2 {
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.322), 1px 1px 10px rgba(0, 0, 0, 0.459), -1px 1px 10px rgba(0, 0, 0, 0.445), -1px -1px 10px rgba(0, 0, 0, 0.315);
}

.countersWrapper {
    width: min(100%, 1400px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    flex-wrap: wrap;
}
.counterRow{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

}

.counterItem {
    background-color: rgba(0, 0, 0, 0.562);
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 1rem;
    width: 255px;
}

.countup {
    font-size: 4rem;
    font-weight: 500;
}

.counterText {
    font-size: 0.7rem;
    font-weight: 800;
}


/*---------------  */
/* - qui suis-je ? */
/*---------------  */
.aboutContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.secondaryPageContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.secondaryPageContainer h2 {
    color: #545C5C;
}

.aboutHeroContainer{
    background-image: url("/storage/app/public/marie-pierre-monier-senat-mon-engagement.jpg");
    background-position-y: 42%;
    background-position-x: 78%;
}

.commitmentContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.commitmentContainer br {
    margin-bottom: 1.5rem;
}

.commitmentContainer .text {
    margin-top: 2rem;
    max-width: min(100%, 1019px);
    text-align: justify;
    font-size: 15px;
    line-height: 1.6rem;
}

.commitmentContainer .signature {
    text-align: right;
    margin-top: 2rem;
    padding-right: 10px;
    font-size: 14px;
    color: #e0252e;

}
.functionsContainer{
    margin-top: 5rem;
}
.functionsWrapper {
    display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.functionItem::after{
    position: absolute;
    content: "";
    right: 0;
    height: 70px;
    width: 2px;
    background: #e0252e;
    bottom: 18px;
}

 .functionItem:nth-child(3)::after,  .functionItem:nth-child(6)::after,.functionItem:nth-child(9)::after  {
    display: none;
}

.functionItem {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 250px;
    position: relative;
}

.functionItem img {
    width: 200px;
    object-fit: contain;
}

.functionItem .text {
    text-align: center;
    font-weight: 500;
    color: #474747;
}


.listContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.listWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.listRectangle {
    margin: 1.5rem 0 2rem;
    min-height: 300px;
    width: 100%;
    background-color: rgba(250, 128, 114, 0.63);
}

.listWrapper .text {
    text-align: center;
    width: min(100%, 780px);
    font-size: 0.85rem;
    line-height: 1.7rem;
    font-weight: 500;
    color: #3e3d3d;
}
/*--------------  */
/* - Archive */
/*--------------  */
.archiveContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    min-height: calc(100vh - 200px);
}


/*--------------  */
/* - Single */
/*--------------  */

.singleContainer{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: min(1180px, 100%);
    margin: auto;
    padding: max(3%,2rem);
    overflow: hidden;
    position: relative;
}
.singleContainer h1{
    text-align: left;
    padding: 0 1.2rem 2rem 0;
    line-height: 3rem;
}
.singleContainer .tagsWrapper{
    max-width: 300px;
}
.singleContainer .tag{

    font-size: 13px;
    font-weight: 500;
    color: #e0252e;
}
.singleContainer .landscapeMediaWrapper span,
.singleContainer .portraitMediaWrapper span,
.singleContainer .noMediaWrapper span
{
    color:#e0252e ;
}
.singleContainer .tag a{
    text-decoration: none;
    color: inherit;
}
.singleContainer .landscapeMediaWrapper span:last-child,
.singleContainer .portraitMediaWrapper span:last-child,
.singleContainer .noMediaWrapper span:last-child{
    display: none;
}
.singleContainer .date{
 margin:20px 0;
    font-weight: 600;
}
.singleContainer .textWrapper{
    text-align: justify;
    font-size: 0.95rem;
    line-height: 1.6rem;
    color: #1f1f1f;
}
.fb-share-button span:last-child {
    display: block;
}

.landscapeMediaWrapper,.portraitMediaWrapper{
    margin-bottom: 50px;
}.landscapeMediaWrapper{
     width: 100%;
}
 .landscapeMediaWrapper .imgWrapper{
     max-height: 425px;
     max-width:min(1180px, 100%);
     overflow: hidden
 }
.landscapeMediaWrapper img{
   object-fit: cover;
    object-position: center;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    transform: translateY(-14%);
}
.portraitMediaWrapper{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.portraitMediaWrapper .left{
    flex:1;
}
.portraitMediaWrapper .right{
    flex:1;
}
.portraitMediaWrapper .imgWrapper{
    max-height: 425px;
    width: 100%;
    display: flex;
    justify-content: right;
    overflow: hidden;
}
.portraitMediaWrapper img{
    object-fit: cover;
    object-position: center;
    max-width: 100%;
    max-height: 100%;

}
.singleContainer .socialContainer{
    margin-bottom: 1rem;
}
.similarPostWrapper{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 5rem;
}
.fb-share-button span, .fb-xfbml-parse-ignore{display: block!important;}
/*--------------  */
/* - En Drôme */
/*--------------  */
.dromeHeroContainer{
    background-image: url("/storage/app/public/marie-pierre-monier-sur-le-terrain-en-drome.jpg");
    background-position-y: 18%;
}
/*-------------  */
/* - Au Sénat */
/*-------------  */
.senatHeroContainer{
    background-image: url("/storage/app/public/marie-pierre-monier-au-senat.jpg");
    background-position-y: 17%;
}
.aboutSenatContainer{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: min(1200px, 100%);
    padding: 0 4rem;
    margin-bottom: 3rem;
}
.aboutSenatContainer .left{
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: start;
    margin: 0;
    max-width:780px ;

}
.aboutSenatContainer .right{
    flex: 1;
    margin: 0;
    padding: 0;

}
.aboutSenatContainer .left h2{
    width: max-content;
    padding-left:0 ;
}
.aboutSenatContainer .text{
    font-size: 0.95rem;
    line-height: 1.6rem;
    color: #1f1f1f;
    padding: 1rem 4rem 0 0;
}
.articleQuote{
    margin-left: auto;
    margin-right: 86px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 1rem;
    color: #e0252e;
}

.moreAboutSenatWrapper{
    cursor: pointer;
    border-radius: 15px;
    background: #e0252e;
    height: 100%;
    padding: 1rem 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
.moreAboutSenatWrapper .noSubtitledTitle{
    color: #CACFD8;
    text-decoration: none;
}
.moreAboutSenatWrapper:hover #seeMoreArrow{
    animation: goLeft 0.2s ease forwards;
}
@keyframes goLeft {

    to{
        transform: translateX(10%);
    }
}
/*-----------------  */
/* - Communication */
/*-----------------  */
.communicationContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.communicationHeroContainer {
    background-image: url("/storage/app/public/marie-pierre-monier-merindol-drome-auber.jpg");
    background-position-y: 17%;
}
.mediasContainer, .communiquesContainer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.mediasContainer .subtitled-title,.communiquesContainer .subtitled-title{
    position: relative;

}
.linkMedias,.linkCommuniques{
    position: absolute;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    color: #e0252e;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    top: 13px;
    transition: all 0.1s ease-in;
}
.linkMedias  span,.linkCommuniques  span{
    position: relative;
}
.linkMedias span::after,
.linkCommuniques span::after{
    position: absolute;
    content: "";
    bottom: -10px;
    right: 0;
    left: 0;
    margin: auto;
    height: 1px;
    background-color: #e0252e;
    transform: scaleX(0);
    transition: transform 0.5s ease;
}
 .linkMedias:hover span::after,
.linkCommuniques:hover span::after {
    transform: scaleX(1);
    transform-origin: center;
}
.linkMedias:hover #seeMoreArrow1,.linkCommuniques:hover #seeMoreArrow2{
    animation: goLeft 0.2s 0.5s ease forwards;
}
.linkCommuniques.sm, .linkMedias.sm{
    display: none;
}
.communiquesContainer .cardTitle, .mediasContainer .cardTitle{
    max-width: 252px;
}
.mediasContainer .cardInfo{
    height: 32px;
    overflow-y: hidden;
}
.communiquesContainer .cardInfo{
    height: 30px;
    overflow-y: hidden;
    margin-bottom: 0.2rem;
}

.newsletterContainer{
    max-width: min(580px,100vw);
    background-color: #e0252e;
    color: white;
    margin: 1rem 20px
}
.newsletterContainer .top img{
    object-fit: contain;
    width: 100%;
    object-position: center;
}
.newsletterContainer .bottom{
    overflow: hidden;
    position: relative;
}
.newsletterWrapper {
    display: flex;
    align-items: baseline;
    transition: all 1.5s ease-in-out;
}
.newsletterContent{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.newsletterContent .controls{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top:1rem;
}
.newsletterContent .controls .date{
    color: black;
    font-size: 13px;
    height: 65px;

}
.newsletterContent .arrowContainer{
    width: 52px;
    height: 60px;
    margin: 0;
}
.newsletterContent .arrowContainer img{
max-height: 55px;
}
.newsletterContent .summary{
    text-align: justify;
    line-height: 27px;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    height: 190px;
    overflow-y: hidden;
}
.btnNewsletter{
    border: 1px solid white;
    padding: 0.8rem 2rem;
    border-radius: 4px;
    font-weight: 300;
}
.newsletterIndexes{
    position: absolute;
    bottom: 11px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.newsletterIndexes .indexController{
    background-color: white;
    width: 8px;
    height: 8px;
    margin: 0 0.5rem;
    cursor: pointer;
    border-radius: 50%;
}
.newsletterIndexes .indexController.active{
    background-color: rgb(104, 104, 104);
}
/*---------------------  */
/* - Contact & Èquipe */
/*---------------------  */
.contactHeroContainer {
    background-image: url("/storage/app/public/marie-pierre-monier-vinsobres-vignoble-drome-auber.jpg");
    background-position-y: 26%;
}

.contactContainer {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.contactWrapper {
    display: flex;
    justify-content: space-around;
    margin: 2rem 1rem;
    flex-wrap: wrap;
}

.contactItem {
    padding: 1rem 1rem 2rem;
}

.contactItem .address, .contactItem .mail, .contactItem .tel {
    line-height: 1.7rem;
    font-weight: 400;
}

.contactItem .address {
    margin-bottom: 0.6rem;
}

.teamContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 0.1rem;
}

.teamWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.teamItem {
    margin: 2rem 1rem 1rem 1rem;
}

.teamWrapper img {
    object-fit: cover;
    height: 250px;
    width: 200px;
    margin-bottom: 1.2rem;
    filter: grayscale(100%);
}

.teamItem .city {
    text-transform: uppercase;
    margin-top: 0.2rem;
}

/*-----------------  */
/* - Search Page */
/*-----------------  */
.searchContainer{
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/*---------------  */
/* -    404   */
/*---------------  */
.errorContainer{
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
}
/*****************************************************  */
/* Media queries */
/*****************************************************  */

.textPage {
    margin-top: 2rem;
    max-width: min(100%, 1019px);
    text-align: left;
    font-size: 15px;
}
.textPage .text{
    padding: 2rem 2rem 0 0;
}
.textPage .text ul{
    padding-left: 40px;
}
.singleContainer .textWrapper ul{
    padding-left: 40px;
}

.bandeau-cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #ffe080;
    /*color: #ffffff;*/
    z-index: 5000;
    padding: 10px;
    opacity: 1;
    width: 40%;
    font-size: 0.8rem;
}

@media screen and (max-width: 1200px) {
    /*navbar */
    .navbar .container {
        padding: 0px 10px 0px 0px;
        align-items: center
    }

    .navbar .list {
        font-size: 0.85rem;
        margin-top: 0;
    }
}

@media screen and (max-width: 1188px) {
    /* footer */
    footer .top .item:nth-child(1),  footer .top .item:nth-child(3){
        min-width: 40%;
    }
    footer .top .item:nth-child(5){
        min-width: 100%;
    }
    footer .top .item:nth-child(2){
        display: none;
    }
    footer .top .item:nth-child(4){
        display: flex;
        flex-direction: row;
        width: min(100%,400px);
    }
    /* page qui-suis je   */

    .commitmentContainer{
        padding: 1rem;
    }
    .commitmentContainer .text{
        padding:0 1rem;
    }
    /* communication   */
    .actusWrapper{
        padding-bottom: 3rem;
        overflow-y: clip;
    }
    .linkMedias.lg,.linkCommuniques.lg{
        display: none;
    }
    .linkMedias.sm,.linkCommuniques.sm{
        display: flex;
        left: 0;
        bottom: 0px;
        top:unset;
    }
}

@media screen and (max-width: 992px) {
    /* navbar */
    .navbar .container {
        align-items: center;
    }
    .navbar .item:nth-child(1) {
        display: flex;
    }
    .navbar .item:nth-child(3) {
        display: none;
    }
    .navbar  .item:nth-child(2) {
        flex: 3;
    }

    .card {
        width: 40%;
    }

    /* slider */
    .portraitImg {
        display: none;
    }

    .homeHeroWrapper .sliderContainer {
        flex: auto;

    }
    /* about page  */
    .functionsWrapper{
        grid-template-columns: 1fr 1fr;
    }
    .functionItem{
        font-size: 14px;
    }
    .functionItem:nth-child(3)::after{
      display: block;
    }

    .functionItem:nth-child(even)::after  {
        display: none;
    }
    /* Sénat   */
    .aboutSenatContainer{
        padding: 2rem 1rem;
    }
    .aboutSenatContainer .left{
        flex:100%;
        align-items: center;
    }
    .aboutSenatContainer .text{
        padding: 1rem 0 0 0;
        text-align: justify;
    }
    .articleQuote{
        margin-right: 30px;
    }
  .aboutSenatContainer .right{
        flex:100%;
        max-width: min(100%, 300px);
        margin-top: 3rem;

    }
    .bandeau-cookies {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    /* sliders */
    .homeHeroWrapper{
        height: 75vh;
    }
    /* cards */
    .card {
        width: 100%;
    }
    .cardText{
        text-align: justify;
    }
    /* communication   */
    .actusWrapper{
        padding-bottom: 0;

    }
    .communiquesContainer .cardInfo, .mediasContainer .cardInfo{
        height: auto;
        overflow-y: hidden;
    }
    .communiquesContainer .cardTitle, .mediasContainer .cardTitle{
        max-width: unset;
        height: auto;
        text-align: justify;
    }
    .communiquesContainer .cardText, .mediasContainer .cardText{
               text-align: justify;
    }
}

@media screen and (max-width: 726px) {
    /* navbar */
    .navbar.search .logo {
        transform: translateY(30vh);
        opacity: 0;
    }
    /* about page  */
    .functionsWrapper{
        display: flex;
        flex-direction: column;
    }
    .functionItem {
        justify-content: end;
        margin-top: 30px;
    }

    .functionItem::after {
        bottom: -34px;
        right: 0;
        left: 0;
        margin: auto;
        height: 3px;
        width: 80px;
    }

    .functionItem:nth-child(even)::after {
        display: block;
    }
    /* single   */
    .landscapeMediaWrapper img {
         transform: translateY(0%);

    }
    .portraitMediaWrapper{
        flex-direction: column;
    }
    .portraitMediaWrapper .right{
        margin-top: 30px;
    }
}

@media screen and (max-width: 576px) {
    /* navbar */
    .navbar .item .logo {
        max-width: calc(100vw - 120px );
        background-size: contain;
    }
    .navbar.search .item.searchBar {
        top: 21px;
    }
    .navbar .item.searchBar .bottom .tag {
        font-size: 13px;
        padding:5px;
        margin:4px;
    }
    .navbar.search .item.searchBar {
        right: 15px;
    }
    /* -home */
    .countersWrapper {
        flex-direction: column;
    }


}