:root {
    /* font-family: 'Cabin', sans-serif; */
    font-family: 'Open Sans', sans-serif;

    font-size: 16px;
    --color-text-bright: #FFFFFF;
    --color-title-bright: #FFFFFF;
    --color-text-dark: #8F978F;
    --color-title-dark: #355742;
    --color-body-bg: #3B473C;
    --color-body-bg2: #627D6C;
    --color-section-bg-bright: #FFFFFF;
    --color-button-bg-bright: #FFFFFF;
    --color-button-bg-dark: #48742C;
    color: var(--color-text-bright);

    /* couleurs flyer LPBC */
    --color-lpbc-red: hwb(358 13% 23%);
    --color-lpbc-green: hsl(153, 100%, 30%);
    --color-lpbc-tan-p1: hsl(34, 65%, 74%);
    --color-lpbc-tan-p1-bright: hsl(33, 64%, 87%);
    --color-lpbc-tan-p2: hsl(33, 79%, 79%);
    --color-lpbc-white: hsl(0, 0%, 100%);
    --color-lpbc-black: hsl(345, 6%, 13%);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {


    /* background-image: url("images/bg-main.png"); */

    /*
    background-image: url("images/IMG-20230608-WA0001.jpg");
    background-repeat: no-repeat;
    background-size: 300%;
    background-position: top center;
    */

    /* overflow:hidden; */

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


    /* max-width: 1200px; */


    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;


    /* c'est pas mal mais c'est pas centré sur le tel */
    /* background-image: url("../images/IMG-20230608-WA0001.jpg");
    background-attachment: fixed;
    background-size: cover; */

    /* border: 2px solid red; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: 'Arvo', serif; */
    font-family: 'Volkhov', serif;
    color: var(--color-title-bright);
}

h1 {
    font-size: 3rem;
    text-align: center;
    margin-top: 150px;
    font-family: 'Volkhov', serif;
    /* color:var(--color-lpbc-black); */
    padding: 15px 0;
}

/* h1>strong {
    text-transform: uppercase;
} */

h2 {
    font-size: 1.5rem;

}

h3 {
    font-size: 1.25rem;
}

h4 {
    /* font-family: 'Cabin', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
}

/* je mets en absolute sinon ça décale le reste et ça me fait tout revoir */
.bienvenue {
    position: absolute;
    top: 130px;
    right: 10px;
    /* z-index:1000; */
}

.subtitle {
    /* font-family: 'Cabin', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    text-align: center;
    margin: 20px;
    margin-bottom: 50px;
    /* color:var(--color-lpbc-black); */
}




.bg-img {
    position: fixed;
    top: 0%;
    left: 50%;
    z-index: -1;
    /* background-position: top center; */
    /* width:auto;
    height:100%; */
    transform: translate(-50%, 0%);


    /* marche pas, les dimensions sont 0/0, c'est mieux dans le body */
    /* background-image: url("../images/IMG-20230608-WA0001.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%; */

    /* height:100vh;
    width:100vw; */
}

.bg-img img {
    height: 100vh;

}

/* .bg-img img {
    width:auto;
    height:100%;
} */


/* header,
main,
footer {} */

header {
    width: 100%;
    /* border: 2px solid red; */

    /* horizontal align of logo and burger menu,
    otherwise vertical align of logo and navlinks (at end in media query)*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 20px;

    /* background-color: rgba(0, 0, 0, 0.6); */
    /* background-color: hsl(21, 68%, 71%); */
    /* en fait le hsl de paint est pas du tout celui de VSC ou ailleurs */

    background-color: hsla(358, 72%, 45%, 0.7);

    top: 0%;
    position: fixed;
    z-index: 999;
}

footer {
    width: 100%;
    /* height: 100px; */
    background-color: hsl(153, 100%, 30%, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

section,
div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ajouté pour que le bg beige dépasse au delà */
section {
    max-width: 1200px;
    margin: auto;
}

header>div {
    justify-content: center;

    /* border: 2px solid blue; */
}


/* default is mobile */
/* TODO update to id/class navlinks */
nav {
    display: none;
}

nav a,
footer a {
    color: var(--color-text-bright);
    text-decoration: none;
    /* le a produit un décalage vers le haut et j'ai pas le temps de réfléchir */
}

footer a {
    padding: 10px 10px 0 10px;
}

nav a:hover,
footer a:hover {
    text-decoration: underline;
}

/* ajouté plus tard pour faire comme mohamed (mais c'était sans résultat sur le score yellowlab.tools je crois) */
nav ul {
    list-style: none;
    /* padding-top: 10px; */

}

nav ul>li {
    margin: 10px;
}

.footer-logos {
    flex-direction: row;
    gap: 20px;
    font-size: 2em;
    align-items: center;
}

main {
    background-color: hsla(33, 65%, 74%, 0.692);

    /* pour que la bgc s'étale au delà des conteneurs */
    width: 100%;
    /* (je sais pas pourquoi display:block fait pas l'affaire ? */

    /* beurk */
    padding-bottom: 50px;
}

/* TODO ajustés à partir de .container-villes mais ce sera à faire proprement */
.green-container {
    /* border: 6px solid var(--color-lpbc-green); */
    border: 6px solid var(--color-lpbc-green);
    border-radius: 12px;
}

.white-container {
    /* border: 6px solid var(--color-lpbc-white); */
    border: 6px solid var(--color-lpbc-white);
    border-radius: 8px;
}

.red-container {
    /* border: 6px solid var(--color-lpbc-red); */
    border: 6px solid var(--color-lpbc-red);
    border-radius: 4px;
}

.section-title .green-container {
    margin-top: 200px;
    margin-bottom: 50px;
}

.section-title .red-container {
    padding: 10px;
    color: var(--color-lpbc-black);
    background-color: var(--color-lpbc-tan-p1-bright);
    opacity: 0.8;
    font-weight: bolder;
}


.container-villes {
    padding: 10px;
    color: var(--color-lpbc-black);
    background-color: var(--color-lpbc-tan-p1-bright);
    border: 5px solid var(--color-lpbc-green);
    opacity: 0.8;
    font-weight: bolder;
    margin-bottom: 50px;

    /* Frédéric a demandé de l'espace en dessous du titre */
    margin-top: 200px;
}

.jour {
    /* font weight already boldest ;( */
    color: var(--color-lpbc-green);
}

.lieu {
    font-weight: lighter;
    color: var(--color-lpbc-black);
}


button,
.button-a {
    /* color: var(--color-title-dark); */
    background-color: var(--color-lpbc-green);
    color: var(--color-lpbc-white);

    /* sur pizza perso j'ai un bouton 100% stretch alors que sur l'index non */
    /* j'ai rajouté un 2ème layer de div autour pour éviter les 3 lignes ci-dessous */
    /* display: flex;
    width: max-content;
    margin:auto; */

    border: none;
    padding: 12px 28px;
    font-family: 'Cabin', sans-serif;
    font-size: 1rem;
    border-radius: 6px;
}

/* utilisé par le bouton de la pizza du mois */
/* w3c validator aime pas du tout les button autour de a donc je change en div pour voir */
.button-a a {
    color: var(--color-lpbc-white);
    text-decoration: none;
}

/* ah bon ça marche ok */
/* TODO vérifier si j'ai pas des hover de a elsewhere qui rendent ça redondant */
.button-a:hover a {
    color: var(--color-lpbc-green);
}



.button-dark {
    /* background-color: var(--color-button-bg-dark); */
    background-color: var(--color-lpbc-green);

    color: var(--color-text-bright);
}

.button-dark a {
    color: var(--color-text-bright);
    text-decoration: none;
}


button:hover,
.button-a:hover {
    cursor: pointer;
    transition: all ease 0.5s;

    /* background-color: var(--color-button-bg-dark); */
    color: var(--color-lpbc-green);

    background-color: var(--color-text-bright);
}

.button-dark:hover {

    background-color: var(--color-button-bg-bright);
    color: var(--color-button-bg-dark);
}

.button-dark a:hover {

    background-color: var(--color-button-bg-bright);
    color: var(--color-button-bg-dark);
}




.section-pizza-du-moment,
.section-informations {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    /* background-color: var(--color-section-bg-bright); */
    background-color: hsla(33, 80%, 84%, 0.8);

    /* color: var(--color-text-dark); */
    color: var(--color-lpbc-black);
    padding: 20px;
}

.section-pizza-du-moment {
    flex-wrap: wrap-reverse;
    margin-bottom: 50px;
}

.section-pizza-du-moment>* {
    gap: 10px;
}

.section-informations {
    background-color: hsla(21, 100%, 95%, 0.804);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 12px;
}


.section-informations>div {
    /* width: 50%; */
    /* justify-content: flex-start; */
    /* ↑ does nothing, need to investigate */
    /* flex:0 1 40%; */
    /* i tried a bunch of things there */

    max-width: 500px;
}


.section-informations>div>*:first-child {
    height: 40px;
    /* border:1px solid blue; */
}


.container-pdm-illust {
    border: 1px solid black;
}


.section-pizza-du-moment h2,
.section-pizza-du-moment h3,
.section-pizza-du-moment h4 {
    /* color: var(--color-title-dark); */
    color: var(--color-lpbc-black);
}

.section-pizza-du-moment h3 {
    margin-top: 10px;
    color: var(--color-lpbc-green);
}

.section-pizza-du-moment h4 {
    font-weight: bolder;
}

.section-pizza-du-moment p>.pt-1 {
    color: var(--color-lpbc-black);
    /* border-bottom: 4px solid var(--color-lpbc-red);
    border-radius: 50%; */
}

.section-pizza-du-moment p>.pt-2 {
    color: var(--color-lpbc-black);

    /* color: var(--color-lpbc-green); */
    /* background-color: hsla(21, 100%, 95%, 0.804); */
    /* border-top: 5px solid var(--color-lpbc-tan-p1); */
    /* border-left: 5px solid var(--color-lpbc-white);
    border-right: 5px solid var(--color-lpbc-white);
    padding-left:5px;
    padding-right:5px;

    font-size: 1.1em; */
}



/* .container-pdm-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
} */

.section-informations h2,
.section-informations h3,
.section-informations h4 {
    color: var(--color-lpbc-green);
}

.section-bg-img {
    height: 50px;
}


.section-resaux-sociaux,
.section-galerie-photos {
    /* background-color: var(--color-body-bg2); */
    background-color: var(--color-section-bg-bright);
}

/* rajouté >* quand j'ai rajouté les containers types */
/* .pizzas-container>* { */
/* 09/11 obligé de renommer sinon c'est la pagaille avec le redesign - en fait non c'est juste pareil en plus propre lol */
.pizza-type {

    max-width: 1200px;


    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 40px;
}

/* pizza-perso */
/* c/c et modifié à l'arrache mais ça rend pas mal */
.pp-container {
    max-width: 800px;
    margin: auto;

    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 40px;
}

.pizza-type>h3 {
    margin: 30px;
    margin-top: 50px;
    font-size: 1.25em;
    /* display: block; */
    width: 100%;
    text-align: center;
    /* font-family: 'Open Sans', sans-serif; */
    /* font-family: 'Cabin', sans-serif; */
    color: var(--color-lpbc-black);
    /* color: var(--color-lpbc-green); */
    background-color: hsla(21, 100%, 95%, 0.804);
    /* border-top: 5px solid var(--color-lpbc-tan-p1); */
    border-left: 5px solid var(--color-lpbc-green);
    border-right: 5px solid var(--color-lpbc-green);
    padding: 10px;

    /* science */
    /* position:relative; */
}

.pizza-type>h3 strong {
    color: var(--color-lpbc-green);
    font-size: 1.25em;
}

/* science */
/* c'est décalé horizontalement, not sure why */
/*
.pizza-type>h3::after {
    content: "Emmental / Origan";
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0%;
    color: var(--color-lpbc-black);
    background-color: hsla(21, 100%, 95%, 0.804);
    border-left: 5px solid var(--color-lpbc-green);
    border-right: 5px solid var(--color-lpbc-green);
}
*/

/* 2023-11-09 test redesign pour frédéric */
/* .red-container .pizza-card{
    background-color: hsl(33, 80%, 84%, 0.8);
    flex: 0 1 25%;
} */

/* .pt-tomate .pizza-card,
section.pt-1 {
    border: 5px solid var(--color-lpbc-red);
    border-radius: 12px;
} */


.pizza-card {
    /* border-radius: 8px; */
    /* background-color: hsla(21, 100%, 95%, 0.804); */
    /* --color-lpbc-tan-p1: hsl(34, 65%, 74%);
    --color-lpbc-tan-p2: hsl(33, 80%, 79%); */
    background-color: hsl(33, 80%, 84%, 0.8);
    /* width: 67%; */
    flex: 0 1 25%;
    /* ↑ yolo pour éviter le stretching dû aux ingrédients */
    /* @TODO j'arrive pas à l'ajuster for now */
    /* padding: 16px; */
    /* gap: 16px; */
}

/*
.pc-top img {
    width:100%;
    overflow:hidden;
}
*/

.pc-bottom {
    height: 100%;
    gap: 12px;
    padding: 12px;

    justify-content: space-between;
}

.pt-tomate .pizza-card,
section.pt-1 {
    border: 5px solid var(--color-lpbc-red);
    border-radius: 12px;
}

.pt-creme .pizza-card,
section.pt-2 {
    border: 5px solid var(--color-lpbc-white);
    border-radius: 12px;
}

/* 2023-11-09 redesign */
.pizzas-container2 .pizza-card {
    border: none;
}

/* 2024 */
.pizzas-container3 .pizza-card {
    border: none;
    background-color: hsl(33, 80%, 84%, 0.0);
    /* border-radius: 0px; */
}

.pizzas-container3 .pizza-card .pc-bottom {
    background-color: hsl(33, 80%, 84%, 0.8);
}

.pizzas-container3 .pizza-card div {
    border-radius: 0;
}

.pp-prix {

    border: 5px solid var(--color-lpbc-green);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

    border-radius: 12px;
    background-color: hsl(33, 80%, 84%, 0.8);

    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 12px;

    justify-content: space-between;
}

.pizza-card *,
.pp-prix * {
    color: black;
    /* font-family: 'Cabin', sans-serif; */
    font-family: 'Open Sans', sans-serif;
}

.pizza-card button {
    color: var(--color-lpbc-white);
}

.pizza-card button:hover {
    color: var(--color-lpbc-green);
}

.pizza-card img {
    width: 100%;
    /* height:auto; */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}


.pizza-card .pc-prix-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.pc-name {
    font-size: 1.6rem;
    color: var(--color-lpbc-red);
}

.pt-creme .pc-name {
    /* color: var(--color-lpbc-tan-p1); */
    color: var(--color-lpbc-white);
}

.pc-ingredients {
    /* font-size: 1.1em; */
    font-weight: bolder;
    text-align: center;
    /* max-width: 50%; */
}

.pc-taille {
    font-size: 1rem;
    font-weight: lighter;
}

.pc-prix {
    color: var(--color-lpbc-green);
    font-size: 1.2rem;
    font-weight: bolder;
}


#burger-menu {
    border-radius: 6px;
    /* border: 2px solid white; */
    padding: 2px;
    transform: scale(1);
    transition: all ease 0.3s;
}

#burger-menu:hover {
    cursor: pointer;
    transform: scale(1.25);
}

#burger-menu>* {
    margin: 2px;
    width: 28px;
    height: 4px;
    /* background-color: white; */
    border: 1px solid white;
    border-radius: 8px;
}

.vertical-display {
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    /* permet de superposer à ce qui apparaît en dessous apparently */
    width: 100%;
    align-items: center;
    top: 0px;
    left: 0px;
}

.vertical-display-flyer-style {
    display: flex;
    flex-direction: column;
    background-color: var(--color-lpbc-tan-p1);
    position: absolute;
    /* permet de superposer à ce qui apparaît en dessous apparently */
    width: 100%;
    align-items: center;
    top: 120px;
    left: 0px;
    border: 10px solid var(--color-lpbc-green);
    display: block;
}

.vertical-display-flyer-style>div {
    border: 5px solid var(--color-lpbc-white);
    display: block;
}

.vertical-display-flyer-style>div>div {
    border: 5px solid var(--color-lpbc-red);
}

.vertical-display-flyer-style a {
    color: var(--color-lpbc-black);
    font-weight: bolder;
}


/* toutes les pages sauf l'index */
.h1-style-2 {
    font-size: 2rem;
    margin-top: 150px;
    margin-bottom: 40px;
    text-align: center;
}

#pizza-filters {
    /* display: block; */
    text-align: center;
}

