:root { 
  --back_color: #ECE6DC; 
} 


body {
        max-width: 650px;
        margin: 40px auto;
        padding: 0 10px;
        font: 18px/1.5 Arial;
        color: #444;
		background-color:var(--back_color);
    }

    h1,h2,h3 { line-height: 1.2 }
	

	.minicarte { border: 4px solid; width:180px;}
	
	.carte { border: 2px solid gray; width:300px; margin:10px; padding:5px;}
	.cartes {display: grid; grid-template-columns: 1fr 1fr;}
	
	.noir {border-color : black;}
	.orange {border-color : orange;}
	.vert {border-color : green;}
  
    .axe {
  display: grid;
  grid-template-columns: repeat(7, 70px);
  grid-gap: 10px;
  grid-auto-rows: minmax(25px, auto);
  padding:5px;
}

    .axesynth {
  display: grid;
  grid-template-columns: repeat(3, 180px);
  grid-gap: 10px;
  grid-auto-rows: minmax(25px, auto);
  padding:5px;
}

.feuille {border: 4px solid; padding:5px; margin:5px;width:200px;}

.feuillesynth {border: 4px solid; padding:3px; margin:3px;width:150px;}

select {width:200px;}

.feuillesynthn {
  grid-column: 1;
  grid-row: 1;
  border-color:black;
}
.feuillesyntho {
  grid-column: 2;
  grid-row: 1;
  border-color:orange;
}
.feuillesynthv1 {
  grid-column: 3;
  grid-row: 1;
  border-color:green;
}
.feuillesynthv2 {
  grid-column: 3;
  grid-row: 2;
  border-color:green;
}

.feuillen {
  grid-column: 1 / 4;
  grid-row: 2;
  border-color:black;
}
.feuilleo {
  grid-column: 4 / 7;
  grid-row: 2;
  border-color:orange;
}
.feuillev1 {
  grid-column: 5 / 8;
  grid-row: 1;
  border-color:green;
}
.feuillev2 {
  grid-column: 5 / 8;
  grid-row: 3;
  border-color:green;
}


.b1n {
  grid-column: 3 / 6;
  grid-row: 1;
  border-color:black;
}
.b1o {
  grid-column: 3 / 6;
  grid-row: 2;
  border-color:orange;
}
.b1v1 {
  grid-column: 1 / 4;
  grid-row: 3;
  border-color:green;
}
.b1v2 {
  grid-column: 5 / 8;
  grid-row: 3;
  border-color:green;
}

.b2n {
  grid-column: 1 / 4;
  grid-row: 2;
  border-color:black;
}
.b2o {
  grid-column: 4 / 7;
  grid-row: 2;
  border-color:orange;
}
.b2v1 {
  grid-column: 5 / 8;
  grid-row: 1;
  border-color:green;
}
.b2v2 {
  grid-column: 5 / 8;
  grid-row: 3;
  border-color:green;
}

.b3n {
  grid-column: 1 / 4;
  grid-row: 1;
  border-color:black;
}
.b3o {
  grid-column: 4 / 7;
  grid-row: 1;
  border-color:orange;
}

.b3v {
  grid-column: 7 / 10;
  grid-row: 1;
  border-color:green;
}
  
.b4n {
  grid-column: 3 / 6;
  grid-row: 1;
  border-color:black;
}
.b4o {
  grid-column: 3 / 6;
  grid-row: 2;
  border-color:orange;
}
.b4v1 {
  grid-column: 1 / 4;
  grid-row: 3;
  border-color:green;
}
.b4v2 {
  grid-column: 5 / 8;
  grid-row: 3;
  border-color:green;
}

.global {
  display: grid;
  grid-template-columns: repeat(7, 80px);
  grid-gap: 10px;
  grid-auto-rows: minmax(15px, auto);
  #background-color:white;
  font-size:11pt;
  font-weight: bold;
}

.gb1n {
  grid-column: 4 / 5;
  grid-row: 6;
  color:black;
}
.gb1o {
  grid-column: 4/6;
  grid-row: 7;
  color:orange;
}
.gb1v1 {
  grid-column: 3/5;
  grid-row: 8;
  color:green;
}
.gb1v2 {
  grid-column: 5/7;
  grid-row: 8;
  color:green;
}
.gb2n {
  grid-column: 5 / 7;
  grid-row: 5;
  color:black;
}
.gb2v1 {
  grid-column: 7 / 9;
  grid-row: 7;
  color:green;
}
.gb3n {
  grid-column: 5 / 7;
  grid-row: 4;
  color:black;
}
.gb3o {
  grid-column: 6 / 8;
  grid-row: 3;
  color:orange;
}
.gb3v {
  grid-column: 7/9;
  grid-row: 2;
  color:green;
} 
.gb4n {
  grid-column: 4/6;
  grid-row: 3/4;
  color:black;
}
.gb4o {
  grid-column: 4/6;
  grid-row: 2;
  color:orange;
}
.gb4v1 {
  grid-column: 4/6;
  grid-row: 1;
  color:green;
}
.gb5n {
  grid-column: 3/5;
  grid-row: 4;
  color:black;
}
.gb5o {
  grid-column: 2/4;
  grid-row: 3;
  color:orange;
}
.gb5v1 {
  grid-column: 2/4;
  grid-row: 2;
  color:green;
} 
.gb5v2 {
  grid-column: 1;
  grid-row: 3;
  color:green;
} 
.gb6n {
  grid-column: 3 / 5;
  grid-row: 5;
  color:black;
}
.gb6v1 {
  grid-column: 1;
  grid-row: 6;
  color:green;
}
.gb6v2 {
  grid-column: 2/4;
  grid-row: 7;
  color:green;
}

.pictos{
  display: grid;
  grid-template-columns: repeat(2, 300px);
  grid-gap: 10px;
  grid-auto-rows: minmax(200px, auto);
  background-color:var(--back_color);
  font-size:11pt;
  font-weight: bold;	
}