body {  
        background-color: rgb(252, 255, 246);
        margin:auto;
 } 



@media screen and (min-width: 1300px){
        body {  margin-left: 50px;} 
}

body > h1:first-of-type,
body > hr:first-of-type,
body > h2:first-of-type{
        margin-left: 60px;
        margin-right: 60px;
}

body > h2:first-of-type{
        font-family :'Courier New', Courier, monospace; 
}

.h1   { font-family:'Times New Roman', Times, serif;
        margin-top: 100px;}

.h2 {font-family: 'Times New Roman', Times, serif;
        margin-top: 200px;}

.exo {font-family :'Courier New', Courier, monospace;
        margin-top: 50px; 
margin-left: 50px;}        

.consigne { 
        font-family: 'Courier New', Courier, monospace;
        font-size: 20px;
        font-weight: 700px;
        margin-left: 60px} 
        

        /* ------------------------   Paragraphe textes code    ------------------------ */


.texte1 {font-family:'Courier New', Courier, monospace ;
        font-size: 15px;
        padding-right: 200px;
        padding-left: 60px;
        text-align: justify;
        line-height: 20px;
       
}

.L1    {padding-top: 30px; 
        padding-right:500px ;
        padding-bottom: 20px;} 

.L2 {   
        padding-left: 100px;; 
        padding-bottom: 20px;
        padding-right:300px}

.L3 {   padding-left: 400px;
        padding-bottom: 20px;
}

@media screen and (max-width: 1160px){

        .texte1{
                padding-right: 0px;
        }
        .L3 {
                padding-right: 60px;
        }
}


        

.L4 {   
        padding-right: 100px;;
        justify-content: center;
        font-family: monospace;
        padding-left: 100px;
        text-indent: -40px;
}


pre{
        padding-left: 100px  
}



div.fondtexte4 { 
        background-color: rgb(252, 120, 68);
        padding: 20px ;
        width: calc(100vw - 160px);
        max-width: 1100px;
}        

.L5 {   padding-top: 50px ;
        padding-left: 100px;; 
        padding-bottom: 20px;
        padding-right:500px
}


.L6 { 
        padding-left: 400px;
        padding-bottom: 20px}

.L7 {  padding-top: 40px;
       padding-bottom: 70px;
       padding-left: 20px;
       max-width: calc(100vw - 160px);
}



.encadre { background-color: rgb(140, 212, 213)        ;
        padding : 100px}

@media screen and (max-width: 1340px){
        .L5 {   padding-right: 400px }
        .L6 {   padding-right: 100px }
}

@media screen and (max-width: 1000px){
        .L5 {   padding-right: 300px }
        .L6 {   padding-left: 280px; padding-right: 100px }
}

@media screen and (max-width: 900px){

        .texte1{

                width: calc(100vw - 120px)!important;
                padding-right: 0px;
        }
        .L1, .L2, .L3, .L5, .L6 {
                padding-left: 60px;
                padding-right: 60px;
        }

}

@media screen and (max-width: 640px){
        .L4, pre{
                padding-left: 40px;
                padding-right: 10px;
        }
        .L1, .L2, .L3, .L5, .L6 {
                padding-left: 0px;
                padding-right: 0px;
        }
}

.L9{
        margin-left: 60px;
        margin-right: 60px;
}


/* ------------------------   Transition   ------------------------ */

.transition { margin: 80px;
        margin-left: 20px;
display: flex;
justify-content: center;}
 

.traitrose { 
        background-color: rgb(251, 129, 105);
        width: 1300px;
        height:3px      }

.traitjaune { 
         background-color:#e1ff00;
         width: 1300px;
         height:3px  }

.traitbleu { 
                background-color : rgb(140, 212, 213);
                width: 1300px;
                height:3px  }         



/* ------------------------   Contenu exercice 1    ------------------------ */

.exercice1 { margin-bottom: 150px;
        margin-left: 100px;
        margin-top: 100px}

