/*.container {*/
/*  display: flex;*/
/*  flex-wrap: wrap;*/
/*  justify-content: center;*/
/*  align-items: center;*/
/*  height: 400px;*/
/*  background-color: #ccc;*/
/*}*/

/*.box {*/
/*  width: 100px;*/
/*  height: 100px;*/
/*  margin: 10px;*/
/*  background-color: #fff;*/
/*  border: 1px solid #000;*/
/*}*/

/*.box-1 {*/
/*  order: 4;*/
/*  flex-grow: 1;*/
/*}*/

/*.box-2 {*/
/*  order: 5;*/
/*  flex-grow: 2;*/
/*}*/

/*.box-3 {*/
/*  order: 3;*/
/*  flex-grow: 1;*/
/*  align-self: flex-start;*/
/*}*/

/*.box-4 {*/
/*  order: 6;*/
/*  flex-grow: 2;*/
/*}*/

/*.box-5 {*/
/*  order: 1;*/
/*  flex-grow: 1;*/
/*  align-self: flex-end;*/
/*}*/

/*.box-6 {*/
/*  order: 7;*/
/*  flex-grow: 1;*/
/*}*/

/*.box-7 {*/
/*  order: 2;*/
/*  flex-grow: 2;*/
/*}*/

/*.box-8 {*/
/*  order: 8;*/
/*  flex-grow: 1;*/
/*  align-self: flex-end;*/
/*}*/

/*.box-9 {*/
/*  order: 11;*/
/*  flex-grow: 1;*/
/*}*/

/*.box-10 {*/
/*  order: 10;*/
/*  flex-grow: 1;*/
/*}*/

/*.box-11 {*/
/*  order: 9;*/
/*  flex-grow: 1;*/
/*  align-self: flex-start;*/
/*}*/

/*.box-12 {*/
/*  order: 12;*/
/*  flex-grow: 1;*/
/*}*/



/*exercice 1 sur les flex couleur*/
/*body*/
/*{*/
/*    margin:0px;*/
   
    
/*}*/
/*.container{*/
/*    display:flex;*/
    /*flex-direction:;*/
/*     height:100vh;*/
/*    width:100vw;*/
    
/*    flex-wrap: wrap;*/
/*    align-items: center;*/
/*    transform: translate(50, 50%);*/
/*    margin-left:50%;*/
/*    margin-top:15%;*/
/*    padding:20px;*/
/*}*/

/*.box{*/
   
/*    height:100%;*/
/*    border: 1px solid #000;*/
/*    width:100px;*/
/*    text-align:center;*/
/*    padding: 8px 8px;*/
/*}*/
/*.numero {*/
  border: 2px solid black; /* Définit une bordure de 2 pixels avec un trait continu noir 
  padding: 5px; /* Ajoute un espace de 5 pixels entre le bord de la bordure et le chiffre 
/*  border-radius:50% 50% 50% 50% / 50% 50% 50% 50%  ;*/
/*   background-color: white;*/
/* opacity: 0.7;*/
  
  
/*}*/
/*span */
/*{*/
/*    margin-top:10px;*/
/*}*/

/*.box-1{*/
/*    background-color:green;*/
/*}*/



/*.box-2{*/
/*    background-color:blue;*/
/*}*/


/*.box-3{*/
/*    background-color:purple;*/
/*}*/


/*.box-4{*/
/*    background-color:orange;*/
/*}*/


/*.box-5{*/
/*    background-color:red;*/
/*}*/


/*.box-6{*/
/*    background-color:green;*/
/*}*/


/*.box-7{*/
/*    background-color:blue;*/
/*}*/



/*.box-8{*/
/*    background-color:purple;*/
/*}*/


/*exercice2 et 3*/
body
{
    margin:0px;
   
    
}
.container{
    display:flex;
    flex-direction:row-reverse;
     height:800px;
    width:1000px;
    border:solid black 1px;
    flex-wrap: wrap;
    align-items: center;
    transform: translate(50, 50%);
    margin-left:5%;
    margin-top:15%;
    margin-right:5%;
    padding:20px;
}

.box{
   
    height:300px;
    border: 1px solid #000;
    width:200px;
    text-align:center;
    padding: 8px 8px;
    margin:10px;
    /*enlever la margin pour récuperer l'exercice2*/
}
.numero {
  border: 2px solid black; /* Définit une bordure de 2 pixels avec un trait continu noir */
  padding: 5px; /* Ajoute un espace de 5 pixels entre le bord de la bordure et le chiffre */
  border-radius:50% 50% 50% 50% / 50% 50% 50% 50%  ;
   background-color: white;
 opacity: 0.7;

  
  
}
span .numero {
     margin-left: auto;
  margin-right: auto;
}

span 
{
    margin-top:10px;
}

.box-1{
    background-color:green;
    order:1;
}



.box-2{
    background-color:blue;
    order:2;
}


.box-3{
    background-color:purple;
    order:3;
}


.box-4{
    background-color:orange;
    order:4;
}


.box-5{
    background-color:red;
    width:100%;
    order:5;
}


.box-6{
    background-color:green;
    order:;
}


.box-7{
    background-color:blue;
    order:6;
}



.box-8{
    background-color:purple;
    order:7;
}
.box-9{
    background-color:orange;
    order:8;
}
/*.dark-mode {*/
/*  background-color: #333333;*/
/*  color: #ffffff;*/
/*}*/

@media screen and (max-width: 900px)
{
    
.container{
   justify-content:start;
    
}
.box{
    /*display:flex;*/
}
    
   
    .box-1{
    background-color:green;
    order:1;
    
}



.box-2{
    background-color:blue;
    order:2;
     
    
}


.box-3{
    background-color:purple;
     order:3;
    
}


.box-4{
    background-color:orange;
    order:4;
     
    
}


.box-5{
    background-color:red;
    align-self:center;
    flex-grow: 1;
    width:100%;
    order:5;
}


.box-6{
    background-color:green;
    order:6;
}


.box-7{
    background-color:blue;
    order:7;
    
}



.box-8{
    background-color:purple;
    order:8;
    
}
    
}