body {
    margin: 0;
    font-family: "Roboto Condensed", sans-serif;
    /*font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;*/ 
  line-height: 1.8;
}

.flex-container {
  display: flex;
  justify-content: center;
   flex-direction: column;
}

.bloc-a {
    padding: 4%;
        padding-bottom: ;
        width: 50%;
        height: ;
        margin: 0;
}

/*.bloc-urgence-plomberie {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.158)), url("img/urgence.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 4%;
        padding-bottom: ;
        width: 50%;
        height: ;
        margin: 4%;
}

.bloc-plombier-debouchage {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.158)), url("img/plombier-debouchage.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
    padding: 4%;
        padding-bottom: ;
        width: 50%;
        height: ;
        margin: 4%;
}
*/

.bloc-img {
   
    padding: ;
        padding-bottom: ;
        width: 50%;
        height: 350px;
        margin: 4%;
}

.img {
    
        padding-bottom: ;
        width: 100%;
        height: 100%;
        
}


button {
    border: none;
}

input {
    border-radius: 12px;
    border: none;
    box-shadow: 0px 0px 3px darkgray;
    padding: 8px;
}

hr {
    border-color: rgb(236, 82, 82);
    margin: 16px;

}

header {
  
}

na {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

na ul{
    display: flex;
    gap: 16px;
}

na ul li {
    list-style: none;
}

na ul li a {
    text-decoration: none;
    font-weight: bold;
    color: rgb(36, 36, 36);
}

na ul li :hover {
    color: white;
}

.logo_x {
    max-height: 64px;
    object-fit: contain;
}

.bottom_header {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-around;
    align-items: last baseline;
}

.bottom_header {
    font-family: 'kaushan script';
    color: white;
    font-size: larger;
}

.bottom_header ul  {
    display: flex;
    gap: 12px;
}

.bottom_header ul li {
    list-style: none;
}

.bottom_header ul li img {
    height: 32px;
}

.red_section {
    padding: 32px;
    background-color: rgb(255, 255, 255);
    clear: both;
    
}

#three_reasons h1 {
    color: white;
}

#three_reasons p {
    color: azure;
}

/* Top */
 .image_background {
    
  /*   background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.192), rgba(0, 0, 0, 0.342)), url("images/plombier.jpg"); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    height: ;
    padding-top: 40px;
    padding-bottom: 40px;
    
    
 }

 .image_background img {
    width: 80vw;
    margin-top: 10vh;
 }

 .image_background h1 {
    font-size: xxx-large;
    font-family: ;
    color: rgb(19, 19, 19);
    background-color:  rgba(255, 255, 255, 0.884);
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 24px;
    display: inline-block;
    margin-bottom: 5vh;
    margin-right: 16px;
    margin-left: 16px;
    padding: 24px;
    
 }



  .image_background p {
    font-size: large;
    font-family: ;
    color: rgb(63, 90, 141);
    background-color: rgba(255, 255, 255, 0.856);
    box-shadow: 2px 2px 2px darkgray;
    border-radius: 24px;
    display: inline-block;
    margin-bottom: 5vh;
    margin-right: 16px;
    margin-left: 16px;
    padding: 24px;
    
 }

 /*Citation*/

 .jobs_quote {
    text-align: center;
    margin: 10vw;
    font-size: 2em;
    font-family:fantasy;
 } 

 .jobs_quote blockquote {
    display: flex;

 }

 .jobs_quote img {
    width: 10vw;
    object-fit: contain;
    align-self: first baseline;
 }

 .jobs_quote p {
    color: darkgrey;
    max-width: 50vw;
 }

 .jobs_quote cite {
    color: rgb(236, 82, 82);
    align-self: last baseline;
 }

 /* Reasons*/
 #three_reasons {
    text-align: center;
 }

 #three_reasons h1 {
    color: cornflowerblue;
    
 }

 .reasons_text {
    width: 50ww;
 }

 dd {
    display: none;
 }

 dt {
    font-size: larger;
    margin: 12px;
    background-color: rgba(225, 225, 225, 0.7);
    border-radius: 16px;
    height: 32px;
 }

 dt:hover + dd {
    display: block;
 }


 /* about_to_learn*/
.about_to_learn {
    margin: 2vw;
}

.about_to_learn h1 {
    font-size: 2.5em;
    font-family: 'kaushan script';
    color: rgb(236, 82, 82);
    text-align: center;
}

