/* =========================================================
   FOND GRANULEUX
   ========================================================= */

#wrapper5{
    background-color:#363636;

    background-image:
        radial-gradient(rgba(21,21,21,0.03) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);

    background-size:8px 8px, 12px 12px;
    background-position:0 0, 4px 4px;
}


/* =========================================================
   BLOCS DÉROULANTS
   ========================================================= */

.image-boissons,
.image-pizzas-creme,
.image-pizzas-tomate,
.image-desserts{
    cursor:pointer;
    display:inline-block;
}


/* Listes fermées par défaut */

.liste-boissons,
.liste-pizzas-creme,
.liste-pizzas-tomate,
.liste-desserts{
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-top:0;

    transition:
        max-height .8s ease,
        opacity .4s ease,
        margin-top .4s ease;
}


/* Ouverture des listes */

#toggle-boissons:checked ~ .liste-boissons,
#toggle-pizzas-creme:checked ~ .liste-pizzas-creme,
#toggle-pizzas-tomate:checked ~ .liste-pizzas-tomate,
#toggle-desserts:checked ~ .liste-desserts{
    max-height:5000px;
    opacity:1;
    margin-top:15px;
}


/* =========================================================
   STRUCTURE GÉNÉRALE
   ========================================================= */

.pizzas,
.boissons,
.desserts{
    width:100%;
}


.pizzas,
.pizza,
.ingredients,
.dessert,
.details-dessert{
    text-align:left !important;
}


/* =========================================================
   CENTRAGE DES DESSERTS
   ========================================================= */

.desserts{
    text-align:center;
}

.image-desserts{
    cursor:pointer;
    display:inline-block;
}

.image-desserts img{
    display:block;
    max-width:100%;
    height:auto;
    margin:0 auto;
}

.liste-desserts{
    width:450px;
    text-align:left;
}


/* =========================================================
   LIGNES TITRE + PRIX
   ========================================================= */

.pizza-header,
.boisson,
.dessert-header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:15px;
}


/* =========================================================
   TITRES
   ========================================================= */

.nom-pizza,
.categorie-boisson,
.nom-dessert{
    color:#000;
    font-size:22px;
    font-weight:800;
    text-transform:uppercase;
    margin-top:1em;
}


/* Pizzas et boissons restent sur une ligne */

.nom-pizza,
.categorie-boisson{
    white-space:nowrap;
}


/* Desserts : autorise le retour à la ligne */

.nom-dessert{
    white-space:normal;
}


/* =========================================================
   PRIX
   ========================================================= */

.prix-pizza,
.prix-boisson,
.prix-dessert{
    color:#000;
    font-weight:800;
    text-align:right;
    white-space:nowrap;
}


.prix-pizza,
.prix-dessert{
    font-size:22px;
    margin-left:auto;
}


.prix-boisson{
    font-size:20px;
}


/* =========================================================
   DÉTAILS
   ========================================================= */

.ingredients,
.nom-boisson,
.details-dessert{
    color:inherit;
    font-size:24px;
}


.ingredients{
    display:block;
    width:100%;
    line-height:1;
}


.details-dessert{
    display:block;
    width:100%;
    line-height:1.2;
    margin-top:5px;
    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
}


.contenance{
    font-size:16px;
}


/* =========================================================
   ÉTIQUETTE NOUVEAUTÉ
   ========================================================= */

.nouveaute{
    height:30px;
    width:auto;
    margin-left:8px;
    vertical-align:baseline;
}


/* =========================================================
   TOURNÉE / CAMION
   ========================================================= */

.pizza-lieux{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
}


.ville{
    color:#008f42;
    font-weight:bold;
    text-transform:uppercase;
}


.ligne{
    margin-top:8px;
}


/* =========================================================
   VERSION MOBILE
   ========================================================= */

@media (max-width:768px){

    .pizza-lieux{
        flex-direction:column-reverse;
    }


    .ligne{
        display:flex;
        gap:8px;
        margin-top:8px;
    }


    /* Desserts */

    .liste-desserts{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        padding:0 15px;
        overflow:hidden;
    }


    .dessert{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }


    .dessert-header{
        display:flex;
        width:100%;
        justify-content:space-between;
        align-items:baseline;
        gap:10px;
        flex-wrap:wrap;
    }


    .nom-dessert{
        font-size:20px;
        line-height:1.2;
        white-space:normal;
        min-width:0;
    }


    .prix-dessert{
        font-size:20px;
        margin-left:auto;
        white-space:nowrap;
        flex-shrink:0;
    }


    .details-dessert{
        width:100%;
        max-width:100%;
        font-size:20px;
        line-height:1.3;
        margin-top:5px;
        white-space:normal;
        overflow-wrap:break-word;
        word-break:normal;
        box-sizing:border-box;
    }


    /* Pizzas */

    .nom-pizza{
        font-size:20px;
    }

    .prix-pizza{
        font-size:20px;
    }

    .ingredients{
        font-size:20px;
    }


    /* Boissons */

    .categorie-boisson{
        font-size:20px;
    }

    .prix-boisson{
        font-size:18px;
    }

    .nom-boisson{
        font-size:20px;
    }
}