@media (max-width: 768px) {

    /* HEADER burger */
    header {
        padding: 10px 20px;
        position: relative;
    }

    header .nav-section {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #e7c695;
        z-index: 100;
        padding: 10px 0;
        box-shadow: 0 4px 12px rgba(74,55,40,0.15);
    }

    header .nav-section.open {
        display: flex;
    }

    header .nav-section ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding: 0 20px;
    }

    header .nav-section li {
        width: 100%;
    }

    header .nav-section li a {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        padding: 4px;
    }

    .burger span {
        display: block;
        height: 3px;
        background-color: #4a3728;
        border-radius: 3px;
        transition: all 0.3s ease;
    }

    .burger.open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .burger.open span:nth-child(2) {
        opacity: 0;
    }
    .burger.open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    header .social-section {
        gap: 8px;
    }

    header .social-section a {
        width: 38px;
        height: 38px;
    }

    header .social-section img {
        width: 22px;
        height: 22px;
    }

    /* INDEX */
    .hero-index {
        padding: 20px;
    }

    .hero-index h1 {
        font-size: 32px;
        margin-bottom: 16px;
    }

    .hero-index .intro {
        font-size: 14px;
        line-height: 1.5;
    }

    /* ACTUALITÉS : 1 carte par slide */
    .Actuality {
        padding: 30px 20px;
    }

    .Actuality h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

   .carousel-desktop {
    display: none;
}

.carousel-mobile {
    display: block;
}

.block-actuality {
    width: 90vw;
    max-width: 380px;
}

    .block-actuality {
        width: 90vw;
        max-width: 380px;
    }

    .block-actuality h3 {
        font-size: 18px;
    }

    .block-actuality p {
        font-size: 14px;
    }

    .block-actuality a {
        font-size: 14px;
    }

    /* CAROUSELS galerie */
    .carousel_gallery .carousel-cell {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* PRODUITS */
    .hero-produits h1 {
        font-size: 32px;
        padding: 20px;
    }

    .boutons {
        padding: 12px 16px;
        gap: 8px;
    }

    .boutons button {
        font-size: 13px;
        padding: 7px 12px;
    }

/* Après */
.Mandragore,
.Driade,
.Dahut,
.EnergyB {
    margin-bottom: 40px;
}

.Mandragore h2,
.Driade h2,
.Dahut h2,
.EnergyB h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.Mandragore .carousel-cell,
.Driade .carousel-cell,
.Dahut .carousel-cell,
.EnergyB .carousel-cell {
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.block-mandragore,
.Block-Driade,
.Block-Dahut,
.Block-EnergyB {
    width: 80vw;
    max-width: 320px;
}

.block-mandragore h3,
.Block-Driade h3,
.Block-Dahut h3,
.Block-EnergyB h3 {
    font-size: 18px;
}

.block-mandragore p,
.Block-Driade p,
.Block-Dahut p,
.Block-EnergyB p {
    font-size: 14px;
}
    .Produits .prix {
        font-size: 18px;
    }

    /* CONTACT */
    .hero-contact h1,
    .hero-confidentialite h1,
    .hero-mentions h1 {
        font-size: 32px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .contact-main {
        padding: 20px;
    }

    .contact-form h2 {
        font-size: 20px;
    }

    .contact-form label,
    .contact-form input,
    .contact-form textarea {
        font-size: 14px;
    }

    /* CONFIDENTIALITÉ / MENTIONS */
    .confidentialite,
    .mentions {
        font-size: 15px;
        padding: 0 20px;
    }

    .confidentialite h2,
    .mentions h2 {
        font-size: 20px;
    }

    /* FOOTER */
    footer {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        gap: 16px;
    }

    footer .links p {
        font-size: 12px;
    }

    footer .links-nav {
        gap: 8px;
    }

    footer .links-nav a {
        font-size: 12px;
        padding: 6px 10px;
    }

    footer .social {
        justify-content: center;
    }

    /* PANIER / FORMULAIRE */
    .recapitulatif {
        margin: 20px 16px;
        padding: 16px;
    }

    .recapitulatif h2 {
        font-size: 16px;
    }

    .recapitulatif ul li {
        font-size: 13px;
    }

    .recap-total {
        font-size: 13px;
    }

    .form-panier {
        margin: 10px 16px;
        padding: 16px;
    }

    .form-panier label {
        font-size: 14px;
    }

    .form-panier input,
    .form-panier button {
        font-size: 14px;
    }
}