/* =====================================
O'CUPS RESPONSIVE.CSS
========================================

M1. LAPTOP — MAX-WIDTH: 1280PX (réservé, vide)
M2. TABLET LARGE — MAX-WIDTH: 1024PX
    M2.01 GLOBAL
    M2.02 HEADER / BURGER
    M2.03 HOME HERO
    M2.05 HOME FEATURES BAR
    M2.06 HOME PRODUCTS
    M2.08 HOME ENGAGEMENT (+ CTA)
    M2.10 FOOTER
    M2.12 GOBELETS CONIQUES PAGE
    M2.13 GOBELETS CARTON PAGE
    M2.14 GOBELETS CARTON SANS PLASTIQUE PAGE
    M2.15 CONTACT PAGE
        M2.15.01 HERO
        M2.15.02 FORM
    M2.16 SOCIETE PAGE
        M2.16.01 HERO
    M2.17 ENGAGEMENT PAGE
        M2.17.01 HERO
    M2.18 MENTIONS PAGE
        M2.18.01 HERO
    M2.19 POLITIQUE DE CONFIDENTIALITÉ PAGE
        M2.19.01 HERO
    M2.20 POLITIQUE DE COOKIES PAGE
        M2.20.01 HERO
M3. MAX-WIDTH: 992PX
    M3.01 GLOBAL
    M3.02 HEADER / BURGER
    M3.03 HOME HERO
    M3.05 HOME FEATURES BAR
    M3.06 HOME PRODUCTS
    M3.07 HOME ACTIVITIES
    M3.08 HOME ENGAGEMENT
    M3.09 HOME CTA
    M3.10 FOOTER
    M3.12 GOBELETS CONIQUES PAGE
    M3.15 CONTACT PAGE
        M3.15.01 HERO
        M3.15.02 FORM
    M3.16 SOCIETE PAGE
        M3.16.01 HERO
    M3.17 ENGAGEMENT PAGE
        M3.17.01 HERO
    M3.18 MENTIONS PAGE
        M3.18.01 HERO
    M3.19 POLITIQUE DE CONFIDENTIALITÉ PAGE
        M3.19.01 HERO
    M3.20 POLITIQUE DE COOKIES PAGE
        M3.20.01 HERO
M4. TABLET — MAX-WIDTH: 768PX
    M4.02 HEADER / BURGER
    M4.03 HOME HERO
    M4.04 HOME TRUST BAR
    M4.05 HOME FEATURES BAR
    M4.06 HOME PRODUCTS
    M4.07 HOME ACTIVITIES
    M4.08 HOME ENGAGEMENT (+ CTA)
    M4.09 HOME CTA
    M4.10 FOOTER
    M4.12 GOBELETS CONIQUES PAGE
    M4.13 GOBELETS CARTON PAGE
    M4.14 GOBELETS CARTON SANS PLASTIQUE PAGE
    M4.15 CONTACT PAGE
        M4.15.01 FORM
    M4.16 SOCIETE PAGE
        M4.16.01 GRILLES
    M4.17 ENGAGEMENT PAGE
        M4.17.01 GRILLE
M5. MOBILE — MAX-WIDTH: 430PX
    M5.01 GLOBAL
    M5.02 HEADER / BURGER
    M5.03 HOME HERO
    M5.04 HOME TRUST BAR
    M5.05 HOME FEATURES BAR
    M5.06 HOME PRODUCTS
    M5.07 HOME ACTIVITIES
    M5.08 HOME ENGAGEMENT
    M5.09 HOME CTA
    M5.10 FOOTER
    M5.11 PRODUITS PAGE
    M5.12 GOBELETS CONIQUES PAGE
    M5.13 GOBELETS CARTON PAGE
    M5.14 GOBELETS CARTON SANS PLASTIQUE PAGE
    M5.15 CONTACT PAGE
        M5.15.01 HERO
        M5.15.02 FORM
    M5.16 SOCIETE PAGE
        M5.16.01 HERO
        M5.16.02 GRILLES + SECTIONS
    M5.17 ENGAGEMENT PAGE
        M5.17.01 HERO
        M5.17.02 GRILLE + SECTIONS
    M5.18 MENTIONS PAGE
        M5.18.01 HERO
        M5.18.02 SECTIONS
    M5.19 POLITIQUE DE CONFIDENTIALITÉ PAGE
        M5.19.01 HERO
        M5.19.02 SECTIONS
    M5.20 POLITIQUE DE COOKIES PAGE
        M5.20.01 HERO
        M5.20.02 SECTIONS

NOTE : dans chaque breakpoint, les sous-sections sont désormais
physiquement dans l'ordre du sommaire. Les blocs FOOTER (M2.10, M3.10,
M4.10), qui se trouvaient après les blocs pages produits, ont été
remontés à leur place : vérifié sans aucune collision de sélecteur.

======================================== */

/* ====================================
M1. LAPTOP — MAX-WIDTH: 1280PX (réservé, vide pour l'instant)
======================================= */

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

}

/* ====================================
M2. TABLET LARGE — MAX-WIDTH: 1024PX
======================================= */

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

/* ===================================
M2.01 GLOBAL
==================================== */
/*M2.01.01 CONTAINER */

    .container {
        padding-left: 32px;
        padding-right: 32px;
    }

/* ===================================
M2.02 HEADER / BURGER
==================================== */
/*M2.02.01 NAVBAR */

    .header-logo img {
        width: 190px;
    }

    .main-navigation {
        margin-right: 28px;
    }

    .nav-menu {
        gap: 38px;
    }

    .nav-menu > li > a {
        font-size: 14px;
    }

    .header-btn {
        padding: 0 18px;
        font-size: 11px;
    }

/* ===================================
M2.03 HOME HERO
==================================== */

    .hero-container {
        background-size: 78%;
        background-position: 115% center;
    }

    .hero-content {
        width: 520px;
        padding-top: 54px;
        padding-left: 46px;
    }

    .hero-title-green {
        font-size: 38px;
    }

    .hero-title-dark {
        font-size: 34px;
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-btn {
        width: 290px;
        height: 54px;
        font-size: 14px;
    }

    .hero-trustbar {
       gap: 16px;
       margin-top: 60px;
    }
    .trust-item img {
       width: 16px;
       height: 16px;
    }
    .trust-item span {
       font-size: 12px;
    }
/* ===================================
M2.05 HOME FEATURES BAR
==================================== */

.features-container {
    gap: 0;
}

.feature-item {
    gap: 12px;
    padding: 12px 14px;
}

.feature-item img {
    width: 32px;
    height: 32px;
}

.feature-content h3 {
    font-size: 11px;
    letter-spacing: -0.01em;
}

.feature-content p {
    font-size: 12px;
    line-height: 1.25;
}

.feature-item:not(:last-child)::after {
    height: 46px;
}
/* ===================================
M2.06 HOME PRODUCTS
==================================== */
/*M2.06.01 SECTION */

.products-layout {
    grid-template-columns: 2.15fr 0.86fr;
    gap: 18px;
}

.products-right .products-header,
.products-right .activity-grid {
    margin-left: 18px;
}

/*M2.06.02 GRID */

.products-grid {
    gap: 14px;
}

/*M2.06.03 CARD */

.product-card {
    padding: 20px;
}

/*M2.06.04 TOP LAYOUT */

.product-card-top {
    gap: 6px;
}

/*M2.06.05 TEXT */

.product-card-text h3 {
    font-size: 15px;
    line-height: 1.15;
}

.product-card-text li {
    font-size: 12px;
    line-height: 1.35;
}

/*M2.06.06 IMAGES */

.product-image-wrapper {
    width: 88px;
    height: 125px;
}

.product-image {
    max-height: 115px;
}

/* ===================================
M2.08 HOME ENGAGEMENT (+ CTA)
==================================== */
.two-columns-layout {
    grid-template-columns: 2.18fr 0.86fr;
    gap: 18px;
}
.cta-card {
    margin-left: 18px;
}

/*M2.08.01 CONTENU */

.engagement-card {
    grid-template-columns: 170px 1fr;
}

.engagement-content {
    padding: 12px 18px;
}

.engagement-content h2 {
    font-size: 14px;
    line-height: 1.15;
}

.engagement-content p {
    font-size: 11px;
    line-height: 1.35;
}
/* ===================================
M2.10 FOOTER
==================================== */

    .footer-logo img {
        width: 200px;

    }

/* ===================================
M2.12 GOBELETS CONIQUES PAGE
==================================== */
/* contenu physiquement situé ici (entre Engagement et Footer),
conservé en place pour ne pas prendre de risque sur l'ordre de cascade CSS */
/*M2.12.01 FAQ ET BENEFITS */

/*M2.12.02 APPLICATIONS */

    .conical-applications-row {
        gap: 18px;
    }

    .conical-application-card {
        width: 170px;
    }

    .conical-application-card img {
        width: 170px;
        height: 170px;
    }

    .conical-faq-section{
        padding:0 0 40px;
    }

    .benefits-image {
        width:100%;
        max-width: 360px;
        justify-self: end;

    }

    .benefits-image img {
        max-width: 460px;
        height: auto;
        display: block;

    }

    .conical-faq-question span {
        font-size: 13px;
        line-height: 1.25;

    }
    .conical-faq-question {
        gap:12px;
        padding:18px;
    }

    .conical-faq-question img{
        width:30px;
        height:30px;
    }

/* ===================================
M2.13 GOBELETS CARTON PAGE
==================================== */
/*M2.13.01 CARACTÉRISTIQUES TECHNIQUES */

    .carton-specs-card {
        grid-template-columns: 1fr 200px 1fr;
        gap: 24px;
        padding: 24px;
    }

    .carton-spec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .carton-specs-product img {
        width: 300px;
    }

/* ===================================
M2.14 GOBELETS CARTON SANS PLASTIQUE PAGE
==================================== */
/*M2.14.01 HERO */

    .hero-plastic-badge{
        width:150px;
        gap:8px;
        padding:0 14px;
    }

    .hero-plastic-badges{
        gap:12px;
    }

    .hero-plastic-badge span{
        font-size:12px;
    }

/* ===================================
M2.15 CONTACT PAGE
==================================== */
/*M2.15.01 HERO */
/* Le gap header (padding-top:28px de .contact-hero-content), la suppression
   du min-height et le padding-bottom:48px sont désormais gérés en base
   (desktop). Ici on n'ajuste QUE ce qui change à ce palier : ratio des
   colonnes, gap, retrait gauche du contenu, et taille/décalage de l'illu.
   L'illustration reste centrée (align-items:center hérité) -> jamais
   coupée par le overflow:hidden de .hero-bg-section. */

    .contact-hero-layout {
        grid-template-columns: 1fr 0.85fr;
        gap: 40px;
    }

    .contact-hero-content {
        padding-left: 32px;
    }

    .contact-hero-visual img {
        max-width: 460px;
        transform: translateY(30px);
    }

/*M2.15.02 FORM */
/* Réduit la largeur du formulaire au profit de la sidebar.
   Scopé pour ne PAS toucher .two-columns-layout du Home Engagement. */

    .contact-form-section .two-columns-layout {
        grid-template-columns: 1.6fr 1fr;
        gap: 28px;
    }

/* ===================================
M2.16 SOCIETE PAGE
==================================== */
/*M2.16.01 HERO */

    .societe-hero-layout {
        grid-template-columns: 1fr 0.85fr;
        gap: 40px;
    }

    .societe-hero-content {
        padding-left: 32px;
    }

    .societe-hero-visual img {
        max-width: 460px;
        transform: translateY(30px);
    }

/* ===================================
M2.17 ENGAGEMENT PAGE
==================================== */
/*M2.17.01 HERO */

    .engagement-hero-layout {
        grid-template-columns: 1fr 0.85fr;
        gap: 40px;
    }

    .engagement-hero-content {
        padding-left: 32px;
    }

    .engagement-hero-visual img {
        max-width: 460px;
        transform: translateY(30px);
    }


/* ===================================
M2.18 MENTIONS PAGE
==================================== */
/*M2.18.01 HERO */

    .mentions-hero-content {
        padding-left: 32px;
    }


/* ===================================
M2.19 POLITIQUE DE CONFIDENTIALITÉ PAGE
==================================== */
/*M2.19.01 HERO */

    .confidentialite-hero-content {
        padding-left: 32px;
    }


/* ===================================
M2.20 POLITIQUE DE COOKIES PAGE
==================================== */
/*M2.20.01 HERO */

    .cookies-hero-content {
        padding-left: 32px;
    }

}

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

