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

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        zoom: 1 !important;
        padding-top: 0 !important;
    }


    /* =========================
       HERO ACCUEIL
       ========================= */

    .hero {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;

        padding: 30px 20px 40px !important;
        margin: 0 !important;

        display: block !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        transform: none !important;
    }

    .hero-left {
        width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        text-align: center !important;
    }

    .hero-left .subtitle {
        width: 100% !important;

        margin: 20px 0 15px !important;

        font-size: 15px !important;
        line-height: 1.4 !important;

        text-align: center !important;
    }

    .hero-left h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 20px !important;

        font-size: 36px !important;
        line-height: 1.1 !important;

        text-align: center !important;
    }

    .hero-text {
        width: 100% !important;

        margin: 0 0 25px !important;

        font-size: 16px !important;
        line-height: 1.5 !important;

        text-align: center !important;
    }

    .hero-left .button {
        margin: 0 auto 30px !important;
    }

    .hero-right {
        width: 100% !important;

        margin: 0 !important;

        display: flex !important;
        justify-content: center !important;

        transform: none !important;
    }

    .hero-right img {
        width: 100% !important;
        max-width: 350px !important;
        height: auto !important;

        margin: 0 auto !important;

        transform: none !important;
    }


    /* =========================
       L'HUITRIE
       ========================= */

    .partner-section {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        padding: 40px 20px !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        overflow: hidden !important;
    }

    .partner-button {
        position: static !important;

        width: 100% !important;
        max-width: 340px !important;

        margin: 0 auto 30px !important;
        padding: 18px !important;

        transform: none !important;

        font-size: 24px !important;
        line-height: 1.3 !important;

        text-align: center !important;
    }

    .partner-logo {
        position: static !important;

        width: 150px !important;
        height: auto !important;

        margin: 0 auto !important;

        transform: none !important;
    }

    .registered {
        position: static !important;

        margin: 5px 0 0 !important;

        transform: none !important;
    }


    /* =========================
       CONTACT
       ========================= */

    .contact {
        width: 100% !important;

        padding: 40px 20px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }

    .contact h2 {
        width: 100% !important;

        margin: 0 0 30px !important;

        font-size: 42px !important;

        text-align: center !important;
    }

    .contact-content {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 30px !important;

        transform: none !important;
    }

    .contact-info {
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;

        transform: none !important;
    }

    .contact-info p {
        width: 100% !important;

        margin: 0 0 15px !important;

        font-size: 17px !important;
        line-height: 1.5 !important;

        text-align: center !important;

        overflow-wrap: anywhere !important;
    }

    .map-container {
        width: 100% !important;
        max-width: 350px !important;

        margin: 30px auto !important;

        transform: none !important;
    }

    .map-container iframe {
        width: 100% !important;
        height: 250px !important;
    }

}

