:root{
    --bar-height:72px;
    --areatext: some_value;
}
body{
    margin :0;
    font-family: 'Georgia', serif;
    background: white;
    position: relative;
    min-height: 100vh;
}
main{
    padding-top: var(--bar-height);
    padding-bottom: 15rem;
}
.bold{
    font-weight: 700;
    font-style: italic;
}
.centered {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80%;
    z-index: 1;
    font-weight: normal;
    text-shadow: -1px  1px 0 #000,
    1px  1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}
.centering{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}
/*--------------------En-tête--------------------*/

.barre{
    position: fixed;
    background-color: #8b8b8b;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--bar-height);
    /*box-shadow: 0 10px 30px 0 rgba(80, 87, 91, 0.25); */
    transition: background-color 0.5s ease;
}
.barre--bg{
    background: #393c3f;
    transition: background-color 0.5s ease;
}
.barre__contenu{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.barre__logo{
    width: var(--bar-height);
    position: relative;
    right: 12px;
}
.contact__link{
    font-size: 1em;
    text-decoration: none;
    color: #ffffff;
    padding-right:5px ;
    transition: all .7s cubic-bezier(.215,.61,.355,1);
}
.contact__link:hover, .contact__link:active {
    opacity: 0.7;
    transition: all .7s cubic-bezier(.215,.61,.355,1);
}
#tel__logo{
    width: 22px;
    height: 22px;
    position: relative;
    top: 6px;
}
#mail__logo{
    width: 30px;
    height: 21px;
    position: relative;
    top: 6px;
}
.bar__nav-toggle{
    cursor: pointer;
    left: 5px;
}
.bar__nav-toggle >i{
    color: #ffffff;
    font-size: 2em;
}
.bar__nav-toggle:hover, .bar__nav-toggle:active{
    background-color: #4f5358;
    transition : all 0.2s ease-out;
    border-radius: 4px;
}
#inpNavToggle{
    display:none;
}
#inpNavToggle:checked ~.nav{
    display:flex;
}
.nav{
    display: none;
    flex-direction: column;
    position: fixed;
    top: var(--bar-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--bar-height));
    background: #393c3f;
    padding: 10px 32px 32px;
    opacity: 0.92;
    box-sizing: border-box;
}
.nav__link{
    font-weight: 500;
    padding: 16px 12px;
    text-decoration: none;
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    transition: all .3s cubic-bezier(.215,.61,.355,1);
}
.nav__link:hover, .nav__link:active{
    opacity: 0.7;
    padding-left: 16px;
    transition: all .3s cubic-bezier(.215,.61,.355,1);
}
.nav__link:after {
    display: none;
}
.active {
    background-color: #E74C7F;
    color: white;
    padding : 16px ;
    border-radius: 2px;
    border-bottom: none ;
    opacity: 1;
    text-decoration: none;
    transition: all .3s cubic-bezier(.215,.61,.355,1);
}
/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../images/menu.woff2) format('woff2');
    font-display: swap;
}

.material-icons {
    font-family: 'Material Icons', serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}
/*--------------------Pieds de page--------------------*/

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background-color: #272728;
    padding: 15px 0;
    font-size: 0.8em;
    color: #8b8b8b;
}
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-container img {
    max-height: 70px;
    margin: 10px 10px 30px;
}
#logo__footer{
    width: 100px;
    position: relative;
    bottom: 15px;
}
.nav__link__foot{
    font-weight: 500;
    padding: 0 20px;
    text-decoration: none;
    color: #ffffff;
}
.nav__link__foot:hover, .nav__link__foot:active{
    opacity: 0.7;
    transition: all .3s cubic-bezier(.215,.61,.355,1);
}
.logo_IRVE__foot{
    max-height: 93px;
}
.text__foot{
    padding-right: 20px;
}

/*--------------------Accueil--------------------*/
.fond{
    background-image: url("../images/photo_index.jpg");
    min-height: 100vh;
    background-attachment: fixed;
    background-position: top ;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    bottom:10px;
    text-align: center;
    font-size: 5em;
    filter: grayscale(100%);
    transition: filter .9s ease-in-out;
}
.fond:hover, .fond:active{
    filter: grayscale(0);
}
.index_title{
    color: #E74C7F
}
.cadrage{
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translate(-50%, +50%);
    text-shadow: -1px  1px 0 #000,
    1px  1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}
