:root{
	--couleur : black;
	--couleurfond : white;
	--x : 10vw;
	--d : calc(var(--x)/2);
	--l : calc(var(--x)/2);
	--e : calc(var(--x)/4);
	--d1 : calc(var(--x)/1.1);
	--d2 : calc(var(--x)/1.2);
	--d3 : calc(var(--x)/2.4);	
	/*carre*/
	--basecarre : calc(var(--x)/1.2);
	--b2 : calc(var(--x)/2);
	--b3 : calc(var(--x)/1.3);
	--b4 : calc(var(--x)/2.4);
	/*triangle*/
	--btriangle : var(--x);
	--contour1 : calc(var(--btriangle) / 2);
	--bptriange : calc(var(--btriangle) / 2);
	--contour2 : calc(var(--bptriange) / 2);
}

/*Rond*/

.containform {
    height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
    background-color: grey;
}

.anneau {
    background-color: var(--couleur);
    border-radius: var(--x);
    height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
}

.anneau2 {
	position: relative;
    background-color: var(--couleurfond);
    border-radius: var(--d1);
    height: var(--d1);
    width: var(--d1);
    left : calc((var(--x) - var(--d1))/2);
    display: table-cell;
    vertical-align: middle;
}

.anneau3 {
	position: relative;
    background-color: var(--couleur);
    border-radius: var(--d2);
    height: var(--d2);
    width: var(--d2);
    margin-left: auto;
    margin-right: auto;
}

.rondinterieur {
    background-color: var(--couleurfond);
    height: var(--d);
    width: var(--d);
    display: table;
    margin: 0 auto;
    border-radius: var(--d);
}
.rond {
    display: table;
    margin: 0 auto;
    background-color: var(--couleur);
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);
}

.containform2{
	height: var(--x);
    width: var(--x);
    display: table-cell;
    vertical-align: middle;
    background-color: var(--couleur);
}

.rond2 {
	display: table;
    margin: 0 auto;
    background-color: var(--couleurfond);
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);
}

.rond3 {
	position: relative;
	top : calc(var(--x) - var(--d2));
	left : calc(var(--x) - var(--d2));
	display: table-cell;
    vertical-align: middle;
    background-color: var(--couleurfond);
    height: var(--d);
    width: var(--d);
    border-radius: var(--d);

}

.rond4 {
	display: table;
    margin: 0 auto;
    background-color: var(--couleur);
    height: var(--d3);
    width: var(--d3);
    border-radius: var(--d3);
}


/*Carré*/
.carre {
    position: relative;
    background-color: var(--couleur);
    height: var(--basecarre);
    width: var(--basecarre);
    margin-left: auto;
    margin-right: auto;
}

.carreinterieur {
    position: relative;
	top : calc((var(--basecarre) - var(--b2))/2);
	left : calc((var(--basecarre) - var(--b2))/2);
	display: table-cell;
    vertical-align: middle;
    background-color: var(--couleurfond);
    height: var(--b2);
    width: var(--b2);
}

.carre2 {
    background-color: var(--couleur);
    height: var(--b2);
    width: var(--b2);
    display: table;
    margin: 0 auto;
}

.carreinterieur2 {
    background-color: var(--couleurfond);
    height: var(--b2);
    width: var(--b2);
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.carreinterieur3 {
	position: relative;
    background-color: var(--couleurfond);
    height: var(--basecarre);
    width: var(--basecarre);
    left : calc((var(--x) - var(--basecarre))/2);
    display: table-cell;
    vertical-align: middle;
}

.carrev2 {
	position: relative;
    background-color: var(--couleur);
    height: var(--b3);
    width: var(--b3);
    margin-left: auto;
    margin-right: auto;
}

.carreinterieur4 {
	position : relative;
	top : calc((var(--x) - var(--basecarre)) / 1.3);
	left : calc((var(--x) - var(--basecarre)) / 1.3);
    background-color: var(--couleurfond);
    height: var(--d);
    width: var(--d);
    display: table-cell;
    vertical-align: middle;
}


.carre3 {
    background-color: var(--couleur);
    height: var(--b4);
    width: var(--b4);
    display: table;
    margin: 0 auto;
}

/*triangle*/
.triangle {
    display: table;
    margin: 0 auto;
    border-left: var(--contour1) solid transparent;
    border-right: var(--contour1) solid transparent;
    border-bottom: var(--btriangle) solid var(--couleur);
}
.trianglerinterieur {
	position: absolute;
	left: calc(var(--contour1) - (var(--contour2) - 0.4vw));
    border-left: var(--contour2) solid transparent;
    border-right: var(--contour2) solid transparent;
    border-bottom: var(--bptriange) solid var(--couleurfond);
}
.ptriangle {
    display: table;
    margin: 0 auto;
    margin-top: 0.75vw;
    border-left: 1.5vw solid transparent;
    border-right: 1.5vw solid transparent;
    border-bottom: 3vw solid var(--couleur);
}