.consigne1 { margin-top: 50px;}

/* ------------------------   Contenu exercice 2    ------------------------ */

.exercice2 { 
        margin-left: 100px;
        margin-top: 100px;
        margin-bottom: -270px;}

.container {
        background-color:rgb(101, 178, 180);
        display: flex;
        width: 600px;
        height: 600px;
        flex-wrap: wrap;}
        
.boxo  {width: 60px;
        height:60px;
        background-color: #e1ff00;
        margin: 10px;}

.boxo2  {width: 60px;
        height: 60px;
        background-color:rgb(251, 129, 105);
        margin: 10px;}

.boxo,.boxo2 {margin: 30px;}


 div.bloc1, div.bloc2, div.bloc3 { 
         width: 70px;
         height: 160px; }
            
div.bloc1 { 
        background-color: rgb(0, 0, 0);
        position:relative;
        left:380px;
        top:-160px }

div.bloc2 { 
        background-color:rgb(0, 0, 0);
        position:relative;
        left: 460px;
        top:-320px}


.appartement { 
       position: relative;
       left: 510px;
       top: -740px;}

.appartement2 { 
        position: relative;
        left: 206px;
        top: -890px;}

.appartement3 { 
        position: relative;
        left: -98px;
        top: -590px;}

.appartement4{
       position: relative;
       left: 78px;
       top: -440px;}        
.appartement5 { 
        position: relative;
        left: -107px;
        top: -740px;
}            
.appartement6 {
        position: relative;
        left: 190px;
        top: -890px;} 

.appartement7 {
        position: relative;
        left: 126px;
        top: -590px;}
        
.appartement8 { 
        position: relative;
        left: -60px;
        top: -590px;}

.appartement9 { 
        position: relative;
        left: -365px;
        top: -890px;}               
          

       /* ------------------------    Contenu exercice 3    ------------------------ */


.exercice3 {
        margin-left: 100px;
        margin-top: 100px;
        margin-bottom: 150px;
        max-width: calc(100vw - 200px);
        overflow-x: hidden;
}
 
 
div.composition {
    background-color: #ccff00;
    display: flex;
    width: 1000px;
    height: 80px;
    justify-content:space-around;}  

        
div.motif {
    width: 80px;
    height:80px;
    background-color:rgb(252, 120, 68) }

        
div.composition2 {
   background-color:#e1ff00;
   display: flex;
   width: 1000px;
   height: 80px;
   justify-content:space-around}

div.motif2 {
   width: 80px;
   margin-left: 80px;
   height:80px;
   background-color: rgb(252, 120, 68)}
       
div.ligneint {
   width: 1000px;
   height:2px;
   background-color:rgb(252, 120, 68)}


 /* ------------------------    Contenu exercice 4   ------------------------ */



.exercice4 { 
        margin-top: 100px;
        margin-left: 100px;
        margin-bottom: 150px;
}
.labyrinthe {
        width: 660px;
        height: 660px;
        display: grid;
        grid-template-columns :repeat(22, 1fr);
        grid-template-rows : repeat(22, 1fr);
        background-color: black;}
        


        
.c1 
 { background-color: rgb(101, 178, 180);
        grid-column:2 ;
        grid-row: 2; }

 .c2 {        
        background-color: rgb(101, 178, 180);
        grid-column-start:4 ;
        grid-column-end: 11;
        grid-row: 2;   }  


 .c3 { background-color: rgb(101, 178, 180);
        grid-column-start:12 ;
        grid-column-end: 20;
        grid-row: 2; } 
          
                
.c4 { background-color: rgb(101, 178, 180);
      grid-column:21 ;
      grid-row: 2; }  

.c5 { 
        background-color: rgb(101, 178, 180);
        grid-column:2 ;
        grid-row: 3;
}      

.c6 { 
        background-color: rgb(101, 178, 180);
        grid-column:4;
        grid-row: 3;}

 .c7 { 
                background-color: rgb(101, 178, 180);
                grid-column:10;
                grid-row: 3;}