.cadre{
    background:transparent;
    backdrop-filter: blur(5px);
    border-radius:10px;
    color:white;
    font-size: 60%;
    text-decoration: none;
    border: 2px solid white;
}
.cadre:hover, .cadre:active{
    font-size: 64%;
}

/*--------------------A propos--------------------*/

.fond_a_propos{
    padding-bottom: 35px;
    background-image: url("../images/photo_a-propos.jpeg");
    min-height: 100vh;
    background-position: top ;
    background-repeat: no-repeat;
    background-size: cover;
}
.texte_a_propos {
    position: relative;
    top: 20px;
    width: 60%;
    max-width: 600px;
    min-width: 350px;
    border-radius:10px;
    backdrop-filter: blur(5px);
    border: 2px solid white;
    color: white ;
    text-shadow: -1px 1px 0 #000,
    1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}
.histoire{
    text-align: left;
    text-indent: 20px;
}
.encadré__title{
    margin-top: 0;
    padding-top: 0;
}
.conclusion{
    font-size: 1.6em
}
/*--------------------Activités--------------------*/
.text__activities{
    color: white ;
}
.title__activities{
    font-size: 3em;
    line-height: 0;
    font-weight:400;
}
.back{
    background: linear-gradient( black 50%, white 90%);
}
.grid__activities{
    overflow: hidden;
    display: block;
    margin: 5px auto;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3,400px) repeat(1, 90px);;
    grid-template-areas:
      "text_elec img_elec  "
      "img_clim text_clim  "
      "text_irve img_irve  "
      "fournisseur fournisseur "
      "fournisseur_2 fournisseur_2 "
      "fournisseur_3 fournisseur_3 ";
}
#text_elec{
    grid-area: text_elec;
    align-self: center;
}
#img_elec{
    grid-area: img_elec;
    align-self: center;
    justify-self: center;
    margin-left: 10%;
}
#text_clim{
    grid-area: text_clim;
    align-self: center;
}
#img_clim{
    grid-area: img_clim;
    justify-self: center;
    align-self: center;
    margin-left: 10%;
}
#text_irve{
    grid-area: text_irve;
    align-self: center;
}
#img_irve{
    grid-area: img_irve;
    align-self: center;
    margin-left: 10%;
}
#fournisseur{
    grid-area: fournisseur;
    align-self: center;
}
#fournisseur_2{
    grid-area: fournisseur_2;
    align-self: center;
}
#fournisseur_3{
    grid-area: fournisseur_3;
    align-self: center;
}
.link_activities{
    text-decoration: none;
    color: #ffffff;
    font-size: 1.5em;
}
.link_activities:hover, .link_activities:active{
    color: #8b8b8b;
}
#img_clim, #img_irve, #img_elec {
    width: 80%;  /* adjust width as needed for smaller screens */
    /* height, object-fit, margin, and display rules remain the same */
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}
.carousel img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* or cover */
}
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 5vw;  /* Set width relative to the viewport width */
    height: 5vw; /* Set height relative to the viewport width */
    min-width: 20px;
    min-height: 20px;
    max-width: 60px;
    max-height: 60px;
    z-index: 10;
    border-radius: 50%;
    color: transparent;  /* make the text transparent */
}
.slick-prev {
    left: 1vw;
    background: url('../images/icon-left-arrow-button.svg') no-repeat center center;
    background-size: contain;
}
.slick-next {
    right: 1vw;
    background: url('../images/icon-right-arrow-button.svg') no-repeat center center;
    background-size: contain;
}

/*--------------------Réalisations--------------------*/

.tile {
    width: 33%; /* 3 colonnes */
}
.tile img {
    width: 98%;
    height: auto;
}
.hidden {
    display: none;
}
.fancybox-caption img {
    max-width: 100%;
    max-height: 150px; /* Adjust as needed */
    display: block;
    margin: 0 auto; /* Center the caption image */
}
.photo-grid img{
    transition: opacity .5s ease-in-out;
}
.photo-grid img:hover,.photo-grid img:active{
    opacity: 0.5;
    transition: opacity .5s ease-in-out;
}
/*--------------------Contact--------------------*/

