@font-face {
font-family: "Rage Italic";
src: url("font/Rage Italic.ttf");
}

@font-face {
font-family: "Arial Regular";
src: url("font/Arial light.ttf");
}

@font-face {
font-family: "Arial Bold";
src: url("font/Arial Extra Bold.otf");
}


/*fonction du body*/
* {
    margin: 0;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

.present {
    font-family: "Arial Bold";
}

h1, h2, h3{
	font-weight : 400;
}


/*page d'accueil image du background*/
@media (min-width: 1255px) {
    .rectangle .bg img {
        display: block;
        margin-top: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
    }

    .container1 .rectangle .bg2 img {
		display : none;
    }
}

@media (min-width: 780px) and (max-width: 1255px) {
    .rectangle .bg img {
        display: block;
        margin-top: 0;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
    }

    .container1 .rectangle .bg2 img {
		display : none ;
    }
}

@media (min-width: 10px) and (max-width: 780px) {
    .rectangle .bg img {
		display: none;
    }

    .container1 .rectangle .bg2 img {
        width: 100vw;
    }
}

/*menu*/
@media (min-width: 1255px) {
	.menu {
        z-index: 100;
    }

    .menu ul {
        margin-left: 20%;
        position: absolute;
        padding-top: 3vh;
        list-style-type: none;
        margin-top: 0;
        z-index: 100;
    }

    .menu li {
		display: block;
        font-family: "Arial Regular";
        float: left;
        margin-right : 2vw;
        color: #534237;
        text-decoration: none;
        text-align: center;
    }

    .menu ul li a {
        display: block;
        font-family: "Arial Regular";
        float: left;
        margin-right : 2vw;
        color: #534237;
        text-decoration: none;
        text-align: center;
    }
	
    .menu1 {
        z-index: 100;
    }

    .menu1 ul {
        margin-left: 20%;
        position: absolute;
        padding-top: 3vh;
        list-style-type: none;
        margin-top: 0;
        z-index: 100;
    }

    .menu1 li {
		display: block;
        font-family: "Arial Regular";
        float: left;
		margin-right : 2vw;
        /*width: 10vw;*/
        color: #f3f3f3;
        text-decoration: none;
        text-align: center;
    }

    .menu1 ul li a {
        display: block;
        font-family: "Arial Regular";
        float: left;
        /*width: 12vw;*/
		margin-right : 2vw;
        color: #f3f3f3;
        text-decoration: none;
        text-align: center;
    }
	
    .menu2, .hamburger {
        display: none
    }

}

@media (min-width: 994px) and (max-width: 1255px) {
	.menu {
        z-index: 100;
        width: 100vw;
    }

    .menu ul {
        position: absolute;
        padding-top: 3vh;
        list-style-type: none;
        margin-top: 0;
        z-index: 100;
    }

    .menu li {
        margin-left: 2px;
        display: block;
        font-family: "Arial Regular";
        float: left;
        margin-right : 2vw;
        color: #534237;
        text-decoration: none;
        text-align: center;
    }

    .menu ul li a {
        display: block;
        font-family: "Arial Regular";
        float: left;
        margin-right : 2vw;
        color: #534237;
        text-decoration: none;
        text-align: center;
    }

    .menu1 {
        z-index: 100;
        width: 100vw;
    }

    .menu1 ul {
        position: absolute;
        padding-top: 3vh;
        list-style-type: none;
        margin-top: 0;
        z-index: 100;
    }

    .menu1 li {
        margin-left: 2px;
        display: block;
        font-family: "Arial Regular";
        float: left;
        margin-right : 2vw;
        color: #f3f3f3;
        text-decoration: none;
        text-align: center;
    }
	

    .menu1 ul li a {
        display: block;
        font-family: "Arial Regular";
        float: left;
        margin-right : 2vw;
        color: #f3f3f3;
        text-decoration: none;
        text-align: center;
    }

    .menu2, .hamburger {
        display: none
    }
}

@media (min-width: 10px) and (max-width: 994px) {
    .menu, .menu1 {
        display: none;
    }

    .menu2 {
        position: fixed;
        height: 100vh;
        width: 100%;
        background-color: #f3f3f3;
        transform: translateX(-100%);
        transition: 0.5s;
        z-index: 100;
    }

    .menu2 ul {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding: 0;
    }

    .menu2 li:first-child {
        margin-top: 25vh;
	}

    .menu2 a {
        font-size: 24px;
        font-family: "Arial Regular";
        color: #534237;
        text-decoration: none;
    }

    .open {
        transform: translateX(0px);
    }

    .hamburger {
        width: 8%;
        position: absolute;
        top: 5vh;
        right: 5vh;
        z-index: 1000;
        transition: 0.3s;
    }

    .hamburger-open #sp1 {
        transform: translateY(13.93px);
        transition: 0.3s;

    }

    #sp1, #sp3 {
        transition: 0.3s;
    }

    .hamburger-open #sp3 {
        transform: translateY(-13.93px);
        transition: 0.3s;

    }

    .hamburger #sp1, #sp2, #sp3 {
        fill: #534237;
    }

    .hamburger.hamburger-open #sp2, .hamburger.hamburger-open #sp1, .hamburger.hamburger-open #sp3 {
        fill: #534237;
    }

    .menu2 li {
        margin-bottom: 5vh;
        font-family: "Arial Regular";
        color: #534237;
		font-size: 24px;
		text-decoration: none;
    }
}