/* ===== LOGO L'HUITRIER + ® MOBILE ===== */

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

    .partner-logo {
        position: relative !important;
        top: -80px !important;
        left: 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;

        margin: 0 !important;
    }

    /* Le ® placé immédiatement après le logo */
    .partner-logo + .registered {
        position: relative !important;

        display: inline-block !important;
        vertical-align: top !important;

        /* Annule les réglages du CSS PC */
        left: 50px !important;

        /* Remonte le ® avec le logo */
        top: -150px !important;

        /* Petit ajustement à droite du logo */
        margin-left: 5px !important;

        font-size: 20px !important;
        line-height: 1 !important;
    }

}


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

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .navbar {
        width: 100vw !important;
        max-width: none !important;

        margin: 0 !important;

        position: relative !important;
        top: 0 !important;
        left: 0 !important;

        border-radius: 0 !important;
    }
}

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

    footer {
        width: 100vw !important;
        max-width: none !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        margin-bottom: 0 !important;
        top: 40px !important;
        left: 0 !important;
        right: 0 !important;

        border-radius: 0 !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}

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

    .navbar .logo-container {
        position: relative !important;
        left: -38px !important;
    }

}

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

    .navbar .menu {
        column-gap: 40px !important;
        row-gap: 14px !important;
    }

}

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

    .products {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        padding: 20px !important;
    }

    .product-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .product-card img {
        width: 100% !important;
        height: auto !important;
        max-height: 380px !important;
        object-fit: cover !important;
    }

    .product-card h3,
    .product-card h3[class*="subtitle"] {
        width: 100% !important;
        max-width: 100% !important;

        left: 0 !important;
        right: 0 !important;
        transform: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        text-align: left !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    .product-card p {
        width: 100% !important;
        max-width: 100% !important;

        left: 0 !important;
        right: 0 !important;
        transform: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        box-sizing: border-box !important;
    }

    .product-card p[class$="-line"],
    .product-card .product-line {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;

        margin: 0 !important;
        padding: 0 20px 20px !important;

        text-align: right !important;
    }

    .product-card p[class$="-line"] span,
    .product-card .product-line span {
        position: static !important;
        left: auto !important;
        top: auto !important;

        display: inline !important;

        margin: 0 !important;
        padding: 0 !important;
    }
}

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

    /* =========================
       NAVBAR RÉFÉRENCES
       ========================= */

    .navbar:has(.search-bar) {
        width: 100vw !important;
        max-width: none !important;

        position: relative !important;

        /* On la descend par rapport à avant */
        top: -10px !important;

        /* Léger décalage vers la gauche */
        left: 0 !important;

        margin: 0 !important;

        /* IMPORTANT :
           on agrandit le marron pour contenir la recherche */
        padding-bottom: 85px !important;

        background-color: #4a3428 !important;
        border-radius: 0 !important;
    }


    /* =========================
       BARRE DE RECHERCHE
       DANS LE MARRON
       ========================= */

    .navbar:has(.search-bar) .search-bar {
        position: absolute !important;

        bottom: 18px !important;
        top: auto !important;

        left: 50% !important;
        transform: translateX(-50%) !important;

        width: 92% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 8px !important;

        /* PAS DE BANDE BEIGE */
        background: transparent !important;

        z-index: 20 !important;
    }

    .navbar:has(.search-bar) .search-bar input {
        width: 68% !important;
        max-width: 300px !important;

        margin: 0 !important;
        padding: 10px 16px !important;

        font-size: 16px !important;
    }

    .navbar:has(.search-bar) .search-bar button {
        margin: 0 !important;

        padding: 6px 7px !important;

        font-size: 15px !important;

        flex-shrink: 0 !important;
    }


    /* =========================
       NOS RÉFÉRENCES
       ========================= */

    .navbar:has(.search-bar) + .references-hero {
        margin: -20px 0 0 0 !important;

        /* plus de bande entre navbar et section */
        padding: 65px 15px 60px !important;

        background-color: #d4cbc8 !important;
    }


    .references-hero h1 {
        margin: 0 0 30px !important;
        padding: 0 !important;

        font-size: 46px !important;
        line-height: 1.05 !important;

        text-align: center !important;
    }


    .references-hero p {
        width: 90% !important;
        max-width: 350px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        font-size: 21px !important;
        line-height: 1.5 !important;

        text-align: center !important;
    }
}

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

    /* =========================
       PAGE HISTOIRE
       ========================= */

    .histoire-page {
        padding: 45px 20px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* PREMIÈRE PARTIE */
    .history-hero {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        width: 100% !important;
    }

    .history-text {
        width: 100% !important;
    }

    .history-text span {
        display: block !important;
        font-size: 15px !important;
        letter-spacing: 4px !important;
        margin-bottom: 18px !important;
    }

    .history-text h1 {
        font-size: 42px !important;
        line-height: 1.1 !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 25px 0 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .history-text p {
        font-size: 18px !important;
        line-height: 1.6 !important;

        width: 100% !important;
        margin-bottom: 18px !important;
    }


    /* PHOTOS DU HAUT */
    .history-images {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        gap: 18px !important;
        margin-top: 10px !important;
    }

    .history-images img,
    .history-images .big-img {
        width: 100% !important;
        height: auto !important;
        max-height: 420px !important;

        object-fit: cover !important;

        margin: 0 !important;
        border-radius: 16px !important;
    }


    /* =========================
       PARTIE ATELIER
       ========================= */

    .atelier-section {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;

        margin-top: 40px !important;
        padding-top: 35px !important;

        gap: 25px !important;
    }

    .atelier-section > img {
        width: 100% !important;
        height: auto !important;
        max-height: 420px !important;

        object-fit: cover !important;

        margin: 0 !important;
        border-radius: 16px !important;
    }

    .atelier-text {
        width: 100% !important;

        padding: 25px 20px !important;

        box-sizing: border-box !important;
        border-radius: 18px !important;
    }

    .atelier-text h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 18px !important;
    }

    .atelier-text p {
        font-size: 17px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }

    .atelier-text a {
        display: block !important;

        width: fit-content !important;
        max-width: 100% !important;

        margin: 22px auto 0 !important;

        padding: 14px 24px !important;

        text-align: center !important;
        box-sizing: border-box !important;
    }


    /* =========================
       FOOTER HISTOIRE
       ========================= */

    footer {
        width: 100% !important;
        height: auto !important;

        margin-top: 40px !important;

        padding: 25px 20px 30px !important;

        box-sizing: border-box !important;
    }

    footer p {
        padding: 0 !important;
        margin: 0 0 15px 0 !important;

        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    .footer-legal {
        display: flex !important;
        flex-wrap: wrap !important;

        justify-content: center !important;

        gap: 8px !important;

        font-size: 14px !important;
    }
}

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

    .navbar {
        top: -10px !important;
    }

    .navbar .logo-container,
    .navbar .nav-center {
        position: relative;
        left: -15px;
    }

}

