/* Style général pour toutes les pages */
body {
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Permet au corps de s'étendre sur toute la hauteur de la fenêtre */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* En-tête avec le drapeau italien */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 100%; /* Full width for the header */
    position: relative;
}

.header-section {
    flex: 1;
    height: 100%;
}

/* Partie verte du drapeau italien */
.header-section.green {
    background-color: #0a9f0a;
    display: flex;
    justify-content: center; /* Centre horizontalement le logo */
    align-items: center; /* Centre verticalement le logo */
}

/* Partie blanche du drapeau italien */
.header-section.white {
    background-color: #ffffff;
    display: flex;
    justify-content: center; /* Centre horizontalement le texte */
    align-items: center; /* Centre verticalement le texte */
}

/* Partie rouge du drapeau italien */
.header-section.red {
    background-color: #ff0000;
    display: flex;
    justify-content: center; /* Centre horizontalement le texte */
    align-items: center; /* Centre verticalement le texte */
}

/* Logo dans l'en-tête */
.header-logo img {
    height: 100px;
    margin-left: auto; /* Pousse le logo à gauche */
}

/* Textes de l'en-tête */
.header-text h1 {
    font-size: 24px;
    color: #000;
    text-align: center;
    z-index: 1;
}

/* Barre de navigation centrée sur le drapeau italien */
nav {
    background-color: #ffff00;
    color: black;
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav ul li {
    padding: 15px 30px;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

nav ul li a:hover {
    background-color: #ffffff;
}

/* Section principale */
main {
    flex: 1; /* Permet au main de s'étendre pour occuper l'espace restant */
    padding: 20px;
    margin-top: 0; /* Enlève la marge supérieure pour que le carré bleu commence immédiatement après l'en-tête */
}

/* Section principale avec largeur fixe */
.pizza-list {
    background-color: #87CEEB; /* Bleu ciel pour le carré */
    color: #000; /* Texte noir */
    width: 300px; /* Largeur fixe pour le carré */
    margin: 0 auto; /* Centre le carré */
    border-radius: 10px;
    padding: 20px; /* Espace autour des éléments */
}

/* Style pour les éléments de la liste de pizzas */
.pizza-list ul {
    list-style-type: none; /* Supprime les puces */
    padding: 0; /* Enlève le padding par défaut */
}

.pizza-list li {
    font-size: 18px;
    margin: 10px 0; /* Espacement entre les pizzas */
}

/* Autres sections */
.about p,
.contact p,
.products p {
    margin: 10px 0;
    font-size: 16px;
}

/* Pied de page */
footer {
    text-align: center;
    background-color: #FFFF00;
    color: rgb(0, 0, 0);
    padding: 10px;
}

/* Remove media queries for responsiveness */