@media (max-width: 768px) {
  
  /*Header*/
  .mission-acc {
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
  }

  #container-header-sungrid
  {
    height: 30vh;
  }
  #container-header-qui
  {
    height: 60vh !important;
  }

  .mission-acc {
    border-top-right-radius: 1.5rem;
    border-top-left-radius: 1.5rem;
  }

  #mission-sungrid 
  {
    margin: 2% 5%;
  }
  .mission-acc 
  {
    height: 5vh;
  }
  .mission-acc-txt 
  {
    margin-top: 5%;
  }
  .mission-acc > h1 
  {
    font-size: 4vw;
    padding: 3% 4% 0 4%;
    margin-bottom: 3%;
  }
  .mission-acc-txt > p, #explication-acc > p 
  {
    font-size: 2.5vw;
  }

  .image-prod > img 
  {
    width: 7vw;
    top: 20vw;
    left: 8vw;
  }
  .image-conso > img 
  {
    width: 7vw;
    top: 31.8vw;
    left: 8vw;
  }
  .image-source > img 
  {
    width: 7vw;
    top: 43vw;
    left: 8vw;
  }

  .letter 
  {
    font-size: 2.5vw !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  
  #titre-pq-acc > h4, #titre-etapes-acc > h4,
  #txt-rejoindre-acc > h4, #titre-contact > h4
  {
    margin: 2% 0 0 0;
    padding: 2% 5%;
    font-size: 2vw;
    width: 50vw;
    text-align: left;
  }

  /*Schema autoconso collective*/
  #titre-pq-acc 
  {
    padding: 2% 5%;
  }
  #pq-acc > p 
  {
    padding: 0 5%;
    font-size: 2.5vw;
  }
  #etoiles > p 
  {
    margin: 0 5%;
    font-size: 0.5rem;
  }

   /*Etapes ACC*/
  #schema-etape {
    display: block;
    margin: 0;
  }
  #titre-etapes-acc
  {
    margin-top: 2%;
    padding: 0 5%;
  }
  #img-etapes
  {
    width: 100%;
  }
  #txt-etapes-acc 
  {
    width: 100%;
    margin: 0 5%;
  }

  #un-mobile, #deux-mobile, 
  #trois-mobile, #quatre-mobile
  {
      display: block;
      width: 10%;
      object-fit: scale-down;
  }

  #un > p, #deux > p, #trois > p, #quatre > p {
    font-weight: 400;
    padding: 1%;
    font-size: 2.5vw;
    width: 80%;
    margin: 0 !important;
  }

  #img-etapes > img 
  {
    width: 100vw;
  }

  /*Rejoindre ACC*/
  #rejoindre-acc 
  {
    padding: 1% 5%;
  }
  #txt-rejoindre-acc > p, #fournir-elec > p, #vendre-elec > p 
  {
    font-weight: 500;
    padding: 1% 0;
    font-size: 2.5vw;
    width: 100%;
  }

  #fournir-elec > img {
    width: 7vw;
    top: 20vw;
    left: 2vw;
  }

  #vendre-elec > img 
  {
    width: 7vw;
    top: 45vw;
    left: 2vw;
  }

  /*Qui sommes-nous*/
  #container-qui {
    padding: 20% 5% 0 2% !important;
  }
  #container-qui > img 
  {
    display: none !important;
  }
  #container-header-qui 
  {
    height: 40vh !important;
  }
  #container-qui > h4, #titre-valeur > h4,
  #titre-equipe > h4, #titre-contact > h4
  {
    font-size: 4vw !important;
    margin-bottom: 4% !important;
    padding: 2% !important;
  }
  #container-qui > h4
  {
    width: 50vw !important;
  }
  #container-qui > p 
  {
    font-size: 2.5vw !important;
  }

  #titre-equipe > h4, #titre-contact > h4
  {
    width: 42vw !important;
  }
  #titre-valeur > h4
  {
    width: 32vw !important;
  }
  #titre-valeur > p 
  {
    font-size: 2.5vw !important;
    margin: 0 5% 3% 5% !important;
  }

  .valeur-prod > img, .valeur-sungrid > img, 
  .valeur-conso01 > img, .valeur-conso02 > img 
  {
    width: 7vw !important;
    top: -10% !important;
    left: -5% !important;
  }
  #carte01-valeur, #carte02-valeur 
  {
    margin: 0 5% 2% 5% !important;
  }

  #titre-equipe > p
  {
    font-size: 2.5vw !important;
    margin: 0 5% 2% 5% !important;
  }

  #gerant > p, #marketing > p,
  #web > p, #inge > p
  {
    font-size: 3vw !important;
    margin: 0 5% 2% 5% !important;
  }
  #img-equipe
  {
    flex-direction: column;
  }
  #gerant > img, #web > img, 
  #marketing > img, #inge > img 
  {
    width: 20vw;
  }

  #contact {
    width: 100% !important;
  }
  #titre-contact > p {
    font-size: 3vw !important;
  }
  #img-contact {
    display: none;
  }
  #mail > img, #tel > img, #adresse > img {
    width: 5vw !important;
  }
  #mail > p, #tel > p, #adresse > p {
    font-size: 2.5vw !important;
  }

  #contact-sungrid 
  {
    margin: 1% 5% !important;
    display: flex;
  }

  /*FAQ*/
  .container-faq .faq-head-bg{
    padding: 80px 60px 0 30px !important;
  }
  .container-faq .faq-head-bg,
  .container-faq .faq-dropdown-bg {
    border: solid 1px #fff !important;
    border-right-color: #fff !important;
  }
  .container-faq .faq.active .answer-box {
    max-height: 600px !important;
  }
  
  .container-faq .text-blk.faq-subheading {
    margin: 0 0 10px 0 !important;
  }
}

