/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Variables */
:root {
    --color-white: #FFF;
    --color-green: #008550;
    --color-bg: #FFFFF2;
    --color-typo: #BA5040;
    --color-yellow: yellow;
    --typo-poppins: 'Poppins', sans-serif;
    --color-stroke: #9A9A9A;
    --color-article: #A79048;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--typo-poppins);
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
}

/* -------- HEADER ----------- */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    padding: 0 30px;
    background-color: var(--color-green);
    color: var(--color-white);
}

header h1 a {
    font-family: 'Indie Flower', cursive;
    text-transform: uppercase;
    font-weight: 400;
    text-decoration: none;
    color: var(--color-white);
    transition: all 0.4s ease-in-out;
}

header h1 a:hover {
    color: var(--color-yellow);
}

header nav {
    width: 1140px;
}

header nav ul {
    display: flex;
    justify-content: space-between;
}

header nav ul li {
    list-style-type: none;
    font-size: 24px;
}

header nav ul li a {
    text-decoration: none;
    color: var(--color-white);
    transition: all 0.4s ease-in-out;
}

header nav ul li:hover a,
header nav .btn_clean:hover {
    color: var(--color-yellow);
}

header nav .btn_clean {
    cursor: pointer;
    border: none;
    color: var(--color-white);
    background-color: transparent;
    font-size: 24px;
    transition: all 0.4s ease-in-out;
}

.nav-toggler {
    position: absolute;
    z-index: 10;
    right: 30px;
    height: 30px;
    width: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    display: none;
}

.line {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    background: #F1F1F1;
    transition: transform 0.3s ease-out, opacity 0.1s ease-out;
}

.l1 {
    transform: translateY(-10px);
}

.l3 {
    transform: translateY(10px);
}

.nav-toggler.active .l1 {
    transform: translateY(0px) rotate(135deg);
}

.nav-toggler.active .l2 {
    opacity: 0;
}

.nav-toggler.active .l3 {
    transform: translateY(0px) rotate(-135deg);
}

/* -------- BANNIERE ----------- */

.banniere {
    position: relative;
    z-index: -1;
}

.banniere .banniere_img {
    width: 100%;
    object-fit: cover;
}

