/* =========================================
   1. IMPORTS & VARIABLES
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@300;400;500;700&display=swap');

:root {
    --color-bg: #070505;
    --color-text: #fafaf4;
    --color-gold: #D4AF37;
    --color-dark-glass: rgba(15, 15, 15, 0.90);
    --font-title: 'Playfair Display', serif;
    --font-body: 'Poppins', sans-serif;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* =========================================
   2. TYPOGRAPHIE & BASE
   ========================================= */
h1, h2, h3 {
    font-family: var(--font-title);
    font-weight: 700;
    margin-top: 0;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* =========================================
   3. NAVIGATION
   ========================================= */
nav {
    text-align: center;
    padding: 15px 0;
    background-color: #000;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
}

nav a {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 2px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

nav a:hover {
    color: var(--color-gold);
}

/* =========================================
   4. HEADER & ACCUEIL (ANTI-ZOOM MOBILE)
   ========================================= */
.Accueil header {
    position: relative;
    width: 100%;
    /* Sur PC, on garde le plein écran, c'est joli */
    height: 100vh; 
    overflow: hidden;
    background-color: #000; /* Fond noir au cas où */
}

.Accueil header img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit l'écran sur PC */
    object-position: center; 
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    color: white;
    animation: bounce 2s infinite;
    z-index: 10;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -15px); }
    60% { transform: translate(-50%, -7px); }
}

/* --- RÉGLAGE MOBILE --- */
@media screen and (max-width: 768px) {
    .Accueil header {
        /* On annule la hauteur forcée ! */
        height: auto; 
        min-height: 300px; /* Une hauteur minimale de sécurité */
    }

    .Accueil header img {
        /* L'image reprend ses proportions naturelles */
        height: auto; 
        min-height: 300px;
        position: relative;
        /* "Contain" affiche TOUTE l'image sans couper, mais peut laisser du vide noir.
           "Cover" coupe un peu. Ici on laisse en Cover mais avec height auto, 
           ça limitera le zoom au maximum possible. */
        object-fit: cover; 
    }
    
    /* On remonte un peu la flèche car le header sera plus petit */
    .scroll-down {
        bottom: 20px;
        font-size: 2rem;
    }
}


/* =========================================
   5. BANDE IMAGES (Défilement)
   ========================================= */
.bande-images {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #000;
    position: relative;
}

.images-container {
    display: flex;
    gap: 0;
    animation: defilement 30s linear infinite;
    width: max-content;
}

.images-container img {
    height: 200px;
    width: auto;
    object-fit: cover;
}

