//Declare variables
$text: #000;
$background: #FBFBFE;
$primary: #80ED99;
$secondary: #E5FBF2;
$accent: #2E9B08;

#public{
  margin: 0 48px;
  h1 {
    text-transform: uppercase;
    margin: 16px 0;
  }
  h2 {
    margin: 16px 0;
  }
  p{
    margin: 8px 0;
  }
  .public-presentation {
    .ressources{
      display: flex;
      gap: 16px;
      margin-bottom: 46px;
      .ressource{
        background-color: rgba(40, 233, 152, 0.8);
        padding: 16px;
        border-radius: 18px;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 450px;
        img{
          width: 100px;
          height: 100px;
          margin-bottom: 8px;
        }
      }
    }
    
    .explication{
      display: flex;
      gap: 26px;
      img{
        width: 300px;
      }
      .explication-text{
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
    img{
      width: 100%;
      margin-bottom: 16px;
    }
  }    
  .caracteristiques{
    margin-bottom: 48px;
    h2{
      text-align: center;
    }
  }
  .concurrence{
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    .concu-card{
      padding: 16px;
      border-radius: 18px;
      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
      text-align: left;    
      width: 60%;
      h3{
        margin: 8px 0;
      }
    }
    #first-card{
      background-color: rgba(171, 239, 99, 0.8);
    }
    #second-card{
      background-color: rgba(40, 233, 152, 1);
    }
    #third-card{
      background-color: rgba(40, 233, 152, 0.5);
    }
    #fourth-card{
      background-color: rgba(46, 155, 8, 0.7);
    }
    :nth-of-type(even){
      margin-left: auto;
      margin-right: 0;
    }
  }
  .campagne{
    video{
      width: 100%;
    }
    a{
      margin: auto;
    }
    h2{
      text-align: center;
    }
    h2:nth-of-type(2){
      color: rgba(171, 239, 99, 0.8);
    }
    h3:nth-of-type(2){
      color: rgba(40, 233, 152, 1);
      text-align: center;
    }
    p{
      margin: 20px 0;
    }
    .contribution{
      text-align: center;
      .global-cont{
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 80px;
          height: 80px;
          margin: 0 16px;
        }
      }
      .card-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 24px;
        gap: 32px;
        .cont-card{
          padding: 16px;
          border-radius: 18px;
          background-color: rgba(174, 224, 182, 1);
          box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
          text-align: left;    
          width: 340px;
          .card-top{
            text-align: center;
            p{
              margin: 6px 0;
            }
            p:nth-of-type(2){
              color: rgba(46, 155, 8, 1);
              font-weight: bold;
              font-size: 46px;
            }
          }
          .card-bottom{
            ul{
              list-style-type: none;
              padding-left: 5px;
            }
          }
        }
      }
    }
    .objectif{
      margin-bottom: 36px;
      h2{
        color: black;
        margin-top: 48px;
      }
      img{
        width: 100%;
      }
      h2:nth-of-type(3){
        text-align: left;
      }
    }
  }
}
//Responsive ordinateur portable
@media screen and (max-width: 1450px) {
  #public .campagne .contribution .card-container .cont-card {
    width: 300px;
  }
}
//Responsive tablette verticale
@media screen and (max-width: 1024px) {
  #public{
    margin: 0 10px;
  }
  #public .public-presentation .ressources{
    flex-direction: column;
    align-items: center;
    .ressource{
      width: 300px;
    }
  }
  #public .public-presentation .explication{
    img{
      width: 150px;
    }
    .explication-text{
      text-align: center;
    }
  }
}
//Responsive mobile
@media screen and (max-width: 707px) {
  #public .public-presentation .explication{
    flex-direction: column;
    gap: 16px;
    align-items: center;

  }
}