#accueil {
    display: block;
    width: 100%;
    height: 100%;
    background: #442d10; /*#8cb4d0*/
    color: #b49e89; /*#052031*/
    padding: 25px;
    text-align: center;
    font-size: 40px;
    margin-bottom: 100px;
}

.main-projets {
    padding-bottom: 100px;
    width: 100%;
    height: 100%;
    padding-top: 100px;
    /*celui avec svg en toile d'areignée
    background-color: #333230;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='469' height='469' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%233E4436' stroke-width='20'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23000000'%3E%3Ccircle cx='769' cy='229' r='7'/%3E%3Ccircle cx='539' cy='269' r='7'/%3E%3Ccircle cx='603' cy='493' r='7'/%3E%3Ccircle cx='731' cy='737' r='7'/%3E%3Ccircle cx='520' cy='660' r='7'/%3E%3Ccircle cx='309' cy='538' r='7'/%3E%3Ccircle cx='295' cy='764' r='7'/%3E%3Ccircle cx='40' cy='599' r='7'/%3E%3Ccircle cx='102' cy='382' r='7'/%3E%3Ccircle cx='127' cy='80' r='7'/%3E%3Ccircle cx='370' cy='105' r='7'/%3E%3Ccircle cx='578' cy='42' r='7'/%3E%3Ccircle cx='237' cy='261' r='7'/%3E%3Ccircle cx='390' cy='382' r='7'/%3E%3C/g%3E%3C/svg%3E");
*/
/* celui avec fond simple blanc/beige en haut vert empire en bas
background-color: #FFFFFF;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(0,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23EAE7E2'/%3E%3Cstop offset='1' stop-color='%233E4436'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='51' height='51' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23FFFFFF' cx='25.5' cy='25.5' r='25.5'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0'/%3E%3C/svg%3E");
background-attachment: fixed;*/

    /*background-color: #EAE7E2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(312,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23EAE7E2'/%3E%3Cstop offset='1' stop-color='%233E4436'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='1' gradientTransform='rotate(122,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23407B44' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23407B44' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2' y2='2' gradientTransform='rotate(140,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23407B44' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23407B44' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='2' height='1'/%3E%3Cg fill-opacity='0.27'%3E%3Cpolygon fill='url(%23b)' points='0 1 0 0 2 0'/%3E%3Cpolygon fill='url(%23c)' points='2 1 2 0 0 0'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;*/
    /*Les montagnes dans Portfolio*/
/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23599bbd' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23173d43' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%235498bc' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23183a41' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%234f94b9' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23193740' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%234692b9' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%231a333e' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%233f8eb6' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%2319303d' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%23398cb4' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%231b2d3b' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
*/
background-color: #EAE7E2;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%237a8570' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%2334392e' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%237a8570' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%2334392e' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23535a49' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%231f221b' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%237a8570' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%2334392e' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%23535a49' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%231f221b' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%237a8570' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%2334392e' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");

background-attachment: fixed;
background-size: cover;
background-position: center bottom;

}

img {
    max-width: 400px;
    width: 100%;
    max-height: 400px;
    height: 100%;
    border-radius: 10px;
    margin: 80px 0px 80px;
}


