/* CSS Document */

@media (min-width: 0px){
    
  .sombre ul {
      margin: 0px;
      padding: 1rem;
      list-style: none;
      padding-top: 3rem;
      padding-bottom: 3rem;
    
    } 
    .sombre {
        background-image: url(../images/bg_tacheCouleurSombre.jpg);
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .sombre ul li {
        text-align: center;
        background-color: #FFFFFF;
        border-radius: 1.5rem;
        padding: 1rem;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        
    }
    .sombre ul li p {
        color: #000000;
    }
    .sombre ul li h3 {
        color: #313131;
        font-size: 2rem;
        margin-bottom: 0.8rem;
    }
    
    .clair ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .clair ul li{
        text-align: center;
        padding: 1rem;
        margin-bottom: 2rem;
        padding-bottom: 2rem;
    }
    
}
@media (min-width: 1024px){

    .sombre {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .sombre ul {
        display: flex;
        
    }
    .sombre ul li {
        width: calc(80% / 3);
        margin: auto;

    }
    .sombre ul li h3 {
        font-size: 1.5rem;
        font-style: normal;
    }
    .clair:last-of-type {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .clair ul {
        display: flex;
        flex-wrap: wrap;
        
    }
    .clair ul li {
        width: calc(80% / 2);
        text-align: center;
        border: 4px dashed #999999;
        border-radius: 1rem;
        margin: auto;
        margin-top: 0px;
        margin-bottom: 3rem;
        padding: 0px;
        padding-top: 1rem;
        padding-right: 2rem;
    }
    .clair ul li h3 {
        font-style: normal;
    }
    
}