/* ====================================
M3. MAX-WIDTH: 992PX
======================================= */
/* ===================================
M3.01 GLOBAL
==================================== */
/*M3.01.01 CONTAINER */

    .container {
        padding-left: 32px;
        padding-right: 32px;
    }

/* ===================================
M3.02 HEADER / BURGER
==================================== */

    .header-logo img {
        width: 150px;
    }

    .nav-menu {
        gap: 38px;
    }

    .main-navigation {
        margin-right: 28px;
    }

    .header-btn {
        padding: 0 18px;
        font-size: 11px;
    }

/* ===================================
M3.03 HOME HERO
==================================== */

    .hero-section {
       height: auto;
       min-height: 470px;
   }
    .hero-container {
        height: auto;
        min-height: 470px;
    }
    
    .product-hero-content {
        padding-left: 36px;
    }

    .hero-trustbar {
       gap: 16px;
       margin-top: 60px;
    }
    .trust-item img {
       width: 16px;
       height: 16px;
    }
    .trust-item span {
       font-size: 12px;
    }

/* ===================================
M3.05 HOME FEATURES BAR
==================================== */

    .features-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }  

    .feature-item {
        justify-content: center;
        padding: 18px 12px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }

/* suppression des séparateurs verticaux */

    .feature-item::after {
         display: none;
    }

/* ===================================
M3.06 HOME PRODUCTS
==================================== */
/*M3.06.01 SECTION */

/*M3.06.02 MAIN LAYOUT */

    .products-layout {
        grid-template-columns: 2.15fr 0.85fr;
        gap: 12px;
    }

/*M3.06.03 RIGHT COLUMN */

    .products-right .products-header,
    .products-right .activity-grid {
        margin-left: 12px;
    }

/*M3.06.04 GRID */

    .products-grid {
        gap: 14px;
    }

/*M3.06.05 CARD */

    .product-card {
        padding: 16px;
    }

/*M3.06.06 TOP LAYOUT */

    .product-card-top {
        gap: 8px;
    }

/*M3.06.07 TITLES */

    .product-card-text h3 {
        font-size: 15px;
        line-height: 1.15;
    }

/*M3.06.08 LIST */

    .product-card-text ul {
        gap: 6px;
    }

    .product-card-text li {
        font-size: 11px;
        line-height: 1.3;
    }

/*M3.06.09 IMAGES */

    .product-image-wrapper {
        width: 74px;
        height: 108px;
    }

    .product-image {
        max-height: 98px;
    }

/*M3.06.10 BOTTOM */

    .product-card-bottom {
        gap: 14px;
    }

/*M3.06.11 BADGES */

    .product-badges {
        gap: 10px;
    }

    .product-badge img {
        width: 26px;
        height: 26px;
    }

/*M3.06.12 BOUTON */

    .product-card-button {
        height: 36px;
        padding: 0 16px;
        font-size: 11px;
    }

/* ===================================
M3.07 HOME ACTIVITIES
==================================== */
/*M3.07.01 GRID */

    .activity-grid {
        gap: 9px;
    }

/* ===================================
M3.08 HOME ENGAGEMENT
==================================== */
/*M3.08.01 SECTION */

/*M3.08.02 GLOBAL LAYOUT */

    .two-columns-layout {
        grid-template-columns: 2.15fr 0.85fr;
        gap: 12px;
        align-items: stretch;
    }

/*M3.08.03 CARD */

    .engagement-card {
        grid-template-columns: 190px 1fr;
        min-height: 100%;
    }

/*M3.08.04 IMAGE */

    .engagement-image::after {
        width: 90px;
    }

/*M3.08.05 CONTENU */

    .engagement-content {
        padding: 12px 16px;
    }

    .engagement-content h2 {
        font-size: 13px;
        line-height: 1.1;
    }

    .engagement-content p {
        margin-bottom: 8px;
        font-size: 11px;
        line-height: 1.35;
    }

/*M3.08.06 FEATURES */

    .engagement-features {
        gap: 18px;
    }

    .engagement-feature {
        min-width: auto;
        gap: 6px;
    }

    .engagement-feature img {
        width: 20px;
        height: 20px;
    }

    .engagement-feature span {
        font-size: 8px;
        line-height: 1.2;
    }

/* ===================================
M3.09 HOME CTA
==================================== */
/*M3.09.01 CARD */

    .cta-card {
        margin-left: 12px;
        padding: 14px 18px;
    }

    .cta-card h2 {
        font-size: 13px;
        line-height: 1.15;
    }

    .cta-card p {
        font-size: 11px;
        line-height: 1.35;
    }

/*M3.09.02 BOUTON */

    .engagement-button {
        height: 28px;
        padding: 0 12px;
        font-size: 9px;
    }

/* ===================================
M3.10 FOOTER
==================================== */

    .footer-logo img {
        width: 200px;

    }

/* ===================================
M3.12 GOBELETS CONIQUES PAGE
==================================== */
/* contenu physiquement situé ici (entre CTA et Footer),
conservé en place pour ne pas prendre de risque sur l'ordre de cascade CSS */
/*M3.12.01 POURQUOI CHOISIR (BENEFITS) */

/*M3.12.02 APPLICATIONS */

    .conical-applications-row {
        gap: 16px;
    }

    .conical-application-card {
        width: 170px;
    }

    .conical-application-card img {
        width: 170px;
        height: 170px;
    }

    .conical-faq-section{
        padding:0 0 40px;
    }

    .benefits-image {
        width:100%;
        max-width: 360px;
        justify-self: end;

    }

    .benefits-image img {
        width: 100%;
        height: auto;
        display: block;

    }

    .conical-faq-question span {
        font-size: 13px;
        line-height: 1.25;

    }
    .conical-faq-question {
        gap:12px;
        padding:18px;
    }

    .conical-faq-question img{
        width:30px;
        height:30px;
    }

/* ===================================
M3.15 CONTACT PAGE
==================================== */
/*M3.15.01 HERO */
/* Même logique qu'en M2.15.01 : base (desktop) gère gap header, absence de
   min-height et padding-bottom. Ici uniquement les ajustements du palier. */

    .contact-hero-layout {
        grid-template-columns: 1fr 0.8fr;
        gap: 30px;
    }

    .contact-hero-content {
        padding-left: 24px;
    }

    .contact-hero-visual img {
        max-width: 400px;
        transform: translateY(20px);
    }

/*M3.15.02 FORM */
/* Sidebar encore un peu plus large à ce palier. Scopé (voir M2.15.02). */

    .contact-form-section .two-columns-layout {
        grid-template-columns: 1.4fr 1fr;
        gap: 24px;
    }

/* ===================================
M3.16 SOCIETE PAGE
==================================== */
/*M3.16.01 HERO */

    .societe-hero-layout {
        grid-template-columns: 1fr 0.8fr;
        gap: 30px;
    }

    .societe-hero-content {
        padding-left: 24px;
    }

    .societe-hero-visual img {
        max-width: 400px;
        transform: translateY(20px);
    }

/* ===================================
M3.17 ENGAGEMENT PAGE
==================================== */
/*M3.17.01 HERO */

    .engagement-hero-layout {
        grid-template-columns: 1fr 0.8fr;
        gap: 30px;
    }

    .engagement-hero-content {
        padding-left: 24px;
    }

    .engagement-hero-visual img {
        max-width: 400px;
        transform: translateY(20px);
    }


/* ===================================
M3.18 MENTIONS PAGE
==================================== */
/*M3.18.01 HERO */

    .mentions-hero-content {
        padding-left: 24px;
    }


/* ===================================
M3.19 POLITIQUE DE CONFIDENTIALITÉ PAGE
==================================== */
/*M3.19.01 HERO */

    .confidentialite-hero-content {
        padding-left: 24px;
    }


/* ===================================
M3.20 POLITIQUE DE COOKIES PAGE
==================================== */
/*M3.20.01 HERO */

    .cookies-hero-content {
        padding-left: 24px;
    }

}

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

/* ====================================
M4. TABLET — MAX-WIDTH: 768PX
======================================= */
/* ===================================
M4.02 HEADER / BURGER
==================================== */
/*M4.02.01 MOBILE */

.main-navigation {
    display: none;
}

.header-btn {
    display: none;
}

.hero-buttons {
     display: flex;
     margin-top: 48px;
     min-width: 250px;
}

.site-header {
    position: relative;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo img {
    width: 145px;
}

/*M4.02.02 CTA ICON */

.mobile-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    margin-left: auto;
    margin-right: 10px;
    flex-shrink: 0;
}

.mobile-cta-icon img {
    width: 28px;
    height: 28px;
}

/*M4.02.03 BURGER BUTTON */

.mobile-menu-btn {

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: #0B5D3F;
    border-radius: 999px;
    transition: all .25s ease;
}

/*M4.02.04 BURGER -> CROIX */

.mobile-menu-btn.is-active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);

}

.mobile-menu-btn.is-active span:nth-child(2) {
    opacity: 0;

}

.mobile-menu-btn.is-active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);

}

/*M4.02.05 MENU OVERLAY */

.mobile-menu-overlay {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #F5F1E8;
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding:
        32px
        32px
        40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}

/*M4.02.06 MENU OPEN */

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);

}

/*M4.02.07 NAVIGATION */

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu-nav a {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0B5D3F;
    text-decoration: none;
}

/*M4.02.08 SUBMENU */

.mobile-submenu {
    display: flex;
    flex-direction: column;
}

.mobile-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;

    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--green-primary);
}

.mobile-submenu-toggle span {
    color: inherit;
}

.mobile-submenu-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
    transition: transform .25s ease;
}

.mobile-submenu.open .mobile-submenu-arrow {
    transform: rotate(180deg);
}

/* SUBMENU CONTENT */