figcaption {
    font-size: 25px;
    width: 100%;
    background: #8cb4d0;
    color: #052031;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}

.lien-projet {
    background: rgba(0,0,0,0.6);
    text-decoration: none;
    font-size: 25px;
    color: white;
    border-radius: 20px;
    padding: 5px;
    transform: translate(-200%, 50%);
}

.main-circles {
    /*background-color: #0d6226;*/
    padding: 100px;
background-color: #bbaa99;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 160 80'%3E%3Cg fill='%23B0A090' fill-opacity='0.3'%3E%3Cpolygon points='0 10 0 0 10 0'/%3E%3Cpolygon points='0 40 0 30 10 30'/%3E%3Cpolygon points='0 30 0 20 10 20'/%3E%3Cpolygon points='0 70 0 60 10 60'/%3E%3Cpolygon points='0 80 0 70 10 70'/%3E%3Cpolygon points='50 80 50 70 60 70'/%3E%3Cpolygon points='10 20 10 10 20 10'/%3E%3Cpolygon points='10 40 10 30 20 30'/%3E%3Cpolygon points='20 10 20 0 30 0'/%3E%3Cpolygon points='10 10 10 0 20 0'/%3E%3Cpolygon points='30 20 30 10 40 10'/%3E%3Cpolygon points='20 20 20 40 40 20'/%3E%3Cpolygon points='40 10 40 0 50 0'/%3E%3Cpolygon points='40 20 40 10 50 10'/%3E%3Cpolygon points='40 40 40 30 50 30'/%3E%3Cpolygon points='30 40 30 30 40 30'/%3E%3Cpolygon points='40 60 40 50 50 50'/%3E%3Cpolygon points='50 30 50 20 60 20'/%3E%3Cpolygon points='40 60 40 80 60 60'/%3E%3Cpolygon points='50 40 50 60 70 40'/%3E%3Cpolygon points='60 0 60 20 80 0'/%3E%3Cpolygon points='70 30 70 20 80 20'/%3E%3Cpolygon points='70 40 70 30 80 30'/%3E%3Cpolygon points='60 60 60 80 80 60'/%3E%3Cpolygon points='80 10 80 0 90 0'/%3E%3Cpolygon points='70 40 70 60 90 40'/%3E%3Cpolygon points='80 60 80 50 90 50'/%3E%3Cpolygon points='60 30 60 20 70 20'/%3E%3Cpolygon points='80 70 80 80 90 80 100 70'/%3E%3Cpolygon points='80 10 80 40 110 10'/%3E%3Cpolygon points='110 40 110 30 120 30'/%3E%3Cpolygon points='90 40 90 70 120 40'/%3E%3Cpolygon points='10 50 10 80 40 50'/%3E%3Cpolygon points='110 60 110 50 120 50'/%3E%3Cpolygon points='100 60 100 80 120 60'/%3E%3Cpolygon points='110 0 110 20 130 0'/%3E%3Cpolygon points='120 30 120 20 130 20'/%3E%3Cpolygon points='130 10 130 0 140 0'/%3E%3Cpolygon points='130 30 130 20 140 20'/%3E%3Cpolygon points='120 40 120 30 130 30'/%3E%3Cpolygon points='130 50 130 40 140 40'/%3E%3Cpolygon points='120 50 120 70 140 50'/%3E%3Cpolygon points='110 70 110 80 130 80 140 70'/%3E%3Cpolygon points='140 10 140 0 150 0'/%3E%3Cpolygon points='140 20 140 10 150 10'/%3E%3Cpolygon points='140 40 140 30 150 30'/%3E%3Cpolygon points='140 50 140 40 150 40'/%3E%3Cpolygon points='140 70 140 60 150 60'/%3E%3Cpolygon points='150 20 150 40 160 30 160 20'/%3E%3Cpolygon points='150 60 150 50 160 50'/%3E%3Cpolygon points='140 70 140 80 150 80 160 70'/%3E%3C/g%3E%3C/svg%3E");}

.description-projet {
    float: right;
    width: 100%;
    padding: 50px;
}

.image-description {
    display: flex;
}


.main-contact {
    padding: 100px;
  --s: 166px;
  --c1: #2d3034;
  --c2: #43605e;
  --c3: #3e3c3c;

  background:
    repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%)
     calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
    repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
  background-size: var(--s) calc(var(--s)*tan(30deg));

    /* en forme de toile d'arreignée*/
   /* background-color: #333230;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='469' height='469' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%233E4436' stroke-width='20'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23000000'%3E%3Ccircle cx='769' cy='229' r='7'/%3E%3Ccircle cx='539' cy='269' r='7'/%3E%3Ccircle cx='603' cy='493' r='7'/%3E%3Ccircle cx='731' cy='737' r='7'/%3E%3Ccircle cx='520' cy='660' r='7'/%3E%3Ccircle cx='309' cy='538' r='7'/%3E%3Ccircle cx='295' cy='764' r='7'/%3E%3Ccircle cx='40' cy='599' r='7'/%3E%3Ccircle cx='102' cy='382' r='7'/%3E%3Ccircle cx='127' cy='80' r='7'/%3E%3Ccircle cx='370' cy='105' r='7'/%3E%3Ccircle cx='578' cy='42' r='7'/%3E%3Ccircle cx='237' cy='261' r='7'/%3E%3Ccircle cx='390' cy='382' r='7'/%3E%3C/g%3E%3C/svg%3E");
*/
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%
}

@media screen and (max-width: 575px){
	form{
		max-width: 300px;
		width: 100%;
        padding: 15px;
	}

	input[type="text"], input[type="email"], textarea {
		width: 100%;
		max-height: 50px;
		height: 100%
	}

	textarea{
		max-height: 100px;
		height: 100%;
	}

	.main-contact{
		padding: 50px;
	}

	.main-contact h1 {
    	padding: 10px;
    	font-size: 10px;
	}

	button[type="submit"] {
    	font-size: 10px;
    	max-width: 85px;
    	max-height: 50px;
    	padding: 5px;
	}

}

@media screen and (max-width: 320px){
	form{
		max-width: 150px;
		width: 100%;
        padding: 10px;
	}

	input[type="text"], input[type="email"], textarea {
		width: 100%;
		max-height: 40px;
		height: 100%
	}

	textarea{
		max-height: 70px;
		height: 100%;
	}

	.main-contact{
		padding: 20px;
		padding-top: 45px;
	}

	.main-contact h1 {
    	padding: 5px;
    	font-size: 7px;
	}

}


form {
    width: 100%;
    max-width: 600px;
    background: black;
    opacity: 80%;
    border: 2px solid black;
    padding: 20px;
}


label {
    font-size: 20px;
    width: 100%;
    min-height: 100%;
    color: #ffffff;
}

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid white;
    font-size: 16px;
}