.titre{
    font-size: 1.9em;
    border-bottom: 1px solid #3f3f3f ;
    font-weight: normal;
}
.container {
    background-image: url("../images/photo_contact.jpg");
    min-height: 150px;
    background-position: top ;
    background-repeat: no-repeat;
    background-size: auto 255px;
    position: relative;
    text-align: center;
    color: rgb(243, 243, 243);
    font-size: 5em;
}
.container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(139, 139, 139, 0), #8b8b8b);
}

strong{
    color: #E74C7F;
}
input::placeholder,textarea::placeholder,.font__text {
    font-family: 'Georgia', serif;
}
textarea, input[type="text"], input[type="email"],input[type="tel"]{
    width:80%;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: rgb(200, 200, 200);
    padding: 12px ;
}
textarea:focus,input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus {
    background-color: rgb(238, 238, 238);
    transition: color 0.4s ease-in-out;
}
input[type="checkbox"],input[type="radio"] {
    position: relative;
    top: 5px;
    transform: scale(1.2);
    margin: 5px;
    cursor: pointer;
    appearance: none;
    border-radius: 50%;
    height: 12px;
    width: 12px;
    background: white;
    transition: 0.1s all ease-out;
    outline: 2px solid #8b8b8b;
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: #4f5358;
    border: 2px solid#ffffff;
    outline-color: #4f5358;
}
input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover {
    opacity: 0.7;
}
input[type="checkbox"]:hover, input[type="radio"]:hover {
    outline-color: #4f5358;
    transition: none;
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
    outline: 2px solid #4f5358;
}
input[type=""], input[type="submit"]{
    width: 100px;
    height: 30px;
}
#coordonne{
    grid-area: header;
    max-width: 300px;
}
.days{
    list-style-type: none;
}
.contact{
    color: #000000;
}
.box{
    position: relative;
    bottom: 25px;
    width: 250px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, black 0%, black 5%, transparent 55%);
    border-image-slice: 1;
}
.no_bottom{
    border-bottom: none;
}

#title__contact{
    grid-area: titre;
}
#case_1{
    grid-area: case_1;
    align-self: center;
}
#case_2{
    grid-area: case_2;
    align-self: center;
}
#case_3{
    grid-area: case_3;
    align-self: center;
}
#case_4{
    grid-area: case_4;
    align-self: center;
}
#case_5{
    grid-area: case_5;
    align-self: center;
    width: auto;
}
#case_6{
    grid-area: case_6;
    align-self: center;
}
#case_7{
    grid-area: case_7;
    align-self: center;
}
#case_8{
    justify-self: start;
    grid-area: case_8;
}
#case_9{
    grid-area: case_9;
}
#case_10{
    grid-area: case_10;
}
#case_11{
    grid-area: case_11;
    align-self: center;
}
#case_12{
    grid-area: case_12;
    align-self: center;
}
#case_13{
    grid-area: case_13;
}
#case_14{
    grid-area: case_14;
    align-self: center;
}
#case_15{
    grid-area: case_15;
    justify-self: end;
}
.place{
    margin: 10px;

}
.clim_elec{
    position: relative;
    bottom: 0;
}
.sub_clim{
    position: relative;
    left:20px;
    top:5px;
}
#map{
    grid-area: map;
    width:100%;
}
#case_13{
    position: relative;
    margin-bottom: 20px;
    top: 15px;
    font-family: 'Arial', sans-serif;
    max-width: 82%;
    left: 0;
}
#case_13 li, #case_13 div > p {
    background: white;
    display: block;
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
    border: 1px solid #8b8b8b;
    font-size: 0.8em;
    border-radius: 4px;
}
#case_13 p {
    line-height: 25px;
    padding: 0 10px;
}
#case_13 ol {
    padding-left: 0;

}
#case_13 label {
    background-color: rgb(220, 220, 220);
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid rgb(150, 150, 150);
    font-size: 0.8rem;
    cursor: pointer;
    display: block;
}
#case_13 label:hover, #case_13 label:active {
    background-color: rgb(180, 180, 180);
    border-color: rgb(130, 130, 130);;
}
#doc_uploads {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
#doc_uploads:focus + label {
    outline: 2px solid #4f5358 !important;
    background-color: #e0e0e0; /* or any other noticeable color */
}
#reCaptcha{
    grid-area: reCaptcha;
    align-self: center;
}
.error {
    border: 2px solid red;
}
.grid {
    position: relative;
    bottom: 40px;
    overflow: hidden;
    --aeratext:100px;
    display: block;
    margin: 5px auto;
    padding:0 ;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(7, 100px) var(--areatext) repeat(3, 100px);
    grid-template-areas:
      "header titre titre "
      "header case_1 case_2 "
      "header case_3 case_4 "
      "header case_5 case_5 "
      "header case_6 case_7 "
      "header case_8 case_8 "
      "map case_9 case_10 "
      "map case_11 case_11 "
      "map case_12 case_13 "
      "map case_14 case_14 "
      "map reCaptcha case_15 ";
}
.input_text__contact{
    display: block
}
.info__contact{
    margin:7px;
}
.schedules__contact{
    padding :5px;
}
.object_text__contact{
    position: relative;
    bottom: 3px;
}
textarea{
    max-width: 80%;
    min-width: 20%;
    font-family: Arial, serif;
}
.link_legal_mention__contact{
    color: #000000;
    padding: 0;
    font-weight: 500;
    text-decoration: none;
}
.map{
    border:0
}
.last_comment{
    display:none;
}
/*--------------------Mention légales--------------------*/