.banniere .banniere_logo {
    position: absolute;
    width: 250px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.banniere .titre {
    width: 85%;
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: var(--color-stroke);

}

.banniere .titre .ligne {
    display: inline-block;
    width: 250px;
    border-bottom: 1px solid var(--color-stroke);
}

/* -------- PAGE ACCUEIL ----------- */

.comptoir {
    height: 550px;
    width: 100%;
    object-fit: cover;
    margin-top: -7px;
}

.bienvenue {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 250px 0;
}

.bienvenue .bienvenue_g {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    width: 580px;
    height: 500px;
    border: 1px solid var(--color-stroke);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 0 15px;
}

.bienvenue .bienvenue_g h3,
.boutique .boutique_d h3,
.fete_mere .fete_mere_d h3 {
    color: var(--color-typo);
    font-size: 2.5em;
    font-weight: normal;
}

.para_1,
.para_2 {
    font-size: 1.25em;
}

.para_2 {
    font-weight: 200;
}

.bienvenue .bienvenue_d {
    width: 580px;
    height: 500px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.bienvenue .bienvenue_d img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.boutique,
.fete_mere {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 250px;
}

.boutique .boutique_g {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 655px;
    height: 430px;
    color: var(--color-white);
    background-color: var(--color-article);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.boutique .boutique_g h3 {
    font-size: 2.5em;
    font-weight: normal;
}

.boutique .boutique_g img {
    width: 340px;
    height: 200px;
    object-fit: cover;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.boutique .boutique_d {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 470px;
    height: 430px;
    border: 1px solid var(--color-stroke);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
}

.btn_lien {
    text-decoration: none;
    color: var(--color-white);
    background: var(--color-typo);
    border-radius: 30px;
    font-size: 1.5em;
    padding: 15px 30px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
    transition: background-color 0.2s ease-in-out;
}

.btn_lien:hover {
    background: #9E4235;
}

.fete_mere .fete_mere_g {
    width: 450px;
    height: 630px;
}

.fete_mere .fete_mere_g img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.fete_mere .fete_mere_d {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    width: 580px;
    height: 630px;
    border: 1px solid #9A9A9A;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 0 25px;
}

/* -------- PAGE PRESENTATION ----------- */

.presentation_titre {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 350px;
    margin-bottom: 70px;
    text-align: center;
}

.h1 {
    font-size: 3em;
    color: var(--color-typo);
    font-weight: 400;
}

.presentation {
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 250px;
}

.presentation .presentation_g {
    width: 560px;
    height: 420px;
}

.presentation .presentation_g img {
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.presentation .presentation_d {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 800px;
    height: 420px;
    text-align: center;
    border: 1px solid #9A9A9A;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 0 15px;
}

.h3 {
    font-size: 1.875em;
    color: var(--color-typo);
    font-weight: 400;
}

.coeur {
    height: 900px;
    background-color: var(--color-article);
    color: var(--color-white);
    margin-bottom: 150px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.coeur h4 {
    font-size: 1.875em;
    font-weight: 500;
    text-align: center;
    padding: 40px;
}

.coeur #coeur {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
}

.coeur #coeur .coeur_art {
    width: 280px;
}

.coeur #coeur .coeur_art img {
    height: 420px;
    width: 100%;
    object-fit: cover;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.coeur #coeur .coeur_art span {
    font-weight: 600;
}

.coeur #coeur .coeur_art p {
    padding: 60px 0;
    font-size: 1.25em;
}

/* -------- PAGE PRESTATIONS ----------- */

.prestation_titre {
    text-align: center;
    padding: 70px 0;
}

.presta {
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    flex-wrap: wrap;
}

.presta .presta_art {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 370px;
    height: 460px;
    margin: 0 10px 150px;
}

.presta .presta_art img {
    width: 370px;
    height: 260px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.presta .presta_art a.presta_cate {
    text-decoration: none;
    margin: 25px 0;
}

.presta .presta_art p {
    font-size: 1.25em;
}

.prestation_boutique {
    margin-bottom: 150px;
}

.presta_boutique {
    position: relative;
}

.presta_boutique .banniere_lilas {
    width: 100%;
    object-fit: cover;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.presta_boutique .presta_boutique_ligne {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 1000px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    background-color: rgba(167, 144, 72, 0.75);
}

.presta_boutique .presta_boutique_ligne h3 {
    color: var(--color-white);
}

.presta_boutique .presta_boutique_ligne .boutique_ligne {
    width: 325px;
    height: 195px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

/* -------- PAGE CONTACT ----------- */

.nous_trouver {
    margin-bottom: 150px;
}

.nous_trouver .contact_titre {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 100px 0;
    text-align: center;
}

.nous_trouver .contact_titre iframe {
    margin-top: 80px;
}

.nous_trouver .contact_coord {
    display: flex;
    flex-wrap: wrap;
    margin: 0 65px;
    justify-content: space-between;
}

.nous_trouver .contact_coord .flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nous_trouver .contact_coord .fs48 {
    font-size: 3em;
    color: var(--color-typo);
}

.nous_trouver .contact_coord .fs36 {
    font-size: 2.25em;
    color: var(--color-typo);
}

.nous_trouver .contact_coord .mr50 {
    margin-right: 50px;
}

.nous_trouver .contact_coord .contact_horaire {
    margin-top: 150px;
}

.formulaire {
    padding: 0 10%;
    margin-bottom: 150px;
}

.formulaire h1 {
    margin-bottom: 100px;
}

.formulaire form .input_form {
    width: 100%;
    height: 80px;
    background: transparent;
    font-size: 40px;
    padding-left: 30px;
    margin-bottom: 50px;
}

.formulaire form textarea {
    width: 100%;
    background: transparent;
    font-size: 40px;
    padding-left: 30px;
    margin-bottom: 50px;
}

.formulaire form .input_submit {
    cursor: pointer;
    border: none;
}

/* -------- PAGE BOUTIQUE ----------- */

.titre_boutique {
    text-align: center;
    margin: 100px 0;
}

form .submit_button input {
    cursor: pointer;
    border: none;
}

.select {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: var(--color-typo);
}

.select label {
    font-size: 1.875em;
}

.select select {
    background-color: var(--color-white);
    text-align: center;
    font-size: 1.2em;
}

.articles {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 100px 0;
}

.articles .card_article {
    width: 304px;
    height: 450px;
    margin: 50px;
    text-align: center;
    color: var(--color-typo);
    background: var(--color-white);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.articles .card_article img,
.contenu_produit .card_article img {
    width: 100%;
    height: 304px;
    object-fit: cover;
    cursor: zoom-in;
}

.articles .card_article p,
.contenu_produit .card_article p {
    font-size: 1.875em;
}

.articles .card_article a,
.articles .card_article p.article_indispo {
    text-decoration: none;
    color: var(--color-typo);
    font-size: 1.5em;
}

.articles .card_article a.image-popup-no-margins,
.contenu_produit .card_article a.image-popu-no-margins {
    cursor: zoom-in;
}

/* POPUP photo article
/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
    padding: 0;
}

/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}

/* padding for main container */
.mfp-no-margins .mfp-container {
    padding: 0;
}


/* for zoom animation 
uncomment this part if you haven't added this code anywhere else */

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

/* -------- PAGE CONNEXION ----------- */

.formulaire .connexion_h1 {
    text-align: center;
    margin: 100px 0;
}

/* -------- PAGE PROFIL ----------- */

.commande .h1 {
    text-align: center;
    margin: 100px 0;
}

.commande p {
    color: var(--color-typo);
    font-size: 1.875em;
    margin: 0 0 50px 150px;
}

table.commandes,
th,
td {
    border: 1px solid var(--color-stroke);
    border-collapse: collapse;
    color: var(--color-typo);
    font-weight: normal;
    text-align: center;
}

table.commandes th,
table.commandes td {
    padding: 10px;
    font-size: 1.875em;
}

.commande table.commandes {
    margin: 0 0 80px 150px;
}

.information p {
    color: var(--color-typo);
    font-size: 1.875em;
    margin-bottom: 50px;
}

/* -------- PAGE COMMANDE ----------- */

.ma_commande .ma_commande_titre {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 350px;
    margin-bottom: 70px;
    text-align: center;
    color: var(--color-typo);
}

.ma_commande .ma_commande_titre .frais {
    display: flex;
    align-items: center;
}

.ma_commande .ma_commande_titre .frais p {
    font-size: 1.875em;
    margin-left: 40px;
}

.ma_commande_contenu {
    display: flex;
    margin-bottom: 70px;
}

.contenu_produit {
    text-align: center;
}

.contenu_produit a {
    color: var(--color-typo);
    font-size: 1.875em;
}

.contenu_produit .card_article {
    width: 304px;
    height: 415px;
    margin: 50px 150px 20px;
    text-align: center;
    color: var(--color-typo);
    background: var(--color-white);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.contenu_info {
    display: flex;
    align-items: center;
}

.contenu_info .info_input {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
}

.info_input label {
    color: var(--color-typo);
    font-size: 1.875em;
    margin-right: 100px;
}

.info_input input {
    width: 100px;
    text-align: center;
    font-size: 20px;
}

.info_input div {
    display: flex;
    justify-content: space-between;
}

.livraison {
    margin-bottom: 150px;
}

.livraison p {
    text-align: center;
    font-size: 1.875em;
    color: var(--color-typo);
    margin-bottom: 80px;
}

.livraison form .input_form {
    width: 100%;
    height: 80px;
    background: transparent;
    font-size: 40px;
    padding-left: 30px;
    margin-bottom: 50px;
}

.livraison form .date_livraison {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    margin-bottom: 100px;
}

.livraison form .date_livraison label,
.livraison form .date_livraison input {
    flex: 1;
    margin-right: 10px;
}

.livraison form .date_livraison label {
    font-size: 40px;
}

.livraison form .date_livraison .input_date {
    margin-bottom: 0;
}

/* -------- PAGE LOTERIE ----------- */
#jeuLoterie {
    margin: 100px 0;
}

#jeuLoterie h2.h1,
#jeuLoterie p.pLoterie {
    text-align: center;
    margin-bottom: 50px;
    color: var(--color-typo);
}

.machine {
    width: 350px;
    margin: 0 auto;
    text-align: center;
    background-color: var(--color-green);
    padding: 20px;
    border-radius: 10px;
}

.slots {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-article);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    height: 50px;
}

.slot {
    background-color: white;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    margin: 0 5px;
    position: relative;
    overflow: hidden;
}

.slot .symbol {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 50px;
    text-align: center;
    font-weight: bold;
    transition: transform 1s;
}

#spinButton {
    background-color: var(--color-article);
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#spinButton:hover {
    background-color: #A79000;
}

.message {
    display: inline-block;
    margin-left: 10px;
}

#formGain {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}

#formGain .submitGain {
    background-color: var(--color-article);
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#formGain .submitGain:hover {
    background-color: #A79000;
}

/* -------- FOOTER ----------- */

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 130px;
    padding: 0 30px;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-stroke);
}