.mobile-submenu-content {
    display: flex;
    flex-direction: column;
    gap: 14px;

    max-height: 0;
    overflow: hidden;

    margin-left: 18px;
    padding-left: 18px;

    border-left: 2px solid rgba(184, 149, 88, .35);

    transition:
        max-height .30s ease,
        margin-top .30s ease;
}

.mobile-submenu.open .mobile-submenu-content {
    max-height: 180px;
    margin-top: 16px;
    margin-bottom: 20px;
}

.mobile-submenu-content a {
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
}

/*M4.02.09 CTA MENU */

.mobile-menu-cta {
    margin-top: auto;
}

.mobile-menu-btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 999px;
    background: #0B5D3F;
    color: #F5F1E8;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* ===================================
M4.03 HOME HERO
==================================== */
.hero-section {
    height: auto;
    min-height: 470px;
}
.hero-container {
    height: auto;
    min-height: 470px;
    padding-bottom: 20px;
    background-image: url('./assets/images/web/ocups-hero-desktop-bg.webp');
    background-size: cover;
    background-position: center top;
    border-radius: 0 0 30px 30px;
    overflow: hidden;
}
.hero-title-green {
    font-size: 32px;
}
.hero-title-dark {
    font-size: 26px;
}
.hero-description {
    font-size: 14px;
    line-height: 1.3;
    max-width: 400px;
    margin-top: 0;
}
.hero-btn {
    width: 250px;
    height: 48px;
    font-size: 13px;
    margin-bottom: 20px;
}
/* ===================================
M4.04 HOME TRUST BAR
==================================== */
.mobile-trustbar {
    display: none;
}

.hero-trustbar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
    max-width: 400px;
}
.trust-item img {
    width: 20px;
    height: 20px;
}
.trust-item span {
    font-size: 12px;
}

/* ===================================
M4.05 HOME FEATURES BAR
==================================== */
.feature-item {
    padding: 10px 16px;
    gap: 12px;
}

.feature-item img {
    width: 32px;
    height: 32px;
}

.feature-content h3 {
    font-size: 12px;
}

.feature-content p {
    font-size: 12px;
}

.feature-item:not(:last-child)::after {
    height: 46px;
}

/* ===================================
M4.06 HOME PRODUCTS
==================================== */
/*M4.06.01 SECTION */
.products-layout {
    grid-template-columns: 1.4fr 0.9fr;
    gap: 10px;
    align-items: stretch;
}
.products-right .products-header,
.products-right .activity-grid {
    margin-left: 10px;
    margin-bottom: 0;
}
.products-left .products-header {
    margin-bottom: 0;
}
.products-header {
    height: 44px;
    align-items: flex-start;
}
/*M4.06.02 GRID */
.products-grid {
    grid-template-columns: 1fr;
    gap: 8px;
    height: 100%;
}
/*M4.06.03 CARD */
.product-card {
    padding: 12px 14px;
}
.product-card-top {
    gap: 8px;
    margin-bottom: 8px;
}
.product-card-text h3 {
    font-size: 13px;
    margin-bottom: 6px;
}
.product-card-text ul {
    gap: 3px;
}
.product-card-text li {
    font-size: 11px;
}
.product-image-wrapper {
    width: 64px;
    height: 88px;
    flex-shrink: 0;
}
.product-image {
    max-height: 80px;
}
.product-card-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 0;
}
.product-badges {
    justify-content: flex-start;
    gap: 8px;
}
.product-badge img {
    width: 20px;
    height: 20px;
}
.product-card-button {
    height: 28px;
    padding: 0 12px;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ===================================
M4.07 HOME ACTIVITIES
==================================== */
/*M4.07.01 GRID */
.activity-grid {
    flex: 1;
}
/* ===================================
M4.08 HOME ENGAGEMENT (+ CTA)
==================================== */

.two-columns-layout {
    grid-template-columns: 1fr;
    gap: 10px;
}

/*M4.08.01 CARD */

.engagement-card {
    grid-template-columns: 200px 1fr;
    min-height: auto;
}

.engagement-content {
    padding: 16px 18px;
}

.engagement-content h2 {
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 8px;
}

.engagement-content p {
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.engagement-features {
    gap: 16px;
}

.engagement-feature img {
    width: 22px;
    height: 22px;
}

.engagement-feature span {
    font-size: 9px;
}

/* ===================================
M4.09 HOME CTA
==================================== */
/*M4.09.01 CARD */

.cta-card {
    margin-left: 0;
    padding: 16px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cta-card h2 {
    font-size: 13px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.cta-card p {
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 0;
}

.engagement-button {
    height: 34px;
    padding: 0 16px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}
/* ===================================
M4.10 FOOTER
==================================== */
.site-footer {
    display: none;
}

.mobile-footer {
    display: block;
    margin-top: 24px;
    padding: 24px 20px 20px;
    border-top: 1px solid rgba(11,93,63,.08);
}

/* FOOTER BRAND */

.mobile-footer-brand {
    margin-bottom: 24px;
}

.mobile-footer-logo img {
    width: 150px;
    height: auto;
    display: block;
}

.mobile-footer-description {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #1E1E1E;
}

/* FOOTER ACCORDIONS */
.mobile-footer-accordion {
    border-top: 1px solid rgba(11,93,63,.08);
}

.footer-accordion-trigger {
    width: 100%;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1E1E1E;

    cursor: pointer;
}

.accordion-icon {
    font-size: 20px;
    color: #0B5D3F;
}

/* ACCORDION STATES */

.footer-accordion-content.active {
    display: block;
}

.accordion-icon.active {
    transform: rotate(45deg);
}
/* FOOTER ACCORDION CONTENT */

.footer-accordion-content {
    display: none;
    padding-bottom: 18px;
}

.footer-accordion-content a {
    display: block;
    padding: 4px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1E1E1E;
    text-decoration: none;
}
/* FOOTER CTA */

.mobile-footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 24px;
    border-radius: 999px;
    background: #0B5D3F;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #F5F1E8;
    text-decoration: none;
    
}
/* FOOTER BOTTOM */
.mobile-footer-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(11,93,63,.08);
}

.mobile-footer-bottom p {
    margin-bottom: 12px;

    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6E6E6E;
}
/* LEGAL */
.mobile-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mobile-footer-legal a {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    text-decoration: none;
}

/* ===================================
M4.12 GOBELETS CONIQUES PAGE
==================================== */
/*M4.12.01 HERO */

.conical-hero-section{
    display:none;
}

.tablet-conical-hero-section{
    display:block;
   
}

.tablet-conical-hero-container{
    position: relative;
    min-height:400px;
    border-radius: 0 0 30px 30px;
    padding:0 42px;
    background-image:
        url('./assets/images/web/ocups-hero-gobelets-coniques-bg.webp');

    background-size: cover;
    background-position: center;
    overflow: hidden;
}


/* CONTENT */

.tablet-conical-hero-content{
    max-width:430px;
}

/* LABEL */

.tablet-conical-hero-label {
    display: inline-flex;
    flex-direction: column;
    margin-top:12px;    
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #B89558;
    margin-bottom: 14px;
}

.tablet-conical-hero-label::after {
    content: "";
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: #B89558;
    border-radius: 999px;
}

/* TITLE */

.tablet-conical-hero-title{
    margin:0 0 18px;
    line-height:.88;
}

.tablet-conical-hero-title-green,
.tablet-conical-hero-title-dark{
    display:block;
    font-family:'Poppins',sans-serif;
    font-size:30px;
    font-weight:700;
}

.tablet-conical-hero-title-green{
    color:var(--green-primary);
}

.tablet-conical-hero-title-dark{
    color:var(--text-primary);
}

/* DESCRIPTION */

.tablet-conical-hero-description{
    margin-bottom:30px;
    font-family: 'Inter', sans-serif;
    font-size:14px;
    font-weight: 500;
    line-height:1.65;
    color:var(--text-primary);
}

/* BADGES */

.tablet-conical-hero-badges{
    display:flex;
    gap:12px;
    margin-bottom:32px;
}

.tablet-conical-hero-badge{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 18px;
    background:transparent;
    border:2px solid rgba(184,149,88,.55);
    border-radius:999px;
}

.tablet-conical-hero-badge img{
    width:18px;
    height:18px;
}

.tablet-conical-hero-badge span{
    white-space:nowrap;
    font-size:15px;
    font-weight:600;
}

/* CTA */

.tablet-conical-hero-buttons{
    display:flex;
    gap:18px;
}

.tablet-conical-hero-buttons a{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    height:48px;
}
.tablet-conical-hero-buttons .conical-btn-primary,
.tablet-conical-hero-buttons .conical-btn-secondary{

    padding:0;
    min-width:0;
}

/*M4.12.02 POURQUOI CHOISIR (BENEFITS) */

.conical-benefits-section{
    padding-top:48px;
}

/* ===================================
M4.12.03 AVANTAGES
==================================== */

.conical-advantages{
    display:none;
}

.tablet-conical-advantages{
    display:block;
}

/* GRILLE */

.tablet-advantages-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}

/* CARD */

.tablet-advantage-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    min-height:165px;
    padding:24px 20px;

    background:transparent;
    border:1px solid rgba(184,149,88,.55);
    border-radius:18px;
}

/* ICÔNE */

.tablet-advantage-card img{
    width:30px;
    height:30px;
    margin-bottom:16px;
}

/* TITRE */

.tablet-advantage-card h3{
    margin:0 0 10px;
    font-family:'Poppins',sans-serif;
    font-size:18px;
    line-height:1.2;
    font-weight:700;
    color:var(--green-primary);
}

/* TEXTE */

.tablet-advantage-card p{
    max-width:220px;
    margin:0;
    font-family:'Inter',sans-serif;
    font-size:13px;
    line-height:1.55;
    font-weight:400;
    color:var(--text-secondary);
}

/*M4.12.04 APPLICATIONS */

.conical-applications-section {
    display: none;
}

.tablet-conical-applications-section {
    display: block;
    padding: 0 0 48px;
}

/* SLIDER (classe commune à toutes les pages produits) */