/*accueil présentation taille bienvenu*/

@media (min-width: 1255px) {
    .presentation p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 5%;
        font-size: 16px;
        text-align: center;
    }
	
	.presentation a {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        text-align: center;
		text-decoration: underline;
    }
	
    .presentation {
        width: 40vw;
        margin-left: auto;
        margin-right: auto;
    }

    .presentation h2 {
        font-family: "Rage Italic";
        color: #534237;
        margin-top: 20vh;
        font-size: 40px;
        text-align: center;
    }
}

@media (min-width: 780px) and (max-width: 1255px) {
    .presentation p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 5%;
        font-size: 16px;
        text-align: center;
    }
	
	.presentation a {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        text-align: center;
		text-decoration: underline;
    }

    .presentation {
        width: 60vw;
        margin-left: auto;
        margin-right: auto;
    }

    .presentation h2 {
        font-family: "Rage Italic";
        color: #534237;
        margin-top: 10vh;
        font-size: 40px;
        text-align: center;
    }
}

@media (min-width: 10px) and (max-width: 780px) {
    .presentation p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 5%;
        font-size: 16px;
        text-align: center;
    }

    .presentation {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
    }
	
	.presentation a {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        text-align: center;
		text-decoration: underline;
    }

    .presentation h2 {
        font-family: "Rage italic";
        color: #534237;
        margin-top: 15vh;
        font-size: 34px;
        text-align: center;
    }
}


/*taille des containers : il manque container 1 et 8*/
.container, .container2, .container3 {
    width: 100vw;
}

.image .explication a {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        text-align: center;
        margin-top: 5%;
		text-decoration: underline;
    }


/*Domaines d'interventions*/
@media (min-width: 1255px) {
    .image .explication {
        position: absolute;
        margin-left: 10%;
        margin-top: 15%;
        width: 40vw;
        height: 50vh;
    }

    .image .explication h2 {
        font-family: "Rage Italic";
        color: #534237;
        font-size: 40px;
        text-align: center;
    }

    .image .explication p {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        text-align: center;
        margin-top: 5%;
    }
	

    .image .disparait img {
        display: block;
        margin-top: 20vh;
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
    }

    .image .apparait img {
        display: none;
    }
}