.div_grid {
    display: grid;
    text-align: center;
    margin: 32px;
}

.div_grid h3 {
    color: rgb(236, 82, 82);
    font-size: larger;
}

.course_category_blue {
    padding: 8px;
}

.course_category_white {
    padding: 8px;
}

 /* ChatGPT*/

 .chatgpt {
    text-align: center;
    
 }

 .chatgpt img {
    width: 25vw;
    float: left;
    border-radius: 16px;
    box-shadow: 0px 0px 4px gray;
 }

 /* Pricing*/

 .white_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    text-align: left;

    margin-right: 8%;
    margin-left: 8%;
    
 }




  .pricing-2 {
    margin: 16px;
    background-image: url("images/urgence.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
 }

   .pricing-3 {
    margin: 16px;
    background-image: url("images/appeler-plombier-fuite-eau.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
 }

   .pricing-4 {
    margin: 16px;
    background-image: url("images/urgence-debouchage.jpg");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
 }




 .pricing ul {
    text-align: start;
    color: gray;
 }

.pricing_text {
    margin: 8px;
}

.pricing_text h1 {
    color: rgb(236, 82, 82);
}

.pricing_text p {
    color: grey;
}

/* Méthode */
.method {
    text-align: center;
    margin-bottom: 5%;
    margin-top: 5%;
    margin-right: 8%;
    margin-left: 8%;
}
.method_detail{
    display: flex;
}

.method h1 {
    color: rgb(0, 43, 92);
}

#up {
    background-color: rgb(82, 161, 236);
    padding: 8px;
    color: white;
}

#down {
    padding: 8px;
    border-style: solid;
    border-color: gainsboro;
}

/* Newsletter */
.newsletter {
    background-image: url(images/bg2.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.newsletter img {
    max-height: 64px;
}

.my_form {
    background-color: white;
    text-align: center;
    padding: 16px;
}

.my_form span {
    color: rgb(236, 82, 82);
}

.my_form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form_text {
    background-color: rgba(25, 25, 25, 0.8);
    text-align: center;
    color: white;
}




/* Footer */

footer {
    padding: 16px;
    background-color: rgb(54, 54, 54);
    text-align: center;
    

}

footer img {
    width: 33vw;
}



footer nav ul li a {
    text-decoration: none;
    color: rgb(168, 168, 168);
}


footer h6 {
    color: rgb(168, 168, 168);
}

footer h6 a {
    text-decoration: none;
    color: rgb(0, 132, 255);
}

.my_button {
    font-size: x-large;
    text-decoration: none;
    display: inline-block;
    padding: 8px 20px 8px 20px;
    margin-bottom: 8px;
    margin-right: 20px;
    border-radius: 12px;

    box-shadow: 2px 2px 2px darkgray;
     font-weight: 400;
}

#blue {
    color: white;
    background-color: cornflowerblue;
}

#red {
    color: white;
    background-color: rgb(236, 82, 82);
}

@media (min-width: 0px) and (max-width: 749px) {
    .jobs_quote {
        font-size: small;
    }

    .div_grid {
        grid-template-columns: 1fr;
    }

     .image_background  {
       /*  height: 600px;*/
    }

    .image_background h1 {
        font-size: xx-large;
    }

    .newsletter {
        display: block;
    }

    .method_detail {
        flex-direction: column;
    }

    .white_container {
        display: block;
        padding: 8px;
    }

    .course_category_blue, .course_category_white {
        box-shadow: 0px 0px 6px darkgray;
        margin: 4px 0px 4px 0px;
    }

    .bloc-a {
    padding: 4%;
        padding-bottom: ;
        width: 100%;
        height: ;
        margin: 0;
}

.bloc-img {
   
    padding: ;
        padding-bottom: ;
        width: 90%;
        height: ;
        margin: 4%;
}



.img {
    
        padding-bottom: ;
        width: 100%;
        height: ;
        margin: ;
}

}

@media (min-width: 750px) {
    .div_grid {
        grid-template-columns: 1fr 1fr;
        box-shadow: 0px 0px 6px gainsboro;
    }

    #up {
        margin-bottom: 16px;
    }
    
    #down {
        margin-top: 16px;
        box-shadow: 2px 2px 2px darkgrey;
    }
    .course_category_blue {
        background-color: rgba(236, 82, 82, 0.3);
    }
  
   
  .flex-container {
  display: flex;
 
  flex-direction: row;
}


}