textarea {
    height: 150px;
    resize: none;
    overflow: hidden;
}

button[type="submit"] {
    background: #43605e;
    color: #ffffff;
    font-size: 20px;
    width: 120px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #43605e;
}

.main-contact h1 {
    padding: 30px;
    color: #ffffff;
    font-weight: bold;
    font-size: 40px;
}

.images-projets {
    width: 300px;
    height: 400px;
    margin: 50px;
}

.projets {
    align-items: center;
    display: inline-flex;
    margin-left: 60px;
}

.texte-projet {
    float: right;
    font-size: 30px;
    padding: 30px;
    max-width: 600px;
    width: 100%
}

.texte-gauche {
    font-size: 30px;
    padding: 30px;
    max-width: 600px;
    width: 100%;
}

.flotter-droite figure img {
    float: right;
}

figure {
    margin: 50px;
}

figure img:hover {
    opacity: 60%;
}


@media screen and (max-width: 768px){
	.texte-projet {
		font-size: 20px;
	}

	.texte-gauche {
		font-size: 20px;
	}


}

@media screen and (max-width: 500px) {
 	.main-projets {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Cpolygon fill='%237a8570' points='95.7 45 53.9 90 139.6 90'/%3E%3Cpolygon fill='%2334392e' points='95.7 45 87.29 90 139.6 90'/%3E%3Cpolygon fill='%237a8570' points='-6 90 39.8 66.2 81.6 90'/%3E%3Cpolygon fill='%2334392e' points='33.7 90 39.8 66.2 81.6 90'/%3E%3Cpolygon fill='%23535a49' points='120.3 54.6 155.2 90 87.6 90'/%3E%3Cpolygon fill='%231f221b' points='120.3 54.6 155.2 90 116.2 90'/%3E%3Cpolygon fill='%237a8570' points='64.1 69.5 88.6 90 36.7 90'/%3E%3Cpolygon fill='%2334392e' points='58.7 90 64.1 69.5 88.6 90'/%3E%3Cpolygon fill='%23535a49' points='171 90 140.1 63.2 109.6 90'/%3E%3Cpolygon fill='%231f221b' points='171 90 140.1 63.2 136.5 90'/%3E%3Cpolygon fill='%237a8570' points='121 90 97.1 68.7 72.5 90'/%3E%3Cpolygon fill='%2334392e' points='94.3 90 121 90 97.1 68.7'/%3E%3C/svg%3E");
		background-position: center;
		background-size: 100% auto;
		background-repeat: no-repeat;

	}

	.texte-projet {
		font-size: 10px;
		padding: 20px;
	}

	.texte-gauche {
		font-size: 10px;
		padding: 20px;

	}

	figure {
    	margin: 20px;
    }

    .projets {
    	margin-left: 0px;
    }
}

/*.en-tete {
  display: flex;
  justify-content: space-between;
}*/