.tablet-applications-slider {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tablet-applications-slider::-webkit-scrollbar {
    display: none;
}

/* CARD */

.tablet-application-card {
    flex: 0 0 168px;
    text-decoration: none;
    scroll-snap-align: start;
}

.tablet-application-card img {
    width: 168px;
    height: 168px;
    display: block;
    object-fit: cover;
}

.tablet-application-card span {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
    color: #0B5D3F;
}

/*M4.12.05 BRC GLOBAL STANDARD */

/* DISPLAY */

.brc-section{
    display:none;
}

.tablet-brc-section{
    display:block;
    padding:0 0 48px;
}

/* CARD */

.tablet-brc-card{
    position:relative;
    background:#F8F3EA;
    border:1px solid rgba(184,149,88,.45);
    border-radius:28px;
    padding:42px 40px 48px;
    overflow:hidden;

}

/* DECORS */

.tablet-brc-decor{
    pointer-events:none;

}

.tablet-brc-leaf{
    position:absolute;
    left:-25px;
    bottom:-55px;
    width:180px;
    opacity:.08;

}

.tablet-brc-globe{
    position:absolute;
    width:185px;
    top:10px;
    right:-52px;
    opacity:.08;
}

/*LOGO*/

.tablet-brc-logo{
    display:flex;
    justify-content:center;
    margin-bottom:42px;

}

.tablet-brc-logo img{
    width:150px;
    height:auto;

}

/*CONTENT*/

.tablet-brc-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

.tablet-brc-content .section-title{
    margin-bottom:26px;

}

.tablet-brc-content p{
    margin:0 0 18px;
    font-family:'Inter',sans-serif;
    font-size:17px;
    line-height:1.75;
    color:var(--text-primary);

}

.tablet-brc-content p:last-of-type{
    margin-bottom:28px;

}

.tablet-brc-content strong{
    color:var(--green-primary);
    font-weight:600;

}

/* CTA */

.tablet-brc-cta{

    align-self:center;
    margin-top:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 34px;
    text-decoration:none;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-size:17px;
    font-weight:600;

}

/*M4.12.06 CARACTÉRISTIQUES TECHNIQUES */

    /* DISPLAY */

    .conical-specs-section{
        display:none;
    }

    .tablet-conical-specs-section{
        display:block;
        padding:0 0 48px;
    }

    .conical-specs-card{
        display:none;
    }

    .tablet-conical-specs-section .container + .container{
        margin-top:48px;

    }

    /* CARDS
    Même style que Conditionnement */

    .tablet-specs-card,
    .tablet-composition-card,
    .tablet-packaging-card{
        padding:36px;
        border:1px solid rgba(184,149,88,.55);
        border-radius:28px;
        background:transparent;

    }

    /* GRID CARACTÉRISTIQUES */

    .tablet-specs-content{
        display:grid;
        grid-template-columns:1.8fr .8fr;
        gap:30px;
        align-items:center;

    }

    /* TABLEAU */

    .tablet-spec-row{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:12px 0;
        border-bottom:1px solid rgba(0,0,0,.08);

    }

    .tablet-spec-row span{
        font-family:'Inter',sans-serif;
        font-size:16px;
        font-weight:400;
        color:var(--text-primary);

    }

    .tablet-spec-row strong{
        font-family:'Inter',sans-serif;
        font-size:16px;
        font-weight:400;
        color:var(--text-primary);

    }

    /* PRODUIT */

    .tablet-specs-product{
        display:flex;
        justify-content:center;
        align-items:center;

    }

    .tablet-specs-product img{
        width: 210px;
        height:auto;
       
    }

    /* GRID COMPOSITION */

    .tablet-composition-content{
        display:flex;
        flex-direction:column;
        gap:18px;
    }

    /* TEXTE */

    .tablet-composition-text{
        width:100%;
        

    }

    .tablet-composition-text p{
        margin:0 0 14px;
        font-family:'Inter',sans-serif;
        font-size:16px;
        line-height:1.55;
        color:var(--text-primary);

    }

    .tablet-composition-text p:last-child{
        margin-bottom:0;

    }

    /* CERTIFICATIONS */

    .tablet-specs-certifications{
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:nowrap;
        gap:18px;
        margin-top:8px;

    }

    .tablet-specs-certifications img{
        display:block;
        width:52px;
        height:auto;

    }

    /* Le logo BPI est naturellement plus large */

    .tablet-specs-certifications img:nth-child(2){
        width:66px;

    }

    /* Carton : un seul logo large (pictogramme légal), pas 3 petites icônes */

    .tablet-carton-specs-section .tablet-specs-certifications img{
        width:100%;
        max-width:220px;
    }

    /* MENTION LÉGALE */

    .tablet-composition-content p.carton-specs-legal-note{
        margin-top:12px;
        font-family:'Inter',sans-serif;
        font-size:12px;
        line-height:1.5;
        font-weight:400;
        color:var(--text-secondary);
        text-align:center;
    }

/*M4.12.07 CONDITIONNEMENT */

.conical-packaging-section{
    display: none;
}

.tablet-conical-packaging-section{
    display: block;
    padding:0 0 48px;
}

/* GRID (classe commune à toutes les pages produits) */

.tablet-packaging-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}

/* COLONNE */

.tablet-packaging-column{
    display:flex;
    flex-direction:column;
}

/* HEADER */

.tablet-packaging-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.tablet-packaging-header img{
    width:28px;
    height:28px;
    flex-shrink:0;
}

.tablet-packaging-header h2{
    margin:0;
    font-family:'Poppins',sans-serif;
    font-size:18px;
    line-height:1.2;
    font-weight:700;
    color:var(--green-primary);
}

.tablet-packaging-header h2::after{
    content:"";
    display:block;
    width:38px;
    height:3px;
    margin-top:8px;
    background:#B89558;
    border-radius:999px;
}

/* LISTE */

.tablet-packaging-list{
    margin:0;
    padding-left:18px;
    list-style:disc;
    list-style-position:outside;
}

.tablet-packaging-list li{
    margin-bottom:10px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.55;
    color:var(--text-primary);
}

.tablet-packaging-list li::marker{
    color:#B89558;
    font-size:.9em;
}

/*M4.12.08 FAQ */

/* DISPLAY */

.conical-faq-section{
    display:none;
}

.tablet-faq-section{
    display:block;
    padding:0 0 48px;
}

/* liste */

.tablet-faq-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* item */

.tablet-faq-item{

    background:transparent;
    border:1px solid rgba(184,149,88,.55);
    border-radius:20px;
    overflow:hidden;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;

}

.tablet-faq-item.active{

    border-color:var(--green-primary);
    box-shadow:0 4px 12px rgba(11,93,63,.05);

}

/* question */

.tablet-faq-question{
    width:100%;
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 20px;
    background:transparent;
    border:none;
    cursor:pointer;
    text-align:left;

}

/* icône */

.tablet-faq-question img{

    width:32px;
    height:32px;
    flex-shrink:0;

}

/* titre */

.tablet-faq-question span{

    flex:1;
    font-family:'Poppins',sans-serif;
    font-size:17px;
    line-height:1.35;
    font-weight:600;
    color:var(--green-primary);

}

/* flèche */

.tablet-faq-arrow{
    width:18px;
    height:18px;
    flex-shrink:0;
    color:var(--green-primary);
    transition:transform .30s ease;

}

.tablet-faq-item.active .tablet-faq-arrow{

    transform:rotate(180deg);

}

/* réponse */

.tablet-faq-answer{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .35s ease,
        opacity .25s ease;

}

.tablet-faq-item.active .tablet-faq-answer{
    max-height:220px;
    opacity:1;

}

/* texte */

.tablet-faq-answer p{
    margin:0;
    padding:0 20px 18px 68px;
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.60;
    font-weight:400;
    color:var(--text-primary);

}

/* ===================================
M4.13 GOBELETS CARTON PAGE
==================================== */

/*M4.13.01 HERO */

.hero-carton-section{
    display:none;
}

.tablet-carton-hero-section{
    display:block;
}

.tablet-carton-hero-container{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:400px;
    padding:0 42px;
    border-radius:0 0 30px 30px;
    background-image:
        url('./assets/images/web/ocups-hero-gobelets-carton-20cl-bg.webp');

    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.tablet-carton-hero-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        #FCFBF8 0%,
        #FCFBF8 30%,
        rgba(252,251,248,.92) 55%,
        rgba(252,251,248,.55) 75%,
        rgba(252,251,248,0) 100%
    );
}

.tablet-carton-hero-content,
.tablet-carton-hero-buttons {
    position: relative;
    z-index: 2;
}

/* CONTENT */

.tablet-carton-hero-content{
    max-width:430px;
    padding-top:15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* LABEL */

.tablet-carton-hero-label {
    display: inline-flex;
    flex-direction: column;
    margin-top:12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #B89558;
    margin-bottom: 14px;
}

.tablet-carton-hero-label::after {
    content: "";
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: #B89558;
    border-radius: 999px;
}

/* TITLE */

.tablet-carton-hero-title{
    margin:0 0 18px;
    line-height:.88;
}

.tablet-carton-hero-title-green,
.tablet-carton-hero-title-dark{
    display:block;
    font-family:'Poppins',sans-serif;
    font-size:30px;
    font-weight:700;
}

.tablet-carton-hero-title-green{
    color:var(--green-primary);
}

.tablet-carton-hero-title-dark{
    color:var(--text-primary);
}

/* DESCRIPTION */

.tablet-carton-hero-description{
    margin-bottom:46px;
    font-family: 'Inter', sans-serif;
    font-size:14px;
    font-weight: 500;
    line-height:1.65;
    color:var(--text-primary);
}

/* BADGES */

.tablet-carton-hero-badges{
    display:flex;
    gap:12px;
    margin-bottom:22px;
}

.tablet-carton-hero-badge{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 18px;
    background:rgba(252,251,248,.82);
    backdrop-filter:blur(2px);
    border:2px solid rgba(184,149,88,.55);
    border-radius:999px;
}

.tablet-carton-hero-badge img{
    width:18px;
    height:18px;
}

.tablet-carton-hero-badge span{
    white-space:normal;
    text-align:center;
    line-height:1.2;
    font-size:15px;
    font-weight:600;
}

/* CTA */

.tablet-carton-hero-buttons{
    display:flex;
    justify-content:flex-start;
    margin-top:20px;
}

.tablet-carton-hero-buttons a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:270px;
    height:48px;
    flex:none;
}

.tablet-carton-hero-buttons .carton-btn-primary{
    padding:0;
    min-width:0;
}

/*M4.13.02 AVANTAGES */

.carton-advantages{
    display:none;
}

.tablet-carton-advantages{
    display:block;
}

/*M4.13.03 APPLICATIONS */

.carton-applications-section{
    display:none;
}

.tablet-carton-applications-section{
    display:block;
    padding: 0 0 48px;
}

/*M4.13.04 CARACTÉRISTIQUES TECHNIQUES */

.carton-specs-section{
    display:none;
}

.tablet-carton-specs-section{
    display:block;
    padding:0 0 48px;
}

.tablet-carton-specs-section .container + .container{
    margin-top:48px;
}

/*M4.13.05 CONDITIONNEMENT */

.carton-packaging-section{
    display:none;
}

.tablet-carton-packaging-section{
    display:block;
    padding:0 0 48px;
}

/* ===================================
M4.14 GOBELETS CARTON SANS PLASTIQUE PAGE
==================================== */

/*M4.14.01 HERO */

/* DISPLAY */

.plastic-hero-section{
    display:none;
}

.tablet-plastic-hero-section{
    display:block;
}

/* CONTAINER */

.tablet-plastic-hero-container{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:400px;
    padding:0 42px;
    border-radius:0 0 30px 30px;
    background-image:
        url('./assets/images/web/ocups-hero-gobelets-carton-sans-plastique-bg.webp');

    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.tablet-plastic-hero-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to right,
        #FCFBF8 0%,
        #FCFBF8 30%,
        rgba(252,251,248,.92) 55%,
        rgba(252,251,248,.55) 75%,
        rgba(252,251,248,0) 100%
    );
}

.tablet-plastic-hero-content,
.tablet-plastic-hero-buttons {
    position: relative;
    z-index: 2;
}

/* CONTENT */