footer img.logo_footer {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
    margin-right: 40px;
    transition: transform 0.7s ease;
}

footer img.logo_footer:hover {
    transform: rotate(360deg);
}

footer .footer_left {
    display: flex;
    align-items: center;
}

footer .footer_right {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer p {
    color: var(--color-typo);
    font-size: 12px;
}

footer p.center {
    text-align: center;
}

.basis50 {
    flex-basis: 50%;
}

footer a.fleche {
    text-align: end;
}

/* -------- RESPONSIVE ----------- */

@media screen and (max-width: 1400px) {

    .presentation {
        flex-direction: column;
        align-items: center;
    }

    .presentation .presentation_g {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 1350px) {

    header nav ul li,
    header nav .btn_clean {
        font-size: 16px;
    }

    header nav {
        width: 800px;
    }

    .nous_trouver .contact_coord .contact_adresse p,
    .nous_trouver .contact_coord .contact_tel p {
        font-size: 2em;
    }
}

@media screen and (max-width: 1200px) {

    .banniere .banniere_logo {
        width: 170px;
    }

    .banniere .titre .ligne {
        width: 200px;
    }

    .bienvenue {
        flex-direction: column;
        padding: 50px 0;
    }

    .bienvenue .bienvenue_g,
    .boutique .boutique_g,
    .fete_mere .fete_mere_g {
        margin-bottom: 50px;
    }

    .boutique,
    .fete_mere {
        flex-direction: column;
        padding-bottom: 50px;
    }

    .coeur {
        height: auto;
    }

    .coeur #coeur {
        flex-wrap: wrap;
    }

    .coeur #coeur .coeur_art {
        margin: 0 10px;
    }

    .select label {
        font-size: 1.2em;
    }

    .select .submit_button {
        font-size: 0.6em;
    }
}