@media screen and (max-width: 768px) {
    .navbar {
        left: 0 !important;
    }
}

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

    body:has(.presentation) .navbar {
        transform: translate(-20px, -30px) !important;
    }

}

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

    /* FOOTER UNIQUEMENT ACCUEIL */
    body:has(.presentation) footer {
        width: 100vw !important;
        max-width: none !important;

        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        box-sizing: border-box !important;
        text-align: center !important;
    }

    body:has(.presentation) footer p {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    body:has(.presentation) .footer-legal {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        text-align: center !important;
    }
}
/* ==================================================
   FICHES PRODUITS - VERSION MOBILE
   ================================================== */

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

    /* PAGE PRODUIT */
    .product-page {
        width: 100% !important;
        max-width: 100% !important;

        padding: 30px 15px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }


    /* CARTE BLANCHE */
    .product-detail {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 30px !important;

        margin: 0 !important;
        padding: 20px !important;

        box-sizing: border-box !important;

        transform: none !important;
        top: auto !important;
        left: auto !important;
    }


    /* =========================
       GALERIE / PHOTO
       ========================= */

    .product-gallery {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .product-gallery #mainImage {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: 420px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
    }


    /* =========================
       INFORMATIONS
       ========================= */

    .product-info {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
        transform: none !important;

        box-sizing: border-box !important;
    }

    .product-info h1,
    .product-info h2,
    .product-info h3,
    .product-info p {
        max-width: 100% !important;

        left: auto !important;
        right: auto !important;

        transform: none !important;

        box-sizing: border-box !important;
    }

    .product-info h1 {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    .product-info h2 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .product-info p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }


    /* =========================
       BOUTON CONTACT
       ========================= */

    .contact-btn {
        position: static !important;

        display: block !important;

        width: fit-content !important;
        max-width: 100% !important;

        margin: 25px auto 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }
}

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

    /* Supprime l'espace au-dessus de la navbar
       uniquement sur les fiches produits */
    body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .navbar {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
    }
}

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

    /* FICHES PRODUITS UNIQUEMENT */
    body:has(.product-page) {
        margin: 0 !important;
        padding: 0 !important;
    }

    body:has(.product-page) .navbar {
        position: relative !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        transform: none !important;

        margin: 0 !important;

        width: 100vw !important;
        max-width: none !important;
    }

    body:has(.product-page) .navbar .logo-container,
    body:has(.product-page) .navbar .nav-center {
        left: 0 !important;
        transform: none !important;
    }

    body:has(.product-page) .product-page {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }
}

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

    /* FICHES PRODUITS : décale uniquement le logo vers la gauche */
    body:has(.product-page) .navbar .logo-container {
        position: relative !important;
        left: -38px !important;
    }

}

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

    /* NAVBAR DE LA PAGE NOS RÉFÉRENCES */
    .navbar:has(.search-bar) {
        top: 0 !important;
    }

}

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

    /* TOUTES LES FICHES PRODUITS */

    .product-page {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 15px !important;
        box-sizing: border-box !important;
    }

    .product-detail {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        margin: 0 !important;
        padding: 20px !important;

        gap: 25px !important;

        box-sizing: border-box !important;

        transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    .product-gallery,
    .product-info {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    .product-gallery #mainImage {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: 420px !important;

        object-fit: contain !important;

        margin: 0 auto !important;
    }

    .thumbnails {
        width: 100% !important;

        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;

        margin: 15px 0 0 !important;
    }

    .product-info h1,
    .product-info h2,
    .product-info h3,
    .product-info p {
        width: 100% !important;
        max-width: 100% !important;

        left: 0 !important;
        right: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }

    .contact-btn {
        position: static !important;

        left: auto !important;
        top: auto !important;

        transform: none !important;

        display: block !important;

        width: fit-content !important;

        margin: 25px auto 0 !important;
    }
}