.c8 { 
         background-color: rgb(101, 178, 180);
        grid-column:12;
        grid-row: 3;}     
        
.c9 { 
                background-color: rgb(101, 178, 180);
               grid-column:21;
               grid-row: 3;}   
               
              
 .c10 { 
                background-color: rgb(101, 178, 180);
               grid-column:2;
               grid-row: 4;}                

.c11 { 
                background-color: rgb(101, 178, 180);
                grid-column-start:4 ;
                grid-column-end:7;
                grid-row: 4;}

.c12 { 
                        background-color: rgb(101, 178, 180);
                       grid-column:10;
                       grid-row: 4;}
 .c13 { 
                        background-color: rgb(101, 178, 180);
                       grid-column:12;
                       grid-row: 4;}

.c14    { 
        background-color: rgb(101, 178, 180);
        grid-column-start:15 ;
        grid-column-end:20;
        grid-row: 4;}       
 
.c15 { 
                background-color: rgb(101, 178, 180);
               grid-column:21;
               grid-row: 4;}

.c16 { 
                background-color: rgb(101, 178, 180);
               grid-column:19;
               grid-row: 4;}

.c17 {  background-color: rgb(101, 178, 180);
        grid-column:2;
        grid-row: 5;}    
 
.c18 {  background-color: rgb(101, 178, 180);
                grid-column:6;
                grid-row: 5;} 

.c19 {  background-color: rgb(101, 178, 180);
                        grid-column:8;
                        grid-row: 5;} 
                    
.c20 {  background-color: rgb(101, 178, 180);
                                grid-column:12;
                                grid-row: 5;} 
 .c22 {  background-color: rgb(101, 178, 180);
        grid-column:17;
        grid-row: 5;}  

.c23 {  background-color: rgb(101, 178, 180);
                grid-column:21;
                grid-row: 5;}    
                
.c24 { background-color: rgb(101, 178, 180);
        grid-column:2;
        grid-row: 6;} 

.c25 { background-color: rgb(101, 178, 180);
                grid-column:2;
                grid-row: 4;}    
                
.c26 { background-color: rgb(101, 178, 180);
        grid-column-start:6 ;
        grid-column-end:9;
        grid-row: 6;}               
.c27 { background-color: rgb(101, 178, 180);
                grid-column-start:10 ;
                grid-column-end:18;
                grid-row: 6;} 
.c28 { background-color: rgb(101, 178, 180);
                        grid-column-start:19 ;
                        grid-column-end:22;
                        grid-row: 6;}     
       
.c29 { background-color: rgb(101, 178, 180);
         grid-column:2;
        grid-row: 7;}

.c30 { background-color: rgb(101, 178, 180);
grid-column:4;
         grid-row: 7;}     
.c31 { background-color: rgb(101, 178, 180);
      grid-column:8;
      grid-row: 7;}    
 
 .c32 { background-color: rgb(101, 178, 180);
        grid-column:17;
        grid-row: 7;}

 .c33 { background-color: rgb(101, 178, 180);
        grid-column:21;
        grid-row: 7;}

.c34 { background-color: rgb(101, 178, 180);
        grid-column-start:2;
        grid-column-end: 5;
        grid-row: 8;}   

.c35 { background-color: rgb(101, 178, 180);
grid-column-start:2;
grid-column-end: 5;
grid-row: 8;}   

.c36 { background-color: rgb(101, 178, 180);
        grid-column:8;
        grid-row: 8;}  

.c37{ background-color: rgb(101, 178, 180);
        grid-column-start:17;
        grid-column-end: 20;
        grid-row: 8;}   
        
.c38{ background-color: rgb(101, 178, 180);
        grid-column:21;
        grid-row :8 } 

.c39{ background-color: rgb(101, 178, 180);
        grid-column:2;
        grid-row:9; }                       