@keyframes defilement {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* =========================================
   6. SECTION DÉCOUVERTE
   ========================================= */
.decouverte {
    background-color: #0c0c0c;
    padding: 40px 10px;
    text-align: center;
}

.titre-decouverte {
    font-size: 2.5rem;
    color: var(--color-gold);
    margin-bottom: 30px;
}

.conteneur-decouverte {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.item {
    flex: 1 1 300px;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}

.item video {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.item span {
    display: block;
    padding: 15px;
    font-size: 1.2rem;
    color: white;
    font-family: var(--font-title);
}

/* =========================================
   7. PAGE MENU
   ========================================= */
.bande-menu {
    background: #111;
    padding: 40px 0;
    text-align: center;
}

.bande-menu h2 {
    color: var(--color-gold);
    font-size: 3rem;
    text-transform: uppercase;
    margin: 0;
}

.menu-section {
    background: var(--color-dark-glass);
    border: 1px solid rgba(255,255,255,0.1);
    margin: 20px auto;
    max-width: 900px;
    padding: 20px;
    border-radius: 15px;
    width: 95%;
}

.menu-header {
    text-align: center;
    margin-bottom: 30px;
}

.image-header_Menu, .logo-menu {
    max-width: 200px;
    height: auto;
}

.menu-category {
    margin-bottom: 50px;
    text-align: center;
}

.menu-category h2 {
    color: var(--color-gold);
    border-bottom: 1px solid var(--color-gold);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* TABLEAUX (Style général) */
.menu-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.menu-table td {
    padding: 15px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    vertical-align: middle;
}

.pizza-name {
    text-align: left;
    font-weight: bold;
    font-size: 1.1rem;
    color: white;
}

.ingredients {
    font-weight: normal;
    font-size: 0.85rem;
    color: #aaa;
    display: block;
    margin-top: 5px;
    font-style: italic;
    white-space: normal; /* Force le texte à aller à la ligne */
}

/* Règle par défaut pour les colonnes de PRIX (sauf la 1ère colonne) */
/* Met le texte en Or, Gras et sur une seule ligne */
.menu-table td:not(:first-child) {
    color: var(--color-gold);
    font-weight: bold;
    text-align: center;
    white-space: nowrap; /* Empêche les prix de se couper */
}

/* --- EXCEPTION POUR BURGERS et PAINPIZZAS --- */
/* Dans ces tableaux, la 2ème colonne n'est pas un prix, mais une description ! */
/* On annule donc le style "Prix" pour remettre un style "Texte" */
#Burger .menu-table td:nth-child(2),
#Painpizzas .menu-table td:nth-child(2) {
    white-space: normal; /* AUTORISE LE RETOUR A LA LIGNE */
    color: #aaa;         /* Couleur grise */
    font-weight: normal;
    text-align: left;
    font-size: 0.9rem;
    font-style: italic;
    min-width: 200px;    /* Donne un peu de largeur sur PC */
}

.avis-btn {
    display: inline-block;
    background: var(--color-gold);
    color: #000;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 50px;
    margin-top: 20px;
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

/* =========================================
   8. MAP & FOOTER
   ========================================= */
.map-container iframe {
    width: 100%;
    height: 350px;
    border-radius: 10px;
}

.commande-section {
    background: #000;
    padding: 50px 20px;
    text-align: center;
}

.phone-icon {
    font-size: 1.5rem;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--color-gold);
    padding: 10px 25px;
    border-radius: 50px;
    margin-top: 20px;
}

footer {
    background: #111;
    padding: 30px 20px;
    text-align: center;
}

.footer-signature img {
    max-width: 150px;
    height: auto;
    display: inline-block;
}

/* =========================================
   9. PAGE HISTOIRE
   ========================================= */
.histoire {
    background-image: url("images/Italie.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#header_histoire {
    background-image: url("images/Fond_histoire.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 300px;
    color: white;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#header_histoire h1 {
    font-family: "Rage Italic", cursive;
    font-size: 4rem;
    text-shadow: 2px 2px 4px black;
    margin: 0;
}

#histoire {
    background: rgba(0,0,0,0.85);
    padding: 40px 20px;
    margin: 40px auto;
    border-radius: 15px;
    max-width: 900px;
}

.presentation-chefs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
}

.chef img {
    border-radius: 15px;
    border: 2px solid var(--color-gold);
}


/* =========================================
   10. RESPONSIVE MOBILE
   ========================================= */
@media screen and (max-width: 768px) {
    
    nav {
        display: flex;
        flex-direction: column;
        padding: 10px 0;
    }
    nav a {
        display: block;
        padding: 10px;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .titre-decouverte { font-size: 1.8rem; }
    .bande-menu h2 { font-size: 2rem; }

    /* --- MODE CARTE MOBILE --- */
    .menu-table thead { display: none; }
    
    .menu-table, .menu-table tbody, .menu-table tr, .menu-table td {
        display: block;
        width: 100%;
    }

    .menu-table tr {
        margin-bottom: 20px;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 10px;
        background: rgba(255,255,255,0.03);
        padding: 15px;
    }

    .menu-table td {
        text-align: center;
        padding: 5px 0;
        border: none;
        /* CRUCIAL : Force le texte à aller à la ligne sur mobile pour TOUTES les cellules */
        white-space: normal !important; 
    }

    .menu-table td.pizza-name {
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-size: 1.3rem;
        color: var(--color-gold);
    }

    /* Gestion Burger/Painpizzas sur Mobile */
    /* On s'assure que la description ne soit pas traitée comme un prix */
    #Burger .menu-table td:nth-child(2),
    #Painpizzas .menu-table td:nth-child(2) {
        text-align: center; /* Centré sur mobile c'est plus joli */
        color: #aaa;
    }

    /* Labels "Moyenne / Familiale" pour les Pizzas uniquement */
    .menu-category:not([id]) .menu-table td:nth-child(2) {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
    }
    .menu-category:not([id]) .menu-table td:nth-child(2)::before {
        content: "Moyenne :";
        font-weight: normal;
        color: #aaa;
    }

    .menu-category:not([id]) .menu-table td:nth-child(3) {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
        color: var(--color-gold);
    }
    .menu-category:not([id]) .menu-table td:nth-child(3)::before {
        content: "Familiale :";
        font-weight: normal;
        color: #aaa;
    }

    /* Ajustements finaux Mobile */
    #header_histoire { height: 200px; }
    #header_histoire h1 { font-size: 2.5rem; }
    .presentation-chefs { flex-direction: column; align-items: center; }
    .chef { width: 100%; max-width: 300px; }
    .footer-signature img { max-width: 100px; }
}