@media (min-width: 780px) and (max-width: 1255px) {
    .image .explication {
        margin: 0 auto;
        width: 60vw;
        margin-top: 10vh;
    }

    .image .explication h2 {
        font-family: "Rage Italic";
        color: #534237;
        font-size: 40px;
        text-align: center;
    }

    .image .explication p {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        text-align: center;
        margin-top: 5%;
    }

    .image .disparait img {
        display: none;
    }

    .image .apparait img {
        display: block;
        margin-top: 5%;
        margin-left: auto;
        margin-right: auto;
        width: 60vw;
    }
}

@media (min-width: 10px) and (max-width: 780px) {
    .image .explication {
        width: 80vw;
        margin: 0 auto;
        margin-top: 15vh;
    }

    .image .explication h2 {
        font-family: "Rage Italic";
        color: #534237;
        font-size: 34px;
        text-align: center;
    }

    .image .explication p {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        text-align: center;
        margin-top: 5%;
    }

   /* .image img {
        display: block;
        margin-top: 15vh;
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
    }*/

    .image .disparait img {
        display: none;
    }

    .image .apparait img {
        width: 100vw;
        display: block;
        margin-top: 10%;
        margin-left: auto;
        margin-right: auto;
    }
}


/*accueil différents chantiers*/
@media (min-width: 1255px) {
    .container2 h2, .container4 h2 {
        margin-top: 20vh;
        font-family: "Rage Italic";
        color: #534237;
        font-size: 40px;
    }

    .container4 p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 2%;
        font-size: 16px;
        width: 40vw;
        margin-right: auto;
        margin-left: auto;
    }

	.container2 p {
        font-family: "Arial Regular";
        color: #534237;
		margin-top: 5%;
        font-size: 16px;
        width: 40vw;
        margin-right: auto;
        margin-left: auto;
    }
	
    .container2 .chantiers {
        width: 70vw;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container2 .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
        margin-top: 5%;
    }

    .container2 .chantiers .grid a {
        font-family: "Arial Regular";
        color: #f3f3f3;
        font-size: 16px;
        padding: 10px 10px 10px 10px;
        background: #8F6859;
        border-radius: 2px;
        border: none;
        text-align: center;
        width: 200px;
        display: block;
        margin-top: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10%
    }

    .container2 .chantiers .grid {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        margin-right: auto;
        margin-left: auto;
    }
	
	.container2 .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
        margin-top: 5vh;
    }

    .element {
        width: 16vw;
		padding : 1vw;
        background-color: #f3f3f3;
    }
	
		
	.element img {
        width: 16vw;
	margin-bottom: 2vh;
    }
	
	.container4 .element {
      
        background-color: white;
    }

    .container4 .element img {
        width: 12vw;
	margin-bottom: 2vh;
    }

	
	.container4 .chantiers {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container4 .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
    }

    .container4 .chantiers .grid a {
       
    }
}

@media (min-width: 780px) and (max-width: 1255px) {
	 .container2 h2, .container4 h2 {
        margin-top: 10vh;
        font-family: "Rage Italic";
        color: #534237;
        font-size: 40px;
    }

    .container2 p, .container4 p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 5%;
        font-size: 16px;
        width: 40vw;
        margin-right: auto;
        margin-left: auto;
    }

    .container2 .chantiers {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container2 .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
        margin-top: 5vh;
    }

    .container2 .chantiers .grid a {
        font-family: "Arial Regular";
        color: #f3f3f3;
        font-size: 16px;
        padding: 5px 5px 5px 5px;
        background: #8F6859;
        border-radius: 2px;
        border: none;
        text-align: center;
        width: 200px;
        display: block;
        margin-top: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10%
    }

    .container2 .chantiers .grid {
        font-family: "Arial Regular";
        color: #534237;
        font-size: 16px;
        margin-right: auto;
        margin-left: auto;
    }
	
	.container2 .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
        margin-top: 5%;
    }

    .element {
        width: 27vw;
		padding : 1vw;
        background-color: #f3f3f3;
    }

    .element img {
        width: 27vw;
		height: 22vw;
        margin: 0 auto;
		margin-bottom : 1vh;
    }
	
	
	.container4 .element {
      
        background-color: white;
    }

    .container4 .element img {
        width: 12vw;
	margin-bottom: 2vh;
    }

	
	.container4 .chantiers {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container4 .grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 0 auto;
    }

    .container4 .chantiers .grid a {
       
    }
}