.c40{ background-color: rgb(101, 178, 180);
                grid-column:6;
                grid-row :9 } 
 .c41{ background-color: rgb(101, 178, 180);
                        grid-column:17;
                        grid-row :9 } 
.c42{ background-color: rgb(101, 178, 180);
         grid-column:21;
        grid-row :9 } 
                       
.c43{ background-color: rgb(101, 178, 180);
        grid-column-start: 8;
        grid-column-end: 16;
        grid-row: 9;}
              
.c44 { background-color: rgb(101, 178, 180);
        grid-column:2;
       grid-row :10}

      
.c45 { background-color: rgb(101, 178, 180);
                grid-column:8;
               grid-row :10}       
.c46 { background-color: rgb(101, 178, 180);
                grid-column:15;
               grid-row :10}
               
.c47 { background-color: rgb(101, 178, 180);
                grid-column:17;
               grid-row :10}
.c48 { background-color: rgb(101, 178, 180);
                grid-column:19;
               grid-row :10}
.c49 { background-color: rgb(101, 178, 180);
                grid-column:21;
               grid-row :10}
.c50{ background-color: rgb(101, 178, 180);
                grid-column-start: 4;
                grid-column-end: 7;
                grid-row: 10;}  

.c51 { background-color: rgb(101, 178, 180);
       grid-column:2;
       grid-row:11;}  

.c52 { background-color: rgb(101, 178, 180);
        grid-column:4;
        grid-row:11;}

.c53 { background-color: rgb(101, 178, 180);
                grid-column:8;
                grid-row:11;}

.c54 { background-color: rgb(101, 178, 180);
 grid-column:15;
 grid-row:11;}  

.c55 { background-color: rgb(101, 178, 180);
        grid-column:19;
        grid-row:11;}

.c56 { background-color: rgb(101, 178, 180);
                grid-column:21;
                grid-row:11;}

.c57 { background-color: #e1ff00;
                        grid-column-start: 11;
                        grid-column-end: 13;
                        grid-row:11;} 

.c58 { background-color:rgb(101, 178, 180);
grid-column: 2;
grid-row:12;}

.c59 { background-color:rgb(101, 178, 180);
grid-column: 4;
grid-row:12;}

.c60 { background-color:rgb(101, 178, 180);
grid-column: 8;
grid-row:12;}

.c61 { background-color:rgb(101, 178, 180);
 grid-column: 21;
 grid-row:12;} 

.c62 { background-color: rgb(101, 178, 180);
        grid-column-start: 15;
        grid-column-end: 20;
        grid-row:12;} 

.c63 { background-color: #e1ff00;
        grid-column-start: 11;
        grid-column-end: 13;
        grid-row:12;}

.c64 { background-color:rgb(101, 178, 180);
grid-column: 2;
grid-row:13;}

.c65 { background-color:rgb(101, 178, 180);
        grid-column: 8;
        grid-row:13;} 

.c66 { background-color:rgb(101, 178, 180);
 grid-column: 15;
grid-row:13;} 

.c67 { background-color:rgb(101, 178, 180);
grid-column: 19;
grid-row:13;} 

.c68 { background-color:rgb(101, 178, 180);
grid-column: 21;
grid-row:13;}

.c69 { background-color:rgb(101, 178, 180) ;
        grid-column-start: 3;
        grid-column-end: 7;
        grid-row:13;}

.c70 { background-color:rgb(101, 178, 180);
grid-column:2;
grid-row:14;}

.c71 { background-color:rgb(101, 178, 180);
        grid-column: 6;
        grid-row:14;}  

.c72 { background-color:rgb(101, 178, 180);
        grid-column:15;
        grid-row:14;}  

.c73 { background-color:rgb(101, 178, 180);
        grid-column: 19;
        grid-row:14;}  

.c74 { background-color:rgb(101, 178, 180);
        grid-column: 21;
        grid-row:14;}  
 .c75 { background-color:rgb(101, 178, 180) ;
        grid-column-start: 8;
        grid-column-end: 11;
        grid-row:14;}                              