@media (max-width: 810px) {

/*Header*/  
  #titre-etapes-acc > p , #fr > img,
    #schema-wrapper, #imgun, 
    #imgdeux, #imgtrois, #imgquatre
    {
        display: none;
    }

    #retour-accueil {
        width: 100%;
        margin: 15% 20% 15% 20%;
    }
    #coordo {
        width: 15%;
        margin: 0.5% 2%;
    }

    #menu-toggle:checked + #trigger + #burger {
	    background: transparent;
	}

    #menu-toggle:checked + #trigger + #burger:before {
      transform: rotate(45deg);
      top: 0;
    }

    #menu-toggle:checked + #trigger + #burger:after {
      transform: rotate(-45deg);
      top: 0;
    }
    #menu-toggle:checked + #trigger + #burger + #menu {
        animation: checked-anim 0.3s ease both;
    }

    #menu-toggle:checked + #trigger ~ #menu > li {
        display: block;
    }

    #trigger, #burger, #burger:before, #burger:after {
        position: absolute;
        top: 10%;
        left: 70%;
        background: #fff;
        width: 30px;
        height: 4px;
        transition: 0.3s ease;
        cursor: pointer;
        z-index: 1001;
    }

    #trigger {
        background: none;
        height: 0;
    }

    #burger {
        display: block;
        background: transparent;
    }
    #burger:before,
    #burger:after {
        content: "";
        position: absolute;
        right: 0;
    }
    #burger:before {
        top: 20px;
    }
    #burger:after {
        top: 25px;
    }

    #menu-toggle:checked + #trigger + #burger {
        background: transparent;
    }
    #menu-toggle:checked + #trigger + #burger:before {
        transform: rotate(45deg);
        top: 25px;
    }
    #menu-toggle:checked + #trigger + #burger:after {
        transform: rotate(-45deg);
        top: 25px;
    }
    #menu-toggle:checked + #trigger + #burger + #menu {
        animation: checked-anim 0.3s ease both;
    }
    #menu-toggle:checked + #trigger ~ #menu > li {
        display: block;
    }

    #menu > li {
        display: none;
        margin: 1% 0;
        text-align: left;
        padding-right: 40px;
        width: 100%;
    }

    #menu > li a {
        color: #fff;
        font-family: Plus Jakarta Sans, sans-serif;
        font-weight: 700;
        text-decoration: none;
        font-size: 1.2rem;
    }

    #menu {
        position: absolute;
        display: block;
        top: 50px;
        right: 0;
        background-color: #00283AFF;
        width: 1px;
        height: 1px;
        margin: 0;
        animation: not-checked-anim 0.2s both;
        box-shadow: 0 2px 5px rgba(0,0,0,0.26);
        overflow: hidden;
        z-index: 1000;
    }

    input[type="checkbox"] {
        display: none;
    }

      @keyframes checked-anim {
    0% {
      width: 1px;
      height: 1px;
    }
    100% {
      width: 100%;
      height: auto;
      border-radius: 0;
    }
  }

  @keyframes not-checked-anim {
    0% {
      width: 100%;
      height: auto;
    }
    100% {
      width: 1px;
      height: 1px;
    }
  }

  #container-header-sungrid
  {
    height: 40vh;
  }
  #container-header-qui
  {
    height: 60vh !important;
  }
  .mission-acc
  {
    padding-bottom: 10%;
    height: 6vh;
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
  }
  #schema-ptecran 
  {
    display: block;
    margin: 0 5%;
  }
  #schema-acc-svg
  {
    width: 100%;
  }
  #txt-prod-mobile, #txt-conso-pro-mobile,
  #txt-conso-collect-mobile, #txt-conso-part-mobile
  {
    display: none;
    margin: 15% 10% 0 5%;
    padding: 5%;
    font-size: 2.5vw;
    background-color: #fed659;
    position: absolute;
    border: solid 1px #00283AFF;
  }
  #croix, #croix-epicier,
  #croix-collect, #croix-part
  {
    position: absolute;
    top: 3%;
    right: 3%;
    width: 5%;
  }

  /*Footer*/
  #footer-nossite 
  {
    padding-left: 5%;
  }
  #copyright-sungrid > p 
  {
    font-size: 0.6rem;
    font-weight: 400;
  }

  .btn-sinscrire, .btn-inscription,
  .btn-inscription:focus, .btn-inscription:active
  .btn-sinscrire:focus, .btn-sinscrire:active {
    margin: 2% 20% 0 20%;
    width: 50%;
  }

  #footer-liens > #liens-utiles 
  {
    margin-top: 20%;
  }
  #footer-liens > #liens-utiles > a
  {
    font-size: 2.3vw;
    font-weight: 600;
  }
  #footer-liens {
    padding-left: 0;
    padding-right: 5%;
  }
}