@media (min-width: 10px) and (max-width: 780px) {
    .container2 h2, .container4 h2 {
        margin-top: 15vh;
        font-family: "Rage italic";
        color: #534237;
        font-size: 34px;
    }

    .container2 p, .container4 p {
        font-family: "Arial regular";
        color: #534237;
        margin-top: 2%;
        font-size: 16px;
        width: 60vw;
        margin-right: auto;
        margin-left: auto;
    }

    .container2 .chantiers, .container4 .chantiers {
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .container2 .chantiers .grid a {
        font-family: "Arial regular";
        color: #f3f3f3;
        font-size: 16px;
        padding: 10px 10px 10px 10px;
        background: #8F6859;
        border-radius: 2px;
        border: none;
        text-align: center;
        width: 200px;
        display: block;
        margin-top: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 3vh;
    }

    .container2 .chantiers .grid {
        font-family: "Arial regular";
       
        font-size: 16px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5%;
        /*width: 40vw;*/
    }
	
	.container4 .chantiers .grid a {
    
    }

    .container4 .chantiers .grid {
        font-family: "Arial regular";
        color: #534237;
        font-size: 16px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 5%;
        width: 90vw;
    }

    .container2 .element {
        width: 80vw;
		padding : 3vw;
        background-color: #f3f3f3;
        margin-bottom: 5%;
    }
	
	 .container4 .element {
    }

    .container2 .element img {
        width: 80vw;
		height :40vh;
        margin: 0 auto;
		margin-bottom : 3vh;
    }
	
	.container4 .element img {
		height :30vh;
    }
}


/*footer*/
@media (min-width: 1255px) {
	.footer {
        margin-top: 20vh;
        width: 100vw;
        background-color: #534237;
	}
	

    .footer .contact h2 {
        font-family: "Rage Italic";
        color: #f3f3f3;
        font-size: 40px;
		margin-top: 20vh;
        text-align: center;
    }

    .footer .contact p {
		font-family: "Arial regular";
        text-align: center;
    	color: #f3f3f3;
    	margin-bottom: 20vh;
        margin-top: 5%;
    }
	
	.footer .contact a {
		font-family: "Arial regular";
        text-align: center;
		text-decoration: underline;
    	color: #f3f3f3;
    }

	footer ul {
        padding: 0;
		margin-left: 30%;
        margin-bottom: 4vh;
		margin-top: 4vh;
        list-style-type: none;
    }

    footer li {
        float: left;
    }

    footer ul li a {
        display: block;
        font-family: "Arial regular";
        float: left;
        /*width: 16vw;*/
		margin-right: 2vw;
        color: #f3f3f3;
        text-decoration: none;
        text-align: center;
    }

    .trait {
        background-color: #f3f3f3;
        height: 1pt;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 780px) and (max-width: 1255px) {
   .footer {
        margin-top: 10vh;
        width: 100vw;
        background-color: #534237;
	}
	
    .footer .contact h2 {
        font-family: "Rage Italic";
        color: #f3f3f3;
        font-size: 40px;
		margin-top: 10vh;
        text-align: center;
    }

    .footer .contact p {
		font-family: "Arial regular";
        text-align: center;
    	color: #f3f3f3 ;
		font-size:16px;
    	margin-bottom: 10vh;
        margin-top: 5%;
    }
	
	.footer .contact a {
		font-family: "Arial regular";
        text-align: center;
		text-decoration: underline;
    	color: #f3f3f3;
    	margin-bottom: 15vh;
        margin-top: 5%;
    }

	footer ul {
        padding: 0;
        margin-left: 6%;
		margin-right: 10%;
        margin-bottom: 4vh;
		margin-top: 4vh;
        list-style-type: none;
    }

    footer li {
        margin-left: 2%;
        float: left;
    }

    footer ul li a {
        display: block;
        font-family: "Arial regular";
        float: left;
        color: #f3f3f3;
        text-decoration: none;
        text-align: center;
    }

    .trait {
        background-color: #f3f3f3;
        height: 1pt;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 10px) and (max-width: 780px) {
	.footer .contact{
		padding: 5vw;
	}
	
	.footer {
        margin-top: 15vh;
        width: 100vw;
        background-color: #534237;
	}
	
    .footer .contact h2 {
        font-family: "Rage Italic";
        color: #f3f3f3;
        font-size: 40px;
		margin-top: 10vh;
        text-align: center;
    }

    footer p {
        font-family: "Arial regular";
        color: #f3f3f3;
        text-align: center;
        margin-top: 5%;
        margin-bottom: 10vh;
    }
	
	.footer .contact a {
		font-family: "Arial regular";
        text-align: center;
		text-decoration: underline;
    	color: #f3f3f3;
    	margin-bottom: 15vh;
        margin-top: 5%;
    }

    footer ul li:last-child {
        margin-bottom: 10vh;
    }
	
	footer ul li:first-child {
        margin-top: 10vh;
    }

	footer ul {
        padding: 0;
        list-style-type: none;
    }

    footer li {
        text-align: center;
        margin-bottom: 5%;
    }

    footer ul li a {
        font-family: "Arial regular";
        color: #f3f3f3;
        text-decoration: none;
        text-align: center;
    }

    .trait {
        background-color: #f3f3f3;
        height: 1pt;
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
fin page d'accueil
*/



/*le texte des pages pages pierre, terre, chaux*/
@media (min-width: 1255px) {
    .explicationterre p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 5%;
        font-size: 16px;
        text-align: center;
    }

    .explicationterre {
        width: 60vw;
        margin-left: auto;
        margin-right: auto;
		margin-bottom : 5%;
    }

    .explicationterre h2 {
        font-family: "Rage Italic";
        color: #534237;
        margin-top: 20vh;
        font-size: 40px;
        text-align: center;
    }
}

@media (min-width: 780px) and (max-width: 1255px) {
    .explicationterre p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 5%;
        font-size: 16px;
        text-align: center;
		margin-bottom:5vh;
    }

    .explicationterre {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
    }

    .explicationterre h2 {
        font-family: "Rage Italic";
        color: #534237;
        margin-top: 10vh;
        font-size: 40px;
        text-align: center;
    }
}

@media (min-width: 10px) and (max-width: 780px) {
    .explicationterre p {
        font-family: "Arial Regular";
        color: #534237;
        margin-top: 5vh;
        font-size: 16px;
        text-align: center;
		margin-bottom: 5vh;
    }

    .explicationterre {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
    }

    .explicationterre h2 {
        font-family: "Rage italic";
        color: #534237;
        margin-top: 15vh;
        font-size: 34px;
        text-align: center;
    }
}


/*les images des pages pages pierre, terre, chaux*/
@media (min-width: 1255px) {
    .container3 {
        width: 100vw;
    }

    .container3 .galerie {
        width: 100vw;
    }

    .container3 img {
        margin-top: 2vh;
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
    }

    .container3 .apparait{
        display: none;
    }
}

@media (min-width: 780px) and (max-width: 1255px) {
    .container3 {
        width: 100vw;
    }

    .container3 .galerie{
        width: 100vw;
        text-align: center;
        margin: 0 auto;
    }

    .container3 img {
        margin-top: 1.5vh;
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
    }
    .container3 .apparait{
        display: none;
    }
}

@media (min-width: 10px) and (max-width: 780px) {

    .container3 .disparait{
        display: none;
    }

    .container3 {
        width: 100vw;
    }

    .container3 .galerie {
        width: 80vw;
        text-align: center;
        margin: 0 auto;
    }

    .container3 img {
        margin-top: 3vh;
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
    }
}
		
@media (min-width: 1255px) {
    .ml {
        text-align: center;
}
		}