.c76 { background-color:rgb(101, 178, 180);
grid-column: 6;
grid-row:15;} 
                
.c77 { background-color:rgb(101, 178, 180);
        grid-column: 10;
        grid-row:15;} 
                        
.c78 { background-color:rgb(101, 178, 180);
        grid-column: 21;
        grid-row:15;}
        
.c79 { background-color:rgb(101, 178, 180) ;
grid-column-start: 2;
grid-column-end: 5;
grid-row:15;}

.c80 { background-color:rgb(101, 178, 180) ;
grid-column-start: 13;
grid-column-end:16 ;
grid-row:15;}

.c81 { background-color:rgb(101, 178, 180) ;
        grid-column-start: 17;
        grid-column-end: 20;
        grid-row:15;}

.c82 { background-color:rgb(101, 178, 180);
grid-column: 2;
grid-row:16;}

.c83 { background-color:rgb(101, 178, 180);
               grid-column: 2;
               grid-row:16;}
.c84 { background-color:rgb(101, 178, 180);
                grid-column: 4;
                grid-row:16;}
.c85 { background-color:rgb(101, 178, 180);
                grid-column: 6;
                grid-row:16;}  
.c86 { background-color:rgb(101, 178, 180);
                 grid-column: 10;
                grid-row:16;}  
.c87 { background-color:rgb(101, 178, 180);
                grid-column: 13;
                grid-row:16;}  
.c88 { background-color:rgb(101, 178, 180);
                grid-column: 17;
                grid-row:16;}
.c89 { background-color:rgb(101, 178, 180);
        grid-column: 21;
        grid-row:16;}
          
.c90 { background-color:rgb(101, 178, 180);
        grid-column: 2;
        grid-row:17;}
.c91 { background-color:rgb(101, 178, 180);
        grid-column: 4;
        grid-row:17;}
        
.ddd  { background-color:rgb(101, 178, 180) ;
        grid-column-start: 6;
        grid-column-end: 11;
        grid-row:17;}  
 
.c93 { background-color:rgb(101, 178, 180) ;
        grid-column-start: 13;
        grid-column-end: 18;
        grid-row:17;} 
.c94 { background-color:rgb(101, 178, 180) ;
                grid-column-start: 19;
                grid-column-end: 22;
                grid-row:17;}             

.c95 { background-color:rgb(101, 178, 180);
        grid-column: 2;
        grid-row:18;}

.c96 { background-color:rgb(101, 178, 180);
       grid-column: 4;
       grid-row:18;}

.c97 { background-color:rgb(101, 178, 180);
        grid-column: 13;
        grid-row:18;}
.c98 { background-color:rgb(101, 178, 180);
        grid-column: 17;
        grid-row:18;}
.c99 { background-color:rgb(101, 178, 180);
        grid-column: 21;
        grid-row:18;}

.c100 { background-color:rgb(101, 178, 180);
grid-column: 2;
 grid-row:19;}

 .c101 { background-color:rgb(101, 178, 180);
grid-column: 4;
grid-row:19;} 

.c102 { background-color:rgb(101, 178, 180);
grid-column: 21;
grid-row:19;}

.c103 { background-color:rgb(101, 178, 180) ;
        grid-column-start: 6;
        grid-column-end: 14;
        grid-row:19;}
.c104 { background-color:rgb(101, 178, 180) ;
        grid-column-start: 15;
        grid-column-end: 20;
        grid-row:19;}
        
.c105 { background-color:rgb(101, 178, 180);
        grid-column: 2;
        grid-row:20;} 
.c106 { background-color:rgb(101, 178, 180);
         grid-column: 8;
        grid-row:20;} 
.c107 { background-color:rgb(101, 178, 180);
        grid-column: 21;
        grid-row:20;} 

.c108 { background-color:rgb(101, 178, 180) ;
        grid-column-start: 2;
        grid-column-end: 22;
        grid-row:21;}