.tablet-plastic-hero-content{
    max-width:430px;
    padding-top:15px;
    display:flex;
    flex-direction:column;
    flex:1;
}

/* LABEL */

.tablet-plastic-hero-label {
    display: inline-flex;
    flex-direction: column;
    margin-top:12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #B89558;
    margin-bottom: 14px;
}

.tablet-plastic-hero-label::after {
    content: "";
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: #B89558;
    border-radius: 999px;
}

/* TITLE */

.tablet-plastic-hero-title{
    margin:0 0 18px;
    line-height:.88;
}

.tablet-plastic-hero-title-green,
.tablet-plastic-hero-title-dark{
    display:block;
    font-family:'Poppins',sans-serif;
    font-size:30px;
    font-weight:700;
}

.tablet-plastic-hero-title-green{
    color:var(--green-primary);
}

.tablet-plastic-hero-title-dark{
    color:var(--text-primary);
}

/* DESCRIPTION */

.tablet-plastic-hero-description{
    margin-bottom:46px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:500;
    line-height:1.65;
    color:var(--text-primary);
}

/* BADGES */

.tablet-plastic-hero-badges{
    display:flex;
    gap:12px;
    margin-bottom:22px;
}

.tablet-plastic-hero-badge{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:52px;
    padding:0 12px;
    background:rgba(252,251,248,.82);
    backdrop-filter:blur(2px);
    border:2px solid rgba(184,149,88,.55);
    border-radius:999px;
}

.tablet-plastic-hero-badge img{
    width:18px;
    height:18px;
    flex-shrink:0;
}

.tablet-plastic-hero-badge span{
    white-space:normal;
    text-align:center;
    line-height:1.2;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:600;
    color:var(--text-primary);
}

/* CTA */

.tablet-plastic-hero-buttons{
    display:flex;
    justify-content:flex-start;
    margin-top:20px;
}

.tablet-plastic-hero-buttons a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:270px;
    height:48px;
    flex:none;
}

.tablet-plastic-hero-buttons .plastic-btn-primary{
    padding:0;
    min-width:0;
}

/*M4.14.02 AVANTAGES */

.plastic-advantages{
    display:none;
}

.tablet-plastic-advantages{
    display:block;
}

/*M4.14.03 APPLICATIONS */

.plastic-applications-section{
    display:none;
}

.tablet-plastic-applications-section{
    display:block;
    padding:0 0 48px;
}

/*M4.14.04 TECHNOLOGY */

/* DISPLAY */

.plastic-technology-section{
    display:none;
}

.tablet-plastic-technology-section{
    display:block;
    padding:0 0 48px;
}

/* CARD */

.tablet-plastic-technology-card{
    position:relative;
    background:#F8F3EA;
    border:1px solid rgba(184,149,88,.45);
    border-radius:28px;
    padding:42px 40px 48px;
    overflow:hidden;
}

/* DECORS */

.tablet-plastic-technology-decor{
    pointer-events:none;
}

.tablet-plastic-technology-wave{
    position:absolute;
    left:-25px;
    bottom:-55px;
    width:180px;
    opacity:.08;
}

.tablet-plastic-technology-leaf{
    position:absolute;
    width:185px;
    top:10px;
    right:-52px;
    opacity:.08;
}

/* VISUEL */

.tablet-plastic-technology-visual{
    display:flex;
    justify-content:center;
    margin-bottom:42px;
}

.tablet-plastic-technology-visual img{
    width:180px;
    height:auto;
}

/* CONTENT */

.tablet-plastic-technology-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.tablet-plastic-technology-content .section-title{
    margin-bottom:26px;
}

.tablet-plastic-technology-content p{
    margin:0 0 18px;
    font-family:'Inter',sans-serif;
    font-size:17px;
    line-height:1.75;
    color:var(--text-primary);
}

.tablet-plastic-technology-content p:last-of-type{
    margin-bottom:28px;
}

.tablet-plastic-technology-content strong{
    color:var(--green-primary);
    font-weight:600;
}

/* CTA */

.tablet-plastic-technology-cta{
    align-self:center;
    margin-top:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:16px 34px;
    text-decoration:none;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-size:17px;
    font-weight:600;
}

/*M4.14.05 CARACTÉRISTIQUES TECHNIQUES */

.plastic-specs-section{
    display:none;
}

.tablet-plastic-specs-section{
    display:block;
    padding:0 0 48px;
}

.tablet-plastic-specs-section .container + .container{
    margin-top:48px;
}

/*M4.14.06 CONDITIONNEMENT */

.plastic-packaging-section{
    display:none;
}

.tablet-plastic-packaging-section{
    display:block;
    padding:0 0 48px;
}

/* ===================================
M4.15 CONTACT PAGE
==================================== */
/*M4.15.01 FORM */
/* Empilement formulaire + sidebar (chacun pleine largeur).
   Scopé pour battre le débordement du .contact-form-section
   .two-columns-layout posé en M3 (992) — même spécificité mais
   placé après dans la cascade -> l'emporte à 768 et en dessous.
   Le hero reste inchangé à ce palier (validé tel quel). */

    .contact-form-section .two-columns-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

/* ===================================
M4.16 SOCIETE PAGE
==================================== */
/*M4.16.01 GRILLES */
/* Hero inchangé à ce palier (2 colonnes héritées, comme contact).
   On effondre les grilles : approche 3->1, avantages 4->2. */

    .societe-approach-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .societe-advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }

/* ===================================
M4.17 ENGAGEMENT PAGE
==================================== */
/*M4.17.01 GRILLE */
/* Hero inchangé (2 colonnes héritées). Cartes 4 -> 2. */

    .engagement-advantages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ====================================
M5. MOBILE — MAX-WIDTH: 430PX
======================================= */
/* ===================================
M5.01 GLOBAL
==================================== */

/* Éléments desktop masqués */

.main-navigation {
    display: none;
}

.header-btn {
    display: none;
}
.hero-buttons {
    display: none;
}

.hero-trustbar {
    display: none;
}

.features-bar {
    display: none;
}

.products-section {
    display: none;
}

.engagement-section {
    display: none;
}

.site-footer {
    display: none;
}

/* ===================================
M5.02 HEADER / BURGER
==================================== */

/* HEADER */

.site-header {
    position: relative;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo img {
    width: 145px;
}
/* CTA ICON */

.mobile-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 50%;
    margin-left: auto;
    margin-right: 10px;
    flex-shrink: 0;
}

.mobile-cta-icon img {
    width: 28px;
    height: 28px;
}

/* BURGER BUTTON */

.mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: #0B5D3F;
    border-radius: 999px;
    transition: all .25s ease;
}
.mobile-menu-btn.is-active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);

}
.mobile-menu-btn.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.is-active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);

}

/* OVERLAY */

.mobile-menu-overlay {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #F5F1E8;
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding:
        32px
        32px
        40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}
/* OPEN STATE */

.mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);

}

/* NAVIGATION */

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mobile-menu-nav a {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0B5D3F;
    text-decoration: none;
}
/* CTA MENU */

.mobile-menu-cta {
    margin-top: auto;
}

.mobile-menu-btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 999px;
    background: #0B5D3F;
    color: #F5F1E8;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

/* BODY LOCK */
body.menu-open {
    overflow: hidden;
}

/* ===================================
M5.03 HOME HERO
==================================== */

/* HERO */
.hero-section {
    height: auto;
    min-height: 470px;
}
.hero-container {
    position: relative;
    height: auto;
    min-height: 470px;
    padding-bottom: 20px;
    background-image: url('./assets/images/web/ocups-hero-mobile-bg.webp');
    background-size: cover;
    background-position: center 25%;
    border-radius: 0 0 80px 80px;
    overflow: hidden;
}
/* HERO OVERLAY */
.hero-container::before {
    content: none;
}
.hero-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(252,251,248,0.28);
    pointer-events: none;
    z-index: 1;
}
/* HERO CONTENT */
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding-top: 14px;
    padding-left: 20px;
    max-width: 240px;
}

/* HERO TITLE */
.hero-title-green {
    font-size: 24px;
    line-height: 1.2;
    display: block;
    margin-bottom: 2px;
}
.hero-title-dark {
    font-size: 20px;
    line-height: 1.2;
    display: block;
    margin-top: 0;
}

/* HERO DESCRIPTION */

.hero-description {
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    max-width: 200px;
}

/* ===================================
M5.04 HOME TRUST BAR
==================================== */

/* TRUST BAR */
.mobile-trustbar {
    display: block;
    padding: 12px 18px;
    background: transparent;
}

.mobile-trust-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* TRUST ITEM */
.trust-inline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    text-align: center;
}

.trust-inline-item img {
    width: 22px;
    height: 22px;
}

.trust-inline-item span {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #0B5D3F;
}

/* ===================================
M5.05 HOME FEATURES BAR
==================================== */

/* FEATURES */
.mobile-features-bar {
    display: block;
    padding: 8px 12px 12px;
    background: transparent;
}

.mobile-features-grid {
    display: grid;
    grid-template-columns:
        repeat(4, 92px);
    justify-content: center;
    gap: 8px;
}

/* FEATURES CARDS */
.mobile-features-grid .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    width: 92px;
    height: 120px;
    padding: 12px 6px;
    background: #FCFBF8;
    border-radius: 16px;
    border: 1px solid rgba(11,93,63,0.08);
    box-sizing: border-box;
}

.mobile-features-grid .feature-item img {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.mobile-features-grid .feature-item span {
    display: block;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 600;
    color: #1E1E1E;
    white-space: normal;
    word-break: break-word;
}

/* ===================================
M5.06 HOME PRODUCTS
==================================== */

/* PRODUCTS HEADER */
.mobile-products-header-section,
    .mobile-products-slider {
        display: block;
    }

.mobile-products-header-section {
    margin-top: 16px;
}

.mobile-products-header {
    padding: 0 16px;
    margin-bottom: 12px;
}

.mobile-products-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.05;
    font-weight: 700;
    color: #1E1E1E;
    max-width: 320px;
}

.mobile-products-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #1E1E1E;
    margin-bottom: 12px;
}

/* PRODUCTS SLIDER */
.mobile-products-slider {
    padding: 12px 12px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-products-slider::-webkit-scrollbar {
    display: none;
}
/* PRODUCTS TRACK */
.products-slider-track {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
}

.product-card-mobile:first-child {
    margin-left: 48px;
}

.product-card-mobile:last-child {
    margin-right: 48px;
}

/* PRODUCTS CARDS */
.product-card-mobile {
    flex: 0 0 320px;
    min-height: 260px;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 22px;
    border-radius: 24px;
    background-image:
        url('./assets/textures/web/paper-recycled-texture.webp');
    background-size: cover;
    background-repeat: repeat;
    border: 1px solid rgba(11,93,63,0.08);
    overflow: hidden;
    scroll-snap-align: center;
}

/* PRODUCTS CONTENT */
.product-content {
    width: 40%;
    position: relative;
    z-index: 2;
}

.product-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 0.9;
    font-weight: 700;
    color: #0B5D3F;
    margin-bottom: 14px;
}
/* PRODUCTS LIST */
.product-content ul {
    list-style: disc;
    padding-left: 18px;
    margin: 12px 0 18px;
}