.gros_titre{
    font-size: 2.5em;
    font-weight:400;
}



/*--------------------Responsive(à harmoniser)--------------------*/
@media screen and (min-width: 1100px) {

    .bar__nav-toggle{
        display:none;
    }
    .nav{
        display: initial;
        position: static;
        width:unset;
        height: unset;
        padding: unset;
        background: transparent ;
    }
    .nav__link  {
        border-bottom: none;
        transition: all 300ms linear;
    }
    .nav__link:hover{
        padding-left: 12px;
        padding-right: 12px;
        border-bottom: solid 1px #ffffff;
        transition: all .3s cubic-bezier(.215,.61,.355,1);
    }

}
@media screen and (min-width: 840px) {
    .grid__activities {
        display: grid;
    }
    .texte_a_propos {
        top: 50px;
        bottom: 0;
    }
    #img_clim, #img_irve, #img_elec {
        width: 80%;  /* reduce width to 50% */
        height: auto;  /* maintain aspect ratio */
        object-fit: contain;  /* ensure the entire image is visible */
        margin: 0 auto;  /* center the image horizontally */
        display: block;  /* required for using margin auto for centering */
    }
}
/* Pour tablettes */
@media screen and (min-width: 767px) {
    .grid {
        display: grid;
    }

    #case_5{
        width: 109%;
    }
    #map{
        width:80%;
    }
    #case_13 ol {
    }
    .place{
        margin:15px  ;
    }
    .container {
        background-size: cover;
        min-height: 300px;
    }
    .centered{
        font-size: 100%;
    }

}

@media screen and (max-width: 500px) {
    .contact__link{
        font-size: 0.9em;
    }
    #tel__logo{
        width: 17px;
        height: 17px;
        position: relative;
        top: 3px;
    }
    #mail__logo{
        width: 21px;
        height: 13px;
        position: relative;
        top: 3px;
    }
    .barre--bg #mail__logo{
        position: relative;
    }

}

@media screen and (min-width: 571px) {
    #case_13 p{
        bottom: 0;
    }
    li{
        bottom: 0;
    }
}

/* For tablets */
@media (max-width: 768px) {
    .tile {
        width: 50%; /* 2 columns */
    }
}

/* For mobile devices */
@media (max-width: 480px) {
    .tile {
        width: 100%; /* 1 column */
    }
    .contact__link{
        display: none;
    }
    #tel__logo{
        position:relative ;
        right:10px;
        width: 35px;
        height: 35px;
    }
    #mail__logo{
        width: 40px;
        height: 24px;
    }
}

@media (orientation: landscape)and (max-width: 900px) {
    .index_title{
        top:20%;
        font-size: 70%;
    }
}
@media (max-width: 350px) {
    .index_title{
        top:20%;
        font-size: 70%;
    }
}