@media screen and (max-width: 1000px) {

    .nav-toggler {
        display: block;
    }

    header nav {
        width: auto;
        display: none;
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.73, 0.11, 0.67, 0.84);
    }

    header nav.active {
        display: block;
        transform: translateY(0);
    }

    header nav ul {
        flex-direction: column;
        margin-top: 298px;
        margin-right: -30px;
        background-color: var(--color-green);
        padding: 25px;
    }

    header nav ul li {
        padding: 2px 0;
        border-bottom: 1px solid var(--color-yellow);
        width: 100%;
    }

    header nav ul.liste-items {
        display: block;
    }

    .banniere .titre .ligne {
        display: none;
    }

    .presentation {
        padding-bottom: 100px;
    }

    .prestation_boutique {
        margin-bottom: 0;
    }

    .prestation_boutique .presta_boutique .banniere_lilas {
        display: none;
    }

    .prestation_boutique .presta_boutique .presta_boutique_ligne {
        position: initial;
        transform: initial;
        background-color: var(--color-article);
        width: auto;
        height: auto;
        text-align: center;
        padding: 60px 0;
    }

    .prestation_boutique .presta_boutique .presta_boutique_ligne h3 {
        padding-bottom: 50px;
    }

    .select {
        justify-content: space-evenly;
        flex-direction: column;
        height: 400px;
    }

    .select label {
        margin-bottom: 20px;
    }

    .select .select_categorie,
    .select .select_couleur {
        display: flex;
        flex-direction: column;
    }

    table.commandes th,
    table.commandes td {
        font-size: 1em;
    }

    .livraison form .date_livraison label {
        font-size: 30px;
    }

    .info_input div {
        flex-direction: column;
    }
}