#pizza-filters ul {
    list-style: none;
}

#pizza-filters li {
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.664);

    border-radius: 20px;
    margin: 8px;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.616);
}

#pizza-filters li:hover {
    cursor: pointer;
    /* background-color: rgba(1, 182, 1, 0.616); */
    background-color: rgba(2, 201, 2, 0.616);
    background-color: hsla(128, 100%, 30%, 0.7);
}

/* doesn't work on its own */
#pizza-filters li:active {
    /* cursor: pointer; */
    /* ↑ not sure i need that one */

    /* background-color: rgba(1, 182, 1, 0.616); */
    background-color: rgba(2, 201, 2, 0.616);
    background-color: hsl(128, 100%, 30%, 0.7);
}

#pp-ingredients {
    text-align: center;
    display: flex;
    max-width: 100%;
}

/* perma flex contrairement aux pizza filters */
#pp-ingredients ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

/* j'ai pas pu utiliser le selecteur de #pizza-filters li,
à cause de la bgc lors des clics qui marche pas bien :(*/
#pp-ingredients li {
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.664);

    border-radius: 20px;
    margin: 8px;
    padding: 8px 16px;

    margin: 0;
}

/* rajouté l'id sinon #pp-ingredients li overwrites */
/* j'aurais juste voulu un mode on ou active mais ça marche pas bien et là pas le temps de voir pourquoi */
#pp-ingredients li.on,
#pp-ingredients li.include {
    background-color: hsl(128, 100%, 30%, 0.7);
}