.product-content li {
    display: list-item;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.25;
    color: #1E1E1E;
}
.product-content li::marker {
    color: #0B5D3F;
}
/* PRODUCTS BUTTON */
.product-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    margin-top: 10px;
    background: #0B5D3F;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #F5F1E8;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.product-link:hover {
    opacity: 0.92;
}
/* PRODUCTS IMAGE */
.product-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* CONIQUE IMAGE */

.product-image-conique img {
    position: absolute;
    width: 160px;
    top: 6px;
    right: 4px;
    filter:
    drop-shadow(
        0 24px 18px
        rgba(0,0,0,.18)
    );
    transform: rotate(6deg);
}
 /* FOND PLAT IMAGE */

    .product-image-fondplat img {
    position: absolute;
    width: 115px;
    top: 34px;
    right: 22px;
    transform: rotate(6deg);
        filter:
    drop-shadow(
        0 24px 18px
        rgba(0,0,0,.18)
    );
}

/* PRODUCTS PAGINATION */
.products-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.products-pagination span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D6D6D6;
    transition: all .25s ease;
}

.products-pagination .active {
    width: 28px;
    background: #0B5D3F;
    border-radius: 999px;
}

/* ===================================
M5.07 HOME ACTIVITIES
==================================== */

/* ACTIVITIES HEADER */
.mobile-activity-header {
    padding: 0 16px;
    margin-bottom: 16px;
}

.activity-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.05;
    font-weight: 700;
    color: #1E1E1E;
}

.mobile-activity-section {
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
  
}
/* ACTIVITIES GRID */

.mobile-activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px;
}
/* ACTIVITIES CARDS */

.mobile-activity-card {
    border-radius: 18px;
    overflow: hidden;
    transition: transform .2s ease;
}
.mobile-activity-card:active {
    transform: scale(.98);
}
.mobile-activity-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===================================
M5.08 HOME ENGAGEMENT
==================================== */

/* ENGAGEMENT */
.mobile-engagement-section {
    display: block;
    padding: 0 16px;
    margin-bottom: 32px;
}
.mobile-engagement-title {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.05;
    color: #1E1E1E;
    margin-bottom: 16px;
}
/* ENGAGEMENT IMAGE */

.mobile-engagement-image {
    margin-bottom: 20px;
}

.mobile-engagement-image img {
    width: 100%;
    border-radius: 24px;
    display: block;
    
}

/* ENGAGEMENT CONTENT */

.mobile-engagement-content h2 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 600;
    color: #0B5D3F;
    margin-bottom: 16px;
    text-align: center;
}

.mobile-engagement-content p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #404040;
}
/* ENGAGEMENT FEATURES */
.mobile-engagement-feature {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid rgba(11,93,63,.08);
}

.mobile-engagement-icon img {
    width: 40px;
    height: 40px;
}

.mobile-engagement-text h3,
.mobile-engagement-text p {
    margin: 0;
}

.mobile-engagement-text h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0B5D3F;
    margin-bottom: 4px;
    
}

.mobile-engagement-text p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #404040;
}

/* ===================================
M5.09 HOME CTA
==================================== */

.mobile-cta-section {
    display: block;
    margin: 16px 16px 24px;
    padding: 18px 20px;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            #0B5D3F 0%,
            #084830 100%
        );
}
.mobile-cta-section h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    color: #FFF;
    margin-bottom: 10px;
}
.mobile-cta-section p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
    margin-bottom: 14px;
}
.mobile-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 18px;
    border-radius: 999px;
    background: #FFFFFF;
    font-family: 'Inter', sans-serif;
    color: #0B5D3F;
    font-size: 12px;
    font-weight: 700;
}

/* ===================================
M5.10 FOOTER
==================================== */

.mobile-footer {
    display: block;
    margin-top: 24px;
    padding: 24px 20px 20px;
    border-top: 1px solid rgba(11,93,63,.08);
}

/* FOOTER BRAND */

.mobile-footer-brand {
    margin-bottom: 24px;
}

.mobile-footer-logo img {
    width: 150px;
    height: auto;
    display: block;
}

.mobile-footer-description {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #1E1E1E;
}

/* FOOTER ACCORDIONS */
.mobile-footer-accordion {
    border-top: 1px solid rgba(11,93,63,.08);
}

.footer-accordion-trigger {
    width: 100%;
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1E1E1E;

    cursor: pointer;
}

.accordion-icon {
    font-size: 20px;
    color: #0B5D3F;
}
/* ACCORDION STATES */

.footer-accordion-content.active {
    display: block;
}

.accordion-icon.active {
    transform: rotate(45deg);
}
/* FOOTER ACCORDION CONTENT */

.footer-accordion-content {
    display: none;
    padding-bottom: 18px;
}

.footer-accordion-content a {
    display: block;
    padding: 4px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #1E1E1E;
    text-decoration: none;
}
/* FOOTER CTA */

.mobile-footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 24px;
    border-radius: 999px;
    background: #0B5D3F;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #F5F1E8;
    text-decoration: none;
    
}
/* FOOTER BOTTOM */
.mobile-footer-bottom {
    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid rgba(11,93,63,.08);
}

.mobile-footer-bottom p {
    margin-bottom: 12px;

    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6E6E6E;
}
/* LEGAL */
.mobile-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mobile-footer-legal a {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #6E6E6E;
    text-decoration: none;
}

/* ===================================
M5.11 PRODUITS PAGE
==================================== */

/* HERO PRODUITS MOBILE */

.products-hero-section {
    display: none;
}

.mobile-products-hero-section {
    display: block;
}

.mobile-products-hero-container {
    position: relative;
    min-height: 520px;
    padding:
        16px
        20px
        24px;
    background-image:
        url('./assets/images/web/ocups-hero-mobile-bg.webp');

    background-size: cover;
    background-position: center 25%;
    border-radius: 0 0 80px 80px;
    overflow: hidden;
}

/* OVERLAY */

.mobile-products-hero-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(252,251,248,0.72) 0%,
            rgba(252,251,248,0.52) 35%,
            rgba(252,251,248,0.18) 65%,
            rgba(252,251,248,0.05) 100%
        );

    z-index: 1;

}

/* CONTENT */

.mobile-products-hero-content {
    position: relative;
    z-index: 2;
    max-width: 220px;
    padding-top: 8px;
}

/* TITLE */

.mobile-products-hero-title {
    margin-bottom: 22px;
}

.mobile-products-hero-title-green {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--green-primary);
}

.mobile-products-hero-title-dark {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--text-primary);
}

/* DESCRIPTION */

.mobile-products-hero-description {
    max-width: 165px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 550;
    color: var(--text-primary);
}

/*PRODUITS OVERVIEW MOBILE */

.products-overview-section {
    display: none;
}

.mobile-products-overview-section {
    display: block;
    margin-top: 36px;
}

.mobile-products-overview-container {
    width: 100%;
}

/* HEADER */
/* Variante page Produits : portée limitée à ses 2 conteneurs,
sinon elle écrasait aussi le header de la home (M5.06) */

.mobile-products-overview-container .mobile-products-header,
.mobile-products-activities-container .mobile-products-header {
    padding: 0 20px;
    margin-bottom: 20px;
}

.mobile-products-page-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
}

/* SLIDER */

.mobile-products-overview-slider {
    margin-top: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-products-overview-slider::-webkit-scrollbar {
    display: none;
}

.mobile-products-overview-track {
    display: flex;
    gap: 16px;
    padding: 0 20px;
}

/* CARDS */

.mobile-products-overview-card {
    flex: 0 0 320px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px;
    padding: 28px 24px;
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,.05);
    background:
        linear-gradient(
            rgba(252,251,248,0.92),
            rgba(252,251,248,0.92)
        ),
        url('./assets/textures/master/natural-fibers-texture.png');

    background-size: cover;
    background-position: center;
    scroll-snap-align: center;
}

/* CONTENT */

.mobile-products-overview-content {
    display: flex;
    flex-direction: column;
}

/* TITLE */

.mobile-products-overview-title {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--green-primary);
}

/* TEXT */

.mobile-products-overview-text {
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
}

.mobile-products-overview-text:last-child {
    margin-bottom: 0;
}

/* LINK */

.mobile-products-overview-link {
    margin-top: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--green-primary);
    text-decoration: none;
}

/* PAGINATION */

.mobile-products-overview-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.mobile-products-overview-pagination span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #D6D6D6;
}

.mobile-products-overview-pagination .active {
    width: 28px;
    background: var(--green-primary);
}
/*M5.11.01 ACTIVITÉS */

.products-activity-section {
    display: none;
}

.mobile-products-activities-section {
    display: block;
    margin-top: 40px;
}

.mobile-products-activities-slider {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mobile-products-activities-slider::-webkit-scrollbar {
    display: none;
}

.mobile-products-activities-track {
    display: flex;
    gap: 16px;
    padding: 0 20px;
}

/* CARD */

.mobile-products-activity-card {
    flex: 0 0 320px;
    background: #FFFFFF;
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,.04);
    overflow: hidden;
    scroll-snap-align: center;
}

/* IMAGE */

.mobile-products-activity-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

/* CONTENT */

.mobile-products-activity-content {
    padding: 20px;
}

.mobile-products-activity-content h3 {
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--green-primary);
}

.mobile-products-activity-content p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-primary);
}

/* PAGINATION */

.mobile-products-activities-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
}

.mobile-products-activities-pagination span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #D6D6D6;
}

.mobile-products-activities-pagination .active {
    width: 28px;
    background: var(--green-primary);
}

/* ===================================
M5.12 GOBELETS CONIQUES PAGE
==================================== */

/* HERO */

.mobile-conical-hero-section{
    display:block;

}

.conical-hero-section{
    display:none;
}

.tablet-conical-hero-section{
    display:none;
}

.conical-benefits-section{
    display:none;
}

.mobile-conical-hero-container{
    position:relative;
    min-height:520px;
    padding:
        16px
        20px
        24px;

    background-image:
        url('./assets/images/web/ocups-hero-mobile-gobelets-coniques-bg.webp');

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 35%;
    border-radius:0 0 80px 80px;
    overflow:hidden;

}

.mobile-conical-hero-container::after{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(252,251,248,.10) 0%,
        rgba(252,251,248,.04) 35%,
        rgba(252,251,248,0) 65%
    );

    pointer-events:none;
    z-index:1;

}

/* CONTENT */

.mobile-conical-hero-content{
    position:relative;
    z-index:2;
    width:54%;
    padding-top: 12px;
    max-width:210px;

}

/* LABEL */

.mobile-conical-hero-label {
    display: inline-flex;
    flex-direction: column;
    margin-top:12px;    
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #B89558;
    margin-bottom: 14px;
}

.mobile-conical-hero-label::after {
    content: "";
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: #B89558;
    border-radius: 999px;
}

/* TITLE */

.mobile-conical-hero-title{
    margin:0;
    font-family:'Poppins',sans-serif;
    font-size:28px;
    line-height:1.05;
    font-weight:700;
    color:var(--green-primary);

}

.mobile-conical-hero-title span{
    display:block;
    color:var(--text-primary);

}