@media screen and (max-width: 880px) {

    footer {
        flex-direction: column;
        height: 230px;
    }

    footer .footer_left,
    footer .footer_right {
        width: 100%;
    }

    footer .footer_left {
        justify-content: space-between;
        margin-top: 6px;
    }

    footer p.center {
        margin-left: 16px;
    }

    .presentation .presentation_d {
        border: none;
        box-shadow: none;
        width: auto;
    }

    .nous_trouver .contact_titre iframe {
        width: 600px;
    }

    .nous_trouver .contact_coord .contact_adresse p,
    .nous_trouver .contact_coord .contact_tel p {
        font-size: 1em;
    }
}

@media screen and (max-width: 790px) {

    .banniere {
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .banniere .titre,
    .banniere .banniere_img {
        display: none;
    }

    .banniere .banniere_logo {
        top: 50%;
    }

    .comptoir {
        display: none;
    }

    .bienvenue .bienvenue_d {
        display: none;
    }

    .bienvenue .bienvenue_g,
    .boutique .boutique_d,
    .fete_mere .fete_mere_d {
        border: none;
        box-shadow: none;
    }

    .nous_trouver .contact_titre {
        padding: 50px 0;
    }

    .formulaire form .input_form,
    .formulaire form textarea {
        font-size: 30px;
    }

    .contenu_produit {
        margin-bottom: 50px;
    }

    section.ma_commande .ma_commande_titre {
        margin-bottom: 0;
    }

    .ma_commande_contenu {
        flex-direction: column;
        align-items: center;
    }

    .contenu_info .info_input div {
        margin-bottom: 15px;
    }

    .info_input div {
        flex-direction: row;
    }
}

@media screen and (max-width: 700px) {

    .bienvenue .bienvenue_g,
    .boutique .boutique_d,
    .fete_mere .fete_mere_d {
        width: auto;
    }

    .boutique .boutique_g {
        width: 100%;
        box-shadow: none;
    }

    .boutique .boutique_d .para_2 {
        padding: 0 10px;
    }

    .fete_mere .fete_mere_g {
        width: 320px;
        height: auto;
    }

    .nous_trouver .contact_coord {
        flex-direction: column;
        align-items: flex-start;
        margin: 0 30px;
    }

    .nous_trouver .contact_coord .contact_adresse p,
    .nous_trouver .contact_coord .contact_tel p {
        font-size: 1.2em;
    }

    .nous_trouver .contact_coord .contact_tel {
        padding-top: 80px;
    }

    .nous_trouver .contact_coord .contact_horaire {
        margin-top: 80px;
    }

    .nous_trouver .contact_coord .contact_horaire img {
        width: 60px;
        height: 60px;
    }

    .nous_trouver .contact_coord .contact_horaire p span.fs36 {
        font-size: 1.2em;
    }

    .nous_trouver .contact_coord .contact_horaire p span.fs48 {
        font-size: 2.5em;
    }

    .formulaire {
        padding: 0 2%;
        margin-bottom: 50px;
    }

    .formulaire h1 {
        font-size: 2.4em;
        text-align: center;
    }

    .formulaire form textarea {
        height: 400px;
    }

    .commande p {
        margin: 0 0 50px 20px;
    }

    .commande table.commandes {
        margin: 0 0 80px 20px;
    }
}

@media screen and (max-width: 600px) {

    .presentation .presentation_g {
        display: none;
    }

    .presentation .presentation_d h3 {
        margin-bottom: 30px;
    }

    .coeur {
        margin-bottom: 0;
    }

    .nous_trouver .contact_titre iframe {
        width: 375px;
        height: 300px;
    }

    .commande p {
        text-align: center;
        margin: 0 0 50px 0;
    }

    .commande table.commandes {
        margin: 0 10px 80px 10px;
    }

    .formulaire form .input_form,
    .formulaire form textarea,
    .livraison form .date_livraison label {
        font-size: 24px;
    }

    .ma_commande .ma_commande_titre .frais p {
        font-size: 1.5em;
    }

    .livraison form .date_livraison {
        display: block;
        margin-bottom: 50px;
    }

    .livraison form .date_livraison .input_date {
        margin-top: 20px;
    }
}