#pp-ingredients li.exclude {
    background-color: hsla(0, 100%, 30%, 0.7);
    text-decoration: line-through;
}

#pp-ingredients li.off {
    background-color: rgba(0, 0, 0, 0.616);
}

/* 
    je sais pas pourquoi à cause des hover, les effets en version mobile ont un clic de retard
    donc j'ai bougé le reste en media queries, sachant qu'il manque le cas des tablettes
*/

#pp-ingredients li.on:hover {
    cursor: pointer;
    /* c'est pas plus explicite en rouge en fait */
    /* background-color: hwb(358 13% 23% / 0.7); */
    /* background-color: rgba(0, 0, 0, 0.616); */
    /* transition:all ease 0.3s; */
}

#pp-ingredients li.off:hover {
    cursor: pointer;
    /* background-color: hsl(128, 100%, 30%, 0.7); */
    /* transition:all ease 0.3s; */
}

#pp-ingredients li.include:hover,
#pp-ingredients li.exclude:hover {
    cursor: pointer;
}

.contact-p {
    font-size: 1.25em;
}


.form-contact {
    margin-top: 50px;
    padding: 20px;
    margin: auto;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    /* background-color: hsl(33, 80%, 84%, 0.8); */
    /* color: var(--color-lpbc-black); */
    gap: 20px;
    border-radius: 10px;
    /* font-weight: bolder; */
}

