/* Colonne de 70px et espace de 20px */
/* font open sens (nav) / oswald (logo + p) google font  */
/* Survol a:hover pour la nav */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Oswald:wght@200;300;400;500;600;700&family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*  font-family: 'Open Sans', sans-serif;
    font-family: 'Oswald', sans-serif; */

#global{
    width: 1060px;
    margin: auto;
}


/* Logo */

h1{
    font-family: 'Oswald', sans-serif;
    font-size: 27.1px;
}
h2{
    font-family: 'Oswald', sans-serif;
    font-size: 50.5px ;
    text-transform: uppercase;
    margin-top: -35px;
}

/* Nav */

nav ul{
    list-style:none;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    float:right;
    margin-top: -91px;
   
}

nav ul li{
    display: inline-block;
    padding: 5px 0px 5px 25px;
    
    
}
a{
    text-decoration: none;
    color: black;
}
.current{
    color: #F2AE2E; 
}

a:hover{
    color: #F2AE2E;
}


/* Paragraphe */

.p-col{
    font-family: 'Oswald', sans-serif;
    font-size: 27px;
    margin-bottom: 4px;
    font-weight: bolder;
}
.p-footer{
    text-align: center;
    margin-top: 25px;
    font-family: 'Open Sans', sans-serif;
}


/* classe pour les longueurs des rectangles */

.col-11-12{
    width: 970px;
}
.col-10-12{
    width: 880px;
}
.col-9-12{
    width: 790px;
}
.col-8-12{
    width: 700px;
}
.col-7-12{
    width: 610px;
}
.col-6-12{    
    width: 520px;
}
.col-5-12{
    width: 430px;
}
.col-4-12{
    width: 340px ;
}
.col-3-12{
    width: 250px;
}
.col-2-12{
    width: 160px;
}
.col-1-12{
    width: 70px ;
}
/* classe pour les couleurs */
.pink{ 
    background-color: #F252C8 ;
}
.middle-blue{
    background-color: #0A9EBF ;
}
.light-blue{
    background-color: #52E2F2 ;
}
.peach{
    background-color: #F28D52 ;
}
.yellow{
    background-color:#F2C335 ;
}
.dark-yellow{
    background-color: #F2AE2E ;
}
.middle-brown{
    background-color: #8C5C4A ;
}
.light-brown{
    background-color: #D97E4A ;
}
.beige{
    background-color: #F2BC8D ;
}
.green-apple{
    background-color: #D3D92B ;
}
.middle-green{
    background-color:  #93A64E;
}

/* classe de base de toute les colonnes */
.col{
    height: 150px;
    float: left;
    margin-right: 20px;
    margin-top: 20px;
}
/* classe pour retirer la marge a droite de la dernière colonne */
.last{
    margin-right: 0 !important;
}
.clear{
    clear: both;
}


/* CSS Page flexbox */

#container{
    height: 1680px;
    display: flex;
    align-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 24px;
}

.box{
    height: 150px;
    margin-right: 20px;
}


/* CSS page grid */

#grid{
    display: grid;
    margin-top: 24px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(10,1fr);
    gap: 20px;
    height: 1680px;
    width: 1060px;
}

div[class]:nth-child(1){
    grid-column-start: 1;
    grid-column-end: 7;
}
div[class]:nth-child(2){
    grid-column-start: 7;
    grid-column-end: 13;
}
div[class]:nth-child(3),div[class]:nth-child(34){
    grid-column-start: 1;
    grid-column-end: 5;
}
div[class]:nth-child(4){
    grid-column-start: 5;
    grid-column-end: 9;
}
div[class]:nth-child(5){
    grid-column-start: 9;
    grid-column-end: 13;
}
div[class]:nth-child(6),div[class]:nth-child(32){
    grid-column-start: 1;
    grid-column-end: 4;
}
div[class]:nth-child(7){
    grid-column-start: 4;
    grid-column-end: 7;
}
div[class]:nth-child(8){
    grid-column-start: 7;
    grid-column-end: 10;
}
div[class]:nth-child(9){
    grid-column-start: 10;
    grid-column-end: 13;
}
div[class]:nth-child(10), div[class]:nth-child(30){
    grid-column-start: 1;
    grid-column-end: 3;
}
div[class]:nth-child(11){
    grid-column-start: 3;
    grid-column-end: 5;
}
div[class]:nth-child(12){
    grid-column-start: 5;
    grid-column-end: 7;
}
div[class]:nth-child(13){
    grid-column-start: 7;
    grid-column-end: 9;
}
div[class]:nth-child(14){
    grid-column-start: 9;
    grid-column-end: 11;
}
div[class]:nth-child(15){
    grid-column-start: 11;
    grid-column-end: 13;
}
div[class]:nth-child(16), div[class]:nth-child(28){
    grid-column-start: 1;
    grid-column-end: 2;
}
div[class]:nth-child(17){
    grid-column-start: 2;
    grid-column-end: 3;
}
div[class]:nth-child(18){
    grid-column-start: 3;
    grid-column-end: 4;
}
div[class]:nth-child(19){
    grid-column-start: 4;
    grid-column-end: 5;
}
div[class]:nth-child(20){
    grid-column-start: 5;
    grid-column-end: 6;
}
div[class]:nth-child(21){
    grid-column-start: 6;
    grid-column-end: 7;
}
div[class]:nth-child(22){
    grid-column-start: 7;
    grid-column-end: 8;
}
div[class]:nth-child(23){
    grid-column-start: 8;
    grid-column-end: 9;
}
div[class]:nth-child(24){
    grid-column-start: 9;
    grid-column-end: 10;
}
div[class]:nth-child(25){
    grid-column-start: 10;
    grid-column-end: 11;
}
div[class]:nth-child(26){
    grid-column-start: 11;
    grid-column-end: 12;
}
div[class]:nth-child(27){
    grid-column-start: 12;
    grid-column-end: 13;
}
div[class]:nth-child(29){
    grid-column-start: 2;
    grid-column-end: 13;
}
div[class]:nth-child(31){
    grid-column-start: 3;
    grid-column-end: 13;
}
div[class]:nth-child(33){
    grid-column-start: 4;
    grid-column-end: 13;
}
div[class]:nth-child(35){
    grid-column-start: 5;
    grid-column-end: 13;
}
div[class]:nth-child(36){
    grid-column-start: 1;
    grid-column-end: 6;
}
div[class]:nth-child(37){
    grid-column-start: 6;
    grid-column-end: 13;
}