/* DESCRIPTION */

.mobile-conical-hero-text{
    margin-top:20px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.65;
    font-weight:500;
    color:var(--text-primary);

}

/* CTA */

.mobile-conical-hero-buttons{
    margin-top:18px;
    margin-left:4px;
    display:flex;
    justify-content:flex-start;

}

/* BUTTON */

.mobile-conical-hero-buttons .conical-btn-secondary{
    width:210px;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

}

/* ICON */

.mobile-conical-hero-buttons .conical-btn-secondary img{
    width:20px;
    height:20px;
    flex-shrink:0;

}

/* TEXT */

.mobile-conical-hero-buttons .conical-btn-secondary span{
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;

}

/* DISPLAY */

.mobile-conical-benefits-section{
    display:block;
    padding:48px 0;
}


/* CONTAINER */

.mobile-benefits-container{
    display:flex;
    flex-direction:column;
    gap:24px;

}


/* MOBILE CONICAL TITLES */

.mobile-section-title{
    margin:0 0 18px;
    font-family:'Poppins',sans-serif;
    font-size:20px;
    line-height:1.05;
    font-weight:700;
    color:#0B5D3F;

}


.mobile-section-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 10px;
    background: #B89558;
    border-radius: 999px;
}

/* TEXT */

.mobile-benefits-content{
    display:flex;
    flex-direction:column;

}


.mobile-benefits-content p{
    margin:0;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.7;
    font-weight:400;
    color:var(--text-primary);

}


.mobile-benefits-content p + p{
    margin-top:18px;

}


.mobile-benefits-content:last-child{
    margin-bottom:0;
}

/* IMAGE */

.mobile-benefits-image{
    border-radius:24px;
    overflow:hidden;

}


.mobile-benefits-image img{
    display:block;
    width:100%;
    max-height: 420px;

}

/* HIGHLIGHT */

.mobile-conical-benefits-highlight{
    margin:24px;
    padding-left:18px;
    border-left:4px solid #C8A46A;
    font-family:'Inter',sans-serif;
    font-size:18px;
    line-height:1.65;
    font-weight:600;
    color:#0B5D3F;
}

/* AVANTAGES - MOBILE */

.conical-advantages{
    display:none;
}

.tablet-conical-advantages{
    display:none;
}

.mobile-conical-advantages-section{
    display:block;
    padding:0 0 48px;
}

/* GRID */

.mobile-advantages-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;

}

/* CARD */

.mobile-advantage-card{
    background:#FCFBF8;
    border:1px solid #D8C29B;
    border-radius:20px;
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

}

/* ICON */

.mobile-advantage-card img{
    width:34px;
    height:34px;
    margin-bottom:16px;

}

/* TITLE */

.mobile-advantage-card h3{
    margin:0 0 10px;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    color:#0B5D3F;

}

/* TEXT */

.mobile-advantage-card p{
    margin:0;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.45;
    color:#444;

}

/* APPLICATIONS - MOBILE */

.conical-applications-section {
    display: none;
}

.tablet-conical-applications-section {
    display: none;
}

.mobile-conical-applications-section{
    display:block;
     padding:0 0 48px;

}

/* SLIDER */

.mobile-applications-slider{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:8px 2px 14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;

}

.mobile-applications-slider::-webkit-scrollbar{
    display:none;

}

/* CARD */

.mobile-application-card{
    flex:0 0 132px;
    text-decoration:none;
    scroll-snap-align:start;

}

/* IMAGE */

.mobile-application-card img{
    width:132px;
    height:132px;
    display:block;
    object-fit:cover;
    
}

/* TITLE */

.mobile-application-card span{
    display:block;
    margin-top:12px;
    text-align:center;
    font-family:'Inter',sans-serif;
    font-size:13px;
    line-height:1.35;
    font-weight:600;
    color:#0B5D3F;

}

/*M5.12.01 BRC GLOBAL STANDARD */

.tablet-brc-section{
    display:none;
}

.mobile-brc-section{
    display:block;
    padding:0 0 48px;

}

/* CARD */

.mobile-brc-container{
    position:relative;
    overflow:hidden;
    padding:32px 24px;
    background:#F8F3EA;
    border-radius:24px;

}

/* DECOR */

.mobile-brc-globe{
    position:absolute;
    top:-24px;
    right:-24px;
    width:110px;
    opacity:.08;
    pointer-events:none;

}

.mobile-brc-leaf{
    position:absolute;
    bottom:-18px;
    left:-18px;
    width:82px;
    opacity:.08;
    pointer-events:none;

}

/* LOGO */

.mobile-brc-logo{
    display:block;
    width:92px;
    margin:0 auto 18px;

}

/* CONTENT */

.mobile-brc-content{
    position:relative;
    z-index:2;

}

.mobile-brc-content p{
    margin-bottom:16px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.65;
    color:#444;

}

.mobile-brc-content p:last-child{
    margin-bottom:0;

}

/* CTA */

.mobile-brc-button{
    margin-top:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:280px;
    margin-left:auto;
    margin-right:auto;
    height:46px;
    border-radius:999px;
    background:#0B5D3F;
    color:#F8F3EA;
    text-decoration:none;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:700;

}

.mobile-brc-button img{
    width:18px;
    height:18px;

}

.brc-arrow{
    width:16px;
    height:16px;
    flex-shrink:0;

}

/*M5.12.02 CARACTÉRISTIQUES TECHNIQUES */

.tablet-conical-specs-section{
    display:none;
}

.mobile-conical-specs-section{
    display:block;
    padding:0 0 48px;

}

/* carte */

.mobile-specs-card,
.mobile-composition-card{
    margin-bottom:48px;
    background:#FCFBF8;
    border:1px solid #D8C29B;
    border-radius:24px;
    padding:28px;

}

/* caractéristiques */

.mobile-specs-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;

}

.mobile-specs-list{
    flex:1;

}

.mobile-spec-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #E9E1D3;

}

.mobile-spec-row:last-child{
    border-bottom:none;

}

.mobile-spec-row span,
.mobile-spec-row strong{

    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:400;
    color:#222;

}

/* schéma produit */

.mobile-specs-product{
    flex-shrink:0;

}

.mobile-specs-product img{
    display:block;
    width:110px;
    height:auto;

}

/* composition */

.mobile-composition-content{
    display:flex;
    flex-direction:column;

}

.mobile-composition-text p{
    margin:0 0 18px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.65;
    color:#444;

}

.mobile-composition-text p:last-child{
    margin-bottom:18px;

}

/* certifications */

.mobile-specs-certifications{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;

}

.mobile-specs-certifications img{
    width:auto;
    height:42px;

}

/* Carton : un seul logo large (pictogramme légal), pas 3 petites icônes */

.mobile-carton-specs-section .mobile-specs-certifications img{
    width:100%;
    max-width:200px;
    height:auto;
}

/* MENTION LÉGALE */

.mobile-composition-content p.carton-specs-legal-note{
    margin-top:12px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    line-height:1.5;
    font-weight:400;
    color:var(--text-secondary);
    text-align:center;
}

/*M5.12.03 CONDITIONNEMENT */

.tablet-conical-packaging-section{
    display:none;
}

.conical-packaging-section{
    display:none;
}

.mobile-conical-packaging-section{
    display:block;
    padding:0 0 48px;

}

/* CARD */

.mobile-packaging-card{
    background:#FCFBF8;
    border:1px solid #D8C29B;
    border-radius:24px;
    padding:28px;

}

/* GRID */

.mobile-packaging-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;

}

/* HEADER */

.mobile-packaging-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;

}

.mobile-packaging-header img{
    width:28px;
    height:28px;
    flex-shrink:0;

}

.mobile-packaging-header h3{
    margin:0;
    font-family:'Poppins',sans-serif;
    font-size:18px;
    font-weight:700;
    color:#0B5D3F;

}

.mobile-packaging-header h3::after{
    content:"";
    display:block;
    width:38px;
    height:3px;
    margin-top:8px;
    background:#B89558;
    border-radius:999px;

}

/* LIST */

.mobile-packaging-column ul{

    list-style:disc;
    list-style-position:outside;

    margin:0;
    padding-left:18px;

}

.mobile-packaging-column li{

    display:list-item;

    margin-bottom:14px;

    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.55;
    color:#222;

}

.mobile-packaging-column li::marker{

    color:#B89558;
    font-size:.9em;

}

/*M5.12.04 FAQ */

.tablet-faq-section{
    display:none;
}

.mobile-conical-faq-section{
    display:block;
    padding:0 0 48px;

}

/* LIST */

.mobile-faq-list{
    display:flex;
    flex-direction:column;
    gap:16px;

}

/* CARD */

.mobile-faq-item{
    background:transparent;
    border:1px solid rgba(184,149,88,.55);
    border-radius:18px;
    transition:.25s;

}

.mobile-faq-item.active{
    border-color:var(--green-primary);
    box-shadow:0 10px 24px rgba(11,93,63,.06);

}

/* QUESTION */

.mobile-faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;

}

/* LEFT */

.mobile-faq-question-content{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1;

}

/* ICON */

.mobile-faq-question-content img{
    width:34px;
    height:34px;
    flex-shrink:0;

}

/* QUESTION */

.mobile-faq-question span{
    font-family:'Poppins',sans-serif;
    font-size:16px;
    line-height:1.25;
    font-weight:600;
    color:var(--green-primary);

}

/* CHEVRON */

.mobile-faq-chevron{
    width:18px;
    height:18px;
    color:var(--green-primary);
    flex-shrink:0;
    transition:transform .25s ease;

}

.mobile-faq-item.active .mobile-faq-chevron{
    transform:rotate(180deg);

}

/* ANSWER */

.mobile-faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;

}

.mobile-faq-item.active .mobile-faq-answer{
    max-height:220px;

}

.mobile-faq-answer p{
    padding:0 18px 18px 66px;
    margin:0;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.65;
    color:var(--text-primary);

}

/* ===================================
M5.13 GOBELETS CARTON PAGE
==================================== */
/*M5.13.01 HERO */

.mobile-carton-hero-section{
    display:block;
}

.hero-carton-section{
    display:none;
}

.tablet-carton-hero-section{
    display:none;
}

.mobile-carton-hero-container{
    position:relative;
    min-height:520px;
    padding:
        16px
        20px
        24px;

    background-image:
        url('./assets/images/web/ocups-hero-mobile-gobelets-carton-20cl-bg.webp');

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 35%;
    border-radius:0 0 80px 80px;
    overflow:hidden;
}

.mobile-carton-hero-container::after{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        100deg,
        #FCFBF8 0%,
        rgba(252,251,248,.95) 25%,
        rgba(252,251,248,.75) 45%,
        rgba(252,251,248,.35) 60%,
        rgba(252,251,248,0) 75%
    );

    pointer-events:none;
    z-index:1;

}

/* CONTENT */

.mobile-carton-hero-content{
    position:relative;
    z-index:2;
    width:54%;
    padding-top: 12px;
    max-width:210px;

}

/* LABEL */

.mobile-carton-hero-label {
    display: inline-flex;
    flex-direction: column;
    margin-top:12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #B89558;
    margin-bottom: 14px;
}