/*
bootstrap : 
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
    transition-property: border-color, box-shadow;

*/
.form-contact div {
    display: block;
}

.form-contact label {
    display: block;
    text-align: left;
}

#form-cgu-div {
    display: flex;
    flex-direction: row;

    width: fit-content;
    margin-top: 8px;
    margin-bottom: 16px;
}

#form-cgu-div input {
    width: min-content;
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

.form-contact input,
.form-contact textarea,
.form-contact select {

    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.form-success,
.form-error {
    font-weight: bolder;
    background-color: hsla(21, 100%, 95%, 0.804);
    padding: 8px 20px;
    text-align: center;
    max-width: 100%;

    /* width:20%; */

    /* somehow c'est pire avec display flex o_O */
    /* display: flex; */

    /* ↓ full yolo dans l'inspecteur, j'ai pas compris pourquoi le reste marche pas */
    width: max-content;
    margin: auto;
}

.form-success {
    color: var(--color-lpbc-green);
    border-left: 5px solid var(--color-lpbc-green);
    border-right: 5px solid var(--color-lpbc-green);

}

.form-error {
    color: var(--color-lpbc-red);
    border-left: 5px solid var(--color-lpbc-red);
    border-right: 5px solid var(--color-lpbc-red);
}

/* p>a {
    color:var(--color-lpbc-green);
} */


.p-lien-oubli-mdp {
    text-align: right;
}

.mentions-legales {

    background-color: hsla(33, 80%, 84%, 0.8);
    margin: auto;
    width: 95%;
    max-width: 1200px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 0 20px 20px 20px;
}

.mentions-legales * {
    color: var(--color-lpbc-black);
    font-family: 'Open Sans', sans-serif;
    line-height: 2em;
}

.mentions-legales h1 {
    font-size: 2em;
    text-transform: uppercase;
}

.mentions-legales h2 {
    font-size: 1.25em;
    margin-top: 20px;
}

.mentions-legales h3 {
    font-size: 1.1em;
    margin-top: 20px;
}


.mentions-legales p {
    color: var(--color-lpbc-black);
}

.footer-div {
    display: flex;
    flex-direction: row;
    margin: 5px;
}

.footer-copyright {
    margin-top: 20px;
    margin-bottom: 10px;
}


.hide {
    display: none;
}

@media screen and (min-width: 600px) {
    #burger-menu {
        display: none;
    }

    nav,
    nav ul {
        display: flex;
    }

    /* hack pour les divs de .vertical-display-flyer-style */
    nav div {
        flex-direction: row;
    }

    header {
        display: block;
    }

    main {
        padding-top: 50px;

        /* hack pour que la photo de background déborde pas des sections colorées */
        /* c'est pas terrible comme méthode ;_; */
        /* je pourrais bouger ça hors des media queries pour voir */
        min-height: 90vh;
    }

    /* liste horizontale pour les écrans larges */
    #pizza-filters ul {
        display: flex;
    }

    #pp-ingredients li.on:hover,
    #pp-ingredients li.exclude:hover {
        /* c'est pas plus explicite en rouge en fait */
        /* background-color: hwb(358 13% 23% / 0.7); */
        background-color: rgba(0, 0, 0, 0.616);
        transition: all ease 0.3s;
    }

    #pp-ingredients li.off:hover {
        background-color: hsl(128, 100%, 30%, 0.7);
        transition: all ease 0.3s;
    }

    #pp-ingredients li.include:hover {
        background-color: hsla(0, 100%, 30%, 0.7);
        text-decoration: line-through;
        transition: all ease 0.3s;
    }

    /* no longer used (nor working) avec la nouvelle gestion du background */
    /* body {
        background-size: 200%;
    } */
}


/* non c'est moche en fait */
/* @media screen and (min-width: 1200px) {


    .container-villes {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

} */