.mobile-carton-hero-label::after {
    content: "";
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: #B89558;
    border-radius: 999px;
}

/* TITLE */

.mobile-carton-hero-title{
    margin:0;
    font-family:'Poppins',sans-serif;
    font-size:28px;
    line-height:1.05;
    font-weight:700;
    color:var(--green-primary);

}

.mobile-carton-hero-title span{
    display:block;
    color:var(--text-primary);

}

/* DESCRIPTION */

.mobile-carton-hero-text{
    margin-top:20px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.65;
    font-weight:500;
    color:var(--text-primary);

}

/*M5.13.02 POURQUOI CHOISIR (BENEFITS) */

.carton-benefits-section{
    display:none;
}

.mobile-carton-benefits-section{
    display:block;
    padding:48px 0;
}

/*M5.13.03 AVANTAGES */

.carton-advantages{
    display:none;
}

.tablet-carton-advantages{
    display:none;
}

.mobile-carton-advantages-section{
    display:block;
    padding:0 0 48px;
}

/*M5.13.04 APPLICATIONS */

.carton-applications-section{
    display:none;
}

.tablet-carton-applications-section{
    display:none;
}

.mobile-carton-applications-section{
    display:block;
    padding:0 0 48px;
}

/*M5.13.05 CARACTÉRISTIQUES TECHNIQUES */

.carton-specs-section{
    display:none;
}

.tablet-carton-specs-section{
    display:none;
}

.mobile-carton-specs-section{
    display:block;
    padding:0 0 48px;
}

/*M5.13.06 CONDITIONNEMENT */

.carton-packaging-section{
    display:none;
}

.tablet-carton-packaging-section{
    display:none;
}

.mobile-carton-packaging-section{
    display:block;
    padding:0 0 48px;
}


/* ===================================
M5.14 GOBELETS CARTON SANS PLASTIQUE PAGE
==================================== */

/*M5.14.01 HERO */

/* DISPLAY */

.plastic-hero-section{
    display:none;
}

.tablet-plastic-hero-section{
    display:none;
}

.mobile-plastic-hero-section{
    display:block;
}

/* CONTAINER */

.mobile-plastic-hero-container{
    position:relative;
    min-height:520px;
    padding:
        16px
        20px
        24px;

    background-image:
        url('./assets/images/web/ocups-hero-mobile-gobelets-carton-sans-plastique-bg.webp');

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 35%;
    border-radius:0 0 80px 80px;
    overflow:hidden;
}

.mobile-plastic-hero-container::after{

    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        100deg,
        #FCFBF8 0%,
        rgba(252,251,248,.95) 25%,
        rgba(252,251,248,.75) 45%,
        rgba(252,251,248,.35) 60%,
        rgba(252,251,248,0) 75%
    );

    pointer-events:none;
    z-index:1;

}

/* CONTENT */

.mobile-plastic-hero-content{
    position:relative;
    z-index:2;
    width:54%;
    padding-top:12px;
    max-width:210px;

}

/* LABEL */

.mobile-plastic-hero-label {
    display: inline-flex;
    flex-direction: column;
    margin-top:12px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #B89558;
    margin-bottom: 14px;
}

.mobile-plastic-hero-label::after {
    content: "";
    width: 46px;
    height: 3px;
    margin-top: 10px;
    background: #B89558;
    border-radius: 999px;
}

/* TITLE */

.mobile-plastic-hero-title{
    margin:0;
    font-family:'Poppins',sans-serif;
    font-size:28px;
    line-height:1.05;
    font-weight:700;
    color:var(--green-primary);

}

.mobile-plastic-hero-title span{
    display:block;
    color:var(--text-primary);

}

/* DESCRIPTION */

.mobile-plastic-hero-text{
    margin-top:20px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.65;
    font-weight:500;
    color:var(--text-primary);

}

/*M5.14.02 POURQUOI CHOISIR (BENEFITS) */

.plastic-benefits-section{
    display:none;
}

.mobile-plastic-benefits-section{
    display:block;
    padding:48px 0;
}

/*M5.14.03 AVANTAGES */

.plastic-advantages{
    display:none;
}

.tablet-plastic-advantages{
    display:none;
}

.mobile-plastic-advantages-section{
    display:block;
    padding:0 0 48px;
}

/*M5.14.04 APPLICATIONS */

.plastic-applications-section{
    display:none;
}

.tablet-plastic-applications-section{
    display:none;
}

.mobile-plastic-applications-section{
    display:block;
    padding:0 0 48px;
}

/*M5.14.05 TECHNOLOGY */

/* DISPLAY */

.plastic-technology-section{
    display:none;
}

.tablet-plastic-technology-section{
    display:none;
}

.mobile-plastic-technology-section{
    display:block;
    padding:0 0 48px;
}

/* CARD */

.mobile-plastic-technology-container{
    position:relative;
    overflow:hidden;
    padding:32px 24px;
    background:#F8F3EA;
    border-radius:24px;

}

/* DECOR */

.mobile-plastic-technology-leaf{
    position:absolute;
    top:-24px;
    right:-24px;
    width:110px;
    opacity:.08;
    pointer-events:none;

}

.mobile-plastic-technology-wave{
    position:absolute;
    bottom:-18px;
    left:-18px;
    width:82px;
    opacity:.08;
    pointer-events:none;

}

/* VISUEL */

.mobile-plastic-technology-visual{
    position:relative;
    z-index:2;
    display:block;
    width:120px;
    height:auto;
    margin:0 auto 18px;

}

/* CONTENT */

.mobile-plastic-technology-content{
    position:relative;
    z-index:2;

}

.mobile-plastic-technology-content p{
    margin-bottom:16px;
    font-family:'Inter',sans-serif;
    font-size:14px;
    line-height:1.65;
    color:#444;

}

.mobile-plastic-technology-content p:last-child{
    margin-bottom:0;

}

.mobile-plastic-technology-content strong{
    color:var(--green-primary);
    font-weight:600;

}

/* CTA */

.mobile-plastic-technology-button{
    position:relative;
    z-index:2;
    margin-top:24px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:280px;
    margin-left:auto;
    margin-right:auto;
    height:46px;
    border-radius:999px;
    background:#0B5D3F;
    color:#F8F3EA;
    text-decoration:none;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:700;

}

/*M5.14.06 CARACTÉRISTIQUES TECHNIQUES */

.plastic-specs-section{
    display:none;
}

.tablet-plastic-specs-section{
    display:none;
}

.mobile-plastic-specs-section{
    display:block;
    padding:0 0 48px;
}

/* MENTION DES AUTRES CONTENANCES */

.mobile-plastic-specs-sizes{
    margin:18px 0 0;
    font-family:'Inter',sans-serif;
    font-size:13px;
    line-height:1.5;
    font-weight:500;
    color:var(--text-secondary);
    text-align:center;
}

/*M5.14.07 CONDITIONNEMENT */

.plastic-packaging-section{
    display:none;
}

.tablet-plastic-packaging-section{
    display:none;
}

.mobile-plastic-packaging-section{
    display:block;
    padding:0 0 48px;
}

/* ===================================
M5.15 CONTACT PAGE
==================================== */
/*M5.15.01 HERO */
/* Illustration masquée -> le hero passe en 1 colonne (texte seul).
   grid-template-columns:1fr écrase le "1fr 0.8fr" hérité du M3.
   Titre/description réduits pour le mobile ; padding gauche remis à 0
   (le container gère déjà les marges latérales). */

    .contact-hero-visual {
        display: none;
    }

    .contact-hero-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-hero-content {
        padding-left: 0;
    }

    .contact-hero-title-green {
        font-size: 36px;
    }

    .contact-hero-title-dark {
        font-size: 32px;
    }

    .contact-hero-description {
        font-size: 15px;
    }

/*M5.15.02 FORM */
/* Form + sidebar déjà empilés (hérité du M4.15). Ici on adapte les
   largeurs internes : les 4 champs Nom/Société/Email/Tél passent en
   1 colonne, et on resserre le padding de la carte sidebar. */

    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-sidebar {
        padding: 24px;
    }

/* ===================================
M5.16 SOCIETE PAGE
==================================== */
/*M5.16.01 HERO */
/* Illustration masquée, hero en 1 colonne, titres réduits (comme contact). */

    .societe-hero-visual {
        display: none;
    }

    .societe-hero-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .societe-hero-content {
        padding-left: 0;
    }

    .societe-hero-title-green {
        font-size: 36px;
    }

    .societe-hero-title-dark {
        font-size: 32px;
    }

    .societe-hero-description {
        font-size: 15px;
    }

/*M5.16.02 GRILLES + SECTIONS */

    .societe-advantages-grid {
        grid-template-columns: 1fr;
    }

    .societe-section,
    .societe-benefits-section {
        padding: 0 0 40px;
    }

/* ===================================
M5.17 ENGAGEMENT PAGE
==================================== */
/*M5.17.01 HERO */
/* Illustration masquée, hero 1 colonne, titres réduits. */

    .engagement-hero-visual {
        display: none;
    }

    .engagement-hero-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .engagement-hero-content {
        padding-left: 0;
    }

    .engagement-hero-title-green {
        font-size: 36px;
    }

    .engagement-hero-title-dark {
        font-size: 32px;
    }

    .engagement-hero-description {
        font-size: 15px;
    }

/*M5.17.02 GRILLE + SECTIONS */

    .engagement-advantages-grid {
        grid-template-columns: 1fr;
    }

    .engagement-page-section,
    .engagement-benefits-section {
        padding: 0 0 40px;
    }

    .engagement-subtitle {
        font-size: 18px;
    }


/* ===================================
M5.18 MENTIONS PAGE
==================================== */
/*M5.18.01 HERO */
/* Hero une colonne, sans padding latéral, titres réduits. */

    .mentions-hero-content {
        padding-left: 0;
    }

    .mentions-hero-title-green {
        font-size: 36px;
    }

    .mentions-hero-title-dark {
        font-size: 32px;
    }

/*M5.18.02 SECTIONS */

    .mentions-page-section {
        padding: 0 0 40px;
    }


/* ===================================
M5.19 POLITIQUE DE CONFIDENTIALITÉ PAGE
==================================== */
/*M5.19.01 HERO */
/* Hero une colonne, sans padding latéral, titres réduits. */

    .confidentialite-hero-content {
        padding-left: 0;
    }

    .confidentialite-hero-title-green {
        font-size: 36px;
    }

    .confidentialite-hero-title-dark {
        font-size: 32px;
    }

/*M5.19.02 SECTIONS */

    .confidentialite-page-section {
        padding: 0 0 40px;
    }


/* ===================================
M5.20 POLITIQUE DE COOKIES PAGE
==================================== */
/*M5.20.01 HERO */
/* Hero une colonne, sans padding latéral, titres réduits. */

    .cookies-hero-content {
        padding-left: 0;
    }

    .cookies-hero-title-green {
        font-size: 36px;
    }

    .cookies-hero-title-dark {
        font-size: 32px;
    }

/*M5.20.02 SECTIONS */

    .cookies-page-section {
        padding: 0 0 40px;
    }

    .cookies-subtitle {
        font-size: 18px;
    }

}